From 8c8be8319e8cb113f6fc20a1eaba8acc1ee5d81e Mon Sep 17 00:00:00 2001
From: freeplay <freeplay@duck.com>
Date: Tue, 10 Oct 2023 17:16:37 -0400
Subject: [PATCH] 1.8.1 - Mobile: Revert to side nav when browser doesn't
 support :has()

---
 modern.css      | 141 +++++++++++-------
 modern.user.css | 376 +++++++++++++++++++++---------------------------
 2 files changed, 258 insertions(+), 259 deletions(-)

diff --git a/modern.css b/modern.css
index 2809db2..818e378 100644
--- a/modern.css
+++ b/modern.css
@@ -912,16 +912,14 @@ a:focus-visible,
     padding-inline: 15px;
   }
 }
-body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header__bar {
-  background: inherit !important;
-}
 #mastodon .account-timeline__header .account__header__bar .account__header__tabs {
   overflow: visible !important;
   position: relative;
+  align-items: flex-end;
   padding: 0;
-  padding-top: 10px;
   height: unset !important;
   margin-top: -55px !important;
+  isolation: isolate;
 }
 #mastodon .account-timeline__header .account__header__bar .account__header__tabs::before {
   content: "";
@@ -929,11 +927,12 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
   top: 0;
   left: -20px;
   right: -20px;
-  bottom: -40px;
+  bottom: -100px;
   backdrop-filter: blur(40px);
   filter: brightness(1.1);
   pointer-events: none;
   opacity: 0.7;
+  z-index: -1;
   clip-path: inset(55px 0 0 0 round var(--radius));
   mask: linear-gradient(transparent 55px, #000 50px, transparent);
   -webkit-mask: linear-gradient(transparent 55px, #000 50px, transparent);
@@ -945,16 +944,19 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
   margin-inline-start: 0 !important;
   overflow: visible !important;
   position: relative;
+  margin-top: 20px;
 }
 #mastodon .account-timeline__header .account__header__bar .avatar .account-role {
   position: absolute;
   bottom: 0;
-  left: 100%;
-  border-radius: var(--radius-round);
+  left: 110%;
+  border-radius: var(--radius);
 }
 #mastodon .account-timeline__header .account__header__bar .account__avatar {
   border: 0;
   box-shadow: var(--shadow);
+  background: none;
+  background-size: cover !important;
 }
 #mastodon .account-timeline__header .account__header__tabs__name {
   margin-bottom: 0;
@@ -966,6 +968,7 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
   flex-wrap: wrap;
   white-space: unset;
   gap: 0 0.4em;
+  font-weight: 600;
 }
 #mastodon .account-timeline__header .account__header__badges {
   margin-top: 10px;
@@ -980,8 +983,10 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
 #mastodon .account-timeline__header .account__header__bio > * {
   padding-inline: 0;
 }
+#mastodon .account-timeline__header .account__header__content {
+  padding-top: 0;
+}
 #mastodon .account-timeline__header .account__header__extra {
-  line-height: 1.5;
   margin-top: 1em;
 }
 #mastodon :not(.admin-account-bio) > div > .account__header__fields,
@@ -989,6 +994,7 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
   display: flex;
   flex-wrap: wrap;
   gap: 2px;
+  margin-bottom: 20px;
   background: none;
   border-radius: var(--radius);
   overflow: hidden;
@@ -3288,22 +3294,39 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
     border: 0 !important;
     overflow: visible;
   }
+  .ui__header::after {
+    content: "";
+    position: absolute;
+    inset-inline-end: 54px;
+    top: 100%;
+    width: var(--radius);
+    height: var(--radius);
+    background: inherit;
+    mask: radial-gradient(var(--radius) at 0px var(--radius), rgba(0,0,0,0) 100%, #000);
+    -webkit-mask: radial-gradient(var(--radius) at 0px var(--radius), rgba(0,0,0,0) 100%, #000);
+    z-index: 9999;
+  }
+  .rtl .ui__header::after {
+    transform: scaleX(-1);
+  }
   .ui__header .ui__header__logo {
     padding-block: 5px !important;
   }
   .ui__header .ui__header__links {
     min-width: max-content;
     position: sticky;
-    right: 0;
+    inset-inline-end: 50px;
     background: inherit;
   }
+  :has(body) .ui__header .ui__header__links {
+    right: 0;
+  }
   .ui__header [href="/search"] {
     margin-inline-end: 5px;
   }
   .ui__header [href="/publish"] {
     position: fixed;
     bottom: 15px;
-    bottom: 70px;
     inset-inline-end: 15px;
     border-radius: 100px !important;
     border-radius: var(--radius) !important;
@@ -3350,6 +3373,20 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
     opacity: 0 !important;
     pointer-events: none;
   }
+  .ui__header [href^="/@"],
+  .ui__header a.permalink[href] {
+    position: fixed;
+    inset-inline-end: 1px;
+    width: 53px;
+    display: flex;
+    justify-content: center;
+    background: inherit;
+  }
+  :has(body) .ui__header [href^="/@"],
+  :has(body) .ui__header a.permalink[href] {
+    position: static !important;
+    width: unset;
+  }
   #mastodon .tabs-bar__wrapper {
     top: 0;
     background: none;
@@ -3358,27 +3395,30 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
   #mastodon .column-back-button.column-back-button {
     border-radius: 0 !important;
   }
-  #mastodon .columns-area__panels {
+  #mastodon:has(*) [href="/publish"] {
+    bottom: 70px !important;
+  }
+  #mastodon:has(*) .columns-area__panels {
     flex-direction: column;
   }
-  #mastodon .columns-area__panels__main {
+  #mastodon:has(*) .columns-area__panels__main {
     width: 100%;
     border-radius: 0 !important;
     margin: 0 !important;
     border: 0 !important;
   }
-  #mastodon .tabs-bar__wrapper {
+  #mastodon:has(*) .tabs-bar__wrapper {
     transition: none !important;
   }
-  #mastodon:has(.column-header__buttons:empty) .tabs-bar__wrapper {
+  #mastodon:has(*):has(.column-header__buttons:empty) .tabs-bar__wrapper {
     margin-top: -50px;
     margin-bottom: 2px;
     height: 48px;
   }
-  #mastodon .columns-area__panels__pane--navigational {
+  #mastodon:has(*) .columns-area__panels__pane--navigational {
     display: contents;
   }
-  #mastodon .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
+  #mastodon:has(*) .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
     position: relative !important;
     inset: unset !important;
     order: -1;
@@ -3386,7 +3426,7 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
     height: auto;
     white-space: nowrap;
   }
-  #mastodon .columns-area__panels__pane--navigational .navigation-panel {
+  #mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel {
     flex-direction: row;
     margin: 0;
     padding: 0;
@@ -3397,51 +3437,51 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
     overflow: scroll hidden;
     align-items: center;
   }
-  #mastodon .columns-area__panels__pane--navigational .navigation-panel::-webkit-scrollbar {
+  #mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel::-webkit-scrollbar {
     display: none;
   }
-  #mastodon .columns-area__panels__pane--navigational hr {
+  #mastodon:has(*) .columns-area__panels__pane--navigational hr {
     display: none;
   }
-  #mastodon .columns-area__panels__pane--navigational .trends__item__name > span,
-  #mastodon .columns-area__panels__pane--navigational .trends__item__sparkline {
+  #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__name > span,
+  #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__sparkline {
     display: none;
   }
-  #mastodon .columns-area__panels__pane--navigational .navigation-panel__legal,
-  #mastodon .columns-area__panels__pane--navigational h4,
-  #mastodon .columns-area__panels__pane--navigational .trends__item,
-  #mastodon .columns-area__panels__pane--navigational .trends__item__name {
+  #mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel__legal,
+  #mastodon:has(*) .columns-area__panels__pane--navigational h4,
+  #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item,
+  #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__name {
     all: unset;
     display: contents !important;
   }
-  #mastodon .columns-area__panels__pane--navigational .navigation-panel__legal::before,
-  #mastodon .columns-area__panels__pane--navigational h4::before,
-  #mastodon .columns-area__panels__pane--navigational .trends__item::before,
-  #mastodon .columns-area__panels__pane--navigational .trends__item__name::before,
-  #mastodon .columns-area__panels__pane--navigational .navigation-panel__legal::after,
-  #mastodon .columns-area__panels__pane--navigational h4::after,
-  #mastodon .columns-area__panels__pane--navigational .trends__item::after,
-  #mastodon .columns-area__panels__pane--navigational .trends__item__name::after {
+  #mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel__legal::before,
+  #mastodon:has(*) .columns-area__panels__pane--navigational h4::before,
+  #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item::before,
+  #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__name::before,
+  #mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel__legal::after,
+  #mastodon:has(*) .columns-area__panels__pane--navigational h4::after,
+  #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item::after,
+  #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__name::after {
     content: unset;
   }
-  #mastodon .columns-area__panels__pane--navigational h4 a span::after {
+  #mastodon:has(*) .columns-area__panels__pane--navigational h4 a span::after {
     content: ":" !important;
   }
-  #mastodon .columns-area__panels__pane--navigational:has(.getting-started__trends):has(.navigation-panel__sign-in-banner) .flex-spacer {
+  #mastodon:has(*) .columns-area__panels__pane--navigational:has(.getting-started__trends):has(.navigation-panel__sign-in-banner) .flex-spacer {
     border-right: 1px solid var(--border-color);
     height: 50%;
     margin: 10px;
   }
-  #mastodon .columns-area__panels__pane--navigational:has(.getting-started__trends):has(.navigation-panel__sign-in-banner) .getting-started__trends {
+  #mastodon:has(*) .columns-area__panels__pane--navigational:has(.getting-started__trends):has(.navigation-panel__sign-in-banner) .getting-started__trends {
     all: unset;
     display: contents !important;
   }
-  #mastodon .columns-area__panels__pane--navigational:has(.getting-started__trends) .trends__item:last-child a {
+  #mastodon:has(*) .columns-area__panels__pane--navigational:has(.getting-started__trends) .trends__item:last-child a {
     position: relative;
     z-index: 3;
   }
-  #mastodon .columns-area__panels__pane--navigational a,
-  #mastodon .columns-area__panels__pane--navigational h4 > span {
+  #mastodon:has(*) .columns-area__panels__pane--navigational a,
+  #mastodon:has(*) .columns-area__panels__pane--navigational h4 > span {
     position: relative;
     overflow: hidden;
     border-radius: var(--radius);
@@ -3452,8 +3492,8 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
     min-width: max-content;
     transition: padding 0.2s;
   }
-  #mastodon .columns-area__panels__pane--navigational a::before,
-  #mastodon .columns-area__panels__pane--navigational h4 > span::before {
+  #mastodon:has(*) .columns-area__panels__pane--navigational a::before,
+  #mastodon:has(*) .columns-area__panels__pane--navigational h4 > span::before {
     content: "";
     position: absolute;
     inset: 0;
@@ -3462,27 +3502,27 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
     border-radius: inherit;
     transition: inset 0.4s cubic-bezier(0, 0, 0, 1.2), opacity 0.2s;
   }
-  #mastodon .columns-area__panels__pane--navigational a i,
-  #mastodon .columns-area__panels__pane--navigational h4 > span i {
+  #mastodon:has(*) .columns-area__panels__pane--navigational a i,
+  #mastodon:has(*) .columns-area__panels__pane--navigational h4 > span i {
     font-size: 1em;
     width: auto;
     margin-right: 0;
   }
-  #mastodon .columns-area__panels__pane--navigational a.active,
-  #mastodon .columns-area__panels__pane--navigational h4 > span.active {
+  #mastodon:has(*) .columns-area__panels__pane--navigational a.active,
+  #mastodon:has(*) .columns-area__panels__pane--navigational h4 > span.active {
     padding-inline: 1.2em;
     position: relative;
   }
-  #mastodon .columns-area__panels__pane--navigational a.active::before,
-  #mastodon .columns-area__panels__pane--navigational h4 > span.active::before {
+  #mastodon:has(*) .columns-area__panels__pane--navigational a.active::before,
+  #mastodon:has(*) .columns-area__panels__pane--navigational h4 > span.active::before {
     inset: 0 !important;
     opacity: 0.1;
   }
-  #mastodon .columns-area__panels__pane--navigational a > span:not(:first-child),
-  #mastodon .columns-area__panels__pane--navigational h4 > span > span:not(:first-child) {
+  #mastodon:has(*) .columns-area__panels__pane--navigational a > span:not(:first-child),
+  #mastodon:has(*) .columns-area__panels__pane--navigational h4 > span > span:not(:first-child) {
     margin-left: 0.7em;
   }
-  #mastodon .columns-area__panels__pane--navigational span {
+  #mastodon:has(*) .columns-area__panels__pane--navigational span {
     display: unset;
   }
   #mastodon:not(:has(.navigation-panel__sign-in-banner)) .columns-area__panels__main {
@@ -3749,6 +3789,7 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
     border-start-end-radius: var(--radius);
     overflow: clip !important;
     flex-grow: 1;
+    margin-top: 1px;
   }
   #mastodon .columns-area__panels__main > .columns-area--mobile {
     overflow: visible !important;
diff --git a/modern.user.css b/modern.user.css
index e377b77..945c31b 100644
--- a/modern.user.css
+++ b/modern.user.css
@@ -13,20 +13,13 @@
 	 //////////////////////////////////////////////////////////////////// 
 
 	 
-/* Update 1.8.0
-- Mobile: Change the sidebar into a bottom bar!
-- Styled unread count indicator
-- Styled new search page
-- Minimized media in notifications
-- Fixed open in advanced interface notice not showing
-- Fixed overlapping nav buttons in announcements
-- Margins & other fixes, tweaks
-- Glitch-soc: Fixed notes
+/* Update 1.8.1
+- Revert to side nav when browser doesn't support :has()
 */
 
 /* ==UserStyle==
 @name           Mastodon Modern
-@version        1.8.0
+@version        1.8.1
 @description    Drastically improves the look & feel of Mastodon
 @updateURL      https://codeberg.org/Freeplay/Mastodon-Modern/raw/branch/main/modern.user.css
 @homepageURL    https://codeberg.org/Freeplay/Mastodon-Modern
@@ -710,40 +703,33 @@
 				@media (max-width mobileW) {
 					padding-inline 15px
 				}
-				/body:not(.flavour-glitch) & {
-					background inherit !important	
-				}
 				border-radius var(--radius) var(--radius) 0 0
 				margin-top calc(0px - var(--radius)) !important
 				display flex
 				flex-direction column
 				background inherit
-				// &::before {
-				// 	content ""
-				// 	position absolute
-				// 	inset 0
-				// 	border-radius inherit
-				// 	background rgba(220,220,255,0.05)
-				// }
-
+				
 				.account__header__tabs {
 					overflow visible !important
 					position relative
+					align-items flex-end
 					padding 0
-					padding-top 10px
+					// padding-top 10px
 					height unset !important
 					margin-top -55px !important
+					isolation isolate
 					&::before { // Add blur below the account header
 						content ""
 						position absolute
 						top 0
 						left -20px
 						right -20px
-						bottom -40px
+						bottom -100px
 						backdrop-filter blur(40px)
 						filter brightness(1.1)
 						pointer-events none
 						opacity .7
+						z-index -1
 						clip-path: inset(55px 0 0 0 round var(--radius));
 						mask linear-gradient(transparent 55px, black 50px, transparent)
 						-webkit-mask @mask
@@ -756,17 +742,19 @@
 					margin-inline-start 0 !important
 					overflow visible !important
 					position relative
+					margin-top 20px
 					.account-role {
 						position absolute
 						bottom 0
-						left 100%
-						border-radius var(--radius-round)
+						left 110%
+						border-radius var(--radius)
 					}
 				}
 				.account__avatar {
 					border 0
 					box-shadow var(--shadow)
-					// background none
+					background none
+					background-size cover !important
 				}
 			}
 			.account__header__tabs__name {
@@ -778,6 +766,7 @@
 					flex-wrap wrap
 					white-space unset
 					gap 0 .4em
+					font-weight 600
 				}
 			}
 			.account__header__badges {
@@ -793,9 +782,11 @@
 					padding-inline 0
 				}
 			}
+			.account__header__content {
+				padding-top 0
+			}
 
 			.account__header__extra {
-				line-height 1.5
 				margin-top 1em
 			}
 		}
@@ -803,6 +794,7 @@
 			display flex
 			flex-wrap wrap
 			gap 2px
+			margin-bottom 20px
 			background none
 			// margin-inline -10px
 			border-radius var(--radius)
@@ -1306,19 +1298,6 @@
 				inset -10px
 				border-radius var(--radius)
 			}
-/* 			.account__contents {
-				flex-grow 1
-			}
-			.display-name {
-				display contents
-				bdi {
-					display block
-				}
-			}
-			.account__details {
-				display inline-flex
-				margin-left 1em
-			} */
 		}
 		
 		// Fix dropdown note preview
@@ -1975,7 +1954,7 @@
 						background none
 					}
 
-					.column-header/*, .column-header__buttons button:not(.active)*/ {
+					.column-header {
 						background none !important
 						overflow hidden
 						border 0
@@ -2418,14 +2397,35 @@
 				gap 10px
 				border 0 !important
 				overflow visible
+				
+				&::after {
+					content ""
+					position absolute
+					inset-inline-end 54px
+					top 100%
+					width var(--radius)
+					height var(--radius)
+					background inherit
+					mask radial-gradient(var(--radius) at 0px var(--radius),#0000 100%,#000)
+					-webkit-mask @mask
+					z-index 9999
+					
+					/.rtl & {
+						transform scaleX(-1)
+					}
+				}
+				
 				.ui__header__logo {
 					padding-block 5px !important
 				}
 				.ui__header__links {
 					min-width max-content
 					position sticky
-					right 0
+					inset-inline-end 50px
 					background inherit
+					:has(body) & {
+						right 0
+					}
 				}
 				[href="/search"] {
 					margin-inline-end 5px
@@ -2433,9 +2433,7 @@
 				[href="/publish"] {
 					position fixed
 					bottom 15px
-					bottom 70px
 					inset-inline-end 15px
-					// margin-inline -60px
 					border-radius 100px !important
 					border-radius var(--radius) !important
 					height 60px
@@ -2454,6 +2452,7 @@
 					touch-action manipulation
 					animation scaleIn transBounce1
 					visibility visible
+					
 					&::before {
 						content ""
 						fa()
@@ -2481,6 +2480,20 @@
 						pointer-events none
 					}
 				}
+				[href^="/@"], a.permalink[href] {
+					position fixed
+					inset-inline-end 1px
+					width 53px
+					display flex
+					justify-content center
+					background inherit
+				}
+				:has(body) & {
+					[href^="/@"], a.permalink[href] {
+						position static !important
+						width unset
+					}
+				}
 			}
 			.tabs-bar__wrapper {
 				top 0
@@ -2492,123 +2505,129 @@
 			}
 			
 			// Navigation
-			.columns-area__panels {
-				flex-direction column
-			}
-			.columns-area__panels__main {
-				width 100%
-				border-radius 0 !important
-				margin 0 !important
-				border 0 !important
-			}
-			.tabs-bar__wrapper {
-				transition none !important
-			}
-			&:has(.column-header__buttons:empty) {
+			&:has(*) { // would've rather used @supports but stylus is dumb apparently
+				[href="/publish"] {
+					bottom 70px !important
+				}
+				.columns-area__panels {
+					flex-direction column
+				}
+				.columns-area__panels__main {
+					width 100%
+					border-radius 0 !important
+					margin 0 !important
+					border 0 !important
+				}
 				.tabs-bar__wrapper {
-					margin-top -50px
-					margin-bottom 2px
-					height 48px
+					transition none !important
 				}
-			}
-			.columns-area__panels__pane--navigational {
-				display contents
-				.columns-area__panels__pane__inner {
-					position relative !important
-					inset unset !important
-					order -1
-					width unset
-					height auto
-					white-space nowrap
+				&:has(.column-header__buttons:empty) {
+					.tabs-bar__wrapper {
+						margin-top -50px
+						margin-bottom 2px
+						height 48px
+					}
 				}
-				.navigation-panel {
-					flex-direction row
-					margin 0
-					padding 0
-					padding 0 8px
-					height 5em
-					gap 10px
-					border-block 1px solid
-					overflow scroll hidden
-					align-items center
-					&::-webkit-scrollbar {
+			
+				.columns-area__panels__pane--navigational {
+					display contents
+					.columns-area__panels__pane__inner {
+						position relative !important
+						inset unset !important
+						order -1
+						width unset
+						height auto
+						white-space nowrap
+					}
+					.navigation-panel {
+						flex-direction row
+						margin 0
+						padding 0
+						padding 0 8px
+						height 5em
+						gap 10px
+						border-block 1px solid
+						overflow scroll hidden
+						align-items center
+						&::-webkit-scrollbar {
+							display none
+						}
+					}
+					hr {
 						display none
 					}
-				}
-				hr {
-					display none
-				}
-				.trends__item__name > span, .trends__item__sparkline {
-					display none
-				}
-				.navigation-panel__legal, h4,
-				.trends__item, .trends__item__name {
-					all unset
-					display contents !important
-					&::before, &::after {
-						content unset
+					.trends__item__name > span, .trends__item__sparkline {
+						display none
 					}
-				}
-				h4 a span::after {
-					content ":" !important
-				}
-				&:has(.getting-started__trends) {
-					&:has(.navigation-panel__sign-in-banner) {
-						.flex-spacer {
-							border-right 1px solid var(--border-color)
-							height 50%
-							margin 10px
-						}
-						.getting-started__trends {
-							all unset
-							display contents !important
+					.navigation-panel__legal, h4,
+					.trends__item, .trends__item__name {
+						all unset
+						display contents !important
+						&::before, &::after {
+							content unset
 						}
 					}
-					.trends__item:last-child a {
-						position relative
-						z-index 3
-					}
-				}
-				a, h4 > span {
-					// background var(--elevated-color)
-					position relative
-					overflow hidden
-					border-radius var(--radius)
-					padding .8em 1em
-					font-weight 600
-					font-size 1.1em
-					text-align center
-					min-width max-content
-					transition padding .2s
-					&::before {
-						content ""
-						position absolute
-						inset 0
-						background currentcolor
-						opacity 0
-						border-radius inherit
-						transition inset .4s cubic-bezier(0,0,0,1.2), opacity .2s
-					}
-					i {
-						font-size 1em
-						width auto
-						margin-right 0
-					}
-					&.active {
-						padding-inline 1.2em
+					h4 a span::after {
+						content ":" !important
+					}
+					&:has(.getting-started__trends) {
+						&:has(.navigation-panel__sign-in-banner) {
+							.flex-spacer {
+								border-right 1px solid var(--border-color)
+								height 50%
+								margin 10px
+							}
+							.getting-started__trends {
+								all unset
+								display contents !important
+							}
+						}
+						.trends__item:last-child a {
+							position relative
+							z-index 3
+						}
+					}
+					a, h4 > span {
+						// background var(--elevated-color)
 						position relative
+						overflow hidden
+						border-radius var(--radius)
+						padding .8em 1em
+						font-weight 600
+						font-size 1.1em
+						text-align center
+						min-width max-content
+						transition padding .2s
 						&::before {
-							inset 0 !important
-							opacity .1
+							content ""
+							position absolute
+							inset 0
+							background currentcolor
+							opacity 0
+							border-radius inherit
+							transition inset .4s cubic-bezier(0,0,0,1.2), opacity .2s
+						}
+						i {
+							font-size 1em
+							width auto
+							margin-right 0
+						}
+						&.active {
+							padding-inline 1.2em
+							position relative
+							&::before {
+								inset 0 !important
+								opacity .1
+							}
+						}
+						> span:not(:first-child) {
+							margin-left .7em
 						}
 					}
-					> span:not(:first-child) {
-						margin-left .7em
+					span {
+						display unset
 					}
 				}
-				span {
-					display unset
-				}
 			}
 			
 			
@@ -2635,14 +2654,6 @@
 						visibility visible
 						// opacity .9
 					}
-/* 					@supports (backdrop-filter: blur(0px)) {
-						&::after {
-							filter none
-							opacity 1
-							background none
-							backdrop-filter blur(10px)
-						}
-					} */
 				}
 				.navigation-panel {
 					padding-inline 14px
@@ -2784,6 +2795,7 @@
 				border-start-end-radius var(--radius)
 				overflow clip !important
 				flex-grow 1
+				margin-top 1px
 				// order 2
 				> .columns-area--mobile {
 					overflow visible !important
@@ -2869,60 +2881,6 @@
 					z-index -1
 				}
 			}
-/* 			.compose-form {
-				&::before {
-					content ""
-					position absolute
-					inset 0
-					background var(--elevated-color)
-					z-index -1
-				}
-				padding 0
-				.reply-indicator {
-					margin-inline 16px
-					padding 15px
-				}
-				textarea, .spoiler-input__input
-				.compose-form__modifiers,
- 				.compose-form__buttons-wrapper,
- 				.compose-form__publish {
-					background none
-					color unset
-					height auto
-					border-radius 0 !important
-					padding-inline 16px
-					border-bottom 1px solid var(--border-color)
-				}
-				textarea {
-					padding-inline-end 50px
-				}
-				.compose-form__modifiers {
-					padding-inline 10px
-				}
-				.spoiler-input  {
-					padding-top 5px !important
-				}
-				.spoiler-input__input {
-					font-weight 600
-				}
-				.emoji-picker-dropdown {
-					inset-inline-end 20px
-				}
-				.compose-form__buttons-wrapper {
-					margin-inline -10px 0
-				}
-				.compose-form__publish {
-					border 0
-				}
-				.inverted, button {
-					padding 10px
-				}
-				.inverted, button {
-					&:not(.active) {
-						color inherit !important
-					}
-				}
-			} */
 			
 			// ABOUT PAGE
 			.about.about.about {