diff --git a/README.md b/README.md index b41180f..ef521cc 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,22 @@ # Mastodon Modern Please don't upload to GitHub -A UserStyle & theme that drastically improves the look & feel of Mastodon. Can be used with other themes that only change colors. +A UserStyle & theme that improves the look & feel of Mastodon. Can be used with other themes that only change colors. -| ![](images/modern-thumbnail.webp) | ![](images/new-modern-light-theme-post.png) | ![](images/new-modern-multicolumn-dark.png) | -| --- | --- | --- | --- | +| ![](images/mastomodern-preview.png) | ![](images/mastomodern-post.png) | ![](images/mastomodern-advanced-view.png) | ![](images/mastomodern-mobile-profile.png) | +| --- | --- | --- | --- | --- | -### **[Use with the Stylus browser extension!](https://userstyles.world/style/4773)** +## **[Install with the Stylus browser extension!](https://userstyles.world/style/4773)** +Please do not use the "Stylish" browser extension: https://robertheaton.com/2018/07/02/stylish-browser-extension-steals-your-internet-history/ -## Example for adding to your own instance: +## Instance Admins: -https://github.com/Coffeedon/Cofffee-Assets#to-use-a-pre-made-theme +> Previous instructions/example were outdated, I may need help with instructions here as I am not able to run my own instance to test atm.
[The Chuckya Mastodon fork has implemented the style here](https://github.com/TheEssem/mastodon/tree/main/app/javascript/styles) +For now, here are some notes: - **Make sure to use the compiled code from [this repo's `modern.css`](modern.css)** -- **For light theme, you may need to include `@import 'mastodon-light/diff';`** -- **Same goes for the High Contrast theme `@import 'contrast/diff';`** -- While not tested thoroughly, could work well with other color themes, as well. +- **The default Mastodon theme needs to be imported** +- **For light theme, include `@import 'mastodon-light/diff';`** +- **For High Contrast theme `@import 'contrast/diff';`** +- While not tested thoroughly, can work well with other color themes. **Note:** The UserStyle usually receives updates earlier to make sure everything is ready for the compiled CSS. @@ -29,12 +32,10 @@ Make sure to see the license below for more details:

-
-🍓 -Although I'm definitely lower priority than some others...
If you support my work and can actually afford to, + +If you support my work and can afford to,
[**you can donate to me here :)**](https://www.buymeacoffee.com/freeplay) -
-
\ No newline at end of file + diff --git a/glitch-fixes.css b/glitch-fixes.css index 96f2b7f..bc50e6f 100644 --- a/glitch-fixes.css +++ b/glitch-fixes.css @@ -1,3 +1,6 @@ +:root { + --background-color-alt: transparent; +} body.app-body.flavour-glitch > #mastodon .compose-form__autosuggest-wrapper > :last-child { padding-bottom: 2em !important; } @@ -37,6 +40,7 @@ body.app-body.flavour-glitch > #mastodon .compose-form__submit button { body.app-body.flavour-glitch > #mastodon .collapsed .status__content { height: auto !important; overflow: visible; + mask: unset !important; } body.app-body.flavour-glitch > #mastodon .collapsed .status__content .status__content__text { mask: linear-gradient(to bottom, #000 50px, transparent) !important; @@ -55,32 +59,36 @@ body.app-body.flavour-glitch > #mastodon .collapsed .status__content::after { body.app-body.flavour-glitch > #mastodon .collapsed.muted .status__content__text ~ * { display: none; } +@media (pointer: coarse) { + body.app-body.flavour-glitch > #mastodon .status__info { + align-items: center; + } + body.app-body.flavour-glitch > #mastodon .status__info__icons { + height: auto; + } +} +body.app-body.flavour-glitch > #mastodon .status { + isolation: isolate; + overflow: hidden; +} +body.app-body.flavour-glitch > #mastodon .status__info { + pointer-events: none; +} +body.app-body.flavour-glitch > #mastodon .status__avatar, +body.app-body.flavour-glitch > #mastodon .status__info__icons { + pointer-events: all; +} +body.app-body.flavour-glitch > #mastodon .status > :not(.status__content):not(.status__line) { + position: relative; + z-index: 2; +} body.app-body.flavour-glitch > #mastodon .status:not(.status-direct) > .status__content { - margin-block: -90px -100px !important; + margin-block: -100px !important; padding-block: 100px !important; } -body.app-body.flavour-glitch > #mastodon .status:not(.status-direct) > .status__content .status__content__text { - margin-top: 0px; -} -body.app-body.flavour-glitch > #mastodon .status:not(.status-direct) > .status__content > :last-child:not(.status__content__text) { - margin-bottom: 5px !important; -} -body.app-body.flavour-glitch > #mastodon .status .full-width { +body.app-body.flavour-glitch > #mastodon .full-width { margin-inline: 0 !important; } -body.app-body.flavour-glitch > #mastodon .status .status__action-bar { - position: static; -} -body.app-body.flavour-glitch > #mastodon .status__info .notification__message { - padding-top: 0 !important; - padding-inline-start: 0 !important; -} -body.app-body.flavour-glitch > #mastodon .status__display-name { - line-height: 22px; -} -body.app-body.flavour-glitch > #mastodon .display-name__account { - font-size: 15px; -} body.app-body.flavour-glitch > #mastodon .media-gallery__item > .media-gallery__preview { display: unset; } @@ -93,6 +101,7 @@ body.app-body.flavour-glitch > #mastodon .status__relative-time { flex-grow: 0 !important; min-width: 5ch !important; max-width: unset !important; + justify-content: flex-end; } body.app-body.flavour-glitch > #mastodon .status__relative-time time { display: inline !important; @@ -100,8 +109,10 @@ body.app-body.flavour-glitch > #mastodon .status__relative-time time { body.app-body.flavour-glitch > #mastodon .reactions-bar { width: unset; margin-top: 8px; + pointer-events: none; } body.app-body.flavour-glitch > #mastodon .reactions-bar button { + pointer-events: all; border-radius: 6px !important; padding-block: 2px; border: 1px solid var(--border-color-2); @@ -116,69 +127,61 @@ body.app-body.flavour-glitch > #mastodon .reactions-bar button:not(.active) { body.app-body.flavour-glitch > #mastodon .reactions-bar:empty { display: none; } +body.app-body.flavour-glitch > #mastodon .notification__message { + padding-top: 15px; +} body.app-body.flavour-glitch > #mastodon .notification__message + .status { - padding-top: 0 !important; -} -body.app-body.flavour-glitch > #mastodon .notification > .notification__message { - padding-inline: 15px !important; - padding-top: 18px !important; -} -body.app-body.flavour-glitch > #mastodon .notification__favourite-icon-wrapper { - position: static; - margin-inline-end: 10px; -} -body.app-body.flavour-glitch > #mastodon .notification__favourite-icon-wrapper i { - width: 1.28571429em !important; - text-align: center; -} -body.app-body.flavour-glitch > #mastodon .detailed-status__wrapper .focusable:not(.status)::before { - content: unset !important; -} -body.app-body.flavour-glitch > #mastodon .setting-text { - border-radius: 0 !important; - margin: 4px; - width: calc(100% - 8px); + padding-top: 5px !important; } body.app-body.flavour-glitch > #mastodon .column-settings__pillbar { border-radius: var(--radius); } body.app-body.flavour-glitch > #mastodon .pillbar-button { - border-radius: 0 !important; - padding: 6px; + padding: 10px; + border-radius: 4px; } -body.app-body.flavour-glitch > #mastodon .account__header__account-note:focus-within { - border-radius: var(--radius) !important; +body.app-body.flavour-glitch > #mastodon .column-header__notif-cleaning-buttons { + flex-wrap: wrap; } -body.app-body.flavour-glitch > #mastodon .account__header__account-note__header { - align-items: center; +body.app-body.flavour-glitch > #mastodon .column-header__notif-cleaning-buttons button { + min-width: 50% !important; } -body.app-body.flavour-glitch > #mastodon .account__header__account-note__header button { - display: flex; - gap: 0.2em; +body.app-body.flavour-glitch > #mastodon .notification__dismiss-overlay { + position: absolute !important; } -body.app-body.flavour-glitch > #mastodon .account__header__account-note__content { +body.app-body.flavour-glitch > #mastodon .notification__dismiss-overlay .wrappy { + box-shadow: none; + background: none; + border-top: 0; +} +body.app-body.flavour-glitch > #mastodon .local-settings { + max-height: 700px !important; width: 100%; - padding: 0 !important; - margin: 0 !important; } -body.app-body.flavour-glitch > #mastodon .account-card .media-modal__close { - left: 10px; - top: 10px; +body.app-body.flavour-glitch > #mastodon .glitch.local-settings__page { + padding: 20px; } -body.app-body.flavour-glitch > #mastodon .account-card .media-modal__close::before { - content: ""; - position: absolute; - inset: -60px -30px; - background: linear-gradient(to right, #000, transparent); - transform: rotate(45deg); - z-index: -1; - opacity: 0.5; +body.app-body.flavour-glitch > #mastodon .local-settings__navigation { + display: flex; + flex-direction: column; + padding: 8px; + background: none; + border-right: 1px solid var(--border-color); + width: auto; } -.layout-multiple-columns.flavour-glitch .drawer { - flex-grow: 0.2; +body.app-body.flavour-glitch > #mastodon .local-settings__navigation .local-settings__navigation__item:not(.close):not(.active) { + background: none; } -.layout-multiple-columns.flavour-glitch .drawer__inner { - margin-top: -20px; - max-height: unset !important; - min-height: calc(100% + 40px); +body.app-body.flavour-glitch > #mastodon .local-settings__navigation .local-settings__navigation__item { + border: 0; + flex-direction: column; + padding-inline: 8px; +} +body.app-body.flavour-glitch > #mastodon .local-settings__navigation .local-settings__navigation__item span { + font-size: 0.8em; +} +body.app-body.flavour-glitch > #mastodon .local-settings__navigation [href="/settings/preferences"] { + margin-block: auto 10px; + border-radius: var(--radius); + border: 1px solid var(--border-color); } \ No newline at end of file diff --git a/images/mastomodern-advanced-view.png b/images/mastomodern-advanced-view.png new file mode 100644 index 0000000..00dc200 Binary files /dev/null and b/images/mastomodern-advanced-view.png differ diff --git a/images/mastomodern-mobile-profile.png b/images/mastomodern-mobile-profile.png new file mode 100644 index 0000000..1b0aaeb Binary files /dev/null and b/images/mastomodern-mobile-profile.png differ diff --git a/images/mastomodern-post.png b/images/mastomodern-post.png new file mode 100644 index 0000000..ec57218 Binary files /dev/null and b/images/mastomodern-post.png differ diff --git a/images/mastomodern-preview.png b/images/mastomodern-preview.png new file mode 100644 index 0000000..9516fc3 Binary files /dev/null and b/images/mastomodern-preview.png differ diff --git a/images/modern-thumbnail.webp b/images/modern-thumbnail.webp deleted file mode 100644 index 28419a2..0000000 Binary files a/images/modern-thumbnail.webp and /dev/null differ diff --git a/images/new-modern-dark-theme-post.png b/images/new-modern-dark-theme-post.png deleted file mode 100644 index 686065a..0000000 Binary files a/images/new-modern-dark-theme-post.png and /dev/null differ diff --git a/images/new-modern-light-theme-post.png b/images/new-modern-light-theme-post.png deleted file mode 100644 index a80d2e0..0000000 Binary files a/images/new-modern-light-theme-post.png and /dev/null differ diff --git a/images/new-modern-light-theme-profile.png b/images/new-modern-light-theme-profile.png deleted file mode 100644 index cafda4e..0000000 Binary files a/images/new-modern-light-theme-profile.png and /dev/null differ diff --git a/images/new-modern-multicolumn-dark.png b/images/new-modern-multicolumn-dark.png deleted file mode 100644 index 9983688..0000000 Binary files a/images/new-modern-multicolumn-dark.png and /dev/null differ diff --git a/modern.css b/modern.css index 3c5e273..d2eefa6 100644 --- a/modern.css +++ b/modern.css @@ -1,48 +1,46 @@ :root { - --tl-width: 750px; + --tl-width: 720px; + --emoji-size: 2em; + --avatar-size: 46px; --radius: 12px; --radius-round: 24px; + --panel-radius: var(--radius); --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-low: 0 8px 24px -16px rgba(0,0,0,0.2); --shadow-med: 0 8px 60px -30px rgba(0,0,0,0.1); + --column-shadow: 0 8px 24px 12px rgba(0,0,0,0.02); } -body::before { +@media (max-width: 889px) { + :root { + --panel-radius: 0px; + } +} +.layout-multiple-columns { + --panel-radius: 0px; +} +body { + font-display: swap !important; +} +body:not(.admin)::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; +p { + line-height: 1.5; } -:not(body):not(.scrollable)::-webkit-scrollbar-track { - background: none; -} -:not(body):not(.scrollable)::-webkit-scrollbar-thumb { - border-radius: 100px; - transition: background-color 0.2s; -} -:not(body):not(.scrollable):not(:hover)::-webkit-scrollbar-thumb { - background: none; - padding-block: 10px; -} -.rtl textarea { - text-align: right; -} -a, -button, -label { - user-select: none; +input { + text-align: start; } .button--block { - font-weight: 700; + font-weight: bold; } .unhandled-link span, .mention span { @@ -64,7 +62,7 @@ video, .react-toggle-track, .reply-indicator, .compose-form__warning { - border-radius: var(--radius) !important; + border-radius: var(--radius); } button:focus-visible, .focusable:focus-visible, @@ -74,14 +72,51 @@ a:focus-visible, outline: 2px #dc7b18 solid; outline-offset: -2px; } -*:not(.radio-button__input):not(input) { - font-display: swap !important; -} :not(.radio-button__input):not(span) { border-color: var(--border-color) !important; } -.setting-text { - padding-inline: 10px; +.nothing-here, +.column-inline-form, +.scrollable, +.detailed-status__action-bar, +.column-back-button, +.column-header__collapsible.collapsed, +.column-header__collapsible-inner, +.audio-player, +.search__input { + border: 0 !important; +} +.account__section-headline, +.notification__filter-bar, +.column-header { + border-inline: 0; +} +.account__section-headline, +.notification__filter-bar, +.column > .scrollable { + background: none; +} +.account__avatar, +#profile_page_avatar, +.account__avatar-composite, +.account-card__title__avatar img { + border-radius: 30%; + flex: none; +} +:not(body):not(.scrollable)::-webkit-scrollbar { + width: 6px; + margin-block: 10px; +} +:not(body):not(.scrollable)::-webkit-scrollbar-track { + background: none; +} +:not(body):not(.scrollable)::-webkit-scrollbar-thumb { + border-radius: 100px; + transition: background-color 0.2s; +} +:not(body):not(.scrollable):not(:hover)::-webkit-scrollbar-thumb { + background: none; + padding-block: 10px; } @media (prefers-reduced-motion: no-preference) { body:not(.reduce-motion) .load-more, @@ -136,7 +171,7 @@ a:focus-visible, body:not(.reduce-motion) .react-toggle-track, body:not(.reduce-motion) .icon-button, body:not(.reduce-motion) .floating-action-button { - transition: transform 0.4s cubic-bezier(0, 0, 0, 4) !important; + transition: transform 0.4s cubic-bezier(0, 0, 0, 4), background 0.2s !important; } body:not(.reduce-motion) .column-header__button:active, body:not(.reduce-motion) .column-header__buttons > .column-header__back-button:active, @@ -273,25 +308,25 @@ a:focus-visible, filter: opacity(0); } } -@-moz-keyframes slideDowFade { +@-moz-keyframes slideDownFade { from { transform: translateY(-20px); filter: opacity(0); } } -@-webkit-keyframes slideDowFade { +@-webkit-keyframes slideDownFade { from { transform: translateY(-20px); filter: opacity(0); } } -@-o-keyframes slideDowFade { +@-o-keyframes slideDownFade { from { transform: translateY(-20px); filter: opacity(0); } } -@keyframes slideDowFade { +@keyframes slideDownFade { from { transform: translateY(-20px); filter: opacity(0); @@ -406,71 +441,6 @@ a:focus-visible, } } } -.account__avatar, -#profile_page_avatar, -.account__avatar-composite, -.account-card__title__avatar img { - border-radius: 30% !important; -} -.scrollable, -.detailed-status__action-bar, -.column-back-button, -.column-header__collapsible.collapsed, -.column-header__collapsible-inner, -.audio-player, -.search__input { - border: 0 !important; -} -.account__section-headline, -.notification__filter-bar, -.column-header { - border-inline: 0; -} -.dropdown-menu, -.dropdown-animation { - border-radius: var(--radius); - animation: scaleIn 0.2s cubic-bezier(0, 0, 0, 1.1); -} -.dropdown-menu__container__list { - overflow: hidden auto; - border-radius: var(--radius); - max-height: 70vh; -} -.dropdown-menu__item { - overflow: hidden; -} -.dropdown-menu__item a { - padding: 0.7em 1em !important; - transition: background-color 0.2s, color 0.2s; - min-width: 150px; -} -.dropdown-menu__separator { - margin: 0 !important; -} -.interaction-modal { - border-radius: var(--radius); - overflow-y: auto; -} -.interaction-modal__choices { - gap: 10px; - display: flex; - flex-wrap: wrap; -} -.interaction-modal__choices .interaction-modal__choices__choice { - max-height: 50vh; - overflow-y: auto; - border: 1px solid var(--border-color); - flex: 1 0 270px; - border-radius: var(--radius); - transition: background 0.2s; - position: relative; -} -.compare-history-modal { - margin-block: 20px; -} -.compare-history-modal__container { - overflow: hidden auto; -} .columns-area__panels { --top: 5px; gap: 0; @@ -489,57 +459,7 @@ a:focus-visible, --top: 30px; } } -.emoji-picker-dropdown__menu { - border-radius: var(--radius); - overflow: hidden; - resize: both; - width: 400px; -} -.emoji-mart { - display: flex !important; - flex-direction: column !important; - width: 100% !important; - height: 100% !important; -} -.emoji-mart-scroll { - flex-grow: 1; - max-height: unset !important; -} -.emoji-mart-bar { - order: 2; -} -.emoji-mart-category-list { - overflow: visible !important; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(calc(20px + 6%), 1fr)); -} -.emoji-mart-category-list li { - display: contents; -} -.emoji-mart-category-list button { - position: relative; - padding: 0 !important; - padding-top: 100% !important; -} -.emoji-mart-category-list button img, -.emoji-mart-category-list button span { - height: calc(100% - 10px) !important; - width: calc(100% - 10px) !important; - inset: 5px; - position: absolute !important; - transition: transform 0.1s cubic-bezier(0, 0, 0, 1); -} -.emoji-mart-category-list button:hover img, -.emoji-mart-category-list button:hover span { - transform: scale(1.2); -} -.emoji-picker-dropdown__modifiers { - top: 16px; -} -#mastodon { - overflow: clip; -} -#mastodon .compose-panel { +.compose-panel { overflow-y: auto; margin-top: calc(0px - var(--top)); padding-top: var(--top); @@ -549,27 +469,27 @@ a:focus-visible, max-height: unset !important; height: 100%; } -#mastodon .compose-panel > * { +.compose-panel > * { padding-inline: 0; } -#mastodon .compose-panel > .navigation-bar { +.compose-panel > .navigation-bar { padding-top: 0 !important; } -#mastodon .compose-panel .search, +.compose-panel .search, .drawer .search { margin-bottom: 25px; } -#mastodon .search { +.search { border-radius: var(--radius); margin-inline: -5px; } -#mastodon .search label { +.search label { box-sizing: border-box; } -#mastodon .search input { +.search input { border-radius: var(--radius-round) !important; } -#mastodon .search .search__icon > i { +.search .search__icon > i { margin-inline: 5px; } .search__popout { @@ -580,65 +500,66 @@ a:focus-visible, margin-inline: 4px; width: calc(100% - 8px); } -#mastodon .navigation-bar .icon-button { +.navigation-bar .icon-button { width: auto !important; height: auto !important; padding: 8px; } -#mastodon .compose-form { +.compose-form { min-height: unset; overflow: unset; gap: 15px; + flex: 1 0 auto !important; } -#mastodon .compose-form > * { +.compose-form > * { margin: 0 !important; } -#mastodon .compose-form > [aria-hidden="true"] { +.compose-form > [aria-hidden="true"] { display: none; } -#mastodon .compose-form > .navigation-bar { +.compose-form > .navigation-bar { margin-top: 10px; } -#mastodon .compose-form .reply-indicator { +.compose-form .reply-indicator { position: relative; transition: min-height 0.1s; } -#mastodon .compose-form .reply-indicator__display-name { +.compose-form .reply-indicator__display-name { padding: 0; } -#mastodon .compose-form .compose-form__autosuggest-wrapper, -#mastodon .compose-form .autosuggest-textarea__textarea { +.compose-form .compose-form__autosuggest-wrapper, +.compose-form .autosuggest-textarea__textarea { border-radius: var(--radius) var(--radius) 0 0 !important; border-bottom: 0; } -#mastodon .compose-form .compose-form__buttons-wrapper { +.compose-form .compose-form__buttons-wrapper { border-radius: 0 0 var(--radius) var(--radius) !important; } -#mastodon .compose-form .compose-form__publish-button-wrapper { +.compose-form .compose-form__publish-button-wrapper { overflow: visible !important; max-width: 100%; padding: 0; } -#mastodon .compose-form .compose-form__upload__actions { +.compose-form .compose-form__upload__actions { z-index: 5; position: relative; } -#mastodon .compose-form .compose-form__upload__actions button { +.compose-form .compose-form__upload__actions button { background: none; } -#mastodon .compose-form .compose-form__upload__thumbnail { +.compose-form .compose-form__upload__thumbnail { display: flex; flex-direction: column; } -#mastodon .compose-form .compose-form__upload__warning { +.compose-form .compose-form__upload__warning { position: relative; flex-grow: 1; display: flex; } -#mastodon .compose-form .compose-form__upload__warning button { +.compose-form .compose-form__upload__warning button { margin-top: auto; } -#mastodon .compose-form .compose-form__upload__warning button.active { +.compose-form .compose-form__upload__warning button.active { box-shadow: 0 0 0 100px rgba(0,0,0,0.75); width: 100%; height: 100%; @@ -647,61 +568,61 @@ a:focus-visible, color: inherit; transition: background 0.2s, transform 0.2s cubic-bezier(0, 0, 0, 1) !important; } -#mastodon .compose-form .compose-form__upload__warning button.active svg { +.compose-form .compose-form__upload__warning button.active svg { height: 1.2em; width: 1.2em; } -#mastodon .compose-form .compose-form__upload__warning button.active:hover, -#mastodon .compose-form .compose-form__upload__warning button.active:focus { +.compose-form .compose-form__upload__warning button.active:hover, +.compose-form .compose-form__upload__warning button.active:focus { background: rgba(20,20,20,0.75); } -#mastodon .compose-form__highlightable { +.compose-form__highlightable { border-radius: var(--radius); overflow: visible !important; } -#mastodon .compose-form__highlightable #cw-spoiler-input { +.compose-form__highlightable #cw-spoiler-input { border-radius: 0 !important; } -#mastodon .compose-form__highlightable textarea { +.compose-form__highlightable textarea { background: none !important; } -#mastodon .compose-form__highlightable > .compose-form__footer { +.compose-form__highlightable > .compose-form__footer { gap: 12px; } -#mastodon .compose-form__highlightable > .compose-form__footer .compose-form__dropdowns { +.compose-form__highlightable > .compose-form__footer .compose-form__dropdowns { max-width: calc(100% - 7ch); } -#mastodon .compose-form__highlightable > .compose-form__footer .compose-form__actions { +.compose-form__highlightable > .compose-form__footer .compose-form__actions { position: relative; } -#mastodon .compose-form__highlightable > .compose-form__footer .compose-form__buttons { +.compose-form__highlightable > .compose-form__footer .compose-form__buttons { display: flex; flex-wrap: wrap; flex-direction: row; gap: 0; flex-grow: 9999; } -#mastodon .compose-form__highlightable > .compose-form__footer .compose-form__buttons > * { +.compose-form__highlightable > .compose-form__footer .compose-form__buttons * { + display: flex; flex-grow: 1; - box-sizing: border-box; } -#mastodon .compose-form__highlightable > .compose-form__footer .compose-form__buttons button { +.compose-form__highlightable > .compose-form__footer .compose-form__buttons label { + display: none; +} +.compose-form__highlightable > .compose-form__footer .compose-form__buttons button { flex-grow: 1; padding: 5px; } -#mastodon .compose-form__highlightable > .compose-form__footer .compose-form__submit button { +.compose-form__highlightable > .compose-form__footer .compose-form__submit button { padding: 8px 16px; } -#mastodon .compose-form__highlightable > .compose-form__footer .character-counter { +.compose-form__highlightable > .compose-form__footer .character-counter { position: absolute; inset-inline-end: 0; bottom: calc(100% + 12px); padding: 4px; font-size: 13px; } -.server-banner { - padding: 10px; -} .server-banner .server-banner__hero { border-radius: var(--radius); width: 100%; @@ -753,18 +674,17 @@ a:focus-visible, margin-inline: 5px; position: relative; } -.navigation-panel__sign-in-banner .sign-in-banner p { - line-height: 1.5; -} -.navigation-panel__sign-in-banner .sign-in-banner > :last-child { - margin-bottom: 0; -} -#mastodon .link-footer { +.link-footer { margin-top: 20px; } -#mastodon .link-footer > p:last-child { +.link-footer > p:last-child { margin-bottom: 0; } +.columns-area { + box-shadow: var(--column-shadow); + padding: 0; + overflow: visible; +} .columns-area__panels__main { overflow: visible !important; transition: max-width 0.2s cubic-bezier(0, 0, 0, 1.1), margin 0.2s cubic-bezier(0, 0, 0, 1.1); @@ -773,14 +693,13 @@ a:focus-visible, .columns-area__panels__main { width: 0; flex-grow: 1; - padding-inline: 10px; + margin-inline: 10px; + max-width: var(--tl-width) !important; } } @media (min-width: 1320px) { .columns-area__panels__main { - max-width: var(--tl-width) !important; - padding: 0 15px; - margin: 0 10px; + margin: 0 20px; } } @media (min-width: 890px) { @@ -790,6 +709,7 @@ a:focus-visible, } .columns-area__panels__main .column, .columns-area__panels__main .columns-area { + grid-column: 1; overflow: clip !important; border-radius: var(--radius) var(--radius) 0 0 !important; } @@ -801,2217 +721,294 @@ a:focus-visible, .columns-area__panels__main > div { grid-row: 1; } -.columns-area__panels__main :not(.scrollable--flex) > .scrollable { - padding-bottom: 40vh !important; -} -#mastodon .column { +.column { background: var(--background-color); + overflow: clip; } -#mastodon .column::before { +.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; -} -#mastodon .scrollable:not(.scrollable--flex), -#mastodon .activity-stream { - contain: unset !important; -} -#mastodon .scrollable:not(.scrollable--flex):not(.activity-stream):not(.privacy-policy), -#mastodon .activity-stream:not(.activity-stream):not(.privacy-policy) { - padding: 10px; -} -#mastodon .scrollable:not(.scrollable--flex) > [tabindex]:first-child > .focusable, -#mastodon .activity-stream > [tabindex]:first-child > .focusable { - margin-top: 0 !important; -} -#mastodon .search-results__section__header { - margin: 0px -10px 10px; - color: unset; - background: none; - padding-inline: 20px; - font-weight: 600; -} -#mastodon .search-results__section { - border: 0; - margin-bottom: 20px; -} -#mastodon .dismissable-banner, -#mastodon .follow_requests-unlocked_explanation { - display: flex; - align-items: center; - border: 0 !important; - margin: -10px !important; - margin-bottom: 10px !important; - border-radius: 0px !important; - padding: 15px !important; - height: max-content; - isolation: isolate; - overflow: hidden; -} -.dismissable-banner__message { - padding-block: 10px; - order: -1; -} -#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, -#mastodon .dismissable-banner .scrollable:not(.scrollable--flex) .dismissable-banner, -#mastodon .follow_requests-unlocked_explanation .scrollable:not(.scrollable--flex) .dismissable-banner { - margin: 0px !important; -} -#mastodon .dismissable-banner .focusable, -#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 { - margin: 0 !important; -} -#mastodon .column:not(.scrollable--flex) > .dismissable-banner ~ .scrollable { - border-radius: 0 !important; -} -#mastodon :not(.account__section-headline) + .scrollable > .dismissable-banner { - margin: 0px !important; - margin-bottom: 0 !important; -} -#mastodon .empty-column-indicator { - contain: unset; - padding: 10px !important; - color: unset; - opacity: 0.8; - font-size: 1.2em; - line-height: 2; -} -#mastodon .empty-column-indicator a { - display: block; - font-weight: 700; - font-size: 1.1em; -} -#mastodon .scrollable--flex .account-timeline__header { - margin: 0 !important; -} -#mastodon .item-list { - background-color: inherit; - border-radius: var(--radius); -} -#mastodon .account-timeline__header { - margin: -10px; - margin-bottom: 10px; - background-color: inherit; - border-radius: var(--radius) !important; - animation: fade backwards 0.4s cubic-bezier(0, 1, 1, 1); -} -#mastodon .account-timeline__header .account__moved-note { - box-sizing: border-box; - border-radius: var(--radius); - margin-bottom: calc(0px - var(--radius)); - padding: 30px; - padding-bottom: calc(var(--radius) + 30px); - background: inherit; -} -#mastodon .account-timeline__header .account__moved-note .detailed-status__display-name { - overflow: visible !important; -} -#mastodon .account-timeline__header .account__header { - overflow: visible !important; - border-radius: var(--radius) var(--radius) 0 0; - background: inherit; -} -#mastodon .account-timeline__header .account__header__info { - z-index: 2; -} -#mastodon .account-timeline__header .account__header__image { - height: 0; - padding-bottom: 35%; - border-radius: var(--radius) var(--radius) 0 0; - position: sticky; - top: calc(0px - var(--radius)); - overflow: clip; -} -#mastodon .account-timeline__header .account__header__image img { - position: absolute; -} -#mastodon .account-timeline__header .account__header__image .account__header__info { - height: 100%; -} -#mastodon .account-timeline__header .account__header__image .account__header__info > span { - position: sticky; - top: var(--radius); -} -#mastodon .account-timeline__header .account__header__bar { - position: relative; - z-index: 2; - border: 0; - padding-inline: 20px; - border-radius: var(--radius) var(--radius) 0 0; - margin-top: calc(0px - var(--radius)) !important; - display: flex; - flex-direction: column; - background: var(--background-color); - isolation: isolate; -} -@media (max-width: 890px) { - #mastodon .account-timeline__header .account__header__bar { - padding-inline: 15px; - } -} -#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; - height: 95px; - background: inherit; - z-index: -1; - border-radius: var(--radius); - mask: linear-gradient(to bottom, transparent, #000); -} -#mastodon .account-timeline__header .account__header__bar .account__header__tabs { - overflow: visible !important; - align-items: flex-end; - padding: 0; - height: unset !important; - margin-top: -55px !important; -} -#mastodon .account-timeline__header .account__header__bar .account__header__tabs::before { - content: ""; - position: absolute; - top: -55px; - inset-inline: 0; - height: 150px; - backdrop-filter: blur(40px); - filter: brightness(1.1); - pointer-events: none; - opacity: 0.7; - z-index: -2; - clip-path: inset(55px 0 0 0 round var(--radius)); -} -#mastodon .account-timeline__header .account__header__bar .account__header__tabs ~ div { - z-index: 2; -} -#mastodon .account-timeline__header .account__header__bar .avatar { - margin-inline-start: 0 !important; - overflow: visible !important; - position: relative; - margin-top: 20px; -} -#mastodon .account-timeline__header .account__header__bar .avatar .account-role { - position: absolute; - bottom: 0; - left: 110%; - border-radius: var(--radius); -} -#mastodon .account-timeline__header .account__header__bar .account__avatar { - border: 0; - box-shadow: var(--shadow); - background: none; - background-size: cover !important; -} -#mastodon .account-timeline__header .account__header__tabs__name { - margin-bottom: 0; - padding: 0; - margin-top: 16px; -} -#mastodon .account-timeline__header .account__header__tabs__name h1 { - display: flex; - flex-wrap: wrap; - white-space: unset; - gap: 0 0.4em; - font-weight: 600; -} -#mastodon .account-timeline__header .account__header__extra { - margin-top: 5px; -} -#mastodon .account-timeline__header .account__header__bio { - margin: 0; -} -#mastodon .account-timeline__header .account__header__bio > * { - padding-inline: 0; -} -#mastodon .account-timeline__header .account__header__bio .account__header__content { - padding: 0px; -} -#mastodon .account-timeline__header .account__header__badges { - margin-top: 10px; -} -#mastodon .account-timeline__header .account__header__badges span { - font-weight: 600; -} -#mastodon .account__header__fields, -#mastodon .account__header__account-note { - display: flex; - flex-wrap: wrap; - gap: 2px; - background: none; - border-radius: var(--radius); - overflow: hidden; - width: max-content; - max-width: 100%; - border: 0; -} -#mastodon .account__header__fields:first-child, -#mastodon .account__header__account-note:first-child { - margin-block: 5px 15px; -} -#mastodon .account__header__fields dl, -#mastodon .account__header__account-note dl { - display: inline; - border-radius: 0; - overflow: hidden; - border: 0; - padding: 8px 12px !important; - position: relative; - overflow: hidden; - flex-grow: 1; -} -#mastodon .account__header__fields dl:not(.verified), -#mastodon .account__header__account-note dl:not(.verified) { - background-color: var(--elevated-color); -} -#mastodon .account__header__fields dl dt, -#mastodon .account__header__account-note dl dt { - all: unset; - color: unset; - opacity: 0.9; -} -#mastodon .account__header__fields dl dd, -#mastodon .account__header__account-note dl dd { - padding: 0; - white-space: unset; - max-height: unset; - text-align: unset; -} -#mastodon .account__header__fields dl dd > span > a:first-child:last-child::after, -#mastodon .account__header__account-note dl dd > span > a:first-child:last-child::after, -#mastodon .account__header__fields dl dd .h-card:first-child:last-child a::after, -#mastodon .account__header__account-note dl dd .h-card:first-child:last-child a::after { - content: ""; - position: absolute; - inset: 0; - background-color: var(--hover-color); - opacity: 0; - transition: opacity 0.2s; -} -#mastodon .account__header__fields dl dd > span > a:first-child:last-child:hover:after, -#mastodon .account__header__account-note dl dd > span > a:first-child:last-child:hover:after, -#mastodon .account__header__fields dl dd .h-card:first-child:last-child a:hover:after, -#mastodon .account__header__account-note dl dd .h-card:first-child:last-child a:hover:after, -#mastodon .account__header__fields dl dd > span > a:first-child:last-child:focus:after, -#mastodon .account__header__account-note dl dd > span > a:first-child:last-child:focus:after, -#mastodon .account__header__fields dl dd .h-card:first-child:last-child a:focus:after, -#mastodon .account__header__account-note dl dd .h-card:first-child:last-child a:focus:after { - opacity: 1; -} -#mastodon .account__header__fields dl dd.verified, -#mastodon .account__header__account-note dl dd.verified { - overflow: visible !important; - border: 0; - background: none; -} -#mastodon .account__header__fields dl dd.verified a::before, -#mastodon .account__header__account-note dl dd.verified a::before, -#mastodon .account__header__fields dl dd.verified a::after, -#mastodon .account__header__account-note dl dd.verified a::after { - content: ""; - position: absolute; - inset: 0; - background: currentcolor; - opacity: 0.2; -} -#mastodon .account__header__fields dl dd.verified a::after, -#mastodon .account__header__account-note dl dd.verified a::after { - background: linear-gradient(20deg, currentcolor, transparent) !important; - opacity: 0.2 !important; - z-index: -2; -} -#mastodon .account__header__fields.account__header__account-note, -#mastodon .account__header__account-note.account__header__account-note { - display: flex; - margin-bottom: 10px !important; - gap: 0; - border: 0; - padding: 0 !important; - margin-inline: 0 !important; - background: none !important; - border-radius: 8px; - font-size: 12px; - width: unset; -} -#mastodon .account__header__fields.account__header__account-note label, -#mastodon .account__header__account-note.account__header__account-note label { - z-index: 2; - padding: 0 !important; - padding-inline-end: 0.7em !important; - pointer-events: none; - line-height: inherit; - font-size: inherit; - font-weight: inherit; - vertical-align: unset; -} -#mastodon .account__header__fields.account__header__account-note:focus-within, -#mastodon .account__header__account-note.account__header__account-note:focus-within { - padding: 0.5em 0.7em !important; - margin-inline: -5px !important; - border: 1px solid; -} -#mastodon .account__header__fields.account__header__account-note:not(:focus-within), -#mastodon .account__header__account-note.account__header__account-note:not(:focus-within) { - border-radius: 0; - border-bottom: 1px solid; - padding-bottom: 0.4em !important; -} -#mastodon .account__header__fields.account__header__account-note textarea, -#mastodon .account__header__account-note.account__header__account-note textarea { - width: 0; - flex-grow: 1; - margin: 0 !important; - border-radius: 0; - padding: 0; - margin: -100px !important; - padding: 100px !important; - padding-inline-end: 0.7em !important; - margin-inline-end: -0.7em !important; - line-height: inherit; - font-size: inherit; - font-weight: inherit; - vertical-align: unset; - background: none; -} -#mastodon .account__header__fields.account__header__account-note textarea::placeholder, -#mastodon .account__header__account-note.account__header__account-note textarea::placeholder { - font-weight: 600; -} -#mastodon .account__header__fields.account__header__account-note label, -#mastodon .account__header__account-note.account__header__account-note label { - margin: 0; - font-weight: 600; - padding-inline: 14px; -} -#mastodon :not(.explore__search-header) + .account__section-headline:not(:first-child) { - background: none; - position: relative; - z-index: 2; -} -.with-modals #mastodon :not(.explore__search-header) + .account__section-headline:not(:first-child) { - border: 0 !important; -} -#mastodon :not(.explore__search-header) + .account__section-headline:not(:first-child) a, -#mastodon :not(.explore__search-header) + .account__section-headline:not(:first-child) button { - background: none; - border-radius: 0 !important; -} -#mastodon :not(.explore__search-header) + .account__section-headline:not(:first-child) a span, -#mastodon :not(.explore__search-header) + .account__section-headline:not(:first-child) button span { - font-weight: 400; - opacity: 0.7; - transition: opacity 0.2s; -} -#mastodon :not(.explore__search-header) + .account__section-headline:not(:first-child) a.active span, -#mastodon :not(.explore__search-header) + .account__section-headline:not(:first-child) button.active span { - font-weight: 700; - opacity: 1; -} -#mastodon :not(.explore__search-header) + .account__section-headline:not(:first-child) a:hover span, -#mastodon :not(.explore__search-header) + .account__section-headline:not(:first-child) button:hover span, -#mastodon :not(.explore__search-header) + .account__section-headline:not(:first-child) a:active span, -#mastodon :not(.explore__search-header) + .account__section-headline:not(:first-child) button:active span { - opacity: 1 !important; -} -#mastodon :not(.explore__search-header) + .account__section-headline:not(:first-child) a::before, -#mastodon :not(.explore__search-header) + .account__section-headline:not(:first-child) button::before { - border-color: transparent transparent var(--border-color); -} -#mastodon .account__disclaimer { - border-top: 1px solid; -} -#mastodon .account-gallery__container { - border-radius: var(--radius); - overflow: clip; - padding: 0; - margin: 4px; - gap: 4px; - margin-bottom: calc(-40vh + 4px); -} -.account-gallery__item { - margin: 0; - flex: 1 1 calc(100px + 15%); - transition: flex 0.7s cubic-bezier(0, 0, 0, 1); - min-height: 180px !important; -} -.media-gallery__item-thumbnail { - transition: transform 0.2s; -} -.account-gallery__item:hover, -.account-gallery__item:focus-within { - flex-grow: 1.5; -} -.account-gallery__item:hover .media-gallery__item-thumbnail, -.account-gallery__item:focus-within .media-gallery__item-thumbnail { - transform: scale(1.02); -} -#mastodon .account-gallery__container > button { - width: unset; - flex-grow: 1; - flex: 1 1 calc(100px + 15% - 24px); - margin: 12px; - font-size: 1.2em; - font-weight: 700; - background: var(--elevated-color); - color: inherit; -} -#mastodon .account-gallery__container > button:hover:not(:focus) { - transform: scale(1.01); -} -@media (max-width: 890px) { - #mastodon #Follow-requests.column-header { - display: none; - } -} @media (min-width: 890px) { - #mastodon #Follow-requests ~ .scrollable .item-list { - display: grid; - align-items: stretch; - grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); - gap: 0 10px; - } - #mastodon #Follow-requests ~ .scrollable .item-list > article { - display: flex; - } -} -.layout-multiple-columns article:first-child .account-authorize__wrapper { - margin-top: 10px; -} -@media (max-width: 890px) { - #mastodon article:first-child .account-authorize__wrapper { + .layout-single-column .scrollable > [tabindex="-1"]:first-child { margin-top: 10px; } -} -#mastodon .account-authorize__wrapper { - background: var(--elevated-color); - border-radius: var(--radius); - overflow: hidden; - flex-grow: 1; - margin-bottom: 10px; - display: flex; - flex-direction: column; -} -@media (max-width: 890px) { - #mastodon .account-authorize__wrapper { - margin-inline: 10px; + .layout-single-column .item-list > article:first-of-type { + margin-top: 10px; + } + .layout-single-column .load-more, + .layout-single-column .trends__item, + .layout-single-column .focusable, + .layout-single-column .entry, + .layout-single-column .statuses-grid__item .detailed-status, + .layout-single-column .story, + .layout-single-column .account-card, + .layout-single-column .scrollable :not(.focusable) > .account:not(.account--minimal), + .layout-single-column .timeline-hint { + margin-inline: 10px !important; + max-width: calc(100% - 20px); } } -.layout-multiple-columns #mastodon .account-authorize__wrapper { - margin-inline: 10px; +.scrollable { + padding-bottom: 40vh !important; } -#mastodon .account-authorize__wrapper .account-authorize { - padding: 20px 15px 10px; -} -#mastodon .account-authorize__wrapper .detailed-status__display-name { - margin-bottom: 10px !important; -} -#mastodon .account-authorize__wrapper .account--panel { - margin-top: auto; - border-bottom: 0; - padding-inline: 15px; - gap: 10px; +.empty-column-indicator, +.error-column { background: none; } -#mastodon .account-authorize__wrapper br { - display: block; -} -#mastodon .account-authorize__wrapper p { - margin-bottom: 0.2em; -} -#mastodon .account-authorize__wrapper .account--panel__button:first-child .icon-button:not(:hover):not(:focus) { - background: var(--elevated-color); -} -#mastodon .account-authorize__wrapper .icon-button { - width: 100% !important; - padding: 10px; - height: unset !important; -} -#mastodon .account-card { - display: flex; - flex-direction: column; - max-height: 360px; - margin: 0; - border-radius: var(--radius) !important; - background: var(--elevated-color); - box-shadow: none !important; - box-shadow: var(--shadow); -} -.explore__suggestions, -.directory__list { - padding: 15px; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 10px; -} -.explore__suggestions.directory__list, -.directory__list.directory__list { - padding: 15px 10px; -} -.layout-multiple-columns .explore__suggestions, -.layout-multiple-columns .directory__list { - display: block; -} -.layout-multiple-columns .explore__suggestions > *, -.layout-multiple-columns .directory__list > * { - margin: 10px !important; -} -@media (max-width: 890px) { - .explore__suggestions, - .directory__list { - gap: 0 !important; - } - .explore__suggestions > *, - .directory__list > * { - margin: 10px !important; - } -} -#mastodon .account-card .account-card__header { - padding: 0 !important; -} -#mastodon .account-card .account-card__title { - margin-bottom: 10px; - margin-top: -24px; -} -#mastodon .account-card .account-card__title__avatar { - padding-inline-end: 10px; - padding-bottom: 0; -} -#mastodon .account-card .display-name { - padding-bottom: 0; -} -#mastodon .account-card .display-name__account { - font-size: 0.9em !important; -} -#mastodon .account-card .account-card__title__avatar .account__avatar, -#mastodon .account-card .account-card__title__avatar { - width: 64px !important; - height: 64px !important; - background-size: 64px 64px !important; -} -#mastodon .account-card .account-card__title__avatar .account__avatar img, -#mastodon .account-card .account-card__title__avatar img { - width: inherit; - height: inherit; -} -#mastodon .account-card .account-card__title { - padding-inline-end: 15px; -} -#mastodon .account-card .display-name bdi { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} -#mastodon .account-card .account-card__bio { - margin-top: 0 !important; - max-height: unset; - mask: linear-gradient(#000 65px, rgba(0,0,0,0.5), transparent); - -webkit-mask: linear-gradient(#000 65px, rgba(0,0,0,0.5), transparent); - flex-grow: 1; - margin-bottom: -50px; - margin-bottom: -15px; - font-size: 1em; - padding-bottom: 60px; -} -#mastodon .account-card .account-card__bio::after { - content: unset !important; -} -#mastodon .account-card .account-card__bio br { - display: block; -} -#mastodon .account-card .account-card__actions { - margin-top: auto !important; - display: unset !important; -} -#mastodon .account-card .account-card__actions .account-card__counters { - display: flex; - gap: 1em; - padding-inline: 15px; -} -#mastodon .account-card .account-card__actions .account-card__counters__item { +.dismissable-banner { display: flex; align-items: center; - font-size: 1em; -} -#mastodon .account-card .account-card__actions .account-card__counters__item > small { - display: inline !important; - margin-inline-start: 0.4em; - font-size: 1em !important; -} -#mastodon .account-card .account-card__actions .account-card__actions__button { - position: absolute; - top: 10px; - right: 10px; - padding: 0; - background: rgba(0,0,0,0.4); - border-radius: var(--radius-round); - padding: 4px; - box-shadow: 0 4px 12px rgba(0,0,0,0.2); -} -#mastodon .account-card .account-card__actions .account-card__actions__button button, -#mastodon .account-card .account-card__actions .account-card__actions__button a { - border-radius: var(--radius-round) !important; - padding: 0.7em 1.7em; - min-height: unset; - font-size: 14px !important; - line-height: 1.2; - font-size: 1em !important; -} -#mastodon .account-card .account-card__actions .account-card__actions__button:empty { - display: none; -} -#mastodon .account-card::after { - content: unset !important; -} -#mastodon .account__wrapper { - gap: 15px; - flex-wrap: wrap; -} -#mastodon .account__wrapper .account__display-name { - flex-grow: 100; -} -#mastodon .account__wrapper .account__contents { - line-height: 1.4; - flex-basis: 70%; - width: 100px; - flex-grow: 100; - display: flex; - align-items: center; - justify-content: space-between; - gap: 0 20px; - flex-wrap: wrap; -} -#mastodon .account__wrapper .account__contents * { - line-height: unset !important; -} -#mastodon .account__wrapper .account__contents .display-name { - height: unset; + flex-direction: row-reverse; + gap: 20px; margin: 0; - width: 27ch !important; - flex-grow: 1; -} -#mastodon .account__wrapper .account__contents .display-name span { - display: block; -} -#mastodon .account__wrapper .account__contents .account__details { - flex-direction: column; - width: 25ch; -} -#mastodon .account__wrapper .account__contents .account__details span { - white-space: break-spaces !important; -} -#mastodon .account__wrapper .account__contents .account__details:has(.verified-badge) > span:first-child { - display: none; -} -#mastodon .account__wrapper .account__relationship { - display: flex !important; - flex-wrap: wrap; - justify-content: flex-end; - min-width: 10ch; - gap: 10px; - flex-grow: 1; -} -#mastodon .account__wrapper .account__relationship button { - background: var(--elevated-color); - color: inherit; -} -#mastodon .scrollable > div:first-child > [tabindex="-1"]:last-child .status__wrapper::after { - content: unset; -} -.focusable, -.entry, -.statuses-grid__item .detailed-status, -.trends__item, -.story, -.account-card, -.scrollable :not(.focusable) > .account, -.timeline-hint { - overflow: hidden; - transition: background 0.2s, box-shadow 0.4s, border 0.2s; - animation: fade 0.4s backwards cubic-bezier(0, 1, 1, 1); - position: relative; - border-radius: var(--radius); -} -.focusable.trends__item, -.entry.trends__item, -.statuses-grid__item .detailed-status.trends__item, -.trends__item.trends__item, -.story.trends__item, -.account-card.trends__item, -.scrollable :not(.focusable) > .account.trends__item, -.timeline-hint.trends__item, -.focusable.story, -.entry.story, -.statuses-grid__item .detailed-status.story, -.trends__item.story, -.story.story, -.account-card.story, -.scrollable :not(.focusable) > .account.story, -.timeline-hint.story, -.focusable.account-card, -.entry.account-card, -.statuses-grid__item .detailed-status.account-card, -.trends__item.account-card, -.story.account-card, -.account-card.account-card, -.scrollable :not(.focusable) > .account.account-card, -.timeline-hint.account-card { - animation: slideUpFade backwards 0.44s cubic-bezier(0, 1, 1, 1); -} -.focusable.trends__item:nth-child(1), -.entry.trends__item:nth-child(1), -.statuses-grid__item .detailed-status.trends__item:nth-child(1), -.trends__item.trends__item:nth-child(1), -.story.trends__item:nth-child(1), -.account-card.trends__item:nth-child(1), -.scrollable :not(.focusable) > .account.trends__item:nth-child(1), -.timeline-hint.trends__item:nth-child(1), -.focusable.story:nth-child(1), -.entry.story:nth-child(1), -.statuses-grid__item .detailed-status.story:nth-child(1), -.trends__item.story:nth-child(1), -.story.story:nth-child(1), -.account-card.story:nth-child(1), -.scrollable :not(.focusable) > .account.story:nth-child(1), -.timeline-hint.story:nth-child(1), -.focusable.account-card:nth-child(1), -.entry.account-card:nth-child(1), -.statuses-grid__item .detailed-status.account-card:nth-child(1), -.trends__item.account-card:nth-child(1), -.story.account-card:nth-child(1), -.account-card.account-card:nth-child(1), -.scrollable :not(.focusable) > .account.account-card:nth-child(1), -.timeline-hint.account-card:nth-child(1) { - animation-delay: 0.04s; -} -.focusable.trends__item:nth-child(2), -.entry.trends__item:nth-child(2), -.statuses-grid__item .detailed-status.trends__item:nth-child(2), -.trends__item.trends__item:nth-child(2), -.story.trends__item:nth-child(2), -.account-card.trends__item:nth-child(2), -.scrollable :not(.focusable) > .account.trends__item:nth-child(2), -.timeline-hint.trends__item:nth-child(2), -.focusable.story:nth-child(2), -.entry.story:nth-child(2), -.statuses-grid__item .detailed-status.story:nth-child(2), -.trends__item.story:nth-child(2), -.story.story:nth-child(2), -.account-card.story:nth-child(2), -.scrollable :not(.focusable) > .account.story:nth-child(2), -.timeline-hint.story:nth-child(2), -.focusable.account-card:nth-child(2), -.entry.account-card:nth-child(2), -.statuses-grid__item .detailed-status.account-card:nth-child(2), -.trends__item.account-card:nth-child(2), -.story.account-card:nth-child(2), -.account-card.account-card:nth-child(2), -.scrollable :not(.focusable) > .account.account-card:nth-child(2), -.timeline-hint.account-card:nth-child(2) { - animation-delay: 0.08s; -} -.focusable.trends__item:nth-child(3), -.entry.trends__item:nth-child(3), -.statuses-grid__item .detailed-status.trends__item:nth-child(3), -.trends__item.trends__item:nth-child(3), -.story.trends__item:nth-child(3), -.account-card.trends__item:nth-child(3), -.scrollable :not(.focusable) > .account.trends__item:nth-child(3), -.timeline-hint.trends__item:nth-child(3), -.focusable.story:nth-child(3), -.entry.story:nth-child(3), -.statuses-grid__item .detailed-status.story:nth-child(3), -.trends__item.story:nth-child(3), -.story.story:nth-child(3), -.account-card.story:nth-child(3), -.scrollable :not(.focusable) > .account.story:nth-child(3), -.timeline-hint.story:nth-child(3), -.focusable.account-card:nth-child(3), -.entry.account-card:nth-child(3), -.statuses-grid__item .detailed-status.account-card:nth-child(3), -.trends__item.account-card:nth-child(3), -.story.account-card:nth-child(3), -.account-card.account-card:nth-child(3), -.scrollable :not(.focusable) > .account.account-card:nth-child(3), -.timeline-hint.account-card:nth-child(3) { - animation-delay: 0.12s; -} -.focusable.trends__item:nth-child(4), -.entry.trends__item:nth-child(4), -.statuses-grid__item .detailed-status.trends__item:nth-child(4), -.trends__item.trends__item:nth-child(4), -.story.trends__item:nth-child(4), -.account-card.trends__item:nth-child(4), -.scrollable :not(.focusable) > .account.trends__item:nth-child(4), -.timeline-hint.trends__item:nth-child(4), -.focusable.story:nth-child(4), -.entry.story:nth-child(4), -.statuses-grid__item .detailed-status.story:nth-child(4), -.trends__item.story:nth-child(4), -.story.story:nth-child(4), -.account-card.story:nth-child(4), -.scrollable :not(.focusable) > .account.story:nth-child(4), -.timeline-hint.story:nth-child(4), -.focusable.account-card:nth-child(4), -.entry.account-card:nth-child(4), -.statuses-grid__item .detailed-status.account-card:nth-child(4), -.trends__item.account-card:nth-child(4), -.story.account-card:nth-child(4), -.account-card.account-card:nth-child(4), -.scrollable :not(.focusable) > .account.account-card:nth-child(4), -.timeline-hint.account-card:nth-child(4) { - animation-delay: 0.16s; -} -.focusable.trends__item:nth-child(5), -.entry.trends__item:nth-child(5), -.statuses-grid__item .detailed-status.trends__item:nth-child(5), -.trends__item.trends__item:nth-child(5), -.story.trends__item:nth-child(5), -.account-card.trends__item:nth-child(5), -.scrollable :not(.focusable) > .account.trends__item:nth-child(5), -.timeline-hint.trends__item:nth-child(5), -.focusable.story:nth-child(5), -.entry.story:nth-child(5), -.statuses-grid__item .detailed-status.story:nth-child(5), -.trends__item.story:nth-child(5), -.story.story:nth-child(5), -.account-card.story:nth-child(5), -.scrollable :not(.focusable) > .account.story:nth-child(5), -.timeline-hint.story:nth-child(5), -.focusable.account-card:nth-child(5), -.entry.account-card:nth-child(5), -.statuses-grid__item .detailed-status.account-card:nth-child(5), -.trends__item.account-card:nth-child(5), -.story.account-card:nth-child(5), -.account-card.account-card:nth-child(5), -.scrollable :not(.focusable) > .account.account-card:nth-child(5), -.timeline-hint.account-card:nth-child(5) { - animation-delay: 0.2s; -} -.focusable.trends__item:nth-child(6), -.entry.trends__item:nth-child(6), -.statuses-grid__item .detailed-status.trends__item:nth-child(6), -.trends__item.trends__item:nth-child(6), -.story.trends__item:nth-child(6), -.account-card.trends__item:nth-child(6), -.scrollable :not(.focusable) > .account.trends__item:nth-child(6), -.timeline-hint.trends__item:nth-child(6), -.focusable.story:nth-child(6), -.entry.story:nth-child(6), -.statuses-grid__item .detailed-status.story:nth-child(6), -.trends__item.story:nth-child(6), -.story.story:nth-child(6), -.account-card.story:nth-child(6), -.scrollable :not(.focusable) > .account.story:nth-child(6), -.timeline-hint.story:nth-child(6), -.focusable.account-card:nth-child(6), -.entry.account-card:nth-child(6), -.statuses-grid__item .detailed-status.account-card:nth-child(6), -.trends__item.account-card:nth-child(6), -.story.account-card:nth-child(6), -.account-card.account-card:nth-child(6), -.scrollable :not(.focusable) > .account.account-card:nth-child(6), -.timeline-hint.account-card:nth-child(6) { - animation-delay: 0.24s; -} -.focusable.trends__item:nth-child(7), -.entry.trends__item:nth-child(7), -.statuses-grid__item .detailed-status.trends__item:nth-child(7), -.trends__item.trends__item:nth-child(7), -.story.trends__item:nth-child(7), -.account-card.trends__item:nth-child(7), -.scrollable :not(.focusable) > .account.trends__item:nth-child(7), -.timeline-hint.trends__item:nth-child(7), -.focusable.story:nth-child(7), -.entry.story:nth-child(7), -.statuses-grid__item .detailed-status.story:nth-child(7), -.trends__item.story:nth-child(7), -.story.story:nth-child(7), -.account-card.story:nth-child(7), -.scrollable :not(.focusable) > .account.story:nth-child(7), -.timeline-hint.story:nth-child(7), -.focusable.account-card:nth-child(7), -.entry.account-card:nth-child(7), -.statuses-grid__item .detailed-status.account-card:nth-child(7), -.trends__item.account-card:nth-child(7), -.story.account-card:nth-child(7), -.account-card.account-card:nth-child(7), -.scrollable :not(.focusable) > .account.account-card:nth-child(7), -.timeline-hint.account-card:nth-child(7) { - animation-delay: 0.28s; -} -.focusable.trends__item:nth-child(8), -.entry.trends__item:nth-child(8), -.statuses-grid__item .detailed-status.trends__item:nth-child(8), -.trends__item.trends__item:nth-child(8), -.story.trends__item:nth-child(8), -.account-card.trends__item:nth-child(8), -.scrollable :not(.focusable) > .account.trends__item:nth-child(8), -.timeline-hint.trends__item:nth-child(8), -.focusable.story:nth-child(8), -.entry.story:nth-child(8), -.statuses-grid__item .detailed-status.story:nth-child(8), -.trends__item.story:nth-child(8), -.story.story:nth-child(8), -.account-card.story:nth-child(8), -.scrollable :not(.focusable) > .account.story:nth-child(8), -.timeline-hint.story:nth-child(8), -.focusable.account-card:nth-child(8), -.entry.account-card:nth-child(8), -.statuses-grid__item .detailed-status.account-card:nth-child(8), -.trends__item.account-card:nth-child(8), -.story.account-card:nth-child(8), -.account-card.account-card:nth-child(8), -.scrollable :not(.focusable) > .account.account-card:nth-child(8), -.timeline-hint.account-card:nth-child(8) { - animation-delay: 0.32s; -} -.focusable.trends__item:nth-child(9), -.entry.trends__item:nth-child(9), -.statuses-grid__item .detailed-status.trends__item:nth-child(9), -.trends__item.trends__item:nth-child(9), -.story.trends__item:nth-child(9), -.account-card.trends__item:nth-child(9), -.scrollable :not(.focusable) > .account.trends__item:nth-child(9), -.timeline-hint.trends__item:nth-child(9), -.focusable.story:nth-child(9), -.entry.story:nth-child(9), -.statuses-grid__item .detailed-status.story:nth-child(9), -.trends__item.story:nth-child(9), -.story.story:nth-child(9), -.account-card.story:nth-child(9), -.scrollable :not(.focusable) > .account.story:nth-child(9), -.timeline-hint.story:nth-child(9), -.focusable.account-card:nth-child(9), -.entry.account-card:nth-child(9), -.statuses-grid__item .detailed-status.account-card:nth-child(9), -.trends__item.account-card:nth-child(9), -.story.account-card:nth-child(9), -.account-card.account-card:nth-child(9), -.scrollable :not(.focusable) > .account.account-card:nth-child(9), -.timeline-hint.account-card:nth-child(9) { - animation-delay: 0.36s; -} -.focusable.trends__item:nth-child(10), -.entry.trends__item:nth-child(10), -.statuses-grid__item .detailed-status.trends__item:nth-child(10), -.trends__item.trends__item:nth-child(10), -.story.trends__item:nth-child(10), -.account-card.trends__item:nth-child(10), -.scrollable :not(.focusable) > .account.trends__item:nth-child(10), -.timeline-hint.trends__item:nth-child(10), -.focusable.story:nth-child(10), -.entry.story:nth-child(10), -.statuses-grid__item .detailed-status.story:nth-child(10), -.trends__item.story:nth-child(10), -.story.story:nth-child(10), -.account-card.story:nth-child(10), -.scrollable :not(.focusable) > .account.story:nth-child(10), -.timeline-hint.story:nth-child(10), -.focusable.account-card:nth-child(10), -.entry.account-card:nth-child(10), -.statuses-grid__item .detailed-status.account-card:nth-child(10), -.trends__item.account-card:nth-child(10), -.story.account-card:nth-child(10), -.account-card.account-card:nth-child(10), -.scrollable :not(.focusable) > .account.account-card:nth-child(10), -.timeline-hint.account-card:nth-child(10) { - animation-delay: 0.4s; -} -.focusable.trends__item:nth-child(11), -.entry.trends__item:nth-child(11), -.statuses-grid__item .detailed-status.trends__item:nth-child(11), -.trends__item.trends__item:nth-child(11), -.story.trends__item:nth-child(11), -.account-card.trends__item:nth-child(11), -.scrollable :not(.focusable) > .account.trends__item:nth-child(11), -.timeline-hint.trends__item:nth-child(11), -.focusable.story:nth-child(11), -.entry.story:nth-child(11), -.statuses-grid__item .detailed-status.story:nth-child(11), -.trends__item.story:nth-child(11), -.story.story:nth-child(11), -.account-card.story:nth-child(11), -.scrollable :not(.focusable) > .account.story:nth-child(11), -.timeline-hint.story:nth-child(11), -.focusable.account-card:nth-child(11), -.entry.account-card:nth-child(11), -.statuses-grid__item .detailed-status.account-card:nth-child(11), -.trends__item.account-card:nth-child(11), -.story.account-card:nth-child(11), -.account-card.account-card:nth-child(11), -.scrollable :not(.focusable) > .account.account-card:nth-child(11), -.timeline-hint.account-card:nth-child(11) { - animation-delay: 0.44s; -} -.focusable.focusable, -.entry.focusable, -.statuses-grid__item .detailed-status.focusable, -.trends__item.focusable, -.story.focusable, -.account-card.focusable, -.scrollable :not(.focusable) > .account.focusable, -.timeline-hint.focusable { - background: none; -} -.focusable.entry, -.entry.entry, -.statuses-grid__item .detailed-status.entry, -.trends__item.entry, -.story.entry, -.account-card.entry, -.scrollable :not(.focusable) > .account.entry, -.timeline-hint.entry { - margin-bottom: 10px; -} -.focusable:not(.detailed-status__wrapper)::before, -.entry:not(.detailed-status__wrapper)::before, -.statuses-grid__item .detailed-status:not(.detailed-status__wrapper)::before, -.trends__item:not(.detailed-status__wrapper)::before, -.story:not(.detailed-status__wrapper)::before, -.account-card:not(.detailed-status__wrapper)::before, -.scrollable :not(.focusable) > .account:not(.detailed-status__wrapper)::before, -.timeline-hint:not(.detailed-status__wrapper)::before { - content: ""; - position: absolute; - inset: 0px !important; - height: unset !important; - width: unset !important; - border-radius: var(--radius); - pointer-events: none; - transition: background-color 0.2s; -} -.focusable:not(.detailed-status__wrapper).unread::before, -.entry:not(.detailed-status__wrapper).unread::before, -.statuses-grid__item .detailed-status:not(.detailed-status__wrapper).unread::before, -.trends__item:not(.detailed-status__wrapper).unread::before, -.story:not(.detailed-status__wrapper).unread::before, -.account-card:not(.detailed-status__wrapper).unread::before, -.scrollable :not(.focusable) > .account:not(.detailed-status__wrapper).unread::before, -.timeline-hint:not(.detailed-status__wrapper).unread::before { - border-start-start-radius: 0 !important; - border-end-start-radius: 0 !important; -} -.focusable:not(.detailed-status__wrapper):hover::before, -.entry:not(.detailed-status__wrapper):hover::before, -.statuses-grid__item .detailed-status:not(.detailed-status__wrapper):hover::before, -.trends__item:not(.detailed-status__wrapper):hover::before, -.story:not(.detailed-status__wrapper):hover::before, -.account-card:not(.detailed-status__wrapper):hover::before, -.scrollable :not(.focusable) > .account:not(.detailed-status__wrapper):hover::before, -.timeline-hint:not(.detailed-status__wrapper):hover::before, -.focusable:not(.detailed-status__wrapper):focus-within::before, -.entry:not(.detailed-status__wrapper):focus-within::before, -.statuses-grid__item .detailed-status:not(.detailed-status__wrapper):focus-within::before, -.trends__item:not(.detailed-status__wrapper):focus-within::before, -.story:not(.detailed-status__wrapper):focus-within::before, -.account-card:not(.detailed-status__wrapper):focus-within::before, -.scrollable :not(.focusable) > .account:not(.detailed-status__wrapper):focus-within::before, -.timeline-hint:not(.detailed-status__wrapper):focus-within::before { - background-color: var(--hover-color); -} -.focusable:not(.detailed-status__wrapper):not(.status__wrapper), -.entry:not(.detailed-status__wrapper):not(.status__wrapper), -.statuses-grid__item .detailed-status:not(.detailed-status__wrapper):not(.status__wrapper), -.trends__item:not(.detailed-status__wrapper):not(.status__wrapper), -.story:not(.detailed-status__wrapper):not(.status__wrapper), -.account-card:not(.detailed-status__wrapper):not(.status__wrapper), -.scrollable :not(.focusable) > .account:not(.detailed-status__wrapper):not(.status__wrapper), -.timeline-hint:not(.detailed-status__wrapper):not(.status__wrapper) { - border-radius: var(--radius); + border-radius: 0; border: 0; + padding: 25px; } -.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; - inset-inline: var(--radius); - border-top: 1px solid var(--border-color); - pointer-events: none; +.dismissable-banner > div { + padding: 0; } -.status__wrapper-reply.status--in-thread::after { - top: 0; +.dismissable-banner button { + padding: 16px; + margin: -16px -14px; } -.status--in-thread.status__wrapper-reply:not(.status--first-in-thread)::after, -.status--in-thread:not(.status__wrapper-reply)::after { - border-top: 0 !important; -} -.explore__links { - padding: 10px !important; - display: flex; - flex-wrap: wrap; -} -.explore__links .trends__item { - margin: 7.5px; - padding: 25px !important; - box-shadow: var(--shadow-med); - width: 200px; - background: var(--elevated-color); -} -.explore__links .trends__item::after { - content: unset !important; - inset: 0 !important; - border-radius: var(--radius); - pointer-events: none; - border: 1px solid var(--border-color) !important; -} -.explore__links .trends__item a { - font-size: 1.4em; - line-height: 1.7em; -} -.explore__links .trends__item .trends__item__sparkline { - height: 100%; -} -.explore__links .trends__item .trends__item__sparkline svg { - height: 100%; - float: right; - overflow: visible !important; - position: relative; -} -.explore__links .trends__item .trends__item__sparkline svg path { - display: unset !important; - transition: transform 1s; -} -.explore__links .trends__item .trends__item__sparkline svg path:first-child { - transform-origin: center; -} -.explore__links .trends__item:hover svg path:first-child, -.explore__links .trends__item:focus-within svg path:first-child { - transform: scale(2); -} -.focusable.trends__item, -.entry.trends__item, -.statuses-grid__item .detailed-status.trends__item, -.trends__item.trends__item, -.story.trends__item, -.account-card.trends__item, -.scrollable :not(.focusable) > .account.trends__item, -.timeline-hint.trends__item, -.focusable.story, -.entry.story, -.statuses-grid__item .detailed-status.story, -.trends__item.story, -.story.story, -.account-card.story, -.scrollable :not(.focusable) > .account.story, -.timeline-hint.story { - padding: 10px; - flex-grow: 1; -} -.focusable.story, -.entry.story, -.statuses-grid__item .detailed-status.story, -.trends__item.story, -.story.story, -.account-card.story, -.scrollable :not(.focusable) > .account.story, -.timeline-hint.story { - padding: 15px; -} -.focusable.story .story__details, -.entry.story .story__details, -.statuses-grid__item .detailed-status.story .story__details, -.trends__item.story .story__details, -.story.story .story__details, -.account-card.story .story__details, -.scrollable :not(.focusable) > .account.story .story__details, -.timeline-hint.story .story__details { - padding-inline-start: 0 !important; -} -.focusable.story .story__thumbnail, -.entry.story .story__thumbnail, -.statuses-grid__item .detailed-status.story .story__thumbnail, -.trends__item.story .story__thumbnail, -.story.story .story__thumbnail, -.account-card.story .story__thumbnail, -.scrollable :not(.focusable) > .account.story .story__thumbnail, -.timeline-hint.story .story__thumbnail { - margin-inline-end: 0; - border-radius: var(--radius); - overflow: hidden; -} -.focusable.empty-column-indicator, -.entry.empty-column-indicator, -.statuses-grid__item .detailed-status.empty-column-indicator, -.trends__item.empty-column-indicator, -.story.empty-column-indicator, -.account-card.empty-column-indicator, -.scrollable :not(.focusable) > .account.empty-column-indicator, -.timeline-hint.empty-column-indicator { - display: block; -} -.focusable.timeline-hint, -.entry.timeline-hint, -.statuses-grid__item .detailed-status.timeline-hint, -.trends__item.timeline-hint, -.story.timeline-hint, -.account-card.timeline-hint, -.scrollable :not(.focusable) > .account.timeline-hint, -.timeline-hint.timeline-hint { - display: block; -} -.focusable.timeline-hint a::before, -.entry.timeline-hint a::before, -.statuses-grid__item .detailed-status.timeline-hint a::before, -.trends__item.timeline-hint a::before, -.story.timeline-hint a::before, -.account-card.timeline-hint a::before, -.scrollable :not(.focusable) > .account.timeline-hint a::before, -.timeline-hint.timeline-hint a::before { - content: ""; - position: absolute; - inset: 0; -} -#mastodon .status__wrapper { - background: none; -} -#mastodon .status, -#mastodon .scrollable .account { - padding-block: 15px; -} -#mastodon .status::before, -#mastodon .scrollable .account::before { - inset: -10px; - border-radius: var(--radius); -} -#mastodon .status.light { - overflow: hidden !important; -} -#mastodon .status.light .boost-modal__status-header { - display: flow-root !important; -} -#mastodon .account__relationship:empty { - display: none; -} -#mastodon .status__prepend { - white-space: nowrap; -} -#mastodon .status__prepend > span { - display: flex; - flex-grow: 1; - gap: 0.3em; - align-items: center; -} -#mastodon .status__prepend > span > a { - overflow: hidden; - text-overflow: ellipsis; -} -#mastodon .status__prepend + .status:not(.status-direct) { - padding-top: 0; -} -#mastodon .notification .status .status__info { - margin-top: 0px !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; - overflow: hidden; - border-radius: var(--radius); -} -#mastodon .notification .status .status__content ~ [style*="aspect-ratio:"] .video-player__controls { - display: none; -} -#mastodon .status__prepend, -#mastodon .notification__message { - display: flex; - padding-top: 15px !important; - padding-bottom: 0 !important; - margin: 0 !important; - z-index: 2; - position: relative; -} -#mastodon .status__prepend [class*="icon-wrapper"], -#mastodon .notification__message [class*="icon-wrapper"] { - display: flex; - align-items: center; -} -#mastodon .status__prepend a, -#mastodon .notification__message a { - white-space: nowrap; - font-weight: 700; - text-overflow: ellipsis; - overflow: hidden !important; -} -#mastodon .status__prepend bdi, -#mastodon .notification__message bdi { - text-overflow: ellipsis; - overflow: hidden; - max-width: 100%; -} -#mastodon .notification__message > span, -#mastodon .notification__message > span > span { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 0em 0.4em; - line-height: 1.4; - max-width: 100%; -} -#mastodon .notification-favourite .notification__message, -#mastodon .notification-reblog .notification__message { - margin-bottom: -10px !important; -} -#mastodon .notification-favourite .notification__message ~ div .status__info, -#mastodon .notification-reblog .notification__message ~ div .status__info, -#mastodon .notification-favourite .notification__message ~ div .status__action-bar, -#mastodon .notification-reblog .notification__message ~ div .status__action-bar { - display: none; -} -#mastodon .notification-favourite .notification__message ~ div .status, -#mastodon .notification-reblog .notification__message ~ div .status { - min-height: unset; -} -#mastodon .notification-favourite .notification__message ~ div .attachment-list, -#mastodon .notification-reblog .notification__message ~ div .attachment-list { - margin-top: 0; -} -#mastodon .notification-favourite .notification__message ~ div .status__content__text.status__content__text, -#mastodon .notification-reblog .notification__message ~ div .status__content__text.status__content__text { - max-height: 80px !important; - mask: linear-gradient(#000 60px, transparent); - -webkit-mask: linear-gradient(#000 60px, transparent); -} -#mastodon .notification-favourite .notification__message ~ div .status__content__text.status__content__text p, -#mastodon .notification-reblog .notification__message ~ div .status__content__text.status__content__text p { - margin: 0; -} -#mastodon .notification-favourite .notification__message ~ div .attachment-list__list, -#mastodon .notification-reblog .notification__message ~ div .attachment-list__list { - display: flex; - flex-direction: row; - justify-content: flex-start; - gap: 0 1em; - margin-top: 4px; - z-index: 2; - pointer-events: none; - max-width: 100%; -} -#mastodon .notification-favourite .notification__message ~ div .attachment-list__list li, -#mastodon .notification-reblog .notification__message ~ div .attachment-list__list li { - display: contents; -} -#mastodon .notification-favourite .notification__message ~ div .attachment-list__list a, -#mastodon .notification-reblog .notification__message ~ div .attachment-list__list a { - pointer-events: all; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} -#mastodon .status__line:not(.status__line--full) { - height: 20px; - filter: contrast(2); -} -#mastodon .status__line::before { - top: 20px; - height: 48px; -} -#mastodon .status__avatar { - min-width: 45px; -} -#mastodon .account__avatar-overlay-base { - width: 100%; - height: 100%; - background-size: cover; - border-radius: var(--radius); -} -#mastodon .account__avatar-overlay-base .account__avatar { - width: 90% !important; - height: 90% !important; -} -#mastodon .account__avatar-overlay-overlay { - border-radius: var(--radius-round); - overflow: hidden; -} -#mastodon .status__info { - margin-block: 5px 0; - padding: 0 !important; - align-items: flex-start; -} -#mastodon .status__info > * { - position: relative; - z-index: 2; -} -#mastodon .status__info .display-name { - color: unset !important; -} -#mastodon .status__info .display-name strong { - font-weight: 600; - overflow: hidden; - text-overflow: ellipsis; -} -#mastodon .status__info b { - unicode-bidi: isolate; -} -#mastodon .status__info .status__relative-time { - display: flex; - font-weight: 500; - font-size: 15px; -} -#mastodon .status__info .status__relative-time .status__visibility-icon { - order: 2; - margin-inline-start: 0.4em; -} -#mastodon .status__info .status__relative-time abbr { - margin-inline-start: 0.7em; -} -#mastodon .status__info .status__relative-time abbr::after { - content: ""; - font: normal normal normal 14px/1 FontAwesome; -} -#mastodon .status__content { - padding-top: 2px; - text-align: unset !important; - line-height: 1.5; - margin-top: 10px; -} -#mastodon .status__content.status__content--with-spoiler { - overflow: visible; -} -#mastodon .status__content.status__content--with-spoiler > p { - margin-inline: -100px; - padding-inline: 100px; - overflow: hidden; -} -#mastodon .status__content.status__content--with-spoiler > p:first-child { - margin-bottom: 0; -} -#mastodon .status__content p:empty { - max-height: 0; -} -#mastodon .status__content .custom-emoji { - height: 2em; - min-width: 2em; - width: auto; -} -.custom-emoji { - transition: transform 1s cubic-bezier(0, 0.7, 0, 1); -} -.custom-emoji:hover { - transform: scale(1.7); - transition: transform 0.4s cubic-bezier(0, 0.7, 0, 1); -} -#mastodon .status__content ~ [style*="aspect-ratio"] { - max-height: 80vh; -} -#mastodon .status > .status__content .status__content__text:empty { - margin-top: -5px !important; -} -#mastodon .status__content__spoiler-link { - display: flex; - align-items: center; - position: relative; - padding: 0.4em 1.2em; - border-radius: var(--radius-round) !important; - color: inherit; - background: var(--elevated-color); - margin-block: 8px; -} -#mastodon .status__content__spoiler-link::before, -#mastodon .status__content__spoiler-link::after { - content: ""; - position: absolute; - inset: 0; - border-radius: var(--radius-round); - background-color: var(--hover-color); - opacity: 0; - transition: opacity 0.2s; -} -#mastodon .status__content__spoiler-link::after { - inset: -6px -9999px; -} -#mastodon .status__content__spoiler-link:hover::before, -#mastodon .status__content__spoiler-link:focus::before, -#mastodon .status__content__spoiler-link:hover::after, -#mastodon .status__content__spoiler-link:focus::after { - opacity: 1; -} -#mastodon .detailed-status__wrapper-direct .status__content, -#mastodon .status-direct .status__content, -#mastodon .status__wrapper-direct .status__content, -#mastodon .conversation .status__content { - position: relative !important; - background: var(--elevated-color); - padding: 8px 12px; - padding: 0.7em 0.9em !important; - border-radius: var(--radius-round); - border-top-left-radius: 6px; - box-sizing: border-box; - margin-top: 5px !important; - margin-bottom: 0; - overflow: hidden !important; - max-width: max-content; -} -#mastodon .detailed-status__wrapper-direct .status__content .media-gallery, -#mastodon .status-direct .status__content .media-gallery, -#mastodon .status__wrapper-direct .status__content .media-gallery, -#mastodon .conversation .status__content .media-gallery { - width: 999px; - max-width: 100% !important; -} -.detailed-status__wrapper-direct .status__content { - font-size: 17px; -} -#mastodon .status__wrapper-direct:not(.detailed-status__wrapper-direct) .status__prepend { - position: absolute; - font-size: 0; - opacity: 0; -} -#mastodon .status-direct .icon-at, -#mastodon .status-direct .status__visibility-icon { - color: var(--accent, #8c8dff); -} -#mastodon .status-direct .status__info .status__relative-time { - height: auto; - color: var(--accent, #8c8dff); -} -#mastodon .status-direct.status--in-thread .status__info { - align-items: center; - gap: 10px; -} -#mastodon .status-direct.status--in-thread .status__info > span { - width: 0; - flex-grow: 1; -} -#mastodon .status-direct.status--in-thread .status__info> span, -#mastodon .status-direct.status--in-thread .status__display-name { - overflow: visible !important; -} -#mastodon .status-direct.status--in-thread .status__display-name { - overflow: hidden; - width: 0; - flex-grow: 1; -} -#mastodon .status-direct.status--in-thread .status__avatar { - height: auto; - margin-bottom: -100px; -} -#mastodon .status-direct.status--in-thread .status__avatar .account__avatar { - position: absolute; - top: 0 !important; - height: 46px !important; - width: 46px !important; -} -#mastodon .status-direct.status--in-thread .display-name * { - display: inline; - margin-right: 0.2em; -} -#mastodon .media-gallery, -#mastodon .video-player, -#mastodon .status-card.horizontal.interactive, -#mastodon .status-card, -#mastodon .audio-player, -#mastodon .picture-in-picture-placeholder { - box-shadow: var(--shadow-low); - border-radius: var(--radius); - margin-top: 10px !important; - margin-bottom: 10px !important; - animation: scaleIn 0.4s; - max-width: unset !important; -} -#mastodon .status .media-gallery__item { - max-height: 80vh; -} -.status-card { - line-height: 1; -} -.status-card:not(.horizontal) { - border: 1px solid var(--border-color) !important; -} -.status-card__content { - padding: 12px !important; - margin-block: auto; -} -.status-card .status-card__image { - border-radius: 0; - width: 90px; - min-height: 100%; -} -.status-card .status-card__image img { - border-radius: 0; - height: 100%; -} -.status-card.compact:not(.interactive) .status-card__image { - position: relative; - aspect-ratio: unset !important; -} -.status-card.compact:not(.interactive) .status-card__image img { - position: absolute; - inset: 0; -} -.status-card__host { - font-size: 0.85em; - line-height: 1.5; - margin: 0; -} -.status-card__title { - font-size: 1em; - margin-top: 0.2em; - margin-bottom: 0; - line-height: 1.4; -} -.status-card__description { - line-height: 1.4 !important; - margin: 0 !important; -} -.status-card__author { - margin-top: 0.4em; - font-size: 0.85em; -} -.status-card:hover { - background-color: var(--hover-color); -} -.audio-player .video-player__seek { - margin: var(--radius); -} -#mastodon .hashtag-bar { - margin-top: 10px; -} -#mastodon .hashtag-bar a, -#mastodon .hashtag-bar button { - font-size: 0.9em; - padding: 0.2em 0.6em; - color: inherit; - opacity: 0.9; - color: var(--accent, #8c8dff); - transition: opacity 0.2s; -} -#mastodon .hashtag-bar a { - position: relative; - border-radius: var(--radius); - background: var(--elevated-color); -} -#mastodon .hashtag-bar a::after { - content: ""; - position: absolute; - inset: 0; - background: var(--elevated-color); - border-radius: inherit; - opacity: 0; - transition: opacity 0.2s; -} -#mastodon .hashtag-bar a:hover, -#mastodon .hashtag-bar a:focus { - opacity: 1; -} -#mastodon .hashtag-bar a:hover::after, -#mastodon .hashtag-bar a:focus::after { - opacity: 1; -} -#mastodon .hashtag-bar button { - padding-block: 0; -} -#mastodon .detailed-status__wrapper { - border-radius: var(--radius); - overflow: clip; -} -#mastodon .detailed-status { - border: 0 !important; - padding: 15px !important; - padding-bottom: 5px !important; -} -#mastodon .detailed-status .status__prepend { - padding-top: 0 !important; - margin-bottom: 1em !important; -} -#mastodon .detailed-status .detailed-status__display-name { - margin-bottom: 10px; -} -#mastodon div:empty + div > .detailed-status__wrapper { - margin-top: 0 !important; -} -#mastodon .detailed-status__wrapper, -#mastodon .detailed-status, -#mastodon .picture-in-picture { - box-shadow: var(--shadow); -} -#mastodon .detailed-status__wrapper .media-gallery, -#mastodon .detailed-status .media-gallery, -#mastodon .picture-in-picture .media-gallery, -#mastodon .detailed-status__wrapper .video-player, -#mastodon .detailed-status .video-player, -#mastodon .picture-in-picture .video-player, -#mastodon .detailed-status__wrapper .status-card.horizontal.interactive, -#mastodon .detailed-status .status-card.horizontal.interactive, -#mastodon .picture-in-picture .status-card.horizontal.interactive, -#mastodon .detailed-status__wrapper .status-card, -#mastodon .detailed-status .status-card, -#mastodon .picture-in-picture .status-card, -#mastodon .detailed-status__wrapper .audio-player, -#mastodon .detailed-status .audio-player, -#mastodon .picture-in-picture .audio-player, -#mastodon .detailed-status__wrapper .picture-in-picture-placeholder, -#mastodon .detailed-status .picture-in-picture-placeholder, -#mastodon .picture-in-picture .picture-in-picture-placeholder { - margin-inline: 0 !important; - max-height: unset !important; -} -#mastodon .detailed-status__wrapper .status__content, -#mastodon .detailed-status .status__content, -#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; -} -#mastodon .picture-in-picture .picture-in-picture__header { - border-radius: var(--radius) var(--radius) 0 0; -} -#mastodon .picture-in-picture .media-gallery, -#mastodon .picture-in-picture .video-player, -#mastodon .picture-in-picture .status-card.horizontal.interactive, -#mastodon .picture-in-picture .status-card, -#mastodon .picture-in-picture .audio-player, -#mastodon .picture-in-picture .picture-in-picture-placeholder { - --radius: 0; - margin: 0 !important; -} -#mastodon .picture-in-picture .picture-in-picture__footer { - border-radius: 0 0 var(--radius) var(--radius); -} -#mastodon .status__action-bar { - margin-top: 0.4em; - margin-bottom: -8px; -} -#mastodon .status__action-bar .icon-button { - padding: 0.25em 0.25em !important; - margin: 0; -} -#mastodon .status__action-bar .icon-button::before { - content: ""; - position: absolute; - inset: -0.5em; -} -#mastodon .status__action-bar, -#mastodon .detailed-status__action-bar, -#mastodon .picture-in-picture__footer { - position: relative; - z-index: 2; - pointer-events: none; - gap: 0 18px; - justify-content: unset; -} -#mastodon .status__action-bar :not(i), -#mastodon .detailed-status__action-bar :not(i), -#mastodon .picture-in-picture__footer :not(i) { - pointer-events: all; -} -#mastodon .status__action-bar > div, -#mastodon .detailed-status__action-bar > div, -#mastodon .picture-in-picture__footer > div { - all: unset; -} -#mastodon .status__action-bar .icon-button, -#mastodon .detailed-status__action-bar .icon-button, -#mastodon .picture-in-picture__footer .icon-button { - display: inline-flex; - align-items: center; - justify-content: center; - width: unset !important; - padding: 0.5em !important; - height: unset !important; - border-radius: var(--radius); - position: relative; -} -#mastodon .status__action-bar .icon-button:last-child, -#mastodon .detailed-status__action-bar .icon-button:last-child, -#mastodon .picture-in-picture__footer .icon-button:last-child { - margin: 0 !important; -} -#mastodon .status__action-bar .icon-button .icon-button__counter, -#mastodon .detailed-status__action-bar .icon-button .icon-button__counter, -#mastodon .picture-in-picture__footer .icon-button .icon-button__counter { - width: auto !important; -} -#mastodon .status__action-bar.detailed-status__action-bar, -#mastodon .detailed-status__action-bar.detailed-status__action-bar, -#mastodon .picture-in-picture__footer.detailed-status__action-bar, -#mastodon .status__action-bar.picture-in-picture__footer, -#mastodon .detailed-status__action-bar.picture-in-picture__footer, -#mastodon .picture-in-picture__footer.picture-in-picture__footer { - padding-inline: 15px !important; - gap: 0; -} -#mastodon .status__action-bar.detailed-status__action-bar .icon-button, -#mastodon .detailed-status__action-bar.detailed-status__action-bar .icon-button, -#mastodon .picture-in-picture__footer.detailed-status__action-bar .icon-button, -#mastodon .status__action-bar.picture-in-picture__footer .icon-button, -#mastodon .detailed-status__action-bar.picture-in-picture__footer .icon-button, -#mastodon .picture-in-picture__footer.picture-in-picture__footer .icon-button { - flex-grow: 1 !important; -} -#mastodon .status__action-bar.detailed-status__action-bar div, -#mastodon .detailed-status__action-bar.detailed-status__action-bar div, -#mastodon .picture-in-picture__footer.detailed-status__action-bar div, -#mastodon .status__action-bar.picture-in-picture__footer div, -#mastodon .detailed-status__action-bar.picture-in-picture__footer div, -#mastodon .picture-in-picture__footer.picture-in-picture__footer div, -#mastodon .status__action-bar.detailed-status__action-bar > div > span, -#mastodon .detailed-status__action-bar.detailed-status__action-bar > div > span, -#mastodon .picture-in-picture__footer.detailed-status__action-bar > div > span, -#mastodon .status__action-bar.picture-in-picture__footer > div > span, -#mastodon .detailed-status__action-bar.picture-in-picture__footer > div > span, -#mastodon .picture-in-picture__footer.picture-in-picture__footer > div > span { - display: flex; - justify-content: center; - flex-grow: 1; -} -#mastodon .status__action-bar.picture-in-picture__footer .icon-button::after, -#mastodon .detailed-status__action-bar.picture-in-picture__footer .icon-button::after, -#mastodon .picture-in-picture__footer.picture-in-picture__footer .icon-button::after { - content: unset !important; -} -.layout-single-column .tabs-bar__wrapper, -.layout-single-column .column-back-button--slim .column-back-button { +.tabs-bar__wrapper { grid-column: 2; border: 0 !important; + padding-top: 0; transition: margin 0.2s cubic-bezier(0, 0, 0, 1.1), top 0.4s; } -#mastodon .column-header, -#mastodon .column-inline-form { +@media (min-width: 890px) { + .tabs-bar__wrapper { + margin-top: -100vh; + } +} +.column-header, +.column-inline-form { font-weight: 600; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } -#mastodon .column-header ~ .scrollable, -#mastodon .column-inline-form ~ .scrollable { +.column-header ~ .scrollable, +.column-inline-form ~ .scrollable { 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) { +.column-header__title { + display: inline; +} +.column-header__title svg { + vertical-align: -0.4em; +} +.announcements, +.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); + animation: slideDownFade 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 { +.column-header__collapsible { transition: none; - background: var(--modal-background-color); + background: var(--surface-background-color); + overflow-y: auto !important; } -.layout-single-column .tabs-bar__wrapper .collapsed, -.layout-single-column .column-back-button--slim .column-back-button .collapsed { +.tabs-bar__wrapper .collapsed { display: none; } -.layout-single-column .tabs-bar__wrapper .announcements__container, -.layout-single-column .column-back-button--slim .column-back-button .announcements__container { +.announcements { + background: var(--surface-background-color); +} +.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; +.announcements__mastodon { + display: block !important; 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 { +.announcements__pagination { bottom: unset; padding-block: 0; + display: flex; + align-items: center; +} +.column-header__wrapper > :not(.column-header):not(.collapsed) { + border-top: 2px solid var(--background-color) !important; +} +.column-header { + overflow: hidden; +} +.column-header > button { + z-index: 2; +} +.column-header__buttons { + isolation: isolate; +} +.column-header__buttons button { + transition: background 0.2s, transform 0.3s !important; + position: relative; + border-radius: 100px !important; + min-width: 40px; + margin: 5px; + margin-inline-start: 0; + font-size: 0.9em; + padding-inline: 10px; +} +.column-header__buttons button:not(.active) { + background: var(--elevated-color) !important; + z-index: 2; +} +.column-header__buttons button svg { + margin: 0; +} +.column-header__buttons button span { + display: none; +} +.column-header__buttons button::before { + content: ""; + position: absolute; + inset: -20px -800px; + transform: scale(0); + transform-origin: bottom center; + background: var(--surface-background-color); + z-index: -1; + border-radius: 100px; + pointer-events: none; + opacity: 0; + transition: transform 0.3s, opacity 0.3s; +} +@media (prefers-reduced-motion) { + .column-header__buttons button::before { + transition: none !important; + } +} +.column-header__buttons button.active::before { + transform: scale(1, 5); + opacity: 1; + transition: transform 0.3s, opacity 0.1s; } @media (min-width: 890px) { - .layout-single-column .tabs-bar__wrapper, - .layout-single-column .column-back-button--slim .column-back-button { - width: 285px; - top: 0 !important; - top: var(--top) !important; + .tabs-bar__wrapper { inset-inline: unset !important; height: 50px !important; - margin-top: -50px !important; - margin-inline-start: 10px; - margin-top: 30px; + top: 0; + top: var(--top) !important; + width: 285px; border-radius: var(--radius) var(--radius) !important; box-shadow: 0 12px 12px -12px rgba(0,0,0,0.1); + margin-inline-start: 20px; } - .layout-single-column .tabs-bar__wrapper:not(.column-back-button), - .layout-single-column .column-back-button--slim .column-back-button:not(.column-back-button) { - padding-top: 0; - } - .layout-single-column .tabs-bar__wrapper .column-header__wrapper, - .layout-single-column .column-back-button--slim .column-back-button .column-header__wrapper { - gap: 2px !important; + .tabs-bar__wrapper .column-header__wrapper { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; } - .layout-single-column .tabs-bar__wrapper .column-header, - .layout-single-column .column-back-button--slim .column-back-button .column-header { + .tabs-bar__wrapper .column-header { background: none !important; overflow: hidden; border: 0; } - .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; - } - .layout-single-column .tabs-bar__wrapper .column-header__buttons button, - .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button { - transition: background 0.2s, transform 0.3s !important; - position: relative; - border-radius: 100px !important; - min-width: 40px; - margin: 5px; - margin-inline-start: 0; - font-size: 0.9em; - padding-inline: 10px; - } - .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; - } - .layout-single-column .tabs-bar__wrapper .column-header__buttons button:not(.active), - .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button:not(.active) { - background: var(--elevated-color) !important; - } - .layout-single-column .tabs-bar__wrapper .column-header__buttons button svg, - .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button svg { - margin: 0; - } - .layout-single-column .tabs-bar__wrapper .column-header__buttons button span, - .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button span { - display: none; - } - .layout-single-column .tabs-bar__wrapper .column-header__buttons button::before, - .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button::before { - content: ""; - position: absolute; - inset: 0; - top: calc(100% + 5px); - bottom: -5px; - 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.active::before, - .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button.active::before { - inset: -10px -300px; - } } -@media (min-width: 890px) and (min-width: 1320px) { - .layout-single-column .tabs-bar__wrapper, - .layout-single-column .column-back-button--slim .column-back-button { - margin-inline-start: 25px; - } -} -@media (min-width: 890px) and (max-width: 1174px) { - .layout-single-column .tabs-bar__wrapper, - .layout-single-column .column-back-button--slim .column-back-button { - width: 265px; - margin-top: -60px !important; - top: 10px !important; +@media (min-width: 890px) and (max-width: 1319px) { + .tabs-bar__wrapper { margin-inline-start: 10px; } } +@media (min-width: 890px) and (max-width: 1174px) { + .tabs-bar__wrapper { + width: 265px; + top: 10px !important; + } +} @media (min-width: 890px) { - .layout-single-column .column-back-button--slim { + .column-back-button--slim { margin-left: auto !important; order: -1; } - .layout-single-column .column-back-button--slim > .column-back-button { + .column-back-button--slim > .column-back-button { margin-top: 0 !important; top: unset !important; } } -@media (min-width: 890px) and (max-width: 1174px) { - .layout-single-column .column-back-button--slim > .column-back-button { - margin-top: -55px !important; - top: unset !important; - } -} -#mastodon .column-settings__row, -#mastodon .column-settings__hashtags { +.column-settings__row, +.column-settings__hashtags { gap: 0; } -#mastodon .column-settings__section { - margin-bottom: 4px; - padding-inline: 4px; +.column-settings h3 { + font-size: 1em; + margin-bottom: 8px; } -#mastodon .column-select__control { +.column-select__control { border-radius: var(--radius); } -#mastodon .setting-toggle, -#mastodon .app-form__toggle { +.local-settings__page__item, +.glitch-setting-text.glitch-setting-text, +.setting-toggle, +.app-form__toggle { display: flex; align-items: center; margin-bottom: 14px; position: relative; padding: 0.7em; background: var(--elevated-color); - margin-bottom: 2px !important; + margin-block: 0 2px !important; overflow: hidden; } -#mastodon .setting-toggle:first-child, -#mastodon .app-form__toggle:first-child { +.local-settings__page__item:first-of-type, +.glitch-setting-text.glitch-setting-text:first-of-type, +.setting-toggle:first-of-type, +.app-form__toggle:first-of-type { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } -#mastodon .setting-toggle:last-child, -#mastodon .app-form__toggle:last-child { +.local-settings__page__item:last-of-type, +.glitch-setting-text.glitch-setting-text:last-of-type, +.setting-toggle:last-of-type, +.app-form__toggle:last-of-type { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); } -#mastodon .setting-toggle .react-toggle, -#mastodon .app-form__toggle .react-toggle { +.local-settings__page__item label, +.glitch-setting-text.glitch-setting-text label, +.setting-toggle label, +.app-form__toggle label, +.local-settings__page__item legend, +.glitch-setting-text.glitch-setting-text legend, +.setting-toggle legend, +.app-form__toggle legend { + padding-block: 2px !important; +} +.local-settings__page__item label span::before, +.glitch-setting-text.glitch-setting-text label span::before, +.setting-toggle label span::before, +.app-form__toggle label span::before { + content: ""; + position: absolute; + inset: -900px; +} +.local-settings__page__item .react-toggle, +.glitch-setting-text.glitch-setting-text .react-toggle, +.setting-toggle .react-toggle, +.app-form__toggle .react-toggle { order: 2; } -#mastodon .setting-toggle .setting-toggle__label, -#mastodon .app-form__toggle .setting-toggle__label { +.local-settings__page__item .setting-toggle__label, +.glitch-setting-text.glitch-setting-text .setting-toggle__label, +.setting-toggle .setting-toggle__label, +.app-form__toggle .setting-toggle__label { margin-bottom: 0 !important; flex-grow: 1; width: 0; } -#mastodon .setting-toggle::before, -#mastodon .app-form__toggle::before { +.local-settings__page__item::before, +.glitch-setting-text.glitch-setting-text::before, +.setting-toggle::before, +.app-form__toggle::before { content: ""; position: absolute; inset: 0; @@ -3020,13 +1017,23 @@ a:focus-visible, transition: opacity 0.2s; pointer-events: none; } -#mastodon .setting-toggle:hover::before, -#mastodon .app-form__toggle:hover::before, -#mastodon .setting-toggle:focus-within::before, -#mastodon .app-form__toggle:focus-within::before { +.local-settings__page__item:hover::before, +.glitch-setting-text.glitch-setting-text:hover::before, +.setting-toggle:hover::before, +.app-form__toggle:hover::before, +.local-settings__page__item:focus-within::before, +.glitch-setting-text.glitch-setting-text:focus-within::before, +.setting-toggle:focus-within::before, +.app-form__toggle:focus-within::before { opacity: 1; } -#mastodon .navigation-panel.navigation-panel { +@media (min-width: 890px) and (max-width: 1174px) { + .column-back-button--slim > .column-back-button { + margin-top: -55px !important; + top: unset !important; + } +} +.navigation-panel.navigation-panel { box-sizing: border-box; height: calc(100vh - var(--top) - 50px + var(--radius)); padding-bottom: 10px; @@ -3034,27 +1041,25 @@ a:focus-visible, border: 0; margin-top: calc(0px - var(--radius)); padding-top: calc(10px + var(--radius)); + overflow: hidden auto; } -#mastodon .navigation-panel.navigation-panel > hr { +.navigation-panel.navigation-panel > hr { display: none; } -#mastodon .navigation-panel.navigation-panel hr { - margin-inline: 15px; -} @media (min-width: 1175px) { - #mastodon .navigation-panel.navigation-panel { + .navigation-panel.navigation-panel { padding-top: calc(var(--radius) + 10px); margin-top: calc(50px - var(--radius)); } - #mastodon .navigation-panel.navigation-panel .navigation-panel__logo .column-link, - #mastodon .navigation-panel.navigation-panel .navigation-panel__logo hr { + .navigation-panel.navigation-panel .navigation-panel__logo .column-link, + .navigation-panel.navigation-panel .navigation-panel__logo hr { display: none !important; } - #mastodon .navigation-panel.navigation-panel .switch-to-advanced { + .navigation-panel.navigation-panel .switch-to-advanced { border-radius: var(--radius); margin-top: 0; } - #mastodon .navigation-panel.navigation-panel [href="/settings/preferences"] { + .navigation-panel.navigation-panel [href="/settings/preferences"] { display: none !important; } } @@ -3075,6 +1080,14 @@ a:focus-visible, top: -10px; box-sizing: border-box; } +.column-header__back-button, +.column-back-button > svg, +.column-link__icon, +.column-header > button .column-header__icon { + margin-inline-end: 0.7em; + font-size: 16px !important; + padding-right: 0 !important; +} @media (min-width: 890px) { .column-link { flex-grow: 100 !important; @@ -3091,11 +1104,6 @@ a:focus-visible, overflow: hidden; background: none !important; } - .column-link .column-link__icon, - .column-header > button .column-header__icon { - margin-inline-end: 0.7em !important; - font-size: 16px !important; - } .column-link::before { content: "" !important; position: absolute; @@ -3124,252 +1132,1567 @@ a:focus-visible, .column-link[href="/lists"] + div .column-link i { opacity: 0.2; } -} -@media (min-width: 890px) { - #mastodon .getting-started__trends { + .navigation-panel.navigation-panel .getting-started__trends { display: unset !important; } } -#mastodon .trends__item { - display: flex !important; +.navigation-panel.navigation-panel .trends__item { + margin: 0 !important; } -#mastodon .trends__item__name a::before { +.scrollable > div:first-child > [tabindex="-1"]:last-child .status__wrapper::after { + content: unset; +} +.focusable, +.entry, +.statuses-grid__item .detailed-status, +.trends__item, +.story, +.account-card, +.scrollable :not(.focusable) > .account:not(.account--minimal), +.timeline-hint { + overflow: hidden; + contain: paint inline-size; + position: relative; + border-radius: var(--panel-radius); + border: 0; +} +.focusable.focusable, +.entry.focusable, +.statuses-grid__item .detailed-status.focusable, +.trends__item.focusable, +.story.focusable, +.account-card.focusable, +.scrollable :not(.focusable) > .account:not(.account--minimal).focusable, +.timeline-hint.focusable { + background: none; +} +@media (pointer: fine) { + .focusable::before, + .entry::before, + .statuses-grid__item .detailed-status::before, + .trends__item::before, + .story::before, + .account-card::before, + .scrollable :not(.focusable) > .account:not(.account--minimal)::before, + .timeline-hint::before { + content: ""; + position: absolute; + inset: 0px !important; + height: unset !important; + width: unset !important; + pointer-events: none; + transition: background-color 0.2s; + } + .focusable:hover::before, + .entry:hover::before, + .statuses-grid__item .detailed-status:hover::before, + .trends__item:hover::before, + .story:hover::before, + .account-card:hover::before, + .scrollable :not(.focusable) > .account:not(.account--minimal):hover::before, + .timeline-hint:hover::before, + .focusable:focus-within::before, + .entry:focus-within::before, + .statuses-grid__item .detailed-status:focus-within::before, + .trends__item:focus-within::before, + .story:focus-within::before, + .account-card:focus-within::before, + .scrollable :not(.focusable) > .account:not(.account--minimal):focus-within::before, + .timeline-hint:focus-within::before { + background-color: var(--hover-color); + } +} +.focusable:not(:last-child)::after, +.entry:not(:last-child)::after, +.statuses-grid__item .detailed-status:not(:last-child)::after, +.trends__item:not(:last-child)::after, +.story:not(:last-child)::after, +.account-card:not(:last-child)::after, +.scrollable :not(.focusable) > .account:not(.account--minimal):not(:last-child)::after, +.timeline-hint:not(:last-child)::after { + content: ""; + position: absolute; + bottom: 0px; + inset-inline: var(--radius); + border-top: 1px solid var(--border-color); + pointer-events: none; +} +.status__wrapper-reply.status--in-thread::after { + top: 0; +} +.status--in-thread.status__wrapper-reply:not(.status--first-in-thread)::after, +.status--in-thread:not(.status__wrapper-reply)::after { + border-top: 0 !important; +} +.detailed-status, +.status { + padding: 16px; +} +.status__info .account__avatar, +.status__info .status__avatar { + max-width: var(--avatar-size) !important; + max-height: var(--avatar-size) !important; +} +.status__line { + left: calc(16px + (var(--avatar-size) / 2)); +} +.status__prepend + .status:not(.status-direct) { + padding-top: 0; +} +@media (max-width: 450px) { + .status--in-thread { + --avatar-size: 34px; + } + .status--in-thread .status__info ~ * { + margin-inline-start: calc(var(--avatar-size) + 10px); + width: calc(100% - (var(--avatar-size) + 10px)); + } +} +.status__content { + text-align: unset !important; + line-height: 1.5; +} +.status__content.status__content--with-spoiler { + overflow: visible; +} +.status__content.status__content--with-spoiler > p { + margin-inline: -100px; + padding-inline: 100px; + overflow: hidden; +} +.status__content.status__content--with-spoiler > p:first-child { + margin-bottom: 0; +} +.status__content p:empty { + max-height: 0; +} +.status__content picture { + display: contents; +} +.status__content .custom-emoji { + display: inline-block; + height: var(--emoji-size) !important; + min-width: var(--emoji-size) !important; + width: auto; + margin: -0.2ex 0 0.2ex; +} +@media (prefers-reduced-motion: no-preference) { + .custom-emoji { + transition: transform 1s cubic-bezier(0, 0.7, 0, 1); + } + .custom-emoji:hover { + transform: scale(1.7); + transition: transform 0.4s cubic-bezier(0, 0.7, 0, 1); + } +} +.status__content ~ [style*="aspect-ratio"] { + max-height: 80vh; +} +#mastodon .status__content__spoiler-link { + display: flex; + align-items: center; + position: relative; + padding: 0.4em 1.2em; + border-radius: var(--radius-round); + color: inherit; + background: var(--elevated-color); + margin-block: 8px; +} +#mastodon .status__content__spoiler-link::before, +#mastodon .status__content__spoiler-link::after { + content: ""; + position: absolute; + inset: 0; + border-radius: var(--radius-round); + background-color: var(--hover-color); + opacity: 0; + transition: opacity 0.2s; +} +#mastodon .status__content__spoiler-link::after { + inset: -6px -9999px; +} +#mastodon .status__content__spoiler-link:hover::before, +#mastodon .status__content__spoiler-link:focus::before, +#mastodon .status__content__spoiler-link:hover::after, +#mastodon .status__content__spoiler-link:focus::after { + opacity: 1; +} +.detailed-status__wrapper-direct .status__content, +.status-direct .status__content, +.status__wrapper-direct .status__content, +.conversation .status__content { + position: relative !important; + background: var(--elevated-color); + padding: 12px 14px; + border-radius: var(--radius-round); + border-top-left-radius: 6px; + box-sizing: border-box; + margin-bottom: 0; + overflow: hidden !important; + max-width: max-content; +} +.detailed-status__wrapper-direct .status__content .media-gallery, +.status-direct .status__content .media-gallery, +.status__wrapper-direct .status__content .media-gallery, +.conversation .status__content .media-gallery { + width: 999px; + max-width: 100% !important; +} +.status__wrapper-direct:not(.detailed-status__wrapper-direct) .status__prepend { + position: absolute; + contain: strict; +} +.detailed-status { + border: 0; + padding-bottom: 4px; +} +.detailed-status__wrapper, +.detailed-status { + box-shadow: var(--shadow); +} +.detailed-status__wrapper .status__content, +.detailed-status .status__content { + min-height: unset !important; +} +.detailed-status__wrapper { + isolation: isolate; + background: none; +} +.detailed-status__wrapper::before { + content: ""; + position: absolute; + inset: 0; + background: var(--elevated-tint) !important; + pointer-events: none; + z-index: -1; +} +.detailed-status__wrapper .detailed-status { + box-shadow: none; +} +.detailed-status__meta { + margin-top: 14px; + line-height: 2; +} +.detailed-status__meta > * { + display: inline-flex; + border: 0 !important; + padding: 0 !important; + margin-inline-end: 8px; +} +.detailed-status__meta > *:not(:last-child)::after { + content: "·"; +} +.media-gallery, +.video-player, +.status-card.horizontal.interactive, +.status-card, +.audio-player, +.picture-in-picture-placeholder { + box-shadow: var(--shadow-low); + border-radius: var(--radius) !important; + margin-top: 10px !important; + margin-bottom: 10px !important; + animation: scaleIn 0.4s; + max-width: unset !important; +} +.media-gallery:has(.spoiler-button:not(.spoiler-button--minified)) { + height: 150px !important; + aspect-ratio: unset !important; +} +.media-gallery__item { + border-radius: 0; +} +.spoiler-button--minified button { + padding: 6px !important; + background: rgba(0,0,0,0.2) !important; +} +.spoiler-button--minified button::after { + content: ""; + position: absolute; + inset: -50px; +} +.spoiler-button--minified button:hover { + background: rgba(0,0,0,0.4) !important; +} +.spoiler-button--minified .icon { + width: 18px; + height: 18px; +} +.status-card { + align-items: stretch; + gap: 0; +} +.status-card:not(.horizontal) { + border: 1px solid var(--border-color) !important; +} +.status-card:not(.expanded) .status-card__image { + overflow: hidden; +} +.status-card:not(.expanded) .status-card__image img { + border-radius: 0; +} +.status-card:not(.interactive) .status-card__image { + position: relative; + aspect-ratio: unset !important; +} +.status-card__content { + margin-block: auto; + padding: 15px; +} +.status-card__host { + font-size: 0.85em; + line-height: 1.5; + margin: 0; +} +.status-card__title { + font-size: 1em; + margin-top: 0.2em; + margin-bottom: 0; + line-height: 1.4; +} +.status-card__description { + line-height: 1.4 !important; + margin: 0; +} +@supports (-webkit-line-clamp: 8) { + .status-card__description { + display: -webkit-box; + -webkit-line-clamp: 8; + -webkit-box-orient: vertical; + white-space: unset; + } +} +.status-card__author { + margin-top: 0.4em; + font-size: 0.85em; +} +.status-card:hover { + background-color: var(--hover-color); +} +.more-from-author { + background: none; + border: 0; + padding-top: 0; + border-radius: var(--radius); +} +.audio-player .video-player__seek { + margin: var(--radius); +} +.hashtag-bar { + margin-top: 10px; +} +.hashtag-bar a, +.hashtag-bar button { + color: var(--accent, #8c8dff); + transition: opacity 0.2s; + padding: 5px 10px; +} +.hashtag-bar a { + position: relative; + border-radius: var(--radius-round); + background: var(--elevated-color); +} +.hashtag-bar a::after { + content: ""; + position: absolute; + inset: 0; + background: var(--elevated-color); + border-radius: inherit; + opacity: 0; + transition: opacity 0.2s; +} +.hashtag-bar a:hover, +.hashtag-bar a:focus { + opacity: 1; +} +.hashtag-bar a:hover::after, +.hashtag-bar a:focus::after { + opacity: 1; +} +.hashtag-bar button { + padding-block: 0; +} +.status__action-bar { + flex-wrap: wrap; + margin-top: 0.4em; + margin-bottom: -6px; + gap: 0; + margin-inline-start: -8px; + pointer-events: none; +} +.status__action-bar > * { + pointer-events: all; + flex-grow: 1; + max-width: 55px; + min-width: max-content; +} +.status__action-bar > * button.icon-button { + width: 100% !important; +} +.status__action-bar > :not(.icon-button) { + display: flex; + height: 100%; +} +.status__action-bar .icon-button { + margin: 0; +} +.status__action-bar .icon-button::before { + content: ""; + position: absolute; + inset: -0.5em; +} +.status__action-bar, +.detailed-status__action-bar, +.picture-in-picture__footer { + position: relative; + z-index: 2; + justify-content: unset; +} +.status__action-bar .icon-button, +.detailed-status__action-bar .icon-button, +.picture-in-picture__footer .icon-button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.5em 0.4em !important; + border-radius: var(--radius); + position: relative; +} +.status__action-bar .icon-button .icon-button__counter, +.detailed-status__action-bar .icon-button .icon-button__counter, +.picture-in-picture__footer .icon-button .icon-button__counter { + width: auto !important; +} +.status__action-bar .icon-button--with-counter, +.detailed-status__action-bar .icon-button--with-counter, +.picture-in-picture__footer .icon-button--with-counter { + padding-inline: 0.7em !important; +} +.detailed-status__action-bar, +.picture-in-picture__footer { + padding-inline: 15px !important; + gap: 0; +} +.detailed-status__action-bar .icon-button, +.picture-in-picture__footer .icon-button { + flex-grow: 1 !important; +} +.detailed-status__action-bar div, +.picture-in-picture__footer div { + display: flex; + justify-content: center; + flex-grow: 1; +} +.account__wrapper { + line-height: 1.5; +} +.account__contents { + display: flex; + flex-wrap: wrap; + flex-grow: 1; + gap: 0 10px; +} +.display-name { + margin-bottom: 1px !important; +} +.account:not(.account--minimal) .display-name__account { + display: block; + width: 300px; +} +.account__details { + font-size: 0.9em; + opacity: 0.8; + width: 100px; + flex-grow: 1; + text-align: end; + align-items: center; + line-height: 1.2; +} +.account__details:has(.verified-badge) > :not(.verified-badge) { + display: none; +} +.account__wrapper button:not(:hover):not(:focus) { + background: var(--elevated-color); + color: inherit; +} +.trends__item, +.story, +.account-card { + animation: slideUpFade backwards 0.4s 0.24s cubic-bezier(0, 1, 1, 1); + border-radius: var(--radius); +} +.trends__item:nth-child(1), +.story:nth-child(1), +.account-card:nth-child(1) { + animation-delay: 0.04s; +} +.trends__item:nth-child(2), +.story:nth-child(2), +.account-card:nth-child(2) { + animation-delay: 0.08s; +} +.trends__item:nth-child(3), +.story:nth-child(3), +.account-card:nth-child(3) { + animation-delay: 0.12s; +} +.trends__item:nth-child(4), +.story:nth-child(4), +.account-card:nth-child(4) { + animation-delay: 0.16s; +} +.trends__item:nth-child(5), +.story:nth-child(5), +.account-card:nth-child(5) { + animation-delay: 0.2s; +} +.trends__item:nth-child(6), +.story:nth-child(6), +.account-card:nth-child(6) { + animation-delay: 0.24s; +} +.explore__links { + padding: 10px; + display: flex; + flex-wrap: wrap; + align-content: flex-start; +} +.explore__links > .dismissable-banner { + margin: -10px; + margin-bottom: 10px; +} +.explore__links .story { + margin-inline: 0 !important; +} +.trends__item { + display: flex !important; + margin-inline: 0 !important; +} +.trends__item__name a::before { content: ""; position: absolute; inset: 0; } -#mastodon .trends__item__current { +.trends__item__current { display: none; } -#mastodon .trends__item__sparkline { +.trends__item__sparkline { overflow: visible !important; pointer-events: none; } -#mastodon .trends__item__sparkline svg { +.trends__item__sparkline svg { overflow: visible !important; } -#mastodon .trends__item__sparkline path:first-child { - filter: blur(10px); +.trends__item__sparkline path:first-child { + filter: blur(8px); } -#mastodon .trends__item__sparkline path:last-child { +.trends__item__sparkline path:last-child { mask: linear-gradient(to left, #000, #000, transparent); -webkit-mask: linear-gradient(to left, #000, #000, transparent); } -.rtl #mastodon .trends__item__sparkline { +.rtl .trends__item__sparkline { transform: scaleX(-1); } -.getting-started, -#mastodon .column[aria-labelledby="Getting-started"] > .scrollable.scrollable.scrollable { +.explore__links .trends__item { + margin: 7.5px !important; + padding: 25px !important; + box-shadow: var(--shadow-med); + width: 200px; + background: var(--elevated-color); + flex-grow: 1; +} +.explore__links .trends__item::after { + content: unset !important; +} +.explore__links .trends__item a { + font-size: 1.4em; + line-height: 1.7em; +} +.explore__links .trends__item a::before { + content: ""; + position: absolute; + inset: 0; +} +.explore__links .trends__item .trends__item__sparkline { + height: 100%; +} +.explore__links .trends__item .trends__item__sparkline svg { + height: 100%; + float: right; + overflow: visible !important; + position: relative; +} +.explore__links .trends__item .trends__item__sparkline svg path { + display: unset !important; + transition: transform 1s; +} +.explore__links .trends__item .trends__item__sparkline svg path:first-child { + transform-origin: center; +} +.explore__links .trends__item:hover svg path:first-child, +.explore__links .trends__item:focus-within svg path:first-child { + transform: scale(2); +} +.explore__links .story { + width: 100%; + margin: 0; +} +.account__header { + overflow: visible; +} +.follow-request-banner { + margin-bottom: -100px; + padding-bottom: 120px; +} +.account__header__image { + height: 0; + padding-bottom: 35%; + border-radius: var(--panel-radius) var(--panel-radius) 0 0; + position: sticky; + top: calc(0px - var(--panel-radius)); + overflow: clip; +} +.account__header__image img { + position: absolute; +} +.account__header__image .account__header__info { + position: absolute; + z-index: 2; + height: 100%; +} +.account__header__image .account__header__info > span { + position: sticky; + top: var(--radius); +} +.account__header__bar { + position: relative; + z-index: 2; + border: 0; + padding-inline: 20px; + border-radius: var(--radius) var(--radius) 0 0; + margin-top: calc(0px - var(--radius)) !important; + display: flex; + flex-direction: column; + background: var(--background-color); + isolation: isolate; +} +@media (max-width: 890px) { + .account__header__bar { + padding-inline: 15px; + } +} +.account__header__bar::before { + content: ""; + background: var(--elevated-tint); + position: absolute; + inset: 0; + pointer-events: none; +} +.account__header__bar::after { + content: ""; + position: absolute; + inset-inline: 0; + height: 95px; + background: inherit; + z-index: -1; + border-radius: var(--radius); + mask: linear-gradient(to bottom, transparent, #000); +} +.account__header__tabs { + overflow: visible !important; + align-items: flex-end; + padding: 0; + height: unset !important; + margin-top: -55px !important; +} +.account__header__tabs::before { + content: ""; + position: absolute; + top: -55px; + inset-inline: 0; + height: 150px; + backdrop-filter: blur(40px); + filter: brightness(1.1); + pointer-events: none; + opacity: 0.7; + z-index: -2; + clip-path: inset(55px 0 0 0 round var(--radius)); +} +.account__header__tabs ~ div { + z-index: 2; +} +.account__header__bar .avatar { + margin-inline-start: 0 !important; + overflow: visible !important; + position: relative; + margin-top: 20px; +} +.account__header__bar .avatar .account-role { + position: absolute; + bottom: 0; + left: 110%; + border-radius: var(--radius); +} +.account__header__bar .account__avatar { + border: 0; + box-shadow: var(--shadow); + background: none; + background-size: cover !important; +} +.account__header__tabs__name { + margin-bottom: 0; + padding: 0; + margin-top: 16px; +} +.account__header__tabs__name h1 { + display: flex; + flex-wrap: wrap; + white-space: unset; + gap: 0 0.4em; + font-weight: 600; +} +.account__header__extra { + margin-top: 8px; +} +.account__header__fields, +.account__header__account-note { + display: flex; + flex-wrap: wrap; + gap: 2px; + background: none; + border-radius: var(--radius) !important; + overflow: hidden; + max-width: max-content; + border: 0 !important; +} +.account__header__fields dl { + display: inline; + border-radius: 0; + overflow: hidden; + border: 0 !important; + padding: 8px 12px !important; + position: relative; + overflow: hidden; + flex-grow: 1; +} +.account__header__fields dl:not(.verified) { + background-color: var(--elevated-color); +} +.account__header__fields dl dt { + all: unset !important; + color: unset !important; + opacity: 0.9 !important; +} +.account__header__fields dl dd { + padding: 0; + white-space: unset; + max-height: unset; + text-align: unset; +} +.account__header__fields dl dd > span > a:first-child:last-child::after, +.account__header__fields dl dd .h-card:first-child:last-child a::after { + content: ""; + position: absolute; + inset: 0; + background-color: var(--hover-color); + opacity: 0; + transition: opacity 0.2s; +} +.account__header__fields dl dd > span > a:first-child:last-child:hover:after, +.account__header__fields dl dd .h-card:first-child:last-child a:hover:after, +.account__header__fields dl dd > span > a:first-child:last-child:focus:after, +.account__header__fields dl dd .h-card:first-child:last-child a:focus:after { + opacity: 1; +} +.account__header__fields dl dd.verified { + overflow: visible !important; + border: 0; + background: none; +} +.account__header__fields dl dd.verified a::before, +.account__header__fields dl dd.verified a::after { + content: ""; + position: absolute; + inset: 0; + background: currentcolor; + opacity: 0.2; +} +.account__header__fields dl dd.verified a::after { + background: linear-gradient(20deg, currentcolor, transparent) !important; + opacity: 0.2 !important; + z-index: -2; +} +.account__header__account-note { + position: relative; + font-size: 0.9em; + max-width: unset; + padding: 0.5em 10px !important; + margin-block: -5px 10px; + margin-inline: -10px !important; + border-radius: var(--radius) !important; +} +.account__header__account-note::after { + content: ""; + position: absolute; + bottom: 0; + inset-inline: 10px; + border-top: 1px solid var(--border-color); + transition: opacity 0.2s; +} +.account__header__account-note:focus-within::after { + opacity: 0; +} +.account__header__account-note label { + z-index: 2; + margin: 0; + pointer-events: none; + font-size: inherit; +} +.account__header__account-note textarea { + margin: -100px !important; + padding: 100px !important; + padding-inline-end: 0.7em !important; + margin-inline-end: -0.7em !important; + box-sizing: content-box; + width: 100%; + font-size: inherit; + transition: background 0.2s; +} +.account__header__account-note textarea::placeholder { + font-weight: 600; +} +.account-gallery__container { + border-radius: var(--radius); + overflow: clip; + padding: 0; + margin: 4px; + gap: 4px; + margin-bottom: calc(-40vh + 4px); +} +.account-gallery__item { + margin: 0; + flex: 1 1 calc(100px + 15%); + transition: flex 0.7s cubic-bezier(0, 0, 0, 1); + min-height: 180px !important; +} +.media-gallery__item-thumbnail { + transition: transform 0.2s; +} +.account-gallery__item:hover, +.account-gallery__item:focus-within { + flex-grow: 1.5; +} +.account-gallery__item:hover .media-gallery__item-thumbnail, +.account-gallery__item:focus-within .media-gallery__item-thumbnail { + transform: scale(1.02); +} +.account-gallery__container > button { + width: unset; + flex-grow: 1; + flex: 1 1 calc(100px + 15% - 24px); + margin: 12px; + font-size: 1.2em; + font-weight: 700; + background: var(--elevated-color); + color: inherit; +} +.account-gallery__container > button:hover:not(:focus) { + transform: scale(1.01); +} +.account-authorize__wrapper { + background: var(--elevated-color); + border-radius: var(--radius); + overflow: hidden; + flex-grow: 1; + margin: 10px; + display: flex; + flex-direction: column; +} +@media (max-width: 890px) { + .account-authorize__wrapper { + margin-inline: 10px; + } +} +.layout-multiple-columns .account-authorize__wrapper { + margin-inline: 10px; +} +.account-authorize__wrapper .account-authorize { + padding: 20px 15px 10px; +} +.account-authorize__wrapper .detailed-status__display-name { + margin-bottom: 10px !important; +} +.account-authorize__wrapper .account--panel { + margin-top: auto; + border-bottom: 0; + padding-inline: 15px; + gap: 10px; + background: none; +} +.account-authorize__wrapper br { + display: block; +} +.account-authorize__wrapper p { + margin-bottom: 0.2em; +} +.account-authorize__wrapper .account--panel__button:first-child .icon-button:not(:hover):not(:focus) { + background: var(--elevated-color); +} +.account-authorize__wrapper .icon-button { + width: 100% !important; + padding: 10px; + height: unset !important; +} +.about__meta { + border-radius: var(--radius); +} +.account--minimal { + max-width: 100%; +} +.about__section { + margin: 30px -20px; + padding-inline: 20px; + contain: inline-size paint; +} +.about__section.active .about__section__title { + margin-inline: -20px; + border-radius: 0; + border-inline: 0; + border-bottom: 0; +} +.about__section__title { + position: sticky; + top: -1px; + z-index: 2; + background: var(--background-color-tint); + border: 1px solid var(--border-color); + border-radius: var(--radius); + overflow: hidden; + transition: margin 0.2s cubic-bezier(0, 1, 0, 1), border-radius 0.2s; +} +.about__section__title::after { + content: ""; + position: absolute; + inset: 0; + background: var(--elevated-tint); + backdrop-filter: blur(10px); + z-index: -1; +} +.about__section__body { + border: 0; + padding: 0; + animation: slideDownFade 0.4s 0.1s backwards cubic-bezier(0, 1, 0, 1.2); +} +.explore__search-results { + border: 0; +} +.search-results__section__header { + margin: 0px 0px 10px; + color: unset; + background: none; + padding-inline: 25px; + font-weight: 600; +} +.search-results__section { + border: 0; + margin-bottom: 20px; +} +.sidebar-wrapper { + overflow: visible !important; + width: unset; +} +.sidebar-wrapper__inner { + position: sticky; + top: 0; + max-height: 100vh !important; + overflow-y: auto !important; + pointer-events: all !important; + z-index: 100; +} +.sidebar-wrapper__inner .fa { + margin-inline-end: 1em !important; +} +.sidebar-wrapper__inner .sidebar > ul > li { + overflow: hidden; + margin-inline: 15px !important; +} +.sidebar-wrapper__inner .sidebar > ul > li > a:not(.selected) { + background: none; +} +.sidebar-wrapper__inner .sidebar > ul > li a { + display: flex !important; + align-items: center; + white-space: unset; +} +.sidebar-wrapper__inner .sidebar > ul > li.selected { + margin: 6px; + border-radius: var(--radius); +} +.sidebar-wrapper__inner .sidebar > ul > li.selected > a.selected { + font-weight: 600; + color: unset; + position: relative; + overflow: visible; + border-radius: 0 !important; + border: 0; +} +.sidebar-wrapper__inner .sidebar > ul > li.selected > a.selected::after { + content: ""; + position: absolute; + top: 100%; + inset-inline: 0; + height: 9999px; + background: inherit; + z-index: -1; +} +.sidebar-wrapper__inner .sidebar > ul > li > ul { + border-radius: var(--radius) !important; + overflow: hidden !important; + gap: 2px !important; + margin: 8px; + margin-top: 0; + background: none; +} +.sidebar-wrapper__inner .sidebar > ul > li > ul > li { + border-radius: 8px; +} +.sidebar-wrapper__inner .sidebar > ul > li > ul > li:not(:first-child):not(:last-child) { + margin-block: 2px; +} +.sidebar-wrapper__inner .sidebar > ul > li > ul > li a { + padding: 14px 16px; + font-weight: 600; + border: 0; +} +.sidebar-wrapper__inner .sidebar > ul > li > ul > li:not(.selected) a { + background-color: rgba(150,150,250,0.1); +} +.admin-wrapper .content__heading { + margin-bottom: 2em; +} +.admin-wrapper h4 { + margin: 0; + border-bottom: 0; +} +.admin-wrapper form > h4 { + margin-top: 2em !important; + border-bottom: 0 !important; + margin-bottom: 0 !important; +} +.admin-wrapper .lead { + margin-bottom: 15px; +} +.admin-wrapper .flash-message, +.admin-wrapper .applications-list__item, +.admin-wrapper .filters-list__item { + border-radius: var(--radius); + border: 0; + overflow: clip; +} +.admin-wrapper .fields-row { + margin-inline: 0; + border-radius: var(--radius); + overflow: clip; + padding-top: 0; + gap: 2px; + display: flex; + flex-wrap: wrap; +} +.admin-wrapper .fields-group:not(.fields-row__column), +.admin-wrapper .fields-row { + margin-bottom: 1em !important; +} +.admin-wrapper .fields-row > .fields-row__column { + max-width: unset; + width: 300px; + border-radius: 0 !important; + display: flex; + flex-direction: column; + flex-grow: 1; + margin: 0 !important; +} +.admin-wrapper .fields-row > .fields-row__column .fields-group { + border-radius: 0 !important; + margin: 0 !important; +} +.admin-wrapper .fields-row > .fields-row__column .with_block_label { + display: flex; + flex-direction: column; + height: 100%; +} +.admin-wrapper .fields-row > .fields-row__column .with_block_label > .label_input { + display: flex; + flex-direction: column; + flex-grow: 1; +} +.admin-wrapper .fields-row > .fields-row__column .with_block_label > .label_input > textarea { + min-height: 300px; + flex-grow: 1; +} +.admin-wrapper .fields-row > .fields-row__column > :last-child { + flex-grow: 1; + align-items: flex-start; + border: 0; +} +.admin-wrapper .fields-row > .fields-row__column > :not(:first-child):not(:last-child) { + padding-block: 0.5em !important; + margin-block: -3px; +} +.admin-wrapper :not(.fields-row__column) > .fields-group, +.admin-wrapper .fields-row > *, +.admin-wrapper .label_input > ul, +.admin-wrapper .label_input__wrapper > ul, +.admin-wrapper .with_block_label.radio_buttons .label_input { + border-radius: var(--radius); + overflow: hidden; + padding: 0; + display: flex; + flex-direction: column; + gap: 2px; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > *, +.admin-wrapper .fields-row > * > *, +.admin-wrapper .label_input > ul > *, +.admin-wrapper .label_input__wrapper > ul > *, +.admin-wrapper .with_block_label.radio_buttons .label_input > * { + background-color: var(--elevated-color); + padding: 0.8rem; + margin-block: 0px; + position: relative; + border-radius: 0 !important; + overflow: hidden; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > *::after, +.admin-wrapper .fields-row > * > *::after, +.admin-wrapper .label_input > ul > *::after, +.admin-wrapper .label_input__wrapper > ul > *::after, +.admin-wrapper .with_block_label.radio_buttons .label_input > *::after { + content: ""; + position: absolute; + inset: 0; + background-color: var(--hover-color); + z-index: -1; + opacity: 0; + transition: opacity 0.2s; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > *:hover::after, +.admin-wrapper .fields-row > * > *:hover::after, +.admin-wrapper .label_input > ul > *:hover::after, +.admin-wrapper .label_input__wrapper > ul > *:hover::after, +.admin-wrapper .with_block_label.radio_buttons .label_input > *:hover::after, +.admin-wrapper :not(.fields-row__column) > .fields-group > *:focus-within::after, +.admin-wrapper .fields-row > * > *:focus-within::after, +.admin-wrapper .label_input > ul > *:focus-within::after, +.admin-wrapper .label_input__wrapper > ul > *:focus-within::after, +.admin-wrapper .with_block_label.radio_buttons .label_input > *:focus-within::after { + opacity: 1; +} +.admin-wrapper :not(.fields-row__column) > .fields-group label::before, +.admin-wrapper .fields-row > * label::before, +.admin-wrapper .label_input > ul label::before, +.admin-wrapper .label_input__wrapper > ul label::before, +.admin-wrapper .with_block_label.radio_buttons .label_input label::before { + content: ""; + position: absolute; + inset: -900px; +} +.admin-wrapper .label_input__wrapper > :not([type="checkbox"]):not(label) { + margin-top: 4px; +} +.admin-wrapper .label_input { + position: relative; +} +.admin-wrapper label { + margin: 0 !important; + display: flex; + align-items: center; + padding: 0 !important; +} +.admin-wrapper label input { + margin: 0; + margin-inline-end: 10px !important; + position: static !important; +} +.admin-wrapper input { + border-radius: var(--radius) !important; +} +.admin-wrapper .radio { + flex-grow: 1; +} +.admin-wrapper .radio:not(:last-child) { + margin-bottom: 0 !important; +} +.admin-wrapper .hint:last-child { + margin-bottom: 0 !important; +} +.admin-wrapper .input.with_block_label > .row { + flex-wrap: wrap; + margin: 0; +} +.admin-wrapper .input.with_block_label > .row > .string { + padding: 0; + width: 100%; + margin: 0; +} +.admin-wrapper .input.with_block_label > .row > .string:first-child input { + border-radius: var(--radius) var(--radius) 0 0 !important; +} +.admin-wrapper .input.with_block_label > .row > .string:last-child input { + border-radius: 0 0 var(--radius) var(--radius) !important; +} +.admin-wrapper .input.with_block_label > .row:not(:last-child) { + margin-bottom: 8px; +} +.admin-wrapper li.checkbox { + flex-grow: 1; + overflow: hidden; +} +.admin-wrapper ul { + flex-direction: row !important; + flex-wrap: wrap; + gap: 2px; + flex-grow: 1; +} +.admin-wrapper li.checkbox { + flex-basis: 45%; +} +.admin-wrapper .spacer { + border-top: 1px solid var(--border-color) !important; +} +.batch-table label { + padding-inline-start: 20px !important; +} +.batch-table, +.table, +:not(.batch-table__row__content) > table { + overflow: clip; + border-radius: var(--radius); + border-spacing: 0 2px; + border-collapse: separate; +} +.batch-table__toolbar, +.batch-table__row, +.batch-table tr > *, +.table tr > *, +:not(.batch-table__row__content) > table tr > * { + border: 0; + margin-bottom: 2px !important; +} +.batch-table td, +.table td, +:not(.batch-table__row__content) > table td, +.batch-table th, +.table th, +:not(.batch-table__row__content) > table th, +.batch-table__row { + position: relative; +} +.batch-table tr > td > div > span, +.table tr > td > div > span, +:not(.batch-table__row__content) > table tr > td > div > span, +.batch-table tr > th > div > span, +.table tr > th > div > span, +:not(.batch-table__row__content) > table tr > th > div > span { + padding-inline: 0.7em; + display: inline-block; +} +.keyboard-shortcuts { + padding: 0; + margin-top: -4px; +} +.keyboard-shortcuts table { + width: 100%; + border-radius: 0; +} +.keyboard-shortcuts td { + padding: 0.7em; +} +.batch-table__row, +.batch-table th, +.table th, +:not(.batch-table__row__content) > table th, +.batch-table > tbody > tr > td, +.table > tbody > tr > td, +:not(.batch-table__row__content) > table > tbody > tr > td, +.batch-table tfoot td, +.table tfoot td, +:not(.batch-table__row__content) > table tfoot td { + background: var(--elevated-color) !important; + vertical-align: middle; +} +.batch-table__row::after, +.batch-table th::after, +.table th::after, +:not(.batch-table__row__content) > table th::after, +.batch-table > tbody > tr > td::after, +.table > tbody > tr > td::after, +:not(.batch-table__row__content) > table > tbody > tr > td::after, +.batch-table tfoot td::after, +.table tfoot td::after, +:not(.batch-table__row__content) > table tfoot td::after { + content: ""; + position: absolute; + inset: 0 0; + background: var(--hover-color); + opacity: 0; + transition: 0.2s; + pointer-events: none; +} +.batch-table__row:hover::after, +.batch-table th:hover::after, +.table th:hover::after, +:not(.batch-table__row__content) > table th:hover::after, +.batch-table > tbody > tr > td:hover::after, +.table > tbody > tr > td:hover::after, +:not(.batch-table__row__content) > table > tbody > tr > td:hover::after, +.batch-table tfoot td:hover::after, +.table tfoot td:hover::after, +:not(.batch-table__row__content) > table tfoot td:hover::after, +.batch-table__row:focus-within::after, +.batch-table th:focus-within::after, +.table th:focus-within::after, +:not(.batch-table__row__content) > table th:focus-within::after, +.batch-table > tbody > tr > td:focus-within::after, +.table > tbody > tr > td:focus-within::after, +:not(.batch-table__row__content) > table > tbody > tr > td:focus-within::after, +.batch-table tfoot td:focus-within::after, +.table tfoot td:focus-within::after, +:not(.batch-table__row__content) > table tfoot td:focus-within::after { + opacity: 1; +} +.batch-table__row > a:first-child:last-child, +.batch-table th > a:first-child:last-child, +.table th > a:first-child:last-child, +:not(.batch-table__row__content) > table th > a:first-child:last-child, +.batch-table > tbody > tr > td > a:first-child:last-child, +.table > tbody > tr > td > a:first-child:last-child, +:not(.batch-table__row__content) > table > tbody > tr > td > a:first-child:last-child, +.batch-table tfoot td > a:first-child:last-child, +.table tfoot td > a:first-child:last-child, +:not(.batch-table__row__content) > table tfoot td > a:first-child:last-child { + margin: 0; + width: 100%; + padding: 0.5em; +} +.batch-table th:hover td:not([rowspan])::after, +.table th:hover td:not([rowspan])::after, +:not(.batch-table__row__content) > table th:hover td:not([rowspan])::after, +.batch-table tr:hover td:not([rowspan])::after, +.table tr:hover td:not([rowspan])::after, +:not(.batch-table__row__content) > table tr:hover td:not([rowspan])::after, +.batch-table th:hover th:not([rowspan])::after, +.table th:hover th:not([rowspan])::after, +:not(.batch-table__row__content) > table th:hover th:not([rowspan])::after, +.batch-table tr:hover th:not([rowspan])::after, +.table tr:hover th:not([rowspan])::after, +:not(.batch-table__row__content) > table tr:hover th:not([rowspan])::after { + opacity: 1 !important; +} +.batch-table th [rowspan]:hover ~ td::after, +.table th [rowspan]:hover ~ td::after, +:not(.batch-table__row__content) > table th [rowspan]:hover ~ td::after, +.batch-table tr [rowspan]:hover ~ td::after, +.table tr [rowspan]:hover ~ td::after, +:not(.batch-table__row__content) > table tr [rowspan]:hover ~ td::after { + opacity: 0 !important; +} +.batch-table th [rowspan]::after, +.table th [rowspan]::after, +:not(.batch-table__row__content) > table th [rowspan]::after, +.batch-table tr [rowspan]::after, +.table tr [rowspan]::after, +:not(.batch-table__row__content) > table tr [rowspan]::after { + inset-inline: -900px; +} +.layout-multiple-columns.layout-multiple-columns { + --column-header-height: 45px; +} +.layout-multiple-columns.layout-multiple-columns .column-header, +.layout-multiple-columns.layout-multiple-columns .scrollable, +.layout-multiple-columns.layout-multiple-columns .column-back-button, +.layout-multiple-columns.layout-multiple-columns .account__header__image { + border-radius: 0 !important; + gap: 0 !important; +} +.layout-multiple-columns.layout-multiple-columns .columns-area { + background: none !important; + height: 100%; +} +.layout-multiple-columns.layout-multiple-columns .columns-area > div { + border: 0 !important; + padding: 0 !important; +} +.layout-multiple-columns.layout-multiple-columns .columns-area > div:not(.drawer):not(:last-child) { + margin-inline-end: 2px !important; +} +.layout-multiple-columns.layout-multiple-columns .columns-area > div.column { + flex-grow: 1; + max-width: 600px; +} +.layout-multiple-columns.layout-multiple-columns .columns-area > div:first-child { + margin-inline-start: auto !important; +} +.layout-multiple-columns.layout-multiple-columns .columns-area > div:last-child { + margin-inline-end: auto !important; +} +.layout-multiple-columns.layout-multiple-columns .drawer.drawer { + padding-top: 15px !important; + overflow: clip; + flex-grow: 1; + max-width: 350px; +} +.drawer__header { + border-radius: var(--radius-round); + background: var(--elevated-color); + margin-inline: 15px; + overflow: hidden; + border: 0 !important; +} +.drawer__header a { + border: 0; +} +.drawer__header a:first-child { + padding-inline-start: 15px !important; +} +.drawer__header a:last-child { + padding-inline-end: 15px !important; +} +.layout-multiple-columns.layout-multiple-columns .drawer.drawer .search { + z-index: 2; + margin-inline: 15px; + margin-bottom: 0; +} +.layout-multiple-columns.layout-multiple-columns .drawer.drawer > .drawer__pager { + border: 0; + overflow: visible !important; +} +.layout-multiple-columns.layout-multiple-columns .drawer.drawer .drawer__inner:not(.darker) { + margin-top: -20px; + padding-top: 30px; + height: unset; + bottom: 0; +} +.layout-multiple-columns.layout-multiple-columns .drawer.drawer .drawer__inner__mastodon { + margin-inline: -6px; + z-index: -1; +} +.layout-multiple-columns.layout-multiple-columns .compose-form { + margin-inline: 5px; +} +.layout-multiple-columns.layout-multiple-columns .drawer__inner:not(.darker), +.layout-multiple-columns.layout-multiple-columns .drawer__inner__mastodon { + background-color: transparent !important; +} +.layout-multiple-columns.layout-multiple-columns .darker { + background-color: var(--surface-background-color); + border-radius: var(--radius) var(--radius) 0 0; + top: 10px; + width: unset; + inset-inline: 2px; +} +.layout-multiple-columns.layout-multiple-columns .column { + background: none; +} +.layout-multiple-columns.layout-multiple-columns .column::after { + content: ""; + position: absolute; + inset: 0; + top: var(--column-header-height); + background: var(--background-color); + z-index: -1; +} +.layout-multiple-columns.layout-multiple-columns .column::before, +.layout-multiple-columns.layout-multiple-columns .column::after { + top: var(--column-header-height); + border-radius: var(--radius) var(--radius) 0 0; +} +.layout-multiple-columns.layout-multiple-columns .column-back-button, +.layout-multiple-columns.layout-multiple-columns .column-header__wrapper { + height: var(--column-header-height); +} +.layout-multiple-columns.layout-multiple-columns .column-back-button.active, +.layout-multiple-columns.layout-multiple-columns .column-header__wrapper.active { + box-shadow: none; +} +.layout-multiple-columns.layout-multiple-columns .column-back-button.active::before, +.layout-multiple-columns.layout-multiple-columns .column-header__wrapper.active::before { + inset-inline: var(--radius); +} +.layout-multiple-columns.layout-multiple-columns .column-back-button .column-header, +.layout-multiple-columns.layout-multiple-columns .column-header__wrapper .column-header { + border: 0 !important; + height: var(--column-header-height); +} +.layout-multiple-columns.layout-multiple-columns .column-back-button .column-header__buttons, +.layout-multiple-columns.layout-multiple-columns .column-header__wrapper .column-header__buttons { + height: 100%; +} +.layout-multiple-columns.layout-multiple-columns .column-back-button svg, +.layout-multiple-columns.layout-multiple-columns .column-header__wrapper svg { + height: 1.4em; +} +.layout-multiple-columns.layout-multiple-columns .column-back-button + .scrollable.scrollable, +.layout-multiple-columns.layout-multiple-columns .column-header__wrapper + .scrollable.scrollable { + border-radius: var(--radius) var(--radius) 0 0 !important; + overflow-y: scroll; +} +.layout-multiple-columns.layout-multiple-columns .getting-started__trends { + padding: 0px 20px; +} +.column[aria-labelledby="Misc"] > .scrollable, +.column[aria-labelledby="Getting-started"] > .scrollable, +.getting-started { position: relative; padding: 5px 10px !important; } -.getting-started .getting-started__wrapper, -#mastodon .column[aria-labelledby="Getting-started"] > .scrollable.scrollable.scrollable .getting-started__wrapper { +.column[aria-labelledby="Misc"] > .scrollable .getting-started__wrapper, +.column[aria-labelledby="Getting-started"] > .scrollable .getting-started__wrapper, +.getting-started .getting-started__wrapper { background: none; } -.getting-started .getting-started__wrapper a, -#mastodon .column[aria-labelledby="Getting-started"] > .scrollable.scrollable.scrollable .getting-started__wrapper a, -.getting-started .getting-started__wrapper .column-subheading, -#mastodon .column[aria-labelledby="Getting-started"] > .scrollable.scrollable.scrollable .getting-started__wrapper .column-subheading { +.column[aria-labelledby="Misc"] > .scrollable .column-link, +.column[aria-labelledby="Getting-started"] > .scrollable .column-link, +.getting-started .column-link, +.column[aria-labelledby="Misc"] > .scrollable .column-subheading, +.column[aria-labelledby="Getting-started"] > .scrollable .column-subheading, +.getting-started .column-subheading { border: 0 !important; - padding: 20px; + padding: 20px !important; background: none; } -.getting-started .getting-started__footer, -#mastodon .column[aria-labelledby="Getting-started"] > .scrollable.scrollable.scrollable .getting-started__footer { +.column[aria-labelledby="Misc"] > .scrollable .getting-started__footer, +.column[aria-labelledby="Getting-started"] > .scrollable .getting-started__footer, +.getting-started .getting-started__footer { padding-inline: 20px; } -.getting-started .getting-started__footer a span, -#mastodon .column[aria-labelledby="Getting-started"] > .scrollable.scrollable.scrollable .getting-started__footer a span { +.column[aria-labelledby="Misc"] > .scrollable .getting-started__footer a span, +.column[aria-labelledby="Getting-started"] > .scrollable .getting-started__footer a span, +.getting-started .getting-started__footer a span { font-size: 1.1em !important; line-height: 2; } -.about .account { - padding: 0 !important; - overflow: visible !important; -} -.about .account::after { - content: unset !important; -} -.about .about__meta { - border-radius: var(--radius); -} -.about .about__section__title { - position: sticky; - top: 0; - z-index: 2; - border-radius: 0 !important; -} -.about .about__section__body { - animation: slideDowFade 0.3s 0.1s backwards cubic-bezier(0, 1, 0, 1.2); -} -.about .about__section { - margin: 10px 0px !important; - margin-top: 20px; - border-radius: var(--radius); - overflow: clip; - transition: margin 0.2s cubic-bezier(0, 1, 0, 1), border-radius 0.2s; -} -.about .about__section:not(.active) { - border: 0 !important; -} -.about .about__section:not(.active) .about__section__title { - background: var(--elevated-color) !important; - border-radius: var(--radius); -} -#mastodon.modal-layout { - overflow: hidden; -} -#mastodon.modal-layout .container-alt { - background: inherit; - height: 100%; -} -#mastodon.modal-layout .container-alt .public-layout { - padding: 0 !important; -} -#mastodon.modal-layout .container-alt .form-container { - max-width: 500px !important; - padding: 0; - background: inherit; - display: flex; - flex-direction: column; - justify-content: center; - height: 100%; -} -#mastodon.modal-layout .container-alt .form-container h2 { - margin: 0; - padding: 20px; - font-weight: 600; -} -#mastodon.modal-layout .container-alt .form-container .follow-prompt { - margin: 0; - border-radius: 0 0 var(--radius) var(--radius); - overflow-y: auto; -} -#mastodon.modal-layout .container-alt .form-container .follow-prompt .activity-stream { - margin: 0 !important; -} -#mastodon.modal-layout .container-alt .entry { - border-radius: var(--radius) !important; -} -#mastodon.modal-layout #new_remote_follow { - position: sticky; - bottom: 0; - padding: 20px; - padding-bottom: 60px; - background: inherit; -} -@media (min-width: 890px) and (max-width: 1174px) { - .layout-single-column #mastodon .ui__header { +@media (min-width: 890px) and (max-width: 1175px) { + .ui__header { background: none !important; - border: 0; - margin-inline-end: 280px; - padding-top: 12px; - position: static; backdrop-filter: none; + position: relative; + margin-inline-end: 285px; + border: 0 !important; } - .layout-single-column #mastodon .columns-area__panels__main { - margin-inline: 10px !important; - margin-top: 10px; - } - .layout-single-column #mastodon .columns-area__panels__main .columns-area { - padding-bottom: 0 !important; - } - .layout-single-column #mastodon .dismissable-banner { - border-top-left-radius: 0 !important; - } - .layout-single-column #mastodon .navigation-panel { - background: none; - border: 0; - width: 265px !important; - padding-bottom: 10px; + .navigation-panel { + padding-inline: 10px; } } @media (max-width: 889px) { - #mastodon .scrollable:not(.scrollable--flex) { - padding: 0px !important; - padding-bottom: 40vh !important; - } - #mastodon .scrollable:not(.scrollable--flex)::before { - content: ""; - position: absolute; - inset: 0; - background-color: inherit; - z-index: -1; - } - #mastodon .scrollable:not(.scrollable--flex) .account-timeline__header, - #mastodon .scrollable:not(.scrollable--flex) .dismissable-banner { - margin: 0px !important; - } - #mastodon .focusable, - #mastodon .entry, - #mastodon .statuses-grid__item .detailed-status, - #mastodon .trends__item, - #mastodon .story, - #mastodon .account-card, - #mastodon .scrollable :not(.focusable) > .account, - #mastodon .timeline-hint { - border-radius: 0; - } - #mastodon .focusable::before, - #mastodon .entry::before, - #mastodon .statuses-grid__item .detailed-status::before, - #mastodon .trends__item::before, - #mastodon .story::before, - #mastodon .account-card::before, - #mastodon .scrollable :not(.focusable) > .account::before, - #mastodon .timeline-hint::before { - border-radius: 0 !important; - } - #mastodon .focusable::after, - #mastodon .entry::after, - #mastodon .statuses-grid__item .detailed-status::after, - #mastodon .trends__item::after, - #mastodon .story::after, - #mastodon .account-card::after, - #mastodon .scrollable :not(.focusable) > .account::after, - #mastodon .timeline-hint::after { - inset-inline: 0 !important; - } - #mastodon [class*="explore__"] > * { - border-radius: var(--radius); - } - #mastodon .detailed-status__wrapper { - margin: 0 !important; - } - #mastodon .status__action-bar { - margin-bottom: 0px; - gap: 0; - margin-inline-end: 0 !important; - } - #mastodon .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 .status__action-bar > .icon-button:first-child { - margin-inline-start: -8px !important; - } - #mastodon .status__action-bar, - #mastodon .detailed-status__action-bar, - #mastodon .picture-in-picture__footer { - flex-wrap: wrap; - } - #mastodon .column-header { - border-inline: 0; - } .ui__header { border-bottom: 0; box-sizing: content-box; - min-height: 55px; height: auto; position: relative; box-sizing: border-box; gap: 5px 10px; flex-wrap: wrap; - padding-block: 8px; + padding-block: 12px; border: 0 !important; backdrop-filter: none !important; background: none !important; @@ -3387,7 +2710,7 @@ a:focus-visible, right: 0; } .ui__header [href="/search"] { - margin-inline-end: 5px; + display: none; } .ui__header [href="/publish"] { position: fixed; @@ -3452,11 +2775,11 @@ a:focus-visible, position: static !important; width: unset; } - #mastodon .tabs-bar__wrapper { + .tabs-bar__wrapper { top: 0; z-index: 200; } - #mastodon .tabs-bar__wrapper::after { + .tabs-bar__wrapper::after { content: ""; position: absolute; inset: 0; @@ -3464,103 +2787,73 @@ a:focus-visible, pointer-events: none; z-index: 2; } - #mastodon .column-back-button.column-back-button { - border-radius: 0 !important; - } @supports selector(.foxxo:has(.waf)) { - #mastodon [href="/publish"] { + [href="/publish"] { bottom: 70px !important; } - #mastodon .columns-area__panels { + .columns-area__panels { flex-direction: column; } - #mastodon .columns-area__panels__main { + .columns-area__panels__main { width: 100%; border-radius: var(--radius) !important; margin: 0 !important; border: 0 !important; overflow: clip !important; + flex-grow: 1; } - #mastodon .tabs-bar__wrapper { + .tabs-bar__wrapper { transition: none !important; } - #mastodon .columns-area__panels__pane--navigational { + .columns-area__panels__pane--navigational { display: contents; } - #mastodon .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { - position: relative !important; - inset: unset !important; + .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { + position: static !important; order: -1; width: unset; height: auto; white-space: nowrap; } - #mastodon .columns-area__panels__pane--navigational .navigation-panel { + .columns-area__panels__pane--navigational .navigation-panel { flex-direction: row; margin: 0; - padding: 0; - padding: 0 8px; - height: 5em; + padding: 12px; border-top: 1px solid; - overflow: scroll hidden; align-items: center; + overflow: visible; + height: auto; } - #mastodon .columns-area__panels__pane--navigational .navigation-panel::-webkit-scrollbar { + .columns-area__panels__pane--navigational .navigation-panel .flex-spacer { display: none; } - #mastodon .columns-area__panels__pane--navigational hr { + .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 { + .columns-area__panels__pane--navigational .trends__item__name > span, + .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 { + .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; + .columns-area__panels__pane--navigational .navigation-panel__legal { + display: contents; } - #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 { + .columns-area__panels__pane--navigational a { position: relative; overflow: hidden; border-radius: var(--radius); font-weight: 600; font-size: 1.1em; + flex-grow: 1; text-align: center; min-width: max-content; + justify-content: center; transition: padding 0.2s; + padding-inline: 6px; } - #mastodon .columns-area__panels__pane--navigational a::before, - #mastodon .columns-area__panels__pane--navigational h4 > span::before { + .columns-area__panels__pane--navigational a::before { content: ""; position: absolute; inset: 0; @@ -3569,83 +2862,80 @@ a:focus-visible, 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 { + .columns-area__panels__pane--navigational a svg { width: 1em; height: 1em; + margin-inline-end: 0 !important; } - #mastodon .columns-area__panels__pane--navigational a.active, - #mastodon .columns-area__panels__pane--navigational h4 > span.active { - padding-inline: 1.2em; - margin-inline: 4px; + .columns-area__panels__pane--navigational a.active { position: relative; } - #mastodon .columns-area__panels__pane--navigational a.active::before, - #mastodon .columns-area__panels__pane--navigational h4 > span.active::before { + .columns-area__panels__pane--navigational a.active::before { inset: 0 !important; opacity: 0.1; } - #mastodon .columns-area__panels__pane--navigational span { - display: unset; + .columns-area__panels__pane--navigational span { + display: unset !important; + width: 0; + flex-grow: 1; + max-width: max-content; + overflow: hidden; + text-overflow: ellipsis; } } - #mastodon:not(:has(.navigation-panel__sign-in-banner)) .columns-area__panels__main { + :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 { + :not(:has(.navigation-panel__sign-in-banner)) .ui__header { z-index: 199; } - #mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header::before, - #mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header::after { + :not(:has(.navigation-panel__sign-in-banner)) .ui__header::before, + :not(:has(.navigation-panel__sign-in-banner)) .ui__header::after { all: unset; content: ""; position: fixed; bottom: 0; inset-inline: 0; - background: var(--background-color-tint, inherit); - border-top: 1px solid var(--divider); + background: var(--background-color); z-index: 200; - height: 61px; + height: 60px; 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 { + :not(:has(.navigation-panel__sign-in-banner)) .ui__header::after { background: var(--elevated-tint); - height: 60px; + border: 0; } - #mastodon:not(:has(.navigation-panel__sign-in-banner)) .navigation-panel { + :not(:has(.navigation-panel__sign-in-banner)) .navigation-panel { + flex-wrap: wrap; border-top: none; - margin-top: -10px; + margin-bottom: 8px; + padding-block: 0; } - #mastodon:not(:has(.navigation-panel__sign-in-banner)) .navigation-panel a { - font-size: 1em; + :not(:has(.navigation-panel__sign-in-banner)) .navigation-panel a span { + display: none !important; } - #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:not(:has(.navigation-panel__sign-in-banner)) .column { - min-height: 100vh; + :not(:has(.navigation-panel__sign-in-banner)) .navigation-panel [href="/settings/preferences"] { + position: absolute; + top: 12px; + inset-inline-end: 60px; + z-index: 900; + padding-block: 0; + height: 35px; + width: 35px; + box-sizing: border-box; + margin: 0; + border: 1px solid var(--border-color); } :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'] { + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'], + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'], + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'], + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'], + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] { position: fixed !important; display: flex; flex-direction: column; @@ -3659,984 +2949,310 @@ a:focus-visible, 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, - #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 { + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home']::before, + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications']::before, + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore']::before, + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local']::before, + :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 { + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] span, + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] span, + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] span, + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] span, + :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='/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 { + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] svg, + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] svg, + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] svg, + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] svg, + :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)) .column-link[href='/home'] { - left: 0%; + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] { + left: 2%; } - #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] { - left: 19.25%; + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] { + left: 21.25%; } - #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] { - left: 38.5%; + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] { + left: 40.5%; } - #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] { - left: 57.75%; + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] { + left: 59.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; - 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: 0.9em; - } - #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: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__main { - padding: 0 !important; - max-width: unset; - flex-grow: 1; - margin-top: 1px; - } - .is-composing .columns-area__panels__main { - padding-bottom: 40px !important; - } - #mastodon .columns-area__panels__main .scrollable, - #mastodon .columns-area__panels__main .account__header__image, - #mastodon .columns-area__panels__main > div { - border-radius: 0 !important; - } - #mastodon .dismissable-banner { - margin: 0; - padding-left: 4px; - } - #mastodon .status .status__avatar { - width: 42px !important; - min-width: 45px !important; - height: 45px !important; - background-size: 45px !important; - } - #mastodon .status .status__avatar > div { - width: 100% !important; - height: 100% !important; - background-size: cover !important; - } - #mastodon .status::before { - content: unset; - } - #mastodon .status__action-bar { - margin-bottom: -5px; - } - #mastodon .status__action-bar .icon-button { - margin: 0 !important; - justify-content: center; - } - #mastodon .icon-button:after { - content: unset !important; - } - #mastodon .navigation-panel { - margin-top: -200px; - padding-top: 200px; - height: calc(100vh + 200px - 55px); - border: 0; - border-inline-start: 1px solid; - padding-bottom: 90px; - } - #mastodon .columns-area { - padding-bottom: 0 !important; - overflow: hidden !important; - } - #mastodon .getting-started { - padding: 20px; - padding-bottom: 60px; - } - #mastodon .getting-started__wrapper { - flex-grow: 1; - overflow: visible !important; - } - #mastodon .compose-form { - padding: 10px; - margin-bottom: 100px; - } - #mastodon .compose-form::before { - content: ""; - position: absolute; - inset: 0; - background: var(--elevated-color); - z-index: -1; - } - #mastodon .about.about.about { - padding-inline: 10px !important; - } - #mastodon .about.about.about .account { - margin-top: 0; - } - #mastodon .about.about.about .about__header__hero, - #mastodon .about.about.about .about__section.active { - margin-inline: -11px !important; - width: unset; - border-radius: 0; - } - #mastodon .about.about.about .about__section.active { - margin-block: 20px !important; - } - #mastodon .about.about.about .about__section { - margin-bottom: 0; - border-bottom: 1px solid; + :not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] { + left: 79%; } } -.admin-wrapper .sidebar-wrapper { - overflow: visible !important; - width: unset; +#hover-card, +.dropdown-menu { + border-radius: var(--radius); + animation: scaleIn 0.2s cubic-bezier(0, 0, 0, 1.1); } -.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner { - position: sticky; - top: 0; - max-height: 100vh !important; - overflow-y: auto !important; - pointer-events: all !important; - z-index: 100; +.dropdown-menu__container__list { + overflow: hidden auto; + border-radius: var(--radius); + max-height: 70vh; } -.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .fa { - margin-inline-end: 1em !important; -} -.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li { +.dropdown-menu__item { overflow: hidden; - margin-inline: 15px !important; } -.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li > a:not(.selected) { - background: none; +.dropdown-menu__item a { + padding: 0.7em 1em !important; + transition: background-color 0.2s, color 0.2s; + min-width: 150px; } -.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li a { - display: flex !important; - align-items: center; - white-space: unset; +.dropdown-menu__separator { + margin: 0 !important; } -.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li.selected { - margin: 6px; +.interaction-modal { border-radius: var(--radius); + overflow-y: auto; + box-sizing: border-box; + width: 700px; + text-align: center; } -.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li.selected > a.selected { - font-weight: 600; - color: unset; - position: relative; - overflow: visible; - border-radius: 0 !important; - border: 0; -} -.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li.selected > a.selected::after { - content: ""; - position: absolute; - top: 100%; - inset-inline: 0; - height: 9999px; - background: inherit; - z-index: -1; -} -.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li > ul { - border-radius: var(--radius) !important; - overflow: hidden !important; - gap: 2px !important; - margin: 8px; - margin-top: 0; - background: none; -} -.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li > ul > li { - border-radius: 8px; -} -.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li > ul > li:not(:first-child):not(:last-child) { - margin-block: 2px; -} -.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li > ul > li a { - padding: 14px 16px; - font-weight: 600; - border: 0; -} -.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li > ul > li:not(.selected) a { - background-color: rgba(150,150,250,0.1); -} -.admin-wrapper .content__heading { - margin-bottom: 2em; -} -.admin-wrapper h4 { - margin: 0; - border-bottom: 0; -} -.admin-wrapper form > h4 { - margin-top: 2em !important; - border-bottom: 0 !important; - margin-bottom: 0 !important; -} -.admin-wrapper .flash-message, -.admin-wrapper .applications-list__item, -.admin-wrapper .filters-list__item { - border-radius: var(--radius); - border: 0; - overflow: clip; -} -.admin-wrapper .fields-row { - margin-inline: 0; - border-radius: var(--radius); - overflow: clip; - padding-top: 0; - gap: 2px; +.interaction-modal__choices { + gap: 10px; display: flex; flex-wrap: wrap; } -.admin-wrapper .fields-group:not(.fields-row__column), -.admin-wrapper .fields-row { - margin-bottom: 1em !important; -} -.admin-wrapper .fields-row > .fields-row__column { - max-width: unset; - width: 300px; - border-radius: 0 !important; - display: flex; - flex-direction: column; - flex-grow: 1; - margin: 0 !important; -} -.admin-wrapper .fields-row > .fields-row__column .fields-group { - border-radius: 0 !important; - margin: 0 !important; -} -.admin-wrapper .fields-row > .fields-row__column .fields-group > .with_block_label { - display: flex; - flex-direction: column; - height: 100%; -} -.admin-wrapper .fields-row > .fields-row__column .fields-group > .with_block_label > .label_input { - flex-grow: 1; -} -.admin-wrapper .fields-row > .fields-row__column .fields-group > .with_block_label > .label_input > textarea { - min-height: 100%; -} -.admin-wrapper .fields-row > .fields-row__column > :last-child { - flex-grow: 1; - align-items: flex-start; - border: 0; -} -.admin-wrapper .fields-row > .fields-row__column > :not(:first-child):not(:last-child) { - padding-block: 0.5em !important; - margin-block: -3px; -} -.admin-wrapper :not(.fields-row__column) > .fields-group, -.admin-wrapper .fields-row > *, -.admin-wrapper .label_input > ul, -.admin-wrapper .label_input__wrapper > ul, -.admin-wrapper .radio_buttons > ul, -.admin-wrapper .with_block_label.radio_buttons .label_input { +.interaction-modal__choices .interaction-modal__choices__choice { + max-height: 50vh; + overflow-y: auto; + border: 1px solid var(--border-color); + padding: 24px; + margin: 0; border-radius: var(--radius); - overflow: clip; - padding: 0; - display: flex; - flex-direction: column; - gap: 2px; -} -.admin-wrapper :not(.fields-row__column) > .fields-group > *, -.admin-wrapper .fields-row > * > *, -.admin-wrapper .label_input > ul > *, -.admin-wrapper .label_input__wrapper > ul > *, -.admin-wrapper .radio_buttons > ul > *, -.admin-wrapper .with_block_label.radio_buttons .label_input > * { - background-color: var(--elevated-color); - padding: 0.8rem; - margin-block: 0px; + transition: background 0.2s; position: relative; - border-radius: 0 !important; } -.admin-wrapper :not(.fields-row__column) > .fields-group > *:not(p):not(h6):not(.input-copy)::after, -.admin-wrapper .fields-row > * > *:not(p):not(h6):not(.input-copy)::after, -.admin-wrapper .label_input > ul > *:not(p):not(h6):not(.input-copy)::after, -.admin-wrapper .label_input__wrapper > ul > *:not(p):not(h6):not(.input-copy)::after, -.admin-wrapper .radio_buttons > ul > *:not(p):not(h6):not(.input-copy)::after, -.admin-wrapper .with_block_label.radio_buttons .label_input > *:not(p):not(h6):not(.input-copy)::after { - content: ""; - position: absolute; - inset: 0; - background-color: var(--hover-color); - z-index: -1; - opacity: 0; - transition: opacity 0.2s; -} -.admin-wrapper :not(.fields-row__column) > .fields-group > *:not(p):not(h6):not(.input-copy):hover::after, -.admin-wrapper .fields-row > * > *:not(p):not(h6):not(.input-copy):hover::after, -.admin-wrapper .label_input > ul > *:not(p):not(h6):not(.input-copy):hover::after, -.admin-wrapper .label_input__wrapper > ul > *:not(p):not(h6):not(.input-copy):hover::after, -.admin-wrapper .radio_buttons > ul > *:not(p):not(h6):not(.input-copy):hover::after, -.admin-wrapper .with_block_label.radio_buttons .label_input > *:not(p):not(h6):not(.input-copy):hover::after, -.admin-wrapper :not(.fields-row__column) > .fields-group > *:not(p):not(h6):not(.input-copy):focus-within::after, -.admin-wrapper .fields-row > * > *:not(p):not(h6):not(.input-copy):focus-within::after, -.admin-wrapper .label_input > ul > *:not(p):not(h6):not(.input-copy):focus-within::after, -.admin-wrapper .label_input__wrapper > ul > *:not(p):not(h6):not(.input-copy):focus-within::after, -.admin-wrapper .radio_buttons > ul > *:not(p):not(h6):not(.input-copy):focus-within::after, -.admin-wrapper .with_block_label.radio_buttons .label_input > *:not(p):not(h6):not(.input-copy):focus-within::after { - opacity: 1; -} -.admin-wrapper :not(.fields-row__column) > .fields-group .input-copy__wrapper, -.admin-wrapper .fields-row > * .input-copy__wrapper, -.admin-wrapper .label_input > ul .input-copy__wrapper, -.admin-wrapper .label_input__wrapper > ul .input-copy__wrapper, -.admin-wrapper .radio_buttons > ul .input-copy__wrapper, -.admin-wrapper .with_block_label.radio_buttons .label_input .input-copy__wrapper { - border: 1px solid var(--border-color-2); - border-radius: var(--radius); -} -.admin-wrapper :not(.fields-row__column) > .fields-group > .input, -.admin-wrapper .fields-row > * > .input, -.admin-wrapper .label_input > ul > .input, -.admin-wrapper .label_input__wrapper > ul > .input, -.admin-wrapper .radio_buttons > ul > .input, -.admin-wrapper .with_block_label.radio_buttons .label_input > .input, -.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox, -.admin-wrapper .fields-row > * .checkbox, -.admin-wrapper .label_input > ul .checkbox, -.admin-wrapper .label_input__wrapper > ul .checkbox, -.admin-wrapper .radio_buttons > ul .checkbox, -.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox, -.admin-wrapper :not(.fields-row__column) > .fields-group .radio, -.admin-wrapper .fields-row > * .radio, -.admin-wrapper .label_input > ul .radio, -.admin-wrapper .label_input__wrapper > ul .radio, -.admin-wrapper .radio_buttons > ul .radio, -.admin-wrapper .with_block_label.radio_buttons .label_input .radio { - flex-grow: 1; -} -.admin-wrapper :not(.fields-row__column) > .fields-group > .input:not(:last-child), -.admin-wrapper .fields-row > * > .input:not(:last-child), -.admin-wrapper .label_input > ul > .input:not(:last-child), -.admin-wrapper .label_input__wrapper > ul > .input:not(:last-child), -.admin-wrapper .radio_buttons > ul > .input:not(:last-child), -.admin-wrapper .with_block_label.radio_buttons .label_input > .input:not(:last-child), -.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox:not(:last-child), -.admin-wrapper .fields-row > * .checkbox:not(:last-child), -.admin-wrapper .label_input > ul .checkbox:not(:last-child), -.admin-wrapper .label_input__wrapper > ul .checkbox:not(:last-child), -.admin-wrapper .radio_buttons > ul .checkbox:not(:last-child), -.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox:not(:last-child), -.admin-wrapper :not(.fields-row__column) > .fields-group .radio:not(:last-child), -.admin-wrapper .fields-row > * .radio:not(:last-child), -.admin-wrapper .label_input > ul .radio:not(:last-child), -.admin-wrapper .label_input__wrapper > ul .radio:not(:last-child), -.admin-wrapper .radio_buttons > ul .radio:not(:last-child), -.admin-wrapper .with_block_label.radio_buttons .label_input .radio:not(:last-child) { - margin-bottom: 2px; +.interaction-modal__choices .prose:last-child { margin-bottom: 0; } -.admin-wrapper :not(.fields-row__column) > .fields-group > .input.radio .hint, -.admin-wrapper .fields-row > * > .input.radio .hint, -.admin-wrapper .label_input > ul > .input.radio .hint, -.admin-wrapper .label_input__wrapper > ul > .input.radio .hint, -.admin-wrapper .radio_buttons > ul > .input.radio .hint, -.admin-wrapper .with_block_label.radio_buttons .label_input > .input.radio .hint, -.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox.radio .hint, -.admin-wrapper .fields-row > * .checkbox.radio .hint, -.admin-wrapper .label_input > ul .checkbox.radio .hint, -.admin-wrapper .label_input__wrapper > ul .checkbox.radio .hint, -.admin-wrapper .radio_buttons > ul .checkbox.radio .hint, -.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox.radio .hint, -.admin-wrapper :not(.fields-row__column) > .fields-group .radio.radio .hint, -.admin-wrapper .fields-row > * .radio.radio .hint, -.admin-wrapper .label_input > ul .radio.radio .hint, -.admin-wrapper .label_input__wrapper > ul .radio.radio .hint, -.admin-wrapper .radio_buttons > ul .radio.radio .hint, -.admin-wrapper .with_block_label.radio_buttons .label_input .radio.radio .hint, -.admin-wrapper :not(.fields-row__column) > .fields-group > .input.checkbox .hint, -.admin-wrapper .fields-row > * > .input.checkbox .hint, -.admin-wrapper .label_input > ul > .input.checkbox .hint, -.admin-wrapper .label_input__wrapper > ul > .input.checkbox .hint, -.admin-wrapper .radio_buttons > ul > .input.checkbox .hint, -.admin-wrapper .with_block_label.radio_buttons .label_input > .input.checkbox .hint, -.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox.checkbox .hint, -.admin-wrapper .fields-row > * .checkbox.checkbox .hint, -.admin-wrapper .label_input > ul .checkbox.checkbox .hint, -.admin-wrapper .label_input__wrapper > ul .checkbox.checkbox .hint, -.admin-wrapper .radio_buttons > ul .checkbox.checkbox .hint, -.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox.checkbox .hint, -.admin-wrapper :not(.fields-row__column) > .fields-group .radio.checkbox .hint, -.admin-wrapper .fields-row > * .radio.checkbox .hint, -.admin-wrapper .label_input > ul .radio.checkbox .hint, -.admin-wrapper .label_input__wrapper > ul .radio.checkbox .hint, -.admin-wrapper .radio_buttons > ul .radio.checkbox .hint, -.admin-wrapper .with_block_label.radio_buttons .label_input .radio.checkbox .hint, -.admin-wrapper :not(.fields-row__column) > .fields-group > .input.radio label, -.admin-wrapper .fields-row > * > .input.radio label, -.admin-wrapper .label_input > ul > .input.radio label, -.admin-wrapper .label_input__wrapper > ul > .input.radio label, -.admin-wrapper .radio_buttons > ul > .input.radio label, -.admin-wrapper .with_block_label.radio_buttons .label_input > .input.radio label, -.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox.radio label, -.admin-wrapper .fields-row > * .checkbox.radio label, -.admin-wrapper .label_input > ul .checkbox.radio label, -.admin-wrapper .label_input__wrapper > ul .checkbox.radio label, -.admin-wrapper .radio_buttons > ul .checkbox.radio label, -.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox.radio label, -.admin-wrapper :not(.fields-row__column) > .fields-group .radio.radio label, -.admin-wrapper .fields-row > * .radio.radio label, -.admin-wrapper .label_input > ul .radio.radio label, -.admin-wrapper .label_input__wrapper > ul .radio.radio label, -.admin-wrapper .radio_buttons > ul .radio.radio label, -.admin-wrapper .with_block_label.radio_buttons .label_input .radio.radio label, -.admin-wrapper :not(.fields-row__column) > .fields-group > .input.checkbox label, -.admin-wrapper .fields-row > * > .input.checkbox label, -.admin-wrapper .label_input > ul > .input.checkbox label, -.admin-wrapper .label_input__wrapper > ul > .input.checkbox label, -.admin-wrapper .radio_buttons > ul > .input.checkbox label, -.admin-wrapper .with_block_label.radio_buttons .label_input > .input.checkbox label, -.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox.checkbox label, -.admin-wrapper .fields-row > * .checkbox.checkbox label, -.admin-wrapper .label_input > ul .checkbox.checkbox label, -.admin-wrapper .label_input__wrapper > ul .checkbox.checkbox label, -.admin-wrapper .radio_buttons > ul .checkbox.checkbox label, -.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox.checkbox label, -.admin-wrapper :not(.fields-row__column) > .fields-group .radio.checkbox label, -.admin-wrapper .fields-row > * .radio.checkbox label, -.admin-wrapper .label_input > ul .radio.checkbox label, -.admin-wrapper .label_input__wrapper > ul .radio.checkbox label, -.admin-wrapper .radio_buttons > ul .radio.checkbox label, -.admin-wrapper .with_block_label.radio_buttons .label_input .radio.checkbox label { - margin-bottom: 0 !important; -} -.admin-wrapper :not(.fields-row__column) > .fields-group > .input .label_input, -.admin-wrapper .fields-row > * > .input .label_input, -.admin-wrapper .label_input > ul > .input .label_input, -.admin-wrapper .label_input__wrapper > ul > .input .label_input, -.admin-wrapper .radio_buttons > ul > .input .label_input, -.admin-wrapper .with_block_label.radio_buttons .label_input > .input .label_input, -.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox .label_input, -.admin-wrapper .fields-row > * .checkbox .label_input, -.admin-wrapper .label_input > ul .checkbox .label_input, -.admin-wrapper .label_input__wrapper > ul .checkbox .label_input, -.admin-wrapper .radio_buttons > ul .checkbox .label_input, -.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox .label_input, -.admin-wrapper :not(.fields-row__column) > .fields-group .radio .label_input, -.admin-wrapper .fields-row > * .radio .label_input, -.admin-wrapper .label_input > ul .radio .label_input, -.admin-wrapper .label_input__wrapper > ul .radio .label_input, -.admin-wrapper .radio_buttons > ul .radio .label_input, -.admin-wrapper .with_block_label.radio_buttons .label_input .radio .label_input { - flex-direction: column; -} -.admin-wrapper :not(.fields-row__column) > .fields-group > .input .label_input > label, -.admin-wrapper .fields-row > * > .input .label_input > label, -.admin-wrapper .label_input > ul > .input .label_input > label, -.admin-wrapper .label_input__wrapper > ul > .input .label_input > label, -.admin-wrapper .radio_buttons > ul > .input .label_input > label, -.admin-wrapper .with_block_label.radio_buttons .label_input > .input .label_input > label, -.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox .label_input > label, -.admin-wrapper .fields-row > * .checkbox .label_input > label, -.admin-wrapper .label_input > ul .checkbox .label_input > label, -.admin-wrapper .label_input__wrapper > ul .checkbox .label_input > label, -.admin-wrapper .radio_buttons > ul .checkbox .label_input > label, -.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox .label_input > label, -.admin-wrapper :not(.fields-row__column) > .fields-group .radio .label_input > label, -.admin-wrapper .fields-row > * .radio .label_input > label, -.admin-wrapper .label_input > ul .radio .label_input > label, -.admin-wrapper .label_input__wrapper > ul .radio .label_input > label, -.admin-wrapper .radio_buttons > ul .radio .label_input > label, -.admin-wrapper .with_block_label.radio_buttons .label_input .radio .label_input > label { - margin-bottom: 0; - padding-top: 0.1em; -} -.admin-wrapper :not(.fields-row__column) > .fields-group > .input .label_input__wrapper > :not(.checkbox), -.admin-wrapper .fields-row > * > .input .label_input__wrapper > :not(.checkbox), -.admin-wrapper .label_input > ul > .input .label_input__wrapper > :not(.checkbox), -.admin-wrapper .label_input__wrapper > ul > .input .label_input__wrapper > :not(.checkbox), -.admin-wrapper .radio_buttons > ul > .input .label_input__wrapper > :not(.checkbox), -.admin-wrapper .with_block_label.radio_buttons .label_input > .input .label_input__wrapper > :not(.checkbox), -.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox .label_input__wrapper > :not(.checkbox), -.admin-wrapper .fields-row > * .checkbox .label_input__wrapper > :not(.checkbox), -.admin-wrapper .label_input > ul .checkbox .label_input__wrapper > :not(.checkbox), -.admin-wrapper .label_input__wrapper > ul .checkbox .label_input__wrapper > :not(.checkbox), -.admin-wrapper .radio_buttons > ul .checkbox .label_input__wrapper > :not(.checkbox), -.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox .label_input__wrapper > :not(.checkbox), -.admin-wrapper :not(.fields-row__column) > .fields-group .radio .label_input__wrapper > :not(.checkbox), -.admin-wrapper .fields-row > * .radio .label_input__wrapper > :not(.checkbox), -.admin-wrapper .label_input > ul .radio .label_input__wrapper > :not(.checkbox), -.admin-wrapper .label_input__wrapper > ul .radio .label_input__wrapper > :not(.checkbox), -.admin-wrapper .radio_buttons > ul .radio .label_input__wrapper > :not(.checkbox), -.admin-wrapper .with_block_label.radio_buttons .label_input .radio .label_input__wrapper > :not(.checkbox) { - margin-top: 0.4em; -} -.admin-wrapper :not(.fields-row__column) > .fields-group > .input .checkbox, -.admin-wrapper .fields-row > * > .input .checkbox, -.admin-wrapper .label_input > ul > .input .checkbox, -.admin-wrapper .label_input__wrapper > ul > .input .checkbox, -.admin-wrapper .radio_buttons > ul > .input .checkbox, -.admin-wrapper .with_block_label.radio_buttons .label_input > .input .checkbox, -.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox .checkbox, -.admin-wrapper .fields-row > * .checkbox .checkbox, -.admin-wrapper .label_input > ul .checkbox .checkbox, -.admin-wrapper .label_input__wrapper > ul .checkbox .checkbox, -.admin-wrapper .radio_buttons > ul .checkbox .checkbox, -.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox .checkbox, -.admin-wrapper :not(.fields-row__column) > .fields-group .radio .checkbox, -.admin-wrapper .fields-row > * .radio .checkbox, -.admin-wrapper .label_input > ul .radio .checkbox, -.admin-wrapper .label_input__wrapper > ul .radio .checkbox, -.admin-wrapper .radio_buttons > ul .radio .checkbox, -.admin-wrapper .with_block_label.radio_buttons .label_input .radio .checkbox { - inset: 0; - padding: 1em !important; -} -.admin-wrapper :not(.fields-row__column) > .fields-group li.checkbox, -.admin-wrapper .fields-row > * li.checkbox, -.admin-wrapper .label_input > ul li.checkbox, -.admin-wrapper .label_input__wrapper > ul li.checkbox, -.admin-wrapper .radio_buttons > ul li.checkbox, -.admin-wrapper .with_block_label.radio_buttons .label_input li.checkbox { - width: calc(50% - 27px); -} -.admin-wrapper :not(.fields-row__column) > .fields-group li.checkbox label, -.admin-wrapper .fields-row > * li.checkbox label, -.admin-wrapper .label_input > ul li.checkbox label, -.admin-wrapper .label_input__wrapper > ul li.checkbox label, -.admin-wrapper .radio_buttons > ul li.checkbox label, -.admin-wrapper .with_block_label.radio_buttons .label_input li.checkbox label { - position: static; - padding-top: 0; -} -.admin-wrapper :not(.fields-row__column) > .fields-group li.checkbox label::before, -.admin-wrapper .fields-row > * li.checkbox label::before, -.admin-wrapper .label_input > ul li.checkbox label::before, -.admin-wrapper .label_input__wrapper > ul li.checkbox label::before, -.admin-wrapper .radio_buttons > ul li.checkbox label::before, -.admin-wrapper .with_block_label.radio_buttons .label_input li.checkbox label::before { - content: ""; - position: absolute; - inset: 0; -} -.admin-wrapper :not(.fields-row__column) > .fields-group li.checkbox label input, -.admin-wrapper .fields-row > * li.checkbox label input, -.admin-wrapper .label_input > ul li.checkbox label input, -.admin-wrapper .label_input__wrapper > ul li.checkbox label input, -.admin-wrapper .radio_buttons > ul li.checkbox label input, -.admin-wrapper .with_block_label.radio_buttons .label_input li.checkbox label input { - inset: 1em !important; -} -.admin-wrapper :not(.fields-row__column) > .fields-group > h6, -.admin-wrapper .fields-row > * > h6, -.admin-wrapper .label_input > ul > h6, -.admin-wrapper .label_input__wrapper > ul > h6, -.admin-wrapper .radio_buttons > ul > h6, -.admin-wrapper .with_block_label.radio_buttons .label_input > h6, -.admin-wrapper :not(.fields-row__column) > .fields-group > p, -.admin-wrapper .fields-row > * > p, -.admin-wrapper .label_input > ul > p, -.admin-wrapper .label_input__wrapper > ul > p, -.admin-wrapper .radio_buttons > ul > p, -.admin-wrapper .with_block_label.radio_buttons .label_input > p { - margin: 0; -} -.admin-wrapper :not(.fields-row__column) > .fields-group > h6:not(:last-child), -.admin-wrapper .fields-row > * > h6:not(:last-child), -.admin-wrapper .label_input > ul > h6:not(:last-child), -.admin-wrapper .label_input__wrapper > ul > h6:not(:last-child), -.admin-wrapper .radio_buttons > ul > h6:not(:last-child), -.admin-wrapper .with_block_label.radio_buttons .label_input > h6:not(:last-child), -.admin-wrapper :not(.fields-row__column) > .fields-group > p:not(:last-child), -.admin-wrapper .fields-row > * > p:not(:last-child), -.admin-wrapper .label_input > ul > p:not(:last-child), -.admin-wrapper .label_input__wrapper > ul > p:not(:last-child), -.admin-wrapper .radio_buttons > ul > p:not(:last-child), -.admin-wrapper .with_block_label.radio_buttons .label_input > p:not(:last-child) { - padding-bottom: 0; -} -.admin-wrapper ul { - flex-direction: row !important; - flex-wrap: wrap; - gap: 2px; - margin-top: 0.4em; -} -.admin-wrapper .spacer { - border-top: 1px solid var(--border-color) !important; -} -.batch-table, -.table, -:not(.batch-table__row__content) > table { - overflow: clip; - border-radius: var(--radius); - border-spacing: 0 2px; - border-collapse: separate; -} -.batch-table .batch-table__toolbar, -.table .batch-table__toolbar, -:not(.batch-table__row__content) > table .batch-table__toolbar, -.batch-table .batch-table__row, -.table .batch-table__row, -:not(.batch-table__row__content) > table .batch-table__row, -.batch-table tr > *, -.table tr > *, -:not(.batch-table__row__content) > table tr > * { - border: 0; - margin-bottom: 2px !important; -} -.batch-table td, -.table td, -:not(.batch-table__row__content) > table td, -.batch-table th, -.table th, -:not(.batch-table__row__content) > table th, -.batch-table .batch-table__row, -.table .batch-table__row, -:not(.batch-table__row__content) > table .batch-table__row { - position: relative; -} -.batch-table tr > td > div > span, -.table tr > td > div > span, -:not(.batch-table__row__content) > table tr > td > div > span, -.batch-table tr > th > div > span, -.table tr > th > div > span, -:not(.batch-table__row__content) > table tr > th > div > span { - padding-inline: 0.7em; - display: inline-block; -} -.keyboard-shortcuts td { - padding: 0.7em; -} -.batch-table .batch-table__row, -.table .batch-table__row, -:not(.batch-table__row__content) > table .batch-table__row, -.batch-table th, -.table th, -:not(.batch-table__row__content) > table th, -.batch-table > tbody > tr > td, -.table > tbody > tr > td, -:not(.batch-table__row__content) > table > tbody > tr > td, -.batch-table tfoot td, -.table tfoot td, -:not(.batch-table__row__content) > table tfoot td { - background: var(--elevated-color) !important; - vertical-align: middle; -} -.batch-table .batch-table__row::after, -.table .batch-table__row::after, -:not(.batch-table__row__content) > table .batch-table__row::after, -.batch-table th::after, -.table th::after, -:not(.batch-table__row__content) > table th::after, -.batch-table > tbody > tr > td::after, -.table > tbody > tr > td::after, -:not(.batch-table__row__content) > table > tbody > tr > td::after, -.batch-table tfoot td::after, -.table tfoot td::after, -:not(.batch-table__row__content) > table tfoot td::after { - content: ""; - position: absolute; - inset: 0 0; - background: var(--hover-color); - opacity: 0; - transition: 0.2s; - pointer-events: none; -} -.batch-table .batch-table__row:hover::after, -.table .batch-table__row:hover::after, -:not(.batch-table__row__content) > table .batch-table__row:hover::after, -.batch-table th:hover::after, -.table th:hover::after, -:not(.batch-table__row__content) > table th:hover::after, -.batch-table > tbody > tr > td:hover::after, -.table > tbody > tr > td:hover::after, -:not(.batch-table__row__content) > table > tbody > tr > td:hover::after, -.batch-table tfoot td:hover::after, -.table tfoot td:hover::after, -:not(.batch-table__row__content) > table tfoot td:hover::after, -.batch-table .batch-table__row:focus-within::after, -.table .batch-table__row:focus-within::after, -:not(.batch-table__row__content) > table .batch-table__row:focus-within::after, -.batch-table th:focus-within::after, -.table th:focus-within::after, -:not(.batch-table__row__content) > table th:focus-within::after, -.batch-table > tbody > tr > td:focus-within::after, -.table > tbody > tr > td:focus-within::after, -:not(.batch-table__row__content) > table > tbody > tr > td:focus-within::after, -.batch-table tfoot td:focus-within::after, -.table tfoot td:focus-within::after, -:not(.batch-table__row__content) > table tfoot td:focus-within::after { - opacity: 1; -} -.batch-table .batch-table__row > a:first-child:last-child, -.table .batch-table__row > a:first-child:last-child, -:not(.batch-table__row__content) > table .batch-table__row > a:first-child:last-child, -.batch-table th > a:first-child:last-child, -.table th > a:first-child:last-child, -:not(.batch-table__row__content) > table th > a:first-child:last-child, -.batch-table > tbody > tr > td > a:first-child:last-child, -.table > tbody > tr > td > a:first-child:last-child, -:not(.batch-table__row__content) > table > tbody > tr > td > a:first-child:last-child, -.batch-table tfoot td > a:first-child:last-child, -.table tfoot td > a:first-child:last-child, -:not(.batch-table__row__content) > table tfoot td > a:first-child:last-child { - margin: 0; - width: 100%; - padding: 0.5em; -} -.batch-table th:hover td:not([rowspan])::after, -.table th:hover td:not([rowspan])::after, -:not(.batch-table__row__content) > table th:hover td:not([rowspan])::after, -.batch-table tr:hover td:not([rowspan])::after, -.table tr:hover td:not([rowspan])::after, -:not(.batch-table__row__content) > table tr:hover td:not([rowspan])::after, -.batch-table th:hover th:not([rowspan])::after, -.table th:hover th:not([rowspan])::after, -:not(.batch-table__row__content) > table th:hover th:not([rowspan])::after, -.batch-table tr:hover th:not([rowspan])::after, -.table tr:hover th:not([rowspan])::after, -:not(.batch-table__row__content) > table tr:hover th:not([rowspan])::after { - opacity: 1 !important; -} -.batch-table th [rowspan]:hover ~ td::after, -.table th [rowspan]:hover ~ td::after, -:not(.batch-table__row__content) > table th [rowspan]:hover ~ td::after, -.batch-table tr [rowspan]:hover ~ td::after, -.table tr [rowspan]:hover ~ td::after, -:not(.batch-table__row__content) > table tr [rowspan]:hover ~ td::after { - opacity: 0 !important; -} -.batch-table th [rowspan]::after, -.table th [rowspan]::after, -:not(.batch-table__row__content) > table th [rowspan]::after, -.batch-table tr [rowspan]::after, -.table tr [rowspan]::after, -:not(.batch-table__row__content) > table tr [rowspan]::after { - inset-inline: -900px; -} -.layout-multiple-columns #mastodon .columns-area { - overflow: auto hidden !important; - padding: 0; -} -.layout-multiple-columns #mastodon .columns-area .scrollable:not(.scrollable--flex) { - padding: 0px !important; - padding-bottom: 40vh !important; -} -.layout-multiple-columns #mastodon .columns-area .scrollable:not(.scrollable--flex)::before { - content: ""; - position: absolute; - inset: 0; - background-color: inherit; - z-index: -1; -} -.layout-multiple-columns #mastodon .columns-area .scrollable:not(.scrollable--flex) .account-timeline__header, -.layout-multiple-columns #mastodon .columns-area .scrollable:not(.scrollable--flex) .dismissable-banner { - margin: 0px !important; -} -.layout-multiple-columns #mastodon .columns-area .focusable, -.layout-multiple-columns #mastodon .columns-area .entry, -.layout-multiple-columns #mastodon .columns-area .statuses-grid__item .detailed-status, -.layout-multiple-columns #mastodon .columns-area .trends__item, -.layout-multiple-columns #mastodon .columns-area .story, -.layout-multiple-columns #mastodon .columns-area .account-card, -.layout-multiple-columns #mastodon .columns-area .scrollable :not(.focusable) > .account, -.layout-multiple-columns #mastodon .columns-area .timeline-hint { - border-radius: 0; -} -.layout-multiple-columns #mastodon .columns-area .focusable::before, -.layout-multiple-columns #mastodon .columns-area .entry::before, -.layout-multiple-columns #mastodon .columns-area .statuses-grid__item .detailed-status::before, -.layout-multiple-columns #mastodon .columns-area .trends__item::before, -.layout-multiple-columns #mastodon .columns-area .story::before, -.layout-multiple-columns #mastodon .columns-area .account-card::before, -.layout-multiple-columns #mastodon .columns-area .scrollable :not(.focusable) > .account::before, -.layout-multiple-columns #mastodon .columns-area .timeline-hint::before { - border-radius: 0 !important; -} -.layout-multiple-columns #mastodon .columns-area .focusable::after, -.layout-multiple-columns #mastodon .columns-area .entry::after, -.layout-multiple-columns #mastodon .columns-area .statuses-grid__item .detailed-status::after, -.layout-multiple-columns #mastodon .columns-area .trends__item::after, -.layout-multiple-columns #mastodon .columns-area .story::after, -.layout-multiple-columns #mastodon .columns-area .account-card::after, -.layout-multiple-columns #mastodon .columns-area .scrollable :not(.focusable) > .account::after, -.layout-multiple-columns #mastodon .columns-area .timeline-hint::after { - inset-inline: 0 !important; -} -.layout-multiple-columns #mastodon .columns-area [class*="explore__"] > * { - border-radius: var(--radius); -} -.layout-multiple-columns #mastodon .columns-area .detailed-status__wrapper { - margin: 0 !important; -} -.layout-multiple-columns #mastodon .columns-area .status__action-bar { - margin-bottom: 0px; - gap: 0; - margin-inline-end: 0 !important; -} -.layout-multiple-columns #mastodon .columns-area .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; -} -.layout-multiple-columns #mastodon .columns-area .status__action-bar > .icon-button:first-child { - margin-inline-start: -8px !important; -} -.layout-multiple-columns #mastodon .columns-area .status__action-bar, -.layout-multiple-columns #mastodon .columns-area .detailed-status__action-bar, -.layout-multiple-columns #mastodon .columns-area .picture-in-picture__footer { - 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, -.layout-multiple-columns #mastodon .columns-area .account__header__image { - border-radius: 0 !important; -} -.layout-multiple-columns #mastodon .columns-area .icon-button:after { - content: unset !important; -} -.layout-multiple-columns #mastodon .columns-area > div { - border: 0 !important; - padding: 0 !important; -} -.layout-multiple-columns #mastodon .columns-area > div:not(.drawer):not(:last-child) { - margin-inline-end: 2px !important; -} -.layout-multiple-columns #mastodon .columns-area > div.column { - flex-grow: 1; - max-width: 600px; -} -.layout-multiple-columns #mastodon .columns-area > div:first-child { - margin-inline-start: auto !important; -} -.layout-multiple-columns #mastodon .columns-area > div:last-child { - margin-inline-end: auto !important; -} -.layout-multiple-columns #mastodon .columns-area .drawer { - padding-inline: 6px !important; - padding-top: 20px !important; - overflow: clip; -} -.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; -} -.layout-multiple-columns #mastodon .columns-area .drawer .drawer__header a { - border: 0; -} -.layout-multiple-columns #mastodon .columns-area .drawer .drawer__header a:first-child { - padding-inline-start: 15px !important; -} -.layout-multiple-columns #mastodon .columns-area .drawer .drawer__header a:last-child { - padding-inline-end: 15px !important; -} -.layout-multiple-columns #mastodon .columns-area .drawer .search { - 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) { - top: -20px; - margin-inline-start: -6px; - margin-inline-end: -4px; - width: calc(100% + 10px); - padding-inline-start: 6px; - padding-inline-end: 4px; - height: calc(100% + 20px); -} -.layout-multiple-columns #mastodon .columns-area .drawer .drawer__inner__mastodon { - margin-inline: -6px; - margin-inline-end: -4px; - z-index: -1; -} -.layout-multiple-columns #mastodon .columns-area .search { - margin-inline: 10px; -} -.layout-multiple-columns #mastodon .columns-area .compose-form { - display: flex; - flex-direction: column; -} -.layout-multiple-columns #mastodon .columns-area .drawer__inner:not(.darker), -.layout-multiple-columns #mastodon .columns-area .drawer__inner__mastodon { - background-color: transparent; - border: 0 !important; - background-color: transparent !important; -} -.layout-multiple-columns #mastodon .columns-area .drawer__inner.darker { - 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; -} -.layout-multiple-columns #mastodon .columns-area .detailed-status .status__content { - font-size: 1.3em; +.interaction-modal__choices h3 { + margin-bottom: 10px; } .modal-root__container { animation: bounceIn 0.7s; +} +@media (max-width: 890px) { + .modal-root__modal { + margin-top: auto; + max-width: 100%; + border-radius: var(--radius) var(--radius) 0 0; + } +} +.picture-in-picture { + z-index: 101; +} +.picture-in-picture .picture-in-picture__header { + border-radius: var(--radius) var(--radius) 0 0; +} +.picture-in-picture .media-gallery, +.picture-in-picture .video-player, +.picture-in-picture .status-card.horizontal.interactive, +.picture-in-picture .status-card, +.picture-in-picture .audio-player, +.picture-in-picture .picture-in-picture-placeholder { + --radius: 0; + margin: 0 !important; +} +.picture-in-picture .picture-in-picture__footer { + border-radius: 0 0 var(--radius) var(--radius); +} +.report-modal[style="max-width: 960px;"] { + background: var(--background-color); +} +.report-modal[style="max-width: 960px;"], +.report-modal[style="max-width: 960px;"] * { + color: inherit !important; +} +.report-modal[style="max-width: 960px;"] .report-modal__comment { + min-width: unset; + width: 370px; + max-width: unset; + flex: none; + padding: 20px; + height: 100%; + overflow-y: auto; +} +.report-modal[style="max-width: 960px;"] .setting-text__wrapper { + border-radius: var(--radius); + overflow: hidden; + background: none; +} +.report-modal[style="max-width: 960px;"] .setting-text__wrapper textarea { + border: 0; + max-height: unset !important; + background: none; +} +.report-modal[style="max-width: 960px;"] .focal-point-modal__content { + position: sticky; + top: 0; + max-height: 100vh; + flex-grow: 0 !important; + max-width: 100%; +} +.report-modal[style="max-width: 960px;"] .focal-point { + width: 100%; + height: 100%; +} +.report-modal[style="max-width: 960px;"] .audio-player, +.report-modal[style="max-width: 960px;"] .focal-point img { + width: unset !important; + height: unset !important; + max-height: 100% !important; + max-width: 100% !important; +} +.report-modal[style="max-width: 960px;"] .audio-player { + margin: 10px !important; + width: 600px !important; + max-width: calc(100% - 20px) !important; +} +.report-modal[style="max-width: 960px;"] .focal-point__reticle { + box-shadow: 0 0 300px 200px rgba(0,0,0,0.2); +} +@media not all and (max-width: 900px) { + .report-modal[style="max-width: 960px;"] { + max-width: max-content !important; + max-height: 98vh; + border: 0; + box-shadow: var(--shadow); + overflow: hidden; + border-radius: var(--radius); + width: 98vw; + } + .report-modal[style="max-width: 960px;"] .report-modal__container { + flex-wrap: nowrap; + border: 0; + max-width: max-content; + max-height: 100%; + } + .report-modal[style="max-width: 960px;"] .report-modal__target { + position: absolute; + padding: 24px 20px 12px; + font-weight: bold; + width: 348px; + box-sizing: border-box; + text-align: start; + background: inherit; + } + .report-modal[style="max-width: 960px;"] .report-modal__close { + position: fixed !important; + right: 12px; + top: 12px; + order: 2; + color: #fff; + background: var(--modal-background-color); + padding: 12px; + } + .report-modal[style="max-width: 960px;"] .report-modal__comment { + padding-top: calc(30px + 2em); + padding-bottom: 160px; + } + .report-modal[style="max-width: 960px;"] .focal-point-modal__content, + .report-modal[style="max-width: 960px;"] .focal-point { + overflow: visible; + } + .report-modal[style="max-width: 960px;"] .focal-point img { + min-width: 500px; + } + .report-modal[style="max-width: 960px;"] .focal-point__preview { + inset-inline-start: -220px; + right: unset; + bottom: 20px; + pointer-events: none; + text-align: end; + } + .report-modal[style="max-width: 960px;"] .focal-point__preview strong { + color: inherit; + } + .report-modal[style="max-width: 960px;"] .focal-point__preview div { + border-radius: var(--radius); + box-shadow: none; + } +} +@media (max-width: 900px) { + .report-modal[style="max-width: 960px;"] { + height: auto; + width: 100vw; + max-width: unset !important; + border-radius: 0; + } + .report-modal[style="max-width: 960px;"] .report-modal__container { + height: auto; + min-height: 0; + } + .report-modal[style="max-width: 960px;"] .report-modal__container { + flex-direction: column-reverse; + flex-wrap: nowrap; + flex-grow: 1; + } + .report-modal[style="max-width: 960px;"] .report-modal__comment { + width: 100%; + border: 0; + max-height: 70%; + flex: 0 0 auto; + height: unset; + order: unset; + } +} +.emoji-picker-dropdown__menu { + border-radius: var(--radius); + overflow: hidden; + resize: both; + width: 400px; +} +.emoji-mart { + display: flex !important; + flex-direction: column !important; + width: 100% !important; + height: 100% !important; +} +.emoji-mart-scroll { + flex-grow: 1; + max-height: unset !important; +} +.emoji-mart-bar { + order: 2; +} +.emoji-mart-category-list { + overflow: visible !important; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(calc(20px + 6%), 1fr)); +} +.emoji-mart-category-list li { + display: contents; +} +.emoji-mart-category-list button { + position: relative; + padding: 0 !important; + padding-top: 100% !important; +} +.emoji-mart-category-list button img, +.emoji-mart-category-list button span { + height: calc(100% - 10px) !important; + width: calc(100% - 10px) !important; + inset: 5px; + position: absolute !important; + transition: transform 0.1s cubic-bezier(0, 0, 0, 1); +} +.emoji-mart-category-list button:hover img, +.emoji-mart-category-list button:hover span { + transform: scale(1.2); +} +.emoji-picker-dropdown__modifiers { + top: 16px; } \ No newline at end of file diff --git a/modern.user.css b/modern.user.css index 8eefb5b..470f282 100644 --- a/modern.user.css +++ b/modern.user.css @@ -5,410 +5,346 @@ // textbox in the left panel following this format: // *://domain.tld/* +/* Update 2.0.0 (Mastodon 4.3) +- I have partially rewriten the style! + The CSS should be much cleaner and smaller + + Some issues have been fixed + + Some things are styled differently but it isn't a lot +- Alt text modal has been styled +- Height of hidden media is collapsed + styled hide media button +- Avatars in replies on mobile are slightly smaller +- Mobile no longer has scrolling topbar, labels are removed to fit all icons + - Fixes issue on iOS where the bottombar wouldn't be shown + - Is also more convenient than scrolling +- Some stuff is now customizable in the UserStyle's options -/* Update 1.10.4 -FOR ADMINS: Do not update until the version with the new design releases, -unless you're on a nightly version with the design already in use. -- Fixes for Mastodon's bordered design - -1.10.5, hotfix -- Fix status context's +ADMINS: This and the previous version is meant for Mastodon 4.3.0+, +please do not update until your server has updated. */ /* ==UserStyle== -@name Mastodon Modern -@version 1.10.3 -@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 -@supportURL https://codeberg.org/Freeplay/Mastodon-Modern/issues -@preprocessor stylus +@name MastoModern +@version 2.0.0 +@description Improves the look & feel of Mastodon +@updateURL https://git.gay/Freeplay/Mastodon-Modern/raw/branch/main/modern.user.css +@homepageURL https://git.gay/Freeplay/Mastodon-Modern +@supportURL https://git.gay/Freeplay/Mastodon-Modern/issues +@preprocessor stylus - -- AUTHOR STUFF -- -@namespace Freeplay -@author Freeplay (https://freeplay.floof.company/) +@var range tlWidth "Timeline Width" [720, 600, 860, 20, "px"] +@var checkbox sideHeader "Move header to sidebar" 1 +@var checkbox navOnLeft "Move navigation sidebar to the left" 0 +@var checkbox spaceBetween "Move sidebars to edges" 0 +@var checkbox emojiZoom "Zoom custom emoji on hover (follows prefers-reduced-motion)" 1 +@var checkbox collapseHidden "Collapse hidden media" 1 +@var checkbox hideClickArea "Increase click area for hide media button" 1 +@var checkbox flatterUI "Flatter UI" 0 +@var range borderRadius "Border radius" [12, 0, 24, 4, "px"] +@var range radiusRound "Border radius round" [24, 0, 24, 4, "px"] +@var range avatarRadius "Avatar radius" [30, 0, 50, 10, "%"] +@var color warn "Some options may not apply depending on the server's style defaults and how the option was implemented" #ff6b00 + +@namespace Freeplay +@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"), domain("yiff.life") { -/ { // This is just so I can easily collapse everything, shouldn't affect compiled code + +@-moz-document domain("mastodon.social"), domain("mastodon.online"), domain("mstdn.social"), domain("tech.lgbt"), domain("meow.social"), domain("corteximplant.com"), domain("bark.lgbt"), domain("yiff.life"), domain("furry.engineer"), domain("aus.social"), domain("infosec.exchange"), domain("ohai.social"), domain("eldritch.cafe"), domain("octodon.social"), domain("donphan.social"), domain("peoplemaking.games"), domain("toot.cat"), domain("vt.social") { +/ { responsiveW1 = 1320px responsiveW2 = 1175px mobileW = 890px transBounce1 = .2s cubic-bezier(0,0,0,1.1) - statuses-list = ".focusable, .entry, .statuses-grid__item .detailed-status, .trends__item, .story, .account-card, .scrollable :not(.focusable) > .account, .timeline-hint" + statuses-list = ".focusable, .entry, .statuses-grid__item .detailed-status, .trends__item, .story, .account-card, .scrollable :not(.focusable) > .account:not(.account--minimal), .timeline-hint" media = ".media-gallery, .video-player, .status-card.horizontal.interactive, .status-card, .audio-player, .picture-in-picture-placeholder" - /:root { - --tl-width 750px - --radius 12px - --radius-round 24px + :root { + --tl-width tlWidth + if tlWidth == 860 { + --tl-width 100% + } + --emoji-size 2em + --avatar-size 46px + --radius borderRadius + --radius-round radiusRound + --panel-radius var(--radius) --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) - --shadow-low 0 8px 16px -10px rgba(0,0,0,0.4) + --shadow-low 0 8px 24px -16px rgba(0,0,0,0.2) --shadow-med 0 8px 60px -30px rgba(0,0,0,0.1) + --column-shadow 0 8px 24px 12px rgba(0,0,0,0.02) + if flatterUI { + --column-shadow 0 + --elevated-tint 0 + } // --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 { - width 6px - margin-block 10px - &-track { - background none - } - &-thumb { - border-radius 100px - transition background-color .2s - } - } - &:not(:hover) { - &::-webkit-scrollbar-thumb { - background none - padding-block 10px - } - } - } - fa() { font: normal normal normal 14px/1 FontAwesome; } - compactStatuses() { - .scrollable:not(.scrollable--flex) { - padding 0px !important - padding-bottom 40vh !important - &::before { + desktop() { + @media (min-width mobileW) { + .layout-single-column { + {block} + } + } + } + @media (max-width mobileW - 1) { + :root { + --panel-radius 0px + } + } + .layout-multiple-columns { + --panel-radius 0px + } + + //// BODY + body { + font-display swap !important + if !flatterUI { + &:not(.admin)::before { content "" - position absolute + position fixed inset 0 - background-color inherit + background rgba(0,0,0,0.06) z-index -1 } - .account-timeline__header, .dismissable-banner { - margin 0px !important - } - } - - {statuses-list} { - border-radius 0 - &::before { - border-radius 0 !important - } - &::after { - inset-inline 0 !important - } - } - [class*="explore__"] { - > * { - border-radius var(--radius) - } - } - .detailed-status__wrapper { - margin 0 !important - } - .status__action-bar { - margin-bottom 0px - gap 0 - margin-inline-end 0 !important - :not(i):not(.status__action-bar-spacer) { - display flex - flex-grow 9999 - justify-content center !important - max-width 55px - min-width max-content - } - > .icon-button:first-child { - margin-inline-start -8px !important - } - } - .status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer { - flex-wrap wrap - } - - {block} - } - - .rtl { - textarea { - text-align right - } - } - a, button, label { - user-select none - } - .button--block { - font-weight 700 - } - .unhandled-link, .mention { - span { - text-decoration none !important - } - &:not(:focus):not(:hover) { - span { - text-decoration underline !important - } - } - } - input, .input-copy, select, textarea, - .compose-form__upload-thumbnail, .button, - :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 - } - button, .focusable, a, .media-gallery__item-thumbnail { - &:focus-visible { - box-shadow inset 0 0 0 2px #dc7b18 - outline 2px #dc7b18 solid - outline-offset -2px - } - } - *:not(.radio-button__input):not(input) { - font-display swap !important - } - :not(.radio-button__input):not(span) { - border-color var(--border-color) !important - } - .setting-text { - padding-inline 10px - } - @media (prefers-reduced-motion: no-preference) { - body:not(.reduce-motion) { - .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, opacity .2s !important - &:active, &:focus-visible { - transform scale(.99) - transition transform .4s cubic-bezier(0,0,0,1) !important - } - } - .column-header__button, .column-header__buttons > .column-header__back-button, - .react-toggle-track, .icon-button, .floating-action-button { - transition transform .4s cubic-bezier(0,0,0,4) !important - &:active { - transform scale(.95) - transition transform .4s cubic-bezier(0,0,0,1) !important - } - } - .status__content__spoiler-link { - span { - display inline-block - transition transform .4s cubic-bezier(0,0,0,4) !important - } - - &:active span { - transition transform .4s cubic-bezier(0,0,0,1) !important - transform translateY(1px) - } - } - } - .reduce-motion * { - animation-duration 0s !important - } - - @keyframes bounceIn { - 0% { transform: scale(1.1); opacity: 0 } - 30% { transform: scale(.99); opacity: 1 } - 60% { transform: scale(1.005); opacity: 1 } - 100% { transform: scale(1); opacity: 1 } - } - - @keyframes slideUp { - from { - transform translateY(20px) - } - } - @keyframes slideUpFade { - from { - transform translateY(20px) - filter opacity(0) - } - } - @keyframes slideDowFade { - from { - transform translateY(-20px) - filter opacity(0) - } - } - @keyframes slideUpBig { - from { - transform translateY(50vh) - } - } - @keyframes fadeUp { - from { - transform translateY(10px) - opacity 0 - } - } - @keyframes scaleIn { - from { - transform scale(.98) - opacity 0 - } - } - @keyframes fadeLeft { - from { - transform: translateX(20px) opacity(0) - } - } - @keyframes rainbow { - to { - filter hue-rotate(360deg) - } - } - } - .account__avatar, #profile_page_avatar, .account__avatar-composite, .account-card__title__avatar img { - border-radius 30% !important - } - .scrollable, - .detailed-status__action-bar, - .column-back-button, .column-header__collapsible.collapsed, .column-header__collapsible-inner, - .audio-player, .search__input { - border 0 !important - } - .account__section-headline, .notification__filter-bar, - .column-header { - border-inline 0 - } - - - - .dropdown-menu, .dropdown-animation { - border-radius var(--radius) - animation scaleIn .2s cubic-bezier(0,0,0,1.1) - } - .dropdown-menu__container__list { - overflow hidden auto - border-radius var(--radius) - max-height 70vh - } - .dropdown-menu__item { - overflow hidden - a { - padding .7em 1em !important - transition background-color .2s, color .2s - min-width 150px - } - } - .dropdown-menu__separator { - margin 0 !important - } - .interaction-modal { - border-radius var(--radius) - overflow-y auto - } - .interaction-modal__choices { - gap 10px - display flex - flex-wrap wrap - .interaction-modal__choices__choice { - max-height 50vh - overflow-y auto - // background-color var(--elevated-color) - border 1px solid var(--border-color) - flex 1 0 270px - border-radius var(--radius) - transition background .2s - position relative - } - } - .compare-history-modal { - margin-block 20px - } - .compare-history-modal__container { - overflow hidden auto - } - - .columns-area__panels { - --top 5px - gap 0 - } - @media (min-width responsiveW2) { - .columns-area__panels { - padding-inline 10px - padding-top var(--top) - box-sizing border-box - transition padding .4s - --top 20px - } - } - @media (min-width responsiveW1) { - .columns-area__panels { - --top 30px } } - // EMOJI PICKER - // This is most likely temporary as the picker may be rewritten or unstylable in a later mastodon update - .emoji-picker-dropdown__menu { - border-radius var(--radius) - overflow hidden - resize both - width 400px - } - .emoji-mart { - display flex !important - flex-direction column !important - width 100% !important - height 100% !important - } - .emoji-mart-scroll { - flex-grow 1 - max-height unset !important - } - .emoji-mart-bar { - order 2 - } - .emoji-mart-category-list { - overflow visible !important - display grid - grid-template-columns repeat(auto-fill, minmax(calc(20px + 6%), 1fr)) - li { - display contents + //// GLOBAL + / { + p { + line-height 1.5 + } + input { + text-align start } - button { - position relative - padding 0 !important - padding-top 100% !important - img, span { - height calc(100% - 10px) !important - width calc(100% - 10px) !important - inset 5px - position absolute !important - transition transform .1s cubic-bezier(0,0,0,1) + .button--block { + font-weight bold + } + .unhandled-link, .mention { + span { + text-decoration none !important + } + &:not(:focus):not(:hover) { + span { + text-decoration underline !important + } + } + } + input, .input-copy, select, textarea, + .compose-form__upload-thumbnail, .button, + :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) + } + button, .focusable, a, .media-gallery__item-thumbnail { + &:focus-visible { + box-shadow inset 0 0 0 2px #dc7b18 + outline 2px #dc7b18 solid + outline-offset -2px + } + } + :not(.radio-button__input):not(span) { + border-color var(--border-color) !important + } + + .nothing-here + .column-inline-form, + .scrollable, + .detailed-status__action-bar, + .column-back-button, .column-header__collapsible.collapsed, .column-header__collapsible-inner, + .audio-player, .search__input { + border 0 !important + } + .account__section-headline, .notification__filter-bar, + .column-header { + border-inline 0 + } + + .account__section-headline, .notification__filter-bar + .column > .scrollable { + background none + } + + .account__avatar, #profile_page_avatar, .account__avatar-composite, .account-card__title__avatar img { + border-radius avatarRadius + flex none + } + + :not(body):not(.scrollable) { + &::-webkit-scrollbar { + width 6px + margin-block 10px + &-track { + background none + } + &-thumb { + border-radius 100px + transition background-color .2s + } + } + &:not(:hover) { + &::-webkit-scrollbar-thumb { + background none + padding-block 10px + } + } + } + } + // ANIMATIONS + / { + @media (prefers-reduced-motion: no-preference) { + body:not(.reduce-motion) { + .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, opacity .2s !important + &:active, &:focus-visible { + transform scale(.99) + transition transform .4s cubic-bezier(0,0,0,1) !important + } + } + .column-header__button, .column-header__buttons > .column-header__back-button, + .react-toggle-track, .icon-button, .floating-action-button { + transition transform .4s cubic-bezier(0,0,0,4), background .2s !important + &:active { + transform scale(.95) + transition transform .4s cubic-bezier(0,0,0,1) !important + } + } + .status__content__spoiler-link { + span { + display inline-block + transition transform .4s cubic-bezier(0,0,0,4) !important + } + + &:active span { + transition transform .4s cubic-bezier(0,0,0,1) !important + transform translateY(1px) + } + } + } + .reduce-motion * { + animation-duration 0s !important + } + + @keyframes bounceIn { + 0% { transform: scale(1.1); opacity: 0 } + 30% { transform: scale(.99); opacity: 1 } + 60% { transform: scale(1.005); opacity: 1 } + 100% { transform: scale(1); opacity: 1 } + } + + @keyframes slideUp { + from { + transform translateY(20px) + } + } + @keyframes slideUpFade { + from { + transform translateY(20px) + filter opacity(0) + } + } + @keyframes slideDownFade { + from { + transform translateY(-20px) + filter opacity(0) + } + } + @keyframes slideUpBig { + from { + transform translateY(50vh) + } + } + @keyframes fadeUp { + from { + transform translateY(10px) + opacity 0 + } + } + @keyframes scaleIn { + from { + transform scale(.98) + opacity 0 + } + } + @keyframes fadeLeft { + from { + transform: translateX(20px) opacity(0) + } + } + @keyframes rainbow { + to { + filter hue-rotate(360deg) + } + } + } + } + + //// ALL COLUMNS + / { + .columns-area__panels { + --top 5px + gap 0 + if navOnLeft { + flex-direction row-reverse + } + if spaceBetween { + justify-content space-between + } + } + @media (min-width responsiveW2) { + .columns-area__panels { + padding-inline 10px + padding-top var(--top) + box-sizing border-box + transition padding .4s + --top 20px + } + } + @media (min-width responsiveW1) { + .columns-area__panels { + --top 30px + } + if spaceBetween { + .columns-area__panels { + --top 10px + } + .columns-area__panels__main { + margin-top 20px !important + } + } + } + } + + // LEFT COLUMN + / { + + .columns-area__panels__pane--compositional { + @media (min-width responsiveW1) { + if spaceBetween { + .columns-area__panels__pane__inner::before { + content "" + position absolute + inset -100px -11px + border-inline 1px solid var(--border-color) + z-index -1 + } + } } - &:hover { - img, span { - transform scale(1.2) - } - } } - } - .emoji-picker-dropdown__modifiers { - top 16px - } - - - #mastodon { - overflow clip // fix weird overflow in some smaller windows, ex iphone se 2nd gen - - // LEFT COLUMN + .compose-panel { overflow-y auto margin-top calc(0px - var(--top)) @@ -461,6 +397,7 @@ unless you're on a nightly version with the design already in use. min-height unset overflow unset gap 15px + flex 1 0 auto !important > * { margin 0 !important } @@ -548,13 +485,13 @@ unless you're on a nightly version with the design already in use. flex-wrap wrap flex-direction row gap 0 - //width auto !important flex-grow 9999 - > * { - //display flex + * { + display flex flex-grow 1 - //max-width 38px !important - box-sizing border-box + } + label { + display none } button { flex-grow 1 @@ -575,11 +512,9 @@ unless you're on a nightly version with the design already in use. } } } - - - /.server-banner { - padding 10px + //// SERVER INFO + .server-banner { .server-banner__hero { border-radius var(--radius) // margin-inline -10px @@ -630,26 +565,10 @@ unless you're on a nightly version with the design already in use. } } } - /.navigation-panel__sign-in-banner { + .navigation-panel__sign-in-banner { margin-inline 5px // border-top 1px solid position relative - .sign-in-banner { - // padding 0 - // border 1px solid var(--border-color) - // border-radius var(--radius) - // padding 15px - p { - // color inherit !important - // font-weight 500 - // opacity . - line-height 1.5 - // text-align justify - } - > :last-child { - margin-bottom 0 - } - } } .link-footer { margin-top 20px @@ -657,46 +576,55 @@ unless you're on a nightly version with the design already in use. margin-bottom 0 } } - - - // CENTER COLUMN - - /.columns-area__panels__main { + } + + //// CENTER COLUMN + / { + .columns-area { + box-shadow var(--column-shadow) + padding 0 + overflow visible + } + .columns-area__panels__main { @media (min-width responsiveW2) { width 0 flex-grow 1 - padding-inline 10px + margin-inline 10px + max-width var(--tl-width) !important } @media (min-width responsiveW1) { - max-width var(--tl-width) !important - padding 0 15px - margin 0 10px + margin 0 20px } - - @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 { + if sideHeader { + @media (min-width mobileW) { + display grid + grid-template-columns 100% + .column, .columns-area { + grid-column 1 + 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 + + if !sideHeader { + overflow clip !important + border-radius var(--radius) var(--radius) 0 0 !important + } > div { grid-row 1 } - :not(.scrollable--flex) > .scrollable { - padding-bottom 40vh !important - } } .column { background var(--background-color) + overflow clip &::before { content "" position absolute @@ -705,283 +633,1193 @@ unless you're on a nightly version with the design already in use. pointer-events none } } - .columns-area { - box-shadow 0 8px 24px 12px rgba(0,0,0,0.02) - } - .column-header__wrapper ~ .scrollable { - overflow auto !important - } - .scrollable:not(.scrollable--flex), .activity-stream { - &:not(.activity-stream):not(.privacy-policy) { - padding 10px + if flatterUI { + .columns-area.columns-area, .column.column { + overflow visible !important } - - contain unset !important - > [tabindex]:first-child > .focusable { - margin-top 0 !important + .scrollable { + contain unset !important } } - .search-results__section__header { - margin 0px -10px 10px - color unset + +desktop() { + .scrollable > [tabindex="-1"]:first-child { + margin-top 10px + } + .item-list { + > article:first-of-type { + margin-top 10px + } + } + .load-more + .trends__item, + {statuses-list} { + margin-inline 10px !important + max-width calc(100% - 20px) + } + } + .scrollable { + padding-bottom 40vh !important + } + .empty-column-indicator, .error-column { background none - padding-inline 20px - font-weight 600 } - .search-results__section { - border 0 - margin-bottom 20px - } - .dismissable-banner, .follow_requests-unlocked_explanation { + .dismissable-banner { display flex align-items center + flex-direction row-reverse + gap 20px + margin 0 + border-radius 0 + border 0 + padding 25px + > div { + padding 0 + } + button { + padding 16px + margin -16px -14px + } + } + + // COLUMN HEADER + .tabs-bar__wrapper { + if sideHeader { + grid-column 2 + @media (min-width mobileW) { + margin-top -100vh + } + } border 0 !important - margin -10px !important - margin-bottom 10px !important - border-radius 0px !important - padding 15px !important - height max-content - isolation isolate - overflow hidden - /.dismissable-banner__message { - padding-block 10px - order -1 - } - .dismissable-banner__action { - position static - } - +compactStatuses() { - @media (max-width mobileW) { - margin 0 !important + padding-top 0 + transition margin transBounce1, top .4s + /.column-header, /.column-inline-form { + font-weight 600 + border-bottom-left-radius 0 !important + border-bottom-right-radius 0 !important + & ~ .scrollable { + border-top-left-radius 0 !important + border-top-right-radius 0 !important } } - } - .column:not(.scrollable--flex) > .dismissable-banner { - //border-radius var(--radius) var(--radius) 0 0 !important - margin 0 !important - & ~ .scrollable { - border-radius 0 !important - } - } - :not(.account__section-headline) + .scrollable > .dismissable-banner { - margin 0px !important - margin-bottom 0 !important - } - - .empty-column-indicator { - contain unset - padding 10px !important - color unset - opacity .8 - font-size 1.2em - line-height 2 - a { - display block - font-weight 700 - font-size 1.1em - } - } - - - // ACCOUNT PAGE - .scrollable--flex .account-timeline__header { - margin 0 !important - } - .item-list { - background-color inherit - border-radius var(--radius) - } - .account-timeline__header { - margin -10px - margin-bottom 10px - background-color inherit - border-radius var(--radius) !important - animation fade backwards .4s cubic-bezier(0,1,1,1) - .account__moved-note { - box-sizing border-box - border-radius var(--radius) - margin-bottom calc(0px - var(--radius)) - // margin-bottom -30px - padding 30px - padding-bottom calc(var(--radius) + 30px) - background inherit - .detailed-status__display-name { - overflow visible !important + /.column-header__title { + display inline + svg { + vertical-align -.4em } } - .account__header { - overflow visible !important - border-radius var(--radius) var(--radius) 0 0 - background inherit + /.announcements, /.column-header__collapsible:not(.collapsed) { + flex-direction column-reverse + align-items flex-start + border 0 + animation slideDownFade .3s backwards cubic-bezier(0,1,0,1.2) } - .account__header__info { + /.column-header__collapsible { + transition none + background var(--surface-background-color) + overflow-y auto !important + } + .collapsed { + display none + } + /.announcements { + background var(--surface-background-color) + } + /.announcements__container { + width 100% !important + } + /.announcements__mastodon { + display block !important + z-index -1 + position relative + } + /.announcements__pagination { + bottom unset + padding-block 0 + display flex + align-items center + } + /.column-header__wrapper { + > :not(.column-header):not(.collapsed) { + border-top 2px solid var(--background-color) !important + } + } + /.column-header { + overflow hidden + } + /.column-header > button { z-index 2 } - .account__header__image { - height 0 - padding-bottom 35% - border-radius var(--radius) var(--radius) 0 0 - position sticky - top calc(0px - var(--radius)) - overflow clip - img { - position absolute + /.column-header__buttons { + isolation isolate + } + /.column-header__buttons button { + transition background .2s, transform .3s !important + position relative + border-radius 100px !important + min-width 40px + margin 5px + margin-inline-start 0 + font-size .9em + padding-inline 10px + //transform none !important + &:not(.active) { + background var(--elevated-color) !important + z-index 2 } - .account__header__info { - // position sticky - height 100% - > span { - position sticky - top var(--radius) + svg { + margin 0 + } + span { + display none + } + &::before { + content "" + position absolute + inset -20px -800px + transform scale(0) + transform-origin bottom center + background var(--surface-background-color) + z-index -1 + border-radius 100px + pointer-events none + opacity 0 + transition transform .3s, opacity .3s + @media (prefers-reduced-motion) { + transition none !important + } + } + &.active { + &::before { + transform scale(1, 5) + opacity 1 + transition transform .3s, opacity .1s } } } - .account__header__bar { - position relative - z-index 2 - border 0 - padding-inline 20px - @media (max-width mobileW) { - padding-inline 15px + + + @media (min-width mobileW) { + inset-inline unset !important + height 50px !important + top 0 + .column-header__wrapper { + display flex + flex-direction column + border-radius var(--radius) + overflow hidden } - border-radius var(--radius) var(--radius) 0 0 - margin-top calc(0px - var(--radius)) !important - display flex - flex-direction column - background var(--background-color) - isolation isolate - + .column-header { + background none !important + overflow hidden + border 0 + } + if sideHeader { + top var(--top) !important + width 285px + border-radius var(--radius) var(--radius) !important + box-shadow 0 12px 12px -12px rgba(0,0,0,0.1) + + if !spaceBetween { + margin-inline-start 20px + @media (max-width responsiveW1 - 1) { + margin-inline-start 10px + } + } + @media (max-width responsiveW2 - 1) { + width 265px + top 10px !important + } + + if spaceBetween { + position fixed + inset-inline-end 10px !important + margin 0 !important + } + + if navOnLeft { + grid-column 1 + if !spaceBetween { + margin-inline-start -285px - 20px !important + @media (max-width responsiveW1 - 1) { + margin-inline-start -285px - 10px !important + } + @media (max-width responsiveW2 - 1) { + margin-inline-start -285px + 10px !important + } + } + if spaceBetween { + inset-inline-start 10px !important + } + } + } + if !sideHeader { + border-bottom 1px solid var(--border-color) !important + &::after { + content "" + position absolute + inset 0 + background var(--elevated-tint) + } + .column-header { + padding-inline 10px + } + } + } + } + if sideHeader { + @media (min-width mobileW) { + .column-back-button--slim { + margin-left auto !important + order -1 + > .column-back-button { + margin-top 0 !important + top unset !important + } + } + @media (max-width responsiveW2 - 1) { + .column-back-button--slim > .column-back-button { + margin-top -55px !important + top unset !important + } + } + } + } + + // COLUMN HEADER SETTINGS + .column-settings__row, .column-settings__hashtags { + gap 0 + } + .column-settings h3 { + font-size 1em + margin-bottom 8px + } + .column-select__control { + border-radius var(--radius) + } + .local-settings__page__item, + .glitch-setting-text.glitch-setting-text, + .setting-toggle, .app-form__toggle { + display flex + align-items center + margin-bottom 14px + position relative + padding .7em + background var(--elevated-color) + margin-block 0 2px !important + overflow hidden + &:first-of-type { + border-top-left-radius var(--radius) + border-top-right-radius var(--radius) + } + &:last-of-type { + border-bottom-left-radius var(--radius) + border-bottom-right-radius var(--radius) + } + label, legend { + padding-block 2px !important + } + label span { &::before { content "" - background var(--elevated-tint) position absolute - inset 0 - pointer-events none + inset -900px } + } + + // border-radius var(--radius) + .react-toggle { + order 2 + } + .setting-toggle__label { + margin-bottom 0 !important + flex-grow 1 + width 0 + } + + &::before { + content "" + position absolute + inset 0 + background var(--hover-color) + opacity 0 + transition opacity .2s + pointer-events none + } + &:hover, &:focus-within { + &::before { + opacity 1 + } + } + } + } + + //// RIGHT COLUMN + / { + .columns-area__panels__pane--navigational { + @media (min-width responsiveW1) { + if spaceBetween { + .columns-area__panels__pane__inner { + &::before, &::after { + content "" + position absolute + inset -100px -10px + background var(--background-color) + z-index -1 + } + &::after { + background var(--elevated-tint) + } + } + } + } + } + + //// NAV PANEL + .navigation-panel.navigation-panel { + box-sizing border-box + if sideHeader { + 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)) + overflow hidden auto + > hr { + display none + } + + @media (min-width responsiveW2) { + if sideHeader { + padding-top calc(var(--radius) + 10px) + margin-top calc(50px - var(--radius)) + .navigation-panel__logo { + .column-link, hr { + display none !important + } + } + } + if !sideHeader { + margin-top calc(0px - var(--top)) + height 100vh + padding-top var(--top) + } + .switch-to-advanced { + border-radius var(--radius) + margin-top 0 + } + [href="/settings/preferences"] { + display none !important + } + } + /.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 + } + /.column-header__back-button + /.column-back-button > svg + /.column-link__icon, /.column-header > button .column-header__icon { + margin-inline-end .7em + font-size 16px !important + padding-right 0 !important + } + @media (min-width mobileW) { + /.column-link { + flex-grow 100 !important + display flex !important + align-items center !important + align-content center + max-height 3.3em + min-height 2.7em !important + padding-block 0 + border-radius 100px + position relative + box-sizing border-box + opacity .9 + overflow hidden + background none !important + &::before { + content: "" !important; + position absolute + border-radius: 100px; + width unset !important + height unset !important + inset 0px 0px !important + // min-height 43px + opacity 0 !important + background-color rgba(150,150,150,0.1) + transition opacity .2s + } + &.active { + opacity 1 !important + font-weight 600 + } + &:hover, &:focus { + &:before { + opacity 1 !important + } + } + &[href="/lists"] { + & + div { + hr { + display none + } + .column-link { + margin-bottom 2px + + i { + opacity .2 + } + } + } + } + } + .getting-started__trends { + display unset !important + } + } + + .trends__item { + margin 0 !important + } + } + } + + + //// STATUSES + / { + .scrollable > div:first-child > [tabindex="-1"]:last-child .status__wrapper { + &::after { + content unset + } + } + {statuses-list} { + overflow hidden + contain paint inline-size + position relative + border-radius var(--panel-radius) + border 0 + &.focusable { + background none + } + // Hover + @media (pointer fine) { + &::before { + content "" + position absolute + inset 0px !important + height unset !important + width unset !important + pointer-events none + transition background-color .2s + } + &:hover, &:focus-within { + &::before { + background-color var(--hover-color) + } + } + } + // borders + &:not(:last-child)::after { + content "" + position absolute + bottom 0px + inset-inline var(--radius) + border-top 1px solid var(--border-color) + pointer-events none + } + /.status__wrapper-reply.status--in-thread { + &::after { + top 0 + } + } + /.status--in-thread.status__wrapper-reply:not(.status--first-in-thread), + /.status--in-thread:not(.status__wrapper-reply) { + &::after { + border-top 0 !important + } + } + } + .detailed-status + .status { + padding 16px + } + .status__info { + .account__avatar, .status__avatar { + max-width var(--avatar-size) !important + max-height var(--avatar-size) !important + } + } + .status__line { + left calc(16px + (var(--avatar-size) / 2)) + } + .status__prepend { + & + .status:not(.status-direct) { + padding-top 0 + } + } + + // STATUS REPLY + .status--in-thread { + @media (max-width 450px) { + --avatar-size 34px + .status__info ~ * { + margin-inline-start calc(var(--avatar-size) + 10px) + width calc(100% - (var(--avatar-size) + 10px)) + } + } + } + + // STATUS CONTENT + .status__content { + text-align unset !important + line-height 1.5 + &.status__content--with-spoiler { + overflow visible + > p { + margin-inline -100px + padding-inline 100px + overflow hidden + } + > p:first-child { + margin-bottom 0 + } + } + p:empty { + max-height 0 + } + picture { + display contents + } + .custom-emoji { + display inline-block + height var(--emoji-size) !important + min-width var(--emoji-size) !important + width auto + margin -.2ex 0 .2ex + if emojiZoom { + @media (prefers-reduced-motion: no-preference) { + /^[-1..-1] { + transition transform 1s cubic-bezier(0,0.7,0,1) + &:hover { + transform scale(1.7) + transition transform .4s cubic-bezier(0,0.7,0,1) + } + } + } + } + } + // max-height to media + & ~ [style*="aspect-ratio"] { + max-height 80vh + } + } + #mastodon .status__content__spoiler-link { + display flex + align-items center + position relative + padding .4em 1.2em + border-radius var(--radius-round) + color inherit + background var(--elevated-color) + margin-block 8px + &::before, &::after { + content "" + position absolute + inset 0 + border-radius var(--radius-round) + background-color var(--hover-color) + opacity 0 + transition opacity .2s + } + &::after { + inset -6px -9999px + } + + &:hover, &:focus { + &::before, &::after { + opacity 1 + } + } + } + + // STATUS DIRECT + .detailed-status__wrapper-direct, .status-direct, .status__wrapper-direct, .conversation { + .status__content { + position relative !important + background var(--elevated-color) + padding 12px 14px + border-radius var(--radius-round) + border-top-left-radius 6px + box-sizing border-box + margin-bottom 0 + overflow hidden !important + max-width max-content + .media-gallery { + width 999px + max-width 100% !important + } + } + } + .status__wrapper-direct:not(.detailed-status__wrapper-direct) { + .status__prepend { + position absolute + contain strict + } + } + + // STATUS DETAILED + .detailed-status { + border 0 + padding-bottom 4px + } + .detailed-status__wrapper, .detailed-status { + box-shadow var(--shadow) + .status__content { + min-height unset !important + } + } + .detailed-status__wrapper { + isolation isolate + background none + &::before { + content "" + position absolute + inset 0 + background var(--elevated-tint) !important + pointer-events none + z-index -1 + } + .detailed-status { + box-shadow none + } + } + + .detailed-status__meta { + margin-top 14px + line-height 2 + > * { + display inline-flex + border 0 !important + padding 0 !important + margin-inline-end 8px + &:not(:last-child) { + &::after { + content "·" + } + } + } + } + + // STATUS MEDIA + {media} { + box-shadow var(--shadow-low) + border-radius var(--radius) !important + margin-top 10px !important + margin-bottom 10px !important + animation scaleIn .4s + max-width unset !important + } + if collapseHidden { + .media-gallery:has(.spoiler-button:not(.spoiler-button--minified)) { + height 150px !important + aspect-ratio unset !important + } + } + .media-gallery__item { + border-radius 0 + } + .spoiler-button--minified { + button { + padding 6px !important + background rgba(0,0,0,0.2) !important + if hideClickArea { + &::after { + content "" + position absolute + inset -50px + } + } + &:hover { + background rgba(0,0,0,0.4) !important + } + } + .icon { + width 18px + height 18px + } + } + // link embeds + .status-card { + align-items stretch + gap 0 + &:not(.horizontal) { + border 1px solid var(--border-color) !important + } + &:not(.expanded) .status-card__image { + overflow hidden + img { + border-radius 0 + } + } + &:not(.interactive) .status-card__image { + position relative + aspect-ratio unset !important + } + /.status-card__content { + margin-block auto + padding 15px + } + /.status-card__host { + font-size .85em + line-height 1.5 + margin 0 + } + /.status-card__title { + font-size 1em + margin-top .2em + margin-bottom 0 + line-height 1.4 + } + /.status-card__description { + line-height 1.4 !important + margin 0 + @supports (-webkit-line-clamp 8) { + display -webkit-box + -webkit-line-clamp 8 + -webkit-box-orient vertical + white-space unset + } + } + /.status-card__author { + margin-top 0.4em + font-size .85em + } + &:hover { + background-color var(--hover-color) + } + } + .more-from-author { + background none + border 0 + padding-top 0 + border-radius var(--radius) + } + + .audio-player { + .video-player__seek { + margin var(--radius) + } + } + + .hashtag-bar { + margin-top 10px + a, button { + color var(--accent, #8c8dff) + transition opacity .2s + padding 5px 10px + } + a { + position relative + border-radius var(--radius-round) + background var(--elevated-color) &::after { content "" position absolute - inset-inline 0 - height 150px - 55px - background inherit - z-index -1 - border-radius var(--radius) - mask linear-gradient(to bottom, transparent, black) + inset 0 + background var(--elevated-color) + border-radius inherit + opacity 0 + transition opacity .2s } - - .account__header__tabs { - overflow visible !important - align-items flex-end - padding 0 - // padding-top 10px - height unset !important - margin-top -55px !important - &::before { // Add blur below the account header - content "" - position absolute - top -55px - inset-inline 0 - height 150px - backdrop-filter blur(40px) - filter brightness(1.1) - pointer-events none - opacity .7 - z-index -2 - clip-path inset(55px 0 0 0 round var(--radius)); - } - & ~ div { - z-index 2 + &:hover, &:focus { + opacity 1 + &::after { + opacity 1 } } - .avatar { - margin-inline-start 0 !important - overflow visible !important - position relative - margin-top 20px - .account-role { - position absolute - bottom 0 - left 110% - border-radius var(--radius) - } - } - .account__avatar { - border 0 - box-shadow var(--shadow) - background none - background-size cover !important + } + button { + padding-block 0 + } + } + + + // STATUS FOOTER + .status__action-bar { + flex-wrap wrap + margin-top .4em + margin-bottom -6px + gap 0 + margin-inline-start -8px + pointer-events none + > * { + pointer-events all + flex-grow 1 + max-width 55px + min-width max-content + button.icon-button { + width 100% !important } } - .account__header__tabs__name { - margin-bottom 0 - padding 0 - margin-top 16px - h1 { - display flex - flex-wrap wrap - white-space unset - gap 0 .4em - font-weight 600 - } + > :not(.icon-button) { + display flex + height 100% } - .account__header__extra { - margin-top 5px - } - .account__header__bio { + .icon-button { margin 0 - > * { - padding-inline 0 - } - .account__header__content { - padding 0px - } - } - .account__header__badges { - margin-top 10px - span { - font-weight 600 + &::before { // Increase the click area + content "" + position absolute + inset -.5em } } } + + .status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer { + position relative + z-index 2 + justify-content unset + .icon-button { + display inline-flex + align-items center + justify-content center + padding .5em .4em !important + border-radius var(--radius) + position relative + .icon-button__counter { + width auto !important + } + } + .icon-button--with-counter { + padding-inline .7em !important + } + } + .detailed-status__action-bar, .picture-in-picture__footer { + padding-inline 15px !important + gap 0 + .icon-button { + flex-grow 1 !important + } + div { + display flex + justify-content center + flex-grow 1 + } + } + + } + + //// ITEMS + / { + .account__wrapper { + line-height 1.5 + /.account__contents { + display flex + flex-wrap wrap + flex-grow 1 + gap 0 10px + } + /.display-name { + margin-bottom 1px !important + } + /.account:not(.account--minimal) .display-name__account { + display block + width 300px + } + /.account__details { + font-size .9em + opacity .8 + width 100px + flex-grow 1 + text-align end + align-items center + line-height 1.2 + &:has(.verified-badge) { + > :not(.verified-badge) { + display none + } + } + } + button:not(:hover):not(:focus) { + background var(--elevated-color) + color inherit + } + } + } + + //// PAGES + //// EXPLORE + / { + .trends__item, .story, .account-card { + animation slideUpFade backwards .4s (.04s * 6) cubic-bezier(0,1,1,1) + border-radius var(--radius) + for row in 1..6 { + &:nth-child({row}) { + animation-delay .04s * row + } + } + } + .explore__links { + padding 10px + display flex + flex-wrap wrap + align-content flex-start + > .dismissable-banner { + margin -10px + margin-bottom 10px + } + .story { + margin-inline 0 !important + } + // / includes trends items in right sidebar + /.trends__item { + display flex !important + margin-inline 0 !important + } + /.trends__item__name a { + &::before { + content "" + position absolute + inset 0 + } + } + /.trends__item__current { + display none + } + /.trends__item__sparkline { + overflow visible !important + pointer-events none + svg { + overflow visible !important + } + path:first-child { + filter blur(8px) + } + path:last-child { + mask linear-gradient(to left, black, black, transparent) + -webkit-mask @mask + } + /.rtl & { + transform scaleX(-1) + } + } + + .trends__item { + margin 7.5px !important + padding 25px !important + box-shadow var(--shadow-med) + width 200px + background var(--elevated-color) + flex-grow 1 + &::after { + content unset !important + } + a { + font-size 1.4em + line-height 1.7em + &::before { + content "" + position absolute + inset 0 + } + } + .trends__item__sparkline { + height 100% + svg { + height 100% + float right + overflow visible !important + position relative + + path { + display unset !important + transition transform 1s + &:first-child { + transform-origin center + } + } + } + } + &:hover, &:focus-within { + svg path:first-child { + transform scale(2) + } + } + } + .story { + width 100% + margin 0 + } + } + } + //// PROFILE + / { + .account__header { + overflow visible + } + .follow-request-banner { + margin-bottom -100px + padding-bottom 120px + } + .account__header__image { + height 0 + padding-bottom 35% + if sideHeader { + border-radius var(--panel-radius) var(--panel-radius) 0 0 + } + position sticky + top calc(0px - var(--panel-radius)) + overflow clip + img { + position absolute + } + .account__header__info { + position absolute + z-index 2 + height 100% + > span { + position sticky + top var(--radius) + } + } + } + .account__header__bar { + position relative + z-index 2 + border 0 + padding-inline 20px + @media (max-width mobileW) { + padding-inline 15px + } + border-radius var(--radius) var(--radius) 0 0 + margin-top calc(0px - var(--radius)) !important + display flex + flex-direction column + 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 + height 150px - 55px + background inherit + z-index -1 + border-radius var(--radius) + mask linear-gradient(to bottom, transparent, black) + } + + /.account__header__tabs { + overflow visible !important + align-items flex-end + padding 0 + // padding-top 10px + height unset !important + margin-top -55px !important + &::before { // Add blur below the account header + content "" + position absolute + top -55px + inset-inline 0 + height 150px + backdrop-filter blur(40px) + filter brightness(1.1) + pointer-events none + opacity .7 + z-index -2 + clip-path inset(55px 0 0 0 round var(--radius)); + } + & ~ div { + z-index 2 + } + } + .avatar { + margin-inline-start 0 !important + overflow visible !important + position relative + margin-top 20px + .account-role { + position absolute + bottom 0 + left 110% + border-radius var(--radius) + } + } + .account__avatar { + border 0 + box-shadow var(--shadow) + background none + background-size cover !important + } + } + .account__header__tabs__name { + margin-bottom 0 + padding 0 + margin-top 16px + h1 { + display flex + flex-wrap wrap + white-space unset + gap 0 .4em + font-weight 600 + } + } + .account__header__extra { + margin-top 8px + } + // account fields .account__header__fields, .account__header__account-note { display flex flex-wrap wrap gap 2px - //margin-bottom 20px background none - // margin-inline -10px - border-radius var(--radius) + border-radius var(--radius) !important overflow hidden - width max-content - // max-width calc(100% + 20px) - max-width 100% - border 0 - &:first-child { - margin-block 5px 15px - } + max-width max-content + border 0 !important + } + .account__header__fields { dl { - // border-radius var(--radius) display inline border-radius 0 overflow hidden &:not(.verified) { background-color var(--elevated-color) } - - border 0 - // border 1px solid var(--border-color) + border 0 !important padding 8px 12px !important position relative overflow hidden - // min-width max-content flex-grow 1 - // max-width max-content !important dt { - all unset - color unset - opacity .9 + all unset !important + color unset !important + opacity .9 !important } dd { @@ -1022,103 +1860,49 @@ unless you're on a nightly version with the design already in use. } } } - - - } - &.account__header__account-note { - display flex - margin-bottom 10px !important - gap 0 - border 0 - padding 0 !important - margin-inline 0 !important - background none !important - border-radius 8px - font-size 12px - width unset - label { - z-index 2 - padding 0 !important - padding-inline-end .7em !important - pointer-events none - line-height inherit - font-size inherit - font-weight inherit - vertical-align unset - &::after { - // content ":" - } - } - &:focus-within { - padding .5em .7em !important - margin-inline -5px !important - border 1px solid - } - &:not(:focus-within) { - border-radius 0 - border-bottom 1px solid - padding-bottom .4em !important - } - textarea { - width 0 - flex-grow 1 - margin 0 !important - border-radius 0 - padding 0 - margin -100px !important - padding 100px !important - padding-inline-end .7em !important - margin-inline-end -.7em !important - line-height inherit - font-size inherit - font-weight inherit - vertical-align unset - background none - &::placeholder { - // opacity .7 !important - font-weight 600 - } - } - label { - margin 0 - font-weight 600 - padding-inline 14px - } } } - // account tabs - :not(.explore__search-header) + .account__section-headline:not(:first-child) { - background none + .account__header__account-note { position relative - z-index 2 - /.with-modals & { - border 0 !important + font-size .9em + max-width unset + padding .5em 10px !important + margin-block -5px 10px + margin-inline -10px !important + border-radius var(--radius) !important + &::after { + content "" + position absolute + bottom 0 + inset-inline 10px + border-top 1px solid var(--border-color) + transition opacity .2s } - a, button { - background none - border-radius 0 !important - span { - font-weight 400 - opacity .7 - transition opacity .2s - } - &.active span { - font-weight 700 - opacity 1 - } - &:hover span, &:active span { - opacity 1 !important - } - &::before { - border-color transparent transparent var(--border-color) + &:focus-within::after { + opacity 0 + } + label { + z-index 2 + margin 0 + pointer-events none + font-size inherit + } + textarea { + margin -100px !important + padding 100px !important + padding-inline-end .7em !important + margin-inline-end -.7em !important + box-sizing content-box + width 100% + font-size inherit + transition background .2s + &::placeholder { + font-weight 600 } } } - .account__disclaimer { - border-top 1px solid - } - - // Gallery + + // GALLERY .account-gallery__container { border-radius var(--radius) overflow clip @@ -1157,43 +1941,15 @@ unless you're on a nightly version with the design already in use. } } } - - // OTHER ARTICLE COMPONENTS - // follow requests - #Follow-requests.column-header { - @media (max-width mobileW) { - display none - } - } - @media (min-width mobileW) { - #Follow-requests ~ .scrollable { - .item-list { - display grid - align-items stretch - grid-template-columns repeat(auto-fit, minmax(320px, 1fr)) - gap 0 10px - > article { - display flex - } - } - } - } - /.layout-multiple-columns { - article:first-child .account-authorize__wrapper { - margin-top 10px - } - } - @media (max-width mobileW) { - article:first-child .account-authorize__wrapper { - margin-top 10px - } - } + } + //// FOLLOW REQ'S + / { .account-authorize__wrapper { background var(--elevated-color) border-radius var(--radius) overflow hidden flex-grow 1 - margin-bottom 10px + margin 10px @media (max-width mobileW) { margin-inline 10px } @@ -1232,1297 +1988,567 @@ unless you're on a nightly version with the design already in use. height unset !important } } - - // ACCOUNT CARDS - .account-card { - display flex - flex-direction column - max-height 360px - margin 0 - border-radius var(--radius) !important - background var(--elevated-color) - box-shadow none !important - - /.explore__suggestions, /.directory__list { - padding 15px - display grid - grid-template-columns repeat(auto-fit, minmax(300px, 1fr)) - gap 10px - &.directory__list { - padding 15px 10px - } - /.layout-multiple-columns & { - // this was done because having overflow scroll/hidden + display grid or flex breaks it ? - display block - > * { - margin 10px !important - } - } - @media (max-width mobileW) { - gap 0 !important - > * { - margin 10px !important - } - } - } - box-shadow var(--shadow) - .account-card__header { - padding 0 !important - } - .account-card__title { - margin-bottom 10px - margin-top -24px - } - .account-card__title__avatar { - padding-inline-end 10px - padding-bottom 0 - } - .display-name { - padding-bottom 0 - } - .display-name__account { - font-size .9em !important - } - .account-card__title__avatar .account__avatar, .account-card__title__avatar { - width 64px !important - height 64px !important - background-size 64px 64px !important - img { - width inherit - height inherit - } - } - .account-card__title { - padding-inline-end 15px - } - .display-name bdi { - white-space nowrap - text-overflow ellipsis - overflow hidden - } - .account-card__bio { - margin-top 0 !important - max-height unset - mask linear-gradient(black 65px, rgba(0,0,0,0.5), transparent) - -webkit-mask @mask - flex-grow 1 - margin-bottom -50px - margin-bottom -15px - font-size 1em - padding-bottom 60px - // min-height 60px - &::after { - content unset !important - } - br { - display block - } - } - .account-card__actions { - // display block - margin-top auto !important - // margin-top -15px - display unset !important - - .account-card__counters { - display flex - gap 1em - padding-inline 15px - } - .account-card__counters__item { - display flex - align-items center - font-size 1em - - > small { - display inline !important - margin-inline-start .4em - font-size 1em !important - } - } - .account-card__actions__button { - position absolute - top 10px - right 10px - padding 0 - background rgba(0,0,0,0.4) - // background white - border-radius var(--radius-round) - // box-shadow 0 0 70px rgba(0,0,0,0.7) - padding 4px - // border-radius var(--radius-round) - // border 8px solid rgba(0,0,0,0.5) !important - box-shadow 0 4px 12px rgba(0,0,0,0.2) - // border 4px solid rgba(0,0,0,0.4) !important - button, a { - border-radius var(--radius-round) !important - padding .7em 1.7em - min-height unset - font-size 14px !important - line-height 1.2 - font-size 1em !important - } - &:empty { - display none - } - } - } - &::after { - content unset !important - } - } - // ACCOUNT ROWS - .account__wrapper { - gap 15px - flex-wrap wrap - .account__display-name { - flex-grow 100 - } - .account__contents { - line-height 1.4 - flex-basis 70% - width 100px - flex-grow 100 - display flex - align-items center - justify-content space-between - gap 0 20px - flex-wrap wrap - * { - line-height unset !important - } - .display-name { - height unset - margin 0 - width 27ch !important - flex-grow 1 - span { - display block - } - } - .account__details { - flex-direction column - width 25ch - span { - white-space break-spaces !important - } - } - .account__details:has(.verified-badge) { - > span:first-child { - display none - } - } - } - .account__relationship { - display flex !important - flex-wrap wrap - justify-content flex-end - min-width 10ch - gap 10px - flex-grow 1 - button { - background var(--elevated-color) - //border 1px solid - color inherit - } - } - } - - // STATUSES - .scrollable > div:first-child > [tabindex="-1"]:last-child .status__wrapper { - &::after { - content unset - } - } - - /{statuses-list} { - overflow hidden - transition background .2s, box-shadow .4s, border .2s - animation fade .4s backwards cubic-bezier(0,1,1,1) - position relative + } + //// ABOUT + / { + .about__meta { border-radius var(--radius) - &.trends__item, &.story, &.account-card { - animation slideUpFade backwards (.04s * 11) cubic-bezier(0,1,1,1) - for row in 1..11 { - &:nth-child({row}) { - animation-delay .04s * row - } - } - } - &.focusable { - background none - } - &.entry { - margin-bottom 10px - } - &:not(.detailed-status__wrapper) { - // Hover - &::before { - content "" - position absolute - inset 0px !important - height unset !important - width unset !important - border-radius var(--radius) - pointer-events none - transition background-color .2s - } - &.unread { - &::before { - border-start-start-radius 0 !important - border-end-start-radius 0 !important - } - } - &:hover, &:focus-within { - &::before { - background-color var(--hover-color) - } - } - // borders - &:not(.status__wrapper) { - border-radius var(--radius) - border 0 - &:not(:last-child:not(:only-child))::after { - content "" - position absolute - bottom 0px - inset-inline var(--radius) - border-top 1px solid var(--border-color) - pointer-events none - } - /.status__wrapper-reply.status--in-thread { - &::after { - top 0 - } - } - /.status--in-thread.status__wrapper-reply:not(.status--first-in-thread), - /.status--in-thread:not(.status__wrapper-reply) { - &::after { - border-top 0 !important - } - } - } - - } - /.explore__links { - padding 10px !important - display flex - flex-wrap wrap - .trends__item { - margin 7.5px - padding 25px !important - box-shadow var(--shadow-med) - width 200px - background var(--elevated-color) - // font-size 2em - // overflow visible !important - &::after { - content unset !important - inset 0 !important - border-radius var(--radius) - pointer-events none - border 1px solid var(--border-color) !important - } - a { - font-size 1.4em - line-height 1.7em - } - .trends__item__sparkline { - height 100% - svg { - height 100% - float right - overflow visible !important - position relative - - path { - display unset !important - transition transform 1s - &:first-child { - transform-origin center - } - } - } - } - &:hover, &:focus-within { - svg path:first-child { - transform scale(2) - // filter blur(40px) !important - } - } - } - } - &.trends__item, &.story { - padding 10px - flex-grow 1 - } - &.story { - padding 15px - .story__details { - padding-inline-start 0 !important - } - .story__thumbnail { - margin-inline-end 0 - border-radius var(--radius) - overflow hidden - } - } - - &.empty-column-indicator { - display block - } - &.timeline-hint { - display block - } - &.timeline-hint a { - &::before { - content "" - position absolute - inset 0 - } - } } - - .status__wrapper { - background none + .account--minimal { + max-width 100% } - - .status, .scrollable .account { - padding-block 15px - &::before { - inset -10px - border-radius var(--radius) - } - } - - // Fix dropdown note preview - .status.light { - overflow hidden !important - .boost-modal__status-header { - display flow-root !important - } - } - - .account__relationship:empty { - display none - } - .status__prepend { - white-space nowrap - > span { - display flex - flex-grow 1 - gap .3em - align-items center - > a { - overflow hidden - text-overflow ellipsis - } - } - & + .status:not(.status-direct) { - padding-top 0 - } - } - .notification .status { - //padding-top 0 - .status__info { - margin-top 0px !important - } - .status__content ~ .media-gallery, - .status__content ~ [style*="aspect-ratio:"] { - height 60px - width 100px - margin 0 !important - opacity .5 - overflow hidden - border-radius var(--radius) - } - .status__content ~ [style*="aspect-ratio:"] { - .video-player__controls { - display none - } - } - } - .status__prepend, .notification__message { - display flex - padding-top 15px !important - padding-bottom 0 !important - margin 0 !important - z-index 2 - position relative - [class*="icon-wrapper"] { - display flex - align-items center - } - a { - white-space nowrap - font-weight 700 - text-overflow ellipsis - overflow hidden !important - } - bdi { - text-overflow ellipsis - overflow hidden - max-width 100% - } - } - .notification__message { - > span, > span > span { - display flex - flex-wrap wrap - align-items center - gap 0em .4em - line-height 1.4 - max-width 100% - } - } - .notification-favourite, .notification-reblog { - .notification__message { - margin-bottom -10px !important - & ~ div { - .status__info, .status__action-bar { - display none - } - .status { - min-height unset - } - .attachment-list { - margin-top 0 - } - .status__content__text.status__content__text { - max-height 80px !important - mask linear-gradient(black 60px, transparent) - -webkit-mask @mask - // min-height 1em - p { - margin 0 - } - } - .attachment-list__list { - display flex - flex-direction row - // flex-wrap wrap - justify-content flex-start - gap 0 1em - margin-top 4px - z-index 2 - pointer-events none - max-width 100% - li { - display contents - } - a { - pointer-events all - white-space nowrap - text-overflow ellipsis - overflow hidden - } - } - } - } - } - .status__line:not(.status__line--full) { - height 20px - filter contrast(2) - } - .status__line::before { - top 20px - height 48px - } - .status__avatar { - min-width 45px - } - .account__avatar-overlay-base { - width 100% - height 100% - background-size cover - border-radius var(--radius) - .account__avatar { - width 90% !important - height 90% !important - } - } - .account__avatar-overlay-overlay { - border-radius var(--radius-round) - overflow hidden - } - .status__info { - margin-block 5px 0 - padding 0 !important - align-items flex-start - > * { - position relative - z-index 2 - } - .display-name { - color unset !important - strong { - font-weight 600 - overflow hidden - text-overflow ellipsis - } - } - b { - unicode-bidi isolate - } - .status__relative-time { - display flex - font-weight 500 - font-size 15px - // line-height 22px - .status__visibility-icon { - order 2 - margin-inline-start .4em - } - abbr { - // text-decoration none - margin-inline-start .7em - &::after { - content: "" - fa() - } - } - } - } - - // STATUS CONTENT - .status__content { - padding-top 2px - text-align unset !important - line-height 1.5 - margin-top 10px - &.status__content--with-spoiler { - overflow visible - > p { - margin-inline -100px - padding-inline 100px - overflow hidden - } - > p:first-child { - margin-bottom 0 - } - } - p:empty { - max-height 0 - } - .custom-emoji { - height 2em - min-width 2em - width auto - /^[-1..-1] { - transition transform 1s cubic-bezier(0,0.7,0,1) - &:hover { - transform scale(1.7) - transition transform .4s cubic-bezier(0,0.7,0,1) - } - } - } - & ~ [style*="aspect-ratio"] { - max-height 80vh - } - } - .status > .status__content { - .status__content__text { - &:empty { - margin-top -5px !important - } - } - } - .status__content__spoiler-link { - display flex - align-items center - position relative - padding .4em 1.2em - border-radius var(--radius-round) !important - color inherit - background var(--elevated-color) - margin-block 8px - &::before, &::after { - content "" - position absolute - inset 0 - border-radius var(--radius-round) - background-color var(--hover-color) - opacity 0 - transition opacity .2s - } - &::after { - inset -6px -9999px - } - - &:hover, &:focus { - // background none - &::before, &::after { - opacity 1 - } - } - } - .detailed-status__wrapper-direct, .status-direct, .status__wrapper-direct, .conversation { - .status__content { - position relative !important - background var(--elevated-color) - padding 8px 12px - padding .7em .9em !important - border-radius var(--radius-round) - border-top-left-radius 6px - box-sizing border-box - margin-top 5px !important - margin-bottom 0 - overflow hidden !important - max-width max-content - .media-gallery { - width 999px - max-width 100% !important - } - /.detailed-status__wrapper-direct ^[-1..-1] { - font-size 17px - } - } - } - .status__wrapper-direct:not(.detailed-status__wrapper-direct) { - .status__prepend { - position absolute - font-size 0 - opacity 0 - } - } - .status-direct { - .icon-at, .status__visibility-icon { - color var(--accent, #8c8dff) - } - .status__info .status__relative-time { - height auto - color var(--accent, #8c8dff) - } - &.status--in-thread { - .status__info { - align-items center - gap 10px - > span { - width 0 - flex-grow 1 - } - } - .status__info> span, .status__display-name { - overflow visible !important - } - .status__display-name { - overflow hidden - width 0 - flex-grow 1 - } - .status__avatar { - height auto - margin-bottom -100px - .account__avatar { - position absolute - top 0 !important - height 46px !important - width 46px !important - } - } - .display-name { - * { - display inline - margin-right .2em - } - } - } - } - - {media} { - box-shadow var(--shadow-low) - border-radius var(--radius) - margin-top 10px !important - margin-bottom 10px !important - animation scaleIn .4s - max-width unset !important - // max-height 80vh !important - } - .status .media-gallery__item { - max-height 80vh - } - /.status-card { - &:not(.horizontal) { - border 1px solid var(--border-color) !important - } - line-height 1 - /.status-card__content { - padding 12px !important - margin-block auto - } - .status-card__image { + .about__section { + margin 30px -20px + padding-inline 20px + contain inline-size paint + &.active .about__section__title { + margin-inline -20px border-radius 0 - width 90px - min-height 100% - img { - border-radius 0 - height 100% - } - } - &.compact:not(.interactive) .status-card__image { - position relative - aspect-ratio unset !important - img { - position absolute - inset 0 - } - } - /.status-card__host { - font-size .85em - line-height 1.5 - margin 0 - } - /.status-card__title { - font-size 1em - margin-top .2em - margin-bottom 0 - line-height 1.4 - } - /.status-card__description { - line-height 1.4 !important - margin 0 !important - } - /.status-card__author { - margin-top 0.4em - font-size .85em - } - &:hover { - background-color var(--hover-color) + border-inline 0 + border-bottom 0 } } - /.audio-player { - .video-player__seek { - margin var(--radius) - } - } - .hashtag-bar { - margin-top 10px - a, button { - font-size .9em - // font-weight 600 - padding .2em .6em - color inherit - opacity .9 - color var(--accent, #8c8dff) - transition opacity .2s - } - a { - position relative - border-radius var(--radius) - background var(--elevated-color) - &::after { - content "" - position absolute - inset 0 - background var(--elevated-color) - border-radius inherit - opacity 0 - transition opacity .2s - } - &:hover, &:focus { - opacity 1 - &::after { - opacity 1 - } - } - } - button { - padding-block 0 - } - } - - - .detailed-status__wrapper { + .about__section__title { + position sticky + top -1px + z-index 2 + background var(--background-color-tint) + border 1px solid var(--border-color) border-radius var(--radius) - overflow clip - } - .detailed-status { - border 0 !important - padding 15px !important - padding-bottom 5px !important - .status__prepend { - padding-top 0 !important - margin-bottom 1em !important - } - .detailed-status__display-name { - margin-bottom 10px - } - } - div:empty + div > .detailed-status__wrapper { - margin-top 0 !important - } - .detailed-status__wrapper, .detailed-status, .picture-in-picture { - box-shadow var(--shadow) - {media} { - margin-inline 0 !important - max-height unset !important - } - .status__content { - min-height unset !important - } - } - .detailed-status__wrapper { - isolation isolate - &::before { + overflow hidden + transition margin .2s cubic-bezier(0,1,0,1), border-radius .2s + + &::after { content "" position absolute inset 0 background var(--elevated-tint) - pointer-events none + backdrop-filter blur(10px) z-index -1 } - .detailed-status { - box-shadow none - } } - .picture-in-picture { - z-index 101 - .picture-in-picture__header { - border-radius var(--radius) var(--radius) 0 0 - } - {media} { - --radius 0 - margin 0 !important - } - .picture-in-picture__footer { - border-radius 0 0 var(--radius) var(--radius) - } + .about__section__body { + border 0 + padding 0 + animation slideDownFade .4s .1s backwards cubic-bezier(0, 1, 0, 1.2) } - - .status__action-bar { - margin-top .4em - margin-bottom -8px - .icon-button { - padding .25em .25em !important - margin 0 - &::before { // Increase the click area - content "" - position absolute - inset -.5em - } - } + } + //// SEARCH + / { + .explore__search-results { + border 0 } - .status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer { - position relative - z-index 2 - pointer-events none - gap 0 18px - justify-content unset - :not(i) { - pointer-events all - } - > div { - all unset - } - .icon-button { - display inline-flex - align-items center - justify-content center - width unset !important - padding .5em !important - - height unset !important - // flex 0 1 auto !important - // min-width 55px - border-radius var(--radius) - position relative - &:last-child { - margin 0 !important - } - .icon-button__counter { - width auto !important - } - } - &.detailed-status__action-bar, &.picture-in-picture__footer { - padding-inline 15px !important - gap 0 - .icon-button { - flex-grow 1 !important - } - div, > div > span { - display flex - justify-content center - flex-grow 1 - } - } - &.picture-in-picture__footer { - .icon-button::after { - content unset !important - } - } + .search-results__section__header { + margin 0px 0px 10px + color unset + background none + padding-inline 25px + font-weight 600 } - - - - - // RIGHT COLUMN - /.layout-single-column { - .tabs-bar__wrapper, .column-back-button--slim .column-back-button { - grid-column 2 - border 0 !important - /#mastodon .column-header, /#mastodon .column-inline-form { - font-weight 600 - border-bottom-left-radius 0 !important - border-bottom-right-radius 0 !important - & ~ .scrollable { - border-top-left-radius 0 !important - border-top-right-radius 0 !important + .search-results__section { + border 0 + margin-bottom 20px + } + } + + //// SETTINGS PAGE + / { + /.admin-wrapper { + /.sidebar-wrapper { + overflow visible !important + width unset + /.sidebar-wrapper__inner { + position sticky + top 0 + max-height 100vh !important + overflow-y auto !important + pointer-events all !important + z-index 100 + .fa { + margin-inline-end 1em !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 - background var(--modal-background-color) - } - .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 - // margin-inline-start 600px - top 0 !important - top var(--top) !important - inset-inline unset !important - height 50px !important - margin-top -50px !important - margin-inline-start 10px - // &::before { - // content "" - // width var(--tl-width) - // display inline-block - // } - @media (min-width: responsiveW1) { - margin-inline-start 25px - // margin-inline-start calc(var(--tl-width) - 5px) - } - @media (max-width responsiveW2 - 1) { - // margin-inline-start calc(100% - 275px) - width 265px - margin-top -60px !important - top 10px !important - margin-inline-start 10px - } - &:not(.column-back-button) { - padding-top 0 - } - margin-top 30px - // overflow clip - border-radius var(--radius) var(--radius) !important - box-shadow 0 12px 12px -12px rgba(0,0,0,0.1) - - .column-header__wrapper { - gap 2px !important - display flex - flex-direction column - border-radius var(--radius) + .sidebar > ul > li { overflow hidden - } + margin-inline 15px !important + > a:not(.selected) { + background none + } + a { + display flex !important + align-items center + white-space unset + } + &.selected { + margin 6px + border-radius var(--radius) + > a.selected { + font-weight 600 + color unset + position relative + overflow visible + border-radius 0 !important + border 0 + + &::after { + content "" + position absolute + top 100% + inset-inline 0 + height 9999px + background inherit + z-index -1 + } + } - .column-header { - background none !important - overflow hidden - border 0 - } - .column-header > button { - z-index 2 - } - .column-header__buttons button { - transition background .2s, transform .3s !important - position relative - border-radius 100px !important - min-width 40px - margin 5px - margin-inline-start 0 - font-size .9em - padding-inline 10px - .column-header__icon { - margin-inline-end 0 } - &:not(.active) { - background var(--elevated-color) !important - } - svg { - margin 0 - } - span { - display none - } - &::before { - content "" - position absolute - inset 0 - top calc(100% + 5px) - bottom -5px - background var(--modal-background-color) - z-index -1 - transition inset .1s - border-radius 100px - pointer-events none - } - &.active { - // filter contrast(1.1) - // z-index -1 - // opacity .7 - &::before { - inset -10px -300px + + > ul { + border-radius var(--radius) !important + overflow hidden !important + gap 2px !important + margin 8px + margin-top 0 + background none + & > li { + border-radius 8px + &:not(:first-child):not(:last-child) { + margin-block 2px + } + a { + padding 14px 16px + font-weight 600 + border 0 + } + &:not(.selected) { + a { + background-color rgba(150,150,250,0.1) + } + } + } } + } - } - transition margin transBounce1, top .4s - } - @media (min-width mobileW) { - .column-back-button--slim { - margin-left auto !important - order -1 - > .column-back-button { - margin-top 0 !important - top unset !important - } - } - @media (max-width responsiveW2 - 1) { - .column-back-button--slim > .column-back-button { - margin-top -55px !important - top unset !important - } + } } - } - .column-settings__row, .column-settings__hashtags { - gap 0 - } - .column-settings__section { - margin-bottom 4px - padding-inline 4px - } - .column-select__control { - border-radius var(--radius) - } - .setting-toggle, .app-form__toggle { - display flex - // flex-direction row-reverse - align-items center - margin-bottom 14px - position relative - padding .7em - background var(--elevated-color) - margin-bottom 2px !important - overflow hidden - &:first-child { - border-top-left-radius var(--radius) - border-top-right-radius var(--radius) - } - &:last-child { - border-bottom-left-radius var(--radius) - border-bottom-right-radius var(--radius) + .content__heading { + margin-bottom 2em } - - // border-radius var(--radius) - .react-toggle { - order 2 + h4 { + margin 0 + border-bottom 0 } - .setting-toggle__label { + + form > h4 { + margin-top 2em !important + border-bottom 0 !important margin-bottom 0 !important - flex-grow 1 - width 0 } - - &::before { - content "" - position absolute - inset 0 - background var(--hover-color) - opacity 0 - transition opacity .2s - pointer-events none + + .lead { + margin-bottom 15px } - &:hover, &:focus-within { - &::before { - opacity 1 - } - } - } - - - .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 { - display none - } - hr { - margin-inline 15px - } - @media (min-width responsiveW2) { - // padding-top 20px !important - padding-top calc(var(--radius) + 10px) - margin-top calc(50px - var(--radius)) - .navigation-panel__logo { - .column-link, hr { - display none !important - } - } - .switch-to-advanced { - border-radius var(--radius) - margin-top 0 - } - [href="/settings/preferences"] { - display none !important - } - } - /.column-link { + .flash-message, + .applications-list__item, .filters-list__item { + border-radius var(--radius) border 0 + overflow clip } - /.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 + .fields-row { + margin-inline 0 + // gap 1em + border-radius var(--radius) + overflow clip + padding-top 0 + gap 2px + display flex + flex-wrap wrap } - @media (min-width mobileW) { - /.column-link { - flex-grow 100 !important - display flex !important - align-items center !important - align-content center - max-height 3.3em - min-height 2.7em !important - padding-block 0 - border-radius 100px - position relative - box-sizing border-box - opacity .9 - overflow hidden - background none !important - .column-link__icon, /.column-header > button .column-header__icon { - margin-inline-end .7em !important - font-size 16px !important + .fields-group:not(.fields-row__column), .fields-row { + margin-bottom 1em !important + } + .fields-row > .fields-row__column { + max-width unset + width 300px + // height max-content + border-radius 0 !important + display flex + flex-direction column + flex-grow 1 + margin 0 !important + .fields-group { + border-radius 0 !important + margin 0 !important + } + .with_block_label { + display flex + flex-direction column + height 100% + > .label_input { + display flex + flex-direction column + flex-grow 1 + > textarea { + min-height 300px + flex-grow 1 + } } - &::before { - content: "" !important; + } + > :last-child { + flex-grow 1 + align-items flex-start + border 0 + } + & > :not(:first-child):not(:last-child) { + padding-block .5em !important + margin-block -3px + } + } + + :not(.fields-row__column) > .fields-group, + .fields-row > *, + .label_input > ul, + .label_input__wrapper > ul, + .with_block_label.radio_buttons .label_input + { + border-radius var(--radius) + overflow hidden + padding 0 + display flex + flex-direction column + gap 2px + > * { + background-color var(--elevated-color) + padding .8rem + margin-block 0px + position relative + border-radius 0 !important + overflow hidden + &::after { + content "" position absolute - border-radius: 100px; - width unset !important - height unset !important - inset 0px 0px !important - // min-height 43px - opacity 0 !important - background-color rgba(150,150,150,0.1) + inset 0 + background-color var(--hover-color) + z-index -1 + opacity 0 transition opacity .2s } - &.active { - opacity 1 !important - font-weight 600 + &:hover, &:focus-within { + &::after { + opacity 1 + } } - &:hover, &:focus { - &:before { + } + label { + &::before { + content "" + position absolute + inset -900px + } + } + } + .label_input__wrapper { + > :not([type="checkbox"]):not(label) { + margin-top 4px + } + } + .label_input { + position relative + } + label { + margin 0 !important + display flex + align-items center + padding 0 !important + input { + margin 0 + margin-inline-end 10px !important + position static !important + } + } + input { + border-radius var(--radius) !important + } + .radio { + flex-grow 1 + &:not(:last-child) { + margin-bottom 0 !important + } + } + .hint:last-child { + margin-bottom 0 !important + } + + .input.with_block_label { + > .row { + flex-wrap wrap + margin 0 + > .string { + padding 0 + width 100% + margin 0 + &:first-child input { + border-radius var(--radius) var(--radius) 0 0 !important + } + &:last-child input { + border-radius 0 0 var(--radius) var(--radius) !important + } + } + &:not(:last-child) { + margin-bottom 8px + } + } + } + + li.checkbox { + flex-grow 1 + overflow hidden + } + + ul { + flex-direction row !important + flex-wrap wrap + gap 2px + flex-grow 1 + } + li.checkbox { + flex-basis 45% + } + .spacer { + border-top 1px solid var(--border-color) !important + } + } + /.batch-table label { + padding-inline-start 20px !important + } + .batch-table, .table, :not(.batch-table__row__content) > table { + overflow clip + border-radius var(--radius) + border-spacing 0 2px + border-collapse separate + /.batch-table__toolbar, /.batch-table__row, tr > * { + border 0 + margin-bottom 2px !important + } + td, th, /.batch-table__row { + position relative + } + tr { + > td, > th { + // padding-block 0 + > div > span { + padding-inline .7em + display inline-block + } + } + } + /.keyboard-shortcuts { + padding 0 + margin-top -4px + table { + width 100% + border-radius 0 + } + td { + padding .7em + } + } + + /.batch-table__row, th, > tbody > tr > td, tfoot td { + background var(--elevated-color) !important + vertical-align middle + &::after { + content "" + position absolute + inset 0 0 + background var(--hover-color) + opacity 0 + transition .2s + pointer-events: none + } + &:hover, &:focus-within { + &::after { + opacity 1 + } + } + > a:first-child:last-child { + margin 0 + width 100% + padding .5em + } + } + th, tr { + &:hover { + td, th { + &:not([rowspan])::after { opacity 1 !important } } - &[href="/lists"] { - & + div { - hr { - display none - } - .column-link { - margin-bottom 2px - - i { - opacity .2 - } - } + } + [rowspan] { + &:hover { + & ~ td::after { + opacity 0 !important } } + &::after { + inset-inline -900px + } } } - .navigation-panel__legal { - // display contents - } + } - @media (min-width mobileW) { + } + + //// ADVANCED VIEW + / { + .layout-multiple-columns.layout-multiple-columns { + --column-header-height: 45px; + .column-header, .scrollable, .column-back-button, .account__header__image { + border-radius 0 !important + gap 0 !important + } + .columns-area { + background none !important + height 100% + > div { + border 0 !important + padding 0 !important + &:not(.drawer):not(:last-child) { + margin-inline-end 2px !important + } + &.column { + flex-grow 1 + max-width 600px + } + &:first-child { + margin-inline-start auto !important + } + &:last-child { + margin-inline-end auto !important + } + } + } + + .drawer.drawer { + padding-top 15px !important + overflow clip + flex-grow 1 + max-width 350px + /.drawer__header { + border-radius var(--radius-round) + background var(--elevated-color) + margin-inline 15px + overflow hidden + border 0 !important + a { + border 0 + &:first-child { + padding-inline-start 15px !important + } + &:last-child { + padding-inline-end 15px !important + } + } + } + .search { + z-index 2 + margin-inline 15px + margin-bottom 0 + } + & > .drawer__pager { + border 0 + overflow visible !important + } + .drawer__inner:not(.darker) { + margin-top -20px + padding-top 30px + height unset + bottom 0 + } + .drawer__inner__mastodon { + margin-inline -6px + z-index -1 + } + } + .compose-form { + margin-inline 5px + } + .drawer__inner:not(.darker), .drawer__inner__mastodon { + background-color transparent !important + } + .darker { + background-color var(--surface-background-color) + border-radius var(--radius) var(--radius) 0 0 + top 10px + width unset + inset-inline 2px + } + + .column { + background none + &::after { + content "" + position absolute + inset 0 + top var(--column-header-height) + background var(--background-color) + z-index -1 + } + &::before, &::after { + top var(--column-header-height) + border-radius var(--radius) var(--radius) 0 0 + } + } + .column-back-button, + .column-header__wrapper { + height var(--column-header-height) + &.active { + box-shadow none + &::before { + inset-inline var(--radius) + } + } + .column-header { + border 0 !important + height var(--column-header-height) + } + .column-header__buttons { + height 100% + } + svg { + height 1.4em + } + & + .scrollable.scrollable { + border-radius var(--radius) var(--radius) 0 0 !important + overflow-y scroll + } + } + .getting-started__trends { - display unset !important + padding 0px 20px } + + } - - .trends__item { - display flex !important - } - .trends__item__name a { - &::before { - content "" - position absolute - inset 0 - } - } - .trends__item__current { - display none - } - .trends__item__sparkline { - overflow visible !important - pointer-events none - svg { - overflow visible !important - } - path:first-child { - // display none - filter blur(10px) - } - path:last-child { - mask linear-gradient(to left, black, black, transparent) - -webkit-mask @mask - - } - /.rtl & { - transform scaleX(-1) - } - } - - - - - /.getting-started, .column[aria-labelledby="Getting-started"] > .scrollable.scrollable.scrollable { // specificitiy yay + } + + //// GETTING STARTED PAGE + / { + .column[aria-labelledby="Misc"] > .scrollable, + .column[aria-labelledby="Getting-started"] > .scrollable + .getting-started { position relative padding 5px 10px !important .getting-started__wrapper { background none - a, .column-subheading { - border 0 !important - padding 20px - background none - } + } + .column-link, .column-subheading { + border 0 !important + padding 20px !important + background none } .getting-started__footer { padding-inline 20px @@ -2532,146 +2558,46 @@ unless you're on a nightly version with the design already in use. } } } - - // ABOUT PAGE - /.about { - .account { - padding 0 !important - overflow visible !important - &::after { - content unset !important + } + + + //// TABLET + / { + @media (min-width mobileW) and (max-width responsiveW2) { + .ui__header { + background none !important + backdrop-filter none + position relative + if !navOnLeft { + margin-inline-end 285px } + if navOnLeft { + margin-inline-start 285px + } + border 0 !important } - .about__meta { - border-radius var(--radius) - } - .about__section__title { - position sticky - top 0 - z-index 2 - border-radius 0 !important - } - .about__section__body { - animation slideDowFade .3s .1s backwards cubic-bezier(0, 1, 0, 1.2) - } - .about__section { - margin 10px 0px !important - margin-top 20px - border-radius var(--radius) - overflow clip - transition margin .2s cubic-bezier(0,1,0,1), border-radius .2s - &:not(.active) { - border 0 !important - .about__section__title { - background var(--elevated-color) !important - border-radius var(--radius) - } + .navigation-panel { + padding-inline 10px + if !sideHeader { + margin-top -55px !important } } } - - // FOLLOW PROMPT - &.modal-layout { - overflow hidden - .container-alt { - background inherit - height 100% - .public-layout { - padding 0 !important - } - .form-container { - max-width 500px !important - padding 0 - background inherit - display flex - flex-direction column - justify-content center - height 100% - h2 { - // display none - margin 0 - padding 20px - font-weight 600 - } - .follow-prompt { - // height 0 - // flex-grow 1 - margin 0 - border-radius 0 0 var(--radius) var(--radius) - overflow-y auto - .activity-stream { - margin 0 !important - } - } - } - .entry { - border-radius var(--radius) !important - } - } - - #new_remote_follow { - position sticky - bottom 0 - padding 20px - padding-bottom 60px - background inherit - // border-radius var(--radius) - // margin-inline 15px - } - } - - - - - - // That layout between mobile and regular view - @media (min-width mobileW) and (max-width responsiveW2 - 1) { - /.layout-single-column #mastodon { - .ui__header { - background none !important - border 0 - margin-inline-end 280px - padding-top 12px - // z-index 0 - position static - backdrop-filter none - } - .columns-area__panels__main { - margin-inline 10px !important - // margin-top -20px - margin-top 10px - .columns-area { - padding-bottom 0 !important - } - } - .dismissable-banner { - border-top-left-radius 0 !important - } - .navigation-panel { - background none - border 0 - width 265px !important - padding-bottom 10px - } - } - } - - // Mobile + } + + + //// MOBILE + / { @media (max-width mobileW - 1) { - compactStatuses() - .column-header { - border-inline 0 - } /.ui__header { border-bottom 0 box-sizing content-box - min-height 55px height auto position relative box-sizing border-box gap 5px 10px flex-wrap wrap - padding-block 8px + padding-block 12px border 0 !important backdrop-filter none !important background none !important @@ -2688,7 +2614,7 @@ unless you're on a nightly version with the design already in use. } } [href="/search"] { - margin-inline-end 5px + display none } [href="/publish"] { position fixed @@ -2767,9 +2693,6 @@ unless you're on a nightly version with the design already in use. z-index 2 } } - .column-back-button.column-back-button { - border-radius 0 !important - } // Navigation @supports unquote("selector(.foxxo:has(.waf))") { @@ -2785,6 +2708,7 @@ unless you're on a nightly version with the design already in use. margin 0 !important border 0 !important overflow clip !important + flex-grow 1 } .tabs-bar__wrapper { transition none !important @@ -2793,8 +2717,7 @@ unless you're on a nightly version with the design already in use. .columns-area__panels__pane--navigational { display contents .columns-area__panels__pane__inner { - position relative !important - inset unset !important + position static !important order -1 width unset height auto @@ -2803,13 +2726,12 @@ unless you're on a nightly version with the design already in use. .navigation-panel { flex-direction row margin 0 - padding 0 - padding 0 8px - height 5em + padding 12px border-top 1px solid - overflow scroll hidden align-items center - &::-webkit-scrollbar { + overflow visible + height auto + .flex-spacer { display none } } @@ -2819,43 +2741,24 @@ unless you're on a nightly version with the design already in use. .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 - } - } h4 a span::after { content ":" !important } - &:has(.getting-started__trends) { - &:has(.navigation-panel__sign-in-banner) { - .flex-spacer { - border-right 1px solid var(--border-color) - height 50% - margin 10px - } - .getting-started__trends { - all unset - display contents !important - } - } - .trends__item:last-child a { - position relative - z-index 3 - } + .navigation-panel__legal { + display contents } - a, h4 > span { + a { position relative overflow hidden border-radius var(--radius) font-weight 600 font-size 1.1em + flex-grow 1 text-align center min-width max-content + justify-content center transition padding .2s + padding-inline 6px &::before { content "" position absolute @@ -2868,10 +2771,9 @@ unless you're on a nightly version with the design already in use. svg { width 1em height @width + margin-inline-end 0 !important } &.active { - padding-inline 1.2em - margin-inline 4px position relative &::before { inset 0 !important @@ -2880,7 +2782,12 @@ unless you're on a nightly version with the design already in use. } } span { - display unset + display unset !important + width 0 + flex-grow 1 + max-width max-content + overflow hidden + text-overflow ellipsis } } } @@ -2900,45 +2807,42 @@ unless you're on a nightly version with the design already in use. position fixed bottom 0 inset-inline 0 - background var(--background-color-tint) - border-top 1px solid var(--divider) + background var(--background-color) z-index 200 - height 61px + height 60px 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) + border 0 } } .navigation-panel { + flex-wrap wrap border-top none - margin-top -10px + margin-bottom 8px + padding-block 0 a { - font-size 1em + span { + display none !important + } } - &::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 + [href="/settings/preferences"] { + position absolute + top 12px + inset-inline-end 60px + z-index 900 + padding-block 0 + height 35px + width 35px + box-sizing border-box + margin 0 + border 1px solid var(--border-color) } } - .column { - min-height 100vh - } + bottomBarButtons = "'/home'" "'/notifications'" "'/explore'" "'/public/local'" "'/lists'" bottomBarItemsSelector() { waf = "" @@ -2964,7 +2868,6 @@ unless you're on a nightly version with the design already in use. justify-content center width 19% left 0 - transform translateX(10%) box-sizing border-box padding 1px !important &::before { @@ -2985,853 +2888,507 @@ unless you're on a nightly version with the design already in use. } for row, i in bottomBarButtons { .column-link[href={row}] { - left (20% * i) - (.75% * i) - } - } - - - // 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"])) { - .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 - } + left 2% + (20% * i) - (.75% * i) } } } - .columns-area__panels__main { - padding 0 !important + } + } + + + //// POPUPS + / { + #hover-card, + .dropdown-menu { + border-radius var(--radius) + animation scaleIn .2s cubic-bezier(0,0,0,1.1) + } + .dropdown-menu__container__list { + overflow hidden auto + border-radius var(--radius) + max-height 70vh + } + .dropdown-menu__item { + overflow hidden + a { + padding .7em 1em !important + transition background-color .2s, color .2s + min-width 150px + } + } + .dropdown-menu__separator { + margin 0 !important + } + + .interaction-modal { + border-radius var(--radius) + overflow-y auto + box-sizing border-box + width 700px + text-align center + } + .interaction-modal__choices { + gap 10px + display flex + flex-wrap wrap + .interaction-modal__choices__choice { + max-height 50vh + overflow-y auto + border 1px solid var(--border-color) + padding 24px + margin 0 + border-radius var(--radius) + transition background .2s + position relative + } + .prose:last-child { + margin-bottom 0 + } + h3 { + margin-bottom 10px + } + } + + .modal-root__container { + animation bounceIn .7s + } + .modal-root__modal { + @media (max-width mobileW) { + margin-top auto + max-width 100% + border-radius var(--radius) var(--radius) 0 0 + } + } + + .picture-in-picture { + z-index 101 + .picture-in-picture__header { + border-radius var(--radius) var(--radius) 0 0 + } + {media} { + --radius 0 + margin 0 !important + } + .picture-in-picture__footer { + border-radius 0 0 var(--radius) var(--radius) + } + } + } + + /// ALT TEXT MODAL + / { + .report-modal[style="max-width: 960px;"] { + background var(--background-color) + &, * { + color inherit !important + } + .report-modal__comment { + min-width unset + width 370px max-width unset - flex-grow 1 - margin-top 1px - ~/ .is-composing .columns-area__panels__main { - padding-bottom 40px !important - } - .scrollable, .account__header__image, > div { - border-radius 0 !important + flex none + padding 20px + height 100% + overflow-y auto + } + .setting-text__wrapper { + border-radius var(--radius) + overflow hidden + background none + textarea { + border 0 + max-height unset !important + background none } + } + .focal-point-modal__content { + position sticky + top 0 + max-height 100vh + flex-grow 0 !important + max-width 100% + } + .focal-point { + width 100% + height 100% + } + .audio-player + .focal-point img { + width unset !important + height unset !important + max-height 100% !important + max-width 100% !important + } + .audio-player { + margin 10px !important + width 600px !important + max-width calc(100% - 20px) !important + } + .focal-point__reticle { + box-shadow: 0 0 300px 200px rgba(0,0,0,0.2); + } + @media not all and (max-width: 900px) { + max-width max-content !important + max-height 98vh + border 0 + box-shadow var(--shadow) + overflow hidden + border-radius var(--radius) + width 98vw + + .report-modal__container { + flex-wrap nowrap + border 0 + max-width max-content + max-height 100% + } + + .report-modal__target { + position: absolute; + padding: 24px 20px 12px; + font-weight: bold; + width 348px + box-sizing border-box + text-align start + background inherit + } + .report-modal__close { + position: fixed !important; + right: 12px; + top: 12px; + order: 2; + color: white; + background: var(--modal-background-color); + padding: 12px; + } + .report-modal__comment { + padding-top: calc(30px + 2em); + padding-bottom 160px + } + .focal-point-modal__content + .focal-point { + overflow visible + } + .focal-point img { + min-width 500px + } + .focal-point__preview { + inset-inline-start -220px + right unset + bottom 20px + pointer-events none + text-align end + strong { + color inherit + } + div { + border-radius var(--radius) + box-shadow none + } + } + } + @media (max-width 900px) { + height auto + width 100vw + max-width unset !important + border-radius 0 + .report-modal__container { + height auto + min-height 0 + } + .report-modal__container { + flex-direction column-reverse + flex-wrap nowrap + flex-grow 1 + } + .report-modal__comment { + width 100% + border 0 + max-height 70% + flex 0 0 auto + height unset + order unset + } } - .dismissable-banner { - margin 0 - padding-left 4px + } + } + + //// EMOJI PICKER + / { + // This is most likely temporary as the picker may be rewritten or unstylable in a later mastodon update + .emoji-picker-dropdown__menu { + border-radius var(--radius) + overflow hidden + resize both + width 400px + } + .emoji-mart { + display flex !important + flex-direction column !important + width 100% !important + height 100% !important + } + .emoji-mart-scroll { + flex-grow 1 + max-height unset !important + } + .emoji-mart-bar { + order 2 + } + .emoji-mart-category-list { + overflow visible !important + display grid + grid-template-columns repeat(auto-fill, minmax(calc(20px + 6%), 1fr)) + li { + display contents } - .status { - .status__avatar { - width 42px !important - min-width 45px !important - height 45px !important - background-size 45px !important - > div { - width 100% !important - height 100% !important - background-size cover !important + button { + position relative + padding 0 !important + padding-top 100% !important + img, span { + height calc(100% - 10px) !important + width calc(100% - 10px) !important + inset 5px + position absolute !important + transition transform .1s cubic-bezier(0,0,0,1) + } + + &:hover { + img, span { + transform scale(1.2) } } - &::before { + } + } + .emoji-picker-dropdown__modifiers { + top 16px + } + } + +} + +//// GLITCH-SOC FIXES +/ { + :root { + --background-color-alt transparent + } + /body.app-body.flavour-glitch > #mastodon { + // Compose Form + .compose-form__autosuggest-wrapper > :last-child { + padding-bottom 2em !important + } + .compose-form__buttons { + width 100% + > div:last-child { + margin-inline-start auto + } + } + .compose-form__buttons-wrapper { + position relative + } + .character-counter__wrapper { + position absolute + inset-inline-end 0 + bottom 100% + margin 4px 4px + border-radius 6px + padding .1em .5em + span { + font-size .9em + font-weight 500 + } + } + .compose-form__highlightable { + margin-bottom 50px !important + } + .compose-form__submit { + position absolute + right -12px + top 100% + margin-top 24px + button { + padding 10px 20px + } + } + + // GLITCH STATUSES + .collapsed { + .status__content { + height auto !important + overflow visible + mask unset !important + .status__content__text { + mask linear-gradient(to bottom, black 50px, transparent) !important + -webkit-mask @mask + max-height 100px + } + p:not(:last-child) { + margin-bottom .4em + } + br { + display block + } + &::after { content unset } } - - .status__action-bar { - margin-bottom -5px - .icon-button { - margin 0 !important - justify-content center - } - } - - .icon-button:after { - content unset !important - } - - .navigation-panel { - margin-top -200px - padding-top 200px - height calc(100vh + 200px - 55px) - border 0 - border-inline-start 1px solid - padding-bottom 90px - } - - .columns-area { - padding-bottom 0 !important - overflow hidden !important - } - .getting-started { - padding 20px - padding-bottom 60px - } - .getting-started__wrapper { - flex-grow 1 - overflow visible !important - } - - - // Compose - .compose-form { - padding 10px - margin-bottom 100px - &::before { - content "" - position absolute - inset 0 - background var(--elevated-color) - z-index -1 - } - } - - // ABOUT PAGE - .about.about.about { - padding-inline 10px !important - .account { - margin-top 0 - } - .about__header__hero, .about__section.active { - margin-inline -11px !important - width unset - border-radius 0 - // margin 0 - } - .about__section.active { - margin-block 20px !important - } - .about__section { - margin-bottom 0 - border-bottom 1px solid - } - } - - } - } - - - - // SETTINGS PAGE - /.admin-wrapper { - .sidebar-wrapper { - overflow visible !important - width unset - .sidebar-wrapper__inner { - position sticky - top 0 - max-height 100vh !important - overflow-y auto !important - pointer-events all !important - z-index 100 - .fa { - margin-inline-end 1em !important - } - .sidebar > ul > li { - overflow hidden - margin-inline 15px !important - > a:not(.selected) { - background none - } - a { - display flex !important - align-items center - white-space unset - } - &.selected { - margin 6px - border-radius var(--radius) - > a.selected { - font-weight 600 - color unset - position relative - overflow visible - border-radius 0 !important - border 0 - - &::after { - content "" - position absolute - top 100% - inset-inline 0 - height 9999px - background inherit - z-index -1 - } - } - - } - - > ul { - border-radius var(--radius) !important - overflow hidden !important - gap 2px !important - margin 8px - margin-top 0 - background none - & > li { - border-radius 8px - &:not(:first-child):not(:last-child) { - margin-block 2px - } - a { - padding 14px 16px - font-weight 600 - border 0 - } - &:not(.selected) { - a { - background-color rgba(150,150,250,0.1) - } - } - - } - } - - } - - } - } - .content__heading { - margin-bottom 2em - } - - h4 { - // padding-block .2em - margin 0 - border-bottom 0 - } - - form > h4 { - margin-top 2em !important - border-bottom 0 !important - margin-bottom 0 !important - } - .flash-message, - .applications-list__item, .filters-list__item { - border-radius var(--radius) - border 0 - overflow clip - } - .fields-row { - margin-inline 0 - // gap 1em - border-radius var(--radius) - overflow clip - padding-top 0 - gap 2px - display flex - flex-wrap wrap - } - .fields-group:not(.fields-row__column), .fields-row { - margin-bottom 1em !important - } - .fields-row > .fields-row__column { - max-width unset - width 300px - // height max-content - border-radius 0 !important - display flex - flex-direction column - flex-grow 1 - margin 0 !important - .fields-group { - border-radius 0 !important - margin 0 !important - > .with_block_label { - display flex - flex-direction column - height 100% - > .label_input { - flex-grow 1 - > textarea { - min-height 100% - } - } - } - } - > :last-child { - flex-grow 1 - align-items flex-start - border 0 - } - & > :not(:first-child):not(:last-child) { - padding-block .5em !important - margin-block -3px - } - - } - :not(.fields-row__column) > .fields-group, .fields-row > *, .label_input > ul, .label_input__wrapper > ul, .radio_buttons > ul, .with_block_label.radio_buttons .label_input { - border-radius var(--radius) - overflow clip - padding 0 - display flex - flex-direction column - // flex-wrap wrap - // flex-grow 1 - // justify-content space-between - gap 2px - > * { - background-color var(--elevated-color) - padding .8rem - margin-block 0px - position relative - border-radius 0 !important - &:not(p):not(h6):not(.input-copy) { - &::after { - content "" - position absolute - inset 0 - background-color var(--hover-color) - z-index -1 - opacity 0 - transition opacity .2s - } - &:hover, &:focus-within { - &::after { - opacity 1 - } - } - } - - - } - .input-copy__wrapper { - border 1px solid var(--border-color-2) - border-radius var(--radius) - } - > .input, .checkbox, .radio { - flex-grow 1 - &:not(:last-child) { - margin-bottom 2px - margin-bottom 0 - } - &.radio, &.checkbox { - .hint, label { - margin-bottom 0 !important - } - } - .label_input { - flex-direction column - // gap .7em - } - .label_input > label { - margin-bottom 0 - padding-top .1em - } - .label_input__wrapper { - > :not(.checkbox) { - margin-top .4em - } - } - .checkbox { - inset 0 - padding 1em !important - } - } - li.checkbox { - width calc(50% - 27px) - } - li.checkbox label { - position static - padding-top 0 - &::before { - content "" - position absolute - inset 0 - } - input { - inset 1em !important - } - } - > { - h6, p { - margin 0 - &:not(:last-child) { - padding-bottom 0 - } - + &.muted { + .status__content__text ~ * { + display none } } } - ul { - flex-direction row !important - flex-wrap wrap - gap 2px - margin-top .4em - } - .spacer { - border-top 1px solid var(--border-color) !important - } - - - - } - .batch-table, .table, :not(.batch-table__row__content) > table { - overflow clip - border-radius var(--radius) - border-spacing 0 2px - border-collapse separate - .batch-table__toolbar, .batch-table__row, tr > * { - border 0 - margin-bottom 2px !important - } - td, th, .batch-table__row { - position relative - } - tr { - > td, > th { - // padding-block 0 - > div > span { - padding-inline .7em - display inline-block - } + @media (pointer coarse) { + .status__info { + align-items center } - } - /.keyboard-shortcuts td { - padding .7em - } - - .batch-table__row, th, > tbody > tr > td, tfoot td { - background var(--elevated-color) !important - vertical-align middle - &::after { - content "" - position absolute - inset 0 0 - background var(--hover-color) - opacity 0 - transition .2s - pointer-events: none - } - &:hover, &:focus-within { - &::after { - opacity 1 - } - } - > a:first-child:last-child { - margin 0 - width 100% - padding .5em - } - } - th, tr { - &:hover { - td, th { - &:not([rowspan])::after { - opacity 1 !important - } - } - } - [rowspan] { - &:hover { - & ~ td::after { - opacity 0 !important - } - } - &::after { - inset-inline -900px - } + .status__info__icons { + height auto } } - } - - - // Advanced View Fixes - .layout-multiple-columns #mastodon .columns-area { - overflow auto hidden !important - padding 0 - - compactStatuses() - .follow_requests-unlocked_explanation { - margin 0 !important - } - - .column-header, .scrollable, .column-back-button, .account__header__image { - border-radius 0 !important - } - .icon-button:after { - content unset !important - } - > div { - border 0 !important - padding 0 !important - &:not(.drawer):not(:last-child) { - margin-inline-end 2px !important - } - &.column { - flex-grow 1 - max-width 600px - } - &:first-child { - margin-inline-start auto !important - } - &:last-child { - margin-inline-end auto !important - } - } - .drawer { - padding-inline 6px !important - padding-top 20px !important - overflow clip - // width 285px - .drawer__header { - border-radius var(--radius-round) - background var(--elevated-tint) - margin-inline 10px - overflow hidden - border 0 !important - a { - border 0 - &:first-child { - padding-inline-start 15px !important - } - &:last-child { - padding-inline-end 15px !important - } - } - } - .search { - z-index 2 - } - & > .drawer__pager { - border 0 - overflow visible !important - & > .drawer__inner:not(.darker) { - top -20px - // inset-inline -6px - // padding-inline 6px - margin-inline-start -6px - margin-inline-end -4px - width calc(100% + 10px) - padding-inline-start 6px - padding-inline-end 4px - height calc(100% + 20px) - } - } - .drawer__inner__mastodon { - margin-inline -6px - margin-inline-end -4px - z-index -1 - } - } - .search { - margin-inline 10px - } - .compose-form { - display flex - flex-direction column - } - .drawer__inner:not(.darker), .drawer__inner__mastodon { - background-color transparent - border 0 !important - background-color transparent !important - } - - .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 - } - + // make entire post clickable .status { - padding-bottom 10px !important + isolation isolate + overflow hidden } - .detailed-status { - .status__content { - font-size 1.3em - } + .status__info { + pointer-events none } - - } - - - / .modal-root__container { - animation bounceIn .7s - } - -} - - -// GLITCH-SOC FIXES -/body.app-body.flavour-glitch > #mastodon { - - // Compose Form - .compose-form__autosuggest-wrapper > :last-child { - padding-bottom 2em !important - } - .compose-form__buttons { - width 100% - > div:last-child { - margin-inline-start auto + .status__avatar, .status__info__icons { + pointer-events all } - } - .compose-form__buttons-wrapper { - position relative - } - .character-counter__wrapper { - position absolute - inset-inline-end 0 - bottom 100% - margin 4px 4px - border-radius 6px - padding .1em .5em - span { - font-size .9em - font-weight 500 + .status > :not(.status__content):not(.status__line) { + position relative + z-index 2 } - } - .compose-form__highlightable { - margin-bottom 50px !important - } - .compose-form__submit { - position absolute - right -12px - top 100% - margin-top 24px - button { - padding 10px 20px + .status:not(.status-direct) > .status__content { + margin-block -100px !important + padding-block 100px !important } - } - - // GLITCH STATUSES - .collapsed { - .status__content { - height auto !important - overflow visible - .status__content__text { - mask linear-gradient(to bottom, black 50px, transparent) !important - -webkit-mask @mask - max-height 100px - } - p:not(:last-child) { - margin-bottom .4em - } - br { - display block - } - &::after { - content unset - } - } - &.muted { - .status__content__text ~ * { - display none - } - } - } - // make entire post clickable - .status:not(.status-direct) > .status__content { - margin-block -90px -100px !important - padding-block 100px !important - .status__content__text { - margin-top 0px - } - > :last-child:not(.status__content__text) { - margin-bottom 5px !important - } - } - .status { .full-width { margin-inline 0 !important } - .status__action-bar { - position static + .media-gallery__item > .media-gallery__preview { + display unset } - } - .status__info { - .notification__message { - padding-top 0 !important - padding-inline-start 0 !important + + .status__action-bar-spacer { + min-width 5px } - } - .status__display-name { - line-height 22px - } - .display-name__account { - font-size 15px - } - .media-gallery__item > .media-gallery__preview { - display unset - } - - .status__action-bar-spacer { - min-width 5px - } - - .status__relative-time { - margin-inline auto 5px !important - z-index 2 - flex-grow 0 !important - min-width 5ch !important - max-width unset !important - time { - display inline !important - } - } - - .reactions-bar { - width unset - margin-top 8px - button { - border-radius 6px !important - padding-block 2px - .reactions-bar__item__emoji { - height 2em - width @height + + .status__relative-time { + margin-inline auto 5px !important + z-index 2 + flex-grow 0 !important + min-width 5ch !important + max-width unset !important + justify-content flex-end + time { + display inline !important } - border 1px solid var(--border-color-2) - &:not(.active) { + } + + .reactions-bar { + width unset + margin-top 8px + pointer-events none + button { + pointer-events all + border-radius 6px !important + padding-block 2px + .reactions-bar__item__emoji { + height 2em + width @height + } + border 1px solid var(--border-color-2) + &:not(.active) { + background none + } + } + &:empty { + display none + } + .emoji-picker-dropdown { + align-self stretch + button { + align-self stretch + height 100% + aspect-ratio 1 + } + } + } + + // Notifications + .notification__message { + padding-top 15px + & + .status { + padding-top 5px !important + } + } + + // timeline settings + .column-settings__pillbar { + border-radius var(--radius) + } + .pillbar-button { + padding 10px + border-radius 4px + } + .column-header__notif-cleaning-buttons { + flex-wrap wrap + button { + min-width 50% !important + } + } + .notification__dismiss-overlay { + position absolute !important + .wrappy { + box-shadow none + background none + border-top 0 + } + } + + + // OPTIONS + + .local-settings { + max-height 700px !important + width 100% + } + .glitch.local-settings__page { + padding 20px + } + .local-settings__navigation { + display flex + flex-direction column + padding 8px + background none + border-right 1px solid var(--border-color) + width auto + .local-settings__navigation__item:not(.close):not(.active) { background none } - } - &:empty { - display none - } - } - - // Notifications - .notification__message { - & + .status { - padding-top 0 !important - } - } - .notification { - > .notification__message { - padding-inline 15px !important - padding-top 18px !important - } - } - .notification__favourite-icon-wrapper { - position static - margin-inline-end 10px - i { - width 1.28571429em !important // width in original masto - text-align center - } - } - .detailed-status__wrapper { - .focusable:not(.status) { - &::before { - content unset !important + .local-settings__navigation__item { + border 0 + flex-direction column + padding-inline 8px + span { + font-size .8em + } + } + [href="/settings/preferences"] { + margin-block auto 10px + border-radius var(--radius) + border 1px solid var(--border-color) } } } - - // timeline settings - .setting-text { - border-radius 0 !important - margin 4px - width calc(100% - 8px) - } - .column-settings__pillbar { - border-radius var(--radius) - } - .pillbar-button { - border-radius 0 !important - padding 6px - } - - // Profile page - // notes - .account__header__account-note { - &: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 - top 10px - &::before { - content "" - position absolute - inset -60px -30px - background linear-gradient(to right, black, transparent) - transform rotate(45deg) - z-index -1 - opacity .5 - } - } - - // Advanced View - /.layout-multiple-columns.flavour-glitch { - .drawer { - flex-grow .2 - } - .drawer__inner { - margin-top -20px - max-height unset !important - min-height calc(100% + 40px) - //padding-top 30px !important - } - } + } } \ No newline at end of file