From 0de4a9aa5f7a1444bbc0d5570cf724e7e438ce81 Mon Sep 17 00:00:00 2001 From: freeplay Date: Fri, 11 Aug 2023 18:16:10 -0400 Subject: [PATCH] 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 | 16 ++++++-- modern.css | 67 ++++++++++++++++----------------- modern.user.css | 97 ++++++++++++++++++++++++++---------------------- 3 files changed, 98 insertions(+), 82 deletions(-) diff --git a/glitch-fixes.css b/glitch-fixes.css index 7b4d7ac..57fd12e 100644 --- a/glitch-fixes.css +++ b/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 { diff --git a/modern.css b/modern.css index 9dac75c..e2e3a98 100644 --- a/modern.css +++ b/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; diff --git a/modern.user.css b/modern.user.css index db02b9f..dbdf7dd 100644 --- a/modern.user.css +++ b/modern.user.css @@ -13,9 +13,13 @@ //////////////////////////////////////////////////////////////////// -/* Update 1.6.9 -- fix embeds w/ no text -- respect the built-in reduce-motion option +/* Update 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 */ /* ==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 {