diff --git a/app/javascript/flavours/glitch/styles/glitch-fixes.css b/app/javascript/flavours/glitch/styles/glitch-fixes.css index ff9abbf5df..1d525c0c25 100644 --- a/app/javascript/flavours/glitch/styles/glitch-fixes.css +++ b/app/javascript/flavours/glitch/styles/glitch-fixes.css @@ -40,6 +40,12 @@ body.app-body.flavour-glitch > #mastodon .collapsed .status__content br { body.app-body.flavour-glitch > #mastodon .collapsed .status__content::after { content: unset; } +body.app-body.flavour-glitch > #mastodon .collapsed .status__action-bar :not(i), +body.app-body.flavour-glitch > #mastodon .collapsed .detailed-status__action-bar :not(i), +body.app-body.flavour-glitch > #mastodon .collapsed .picture-in-picture__footer :not(i) { + height: unset !important; + width: unset !important; +} body.app-body.flavour-glitch > #mastodon .collapsed.muted .status__content__text ~ * { display: none; } @@ -79,6 +85,7 @@ body.app-body.flavour-glitch > #mastodon .status__relative-time { margin-inline: auto 5px !important; z-index: 2; flex-grow: 0 !important; + min-width: 5ch !important; } body.app-body.flavour-glitch > #mastodon .reactions-bar { width: unset; @@ -183,4 +190,4 @@ body.app-body.flavour-glitch > #mastodon .account-card .media-modal__close::befo .layout-multiple-columns.flavour-glitch .drawer__inner { margin-top: -10px; padding-top: 30px !important; -} \ No newline at end of file +} diff --git a/app/javascript/flavours/glitch/styles/modern-contrast.css b/app/javascript/flavours/glitch/styles/modern-contrast.css index 44faf0f52d..32d93d40e4 100644 --- a/app/javascript/flavours/glitch/styles/modern-contrast.css +++ b/app/javascript/flavours/glitch/styles/modern-contrast.css @@ -704,6 +704,7 @@ a:focus-visible, margin-bottom: 10px !important; border-radius: 0px !important; padding: 15px !important; + height: max-content; isolation: isolate; overflow: hidden; } @@ -729,7 +730,9 @@ a:focus-visible, z-index: -1; } #mastodon .dismissable-banner .scrollable:not(.scrollable--flex) .account-timeline__header, -#mastodon .follow_requests-unlocked_explanation .scrollable:not(.scrollable--flex) .account-timeline__header { +#mastodon .follow_requests-unlocked_explanation .scrollable:not(.scrollable--flex) .account-timeline__header, +#mastodon .dismissable-banner .scrollable:not(.scrollable--flex) .dismissable-banner, +#mastodon .follow_requests-unlocked_explanation .scrollable:not(.scrollable--flex) .dismissable-banner { margin: 0px !important; } #mastodon .dismissable-banner .focusable, @@ -833,7 +836,7 @@ a:focus-visible, #mastodon .column:not(.scrollable--flex) > .dismissable-banner ~ .scrollable { border-radius: 0 !important; } -#mastodon .scrollable > .dismissable-banner { +#mastodon :not(.account__section-headline) + .scrollable > .dismissable-banner { margin: 0px !important; margin-bottom: 0 !important; } @@ -1797,6 +1800,14 @@ a:focus-visible, .directory__list.directory__list { padding: 15px 10px; } +.layout-multiple-columns .explore__suggestions, +.layout-multiple-columns .directory__list { + display: block !important; +} +.layout-multiple-columns .explore__suggestions > *, +.layout-multiple-columns .directory__list > * { + margin: 10px !important; +} .focusable.account-card.account-card.account-card .account-card__header, .entry.account-card.account-card.account-card .account-card__header, .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__header, @@ -2655,10 +2666,13 @@ a:focus-visible, #mastodon .status__action-bar :not(i), #mastodon .detailed-status__action-bar :not(i), #mastodon .picture-in-picture__footer :not(i) { - height: unset !important; - width: unset !important; pointer-events: all; } +#mastodon .status__action-bar > div, +#mastodon .detailed-status__action-bar > div, +#mastodon .picture-in-picture__footer > div { + all: unset; +} #mastodon .status__action-bar .icon-button, #mastodon .detailed-status__action-bar .icon-button, #mastodon .picture-in-picture__footer .icon-button { @@ -2676,21 +2690,6 @@ a:focus-visible, #mastodon .picture-in-picture__footer .icon-button:last-child { margin: 0 !important; } -#mastodon .status__action-bar .icon-button i, -#mastodon .detailed-status__action-bar .icon-button i, -#mastodon .picture-in-picture__footer .icon-button i { - min-width: 22px; -} -#mastodon .status__action-bar .icon-button[aria-label]::after, -#mastodon .detailed-status__action-bar .icon-button[aria-label]::after, -#mastodon .picture-in-picture__footer .icon-button[aria-label]::after { - all: unset; - font-size: 12px; - margin-inline-start: 0.5em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} #mastodon .status__action-bar .icon-button .icon-button__counter, #mastodon .detailed-status__action-bar .icon-button .icon-button__counter, #mastodon .picture-in-picture__footer .icon-button .icon-button__counter { @@ -2721,16 +2720,7 @@ a:focus-visible, #mastodon .picture-in-picture__footer.picture-in-picture__footer > div { display: flex; justify-content: center; - width: 100%; -} -#mastodon .status__action-bar.detailed-status__action-bar > div :not(i), -#mastodon .detailed-status__action-bar.detailed-status__action-bar > div :not(i), -#mastodon .picture-in-picture__footer.detailed-status__action-bar > div :not(i), -#mastodon .status__action-bar.picture-in-picture__footer > div :not(i), -#mastodon .detailed-status__action-bar.picture-in-picture__footer > div :not(i), -#mastodon .picture-in-picture__footer.picture-in-picture__footer > div :not(i) { - display: flex; - width: 100% !important; + flex-grow: 1; } #mastodon .status__action-bar.picture-in-picture__footer .icon-button::after, #mastodon .detailed-status__action-bar.picture-in-picture__footer .icon-button::after, @@ -3221,7 +3211,8 @@ a:focus-visible, background-color: inherit; z-index: -1; } - #mastodon .scrollable:not(.scrollable--flex) .account-timeline__header { + #mastodon .scrollable:not(.scrollable--flex) .account-timeline__header, + #mastodon .scrollable:not(.scrollable--flex) .dismissable-banner { margin: 0px !important; } #mastodon .focusable, @@ -3532,7 +3523,7 @@ a:focus-visible, margin-top: 2px !important; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header { - z-index: 200; + z-index: 199; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header::before, #mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header::after { @@ -4518,7 +4509,8 @@ a:focus-visible, background-color: inherit; z-index: -1; } -.layout-multiple-columns #mastodon .columns-area .scrollable:not(.scrollable--flex) .account-timeline__header { +.layout-multiple-columns #mastodon .columns-area .scrollable:not(.scrollable--flex) .account-timeline__header, +.layout-multiple-columns #mastodon .columns-area .scrollable:not(.scrollable--flex) .dismissable-banner { margin: 0px !important; } .layout-multiple-columns #mastodon .columns-area .focusable, diff --git a/app/javascript/flavours/glitch/styles/modern-light.css b/app/javascript/flavours/glitch/styles/modern-light.css index 0ed8a6b342..a24fb2d0c2 100644 --- a/app/javascript/flavours/glitch/styles/modern-light.css +++ b/app/javascript/flavours/glitch/styles/modern-light.css @@ -704,6 +704,7 @@ a:focus-visible, margin-bottom: 10px !important; border-radius: 0px !important; padding: 15px !important; + height: max-content; isolation: isolate; overflow: hidden; } @@ -729,7 +730,9 @@ a:focus-visible, z-index: -1; } #mastodon .dismissable-banner .scrollable:not(.scrollable--flex) .account-timeline__header, -#mastodon .follow_requests-unlocked_explanation .scrollable:not(.scrollable--flex) .account-timeline__header { +#mastodon .follow_requests-unlocked_explanation .scrollable:not(.scrollable--flex) .account-timeline__header, +#mastodon .dismissable-banner .scrollable:not(.scrollable--flex) .dismissable-banner, +#mastodon .follow_requests-unlocked_explanation .scrollable:not(.scrollable--flex) .dismissable-banner { margin: 0px !important; } #mastodon .dismissable-banner .focusable, @@ -833,7 +836,7 @@ a:focus-visible, #mastodon .column:not(.scrollable--flex) > .dismissable-banner ~ .scrollable { border-radius: 0 !important; } -#mastodon .scrollable > .dismissable-banner { +#mastodon :not(.account__section-headline) + .scrollable > .dismissable-banner { margin: 0px !important; margin-bottom: 0 !important; } @@ -1797,6 +1800,14 @@ a:focus-visible, .directory__list.directory__list { padding: 15px 10px; } +.layout-multiple-columns .explore__suggestions, +.layout-multiple-columns .directory__list { + display: block !important; +} +.layout-multiple-columns .explore__suggestions > *, +.layout-multiple-columns .directory__list > * { + margin: 10px !important; +} .focusable.account-card.account-card.account-card .account-card__header, .entry.account-card.account-card.account-card .account-card__header, .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__header, @@ -2655,10 +2666,13 @@ a:focus-visible, #mastodon .status__action-bar :not(i), #mastodon .detailed-status__action-bar :not(i), #mastodon .picture-in-picture__footer :not(i) { - height: unset !important; - width: unset !important; pointer-events: all; } +#mastodon .status__action-bar > div, +#mastodon .detailed-status__action-bar > div, +#mastodon .picture-in-picture__footer > div { + all: unset; +} #mastodon .status__action-bar .icon-button, #mastodon .detailed-status__action-bar .icon-button, #mastodon .picture-in-picture__footer .icon-button { @@ -2676,21 +2690,6 @@ a:focus-visible, #mastodon .picture-in-picture__footer .icon-button:last-child { margin: 0 !important; } -#mastodon .status__action-bar .icon-button i, -#mastodon .detailed-status__action-bar .icon-button i, -#mastodon .picture-in-picture__footer .icon-button i { - min-width: 22px; -} -#mastodon .status__action-bar .icon-button[aria-label]::after, -#mastodon .detailed-status__action-bar .icon-button[aria-label]::after, -#mastodon .picture-in-picture__footer .icon-button[aria-label]::after { - all: unset; - font-size: 12px; - margin-inline-start: 0.5em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} #mastodon .status__action-bar .icon-button .icon-button__counter, #mastodon .detailed-status__action-bar .icon-button .icon-button__counter, #mastodon .picture-in-picture__footer .icon-button .icon-button__counter { @@ -2721,16 +2720,7 @@ a:focus-visible, #mastodon .picture-in-picture__footer.picture-in-picture__footer > div { display: flex; justify-content: center; - width: 100%; -} -#mastodon .status__action-bar.detailed-status__action-bar > div :not(i), -#mastodon .detailed-status__action-bar.detailed-status__action-bar > div :not(i), -#mastodon .picture-in-picture__footer.detailed-status__action-bar > div :not(i), -#mastodon .status__action-bar.picture-in-picture__footer > div :not(i), -#mastodon .detailed-status__action-bar.picture-in-picture__footer > div :not(i), -#mastodon .picture-in-picture__footer.picture-in-picture__footer > div :not(i) { - display: flex; - width: 100% !important; + flex-grow: 1; } #mastodon .status__action-bar.picture-in-picture__footer .icon-button::after, #mastodon .detailed-status__action-bar.picture-in-picture__footer .icon-button::after, @@ -3221,7 +3211,8 @@ a:focus-visible, background-color: inherit; z-index: -1; } - #mastodon .scrollable:not(.scrollable--flex) .account-timeline__header { + #mastodon .scrollable:not(.scrollable--flex) .account-timeline__header, + #mastodon .scrollable:not(.scrollable--flex) .dismissable-banner { margin: 0px !important; } #mastodon .focusable, @@ -3532,7 +3523,7 @@ a:focus-visible, margin-top: 2px !important; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header { - z-index: 200; + z-index: 199; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header::before, #mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header::after { @@ -4518,7 +4509,8 @@ a:focus-visible, background-color: inherit; z-index: -1; } -.layout-multiple-columns #mastodon .columns-area .scrollable:not(.scrollable--flex) .account-timeline__header { +.layout-multiple-columns #mastodon .columns-area .scrollable:not(.scrollable--flex) .account-timeline__header, +.layout-multiple-columns #mastodon .columns-area .scrollable:not(.scrollable--flex) .dismissable-banner { margin: 0px !important; } .layout-multiple-columns #mastodon .columns-area .focusable, diff --git a/app/javascript/flavours/glitch/styles/modern.css b/app/javascript/flavours/glitch/styles/modern.css index 7730a642fd..a80eb68654 100644 --- a/app/javascript/flavours/glitch/styles/modern.css +++ b/app/javascript/flavours/glitch/styles/modern.css @@ -704,6 +704,7 @@ a:focus-visible, margin-bottom: 10px !important; border-radius: 0px !important; padding: 15px !important; + height: max-content; isolation: isolate; overflow: hidden; } @@ -729,7 +730,9 @@ a:focus-visible, z-index: -1; } #mastodon .dismissable-banner .scrollable:not(.scrollable--flex) .account-timeline__header, -#mastodon .follow_requests-unlocked_explanation .scrollable:not(.scrollable--flex) .account-timeline__header { +#mastodon .follow_requests-unlocked_explanation .scrollable:not(.scrollable--flex) .account-timeline__header, +#mastodon .dismissable-banner .scrollable:not(.scrollable--flex) .dismissable-banner, +#mastodon .follow_requests-unlocked_explanation .scrollable:not(.scrollable--flex) .dismissable-banner { margin: 0px !important; } #mastodon .dismissable-banner .focusable, @@ -833,7 +836,7 @@ a:focus-visible, #mastodon .column:not(.scrollable--flex) > .dismissable-banner ~ .scrollable { border-radius: 0 !important; } -#mastodon .scrollable > .dismissable-banner { +#mastodon :not(.account__section-headline) + .scrollable > .dismissable-banner { margin: 0px !important; margin-bottom: 0 !important; } @@ -1797,6 +1800,14 @@ a:focus-visible, .directory__list.directory__list { padding: 15px 10px; } +.layout-multiple-columns .explore__suggestions, +.layout-multiple-columns .directory__list { + display: block !important; +} +.layout-multiple-columns .explore__suggestions > *, +.layout-multiple-columns .directory__list > * { + margin: 10px !important; +} .focusable.account-card.account-card.account-card .account-card__header, .entry.account-card.account-card.account-card .account-card__header, .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__header, @@ -2655,10 +2666,13 @@ a:focus-visible, #mastodon .status__action-bar :not(i), #mastodon .detailed-status__action-bar :not(i), #mastodon .picture-in-picture__footer :not(i) { - height: unset !important; - width: unset !important; pointer-events: all; } +#mastodon .status__action-bar > div, +#mastodon .detailed-status__action-bar > div, +#mastodon .picture-in-picture__footer > div { + all: unset; +} #mastodon .status__action-bar .icon-button, #mastodon .detailed-status__action-bar .icon-button, #mastodon .picture-in-picture__footer .icon-button { @@ -2676,21 +2690,6 @@ a:focus-visible, #mastodon .picture-in-picture__footer .icon-button:last-child { margin: 0 !important; } -#mastodon .status__action-bar .icon-button i, -#mastodon .detailed-status__action-bar .icon-button i, -#mastodon .picture-in-picture__footer .icon-button i { - min-width: 22px; -} -#mastodon .status__action-bar .icon-button[aria-label]::after, -#mastodon .detailed-status__action-bar .icon-button[aria-label]::after, -#mastodon .picture-in-picture__footer .icon-button[aria-label]::after { - all: unset; - font-size: 12px; - margin-inline-start: 0.5em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} #mastodon .status__action-bar .icon-button .icon-button__counter, #mastodon .detailed-status__action-bar .icon-button .icon-button__counter, #mastodon .picture-in-picture__footer .icon-button .icon-button__counter { @@ -2721,16 +2720,7 @@ a:focus-visible, #mastodon .picture-in-picture__footer.picture-in-picture__footer > div { display: flex; justify-content: center; - width: 100%; -} -#mastodon .status__action-bar.detailed-status__action-bar > div :not(i), -#mastodon .detailed-status__action-bar.detailed-status__action-bar > div :not(i), -#mastodon .picture-in-picture__footer.detailed-status__action-bar > div :not(i), -#mastodon .status__action-bar.picture-in-picture__footer > div :not(i), -#mastodon .detailed-status__action-bar.picture-in-picture__footer > div :not(i), -#mastodon .picture-in-picture__footer.picture-in-picture__footer > div :not(i) { - display: flex; - width: 100% !important; + flex-grow: 1; } #mastodon .status__action-bar.picture-in-picture__footer .icon-button::after, #mastodon .detailed-status__action-bar.picture-in-picture__footer .icon-button::after, @@ -3221,7 +3211,8 @@ a:focus-visible, background-color: inherit; z-index: -1; } - #mastodon .scrollable:not(.scrollable--flex) .account-timeline__header { + #mastodon .scrollable:not(.scrollable--flex) .account-timeline__header, + #mastodon .scrollable:not(.scrollable--flex) .dismissable-banner { margin: 0px !important; } #mastodon .focusable, @@ -3532,7 +3523,7 @@ a:focus-visible, margin-top: 2px !important; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header { - z-index: 200; + z-index: 199; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header::before, #mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header::after { @@ -4518,7 +4509,8 @@ a:focus-visible, background-color: inherit; z-index: -1; } -.layout-multiple-columns #mastodon .columns-area .scrollable:not(.scrollable--flex) .account-timeline__header { +.layout-multiple-columns #mastodon .columns-area .scrollable:not(.scrollable--flex) .account-timeline__header, +.layout-multiple-columns #mastodon .columns-area .scrollable:not(.scrollable--flex) .dismissable-banner { margin: 0px !important; } .layout-multiple-columns #mastodon .columns-area .focusable,