:root { --tl-width: 750px; --radius: 12px; --radius-round: 24px; --hover-color: rgba(170,170,170,0.07); --border-color: rgba(120,120,120,0.2); --shadow: 0 10px 40px -10px rgba(0,0,0,0.15); --shadow-low: 0 8px 16px -10px rgba(0,0,0,0.4); } #mastodon button, .public-layout button, #mastodon video, .public-layout video, #mastodon input, .public-layout input, #mastodon iframe, .public-layout iframe, #mastodon .privacy-dropdown__dropdown, .public-layout .privacy-dropdown__dropdown, #mastodon .react-toggle-track, .public-layout .react-toggle-track { border-radius: var(--radius) !important; } #mastodon *, .public-layout * { border-color: var(--border-color) !important; font-display: swap !important; } #mastodon .media-gallery__item, .public-layout .media-gallery__item, #mastodon .column-link, .public-layout .column-link, #mastodon select, .public-layout select { transition: transform 0.4s cubic-bezier(0, 0, 0, 3) !important; } #mastodon .media-gallery__item:active, .public-layout .media-gallery__item:active, #mastodon .column-link:active, .public-layout .column-link:active, #mastodon select:active, .public-layout select:active { transform: scale(0.99); transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important; } #mastodon .react-toggle-track, .public-layout .react-toggle-track, #mastodon .button, .public-layout .button, #mastodon .icon-button, .public-layout .icon-button { transition: transform 0.4s cubic-bezier(0, 0, 0, 4) !important; } #mastodon .react-toggle-track:active, .public-layout .react-toggle-track:active, #mastodon .button:active, .public-layout .button:active, #mastodon .icon-button:active, .public-layout .icon-button:active { transform: scale(0.95); transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important; } #mastodon .react-toggle-thumb, .public-layout .react-toggle-thumb { pointer-events: none; } #mastodon .account__avatar, .public-layout .account__avatar { border-radius: 30%; } #mastodon .detailed-status__action-bar, .public-layout .detailed-status__action-bar, #mastodon .column-header__collapsible-inner, .public-layout .column-header__collapsible-inner, #mastodon .compose-form__buttons-wrapper, .public-layout .compose-form__buttons-wrapper, #mastodon .audio-player, .public-layout .audio-player, #mastodon .box-widget input[type="email"], .public-layout .box-widget input[type="email"], #mastodon .box-widget input[type="password"], .public-layout .box-widget input[type="password"], #mastodon .box-widget input[type="text"], .public-layout .box-widget input[type="text"], #mastodon .box-widget textarea, .public-layout .box-widget textarea, #mastodon .compose-form .spoiler-input__input, .public-layout .compose-form .spoiler-input__input, #mastodon .compose-form__autosuggest-wrapper, .public-layout .compose-form__autosuggest-wrapper, #mastodon .compose-form__poll-wrapper select, .public-layout .compose-form__poll-wrapper select, #mastodon .poll__option input[type="text"], .public-layout .poll__option input[type="text"], #mastodon .report-dialog-modal__textarea, .public-layout .report-dialog-modal__textarea, #mastodon .search__input, .public-layout .search__input, #mastodon .setting-text, .public-layout .setting-text, #mastodon .statuses-grid .detailed-status, .public-layout .statuses-grid .detailed-status { border: 0 !important; } #mastodon .columns-area__panels__pane__inner, .public-layout .columns-area__panels__pane__inner { margin-top: 30px; } #mastodon .compose-panel, .public-layout .compose-panel { margin-top: 0; } #mastodon .search, .public-layout .search, .search-popout { margin-inline: 5px; border-radius: var(--radius); } #mastodon .search label, .public-layout .search label { box-sizing: border-box; } #mastodon .search input, .public-layout .search input { border-radius: var(--radius-round) !important; padding-left: 20px; } #mastodon .search .search__icon > i, .public-layout .search .search__icon > i { right: 15px; } #mastodon .compose-form .compose-form__autosuggest-wrapper, .public-layout .compose-form .compose-form__autosuggest-wrapper, #mastodon .compose-form .autosuggest-textarea__textarea, .public-layout .compose-form .autosuggest-textarea__textarea { border-radius: var(--radius) var(--radius) 0 0 !important; } #mastodon .compose-form .compose-form__buttons-wrapper, .public-layout .compose-form .compose-form__buttons-wrapper { border-radius: 0 0 var(--radius) var(--radius) !important; } #mastodon .getting-started__footer, .public-layout .getting-started__footer { opacity: 0.5; transition: opacity 0.4s; } #mastodon .getting-started__footer a, .public-layout .getting-started__footer a { text-decoration: none; } #mastodon .getting-started__footer > p, .public-layout .getting-started__footer > p { font-size: 0; line-height: 0; opacity: 0; transition: font-size 0.2s, line-height 0.2s; transition-duration: 0.2s; } #mastodon .getting-started__footer:hover, .public-layout .getting-started__footer:hover, #mastodon .getting-started__footer:focus-within, .public-layout .getting-started__footer:focus-within { opacity: 1; } #mastodon .getting-started__footer:hover > p, .public-layout .getting-started__footer:hover > p, #mastodon .getting-started__footer:focus-within > p, .public-layout .getting-started__footer:focus-within > p { font-size: 1em; line-height: 1.5; opacity: 1; transform: translateY(0px); transition: font-size 0.1s, line-height 0.25s cubic-bezier(0, 0, 0, 1.3), opacity 0.2s 0.1s; } #mastodon .columns-area__panels__main, .public-layout .columns-area__panels__main { margin: 0 10px; padding-top: 30px !important; 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: 1320px) { #mastodon .columns-area__panels__main, .public-layout .columns-area__panels__main { max-width: var(--tl-width) !important; padding: 0 15px; } } #mastodon .columns-area__panels__main > div, .public-layout .columns-area__panels__main > div { border-radius: var(--radius); } #mastodon .columns-area__panels__main .scrollable, .public-layout .columns-area__panels__main .scrollable { padding-bottom: 40vh !important; } #mastodon .scrollable, .public-layout .scrollable, #mastodon .column-back-button, .public-layout .column-back-button, #mastodon .column-header, .public-layout .column-header { border: 0; border-radius: var(--radius); } #mastodon .scrollable:not(.scrollable--flex), .public-layout .scrollable:not(.scrollable--flex), #mastodon .activity-stream, .public-layout .activity-stream { border: 0 !important; contain: unset !important; } #mastodon .scrollable:not(.scrollable--flex):not(.activity-stream), .public-layout .scrollable:not(.scrollable--flex):not(.activity-stream), #mastodon .activity-stream:not(.activity-stream), .public-layout .activity-stream:not(.activity-stream) { padding: 10px; } #mastodon .scrollable:not(.scrollable--flex) > [tabindex]:first-child > .focusable, .public-layout .scrollable:not(.scrollable--flex) > [tabindex]:first-child > .focusable, #mastodon .activity-stream > [tabindex]:first-child > .focusable, .public-layout .activity-stream > [tabindex]:first-child > .focusable { margin-top: 0; } #mastodon .scrollable:not(.scrollable--flex) > div > [tabindex]:last-child .status, .public-layout .scrollable:not(.scrollable--flex) > div > [tabindex]:last-child .status, #mastodon .activity-stream > div > [tabindex]:last-child .status, .public-layout .activity-stream > div > [tabindex]:last-child .status { border: 0; } #mastodon .column, .public-layout .column, #mastodon .columns-area, .public-layout .columns-area { overflow: visible !important; } #mastodon .scrollable--flex .account-timeline__header, .public-layout .scrollable--flex .account-timeline__header { margin: 0 !important; } #mastodon .account-timeline__header, .public-layout .account-timeline__header { margin: -10px; margin-bottom: 10px; } #mastodon .account-timeline__header .account__header, .public-layout .account-timeline__header .account__header { overflow: visible !important; } #mastodon .account-timeline__header .account__header__info, .public-layout .account-timeline__header .account__header__info { z-index: 2; } #mastodon .account-timeline__header .account__header__image, .public-layout .account-timeline__header .account__header__image { height: 0; padding-bottom: 35%; position: sticky; top: calc(0px - var(--radius)); border-radius: var(--radius) var(--radius) 0 0; } #mastodon .account-timeline__header .account__header__image img, .public-layout .account-timeline__header .account__header__image img { position: absolute; } #mastodon .account-timeline__header .account__header__bar, .public-layout .account-timeline__header .account__header__bar { padding: 10px; border: 0; border-radius: var(--radius) var(--radius) 0 0; margin-top: calc(0px - var(--radius)) !important; } #mastodon .account-timeline__header .account__header__tabs__name h1, .public-layout .account-timeline__header .account__header__tabs__name h1 { display: flex; flex-wrap: wrap; } #mastodon .account-timeline__header .account__header__tabs__name h1 span, .public-layout .account-timeline__header .account__header__tabs__name h1 span { margin-right: 0.4em; } #mastodon .account-timeline__header .account__header__bio, .public-layout .account-timeline__header .account__header__bio { margin: 0; margin-top: 10px; } #mastodon .account-timeline__header .account__header__bio > div, .public-layout .account-timeline__header .account__header__bio > div { padding-inline: 10px !important; } #mastodon .account__header__fields, .public-layout .account__header__fields, #mastodon .account__header__account-note, .public-layout .account__header__account-note { display: flex; flex-wrap: wrap; align-items: center; border: 0; gap: 10px; } .public-account-bio .account__header__fields { padding: 20px !important; padding-bottom: 0 !important; } #mastodon .account__header__fields dl, .public-layout .account__header__fields dl, #mastodon .account__header__account-note dl, .public-layout .account__header__account-note dl, #mastodon .account__header__fields.account__header__account-note.account__header__account-note, .public-layout .account__header__fields.account__header__account-note.account__header__account-note, #mastodon .account__header__account-note.account__header__account-note.account__header__account-note, .public-layout .account__header__account-note.account__header__account-note.account__header__account-note { border: 0; border-radius: var(--radius-round); overflow: hidden; background-color: var(--border-color); padding: 0 !important; } #mastodon .account__header__fields dl dt, .public-layout .account__header__fields dl dt, #mastodon .account__header__account-note dl dt, .public-layout .account__header__account-note dl dt, #mastodon .account__header__fields.account__header__account-note.account__header__account-note dt, .public-layout .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, .public-layout .account__header__account-note.account__header__account-note.account__header__account-note dt, #mastodon .account__header__fields dl dd, .public-layout .account__header__fields dl dd, #mastodon .account__header__account-note dl dd, .public-layout .account__header__account-note dl dd, #mastodon .account__header__fields.account__header__account-note.account__header__account-note dd, .public-layout .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, .public-layout .account__header__account-note.account__header__account-note.account__header__account-note dd { width: unset; padding-block: 0.5em; } #mastodon .account__header__fields dl dt, .public-layout .account__header__fields dl dt, #mastodon .account__header__account-note dl dt, .public-layout .account__header__account-note dl dt, #mastodon .account__header__fields.account__header__account-note.account__header__account-note dt, .public-layout .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, .public-layout .account__header__account-note.account__header__account-note.account__header__account-note dt { background: none; } #mastodon .account__header__fields dl dd, .public-layout .account__header__fields dl dd, #mastodon .account__header__account-note dl dd, .public-layout .account__header__account-note dl dd, #mastodon .account__header__fields.account__header__account-note.account__header__account-note dd, .public-layout .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, .public-layout .account__header__account-note.account__header__account-note.account__header__account-note dd { border: 0; } #mastodon .account__header__fields dl dd:not(.verified), .public-layout .account__header__fields dl dd:not(.verified), #mastodon .account__header__account-note dl dd:not(.verified), .public-layout .account__header__account-note dl dd:not(.verified), #mastodon .account__header__fields.account__header__account-note.account__header__account-note dd:not(.verified), .public-layout .account__header__fields.account__header__account-note.account__header__account-note dd:not(.verified), #mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd:not(.verified), .public-layout .account__header__account-note.account__header__account-note.account__header__account-note dd:not(.verified) { padding-left: 0; } #mastodon .account__header__fields.account__header__account-note, .public-layout .account__header__fields.account__header__account-note, #mastodon .account__header__account-note.account__header__account-note, .public-layout .account__header__account-note.account__header__account-note { margin: 10px; margin-bottom: 0; gap: 0; background: none !important; border: 1px solid var(--border-color) !important; } #mastodon .account__header__fields textarea, .public-layout .account__header__fields textarea, #mastodon .account__header__account-note textarea, .public-layout .account__header__account-note textarea { width: 0; flex-grow: 1; margin: 0 !important; border-radius: 0; } #mastodon .account__header__fields label, .public-layout .account__header__fields label, #mastodon .account__header__account-note label, .public-layout .account__header__account-note label { margin: 0; font-weight: 600; padding-inline: 14px; } #mastodon .account__section-headline, .public-layout .account__section-headline { background: none; } .with-modals #mastodon .account__section-headline, .with-modals .public-layout .account__section-headline { border: 0 !important; } #mastodon .account__section-headline a span, .public-layout .account__section-headline a span { font-weight: 400; } #mastodon .account__section-headline a.active span, .public-layout .account__section-headline a.active span { font-weight: 700; } #mastodon .notification__filter-bar, .public-layout .notification__filter-bar { border: 0 !important; margin-bottom: calc(0px - var(--radius)); padding-bottom: var(--radius); } #mastodon .focusable, .public-layout .focusable, #mastodon .entry, .public-layout .entry { overflow: clip; border-radius: var(--radius) !important; transition: background 0.2s, box-shadow 0.4s, margin 0.2s, border 0.2s; animation: fadeUp 0.4s forwards cubic-bezier(0, 1, 1, 1); } #mastodon .focusable.entry, .public-layout .focusable.entry, #mastodon .entry.entry, .public-layout .entry.entry { margin-bottom: 10px; } #mastodon .focusable.entry .status, .public-layout .focusable.entry .status, #mastodon .entry.entry .status, .public-layout .entry.entry .status { border: 0 !important; } #mastodon .focusable:hover, .public-layout .focusable:hover, #mastodon .entry:hover, .public-layout .entry:hover { background-color: var(--hover-color); } #mastodon .status__info, .public-layout .status__info { margin-top: 5px; } #mastodon .status__info .status__avatar, .public-layout .status__info .status__avatar { top: 15px; left: 15px !important; } #mastodon .status__content, .public-layout .status__content { min-height: 1.4em; padding-top: 2px; } #mastodon .media-gallery, .public-layout .media-gallery, #mastodon .video-player, .public-layout .video-player { margin-left: -62px; width: unset; box-shadow: var(--shadow-low); border-radius: var(--radius); margin-block: 15px !important; animation: scaleIn 0.4s; max-width: unset !important; max-height: 80vh !important; } #mastodon .detailed-status__wrapper, .public-layout .detailed-status__wrapper, #mastodon .detailed-status, .public-layout .detailed-status { box-shadow: var(--shadow); } #mastodon .detailed-status__wrapper.detailed-status__wrapper, .public-layout .detailed-status__wrapper.detailed-status__wrapper, #mastodon .detailed-status.detailed-status__wrapper, .public-layout .detailed-status.detailed-status__wrapper { margin-block: 15px; } #mastodon .detailed-status__wrapper .media-gallery, .public-layout .detailed-status__wrapper .media-gallery, #mastodon .detailed-status .media-gallery, .public-layout .detailed-status .media-gallery, #mastodon .detailed-status__wrapper .video-player, .public-layout .detailed-status__wrapper .video-player, #mastodon .detailed-status .video-player, .public-layout .detailed-status .video-player { margin-left: 0 !important; max-height: unset !important; } #mastodon .status__action-bar, .public-layout .status__action-bar, #mastodon .detailed-status__action-bar, .public-layout .detailed-status__action-bar { padding-top: 0; } #mastodon .status__action-bar .icon-button, .public-layout .status__action-bar .icon-button, #mastodon .detailed-status__action-bar .icon-button, .public-layout .detailed-status__action-bar .icon-button { display: inline-flex; align-items: center; width: unset !important; padding: 0.3em 0.5em !important; height: unset !important; flex: 0 1 auto !important; min-width: 0; } #mastodon .status__action-bar .icon-button::after, .public-layout .status__action-bar .icon-button::after, #mastodon .detailed-status__action-bar .icon-button::after, .public-layout .detailed-status__action-bar .icon-button::after { content: attr(aria-label); font-size: 0.7em; margin-left: 0.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #mastodon .status__action-bar .status__action-bar-dropdown, .public-layout .status__action-bar .status__action-bar-dropdown, #mastodon .detailed-status__action-bar .status__action-bar-dropdown, .public-layout .detailed-status__action-bar .status__action-bar-dropdown, #mastodon .status__action-bar .detailed-status__action-bar-dropdown, .public-layout .status__action-bar .detailed-status__action-bar-dropdown, #mastodon .detailed-status__action-bar .detailed-status__action-bar-dropdown, .public-layout .detailed-status__action-bar .detailed-status__action-bar-dropdown, #mastodon .status__action-bar .detailed-status__button, .public-layout .status__action-bar .detailed-status__button, #mastodon .detailed-status__action-bar .detailed-status__button, .public-layout .detailed-status__action-bar .detailed-status__button { display: contents; } #mastodon .status__action-bar.detailed-status__action-bar, .public-layout .status__action-bar.detailed-status__action-bar, #mastodon .detailed-status__action-bar.detailed-status__action-bar, .public-layout .detailed-status__action-bar.detailed-status__action-bar { padding-right: 15px !important; padding-left: 15px !important; } #mastodon .status__action-bar.detailed-status__action-bar .icon-button, .public-layout .status__action-bar.detailed-status__action-bar .icon-button, #mastodon .detailed-status__action-bar.detailed-status__action-bar .icon-button, .public-layout .detailed-status__action-bar.detailed-status__action-bar .icon-button { flex-grow: 1 !important; justify-content: center; } #mastodon .status, .public-layout .status { overflow: visible !important; padding: 15px 15px 15px 78px !important; } #mastodon .detailed-status, .public-layout .detailed-status { padding: 15px !important; } #mastodon .tabs-bar__wrapper, .public-layout .tabs-bar__wrapper { transition: margin-left 0.2s cubic-bezier(0, 0, 0, 1.1); } @media (min-width: 1191px) { #mastodon .tabs-bar__wrapper, .public-layout .tabs-bar__wrapper { position: fixed; width: 285px; margin-left: 600px; padding-top: 0; margin-top: 30px; overflow: clip; border-radius: var(--radius) var(--radius) !important; box-shadow: 0 12px 12px -12px rgba(0,0,0,0.1); } #mastodon .tabs-bar__wrapper .column-header, .public-layout .tabs-bar__wrapper .column-header, #mastodon .tabs-bar__wrapper .column-header__buttons button, .public-layout .tabs-bar__wrapper .column-header__buttons button { background: none !important; } #mastodon .tabs-bar__wrapper .column-header, .public-layout .tabs-bar__wrapper .column-header { font-weight: 600; } } @media (min-width: 895px) and (max-width: 1191px) { #mastodon .tabs-bar__wrapper, .public-layout .tabs-bar__wrapper { padding-top: 0; } #mastodon .tabs-bar__wrapper .tabs-bar, .public-layout .tabs-bar__wrapper .tabs-bar { margin-bottom: 0; border: 0 !important; } #mastodon .tabs-bar__wrapper #tabs-bar__portal, .public-layout .tabs-bar__wrapper #tabs-bar__portal { border-radius: 0 !important; } #mastodon .tabs-bar__wrapper #tabs-bar__portal .column-header, .public-layout .tabs-bar__wrapper #tabs-bar__portal .column-header, #mastodon .tabs-bar__wrapper #tabs-bar__portal button, .public-layout .tabs-bar__wrapper #tabs-bar__portal button { border-radius: 0 !important; } #mastodon .tabs-bar__wrapper ~ .columns-area .scrollable, .public-layout .tabs-bar__wrapper ~ .columns-area .scrollable { border-radius: 0 !important; } } @media (min-width: 1191px) and (min-width: 1320px) { #mastodon .tabs-bar__wrapper, .public-layout .tabs-bar__wrapper { margin-left: calc(var(--tl-width) - 5px); } } #mastodon .navigation-panel, .public-layout .navigation-panel { padding-top: 50px; padding-bottom: 20px; height: calc(100% - 30px); box-sizing: border-box; } #mastodon .column-link, .public-layout .column-link { flex-grow: 2 !important; display: flex !important; align-items: center !important; align-content: center; max-height: 3.3em; min-height: 2.7em !important; padding-block: 0; position: relative; box-sizing: border-box; } #mastodon .column-link .column-link__icon, .public-layout .column-link .column-link__icon, .column-header__icon { margin-right: 1em !important; } #mastodon .column-link::before, .public-layout .column-link::before { content: "" !important; position: absolute; border-radius: 100px !important; 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; } #mastodon .column-link:hover:before, .public-layout .column-link:hover:before, #mastodon .column-link:focus:before, .public-layout .column-link:focus:before { opacity: 1 !important; } #mastodon.public-layout .header, .public-layout.public-layout .header { border-radius: var(--radius); } #mastodon.public-layout .public-account-header, .public-layout.public-layout .public-account-header { border-radius: var(--radius); --border-color: transparent !important; border: 0 !important; } #mastodon.public-layout .public-account-header .public-account-header__bar::before, .public-layout.public-layout .public-account-header .public-account-header__bar::before { border: 0; } #mastodon.public-layout .grid, .public-layout.public-layout .grid { gap: 20px; } #mastodon.public-layout .public-account-header + .grid .column-1, .public-layout.public-layout .public-account-header + .grid .column-1 { position: sticky; align-self: flex-end; bottom: 0; min-height: calc(100vh - 80px); } #mastodon.public-layout .public-account-header + .grid .column-1 > *, .public-layout.public-layout .public-account-header + .grid .column-1 > * { border-radius: var(--radius); overflow: hidden; border: 0 !important; } #mastodon.public-layout .public-account-header + .grid .column-1 a, .public-layout.public-layout .public-account-header + .grid .column-1 a, #mastodon.public-layout .public-account-header + .grid .column-1 .hero-widget__text, .public-layout.public-layout .public-account-header + .grid .column-1 .hero-widget__text { border: 0 !important; } #mastodon.public-layout .box-widget, .public-layout.public-layout .box-widget, #mastodon.public-layout .directory__tag > a, .public-layout.public-layout .directory__tag > a, #mastodon.public-layout .hero-widget, .public-layout.public-layout .hero-widget, #mastodon.public-layout .landing-page__call-to-action, .public-layout.public-layout .landing-page__call-to-action, #mastodon.public-layout .table-of-contents, .public-layout.public-layout .table-of-contents, #mastodon.public-layout .rules-list, .public-layout.public-layout .rules-list { border-radius: var(--radius); overflow: hidden; } #mastodon.public-layout .footer .column-3, .public-layout.public-layout .footer .column-3, #mastodon.public-layout .footer .column-4, .public-layout.public-layout .footer .column-4 { text-align: right; } @media (max-width: 895px) { #mastodon .columns-area__panels__main, .public-layout .columns-area__panels__main { padding: 0 !important; } #mastodon .is-composing .columns-area__panels__main, .public-layout .is-composing .columns-area__panels__main { padding-bottom: 40px !important; } #mastodon .columns-area__panels__main .scrollable, .public-layout .columns-area__panels__main .scrollable, #mastodon .columns-area__panels__main .account__header__image, .public-layout .columns-area__panels__main .account__header__image { border-radius: 0 !important; } #mastodon .tabs-bar__wrapper, .public-layout .tabs-bar__wrapper { position: fixed !important; top: unset !important; bottom: 0 !important; left: 0 !important; right: 0 !important; display: flex; flex-direction: column; box-shadow: none !important; padding: 0; background: none; border-radius: 0 !important; pointer-events: none; filter: brightness(0.95); } #mastodon .tabs-bar__wrapper > *, .public-layout .tabs-bar__wrapper > * { pointer-events: all; } #mastodon .tabs-bar__wrapper .tabs-bar, .public-layout .tabs-bar__wrapper .tabs-bar { order: 2; margin: 0; border: 0; border-radius: var(--radius-round) var(--radius-round) 0 0; color: #fff !important; overflow: visible !important; padding-inline: 5px; } #mastodon .tabs-bar__wrapper .tabs-bar a, .public-layout .tabs-bar__wrapper .tabs-bar a { flex-grow: 1 !important; padding-block: 20px; position: relative; border: 0; background: none !important; transition: transform 0.4s cubic-bezier(0, 0, 0, 4), filter 0.1s; } #mastodon .tabs-bar__wrapper .tabs-bar a > i, .public-layout .tabs-bar__wrapper .tabs-bar a > i { font-size: 18px; filter: opacity(0.7); transition: transform 0.2s cubic-bezier(0, 0, 0, 1.2); } #mastodon .tabs-bar__wrapper .tabs-bar a > i .icon-with-badge__badge, .public-layout .tabs-bar__wrapper .tabs-bar a > i .icon-with-badge__badge { font-size: 0.5em; border-radius: var(--radius-round); } #mastodon .tabs-bar__wrapper .tabs-bar a::before, .public-layout .tabs-bar__wrapper .tabs-bar a::before { content: ""; position: absolute; bottom: -10px; width: 5px; height: 10px; border-radius: 100px; background-color: currentColor; left: 50%; margin-left: -2.5px; transition: bottom 0.2s cubic-bezier(0, 0, 0, 4), width 0.2s, margin-left 0.2s; } #mastodon .tabs-bar__wrapper .tabs-bar a:active, .public-layout .tabs-bar__wrapper .tabs-bar a:active { transform: translateY(5px); transition: transform 1s; } #mastodon .tabs-bar__wrapper .tabs-bar a.active, .public-layout .tabs-bar__wrapper .tabs-bar a.active { transform: translateY(-2px); } #mastodon .tabs-bar__wrapper .tabs-bar a.active i, .public-layout .tabs-bar__wrapper .tabs-bar a.active i { filter: none !important; } #mastodon .tabs-bar__wrapper .tabs-bar a.active::before, .public-layout .tabs-bar__wrapper .tabs-bar a.active::before { bottom: -6px; width: 10px; margin-left: -5px; } #mastodon .tabs-bar__wrapper #tabs-bar__portal, .public-layout .tabs-bar__wrapper #tabs-bar__portal { margin: 10px 20px !important; width: max-content !important; box-shadow: var(--shadow) !important; max-width: calc(100vw - 130px); } #mastodon .tabs-bar__wrapper #tabs-bar__portal > button, .public-layout .tabs-bar__wrapper #tabs-bar__portal > button { padding-inline: 20px; } #mastodon .tabs-bar__wrapper #tabs-bar__portal button, .public-layout .tabs-bar__wrapper #tabs-bar__portal button { min-width: 60px; } #mastodon .tabs-bar__wrapper #tabs-bar__portal .column-header__collapsible, .public-layout .tabs-bar__wrapper #tabs-bar__portal .column-header__collapsible { transition: margin-top 0.2s cubic-bezier(0, 0, 0, 2); max-width: 100%; border-radius: var(--radius); } #mastodon .tabs-bar__wrapper #tabs-bar__portal .column-header__collapsible:not(.collapsed), .public-layout .tabs-bar__wrapper #tabs-bar__portal .column-header__collapsible:not(.collapsed) { width: calc(100vw - 40px); margin-top: 5px; } .floating-action-button { bottom: 70px; } #mastodon .icon-button:after, .public-layout .icon-button:after { content: unset !important; } #mastodon .status__action-bar, .public-layout .status__action-bar { margin-left: -63px; margin-bottom: -10px; } #mastodon .status__action-bar .icon-button, .public-layout .status__action-bar .icon-button { flex-grow: 1 !important; margin: 0 !important; justify-content: center; padding: 0.7em !important; } #mastodon .modal-root__modal .status.light, .public-layout .modal-root__modal .status.light { overflow: hidden !important; padding-left: 70px !important; } } .layout-multiple-columns #mastodon .columns-area { overflow: auto hidden !important; } .layout-multiple-columns #mastodon .columns-area .column-header, .layout-multiple-columns #mastodon .columns-area .scrollable, .layout-multiple-columns #mastodon .columns-area .column-back-button, .layout-multiple-columns #mastodon .columns-area .account__header__image { border-radius: 0 !important; } .layout-multiple-columns #mastodon .columns-area .icon-button:after { content: unset !important; } .layout-multiple-columns #mastodon .columns-area > div { border: 0 !important; padding: 0 !important; } .layout-multiple-columns #mastodon .columns-area > div:not(:last-child):not(.drawer) { padding-right: 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-left: auto !important; } .layout-multiple-columns #mastodon .columns-area > div:last-child { margin-right: auto !important; } .layout-multiple-columns #mastodon .columns-area .drawer { padding-inline: 10px !important; padding-top: 20px !important; } .layout-multiple-columns #mastodon .columns-area .drawer .drawer__header { border-radius: var(--radius-round); margin-inline: 5px; 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-left: 15px !important; } .layout-multiple-columns #mastodon .columns-area .drawer .drawer__header a:last-child { padding-right: 15px !important; } .layout-multiple-columns #mastodon .columns-area .drawer__inner:not(.darker), .layout-multiple-columns #mastodon .columns-area .drawer__inner__mastodon { background-color: transparent; border: 0 !important; } .layout-multiple-columns #mastodon .columns-area .drawer__inner.darker { border-radius: var(--radius) var(--radius) 0 0; margin-inline: 5px; width: calc(100% - 10px); } #mastodon .modal-root__container, .public-layout .modal-root__container { animation: bounceIn 0.7s; } @media (prefers-reduced-motion: no-preference) { @-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 fadeUp { from { transform: translateY(20px); } } @-webkit-keyframes fadeUp { from { transform: translateY(20px); } } @-o-keyframes fadeUp { from { transform: translateY(20px); } } @keyframes fadeUp { from { transform: translateY(20px); } } @-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; } } }