diff --git a/Mastodon/DeepBlue.css b/Mastodon/DeepBlue.css
index b4b39f2..9ec4114 100644
--- a/Mastodon/DeepBlue.css
+++ b/Mastodon/DeepBlue.css
@@ -1,568 +1,582 @@
/* ==UserStyle==
@name Deep Blue, Color Scheme for Mastodon
@namespace github.com/openstyles/stylus
-@version 0.15.0
+@version 0.16.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%);
-
- .status__content {
- scrollbar-color: lighten(@deep, 15%) 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,
- .block-modal__container select, .confirmation-modal__container select, .mute-modal__container select, .report-modal__target select,
- 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,
- .boost-modal__action-bar,
- .confirmation-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,
- .report-dialog-modal,
- .actions-modal, .block-modal, .boost-modal, .compare-history-modal, .confirmation-modal, .mute-modal, .report-modal {
- 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,
- .account__header__account-note textarea:focus {
- 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,
- .block-modal__container select, .confirmation-modal__container select, .mute-modal__container select, .report-modal__target select {
- 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,
- .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
- }
-
-
- .status__content a {
- color: darken(@deep, 20%)
- }
-
- .status__content a span {
- 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,
- .react-toggle--checked .react-toggle-track {
- background-color: @deep;
- }
-
- .simple_form .block-button:disabled, .simple_form .button:disabled, .simple_form button:disabled,
- .button:disabled,
- .react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track
- {
- background-color: darken(@deep, 35%);
- }
-
- .simple_form .block-button:disabled:hover, .simple_form .button:disabled:hover, .simple_form button:disabled:hover,
- .button:disabled:hover,
- .react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
- 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,
- .account__header__account-note textarea {
- 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 {
+
+ :root {
+ --g8: hsl(0, 0%, 8%);
+ --g20: hshsl(0, 0%, 20%);
- background-image: url("data:image/svg+xml;utf8,");
+ --dropdown-background-color: hsl(0, 0%, 10%);
+ --dropdown-border-color: hsl(0, 0%, 5%);
+ --dropdown-shadow: .1em .1em .25em hsl(0, 0%, 0%);
+ --dropdown-dangerous-color: @deep;
+ }
+
+ #mastodon {
+
+ scrollbar-color: var(--g20) var(--g8);
+
+ .status__content {
+ scrollbar-color: lighten(@deep, 15%) var(--g8);
+ }
+
+ .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,
+ .spoiler-button__overlay,
+ .media-gallery__gifv__label {
+ 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,
+ .block-modal__container select, .confirmation-modal__container select, .mute-modal__container select, .report-modal__target select,
+ 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: var(--g8);
+ }
+ .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,
+ .boost-modal__action-bar,
+ .confirmation-modal__action-bar,
+ .mute-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,
+ .report-dialog-modal,
+ .actions-modal, .block-modal, .boost-modal, .compare-history-modal, .confirmation-modal, .mute-modal, .report-modal{
+ 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,
+ .account__header__account-note textarea:focus {
+ background-color: var(--g20)
+ }
+
+ .poll__text input[type="text"],
+ .compose-form__poll-wrapper select,
+ .compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input,
+ .block-modal__container select, .confirmation-modal__container select, .mute-modal__container select, .report-modal__target select {
+ 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,
+ .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,
+ .status__content a,
+ .status__content a span {
+ 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,
+ .react-toggle--checked .react-toggle-track {
+ background-color: @deep;
+ }
+
+ .simple_form .block-button:disabled, .simple_form .button:disabled, .simple_form button:disabled,
+ .button:disabled,
+ .react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track
+ {
+ background-color: darken(@deep, 35%);
+ }
+
+ .simple_form .block-button:disabled:hover, .simple_form .button:disabled:hover, .simple_form button:disabled:hover,
+ .button:disabled:hover,
+ .react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
+ 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,
+ .hashtag-bar 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,
+ .account__header__account-note textarea {
+ 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,");
+ }
+ }
+ }
+
+ .dropdown-menu__item--dangerous {
+ color: var(--dropdown-dangerous-color)
}
-}
-}
-
-
diff --git a/Mastodon/QuickTweak.css b/Mastodon/QuickTweak.css
index 55373c4..4625627 100644
--- a/Mastodon/QuickTweak.css
+++ b/Mastodon/QuickTweak.css
@@ -1,7 +1,7 @@
/* ==UserStyle==
@name Quick Tweak Mastodon
@namespace github.com/openstyles/stylus
-@version 0.15.1
+@version 0.16.0
@author Clovis Gauzy
@license BSD-4-Clause
@preprocessor less
@@ -266,7 +266,71 @@
.fa.fa-unlock:before {
content: "🔓";
}
+ .status-card__content {
+ padding: .75em .5em
+
+ }
+ .status-card__author, .status-card__host, .status-card__description {
+ font-size: .7em;
+ }
+ .status-card__host {
+ margin-bottom: .5em;
+ font-style: italic;
+ }
+
+ .status-card__title {
+ font-size: .9em;
+ line-height: normal;
+ font-weight: 600;
+ }
+
+ * {
+ aspect-ratio: auto!important;
+ }
+ .spoiler-button__overlay span {
+ display: inline;
+ margin-left: .25em;
+ padding: 0;
+ }
+
+ .media-gallery__gifv__label,
+ .status__line {
+ display: none;
+ }
+ .spoiler-button {
+ opacity: .5;
+ }
+ .media-gallery:hover .spoiler-button {
+ display: inherit;
+ opacity: 1;
+ }
+
+ .compose-form__highlightable.active {
+ box-shadow: none;
+ }
+
+ .hashtag-bar {
+ font-size: .9em;
+ font-weight: 100;
+
+ .link-button {
+ font-weight: inherit;
+ }
+ }
+
+ .status--in-thread .attachment-list,
+ .status--in-thread .audio-player,
+ .status--in-thread .hashtag-bar,
+ .status--in-thread .media-gallery,
+ .status--in-thread .picture-in-picture-placeholder,
+ .status--in-thread .status-card,
+ .status--in-thread .status__action-bar,
+ .status--in-thread .status__content,
+ .status--in-thread .video-player {
+ margin: 0;
+ width: 100%;
+ }
}
@@ -285,7 +349,5 @@
max-height: 21em;
overflow-y: visible;
scrollbar-width: auto;
- }
-
+ }
}
-