diff --git a/styles/mastodon/catppuccin.user.css b/styles/mastodon/catppuccin.user.css index 8684c644ea..ae515d8667 100644 --- a/styles/mastodon/catppuccin.user.css +++ b/styles/mastodon/catppuccin.user.css @@ -6,7 +6,7 @@ @description Soothing pastel theme for Mastodon @author Catppuccin @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mastodon/catppuccin.user.css -@license MIT +@license MIT @preprocessor less @var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] @@ -16,25 +16,33 @@ @-moz-document domain("mstdn.social"), domain("fosstodon.org"), domain("tech.lgbt"), -domain("mastodon.social") { +domain("mastodon.social"), +domain("piaille.fr") { + .theme-mastodon-light, - :root:has(.theme-mastodon-light), - .skin-mastodon-light, - :root:has(.skin-mastodon-light) { + .skin-mastodon-light { #mastodon(@lightFlavor, @accentColor); } - .theme-default, .theme-contrast, - :root:has(.theme-default), - :root:has(.theme-contrast), - .skin-default, - .skin-contrast, - :root:has(.skin-default), - :root:has(.skin-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: { @@ -64,7 +72,7 @@ domain("mastodon.social") { @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; - }; + } @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @@ -92,7 +100,7 @@ domain("mastodon.social") { @base: #303446; @mantle: #292c3c; @crust: #232634; - }; + } @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @@ -120,7 +128,7 @@ domain("mastodon.social") { @base: #24273a; @mantle: #1e2030; @crust: #181926; - }; + } @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @@ -148,8 +156,8 @@ domain("mastodon.social") { @base: #1e1e2e; @mantle: #181825; @crust: #11111b; - }; - }; + } + } @rosewater: @catppuccin[@@lookup][@rosewater]; @flamingo: @catppuccin[@@lookup][@flamingo]; @@ -177,9 +185,9 @@ domain("mastodon.social") { @base: @catppuccin[@@lookup][@base]; @mantle: @catppuccin[@@lookup][@mantle]; @crust: @catppuccin[@@lookup][@crust]; - @accent-Color: @catppuccin[@@lookup][@@accent]; + @accent-color: @catppuccin[@@lookup][@@accent]; - body, + &, .tabs-bar__wrapper, .admin-wrapper .sidebar-wrapper__inner { background: @crust; @@ -193,6 +201,7 @@ domain("mastodon.social") { .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, @@ -212,6 +221,7 @@ domain("mastodon.social") { color: @text; } + .search-popout span, .link-footer p, .link-footer p a { @@ -228,12 +238,12 @@ domain("mastodon.social") { .label_input .search__input, .search__input:focus, .account__header__fields dt { - color: @subtext0; + color: @subtext0 } .compose-panel hr, .navigation-panel hr { - border-top-color: @subtext0; + border-top-color: @subtext0 } .trends__item, @@ -241,9 +251,10 @@ domain("mastodon.social") { .getting-started__trends h4, .trends__item__name span, .story { - border-color: @surface0; + border-color: @surface0 } + .account__header__tabs__name h1, .account__header__content a, .account__header__bio .account__header__fields a, @@ -258,7 +269,7 @@ domain("mastodon.social") { .navigation-bar strong, .reply-indicator__content a.unhandled-link, .status__content a.unhandled-link { - color: @accent-Color; + color: @accent-color; } .icon-button, @@ -266,6 +277,7 @@ domain("mastodon.social") { color: @surface2; } + .icon-button:active, .icon-button:focus, .icon-button:hover, @@ -276,7 +288,7 @@ domain("mastodon.social") { .icon-button.inverted:focus, .icon-button.inverted:hover, .public-layout .public-account-bio .account__header__fields a:hover { - color: @accent-Color; + color: @accent-color; } .ui__header, @@ -298,8 +310,7 @@ domain("mastodon.social") { .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), + .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: @mantle; @@ -325,19 +336,20 @@ domain("mastodon.social") { .nothing-here, .public-layout .public-account-bio, .hero-widget__text, - body.admin, + &.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; + border-color: @accent-color; } .public-layout .public-account-header__tabs__tabs .counter.active::after { - border-color: @accent-Color; + border-color: @accent-color; } .account, @@ -372,22 +384,18 @@ domain("mastodon.social") { .column-link--transparent.active, .column-link--transparent:focus, .column-link:focus { - color: @accent-Color; + color: @accent-color; } .column-link--transparent:hover, .column-link:hover { - color: @accent-Color; + color: @accent-color; } - .follow_requests-unlocked_explanation { - background: @base; - } - .status.collapsed .status__content:after { background: linear-gradient(fadeout(@base, 100), @base); } - + .button.button-tertiary:focus, .button.button-tertiary:hover, .button.button-tertiary:active { @@ -395,13 +403,13 @@ domain("mastodon.social") { } .button.button-tertiary { - border-color: @accent-Color; + border-color: @accent-color; } .button, .button.button-tertiary, .button.logo-button { - background: @accent-Color; + background: @accent-color; color: @base; } @@ -409,6 +417,7 @@ domain("mastodon.social") { fill: currentColor; } + .public-layout .header .nav-button { background-color: @surface1; } @@ -420,9 +429,9 @@ domain("mastodon.social") { .button.button-secondary:active, .button.button-secondary:focus, .button.button-secondary:hover { - border-color: @accent-Color; + border-color: @accent-color; color: @base; - transition: 0.4s; + transition: .4s; } .button:active, @@ -434,7 +443,7 @@ domain("mastodon.social") { .button.logo-button:active, .button.logo-button:focus, .button.logo-button:hover { - background: @accent-Color; + background: @accent-color; } .drawer__inner, @@ -444,13 +453,14 @@ domain("mastodon.social") { .compose-form .compose-form__modifiers, .compose-form .autosuggest-textarea__textarea, + .compose-form .compose-form__autosuggest-wrapper, .compose-form .spoiler-input__input { - background: @surface1; - color: @text; + background: @surface1 !important; + color: @text !important; } .compose-form .autosuggest-textarea__textarea::placeholder { - color: @subtext0; + color: @subtext0 } .compose-form .compose-form__buttons-wrapper { @@ -460,10 +470,9 @@ domain("mastodon.social") { .load-more:hover { background-color: @mantle; } - .character-counter { - color: @subtext0; + color: @subtext0 } .public-layout .header, @@ -473,38 +482,7 @@ domain("mastodon.social") { .nothing-here { box-shadow: none; } - - .emoji-picker-dropdown__menu { - background: @surface1; - color: @text; - * { - border-color: @overlay0; - } - .emoji-mart-anchor-bar { - background: @accent-Color; - } - .emoji-mart-anchor-selected { - color: @accent-Color !important; - } - .emoji-mart-anchor { - color: @surface2; - } - .emoji-mart-search input { - color: @text; - &::placeholder { - color: @text; - } - } - .emoji-mart-bar:first-child { - color: @text; - background: @surface0; - } - .emoji-mart-search, .emoji-mart-scroll, .emoji-mart-category-label span { - color: @text; - background: @surface1; - } - } - + .dropdown-menu__arrow:before, .dropdown-menu__item a, .dropdown-menu__item button, @@ -520,7 +498,7 @@ domain("mastodon.social") { } .input-copy, - .simple_form input[type="text"], + .simple_form input[type=text], .simple_form textarea, .simple_form .block-button, .simple_form .button, @@ -543,58 +521,54 @@ domain("mastodon.social") { } .simple_form textarea, - .simple_form input[type="password"], - .simple_form input[type="number"], - .simple_form input[type="text"] { + .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=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) { + .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) { + .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,") - no-repeat right 8px center/auto 16px; + background: @mantle url("data:image/svg+xml;utf8,") 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 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; + border-color: @accent-color !important; background: @mantle !important; color: @text !important; } .table > thead > tr > th { - border-color: @accent-Color !important; + border-color: @accent-color !important; } .batch-table__toolbar, @@ -603,15 +577,15 @@ domain("mastodon.social") { 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 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; + border-color: @accent-color !important; transition: 0.4s; } @@ -640,43 +614,5 @@ domain("mastodon.social") { .card__bar { background: @surface0; } - - .reply-indicator { - background: @surface0; - color: @text; - a, - .display-name__html { - color: @accent-Color; - } - } - - /* glitch support */ - .glitch { - .local-settings__navigation { - background: @base; - .active { - background: @accent-Color; - color: @base; - } - .close { - background: @red; - color: @base; - } - .local-settings__navigation__item { - border-bottom-color: @surface1; - &:not(.active, .close) { - background: @base; - color: @text; - } - } - } - .local-settings, .local-settings__page { - background: @surface0; - color: @text; - span.hint { - color: @subtext0; - } - } - } } }