diff --git a/glitch-fixes.css b/glitch-fixes.css index c8f988c..ff9abbf 100644 --- a/glitch-fixes.css +++ b/glitch-fixes.css @@ -149,6 +149,24 @@ body.app-body.flavour-glitch > #mastodon .pillbar-button { border-radius: 0 !important; padding: 6px; } +body.app-body.flavour-glitch > #mastodon .account__header__account-note { + margin-block: 10px 0; +} +body.app-body.flavour-glitch > #mastodon .account__header__account-note:focus-within { + border-radius: var(--radius) !important; +} +body.app-body.flavour-glitch > #mastodon .account__header__account-note__header { + align-items: center; +} +body.app-body.flavour-glitch > #mastodon .account__header__account-note__header button { + display: flex; + gap: 0.2em; +} +body.app-body.flavour-glitch > #mastodon .account__header__account-note__content { + width: 100%; + padding: 0 !important; + margin: 0 !important; +} body.app-body.flavour-glitch > #mastodon .account-card .media-modal__close { left: 10px; top: 10px; diff --git a/modern.css b/modern.css index 39dc0e8..2809db2 100644 --- a/modern.css +++ b/modern.css @@ -90,7 +90,7 @@ a:focus-visible, body:not(.reduce-motion) .status-card, body:not(.reduce-motion) .audio-player, body:not(.reduce-motion) .account { - transition: transform 0.4s cubic-bezier(0, 0, 0, 3), background 0.2s !important; + transition: transform 0.4s cubic-bezier(0, 0, 0, 3), background 0.2s, opacity 0.2s !important; } body:not(.reduce-motion) .load-more:active, body:not(.reduce-motion) .setting-toggle:active, @@ -472,6 +472,9 @@ a:focus-visible, --top: 30px; } } +#mastodon { + overflow: clip; +} #mastodon .compose-panel { margin-top: 0; overflow-y: auto; @@ -633,15 +636,6 @@ a:focus-visible, width: 0; flex-grow: 1; } - .columns-area__panels__main .column, - .columns-area__panels__main .columns-area { - overflow: visible !important; - border-radius: var(--radius) var(--radius) 0 0 !important; - } - .columns-area__panels__main .column > :first-child, - .columns-area__panels__main .columns-area > :first-child { - border-radius: var(--radius) var(--radius) 0 0 !important; - } } @media (min-width: 1320px) { .columns-area__panels__main { @@ -655,30 +649,22 @@ a:focus-visible, display: grid; grid-template-columns: 100%; } + .columns-area__panels__main .column, + .columns-area__panels__main .columns-area { + overflow: clip !important; + border-radius: var(--radius) var(--radius) 0 0 !important; + } + .columns-area__panels__main .column > :first-child, + .columns-area__panels__main .columns-area > :first-child { + border-radius: var(--radius) var(--radius) 0 0 !important; + } } .columns-area__panels__main > div { - border-radius: var(--radius) var(--radius) 0 0; grid-row: 1; } -.columns-area__panels__main > div:last-child { - box-shadow: var(--shadow-med); -} .columns-area__panels__main :not(.scrollable--flex) > .scrollable { padding-bottom: 40vh !important; } -.columns-area__panels__main .column-actions { - position: static; -} -.columns-area__panels__main .column-actions .column-actions__background { - border-bottom-left-radius: var(--radius); -} -#mastodon .scrollable { - border-radius: var(--radius) var(--radius) 0 0 !important; - border: 0; -} -#mastodon .scrollable:first-child { - overflow: clip; -} #mastodon .column-header__wrapper ~ .scrollable { overflow: auto !important; } @@ -695,31 +681,147 @@ a:focus-visible, #mastodon .activity-stream > [tabindex]:first-child > .focusable { margin-top: 0 !important; } -#mastodon .columns-area { - box-sizing: border-box; - padding-bottom: 0; - height: 100% !important; +#mastodon .search-results__section__header { + margin: 0px -10px 10px; + color: unset; + background: none; + padding-inline: 20px; + font-weight: 600; } -#mastodon .explore__search-results { - padding: 10px; +#mastodon .search-results__section { + border: 0; + margin-bottom: 20px; } #mastodon .dismissable-banner, #mastodon .follow_requests-unlocked_explanation { - border-inline: 0; - border-top: 0; - margin: -10px; - margin-bottom: 10px; - border-radius: 0; - padding: 15px; + display: flex; + align-items: center; + border: 0 !important; + margin: -10px !important; + margin-bottom: 10px !important; + border-radius: 0px !important; + padding: 15px !important; isolation: isolate; overflow: hidden; } .dismissable-banner__message { padding-block: 10px; - padding-inline-end: 30px; + order: -1; } -.dismissable-banner__action { - margin: 10px; +#mastodon .dismissable-banner .dismissable-banner__action, +#mastodon .follow_requests-unlocked_explanation .dismissable-banner__action { + position: static; +} +#mastodon .dismissable-banner .scrollable:not(.scrollable--flex), +#mastodon .follow_requests-unlocked_explanation .scrollable:not(.scrollable--flex) { + padding: 0px !important; + padding-bottom: 40vh !important; +} +#mastodon .dismissable-banner .scrollable:not(.scrollable--flex)::before, +#mastodon .follow_requests-unlocked_explanation .scrollable:not(.scrollable--flex)::before { + content: ""; + position: absolute; + inset: 0; + background-color: inherit; + 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 { + margin: 0px !important; +} +#mastodon .dismissable-banner .focusable, +#mastodon .follow_requests-unlocked_explanation .focusable, +#mastodon .dismissable-banner .entry, +#mastodon .follow_requests-unlocked_explanation .entry, +#mastodon .dismissable-banner .statuses-grid__item .detailed-status, +#mastodon .follow_requests-unlocked_explanation .statuses-grid__item .detailed-status, +#mastodon .dismissable-banner .trends__item, +#mastodon .follow_requests-unlocked_explanation .trends__item, +#mastodon .dismissable-banner .story, +#mastodon .follow_requests-unlocked_explanation .story, +#mastodon .dismissable-banner .account-card, +#mastodon .follow_requests-unlocked_explanation .account-card, +#mastodon .dismissable-banner .scrollable :not(.focusable) > .account, +#mastodon .follow_requests-unlocked_explanation .scrollable :not(.focusable) > .account, +#mastodon .dismissable-banner .timeline-hint, +#mastodon .follow_requests-unlocked_explanation .timeline-hint { + border-radius: 0; +} +#mastodon .dismissable-banner .focusable::before, +#mastodon .follow_requests-unlocked_explanation .focusable::before, +#mastodon .dismissable-banner .entry::before, +#mastodon .follow_requests-unlocked_explanation .entry::before, +#mastodon .dismissable-banner .statuses-grid__item .detailed-status::before, +#mastodon .follow_requests-unlocked_explanation .statuses-grid__item .detailed-status::before, +#mastodon .dismissable-banner .trends__item::before, +#mastodon .follow_requests-unlocked_explanation .trends__item::before, +#mastodon .dismissable-banner .story::before, +#mastodon .follow_requests-unlocked_explanation .story::before, +#mastodon .dismissable-banner .account-card::before, +#mastodon .follow_requests-unlocked_explanation .account-card::before, +#mastodon .dismissable-banner .scrollable :not(.focusable) > .account::before, +#mastodon .follow_requests-unlocked_explanation .scrollable :not(.focusable) > .account::before, +#mastodon .dismissable-banner .timeline-hint::before, +#mastodon .follow_requests-unlocked_explanation .timeline-hint::before { + border-radius: 0 !important; +} +#mastodon .dismissable-banner .focusable::after, +#mastodon .follow_requests-unlocked_explanation .focusable::after, +#mastodon .dismissable-banner .entry::after, +#mastodon .follow_requests-unlocked_explanation .entry::after, +#mastodon .dismissable-banner .statuses-grid__item .detailed-status::after, +#mastodon .follow_requests-unlocked_explanation .statuses-grid__item .detailed-status::after, +#mastodon .dismissable-banner .trends__item::after, +#mastodon .follow_requests-unlocked_explanation .trends__item::after, +#mastodon .dismissable-banner .story::after, +#mastodon .follow_requests-unlocked_explanation .story::after, +#mastodon .dismissable-banner .account-card::after, +#mastodon .follow_requests-unlocked_explanation .account-card::after, +#mastodon .dismissable-banner .scrollable :not(.focusable) > .account::after, +#mastodon .follow_requests-unlocked_explanation .scrollable :not(.focusable) > .account::after, +#mastodon .dismissable-banner .timeline-hint::after, +#mastodon .follow_requests-unlocked_explanation .timeline-hint::after { + inset-inline: 0 !important; +} +#mastodon .dismissable-banner [class*="explore__"] > *, +#mastodon .follow_requests-unlocked_explanation [class*="explore__"] > * { + border-radius: var(--radius); +} +#mastodon .dismissable-banner .detailed-status__wrapper, +#mastodon .follow_requests-unlocked_explanation .detailed-status__wrapper { + margin: 0 !important; +} +#mastodon .dismissable-banner .status__action-bar, +#mastodon .follow_requests-unlocked_explanation .status__action-bar { + margin-bottom: 0px; + gap: 0; + margin-inline-end: 0 !important; +} +#mastodon .dismissable-banner .status__action-bar :not(i):not(.status__action-bar-spacer), +#mastodon .follow_requests-unlocked_explanation .status__action-bar :not(i):not(.status__action-bar-spacer) { + display: flex; + flex-grow: 9999; + justify-content: center !important; + max-width: 55px; + min-width: max-content; +} +#mastodon .dismissable-banner .status__action-bar > .icon-button:first-child, +#mastodon .follow_requests-unlocked_explanation .status__action-bar > .icon-button:first-child { + margin-inline-start: -8px !important; +} +#mastodon .dismissable-banner .status__action-bar, +#mastodon .follow_requests-unlocked_explanation .status__action-bar, +#mastodon .dismissable-banner .detailed-status__action-bar, +#mastodon .follow_requests-unlocked_explanation .detailed-status__action-bar, +#mastodon .dismissable-banner .picture-in-picture__footer, +#mastodon .follow_requests-unlocked_explanation .picture-in-picture__footer { + flex-wrap: wrap; +} +@media (max-width: 890px) { + #mastodon .dismissable-banner, + #mastodon .follow_requests-unlocked_explanation { + margin: 0 !important; + } } #mastodon .column:not(.scrollable--flex) > .dismissable-banner { border-radius: var(--radius) var(--radius) 0 0 !important; @@ -729,7 +831,8 @@ a:focus-visible, border-radius: 0 !important; } #mastodon .scrollable > .dismissable-banner { - margin: 0 !important; + margin: 0px !important; + margin-bottom: 0 !important; } #mastodon .empty-column-indicator { contain: unset; @@ -804,6 +907,11 @@ a:focus-visible, flex-direction: column; background: inherit; } +@media (max-width: 890px) { + #mastodon .account-timeline__header .account__header__bar { + padding-inline: 15px; + } +} body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header__bar { background: inherit !important; } @@ -859,6 +967,12 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ white-space: unset; gap: 0 0.4em; } +#mastodon .account-timeline__header .account__header__badges { + margin-top: 10px; +} +#mastodon .account-timeline__header .account__header__badges span { + font-weight: 600; +} #mastodon .account-timeline__header .account__header__bio { padding: 0; margin: 0; @@ -1002,7 +1116,6 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ border-radius: 8px; font-size: 12px; width: unset; - background: none; } #mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note label, #mastodon .account__header__account-note.account__header__account-note.account__header__account-note label { @@ -1054,48 +1167,40 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ font-weight: 600; padding-inline: 14px; } -#mastodon .account__section-headline { +#mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) { background: none; position: relative; z-index: 2; } -.with-modals #mastodon .account__section-headline { +.with-modals #mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) { border: 0 !important; } -#mastodon .account__section-headline a, -#mastodon .account__section-headline button { +#mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) a, +#mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) button { background: none; border-radius: 0 !important; } -#mastodon .account__section-headline a span, -#mastodon .account__section-headline button span { +#mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) a span, +#mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) button span { font-weight: 400; opacity: 0.7; transition: opacity 0.2s; } -#mastodon .account__section-headline a.active span, -#mastodon .account__section-headline button.active span { +#mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) a.active span, +#mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) button.active span { font-weight: 700; opacity: 1; } -#mastodon .account__section-headline a:hover span, -#mastodon .account__section-headline button:hover span, -#mastodon .account__section-headline a:active span, -#mastodon .account__section-headline button:active span { +#mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) a:hover span, +#mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) button:hover span, +#mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) a:active span, +#mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) button:active span { opacity: 1 !important; } -#mastodon .account__section-headline a::before, -#mastodon .account__section-headline button::before { +#mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) a::before, +#mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) button::before { border-color: transparent transparent var(--border-color); } -#mastodon .notification__filter-bar { - border: 0 !important; - margin-bottom: calc(0px - var(--radius)); - padding-bottom: var(--radius); -} -#mastodon .notification__filter-bar + .scrollable { - overflow: clip; -} #mastodon .account-gallery__container { border-radius: var(--radius); overflow: clip; @@ -1540,14 +1645,14 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ border-radius: var(--radius); border: 0; } -.focusable:not(.detailed-status__wrapper):not(.status__wrapper)::after, -.entry:not(.detailed-status__wrapper):not(.status__wrapper)::after, -.statuses-grid__item .detailed-status:not(.detailed-status__wrapper):not(.status__wrapper)::after, -.trends__item:not(.detailed-status__wrapper):not(.status__wrapper)::after, -.story:not(.detailed-status__wrapper):not(.status__wrapper)::after, -.account-card:not(.detailed-status__wrapper):not(.status__wrapper)::after, -.scrollable :not(.focusable) > .account:not(.detailed-status__wrapper):not(.status__wrapper)::after, -.timeline-hint:not(.detailed-status__wrapper):not(.status__wrapper)::after { +.focusable:not(.detailed-status__wrapper):not(.status__wrapper):not(:last-child:not(:only-child))::after, +.entry:not(.detailed-status__wrapper):not(.status__wrapper):not(:last-child:not(:only-child))::after, +.statuses-grid__item .detailed-status:not(.detailed-status__wrapper):not(.status__wrapper):not(:last-child:not(:only-child))::after, +.trends__item:not(.detailed-status__wrapper):not(.status__wrapper):not(:last-child:not(:only-child))::after, +.story:not(.detailed-status__wrapper):not(.status__wrapper):not(:last-child:not(:only-child))::after, +.account-card:not(.detailed-status__wrapper):not(.status__wrapper):not(:last-child:not(:only-child))::after, +.scrollable :not(.focusable) > .account:not(.detailed-status__wrapper):not(.status__wrapper):not(:last-child:not(:only-child))::after, +.timeline-hint:not(.detailed-status__wrapper):not(.status__wrapper):not(:last-child:not(:only-child))::after { content: ""; position: absolute; bottom: 0px; @@ -2027,6 +2132,19 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ #mastodon .notification .status { padding-top: 0; } +#mastodon .notification .status .status__info { + margin-top: 10px !important; +} +#mastodon .notification .status .status__content ~ .media-gallery, +#mastodon .notification .status .status__content ~ [style*="aspect-ratio:"] { + height: 60px; + width: 100px; + margin: 0 !important; + opacity: 0.5; +} +#mastodon .notification .status .status__content ~ [style*="aspect-ratio:"] .video-player__controls { + display: none; +} #mastodon .status__prepend, #mastodon .notification__message { display: flex; @@ -2399,14 +2517,14 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ margin: var(--radius); } #mastodon .hashtag-bar { - margin-top: 8px; + margin-top: 10px; } #mastodon .hashtag-bar a, #mastodon .hashtag-bar button { - font-size: 0.85em; - font-weight: 600; + font-size: 0.9em; padding: 0.2em 0.6em; - opacity: 0.7; + color: inherit; + opacity: 0.9; color: var(--accent, #8c8dff); transition: opacity 0.2s; } @@ -2612,7 +2730,6 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ } .layout-single-column .tabs-bar__wrapper, .layout-single-column .column-back-button--slim .column-back-button { - z-index: 101; grid-column: 2; border: 0 !important; transition: margin 0.2s cubic-bezier(0, 0, 0, 1.1), top 0.4s; @@ -2628,6 +2745,38 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } +.layout-single-column .tabs-bar__wrapper .announcements, +.layout-single-column .column-back-button--slim .column-back-button .announcements, +.layout-single-column .tabs-bar__wrapper .column-header__collapsible:not(.collapsed), +.layout-single-column .column-back-button--slim .column-back-button .column-header__collapsible:not(.collapsed) { + flex-direction: column-reverse; + align-items: flex-start; + border: 0; + animation: slideDowFade 0.3s backwards cubic-bezier(0, 1, 0, 1.2); +} +.layout-single-column .tabs-bar__wrapper .column-header__collapsible, +.layout-single-column .column-back-button--slim .column-back-button .column-header__collapsible { + transition: none; +} +.layout-single-column .tabs-bar__wrapper .collapsed, +.layout-single-column .column-back-button--slim .column-back-button .collapsed { + display: none; +} +.layout-single-column .tabs-bar__wrapper .announcements__container, +.layout-single-column .column-back-button--slim .column-back-button .announcements__container { + width: 100% !important; +} +.layout-single-column .tabs-bar__wrapper .announcements__mastodon, +.layout-single-column .column-back-button--slim .column-back-button .announcements__mastodon { + display: block; + z-index: -1; + position: relative; +} +.layout-single-column .tabs-bar__wrapper .announcements__pagination, +.layout-single-column .column-back-button--slim .column-back-button .announcements__pagination { + bottom: unset; + padding-block: 0; +} @media (min-width: 890px) { .layout-single-column .tabs-bar__wrapper, .layout-single-column .column-back-button--slim .column-back-button { @@ -2679,22 +2828,6 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ font-size: 0.9em; padding-inline: 15px; } - .layout-single-column .tabs-bar__wrapper .column-header__buttons button .icon-with-badge, - .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button .icon-with-badge { - position: absolute; - inset: 0; - display: flex; - align-items: center; - justify-content: center; - } - .layout-single-column .tabs-bar__wrapper .column-header__buttons button .icon-with-badge .icon-with-badge__badge, - .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button .icon-with-badge .icon-with-badge__badge { - right: -2px; - left: unset; - top: unset; - bottom: 0px; - border-radius: var(--radius-round); - } .layout-single-column .tabs-bar__wrapper .column-header__buttons button .column-header__icon, .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button .column-header__icon { margin-inline-end: 0; @@ -2727,32 +2860,6 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button.active::before { inset: -10px -300px; } - .layout-single-column .tabs-bar__wrapper .announcements, - .layout-single-column .column-back-button--slim .column-back-button .announcements, - .layout-single-column .tabs-bar__wrapper .column-header__collapsible:not(.collapsed), - .layout-single-column .column-back-button--slim .column-back-button .column-header__collapsible:not(.collapsed) { - flex-direction: column-reverse; - align-items: flex-start; - border: 0; - animation: slideDowFade 0.3s backwards cubic-bezier(0, 1, 0, 1.2); - } - .layout-single-column .tabs-bar__wrapper .column-header__collapsible, - .layout-single-column .column-back-button--slim .column-back-button .column-header__collapsible { - transition: none; - } - .layout-single-column .tabs-bar__wrapper .collapsed, - .layout-single-column .column-back-button--slim .column-back-button .collapsed { - display: none; - } - .layout-single-column .tabs-bar__wrapper .announcements__container, - .layout-single-column .column-back-button--slim .column-back-button .announcements__container { - width: 100% !important; - } - .layout-single-column .tabs-bar__wrapper .announcements__mastodon, - .layout-single-column .column-back-button--slim .column-back-button .announcements__mastodon { - z-index: -1; - position: relative; - } } @media (min-width: 890px) and (min-width: 1320px) { .layout-single-column .tabs-bar__wrapper, @@ -2855,8 +2962,13 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ padding-top: calc(var(--radius) + 10px); margin-top: calc(50px - var(--radius)); } - #mastodon .navigation-panel .navigation-panel__logo { - display: none; + #mastodon .navigation-panel .navigation-panel__logo .column-link, + #mastodon .navigation-panel .navigation-panel__logo hr { + display: none !important; + } + #mastodon .navigation-panel .switch-to-advanced { + border-radius: var(--radius); + margin-top: 0; } #mastodon .navigation-panel [href="/settings/preferences"] { display: none !important; @@ -2865,6 +2977,20 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ .column-link { border: 0; } +.icon-with-badge__badge { + display: flex !important; + align-items: center; + justify-content: center; + padding: 0 0.3em !important; + width: 2em; + height: 2em; + min-width: max-content; + border-radius: 2em; + font-weight: 600; + font-size: 0.6em !important; + top: -10px; + box-sizing: border-box; +} @media (min-width: 890px) { .column-link { flex-grow: 100 !important; @@ -2883,7 +3009,7 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ } .column-link .column-link__icon, .column-header > button .column-header__icon { - margin-inline-end: 1em !important; + margin-inline-end: 0.7em !important; font-size: 16px !important; } .column-link::before { @@ -3120,7 +3246,7 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ inset-inline: 0 !important; } #mastodon [class*="explore__"] > * { - border-radius: var(--radius) !important; + border-radius: var(--radius); } #mastodon .detailed-status__wrapper { margin: 0 !important; @@ -3152,57 +3278,35 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ border-inline: 0; } .ui__header { - z-index: 101; border-bottom: 0; box-sizing: content-box; - flex-wrap: wrap; min-height: 55px; height: auto; position: relative; - padding-block: 10px; box-sizing: border-box; gap: 10px; border: 0 !important; overflow: visible; } - .ui__header::after { - content: ""; - position: absolute; - inset-inline-end: 54px; - top: 100%; - width: var(--radius); - height: var(--radius); - background: inherit; - mask: radial-gradient(var(--radius) at 0px var(--radius), rgba(0,0,0,0) 100%, #000); - -webkit-mask: radial-gradient(var(--radius) at 0px var(--radius), rgba(0,0,0,0) 100%, #000); - z-index: 9999; - } - .rtl .ui__header::after { - transform: scaleX(-1); - } .ui__header .ui__header__logo { padding-block: 5px !important; } .ui__header .ui__header__links { + min-width: max-content; + position: sticky; + right: 0; background: inherit; } .ui__header [href="/search"] { - margin-inline-end: 55px; - } - .ui__header [href^="/@"], - .ui__header a.permalink[href] { - position: fixed; - inset-inline-end: 1px; - width: 53px; - display: flex; - justify-content: center; - background: inherit; + margin-inline-end: 5px; } .ui__header [href="/publish"] { position: fixed; bottom: 15px; + bottom: 70px; inset-inline-end: 15px; border-radius: 100px !important; + border-radius: var(--radius) !important; height: 60px; width: 60px; font-size: 0; @@ -3213,7 +3317,12 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ -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 0.2s cubic-bezier(0, 0, 0, 1.1); + visibility: visible; } .ui__header [href="/publish"]::before { content: ""; @@ -3224,41 +3333,52 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ justify-content: center; align-items: center; font-size: 24px; + background: transparent; + border-radius: inherit; + transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important; } .ui__header [href="/publish"]:active { - animation: rainbow 4s infinite linear !important; + animation: rainbow 8s infinite linear !important; + } + .ui__header [href="/publish"]:active::before { + background: #ee82ee; + transform: scale(0.9); + transition: background 1s, transform 0.4s cubic-bezier(0, 0.5, 0, 1) !important; + } + body:not(:has(.column-link.active)) .ui__header [href="/publish"]:not(:focus) { + transform: scale(0.97) !important; + opacity: 0 !important; + pointer-events: none; } #mastodon .tabs-bar__wrapper { top: 0; background: none; + z-index: 200; } #mastodon .column-back-button.column-back-button { border-radius: 0 !important; } - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels { + #mastodon .columns-area__panels { flex-direction: column; } - #mastodon:has(.navigation-panel__sign-in-banner) .ui__header::after { - content: unset; - } - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__main { + #mastodon .columns-area__panels__main { width: 100%; border-radius: 0 !important; margin: 0 !important; border: 0 !important; } - #mastodon:has(.navigation-panel__sign-in-banner) .tabs-bar__wrapper { + #mastodon .tabs-bar__wrapper { transition: none !important; } - #mastodon:has(.navigation-panel__sign-in-banner):has(.column-header__buttons:empty) .tabs-bar__wrapper { + #mastodon:has(.column-header__buttons:empty) .tabs-bar__wrapper { margin-top: -50px; margin-bottom: 2px; height: 48px; } - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational { + #mastodon .columns-area__panels__pane--navigational { display: contents; } - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { + #mastodon .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { position: relative !important; inset: unset !important; order: -1; @@ -3266,101 +3386,357 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ height: auto; white-space: nowrap; } - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel { + #mastodon .columns-area__panels__pane--navigational .navigation-panel { flex-direction: row; margin: 0; padding: 0; - height: auto; - padding: 12px 14px; + padding: 0 8px; + height: 5em; gap: 10px; border-block: 1px solid; overflow: scroll hidden; + align-items: center; } - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel::-webkit-scrollbar { + #mastodon .columns-area__panels__pane--navigational .navigation-panel::-webkit-scrollbar { display: none; } - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational hr { + #mastodon .columns-area__panels__pane--navigational hr { display: none; } - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__name > span, - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__sparkline { + #mastodon .columns-area__panels__pane--navigational .trends__item__name > span, + #mastodon .columns-area__panels__pane--navigational .trends__item__sparkline { display: none; } - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel__legal, - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4, - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .getting-started__trends, - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item, - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__name { + #mastodon .columns-area__panels__pane--navigational .navigation-panel__legal, + #mastodon .columns-area__panels__pane--navigational h4, + #mastodon .columns-area__panels__pane--navigational .trends__item, + #mastodon .columns-area__panels__pane--navigational .trends__item__name { all: unset; display: contents !important; } - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel__legal::before, - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4::before, - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .getting-started__trends::before, - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item::before, - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__name::before, - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel__legal::after, - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4::after, - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .getting-started__trends::after, - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item::after, - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__name::after { + #mastodon .columns-area__panels__pane--navigational .navigation-panel__legal::before, + #mastodon .columns-area__panels__pane--navigational h4::before, + #mastodon .columns-area__panels__pane--navigational .trends__item::before, + #mastodon .columns-area__panels__pane--navigational .trends__item__name::before, + #mastodon .columns-area__panels__pane--navigational .navigation-panel__legal::after, + #mastodon .columns-area__panels__pane--navigational h4::after, + #mastodon .columns-area__panels__pane--navigational .trends__item::after, + #mastodon .columns-area__panels__pane--navigational .trends__item__name::after { content: unset; } - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational:has(.getting-started__trends) .flex-spacer { - border-right: 1px solid; - margin-block: 10px; + #mastodon .columns-area__panels__pane--navigational h4 a span::after { + content: ":" !important; } - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational:has(.getting-started__trends) .navigation-panel::after { + #mastodon .columns-area__panels__pane--navigational:has(.getting-started__trends):has(.navigation-panel__sign-in-banner) .flex-spacer { + border-right: 1px solid var(--border-color); + height: 50%; + margin: 10px; + } + #mastodon .columns-area__panels__pane--navigational:has(.getting-started__trends):has(.navigation-panel__sign-in-banner) .getting-started__trends { + all: unset; + display: contents !important; + } + #mastodon .columns-area__panels__pane--navigational:has(.getting-started__trends) .trends__item:last-child a { + position: relative; + z-index: 3; + } + #mastodon .columns-area__panels__pane--navigational a, + #mastodon .columns-area__panels__pane--navigational h4 > span { + position: relative; + overflow: hidden; + border-radius: var(--radius); + padding: 0.8em 1em; + font-weight: 600; + font-size: 1.1em; + text-align: center; + min-width: max-content; + transition: padding 0.2s; + } + #mastodon .columns-area__panels__pane--navigational a::before, + #mastodon .columns-area__panels__pane--navigational h4 > span::before { content: ""; + position: absolute; + inset: 0; + background: currentcolor; + opacity: 0; + border-radius: inherit; + transition: inset 0.4s cubic-bezier(0, 0, 0, 1.2), opacity 0.2s; + } + #mastodon .columns-area__panels__pane--navigational a i, + #mastodon .columns-area__panels__pane--navigational h4 > span i { + font-size: 1em; + width: auto; + margin-right: 0; + } + #mastodon .columns-area__panels__pane--navigational a.active, + #mastodon .columns-area__panels__pane--navigational h4 > span.active { + padding-inline: 1.2em; + position: relative; + } + #mastodon .columns-area__panels__pane--navigational a.active::before, + #mastodon .columns-area__panels__pane--navigational h4 > span.active::before { + inset: 0 !important; + opacity: 0.1; + } + #mastodon .columns-area__panels__pane--navigational a > span:not(:first-child), + #mastodon .columns-area__panels__pane--navigational h4 > span > span:not(:first-child) { + margin-left: 0.7em; + } + #mastodon .columns-area__panels__pane--navigational span { + display: unset; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .columns-area__panels__main { + margin-top: 2px !important; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header { + z-index: 200; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header::before, + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header::after { + content: ""; + position: fixed; + bottom: 0; + inset-inline: 0; + background: inherit; + z-index: 200; + height: 60px; + filter: brightness(1.2); + visibility: visible; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .navigation-panel { + padding-inline: 14px; + border-top: none; + margin-top: -10px; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .navigation-panel a { + font-size: 1em; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .navigation-panel::after { + content: ""; + display: block; position: sticky; right: -20px; min-width: 150px; + height: 100%; margin-left: -50px; background: inherit; mask: linear-gradient(to right, transparent, #000); -webkit-mask: linear-gradient(to right, transparent, #000); pointer-events: none; } - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational:has(.getting-started__trends) .trends__item:last-child a { - position: relative; - z-index: 3; + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column { + min-height: 100vh; } - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a, - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4 > span { - position: relative; - overflow: hidden; - border-radius: var(--radius); - padding: 0.8em 1.2em; + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link { + margin-inline: -0.2em; + padding-inline: 0.7em; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] { + position: fixed !important; + display: flex; + flex-direction: column; + bottom: 4px; + z-index: 200; + font-size: 1.7em; + margin: 0 !important; + padding: 0 !important; + height: 50px; + align-items: center; + justify-content: center; + width: 19%; + left: 0%; + transform: translateX(10%); + box-sizing: border-box; + padding: 1px !important; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home']::before { + inset-inline: 6px; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] span { + margin: 0; + font-size: 0; + line-height: 1; + opacity: 0; + transition: font-size 0.4s, margin 0.7s, opacity 0.2s; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] i { + transform: scale(0.9); + transition: transform 0.1s; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] { + position: fixed !important; + display: flex; + flex-direction: column; + bottom: 4px; + z-index: 200; + font-size: 1.7em; + margin: 0 !important; + padding: 0 !important; + height: 50px; + align-items: center; + justify-content: center; + width: 19%; + left: 19.25%; + transform: translateX(10%); + box-sizing: border-box; + padding: 1px !important; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications']::before { + inset-inline: 6px; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] span { + margin: 0; + font-size: 0; + line-height: 1; + opacity: 0; + transition: font-size 0.4s, margin 0.7s, opacity 0.2s; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] i { + transform: scale(0.9); + transition: transform 0.1s; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] { + position: fixed !important; + display: flex; + flex-direction: column; + bottom: 4px; + z-index: 200; + font-size: 1.7em; + margin: 0 !important; + padding: 0 !important; + height: 50px; + align-items: center; + justify-content: center; + width: 19%; + left: 38.5%; + transform: translateX(10%); + box-sizing: border-box; + padding: 1px !important; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore']::before { + inset-inline: 6px; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] span { + margin: 0; + font-size: 0; + line-height: 1; + opacity: 0; + transition: font-size 0.4s, margin 0.7s, opacity 0.2s; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] i { + transform: scale(0.9); + transition: transform 0.1s; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] { + position: fixed !important; + display: flex; + flex-direction: column; + bottom: 4px; + z-index: 200; + font-size: 1.7em; + margin: 0 !important; + padding: 0 !important; + height: 50px; + align-items: center; + justify-content: center; + width: 19%; + left: 57.75%; + transform: translateX(10%); + box-sizing: border-box; + padding: 1px !important; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local']::before { + inset-inline: 6px; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] span { + margin: 0; + font-size: 0; + line-height: 1; + opacity: 0; + transition: font-size 0.4s, margin 0.7s, opacity 0.2s; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] i { + transform: scale(0.9); + transition: transform 0.1s; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] { + position: fixed !important; + display: flex; + flex-direction: column; + bottom: 4px; + z-index: 200; + font-size: 1.7em; + margin: 0 !important; + padding: 0 !important; + height: 50px; + align-items: center; + justify-content: center; + width: 19%; + left: 77%; + transform: translateX(10%); + box-sizing: border-box; + padding: 1px !important; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists']::before { + inset-inline: 6px; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] span { + margin: 0; + font-size: 0; + line-height: 1; + opacity: 0; + transition: font-size 0.4s, margin 0.7s, opacity 0.2s; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] i { + transform: scale(0.9); + transition: transform 0.1s; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .columns-area__panels__pane__inner { + position: sticky !important; + top: 10px !important; + z-index: 200; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper { + position: static; + height: auto; + z-index: unset; + margin: 0; + top: 0; + inset-inline: 0; + visibility: hidden; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper #tabs-bar__portal, + #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper .column-header__wrapper, + #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper .column-header { + height: 100%; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper .column-header__buttons { + visibility: visible; + height: auto; + width: 100%; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper .column-header__buttons button { + height: 50px; + width: 100% !important; + text-align: left; + transform: none; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper .column-header__buttons button::after { + content: attr(title); + margin-left: 1em; font-weight: 600; - font-size: 1.1em; - text-align: center; - min-width: max-content; + font-size: 0.9em; } - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a i, - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4 > span i { - font-size: 1em; - width: auto; - margin-right: 0; + #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper .column-header__back-button, + #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper .column-header > button { + display: none; } - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a.active, - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4 > span.active { - padding-inline: 1.2em; - position: relative; + #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper .column-header__collapsible { + visibility: visible; } - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a.active::before, - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4 > span.active::before { - content: ""; - position: absolute; - inset: 0; - background: currentcolor; - opacity: 0.1; - } - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a > span:not(:first-child), - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4 > span > span:not(:first-child) { - margin-left: 0.7em; - } - #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational span { - display: unset; + #mastodon .explore__search-header, + #mastodon .search input { + background: var(--elevated-color); } #mastodon .columns-area__panels { justify-content: flex-start; @@ -3372,7 +3748,6 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ max-width: unset; border-start-end-radius: var(--radius); overflow: clip !important; - margin-top: 1px !important; flex-grow: 1; } #mastodon .columns-area__panels__main > .columns-area--mobile { @@ -3429,9 +3804,6 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ margin-inline-start: 1px; padding-bottom: 90px; } - #mastodon .notification__filter-bar + .scrollable { - border-radius: var(--radius) var(--radius) 0 0 !important; - } #mastodon .columns-area { padding-bottom: 0 !important; overflow: hidden !important; @@ -3444,6 +3816,13 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ flex-grow: 1; overflow: visible !important; } + #mastodon .compose-form::before { + content: ""; + position: absolute; + inset: 0; + background: var(--elevated-color); + z-index: -1; + } #mastodon .about.about.about { padding-inline: 10px !important; } @@ -3543,7 +3922,7 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ } .admin-wrapper form > h4 { margin-top: 2em !important; - border-bottom: 0; + border-bottom: 0 !important; margin-bottom: 0 !important; } .admin-wrapper .flash-message, @@ -3566,7 +3945,7 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ .admin-wrapper .fields-row { margin-bottom: 1em !important; } -.admin-wrapper .fields-row__column { +.admin-wrapper .fields-row > .fields-row__column { max-width: unset; width: 300px; border-radius: 0 !important; @@ -3575,27 +3954,27 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ flex-grow: 1; margin: 0 !important; } -.admin-wrapper .fields-row__column .fields-group { +.admin-wrapper .fields-row > .fields-row__column .fields-group { border-radius: 0 !important; margin: 0 !important; } -.admin-wrapper .fields-row__column .fields-group > .with_block_label { +.admin-wrapper .fields-row > .fields-row__column .fields-group > .with_block_label { display: flex; flex-direction: column; height: 100%; } -.admin-wrapper .fields-row__column .fields-group > .with_block_label > .label_input { +.admin-wrapper .fields-row > .fields-row__column .fields-group > .with_block_label > .label_input { flex-grow: 1; } -.admin-wrapper .fields-row__column .fields-group > .with_block_label > .label_input > textarea { +.admin-wrapper .fields-row > .fields-row__column .fields-group > .with_block_label > .label_input > textarea { min-height: 100%; } -.admin-wrapper .fields-row__column > :last-child { +.admin-wrapper .fields-row > .fields-row__column > :last-child { flex-grow: 1; align-items: flex-start; border: 0; } -.admin-wrapper .fields-row__column > :not(:first-child):not(:last-child) { +.admin-wrapper .fields-row > .fields-row__column > :not(:first-child):not(:last-child) { padding-block: 0.5em !important; margin-block: -3px; } @@ -4129,7 +4508,7 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ inset-inline: 0 !important; } .layout-multiple-columns #mastodon .columns-area [class*="explore__"] > * { - border-radius: var(--radius) !important; + border-radius: var(--radius); } .layout-multiple-columns #mastodon .columns-area .detailed-status__wrapper { margin: 0 !important; @@ -4154,6 +4533,9 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ .layout-multiple-columns #mastodon .columns-area .picture-in-picture__footer { flex-wrap: wrap; } +.layout-multiple-columns #mastodon .columns-area .follow_requests-unlocked_explanation { + margin: 0 !important; +} .layout-multiple-columns #mastodon .columns-area .column-header, .layout-multiple-columns #mastodon .columns-area .scrollable, .layout-multiple-columns #mastodon .columns-area .column-back-button, diff --git a/modern.user.css b/modern.user.css index 6782888..e377b77 100644 --- a/modern.user.css +++ b/modern.user.css @@ -13,13 +13,20 @@ //////////////////////////////////////////////////////////////////// -/* Update 1.7.1 -- fix hashtags bar (probably should've expected it would've been changed) +/* Update 1.8.0 +- Mobile: Change the sidebar into a bottom bar! +- Styled unread count indicator +- Styled new search page +- Minimized media in notifications +- Fixed open in advanced interface notice not showing +- Fixed overlapping nav buttons in announcements +- Margins & other fixes, tweaks +- Glitch-soc: Fixed notes */ /* ==UserStyle== @name Mastodon Modern -@version 1.7.1 +@version 1.8.0 @description Drastically improves the look & feel of Mastodon @updateURL https://codeberg.org/Freeplay/Mastodon-Modern/raw/branch/main/modern.user.css @homepageURL https://codeberg.org/Freeplay/Mastodon-Modern @@ -107,7 +114,7 @@ } [class*="explore__"] { > * { - border-radius var(--radius) !important + border-radius var(--radius) } } .detailed-status__wrapper { @@ -131,6 +138,8 @@ .status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer { flex-wrap wrap } + + {block} } .rtl { @@ -182,7 +191,7 @@ .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 { - transition transform .4s cubic-bezier(0,0,0,3), background .2s !important + transition transform .4s cubic-bezier(0,0,0,3), background .2s, opacity .2s !important &:active, &:focus-visible { transform scale(.99) transition transform .4s cubic-bezier(0,0,0,1) !important @@ -340,6 +349,7 @@ } #mastodon { + overflow clip // fix weird overflow in some smaller windows, ex iphone se 2nd gen // LEFT COLUMN .compose-panel { @@ -537,13 +547,6 @@ @media (min-width responsiveW2) { width 0 flex-grow 1 - .column, .columns-area { - overflow visible !important - border-radius var(--radius) var(--radius) 0 0 !important - > :first-child { - border-radius var(--radius) var(--radius) 0 0 !important - } - } } @media (min-width responsiveW1) { max-width var(--tl-width) !important @@ -554,34 +557,24 @@ @media (min-width mobileW) { display grid grid-template-columns 100% + .column, .columns-area { + overflow clip !important + border-radius var(--radius) var(--radius) 0 0 !important + > :first-child { + border-radius var(--radius) var(--radius) 0 0 !important + } + } } overflow visible !important transition max-width transBounce1, margin transBounce1 > div { - border-radius var(--radius) var(--radius) 0 0 grid-row 1 - &:last-child { - box-shadow var(--shadow-med) - } } :not(.scrollable--flex) > .scrollable { padding-bottom 40vh !important } - .column-actions { - position static - .column-actions__background { - border-bottom-left-radius var(--radius) - } - } - } - .scrollable { - border-radius var(--radius) var(--radius) 0 0 !important - border 0 - &:first-child { - overflow clip - } } .column-header__wrapper ~ .scrollable { overflow auto !important @@ -597,29 +590,38 @@ margin-top 0 !important } } - .columns-area { - box-sizing border-box - padding-bottom 0 - height 100% !important + .search-results__section__header { + margin 0px -10px 10px + color unset + background none + padding-inline 20px + font-weight 600 } - .explore__search-results { - padding 10px + .search-results__section { + border 0 + margin-bottom 20px } .dismissable-banner, .follow_requests-unlocked_explanation { - border-inline 0 - border-top 0 - margin -10px - margin-bottom 10px - border-radius 0 - padding 15px + display flex + align-items center + border 0 !important + margin -10px !important + margin-bottom 10px !important + border-radius 0px !important + padding 15px !important isolation isolate overflow hidden /.dismissable-banner__message { padding-block 10px - padding-inline-end 30px + order -1 } - /.dismissable-banner__action { - margin 10px + .dismissable-banner__action { + position static + } + +compactStatuses() { + @media (max-width mobileW) { + margin 0 !important + } } } .column:not(.scrollable--flex) > .dismissable-banner { @@ -630,7 +632,8 @@ } } .scrollable > .dismissable-banner { - margin 0 !important + margin 0px !important + margin-bottom 0 !important } .empty-column-indicator { @@ -647,7 +650,7 @@ } } - + // ACCOUNT PAGE .scrollable--flex .account-timeline__header { margin 0 !important @@ -704,6 +707,9 @@ .account__header__bar { border 0 padding 0 20px + @media (max-width mobileW) { + padding-inline 15px + } /body:not(.flavour-glitch) & { background inherit !important } @@ -774,6 +780,12 @@ gap 0 .4em } } + .account__header__badges { + margin-top 10px + span { + font-weight 600 + } + } .account__header__bio { padding 0 margin 0 @@ -886,7 +898,6 @@ border-radius 8px font-size 12px width unset - background none label { z-index 2 padding 0 !important @@ -937,7 +948,7 @@ } } } - .account__section-headline { + .account__section-headline:not(:first-child):not(:nth-child(2)) { background none position relative z-index 2 @@ -964,14 +975,6 @@ } } } - .notification__filter-bar { - border 0 !important - margin-bottom calc(0px - var(--radius)) - padding-bottom var(--radius) - & + .scrollable { - overflow clip - } - } // Gallery .account-gallery__container { @@ -1067,7 +1070,7 @@ &:not(.status__wrapper) { border-radius var(--radius) border 0 - &::after { + &:not(:last-child:not(:only-child))::after { content "" position absolute bottom 0px @@ -1303,6 +1306,19 @@ inset -10px border-radius var(--radius) } +/* .account__contents { + flex-grow 1 + } + .display-name { + display contents + bdi { + display block + } + } + .account__details { + display inline-flex + margin-left 1em + } */ } // Fix dropdown note preview @@ -1331,6 +1347,21 @@ } .notification .status { padding-top 0 + .status__info { + margin-top 10px !important + } + .status__content ~ .media-gallery, + .status__content ~ [style*="aspect-ratio:"] { + height 60px + width 100px + margin 0 !important + opacity .5 + } + .status__content ~ [style*="aspect-ratio:"] { + .video-player__controls { + display none + } + } } .status__prepend, .notification__message { display flex @@ -1701,12 +1732,13 @@ } } .hashtag-bar { - margin-top 8px + margin-top 10px a, button { - font-size .85em - font-weight 600 + font-size .9em + // font-weight 600 padding .2em .6em - opacity .7 + color inherit + opacity .9 color var(--accent, #8c8dff) transition opacity .2s } @@ -1863,7 +1895,6 @@ // RIGHT COLUMN /.layout-single-column { .tabs-bar__wrapper, .column-back-button--slim .column-back-button { - z-index 101 grid-column 2 border 0 !important /#mastodon .column-header, /#mastodon .column-inline-form { @@ -1875,6 +1906,30 @@ border-top-right-radius 0 !important } } + .announcements, .column-header__collapsible:not(.collapsed) { + flex-direction column-reverse + align-items flex-start + border 0 + animation slideDowFade .3s backwards cubic-bezier(0,1,0,1.2) + } + .column-header__collapsible { + transition none + } + .collapsed { + display none + } + .announcements__container { + width 100% !important + } + .announcements__mastodon { + display block + z-index -1 + position relative + } + .announcements__pagination { + bottom unset + padding-block 0 + } @media (min-width mobileW) { // position absolute width 285px @@ -1937,20 +1992,6 @@ margin-inline-start 0 font-size .9em padding-inline 15px - .icon-with-badge { - position absolute - inset 0 - display flex - align-items center - justify-content center - .icon-with-badge__badge { - right -2px - left unset - top unset - bottom 0px - border-radius var(--radius-round) - } - } .column-header__icon { margin-inline-end 0 } @@ -1986,32 +2027,6 @@ } } } - - - - .announcements, .column-header__collapsible:not(.collapsed) { - flex-direction column-reverse - align-items flex-start - border 0 - animation slideDowFade .3s backwards cubic-bezier(0,1,0,1.2) - } - .column-header__collapsible { - transition none - } - .collapsed { - display none - } - .announcements__container { - width 100% !important - .react-swipeable-view-container { - // height unset !important - } - } - .announcements__mastodon { - z-index -1 - position relative - } - } transition margin transBounce1, top .4s } @@ -2108,7 +2123,13 @@ padding-top calc(var(--radius) + 10px) margin-top calc(50px - var(--radius)) .navigation-panel__logo { - display none + .column-link, hr { + display none !important + } + } + .switch-to-advanced { + border-radius var(--radius) + margin-top 0 } [href="/settings/preferences"] { display none !important @@ -2117,6 +2138,20 @@ /.column-link { border 0 } + /.icon-with-badge__badge { + display flex !important + align-items center + justify-content center + padding 0 .3em !important + width 2em + height 2em + min-width max-content + border-radius 2em + font-weight 600 + font-size .6em !important + top -10px + box-sizing border-box + } @media (min-width mobileW) { /.column-link { flex-grow 100 !important @@ -2133,7 +2168,7 @@ overflow hidden background none !important .column-link__icon, /.column-header > button .column-header__icon { - margin-inline-end 1em !important + margin-inline-end .7em !important font-size 16px !important } &::before { @@ -2374,58 +2409,35 @@ border-inline 0 } /.ui__header { - z-index 101 border-bottom 0 box-sizing content-box - flex-wrap wrap min-height 55px height auto position relative - padding-block 10px box-sizing border-box gap 10px border 0 !important overflow visible - &::after { - content "" - position absolute - inset-inline-end 54px - top 100% - width var(--radius) - height var(--radius) - background inherit - mask radial-gradient(var(--radius) at 0px var(--radius),#0000 100%,#000) - -webkit-mask @mask - z-index 9999 - - /.rtl & { - transform scaleX(-1) - } - } .ui__header__logo { padding-block 5px !important } .ui__header__links { + min-width max-content + position sticky + right 0 background inherit } [href="/search"] { - margin-inline-end 55px + margin-inline-end 5px } - [href^="/@"], a.permalink[href] { - position fixed - inset-inline-end 1px - width 53px - display flex - justify-content center - background inherit - } - [href="/publish"] { position fixed bottom 15px + bottom 70px inset-inline-end 15px // margin-inline -60px border-radius 100px !important + border-radius var(--radius) !important height 60px width 60px font-size 0 @@ -2436,7 +2448,12 @@ -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 "" fa() @@ -2446,138 +2463,315 @@ justify-content center align-items center font-size 24px + background transparent + border-radius inherit + transition transform .4s cubic-bezier(0,0,0,1) !important } &:active { - animation rainbow 4s infinite linear !important + animation rainbow 8s infinite linear !important + &::before { + background violet + transform scale(.9) + transition background 1s, transform .4s cubic-bezier(0,0.5,0,1) !important + } + } + /body:not(:has(.column-link.active)) &:not(:focus) { + transform scale(0.97) !important + opacity 0 !important + pointer-events none } } } .tabs-bar__wrapper { top 0 background none + z-index 200 } .column-back-button.column-back-button { border-radius 0 !important } - // logged out view - &:has(.navigation-panel__sign-in-banner) { - .columns-area__panels { - flex-direction column - } - .ui__header::after { - content unset - } - .columns-area__panels__main { - width 100% - border-radius 0 !important - margin 0 !important - border 0 !important - } + // Navigation + .columns-area__panels { + flex-direction column + } + .columns-area__panels__main { + width 100% + border-radius 0 !important + margin 0 !important + border 0 !important + } + .tabs-bar__wrapper { + transition none !important + } + &:has(.column-header__buttons:empty) { .tabs-bar__wrapper { - transition none !important + margin-top -50px + margin-bottom 2px + height 48px } - &:has(.column-header__buttons:empty) { - .tabs-bar__wrapper { - margin-top -50px - margin-bottom 2px - height 48px - } + } + .columns-area__panels__pane--navigational { + display contents + .columns-area__panels__pane__inner { + position relative !important + inset unset !important + order -1 + width unset + height auto + white-space nowrap } - .columns-area__panels__pane--navigational { - display contents - .columns-area__panels__pane__inner { - position relative !important - inset unset !important - order -1 - width unset - height auto - white-space nowrap - } - .navigation-panel { - flex-direction row - margin 0 - padding 0 - height auto - padding 12px 14px - gap 10px - border-block 1px solid - overflow scroll hidden - &::-webkit-scrollbar { - display none - } - } - hr { + .navigation-panel { + flex-direction row + margin 0 + padding 0 + padding 0 8px + height 5em + gap 10px + border-block 1px solid + overflow scroll hidden + align-items center + &::-webkit-scrollbar { display none } - .trends__item__name > span, .trends__item__sparkline { - display none + } + hr { + display none + } + .trends__item__name > span, .trends__item__sparkline { + display none + } + .navigation-panel__legal, h4, + .trends__item, .trends__item__name { + all unset + display contents !important + &::before, &::after { + content unset } - .navigation-panel__legal, h4, - .getting-started__trends, .trends__item, .trends__item__name { - all unset - display contents !important - &::before, &::after { - content unset - } - } - &:has(.getting-started__trends) { + } + h4 a span::after { + content ":" !important + } + &:has(.getting-started__trends) { + &:has(.navigation-panel__sign-in-banner) { .flex-spacer { - border-right 1px solid - margin-block 10px + border-right 1px solid var(--border-color) + height 50% + margin 10px } - .navigation-panel::after { - content "" - position sticky - right -20px - min-width 150px - margin-left -50px - background inherit - mask linear-gradient(to right, transparent, black) - -webkit-mask @mask - pointer-events none - } - .trends__item:last-child a { - position relative - z-index 3 + .getting-started__trends { + all unset + display contents !important } } - a, h4 > span { - // background var(--elevated-color) + .trends__item:last-child a { position relative - overflow hidden - border-radius var(--radius) - padding .8em 1.2em - font-weight 600 - font-size 1.1em - text-align center - min-width max-content - i { - font-size 1em - width auto - margin-right 0 - } - &.active { - padding-inline 1.2em - position relative - &::before { - content "" - position absolute - inset 0 - background currentcolor - opacity .1 - } - } - > span:not(:first-child) { - margin-left .7em + z-index 3 + } + } + a, h4 > span { + // background var(--elevated-color) + position relative + overflow hidden + border-radius var(--radius) + padding .8em 1em + font-weight 600 + font-size 1.1em + text-align center + min-width max-content + transition padding .2s + &::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 + } + i { + font-size 1em + width auto + margin-right 0 + } + &.active { + padding-inline 1.2em + position relative + &::before { + inset 0 !important + opacity .1 } } - span { - display unset + > span:not(:first-child) { + margin-left .7em + } + } + span { + display unset + } + } + + + // bottom bar + + &:not(:has(.navigation-panel__sign-in-banner)) { + .columns-area__panels__main { + margin-top 2px !important + } + .ui__header { + // position static !important + // visibility collapse + z-index 200 + &::before, &::after { + content "" + position fixed + bottom 0 + inset-inline 0 + background inherit + z-index 200 + height 60px + // border-top 1px solid var(--border-color) + filter brightness(1.2) + visibility visible + // opacity .9 + } +/* @supports (backdrop-filter: blur(0px)) { + &::after { + filter none + opacity 1 + background none + backdrop-filter blur(10px) + } + } */ + } + .navigation-panel { + padding-inline 14px + border-top none + margin-top -10px + a { + font-size 1em + } + &::after { + content "" + display block + position sticky + right -20px + min-width 150px + height 100% + margin-left -50px + background inherit + // mask linear-gradient(to right, transparent, black), linear-gradient(to right, transparent, black) + mask linear-gradient(to right, transparent, black) + -webkit-mask @mask + pointer-events none + } + } + .column { + min-height 100vh + } + .column-link { + margin-inline -.2em + padding-inline .7em + } + + bottomBarButtons = "'/home'" "'/notifications'" "'/explore'" "'/public/local'" "'/lists'" + for row, i in bottomBarButtons { + .column-link[href={row}] { + position fixed !important + display flex + flex-direction column + bottom 4px + z-index 200 + font-size 1.7em + margin 0 !important + padding 0 !important + height 50px + align-items center + justify-content center + width 19% + left (20% * i) - (.75% * i) + transform translateX(10%) + 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 + } + i { + transform scale(.9) + transition transform .1s + } } } + + // Hide header since it's already highlighted in top navbar + bottomBarNotSelector() { + n = "" + for i in arguments { + n += ( ":not([href=" + i + "])" ) + } + return n + } + &:has(.column-link.active{bottomBarNotSelector(bottomBarButtons)}:not([href^="/lists"])) { + .columns-area__panels__pane__inner { + position sticky !important + top 10px !important + z-index 200 + } + .tabs-bar__wrapper { + // position sticky + position static + height auto + z-index unset + margin 0 + + top 0 + inset-inline 0 + visibility hidden + #tabs-bar__portal, .column-header__wrapper, .column-header { + height 100% + } + .column-header__buttons { + visibility visible + height auto + width 100% + button { + height 50px + width 100% !important + text-align left + transform none + &::after { + content attr(title) + margin-left 1em + font-weight 600 + font-size .9em + } + } + } + .column-header__back-button, + .column-header > button { + display none + } + .column-header__collapsible { + visibility visible + } + } + } + } + + + .explore__search-header, .search input { + background var(--elevated-color) + } + .columns-area__panels { // overflow-x scroll !important justify-content flex-start @@ -2589,9 +2783,7 @@ max-width unset border-start-end-radius var(--radius) overflow clip !important - margin-top 1px !important flex-grow 1 - // z-index 2 // order 2 > .columns-area--mobile { overflow visible !important @@ -2653,13 +2845,6 @@ padding-bottom 90px } - - - - .notification__filter-bar + .scrollable { - border-radius var(--radius) var(--radius) 0 0 !important - } - .columns-area { padding-bottom 0 !important overflow hidden !important @@ -2673,6 +2858,72 @@ overflow visible !important } + + // Compose + .compose-form { + &::before { + content "" + position absolute + inset 0 + background var(--elevated-color) + z-index -1 + } + } +/* .compose-form { + &::before { + content "" + position absolute + inset 0 + background var(--elevated-color) + z-index -1 + } + padding 0 + .reply-indicator { + margin-inline 16px + padding 15px + } + textarea, .spoiler-input__input + .compose-form__modifiers, + .compose-form__buttons-wrapper, + .compose-form__publish { + background none + color unset + height auto + border-radius 0 !important + padding-inline 16px + border-bottom 1px solid var(--border-color) + } + textarea { + padding-inline-end 50px + } + .compose-form__modifiers { + padding-inline 10px + } + .spoiler-input { + padding-top 5px !important + } + .spoiler-input__input { + font-weight 600 + } + .emoji-picker-dropdown { + inset-inline-end 20px + } + .compose-form__buttons-wrapper { + margin-inline -10px 0 + } + .compose-form__publish { + border 0 + } + .inverted, button { + padding 10px + } + .inverted, button { + &:not(.active) { + color inherit !important + } + } + } */ + // ABOUT PAGE .about.about.about { padding-inline 10px !important @@ -2791,7 +3042,7 @@ form > h4 { margin-top 2em !important - border-bottom 0 + border-bottom 0 !important margin-bottom 0 !important } .flash-message, @@ -2813,7 +3064,7 @@ .fields-group:not(.fields-row__column), .fields-row { margin-bottom 1em !important } - .fields-row__column { + .fields-row > .fields-row__column { max-width unset width 300px // height max-content @@ -3031,6 +3282,9 @@ padding 0 compactStatuses() + .follow_requests-unlocked_explanation { + margin 0 !important + } .column-header, .scrollable, .column-back-button, .account__header__image { border-radius 0 !important @@ -3315,6 +3569,27 @@ padding 6px } + // Profile page + // notes + .account__header__account-note { + margin-block 10px 0 + &:focus-within { + border-radius var(--radius) !important + } + } + .account__header__account-note__header { + align-items center + button { + display flex + gap .2em + } + } + .account__header__account-note__content { + width 100% + padding 0 !important + margin 0 !important + } + // Explore page .account-card .media-modal__close { left 10px