diff --git a/Mastodon/DeepBlue.css b/Mastodon/DeepBlue.css index 9956739..b4b39f2 100644 --- a/Mastodon/DeepBlue.css +++ b/Mastodon/DeepBlue.css @@ -1,7 +1,7 @@ /* ==UserStyle== @name Deep Blue, Color Scheme for Mastodon @namespace github.com/openstyles/stylus -@version 0.11.0 +@version 0.15.0 @author Clovis Gauzy @license BSD-4-Clause @preprocessor less @@ -14,8 +14,12 @@ #mastodon { - scrollbar-color: hsl(0, 0%, 20%) hsl(0, 0%, 8%); - + 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; @@ -129,6 +133,7 @@ .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%) } @@ -239,7 +244,9 @@ .drawer__inner.darker, .account, .account__header__image, - .block-modal__action-bar { + .block-modal__action-bar, + .boost-modal__action-bar, + .confirmation-modal__action-bar, background-color: hsl(0, 0%, 10%); } @@ -276,7 +283,9 @@ .card__bar, .page-header, .privacy-dropdown__option, - .reply-indicator { + .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%); } @@ -290,13 +299,15 @@ .focusable:focus, .status-card:hover, a.status-card.compact:hover, .muted .poll__chart, - .compose-form .autosuggest-textarea__suggestions__item.selected { + .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 { + .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%) } @@ -400,12 +411,20 @@ .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 } + + + .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%) @@ -427,17 +446,21 @@ .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 { + .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 { + .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 { + .button:disabled:hover, + .react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track { background-color: darken(@deep, 30%); } @@ -476,7 +499,8 @@ } .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 { + .status__content a:hover, .status__content a:active, .status__content a:focus, + .account__header__account-note textarea { color: lighten(@deep, 15%); } diff --git a/Mastodon/QuickTweak.css b/Mastodon/QuickTweak.css index 05c084a..2cf2e4f 100644 --- a/Mastodon/QuickTweak.css +++ b/Mastodon/QuickTweak.css @@ -1,312 +1,291 @@ /* ==UserStyle== @name Quick Tweak Mastodon @namespace github.com/openstyles/stylus -@version 0.11.0 +@version 0.15.0 @author Clovis Gauzy @license BSD-4-Clause @preprocessor less @updateURL https://dev.clov.fr/clov/UserStyles/src/branch/monster/Mastodon/QuickTweak.css + +@var text pouet "Pouet, toot, whateverโ€ฆ" Pouat ! ==/UserStyle== */ @-moz-document regexp(".*") { - - /* - body { - - } - body.with-modals--active { - margin-right: 1em; - } - body.error .dialog { - margin: 1.5em; - } - - body.error .dialog h1 { - font-size: 1.75em; - line-height: 1.15 - } - body.app-body.layout-multiple-columns { - width: auto; - height: auto; - top: 0; - bottom: 0; - left: 0; - right: 0; - overflow: hidden!important; - } */ + + html:has(#mastodon), + body:has(#mastodon) { + font-size: 150%; + } -#mastodon { - font-size: 1rem; + #mastodon { + font-size: 1rem; line-height: 1; margin: 0; padding: 0; - .ui { - overflow: auto; - overflow-x: hidden; - } - .columns-area { - display: flex; - flex-flow: row nowrap; - - } - .column, - .drawer { - padding: 0!important; - width: auto; - margin: 0 1px; - } - .column { - flex: 1; - min-width: 21em; - } - .drawer { - flex: .75; - min-width: 16em; - max-width: 21em; - } + .ui { + overflow: auto; + overflow-x: hidden; + } + .columns-area { + display: flex; + flex-flow: row nowrap; - .container-alt { - width: 50em; - margin: 3em auto 0; - } + } + .column, + .drawer { + padding: 0!important; + width: auto; + margin: 0 1px; + } + .column { + flex: 1; + min-width: 22em; + } + .drawer { + flex: .75; + min-width: 18em; + max-width: 22em; + } - .column-header__buttons { - height: auto; - } + .container-alt { + width: 50em; + margin: 3em auto 0; + } - .notification__message, - .status__prepend, - .embed .status, .public-layout .status, - .status { - padding: .5em; - min-height: 0; - } -/* - .embed .status__avatar, .public-layout .status__avatar, - .status__avatar { - float: left; - position: relative; - left: 0; - top: 0; - height: 3.75em; - width: 3.75em; - background-size: cover - } - .account__avatar { - width: 1em; - height: 1em!important; - } - .embed .account__avatar-overlay, .public-layout .account__avatar-overlay, - .account__avatar-overlay { - height: 3.8em; - width: 3.8em; - } - .embed .account__avatar-overlay-base, .public-layout .account__avatar-overlay-base, - .account__avatar-overlay-base { - height: 3.2em; - width: 3.2em; - background-size: cover - }*/ - .embed .account__avatar-overlay-base, .public-layout .account__avatar-overlay-base, - .account__avatar-overlay-overlay { - /* - z-index: 10; - top: -1.15em; - left: .33em; - height: 1.25em; - width: 1.25em; - background-size: cover; - right: .25em; */ - opacity: .6; - /* border-radius: .33em!important; */ - } + .column-header__buttons { + height: auto; + } - .muted .status__avatar { - opacity: 1; - } - .account__section-headline a, .account__section-headline button, .notification__filter-bar a, .notification__filter-bar button { - padding: .5em 0 .5em; - } - .reply-indicator__content, .status__content { - font-size: .9rem; - line-height: 1.25; - padding-top: .5em; - } - .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-width: 0 .4em .4em; - } + .notification__message, + .status__prepend, + .embed .status, .public-layout .status, + .status { + padding: .5em; + min-height: 0; + } - .media-gallery { - min-height: 3em; - height: auto!important; - border-radius: .33em; - } - .media-gallery__item-gifv-thumbnail { - top: 0; - transform: none; - } - .media-spoiler { - height: 6em!important; - } - .status__content__read-more-button { - text-align: center; - font-size: .9em; - width: 100%; - } + .embed .account__avatar-overlay-base, .public-layout .account__avatar-overlay-base, + .account__avatar-overlay-overlay { + opacity: .6; + } - .status__wrapper, .status__wrapper--filtered { - font-size: 1em; - } - .status__wrapper--filtered { - padding: .5em - } + .muted .status__avatar { + opacity: 1; + } + .account__section-headline a, .account__section-headline button, .notification__filter-bar a, .notification__filter-bar button { + padding: .5em 0 .5em; + } + .reply-indicator__content, .status__content { + font-size: .9rem; + line-height: 1.25; + padding-top: .5em; + } + .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-width: 0 .4em .4em; + } - .drawer__header, - .search { - font-size: .9em; - margin-bottom: 0 - } - .drawer__tab { - padding: .25em; - } + .media-gallery { + min-height: 3em; + height: auto!important; + border-radius: .33em; + } + .media-gallery__item-gifv-thumbnail { + top: 0; + transform: none; + } + .media-spoiler { + height: 6em!important; + } - .search__input { - padding: .75em; - padding-right: 2.5em; - font-size: .9em; - } - .search__icon .fa { - top: .5em; - right: .5em; - font-size: 1.2em; - width: 1em; - height: 1em; - } + .status__content__read-more-button { + text-align: center; + font-size: .9em; + width: 100%; + } - .navigation-bar { - padding: .5em; - } + .status__wrapper, .status__wrapper--filtered { + font-size: 1em; + } + .status__wrapper--filtered { + padding: .5em + } - .status__action-bar { - justify-content: flex-end; - } + .drawer__header, + .search { + font-size: .9em; + margin-bottom: 0 + } + .drawer__tab { + padding: .25em; + } - .column-back-button, - .column-header { - font-size: .9em; - } - .column-back-button, - .column-header > button { - padding: .5em; - } - .column-header__button { - margin: 0; - padding: .25em .5em; - } + .search__input { + padding: .75em; + padding-right: 2.5em; + font-size: .9em; + } + .search__icon .fa { + top: .5em; + right: .5em; + font-size: 1.2em; + width: 1em; + height: 1em; + } - .status-card { - margin-top: 1.25em; - border-radius: .33em; - } - .status-card.compact .status-card__image { - flex-basis: 6em; - } + .navigation-bar { + padding: .5em; + } - .reply-indicator__content, .status__content { - display: inline; - hyphens: auto; - } - .detailed-status, .detailed-status__action-bar { - background-color: inherit; - padding: .5em; - } + .status__action-bar { + justify-content: flex-end; + } - .reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link { - float: right; - } - .status__info { - margin-bottom: .5em; - } - .display-name__account { - display: block; - font-weight: 300; - font-size: .85em; - padding: .2em 0 .1em; - } - .reply-indicator__content p, .status__content p { - margin-bottom: .75em; - } + .column-back-button, + .column-header { + font-size: .9em; + } + .column-back-button, + .column-header > button { + padding: .5em; + } + .column-header__button { + margin: 0; + padding: .25em .5em; + } - .account__header__image { - height: 12em - } - .account__header__fields dd, .account__header__fields dt { - padding: .5em - } + .status-card { + margin-top: 1.25em; + border-radius: .33em; + } + .status-card.compact .status-card__image { + flex-basis: 6em; + } + + .reply-indicator__content, .status__content { + display: inline; + hyphens: auto; + } + .detailed-status, .detailed-status__action-bar { + background-color: inherit; + padding: .5em; + } + + .reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link { + float: right; + } + .status__info { + margin-bottom: .5em; + } + .display-name__account { + display: block; + font-weight: 300; + font-size: .85em; + padding: .2em 0 .1em; + } + .reply-indicator__content p, .status__content p { + margin-bottom: .75em; + } + + .account__header__image { + height: 12em + } + .account__header__fields dd, .account__header__fields dt { + padding: .5em + } + + .media-gallery { + display: grid!important; + grid-template: auto / auto auto; + } + + .media-gallery__item { + height: auto!important; + width: 100%!important; + min-height: 1em; + } + .media-gallery__item:only-of-type, + .media-gallery__item:nth-child(2):last-child { + grid-column: 1 / 3; + + } + .poll__chart { + margin: 0 -.5em; + border-radius: 0 .33em .33em 0; + } + + .public-layout .public-account-header__tabs__tabs .counter { + border: none!important; + } + + .column-back-button--slim-button { + position: initial + } + + .compose-form { + padding: .25rem; + } + + .compose-form .autosuggest-textarea__textarea { + padding: .5em; + } + + .compose-form .emoji-picker-dropdown { + top: -2em; + } + .compose-form__warning { + display: none; + } + + .getting-started__footer { + font-size: .9em; + padding: 1em; + } - .media-gallery { - display: grid!important; - grid-template: auto / auto auto; - } - - .media-gallery__item { - height: auto!important; - width: 100%!important; - min-height: 1em; - } - .media-gallery__item:only-of-type, - .media-gallery__item:nth-child(2):last-child { - grid-column: 1 / 3; - - } - .poll__chart { - margin: 0 -.5em; - border-radius: 0 .33em .33em 0; - } - - .public-layout .public-account-header__tabs__tabs .counter { - border: none!important; - } - - .column-back-button--slim-button { - position: initial - } - - .compose-form { - padding: .25rem; - } - - .compose-form .autosuggest-textarea__textarea { - padding: .5em; - } - - .compose-form .emoji-picker-dropdown { - top: -2em; - } - .compose-form__warning { - display: none; - } - - .getting-started__footer { - font-size: .9em; - padding: 1em; - } - article, .drawer__pager, .notification-favourite, .notification-reblog, .status__wrapper-direct, .notification-follow, .notification-poll, .notification__filter-bar, .notification__filter-bar .active, .announcements, .column-header__collapsible-inner, .getting-started__footer, .search__input, .drawer__header, .drawer__header a:hover, .column-header, .load-more, [aria-label="Accueil"] .column-header { - border: none; - border-radius: 0!important; + border: none; + border-radius: 0!important; + } + + .account__header__bio .account__header__fields dl { + padding: 0; + } + + .status .status__info abbr:before{ + content: "๐Ÿ“"; + padding-left: .5em; + } + + .fa.fa-globe:before { + content: "๐ŸŒ"; + } + .fa.fa-lock:before { + content: "๐Ÿ”’"; + } + .fa.fa-unlock:before { + content: "๐Ÿ”“"; + } + + } - - -} - - .emoji-mart-scroll { + .emoji-mart-scroll { height: auto; max-height: calc(100vh - 30em); } + + button.button--block::after { + content: var(--pouet); + } + + .status__content { + display: block!important; + max-height: 21em; + overflow-y: visible; + scrollbar-width: auto; + } + }