/*
* SPDX-FileCopyrightText: 2026 PrivacySafe Foundation, Inc.
* SPDX-License-Identifier: AGPL-3.0-or-later
*
* This file is free software: you can redistribute it and/or modify it under
* the terms of the GNU Affero General Public License, version 3 or later — see
* the LICENSE file or https://www.gnu.org/licenses/agpl-3.0.html
*
* Mastodon is free software developed by Mastodon gGmbH and contributors and
* licensed under the GNU Affero General Public License v3.0 (AGPL-3.0).
* Source: https://github.com/mastodon/mastodon
*/
/* PrivacySafe Social — dark theme */
/* Accents: links/hover green #45DA64, buttons orange #FB521F, utility clay #C6613F, sage #5FA56B */
/* Color tokens */
:root,
html,
body,
[data-color-scheme="dark"],
[data-color-scheme="auto"],
[data-theme="mastodon"],
.theme-default {
color-scheme: dark !important;
/* Charcoal neutrals */
--color-white: #FAF9F5 !important;
--color-black: #000000 !important;
--color-grey-50: #FAF9F5 !important;
--color-grey-100: #FAF9F5 !important;
--color-grey-200: #E5E3DB !important;
--color-grey-300: #C2C0B6 !important;
--color-grey-400: #A6A49B !important;
--color-grey-500: #87857C !important;
--color-grey-600: #4A4A45 !important;
--color-grey-700: #383734 !important;
--color-grey-800: #30302E !important;
--color-grey-900: #262624 !important;
--color-grey-950: #20201D !important;
/* Mastodon's indigo/purple -> PrivacySafe green */
--color-indigo-50: #EFFBF1 !important;
--color-indigo-100: #D9FFE2 !important;
--color-indigo-200: #B7FFC7 !important;
--color-indigo-300: #7CF293 !important;
--color-indigo-400: #45DA64 !important;
--color-indigo-500: #45DA64 !important;
--color-indigo-600: #35B84F !important;
--color-indigo-700: #2A943F !important;
--color-indigo-800: #207333 !important;
--color-indigo-900: #185828 !important;
--color-indigo-950: #0F3519 !important;
/* Mastodon's "red" primary-action ramp -> PrivacySafe orange */
--color-red-50: #FFF3EF !important;
--color-red-100: #FFE2D8 !important;
--color-red-200: #FFC2AE !important;
--color-red-300: #FF9878 !important;
--color-red-400: #FF7042 !important;
--color-red-500: #FB521F !important;
--color-red-600: #DD3D10 !important;
--color-red-700: #B82F0D !important;
--color-red-800: #90260E !important;
--color-red-900: #6F210F !important;
--color-red-950: #3B1006 !important;
/* Success / highlight green */
--color-green-50: #F0FDF4 !important;
--color-green-100: #DCFCE7 !important;
--color-green-200: #B9F8CF !important;
--color-green-300: #7BF1A8 !important;
--color-green-400: #45DA64 !important;
--color-green-500: #45DA64 !important;
--color-green-600: #35B84F !important;
--color-green-700: #2A943F !important;
--color-green-800: #207333 !important;
--color-green-900: #185828 !important;
--color-green-950: #0F3519 !important;
/* Warnings: warm, no blue */
--color-yellow-50: #FFFBEB !important;
--color-yellow-100: #FEF3C6 !important;
--color-yellow-200: #FEE685 !important;
--color-yellow-300: #FFD230 !important;
--color-yellow-400: #FFC857 !important;
--color-yellow-500: #FE9A00 !important;
--color-yellow-600: #E17100 !important;
--color-yellow-700: #BB4D00 !important;
--color-yellow-800: #973C00 !important;
--color-yellow-900: #7B3306 !important;
--color-yellow-950: #461901 !important;
}
/* Semantic / compiled token names */
:root,
html,
body,
[data-color-scheme="dark"],
[data-color-scheme="auto"],
.theme-default {
/* Text */
--color-text-primary: #FAF9F5 !important;
--color-text-secondary: #C2C0B6 !important;
--color-text-tertiary: #A6A49B !important;
--color-text-inverted: #20201D !important;
--color-text-brand: #45DA64 !important;
--color-text-brand-soft: #7CF293 !important;
--color-text-on-brand-base: #20201D !important;
--color-text-brand-on-inverted: #207333 !important;
--color-text-error: #FF9878 !important;
--color-text-on-error-base: #FAF9F5 !important;
--color-text-warning: #FFC857 !important;
--color-text-on-warning-base: #20201D !important;
--color-text-success: #45DA64 !important;
--color-text-on-success-base: #20201D !important;
--color-text-disabled: #4A4A45 !important;
--color-text-on-disabled: #C2C0B6 !important;
--color-text-bookmark-highlight: #FB521F !important;
--color-text-favourite-highlight: #FFC857 !important;
--color-text-on-media: #FAF9F5 !important;
/* Links: green, never blue */
--color-text-status-links: #45DA64 !important;
--color-link: #45DA64 !important;
--color-hashtag: #45DA64 !important;
--color-mention: #45DA64 !important;
/* Backgrounds */
--color-bg-primary: #20201D !important;
--color-bg-secondary: #262624 !important;
--color-bg-tertiary: #30302E !important;
--color-bg-inverted: #FAF9F5 !important;
--color-bg-overlay-base: rgba(25, 25, 25, 0.6) !important;
--color-bg-overlay-highlight: rgba(235, 235, 235, 0.05) !important;
--color-bg-overlay: #000000 !important;
--color-bg-media-base: #000000 !important;
--color-bg-media: rgba(0, 0, 0, 0.65) !important;
--color-bg-disabled: #383734 !important;
/* Primary action: orange default, green hover */
--color-bg-brand-base: #FB521F !important;
--color-bg-brand-base-hover: #45DA64 !important;
--color-bg-brand-soft: #185828 !important;
--color-bg-brand-softest: #0F3519 !important;
--color-bg-error-base: #B82F0D !important;
--color-bg-error-base-hover: #90260E !important;
--color-bg-error-soft: #6F210F !important;
--color-bg-error-softest: #3B1006 !important;
--color-bg-warning-base: #BB4D00 !important;
--color-bg-warning-soft: #7B3306 !important;
--color-bg-warning-softest: #461901 !important;
--color-bg-success-base: #35B84F !important;
--color-bg-success-soft: #185828 !important;
--color-bg-success-softest: #0F3519 !important;
/* Borders */
--color-border-primary: #4A4A45 !important;
--color-border-brand: #45DA64 !important;
--color-border-brand-soft: #207333 !important;
--color-border-error: #FF9878 !important;
--color-border-media: rgba(235, 235, 235, 0.15) !important;
--color-border-error-soft: rgba(255, 152, 120, 0.5) !important;
--color-border-warning-soft: rgba(255, 200, 87, 0.5) !important;
--color-border-success-soft: #207333 !important;
/* Shadows */
--shadow-strength-primary: 80% !important;
--color-shadow-primary: rgba(0, 0, 0, 0.8) !important;
--dropdown-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8) !important;
--overlay-icon-shadow: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8)) !important;
/* Graphs */
--color-graph-primary-stroke: #45DA64 !important;
--color-graph-primary-fill: #0F3519 !important;
--color-graph-warning-stroke: #FFC857 !important;
--color-graph-warning-fill: #461901 !important;
--color-graph-disabled-stroke: #4A4A45 !important;
--color-graph-disabled-fill: #383734 !important;
/* Rich text */
--rich-text-container-color: #2A1A12 !important;
--rich-text-text-color: #FFD5C3 !important;
--rich-text-decorations-color: #7A3A24 !important;
/* Legacy compiled variable names */
--color-bg: #20201D !important;
--color-bg-75: #20201Dbf !important;
--color-bg-90: #20201De6 !important;
--color-fg: #FAF9F5 !important;
--color-border: #4A4A45 !important;
--color-dim: #C2C0B6 !important;
--color-accent: #45DA64 !important;
--color-accent-dark: #45DA64 !important;
--color-accent-dark-50: rgba(69, 218, 100, 0.5) !important;
--color-green: #45DA64 !important;
--color-red: #FB521F !important;
--color-red-75: #FB521Fbf !important;
--color-light-text: #FAF9F5 !important;
--color-mud: rgba(58, 58, 58, 0.5) !important;
--color-arsenic: #30302E !important;
--color-black-coral: #4A4A45 !important;
--color-dark: #20201D !important;
--color-thread-line: #4A4A45 !important;
--color-topaz: #FAF9F5 !important;
--color-light-purple: #C2C0B6 !important;
--color-lighter-purple: #C2C0B6 !important;
--color-dark-electric-blue: #C2C0B6 !important;
--color-button-text: #FAF9F5 !important;
--color-ghost-button-text: #FAF9F5 !important;
--color-verified: #45DA64 !important;
--color-destructive: #FF5A5F !important;
--color-light-fuchsia-pink: #FF5A5F !important;
--color-bg-compose-form: rgba(58, 58, 58, 0.4) !important;
--color-bg-compose-form-focus: rgba(58, 58, 58, 0.8) !important;
--color-outer-space: #4A4A45 !important;
}
/* Base surfaces */
body,
body.app-body,
#mastodon,
.app-holder,
.ui,
.columns-area,
.columns-area__panels,
.column,
.scrollable,
.drawer,
.navigation-panel,
.compose-panel,
.column-header,
.status,
.status__wrapper,
.notification,
.notification-group,
.conversation,
.account,
.detailed-status,
.getting-started,
.trends,
.trends__item,
.empty-column-indicator,
.load-more,
.load-gap,
.modal-root__modal,
.dropdown-menu,
.dropdown-menu__container {
background-color: #20201D !important;
border-color: #4A4A45 !important;
color: #FAF9F5 !important;
}
/* General inputs */
input,
textarea,
select,
.search__input,
.spoiler-input__input,
.setting-text,
.input-copy {
background-color: #30302E !important;
border-color: transparent !important;
color: #FAF9F5 !important;
}
input:hover,
textarea:hover,
select:hover,
.search__input:hover,
.spoiler-input__input:hover {
background-color: #383734 !important;
}
input:focus,
textarea:focus,
select:focus,
.search__input:focus,
.spoiler-input__input:focus,
.setting-text:focus,
.input-copy:focus {
background-color: #30302E !important;
border-color: #FB521F !important;
box-shadow: 0 0 0 2px rgba(251, 82, 31, 0.25) !important;
color: #FAF9F5 !important;
outline-color: #FB521F !important;
}
input::placeholder,
textarea::placeholder,
.search__input::placeholder {
color: #C2C0B6 !important;
opacity: 1 !important;
}
/* Links */
a,
.status-link,
.link,
.link-footer a,
.search-results__hashtag,
.account__header__fields a,
.account__header__bio a,
.reply-indicator__content a,
.trends__item a,
.status__content a,
.status__content a.unhandled-link {
color: #45DA64 !important;
}
a:hover,
a:focus,
.status-link:hover,
.status-link:focus,
.status__content a:hover,
.status__content a:focus,
.status__content a.unhandled-link:hover,
.status__content a.unhandled-link:focus,
.reply-indicator__content a:hover,
.reply-indicator__content a:focus {
color: #7CF293 !important;
}
/* Buttons */
.button,
button.button,
input[type="button"],
input[type="submit"],
.compose-form__publish-button-wrapper .button,
.compose-form__submit .button,
.simple_form .button,
.simple_form button[type="submit"],
.simple_form input[type="submit"],
.public-layout .button,
.public-layout button[type="submit"],
.public-layout input[type="submit"],
.account__header__account-note button,
.account__header__extra__links .button,
.confirmation-modal__action-bar .button,
.mute-modal__action-bar .button,
.block-modal__action-bar .button,
.report-dialog-modal .button,
.actions .button,
.actions input[type="button"],
.actions input[type="submit"] {
border-radius: 999px !important;
min-height: 42px !important;
padding-left: 20px !important;
padding-right: 20px !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background-color: #FB521F !important;
border-color: #FB521F !important;
color: #FAF9F5 !important;
box-shadow: none !important;
filter: none !important;
text-decoration: none !important;
}
.button:hover,
.button:focus,
button.button:hover,
button.button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.compose-form__publish-button-wrapper .button:hover,
.compose-form__publish-button-wrapper .button:focus,
.compose-form__submit .button:hover,
.compose-form__submit .button:focus,
.simple_form .button:hover,
.simple_form .button:focus,
.simple_form button[type="submit"]:hover,
.simple_form button[type="submit"]:focus,
.simple_form input[type="submit"]:hover,
.simple_form input[type="submit"]:focus,
.public-layout .button:hover,
.public-layout .button:focus,
.public-layout button[type="submit"]:hover,
.public-layout button[type="submit"]:focus,
.public-layout input[type="submit"]:hover,
.public-layout input[type="submit"]:focus,
.account__header__account-note button:hover,
.account__header__account-note button:focus,
.account__header__extra__links .button:hover,
.account__header__extra__links .button:focus,
.confirmation-modal__action-bar .button:hover,
.confirmation-modal__action-bar .button:focus,
.mute-modal__action-bar .button:hover,
.mute-modal__action-bar .button:focus,
.block-modal__action-bar .button:hover,
.block-modal__action-bar .button:focus,
.report-dialog-modal .button:hover,
.report-dialog-modal .button:focus,
.actions .button:hover,
.actions .button:focus,
.actions input[type="button"]:hover,
.actions input[type="button"]:focus,
.actions input[type="submit"]:hover,
.actions input[type="submit"]:focus {
background-color: #45DA64 !important;
border-color: #45DA64 !important;
color: #20201D !important;
box-shadow: 0 0 0 3px rgba(69, 218, 100, 0.25) !important;
filter: none !important;
text-decoration: none !important;
}
/* Navigation & dropdowns */
.navigation-panel a,
.navigation-panel button:not(.button),
.column-link,
.tabs-bar__link,
.mobile-menu a,
.mobile-menu button:not(.button),
.icon-button,
.status__action-bar-button,
.detailed-status__button,
.dropdown-menu__item,
.privacy-dropdown__value,
.language-dropdown__value {
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
color: #FAF9F5 !important;
}
.icon-button,
.status__action-bar-button,
.detailed-status__button,
.navigation-panel button:not(.button),
.mobile-menu button:not(.button),
.dropdown-menu__item {
border-radius: inherit !important;
min-height: initial !important;
padding-left: initial !important;
padding-right: initial !important;
}
.navigation-panel a.active,
.navigation-panel a[aria-current="page"],
.column-link.active,
.tabs-bar__link.active,
.mobile-menu a.active,
.mobile-menu a[aria-current="page"] {
color: #FB521F !important;
}
.navigation-panel a:hover,
.navigation-panel a:focus,
.navigation-panel button:not(.button):hover,
.navigation-panel button:not(.button):focus,
.column-link:hover,
.column-link:focus,
.tabs-bar__link:hover,
.tabs-bar__link:focus,
.mobile-menu a:hover,
.mobile-menu a:focus,
.icon-button:hover,
.icon-button:focus,
.status__action-bar-button:hover,
.status__action-bar-button:focus,
.detailed-status__button:hover,
.detailed-status__button:focus,
.dropdown-menu__item:hover,
.dropdown-menu__item:focus {
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
color: #45DA64 !important;
}
/* Tabs */
.account__section-headline a,
.account__section-headline button,
.account__section-headline [role="tab"],
.profile__tabs a,
.profile__tabs button,
.profile__tabs [role="tab"],
.tab-bar__link,
.tabs-bar__link,
.tab-list__link,
[role="tablist"] [role="tab"],
.explore__tabs a,
.explore__tabs button,
.explore__tabs [role="tab"],
.explore__links a,
.explore__links button,
.explore__links [role="tab"],
.trends__tabs a,
.trends__tabs button,
.trends__tabs [role="tab"],
.column-header__tabs a,
.column-header__tabs button,
.column-header__tabs [role="tab"] {
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
color: #FB521F !important;
text-decoration: none !important;
}
.account__section-headline a *,
.account__section-headline button *,
.account__section-headline [role="tab"] *,
.profile__tabs a *,
.profile__tabs button *,
.profile__tabs [role="tab"] *,
.tab-bar__link *,
.tabs-bar__link *,
.tab-list__link *,
[role="tablist"] [role="tab"] *,
.explore__tabs a *,
.explore__tabs button *,
.explore__tabs [role="tab"] *,
.explore__links a *,
.explore__links button *,
.explore__links [role="tab"] *,
.trends__tabs a *,
.trends__tabs button *,
.trends__tabs [role="tab"] *,
.column-header__tabs a *,
.column-header__tabs button *,
.column-header__tabs [role="tab"] * {
color: #FB521F !important;
fill: currentColor !important;
stroke: currentColor !important;
}
.account__section-headline a:hover,
.account__section-headline a:focus,
.account__section-headline a:active,
.account__section-headline a.active,
.account__section-headline a[aria-current="page"],
.account__section-headline a[aria-selected="true"],
.account__section-headline button:hover,
.account__section-headline button:focus,
.account__section-headline button:active,
.account__section-headline button.active,
.account__section-headline button[aria-current="page"],
.account__section-headline button[aria-selected="true"],
.account__section-headline [role="tab"]:hover,
.account__section-headline [role="tab"]:focus,
.account__section-headline [role="tab"]:active,
.account__section-headline [role="tab"].active,
.account__section-headline [role="tab"][aria-current="page"],
.account__section-headline [role="tab"][aria-selected="true"],
.profile__tabs a:hover,
.profile__tabs a:focus,
.profile__tabs a:active,
.profile__tabs a.active,
.profile__tabs a[aria-current="page"],
.profile__tabs a[aria-selected="true"],
.profile__tabs button:hover,
.profile__tabs button:focus,
.profile__tabs button:active,
.profile__tabs button.active,
.profile__tabs button[aria-current="page"],
.profile__tabs button[aria-selected="true"],
.profile__tabs [role="tab"]:hover,
.profile__tabs [role="tab"]:focus,
.profile__tabs [role="tab"]:active,
.profile__tabs [role="tab"].active,
.profile__tabs [role="tab"][aria-current="page"],
.profile__tabs [role="tab"][aria-selected="true"],
.tab-bar__link:hover,
.tab-bar__link:focus,
.tab-bar__link:active,
.tab-bar__link.active,
.tab-bar__link[aria-current="page"],
.tab-bar__link[aria-selected="true"],
.tabs-bar__link:hover,
.tabs-bar__link:focus,
.tabs-bar__link:active,
.tabs-bar__link.active,
.tabs-bar__link[aria-current="page"],
.tabs-bar__link[aria-selected="true"],
.tab-list__link:hover,
.tab-list__link:focus,
.tab-list__link:active,
.tab-list__link.active,
.tab-list__link[aria-current="page"],
.tab-list__link[aria-selected="true"],
[role="tablist"] [role="tab"]:hover,
[role="tablist"] [role="tab"]:focus,
[role="tablist"] [role="tab"]:active,
[role="tablist"] [role="tab"].active,
[role="tablist"] [role="tab"][aria-current="page"],
[role="tablist"] [role="tab"][aria-selected="true"],
.explore__tabs a:hover,
.explore__tabs a:focus,
.explore__tabs a.active,
.explore__tabs a[aria-selected="true"],
.explore__tabs button:hover,
.explore__tabs button:focus,
.explore__tabs button.active,
.explore__tabs button[aria-selected="true"],
.explore__links a:hover,
.explore__links a:focus,
.explore__links a.active,
.explore__links a[aria-selected="true"],
.explore__links button:hover,
.explore__links button:focus,
.explore__links button.active,
.explore__links button[aria-selected="true"],
.trends__tabs a:hover,
.trends__tabs a:focus,
.trends__tabs a.active,
.trends__tabs a[aria-selected="true"],
.trends__tabs button:hover,
.trends__tabs button:focus,
.trends__tabs button.active,
.trends__tabs button[aria-selected="true"],
.column-header__tabs a:hover,
.column-header__tabs a:focus,
.column-header__tabs a.active,
.column-header__tabs a[aria-selected="true"],
.column-header__tabs button:hover,
.column-header__tabs button:focus,
.column-header__tabs button.active,
.column-header__tabs button[aria-selected="true"] {
background-color: transparent !important;
border-bottom-color: #45DA64 !important;
color: #45DA64 !important;
box-shadow: inset 0 -3px 0 #45DA64 !important;
text-decoration: none !important;
}
/* Status / notification links */
.status__prepend a,
.status__prepend a span,
.status__prepend .display-name,
.status__prepend .display-name strong,
.status__prepend .display-name__account,
.status__prepend .status__display-name,
.status__prepend .status__display-name strong,
.status__prepend .status__display-name span,
.status__prepend .notification__display-name,
.status__prepend .notification__display-name strong,
.status__prepend .notification__display-name span,
.status__prepend .account__display-name,
.status__prepend .account__display-name strong,
.status__prepend .account__display-name span,
.notification__message a,
.notification__message a span,
.notification__message .display-name,
.notification__message .display-name strong,
.notification__message .display-name__account,
.notification__message .status__display-name,
.notification__message .status__display-name strong,
.notification__message .status__display-name span,
.notification__message .notification__display-name,
.notification__message .notification__display-name strong,
.notification__message .notification__display-name span,
.notification__message .account__display-name,
.notification__message .account__display-name strong,
.notification__message .account__display-name span,
.status .status__info a,
.status .status__info a span,
.status .status__info .display-name,
.status .status__info .display-name strong,
.status .status__info .display-name__account,
.status .status__info .status__display-name,
.status .status__info .status__display-name strong,
.status .status__info .status__display-name span,
.status .status__info .account__display-name,
.status .status__info .account__display-name strong,
.status .status__info .account__display-name span,
.status .status__relative-time,
.status .status__relative-time a,
.status .status__relative-time span,
.status .status__visibility-icon,
.status .status__visibility-icon .icon,
.status .display-name,
.status .display-name strong,
.status .display-name__account,
.status .account__display-name,
.status .account__display-name strong,
.status .account__display-name span,
.notification .display-name,
.notification .display-name strong,
.notification .display-name__account,
.notification .account__display-name,
.notification .account__display-name strong,
.notification .account__display-name span,
.notification .status__relative-time,
.notification .status__relative-time a,
.notification .status__relative-time span,
.navigation-panel .account a,
.navigation-panel .account a span,
.navigation-panel .account__display-name,
.navigation-panel .account__display-name strong,
.navigation-panel .display-name,
.navigation-panel .display-name strong,
.navigation-panel .display-name__account,
.navigation-panel .account__acct,
.navigation-panel .account__username,
.navigation-panel .account__name,
.drawer .account a,
.drawer .account a span,
.drawer .account__display-name,
.drawer .account__display-name strong,
.drawer .display-name,
.drawer .display-name strong,
.drawer .display-name__account,
.drawer .account__acct,
.drawer .account__username,
.drawer .account__name,
.compose-panel .account a,
.compose-panel .account a span,
.compose-panel .account__display-name,
.compose-panel .account__display-name strong,
.compose-panel .display-name,
.compose-panel .display-name strong,
.compose-panel .display-name__account,
.compose-panel .account__acct,
.compose-panel .account__username,
.compose-panel .account__name,
.drawer__inner__mastodon .account a,
.drawer__inner__mastodon .account a span,
.drawer__inner__mastodon .account__display-name,
.drawer__inner__mastodon .account__display-name strong,
.drawer__inner__mastodon .display-name,
.drawer__inner__mastodon .display-name strong,
.drawer__inner__mastodon .display-name__account,
.drawer__inner__mastodon .account__acct,
.drawer__inner__mastodon .account__username,
.drawer__inner__mastodon .account__name {
color: #FB521F !important;
text-decoration-color: #FB521F !important;
}
.status__prepend a:hover,
.status__prepend a:focus,
.status__prepend a:hover span,
.status__prepend a:focus span,
.status__prepend .display-name:hover,
.status__prepend .display-name:focus,
.notification__message a:hover,
.notification__message a:focus,
.notification__message a:hover span,
.notification__message a:focus span,
.status .status__info a:hover,
.status .status__info a:focus,
.status .status__info a:hover span,
.status .status__info a:focus span,
.status .status__relative-time:hover,
.status .status__relative-time:focus,
.status .status__relative-time a:hover,
.status .status__relative-time a:focus,
.notification .status__relative-time:hover,
.notification .status__relative-time:focus,
.notification .status__relative-time a:hover,
.notification .status__relative-time a:focus,
.navigation-panel .account a:hover,
.navigation-panel .account a:focus,
.navigation-panel .account a:hover span,
.navigation-panel .account a:focus span,
.drawer .account a:hover,
.drawer .account a:focus,
.compose-panel .account a:hover,
.compose-panel .account a:focus,
.drawer__inner__mastodon .account a:hover,
.drawer__inner__mastodon .account a:focus {
color: #FF8A5C !important;
text-decoration-color: #FF8A5C !important;
}
/* Compose box */
/* Transparent shell + controls */
form.compose-form,
.compose-form,
.compose-form__autosuggest-wrapper,
.compose-form__modifiers,
.compose-form__buttons-wrapper,
.compose-form__actions,
.compose-form__buttons,
.compose-form__footer,
.compose-form__publish,
.compose-form textarea,
.compose-form input:not([type="submit"]):not([type="button"]),
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
/* The single grey panel */
.compose-form__highlightable {
background-color: #30302E !important;
color: #FAF9F5 !important;
}
/* Readable text + placeholders inside the grey panel */
.compose-form textarea,
.compose-form input:not([type="submit"]):not([type="button"]),
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
color: #FAF9F5 !important;
}
.compose-form textarea::placeholder,
.compose-form input::placeholder,
.compose-form .autosuggest-textarea__textarea::placeholder,
.compose-form .spoiler-input__input::placeholder {
color: #C2C0B6 !important;
opacity: 1 !important;
}
/* Orange focus border (Mastodon draws this on the wrapper, not the textarea) */
.compose-form textarea:focus,
.compose-form input:not([type="submit"]):not([type="button"]):focus,
.compose-form .autosuggest-textarea__textarea:focus,
.compose-form .spoiler-input__input:focus,
.compose-form__highlightable:focus,
.compose-form__highlightable:focus-within {
border-color: #FB521F !important;
outline-color: #FB521F !important;
box-shadow: 0 0 0 2px rgba(251, 82, 31, 0.25) !important;
}
/* Privacy / language pills */
.compose-form .privacy-dropdown__value,
.compose-form .language-dropdown__value {
background-color: transparent !important;
border-color: #45DA64 !important;
color: #45DA64 !important;
}
/* Post button (compact pill, orange -> green) */
.compose-form .button,
.compose-form button.button,
.compose-form input[type="submit"],
.compose-form .compose-form__publish-button-wrapper .button,
.compose-form .compose-form__submit .button {
background-color: #FB521F !important;
border-color: #FB521F !important;
color: #FAF9F5 !important;
min-height: 34px !important;
padding-left: 18px !important;
padding-right: 18px !important;
}
.compose-form .button:hover,
.compose-form .button:focus,
.compose-form button.button:hover,
.compose-form button.button:focus,
.compose-form input[type="submit"]:hover,
.compose-form input[type="submit"]:focus,
.compose-form .compose-form__publish-button-wrapper .button:hover,
.compose-form .compose-form__publish-button-wrapper .button:focus,
.compose-form .compose-form__submit .button:hover,
.compose-form .compose-form__submit .button:focus {
background-color: #45DA64 !important;
border-color: #45DA64 !important;
color: #20201D !important;
}
/* Icons */
.icon,
.icon-button,
.status__action-bar-button,
.status__action-bar-button .icon,
.detailed-status__button,
.detailed-status__button .icon,
svg:not(.logo):not(.logo--wordmark) {
color: currentColor !important;
fill: currentColor !important;
stroke: currentColor !important;
}
:focus-visible {
outline-color: #45DA64 !important;
}
/* Search */
.search,
.search__input,
input[type="search"],
input[role="searchbox"],
input[aria-label="Search"],
input[aria-label="Search or paste URL"],
input[placeholder="Search"],
input[placeholder="Search or paste URL"],
input[placeholder*="Search" i] {
border-radius: 999px !important;
}
.search {
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.search__input,
input[type="search"],
input[role="searchbox"],
input[aria-label="Search"],
input[aria-label="Search or paste URL"],
input[placeholder="Search"],
input[placeholder="Search or paste URL"],
input[placeholder*="Search" i] {
background-color: #30302E !important;
border-color: transparent !important;
color: #FAF9F5 !important;
min-height: 42px !important;
padding-left: 48px !important; /* clear the left magnifier icon inside the pill */
padding-right: 18px !important;
text-indent: 0 !important;
}
.search__input:hover,
input[type="search"]:hover,
input[role="searchbox"]:hover,
input[aria-label="Search"]:hover,
input[aria-label="Search or paste URL"]:hover,
input[placeholder*="Search" i]:hover {
background-color: #383734 !important;
}
.search__input:focus,
input[type="search"]:focus,
input[role="searchbox"]:focus,
input[aria-label="Search"]:focus,
input[aria-label="Search or paste URL"]:focus,
input[placeholder*="Search" i]:focus {
background-color: #30302E !important;
border-color: #FB521F !important;
box-shadow: 0 0 0 2px rgba(251, 82, 31, 0.25) !important;
color: #FAF9F5 !important;
outline-color: #FB521F !important;
}
.search__input::placeholder,
input[type="search"]::placeholder,
input[role="searchbox"]::placeholder,
input[aria-label="Search"]::placeholder,
input[aria-label="Search or paste URL"]::placeholder,
input[placeholder*="Search" i]::placeholder {
color: #C2C0B6 !important;
opacity: 1 !important;
}
.search__icon,
.search__icon .icon,
.search__icon-wrapper,
.search__icon-wrapper .icon,
.search svg:not(.logo):not(.logo--wordmark) {
color: #FAF9F5 !important;
fill: currentColor !important;
stroke: currentColor !important;
}
/* Keep the magnifier clear of the rounded pill corner (only affects it if
Mastodon positions the icon from the left edge). */
.search__icon,
.search__icon-wrapper {
left: 12px !important;
right: auto !important;
}
/* Logo */
:root,
html,
body {
--logo: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>') !important;
}
/* Hide Mastodon's logo assets (logo-specific only, not general icons). */
.logo-resources,
.logo-resources *,
svg.logo.logo--wordmark,
svg.logo.logo--icon,
svg.logo--wordmark,
svg.logo--icon,
.logo--wordmark,
.logo--icon,
.logo-container svg.logo,
.logo-container svg.logo--wordmark,
.logo-container svg.logo--icon,
.logo-container img[alt="Mastodon"],
.logo-container [title="Mastodon"],
.brand__logo svg.logo,
.brand__logo svg.logo--wordmark,
.brand__logo svg.logo--icon,
.brand__logo img[alt="Mastodon"],
.brand__logo [title="Mastodon"],
.navigation-panel__logo svg.logo,
.navigation-panel__logo svg.logo--wordmark,
.navigation-panel__logo svg.logo--icon,
.navigation-panel__logo img[alt="Mastodon"],
.navigation-panel__logo [title="Mastodon"],
.compose-panel__logo svg.logo,
.compose-panel__logo svg.logo--wordmark,
.compose-panel__logo svg.logo--icon,
.compose-panel__logo img[alt="Mastodon"],
.compose-panel__logo [title="Mastodon"],
.mobile-header__logo svg.logo,
.mobile-header__logo svg.logo--wordmark,
.mobile-header__logo svg.logo--icon,
.mobile-header__logo img[alt="Mastodon"],
.mobile-header__logo [title="Mastodon"],
.drawer__inner__mastodon svg.logo,
.drawer__inner__mastodon svg.logo--wordmark,
.drawer__inner__mastodon svg.logo--icon,
.drawer__inner__mastodon img[alt="Mastodon"],
.drawer__inner__mastodon [title="Mastodon"],
use[href="#logo-symbol-wordmark"],
use[xlink\:href="#logo-symbol-wordmark"],
use[href="#logo-symbol-icon"],
use[xlink\:href="#logo-symbol-icon"] {
display: none !important;
height: 0 !important;
max-height: 0 !important;
max-width: 0 !important;
min-height: 0 !important;
min-width: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
width: 0 !important;
}
/* Prevent double-rendering on nested logo descendants. */
.logo-container *,
.brand__logo *,
.navigation-panel__logo *,
.compose-panel__logo *,
.mobile-header__logo *,
.drawer__inner__mastodon * {
background-image: none !important;
}
/* Paint the PrivacySafe logo on the visible wrapper containers only. */
.logo-container,
.brand__logo,
.navigation-panel__logo,
.compose-panel__logo,
.mobile-header__logo {
background-image: var(--logo) !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
display: block !important;
min-height: 44px !important;
min-width: 160px !important;
}
/* Drawer logo holder, only when it actually holds a Mastodon logo. */
.drawer__inner__mastodon:has(svg.logo),
.drawer__inner__mastodon:has(.logo--wordmark),
.drawer__inner__mastodon:has(img[alt="Mastodon"]),
.drawer__inner__mastodon:has([title="Mastodon"]) {
background-image: var(--logo) !important;
background-position: left center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
min-height: 44px !important;
}
/* Public / sign-in logo: larger, centered. */
.public-layout .logo-container,
.public-layout .brand__logo,
body:not(.app-body) .logo-container,
body:not(.app-body) .brand__logo {
background-position: center center !important;
min-height: 82px !important;
min-width: min(300px, 82vw) !important;
width: min(300px, 82vw) !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* App / sidebar logos: compact. */
body.app-body .logo-container,
body.app-body .brand__logo,
body.app-body .navigation-panel__logo,
body.app-body .compose-panel__logo,
body.app-body .mobile-header__logo {
background-position: left center !important;
min-height: 44px !important;
min-width: 160px !important;
width: 160px !important;
}
/* Give an empty logo link a visible box for the background. */
.logo-container a,
.brand__logo a,
.navigation-panel__logo a,
.compose-panel__logo a,
.mobile-header__logo a {
display: block !important;
height: 44px !important;
min-height: 44px !important;
min-width: 160px !important;
width: 160px !important;
}
.public-layout .logo-container a,
.public-layout .brand__logo a,
body:not(.app-body) .logo-container a,
body:not(.app-body) .brand__logo a {
height: 82px !important;
min-height: 82px !important;
min-width: min(300px, 82vw) !important;
width: min(300px, 82vw) !important;
}
/* Footer */
._ui_components_link_footer__list a,
._ui_components_link_footer__list a span,
._ui_components_link_footer__list a:visited,
.link-footer ._ui_components_link_footer__list a,
.link-footer ._ui_components_link_footer__list a span,
.link-footer ._ui_components_link_footer__list a:visited,
section ._ui_components_link_footer__list a,
section ._ui_components_link_footer__list a span,
section ._ui_components_link_footer__list a:visited {
color: #C6613F !important;
text-decoration-color: #C6613F !important;
}
._ui_components_link_footer__list a:hover,
._ui_components_link_footer__list a:focus,
._ui_components_link_footer__list a:hover span,
._ui_components_link_footer__list a:focus span,
.link-footer ._ui_components_link_footer__list a:hover,
.link-footer ._ui_components_link_footer__list a:focus,
section ._ui_components_link_footer__list a:hover,
section ._ui_components_link_footer__list a:focus {
color: #C6613F !important;
text-decoration-color: #C6613F !important;
text-decoration-line: underline !important;
text-decoration-style: dotted !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 3px !important;
}
._ui_components_link_footer__heading,
._ui_components_link_footer__version,
.link-footer ._ui_components_link_footer__heading,
.link-footer ._ui_components_link_footer__version {
color: #FAF9F5 !important;
}
/* The Mastodon footer line layout + relabeling. */
footer._ui_components_link_footer__wrapper {
margin-top: auto !important;
padding: 16px 0 0 0 !important;
}
footer._ui_components_link_footer__wrapper section {
margin: 0 0 12px 0 !important;
padding: 0 !important;
}
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) {
color: #FAF9F5 !important;
display: block !important;
font-size: 12px !important;
line-height: 1.45 !important;
}
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__heading {
color: #FAF9F5 !important;
display: inline !important;
font-size: 12px !important;
font-weight: 700 !important;
margin: 0 !important;
padding: 0 !important;
}
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__heading::after {
content: " " !important;
display: inline !important;
}
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list,
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list li {
display: inline !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Hide About + Get the app in the Mastodon footer. */
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list li:has(a[href="https://joinmastodon.org"]),
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list li:has(a[href="https://joinmastodon.org/apps"]) {
display: none !important;
}
/* Clear Mastodon's default separators in this section. */
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list li::before,
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list li::after,
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list a::before,
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list a::after {
content: none !important;
display: none !important;
}
/* Relabel: Keyboard shortcuts -> Shortcuts */
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) a[href="/keyboard-shortcuts"] {
color: transparent !important;
display: inline !important;
font-size: 0 !important;
text-decoration: none !important;
}
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) a[href="/keyboard-shortcuts"]::after {
color: #C6613F !important;
content: "Shortcuts" !important;
display: inline !important;
font-size: 12px !important;
text-decoration: underline !important;
text-decoration-color: #C6613F !important;
}
/* Relabel: View source code -> Source */
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) a[href="https://github.com/mastodon/mastodon"] {
color: transparent !important;
display: inline !important;
font-size: 0 !important;
text-decoration: none !important;
}
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) a[href="https://github.com/mastodon/mastodon"]::after {
color: #C6613F !important;
content: "Source" !important;
display: inline !important;
font-size: 12px !important;
text-decoration: underline !important;
text-decoration-color: #C6613F !important;
margin-right: 0 !important;
}
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) ._ui_components_link_footer__version {
color: #FAF9F5 !important;
display: inline !important;
font-size: 12px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Separators before Source and before the version. */
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list li:has(a[href="https://github.com/mastodon/mastodon"])::before,
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list li:has(._ui_components_link_footer__version)::before,
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list li._ui_components_link_footer__version::before {
color: #FAF9F5 !important;
content: " · " !important;
display: inline !important;
font-size: 12px !important;
}
/* Compose panel layout */
.columns-area__panels__pane:has(.compose-panel),
.columns-area__panels__pane__inner:has(.compose-panel) {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
min-height: 100vh !important;
overflow: hidden !important;
}
.compose-panel {
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
height: 100% !important;
min-height: 100vh !important;
overflow: hidden !important;
}
.compose-panel > form.search,
.compose-panel > form.compose-form {
flex: 0 0 auto !important;
}
/* The account header (NavigationBar: avatar + display name + @handle) sits
between the search field and the compose box. It was the one flex child not
pinned, so on shorter viewports the column squeezed it and the margin under
the handle collapsed. Pin it and restore the gap above the compose box. */
.compose-panel .navigation-bar {
flex: 0 0 auto !important;
}
.compose-panel .compose-form__highlightable {
margin-top: 12px !important;
}
/* Keep the composer visible (a prior version of this file accidentally hid it). */
.compose-panel > form.compose-form,
form.compose-form[role="region"][aria-label="New Post"] {
display: block !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
opacity: 1 !important;
overflow: visible !important;
pointer-events: auto !important;
position: static !important;
visibility: visible !important;
width: auto !important;
}
.compose-panel > footer._ui_components_link_footer__wrapper,
.compose-panel > [class*="link_footer"]:has(._ui_components_link_footer__heading),
.compose-panel > [class*="LinkFooter"]:has(._ui_components_link_footer__heading) {
flex: 0 0 auto !important;
margin-top: auto !important;
width: 100% !important;
}
footer._ui_components_link_footer__wrapper {
align-self: stretch !important;
flex-grow: 0 !important;
flex-shrink: 0 !important;
}
/* Hide sidebar new-post link */
@media screen and (min-width: 761px) {
.navigation-panel a[href="/publish"],
.navigation-panel a[href$="/publish"],
.navigation-panel a[href="/compose"],
.navigation-panel a[href$="/compose"],
.navigation-panel .column-link[href$="/publish"],
.navigation-panel .column-link[href$="/compose"],
.navigation-panel li:has(> a[href$="/publish"]),
.navigation-panel li:has(> a[href$="/compose"]) {
display: none !important;
}
}
/* Mobile bottom nav */
@media screen and (max-width: 760px) {
.ui__navigation-bar a,
.ui__navigation-bar button:not(.button),
.ui__navigation-bar .column-link,
.ui__navigation-bar .tabs-bar__link,
.bottom-navigation a,
.bottom-navigation button:not(.button),
.bottom-navigation .column-link,
.bottom-navigation .tabs-bar__link,
.navigation-bar a,
.navigation-bar button:not(.button),
.navigation-bar .column-link,
.navigation-bar .tabs-bar__link {
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
color: #FB521F !important;
fill: currentColor !important;
stroke: currentColor !important;
}
.ui__navigation-bar a .icon,
.ui__navigation-bar a svg,
.bottom-navigation a .icon,
.bottom-navigation a svg,
.navigation-bar a .icon,
.navigation-bar a svg {
color: #FB521F !important;
fill: currentColor !important;
stroke: currentColor !important;
}
.ui__navigation-bar a:hover,
.ui__navigation-bar a:focus,
.ui__navigation-bar a:active,
.ui__navigation-bar a.active,
.ui__navigation-bar a[aria-current="page"],
.bottom-navigation a:hover,
.bottom-navigation a:focus,
.bottom-navigation a:active,
.bottom-navigation a.active,
.bottom-navigation a[aria-current="page"],
.navigation-bar a:hover,
.navigation-bar a:focus,
.navigation-bar a:active,
.navigation-bar a.active,
.navigation-bar a[aria-current="page"] {
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
color: #45DA64 !important;
fill: currentColor !important;
stroke: currentColor !important;
}
.ui__navigation-bar a:hover .icon,
.ui__navigation-bar a.active .icon,
.ui__navigation-bar a[aria-current="page"] .icon,
.ui__navigation-bar a:hover svg,
.ui__navigation-bar a.active svg,
.ui__navigation-bar a[aria-current="page"] svg,
.bottom-navigation a:hover .icon,
.bottom-navigation a.active .icon,
.bottom-navigation a[aria-current="page"] .icon,
.navigation-bar a:hover .icon,
.navigation-bar a.active .icon,
.navigation-bar a[aria-current="page"] .icon,
.navigation-bar a:hover svg,
.navigation-bar a.active svg,
.navigation-bar a[aria-current="page"] svg {
color: #45DA64 !important;
fill: currentColor !important;
stroke: currentColor !important;
}
}
/* Privacy dropdown labels */
.dropdown-button__label {
text-transform: capitalize !important;
}
.privacy-dropdown__dropdown ul li .privacy-dropdown__option__content,
.privacy-dropdown__dropdown ul li .privacy-dropdown__option__additional {
display: none !important;
}
.privacy-dropdown__dropdown ul li:nth-of-type(1) .privacy-dropdown__option__icon::after {
color: #FAF9F5 !important;
content: "Public: Anyone in the World" !important;
font-weight: 400 !important;
padding-left: 6px !important;
}
.privacy-dropdown__dropdown ul li:nth-of-type(2) .privacy-dropdown__option__icon::after {
color: #FAF9F5 !important;
content: "Quiet Public: Not in Search or Trends" !important;
font-weight: 400 !important;
padding-left: 6px !important;
}
.privacy-dropdown__dropdown ul li:nth-of-type(3) .privacy-dropdown__option__icon::after {
color: #FAF9F5 !important;
content: "Followers: Only Your Followers" !important;
font-weight: 400 !important;
padding-left: 6px !important;
}
.privacy-dropdown__dropdown ul li:nth-of-type(4) .privacy-dropdown__option__icon::after {
color: #FAF9F5 !important;
content: "Specific People: Users @ Mentioned" !important;
font-weight: 400 !important;
padding-left: 6px !important;
}
/* Direct messages */
.status__wrapper-direct .status__prepend > span {
text-transform: capitalize !important;
}
.status__wrapper-direct .status__prepend > span::before {
content: "Direct Message (" !important;
}
.status__wrapper-direct .status__prepend > span::after {
content: ")" !important;
}
/* Column title: hide the original text, keep the icon, insert replacement. */
html:has(meta[name="initialPath"][content="/conversations"]) .column-header__title,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header__title *,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header h1,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header h1 *,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header h2,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header h2 *,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header button,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header button > span:not(.icon):not(.icon-wrapper),
html:has(meta[name="initialPath"][content="/conversations"]) .column-header [class*="title"],
.column-header:has(.icon-at) .column-header__title,
.column-header__title:has(.icon-at),
.column-header__title:has([class*="alternate_email"]),
.column-header__title:has([href*="/conversations"]),
.column-header button[aria-label="Private mentions"],
.column-header button[title="Private mentions"],
.column-header a[aria-label="Private mentions"],
.column-header a[title="Private mentions"] {
font-size: 0 !important;
}
.column-header:has(.icon-at) .column-header__title .icon,
.column-header:has(.icon-at) .column-header__title svg,
.column-header__title:has(.icon-at) .icon,
.column-header__title:has(.icon-at) svg,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header .icon,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header svg,
.column-header button[aria-label="Private mentions"] .icon,
.column-header button[aria-label="Private mentions"] svg,
.column-header a[aria-label="Private mentions"] .icon,
.column-header a[aria-label="Private mentions"] svg {
font-size: 24px !important;
height: 24px !important;
line-height: 24px !important;
width: 24px !important;
}
html:has(meta[name="initialPath"][content="/conversations"]) .column-header__title::after,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header h1::after,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header h2::after,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header button::after,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header [class*="title"]::after,
.column-header:has(.icon-at) .column-header__title::after,
.column-header__title:has(.icon-at)::after,
.column-header__title:has([class*="alternate_email"])::after,
.column-header button[aria-label="Private mentions"]::after,
.column-header button[title="Private mentions"]::after,
.column-header a[aria-label="Private mentions"]::after,
.column-header a[title="Private mentions"]::after {
color: #FAF9F5 !important;
content: "Direct Messages (aka Private mentions)" !important;
display: inline-block !important;
font-size: 16px !important;
line-height: 24px !important;
margin-left: 8px !important;
vertical-align: middle !important;
}
/* Nav item label. */
.navigation-panel a[href="/conversations"] span:not(.icon):not(.icon-wrapper),
.navigation-panel a[href*="/conversations"] span:not(.icon):not(.icon-wrapper),
.navigation-panel a[aria-label="Private mentions"] span:not(.icon):not(.icon-wrapper),
.navigation-panel a[title="Private mentions"] span:not(.icon):not(.icon-wrapper),
.drawer a[href="/conversations"] span:not(.icon):not(.icon-wrapper),
.drawer a[href*="/conversations"] span:not(.icon):not(.icon-wrapper),
.drawer a[aria-label="Private mentions"] span:not(.icon):not(.icon-wrapper),
.drawer a[title="Private mentions"] span:not(.icon):not(.icon-wrapper),
.mobile-menu a[href="/conversations"] span:not(.icon):not(.icon-wrapper),
.mobile-menu a[href*="/conversations"] span:not(.icon):not(.icon-wrapper),
.mobile-menu a[aria-label="Private mentions"] span:not(.icon):not(.icon-wrapper),
.mobile-menu a[title="Private mentions"] span:not(.icon):not(.icon-wrapper) {
font-size: 0 !important;
}
.navigation-panel a[href="/conversations"] span:not(.icon):not(.icon-wrapper)::after,
.navigation-panel a[href*="/conversations"] span:not(.icon):not(.icon-wrapper)::after,
.navigation-panel a[aria-label="Private mentions"] span:not(.icon):not(.icon-wrapper)::after,
.navigation-panel a[title="Private mentions"] span:not(.icon):not(.icon-wrapper)::after,
.drawer a[href="/conversations"] span:not(.icon):not(.icon-wrapper)::after,
.drawer a[href*="/conversations"] span:not(.icon):not(.icon-wrapper)::after,
.drawer a[aria-label="Private mentions"] span:not(.icon):not(.icon-wrapper)::after,
.drawer a[title="Private mentions"] span:not(.icon):not(.icon-wrapper)::after,
.mobile-menu a[href="/conversations"] span:not(.icon):not(.icon-wrapper)::after,
.mobile-menu a[href*="/conversations"] span:not(.icon):not(.icon-wrapper)::after,
.mobile-menu a[aria-label="Private mentions"] span:not(.icon):not(.icon-wrapper)::after,
.mobile-menu a[title="Private mentions"] span:not(.icon):not(.icon-wrapper)::after {
color: inherit !important;
content: "Direct Messages" !important;
font-size: 16px !important;
}
/* Nav coloring: behave like the other side-menu links. */
.navigation-panel a[href="/conversations"],
.navigation-panel a[href*="/conversations"],
.navigation-panel a[aria-label="Private mentions"],
.navigation-panel a[title="Private mentions"],
.drawer a[href="/conversations"],
.drawer a[href*="/conversations"],
.drawer a[aria-label="Private mentions"],
.drawer a[title="Private mentions"],
.mobile-menu a[href="/conversations"],
.mobile-menu a[href*="/conversations"],
.mobile-menu a[aria-label="Private mentions"],
.mobile-menu a[title="Private mentions"] {
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
color: #FAF9F5 !important;
}
.navigation-panel a[href="/conversations"] *,
.navigation-panel a[href*="/conversations"] *,
.drawer a[href="/conversations"] *,
.drawer a[href*="/conversations"] *,
.mobile-menu a[href="/conversations"] *,
.mobile-menu a[href*="/conversations"] * {
color: #FAF9F5 !important;
fill: currentColor !important;
stroke: currentColor !important;
}
.navigation-panel a[href="/conversations"]:hover,
.navigation-panel a[href="/conversations"]:focus,
.navigation-panel a[href*="/conversations"]:hover,
.navigation-panel a[href*="/conversations"]:focus,
.drawer a[href="/conversations"]:hover,
.drawer a[href="/conversations"]:focus,
.drawer a[href*="/conversations"]:hover,
.drawer a[href*="/conversations"]:focus,
.mobile-menu a[href="/conversations"]:hover,
.mobile-menu a[href="/conversations"]:focus,
.mobile-menu a[href*="/conversations"]:hover,
.mobile-menu a[href*="/conversations"]:focus {
color: #45DA64 !important;
}
.navigation-panel a[href="/conversations"]:hover *,
.navigation-panel a[href="/conversations"]:focus *,
.navigation-panel a[href*="/conversations"]:hover *,
.navigation-panel a[href*="/conversations"]:focus *,
.drawer a[href="/conversations"]:hover *,
.drawer a[href="/conversations"]:focus *,
.mobile-menu a[href="/conversations"]:hover *,
.mobile-menu a[href="/conversations"]:focus * {
color: #45DA64 !important;
fill: currentColor !important;
stroke: currentColor !important;
}
.navigation-panel a[href="/conversations"].active,
.navigation-panel a[href="/conversations"][aria-current="page"],
.navigation-panel a[href*="/conversations"].active,
.navigation-panel a[href*="/conversations"][aria-current="page"],
.drawer a[href="/conversations"].active,
.drawer a[href="/conversations"][aria-current="page"],
.drawer a[href*="/conversations"].active,
.drawer a[href*="/conversations"][aria-current="page"],
.mobile-menu a[href="/conversations"].active,
.mobile-menu a[href="/conversations"][aria-current="page"],
.mobile-menu a[href*="/conversations"].active,
.mobile-menu a[href*="/conversations"][aria-current="page"] {
color: #FB521F !important;
}
.navigation-panel a[href="/conversations"].active *,
.navigation-panel a[href="/conversations"][aria-current="page"] *,
.navigation-panel a[href*="/conversations"].active *,
.navigation-panel a[href*="/conversations"][aria-current="page"] *,
.drawer a[href="/conversations"].active *,
.drawer a[href*="/conversations"].active *,
.mobile-menu a[href="/conversations"].active *,
.mobile-menu a[href*="/conversations"].active * {
color: #FB521F !important;
fill: currentColor !important;
stroke: currentColor !important;
}
/* Private mentions banner */
.follow_requests-unlocked_explanation {
background-color: #262624 !important;
border: 1px solid #4A4A45 !important;
border-left: 4px solid #FB521F !important;
border-radius: 8px !important;
box-shadow: none !important;
color: #FAF9F5 !important;
font-size: 14px !important;
line-height: 1.45 !important;
padding: 14px 16px !important;
}
/* Hide the original warning text (keep the Learn more link). */
.follow_requests-unlocked_explanation > span {
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
}
.follow_requests-unlocked_explanation > span > span {
display: none !important;
font-size: 0 !important;
}
.follow_requests-unlocked_explanation::after,
.follow_requests-unlocked_explanation span::after,
.follow_requests-unlocked_explanation a::before,
.follow_requests-unlocked_explanation a::after {
content: none !important;
display: none !important;
}
.follow_requests-unlocked_explanation::before {
color: #FB521F !important;
content: "WARNING:" !important;
display: inline !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.45 !important;
margin-right: 4px !important;
}
.follow_requests-unlocked_explanation > span::before {
color: #FAF9F5 !important;
content: 'Do not share sensitive information. Direct Messages (DMs) are called "Private Mentions" on Mastodon servers. DMs are not public but are NOT end-to-end encrypted. ' !important;
display: inline !important;
font-size: 14px !important;
line-height: 1.45 !important;
}
.follow_requests-unlocked_explanation a,
.follow_requests-unlocked_explanation a:visited,
.follow_requests-unlocked_explanation a span {
color: #C6613F !important;
display: inline !important;
font-size: 14px !important;
line-height: 1.45 !important;
text-decoration: underline !important;
text-decoration-color: #C6613F !important;
}
/* Never let conversation/status cards render this banner. */
.conversation .follow_requests-unlocked_explanation,
.status .follow_requests-unlocked_explanation,
.status__wrapper .follow_requests-unlocked_explanation,
.item-list article .follow_requests-unlocked_explanation {
display: none !important;
}
/* Identity & sparkline */
/* --- Display NAME (real name) = mustard, distinct from the orange handles ---
The @handle, boosts label, etc. stay orange; only the bold name turns mustard. */
#mastodon .display-name__html,
#mastodon strong.display-name__html,
#mastodon .display-name strong,
#mastodon .display-name > bdi,
#mastodon .display-name__html * {
color: #FAF9F5 !important; /* mustard / goldenrod */
text-decoration-color: #FAF9F5 !important;
}
#mastodon a:hover .display-name__html,
#mastodon a:focus .display-name__html,
#mastodon a:hover .display-name strong,
#mastodon a:focus .display-name strong,
#mastodon .display-name:hover .display-name__html,
#mastodon .display-name:focus .display-name__html {
color: #E5E3DB !important; /* lighter mustard on hover */
text-decoration-color: #E5E3DB !important;
}
/* --- Post timestamp + visibility icon = footer light blue (#C6613F) --- */
#mastodon .status__relative-time,
#mastodon .status__relative-time a,
#mastodon .status__relative-time span,
#mastodon .status__relative-time time,
#mastodon .status__visibility-icon,
#mastodon .status__visibility-icon .icon,
#mastodon .status__visibility-icon svg,
#mastodon .notification .status__relative-time,
#mastodon .notification .status__relative-time a,
#mastodon .notification .status__relative-time span {
color: #C6613F !important;
fill: currentColor !important;
stroke: currentColor !important;
}
#mastodon .status__relative-time:hover,
#mastodon .status__relative-time:focus,
#mastodon .status__relative-time a:hover,
#mastodon .status__relative-time a:focus,
#mastodon .notification .status__relative-time:hover,
#mastodon .notification .status__relative-time a:hover {
color: #D97757 !important; /* slightly lighter blue on hover */
}
/* --- Trending sparkline: bright green line with a translucent gray area fill
underneath (matching the admin dashboard sparklines). Mastodon renders these
as an SVG area path (carries fill-opacity) plus a stroked line path. The area
path defaults to fill:none here, so we paint it gray; the gradient stops are
set gray too in case a is ever used. --- */
#mastodon .trends__item__sparkline path,
#mastodon .trends__item__sparkline polyline {
stroke: #45DA64 !important; /* green line on every stroked path */
}
/* Area path (the one with fill-opacity): translucent warm gray fill. */
#mastodon .trends__item__sparkline svg path[style*="fill-opacity"] {
fill: #87857C !important;
fill-opacity: 0.18 !important;
stroke: none !important;
}
#mastodon .trends__item__sparkline linearGradient stop:first-child,
#mastodon .trends__item__sparkline defs stop:first-child,
#mastodon .trends__item__sparkline stop[offset="0"],
#mastodon .trends__item__sparkline stop:not([offset="1"]) {
stop-color: #87857C !important;
stop-opacity: 0.30 !important;
}
#mastodon .trends__item__sparkline linearGradient stop:last-child,
#mastodon .trends__item__sparkline defs stop:last-child,
#mastodon .trends__item__sparkline stop[offset="1"] {
stop-color: #87857C !important;
stop-opacity: 0.05 !important;
}
/* Admin / settings pages */
/* Left sidebar menu links: footer light blue instead of the default green.
(.admin-wrapper .sidebar beats the bare `a { color }` rule by specificity.) */
.admin-wrapper .sidebar nav a,
.admin-wrapper .sidebar nav a .icon,
.admin-wrapper .sidebar nav a svg {
color: #C6613F !important;
fill: currentColor !important;
stroke: currentColor !important;
}
.admin-wrapper .sidebar nav a:hover,
.admin-wrapper .sidebar nav a:focus {
color: #D97757 !important;
}
/* The current page stays distinct (white) against the blue list. */
.admin-wrapper .sidebar nav a.selected,
.admin-wrapper .sidebar nav .selected > a,
.admin-wrapper .sidebar nav a.selected .icon,
.admin-wrapper .sidebar nav a.selected svg {
color: #FAF9F5 !important;
}
/* Dashboard quick-access buttons: keep the orange fill, force white text/icons. */
.admin-wrapper .dashboard__quick-access,
.admin-wrapper .dashboard__quick-access span,
.admin-wrapper .dashboard__quick-access strong,
.admin-wrapper .dashboard__quick-access .icon,
.admin-wrapper .dashboard__quick-access svg {
color: #FAF9F5 !important;
fill: currentColor !important;
stroke: currentColor !important;
}
/* Settings content tabs (Branding / About / Registrations / ...): the selected
tab has an orange fill and needs white text/icon; the rest stay blue links.
Also force white text on the orange .btn action buttons (e.g. "Save changes"). */
.admin-wrapper .content__heading__tabs a.selected,
.admin-wrapper .content__heading__tabs a.selected .icon,
.admin-wrapper .content__heading__tabs a.selected svg,
.admin-wrapper .btn,
.admin-wrapper button.btn,
.admin-wrapper .button,
.admin-wrapper button.button {
color: #FAF9F5 !important;
fill: currentColor !important;
stroke: currentColor !important;
}
/* Logged-out sign-in banner */
/* Hide the heading + paragraph copy, keep the two link buttons.
NOTE: the plain selector is kept on its OWN rule so a browser that doesn't
understand :has() can't invalidate the whole group and leave the text showing. */
.sign-in-banner p {
display: none !important;
}
/* :has() fallback in case the container class ever differs: matches whatever
element directly holds an auth button, then hides its paragraphs. */
:has(> a[href="/auth/sign_up"].button) > p,
:has(> a[href="/auth/sign_in"].button) > p {
display: none !important;
}
/* Both links: full-width stacked pills (section 5 already gives them the pill
shape/size; here we set block width and spacing). */
.sign-in-banner .button,
.sign-in-banner a[href="/auth/sign_up"],
.sign-in-banner a[href="/auth/sign_in"] {
display: flex !important;
width: 100% !important;
margin-top: 10px !important;
}
/* Primary — Create account: orange, green on hover. */
.sign-in-banner a[href="/auth/sign_up"],
.sign-in-banner .button:not(.button-secondary) {
background-color: #FB521F !important;
border: 1px solid #FB521F !important;
color: #FAF9F5 !important;
}
.sign-in-banner a[href="/auth/sign_up"]:hover,
.sign-in-banner a[href="/auth/sign_up"]:focus,
.sign-in-banner .button:not(.button-secondary):hover,
.sign-in-banner .button:not(.button-secondary):focus {
background-color: #45DA64 !important;
border-color: #45DA64 !important;
color: #20201D !important;
}
/* Secondary — Login: transparent outline pill, green outline on hover. */
.sign-in-banner .button-secondary,
.sign-in-banner a[href="/auth/sign_in"] {
background-color: transparent !important;
border: 1px solid #4A4A45 !important;
color: #FAF9F5 !important;
box-shadow: none !important;
}
.sign-in-banner .button-secondary:hover,
.sign-in-banner .button-secondary:focus,
.sign-in-banner a[href="/auth/sign_in"]:hover,
.sign-in-banner a[href="/auth/sign_in"]:focus {
background-color: transparent !important;
border-color: #45DA64 !important;
color: #45DA64 !important;
box-shadow: none !important;
}
/* Hide the " is one of the many independent Mastodon servers..." blurb
in the logged-out left panel (server banner). */
.server-banner__introduction {
display: none !important;
}
/* Center timeline column */
.columns-area__panels__main,
.columns-area__panels__pane--main,
.columns-area__panels__main .columns-area,
.columns-area__panels__main .column,
.columns-area__panels__main .column > .scrollable,
.columns-area__panels__main .scrollable,
.columns-area__panels__main .scrollable__append,
.columns-area__panels__main .item-list,
.columns-area__panels__main .column-back-button,
.columns-area__panels__main .account__section-headline,
.columns-area__panels__main .notification,
.columns-area__panels__main .status,
.columns-area__panels__main .status__wrapper,
.columns-area__panels__main article,
.columns-area__panels__main .regeneration-indicator,
.columns-area__panels__main .empty-column-indicator,
.columns-area__panels__main .load-more {
background-color: #1A1916 !important;
border-left: 0 !important;
border-right: 0 !important;
box-shadow: none !important;
}
/* Belt-and-suspenders: drop any side border/shadow on the main pane wrapper. */
.columns-area__panels__main {
border: 0 !important;
}
/* Relabel the settings sidebar back-link from "Back to Mastodon" to
"Back to Timeline" (keeps the chevron icon, which is an SVG and so is
unaffected by the font-size:0 used to drop the original text). */
.admin-wrapper .sidebar nav li#web > a,
body.admin .sidebar li#web > a,
.sidebar nav li#web > a {
font-size: 0 !important;
}
.admin-wrapper .sidebar nav li#web > a .icon,
.admin-wrapper .sidebar nav li#web > a svg,
body.admin .sidebar li#web > a .icon,
body.admin .sidebar li#web > a svg,
.sidebar nav li#web > a .icon,
.sidebar nav li#web > a svg {
font-size: initial !important;
}
.admin-wrapper .sidebar nav li#web > a::after,
body.admin .sidebar li#web > a::after,
.sidebar nav li#web > a::after {
content: "Back to Timeline";
font-size: 14px !important;
margin-left: 6px;
vertical-align: middle;
}
/* Settings/preferences backend: paint the main content panel #1A1916 to match
the timeline column. Inputs/selects keep their own surface colors. */
body.admin .content-wrapper,
body.admin .content,
.admin-wrapper .content-wrapper,
.admin-wrapper .content {
background-color: #1A1916 !important;
}
/* Autofill fields */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #30302E inset !important;
box-shadow: 0 0 0 1000px #30302E inset !important;
-webkit-text-fill-color: #FAF9F5 !important;
caret-color: #FAF9F5 !important;
border-color: #4A4A45 !important;
transition: background-color 9999s ease-in-out 0s !important;
}
/* Keep the orange focus ring when an autofilled field is focused. */
input:-webkit-autofill:focus {
border-color: #FB521F !important;
}
/* Alternate accent variables */
:root,
html,
body {
--color-accent-clay: #C6613F !important; /* clay (alternate accent) */
--color-accent-clay-hover: #D97757 !important;
--color-accent-sage: #5FA56B !important; /* muted sage — green counterpart to the clay */
--color-accent-sage-hover: #74B97F !important;
}
/* Text selection: bright brand orange highlight by default. */
::selection {
background-color: rgba(251, 82, 31, 0.30) !important;
color: #FAF9F5 !important;
}
/* Content-warning / spoiler boxes */
.content-warning,
.status__content__spoiler-cw,
.status__wrapper--filtered,
.filtered-status {
background-color: #262624 !important;
border: 1px solid #4A4A45 !important;
border-radius: 8px !important;
color: #FAF9F5 !important;
}
.content-warning p,
.content-warning span,
.status__content__spoiler-cw p,
.status__content__spoiler-cw span {
color: #FAF9F5 !important;
}
/* "Show more" / expand action inside these boxes: bright orange, green hover. */
.content-warning .link-button,
.status__content__spoiler-cw .link-button,
.status__wrapper--filtered .link-button,
.filtered-status .link-button {
color: #FB521F !important;
}
.content-warning .link-button:hover,
.content-warning .link-button:focus,
.status__content__spoiler-cw .link-button:hover,
.status__content__spoiler-cw .link-button:focus,
.status__wrapper--filtered .link-button:hover,
.filtered-status .link-button:focus {
color: #45DA64 !important;
}
/* Quoted-post boxes (the "Quoted a post by @user" bar and the quote container)
also default to the brand-green soft fill — neutralize to the warm surface. */
.status__quote-author-button,
.status__quote,
.status__quoted,
.quoted-status,
.status__quote-author-button a {
background-color: #262624 !important;
border-color: #4A4A45 !important;
color: #FAF9F5 !important;
}
.status__quote-author-button,
.status__quote,
.status__quoted,
.quoted-status {
border: 1px solid #4A4A45 !important;
border-radius: 8px !important;
}
/* Admin sparklines & card hover */
.admin-wrapper .dashboard__item,
.admin-wrapper .sparkline,
.admin-wrapper a.sparkline {
background-color: #1A1916 !important;
border: 1px solid #4A4A45 !important;
border-radius: 8px !important;
color: #FAF9F5 !important;
}
/* Hover/focus: subtle warm lift + clay accent border, NOT a green flood. */
.admin-wrapper a.sparkline:hover,
.admin-wrapper a.sparkline:focus,
.admin-wrapper .dashboard__item:hover,
.admin-wrapper .dashboard__item:focus-within {
background-color: #262624 !important;
border-color: #C6613F !important;
}
/* Sparkline graph: clay line + faint clay area (beats the section-10 svg rule).
The area path carries fill-opacity; the line path carries fill:none. */
.admin-wrapper .sparkline__graph svg path[style*="fill-opacity"] {
fill: #87857C !important;
fill-opacity: 0.18 !important;
stroke: none !important;
}
.admin-wrapper .sparkline__graph svg path[style*="fill: none"],
.admin-wrapper .sparkline__graph svg path[style*="fill:none"] {
stroke: #45DA64 !important;
fill: none !important;
}
/* Keep the big total readable; leave the +/- change chips to their semantics. */
.admin-wrapper .sparkline__value__total {
color: #FAF9F5 !important;
}
/* DM thread & flash messages */
/* Private-mentions / conversations page: the tall vertical thread line renders
in brand green. Mute the brand border/thread tokens to gray within that
column, and force any direct-wrapper left border to the muted gray. */
html:has(meta[name="initialPath"][content="/conversations"]) .columns-area__panels__main {
--color-border-brand: #4A4A45 !important;
--color-border-brand-soft: #4A4A45 !important;
--color-thread-line: #4A4A45 !important;
}
html:has(meta[name="initialPath"][content="/conversations"]) .status__wrapper,
html:has(meta[name="initialPath"][content="/conversations"]) .status__wrapper-direct,
html:has(meta[name="initialPath"][content="/conversations"]) .conversation,
html:has(meta[name="initialPath"][content="/conversations"]) .item-list > article {
border-left-color: #4A4A45 !important;
border-inline-start-color: #4A4A45 !important;
}
/* Status thread connector line, wherever it appears, follows the gray token. */
.status__line,
.status__wrapper .status__line {
background-color: #4A4A45 !important;
border-color: #4A4A45 !important;
}
/* Save / flash messages: replace the flat brand-green fill with a warm neutral
surface and a subtle sage success accent (clay for errors). */
.flash-message,
.flash-message.notice,
.admin-wrapper .flash-message,
.admin-wrapper .flash-message.notice {
background-color: #1A1916 !important;
border: 1px solid #4A4A45 !important;
border-left: 4px solid #5FA56B !important; /* sage = success */
border-radius: 8px !important;
color: #FAF9F5 !important;
box-shadow: none !important;
}
.flash-message.notice strong,
.admin-wrapper .flash-message.notice strong {
color: #5FA56B !important;
}
/* Error/alert flashes: warm surface with a clay accent instead. */
.flash-message.alert,
.admin-wrapper .flash-message.alert {
background-color: #1A1916 !important;
border: 1px solid #4A4A45 !important;
border-left: 4px solid #C6613F !important; /* clay = error */
color: #FAF9F5 !important;
}
.flash-message.alert strong,
.admin-wrapper .flash-message.alert strong {
color: #C6613F !important;
}
/* Callout / info boxes */
.callout,
aside.callout,
.admin-wrapper .callout,
.admin-wrapper aside.callout {
background-color: #1A1916 !important;
border: 1px solid #4A4A45 !important;
border-left: 4px solid #C6613F !important;
border-radius: 8px !important;
color: #FAF9F5 !important;
box-shadow: none !important;
}
.callout .title,
.callout p,
.callout .body,
.admin-wrapper .callout .title,
.admin-wrapper .callout p {
color: #FAF9F5 !important;
}
.callout > .icon,
.callout > svg,
.admin-wrapper .callout > .icon,
.admin-wrapper .callout > svg {
color: #C6613F !important;
fill: currentColor !important;
stroke: currentColor !important;
}
.callout a,
.admin-wrapper .callout a {
color: #C6613F !important;
}
.callout a:hover,
.callout a:focus,
.admin-wrapper .callout a:hover,
.admin-wrapper .callout a:focus {
color: #D97757 !important;
}
/* Hide mascot illustrations */
.empty-column-indicator img,
.empty-column-indicator picture,
.empty-column-indicator > svg,
.empty-column-indicator__figure,
.regeneration-indicator__figure,
.regeneration-indicator img,
.regeneration-indicator picture,
.regeneration-indicator > svg {
display: none !important;
}
/* About page admin card */
.about .account,
.about .account__wrapper,
.about__meta .account,
.about__meta .account__wrapper,
.about__meta__column .account,
.about__meta__column .account__wrapper {
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
/* ============================================================
Fixes: live-feed banner, section tabs, empty-state mascot,
direct-mention notifications, callout icon
============================================================ */
/* Live-feeds info banner: green -> clay surface + bright orange border. */
.dismissable-banner {
background-color: rgba(198, 97, 63, 0.12) !important; /* soft clay */
border: 1px solid #FB521F !important; /* bright orange */
border-radius: 8px !important;
box-shadow: none !important;
color: #FAF9F5 !important;
}
.dismissable-banner__message {
color: #FAF9F5 !important;
}
.dismissable-banner .dismissable-banner__action .icon-button {
color: #C6613F !important;
}
/* Section-headline tabs (This server / Other servers / All):
collapse the doubled green underline into a single orange one and
drop the short centered marker. */
#mastodon .account__section-headline {
border-bottom-color: #4A4A45 !important; /* neutral divider, not green */
}
#mastodon .account__section-headline a,
#mastodon .account__section-headline a > div,
#mastodon .account__section-headline button,
#mastodon .account__section-headline [role="tab"] {
box-shadow: none !important;
border-bottom-color: transparent !important;
}
/* Kill the pseudo-element that draws the short centered line. */
#mastodon .account__section-headline a::before,
#mastodon .account__section-headline a::after,
#mastodon .account__section-headline a > div::before,
#mastodon .account__section-headline a > div::after,
#mastodon .account__section-headline [role="tab"]::before,
#mastodon .account__section-headline [role="tab"]::after {
content: none !important;
display: none !important;
background: none !important;
border: 0 !important;
}
/* Single clean orange underline on the active tab. */
#mastodon .account__section-headline a.active,
#mastodon .account__section-headline a[aria-current="page"],
#mastodon .account__section-headline [role="tab"][aria-selected="true"] {
box-shadow: inset 0 -3px 0 #FB521F !important;
}
/* Lighten the orange tab text on hover (underline stays put). */
#mastodon .account__section-headline a:hover,
#mastodon .account__section-headline a:focus,
#mastodon .account__section-headline a:hover *,
#mastodon .account__section-headline a:focus *,
#mastodon .account__section-headline [role="tab"]:hover,
#mastodon .account__section-headline [role="tab"]:focus,
#mastodon .account__section-headline [role="tab"]:hover *,
#mastodon .account__section-headline [role="tab"]:focus * {
color: #FF8A5C !important;
}
/* Collections empty state: hide the Mastodon elephant illustration. */
._comp_empty_state_empty_state__defaultImage,
._comp_empty_state_empty_state__wrapper svg._comp_empty_state_empty_state__defaultImage {
display: none !important;
}
/* Direct-mention notifications: green highlight -> soft clay tint,
and relabel "Private mention" -> "Direct Message (aka Private mention)". */
#mastodon .notification-ungrouped--direct {
background-color: transparent !important;
border: 1px solid #FB521F !important;
border-radius: 8px !important;
}
#mastodon .status__wrapper-direct {
background-color: transparent !important;
border: 0 !important;
}
#mastodon .notification-ungrouped--direct .notification-ungrouped__header > span {
font-size: 0 !important;
}
#mastodon .notification-ungrouped--direct .notification-ungrouped__header > span::after {
content: "Direct Message (aka Private mention)" !important;
color: inherit !important;
font-size: 15px !important;
}
/* Callout info icon (e.g. "There's a new profile editing experience"):
green circle -> soft clay. */
#mastodon .callout > .icon,
#mastodon .callout > svg,
.admin-wrapper .callout > .icon,
.admin-wrapper .callout > svg {
background-color: rgba(198, 97, 63, 0.20) !important;
border-radius: 50% !important;
color: #C6613F !important;
}
/* About page: hide the hero logo, title, tagline, and the
Administered by / Contact meta block (already shown on the logged-out
homepage). Leaves the "About" section at the top. */
.about__header,
.about__meta,
.about__meta__divider {
display: none !important;
}
.about__section {
margin-top: 0 !important;
}
/* About page collapsible sections (About / Server rules / ...):
title toggles are orange and lighten on hover; the title keeps its
bordered box, but the body cell drops its left/right/bottom borders. */
.about__section {
border: 0 !important;
background: transparent !important;
}
.about__section__title {
border: 1px solid #4A4A45 !important;
border-radius: 8px !important;
color: #FB521F !important;
}
.about__section__title .icon,
.about__section__title svg {
color: #FB521F !important;
fill: currentColor !important;
stroke: currentColor !important;
}
.about__section__title:hover,
.about__section__title:focus,
.about__section__title:hover .icon,
.about__section__title:focus .icon,
.about__section__title:hover svg,
.about__section__title:focus svg {
color: #FF8A5C !important;
}
.about__section__body {
border: 0 !important;
}
/* Trending hashtags + news/story titles: orange links that lighten to
orange on hover with no green underline (the line is a border/box-shadow,
not text-decoration, so strip all three in every state). */
#mastodon .trends__item__name a,
#mastodon .trends__item__name a:link,
#mastodon .trends__item__name a:visited,
#mastodon .trends__item__name a:hover,
#mastodon .trends__item__name a:focus,
#mastodon .trends__item__name a:active,
#mastodon .story__details__title,
#mastodon a.story__details__title,
#mastodon a.story__details__title:link,
#mastodon a.story__details__title:visited,
#mastodon a.story__details__title:hover,
#mastodon a.story__details__title:focus,
#mastodon a.story__details__title:active {
text-decoration: none !important;
text-decoration-line: none !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
#mastodon .trends__item__name a:hover,
#mastodon .trends__item__name a:focus,
#mastodon a.story__details__title:hover,
#mastodon a.story__details__title:focus {
color: #FF8A5C !important;
}