Updated for 4.1.3
parent
2ded0858d9
commit
7117e3cb51
|
|
@ -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%);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue