diff --git a/scripts/userstyles.yml b/scripts/userstyles.yml index 179a68a3d5..266008b317 100644 --- a/scripts/userstyles.yml +++ b/scripts/userstyles.yml @@ -292,6 +292,14 @@ userstyles: app-link: "https://github.com/libreddit/libreddit" current-maintainers: [*isabelroses] past-maintainers: [*andreasgrafen] + lichess: + name: lichess + category: game + color: sapphire + readme: + usage: "Switch to a default lichess light/dark theme via **Username** > **Background** for the best experience!" + app-link: "https://lichess.org/" + current-maintainers: [*coopw1] linkedin: name: LinkedIn category: social diff --git a/styles/lichess/.stylelintrc.json b/styles/lichess/.stylelintrc.json new file mode 100644 index 0000000000..393eaba68b --- /dev/null +++ b/styles/lichess/.stylelintrc.json @@ -0,0 +1,11 @@ +{ + "extends": "../../.stylelintrc.js", + "rules": { + "selector-type-no-unknown": [ + true, + { + "ignore": ["signal", "index", "fill"] + } + ] + } +} diff --git a/styles/lichess/assets/catwalk.webp b/styles/lichess/assets/catwalk.webp new file mode 100644 index 0000000000..563f56841a --- /dev/null +++ b/styles/lichess/assets/catwalk.webp @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f49cecaee30d7678ebbaa4057c5b4cb20e1a0a8c721e459328300e57c75ca0b6 +size 261496 diff --git a/styles/lichess/assets/frappe.webp b/styles/lichess/assets/frappe.webp new file mode 100644 index 0000000000..6249dd54bd --- /dev/null +++ b/styles/lichess/assets/frappe.webp @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8b5a6b2380e9231dc9a7d7215a9a0cb710ba9fcd1a18d957fddc33d93e2ff038 +size 239310 diff --git a/styles/lichess/assets/latte.webp b/styles/lichess/assets/latte.webp new file mode 100644 index 0000000000..5301fb04d1 --- /dev/null +++ b/styles/lichess/assets/latte.webp @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:af080506ef19c6a2519011f0a63034c25f50805421989b1e902eae0f67b296b8 +size 244402 diff --git a/styles/lichess/assets/macchiato.webp b/styles/lichess/assets/macchiato.webp new file mode 100644 index 0000000000..8415983fc9 --- /dev/null +++ b/styles/lichess/assets/macchiato.webp @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8467d412bbd6ebad160912f6ea61a93fa0414fb037a02e0f968980caa07adb1e +size 236746 diff --git a/styles/lichess/assets/mocha.webp b/styles/lichess/assets/mocha.webp new file mode 100644 index 0000000000..360c308753 --- /dev/null +++ b/styles/lichess/assets/mocha.webp @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:72678ea3aef79cf7eb741faf4afd7e9b777e562ece6db6e15f3c7f82d2cbe9e2 +size 232868 diff --git a/styles/lichess/catppuccin.user.css b/styles/lichess/catppuccin.user.css new file mode 100644 index 0000000000..708aad34b7 --- /dev/null +++ b/styles/lichess/catppuccin.user.css @@ -0,0 +1,582 @@ +/* ==UserStyle== +@name Lichess Catppuccin +@namespace github.com/catppuccin/userstyles/styles/lichess +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lichess +@version 0.0.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lichess/catppuccin.user.css +@description Soothing pastel theme for Lichess +@author Catppuccin +@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("lichess.org") { + :root:has(body[data-theme="light"]) { + #catppuccin(@lightFlavor, @accentColor); + } + :root:has(body[data-theme="dark"]) { + #catppuccin(@darkFlavor, @accentColor); + } + :root:has(body[data-theme="system"]) { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor, @accentColor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor, @accentColor); + } + } + + /* prettier-ignore */ + @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; }; + } + + #catppuccin(@lookup, @accent) { + @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]; + + /* Main background */ + html, + body { + background: @base linear-gradient(to bottom, @crust, @base 116px) + no-repeat; + color: @text !important; + } + + /* lichess button */ + .site-title a { + color: @accent-color; + } + .site-title span { + color: @text; + } + + /* Game selection menus */ + .hooks__list td { + background-color: fade(@overlay0, 50%); + } + .hooks__list tr.join:hover td { + background-color: fade(@accent-color, 50%); + } + + /* Topbar */ + #topnav.hover section:hover > a, + #topnav section:active > a, + #topnav div, + .site-buttons .shown .toggle, + .site-buttons .dropdown { + background: @crust; + } + #topnav section > a { + color: @subtext0; + } + #topnav.hover section:hover > a, + #topnav section:active > a, + #topnav div a, + #dasher_app .selector button, + #dasher_app .head, + #dasher_app .piece .no-square, + #dasher_app .theme .list button, + #dasher_app .links a, + #dasher_app .links button, + #dasher_app .subs .sub, + .site-buttons .dropdown a, + .site-buttons .dropdown button { + color: @text; + } + #topnav.hover section:hover > a, + #topnav section:active > a, + #topnav div { + border-left-color: @accent-color; + } + signal > i { + background-color: @green; + } + #dasher_app .sub::before, + .is-green::before { + color: @green; + } + #challenge-app .empty { + background: @crust; + } + + /* Popup skining */ + dialog { + background: @crust; + } + .game-setup .optional-config, + .game-setup .ratings { + background: @base; + } + .game-setup .radio input:checked + label { + background: @green; + } + + /* Text */ + .site-buttons .link, + .button, + .input, + .optgroup, + .select, + .textarea, + .lobby__box td.name a, + .lobby__box__top .title, + .lobby__box .user-link, + .mini-game, + .mini-game:hover, + .text, + .ublog-post-card__title, + .lobby__counters a, + .lobby__streams .stream, + .lobby__timeline .entry a, + .lobby__about a, + .lobby__timeline, + .lobby__counters, + .tabs-horiz, + .lobby__streams .more, + .lobby__timeline .more, + .dialog-content, + button, + input, + optgroup, + select, + textarea { + color: @subtext0; + } + .site-buttons .link:hover, + .button.button-metal:hover, + .radio input:checked + label { + color: @text; + } + .site-title-nav__donate, + .lobby__streams .stream.highlight strong, + .utitle, + .lobby__support__text, + .lobby__support i::before { + color: @peach; + } + .mini-game__clock.clock--run, + .tabs-horiz span.active { + color: @red; + } + .tabs-horiz span.active, + .tabs-horiz span:hover { + border-color: @red; + } + a { + color: @blue; + } + /* Links */ + .lobby__timeline .entry:hover a, + a:hover, + a:active, + a:focus { + color: @accent-color; + } + + /* Homepage cards */ + .lobby__app__content, + .box { + background-color: @mantle; + } + .lpools>div { + background: fade(@crust, 20%); + border-color: @surface0; + &:hover { + background-color: fade(@accent-color, 20%); + } + } + .hook__filters { + background-color: fade(@mantle, 50%); + } + .lobby__support a { + background: @crust; + } + .lobby__support a:hover { + background: @peach; + } + .lobby__support a:hover i::before, + .lobby__support a:hover .lobby__support__text { + color: @mantle; + } + .lobby__box__top, + #hook .opponent, + .lobby__box__content, + .ublog-post-card, + .button, + .tour-spotlight { + background: @mantle !important; + } + .unread { + background: @red; + } + .lobby__box tr:nth-child(even) { + background: @crust; + } + + /* Non-main page sidebar nav colors */ + .subnav a.active { + color: @red; + } + .subnav a.active::after, + .subnav a:hover::after { + background: @red; + } + + /* Blog cards */ + .blog-cards > a { + background: @crust; + } + + /* Learn tab */ + .learn-stages .stage.done { + background: @green; + } + .learn-stages .stage.ongoing, + .learn__side-home { + background: @blue; + } + .learn-stages .stage.future { + background: @red; + } + + /* Chess Game */ + .brown .is2d cg-board { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + .is2d .pawn { + #piece(@f, @s) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + &.black { + #piece(@base, @text); + } + &.white { + #piece(@text, @base); + } + } + .is2d .bishop { + #piece(@f, @s) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + &.black { + #piece(@base, @text); + } + &.white { + #piece(@text, @base); + } + } + .is2d .knight { + #piece(@f, @s) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + &.black { + #piece(@base, @text); + } + &.white { + #piece(@text, @base); + } + } + .is2d .rook { + #piece(@f, @s) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + &.black { + #piece(@base, @text); + } + &.white { + #piece(@text, @base); + } + } + .is2d .king { + #piece(@f, @s) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + &.black { + #piece(@base, @text); + } + &.white { + #piece(@text, @base); + } + } + .is2d .queen { + &.black { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + &.white { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + } + + .orientation-white .files coord:nth-child(2n + 1), + .orientation-white .ranks coord:nth-child(2n), + .orientation-black .files coord:nth-child(2n), + .orientation-black .ranks coord:nth-child(2n + 1) { + color: @base; + } + .orientation-white .files coord:nth-child(2n), + .orientation-white .ranks coord:nth-child(2n + 1), + .orientation-black .files coord:nth-child(2n + 1), + .orientation-black .ranks coord:nth-child(2n) { + color: @crust; + } + square.move-dest { + background: radial-gradient( + fade(@accent-color, 50%) 19%, + rgba(0, 0, 0, 0) 20% + ); + } + square.selected { + background: fade(@accent-color, 50%); + } + square.last-move { + background: fade(@accent-color, 40%); + } + .rclock .time { + background: @mantle; + color: @text; + } + .rclock.running .time { + background: #384722; /* putting it back to default so that the time on the clock is readable */ + } + .rclock .bar { + background: @accent-color; + } + + /* Game Cards */ + .game__meta, + .round__app__table { + background: @crust; + } + rm6 { + background: @mantle; + } + rm6 .buttons, + rm6 i5z { + background: @base; + } + + /* Messages */ + .msg-app__convo__head, + .msg-app__side__search, + .msg-app__convo__reply { + background: @crust; + } + .msg-app__side { + background: @mantle; + } + .msg-app__side__search input, + .msg-app__convo__post__text { + background: @base; + } + .msg-app__side__contact__name { + color: @text; + } + .msg-app__side__contact__msg, + .msg-app__side__contact__date time { + color: @subtext0; + } + + /* User dropdown */ + #powerTip, + #miniGame, + #miniBoard { + background: @crust; + } + .btn-rack__btn, + .btn-rack form, + #friend_box .friend_box_title, + .button.button-metal, + .button.button-empty:not(.disabled):hover, + .button.button-empty.button-green:not(.disabled):hover, + .button.button-empty.button-red:not(.disabled):hover { + background: @base; + } + + /* User Page */ + .user-show__header, + .user-show__social, + .user-show .angles, + .cmn-toggle:hover:not(:disabled) + label::after, + .cmn-toggle + label::after, + .crosstable povs:hover, + .crosstable__users, + .crosstable__score, + .game-row:nth-child(odd), + .number-menu--tabs .nm-item.active { + background: @crust; + } + .number-menu--tabs .nm-item.active, + .user-show .number-menu .to-games.active, + .user-show #games.number-menu { + background: @mantle !important; + } + /* Stats */ + .perf-stat .counter tr.full td:last-child { + background: @crust; + } + .sub-ratings a.active { + background: @mantle; + } + .sub-ratings a[href]:hover { + background: @crust; + } + + /* Analysis page */ + .analyse__clock, + #analyse-cm .title, + .explorer__config .choices button, + .mselect__label, + .cmn-toggle:hover:not(:disabled) + label::after, + .cmn-toggle + label::after, + .crosstable povs:hover, + .crosstable__users, + .crosstable__score, + .mselect__list, + .analyse__tools .comp-off__hint, + .ceval, + .explorer-box tr:nth-child(even), + .board-editor__tools .metadata, + .mchat__content, + .mchat__tab-active, + .crosstable fill { + background: @crust !important; + } + .analyse__tools, + .copyable, + .pv_box, + #ceval-settings { + background: @mantle; + } + .ceval .settings-gear.active { + background-color: @accent-color; + } + #ceval-settings { + border-top-color: @accent-color; + } + .mchat__tab:hover { + background: fade(@accent-color, 50%); + } + /* Openings */ + .opening__config, + .opening__next { + background: @crust; + } + .opening__next { + outline-color: @base; + } + .opening__next:hover { + outline-color: @accent-color; + } + .opening__next__popularity span { + background: @accent-color; + } + .opening__next__title { + color: @accent-color; + } + + /* Puzzles */ + .tview2-column > index { + background: @base; + color: @subtext0 !important; + } + .puzzle__feedback { + background: @base; + } + .puzzle__tools, + .puzzle__side__metas, + .puzzle__side__user, + .puzzle__side__config, + .puzzle__side__theme { + background: @mantle; + } + input, + textarea, + select { + background: @crust; + } + .cmn-toggle:checked + label { + background-color: @green; + } + .cmn-toggle:checked + label::before { + color: @green; + } + + /* Teams */ + .slist tbody tr:nth-child(even), + .team-show__desc, + .team-show__forum__post:nth-child(odd) { + background: @crust; + } + + /* Settings */ + .account .radio input:checked + label, + .account table.allows tr:nth-child(odd) td { + background: @crust; + } + .radio label { + background: @base; + } + .flash-warning { + background: @peach; + } + .form-control:invalid { + border-color: @red; + } + } +}