diff --git a/glitch-fixes.css b/glitch-fixes.css index af19139..7b4d7ac 100644 --- a/glitch-fixes.css +++ b/glitch-fixes.css @@ -1,154 +1,155 @@ body.app-body.flavour-glitch > #mastodon .compose-form__autosuggest-wrapper > :last-child { - padding-bottom: 2em !important; - } - body.app-body.flavour-glitch > #mastodon .compose-form__buttons { - width: 100%; - } - body.app-body.flavour-glitch > #mastodon .compose-form__buttons > div:last-child { - margin-inline-start: auto; - } - body.app-body.flavour-glitch > #mastodon .character-counter__wrapper { - position: absolute; - inset-inline-end: 0; - bottom: 100%; - margin: 4px 4px; - border-radius: 6px; - padding: 0.1em 0.5em; - } - body.app-body.flavour-glitch > #mastodon .character-counter__wrapper span { - font-size: 0.9em; - font-weight: 500; - } - body.app-body.flavour-glitch > #mastodon .collapsed .status__content { - height: auto !important; - overflow: visible; - } - body.app-body.flavour-glitch > #mastodon .collapsed .status__content .status__content__text { - mask: linear-gradient(to bottom, #000 50px, transparent) !important; - max-height: 100px; - } - body.app-body.flavour-glitch > #mastodon .collapsed .status__content p:not(:last-of-type) { - margin-bottom: 0.4em; - } - body.app-body.flavour-glitch > #mastodon .collapsed .status__content br { - display: block; - } - body.app-body.flavour-glitch > #mastodon .collapsed .status__content::after { - content: unset; - } - body.app-body.flavour-glitch > #mastodon .collapsed.muted .status__content__text ~ * { - display: none; - } - body.app-body.flavour-glitch > #mastodon .status > .status__content { - margin-block: -90px -100px !important; - padding-block: 100px !important; - } - body.app-body.flavour-glitch > #mastodon .status > .status__content .status__content__text { - margin-top: 0px; - } - body.app-body.flavour-glitch > #mastodon .status > .status__content > :last-child:not(.status__content__text) { - margin-bottom: 5px !important; - } - body.app-body.flavour-glitch > #mastodon .status .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; - } - body.app-body.flavour-glitch > #mastodon .status__action-bar-spacer { - min-width: 5px; - } - body.app-body.flavour-glitch > #mastodon .status__relative-time { - margin-right: 5px; - } - body.app-body.flavour-glitch > #mastodon .reactions-bar button { - border-radius: 6px !important; - padding-block: 2px; - } -@media (pointer: coarse) { - body.app-body.flavour-glitch > #mastodon .reactions-bar button { - padding: 8px 10px !important; - } + padding-bottom: 2em !important; } - body.app-body.flavour-glitch > #mastodon .reactions-bar:empty { - display: none; +body.app-body.flavour-glitch > #mastodon .compose-form__buttons { + width: 100%; +} +body.app-body.flavour-glitch > #mastodon .compose-form__buttons > div:last-child { + margin-inline-start: auto; +} +body.app-body.flavour-glitch > #mastodon .character-counter__wrapper { + position: absolute; + inset-inline-end: 0; + bottom: 100%; + margin: 4px 4px; + border-radius: 6px; + padding: 0.1em 0.5em; +} +body.app-body.flavour-glitch > #mastodon .character-counter__wrapper span { + font-size: 0.9em; + font-weight: 500; +} +body.app-body.flavour-glitch > #mastodon .collapsed .status__content { + height: auto !important; + overflow: visible; +} +body.app-body.flavour-glitch > #mastodon .collapsed .status__content .status__content__text { + mask: linear-gradient(to bottom, #000 50px, transparent) !important; + max-height: 100px; +} +body.app-body.flavour-glitch > #mastodon .collapsed .status__content p:not(:last-of-type) { + margin-bottom: 0.4em; +} +body.app-body.flavour-glitch > #mastodon .collapsed .status__content br { + display: block; +} +body.app-body.flavour-glitch > #mastodon .collapsed .status__content::after { + content: unset; +} +body.app-body.flavour-glitch > #mastodon .collapsed.muted .status__content__text ~ * { + display: none; +} +body.app-body.flavour-glitch > #mastodon .status > .status__content { + margin-block: -90px -100px !important; + padding-block: 100px !important; +} +body.app-body.flavour-glitch > #mastodon .status > .status__content .status__content__text { + margin-top: 0px; +} +body.app-body.flavour-glitch > #mastodon .status > .status__content > :last-child:not(.status__content__text) { + margin-bottom: 5px !important; +} +body.app-body.flavour-glitch > #mastodon .status .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; +} +body.app-body.flavour-glitch > #mastodon .status__action-bar-spacer { + min-width: 5px; +} +body.app-body.flavour-glitch > #mastodon .status__relative-time { + margin-right: 5px; + z-index: 2; +} +body.app-body.flavour-glitch > #mastodon .reactions-bar button { + border-radius: 6px !important; + padding-block: 2px; +} +@media (pointer: coarse) { + body.app-body.flavour-glitch > #mastodon .reactions-bar button { + padding: 8px 10px !important; } - body.app-body.flavour-glitch > #mastodon .collapsed > .status__info .notification__message { - padding-bottom: 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 .account { - padding-inline-start: 0 !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 .status__prepend, - body.app-body.flavour-glitch > #mastodon .status__info .notification__message { - padding-bottom: 15px !important; - padding-top: 0 !important; - margin-top: -5px !important; - } - body.app-body.flavour-glitch > #mastodon .status__prepend .status__prepend-icon-wrapper, - body.app-body.flavour-glitch > #mastodon .status__info .notification__message .status__prepend-icon-wrapper { - all: unset; - margin-inline-end: 10px; - display: flex; - } - body.app-body.flavour-glitch > #mastodon .status__prepend .status__prepend-icon-wrapper i, - body.app-body.flavour-glitch > #mastodon .status__info .notification__message .status__prepend-icon-wrapper i { - margin: auto; - } - 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); - } - 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; - } - body.app-body.flavour-glitch > #mastodon .account-card .media-modal__close { - left: 10px; - top: 10px; - } - 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; - } - .layout-multiple-columns.flavour-glitch .drawer__inner { - margin-top: -10px; - padding-top: 30px !important; - } \ No newline at end of file +} +body.app-body.flavour-glitch > #mastodon .reactions-bar:empty { + display: none; +} +body.app-body.flavour-glitch > #mastodon .collapsed > .status__info .notification__message { + padding-bottom: 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 .account { + padding-inline-start: 0 !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 .status__prepend, +body.app-body.flavour-glitch > #mastodon .status__info .notification__message { + padding-bottom: 15px !important; + padding-top: 0 !important; + margin-top: -5px !important; +} +body.app-body.flavour-glitch > #mastodon .status__prepend .status__prepend-icon-wrapper, +body.app-body.flavour-glitch > #mastodon .status__info .notification__message .status__prepend-icon-wrapper { + all: unset; + margin-inline-end: 10px; + display: flex; +} +body.app-body.flavour-glitch > #mastodon .status__prepend .status__prepend-icon-wrapper i, +body.app-body.flavour-glitch > #mastodon .status__info .notification__message .status__prepend-icon-wrapper i { + margin: auto; +} +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); +} +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; +} +body.app-body.flavour-glitch > #mastodon .account-card .media-modal__close { + left: 10px; + top: 10px; +} +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; +} +.layout-multiple-columns.flavour-glitch .drawer__inner { + margin-top: -10px; + padding-top: 30px !important; +} \ No newline at end of file diff --git a/modern.css b/modern.css index 87757ea..edb6246 100644 --- a/modern.css +++ b/modern.css @@ -1,3981 +1,3987 @@ :root { - --tl-width: 750px; - --radius: 12px; - --radius-round: 24px; - --hover-color: rgba(170,170,170,0.07); - --elevated-color: rgba(150,150,200,0.1); - --border-color: rgba(120,120,200,0.2); - --border-color-2: #787878; - --shadow: 0 10px 40px -10px rgba(0,0,0,0.15); - --shadow-low: 0 8px 16px -10px rgba(0,0,0,0.4); - --shadow-med: 0 8px 60px -30px rgba(0,0,0,0.1); - } - .rtl textarea { - text-align: right; - } - a, - button, - label { - user-select: none; - } - .button--block { - font-weight: 700; - } - .unhandled-link span, - .mention span { - text-decoration: none !important; - } - .unhandled-link:not(:focus):not(:hover) span, - .mention:not(:focus):not(:hover) span { - text-decoration: underline !important; - } - input, - .input-copy, - select, - textarea, - .compose-form__upload-thumbnail, - .button, - button:not(.column-header__button), - video, - .privacy-dropdown__dropdown, - .react-toggle-track, - .reply-indicator, - .compose-form__warning { - border-radius: var(--radius) !important; - } - button:focus-visible, - .focusable:focus-visible, - a:focus-visible, - .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; - } + --tl-width: 750px; + --radius: 12px; + --radius-round: 24px; + --hover-color: rgba(170,170,170,0.07); + --elevated-color: rgba(150,150,200,0.1); + --border-color: rgba(120,120,200,0.2); + --border-color-2: #787878; + --shadow: 0 10px 40px -10px rgba(0,0,0,0.15); + --shadow-low: 0 8px 16px -10px rgba(0,0,0,0.4); + --shadow-med: 0 8px 60px -30px rgba(0,0,0,0.1); +} +.rtl textarea { + text-align: right; +} +a, +button, +label { + user-select: none; +} +.button--block { + font-weight: 700; +} +.unhandled-link span, +.mention span { + text-decoration: none !important; +} +.unhandled-link:not(:focus):not(:hover) span, +.mention:not(:focus):not(:hover) span { + text-decoration: underline !important; +} +input, +.input-copy, +select, +textarea, +.compose-form__upload-thumbnail, +.button, +button:not(.column-header__button), +video, +.privacy-dropdown__dropdown, +.react-toggle-track, +.reply-indicator, +.compose-form__warning { + border-radius: var(--radius) !important; +} +button:focus-visible, +.focusable:focus-visible, +a:focus-visible, +.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) { - .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 0.4s cubic-bezier(0, 0, 0, 3), background 0.2s !important; - } - .load-more:active, - .setting-toggle:active, - .column-header__back-button:active, - .column-back-button:active, - .trends__item:active, - .story:active, - .account__avatar:active, - .button:active, - .media-gallery__item:active, - .column-link:active, - select:active, - .status-card:active, - .audio-player:active, - .account:active, - .load-more:focus-visible, - .setting-toggle:focus-visible, - .column-header__back-button:focus-visible, - .column-back-button:focus-visible, - .trends__item:focus-visible, - .story:focus-visible, - .account__avatar:focus-visible, - .button:focus-visible, - .media-gallery__item:focus-visible, - .column-link:focus-visible, - select:focus-visible, - .status-card:focus-visible, - .audio-player:focus-visible, - .account:focus-visible { - transform: scale(0.99); - transition: transform 0.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 0.4s cubic-bezier(0, 0, 0, 4) !important; - } - .column-header__button:active, - .column-header__buttons > .column-header__back-button:active, - .react-toggle-track:active, - .icon-button:active, - .floating-action-button:active { - transform: scale(0.95); - transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important; - } - .status__content__spoiler-link span { - display: inline-block; - transition: transform 0.4s cubic-bezier(0, 0, 0, 4) !important; - } - .status__content__spoiler-link:active span { - transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important; - transform: translateY(1px); - } -@-moz-keyframes bounceIn { - 0% { - transform: scale(1.1); - opacity: 0; - } - 30% { - transform: scale(0.99); - opacity: 1; - } - 60% { - transform: scale(1.005); - opacity: 1; - } - 100% { - transform: scale(1); - opacity: 1; - } -} -@-webkit-keyframes bounceIn { - 0% { - transform: scale(1.1); - opacity: 0; - } - 30% { - transform: scale(0.99); - opacity: 1; - } - 60% { - transform: scale(1.005); - opacity: 1; - } - 100% { - transform: scale(1); - opacity: 1; - } -} -@-o-keyframes bounceIn { - 0% { - transform: scale(1.1); - opacity: 0; - } - 30% { - transform: scale(0.99); - opacity: 1; - } - 60% { - transform: scale(1.005); - opacity: 1; - } - 100% { - transform: scale(1); - opacity: 1; - } -} -@keyframes bounceIn { - 0% { - transform: scale(1.1); - opacity: 0; - } - 30% { - transform: scale(0.99); - opacity: 1; - } - 60% { - transform: scale(1.005); - opacity: 1; - } - 100% { - transform: scale(1); - opacity: 1; - } -} -@-moz-keyframes slideUp { - from { - transform: translateY(20px); - } -} -@-webkit-keyframes slideUp { - from { - transform: translateY(20px); - } -} -@-o-keyframes slideUp { - from { - transform: translateY(20px); - } -} -@keyframes slideUp { - from { - transform: translateY(20px); - } -} -@-moz-keyframes slideUpFade { - from { - transform: translateY(20px); - filter: opacity(0); - } -} -@-webkit-keyframes slideUpFade { - from { - transform: translateY(20px); - filter: opacity(0); - } -} -@-o-keyframes slideUpFade { - from { - transform: translateY(20px); - filter: opacity(0); - } -} -@keyframes slideUpFade { - from { - transform: translateY(20px); - filter: opacity(0); - } -} -@-moz-keyframes slideDowFade { - from { - transform: translateY(-20px); - filter: opacity(0); - } -} -@-webkit-keyframes slideDowFade { - from { - transform: translateY(-20px); - filter: opacity(0); - } -} -@-o-keyframes slideDowFade { - from { - transform: translateY(-20px); - filter: opacity(0); - } -} -@keyframes slideDowFade { - from { - transform: translateY(-20px); - filter: opacity(0); - } -} -@-moz-keyframes slideUpBig { - from { - transform: translateY(50vh); - } -} -@-webkit-keyframes slideUpBig { - from { - transform: translateY(50vh); - } -} -@-o-keyframes slideUpBig { - from { - transform: translateY(50vh); - } -} -@keyframes slideUpBig { - from { - transform: translateY(50vh); - } -} -@-moz-keyframes fadeUp { - from { - transform: translateY(10px); - opacity: 0; - } -} -@-webkit-keyframes fadeUp { - from { - transform: translateY(10px); - opacity: 0; - } -} -@-o-keyframes fadeUp { - from { - transform: translateY(10px); - opacity: 0; - } -} -@keyframes fadeUp { - from { - transform: translateY(10px); - opacity: 0; - } -} -@-moz-keyframes scaleIn { - from { - transform: scale(0.98); - opacity: 0; - } -} -@-webkit-keyframes scaleIn { - from { - transform: scale(0.98); - opacity: 0; - } -} -@-o-keyframes scaleIn { - from { - transform: scale(0.98); - opacity: 0; - } -} -@keyframes scaleIn { - from { - transform: scale(0.98); - opacity: 0; - } -} -@-moz-keyframes fadeLeft { - from { - transform: translateX(20px) opacity(0); - } -} -@-webkit-keyframes fadeLeft { - from { - transform: translateX(20px) opacity(0); - } -} -@-o-keyframes fadeLeft { - from { - transform: translateX(20px) opacity(0); - } -} -@keyframes fadeLeft { - from { - transform: translateX(20px) opacity(0); - } -} -@-moz-keyframes rainbow { - to { - filter: hue-rotate(360deg); - } -} -@-webkit-keyframes rainbow { - to { - filter: hue-rotate(360deg); - } -} -@-o-keyframes rainbow { - to { - filter: hue-rotate(360deg); - } -} -@keyframes rainbow { - to { - filter: hue-rotate(360deg); - } -} -} - .account__avatar, - #profile_page_avatar, - .account__avatar-composite, - .account-card__title__avatar img { - border-radius: 30% !important; - } - .detailed-status__action-bar, - .column-header__collapsible-inner, - .audio-player, - .search__input { - border: 0 !important; - } - .dropdown-menu { - border-radius: var(--radius); - } - .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; - } -@media (min-width: 1175px) { - .columns-area__panels { - padding-inline: 10px; - padding-top: var(--top); - box-sizing: border-box; - transition: padding 0.4s; - --top: 20px; - } - .columns-area__panels__pane { - height: unset !important; - } - .columns-area__panels__pane .columns-area__panels__pane__inner { - height: calc(100% + 20px) !important; - } -} -@media (min-width: 1320px) { - .columns-area__panels { - --top: 30px; - } -} - #mastodon .compose-panel { - margin-top: 0; - overflow-y: auto; - margin-top: calc(0px - var(--top)); - padding-top: var(--top); - padding-bottom: 20px; - box-sizing: border-box; - max-height: unset !important; - } - #mastodon .search { - margin-inline: 5px; - border-radius: var(--radius); - } - #mastodon .search label { - box-sizing: border-box; - } - #mastodon .search input { - border-radius: var(--radius-round) !important; - padding-inline-start: 20px !important; - padding-inline-end: 40px !important; - } - #mastodon .search .search__icon > i { - margin-inline: 5px; - } - .search__popout { - border-radius: var(--radius); - animation: scaleIn 0.2s; - box-shadow: var(--shadow-low); - margin-top: 4px; - margin-inline: 4px; - width: calc(100% - 8px); - } - #mastodon .compose__action-bar-dropdown .icon-button { - width: auto !important; - height: auto !important; - padding: 8px; - } - #mastodon .compose-form { - padding-top: 10px; - } - #mastodon .compose-form .reply-indicator { - position: relative; - transition: min-height 0.1s; - } - #mastodon .compose-form .reply-indicator__display-name { - padding: 0; - } - #mastodon .compose-form .compose-form__autosuggest-wrapper, - #mastodon .compose-form .autosuggest-textarea__textarea { - border-radius: var(--radius) var(--radius) 0 0 !important; - border-bottom: 0; - } - #mastodon .compose-form .compose-form__buttons-wrapper { - border-radius: 0 0 var(--radius) var(--radius) !important; - position: sticky; - bottom: 0; - } - #mastodon .compose-form .compose-form__buttons-wrapper .compose-form__buttons> * { - border-radius: var(--radius-round); - overflow: hidden; - } - #mastodon .compose-form .compose-form__publish-button-wrapper { - overflow: visible !important; - max-width: 100%; - } - #mastodon .compose-form .compose-form__upload__actions { - z-index: 5; - position: relative; - } - #mastodon .compose-form .compose-form__upload-thumbnail { - display: flex; - flex-direction: column; - } - #mastodon .compose-form .compose-form__upload__warning { - position: relative; - display: flex; - justify-content: center; - background: rgba(0,0,0,0.7); - flex-grow: 1; - box-shadow: 0 -50px rgba(0,0,0,0.7); - } - #mastodon .compose-form .compose-form__upload__warning > button { - width: 100%; - height: 100%; - font-weight: 700; - padding-inline: 1em; - color: #fff; - } - #mastodon .compose-form .compose-form__upload__warning > button i { - margin-inline-end: 0.2em; - transform: scale(1.2); - } - .server-banner { - padding-inline: 10px; - } - .server-banner .server-banner__hero { - border-radius: var(--radius); - width: 100%; - border-radius: var(--radius) var(--radius) 0 0; - border: 1px solid var(--border-color); - box-sizing: border-box; - } - .server-banner .server-banner__description { - border: 1px solid var(--border-color); - padding: 14px 12px; - margin-top: -20px; - line-height: 1.5; - border-radius: 0 0 var(--radius) var(--radius); - } - .server-banner .server-banner__meta { - flex-direction: column; - } - .server-banner .server-banner__meta .server-banner__meta__column { - width: unset; - overflow: visible; - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: flex-end; - } - .server-banner .server-banner__meta .server-banner__meta__column h4 { - margin: 0; - font-size: 0.9em !important; - width: 100%; - } - .server-banner .server-banner__meta .server-banner__meta__column .account { - margin-inline: -10px; - padding: 10px !important; - width: 100%; - } - .server-banner .server-banner__meta .server-banner__meta__column .account::after { - content: unset !important; - } - .server-banner .server-banner__meta .server-banner__meta__column .server-banner__number, - .server-banner .server-banner__meta .server-banner__meta__column .server-banner__number-label { - font-size: 1.1em; - line-height: 2; - margin-inline-end: 0.5em; - } - .server-banner .server-banner__meta .server-banner__meta__column .server-banner__number-label { - font-weight: 400 !important; - } - .navigation-panel__sign-in-banner { - 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 > p:last-child { - margin-bottom: 0; - } - .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); - } -@media (min-width: 1175px) { - .columns-area__panels__main { - width: 0; - flex-grow: 1; - } - .columns-area__panels__main .column, - .columns-area__panels__main .columns-area { - overflow: visible !important; - border-radius: var(--radius) var(--radius) 0 0 !important; - } - .columns-area__panels__main .column > :first-child, - .columns-area__panels__main .columns-area > :first-child { - border-radius: var(--radius) var(--radius) 0 0 !important; - } -} -@media (min-width: 1320px) { - .columns-area__panels__main { - max-width: var(--tl-width) !important; - padding: 0 15px; - margin: 0 10px; - } -} -@media (min-width: 890px) { - .columns-area__panels__main { - display: grid; - grid-template-columns: 100%; - } -} - .columns-area__panels__main > div { - border-radius: var(--radius) var(--radius) 0 0; - grid-row: 1; - } - .columns-area__panels__main > div:last-child { - box-shadow: var(--shadow-med); - } - .columns-area__panels__main :not(.scrollable--flex) > .scrollable { - padding-bottom: 40vh !important; - } - .columns-area__panels__main .column-actions { - position: static; - } - .columns-area__panels__main .column-actions .column-actions__background { - border-bottom-left-radius: var(--radius); - } - #mastodon .scrollable { - border-radius: var(--radius) var(--radius) 0 0 !important; - border: 0; - } - #mastodon .scrollable:first-child { - overflow: clip; - } - #mastodon .column-header__wrapper ~ .scrollable { - overflow: auto !important; - } - #mastodon .scrollable:not(.scrollable--flex), - #mastodon .activity-stream { - border: 0 !important; - 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 .columns-area { - box-sizing: border-box; - padding-bottom: 0; - height: 100% !important; - } - #mastodon .explore__search-results { - padding: 10px; - } - #mastodon .dismissable-banner { - border-inline: 0; - border-top: 0; - margin: -10px; - margin-bottom: 10px; - border-radius: 0; - padding: 15px; - isolation: isolate; - overflow: hidden; - } - .dismissable-banner__message { - padding: 10px; - padding-inline-end: 30px; - } - .dismissable-banner__action { - margin: 10px; - } - #mastodon .column:not(.scrollable--flex) > .dismissable-banner { - border-radius: var(--radius) var(--radius) 0 0 !important; - margin: 0; - } - #mastodon .column:not(.scrollable--flex) > .dismissable-banner ~ .scrollable { - border-radius: 0 !important; - } - #mastodon .scrollable:not(.scrollable--flex) > .dismissable-banner { - margin: 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: slideUp 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 { - border: 0; - padding: 0 20px; - border-radius: var(--radius) var(--radius) 0 0; - margin-top: calc(0px - var(--radius)) !important; - display: flex; - flex-direction: column; - background: inherit; - } - body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header__bar { - background: inherit !important; - } - #mastodon .account-timeline__header .account__header__bar .account__header__tabs { - overflow: visible !important; - position: relative; - padding: 0; - padding-top: 10px; - height: unset !important; - margin-top: -55px !important; - } - #mastodon .account-timeline__header .account__header__bar .account__header__tabs::before { - content: ""; - position: absolute; - top: 0; - left: -20px; - right: -20px; - bottom: -40px; - backdrop-filter: blur(40px); - filter: brightness(1.1); - pointer-events: none; - opacity: 0.7; - clip-path: inset(55px 0 0 0 round var(--radius)); - mask: linear-gradient(transparent 55px, #000 50px, transparent); - -webkit-mask: linear-gradient(transparent 55px, #000 50px, transparent); - } - #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; - } - #mastodon .account-timeline__header .account__header__bar .avatar .account-role { - position: absolute; - bottom: 0; - left: 100%; - border-radius: var(--radius-round); - } - #mastodon .account-timeline__header .account__header__bar .account__avatar { - border: 0; - box-shadow: var(--shadow); - } - #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; - } - #mastodon .account-timeline__header .account__header__bio { - padding: 0; - margin: 0; - } - #mastodon .account-timeline__header .account__header__bio > * { - padding-inline: 0; - } - #mastodon .account-timeline__header .account__header__extra { - line-height: 1.5; - margin-top: 1em; - } - #mastodon :not(.admin-account-bio) > div > .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 :not(.admin-account-bio) > div > .account__header__fields.account__header__fields:not(:first-child), - #mastodon .account__header__account-note.account__header__fields:not(:first-child) { - margin-top: 10px; - margin-bottom: -10px; - } - .public-account-bio .account__header__fields { - padding: 20px !important; - padding-bottom: 0 !important; - } - #mastodon :not(.admin-account-bio) > div > .account__header__fields dl, - #mastodon .account__header__account-note dl, - #mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note, - #mastodon .account__header__account-note.account__header__account-note.account__header__account-note { - display: inline; - border-radius: 0; - overflow: hidden; - border: 0; - padding: 8px 12px !important; - position: relative; - overflow: hidden; - flex-grow: 1; - } - #mastodon :not(.admin-account-bio) > div > .account__header__fields dl:not(.verified), - #mastodon .account__header__account-note dl:not(.verified), - #mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note:not(.verified), - #mastodon .account__header__account-note.account__header__account-note.account__header__account-note:not(.verified) { - background-color: var(--elevated-color); - } - #mastodon :not(.admin-account-bio) > div > .account__header__fields dl dt, - #mastodon .account__header__account-note dl dt, - #mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dt, - #mastodon .account__header__account-note.account__header__account-note.account__header__account-note dt { - all: unset; - color: unset; - opacity: 0.9; - text-transform: capitalize; - } - #mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd, - #mastodon .account__header__account-note dl dd, - #mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd, - #mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd { - padding: 0; - white-space: unset; - max-height: unset; - text-align: unset; - } - #mastodon :not(.admin-account-bio) > div > .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 :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child::after, - #mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child::after, - #mastodon :not(.admin-account-bio) > div > .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, - #mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a::after, - #mastodon .account__header__account-note.account__header__account-note.account__header__account-note 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 :not(.admin-account-bio) > div > .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 :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child:hover:after, - #mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child:hover:after, - #mastodon :not(.admin-account-bio) > div > .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 :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a:hover:after, - #mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a:hover:after, - #mastodon :not(.admin-account-bio) > div > .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 :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child:focus:after, - #mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child:focus:after, - #mastodon :not(.admin-account-bio) > div > .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, - #mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a:focus:after, - #mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a:focus:after { - opacity: 1; - } - #mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd.verified, - #mastodon .account__header__account-note dl dd.verified, - #mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd.verified, - #mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd.verified { - overflow: visible !important; - border: 0; - background: none; - } - #mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd.verified a::before, - #mastodon .account__header__account-note dl dd.verified a::before, - #mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd.verified a::before, - #mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd.verified a::before, - #mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd.verified a::after, - #mastodon .account__header__account-note dl dd.verified a::after, - #mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd.verified a::after, - #mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd.verified a::after { - content: ""; - position: absolute; - inset: 0; - background: currentcolor; - opacity: 0.2; - } - #mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd.verified a::after, - #mastodon .account__header__account-note dl dd.verified a::after, - #mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd.verified a::after, - #mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd.verified a::after { - background: linear-gradient(20deg, currentcolor, transparent) !important; - opacity: 0.2 !important; - z-index: -2; - } - #mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note, - #mastodon .account__header__account-note.account__header__account-note.account__header__account-note { - display: flex; - margin-bottom: 10px; - gap: 0; - border: 0; - padding: 0 !important; - margin-inline: 0 !important; - background: none !important; - border-radius: 8px; - font-size: 12px; - width: unset; - background: none; - } - #mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note label, - #mastodon .account__header__account-note.account__header__account-note.account__header__account-note label { - 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 :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note:focus-within, - #mastodon .account__header__account-note.account__header__account-note.account__header__account-note:focus-within { - padding: 0.5em 0.7em !important; - margin-inline: -5px !important; - border: 1px solid; - } - #mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note:not(:focus-within), - #mastodon .account__header__account-note.account__header__account-note.account__header__account-note:not(:focus-within) { - border-radius: 0; - border-bottom: 1px solid; - padding-bottom: 0.4em !important; - } - #mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note textarea, - #mastodon .account__header__account-note.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 :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note textarea::placeholder, - #mastodon .account__header__account-note.account__header__account-note.account__header__account-note textarea::placeholder { - font-weight: 600; - } - #mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note label, - #mastodon .account__header__account-note.account__header__account-note.account__header__account-note label { - margin: 0; - font-weight: 600; - padding-inline: 14px; - } - #mastodon .account__section-headline { - background: none; - position: relative; - z-index: 2; - } - .with-modals #mastodon .account__section-headline { - border: 0 !important; - } - #mastodon .account__section-headline a, - #mastodon .account__section-headline button { - background: none; - border-radius: 0 !important; - } - #mastodon .account__section-headline a span, - #mastodon .account__section-headline button span { - font-weight: 400; - opacity: 0.7; - transition: opacity 0.2s; - } - #mastodon .account__section-headline a.active span, - #mastodon .account__section-headline button.active span { - font-weight: 700; - opacity: 1; - } - #mastodon .account__section-headline a:hover span, - #mastodon .account__section-headline button:hover span, - #mastodon .account__section-headline a:active span, - #mastodon .account__section-headline button:active span { - opacity: 1 !important; - } - #mastodon .account__section-headline a::before, - #mastodon .account__section-headline button::before { - border-color: transparent transparent var(--border-color); - } - #mastodon .notification__filter-bar { - border: 0 !important; - margin-bottom: calc(0px - var(--radius)); - padding-bottom: var(--radius); - } - #mastodon .notification__filter-bar + .scrollable { - overflow: clip; - } - #mastodon .account-gallery__container { - border-radius: var(--radius); - overflow: clip; - 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); - } - #mastodon .scrollable > div:first-child > [tabindex="-1"]:last-child .status__wrapper::after { - content: unset; - } - .focusable, - .entry, - .statuses-grid__item .detailed-status, + .load-more, + .setting-toggle, + .column-header__back-button, + .column-back-button, .trends__item, .story, - .account-card, - .scrollable :not(.focusable) > .account, - .timeline-hint { - overflow: clip; - transition: background 0.2s, box-shadow 0.4s, margin 0.2s, border 0.2s; - animation: slideUp backwards 0.4s cubic-bezier(0, 1, 1, 1); - position: relative; - border-radius: var(--radius); + .account__avatar, + .button, + .media-gallery__item, + .column-link, + select, + .status-card, + .audio-player, + .account { + transition: transform 0.4s cubic-bezier(0, 0, 0, 3), background 0.2s !important; } - .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-name: slideUpFade; + .load-more:active, + .setting-toggle:active, + .column-header__back-button:active, + .column-back-button:active, + .trends__item:active, + .story:active, + .account__avatar:active, + .button:active, + .media-gallery__item:active, + .column-link:active, + select:active, + .status-card:active, + .audio-player:active, + .account:active, + .load-more:focus-visible, + .setting-toggle:focus-visible, + .column-header__back-button:focus-visible, + .column-back-button:focus-visible, + .trends__item:focus-visible, + .story:focus-visible, + .account__avatar:focus-visible, + .button:focus-visible, + .media-gallery__item:focus-visible, + .column-link:focus-visible, + select:focus-visible, + .status-card:focus-visible, + .audio-player:focus-visible, + .account:focus-visible { + transform: scale(0.99); + transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important; } - .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; + .column-header__button, + .column-header__buttons > .column-header__back-button, + .react-toggle-track, + .icon-button, + .floating-action-button { + transition: transform 0.4s cubic-bezier(0, 0, 0, 4) !important; } - .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; + .column-header__button:active, + .column-header__buttons > .column-header__back-button:active, + .react-toggle-track:active, + .icon-button:active, + .floating-action-button:active { + transform: scale(0.95); + transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important; } - .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; + .status__content__spoiler-link span { + display: inline-block; + transition: transform 0.4s cubic-bezier(0, 0, 0, 4) !important; } - .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; + .status__content__spoiler-link:active span { + transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important; + transform: translateY(1px); } - .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; +@-moz-keyframes bounceIn { + 0% { + transform: scale(1.1); + opacity: 0; + } + 30% { + transform: scale(0.99); + opacity: 1; + } + 60% { + transform: scale(1.005); + opacity: 1; + } + 100% { + transform: scale(1); + opacity: 1; + } +} +@-webkit-keyframes bounceIn { + 0% { + transform: scale(1.1); + opacity: 0; + } + 30% { + transform: scale(0.99); + opacity: 1; + } + 60% { + transform: scale(1.005); + opacity: 1; + } + 100% { + transform: scale(1); + opacity: 1; + } +} +@-o-keyframes bounceIn { + 0% { + transform: scale(1.1); + opacity: 0; + } + 30% { + transform: scale(0.99); + opacity: 1; + } + 60% { + transform: scale(1.005); + opacity: 1; + } + 100% { + transform: scale(1); + opacity: 1; + } +} +@keyframes bounceIn { + 0% { + transform: scale(1.1); + opacity: 0; + } + 30% { + transform: scale(0.99); + opacity: 1; + } + 60% { + transform: scale(1.005); + opacity: 1; + } + 100% { + transform: scale(1); + opacity: 1; + } +} +@-moz-keyframes slideUp { + from { + transform: translateY(20px); + } +} +@-webkit-keyframes slideUp { + from { + transform: translateY(20px); + } +} +@-o-keyframes slideUp { + from { + transform: translateY(20px); + } +} +@keyframes slideUp { + from { + transform: translateY(20px); + } +} +@-moz-keyframes slideUpFade { + from { + transform: translateY(20px); + filter: opacity(0); + } +} +@-webkit-keyframes slideUpFade { + from { + transform: translateY(20px); + filter: opacity(0); + } +} +@-o-keyframes slideUpFade { + from { + transform: translateY(20px); + filter: opacity(0); + } +} +@keyframes slideUpFade { + from { + transform: translateY(20px); + filter: opacity(0); + } +} +@-moz-keyframes slideDowFade { + from { + transform: translateY(-20px); + filter: opacity(0); + } +} +@-webkit-keyframes slideDowFade { + from { + transform: translateY(-20px); + filter: opacity(0); + } +} +@-o-keyframes slideDowFade { + from { + transform: translateY(-20px); + filter: opacity(0); + } +} +@keyframes slideDowFade { + from { + transform: translateY(-20px); + filter: opacity(0); + } +} +@-moz-keyframes slideUpBig { + from { + transform: translateY(50vh); + } +} +@-webkit-keyframes slideUpBig { + from { + transform: translateY(50vh); + } +} +@-o-keyframes slideUpBig { + from { + transform: translateY(50vh); + } +} +@keyframes slideUpBig { + from { + transform: translateY(50vh); + } +} +@-moz-keyframes fadeUp { + from { + transform: translateY(10px); + opacity: 0; + } +} +@-webkit-keyframes fadeUp { + from { + transform: translateY(10px); + opacity: 0; + } +} +@-o-keyframes fadeUp { + from { + transform: translateY(10px); + opacity: 0; + } +} +@keyframes fadeUp { + from { + transform: translateY(10px); + opacity: 0; + } +} +@-moz-keyframes scaleIn { + from { + transform: scale(0.98); + opacity: 0; + } +} +@-webkit-keyframes scaleIn { + from { + transform: scale(0.98); + opacity: 0; + } +} +@-o-keyframes scaleIn { + from { + transform: scale(0.98); + opacity: 0; + } +} +@keyframes scaleIn { + from { + transform: scale(0.98); + opacity: 0; + } +} +@-moz-keyframes fadeLeft { + from { + transform: translateX(20px) opacity(0); + } +} +@-webkit-keyframes fadeLeft { + from { + transform: translateX(20px) opacity(0); + } +} +@-o-keyframes fadeLeft { + from { + transform: translateX(20px) opacity(0); + } +} +@keyframes fadeLeft { + from { + transform: translateX(20px) opacity(0); + } +} +@-moz-keyframes rainbow { + to { + filter: hue-rotate(360deg); + } +} +@-webkit-keyframes rainbow { + to { + filter: hue-rotate(360deg); + } +} +@-o-keyframes rainbow { + to { + filter: hue-rotate(360deg); + } +} +@keyframes rainbow { + to { + filter: hue-rotate(360deg); + } +} +} +.account__avatar, +#profile_page_avatar, +.account__avatar-composite, +.account-card__title__avatar img { + border-radius: 30% !important; +} +.detailed-status__action-bar, +.column-header__collapsible-inner, +.audio-player, +.search__input { + border: 0 !important; +} +.dropdown-menu { + border-radius: var(--radius); +} +.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; +} +@media (min-width: 1175px) { + .columns-area__panels { + padding-inline: 10px; + padding-top: var(--top); + box-sizing: border-box; + transition: padding 0.4s; + --top: 20px; } - .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; + .columns-area__panels__pane { 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; + .columns-area__panels__pane .columns-area__panels__pane__inner { + height: calc(100% + 20px) !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); +} +@media (min-width: 1320px) { + .columns-area__panels { + --top: 30px; } - .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: 0; +} +#mastodon .compose-panel { + margin-top: 0; + overflow-y: auto; + margin-top: calc(0px - var(--top)); + padding-top: var(--top); + padding-bottom: 20px; + box-sizing: border-box; + max-height: unset !important; +} +#mastodon .search { + margin-inline: 5px; + border-radius: var(--radius); +} +#mastodon .search label { + box-sizing: border-box; +} +#mastodon .search input { + border-radius: var(--radius-round) !important; + padding-inline-start: 20px !important; + padding-inline-end: 40px !important; +} +#mastodon .search .search__icon > i { + margin-inline: 5px; +} +.search__popout { + border-radius: var(--radius); + animation: scaleIn 0.2s; + box-shadow: var(--shadow-low); + margin-top: 4px; + margin-inline: 4px; + width: calc(100% - 8px); +} +#mastodon .compose__action-bar-dropdown .icon-button { + width: auto !important; + height: auto !important; + padding: 8px; +} +#mastodon .compose-form { + padding-top: 10px; +} +#mastodon .compose-form .reply-indicator { + position: relative; + transition: min-height 0.1s; +} +#mastodon .compose-form .reply-indicator__display-name { + padding: 0; +} +#mastodon .compose-form .compose-form__autosuggest-wrapper, +#mastodon .compose-form .autosuggest-textarea__textarea { + border-radius: var(--radius) var(--radius) 0 0 !important; + border-bottom: 0; +} +#mastodon .compose-form .compose-form__buttons-wrapper { + border-radius: 0 0 var(--radius) var(--radius) !important; + position: sticky; + bottom: 0; +} +#mastodon .compose-form .compose-form__buttons-wrapper .compose-form__buttons> * { + border-radius: var(--radius-round); + overflow: hidden; +} +#mastodon .compose-form .compose-form__publish-button-wrapper { + overflow: visible !important; + max-width: 100%; +} +#mastodon .compose-form .compose-form__upload__actions { + z-index: 5; + position: relative; +} +#mastodon .compose-form .compose-form__upload-thumbnail { + display: flex; + flex-direction: column; +} +#mastodon .compose-form .compose-form__upload__warning { + position: relative; + display: flex; + justify-content: center; + background: rgba(0,0,0,0.7); + flex-grow: 1; + box-shadow: 0 -50px rgba(0,0,0,0.7); +} +#mastodon .compose-form .compose-form__upload__warning > button { + width: 100%; + height: 100%; + font-weight: 700; + padding-inline: 1em; + color: #fff; +} +#mastodon .compose-form .compose-form__upload__warning > button i { + margin-inline-end: 0.2em; + transform: scale(1.2); +} +.server-banner { + padding-inline: 10px; +} +.server-banner .server-banner__hero { + border-radius: var(--radius); + width: 100%; + border-radius: var(--radius) var(--radius) 0 0; + border: 1px solid var(--border-color); + box-sizing: border-box; +} +.server-banner .server-banner__description { + border: 1px solid var(--border-color); + padding: 14px 12px; + margin-top: -20px; + line-height: 1.5; + border-radius: 0 0 var(--radius) var(--radius); +} +.server-banner .server-banner__meta { + flex-direction: column; +} +.server-banner .server-banner__meta .server-banner__meta__column { + width: unset; + overflow: visible; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-end; +} +.server-banner .server-banner__meta .server-banner__meta__column h4 { + margin: 0; + font-size: 0.9em !important; + width: 100%; +} +.server-banner .server-banner__meta .server-banner__meta__column .account { + margin-inline: -10px; + padding: 10px !important; + width: 100%; +} +.server-banner .server-banner__meta .server-banner__meta__column .account::after { + content: unset !important; +} +.server-banner .server-banner__meta .server-banner__meta__column .server-banner__number, +.server-banner .server-banner__meta .server-banner__meta__column .server-banner__number-label { + font-size: 1.1em; + line-height: 2; + margin-inline-end: 0.5em; +} +.server-banner .server-banner__meta .server-banner__meta__column .server-banner__number-label { + font-weight: 400 !important; +} +.navigation-panel__sign-in-banner { + 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 > p:last-child { + margin-bottom: 0; +} +.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); +} +@media (min-width: 1175px) { + .columns-area__panels__main { + width: 0; + flex-grow: 1; } - .focusable:not(.detailed-status__wrapper):not(.status__wrapper)::after, - .entry:not(.detailed-status__wrapper):not(.status__wrapper)::after, - .statuses-grid__item .detailed-status:not(.detailed-status__wrapper):not(.status__wrapper)::after, - .trends__item:not(.detailed-status__wrapper):not(.status__wrapper)::after, - .story:not(.detailed-status__wrapper):not(.status__wrapper)::after, - .account-card:not(.detailed-status__wrapper):not(.status__wrapper)::after, - .scrollable :not(.focusable) > .account:not(.detailed-status__wrapper):not(.status__wrapper)::after, - .timeline-hint:not(.detailed-status__wrapper):not(.status__wrapper)::after { - 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; - } - .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; + .columns-area__panels__main .column, + .columns-area__panels__main .columns-area { overflow: visible !important; - position: relative; - z-index: -1; + border-radius: var(--radius) var(--radius) 0 0 !important; } - .explore__links .trends__item .trends__item__sparkline svg path { - display: unset !important; - transition: transform 1s; + .columns-area__panels__main .column > :first-child, + .columns-area__panels__main .columns-area > :first-child { + border-radius: var(--radius) var(--radius) 0 0 !important; } - .explore__links .trends__item .trends__item__sparkline svg path:first-child { - transform-origin: center; +} +@media (min-width: 1320px) { + .columns-area__panels__main { + max-width: var(--tl-width) !important; + padding: 0 15px; + margin: 0 10px; } - .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.account-card.account-card.account-card, - .entry.account-card.account-card.account-card, - .statuses-grid__item .detailed-status.account-card.account-card.account-card, - .trends__item.account-card.account-card.account-card, - .story.account-card.account-card.account-card, - .account-card.account-card.account-card.account-card, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card, - .timeline-hint.account-card.account-card.account-card { - display: flex; - flex-direction: column; - max-height: 320px; - margin: 0; - border-radius: var(--radius) !important; - box-shadow: var(--shadow); - } - .explore__suggestions, - .directory__list { - padding: 15px; +} +@media (min-width: 890px) { + .columns-area__panels__main { display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 15px; - } - .explore__suggestions.directory__list, - .directory__list.directory__list { - padding: 15px 10px; - } - .focusable.account-card.account-card.account-card .account-card__header, - .entry.account-card.account-card.account-card .account-card__header, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__header, - .trends__item.account-card.account-card.account-card .account-card__header, - .story.account-card.account-card.account-card .account-card__header, - .account-card.account-card.account-card.account-card .account-card__header, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__header, - .timeline-hint.account-card.account-card.account-card .account-card__header { - padding: 0 !important; - } - .focusable.account-card.account-card.account-card .account-card__title, - .entry.account-card.account-card.account-card .account-card__title, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title, - .trends__item.account-card.account-card.account-card .account-card__title, - .story.account-card.account-card.account-card .account-card__title, - .account-card.account-card.account-card.account-card .account-card__title, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title, - .timeline-hint.account-card.account-card.account-card .account-card__title { - margin-bottom: 10px; - margin-top: -26px; - } - .focusable.account-card.account-card.account-card .account-card__title__avatar, - .entry.account-card.account-card.account-card .account-card__title__avatar, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title__avatar, - .trends__item.account-card.account-card.account-card .account-card__title__avatar, - .story.account-card.account-card.account-card .account-card__title__avatar, - .account-card.account-card.account-card.account-card .account-card__title__avatar, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title__avatar, - .timeline-hint.account-card.account-card.account-card .account-card__title__avatar { - padding-inline-end: 10px; - padding-bottom: 0; - } - .focusable.account-card.account-card.account-card .display-name, - .entry.account-card.account-card.account-card .display-name, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .display-name, - .trends__item.account-card.account-card.account-card .display-name, - .story.account-card.account-card.account-card .display-name, - .account-card.account-card.account-card.account-card .display-name, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .display-name, - .timeline-hint.account-card.account-card.account-card .display-name { - padding-bottom: 0; - } - .focusable.account-card.account-card.account-card .display-name__account, - .entry.account-card.account-card.account-card .display-name__account, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .display-name__account, - .trends__item.account-card.account-card.account-card .display-name__account, - .story.account-card.account-card.account-card .display-name__account, - .account-card.account-card.account-card.account-card .display-name__account, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .display-name__account, - .timeline-hint.account-card.account-card.account-card .display-name__account { - font-size: 0.9em !important; - } - .focusable.account-card.account-card.account-card .account-card__title__avatar .account__avatar, - .entry.account-card.account-card.account-card .account-card__title__avatar .account__avatar, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title__avatar .account__avatar, - .trends__item.account-card.account-card.account-card .account-card__title__avatar .account__avatar, - .story.account-card.account-card.account-card .account-card__title__avatar .account__avatar, - .account-card.account-card.account-card.account-card .account-card__title__avatar .account__avatar, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title__avatar .account__avatar, - .timeline-hint.account-card.account-card.account-card .account-card__title__avatar .account__avatar, - .focusable.account-card.account-card.account-card .account-card__title__avatar, - .entry.account-card.account-card.account-card .account-card__title__avatar, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title__avatar, - .trends__item.account-card.account-card.account-card .account-card__title__avatar, - .story.account-card.account-card.account-card .account-card__title__avatar, - .account-card.account-card.account-card.account-card .account-card__title__avatar, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title__avatar, - .timeline-hint.account-card.account-card.account-card .account-card__title__avatar { - width: 64px !important; - height: 64px !important; - background-size: 64px 64px !important; - } - .focusable.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, - .entry.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, - .trends__item.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, - .story.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, - .account-card.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, - .timeline-hint.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, - .focusable.account-card.account-card.account-card .account-card__title__avatar img, - .entry.account-card.account-card.account-card .account-card__title__avatar img, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title__avatar img, - .trends__item.account-card.account-card.account-card .account-card__title__avatar img, - .story.account-card.account-card.account-card .account-card__title__avatar img, - .account-card.account-card.account-card.account-card .account-card__title__avatar img, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title__avatar img, - .timeline-hint.account-card.account-card.account-card .account-card__title__avatar img { - width: inherit; - height: inherit; - } - .focusable.account-card.account-card.account-card .account-card__title, - .entry.account-card.account-card.account-card .account-card__title, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title, - .trends__item.account-card.account-card.account-card .account-card__title, - .story.account-card.account-card.account-card .account-card__title, - .account-card.account-card.account-card.account-card .account-card__title, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title, - .timeline-hint.account-card.account-card.account-card .account-card__title { - padding-inline-end: 15px; - } - .focusable.account-card.account-card.account-card .display-name bdi, - .entry.account-card.account-card.account-card .display-name bdi, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .display-name bdi, - .trends__item.account-card.account-card.account-card .display-name bdi, - .story.account-card.account-card.account-card .display-name bdi, - .account-card.account-card.account-card.account-card .display-name bdi, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .display-name bdi, - .timeline-hint.account-card.account-card.account-card .display-name bdi { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - .focusable.account-card.account-card.account-card .account-card__bio, - .entry.account-card.account-card.account-card .account-card__bio, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__bio, - .trends__item.account-card.account-card.account-card .account-card__bio, - .story.account-card.account-card.account-card .account-card__bio, - .account-card.account-card.account-card.account-card .account-card__bio, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__bio, - .timeline-hint.account-card.account-card.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; - } - .focusable.account-card.account-card.account-card .account-card__bio::after, - .entry.account-card.account-card.account-card .account-card__bio::after, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__bio::after, - .trends__item.account-card.account-card.account-card .account-card__bio::after, - .story.account-card.account-card.account-card .account-card__bio::after, - .account-card.account-card.account-card.account-card .account-card__bio::after, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__bio::after, - .timeline-hint.account-card.account-card.account-card .account-card__bio::after { - content: unset !important; - } - .focusable.account-card.account-card.account-card .account-card__bio p, - .entry.account-card.account-card.account-card .account-card__bio p, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__bio p, - .trends__item.account-card.account-card.account-card .account-card__bio p, - .story.account-card.account-card.account-card .account-card__bio p, - .account-card.account-card.account-card.account-card .account-card__bio p, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__bio p, - .timeline-hint.account-card.account-card.account-card .account-card__bio p { - display: inline; - } - .focusable.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, - .entry.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, - .trends__item.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, - .story.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, - .account-card.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, - .timeline-hint.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before { - content: " · "; - } - .focusable.account-card.account-card.account-card .account-card__bio br, - .entry.account-card.account-card.account-card .account-card__bio br, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__bio br, - .trends__item.account-card.account-card.account-card .account-card__bio br, - .story.account-card.account-card.account-card .account-card__bio br, - .account-card.account-card.account-card.account-card .account-card__bio br, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__bio br, - .timeline-hint.account-card.account-card.account-card .account-card__bio br { - display: block; - } - .focusable.account-card.account-card.account-card .account-card__actions, - .entry.account-card.account-card.account-card .account-card__actions, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions, - .trends__item.account-card.account-card.account-card .account-card__actions, - .story.account-card.account-card.account-card .account-card__actions, - .account-card.account-card.account-card.account-card .account-card__actions, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions, - .timeline-hint.account-card.account-card.account-card .account-card__actions { - margin-top: auto !important; - display: unset !important; - } - .focusable.account-card.account-card.account-card .account-card__actions .account-card__counters, - .entry.account-card.account-card.account-card .account-card__actions .account-card__counters, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__counters, - .trends__item.account-card.account-card.account-card .account-card__actions .account-card__counters, - .story.account-card.account-card.account-card .account-card__actions .account-card__counters, - .account-card.account-card.account-card.account-card .account-card__actions .account-card__counters, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__counters, - .timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__counters { - display: flex; - gap: 1em; - padding-inline: 15px; - } - .focusable.account-card.account-card.account-card .account-card__actions .account-card__counters__item, - .entry.account-card.account-card.account-card .account-card__actions .account-card__counters__item, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__counters__item, - .trends__item.account-card.account-card.account-card .account-card__actions .account-card__counters__item, - .story.account-card.account-card.account-card .account-card__actions .account-card__counters__item, - .account-card.account-card.account-card.account-card .account-card__actions .account-card__counters__item, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__counters__item, - .timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__counters__item { - display: flex; - align-items: center; - font-size: 1em; - } - .focusable.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, - .entry.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, - .trends__item.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, - .story.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, - .account-card.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, - .timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small { - display: inline !important; - margin-inline-start: 0.4em; - font-size: 1em !important; - } - .focusable.account-card.account-card.account-card .account-card__actions .account-card__actions__button, - .entry.account-card.account-card.account-card .account-card__actions .account-card__actions__button, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__actions__button, - .trends__item.account-card.account-card.account-card .account-card__actions .account-card__actions__button, - .story.account-card.account-card.account-card .account-card__actions .account-card__actions__button, - .account-card.account-card.account-card.account-card .account-card__actions .account-card__actions__button, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__actions__button, - .timeline-hint.account-card.account-card.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); - } - .focusable.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, - .entry.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, - .trends__item.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, - .story.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, - .account-card.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, - .timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, - .focusable.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, - .entry.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, - .trends__item.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, - .story.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, - .account-card.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, - .timeline-hint.account-card.account-card.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; - } - .focusable.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, - .entry.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, - .statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, - .trends__item.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, - .story.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, - .account-card.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, - .timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty { - display: none; - } - .focusable.account-card.account-card.account-card::after, - .entry.account-card.account-card.account-card::after, - .statuses-grid__item .detailed-status.account-card.account-card.account-card::after, - .trends__item.account-card.account-card.account-card::after, - .story.account-card.account-card.account-card::after, - .account-card.account-card.account-card.account-card::after, - .scrollable :not(.focusable) > .account.account-card.account-card.account-card::after, - .timeline-hint.account-card.account-card.account-card::after { - content: unset !important; - } - .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-direct .status__prepend { - display: none; - } - #mastodon .status__wrapper-direct .status__relative-time { - color: #8c8dff !important; - } - #mastodon .status, - #mastodon .scrollable .account { - padding-block: 15px; - } - #mastodon .status::before, - #mastodon .scrollable .account::before { - inset: -10px; - border-radius: var(--radius); - } - #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 .notification .status { - padding-top: 0; - } - #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 .status__prepend { - margin-bottom: -15px !important; - } - #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; - transition: transform 0.2s cubic-bezier(0, 0, 0, 1); - } - #mastodon .status__content .custom-emoji:hover { - transform: scale(1.2); - } - #mastodon .status > .status__content .status__content__text:empty { - margin-top: -10px !important; - } - #mastodon .status__content__spoiler-link { - display: block; - 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 .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; - max-height: 80vh !important; - } - .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 .status-card__image { - position: relative; - aspect-ratio: unset !important; - } - .status-card.compact .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 .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 .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) { - height: unset !important; - width: unset !important; - pointer-events: all; - } - #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 i, - #mastodon .detailed-status__action-bar .icon-button i, - #mastodon .picture-in-picture__footer .icon-button i { - min-width: 22px; - } - #mastodon .status__action-bar .icon-button[aria-label]::after, - #mastodon .detailed-status__action-bar .icon-button[aria-label]::after, - #mastodon .picture-in-picture__footer .icon-button[aria-label]::after { - all: unset; - font-size: 12px; - margin-inline-start: 0.5em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - #mastodon .status__action-bar .icon-button .icon-button__counter, - #mastodon .detailed-status__action-bar .icon-button .icon-button__counter, - #mastodon .picture-in-picture__footer .icon-button .icon-button__counter { - 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 { - display: flex; - justify-content: center; - width: 100%; - } - #mastodon .status__action-bar.detailed-status__action-bar > div :not(i), - #mastodon .detailed-status__action-bar.detailed-status__action-bar > div :not(i), - #mastodon .picture-in-picture__footer.detailed-status__action-bar > div :not(i), - #mastodon .status__action-bar.picture-in-picture__footer > div :not(i), - #mastodon .detailed-status__action-bar.picture-in-picture__footer > div :not(i), - #mastodon .picture-in-picture__footer.picture-in-picture__footer > div :not(i) { - display: flex; - width: 100% !important; - } - #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; - } + grid-template-columns: 100%; + } +} +.columns-area__panels__main > div { + border-radius: var(--radius) var(--radius) 0 0; + grid-row: 1; +} +.columns-area__panels__main > div:last-child { + box-shadow: var(--shadow-med); +} +.columns-area__panels__main :not(.scrollable--flex) > .scrollable { + padding-bottom: 40vh !important; +} +.columns-area__panels__main .column-actions { + position: static; +} +.columns-area__panels__main .column-actions .column-actions__background { + border-bottom-left-radius: var(--radius); +} +#mastodon .scrollable { + border-radius: var(--radius) var(--radius) 0 0 !important; + border: 0; +} +#mastodon .scrollable:first-child { + overflow: clip; +} +#mastodon .column-header__wrapper ~ .scrollable { + overflow: auto !important; +} +#mastodon .scrollable:not(.scrollable--flex), +#mastodon .activity-stream { + border: 0 !important; + 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 .columns-area { + box-sizing: border-box; + padding-bottom: 0; + height: 100% !important; +} +#mastodon .explore__search-results { + padding: 10px; +} +#mastodon .dismissable-banner { + border-inline: 0; + border-top: 0; + margin: -10px; + margin-bottom: 10px; + border-radius: 0; + padding: 15px; + isolation: isolate; + overflow: hidden; +} +.dismissable-banner__message { + padding: 10px; + padding-inline-end: 30px; +} +.dismissable-banner__action { + margin: 10px; +} +#mastodon .column:not(.scrollable--flex) > .dismissable-banner { + border-radius: var(--radius) var(--radius) 0 0 !important; + margin: 0; +} +#mastodon .column:not(.scrollable--flex) > .dismissable-banner ~ .scrollable { + border-radius: 0 !important; +} +#mastodon .scrollable:not(.scrollable--flex) > .dismissable-banner { + margin: 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: slideUp 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 { + border: 0; + padding: 0 20px; + border-radius: var(--radius) var(--radius) 0 0; + margin-top: calc(0px - var(--radius)) !important; + display: flex; + flex-direction: column; + background: inherit; +} +body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header__bar { + background: inherit !important; +} +#mastodon .account-timeline__header .account__header__bar .account__header__tabs { + overflow: visible !important; + position: relative; + padding: 0; + padding-top: 10px; + height: unset !important; + margin-top: -55px !important; +} +#mastodon .account-timeline__header .account__header__bar .account__header__tabs::before { + content: ""; + position: absolute; + top: 0; + left: -20px; + right: -20px; + bottom: -40px; + backdrop-filter: blur(40px); + filter: brightness(1.1); + pointer-events: none; + opacity: 0.7; + clip-path: inset(55px 0 0 0 round var(--radius)); + mask: linear-gradient(transparent 55px, #000 50px, transparent); + -webkit-mask: linear-gradient(transparent 55px, #000 50px, transparent); +} +#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; +} +#mastodon .account-timeline__header .account__header__bar .avatar .account-role { + position: absolute; + bottom: 0; + left: 100%; + border-radius: var(--radius-round); +} +#mastodon .account-timeline__header .account__header__bar .account__avatar { + border: 0; + box-shadow: var(--shadow); +} +#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; +} +#mastodon .account-timeline__header .account__header__bio { + padding: 0; + margin: 0; +} +#mastodon .account-timeline__header .account__header__bio > * { + padding-inline: 0; +} +#mastodon .account-timeline__header .account__header__extra { + line-height: 1.5; + margin-top: 1em; +} +#mastodon :not(.admin-account-bio) > div > .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 :not(.admin-account-bio) > div > .account__header__fields.account__header__fields:not(:first-child), +#mastodon .account__header__account-note.account__header__fields:not(:first-child) { + margin-top: 10px; + margin-bottom: -10px; +} +.public-account-bio .account__header__fields { + padding: 20px !important; + padding-bottom: 0 !important; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl, +#mastodon .account__header__account-note dl, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note { + display: inline; + border-radius: 0; + overflow: hidden; + border: 0; + padding: 8px 12px !important; + position: relative; + overflow: hidden; + flex-grow: 1; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl:not(.verified), +#mastodon .account__header__account-note dl:not(.verified), +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note:not(.verified), +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note:not(.verified) { + background-color: var(--elevated-color); +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dt, +#mastodon .account__header__account-note dl dt, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dt, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dt { + all: unset; + color: unset; + opacity: 0.9; + text-transform: capitalize; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd, +#mastodon .account__header__account-note dl dd, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd { + padding: 0; + white-space: unset; + max-height: unset; + text-align: unset; +} +#mastodon :not(.admin-account-bio) > div > .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 :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child::after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child::after, +#mastodon :not(.admin-account-bio) > div > .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, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a::after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note 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 :not(.admin-account-bio) > div > .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 :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child:hover:after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child:hover:after, +#mastodon :not(.admin-account-bio) > div > .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 :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a:hover:after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a:hover:after, +#mastodon :not(.admin-account-bio) > div > .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 :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child:focus:after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child:focus:after, +#mastodon :not(.admin-account-bio) > div > .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, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a:focus:after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a:focus:after { + opacity: 1; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd.verified, +#mastodon .account__header__account-note dl dd.verified, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd.verified, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd.verified { + overflow: visible !important; + border: 0; + background: none; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd.verified a::before, +#mastodon .account__header__account-note dl dd.verified a::before, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd.verified a::before, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd.verified a::before, +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd.verified a::after, +#mastodon .account__header__account-note dl dd.verified a::after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd.verified a::after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd.verified a::after { + content: ""; + position: absolute; + inset: 0; + background: currentcolor; + opacity: 0.2; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd.verified a::after, +#mastodon .account__header__account-note dl dd.verified a::after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd.verified a::after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd.verified a::after { + background: linear-gradient(20deg, currentcolor, transparent) !important; + opacity: 0.2 !important; + z-index: -2; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note { + display: flex; + margin-bottom: 10px; + gap: 0; + border: 0; + padding: 0 !important; + margin-inline: 0 !important; + background: none !important; + border-radius: 8px; + font-size: 12px; + width: unset; + background: none; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note label, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note label { + 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 :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note:focus-within, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note:focus-within { + padding: 0.5em 0.7em !important; + margin-inline: -5px !important; + border: 1px solid; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note:not(:focus-within), +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note:not(:focus-within) { + border-radius: 0; + border-bottom: 1px solid; + padding-bottom: 0.4em !important; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note textarea, +#mastodon .account__header__account-note.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 :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note textarea::placeholder, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note textarea::placeholder { + font-weight: 600; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note label, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note label { + margin: 0; + font-weight: 600; + padding-inline: 14px; +} +#mastodon .account__section-headline { + background: none; + position: relative; + z-index: 2; +} +.with-modals #mastodon .account__section-headline { + border: 0 !important; +} +#mastodon .account__section-headline a, +#mastodon .account__section-headline button { + background: none; + border-radius: 0 !important; +} +#mastodon .account__section-headline a span, +#mastodon .account__section-headline button span { + font-weight: 400; + opacity: 0.7; + transition: opacity 0.2s; +} +#mastodon .account__section-headline a.active span, +#mastodon .account__section-headline button.active span { + font-weight: 700; + opacity: 1; +} +#mastodon .account__section-headline a:hover span, +#mastodon .account__section-headline button:hover span, +#mastodon .account__section-headline a:active span, +#mastodon .account__section-headline button:active span { + opacity: 1 !important; +} +#mastodon .account__section-headline a::before, +#mastodon .account__section-headline button::before { + border-color: transparent transparent var(--border-color); +} +#mastodon .notification__filter-bar { + border: 0 !important; + margin-bottom: calc(0px - var(--radius)); + padding-bottom: var(--radius); +} +#mastodon .notification__filter-bar + .scrollable { + overflow: clip; +} +#mastodon .account-gallery__container { + border-radius: var(--radius); + overflow: clip; + 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); +} +#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: clip; + transition: background 0.2s, box-shadow 0.4s, margin 0.2s, border 0.2s; + animation: slideUp backwards 0.4s 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-name: slideUpFade; +} +.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: 0; +} +.focusable:not(.detailed-status__wrapper):not(.status__wrapper)::after, +.entry:not(.detailed-status__wrapper):not(.status__wrapper)::after, +.statuses-grid__item .detailed-status:not(.detailed-status__wrapper):not(.status__wrapper)::after, +.trends__item:not(.detailed-status__wrapper):not(.status__wrapper)::after, +.story:not(.detailed-status__wrapper):not(.status__wrapper)::after, +.account-card:not(.detailed-status__wrapper):not(.status__wrapper)::after, +.scrollable :not(.focusable) > .account:not(.detailed-status__wrapper):not(.status__wrapper)::after, +.timeline-hint:not(.detailed-status__wrapper):not(.status__wrapper)::after { + 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; +} +.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; + z-index: -1; +} +.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.account-card.account-card.account-card, +.entry.account-card.account-card.account-card, +.statuses-grid__item .detailed-status.account-card.account-card.account-card, +.trends__item.account-card.account-card.account-card, +.story.account-card.account-card.account-card, +.account-card.account-card.account-card.account-card, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card, +.timeline-hint.account-card.account-card.account-card { + display: flex; + flex-direction: column; + max-height: 320px; + margin: 0; + border-radius: var(--radius) !important; + box-shadow: var(--shadow); +} +.explore__suggestions, +.directory__list { + padding: 15px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 15px; +} +.explore__suggestions.directory__list, +.directory__list.directory__list { + padding: 15px 10px; +} +.focusable.account-card.account-card.account-card .account-card__header, +.entry.account-card.account-card.account-card .account-card__header, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__header, +.trends__item.account-card.account-card.account-card .account-card__header, +.story.account-card.account-card.account-card .account-card__header, +.account-card.account-card.account-card.account-card .account-card__header, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__header, +.timeline-hint.account-card.account-card.account-card .account-card__header { + padding: 0 !important; +} +.focusable.account-card.account-card.account-card .account-card__title, +.entry.account-card.account-card.account-card .account-card__title, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title, +.trends__item.account-card.account-card.account-card .account-card__title, +.story.account-card.account-card.account-card .account-card__title, +.account-card.account-card.account-card.account-card .account-card__title, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title, +.timeline-hint.account-card.account-card.account-card .account-card__title { + margin-bottom: 10px; + margin-top: -26px; +} +.focusable.account-card.account-card.account-card .account-card__title__avatar, +.entry.account-card.account-card.account-card .account-card__title__avatar, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title__avatar, +.trends__item.account-card.account-card.account-card .account-card__title__avatar, +.story.account-card.account-card.account-card .account-card__title__avatar, +.account-card.account-card.account-card.account-card .account-card__title__avatar, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title__avatar, +.timeline-hint.account-card.account-card.account-card .account-card__title__avatar { + padding-inline-end: 10px; + padding-bottom: 0; +} +.focusable.account-card.account-card.account-card .display-name, +.entry.account-card.account-card.account-card .display-name, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .display-name, +.trends__item.account-card.account-card.account-card .display-name, +.story.account-card.account-card.account-card .display-name, +.account-card.account-card.account-card.account-card .display-name, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .display-name, +.timeline-hint.account-card.account-card.account-card .display-name { + padding-bottom: 0; +} +.focusable.account-card.account-card.account-card .display-name__account, +.entry.account-card.account-card.account-card .display-name__account, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .display-name__account, +.trends__item.account-card.account-card.account-card .display-name__account, +.story.account-card.account-card.account-card .display-name__account, +.account-card.account-card.account-card.account-card .display-name__account, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .display-name__account, +.timeline-hint.account-card.account-card.account-card .display-name__account { + font-size: 0.9em !important; +} +.focusable.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.entry.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.trends__item.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.story.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.account-card.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.timeline-hint.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.focusable.account-card.account-card.account-card .account-card__title__avatar, +.entry.account-card.account-card.account-card .account-card__title__avatar, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title__avatar, +.trends__item.account-card.account-card.account-card .account-card__title__avatar, +.story.account-card.account-card.account-card .account-card__title__avatar, +.account-card.account-card.account-card.account-card .account-card__title__avatar, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title__avatar, +.timeline-hint.account-card.account-card.account-card .account-card__title__avatar { + width: 64px !important; + height: 64px !important; + background-size: 64px 64px !important; +} +.focusable.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.entry.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.trends__item.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.story.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.account-card.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.timeline-hint.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.focusable.account-card.account-card.account-card .account-card__title__avatar img, +.entry.account-card.account-card.account-card .account-card__title__avatar img, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title__avatar img, +.trends__item.account-card.account-card.account-card .account-card__title__avatar img, +.story.account-card.account-card.account-card .account-card__title__avatar img, +.account-card.account-card.account-card.account-card .account-card__title__avatar img, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title__avatar img, +.timeline-hint.account-card.account-card.account-card .account-card__title__avatar img { + width: inherit; + height: inherit; +} +.focusable.account-card.account-card.account-card .account-card__title, +.entry.account-card.account-card.account-card .account-card__title, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title, +.trends__item.account-card.account-card.account-card .account-card__title, +.story.account-card.account-card.account-card .account-card__title, +.account-card.account-card.account-card.account-card .account-card__title, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title, +.timeline-hint.account-card.account-card.account-card .account-card__title { + padding-inline-end: 15px; +} +.focusable.account-card.account-card.account-card .display-name bdi, +.entry.account-card.account-card.account-card .display-name bdi, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .display-name bdi, +.trends__item.account-card.account-card.account-card .display-name bdi, +.story.account-card.account-card.account-card .display-name bdi, +.account-card.account-card.account-card.account-card .display-name bdi, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .display-name bdi, +.timeline-hint.account-card.account-card.account-card .display-name bdi { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} +.focusable.account-card.account-card.account-card .account-card__bio, +.entry.account-card.account-card.account-card .account-card__bio, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__bio, +.trends__item.account-card.account-card.account-card .account-card__bio, +.story.account-card.account-card.account-card .account-card__bio, +.account-card.account-card.account-card.account-card .account-card__bio, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__bio, +.timeline-hint.account-card.account-card.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; +} +.focusable.account-card.account-card.account-card .account-card__bio::after, +.entry.account-card.account-card.account-card .account-card__bio::after, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__bio::after, +.trends__item.account-card.account-card.account-card .account-card__bio::after, +.story.account-card.account-card.account-card .account-card__bio::after, +.account-card.account-card.account-card.account-card .account-card__bio::after, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__bio::after, +.timeline-hint.account-card.account-card.account-card .account-card__bio::after { + content: unset !important; +} +.focusable.account-card.account-card.account-card .account-card__bio p, +.entry.account-card.account-card.account-card .account-card__bio p, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__bio p, +.trends__item.account-card.account-card.account-card .account-card__bio p, +.story.account-card.account-card.account-card .account-card__bio p, +.account-card.account-card.account-card.account-card .account-card__bio p, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__bio p, +.timeline-hint.account-card.account-card.account-card .account-card__bio p { + display: inline; +} +.focusable.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, +.entry.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, +.trends__item.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, +.story.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, +.account-card.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, +.timeline-hint.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before { + content: " · "; +} +.focusable.account-card.account-card.account-card .account-card__bio br, +.entry.account-card.account-card.account-card .account-card__bio br, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__bio br, +.trends__item.account-card.account-card.account-card .account-card__bio br, +.story.account-card.account-card.account-card .account-card__bio br, +.account-card.account-card.account-card.account-card .account-card__bio br, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__bio br, +.timeline-hint.account-card.account-card.account-card .account-card__bio br { + display: block; +} +.focusable.account-card.account-card.account-card .account-card__actions, +.entry.account-card.account-card.account-card .account-card__actions, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions, +.trends__item.account-card.account-card.account-card .account-card__actions, +.story.account-card.account-card.account-card .account-card__actions, +.account-card.account-card.account-card.account-card .account-card__actions, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions, +.timeline-hint.account-card.account-card.account-card .account-card__actions { + margin-top: auto !important; + display: unset !important; +} +.focusable.account-card.account-card.account-card .account-card__actions .account-card__counters, +.entry.account-card.account-card.account-card .account-card__actions .account-card__counters, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__counters, +.trends__item.account-card.account-card.account-card .account-card__actions .account-card__counters, +.story.account-card.account-card.account-card .account-card__actions .account-card__counters, +.account-card.account-card.account-card.account-card .account-card__actions .account-card__counters, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__counters, +.timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__counters { + display: flex; + gap: 1em; + padding-inline: 15px; +} +.focusable.account-card.account-card.account-card .account-card__actions .account-card__counters__item, +.entry.account-card.account-card.account-card .account-card__actions .account-card__counters__item, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__counters__item, +.trends__item.account-card.account-card.account-card .account-card__actions .account-card__counters__item, +.story.account-card.account-card.account-card .account-card__actions .account-card__counters__item, +.account-card.account-card.account-card.account-card .account-card__actions .account-card__counters__item, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__counters__item, +.timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__counters__item { + display: flex; + align-items: center; + font-size: 1em; +} +.focusable.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, +.entry.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, +.trends__item.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, +.story.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, +.account-card.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, +.timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small { + display: inline !important; + margin-inline-start: 0.4em; + font-size: 1em !important; +} +.focusable.account-card.account-card.account-card .account-card__actions .account-card__actions__button, +.entry.account-card.account-card.account-card .account-card__actions .account-card__actions__button, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__actions__button, +.trends__item.account-card.account-card.account-card .account-card__actions .account-card__actions__button, +.story.account-card.account-card.account-card .account-card__actions .account-card__actions__button, +.account-card.account-card.account-card.account-card .account-card__actions .account-card__actions__button, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__actions__button, +.timeline-hint.account-card.account-card.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); +} +.focusable.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.entry.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.trends__item.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.story.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.account-card.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.focusable.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, +.entry.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, +.trends__item.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, +.story.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, +.account-card.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, +.timeline-hint.account-card.account-card.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; +} +.focusable.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, +.entry.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, +.trends__item.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, +.story.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, +.account-card.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, +.timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty { + display: none; +} +.focusable.account-card.account-card.account-card::after, +.entry.account-card.account-card.account-card::after, +.statuses-grid__item .detailed-status.account-card.account-card.account-card::after, +.trends__item.account-card.account-card.account-card::after, +.story.account-card.account-card.account-card::after, +.account-card.account-card.account-card.account-card::after, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card::after, +.timeline-hint.account-card.account-card.account-card::after { + content: unset !important; +} +.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-direct .status__prepend { + display: none; +} +#mastodon .status__wrapper-direct .status__relative-time { + color: #8c8dff !important; +} +#mastodon .status, +#mastodon .scrollable .account { + padding-block: 15px; +} +#mastodon .status::before, +#mastodon .scrollable .account::before { + inset: -10px; + border-radius: var(--radius); +} +#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 .notification .status { + padding-top: 0; +} +#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 .status__prepend { + margin-bottom: -15px !important; +} +#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; + transition: transform 0.2s cubic-bezier(0, 0, 0, 1); +} +#mastodon .status__content .custom-emoji:hover { + transform: scale(1.2); +} +#mastodon .status__content ~ [style*="aspect-ratio"] { + aspect-ratio: unset !important; +} +#mastodon .status > .status__content .status__content__text:empty { + margin-top: -10px !important; +} +#mastodon .status__content__spoiler-link { + display: block; + 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 .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; + max-height: 80vh !important; +} +.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 .status-card__image { + position: relative; + aspect-ratio: unset !important; +} +.status-card.compact .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 .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 .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) { + height: unset !important; + width: unset !important; + pointer-events: all; +} +#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 i, +#mastodon .detailed-status__action-bar .icon-button i, +#mastodon .picture-in-picture__footer .icon-button i { + min-width: 22px; +} +#mastodon .status__action-bar .icon-button[aria-label]::after, +#mastodon .detailed-status__action-bar .icon-button[aria-label]::after, +#mastodon .picture-in-picture__footer .icon-button[aria-label]::after { + all: unset; + font-size: 12px; + margin-inline-start: 0.5em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +#mastodon .status__action-bar .icon-button .icon-button__counter, +#mastodon .detailed-status__action-bar .icon-button .icon-button__counter, +#mastodon .picture-in-picture__footer .icon-button .icon-button__counter { + 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 { + display: flex; + justify-content: center; + width: 100%; +} +#mastodon .status__action-bar.detailed-status__action-bar > div :not(i), +#mastodon .detailed-status__action-bar.detailed-status__action-bar > div :not(i), +#mastodon .picture-in-picture__footer.detailed-status__action-bar > div :not(i), +#mastodon .status__action-bar.picture-in-picture__footer > div :not(i), +#mastodon .detailed-status__action-bar.picture-in-picture__footer > div :not(i), +#mastodon .picture-in-picture__footer.picture-in-picture__footer > div :not(i) { + display: flex; + width: 100% !important; +} +#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 { + z-index: 101; + grid-column: 2; + border: 0 !important; + transition: margin 0.2s cubic-bezier(0, 0, 0, 1.1), top 0.4s; +} +#mastodon .column-header, +#mastodon .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 { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; +} +@media (min-width: 890px) { .layout-single-column .tabs-bar__wrapper, .layout-single-column .column-back-button--slim .column-back-button { - z-index: 101; - grid-column: 2; - border: 0 !important; - transition: margin 0.2s cubic-bezier(0, 0, 0, 1.1), top 0.4s; + width: 285px; + top: 0 !important; + top: var(--top) !important; + inset-inline: unset !important; + height: 50px !important; + margin-top: -50px !important; + margin-inline-start: 10px; + margin-top: 30px; + border-radius: var(--radius) var(--radius) !important; + box-shadow: 0 12px 12px -12px rgba(0,0,0,0.1); } - #mastodon .column-header, - #mastodon .column-inline-form { - font-weight: 600; - border-bottom-left-radius: 0 !important; - border-bottom-right-radius: 0 !important; + .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; } - #mastodon .column-header ~ .scrollable, - #mastodon .column-inline-form ~ .scrollable { - border-top-left-radius: 0 !important; - border-top-right-radius: 0 !important; + .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; + display: flex; + flex-direction: column; + border-radius: var(--radius); + overflow: hidden; + } + .layout-single-column .tabs-bar__wrapper .column-back-button, + .layout-single-column .column-back-button--slim .column-back-button .column-back-button { + background: none; + } + .layout-single-column .tabs-bar__wrapper .column-header, + .layout-single-column .column-back-button--slim .column-back-button .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: 15px; + } + .layout-single-column .tabs-bar__wrapper .column-header__buttons button .icon-with-badge, + .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button .icon-with-badge { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + } + .layout-single-column .tabs-bar__wrapper .column-header__buttons button .icon-with-badge .icon-with-badge__badge, + .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button .icon-with-badge .icon-with-badge__badge { + right: -2px; + left: unset; + top: unset; + bottom: 0px; + border-radius: var(--radius-round); + } + .layout-single-column .tabs-bar__wrapper .column-header__buttons button .column-header__icon, + .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button .column-header__icon { + margin-inline-end: 0; + } + .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::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: inherit; + z-index: -1; + transition: inset 0.1s; + border-radius: 100px; + pointer-events: none; + } + .layout-single-column .tabs-bar__wrapper .column-header__buttons button::after, + .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button::after { + position: absolute; + inset: 0; + background: var(--elevated-color); + border-radius: 100%; + } + .layout-single-column .tabs-bar__wrapper .column-header__buttons button.active::before, + .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button.active::before { + inset: -10px -300px; + } + .layout-single-column .tabs-bar__wrapper .announcements, + .layout-single-column .column-back-button--slim .column-back-button .announcements, + .layout-single-column .tabs-bar__wrapper .column-header__collapsible:not(.collapsed), + .layout-single-column .column-back-button--slim .column-back-button .column-header__collapsible:not(.collapsed) { + flex-direction: column-reverse; + align-items: flex-start; + animation: slideDowFade 0.3s backwards cubic-bezier(0, 1, 0, 1.2); + } + .layout-single-column .tabs-bar__wrapper .column-header__collapsible, + .layout-single-column .column-back-button--slim .column-back-button .column-header__collapsible { + transition: none; + } + .layout-single-column .tabs-bar__wrapper .collapsed, + .layout-single-column .column-back-button--slim .column-back-button .collapsed { + display: none; + } + .layout-single-column .tabs-bar__wrapper .announcements__container, + .layout-single-column .column-back-button--slim .column-back-button .announcements__container { + width: 100% !important; + } + .layout-single-column .tabs-bar__wrapper .announcements__mastodon, + .layout-single-column .column-back-button--slim .column-back-button .announcements__mastodon { + z-index: -1; + position: relative; } -@media (min-width: 890px) { - .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; - inset-inline: unset !important; - height: 50px !important; - margin-top: -50px !important; - margin-inline-start: 10px; - margin-top: 30px; - border-radius: var(--radius) var(--radius) !important; - box-shadow: 0 12px 12px -12px rgba(0,0,0,0.1); - } - .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; - display: flex; - flex-direction: column; - border-radius: var(--radius); - overflow: hidden; - } - .layout-single-column .tabs-bar__wrapper .column-back-button, - .layout-single-column .column-back-button--slim .column-back-button .column-back-button { - background: none; - } - .layout-single-column .tabs-bar__wrapper .column-header, - .layout-single-column .column-back-button--slim .column-back-button .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: 15px; - } - .layout-single-column .tabs-bar__wrapper .column-header__buttons button .icon-with-badge, - .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button .icon-with-badge { - position: absolute; - inset: 0; - display: flex; - align-items: center; - justify-content: center; - } - .layout-single-column .tabs-bar__wrapper .column-header__buttons button .icon-with-badge .icon-with-badge__badge, - .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button .icon-with-badge .icon-with-badge__badge { - right: -2px; - left: unset; - top: unset; - bottom: 0px; - border-radius: var(--radius-round); - } - .layout-single-column .tabs-bar__wrapper .column-header__buttons button .column-header__icon, - .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button .column-header__icon { - margin-inline-end: 0; - } - .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::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: inherit; - z-index: -1; - transition: inset 0.1s; - border-radius: 100px; - pointer-events: none; - } - .layout-single-column .tabs-bar__wrapper .column-header__buttons button::after, - .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button::after { - position: absolute; - inset: 0; - background: var(--elevated-color); - border-radius: 100%; - } - .layout-single-column .tabs-bar__wrapper .column-header__buttons button.active::before, - .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button.active::before { - inset: -10px -300px; - } - .layout-single-column .tabs-bar__wrapper .announcements, - .layout-single-column .column-back-button--slim .column-back-button .announcements, - .layout-single-column .tabs-bar__wrapper .column-header__collapsible:not(.collapsed), - .layout-single-column .column-back-button--slim .column-back-button .column-header__collapsible:not(.collapsed) { - flex-direction: column-reverse; - align-items: flex-start; - animation: slideDowFade 0.3s backwards cubic-bezier(0, 1, 0, 1.2); - } - .layout-single-column .tabs-bar__wrapper .column-header__collapsible, - .layout-single-column .column-back-button--slim .column-back-button .column-header__collapsible { - transition: none; - } - .layout-single-column .tabs-bar__wrapper .collapsed, - .layout-single-column .column-back-button--slim .column-back-button .collapsed { - display: none; - } - .layout-single-column .tabs-bar__wrapper .announcements__container, - .layout-single-column .column-back-button--slim .column-back-button .announcements__container { - width: 100% !important; - } - .layout-single-column .tabs-bar__wrapper .announcements__mastodon, - .layout-single-column .column-back-button--slim .column-back-button .announcements__mastodon { - z-index: -1; - position: relative; - } } @media (min-width: 890px) and (min-width: 1320px) { - .layout-single-column .tabs-bar__wrapper, - .layout-single-column .column-back-button--slim .column-back-button { - margin-inline-start: 25px; - } + .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; - margin-inline-start: 10px; - } + .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; + margin-inline-start: 10px; + } } @media (min-width: 890px) { - .layout-single-column .column-back-button--slim { - margin-left: auto !important; - order: -1; - } - .layout-single-column .column-back-button--slim > .column-back-button { - margin-top: 0 !important; - top: unset !important; - } + .layout-single-column .column-back-button--slim { + margin-left: auto !important; + order: -1; + } + .layout-single-column .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; - } + .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 { + border-radius: var(--radius); + margin-bottom: 1em; +} +#mastodon .column-settings__section { + margin-bottom: 4px; + padding-inline: 4px; +} +#mastodon .column-select__control { + border-radius: var(--radius); +} +#mastodon .setting-toggle { + display: flex; + align-items: center; + margin-bottom: 14px; + position: relative; + padding: 0.7em; + background: var(--elevated-color); + margin-bottom: 2px !important; + overflow: hidden; +} +#mastodon .setting-toggle:first-child { + border-top-left-radius: var(--radius); + border-top-right-radius: var(--radius); +} +#mastodon .setting-toggle:last-child { + border-bottom-left-radius: var(--radius); + border-bottom-right-radius: var(--radius); +} +#mastodon .setting-toggle .react-toggle { + order: 2; +} +#mastodon .setting-toggle .setting-toggle__label { + margin-bottom: 0 !important; + flex-grow: 1; + width: 0; +} +#mastodon .setting-toggle::before { + content: ""; + position: absolute; + inset: 0; + background: var(--hover-color); + opacity: 0; + transition: opacity 0.2s; + pointer-events: none; +} +#mastodon .setting-toggle:hover::before, +#mastodon .setting-toggle:focus-within::before { + opacity: 1; +} +#mastodon .navigation-panel { + box-sizing: border-box; + height: calc(100vh - var(--top) - 50px + var(--radius)); + padding-bottom: 10px; + margin: 0; + margin-top: calc(0px - var(--radius)); + padding-top: calc(10px + var(--radius)); +} +#mastodon .navigation-panel > hr { + display: none; +} +#mastodon .navigation-panel hr { + margin-inline: 15px; } - #mastodon .column-settings__row, - #mastodon .column-settings__hashtags { - border-radius: var(--radius); - margin-bottom: 1em; - } - #mastodon .column-settings__section { - margin-bottom: 4px; - padding-inline: 4px; - } - #mastodon .column-select__control { - border-radius: var(--radius); - } - #mastodon .setting-toggle { - display: flex; - align-items: center; - margin-bottom: 14px; - position: relative; - padding: 0.7em; - background: var(--elevated-color); - margin-bottom: 2px !important; - overflow: hidden; - } - #mastodon .setting-toggle:first-child { - border-top-left-radius: var(--radius); - border-top-right-radius: var(--radius); - } - #mastodon .setting-toggle:last-child { - border-bottom-left-radius: var(--radius); - border-bottom-right-radius: var(--radius); - } - #mastodon .setting-toggle .react-toggle { - order: 2; - } - #mastodon .setting-toggle .setting-toggle__label { - margin-bottom: 0 !important; - flex-grow: 1; - width: 0; - } - #mastodon .setting-toggle::before { - content: ""; - position: absolute; - inset: 0; - background: var(--hover-color); - opacity: 0; - transition: opacity 0.2s; - pointer-events: none; - } - #mastodon .setting-toggle:hover::before, - #mastodon .setting-toggle:focus-within::before { - opacity: 1; - } - #mastodon .navigation-panel { - box-sizing: border-box; - height: calc(100vh - var(--top) - 50px + var(--radius)); - padding-bottom: 10px; - margin: 0; - margin-top: calc(0px - var(--radius)); - padding-top: calc(10px + var(--radius)); - } - #mastodon .navigation-panel > hr { - display: none; - } - #mastodon .navigation-panel hr { - margin-inline: 15px; - } @media (min-width: 1175px) { - #mastodon .navigation-panel { - padding-top: calc(var(--radius) + 10px); - margin-top: calc(50px - var(--radius)); - } - #mastodon .navigation-panel .navigation-panel__logo { - display: none; - } - #mastodon .navigation-panel [href="/settings/preferences"] { - display: none !important; - } -} -@media (min-width: 890px) { - .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; - position: relative; - box-sizing: border-box; - opacity: 0.9; - overflow: hidden; - background: none !important; - } - .column-link .column-link__icon, - .column-header > button .column-header__icon { - margin-inline-end: 1em !important; - font-size: 16px !important; - } - .column-link::before { - content: "" !important; - position: absolute; - border-radius: 100px; - width: unset !important; - height: unset !important; - inset: 0px 0px !important; - opacity: 0 !important; - background-color: rgba(150,150,150,0.1); - transition: opacity 0.2s; - } - .column-link.active { - opacity: 1 !important; - font-weight: 600; - } - .column-link:hover:before, - .column-link:focus:before { - opacity: 1 !important; - } - .column-link[href="/lists"] + div hr { - display: none; - } - .column-link[href="/lists"] + div .column-link { - margin-bottom: 2px; - } - .column-link[href="/lists"] + div .column-link i { - opacity: 0.2; - } -} -@media (min-width: 890px) { - #mastodon .getting-started__trends { - display: unset !important; - } -} - #mastodon .trends__item { - display: flex !important; + #mastodon .navigation-panel { + padding-top: calc(var(--radius) + 10px); + margin-top: calc(50px - var(--radius)); } - #mastodon .trends__item__name a::before { - content: ""; - position: absolute; - inset: 0; - } - #mastodon .trends__item__current { + #mastodon .navigation-panel .navigation-panel__logo { display: none; } - #mastodon .trends__item__sparkline { - overflow: visible !important; - pointer-events: none; + #mastodon .navigation-panel [href="/settings/preferences"] { + display: none !important; } - #mastodon .trends__item__sparkline svg { - overflow: visible !important; - } - #mastodon .trends__item__sparkline path:first-child { - filter: blur(10px); - } - #mastodon .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 { - transform: scaleX(-1); - } - .getting-started, - #mastodon .column.column[data-column="getting-started"] > .optionally-scrollable.optionally-scrollable { - position: relative; - padding: 5px 10px !important; - } - .getting-started .getting-started__wrapper, - #mastodon .column.column[data-column="getting-started"] > .optionally-scrollable.optionally-scrollable .getting-started__wrapper { - background: none; - } - .getting-started .getting-started__wrapper a, - #mastodon .column.column[data-column="getting-started"] > .optionally-scrollable.optionally-scrollable .getting-started__wrapper a, - .getting-started .getting-started__wrapper .column-subheading, - #mastodon .column.column[data-column="getting-started"] > .optionally-scrollable.optionally-scrollable .getting-started__wrapper .column-subheading { - border: 0 !important; - padding: 20px; - background: none; - } - .getting-started .getting-started__footer, - #mastodon .column.column[data-column="getting-started"] > .optionally-scrollable.optionally-scrollable .getting-started__footer { - padding-inline: 20px; - } - .getting-started .getting-started__footer a span, - #mastodon .column.column[data-column="getting-started"] > .optionally-scrollable.optionally-scrollable .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 { - background: none !important; - border: 0; - margin-inline-end: 280px; - padding-top: 12px; - position: static; - } - .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; - } } -@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 { - 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) !important; - } - #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 !important; - justify-content: center !important; - max-width: 55px; - min-width: max-content; - } - #mastodon .status__action-bar, - #mastodon .detailed-status__action-bar, - #mastodon .picture-in-picture__footer { - flex-wrap: wrap; - } - #mastodon .columns-area--mobile > .column > div > div { - animation: fadeUp 0.4s; - } - #mastodon .columns-area--mobile > .column > .column-header__wrapper { - display: none; - } - #mastodon .column-header { - border-inline: 0; - } - .ui__header { - z-index: 101; - border-bottom: 0; - box-sizing: content-box; - flex-wrap: wrap; - min-height: 55px; - height: auto; - position: relative; - padding-block: 10px; - box-sizing: border-box; - gap: 10px; - border: 0 !important; - } - .ui__header::after { - content: ""; - position: absolute; - inset-inline-end: 54px; - top: 100%; - width: var(--radius); - height: var(--radius); - background: inherit; - mask: radial-gradient(var(--radius) at 0px var(--radius), rgba(0,0,0,0) 100%, #000); - -webkit-mask: radial-gradient(var(--radius) at 0px var(--radius), rgba(0,0,0,0) 100%, #000); - z-index: 9999; - } - .rtl .ui__header::after { - transform: scaleX(-1); - } - .ui__header .ui__header__logo { - padding-block: 5px !important; - } - .ui__header .ui__header__links { - background: inherit; - } - .ui__header [href="/search"] { - margin-inline-end: 55px; - } - .ui__header [href^="/@"], - .ui__header a.permalink[href] { - position: fixed; - inset-inline-end: 1px; - width: 53px; - display: flex; - justify-content: center; - background: inherit; - } - .ui__header [href="/publish"] { - position: fixed; - bottom: 15px; - inset-inline-end: 15px; - border-radius: 100px !important; - height: 60px; - width: 60px; - font-size: 0; - box-shadow: var(--shadow-low); - background: inherit; - -webkit-user-drag: none; - -khtml-user-drag: none; - -moz-user-drag: none; - -o-user-drag: none; - user-drag: none; - animation: scaleIn 0.2s cubic-bezier(0, 0, 0, 1.1); - } - .ui__header [href="/publish"]::before { - content: ""; - font: normal normal normal 14px/1 FontAwesome; - position: absolute; - inset: 0; - display: flex; - justify-content: center; - align-items: center; - font-size: 24px; - } - .ui__header [href="/publish"]:active { - animation: rainbow 4s infinite linear !important; - } - #mastodon .tabs-bar__wrapper { - top: 0; - } - #mastodon .column-back-button.column-back-button { - border-radius: 0 !important; - } - #mastodon .columns-area__panels { - justify-content: flex-start; - max-width: 100% !important; - flex-wrap: nowrap !important; - } - #mastodon .columns-area__panels__main { - padding: 0 !important; - max-width: unset; - border-start-end-radius: var(--radius); - overflow: clip !important; - margin-top: 1px !important; - } - #mastodon .columns-area__panels__main > .columns-area--mobile { - overflow: visible !important; - } - .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 { - padding-top: 14px !important; - } - #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__action-bar { - margin-bottom: -5px; - } - #mastodon .status__action-bar .icon-button { - margin: 0 !important; - justify-content: center; - } - #mastodon .status__action-bar > .icon-button:first-child { - margin-inline-start: -8px !important; - } - #mastodon .icon-button:after { - content: unset !important; - } - #mastodon .navigation-panel { - margin-top: -200px; - padding-top: 200px; - height: calc(100vh + 200px - 55px); - border: 0; - margin-inline-start: 1px; - padding-bottom: 90px; - } - #mastodon .notification__filter-bar + .scrollable { - border-radius: var(--radius) var(--radius) 0 0 !important; - } - #mastodon .modal-root__modal .status.light { - overflow: hidden !important; - padding-inline-start: 70px !important; - } - #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 .columns-area__panels__main .compose-form { - flex-grow: 1; - display: flex; - flex-direction: column; - overflow: hidden; - } - #mastodon .columns-area__panels__main .compose-form__autosuggest-wrapper { - overflow: hidden; - } - #mastodon .columns-area__panels__main .compose-form__autosuggest-wrapper, - #mastodon .columns-area__panels__main .autosuggest-textarea, - #mastodon .columns-area__panels__main .autosuggest-textarea label, - #mastodon .columns-area__panels__main .autosuggest-textarea textarea { - display: flex; - flex-direction: column; - flex-grow: 1; - } - #mastodon .about.about.about { - padding-inline: 10px !important; - } - #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; - } +.column-link { + border: 0; } - .admin-wrapper .sidebar-wrapper { - overflow: visible !important; - width: unset; - } - .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; - } - .admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .fa { - margin-inline-end: 1em !important; - } - .admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li { - overflow: hidden; - margin-inline: 15px !important; - } - .admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li > a:not(.selected) { - background: none; - } - .admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li a { +@media (min-width: 890px) { + .column-link { + flex-grow: 100 !important; display: flex !important; - align-items: center; - white-space: unset; - } - .admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li.selected { - margin: 6px; - border-radius: var(--radius); - } - .admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li.selected > a.selected { - font-weight: 600; - color: unset; + align-items: center !important; + align-content: center; + max-height: 3.3em; + min-height: 2.7em !important; + padding-block: 0; position: relative; - overflow: visible; - border-radius: 0 !important; - border: 0; + box-sizing: border-box; + opacity: 0.9; + overflow: hidden; + background: none !important; } - .admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li.selected > a.selected::after { - content: ""; + .column-link .column-link__icon, + .column-header > button .column-header__icon { + margin-inline-end: 1em !important; + font-size: 16px !important; + } + .column-link::before { + content: "" !important; 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; - 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; - 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__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__column .fields-group { - border-radius: 0 !important; - margin: 0 !important; - } - .admin-wrapper .fields-row__column .fields-group > .with_block_label { - display: flex; - flex-direction: column; - height: 100%; - } - .admin-wrapper .fields-row__column .fields-group > .with_block_label > .label_input { - flex-grow: 1; - } - .admin-wrapper .fields-row__column .fields-group > .with_block_label > .label_input > textarea { - min-height: 100%; - } - .admin-wrapper .fields-row__column > :last-child { - flex-grow: 1; - align-items: flex-start; - border: 0; - } - .admin-wrapper .fields-row__column > :not(:first-child):not(:last-child) { - 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 { - 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; - 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; + border-radius: 100px; + width: unset !important; + height: unset !important; + inset: 0px 0px !important; + opacity: 0 !important; + background-color: rgba(150,150,150,0.1); 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; + .column-link.active { + opacity: 1 !important; + font-weight: 600; } - .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; - 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 { + .column-link:hover:before, + .column-link:focus:before { 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; + .column-link[href="/lists"] + div hr { + display: none; } - .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; + .column-link[href="/lists"] + div .column-link { + margin-bottom: 2px; } - .layout-multiple-columns #mastodon .columns-area { - overflow: auto hidden !important; - padding: 0; + .column-link[href="/lists"] + div .column-link i { + opacity: 0.2; } - .layout-multiple-columns #mastodon .columns-area .scrollable:not(.scrollable--flex) { +} +@media (min-width: 890px) { + #mastodon .getting-started__trends { + display: unset !important; + } +} +#mastodon .trends__item { + display: flex !important; +} +#mastodon .trends__item__name a::before { + content: ""; + position: absolute; + inset: 0; +} +#mastodon .trends__item__current { + display: none; +} +#mastodon .trends__item__sparkline { + overflow: visible !important; + pointer-events: none; +} +#mastodon .trends__item__sparkline svg { + overflow: visible !important; +} +#mastodon .trends__item__sparkline path:first-child { + filter: blur(10px); +} +#mastodon .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 { + transform: scaleX(-1); +} +.getting-started, +#mastodon .column.column[data-column="getting-started"] > .optionally-scrollable.optionally-scrollable { + position: relative; + padding: 5px 10px !important; +} +.getting-started .getting-started__wrapper, +#mastodon .column.column[data-column="getting-started"] > .optionally-scrollable.optionally-scrollable .getting-started__wrapper { + background: none; +} +.getting-started .getting-started__wrapper a, +#mastodon .column.column[data-column="getting-started"] > .optionally-scrollable.optionally-scrollable .getting-started__wrapper a, +.getting-started .getting-started__wrapper .column-subheading, +#mastodon .column.column[data-column="getting-started"] > .optionally-scrollable.optionally-scrollable .getting-started__wrapper .column-subheading { + border: 0 !important; + padding: 20px; + background: none; +} +.getting-started .getting-started__footer, +#mastodon .column.column[data-column="getting-started"] > .optionally-scrollable.optionally-scrollable .getting-started__footer { + padding-inline: 20px; +} +.getting-started .getting-started__footer a span, +#mastodon .column.column[data-column="getting-started"] > .optionally-scrollable.optionally-scrollable .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 { + background: none !important; + border: 0; + margin-inline-end: 280px; + padding-top: 12px; + position: static; + } + .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; + } +} +@media (max-width: 889px) { + #mastodon .scrollable:not(.scrollable--flex) { padding: 0px !important; padding-bottom: 40vh !important; } - .layout-multiple-columns #mastodon .columns-area .scrollable:not(.scrollable--flex)::before { + #mastodon .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 { + #mastodon .scrollable:not(.scrollable--flex) .account-timeline__header { 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 { + #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; } - .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 { + #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; } - .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 { + #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; } - .layout-multiple-columns #mastodon .columns-area [class*="explore__"] > * { + #mastodon [class*="explore__"] > * { border-radius: var(--radius) !important; } - .layout-multiple-columns #mastodon .columns-area .detailed-status__wrapper { + #mastodon .detailed-status__wrapper { margin: 0 !important; } - .layout-multiple-columns #mastodon .columns-area .status__action-bar { + #mastodon .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) { + #mastodon .status__action-bar :not(i):not(.status__action-bar-spacer) { display: flex; flex-grow: 9999 !important; justify-content: center !important; max-width: 55px; min-width: max-content; } - .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 { + #mastodon .status__action-bar, + #mastodon .detailed-status__action-bar, + #mastodon .picture-in-picture__footer { flex-wrap: wrap; } - .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 { + #mastodon .columns-area--mobile > .column > div > div { + animation: fadeUp 0.4s; + } + #mastodon .columns-area--mobile > .column > .column-header__wrapper { + display: none; + } + #mastodon .column-header { + border-inline: 0; + } + .ui__header { + z-index: 101; + border-bottom: 0; + box-sizing: content-box; + flex-wrap: wrap; + min-height: 55px; + height: auto; + position: relative; + padding-block: 10px; + box-sizing: border-box; + gap: 10px; + border: 0 !important; + } + .ui__header::after { + content: ""; + position: absolute; + inset-inline-end: 54px; + top: 100%; + width: var(--radius); + height: var(--radius); + background: inherit; + mask: radial-gradient(var(--radius) at 0px var(--radius), rgba(0,0,0,0) 100%, #000); + -webkit-mask: radial-gradient(var(--radius) at 0px var(--radius), rgba(0,0,0,0) 100%, #000); + z-index: 9999; + } + .rtl .ui__header::after { + transform: scaleX(-1); + } + .ui__header .ui__header__logo { + padding-block: 5px !important; + } + .ui__header .ui__header__links { + background: inherit; + } + .ui__header [href="/search"] { + margin-inline-end: 55px; + } + .ui__header [href^="/@"], + .ui__header a.permalink[href] { + position: fixed; + inset-inline-end: 1px; + width: 53px; + display: flex; + justify-content: center; + background: inherit; + } + .ui__header [href="/publish"] { + position: fixed; + bottom: 15px; + inset-inline-end: 15px; + border-radius: 100px !important; + height: 60px; + width: 60px; + font-size: 0; + box-shadow: var(--shadow-low); + background: inherit; + -webkit-user-drag: none; + -khtml-user-drag: none; + -moz-user-drag: none; + -o-user-drag: none; + user-drag: none; + animation: scaleIn 0.2s cubic-bezier(0, 0, 0, 1.1); + } + .ui__header [href="/publish"]::before { + content: ""; + font: normal normal normal 14px/1 FontAwesome; + position: absolute; + inset: 0; + display: flex; + justify-content: center; + align-items: center; + font-size: 24px; + } + .ui__header [href="/publish"]:active { + animation: rainbow 4s infinite linear !important; + } + #mastodon .tabs-bar__wrapper { + top: 0; + } + #mastodon .column-back-button.column-back-button { border-radius: 0 !important; } - .layout-multiple-columns #mastodon .columns-area .icon-button:after { - content: unset !important; + #mastodon .columns-area__panels { + justify-content: flex-start; + max-width: 100% !important; + flex-wrap: nowrap !important; } - .layout-multiple-columns #mastodon .columns-area > div { - border: 0 !important; + #mastodon .columns-area__panels__main { padding: 0 !important; + max-width: unset; + border-start-end-radius: var(--radius); + overflow: clip !important; + margin-top: 1px !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; - } - .layout-multiple-columns #mastodon .columns-area .drawer .drawer__header { - border-radius: var(--radius-round); - 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 { + #mastodon .columns-area__panels__main > .columns-area--mobile { 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; - padding-top: 20px; - height: calc(100% + 20px); + .is-composing .columns-area__panels__main { + padding-bottom: 40px !important; } - .layout-multiple-columns #mastodon .columns-area .drawer .drawer__inner__mastodon { - margin-inline: -6px; - margin-inline-end: -4px; - z-index: -1; + #mastodon .columns-area__panels__main .scrollable, + #mastodon .columns-area__panels__main .account__header__image, + #mastodon .columns-area__panels__main > div { + border-radius: 0 !important; } - .layout-multiple-columns #mastodon .columns-area .search { - margin-inline: 10px; + #mastodon .dismissable-banner { + margin: 0; + padding-left: 4px; } - .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; + #mastodon .status { + padding-top: 14px !important; } - .layout-multiple-columns #mastodon .columns-area .drawer__inner.darker { - border-radius: var(--radius-round) var(--radius-round) 0 0; + #mastodon .status .status__avatar { + width: 42px !important; + min-width: 45px !important; + height: 45px !important; + background-size: 45px !important; } - .layout-multiple-columns #mastodon .columns-area .getting-started__trends { - padding: 0px 20px; + #mastodon .status .status__avatar > div { + width: 100% !important; + height: 100% !important; + background-size: cover !important; } - .layout-multiple-columns #mastodon .columns-area .status { - padding-bottom: 10px !important; + #mastodon .status__action-bar { + margin-bottom: -5px; } - .layout-multiple-columns #mastodon .columns-area .detailed-status .status__content { - font-size: 1.3em; + #mastodon .status__action-bar .icon-button { + margin: 0 !important; + justify-content: center; } - .modal-root__container { - animation: bounceIn 0.7s !important; - } \ No newline at end of file + #mastodon .status__action-bar > .icon-button:first-child { + margin-inline-start: -8px !important; + } + #mastodon .icon-button:after { + content: unset !important; + } + #mastodon .navigation-panel { + margin-top: -200px; + padding-top: 200px; + height: calc(100vh + 200px - 55px); + border: 0; + margin-inline-start: 1px; + padding-bottom: 90px; + } + #mastodon .notification__filter-bar + .scrollable { + border-radius: var(--radius) var(--radius) 0 0 !important; + } + #mastodon .modal-root__modal .status.light { + overflow: hidden !important; + padding-inline-start: 70px !important; + } + #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 .columns-area__panels__main .compose-form { + flex-grow: 1; + display: flex; + flex-direction: column; + overflow: hidden; + } + #mastodon .columns-area__panels__main .compose-form__autosuggest-wrapper { + overflow: hidden; + } + #mastodon .columns-area__panels__main .compose-form__autosuggest-wrapper, + #mastodon .columns-area__panels__main .autosuggest-textarea, + #mastodon .columns-area__panels__main .autosuggest-textarea label, + #mastodon .columns-area__panels__main .autosuggest-textarea textarea { + display: flex; + flex-direction: column; + flex-grow: 1; + } + #mastodon .about.about.about { + padding-inline: 10px !important; + } + #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; + } +} +.admin-wrapper .sidebar-wrapper { + overflow: visible !important; + width: unset; +} +.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; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .fa { + margin-inline-end: 1em !important; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li { + overflow: hidden; + margin-inline: 15px !important; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li > a:not(.selected) { + background: none; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li a { + display: flex !important; + align-items: center; + white-space: unset; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li.selected { + margin: 6px; + border-radius: var(--radius); +} +.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; + 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; + 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__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__column .fields-group { + border-radius: 0 !important; + margin: 0 !important; +} +.admin-wrapper .fields-row__column .fields-group > .with_block_label { + display: flex; + flex-direction: column; + height: 100%; +} +.admin-wrapper .fields-row__column .fields-group > .with_block_label > .label_input { + flex-grow: 1; +} +.admin-wrapper .fields-row__column .fields-group > .with_block_label > .label_input > textarea { + min-height: 100%; +} +.admin-wrapper .fields-row__column > :last-child { + flex-grow: 1; + align-items: flex-start; + border: 0; +} +.admin-wrapper .fields-row__column > :not(:first-child):not(:last-child) { + 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 { + 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; + 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; + 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 { + 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) !important; +} +.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 !important; + justify-content: center !important; + max-width: 55px; + min-width: max-content; +} +.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 .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; +} +.layout-multiple-columns #mastodon .columns-area .drawer .drawer__header { + border-radius: var(--radius-round); + 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 { + 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; + padding-top: 20px; + 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 .drawer__inner:not(.darker), +.layout-multiple-columns #mastodon .columns-area .drawer__inner__mastodon { + background-color: transparent; + border: 0 !important; +} +.layout-multiple-columns #mastodon .columns-area .drawer__inner.darker { + border-radius: var(--radius-round) var(--radius-round) 0 0; +} +.layout-multiple-columns #mastodon .columns-area .getting-started__trends { + padding: 0px 20px; +} +.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; +} +.modal-root__container { + animation: bounceIn 0.7s !important; +} \ No newline at end of file diff --git a/modern.user.css b/modern.user.css index 39bb94b..658e474 100644 --- a/modern.user.css +++ b/modern.user.css @@ -13,19 +13,17 @@ //////////////////////////////////////////////////////////////////// -/* Update 1.6.7 -- Glitch 4.1.5+, fix detailed note shadow -- tweak mobile button padding -- make more of the post clickable on glitch-soc -- fix white-on-white audio player -- fix dismissable banner padding on mobile -- tweak search popup -- other tweaks and more fixes (and maybe accidental breakage of other things who knooowwwwsssss) weeeeeeeeeeeeeeeeeeeeeeeee +/* Update 1.6.8 +Glitch-soc +- fix unclickable timestamp +Vanilla 4.2.0: +- Fix border in nav +- Fix empty space in vertical videos */ /* ==UserStyle== @name Mastodon Modern -@version 1.6.7 +@version 1.6.8 @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 @@ -1491,6 +1489,9 @@ transform scale(1.2) } } + & ~ [style*="aspect-ratio"] { + aspect-ratio unset !important + } } .status > .status__content { .status__content__text { @@ -1970,7 +1971,9 @@ display none !important } } - + /.column-link { + border 0 + } @media (min-width mobileW) { /.column-link { flex-grow 100 !important @@ -2994,6 +2997,7 @@ .status__relative-time { margin-right 5px + z-index 2 } .reactions-bar {