Merge pull request '1.0.11' (#19) from dev into main

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

Gitea/theme-gitea-modern.styl

@@ -1,15 +1,17 @@
 // main: theme-gitea-modern.user.styl, out: theme-gitea-modern.css, compress: true
 // Ignore above, just compiler stuff
 
-/* Update 1.0.10
+/* Update 1.0.11
-- Tweaked the look of the dashboard and other menu's / tabs
+- Removed sticky positioning on Releases page due to z-index issues
-- Other fixes
+- Fixed tooltips z-index
+- Fixed button heights in some areas
+- Fixed explore page on mobile (I'll try to fix more mobile issues later.)
+- Tweaked Header Padding
 */
 
 
 :root {
 	--base-border-radius: 6px;
-
 }
 html.theme-gitea, html.theme-arc-green {
 	--fonts-override: var(--fonts-regular);
@@ -75,7 +77,7 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) {
 .ui.compact.button {
 	padding-top: .3em;
 	padding-bottom: .3em;
-	min-height: .8em;
+	min-height: 2.4em;
 	display: inline-flex;
 	align-items: center;
 	svg {
@@ -87,7 +89,6 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) {
 }
 
 
-
 /*** Inputs ***/
 
 .input.action.fluid {
@@ -150,6 +151,54 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) {
 	}
 }
 
+
+/*** Popups ***/
+/* Tooltips */
+.popup.tiny.inverted {
+	background: var(--color-body);
+	color: var(--color-text);
+	box-shadow: var(--lm-large-shadow);
+	border: 1px solid var(--color-secondary);
+	pointer-events: none;
+	z-index: 9999999;
+	&::before {
+		background: var(--color-body) !important;
+		z-index: -99999 !important;
+		border-color: var(--color-secondary) !important;
+	}
+}
+.ui.left.popup::before {
+	border: 0;
+	border-top: 1px solid;
+	border-right: 1px solid;
+}
+.ui.right.popup::before {
+	border: 0;
+	border-left: 1px solid;
+	border-bottom: 1px solid;
+}
+.ui.top.popup::before {
+	border: 0;
+	border-right: 1px solid;
+	border-bottom: 1px solid;
+}
+.ui.bottom.popup::before {
+	border: 0;
+	border-top: 1px solid;
+	border-left: 1px solid;
+}
+
+
+.settings > .ui.container {
+	max-width: 1150px !important;
+}
+
+
+
+
+
+/** Other Elements **/
+
 // Filter buttons & New Issue buttons on mobile
 .ui.two.column.stackable.grid > .column {
 	width: auto !important;
@@ -200,54 +249,7 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) {
 
 }
 
-
+// Make heatmap not smoll on smoll screens
-
-/*** Popups ***/
-/* Tooltips */
-.popup.tiny.inverted {
-	background: var(--color-body);
-	color: var(--color-text);
-	box-shadow: var(--lm-large-shadow);
-	border: 1px solid var(--color-secondary);
-	pointer-events: none;
-	z-index: 1000;
-	&::before {
-		background: var(--color-body) !important;
-		z-index: -99999 !important;
-		border-color: var(--color-secondary) !important;
-	}
-}
-.ui.left.popup::before {
-	border: 0;
-	border-top: 1px solid;
-	border-right: 1px solid;
-}
-.ui.right.popup::before {
-	border: 0;
-	border-left: 1px solid;
-	border-bottom: 1px solid;
-}
-.ui.top.popup::before {
-	border: 0;
-	border-right: 1px solid;
-	border-bottom: 1px solid;
-}
-.ui.bottom.popup::before {
-	border: 0;
-	border-top: 1px solid;
-	border-left: 1px solid;
-}
-
-
-.settings > .ui.container {
-	max-width: 1150px !important;
-}
-
-
-
-
-
-/** Other Elements **/
 #user-heatmap {
 	overflow: auto hidden;
 	justify-content: flex-start;
@@ -456,16 +458,14 @@ html {
 /*** Header ***/
 .following.bar {
 	--min-height: 60px;
-
 	background: none !important;
 	border-bottom: 1px solid var(--color-secondary) !important;
 	background-color: var(--color-navbar) !important;
 	position: relative;
 	min-height: var(--min-height);
 	align-items: center;
-	z-index: 99999;
 	#navbar {
-		padding: 0 calc(2px + 1%) !important;
+		padding: 0 calc(4px + 1%) !important;
 		background: none !important;
 		max-width: 100rem;
 		transition: padding 1s;
@@ -478,7 +478,7 @@ html {
 			font-size: 1rem !important;
 			font-weight: 600;
 
-			padding: 0 calc(0px + 1.1%);
+			padding: 0 calc(0px + 1%);
 			height: calc(var(--min-height) + 1px) !important;
 			margin: 0 !important;
 			border-radius: 0;
@@ -1293,9 +1293,6 @@ html {
 #release-list {
 	padding-left: 0;
 	.four.wide.column {
-		position: sticky !important;
-		top: 0px;
-		height: min-content;
 		width: 150px !important;
 	}
 }
@@ -1625,8 +1622,8 @@ html {
 	grid-gap: 16px;
 
 	.item {
-		width: 400px;
 		width: 100%;
+		max-width: calc(100vw - 40px);
 		min-height: unset !important;
 		padding: 14px 16px !important;
 		border: 1px solid var(--color-secondary);

Gitea/theme-gitea-modern.user.css

@@ -1,6 +1,6 @@
 /* ==UserStyle==
 @name           Gitea Modern
-@version        1.0.10
+@version        1.0.11
 @description    A modern style for Gitea and Codeberg!
 @updateURL      https://codeberg.org/Freeplay/CSS-Styles/raw/branch/main/Gitea/theme-gitea-modern.user.css
 @homepageURL    https://codeberg.org/Freeplay/CSS-Styles
@@ -85,7 +85,7 @@
   .ui.compact.button {
     padding-top: 0.3em;
     padding-bottom: 0.3em;
-    min-height: 0.8em;
+    min-height: 2.4em;
     display: inline-flex;
     align-items: center;
   }
@@ -150,6 +150,42 @@
     padding-left: 0 !important;
     padding-right: 0 !important;
   }
+  .popup.tiny.inverted {
+    background: var(--color-body);
+    color: var(--color-text);
+    box-shadow: var(--lm-large-shadow);
+    border: 1px solid var(--color-secondary);
+    pointer-events: none;
+    z-index: 9999999;
+  }
+  .popup.tiny.inverted::before {
+    background: var(--color-body) !important;
+    z-index: -99999 !important;
+    border-color: var(--color-secondary) !important;
+  }
+  .ui.left.popup::before {
+    border: 0;
+    border-top: 1px solid;
+    border-right: 1px solid;
+  }
+  .ui.right.popup::before {
+    border: 0;
+    border-left: 1px solid;
+    border-bottom: 1px solid;
+  }
+  .ui.top.popup::before {
+    border: 0;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+  }
+  .ui.bottom.popup::before {
+    border: 0;
+    border-top: 1px solid;
+    border-left: 1px solid;
+  }
+  .settings > .ui.container {
+    max-width: 1150px !important;
+  }
   .ui.two.column.stackable.grid > .column {
     width: auto !important;
     flex-grow: 1;
@@ -191,42 +227,6 @@
   .full.height > span[style="display: inline !important;"]:first-child ~ .page-content #user-heatmap + .divider {
     display: none !important;
   }
-  .popup.tiny.inverted {
-    background: var(--color-body);
-    color: var(--color-text);
-    box-shadow: var(--lm-large-shadow);
-    border: 1px solid var(--color-secondary);
-    pointer-events: none;
-    z-index: 1000;
-  }
-  .popup.tiny.inverted::before {
-    background: var(--color-body) !important;
-    z-index: -99999 !important;
-    border-color: var(--color-secondary) !important;
-  }
-  .ui.left.popup::before {
-    border: 0;
-    border-top: 1px solid;
-    border-right: 1px solid;
-  }
-  .ui.right.popup::before {
-    border: 0;
-    border-left: 1px solid;
-    border-bottom: 1px solid;
-  }
-  .ui.top.popup::before {
-    border: 0;
-    border-right: 1px solid;
-    border-bottom: 1px solid;
-  }
-  .ui.bottom.popup::before {
-    border: 0;
-    border-top: 1px solid;
-    border-left: 1px solid;
-  }
-  .settings > .ui.container {
-    max-width: 1150px !important;
-  }
   #user-heatmap {
     overflow: auto hidden;
     justify-content: flex-start;
@@ -416,10 +416,9 @@
     position: relative;
     min-height: var(--min-height);
     align-items: center;
-    z-index: 99999;
   }
   .following.bar #navbar {
-    padding: 0 calc(2px + 1%) !important;
+    padding: 0 calc(4px + 1%) !important;
     background: none !important;
     max-width: 100rem;
     transition: padding 1s;
@@ -431,7 +430,7 @@
     color: var(--color-text-dark) !important;
     font-size: 1rem !important;
     font-weight: 600;
-    padding: 0 calc(0px + 1.1%);
+    padding: 0 calc(0px + 1%);
     height: calc(var(--min-height) + 1px) !important;
     margin: 0 !important;
     border-radius: 0;
@@ -1534,9 +1533,6 @@
     padding-left: 0;
   }
   #release-list .four.wide.column {
-    position: sticky !important;
-    top: 0px;
-    height: min-content;
     width: 150px !important;
   }
   .explore,
@@ -1946,8 +1942,8 @@
   }
   .ui.repository.list .item,
   .ui.user.list .item {
-    width: 400px;
     width: 100%;
+    max-width: calc(100vw - 40px);
     min-height: unset !important;
     padding: 14px 16px !important;
     border: 1px solid var(--color-secondary);