2.1.0 (Mastodon 4.4.0-nightly.2025-06-13)

- Fixes the mobile UI with Masto's new navbar
- Alt text modals are larger again

modern.user.css

@@ -6,17 +6,14 @@
 // textbox in the left panel following this format:
 // *://domain.tld/*
 
-/* Update 2.0.4 (Mastodon 4.4)
-- Fixed filtered notification filter controls (#6)
-Glitch-soc:
-- Fixed unclickable timestamp
-- broken padding and clipping in post content
-w/ help from pull req #7
+/* Update 2.1.0 (Mastodon 4.4.0-nightly.2025-06-13)
+- Fixes the mobile UI with Masto's new navbar
+- Alt text modals are larger again
 */
 
 /* ==UserStyle==
 @name			MastoModern
-@version		2.0.4
+@version		2.1.0
 @description	Improves the look & feel of Mastodon
 @updateURL		https://git.gay/Freeplay/Mastodon-Modern/raw/branch/main/modern.user.css
 @homepageURL	https://git.gay/Freeplay/Mastodon-Modern
@@ -45,7 +42,7 @@ w/ help from pull req #7
 / {
 	responsiveW1 = 1320px
 	responsiveW2 = 1175px
-	mobileW = 890px
+	mobileW = 760px
 
 	transBounce1 = .2s cubic-bezier(0,0,0,1.1)
 
@@ -151,7 +148,7 @@ w/ help from pull req #7
 			}
 		}
 		:not(.radio-button__input):not(span) {
-			border-color var(--border-color) !important
+			border-color var(--border-color)
 		}
 
 		.nothing-here
@@ -201,6 +198,7 @@ w/ help from pull req #7
 	/ {
 		@media (prefers-reduced-motion: no-preference) {
 			body:not(.reduce-motion) {
+				.ui__navigation-bar__item,
 				.load-more, .setting-toggle, .column-header__back-button, .column-back-button,
 				.trends__item, .story, .account__avatar, .button,
 				.media-gallery__item, .column-link, select, .status-card, .audio-player, .account {
@@ -252,6 +250,12 @@ w/ help from pull req #7
 					filter opacity(0)
 				}
 			}
+			@keyframes slideUpFadeBig {
+				from { 
+					transform translateY(200px) 
+					filter opacity(0)
+				}
+			}
 			@keyframes slideDownFade {
 				from {
 					transform translateY(-20px)
@@ -590,6 +594,12 @@ w/ help from pull req #7
 			box-shadow var(--column-shadow)
 			padding 0
 			overflow visible
+			@media (min-width responsiveW2) {
+				border-radius var(--radius) var(--radius) 0 0 !important
+				& > :first-child {
+					border-radius var(--radius) var(--radius) 0 0 !important
+				}
+			}
 		}
 		.columns-area__panels__main {
 			@media (min-width responsiveW2) {
@@ -608,10 +618,6 @@ w/ help from pull req #7
 					.column, .columns-area {
 						grid-column 1
 						overflow clip !important
-						border-radius var(--radius) var(--radius) 0 0 !important
-						> :first-child {
-							border-radius var(--radius) var(--radius) 0 0 !important
-						}
 					}
 				}
 			}
@@ -712,10 +718,7 @@ w/ help from pull req #7
 				}
 			}
 			/.column-header__title {
-				display inline
-				svg {
-					vertical-align -.4em
-				}
+				gap 12px
 			}
 			/.announcements, /.column-header__collapsible:not(.collapsed) {
 				flex-direction column-reverse
@@ -772,7 +775,6 @@ w/ help from pull req #7
 				margin-inline-start 0
 				font-size .9em
 				padding-inline 10px
-				//transform none !important
 				&:not(.active) {
 					background var(--elevated-color) !important
 					z-index 2
@@ -1003,9 +1005,6 @@ w/ help from pull req #7
 			hr {
 				display none
 			}
-			.navigation-panel__menu {
-				display contents
-			}
 
 			@media (min-width responsiveW2) {
 				if sideHeader {
@@ -1027,13 +1026,10 @@ w/ help from pull req #7
 					border-radius var(--radius)
 					margin-top 0
 				}
-				[href="/settings/preferences"] {
-					display none !important
-				}
 			}
 			/.column-link {
 				border 0
-				gap 0
+				gap 12px
 			}
 			/.icon-with-badge__badge {
 				display flex !important
@@ -1049,13 +1045,6 @@ w/ help from pull req #7
 				top -10px
 				box-sizing border-box
 			}
-			/.column-header__back-button
-			/.column-back-button > svg
-			/.column-link__icon, /.column-header > button .column-header__icon {
-				margin-inline-end .7em
-				font-size 16px !important
-				padding-right 0 !important
-			}
 			@media (min-width mobileW) {
 				/.column-link {
 					flex-grow 100 !important
@@ -1063,7 +1052,7 @@ w/ help from pull req #7
 					align-items center !important
 					align-content center
 					max-height 3em
-					min-height 2.7em !important
+					min-height 3em !important
 					padding-block 0
 					border-radius 100px
 					position relative
@@ -1078,7 +1067,6 @@ w/ help from pull req #7
 						width unset !important
 						height unset !important
 						inset 0px 0px !important
-						// min-height 43px
 						opacity 0 !important
 						background-color rgba(150,150,150,0.1)
 						transition opacity .2s
@@ -1092,23 +1080,6 @@ w/ help from pull req #7
 							opacity 1 !important
 						}
 					}
-					&[href="/lists"] {
-						& + div {
-							hr {
-								display none
-							}
-							.column-link {
-								margin-bottom 2px
-
-								i {
-									opacity .2
-								}
-							}
-						}
-					}
-				}
-				.getting-started__trends {
-					display unset !important
 				}
 			}
 
@@ -1827,6 +1798,7 @@ w/ help from pull req #7
 				}
 				border 0 !important
 				padding 8px 12px !important
+				margin 0 !important
 				position relative
 				overflow hidden
 				flex-grow 1
@@ -2473,23 +2445,24 @@ w/ help from pull req #7
 	//// TABLET
 	/ {
 		@media (min-width mobileW) and (max-width responsiveW2) {
-			.ui__header {
-				background none !important
-				backdrop-filter none
-				position relative
-				if !navOnLeft {
-					margin-inline-end 285px
-				}
-				if navOnLeft {
-					margin-inline-start 285px
-				}
-				border 0 !important
+			.columns-area__panels__pane--navigational {
+				margin-top 50px
 			}
-			.navigation-panel {
-				padding-inline 10px
-				if !sideHeader {
-					margin-top -55px !important
-				}
+			.navigation-panel__menu {
+				padding 10px
+			}
+			.navigation-panel__compose-button {
+				margin-block 10px
+				margin-inline 6px
+				padding-inline 16px
+				border-radius 100px
+				justify-content center
+			}
+			.navigation-panel__sign-in-banner {
+				display block !important
+				margin-block 10px
+				padding-block 10px
+				border-block 1px solid var(--border-color)
 			}
 		}
 	}
@@ -2498,303 +2471,104 @@ w/ help from pull req #7
 	//// MOBILE
 	/ {
 		@media (max-width mobileW - 1) {
-			/.ui__header {
-				border-bottom 0
-				box-sizing content-box
-				height auto
-				position relative
-				box-sizing border-box
-				gap 5px 10px
-				flex-wrap wrap
-				padding-block 12px
-				border 0 !important
-				backdrop-filter none !important
-				background none !important
-				.ui__header__logo {
-					padding-block 5px !important
-				}
-				.ui__header__links {
-					min-width max-content
-					position sticky
-					inset-inline-end 55px
-					background inherit
-					:has(body) & {
-						right 0
-					}
-				}
-				[href="/search"] {
-					display none
-				}
-				[href="/publish"] {
-					position fixed
-					bottom 15px
-					inset-inline-end 15px
-					border-radius 100px !important
-					border-radius var(--radius) !important
-					height 60px
-					width 60px
-					font-size 0
-					box-shadow var(--shadow-low)
-					background var(--surface-background-color)
-					border-color var(--border-color)
-					-webkit-user-drag: none;
-					-khtml-user-drag: none;
-					-moz-user-drag: none;
-					-o-user-drag: none;
-					user-drag: none;
-					user-select: none;
-					-webkit-user-select: none;
-					-webkit-touch-callout: none;
-					touch-action manipulation
-					animation scaleIn transBounce1
-					visibility visible
-
-					&::before {
-						content ""
-						position absolute
-						inset 0
-						display flex
-						justify-content center
-						align-items center
-						border-radius inherit
-						transition transform .4s cubic-bezier(0,0,0,1) !important
-						background-position center
-						background-repeat no-repeat
-						background-image url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNMjAwLTEyMHEtMzMgMC01Ni41LTIzLjVUMTIwLTIwMHYtNTYwcTAtMzMgMjMuNS01Ni41VDIwMC04NDBoMzU3bC04MCA4MEgyMDB2NTYwaDU2MHYtMjc4bDgwLTgwdjM1OHEwIDMzLTIzLjUgNTYuNVQ3NjAtMTIwSDIwMFptMjgwLTM2MFpNMzYwLTM2MHYtMTcwbDM2Ny0zNjdxMTItMTIgMjctMTh0MzAtNnExNiAwIDMwLjUgNnQyNi41IDE4bDU2IDU3cTExIDEyIDE3IDI2LjV0NiAyOS41cTAgMTUtNS41IDI5LjVUODk3LTcyOEw1MzAtMzYwSDM2MFptNDgxLTQyNC01Ni01NiA1NiA1NlpNNDQwLTQ0MGg1NmwyMzItMjMyLTI4LTI4LTI5LTI4LTIzMSAyMzF2NTdabTI2MC0yNjAtMjktMjggMjkgMjggMjggMjgtMjgtMjhaIi8+PC9zdmc+")
-					}
-					/body:not(:has(.column-link.active)) &:not(:focus) {
-						transform scale(0.97) !important
-						opacity 0 !important
-						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
-				z-index 200
-				&::after {
+			.tabs-bar__wrapper, .ui__navigation-bar {
+				&::before {
 					content ""
 					position absolute
 					inset 0
-					background var(--elevated-tint)
-					pointer-events none
-					z-index 2
+					background var(--elevated-color)
+					z-index -1
 				}
 			}
-
-			// Navigation
-			@supports unquote("selector(.foxxo:has(.waf))") {
-				[href="/publish"] {
-					bottom 70px !important
+			.ui__navigation-bar {
+				color var(--on-input-color)
+				height 70px
+				padding-inline 5px
+			}
+			.ui__navigation-bar__item {
+				position relative
+				border 0 !important
+				padding-block 12px
+				gap 6px
+				opacity .7
+				&::before {
+					content ""
+					position absolute
+					width 60px
+					top 10px 
+					bottom 30px
+					background currentColor
+					border-radius 100px
+					z-index -1
+					opacity 0
+					transform scaleX(.8)
+					transition opacity .2s, transform .2s
 				}
-				.columns-area__panels {
-					flex-direction column
+				&::after {
+					content attr(aria-label)
+					font-size 12px
+					max-width 100%
+					padding-inline 4px
+					text-overflow ellipsis
+					overflow hidden
+					white-space nowrap
+					box-sizing border-box
 				}
-				.columns-area__panels__main {
+				&.active {
+					opacity 1
+					&::before {
+						opacity .15
+						transform none
+					}
+				}
+			}
+			
+			.columns-area__panels__pane--navigational {
+				z-index 100
+				padding 40px 10px
+				padding-top 60vh
+				min-width unset
+				overflow-y scroll
+				box-sizing border-box
+				overscroll-behavior contain
+				visibility hidden
+				transition visibility 0s 0.2s
+				.columns-area__panels__pane__inner {
 					width 100%
-					border-radius var(--radius) !important
-					margin 0 !important
-					border 0 !important
-					overflow clip !important
-					flex-grow 1
+					position relative
+					inset unset
+					height max-content
+					border-radius 24px
+					margin-top auto
+					transform translateY(100vh) !important
+					transition transform .2s cubic-bezier(0,0,1,0), opacity 1s
 				}
-				.tabs-bar__wrapper {
-					transition none !important
+				.navigation-panel__compose-button {
+					display none
 				}
-
-				.columns-area__panels__pane--navigational {
-					display contents
-					.columns-area__panels__pane__inner {
-						position static !important
-						order -1
-						width unset
-						height auto
-						white-space nowrap
-					}
-					.navigation-panel {
-						flex-direction row
-						margin 0
-						padding 12px
-						border-top 1px solid
-						align-items center
-						overflow visible
-						height auto
-						.flex-spacer {
-							display none
-						}
-					}
-					hr {
+				html:not(:has(.sign-in-banner)) & {
+					[href="/home"],
+					[href="/explore"],
+					[href="/notifications"] {
 						display none
 					}
-					.trends__item__name > span, .trends__item__sparkline {
-						display none
-					}
-					h4 a span::after {
-						content ":" !important
-					}
-					.navigation-panel__legal {
-						display contents
-					}
-					a {
-						position relative
-						overflow hidden
-						border-radius var(--radius)
-						font-weight 600
-						font-size 1.1em
-						flex-grow 1
-						text-align center
-						min-width max-content
-						justify-content center
-						transition padding .2s
-						padding-inline 6px
-						gap 6px
-						&::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
-						}
-						svg {
-							width 1em
-							height @width
-							margin-inline-end 0 !important
-						}
-						&.active {
-							position relative
-							&::before {
-								inset 0 !important
-								opacity .1
-							}
-						}
-					}
-					span {
-						display unset !important
-						width 0
-						flex-grow 1
-						max-width max-content
-						overflow hidden
-						text-overflow ellipsis
-					}
-				}
-			}
-
-
-			// bottom bar
-
-			&:not(:has(.navigation-panel__sign-in-banner)) {
-				.columns-area__panels__main {
-					margin-top 2px !important
-				}
-				.columns-area--mobile .column {
-					padding-bottom 60px
-				}
-				.ui__header {
-					z-index 199
-					&::before, &::after {
-						all unset
-						content ""
-						position fixed
-						bottom 0
-						inset-inline 0
-						background var(--background-color)
-						z-index 200
-						height 60px
-						visibility visible
-						z-index -1
-						border-top 1px solid var(--background-border-color)
-					}
-					&::after {
-						background var(--elevated-tint)
-						border 0
-					}
 				}
 				.navigation-panel {
-					flex-wrap wrap
-					border-top none
-					margin-bottom 8px
-					padding-block 0
-					a {
-						span {
-							display none !important
-						}
-					}
-					[href="/settings/preferences"] {
-						position absolute
-						top 12px
-						inset-inline-end 60px
-						z-index 900
-						padding-block 0
-						height 35px
-						width 35px
-						box-sizing border-box
-						margin 0
-						border 1px solid var(--border-color)
-					}
+					display contents
 				}
-
-				bottomBarButtons = "'/home'" "'/notifications'" "'/explore'" "'/public/local'" "'/lists'"
-				bottomBarItemsSelector() {
-					waf = ""
-					for i in arguments {
-						waf += ( ",.column-link[href=" + i + "]" )
-					}
-					return substr(waf, 1)
+				.navigation-panel__menu {
+					padding 10px 5px !important
 				}
-				/:root {
-					--selector bottomBarItemsSelector(bottomBarButtons)
-				}
-				{bottomBarItemsSelector(bottomBarButtons)} {
-					position fixed !important
-					display flex
-					flex-direction column
-					bottom 4px
-					z-index 201
-					font-size 1.7em
-					margin 0 !important
-					padding 0 !important
-					height 50px
-					align-items center
-					justify-content center
-					width 19%
-					left 0
-					box-sizing border-box
-					padding 1px !important
-					&::before {
-						inset-inline 6px
-					}
-					span {
-						margin 0
-						font-size 0
-						line-height 1
-						opacity 0
-						transition font-size .4s, margin .7s, opacity .2s
-					}
-					svg {
-						width 24px
-						height @width
-						transition transform .1s
-					}
-				}
-				for row, i in bottomBarButtons {
-					.column-link[href={row}] {
-						left 2% + (20% * i) - (.75% * i)
+				&.columns-area__panels__pane--overlay {
+					visibility visible
+					transition none
+					// for some reason transitioning the .pane__inner stutters
+					// a ton even with !important, so we're just doing an animation
+					// on the container instead !
+					animation slideUpFadeBig .3s cubic-bezier(0,0.9,0,1.05) forwards
+					.columns-area__panels__pane__inner {
+						transform none !important
+						transition none
 					}
 				}
 			}
@@ -2883,141 +2657,38 @@ w/ help from pull req #7
 
 	/// ALT TEXT MODAL
 	/ {
-		.report-modal[style="max-width: 960px;"] {
-			background var(--background-color)
-			&, * {
-				color inherit !important
-			}
-			.report-modal__comment {
-				min-width unset
-				width 370px
-				max-width unset
-				flex none
-				padding 20px
-				height 100%
-				overflow-y auto
-			}
-			.setting-text__wrapper {
-				border-radius var(--radius)
+		.modal-root__modal:has(.focal-point) {
+			width unset
+			max-width 90vw
+			.dialog-modal__content {
 				overflow hidden
-				background none
-				textarea {
-					border 0
-					max-height unset !important
-					background none
-				}
+				display flex
+				flex-direction column
 			}
-			.focal-point-modal__content {
-				position sticky
-				top 0
-				max-height 100vh
-				flex-grow 0 !important
+			.dialog-modal__content__preview {
+				padding 0 !important
+				min-height 0
 				max-width 100%
-			}
-			.focal-point {
-				width 100%
-				height 100%
-			}
-			.audio-player
-			.focal-point img {
-				width unset !important
-				height unset !important
-				max-height 100% !important
-				max-width 100% !important
-			}
-			.audio-player {
-				margin 10px !important
-				width 600px !important
-				max-width calc(100% - 20px) !important
-			}
-			.focal-point__reticle {
-				box-shadow: 0 0 300px 200px rgba(0,0,0,0.2);
-			}
-
-			@media not all and (max-width: 900px) {
-				max-width max-content !important
-				max-height 98vh
-				border 0
-				box-shadow var(--shadow)
-				overflow hidden
-				border-radius var(--radius)
-				width 98vw
-
-				.report-modal__container {
-					flex-wrap nowrap
-					border 0
-					max-width max-content
-					max-height 100%
-				}
-
-				.report-modal__target {
-					position: absolute;
-					padding: 24px 20px 12px;
-					font-weight: bold;
-					width 348px
-					box-sizing border-box
-					text-align start
-					background inherit
-				}
-				.report-modal__close {
-					position: fixed !important;
-					right: 12px;
-					top: 12px;
-					order: 2;
-					color: white;
-					background: var(--modal-background-color);
-					padding: 12px;
-				}
-				.report-modal__comment {
-					padding-top: calc(30px + 2em);
-					padding-bottom 160px
-				}
-				.focal-point-modal__content
-				.focal-point {
-					overflow visible
-				}
-				.focal-point img {
-					min-width 500px
-				}
-				.focal-point__preview {
-					inset-inline-start -220px
-					right unset
-					bottom 20px
-					pointer-events none
-					text-align end
-					strong {
-						color inherit
-					}
-					div {
-						border-radius var(--radius)
-						box-shadow none
-					}
-				}
-			}
-			@media (max-width 900px) {
-				height auto
-				width 100vw
-				max-width unset !important
-				border-radius 0
-				.report-modal__container {
-					height auto
+				img {
+					max-width 100% !important
+					max-height 100% !important
+					border-radius 0
+					max-height unset
 					min-height 0
 				}
-				.report-modal__container {
-					flex-direction column-reverse
-					flex-wrap nowrap
-					flex-grow 1
-				}
-				.report-modal__comment {
-					width 100%
-					border 0
-					max-height 70%
-					flex 0 0 auto
-					height unset
-					order unset
+			}
+			.focal-point__reticle {
+				transition box-shadow .2s;
+			}
+			.focal-point {
+				min-height 0 !important
+				&:not(:hover) .focal-point__reticle {
+					box-shadow none
 				}
 			}
-
+		}
+		@media screen and (max-width: 630px) {
+			
 		}
 	}