/*------------------------------------------------------------------------------
* DEFINE COLOR PALETTE
*
* Choose the CSS Variables that will be applied to recolor elements.
* The current format is to use hex codes, e.g. #00FF00.
*
* A future refactor to use rgb() instead may allow transparency mods
* via using these variables with rgba(). Hex codes currently do not
* work with rgba(), so no transparency mods are included except for
* those defined in absolute terms (i.e., non-variable colors).
*
* Foreground Colors:
* --bg: | Background for foreground elements.
* --text: | A color that stands out against bg.
* --textBold: | A color that stands out strongly against bg.
* --textMuted: | A color that stands out slightly against bg.
*
* Background Colors:
* --bgPage: | Background for non-foreground elements.
* --textPage: | A color that stands out against bgPage.
* --textPageBold: | A color that stands out strongly against bgPage.
* --textPageMuted: | A color that stands out slightly against bgPage.
*
* Highlights Colors:
* --bgHead: | Background for column headers.
* --textHead: | A color that stands out (strongly) against bgHead.
* --accent: | An accent color for links and buttons.
* --accentText: | A color that stands out (strongly) against accent.
*
* Palette advisories for choosing colors:
* - Consider using an off-white or off-black for text tones,
* but not necessary as long as there is sufficient contrast.
* - Bold colors are highly recommended to be strong colors,
* like pure white or pure black.
* - Muted colors can be off-grey or any mid-tone with slight contrast.
* - It might be best to base the background palette on a slightly
* darker or lighter version of the foreground palette, but
* this is no longer strictly necessary; you may use mixed palettes.
* It is now possible to use a dark bgPage and light bg, or vice-versa.
------------------------------------------------------------------------------*/
/* copy and paste the desired palette at the end of this section,
* or you can delete the ones you don't want, or comment them out.
*/
/* Highlight Media Without Alt Text */
/* https://gist.github.com/FiXato/3de505b04efefd49a1e3568b70545234 */
.media-gallery__item-thumbnail img:not([alt]),
.audio-player__canvas:not([title]),
.video-player video:not([title]),
.media-gallery__gifv video:not([title]) {
border: 5px solid #E49CB3;
box-sizing: border-box;
border-radius: 5px;
}
/** Hashtag Gradients **/
/* The basis for this code comes from @AgathaSorceress@eldritch.cafe
/* trans */
a.hashtag[href*="trans" i]:hover {
text-decoration: underline;
}
.hashtag[href*="trans" i] span {
background-clip: text;
background-image: linear-gradient(90deg, #e67bda, #FFF, #55a9e3);
color: transparent;
}
/* aggie */
a.hashtag[href*="agatha" i]:hover {
text-decoration: underline;
}
.hashtag[href*="agatha" i] span {
background-clip: text;
background-image: linear-gradient(90deg, #a887ea, #f7a8b8);
color: transparent;
}
a.hashtag[href*="aggie" i]:hover {
text-decoration: underline;
}
.hashtag[href*="aggie" i] span {
background-clip: text;
background-image: linear-gradient(90deg, #a887ea, #f7a8b8);
color: transparent;
}
/* bi */
a.hashtag[href*="bi" i]:hover {
text-decoration: underline;
}
.hashtag[href*="bi" i] span {
background-clip: text;
background-image: linear-gradient(90deg, #d70071, #9C4E97, #0035aa);
color: transparent;
}
/* enby */
a.hashtag[href*="enby" i]:hover {
text-decoration: underline;
}
.hashtag[href*="enby" i] span {
background-clip: text;
background-image: linear-gradient(90deg, #fbf539, #fcfbfc, #9D59D2, #2C2C2C);
color: transparent;
}
a.hashtag[href*="nonbinary" i]:hover {
text-decoration: underline;
}
.hashtag[href*="nonbinary" i] span {
background-clip: text;
background-image: linear-gradient(90deg, #bf539, #fcfbfc, #9D59D2, #2C2C2C);
color: transparent;
}
/* pan */
a.hashtag[href*="pan" i]:hover {
text-decoration: underline;
}
.hashtag[href*="pan" i] span {
background-clip: text;
background-image: linear-gradient(90deg, #FD208A, #FFD600, #22AFFE);
color: transparent;
}
/* ace */
a.hashtag[href*="ace" i]:hover {
text-decoration: underline;
}
.hashtag[href*="ace" i] span {
background-clip: text;
background-image: linear-gradient(90deg, #191717, #857E78, #FFFEFF, #7D2A7A);
color: transparent;
}
a.hashtag[href*="asexual" i]:hover {
text-decoration: underline;
}
.hashtag[href*="asexual" i] span {
background-clip: text;
background-image: linear-gradient(90deg, #191717, #857E78, #FFFEFF, #7D2A7A);
color: transparent;
}
/* aro */
a.hashtag[href*="aro" i]:hover {
text-decoration: underline;
}
.hashtag[href*="aro" i] span {
background-clip: text;
background-image: linear-gradient(90deg, #39A741, #A8D47A, #FCFCF9, #A9A9A9, #000000);
color: transparent;
}
/* gay */
a.hashtag[href*="gay" i]:hover {
text-decoration: underline;
}
.hashtag[href*="gay" i] span {
background-clip: text;
background-image: linear-gradient(90deg, #FF9C7D, #FED17C, #FEF67D, #A0FF7D, #80A5FB, #B17EFF, #FB7DFE);
color: transparent;
}
/* lesbian */
a.hashtag[href*="lesbian" i]:hover {
text-decoration: underline;
}
.hashtag[href*="lesbian" i] span {
background-clip: text;
background-image: linear-gradient(90deg, #D52D00, #FF9A56, #FFFFFF, #D05FA1, #A30262);
color: transparent;
}
/* Meow! */
.button.button.primary {
font-size: 0;
}
.button.button.primary::after {
content: 'meow';
font-size: 14px;
}
.simple_form .input.with_label .label_input > label {
color: #DFDEF1
}
/* Clean Slate:
* white columns on a light-grey page, with dark grey headers and blue accent.
*/
:root {
--bg: #fff;
--text: #123;
--textBold: #000;
--textMuted: #666;
--bgPage: #ddd;
--textPage: var(--text);
--textPageBold: var(--textBold);
--textPageMuted: var(--textMuted);
--bgHead: #333;
--textHead: #fff;
--accent: #09f;
--accentText: var(--textHead);
}
/* Droid/Flamingo:
* dark neutral-grey page, with either Android Green or Flamingo accent.
*/
:root {
--bg: #1b1923;
--text: #DFDEF1;
--textBold: #C3BAC6;
--textMuted: #988BA2;
--bgPage: #111217;
--textPage: var(--text);
--textPageBold: var(--textBold);
--textPageMuted: var(--textMuted);
--bgHead: #15121c;
--textHead: var(--text);
--accent: #C9CBFF;
--accentText: #332E41;
}
/*------------------------------------------------------------------------------
* FOREGROUND COLOR PALETTE =====================================================
------------------------------------------------------------------------------*/
/*----------------------
base background and text
----------------------*/
/* status columns */
.column > .scrollable,
.status,
.status__content,
.detailed-status,
.detailed-status__action-bar,
.focusable:focus .detailed-status,
.focusable:focus .detailed-status__action-bar,
.setting-text,
.setting-text:active,
.setting-text:focus,
.status-direct .status__content .status__content__spoiler-link,
.column-link,
.getting-started a.column-link,
.getting-started__trends .trends__item__current,
.account__header__content,
.account__header__bio .account__header__content,
.account--panel,
.account__header__bar,
.account__header__account-note textarea,
.follow_requests-unlocked_explanation,
.account-authorize,
.trends__header,
/* new conversations */
.conversation--unread,
.conversation__content__names,
/* search */
.search__input,
.search__input:focus,
.search-results .account,
.trends__item,
.trends__item__name a,
.trends__item__current,
/* compose form */
.reply-indicator__content,
/* in reply to */
.compose-form .spoiler-input__input,
/* cw */
.compose-form .autosuggest-textarea__textarea,
/* post */
.compose-form .compose-form__modifiers,
/* image uploads */
.compose-form .compose-form__buttons-wrapper,
/* buttons */
.compose-form .autosuggest-textarea__textarea::placeholder,
.compose-form .spoiler-input__input::placeholder,
/* settings page */
.simple_form textarea,
.simple_form textarea:active,
.simple_form textarea:focus,
.simple_form input[type=email],
.simple_form input[type=email]:active,
.simple_form input[type=email]:focus,
.simple_form input[type=number],
.simple_form input[type=number]:active,
.simple_form input[type=number]:focus,
.simple_form input[type=password],
.simple_form input[type=password]:active,
.simple_form input[type=password]:focus,
.simple_form input[type=text],
.simple_form input[type=text]:active,
.simple_form input[type=text]:focus,
.table td,
.table th,
.table.inline-table > tbody > tr:nth-child(odd) > td,
.table.inline-table > tbody > tr:nth-child(odd) > th,
.table > tbody > tr:nth-child(odd) > td,
.table > tbody > tr:nth-child(odd) > th,
.batch-table__row,
.batch-table__row:nth-child(2n),
.batch-table__row:hover,
.column-inline-form label,
.dashboard__counters > div > div,
.dashboard__counters > div > a,
.log-entry,
.log-entry__header,
/* modals */
.actions-modal,
.actions-modal .status,
.actions-modal ul li:not(:empty) a,
.status.light .display-name strong,
.status.light .status__content,
.boost-modal,
.confirmation-modal,
.dropdown-menu,
.dropdown-menu__item a,
.mute-modal,
.block-modal .setting-toggle__label,
.mute-modal .setting-toggle__label,
.report-modal,
.report-modal__statuses .status__content p,
.report-modal__comment .setting-toggle__label,
.list-editor,
.list-editor .drawer__inner,
.list-editor .drawer__inner.backdrop,
.account__moved-note,
.introduction__pager,
.introduction__text p,
.reactions-bar__item,
/* profile cards */
.card__bar,
.card > a:active .card__bar,
.card > a:focus .card__bar,
.card > a:hover .card__bar,
.directory__card__bar,
.directory__card__extra,
.accounts-table__count,
.directory__card__img,
/* public pages */
#new_user .lead,
.landing .hero-widget__footer,
.landing .simple_form .user_agreement .label_input > label,
.landing .hero-widget h4,
.hero-widget__counter,
.landing .hero-widget__counter span,
.directory__tag > a,
.directory__tag > div,
.activity-stream .entry,
.landing-page #mastodon-timeline,
.landing-page #mastodon-timeline p,
.landing-page__forms,
.landing-page__information,
.landing-page li,
.landing-page p,
.directory__tag h4 small,
.directory__tag h4 .fa,
.landing-page .features-list .features-list__row .text,
.landing-page .features-list .features-list__row .visual .fa,
.landing-page__short-description h1,
.landing-page .separator-or span,
.box-widget,
.contact-widget,
.landing-page__information.contact-widget,
.rich-formatting li,
.rich-formatting p,
.public-layout .public-account-bio .account__header__content,
.public-layout .public-account-bio .roles,
.public-layout .public-account-bio__extra,
.public-layout .public-account-bio,
.public-layout .public-account-header__bar::before,
.account__header__fields dt,
.account__header__fields dd,
.hero-widget__text,
.load-more,
.button.button-secondary,
.simple_form__overlay-area__overlay {
background: var(--bg);
color: var(--text)
}
/*--------------------
override for bold text
--------------------*/
/* primary elements */
.account__display-name strong,
.status__display-name strong,
.detailed-status__display-name strong,
.card__bar .display-name strong,
.directory__card__bar .display-name strong,
.account__header__tabs__name h1,
.account__header__extra__links a strong,
.account__action-bar__tab strong,
/* profile counters */
.conversation__content__names a,
.conversation--unread .conversation__content__relative-time,
/* settings page*/
.dashboard__counters__num,
.dashboard__counters__text,
.log-entry a,
.log-entry .username,
.log-entry .target,
/* public pages */
#new_user .lead strong,
.landing-page h3,
.landing-page h4,
.landing-page em,
.landing-page h5,
.landing-page h6,
.directory__tag h4,
.rich-formatting h3,
.rich-formatting h4,
.public-layout .public-account-header__tabs__tabs .counter .counter-number,
.account__header__fields dt {
color: var(--textBold)
}
/*---------------------
override for muted text
---------------------*/
/* secondary elements */
.display-name__account,
.account .account__display-name,
.card__bar .display-name span,
.directory__card__bar .display-name span,
.accounts-table__count small,
.account__header__tabs__name h1 small,
.account__header__extra__links a,
.account__header__account-note label,
.account__header__account-note textarea::placeholder,
.account__header__extra__links,
.detailed-status__meta,
.status__relative-time,
.status__action-bar__counter__label,
.status__prepend,
.status__prepend .status__display-name strong,
.account__moved-note__message,
.attachment-list.compact .fa,
.icon-button,
.icon-button.disabled,
.icon-button.active:hover,
.account__action-bar__tab > span,
.compose-form .icon-button.inverted,
.compose-form .text-icon-button,
.compose-form .compose-form__buttons-wrapper .character-counter__wrapper .character-counter,
.compose-form .autosuggest-textarea__textarea::placeholder,
.compose-form .spoiler-input__input::placeholder,
.upload-progress,
.search__icon .fa,
.search__icon .fa-times-circle,
.trends__item__name,
.search__input::placeholder,
.notification__message,
.muted .status__content,
.muted .status__content a,
.muted .status__content p,
.muted .status__display-name strong,
.attachment-list__list a,
a.table-action-link,
.table a.table-action-link,
button.table-action-link,
.status__wrapper--filtered,
.conversation__content__relative-time,
/* settings page */
.dashboard__counters__label,
.log-entry__timestamp,
/* public pages */
.landing-page__short-description h1 small,
.landing-page__short-description h1 small span,
.simple_form p.hint.subtle-hint,
.public-layout .public-account-bio .roles,
.public-layout .public-account-bio__extra,
.public-layout .public-account-header__tabs__tabs .counter,
.load-more,
.account__disclaimer {
color: var(--textMuted)
}
/* fix announcement reactions */
.reactions-bar__item__count {
color: inherit
}
/* fix for conversations font weight */
.conversation--unread .conversation__content__info {
font-weight: 400
}
/* fix for border colors */
.account--panel,
.account__header__bar,
.account__header__bio .account__header__fields,
.status,
.detailed-status__action-bar,
.public-layout .public-account-header__tabs__tabs .counter,
.account__header__fields,
.account__header__fields dl,
.account__header__bio .account__header__fields,
.account,
.directory__card__extra .account__header__content,
.account__section-headline,
.notification__filter-bar,
.actions-modal .dropdown-menu__separator,
.actions-modal .status {
border-color: var(--textMuted)
}
.account__header__account-note,
.announcements-list {
border-color: transparent
}
.account__section-headline a.active::after,
.account__section-headline button.active::after,
.notification__filter-bar a.active::after,
.notification__filter-bar button.active::after {
border-color: transparent transparent var(--bg)
}
/*------------------------------------------------------------------------------
* BACKGROUND COLOR PALETTE =====================================================
------------------------------------------------------------------------------*/
/*----------------------
base background and text
----------------------*/
/* background and drawer */
body.app-body,
.ui,
.drawer__tab,
.drawer__inner,
.drawer__inner.darker,
.drawer__inner__mastodon,
.tabs-bar,
.tabs-bar__wrapper,
.getting-started,
.search-results__section h5,
.account__section-headline,
.account__section-headline button,
.notification__filter-bar,
.notification__filter-bar button,
.timeline-hint,
.introduction,
.account__header__image,
.account__header__account-note textarea:focus,
.flex-spacer,
.getting-started,
.getting-started__wrapper,
/* DMs */
.status.status-direct,
.status.status-direct:not(.read),
.focusable:focus .status.status-direct,
.status-direct .status__content,
.notification-favourite .status.status-direct,
/* column preferences */
.column-settings__section,
.column-header__collapsible,
.column-header__collapsible-inner,
.column-header__button.active,
.setting-meta__label,
.setting-toggle__label,
.column-subheading,
.content-wrapper,
.media-spoiler,
.video-player__spoiler,
.video-player__spoiler.active:active,
.video-player__spoiler.active:focus,
.react-toggle-track,
.filter-form,
/* in reply to */
.reply-indicator,
.reply-indicator__display-name,
.reply-indicator__content,
.reply-indicator__cancel .icon-button.inverted,
.reply-indicator__content .status__content__spoiler-link,
/* cw show more */
.status__content .status__content__spoiler-link,
.compose__action-bar .icon-button,
/* settings page */
.admin-wrapper .sidebar-wrapper,
.admin-wrapper .sidebar-wrapper__inner,
.admin-wrapper .sidebar ul a,
.admin-wrapper .sidebar ul a.selected,
.admin-wrapper .sidebar ul ul a,
.admin-wrapper .content h2,
.admin-wrapper .content h6,
/* modals */
.boost-modal__action-bar,
.confirmation-modal__action-bar,
.mute-modal__action-bar,
.confirmation-modal__action-bar .confirmation-modal__cancel-button,
.confirmation-modal__action-bar .mute-modal__cancel-button,
.mute-modal__action-bar .confirmation-modal__cancel-button,
.mute-modal__action-bar .mute-modal__cancel-button,
.error-column,
.regeneration-indicator,
.empty-column-indicator,
.report-modal__comment .setting-text,
.introduction__text p code,
.list-editor .search__input,
.announcements__item,
/* opengraph previews */
.status-card__image,
.status-card__content,
.status-card__description,
.button:disabled,
/* public pages */
body.theme-default,
.button.button-alternative,
.button.button-alternative-2,
.landing-page__call-to-action,
.public-layout .header,
.public-layout .header .nav-link,
.public-layout .header .nav-button,
.nothing-here,
.brand__tagline,
.table-of-contents {
background: var(--bgPage);
color: var(--textPage)
}
/*--------------------
override for bold text
--------------------*/
/* strong elements */
.navigation-bar strong,
.status-card__title,
.status-direct .display-name strong,
.reply-indicator__display-name strong,
.admin-wrapper .content > p strong,
.simple_form strong,
.regeneration-indicator__label strong,
.account__section-headline a.active,
.account__section-headline button.active,
.notification__filter-bar a.active,
.notification__filter-bar button.active,
/* public pages */
.information-board__section,
.information-board__section span:last-child,
.endorsements-widget .display-name__html,
.endorsements-widget h4,
.pagination .page,
.pagination .gap,
.pagination .newer,
.pagination .older,
.pagination a {
color: var(--textPageBold)
}
/*---------------------
override for muted text
---------------------*/
.hicolor-privacy-icons .composer--options--dropdown--content--item .fa-unlock,
.hicolor-privacy-icons .status__visibility-icon.fa-unlock {
color: #B1E1A6;
}
.hicolor-privacy-icons .status__visibility-icon.fa-envelope {
color: #E38C8F;
}
.hicolor-privacy-icons .composer--options--dropdown--content--item .fa-globe,
.hicolor-privacy-icons .status__visibility-icon.fa-globe {
color: #A3B9EF;
}
.account__header__fields,
.account__header__bio .account__header__fields,
.account__header__bio .account__header__fields {
font-family: "Fira Code", monospace;
}
/* de-emphasized elements */
.navigation-bar,
.navigation-panel hr,
.getting-started,
.getting-started p,
.getting-started__footer p,
.column-subheading,
.account__section-headline a,
.status-direct .icon-button,
.status-direct .display-name,
.status-direct .status__relative-time,
.status-direct .status__action-bar__counter__label,
.status-direct.muted .status__content p,
.status-direct.muted .status__content a,
.status-direct.muted .display-name strong,
.notification-favourite .status.status-direct .icon-button.disabled,
.simple_form p.hint,
.simple_form span.hint,
.admin-wrapper .content .muted-hint,
.admin-wrapper .content > p,
.status-card__host,
.button:disabled,
.loading-indicator,
.list-editor .search__input::placeholder,
.list-editor .search__icon .fa,
.list-editor .search__icon .fa-times-circle,
/* settings page */
body .neutral-hint,
.admin-wrapper .content .neutral-hint,
/* public pages */
.endorsements-widget .display-name__account,
.public-layout .footer h4,
.public-layout .footer ul a,
.public-layout .footer ul li,
.public-layout .footer .grid .column-2 h4 a,
.public-layout .header .nav-button,
/* log in, sign up, forgot passwd */
.form-footer a,
.lighter .simple_form p.hint.subtle-hint {
color: var(--textPageMuted);
}
/* border color fix */
.status.status-direct:not(.read),
.table-of-contents li a {
border-color: var(--textPageMuted);
}
/*------------------------------------------------------------------------------
* HIGHLIGHTS COLOR PALETTE =====================================================
------------------------------------------------------------------------------*/
/* scrollbar fix */
html {
scrollbar-color: var(--bg) var(--bgPage)
}
::-webkit-scrollbar-thumb {
background: var(--bg)
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent)
}
::-webkit-scrollbar-track:hover {
background: rgba(0, 0, 0, 0.2)
}
/*------------------
headers and warnings
------------------*/
/* columns view */
.column-header,
.column-header__button,
.column-header__back-button,
.column-header__button:hover,
.column-header__back-button:hover,
.column-back-button,
.column-header > .column-header__back-button,
.column-header.active .column-header__icon,
.search-results__header,
.keyboard-shortcuts kbd,
.compose-form__warning,
.compose-form .compose-form__warning,
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track,
.column-link__badge,
.column-link--transparent.active,
/* settings pages */
.list-editor h4,
.admin-wrapper .content h4,
.admin-wrapper .sidebar ul ul a.selected,
.flash-message,
.flash-message.notice,
.column-inline-form,
.column-inline-form .icon-button,
.simple_form .warning,
.table-form .warning,
.pagination .current,
.account-role,
.batch-table__toolbar {
background: var(--bgHead);
color: var(--textHead)
}
/*--------------
accented buttons
--------------*/
/* primary buttons */
.directory__tag > a:hover,
.directory__tag > a:active,
.directory__tag > a:focus,
.button,
.button:active,
.button:focus,
.button:hover,
.icon-button.overlayed:hover,
.floating-action-button,
.simple_form button,
.simple_form button:active,
.simple_form button:focus,
.simple_form button:hover,
.simple_form .button,
.simple_form .button:active,
.simple_form .button:focus,
.simple_form .button:hover,
.simple_form .block-button,
.simple_form .block-button:active,
.simple_form .block-button:focus,
.simple_form .block-button:hover,
.button.button-alternative:hover,
.button.button-alternative-2:hover,
.column-link:hover,
.getting-started a.column-link:hover,
.column-header__button:hover,
.column-header__button.active:hover,
.column-header__back-button:hover,
.column-back-button:hover,
.drawer__header a:hover,
.react-toggle--checked .react-toggle-track,
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track,
.privacy-dropdown.active .privacy-dropdown__value.active,
.privacy-dropdown__option:hover,
.privacy-dropdown__option.active,
.privacy-dropdown__option.active:hover,
.admin-wrapper .sidebar ul a:hover,
.admin-wrapper .sidebar ul ul a.selected:hover,
.reply-indicator__content .status__content__spoiler-link:hover,
.status__content .status__content__spoiler-link:hover,
.load-more:hover,
.conversation__unread,
/* modals */
.confirmation-modal__action-bar .confirmation-modal__cancel-button:active,
.confirmation-modal__action-bar .confirmation-modal__cancel-button:focus,
.confirmation-modal__action-bar .confirmation-modal__cancel-button:hover,
.confirmation-modal__action-bar .mute-modal__cancel-button:active,
.confirmation-modal__action-bar .mute-modal__cancel-button:focus,
.confirmation-modal__action-bar .mute-modal__cancel-button:hover,
.dropdown-menu__item a:active,
.dropdown-menu__item a:focus,
.dropdown-menu__item a:hover,
.mute-modal__action-bar .confirmation-modal__cancel-button:active,
.mute-modal__action-bar .confirmation-modal__cancel-button:focus,
.mute-modal__action-bar .confirmation-modal__cancel-button:hover,
.mute-modal__action-bar .mute-modal__cancel-button:active,
.mute-modal__action-bar .mute-modal__cancel-button:focus,
.mute-modal__action-bar .mute-modal__cancel-button:hover,
.upload-progress__tracker,
.radio-button__input.checked,
/* public pages */
.public-layout .header .nav-button:hover,
.public-layout .header .brand:active,
.public-layout .header .brand:focus,
.public-layout .header .brand:hover,
.button.button-secondary:hover,
/* settings pages */
.pagination .page.current:hover,
.introduction__dot.active,
.dashboard__counters > div > a:hover,
.dashboard__counters > div > a:focus,
.dashboard__counters > div > a:active,
.dashboard__counters > div > a:hover .dashboard__counters__label,
.dashboard__counters > div > a:focus .dashboard__counters__label,
.dashboard__counters > div > a:active .dashboard__counters__label,
/* video player ui */
.video-player__seek__buffer,
.video-player__seek__progress,
.video-player__volume__current,
.video-player__volume__handle,
/* announcements */
.icon-with-badge__badge,
.announcements__item__unread,
.reactions-bar__item:hover {
background: var(--accent);
color: var(--accentText);
}
/*------------
accented links
------------*/
/* status links */
.status__content a,
.status__content a.unhandled-link,
.getting-started a,
.getting-started p a,
.getting-started__footer a,
.getting-started__footer p a,
.reply-indicator__content a,
.reply-indicator__content a.unhandled-link,
.reply-indicator__cancel .icon-button.inverted:hover,
.status__content__read-more-button,
.icon-button.active,
.icon-button:focus,
.icon-button:hover,
.search__icon .fa:hover,
.account__header__bio .account__header__fields a,
.notification-follow .account .icon-button:hover,
.notification__message .fa,
.notification__display-name:hover,
.admin-wrapper .content .muted-hint a,
.table a,
a.table-action-link:hover,
button.table-action-link:hover,
.media-spoiler:active,
.media-spoiler:focus,
.media-spoiler:hover,
.video-player__spoiler.active:hover,
.column-header__setting-btn:hover,
.column-inline-form .icon-button:hover,
.empty-column-indicator a,
.error-column a,
.timeline-hint a,
/* post options */
.compose-form .text-icon-button:hover,
.text-icon-button.active,
.drawer__inner .icon-button:hover,
.icon-button.inverted.active.disabled,
.navigation-bar__profile-edit:hover,
.navigation-bar__profile-account:hover,
.account__action-bar-dropdown .icon-button:hover,
.account__section-headline a:hover,
.compose-form .compose-form__warning a,
/* modals */
.list-editor .account .icon-button:hover,
.list-editor .account .icon-button:active,
.list-editor .account .icon-button:focus,
/* public pages */
.simple_form .input.boolean label a,
.landing-page__short-description p a,
.landing-page #mastodon-timeline p a,
.simple_form p.hint.subtle-hint a,
.contact-widget__mail a,
.public-layout .footer ul a:hover,
.public-layout .footer .grid .column-2 h4 a:hover,
.public-layout .public-account-bio .account__header__fields a,
.form-footer a:hover,
/* settings pages */
.pagination a:hover,
.pagination .newer:hover,
.pagination .older:hover,
.filters .filter-subset a.selected,
.simple_form .hint a,
/* mobile elements */
.tabs-bar__link.active {
color: var(--accent)
}
/* border fix */
.react-toggle--checked .react-toggle-thumb,
.radio-button__input.checked,
.icon-with-badge__badge,
.filters .filter-subset a.selected,
.introduction__dot,
.public-layout .public-account-header__tabs__tabs .counter.active::after,
.notification.unread::before,
.status__wrapper.unread::before {
border-color: var(--accent)
}
/* trends fix */
.trends__item__sparkline path:first-child {
fill: transparent !important
}
.trends__item__sparkline path:last-child {
stroke: var(--accent) !important
}
/* focus fix */
.focusable:focus {
background: transparent;
border: 2px solid var(--accent);
}
/*-----------------------
material design overrides
-----------------------*/
/* turn statuses into cards */
.drawer__inner darker {
filter: drop-shadow(0 0 2px var(--bg))
}
.status,
.conversation,
.account-authorize__wrapper,
.follow_requests-unlocked_explanation {
box-shadow: 0px 0px 2px #111217;
background: var(--bg);
margin: 8px;
border-radius: 10px;
border: 0
}
.compose-panel .search__input {
border-radius: 10px;
}
.column-header__wrapper,
.column-header,
.column-link,
.column,
.column > .scrollable {
border-radius: 10px;
}
.column-link {
margin: 5px;
}
.status__wrapper--filtered {
border: none
}
.detailed-status__wrapper {
margin: 8px;
}
/*might look weird in older versions pre-2.6?*/
/* recolors */
.column > .scrollable,
.landing-page #mastodon-timeline,
.activity-stream .entry {
background: none !important
}
.account-timeline__header,
.account,
.conversation {
background: var(--bg)
}
.notification .account,
.load-more {
background: var(--bgPage)
}
.status__prepend,
.notification__message,
.status__prepend .status__display-name strong,
.keyboard-shortcuts {
color: var(--textPage) !important
}
.notification-follow .display-name__html {
color: var(--textPageBold)
}
.notification-follow .display-name__account,
.notification-follow .account .icon-button,
.status__wrapper--filtered,
.load-more {
color: var(--textPageMuted)
}
/* borders */
.account__section-headline,
.notification__filter-bar,
.account--panel,
.account__header__bar,
.account__header__bio .account__header__fields,
.status,
.detailed-status__action-bar,
.account__header__fields dl,
.account__header__bio .account__header__fields,
.account,
.directory__card__extra .account__header__content,
.account__section-headline,
.notification__filter-bar,
.conversation,
.account__header__fields,
.account__header__account-note,
.public-layout .public-account-header__tabs__tabs .counter {
border-color: transparent
}
/* triangle tab indicator */
.account__section-headline a.active:after,
.account__section-headline a.active:before,
.community-timeline__section-headline a.active:after,
.community-timeline__section-headline a.active:before,
.public-timeline__section-headline a.active:after,
.public-timeline__section-headline a.active:before,
.notification__filter-bar button.active::before,
.notification__filter-bar button.active::after {
border-color: transparent transparent var(--bgHead)
}
.autosuggest-input label .autosuggest-textarea__textarea,
.compose-form__autosuggest-wrapper label .autosuggest-textarea__textarea,
.autosuggest-textarea__textarea {
background: var(--bg);
color: var(--textPage);
box-shadow: inset 0 3px 10px #090808;
}
.composer--options-wrapper {
background: var(--bg);
color: var(--textPage);
}
/* fix rounding on end toots in stream */
.activity-stream .entry:first-child .status,
.activity-stream .entry:last-child .status {
border-radius: 10px
}
/*------------------------------------------------------------------------------
* RECOLOR STATUS ACTIONS
*
* This tweak gets its own section because it's pretty messy and long.
*
* Replies, follows, faves, dropdown menu, and share can easily be themed,
* but I can't figure out how to make them look good against the palette.
* Manual color selection may be required, if these colors don't fit well.
*
* Recoloring boosts is another nightmare altogether, because of improper
* SVG embedding in the background-image rather than directly in HTML.
* This leads to two options:
*
* 1) attempt to use filter() to manually add sepia tones and hue-shift
* - complicated and imprecise adjustments of filter()
* - cannot use CSS variables in url()s (as in background-image)
* + however, it does preserve the SVG boosting animation
*
* 2) replace the background-image with a mask-image
* + less complicated; override background-image with color
* + can apply CSS variable colors from palette easily
* - requires extremely long rule to add mask-image
* - breaks boosting animation
*
* I have chosen option 2.
*
* EDIT: Option 1 is now better because of the new boost icons
* introduced in 3.2.0 -- there is no longer just one icon.
------------------------------------------------------------------------------*/
/* add shadow on hover and active states */
.status__action-bar .icon-button:hover,
.status__action-bar .icon-button:active,
.status__action-bar .icon-button.active,
.detailed-status__action-bar .icon-button:hover,
.detailed-status__action-bar .icon-button:active,
.detailed-status__action-bar .icon-button.active {
filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.6))
}
/* remove bg color on hover and active states*/
.icon-button:active,
.icon-button:focus,
.icon-button:hover {
background-color: transparent
}
/* replies and follows */
.status__action-bar-button.icon-button:nth-child(1):hover,
.status__action-bar-button.icon-button:nth-child(1):active,
.status__action-bar-button.icon-button:nth-child(1).active,
.status__action-bar-button.icon-button:nth-child(1):focus,
.detailed-status__action-bar .detailed-status__button:nth-child(1) .icon-button:hover,
.detailed-status__action-bar .detailed-status__button:nth-child(1) .icon-button:active,
.detailed-status__action-bar .detailed-status__button:nth-child(1) .icon-button.active,
.detailed-status__action-bar .detailed-status__button:nth-child(1) .icon-button:focus,
.notification__message .fa.fa-user-plus,
.account .icon-button:active,
.account .icon-button.active,
.account .icon-button:focus,
.account .icon-button:hover {
color: #A3B9EF;
}
/* favourites */
.status__action-bar-button.icon-button:nth-child(3):hover,
.status__action-bar-button.icon-button:nth-child(3):active,
.status__action-bar-button.icon-button:nth-child(3).active,
.status__action-bar-button.icon-button:nth-child(3):focus,
.detailed-status__action-bar .detailed-status__button:nth-child(3) .icon-button:hover,
.detailed-status__action-bar .detailed-status__button:nth-child(3) .icon-button:active,
.detailed-status__action-bar .detailed-status__button:nth-child(3) .icon-button.active,
.notification__favourite-icon-wrapper .star-icon {
color: #ECDDAA;
}
/* menu */
.status__action-bar-dropdown .icon-button:hover,
.status__action-bar-dropdown .icon-button:active,
.status__action-bar-dropdown .icon-button.active,
.status__action-bar-dropdown .icon-button.focus,
.detailed-status__action-bar-dropdown .icon-button:hover,
.detailed-status__action-bar-dropdown .icon-button:active,
.detailed-status__action-bar-dropdown .icon-button.active,
.detailed-status__action-bar-dropdown .icon-button:focus {
color: #F7BE95;
}
/* share */
.icon-button:hover .fa-share-alt {
color: #E5B4E2;
}
/* boosts */
.notification__message .fa.fa-retweet,
.icon-button:hover .fa-retweet {
color: #B1E1A6;
}
/* recolor boosts (preserve animation, unthemeable default state */
button.icon-button:hover i.fa-retweet,
.no-reduce-motion button.icon-button.active i.fa-retweet {
filter: sepia(100%) hue-rotate(110deg) saturate(700%) brightness(100%) drop-shadow(2px 3px 1px #6E6C7E)
}
/* fully recolor boosts (while breaking animation) */
/*
button.icon-button:hover i.fa-retweet,
button.icon-button.active i.fa-retweet
{background: #0d9 !important;}
.no-reduce-motion button.icon-button i.fa-retweet,
button.icon-button i.fa-retweet,
button.icon-button:hover i.fa-retweet,
button.icon-button.active i.fa-retweet
{
background: var(--textMuted);
mask: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
*/