@import 'glitch-fixes.css'; @import 'index'; :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); } :not(body):not(.scrollable)::-webkit-scrollbar { width: 6px; margin-block: 10px; } :not(body):not(.scrollable)::-webkit-scrollbar-track { background: none; } :not(body):not(.scrollable)::-webkit-scrollbar-thumb { border-radius: 100px; transition: background-color 0.2s; } :not(body):not(.scrollable):not(:hover)::-webkit-scrollbar-thumb { background: none; padding-block: 10px; } .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) { body:not(.reduce-motion) .load-more, body:not(.reduce-motion) .setting-toggle, body:not(.reduce-motion) .column-header__back-button, body:not(.reduce-motion) .column-back-button, body:not(.reduce-motion) .trends__item, body:not(.reduce-motion) .story, body:not(.reduce-motion) .account__avatar, body:not(.reduce-motion) .button, body:not(.reduce-motion) .media-gallery__item, body:not(.reduce-motion) .column-link, body:not(.reduce-motion) select, body:not(.reduce-motion) .status-card, body:not(.reduce-motion) .audio-player, body:not(.reduce-motion) .account { transition: transform 0.4s cubic-bezier(0, 0, 0, 3), background 0.2s, opacity 0.2s !important; } body:not(.reduce-motion) .load-more:active, body:not(.reduce-motion) .setting-toggle:active, body:not(.reduce-motion) .column-header__back-button:active, body:not(.reduce-motion) .column-back-button:active, body:not(.reduce-motion) .trends__item:active, body:not(.reduce-motion) .story:active, body:not(.reduce-motion) .account__avatar:active, body:not(.reduce-motion) .button:active, body:not(.reduce-motion) .media-gallery__item:active, body:not(.reduce-motion) .column-link:active, body:not(.reduce-motion) select:active, body:not(.reduce-motion) .status-card:active, body:not(.reduce-motion) .audio-player:active, body:not(.reduce-motion) .account:active, body:not(.reduce-motion) .load-more:focus-visible, body:not(.reduce-motion) .setting-toggle:focus-visible, body:not(.reduce-motion) .column-header__back-button:focus-visible, body:not(.reduce-motion) .column-back-button:focus-visible, body:not(.reduce-motion) .trends__item:focus-visible, body:not(.reduce-motion) .story:focus-visible, body:not(.reduce-motion) .account__avatar:focus-visible, body:not(.reduce-motion) .button:focus-visible, body:not(.reduce-motion) .media-gallery__item:focus-visible, body:not(.reduce-motion) .column-link:focus-visible, body:not(.reduce-motion) select:focus-visible, body:not(.reduce-motion) .status-card:focus-visible, body:not(.reduce-motion) .audio-player:focus-visible, body:not(.reduce-motion) .account:focus-visible { transform: scale(0.99); transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important; } body:not(.reduce-motion) .column-header__button, body:not(.reduce-motion) .column-header__buttons > .column-header__back-button, body:not(.reduce-motion) .react-toggle-track, body:not(.reduce-motion) .icon-button, body:not(.reduce-motion) .floating-action-button { transition: transform 0.4s cubic-bezier(0, 0, 0, 4) !important; } body:not(.reduce-motion) .column-header__button:active, body:not(.reduce-motion) .column-header__buttons > .column-header__back-button:active, body:not(.reduce-motion) .react-toggle-track:active, body:not(.reduce-motion) .icon-button:active, body:not(.reduce-motion) .floating-action-button:active { transform: scale(0.95); transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important; } body:not(.reduce-motion) .status__content__spoiler-link span { display: inline-block; transition: transform 0.4s cubic-bezier(0, 0, 0, 4) !important; } body:not(.reduce-motion) .status__content__spoiler-link:active span { transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important; transform: translateY(1px); } .reduce-motion * { animation-duration: 0s !important; } @-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, .dropdown-animation { border-radius: var(--radius); animation: scaleIn 0.2s cubic-bezier(0, 0, 0, 1.1); } .dropdown-menu__container__list { overflow: hidden auto; border-radius: var(--radius); max-height: 70vh; } .dropdown-menu__item { overflow: hidden; } .dropdown-menu__item a { padding: 0.7em 1em !important; transition: background-color 0.2s, color 0.2s; min-width: 150px; } .dropdown-menu__separator { margin: 0 !important; } .interaction-modal { border-radius: var(--radius); overflow-y: auto; } .interaction-modal__choices { gap: 10px; display: flex; flex-wrap: wrap; } .interaction-modal__choices .interaction-modal__choices__choice { max-height: 50vh; overflow-y: auto; border: 1px solid var(--border-color); flex: 1 0 270px; border-radius: var(--radius); transition: background 0.2s; position: relative; } .compare-history-modal { margin-block: 20px; } .compare-history-modal__container { overflow: hidden auto; } .columns-area__panels { --top: 5px; } @media (min-width: 1175px) { .columns-area__panels { padding-inline: 10px; padding-top: var(--top); box-sizing: border-box; transition: padding 0.4s; --top: 20px; } } @media (min-width: 1320px) { .columns-area__panels { --top: 30px; } } #mastodon { overflow: clip; } #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; height: 100%; } #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: 10px; 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; min-height: unset; overflow: unset; } #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; } #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; } } @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 .column, .columns-area__panels__main .columns-area { overflow: clip !important; border-radius: var(--radius) var(--radius) 0 0 !important; } .columns-area__panels__main .column > :first-child, .columns-area__panels__main .columns-area > :first-child { border-radius: var(--radius) var(--radius) 0 0 !important; } } .columns-area__panels__main > div { grid-row: 1; } .columns-area__panels__main :not(.scrollable--flex) > .scrollable { padding-bottom: 40vh !important; } #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 .search-results__section__header { margin: 0px -10px 10px; color: unset; background: none; padding-inline: 20px; font-weight: 600; } #mastodon .search-results__section { border: 0; margin-bottom: 20px; } #mastodon .dismissable-banner, #mastodon .follow_requests-unlocked_explanation { display: flex; align-items: center; border: 0 !important; margin: -10px !important; margin-bottom: 10px !important; border-radius: 0px !important; padding: 15px !important; isolation: isolate; overflow: hidden; } .dismissable-banner__message { padding-block: 10px; order: -1; } #mastodon .dismissable-banner .dismissable-banner__action, #mastodon .follow_requests-unlocked_explanation .dismissable-banner__action { position: static; } #mastodon .dismissable-banner .scrollable:not(.scrollable--flex), #mastodon .follow_requests-unlocked_explanation .scrollable:not(.scrollable--flex) { padding: 0px !important; padding-bottom: 40vh !important; } #mastodon .dismissable-banner .scrollable:not(.scrollable--flex)::before, #mastodon .follow_requests-unlocked_explanation .scrollable:not(.scrollable--flex)::before { content: ""; position: absolute; inset: 0; background-color: inherit; z-index: -1; } #mastodon .dismissable-banner .scrollable:not(.scrollable--flex) .account-timeline__header, #mastodon .follow_requests-unlocked_explanation .scrollable:not(.scrollable--flex) .account-timeline__header { margin: 0px !important; } #mastodon .dismissable-banner .focusable, #mastodon .follow_requests-unlocked_explanation .focusable, #mastodon .dismissable-banner .entry, #mastodon .follow_requests-unlocked_explanation .entry, #mastodon .dismissable-banner .statuses-grid__item .detailed-status, #mastodon .follow_requests-unlocked_explanation .statuses-grid__item .detailed-status, #mastodon .dismissable-banner .trends__item, #mastodon .follow_requests-unlocked_explanation .trends__item, #mastodon .dismissable-banner .story, #mastodon .follow_requests-unlocked_explanation .story, #mastodon .dismissable-banner .account-card, #mastodon .follow_requests-unlocked_explanation .account-card, #mastodon .dismissable-banner .scrollable :not(.focusable) > .account, #mastodon .follow_requests-unlocked_explanation .scrollable :not(.focusable) > .account, #mastodon .dismissable-banner .timeline-hint, #mastodon .follow_requests-unlocked_explanation .timeline-hint { border-radius: 0; } #mastodon .dismissable-banner .focusable::before, #mastodon .follow_requests-unlocked_explanation .focusable::before, #mastodon .dismissable-banner .entry::before, #mastodon .follow_requests-unlocked_explanation .entry::before, #mastodon .dismissable-banner .statuses-grid__item .detailed-status::before, #mastodon .follow_requests-unlocked_explanation .statuses-grid__item .detailed-status::before, #mastodon .dismissable-banner .trends__item::before, #mastodon .follow_requests-unlocked_explanation .trends__item::before, #mastodon .dismissable-banner .story::before, #mastodon .follow_requests-unlocked_explanation .story::before, #mastodon .dismissable-banner .account-card::before, #mastodon .follow_requests-unlocked_explanation .account-card::before, #mastodon .dismissable-banner .scrollable :not(.focusable) > .account::before, #mastodon .follow_requests-unlocked_explanation .scrollable :not(.focusable) > .account::before, #mastodon .dismissable-banner .timeline-hint::before, #mastodon .follow_requests-unlocked_explanation .timeline-hint::before { border-radius: 0 !important; } #mastodon .dismissable-banner .focusable::after, #mastodon .follow_requests-unlocked_explanation .focusable::after, #mastodon .dismissable-banner .entry::after, #mastodon .follow_requests-unlocked_explanation .entry::after, #mastodon .dismissable-banner .statuses-grid__item .detailed-status::after, #mastodon .follow_requests-unlocked_explanation .statuses-grid__item .detailed-status::after, #mastodon .dismissable-banner .trends__item::after, #mastodon .follow_requests-unlocked_explanation .trends__item::after, #mastodon .dismissable-banner .story::after, #mastodon .follow_requests-unlocked_explanation .story::after, #mastodon .dismissable-banner .account-card::after, #mastodon .follow_requests-unlocked_explanation .account-card::after, #mastodon .dismissable-banner .scrollable :not(.focusable) > .account::after, #mastodon .follow_requests-unlocked_explanation .scrollable :not(.focusable) > .account::after, #mastodon .dismissable-banner .timeline-hint::after, #mastodon .follow_requests-unlocked_explanation .timeline-hint::after { inset-inline: 0 !important; } #mastodon .dismissable-banner [class*="explore__"] > *, #mastodon .follow_requests-unlocked_explanation [class*="explore__"] > * { border-radius: var(--radius); } #mastodon .dismissable-banner .detailed-status__wrapper, #mastodon .follow_requests-unlocked_explanation .detailed-status__wrapper { margin: 0 !important; } #mastodon .dismissable-banner .status__action-bar, #mastodon .follow_requests-unlocked_explanation .status__action-bar { margin-bottom: 0px; gap: 0; margin-inline-end: 0 !important; } #mastodon .dismissable-banner .status__action-bar :not(i):not(.status__action-bar-spacer), #mastodon .follow_requests-unlocked_explanation .status__action-bar :not(i):not(.status__action-bar-spacer) { display: flex; flex-grow: 9999; justify-content: center !important; max-width: 55px; min-width: max-content; } #mastodon .dismissable-banner .status__action-bar > .icon-button:first-child, #mastodon .follow_requests-unlocked_explanation .status__action-bar > .icon-button:first-child { margin-inline-start: -8px !important; } #mastodon .dismissable-banner .status__action-bar, #mastodon .follow_requests-unlocked_explanation .status__action-bar, #mastodon .dismissable-banner .detailed-status__action-bar, #mastodon .follow_requests-unlocked_explanation .detailed-status__action-bar, #mastodon .dismissable-banner .picture-in-picture__footer, #mastodon .follow_requests-unlocked_explanation .picture-in-picture__footer { flex-wrap: wrap; } @media (max-width: 890px) { #mastodon .dismissable-banner, #mastodon .follow_requests-unlocked_explanation { margin: 0 !important; } } #mastodon .column:not(.scrollable--flex) > .dismissable-banner { border-radius: var(--radius) var(--radius) 0 0 !important; margin: 0; } #mastodon .column:not(.scrollable--flex) > .dismissable-banner ~ .scrollable { border-radius: 0 !important; } #mastodon .scrollable > .dismissable-banner { margin: 0px !important; margin-bottom: 0 !important; } #mastodon .empty-column-indicator { contain: unset; padding: 10px !important; color: unset; opacity: 0.8; font-size: 1.2em; line-height: 2; } #mastodon .empty-column-indicator a { display: block; font-weight: 700; font-size: 1.1em; } #mastodon .scrollable--flex .account-timeline__header { margin: 0 !important; } #mastodon .item-list { background-color: inherit; border-radius: var(--radius); } #mastodon .account-timeline__header { margin: -10px; margin-bottom: 10px; background-color: inherit; border-radius: var(--radius) !important; animation: 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; } @media (max-width: 890px) { #mastodon .account-timeline__header .account__header__bar { padding-inline: 15px; } } #mastodon .account-timeline__header .account__header__bar .account__header__tabs { overflow: visible !important; position: relative; align-items: flex-end; padding: 0; height: unset !important; margin-top: -55px !important; isolation: isolate; } #mastodon .account-timeline__header .account__header__bar .account__header__tabs::before { content: ""; position: absolute; top: 0; left: -20px; right: -20px; bottom: -100px; backdrop-filter: blur(40px); filter: brightness(1.1); pointer-events: none; opacity: 0.7; z-index: -1; 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; margin-top: 20px; } #mastodon .account-timeline__header .account__header__bar .avatar .account-role { position: absolute; bottom: 0; left: 110%; border-radius: var(--radius); } #mastodon .account-timeline__header .account__header__bar .account__avatar { border: 0; box-shadow: var(--shadow); background: none; background-size: cover !important; } #mastodon .account-timeline__header .account__header__tabs__name { margin-bottom: 0; padding: 0; margin-top: 16px; } #mastodon .account-timeline__header .account__header__tabs__name h1 { display: flex; flex-wrap: wrap; white-space: unset; gap: 0 0.4em; font-weight: 600; } #mastodon .account-timeline__header .account__header__badges { margin-top: 10px; } #mastodon .account-timeline__header .account__header__badges span { font-weight: 600; } #mastodon .account-timeline__header .account__header__bio { padding: 0; margin: 0; } #mastodon .account-timeline__header .account__header__bio > * { padding-inline: 0; } #mastodon .account-timeline__header .account__header__content { padding-top: 0; } #mastodon .account-timeline__header .account__header__extra { margin-top: 1em; } #mastodon :not(.admin-account-bio) > div > .account__header__fields, #mastodon .account__header__account-note { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 20px; 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; } #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; } #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:not(:first-child):not(:nth-child(2)) { background: none; position: relative; z-index: 2; } .with-modals #mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) { border: 0 !important; } #mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) a, #mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) button { background: none; border-radius: 0 !important; } #mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) a span, #mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) button span { font-weight: 400; opacity: 0.7; transition: opacity 0.2s; } #mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) a.active span, #mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) button.active span { font-weight: 700; opacity: 1; } #mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) a:hover span, #mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) button:hover span, #mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) a:active span, #mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) button:active span { opacity: 1 !important; } #mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) a::before, #mastodon .account__section-headline:not(:first-child):not(:nth-child(2)) button::before { border-color: transparent transparent var(--border-color); } #mastodon .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: hidden; 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):not(:last-child:not(:only-child))::after, .entry:not(.detailed-status__wrapper):not(.status__wrapper):not(:last-child:not(:only-child))::after, .statuses-grid__item .detailed-status:not(.detailed-status__wrapper):not(.status__wrapper):not(:last-child:not(:only-child))::after, .trends__item:not(.detailed-status__wrapper):not(.status__wrapper):not(:last-child:not(:only-child))::after, .story:not(.detailed-status__wrapper):not(.status__wrapper):not(:last-child:not(:only-child))::after, .account-card:not(.detailed-status__wrapper):not(.status__wrapper):not(:last-child:not(:only-child))::after, .scrollable :not(.focusable) > .account:not(.detailed-status__wrapper):not(.status__wrapper):not(:last-child:not(:only-child))::after, .timeline-hint:not(.detailed-status__wrapper):not(.status__wrapper):not(:last-child:not(:only-child))::after { content: ""; position: absolute; bottom: 0px; inset-inline: var(--radius); border-top: 1px solid var(--border-color); pointer-events: none; } .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, #mastodon .scrollable .account { padding-block: 15px; } #mastodon .status::before, #mastodon .scrollable .account::before { inset: -10px; border-radius: var(--radius); } #mastodon .status.light { overflow: hidden !important; } #mastodon .status.light .boost-modal__status-header { display: flow-root !important; } #mastodon .account__relationship:empty { display: none; } #mastodon .status__prepend { white-space: nowrap; } #mastodon .status__prepend > span { display: flex; flex-grow: 1; gap: 0.3em; align-items: center; } #mastodon .status__prepend > span > a { overflow: hidden; text-overflow: ellipsis; } #mastodon .notification .status { padding-top: 0; } #mastodon .notification .status .status__info { margin-top: 10px !important; } #mastodon .notification .status .status__content ~ .media-gallery, #mastodon .notification .status .status__content ~ [style*="aspect-ratio:"] { height: 60px; width: 100px; margin: 0 !important; opacity: 0.5; } #mastodon .notification .status .status__content ~ [style*="aspect-ratio:"] .video-player__controls { display: none; } #mastodon .status__prepend, #mastodon .notification__message { display: flex; 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; } .custom-emoji { transition: transform 0.4s cubic-bezier(0, 0.7, 0, 1); } .custom-emoji:hover { transform: scale(1.3); } #mastodon .status__content ~ [style*="aspect-ratio"] { max-height: 80vh; } #mastodon .status > .status__content .status__content__text:empty { margin-top: -5px !important; } #mastodon .status__content__spoiler-link { display: 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 .detailed-status__wrapper-direct .status__prepend, #mastodon .status-direct .status__prepend, #mastodon .status__wrapper-direct .status__prepend, #mastodon .conversation .status__prepend { position: absolute; font-size: 0; } #mastodon .detailed-status__wrapper-direct .status__content, #mastodon .status-direct .status__content, #mastodon .status__wrapper-direct .status__content, #mastodon .conversation .status__content { position: relative !important; background: var(--elevated-color); padding: 8px 12px; padding: 0.7em 0.9em !important; border-radius: var(--radius-round); border-top-left-radius: 6px; box-sizing: border-box; margin-top: 5px !important; margin-bottom: 0; overflow: hidden !important; max-width: max-content; } #mastodon .detailed-status__wrapper-direct .status__content .media-gallery, #mastodon .status-direct .status__content .media-gallery, #mastodon .status__wrapper-direct .status__content .media-gallery, #mastodon .conversation .status__content .media-gallery { width: 999px; max-width: 100% !important; } .detailed-status__wrapper-direct .status__content { font-size: 17px; } #mastodon .detailed-status__wrapper-direct .fa-at, #mastodon .detailed-status__wrapper-direct .status__visibility-icon { font-family: inherit; font-weight: 600; color: var(--accent, #8c8dff); width: auto !important; } #mastodon .detailed-status__wrapper-direct .fa-at::before, #mastodon .detailed-status__wrapper-direct .status__visibility-icon::before { font-family: FontAwesome !important; } #mastodon .detailed-status__wrapper-direct .fa-at::after, #mastodon .detailed-status__wrapper-direct .status__visibility-icon::after { content: attr(title); margin-left: 0.4em; } #mastodon .status-direct .fa-at, #mastodon .status-direct .status__visibility-icon { color: var(--accent, #8c8dff); } #mastodon .status-direct .status__info .status__relative-time { height: auto; color: var(--accent, #8c8dff); } #mastodon .status-direct.status--in-thread .status__info { align-items: center; gap: 10px; } #mastodon .status-direct.status--in-thread .status__info > span { width: 0; flex-grow: 1; } #mastodon .status-direct.status--in-thread .status__info> span, #mastodon .status-direct.status--in-thread .status__display-name { overflow: visible !important; } #mastodon .status-direct.status--in-thread .status__display-name { overflow: hidden; width: 0; flex-grow: 1; } #mastodon .status-direct.status--in-thread .status__avatar { height: auto; margin-bottom: -100px; } #mastodon .status-direct.status--in-thread .status__avatar .account__avatar { position: absolute; top: 0 !important; height: 46px !important; width: 46px !important; } #mastodon .status-direct.status--in-thread .display-name * { display: inline; margin-right: 0.2em; } #mastodon .media-gallery, #mastodon .video-player, #mastodon .status-card.horizontal.interactive, #mastodon .status-card, #mastodon .audio-player, #mastodon .picture-in-picture-placeholder { box-shadow: var(--shadow-low); border-radius: var(--radius); margin-top: 10px !important; margin-bottom: 10px !important; animation: scaleIn 0.4s; max-width: unset !important; } #mastodon .status .media-gallery__item { max-height: 80vh; } .status-card { line-height: 1; } .status-card:not(.horizontal) { border: 1px solid var(--border-color) !important; } .status-card__content { padding: 12px !important; margin-block: auto; } .status-card .status-card__image { border-radius: 0; width: 90px; min-height: 100%; } .status-card .status-card__image img { border-radius: 0; height: 100%; } .status-card.compact:not(.interactive) .status-card__image { position: relative; aspect-ratio: unset !important; } .status-card.compact:not(.interactive) .status-card__image img { position: absolute; inset: 0; } .status-card__host { font-size: 0.85em; line-height: 1.5; margin: 0; } .status-card__title { font-size: 1em; margin-top: 0.2em; margin-bottom: 0; line-height: 1.4; } .status-card__description { line-height: 1.4 !important; margin: 0 !important; } .status-card__author { margin-top: 0.4em; font-size: 0.85em; } .status-card:hover { background-color: var(--hover-color); } .audio-player .video-player__seek { margin: var(--radius); } #mastodon .hashtag-bar { margin-top: 10px; } #mastodon .hashtag-bar a, #mastodon .hashtag-bar button { font-size: 0.9em; padding: 0.2em 0.6em; color: inherit; opacity: 0.9; color: var(--accent, #8c8dff); transition: opacity 0.2s; } #mastodon .hashtag-bar a { position: relative; border-radius: var(--radius); background: var(--elevated-color); } #mastodon .hashtag-bar a::after { content: ""; position: absolute; inset: 0; background: var(--elevated-color); border-radius: inherit; opacity: 0; transition: opacity 0.2s; } #mastodon .hashtag-bar a:hover, #mastodon .hashtag-bar a:focus { opacity: 1; } #mastodon .hashtag-bar a:hover::after, #mastodon .hashtag-bar a:focus::after { opacity: 1; } #mastodon .hashtag-bar button { padding-block: 0; } #mastodon .detailed-status__wrapper { border-radius: var(--radius); overflow: clip; } #mastodon .detailed-status { border: 0 !important; padding: 15px !important; padding-bottom: 5px !important; } #mastodon .detailed-status .status__prepend { padding-top: 0 !important; margin-bottom: 1em !important; } #mastodon .detailed-status .detailed-status__display-name { margin-bottom: 10px; } #mastodon div:empty + div > .detailed-status__wrapper { margin-top: 0 !important; } #mastodon .detailed-status__wrapper, #mastodon .detailed-status, #mastodon .picture-in-picture { box-shadow: var(--shadow); } #mastodon .detailed-status__wrapper .media-gallery, #mastodon .detailed-status .media-gallery, #mastodon .picture-in-picture .media-gallery, #mastodon .detailed-status__wrapper .video-player, #mastodon .detailed-status .video-player, #mastodon .picture-in-picture .video-player, #mastodon .detailed-status__wrapper .status-card.horizontal.interactive, #mastodon .detailed-status .status-card.horizontal.interactive, #mastodon .picture-in-picture .status-card.horizontal.interactive, #mastodon .detailed-status__wrapper .status-card, #mastodon .detailed-status .status-card, #mastodon .picture-in-picture .status-card, #mastodon .detailed-status__wrapper .audio-player, #mastodon .detailed-status .audio-player, #mastodon .picture-in-picture .audio-player, #mastodon .detailed-status__wrapper .picture-in-picture-placeholder, #mastodon .detailed-status .picture-in-picture-placeholder, #mastodon .picture-in-picture .picture-in-picture-placeholder { margin-inline: 0 !important; max-height: unset !important; } #mastodon .detailed-status__wrapper .status__content, #mastodon .detailed-status .status__content, #mastodon .picture-in-picture .status__content { min-height: unset !important; } #mastodon .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 { 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; } .layout-single-column .tabs-bar__wrapper .announcements, .layout-single-column .column-back-button--slim .column-back-button .announcements, .layout-single-column .tabs-bar__wrapper .column-header__collapsible:not(.collapsed), .layout-single-column .column-back-button--slim .column-back-button .column-header__collapsible:not(.collapsed) { flex-direction: column-reverse; align-items: flex-start; border: 0; animation: slideDowFade 0.3s backwards cubic-bezier(0, 1, 0, 1.2); } .layout-single-column .tabs-bar__wrapper .column-header__collapsible, .layout-single-column .column-back-button--slim .column-back-button .column-header__collapsible { transition: none; } .layout-single-column .tabs-bar__wrapper .collapsed, .layout-single-column .column-back-button--slim .column-back-button .collapsed { display: none; } .layout-single-column .tabs-bar__wrapper .announcements__container, .layout-single-column .column-back-button--slim .column-back-button .announcements__container { width: 100% !important; } .layout-single-column .tabs-bar__wrapper .announcements__mastodon, .layout-single-column .column-back-button--slim .column-back-button .announcements__mastodon { display: block; z-index: -1; position: relative; } .layout-single-column .tabs-bar__wrapper .announcements__pagination, .layout-single-column .column-back-button--slim .column-back-button .announcements__pagination { bottom: unset; padding-block: 0; } @media (min-width: 890px) { .layout-single-column .tabs-bar__wrapper, .layout-single-column .column-back-button--slim .column-back-button { 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 .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; } } @media (min-width: 890px) and (min-width: 1320px) { .layout-single-column .tabs-bar__wrapper, .layout-single-column .column-back-button--slim .column-back-button { margin-inline-start: 25px; } } @media (min-width: 890px) and (max-width: 1174px) { .layout-single-column .tabs-bar__wrapper, .layout-single-column .column-back-button--slim .column-back-button { width: 265px; margin-top: -60px !important; top: 10px !important; 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; } } @media (min-width: 890px) and (max-width: 1174px) { .layout-single-column .column-back-button--slim > .column-back-button { margin-top: -55px !important; top: unset !important; } } #mastodon .column-settings__row, #mastodon .column-settings__hashtags { 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 .column-link, #mastodon .navigation-panel .navigation-panel__logo hr { display: none !important; } #mastodon .navigation-panel .switch-to-advanced { border-radius: var(--radius); margin-top: 0; } #mastodon .navigation-panel [href="/settings/preferences"] { display: none !important; } } .column-link { border: 0; } .icon-with-badge__badge { display: flex !important; align-items: center; justify-content: center; padding: 0 0.3em !important; width: 2em; height: 2em; min-width: max-content; border-radius: 2em; font-weight: 600; font-size: 0.6em !important; top: -10px; box-sizing: border-box; } @media (min-width: 890px) { .column-link { flex-grow: 100 !important; display: flex !important; align-items: center !important; align-content: center; max-height: 3.3em; min-height: 2.7em !important; padding-block: 0; border-radius: 100px; position: relative; box-sizing: border-box; opacity: 0.9; overflow: hidden; background: none !important; } .column-link .column-link__icon, .column-header > button .column-header__icon { margin-inline-end: 0.7em !important; font-size: 16px !important; } .column-link::before { content: "" !important; position: absolute; 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 .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; } #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); } #mastodon .detailed-status__wrapper { margin: 0 !important; } #mastodon .status__action-bar { margin-bottom: 0px; gap: 0; margin-inline-end: 0 !important; } #mastodon .status__action-bar :not(i):not(.status__action-bar-spacer) { display: flex; flex-grow: 9999; justify-content: center !important; max-width: 55px; min-width: max-content; } #mastodon .status__action-bar > .icon-button:first-child { margin-inline-start: -8px !important; } #mastodon .status__action-bar, #mastodon .detailed-status__action-bar, #mastodon .picture-in-picture__footer { flex-wrap: wrap; } #mastodon .columns-area--mobile > .column > .column-header__wrapper { display: none; } #mastodon .column-header { border-inline: 0; } .ui__header { border-bottom: 0; box-sizing: content-box; min-height: 55px; height: auto; position: relative; box-sizing: border-box; gap: 10px; border: 0 !important; overflow: visible; } .ui__header::after { content: ""; position: absolute; inset-inline-end: 54px; top: 100%; width: var(--radius); height: var(--radius); background: inherit; mask: radial-gradient(var(--radius) at 0px var(--radius), rgba(0,0,0,0) 100%, #000); -webkit-mask: radial-gradient(var(--radius) at 0px var(--radius), rgba(0,0,0,0) 100%, #000); z-index: 9999; } .rtl .ui__header::after { transform: scaleX(-1); } .ui__header .ui__header__logo { padding-block: 5px !important; } .ui__header .ui__header__links { min-width: max-content; position: sticky; inset-inline-end: 50px; background: inherit; } :has(body) .ui__header .ui__header__links { right: 0; } .ui__header [href="/search"] { margin-inline-end: 5px; } .ui__header [href="/publish"] { position: fixed; bottom: 15px; inset-inline-end: 15px; border-radius: 100px !important; border-radius: var(--radius) !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; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; animation: scaleIn 0.2s cubic-bezier(0, 0, 0, 1.1); visibility: visible; } .ui__header [href="/publish"]::before { content: ""; font: normal normal normal 14px/1 FontAwesome; position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; font-size: 24px; background: transparent; border-radius: inherit; transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important; } .ui__header [href="/publish"]:active { animation: rainbow 8s infinite linear !important; } .ui__header [href="/publish"]:active::before { background: #ee82ee; transform: scale(0.9); transition: background 1s, transform 0.4s cubic-bezier(0, 0.5, 0, 1) !important; } body:not(:has(.column-link.active)) .ui__header [href="/publish"]:not(:focus) { transform: scale(0.97) !important; opacity: 0 !important; pointer-events: none; } .ui__header [href^="/@"], .ui__header a.permalink[href] { position: fixed; inset-inline-end: 1px; width: 53px; display: flex; justify-content: center; background: inherit; } :has(body) .ui__header [href^="/@"], :has(body) .ui__header a.permalink[href] { position: static !important; width: unset; } #mastodon .tabs-bar__wrapper { top: 0; background: none; z-index: 200; } #mastodon .column-back-button.column-back-button { border-radius: 0 !important; } #mastodon:has(*) [href="/publish"] { bottom: 70px !important; } #mastodon:has(*) .columns-area__panels { flex-direction: column; } #mastodon:has(*) .columns-area__panels__main { width: 100%; border-radius: 0 !important; margin: 0 !important; border: 0 !important; } #mastodon:has(*) .tabs-bar__wrapper { transition: none !important; } #mastodon:has(*):has(.column-header__buttons:empty) .tabs-bar__wrapper { margin-top: -50px; margin-bottom: 2px; height: 48px; } #mastodon:has(*) .columns-area__panels__pane--navigational { display: contents; } #mastodon:has(*) .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { position: relative !important; inset: unset !important; order: -1; width: unset; height: auto; white-space: nowrap; } #mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel { flex-direction: row; margin: 0; padding: 0; padding: 0 8px; height: 5em; gap: 10px; border-block: 1px solid; overflow: scroll hidden; align-items: center; } #mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel::-webkit-scrollbar { display: none; } #mastodon:has(*) .columns-area__panels__pane--navigational hr { display: none; } #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__name > span, #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__sparkline { display: none; } #mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel__legal, #mastodon:has(*) .columns-area__panels__pane--navigational h4, #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item, #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__name { all: unset; display: contents !important; } #mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel__legal::before, #mastodon:has(*) .columns-area__panels__pane--navigational h4::before, #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item::before, #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__name::before, #mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel__legal::after, #mastodon:has(*) .columns-area__panels__pane--navigational h4::after, #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item::after, #mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__name::after { content: unset; } #mastodon:has(*) .columns-area__panels__pane--navigational h4 a span::after { content: ":" !important; } #mastodon:has(*) .columns-area__panels__pane--navigational:has(.getting-started__trends):has(.navigation-panel__sign-in-banner) .flex-spacer { border-right: 1px solid var(--border-color); height: 50%; margin: 10px; } #mastodon:has(*) .columns-area__panels__pane--navigational:has(.getting-started__trends):has(.navigation-panel__sign-in-banner) .getting-started__trends { all: unset; display: contents !important; } #mastodon:has(*) .columns-area__panels__pane--navigational:has(.getting-started__trends) .trends__item:last-child a { position: relative; z-index: 3; } #mastodon:has(*) .columns-area__panels__pane--navigational a, #mastodon:has(*) .columns-area__panels__pane--navigational h4 > span { position: relative; overflow: hidden; border-radius: var(--radius); padding: 0.8em 1em; font-weight: 600; font-size: 1.1em; text-align: center; min-width: max-content; transition: padding 0.2s; } #mastodon:has(*) .columns-area__panels__pane--navigational a::before, #mastodon:has(*) .columns-area__panels__pane--navigational h4 > span::before { content: ""; position: absolute; inset: 0; background: currentcolor; opacity: 0; border-radius: inherit; transition: inset 0.4s cubic-bezier(0, 0, 0, 1.2), opacity 0.2s; } #mastodon:has(*) .columns-area__panels__pane--navigational a i, #mastodon:has(*) .columns-area__panels__pane--navigational h4 > span i { font-size: 1em; width: auto; margin-right: 0; } #mastodon:has(*) .columns-area__panels__pane--navigational a.active, #mastodon:has(*) .columns-area__panels__pane--navigational h4 > span.active { padding-inline: 1.2em; position: relative; } #mastodon:has(*) .columns-area__panels__pane--navigational a.active::before, #mastodon:has(*) .columns-area__panels__pane--navigational h4 > span.active::before { inset: 0 !important; opacity: 0.1; } #mastodon:has(*) .columns-area__panels__pane--navigational a > span:not(:first-child), #mastodon:has(*) .columns-area__panels__pane--navigational h4 > span > span:not(:first-child) { margin-left: 0.7em; } #mastodon:has(*) .columns-area__panels__pane--navigational span { display: unset; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .columns-area__panels__main { margin-top: 2px !important; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header { z-index: 200; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header::before, #mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header::after { content: ""; position: fixed; bottom: 0; inset-inline: 0; background: inherit; z-index: 200; height: 60px; filter: brightness(1.2); visibility: visible; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .navigation-panel { padding-inline: 14px; border-top: none; margin-top: -10px; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .navigation-panel a { font-size: 1em; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .navigation-panel::after { content: ""; display: block; position: sticky; right: -20px; min-width: 150px; height: 100%; margin-left: -50px; background: inherit; mask: linear-gradient(to right, transparent, #000); -webkit-mask: linear-gradient(to right, transparent, #000); pointer-events: none; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column { min-height: 100vh; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link { margin-inline: -0.2em; padding-inline: 0.7em; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] { position: fixed !important; display: flex; flex-direction: column; bottom: 4px; z-index: 200; font-size: 1.7em; margin: 0 !important; padding: 0 !important; height: 50px; align-items: center; justify-content: center; width: 19%; left: 0%; transform: translateX(10%); box-sizing: border-box; padding: 1px !important; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home']::before { inset-inline: 6px; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] span { margin: 0; font-size: 0; line-height: 1; opacity: 0; transition: font-size 0.4s, margin 0.7s, opacity 0.2s; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] i { transform: scale(0.9); transition: transform 0.1s; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] { position: fixed !important; display: flex; flex-direction: column; bottom: 4px; z-index: 200; font-size: 1.7em; margin: 0 !important; padding: 0 !important; height: 50px; align-items: center; justify-content: center; width: 19%; left: 19.25%; transform: translateX(10%); box-sizing: border-box; padding: 1px !important; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications']::before { inset-inline: 6px; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] span { margin: 0; font-size: 0; line-height: 1; opacity: 0; transition: font-size 0.4s, margin 0.7s, opacity 0.2s; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] i { transform: scale(0.9); transition: transform 0.1s; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] { position: fixed !important; display: flex; flex-direction: column; bottom: 4px; z-index: 200; font-size: 1.7em; margin: 0 !important; padding: 0 !important; height: 50px; align-items: center; justify-content: center; width: 19%; left: 38.5%; transform: translateX(10%); box-sizing: border-box; padding: 1px !important; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore']::before { inset-inline: 6px; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] span { margin: 0; font-size: 0; line-height: 1; opacity: 0; transition: font-size 0.4s, margin 0.7s, opacity 0.2s; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] i { transform: scale(0.9); transition: transform 0.1s; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] { position: fixed !important; display: flex; flex-direction: column; bottom: 4px; z-index: 200; font-size: 1.7em; margin: 0 !important; padding: 0 !important; height: 50px; align-items: center; justify-content: center; width: 19%; left: 57.75%; transform: translateX(10%); box-sizing: border-box; padding: 1px !important; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local']::before { inset-inline: 6px; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] span { margin: 0; font-size: 0; line-height: 1; opacity: 0; transition: font-size 0.4s, margin 0.7s, opacity 0.2s; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] i { transform: scale(0.9); transition: transform 0.1s; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] { position: fixed !important; display: flex; flex-direction: column; bottom: 4px; z-index: 200; font-size: 1.7em; margin: 0 !important; padding: 0 !important; height: 50px; align-items: center; justify-content: center; width: 19%; left: 77%; transform: translateX(10%); box-sizing: border-box; padding: 1px !important; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists']::before { inset-inline: 6px; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] span { margin: 0; font-size: 0; line-height: 1; opacity: 0; transition: font-size 0.4s, margin 0.7s, opacity 0.2s; } #mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] i { transform: scale(0.9); transition: transform 0.1s; } #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .columns-area__panels__pane__inner { position: sticky !important; top: 10px !important; z-index: 200; } #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper { position: static; height: auto; z-index: unset; margin: 0; top: 0; inset-inline: 0; visibility: hidden; } #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper #tabs-bar__portal, #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper .column-header__wrapper, #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper .column-header { height: 100%; } #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper .column-header__buttons { visibility: visible; height: auto; width: 100%; } #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper .column-header__buttons button { height: 50px; width: 100% !important; text-align: left; transform: none; } #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper .column-header__buttons button::after { content: attr(title); margin-left: 1em; font-weight: 600; font-size: 0.9em; } #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper .column-header__back-button, #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper .column-header > button { display: none; } #mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper .column-header__collapsible { visibility: visible; } #mastodon .explore__search-header, #mastodon .search input { background: var(--elevated-color); } #mastodon .columns-area__panels { justify-content: flex-start; max-width: 100% !important; flex-wrap: nowrap !important; } #mastodon .columns-area__panels__main { padding: 0 !important; max-width: unset; border-start-end-radius: var(--radius); overflow: clip !important; flex-grow: 1; margin-top: 1px; } #mastodon .columns-area__panels__main > .columns-area--mobile { overflow: visible !important; } .is-composing .columns-area__panels__main { padding-bottom: 40px !important; } #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 .column { flex-grow: 1; overflow: clip; } #mastodon .dismissable-banner { margin: 0; padding-left: 4px; } #mastodon .status { padding-top: 14px !important; } #mastodon .status .status__avatar { width: 42px !important; min-width: 45px !important; height: 45px !important; background-size: 45px !important; } #mastodon .status .status__avatar > div { width: 100% !important; height: 100% !important; background-size: cover !important; } #mastodon .status::before { content: unset; } #mastodon .status__action-bar { margin-bottom: -5px; } #mastodon .status__action-bar .icon-button { margin: 0 !important; justify-content: center; } #mastodon .icon-button:after { content: unset !important; } #mastodon .navigation-panel { margin-top: -200px; padding-top: 200px; height: calc(100vh + 200px - 55px); border: 0; margin-inline-start: 1px; padding-bottom: 90px; } #mastodon .columns-area { padding-bottom: 0 !important; overflow: hidden !important; } #mastodon .getting-started { padding: 20px; padding-bottom: 60px; } #mastodon .getting-started__wrapper { flex-grow: 1; overflow: visible !important; } #mastodon .compose-form::before { content: ""; position: absolute; inset: 0; background: var(--elevated-color); z-index: -1; } #mastodon .about.about.about { padding-inline: 10px !important; } #mastodon .about.about.about .account { margin-top: 0; } #mastodon .about.about.about .about__header__hero, #mastodon .about.about.about .about__section.active { margin-inline: -11px !important; width: unset; border-radius: 0; } #mastodon .about.about.about .about__section.active { margin-block: 20px !important; } #mastodon .about.about.about .about__section { margin-bottom: 0; border-bottom: 1px solid; } } .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 !important; margin-bottom: 0 !important; } .admin-wrapper .flash-message, .admin-wrapper .applications-list__item, .admin-wrapper .filters-list__item { border-radius: var(--radius); border: 0; overflow: clip; } .admin-wrapper .fields-row { margin-inline: 0; border-radius: var(--radius); overflow: clip; padding-top: 0; gap: 2px; display: flex; flex-wrap: wrap; } .admin-wrapper .fields-group:not(.fields-row__column), .admin-wrapper .fields-row { margin-bottom: 1em !important; } .admin-wrapper .fields-row > .fields-row__column { max-width: unset; width: 300px; border-radius: 0 !important; display: flex; flex-direction: column; flex-grow: 1; margin: 0 !important; } .admin-wrapper .fields-row > .fields-row__column .fields-group { border-radius: 0 !important; margin: 0 !important; } .admin-wrapper .fields-row > .fields-row__column .fields-group > .with_block_label { display: flex; flex-direction: column; height: 100%; } .admin-wrapper .fields-row > .fields-row__column .fields-group > .with_block_label > .label_input { flex-grow: 1; } .admin-wrapper .fields-row > .fields-row__column .fields-group > .with_block_label > .label_input > textarea { min-height: 100%; } .admin-wrapper .fields-row > .fields-row__column > :last-child { flex-grow: 1; align-items: flex-start; border: 0; } .admin-wrapper .fields-row > .fields-row__column > :not(:first-child):not(:last-child) { padding-block: 0.5em !important; margin-block: -3px; } .admin-wrapper :not(.fields-row__column) > .fields-group, .admin-wrapper .fields-row > *, .admin-wrapper .label_input > ul, .admin-wrapper .label_input__wrapper > ul, .admin-wrapper .radio_buttons > ul, .admin-wrapper .with_block_label.radio_buttons .label_input { 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); } .layout-multiple-columns #mastodon .columns-area .detailed-status__wrapper { margin: 0 !important; } .layout-multiple-columns #mastodon .columns-area .status__action-bar { margin-bottom: 0px; gap: 0; margin-inline-end: 0 !important; } .layout-multiple-columns #mastodon .columns-area .status__action-bar :not(i):not(.status__action-bar-spacer) { display: flex; flex-grow: 9999; justify-content: center !important; max-width: 55px; min-width: max-content; } .layout-multiple-columns #mastodon .columns-area .status__action-bar > .icon-button:first-child { margin-inline-start: -8px !important; } .layout-multiple-columns #mastodon .columns-area .status__action-bar, .layout-multiple-columns #mastodon .columns-area .detailed-status__action-bar, .layout-multiple-columns #mastodon .columns-area .picture-in-picture__footer { flex-wrap: wrap; } .layout-multiple-columns #mastodon .columns-area .follow_requests-unlocked_explanation { margin: 0 !important; } .layout-multiple-columns #mastodon .columns-area .column-header, .layout-multiple-columns #mastodon .columns-area .scrollable, .layout-multiple-columns #mastodon .columns-area .column-back-button, .layout-multiple-columns #mastodon .columns-area .account__header__image { border-radius: 0 !important; } .layout-multiple-columns #mastodon .columns-area .icon-button:after { content: unset !important; } .layout-multiple-columns #mastodon .columns-area > div { border: 0 !important; padding: 0 !important; } .layout-multiple-columns #mastodon .columns-area > div:not(.drawer):not(:last-child) { margin-inline-end: 2px !important; } .layout-multiple-columns #mastodon .columns-area > div.column { flex-grow: 1; max-width: 600px; } .layout-multiple-columns #mastodon .columns-area > div:first-child { margin-inline-start: auto !important; } .layout-multiple-columns #mastodon .columns-area > div:last-child { margin-inline-end: auto !important; } .layout-multiple-columns #mastodon .columns-area .drawer { padding-inline: 6px !important; padding-top: 20px !important; } .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; background-color: transparent !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; }