f444a8a29b
* edit colors to better fit the catppuccin color scheme guides the colors of the headerbar did looked off on the mobile view when compared to other apps with catppuccin. this commit aims to fix it * mastodon: bump version --------- Co-authored-by: Isabel <71222764+isabelroses@users.noreply.github.com>
633 lines
17 KiB
CSS
633 lines
17 KiB
CSS
/* ==UserStyle==
|
|
@name Mastodon Catppuccin
|
|
@namespace github.com/catppuccin/userstyles/styles/mastodon
|
|
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/mastodon
|
|
@version 1.1.7
|
|
@description Soothing pastel theme for Mastodon
|
|
@author Catppuccin
|
|
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mastodon/catppuccin.user.css
|
|
@license MIT
|
|
|
|
@preprocessor less
|
|
@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
|
|
@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
|
|
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire*", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
|
|
==/UserStyle== */
|
|
@-moz-document domain("mstdn.social"),
|
|
domain("fosstodon.org"),
|
|
domain("tech.lgbt"),
|
|
domain("mastodon.social"),
|
|
domain("piaille.fr") {
|
|
|
|
.theme-mastodon-light,
|
|
.skin-mastodon-light {
|
|
#mastodon(@lightFlavor, @accentColor);
|
|
}
|
|
|
|
.theme-contrast,
|
|
.skin-contrast {
|
|
#mastodon(@darkFlavor, @accentColor);
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
.theme-default,
|
|
.skin-default {
|
|
#mastodon(@lightFlavor, @accentColor);
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.theme-default,
|
|
.skin-default {
|
|
#mastodon(@darkFlavor, @accentColor);
|
|
}
|
|
}
|
|
|
|
#mastodon(@lookup, @accent) {
|
|
@catppuccin: {
|
|
@latte: {
|
|
@rosewater: #dc8a78;
|
|
@flamingo: #dd7878;
|
|
@pink: #ea76cb;
|
|
@mauve: #8839ef;
|
|
@red: #d20f39;
|
|
@maroon: #e64553;
|
|
@peach: #fe640b;
|
|
@yellow: #df8e1d;
|
|
@green: #40a02b;
|
|
@teal: #179299;
|
|
@sky: #04a5e5;
|
|
@sapphire: #209fb5;
|
|
@blue: #1e66f5;
|
|
@lavender: #7287fd;
|
|
@text: #4c4f69;
|
|
@subtext1: #5c5f77;
|
|
@subtext0: #6c6f85;
|
|
@overlay2: #7c7f93;
|
|
@overlay1: #8c8fa1;
|
|
@overlay0: #9ca0b0;
|
|
@surface2: #acb0be;
|
|
@surface1: #bcc0cc;
|
|
@surface0: #ccd0da;
|
|
@base: #eff1f5;
|
|
@mantle: #e6e9ef;
|
|
@crust: #dce0e8;
|
|
}
|
|
@frappe: {
|
|
@rosewater: #f2d5cf;
|
|
@flamingo: #eebebe;
|
|
@pink: #f4b8e4;
|
|
@mauve: #ca9ee6;
|
|
@red: #e78284;
|
|
@maroon: #ea999c;
|
|
@peach: #ef9f76;
|
|
@yellow: #e5c890;
|
|
@green: #a6d189;
|
|
@teal: #81c8be;
|
|
@sky: #99d1db;
|
|
@sapphire: #85c1dc;
|
|
@blue: #8caaee;
|
|
@lavender: #babbf1;
|
|
@text: #c6d0f5;
|
|
@subtext1: #b5bfe2;
|
|
@subtext0: #a5adce;
|
|
@overlay2: #949cbb;
|
|
@overlay1: #838ba7;
|
|
@overlay0: #737994;
|
|
@surface2: #626880;
|
|
@surface1: #51576d;
|
|
@surface0: #414559;
|
|
@base: #303446;
|
|
@mantle: #292c3c;
|
|
@crust: #232634;
|
|
}
|
|
@macchiato: {
|
|
@rosewater: #f4dbd6;
|
|
@flamingo: #f0c6c6;
|
|
@pink: #f5bde6;
|
|
@mauve: #c6a0f6;
|
|
@red: #ed8796;
|
|
@maroon: #ee99a0;
|
|
@peach: #f5a97f;
|
|
@yellow: #eed49f;
|
|
@green: #a6da95;
|
|
@teal: #8bd5ca;
|
|
@sky: #91d7e3;
|
|
@sapphire: #7dc4e4;
|
|
@blue: #8aadf4;
|
|
@lavender: #b7bdf8;
|
|
@text: #cad3f5;
|
|
@subtext1: #b8c0e0;
|
|
@subtext0: #a5adcb;
|
|
@overlay2: #939ab7;
|
|
@overlay1: #8087a2;
|
|
@overlay0: #6e738d;
|
|
@surface2: #5b6078;
|
|
@surface1: #494d64;
|
|
@surface0: #363a4f;
|
|
@base: #24273a;
|
|
@mantle: #1e2030;
|
|
@crust: #181926;
|
|
}
|
|
@mocha: {
|
|
@rosewater: #f5e0dc;
|
|
@flamingo: #f2cdcd;
|
|
@pink: #f5c2e7;
|
|
@mauve: #cba6f7;
|
|
@red: #f38ba8;
|
|
@maroon: #eba0ac;
|
|
@peach: #fab387;
|
|
@yellow: #f9e2af;
|
|
@green: #a6e3a1;
|
|
@teal: #94e2d5;
|
|
@sky: #89dceb;
|
|
@sapphire: #74c7ec;
|
|
@blue: #89b4fa;
|
|
@lavender: #b4befe;
|
|
@text: #cdd6f4;
|
|
@subtext1: #bac2de;
|
|
@subtext0: #a6adc8;
|
|
@overlay2: #9399b2;
|
|
@overlay1: #7f849c;
|
|
@overlay0: #6c7086;
|
|
@surface2: #585b70;
|
|
@surface1: #45475a;
|
|
@surface0: #313244;
|
|
@base: #1e1e2e;
|
|
@mantle: #181825;
|
|
@crust: #11111b;
|
|
}
|
|
}
|
|
|
|
@rosewater: @catppuccin[@@lookup][@rosewater];
|
|
@flamingo: @catppuccin[@@lookup][@flamingo];
|
|
@pink: @catppuccin[@@lookup][@pink];
|
|
@mauve: @catppuccin[@@lookup][@mauve];
|
|
@red: @catppuccin[@@lookup][@red];
|
|
@maroon: @catppuccin[@@lookup][@maroon];
|
|
@peach: @catppuccin[@@lookup][@peach];
|
|
@yellow: @catppuccin[@@lookup][@yellow];
|
|
@green: @catppuccin[@@lookup][@green];
|
|
@teal: @catppuccin[@@lookup][@teal];
|
|
@sky: @catppuccin[@@lookup][@sky];
|
|
@sapphire: @catppuccin[@@lookup][@sapphire];
|
|
@blue: @catppuccin[@@lookup][@blue];
|
|
@lavender: @catppuccin[@@lookup][@lavender];
|
|
@text: @catppuccin[@@lookup][@text];
|
|
@subtext1: @catppuccin[@@lookup][@subtext1];
|
|
@subtext0: @catppuccin[@@lookup][@subtext0];
|
|
@overlay2: @catppuccin[@@lookup][@overlay2];
|
|
@overlay1: @catppuccin[@@lookup][@overlay1];
|
|
@overlay0: @catppuccin[@@lookup][@overlay0];
|
|
@surface2: @catppuccin[@@lookup][@surface2];
|
|
@surface1: @catppuccin[@@lookup][@surface1];
|
|
@surface0: @catppuccin[@@lookup][@surface0];
|
|
@base: @catppuccin[@@lookup][@base];
|
|
@mantle: @catppuccin[@@lookup][@mantle];
|
|
@crust: @catppuccin[@@lookup][@crust];
|
|
@accent-color: @catppuccin[@@lookup][@@accent];
|
|
|
|
&,
|
|
.tabs-bar__wrapper,
|
|
.admin-wrapper .sidebar-wrapper__inner,
|
|
.ui__header{
|
|
background: @crust;
|
|
color: @text;
|
|
}
|
|
|
|
.ui__header {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.navigation-panel {
|
|
background: transparent;
|
|
}
|
|
|
|
.account__header__bio .account__header__fields dt {
|
|
background: transparent;
|
|
}
|
|
|
|
.search-popout,
|
|
.search-popout em,
|
|
.dismissable-banner__message,
|
|
.dismissable-banner__message h1,
|
|
.account__header__bio .account__header__fields dt,
|
|
.account__section-headline a.active,
|
|
.account__section-headline button.active,
|
|
.notification__filter-bar a.active,
|
|
.notification__filter-bar button.active,
|
|
.account__header__bio .account__header__content,
|
|
.navigation-bar,
|
|
.column-link__badge,
|
|
.column-subheading,
|
|
.account__display-name strong,
|
|
.status__display-name strong,
|
|
.notification__message,
|
|
.public-layout .public-account-bio .account__header__content,
|
|
.reply-indicator__content,
|
|
.status__content,
|
|
.card__bar .display-name strong {
|
|
color: @text;
|
|
}
|
|
|
|
|
|
.search-popout span,
|
|
.link-footer p,
|
|
.link-footer p a {
|
|
color: @subtext1;
|
|
}
|
|
|
|
.account__header__tabs__name h1 small,
|
|
.account__header__bio .account__header__fields dd,
|
|
.display-name__account,
|
|
.status__relative-time,
|
|
.empty-column-indicator,
|
|
.follow_requests-unlocked_explanation,
|
|
.account .account__display-name,
|
|
.label_input .search__input,
|
|
.search__input:focus,
|
|
.account__header__fields dt {
|
|
color: @subtext0
|
|
}
|
|
|
|
.compose-panel hr,
|
|
.navigation-panel hr {
|
|
border-top-color: @subtext0
|
|
}
|
|
|
|
.trends__item,
|
|
.status,
|
|
.getting-started__trends h4,
|
|
.trends__item__name span,
|
|
.story {
|
|
border-color: @surface0
|
|
}
|
|
|
|
|
|
.account__header__tabs__name h1,
|
|
.account__header__content a,
|
|
.account__header__bio .account__header__fields a,
|
|
.empty-column-indicator a,
|
|
.follow_requests-unlocked_explanation a,
|
|
.column-back-button,
|
|
.icon-button.inverted,
|
|
.text-icon-button,
|
|
.icon-button.active,
|
|
.public-layout .public-account-bio .account__header__fields a,
|
|
.column-header__back-button,
|
|
.navigation-bar strong,
|
|
.reply-indicator__content a.unhandled-link,
|
|
.status__content a.unhandled-link {
|
|
color: @accent-color;
|
|
}
|
|
|
|
.icon-button,
|
|
.notification__message .fa {
|
|
color: @surface2;
|
|
}
|
|
|
|
|
|
.icon-button:active,
|
|
.icon-button:focus,
|
|
.icon-button:hover,
|
|
.text-icon-button:active,
|
|
.text-icon-button:focus,
|
|
.text-icon-button:hover,
|
|
.icon-button.inverted:active,
|
|
.icon-button.inverted:focus,
|
|
.icon-button.inverted:hover,
|
|
.public-layout .public-account-bio .account__header__fields a:hover {
|
|
color: @accent-color;
|
|
}
|
|
|
|
.column-header,
|
|
.column-header__button,
|
|
.column-header__back-button,
|
|
.column-back-button,
|
|
.drawer__header,
|
|
.account__section-headline,
|
|
.notification__filter-bar,
|
|
.account__section-headline button,
|
|
.notification__filter-bar button,
|
|
.account__header,
|
|
.search__input,
|
|
.search__input:focus,
|
|
.column-link__badge,
|
|
.column-subheading,
|
|
.public-layout .header,
|
|
.public-layout .public-account-header__bar::before,
|
|
.account__header__fields,
|
|
.account__header__fields dt,
|
|
.account__header__fields dd:not(.account__header__bio .account__header__fields dd),
|
|
.focusable:focus,
|
|
.admin-wrapper .sidebar ul .simple-navigation-active-leaf .selected {
|
|
border-color: @crust;
|
|
background: @surface0;
|
|
}
|
|
|
|
.admin-wrapper .sidebar ul a:hover,
|
|
.admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover {
|
|
background: @surface0;
|
|
}
|
|
|
|
.dismissable-banner {
|
|
border-color: @surface1;
|
|
background: @base;
|
|
}
|
|
|
|
.theme-mastodon-light .account__header__bar,
|
|
.theme-mastodon-light .column-header__back-button,
|
|
.account__header__bio .account__header__fields dl,
|
|
.account__header__bio .account__header__fields,
|
|
.empty-column-indicator,
|
|
.column > .scrollable,
|
|
.nothing-here,
|
|
.public-layout .public-account-bio,
|
|
.hero-widget__text,
|
|
&.admin,
|
|
.admin-wrapper .sidebar ul a.selected,
|
|
.admin-wrapper .sidebar ul ul {
|
|
border-color: @mantle;
|
|
background: @base;
|
|
}
|
|
|
|
|
|
.public-layout .public-account-header__tabs__tabs .counter::after {
|
|
border-color: @accent-color;
|
|
}
|
|
|
|
.public-layout .public-account-header__tabs__tabs .counter.active::after {
|
|
border-color: @accent-color;
|
|
}
|
|
|
|
.account,
|
|
.load-gap {
|
|
border-color: @mantle;
|
|
}
|
|
|
|
.account__section-headline a.active::after {
|
|
border-color: transparent transparent @base;
|
|
}
|
|
|
|
.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 @mantle;
|
|
}
|
|
|
|
.search-popout,
|
|
.drawer__header a:hover,
|
|
.column-header__button:hover,
|
|
.account__section-headline button:hover,
|
|
.notification__filter-bar button:hover,
|
|
.account__section-headline a:hover {
|
|
background: @surface2;
|
|
}
|
|
|
|
.column-link .active,
|
|
.column-link--transparent.active,
|
|
.column-link--transparent:focus,
|
|
.column-link:focus {
|
|
color: @accent-color;
|
|
}
|
|
|
|
.column-link--transparent:hover,
|
|
.column-link:hover {
|
|
color: @accent-color;
|
|
}
|
|
|
|
.status.collapsed .status__content:after {
|
|
background: linear-gradient(fadeout(@base, 100), @base);
|
|
}
|
|
|
|
.button.button-tertiary:focus,
|
|
.button.button-tertiary:hover,
|
|
.button.button-tertiary:active {
|
|
color: @base;
|
|
}
|
|
|
|
.button.button-tertiary {
|
|
border-color: @accent-color;
|
|
}
|
|
|
|
.button,
|
|
.button.button-tertiary,
|
|
.button.logo-button {
|
|
background: @accent-color;
|
|
color: @base;
|
|
}
|
|
|
|
.button.logo-button svg {
|
|
fill: currentColor;
|
|
}
|
|
|
|
|
|
.public-layout .header .nav-button {
|
|
background-color: @surface1;
|
|
}
|
|
|
|
.public-layout .header .nav-button:hover {
|
|
background-color: @surface2;
|
|
}
|
|
|
|
.button.button-secondary {
|
|
background-color: transparent;
|
|
color: @text;
|
|
border-color: @accent-color;
|
|
}
|
|
.button.button-secondary:active,
|
|
.button.button-secondary:focus,
|
|
.button.button-secondary:hover {
|
|
border-color: @accent-color;
|
|
color: @base;
|
|
transition: .2s;
|
|
}
|
|
|
|
.button:active,
|
|
.button:focus,
|
|
.button:hover,
|
|
.button.button-tertiary:active,
|
|
.button.button-tertiary:focus,
|
|
.button.button-tertiary:hover,
|
|
.button.logo-button:active,
|
|
.button.logo-button:focus,
|
|
.button.logo-button:hover {
|
|
background: @accent-color;
|
|
}
|
|
|
|
.drawer__inner,
|
|
.drawer__inner__mastodon {
|
|
background-color: @base;
|
|
}
|
|
|
|
.compose-form .compose-form__modifiers,
|
|
.compose-form .autosuggest-textarea__textarea,
|
|
.compose-form .compose-form__autosuggest-wrapper,
|
|
.compose-form .spoiler-input__input {
|
|
background: @surface1 !important;
|
|
color: @text !important;
|
|
}
|
|
|
|
.compose-form .autosuggest-textarea__textarea::placeholder {
|
|
color: @subtext0
|
|
}
|
|
|
|
.compose-form .compose-form__buttons-wrapper {
|
|
background: @surface0;
|
|
}
|
|
|
|
.load-more:hover {
|
|
background-color: @mantle;
|
|
}
|
|
|
|
.character-counter {
|
|
color: @subtext0
|
|
}
|
|
|
|
.public-layout .header,
|
|
.hero-widget,
|
|
.public-layout .public-account-header,
|
|
.public-layout .public-account-bio,
|
|
.nothing-here {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.search__popout,
|
|
.dropdown-menu__arrow:before,
|
|
.dropdown-menu__item a,
|
|
.dropdown-menu__item button,
|
|
.dropdown-menu__container__list,
|
|
.dropdown-menu.bottom {
|
|
background: @surface0;
|
|
color: @text;
|
|
}
|
|
|
|
.dropdown-menu__item a:hover,
|
|
.dropdown-menu__item button:hover {
|
|
background: @surface1;
|
|
}
|
|
|
|
.input-copy,
|
|
.simple_form input[type=text],
|
|
.simple_form textarea,
|
|
.simple_form .block-button,
|
|
.simple_form .button,
|
|
.simple_form button {
|
|
background: @mantle;
|
|
color: @text;
|
|
}
|
|
|
|
.simple_form .block-button:hover,
|
|
.simple_form .button:hover,
|
|
.simple_form button:hover {
|
|
background: @surface0;
|
|
}
|
|
|
|
.simple_form .input.with_label .label_input > label,
|
|
.simple_form select,
|
|
.accounts-table__count,
|
|
.simple_form textarea {
|
|
color: @text;
|
|
}
|
|
|
|
.simple_form textarea,
|
|
.simple_form input[type=password],
|
|
.simple_form input[type=number],
|
|
.simple_form input[type=text] {
|
|
border: 1px solid @crust;
|
|
}
|
|
|
|
.simple_form input[type=email]:required:valid {
|
|
border: 1px solid @green
|
|
}
|
|
|
|
.simple_form input[type=password],
|
|
.simple_form input[type=number],
|
|
.simple_form input[type=email]:required:valid,
|
|
.simple_form input[type=password]:required:invalid:not(:placeholder-shown) {
|
|
color: @text;
|
|
background: @mantle;
|
|
}
|
|
|
|
.simple_form input[type=password]:required:invalid:not(:placeholder-shown) {
|
|
border: 1px solid @red;
|
|
}
|
|
|
|
.simple_form select {
|
|
background: @mantle url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='%2342485A'/></svg>") no-repeat right 8px center/auto 16px;
|
|
border: 1px solid @crust;
|
|
}
|
|
|
|
.simple_form input[type=datetime-local]:active,
|
|
.simple_form input[type=datetime-local]:focus,
|
|
.simple_form input[type=email]:active,
|
|
.simple_form input[type=email]:focus,
|
|
.simple_form input[type=number]:active,
|
|
.simple_form input[type=number]:focus,
|
|
.simple_form input[type=password]:active,
|
|
.simple_form input[type=password]:focus,
|
|
.simple_form input[type=text]:active,
|
|
.simple_form input[type=text]:focus,
|
|
.simple_form input[type=url]:active,
|
|
.simple_form input[type=url]:focus,
|
|
.simple_form textarea:active,
|
|
.simple_form textarea:focus {
|
|
border-color: @accent-color !important;
|
|
background: @mantle !important;
|
|
color: @text !important;
|
|
}
|
|
|
|
.table > thead > tr > th {
|
|
border-color: @accent-color !important;
|
|
}
|
|
|
|
.batch-table__toolbar,
|
|
.table > thead > tr > th {
|
|
background: @surface0 !important;
|
|
color: @text !important;
|
|
}
|
|
|
|
.simple_form input[type=datetime-local]:hover,
|
|
.simple_form input[type=email]:hover,
|
|
.simple_form input[type=number]:hover,
|
|
.simple_form input[type=password]:hover,
|
|
.simple_form input[type=text]:hover,
|
|
.simple_form input[type=url]:hover,
|
|
.simple_form textarea:hover {
|
|
background: @mantle !important;
|
|
border-color: @accent-color !important;
|
|
transition: 0.4s;
|
|
}
|
|
|
|
.batch-table__row {
|
|
background: @surface1;
|
|
}
|
|
|
|
.batch-table__row:hover,
|
|
.batch-table__row:nth-child(2n):hover {
|
|
background: @surface2;
|
|
}
|
|
|
|
.batch-table__row:nth-child(2n),
|
|
.table > tbody > tr > td {
|
|
background: @surface0;
|
|
}
|
|
|
|
.table > thead > tr > th {
|
|
border-bottom: 2px solid @surface0;
|
|
}
|
|
|
|
.positive-hint {
|
|
color: @green !important;
|
|
}
|
|
|
|
.card__bar {
|
|
background: @surface0;
|
|
}
|
|
}
|
|
}
|