/* =========================================================================
PrivacySafe Social — Mastodon Dark Theme
Cleaned and de-duplicated. Each concern is defined exactly once.
Palette:
- Charcoal neutrals (dark mode)
- Green #45DA64 : links, post-body links, success, hover state on buttons
- Orange #FB521F : primary action buttons, identity/header links, active nav
- Blue #6EC1E4 : footer utility links only
========================================================================= */
/* =========================================================================
1. 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: #EBEBEB !important;
--color-black: #000000 !important;
--color-grey-50: #F6F6F6 !important;
--color-grey-100: #EBEBEB !important;
--color-grey-200: #D6D6D6 !important;
--color-grey-300: #B8B8B8 !important;
--color-grey-400: #9A9A9A !important;
--color-grey-500: #7A7A7A !important;
--color-grey-600: #5A5A5A !important;
--color-grey-700: #424242 !important;
--color-grey-800: #3A3A3A !important;
--color-grey-900: #222222 !important;
--color-grey-950: #191919 !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: #EBEBEB !important;
--color-text-secondary: #B8B8B8 !important;
--color-text-tertiary: #9A9A9A !important;
--color-text-inverted: #191919 !important;
--color-text-brand: #45DA64 !important;
--color-text-brand-soft: #7CF293 !important;
--color-text-on-brand-base: #191919 !important;
--color-text-brand-on-inverted: #207333 !important;
--color-text-error: #FF9878 !important;
--color-text-on-error-base: #EBEBEB !important;
--color-text-warning: #FFC857 !important;
--color-text-on-warning-base: #191919 !important;
--color-text-success: #45DA64 !important;
--color-text-on-success-base: #191919 !important;
--color-text-disabled: #5A5A5A !important;
--color-text-on-disabled: #B8B8B8 !important;
--color-text-bookmark-highlight: #FB521F !important;
--color-text-favourite-highlight: #FFC857 !important;
--color-text-on-media: #EBEBEB !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: #191919 !important;
--color-bg-secondary: #222222 !important;
--color-bg-tertiary: #3A3A3A !important;
--color-bg-inverted: #F6F6F6 !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: #424242 !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: #5A5A5A !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: #5A5A5A !important;
--color-graph-disabled-fill: #424242 !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: #191919 !important;
--color-bg-75: #191919bf !important;
--color-bg-90: #191919e6 !important;
--color-fg: #EBEBEB !important;
--color-border: #5A5A5A !important;
--color-dim: #B8B8B8 !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: #EBEBEB !important;
--color-mud: rgba(58, 58, 58, 0.5) !important;
--color-arsenic: #3A3A3A !important;
--color-black-coral: #5A5A5A !important;
--color-dark: #191919 !important;
--color-thread-line: #5A5A5A !important;
--color-topaz: #EBEBEB !important;
--color-light-purple: #B8B8B8 !important;
--color-lighter-purple: #B8B8B8 !important;
--color-dark-electric-blue: #B8B8B8 !important;
--color-button-text: #EBEBEB !important;
--color-ghost-button-text: #EBEBEB !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: #5A5A5A !important;
}
/* =========================================================================
2. BASE SURFACES
Fallback coverage for compiled builds that ignore some tokens.
========================================================================= */
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: #191919 !important;
border-color: #5A5A5A !important;
color: #EBEBEB !important;
}
/* =========================================================================
3. GENERAL INPUTS (non-compose)
The compose box has its own rules in section 9.
========================================================================= */
input,
textarea,
select,
.search__input,
.spoiler-input__input,
.setting-text,
.input-copy {
background-color: #3A3A3A !important;
border-color: transparent !important;
color: #EBEBEB !important;
}
input:hover,
textarea:hover,
select:hover,
.search__input:hover,
.spoiler-input__input:hover {
background-color: #424242 !important;
}
input:focus,
textarea:focus,
select:focus,
.search__input:focus,
.spoiler-input__input:focus,
.setting-text:focus,
.input-copy:focus {
background-color: #3A3A3A !important;
border-color: #FB521F !important;
box-shadow: 0 0 0 2px rgba(251, 82, 31, 0.25) !important;
color: #EBEBEB !important;
outline-color: #FB521F !important;
}
input::placeholder,
textarea::placeholder,
.search__input::placeholder {
color: #B8B8B8 !important;
opacity: 1 !important;
}
/* =========================================================================
4. LINKS
Default + post-body links are green; identity/header links (section 8) orange.
========================================================================= */
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;
}
/* =========================================================================
5. BUTTONS
Real buttons only: orange pill, green on hover/focus.
Nav links, icon buttons, status-action buttons and dropdown items excluded
(handled in section 6).
========================================================================= */
.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: #EBEBEB !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: #191919 !important;
box-shadow: 0 0 0 3px rgba(69, 218, 100, 0.25) !important;
filter: none !important;
text-decoration: none !important;
}
/* =========================================================================
6. NAVIGATION, ICON BUTTONS, DROPDOWN ITEMS
Stay transparent; never become orange blocks. Excluded from pill styling.
========================================================================= */
.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: #EBEBEB !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;
}
/* =========================================================================
7. TABS
Default orange, green on hover/active/selected/current.
========================================================================= */
.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;
}
/* =========================================================================
8. STATUS / NOTIFICATION / SIDEBAR IDENTITY LINKS (orange)
Display names, account handles, relative-time, boost/notification headers,
and the signed-in account in the sidebar. Post-BODY links stay green (sec 4).
========================================================================= */
.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;
}
/* =========================================================================
9. COMPOSE BOX
Final resolved intent (this used to be defined ~4 contradictory times):
- Only .compose-form__highlightable carries the grey panel (#3A3A3A).
- The form shell, wrappers, toolbars and the textarea itself are transparent.
- Focus border on the highlightable / textarea is orange.
- Privacy/language pills are green outline on transparent.
- The Post button is the only orange block; green on hover.
========================================================================= */
/* 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: #3A3A3A !important;
color: #EBEBEB !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: #EBEBEB !important;
}
.compose-form textarea::placeholder,
.compose-form input::placeholder,
.compose-form .autosuggest-textarea__textarea::placeholder,
.compose-form .spoiler-input__input::placeholder {
color: #B8B8B8 !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: #EBEBEB !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: #191919 !important;
}
/* =========================================================================
10. ICONS
Let SVG icons follow text color so the brand recoloring applies.
========================================================================= */
.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;
}
/* =========================================================================
11. SEARCH (pill)
========================================================================= */
.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: #3A3A3A !important;
border-color: transparent !important;
color: #EBEBEB !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: #424242 !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: #3A3A3A !important;
border-color: #FB521F !important;
box-shadow: 0 0 0 2px rgba(251, 82, 31, 0.25) !important;
color: #EBEBEB !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: #B8B8B8 !important;
opacity: 1 !important;
}
.search__icon,
.search__icon .icon,
.search__icon-wrapper,
.search__icon-wrapper .icon,
.search svg:not(.logo):not(.logo--wordmark) {
color: #EBEBEB !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;
}
/* =========================================================================
12. LOGO REPLACEMENT
Define the PrivacySafe SVG once, hide Mastodon's logo, paint ours on the
visible wrapper containers only.
========================================================================= */
: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;
}
/* =========================================================================
13. FOOTER
Utility links blue; cleaned to "Mastodon: Shortcuts · Source · vX" (smaller).
========================================================================= */
._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: #6EC1E4 !important;
text-decoration-color: #6EC1E4 !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: #6EC1E4 !important;
text-decoration-color: #6EC1E4 !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: #EBEBEB !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: #EBEBEB !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: #EBEBEB !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: #6EC1E4 !important;
content: "Shortcuts" !important;
display: inline !important;
font-size: 12px !important;
text-decoration: underline !important;
text-decoration-color: #6EC1E4 !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: #6EC1E4 !important;
content: "Source" !important;
display: inline !important;
font-size: 12px !important;
text-decoration: underline !important;
text-decoration-color: #6EC1E4 !important;
margin-right: 0 !important;
}
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) ._ui_components_link_footer__version {
color: #EBEBEB !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: #EBEBEB !important;
content: " · " !important;
display: inline !important;
font-size: 12px !important;
}
/* =========================================================================
14. COMPOSE PANEL LAYOUT
Full-height column so the footer sits at the bottom, composer stays visible.
========================================================================= */
.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;
}
/* =========================================================================
15. DESKTOP: HIDE THE SIDEBAR "NEW POST" LINK ONLY
The link is a nested .column-link (href="/publish"), not a direct child of
.navigation-panel, so the old "> a" rule never matched. Match it as a
descendant and by its href. Scoping to .navigation-panel keeps the actual
composer (form.compose-form aria-label="New Post" in .compose-panel) safe.
Mobile (<=760px) is untouched by the media query, so the link stays there.
========================================================================= */
@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;
}
}
/* =========================================================================
16. MOBILE BOTTOM NAVIGATION (orange -> green)
========================================================================= */
@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;
}
}
/* =========================================================================
17. PRIVACY DROPDOWN LABELS (compose visibility menu)
Hide Mastodon's text, supply clearer wording.
========================================================================= */
.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: #EBEBEB !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: #EBEBEB !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: #EBEBEB !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: #EBEBEB !important;
content: "Specific People: Users @ Mentioned" !important;
font-weight: 400 !important;
padding-left: 6px !important;
}
/* =========================================================================
18. DIRECT MESSAGES (a.k.a. "Private mentions")
- "Direct Message (...)" wording on DM post headers
- Column title + nav item renamed
- Nav coloring: neutral default, green hover, orange when active
========================================================================= */
.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: #EBEBEB !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: #EBEBEB !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: #EBEBEB !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;
}
/* =========================================================================
19. PRIVATE MENTIONS WARNING BANNER
Targets Mastodon's real container (.follow_requests-unlocked_explanation).
========================================================================= */
.follow_requests-unlocked_explanation {
background-color: #222222 !important;
border: 1px solid #5A5A5A !important;
border-left: 4px solid #FB521F !important;
border-radius: 8px !important;
box-shadow: none !important;
color: #EBEBEB !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: #EBEBEB !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: #6EC1E4 !important;
display: inline !important;
font-size: 14px !important;
line-height: 1.45 !important;
text-decoration: underline !important;
text-decoration-color: #6EC1E4 !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;
}
/* =========================================================================
20. IDENTITY + SPARKLINE COLOR REFINEMENTS
These intentionally override the orange identity rules in section 8.
Each selector is prefixed with #mastodon (the app root id) so its ID-level
specificity wins over section 8's class-only selectors regardless of order.
========================================================================= */
/* --- 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: #E0A82E !important; /* mustard / goldenrod */
text-decoration-color: #E0A82E !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: #F0C24E !important; /* lighter mustard on hover */
text-decoration-color: #F0C24E !important;
}
/* --- Post timestamp + visibility icon = footer light blue (#6EC1E4) --- */
#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: #6EC1E4 !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: #8FD3F0 !important; /* slightly lighter blue on hover */
}
/* --- Trending sparkline: keep the green line, give the area a blue->green
gradient matching the logo "SOCIAL" wordmark (#157ee9 -> #3ecc78).
Mastodon renders these as an SVG area path/polyline plus a line path/polyline,
with the area filled via a . We recolor that gradient's stops:
blue at the top (near the line), green fading out toward the bottom. --- */
#mastodon .trends__item__sparkline path,
#mastodon .trends__item__sparkline polyline {
stroke: #45DA64 !important; /* green line on every stroked path */
}
#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: #157ee9 !important; /* logo blue, top */
stop-opacity: 0.75 !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: #3ecc78 !important; /* logo green, bottom */
stop-opacity: 0.22 !important;
}
/* =========================================================================
21. ADMIN / SETTINGS BACKEND PAGES (body.admin / .admin-wrapper)
These server-rendered pages share the theme but have their own chrome.
========================================================================= */
/* 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: #6EC1E4 !important;
fill: currentColor !important;
stroke: currentColor !important;
}
.admin-wrapper .sidebar nav a:hover,
.admin-wrapper .sidebar nav a:focus {
color: #8FD3F0 !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: #FFFFFF !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: #FFFFFF !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: #FFFFFF !important;
fill: currentColor !important;
stroke: currentColor !important;
}
22. LOGGED-OUT SIGN-IN BANNER (public right-column promo)
Hide the promotional copy and render the two auth links as themed pill
buttons: Create account = primary orange, Login = secondary outline.
========================================================================= */
/* 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: #EBEBEB !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: #191919 !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 #5A5A5A !important;
color: #EBEBEB !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;
}
/* =========================================================================
23. CENTER TIMELINE COLUMN
Remove the thin left/right divider borders around the main column and give
it a flat #121212 background. Applies on every page that uses the central
column (home, notifications, profiles, lists, etc.). The inner surfaces
(scrollable, statuses, headers, empty/loading states) are all painted so the
whole column reads as one solid #121212 rather than letting Mastodon's own
surface variables show through on certain pages.
========================================================================= */
.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: #121212 !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 #121212 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: #121212 !important;
}
/* =========================================================================
24. AUTOFILL FIELDS
Browsers paint autofilled inputs with their own yellow background, which
turns into an ugly olive on the dark theme. background-color is ignored on
autofilled fields, so override via an inset box-shadow filling the field
with the normal input grey, and force the text/caret colors.
========================================================================= */
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 #3A3A3A inset !important;
box-shadow: 0 0 0 1000px #3A3A3A inset !important;
-webkit-text-fill-color: #EBEBEB !important;
caret-color: #EBEBEB !important;
border-color: #5A5A5A !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;
}