Merge pull request '1.0.3' (#6) from dev into main

Reviewed-on: https://codeberg.org/Freeplay/CSS-Styles/pulls/6

Gitea/theme-gitea-modern.css

@@ -1,4 +1,8 @@
-/* This code should work with any preprocessor that supports nesting and the use of "&", like "Stylus" (Recommended) and "Less". */
+/* Update 1.0.3
+- Fixed table stretching due to the grid
+- Better keyboard accessability
+- Fixed Codeberg dropdown
+*/
 :root {
   --base-border-radius: 6px;
 }
@@ -13,6 +17,17 @@ a[rel*="nofollow"]:not(.ui):focus,
   text-decoration: underline;
   text-underline-offset: 5px;
 }
+* {
+  outline: 0px dashed var(--color-primary);
+  outline-offset: -2px;
+  transition: outline-color 0.5s, outline-offset 0.5s;
+}
+:focus-visible:not(input) {
+  box-shadow: 0 0 18px 0px var(--color-primary) !important;
+  border-radius: 2px;
+  outline: 2px solid var(--color-primary) !important;
+  outline-offset: 2px;
+}
 /*** Change Border Radius's ***/
 .ui.buttons .ui.basic.button {
   border-radius: 0;
@@ -139,6 +154,31 @@ a[rel*="nofollow"]:not(.ui):focus,
 .page-content:not(.home) > .middle > .column {
   padding: 0 !important;
 }
+/* No Script Message */
+.full.height > span[style="display: inline !important;"]:first-child {
+  margin: auto;
+  line-height: 40px;
+  padding: 30px;
+  text-align: center;
+/* Remove stuff that isn't needed when JS is disabled */
+}
+.full.height > span[style="display: inline !important;"]:first-child::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 40px;
+  background: var(--color-navbar);
+  border-bottom: 1px solid var(--color-secondary);
+  z-index: -1;
+}
+.full.height > span[style="display: inline !important;"]:first-child ~ .page-content #app,
+.full.height > span[style="display: inline !important;"]:first-child ~ .page-content #user-heatmap,
+.full.height > span[style="display: inline !important;"]:first-child ~ .page-content #user-heatmap + .divider {
+  display: none !important;
+}
+/*** Popups ***/
 /* Tooltips */
 .popup.tiny.inverted {
   background: var(--color-body);
@@ -176,30 +216,6 @@ a[rel*="nofollow"]:not(.ui):focus,
 .settings > .ui.container {
   max-width: 1150px !important;
 }
-/* No Script Message */
-.full.height > span[style="display: inline !important;"]:first-child {
-  margin: auto;
-  line-height: 40px;
-  padding: 30px;
-  text-align: center;
-/* Remove stuff that isn't needed when JS is disabled */
-}
-.full.height > span[style="display: inline !important;"]:first-child::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 40px;
-  background: var(--color-navbar);
-  border-bottom: 1px solid var(--color-secondary);
-  z-index: -1;
-}
-.full.height > span[style="display: inline !important;"]:first-child ~ .page-content #app,
-.full.height > span[style="display: inline !important;"]:first-child ~ .page-content #user-heatmap,
-.full.height > span[style="display: inline !important;"]:first-child ~ .page-content #user-heatmap + .divider {
-  display: none !important;
-}
 /** Other Elements **/
 #user-heatmap {
   overflow: auto hidden;
@@ -231,6 +247,20 @@ a[rel*="nofollow"]:not(.ui):focus,
 .label:not(.basic) svg {
   margin-right: 4px;
 }
+/* Alerts */
+.alert-primary.p-10 {
+  border: 0 !important;
+  padding: 20px !important;
+}
+.alert-primary.p-10 .close span {
+  font-size: 1.7em;
+  font-weight: 200;
+  padding-right: 6px;
+}
+.alert-primary.p-10 h4 {
+  margin-right: 1.7em;
+  font-weight: 600;
+}
 /*** Menu's ***/
 .ui.tabular.menu,
 .ui.tight.menu {
@@ -376,6 +406,12 @@ html {
   box-sizing: border-box;
   transition: border 0.5s, padding 0.7s;
 }
+#navbar > .item:not(.brand) > span,
+#navbar > .right > .item > span {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
 #navbar > .item:not(.brand):hover,
 #navbar > .right > .item:hover,
 #navbar > .item:not(.brand).active,
@@ -509,6 +545,7 @@ html {
     background: none;
     color: var(--color-text);
     opacity: 0.7;
+    border-radius: 12px !important;
   }
   .page-content.repository:not(.issues.repository.milestones):not(.new:not(.issue)) .header-wrapper .tabs .tabular .item svg {
     margin: 0;
@@ -732,7 +769,6 @@ html {
 }
 .page-content.repository:not(.milestones) > .ui.container #repo-files-table {
   margin-top: 0;
-  overflow: hidden;
   background: none !important;
 }
 .page-content.repository:not(.milestones) > .ui.container #repo-files-table thead {
@@ -769,6 +805,15 @@ html {
   display: inline-flex !important;
   transform: translateY(1px);
 }
+.page-content.repository:not(.milestones) > .ui.container #repo-files-table thead .message-wrapper {
+  overflow: visible;
+  display: inline-flex;
+}
+.page-content.repository:not(.milestones) > .ui.container #repo-files-table thead .message-wrapper a {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
 .page-content.repository:not(.milestones) > .ui.container #repo-files-table thead .commit-body {
   padding: 6px;
   padding-right: 0;
@@ -789,7 +834,15 @@ html {
 .page-content.repository:not(.milestones) > .ui.container #repo-files-table tr:focus-within td:nth-child(2)::before {
   opacity: 0.1;
 }
+.page-content.repository:not(.milestones) > .ui.container #repo-files-table .truncate {
+  overflow: visible;
+  display: inline-flex;
+}
 .page-content.repository:not(.milestones) > .ui.container #repo-files-table .truncate a {
+  margin: -8px 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
   width: 100%;
   color: var(--color-text);
 }
@@ -842,6 +895,8 @@ html {
     max-width: 100% !important;
     display: grid;
     grid-template-columns: calc(100% - 100px) 100px;
+    grid-template-rows: min-content !important;
+    align-items: flex-start;
   }
   .page-content.repository:not(.milestones).file > .ui.container > *,
   .page-content.repository:not(.milestones).commits > .ui.container > *,
@@ -852,7 +907,7 @@ html {
   .page-content.repository:not(.milestones).commits > .ui.container .repository-summary,
   .page-content.repository:not(.milestones).branches > .ui.container .repository-summary {
     grid-column: 2;
-    grid-row: 1/span 6;
+    grid-row: 1/span 50;
     border: 0;
     margin-top: 12px !important;
     margin-left: 30px;
@@ -1407,6 +1462,9 @@ html {
 .ui.repository.list .item:focus-within {
   box-shadow: var(--lm-shadow);
 }
+.ui.repository.list .item:focus-within {
+  outline: 1px solid var(--color-primary) !important;
+}
 .ui.repository.list .item .header {
   display: contents !important;
 }
@@ -1695,15 +1753,6 @@ html {
   margin-right: 0 !important;
   margin-bottom: 1rem !important;
 }
-.dashboard > .ui.container #app codeberg-announcement-widget > div .close span {
-  font-size: 1.7em;
-  font-weight: 200;
-  margin-right: 2px;
-}
-.dashboard > .ui.container #app codeberg-announcement-widget > div h4 {
-  margin-right: 1.7em;
-  font-weight: 600;
-}
 .dashboard > .ui.container #app .tabable {
   background: none;
   margin-right: 0 !important;

Gitea/theme-gitea-modern.styl

@@ -1,7 +1,14 @@
-/* This code should work with any preprocessor that supports nesting and the use of "&", like "Stylus" (Recommended) and "Less". */
+
+	
+/* Update 1.0.3
+- Fixed table stretching due to the grid
+- Better keyboard accessability
+- Fixed Codeberg dropdown
+*/
 
 :root {
 	--base-border-radius: 6px;
+	
 }
 html.theme-gitea, html.theme-arc-green {
 	--fonts-override: var(--fonts-regular);
@@ -12,6 +19,17 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) {
 		text-underline-offset: 5px;
 	}
 }
+* {
+	outline: 0px dashed var(--color-primary);
+	outline-offset: -2px;
+	transition: outline-color .5s, outline-offset .5s;
+}
+:focus-visible:not(input) {
+	box-shadow: 0 0 18px 0px var(--color-primary) !important;
+	border-radius: 2px;
+	outline: 2px solid var(--color-primary) !important;
+	outline-offset: 2px;
+}
 
 @keyframes slideInY {
 	from { opacity: 0; transform: scale(.97); }
@@ -145,6 +163,37 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) {
 	}
 }
 
+
+/* No Script Message */
+.full.height > span[style="display: inline !important;"]:first-child {
+	margin: auto;
+	line-height: 40px;
+	padding: 30px;
+	text-align: center;
+	&::before {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		height: 40px;
+		background: var(--color-navbar);
+		border-bottom: 1px solid var(--color-secondary);
+		z-index: -1;
+	}
+
+	/* Remove stuff that isn't needed when JS is disabled */
+	& ~ .page-content {
+		#app, #user-heatmap, #user-heatmap + .divider {
+			display: none !important;
+		}
+	}
+
+}
+
+
+
+/*** Popups ***/
 /* Tooltips */
 .popup.tiny.inverted {
 	background: var(--color-body);
@@ -186,32 +235,8 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) {
 }
 
 
-/* No Script Message */
-.full.height > span[style="display: inline !important;"]:first-child {
-	margin: auto;
-	line-height: 40px;
-	padding: 30px;
-	text-align: center;
-	&::before {
-		content: "";
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		height: 40px;
-		background: var(--color-navbar);
-		border-bottom: 1px solid var(--color-secondary);
-		z-index: -1;
-	}
 
-	/* Remove stuff that isn't needed when JS is disabled */
-	& ~ .page-content {
-		#app, #user-heatmap, #user-heatmap + .divider {
-			display: none !important;
-		}
-	}
 
-}
 
 /** Other Elements **/
 #user-heatmap {
@@ -248,6 +273,26 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) {
 }
 
 
+
+/* Alerts */
+.alert-primary.p-10 {
+	border: 0 !important;
+	padding: 20px !important;
+	.close {
+		// padding: 10px;
+		span {
+			font-size: 1.7em;
+			font-weight: 200;
+			padding-right: 6px;
+		}
+	}
+	h4 {
+		margin-right: 1.7em;
+		font-weight: 600;
+	}
+}
+
+
 /*** Menu's ***/
 .ui.tabular.menu, .ui.tight.menu {
 	position: relative;
@@ -402,6 +447,11 @@ html {
 		background: none !important;
 		box-sizing: border-box;
 		transition: border .5s, padding .7s;
+		& > span {
+			height: 100%;
+			display: flex;
+			align-items: center;
+		}
 		&:hover, &.active, &:focus {
 			border-bottom: 1px solid var(--color-primary);
 			transition: border .1s;
@@ -532,6 +582,7 @@ html {
 						background: none;
 						color: var(--color-text);
 						opacity: .7;
+						border-radius: 12px !important;
 						svg {
 							margin: 0;
 							width: 22px;
@@ -762,7 +813,6 @@ html {
 
 		#repo-files-table {
 			margin-top: 0;
-			overflow: hidden;
 			background: none !important;
 			thead {
 				position: relative;
@@ -798,6 +848,16 @@ html {
 					transform: translateY(1px);
 				}
 				
+				.message-wrapper {
+					overflow: visible;
+					display: inline-flex;
+					a {
+						overflow: hidden;
+						text-overflow: ellipsis;
+						max-width: 100%;
+					}
+				}
+
 				.commit-body {
 					padding: 6px;
 					padding-right: 0;
@@ -821,7 +881,13 @@ html {
 			}
 
 			.truncate {
+				overflow: visible;
+				display: inline-flex;
 				a {
+					margin: -8px 0;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					max-width: 100%;
 					width: 100%;
 					color: var(--color-text);
 					&:hover, &:focus {
@@ -885,12 +951,14 @@ html {
 				max-width: 100% !important;
 				display: grid;
 				grid-template-columns: calc(100% - 100px) 100px;
+				grid-template-rows: min-content !important;
+				align-items: flex-start;
 				& > * {
 					grid-column: 1;
 				}
 				.repository-summary {
 					grid-column: 2;
-					grid-row: 1 / span 6;
+					grid-row: 1 / span 50;
 					border: 0;
 					margin-top: 12px !important;
 					margin-left: 30px;
@@ -1330,6 +1398,9 @@ html {
 		&:hover, &:focus-within {
 			box-shadow: var(--lm-shadow);
 		}
+		&:focus-within {
+			outline: 1px solid var(--color-primary) !important;
+		}
 
 		.header {
 			display: contents !important;
@@ -1625,15 +1696,6 @@ html {
 					margin-top: 0 !important;
 					margin-right: 0 !important;
 					margin-bottom: 1rem !important;
-					.close span {
-						font-size: 1.7em;
-						font-weight: 200;
-						margin-right: 2px;
-					}
-					h4 {
-						margin-right: 1.7em;
-						font-weight: 600;
-					}
 				}
 			}
 
@@ -1732,3 +1794,4 @@ footer {
 	}
 }
 	
+