Copyright © 2021-present Catppuccin Org 5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # EditorConfig is awesome: https://EditorConfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | charset = utf-8 9 | indent_size = 2 10 | indent_style = space 11 | end_of_line = lf 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | 15 | # go 16 | [*.go] 17 | indent_style = tab 18 | indent_size = 4 19 | 20 | # python 21 | [*.{ini,py,py.tpl,rst}] 22 | indent_size = 4 23 | 24 | # rust 25 | [*.rs] 26 | indent_size = 4 27 | 28 | # documentation, utils 29 | [*.{md,mdx,diff}] 30 | trim_trailing_whitespace = false 31 | 32 | # windows shell scripts 33 | [*.{cmd,bat,ps1}] 34 | end_of_line = crlf 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Catppuccin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/catppuccin.user.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | 3 | @name Anilist Catppuccin 4 | @namespace github.com/catppuccin/anilist 5 | @version 2.1.1 6 | @description Soothing pastel theme for Anilist 7 | @author Catppuccin 8 | @updateURL https://github.com/catppuccin/Anilist/raw/main/src/catppuccin.user.css 9 | 10 | @preprocessor less 11 | @var select lightFlavour "Light Flavour" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] 12 | @var select darkFlavour "Dark Flavour" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] 13 | @var select accentColour "Accent Colour" [ "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:Grey" ] 14 | @var select contrastColour "Contrast Colour" [ "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:Grey" ] 15 | 16 | ==/UserStyle== */ 17 | @-moz-document domain("anilist.co") { 18 | 19 | body:not(.site-theme-dark) { 20 | #catppuccin(@lightFlavour, @accentColour); 21 | } 22 | .site-theme-dark { 23 | #catppuccin(@darkFlavour, @accentColour); 24 | } 25 | 26 | @catppuccin: { 27 | @latte: { 28 | @rosewater: #dc8a78; 29 | @flamingo: #dd7878; 30 | @pink: #ea76cb; 31 | @mauve: #8839ef; 32 | @red: #d20f39; 33 | @maroon: #e64553; 34 | @peach: #fe640b; 35 | @yellow: #df8e1d; 36 | @green: #40a02b; 37 | @teal: #179299; 38 | @sky: #04a5e5; 39 | @sapphire: #209fb5; 40 | @blue: #1e66f5; 41 | @lavender: #7287fd; 42 | @text: #4c4f69; 43 | @subtext1: #5c5f77; 44 | @subtext0: #6c6f85; 45 | @overlay2: #7c7f93; 46 | @overlay1: #8c8fa1; 47 | @overlay0: #9ca0b0; 48 | @surface2: #acb0be; 49 | @surface1: #bcc0cc; 50 | @surface0: #ccd0da; 51 | @base: #eff1f5; 52 | @mantle: #e6e9ef; 53 | @crust: #dce0e8; 54 | } 55 | @frappe: { 56 | @rosewater: #f2d5cf; 57 | @flamingo: #eebebe; 58 | @pink: #f4b8e4; 59 | @mauve: #ca9ee6; 60 | @red: #e78284; 61 | @maroon: #ea999c; 62 | @peach: #ef9f76; 63 | @yellow: #e5c890; 64 | @green: #a6d189; 65 | @teal: #81c8be; 66 | @sky: #99d1db; 67 | @sapphire: #85c1dc; 68 | @blue: #8caaee; 69 | @lavender: #babbf1; 70 | @text: #c6d0f5; 71 | @subtext1: #b5bfe2; 72 | @subtext0: #a5adce; 73 | @overlay2: #949cbb; 74 | @overlay1: #838ba7; 75 | @overlay0: #737994; 76 | @surface2: #626880; 77 | @surface1: #51576d; 78 | @surface0: #414559; 79 | @base: #303446; 80 | @mantle: #292c3c; 81 | @crust: #232634; 82 | } 83 | @macchiato: { 84 | @rosewater: #f4dbd6; 85 | @flamingo: #f0c6c6; 86 | @pink: #f5bde6; 87 | @mauve: #c6a0f6; 88 | @red: #ed8796; 89 | @maroon: #ee99a0; 90 | @peach: #f5a97f; 91 | @yellow: #eed49f; 92 | @green: #a6da95; 93 | @teal: #8bd5ca; 94 | @sky: #91d7e3; 95 | @sapphire: #7dc4e4; 96 | @blue: #8aadf4; 97 | @lavender: #b7bdf8; 98 | @text: #cad3f5; 99 | @subtext1: #b8c0e0; 100 | @subtext0: #a5adcb; 101 | @overlay2: #939ab7; 102 | @overlay1: #8087a2; 103 | @overlay0: #6e738d; 104 | @surface2: #5b6078; 105 | @surface1: #494d64; 106 | @surface0: #363a4f; 107 | @base: #24273a; 108 | @mantle: #1e2030; 109 | @crust: #181926; 110 | } 111 | @mocha: { 112 | @rosewater: #f5e0dc; 113 | @flamingo: #f2cdcd; 114 | @pink: #f5c2e7; 115 | @mauve: #cba6f7; 116 | @red: #f38ba8; 117 | @maroon: #eba0ac; 118 | @peach: #fab387; 119 | @yellow: #f9e2af; 120 | @green: #a6e3a1; 121 | @teal: #94e2d5; 122 | @sky: #89dceb; 123 | @sapphire: #74c7ec; 124 | @blue: #89b4fa; 125 | @lavender: #b4befe; 126 | @text: #cdd6f4; 127 | @subtext1: #bac2de; 128 | @subtext0: #a6adc8; 129 | @overlay2: #9399b2; 130 | @overlay1: #7f849c; 131 | @overlay0: #6c7086; 132 | @surface2: #585b70; 133 | @surface1: #45475a; 134 | @surface0: #313244; 135 | @base: #1e1e2e; 136 | @mantle: #181825; 137 | @crust: #11111b; 138 | } 139 | } 140 | 141 | #rgbify(@color) { 142 | @rgb-raw: red(@color) green(@color) blue(@color); 143 | } 144 | 145 | #catppuccin(@lookup, @accent) { 146 | @rosewater: @catppuccin[@@lookup][@rosewater]; 147 | @flamingo: @catppuccin[@@lookup][@flamingo]; 148 | @pink: @catppuccin[@@lookup][@pink]; 149 | @mauve: @catppuccin[@@lookup][@mauve]; 150 | @red: @catppuccin[@@lookup][@red]; 151 | @maroon: @catppuccin[@@lookup][@maroon]; 152 | @peach: @catppuccin[@@lookup][@peach]; 153 | @yellow: @catppuccin[@@lookup][@yellow]; 154 | @green: @catppuccin[@@lookup][@green]; 155 | @teal: @catppuccin[@@lookup][@teal]; 156 | @sky: @catppuccin[@@lookup][@sky]; 157 | @sapphire: @catppuccin[@@lookup][@sapphire]; 158 | @blue: @catppuccin[@@lookup][@blue]; 159 | @lavender: @catppuccin[@@lookup][@lavender]; 160 | @text: @catppuccin[@@lookup][@text]; 161 | @subtext1: @catppuccin[@@lookup][@subtext1]; 162 | @subtext0: @catppuccin[@@lookup][@subtext0]; 163 | @overlay2: @catppuccin[@@lookup][@overlay2]; 164 | @overlay1: @catppuccin[@@lookup][@overlay1]; 165 | @overlay0: @catppuccin[@@lookup][@overlay0]; 166 | @surface2: @catppuccin[@@lookup][@surface2]; 167 | @surface1: @catppuccin[@@lookup][@surface1]; 168 | @surface0: @catppuccin[@@lookup][@surface0]; 169 | @base: @catppuccin[@@lookup][@base]; 170 | @mantle: @catppuccin[@@lookup][@mantle]; 171 | @crust: @catppuccin[@@lookup][@crust]; 172 | @accent: @catppuccin[@@lookup][@@accentColour]; 173 | @contrast-color: @catppuccin[@@lookup][@@contrastColour]; 174 | /* raw rgb needs to be defined for some reason */ 175 | @rgb-raw: @red; 176 | 177 | /* rgbify function converts a less color variable to raw rgb in @rgb-raw */ 178 | #rgbify(@color) { 179 | @rgb-raw: red(@color), 180 | green(@color), 181 | blue(@color); 182 | } 183 | 184 | & when (@lookup =latte) { 185 | --color-blue-dim: #rgbify(desaturate(lighten(@accent, 10%), 10%))[@rgb-raw]; 186 | .nav[data-v-62eacfff], 187 | .solid[data-v-62eacfff], 188 | .transparent[data-v-62eacfff]:hover { 189 | background: darken(@text, 10%); 190 | color: @base; 191 | } 192 | } 193 | 194 | & when not (@lookup =latte) { 195 | --color-blue-dim: #rgbify(desaturate(darken(@accent, 10%), 10%))[@rgb-raw]; 196 | } 197 | 198 | /* BASE VARIABLES */ 199 | & { 200 | --color-background: #rgbify(@crust)[@rgb-raw]; 201 | --color-foreground: #rgbify(@base)[@rgb-raw]; 202 | --color-foreground-grey: #rgbify(@surface0)[@rgb-raw]; 203 | --color-foreground-grey-dark: #rgbify(@surface0)[@rgb-raw]; 204 | --color-foreground-blue: #rgbify(@mantle)[@rgb-raw]; 205 | --color-foreground-blue-dark: #rgbify(@mantle)[@rgb-raw]; 206 | --color-background-blue-dark: #rgbify(@subtext1)[@rgb-raw]; 207 | --color-overlay: #rgbify(@crust)[@rgb-raw]; 208 | --color-shadow: #rgbify(@mantle)[@rgb-raw]; 209 | --color-shadow-dark: #rgbify(@crust)[@rgb-raw]; 210 | --color-shadow-blue: #rgbify(@blue)[@rgb-raw]; 211 | --color-text: #rgbify(@text)[@rgb-raw]; 212 | --color-text-light: #rgbify(@subtext1)[@rgb-raw]; 213 | --color-text-lighter: #rgbify(@subtext0)[@rgb-raw]; 214 | --color-text-bright: #rgbify(@text)[@rgb-raw]; 215 | --color-blue: #rgbify(@accent)[@rgb-raw]; 216 | --color-white: 255, 255, 255; 217 | --color-black: 0, 0, 0; 218 | --color-red: #rgbify(@contrast-color)[@rgb-raw]; 219 | --color-peach: #rgbify(@maroon)[@rgb-raw]; 220 | --color-orange: #rgbify(@peach)[@rgb-raw]; 221 | --color-yellow: #rgbify(@yellow)[@rgb-raw]; 222 | --color-green: #rgbify(@green)[@rgb-raw]; 223 | --color-background-1200: #rgbify(@text)[@rgb-raw]; 224 | --color-background-1100: #rgbify(@text)[@rgb-raw]; 225 | --color-background-1000: #rgbify(@text)[@rgb-raw]; 226 | --color-background-900: #rgbify(@subtext1)[@rgb-raw]; 227 | --color-background-800: #rgbify(@subtext0)[@rgb-raw]; 228 | --color-background-700: #rgbify(@surface1)[@rgb-raw]; 229 | --color-background-600: #rgbify(@surface0)[@rgb-raw]; 230 | --color-background-500: #rgbify(@surface0)[@rgb-raw]; 231 | --color-background-400: #rgbify(@surface0)[@rgb-raw]; 232 | --color-background-300: #rgbify(@base)[@rgb-raw]; 233 | --color-background-200: #rgbify(@mantle)[@rgb-raw]; 234 | --color-background-100: #rgbify(@crust)[@rgb-raw]; 235 | --color-gray-1200: #rgbify(@text)[@rgb-raw]; 236 | --color-gray-1100: #rgbify(@text)[@rgb-raw]; 237 | --color-gray-1000: #rgbify(@text)[@rgb-raw]; 238 | --color-gray-900: #rgbify(@text)[@rgb-raw]; 239 | --color-gray-800: #rgbify(@overlay2)[@rgb-raw]; 240 | --color-gray-700: #rgbify(@overlay1)[@rgb-raw]; 241 | --color-gray-600: #rgbify(@overlay0)[@rgb-raw]; 242 | --color-gray-500: #rgbify(@surface2)[@rgb-raw]; 243 | --color-gray-400: #rgbify(@surface1)[@rgb-raw]; 244 | --color-gray-300: #rgbify(@surface0)[@rgb-raw]; 245 | --color-gray-200: #rgbify(@mantle)[@rgb-raw]; 246 | --color-gray-100: #rgbify(@crust)[@rgb-raw]; 247 | --color-blue-100: #rgbify(@text)[@rgb-raw]; 248 | --color-blue-200: #rgbify(@text)[@rgb-raw]; 249 | --color-blue-300: #rgbify(@text)[@rgb-raw]; 250 | --color-blue-400: #rgbify(@sapphire)[@rgb-raw]; 251 | --color-blue-500: #rgbify(@sapphire)[@rgb-raw]; 252 | --color-blue-600: #rgbify(@blue)[@rgb-raw]; 253 | --color-blue-700: #rgbify(@blue)[@rgb-raw]; 254 | --color-blue-800: #rgbify(@blue)[@rgb-raw]; 255 | --color-blue-900: #rgbify(@blue)[@rgb-raw]; 256 | --color-blue-1000: #rgbify(@blue)[@rgb-raw]; 257 | --color-green-100: #rgbify(@teal)[@rgb-raw]; 258 | --color-green-200: #rgbify(@green)[@rgb-raw]; 259 | --color-green-300: #rgbify(@green)[@rgb-raw]; 260 | --color-green-400: #rgbify(@green)[@rgb-raw]; 261 | --color-green-500: #rgbify(@green)[@rgb-raw]; 262 | --color-green-600: #rgbify(@green)[@rgb-raw]; 263 | --color-green-700: #rgbify(@green)[@rgb-raw]; 264 | --color-green-800: #rgbify(@green)[@rgb-raw]; 265 | --color-red-100: #rgbify(@text)[@rgb-raw]; 266 | --color-red-200: #rgbify(@flamingo)[@rgb-raw]; 267 | --color-red-300: #rgbify(@maroon)[@rgb-raw]; 268 | --color-red-400: #rgbify(@red)[@rgb-raw]; 269 | --color-red-500: #rgbify(@red)[@rgb-raw]; 270 | --color-red-600: #rgbify(@red)[@rgb-raw]; 271 | --color-red-700: #rgbify(@red)[@rgb-raw]; 272 | } 273 | /* DARK THEME SPECIFIC TWEAKS */ 274 | & when not (@lookup =latte) { 275 | --color-background: #rgbify(@crust)[@rgb-raw]; 276 | --color-foreground: #rgbify(@base)[@rgb-raw]; 277 | --color-foreground-grey: #rgbify(@surface0)[@rgb-raw]; 278 | --color-foreground-grey-dark: #rgbify(@surface0)[@rgb-raw]; 279 | --color-foreground-blue: #rgbify(@mantle)[@rgb-raw]; 280 | --color-foreground-blue-dark: #rgbify(@mantle)[@rgb-raw]; 281 | --color-text: #rgbify(@text)[@rgb-raw]; 282 | --color-text-light: #rgbify(@subtext0)[@rgb-raw]; 283 | --color-text-lighter: #rgbify(@subtext1)[@rgb-raw]; 284 | --color-shadow-blue: #rgbify(@crust)[@rgb-raw]; 285 | --color-background-1200: #rgbify(@text)[@rgb-raw]; 286 | --color-background-1100: #rgbify(@text)[@rgb-raw]; 287 | --color-background-1000: #rgbify(@text)[@rgb-raw]; 288 | --color-background-900: #rgbify(@subtext1)[@rgb-raw]; 289 | --color-background-800: #rgbify(@subtext0)[@rgb-raw]; 290 | --color-background-700: #rgbify(@surface1)[@rgb-raw]; 291 | --color-background-600: #rgbify(@surface0)[@rgb-raw]; 292 | --color-background-500: #rgbify(@surface0)[@rgb-raw]; 293 | --color-background-400: #rgbify(@surface0)[@rgb-raw]; 294 | --color-background-300: #rgbify(@base)[@rgb-raw]; 295 | --color-background-200: #rgbify(@mantle)[@rgb-raw]; 296 | --color-background-100: #rgbify(@crust)[@rgb-raw]; 297 | --color-gray-1200: #rgbify(@text)[@rgb-raw]; 298 | --color-gray-1100: #rgbify(@text)[@rgb-raw]; 299 | --color-gray-1000: #rgbify(@text)[@rgb-raw]; 300 | --color-gray-900: #rgbify(@text)[@rgb-raw]; 301 | --color-gray-800: #rgbify(@overlay2)[@rgb-raw]; 302 | --color-gray-700: #rgbify(@overlay1)[@rgb-raw]; 303 | --color-gray-600: #rgbify(@overlay0)[@rgb-raw]; 304 | --color-gray-500: #rgbify(@surface2)[@rgb-raw]; 305 | --color-gray-400: #rgbify(@surface1)[@rgb-raw]; 306 | --color-gray-300: #rgbify(@surface0)[@rgb-raw]; 307 | --color-gray-200: #rgbify(@mantle)[@rgb-raw]; 308 | --color-gray-100: #rgbify(@crust)[@rgb-raw]; 309 | } 310 | /* DARK THEME NAV BAR */ 311 | .nav-unscoped when not (@lookup =latte) { 312 | background-color: @mantle !important; 313 | } 314 | /*-----------------PROFILE FIXES-----------------*/ 315 | #profileColor(@color) { 316 | --color-blue: #rgbify(@color)[@rgb-raw]; 317 | & when (@lookup =latte) { 318 | --color-blue-dim: #rgbify(lighten(@color, 10%))[@rgb-raw]; 319 | } 320 | & when not (@lookup =latte) { 321 | --color-blue-dim: #rgbify(darken(@color, 10%))[@rgb-raw]; 322 | } 323 | --color-overlay: @crust; 324 | .progress .bar { 325 | background: linear-gradient(270deg, darken(@color, 10%), @color); 326 | } 327 | } 328 | .user-page-unscoped.orange { 329 | #profileColor(@peach) 330 | } 331 | .user-page-unscoped.green { 332 | #profileColor(@green) 333 | } 334 | .user-page-unscoped.purple { 335 | #profileColor(@mauve) 336 | } 337 | .user-page-unscoped.red { 338 | #profileColor(@red) 339 | } 340 | .user-page-unscoped.blue { 341 | #profileColor(@blue) 342 | } 343 | .user-page-unscoped.pink { 344 | #profileColor(@pink) 345 | } 346 | .user-page-unscoped.gray { 347 | #profileColor(@overlay1) 348 | } 349 | 350 | /*--------------Tags----------------*/ 351 | .tag { 352 | background: @accent !important; 353 | color: @base !important; 354 | } 355 | .genre { 356 | color: @base !important; 357 | } 358 | 359 | /*----Tracking Status List Stuff----*/ 360 | .list[data-v-5776f768], 361 | .el-icon-arrow-down:before { 362 | color: @mantle !important; 363 | } 364 | .el-dropdown-menu, 365 | .el-dropdown-menu__item--divided:before, 366 | .el-select-dropdown { 367 | background-color: @base !important; 368 | } 369 | .el-dropdown-menu { 370 | border: 4px @text !important; 371 | } 372 | .el-dropdown-menu__item:focus, 373 | .el-dropdown-menu__item:not(.is-disabled):hover { 374 | color: @crust !important; 375 | } 376 | .el-dropdown-menu__item--divided when not (@lookup =latte) { 377 | border-top-color: rgb(21, 31, 46); 378 | } 379 | .el-select-dropdown__item.hover, 380 | .el-select-dropdown__item:hover { 381 | background-color: @mantle; 382 | } 383 | 384 | /*---------SCORE TWEAKS--------------*/ 385 | .score[data-v-5ca094da] { 386 | color: @base; 387 | } 388 | 389 | /*--------------FOOTER (It's hardcoded idk why anilist dumdum)----------*/ 390 | .footer[data-v-0f519cab] { 391 | background: @crust; 392 | color: @subtext0; 393 | } 394 | 395 | /*------------------MISC EDITS--------------------*/ 396 | /*--Reset button in notifications-----*/ 397 | .reset-btn { 398 | color: @base !important; 399 | } 400 | /* Publish Button in Replies and Messages */ 401 | .save { 402 | color: @base !important; 403 | } 404 | /*------------IMAGE COVER------------*/ 405 | .cover .image-text, 406 | .plus-progress { 407 | color: @text !important; 408 | } 409 | 410 | .entry .plus-progress, 411 | .medialist.table .entry .edit { 412 | color: @base !important; 413 | } 414 | /*--------Settings button--------*/ 415 | .settings[data-v-3deab077] .button { 416 | color: @crust; 417 | } 418 | .el-checkbox__input.is-checked .el-checkbox__inner, 419 | .el-radio__input.is-checked .el-radio__inner { 420 | background-color: @accent; 421 | border-color: @accent; 422 | } 423 | .el-checkbox__inner:after { 424 | border-color: @crust; 425 | border-width: 2px; 426 | left: 3px; 427 | } 428 | .el-radio__input.is-checked + .el-radio__label { 429 | color: @accent; 430 | } 431 | /*--------HIDE SCROLLBAR IN BIO-----*/ 432 | .section::-webkit-scrollbar { 433 | display: none; 434 | } 435 | .section { 436 | -ms-overflow-style: none; 437 | scrollbar-width: none; 438 | } 439 | /*--------REMOVE DROPDOWN SHADOWS-----*/ 440 | .dropdown.dropdown { 441 | box-shadow: none; 442 | } 443 | /*---------ANILIST LIKER PLUGIN------*/ 444 | #AnilistLikerPlugin .mmd2 { 445 | font-style: normal !important; 446 | font-weight: 700; 447 | font-family: Overpass; 448 | } 449 | #AnilistLikerPlugin .btntop { 450 | margin-bottom: -4px; 451 | margin-top: 5px; 452 | } 453 | #AnilistLikerPlugin .btnbottom { 454 | margin-top: -2px; 455 | } 456 | } 457 | } 458 | 459 | @-moz-document domain("anichart.net") { 460 | 461 | body:not(.site-theme-dark) { 462 | #catppuccin(@lightFlavour, @accentColour); 463 | } 464 | .site-theme-dark { 465 | #catppuccin(@darkFlavour, @accentColour); 466 | } 467 | 468 | @catppuccin: { 469 | @latte: { 470 | @rosewater: #dc8a78; 471 | @flamingo: #dd7878; 472 | @pink: #ea76cb; 473 | @mauve: #8839ef; 474 | @red: #d20f39; 475 | @maroon: #e64553; 476 | @peach: #fe640b; 477 | @yellow: #df8e1d; 478 | @green: #40a02b; 479 | @teal: #179299; 480 | @sky: #04a5e5; 481 | @sapphire: #209fb5; 482 | @blue: #1e66f5; 483 | @lavender: #7287fd; 484 | @text: #4c4f69; 485 | @subtext1: #5c5f77; 486 | @subtext0: #6c6f85; 487 | @overlay2: #7c7f93; 488 | @overlay1: #8c8fa1; 489 | @overlay0: #9ca0b0; 490 | @surface2: #acb0be; 491 | @surface1: #bcc0cc; 492 | @surface0: #ccd0da; 493 | @base: #eff1f5; 494 | @mantle: #e6e9ef; 495 | @crust: #dce0e8; 496 | } 497 | @frappe: { 498 | @rosewater: #f2d5cf; 499 | @flamingo: #eebebe; 500 | @pink: #f4b8e4; 501 | @mauve: #ca9ee6; 502 | @red: #e78284; 503 | @maroon: #ea999c; 504 | @peach: #ef9f76; 505 | @yellow: #e5c890; 506 | @green: #a6d189; 507 | @teal: #81c8be; 508 | @sky: #99d1db; 509 | @sapphire: #85c1dc; 510 | @blue: #8caaee; 511 | @lavender: #babbf1; 512 | @text: #c6d0f5; 513 | @subtext1: #b5bfe2; 514 | @subtext0: #a5adce; 515 | @overlay2: #949cbb; 516 | @overlay1: #838ba7; 517 | @overlay0: #737994; 518 | @surface2: #626880; 519 | @surface1: #51576d; 520 | @surface0: #414559; 521 | @base: #303446; 522 | @mantle: #292c3c; 523 | @crust: #232634; 524 | } 525 | @macchiato: { 526 | @rosewater: #f4dbd6; 527 | @flamingo: #f0c6c6; 528 | @pink: #f5bde6; 529 | @mauve: #c6a0f6; 530 | @red: #ed8796; 531 | @maroon: #ee99a0; 532 | @peach: #f5a97f; 533 | @yellow: #eed49f; 534 | @green: #a6da95; 535 | @teal: #8bd5ca; 536 | @sky: #91d7e3; 537 | @sapphire: #7dc4e4; 538 | @blue: #8aadf4; 539 | @lavender: #b7bdf8; 540 | @text: #cad3f5; 541 | @subtext1: #b8c0e0; 542 | @subtext0: #a5adcb; 543 | @overlay2: #939ab7; 544 | @overlay1: #8087a2; 545 | @overlay0: #6e738d; 546 | @surface2: #5b6078; 547 | @surface1: #494d64; 548 | @surface0: #363a4f; 549 | @base: #24273a; 550 | @mantle: #1e2030; 551 | @crust: #181926; 552 | } 553 | @mocha: { 554 | @rosewater: #f5e0dc; 555 | @flamingo: #f2cdcd; 556 | @pink: #f5c2e7; 557 | @mauve: #cba6f7; 558 | @red: #f38ba8; 559 | @maroon: #eba0ac; 560 | @peach: #fab387; 561 | @yellow: #f9e2af; 562 | @green: #a6e3a1; 563 | @teal: #94e2d5; 564 | @sky: #89dceb; 565 | @sapphire: #74c7ec; 566 | @blue: #89b4fa; 567 | @lavender: #b4befe; 568 | @text: #cdd6f4; 569 | @subtext1: #bac2de; 570 | @subtext0: #a6adc8; 571 | @overlay2: #9399b2; 572 | @overlay1: #7f849c; 573 | @overlay0: #6c7086; 574 | @surface2: #585b70; 575 | @surface1: #45475a; 576 | @surface0: #313244; 577 | @base: #1e1e2e; 578 | @mantle: #181825; 579 | @crust: #11111b; 580 | } 581 | } 582 | 583 | #rgbify(@color) { 584 | @rgb-raw: red(@color) green(@color) blue(@color); 585 | } 586 | 587 | #catppuccin(@lookup, @accent) { 588 | @rosewater: @catppuccin[@@lookup][@rosewater]; 589 | @flamingo: @catppuccin[@@lookup][@flamingo]; 590 | @pink: @catppuccin[@@lookup][@pink]; 591 | @mauve: @catppuccin[@@lookup][@mauve]; 592 | @red: @catppuccin[@@lookup][@red]; 593 | @maroon: @catppuccin[@@lookup][@maroon]; 594 | @peach: @catppuccin[@@lookup][@peach]; 595 | @yellow: @catppuccin[@@lookup][@yellow]; 596 | @green: @catppuccin[@@lookup][@green]; 597 | @teal: @catppuccin[@@lookup][@teal]; 598 | @sky: @catppuccin[@@lookup][@sky]; 599 | @sapphire: @catppuccin[@@lookup][@sapphire]; 600 | @blue: @catppuccin[@@lookup][@blue]; 601 | @lavender: @catppuccin[@@lookup][@lavender]; 602 | @text: @catppuccin[@@lookup][@text]; 603 | @subtext1: @catppuccin[@@lookup][@subtext1]; 604 | @subtext0: @catppuccin[@@lookup][@subtext0]; 605 | @overlay2: @catppuccin[@@lookup][@overlay2]; 606 | @overlay1: @catppuccin[@@lookup][@overlay1]; 607 | @overlay0: @catppuccin[@@lookup][@overlay0]; 608 | @surface2: @catppuccin[@@lookup][@surface2]; 609 | @surface1: @catppuccin[@@lookup][@surface1]; 610 | @surface0: @catppuccin[@@lookup][@surface0]; 611 | @base: @catppuccin[@@lookup][@base]; 612 | @mantle: @catppuccin[@@lookup][@mantle]; 613 | @crust: @catppuccin[@@lookup][@crust]; 614 | @accent: @catppuccin[@@lookup][@@accentColour]; 615 | @contrast-color: @catppuccin[@@lookup][@@contrastColour]; 616 | /* raw rgb needs to be defined for some reason */ 617 | @rgb-raw: @red; 618 | 619 | /* rgbify function converts a less color variable to raw rgb in @rgb-raw */ 620 | #rgbify(@color) { 621 | @rgb-raw: red(@color), 622 | green(@color), 623 | blue(@color); 624 | } 625 | 626 | & when (@lookup =latte) { 627 | --color-blue-dim: #rgbify(desaturate(lighten(@accent, 10%), 10%))[@rgb-raw]; 628 | .nav[data-v-62eacfff], 629 | .solid[data-v-62eacfff], 630 | .transparent[data-v-62eacfff]:hover { 631 | background: darken(@text, 10%); 632 | color: @base; 633 | } 634 | } 635 | 636 | & when not (@lookup =latte) { 637 | --color-blue-dim: #rgbify(desaturate(darken(@accent, 10%), 10%))[@rgb-raw]; 638 | } 639 | 640 | /* BASE VARIABLES */ 641 | & { 642 | --color-background: #rgbify(@crust)[@rgb-raw]; 643 | --color-foreground: #rgbify(@base)[@rgb-raw]; 644 | --color-foreground-grey: #rgbify(@surface0)[@rgb-raw]; 645 | --color-foreground-grey-dark: #rgbify(@surface0)[@rgb-raw]; 646 | --color-foreground-blue: #rgbify(@mantle)[@rgb-raw]; 647 | --color-foreground-blue-dark: #rgbify(@mantle)[@rgb-raw]; 648 | --color-background-blue-dark: #rgbify(@subtext1)[@rgb-raw]; 649 | --color-overlay: #rgbify(@crust)[@rgb-raw]; 650 | --color-shadow: #rgbify(@mantle)[@rgb-raw]; 651 | --color-shadow-dark: #rgbify(@crust)[@rgb-raw]; 652 | --color-shadow-blue: #rgbify(@blue)[@rgb-raw]; 653 | --color-text: #rgbify(@text)[@rgb-raw]; 654 | --color-text-light: #rgbify(@subtext1)[@rgb-raw]; 655 | --color-text-lighter: #rgbify(@subtext0)[@rgb-raw]; 656 | --color-text-bright: #rgbify(@text)[@rgb-raw]; 657 | --color-blue: #rgbify(@accent)[@rgb-raw]; 658 | --color-white: 255, 255, 255; 659 | --color-black: 0, 0, 0; 660 | --color-red: #rgbify(@contrast-color)[@rgb-raw]; 661 | --color-peach: #rgbify(@maroon)[@rgb-raw]; 662 | --color-orange: #rgbify(@peach)[@rgb-raw]; 663 | --color-yellow: #rgbify(@yellow)[@rgb-raw]; 664 | --color-green: #rgbify(@green)[@rgb-raw]; 665 | --color-background-1200: #rgbify(@text)[@rgb-raw]; 666 | --color-background-1100: #rgbify(@text)[@rgb-raw]; 667 | --color-background-1000: #rgbify(@text)[@rgb-raw]; 668 | --color-background-900: #rgbify(@subtext1)[@rgb-raw]; 669 | --color-background-800: #rgbify(@subtext0)[@rgb-raw]; 670 | --color-background-700: #rgbify(@surface1)[@rgb-raw]; 671 | --color-background-600: #rgbify(@surface0)[@rgb-raw]; 672 | --color-background-500: #rgbify(@surface0)[@rgb-raw]; 673 | --color-background-400: #rgbify(@surface0)[@rgb-raw]; 674 | --color-background-300: #rgbify(@base)[@rgb-raw]; 675 | --color-background-200: #rgbify(@mantle)[@rgb-raw]; 676 | --color-background-100: #rgbify(@crust)[@rgb-raw]; 677 | --color-gray-1200: #rgbify(@text)[@rgb-raw]; 678 | --color-gray-1100: #rgbify(@text)[@rgb-raw]; 679 | --color-gray-1000: #rgbify(@text)[@rgb-raw]; 680 | --color-gray-900: #rgbify(@text)[@rgb-raw]; 681 | --color-gray-800: #rgbify(@overlay2)[@rgb-raw]; 682 | --color-gray-700: #rgbify(@overlay1)[@rgb-raw]; 683 | --color-gray-600: #rgbify(@overlay0)[@rgb-raw]; 684 | --color-gray-500: #rgbify(@surface2)[@rgb-raw]; 685 | --color-gray-400: #rgbify(@surface1)[@rgb-raw]; 686 | --color-gray-300: #rgbify(@surface0)[@rgb-raw]; 687 | --color-gray-200: #rgbify(@mantle)[@rgb-raw]; 688 | --color-gray-100: #rgbify(@crust)[@rgb-raw]; 689 | --color-blue-100: #rgbify(@text)[@rgb-raw]; 690 | --color-blue-200: #rgbify(@text)[@rgb-raw]; 691 | --color-blue-300: #rgbify(@text)[@rgb-raw]; 692 | --color-blue-400: #rgbify(@sapphire)[@rgb-raw]; 693 | --color-blue-500: #rgbify(@sapphire)[@rgb-raw]; 694 | --color-blue-600: #rgbify(@blue)[@rgb-raw]; 695 | --color-blue-700: #rgbify(@blue)[@rgb-raw]; 696 | --color-blue-800: #rgbify(@blue)[@rgb-raw]; 697 | --color-blue-900: #rgbify(@blue)[@rgb-raw]; 698 | --color-blue-1000: #rgbify(@blue)[@rgb-raw]; 699 | --color-green-100: #rgbify(@teal)[@rgb-raw]; 700 | --color-green-200: #rgbify(@green)[@rgb-raw]; 701 | --color-green-300: #rgbify(@green)[@rgb-raw]; 702 | --color-green-400: #rgbify(@green)[@rgb-raw]; 703 | --color-green-500: #rgbify(@green)[@rgb-raw]; 704 | --color-green-600: #rgbify(@green)[@rgb-raw]; 705 | --color-green-700: #rgbify(@green)[@rgb-raw]; 706 | --color-green-800: #rgbify(@green)[@rgb-raw]; 707 | --color-red-100: #rgbify(@text)[@rgb-raw]; 708 | --color-red-200: #rgbify(@flamingo)[@rgb-raw]; 709 | --color-red-300: #rgbify(@maroon)[@rgb-raw]; 710 | --color-red-400: #rgbify(@red)[@rgb-raw]; 711 | --color-red-500: #rgbify(@red)[@rgb-raw]; 712 | --color-red-600: #rgbify(@red)[@rgb-raw]; 713 | --color-red-700: #rgbify(@red)[@rgb-raw]; 714 | } 715 | /* DARK THEME SPECIFIC TWEAKS */ 716 | & when not (@lookup =latte) { 717 | --color-background: #rgbify(@crust)[@rgb-raw]; 718 | --color-foreground: #rgbify(@base)[@rgb-raw]; 719 | --color-foreground-grey: #rgbify(@surface0)[@rgb-raw]; 720 | --color-foreground-grey-dark: #rgbify(@surface0)[@rgb-raw]; 721 | --color-foreground-blue: #rgbify(@mantle)[@rgb-raw]; 722 | --color-foreground-blue-dark: #rgbify(@mantle)[@rgb-raw]; 723 | --color-text: #rgbify(@text)[@rgb-raw]; 724 | --color-text-light: #rgbify(@subtext0)[@rgb-raw]; 725 | --color-text-lighter: #rgbify(@subtext1)[@rgb-raw]; 726 | --color-shadow-blue: #rgbify(@crust)[@rgb-raw]; 727 | --color-background-1200: #rgbify(@text)[@rgb-raw]; 728 | --color-background-1100: #rgbify(@text)[@rgb-raw]; 729 | --color-background-1000: #rgbify(@text)[@rgb-raw]; 730 | --color-background-900: #rgbify(@subtext1)[@rgb-raw]; 731 | --color-background-800: #rgbify(@subtext0)[@rgb-raw]; 732 | --color-background-700: #rgbify(@surface1)[@rgb-raw]; 733 | --color-background-600: #rgbify(@surface0)[@rgb-raw]; 734 | --color-background-500: #rgbify(@surface0)[@rgb-raw]; 735 | --color-background-400: #rgbify(@surface0)[@rgb-raw]; 736 | --color-background-300: #rgbify(@base)[@rgb-raw]; 737 | --color-background-200: #rgbify(@mantle)[@rgb-raw]; 738 | --color-background-100: #rgbify(@crust)[@rgb-raw]; 739 | --color-gray-1200: #rgbify(@text)[@rgb-raw]; 740 | --color-gray-1100: #rgbify(@text)[@rgb-raw]; 741 | --color-gray-1000: #rgbify(@text)[@rgb-raw]; 742 | --color-gray-900: #rgbify(@text)[@rgb-raw]; 743 | --color-gray-800: #rgbify(@overlay2)[@rgb-raw]; 744 | --color-gray-700: #rgbify(@overlay1)[@rgb-raw]; 745 | --color-gray-600: #rgbify(@overlay0)[@rgb-raw]; 746 | --color-gray-500: #rgbify(@surface2)[@rgb-raw]; 747 | --color-gray-400: #rgbify(@surface1)[@rgb-raw]; 748 | --color-gray-300: #rgbify(@surface0)[@rgb-raw]; 749 | --color-gray-200: #rgbify(@mantle)[@rgb-raw]; 750 | --color-gray-100: #rgbify(@crust)[@rgb-raw]; 751 | } 752 | /* DARK THEME NAV BAR */ 753 | .nav-unscoped when not (@lookup =latte) { 754 | background-color: @mantle !important; 755 | } 756 | /*-----------------PROFILE FIXES-----------------*/ 757 | #profileColor(@color) { 758 | --color-blue: #rgbify(@color)[@rgb-raw]; 759 | & when (@lookup =latte) { 760 | --color-blue-dim: #rgbify(lighten(@color, 10%))[@rgb-raw]; 761 | } 762 | & when not (@lookup =latte) { 763 | --color-blue-dim: #rgbify(darken(@color, 10%))[@rgb-raw]; 764 | } 765 | --color-overlay: @crust; 766 | .progress .bar { 767 | background: linear-gradient(270deg, darken(@color, 10%), @color); 768 | } 769 | } 770 | .user-page-unscoped.orange { 771 | #profileColor(@peach) 772 | } 773 | .user-page-unscoped.green { 774 | #profileColor(@green) 775 | } 776 | .user-page-unscoped.purple { 777 | #profileColor(@mauve) 778 | } 779 | .user-page-unscoped.red { 780 | #profileColor(@red) 781 | } 782 | .user-page-unscoped.blue { 783 | #profileColor(@blue) 784 | } 785 | .user-page-unscoped.pink { 786 | #profileColor(@pink) 787 | } 788 | .user-page-unscoped.gray { 789 | #profileColor(@overlay1) 790 | } 791 | 792 | /*--------------Tags----------------*/ 793 | .tag { 794 | background: @accent !important; 795 | color: @base !important; 796 | } 797 | .genre { 798 | color: @base !important; 799 | } 800 | 801 | /*----Tracking Status List Stuff----*/ 802 | .list[data-v-5776f768], 803 | .el-icon-arrow-down:before { 804 | color: @mantle !important; 805 | } 806 | .el-dropdown-menu, 807 | .el-dropdown-menu__item--divided:before, 808 | .el-select-dropdown { 809 | background-color: @base !important; 810 | } 811 | .el-dropdown-menu { 812 | border: 4px @text !important; 813 | } 814 | .el-dropdown-menu__item:focus, 815 | .el-dropdown-menu__item:not(.is-disabled):hover { 816 | color: @crust !important; 817 | } 818 | .el-dropdown-menu__item--divided when not (@lookup =latte) { 819 | border-top-color: rgb(21, 31, 46); 820 | } 821 | .el-select-dropdown__item.hover, 822 | .el-select-dropdown__item:hover { 823 | background-color: @mantle; 824 | } 825 | 826 | /*---------SCORE TWEAKS--------------*/ 827 | .score[data-v-5ca094da] { 828 | color: @base; 829 | } 830 | 831 | /*--------------FOOTER (It's hardcoded idk why anilist dumdum)----------*/ 832 | .footer[data-v-0f519cab] { 833 | background: @crust; 834 | color: @subtext0; 835 | } 836 | 837 | /*------------------MISC EDITS--------------------*/ 838 | /*--Reset button in notifications-----*/ 839 | .reset-btn { 840 | color: @base !important; 841 | } 842 | /* Publish Button in Replies and Messages */ 843 | .save { 844 | color: @base !important; 845 | } 846 | /*------------IMAGE COVER------------*/ 847 | .cover .image-text, 848 | .plus-progress { 849 | color: @text !important; 850 | } 851 | 852 | .entry .plus-progress, 853 | .medialist.table .entry .edit { 854 | color: @base !important; 855 | } 856 | /*--------Settings button--------*/ 857 | .settings[data-v-3deab077] .button { 858 | color: @crust; 859 | } 860 | .el-checkbox__input.is-checked .el-checkbox__inner, 861 | .el-radio__input.is-checked .el-radio__inner { 862 | background-color: @accent; 863 | border-color: @accent; 864 | } 865 | .el-checkbox__inner:after { 866 | border-color: @crust; 867 | border-width: 2px; 868 | left: 3px; 869 | } 870 | .el-radio__input.is-checked + .el-radio__label { 871 | color: @accent; 872 | } 873 | /*--------HIDE SCROLLBAR IN BIO-----*/ 874 | .section::-webkit-scrollbar { 875 | display: none; 876 | } 877 | .section { 878 | -ms-overflow-style: none; 879 | scrollbar-width: none; 880 | } 881 | /*--------REMOVE DROPDOWN SHADOWS-----*/ 882 | .dropdown.dropdown { 883 | box-shadow: none; 884 | } 885 | /*---------ANILIST LIKER PLUGIN------*/ 886 | #AnilistLikerPlugin .mmd2 { 887 | font-style: normal !important; 888 | font-weight: 700; 889 | font-family: Overpass; 890 | } 891 | #AnilistLikerPlugin .btntop { 892 | margin-bottom: -4px; 893 | margin-top: 5px; 894 | } 895 | #AnilistLikerPlugin .btnbottom { 896 | margin-top: -2px; 897 | } 898 | 899 | /*--------ANICHART SPECIFIC TWEAKS----*/ 900 | .login[data-v-0d5bfbcd], 901 | .login[data-v-0d5bfbcd]:hover { 902 | color: @base; 903 | } 904 | 905 | .nav[data-v-e2f25004] { 906 | background: @crust; 907 | } 908 | .season[data-v-e2f25004], 909 | .charts .label[data-v-e2f25004], 910 | .charts .svg-icon[data-v-e2f25004], 911 | .section:first-of-type .section-heading[data-v-309146c2], 912 | a.title[data-v-09928904] { 913 | color: @text; 914 | } 915 | .season.router-link-active[data-v-e2f25004], 916 | .charts a:hover .svg-icon[data-v-e2f25004], 917 | .season[data-v-e2f25004]:hover, 918 | .charts .router-link-active .svg-icon[data-v-e2f25004] { 919 | color: @accent; 920 | } 921 | .settings[data-v-3deab077] .button.danger { 922 | color: @base; 923 | } 924 | /* AUTOMAIL TWEAK */ 925 | .site-theme-dark .el-popper .el-dropdown-menu__item:focus, 926 | .el-popper .el-dropdown-menu__item:not(.is-disabled):hover { 927 | color: @accent !important; 928 | } 929 | .hohMediaScore { 930 | font-size: 90%; 931 | font-family: Overpass; 932 | border: 2px solid @surface0; 933 | padding: 4px; 934 | border-radius: 10px; 935 | margin-left: 0px; 936 | background-color: @base; 937 | color: @accent; 938 | } 939 | .filter-group.compare-btn, 940 | .hohButton { 941 | color: @base; 942 | } 943 | .hohButton { 944 | background-color: @accent; 945 | } 946 | .medialist.table .entry:hover, 947 | .medialist.table .entry .title a:hover, 948 | .compare-btn[data-v-170179fc]:hover { 949 | color: @base; 950 | } 951 | .hohCompare table { 952 | background-color: @crust; 953 | } 954 | .hohAnimeTable, 955 | .hohAnimeTable td, 956 | .hohUserRow td, 957 | .hohUserRow th, 958 | .hohHeaderRow td, 959 | .hohHeaderRow th { 960 | border: 2px solid @surface0 !important; 961 | } 962 | .hohUserRow td { 963 | border-top: 4px solid @surface0 !important; 964 | } 965 | .hohUserRow tr { 966 | border-right: 4px solid @surface0 !important; 967 | } 968 | 969 | /*---------ANILIST LIKER PLUGIN------*/ 970 | #AnilistLikerPlugin .mmd2 { 971 | font-style: normal !important; 972 | font-weight: 700; 973 | font-family: Overpass; 974 | } 975 | #AnilistLikerPlugin .btntop { 976 | margin-bottom: -4px; 977 | margin-top: 5px; 978 | } 979 | #AnilistLikerPlugin .btnbottom { 980 | margin-top: -2px; 981 | } 982 | } 983 | } 984 | --------------------------------------------------------------------------------