/* ==UserStyle== @name Deep Blue, Color Scheme for Mastodon @namespace github.com/openstyles/stylus @version 0.11.0 @author Clovis Gauzy @license BSD-4-Clause @preprocessor less @updateURL https://dev.clov.fr/clov/UserStyles/raw/branch/monster/Mastodon/DeepBlue.css @var color deep "Highlights Color" hsl(208, 100%, 50%) ==/UserStyle== */ @-moz-document regexp(".*") { #mastodon { scrollbar-color: hsl(0, 0%, 20%) hsl(0, 0%, 8%); .reply-indicator__content, .status__content { line-height: 1.2; font-weight: 300; } .reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link { color: #000; } .status__wrapper--filtered, .account__header__tabs__name h1 small, .status__prepend, .poll__footer, .poll__link, .status__action-bar__counter__label, .icon-button.disabled, .account__section-headline, .notification__filter-bar, .search__input, .account__section-headline button, .notification__filter-bar button, .column-link__badge, .column-subheading, .column-link { color: hsl(0, 0%, 30%); } .text-icon-button, .empty-column-indicator, .error-column, .icon-button, .notification__relative_time, .status__relative-time, .deactivate .fa, .status__visibility-icon .fa { color: hsl(0, 0%, 35%); } button.icon-button i.fa-retweet svg path, button.icon-button.disabled i.fa-retweet svg path, button.icon-button:hover i.fa-retweet svg path, .public-layout .footer .brand svg path { fill: hsl(0, 0%, 35%)!important; } .nothing-here, .public-layout .footer ul a, .privacy-dropdown__option__content, .compose-form .compose-form__warning, .reply-indicator, .column-settings__hashtags .column-select__clear-indicator, .column-settings__hashtags .column-select__dropdown-indicator:hover, .getting-started__footer p, .status__display-name, .column-settings__hashtags .column-select__placeholder, .search__input::placeholder{ color: hsl(0, 0%, 40%); } .account__header__content, .button.logo-button, .account__header__fields dt, .directory__tag h4 small, .accounts-table__count small, .account .account__display-name, .compose-form__poll-wrapper .button.button-secondary, .load-more, .column-link, .compose-form__sensitive-button .icon-button, .compose-form .compose-form__buttons-wrapper .character-counter__wrapper .character-counter, .icon-button.inverted { color: hsl(0, 0%, 50%); } .filters .filter-subset a, .hero-widget__text, .hero-widget__text a, .page-header p, .public-layout .footer h4, .public-layout .footer .grid .column-2 h4 a, .fa-retweet, .muted .poll, .search-results__header, .icon-button:active, .icon-button:focus, .icon-button:hover, .column-header__setting-btn, .column-settings__hashtags .column-select__clear-indicator, .column-settings__hashtags .column-select__dropdown-indicator, .getting-started__footer a, .compose-form .autosuggest-textarea__textarea::placeholder, .compose-form .spoiler-input__input::placeholder { color: hsl(0, 0%, 60%); } .public-layout .footer .brand:active svg path, .public-layout .footer .brand:focus svg path, .public-layout .footer .brand:hover svg path { fill: hsl(0, 0%, 60%); } .admin-wrapper .content .muted-hint, body .muted-hint, .simple_form .hint, .simple_form p.hint { color: hsl(0, 0%, 70%); } .trends__item__name, .account__header__extra__links a, .account__section-headline a, .account__section-headline button, .notification__filter-bar a, .notification__filter-bar button, .notice-widget, .status__content--with-spoiler > p > span, .text-icon-button:active, .text-icon-button:focus, .text-icon-button:hover, .search-results__section h5, .drawer__tab, .account__section-headline button:hover, .notification__filter-bar button:hover, .column-link:hover, .column-subheading, .muted .status__content a, .muted .status__content p, .muted .status__display-name strong, .notification__message { color: hsl(0, 0%, 75%) } .admin-wrapper .sidebar ul a, .public-layout .header .nav-link, .account__header__bio .account__header__content, .account__header__fields dd, .compose-form .autosuggest-textarea__suggestions, .privacy-dropdown__option__content strong, .dropdown-menu, .getting-started__trends h4, .reply-indicator__display-name, .column-header__setting-btn:hover, .setting-toggle__label, .column-settings__section, div { color: hsl(0, 0%, 80%) } .search__input, .search-popout, .compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input, .status-card__title { color: hsl(0, 0%, 85%) } .button.button-secondary, .admin-wrapper .content h6, .public-layout .public-account-bio .account__header__content, .directory__tag h4, .account__display-name strong, .status__display-name strong, .compose-form .autosuggest-textarea__suggestions__item.selected .display-name, .block-modal__cancel-button, .confirmation-modal__cancel-button, .confirmation-modal__secondary-button, .mute-modal__cancel-button { color: hsl(0, 0%, 90%) } .getting-started__trends .trends__item__current, .button.button-secondary:hover, .button.button-secondary:active, .button.button-secondary:focus, .column-link__badge, .admin-wrapper .content h4, .search-popout h4, .public-layout .header .nav-link:active, .public-layout .header .nav-link:focus, .public-layout .header .nav-link:hover, .account__header__extra__links a strong, .account__header__tabs__name h1, .detailed-status__display-name strong, .page-header h1, .muted .poll__chart.leading, .muted .poll__chart.leading .poll__text, .compose-form .autosuggest-textarea__suggestions__item.selected .display-name__account, .poll__text input[type="text"], .simple_form select, .compose-form__poll-wrapper select, .trends__item__name a, .button.logo-button:active, .button.logo-button:focus, .button.logo-button:hover, .column-header__button:hover, .column-header__button.active:hover, .reply-indicator__content .status__content__spoiler-link:hover, .status__content .status__content__spoiler-link:hover, .drawer__tab:hover, .compose-form .compose-form__buttons-wrapper, .compose-form .compose-form__modifiers, .reply-indicator__content, .status__content, .column-settings__hashtags .column-select__control, .account-header .name, .logo-container h1 a, .navigation-bar strong { color: #fff; } /* --- */ body, body.admin, body.app-body, .public-layout, .compose-form .compose-form__warning, .getting-started__trends, .ui { background-color: hsl(0, 0%, 0%) } .public-layout .public-account-header__bar .avatar img, .avatar-stack .account__avatar, .search__input, .drawer__tab, .column-header__button, .drawer__header, .column-header, .column-back-button, .column-header__back-button { background-color: hsl(0, 0%, 5%); } .box-widget, .contact-widget, .landing-page__information.contact-widget, .search-results__header, .search-results__section h5, .account__header__fields dt, .account__section-headline, .notification__filter-bar, .account__section-headline button, .notification__filter-bar button, .column-link__badge, .column-subheading, .column-link { background-color: hsl(0, 0%, 6%); } .compose-form .autosuggest-textarea__suggestions, .load-more, .empty-column-indicator, .error-column { background-color: hsl(0, 0%, 7%); } .admin-wrapper .sidebar-wrapper__inner, .public-layout .public-account-bio, .public-layout .header, .drawer__pager, .drawer__inner, .drawer__inner__mastodon, .account__header__bar { background-color: hsl(0, 0%, 8%); } .hero-widget__text, .activity-stream .entry, .regeneration-indicator, .column-header__button:hover, .column-header__button.active:hover, .drawer__tab:hover, .column-settings__hashtags .column-select__control, .column > .scrollable, .flex-spacer, .getting-started, .getting-started__wrapper { background-color: hsl(0, 0%, 9%); } .table td, .table th, .batch-table__row, .admin-wrapper .sidebar ul ul a, .simple_form select, .simple_form input[type="email"], .simple_form input[type="number"], .simple_form input[type="password"], .simple_form input[type="text"], .simple_form textarea, .nothing-here, .directory, .drawer__inner.darker, .account, .account__header__image, .block-modal__action-bar { background-color: hsl(0, 0%, 10%); } .load-more:hover { background-color: hsl(0, 0%, 11%); } .account--panel, .table > tbody > tr:nth-child(2n+1) > td, .table > tbody > tr:nth-child(2n+1) > th, .table.inline-table > tbody > tr:nth-child(2n+1) > td, .table.inline-table > tbody > tr:nth-child(2n+1) > th, .batch-table__row:nth-child(2n), .admin-wrapper .sidebar ul a:hover, .directory__tag > a, .status.status-direct:not(.read), .status.status-direct.read, .column-header__collapsible-inner, .column-header__button.active, .column-header__button:hover, .column-back-button:hover, .column-header__back-button:hover, a.status-card.compact, .status-card, .block-modal, .dismissable-banner { background-color: hsl(0, 0%, 12%) } .compose-form .compose-form__buttons-wrapper, .compose-form .compose-form__modifiers { background-color: hsl(0, 0%, 13%) } .admin-wrapper .sidebar ul a.selected, .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 { background-color: hsl(0, 0%, 14%); } .card__bar, .page-header, .privacy-dropdown__option, .reply-indicator { background-color: hsl(0, 0%, 15%); } .flash-message, .table thead th, .batch-table__toolbar, .search-popout, .search__input:focus, .drawer__header a:active, .drawer__header a:focus,.drawer__header a:hover, .directory__tag > a:active, .directory__tag > a:focus, .directory__tag > a:hover, .focusable:focus, .status-card:hover, a.status-card.compact:hover, .muted .poll__chart, .compose-form .autosuggest-textarea__suggestions__item.selected { background-color: hsl(0, 0%, 20%) } .poll__text input[type="text"], .compose-form__poll-wrapper select, .compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input { background-color: hsl(0, 0%, 27%) } .column-link, .getting-started__footer, .announcements, .column-header__collapsible-inner, .getting-started__footer, .column-header__button.active, .column-header__button.active:hover, .column-header__collapsible-inner, .drawer__tab:hover, .search__input, .column-header__back-button { background-color: transparent!important } .upload-area, .modal-root__overlay { background-color: hsla(0, 0%, 0%, .8)!important; transition: background 1s; } /* --- */ .public-layout .public-account-header__tabs__tabs .counter, .dismissable-banner { border-color: hsl(0, 0%, 7%); } .status__wrapper--filtered, .account--panel, .account__header__tabs__buttons .icon-button, .accounts-table tbody td, .search-results__section h5, .trends__item, .account, .account__header__bar, .account__header__bio .account__header__fields, .account__header__fields dl, .drawer__tab, .status, .detailed-status, .detailed-status__action-bar, .status-card, .status-card.compact, .load-gap, .status.status-direct:not(.read) { border-color: hsl(0, 0%, 0%); } /* --- */ .column-header__button, .column-header__button.active { color: inherit; } .accounts-table .account, .status-card__image, .detailed-status, .detailed-status__action-bar, .account__section-headline button:hover, .notification__filter-bar button:hover, .column-link:hover { background-color: inherit; } .search-popout em, .icon-button.active, .notification__message .fa, .account__section-headline a.active, .account__section-headline button.active, .notification__filter-bar a.active, .notification__filter-bar button.active, .column-back__button { color: @deep; fill: @deep; } .column-link__badge, .simple_form .block-button:hover, .simple_form .button:hover, .simple_form button:hover { background-color: @deep; } .account__section-headline a.active::after, .account__section-headline a.active::before, .account__section-headline button.active::after, .account__section-headline button.active::before, .notification__filter-bar a.active::after, .notification__filter-bar a.active::before, .notification__filter-bar button.active::after, .notification__filter-bar button.active::before { border-color: transparent transparent @deep; } .public-layout .public-account-header__bar .avatar img, .avatar-stack .account__avatar { border-color: hsl(0, 0%, 18%); /*border-image: linear-gradient(to bottom, black, @deep) 1 100%; */ } .compose-form__poll-wrapper .button.button-secondary, .poll__input { border-color: darken(@deep, 35%, relative); } .button.button-secondary { border-color: darken(@deep, 40%, relative); } .poll__input.active, .button.button-secondary:hover, .button.button-secondary:active, .button.button-secondary:focus, .admin-wrapper .content h4, .public-layout .public-account-header__tabs__tabs .counter::after, .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, .status-card:hover, .public-layout .public-account-header__tabs__tabs .counter.active::after, .poll__text input[type="text"]:focus, .account__section-headline, .notification__filter-bar, .status-card:hover, a.status-card.compact:hover { border-color: @deep; } .reply-indicator__content a.unhandled-link, .status__content a.unhandled-link, .column-header__back-button, .column-back-button, .account__header__bio .account__header__fields a, .column-header.active .column-header__icon, .column-header > .column-header__back-button, .account .account__display-name, .text-icon-button.active, .reply-indicator__content a, .status__content a, .trends__item__name a, .muted .status__content a:hover, .muted .status__content a:active, .muted .status__content a:focus, a.table-action-link, button.table-action-link { color: @deep } .column-header.active .column-header__icon { text-shadow: 0 0 .75em lighten(@deep, 15%) } .react-toggle--checked .react-toggle-track, .react-toggle--checked .react-toggle-track { /*color: hsl(208, 100%, 50%);*/ color: hsl(0, 50%, 50%); } .poll__input.active, .simple_form .block-button, .simple_form .button, .simple_form button, .admin-wrapper .sidebar ul .simple-navigation-active-leaf a, .muted .poll__chart.leading, .button, /*.button:active, .button:focus, .button:hover,*/ .privacy-dropdown__option.active, .privacy-dropdown__option:hover, privacy-dropdown__option.active:hover, .button.logo-button:active, .button.logo-button:focus, .button.logo-button:hover, .reply-indicator__content .status__content__spoiler-link:hover, .status__content .status__content__spoiler-link:hover { background-color: @deep; } .simple_form .block-button:disabled, .simple_form .button:disabled, .simple_form button:disabled, .button:disabled { background-color: darken(@deep, 35%); } .simple_form .block-button:disabled:hover, .simple_form .button:disabled:hover, .simple_form button:disabled:hover, .button:disabled:hover { background-color: darken(@deep, 30%); } .admin-wrapper .sidebar ul .simple-navigation-active-leaf a:active, .admin-wrapper .sidebar ul .simple-navigation-active-leaf a:focus, .admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover, .poll__chart { background-color: lighten(@deep, 15%); } .poll__chart.leading { background-color: @deep; } .status__prepend .status__display-name strong, .status__content__read-more-button { color: darken(@deep, 20%); } .account__header__content a, .status__content a { color: darken(@deep, 5%); text-decoration: none; } .status__wrapper--filtered__button, .directory__tag h4 .fa, .status__content__read-more-button:hover, .status__content__read-more-button:active, .status__content__read-more-button:focus, .focusable:focus { color: darken(@deep, 10%); } .compose-form__sensitive-button .icon-button.active, .getting-started__footer p a, .icon-button.inverted:active, .icon-button.inverted:focus, .icon-button.inverted:hover { color: darken(@deep, 15%); } .account__header__content a:hover, .account__header__content a:active, .account__header__content a:focus, .status__content a:hover, .status__content a:active, .status__content a:focus { color: lighten(@deep, 15%); } .attachment-list__list a, .attachment-list.compact .fa { color: darken(@deep, 35%) } .trends__item__sparkline path:first-child { fill: darken(@deep, 75%, relative)!important; } .trends__item__sparkline path:last-child { stroke: @deep!important; } .account__header__fields .verified { border: none!important; background-color: hsl(106, 15%, 15%) } .reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link, .button.logo-button, .button.logo-button.disabled:active, .button.logo-button.disabled:focus, .button.logo-button.disabled:hover, .button.logo-button:disabled:active, .button.logo-button:disabled:focus, .button.logo-button:disabled:hover { background-color: hsl(0, 0%, 25%) } .poll__text input[type="text"], .compose-form__poll-wrapper, .compose-form__poll-wrapper .poll__footer, .compose-form__poll-wrapper select, .account__avatar, .account__avatar-overlay-base, .account__avatar-overlay-overlay { border: none!important; } .column-header__wrapper.active { box-shadow: none } .column-header__wrapper.active::before { top: -.1em; width: 100%; height: 3.25em; background: radial-gradient(ellipse,darken(@deep, 25%) 0,rgba(0,0,0,0) 75%); } .status__wrapper--filtered { font-size: 0.75em; font-style: italic; } .getting-started__footer p:after { content: ' Deep Blue Color Scheme by Clovis Gauzy.' } .status__content--with-spoiler > p > span { font-style: italic } button.icon-button i.fa-retweet { background-image: url("data:image/svg+xml;utf8,"); } } }