1.0.4

- Combined feed list to make it more compact, while still looking nice.
- Styled User / Organization lists
- Added minor blur to tabs in User page

Gitea/theme-gitea-modern.styl

@@ -1,14 +1,16 @@
+// main: theme-gitea-modern.user.styl, out: theme-gitea-modern.css
 
-	
+
-/* Update 1.0.3
+/* Update 1.0.4
-- Fixed table stretching due to the grid
+- Combined feed list to make it more compact, while still looking nice.
-- Better keyboard accessability
+- Styled User / Organization lists
-- Fixed Codeberg dropdown
+- Added minor blur to tabs in User page
 */
 
+
 :root {
 	--base-border-radius: 6px;
-	
+
 }
 html.theme-gitea, html.theme-arc-green {
 	--fonts-override: var(--fonts-regular);
@@ -698,7 +700,7 @@ html {
 		#repo-topics {
 			margin: 0 -4px;
 			margin-bottom: 0 !important;
-			margin-top: -.5rem !important; 
+			margin-top: -.5rem !important;
 			align-items: flex-start !important;
 			& > *:last-child {
 				margin: 2px !important;
@@ -847,7 +849,7 @@ html {
 					display: inline-flex !important;
 					transform: translateY(1px);
 				}
-				
+
 				.message-wrapper {
 					overflow: visible;
 					display: inline-flex;
@@ -1006,10 +1008,17 @@ html {
 						border: 0 !important;
 					}
 					.language-stats {
-						border-radius: 100px !important;
+						border-radius: var(--base-border-radius) !important;
 						overflow: hidden !important;
 						pointer-events: none;
-						top: 0;
+						// top: unset;
+						// position: absolute;
+						// bottom: 0;
+						// height: 10px;
+						// width: 80vh;
+						// transform: rotate(90deg) translate(-60%, -55px);
+						// max-width: 500px;
+						// width: 100px;
 					}
 					.horizontal.list:not(.two) {
 						padding-top: 1rem;
@@ -1130,11 +1139,11 @@ html {
 }
 
 /*** USER PROFILES & EXPLORE PAGES ***/
-.explore, .user:not(.list), .profile {
+.explore, .page-content.user, .profile {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
-	
+
 	/* Responsive explore page */
 	&.explore > .ui.container {
 		max-width: calc(100vw - 40px);
@@ -1176,7 +1185,7 @@ html {
 			width: 320px !important;
 			flex: 1 0 320px !important;
 			position: sticky;
-			bottom: 0;
+			bottom: 10px;
 			align-self: flex-end;
 			min-height: 100vh;
 			.card {
@@ -1205,12 +1214,12 @@ html {
 						font-weight: 600;
 						padding-left: .7rem;
 						margin: 1.5rem 0;
-						
+
 						&.header {
 							font-weight: 500;
 							letter-spacing: .1em;
-							height: 44px;
+							height: 39px;
-							line-height: 50px;
+							line-height: 40px;
 							margin-bottom: -1.2em;
 							margin-top: 0;
 							background: var(--color-body);
@@ -1271,21 +1280,32 @@ html {
 				margin-bottom: 1.5rem;
 				position: sticky;
 				top: 0px !important;
-				margin-top: -45px;
+				margin-top: -40px;
-				height: 45px;
+				height: 40px;
 				z-index: 9999;
 				background-color: var(--color-body);
+				@supports (backdrop-filter: blur(10px)) {
+					backdrop-filter: blur(10px);
+					background-color: transparent;
+					&::before {
+						content: "";
+						position: absolute;
+						inset: 0;
+						background-color: var(--color-body);
+						opacity: .8;
+					}
+				}
 			}
 			&::before {
 				content: "";
 				position: sticky;
 				margin: 0 !important;
 				margin-left: -100vw !important;
-				margin-top: 45px !important;
+				margin-top: 40px !important;
 				width: 200vw;
 				display: block;
 				border-bottom: 1px solid var(--color-secondary);
-				top: 44px;
+				top: 39px;
 				z-index: -1;
 			}
 		}
@@ -1309,13 +1329,32 @@ html {
 /* DASHBOARD / USER FEEDS */
 .ui.container > .news, .feeds > .news {
 	border: 1px solid var(--color-secondary) !important;
+	border-bottom: none !important;
 	background: var(--color-box-body);
-	margin-bottom: 1rem;
+	// margin-bottom: 1rem;
-	border-radius: var(--base-border-radius);
+	border-radius: var(--base-border-radius) var(--base-border-radius) 0 0;
 	padding: 10px 12px !important;
-	position: relative;		
+	position: relative;
-
+	& + .news {
+		border-radius: 0 !important;
+	}
+	&:last-child {
+		border-radius: 0 0 var(--base-border-radius) var(--base-border-radius) !important;
+		border-bottom: 1px solid var(--color-secondary) !important;
+	}
+	&::before {
+		content: "";
+		position: absolute;
+		inset: 0;
+		background: var(--color-primary);
+		opacity: 0;
+		// z-index: -1;
+	}
+	&:hover::before, &:focus-within::before {
+		opacity: .05;
+	}
 	.ui.left {
+		width: 40px;
 		img {
 			margin: 0 !important;
 			margin-top: 2px !important;
@@ -1326,6 +1365,7 @@ html {
 	.ui.grid {
 		margin: 0 !important;
 		padding: 0 !important;
+		padding-top: 1px !important;
 		& > .column {
 			padding: 0 !important;
 			width: 100% !important;
@@ -1367,7 +1407,7 @@ html {
 			margin-bottom: 0;
 		}
 		ul {
-			border-left: 4px solid var(--color-secondary);				
+			border-left: 4px solid var(--color-secondary);
 		}
 	}
 	.divider {
@@ -1376,12 +1416,13 @@ html {
 }
 
 /* REPOSITORY LIST */
-.ui.repository.list {
+.ui.repository.list,
+.ui.user.list {
 	margin-top: 16px !important;
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
 	grid-gap: 16px;
-	
+
 	.item {
 		width: 400px;
 		width: 100%;
@@ -1491,6 +1532,30 @@ html {
 				}
 			}
 		}
+
+		// User & Organization cards
+		.content {
+			padding-left: 12px;
+			margin-bottom: -.4em;
+			.header {
+				a {
+					font-weight: 600;
+					text-transform: capitalize;
+				}
+			}
+			.description {
+				display: flex;
+				flex-direction: column;
+				padding-left: 22px;
+				line-height: 1.8em;
+				margin-top: .5em;
+				svg {
+					margin-bottom: -1.45em !important;
+					margin-left: -22px !important;
+				}
+			}
+		}
+
 	}
 
 }
@@ -1501,7 +1566,6 @@ html {
 	flex-wrap: wrap;
 	margin: auto;
 	max-width: 100%;
-	padding: 30px 10px;
 	padding: 30px 0;
 	width: 1300px;
 	margin-bottom: -45px;
@@ -1539,7 +1603,7 @@ html {
 			& > .item, & > .right > .item {
 
 				flex-direction: column;
-				margin: 0 20px !important;
+				margin: 0px !important;
 				text-align: center;
 				flex-grow: 1;
 				display: flex !important;
@@ -1554,7 +1618,7 @@ html {
 				& > .dropdown, .button {
 					text-indent: 0px !important;
 				}
-				span { 
+				span {
 					text-align: center;
 
 				}
@@ -1595,7 +1659,7 @@ html {
 		margin: 0 auto !important;
 		display: flex;
 		flex-wrap: wrap-reverse;
-		flex: 9999 1 650px; 
+		flex: 9999 1 650px;
 
 		--container-padding-x: calc(2.5% + 0px);
 
@@ -1660,7 +1724,7 @@ html {
 		#app {
 			height: min-content;
 			position: sticky;
-			
+
 			bottom: 0;
 			align-self: flex-end;
 			margin: 0 auto !important;
@@ -1691,7 +1755,7 @@ html {
 			}
 			codeberg-announcement-widget {
 				background: none !important;
-				
+
 				& > div {
 					margin-top: 0 !important;
 					margin-right: 0 !important;
@@ -1793,5 +1857,3 @@ footer {
 		padding: 0 40px;
 	}
 }
-	
-