diff --git a/app/javascript/flavours/glitch/styles/modern/glitch-fixes.scss b/app/javascript/flavours/glitch/styles/modern/glitch-fixes.scss index 77dc3e7a6d..beba934421 100644 --- a/app/javascript/flavours/glitch/styles/modern/glitch-fixes.scss +++ b/app/javascript/flavours/glitch/styles/modern/glitch-fixes.scss @@ -16,6 +16,10 @@ body.app-body.flavour-glitch margin-inline-start: auto; } +body.app-body.flavour-glitch > #mastodon .compose-form__buttons-wrapper { + position: relative; +} + body.app-body.flavour-glitch > #mastodon .character-counter__wrapper { position: absolute; inset-inline-end: 0; @@ -41,6 +45,7 @@ body.app-body.flavour-glitch .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; } @@ -48,7 +53,7 @@ body.app-body.flavour-glitch > #mastodon .collapsed .status__content - p:not(:last-of-type) { + p:not(:last-child) { margin-bottom: 0.4em; } @@ -122,8 +127,14 @@ body.app-body.flavour-glitch > #mastodon .status__action-bar-spacer { } 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 { @@ -132,7 +143,16 @@ 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; } } diff --git a/app/javascript/flavours/glitch/styles/modern/style.scss b/app/javascript/flavours/glitch/styles/modern/style.scss index 9dac75c979..e2e3a981e0 100644 --- a/app/javascript/flavours/glitch/styles/modern/style.scss +++ b/app/javascript/flavours/glitch/styles/modern/style.scss @@ -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/app/javascript/styles/modern/style.scss b/app/javascript/styles/modern/style.scss index 9dac75c979..e2e3a981e0 100644 --- a/app/javascript/styles/modern/style.scss +++ b/app/javascript/styles/modern/style.scss @@ -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;