diff --git a/app/javascript/flavours/glitch/styles/modern-contrast.css b/app/javascript/flavours/glitch/styles/modern-contrast.css new file mode 100644 index 0000000000..5e3f027bd8 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/modern-contrast.css @@ -0,0 +1,4249 @@ +@import 'glitch-fixes.css'; +@import 'contrast'; + +: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 !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 .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; + } + .columns-area__panels__main .column, + .columns-area__panels__main .columns-area { + overflow: visible !important; + border-radius: var(--radius) var(--radius) 0 0 !important; + } + .columns-area__panels__main .column > :first-child, + .columns-area__panels__main .columns-area > :first-child { + border-radius: var(--radius) var(--radius) 0 0 !important; + } +} +@media (min-width: 1320px) { + .columns-area__panels__main { + max-width: var(--tl-width) !important; + padding: 0 15px; + margin: 0 10px; + } +} +@media (min-width: 890px) { + .columns-area__panels__main { + display: grid !important; + grid-template-columns: 100%; + } +} +.columns-area__panels__main > div { + border-radius: var(--radius) var(--radius) 0 0; + grid-row: 1; +} +.columns-area__panels__main > div:last-child { + box-shadow: var(--shadow-med); +} +.columns-area__panels__main :not(.scrollable--flex) > .scrollable { + padding-bottom: 40vh !important; +} +.columns-area__panels__main .column-actions { + position: static; +} +.columns-area__panels__main .column-actions .column-actions__background { + border-bottom-left-radius: var(--radius); +} +#mastodon .scrollable { + border-radius: var(--radius) var(--radius) 0 0 !important; + border: 0; +} +#mastodon .scrollable:first-child { + overflow: clip; +} +#mastodon .column-header__wrapper ~ .scrollable { + overflow: auto !important; +} +#mastodon .scrollable:not(.scrollable--flex), +#mastodon .activity-stream { + border: 0 !important; + contain: unset !important; +} +#mastodon .scrollable:not(.scrollable--flex):not(.activity-stream):not(.privacy-policy), +#mastodon .activity-stream:not(.activity-stream):not(.privacy-policy) { + padding: 10px; +} +#mastodon .scrollable:not(.scrollable--flex) > [tabindex]:first-child > .focusable, +#mastodon .activity-stream > [tabindex]:first-child > .focusable { + margin-top: 0 !important; +} +#mastodon .columns-area { + box-sizing: border-box; + padding-bottom: 0; + height: 100% !important; +} +#mastodon .explore__search-results { + padding: 10px; +} +#mastodon .dismissable-banner, +#mastodon .follow_requests-unlocked_explanation { + border-inline: 0; + border-top: 0; + margin: -10px; + margin-bottom: 10px; + border-radius: 0; + padding: 15px; + isolation: isolate; + overflow: hidden; +} +.dismissable-banner__message { + padding-block: 10px; + padding-inline-end: 30px; +} +.dismissable-banner__action { + margin: 10px; +} +#mastodon .column:not(.scrollable--flex) > .dismissable-banner { + border-radius: var(--radius) var(--radius) 0 0 !important; + margin: 0; +} +#mastodon .column:not(.scrollable--flex) > .dismissable-banner ~ .scrollable { + border-radius: 0 !important; +} +#mastodon .scrollable > .dismissable-banner { + margin: 0 !important; +} +#mastodon .empty-column-indicator { + contain: unset; + padding: 10px !important; + color: unset; + opacity: 0.8; + font-size: 1.2em; + line-height: 2; +} +#mastodon .empty-column-indicator a { + display: block; + font-weight: 700; + font-size: 1.1em; +} +#mastodon .scrollable--flex .account-timeline__header { + margin: 0 !important; +} +#mastodon .item-list { + background-color: inherit; + border-radius: var(--radius); +} +#mastodon .account-timeline__header { + margin: -10px; + margin-bottom: 10px; + background-color: inherit; + border-radius: var(--radius) !important; + animation: slideUp backwards 0.4s cubic-bezier(0, 1, 1, 1); +} +#mastodon .account-timeline__header .account__moved-note { + box-sizing: border-box; + border-radius: var(--radius); + margin-bottom: calc(0px - var(--radius)); + padding: 30px; + padding-bottom: calc(var(--radius) + 30px); + background: inherit; +} +#mastodon .account-timeline__header .account__moved-note .detailed-status__display-name { + overflow: visible !important; +} +#mastodon .account-timeline__header .account__header { + overflow: visible !important; + border-radius: var(--radius) var(--radius) 0 0; + background: inherit; +} +#mastodon .account-timeline__header .account__header__info { + z-index: 2; +} +#mastodon .account-timeline__header .account__header__image { + height: 0; + padding-bottom: 35%; + border-radius: var(--radius) var(--radius) 0 0; + position: sticky; + top: calc(0px - var(--radius)); + overflow: clip; +} +#mastodon .account-timeline__header .account__header__image img { + position: absolute; +} +#mastodon .account-timeline__header .account__header__image .account__header__info { + height: 100%; +} +#mastodon .account-timeline__header .account__header__image .account__header__info > span { + position: sticky; + top: var(--radius); +} +#mastodon .account-timeline__header .account__header__bar { + border: 0; + padding: 0 20px; + border-radius: var(--radius) var(--radius) 0 0; + margin-top: calc(0px - var(--radius)) !important; + display: flex; + flex-direction: column; + background: inherit; +} +body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header__bar { + background: inherit !important; +} +#mastodon .account-timeline__header .account__header__bar .account__header__tabs { + overflow: visible !important; + position: relative; + padding: 0; + padding-top: 10px; + height: unset !important; + margin-top: -55px !important; +} +#mastodon .account-timeline__header .account__header__bar .account__header__tabs::before { + content: ""; + position: absolute; + top: 0; + left: -20px; + right: -20px; + bottom: -40px; + backdrop-filter: blur(40px); + filter: brightness(1.1); + pointer-events: none; + opacity: 0.7; + clip-path: inset(55px 0 0 0 round var(--radius)); + mask: linear-gradient(transparent 55px, #000 50px, transparent); + -webkit-mask: linear-gradient(transparent 55px, #000 50px, transparent); +} +#mastodon .account-timeline__header .account__header__bar .account__header__tabs ~ div { + z-index: 2; +} +#mastodon .account-timeline__header .account__header__bar .avatar { + margin-inline-start: 0 !important; + overflow: visible !important; + position: relative; +} +#mastodon .account-timeline__header .account__header__bar .avatar .account-role { + position: absolute; + bottom: 0; + left: 100%; + border-radius: var(--radius-round); +} +#mastodon .account-timeline__header .account__header__bar .account__avatar { + border: 0; + box-shadow: var(--shadow); +} +#mastodon .account-timeline__header .account__header__tabs__name { + margin-bottom: 0; + padding: 0; + margin-top: 16px; +} +#mastodon .account-timeline__header .account__header__tabs__name h1 { + display: flex; + flex-wrap: wrap; + white-space: unset; + gap: 0 0.4em; +} +#mastodon .account-timeline__header .account__header__bio { + padding: 0; + margin: 0; +} +#mastodon .account-timeline__header .account__header__bio > * { + padding-inline: 0; +} +#mastodon .account-timeline__header .account__header__extra { + line-height: 1.5; + margin-top: 1em; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields, +#mastodon .account__header__account-note { + display: flex; + flex-wrap: wrap; + gap: 2px; + background: none; + border-radius: var(--radius); + overflow: hidden; + width: max-content; + max-width: 100%; + border: 0; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__fields:not(:first-child), +#mastodon .account__header__account-note.account__header__fields:not(:first-child) { + margin-top: 10px; + margin-bottom: -10px; +} +.public-account-bio .account__header__fields { + padding: 20px !important; + padding-bottom: 0 !important; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl, +#mastodon .account__header__account-note dl, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note { + display: inline; + border-radius: 0; + overflow: hidden; + border: 0; + padding: 8px 12px !important; + position: relative; + overflow: hidden; + flex-grow: 1; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl:not(.verified), +#mastodon .account__header__account-note dl:not(.verified), +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note:not(.verified), +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note:not(.verified) { + background-color: var(--elevated-color); +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dt, +#mastodon .account__header__account-note dl dt, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dt, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dt { + all: unset; + color: unset; + opacity: 0.9; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd, +#mastodon .account__header__account-note dl dd, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd { + padding: 0; + white-space: unset; + max-height: unset; + text-align: unset; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd > span > a:first-child:last-child::after, +#mastodon .account__header__account-note dl dd > span > a:first-child:last-child::after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child::after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child::after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd .h-card:first-child:last-child a::after, +#mastodon .account__header__account-note dl dd .h-card:first-child:last-child a::after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a::after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a::after { + content: ""; + position: absolute; + inset: 0; + background-color: var(--hover-color); + opacity: 0; + transition: opacity 0.2s; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd > span > a:first-child:last-child:hover:after, +#mastodon .account__header__account-note dl dd > span > a:first-child:last-child:hover:after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child:hover:after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child:hover:after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd .h-card:first-child:last-child a:hover:after, +#mastodon .account__header__account-note dl dd .h-card:first-child:last-child a:hover:after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a:hover:after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a:hover:after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd > span > a:first-child:last-child:focus:after, +#mastodon .account__header__account-note dl dd > span > a:first-child:last-child:focus:after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child:focus:after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child:focus:after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd .h-card:first-child:last-child a:focus:after, +#mastodon .account__header__account-note dl dd .h-card:first-child:last-child a:focus:after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a:focus:after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a:focus:after { + opacity: 1; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd.verified, +#mastodon .account__header__account-note dl dd.verified, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd.verified, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd.verified { + overflow: visible !important; + border: 0; + background: none; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd.verified a::before, +#mastodon .account__header__account-note dl dd.verified a::before, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd.verified a::before, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd.verified a::before, +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd.verified a::after, +#mastodon .account__header__account-note dl dd.verified a::after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd.verified a::after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd.verified a::after { + content: ""; + position: absolute; + inset: 0; + background: currentcolor; + opacity: 0.2; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd.verified a::after, +#mastodon .account__header__account-note dl dd.verified a::after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd.verified a::after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd.verified a::after { + background: linear-gradient(20deg, currentcolor, transparent) !important; + opacity: 0.2 !important; + z-index: -2; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note { + display: flex; + margin-bottom: 10px; + gap: 0; + border: 0; + padding: 0 !important; + margin-inline: 0 !important; + background: none !important; + border-radius: 8px; + font-size: 12px; + width: unset; + background: none; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note label, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note label { + z-index: 2; + padding: 0 !important; + padding-inline-end: 0.7em !important; + pointer-events: none; + line-height: inherit; + font-size: inherit; + font-weight: inherit; + vertical-align: unset; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note:focus-within, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note:focus-within { + padding: 0.5em 0.7em !important; + margin-inline: -5px !important; + border: 1px solid; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note:not(:focus-within), +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note:not(:focus-within) { + border-radius: 0; + border-bottom: 1px solid; + padding-bottom: 0.4em !important; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note textarea, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note textarea { + width: 0; + flex-grow: 1; + margin: 0 !important; + border-radius: 0; + padding: 0; + margin: -100px !important; + padding: 100px !important; + padding-inline-end: 0.7em !important; + margin-inline-end: -0.7em !important; + line-height: inherit; + font-size: inherit; + font-weight: inherit; + vertical-align: unset; + background: none; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note textarea::placeholder, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note textarea::placeholder { + font-weight: 600; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note label, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note label { + margin: 0; + font-weight: 600; + padding-inline: 14px; +} +#mastodon .account__section-headline { + background: none; + position: relative; + z-index: 2; +} +.with-modals #mastodon .account__section-headline { + border: 0 !important; +} +#mastodon .account__section-headline a, +#mastodon .account__section-headline button { + background: none; + border-radius: 0 !important; +} +#mastodon .account__section-headline a span, +#mastodon .account__section-headline button span { + font-weight: 400; + opacity: 0.7; + transition: opacity 0.2s; +} +#mastodon .account__section-headline a.active span, +#mastodon .account__section-headline button.active span { + font-weight: 700; + opacity: 1; +} +#mastodon .account__section-headline a:hover span, +#mastodon .account__section-headline button:hover span, +#mastodon .account__section-headline a:active span, +#mastodon .account__section-headline button:active span { + opacity: 1 !important; +} +#mastodon .account__section-headline a::before, +#mastodon .account__section-headline button::before { + border-color: transparent transparent var(--border-color); +} +#mastodon .notification__filter-bar { + border: 0 !important; + margin-bottom: calc(0px - var(--radius)); + padding-bottom: var(--radius); +} +#mastodon .notification__filter-bar + .scrollable { + overflow: clip; +} +#mastodon .account-gallery__container { + border-radius: var(--radius); + overflow: clip; + padding: 0; + margin: 4px; + gap: 4px; + margin-bottom: calc(-40vh + 4px); +} +.account-gallery__item { + margin: 0; + flex: 1 1 calc(100px + 15%); + transition: flex 0.7s cubic-bezier(0, 0, 0, 1); + min-height: 180px !important; +} +.media-gallery__item-thumbnail { + transition: transform 0.2s; +} +.account-gallery__item:hover, +.account-gallery__item:focus-within { + flex-grow: 1.5; +} +.account-gallery__item:hover .media-gallery__item-thumbnail, +.account-gallery__item:focus-within .media-gallery__item-thumbnail { + transform: scale(1.02); +} +#mastodon .account-gallery__container > button { + width: unset; + flex-grow: 1; + flex: 1 1 calc(100px + 15% - 24px); + margin: 12px; + font-size: 1.2em; + font-weight: 700; + background: var(--elevated-color); + color: inherit; +} +#mastodon .account-gallery__container > button:hover:not(:focus) { + transform: scale(1.01); +} +#mastodon .scrollable > div:first-child > [tabindex="-1"]:last-child .status__wrapper::after { + content: unset; +} +.focusable, +.entry, +.statuses-grid__item .detailed-status, +.trends__item, +.story, +.account-card, +.scrollable :not(.focusable) > .account, +.timeline-hint { + overflow: 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)::after, +.entry:not(.detailed-status__wrapper):not(.status__wrapper)::after, +.statuses-grid__item .detailed-status:not(.detailed-status__wrapper):not(.status__wrapper)::after, +.trends__item:not(.detailed-status__wrapper):not(.status__wrapper)::after, +.story:not(.detailed-status__wrapper):not(.status__wrapper)::after, +.account-card:not(.detailed-status__wrapper):not(.status__wrapper)::after, +.scrollable :not(.focusable) > .account:not(.detailed-status__wrapper):not(.status__wrapper)::after, +.timeline-hint:not(.detailed-status__wrapper):not(.status__wrapper)::after { + content: ""; + position: absolute; + bottom: 0px; + inset-inline: var(--radius); + border-top: 1px solid var(--border-color); + pointer-events: none; +} +.status__wrapper-reply.status--in-thread::after { + top: 0; +} +.status--in-thread.status__wrapper-reply:not(.status--first-in-thread)::after, +.status--in-thread:not(.status__wrapper-reply)::after { + border-top: 0 !important; +} +.explore__links { + padding: 10px !important; + display: flex; + flex-wrap: wrap; +} +.explore__links .trends__item { + margin: 7.5px; + padding: 25px !important; + box-shadow: var(--shadow-med); + width: 200px; + background: var(--elevated-color); +} +.explore__links .trends__item::after { + content: unset !important; + inset: 0 !important; + border-radius: var(--radius); + pointer-events: none; + border: 1px solid var(--border-color) !important; +} +.explore__links .trends__item a { + font-size: 1.4em; + line-height: 1.7em; +} +.explore__links .trends__item .trends__item__sparkline { + height: 100%; +} +.explore__links .trends__item .trends__item__sparkline svg { + height: 100%; + float: right; + overflow: visible !important; + position: relative; + z-index: -1; +} +.explore__links .trends__item .trends__item__sparkline svg path { + display: unset !important; + transition: transform 1s; +} +.explore__links .trends__item .trends__item__sparkline svg path:first-child { + transform-origin: center; +} +.explore__links .trends__item:hover svg path:first-child, +.explore__links .trends__item:focus-within svg path:first-child { + transform: scale(2); +} +.focusable.trends__item, +.entry.trends__item, +.statuses-grid__item .detailed-status.trends__item, +.trends__item.trends__item, +.story.trends__item, +.account-card.trends__item, +.scrollable :not(.focusable) > .account.trends__item, +.timeline-hint.trends__item, +.focusable.story, +.entry.story, +.statuses-grid__item .detailed-status.story, +.trends__item.story, +.story.story, +.account-card.story, +.scrollable :not(.focusable) > .account.story, +.timeline-hint.story { + padding: 10px; + flex-grow: 1; +} +.focusable.story, +.entry.story, +.statuses-grid__item .detailed-status.story, +.trends__item.story, +.story.story, +.account-card.story, +.scrollable :not(.focusable) > .account.story, +.timeline-hint.story { + padding: 15px; +} +.focusable.story .story__details, +.entry.story .story__details, +.statuses-grid__item .detailed-status.story .story__details, +.trends__item.story .story__details, +.story.story .story__details, +.account-card.story .story__details, +.scrollable :not(.focusable) > .account.story .story__details, +.timeline-hint.story .story__details { + padding-inline-start: 0 !important; +} +.focusable.story .story__thumbnail, +.entry.story .story__thumbnail, +.statuses-grid__item .detailed-status.story .story__thumbnail, +.trends__item.story .story__thumbnail, +.story.story .story__thumbnail, +.account-card.story .story__thumbnail, +.scrollable :not(.focusable) > .account.story .story__thumbnail, +.timeline-hint.story .story__thumbnail { + margin-inline-end: 0; + border-radius: var(--radius); + overflow: hidden; +} +.focusable.account-card.account-card.account-card, +.entry.account-card.account-card.account-card, +.statuses-grid__item .detailed-status.account-card.account-card.account-card, +.trends__item.account-card.account-card.account-card, +.story.account-card.account-card.account-card, +.account-card.account-card.account-card.account-card, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card, +.timeline-hint.account-card.account-card.account-card { + display: flex; + flex-direction: column; + max-height: 320px; + margin: 0; + border-radius: var(--radius) !important; + box-shadow: var(--shadow); +} +.explore__suggestions, +.directory__list { + padding: 15px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 15px; +} +.explore__suggestions.directory__list, +.directory__list.directory__list { + padding: 15px 10px; +} +.focusable.account-card.account-card.account-card .account-card__header, +.entry.account-card.account-card.account-card .account-card__header, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__header, +.trends__item.account-card.account-card.account-card .account-card__header, +.story.account-card.account-card.account-card .account-card__header, +.account-card.account-card.account-card.account-card .account-card__header, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__header, +.timeline-hint.account-card.account-card.account-card .account-card__header { + padding: 0 !important; +} +.focusable.account-card.account-card.account-card .account-card__title, +.entry.account-card.account-card.account-card .account-card__title, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title, +.trends__item.account-card.account-card.account-card .account-card__title, +.story.account-card.account-card.account-card .account-card__title, +.account-card.account-card.account-card.account-card .account-card__title, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title, +.timeline-hint.account-card.account-card.account-card .account-card__title { + margin-bottom: 10px; + margin-top: -26px; +} +.focusable.account-card.account-card.account-card .account-card__title__avatar, +.entry.account-card.account-card.account-card .account-card__title__avatar, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title__avatar, +.trends__item.account-card.account-card.account-card .account-card__title__avatar, +.story.account-card.account-card.account-card .account-card__title__avatar, +.account-card.account-card.account-card.account-card .account-card__title__avatar, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title__avatar, +.timeline-hint.account-card.account-card.account-card .account-card__title__avatar { + padding-inline-end: 10px; + padding-bottom: 0; +} +.focusable.account-card.account-card.account-card .display-name, +.entry.account-card.account-card.account-card .display-name, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .display-name, +.trends__item.account-card.account-card.account-card .display-name, +.story.account-card.account-card.account-card .display-name, +.account-card.account-card.account-card.account-card .display-name, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .display-name, +.timeline-hint.account-card.account-card.account-card .display-name { + padding-bottom: 0; +} +.focusable.account-card.account-card.account-card .display-name__account, +.entry.account-card.account-card.account-card .display-name__account, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .display-name__account, +.trends__item.account-card.account-card.account-card .display-name__account, +.story.account-card.account-card.account-card .display-name__account, +.account-card.account-card.account-card.account-card .display-name__account, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .display-name__account, +.timeline-hint.account-card.account-card.account-card .display-name__account { + font-size: 0.9em !important; +} +.focusable.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.entry.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.trends__item.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.story.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.account-card.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.timeline-hint.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.focusable.account-card.account-card.account-card .account-card__title__avatar, +.entry.account-card.account-card.account-card .account-card__title__avatar, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title__avatar, +.trends__item.account-card.account-card.account-card .account-card__title__avatar, +.story.account-card.account-card.account-card .account-card__title__avatar, +.account-card.account-card.account-card.account-card .account-card__title__avatar, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title__avatar, +.timeline-hint.account-card.account-card.account-card .account-card__title__avatar { + width: 64px !important; + height: 64px !important; + background-size: 64px 64px !important; +} +.focusable.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.entry.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.trends__item.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.story.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.account-card.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.timeline-hint.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.focusable.account-card.account-card.account-card .account-card__title__avatar img, +.entry.account-card.account-card.account-card .account-card__title__avatar img, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title__avatar img, +.trends__item.account-card.account-card.account-card .account-card__title__avatar img, +.story.account-card.account-card.account-card .account-card__title__avatar img, +.account-card.account-card.account-card.account-card .account-card__title__avatar img, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title__avatar img, +.timeline-hint.account-card.account-card.account-card .account-card__title__avatar img { + width: inherit; + height: inherit; +} +.focusable.account-card.account-card.account-card .account-card__title, +.entry.account-card.account-card.account-card .account-card__title, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title, +.trends__item.account-card.account-card.account-card .account-card__title, +.story.account-card.account-card.account-card .account-card__title, +.account-card.account-card.account-card.account-card .account-card__title, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title, +.timeline-hint.account-card.account-card.account-card .account-card__title { + padding-inline-end: 15px; +} +.focusable.account-card.account-card.account-card .display-name bdi, +.entry.account-card.account-card.account-card .display-name bdi, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .display-name bdi, +.trends__item.account-card.account-card.account-card .display-name bdi, +.story.account-card.account-card.account-card .display-name bdi, +.account-card.account-card.account-card.account-card .display-name bdi, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .display-name bdi, +.timeline-hint.account-card.account-card.account-card .display-name bdi { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} +.focusable.account-card.account-card.account-card .account-card__bio, +.entry.account-card.account-card.account-card .account-card__bio, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__bio, +.trends__item.account-card.account-card.account-card .account-card__bio, +.story.account-card.account-card.account-card .account-card__bio, +.account-card.account-card.account-card.account-card .account-card__bio, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__bio, +.timeline-hint.account-card.account-card.account-card .account-card__bio { + margin-top: 0 !important; + max-height: unset; + mask: linear-gradient(#000 65px, rgba(0,0,0,0.5), transparent); + -webkit-mask: linear-gradient(#000 65px, rgba(0,0,0,0.5), transparent); + flex-grow: 1; + margin-bottom: -50px; + margin-bottom: -15px; + font-size: 1em; + padding-bottom: 60px; +} +.focusable.account-card.account-card.account-card .account-card__bio::after, +.entry.account-card.account-card.account-card .account-card__bio::after, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__bio::after, +.trends__item.account-card.account-card.account-card .account-card__bio::after, +.story.account-card.account-card.account-card .account-card__bio::after, +.account-card.account-card.account-card.account-card .account-card__bio::after, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__bio::after, +.timeline-hint.account-card.account-card.account-card .account-card__bio::after { + content: unset !important; +} +.focusable.account-card.account-card.account-card .account-card__bio p, +.entry.account-card.account-card.account-card .account-card__bio p, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__bio p, +.trends__item.account-card.account-card.account-card .account-card__bio p, +.story.account-card.account-card.account-card .account-card__bio p, +.account-card.account-card.account-card.account-card .account-card__bio p, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__bio p, +.timeline-hint.account-card.account-card.account-card .account-card__bio p { + display: inline; +} +.focusable.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, +.entry.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, +.trends__item.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, +.story.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, +.account-card.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, +.timeline-hint.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before { + content: " · "; +} +.focusable.account-card.account-card.account-card .account-card__bio br, +.entry.account-card.account-card.account-card .account-card__bio br, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__bio br, +.trends__item.account-card.account-card.account-card .account-card__bio br, +.story.account-card.account-card.account-card .account-card__bio br, +.account-card.account-card.account-card.account-card .account-card__bio br, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__bio br, +.timeline-hint.account-card.account-card.account-card .account-card__bio br { + display: block; +} +.focusable.account-card.account-card.account-card .account-card__actions, +.entry.account-card.account-card.account-card .account-card__actions, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions, +.trends__item.account-card.account-card.account-card .account-card__actions, +.story.account-card.account-card.account-card .account-card__actions, +.account-card.account-card.account-card.account-card .account-card__actions, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions, +.timeline-hint.account-card.account-card.account-card .account-card__actions { + margin-top: auto !important; + display: unset !important; +} +.focusable.account-card.account-card.account-card .account-card__actions .account-card__counters, +.entry.account-card.account-card.account-card .account-card__actions .account-card__counters, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__counters, +.trends__item.account-card.account-card.account-card .account-card__actions .account-card__counters, +.story.account-card.account-card.account-card .account-card__actions .account-card__counters, +.account-card.account-card.account-card.account-card .account-card__actions .account-card__counters, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__counters, +.timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__counters { + display: flex; + gap: 1em; + padding-inline: 15px; +} +.focusable.account-card.account-card.account-card .account-card__actions .account-card__counters__item, +.entry.account-card.account-card.account-card .account-card__actions .account-card__counters__item, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__counters__item, +.trends__item.account-card.account-card.account-card .account-card__actions .account-card__counters__item, +.story.account-card.account-card.account-card .account-card__actions .account-card__counters__item, +.account-card.account-card.account-card.account-card .account-card__actions .account-card__counters__item, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__counters__item, +.timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__counters__item { + display: flex; + align-items: center; + font-size: 1em; +} +.focusable.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, +.entry.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, +.trends__item.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, +.story.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, +.account-card.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, +.timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small { + display: inline !important; + margin-inline-start: 0.4em; + font-size: 1em !important; +} +.focusable.account-card.account-card.account-card .account-card__actions .account-card__actions__button, +.entry.account-card.account-card.account-card .account-card__actions .account-card__actions__button, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__actions__button, +.trends__item.account-card.account-card.account-card .account-card__actions .account-card__actions__button, +.story.account-card.account-card.account-card .account-card__actions .account-card__actions__button, +.account-card.account-card.account-card.account-card .account-card__actions .account-card__actions__button, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__actions__button, +.timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__actions__button { + position: absolute; + top: 10px; + right: 10px; + padding: 0; + background: rgba(0,0,0,0.4); + border-radius: var(--radius-round); + padding: 4px; + box-shadow: 0 4px 12px rgba(0,0,0,0.2); +} +.focusable.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.entry.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.trends__item.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.story.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.account-card.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.focusable.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, +.entry.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, +.trends__item.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, +.story.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, +.account-card.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, +.timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__actions__button a { + border-radius: var(--radius-round) !important; + padding: 0.7em 1.7em; + min-height: unset; + font-size: 14px !important; + line-height: 1.2; + font-size: 1em !important; +} +.focusable.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, +.entry.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, +.trends__item.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, +.story.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, +.account-card.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, +.timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty { + display: none; +} +.focusable.account-card.account-card.account-card::after, +.entry.account-card.account-card.account-card::after, +.statuses-grid__item .detailed-status.account-card.account-card.account-card::after, +.trends__item.account-card.account-card.account-card::after, +.story.account-card.account-card.account-card::after, +.account-card.account-card.account-card.account-card::after, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card::after, +.timeline-hint.account-card.account-card.account-card::after { + content: unset !important; +} +.focusable.empty-column-indicator, +.entry.empty-column-indicator, +.statuses-grid__item .detailed-status.empty-column-indicator, +.trends__item.empty-column-indicator, +.story.empty-column-indicator, +.account-card.empty-column-indicator, +.scrollable :not(.focusable) > .account.empty-column-indicator, +.timeline-hint.empty-column-indicator { + display: block; +} +.focusable.timeline-hint, +.entry.timeline-hint, +.statuses-grid__item .detailed-status.timeline-hint, +.trends__item.timeline-hint, +.story.timeline-hint, +.account-card.timeline-hint, +.scrollable :not(.focusable) > .account.timeline-hint, +.timeline-hint.timeline-hint { + display: block; +} +.focusable.timeline-hint a::before, +.entry.timeline-hint a::before, +.statuses-grid__item .detailed-status.timeline-hint a::before, +.trends__item.timeline-hint a::before, +.story.timeline-hint a::before, +.account-card.timeline-hint a::before, +.scrollable :not(.focusable) > .account.timeline-hint a::before, +.timeline-hint.timeline-hint a::before { + content: ""; + position: absolute; + inset: 0; +} +#mastodon .status, +#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 .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: 8px; +} +#mastodon .hashtag-bar a, +#mastodon .hashtag-bar button { + font-size: 0.85em; + font-weight: 600; + padding: 0.2em 0.6em; + opacity: 0.7; + 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 { + z-index: 101; + grid-column: 2; + border: 0 !important; + transition: margin 0.2s cubic-bezier(0, 0, 0, 1.1), top 0.4s; +} +#mastodon .column-header, +#mastodon .column-inline-form { + font-weight: 600; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} +#mastodon .column-header ~ .scrollable, +#mastodon .column-inline-form ~ .scrollable { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; +} +@media (min-width: 890px) { + .layout-single-column .tabs-bar__wrapper, + .layout-single-column .column-back-button--slim .column-back-button { + width: 285px; + top: 0 !important; + top: var(--top) !important; + inset-inline: unset !important; + height: 50px !important; + margin-top: -50px !important; + margin-inline-start: 10px; + margin-top: 30px; + border-radius: var(--radius) var(--radius) !important; + box-shadow: 0 12px 12px -12px rgba(0,0,0,0.1); + } + .layout-single-column .tabs-bar__wrapper:not(.column-back-button), + .layout-single-column .column-back-button--slim .column-back-button:not(.column-back-button) { + padding-top: 0; + } + .layout-single-column .tabs-bar__wrapper .column-header__wrapper, + .layout-single-column .column-back-button--slim .column-back-button .column-header__wrapper { + gap: 2px !important; + display: flex; + flex-direction: column; + border-radius: var(--radius); + overflow: hidden; + } + .layout-single-column .tabs-bar__wrapper .column-back-button, + .layout-single-column .column-back-button--slim .column-back-button .column-back-button { + background: none; + } + .layout-single-column .tabs-bar__wrapper .column-header, + .layout-single-column .column-back-button--slim .column-back-button .column-header { + background: none !important; + overflow: hidden; + border: 0; + } + .layout-single-column .tabs-bar__wrapper .column-header > button, + .layout-single-column .column-back-button--slim .column-back-button .column-header > button { + z-index: 2; + } + .layout-single-column .tabs-bar__wrapper .column-header__buttons button, + .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button { + transition: background 0.2s, transform 0.3s !important; + position: relative; + border-radius: 100px !important; + min-width: 40px; + margin: 5px; + margin-inline-start: 0; + font-size: 0.9em; + padding-inline: 15px; + } + .layout-single-column .tabs-bar__wrapper .column-header__buttons button .icon-with-badge, + .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button .icon-with-badge { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + } + .layout-single-column .tabs-bar__wrapper .column-header__buttons button .icon-with-badge .icon-with-badge__badge, + .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button .icon-with-badge .icon-with-badge__badge { + right: -2px; + left: unset; + top: unset; + bottom: 0px; + border-radius: var(--radius-round); + } + .layout-single-column .tabs-bar__wrapper .column-header__buttons button .column-header__icon, + .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button .column-header__icon { + margin-inline-end: 0; + } + .layout-single-column .tabs-bar__wrapper .column-header__buttons button:not(.active), + .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button:not(.active) { + background: var(--elevated-color) !important; + } + .layout-single-column .tabs-bar__wrapper .column-header__buttons button::before, + .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button::before { + content: ""; + position: absolute; + inset: 0; + top: calc(100% + 5px); + bottom: -5px; + background: inherit; + z-index: -1; + transition: inset 0.1s; + border-radius: 100px; + pointer-events: none; + } + .layout-single-column .tabs-bar__wrapper .column-header__buttons button::after, + .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button::after { + position: absolute; + inset: 0; + background: var(--elevated-color); + border-radius: 100%; + } + .layout-single-column .tabs-bar__wrapper .column-header__buttons button.active::before, + .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button.active::before { + inset: -10px -300px; + } + .layout-single-column .tabs-bar__wrapper .announcements, + .layout-single-column .column-back-button--slim .column-back-button .announcements, + .layout-single-column .tabs-bar__wrapper .column-header__collapsible:not(.collapsed), + .layout-single-column .column-back-button--slim .column-back-button .column-header__collapsible:not(.collapsed) { + flex-direction: column-reverse; + align-items: flex-start; + border: 0; + animation: slideDowFade 0.3s backwards cubic-bezier(0, 1, 0, 1.2); + } + .layout-single-column .tabs-bar__wrapper .column-header__collapsible, + .layout-single-column .column-back-button--slim .column-back-button .column-header__collapsible { + transition: none; + } + .layout-single-column .tabs-bar__wrapper .collapsed, + .layout-single-column .column-back-button--slim .column-back-button .collapsed { + display: none; + } + .layout-single-column .tabs-bar__wrapper .announcements__container, + .layout-single-column .column-back-button--slim .column-back-button .announcements__container { + width: 100% !important; + } + .layout-single-column .tabs-bar__wrapper .announcements__mastodon, + .layout-single-column .column-back-button--slim .column-back-button .announcements__mastodon { + z-index: -1; + position: relative; + } +} +@media (min-width: 890px) and (min-width: 1320px) { + .layout-single-column .tabs-bar__wrapper, + .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 { + display: none; + } + #mastodon .navigation-panel [href="/settings/preferences"] { + display: none !important; + } +} +.column-link { + border: 0; +} +@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: 1em !important; + font-size: 16px !important; + } + .column-link::before { + content: "" !important; + position: absolute; + border-radius: 100px; + width: unset !important; + height: unset !important; + inset: 0px 0px !important; + opacity: 0 !important; + background-color: rgba(150,150,150,0.1); + transition: opacity 0.2s; + } + .column-link.active { + opacity: 1 !important; + font-weight: 600; + } + .column-link:hover:before, + .column-link:focus:before { + opacity: 1 !important; + } + .column-link[href="/lists"] + div hr { + display: none; + } + .column-link[href="/lists"] + div .column-link { + margin-bottom: 2px; + } + .column-link[href="/lists"] + div .column-link i { + opacity: 0.2; + } +} +@media (min-width: 890px) { + #mastodon .getting-started__trends { + display: unset !important; + } +} +#mastodon .trends__item { + display: flex !important; +} +#mastodon .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) !important; + } + #mastodon .detailed-status__wrapper { + margin: 0 !important; + } + #mastodon .status__action-bar { + margin-bottom: 0px; + gap: 0; + margin-inline-end: 0 !important; + } + #mastodon .status__action-bar :not(i):not(.status__action-bar-spacer) { + display: flex; + flex-grow: 9999; + 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 { + z-index: 101; + border-bottom: 0; + box-sizing: content-box; + flex-wrap: wrap; + min-height: 55px; + height: auto; + position: relative; + padding-block: 10px; + box-sizing: border-box; + gap: 10px; + border: 0 !important; + overflow: visible; + } + .ui__header::after { + content: ""; + position: absolute; + inset-inline-end: 54px; + top: 100%; + width: var(--radius); + height: var(--radius); + background: inherit; + mask: radial-gradient(var(--radius) at 0px var(--radius), rgba(0,0,0,0) 100%, #000); + -webkit-mask: radial-gradient(var(--radius) at 0px var(--radius), rgba(0,0,0,0) 100%, #000); + z-index: 9999; + } + .rtl .ui__header::after { + transform: scaleX(-1); + } + .ui__header .ui__header__logo { + padding-block: 5px !important; + } + .ui__header .ui__header__links { + background: inherit; + } + .ui__header [href="/search"] { + margin-inline-end: 55px; + } + .ui__header [href^="/@"], + .ui__header a.permalink[href] { + position: fixed; + inset-inline-end: 1px; + width: 53px; + display: flex; + justify-content: center; + background: inherit; + } + .ui__header [href="/publish"] { + position: fixed; + bottom: 15px; + inset-inline-end: 15px; + border-radius: 100px !important; + height: 60px; + width: 60px; + font-size: 0; + box-shadow: var(--shadow-low); + background: inherit; + -webkit-user-drag: none; + -khtml-user-drag: none; + -moz-user-drag: none; + -o-user-drag: none; + user-drag: none; + animation: scaleIn 0.2s cubic-bezier(0, 0, 0, 1.1); + } + .ui__header [href="/publish"]::before { + content: ""; + font: normal normal normal 14px/1 FontAwesome; + position: absolute; + inset: 0; + display: flex; + justify-content: center; + align-items: center; + font-size: 24px; + } + .ui__header [href="/publish"]:active { + animation: rainbow 4s infinite linear !important; + } + #mastodon .tabs-bar__wrapper { + top: 0; + background: none; + } + #mastodon .column-back-button.column-back-button { + border-radius: 0 !important; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels { + flex-direction: column; + } + #mastodon:has(.navigation-panel__sign-in-banner) .ui__header::after { + content: unset; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__main { + width: 100%; + border-radius: 0 !important; + margin: 0 !important; + border: 0 !important; + } + #mastodon:has(.navigation-panel__sign-in-banner) .tabs-bar__wrapper { + transition: none !important; + } + #mastodon:has(.navigation-panel__sign-in-banner):has(.column-header__buttons:empty) .tabs-bar__wrapper { + margin-top: -50px; + margin-bottom: 2px; + height: 48px; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational { + display: contents; + } + #mastodon:has(.navigation-panel__sign-in-banner) .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(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel { + flex-direction: row; + margin: 0; + padding: 0; + height: auto; + padding: 12px 14px; + gap: 10px; + border-block: 1px solid; + overflow: scroll hidden; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel::-webkit-scrollbar { + display: none; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational hr { + display: none; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__name > span, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__sparkline { + display: none; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel__legal, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .getting-started__trends, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__name { + all: unset; + display: contents !important; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel__legal::before, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4::before, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .getting-started__trends::before, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item::before, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__name::before, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel__legal::after, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4::after, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .getting-started__trends::after, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item::after, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__name::after { + content: unset; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational:has(.getting-started__trends) .flex-spacer { + border-right: 1px solid; + margin-block: 10px; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational:has(.getting-started__trends) .navigation-panel::after { + content: ""; + position: sticky; + right: -20px; + min-width: 150px; + margin-left: -50px; + background: inherit; + mask: linear-gradient(to right, transparent, #000); + -webkit-mask: linear-gradient(to right, transparent, #000); + pointer-events: none; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational:has(.getting-started__trends) .trends__item:last-child a { + position: relative; + z-index: 3; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4 > span { + position: relative; + overflow: hidden; + border-radius: var(--radius); + padding: 0.8em 1.2em; + font-weight: 600; + font-size: 1.1em; + text-align: center; + min-width: max-content; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a i, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4 > span i { + font-size: 1em; + width: auto; + margin-right: 0; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a.active, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4 > span.active { + padding-inline: 1.2em; + position: relative; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a.active::before, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4 > span.active::before { + content: ""; + position: absolute; + inset: 0; + background: currentcolor; + opacity: 0.1; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a > span:not(:first-child), + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4 > span > span:not(:first-child) { + margin-left: 0.7em; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational span { + display: unset; + } + #mastodon .columns-area__panels { + justify-content: flex-start; + max-width: 100% !important; + flex-wrap: nowrap !important; + } + #mastodon .columns-area__panels__main { + padding: 0 !important; + max-width: unset; + border-start-end-radius: var(--radius); + overflow: clip !important; + margin-top: 1px !important; + flex-grow: 1; + } + #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 .notification__filter-bar + .scrollable { + border-radius: var(--radius) var(--radius) 0 0 !important; + } + #mastodon .columns-area { + padding-bottom: 0 !important; + overflow: hidden !important; + } + #mastodon .getting-started { + padding: 20px; + padding-bottom: 60px; + } + #mastodon .getting-started__wrapper { + flex-grow: 1; + overflow: visible !important; + } + #mastodon .about.about.about { + padding-inline: 10px !important; + } + #mastodon .about.about.about .account { + margin-top: 0; + } + #mastodon .about.about.about .about__header__hero, + #mastodon .about.about.about .about__section.active { + margin-inline: -11px !important; + width: unset; + border-radius: 0; + } + #mastodon .about.about.about .about__section.active { + margin-block: 20px !important; + } + #mastodon .about.about.about .about__section { + margin-bottom: 0; + border-bottom: 1px solid; + } +} +.admin-wrapper .sidebar-wrapper { + overflow: visible !important; + width: unset; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner { + position: sticky; + top: 0; + max-height: 100vh !important; + overflow-y: auto !important; + pointer-events: all !important; + z-index: 100; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .fa { + margin-inline-end: 1em !important; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li { + overflow: hidden; + margin-inline: 15px !important; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li > a:not(.selected) { + background: none; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li a { + display: flex !important; + align-items: center; + white-space: unset; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li.selected { + margin: 6px; + border-radius: var(--radius); +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li.selected > a.selected { + font-weight: 600; + color: unset; + position: relative; + overflow: visible; + border-radius: 0 !important; + border: 0; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li.selected > a.selected::after { + content: ""; + position: absolute; + top: 100%; + inset-inline: 0; + height: 9999px; + background: inherit; + z-index: -1; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li > ul { + border-radius: var(--radius) !important; + overflow: hidden !important; + gap: 2px !important; + margin: 8px; + margin-top: 0; + background: none; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li > ul > li { + border-radius: 8px; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li > ul > li:not(:first-child):not(:last-child) { + margin-block: 2px; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li > ul > li a { + padding: 14px 16px; + font-weight: 600; + border: 0; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li > ul > li:not(.selected) a { + background-color: rgba(150,150,250,0.1); +} +.admin-wrapper .content__heading { + margin-bottom: 2em; +} +.admin-wrapper h4 { + margin: 0; + border-bottom: 0; +} +.admin-wrapper form > h4 { + margin-top: 2em !important; + border-bottom: 0; + margin-bottom: 0 !important; +} +.admin-wrapper .flash-message, +.admin-wrapper .applications-list__item, +.admin-wrapper .filters-list__item { + border-radius: var(--radius); + border: 0; + overflow: clip; +} +.admin-wrapper .fields-row { + margin-inline: 0; + border-radius: var(--radius); + overflow: clip; + padding-top: 0; + gap: 2px; + display: flex; + flex-wrap: wrap; +} +.admin-wrapper .fields-group:not(.fields-row__column), +.admin-wrapper .fields-row { + margin-bottom: 1em !important; +} +.admin-wrapper .fields-row__column { + max-width: unset; + width: 300px; + border-radius: 0 !important; + display: flex; + flex-direction: column; + flex-grow: 1; + margin: 0 !important; +} +.admin-wrapper .fields-row__column .fields-group { + border-radius: 0 !important; + margin: 0 !important; +} +.admin-wrapper .fields-row__column .fields-group > .with_block_label { + display: flex; + flex-direction: column; + height: 100%; +} +.admin-wrapper .fields-row__column .fields-group > .with_block_label > .label_input { + flex-grow: 1; +} +.admin-wrapper .fields-row__column .fields-group > .with_block_label > .label_input > textarea { + min-height: 100%; +} +.admin-wrapper .fields-row__column > :last-child { + flex-grow: 1; + align-items: flex-start; + border: 0; +} +.admin-wrapper .fields-row__column > :not(:first-child):not(:last-child) { + padding-block: 0.5em !important; + margin-block: -3px; +} +.admin-wrapper :not(.fields-row__column) > .fields-group, +.admin-wrapper .fields-row > *, +.admin-wrapper .label_input > ul, +.admin-wrapper .label_input__wrapper > ul, +.admin-wrapper .radio_buttons > ul, +.admin-wrapper .with_block_label.radio_buttons .label_input { + border-radius: var(--radius); + overflow: clip; + padding: 0; + display: flex; + flex-direction: column; + gap: 2px; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > *, +.admin-wrapper .fields-row > * > *, +.admin-wrapper .label_input > ul > *, +.admin-wrapper .label_input__wrapper > ul > *, +.admin-wrapper .radio_buttons > ul > *, +.admin-wrapper .with_block_label.radio_buttons .label_input > * { + background-color: var(--elevated-color); + padding: 0.8rem; + margin-block: 0px; + position: relative; + border-radius: 0 !important; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > *:not(p):not(h6):not(.input-copy)::after, +.admin-wrapper .fields-row > * > *:not(p):not(h6):not(.input-copy)::after, +.admin-wrapper .label_input > ul > *:not(p):not(h6):not(.input-copy)::after, +.admin-wrapper .label_input__wrapper > ul > *:not(p):not(h6):not(.input-copy)::after, +.admin-wrapper .radio_buttons > ul > *:not(p):not(h6):not(.input-copy)::after, +.admin-wrapper .with_block_label.radio_buttons .label_input > *:not(p):not(h6):not(.input-copy)::after { + content: ""; + position: absolute; + inset: 0; + background-color: var(--hover-color); + z-index: -1; + opacity: 0; + transition: opacity 0.2s; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > *:not(p):not(h6):not(.input-copy):hover::after, +.admin-wrapper .fields-row > * > *:not(p):not(h6):not(.input-copy):hover::after, +.admin-wrapper .label_input > ul > *:not(p):not(h6):not(.input-copy):hover::after, +.admin-wrapper .label_input__wrapper > ul > *:not(p):not(h6):not(.input-copy):hover::after, +.admin-wrapper .radio_buttons > ul > *:not(p):not(h6):not(.input-copy):hover::after, +.admin-wrapper .with_block_label.radio_buttons .label_input > *:not(p):not(h6):not(.input-copy):hover::after, +.admin-wrapper :not(.fields-row__column) > .fields-group > *:not(p):not(h6):not(.input-copy):focus-within::after, +.admin-wrapper .fields-row > * > *:not(p):not(h6):not(.input-copy):focus-within::after, +.admin-wrapper .label_input > ul > *:not(p):not(h6):not(.input-copy):focus-within::after, +.admin-wrapper .label_input__wrapper > ul > *:not(p):not(h6):not(.input-copy):focus-within::after, +.admin-wrapper .radio_buttons > ul > *:not(p):not(h6):not(.input-copy):focus-within::after, +.admin-wrapper .with_block_label.radio_buttons .label_input > *:not(p):not(h6):not(.input-copy):focus-within::after { + opacity: 1; +} +.admin-wrapper :not(.fields-row__column) > .fields-group .input-copy__wrapper, +.admin-wrapper .fields-row > * .input-copy__wrapper, +.admin-wrapper .label_input > ul .input-copy__wrapper, +.admin-wrapper .label_input__wrapper > ul .input-copy__wrapper, +.admin-wrapper .radio_buttons > ul .input-copy__wrapper, +.admin-wrapper .with_block_label.radio_buttons .label_input .input-copy__wrapper { + border: 1px solid var(--border-color-2); + border-radius: var(--radius); +} +.admin-wrapper :not(.fields-row__column) > .fields-group > .input, +.admin-wrapper .fields-row > * > .input, +.admin-wrapper .label_input > ul > .input, +.admin-wrapper .label_input__wrapper > ul > .input, +.admin-wrapper .radio_buttons > ul > .input, +.admin-wrapper .with_block_label.radio_buttons .label_input > .input, +.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox, +.admin-wrapper .fields-row > * .checkbox, +.admin-wrapper .label_input > ul .checkbox, +.admin-wrapper .label_input__wrapper > ul .checkbox, +.admin-wrapper .radio_buttons > ul .checkbox, +.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox, +.admin-wrapper :not(.fields-row__column) > .fields-group .radio, +.admin-wrapper .fields-row > * .radio, +.admin-wrapper .label_input > ul .radio, +.admin-wrapper .label_input__wrapper > ul .radio, +.admin-wrapper .radio_buttons > ul .radio, +.admin-wrapper .with_block_label.radio_buttons .label_input .radio { + flex-grow: 1; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > .input:not(:last-child), +.admin-wrapper .fields-row > * > .input:not(:last-child), +.admin-wrapper .label_input > ul > .input:not(:last-child), +.admin-wrapper .label_input__wrapper > ul > .input:not(:last-child), +.admin-wrapper .radio_buttons > ul > .input:not(:last-child), +.admin-wrapper .with_block_label.radio_buttons .label_input > .input:not(:last-child), +.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox:not(:last-child), +.admin-wrapper .fields-row > * .checkbox:not(:last-child), +.admin-wrapper .label_input > ul .checkbox:not(:last-child), +.admin-wrapper .label_input__wrapper > ul .checkbox:not(:last-child), +.admin-wrapper .radio_buttons > ul .checkbox:not(:last-child), +.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox:not(:last-child), +.admin-wrapper :not(.fields-row__column) > .fields-group .radio:not(:last-child), +.admin-wrapper .fields-row > * .radio:not(:last-child), +.admin-wrapper .label_input > ul .radio:not(:last-child), +.admin-wrapper .label_input__wrapper > ul .radio:not(:last-child), +.admin-wrapper .radio_buttons > ul .radio:not(:last-child), +.admin-wrapper .with_block_label.radio_buttons .label_input .radio:not(:last-child) { + margin-bottom: 2px; + margin-bottom: 0; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > .input.radio .hint, +.admin-wrapper .fields-row > * > .input.radio .hint, +.admin-wrapper .label_input > ul > .input.radio .hint, +.admin-wrapper .label_input__wrapper > ul > .input.radio .hint, +.admin-wrapper .radio_buttons > ul > .input.radio .hint, +.admin-wrapper .with_block_label.radio_buttons .label_input > .input.radio .hint, +.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox.radio .hint, +.admin-wrapper .fields-row > * .checkbox.radio .hint, +.admin-wrapper .label_input > ul .checkbox.radio .hint, +.admin-wrapper .label_input__wrapper > ul .checkbox.radio .hint, +.admin-wrapper .radio_buttons > ul .checkbox.radio .hint, +.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox.radio .hint, +.admin-wrapper :not(.fields-row__column) > .fields-group .radio.radio .hint, +.admin-wrapper .fields-row > * .radio.radio .hint, +.admin-wrapper .label_input > ul .radio.radio .hint, +.admin-wrapper .label_input__wrapper > ul .radio.radio .hint, +.admin-wrapper .radio_buttons > ul .radio.radio .hint, +.admin-wrapper .with_block_label.radio_buttons .label_input .radio.radio .hint, +.admin-wrapper :not(.fields-row__column) > .fields-group > .input.checkbox .hint, +.admin-wrapper .fields-row > * > .input.checkbox .hint, +.admin-wrapper .label_input > ul > .input.checkbox .hint, +.admin-wrapper .label_input__wrapper > ul > .input.checkbox .hint, +.admin-wrapper .radio_buttons > ul > .input.checkbox .hint, +.admin-wrapper .with_block_label.radio_buttons .label_input > .input.checkbox .hint, +.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox.checkbox .hint, +.admin-wrapper .fields-row > * .checkbox.checkbox .hint, +.admin-wrapper .label_input > ul .checkbox.checkbox .hint, +.admin-wrapper .label_input__wrapper > ul .checkbox.checkbox .hint, +.admin-wrapper .radio_buttons > ul .checkbox.checkbox .hint, +.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox.checkbox .hint, +.admin-wrapper :not(.fields-row__column) > .fields-group .radio.checkbox .hint, +.admin-wrapper .fields-row > * .radio.checkbox .hint, +.admin-wrapper .label_input > ul .radio.checkbox .hint, +.admin-wrapper .label_input__wrapper > ul .radio.checkbox .hint, +.admin-wrapper .radio_buttons > ul .radio.checkbox .hint, +.admin-wrapper .with_block_label.radio_buttons .label_input .radio.checkbox .hint, +.admin-wrapper :not(.fields-row__column) > .fields-group > .input.radio label, +.admin-wrapper .fields-row > * > .input.radio label, +.admin-wrapper .label_input > ul > .input.radio label, +.admin-wrapper .label_input__wrapper > ul > .input.radio label, +.admin-wrapper .radio_buttons > ul > .input.radio label, +.admin-wrapper .with_block_label.radio_buttons .label_input > .input.radio label, +.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox.radio label, +.admin-wrapper .fields-row > * .checkbox.radio label, +.admin-wrapper .label_input > ul .checkbox.radio label, +.admin-wrapper .label_input__wrapper > ul .checkbox.radio label, +.admin-wrapper .radio_buttons > ul .checkbox.radio label, +.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox.radio label, +.admin-wrapper :not(.fields-row__column) > .fields-group .radio.radio label, +.admin-wrapper .fields-row > * .radio.radio label, +.admin-wrapper .label_input > ul .radio.radio label, +.admin-wrapper .label_input__wrapper > ul .radio.radio label, +.admin-wrapper .radio_buttons > ul .radio.radio label, +.admin-wrapper .with_block_label.radio_buttons .label_input .radio.radio label, +.admin-wrapper :not(.fields-row__column) > .fields-group > .input.checkbox label, +.admin-wrapper .fields-row > * > .input.checkbox label, +.admin-wrapper .label_input > ul > .input.checkbox label, +.admin-wrapper .label_input__wrapper > ul > .input.checkbox label, +.admin-wrapper .radio_buttons > ul > .input.checkbox label, +.admin-wrapper .with_block_label.radio_buttons .label_input > .input.checkbox label, +.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox.checkbox label, +.admin-wrapper .fields-row > * .checkbox.checkbox label, +.admin-wrapper .label_input > ul .checkbox.checkbox label, +.admin-wrapper .label_input__wrapper > ul .checkbox.checkbox label, +.admin-wrapper .radio_buttons > ul .checkbox.checkbox label, +.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox.checkbox label, +.admin-wrapper :not(.fields-row__column) > .fields-group .radio.checkbox label, +.admin-wrapper .fields-row > * .radio.checkbox label, +.admin-wrapper .label_input > ul .radio.checkbox label, +.admin-wrapper .label_input__wrapper > ul .radio.checkbox label, +.admin-wrapper .radio_buttons > ul .radio.checkbox label, +.admin-wrapper .with_block_label.radio_buttons .label_input .radio.checkbox label { + margin-bottom: 0 !important; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > .input .label_input, +.admin-wrapper .fields-row > * > .input .label_input, +.admin-wrapper .label_input > ul > .input .label_input, +.admin-wrapper .label_input__wrapper > ul > .input .label_input, +.admin-wrapper .radio_buttons > ul > .input .label_input, +.admin-wrapper .with_block_label.radio_buttons .label_input > .input .label_input, +.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox .label_input, +.admin-wrapper .fields-row > * .checkbox .label_input, +.admin-wrapper .label_input > ul .checkbox .label_input, +.admin-wrapper .label_input__wrapper > ul .checkbox .label_input, +.admin-wrapper .radio_buttons > ul .checkbox .label_input, +.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox .label_input, +.admin-wrapper :not(.fields-row__column) > .fields-group .radio .label_input, +.admin-wrapper .fields-row > * .radio .label_input, +.admin-wrapper .label_input > ul .radio .label_input, +.admin-wrapper .label_input__wrapper > ul .radio .label_input, +.admin-wrapper .radio_buttons > ul .radio .label_input, +.admin-wrapper .with_block_label.radio_buttons .label_input .radio .label_input { + flex-direction: column; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > .input .label_input > label, +.admin-wrapper .fields-row > * > .input .label_input > label, +.admin-wrapper .label_input > ul > .input .label_input > label, +.admin-wrapper .label_input__wrapper > ul > .input .label_input > label, +.admin-wrapper .radio_buttons > ul > .input .label_input > label, +.admin-wrapper .with_block_label.radio_buttons .label_input > .input .label_input > label, +.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox .label_input > label, +.admin-wrapper .fields-row > * .checkbox .label_input > label, +.admin-wrapper .label_input > ul .checkbox .label_input > label, +.admin-wrapper .label_input__wrapper > ul .checkbox .label_input > label, +.admin-wrapper .radio_buttons > ul .checkbox .label_input > label, +.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox .label_input > label, +.admin-wrapper :not(.fields-row__column) > .fields-group .radio .label_input > label, +.admin-wrapper .fields-row > * .radio .label_input > label, +.admin-wrapper .label_input > ul .radio .label_input > label, +.admin-wrapper .label_input__wrapper > ul .radio .label_input > label, +.admin-wrapper .radio_buttons > ul .radio .label_input > label, +.admin-wrapper .with_block_label.radio_buttons .label_input .radio .label_input > label { + margin-bottom: 0; + padding-top: 0.1em; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > .input .label_input__wrapper > :not(.checkbox), +.admin-wrapper .fields-row > * > .input .label_input__wrapper > :not(.checkbox), +.admin-wrapper .label_input > ul > .input .label_input__wrapper > :not(.checkbox), +.admin-wrapper .label_input__wrapper > ul > .input .label_input__wrapper > :not(.checkbox), +.admin-wrapper .radio_buttons > ul > .input .label_input__wrapper > :not(.checkbox), +.admin-wrapper .with_block_label.radio_buttons .label_input > .input .label_input__wrapper > :not(.checkbox), +.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox .label_input__wrapper > :not(.checkbox), +.admin-wrapper .fields-row > * .checkbox .label_input__wrapper > :not(.checkbox), +.admin-wrapper .label_input > ul .checkbox .label_input__wrapper > :not(.checkbox), +.admin-wrapper .label_input__wrapper > ul .checkbox .label_input__wrapper > :not(.checkbox), +.admin-wrapper .radio_buttons > ul .checkbox .label_input__wrapper > :not(.checkbox), +.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox .label_input__wrapper > :not(.checkbox), +.admin-wrapper :not(.fields-row__column) > .fields-group .radio .label_input__wrapper > :not(.checkbox), +.admin-wrapper .fields-row > * .radio .label_input__wrapper > :not(.checkbox), +.admin-wrapper .label_input > ul .radio .label_input__wrapper > :not(.checkbox), +.admin-wrapper .label_input__wrapper > ul .radio .label_input__wrapper > :not(.checkbox), +.admin-wrapper .radio_buttons > ul .radio .label_input__wrapper > :not(.checkbox), +.admin-wrapper .with_block_label.radio_buttons .label_input .radio .label_input__wrapper > :not(.checkbox) { + margin-top: 0.4em; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > .input .checkbox, +.admin-wrapper .fields-row > * > .input .checkbox, +.admin-wrapper .label_input > ul > .input .checkbox, +.admin-wrapper .label_input__wrapper > ul > .input .checkbox, +.admin-wrapper .radio_buttons > ul > .input .checkbox, +.admin-wrapper .with_block_label.radio_buttons .label_input > .input .checkbox, +.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox .checkbox, +.admin-wrapper .fields-row > * .checkbox .checkbox, +.admin-wrapper .label_input > ul .checkbox .checkbox, +.admin-wrapper .label_input__wrapper > ul .checkbox .checkbox, +.admin-wrapper .radio_buttons > ul .checkbox .checkbox, +.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox .checkbox, +.admin-wrapper :not(.fields-row__column) > .fields-group .radio .checkbox, +.admin-wrapper .fields-row > * .radio .checkbox, +.admin-wrapper .label_input > ul .radio .checkbox, +.admin-wrapper .label_input__wrapper > ul .radio .checkbox, +.admin-wrapper .radio_buttons > ul .radio .checkbox, +.admin-wrapper .with_block_label.radio_buttons .label_input .radio .checkbox { + inset: 0; + padding: 1em !important; +} +.admin-wrapper :not(.fields-row__column) > .fields-group li.checkbox, +.admin-wrapper .fields-row > * li.checkbox, +.admin-wrapper .label_input > ul li.checkbox, +.admin-wrapper .label_input__wrapper > ul li.checkbox, +.admin-wrapper .radio_buttons > ul li.checkbox, +.admin-wrapper .with_block_label.radio_buttons .label_input li.checkbox { + width: calc(50% - 27px); +} +.admin-wrapper :not(.fields-row__column) > .fields-group li.checkbox label, +.admin-wrapper .fields-row > * li.checkbox label, +.admin-wrapper .label_input > ul li.checkbox label, +.admin-wrapper .label_input__wrapper > ul li.checkbox label, +.admin-wrapper .radio_buttons > ul li.checkbox label, +.admin-wrapper .with_block_label.radio_buttons .label_input li.checkbox label { + position: static; + padding-top: 0; +} +.admin-wrapper :not(.fields-row__column) > .fields-group li.checkbox label::before, +.admin-wrapper .fields-row > * li.checkbox label::before, +.admin-wrapper .label_input > ul li.checkbox label::before, +.admin-wrapper .label_input__wrapper > ul li.checkbox label::before, +.admin-wrapper .radio_buttons > ul li.checkbox label::before, +.admin-wrapper .with_block_label.radio_buttons .label_input li.checkbox label::before { + content: ""; + position: absolute; + inset: 0; +} +.admin-wrapper :not(.fields-row__column) > .fields-group li.checkbox label input, +.admin-wrapper .fields-row > * li.checkbox label input, +.admin-wrapper .label_input > ul li.checkbox label input, +.admin-wrapper .label_input__wrapper > ul li.checkbox label input, +.admin-wrapper .radio_buttons > ul li.checkbox label input, +.admin-wrapper .with_block_label.radio_buttons .label_input li.checkbox label input { + inset: 1em !important; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > h6, +.admin-wrapper .fields-row > * > h6, +.admin-wrapper .label_input > ul > h6, +.admin-wrapper .label_input__wrapper > ul > h6, +.admin-wrapper .radio_buttons > ul > h6, +.admin-wrapper .with_block_label.radio_buttons .label_input > h6, +.admin-wrapper :not(.fields-row__column) > .fields-group > p, +.admin-wrapper .fields-row > * > p, +.admin-wrapper .label_input > ul > p, +.admin-wrapper .label_input__wrapper > ul > p, +.admin-wrapper .radio_buttons > ul > p, +.admin-wrapper .with_block_label.radio_buttons .label_input > p { + margin: 0; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > h6:not(:last-child), +.admin-wrapper .fields-row > * > h6:not(:last-child), +.admin-wrapper .label_input > ul > h6:not(:last-child), +.admin-wrapper .label_input__wrapper > ul > h6:not(:last-child), +.admin-wrapper .radio_buttons > ul > h6:not(:last-child), +.admin-wrapper .with_block_label.radio_buttons .label_input > h6:not(:last-child), +.admin-wrapper :not(.fields-row__column) > .fields-group > p:not(:last-child), +.admin-wrapper .fields-row > * > p:not(:last-child), +.admin-wrapper .label_input > ul > p:not(:last-child), +.admin-wrapper .label_input__wrapper > ul > p:not(:last-child), +.admin-wrapper .radio_buttons > ul > p:not(:last-child), +.admin-wrapper .with_block_label.radio_buttons .label_input > p:not(:last-child) { + padding-bottom: 0; +} +.admin-wrapper ul { + flex-direction: row !important; + flex-wrap: wrap; + gap: 2px; + margin-top: 0.4em; +} +.admin-wrapper .spacer { + border-top: 1px solid var(--border-color) !important; +} +.batch-table, +.table, +:not(.batch-table__row__content) > table { + overflow: clip; + border-radius: var(--radius); + border-spacing: 0 2px; + border-collapse: separate; +} +.batch-table .batch-table__toolbar, +.table .batch-table__toolbar, +:not(.batch-table__row__content) > table .batch-table__toolbar, +.batch-table .batch-table__row, +.table .batch-table__row, +:not(.batch-table__row__content) > table .batch-table__row, +.batch-table tr > *, +.table tr > *, +:not(.batch-table__row__content) > table tr > * { + border: 0; + margin-bottom: 2px !important; +} +.batch-table td, +.table td, +:not(.batch-table__row__content) > table td, +.batch-table th, +.table th, +:not(.batch-table__row__content) > table th, +.batch-table .batch-table__row, +.table .batch-table__row, +:not(.batch-table__row__content) > table .batch-table__row { + position: relative; +} +.batch-table tr > td > div > span, +.table tr > td > div > span, +:not(.batch-table__row__content) > table tr > td > div > span, +.batch-table tr > th > div > span, +.table tr > th > div > span, +:not(.batch-table__row__content) > table tr > th > div > span { + padding-inline: 0.7em; + display: inline-block; +} +.keyboard-shortcuts td { + padding: 0.7em; +} +.batch-table .batch-table__row, +.table .batch-table__row, +:not(.batch-table__row__content) > table .batch-table__row, +.batch-table th, +.table th, +:not(.batch-table__row__content) > table th, +.batch-table > tbody > tr > td, +.table > tbody > tr > td, +:not(.batch-table__row__content) > table > tbody > tr > td, +.batch-table tfoot td, +.table tfoot td, +:not(.batch-table__row__content) > table tfoot td { + background: var(--elevated-color) !important; + vertical-align: middle; +} +.batch-table .batch-table__row::after, +.table .batch-table__row::after, +:not(.batch-table__row__content) > table .batch-table__row::after, +.batch-table th::after, +.table th::after, +:not(.batch-table__row__content) > table th::after, +.batch-table > tbody > tr > td::after, +.table > tbody > tr > td::after, +:not(.batch-table__row__content) > table > tbody > tr > td::after, +.batch-table tfoot td::after, +.table tfoot td::after, +:not(.batch-table__row__content) > table tfoot td::after { + content: ""; + position: absolute; + inset: 0 0; + background: var(--hover-color); + opacity: 0; + transition: 0.2s; + pointer-events: none; +} +.batch-table .batch-table__row:hover::after, +.table .batch-table__row:hover::after, +:not(.batch-table__row__content) > table .batch-table__row:hover::after, +.batch-table th:hover::after, +.table th:hover::after, +:not(.batch-table__row__content) > table th:hover::after, +.batch-table > tbody > tr > td:hover::after, +.table > tbody > tr > td:hover::after, +:not(.batch-table__row__content) > table > tbody > tr > td:hover::after, +.batch-table tfoot td:hover::after, +.table tfoot td:hover::after, +:not(.batch-table__row__content) > table tfoot td:hover::after, +.batch-table .batch-table__row:focus-within::after, +.table .batch-table__row:focus-within::after, +:not(.batch-table__row__content) > table .batch-table__row:focus-within::after, +.batch-table th:focus-within::after, +.table th:focus-within::after, +:not(.batch-table__row__content) > table th:focus-within::after, +.batch-table > tbody > tr > td:focus-within::after, +.table > tbody > tr > td:focus-within::after, +:not(.batch-table__row__content) > table > tbody > tr > td:focus-within::after, +.batch-table tfoot td:focus-within::after, +.table tfoot td:focus-within::after, +:not(.batch-table__row__content) > table tfoot td:focus-within::after { + opacity: 1; +} +.batch-table .batch-table__row > a:first-child:last-child, +.table .batch-table__row > a:first-child:last-child, +:not(.batch-table__row__content) > table .batch-table__row > a:first-child:last-child, +.batch-table th > a:first-child:last-child, +.table th > a:first-child:last-child, +:not(.batch-table__row__content) > table th > a:first-child:last-child, +.batch-table > tbody > tr > td > a:first-child:last-child, +.table > tbody > tr > td > a:first-child:last-child, +:not(.batch-table__row__content) > table > tbody > tr > td > a:first-child:last-child, +.batch-table tfoot td > a:first-child:last-child, +.table tfoot td > a:first-child:last-child, +:not(.batch-table__row__content) > table tfoot td > a:first-child:last-child { + margin: 0; + width: 100%; + padding: 0.5em; +} +.batch-table th:hover td:not([rowspan])::after, +.table th:hover td:not([rowspan])::after, +:not(.batch-table__row__content) > table th:hover td:not([rowspan])::after, +.batch-table tr:hover td:not([rowspan])::after, +.table tr:hover td:not([rowspan])::after, +:not(.batch-table__row__content) > table tr:hover td:not([rowspan])::after, +.batch-table th:hover th:not([rowspan])::after, +.table th:hover th:not([rowspan])::after, +:not(.batch-table__row__content) > table th:hover th:not([rowspan])::after, +.batch-table tr:hover th:not([rowspan])::after, +.table tr:hover th:not([rowspan])::after, +:not(.batch-table__row__content) > table tr:hover th:not([rowspan])::after { + opacity: 1 !important; +} +.batch-table th [rowspan]:hover ~ td::after, +.table th [rowspan]:hover ~ td::after, +:not(.batch-table__row__content) > table th [rowspan]:hover ~ td::after, +.batch-table tr [rowspan]:hover ~ td::after, +.table tr [rowspan]:hover ~ td::after, +:not(.batch-table__row__content) > table tr [rowspan]:hover ~ td::after { + opacity: 0 !important; +} +.batch-table th [rowspan]::after, +.table th [rowspan]::after, +:not(.batch-table__row__content) > table th [rowspan]::after, +.batch-table tr [rowspan]::after, +.table tr [rowspan]::after, +:not(.batch-table__row__content) > table tr [rowspan]::after { + inset-inline: -900px; +} +.layout-multiple-columns #mastodon .columns-area { + overflow: auto hidden !important; + padding: 0; +} +.layout-multiple-columns #mastodon .columns-area .scrollable:not(.scrollable--flex) { + padding: 0px !important; + padding-bottom: 40vh !important; +} +.layout-multiple-columns #mastodon .columns-area .scrollable:not(.scrollable--flex)::before { + content: ""; + position: absolute; + inset: 0; + background-color: inherit; + z-index: -1; +} +.layout-multiple-columns #mastodon .columns-area .scrollable:not(.scrollable--flex) .account-timeline__header { + margin: 0px !important; +} +.layout-multiple-columns #mastodon .columns-area .focusable, +.layout-multiple-columns #mastodon .columns-area .entry, +.layout-multiple-columns #mastodon .columns-area .statuses-grid__item .detailed-status, +.layout-multiple-columns #mastodon .columns-area .trends__item, +.layout-multiple-columns #mastodon .columns-area .story, +.layout-multiple-columns #mastodon .columns-area .account-card, +.layout-multiple-columns #mastodon .columns-area .scrollable :not(.focusable) > .account, +.layout-multiple-columns #mastodon .columns-area .timeline-hint { + border-radius: 0; +} +.layout-multiple-columns #mastodon .columns-area .focusable::before, +.layout-multiple-columns #mastodon .columns-area .entry::before, +.layout-multiple-columns #mastodon .columns-area .statuses-grid__item .detailed-status::before, +.layout-multiple-columns #mastodon .columns-area .trends__item::before, +.layout-multiple-columns #mastodon .columns-area .story::before, +.layout-multiple-columns #mastodon .columns-area .account-card::before, +.layout-multiple-columns #mastodon .columns-area .scrollable :not(.focusable) > .account::before, +.layout-multiple-columns #mastodon .columns-area .timeline-hint::before { + border-radius: 0 !important; +} +.layout-multiple-columns #mastodon .columns-area .focusable::after, +.layout-multiple-columns #mastodon .columns-area .entry::after, +.layout-multiple-columns #mastodon .columns-area .statuses-grid__item .detailed-status::after, +.layout-multiple-columns #mastodon .columns-area .trends__item::after, +.layout-multiple-columns #mastodon .columns-area .story::after, +.layout-multiple-columns #mastodon .columns-area .account-card::after, +.layout-multiple-columns #mastodon .columns-area .scrollable :not(.focusable) > .account::after, +.layout-multiple-columns #mastodon .columns-area .timeline-hint::after { + inset-inline: 0 !important; +} +.layout-multiple-columns #mastodon .columns-area [class*="explore__"] > * { + border-radius: var(--radius) !important; +} +.layout-multiple-columns #mastodon .columns-area .detailed-status__wrapper { + margin: 0 !important; +} +.layout-multiple-columns #mastodon .columns-area .status__action-bar { + margin-bottom: 0px; + gap: 0; + margin-inline-end: 0 !important; +} +.layout-multiple-columns #mastodon .columns-area .status__action-bar :not(i):not(.status__action-bar-spacer) { + display: flex; + flex-grow: 9999; + 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 .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; +} diff --git a/app/javascript/flavours/glitch/styles/modern-light.css b/app/javascript/flavours/glitch/styles/modern-light.css new file mode 100644 index 0000000000..54b26fda7a --- /dev/null +++ b/app/javascript/flavours/glitch/styles/modern-light.css @@ -0,0 +1,4249 @@ +@import 'glitch-fixes.css'; +@import 'mastodon-light'; + +: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 !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 .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; + } + .columns-area__panels__main .column, + .columns-area__panels__main .columns-area { + overflow: visible !important; + border-radius: var(--radius) var(--radius) 0 0 !important; + } + .columns-area__panels__main .column > :first-child, + .columns-area__panels__main .columns-area > :first-child { + border-radius: var(--radius) var(--radius) 0 0 !important; + } +} +@media (min-width: 1320px) { + .columns-area__panels__main { + max-width: var(--tl-width) !important; + padding: 0 15px; + margin: 0 10px; + } +} +@media (min-width: 890px) { + .columns-area__panels__main { + display: grid !important; + grid-template-columns: 100%; + } +} +.columns-area__panels__main > div { + border-radius: var(--radius) var(--radius) 0 0; + grid-row: 1; +} +.columns-area__panels__main > div:last-child { + box-shadow: var(--shadow-med); +} +.columns-area__panels__main :not(.scrollable--flex) > .scrollable { + padding-bottom: 40vh !important; +} +.columns-area__panels__main .column-actions { + position: static; +} +.columns-area__panels__main .column-actions .column-actions__background { + border-bottom-left-radius: var(--radius); +} +#mastodon .scrollable { + border-radius: var(--radius) var(--radius) 0 0 !important; + border: 0; +} +#mastodon .scrollable:first-child { + overflow: clip; +} +#mastodon .column-header__wrapper ~ .scrollable { + overflow: auto !important; +} +#mastodon .scrollable:not(.scrollable--flex), +#mastodon .activity-stream { + border: 0 !important; + contain: unset !important; +} +#mastodon .scrollable:not(.scrollable--flex):not(.activity-stream):not(.privacy-policy), +#mastodon .activity-stream:not(.activity-stream):not(.privacy-policy) { + padding: 10px; +} +#mastodon .scrollable:not(.scrollable--flex) > [tabindex]:first-child > .focusable, +#mastodon .activity-stream > [tabindex]:first-child > .focusable { + margin-top: 0 !important; +} +#mastodon .columns-area { + box-sizing: border-box; + padding-bottom: 0; + height: 100% !important; +} +#mastodon .explore__search-results { + padding: 10px; +} +#mastodon .dismissable-banner, +#mastodon .follow_requests-unlocked_explanation { + border-inline: 0; + border-top: 0; + margin: -10px; + margin-bottom: 10px; + border-radius: 0; + padding: 15px; + isolation: isolate; + overflow: hidden; +} +.dismissable-banner__message { + padding-block: 10px; + padding-inline-end: 30px; +} +.dismissable-banner__action { + margin: 10px; +} +#mastodon .column:not(.scrollable--flex) > .dismissable-banner { + border-radius: var(--radius) var(--radius) 0 0 !important; + margin: 0; +} +#mastodon .column:not(.scrollable--flex) > .dismissable-banner ~ .scrollable { + border-radius: 0 !important; +} +#mastodon .scrollable > .dismissable-banner { + margin: 0 !important; +} +#mastodon .empty-column-indicator { + contain: unset; + padding: 10px !important; + color: unset; + opacity: 0.8; + font-size: 1.2em; + line-height: 2; +} +#mastodon .empty-column-indicator a { + display: block; + font-weight: 700; + font-size: 1.1em; +} +#mastodon .scrollable--flex .account-timeline__header { + margin: 0 !important; +} +#mastodon .item-list { + background-color: inherit; + border-radius: var(--radius); +} +#mastodon .account-timeline__header { + margin: -10px; + margin-bottom: 10px; + background-color: inherit; + border-radius: var(--radius) !important; + animation: slideUp backwards 0.4s cubic-bezier(0, 1, 1, 1); +} +#mastodon .account-timeline__header .account__moved-note { + box-sizing: border-box; + border-radius: var(--radius); + margin-bottom: calc(0px - var(--radius)); + padding: 30px; + padding-bottom: calc(var(--radius) + 30px); + background: inherit; +} +#mastodon .account-timeline__header .account__moved-note .detailed-status__display-name { + overflow: visible !important; +} +#mastodon .account-timeline__header .account__header { + overflow: visible !important; + border-radius: var(--radius) var(--radius) 0 0; + background: inherit; +} +#mastodon .account-timeline__header .account__header__info { + z-index: 2; +} +#mastodon .account-timeline__header .account__header__image { + height: 0; + padding-bottom: 35%; + border-radius: var(--radius) var(--radius) 0 0; + position: sticky; + top: calc(0px - var(--radius)); + overflow: clip; +} +#mastodon .account-timeline__header .account__header__image img { + position: absolute; +} +#mastodon .account-timeline__header .account__header__image .account__header__info { + height: 100%; +} +#mastodon .account-timeline__header .account__header__image .account__header__info > span { + position: sticky; + top: var(--radius); +} +#mastodon .account-timeline__header .account__header__bar { + border: 0; + padding: 0 20px; + border-radius: var(--radius) var(--radius) 0 0; + margin-top: calc(0px - var(--radius)) !important; + display: flex; + flex-direction: column; + background: inherit; +} +body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header__bar { + background: inherit !important; +} +#mastodon .account-timeline__header .account__header__bar .account__header__tabs { + overflow: visible !important; + position: relative; + padding: 0; + padding-top: 10px; + height: unset !important; + margin-top: -55px !important; +} +#mastodon .account-timeline__header .account__header__bar .account__header__tabs::before { + content: ""; + position: absolute; + top: 0; + left: -20px; + right: -20px; + bottom: -40px; + backdrop-filter: blur(40px); + filter: brightness(1.1); + pointer-events: none; + opacity: 0.7; + clip-path: inset(55px 0 0 0 round var(--radius)); + mask: linear-gradient(transparent 55px, #000 50px, transparent); + -webkit-mask: linear-gradient(transparent 55px, #000 50px, transparent); +} +#mastodon .account-timeline__header .account__header__bar .account__header__tabs ~ div { + z-index: 2; +} +#mastodon .account-timeline__header .account__header__bar .avatar { + margin-inline-start: 0 !important; + overflow: visible !important; + position: relative; +} +#mastodon .account-timeline__header .account__header__bar .avatar .account-role { + position: absolute; + bottom: 0; + left: 100%; + border-radius: var(--radius-round); +} +#mastodon .account-timeline__header .account__header__bar .account__avatar { + border: 0; + box-shadow: var(--shadow); +} +#mastodon .account-timeline__header .account__header__tabs__name { + margin-bottom: 0; + padding: 0; + margin-top: 16px; +} +#mastodon .account-timeline__header .account__header__tabs__name h1 { + display: flex; + flex-wrap: wrap; + white-space: unset; + gap: 0 0.4em; +} +#mastodon .account-timeline__header .account__header__bio { + padding: 0; + margin: 0; +} +#mastodon .account-timeline__header .account__header__bio > * { + padding-inline: 0; +} +#mastodon .account-timeline__header .account__header__extra { + line-height: 1.5; + margin-top: 1em; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields, +#mastodon .account__header__account-note { + display: flex; + flex-wrap: wrap; + gap: 2px; + background: none; + border-radius: var(--radius); + overflow: hidden; + width: max-content; + max-width: 100%; + border: 0; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__fields:not(:first-child), +#mastodon .account__header__account-note.account__header__fields:not(:first-child) { + margin-top: 10px; + margin-bottom: -10px; +} +.public-account-bio .account__header__fields { + padding: 20px !important; + padding-bottom: 0 !important; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl, +#mastodon .account__header__account-note dl, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note { + display: inline; + border-radius: 0; + overflow: hidden; + border: 0; + padding: 8px 12px !important; + position: relative; + overflow: hidden; + flex-grow: 1; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl:not(.verified), +#mastodon .account__header__account-note dl:not(.verified), +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note:not(.verified), +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note:not(.verified) { + background-color: var(--elevated-color); +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dt, +#mastodon .account__header__account-note dl dt, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dt, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dt { + all: unset; + color: unset; + opacity: 0.9; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd, +#mastodon .account__header__account-note dl dd, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd { + padding: 0; + white-space: unset; + max-height: unset; + text-align: unset; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd > span > a:first-child:last-child::after, +#mastodon .account__header__account-note dl dd > span > a:first-child:last-child::after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child::after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child::after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd .h-card:first-child:last-child a::after, +#mastodon .account__header__account-note dl dd .h-card:first-child:last-child a::after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a::after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a::after { + content: ""; + position: absolute; + inset: 0; + background-color: var(--hover-color); + opacity: 0; + transition: opacity 0.2s; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd > span > a:first-child:last-child:hover:after, +#mastodon .account__header__account-note dl dd > span > a:first-child:last-child:hover:after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child:hover:after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child:hover:after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd .h-card:first-child:last-child a:hover:after, +#mastodon .account__header__account-note dl dd .h-card:first-child:last-child a:hover:after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a:hover:after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a:hover:after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd > span > a:first-child:last-child:focus:after, +#mastodon .account__header__account-note dl dd > span > a:first-child:last-child:focus:after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child:focus:after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child:focus:after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd .h-card:first-child:last-child a:focus:after, +#mastodon .account__header__account-note dl dd .h-card:first-child:last-child a:focus:after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a:focus:after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a:focus:after { + opacity: 1; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd.verified, +#mastodon .account__header__account-note dl dd.verified, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd.verified, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd.verified { + overflow: visible !important; + border: 0; + background: none; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd.verified a::before, +#mastodon .account__header__account-note dl dd.verified a::before, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd.verified a::before, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd.verified a::before, +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd.verified a::after, +#mastodon .account__header__account-note dl dd.verified a::after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd.verified a::after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd.verified a::after { + content: ""; + position: absolute; + inset: 0; + background: currentcolor; + opacity: 0.2; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd.verified a::after, +#mastodon .account__header__account-note dl dd.verified a::after, +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd.verified a::after, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd.verified a::after { + background: linear-gradient(20deg, currentcolor, transparent) !important; + opacity: 0.2 !important; + z-index: -2; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note { + display: flex; + margin-bottom: 10px; + gap: 0; + border: 0; + padding: 0 !important; + margin-inline: 0 !important; + background: none !important; + border-radius: 8px; + font-size: 12px; + width: unset; + background: none; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note label, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note label { + z-index: 2; + padding: 0 !important; + padding-inline-end: 0.7em !important; + pointer-events: none; + line-height: inherit; + font-size: inherit; + font-weight: inherit; + vertical-align: unset; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note:focus-within, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note:focus-within { + padding: 0.5em 0.7em !important; + margin-inline: -5px !important; + border: 1px solid; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note:not(:focus-within), +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note:not(:focus-within) { + border-radius: 0; + border-bottom: 1px solid; + padding-bottom: 0.4em !important; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note textarea, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note textarea { + width: 0; + flex-grow: 1; + margin: 0 !important; + border-radius: 0; + padding: 0; + margin: -100px !important; + padding: 100px !important; + padding-inline-end: 0.7em !important; + margin-inline-end: -0.7em !important; + line-height: inherit; + font-size: inherit; + font-weight: inherit; + vertical-align: unset; + background: none; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note textarea::placeholder, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note textarea::placeholder { + font-weight: 600; +} +#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note label, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note label { + margin: 0; + font-weight: 600; + padding-inline: 14px; +} +#mastodon .account__section-headline { + background: none; + position: relative; + z-index: 2; +} +.with-modals #mastodon .account__section-headline { + border: 0 !important; +} +#mastodon .account__section-headline a, +#mastodon .account__section-headline button { + background: none; + border-radius: 0 !important; +} +#mastodon .account__section-headline a span, +#mastodon .account__section-headline button span { + font-weight: 400; + opacity: 0.7; + transition: opacity 0.2s; +} +#mastodon .account__section-headline a.active span, +#mastodon .account__section-headline button.active span { + font-weight: 700; + opacity: 1; +} +#mastodon .account__section-headline a:hover span, +#mastodon .account__section-headline button:hover span, +#mastodon .account__section-headline a:active span, +#mastodon .account__section-headline button:active span { + opacity: 1 !important; +} +#mastodon .account__section-headline a::before, +#mastodon .account__section-headline button::before { + border-color: transparent transparent var(--border-color); +} +#mastodon .notification__filter-bar { + border: 0 !important; + margin-bottom: calc(0px - var(--radius)); + padding-bottom: var(--radius); +} +#mastodon .notification__filter-bar + .scrollable { + overflow: clip; +} +#mastodon .account-gallery__container { + border-radius: var(--radius); + overflow: clip; + padding: 0; + margin: 4px; + gap: 4px; + margin-bottom: calc(-40vh + 4px); +} +.account-gallery__item { + margin: 0; + flex: 1 1 calc(100px + 15%); + transition: flex 0.7s cubic-bezier(0, 0, 0, 1); + min-height: 180px !important; +} +.media-gallery__item-thumbnail { + transition: transform 0.2s; +} +.account-gallery__item:hover, +.account-gallery__item:focus-within { + flex-grow: 1.5; +} +.account-gallery__item:hover .media-gallery__item-thumbnail, +.account-gallery__item:focus-within .media-gallery__item-thumbnail { + transform: scale(1.02); +} +#mastodon .account-gallery__container > button { + width: unset; + flex-grow: 1; + flex: 1 1 calc(100px + 15% - 24px); + margin: 12px; + font-size: 1.2em; + font-weight: 700; + background: var(--elevated-color); + color: inherit; +} +#mastodon .account-gallery__container > button:hover:not(:focus) { + transform: scale(1.01); +} +#mastodon .scrollable > div:first-child > [tabindex="-1"]:last-child .status__wrapper::after { + content: unset; +} +.focusable, +.entry, +.statuses-grid__item .detailed-status, +.trends__item, +.story, +.account-card, +.scrollable :not(.focusable) > .account, +.timeline-hint { + overflow: 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)::after, +.entry:not(.detailed-status__wrapper):not(.status__wrapper)::after, +.statuses-grid__item .detailed-status:not(.detailed-status__wrapper):not(.status__wrapper)::after, +.trends__item:not(.detailed-status__wrapper):not(.status__wrapper)::after, +.story:not(.detailed-status__wrapper):not(.status__wrapper)::after, +.account-card:not(.detailed-status__wrapper):not(.status__wrapper)::after, +.scrollable :not(.focusable) > .account:not(.detailed-status__wrapper):not(.status__wrapper)::after, +.timeline-hint:not(.detailed-status__wrapper):not(.status__wrapper)::after { + content: ""; + position: absolute; + bottom: 0px; + inset-inline: var(--radius); + border-top: 1px solid var(--border-color); + pointer-events: none; +} +.status__wrapper-reply.status--in-thread::after { + top: 0; +} +.status--in-thread.status__wrapper-reply:not(.status--first-in-thread)::after, +.status--in-thread:not(.status__wrapper-reply)::after { + border-top: 0 !important; +} +.explore__links { + padding: 10px !important; + display: flex; + flex-wrap: wrap; +} +.explore__links .trends__item { + margin: 7.5px; + padding: 25px !important; + box-shadow: var(--shadow-med); + width: 200px; + background: var(--elevated-color); +} +.explore__links .trends__item::after { + content: unset !important; + inset: 0 !important; + border-radius: var(--radius); + pointer-events: none; + border: 1px solid var(--border-color) !important; +} +.explore__links .trends__item a { + font-size: 1.4em; + line-height: 1.7em; +} +.explore__links .trends__item .trends__item__sparkline { + height: 100%; +} +.explore__links .trends__item .trends__item__sparkline svg { + height: 100%; + float: right; + overflow: visible !important; + position: relative; + z-index: -1; +} +.explore__links .trends__item .trends__item__sparkline svg path { + display: unset !important; + transition: transform 1s; +} +.explore__links .trends__item .trends__item__sparkline svg path:first-child { + transform-origin: center; +} +.explore__links .trends__item:hover svg path:first-child, +.explore__links .trends__item:focus-within svg path:first-child { + transform: scale(2); +} +.focusable.trends__item, +.entry.trends__item, +.statuses-grid__item .detailed-status.trends__item, +.trends__item.trends__item, +.story.trends__item, +.account-card.trends__item, +.scrollable :not(.focusable) > .account.trends__item, +.timeline-hint.trends__item, +.focusable.story, +.entry.story, +.statuses-grid__item .detailed-status.story, +.trends__item.story, +.story.story, +.account-card.story, +.scrollable :not(.focusable) > .account.story, +.timeline-hint.story { + padding: 10px; + flex-grow: 1; +} +.focusable.story, +.entry.story, +.statuses-grid__item .detailed-status.story, +.trends__item.story, +.story.story, +.account-card.story, +.scrollable :not(.focusable) > .account.story, +.timeline-hint.story { + padding: 15px; +} +.focusable.story .story__details, +.entry.story .story__details, +.statuses-grid__item .detailed-status.story .story__details, +.trends__item.story .story__details, +.story.story .story__details, +.account-card.story .story__details, +.scrollable :not(.focusable) > .account.story .story__details, +.timeline-hint.story .story__details { + padding-inline-start: 0 !important; +} +.focusable.story .story__thumbnail, +.entry.story .story__thumbnail, +.statuses-grid__item .detailed-status.story .story__thumbnail, +.trends__item.story .story__thumbnail, +.story.story .story__thumbnail, +.account-card.story .story__thumbnail, +.scrollable :not(.focusable) > .account.story .story__thumbnail, +.timeline-hint.story .story__thumbnail { + margin-inline-end: 0; + border-radius: var(--radius); + overflow: hidden; +} +.focusable.account-card.account-card.account-card, +.entry.account-card.account-card.account-card, +.statuses-grid__item .detailed-status.account-card.account-card.account-card, +.trends__item.account-card.account-card.account-card, +.story.account-card.account-card.account-card, +.account-card.account-card.account-card.account-card, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card, +.timeline-hint.account-card.account-card.account-card { + display: flex; + flex-direction: column; + max-height: 320px; + margin: 0; + border-radius: var(--radius) !important; + box-shadow: var(--shadow); +} +.explore__suggestions, +.directory__list { + padding: 15px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 15px; +} +.explore__suggestions.directory__list, +.directory__list.directory__list { + padding: 15px 10px; +} +.focusable.account-card.account-card.account-card .account-card__header, +.entry.account-card.account-card.account-card .account-card__header, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__header, +.trends__item.account-card.account-card.account-card .account-card__header, +.story.account-card.account-card.account-card .account-card__header, +.account-card.account-card.account-card.account-card .account-card__header, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__header, +.timeline-hint.account-card.account-card.account-card .account-card__header { + padding: 0 !important; +} +.focusable.account-card.account-card.account-card .account-card__title, +.entry.account-card.account-card.account-card .account-card__title, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title, +.trends__item.account-card.account-card.account-card .account-card__title, +.story.account-card.account-card.account-card .account-card__title, +.account-card.account-card.account-card.account-card .account-card__title, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title, +.timeline-hint.account-card.account-card.account-card .account-card__title { + margin-bottom: 10px; + margin-top: -26px; +} +.focusable.account-card.account-card.account-card .account-card__title__avatar, +.entry.account-card.account-card.account-card .account-card__title__avatar, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title__avatar, +.trends__item.account-card.account-card.account-card .account-card__title__avatar, +.story.account-card.account-card.account-card .account-card__title__avatar, +.account-card.account-card.account-card.account-card .account-card__title__avatar, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title__avatar, +.timeline-hint.account-card.account-card.account-card .account-card__title__avatar { + padding-inline-end: 10px; + padding-bottom: 0; +} +.focusable.account-card.account-card.account-card .display-name, +.entry.account-card.account-card.account-card .display-name, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .display-name, +.trends__item.account-card.account-card.account-card .display-name, +.story.account-card.account-card.account-card .display-name, +.account-card.account-card.account-card.account-card .display-name, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .display-name, +.timeline-hint.account-card.account-card.account-card .display-name { + padding-bottom: 0; +} +.focusable.account-card.account-card.account-card .display-name__account, +.entry.account-card.account-card.account-card .display-name__account, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .display-name__account, +.trends__item.account-card.account-card.account-card .display-name__account, +.story.account-card.account-card.account-card .display-name__account, +.account-card.account-card.account-card.account-card .display-name__account, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .display-name__account, +.timeline-hint.account-card.account-card.account-card .display-name__account { + font-size: 0.9em !important; +} +.focusable.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.entry.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.trends__item.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.story.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.account-card.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.timeline-hint.account-card.account-card.account-card .account-card__title__avatar .account__avatar, +.focusable.account-card.account-card.account-card .account-card__title__avatar, +.entry.account-card.account-card.account-card .account-card__title__avatar, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title__avatar, +.trends__item.account-card.account-card.account-card .account-card__title__avatar, +.story.account-card.account-card.account-card .account-card__title__avatar, +.account-card.account-card.account-card.account-card .account-card__title__avatar, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title__avatar, +.timeline-hint.account-card.account-card.account-card .account-card__title__avatar { + width: 64px !important; + height: 64px !important; + background-size: 64px 64px !important; +} +.focusable.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.entry.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.trends__item.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.story.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.account-card.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.timeline-hint.account-card.account-card.account-card .account-card__title__avatar .account__avatar img, +.focusable.account-card.account-card.account-card .account-card__title__avatar img, +.entry.account-card.account-card.account-card .account-card__title__avatar img, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title__avatar img, +.trends__item.account-card.account-card.account-card .account-card__title__avatar img, +.story.account-card.account-card.account-card .account-card__title__avatar img, +.account-card.account-card.account-card.account-card .account-card__title__avatar img, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title__avatar img, +.timeline-hint.account-card.account-card.account-card .account-card__title__avatar img { + width: inherit; + height: inherit; +} +.focusable.account-card.account-card.account-card .account-card__title, +.entry.account-card.account-card.account-card .account-card__title, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__title, +.trends__item.account-card.account-card.account-card .account-card__title, +.story.account-card.account-card.account-card .account-card__title, +.account-card.account-card.account-card.account-card .account-card__title, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__title, +.timeline-hint.account-card.account-card.account-card .account-card__title { + padding-inline-end: 15px; +} +.focusable.account-card.account-card.account-card .display-name bdi, +.entry.account-card.account-card.account-card .display-name bdi, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .display-name bdi, +.trends__item.account-card.account-card.account-card .display-name bdi, +.story.account-card.account-card.account-card .display-name bdi, +.account-card.account-card.account-card.account-card .display-name bdi, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .display-name bdi, +.timeline-hint.account-card.account-card.account-card .display-name bdi { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} +.focusable.account-card.account-card.account-card .account-card__bio, +.entry.account-card.account-card.account-card .account-card__bio, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__bio, +.trends__item.account-card.account-card.account-card .account-card__bio, +.story.account-card.account-card.account-card .account-card__bio, +.account-card.account-card.account-card.account-card .account-card__bio, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__bio, +.timeline-hint.account-card.account-card.account-card .account-card__bio { + margin-top: 0 !important; + max-height: unset; + mask: linear-gradient(#000 65px, rgba(0,0,0,0.5), transparent); + -webkit-mask: linear-gradient(#000 65px, rgba(0,0,0,0.5), transparent); + flex-grow: 1; + margin-bottom: -50px; + margin-bottom: -15px; + font-size: 1em; + padding-bottom: 60px; +} +.focusable.account-card.account-card.account-card .account-card__bio::after, +.entry.account-card.account-card.account-card .account-card__bio::after, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__bio::after, +.trends__item.account-card.account-card.account-card .account-card__bio::after, +.story.account-card.account-card.account-card .account-card__bio::after, +.account-card.account-card.account-card.account-card .account-card__bio::after, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__bio::after, +.timeline-hint.account-card.account-card.account-card .account-card__bio::after { + content: unset !important; +} +.focusable.account-card.account-card.account-card .account-card__bio p, +.entry.account-card.account-card.account-card .account-card__bio p, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__bio p, +.trends__item.account-card.account-card.account-card .account-card__bio p, +.story.account-card.account-card.account-card .account-card__bio p, +.account-card.account-card.account-card.account-card .account-card__bio p, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__bio p, +.timeline-hint.account-card.account-card.account-card .account-card__bio p { + display: inline; +} +.focusable.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, +.entry.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, +.trends__item.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, +.story.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, +.account-card.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before, +.timeline-hint.account-card.account-card.account-card .account-card__bio p:not(:first-child)::before { + content: " · "; +} +.focusable.account-card.account-card.account-card .account-card__bio br, +.entry.account-card.account-card.account-card .account-card__bio br, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__bio br, +.trends__item.account-card.account-card.account-card .account-card__bio br, +.story.account-card.account-card.account-card .account-card__bio br, +.account-card.account-card.account-card.account-card .account-card__bio br, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__bio br, +.timeline-hint.account-card.account-card.account-card .account-card__bio br { + display: block; +} +.focusable.account-card.account-card.account-card .account-card__actions, +.entry.account-card.account-card.account-card .account-card__actions, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions, +.trends__item.account-card.account-card.account-card .account-card__actions, +.story.account-card.account-card.account-card .account-card__actions, +.account-card.account-card.account-card.account-card .account-card__actions, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions, +.timeline-hint.account-card.account-card.account-card .account-card__actions { + margin-top: auto !important; + display: unset !important; +} +.focusable.account-card.account-card.account-card .account-card__actions .account-card__counters, +.entry.account-card.account-card.account-card .account-card__actions .account-card__counters, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__counters, +.trends__item.account-card.account-card.account-card .account-card__actions .account-card__counters, +.story.account-card.account-card.account-card .account-card__actions .account-card__counters, +.account-card.account-card.account-card.account-card .account-card__actions .account-card__counters, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__counters, +.timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__counters { + display: flex; + gap: 1em; + padding-inline: 15px; +} +.focusable.account-card.account-card.account-card .account-card__actions .account-card__counters__item, +.entry.account-card.account-card.account-card .account-card__actions .account-card__counters__item, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__counters__item, +.trends__item.account-card.account-card.account-card .account-card__actions .account-card__counters__item, +.story.account-card.account-card.account-card .account-card__actions .account-card__counters__item, +.account-card.account-card.account-card.account-card .account-card__actions .account-card__counters__item, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__counters__item, +.timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__counters__item { + display: flex; + align-items: center; + font-size: 1em; +} +.focusable.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, +.entry.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, +.trends__item.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, +.story.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, +.account-card.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small, +.timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__counters__item > small { + display: inline !important; + margin-inline-start: 0.4em; + font-size: 1em !important; +} +.focusable.account-card.account-card.account-card .account-card__actions .account-card__actions__button, +.entry.account-card.account-card.account-card .account-card__actions .account-card__actions__button, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__actions__button, +.trends__item.account-card.account-card.account-card .account-card__actions .account-card__actions__button, +.story.account-card.account-card.account-card .account-card__actions .account-card__actions__button, +.account-card.account-card.account-card.account-card .account-card__actions .account-card__actions__button, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__actions__button, +.timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__actions__button { + position: absolute; + top: 10px; + right: 10px; + padding: 0; + background: rgba(0,0,0,0.4); + border-radius: var(--radius-round); + padding: 4px; + box-shadow: 0 4px 12px rgba(0,0,0,0.2); +} +.focusable.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.entry.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.trends__item.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.story.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.account-card.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__actions__button button, +.focusable.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, +.entry.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, +.trends__item.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, +.story.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, +.account-card.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__actions__button a, +.timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__actions__button a { + border-radius: var(--radius-round) !important; + padding: 0.7em 1.7em; + min-height: unset; + font-size: 14px !important; + line-height: 1.2; + font-size: 1em !important; +} +.focusable.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, +.entry.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, +.statuses-grid__item .detailed-status.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, +.trends__item.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, +.story.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, +.account-card.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty, +.timeline-hint.account-card.account-card.account-card .account-card__actions .account-card__actions__button:empty { + display: none; +} +.focusable.account-card.account-card.account-card::after, +.entry.account-card.account-card.account-card::after, +.statuses-grid__item .detailed-status.account-card.account-card.account-card::after, +.trends__item.account-card.account-card.account-card::after, +.story.account-card.account-card.account-card::after, +.account-card.account-card.account-card.account-card::after, +.scrollable :not(.focusable) > .account.account-card.account-card.account-card::after, +.timeline-hint.account-card.account-card.account-card::after { + content: unset !important; +} +.focusable.empty-column-indicator, +.entry.empty-column-indicator, +.statuses-grid__item .detailed-status.empty-column-indicator, +.trends__item.empty-column-indicator, +.story.empty-column-indicator, +.account-card.empty-column-indicator, +.scrollable :not(.focusable) > .account.empty-column-indicator, +.timeline-hint.empty-column-indicator { + display: block; +} +.focusable.timeline-hint, +.entry.timeline-hint, +.statuses-grid__item .detailed-status.timeline-hint, +.trends__item.timeline-hint, +.story.timeline-hint, +.account-card.timeline-hint, +.scrollable :not(.focusable) > .account.timeline-hint, +.timeline-hint.timeline-hint { + display: block; +} +.focusable.timeline-hint a::before, +.entry.timeline-hint a::before, +.statuses-grid__item .detailed-status.timeline-hint a::before, +.trends__item.timeline-hint a::before, +.story.timeline-hint a::before, +.account-card.timeline-hint a::before, +.scrollable :not(.focusable) > .account.timeline-hint a::before, +.timeline-hint.timeline-hint a::before { + content: ""; + position: absolute; + inset: 0; +} +#mastodon .status, +#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 .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: 8px; +} +#mastodon .hashtag-bar a, +#mastodon .hashtag-bar button { + font-size: 0.85em; + font-weight: 600; + padding: 0.2em 0.6em; + opacity: 0.7; + 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 { + z-index: 101; + grid-column: 2; + border: 0 !important; + transition: margin 0.2s cubic-bezier(0, 0, 0, 1.1), top 0.4s; +} +#mastodon .column-header, +#mastodon .column-inline-form { + font-weight: 600; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} +#mastodon .column-header ~ .scrollable, +#mastodon .column-inline-form ~ .scrollable { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; +} +@media (min-width: 890px) { + .layout-single-column .tabs-bar__wrapper, + .layout-single-column .column-back-button--slim .column-back-button { + width: 285px; + top: 0 !important; + top: var(--top) !important; + inset-inline: unset !important; + height: 50px !important; + margin-top: -50px !important; + margin-inline-start: 10px; + margin-top: 30px; + border-radius: var(--radius) var(--radius) !important; + box-shadow: 0 12px 12px -12px rgba(0,0,0,0.1); + } + .layout-single-column .tabs-bar__wrapper:not(.column-back-button), + .layout-single-column .column-back-button--slim .column-back-button:not(.column-back-button) { + padding-top: 0; + } + .layout-single-column .tabs-bar__wrapper .column-header__wrapper, + .layout-single-column .column-back-button--slim .column-back-button .column-header__wrapper { + gap: 2px !important; + display: flex; + flex-direction: column; + border-radius: var(--radius); + overflow: hidden; + } + .layout-single-column .tabs-bar__wrapper .column-back-button, + .layout-single-column .column-back-button--slim .column-back-button .column-back-button { + background: none; + } + .layout-single-column .tabs-bar__wrapper .column-header, + .layout-single-column .column-back-button--slim .column-back-button .column-header { + background: none !important; + overflow: hidden; + border: 0; + } + .layout-single-column .tabs-bar__wrapper .column-header > button, + .layout-single-column .column-back-button--slim .column-back-button .column-header > button { + z-index: 2; + } + .layout-single-column .tabs-bar__wrapper .column-header__buttons button, + .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button { + transition: background 0.2s, transform 0.3s !important; + position: relative; + border-radius: 100px !important; + min-width: 40px; + margin: 5px; + margin-inline-start: 0; + font-size: 0.9em; + padding-inline: 15px; + } + .layout-single-column .tabs-bar__wrapper .column-header__buttons button .icon-with-badge, + .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button .icon-with-badge { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + } + .layout-single-column .tabs-bar__wrapper .column-header__buttons button .icon-with-badge .icon-with-badge__badge, + .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button .icon-with-badge .icon-with-badge__badge { + right: -2px; + left: unset; + top: unset; + bottom: 0px; + border-radius: var(--radius-round); + } + .layout-single-column .tabs-bar__wrapper .column-header__buttons button .column-header__icon, + .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button .column-header__icon { + margin-inline-end: 0; + } + .layout-single-column .tabs-bar__wrapper .column-header__buttons button:not(.active), + .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button:not(.active) { + background: var(--elevated-color) !important; + } + .layout-single-column .tabs-bar__wrapper .column-header__buttons button::before, + .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button::before { + content: ""; + position: absolute; + inset: 0; + top: calc(100% + 5px); + bottom: -5px; + background: inherit; + z-index: -1; + transition: inset 0.1s; + border-radius: 100px; + pointer-events: none; + } + .layout-single-column .tabs-bar__wrapper .column-header__buttons button::after, + .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button::after { + position: absolute; + inset: 0; + background: var(--elevated-color); + border-radius: 100%; + } + .layout-single-column .tabs-bar__wrapper .column-header__buttons button.active::before, + .layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button.active::before { + inset: -10px -300px; + } + .layout-single-column .tabs-bar__wrapper .announcements, + .layout-single-column .column-back-button--slim .column-back-button .announcements, + .layout-single-column .tabs-bar__wrapper .column-header__collapsible:not(.collapsed), + .layout-single-column .column-back-button--slim .column-back-button .column-header__collapsible:not(.collapsed) { + flex-direction: column-reverse; + align-items: flex-start; + border: 0; + animation: slideDowFade 0.3s backwards cubic-bezier(0, 1, 0, 1.2); + } + .layout-single-column .tabs-bar__wrapper .column-header__collapsible, + .layout-single-column .column-back-button--slim .column-back-button .column-header__collapsible { + transition: none; + } + .layout-single-column .tabs-bar__wrapper .collapsed, + .layout-single-column .column-back-button--slim .column-back-button .collapsed { + display: none; + } + .layout-single-column .tabs-bar__wrapper .announcements__container, + .layout-single-column .column-back-button--slim .column-back-button .announcements__container { + width: 100% !important; + } + .layout-single-column .tabs-bar__wrapper .announcements__mastodon, + .layout-single-column .column-back-button--slim .column-back-button .announcements__mastodon { + z-index: -1; + position: relative; + } +} +@media (min-width: 890px) and (min-width: 1320px) { + .layout-single-column .tabs-bar__wrapper, + .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 { + display: none; + } + #mastodon .navigation-panel [href="/settings/preferences"] { + display: none !important; + } +} +.column-link { + border: 0; +} +@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: 1em !important; + font-size: 16px !important; + } + .column-link::before { + content: "" !important; + position: absolute; + border-radius: 100px; + width: unset !important; + height: unset !important; + inset: 0px 0px !important; + opacity: 0 !important; + background-color: rgba(150,150,150,0.1); + transition: opacity 0.2s; + } + .column-link.active { + opacity: 1 !important; + font-weight: 600; + } + .column-link:hover:before, + .column-link:focus:before { + opacity: 1 !important; + } + .column-link[href="/lists"] + div hr { + display: none; + } + .column-link[href="/lists"] + div .column-link { + margin-bottom: 2px; + } + .column-link[href="/lists"] + div .column-link i { + opacity: 0.2; + } +} +@media (min-width: 890px) { + #mastodon .getting-started__trends { + display: unset !important; + } +} +#mastodon .trends__item { + display: flex !important; +} +#mastodon .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) !important; + } + #mastodon .detailed-status__wrapper { + margin: 0 !important; + } + #mastodon .status__action-bar { + margin-bottom: 0px; + gap: 0; + margin-inline-end: 0 !important; + } + #mastodon .status__action-bar :not(i):not(.status__action-bar-spacer) { + display: flex; + flex-grow: 9999; + 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 { + z-index: 101; + border-bottom: 0; + box-sizing: content-box; + flex-wrap: wrap; + min-height: 55px; + height: auto; + position: relative; + padding-block: 10px; + box-sizing: border-box; + gap: 10px; + border: 0 !important; + overflow: visible; + } + .ui__header::after { + content: ""; + position: absolute; + inset-inline-end: 54px; + top: 100%; + width: var(--radius); + height: var(--radius); + background: inherit; + mask: radial-gradient(var(--radius) at 0px var(--radius), rgba(0,0,0,0) 100%, #000); + -webkit-mask: radial-gradient(var(--radius) at 0px var(--radius), rgba(0,0,0,0) 100%, #000); + z-index: 9999; + } + .rtl .ui__header::after { + transform: scaleX(-1); + } + .ui__header .ui__header__logo { + padding-block: 5px !important; + } + .ui__header .ui__header__links { + background: inherit; + } + .ui__header [href="/search"] { + margin-inline-end: 55px; + } + .ui__header [href^="/@"], + .ui__header a.permalink[href] { + position: fixed; + inset-inline-end: 1px; + width: 53px; + display: flex; + justify-content: center; + background: inherit; + } + .ui__header [href="/publish"] { + position: fixed; + bottom: 15px; + inset-inline-end: 15px; + border-radius: 100px !important; + height: 60px; + width: 60px; + font-size: 0; + box-shadow: var(--shadow-low); + background: inherit; + -webkit-user-drag: none; + -khtml-user-drag: none; + -moz-user-drag: none; + -o-user-drag: none; + user-drag: none; + animation: scaleIn 0.2s cubic-bezier(0, 0, 0, 1.1); + } + .ui__header [href="/publish"]::before { + content: ""; + font: normal normal normal 14px/1 FontAwesome; + position: absolute; + inset: 0; + display: flex; + justify-content: center; + align-items: center; + font-size: 24px; + } + .ui__header [href="/publish"]:active { + animation: rainbow 4s infinite linear !important; + } + #mastodon .tabs-bar__wrapper { + top: 0; + background: none; + } + #mastodon .column-back-button.column-back-button { + border-radius: 0 !important; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels { + flex-direction: column; + } + #mastodon:has(.navigation-panel__sign-in-banner) .ui__header::after { + content: unset; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__main { + width: 100%; + border-radius: 0 !important; + margin: 0 !important; + border: 0 !important; + } + #mastodon:has(.navigation-panel__sign-in-banner) .tabs-bar__wrapper { + transition: none !important; + } + #mastodon:has(.navigation-panel__sign-in-banner):has(.column-header__buttons:empty) .tabs-bar__wrapper { + margin-top: -50px; + margin-bottom: 2px; + height: 48px; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational { + display: contents; + } + #mastodon:has(.navigation-panel__sign-in-banner) .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(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel { + flex-direction: row; + margin: 0; + padding: 0; + height: auto; + padding: 12px 14px; + gap: 10px; + border-block: 1px solid; + overflow: scroll hidden; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel::-webkit-scrollbar { + display: none; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational hr { + display: none; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__name > span, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__sparkline { + display: none; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel__legal, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .getting-started__trends, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__name { + all: unset; + display: contents !important; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel__legal::before, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4::before, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .getting-started__trends::before, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item::before, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__name::before, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel__legal::after, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4::after, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .getting-started__trends::after, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item::after, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__name::after { + content: unset; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational:has(.getting-started__trends) .flex-spacer { + border-right: 1px solid; + margin-block: 10px; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational:has(.getting-started__trends) .navigation-panel::after { + content: ""; + position: sticky; + right: -20px; + min-width: 150px; + margin-left: -50px; + background: inherit; + mask: linear-gradient(to right, transparent, #000); + -webkit-mask: linear-gradient(to right, transparent, #000); + pointer-events: none; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational:has(.getting-started__trends) .trends__item:last-child a { + position: relative; + z-index: 3; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4 > span { + position: relative; + overflow: hidden; + border-radius: var(--radius); + padding: 0.8em 1.2em; + font-weight: 600; + font-size: 1.1em; + text-align: center; + min-width: max-content; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a i, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4 > span i { + font-size: 1em; + width: auto; + margin-right: 0; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a.active, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4 > span.active { + padding-inline: 1.2em; + position: relative; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a.active::before, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4 > span.active::before { + content: ""; + position: absolute; + inset: 0; + background: currentcolor; + opacity: 0.1; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a > span:not(:first-child), + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4 > span > span:not(:first-child) { + margin-left: 0.7em; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational span { + display: unset; + } + #mastodon .columns-area__panels { + justify-content: flex-start; + max-width: 100% !important; + flex-wrap: nowrap !important; + } + #mastodon .columns-area__panels__main { + padding: 0 !important; + max-width: unset; + border-start-end-radius: var(--radius); + overflow: clip !important; + margin-top: 1px !important; + flex-grow: 1; + } + #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 .notification__filter-bar + .scrollable { + border-radius: var(--radius) var(--radius) 0 0 !important; + } + #mastodon .columns-area { + padding-bottom: 0 !important; + overflow: hidden !important; + } + #mastodon .getting-started { + padding: 20px; + padding-bottom: 60px; + } + #mastodon .getting-started__wrapper { + flex-grow: 1; + overflow: visible !important; + } + #mastodon .about.about.about { + padding-inline: 10px !important; + } + #mastodon .about.about.about .account { + margin-top: 0; + } + #mastodon .about.about.about .about__header__hero, + #mastodon .about.about.about .about__section.active { + margin-inline: -11px !important; + width: unset; + border-radius: 0; + } + #mastodon .about.about.about .about__section.active { + margin-block: 20px !important; + } + #mastodon .about.about.about .about__section { + margin-bottom: 0; + border-bottom: 1px solid; + } +} +.admin-wrapper .sidebar-wrapper { + overflow: visible !important; + width: unset; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner { + position: sticky; + top: 0; + max-height: 100vh !important; + overflow-y: auto !important; + pointer-events: all !important; + z-index: 100; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .fa { + margin-inline-end: 1em !important; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li { + overflow: hidden; + margin-inline: 15px !important; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li > a:not(.selected) { + background: none; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li a { + display: flex !important; + align-items: center; + white-space: unset; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li.selected { + margin: 6px; + border-radius: var(--radius); +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li.selected > a.selected { + font-weight: 600; + color: unset; + position: relative; + overflow: visible; + border-radius: 0 !important; + border: 0; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li.selected > a.selected::after { + content: ""; + position: absolute; + top: 100%; + inset-inline: 0; + height: 9999px; + background: inherit; + z-index: -1; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li > ul { + border-radius: var(--radius) !important; + overflow: hidden !important; + gap: 2px !important; + margin: 8px; + margin-top: 0; + background: none; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li > ul > li { + border-radius: 8px; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li > ul > li:not(:first-child):not(:last-child) { + margin-block: 2px; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li > ul > li a { + padding: 14px 16px; + font-weight: 600; + border: 0; +} +.admin-wrapper .sidebar-wrapper .sidebar-wrapper__inner .sidebar > ul > li > ul > li:not(.selected) a { + background-color: rgba(150,150,250,0.1); +} +.admin-wrapper .content__heading { + margin-bottom: 2em; +} +.admin-wrapper h4 { + margin: 0; + border-bottom: 0; +} +.admin-wrapper form > h4 { + margin-top: 2em !important; + border-bottom: 0; + margin-bottom: 0 !important; +} +.admin-wrapper .flash-message, +.admin-wrapper .applications-list__item, +.admin-wrapper .filters-list__item { + border-radius: var(--radius); + border: 0; + overflow: clip; +} +.admin-wrapper .fields-row { + margin-inline: 0; + border-radius: var(--radius); + overflow: clip; + padding-top: 0; + gap: 2px; + display: flex; + flex-wrap: wrap; +} +.admin-wrapper .fields-group:not(.fields-row__column), +.admin-wrapper .fields-row { + margin-bottom: 1em !important; +} +.admin-wrapper .fields-row__column { + max-width: unset; + width: 300px; + border-radius: 0 !important; + display: flex; + flex-direction: column; + flex-grow: 1; + margin: 0 !important; +} +.admin-wrapper .fields-row__column .fields-group { + border-radius: 0 !important; + margin: 0 !important; +} +.admin-wrapper .fields-row__column .fields-group > .with_block_label { + display: flex; + flex-direction: column; + height: 100%; +} +.admin-wrapper .fields-row__column .fields-group > .with_block_label > .label_input { + flex-grow: 1; +} +.admin-wrapper .fields-row__column .fields-group > .with_block_label > .label_input > textarea { + min-height: 100%; +} +.admin-wrapper .fields-row__column > :last-child { + flex-grow: 1; + align-items: flex-start; + border: 0; +} +.admin-wrapper .fields-row__column > :not(:first-child):not(:last-child) { + padding-block: 0.5em !important; + margin-block: -3px; +} +.admin-wrapper :not(.fields-row__column) > .fields-group, +.admin-wrapper .fields-row > *, +.admin-wrapper .label_input > ul, +.admin-wrapper .label_input__wrapper > ul, +.admin-wrapper .radio_buttons > ul, +.admin-wrapper .with_block_label.radio_buttons .label_input { + border-radius: var(--radius); + overflow: clip; + padding: 0; + display: flex; + flex-direction: column; + gap: 2px; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > *, +.admin-wrapper .fields-row > * > *, +.admin-wrapper .label_input > ul > *, +.admin-wrapper .label_input__wrapper > ul > *, +.admin-wrapper .radio_buttons > ul > *, +.admin-wrapper .with_block_label.radio_buttons .label_input > * { + background-color: var(--elevated-color); + padding: 0.8rem; + margin-block: 0px; + position: relative; + border-radius: 0 !important; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > *:not(p):not(h6):not(.input-copy)::after, +.admin-wrapper .fields-row > * > *:not(p):not(h6):not(.input-copy)::after, +.admin-wrapper .label_input > ul > *:not(p):not(h6):not(.input-copy)::after, +.admin-wrapper .label_input__wrapper > ul > *:not(p):not(h6):not(.input-copy)::after, +.admin-wrapper .radio_buttons > ul > *:not(p):not(h6):not(.input-copy)::after, +.admin-wrapper .with_block_label.radio_buttons .label_input > *:not(p):not(h6):not(.input-copy)::after { + content: ""; + position: absolute; + inset: 0; + background-color: var(--hover-color); + z-index: -1; + opacity: 0; + transition: opacity 0.2s; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > *:not(p):not(h6):not(.input-copy):hover::after, +.admin-wrapper .fields-row > * > *:not(p):not(h6):not(.input-copy):hover::after, +.admin-wrapper .label_input > ul > *:not(p):not(h6):not(.input-copy):hover::after, +.admin-wrapper .label_input__wrapper > ul > *:not(p):not(h6):not(.input-copy):hover::after, +.admin-wrapper .radio_buttons > ul > *:not(p):not(h6):not(.input-copy):hover::after, +.admin-wrapper .with_block_label.radio_buttons .label_input > *:not(p):not(h6):not(.input-copy):hover::after, +.admin-wrapper :not(.fields-row__column) > .fields-group > *:not(p):not(h6):not(.input-copy):focus-within::after, +.admin-wrapper .fields-row > * > *:not(p):not(h6):not(.input-copy):focus-within::after, +.admin-wrapper .label_input > ul > *:not(p):not(h6):not(.input-copy):focus-within::after, +.admin-wrapper .label_input__wrapper > ul > *:not(p):not(h6):not(.input-copy):focus-within::after, +.admin-wrapper .radio_buttons > ul > *:not(p):not(h6):not(.input-copy):focus-within::after, +.admin-wrapper .with_block_label.radio_buttons .label_input > *:not(p):not(h6):not(.input-copy):focus-within::after { + opacity: 1; +} +.admin-wrapper :not(.fields-row__column) > .fields-group .input-copy__wrapper, +.admin-wrapper .fields-row > * .input-copy__wrapper, +.admin-wrapper .label_input > ul .input-copy__wrapper, +.admin-wrapper .label_input__wrapper > ul .input-copy__wrapper, +.admin-wrapper .radio_buttons > ul .input-copy__wrapper, +.admin-wrapper .with_block_label.radio_buttons .label_input .input-copy__wrapper { + border: 1px solid var(--border-color-2); + border-radius: var(--radius); +} +.admin-wrapper :not(.fields-row__column) > .fields-group > .input, +.admin-wrapper .fields-row > * > .input, +.admin-wrapper .label_input > ul > .input, +.admin-wrapper .label_input__wrapper > ul > .input, +.admin-wrapper .radio_buttons > ul > .input, +.admin-wrapper .with_block_label.radio_buttons .label_input > .input, +.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox, +.admin-wrapper .fields-row > * .checkbox, +.admin-wrapper .label_input > ul .checkbox, +.admin-wrapper .label_input__wrapper > ul .checkbox, +.admin-wrapper .radio_buttons > ul .checkbox, +.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox, +.admin-wrapper :not(.fields-row__column) > .fields-group .radio, +.admin-wrapper .fields-row > * .radio, +.admin-wrapper .label_input > ul .radio, +.admin-wrapper .label_input__wrapper > ul .radio, +.admin-wrapper .radio_buttons > ul .radio, +.admin-wrapper .with_block_label.radio_buttons .label_input .radio { + flex-grow: 1; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > .input:not(:last-child), +.admin-wrapper .fields-row > * > .input:not(:last-child), +.admin-wrapper .label_input > ul > .input:not(:last-child), +.admin-wrapper .label_input__wrapper > ul > .input:not(:last-child), +.admin-wrapper .radio_buttons > ul > .input:not(:last-child), +.admin-wrapper .with_block_label.radio_buttons .label_input > .input:not(:last-child), +.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox:not(:last-child), +.admin-wrapper .fields-row > * .checkbox:not(:last-child), +.admin-wrapper .label_input > ul .checkbox:not(:last-child), +.admin-wrapper .label_input__wrapper > ul .checkbox:not(:last-child), +.admin-wrapper .radio_buttons > ul .checkbox:not(:last-child), +.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox:not(:last-child), +.admin-wrapper :not(.fields-row__column) > .fields-group .radio:not(:last-child), +.admin-wrapper .fields-row > * .radio:not(:last-child), +.admin-wrapper .label_input > ul .radio:not(:last-child), +.admin-wrapper .label_input__wrapper > ul .radio:not(:last-child), +.admin-wrapper .radio_buttons > ul .radio:not(:last-child), +.admin-wrapper .with_block_label.radio_buttons .label_input .radio:not(:last-child) { + margin-bottom: 2px; + margin-bottom: 0; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > .input.radio .hint, +.admin-wrapper .fields-row > * > .input.radio .hint, +.admin-wrapper .label_input > ul > .input.radio .hint, +.admin-wrapper .label_input__wrapper > ul > .input.radio .hint, +.admin-wrapper .radio_buttons > ul > .input.radio .hint, +.admin-wrapper .with_block_label.radio_buttons .label_input > .input.radio .hint, +.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox.radio .hint, +.admin-wrapper .fields-row > * .checkbox.radio .hint, +.admin-wrapper .label_input > ul .checkbox.radio .hint, +.admin-wrapper .label_input__wrapper > ul .checkbox.radio .hint, +.admin-wrapper .radio_buttons > ul .checkbox.radio .hint, +.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox.radio .hint, +.admin-wrapper :not(.fields-row__column) > .fields-group .radio.radio .hint, +.admin-wrapper .fields-row > * .radio.radio .hint, +.admin-wrapper .label_input > ul .radio.radio .hint, +.admin-wrapper .label_input__wrapper > ul .radio.radio .hint, +.admin-wrapper .radio_buttons > ul .radio.radio .hint, +.admin-wrapper .with_block_label.radio_buttons .label_input .radio.radio .hint, +.admin-wrapper :not(.fields-row__column) > .fields-group > .input.checkbox .hint, +.admin-wrapper .fields-row > * > .input.checkbox .hint, +.admin-wrapper .label_input > ul > .input.checkbox .hint, +.admin-wrapper .label_input__wrapper > ul > .input.checkbox .hint, +.admin-wrapper .radio_buttons > ul > .input.checkbox .hint, +.admin-wrapper .with_block_label.radio_buttons .label_input > .input.checkbox .hint, +.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox.checkbox .hint, +.admin-wrapper .fields-row > * .checkbox.checkbox .hint, +.admin-wrapper .label_input > ul .checkbox.checkbox .hint, +.admin-wrapper .label_input__wrapper > ul .checkbox.checkbox .hint, +.admin-wrapper .radio_buttons > ul .checkbox.checkbox .hint, +.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox.checkbox .hint, +.admin-wrapper :not(.fields-row__column) > .fields-group .radio.checkbox .hint, +.admin-wrapper .fields-row > * .radio.checkbox .hint, +.admin-wrapper .label_input > ul .radio.checkbox .hint, +.admin-wrapper .label_input__wrapper > ul .radio.checkbox .hint, +.admin-wrapper .radio_buttons > ul .radio.checkbox .hint, +.admin-wrapper .with_block_label.radio_buttons .label_input .radio.checkbox .hint, +.admin-wrapper :not(.fields-row__column) > .fields-group > .input.radio label, +.admin-wrapper .fields-row > * > .input.radio label, +.admin-wrapper .label_input > ul > .input.radio label, +.admin-wrapper .label_input__wrapper > ul > .input.radio label, +.admin-wrapper .radio_buttons > ul > .input.radio label, +.admin-wrapper .with_block_label.radio_buttons .label_input > .input.radio label, +.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox.radio label, +.admin-wrapper .fields-row > * .checkbox.radio label, +.admin-wrapper .label_input > ul .checkbox.radio label, +.admin-wrapper .label_input__wrapper > ul .checkbox.radio label, +.admin-wrapper .radio_buttons > ul .checkbox.radio label, +.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox.radio label, +.admin-wrapper :not(.fields-row__column) > .fields-group .radio.radio label, +.admin-wrapper .fields-row > * .radio.radio label, +.admin-wrapper .label_input > ul .radio.radio label, +.admin-wrapper .label_input__wrapper > ul .radio.radio label, +.admin-wrapper .radio_buttons > ul .radio.radio label, +.admin-wrapper .with_block_label.radio_buttons .label_input .radio.radio label, +.admin-wrapper :not(.fields-row__column) > .fields-group > .input.checkbox label, +.admin-wrapper .fields-row > * > .input.checkbox label, +.admin-wrapper .label_input > ul > .input.checkbox label, +.admin-wrapper .label_input__wrapper > ul > .input.checkbox label, +.admin-wrapper .radio_buttons > ul > .input.checkbox label, +.admin-wrapper .with_block_label.radio_buttons .label_input > .input.checkbox label, +.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox.checkbox label, +.admin-wrapper .fields-row > * .checkbox.checkbox label, +.admin-wrapper .label_input > ul .checkbox.checkbox label, +.admin-wrapper .label_input__wrapper > ul .checkbox.checkbox label, +.admin-wrapper .radio_buttons > ul .checkbox.checkbox label, +.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox.checkbox label, +.admin-wrapper :not(.fields-row__column) > .fields-group .radio.checkbox label, +.admin-wrapper .fields-row > * .radio.checkbox label, +.admin-wrapper .label_input > ul .radio.checkbox label, +.admin-wrapper .label_input__wrapper > ul .radio.checkbox label, +.admin-wrapper .radio_buttons > ul .radio.checkbox label, +.admin-wrapper .with_block_label.radio_buttons .label_input .radio.checkbox label { + margin-bottom: 0 !important; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > .input .label_input, +.admin-wrapper .fields-row > * > .input .label_input, +.admin-wrapper .label_input > ul > .input .label_input, +.admin-wrapper .label_input__wrapper > ul > .input .label_input, +.admin-wrapper .radio_buttons > ul > .input .label_input, +.admin-wrapper .with_block_label.radio_buttons .label_input > .input .label_input, +.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox .label_input, +.admin-wrapper .fields-row > * .checkbox .label_input, +.admin-wrapper .label_input > ul .checkbox .label_input, +.admin-wrapper .label_input__wrapper > ul .checkbox .label_input, +.admin-wrapper .radio_buttons > ul .checkbox .label_input, +.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox .label_input, +.admin-wrapper :not(.fields-row__column) > .fields-group .radio .label_input, +.admin-wrapper .fields-row > * .radio .label_input, +.admin-wrapper .label_input > ul .radio .label_input, +.admin-wrapper .label_input__wrapper > ul .radio .label_input, +.admin-wrapper .radio_buttons > ul .radio .label_input, +.admin-wrapper .with_block_label.radio_buttons .label_input .radio .label_input { + flex-direction: column; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > .input .label_input > label, +.admin-wrapper .fields-row > * > .input .label_input > label, +.admin-wrapper .label_input > ul > .input .label_input > label, +.admin-wrapper .label_input__wrapper > ul > .input .label_input > label, +.admin-wrapper .radio_buttons > ul > .input .label_input > label, +.admin-wrapper .with_block_label.radio_buttons .label_input > .input .label_input > label, +.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox .label_input > label, +.admin-wrapper .fields-row > * .checkbox .label_input > label, +.admin-wrapper .label_input > ul .checkbox .label_input > label, +.admin-wrapper .label_input__wrapper > ul .checkbox .label_input > label, +.admin-wrapper .radio_buttons > ul .checkbox .label_input > label, +.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox .label_input > label, +.admin-wrapper :not(.fields-row__column) > .fields-group .radio .label_input > label, +.admin-wrapper .fields-row > * .radio .label_input > label, +.admin-wrapper .label_input > ul .radio .label_input > label, +.admin-wrapper .label_input__wrapper > ul .radio .label_input > label, +.admin-wrapper .radio_buttons > ul .radio .label_input > label, +.admin-wrapper .with_block_label.radio_buttons .label_input .radio .label_input > label { + margin-bottom: 0; + padding-top: 0.1em; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > .input .label_input__wrapper > :not(.checkbox), +.admin-wrapper .fields-row > * > .input .label_input__wrapper > :not(.checkbox), +.admin-wrapper .label_input > ul > .input .label_input__wrapper > :not(.checkbox), +.admin-wrapper .label_input__wrapper > ul > .input .label_input__wrapper > :not(.checkbox), +.admin-wrapper .radio_buttons > ul > .input .label_input__wrapper > :not(.checkbox), +.admin-wrapper .with_block_label.radio_buttons .label_input > .input .label_input__wrapper > :not(.checkbox), +.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox .label_input__wrapper > :not(.checkbox), +.admin-wrapper .fields-row > * .checkbox .label_input__wrapper > :not(.checkbox), +.admin-wrapper .label_input > ul .checkbox .label_input__wrapper > :not(.checkbox), +.admin-wrapper .label_input__wrapper > ul .checkbox .label_input__wrapper > :not(.checkbox), +.admin-wrapper .radio_buttons > ul .checkbox .label_input__wrapper > :not(.checkbox), +.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox .label_input__wrapper > :not(.checkbox), +.admin-wrapper :not(.fields-row__column) > .fields-group .radio .label_input__wrapper > :not(.checkbox), +.admin-wrapper .fields-row > * .radio .label_input__wrapper > :not(.checkbox), +.admin-wrapper .label_input > ul .radio .label_input__wrapper > :not(.checkbox), +.admin-wrapper .label_input__wrapper > ul .radio .label_input__wrapper > :not(.checkbox), +.admin-wrapper .radio_buttons > ul .radio .label_input__wrapper > :not(.checkbox), +.admin-wrapper .with_block_label.radio_buttons .label_input .radio .label_input__wrapper > :not(.checkbox) { + margin-top: 0.4em; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > .input .checkbox, +.admin-wrapper .fields-row > * > .input .checkbox, +.admin-wrapper .label_input > ul > .input .checkbox, +.admin-wrapper .label_input__wrapper > ul > .input .checkbox, +.admin-wrapper .radio_buttons > ul > .input .checkbox, +.admin-wrapper .with_block_label.radio_buttons .label_input > .input .checkbox, +.admin-wrapper :not(.fields-row__column) > .fields-group .checkbox .checkbox, +.admin-wrapper .fields-row > * .checkbox .checkbox, +.admin-wrapper .label_input > ul .checkbox .checkbox, +.admin-wrapper .label_input__wrapper > ul .checkbox .checkbox, +.admin-wrapper .radio_buttons > ul .checkbox .checkbox, +.admin-wrapper .with_block_label.radio_buttons .label_input .checkbox .checkbox, +.admin-wrapper :not(.fields-row__column) > .fields-group .radio .checkbox, +.admin-wrapper .fields-row > * .radio .checkbox, +.admin-wrapper .label_input > ul .radio .checkbox, +.admin-wrapper .label_input__wrapper > ul .radio .checkbox, +.admin-wrapper .radio_buttons > ul .radio .checkbox, +.admin-wrapper .with_block_label.radio_buttons .label_input .radio .checkbox { + inset: 0; + padding: 1em !important; +} +.admin-wrapper :not(.fields-row__column) > .fields-group li.checkbox, +.admin-wrapper .fields-row > * li.checkbox, +.admin-wrapper .label_input > ul li.checkbox, +.admin-wrapper .label_input__wrapper > ul li.checkbox, +.admin-wrapper .radio_buttons > ul li.checkbox, +.admin-wrapper .with_block_label.radio_buttons .label_input li.checkbox { + width: calc(50% - 27px); +} +.admin-wrapper :not(.fields-row__column) > .fields-group li.checkbox label, +.admin-wrapper .fields-row > * li.checkbox label, +.admin-wrapper .label_input > ul li.checkbox label, +.admin-wrapper .label_input__wrapper > ul li.checkbox label, +.admin-wrapper .radio_buttons > ul li.checkbox label, +.admin-wrapper .with_block_label.radio_buttons .label_input li.checkbox label { + position: static; + padding-top: 0; +} +.admin-wrapper :not(.fields-row__column) > .fields-group li.checkbox label::before, +.admin-wrapper .fields-row > * li.checkbox label::before, +.admin-wrapper .label_input > ul li.checkbox label::before, +.admin-wrapper .label_input__wrapper > ul li.checkbox label::before, +.admin-wrapper .radio_buttons > ul li.checkbox label::before, +.admin-wrapper .with_block_label.radio_buttons .label_input li.checkbox label::before { + content: ""; + position: absolute; + inset: 0; +} +.admin-wrapper :not(.fields-row__column) > .fields-group li.checkbox label input, +.admin-wrapper .fields-row > * li.checkbox label input, +.admin-wrapper .label_input > ul li.checkbox label input, +.admin-wrapper .label_input__wrapper > ul li.checkbox label input, +.admin-wrapper .radio_buttons > ul li.checkbox label input, +.admin-wrapper .with_block_label.radio_buttons .label_input li.checkbox label input { + inset: 1em !important; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > h6, +.admin-wrapper .fields-row > * > h6, +.admin-wrapper .label_input > ul > h6, +.admin-wrapper .label_input__wrapper > ul > h6, +.admin-wrapper .radio_buttons > ul > h6, +.admin-wrapper .with_block_label.radio_buttons .label_input > h6, +.admin-wrapper :not(.fields-row__column) > .fields-group > p, +.admin-wrapper .fields-row > * > p, +.admin-wrapper .label_input > ul > p, +.admin-wrapper .label_input__wrapper > ul > p, +.admin-wrapper .radio_buttons > ul > p, +.admin-wrapper .with_block_label.radio_buttons .label_input > p { + margin: 0; +} +.admin-wrapper :not(.fields-row__column) > .fields-group > h6:not(:last-child), +.admin-wrapper .fields-row > * > h6:not(:last-child), +.admin-wrapper .label_input > ul > h6:not(:last-child), +.admin-wrapper .label_input__wrapper > ul > h6:not(:last-child), +.admin-wrapper .radio_buttons > ul > h6:not(:last-child), +.admin-wrapper .with_block_label.radio_buttons .label_input > h6:not(:last-child), +.admin-wrapper :not(.fields-row__column) > .fields-group > p:not(:last-child), +.admin-wrapper .fields-row > * > p:not(:last-child), +.admin-wrapper .label_input > ul > p:not(:last-child), +.admin-wrapper .label_input__wrapper > ul > p:not(:last-child), +.admin-wrapper .radio_buttons > ul > p:not(:last-child), +.admin-wrapper .with_block_label.radio_buttons .label_input > p:not(:last-child) { + padding-bottom: 0; +} +.admin-wrapper ul { + flex-direction: row !important; + flex-wrap: wrap; + gap: 2px; + margin-top: 0.4em; +} +.admin-wrapper .spacer { + border-top: 1px solid var(--border-color) !important; +} +.batch-table, +.table, +:not(.batch-table__row__content) > table { + overflow: clip; + border-radius: var(--radius); + border-spacing: 0 2px; + border-collapse: separate; +} +.batch-table .batch-table__toolbar, +.table .batch-table__toolbar, +:not(.batch-table__row__content) > table .batch-table__toolbar, +.batch-table .batch-table__row, +.table .batch-table__row, +:not(.batch-table__row__content) > table .batch-table__row, +.batch-table tr > *, +.table tr > *, +:not(.batch-table__row__content) > table tr > * { + border: 0; + margin-bottom: 2px !important; +} +.batch-table td, +.table td, +:not(.batch-table__row__content) > table td, +.batch-table th, +.table th, +:not(.batch-table__row__content) > table th, +.batch-table .batch-table__row, +.table .batch-table__row, +:not(.batch-table__row__content) > table .batch-table__row { + position: relative; +} +.batch-table tr > td > div > span, +.table tr > td > div > span, +:not(.batch-table__row__content) > table tr > td > div > span, +.batch-table tr > th > div > span, +.table tr > th > div > span, +:not(.batch-table__row__content) > table tr > th > div > span { + padding-inline: 0.7em; + display: inline-block; +} +.keyboard-shortcuts td { + padding: 0.7em; +} +.batch-table .batch-table__row, +.table .batch-table__row, +:not(.batch-table__row__content) > table .batch-table__row, +.batch-table th, +.table th, +:not(.batch-table__row__content) > table th, +.batch-table > tbody > tr > td, +.table > tbody > tr > td, +:not(.batch-table__row__content) > table > tbody > tr > td, +.batch-table tfoot td, +.table tfoot td, +:not(.batch-table__row__content) > table tfoot td { + background: var(--elevated-color) !important; + vertical-align: middle; +} +.batch-table .batch-table__row::after, +.table .batch-table__row::after, +:not(.batch-table__row__content) > table .batch-table__row::after, +.batch-table th::after, +.table th::after, +:not(.batch-table__row__content) > table th::after, +.batch-table > tbody > tr > td::after, +.table > tbody > tr > td::after, +:not(.batch-table__row__content) > table > tbody > tr > td::after, +.batch-table tfoot td::after, +.table tfoot td::after, +:not(.batch-table__row__content) > table tfoot td::after { + content: ""; + position: absolute; + inset: 0 0; + background: var(--hover-color); + opacity: 0; + transition: 0.2s; + pointer-events: none; +} +.batch-table .batch-table__row:hover::after, +.table .batch-table__row:hover::after, +:not(.batch-table__row__content) > table .batch-table__row:hover::after, +.batch-table th:hover::after, +.table th:hover::after, +:not(.batch-table__row__content) > table th:hover::after, +.batch-table > tbody > tr > td:hover::after, +.table > tbody > tr > td:hover::after, +:not(.batch-table__row__content) > table > tbody > tr > td:hover::after, +.batch-table tfoot td:hover::after, +.table tfoot td:hover::after, +:not(.batch-table__row__content) > table tfoot td:hover::after, +.batch-table .batch-table__row:focus-within::after, +.table .batch-table__row:focus-within::after, +:not(.batch-table__row__content) > table .batch-table__row:focus-within::after, +.batch-table th:focus-within::after, +.table th:focus-within::after, +:not(.batch-table__row__content) > table th:focus-within::after, +.batch-table > tbody > tr > td:focus-within::after, +.table > tbody > tr > td:focus-within::after, +:not(.batch-table__row__content) > table > tbody > tr > td:focus-within::after, +.batch-table tfoot td:focus-within::after, +.table tfoot td:focus-within::after, +:not(.batch-table__row__content) > table tfoot td:focus-within::after { + opacity: 1; +} +.batch-table .batch-table__row > a:first-child:last-child, +.table .batch-table__row > a:first-child:last-child, +:not(.batch-table__row__content) > table .batch-table__row > a:first-child:last-child, +.batch-table th > a:first-child:last-child, +.table th > a:first-child:last-child, +:not(.batch-table__row__content) > table th > a:first-child:last-child, +.batch-table > tbody > tr > td > a:first-child:last-child, +.table > tbody > tr > td > a:first-child:last-child, +:not(.batch-table__row__content) > table > tbody > tr > td > a:first-child:last-child, +.batch-table tfoot td > a:first-child:last-child, +.table tfoot td > a:first-child:last-child, +:not(.batch-table__row__content) > table tfoot td > a:first-child:last-child { + margin: 0; + width: 100%; + padding: 0.5em; +} +.batch-table th:hover td:not([rowspan])::after, +.table th:hover td:not([rowspan])::after, +:not(.batch-table__row__content) > table th:hover td:not([rowspan])::after, +.batch-table tr:hover td:not([rowspan])::after, +.table tr:hover td:not([rowspan])::after, +:not(.batch-table__row__content) > table tr:hover td:not([rowspan])::after, +.batch-table th:hover th:not([rowspan])::after, +.table th:hover th:not([rowspan])::after, +:not(.batch-table__row__content) > table th:hover th:not([rowspan])::after, +.batch-table tr:hover th:not([rowspan])::after, +.table tr:hover th:not([rowspan])::after, +:not(.batch-table__row__content) > table tr:hover th:not([rowspan])::after { + opacity: 1 !important; +} +.batch-table th [rowspan]:hover ~ td::after, +.table th [rowspan]:hover ~ td::after, +:not(.batch-table__row__content) > table th [rowspan]:hover ~ td::after, +.batch-table tr [rowspan]:hover ~ td::after, +.table tr [rowspan]:hover ~ td::after, +:not(.batch-table__row__content) > table tr [rowspan]:hover ~ td::after { + opacity: 0 !important; +} +.batch-table th [rowspan]::after, +.table th [rowspan]::after, +:not(.batch-table__row__content) > table th [rowspan]::after, +.batch-table tr [rowspan]::after, +.table tr [rowspan]::after, +:not(.batch-table__row__content) > table tr [rowspan]::after { + inset-inline: -900px; +} +.layout-multiple-columns #mastodon .columns-area { + overflow: auto hidden !important; + padding: 0; +} +.layout-multiple-columns #mastodon .columns-area .scrollable:not(.scrollable--flex) { + padding: 0px !important; + padding-bottom: 40vh !important; +} +.layout-multiple-columns #mastodon .columns-area .scrollable:not(.scrollable--flex)::before { + content: ""; + position: absolute; + inset: 0; + background-color: inherit; + z-index: -1; +} +.layout-multiple-columns #mastodon .columns-area .scrollable:not(.scrollable--flex) .account-timeline__header { + margin: 0px !important; +} +.layout-multiple-columns #mastodon .columns-area .focusable, +.layout-multiple-columns #mastodon .columns-area .entry, +.layout-multiple-columns #mastodon .columns-area .statuses-grid__item .detailed-status, +.layout-multiple-columns #mastodon .columns-area .trends__item, +.layout-multiple-columns #mastodon .columns-area .story, +.layout-multiple-columns #mastodon .columns-area .account-card, +.layout-multiple-columns #mastodon .columns-area .scrollable :not(.focusable) > .account, +.layout-multiple-columns #mastodon .columns-area .timeline-hint { + border-radius: 0; +} +.layout-multiple-columns #mastodon .columns-area .focusable::before, +.layout-multiple-columns #mastodon .columns-area .entry::before, +.layout-multiple-columns #mastodon .columns-area .statuses-grid__item .detailed-status::before, +.layout-multiple-columns #mastodon .columns-area .trends__item::before, +.layout-multiple-columns #mastodon .columns-area .story::before, +.layout-multiple-columns #mastodon .columns-area .account-card::before, +.layout-multiple-columns #mastodon .columns-area .scrollable :not(.focusable) > .account::before, +.layout-multiple-columns #mastodon .columns-area .timeline-hint::before { + border-radius: 0 !important; +} +.layout-multiple-columns #mastodon .columns-area .focusable::after, +.layout-multiple-columns #mastodon .columns-area .entry::after, +.layout-multiple-columns #mastodon .columns-area .statuses-grid__item .detailed-status::after, +.layout-multiple-columns #mastodon .columns-area .trends__item::after, +.layout-multiple-columns #mastodon .columns-area .story::after, +.layout-multiple-columns #mastodon .columns-area .account-card::after, +.layout-multiple-columns #mastodon .columns-area .scrollable :not(.focusable) > .account::after, +.layout-multiple-columns #mastodon .columns-area .timeline-hint::after { + inset-inline: 0 !important; +} +.layout-multiple-columns #mastodon .columns-area [class*="explore__"] > * { + border-radius: var(--radius) !important; +} +.layout-multiple-columns #mastodon .columns-area .detailed-status__wrapper { + margin: 0 !important; +} +.layout-multiple-columns #mastodon .columns-area .status__action-bar { + margin-bottom: 0px; + gap: 0; + margin-inline-end: 0 !important; +} +.layout-multiple-columns #mastodon .columns-area .status__action-bar :not(i):not(.status__action-bar-spacer) { + display: flex; + flex-grow: 9999; + 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 .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; +} diff --git a/app/javascript/flavours/glitch/styles/modern.css b/app/javascript/flavours/glitch/styles/modern.css index 7df0b2fa52..8dccef8a1a 100644 --- a/app/javascript/flavours/glitch/styles/modern.css +++ b/app/javascript/flavours/glitch/styles/modern.css @@ -1,3 +1,6 @@ +@import 'glitch-fixes.css'; +@import 'index'; + :root { --tl-width: 750px; --radius: 12px; diff --git a/app/javascript/skins/glitch/modern-contrast/common.scss b/app/javascript/skins/glitch/modern-contrast/common.scss index e6d39e7501..daf17b9680 100644 --- a/app/javascript/skins/glitch/modern-contrast/common.scss +++ b/app/javascript/skins/glitch/modern-contrast/common.scss @@ -1,3 +1 @@ -@import 'flavours/glitch/styles/contrast'; -@import 'flavours/glitch/styles/modern.css'; -@import 'flavours/glitch/styles/glitch-fixes.css'; +@import 'flavours/glitch/styles/modern-contrast.css'; diff --git a/app/javascript/skins/glitch/modern-light/common.scss b/app/javascript/skins/glitch/modern-light/common.scss index 0efaaab60e..00c72480ea 100644 --- a/app/javascript/skins/glitch/modern-light/common.scss +++ b/app/javascript/skins/glitch/modern-light/common.scss @@ -1,3 +1 @@ -@import 'flavours/glitch/styles/mastodon-light'; -@import 'flavours/glitch/styles/modern.css'; -@import 'flavours/glitch/styles/glitch-fixes.css'; +@import 'flavours/glitch/styles/modern-light.css'; diff --git a/app/javascript/skins/glitch/modern/common.scss b/app/javascript/skins/glitch/modern/common.scss index 98cf2fb9d2..12aedcd8c4 100644 --- a/app/javascript/skins/glitch/modern/common.scss +++ b/app/javascript/skins/glitch/modern/common.scss @@ -1,3 +1 @@ -@import 'flavours/glitch/styles/index'; @import 'flavours/glitch/styles/modern.css'; -@import 'flavours/glitch/styles/glitch-fixes.css';