From b1fcbda96aa474b8fedcaab0a84714ee8c583142 Mon Sep 17 00:00:00 2001 From: clov Date: Wed, 10 Aug 2022 19:51:54 +0200 Subject: [PATCH] Add latest version of `Deep Blue` (who may need a new name) --- Mastodon/DeepBlue.css | 536 ++++++++++++++++++++++++++++++++++++++++++ README.md | 5 + 2 files changed, 541 insertions(+) create mode 100644 Mastodon/DeepBlue.css create mode 100644 README.md diff --git a/Mastodon/DeepBlue.css b/Mastodon/DeepBlue.css new file mode 100644 index 0000000..819aba6 --- /dev/null +++ b/Mastodon/DeepBlue.css @@ -0,0 +1,536 @@ +/* ==UserStyle== +@name Deep Blue, Color Scheme for Mastodon +@namespace github.com/openstyles/stylus +@version 0.10.3 +@author Clovis Gauzy +@license BSD-4-Clause +@preprocessor less +@updateURL https://framagit.org/snippets/3588/raw + +@var color deep "Highlights Color" hsl(208, 100%, 50%) +==/UserStyle== */ + +@-moz-document regexp("^https:\\/\\/(switter\\.at|sinblr\\.com|social\\.tchncs\\.de|(travelpandas|mamot|diaspodon)\\.fr|(baraag|(music\\.)?pawoo)\\.net|friends\\.nico|framapiaf\\.org|(dissidents|hostux|humblr|octodon)\\.social|mstdn|maly\\.(fr|io|jp)|mastodon\\.(tedomum\\.net|xyz|social|technology|online))\\/.*") { + + html { + 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 { + 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 { + 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 { + background-color: lighten(@deep, 15%); + } + + + .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; + } + + .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,"); + } +} + + diff --git a/README.md b/README.md new file mode 100644 index 0000000..42926bc --- /dev/null +++ b/README.md @@ -0,0 +1,5 @@ +# User Styles + +Collection of custom CSS to enhance web usage. + +Work well with *Stylus*. ^^