1.7.0

- New navbar design for when logged out, uses less space
- fix sidebar height (footer had too much bottom padding)
- fix multiple images in gallery being cut off
- style hashtags bar
- fixes

modern.css

@@ -480,6 +480,7 @@ a:focus-visible,
   padding-bottom: 20px;
   box-sizing: border-box;
   max-height: unset !important;
+  height: 100%;
 }
 #mastodon .search {
   margin-inline: 5px;
@@ -2241,12 +2242,14 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
 #mastodon .status__content__spoiler-link:focus::after {
   opacity: 1;
 }
+#mastodon .detailed-status__wrapper-direct .status__prepend,
 #mastodon .status-direct .status__prepend,
 #mastodon .status__wrapper-direct .status__prepend,
 #mastodon .conversation .status__prepend {
   position: absolute;
   font-size: 0;
 }
+#mastodon .detailed-status__wrapper-direct .status__content,
 #mastodon .status-direct .status__content,
 #mastodon .status__wrapper-direct .status__content,
 #mastodon .conversation .status__content {
@@ -2262,6 +2265,7 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
   overflow: hidden !important;
   max-width: max-content;
 }
+#mastodon .detailed-status__wrapper-direct .status__content .media-gallery,
 #mastodon .status-direct .status__content .media-gallery,
 #mastodon .status__wrapper-direct .status__content .media-gallery,
 #mastodon .conversation .status__content .media-gallery {
@@ -2338,7 +2342,9 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
   margin-bottom: 10px !important;
   animation: scaleIn 0.4s;
   max-width: unset !important;
-  max-height: 80vh !important;
+}
+#mastodon .status .media-gallery__item {
+  max-height: 80vh;
 }
 .status-card {
   line-height: 1;
@@ -2392,6 +2398,42 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
 .audio-player .video-player__seek {
   margin: var(--radius);
 }
+#mastodon .hashtag-bar {
+  margin-top: 8px;
+}
+#mastodon .hashtag-bar a,
+#mastodon .hashtag-bar button {
+  font-size: 0.85em;
+  font-weight: 600;
+  opacity: 0.8;
+  padding: 0.2em 0.6em;
+  transition: opacity 0.2s;
+}
+#mastodon .hashtag-bar a {
+  position: relative;
+  border-radius: var(--radius);
+  background: var(--elevated-color);
+}
+#mastodon .hashtag-bar a::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--elevated-color);
+  border-radius: inherit;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+#mastodon .hashtag-bar a:hover,
+#mastodon .hashtag-bar a:focus {
+  opacity: 1;
+}
+#mastodon .hashtag-bar a:hover::after,
+#mastodon .hashtag-bar a:focus::after {
+  opacity: 1;
+}
+#mastodon .hashtag-bar button {
+  padding-block: 0;
+}
 #mastodon .detailed-status__wrapper {
   border-radius: var(--radius);
   overflow: clip;
@@ -3102,9 +3144,6 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
   #mastodon .picture-in-picture__footer {
     flex-wrap: wrap;
   }
-  #mastodon .columns-area--mobile > .column > div > div {
-    animation: fadeUp 0.4s;
-  }
   #mastodon .columns-area--mobile > .column > .column-header__wrapper {
     display: none;
   }
@@ -3123,6 +3162,7 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
     box-sizing: border-box;
     gap: 10px;
     border: 0 !important;
+    overflow: visible;
   }
   .ui__header::after {
     content: "";
@@ -3189,10 +3229,133 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
   }
   #mastodon .tabs-bar__wrapper {
     top: 0;
+    background: none;
   }
   #mastodon .column-back-button.column-back-button {
     border-radius: 0 !important;
   }
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels {
+    flex-direction: column;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .ui__header::after {
+    content: unset;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__main {
+    width: 100%;
+    border-radius: 0 !important;
+    margin: 0 !important;
+    border: 0 !important;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .tabs-bar__wrapper {
+    transition: none !important;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner):has(.column-header__buttons:empty) .tabs-bar__wrapper {
+    margin-top: -50px;
+    margin-bottom: 2px;
+    height: 48px;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational {
+    display: contents;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
+    position: relative !important;
+    inset: unset !important;
+    order: -1;
+    width: unset;
+    height: auto;
+    white-space: nowrap;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel {
+    flex-direction: row;
+    margin: 0;
+    padding: 0;
+    height: auto;
+    padding: 12px 14px;
+    gap: 10px;
+    border-block: 1px solid;
+    overflow: scroll hidden;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel::-webkit-scrollbar {
+    display: none;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational hr {
+    display: none;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__name > span,
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__sparkline {
+    display: none;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel__legal,
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4,
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .getting-started__trends,
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item,
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__name {
+    all: unset;
+    display: contents !important;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel__legal::before,
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4::before,
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .getting-started__trends::before,
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item::before,
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__name::before,
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel__legal::after,
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4::after,
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .getting-started__trends::after,
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item::after,
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__name::after {
+    content: unset;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational:has(.getting-started__trends) .flex-spacer {
+    border-right: 1px solid;
+    margin-block: 10px;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational:has(.getting-started__trends) .navigation-panel::after {
+    content: "";
+    position: sticky;
+    right: -20px;
+    min-width: 150px;
+    margin-left: -50px;
+    background: inherit;
+    mask: linear-gradient(to right, transparent, #000);
+    -webkit-mask: linear-gradient(to right, transparent, #000);
+    pointer-events: none;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational:has(.getting-started__trends) .trends__item:last-child a {
+    position: relative;
+    z-index: 3;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--radius);
+    padding: 0.8em 1.2em;
+    font-weight: 600;
+    font-size: 1.1em;
+    text-align: center;
+    min-width: max-content;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a i {
+    font-size: 1em;
+    width: auto;
+    margin-right: 0;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a.active {
+    padding-inline: 1.2em;
+    position: relative;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a.active::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: currentcolor;
+    opacity: 0.1;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a > span:not(:first-child) {
+    margin-left: 0.7em;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational span {
+    display: unset;
+  }
   #mastodon .columns-area__panels {
     justify-content: flex-start;
     max-width: 100% !important;
@@ -3204,6 +3367,7 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
     border-start-end-radius: var(--radius);
     overflow: clip !important;
     margin-top: 1px !important;
+    flex-grow: 1;
   }
   #mastodon .columns-area__panels__main > .columns-area--mobile {
     overflow: visible !important;
@@ -3216,6 +3380,10 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
   #mastodon .columns-area__panels__main > div {
     border-radius: 0 !important;
   }
+  #mastodon .column {
+    flex-grow: 1;
+    overflow: clip;
+  }
   #mastodon .dismissable-banner {
     margin: 0;
     padding-left: 4px;

modern.user.css

@@ -13,14 +13,17 @@
 	 //////////////////////////////////////////////////////////////////// 
 
 	 
-/* Update 1.6.13
+/* Update 1.7.0
-- Minimize Mastodon's timeline flickering that was amplified by Modern D:
+- New navbar design for when logged out, uses less space
-- Comment out empty accent variable
+- fix sidebar height (footer had too much bottom padding)
+- fix multiple images in gallery being cut off
+- style hashtags bar
+- fixes
 */
 
 /* ==UserStyle==
 @name           Mastodon Modern
-@version        1.6.13
+@version        1.7.0
 @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
@@ -32,7 +35,7 @@
 @author         Freeplay (https://freeplay.codeberg.page/)
 ==/UserStyle== */
 	 
-@-moz-document domain("mastodon.coffee"), domain("socel.net"), domain("brands.town"), domain("mstdn.social"), domain("social.vivaldi.net"), domain("masto.ai"), domain("mastodon.art"), domain("tech.lgbt"), domain("mastodon.social"), domain("mastodon.online"), domain("mastodon.lol"), domain("floss.social"), domain("mas.to"), domain("c.im"), domain("nerdculture.de"), domain("maly.io"), domain("corteximplant.com"), domain("queer.party"), domain("fosstodon.org"), domain("meow.social"), domain("raru.re"), domain("ani.work"), domain("kolektiva.social"), domain("home.social"), domain("mstdn.plus"), domain("mastodon.sdf.org"), domain("toot.community"), domain("sfba.social"), domain("hachyderm.io"), domain("mindly.social"), domain("mastodon.cloud"), domain("bark.lgbt"), domain("wetdry.world"), domain("md.ilyamikcoder.com"), domain("techhub.social") {
+@-moz-document domain("mastodon.coffee"), domain("socel.net"), domain("brands.town"), domain("mstdn.social"), domain("social.vivaldi.net"), domain("masto.ai"), domain("mastodon.art"), domain("tech.lgbt"), domain("mastodon.social"), domain("mastodon.online"), domain("mastodon.lol"), domain("floss.social"), domain("mas.to"), domain("c.im"), domain("nerdculture.de"), domain("maly.io"), domain("corteximplant.com"), domain("queer.party"), domain("fosstodon.org"), domain("meow.social"), domain("raru.re"), domain("ani.work"), domain("kolektiva.social"), domain("home.social"), domain("mstdn.plus"), domain("mastodon.sdf.org"), domain("toot.community"), domain("sfba.social"), domain("hachyderm.io"), domain("mindly.social"), domain("mastodon.cloud"), domain("bark.lgbt"), domain("wetdry.world"), domain("md.ilyamikcoder.com"), domain("techhub.social"), domain("mastodon.world"), domain("toot.io") {
 / { // This is just so I can easily collapse everything, shouldn't affect compiled code
 	responsiveW1 = 1320px
 	responsiveW2 = 1175px
@@ -352,6 +355,7 @@
 			box-sizing border-box
 			// min-height 100vh !important
 			max-height unset !important
+			height 100%
 		}
 		.search {
 			margin-inline 5px
@@ -1547,7 +1551,7 @@
 				}
 			}
 		}
-		.status-direct, .status__wrapper-direct, .conversation {
+		.detailed-status__wrapper-direct, .status-direct, .status__wrapper-direct, .conversation {
 			.status__prepend {
 				position absolute
 				font-size 0
@@ -1641,7 +1645,10 @@
 			margin-bottom 10px !important
 			animation scaleIn .4s
 			max-width unset !important
-			max-height 80vh !important
+			// max-height 80vh !important
+		}
+		.status .media-gallery__item {
+			max-height 80vh
 		}
 		/.status-card {
 			&:not(.horizontal) {
@@ -1697,6 +1704,39 @@
 				margin var(--radius)
 			}
 		}
+		.hashtag-bar {
+			margin-top 8px
+			a, button {
+				font-size .85em
+				font-weight 600
+				opacity .8
+				padding .2em .6em
+				transition opacity .2s
+			}
+			a {
+				position relative
+				border-radius var(--radius)
+				background var(--elevated-color)
+				&::after {
+					content ""
+					position absolute
+					inset 0
+					background var(--elevated-color)
+					border-radius inherit
+					opacity 0
+					transition opacity .2s
+				}
+				&:hover, &:focus {
+					opacity 1
+					&::after {
+						opacity 1
+					}
+				}
+			}
+			button {
+				padding-block 0
+			}
+		}
 		
 		
 		.detailed-status__wrapper {
@@ -2330,11 +2370,6 @@
 		// Mobile
 		@media (max-width mobileW - 1) {
 			compactStatuses()
-			.columns-area--mobile > .column {
-				> div > div {
-					animation fadeUp .4s
-				}
-			}
 			.columns-area--mobile > .column > .column-header__wrapper {
 				display none
 			}
@@ -2353,6 +2388,7 @@
 				box-sizing border-box
 				gap 10px
 				border 0 !important
+				overflow visible
 				&::after {
 					content ""
 					position absolute
@@ -2364,6 +2400,7 @@
 					mask radial-gradient(var(--radius) at 0px var(--radius),#0000 100%,#000)
 					-webkit-mask @mask
 					z-index 9999
+					
 					/.rtl & {
 						transform scaleX(-1)
 					}
@@ -2420,10 +2457,130 @@
 			}
 			.tabs-bar__wrapper {
 				top 0
+				background none
 			}
 			.column-back-button.column-back-button {
 				border-radius 0 !important
 			}
+			
+			// logged out view
+			&:has(.navigation-panel__sign-in-banner) {
+				.columns-area__panels {
+					flex-direction column
+				}
+				.ui__header::after {
+					content unset
+				}
+				.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) {
+					.tabs-bar__wrapper {
+						margin-top -50px
+						margin-bottom 2px
+						height 48px
+					}
+				}
+				.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
+						height auto
+						padding 12px 14px
+						gap 10px
+						border-block 1px solid
+						overflow scroll hidden
+						&::-webkit-scrollbar {
+							display none
+						}
+					}
+					hr {
+						display none
+					}
+					.trends__item__name > span, .trends__item__sparkline {
+						display none
+					}
+					.navigation-panel__legal, h4,
+					.getting-started__trends, .trends__item, .trends__item__name {
+						all unset
+						display contents !important
+						&::before, &::after {
+							content unset
+						}
+					}
+					&:has(.getting-started__trends) {
+						.flex-spacer {
+							border-right 1px solid
+							margin-block 10px
+						}
+						.navigation-panel::after {
+							content ""
+							position sticky
+							right -20px
+							min-width 150px
+							margin-left -50px
+							background inherit
+							mask linear-gradient(to right, transparent, black)
+							-webkit-mask @mask
+							pointer-events none
+						}
+						.trends__item:last-child a {
+							position relative
+							z-index 3
+						}
+					}
+					a {
+						// background var(--elevated-color)
+						position relative
+						overflow hidden
+						border-radius var(--radius)
+						padding .8em 1.2em
+						font-weight 600
+						font-size 1.1em
+						text-align center
+						min-width max-content
+						i {
+							font-size 1em
+							width auto
+							margin-right 0
+						}
+						&.active {
+							padding-inline 1.2em
+							position relative
+							&::before {
+								content ""
+								position absolute
+								inset 0
+								background currentcolor
+								opacity .1
+							}
+						}
+						> span:not(:first-child) {
+							margin-left .7em
+						}
+					}
+					span {
+						display unset
+					}
+				}
+				
+			}
 			.columns-area__panels {
 				// overflow-x scroll !important
 				justify-content flex-start
@@ -2436,13 +2593,12 @@
 				border-start-end-radius var(--radius)
 				overflow clip !important
 				margin-top 1px !important
+				flex-grow 1
 				// z-index 2
 				// order 2
 				> .columns-area--mobile {
 					overflow visible !important
 				}
-
-
 				~/ .is-composing .columns-area__panels__main {
 					padding-bottom 40px !important
 				}
@@ -2451,12 +2607,15 @@
 				}
 
 			}
+			.column {
+				flex-grow 1
+				overflow clip
+			}
 			
 			.dismissable-banner {
 				margin 0
 				padding-left 4px
 			}
-
 			.status {
 				padding-top 14px !important
 				.status__avatar {