From 39b1f9470440ec6522bc378c99a662ab9fbac39d Mon Sep 17 00:00:00 2001 From: orxngc Date: Sat, 26 Oct 2024 09:22:14 +0300 Subject: [PATCH 01/39] feat(myanimelist): init --- scripts/userstyles.yml | 8 +++ styles/myanimelist/catppuccin.user.css | 99 ++++++++++++++++++++++++++ 2 files changed, 107 insertions(+) create mode 100644 styles/myanimelist/catppuccin.user.css diff --git a/scripts/userstyles.yml b/scripts/userstyles.yml index 3d5088cb37..ff80a042d9 100644 --- a/scripts/userstyles.yml +++ b/scripts/userstyles.yml @@ -661,6 +661,14 @@ userstyles: readme: app-link: "https://minesweeper.online" current-maintainers: [*gitmuslim] + myanimelist: + name: MyAnimeList + categories: [entertainment, social_networking] + icon: myanimelist + color: sapphire + readme: + app-link: "https://myanimelist.net" + current-maintainers: [*orxngc] namemc: name: NameMC categories: [game_development, analytics, discussion_forum] diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css new file mode 100644 index 0000000000..02169bc961 --- /dev/null +++ b/styles/myanimelist/catppuccin.user.css @@ -0,0 +1,99 @@ +/* ==UserStyle== +@name MyAnimeList Catppuccin +@namespace github.com/catppuccin/userstyles/styles/myanimelist.net +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/myanimelist.net +@version 0.0.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/myanimelist.net/catppuccin.user.css +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amyanimelist.net +@description Soothing pastel theme for myanimelist.net +@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('myanimelist.net') { + /* Exclude animelist and mangalist pages */ + @-moz-document regexp("^(?!.*myanimelist\\.net\\/(animelist|mangalist)\\/).*$") { + @media (prefers-color-scheme: light) { + :root { + #catppuccin(@lightFlavor, @accentColor); + } + } + @media (prefers-color-scheme: dark) { + :root { + #catppuccin(@darkFlavor, @accentColor); + } + } + } + + #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]; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + body { + background-color: @base; + + & > div { + color: @text; + background-color: @surface0; + } + } + + a:link, + a:visited { + color: @accent-color; + } + } +} + +/* 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; }; + } + +// vim:ft=less From 8a212be2a694b022300c5a506c1b711bb605c07d Mon Sep 17 00:00:00 2001 From: orxngc Date: Sat, 26 Oct 2024 09:32:13 +0300 Subject: [PATCH 02/39] chore(myanimelist): fix linting --- styles/myanimelist/catppuccin.user.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 02169bc961..52f78ff409 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -1,11 +1,11 @@ /* ==UserStyle== @name MyAnimeList Catppuccin @namespace github.com/catppuccin/userstyles/styles/myanimelist.net -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/myanimelist.net +@homepageURL github.com/catppuccin/userstyles/styles/myanimelist @version 0.0.1 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/myanimelist.net/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amyanimelist.net -@description Soothing pastel theme for myanimelist.net +@description Soothing pastel theme for MyAnimeList @author Catppuccin @license MIT From 609e652be7599b84356a271e5c9947608ed9f753 Mon Sep 17 00:00:00 2001 From: orxngc Date: Sat, 26 Oct 2024 09:34:54 +0300 Subject: [PATCH 03/39] chore(myanimelist): fix linting again --- styles/myanimelist/catppuccin.user.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 52f78ff409..bd4df8d8b8 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -1,10 +1,10 @@ /* ==UserStyle== @name MyAnimeList Catppuccin -@namespace github.com/catppuccin/userstyles/styles/myanimelist.net -@homepageURL github.com/catppuccin/userstyles/styles/myanimelist +@namespace github.com/catppuccin/userstyles/styles/myanimelist +@homepageURL https://github.com/catppuccin/userstyles/styles/myanimelist @version 0.0.1 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/myanimelist.net/catppuccin.user.css -@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amyanimelist.net +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/myanimelist/catppuccin.user.css +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amyanimelist @description Soothing pastel theme for MyAnimeList @author Catppuccin @license MIT From 748bedb0d33a7fe58a1c736609a60b0dd48ebdcc Mon Sep 17 00:00:00 2001 From: orxngc Date: Sat, 26 Oct 2024 09:35:33 +0300 Subject: [PATCH 04/39] chore(myanimelist): fix linting again again --- styles/myanimelist/catppuccin.user.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index bd4df8d8b8..0791e59c62 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -12,7 +12,7 @@ @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"] +@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('myanimelist.net') { From 7d0455513d4aaa997478856bd20b464e94da893a Mon Sep 17 00:00:00 2001 From: orxngc Date: Sat, 26 Oct 2024 09:37:03 +0300 Subject: [PATCH 05/39] chore(myanimelist): fix linting again again again .. this is embarrassing --- styles/myanimelist/catppuccin.user.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 0791e59c62..9dcfa1d083 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -1,7 +1,7 @@ /* ==UserStyle== @name MyAnimeList Catppuccin @namespace github.com/catppuccin/userstyles/styles/myanimelist -@homepageURL https://github.com/catppuccin/userstyles/styles/myanimelist +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/myanimelist @version 0.0.1 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/myanimelist/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amyanimelist From d071fcdb9f1cf48ab5a9b57de984a6ccbd036360 Mon Sep 17 00:00:00 2001 From: orangci Date: Tue, 26 Nov 2024 12:52:01 +0300 Subject: [PATCH 06/39] chore(myanimelist): fix merge conflicts --- scripts/userstyles.yml | 106 ++++++++++++++++++++----- styles/myanimelist/catppuccin.user.css | 35 ++++---- 2 files changed, 104 insertions(+), 37 deletions(-) diff --git a/scripts/userstyles.yml b/scripts/userstyles.yml index ff80a042d9..56f428fb49 100644 --- a/scripts/userstyles.yml +++ b/scripts/userstyles.yml @@ -48,8 +48,6 @@ collaborators: - &winston name: winston url: https://github.com/nekowinston - - &gitmuslim - url: https://github.com/GitMuslim - &tnixc name: Tnixc url: https://github.com/Tnixc @@ -133,20 +131,29 @@ collaborators: - &Flapperoo name: Eli url: https://github.com/Flapperoo - - &jh-devv - name: jh-devv - url: https://github.com/jh-devv + - &sofiedotcafe + name: Sofie + url: https://github.com/sofiedotcafe - &stellophiliac url: https://github.com/stellophiliac - &neongamerbot url: https://github.com/NeonGamerBot-QK - - &orxngc + - &orangci name: orangc - url: https://github.com/orxngc + url: https://github.com/orangci - &Lichthagel url: https://github.com/Lichthagel - &comfysage url: https://github.com/comfysage + - &TadoTheMiner + name: jan Tatesa + url: https://github.com/TadoTheMiner + - &mxgic1337 + url: https://github.com/mxgic1337 + - &steinuil + url: https://github.com/steinuil + - &husjon + url: https://github.com/husjon userstyles: advent-of-code: @@ -385,7 +392,7 @@ userstyles: color: sapphire readme: app-link: "https://google.com" - current-maintainers: [*gitmuslim] + current-maintainers: [] google-drive: name: Google Drive categories: [productivity] @@ -402,6 +409,13 @@ userstyles: readme: app-link: "https://photos.google.com" current-maintainers: [*genshibe] + grabify: + name: Grabify + categories: [development, productivity] + color: teal + readme: + app-link: "https://grabify.link" + current-maintainers: [*trinkey] graphite: name: Graphite categories: [development, productivity] @@ -465,6 +479,14 @@ userstyles: readme: app-link: "https://github.com/benphelps/homepage" current-maintainers: [*gandalf-the-blue] + hoogle: + name: Hoogle + categories: [development, productivity] + icon: haskell + color: mauve + readme: + app-link: "https://hoogle.haskell.org" + current-maintainers: [*jn-sena] hoppscotch: name: Hoppscotch categories: [development, productivity] @@ -502,6 +524,13 @@ userstyles: readme: app-link: "https://inoreader.com" current-maintainers: [*thomas-philippot] + indie-wiki-buddy: + name: Indie Wiki Buddy + categories: [browser_extension] + color: blue + readme: + app-link: "https://getindie.wiki/" + current-maintainers: [*thismoon] instagram: name: Instagram categories: [social_networking, photo_and_video, entertainment] @@ -534,6 +563,13 @@ userstyles: readme: app-link: "https://jisho.org" current-maintainers: [*Lichthagel] + keybr.com: + name: keybr.com + categories: [productivity] + color: text + readme: + app-link: "https://keybr.com" + current-maintainers: [*TadoTheMiner] keyoxide: name: Keyoxide categories: [development] @@ -599,6 +635,14 @@ userstyles: readme: app-link: 'https://listenbrainz.org' current-maintainers: [*00dani] + lobste.rs: + name: Lobsters + categories: [discussion_forum, development, social_networking] + icon: lobsters + color: red + readme: + app-link: 'https://lobste.rs' + current-maintainers: [*steinuil] mastodon: name: Mastodon categories: [social_networking, entertainment] @@ -642,7 +686,7 @@ userstyles: color: blue readme: app-link: "https://office.com" - current-maintainers: [*gitmuslim] + current-maintainers: [] migadu-webmail: name: Migadu Webmail categories: [email_client, productivity] @@ -660,7 +704,7 @@ userstyles: color: text readme: app-link: "https://minesweeper.online" - current-maintainers: [*gitmuslim] + current-maintainers: [] myanimelist: name: MyAnimeList categories: [entertainment, social_networking] @@ -668,7 +712,7 @@ userstyles: color: sapphire readme: app-link: "https://myanimelist.net" - current-maintainers: [*orxngc] + current-maintainers: [*orangci] namemc: name: NameMC categories: [game_development, analytics, discussion_forum] @@ -685,6 +729,16 @@ userstyles: readme: app-link: "https://nitter.net" current-maintainers: [*anubisnekhet] + nixos-manual: + name: ["NixOS Manual", "Nixpkgs Manual"] + categories: [development, wiki] + icon: nixos + color: blue + readme: + app-link: + - https://nixos.org/manual/nixos + - https://nixos.org/manual/nixpkgs + current-maintainers: [*husjon] nixos-search: name: NixOS Search categories: [search_engine] @@ -700,7 +754,7 @@ userstyles: color: blue readme: app-link: "wiki.nixos.org" - current-maintainers: [*orxngc] + current-maintainers: [*orangci] past-maintainers: [*winston] npm: name: npm @@ -782,6 +836,14 @@ userstyles: readme: app-link: https://porkbun.com current-maintainers: [*uncenter] + pronouns.cc: + name: pronouns.cc + categories: [social_networking] + color: mauve + readme: + app-link: "https://pronouns.cc/" + current-maintainers: [*comfysage] + past-maintainers: [*neongamerbot] pronouns.page: name: Pronouns.page categories: [social_networking] @@ -808,6 +870,14 @@ userstyles: readme: app-link: "https://pypi.org" current-maintainers: [*trinkey] + pythonanywhere: + name: PythonAnywhere + categories: [development] + icon: pythonanywhere + color: sapphire + readme: + app-link: "https://pythonanywhere.com" + current-maintainers: [*trinkey] quizlet: name: Quizlet categories: [education, productivity] @@ -853,7 +923,7 @@ userstyles: color: mauve readme: app-link: "https://shinigami-eyes.github.io" - current-maintainers: [*jh-devv] + current-maintainers: [*sofiedotcafe] snapchat-web: name: Snapchat Web categories: [social_networking, photo_and_video, entertainment] @@ -892,7 +962,7 @@ userstyles: color: teal readme: app-link: "https://github.com/openstyles/stylus" - current-maintainers: [*gitmuslim] + current-maintainers: [] substack: name: Substack categories: [entertainment, social_networking] @@ -900,7 +970,7 @@ userstyles: color: peach readme: app-link: "https://substack.com" - current-maintainers: [] + current-maintainers: [*uncenter] past-maintainers: [*winston] syncthing: name: Syncthing @@ -956,7 +1026,7 @@ userstyles: color: mauve readme: app-link: "https://twitch.tv" - current-maintainers: [*gitmuslim, *uncenter] + current-maintainers: [*uncenter, *mxgic1337] twitter: name: Twitter categories: [social_networking, discussion_forum, entertainment] @@ -1008,7 +1078,7 @@ userstyles: color: text readme: app-link: "https://www.wikipedia.org" - current-maintainers: [*gitmuslim] + current-maintainers: [] wikiwand: name: Wikiwand categories: [wiki, productivity] @@ -1029,4 +1099,4 @@ userstyles: answer: "It's available in case you have an OLED display. If you have one, you might want to enable this." current-maintainers: [*isabelroses, *uncenter] past-maintainers: [*elkrien] -# yaml-language-server: $schema=userstyles.schema.json +# yaml-language-server: $schema=userstyles.schema.json \ No newline at end of file diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 9dcfa1d083..a3139d444f 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -15,20 +15,17 @@ @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('myanimelist.net') { - /* Exclude animelist and mangalist pages */ - @-moz-document regexp("^(?!.*myanimelist\\.net\\/(animelist|mangalist)\\/).*$") { - @media (prefers-color-scheme: light) { - :root { - #catppuccin(@lightFlavor, @accentColor); - } - } - @media (prefers-color-scheme: dark) { - :root { - #catppuccin(@darkFlavor, @accentColor); - } - } +@-moz-document regexp("^(?!.*myanimelist\\.net\\/(animelist|mangalist)\\/).*$") { + @media (prefers-color-scheme: light) { + :root { + #catppuccin(@lightFlavor, @accentColor); + } + } + @media (prefers-color-scheme: dark) { + :root { + #catppuccin(@darkFlavor, @accentColor); } + } #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @@ -90,10 +87,10 @@ /* 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; }; - } + @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; }; +} -// vim:ft=less +// vim:ft=less \ No newline at end of file From 22f8637a1afe7038094993279da93bec07455fb7 Mon Sep 17 00:00:00 2001 From: K1aymore Date: Wed, 27 Nov 2024 12:59:47 -0800 Subject: [PATCH 07/39] Base profile theme --- styles/myanimelist/catppuccin.user.css | 132 +++++++++++++++++++++++-- 1 file changed, 122 insertions(+), 10 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index a3139d444f..b01a96f561 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -15,7 +15,8 @@ @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 regexp("^(?!.*myanimelist\\.net\\/(animelist|mangalist)\\/).*$") { +/* Exclude animelist and mangalist pages */ +@-moz-document regexp("^(.*myanimelist\.net/(?!(animelist|mangalist)).*)") { @media (prefers-color-scheme: light) { :root { #catppuccin(@lightFlavor, @accentColor); @@ -69,28 +70,139 @@ } } + --color-text-light: if((@lookup = latte), @mantle, @text); + --color-text-dark: if((@lookup = latte), @text, @mantle); + --color-accent-background: if( + (@lookup = latte), + desaturate(lighten(@accent-color, 4%), 0%), + desaturate(darken(@accent-color, 28%), 25%) + ); + body { - background-color: @base; + background-color: @mantle !important; & > div { color: @text; - background-color: @surface0; } } a:link, a:visited { - color: @accent-color; + color: @accent-color !important; } + + #headerSmall { + background-color: @mantle !important; + } + + #menu { + color: var(--color-text-light) !important; + background-color: var(--color-accent-background) !important; + + a:link, + a:visited { + color: var(--color-text-light) !important; + } + } + + .h1 { + background-color: @base !important; + border-color: @surface1 !important; + } + + #content, + .borderClass, + .container-left, + .container-right { + background-color: @base !important; + border-color: @surface1 !important; + h2, + h5 { + color: @text; + border-color: @surface1; + } + .fn-grey1 { + color: @subtext0 !important; + } + .fn-grey2 { + color: @subtext1 !important; + } + + /* Profile */ + + // Buttons below profile picture + .icon-user-function { + background-color: @surface0; + // icon color + i.fas { + color: @subtext0; + } + + &:hover { + background-color: @surface1; + } + &.disabled { + background-color: @surface1; + i.fas { + color: @overlay1; + } + } + } + + .btn-profile-submit, + .btn-form-submit { + color: var(--color-text-light) !important; + background-color: var(--color-accent-background) !important; + + &:hover { + background-color: @surface2 !important; + } + } + + // background of stats bars + .graph:not(.anime, .manga), + .stats-graph { + background-color: @crust; + } + + // comment entry + .sceditor-outer { + a.item.active { + background-color: @base; + border-color: @surface2; + } + + .sceditor-container { + background-color: @surface0; + border-color: @surface2; + div.sceditor-toolbar { + background-color: @surface0; + border-color: @surface2; + } + textarea { + background-color: @surface0; + border-color: @surface2; + } + } + .mal-tab-item.preview { + background-color: @base; + border-color: @surface2; + } + } + + .comment { + background-color: @surface0; + } + } // end of #content } } /* 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; }; -} + @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; }; + } -// vim:ft=less \ No newline at end of file +// vim:ft=less From b290beea7fa0ce9c0e104c35f9962401359b53fd Mon Sep 17 00:00:00 2001 From: K1aymore Date: Wed, 27 Nov 2024 18:10:24 -0800 Subject: [PATCH 08/39] Profile pretty much done (some Latte issues) --- styles/myanimelist/catppuccin.user.css | 124 +++++++++++++++++++++++-- 1 file changed, 115 insertions(+), 9 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index b01a96f561..627311ddc9 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -77,6 +77,11 @@ desaturate(lighten(@accent-color, 4%), 0%), desaturate(darken(@accent-color, 28%), 25%) ); + --color-accent-background-hover: if( + (@lookup = latte), + desaturate(lighten(@accent-color, 8%), 10%), + desaturate(darken(@accent-color, 25%), 35%) + ); body { background-color: @mantle !important; @@ -91,10 +96,29 @@ color: @accent-color !important; } + // top header #headerSmall { - background-color: @mantle !important; + background-color: transparent !important; + // icons + .fa-solid { + color: @subtext1 !important; + } + .header-menu-unit.header-profile { + background-color: transparent; + .header-profile-link { + color: @text; + } + .header-profile-button { + background-color: transparent; + box-shadow: transparent 0 0 0 1px inset; + } + } + + // TODO: "MyAnimeList" logo doesn't change in Latte + // borders between icons not themed (not very important) } + // colorful header #menu { color: var(--color-text-light) !important; background-color: var(--color-accent-background) !important; @@ -103,13 +127,36 @@ a:visited { color: var(--color-text-light) !important; } + + // search bar + .inputtext { + color: @text !important; + background-color: @base !important; + border-color: @surface0 !important; // not exactly correct I don't think + } + // yes this is mispelled + #topSearchButon { + background-color: @surface0 !important; + border-color: @surface0 !important; // not exactly correct I don't think + + color: @text !important; + &.notActive { + color: @subtext0 !important; + } + } } .h1 { - background-color: @base !important; + color: @text !important; + background-color: @base !important; // should be surface0 but I don't think it looks good border-color: @surface1 !important; } + // changes space between content and footer + #contentWrapper { + background-color: transparent !important; + } + #content, .borderClass, .container-left, @@ -133,6 +180,7 @@ // Buttons below profile picture .icon-user-function { background-color: @surface0; + border-color: @surface2 !important; // icon color i.fas { color: @subtext0; @@ -144,18 +192,32 @@ &.disabled { background-color: @surface1; i.fas { - color: @overlay1; + color: @overlay0; } } } + .user-status { + li { + background-color: @crust; + } + li:nth-of-type(2n) { + background-color: @mantle; + } + } + + // Anime / Manga List buttons + // Submit comment / all comments buttons .btn-profile-submit, .btn-form-submit { color: var(--color-text-light) !important; background-color: var(--color-accent-background) !important; + transition-duration: .3s; + transition-property: all; + transition-timing-function: ease-in-out; &:hover { - background-color: @surface2 !important; + background-color: var(--color-accent-background-hover) !important; } } @@ -163,23 +225,59 @@ .graph:not(.anime, .manga), .stats-graph { background-color: @crust; + border-color: @crust; + } + // watching / score numbers + .text { + color: @subtext1 !important; } + // In Latte, hovering over favorites makes them lighter rather than darker. + // This reverts it but I'm not sure which looks better +/* .btn-fav { + .link { + transition-property: filter,opacity; + } + .link:hover { + // works better in Latte + opacity: 1; + filter: brightness(85%); + } + } */ + // comment entry .sceditor-outer { - a.item.active { - background-color: @base; - border-color: @surface2; + // Edit and Preview buttons + a.item { + color: @text; + &.active { + background-color: @base; + border-color: @surface2; + } + &:hover { + color: @accent-color; + background-color: fade(@surface0, 25%); + } } + // TODO: comment entry box too light while dragging to resize + // TODO: in Latte, box resize indicator is hard to see .sceditor-container { background-color: @surface0; border-color: @surface2; - div.sceditor-toolbar { - background-color: @surface0; + .sceditor-toolbar { + background-color: @surface1; border-color: @surface2; + + .sceditor-group { + border-right-color: @overlay0; + .sceditor-button { + color: @subtext1 !important; // TODO: not working, comment editing buttons look bad in Latte + } + } } textarea { + color: @text; background-color: @surface0; border-color: @surface2; } @@ -194,6 +292,14 @@ background-color: @surface0; } } // end of #content + + #footer-block { + color: @text !important; + background-color: @mantle !important; + .footer-link-block { + // TODO: background image not inverted in Latte + } + } } } From 18ed6693cafdc94562c78365d77be87b9059ee39 Mon Sep 17 00:00:00 2001 From: K1aymore Date: Thu, 28 Nov 2024 00:04:08 -0800 Subject: [PATCH 09/39] Main anime/manga page themed --- styles/myanimelist/catppuccin.user.css | 318 +++++++++++++++++++++++-- 1 file changed, 297 insertions(+), 21 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 627311ddc9..cb94975a65 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -39,9 +39,9 @@ @yellow: @catppuccin[@@lookup][@yellow]; @green: @catppuccin[@@lookup][@green]; @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; @blue: @catppuccin[@@lookup][@blue]; + @sapphire: @catppuccin[@@lookup][@sapphire]; + @sky: @catppuccin[@@lookup][@sky]; @lavender: @catppuccin[@@lookup][@lavender]; @text: @catppuccin[@@lookup][@text]; @subtext1: @catppuccin[@@lookup][@subtext1]; @@ -57,19 +57,6 @@ @crust: @catppuccin[@@lookup][@crust]; @accent-color: @catppuccin[@@lookup][@@accent]; - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - --color-text-light: if((@lookup = latte), @mantle, @text); --color-text-dark: if((@lookup = latte), @text, @mantle); --color-accent-background: if( @@ -82,8 +69,20 @@ desaturate(lighten(@accent-color, 8%), 10%), desaturate(darken(@accent-color, 25%), 35%) ); + --color-recommended: desaturate(@blue, 30%); + --color-mixed-feelings: @subtext0; + --color-not-recommended: @maroon; + + /* General */ + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } body { + // STYLE: @crust looks cool, but it may be too much background-color: @mantle !important; & > div { @@ -96,6 +95,15 @@ color: @accent-color !important; } + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + /* Headers */ + // top header #headerSmall { background-color: transparent !important; @@ -120,6 +128,7 @@ // colorful header #menu { + // STYLE: this is quite bright, can be kinda hard to read especially on Rosewater, but it looks pretty good color: var(--color-text-light) !important; background-color: var(--color-accent-background) !important; @@ -149,7 +158,8 @@ .h1 { color: @text !important; background-color: @base !important; // should be surface0 but I don't think it looks good - border-color: @surface1 !important; + border-color: @surface0 !important; + border-bottom-color: @surface1 !important; } // changes space between content and footer @@ -157,12 +167,14 @@ background-color: transparent !important; } + /* Content */ + #content, .borderClass, .container-left, .container-right { background-color: @base !important; - border-color: @surface1 !important; + border-color: @surface0 !important; h2, h5 { color: @text; @@ -174,10 +186,14 @@ .fn-grey2 { color: @subtext1 !important; } + .dark_text { + color: @subtext0; + } /* Profile */ // Buttons below profile picture + // STYLE: the colors of these really could be whatever .icon-user-function { background-color: @surface0; border-color: @surface2 !important; @@ -206,13 +222,15 @@ } } + // Anime page Update button // Anime / Manga List buttons // Submit comment / all comments buttons + .inputButton, .btn-profile-submit, .btn-form-submit { color: var(--color-text-light) !important; background-color: var(--color-accent-background) !important; - transition-duration: .3s; + transition-duration: 0.3s; transition-property: all; transition-timing-function: ease-in-out; @@ -232,9 +250,9 @@ color: @subtext1 !important; } - // In Latte, hovering over favorites makes them lighter rather than darker. + // STYLE: In Latte, hovering over favorites makes them lighter rather than darker. // This reverts it but I'm not sure which looks better -/* .btn-fav { + /* .btn-fav { .link { transition-property: filter,opacity; } @@ -291,13 +309,271 @@ .comment { background-color: @surface0; } + + /* Anime / Manga Details Page */ + + .left-info-block-broadcast-button { + color: @text !important; + background-color: @surface0 !important; + } + .inputtext { + color: @text; + background-color: @surface0; + border-color: transparent; + } + + // add / remove from favorites button + #profileRows a { + border-color: @surface2; + &:hover { + background-color: @surface0; + } + } + + // right side + + #horiznav_nav { + border-color: @surface0; + a, + li { + color: @text !important; + background-color: transparent; + } + a:hover { + background-color: @surface1; + } + .horiznav_active { + background-color: @surface1; + } + } + + .stats-block { + background-color: @mantle; + border-color: @surface0; + + .score { + // score title box + &::before { + color: var(--color-text-light) !important; + background-color: var(--color-accent-background); + } + color: @text !important; + // user count + &::after { + color: @subtext1 !important; + } + } + + // divider between halves + &::before { + background-color: @surface0; + box-shadow: transparent 1px 0 1px 0; + } + + .numbers { + color: @text !important; + } + + .information { + border-right-color: @surface0; + } + } + + .user-status-block { + background-color: @mantle; + border-color: @surface0; + select, + .di-ib { + color: @text !important; + background-color: @surface0 !important; + border-color: @surface1 !important; + .inputtext { + color: @accent-color; + background-color: @surface0 !important; + border-color: transparent !important; + } + } + } + + .related-entries .entry:nth-child(2n + 1)::after { + border-right-color: @surface0; + } + + .detail-characters-list .divider::after { + border-right-color: @surface0; + } + + // Intro / Outro play button + .oped-preview-button-gray { + background-color: @surface1 !important; + mask-image: url("/images/oped-play-circle.svg"); + background-image: none !important; + filter: none !important; + } + .oped-video-button-gray { + filter: none !important; + .malicon { + color: @surface1 !important; + } + } + + // review header + .mal-navbar { + background-color: @surface0; + // reset since they were set to link color + .recommended a { + color: var(--color-recommended) !important; + } + .mixed-feelings a { + color: var(--color-mixed-feelings) !important; + } + .not-recommended a { + color: var(--color-not-recommended) !important; + } + // set bars to match + .recommended__bar { + background-color: var(--color-recommended); + } + .mixed_feeling__bar { + background-color: var(--color-mixed-feelings); + } + .not_recommended__bar { + background-color: var(--color-not-recommended); + } + } + + .review-element { + background-color: transparent; + .thumbbody { + border-color: @surface0; + } + .update_at { + color: @subtext0; + } + .tags { + .btn-label { + color: @subtext0; + background-color: @surface0; + border-color: transparent; + } + // not easily readable by default, + // and overridden by above + .recommended { + color: var(--color-recommended); + } + .mixed-feelings { + color: var(--color-mixed-feelings); + } + .not-recommended { + color: var(--color-not-recommended); + } + .preliminary { + color: @subtext0; + background-color: transparent; + border-color: transparent; + span { + color: @subtext0; + } + } + } + .rating { + color: @text; + } + .notice { + color: @subtext0; + } + .reaction-box { + background-color: @surface0; + .btn-reaction { + color: @subtext1 !important; + border-color: @surface2 !important; + } + .btn-showall { + color: @subtext0; + &:hover { + color: @accent-color; + } + } + } + .bottom-navi { + .icon-reaction { + color: @subtext0; + } + .btn-popup { + color: @subtext0 !important; + } + .menu-block { + background-color: @surface0 !important; + border-color: transparent; + } + } + } + + .btn-detail-recommendations-view-all { + background-color: @surface0; + .text { + color: @subtext0; + } + .icon-next { + background-color: @subtext0; + } + } + + .detail-stack-block .tag { + background-color: transparent; + } + + .lightLink { + color: @subtext0; + } + + .forum_boardrow1 { + background-color: transparent; + border-color: @surface1; + .lightLink { + color: @subtext0; + } + } + .forum_boardrow2 { + background-color: @mantle; + border-color: @surface1; + .watch-state-icon { + color: @surface2; + } + .watch-state-icon.watched { + color: @accent-color; + } + } + + /* Review Page */ + + .button_edit { + background-color: @surface0; + border-color: transparent; + } + + .tag { + background-color: @surface0; + border-color: transparent; + } } // end of #content #footer-block { color: @text !important; background-color: @mantle !important; .footer-link-block { - // TODO: background image not inverted in Latte + // TODO: divider image not inverted in Latte + } + .footer-link-icon-block { + .footer-recommended::before { + color: @subtext0; + } + } + #copyright { + color: @subtext0 !important; + } + #recaptcha-terms { + color: @subtext0 !important; } } } From d0f6f2ec585a2cc62735b3e5b8152a8ae40b3ca0 Mon Sep 17 00:00:00 2001 From: K1aymore Date: Thu, 28 Nov 2024 18:13:12 -0800 Subject: [PATCH 10/39] Characters and Staff page --- styles/myanimelist/catppuccin.user.css | 27 ++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index cb94975a65..e1776eb02e 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -545,6 +545,33 @@ } } + /* Characters and Staff page */ + + .border_solid { + border-color: @surface1; + } + + .anime-character, + .manga-character { + background-color: transparent; + border-color: @surface1; + .btn-show-sort { + color: @subtext0; + } + } + + .anime-character-container { + // Favorites counter and VA language + .spaceit_pad[style*="color"] { + color: @subtext0 !important; + } + .bgColor1, + .bgColor2 { + background-color: transparent; + } + + } + /* Review Page */ .button_edit { From 54d8d388adb740ee98b507f7af526ee0a8044043 Mon Sep 17 00:00:00 2001 From: K1aymore Date: Thu, 28 Nov 2024 19:05:57 -0800 Subject: [PATCH 11/39] Episode view done --- styles/myanimelist/catppuccin.user.css | 94 +++++++++++++++++++++++++- 1 file changed, 92 insertions(+), 2 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index e1776eb02e..c1a39e4674 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -66,8 +66,8 @@ ); --color-accent-background-hover: if( (@lookup = latte), - desaturate(lighten(@accent-color, 8%), 10%), - desaturate(darken(@accent-color, 25%), 35%) + desaturate(lighten(@accent-color, 10%), 0%), + desaturate(darken(@accent-color, 15%), 10%) ); --color-recommended: desaturate(@blue, 30%); --color-mixed-feelings: @subtext0; @@ -213,6 +213,7 @@ } } + // STYLE: we could set both to mantle but originally it has alternating row colors .user-status { li { background-color: @crust; @@ -220,6 +221,9 @@ li:nth-of-type(2n) { background-color: @mantle; } + .online { + color: @text !important; + } } // Anime page Update button @@ -569,7 +573,93 @@ .bgColor2 { background-color: transparent; } + } + + /* Episodes section */ + + .episode_list { + .episode-list-header { + background-color: @surface0 !important; + td { + color: @text !important; + border-color: @surface2 !important; + } + } + .episode-list-data td { + color: @text; + background-color: @mantle !important; + border-color: @surface1 !important; + .average { + color: @subtext0; + } + } + .episode-list-data:nth-of-type(2n + 1) td { + background-color: @crust !important; + } + + } + // single episode view + + .has-multi-episodes-info { + background-color: @surface0; + } + .episode-information { + background-color: @surface0; + .user-status-block { + background-color: transparent; + .btn-forum-episode { + color: var(--color-text-light) !important; + background-color: var(--color-accent-background); + border-color: transparent; + .di-ib { + color: var(--color-text-light) !important; + background-color: transparent !important; + transition-duration: .3s; + } + } + .btn-forum-episode:hover { + color: var(--color-accent-background-hover) !important; + background-color: transparent; + border-color: var(--color-accent-background-hover); + .di-ib { + color: var(--color-accent-background-hover) !important; + } + } + } + .video-providers { + color: @text; + } + .btn-rect { + border-color: var(--color-accent-background); + &.on, + &:hover { + color: var(--color-text-light) !important; + background-color: var(--color-accent-background); + } + } + } + + .btn-video-anime-slide { + background-color: @crust; + } + .btn-video-anime-slide:hover { + color: @crust !important; + background-color: var(--color-accent-background-hover); + + } + .video-anime-slide-block { + border-color: @surface0; + .btn-anime { + background-color: transparent; + .link { + background-color: @surface0; + .icon-play, + .episode-number { + color: @accent-color; + } + } + } } /* Review Page */ From e93d5fa913cfc2e5b17d7861007514d1cfdc70cb Mon Sep 17 00:00:00 2001 From: K1aymore Date: Thu, 28 Nov 2024 22:03:33 -0800 Subject: [PATCH 12/39] Stats and Reviews sections --- styles/myanimelist/catppuccin.user.css | 32 ++++++++++++++++++++++---- 1 file changed, 27 insertions(+), 5 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index c1a39e4674..247cb29520 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -61,8 +61,8 @@ --color-text-dark: if((@lookup = latte), @text, @mantle); --color-accent-background: if( (@lookup = latte), - desaturate(lighten(@accent-color, 4%), 0%), - desaturate(darken(@accent-color, 28%), 25%) + desaturate(lighten(@accent-color, 5%), 0%), + desaturate(darken(@accent-color, 24%), 20%) ); --color-accent-background-hover: if( (@lookup = latte), @@ -314,7 +314,7 @@ background-color: @surface0; } - /* Anime / Manga Details Page */ + /* Anime / Manga Details page */ .left-info-block-broadcast-button { color: @text !important; @@ -549,7 +549,7 @@ } } - /* Characters and Staff page */ + /* Characters and Staff section */ .border_solid { border-color: @surface1; @@ -662,7 +662,29 @@ } } - /* Review Page */ + /* Stats section */ + + .updatesBar { + background-color: var(--color-accent-background); + } + + /* Reviews section */ + + .reviews-horiznav-nav-sort-block { + border-color: @surface0; + .filtered-results-box { + color: @subtext0; + } + .btn-show-sort, + .btn-show-filter, + .btn-crossedbox, + .btn-checkbox { + // TODO: boxes and dropdown arrows not themed + color: @subtext0; + } + } + + /* Opened Review Page */ .button_edit { background-color: @surface0; From 51836ea04db0c7bcc7074386eb95526fdc68d64c Mon Sep 17 00:00:00 2001 From: K1aymore Date: Fri, 29 Nov 2024 01:37:26 -0800 Subject: [PATCH 13/39] Reorganize a little. Recommendations section. Clashing .bgColor1 definitions but it's fine --- styles/myanimelist/catppuccin.user.css | 90 +++++++++++++++++++------- 1 file changed, 65 insertions(+), 25 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 247cb29520..2d95c40c1e 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -169,29 +169,16 @@ /* Content */ - #content, - .borderClass, - .container-left, - .container-right { + #content { background-color: @base !important; border-color: @surface0 !important; - h2, - h5 { - color: @text; - border-color: @surface1; - } - .fn-grey1 { - color: @subtext0 !important; - } - .fn-grey2 { - color: @subtext1 !important; - } - .dark_text { - color: @subtext0; - } /* Profile */ + .container-left { + border-right-color: @surface0; + } + // Buttons below profile picture // STYLE: the colors of these really could be whatever .icon-user-function { @@ -254,6 +241,23 @@ color: @subtext1 !important; } + // Favorites and Comments sections + h2, + h5 { + color: @text; + border-color: @surface1; + } + + .fn-grey1 { + color: @subtext0 !important; + } + .fn-grey2 { + color: @subtext1 !important; + } + .dark_text { + color: @subtext0; + } + // STYLE: In Latte, hovering over favorites makes them lighter rather than darker. // This reverts it but I'm not sure which looks better /* .btn-fav { @@ -316,6 +320,10 @@ /* Anime / Manga Details page */ + .borderClass { + border-color: @surface0; + } + .left-info-block-broadcast-button { color: @text !important; background-color: @surface0 !important; @@ -328,16 +336,16 @@ // add / remove from favorites button #profileRows a { - border-color: @surface2; + border-color: @surface2; // STYLE: original uses more accent color &:hover { - background-color: @surface0; + background-color: @surface1; } } // right side #horiznav_nav { - border-color: @surface0; + border-color: @surface2; a, li { color: @text !important; @@ -403,8 +411,14 @@ border-right-color: @surface0; } - .detail-characters-list .divider::after { - border-right-color: @surface0; + .detail-characters-list { + table:nth-of-type(2n) { + background-color: @mantle; + } + + .divider::after { + border-right-color: @surface0; + } } // Intro / Outro play button @@ -533,14 +547,14 @@ .forum_boardrow1 { background-color: transparent; - border-color: @surface1; + border-color: @surface0; .lightLink { color: @subtext0; } } .forum_boardrow2 { background-color: @mantle; - border-color: @surface1; + border-color: @surface0; .watch-state-icon { color: @surface2; } @@ -569,6 +583,7 @@ .spaceit_pad[style*="color"] { color: @subtext0 !important; } + // affected by Recommendations section .bgColor1 .bgColor1, .bgColor2 { background-color: transparent; @@ -668,6 +683,15 @@ background-color: var(--color-accent-background); } + .table-recently-updated { + tr:nth-of-type(2n) td { + background-color: @mantle; + } + tr:nth-of-type(2n + 1) td { + background-color: transparent; + } + } + /* Reviews section */ .reviews-horiznav-nav-sort-block { @@ -695,6 +719,22 @@ background-color: @surface0; border-color: transparent; } + + /* Recommendations section */ + + a.button_add.button_add { + background-color: @surface0; + border-color: transparent; + } + + .borderClass.bgColor1 { + background-color: @surface0; + } + + div[style*="overflow: hidden; padding: 10px 0; border-bottom: solid #cdcdcd 1px"] { + border-bottom-color: @surface2 !important; + } + } // end of #content #footer-block { From d26b76941e38d4daa8af39d497d1a4c16339f90e Mon Sep 17 00:00:00 2001 From: K1aymore Date: Sat, 30 Nov 2024 00:47:05 -0800 Subject: [PATCH 14/39] Fix some issues, start interest stacks --- styles/myanimelist/catppuccin.user.css | 55 +++++++++++++++++++++++--- 1 file changed, 49 insertions(+), 6 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 2d95c40c1e..0dd3735101 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -583,11 +583,17 @@ .spaceit_pad[style*="color"] { color: @subtext0 !important; } - // affected by Recommendations section .bgColor1 - .bgColor1, + .bgColor2 { background-color: transparent; } + .borderClass.bgColor1 { + background-color: @mantle; + .bgColor1 { + background-color: @mantle; + } + } + } /* Episodes section */ @@ -604,12 +610,16 @@ color: @text; background-color: @mantle !important; border-color: @surface1 !important; + .malicon.malicon-movie-episode { + color: @accent-color; + } .average { color: @subtext0; + // TODO: average bor is not colored } } .episode-list-data:nth-of-type(2n + 1) td { - background-color: @crust !important; + background-color: @base !important; } } @@ -677,6 +687,12 @@ } } + /* Videos section */ + + .episode-video .video-providers { + color: @subtext1; + } + /* Stats section */ .updatesBar { @@ -727,19 +743,46 @@ border-color: transparent; } - .borderClass.bgColor1 { - background-color: @surface0; + td .borderClass.bgColor1 { + background-color: transparent; // should be slightly lighter than base but @surface0 looks bad in Latte } div[style*="overflow: hidden; padding: 10px 0; border-bottom: solid #cdcdcd 1px"] { border-bottom-color: @surface2 !important; } + /* Interest Stacks section */ + + .stacks { + .navi { + border-color: @surface0; + .btn-show-sort { + color: @text; + // TODO: dropdown arrow not themed + } + .btn-show-spoilers { + color: @text; + i.fas { + color: @surface0; + } + &.on i.fas { + color: @accent-color; + } + } + } + .stack-balloon { + .balloon { + background-color: @surface0; + } + } + } + + } // end of #content #footer-block { color: @text !important; - background-color: @mantle !important; + background-color: @base !important; .footer-link-block { // TODO: divider image not inverted in Latte } From 2bbc7803e12572f3af110f6592a8194d34b543aa Mon Sep 17 00:00:00 2001 From: K1aymore Date: Wed, 4 Dec 2024 18:43:43 -0800 Subject: [PATCH 15/39] Finish info stack page --- styles/myanimelist/catppuccin.user.css | 94 +++++++++++++++++++++----- 1 file changed, 76 insertions(+), 18 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 0dd3735101..f54ff81b3b 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -324,22 +324,30 @@ border-color: @surface0; } - .left-info-block-broadcast-button { - color: @text !important; - background-color: @surface0 !important; - } - .inputtext { - color: @text; - background-color: @surface0; - border-color: transparent; - } + .leftside { + .left-info-block-broadcast-button { + color: @text !important; + background-color: @surface0 !important; + } - // add / remove from favorites button - #profileRows a { - border-color: @surface2; // STYLE: original uses more accent color - &:hover { - background-color: @surface1; + .notice_open_public { + color: @maroon; + } + + .inputtext { + color: @text; + background-color: @surface0; + border-color: transparent; + } + + // add / remove from favorites button + #profileRows a { + border-color: @surface2; // STYLE: original uses more accent color + &:hover { + background-color: @surface1; + } } + } // right side @@ -770,13 +778,63 @@ } } } - .stack-balloon { - .balloon { - background-color: @surface0; + .recent-list { + .tag { + background-color: transparent; + .tag-anime { + background-color: if( + (@lookup = latte), + desaturate(lighten(@maroon, 5%), 0%), + desaturate(darken(@maroon, 24%), 20%) + ); + } + } + .foot { + .stat { + color: @subtext0; + } + .fa-ellipsis-h { + color: @subtext0; + } + .stack-balloon { + .fa-layer-plus { + color: @subtext0; + } + + .balloon { + background-color: @surface0; + border-color: @surface2 !important; + p { + color: @subtext0; + } + } + // border of arrow + .balloon::before { + border-right-color: @surface2 !important; + } + // background of arrow + .balloon::after { + border-right-color: @surface0 !important; + } + } } } - } + .pagination { + .link.current, + .link:hover { + color: var(--color-text-light) !important; + background-color: var(--color-accent-background) !important; + } + .link { + color: @accent-color !important; + background-color: @surface0 !important; + } + .skip { + color: @subtext0; + } + } + } } // end of #content From 2096864298a1a317cffc23d490d290b12b30846a Mon Sep 17 00:00:00 2001 From: K1aymore Date: Wed, 4 Dec 2024 20:33:39 -0800 Subject: [PATCH 16/39] Forum pages, shared anime/manga page --- styles/myanimelist/catppuccin.user.css | 263 ++++++++++++++++++++----- 1 file changed, 214 insertions(+), 49 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index f54ff81b3b..572f48ef04 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -72,6 +72,11 @@ --color-recommended: desaturate(@blue, 30%); --color-mixed-feelings: @subtext0; --color-not-recommended: @maroon; + --color-red-background: if( + (@lookup = latte), + desaturate(lighten(@red, 5%), 0%), + desaturate(darken(@red, 24%), 20%) + ); /* General */ @@ -102,6 +107,16 @@ } } + .fn-grey1 { + color: @subtext0 !important; + } + .fn-grey2 { + color: @subtext1 !important; + } + .dark_text { + color: @subtext0; + } + /* Headers */ // top header @@ -177,39 +192,51 @@ .container-left { border-right-color: @surface0; - } - // Buttons below profile picture - // STYLE: the colors of these really could be whatever - .icon-user-function { - background-color: @surface0; - border-color: @surface2 !important; - // icon color - i.fas { - color: @subtext0; - } + .user-profile { + // Buttons below profile picture + // STYLE: the colors of these really could be whatever + .icon-user-function { + background-color: @crust; + border-color: @surface0 !important; + // icon color + i.fas { + color: @subtext0; + } - &:hover { - background-color: @surface1; - } - &.disabled { - background-color: @surface1; - i.fas { - color: @overlay0; + &:hover { + background-color: @base; + } + &.disabled { + background-color: @surface0; + i.fas { + color: @overlay0; + } + } } - } - } - // STYLE: we could set both to mantle but originally it has alternating row colors - .user-status { - li { - background-color: @crust; - } - li:nth-of-type(2n) { - background-color: @mantle; - } - .online { - color: @text !important; + // STYLE: we could set both to mantle but originally it has alternating row colors + .user-status { + border-top-color: @surface0; + li { + background-color: @crust; + } + li:nth-of-type(2n) { + background-color: @mantle; + } + .online { + color: @text !important; + } + } + + h4 { + border-bottom-color: @surface0; + } + + .user-compatability-graph .bar-outer { + background-color: @crust; + border-color: @surface0; + } } } @@ -247,17 +274,11 @@ color: @text; border-color: @surface1; } - - .fn-grey1 { - color: @subtext0 !important; - } - .fn-grey2 { - color: @subtext1 !important; - } - .dark_text { - color: @subtext0; + .fav-slide .btn-fav .link .image { + border-color: @surface0; } + // STYLE: In Latte, hovering over favorites makes them lighter rather than darker. // This reverts it but I'm not sure which looks better /* .btn-fav { @@ -318,6 +339,25 @@ background-color: @surface0; } + /* Shared Anime / Manga */ + + .shared-table { + tr td.borderClass { + .shared-core-higher { + color: @red; + } + .shared-core-lower { + color: @sapphire; + } + &.shared-match { + background-color: @surface0; + .button_edit { + background-color: @surface1; + } + } + } + } + /* Anime / Manga Details page */ .borderClass { @@ -771,22 +811,19 @@ .btn-show-spoilers { color: @text; i.fas { - color: @surface0; + color: @surface2; } &.on i.fas { color: @accent-color; } } } - .recent-list { + .recent-list .column-item { + border-bottom-color: @surface0; .tag { background-color: transparent; .tag-anime { - background-color: if( - (@lookup = latte), - desaturate(lighten(@maroon, 5%), 0%), - desaturate(darken(@maroon, 24%), 20%) - ); + background-color: var(--color-red-background); } } .foot { @@ -794,23 +831,29 @@ color: @subtext0; } .fa-ellipsis-h { - color: @subtext0; + color: @surface2; + &:hover { + color: @accent-color; + } } .stack-balloon { .fa-layer-plus { - color: @subtext0; + color: @surface2; + &:hover { + color: @accent-color; + } } .balloon { background-color: @surface0; - border-color: @surface2 !important; + border-color: @surface1 !important; p { color: @subtext0; } } // border of arrow .balloon::before { - border-right-color: @surface2 !important; + border-right-color: @surface1 !important; } // background of arrow .balloon::after { @@ -836,6 +879,128 @@ } } + /* Forum section */ + + .page-forum #forumTopics { + .forum-table-header { + background-color: @surface1 !important; + .normal_header { + color: @text; + border-color: @surface2; + } + } + } + + // actual forum view + + .clearfix { + a.mal-btn.secondary.outline { + color: @subtext0 !important; + border-color: @surface1; + } + .forum_locheader { + color: @text; + } + } + + .forum { + .mal-navbar { + background-color: @surface0; + button.mal-btn.secondary.outline { + color: @subtext1; + border-color: @surface2; + } + .mal-badge { + background-color: var(--color-red-background); + } + .mal-btn-group { + .mal-btn.primary { + color: var(--color-text-light); + background-color: var(--color-accent-background); + border-color: var(--color-accent-background); + } + .mal-btn.primary.outline { + color: @accent-color; + background-color: transparent; + border-color: @surface2; + &:hover { + background-color: @surface1; + } + } + } + &.topic-reply-bar .mal-btn.primary { + color: var(--color-text-light); + background-color: var(--color-accent-background); + border-color: transparent; + // STYLE: other buttons fade in but originally this one does not +/* transition-duration: 0.3s; + transition-property: background-color; + transition-timing-function: ease-in-out; */ + &:hover { + background-color: var(--color-accent-background-hover); + } + } + } + + .message-header { + color: @text; + background-color: @surface1; + .postnum { + color: @text !important; // overwrite link setting + } + } + + .message-container, + .message-wrapper { + .profile { + color: @subtext0; + background-color: @surface0; + border-color: @surface0; + .userstatus { + &.online { + color: @green; + } + } + } + .content { + border-color: @surface0; + .mal-post-toolbar { + button.mal-btn.secondary.outline { + color: @subtext0; + } + } + .item.update { + color: @subtext0; + } + .quotetext { + background-color: @surface0 !important; + border-color: transparent; + } + .sig-container { + border-color: @surface0; + } + } + } + + .forum-topics { + tr { + td { + border-color: @surface0; + } + td:nth-child(2n+1) { + background-color: @mantle; + } + } + } + } + + /* Pictures section */ + + .picSurround .js-picture-gallery .lazyloaded { + background-color: @surface0; + border-color: @surface1; + } + } // end of #content #footer-block { From 7fbd46074bcbc279861ff537cf6bf9289c6bcace Mon Sep 17 00:00:00 2001 From: K1aymore Date: Wed, 4 Dec 2024 20:35:26 -0800 Subject: [PATCH 17/39] Fix greys --- styles/myanimelist/catppuccin.user.css | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 572f48ef04..07799fdc1c 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -107,14 +107,16 @@ } } - .fn-grey1 { - color: @subtext0 !important; - } - .fn-grey2 { - color: @subtext1 !important; - } - .dark_text { - color: @subtext0; + .page-common { + .fn-grey1 { + color: @subtext0 !important; + } + .fn-grey2 { + color: @subtext1 !important; + } + .dark_text { + color: @subtext0; + } } /* Headers */ From 104d2ccb449273a65cc9f501b94c1c7219987875 Mon Sep 17 00:00:00 2001 From: K1aymore Date: Wed, 4 Dec 2024 21:00:25 -0800 Subject: [PATCH 18/39] Report page --- styles/myanimelist/catppuccin.user.css | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 07799fdc1c..3bd9aa9d50 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -117,6 +117,16 @@ .dark_text { color: @subtext0; } + + .normal_header { + color: @text; + border-color: @surface1; + } + .inputtext { + color: @text; + background-color: @base; + border-color: @surface0; + } } /* Headers */ @@ -1003,6 +1013,18 @@ border-color: @surface1; } + /* Report page */ + + #dialog { + background-color: @surface0; + border-color: @surface0 !important; + #abuse_report.inputtext { + color: @text; + background-color: @surface1; + border-color: @surface1; + } + } + } // end of #content #footer-block { From d8e19362d2e40d917612114add3a5d2cbf8c3c4c Mon Sep 17 00:00:00 2001 From: K1aymore Date: Thu, 5 Dec 2024 00:25:28 -0800 Subject: [PATCH 19/39] Homepage almost done --- styles/myanimelist/catppuccin.user.css | 144 +++++++++++++++++++------ 1 file changed, 112 insertions(+), 32 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 3bd9aa9d50..cf2e7190b4 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -200,55 +200,135 @@ background-color: @base !important; border-color: @surface0 !important; - /* Profile */ - .container-left { border-right-color: @surface0; + } - .user-profile { - // Buttons below profile picture - // STYLE: the colors of these really could be whatever - .icon-user-function { - background-color: @crust; - border-color: @surface0 !important; - // icon color - i.fas { - color: @subtext0; + .left-column { + border-color: @surface0; + } + + /* Home Page */ + + .widget-container { + .widget .widget-header { + color: @text; + border-color: @surface1; + } + .widget.my_statistics table td:nth-child(1) { + color: @subtext0; + } + .widget.friend_list_updates { + .updated-time { + color: @subtext0; + } + .navi-btn { + color: @subtext0; + } + &.right .item:not(:last-child) { + border-bottom-color: @surface0; + } + .footer { + background-color: @surface0; + border-top-color: @surface0; + .btn-settings { + color: @accent-color; } + } + } + #widget-manga-store .widget-slide { + .external-link { + background-color: transparent; + } + } + .icon-about-recommendations { + color: @accent-color; + } - &:hover { - background-color: @base; + .news-list .news-unit { + border-bottom-color: @surface0; + .information { + .info { + color: @subtext0; } - &.disabled { - background-color: @surface0; - i.fas { - color: @overlay0; - } + .pv { + color: @subtext0; + border-left-color: @surface1; + } + .tags .tag { + border-left-color: @surface1; } } + } - // STYLE: we could set both to mantle but originally it has alternating row colors - .user-status { - border-top-color: @surface0; - li { - background-color: @crust; - } - li:nth-of-type(2n) { - background-color: @mantle; + .widget.reviews .item { + border-color: @surface0; + } + + .ranking-digest { + background-color: @surface0; + .ranking-header { + background-color: @surface1; + border-color: transparent; + } + .ranking-unit { + .rank, + .info, + .members { + color: @subtext0; } - .online { - color: @text !important; + .data a.button_add.button_add { + background-color: @surface1; } } + } + } - h4 { - border-bottom-color: @surface0; + /* Profile */ + + .user-profile { + // Buttons below profile picture + // STYLE: the colors of these really could be whatever + .icon-user-function { + background-color: @crust; + border-color: @surface0 !important; + // icon color + i.fas { + color: @subtext0; + } + + &:hover { + background-color: @base; + } + &.disabled { + background-color: @surface0; + i.fas { + color: @overlay0; + } } + } - .user-compatability-graph .bar-outer { + // STYLE: we could set both to mantle but originally it has alternating row colors + .user-status { + border-top-color: @surface0; + li { background-color: @crust; - border-color: @surface0; } + li:nth-of-type(2n) { + background-color: @mantle; + } + .online { + color: @text !important; + } + } + + h4 { + border-bottom-color: @surface0; + } + + .user-compatability-graph .bar-outer { + background-color: @crust; + border-color: @surface0; } } From 7faf43c48478d3865412049775bf964a2b0efec0 Mon Sep 17 00:00:00 2001 From: K1aymore Date: Thu, 5 Dec 2024 16:44:33 -0800 Subject: [PATCH 20/39] Logged out improvements, home page done --- styles/myanimelist/catppuccin.user.css | 118 ++++++++++++++++++++----- 1 file changed, 94 insertions(+), 24 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index cf2e7190b4..46c5b9e92e 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -107,6 +107,7 @@ } } + .page-common { .fn-grey1 { color: @subtext0 !important; @@ -127,6 +128,25 @@ background-color: @base; border-color: @surface0; } + + div.picSurround img { + background-color: @crust; + border-color: @crust; + } + + #gdpr-modal-bottom { + background: @surface0; + .modal-wrapper { + border-color: transparent; + .modal-container { + color: @text; + background-color: @surface1; + button[data-v-53da086b] { + background-color: var(--color-accent-background); + } + } + } + } } /* Headers */ @@ -138,6 +158,19 @@ .fa-solid { color: @subtext1 !important; } + #header-menu { + .btn-mal-service { + color: @accent-color !important; + } + .btn-login { + color: @text !important; + background-color: @surface0 !important; + } + .btn-signup { + color: var(--color-text-light) !important; + background-color: var(--color-accent-background) !important; + } + } .header-menu-unit.header-profile { background-color: transparent; .header-profile-link { @@ -215,32 +248,19 @@ color: @text; border-color: @surface1; } - .widget.my_statistics table td:nth-child(1) { - color: @subtext0; - } - .widget.friend_list_updates { - .updated-time { - color: @subtext0; - } - .navi-btn { - color: @subtext0; - } - &.right .item:not(:last-child) { - border-bottom-color: @surface0; - } - .footer { - background-color: @surface0; - border-top-color: @surface0; - .btn-settings { - color: @accent-color; - } + + .btn-anime { + background-color: transparent; + border-color: @crust !important; + .link { + border-color: @crust !important; } - } - #widget-manga-store .widget-slide { .external-link { - background-color: transparent; + background-color: transparent !important; } } + // TODO: paid episode symbol not themed + .icon-about-recommendations { color: @accent-color; } @@ -265,6 +285,35 @@ border-color: @surface0; } + .widget.my_list_updates .item { + border-color: @surface0; + } + + // right side + + .widget.my_statistics table td:nth-child(1) { + color: @subtext0; + } + .widget.friend_list_updates { + .updated-time { + color: @subtext0; + } + .navi-btn { + color: @subtext0; + } + &.right .item:not(:last-child) { + border-bottom-color: @surface0; + } + .footer { + background-color: @surface0; + border-top-color: @surface0; + .btn-settings { + color: @accent-color; + } + } + } + + // STYLE: background is a little strong .ranking-digest { background-color: @surface0; .ranking-header { @@ -284,6 +333,8 @@ } } + // TODO: hover popups on home page are not themed + /* Profile */ .user-profile { @@ -370,7 +421,6 @@ border-color: @surface0; } - // STYLE: In Latte, hovering over favorites makes them lighter rather than darker. // This reverts it but I'm not sure which looks better /* .btn-fav { @@ -431,7 +481,7 @@ background-color: @surface0; } - /* Shared Anime / Manga */ + /* Shared Anime / Manga page */ .shared-table { tr td.borderClass { @@ -1107,16 +1157,36 @@ } // end of #content + .footer-ranking { + background-color: @base !important; + .ranking-unit { + .title { + border-bottom-color: @surface0 !important; + } + .rank { + color: @subtext1; + } + } + } + #footer-block { color: @text !important; background-color: @base !important; .footer-link-block { // TODO: divider image not inverted in Latte } + .footer-social-media { + &::before { + color: @subtext0 !important; + } + } .footer-link-icon-block { .footer-recommended::before { color: @subtext0; } + .footer-app::before { + color: @subtext0; + } } #copyright { color: @subtext0 !important; From 9e7c3c0be755d5ceff16e41220321108a9ef8fdb Mon Sep 17 00:00:00 2001 From: K1aymore Date: Thu, 5 Dec 2024 19:58:37 -0800 Subject: [PATCH 21/39] Manga page and dropdowns themed --- styles/myanimelist/catppuccin.user.css | 151 ++++++++++++++++++++++++- 1 file changed, 149 insertions(+), 2 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 46c5b9e92e..76b10952ee 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -129,6 +129,10 @@ border-color: @surface0; } + .border_bottom { + border-bottom-color: @surface0; + } + div.picSurround img { background-color: @crust; border-color: @crust; @@ -156,7 +160,7 @@ background-color: transparent !important; // icons .fa-solid { - color: @subtext1 !important; + color: @subtext1; } #header-menu { .btn-mal-service { @@ -182,6 +186,63 @@ } } + .header-list-dropdown { + ul li a { + color: @text !important; + background-color: @base; + &:hover { + color: @crust !important; + background-color: @text !important; + } + } + } + + .header-notification-dropdown { + .arrow_box { + background-color: @mantle; + border-color: @surface0; + } + + h3 { + border-bottom-color: @surface0; + .mark-all.disabled { + color: @overlay0; + .fa-solid { + color: @overlay0; + } + } + .settings .fa-solid { + color: @accent-color; + } + } + .header-notification-item { + border-bottom-color: @surface0; + &:hover { + background-color: transparent; + } + .inner { + + } + .inner.is-read { + color: @overlay1; + .category { + color: @overlay1; + } + .time { + color: @overlay1; + } + .message { + color: @overlay1; + } + } + } + .header-notification-view-all a { + color: @text !important; + background-color: @surface0; + border-top-color: @surface1; + } + } + // TODO: "MyAnimeList" logo doesn't change in Latte // borders between icons not themed (not very important) } @@ -197,6 +258,15 @@ color: var(--color-text-light) !important; } + #nav.color-pc-constant ul li a { + color: @text !important; + background-color: @base; + &:hover { + color: @crust !important; + background-color: @text !important; + } + } + // search bar .inputtext { color: @text !important; @@ -220,6 +290,9 @@ background-color: @base !important; // should be surface0 but I don't think it looks good border-color: @surface0 !important; border-bottom-color: @surface1 !important; + .title-english { + color: @overlay1 !important; + } } // changes space between content and footer @@ -507,15 +580,18 @@ } .leftside { + // Watch Episodes button .left-info-block-broadcast-button { color: @text !important; background-color: @surface0 !important; } + // your list is public warning .notice_open_public { - color: @maroon; + color: @red; } + // edit status fields .inputtext { color: @text; background-color: @surface0; @@ -530,6 +606,21 @@ } } + // Read Preview button + .left-info-block-manga-store-button { + color: @text !important; + background-color: @surface0; + } + + // streaming platforms asterisk + .broadcasts { + .caption::after { + color: @red; + } + .info { + color: @red; + } + } } // right side @@ -553,6 +644,8 @@ background-color: @mantle; border-color: @surface0; + // TODO: star for rating selector is not themed (necessary?) + // TODO: dropdown popups not themed .score { // score title box &::before { @@ -577,6 +670,7 @@ } .information { + color: @subtext0; border-right-color: @surface0; } } @@ -597,6 +691,22 @@ } } + .manga-store-preview { + border-color: @surface0; + .manga-store-preview-info-header { + color: @subtext1; + border-bottom-color: @surface0; + } + .button[data-v-d5cbbdaa] { + color: var(--color-text-light) !important; + background-color: var(--color-accent-background); + border-color: transparent; + &:hover { + background-color: var(--color-accent-background-hover); + } + } + } + .related-entries .entry:nth-child(2n + 1)::after { border-right-color: @surface0; } @@ -912,6 +1022,34 @@ // TODO: boxes and dropdown arrows not themed color: @subtext0; } + + // sort popup + // TODO: selected circle not themed + .review-sort-order-block { + background-color: @mantle; + border-color: @surface0; + .btn-close { + color: @subtext0; + } + .btn-sort-order { + color: @subtext0; + } + } + // filter popup + // TODO: check and X not themed + .review-filter-block { + background-color: @mantle; + border-color: @surface0; + .btn-filter { + color: @subtext0; + .fa-check { + color: @green; + } + .fa-xmark { + color: @red; + } + } + } } /* Opened Review Page */ @@ -1155,6 +1293,15 @@ } } + /* My Messages page */ + + .private-message-content { + .total_messages { + color: @text; + border-bottom-color: @surface0 !important; + } + } + } // end of #content .footer-ranking { From a747c5e7ca98f855116d87961aa3e94fc3d77c5f Mon Sep 17 00:00:00 2001 From: K1aymore Date: Thu, 5 Dec 2024 20:25:50 -0800 Subject: [PATCH 22/39] Custom status colors on profile pages --- styles/myanimelist/catppuccin.user.css | 132 ++++++++++++++++++++++--- 1 file changed, 119 insertions(+), 13 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 76b10952ee..3160dd7303 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -59,6 +59,7 @@ --color-text-light: if((@lookup = latte), @mantle, @text); --color-text-dark: if((@lookup = latte), @text, @mantle); + --color-accent-background: if( (@lookup = latte), desaturate(lighten(@accent-color, 5%), 0%), @@ -69,15 +70,43 @@ desaturate(lighten(@accent-color, 10%), 0%), desaturate(darken(@accent-color, 15%), 10%) ); - --color-recommended: desaturate(@blue, 30%); - --color-mixed-feelings: @subtext0; - --color-not-recommended: @maroon; + --color-red-background: if( (@lookup = latte), desaturate(lighten(@red, 5%), 0%), desaturate(darken(@red, 24%), 20%) ); + --color-recommended: desaturate(@blue, 30%); + --color-mixed-feelings: @subtext0; + --color-not-recommended: @maroon; + + --color-watching: if( + (@lookup = latte), + desaturate(darken(@green, 3%), 5%), + desaturate(darken(@green, 35%), 20%) + ); + --color-completed: if( + (@lookup = latte), + desaturate(darken(@blue, 12%), 40%), + desaturate(darken(@blue, 38%), 40%) + ); + --color-on-hold: if( + (@lookup = latte), + desaturate(lighten(@yellow, 9%), 8%), + desaturate(darken(@yellow, 30%), 30%) + ); + --color-dropped: if( + (@lookup = latte), + desaturate(darken(@red, 2%), 30%), + desaturate(darken(@red, 35%), 20%) + ); + --color-plan-to-watch: if( + (@lookup = latte), + desaturate(lighten(@subtext0, 2%), 20%), + desaturate(darken(@subtext0, 21%), 20%) + ); + /* General */ color-scheme: if(@lookup = latte, light, dark); @@ -107,7 +136,6 @@ } } - .page-common { .fn-grey1 { color: @subtext0 !important; @@ -123,16 +151,27 @@ color: @text; border-color: @surface1; } + .textarea, .inputtext { color: @text; - background-color: @base; + background-color: @surface0; border-color: @surface0; } + // your list is public warning + .notice_open_public { + color: @red; + } + .border_bottom { border-bottom-color: @surface0; } + .goodresult { + background-color: @surface0 !important; + border-color: @surface1 !important; + } + div.picSurround img { background-color: @crust; border-color: @crust; @@ -255,15 +294,22 @@ a:link, a:visited { + // STYLE: could be --color-text-dark if unreadable color: var(--color-text-light) !important; } + // sections when hovered + #nav.color-pc-constant li.hover a { + color: @text !important; + background-color: @base; + } + // hover popup options #nav.color-pc-constant ul li a { color: @text !important; background-color: @base; &:hover { - color: @crust !important; - background-color: @text !important; + color: @mantle !important; + background-color: var(--color-accent-background-hover) !important; } } @@ -476,8 +522,56 @@ // background of stats bars .graph:not(.anime, .manga), .stats-graph { - background-color: @crust; + background-color: @surface0; border-color: @crust; + .graph.watching { + background-color: var(--color-watching); + } + .graph.completed { + background-color: var(--color-completed); + } + .graph.on_hold { + background-color: var(--color-on-hold); + } + .graph.dropped { + background-color: var(--color-dropped); + } + .graph.plan_to_watch { + background-color: var(--color-plan-to-watch); + } + + .graph-inner.watching { + background-color: var(--color-watching); + } + .graph-inner.completed { + background-color: var(--color-completed); + } + .graph-inner.on_hold { + background-color: var(--color-on-hold); + } + .graph-inner.dropped { + background-color: var(--color-dropped); + } + .graph-inner.plan_to_watch { + background-color: var(--color-plan-to-watch); + } + } + .stats-status { + .circle.watching::after { + background-color: var(--color-watching); + } + .circle.completed::after { + background-color: var(--color-completed); + } + .circle.on_hold::after { + background-color: var(--color-on-hold); + } + .circle.dropped::after { + background-color: var(--color-dropped); + } + .circle.plan_to_watch::after { + background-color: var(--color-plan-to-watch); + } } // watching / score numbers .text { @@ -586,11 +680,6 @@ background-color: @surface0 !important; } - // your list is public warning - .notice_open_public { - color: @red; - } - // edit status fields .inputtext { color: @text; @@ -1304,6 +1393,23 @@ } // end of #content + // Edit Anime overlay from My List + #dialog { + background-color: @base; + border-color: @base !important; + #advanced-button { + .separator { + border-bottom-color: @surface0; + } + .toggle-button { + color: @accent-color; + background-color: @surface0 !important; + } + } + } + // TODO: "Send note to recent friend" checkbox not themed + + // Footer when not logged in .footer-ranking { background-color: @base !important; .ranking-unit { From 7a1d93b9689451bfa2cef6941ace2c425c42a7ea Mon Sep 17 00:00:00 2001 From: K1aymore Date: Thu, 5 Dec 2024 20:37:04 -0800 Subject: [PATCH 23/39] Deno fix my errors --- styles/myanimelist/catppuccin.user.css | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 3160dd7303..c1baf38ad7 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -258,9 +258,6 @@ border-bottom-color: @surface0; &:hover { background-color: transparent; - } - .inner { - } .inner.is-read { color: @overlay1; @@ -982,7 +979,6 @@ background-color: @mantle; } } - } /* Episodes section */ @@ -1010,7 +1006,6 @@ .episode-list-data:nth-of-type(2n + 1) td { background-color: @base !important; } - } // single episode view @@ -1029,7 +1024,7 @@ .di-ib { color: var(--color-text-light) !important; background-color: transparent !important; - transition-duration: .3s; + transition-duration: 0.3s; } } .btn-forum-episode:hover { @@ -1060,7 +1055,6 @@ .btn-video-anime-slide:hover { color: @crust !important; background-color: var(--color-accent-background-hover); - } .video-anime-slide-block { border-color: @surface0; @@ -1302,7 +1296,7 @@ background-color: var(--color-accent-background); border-color: transparent; // STYLE: other buttons fade in but originally this one does not -/* transition-duration: 0.3s; + /* transition-duration: 0.3s; transition-property: background-color; transition-timing-function: ease-in-out; */ &:hover { @@ -1356,7 +1350,7 @@ td { border-color: @surface0; } - td:nth-child(2n+1) { + td:nth-child(2n + 1) { background-color: @mantle; } } @@ -1390,7 +1384,6 @@ border-bottom-color: @surface0 !important; } } - } // end of #content // Edit Anime overlay from My List @@ -1438,7 +1431,7 @@ color: @subtext0; } .footer-app::before { - color: @subtext0; + color: @subtext0; } } #copyright { From f10fd8aceadb5368ead01c76ae67471fffe3f8bf Mon Sep 17 00:00:00 2001 From: K1aymore Date: Sat, 7 Dec 2024 22:33:41 -0800 Subject: [PATCH 24/39] some Interest Stack pages --- styles/myanimelist/catppuccin.user.css | 284 +++++++++++++++++++------ 1 file changed, 218 insertions(+), 66 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index c1baf38ad7..94f82d2b32 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -349,6 +349,53 @@ background-color: @base !important; border-color: @surface0 !important; + /* Basic Shared settings */ + + // report button + .fa-ellipsis-h { + color: @overlay1; + &:hover { + color: @accent-color; + } + } + + // on home page and in interest stacks + .graph.watching { + background-color: var(--color-watching); + } + .graph.completed { + background-color: var(--color-completed); + } + .graph.on_hold { + background-color: var(--color-on-hold); + } + .graph.dropped { + background-color: var(--color-dropped); + } + .graph.plan_to_watch { + background-color: var(--color-plan-to-watch); + } + + .graph-inner.watching { + background-color: var(--color-watching); + } + .graph-inner.completed { + background-color: var(--color-completed); + } + .graph-inner.on_hold { + background-color: var(--color-on-hold); + } + .graph-inner.dropped { + background-color: var(--color-dropped); + } + .graph-inner.plan_to_watch { + background-color: var(--color-plan-to-watch); + } + + .content-left { + border-right-color: @surface0; + } + .container-left { border-right-color: @surface0; } @@ -521,37 +568,6 @@ .stats-graph { background-color: @surface0; border-color: @crust; - .graph.watching { - background-color: var(--color-watching); - } - .graph.completed { - background-color: var(--color-completed); - } - .graph.on_hold { - background-color: var(--color-on-hold); - } - .graph.dropped { - background-color: var(--color-dropped); - } - .graph.plan_to_watch { - background-color: var(--color-plan-to-watch); - } - - .graph-inner.watching { - background-color: var(--color-watching); - } - .graph-inner.completed { - background-color: var(--color-completed); - } - .graph-inner.on_hold { - background-color: var(--color-on-hold); - } - .graph-inner.dropped { - background-color: var(--color-dropped); - } - .graph-inner.plan_to_watch { - background-color: var(--color-plan-to-watch); - } } .stats-status { .circle.watching::after { @@ -677,6 +693,13 @@ background-color: @surface0 !important; } + // "You'll be notified when it begins airing" message + .msg-frame { + color: @text; + background-color: @surface0; + border-color: @surface1; + } + // edit status fields .inputtext { color: @text; @@ -684,7 +707,8 @@ border-color: transparent; } - // add / remove from favorites button + // add / remove to list / favorites buttons + .profileRows a, #profileRows a { border-color: @surface2; // STYLE: original uses more accent color &:hover { @@ -793,8 +817,14 @@ } } - .related-entries .entry:nth-child(2n + 1)::after { - border-right-color: @surface0; + .related-entries { + .entry:nth-child(2n + 1)::after { + border-right-color: @surface0; + } + .entry:nth-child(4n), + .entry:nth-child(4n-1) { + background-color: @mantle; + } } .detail-characters-list { @@ -1142,7 +1172,8 @@ border-color: transparent; } - .tag { + // recommended / mixed / not recommend tag + .review-element .thumbbody .body .tag { background-color: @surface0; border-color: transparent; } @@ -1164,6 +1195,55 @@ /* Interest Stacks section */ + // add stack button + .stack-balloon { + .fa-layer-plus { + color: @overlay1; + &:hover { + color: @accent-color; + } + } + .fa-layer-minus { + color: @accent-color; + &:hover { + color: @overlay1; + } + } + + .balloon { + background-color: transparent; + border-color: @surface1 !important; + p { + color: @subtext0; + } + } + // border of arrow + .balloon::before { + border-right-color: @surface1 !important; + } + // background of arrow + .balloon::after { + border-right-color: @base !important; + } + + &.on .balloon { + background-color: @surface0 !important; + border-color: @surface0 !important; + p { + color: @accent-color !important; + } + } + // border of arrow + .balloon::before { + border-right-color: @surface0 !important; + } + // background of arrow + .balloon::after { + border-right-color: @surface0 !important; + } + } + + // anime/manga page section .stacks { .navi { border-color: @surface0; @@ -1193,36 +1273,6 @@ .stat { color: @subtext0; } - .fa-ellipsis-h { - color: @surface2; - &:hover { - color: @accent-color; - } - } - .stack-balloon { - .fa-layer-plus { - color: @surface2; - &:hover { - color: @accent-color; - } - } - - .balloon { - background-color: @surface0; - border-color: @surface1 !important; - p { - color: @subtext0; - } - } - // border of arrow - .balloon::before { - border-right-color: @surface1 !important; - } - // background of arrow - .balloon::after { - border-right-color: @surface0 !important; - } - } } } @@ -1242,6 +1292,98 @@ } } + .search-side { + form input { + color: @text; + background-color: @surface0; + border-color: @surface0; + } + form button { + color: @accent-color; + background-color: @surface0; + border-color: @surface0; + &:hover { + background-color: @base; + } + } + .quick-search a { + background-color: @surface0; + border-color: @surface0; + } + } + + .content-right { + h3.underline { + border-bottom-color: @surface1; + } + .side-list .column-item { + border-bottom-color: @surface0; + } + } + + // individal interest stack page + .stacks-detail { + .breadcrumbs_area.underline { + border-bottom-color: @surface1; + } + h2.title { + background-color: transparent; + } + .tag { + background-color: transparent; + } + .info-block { + color: @subtext0; + background-color: @surface0; + } + .introduction { + color: @text; + border-bottom-color: @surface1; + } + .any_status { + color: @subtext0; + background-color: @base; + strong { + color: @text; + } + .score { + background-color: @crust; + } + .view-style2 { + a { + background-color: @surface0; + border-color: @surface1; + } + a:hover { + background-color: @surface1; + } + a.on { + color: @base !important; + background-color: @accent-color; + } + } + } + .tile-anime-list .seasonal-anime { + .widget { + background-color: fade(@surface0, 95%); + .stars, + .users { + // STYLE: a little strange in Latte but is probably fine + color: @text; + } + } + .edit a { + &:hover { + color: @text !important; + } + &.completed { + color: var(--color-text-light) !important; + background-color: var(--color-accent-background); + } + } + } + } + /* Forum section */ .page-forum #forumTopics { @@ -1364,7 +1506,7 @@ border-color: @surface1; } - /* Report page */ + /* Report page and Edit Anime page */ #dialog { background-color: @surface0; @@ -1374,6 +1516,11 @@ background-color: @surface1; border-color: @surface1; } + #main-form .inputtext { + color: @text; + background-color: @surface1; + border-color: @surface1; + } } /* My Messages page */ @@ -1390,6 +1537,11 @@ #dialog { background-color: @base; border-color: @base !important; + .inputtext { + color: @text; + background-color: @surface0; + border-color: @surface0; + } #advanced-button { .separator { border-bottom-color: @surface0; From 44a47ad295ec080326ed5649b0fe7d297a257326 Mon Sep 17 00:00:00 2001 From: orangci Date: Sun, 8 Dec 2024 12:44:24 +0300 Subject: [PATCH 25/39] feat(myanimelist): theme profile dropdown menu --- styles/myanimelist/catppuccin.user.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index c1baf38ad7..c6d8c1db54 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -1441,6 +1441,13 @@ color: @subtext0 !important; } } + + .header-menu-dropdown * { + background-color: @surface0 !important; + } + .header-menu-dropdown *:hover { + background-color: @surface1 !important; + } } } From f15fe0bc8ef348e9e1392bcfd0ed57b8742702c2 Mon Sep 17 00:00:00 2001 From: orangci Date: Sun, 8 Dec 2024 12:54:20 +0300 Subject: [PATCH 26/39] feat(myanimelist): theme inner graph colours --- styles/myanimelist/catppuccin.user.css | 32 ++++++++++++++++++++------ 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index c6d8c1db54..8b89e51b66 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -192,6 +192,23 @@ } } + .wrok-graph-inner.reading, .wrok-graph-inner.watching { + background-color: @green !important; + } + .wrok-graph-inner.on_hold { + background-color: @yellow !important; + } + .wrok-graph-inner.completed { + background-color: @blue !important; + } + .work-graph { + background-color: @overlay0 !important; + } + .wrok-graph-inner.dropped { + background-color: @red !important; + } + + /* Headers */ // top header @@ -343,6 +360,13 @@ background-color: transparent !important; } + .header-menu-dropdown * { + background-color: @surface0 !important; + } + .header-menu-dropdown *:hover { + background-color: @surface1 !important; + } + /* Content */ #content { @@ -1441,13 +1465,7 @@ color: @subtext0 !important; } } - - .header-menu-dropdown * { - background-color: @surface0 !important; - } - .header-menu-dropdown *:hover { - background-color: @surface1 !important; - } + } } From 9c108c80c15a115e563e536526d66a9cbebe02f1 Mon Sep 17 00:00:00 2001 From: orangci Date: Sun, 8 Dec 2024 13:25:00 +0300 Subject: [PATCH 27/39] feat(myanimelist): theme top anime page --- styles/myanimelist/catppuccin.user.css | 31 ++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 8b89e51b66..d9732c5c5a 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -1466,6 +1466,37 @@ } } + /* Top Anime page */ + .top-ranking-table .table-header td { + background-color: @overlay0 !important; + color: @text !important; + } + tr.ranking-list:nth-child(even) td { + background-color: @surface0 !important; + } + tr.ranking-list:nth-child(odd) td { + background-color: @surface1 !important; + } + .information.di-ib { + color: @subtext1 !important; + } + td.status.ac .notinmylist, a.link-blue-box.next { + background-color: @mauve !important; + color: @crust !important; + } + td.status.ac .notinmylist:hover, a.link-blue-box.next:hover { + background-color: @surface0 !important; + color: @text !important; + } + td.status.ac .plantowatch, td.status.ac .watching, td.status.ac .on-hold, td.status.ac .completed, td.status.ac .dropped { + background-color: @surface0 !important; + color: @crust !important; + } + // TODO: theme the status buttons when hovered + .top-anime-rank-text.rank2 { + color: @subtext0 !important; + } + } } From 916ad97abe97021692897d5f3584e50c77b7ca52 Mon Sep 17 00:00:00 2001 From: orangci Date: Sun, 8 Dec 2024 13:26:24 +0300 Subject: [PATCH 28/39] feat(myanimelist): top manga page as well --- styles/myanimelist/catppuccin.user.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index d9732c5c5a..b313d0aee5 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -1466,7 +1466,7 @@ } } - /* Top Anime page */ + /* Top Anime/Manga page */ .top-ranking-table .table-header td { background-color: @overlay0 !important; color: @text !important; @@ -1488,7 +1488,7 @@ background-color: @surface0 !important; color: @text !important; } - td.status.ac .plantowatch, td.status.ac .watching, td.status.ac .on-hold, td.status.ac .completed, td.status.ac .dropped { + td.status.ac .plantowatch, td.status.ac .plantoread, td.status.ac .watching, td.status.ac .on-hold, td.status.ac .completed, td.status.ac .dropped { background-color: @surface0 !important; color: @crust !important; } From 457191216b95afba27918d6ed8c4e66fadc9d06d Mon Sep 17 00:00:00 2001 From: orangci Date: Sun, 8 Dec 2024 13:31:40 +0300 Subject: [PATCH 29/39] feat(myanimelist): theme status episode counts updates --- styles/myanimelist/catppuccin.user.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index b313d0aee5..67a9b21093 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -207,6 +207,19 @@ .wrok-graph-inner.dropped { background-color: @red !important; } + + .work-status-num.watching, .work-status-num.reading { + color: @green !important; + } + .work-status-num.on_hold { + color: @yellow !important; + } + .work-status-num.completed { + color: @blue !important; + } + .work-status-num.dropped { + color: @red !important; + } /* Headers */ From 9d3857176f91cfd82a9b64e9159e667721089d16 Mon Sep 17 00:00:00 2001 From: K1aymore Date: Sun, 8 Dec 2024 22:28:17 -0800 Subject: [PATCH 30/39] theme Search All page --- styles/myanimelist/catppuccin.user.css | 58 +++++++++++++++++++++++++- 1 file changed, 56 insertions(+), 2 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 6168471cdd..42b644853a 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -143,6 +143,9 @@ .fn-grey2 { color: @subtext1 !important; } + .fn-grey4 { + color: @subtext0 !important; + } .dark_text { color: @subtext0; } @@ -172,6 +175,7 @@ border-color: @surface1 !important; } + // image borders div.picSurround img { background-color: @crust; border-color: @crust; @@ -205,9 +209,9 @@ background-color: @overlay0 !important; } .wrok-graph-inner.dropped { - background-color: @red !important; + background-color: @red !important; } - + .work-status-num.watching, .work-status-num.reading { color: @green !important; } @@ -221,6 +225,9 @@ color: @red !important; } + .icon-watch2 .malicon.malicon-movie-episode { + color: @accent-color; + } /* Headers */ @@ -1570,6 +1577,53 @@ } } // end of #content + /* Search All page */ + + .page-common .incrementalSearchResultList { + background-color: @surface1; + border-color: @surface1; + .list.list-bottom.focus { + color: @text; + background-color: @surface0; + border-color: @surface1; + } + } + + .search_all { + .result-header { + color: var(--color-text-light); + background-color: var(--color-accent-background); + } + .link-content-jump { + .link.on { + color: var(--color-text-light) !important; + background-color: var(--color-accent-background); + } + } + .content-result { + .list { + border-bottom-color: @surface0; + } + } + .btn-search-more { + color: var(--color-text-light) !important; + background-color: var(--color-accent-background); + &:hover { + background-color: var(--color-accent-background-hover); + } + } + } + + .anime-search-form-block .anime-search-form-search { + .inputtext { + color: @text; + border-color: @surface1; + } + .inputButton { + border-color: @surface1; + } + } + // Edit Anime overlay from My List #dialog { background-color: @base; From 4df4ffb5f62f7ad12b660558d32e019e966e3c83 Mon Sep 17 00:00:00 2001 From: K1aymore Date: Sun, 8 Dec 2024 23:30:03 -0800 Subject: [PATCH 31/39] Different views in Interest Stacks --- styles/myanimelist/catppuccin.user.css | 120 +++++++++++++++++++++++-- 1 file changed, 113 insertions(+), 7 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 42b644853a..30a7063545 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -175,6 +175,10 @@ border-color: @surface1 !important; } + .h3_anime_subtitle { + color: @subtext0; + } + // image borders div.picSurround img { background-color: @crust; @@ -585,8 +589,8 @@ } .user-compatability-graph .bar-outer { - background-color: @crust; - border-color: @surface0; + background-color: @surface0; + border-color: @surface1; } } @@ -611,7 +615,7 @@ .graph:not(.anime, .manga), .stats-graph { background-color: @surface0; - border-color: @crust; + border-color: @surface0; } .stats-status { .circle.watching::after { @@ -1224,7 +1228,7 @@ /* Recommendations section */ - a.button_add.button_add { + .borderClass a.button_add.button_add { background-color: @surface0; border-color: transparent; } @@ -1362,6 +1366,9 @@ } .side-list .column-item { border-bottom-color: @surface0; + .detail .foot .stat { + color: @subtext0; + } } } @@ -1371,10 +1378,14 @@ border-bottom-color: @surface1; } h2.title { - background-color: transparent; + background-color: @base; } .tag { - background-color: transparent; + background-color: @base; + .tag-anime { + color: var(--color-text-light); + background-color: var(--color-red-background); + } } .info-block { color: @subtext0; @@ -1391,7 +1402,11 @@ color: @text; } .score { - background-color: @crust; + background-color: @surface0; + } + .btn-report .report-block { + background-color: @surface0; + border-color: @surface1; } .view-style2 { a { @@ -1407,6 +1422,8 @@ } } } + + // tile view .tile-anime-list .seasonal-anime { .widget { background-color: fade(@surface0, 95%); @@ -1426,6 +1443,95 @@ } } } + // two-side view + .seasonal-anime-list .seasonal-anime { + border-color: @surface1 !important; + .prodsrc { + color: @subtext0; + background-color: transparent; + .malicon { + color: @overlay1; + } + .info .item:nth-child(n+2) { + border-left-color: @surface1; + } + } + .genres { + background-color: @surface0; + border-bottom-color: @surface1 !important; + .genre { + background-color: @surface1 !important; + border-color: @surface1 !important; + a { + color: @subtext0 !important; + } + } + } + .image { + background-color: @surface0; + } + .fa-angle-down { + color: @subtext0; + } + .properties .property { + color: @text; + background-color: @mantle; + &:nth-child(2n) { + background-color: @base; + } + } + .information { + background-color: @surface0; + border-top-color: @surface1 !important; + .information-item { + color: @subtext0; + .button.addtolist { + color: var(--color-text-light) !important; + background-color: var(--color-accent-background); + } + } + } + } + // list view + .list-anime-list .seasonal-anime { + .intro { + color: @text; + } + .head { + background-color: @surface0; + .add-edit-button .button { + background-color: @surface0; + border-color: @surface1 !important; + &.button { + color: var(--color-text-light) !important; + background-color: var(--color-accent-background); + } + &.plantowatch:hover { + background-color: @surface1 !important; + } + &.plantowatch { + color: @text !important; + background-color: @surface0; + } + &.plantowatch:hover { + color: var(--color-text-light) !important; + background-color: var(--color-plan-to-watch) !important; + } + &.dropped { + color: @text !important; + background-color: @surface0; + } + &.dropped:hover { + color: var(--color-text-light) !important; + background-color: var(--color-dropped) !important; + } + } + } + .info { + color: @subtext0; + background-color: @surface0; + } + } } /* Forum section */ From 21d57727ec055bf6aff5e487d6bf131bf67336b8 Mon Sep 17 00:00:00 2001 From: K1aymore Date: Mon, 23 Dec 2024 12:07:24 -0800 Subject: [PATCH 32/39] theme unread notifications in dropdown --- styles/myanimelist/catppuccin.user.css | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 30a7063545..6e16e4a306 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -285,10 +285,16 @@ h3 { border-bottom-color: @surface0; + .mark-all { + color: @accent-color; + .fa-solid { + color: @accent-color; + } + } .mark-all.disabled { - color: @overlay0; + color: @surface2; .fa-solid { - color: @overlay0; + color: @surface2; } } .settings .fa-solid { @@ -300,6 +306,21 @@ &:hover { background-color: transparent; } + &.new { + background-color: @surface0; + .is-read .fa-check { + color: @subtext0; + } + .is-read .fa-circle-check { + color: @accent-color; + } + .category { + color: @text; + } + .time { + color: @subtext0; + } + } .inner.is-read { color: @overlay1; .category { From e88ce4dac96889113fd9e092b3f7d58ec4c94ea8 Mon Sep 17 00:00:00 2001 From: K1aymore Date: Mon, 23 Dec 2024 15:06:22 -0800 Subject: [PATCH 33/39] Theme notifications page --- styles/myanimelist/catppuccin.user.css | 55 ++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 6e16e4a306..856fe68461 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -1702,6 +1702,61 @@ border-bottom-color: @surface0 !important; } } + + /* Notifications page */ + + + &.container--small-left .left-column { + border-color: @surface0 !important; + } + + // yes, this should be misspelled + .notificaiton-category-nav { + li { + border-bottom-color: @surface0; + a { + color: @text !important; + &.active { + background-color: @surface0; + } + &:hover { + background-color: @surface0; + } + + .counter { + color: @subtext1; + } + .counter.zero { + color: @base; + background-color: @surface1; + } + } + } + } + + .notification-header { + h3 { + color: @subtext1; + border-bottom-color: @surface1; + } + .right-menu .item { + color: @accent-color; + &.disabled { + color: @surface2; + } + } + } + + .notification-item { + border-bottom-color: @surface0; + &:hover { + background-color: @surface0; + } + .time { + color: @subtext0; + } + } + } // end of #content /* Search All page */ From 5588177a59b395d6cb8a0914ed75317f97b0fe9c Mon Sep 17 00:00:00 2001 From: K1aymore Date: Mon, 23 Dec 2024 15:38:41 -0800 Subject: [PATCH 34/39] Most of profile score statistics section --- styles/myanimelist/catppuccin.user.css | 79 +++++++++++++++++++++++++- 1 file changed, 78 insertions(+), 1 deletion(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 856fe68461..1ce33adc8c 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -233,6 +233,11 @@ color: @accent-color; } + .mal-alert.secondary { + color: @text; + background-color: @surface0; + } + /* Headers */ // top header @@ -730,7 +735,79 @@ background-color: @surface0; } - /* Shared Anime / Manga page */ + /* Profile Statistics section */ + + .head-config { + background-color: @surface0; + } + + .navi { + border-bottom-color: @surface0; + .tabs .btn-tab { + background-color: @surface0; + a { + color: @subtext0 !important; + } + &.on { + background-color: @surface1; + a { + color: @text !important; + } + } + } + } + + .chart-container-rf { + .right { + border-left-color: @surface0; + .filter { + color: @subtext1; + background-color: @surface0; + button.mal-btn.outline.primary.active { + color: @accent-color !important; + background-color: @surface1 !important; + } + button.mal-btn.outline.secondary { + color: @text; + border-color: @surface2; + } + } + } + } + + .chart-root h3 { + border-bottom-color: @surface0; + } + + .container { + .score .mal_score { + color: @text; + } + .view_all { + a.disabled { + color: @overlay0 !important; + background-color: @surface0 !important; + } + .score_link { + color: @subtext0; + } + } + } + + .chart-wrapper .filter { + color: @subtext1; + background-color: @surface0; + button.mal-btn.outline.primary.active { + color: @accent-color !important; + background-color: @surface1 !important; + } + button.mal-btn.outline.secondary { + color: @text; + border-color: @surface2; + } + } + + /* Shared Anime / Manga with other user */ .shared-table { tr td.borderClass { From 2d6207e20b82c8a1bed16706b986c1ec9ca9a0ee Mon Sep 17 00:00:00 2001 From: K1aymore Date: Mon, 23 Dec 2024 16:14:11 -0800 Subject: [PATCH 35/39] MAL logo themed --- styles/myanimelist/catppuccin.user.css | 59 ++++++++++++++++++++++++-- 1 file changed, 55 insertions(+), 4 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 1ce33adc8c..bf9a638a73 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -57,6 +57,34 @@ @crust: @catppuccin[@@lookup][@crust]; @accent-color: @catppuccin[@@lookup][@@accent]; + @rosewater-filter: @catppuccin-filters[@@lookup][@rosewater]; + @flamingo-filter: @catppuccin-filters[@@lookup][@flamingo]; + @pink-filter: @catppuccin-filters[@@lookup][@pink]; + @mauve-filter: @catppuccin-filters[@@lookup][@mauve]; + @red-filter: @catppuccin-filters[@@lookup][@red]; + @maroon-filter: @catppuccin-filters[@@lookup][@maroon]; + @peach-filter: @catppuccin-filters[@@lookup][@peach]; + @yellow-filter: @catppuccin-filters[@@lookup][@yellow]; + @green-filter: @catppuccin-filters[@@lookup][@green]; + @teal-filter: @catppuccin-filters[@@lookup][@teal]; + @sky-filter: @catppuccin-filters[@@lookup][@sky]; + @sapphire-filter: @catppuccin-filters[@@lookup][@sapphire]; + @blue-filter: @catppuccin-filters[@@lookup][@blue]; + @lavender-filter: @catppuccin-filters[@@lookup][@lavender]; + @text-filter: @catppuccin-filters[@@lookup][@text]; + @subtext1-filter: @catppuccin-filters[@@lookup][@subtext1]; + @subtext0-filter: @catppuccin-filters[@@lookup][@subtext0]; + @overlay2-filter: @catppuccin-filters[@@lookup][@overlay2]; + @overlay1-filter: @catppuccin-filters[@@lookup][@overlay1]; + @overlay0-filter: @catppuccin-filters[@@lookup][@overlay0]; + @surface2-filter: @catppuccin-filters[@@lookup][@surface2]; + @surface1-filter: @catppuccin-filters[@@lookup][@surface1]; + @surface0-filter: @catppuccin-filters[@@lookup][@surface0]; + @base-filter: @catppuccin-filters[@@lookup][@base]; + @mantle-filter: @catppuccin-filters[@@lookup][@mantle]; + @crust-filter: @catppuccin-filters[@@lookup][@crust]; + @accent-color-filter: @catppuccin-filters[@@lookup][@@accent]; + --color-text-light: if((@lookup = latte), @mantle, @text); --color-text-dark: if((@lookup = latte), @text, @mantle); @@ -243,6 +271,23 @@ // top header #headerSmall { background-color: transparent !important; + background-image: none !important; + + // need to move logo here so the filter doesn't affect everything + .link-mal-logo { + filter: @text-filter; + background-image: url(/images/mal-logo-xsmall-white@2x.png?v=1634263200); + background-size: auto 32px; + background-repeat: no-repeat; + } + &.christmas .link-mal-logo { + // change white to black, keep colors + filter: if((@lookup = latte), invert(1) hue-rotate(170deg), none); + background-image: url(/images/event/2023_christmas/logo_dark.png?v=1634263200); + background-size: auto 30px; + background-repeat: no-repeat; + } + // icons .fa-solid { color: @subtext1; @@ -259,6 +304,9 @@ color: var(--color-text-light) !important; background-color: var(--color-accent-background) !important; } + .border::before { + border-left-color: @surface0; + } } .header-menu-unit.header-profile { background-color: transparent; @@ -346,8 +394,6 @@ } } - // TODO: "MyAnimeList" logo doesn't change in Latte - // borders between icons not themed (not very important) } // colorful header @@ -1176,7 +1222,7 @@ } .average { color: @subtext0; - // TODO: average bor is not colored + // TODO: average bar is not colored } } .episode-list-data:nth-of-type(2n + 1) td { @@ -1985,5 +2031,10 @@ @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-filters: { + @latte: { @rosewater: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(1048%) hue-rotate(323deg) brightness(92%) contrast(86%); @flamingo: brightness(0) saturate(100%) invert(84%) sepia(44%) saturate(4533%) hue-rotate(310deg) brightness(98%) contrast(75%); @pink: brightness(0) saturate(100%) invert(60%) sepia(32%) saturate(775%) hue-rotate(266deg) brightness(93%) contrast(97%); @mauve: brightness(0) saturate(100%) invert(26%) sepia(59%) saturate(3315%) hue-rotate(255deg) brightness(94%) contrast(100%); @red: brightness(0) saturate(100%) invert(16%) sepia(78%) saturate(7275%) hue-rotate(342deg) brightness(84%) contrast(94%); @maroon: brightness(0) saturate(100%) invert(31%) sepia(56%) saturate(2395%) hue-rotate(331deg) brightness(99%) contrast(82%); @peach: brightness(0) saturate(100%) invert(38%) sepia(81%) saturate(1292%) hue-rotate(356deg) brightness(103%) contrast(99%); @yellow: brightness(0) saturate(100%) invert(74%) sepia(47%) saturate(4570%) hue-rotate(354deg) brightness(95%) contrast(83%); @green: brightness(0) saturate(100%) invert(51%) sepia(25%) saturate(4134%) hue-rotate(76deg) brightness(95%) contrast(66%); @teal: brightness(0) saturate(100%) invert(41%) sepia(45%) saturate(1101%) hue-rotate(139deg) brightness(100%) contrast(82%); @sky: brightness(0) saturate(100%) invert(47%) sepia(76%) saturate(2427%) hue-rotate(166deg) brightness(99%) contrast(97%); @sapphire: brightness(0) saturate(100%) invert(52%) sepia(41%) saturate(6982%) hue-rotate(160deg) brightness(102%) contrast(75%); @blue: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(1850%) hue-rotate(209deg) brightness(94%) contrast(105%); @lavender: brightness(0) saturate(100%) invert(48%) sepia(61%) saturate(538%) hue-rotate(194deg) brightness(102%) contrast(98%); @text: brightness(0) saturate(100%) invert(30%) sepia(10%) saturate(1259%) hue-rotate(196deg) brightness(97%) contrast(91%); @subtext1: brightness(0) saturate(100%) invert(36%) sepia(10%) saturate(890%) hue-rotate(196deg) brightness(98%) contrast(90%); @subtext0: brightness(0) saturate(100%) invert(47%) sepia(6%) saturate(1263%) hue-rotate(195deg) brightness(90%) contrast(81%); @overlay2: brightness(0) saturate(100%) invert(59%) sepia(7%) saturate(825%) hue-rotate(195deg) brightness(83%) contrast(91%); @overlay1: brightness(0) saturate(100%) invert(59%) sepia(14%) saturate(333%) hue-rotate(194deg) brightness(95%) contrast(89%); @overlay0: brightness(0) saturate(100%) invert(85%) sepia(7%) saturate(595%) hue-rotate(191deg) brightness(77%) contrast(81%); @surface2: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(482%) hue-rotate(189deg) brightness(82%) contrast(88%); @surface1: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(281%) hue-rotate(187deg) brightness(92%) contrast(88%); @surface0: brightness(0) saturate(100%) invert(96%) sepia(1%) saturate(5123%) hue-rotate(185deg) brightness(93%) contrast(83%); @base: brightness(0) saturate(100%) invert(89%) sepia(5%) saturate(140%) hue-rotate(182deg) brightness(109%) contrast(94%); @mantle: brightness(0) saturate(100%) invert(93%) sepia(19%) saturate(55%) hue-rotate(182deg) brightness(98%) contrast(92%); @crust: brightness(0) saturate(100%) invert(91%) sepia(1%) saturate(4489%) hue-rotate(196deg) brightness(106%) contrast(82%); }; + @frappe: { @rosewater: brightness(0) saturate(100%) invert(90%) sepia(6%) saturate(734%) hue-rotate(321deg) brightness(95%) contrast(99%); @flamingo: brightness(0) saturate(100%) invert(88%) sepia(52%) saturate(817%) hue-rotate(293deg) brightness(113%) contrast(84%); @pink: brightness(0) saturate(100%) invert(76%) sepia(15%) saturate(844%) hue-rotate(280deg) brightness(107%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(71%) sepia(25%) saturate(725%) hue-rotate(225deg) brightness(94%) contrast(91%); @red: brightness(0) saturate(100%) invert(67%) sepia(3%) saturate(7209%) hue-rotate(305deg) brightness(91%) contrast(99%); @maroon: brightness(0) saturate(100%) invert(61%) sepia(14%) saturate(957%) hue-rotate(307deg) brightness(109%) contrast(90%); @peach: brightness(0) saturate(100%) invert(68%) sepia(28%) saturate(662%) hue-rotate(335deg) brightness(96%) contrast(94%); @yellow: brightness(0) saturate(100%) invert(94%) sepia(88%) saturate(684%) hue-rotate(309deg) brightness(105%) contrast(80%); @green: brightness(0) saturate(100%) invert(89%) sepia(23%) saturate(582%) hue-rotate(42deg) brightness(87%) contrast(89%); @teal: brightness(0) saturate(100%) invert(91%) sepia(13%) saturate(986%) hue-rotate(110deg) brightness(85%) contrast(81%); @sky: brightness(0) saturate(100%) invert(75%) sepia(15%) saturate(623%) hue-rotate(141deg) brightness(109%) contrast(81%); @sapphire: brightness(0) saturate(100%) invert(77%) sepia(20%) saturate(730%) hue-rotate(157deg) brightness(97%) contrast(76%); @blue: brightness(0) saturate(100%) invert(68%) sepia(16%) saturate(1070%) hue-rotate(185deg) brightness(96%) contrast(95%); @lavender: brightness(0) saturate(100%) invert(75%) sepia(20%) saturate(626%) hue-rotate(201deg) brightness(101%) contrast(89%); @text: brightness(0) saturate(100%) invert(83%) sepia(12%) saturate(582%) hue-rotate(191deg) brightness(98%) contrast(96%); @subtext1: brightness(0) saturate(100%) invert(80%) sepia(18%) saturate(411%) hue-rotate(190deg) brightness(96%) contrast(84%); @subtext0: brightness(0) saturate(100%) invert(82%) sepia(6%) saturate(1287%) hue-rotate(192deg) brightness(86%) contrast(85%); @overlay2: brightness(0) saturate(100%) invert(65%) sepia(36%) saturate(230%) hue-rotate(190deg) brightness(92%) contrast(82%); @overlay1: brightness(0) saturate(100%) invert(55%) sepia(12%) saturate(638%) hue-rotate(189deg) brightness(98%) contrast(87%); @overlay0: brightness(0) saturate(100%) invert(49%) sepia(13%) saturate(662%) hue-rotate(192deg) brightness(94%) contrast(84%); @surface2: brightness(0) saturate(100%) invert(41%) sepia(20%) saturate(469%) hue-rotate(191deg) brightness(93%) contrast(86%); @surface1: brightness(0) saturate(100%) invert(34%) sepia(14%) saturate(771%) hue-rotate(190deg) brightness(89%) contrast(85%); @surface0: brightness(0) saturate(100%) invert(28%) sepia(7%) saturate(1468%) hue-rotate(193deg) brightness(92%) contrast(95%); @base: brightness(0) saturate(100%) invert(20%) sepia(17%) saturate(747%) hue-rotate(192deg) brightness(96%) contrast(97%); @mantle: brightness(0) saturate(100%) invert(8%) sepia(7%) saturate(7271%) hue-rotate(198deg) brightness(88%) contrast(75%); @crust: brightness(0) saturate(100%) invert(7%) sepia(7%) saturate(7415%) hue-rotate(197deg) brightness(86%) contrast(79%); }; + @macchiato: { @rosewater: brightness(0) saturate(100%) invert(88%) sepia(13%) saturate(322%) hue-rotate(321deg) brightness(102%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(82%) sepia(3%) saturate(3070%) hue-rotate(314deg) brightness(107%) contrast(88%); @pink: brightness(0) saturate(100%) invert(80%) sepia(23%) saturate(509%) hue-rotate(280deg) brightness(102%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(903%) hue-rotate(222deg) brightness(104%) contrast(93%); @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(1541%) hue-rotate(305deg) brightness(110%) contrast(86%); @maroon: brightness(0) saturate(100%) invert(71%) sepia(10%) saturate(1331%) hue-rotate(306deg) brightness(93%) contrast(101%); @peach: brightness(0) saturate(100%) invert(73%) sepia(13%) saturate(1676%) hue-rotate(330deg) brightness(103%) contrast(92%); @yellow: brightness(0) saturate(100%) invert(87%) sepia(89%) saturate(321%) hue-rotate(314deg) brightness(101%) contrast(87%); @green: brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(1128%) hue-rotate(48deg) brightness(92%) contrast(85%); @teal: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(1176%) hue-rotate(110deg) brightness(87%) contrast(90%); @sky: brightness(0) saturate(100%) invert(78%) sepia(57%) saturate(230%) hue-rotate(142deg) brightness(96%) contrast(84%); @sapphire: brightness(0) saturate(100%) invert(74%) sepia(35%) saturate(438%) hue-rotate(156deg) brightness(92%) contrast(93%); @blue: brightness(0) saturate(100%) invert(67%) sepia(17%) saturate(1007%) hue-rotate(183deg) brightness(99%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(74%) sepia(6%) saturate(2559%) hue-rotate(198deg) brightness(103%) contrast(94%); @text: brightness(0) saturate(100%) invert(81%) sepia(9%) saturate(726%) hue-rotate(192deg) brightness(104%) contrast(92%); @subtext1: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1453%) hue-rotate(193deg) brightness(94%) contrast(86%); @subtext0: brightness(0) saturate(100%) invert(75%) sepia(18%) saturate(361%) hue-rotate(190deg) brightness(91%) contrast(86%); @overlay2: brightness(0) saturate(100%) invert(67%) sepia(9%) saturate(814%) hue-rotate(191deg) brightness(92%) contrast(88%); @overlay1: brightness(0) saturate(100%) invert(49%) sepia(38%) saturate(203%) hue-rotate(190deg) brightness(101%) contrast(93%); @overlay0: brightness(0) saturate(100%) invert(46%) sepia(16%) saturate(552%) hue-rotate(193deg) brightness(93%) contrast(84%); @surface2: brightness(0) saturate(100%) invert(34%) sepia(16%) saturate(611%) hue-rotate(192deg) brightness(101%) contrast(87%); @surface1: brightness(0) saturate(100%) invert(30%) sepia(11%) saturate(1085%) hue-rotate(194deg) brightness(92%) contrast(89%); @surface0: brightness(0) saturate(100%) invert(18%) sepia(21%) saturate(880%) hue-rotate(193deg) brightness(97%) contrast(84%); @base: brightness(0) saturate(100%) invert(12%) sepia(42%) saturate(570%) hue-rotate(194deg) brightness(90%) contrast(90%); @mantle: brightness(0) saturate(100%) invert(6%) sepia(6%) saturate(7499%) hue-rotate(200deg) brightness(93%) contrast(85%); @crust: brightness(0) saturate(100%) invert(5%) sepia(8%) saturate(5346%) hue-rotate(202deg) brightness(98%) contrast(88%); }; + @mocha: { @rosewater: brightness(0) saturate(100%) invert(92%) sepia(5%) saturate(704%) hue-rotate(320deg) brightness(99%) contrast(93%); @flamingo: brightness(0) saturate(100%) invert(81%) sepia(5%) saturate(987%) hue-rotate(315deg) brightness(107%) contrast(90%); @pink: brightness(0) saturate(100%) invert(86%) sepia(11%) saturate(1177%) hue-rotate(283deg) brightness(101%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(65%) sepia(58%) saturate(255%) hue-rotate(224deg) brightness(96%) contrast(102%); @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(997%) hue-rotate(294deg) brightness(104%) contrast(91%); @maroon: brightness(0) saturate(100%) invert(66%) sepia(16%) saturate(1301%) hue-rotate(306deg) brightness(116%) contrast(84%); @peach: brightness(0) saturate(100%) invert(68%) sepia(57%) saturate(278%) hue-rotate(338deg) brightness(98%) contrast(101%); @yellow: brightness(0) saturate(100%) invert(90%) sepia(70%) saturate(380%) hue-rotate(313deg) brightness(102%) contrast(95%); @green: brightness(0) saturate(100%) invert(88%) sepia(6%) saturate(2015%) hue-rotate(63deg) brightness(104%) contrast(78%); @teal: brightness(0) saturate(100%) invert(92%) sepia(12%) saturate(991%) hue-rotate(108deg) brightness(93%) contrast(90%); @sky: brightness(0) saturate(100%) invert(84%) sepia(21%) saturate(1302%) hue-rotate(164deg) brightness(106%) contrast(84%); @sapphire: brightness(0) saturate(100%) invert(74%) sepia(20%) saturate(876%) hue-rotate(156deg) brightness(96%) contrast(93%); @blue: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(951%) hue-rotate(180deg) brightness(98%) contrast(100%); @lavender: brightness(0) saturate(100%) invert(73%) sepia(7%) saturate(1670%) hue-rotate(195deg) brightness(102%) contrast(99%); @text: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(879%) hue-rotate(190deg) brightness(100%) contrast(93%); @subtext1: brightness(0) saturate(100%) invert(84%) sepia(19%) saturate(381%) hue-rotate(193deg) brightness(91%) contrast(89%); @subtext0: brightness(0) saturate(100%) invert(84%) sepia(9%) saturate(767%) hue-rotate(192deg) brightness(84%) contrast(84%); @overlay2: brightness(0) saturate(100%) invert(63%) sepia(15%) saturate(428%) hue-rotate(191deg) brightness(96%) contrast(84%); @overlay1: brightness(0) saturate(100%) invert(56%) sepia(15%) saturate(455%) hue-rotate(192deg) brightness(90%) contrast(88%); @overlay0: brightness(0) saturate(100%) invert(44%) sepia(6%) saturate(1275%) hue-rotate(194deg) brightness(97%) contrast(88%); @surface2: brightness(0) saturate(100%) invert(34%) sepia(8%) saturate(1015%) hue-rotate(195deg) brightness(99%) contrast(89%); @surface1: brightness(0) saturate(100%) invert(25%) sepia(6%) saturate(1950%) hue-rotate(197deg) brightness(99%) contrast(86%); @surface0: brightness(0) saturate(100%) invert(19%) sepia(5%) saturate(2844%) hue-rotate(199deg) brightness(91%) contrast(93%); @base: brightness(0) saturate(100%) invert(7%) sepia(4%) saturate(7496%) hue-rotate(202deg) brightness(93%) contrast(87%); @mantle: brightness(0) saturate(100%) invert(6%) sepia(4%) saturate(7465%) hue-rotate(202deg) brightness(95%) contrast(90%); @crust: brightness(0) saturate(100%) invert(3%) sepia(13%) saturate(6863%) hue-rotate(220deg) brightness(95%) contrast(91%); }; +} // vim:ft=less From fdcaf8acf5051dd2397115e409fc198cc3562278 Mon Sep 17 00:00:00 2001 From: K1aymore Date: Thu, 26 Dec 2024 11:21:50 -0800 Subject: [PATCH 36/39] Fix news subtext, format --- styles/myanimelist/catppuccin.user.css | 339 ++++++++++++++++++++----- 1 file changed, 278 insertions(+), 61 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index bf9a638a73..93504a7776 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -228,7 +228,8 @@ } } - .wrok-graph-inner.reading, .wrok-graph-inner.watching { + .wrok-graph-inner.reading, + .wrok-graph-inner.watching { background-color: @green !important; } .wrok-graph-inner.on_hold { @@ -244,7 +245,8 @@ background-color: @red !important; } - .work-status-num.watching, .work-status-num.reading { + .work-status-num.watching, + .work-status-num.reading { color: @green !important; } .work-status-num.on_hold { @@ -266,6 +268,22 @@ background-color: @surface0; } + .news-list .news-unit { + border-bottom-color: @surface0; + .information { + .info { + color: @subtext0 !important; + } + .pv { + color: @subtext0; + border-left-color: @surface1; + } + .tags .tag { + border-left-color: @surface1; + } + } + } + /* Headers */ // top header @@ -393,7 +411,6 @@ border-top-color: @surface1; } } - } // colorful header @@ -456,12 +473,12 @@ background-color: transparent !important; } - .header-menu-dropdown * { + .header-menu-dropdown * { background-color: @surface0 !important; - } - .header-menu-dropdown *:hover { + } + .header-menu-dropdown *:hover { background-color: @surface1 !important; - } + } /* Content */ @@ -548,22 +565,6 @@ color: @accent-color; } - .news-list .news-unit { - border-bottom-color: @surface0; - .information { - .info { - color: @subtext0; - } - .pv { - color: @subtext0; - border-left-color: @surface1; - } - .tags .tag { - border-left-color: @surface1; - } - } - } - .widget.reviews .item { border-color: @surface0; } @@ -1596,7 +1597,7 @@ .malicon { color: @overlay1; } - .info .item:nth-child(n+2) { + .info .item:nth-child(n + 2) { border-left-color: @surface1; } } @@ -1828,7 +1829,6 @@ /* Notifications page */ - &.container--small-left .left-column { border-color: @surface0 !important; } @@ -1879,7 +1879,6 @@ color: @subtext0; } } - } // end of #content /* Search All page */ @@ -1991,36 +1990,42 @@ } /* Top Anime/Manga page */ - .top-ranking-table .table-header td { - background-color: @overlay0 !important; - color: @text !important; - } - tr.ranking-list:nth-child(even) td { - background-color: @surface0 !important; - } - tr.ranking-list:nth-child(odd) td { - background-color: @surface1 !important; - } - .information.di-ib { - color: @subtext1 !important; - } - td.status.ac .notinmylist, a.link-blue-box.next { - background-color: @mauve !important; - color: @crust !important; - } - td.status.ac .notinmylist:hover, a.link-blue-box.next:hover { - background-color: @surface0 !important; - color: @text !important; - } - td.status.ac .plantowatch, td.status.ac .plantoread, td.status.ac .watching, td.status.ac .on-hold, td.status.ac .completed, td.status.ac .dropped { - background-color: @surface0 !important; - color: @crust !important; - } - // TODO: theme the status buttons when hovered - .top-anime-rank-text.rank2 { - color: @subtext0 !important; - } - + .top-ranking-table .table-header td { + background-color: @overlay0 !important; + color: @text !important; + } + tr.ranking-list:nth-child(even) td { + background-color: @surface0 !important; + } + tr.ranking-list:nth-child(odd) td { + background-color: @surface1 !important; + } + .information.di-ib { + color: @subtext1 !important; + } + td.status.ac .notinmylist, + a.link-blue-box.next { + background-color: @mauve !important; + color: @crust !important; + } + td.status.ac .notinmylist:hover, + a.link-blue-box.next:hover { + background-color: @surface0 !important; + color: @text !important; + } + td.status.ac .plantowatch, + td.status.ac .plantoread, + td.status.ac .watching, + td.status.ac .on-hold, + td.status.ac .completed, + td.status.ac .dropped { + background-color: @surface0 !important; + color: @crust !important; + } + // TODO: theme the status buttons when hovered + .top-anime-rank-text.rank2 { + color: @subtext0 !important; + } } } @@ -2032,9 +2037,221 @@ @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-filters: { - @latte: { @rosewater: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(1048%) hue-rotate(323deg) brightness(92%) contrast(86%); @flamingo: brightness(0) saturate(100%) invert(84%) sepia(44%) saturate(4533%) hue-rotate(310deg) brightness(98%) contrast(75%); @pink: brightness(0) saturate(100%) invert(60%) sepia(32%) saturate(775%) hue-rotate(266deg) brightness(93%) contrast(97%); @mauve: brightness(0) saturate(100%) invert(26%) sepia(59%) saturate(3315%) hue-rotate(255deg) brightness(94%) contrast(100%); @red: brightness(0) saturate(100%) invert(16%) sepia(78%) saturate(7275%) hue-rotate(342deg) brightness(84%) contrast(94%); @maroon: brightness(0) saturate(100%) invert(31%) sepia(56%) saturate(2395%) hue-rotate(331deg) brightness(99%) contrast(82%); @peach: brightness(0) saturate(100%) invert(38%) sepia(81%) saturate(1292%) hue-rotate(356deg) brightness(103%) contrast(99%); @yellow: brightness(0) saturate(100%) invert(74%) sepia(47%) saturate(4570%) hue-rotate(354deg) brightness(95%) contrast(83%); @green: brightness(0) saturate(100%) invert(51%) sepia(25%) saturate(4134%) hue-rotate(76deg) brightness(95%) contrast(66%); @teal: brightness(0) saturate(100%) invert(41%) sepia(45%) saturate(1101%) hue-rotate(139deg) brightness(100%) contrast(82%); @sky: brightness(0) saturate(100%) invert(47%) sepia(76%) saturate(2427%) hue-rotate(166deg) brightness(99%) contrast(97%); @sapphire: brightness(0) saturate(100%) invert(52%) sepia(41%) saturate(6982%) hue-rotate(160deg) brightness(102%) contrast(75%); @blue: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(1850%) hue-rotate(209deg) brightness(94%) contrast(105%); @lavender: brightness(0) saturate(100%) invert(48%) sepia(61%) saturate(538%) hue-rotate(194deg) brightness(102%) contrast(98%); @text: brightness(0) saturate(100%) invert(30%) sepia(10%) saturate(1259%) hue-rotate(196deg) brightness(97%) contrast(91%); @subtext1: brightness(0) saturate(100%) invert(36%) sepia(10%) saturate(890%) hue-rotate(196deg) brightness(98%) contrast(90%); @subtext0: brightness(0) saturate(100%) invert(47%) sepia(6%) saturate(1263%) hue-rotate(195deg) brightness(90%) contrast(81%); @overlay2: brightness(0) saturate(100%) invert(59%) sepia(7%) saturate(825%) hue-rotate(195deg) brightness(83%) contrast(91%); @overlay1: brightness(0) saturate(100%) invert(59%) sepia(14%) saturate(333%) hue-rotate(194deg) brightness(95%) contrast(89%); @overlay0: brightness(0) saturate(100%) invert(85%) sepia(7%) saturate(595%) hue-rotate(191deg) brightness(77%) contrast(81%); @surface2: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(482%) hue-rotate(189deg) brightness(82%) contrast(88%); @surface1: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(281%) hue-rotate(187deg) brightness(92%) contrast(88%); @surface0: brightness(0) saturate(100%) invert(96%) sepia(1%) saturate(5123%) hue-rotate(185deg) brightness(93%) contrast(83%); @base: brightness(0) saturate(100%) invert(89%) sepia(5%) saturate(140%) hue-rotate(182deg) brightness(109%) contrast(94%); @mantle: brightness(0) saturate(100%) invert(93%) sepia(19%) saturate(55%) hue-rotate(182deg) brightness(98%) contrast(92%); @crust: brightness(0) saturate(100%) invert(91%) sepia(1%) saturate(4489%) hue-rotate(196deg) brightness(106%) contrast(82%); }; - @frappe: { @rosewater: brightness(0) saturate(100%) invert(90%) sepia(6%) saturate(734%) hue-rotate(321deg) brightness(95%) contrast(99%); @flamingo: brightness(0) saturate(100%) invert(88%) sepia(52%) saturate(817%) hue-rotate(293deg) brightness(113%) contrast(84%); @pink: brightness(0) saturate(100%) invert(76%) sepia(15%) saturate(844%) hue-rotate(280deg) brightness(107%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(71%) sepia(25%) saturate(725%) hue-rotate(225deg) brightness(94%) contrast(91%); @red: brightness(0) saturate(100%) invert(67%) sepia(3%) saturate(7209%) hue-rotate(305deg) brightness(91%) contrast(99%); @maroon: brightness(0) saturate(100%) invert(61%) sepia(14%) saturate(957%) hue-rotate(307deg) brightness(109%) contrast(90%); @peach: brightness(0) saturate(100%) invert(68%) sepia(28%) saturate(662%) hue-rotate(335deg) brightness(96%) contrast(94%); @yellow: brightness(0) saturate(100%) invert(94%) sepia(88%) saturate(684%) hue-rotate(309deg) brightness(105%) contrast(80%); @green: brightness(0) saturate(100%) invert(89%) sepia(23%) saturate(582%) hue-rotate(42deg) brightness(87%) contrast(89%); @teal: brightness(0) saturate(100%) invert(91%) sepia(13%) saturate(986%) hue-rotate(110deg) brightness(85%) contrast(81%); @sky: brightness(0) saturate(100%) invert(75%) sepia(15%) saturate(623%) hue-rotate(141deg) brightness(109%) contrast(81%); @sapphire: brightness(0) saturate(100%) invert(77%) sepia(20%) saturate(730%) hue-rotate(157deg) brightness(97%) contrast(76%); @blue: brightness(0) saturate(100%) invert(68%) sepia(16%) saturate(1070%) hue-rotate(185deg) brightness(96%) contrast(95%); @lavender: brightness(0) saturate(100%) invert(75%) sepia(20%) saturate(626%) hue-rotate(201deg) brightness(101%) contrast(89%); @text: brightness(0) saturate(100%) invert(83%) sepia(12%) saturate(582%) hue-rotate(191deg) brightness(98%) contrast(96%); @subtext1: brightness(0) saturate(100%) invert(80%) sepia(18%) saturate(411%) hue-rotate(190deg) brightness(96%) contrast(84%); @subtext0: brightness(0) saturate(100%) invert(82%) sepia(6%) saturate(1287%) hue-rotate(192deg) brightness(86%) contrast(85%); @overlay2: brightness(0) saturate(100%) invert(65%) sepia(36%) saturate(230%) hue-rotate(190deg) brightness(92%) contrast(82%); @overlay1: brightness(0) saturate(100%) invert(55%) sepia(12%) saturate(638%) hue-rotate(189deg) brightness(98%) contrast(87%); @overlay0: brightness(0) saturate(100%) invert(49%) sepia(13%) saturate(662%) hue-rotate(192deg) brightness(94%) contrast(84%); @surface2: brightness(0) saturate(100%) invert(41%) sepia(20%) saturate(469%) hue-rotate(191deg) brightness(93%) contrast(86%); @surface1: brightness(0) saturate(100%) invert(34%) sepia(14%) saturate(771%) hue-rotate(190deg) brightness(89%) contrast(85%); @surface0: brightness(0) saturate(100%) invert(28%) sepia(7%) saturate(1468%) hue-rotate(193deg) brightness(92%) contrast(95%); @base: brightness(0) saturate(100%) invert(20%) sepia(17%) saturate(747%) hue-rotate(192deg) brightness(96%) contrast(97%); @mantle: brightness(0) saturate(100%) invert(8%) sepia(7%) saturate(7271%) hue-rotate(198deg) brightness(88%) contrast(75%); @crust: brightness(0) saturate(100%) invert(7%) sepia(7%) saturate(7415%) hue-rotate(197deg) brightness(86%) contrast(79%); }; - @macchiato: { @rosewater: brightness(0) saturate(100%) invert(88%) sepia(13%) saturate(322%) hue-rotate(321deg) brightness(102%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(82%) sepia(3%) saturate(3070%) hue-rotate(314deg) brightness(107%) contrast(88%); @pink: brightness(0) saturate(100%) invert(80%) sepia(23%) saturate(509%) hue-rotate(280deg) brightness(102%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(903%) hue-rotate(222deg) brightness(104%) contrast(93%); @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(1541%) hue-rotate(305deg) brightness(110%) contrast(86%); @maroon: brightness(0) saturate(100%) invert(71%) sepia(10%) saturate(1331%) hue-rotate(306deg) brightness(93%) contrast(101%); @peach: brightness(0) saturate(100%) invert(73%) sepia(13%) saturate(1676%) hue-rotate(330deg) brightness(103%) contrast(92%); @yellow: brightness(0) saturate(100%) invert(87%) sepia(89%) saturate(321%) hue-rotate(314deg) brightness(101%) contrast(87%); @green: brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(1128%) hue-rotate(48deg) brightness(92%) contrast(85%); @teal: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(1176%) hue-rotate(110deg) brightness(87%) contrast(90%); @sky: brightness(0) saturate(100%) invert(78%) sepia(57%) saturate(230%) hue-rotate(142deg) brightness(96%) contrast(84%); @sapphire: brightness(0) saturate(100%) invert(74%) sepia(35%) saturate(438%) hue-rotate(156deg) brightness(92%) contrast(93%); @blue: brightness(0) saturate(100%) invert(67%) sepia(17%) saturate(1007%) hue-rotate(183deg) brightness(99%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(74%) sepia(6%) saturate(2559%) hue-rotate(198deg) brightness(103%) contrast(94%); @text: brightness(0) saturate(100%) invert(81%) sepia(9%) saturate(726%) hue-rotate(192deg) brightness(104%) contrast(92%); @subtext1: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1453%) hue-rotate(193deg) brightness(94%) contrast(86%); @subtext0: brightness(0) saturate(100%) invert(75%) sepia(18%) saturate(361%) hue-rotate(190deg) brightness(91%) contrast(86%); @overlay2: brightness(0) saturate(100%) invert(67%) sepia(9%) saturate(814%) hue-rotate(191deg) brightness(92%) contrast(88%); @overlay1: brightness(0) saturate(100%) invert(49%) sepia(38%) saturate(203%) hue-rotate(190deg) brightness(101%) contrast(93%); @overlay0: brightness(0) saturate(100%) invert(46%) sepia(16%) saturate(552%) hue-rotate(193deg) brightness(93%) contrast(84%); @surface2: brightness(0) saturate(100%) invert(34%) sepia(16%) saturate(611%) hue-rotate(192deg) brightness(101%) contrast(87%); @surface1: brightness(0) saturate(100%) invert(30%) sepia(11%) saturate(1085%) hue-rotate(194deg) brightness(92%) contrast(89%); @surface0: brightness(0) saturate(100%) invert(18%) sepia(21%) saturate(880%) hue-rotate(193deg) brightness(97%) contrast(84%); @base: brightness(0) saturate(100%) invert(12%) sepia(42%) saturate(570%) hue-rotate(194deg) brightness(90%) contrast(90%); @mantle: brightness(0) saturate(100%) invert(6%) sepia(6%) saturate(7499%) hue-rotate(200deg) brightness(93%) contrast(85%); @crust: brightness(0) saturate(100%) invert(5%) sepia(8%) saturate(5346%) hue-rotate(202deg) brightness(98%) contrast(88%); }; - @mocha: { @rosewater: brightness(0) saturate(100%) invert(92%) sepia(5%) saturate(704%) hue-rotate(320deg) brightness(99%) contrast(93%); @flamingo: brightness(0) saturate(100%) invert(81%) sepia(5%) saturate(987%) hue-rotate(315deg) brightness(107%) contrast(90%); @pink: brightness(0) saturate(100%) invert(86%) sepia(11%) saturate(1177%) hue-rotate(283deg) brightness(101%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(65%) sepia(58%) saturate(255%) hue-rotate(224deg) brightness(96%) contrast(102%); @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(997%) hue-rotate(294deg) brightness(104%) contrast(91%); @maroon: brightness(0) saturate(100%) invert(66%) sepia(16%) saturate(1301%) hue-rotate(306deg) brightness(116%) contrast(84%); @peach: brightness(0) saturate(100%) invert(68%) sepia(57%) saturate(278%) hue-rotate(338deg) brightness(98%) contrast(101%); @yellow: brightness(0) saturate(100%) invert(90%) sepia(70%) saturate(380%) hue-rotate(313deg) brightness(102%) contrast(95%); @green: brightness(0) saturate(100%) invert(88%) sepia(6%) saturate(2015%) hue-rotate(63deg) brightness(104%) contrast(78%); @teal: brightness(0) saturate(100%) invert(92%) sepia(12%) saturate(991%) hue-rotate(108deg) brightness(93%) contrast(90%); @sky: brightness(0) saturate(100%) invert(84%) sepia(21%) saturate(1302%) hue-rotate(164deg) brightness(106%) contrast(84%); @sapphire: brightness(0) saturate(100%) invert(74%) sepia(20%) saturate(876%) hue-rotate(156deg) brightness(96%) contrast(93%); @blue: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(951%) hue-rotate(180deg) brightness(98%) contrast(100%); @lavender: brightness(0) saturate(100%) invert(73%) sepia(7%) saturate(1670%) hue-rotate(195deg) brightness(102%) contrast(99%); @text: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(879%) hue-rotate(190deg) brightness(100%) contrast(93%); @subtext1: brightness(0) saturate(100%) invert(84%) sepia(19%) saturate(381%) hue-rotate(193deg) brightness(91%) contrast(89%); @subtext0: brightness(0) saturate(100%) invert(84%) sepia(9%) saturate(767%) hue-rotate(192deg) brightness(84%) contrast(84%); @overlay2: brightness(0) saturate(100%) invert(63%) sepia(15%) saturate(428%) hue-rotate(191deg) brightness(96%) contrast(84%); @overlay1: brightness(0) saturate(100%) invert(56%) sepia(15%) saturate(455%) hue-rotate(192deg) brightness(90%) contrast(88%); @overlay0: brightness(0) saturate(100%) invert(44%) sepia(6%) saturate(1275%) hue-rotate(194deg) brightness(97%) contrast(88%); @surface2: brightness(0) saturate(100%) invert(34%) sepia(8%) saturate(1015%) hue-rotate(195deg) brightness(99%) contrast(89%); @surface1: brightness(0) saturate(100%) invert(25%) sepia(6%) saturate(1950%) hue-rotate(197deg) brightness(99%) contrast(86%); @surface0: brightness(0) saturate(100%) invert(19%) sepia(5%) saturate(2844%) hue-rotate(199deg) brightness(91%) contrast(93%); @base: brightness(0) saturate(100%) invert(7%) sepia(4%) saturate(7496%) hue-rotate(202deg) brightness(93%) contrast(87%); @mantle: brightness(0) saturate(100%) invert(6%) sepia(4%) saturate(7465%) hue-rotate(202deg) brightness(95%) contrast(90%); @crust: brightness(0) saturate(100%) invert(3%) sepia(13%) saturate(6863%) hue-rotate(220deg) brightness(95%) contrast(91%); }; -} + @latte: { + @rosewater: brightness(0) saturate(100%) invert(65%) sepia(18%) + saturate(1048%) hue-rotate(323deg) brightness(92%) contrast(86%); + @flamingo: brightness(0) saturate(100%) invert(84%) sepia(44%) + saturate(4533%) hue-rotate(310deg) brightness(98%) contrast(75%); + @pink: brightness(0) saturate(100%) invert(60%) sepia(32%) saturate(775%) + hue-rotate(266deg) brightness(93%) contrast(97%); + @mauve: brightness(0) saturate(100%) invert(26%) sepia(59%) saturate(3315%) + hue-rotate(255deg) brightness(94%) contrast(100%); + @red: brightness(0) saturate(100%) invert(16%) sepia(78%) saturate(7275%) + hue-rotate(342deg) brightness(84%) contrast(94%); + @maroon: brightness(0) saturate(100%) invert(31%) sepia(56%) saturate(2395%) + hue-rotate(331deg) brightness(99%) contrast(82%); + @peach: brightness(0) saturate(100%) invert(38%) sepia(81%) saturate(1292%) + hue-rotate(356deg) brightness(103%) contrast(99%); + @yellow: brightness(0) saturate(100%) invert(74%) sepia(47%) saturate(4570%) + hue-rotate(354deg) brightness(95%) contrast(83%); + @green: brightness(0) saturate(100%) invert(51%) sepia(25%) saturate(4134%) + hue-rotate(76deg) brightness(95%) contrast(66%); + @teal: brightness(0) saturate(100%) invert(41%) sepia(45%) saturate(1101%) + hue-rotate(139deg) brightness(100%) contrast(82%); + @sky: brightness(0) saturate(100%) invert(47%) sepia(76%) saturate(2427%) + hue-rotate(166deg) brightness(99%) contrast(97%); + @sapphire: brightness(0) saturate(100%) invert(52%) sepia(41%) + saturate(6982%) hue-rotate(160deg) brightness(102%) contrast(75%); + @blue: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(1850%) + hue-rotate(209deg) brightness(94%) contrast(105%); + @lavender: brightness(0) saturate(100%) invert(48%) sepia(61%) + saturate(538%) hue-rotate(194deg) brightness(102%) contrast(98%); + @text: brightness(0) saturate(100%) invert(30%) sepia(10%) saturate(1259%) + hue-rotate(196deg) brightness(97%) contrast(91%); + @subtext1: brightness(0) saturate(100%) invert(36%) sepia(10%) + saturate(890%) hue-rotate(196deg) brightness(98%) contrast(90%); + @subtext0: brightness(0) saturate(100%) invert(47%) sepia(6%) + saturate(1263%) hue-rotate(195deg) brightness(90%) contrast(81%); + @overlay2: brightness(0) saturate(100%) invert(59%) sepia(7%) saturate(825%) + hue-rotate(195deg) brightness(83%) contrast(91%); + @overlay1: brightness(0) saturate(100%) invert(59%) sepia(14%) + saturate(333%) hue-rotate(194deg) brightness(95%) contrast(89%); + @overlay0: brightness(0) saturate(100%) invert(85%) sepia(7%) saturate(595%) + hue-rotate(191deg) brightness(77%) contrast(81%); + @surface2: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(482%) + hue-rotate(189deg) brightness(82%) contrast(88%); + @surface1: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(281%) + hue-rotate(187deg) brightness(92%) contrast(88%); + @surface0: brightness(0) saturate(100%) invert(96%) sepia(1%) + saturate(5123%) hue-rotate(185deg) brightness(93%) contrast(83%); + @base: brightness(0) saturate(100%) invert(89%) sepia(5%) saturate(140%) + hue-rotate(182deg) brightness(109%) contrast(94%); + @mantle: brightness(0) saturate(100%) invert(93%) sepia(19%) saturate(55%) + hue-rotate(182deg) brightness(98%) contrast(92%); + @crust: brightness(0) saturate(100%) invert(91%) sepia(1%) saturate(4489%) + hue-rotate(196deg) brightness(106%) contrast(82%); + }; + @frappe: { + @rosewater: brightness(0) saturate(100%) invert(90%) sepia(6%) + saturate(734%) hue-rotate(321deg) brightness(95%) contrast(99%); + @flamingo: brightness(0) saturate(100%) invert(88%) sepia(52%) + saturate(817%) hue-rotate(293deg) brightness(113%) contrast(84%); + @pink: brightness(0) saturate(100%) invert(76%) sepia(15%) saturate(844%) + hue-rotate(280deg) brightness(107%) contrast(91%); + @mauve: brightness(0) saturate(100%) invert(71%) sepia(25%) saturate(725%) + hue-rotate(225deg) brightness(94%) contrast(91%); + @red: brightness(0) saturate(100%) invert(67%) sepia(3%) saturate(7209%) + hue-rotate(305deg) brightness(91%) contrast(99%); + @maroon: brightness(0) saturate(100%) invert(61%) sepia(14%) saturate(957%) + hue-rotate(307deg) brightness(109%) contrast(90%); + @peach: brightness(0) saturate(100%) invert(68%) sepia(28%) saturate(662%) + hue-rotate(335deg) brightness(96%) contrast(94%); + @yellow: brightness(0) saturate(100%) invert(94%) sepia(88%) saturate(684%) + hue-rotate(309deg) brightness(105%) contrast(80%); + @green: brightness(0) saturate(100%) invert(89%) sepia(23%) saturate(582%) + hue-rotate(42deg) brightness(87%) contrast(89%); + @teal: brightness(0) saturate(100%) invert(91%) sepia(13%) saturate(986%) + hue-rotate(110deg) brightness(85%) contrast(81%); + @sky: brightness(0) saturate(100%) invert(75%) sepia(15%) saturate(623%) + hue-rotate(141deg) brightness(109%) contrast(81%); + @sapphire: brightness(0) saturate(100%) invert(77%) sepia(20%) + saturate(730%) hue-rotate(157deg) brightness(97%) contrast(76%); + @blue: brightness(0) saturate(100%) invert(68%) sepia(16%) saturate(1070%) + hue-rotate(185deg) brightness(96%) contrast(95%); + @lavender: brightness(0) saturate(100%) invert(75%) sepia(20%) + saturate(626%) hue-rotate(201deg) brightness(101%) contrast(89%); + @text: brightness(0) saturate(100%) invert(83%) sepia(12%) saturate(582%) + hue-rotate(191deg) brightness(98%) contrast(96%); + @subtext1: brightness(0) saturate(100%) invert(80%) sepia(18%) + saturate(411%) hue-rotate(190deg) brightness(96%) contrast(84%); + @subtext0: brightness(0) saturate(100%) invert(82%) sepia(6%) + saturate(1287%) hue-rotate(192deg) brightness(86%) contrast(85%); + @overlay2: brightness(0) saturate(100%) invert(65%) sepia(36%) + saturate(230%) hue-rotate(190deg) brightness(92%) contrast(82%); + @overlay1: brightness(0) saturate(100%) invert(55%) sepia(12%) + saturate(638%) hue-rotate(189deg) brightness(98%) contrast(87%); + @overlay0: brightness(0) saturate(100%) invert(49%) sepia(13%) + saturate(662%) hue-rotate(192deg) brightness(94%) contrast(84%); + @surface2: brightness(0) saturate(100%) invert(41%) sepia(20%) + saturate(469%) hue-rotate(191deg) brightness(93%) contrast(86%); + @surface1: brightness(0) saturate(100%) invert(34%) sepia(14%) + saturate(771%) hue-rotate(190deg) brightness(89%) contrast(85%); + @surface0: brightness(0) saturate(100%) invert(28%) sepia(7%) + saturate(1468%) hue-rotate(193deg) brightness(92%) contrast(95%); + @base: brightness(0) saturate(100%) invert(20%) sepia(17%) saturate(747%) + hue-rotate(192deg) brightness(96%) contrast(97%); + @mantle: brightness(0) saturate(100%) invert(8%) sepia(7%) saturate(7271%) + hue-rotate(198deg) brightness(88%) contrast(75%); + @crust: brightness(0) saturate(100%) invert(7%) sepia(7%) saturate(7415%) + hue-rotate(197deg) brightness(86%) contrast(79%); + }; + @macchiato: { + @rosewater: brightness(0) saturate(100%) invert(88%) sepia(13%) + saturate(322%) hue-rotate(321deg) brightness(102%) contrast(91%); + @flamingo: brightness(0) saturate(100%) invert(82%) sepia(3%) + saturate(3070%) hue-rotate(314deg) brightness(107%) contrast(88%); + @pink: brightness(0) saturate(100%) invert(80%) sepia(23%) saturate(509%) + hue-rotate(280deg) brightness(102%) contrast(92%); + @mauve: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(903%) + hue-rotate(222deg) brightness(104%) contrast(93%); + @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(1541%) + hue-rotate(305deg) brightness(110%) contrast(86%); + @maroon: brightness(0) saturate(100%) invert(71%) sepia(10%) saturate(1331%) + hue-rotate(306deg) brightness(93%) contrast(101%); + @peach: brightness(0) saturate(100%) invert(73%) sepia(13%) saturate(1676%) + hue-rotate(330deg) brightness(103%) contrast(92%); + @yellow: brightness(0) saturate(100%) invert(87%) sepia(89%) saturate(321%) + hue-rotate(314deg) brightness(101%) contrast(87%); + @green: brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(1128%) + hue-rotate(48deg) brightness(92%) contrast(85%); + @teal: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(1176%) + hue-rotate(110deg) brightness(87%) contrast(90%); + @sky: brightness(0) saturate(100%) invert(78%) sepia(57%) saturate(230%) + hue-rotate(142deg) brightness(96%) contrast(84%); + @sapphire: brightness(0) saturate(100%) invert(74%) sepia(35%) + saturate(438%) hue-rotate(156deg) brightness(92%) contrast(93%); + @blue: brightness(0) saturate(100%) invert(67%) sepia(17%) saturate(1007%) + hue-rotate(183deg) brightness(99%) contrast(94%); + @lavender: brightness(0) saturate(100%) invert(74%) sepia(6%) + saturate(2559%) hue-rotate(198deg) brightness(103%) contrast(94%); + @text: brightness(0) saturate(100%) invert(81%) sepia(9%) saturate(726%) + hue-rotate(192deg) brightness(104%) contrast(92%); + @subtext1: brightness(0) saturate(100%) invert(84%) sepia(5%) + saturate(1453%) hue-rotate(193deg) brightness(94%) contrast(86%); + @subtext0: brightness(0) saturate(100%) invert(75%) sepia(18%) + saturate(361%) hue-rotate(190deg) brightness(91%) contrast(86%); + @overlay2: brightness(0) saturate(100%) invert(67%) sepia(9%) saturate(814%) + hue-rotate(191deg) brightness(92%) contrast(88%); + @overlay1: brightness(0) saturate(100%) invert(49%) sepia(38%) + saturate(203%) hue-rotate(190deg) brightness(101%) contrast(93%); + @overlay0: brightness(0) saturate(100%) invert(46%) sepia(16%) + saturate(552%) hue-rotate(193deg) brightness(93%) contrast(84%); + @surface2: brightness(0) saturate(100%) invert(34%) sepia(16%) + saturate(611%) hue-rotate(192deg) brightness(101%) contrast(87%); + @surface1: brightness(0) saturate(100%) invert(30%) sepia(11%) + saturate(1085%) hue-rotate(194deg) brightness(92%) contrast(89%); + @surface0: brightness(0) saturate(100%) invert(18%) sepia(21%) + saturate(880%) hue-rotate(193deg) brightness(97%) contrast(84%); + @base: brightness(0) saturate(100%) invert(12%) sepia(42%) saturate(570%) + hue-rotate(194deg) brightness(90%) contrast(90%); + @mantle: brightness(0) saturate(100%) invert(6%) sepia(6%) saturate(7499%) + hue-rotate(200deg) brightness(93%) contrast(85%); + @crust: brightness(0) saturate(100%) invert(5%) sepia(8%) saturate(5346%) + hue-rotate(202deg) brightness(98%) contrast(88%); + }; + @mocha: { + @rosewater: brightness(0) saturate(100%) invert(92%) sepia(5%) + saturate(704%) hue-rotate(320deg) brightness(99%) contrast(93%); + @flamingo: brightness(0) saturate(100%) invert(81%) sepia(5%) saturate(987%) + hue-rotate(315deg) brightness(107%) contrast(90%); + @pink: brightness(0) saturate(100%) invert(86%) sepia(11%) saturate(1177%) + hue-rotate(283deg) brightness(101%) contrast(92%); + @mauve: brightness(0) saturate(100%) invert(65%) sepia(58%) saturate(255%) + hue-rotate(224deg) brightness(96%) contrast(102%); + @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(997%) + hue-rotate(294deg) brightness(104%) contrast(91%); + @maroon: brightness(0) saturate(100%) invert(66%) sepia(16%) saturate(1301%) + hue-rotate(306deg) brightness(116%) contrast(84%); + @peach: brightness(0) saturate(100%) invert(68%) sepia(57%) saturate(278%) + hue-rotate(338deg) brightness(98%) contrast(101%); + @yellow: brightness(0) saturate(100%) invert(90%) sepia(70%) saturate(380%) + hue-rotate(313deg) brightness(102%) contrast(95%); + @green: brightness(0) saturate(100%) invert(88%) sepia(6%) saturate(2015%) + hue-rotate(63deg) brightness(104%) contrast(78%); + @teal: brightness(0) saturate(100%) invert(92%) sepia(12%) saturate(991%) + hue-rotate(108deg) brightness(93%) contrast(90%); + @sky: brightness(0) saturate(100%) invert(84%) sepia(21%) saturate(1302%) + hue-rotate(164deg) brightness(106%) contrast(84%); + @sapphire: brightness(0) saturate(100%) invert(74%) sepia(20%) + saturate(876%) hue-rotate(156deg) brightness(96%) contrast(93%); + @blue: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(951%) + hue-rotate(180deg) brightness(98%) contrast(100%); + @lavender: brightness(0) saturate(100%) invert(73%) sepia(7%) + saturate(1670%) hue-rotate(195deg) brightness(102%) contrast(99%); + @text: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(879%) + hue-rotate(190deg) brightness(100%) contrast(93%); + @subtext1: brightness(0) saturate(100%) invert(84%) sepia(19%) + saturate(381%) hue-rotate(193deg) brightness(91%) contrast(89%); + @subtext0: brightness(0) saturate(100%) invert(84%) sepia(9%) saturate(767%) + hue-rotate(192deg) brightness(84%) contrast(84%); + @overlay2: brightness(0) saturate(100%) invert(63%) sepia(15%) + saturate(428%) hue-rotate(191deg) brightness(96%) contrast(84%); + @overlay1: brightness(0) saturate(100%) invert(56%) sepia(15%) + saturate(455%) hue-rotate(192deg) brightness(90%) contrast(88%); + @overlay0: brightness(0) saturate(100%) invert(44%) sepia(6%) + saturate(1275%) hue-rotate(194deg) brightness(97%) contrast(88%); + @surface2: brightness(0) saturate(100%) invert(34%) sepia(8%) + saturate(1015%) hue-rotate(195deg) brightness(99%) contrast(89%); + @surface1: brightness(0) saturate(100%) invert(25%) sepia(6%) + saturate(1950%) hue-rotate(197deg) brightness(99%) contrast(86%); + @surface0: brightness(0) saturate(100%) invert(19%) sepia(5%) + saturate(2844%) hue-rotate(199deg) brightness(91%) contrast(93%); + @base: brightness(0) saturate(100%) invert(7%) sepia(4%) saturate(7496%) + hue-rotate(202deg) brightness(93%) contrast(87%); + @mantle: brightness(0) saturate(100%) invert(6%) sepia(4%) saturate(7465%) + hue-rotate(202deg) brightness(95%) contrast(90%); + @crust: brightness(0) saturate(100%) invert(3%) sepia(13%) saturate(6863%) + hue-rotate(220deg) brightness(95%) contrast(91%); + }; +}; // vim:ft=less From c7e4e145b02b7ed4f8db46345c6b8b63ae4b1eba Mon Sep 17 00:00:00 2001 From: K1aymore Date: Thu, 26 Dec 2024 17:27:53 -0800 Subject: [PATCH 37/39] Fix footer, add buttons on home page --- styles/myanimelist/catppuccin.user.css | 36 +++++++++++++++++++------- 1 file changed, 26 insertions(+), 10 deletions(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 93504a7776..e208b1108d 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -226,6 +226,11 @@ } } } + + a.button_add.button_add { + background-color: @surface0; + border-color: transparent; + } } .wrok-graph-inner.reading, @@ -300,7 +305,7 @@ } &.christmas .link-mal-logo { // change white to black, keep colors - filter: if((@lookup = latte), invert(1) hue-rotate(170deg), none); + filter: if((@lookup = latte), invert(1) hue-rotate(170deg) brightness(80%), none); background-image: url(/images/event/2023_christmas/logo_dark.png?v=1634263200); background-size: auto 30px; background-repeat: no-repeat; @@ -419,6 +424,12 @@ color: var(--color-text-light) !important; background-color: var(--color-accent-background) !important; + // STYLE: Removes Christmas header + //background-image: none !important; + #menu_left { + //background-image: none !important; + } + a:link, a:visited { // STYLE: could be --color-text-dark if unreadable @@ -426,12 +437,12 @@ } // sections when hovered - #nav.color-pc-constant li.hover a { + #nav li.hover a { color: @text !important; - background-color: @base; + background-color: @base !important; } // hover popup options - #nav.color-pc-constant ul li a { + #nav ul li a { color: @text !important; background-color: @base; &:hover { @@ -563,6 +574,11 @@ .icon-about-recommendations { color: @accent-color; + &::after { // hover tooltip + color: @text; + background-color: @mantle; + border-color: @surface1; + } } .widget.reviews .item { @@ -1373,11 +1389,6 @@ /* Recommendations section */ - .borderClass a.button_add.button_add { - background-color: @surface0; - border-color: transparent; - } - td .borderClass.bgColor1 { background-color: transparent; // should be slightly lighter than base but @surface0 looks bad in Latte } @@ -1966,7 +1977,12 @@ color: @text !important; background-color: @base !important; .footer-link-block { - // TODO: divider image not inverted in Latte + // approximate the divider image + background-image: radial-gradient(@surface2, @base 75%), url(/images/footer/footer-sns-border.png?v=1634263200) !important; + + .footer-link.home { + border-right-color: @subtext0; + } } .footer-social-media { &::before { From b1e6a9960809dd703988440197de66c190f346e9 Mon Sep 17 00:00:00 2001 From: K1aymore Date: Sun, 29 Dec 2024 22:18:08 -0800 Subject: [PATCH 38/39] theme Episode Discussion popup after logging episode --- styles/myanimelist/catppuccin.user.css | 31 ++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index e208b1108d..36eb7cafea 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -289,6 +289,37 @@ } } + // Episode Discussion popup + .mal-modal .mal-modal-dialog .mal-modal-content { + color: @text; + background-color: @base; + border-color: @surface1; + + button.btn-close { + color: @text; + } + + .mal-modal-header { + border-bottom-color: @surface0; + } + + .mal-modal-body { + background-color: @surface0 !important; + .modal-vote-score-label .caution { + color: @red; + } + .modal-vote-score li a { + color: @text !important; + background-color: @surface1; + border-color: @surface1 !important; + &:hover { + color: var(--color-text-light) !important; + background-color: var(--color-accent-background-hover); + } + } + } + } + /* Headers */ // top header From 5f76762fac7e9bd69fc0c7d60684d7ce6ab1e264 Mon Sep 17 00:00:00 2001 From: K1aymore Date: Sun, 29 Dec 2024 23:10:39 -0800 Subject: [PATCH 39/39] finish Episode Discussion popup --- styles/myanimelist/catppuccin.user.css | 43 +++++++++++++++++++++++++- 1 file changed, 42 insertions(+), 1 deletion(-) diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css index 36eb7cafea..6ec4f1d80c 100644 --- a/styles/myanimelist/catppuccin.user.css +++ b/styles/myanimelist/catppuccin.user.css @@ -311,12 +311,53 @@ .modal-vote-score li a { color: @text !important; background-color: @surface1; - border-color: @surface1 !important; + border-color: transparent !important; &:hover { color: var(--color-text-light) !important; background-color: var(--color-accent-background-hover); } } + .modal-vote-reply { + background-color: @surface0; + border-color: transparent; + .textarea { + background-color: @surface1; + border-color: @surface1; + } + } + button.mal-btn.primary { + color: var(--color-text-light); + background-color: var(--color-accent-background); + border-color: var(--color-accent-background); + &:hover { + background-color: var(--color-accent-background-hover); + border-color: var(--color-accent-background-hover); + } + } + button.mal-btn.primary.outline { + color: @text; + background-color: @surface1; + border-color: @surface1; + &:hover { + background-color: @surface2; + border-color: @surface2; + } + } + button.mal-btn.primary.outline.noborder { + color: @accent-color; + background-color: transparent; + border-color: transparent; + &:hover { + background-color: @surface1; + border-color: @surface1; + } + } + .modal-vote-score-footer a:hover { + background-color: @surface1; + } + .modal-vote-replies { + color: @subtext0; + } } }