1.6.10

- Fix jump when loading some media
- add transition to dropdowns
- unset text transforms in extra info fields
- use webkit-scrollbar
- fix missing -webkit-mask for glitch collapsed content on chromium
- fixes

glitch-fixes.css

@@ -25,9 +25,10 @@ body.app-body.flavour-glitch > #mastodon .collapsed .status__content {
 }
 body.app-body.flavour-glitch > #mastodon .collapsed .status__content .status__content__text {
   mask: linear-gradient(to bottom, #000 50px, transparent) !important;
+  -webkit-mask: linear-gradient(to bottom, #000 50px, transparent) !important;
   max-height: 100px;
 }
-body.app-body.flavour-glitch > #mastodon .collapsed .status__content p:not(:last-of-type) {
+body.app-body.flavour-glitch > #mastodon .collapsed .status__content p:not(:last-child) {
   margin-bottom: 0.4em;
 }
 body.app-body.flavour-glitch > #mastodon .collapsed .status__content br {
@@ -72,8 +73,13 @@ body.app-body.flavour-glitch > #mastodon .status__action-bar-spacer {
   min-width: 5px;
 }
 body.app-body.flavour-glitch > #mastodon .status__relative-time {
-  margin-right: 5px;
+  margin-inline: 5px !important;
   z-index: 2;
+  flex-grow: 0 !important;
+}
+body.app-body.flavour-glitch > #mastodon .reactions-bar {
+  width: unset;
+  margin-top: 8px;
 }
 body.app-body.flavour-glitch > #mastodon .reactions-bar button {
   border-radius: 6px !important;
@@ -81,7 +87,11 @@ body.app-body.flavour-glitch > #mastodon .reactions-bar button {
 }
 @media (pointer: coarse) {
   body.app-body.flavour-glitch > #mastodon .reactions-bar button {
-    padding: 8px 10px !important;
+    padding: 4px 8px !important;
+  }
+  body.app-body.flavour-glitch > #mastodon .reactions-bar button .reactions-bar__item__emoji {
+    height: 18px;
+    width: 18px;
   }
 }
 body.app-body.flavour-glitch > #mastodon .reactions-bar:empty {

modern.css

@@ -10,6 +10,21 @@
   --shadow-low: 0 8px 16px -10px rgba(0,0,0,0.4);
   --shadow-med: 0 8px 60px -30px rgba(0,0,0,0.1);
 }
+:not(body):not(.scrollable)::-webkit-scrollbar {
+  width: 6px;
+  margin-block: 10px;
+}
+:not(body):not(.scrollable)::-webkit-scrollbar-track {
+  background: none;
+}
+:not(body):not(.scrollable)::-webkit-scrollbar-thumb {
+  border-radius: 100px;
+  transition: background-color 0.2s;
+}
+:not(body):not(.scrollable):not(:hover)::-webkit-scrollbar-thumb {
+  background: none;
+  padding-block: 10px;
+}
 .rtl textarea {
   text-align: right;
 }
@@ -395,8 +410,10 @@ a:focus-visible,
 .search__input {
   border: 0 !important;
 }
-.dropdown-menu {
+.dropdown-menu,
+.dropdown-animation {
   border-radius: var(--radius);
+  animation: scaleIn 0.2s;
 }
 .dropdown-menu__container__list {
   overflow: hidden auto;
@@ -489,7 +506,7 @@ a:focus-visible,
   border-radius: var(--radius);
   animation: scaleIn 0.2s;
   box-shadow: var(--shadow-low);
-  margin-top: 4px;
+  margin-top: 10px;
   margin-inline: 4px;
   width: calc(100% - 8px);
 }
@@ -500,6 +517,8 @@ a:focus-visible,
 }
 #mastodon .compose-form {
   padding-top: 10px;
+  min-height: unset;
+  overflow: unset;
 }
 #mastodon .compose-form .reply-indicator {
   position: relative;
@@ -515,12 +534,6 @@ a:focus-visible,
 }
 #mastodon .compose-form .compose-form__buttons-wrapper {
   border-radius: 0 0 var(--radius) var(--radius) !important;
-  position: sticky;
-  bottom: 0;
-}
-#mastodon .compose-form .compose-form__buttons-wrapper .compose-form__buttons> * {
-  border-radius: var(--radius-round);
-  overflow: hidden;
 }
 #mastodon .compose-form .compose-form__publish-button-wrapper {
   overflow: visible !important;
@@ -706,7 +719,7 @@ a:focus-visible,
   overflow: hidden;
 }
 .dismissable-banner__message {
-  padding: 10px;
+  padding-block: 10px;
   padding-inline-end: 30px;
 }
 .dismissable-banner__action {
@@ -719,7 +732,7 @@ a:focus-visible,
 #mastodon .column:not(.scrollable--flex) > .dismissable-banner ~ .scrollable {
   border-radius: 0 !important;
 }
-#mastodon .scrollable:not(.scrollable--flex) > .dismissable-banner {
+#mastodon .scrollable > .dismissable-banner {
   margin: 0 !important;
 }
 #mastodon .empty-column-indicator {
@@ -908,7 +921,6 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
   all: unset;
   color: unset;
   opacity: 0.9;
-  text-transform: capitalize;
 }
 #mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd,
 #mastodon .account__header__account-note dl dd,
@@ -2199,7 +2211,7 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
   transform: scale(1.2);
 }
 #mastodon .status__content ~ [style*="aspect-ratio"] {
-  aspect-ratio: unset !important;
+  max-height: 80vh;
 }
 #mastodon .status > .status__content .status__content__text:empty {
   margin-top: -10px !important;
@@ -2993,11 +3005,14 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
   }
   #mastodon .status__action-bar :not(i):not(.status__action-bar-spacer) {
     display: flex;
-    flex-grow: 9999 !important;
+    flex-grow: 9999;
     justify-content: center !important;
     max-width: 55px;
     min-width: max-content;
   }
+  #mastodon .status__action-bar > .icon-button:first-child {
+    margin-inline-start: -8px !important;
+  }
   #mastodon .status__action-bar,
   #mastodon .detailed-status__action-bar,
   #mastodon .picture-in-picture__footer {
@@ -3142,9 +3157,6 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
     margin: 0 !important;
     justify-content: center;
   }
-  #mastodon .status__action-bar > .icon-button:first-child {
-    margin-inline-start: -8px !important;
-  }
   #mastodon .icon-button:after {
     content: unset !important;
   }
@@ -3175,23 +3187,6 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
     flex-grow: 1;
     overflow: visible !important;
   }
-  #mastodon .columns-area__panels__main .compose-form {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-  #mastodon .columns-area__panels__main .compose-form__autosuggest-wrapper {
-    overflow: hidden;
-  }
-  #mastodon .columns-area__panels__main .compose-form__autosuggest-wrapper,
-  #mastodon .columns-area__panels__main .autosuggest-textarea,
-  #mastodon .columns-area__panels__main .autosuggest-textarea label,
-  #mastodon .columns-area__panels__main .autosuggest-textarea textarea {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-  }
   #mastodon .about.about.about {
     padding-inline: 10px !important;
   }
@@ -3889,11 +3884,14 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
 }
 .layout-multiple-columns #mastodon .columns-area .status__action-bar :not(i):not(.status__action-bar-spacer) {
   display: flex;
-  flex-grow: 9999 !important;
+  flex-grow: 9999;
   justify-content: center !important;
   max-width: 55px;
   min-width: max-content;
 }
+.layout-multiple-columns #mastodon .columns-area .status__action-bar > .icon-button:first-child {
+  margin-inline-start: -8px !important;
+}
 .layout-multiple-columns #mastodon .columns-area .status__action-bar,
 .layout-multiple-columns #mastodon .columns-area .detailed-status__action-bar,
 .layout-multiple-columns #mastodon .columns-area .picture-in-picture__footer {
@@ -3972,6 +3970,7 @@ body:not(.flavour-glitch)  #mastodon .account-timeline__header .account__header_
 .layout-multiple-columns #mastodon .columns-area .drawer__inner__mastodon {
   background-color: transparent;
   border: 0 !important;
+  background-color: transparent !important;
 }
 .layout-multiple-columns #mastodon .columns-area .drawer__inner.darker {
   border-radius: var(--radius-round) var(--radius-round) 0 0;

modern.user.css

@@ -13,9 +13,13 @@
 	 //////////////////////////////////////////////////////////////////// 
 
 	 
-/* Update 1.6.9
+/* Update 1.6.10
-- fix embeds w/ no text
+- Fix jump when loading some media
-- respect the built-in reduce-motion option
+- add transition to dropdowns
+- unset text transforms in extra info fields
+- use webkit-scrollbar
+- fix missing -webkit-mask for glitch collapsed content on chromium
+- fixes
 */
 
 /* ==UserStyle==
@@ -55,6 +59,27 @@
 		--shadow-low 0 8px 16px -10px rgba(0,0,0,0.4)
 		--shadow-med 0 8px 60px -30px rgba(0,0,0,0.1)
 	}
+    
+    :not(body):not(.scrollable) {
+        &::-webkit-scrollbar {
+            width 6px
+            margin-block 10px
+            &-track {
+                background none
+            }
+            &-thumb {
+                border-radius 100px
+                transition background-color .2s
+            }
+        }
+        &:not(:hover) {
+            &::-webkit-scrollbar-thumb {
+                background none
+                padding-block 10px
+            }
+        }
+    }
+    
 	fa() {
 		font: normal normal normal 14px/1 FontAwesome;
 	}
@@ -97,11 +122,14 @@
 			margin-inline-end 0 !important
 			:not(i):not(.status__action-bar-spacer) {
 				display flex
-				flex-grow 9999 !important
+				flex-grow 9999
 				justify-content center !important
 				max-width 55px
 				min-width max-content
 			}
+			> .icon-button:first-child {
+				margin-inline-start -8px !important
+			}
 		}
 		.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer {
 			flex-wrap wrap
@@ -250,8 +278,9 @@
 
 
 
-	.dropdown-menu {
+	.dropdown-menu, .dropdown-animation {
 		border-radius var(--radius)
+		animation scaleIn .2s
 	}
 	.dropdown-menu__container__list {
 		overflow hidden auto
@@ -351,7 +380,7 @@
 				border-radius var(--radius)
 				animation scaleIn .2s
 				box-shadow var(--shadow-low)
-				margin-top 4px
+				margin-top 10px
 				margin-inline 4px
 				width calc(100% - 8px)
 			}
@@ -366,6 +395,8 @@
 
 		.compose-form {
 			padding-top 10px
+			min-height unset
+			overflow unset
 			.reply-indicator {
 				position relative
 				transition min-height .1s
@@ -379,12 +410,6 @@
 			}
 			.compose-form__buttons-wrapper {
 				border-radius 0 0 var(--radius) var(--radius) !important
-				position sticky
-				bottom 0
-				.compose-form__buttons> * {
-					border-radius var(--radius-round)
-					overflow hidden
-				}
 			}
 			.compose-form__publish-button-wrapper {
 				overflow visible !important
@@ -598,7 +623,7 @@
 			isolation isolate
 			overflow hidden
 			/.dismissable-banner__message {
-				padding 10px
+				padding-block 10px
 				padding-inline-end 30px
 			}
 			/.dismissable-banner__action {
@@ -612,7 +637,7 @@
 				border-radius 0 !important
 			}
 		}
-		.scrollable:not(.scrollable--flex)  > .dismissable-banner {
+		.scrollable > .dismissable-banner {
 			margin 0 !important
 		}
 
@@ -809,10 +834,8 @@
 				// max-width max-content !important
 				dt {
 					all unset
-					
 					color unset
 					opacity .9
-					text-transform capitalize
 				}
 
 				dd {
@@ -1492,7 +1515,7 @@
 				}
 			}
 			& ~ [style*="aspect-ratio"] {
-				aspect-ratio unset !important
+				max-height 80vh
 			}
 		}
 		.status > .status__content {
@@ -2374,9 +2397,6 @@
 					margin 0 !important
 					justify-content center
 				}
-				> .icon-button:first-child {
-					margin-inline-start -8px !important
-				}
 			}
 
 			.icon-button:after {
@@ -2420,28 +2440,6 @@
 				overflow visible !important
 			}
 
-			// COMPOSE PAGE
-			.columns-area__panels__main {
-				.compose-form {
-					flex-grow 1
-					display flex
-					flex-direction column
-					overflow hidden
-				}
-				.compose-form__autosuggest-wrapper {
-					overflow hidden
-				}
-				.compose-form__autosuggest-wrapper,
- 				.autosuggest-textarea,
- 				.autosuggest-textarea label,
- 				.autosuggest-textarea textarea {
-					display flex
-					flex-direction column
-					flex-grow 1
-				}
-				
-			}
-
 			// ABOUT PAGE
 			.about.about.about {
 				padding-inline 10px !important
@@ -2877,6 +2875,7 @@
 		.drawer__inner:not(.darker), .drawer__inner__mastodon {
 			background-color transparent
 			border 0 !important
+			background-color transparent !important
 		}
 		.drawer__inner.darker {
 			border-radius var(--radius-round) var(--radius-round) 0 0
@@ -2940,9 +2939,10 @@
 			overflow visible
 			.status__content__text {
 				mask linear-gradient(to bottom, black 50px, transparent) !important
+				-webkit-mask @mask
 				max-height 100px
 			}
-			p:not(:last-of-type) {
+			p:not(:last-child) {
 				margin-bottom .4em
 			}
 			br {
@@ -2998,16 +2998,23 @@
 	}
 	
 	.status__relative-time {
-		margin-right 5px
+		margin-inline 5px !important
 		z-index 2
+		flex-grow 0 !important
 	}
 	
 	.reactions-bar {
+		width unset
+		margin-top 8px
 		button {
 			border-radius 6px !important
 			padding-block 2px
 			@media (pointer: coarse) {
-				padding 8px 10px !important
+				padding 4px 8px !important
+				.reactions-bar__item__emoji {
+					height 18px
+					width @height
+				}
 			}
 		}
 		&:empty {