From 63fa541db560ce3dc80efceca319892af3c70ebf Mon Sep 17 00:00:00 2001 From: Freeplay Date: Sun, 24 Mar 2024 15:56:42 -0400 Subject: [PATCH] 1.10.4 - Fixes for Mastodon's new design (Masto 4.3.0) --- modern.css | 661 ++++++++++++++++++++---------------------------- modern.user.css | 332 ++++++++++++------------ 2 files changed, 446 insertions(+), 547 deletions(-) diff --git a/modern.css b/modern.css index d2a5f4a..252165a 100644 --- a/modern.css +++ b/modern.css @@ -4,12 +4,20 @@ --radius-round: 24px; --hover-color: rgba(170,170,170,0.07); --elevated-color: rgba(150,150,200,0.1); + --elevated-tint: rgba(200,200,240,0.07); --border-color: rgba(120,120,200,0.2); --border-color-2: #787878; --shadow: 0 10px 40px -10px rgba(0,0,0,0.15); --shadow-low: 0 8px 16px -10px rgba(0,0,0,0.4); --shadow-med: 0 8px 60px -30px rgba(0,0,0,0.1); } +body::before { + content: ""; + position: fixed; + inset: 0; + background: rgba(0,0,0,0.06); + z-index: -1; +} :not(body):not(.scrollable)::-webkit-scrollbar { width: 6px; margin-block: 10px; @@ -50,7 +58,7 @@ select, textarea, .compose-form__upload-thumbnail, .button, -button:not(.column-header__button), +:not(.notification__filter-bar) > button:not(.column-header__button), video, .privacy-dropdown__dropdown, .react-toggle-track, @@ -413,6 +421,7 @@ a:focus-visible, .search__input { border: 0 !important; } +.account__section-headline, .notification__filter-bar, .column-header { border-inline: 0; @@ -795,6 +804,19 @@ a:focus-visible, .columns-area__panels__main :not(.scrollable--flex) > .scrollable { padding-bottom: 40vh !important; } +#mastodon .column { + background: var(--background-color); +} +#mastodon .column::before { + content: ""; + position: absolute; + inset: 0; + background: var(--elevated-tint); + pointer-events: none; +} +#mastodon .columns-area { + box-shadow: 0 8px 24px 12px rgba(0,0,0,0.02); +} #mastodon .column-header__wrapper ~ .scrollable { overflow: auto !important; } @@ -1038,7 +1060,7 @@ a:focus-visible, margin-top: calc(0px - var(--radius)) !important; display: flex; flex-direction: column; - background: inherit; + background: var(--background-color); isolation: isolate; } @media (max-width: 890px) { @@ -1047,6 +1069,13 @@ a:focus-visible, } } #mastodon .account-timeline__header .account__header__bar::before { + content: ""; + background: var(--elevated-tint); + position: absolute; + inset: 0; + pointer-events: none; +} +#mastodon .account-timeline__header .account__header__bar::after { content: ""; position: absolute; inset-inline: 0; @@ -2162,6 +2191,9 @@ a:focus-visible, position: absolute; inset: 0; } +#mastodon .status__wrapper { + background: none; +} #mastodon .status, #mastodon .scrollable .account { padding-block: 15px; @@ -2193,11 +2225,8 @@ a:focus-visible, overflow: hidden; text-overflow: ellipsis; } -#mastodon .notification .status { - padding-top: 0; -} #mastodon .notification .status .status__info { - margin-top: 10px !important; + margin-top: 0px !important; } #mastodon .notification .status .status__content ~ .media-gallery, #mastodon .notification .status .status__content ~ [style*="aspect-ratio:"] { @@ -2238,9 +2267,6 @@ a:focus-visible, overflow: hidden; max-width: 100%; } -#mastodon .status__prepend { - margin-bottom: -15px !important; -} #mastodon .notification__message > span, #mastodon .notification__message > span > span { display: flex; @@ -2428,19 +2454,6 @@ a:focus-visible, #mastodon .status__content__spoiler-link:focus::after { opacity: 1; } -#mastodon .detailed-status__wrapper-direct, -#mastodon .status-direct, -#mastodon .status__wrapper-direct, -#mastodon .conversation { - background: none; -} -#mastodon .detailed-status__wrapper-direct .status__prepend, -#mastodon .status-direct .status__prepend, -#mastodon .status__wrapper-direct .status__prepend, -#mastodon .conversation .status__prepend { - position: absolute; - font-size: 0; -} #mastodon .detailed-status__wrapper-direct .status__content, #mastodon .status-direct .status__content, #mastodon .status__wrapper-direct .status__content, @@ -2467,23 +2480,12 @@ a:focus-visible, .detailed-status__wrapper-direct .status__content { font-size: 17px; } -#mastodon .detailed-status__wrapper-direct .fa-at, -#mastodon .detailed-status__wrapper-direct .status__visibility-icon { - font-family: inherit; - font-weight: 600; - color: var(--accent, #8c8dff); - width: auto !important; +#mastodon .status__wrapper:not(.detailed-status__wrapper-direct) .status__prepend { + position: absolute; + font-size: 0; + opacity: 0; } -#mastodon .detailed-status__wrapper-direct .fa-at::before, -#mastodon .detailed-status__wrapper-direct .status__visibility-icon::before { - font-family: FontAwesome !important; -} -#mastodon .detailed-status__wrapper-direct .fa-at::after, -#mastodon .detailed-status__wrapper-direct .status__visibility-icon::after { - content: attr(title); - margin-left: 0.4em; -} -#mastodon .status-direct .fa-at, +#mastodon .status-direct .icon-at, #mastodon .status-direct .status__visibility-icon { color: var(--accent, #8c8dff); } @@ -2677,6 +2679,20 @@ a:focus-visible, #mastodon .picture-in-picture .status__content { min-height: unset !important; } +#mastodon .detailed-status__wrapper { + isolation: isolate; +} +#mastodon .detailed-status__wrapper::before { + content: ""; + position: absolute; + inset: 0; + background: var(--elevated-tint); + pointer-events: none; + z-index: -1; +} +#mastodon .detailed-status__wrapper .detailed-status { + box-shadow: none; +} #mastodon .picture-in-picture { z-index: 101; } @@ -2816,6 +2832,7 @@ a:focus-visible, .layout-single-column .tabs-bar__wrapper .column-header__collapsible, .layout-single-column .column-back-button--slim .column-back-button .column-header__collapsible { transition: none; + background: var(--modal-background-color); } .layout-single-column .tabs-bar__wrapper .collapsed, .layout-single-column .column-back-button--slim .column-back-button .collapsed { @@ -2871,11 +2888,6 @@ a:focus-visible, .layout-single-column .tabs-bar__wrapper .column-header > button, .layout-single-column .column-back-button--slim .column-back-button .column-header > button { z-index: 2; - display: inline; - } - .layout-single-column .tabs-bar__wrapper .column-header > button svg, - .layout-single-column .column-back-button--slim .column-back-button .column-header > button svg { - vertical-align: middle; } .layout-single-column .tabs-bar__wrapper .column-header__buttons button, .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button { @@ -2911,19 +2923,12 @@ a:focus-visible, inset: 0; top: calc(100% + 5px); bottom: -5px; - background: inherit; + background: var(--modal-background-color); z-index: -1; transition: inset 0.1s; border-radius: 100px; pointer-events: none; } - .layout-single-column .tabs-bar__wrapper .column-header__buttons button::after, - .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button::after { - position: absolute; - inset: 0; - background: var(--elevated-color); - border-radius: 100%; - } .layout-single-column .tabs-bar__wrapper .column-header__buttons button.active::before, .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button.active::before { inset: -10px -300px; @@ -2962,8 +2967,7 @@ a:focus-visible, } #mastodon .column-settings__row, #mastodon .column-settings__hashtags { - border-radius: var(--radius); - margin-bottom: 1em; + gap: 0; } #mastodon .column-settings__section { margin-bottom: 4px; @@ -2972,7 +2976,8 @@ a:focus-visible, #mastodon .column-select__control { border-radius: var(--radius); } -#mastodon .setting-toggle { +#mastodon .setting-toggle, +#mastodon .app-form__toggle { display: flex; align-items: center; margin-bottom: 14px; @@ -2982,23 +2987,28 @@ a:focus-visible, margin-bottom: 2px !important; overflow: hidden; } -#mastodon .setting-toggle:first-child { +#mastodon .setting-toggle:first-child, +#mastodon .app-form__toggle:first-child { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } -#mastodon .setting-toggle:last-child { +#mastodon .setting-toggle:last-child, +#mastodon .app-form__toggle:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); } -#mastodon .setting-toggle .react-toggle { +#mastodon .setting-toggle .react-toggle, +#mastodon .app-form__toggle .react-toggle { order: 2; } -#mastodon .setting-toggle .setting-toggle__label { +#mastodon .setting-toggle .setting-toggle__label, +#mastodon .app-form__toggle .setting-toggle__label { margin-bottom: 0 !important; flex-grow: 1; width: 0; } -#mastodon .setting-toggle::before { +#mastodon .setting-toggle::before, +#mastodon .app-form__toggle::before { content: ""; position: absolute; inset: 0; @@ -3008,37 +3018,40 @@ a:focus-visible, pointer-events: none; } #mastodon .setting-toggle:hover::before, -#mastodon .setting-toggle:focus-within::before { +#mastodon .app-form__toggle:hover::before, +#mastodon .setting-toggle:focus-within::before, +#mastodon .app-form__toggle:focus-within::before { opacity: 1; } -#mastodon .navigation-panel { +#mastodon .navigation-panel.navigation-panel { box-sizing: border-box; height: calc(100vh - var(--top) - 50px + var(--radius)); padding-bottom: 10px; margin: 0; + border: 0; margin-top: calc(0px - var(--radius)); padding-top: calc(10px + var(--radius)); } -#mastodon .navigation-panel > hr { +#mastodon .navigation-panel.navigation-panel > hr { display: none; } -#mastodon .navigation-panel hr { +#mastodon .navigation-panel.navigation-panel hr { margin-inline: 15px; } @media (min-width: 1175px) { - #mastodon .navigation-panel { + #mastodon .navigation-panel.navigation-panel { padding-top: calc(var(--radius) + 10px); margin-top: calc(50px - var(--radius)); } - #mastodon .navigation-panel .navigation-panel__logo .column-link, - #mastodon .navigation-panel .navigation-panel__logo hr { + #mastodon .navigation-panel.navigation-panel .navigation-panel__logo .column-link, + #mastodon .navigation-panel.navigation-panel .navigation-panel__logo hr { display: none !important; } - #mastodon .navigation-panel .switch-to-advanced { + #mastodon .navigation-panel.navigation-panel .switch-to-advanced { border-radius: var(--radius); margin-top: 0; } - #mastodon .navigation-panel [href="/settings/preferences"] { + #mastodon .navigation-panel.navigation-panel [href="/settings/preferences"] { display: none !important; } } @@ -3250,6 +3263,7 @@ a:focus-visible, margin-inline-end: 280px; padding-top: 12px; position: static; + backdrop-filter: none; } .layout-single-column #mastodon .columns-area__panels__main { margin-inline: 10px !important; @@ -3340,9 +3354,6 @@ a:focus-visible, #mastodon .picture-in-picture__footer { flex-wrap: wrap; } - #mastodon .columns-area--mobile > .column > .column-header__wrapper { - display: none; - } #mastodon .column-header { border-inline: 0; } @@ -3353,24 +3364,12 @@ a:focus-visible, height: auto; position: relative; box-sizing: border-box; - gap: 10px; + gap: 5px 10px; + flex-wrap: wrap; + padding-block: 8px; 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); + backdrop-filter: none !important; + background: none !important; } .ui__header .ui__header__logo { padding-block: 5px !important; @@ -3378,7 +3377,7 @@ a:focus-visible, .ui__header .ui__header__links { min-width: max-content; position: sticky; - inset-inline-end: 50px; + inset-inline-end: 55px; background: inherit; } :has(body) .ui__header .ui__header__links { @@ -3397,7 +3396,7 @@ a:focus-visible, width: 60px; font-size: 0; box-shadow: var(--shadow-low); - background: inherit; + background: var(--surface-background-color); -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; @@ -3452,141 +3451,140 @@ a:focus-visible, } #mastodon .tabs-bar__wrapper { top: 0; - background: none; z-index: 200; } + #mastodon .tabs-bar__wrapper::after { + content: ""; + position: absolute; + inset: 0; + background: var(--elevated-tint); + pointer-events: none; + z-index: 2; + } #mastodon .column-back-button.column-back-button { border-radius: 0 !important; } - #mastodon:has(*) [href="/publish"] { - bottom: 70px !important; - } - #mastodon:has(*) .columns-area__panels { - flex-direction: column; - } - #mastodon:has(*) .columns-area__panels__main { - width: 100%; - border-radius: 0 !important; - margin: 0 !important; - border: 0 !important; - } - #mastodon:has(*) .tabs-bar__wrapper { - transition: none !important; - } - #mastodon:has(*):has(.column-header__buttons:empty) .tabs-bar__wrapper { - margin-top: -50px; - margin-bottom: 2px; - height: 48px; - } - #mastodon:has(*) .columns-area__panels__pane--navigational { - display: contents; - } - #mastodon:has(*) .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { - position: relative !important; - inset: unset !important; - order: -1; - width: unset; - height: auto; - white-space: nowrap; - } - #mastodon:has(*) .columns-area__panels__pane--navigational .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; - } - #mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel::-webkit-scrollbar { - display: none; - } - #mastodon:has(*) .columns-area__panels__pane--navigational hr { - display: none; - } - #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__name > span, - #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__sparkline { - display: none; - } - #mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel__legal, - #mastodon:has(*) .columns-area__panels__pane--navigational h4, - #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item, - #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__name { - all: unset; - display: contents !important; - } - #mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel__legal::before, - #mastodon:has(*) .columns-area__panels__pane--navigational h4::before, - #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item::before, - #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__name::before, - #mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel__legal::after, - #mastodon:has(*) .columns-area__panels__pane--navigational h4::after, - #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item::after, - #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__name::after { - content: unset; - } - #mastodon:has(*) .columns-area__panels__pane--navigational h4 a span::after { - content: ":" !important; - } - #mastodon:has(*) .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:has(*) .columns-area__panels__pane--navigational:has(.getting-started__trends):has(.navigation-panel__sign-in-banner) .getting-started__trends { - all: unset; - display: contents !important; - } - #mastodon:has(*) .columns-area__panels__pane--navigational:has(.getting-started__trends) .trends__item:last-child a { - position: relative; - z-index: 3; - } - #mastodon:has(*) .columns-area__panels__pane--navigational a, - #mastodon:has(*) .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:has(*) .columns-area__panels__pane--navigational a::before, - #mastodon:has(*) .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:has(*) .columns-area__panels__pane--navigational a i, - #mastodon:has(*) .columns-area__panels__pane--navigational h4 > span i { - font-size: 1em; - width: auto; - margin-right: 0; - } - #mastodon:has(*) .columns-area__panels__pane--navigational a.active, - #mastodon:has(*) .columns-area__panels__pane--navigational h4 > span.active { - padding-inline: 1.2em; - position: relative; - } - #mastodon:has(*) .columns-area__panels__pane--navigational a.active::before, - #mastodon:has(*) .columns-area__panels__pane--navigational h4 > span.active::before { - inset: 0 !important; - opacity: 0.1; - } - #mastodon:has(*) .columns-area__panels__pane--navigational a > span:not(:first-child), - #mastodon:has(*) .columns-area__panels__pane--navigational h4 > span > span:not(:first-child) { - margin-left: 0.7em; - } - #mastodon:has(*) .columns-area__panels__pane--navigational span { - display: unset; + @supports selector(.foxxo:has(.waf)) { + #mastodon [href="/publish"] { + bottom: 70px !important; + } + #mastodon .columns-area__panels { + flex-direction: column; + } + #mastodon .columns-area__panels__main { + width: 100%; + border-radius: var(--radius) !important; + margin: 0 !important; + border: 0 !important; + overflow: clip !important; + } + #mastodon .tabs-bar__wrapper { + transition: none !important; + } + #mastodon .columns-area__panels__pane--navigational { + display: contents; + } + #mastodon .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { + position: relative !important; + inset: unset !important; + order: -1; + width: unset; + height: auto; + white-space: nowrap; + } + #mastodon .columns-area__panels__pane--navigational .navigation-panel { + flex-direction: row; + margin: 0; + padding: 0; + padding: 0 8px; + height: 5em; + border-top: 1px solid; + overflow: scroll hidden; + align-items: center; + } + #mastodon .columns-area__panels__pane--navigational .navigation-panel::-webkit-scrollbar { + display: none; + } + #mastodon .columns-area__panels__pane--navigational hr { + display: none; + } + #mastodon .columns-area__panels__pane--navigational .trends__item__name > span, + #mastodon .columns-area__panels__pane--navigational .trends__item__sparkline { + display: none; + } + #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 .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 .columns-area__panels__pane--navigational h4 a span::after { + content: ":" !important; + } + #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); + 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 svg, + #mastodon .columns-area__panels__pane--navigational h4 > span svg { + width: 1em; + height: 1em; + } + #mastodon .columns-area__panels__pane--navigational a.active, + #mastodon .columns-area__panels__pane--navigational h4 > span.active { + padding-inline: 1.2em; + margin-inline: 4px; + 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 span { + display: unset; + } } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .columns-area__panels__main { margin-top: 2px !important; @@ -3601,14 +3599,20 @@ a:focus-visible, position: fixed; bottom: 0; inset-inline: 0; - background: inherit; + background: var(--background-color-tint, inherit); + border-top: 1px solid var(--divider); z-index: 200; - height: 60px; - filter: brightness(1.2); + height: 61px; visibility: visible; + z-index: -1; + backdrop-filter: blur(10px); + border-top: 1px solid var(--background-border-color); + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header::after { + background: var(--elevated-tint); + height: 60px; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .navigation-panel { - padding-inline: 14px; border-top: none; margin-top: -10px; } @@ -3631,138 +3635,13 @@ a:focus-visible, #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column { min-height: 100vh; } - #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: 201; - 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: 201; - 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: 201; - 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: 201; - 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; + :root { + --selector: '.column-link[href='/home'],.column-link[href='/notifications'],.column-link[href='/explore'],.column-link[href='/public/local'],.column-link[href='/lists']'; } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'], + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'], + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'], + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'], #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] { position: fixed !important; display: flex; @@ -3776,14 +3655,22 @@ a:focus-visible, align-items: center; justify-content: center; width: 19%; - left: 77%; + 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, + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications']::before, + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore']::before, + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local']::before, #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='/home'] span, + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] span, + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] span, + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] span, #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] span { margin: 0; font-size: 0; @@ -3791,14 +3678,29 @@ a:focus-visible, 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); + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] svg, + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] svg, + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] svg, + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] svg, + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] svg { + width: 24px; + height: 24px; 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)) .column-link[href='/home'] { + left: 0%; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] { + left: 19.25%; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] { + left: 38.5%; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] { + left: 57.75%; + } + #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] { + left: 77%; } #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; @@ -3838,22 +3740,12 @@ a:focus-visible, #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 .columns-area__panels { - justify-content: flex-start; - max-width: 100% !important; - flex-wrap: nowrap !important; - } #mastodon .columns-area__panels__main { padding: 0 !important; max-width: unset; - border-start-end-radius: var(--radius); - overflow: clip !important; flex-grow: 1; margin-top: 1px; } - #mastodon .columns-area__panels__main > .columns-area--mobile { - overflow: visible !important; - } .is-composing .columns-area__panels__main { padding-bottom: 40px !important; } @@ -3862,17 +3754,10 @@ a:focus-visible, #mastodon .columns-area__panels__main > div { border-radius: 0 !important; } - #mastodon .column { - flex-grow: 1; - overflow: clip; - } #mastodon .dismissable-banner { margin: 0; padding-left: 4px; } - #mastodon .status { - padding-top: 14px !important; - } #mastodon .status .status__avatar { width: 42px !important; min-width: 45px !important; @@ -3902,7 +3787,7 @@ a:focus-visible, padding-top: 200px; height: calc(100vh + 200px - 55px); border: 0; - margin-inline-start: 1px; + border-inline-start: 1px solid; padding-bottom: 90px; } #mastodon .columns-area { @@ -4675,6 +4560,7 @@ a:focus-visible, } .layout-multiple-columns #mastodon .columns-area .drawer .drawer__header { border-radius: var(--radius-round); + background: var(--elevated-tint); margin-inline: 10px; overflow: hidden; border: 0 !important; @@ -4692,6 +4578,7 @@ a:focus-visible, z-index: 2; } .layout-multiple-columns #mastodon .columns-area .drawer > .drawer__pager { + border: 0; overflow: visible !important; } .layout-multiple-columns #mastodon .columns-area .drawer > .drawer__pager > .drawer__inner:not(.darker) { @@ -4701,7 +4588,6 @@ a:focus-visible, width: calc(100% + 10px); padding-inline-start: 6px; padding-inline-end: 4px; - padding-top: 20px; height: calc(100% + 20px); } .layout-multiple-columns #mastodon .columns-area .drawer .drawer__inner__mastodon { @@ -4726,9 +4612,22 @@ a:focus-visible, padding: 0 !important; border-radius: var(--radius-round) var(--radius-round) 0 0; } +.layout-multiple-columns #mastodon .columns-area .drawer__inner.darker::before { + content: ""; + position: absolute; + inset: 0; + background: var(--elevated-tint); + pointer-events: none; +} .layout-multiple-columns #mastodon .columns-area .getting-started__trends { padding: 0px 20px; } +.layout-multiple-columns #mastodon .columns-area .column-header { + border-top: 0; +} +.layout-multiple-columns #mastodon .columns-area .column-header__title { + padding-block: 0; +} .layout-multiple-columns #mastodon .columns-area .status { padding-bottom: 10px !important; } diff --git a/modern.user.css b/modern.user.css index b4035b3..4e7a557 100644 --- a/modern.user.css +++ b/modern.user.css @@ -6,9 +6,9 @@ // *://domain.tld/* -/* Update 1.10.3 -- Fixed misplaced character count in RTL -- Fix post button being unclickable on long posts on mobile & glitch-soc +/* Update 1.10.4 +FOR ADMINS: Do not update until Mastodon 4.3.0, unless on nightly +- Fixes for Mastodon's bordered design */ /* ==UserStyle== @@ -22,10 +22,10 @@ -- AUTHOR STUFF -- @namespace Freeplay -@author Freeplay (https://freeplay.codeberg.page/) +@author Freeplay (https://freeplay.floof.company/) ==/UserStyle== */ -@-moz-document domain("mastodon.coffee"), domain("socel.net"), domain("brands.town"), domain("mstdn.social"), domain("social.vivaldi.net"), domain("masto.ai"), domain("mastodon.art"), domain("tech.lgbt"), domain("mastodon.social"), domain("mastodon.online"), domain("mastodon.lol"), domain("floss.social"), domain("mas.to"), domain("c.im"), domain("nerdculture.de"), domain("maly.io"), domain("corteximplant.com"), domain("queer.party"), domain("fosstodon.org"), domain("meow.social"), domain("raru.re"), domain("ani.work"), domain("kolektiva.social"), domain("home.social"), domain("mstdn.plus"), domain("mastodon.sdf.org"), domain("toot.community"), domain("sfba.social"), domain("hachyderm.io"), domain("mindly.social"), domain("mastodon.cloud"), domain("bark.lgbt"), domain("wetdry.world"), domain("md.ilyamikcoder.com"), domain("techhub.social"), domain("mastodon.world"), domain("toot.io"), domain("catcatnya.com"), domain("mstdn.constellatory.net") { +@-moz-document domain("mastodon.coffee"), domain("socel.net"), domain("brands.town"), domain("mstdn.social"), domain("social.vivaldi.net"), domain("masto.ai"), domain("mastodon.art"), domain("tech.lgbt"), domain("mastodon.social"), domain("mastodon.online"), domain("mastodon.lol"), domain("floss.social"), domain("mas.to"), domain("c.im"), domain("nerdculture.de"), domain("maly.io"), domain("corteximplant.com"), domain("queer.party"), domain("fosstodon.org"), domain("meow.social"), domain("raru.re"), domain("ani.work"), domain("kolektiva.social"), domain("home.social"), domain("mstdn.plus"), domain("mastodon.sdf.org"), domain("toot.community"), domain("sfba.social"), domain("hachyderm.io"), domain("mindly.social"), domain("mastodon.cloud"), domain("bark.lgbt"), domain("wetdry.world"), domain("md.ilyamikcoder.com"), domain("techhub.social"), domain("mastodon.world"), domain("toot.io"), domain("catcatnya.com"), domain("mstdn.constellatory.net"), domain("yiff.life") { / { // This is just so I can easily collapse everything, shouldn't affect compiled code responsiveW1 = 1320px responsiveW2 = 1175px @@ -42,6 +42,7 @@ --radius-round 24px --hover-color rgba(170,170,170, 0.07) --elevated-color rgba(150,150,200,0.1) + --elevated-tint rgba(200,200,240,0.07) --border-color rgba(120,120,200, 0.2) --border-color-2 rgba(120,120,120, 1) --shadow 0 10px 40px -10px rgba(0,0,0,0.15) @@ -50,6 +51,14 @@ // --accent // not applied everywhere, just for if you have custom color scheme and want to match it } + + body::before { + content "" + position fixed + inset 0 + background rgba(0,0,0,0.06) + z-index -1 + } :not(body):not(.scrollable) { &::-webkit-scrollbar { @@ -152,7 +161,7 @@ } input, .input-copy, select, textarea, .compose-form__upload-thumbnail, .button, - button:not(.column-header__button), video, .privacy-dropdown__dropdown, .react-toggle-track, + :not(.notification__filter-bar) > button:not(.column-header__button), video, .privacy-dropdown__dropdown, .react-toggle-track, .reply-indicator, .compose-form__warning { border-radius var(--radius) !important } @@ -268,7 +277,7 @@ .audio-player, .search__input { border 0 !important } - .notification__filter-bar, + .account__section-headline, .notification__filter-bar, .column-header { border-inline 0 } @@ -682,6 +691,19 @@ padding-bottom 40vh !important } } + .column { + background var(--background-color) + &::before { + content "" + position absolute + inset 0 + background var(--elevated-tint) + pointer-events none + } + } + .columns-area { + box-shadow 0 8px 24px 12px rgba(0,0,0,0.02) + } .column-header__wrapper ~ .scrollable { overflow auto !important } @@ -822,10 +844,18 @@ margin-top calc(0px - var(--radius)) !important display flex flex-direction column - background inherit + background var(--background-color) isolation isolate &::before { + content "" + background var(--elevated-tint) + position absolute + inset 0 + pointer-events none + } + + &::after { content "" position absolute inset-inline 0 @@ -1549,6 +1579,10 @@ } } + .status__wrapper { + background none + } + .status, .scrollable .account { padding-block 15px &::before { @@ -1582,9 +1616,9 @@ } } .notification .status { - padding-top 0 + //padding-top 0 .status__info { - margin-top 10px !important + margin-top 0px !important } .status__content ~ .media-gallery, .status__content ~ [style*="aspect-ratio:"] { @@ -1624,9 +1658,6 @@ max-width 100% } } - .status__prepend { - margin-bottom -15px !important - } .notification__message { > span, > span > span { display flex @@ -1819,12 +1850,6 @@ } } .detailed-status__wrapper-direct, .status-direct, .status__wrapper-direct, .conversation { - background none - .status__prepend { - position absolute - font-size 0 - } - .status__content { position relative !important background var(--elevated-color) @@ -1846,24 +1871,15 @@ } } } - - .detailed-status__wrapper-direct { - .fa-at, .status__visibility-icon { - font-family inherit - font-weight 600 - color var(--accent, #8c8dff) - width auto !important - &::before { - font-family FontAwesome !important - } - &::after { - content attr(title) - margin-left .4em - } + .status__wrapper:not(.detailed-status__wrapper-direct) { + .status__prepend { + position absolute + font-size 0 + opacity 0 } } .status-direct { - .fa-at, .status__visibility-icon { + .icon-at, .status__visibility-icon { color var(--accent, #8c8dff) } .status__info .status__relative-time { @@ -2038,6 +2054,20 @@ min-height unset !important } } + .detailed-status__wrapper { + isolation isolate + &::before { + content "" + position absolute + inset 0 + background var(--elevated-tint) + pointer-events none + z-index -1 + } + .detailed-status { + box-shadow none + } + } .picture-in-picture { z-index 101 .picture-in-picture__header { @@ -2140,6 +2170,7 @@ } .column-header__collapsible { transition none + background var(--modal-background-color) } .collapsed { display none @@ -2205,10 +2236,6 @@ } .column-header > button { z-index 2 - display inline - svg { - vertical-align middle - } } .column-header__buttons button { transition background .2s, transform .3s !important @@ -2237,19 +2264,12 @@ inset 0 top calc(100% + 5px) bottom -5px - background inherit + background var(--modal-background-color) z-index -1 transition inset .1s border-radius 100px pointer-events none } - &::after { - // content "" - position absolute - inset 0 - background var(--elevated-color) - border-radius 100% - } &.active { // filter contrast(1.1) // z-index -1 @@ -2280,8 +2300,7 @@ } } .column-settings__row, .column-settings__hashtags { - border-radius var(--radius) - margin-bottom 1em + gap 0 } .column-settings__section { margin-bottom 4px @@ -2290,7 +2309,7 @@ .column-select__control { border-radius var(--radius) } - .setting-toggle { + .setting-toggle, .app-form__toggle { display flex // flex-direction row-reverse align-items center @@ -2337,11 +2356,12 @@ } - .navigation-panel { + .navigation-panel.navigation-panel { box-sizing border-box height calc(100vh - var(--top) - 50px + var(--radius)) padding-bottom 10px margin 0 + border 0 margin-top calc(0px - var(--radius)) padding-top calc(10px + var(--radius)) > hr { @@ -2607,6 +2627,7 @@ padding-top 12px // z-index 0 position static + backdrop-filter none } .columns-area__panels__main { margin-inline 10px !important @@ -2622,11 +2643,8 @@ .navigation-panel { background none border 0 - // padding-top 10px width 265px !important - // height calc(100vh - 50px) !important padding-bottom 10px - // padding-inline 10px } } } @@ -2634,9 +2652,6 @@ // Mobile @media (max-width mobileW - 1) { compactStatuses() - .columns-area--mobile > .column > .column-header__wrapper { - display none - } .column-header { border-inline 0 } @@ -2647,34 +2662,19 @@ height auto position relative box-sizing border-box - gap 10px + gap 5px 10px + flex-wrap wrap + padding-block 8px 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) - } - } - + backdrop-filter none !important + background none !important .ui__header__logo { padding-block 5px !important } .ui__header__links { min-width max-content position sticky - inset-inline-end 50px + inset-inline-end 55px background inherit :has(body) & { right 0 @@ -2693,7 +2693,7 @@ width 60px font-size 0 box-shadow var(--shadow-low) - background inherit + background var(--surface-background-color) -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; @@ -2750,15 +2750,22 @@ } .tabs-bar__wrapper { top 0 - background none z-index 200 + &::after { + content "" + position absolute + inset 0 + background var(--elevated-tint) + pointer-events none + z-index 2 + } } .column-back-button.column-back-button { border-radius 0 !important } // Navigation - &:has(*) { // would've rather used @supports but stylus is dumb apparently + @supports unquote("selector(.foxxo:has(.waf))") { [href="/publish"] { bottom 70px !important } @@ -2767,20 +2774,14 @@ } .columns-area__panels__main { width 100% - border-radius 0 !important + border-radius var(--radius) !important margin 0 !important border 0 !important + overflow clip !important } .tabs-bar__wrapper { transition none !important } - &:has(.column-header__buttons:empty) { - .tabs-bar__wrapper { - margin-top -50px - margin-bottom 2px - height 48px - } - } .columns-area__panels__pane--navigational { display contents @@ -2798,8 +2799,7 @@ padding 0 padding 0 8px height 5em - gap 10px - border-block 1px solid + border-top 1px solid overflow scroll hidden align-items center &::-webkit-scrollbar { @@ -2841,11 +2841,9 @@ } } 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 @@ -2860,22 +2858,19 @@ border-radius inherit transition inset .4s cubic-bezier(0,0,0,1.2), opacity .2s } - i { - font-size 1em - width auto - margin-right 0 + svg { + width 1em + height @width } &.active { padding-inline 1.2em + margin-inline 4px position relative &::before { inset 0 !important opacity .1 } } - > span:not(:first-child) { - margin-left .7em - } } span { display unset @@ -2891,8 +2886,6 @@ margin-top 2px !important } .ui__header { - // position static !important - // visibility collapse z-index 199 &::before, &::after { all unset @@ -2900,15 +2893,22 @@ position fixed bottom 0 inset-inline 0 - background inherit + background var(--background-color-tint) + border-top 1px solid var(--divider) z-index 200 - height 60px - filter brightness(1.2) + height 61px visibility visible + z-index -1 + backdrop-filter blur(10px) + border-top 1px solid var(--background-border-color) + } + &::after { + background var(--elevated-tint) + height 60px + //filter brightness(1.1) } } .navigation-panel { - padding-inline 14px border-top none margin-top -10px a { @@ -2932,44 +2932,53 @@ .column { min-height 100vh } - .column-link { - margin-inline -.2em - padding-inline .7em - } - bottomBarButtons = "'/home'" "'/notifications'" "'/explore'" "'/public/local'" "'/lists'" + bottomBarItemsSelector() { + waf = "" + for i in arguments { + waf += ( ",.column-link[href=" + i + "]" ) + } + return substr(waf, 1) + } + /:root { + --selector bottomBarItemsSelector(bottomBarButtons) + } + {bottomBarItemsSelector(bottomBarButtons)} { + position fixed !important + display flex + flex-direction column + bottom 4px + z-index 201 + 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 + &::before { + inset-inline 6px + } + span { + margin 0 + font-size 0 + line-height 1 + opacity 0 + transition font-size .4s, margin .7s, opacity .2s + } + svg { + width 24px + height @width + transition transform .1s + } + } for row, i in bottomBarButtons { .column-link[href={row}] { - position fixed !important - display flex - flex-direction column - bottom 4px - z-index 201 - 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 - } } } @@ -2983,11 +2992,6 @@ 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 @@ -3028,24 +3032,11 @@ } } } - - .columns-area__panels { - // overflow-x scroll !important - justify-content flex-start - max-width 100% !important - flex-wrap nowrap !important - } .columns-area__panels__main { padding 0 !important max-width unset - border-start-end-radius var(--radius) - overflow clip !important flex-grow 1 margin-top 1px - // order 2 - > .columns-area--mobile { - overflow visible !important - } ~/ .is-composing .columns-area__panels__main { padding-bottom 40px !important } @@ -3054,17 +3045,12 @@ } } - .column { - flex-grow 1 - overflow clip - } .dismissable-banner { margin 0 padding-left 4px } .status { - padding-top 14px !important .status__avatar { width 42px !important min-width 45px !important @@ -3082,8 +3068,7 @@ } .status__action-bar { - margin-bottom -5px - + margin-bottom -5px .icon-button { margin 0 !important justify-content center @@ -3099,7 +3084,7 @@ padding-top 200px height calc(100vh + 200px - 55px) border 0 - margin-inline-start 1px + border-inline-start 1px solid padding-bottom 90px } @@ -3522,6 +3507,7 @@ // width 285px .drawer__header { border-radius var(--radius-round) + background var(--elevated-tint) margin-inline 10px overflow hidden border 0 !important @@ -3539,6 +3525,7 @@ z-index 2 } & > .drawer__pager { + border 0 overflow visible !important & > .drawer__inner:not(.darker) { top -20px @@ -3549,7 +3536,6 @@ width calc(100% + 10px) padding-inline-start 6px padding-inline-end 4px - padding-top 20px height calc(100% + 20px) } } @@ -3575,10 +3561,24 @@ .drawer__inner.darker { padding 0 !important border-radius var(--radius-round) var(--radius-round) 0 0 + &::before { + content "" + position absolute + inset 0 + background var(--elevated-tint) + pointer-events none + } } .getting-started__trends { padding 0px 20px } + + .column-header { + border-top 0 + } + .column-header__title { + padding-block 0 + } .status { padding-bottom 10px !important