Last active
March 22, 2021 02:40
-
-
Save mast-range/1893eb8a24f40f082b49df0f1fa3fc0c to your computer and use it in GitHub Desktop.
Mastodon theme: blacklead (low-contrast)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** ------------------------------------------------------ | |
| Mastodon theme: blacklead (low-contrast) | |
| by mast | |
| Mar 20, 2021 | |
| - toned down avatar and user information appearance | |
| - low contrast, low saturation, dark gray background | |
| Adapted from Frederikam's deep dark theme https://gist.github.com/Frederikam/b0ab4e67df01938ab7d7a589ca3987f1 based on Mastodon Flat | |
| -------------------------------------------------------**/ | |
| /*Frederikam's comment: | |
| Adapted from: https://userstyles.org/styles/153362/mfc-mastodon-flat-css | |
| /*------------------------------------------------------------------------------ | |
| * MISC TWEAKS | |
| * | |
| * Miscellaneous tweaks that are more like extensions of the theme, | |
| * rather than subsets or features. These could ostensibly be their | |
| * own user-styles, and are only bundled in here for convenience. | |
| * Or, they are not supported in all browsers. They may be removed | |
| * without significantly affecting or compromising the theme. | |
| * | |
| * They are at the top of the style sheet for easy editing. | |
| ------------------------------------------------------------------------------*/ | |
| /* custom font */ | |
| body, | |
| .landing-page #mastodon-timeline, | |
| .landing-page li, | |
| .landing-page p { | |
| font-family: sans-serif; | |
| } | |
| /* change line height */ | |
| p { | |
| line-height: 1.7; | |
| } | |
| /* visible focus indicator */ | |
| .focusable:focus { | |
| border: 0 solid var(--accent2) !important; | |
| } | |
| /* webkit scrollbars */ | |
| ::-webkit-scrollbar-track, | |
| ::-webkit-scrollbar-button { | |
| background: none !important; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--accent6) !important; | |
| } | |
| /* recolor scrollbars in firefox */ | |
| html { | |
| scrollbar-color: var(--accent4) var(--bg) !important; | |
| } | |
| /* tables */ | |
| .batch-table .nothing-here, | |
| .batch-table__toolbar, | |
| .batch-table__form.simple_form, | |
| .batch-table__row, | |
| .batch-table__row:hover, | |
| .batch-table__row:nth-child(2n), | |
| .batch-table__row:nth-child(2n):hover{ | |
| border: 0 !important; | |
| background-color: var(--bg); | |
| } | |
| .accounts-table .account__display-name strong, | |
| .filters .filter-subset a, | |
| .filters .filter-subset a.selected { | |
| color: var(--text); | |
| } | |
| .batch-table__row__content__extra{ | |
| color: var(--accent2); | |
| } | |
| .filters .filter-subset a.selected { | |
| color: var(--textBold); | |
| border-color: var(--text); | |
| } | |
| .accounts-table__count, | |
| .accounts-table__count small { | |
| color: var(--textBold); | |
| } | |
| /* account avatar */ | |
| .account__header__bar .avatar .account__avatar { | |
| border: none; | |
| /* width: 85%*/ | |
| } | |
| /*------------------------------------------------------------------------------ | |
| * 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. | |
| ------------------------------------------------------------------------------*/ | |
| :root { | |
| --bg: rgb(47, 47, 47); | |
| --text: #ffffff; | |
| --textBold: #fff; | |
| --textMuted: #a0a1a1; | |
| --bgPage: var(--bg); | |
| --textPage: var(--text); | |
| --textPageBold: var(--textBold); | |
| --textPageMuted: var(--textMuted); | |
| --bgHead: var(--bg); | |
| --textHead: var(--textBold); | |
| --accent: var(--bg); | |
| --accent2: #d1d1d1; | |
| --accent3: #868686; | |
| --accent4: #292929; | |
| --accent5: rgb(0, 0, 0); | |
| --accent6: #5f5f5f; | |
| --accentText: var(--textBold); | |
| border-radius: 0 !important; | |
| } | |
| /* search drawer */ | |
| .drawer__header, | |
| .search__input { | |
| background-color: var(--bg) !important; | |
| color: var(--text) !important; | |
| border: none | |
| } | |
| .search__input::placeholder { | |
| color: var(--accent6); | |
| } | |
| .search__icon .fa { | |
| color: var(--accent6); | |
| } | |
| /* "advanced search format" search popout*/ | |
| div.search-popout, | |
| div.search-popout span { | |
| border-radius: 0; | |
| background-color: var(--accent2); | |
| color: var(--accent6); | |
| } | |
| /* hide compose panel until hover // todo: make panel stay highlighted after click */ | |
| /* | |
| div.compose-form { | |
| filter: opacity(10%); | |
| } | |
| div.compose-form:hover, | |
| div.compose-form:active { | |
| filter: opacity(100%); | |
| transition: 0.5s | |
| } | |
| */ | |
| /* compose form theme */ | |
| .compose-form, | |
| .navigation-bar { | |
| padding-left: 0; | |
| padding-right: 5% | |
| } | |
| .compose-form .autosuggest-textarea__textarea, | |
| .compose-form .spoiler-input__input, | |
| .compose-form__uploads-wrapper, | |
| .compose-form__sensitive-button, | |
| .upload-progress { | |
| background-color: var(--bg); | |
| border-radius: 0; | |
| color: var(--text) !important; | |
| } | |
| .upload-progress { | |
| background-color: var(--accent2); | |
| } | |
| /* | |
| .compose-form .autosuggest-textarea__textarea:hover, | |
| .compose-form .spoiler-input__input:hover, | |
| .compose-form .autosuggest-textarea__textarea:active, | |
| .compose-form .spoiler-input__input:active | |
| .compose-form .autosuggest-textarea__textarea:focus | |
| {background-color: var(--accent2); | |
| transition:.75s} | |
| */ | |
| .autosuggest-textarea__textarea { | |
| color: var(--accent5) !important; | |
| border-radius: 0; | |
| } | |
| /* mention autosuggests */ | |
| .compose-form .autosuggest-textarea__suggestions__item.selected, .compose-form .autosuggest-textarea__suggestions__item:active, .compose-form .autosuggest-textarea__suggestions__item:focus, .compose-form .autosuggest-textarea__suggestions__item:hover{ | |
| color: var(--bg); | |
| background: var(--text); | |
| border-radius: 0; | |
| } | |
| .compose-form .autosuggest-textarea__suggestions { | |
| border-radius: 0 !important; | |
| background: var(--accent3); | |
| box-shadow: none; | |
| color: var(--accent4) !important | |
| } | |
| div.autosuggest-account .display-name, | |
| .compose-form .autosuggest-account .display-name__account{ | |
| color: var(--accent4) | |
| } | |
| /* compose form placeholders */ | |
| div.autosuggest-input ::placeholder, | |
| div.autosuggest-textarea ::placeholder { | |
| color: var(--accent6) !important | |
| } | |
| /**/ | |
| .compose-form__buttons-wrapper, | |
| .compose-form__publish-button-wrapper { | |
| background-color: var(--bg) !important; | |
| border-radius: 0 !important; | |
| border: none !important; | |
| filter: opacity(30%) | |
| } | |
| .compose-form__publish-button-wrapper:hover, | |
| .compose-form__publish-button-wrapper:active { | |
| filter: none; | |
| } | |
| /* emoji picker */ | |
| .emoji-button { | |
| filter: grayscale(100%) opacity(30%) | |
| } | |
| .emoji-button:hover { | |
| filter: opacity(50%) | |
| } | |
| .emoji-picker-dropdown__menu { | |
| border-radius: 0 !important; | |
| border-bottom: 0; | |
| border-top: 0 | |
| } | |
| .emoji-mart-bar { | |
| background-color: var(--accent6); | |
| border-radius: 0; | |
| border-bottom: 0; | |
| border-top: 0; | |
| } | |
| .emoji-mart-anchor-selected, | |
| .emoji-mart-anchor-selected:hover, | |
| .emoji-mart-anchor:hover{ | |
| color: var(--textBold) !important; | |
| transition: .3s | |
| } | |
| .emoji-mart-search input { | |
| background-color: var(--accent6); | |
| border-radius: 0 !important; | |
| border-bottom: 1px; | |
| border-top: 0; | |
| border-left: 0; | |
| border-right: 0; | |
| border-width: 2px; | |
| border-color: var(--textMuted); | |
| color: var(--text) | |
| } | |
| .emoji-mart-no-results{ | |
| color: var(--accent3) | |
| } | |
| div.emoji-mart-anchors, | |
| .emoji-mart-search, | |
| .emoji-mart-scroll, | |
| .emoji-mart-category, | |
| .emoji-mart-category-label, | |
| .emoji-mart-category-label span:hover, | |
| .emoji-picker-dropdown__menu{ | |
| background-color: var(--accent6) !important; | |
| color: var(--text) !important | |
| } | |
| .emoji-mart-category-label span { | |
| background: none !important; | |
| } | |
| .emoji-picker-dropdown__modifiers__menu { | |
| border-radius: 0; | |
| } | |
| .emoji-mart-emoji span { | |
| width: 22px; | |
| height: 22px; | |
| filter: grayscale(50%); | |
| } | |
| .emoji-mart-category .emoji-mart-emoji span { | |
| filter: grayscale(40%) !important | |
| } | |
| span.emoji-mart-anchor { | |
| color: var(--textMuted) | |
| } | |
| span.emoji-mart-anchor-bar { | |
| background-color: var(--textMuted); | |
| } | |
| .emoji-mart-category .emoji-mart-emoji:hover::before{ | |
| background-color: var(--text); | |
| } | |
| /* emoji appearance*/ | |
| .emojione { | |
| filter: grayscale(40%) | |
| } | |
| .status__content__spoiler-link { | |
| background-color: var(--bgHead) !important; | |
| } | |
| .status__content__spoiler-link:hover { | |
| background-color: var(--accent) !important; | |
| } | |
| .sidebar { | |
| background-color: var(--bg); | |
| } | |
| /* Remove profile borders */ | |
| .account__header__bio .account__header__fields { | |
| border-top: none; | |
| } | |
| .account__header__bar { | |
| border-bottom: none; | |
| } | |
| /* profile colors */ | |
| .account__header__tabs__name h1 small { | |
| color: var(--text)!important | |
| } | |
| .account__header__extra__links strong { | |
| color: var(--textBold) | |
| } | |
| .account__header__extra__links a { | |
| color: var(--textMuted)!important | |
| } | |
| .account__header__extra__links a strong { | |
| font-weight: 300 !important | |
| } | |
| .button.logo-button, | |
| .account__header__tabs__buttons .icon-button{ | |
| border-radius:0; | |
| background-color: var(--bg) !important; | |
| border:none; | |
| color: var(--textMuted) | |
| } | |
| .button.logo-button:hover{ | |
| background:none; | |
| } | |
| /*------------------------------------------------------------------------------ | |
| * FOREGROUND COLOR PALETTE ===================================================== | |
| *------------------------------------------------------------------------------/ | |
| /*---------------------- | |
| base background and text | |
| ----------------------*/ | |
| /* status columns */ | |
| .columns-area__panels__main { | |
| padding: 0 10px; | |
| max-width: 615px; | |
| } | |
| .column > .scrollable, | |
| .status, | |
| .status__content, | |
| .detailed-status { | |
| background-color: var(--bg) | |
| } | |
| .columns-area--mobile .status__prepend { | |
| margin-left: 85px; | |
| } | |
| .detailed-status__action-bar { | |
| background-color: var(--bg) | |
| } | |
| .focusable:focus .detailed-status, | |
| .focusable:focus .detailed-status__action-bar { | |
| background: none !important; | |
| } | |
| .setting-text, | |
| .setting-text:active, | |
| .setting-text:focus, | |
| /*.status-direct .status__content .status__content__spoiler-link,*/ | |
| .status-direct { | |
| background-color: var(--accent2); | |
| border-radius: 0; | |
| } | |
| .column-link, | |
| .getting-started a.column-link { | |
| color: var(--textMuted); | |
| background: none; | |
| } | |
| .status-direct .display-name strong { | |
| color: var(--textMuted)!important | |
| } | |
| /* search */ | |
| /*.search__input, | |
| .search__input:focus,*/ | |
| .search-results .account, | |
| .trends__item, | |
| .trends__item__name a, | |
| .trends__item__current, | |
| /* compose form */ | |
| .reply-indicator__content, | |
| .status__content { | |
| color: var(--text) | |
| } | |
| /* in reply to */ | |
| /* | |
| .compose-form .spoiler-input__input, | |
| .compose-form .autosuggest-textarea__textarea, | |
| .compose-form .compose-form__modifiers, | |
| .compose-form .compose-form__buttons-wrapper, */ | |
| /* settings page */ | |
| .simple_form .input.with_floating_label .label_input label{ | |
| color: var(--textBold) !important; | |
| } | |
| .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, | |
| .column-inline-form label { | |
| background-color: var(--accent4); | |
| border-radius: 0; | |
| border-color: var(--accent4); | |
| } | |
| .simple_form select { | |
| border-radius: 0; | |
| background-color: var(--accent4); | |
| border-color: var(--accent4); | |
| } | |
| .simple_form .hint a { | |
| color: var(--text); | |
| text-decoration: none; | |
| } | |
| /* content heading action buttons*/ | |
| div.content-heading-actions .button, | |
| .simple_form button { | |
| background-color: var(--accent4); | |
| } | |
| /* modals */ | |
| .actions-modal, | |
| .boost-modal, | |
| .confirmation-modal, | |
| .mute-modal, | |
| .report-modal, | |
| .report-modal__statuses .status__content, | |
| .report-modal__statuses .status__content p, | |
| .report-modal__comment .setting-toggle__label, | |
| .list-editor, | |
| .list-editor .drawer__inner.backdrop, | |
| .account__moved-note, | |
| .block-modal__action-bar, | |
| .boost-modal__action-bar, | |
| .confirmation-modal__action-bar, | |
| .mute-modal__action-bar, | |
| .actions-modal ul li:not(:empty) a, | |
| .actions-modal .dropdown-menu__separator { | |
| background-color: var(--bg); | |
| color: var(--accent3); | |
| border-bottom-color: var(--accent6); | |
| border-width: 2px; | |
| } | |
| .actions-modal ul li:not(:empty) a.active, | |
| .actions-modal ul li:not(:empty) a:hover { | |
| background-color: var(--accent4); | |
| } | |
| /* profile cards */ | |
| .card__bar, | |
| .card > a:active .card__bar, | |
| .card > a:focus .card__bar, | |
| .card > a:hover .card__bar, | |
| /* public pages */ | |
| .activity-stream .entry, | |
| .landing-page #mastodon-timeline, | |
| .landing-page #mastodon-timeline p, | |
| .landing-page__forms, | |
| .landing-page__information, | |
| .landing-page li, | |
| .landing-page p, | |
| .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, | |
| .contact-widget h4, | |
| .rich-formatting, | |
| .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-header__bar::before, | |
| .account__header__fields dt, | |
| .account__header__fields dd, | |
| .hero-widget__text, | |
| .load-more, | |
| .button.button-secondary { | |
| background: var(--bg); | |
| color: var(--text); | |
| border-radius: 0; | |
| border-color: var(--textMuted) | |
| } | |
| /* account public page */ | |
| .public-layout .public-account-header__image{ | |
| background-color: var(--accent5); | |
| border-radius: 0; | |
| } | |
| .placeholder-widget{ | |
| color: var(--textMuted) ; | |
| border-radius: 0; | |
| border-color: var(--textMuted) | |
| } | |
| a.mention.hashtag, .notice-widget a, .placeholder-widget a{ | |
| background-color: var(--bg); | |
| color: var(--accent2); | |
| padding: 0 2px; | |
| text-align: center; | |
| text-decoration: none!important; | |
| display: inline-block; | |
| border-style: solid; | |
| border-color: var(--textMuted); | |
| border-width: 0.5px; | |
| border-radius: 30%; | |
| border-top: none; | |
| border-left: none; | |
| border-right: none; | |
| } | |
| .account__section-headline a:hover,a.mention.hashtag:hover, .placeholder-widget a:hover{ | |
| color: var(--text); | |
| transition: .4s; | |
| text-decoration:none | |
| } | |
| a.detailed-status__application:hover{ | |
| color: var(--text); | |
| transition: .4s | |
| } | |
| .detailed-status__link:hover{ | |
| color: var(--text); | |
| transition: .4s | |
| } | |
| .detailed.status__visibility-icon .i.fa.fa-globe:hover{ | |
| color: var(--textMuted)!important | |
| } | |
| /* account note*/ | |
| .account__header__account-note label { | |
| color: var(--accent3) | |
| } | |
| .account__header__account-note, | |
| .account__header__account-note textarea { | |
| color: var(--text); | |
| border: none; | |
| } | |
| .account__header__account-note textarea, | |
| .account__header__account-note textarea:focus{ | |
| background-color: var(--accent4); | |
| border-radius: 0; | |
| } | |
| .account__header__account-note textarea::placeholder { | |
| color: var(--accent6); | |
| } | |
| .contact-widget a { | |
| color: var(--textMuted) | |
| } | |
| /* right navigation panel border */ | |
| .navigation-panel hr { | |
| border: 0 | |
| } | |
| /* make mastodon logos gray */ | |
| a.brand, | |
| .logo-container h1 a, | |
| div.landing__brand { | |
| filter: grayscale(100%) | |
| } | |
| /* directory tag (try a mobile app)*/ | |
| .directory__tag a { | |
| background-color: var(--bg); | |
| } | |
| .directory__tag h4 small { | |
| color: var(--textMuted) | |
| } | |
| .public-layout .header .nav-link { | |
| color: var(--textMuted) | |
| } | |
| /* hide contact widget */ | |
| div.contact-widget, | |
| ul.table-of-contents { | |
| filter: opacity(0) | |
| } | |
| /* public forms */ | |
| .landing .simple_form .user_agreement .label_input label, | |
| .landing .simple_form p.lead { | |
| color: var(--textMuted) | |
| } | |
| .simple_form .input.boolean label a { | |
| color: var(--text) | |
| } | |
| .simple_form .label_input__append { | |
| color: var(--accent3); | |
| } | |
| /* what is this? hide for now*/ | |
| div.input.url.optional.user_website, | |
| div.input.string.optional.user_confirm_password { | |
| filter: opacity(0); | |
| } | |
| /*-------------------- | |
| override for bold text | |
| --------------------*/ | |
| /* primary elements */ | |
| .account__display-name strong, | |
| .status__display-name strong, | |
| .detailed-status__display-name strong, | |
| .card__bar .display-name strong, | |
| .account__action-bar__tab strong, | |
| /* profile counters */ | |
| /* public pages */ | |
| .landing-page h3, | |
| .landing-page h4, | |
| .landing-page em, | |
| .landing-page h5, | |
| .landing-page h6, | |
| .rich-formatting h3, | |
| .rich-formatting h4, | |
| .public-layout .public-account-header__tabs__tabs .counter .counter-number, | |
| .account__header__fields dt { | |
| color: var(--textMuted); | |
| text-decoration: none; | |
| transition: .2s; | |
| } | |
| /*--------------------- | |
| override for muted text | |
| ---------------------*/ | |
| /* secondary elements */ | |
| .display-name__account, | |
| .account .account__display-name, | |
| .card__bar .display-name span, | |
| span.display-name, | |
| .detailed-status__meta, | |
| .status__relative-time, | |
| .status__action-bar__counter__label, | |
| .status__prepend, | |
| .status__prepend .status__display-name strong, | |
| .attachment-list.compact .fa, | |
| .icon-button, | |
| .icon-button.disabled, | |
| .icon-button.active:hover { | |
| color: var(--accent3); | |
| background: none; | |
| text-decoration: none !important; | |
| } | |
| .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, | |
| .upload-progress, | |
| .trends__item__name, | |
| .notification__message, | |
| .account__moved-note__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, | |
| /* 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(--accent3) | |
| } | |
| /*------------------------------------------------------------------------------ | |
| * BACKGROUND COLOR PALETTE ===================================================== | |
| *------------------------------------------------------------------------------/ | |
| /*---------------------- | |
| base background and text | |
| ----------------------*/ | |
| /* background and drawer */ | |
| .ui { | |
| background-color: var(--bg); | |
| } | |
| /*.drawer__tab,*/ | |
| .tabs-bar { | |
| background-color: var(--bg); | |
| } | |
| .search-results__section h5, | |
| .account__section-headline, | |
| .account__section-headline button, | |
| .notification__filter-bar, | |
| .notification__filter-bar button, | |
| /* DMs */ | |
| .status.status-direct, | |
| .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, | |
| .video-player__spoiler, | |
| .video-player__spoiler.active:active, | |
| .video-player__spoiler.active:focus, | |
| .react-toggle-track, | |
| /* 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 ul a, | |
| .admin-wrapper .sidebar ul ul a, | |
| .admin-wrapper .content h2, | |
| .admin-wrapper .content h6, | |
| .dashboard__counters div a { | |
| background-color: var(--bg)!important; | |
| color: var(--textMuted); | |
| border-radius: 0 | |
| } | |
| .dashboard__counters > div > div | |
| { | |
| background-color: var(--accent4)!important; | |
| border-radius: 0 | |
| } | |
| .dashboard__counters__num{ | |
| color: var(--text) | |
| } | |
| .dashboard__counters__label{ | |
| color: var(--accent2) | |
| } | |
| .announcements-list__item{ | |
| background-color: var(--accent4) | |
| } | |
| .admin-wrapper .sidebar ul a:hover, | |
| .admin-wrapper .sidebar ul ul a:hover, | |
| .admin-wrapper .sidebar ul a.selected, | |
| .admin-wrapper .sidebar ul ul a.selected { | |
| color: var(--text) | |
| } | |
| .admin-wrapper .sidebar ul a:hover, | |
| .admin-wrapper .sidebar ul ul a.selected:hover { | |
| color: var(--text)!important | |
| } | |
| .admin-wrapper .sidebar-wrapper__inner { | |
| background-color: var(--bg)!important; | |
| } | |
| .admin-wrapper .sidebar .logo { | |
| filter: grayscale(100%); | |
| } | |
| .flash-message a { | |
| color: var(--textMuted) | |
| } | |
| .flash-message a:hover { | |
| color: var(--text) | |
| } | |
| .simple_form .input.with_label .label_input > label, | |
| .simple_form .input.with_label.boolean .label_input > label, | |
| .simple_form .input.with_block_label > label, | |
| .simple_form .check_boxes .checkbox label, | |
| .simple_form .input.radio_buttons .radio label, | |
| .label_input, | |
| .input input{ | |
| color: var(--accent2) | |
| } | |
| /* 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, | |
| /* opengraph previews */ | |
| .status-card, | |
| /* muted poll*/ | |
| .muted .poll { | |
| border-radius: 0 !important; | |
| background: none; | |
| color: var(--textMuted); | |
| } | |
| /* modal select button */ | |
| .block-modal__container select, | |
| .confirmation-modal__container select, | |
| .mute-modal__container select, | |
| .report-modal__target select { | |
| background-color: var(--textMuted); | |
| border-color: var(--textMuted); | |
| border-radius: 0; | |
| } | |
| /* muted polls */ | |
| .muted .poll__chart { | |
| background-color: var(--accent3); | |
| } | |
| div.status-card__content { | |
| background-color: var(--accent4); | |
| border-radius: 0%!important; | |
| } | |
| a.status-card.compact { | |
| border-radius: 0; | |
| } | |
| div.status-card__image-image, | |
| .status-card__image-image{ | |
| border-radius: 0; | |
| background-color: var(--accent4); | |
| filter: grayscale(60%) opacity(80%) | |
| } | |
| .status-card__description, | |
| .status-card__image, | |
| .button:disabled { | |
| border-radius: 0; | |
| background-color: var(--accent4); | |
| color: var(--accent2) | |
| } | |
| .search__icon .fa, | |
| .search__icon .fa-times-circle { | |
| color: var(--accent6) | |
| } | |
| /* image spoiler icon*/ | |
| .spoiler-button, | |
| .spoiler-button--minified | |
| /* | |
| .icon-button.overlayed | |
| */{ | |
| background: none !important; | |
| border-radius: 0 !important; | |
| filter: drop-shadow(0 1px 3px var(--accent3)) | |
| } | |
| .spoiler-button__overlay__label{ | |
| background: var(--bg); | |
| border-radius:0; | |
| transition: .3s; | |
| } | |
| /* public pages */ | |
| body, | |
| body.admin, | |
| body.lighter, | |
| .button.button-alternative, | |
| .button.button-alternative-2, | |
| .landing-page__call-to-action, | |
| .public-layout .header .nav-button, | |
| .nothing-here { | |
| 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, | |
| /* 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 | |
| ---------------------*/ | |
| /* de-emphasized elements */ | |
| .navigation-bar, | |
| .getting-started, | |
| .getting-started 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, | |
| /* 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(--accent2) | |
| } | |
| .navigation-bar { | |
| filter: opacity(60%); | |
| } | |
| /*------------------------------------------------------------------------------ | |
| * HIGHLIGHTS COLOR PALETTE ===================================================== | |
| *------------------------------------------------------------------------------/ | |
| /*------------------ | |
| 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{ | |
| border: none; | |
| background: var(--bg)!important; | |
| color: var(--accent6)!important; | |
| text-decoration: none !important; | |
| } | |
| .column-header span:hover { | |
| border: none; | |
| background: var(--bg)!important; | |
| color: var(--textMuted)!important; | |
| text-decoration: none !important; | |
| } | |
| .search-results__header, | |
| .keyboard-shortcuts kbd, | |
| .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track, | |
| .report-modal__target, | |
| .media-modal__close.icon-button, | |
| .link-button, | |
| .link-button:disabled, | |
| .upload-progress__backdrop{ | |
| background: var(--bgHead); | |
| color: var(--textMuted); | |
| border-radius: 0%; | |
| border-top: none; | |
| border-left: none; | |
| border-right: none | |
| } | |
| .media-modal__close.icon-button:hover, | |
| .media-modal__close.icon-button:active, | |
| .link-button:hover{ | |
| color: var(--text) !important; | |
| text-decoration: none | |
| } | |
| /* 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, | |
| .account-role__bot, | |
| .simple_form .recommended{ | |
| background: var(--bgHead); | |
| color: var(--textHead); | |
| border-radius: 40%; | |
| border-top: none; | |
| border-left: none; | |
| border-right: none | |
| } | |
| div.compose-form__warning a, | |
| .compose-form .compose-form__warning a{ | |
| background: none !important; | |
| text-decoration: none !important; | |
| color: var(--accent6) !important | |
| } | |
| .compose-form__warning, | |
| .compose-form .compose-form__warning, | |
| div.compose-form__warning span:hover { | |
| background-color: var(--accent4); | |
| color: var(--textMuted); | |
| border-radius: 0; | |
| box-shadow: none | |
| } | |
| /*-------------- | |
| accented buttons | |
| --------------*/ | |
| /* primary buttons */ | |
| .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 { | |
| background-color: var(--accent4); | |
| border-radius: 0; | |
| transition: .2s | |
| } | |
| .button{ | |
| background: var(--accent4); | |
| color: var(--textMuted)!important; | |
| border-radius: 0; | |
| } | |
| .button:active, | |
| .button:focus, | |
| .button:hover, | |
| .floating-action-button, | |
| .button.button-alternative:hover, | |
| .button.button-alternative-2:hover, | |
| .button span:hover{ | |
| background: var(--accent4); | |
| color: var(--text)!important; | |
| border-radius: 0; | |
| transition: .4s; | |
| } | |
| .icon-button.overlayed:hover { | |
| background: none; | |
| color: var(--text)!important; | |
| border-radius: 0; | |
| transition: .4s; | |
| } | |
| .floating-action-button:hover{ | |
| background: var(--accent5) | |
| } | |
| .column-link:hover, | |
| .column-link:hover span, | |
| .column-link--transparent.active, | |
| .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, | |
| .character-counter, | |
| .upload-progress span, | |
| .report-modal__comment .setting-text-label{ | |
| background: none; | |
| color: var(--textMuted)!important; | |
| border-radius: 0; | |
| transition: .4s | |
| } | |
| .privacy-dropdown.active .privacy-dropdown__value.active, | |
| .privacy-dropdown__option:hover, | |
| .privacy-dropdown__option.active, | |
| .privacy-dropdown__option.active: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, | |
| /* 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, | |
| .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, | |
| .mute-modal .setting-toggle__label, | |
| /* public pages */ | |
| .public-layout .header .nav-button:hover, | |
| .button.button-secondary:hover, | |
| /* settings pages */ | |
| .pagination .page.current:hover | |
| { | |
| background: var(--accent); | |
| color: var(--textMuted); | |
| border-radius: 0; | |
| transition: none | |
| } | |
| /* media file focal point */ | |
| .focal-point canvas, .focal-point img, .focal-point video { | |
| background-color: var(--bg) !important | |
| } | |
| .report-modal__comment .setting-text__wrapper { | |
| background-color: var(--accent2); | |
| border-radius:0 | |
| } | |
| /* */ | |
| .status-card__actions > div | |
| {border-radius:0} | |
| /* polls */ | |
| .poll__chart.leading { | |
| background-color: var(--text); | |
| border-radius:0; | |
| } | |
| .poll__chart{ | |
| background-color: var(--accent3); | |
| border-radius:0; | |
| } | |
| .poll__footer span, | |
| button.poll__link { | |
| color: var(--textMuted); | |
| text-decoration: none !important; | |
| } | |
| /* poll inputs */ | |
| .poll__input.active{ | |
| border-color: var(--text); | |
| background: var(--text); | |
| } | |
| .poll__input:hover{ | |
| border-color: var(--text); | |
| } | |
| div.poll__footer .button span:hover{ | |
| background: none !important; | |
| } | |
| div.poll__footer .button.button-secondary{ | |
| background: var(--accent6)!important; | |
| } | |
| div.poll__footer .button.button-secondary:hover{ | |
| background: var(--accent3)!important; | |
| transition:.3s | |
| } | |
| /* video player ui */ | |
| .video-player__seek::before, | |
| .video-player__seek__buffer{ | |
| background: none !important; | |
| border-radius:0; | |
| } | |
| /* | |
| .video-player__seek__buffer{ | |
| background: var(--accent5) !important; | |
| border-radius:0; | |
| } | |
| */ | |
| .video-player__seek__progress, | |
| .video-player__volume__current, | |
| .video-player__volume__handle, | |
| .video-player__seek__handle{ | |
| background: var(--accent2) !important; | |
| color: transparent !important; | |
| border-radius: 0 !important; | |
| transition: .3s; | |
| } | |
| .video-player__seek{ | |
| border-radius: 0 !important; | |
| color: transparent | |
| } | |
| .video-player__volume::before{ | |
| background: var(--accent4) !important; | |
| border-radius:0; | |
| } | |
| .video-player__buttons-bar:hover .player-button/*, | |
| .video-player.inline:hover .video-player__buttons-bar, | |
| .video-player.inline:hover .video-player__controls*/{ | |
| color: var(--accent2); | |
| transition: .3s | |
| } | |
| .video-player__time span{ | |
| color: var(--accent2) | |
| } | |
| /* player handles */ | |
| .video-player__volume__handle, | |
| .video-player__seek__handle{ | |
| height:0; | |
| width:12px | |
| } | |
| /* picture-in-picture / floating media player */ | |
| div.picture-in-picture, | |
| .picture-in-picture__footer, | |
| .picture-in-picture__header, | |
| canvas.audio-player__canvas, | |
| .audio-player, | |
| .video-player__buttons-bar, | |
| div.video-player__controls.active, | |
| .video-player__controls | |
| { | |
| border-radius: 0; | |
| background: none !important; | |
| border: none | |
| } | |
| .video-player__buttons .player-button{ | |
| color: var(--bg); | |
| /* filter: drop-shadow(2px 1px 1.5px var(--text)) */ | |
| } | |
| .video-player__buttons .player-button:active, .video-player__buttons .player-button:focus, .video-player__buttons .player-button:hover{ | |
| transition: .2s; | |
| color: var(--bg); | |
| filter: drop-shadow(.4px 0 3px var(--text)) | |
| } | |
| .picture-in-picture__header .display-name span, .picture-in-picture__header .display-name strong | |
| {color: var(--accent3)} | |
| .picture-in-picture-placeholder:active, .picture-in-picture-placeholder:focus, .picture-in-picture-placeholder:hover | |
| {border-color: var(--bg)} | |
| .picture-in-picture-placeholder | |
| { | |
| border-color: var(--accent3); | |
| border-style: dashed; | |
| border-radius:0; | |
| background-color: var(--accent4); | |
| transition: .2s | |
| } | |
| i.fa.fa-window-restore, | |
| .picture-in-picture-placeholder span | |
| {color: var(--accent3)} | |
| /*------------ | |
| accented links | |
| ------------*/ | |
| /* status links */ | |
| .status__content a { | |
| text-decoration: none !important; | |
| color: var(--textMuted); | |
| } | |
| .status__content a:not(.mention){ | |
| text-decoration: none !important; | |
| color: var(--textMuted)!important; | |
| } | |
| .status__content a:not(.mention):hover { | |
| color: var(--text); | |
| transition:.3s | |
| } | |
| .getting-started a, | |
| .getting-started p a, | |
| .reply-indicator__content a, | |
| .reply-indicator__content a:not(.mention), | |
| .reply-indicator__cancel .icon-button.inverted:hover, | |
| .status__content__read-more-button, | |
| .search__icon .fa:hover, | |
| .notification-follow .account .icon-button:hover, | |
| .notification__message .fa, | |
| .notification__display-name:hover, | |
| .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 { | |
| color: var(--textMuted); | |
| text-decoration: none !important; | |
| } | |
| .admin-wrapper .content .muted-hint a{ | |
| color: var(--text)!important; | |
| } | |
| /* */ | |
| .icon-button.active, | |
| .icon-button:hover { | |
| color: var(--text)!important | |
| } | |
| .icon-button:focus{ | |
| color: var(--accent3) | |
| } | |
| /* read more button */ | |
| .status__content__read-more-button { | |
| color: var(--textMuted) | |
| } | |
| /* hashtag */ | |
| /* Adapted from: | |
| hashtag style by @[email protected] and @[email protected]*/ | |
| .mention.hashtag.status-link{ | |
| background-color: var(--bg); | |
| color: var(--accent2); | |
| padding: 0 2px; | |
| text-align: center; | |
| text-decoration: none!important; | |
| display: inline-block; | |
| border-style: solid; | |
| border-color: var(--textMuted); | |
| border-width: 0.5px; | |
| border-radius: 30%; | |
| border-top: none; | |
| border-left: none; | |
| border-right: none; | |
| } | |
| .reply-indicator__content a.unhandled-link, .status__content a.unhandled-link { | |
| color: var(--accent3) | |
| } | |
| .mention.hashtag.status-link span:hover, | |
| a.mention.hashtag.status-link:hover{ | |
| color: var(--textBold); | |
| text-decoration: none!important; | |
| } | |
| .mention.hashtag.status-link span { | |
| text-decoration: none!important; | |
| } | |
| /* link hover */ | |
| span:hover { | |
| color: var(--textBold); | |
| text-decoration: none !important; | |
| transition: .3s | |
| } | |
| span { | |
| text-decoration: none !important; | |
| } | |
| /* status display name hover */ | |
| .status__display-name strong:hover { | |
| color: var(--textBold); | |
| text-decoration: none; | |
| transition: .3s | |
| } | |
| .display-name__account:hover { | |
| color: var(--accent3); | |
| text-decoration: none; | |
| } | |
| .status__info .status__display-name:hover { | |
| color: var(--textBold); | |
| text-decoration: none; | |
| } | |
| .detailed-status__display-name strong:hover { | |
| color: var(--textBold); | |
| text-decoration: none; | |
| } | |
| .strong.display-name__html:hover { | |
| text-decoration: none !important; | |
| color: var(--text) | |
| } | |
| /* status date and time hover */ | |
| time:hover { | |
| color: var(--textBold); | |
| text-decoration: none; | |
| transition: .3s | |
| } | |
| .detailed-status__datetime:hover, | |
| .detailed-status__datetime:hover span, | |
| .status__relative-time:hover { | |
| color: var(--textBold); | |
| text-decoration: none !important; | |
| transition: .2s | |
| } | |
| /* animated number */ | |
| /*.animated-number:hover span { | |
| color: var(--accent3)!important; | |
| } | |
| */ | |
| /* read-more button hover */ | |
| .status__content__read-more-button { | |
| text-decoration: none !important; | |
| } | |
| /* post options */ | |
| .compose-form .text-icon-button:hover { | |
| background: none; | |
| } | |
| .compose-form__sensitive-button .checkbox, | |
| .compose-form__sensitive-button span, | |
| .compose-form__sensitive-button span:hover{ | |
| border-radius:0; | |
| border-color: var(--accent3); | |
| color: var(--accent4) | |
| } | |
| .compose-form__sensitive-button .checkbox.active{ | |
| border-color: var(--accent4); | |
| background-color: var(--accent4) | |
| } | |
| .text-icon-button.active { | |
| color: var(--text) | |
| } | |
| .drawer__inner .icon-button:hover, | |
| .icon-button.inverted.active.disabled, | |
| .account__action-bar-dropdown .icon-button:hover, | |
| /* | |
| .compose-form .compose-form__warning a, | |
| */ | |
| .compose-panel .compose-form__autosuggest-wrapper { | |
| background-color: var(--accent2); | |
| } | |
| /* privacy dropdown */ | |
| .privacy-dropdown__dropdown { | |
| border-radius: 0; | |
| background-color: var(--accent2); | |
| box-shadow: 0 0 0 | |
| } | |
| .privacy-dropdown__option.active .privacy-dropdown__option__content { | |
| background: none; | |
| color: var(--accent2); | |
| transition: none!important | |
| } | |
| .privacy-dropdown__option:hover .privacy-dropdown__option__content { | |
| background: none; | |
| color: var(--accent2); | |
| transition: none!important | |
| } | |
| .privacy-dropdown__option { | |
| background-color: var(--accent3); | |
| color: var(--bg); | |
| transition: none | |
| } | |
| .privacy-dropdown__option__content { | |
| color: var(--bg) | |
| } | |
| /* privacy dropdown button */ | |
| .privacy-dropdown.active .privacy-dropdown__value { | |
| background-color: var(--accent3); | |
| border-radius: 0; | |
| box-shadow: none; | |
| } | |
| /* cw button hover */ | |
| .text-icon-button:hover, | |
| .text-icon-button { | |
| border-radius: 0; | |
| background: none | |
| } | |
| .compose-form .text-icon-button:hover { | |
| color: var(--text) | |
| } | |
| /* compose form buttons hover */ | |
| .compose-form .icon-button:hover{ | |
| color: var(--text); | |
| background: none; | |
| } | |
| .compose-form .icon-button:focus{ | |
| background: none | |
| } | |
| /* polls */ | |
| .compose-form__poll-wrapper, | |
| .compose-form__poll-wrapper .poll__footer { | |
| border-color: var(--bg); | |
| } | |
| .poll__footer { | |
| color: var(--accent3); | |
| } | |
| .compose-form .compose-form__modifiers, | |
| .compose-form__upload-thumbnail, | |
| .focal-point__preview div{ | |
| color: var(--accent3); | |
| background-color: var(--bg); | |
| border-radius:0 !important; | |
| } | |
| /* compose poll */ | |
| .poll__input { | |
| border-color: var(--text); | |
| border-width: 2px | |
| } | |
| .poll__input.checkbox { | |
| border-radius: 0; | |
| } | |
| .poll__option input[type="text"] { | |
| color: var(--bg); | |
| border: none; | |
| border-radius: 0; | |
| background-color: #eee; | |
| border-color: #eee; | |
| border-width: 2px; | |
| } | |
| .poll__option input[type="text"]:focus { | |
| background-color: var(--textBold); | |
| border: none; | |
| } | |
| /* new option button */ | |
| .button.button-secondary { | |
| background-color: var(--accent3)!important; | |
| border-radius: 0; | |
| color: var(--text) !important | |
| } | |
| .poll__footer span { | |
| color: var(--text); | |
| } | |
| /* poll period dropdown */ | |
| .compose-form__poll-wrapper select { | |
| color: var(--accent3); | |
| border-radius: 0; | |
| border: none; | |
| background-color: #eee; | |
| padding: 5px 30px 6px 10px; | |
| } | |
| /* inverted (selected) composer buttons */ | |
| .icon-button.inverted.active { | |
| color: var(--text); | |
| } | |
| /* modals */ | |
| div.modal-root__modal.list-editor | |
| { | |
| border-radius: 0 !important; | |
| } | |
| div.modal-root__modal.list-editor, | |
| .list-editor .account .icon-button:hover, | |
| .list-editor .account .icon-button:active, | |
| .list-editor .account .icon-button:focus, | |
| .report-modal__statuses .status__content a, | |
| .media-modal__close.icon-button:hover, | |
| .media-modal__close.icon-button:focus, | |
| /* public pages */ | |
| .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, | |
| /* mobile elements */ | |
| a.tabs-bar__link.active, | |
| a.tabs-bar__link:hover { | |
| background: var(--bg); | |
| text-decoration: none; | |
| color: var(--accent2); | |
| border-color: var(--accent6); | |
| border-radius: 30%; | |
| border-width: 1px; | |
| transition: .3s | |
| } | |
| .tabs-bar__link span:hover, | |
| .tabs-bar__link span:active { | |
| background: var(--bg); | |
| color: var(--accent2); | |
| transition: .2s; | |
| } | |
| .tabs-bar__link { | |
| border-width: 2px; | |
| border-color: var(--bg); | |
| border-radius: 30%; | |
| background: none; | |
| transition: .3s | |
| } | |
| a.tabs-bar__link { | |
| color: var(--accent6); | |
| } | |
| .column-link { | |
| background: none; | |
| color: var(--accent6)!important | |
| } | |
| .column-link:hover, | |
| .column-link:active{ | |
| transition: .3s; | |
| color: var(--accent3); | |
| background: none; | |
| } | |
| div.item-list .column-link{ | |
| background: none; | |
| color: var(--accent2)!important | |
| } | |
| div.item-list:active .column-link, | |
| div.item-list:hover .column-link { | |
| background: none; | |
| color: var(--text)!important; | |
| transition: .5s | |
| } | |
| .admin-wrapper .sidebar__toggle__logo { | |
| filter: grayscale(100%); | |
| } | |
| .admin-wrapper .sidebar__toggle { | |
| background-color: var(--bg); | |
| color: var(--accent3) | |
| } | |
| .admin-wrapper .sidebar__toggle__icon { | |
| color: var(--accent3) | |
| } | |
| .admin-wrapper .sidebar__toggle__icon:hover { | |
| background: none; | |
| color: var(--accent2) | |
| } | |
| /* center top bar */ | |
| .tabs-bar__wrapper { | |
| background-color: var(--bg); | |
| color: var(--bg) | |
| } | |
| .column-header__wrapper.active { | |
| box-shadow: var(--textBold); | |
| border: none!important | |
| } | |
| .column-header button { | |
| color: var(--accent3)!important | |
| } | |
| .tabs-bar__link.active { | |
| border-color: var(--accent3) !important; | |
| border-right: none; | |
| border-left: none | |
| } | |
| .tabs-bar { | |
| background-color: var(--bg)!important; | |
| border-bottom-color: var(--accent3); | |
| } | |
| /* notification */ | |
| .icon-with-badge__badge { | |
| background-color: var(--bg); | |
| border-radius: 50%; | |
| border-color: var(--bg); | |
| border-width: 0 | |
| } | |
| .conversation__unread { | |
| background-color: var(--accent2); | |
| } | |
| .conversation { | |
| border-color: var(--accent6); | |
| border-radius: 30%; | |
| } | |
| /* .notification__display-name, */ | |
| .notification__display-name:hover { | |
| color: var(--text); | |
| text-decoration: none !important; | |
| transition: .3s | |
| } | |
| .notification__message span{ | |
| color: var(--textMuted); | |
| } | |
| /*------------------------------------------------------------------------------ | |
| * FIXES | |
| * | |
| * Due to the extensive level of recolors, some elements will need slight fixes. | |
| * This section contains any overrides that are mostly necessary to beautify or | |
| * otherwise make elements look like they belong in the new palette. | |
| *------------------------------------------------------------------------------/ | |
| @media screen and (max-width: 600px) { | |
| .public-layout .public-account-header__bar | |
| {background: var(--bg)} | |
| .public-layout .public-account-header__tabs__name h1, | |
| .public-layout .public-account-header__extra__links a strong | |
| {color: var(--textBold)} | |
| .public-layout .public-account-header__extra__links a, | |
| .public-layout .public-account-header__tabs__name h1 small | |
| {color: var(--textMuted)} | |
| } | |
| @media screen and (max-width: 415px) { | |
| .public-layout .card-grid>div .card__bar | |
| {background: var(--bg)} | |
| .public-layout .card-grid>div .card__bar:active, | |
| .public-layout .card-grid>div .card__bar:focus, | |
| .public-layout .card-grid>div .card__bar:hover | |
| {background: var(--bgPage)} | |
| } | |
| /* transparent drawer / gs columns */ | |
| .getting-started, | |
| .getting-started__wrapper, | |
| /*.drawer__header,*/ | |
| .flex-spacer, | |
| .focusable:focus, | |
| .drawer__inner.darker { | |
| background: none !important | |
| } | |
| /* service footer */ | |
| .getting-started__footer { | |
| filter: opacity(10%) | |
| } | |
| .getting-started__footer:hover { | |
| filter: opacity(70%); | |
| transition: .7s; | |
| } | |
| .getting-started__footer a, | |
| .getting-started__footer p, | |
| .getting-started__footer p a { | |
| color: var(--textMuted) !important; | |
| } | |
| /*navigation dropdown menu */ | |
| .dropdown-menu__arrow.bottom { | |
| border-bottom-color: var(--accent2)!important | |
| } | |
| .dropdown-menu { | |
| background-color: var(--accent2)!important; | |
| border-radius: 0!important | |
| } | |
| .dropdown-menu__item a { | |
| background: var(--accent2) !important; | |
| color: var(--accent4) | |
| } | |
| .dropdown-menu__item a:hover { | |
| background-color: var(--textBold) !important; | |
| color: var(--accent4) | |
| } | |
| .navigation-bar, | |
| .navigation-bar__actions, | |
| .compose__action-bar.icon-button:focus { | |
| opacity: .6 !important | |
| } | |
| /* column header */ | |
| .column-header button { | |
| color: var(--acc) !important | |
| } | |
| /* gallery borders*/ | |
| .media-gallery, | |
| .media-gallery__item { | |
| border-radius: 0 !important; | |
| } | |
| .account-gallery__item { | |
| border-radius: 0 !important | |
| } | |
| /* make search results look better*/ | |
| .search__icon .fa.active { | |
| opacity: 0.5 | |
| } | |
| .drawer__inner { | |
| height: auto; | |
| } | |
| /* triangle tab popout (from toots/replies/media) */ | |
| .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 { | |
| border-color: transparent transparent var(--bg); | |
| border-radius: 0; | |
| } | |
| /* color trending taglines with accent color */ | |
| .trends__item__sparkline path { | |
| stroke: var(--accent) !important | |
| } | |
| /* hover feedback for buttons */ | |
| .button:hover, | |
| .block-button:hover, | |
| .simple_form button:hover, | |
| .compose-form__publish button:hover { | |
| color: var(--textBold) | |
| } | |
| /* fixes for 70ch maxwidths */ | |
| .landing-page__footer p { | |
| margin: 0 auto | |
| } | |
| /* remove black artefacts from settings menu */ | |
| .admin-wrapper .sidebar ul, | |
| .admin-wrapper .sidebar ul a, | |
| .admin-wrapper .sidebar ul a.selected, | |
| .admin-wrapper .sidebar ul ul { | |
| border-radius: 0; | |
| background: none; | |
| } | |
| /* make tables in settings look consistent //todo:cleanup */ | |
| .admin-wrapper .content h4 { | |
| padding: 8px; | |
| font-weight: 700; | |
| font-size: 16px | |
| } | |
| .table thead th, | |
| .table thead td { | |
| font-family: "Arial Black" | |
| } | |
| .table td:first-child, | |
| .table > tbody > tr:nth-child(odd) > td:first-child { | |
| background: var(--bg); | |
| color: #ddd | |
| } | |
| .column-inline-form label input { | |
| padding: 6px | |
| } | |
| /*--------------- | |
| public page fixes | |
| ---------------*/ | |
| /* colorize logo */ | |
| .landing-page__logo img { | |
| filter: sepia(100%) hue-rotate(160deg) saturate(400%) brightness(40%); | |
| mix-blend-mode: normal | |
| } | |
| /* add shadow to help with visibility on light bg */ | |
| .brand img { | |
| filter: drop-shadow(0 0 0 black) | |
| } | |
| /* footer logo recolor */ | |
| .public-layout .footer .brand svg path { | |
| fill: var(--textPageMuted) | |
| } | |
| .public-layout .footer .brand:hover svg path { | |
| fill: var(--accent) | |
| } | |
| /* cleanup stray background elements */ | |
| .endorsements-widget .account, | |
| .public-layout .header, | |
| .public-layout .public-account-header__bar .avatar img, | |
| .simple_form .input-with-append .append::after, | |
| .public-layout .header .brand:active, | |
| .public-layout .header .brand:focus, | |
| .public-layout .header .brand:hover, | |
| .input-copy { | |
| background: none; | |
| border-radius: 0; | |
| border: none; | |
| } | |
| /* flatten toots view */ | |
| .activity-stream, | |
| .activity-stream .entry:first-child .status, | |
| .activity-stream .entry:first-child .detailed-status, | |
| .activity-stream .entry:first-child .load-more, | |
| .activity-stream .entry:last-child .status, | |
| .activity-stream .entry:last-child .detailed-status, | |
| .activity-stream .entry:last-child .load-more, | |
| .public-layout .header, | |
| .nothing-here { | |
| box-shadow: none; | |
| border-radius: 0 | |
| } | |
| /* toots, following, followers */ | |
| .public-layout .public-account-header__tabs__tabs .counter::after { | |
| border-bottom: 0 solid var(--textMuted) | |
| } | |
| .public-layout .public-account-header__tabs__tabs .counter.active::after, | |
| .public-layout .public-account-header__tabs__tabs .counter:hover::after { | |
| border-bottom: 0 solid var(--accent) | |
| } | |
| /* make profile field keys bold */ | |
| .account__header__fields dt { | |
| font-weight: 700 | |
| } | |
| /* improve avatar and profile-card look */ | |
| .card__bar .avatar img { | |
| background: none | |
| } | |
| .card__img { | |
| background: var(--bg) | |
| } | |
| /*--------------- | |
| deal with borders | |
| ---------------*/ | |
| /* remove most borders */ | |
| .status-card, | |
| .setting-text, | |
| .flash-message.notice, | |
| .account__moved-note, | |
| .account__header__fields dl, | |
| .account__header .account__header__fields dl, | |
| .account__section-headline, | |
| .notification__filter-bar, | |
| .search-results__section h5, | |
| .public-layout .public-account-header__bar .avatar img, | |
| .public-layout .public-account-header__tabs__tabs .counter { | |
| border: none | |
| } | |
| /* recolor some other borders */ | |
| .account, | |
| .status, | |
| .status__wrapper--filtered, | |
| .load-gap, | |
| .loading-indicator__figure, | |
| .button.button-secondary, | |
| .account__header__fields, | |
| .account__header__fields dl:last-child, | |
| .account__action-bar, | |
| .account__action-bar__tab, | |
| .account__disclaimer, | |
| .admin-wrapper .content h4 { | |
| border: none | |
| } | |
| /* active tabs //check later */ | |
| .account__action-bar__tab { | |
| border-bottom: 0 solid transparent | |
| } | |
| .account__action-bar__tab.active, | |
| .tabs-bar__link.active { | |
| border-color: var(--textMuted); | |
| color: var(--accent2); | |
| } | |
| /* fix detailed status borders */ | |
| .detailed-status__action-bar { | |
| border-color: transparent transparent var(--bgPage) transparent !important; | |
| border-radius: 0; | |
| } | |
| /* domain blocks and report modal */ | |
| .domain, | |
| .report-modal__container, | |
| .report-modal__comment, | |
| .report-modal__comment:active, | |
| .report-modal__comment:focus, | |
| .report-modal__comment .setting-text, | |
| .status-check-box { | |
| border-color: transparent; | |
| border-radius: 0; | |
| } | |
| .domain .domain__domain-name { | |
| background: transparent; | |
| border-radius: 0; | |
| } | |
| .actions-modal, | |
| .block-modal, | |
| .boost-modal, | |
| .confirmation-modal, | |
| .mute-modal, | |
| .report-modal { | |
| border-radius: 0; | |
| } | |
| /* toggle button */ | |
| .react-toggle--checked .react-toggle-track { | |
| background-color: var(--accent3); | |
| } | |
| .react-toggle--checked .react-toggle-thumb { | |
| border-color: var(--textBold); | |
| } | |
| .react-toggle-thumb { | |
| border-width: 2px; | |
| } | |
| /*------------------------------------------------------------------------------ | |
| * ADDITIONS AND MODS | |
| * | |
| * Tweaks and redesigns that improve the look of the overall style. | |
| * These may be enabled or disabled, but are recommended to enable. | |
| * They may also be extensions, but not "miscellaneous" enough. | |
| *------------------------------------------------------------------------------/ | |
| /* | |
| * Add a line break between display name and account handle: | |
| * - this allows user/display names to expand more. | |
| */ | |
| .display-name__html { | |
| display: block; | |
| text-decoration:none !important | |
| } | |
| /* | |
| * Always show full name and handle: | |
| * - this removes the `...` and allows text to overflow past the column. | |
| * - this can look worse, but it can also prevent having to mouse over | |
| * to see the full name or handle. | |
| */ | |
| /* | |
| * Rounded avatars: | |
| * - adjust the border radius around all avatar elements. | |
| * - default override is 50% (i.e. turn squares into circles), | |
| * but you can set it to whatever you want. | |
| */ | |
| .card .avatar img, | |
| .activity-stream .status.light .status__avatar img, | |
| .account__avatar, | |
| .account__avatar-overlay-base, | |
| .account__avatar-overlay-overlay { | |
| border-radius: 50%; | |
| filter: grayscale(100%) opacity(45%) !important; | |
| } | |
| /* | |
| * Fade out faved/boosted toots in notifications: | |
| * - for "x favourited your toot" / "x boosted your toot", | |
| * - make the faved/boosted toot half-transparent. | |
| */ | |
| .status.muted { | |
| opacity: 0.8 | |
| } | |
| /* | |
| * Collapse fave/boost notifications | |
| * - limits display to just a few lines (~3), so you can at least identify it | |
| * - hides the display name, because you already know you posted it | |
| * - tighter margins, remove space between CW and content | |
| * - hides the buttons, but you can expand a status to interact with it | |
| */ | |
| .notification-favourite .status, | |
| .notification-reblog .status { | |
| max-height: 4em; | |
| overflow: hidden; | |
| } | |
| .notification-favourite .display-name, | |
| .notification-reblog .display-name { | |
| display: none; | |
| } | |
| .notification-favourite .status__content, | |
| .notification-reblog .status__content { | |
| margin-top: -4px; | |
| } | |
| .notification-favourite .status__content p, | |
| .notification-reblog .status__content p { | |
| margin-bottom: 0; | |
| } | |
| .notification-favourite .status__action-bar, | |
| .notification-reblog .status__action-bar { | |
| display: none; | |
| } | |
| /* | |
| * Release elephant friend from their confines: | |
| * - elephant friend will now hang out in the corner of your browser, | |
| * instead of being trapped in the drawer. | |
| */ | |
| .drawer__inner, | |
| .drawer__inner__mastodon { | |
| background: none; | |
| z-index: 0 | |
| } | |
| .drawer__inner__mastodon > img { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| height: 180px; | |
| z-index: -1 | |
| } | |
| .drawer__inner { | |
| height: 100% | |
| } | |
| /* firefox bug highlights drawer text on click */ | |
| /* | |
| * Make "getting started" column height consistent with all other columns: | |
| * - puts the footer back at the bottom of the page, instead of floating. | |
| */ | |
| .getting-started { | |
| height: 100%; | |
| display: flex; | |
| flex-flow: column; | |
| justify-content: space-between | |
| } | |
| /* | |
| * Remove the checker-board background from the media modal: | |
| * - this makes transparent images actually transparent | |
| */ | |
| .media-modal canvas, | |
| .media-modal img { | |
| background: none; | |
| border-radius: 0; | |
| } | |
| /* | |
| * Fix glowing elements when there are new toots to be fetched | |
| * - this is technically a fix, but it hasn't been fully fixed. | |
| * //todo: try to find a way to make this look good against bgHead | |
| */ | |
| .column-header.active .column-header__icon { | |
| text-shadow: 0 0 0 var(--bg); | |
| } | |
| .column-header.active { | |
| box-shadow: 0 0 0; | |
| } | |
| .column-header__wrapper.active:before { | |
| background: radial-gradient(ellipse, var(--bg) 0, var(--bg) 30%); | |
| } | |
| /* | |
| * Fix highlights on unread DM conversations | |
| * - new conversations view in 2.6.0 | |
| * - 2.6.0 adds highlight, :not(.read) has its own bg | |
| * - instead, let's add a dot next to the timestamp | |
| */ | |
| .status.status-direct:not(.read) { | |
| background: var(--bg); | |
| } | |
| .column[aria-label="Direct messages"] .status.status-direct:not(.read) .status__relative-time:before { | |
| content: "? "; | |
| font-size: 1em; | |
| color: var(--accent); | |
| } | |
| .conversation.focusable.muted { | |
| background: var(--bg); | |
| } | |
| .conversation__avatar { | |
| filter: grayscale(100%) | |
| } | |
| .conversation__content__names { | |
| color: var(--textMuted) | |
| } | |
| .conversation__content__names a { | |
| color: var(--textBold) | |
| } | |
| .conversation__content__relative-time { | |
| color: var(--textMuted) | |
| } | |
| /* ------------------------------------------------------------ | |
| various tweaks related to making account view look a bit better | |
| -------------------------------------------------------------*/ | |
| /* profile field keys //todo */ | |
| .account__header .account__header__fields dd, | |
| .public-account-bio .account__header__fields dd { | |
| background: var(--bg); | |
| color: var(--text) | |
| } | |
| /* profile field values //todo */ | |
| .account__header .account__header__fields dt, | |
| .public-account-bio .account__header__fields dt { | |
| background: var(--bg); | |
| color: var(--text) | |
| } | |
| /* account h1 */ | |
| .account__header__tabs__name h1 { | |
| color: var(--textBold) | |
| } | |
| /* verified links */ | |
| .account__header .account__header__fields dd.verified { | |
| background: var(--bg) | |
| } | |
| /* bold profile field keys */ | |
| .account__header .account__header__fields dt { | |
| font-weight: 700 | |
| } | |
| /* view profile - shadow overlay style */ | |
| .account__header { | |
| background: var(--bgHead) | |
| } | |
| .account__header > div { | |
| background: var(--bg) | |
| } | |
| .account__header .account__header__display-name { | |
| color: #fff | |
| } | |
| .account__header .account__header__content { | |
| color: #eee | |
| } | |
| .account__header .account__header__content a, | |
| .account__header__fields a | |
| { | |
| color: var(--textMuted) !important; | |
| text-decoration: none !important | |
| } | |
| /* padded background around @handle */ | |
| .account__header .account__header__username { | |
| display: inline-block; | |
| padding: 7px 7px 8px 7px; | |
| border-radius: 0; | |
| margin-bottom: 0; | |
| background: var(--bg); | |
| color: var(--textMuted); | |
| } | |
| /* adjust margins to account for padding */ | |
| .account__header__content p { | |
| margin-bottom: 16px; | |
| } | |
| /* floating follow/edit profile button */ | |
| .account--action-button { | |
| background: rgba(255, 255, 255, 0.5); | |
| padding: 0.5em; | |
| border-radius: 0; | |
| } | |
| .account--action-button .icon-button, | |
| .account--action-button .icon-button.active { | |
| color: #fff; | |
| border-radius: 0; | |
| } | |
| .account--action-button:hover { | |
| background: var(--accent) | |
| } | |
| .account--action-button:hover .icon-button { | |
| color: var(--accentText) | |
| } | |
| /* account page tab underline */ | |
| .card .counter.active:after { | |
| border-bottom: 0 solid var(--accent) | |
| } | |
| /* make footer logo visible against light bg */ | |
| .footer .powered-by a { | |
| filter: drop-shadow( 0 0 0 var(--textMuted)) | |
| } | |
| /* | |
| Hide buttons that can't be clicked | |
| - columns on /about and tag pages have buttons that don't work. | |
| - so, this snippet hides those nonworking buttons to save space | |
| - and to avoid confusion. | |
| - unboostable buttons are made transparent on hover instead. | |
| */ | |
| .status__action-bar .icon-button.disabled:hover, | |
| .notification-favourite .status.status-direct .icon-button.disabled:hover { | |
| color: transparent !important | |
| } | |
| #mastodon-timeline .status__action-bar { | |
| display: none | |
| } | |
| /*----------------------- | |
| material design overrides | |
| -----------------------*/ | |
| /* turn statuses into cards */ | |
| .drawer__inner.darker { | |
| filter: drop-shadow(0 0 0 rgb(68, 68, 68)); | |
| background: transparent | |
| } | |
| .status { | |
| box-shadow: 0 0 0 rgb(68, 68, 68); | |
| background: var(--bg); | |
| margin: 8px; | |
| border-radius: 0; | |
| border: 0 | |
| } | |
| .status__wrapper--filtered { | |
| border: none | |
| } | |
| .detailed-status__wrapper { | |
| margin: 10px; | |
| } | |
| /*might look weird in older versions pre-2.6?*/ | |
| /* recolors */ | |
| .column > .scrollable, | |
| .landing-page #mastodon-timeline, | |
| .activity-stream .entry { | |
| background: none !important; | |
| border: none | |
| } | |
| .account-timeline__header, | |
| .account { | |
| background: var(--bg) | |
| } | |
| .notification .account, | |
| .load-more { | |
| background: var(--bgPage) | |
| } | |
| .status__prepend, | |
| .notification__message, | |
| .status__prepend .status__display-name strong { | |
| color: var(--textMuted) | |
| } | |
| .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) | |
| } | |
| .status__prepend > span:hover, | |
| div.status__prepend-icon-wrapper:hover { | |
| color: var(--textMuted); | |
| } | |
| /* 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) | |
| } | |
| /* fix rounding on end toots in stream */ | |
| .activity-stream .entry:first-child .status, | |
| .activity-stream .entry:last-child .status { | |
| border-radius: 0 | |
| } | |
| /* remove borders from account view */ | |
| .account, | |
| .account__header__fields, | |
| .account__header__fields dl:last-child, | |
| .account__action-bar, | |
| .account__action-bar__tab, | |
| .account__disclaimer { | |
| border: none | |
| } | |
| /*------------------------------------------------------------------------------ | |
| * 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 | |
| * | |
| ------------------------------------------------------------------------------*/ | |
| /* 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(0 1px 0 rgba(0, 0, 0, 0.6)) | |
| } | |
| /* 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: var(--text); | |
| background: none | |
| } | |
| /* 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, | |
| /*.detailed-status__action-bar .detailed-status__button:nth-child(3) .icon-button:focus,*/ | |
| .notification__favourite-icon-wrapper .star-icon { | |
| color: var(--text); | |
| background: none | |
| } | |
| /* 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: var(--text); | |
| background: none | |
| } | |
| /* share */ | |
| .icon-button:hover .fa-share-alt { | |
| color: var(--textMuted); | |
| background: none | |
| } | |
| span.status__action-bar__counter__label:hover { | |
| color: var(--textMuted); | |
| background: none | |
| } | |
| /* boosts notifications */ | |
| .notification__message .fa.fa-retweet, | |
| .icon-button:hover .fa-retweet { | |
| color: var(--text)!important; | |
| /* background: none */ | |
| } | |
| /* remove icon backgrounds */ | |
| .status__action-bar-button.icon-button--with-counter, | |
| .status__action-bar-button.icon-button, | |
| .status__action-bar-dropdown .icon-button { | |
| background:none | |
| } | |
| .status__action-bar-button.icon-button--with-counter:focus, | |
| .status__action-bar-button.icon-button:focus, | |
| .status__action-bar-dropdown .icon-button:focus{ | |
| color: var(--textMuted); | |
| } | |
| /* recolor boosts */ | |
| i.fa.fa-retweet.fa-fw { | |
| filter: grayscale(100%) brightness(120%) !important | |
| } | |
| i.fa.fa-retweet.fa-fw:hover{ | |
| filter: grayscale(100%) brightness(200%)!important; | |
| transition: .3s | |
| } | |
| button.status__action-bar-button.icon-button.active, | |
| .icon.button.active i.fa.fa-retweet.fa-fw, | |
| button.icon-button.active i.fa-retweet{ | |
| filter: grayscale(100%) brightness(200%)!important; | |
| transition: .9s | |
| } | |
| button.icon-button.active i.fa-retweet:focus{ | |
| filter: grayscale(100%) brightness(120%) !important | |
| } | |
| /* hover to hide disabled button */ | |
| button.icon-button.disabled i.fa-retweet:hover { | |
| filter: grayscale(100%) opacity(60%); | |
| transition: .5s !important; | |
| } | |
| /* */ | |
| strong.navigation-bar__profile-account { | |
| color: var(--textmuted) | |
| } | |
| /*getting started footer */ | |
| div.getting-started__footer { | |
| color: var(--textMuted) | |
| } | |
| div.getting-started__footer span:hover { | |
| color: var(--textMuted); | |
| text-decoration: none; | |
| } | |
| /* buttons */ | |
| button.icon-button { | |
| border: 0; | |
| border-radius: 0; | |
| background: none !important; | |
| } | |
| div.status__prepend { | |
| color: var(--textMuted); | |
| filter: opacity(70%) | |
| } | |
| /* announcements */ | |
| div.announcements { | |
| background-color: var(--accent2) | |
| } | |
| .announcements__item__content a.unhandled-link { | |
| color: teal | |
| } | |
| .announcements__item__content a { | |
| color: teal | |
| } | |
| .tabs-bar__link.active { | |
| border-color: var(--textMuted) | |
| } | |
| .tabs-bar__link { | |
| color: var(--textMuted); | |
| border-width: 2px; | |
| } | |
| /* fade banner image */ | |
| img.parallax { | |
| filter: opacity(20%) grayscale(50%) | |
| } | |
| /**/ | |
| .reactions-bar__item { | |
| background-color: var(--text); | |
| border-radius: 50%; | |
| } | |
| .reactions-bar__item__count { | |
| color: var(--accent3) | |
| } | |
| .reactions-bar .emoji-button { | |
| color: var(--accent4) | |
| } | |
| div.detailed-status__button { | |
| background-color: var(--bg); | |
| } | |
| .detailed-status { | |
| background-color: var(--bg); | |
| } | |
| div.drawer__inner__mastodon { | |
| filter: opacity(0); | |
| } | |
| /* timeline hint*/ | |
| .timeline-hint, | |
| .timeline-hint span:hover { | |
| color: var(--accent2) | |
| } | |
| .timeline-hint a, | |
| .timeline-hint a:hover { | |
| color: var(--accent2)!important; | |
| } | |
| div.trends__header, | |
| div.trends__header span:hover { | |
| background-color: var(--bg); | |
| border: none; | |
| color: var(--accent3) | |
| } | |
| /* fix double column head on list page // todo*/ | |
| .column-header h1 {display:none !important; | |
| } | |
| /* loading animations */ | |
| .no-reduce-motion .loading-indicator__figure, | |
| .loading-bar{ | |
| background-color: var(--accent2)!important; | |
| color: var(--accent2)!important; | |
| border-color: var(--textBold)!important; | |
| border-radius: 0 !important | |
| } | |
| div.status__wrapper.status__wrapper-public { | |
| border-color: var(--textBold) | |
| } | |
| /* unread notification left border color // not working */ | |
| div.notifications-bar-message, | |
| div.notification-bar.notification-bar-active { | |
| border-radius: 0 !important; | |
| } | |
| div.notification.notification-reblog.focusable.unread, | |
| div.status__wrapper.status__wrapper-direct.unread.focusable, | |
| div.status__wrapper.status__wrapper-private.focusable, | |
| div.item-list article, | |
| .status.status-direct:not(.read){ | |
| border-color: var(--textBold) !important; | |
| border-radius: 30% !important; | |
| } | |
| /* follow request page */ | |
| .account__header__content { | |
| color: var(--textBold) | |
| } | |
| .account--panel { | |
| background-color: var(--accent4); | |
| border-color: var(--accent4); | |
| } | |
| .notifications-permission-banner{ | |
| border-color: var(--accent3) | |
| } | |
| .notifications-permission-banner p,.notifications-permission-banner span:hover{ | |
| color: var(--textMuted); | |
| } | |
| /* directory list */ | |
| .radio-button__input.checked { | |
| background-color: var(--accent2); | |
| border-color: var(--accent2) | |
| } | |
| .radio-button__input{ | |
| border-color: var(--accent2) | |
| } | |
| .filter-form, | |
| .directory__card__bar, | |
| .directory__card__extra{ | |
| background: none; | |
| } | |
| .directory__card__extra .account__header__content{ | |
| border: none; | |
| } | |
| .directory__card__bar .display-name span { | |
| color: var(--textMuted); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** ------------------------------------------------------ | |
| Mastodon theme: blacklead (low-contrast) | |
| by mast | |
| Mar 20, 2021 | |
| - toned down avatar and user information appearance | |
| - low contrast, low saturation, dark gray background | |
| Adapted from Frederikam's deep dark theme https://gist.github.com/Frederikam/b0ab4e67df01938ab7d7a589ca3987f1 based on Mastodon Flat | |
| -------------------------------------------------------**/ | |
| /*Frederikam's comment: | |
| Adapted from: https://userstyles.org/styles/153362/mfc-mastodon-flat-css | |
| /*------------------------------------------------------------------------------ | |
| * MISC TWEAKS | |
| * | |
| * Miscellaneous tweaks that are more like extensions of the theme, | |
| * rather than subsets or features. These could ostensibly be their | |
| * own user-styles, and are only bundled in here for convenience. | |
| * Or, they are not supported in all browsers. They may be removed | |
| * without significantly affecting or compromising the theme. | |
| * | |
| * They are at the top of the style sheet for easy editing. | |
| ------------------------------------------------------------------------------*/ | |
| /* custom font */ | |
| body, | |
| .landing-page #mastodon-timeline, | |
| .landing-page li, | |
| .landing-page p { | |
| font-family: sans-serif | |
| } | |
| /* change line height */ | |
| p { | |
| line-height: 1.7; | |
| } | |
| /* visible focus indicator */ | |
| .focusable:focus { | |
| border: 0px solid var(--accent2) !important; | |
| } | |
| /* webkit scrollbars */ | |
| ::-webkit-scrollbar-track { | |
| background: none !important | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(255, 255, 255, 0.4) | |
| } | |
| /* recolor scrollbars in firefox */ | |
| html { | |
| scrollbar-color: var(--textMuted) var(--bg) !important; | |
| } | |
| /* tables */ | |
| .batch-table .nothing-here, | |
| .batch-table__toolbar, | |
| .batch-table__form.simple_form, | |
| .batch-table__row, | |
| .batch-table__row:hover, | |
| .batch-table__row:nth-child(2n), | |
| .batch-table__row:nth-child(2n):hover{ | |
| border: 0 !important; | |
| background-color: var(--bg); | |
| } | |
| .accounts-table .account__display-name strong | |
| {color: var(--text)} | |
| .batch-table__row__content__extra{ | |
| color: var(--accent2) | |
| } | |
| .filters .filter-subset a.selected { | |
| color: var(--textBold); | |
| border-color: var(--text) | |
| } | |
| .filters .filter-subset a { | |
| color: var(--text) | |
| } | |
| .filters .filter-subset a.selected { | |
| border-color: var(--text) | |
| } | |
| .accounts-table__count { | |
| color: var(--textBold) | |
| } | |
| .accounts-table__count small { | |
| color: var(--textMuted) | |
| } | |
| /* account avatar */ | |
| .account__header__bar .avatar .account__avatar { | |
| border: none; | |
| /* width: 85%*/ | |
| } | |
| /*------------------------------------------------------------------------------ | |
| * 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. | |
| ------------------------------------------------------------------------------*/ | |
| :root { | |
| --bg: rgb(47, 47, 47); | |
| --text: #ffffff; | |
| --textBold: #fff; | |
| --textMuted: #a0a1a1; | |
| --bgPage: var(--bg); | |
| --textPage: var(--text); | |
| --textPageBold: var(--textBold); | |
| --textPageMuted: var(--textMuted); | |
| --bgHead: var(--bg); | |
| --textHead: var(--textBold); | |
| --accent: var(--bg); | |
| --accent2: #d1d1d1; | |
| --accent3: #868686; | |
| --accent4: #292929; | |
| --accent5: rgb(0, 0, 0); | |
| --accent6: #5f5f5f; | |
| --accentText: var(--textBold); | |
| border-radius: 0px; | |
| } | |
| /* search drawer */ | |
| .drawer__header, | |
| .search__input { | |
| background-color: var(--bg) !important; | |
| color: var(--text) !important; | |
| border: none | |
| } | |
| .search__input::placeholder { | |
| color: var(--accent6); | |
| } | |
| .search__icon .fa { | |
| color: var(--accent6); | |
| } | |
| /* "advanced search format" search popout*/ | |
| div.search-popout, | |
| div.search-popout span { | |
| border-radius: 0; | |
| background-color: var(--accent2); | |
| color: var(--accent6); | |
| } | |
| /* hide compose panel until hover // todo: make panel stay highlighted after click */ | |
| /* | |
| div.compose-form { | |
| filter: opacity(10%); | |
| } | |
| div.compose-form:hover, | |
| div.compose-form:active { | |
| filter: opacity(100%); | |
| transition: 0.5s | |
| } | |
| */ | |
| /* compose form theme */ | |
| .compose-form, | |
| .navigation-bar { | |
| padding-left: 0; | |
| padding-right: 5% | |
| } | |
| .compose-form .autosuggest-textarea__textarea, | |
| .compose-form .spoiler-input__input, | |
| .compose-form__uploads-wrapper, | |
| .compose-form__sensitive-button, | |
| .upload-progress { | |
| background-color: var(--bg); | |
| border-radius: 0px; | |
| color: var(--text) | |
| } | |
| .upload-progress { | |
| background-color: var(--accent2); | |
| } | |
| /* | |
| .compose-form .autosuggest-textarea__textarea:hover, | |
| .compose-form .spoiler-input__input:hover, | |
| .compose-form .autosuggest-textarea__textarea:active, | |
| .compose-form .spoiler-input__input:active | |
| .compose-form .autosuggest-textarea__textarea:focus | |
| {background-color: var(--accent2); | |
| transition:.75s} | |
| */ | |
| .autosuggest-textarea__textarea { | |
| color: var(--accent5) !important; | |
| border-radius: 0px; | |
| } | |
| /* mention autosuggests */ | |
| .compose-form .autosuggest-textarea__suggestions__item.selected, .compose-form .autosuggest-textarea__suggestions__item:active, .compose-form .autosuggest-textarea__suggestions__item:focus, .compose-form .autosuggest-textarea__suggestions__item:hover{ | |
| color: var(--bg); | |
| background: var(--text); | |
| border-radius: 0px; | |
| } | |
| .compose-form .autosuggest-textarea__suggestions { | |
| border-radius: 0px !important; | |
| background: var(--accent3); | |
| box-shadow: none; | |
| color: var(--accent4) !important | |
| } | |
| div.autosuggest-account .display-name, | |
| .compose-form .autosuggest-account .display-name__account{ | |
| color: var(--accent4) | |
| } | |
| /* compose form placeholders */ | |
| div.autosuggest-input ::placeholder, | |
| div.autosuggest-textarea ::placeholder { | |
| color: var(--accent6) !important | |
| } | |
| /**/ | |
| .compose-form__buttons-wrapper, | |
| .compose-form__publish-button-wrapper { | |
| background-color: var(--bg) !important; | |
| border-radius: 0px !important; | |
| border: none !important; | |
| filter: opacity(30%) | |
| } | |
| .compose-form__publish-button-wrapper:hover, | |
| .compose-form__publish-button-wrapper:active { | |
| filter: none; | |
| } | |
| /* emoji picker */ | |
| .emoji-button { | |
| filter: grayscale(100%) opacity(30%) | |
| } | |
| .emoji-button:hover { | |
| filter: opacity(50%) | |
| } | |
| .emoji-picker-dropdown__menu { | |
| border-radius: 0px !important; | |
| border-bottom: 0; | |
| border-top: 0 | |
| } | |
| .emoji-mart-bar { | |
| background-color: var(--accent6); | |
| border-radius: 0px; | |
| border-bottom: 0; | |
| border-top: 0; | |
| } | |
| .emoji-mart-anchor-selected, | |
| .emoji-mart-anchor-selected:hover, | |
| .emoji-mart-anchor:hover{ | |
| color: var(--textBold) !important; | |
| transition: .3s | |
| } | |
| .emoji-mart-search input { | |
| background-color: var(--accent6); | |
| border-radius: 0px !important; | |
| border-bottom: 1px; | |
| border-top: 0; | |
| border-left: 0; | |
| border-right: 0; | |
| border-width: 2px; | |
| border-color: var(--textMuted); | |
| color: var(--text) | |
| } | |
| .emoji-mart-no-results{ | |
| color: var(--accent3) | |
| } | |
| div.emoji-mart-anchors, | |
| .emoji-mart-search, | |
| .emoji-mart-scroll, | |
| .emoji-mart-category, | |
| .emoji-mart-category-label, | |
| .emoji-mart-category-label span:hover, | |
| .emoji-picker-dropdown__menu{ | |
| background-color: var(--accent6) !important; | |
| color: var(--text) !important | |
| } | |
| .emoji-mart-category-label span { | |
| background: none !important; | |
| } | |
| .emoji-picker-dropdown__modifiers__menu { | |
| border-radius: 0; | |
| } | |
| .emoji-mart-emoji span { | |
| width: 22px; | |
| height: 22px; | |
| filter: grayscale(50%); | |
| } | |
| .emoji-mart-category .emoji-mart-emoji span { | |
| filter: grayscale(40%) !important | |
| } | |
| span.emoji-mart-anchor { | |
| color: var(--textMuted) | |
| } | |
| span.emoji-mart-anchor-bar { | |
| background-color: var(--textMuted); | |
| } | |
| .emoji-mart-category .emoji-mart-emoji:hover::before{ | |
| background-color: var(--text); | |
| } | |
| /* emoji appearance*/ | |
| .emojione { | |
| filter: grayscale(40%) | |
| } | |
| .status__content__spoiler-link { | |
| background-color: var(--bgHead) !important; | |
| } | |
| .status__content__spoiler-link:hover { | |
| background-color: var(--accent) !important; | |
| } | |
| .sidebar { | |
| background-color: var(--bg); | |
| } | |
| /* Remove profile borders */ | |
| .account__header__bio .account__header__fields { | |
| border-top: none; | |
| } | |
| .account__header__bar { | |
| border-bottom: none; | |
| } | |
| /* profile colors */ | |
| .account__header__tabs__name h1 small { | |
| color: var(--text)!important | |
| } | |
| .account__header__extra__links strong { | |
| color: var(--textBold) | |
| } | |
| .account__header__extra__links a { | |
| color: var(--textMuted)!important | |
| } | |
| .account__header__extra__links a strong { | |
| font-weight: 300 !important | |
| } | |
| .button.logo-button, | |
| .account__header__tabs__buttons .icon-button{ | |
| border-radius:0px; | |
| background-color: var(--bg) !important; | |
| border:none; | |
| color: var(--textMuted) | |
| } | |
| .button.logo-button:hover{ | |
| background:none; | |
| } | |
| /*------------------------------------------------------------------------------ | |
| * FOREGROUND COLOR PALETTE ===================================================== | |
| *------------------------------------------------------------------------------/ | |
| /*---------------------- | |
| base background and text | |
| ----------------------*/ | |
| /* status columns */ | |
| .columns-area__panels__main { | |
| padding: 0 10px; | |
| max-width: 615px; | |
| } | |
| .column > .scrollable, | |
| .status, | |
| .status__content, | |
| .detailed-status { | |
| background-color: var(--bg) | |
| } | |
| .columns-area--mobile .status__prepend { | |
| margin-left: 85px; | |
| } | |
| .detailed-status__action-bar { | |
| background-color: var(--bg) | |
| } | |
| .focusable:focus .detailed-status, | |
| .focusable:focus .detailed-status__action-bar { | |
| background: none !important; | |
| } | |
| .setting-text, | |
| .setting-text:active, | |
| .setting-text:focus, | |
| /*.status-direct .status__content .status__content__spoiler-link,*/ | |
| .status-direct { | |
| background-color: var(--accent2); | |
| border-radius: 0; | |
| } | |
| .column-link, | |
| .getting-started a.column-link { | |
| color: var(--textMuted); | |
| background: none; | |
| } | |
| .status-direct .display-name strong { | |
| color: var(--textMuted)!important | |
| } | |
| /* search */ | |
| /*.search__input, | |
| .search__input:focus,*/ | |
| .search-results .account, | |
| .trends__item, | |
| .trends__item__name a, | |
| .trends__item__current, | |
| /* compose form */ | |
| .reply-indicator__content, | |
| .status__content { | |
| color: var(--text) | |
| } | |
| /* in reply to */ | |
| /* | |
| .compose-form .spoiler-input__input, | |
| .compose-form .autosuggest-textarea__textarea, | |
| .compose-form .compose-form__modifiers, | |
| .compose-form .compose-form__buttons-wrapper, */ | |
| /* settings page */ | |
| .simple_form .input.with_floating_label .label_input label{ | |
| color: var(--textBold) !important; | |
| } | |
| .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, | |
| .column-inline-form label { | |
| background-color: var(--accent4); | |
| border-radius: 0; | |
| border-color: var(--accent4); | |
| } | |
| .simple_form select { | |
| border-radius: 0; | |
| background-color: var(--accent4); | |
| border-color: var(--accent4); | |
| } | |
| .simple_form .hint a { | |
| color: var(--text); | |
| text-decoration: none; | |
| } | |
| /* content heading action buttons*/ | |
| div.content-heading-actions .button, | |
| .simple_form button { | |
| background-color: var(--accent4); | |
| } | |
| /* modals */ | |
| .actions-modal, | |
| .boost-modal, | |
| .confirmation-modal, | |
| .mute-modal, | |
| .report-modal, | |
| .report-modal__statuses .status__content, | |
| .report-modal__statuses .status__content p, | |
| .report-modal__comment .setting-toggle__label, | |
| .list-editor, | |
| .list-editor .drawer__inner.backdrop, | |
| .account__moved-note, | |
| .block-modal__action-bar, | |
| .boost-modal__action-bar, | |
| .confirmation-modal__action-bar, | |
| .mute-modal__action-bar, | |
| .actions-modal ul li:not(:empty) a, | |
| .actions-modal .dropdown-menu__separator { | |
| background-color: var(--bg); | |
| color: var(--accent3); | |
| border-bottom-color: var(--accent6); | |
| border-width: 2px; | |
| } | |
| .actions-modal ul li:not(:empty) a.active, | |
| .actions-modal ul li:not(:empty) a:hover { | |
| background-color: var(--accent4); | |
| } | |
| /* profile cards */ | |
| .card__bar, | |
| .card > a:active .card__bar, | |
| .card > a:focus .card__bar, | |
| .card > a:hover .card__bar, | |
| /* public pages */ | |
| .activity-stream .entry, | |
| .landing-page #mastodon-timeline, | |
| .landing-page #mastodon-timeline p, | |
| .landing-page__forms, | |
| .landing-page__information, | |
| .landing-page li, | |
| .landing-page p, | |
| .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, | |
| .contact-widget h4, | |
| .rich-formatting, | |
| .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-header__bar::before, | |
| .account__header__fields dt, | |
| .account__header__fields dd, | |
| .hero-widget__text, | |
| .load-more, | |
| .button.button-secondary { | |
| background: var(--bg); | |
| color: var(--text); | |
| border-radius: 0px; | |
| border-color: var(--textMuted) | |
| } | |
| /* account public page */ | |
| .public-layout .public-account-header__image{ | |
| background-color: var(--accent5); | |
| border-radius: 0px; | |
| } | |
| .placeholder-widget{ | |
| color: var(--textMuted) ; | |
| border-radius: 0px; | |
| border-color: var(--textMuted) | |
| } | |
| a.mention.hashtag, .notice-widget a, .placeholder-widget a{ | |
| background-color: var(--bg); | |
| color: var(--accent2); | |
| padding: 0 2px; | |
| text-align: center; | |
| text-decoration: none!important; | |
| display: inline-block; | |
| border-style: solid; | |
| border-color: var(--textMuted); | |
| border-width: 0.5px; | |
| border-radius: 30%; | |
| border-top: none; | |
| border-left: none; | |
| border-right: none; | |
| } | |
| .account__section-headline a:hover,a.mention.hashtag:hover, .placeholder-widget a:hover{ | |
| color: var(--text); | |
| transition: .4s; | |
| text-decoration:none | |
| } | |
| a.detailed-status__application:hover{ | |
| color: var(--text); | |
| transition: .4s | |
| } | |
| .detailed-status__link:hover{ | |
| color: var(--text); | |
| transition: .4s | |
| } | |
| .detailed.status__visibility-icon .i.fa.fa-globe:hover{ | |
| color: var(--textMuted)!important | |
| } | |
| /* account note*/ | |
| .account__header__account-note label { | |
| color: var(--accent3) | |
| } | |
| .account__header__account-note, | |
| .account__header__account-note textarea { | |
| color: var(--text); | |
| border: none; | |
| } | |
| .account__header__account-note textarea, | |
| .account__header__account-note textarea:focus{ | |
| background-color: var(--accent4); | |
| border-radius: 0; | |
| } | |
| .account__header__account-note textarea::placeholder { | |
| color: var(--accent6); | |
| } | |
| .contact-widget a { | |
| color: var(--textMuted) | |
| } | |
| /* right navigation panel border */ | |
| .navigation-panel hr { | |
| border: 0 | |
| } | |
| /* make mastodon logos gray */ | |
| a.brand, | |
| .logo-container h1 a, | |
| div.landing__brand { | |
| filter: grayscale(100%) | |
| } | |
| /* directory tag (try a mobile app)*/ | |
| .directory__tag a { | |
| background-color: var(--bg); | |
| } | |
| .directory__tag h4 small { | |
| color: var(--textMuted) | |
| } | |
| .public-layout .header .nav-link { | |
| color: var(--textMuted) | |
| } | |
| /* hide contact widget */ | |
| div.contact-widget, | |
| ul.table-of-contents { | |
| filter: opacity(0) | |
| } | |
| /* public forms */ | |
| .landing .simple_form .user_agreement .label_input label, | |
| .landing .simple_form p.lead { | |
| color: var(--textMuted) | |
| } | |
| .simple_form .input.boolean label a { | |
| color: var(--text) | |
| } | |
| .simple_form .label_input__append { | |
| color: var(--accent3); | |
| } | |
| /* what is this? hide for now*/ | |
| div.input.url.optional.user_website, | |
| div.input.string.optional.user_confirm_password { | |
| filter: opacity(0); | |
| } | |
| /*-------------------- | |
| override for bold text | |
| --------------------*/ | |
| /* primary elements */ | |
| .account__display-name strong, | |
| .status__display-name strong, | |
| .detailed-status__display-name strong, | |
| .card__bar .display-name strong, | |
| .account__action-bar__tab strong, | |
| /* profile counters */ | |
| /* public pages */ | |
| .landing-page h3, | |
| .landing-page h4, | |
| .landing-page em, | |
| .landing-page h5, | |
| .landing-page h6, | |
| .rich-formatting h3, | |
| .rich-formatting h4, | |
| .public-layout .public-account-header__tabs__tabs .counter .counter-number, | |
| .account__header__fields dt { | |
| color: var(--textMuted); | |
| text-decoration: none; | |
| transition: .2s; | |
| } | |
| /*--------------------- | |
| override for muted text | |
| ---------------------*/ | |
| /* secondary elements */ | |
| .display-name__account, | |
| .account .account__display-name, | |
| .card__bar .display-name span, | |
| span.display-name, | |
| .detailed-status__meta, | |
| .status__relative-time, | |
| .status__action-bar__counter__label, | |
| .status__prepend, | |
| .status__prepend .status__display-name strong, | |
| .attachment-list.compact .fa, | |
| .icon-button, | |
| .icon-button.disabled, | |
| .icon-button.active:hover { | |
| color: var(--accent3); | |
| background: none; | |
| text-decoration: none !important; | |
| } | |
| .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, | |
| .upload-progress, | |
| .trends__item__name, | |
| .notification__message, | |
| .account__moved-note__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, | |
| /* 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(--accent3) | |
| } | |
| /*------------------------------------------------------------------------------ | |
| * BACKGROUND COLOR PALETTE ===================================================== | |
| *------------------------------------------------------------------------------/ | |
| /*---------------------- | |
| base background and text | |
| ----------------------*/ | |
| /* background and drawer */ | |
| .ui { | |
| background-color: var(--bg); | |
| } | |
| /*.drawer__tab,*/ | |
| .tabs-bar { | |
| background-color: var(--bg); | |
| } | |
| .search-results__section h5, | |
| .account__section-headline, | |
| .account__section-headline button, | |
| .notification__filter-bar, | |
| .notification__filter-bar button, | |
| /* DMs */ | |
| .status.status-direct, | |
| .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, | |
| .video-player__spoiler, | |
| .video-player__spoiler.active:active, | |
| .video-player__spoiler.active:focus, | |
| .react-toggle-track, | |
| /* 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 ul a, | |
| .admin-wrapper .sidebar ul ul a, | |
| .admin-wrapper .content h2, | |
| .admin-wrapper .content h6, | |
| .dashboard__counters div a { | |
| background-color: var(--bg)!important; | |
| color: var(--textMuted); | |
| border-radius: 0px | |
| } | |
| .dashboard__counters > div > div | |
| { | |
| background-color: var(--accent4)!important; | |
| border-radius: 0px | |
| } | |
| .dashboard__counters__num{ | |
| color: var(--text) | |
| } | |
| .dashboard__counters__label{ | |
| color: var(--accent2) | |
| } | |
| .announcements-list__item{ | |
| background-color: var(--accent4) | |
| } | |
| .admin-wrapper .sidebar ul a:hover, | |
| .admin-wrapper .sidebar ul ul a:hover, | |
| .admin-wrapper .sidebar ul a.selected, | |
| .admin-wrapper .sidebar ul ul a.selected { | |
| color: var(--text) | |
| } | |
| .admin-wrapper .sidebar ul a:hover, | |
| .admin-wrapper .sidebar ul ul a.selected:hover { | |
| color: var(--text)!important | |
| } | |
| .admin-wrapper .sidebar-wrapper__inner { | |
| background-color: var(--bg)!important; | |
| } | |
| .admin-wrapper .sidebar .logo { | |
| filter: grayscale(100%); | |
| } | |
| .flash-message a { | |
| color: var(--textMuted) | |
| } | |
| .flash-message a:hover { | |
| color: var(--text) | |
| } | |
| .simple_form .input.with_label .label_input > label, | |
| .simple_form .input.with_label.boolean .label_input > label, | |
| .simple_form .input.with_block_label > label, | |
| .simple_form .check_boxes .checkbox label, | |
| .simple_form .input.radio_buttons .radio label, | |
| .label_input, | |
| .input input{ | |
| color: var(--accent2) | |
| } | |
| /* 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, | |
| /* opengraph previews */ | |
| .status-card, | |
| /* muted poll*/ | |
| .muted .poll { | |
| border-radius: 0 !important; | |
| background: none; | |
| color: var(--textMuted); | |
| } | |
| /* modal select button */ | |
| .block-modal__container select, | |
| .confirmation-modal__container select, | |
| .mute-modal__container select, | |
| .report-modal__target select { | |
| background-color: var(--textMuted); | |
| border-color: var(--textMuted); | |
| border-radius: 0; | |
| } | |
| /* muted polls */ | |
| .muted .poll__chart { | |
| background-color: var(--accent3); | |
| } | |
| div.status-card__content { | |
| background-color: var(--accent4); | |
| border-radius: 0%!important; | |
| } | |
| a.status-card.compact { | |
| border-radius: 0; | |
| } | |
| div.status-card__image-image, | |
| .status-card__image-image{ | |
| border-radius: 0; | |
| background-color: var(--accent4); | |
| filter: grayscale(60%) opacity(80%) | |
| } | |
| .status-card__description, | |
| .status-card__image, | |
| .button:disabled { | |
| border-radius: 0; | |
| background-color: var(--accent4); | |
| color: var(--accent2) | |
| } | |
| .search__icon .fa, | |
| .search__icon .fa-times-circle { | |
| color: var(--accent6) | |
| } | |
| /* image spoiler icon*/ | |
| .spoiler-button, | |
| .spoiler-button--minified | |
| /* | |
| .icon-button.overlayed | |
| */{ | |
| background: none !important; | |
| border-radius: 0px !important; | |
| filter: drop-shadow(0px 1px 3px var(--accent3)) | |
| } | |
| .spoiler-button__overlay__label{ | |
| background: var(--bg); | |
| border-radius:0; | |
| transition: .3s; | |
| } | |
| /* public pages */ | |
| body, | |
| body.admin, | |
| body.lighter, | |
| .button.button-alternative, | |
| .button.button-alternative-2, | |
| .landing-page__call-to-action, | |
| .public-layout .header .nav-button, | |
| .nothing-here { | |
| 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, | |
| /* 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 | |
| ---------------------*/ | |
| /* de-emphasized elements */ | |
| .navigation-bar, | |
| .getting-started, | |
| .getting-started 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, | |
| /* 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(--accent2) | |
| } | |
| .navigation-bar { | |
| filter: opacity(60%); | |
| } | |
| /*------------------------------------------------------------------------------ | |
| * HIGHLIGHTS COLOR PALETTE ===================================================== | |
| *------------------------------------------------------------------------------/ | |
| /*------------------ | |
| 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{ | |
| border: none; | |
| background: var(--bg)!important; | |
| color: var(--accent6)!important; | |
| text-decoration: none !important; | |
| } | |
| .column-header span:hover { | |
| border: none; | |
| background: var(--bg)!important; | |
| color: var(--textMuted)!important; | |
| text-decoration: none !important; | |
| } | |
| .search-results__header, | |
| .keyboard-shortcuts kbd, | |
| .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track, | |
| .report-modal__target, | |
| .media-modal__close.icon-button, | |
| .link-button, | |
| .link-button:disabled, | |
| .upload-progress__backdrop{ | |
| background: var(--bgHead); | |
| color: var(--textMuted); | |
| border-radius: 0%; | |
| border-top: none; | |
| border-left: none; | |
| border-right: none | |
| } | |
| .media-modal__close.icon-button:hover, | |
| .media-modal__close.icon-button:active, | |
| .link-button:hover{ | |
| color: var(--text) !important; | |
| text-decoration: none | |
| } | |
| /* 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, | |
| .account-role__bot, | |
| .simple_form .recommended{ | |
| background: var(--bgHead); | |
| color: var(--textHead); | |
| border-radius: 40%; | |
| border-top: none; | |
| border-left: none; | |
| border-right: none | |
| } | |
| div.compose-form__warning a, | |
| .compose-form .compose-form__warning a{ | |
| background: none !important; | |
| text-decoration: none !important; | |
| color: var(--accent6) !important | |
| } | |
| .compose-form__warning, | |
| .compose-form .compose-form__warning, | |
| div.compose-form__warning span:hover { | |
| background-color: var(--accent4); | |
| color: var(--textMuted); | |
| border-radius: 0; | |
| box-shadow: none | |
| } | |
| /*-------------- | |
| accented buttons | |
| --------------*/ | |
| /* primary buttons */ | |
| .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 { | |
| background-color: var(--accent4); | |
| border-radius: 0; | |
| transition: .2s | |
| } | |
| .button{ | |
| background: var(--accent4); | |
| color: var(--textMuted)!important; | |
| border-radius: 0; | |
| } | |
| .button:active, | |
| .button:focus, | |
| .button:hover, | |
| .floating-action-button, | |
| .button.button-alternative:hover, | |
| .button.button-alternative-2:hover, | |
| .button span:hover{ | |
| background: var(--accent4); | |
| color: var(--text)!important; | |
| border-radius: 0; | |
| transition: .4s; | |
| } | |
| .icon-button.overlayed:hover { | |
| background: none; | |
| color: var(--text)!important; | |
| border-radius: 0; | |
| transition: .4s; | |
| } | |
| .floating-action-button:hover{ | |
| background: var(--accent5) | |
| } | |
| .column-link:hover, | |
| .column-link:hover span, | |
| .column-link--transparent.active, | |
| .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, | |
| .character-counter, | |
| .upload-progress span, | |
| .report-modal__comment .setting-text-label{ | |
| background: none; | |
| color: var(--textMuted)!important; | |
| border-radius: 0; | |
| transition: .4s | |
| } | |
| .privacy-dropdown.active .privacy-dropdown__value.active, | |
| .privacy-dropdown__option:hover, | |
| .privacy-dropdown__option.active, | |
| .privacy-dropdown__option.active: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, | |
| /* 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, | |
| .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, | |
| .mute-modal .setting-toggle__label, | |
| /* public pages */ | |
| .public-layout .header .nav-button:hover, | |
| .button.button-secondary:hover, | |
| /* settings pages */ | |
| .pagination .page.current:hover | |
| { | |
| background: var(--accent); | |
| color: var(--textMuted); | |
| border-radius: 0; | |
| transition: none | |
| } | |
| /* media file focal point */ | |
| .focal-point canvas, .focal-point img, .focal-point video { | |
| background-color: var(--bg) !important | |
| } | |
| .report-modal__comment .setting-text__wrapper { | |
| background-color: var(--accent2); | |
| border-radius:0 | |
| } | |
| /* */ | |
| .status-card__actions > div | |
| {border-radius:0px} | |
| /* polls */ | |
| .poll__chart.leading { | |
| background-color: var(--text); | |
| border-radius:0px; | |
| } | |
| .poll__chart{ | |
| background-color: var(--accent3); | |
| border-radius:0px; | |
| } | |
| .poll__footer span, | |
| button.poll__link { | |
| color: var(--textMuted); | |
| text-decoration: none !important; | |
| } | |
| /* poll inputs */ | |
| .poll__input.active{ | |
| border-color: var(--text); | |
| background: var(--text); | |
| } | |
| .poll__input:hover{ | |
| border-color: var(--text); | |
| } | |
| div.poll__footer .button span:hover{ | |
| background: none !important; | |
| } | |
| div.poll__footer .button.button-secondary{ | |
| background: var(--accent6)!important; | |
| } | |
| div.poll__footer .button.button-secondary:hover{ | |
| background: var(--accent3)!important; | |
| transition:.3s | |
| } | |
| /* video player ui */ | |
| .video-player__seek::before, | |
| .video-player__seek__buffer{ | |
| background: none !important; | |
| border-radius:0px; | |
| } | |
| /* | |
| .video-player__seek__buffer{ | |
| background: var(--accent5) !important; | |
| border-radius:0px; | |
| } | |
| */ | |
| .video-player__seek__progress, | |
| .video-player__volume__current, | |
| .video-player__volume__handle, | |
| .video-player__seek__handle{ | |
| background: var(--accent2) !important; | |
| color: transparent !important; | |
| border-radius: 0 !important; | |
| transition: .3s; | |
| } | |
| .video-player__seek{ | |
| border-radius: 0 !important; | |
| color: transparent | |
| } | |
| .video-player__volume::before{ | |
| background: var(--accent4) !important; | |
| border-radius:0px; | |
| } | |
| .video-player__buttons-bar:hover .player-button/*, | |
| .video-player.inline:hover .video-player__buttons-bar, | |
| .video-player.inline:hover .video-player__controls*/{ | |
| color: var(--accent2); | |
| transition: .3s | |
| } | |
| .video-player__time span{ | |
| color: var(--accent2) | |
| } | |
| /* player handles */ | |
| .video-player__volume__handle, | |
| .video-player__seek__handle{ | |
| height:0px; | |
| width:12px | |
| } | |
| /* picture-in-picture / floating media player */ | |
| div.picture-in-picture, | |
| .picture-in-picture__footer, | |
| .picture-in-picture__header, | |
| canvas.audio-player__canvas, | |
| .audio-player, | |
| .video-player__buttons-bar, | |
| div.video-player__controls.active, | |
| .video-player__controls | |
| { | |
| border-radius: 0px; | |
| background: none !important; | |
| border: none | |
| } | |
| .video-player__buttons .player-button{ | |
| color: var(--bg); | |
| /* filter: drop-shadow(2px 1px 1.5px var(--text)) */ | |
| } | |
| .video-player__buttons .player-button:active, .video-player__buttons .player-button:focus, .video-player__buttons .player-button:hover{ | |
| transition: .2s; | |
| color: var(--bg); | |
| filter: drop-shadow(.4px 0px 3px var(--text)) | |
| } | |
| .picture-in-picture__header .display-name span, .picture-in-picture__header .display-name strong | |
| {color: var(--accent3)} | |
| .picture-in-picture-placeholder:active, .picture-in-picture-placeholder:focus, .picture-in-picture-placeholder:hover | |
| {border-color: var(--bg)} | |
| .picture-in-picture-placeholder | |
| { | |
| border-color: var(--accent3); | |
| border-style: dashed; | |
| border-radius:0px; | |
| background-color: var(--accent4); | |
| transition: .2s | |
| } | |
| i.fa.fa-window-restore, | |
| .picture-in-picture-placeholder span | |
| {color: var(--accent3)} | |
| /*------------ | |
| accented links | |
| ------------*/ | |
| /* status links */ | |
| .status__content a { | |
| text-decoration: none !important; | |
| color: var(--textMuted); | |
| } | |
| .status__content a:not(.mention){ | |
| text-decoration: none !important; | |
| color: var(--textMuted); | |
| } | |
| .getting-started a, | |
| .getting-started p a, | |
| .reply-indicator__content a, | |
| .reply-indicator__content a:not(.mention), | |
| .reply-indicator__cancel .icon-button.inverted:hover, | |
| .status__content__read-more-button, | |
| .search__icon .fa:hover, | |
| .notification-follow .account .icon-button:hover, | |
| .notification__message .fa, | |
| .notification__display-name:hover, | |
| .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 { | |
| color: var(--textMuted); | |
| text-decoration: none !important; | |
| } | |
| .admin-wrapper .content .muted-hint a{ | |
| color: var(--text)!important; | |
| } | |
| /* */ | |
| .icon-button.active, | |
| .icon-button:hover { | |
| color: var(--text)!important | |
| } | |
| .icon-button:focus{ | |
| color: var(--accent3) | |
| } | |
| /* read more button */ | |
| .status__content__read-more-button { | |
| color: var(--textMuted) | |
| } | |
| /* hashtag */ | |
| /* Adapted from: | |
| hashtag style by @[email protected] and @[email protected]*/ | |
| .mention.hashtag.status-link{ | |
| background-color: var(--bg); | |
| color: var(--accent2); | |
| padding: 0 2px; | |
| text-align: center; | |
| text-decoration: none!important; | |
| display: inline-block; | |
| border-style: solid; | |
| border-color: var(--textMuted); | |
| border-width: 0.5px; | |
| border-radius: 30%; | |
| border-top: none; | |
| border-left: none; | |
| border-right: none; | |
| } | |
| .reply-indicator__content a.unhandled-link, .status__content a.unhandled-link { | |
| color: var(--accent3) | |
| } | |
| .mention.hashtag.status-link span:hover, | |
| a.mention.hashtag.status-link:hover{ | |
| color: var(--textBold); | |
| text-decoration: none!important; | |
| } | |
| .mention.hashtag.status-link span { | |
| text-decoration: none!important; | |
| } | |
| /* link hover */ | |
| span:hover { | |
| color: var(--textBold); | |
| text-decoration: none !important; | |
| transition: .3s | |
| } | |
| span { | |
| text-decoration: none !important; | |
| } | |
| /* status display name hover */ | |
| .status__display-name strong:hover { | |
| color: var(--textBold); | |
| text-decoration: none; | |
| transition: .3s | |
| } | |
| .display-name__account:hover { | |
| color: var(--accent3); | |
| text-decoration: none; | |
| } | |
| .status__info .status__display-name:hover { | |
| color: var(--textBold); | |
| text-decoration: none; | |
| } | |
| .detailed-status__display-name strong:hover { | |
| color: var(--textBold); | |
| text-decoration: none; | |
| } | |
| .strong.display-name__html:hover { | |
| text-decoration: none !important; | |
| color: var(--text) | |
| } | |
| /* status date and time hover */ | |
| time:hover { | |
| color: var(--textBold); | |
| text-decoration: none; | |
| transition: .3s | |
| } | |
| .detailed-status__datetime:hover, | |
| .detailed-status__datetime:hover span, | |
| .status__relative-time:hover { | |
| color: var(--textBold); | |
| text-decoration: none !important; | |
| transition: .2s | |
| } | |
| /* animated number */ | |
| /*.animated-number:hover span { | |
| color: var(--accent3)!important; | |
| } | |
| */ | |
| /* read-more button hover */ | |
| .status__content__read-more-button { | |
| text-decoration: none !important; | |
| } | |
| /* post options */ | |
| .compose-form .text-icon-button:hover { | |
| background: none; | |
| } | |
| .compose-form__sensitive-button .checkbox, | |
| .compose-form__sensitive-button span, | |
| .compose-form__sensitive-button span:hover{ | |
| border-radius:0; | |
| border-color: var(--accent3); | |
| color: var(--accent4) | |
| } | |
| .compose-form__sensitive-button .checkbox.active{ | |
| border-color: var(--accent4); | |
| background-color: var(--accent4) | |
| } | |
| .text-icon-button.active { | |
| color: var(--text) | |
| } | |
| .drawer__inner .icon-button:hover, | |
| .icon-button.inverted.active.disabled, | |
| .account__action-bar-dropdown .icon-button:hover, | |
| .compose-form .compose-form__warning a, | |
| .compose-panel .compose-form__autosuggest-wrapper { | |
| background-color: var(--accent2); | |
| } | |
| /* privacy dropdown */ | |
| .privacy-dropdown__dropdown { | |
| border-radius: 0; | |
| background-color: var(--accent2); | |
| box-shadow: 0 0 0 | |
| } | |
| .privacy-dropdown__option.active .privacy-dropdown__option__content { | |
| background: none; | |
| color: var(--accent2); | |
| transition: none!important | |
| } | |
| .privacy-dropdown__option:hover .privacy-dropdown__option__content { | |
| background: none; | |
| color: var(--accent2); | |
| transition: none!important | |
| } | |
| .privacy-dropdown__option { | |
| background-color: var(--accent3); | |
| color: var(--bg); | |
| transition: none | |
| } | |
| .privacy-dropdown__option__content { | |
| color: var(--bg) | |
| } | |
| /* privacy dropdown button */ | |
| .privacy-dropdown.active .privacy-dropdown__value { | |
| background-color: var(--accent3); | |
| border-radius: 0; | |
| box-shadow: none; | |
| } | |
| /* cw button hover */ | |
| .text-icon-button:hover, | |
| .text-icon-button { | |
| border-radius: 0; | |
| background: none | |
| } | |
| .compose-form .text-icon-button:hover { | |
| color: var(--text) | |
| } | |
| /* compose form buttons hover */ | |
| .compose-form .icon-button:hover{ | |
| color: var(--text); | |
| background: none; | |
| } | |
| .compose-form .icon-button:focus{ | |
| background: none | |
| } | |
| /* polls */ | |
| .compose-form__poll-wrapper, | |
| .compose-form__poll-wrapper .poll__footer { | |
| border-color: var(--bg); | |
| } | |
| .poll__footer { | |
| color: var(--accent3); | |
| } | |
| .compose-form .compose-form__modifiers, | |
| .compose-form__upload-thumbnail, | |
| .focal-point__preview div{ | |
| color: var(--accent3); | |
| background-color: var(--bg); | |
| border-radius:0px !important; | |
| } | |
| /* compose poll */ | |
| .poll__input { | |
| border-color: var(--text); | |
| border-width: 2px | |
| } | |
| .poll__input.checkbox { | |
| border-radius: 0; | |
| } | |
| .poll__option input[type="text"] { | |
| color: var(--bg); | |
| border: none; | |
| border-radius: 0; | |
| background-color: #eee; | |
| border-color: #eee; | |
| border-width: 2px; | |
| } | |
| .poll__option input[type="text"]:focus { | |
| background-color: var(--textBold); | |
| border: none; | |
| } | |
| /* new option button */ | |
| .button.button-secondary { | |
| background-color: var(--accent3)!important; | |
| border-radius: 0; | |
| color: var(--text) !important | |
| } | |
| .poll__footer span { | |
| color: var(--text); | |
| } | |
| /* poll period dropdown */ | |
| .compose-form__poll-wrapper select { | |
| color: var(--accent3); | |
| border-radius: 0; | |
| border: none; | |
| background-color: #eee; | |
| padding: 5px 30px 6px 10px; | |
| } | |
| /* inverted (selected) composer buttons */ | |
| .icon-button.inverted.active { | |
| color: var(--text); | |
| } | |
| /* modals */ | |
| div.modal-root__modal.list-editor | |
| { | |
| border-radius: 0px !important; | |
| } | |
| div.modal-root__modal.list-editor | |
| .list-editor .account .icon-button:hover, | |
| .list-editor .account .icon-button:active, | |
| .list-editor .account .icon-button:focus, | |
| .report-modal__statuses .status__content a, | |
| .media-modal__close.icon-button:hover, | |
| .media-modal__close.icon-button:focus, | |
| /* public pages */ | |
| .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, | |
| /* mobile elements */ | |
| a.tabs-bar__link.active, | |
| a.tabs-bar__link:hover { | |
| background: var(--bg); | |
| text-decoration: none; | |
| color: var(--accent2); | |
| border-color: var(--accent6); | |
| border-radius: 30%; | |
| border-width: 1px; | |
| transition: .3s | |
| } | |
| .tabs-bar__link span:hover, | |
| .tabs-bar__link span:active { | |
| background: var(--bg); | |
| color: var(--accent2); | |
| transition: .2s; | |
| } | |
| .tabs-bar__link { | |
| border-width: 2px; | |
| border-color: var(--bg); | |
| border-radius: 30%; | |
| background: none; | |
| transition: .3s | |
| } | |
| a.tabs-bar__link { | |
| color: var(--accent6); | |
| } | |
| .column-link { | |
| background: none; | |
| color: var(--accent6)!important | |
| } | |
| .column-link:hover, | |
| .column-link:active{ | |
| transition: .3s; | |
| color: var(--accent3); | |
| background: none; | |
| } | |
| div.item-list .column-link{ | |
| background: none; | |
| color: var(--accent2)!important | |
| } | |
| div.item-list:active .column-link, | |
| div.item-list:hover .column-link { | |
| background: none; | |
| color: var(--text)!important; | |
| transition: .5s | |
| } | |
| .admin-wrapper .sidebar__toggle__logo { | |
| filter: grayscale(100%); | |
| } | |
| .admin-wrapper .sidebar__toggle { | |
| background-color: var(--bg); | |
| color: var(--accent3) | |
| } | |
| .admin-wrapper .sidebar__toggle__icon { | |
| color: var(--accent3) | |
| } | |
| .admin-wrapper .sidebar__toggle__icon:hover { | |
| background: none; | |
| color: var(--accent2) | |
| } | |
| /* center top bar */ | |
| .tabs-bar__wrapper { | |
| background-color: var(--bg); | |
| color: var(--bg) | |
| } | |
| .column-header__wrapper.active { | |
| box-shadow: var(--textBold); | |
| border: none!important | |
| } | |
| .column-header button { | |
| color: var(--accent3)!important | |
| } | |
| .tabs-bar__link.active { | |
| border-color: var(--accent3) !important; | |
| border-right: none; | |
| border-left: none | |
| } | |
| .tabs-bar { | |
| background-color: var(--bg)!important; | |
| border-bottom-color: var(--accent3); | |
| } | |
| /* notification */ | |
| .icon-with-badge__badge { | |
| background-color: var(--bg); | |
| border-radius: 50%; | |
| border-color: var(--bg); | |
| border-width: 0px | |
| } | |
| .conversation__unread { | |
| background-color: var(--accent2); | |
| } | |
| .conversation { | |
| border-color: var(--accent6); | |
| border-radius: 30%; | |
| } | |
| /* .notification__display-name, */ | |
| .notification__display-name:hover { | |
| color: var(--text); | |
| text-decoration: none !important; | |
| transition: .3s | |
| } | |
| .notification__message span{ | |
| color: var(--textMuted); | |
| } | |
| /*------------------------------------------------------------------------------ | |
| * FIXES | |
| * | |
| * Due to the extensive level of recolors, some elements will need slight fixes. | |
| * This section contains any overrides that are mostly necessary to beautify or | |
| * otherwise make elements look like they belong in the new palette. | |
| *------------------------------------------------------------------------------/ | |
| @media screen and (max-width: 600px) { | |
| .public-layout .public-account-header__bar | |
| {background: var(--bg)} | |
| .public-layout .public-account-header__tabs__name h1, | |
| .public-layout .public-account-header__extra__links a strong | |
| {color: var(--textBold)} | |
| .public-layout .public-account-header__extra__links a, | |
| .public-layout .public-account-header__tabs__name h1 small | |
| {color: var(--textMuted)} | |
| } | |
| @media screen and (max-width: 415px) { | |
| .public-layout .card-grid>div .card__bar | |
| {background: var(--bg)} | |
| .public-layout .card-grid>div .card__bar:active, | |
| .public-layout .card-grid>div .card__bar:focus, | |
| .public-layout .card-grid>div .card__bar:hover | |
| {background: var(--bgPage)} | |
| } | |
| /* transparent drawer / gs columns */ | |
| .getting-started, | |
| .getting-started__wrapper, | |
| /*.drawer__header,*/ | |
| .flex-spacer, | |
| .focusable:focus, | |
| .drawer__inner.darker { | |
| background: none !important | |
| } | |
| /* service footer */ | |
| .getting-started__footer { | |
| filter: opacity(10%) | |
| } | |
| .getting-started__footer:hover { | |
| filter: opacity(70%); | |
| transition: .7s; | |
| } | |
| .getting-started__footer a, | |
| .getting-started__footer p, | |
| .getting-started__footer p a { | |
| color: var(--textMuted) !important; | |
| } | |
| /*navigation dropdown menu */ | |
| .dropdown-menu__arrow.bottom { | |
| border-bottom-color: var(--accent2)!important | |
| } | |
| .dropdown-menu { | |
| background-color: var(--accent2)!important; | |
| border-radius: 0!important | |
| } | |
| .dropdown-menu__item a { | |
| background: var(--accent2) !important; | |
| color: var(--accent4) | |
| } | |
| .dropdown-menu__item a:hover { | |
| background-color: var(--textBold) !important; | |
| color: var(--accent4) | |
| } | |
| .navigation-bar, | |
| .navigation-bar__actions, | |
| .compose__action-bar.icon-button:focus { | |
| opacity: .6 !important | |
| } | |
| /* column header */ | |
| .column-header button { | |
| color: var(--acc) !important | |
| } | |
| /* gallery borders*/ | |
| .media-gallery, | |
| .media-gallery__item { | |
| border-radius: 0px !important; | |
| } | |
| .account-gallery__item { | |
| border-radius: 0px !important | |
| } | |
| /* make search results look better*/ | |
| .search__icon .fa.active { | |
| opacity: 0.5 | |
| } | |
| .drawer__inner { | |
| height: auto; | |
| } | |
| /* triangle tab popout (from toots/replies/media) */ | |
| .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 { | |
| border-color: transparent transparent var(--bg); | |
| border-radius: 0; | |
| } | |
| /* color trending taglines with accent color */ | |
| .trends__item__sparkline path { | |
| stroke: var(--accent) !important | |
| } | |
| /* hover feedback for buttons */ | |
| .button:hover, | |
| .block-button:hover, | |
| .simple_form button:hover, | |
| .compose-form__publish button:hover { | |
| color: var(--textBold) | |
| } | |
| /* fixes for 70ch maxwidths */ | |
| .landing-page__footer p { | |
| margin: 0 auto | |
| } | |
| /* remove black artefacts from settings menu */ | |
| .admin-wrapper .sidebar ul, | |
| .admin-wrapper .sidebar ul a, | |
| .admin-wrapper .sidebar ul a.selected, | |
| .admin-wrapper .sidebar ul ul { | |
| border-radius: 0; | |
| background: none; | |
| } | |
| /* make tables in settings look consistent //todo:cleanup */ | |
| .admin-wrapper .content h4 { | |
| padding: 8px; | |
| font-weight: 700; | |
| font-size: 16px | |
| } | |
| .table thead th, | |
| .table thead td { | |
| font-family: "Arial Black" | |
| } | |
| .table td:first-child, | |
| .table > tbody > tr:nth-child(odd) > td:first-child { | |
| background: var(--bg); | |
| color: #ddd | |
| } | |
| .column-inline-form label input { | |
| padding: 6px | |
| } | |
| /*--------------- | |
| public page fixes | |
| ---------------*/ | |
| /* colorize logo */ | |
| .landing-page__logo img { | |
| filter: sepia(100%) hue-rotate(160deg) saturate(400%) brightness(40%); | |
| mix-blend-mode: normal | |
| } | |
| /* add shadow to help with visibility on light bg */ | |
| .brand img { | |
| filter: drop-shadow(0px 0px 0px black) | |
| } | |
| /* footer logo recolor */ | |
| .public-layout .footer .brand svg path { | |
| fill: var(--textPageMuted) | |
| } | |
| .public-layout .footer .brand:hover svg path { | |
| fill: var(--accent) | |
| } | |
| /* cleanup stray background elements */ | |
| .endorsements-widget .account, | |
| .public-layout .header, | |
| .public-layout .public-account-header__bar .avatar img, | |
| .simple_form .input-with-append .append::after, | |
| .public-layout .header .brand:active, | |
| .public-layout .header .brand:focus, | |
| .public-layout .header .brand:hover, | |
| .input-copy { | |
| background: none; | |
| border-radius: 0; | |
| border: none; | |
| } | |
| /* flatten toots view */ | |
| .activity-stream, | |
| .activity-stream .entry:first-child .status, | |
| .activity-stream .entry:first-child .detailed-status, | |
| .activity-stream .entry:first-child .load-more, | |
| .activity-stream .entry:last-child .status, | |
| .activity-stream .entry:last-child .detailed-status, | |
| .activity-stream .entry:last-child .load-more, | |
| .public-layout .header, | |
| .nothing-here { | |
| box-shadow: none; | |
| border-radius: 0px | |
| } | |
| /* toots, following, followers */ | |
| .public-layout .public-account-header__tabs__tabs .counter::after { | |
| border-bottom: 0px solid var(--textMuted) | |
| } | |
| .public-layout .public-account-header__tabs__tabs .counter.active::after, | |
| .public-layout .public-account-header__tabs__tabs .counter:hover::after { | |
| border-bottom: 0px solid var(--accent) | |
| } | |
| /* make profile field keys bold */ | |
| .account__header__fields dt { | |
| font-weight: 700 | |
| } | |
| /* improve avatar and profile-card look */ | |
| .card__bar .avatar img { | |
| background: none | |
| } | |
| .card__img { | |
| background: var(--bg) | |
| } | |
| /*--------------- | |
| deal with borders | |
| ---------------*/ | |
| /* remove most borders */ | |
| .status-card, | |
| .setting-text, | |
| .flash-message.notice, | |
| .account__moved-note, | |
| .account__header__fields dl, | |
| .account__header .account__header__fields dl, | |
| .account__section-headline, | |
| .notification__filter-bar, | |
| .search-results__section h5, | |
| .public-layout .public-account-header__bar .avatar img, | |
| .public-layout .public-account-header__tabs__tabs .counter { | |
| border: none | |
| } | |
| /* recolor some other borders */ | |
| .account, | |
| .status, | |
| .status__wrapper--filtered, | |
| .load-gap, | |
| .loading-indicator__figure, | |
| .button.button-secondary, | |
| .account__header__fields, | |
| .account__header__fields dl:last-child, | |
| .account__action-bar, | |
| .account__action-bar__tab, | |
| .account__disclaimer, | |
| .admin-wrapper .content h4 { | |
| border: none | |
| } | |
| /* active tabs //check later */ | |
| .account__action-bar__tab { | |
| border-bottom: 0px solid transparent | |
| } | |
| .account__action-bar__tab.active, | |
| .tabs-bar__link.active { | |
| border-color: var(--textMuted); | |
| color: var(--accent2); | |
| } | |
| /* fix detailed status borders */ | |
| .detailed-status__action-bar { | |
| border-color: transparent transparent var(--bgPage) transparent !important; | |
| border-radius: 0; | |
| } | |
| /* domain blocks and report modal */ | |
| .domain, | |
| .report-modal__container, | |
| .report-modal__comment, | |
| .report-modal__comment:active, | |
| .report-modal__comment:focus, | |
| .report-modal__comment .setting-text, | |
| .status-check-box { | |
| border-color: transparent; | |
| border-radius: 0; | |
| } | |
| .domain .domain__domain-name { | |
| background: transparent; | |
| border-radius: 0; | |
| } | |
| .actions-modal, | |
| .block-modal, | |
| .boost-modal, | |
| .confirmation-modal, | |
| .mute-modal, | |
| .report-modal { | |
| border-radius: 0; | |
| } | |
| /* toggle button */ | |
| .react-toggle--checked .react-toggle-track { | |
| background-color: var(--accent3); | |
| } | |
| .react-toggle--checked .react-toggle-thumb { | |
| border-color: var(--textBold); | |
| } | |
| .react-toggle-thumb { | |
| border-width: 2px; | |
| } | |
| /*------------------------------------------------------------------------------ | |
| * ADDITIONS AND MODS | |
| * | |
| * Tweaks and redesigns that improve the look of the overall style. | |
| * These may be enabled or disabled, but are recommended to enable. | |
| * They may also be extensions, but not "miscellaneous" enough. | |
| *------------------------------------------------------------------------------/ | |
| /* | |
| * Add a line break between display name and account handle: | |
| * - this allows user/display names to expand more. | |
| */ | |
| .display-name__html { | |
| display: block; | |
| text-decoration:none !important | |
| } | |
| /* | |
| * Always show full name and handle: | |
| * - this removes the `...` and allows text to overflow past the column. | |
| * - this can look worse, but it can also prevent having to mouse over | |
| * to see the full name or handle. | |
| */ | |
| /* | |
| * Rounded avatars: | |
| * - adjust the border radius around all avatar elements. | |
| * - default override is 50% (i.e. turn squares into circles), | |
| * but you can set it to whatever you want. | |
| */ | |
| .card .avatar img, | |
| .activity-stream .status.light .status__avatar img, | |
| .account__avatar, | |
| .account__avatar-overlay-base, | |
| .account__avatar-overlay-overlay { | |
| border-radius: 50%; | |
| opacity: 45%; | |
| filter: grayscale(100%) | |
| } | |
| /* | |
| * Fade out faved/boosted toots in notifications: | |
| * - for "x favourited your toot" / "x boosted your toot", | |
| * - make the faved/boosted toot half-transparent. | |
| */ | |
| .status.muted { | |
| opacity: 0.8 | |
| } | |
| /* | |
| * Collapse fave/boost notifications | |
| * - limits display to just a few lines (~3), so you can at least identify it | |
| * - hides the display name, because you already know you posted it | |
| * - tighter margins, remove space between CW and content | |
| * - hides the buttons, but you can expand a status to interact with it | |
| */ | |
| .notification-favourite .status, | |
| .notification-reblog .status { | |
| max-height: 4em; | |
| overflow: hidden; | |
| } | |
| .notification-favourite .display-name, | |
| .notification-reblog .display-name { | |
| display: none; | |
| } | |
| .notification-favourite .status__content, | |
| .notification-reblog .status__content { | |
| margin-top: -4px; | |
| } | |
| .notification-favourite .status__content p, | |
| .notification-reblog .status__content p { | |
| margin-bottom: 0px; | |
| } | |
| .notification-favourite .status__action-bar, | |
| .notification-reblog .status__action-bar { | |
| display: none; | |
| } | |
| /* | |
| * Release elephant friend from their confines: | |
| * - elephant friend will now hang out in the corner of your browser, | |
| * instead of being trapped in the drawer. | |
| */ | |
| .drawer__inner, | |
| .drawer__inner__mastodon { | |
| background: none; | |
| z-index: 0 | |
| } | |
| .drawer__inner__mastodon > img { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| height: 180px; | |
| z-index: -1 | |
| } | |
| .drawer__inner { | |
| height: 100% | |
| } | |
| /* firefox bug highlights drawer text on click */ | |
| /* | |
| * Make "getting started" column height consistent with all other columns: | |
| * - puts the footer back at the bottom of the page, instead of floating. | |
| */ | |
| .getting-started { | |
| height: 100%; | |
| display: flex; | |
| flex-flow: column; | |
| justify-content: space-between | |
| } | |
| /* | |
| * Remove the checker-board background from the media modal: | |
| * - this makes transparent images actually transparent | |
| */ | |
| .media-modal canvas, | |
| .media-modal img { | |
| background: none; | |
| border-radius: 0; | |
| } | |
| /* | |
| * Fix glowing elements when there are new toots to be fetched | |
| * - this is technically a fix, but it hasn't been fully fixed. | |
| * //todo: try to find a way to make this look good against bgHead | |
| */ | |
| .column-header.active .column-header__icon { | |
| text-shadow: 0 0 0px var(--bg); | |
| } | |
| .column-header.active { | |
| box-shadow: 0 0 0; | |
| } | |
| .column-header__wrapper.active:before { | |
| background: radial-gradient(ellipse, var(--bg) 0, var(--bg) 30%); | |
| } | |
| /* | |
| * Fix highlights on unread DM conversations | |
| * - new conversations view in 2.6.0 | |
| * - 2.6.0 adds highlight, :not(.read) has its own bg | |
| * - instead, let's add a dot next to the timestamp | |
| */ | |
| .status.status-direct:not(.read) { | |
| background: var(--bg); | |
| } | |
| .column[aria-label="Direct messages"] .status.status-direct:not(.read) .status__relative-time:before { | |
| content: "? "; | |
| font-size: 1em; | |
| color: var(--accent); | |
| } | |
| .conversation.focusable.muted { | |
| background: var(--bg); | |
| } | |
| .conversation__avatar { | |
| filter: grayscale(100%) | |
| } | |
| .conversation__content__names { | |
| color: var(--textMuted) | |
| } | |
| .conversation__content__names a { | |
| color: var(--textBold) | |
| } | |
| .conversation__content__relative-time { | |
| color: var(--textMuted) | |
| } | |
| /* ------------------------------------------------------------ | |
| various tweaks related to making account view look a bit better | |
| -------------------------------------------------------------*/ | |
| /* profile field keys //todo */ | |
| .account__header .account__header__fields dd, | |
| .public-account-bio .account__header__fields dd { | |
| background: var(--bg); | |
| color: var(--text) | |
| } | |
| /* profile field values //todo */ | |
| .account__header .account__header__fields dt, | |
| .public-account-bio .account__header__fields dt { | |
| background: var(--bg); | |
| color: var(--text) | |
| } | |
| /* account h1 */ | |
| .account__header__tabs__name h1 { | |
| color: var(--textBold) | |
| } | |
| /* verified links */ | |
| .account__header .account__header__fields dd.verified { | |
| background: var(--bg) | |
| } | |
| /* bold profile field keys */ | |
| .account__header .account__header__fields dt { | |
| font-weight: 700 | |
| } | |
| /* view profile - shadow overlay style */ | |
| .account__header { | |
| background: var(--bgHead) | |
| } | |
| .account__header > div { | |
| background: var(--bg) | |
| } | |
| .account__header .account__header__display-name { | |
| color: #fff | |
| } | |
| .account__header .account__header__content { | |
| color: #eee | |
| } | |
| .account__header .account__header__content a, | |
| .account__header__fields a | |
| { | |
| color: var(--textMuted) !important; | |
| text-decoration: none !important | |
| } | |
| /* padded background around @handle */ | |
| .account__header .account__header__username { | |
| display: inline-block; | |
| padding: 7px 7px 8px 7px; | |
| border-radius: 0px; | |
| margin-bottom: 0px; | |
| background: var(--bg); | |
| color: var(--textMuted); | |
| } | |
| /* adjust margins to account for padding */ | |
| .account__header__content p { | |
| margin-bottom: 16px; | |
| } | |
| /* floating follow/edit profile button */ | |
| .account--action-button { | |
| background: rgba(255, 255, 255, 0.5); | |
| padding: 0.5em; | |
| border-radius: 0; | |
| } | |
| .account--action-button .icon-button, | |
| .account--action-button .icon-button.active { | |
| color: #fff; | |
| border-radius: 0px; | |
| } | |
| .account--action-button:hover { | |
| background: var(--accent) | |
| } | |
| .account--action-button:hover .icon-button { | |
| color: var(--accentText) | |
| } | |
| /* account page tab underline */ | |
| .card .counter.active:after { | |
| border-bottom: 0px solid var(--accent) | |
| } | |
| /* make footer logo visible against light bg */ | |
| .footer .powered-by a { | |
| filter: drop-shadow( 0px 0px 0px var(--textMuted)) | |
| } | |
| /* | |
| Hide buttons that can't be clicked | |
| - columns on /about and tag pages have buttons that don't work. | |
| - so, this snippet hides those nonworking buttons to save space | |
| - and to avoid confusion. | |
| - unboostable buttons are made transparent on hover instead. | |
| */ | |
| .status__action-bar .icon-button.disabled:hover, | |
| .notification-favourite .status.status-direct .icon-button.disabled:hover { | |
| color: transparent !important | |
| } | |
| #mastodon-timeline .status__action-bar { | |
| display: none | |
| } | |
| /*----------------------- | |
| material design overrides | |
| -----------------------*/ | |
| /* turn statuses into cards */ | |
| .drawer__inner.darker { | |
| filter: drop-shadow(0 0 0px rgb(68, 68, 68)); | |
| background: transparent | |
| } | |
| .status { | |
| box-shadow: 0px 0px 0px rgb(68, 68, 68); | |
| background: var(--bg); | |
| margin: 8px; | |
| border-radius: 0px; | |
| border: 0 | |
| } | |
| .status__wrapper--filtered { | |
| border: none | |
| } | |
| .detailed-status__wrapper { | |
| margin: 10px; | |
| } | |
| /*might look weird in older versions pre-2.6?*/ | |
| /* recolors */ | |
| .column > .scrollable, | |
| .landing-page #mastodon-timeline, | |
| .activity-stream .entry { | |
| background: none !important; | |
| border: none | |
| } | |
| .account-timeline__header, | |
| .account { | |
| background: var(--bg) | |
| } | |
| .notification .account, | |
| .load-more { | |
| background: var(--bgPage) | |
| } | |
| .status__prepend, | |
| .notification__message, | |
| .status__prepend .status__display-name strong { | |
| color: var(--textMuted) | |
| } | |
| .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) | |
| } | |
| .status__prepend > span:hover, | |
| div.status__prepend-icon-wrapper:hover { | |
| color: var(--textMuted); | |
| } | |
| /* 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) | |
| } | |
| /* fix rounding on end toots in stream */ | |
| .activity-stream .entry:first-child .status, | |
| .activity-stream .entry:last-child .status { | |
| border-radius: 0px | |
| } | |
| /* remove borders from account view */ | |
| .account, | |
| .account__header__fields, | |
| .account__header__fields dl:last-child, | |
| .account__action-bar, | |
| .account__action-bar__tab, | |
| .account__disclaimer { | |
| border: none | |
| } | |
| /*------------------------------------------------------------------------------ | |
| * 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 | |
| * | |
| ------------------------------------------------------------------------------*/ | |
| /* 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(0px 1px 0px rgba(0, 0, 0, 0.6)) | |
| } | |
| /* 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: var(--text); | |
| background: none | |
| } | |
| /* 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, | |
| /*.detailed-status__action-bar .detailed-status__button:nth-child(3) .icon-button:focus,*/ | |
| .notification__favourite-icon-wrapper .star-icon { | |
| color: var(--text); | |
| background: none | |
| } | |
| /* 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: var(--text); | |
| background: none | |
| } | |
| /* share */ | |
| .icon-button:hover .fa-share-alt { | |
| color: var(--textMuted); | |
| background: none | |
| } | |
| span.status__action-bar__counter__label:hover { | |
| color: var(--textMuted); | |
| background: none | |
| } | |
| /* boosts notifications */ | |
| .notification__message .fa.fa-retweet, | |
| .icon-button:hover .fa-retweet { | |
| color: var(--text)!important; | |
| /* background: none */ | |
| } | |
| /* remove icon backgrounds */ | |
| .status__action-bar-button.icon-button--with-counter, | |
| .status__action-bar-button.icon-button, | |
| .status__action-bar-dropdown .icon-button { | |
| background:none | |
| } | |
| .status__action-bar-button.icon-button--with-counter:focus, | |
| .status__action-bar-button.icon-button:focus, | |
| .status__action-bar-dropdown .icon-button:focus{ | |
| color: var(--textMuted); | |
| } | |
| /* recolor boosts */ | |
| i.fa.fa-retweet.fa-fw { | |
| filter: grayscale(100%) brightness(120%) !important | |
| } | |
| i.fa.fa-retweet.fa-fw:hover{ | |
| filter: grayscale(100%) brightness(200%)!important; | |
| transition: .3s | |
| } | |
| button.status__action-bar-button.icon-button.active, | |
| .icon.button.active i.fa.fa-retweet.fa-fw, | |
| button.icon-button.active i.fa-retweet{ | |
| filter: grayscale(100%) brightness(200%)!important; | |
| transition: .9s | |
| } | |
| button.icon-button.active i.fa-retweet:focus{ | |
| filter: grayscale(100%) brightness(120%) !important | |
| } | |
| /* hover to hide disabled button */ | |
| button.icon-button.disabled i.fa-retweet:hover { | |
| filter: grayscale(100%) opacity(60%); | |
| transition: .5s !important; | |
| } | |
| /* */ | |
| strong.navigation-bar__profile-account { | |
| color: var(--textmuted) | |
| } | |
| /*getting started footer */ | |
| div.getting-started__footer { | |
| color: var(--textMuted) | |
| } | |
| div.getting-started__footer span:hover { | |
| color: var(--textMuted); | |
| text-decoration: none; | |
| } | |
| /* buttons */ | |
| button.icon-button { | |
| border: 0px; | |
| border-radius: 0px; | |
| background: none !important; | |
| } | |
| div.status__prepend { | |
| color: var(--textMuted); | |
| filter: opacity(70%) | |
| } | |
| /* announcements */ | |
| div.announcements { | |
| background-color: var(--accent2) | |
| } | |
| .announcements__item__content a.unhandled-link { | |
| color: teal | |
| } | |
| .announcements__item__content a { | |
| color: teal | |
| } | |
| .tabs-bar__link.active { | |
| border-color: var(--textMuted) | |
| } | |
| .tabs-bar__link { | |
| color: var(--textMuted); | |
| border-width: 2px; | |
| } | |
| /* fade banner image */ | |
| img.parallax { | |
| filter: opacity(20%) grayscale(50%) | |
| } | |
| /**/ | |
| .reactions-bar__item { | |
| background-color: var(--text); | |
| border-radius: 50%; | |
| } | |
| .reactions-bar__item__count { | |
| color: var(--accent3) | |
| } | |
| .reactions-bar .emoji-button { | |
| color: var(--accent4) | |
| } | |
| div.detailed-status__button { | |
| background-color: var(--bg); | |
| } | |
| .detailed-status { | |
| background-color: var(--bg); | |
| } | |
| div.drawer__inner__mastodon { | |
| filter: opacity(0); | |
| } | |
| /* timeline hint*/ | |
| .timeline-hint, | |
| .timeline-hint span:hover { | |
| color: var(--accent2) | |
| } | |
| .timeline-hint a, | |
| .timeline-hint a:hover { | |
| color: var(--accent2)!important; | |
| } | |
| div.trends__header, | |
| div.trends__header span:hover { | |
| background-color: var(--bg); | |
| border: none; | |
| color: var(--accent3) | |
| } | |
| /* fix double column head on list page // todo*/ | |
| .column-header h1 {display:none !important; | |
| } | |
| /* loading animations */ | |
| .no-reduce-motion .loading-indicator__figure, | |
| .loading-bar{ | |
| background-color: var(--accent2)!important; | |
| color: var(--accent2)!important; | |
| border-color: var(--textBold)!important; | |
| border-radius: 0px !important | |
| } | |
| div.status__wrapper.status__wrapper-public { | |
| border-color: var(--textBold) | |
| } | |
| /* unread notification left border color // not working */ | |
| div.notifications-bar-message, | |
| div.notification-bar.notification-bar-active { | |
| border-radius: 0px !important; | |
| } | |
| div.notification.notification-reblog.focusable.unread, | |
| div.status__wrapper.status__wrapper-direct.unread.focusable, | |
| div.status__wrapper.status__wrapper-private.focusable, | |
| div.item-list article, | |
| .status.status-direct:not(.read){ | |
| border-color: var(--textBold) !important; | |
| border-radius: 30% !important; | |
| } | |
| /* follow request page */ | |
| .account__header__content { | |
| color: var(--textBold) | |
| } | |
| .account--panel { | |
| background-color: var(--accent4); | |
| border-color: var(--accent4); | |
| } | |
| .notifications-permission-banner{ | |
| border-color: var(--accent3) | |
| } | |
| .notifications-permission-banner p,.notifications-permission-banner span:hover{ | |
| color: var(--textMuted); | |
| } | |
| /* directory list */ | |
| .radio-button__input.checked { | |
| background-color: var(--accent2); | |
| border-color: var(--accent2) | |
| } | |
| .radio-button__input{ | |
| border-color: var(--accent2) | |
| } | |
| .filter-form, | |
| .directory__card__bar, | |
| .directory__card__extra{ | |
| background: none; | |
| } | |
| .directory__card__extra .account__header__content{ | |
| border: none; | |
| } | |
| .directory__card__bar .display-name span { | |
| color: var(--textMuted); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment