diff --git a/.gitattributes b/.gitattributes index f271a57c1b..33462b2cfa 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1,4 +1,3 @@ *.webp filter=lfs diff=lfs merge=lfs -text *.png filter=lfs diff=lfs merge=lfs -text -*.css linguist-language=less src/** -linguist-detectable diff --git a/.github/PULL_REQUEST_TEMPLATE/userstyle-creation.md b/.github/PULL_REQUEST_TEMPLATE/userstyle-creation.md index e7a85f4fff..b7e1799808 100644 --- a/.github/PULL_REQUEST_TEMPLATE/userstyle-creation.md +++ b/.github/PULL_REQUEST_TEMPLATE/userstyle-creation.md @@ -22,10 +22,7 @@ Feel free to leave this section empty if you don't have anything more to say. - [ ] I have made a new directory underneath `/styles/` containing the contents of the [`/template`](https://github.com/catppuccin/userstyles/blob/main/template/) directory. - [ ] I have ensured that the new directory is in **lower-kebab-case**. - [ ] I have followed the template and kept the preprocessor as [LESS](https://lesscss.org/#overview). -- [ ] I have made sure to update the - [`userstyles.yml`](https://github.com/catppuccin/userstyles/blob/main/scripts/userstyles.yml) - file with information about the new userstyle. +- [ ] I have made sure to update the [`userstyles.yml`](https://github.com/catppuccin/userstyles/blob/main/scripts/userstyles.yml) file with information about the new userstyle. - [ ] I have included the following files: - - [ ] `catppuccin.user.css` - all the CSS for the userstyle, based on the - template. + - [ ] `catppuccin.user.less` - all the CSS for the userstyle, based on the template. - [ ] `preview.webp` - composite image of all four individual flavor screenshots (taken with the default accent color of mauve) stitched together, generated via [Catwalk](https://github.com/catppuccin/catwalk). diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index b96f616bb7..302c52cd7e 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -27,7 +27,7 @@ jobs: - name: Bump changed userstyles run: | - git diff --name-only HEAD^1 HEAD | grep '^styles/.*catppuccin\.user\.css$' | xargs deno task bump + git diff --name-only HEAD^1 HEAD | grep '^styles/.*catppuccin\.user\.less$' | xargs deno task bump - name: Commit changes uses: EndBug/add-and-commit@v9 @@ -49,12 +49,12 @@ jobs: push: false - name: Format files - run: deno task format + run: deno fmt - name: Commit changes uses: EndBug/add-and-commit@v9 with: - message: "style: format with prettier" + message: "style: deno fmt" default_author: github_actions push: false diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index da4e7973bb..0000000000 --- a/.prettierignore +++ /dev/null @@ -1,7 +0,0 @@ -# Deno code is formatted with `deno fmt` -/scripts/ - -# auto-generated files -/.github/ISSUE_TEMPLATE/userstyle.yml -/.github/*.yml -/styles/**/*.md diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index 304d4ef736..0000000000 --- a/.prettierrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "overrides": [ - { - "files": ["styles/**/*.css", "template/**/*.css"], - "options": { "parser": "less" } - } - ] -} diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 65a9ac33be..74baffcc47 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,3 +1,3 @@ { - "recommendations": ["denoland.vscode-deno", "esbenp.prettier-vscode"] + "recommendations": ["denoland.vscode-deno"] } diff --git a/.vscode/settings.json b/.vscode/settings.json index c3343cf708..ed954fdbf6 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,14 +1,7 @@ { - "files.associations": { - "*.user.css": "less" - }, - "deno.enable": true, - "[less]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" - }, - "[typescript][javascript]": { + "[typescript][javascript][less][markdown][json]": { "editor.defaultFormatter": "denoland.vscode-deno" }, diff --git a/deno.json b/deno.json index 02a054066b..d16ba6b3ca 100644 --- a/deno.json +++ b/deno.json @@ -31,12 +31,18 @@ "lint": "deno run -A ./scripts/lint/main.ts", "lint:fix": "deno task lint --fix", "update-types": "deno run -A ./scripts/types/update-types.ts", - "bump": "deno run -A ./scripts/bump-version/main.ts", - "format": "deno run -A npm:prettier@3.2.4 --write ." + "bump": "deno run -A ./scripts/bump-version/main.ts" }, "nodeModulesDir": "auto", "fmt": { - "include": ["scripts/**/*.ts", "scripts/**/*.js"] + "indentWidth": 2, + "proseWrap": "never", + "exclude": [ + ".github/ISSUE_TEMPLATE/userstyle.yml", + ".github/*.yml", + "styles/**/*.md", + "scripts/generate/templates/userstyle.md" + ] }, "lint": { "rules": { diff --git a/deno.lock b/deno.lock index ad53834cb9..1260cbfc0b 100644 --- a/deno.lock +++ b/deno.lock @@ -1,95 +1,56 @@ { "version": "4", "specifiers": { - "jsr:@std/assert@0.224": "0.224.0", "jsr:@std/assert@^1.0.9": "1.0.9", "jsr:@std/cli@^1.0.8": "1.0.8", "jsr:@std/fmt@^1.0.2": "1.0.3", "jsr:@std/fs@^1.0.6": "1.0.6", - "jsr:@std/internal@^1.0.3": "1.0.3", "jsr:@std/internal@^1.0.5": "1.0.5", - "jsr:@std/path@^1.0.2": "1.0.3", - "jsr:@std/path@^1.0.3": "1.0.4", "jsr:@std/path@^1.0.8": "1.0.8", "jsr:@std/yaml@^1.0.5": "1.0.5", "npm:@actions/core@1.11.1": "1.11.1", "npm:@catppuccin/palette@^1.7.1": "1.7.1", "npm:@octokit/rest@^21.0.2": "21.0.2_@octokit+core@6.1.2", - "npm:@types/less@*": "3.0.6", - "npm:@types/node@*": "18.16.19", + "npm:@types/less@*": "3.0.7", "npm:ajv@8.17.1": "8.17.1", "npm:handlebars@4.7.8": "4.7.8", "npm:json-schema-to-typescript@^15.0.3": "15.0.3", "npm:less@4.2.1": "4.2.1", - "npm:postcss-less@6.0.0": "6.0.0_postcss@8.4.39", + "npm:postcss-less@6.0.0": "6.0.0_postcss@8.4.49", "npm:postcss-value-parser@4.2.0": "4.2.0", - "npm:prettier@3.2.4": "3.2.4", - "npm:stylelint-config-recommended@14.0.1": "14.0.1_stylelint@16.9.0__@csstools+css-tokenizer@3.0.1__@csstools+css-parser-algorithms@3.0.1___@csstools+css-tokenizer@3.0.1__postcss-selector-parser@6.1.2__postcss@8.4.47", - "npm:stylelint-config-standard@36.0.1": "36.0.1_stylelint@16.9.0__@csstools+css-tokenizer@3.0.1__@csstools+css-parser-algorithms@3.0.1___@csstools+css-tokenizer@3.0.1__postcss-selector-parser@6.1.2__postcss@8.4.47", - "npm:stylelint@*": "16.9.0_@csstools+css-tokenizer@3.0.1_@csstools+css-parser-algorithms@3.0.1__@csstools+css-tokenizer@3.0.1_postcss-selector-parser@6.1.2_postcss@8.4.47", + "npm:stylelint-config-recommended@14.0.1": "14.0.1_stylelint@16.12.0__@csstools+css-tokenizer@3.0.3__@csstools+css-parser-algorithms@3.0.4___@csstools+css-tokenizer@3.0.3__postcss-selector-parser@7.0.0__postcss@8.4.49", + "npm:stylelint-config-standard@36.0.1": "36.0.1_stylelint@16.12.0__@csstools+css-tokenizer@3.0.3__@csstools+css-parser-algorithms@3.0.4___@csstools+css-tokenizer@3.0.3__postcss-selector-parser@7.0.0__postcss@8.4.49", + "npm:stylelint@*": "16.12.0_@csstools+css-tokenizer@3.0.3_@csstools+css-parser-algorithms@3.0.4__@csstools+css-tokenizer@3.0.3_postcss-selector-parser@7.0.0_postcss@8.4.49", "npm:stylelint@^16.12.0": "16.12.0_@csstools+css-tokenizer@3.0.3_@csstools+css-parser-algorithms@3.0.4__@csstools+css-tokenizer@3.0.3_postcss-selector-parser@7.0.0_postcss@8.4.49", "npm:svgo@3.3.2": "3.3.2", "npm:type-fest@^4.30.2": "4.30.2", "npm:usercss-meta@0.12.0": "0.12.0" }, "jsr": { - "@std/assert@0.224.0": { - "integrity": "8643233ec7aec38a940a8264a6e3eed9bfa44e7a71cc6b3c8874213ff401967f" - }, - "@std/assert@1.0.5": { - "integrity": "e37da8e4033490ce613eec4ac1d78dba1faf5b02a3f6c573a28f15365b9b440f", - "dependencies": [ - "jsr:@std/internal@^1.0.3" - ] - }, "@std/assert@1.0.9": { "integrity": "a9f0c611a869cc791b26f523eec54c7e187aab7932c2c8e8bea0622d13680dcd", "dependencies": [ - "jsr:@std/internal@^1.0.5" + "jsr:@std/internal" ] }, "@std/cli@1.0.8": { "integrity": "3762d8dc9a373715c08d871c38d45e637b25266f013a1d0bbe560bca409de94e" }, - "@std/fmt@1.0.2": { - "integrity": "87e9dfcdd3ca7c066e0c3c657c1f987c82888eb8103a3a3baa62684ffeb0f7a7" - }, "@std/fmt@1.0.3": { "integrity": "97765c16aa32245ff4e2204ecf7d8562496a3cb8592340a80e7e554e0bb9149f" }, - "@std/fs@1.0.1": { - "integrity": "d6914ca2c21abe591f733b31dbe6331e446815e513e2451b3b9e472daddfefcb", - "dependencies": [ - "jsr:@std/path@^1.0.2" - ] - }, "@std/fs@1.0.6": { "integrity": "42b56e1e41b75583a21d5a37f6a6a27de9f510bcd36c0c85791d685ca0b85fa2", "dependencies": [ - "jsr:@std/path@^1.0.8" + "jsr:@std/path" ] }, - "@std/internal@1.0.3": { - "integrity": "208e9b94a3d5649bd880e9ca38b885ab7651ab5b5303a56ed25de4755fb7b11e" - }, "@std/internal@1.0.5": { "integrity": "54a546004f769c1ac9e025abd15a76b6671ddc9687e2313b67376125650dc7ba" }, - "@std/path@1.0.2": { - "integrity": "a452174603f8c620bd278a380c596437a9eef50c891c64b85812f735245d9ec7" - }, - "@std/path@1.0.3": { - "integrity": "cd89d014ce7eb3742f2147b990f6753ee51d95276bfc211bc50c860c1bc7df6f" - }, - "@std/path@1.0.4": { - "integrity": "48dd5d8389bcfcd619338a01bdf862cb7799933390146a54ae59356a0acc7105" - }, "@std/path@1.0.8": { "integrity": "548fa456bb6a04d3c1a1e7477986b6cffbce95102d0bb447c67c4ee70e0364be" }, - "@std/yaml@1.0.4": { - "integrity": "f1e38fa5e110ff8550e938715e52c33347676dd00a1db858e092dd21a9df9941" - }, "@std/yaml@1.0.5": { "integrity": "71ba3d334305ee2149391931508b2c293a8490f94a337eef3a09cade1a2a2742" } @@ -126,70 +87,40 @@ "js-yaml" ] }, - "@babel/code-frame@7.25.7": { - "integrity": "sha512-0xZJFNE5XMpENsgfHYTw8FbX4kv53mFLn2i3XPoq69LyhYSCBJtitaHx9QnsVTrsogI4Z3+HtEfZ2/GFPOtf5g==", - "dependencies": [ - "@babel/highlight", - "picocolors@1.1.0" - ] - }, - "@babel/helper-validator-identifier@7.25.7": { - "integrity": "sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==" - }, - "@babel/highlight@7.25.7": { - "integrity": "sha512-iYyACpW3iW8Fw+ZybQK+drQre+ns/tKpXbNESfrhNnPLIklLbXr7MYJ6gPEd0iETGLOK+SxMjVvKb/ffmk+FEw==", + "@babel/code-frame@7.26.2": { + "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==", "dependencies": [ "@babel/helper-validator-identifier", - "chalk", "js-tokens", - "picocolors@1.1.0" + "picocolors" ] }, + "@babel/helper-validator-identifier@7.25.9": { + "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==" + }, "@catppuccin/palette@1.7.1": { "integrity": "sha512-aRc1tbzrevOTV7nFTT9SRdF26w/MIwT4Jwt4fDMc9itRZUDXCuEDBLyz4TQMlqO9ZP8mf5Hu4Jr6D03NLFc6Gw==" }, - "@csstools/css-parser-algorithms@3.0.1_@csstools+css-tokenizer@3.0.1": { - "integrity": "sha512-lSquqZCHxDfuTg/Sk2hiS0mcSFCEBuj49JfzPHJogDBT0mGCyY5A1AQzBWngitrp7i1/HAZpIgzF/VjhOEIJIg==", - "dependencies": [ - "@csstools/css-tokenizer@3.0.1" - ] - }, "@csstools/css-parser-algorithms@3.0.4_@csstools+css-tokenizer@3.0.3": { "integrity": "sha512-Up7rBoV77rv29d3uKHUIVubz1BTcgyUK72IvCQAbfbMv584xHcGKCKbWh7i8hPrRJ7qU4Y8IO3IY9m+iTB7P3A==", "dependencies": [ - "@csstools/css-tokenizer@3.0.3" + "@csstools/css-tokenizer" ] }, - "@csstools/css-tokenizer@3.0.1": { - "integrity": "sha512-UBqaiu7kU0lfvaP982/o3khfXccVlHPWp0/vwwiIgDF0GmqqqxoiXC/6FCjlS9u92f7CoEz6nXKQnrn1kIAkOw==" - }, "@csstools/css-tokenizer@3.0.3": { "integrity": "sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw==" }, - "@csstools/media-query-list-parser@3.0.1_@csstools+css-parser-algorithms@3.0.1__@csstools+css-tokenizer@3.0.1_@csstools+css-tokenizer@3.0.1": { - "integrity": "sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==", - "dependencies": [ - "@csstools/css-parser-algorithms@3.0.1_@csstools+css-tokenizer@3.0.1", - "@csstools/css-tokenizer@3.0.1" - ] - }, "@csstools/media-query-list-parser@4.0.2_@csstools+css-parser-algorithms@3.0.4__@csstools+css-tokenizer@3.0.3_@csstools+css-tokenizer@3.0.3": { "integrity": "sha512-EUos465uvVvMJehckATTlNqGj4UJWkTmdWuDMjqvSUkjGpmOyFZBVwb4knxCm/k2GMTXY+c/5RkdndzFYWeX5A==", "dependencies": [ - "@csstools/css-parser-algorithms@3.0.4_@csstools+css-tokenizer@3.0.3", - "@csstools/css-tokenizer@3.0.3" - ] - }, - "@csstools/selector-specificity@4.0.0_postcss-selector-parser@6.1.2": { - "integrity": "sha512-189nelqtPd8++phaHNwYovKZI0FOzH1vQEE3QhHHkNIGrg5fSs9CbYP3RvfEH5geztnIA9Jwq91wyOIwAW5JIQ==", - "dependencies": [ - "postcss-selector-parser@6.1.2" + "@csstools/css-parser-algorithms", + "@csstools/css-tokenizer" ] }, "@csstools/selector-specificity@5.0.0_postcss-selector-parser@7.0.0": { "integrity": "sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==", "dependencies": [ - "postcss-selector-parser@7.0.0" + "postcss-selector-parser" ] }, "@dual-bundle/import-meta-resolve@4.1.0": { @@ -307,15 +238,12 @@ "@types/json-schema@7.0.15": { "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==" }, - "@types/less@3.0.6": { - "integrity": "sha512-PecSzorDGdabF57OBeQO/xFbAkYWo88g4Xvnsx7LRwqLC17I7OoKtA3bQB9uXkY6UkMWCOsA8HSVpaoitscdXw==" + "@types/less@3.0.7": { + "integrity": "sha512-+SD1DrM8EwJsilPFSR1IMMGWOTg5sO1waewoJ1k3BHCvU07zQThy8t2wTfxvHz//R0uK3koAUl9WbWwal0H+YA==" }, "@types/lodash@4.17.13": { "integrity": "sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==" }, - "@types/node@18.16.19": { - "integrity": "sha512-IXl7o+R9iti9eBW4Wg2hx1xQDig183jj7YLn8F7udNceyfkbn1ZxmzZXuak20gR40D7pIkIY1kYGx5VIGbaHKA==" - }, "ajv@8.17.1": { "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "dependencies": [ @@ -328,19 +256,10 @@ "ansi-regex@5.0.1": { "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==" }, - "ansi-regex@6.0.1": { - "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==" - }, - "ansi-styles@3.2.1": { - "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dependencies": [ - "color-convert@1.9.3" - ] - }, "ansi-styles@4.3.0": { "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dependencies": [ - "color-convert@2.0.1" + "color-convert" ] }, "argparse@2.0.1": { @@ -370,29 +289,12 @@ "callsites@3.1.0": { "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==" }, - "chalk@2.4.2": { - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dependencies": [ - "ansi-styles@3.2.1", - "escape-string-regexp", - "supports-color@5.5.0" - ] - }, - "color-convert@1.9.3": { - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dependencies": [ - "color-name@1.1.3" - ] - }, "color-convert@2.0.1": { "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "dependencies": [ - "color-name@1.1.4" + "color-name" ] }, - "color-name@1.1.3": { - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" - }, "color-name@1.1.4": { "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, @@ -417,9 +319,6 @@ "parse-json" ] }, - "css-functions-list@3.2.2": { - "integrity": "sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==" - }, "css-functions-list@3.2.3": { "integrity": "sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==" }, @@ -437,21 +336,21 @@ "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", "dependencies": [ "mdn-data@2.0.28", - "source-map-js@1.2.0" + "source-map-js" ] }, "css-tree@2.3.1": { "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", "dependencies": [ "mdn-data@2.0.30", - "source-map-js@1.2.0" + "source-map-js" ] }, "css-tree@3.1.0": { "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==", "dependencies": [ "mdn-data@2.12.2", - "source-map-js@1.2.1" + "source-map-js" ] }, "css-what@6.1.0": { @@ -466,8 +365,8 @@ "css-tree@2.2.1" ] }, - "debug@4.3.7": { - "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "debug@4.4.0": { + "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==", "dependencies": [ "ms" ] @@ -524,9 +423,6 @@ "is-arrayish" ] }, - "escape-string-regexp@1.0.5": { - "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==" - }, "fast-deep-equal@3.1.3": { "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, @@ -540,8 +436,8 @@ "micromatch" ] }, - "fast-uri@3.0.1": { - "integrity": "sha512-MWipKbbYiYI0UC7cl8m/i/IWTqfC8YXsqjzybjddLsFjStroQzsHXkc73JutMvBiXmOvapk+axIl79ig5t55Bw==" + "fast-uri@3.0.3": { + "integrity": "sha512-aLrHthzCjH5He4Z2H9YZ+v6Ujb9ocRuW6ZzkJQOrTxleEijANq4v1TsaPaVG1PZcuurEzrLcWRyYBYXD5cEiaw==" }, "fastest-levenshtein@1.0.16": { "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==" @@ -577,8 +473,8 @@ "keyv" ] }, - "flatted@3.3.1": { - "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==" + "flatted@3.3.2": { + "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==" }, "glob-parent@5.1.2": { "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", @@ -627,9 +523,6 @@ "wordwrap" ] }, - "has-flag@3.0.0": { - "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==" - }, "has-flag@4.0.0": { "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" }, @@ -716,7 +609,7 @@ "js-yaml", "lodash", "minimist", - "prettier@3.4.2", + "prettier", "tinyglobby" ] }, @@ -732,9 +625,6 @@ "kind-of@6.0.3": { "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==" }, - "known-css-properties@0.34.0": { - "integrity": "sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==" - }, "known-css-properties@0.35.0": { "integrity": "sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==" }, @@ -803,8 +693,8 @@ "ms@2.1.3": { "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" }, - "nanoid@3.3.7": { - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==" + "nanoid@3.3.8": { + "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==" }, "needle@3.3.1": { "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==", @@ -846,12 +736,6 @@ "path-type@4.0.0": { "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==" }, - "picocolors@1.0.1": { - "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==" - }, - "picocolors@1.1.0": { - "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==" - }, "picocolors@1.1.1": { "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==" }, @@ -864,32 +748,19 @@ "pify@4.0.1": { "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==" }, - "postcss-less@6.0.0_postcss@8.4.39": { + "postcss-less@6.0.0_postcss@8.4.49": { "integrity": "sha512-FPX16mQLyEjLzEuuJtxA8X3ejDLNGGEG503d2YGZR5Ask1SpDN8KmZUMpzCvyalWRywAn1n1VOA5dcqfCLo5rg==", "dependencies": [ - "postcss@8.4.39" + "postcss" ] }, "postcss-resolve-nested-selector@0.1.6": { "integrity": "sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==" }, - "postcss-safe-parser@7.0.1_postcss@8.4.47": { - "integrity": "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==", - "dependencies": [ - "postcss@8.4.47" - ] - }, "postcss-safe-parser@7.0.1_postcss@8.4.49": { "integrity": "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==", "dependencies": [ - "postcss@8.4.49" - ] - }, - "postcss-selector-parser@6.1.2": { - "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", - "dependencies": [ - "cssesc", - "util-deprecate" + "postcss" ] }, "postcss-selector-parser@7.0.0": { @@ -902,33 +773,14 @@ "postcss-value-parser@4.2.0": { "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, - "postcss@8.4.39": { - "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==", - "dependencies": [ - "nanoid", - "picocolors@1.0.1", - "source-map-js@1.2.0" - ] - }, - "postcss@8.4.47": { - "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==", - "dependencies": [ - "nanoid", - "picocolors@1.1.0", - "source-map-js@1.2.1" - ] - }, "postcss@8.4.49": { "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", "dependencies": [ "nanoid", - "picocolors@1.1.1", - "source-map-js@1.2.1" + "picocolors", + "source-map-js" ] }, - "prettier@3.2.4": { - "integrity": "sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==" - }, "prettier@3.4.2": { "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==" }, @@ -974,14 +826,11 @@ "slice-ansi@4.0.0": { "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==", "dependencies": [ - "ansi-styles@4.3.0", + "ansi-styles", "astral-regex", "is-fullwidth-code-point" ] }, - "source-map-js@1.2.0": { - "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==" - }, "source-map-js@1.2.1": { "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==" }, @@ -993,46 +842,40 @@ "dependencies": [ "emoji-regex", "is-fullwidth-code-point", - "strip-ansi@6.0.1" + "strip-ansi" ] }, "strip-ansi@6.0.1": { "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", "dependencies": [ - "ansi-regex@5.0.1" - ] - }, - "strip-ansi@7.1.0": { - "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", - "dependencies": [ - "ansi-regex@6.0.1" + "ansi-regex" ] }, - "stylelint-config-recommended@14.0.1_stylelint@16.9.0__@csstools+css-tokenizer@3.0.1__@csstools+css-parser-algorithms@3.0.1___@csstools+css-tokenizer@3.0.1__postcss-selector-parser@6.1.2__postcss@8.4.47": { + "stylelint-config-recommended@14.0.1_stylelint@16.12.0__@csstools+css-tokenizer@3.0.3__@csstools+css-parser-algorithms@3.0.4___@csstools+css-tokenizer@3.0.3__postcss-selector-parser@7.0.0__postcss@8.4.49": { "integrity": "sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==", "dependencies": [ - "stylelint@16.9.0_@csstools+css-tokenizer@3.0.1_@csstools+css-parser-algorithms@3.0.1__@csstools+css-tokenizer@3.0.1_postcss-selector-parser@6.1.2_postcss@8.4.47" + "stylelint" ] }, - "stylelint-config-standard@36.0.1_stylelint@16.9.0__@csstools+css-tokenizer@3.0.1__@csstools+css-parser-algorithms@3.0.1___@csstools+css-tokenizer@3.0.1__postcss-selector-parser@6.1.2__postcss@8.4.47": { + "stylelint-config-standard@36.0.1_stylelint@16.12.0__@csstools+css-tokenizer@3.0.3__@csstools+css-parser-algorithms@3.0.4___@csstools+css-tokenizer@3.0.3__postcss-selector-parser@7.0.0__postcss@8.4.49": { "integrity": "sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==", "dependencies": [ - "stylelint@16.9.0_@csstools+css-tokenizer@3.0.1_@csstools+css-parser-algorithms@3.0.1__@csstools+css-tokenizer@3.0.1_postcss-selector-parser@6.1.2_postcss@8.4.47", + "stylelint", "stylelint-config-recommended" ] }, "stylelint@16.12.0_@csstools+css-tokenizer@3.0.3_@csstools+css-parser-algorithms@3.0.4__@csstools+css-tokenizer@3.0.3_postcss-selector-parser@7.0.0_postcss@8.4.49": { "integrity": "sha512-F8zZ3L/rBpuoBZRvI4JVT20ZanPLXfQLzMOZg1tzPflRVh9mKpOZ8qcSIhh1my3FjAjZWG4T2POwGnmn6a6hbg==", "dependencies": [ - "@csstools/css-parser-algorithms@3.0.4_@csstools+css-tokenizer@3.0.3", - "@csstools/css-tokenizer@3.0.3", - "@csstools/media-query-list-parser@4.0.2_@csstools+css-parser-algorithms@3.0.4__@csstools+css-tokenizer@3.0.3_@csstools+css-tokenizer@3.0.3", - "@csstools/selector-specificity@5.0.0_postcss-selector-parser@7.0.0", + "@csstools/css-parser-algorithms", + "@csstools/css-tokenizer", + "@csstools/media-query-list-parser", + "@csstools/selector-specificity", "@dual-bundle/import-meta-resolve", "balanced-match", "colord", "cosmiconfig", - "css-functions-list@3.2.3", + "css-functions-list", "css-tree@3.1.0", "debug", "fast-glob", @@ -1045,86 +888,36 @@ "ignore@6.0.2", "imurmurhash", "is-plain-object", - "known-css-properties@0.35.0", - "mathml-tag-names", - "meow", - "micromatch", - "normalize-path", - "picocolors@1.1.1", - "postcss@8.4.49", - "postcss-resolve-nested-selector", - "postcss-safe-parser@7.0.1_postcss@8.4.49", - "postcss-selector-parser@7.0.0", - "postcss-value-parser", - "resolve-from@5.0.0", - "string-width", - "supports-hyperlinks", - "svg-tags", - "table@6.9.0", - "write-file-atomic" - ] - }, - "stylelint@16.9.0_@csstools+css-tokenizer@3.0.1_@csstools+css-parser-algorithms@3.0.1__@csstools+css-tokenizer@3.0.1_postcss-selector-parser@6.1.2_postcss@8.4.47": { - "integrity": "sha512-31Nm3WjxGOBGpQqF43o3wO9L5AC36TPIe6030Lnm13H3vDMTcS21DrLh69bMX+DBilKqMMVLian4iG6ybBoNRQ==", - "dependencies": [ - "@csstools/css-parser-algorithms@3.0.1_@csstools+css-tokenizer@3.0.1", - "@csstools/css-tokenizer@3.0.1", - "@csstools/media-query-list-parser@3.0.1_@csstools+css-parser-algorithms@3.0.1__@csstools+css-tokenizer@3.0.1_@csstools+css-tokenizer@3.0.1", - "@csstools/selector-specificity@4.0.0_postcss-selector-parser@6.1.2", - "@dual-bundle/import-meta-resolve", - "balanced-match", - "colord", - "cosmiconfig", - "css-functions-list@3.2.2", - "css-tree@2.3.1", - "debug", - "fast-glob", - "fastest-levenshtein", - "file-entry-cache", - "global-modules", - "globby", - "globjoin", - "html-tags", - "ignore@5.3.2", - "imurmurhash", - "is-plain-object", - "known-css-properties@0.34.0", + "known-css-properties", "mathml-tag-names", "meow", "micromatch", "normalize-path", - "picocolors@1.0.1", - "postcss@8.4.47", + "picocolors", + "postcss", "postcss-resolve-nested-selector", - "postcss-safe-parser@7.0.1_postcss@8.4.47", - "postcss-selector-parser@6.1.2", + "postcss-safe-parser", + "postcss-selector-parser", "postcss-value-parser", "resolve-from@5.0.0", "string-width", - "strip-ansi@7.1.0", "supports-hyperlinks", "svg-tags", - "table@6.8.2", + "table", "write-file-atomic" ] }, - "supports-color@5.5.0": { - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dependencies": [ - "has-flag@3.0.0" - ] - }, "supports-color@7.2.0": { "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", "dependencies": [ - "has-flag@4.0.0" + "has-flag" ] }, "supports-hyperlinks@3.1.0": { "integrity": "sha512-2rn0BZ+/f7puLOHZm1HOJfwBggfaHXUpPUSSG/SWM4TWp5KCfmNYwnC3hruy2rZlMnmWZ+QAGpZfchu3f3695A==", "dependencies": [ - "has-flag@4.0.0", - "supports-color@7.2.0" + "has-flag", + "supports-color" ] }, "svg-tags@1.0.0": { @@ -1139,17 +932,7 @@ "css-tree@2.3.1", "css-what", "csso", - "picocolors@1.0.1" - ] - }, - "table@6.8.2": { - "integrity": "sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==", - "dependencies": [ - "ajv", - "lodash.truncate", - "slice-ansi", - "string-width", - "strip-ansi@6.0.1" + "picocolors" ] }, "table@6.9.0": { @@ -1159,7 +942,7 @@ "lodash.truncate", "slice-ansi", "string-width", - "strip-ansi@6.0.1" + "strip-ansi" ] }, "tinyglobby@0.2.10_picomatch@4.0.2": { @@ -1184,8 +967,8 @@ "type-fest@4.30.2": { "integrity": "sha512-UJShLPYi1aWqCdq9HycOL/gwsuqda1OISdBO3t8RlXQC4QvtuIz4b5FCfe2dQIWEpmlRExKmcTBfP1r9bhY7ig==" }, - "uglify-js@3.19.0": { - "integrity": "sha512-wNKHUY2hYYkf6oSFfhwwiHo4WCHzHmzcXsqXYTN9ja3iApYIFbb2U6ics9hBcYLHcYGQoAlwnZlTrf3oF+BL/Q==" + "uglify-js@3.19.3": { + "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==" }, "undici@5.28.4": { "integrity": "sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==", diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md index ec7f7de41e..8cc9bb903e 100644 --- a/docs/CONTRIBUTING.md +++ b/docs/CONTRIBUTING.md @@ -4,7 +4,7 @@ If it is your first time contributing to a project on GitHub, please see the pop ## Development environment -This repositories uses [Deno](https://deno.com/) extensively for linting and automation. We recommend setting up Deno locally to improve your workflow — see ["Installation" - Deno Docs](https://docs.deno.com/runtime/manual/getting_started/installation). With Deno installed locally, you can run the lint script using `deno task lint` (and `deno task lint:fix` to automatically apply fixes) and the formatting script using `deno task format`. +This repositories uses [Deno](https://deno.com/) extensively for linting, formatting, and automation. We recommend setting up Deno locally to improve your workflow — see ["Installation" - Deno Docs](https://docs.deno.com/runtime/manual/getting_started/installation). With Deno installed locally, you can run the lint script using `deno task lint` (and `deno task lint:fix` to automatically apply fixes) and the formatting script using `deno fmt`. When editing a userstyle, we suggest setting up live reloading so your local changes can be automatically reloaded through Stylus. See ["How can I see my changes in real time?"](./tips-and-tricks/see-changes-in-real-time.md). diff --git a/docs/guide/images-and-svgs.md b/docs/guide/images-and-svgs.md index 3293c90e5a..8770429980 100644 --- a/docs/guide/images-and-svgs.md +++ b/docs/guide/images-and-svgs.md @@ -64,7 +64,7 @@ img.twitter-icon { If you encounter non-SVG images, or many `` elements with external SVGs, the best approach is to apply a CSS color filter to the images. Start by adding the following specially generated filters palette block to the bottom of the userstyle, below the existing `@catppuccin` palette block. ```css -/* prettier-ignore */ +/* deno-fmt-ignore */ @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%); }; diff --git a/docs/tutorials/writing-a-userstyle.md b/docs/tutorials/writing-a-userstyle.md index 512191bef9..8960897323 100644 --- a/docs/tutorials/writing-a-userstyle.md +++ b/docs/tutorials/writing-a-userstyle.md @@ -11,11 +11,10 @@ Beginner-friendly walkthrough of creating a userstyle! ## Prerequisites -- [Stylus](https://github.com/openstyles/stylus) ([Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/) / [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) - extension). +- [Stylus](https://github.com/openstyles/stylus) ([Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/) / [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) extension). - A website to theme! -Assuming you have completed steps 1-4 of [Creating Userstyles](./userstyle-creation.md#creating-userstyles), you should have a new `catppuccin.user.css` file under the `styles//` directory. Follow along in that `catppuccin.user.css` file as we write an example userstyle for [example.org](http://example.org/). +Assuming you have completed steps 1-4 of [Creating Userstyles](./userstyle-creation.md#creating-userstyles), you should have a new `catppuccin.user.less` file under the `styles//` directory. Follow along in that `catppuccin.user.less` file as we write an example userstyle for [example.org](http://example.org/). ## Usercss Metadata @@ -27,7 +26,7 @@ Start by filling out the "metadata block" at the very top of the template. Repla @namespace github.com/catppuccin/userstyles/styles/example.org @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/example.org @version 2000.01.01 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/example.org/catppuccin.user.css +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/example.org/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aexample.org @description Soothing pastel theme for example.org @author Catppuccin @@ -61,7 +60,6 @@ To tell Stylus which website(s) to apply this userstyle on, replace ` ```less @media (prefers-color-scheme: light) { :root { @@ -85,7 +83,6 @@ This section of the template is about applying the user's light/dark flavors. Re We'll refer to this next section of the template as the "`#catppuccin` mixin". You can ignore the first half of this section with all of the `@: @catppuccin[@@lookup][@];` lines and skip to the comment where it says `// Start styling your website here:`. As the comment suggests, you will write the CSS rules for your port here. Here is what it looks like for our `example.org` port: - ```less #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @@ -133,7 +130,7 @@ Combining all of the previous steps, we have a working userstyle! @namespace github.com/catppuccin/userstyles/styles/example.org @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/example.org @version 2000.01.01 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/example.org/catppuccin.user.css +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/example.org/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aexample.org @description Soothing pastel theme for example.org @author Catppuccin @@ -145,7 +142,7 @@ Combining all of the previous steps, we have a working userstyle! @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('example.org') { +@-moz-document domain("example.org") { @media (prefers-color-scheme: light) { :root { #catppuccin(@lightFlavor, @accentColor); @@ -215,15 +212,13 @@ Combining all of the previous steps, we have a working userstyle! } } -/* prettier-ignore */ +/* deno-fmt-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 +}; ``` | Original | Themed | diff --git a/docs/userstyle-creation.md b/docs/userstyle-creation.md index a184e16971..0f914f182e 100644 --- a/docs/userstyle-creation.md +++ b/docs/userstyle-creation.md @@ -6,23 +6,13 @@ To create a userstyle, follow the instructions below. If you are unsure how to theme something, see [Guide](./guide/README.md). If you run into any difficulties or have any questions, feel free to join the [Catppuccin Discord server](https://discord.com/servers/catppuccin-907385605422448742) and find us in the #userstyles channel! 1. Fork the `catppuccin/userstyles` repository. -2. Create a new branch under the name `feat/`, (e.g. - `feat/nixos-search` instead of NixOS Search). -3. Create a new folder `styles/`. The name must be - `lower-kebab-case`. -4. Copy the contents of the [`template`](../template/) folder into - `styles/`. - - **The template uses [LESS](https://lesscss.org/#overview), a - preprocessor for Stylus. Please do not change this as we will only accept - userstyles based on the template.** +2. Create a new branch under the name `feat/`, (e.g. `feat/nixos-search` instead of NixOS Search). +3. Create a new folder `styles/`. The name must be `lower-kebab-case`. +4. Copy the contents of the [`template`](../template/) folder into `styles/`. + - **The template uses [LESS](https://lesscss.org/#overview), a preprocessor for Stylus. Please do not change this as we will only accept userstyles based on the template.** 5. [Write the userstyle](./tutorials/writing-a-userstyle.md). -6. [Edit the `userstyles.yml` file](./userstylesyml.md) and enter the details - of your port. +6. [Edit the `userstyles.yml` file](./userstylesyml.md) and enter the details of your port. 7. Create your image preview. - - Take a screenshot of the themed website in each flavor, **with the accent set to `mauve` (the default)**, and then convert all four images [to WebP](../tips/convert-images-to-webp.md) (e.g. `mocha.webp`, - `macchiato.webp`, `frappe.webp` & `latte.webp`). - - Use [Catwalk](https://github.com/catppuccin/catwalk) to generate a - composite or grid image of all the images. **This must be saved as - `styles//preview.webp`.** -8. Raise a [pull request](https://github.com/catppuccin/userstyles/compare), - making sure to read and fill out the template properly. The title of your pull request should follow the format of `feat(): init`. + - Take a screenshot of the themed website in each flavor, **with the accent set to `mauve` (the default)**, and then convert all four images [to WebP](../tips/convert-images-to-webp.md) (e.g. `mocha.webp`, `macchiato.webp`, `frappe.webp` & `latte.webp`). + - Use [Catwalk](https://github.com/catppuccin/catwalk) to generate a composite or grid image of all the images. **This must be saved as `styles//preview.webp`.** +8. Raise a [pull request](https://github.com/catppuccin/userstyles/compare), making sure to read and fill out the template properly. The title of your pull request should follow the format of `feat(): init`. diff --git a/docs/userstylesyml.md b/docs/userstylesyml.md index 2c29a3f755..863dbb21cf 100644 --- a/docs/userstylesyml.md +++ b/docs/userstylesyml.md @@ -30,7 +30,7 @@ The [`userstyles.yml`](https://github.com/catppuccin/userstyles/tree/main/script current-maintainers: [*] ``` - **All Fields:** + **Optional Fields:** The `readme.usage` and `readme.faq` fields allow for additional information about the port to be included on the README. @@ -38,26 +38,6 @@ The [`userstyles.yml`](https://github.com/catppuccin/userstyles/tree/main/script The `past-maintainers` field contains a list of maintainers who have maintained the port in the past. We encourage all maintainers to add/remove themselves from this list as they see fit. - Remember that these 4 fields are **optional**. - - ```yaml - : - name: - categories: [, , ] - color: - icon: # OPTIONAL - readme: - app-link: "" - usage: |+ # OPTIONAL - > [!NOTE] - > - faq: # OPTIONAL - - question: - answer: - current-maintainers: [*] - past-maintainers: [*] # OPTIONAL - ``` - ## Adding yourself as a maintainer 1. Add a new entry to the end of the `collaborators` array in the `userstyles.yml` file. The entry should be made under your GitHub username, and may optionally contain the `name` (your preferred name) and `url` fields. The following example shows a new entry for a user "Pepperjack". diff --git a/scripts/generate/templates/userstyle.md b/scripts/generate/templates/userstyle.md index 7baca4d8fc..55141bc069 100644 --- a/scripts/generate/templates/userstyle.md +++ b/scripts/generate/templates/userstyle.md @@ -10,7 +10,7 @@

- +

diff --git a/scripts/lint/file-checker.ts b/scripts/lint/file-checker.ts index d4223a7f04..922fbe5726 100644 --- a/scripts/lint/file-checker.ts +++ b/scripts/lint/file-checker.ts @@ -7,7 +7,7 @@ import core from "@actions/core"; import { log } from "@/logger.ts"; const requiredFiles = [ - "catppuccin.user.css", + "catppuccin.user.less", "preview.webp", ]; diff --git a/scripts/lint/main.ts b/scripts/lint/main.ts index 3a05c0a616..d9be281cee 100755 --- a/scripts/lint/main.ts +++ b/scripts/lint/main.ts @@ -14,10 +14,10 @@ import stylelintConfig from "../../.stylelintrc.js"; const args = parseArgs(Deno.args, { boolean: ["fix"] }); const userstyle = args._[0]?.toString().match( - /(?styles\/)?(?[a-z0-9_\.]+)(?\/)?(?catppuccin\.user\.css)?/, + /(?styles\/)?(?[a-z0-9_\.]+)(?\/)?(?catppuccin\.user\.less)?/, )?.groups?.userstyle; const stylesheets = userstyle - ? [path.join(REPO_ROOT, "styles", userstyle, "catppuccin.user.css")] + ? [path.join(REPO_ROOT, "styles", userstyle, "catppuccin.user.less")] : getUserstylesFiles(); const { userstyles } = getUserstylesData(); diff --git a/scripts/lint/metadata.ts b/scripts/lint/metadata.ts index cfbe909869..6a946912ac 100644 --- a/scripts/lint/metadata.ts +++ b/scripts/lint/metadata.ts @@ -75,11 +75,20 @@ export async function verifyMetadata( startLine: line !== 0 ? line : undefined, content, }); + + if (fix) { + content = content.replace( + `${atKey} ${current}`, + `${atKey} ${expected}`, + ); + } } } + Deno.writeTextFileSync(file, content); + const template = (await Deno.readTextFile( - path.join(REPO_ROOT, "template/catppuccin.user.css"), + path.join(REPO_ROOT, "template/catppuccin.user.less"), )) .split("\n"); @@ -169,7 +178,7 @@ function generateAssertions(userstyle: string, userstyles: Userstyles) { : userstyles[userstyle].name }`, author: "Catppuccin", - updateURL: `${prefix}/raw/main/styles/${userstyle}/catppuccin.user.css`, + updateURL: `${prefix}/raw/main/styles/${userstyle}/catppuccin.user.less`, supportURL: `${prefix}/issues?q=is%3Aopen+is%3Aissue+label%3A${userstyle}`, license: "MIT", preprocessor: "less", diff --git a/scripts/stub/main.ts b/scripts/stub/main.ts new file mode 100644 index 0000000000..1de0d20e4d --- /dev/null +++ b/scripts/stub/main.ts @@ -0,0 +1,65 @@ +import { getUserstylesFiles } from "@/utils.ts"; +import { relative } from "@std/path"; +import { REPO_ROOT } from "@/constants.ts"; + +const METADATA_ENDING_COMMENT = "==/UserStyle== */"; + +for (const userstyle of getUserstylesFiles()) { + const content = Deno.readTextFileSync(userstyle); + + const start = content.indexOf(METADATA_ENDING_COMMENT); + if (start === -1) { + throw new Error("Userstyle metadata ending comment not found"); + } + const metadata = content.slice(0, start + METADATA_ENDING_COMMENT.length); + + const oldPath = userstyle.replace(/\.less$/, ".css"); + const relativeOldPath = relative(REPO_ROOT, oldPath); + const relativeNewPath = relative(REPO_ROOT, userstyle); + const updateURLPrefix = + "@updateURL https://github.com/catppuccin/userstyles/raw/main/"; + + let newContent = metadata.replace( + updateURLPrefix + relativeOldPath, + updateURLPrefix + relativeNewPath, + ); + const newContentLines = newContent.split("\n"); + const nameVarLine = newContentLines.findIndex((line) => + line.startsWith("@name") + ); + if (nameVarLine === -1) { + throw new Error("Userstyle name variable not found"); + } + newContentLines[nameVarLine] += " [STUB | UPDATE REQUIRED]"; + newContent = newContentLines.join("\n"); + + Deno.writeTextFileSync( + userstyle.replace(/\.less$/, ".css"), + newContent, + ); + + // Bump once for update to stub. + execBumpTask(relativeOldPath); + + // Bump twice so that version is higher than stub. + execBumpTask(relativeNewPath); + execBumpTask(relativeNewPath); +} + +async function execBumpTask(file: string) { + const bumpTask = new Deno.Command( + Deno.execPath(), + { + args: [ + "task", + "bump", + file, + ], + }, + ); + + const output = await bumpTask.output(); + if (output.success === false) { + throw new Error(new TextDecoder().decode(output.stderr)); + } +} diff --git a/scripts/userstyles.schema.json b/scripts/userstyles.schema.json index b450b68714..726c70f888 100644 --- a/scripts/userstyles.schema.json +++ b/scripts/userstyles.schema.json @@ -15,7 +15,13 @@ "type": "object", "description": "The directory of the userstyle.", "examples": ["youtube"], - "required": ["name", "categories", "readme", "color", "current-maintainers"], + "required": [ + "name", + "categories", + "readme", + "color", + "current-maintainers" + ], "additionalProperties": false, "properties": { "name": { diff --git a/scripts/userstyles.yml b/scripts/userstyles.yml index d490fe04e0..bf0f75bbe5 100644 --- a/scripts/userstyles.yml +++ b/scripts/userstyles.yml @@ -172,14 +172,14 @@ userstyles: categories: [productivity, discussion_forum] color: sapphire readme: - app-link: "https://alternativeto.net" + app-link: https://alternativeto.net current-maintainers: [*thismoon] amplenote: name: Amplenote categories: [productivity] color: blue readme: - app-link: "https://www.amplenote.com" + app-link: https://www.amplenote.com current-maintainers: [*stellophiliac] anilist: name: ["AniList", "AniChart"] @@ -187,7 +187,7 @@ userstyles: icon: anilist color: sky readme: - app-link: ["https://anilist.co", "https://anichart.net"] + app-link: [https://anilist.co, https://anichart.net] usage: |+ > [!NOTE] > This theme applies to [AniChart](https://anichart.net/) as well, which is an extension of AniList. @@ -198,7 +198,7 @@ userstyles: icon: archlinux color: blue readme: - app-link: "https://wiki.archlinux.org/" + app-link: https://wiki.archlinux.org usage: "Make sure to use the default **Light** theme" current-maintainers: [] past-maintainers: [*genshibe] @@ -207,7 +207,7 @@ userstyles: categories: [development] color: text readme: - app-link: "https://boringproxy.io" + app-link: https://boringproxy.io current-maintainers: [*gandalf-the-blue] brave-search: name: Brave Search @@ -215,7 +215,7 @@ userstyles: icon: brave color: peach readme: - app-link: "https://search.brave.com" + app-link: https://search.brave.com usage: "Make sure to set the theme to either dark or light in Brave Search settings, as the automatic setting will not work." current-maintainers: [*ndsboy] bsky: @@ -224,14 +224,14 @@ userstyles: icon: bluesky color: blue readme: - app-link: "https://bsky.app" + app-link: https://bsky.app current-maintainers: [*rooot] bstats: name: bStats categories: [game, entertainment] color: green readme: - app-link: "https://bstats.org" + app-link: https://bstats.org usage: "Make sure to use the default **Teal** theme from the built-in color picker (located at the bottom of the page) for the best experience!" current-maintainers: [*rockquiet] canvas-lms: @@ -240,7 +240,7 @@ userstyles: icon: canvas color: red readme: - app-link: "https://www.instructure.com/canvas" + app-link: https://www.instructure.com/canvas current-maintainers: [] past-maintainers: [*thememesniper] chatgpt: @@ -249,7 +249,7 @@ userstyles: icon: openai color: green readme: - app-link: "https://chat.openai.com" + app-link: https://chat.openai.com current-maintainers: [*uncenter] past-maintainers: [*rubyowo] chatreplay: @@ -257,7 +257,7 @@ userstyles: categories: [entertainment, social_networking] color: peach readme: - app-link: "https://chatreplay.stream" + app-link: https://chatreplay.stream current-maintainers: [*anubisnekhet] chess.com: name: Chess.com @@ -265,7 +265,7 @@ userstyles: icon: chessdotcom color: green readme: - app-link: "https://chess.com" + app-link: https://chess.com current-maintainers: [] past-maintainers: [*skelebro1, *isabelroses, *coldenate] cinny: @@ -273,7 +273,7 @@ userstyles: categories: [social_networking] color: text readme: - app-link: "https://cinny.in" + app-link: https://cinny.in current-maintainers: [*jn-sena] codeberg: name: Codeberg @@ -281,7 +281,7 @@ userstyles: icon: codeberg color: blue readme: - app-link: "https://codeberg.org" + app-link: https://codeberg.org current-maintainers: [*isabelroses] past-maintainers: [*justtobbi] cobalt: @@ -289,7 +289,7 @@ userstyles: categories: [productivity, photo_and_video] color: text readme: - app-link: "https://cobalt.tools" + app-link: https://cobalt.tools current-maintainers: [*kerichdev] crates.io: name: crates.io @@ -297,7 +297,7 @@ userstyles: icon: rust color: yellow readme: - app-link: "https://crates.io" + app-link: https://crates.io current-maintainers: [*uncenter] crowdin: name: Crowdin @@ -305,7 +305,7 @@ userstyles: icon: crowdin color: text readme: - app-link: "https://crowdin.com" + app-link: https://crowdin.com current-maintainers: [*ryanccn] deepl: name: DeepL @@ -313,7 +313,7 @@ userstyles: icon: deepl color: blue readme: - app-link: "https://deepl.com" + app-link: https://deepl.com current-maintainers: [*watatomo] docs.rs: name: docs.rs @@ -321,7 +321,7 @@ userstyles: icon: docsdotrs color: yellow readme: - app-link: "https://docs.rs" + app-link: https://docs.rs current-maintainers: [*uncenter] duckduckgo: name: DuckDuckGo @@ -329,21 +329,21 @@ userstyles: icon: duckduckgo color: peach readme: - app-link: "https://duckduckgo.com" + app-link: https://duckduckgo.com current-maintainers: [*genshibe] ecosia: name: Ecosia categories: [search_engine] color: green readme: - app-link: "https://www.ecosia.org" + app-link: https://www.ecosia.org current-maintainers: [*isabelroses] elk: name: Elk categories: [social_networking] color: peach readme: - app-link: "https://elk.zone" + app-link: https://elk.zone current-maintainers: [*ryanccn] freedesktop: name: freedesktop.org @@ -351,21 +351,21 @@ userstyles: icon: freedesktopdotorg color: blue readme: - app-link: "https://www.freedesktop.org" + app-link: https://www.freedesktop.org current-maintainers: [*NK308] formative: name: Formative categories: [education, productivity] color: blue readme: - app-link: "https://app.formative.com/home" + app-link: https://app.formative.com/home current-maintainers: [*r58Playz] ghostty.org: name: Ghostty.org categories: [terminal, wiki] color: blue readme: - app-link: "https://ghostty.org" + app-link: https://ghostty.org current-maintainers: [*uncenter] github: name: GitHub @@ -374,7 +374,7 @@ userstyles: color: text readme: usage: "Switch to a default GitHub light/dark theme via **Settings** > **Appearance** for the best experience!" - app-link: "https://github.com" + app-link: https://github.com current-maintainers: [*uncenter] past-maintainers: [*unseen-ninja, *pocco81, *glowingumbreon] gmail: @@ -384,7 +384,7 @@ userstyles: color: peach readme: usage: "Switch to the default dark theme via the **Settings** > **Themes** > **View all** for the best experience!" - app-link: "https://mail.google.com" + app-link: https://mail.google.com current-maintainers: [*uncenter] past-maintainers: [*isabelroses] go.dev: @@ -393,7 +393,7 @@ userstyles: icon: go color: sapphire readme: - app-link: "https://go.dev" + app-link: https://go.dev current-maintainers: [*Flapperoo] google: name: Google @@ -401,7 +401,7 @@ userstyles: icon: google color: sapphire readme: - app-link: "https://google.com" + app-link: https://google.com current-maintainers: [] google-drive: name: Google Drive @@ -409,7 +409,7 @@ userstyles: icon: googledrive color: blue readme: - app-link: "https://drive.google.com" + app-link: https://drive.google.com current-maintainers: [*r58Playz] google-photos: name: Google Photos @@ -417,14 +417,14 @@ userstyles: icon: googlephotos color: sapphire readme: - app-link: "https://photos.google.com" + app-link: https://photos.google.com current-maintainers: [*genshibe] grabify: name: Grabify categories: [development, productivity] color: teal readme: - app-link: "https://grabify.link" + app-link: https://grabify.link current-maintainers: [*trinkey] graphite: name: Graphite @@ -432,7 +432,7 @@ userstyles: icon: graphite color: text readme: - app-link: "https://app.graphite.dev" + app-link: https://app.graphite.dev current-maintainers: [*isabelroses] google-gemini: name: Google Gemini @@ -440,7 +440,7 @@ userstyles: icon: googlegemini color: mauve readme: - app-link: "https://gemini.google.com" + app-link: https://gemini.google.com current-maintainers: [*Dandraghas] hackage: name: Hackage @@ -448,7 +448,7 @@ userstyles: icon: haskell color: mauve readme: - app-link: "https://hackage.haskell.org" + app-link: https://hackage.haskell.org current-maintainers: [*jn-sena] hacker-news: name: Hacker News @@ -456,21 +456,21 @@ userstyles: icon: ycombinator color: peach readme: - app-link: "https://news.ycombinator.com" + app-link: https://news.ycombinator.com current-maintainers: [*lucasmelin] have-i-been-pwned: name: Have I Been Pwned categories: [productivity] color: blue readme: - app-link: "https://haveibeenpwned.com" + app-link: https://haveibeenpwned.com current-maintainers: [*trinkey] holodex: name: Holodex categories: [entertainment, social_networking, photo_and_video] color: pink readme: - app-link: "https://holodex.net" + app-link: https://holodex.net usage: |+ > [!NOTE] > Holodex's selected theme is ignored. @@ -480,14 +480,14 @@ userstyles: categories: [development] color: blue readme: - app-link: "https://home-manager-options.extranix.com" + app-link: https://home-manager-options.extranix.com current-maintainers: [*uncenter] homepage: name: homepage categories: [productivity] color: sky readme: - app-link: "https://github.com/benphelps/homepage" + app-link: https://github.com/benphelps/homepage current-maintainers: [*gandalf-the-blue] hoogle: name: Hoogle @@ -495,7 +495,7 @@ userstyles: icon: haskell color: mauve readme: - app-link: "https://hoogle.haskell.org" + app-link: https://hoogle.haskell.org current-maintainers: [*jn-sena] hoppscotch: name: Hoppscotch @@ -503,28 +503,28 @@ userstyles: icon: hoppscotch color: green readme: - app-link: "https://hoppscotch.io/" + app-link: https://hoppscotch.io current-maintainers: [*justtobbi] learn-x-in-y-minutes: name: Learn X in Y Minutes categories: [development, wiki] color: blue readme: - app-link: "https://learnxinyminutes.com/" + app-link: https://learnxinyminutes.com current-maintainers: [*nikitarevenco] hyperpipe: name: Hyperpipe categories: [music] color: teal readme: - app-link: "https://hyperpipe.surge.sh/" + app-link: https://hyperpipe.surge.sh current-maintainers: [*jn-sena] ichi.moe: name: ichi.moe categories: [translation_tool, productivity] color: pink readme: - app-link: "https://ichi.moe" + app-link: https://ichi.moe current-maintainers: [*watatomo] inoreader: name: inoreader @@ -532,14 +532,14 @@ userstyles: icon: inoreader color: blue readme: - app-link: "https://inoreader.com" + 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/" + app-link: https://getindie.wiki current-maintainers: [*thismoon] instagram: name: Instagram @@ -547,7 +547,7 @@ userstyles: icon: instagram color: pink readme: - app-link: "https://instagram.com" + app-link: https://instagram.com current-maintainers: [*genshibe] past-maintainers: [*isabelroses] invidious: @@ -556,7 +556,7 @@ userstyles: icon: youtube color: red readme: - app-link: "https://invidious.io" + app-link: https://invidious.io current-maintainers: [] past-maintainers: [*unseen-ninja, *winston] invokeai: @@ -564,28 +564,28 @@ userstyles: categories: [artificial_intelligence, productivity] color: yellow readme: - app-link: "https://invoke-ai.github.io/InvokeAI" + app-link: https://invoke-ai.github.io/InvokeAI current-maintainers: [*ryanccn] jisho: name: Jisho categories: [translation_tool] color: green readme: - app-link: "https://jisho.org" + app-link: https://jisho.org current-maintainers: [*Lichthagel] keybr.com: name: keybr.com categories: [productivity] color: text readme: - app-link: "https://keybr.com" + app-link: https://keybr.com current-maintainers: [*TadoTheMiner] keyoxide: name: Keyoxide categories: [development] color: mauve readme: - app-link: "https://keyoxide.org" + app-link: https://keyoxide.org current-maintainers: [*uncenter] lastfm: name: Last.fm @@ -593,7 +593,7 @@ userstyles: icon: lastdotfm color: red readme: - app-link: "https://last.fm" + app-link: https://last.fm current-maintainers: [*anubisnekhet] past-maintainers: [*gingeh] lemmy: @@ -602,7 +602,7 @@ userstyles: icon: lemmy color: green readme: - app-link: "https://lemmy.world" + app-link: https://lemmy.world current-maintainers: [*gandalf-the-blue] libreddit: name: ["Libreddit", "Redlib"] @@ -610,7 +610,10 @@ userstyles: icon: reddit color: peach readme: - app-link: ["https://github.com/libreddit/libreddit", "https://github.com/redlib-org/redlib"] + app-link: [ + https://github.com/libreddit/libreddit, + https://github.com/redlib-org/redlib, + ] current-maintainers: [] past-maintainers: [*unseen-ninja] lichess: @@ -620,14 +623,14 @@ userstyles: color: text readme: usage: "Switch to a default Lichess light/dark theme via **Username** > **Background** for the best experience!" - app-link: "https://lichess.org/" + app-link: https://lichess.org current-maintainers: [*coopw1] lingva: name: Lingva categories: [translation_tool, productivity] color: green readme: - app-link: "https://github.com/thedaviddelta/lingva-translate" + app-link: https://github.com/thedaviddelta/lingva-translate current-maintainers: [*rubyowo] linkedin: name: LinkedIn @@ -635,7 +638,7 @@ userstyles: icon: linkedin color: blue readme: - app-link: "https://www.linkedin.com" + app-link: https://www.linkedin.com current-maintainers: [*isabelroses] listenbrainz: name: ListenBrainz @@ -643,7 +646,7 @@ userstyles: icon: musicbrainz color: peach readme: - app-link: 'https://listenbrainz.org' + app-link: https://listenbrainz.org current-maintainers: [*00dani] lobste.rs: name: Lobsters @@ -651,7 +654,7 @@ userstyles: icon: lobsters color: red readme: - app-link: 'https://lobste.rs' + app-link: https://lobste.rs current-maintainers: [*steinuil] mastodon: name: Mastodon @@ -659,7 +662,7 @@ userstyles: icon: mastodon color: lavender readme: - app-link: "https://github.com/mastodon/mastodon" + app-link: https://github.com/mastodon/mastodon faq: - question: "**The theme does not look the same as the preview?**" answer: "Your Mastodon instance may be using its own custom CSS, which is changing the look of the theme." @@ -671,7 +674,7 @@ userstyles: icon: mdbook color: text readme: - app-link: "https://rust-lang.github.io/mdBook/" + app-link: https://rust-lang.github.io/mdBook/ current-maintainers: [*uncenter] mdn: name: MDN @@ -679,7 +682,7 @@ userstyles: icon: mdnwebdocs color: text readme: - app-link: "https://developer.mozilla.org" + app-link: https://developer.mozilla.org current-maintainers: [*soya-daizu] modrinth: name: Modrinth @@ -687,7 +690,7 @@ userstyles: icon: modrinth color: green readme: - app-link: "https://modrinth.com" + app-link: https://modrinth.com current-maintainers: [*thismoon] microsoft-word: name: Microsoft Word @@ -695,7 +698,7 @@ userstyles: icon: microsoftword color: blue readme: - app-link: "https://office.com" + app-link: https://office.com current-maintainers: [] migadu-webmail: name: Migadu Webmail @@ -703,7 +706,7 @@ userstyles: icon: migadu color: blue readme: - app-link: https://webmail.migadu.com/ + app-link: https://webmail.migadu.com usage: |+ > [!NOTE] > Set Migadu Webmail's built-in theme to 'Migadu' for the optimal experience. @@ -713,7 +716,7 @@ userstyles: categories: [game] color: text readme: - app-link: "https://minesweeper.online" + app-link: https://minesweeper.online current-maintainers: [] namemc: name: NameMC @@ -721,7 +724,7 @@ userstyles: icon: namemc color: blue readme: - app-link: "https://namemc.com/" + app-link: https://namemc.com current-maintainers: [*nyatalieeee] nitter: name: Nitter @@ -729,7 +732,7 @@ userstyles: icon: twitter color: blue readme: - app-link: "https://nitter.net" + app-link: https://nitter.net current-maintainers: [*anubisnekhet] nixos-manual: name: ["NixOS Manual", "Nixpkgs Manual"] @@ -747,7 +750,7 @@ userstyles: icon: nixos color: blue readme: - app-link: "https://search.nixos.org" + app-link: https://search.nixos.org current-maintainers: [*cecelot] wiki.nixos.org: name: NixOS Wiki @@ -755,7 +758,7 @@ userstyles: icon: nixos color: blue readme: - app-link: "wiki.nixos.org" + app-link: https://wiki.nixos.org current-maintainers: [*orangci] past-maintainers: [*winston] npm: @@ -764,14 +767,14 @@ userstyles: icon: npm color: red readme: - app-link: "https://www.npmjs.com/" + app-link: https://www.npmjs.com current-maintainers: [*uncenter] ollama: name: Ollama categories: [development] color: text readme: - app-link: "https://ollama.com" + app-link: https://ollama.com current-maintainers: [*neongamerbot] openmediavault: name: openmediavault @@ -779,7 +782,7 @@ userstyles: icon: openmediavault color: sky readme: - app-link: "https://www.openmediavault.org/" + app-link: https://www.openmediavault.org current-maintainers: [*gandalf-the-blue] paste.rs: name: paste.rs @@ -787,7 +790,7 @@ userstyles: icon: pastebin color: peach readme: - app-link: "https://paste.rs" + app-link: https://paste.rs current-maintainers: [*Guaxinim5573] past-maintainers: [*stonks3141] perplexity: @@ -796,7 +799,7 @@ userstyles: icon: perplexity color: teal readme: - app-link: "https://www.perplexity.ai" + app-link: https://www.perplexity.ai current-maintainers: [*tnixc] past-maintainers: [*isabelroses] phanpy: @@ -804,7 +807,7 @@ userstyles: categories: [social_networking, entertainment] color: blue readme: - app-link: "https://phanpy.social" + app-link: https://phanpy.social current-maintainers: [*Guaxinim5573] picrew: name: Picrew @@ -812,7 +815,7 @@ userstyles: icon: picrew color: yellow readme: - app-link: "https://picrew.me" + app-link: https://picrew.me current-maintainers: [*nyatalieeee] pinterest: name: Pinterest @@ -820,7 +823,7 @@ userstyles: icon: pinterest color: red readme: - app-link: "https://www.pinterest.com" + app-link: https://www.pinterest.com current-maintainers: [] past-maintainers: [*jn-sena] planet-minecraft: @@ -828,7 +831,7 @@ userstyles: categories: [game] color: green readme: - app-link: "https://planetminecraft.com" + app-link: https://planetminecraft.com current-maintainers: [*nyameliaaaa] porkbun: name: Porkbun @@ -843,7 +846,7 @@ userstyles: categories: [social_networking] color: mauve readme: - app-link: "https://pronouns.cc/" + app-link: https://pronouns.cc current-maintainers: [*comfysage] past-maintainers: [*neongamerbot] pronouns.page: @@ -852,7 +855,7 @@ userstyles: icon: pronounsdotpage color: pink readme: - app-link: "https://pronouns.page/" + app-link: https://pronouns.page current-maintainers: [*uncenter] proton: name: Proton @@ -860,7 +863,7 @@ userstyles: icon: protonmail color: mauve readme: - app-link: "https://proton.me/" + app-link: https://proton.me usage: |+ > [!NOTE] > Set Proton Mail's built-in theme to 'Snow' if you're using Latte or 'Carbon' if you're using the others. @@ -870,7 +873,7 @@ userstyles: categories: [development] color: sapphire readme: - app-link: "https://pypi.org" + app-link: https://pypi.org current-maintainers: [*trinkey] pythonanywhere: name: PythonAnywhere @@ -878,7 +881,7 @@ userstyles: icon: pythonanywhere color: sapphire readme: - app-link: "https://pythonanywhere.com" + app-link: https://pythonanywhere.com current-maintainers: [*trinkey] quizlet: name: Quizlet @@ -886,14 +889,14 @@ userstyles: icon: quizlet color: mauve readme: - app-link: "https://quizlet.com" + app-link: https://quizlet.com current-maintainers: [*spaghettiosareyummy] raindrop: name: Raindrop categories: [productivity] color: blue readme: - app-link: "https://app.raindrop.io" + app-link: https://app.raindrop.io current-maintainers: [*thismoon] reddit: name: Reddit @@ -901,7 +904,7 @@ userstyles: color: red icon: reddit readme: - app-link: "https://reddit.com" + app-link: https://reddit.com current-maintainers: [] past-maintainers: [*jayylmao, *rubyowo] rentry.co: @@ -909,7 +912,7 @@ userstyles: categories: [productivity] color: text readme: - app-link: "https://rentry.co/" + app-link: https://rentry.co current-maintainers: [*thismoon] searxng: name: SearXNG @@ -917,14 +920,14 @@ userstyles: icon: searxng color: blue readme: - app-link: "https://github.com/searxng/searxng" + app-link: https://github.com/searxng/searxng current-maintainers: [*sekki21956, *ryanccn] shinigami-eyes: name: Shinigami Eyes categories: [browser_extension, social_networking] color: mauve readme: - app-link: "https://shinigami-eyes.github.io" + app-link: https://shinigami-eyes.github.io current-maintainers: [*sofiedotcafe] snapchat-web: name: Snapchat Web @@ -932,7 +935,7 @@ userstyles: icon: snapchat color: yellow readme: - app-link: "https://web.snapchat.com" + app-link: https://web.snapchat.com current-maintainers: [*itzTheMeow] spotify-web: name: Spotify Web @@ -940,7 +943,7 @@ userstyles: icon: spotify color: green readme: - app-link: "https://open.spotify.com" + app-link: https://open.spotify.com current-maintainers: [*tnixc] stack-overflow: name: Stack Overflow @@ -955,7 +958,7 @@ userstyles: categories: [search_engine] color: lavender readme: - app-link: "https://startpage.com" + app-link: https://startpage.com current-maintainers: [] past-maintainers: [*bartlibert] status.cafe: @@ -963,14 +966,14 @@ userstyles: categories: [social_networking] color: sapphire readme: - app-link: "https://status.cafe" + app-link: https://status.cafe current-maintainers: [*bunfluff] stylus: name: Stylus categories: [browser_extension] color: teal readme: - app-link: "https://github.com/openstyles/stylus" + app-link: https://github.com/openstyles/stylus current-maintainers: [] substack: name: Substack @@ -978,7 +981,7 @@ userstyles: icon: substack color: peach readme: - app-link: "https://substack.com" + app-link: https://substack.com current-maintainers: [*uncenter] past-maintainers: [*winston] syncthing: @@ -987,7 +990,7 @@ userstyles: icon: syncthing color: sapphire readme: - app-link: "https://syncthing.net" + app-link: https://syncthing.net usage: |+ > [!NOTE] > This theme is designed to be used with the default WebGUI and default theme provided by Syncthing. This does not theme syncthing.net. @@ -997,7 +1000,7 @@ userstyles: categories: [discussion_forum, entertainment, social_networking] color: text readme: - app-link: "https://tabnews.com.br" + app-link: https://tabnews.com.br current-maintainers: [*Guaxinim5573] tldraw: name: tldraw @@ -1005,7 +1008,7 @@ userstyles: icon: tldraw color: text readme: - app-link: "https://www.tldraw.com" + app-link: https://www.tldraw.com usage: |+ > [!NOTE] > This theme only changes how the colors appear on the tldraw canvas. Exported graphics **will not be Catppuccin-themed**. @@ -1015,7 +1018,7 @@ userstyles: categories: [development] color: blue readme: - app-link: "https://trinket.io" + app-link: https://trinket.io current-maintainers: [*trinkey] tuta: name: Tuta @@ -1023,7 +1026,7 @@ userstyles: icon: tutanota color: maroon readme: - app-link: "https://tuta.com/" + app-link: https://tuta.com usage: |+ > [!NOTE] > Set Tuta's built-in theme to either **light** if you're using Latte or **dark** if you're using the others. @@ -1034,7 +1037,7 @@ userstyles: icon: twitch color: mauve readme: - app-link: "https://twitch.tv" + app-link: https://twitch.tv current-maintainers: [*uncenter, *mxgic1337] twitter: name: Twitter @@ -1042,7 +1045,7 @@ userstyles: color: blue icon: twitter readme: - app-link: "https://twitter.com" + app-link: https://twitter.com usage: |+ > [!NOTE] > Set Twitter's built-in theme to **Lights out** with the blue accent. Also requires the [:has()](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) selector. @@ -1053,7 +1056,7 @@ userstyles: icon: vercel color: text readme: - app-link: ["https://vercel.com", "https://nextjs.org"] + app-link: [https://vercel.com, https://nextjs.org] usage: |+ > [!NOTE] > This theme also applies to the [Next.js](https://nextjs.org/) website. @@ -1063,14 +1066,14 @@ userstyles: categories: [productivity, note_taking] color: blue readme: - app-link: "https://vikunja.io" + app-link: https://vikunja.io current-maintainers: [*Guaxinim5573] web.dev: name: web.dev categories: [development] color: blue readme: - app-link: https://web.dev/ + app-link: https://web.dev current-maintainers: [*uncenter] whatsapp-web: name: WhatsApp Web @@ -1078,7 +1081,7 @@ userstyles: icon: whatsapp color: green readme: - app-link: "https://web.whatsapp.com" + app-link: https://web.whatsapp.com current-maintainers: [*francorav] wikipedia: name: Wikipedia @@ -1086,7 +1089,7 @@ userstyles: icon: wikipedia color: text readme: - app-link: "https://www.wikipedia.org" + app-link: https://www.wikipedia.org current-maintainers: [] wikiwand: name: Wikiwand @@ -1094,7 +1097,7 @@ userstyles: icon: wikipedia color: text readme: - app-link: "https://www.wikiwand.com" + app-link: https://www.wikiwand.com current-maintainers: [*tnixc] youtube: name: YouTube @@ -1102,7 +1105,7 @@ userstyles: icon: youtube color: red readme: - app-link: "https://youtube.com" + app-link: https://youtube.com faq: - question: "**What does the 'Enable for black bars' option mean?**" answer: "It's available in case you have an OLED display. If you have one, you might want to enable this." diff --git a/scripts/utils.ts b/scripts/utils.ts index bf5e659690..398f721eab 100644 --- a/scripts/utils.ts +++ b/scripts/utils.ts @@ -143,7 +143,9 @@ export function getUserstylesFiles(): string[] { const files: string[] = []; for (const dir of Deno.readDirSync(path.join(REPO_ROOT, "styles"))) { if (!dir.isDirectory) continue; - files.push(path.join(REPO_ROOT, "styles", dir.name, "catppuccin.user.css")); + files.push( + path.join(REPO_ROOT, "styles", dir.name, "catppuccin.user.less"), + ); } return files; } diff --git a/shell.nix b/shell.nix index b305b1d7f0..2950f199d1 100644 --- a/shell.nix +++ b/shell.nix @@ -1,12 +1,10 @@ { deno, mkShellNoCC, - nodePackages, ... }: mkShellNoCC { packages = [ deno - nodePackages.prettier ]; } diff --git a/styles/advent-of-code/catppuccin.user.css b/styles/advent-of-code/catppuccin.user.css index 83ce82b498..a06dc63083 100644 --- a/styles/advent-of-code/catppuccin.user.css +++ b/styles/advent-of-code/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Advent Of Code Catppuccin +@name Advent Of Code Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/advent-of-code @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/advent-of-code -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/advent-of-code/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/advent-of-code/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aadvent-of-code @description Soothing pastel theme for Advent Of Code @author Catppuccin @@ -13,247 +13,4 @@ @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("adventofcode.com") { - @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: @base; - color: @text; - - header h1 a, - header h1 span { - color: @green; - text-shadow: - 0 0 2px @green, - 0 0 5px @green; - } - - a { - color: @green; - } - - .star-count { - color: @yellow; - } - - .quiet { - color: @subtext0; - opacity: 1; - } - - .share, - .share:hover, - input[type="submit"] { - color: @green; - } - - main { - article { - em { - color: @text; - text-shadow: 0 0 5px @text; - } - - h2 { - color: @text; - } - - input[type="radio"]:checked ~ span, - input[type="checkbox"]:checked ~ span { - color: @text; - } - - input[type="radio"] ~ span:hover, - input[type="radio"] ~ span:focus, - input[type="checkbox"]:hover ~ span, - input[type="checkbox"]:focus ~ span { - background-color: @crust; - } - } - .supporter-badge { - color: @yellow; - } - - .supporter-badge:hover { - color: @yellow; - text-shadow: 0 0 5px @yellow; - } - - .sponsor-badge { - color: @blue; - } - - .sponsor-badge:hover, - .sponsor-badge:focus { - color: @blue; - text-shadow: 0 0 5px @blue; - } - - .leaderboard-entry { - .leaderboard-position { - color: @subtext1; - } - .leaderboard-totalscore { - color: @text; - } - } - - .leaderboard-daylinks-selected { - color: @text; - text-shadow: 0 0 5px @text; - } - - .leaderboard-daylinks-selected:hover { - color: @green; - } - - .leaderboard-anon { - opacity: 1; - color: @subtext0; - } - .calendar { - .calendar-color-w { - color: @text; - } - .calendar-color-s { - color: @yellow; - } - .calendar-color-c { - color: @subtext1; - } - .calendar-color-g3 { - color: darken(@green, 3%); - } - .calendar-color-g2 { - color: @green; - } - .calendar-color-g4 { - color: darken(@green, 3.5%); - } - .calendar-color-u { - color: @sky; - } - .calendar-color-a { - color: @subtext0; - } - .calendar-color-g1 { - color: darken(@green, 2.5%); - } - .calendar-color-g0 { - color: darken(@green, 2%); - } - .calendar-color-l { - color: @red; - } - .calendar-mark-complete { - color: @yellow; - } - .calendar-mark-verycomplete { - color: @yellow; - } - .calendar-day { - color: @subtext1; - } - #calendar-countdown { - color: @subtext1; - } - - span { - color: @surface0; - } - - a { - color: @surface2; - } - } - - .day-success { - color: @yellow; - text-shadow: 0 0 5px @yellow; - } - - .stats-both { - color: @yellow; - } - - .stats-firstonly { - color: @overlay0; - } - - a:hover { - background-color: @mantle !important; - } - - input[type="text"], - textarea, - code::before { - border-color: @surface0; - background: @crust; - } - } - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/advent-of-code/catppuccin.user.less b/styles/advent-of-code/catppuccin.user.less new file mode 100644 index 0000000000..0205578175 --- /dev/null +++ b/styles/advent-of-code/catppuccin.user.less @@ -0,0 +1,255 @@ +/* ==UserStyle== +@name Advent Of Code Catppuccin +@namespace github.com/catppuccin/userstyles/styles/advent-of-code +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/advent-of-code +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/advent-of-code/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aadvent-of-code +@description Soothing pastel theme for Advent Of Code +@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("adventofcode.com") { + @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: @base; + color: @text; + + header h1 a, + header h1 span { + color: @green; + text-shadow: 0 0 2px @green, 0 0 5px @green; + } + + a { + color: @green; + } + + .star-count { + color: @yellow; + } + + .quiet { + color: @subtext0; + opacity: 1; + } + + .share, + .share:hover, + input[type="submit"] { + color: @green; + } + + main { + article { + em { + color: @text; + text-shadow: 0 0 5px @text; + } + + h2 { + color: @text; + } + + input[type="radio"]:checked ~ span, + input[type="checkbox"]:checked ~ span { + color: @text; + } + + input[type="radio"] ~ span:hover, + input[type="radio"] ~ span:focus, + input[type="checkbox"]:hover ~ span, + input[type="checkbox"]:focus ~ span { + background-color: @crust; + } + } + .supporter-badge { + color: @yellow; + } + + .supporter-badge:hover { + color: @yellow; + text-shadow: 0 0 5px @yellow; + } + + .sponsor-badge { + color: @blue; + } + + .sponsor-badge:hover, + .sponsor-badge:focus { + color: @blue; + text-shadow: 0 0 5px @blue; + } + + .leaderboard-entry { + .leaderboard-position { + color: @subtext1; + } + .leaderboard-totalscore { + color: @text; + } + } + + .leaderboard-daylinks-selected { + color: @text; + text-shadow: 0 0 5px @text; + } + + .leaderboard-daylinks-selected:hover { + color: @green; + } + + .leaderboard-anon { + opacity: 1; + color: @subtext0; + } + .calendar { + .calendar-color-w { + color: @text; + } + .calendar-color-s { + color: @yellow; + } + .calendar-color-c { + color: @subtext1; + } + .calendar-color-g3 { + color: darken(@green, 3%); + } + .calendar-color-g2 { + color: @green; + } + .calendar-color-g4 { + color: darken(@green, 3.5%); + } + .calendar-color-u { + color: @sky; + } + .calendar-color-a { + color: @subtext0; + } + .calendar-color-g1 { + color: darken(@green, 2.5%); + } + .calendar-color-g0 { + color: darken(@green, 2%); + } + .calendar-color-l { + color: @red; + } + .calendar-mark-complete { + color: @yellow; + } + .calendar-mark-verycomplete { + color: @yellow; + } + .calendar-day { + color: @subtext1; + } + #calendar-countdown { + color: @subtext1; + } + + span { + color: @surface0; + } + + a { + color: @surface2; + } + } + + .day-success { + color: @yellow; + text-shadow: 0 0 5px @yellow; + } + + .stats-both { + color: @yellow; + } + + .stats-firstonly { + color: @overlay0; + } + + a:hover { + background-color: @mantle !important; + } + + input[type="text"], + textarea, + code::before { + border-color: @surface0; + background: @crust; + } + } + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/alternativeto/catppuccin.user.css b/styles/alternativeto/catppuccin.user.css index a09263b6c5..004720ba66 100644 --- a/styles/alternativeto/catppuccin.user.css +++ b/styles/alternativeto/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name AlternativeTo Catppuccin +@name AlternativeTo Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/alternativeto @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/alternativeto -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/alternativeto/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/alternativeto/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aalternativeto @description Soothing pastel theme for AlternativeTo @author Catppuccin @@ -13,494 +13,4 @@ @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('alternativeto.net') { - :root[data-theme="dark"] { - #catppuccin(@darkFlavor, @accentColor); - } - :root[data-theme="light"] { - #catppuccin(@lightFlavor, @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; - } - } - - --mainBrand: @accent-color; - --topBrand: @accent-color; - --footer: @mantle; - --mainBg: @base; - --mainFg: @text; - --popBrand: @accent-color; - --introBoxText: @text; - --introBoxLink: @text; - --introBoxMeta: @subtext0; - --meta: @subtext0; - --metaLight: @subtext1; - --linkColorHeader: @text; - --linkColor: @text; - --brandLight3: @surface2; - --brandLight4: @surface2; - --brandLight5: @surface1; - --brandLight6: @mantle; - --brandLight7: @surface0; - --brandLight8: @text; - --brandLight10: @surface0; - --brandLight11: @mantle; - --gray50: @surface0; - --gray100: @surface0; - --gray150: @surface0; - --gray200: @surface1; - --gray250: @surface1; - --gray300: @surface1; - --gray500: @overlay0; - --headingButton: @accent-color; - --positiveGreener: @green; - --positiveGreenerLight: fade(@green, 10%); - --positiveGreenerDark: @green; - --danger: @red; - --negativeLight: fade(@peach, 10%); - --lightDanger: fade(@red, 25%); - --dangerDark: @red; - --ctaMain: @mauve; - --ctaLight: @base; - --ctaLightest: @mantle; - --tab: @mantle; - --toastify-color-dark: @mantle; - --toastify-color-light: @text; - --toastify-color-info: @blue; - --toastify-color-success: @green; - --toastify-color-warning: @yellow; - --toastify-color-error: @red; - - // heart icon - [class^="ModernLikeButton_likeWrapper"] { - [class^="ModernLikeButton_heart"]:hover, - [class^="ModernLikeButton_liked"] { - svg { - color: @red; - } - } - } - // primary button - [class*="Button_primary"] { - color: @crust !important; - } - // footer - [class^="Footer_footer"] { - &, - & p a, - & [class^="Footer_footerMenu"] li a { - color: @text; - } - } - [class^="Footer_footerLogo"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - // rating stars - [class^="StarRating_star"] { - color: @text; - &[class*="StarRating_active"] { - color: @peach; - } - } - // danger "discontinued" label - [class*="AppAlertWrapper_warning"] span { - color: @peach; - } - // feature point in alternative's features - [class*="HighlightFeatureListItem_featurePoint"]:not( - [class*="HighlightFeatureListItem_gray"] - ) { - background-color: @green; - color: @green; - border-color: lighten(@green, 25%); - } - // app banner (ad) - [class*="AppBanner_iconWrapper"], - [class*="AppBanner_banner"], - [class*="AppBanner_bottom"] { - border-color: @overlay0; - } - // navigation/top bar - [class^="HeaderLinks_globalSiteNav"] a, - [class^="HeaderLinks_globalSiteNav"] span, - [class^="HeaderLinks_authAndMenu"] a, - [class*="Button_headerTextButton"] svg, - [class*="Button_headerTextButton"]:hover svg, - [class^="HeaderLinks_header"] button:focus { - color: @base !important; - } - [class^="HeaderLinks_logoSmall"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - [class*="HeaderLinks_logoLarge"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - // hanburger menu - [class^="DropdownListLink_additionalInfo"] { - color: @subtext0; - } - // svg color variables - @light-peach: lighten(@peach, 25%); - @dark-peach: darken(@peach, 25%); - @dark-blue: desaturate(darken(@blue, 60%), 40%); - @darker-blue: desaturate(darken(@blue, 65%), 40%); - // main page header - img[class*="PageIntroImage_a2-header-"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - // flipped/mirrored/right variation of the a2 robot svg (found in /about and /about/privacy) - &[src^="/static/a2-header-right"] { - transform: scale(-1, 1); - } - } - @media screen and (min-width: 1200px) { - [class*="PageIntroWrapper_wrapper"] { - @svg: escape( - '' - ); - @svg2: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"), - url("data:image/svg+xml,@{svg2}"); - } - } - // news page header - [src^="/static/a2-screen"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - // new app releases page header - [src^="/static/a2-drop"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - // bottom right loading spinner icon - #nprogress .spinner-icon { - border-top-color: @accent-color; - border-left-color: @accent-color; - } - // top progress bar when loading a new page - #nprogress .peg { - box-shadow: - 0 0 10px @accent-color, - 0 0 5px @accent-color; - } - // toast - .Toastify__close-button { - color: @text; - } - [data-testid="toast"] > div > span { - color: @text !important; - } - // remove filter badge - li[class^="AppFilterBarCommon_current"]:hover { - & a::after, - & > span::after { - color: darken(@red, 25%); - } - } - // news fire icon - @newstype: { - hottest: @peach; - hot_: @yellow; - luke: @text; - }; - each(@newstype, { - [class^="NewsForListMeta_@{key}"]{ - color: @value - } - }) - // current page nummber - [class*="Pagination_current"] { - color: @subtext0; - } - // full screen screenshot button - [class^="ImageCollection-modern_expandImage"] { - background: fade(@text, 80%) !important; - svg { - color: @crust !important; - } - & when (@lookup = latte) { - background: fade(@crust, 80%) !important; - svg { - color: @text !important; - } - } - } - // social icons - // rrs - svg[color="#f26522"] { - color: @peach !important; - } - // "Share on" icons - @socialapps: { - facebook: @blue; - reddit: @peach; - }; - [class^="ShareButtons_shareButtons"] { - each(@socialapps, { - [title="Share on @{key}"] > svg{ - color: @value !important; - } - }); - } - // AppStores & Other Links - [class*="Button_black"], - [class^="AppExternalLinks_appstoreWrapper"] { - background: @crust; - color: @text; - &:hover { - background: @base; - } - [src$="ms-store.svg"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - [src$="android-store.svg"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - [src$="ios-store.svg"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } - // social networks - @socialnetworks: { - Facebook: @blue; - X: @text; - }; - [class^="AppExternalLinks_socialLinksWrapper"] { - each(@socialnetworks, { - [title^="@{key} page"] > svg{ - color: @value !important - } - }); - } - // yello star (e.g. the level in a user profile) - svg[color="#e39d06"] { - color: @yellow !important; - } - // list like button hover - [class*="LikeButton_likeButton"]:hover [class*="LikeButton_heart"] { - color: @red; - } - // register popup header - .data-collector .header { - color: @overlay2; - } - // danger button (clear all filters) - [class*="Button_danger"] { - background: @red; - border-color: @red; - color: @crust; - } - // warning button - [class*="Button_warning"] { - background-color: @yellow; - border-color: @yellow; - color: @crust; - } - // success button - [class*="Button_success"] { - background-color: @green; - border-color: @green; - color: @crust; - } - // disabled buttons - [class*="Button_button"][disabled] { - background-color: @surface2 !important ; - border-color: @surface2 !important ; - color: @overlay2 !important ; - } - } -} - -@-moz-document domain('auth.alternativeto.net') { - @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; - } - } - - --widget-background-color: @base; - --input-background-color: @base; - --input-border-color: @surface1; - --input-text-color: @text; - --base-focus-color: @accent-color; - --link-color: @accent-color; - --primary-color: @accent-color; - --button-font-color: @crust; - --title-font-color: @text; - --font-default-color: @text; - --font-light-color: @subtext0; - --border-default-color: @surface1; - --social-button-border-color: @surface1; - --secondary-button-text-color: @text; - --transparency-focus-color: fade(@accent-color, 15%); - --icon-default-color: @overlay1; - --gray-lightest: @text; - --error-color: @red; - @error-svg: escape( - '' - ); - --icon-error: url("data:image/svg+xml,@{error-svg}"); - - body { - background: @crust; - } - .footer { - a { - color: @text; - } - background: @mantle; - color: @subtext0; - } - #prompt-logo-center { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - .password-icon-tooltip { - background: @crust; - - &::before { - border-color: @crust transparent transparent; - } - } - // "Continue with" login button icons - @loginicon: { - google: ""; - windowslive: ""; - github: ""; - apple: ""; - }; - each(@loginicon, { - span[data-provider="@{key}"] { - @svg: escape(@value); - background-image: url("data:image/svg+xml,@{svg}"); - } - }); - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/alternativeto/catppuccin.user.less b/styles/alternativeto/catppuccin.user.less new file mode 100644 index 0000000000..3bdd5fdc32 --- /dev/null +++ b/styles/alternativeto/catppuccin.user.less @@ -0,0 +1,515 @@ +/* ==UserStyle== +@name AlternativeTo Catppuccin +@namespace github.com/catppuccin/userstyles/styles/alternativeto +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/alternativeto +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/alternativeto/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aalternativeto +@description Soothing pastel theme for AlternativeTo +@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("alternativeto.net") { + :root[data-theme="dark"] { + #catppuccin(@darkFlavor, @accentColor); + } + :root[data-theme="light"] { + #catppuccin(@lightFlavor, @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; + } + } + + --mainBrand: @accent-color; + --topBrand: @accent-color; + --footer: @mantle; + --mainBg: @base; + --mainFg: @text; + --popBrand: @accent-color; + --introBoxText: @text; + --introBoxLink: @text; + --introBoxMeta: @subtext0; + --meta: @subtext0; + --metaLight: @subtext1; + --linkColorHeader: @text; + --linkColor: @text; + --brandLight3: @surface2; + --brandLight4: @surface2; + --brandLight5: @surface1; + --brandLight6: @mantle; + --brandLight7: @surface0; + --brandLight8: @text; + --brandLight10: @surface0; + --brandLight11: @mantle; + --gray50: @surface0; + --gray100: @surface0; + --gray150: @surface0; + --gray200: @surface1; + --gray250: @surface1; + --gray300: @surface1; + --gray500: @overlay0; + --headingButton: @accent-color; + --positiveGreener: @green; + --positiveGreenerLight: fade(@green, 10%); + --positiveGreenerDark: @green; + --danger: @red; + --negativeLight: fade(@peach, 10%); + --lightDanger: fade(@red, 25%); + --dangerDark: @red; + --ctaMain: @mauve; + --ctaLight: @base; + --ctaLightest: @mantle; + --tab: @mantle; + --toastify-color-dark: @mantle; + --toastify-color-light: @text; + --toastify-color-info: @blue; + --toastify-color-success: @green; + --toastify-color-warning: @yellow; + --toastify-color-error: @red; + + // heart icon + [class^="ModernLikeButton_likeWrapper"] { + [class^="ModernLikeButton_heart"]:hover, + [class^="ModernLikeButton_liked"] { + svg { + color: @red; + } + } + } + // primary button + [class*="Button_primary"] { + color: @crust !important; + } + // footer + [class^="Footer_footer"] { + &, + & p a, + & [class^="Footer_footerMenu"] li a { + color: @text; + } + } + [class^="Footer_footerLogo"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + // rating stars + [class^="StarRating_star"] { + color: @text; + &[class*="StarRating_active"] { + color: @peach; + } + } + // danger "discontinued" label + [class*="AppAlertWrapper_warning"] span { + color: @peach; + } + // feature point in alternative's features + [class*="HighlightFeatureListItem_featurePoint"]:not( + [class*="HighlightFeatureListItem_gray"] + ) { + background-color: @green; + color: @green; + border-color: lighten(@green, 25%); + } + // app banner (ad) + [class*="AppBanner_iconWrapper"], + [class*="AppBanner_banner"], + [class*="AppBanner_bottom"] { + border-color: @overlay0; + } + // navigation/top bar + [class^="HeaderLinks_globalSiteNav"] a, + [class^="HeaderLinks_globalSiteNav"] span, + [class^="HeaderLinks_authAndMenu"] a, + [class*="Button_headerTextButton"] svg, + [class*="Button_headerTextButton"]:hover svg, + [class^="HeaderLinks_header"] button:focus { + color: @base !important; + } + [class^="HeaderLinks_logoSmall"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + [class*="HeaderLinks_logoLarge"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + // hanburger menu + [class^="DropdownListLink_additionalInfo"] { + color: @subtext0; + } + // svg color variables + @light-peach: lighten(@peach, 25%); + @dark-peach: darken(@peach, 25%); + @dark-blue: desaturate(darken(@blue, 60%), 40%); + @darker-blue: desaturate(darken(@blue, 65%), 40%); + // main page header + img[class*="PageIntroImage_a2-header-"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + // flipped/mirrored/right variation of the a2 robot svg (found in /about and /about/privacy) + &[src^="/static/a2-header-right"] { + transform: scale(-1, 1); + } + } + @media screen and (min-width: 1200px) { + [class*="PageIntroWrapper_wrapper"] { + @svg: escape( + '' + ); + @svg2: escape( + '' + ); + background-image: + url("data:image/svg+xml,@{svg}"), + url("data:image/svg+xml,@{svg2}"); + } + } + // news page header + [src^="/static/a2-screen"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + // new app releases page header + [src^="/static/a2-drop"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + // bottom right loading spinner icon + #nprogress .spinner-icon { + border-top-color: @accent-color; + border-left-color: @accent-color; + } + // top progress bar when loading a new page + #nprogress .peg { + box-shadow: 0 0 10px @accent-color, 0 0 5px @accent-color; + } + // toast + .Toastify__close-button { + color: @text; + } + [data-testid="toast"] > div > span { + color: @text !important; + } + // remove filter badge + li[class^="AppFilterBarCommon_current"]:hover { + & a::after, + & > span::after { + color: darken(@red, 25%); + } + } + // news fire icon + @newstype: { + hottest: @peach; + hot_: @yellow; + luke: @text; + }; + each( + @newstype, + { + [class^="NewsForListMeta_@{key}"] { + color: @value; + } + } + ); + // current page nummber + [class*="Pagination_current"] { + color: @subtext0; + } + // full screen screenshot button + [class^="ImageCollection-modern_expandImage"] { + background: fade(@text, 80%) !important; + svg { + color: @crust !important; + } + & when (@lookup = latte) { + background: fade(@crust, 80%) !important; + svg { + color: @text !important; + } + } + } + // social icons + // rrs + svg[color="#f26522"] { + color: @peach !important; + } + // "Share on" icons + @socialapps: { + facebook: @blue; + reddit: @peach; + }; + [class^="ShareButtons_shareButtons"] { + each( + @socialapps, + { + [title="Share on @{key}"] > svg { + color: @value !important; + } + } + ); + } + // AppStores & Other Links + [class*="Button_black"], + [class^="AppExternalLinks_appstoreWrapper"] { + background: @crust; + color: @text; + &:hover { + background: @base; + } + [src$="ms-store.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + [src$="android-store.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + [src$="ios-store.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + // social networks + @socialnetworks: { + Facebook: @blue; + X: @text; + }; + [class^="AppExternalLinks_socialLinksWrapper"] { + each( + @socialnetworks, + { + [title^="@{key} page"] > svg { + color: @value !important; + } + } + ); + } + // yello star (e.g. the level in a user profile) + svg[color="#e39d06"] { + color: @yellow !important; + } + // list like button hover + [class*="LikeButton_likeButton"]:hover [class*="LikeButton_heart"] { + color: @red; + } + // register popup header + .data-collector .header { + color: @overlay2; + } + // danger button (clear all filters) + [class*="Button_danger"] { + background: @red; + border-color: @red; + color: @crust; + } + // warning button + [class*="Button_warning"] { + background-color: @yellow; + border-color: @yellow; + color: @crust; + } + // success button + [class*="Button_success"] { + background-color: @green; + border-color: @green; + color: @crust; + } + // disabled buttons + [class*="Button_button"][disabled] { + background-color: @surface2 !important; + border-color: @surface2 !important; + color: @overlay2 !important; + } + } +} + +@-moz-document domain("auth.alternativeto.net") { + @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; + } + } + + --widget-background-color: @base; + --input-background-color: @base; + --input-border-color: @surface1; + --input-text-color: @text; + --base-focus-color: @accent-color; + --link-color: @accent-color; + --primary-color: @accent-color; + --button-font-color: @crust; + --title-font-color: @text; + --font-default-color: @text; + --font-light-color: @subtext0; + --border-default-color: @surface1; + --social-button-border-color: @surface1; + --secondary-button-text-color: @text; + --transparency-focus-color: fade(@accent-color, 15%); + --icon-default-color: @overlay1; + --gray-lightest: @text; + --error-color: @red; + @error-svg: escape( + '' + ); + --icon-error: url("data:image/svg+xml,@{error-svg}"); + + body { + background: @crust; + } + .footer { + a { + color: @text; + } + background: @mantle; + color: @subtext0; + } + #prompt-logo-center { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + .password-icon-tooltip { + background: @crust; + + &::before { + border-color: @crust transparent transparent; + } + } + // "Continue with" login button icons + @loginicon: { + google: ""; + windowslive: ""; + github: ""; + apple: ""; + }; + each( + @loginicon, + { + span[data-provider="@{key}"] { + @svg: escape(@value); + background-image: url("data:image/svg+xml,@{svg}"); + } + } + ); + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/amplenote/catppuccin.user.css b/styles/amplenote/catppuccin.user.css index d6af3bab4d..8a6a9b658e 100644 --- a/styles/amplenote/catppuccin.user.css +++ b/styles/amplenote/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Amplenote Catppuccin +@name Amplenote Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/amplenote @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/amplenote -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/amplenote/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/amplenote/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aamplenote @description Soothing pastel theme for Amplenote @author Catppuccin @@ -13,237 +13,4 @@ @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("amplenote.com") { - body:not(.theme-light) { - #catppuccin(@darkFlavor, @accentColor); - } - - body.theme-light { - #catppuccin(@lightFlavor, @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; - } - } - - &.themeable { - --color-background-primary: @base; - --color-background-primary-rgb: #rgbify(@base) []; - --color-background-secondary: @mantle; - --color-background-tertiary: @mantle; - - --color-background-popup: @base; - --color-background-dialog: @mantle; - --color-background-header: @mantle; - --color-background-nav: @mantle; - --color-background-nav-active: @surface0; - --color-background-search-bar: @crust; - --color-background-nav-menu: @mantle; - --color-background-nav-menu-divider: @crust; - --color-background-nav-avatar: @crust; - --color-background-popup-small: @surface0; - --color-background-reversed: @surface0; - --color-background-reversed-secondary: @surface2; - - --color-background-element-high-contrast: fade(@overlay2, 40%); - --color-background-element-medium-contrast: fade(@accent-color, 40%); - --color-background-element-medium-contrast-rgb: fade(@accent-color. 40%); - --color-background-element-low-contrast: @crust; - - --color-background-note-menu-button: @surface0; - --color-background-banner: @surface0; - --color-background-banner-alt: @base; - --color-background-nav-divider: @surface0; - - --color-background-action-low-contrast: fade(@accent-color, 50%); - --color-background-action-medium-contrast: fade(@accent-color, 60%); - --color-background-action-high-contrast: @accent-color; - --color-background-action-high-contrast-rgb: #rgbify(@accent-color) []; - --color-background-action-high-contrast-alt: fade(@accent-color, 75%); - - --color-background-error-high-contrast: @red; - --color-background-error-medium-contrast: fade(@red, 50%); - - --color-border-primary: @surface0; - --color-border-secondary: @surface1; - --color-border-tertiary: @surface1; - - --color-text-reversed: @text; - - --color-text-high-contrast: @text; - --color-text-nav-high-contrast: @text; - --color-text-medium-contrast: @subtext1; - --color-text-nav-medium-contrast: @subtext1; - --color-text-low-contrast: @subtext0; - --color-text-nav-low-contrast: @subtext0; - --color-text-lower-contrast: @overlay2; - --color-text-nav-lower-contrast: @surface2; - - --color-text-error-low-contrast: @peach; - --color-text-error-low-contrast-rgb: #rgbify(@peach) []; - --color-text-error-medium-contrast: @red; - --color-text-error-high-contrast: @red; - - --color-text-status: @green; - --color-text-link: @accent-color; - --color-text-button: @crust; - - --color-background-task-value: @surface1; - --color-background-sidebar-task: @surface0; - - --color-overlay-low-contrast: @accent-color; - - --mdc-theme-surface: @base; - } - - header.note-header-container .logo-wrapper .ample-svg-logo .logo-icon { - fill: @text; - } - - .notes-list .notes-list-item:hover { - background-color: @crust; - } - - .ample-editor .editor-tabs .tab:not(.current) { - border-bottom-color: @surface0 !important; - } - - .referencing-notes, - .tab.current, - .editor-title-input-wrapper textarea, - .completed-tasks, - .no-tasks-message { - background-color: @base !important; - } - - .new-note-button { - color: @crust !important; - } - - .ample-editor .check-list-item.value-1 .row-wrapper { - border-left-color: @sapphire; - } - - .menu-button.synced { - color: @green !important; - } - - .menu-button .refreshing { - color: @blue !important; - } - - .primary-side-nav .section-link.default .shortcut-icon { - color: @yellow; - } - - .ample-editor:not(.mobile-embed) - .check-list-item:hover:not(.expanded) - .row-wrapper { - background-color: @surface0; - } - - .mdc-chip-set.mdc-chip-set--choice - .mdc-chip.mdc-chip--selected - .mdc-chip__icon--leading, - .mdc-chip.mdc-chip--selected .mdc-chip__icon--leading { - color: @crust; - } - - .account-appearance-app .mdc-chip i.material-icons.mdc-chip__icon--leading { - color: @text; - } - - .DayPicker-Weekday { - color: @subtext0; - } - - .calendar-pane .fc { - .fc-timegrid-now-indicator-arrow { - .line { - border-bottom-color: @accent-color; - } - .material-icons { - color: @accent-color; - } - } - - .fc-timegrid-now-indicator-line { - border-color: darken(@accent-color, 10%); - } - - .fc-timegrid .fc-daygrid-day-events, - .fc-timegrid .all-day-slot { - background-color: @base; - } - } - - #completed-tasks-stroke-gradient, - #completed-tasks-fill-gradient { - [offset="0%"] { - stop-color: @maroon; - } - - [offset="50%"] { - stop-color: @peach; - } - - [offset="100%"] { - stop-color: @yellow; - } - } - } -} - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/amplenote/catppuccin.user.less b/styles/amplenote/catppuccin.user.less new file mode 100644 index 0000000000..37cc18e1c7 --- /dev/null +++ b/styles/amplenote/catppuccin.user.less @@ -0,0 +1,247 @@ +/* ==UserStyle== +@name Amplenote Catppuccin +@namespace github.com/catppuccin/userstyles/styles/amplenote +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/amplenote +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/amplenote/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aamplenote +@description Soothing pastel theme for Amplenote +@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("amplenote.com") { + body:not(.theme-light) { + #catppuccin(@darkFlavor, @accentColor); + } + + body.theme-light { + #catppuccin(@lightFlavor, @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; + } + } + + &.themeable { + --color-background-primary: @base; + --color-background-primary-rgb: #rgbify(@base)[]; + --color-background-secondary: @mantle; + --color-background-tertiary: @mantle; + + --color-background-popup: @base; + --color-background-dialog: @mantle; + --color-background-header: @mantle; + --color-background-nav: @mantle; + --color-background-nav-active: @surface0; + --color-background-search-bar: @crust; + --color-background-nav-menu: @mantle; + --color-background-nav-menu-divider: @crust; + --color-background-nav-avatar: @crust; + --color-background-popup-small: @surface0; + --color-background-reversed: @surface0; + --color-background-reversed-secondary: @surface2; + + --color-background-element-high-contrast: fade(@overlay2, 40%); + --color-background-element-medium-contrast: fade(@accent-color, 40%); + --color-background-element-medium-contrast-rgb: fade(@accent-color. 40%); + --color-background-element-low-contrast: @crust; + + --color-background-note-menu-button: @surface0; + --color-background-banner: @surface0; + --color-background-banner-alt: @base; + --color-background-nav-divider: @surface0; + + --color-background-action-low-contrast: fade(@accent-color, 50%); + --color-background-action-medium-contrast: fade(@accent-color, 60%); + --color-background-action-high-contrast: @accent-color; + --color-background-action-high-contrast-rgb: #rgbify(@accent-color)[]; + --color-background-action-high-contrast-alt: fade(@accent-color, 75%); + + --color-background-error-high-contrast: @red; + --color-background-error-medium-contrast: fade(@red, 50%); + + --color-border-primary: @surface0; + --color-border-secondary: @surface1; + --color-border-tertiary: @surface1; + + --color-text-reversed: @text; + + --color-text-high-contrast: @text; + --color-text-nav-high-contrast: @text; + --color-text-medium-contrast: @subtext1; + --color-text-nav-medium-contrast: @subtext1; + --color-text-low-contrast: @subtext0; + --color-text-nav-low-contrast: @subtext0; + --color-text-lower-contrast: @overlay2; + --color-text-nav-lower-contrast: @surface2; + + --color-text-error-low-contrast: @peach; + --color-text-error-low-contrast-rgb: #rgbify(@peach)[]; + --color-text-error-medium-contrast: @red; + --color-text-error-high-contrast: @red; + + --color-text-status: @green; + --color-text-link: @accent-color; + --color-text-button: @crust; + + --color-background-task-value: @surface1; + --color-background-sidebar-task: @surface0; + + --color-overlay-low-contrast: @accent-color; + + --mdc-theme-surface: @base; + } + + header.note-header-container .logo-wrapper .ample-svg-logo .logo-icon { + fill: @text; + } + + .notes-list .notes-list-item:hover { + background-color: @crust; + } + + .ample-editor .editor-tabs .tab:not(.current) { + border-bottom-color: @surface0 !important; + } + + .referencing-notes, + .tab.current, + .editor-title-input-wrapper textarea, + .completed-tasks, + .no-tasks-message { + background-color: @base !important; + } + + .new-note-button { + color: @crust !important; + } + + .ample-editor .check-list-item.value-1 .row-wrapper { + border-left-color: @sapphire; + } + + .menu-button.synced { + color: @green !important; + } + + .menu-button .refreshing { + color: @blue !important; + } + + .primary-side-nav .section-link.default .shortcut-icon { + color: @yellow; + } + + .ample-editor:not(.mobile-embed) + .check-list-item:hover:not(.expanded) + .row-wrapper { + background-color: @surface0; + } + + .mdc-chip-set.mdc-chip-set--choice + .mdc-chip.mdc-chip--selected + .mdc-chip__icon--leading, + .mdc-chip.mdc-chip--selected .mdc-chip__icon--leading { + color: @crust; + } + + .account-appearance-app .mdc-chip i.material-icons.mdc-chip__icon--leading { + color: @text; + } + + .DayPicker-Weekday { + color: @subtext0; + } + + .calendar-pane .fc { + .fc-timegrid-now-indicator-arrow { + .line { + border-bottom-color: @accent-color; + } + .material-icons { + color: @accent-color; + } + } + + .fc-timegrid-now-indicator-line { + border-color: darken(@accent-color, 10%); + } + + .fc-timegrid .fc-daygrid-day-events, + .fc-timegrid .all-day-slot { + background-color: @base; + } + } + + #completed-tasks-stroke-gradient, + #completed-tasks-fill-gradient { + [offset="0%"] { + stop-color: @maroon; + } + + [offset="50%"] { + stop-color: @peach; + } + + [offset="100%"] { + stop-color: @yellow; + } + } + } +} + +#rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/anilist/catppuccin.user.css b/styles/anilist/catppuccin.user.css index d134f0b90f..2dc58828c3 100644 --- a/styles/anilist/catppuccin.user.css +++ b/styles/anilist/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name AniList/AniChart Catppuccin +@name AniList/AniChart Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/anilist @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/anilist -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/anilist/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/anilist/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aanilist @description Soothing pastel theme for AniList and AniChart @author Catppuccin @@ -15,746 +15,4 @@ @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 contrastColor "Contrast Color" ["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("anilist.co"), domain("anichart.net") { - body:not(.site-theme-dark) { - #catppuccin(@lightFlavor, @accentColor); - } - .site-theme-dark { - #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]; - - @contrast-color: @catppuccin[@@lookup][@@contrastColor]; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - & when (@lookup =latte) { - --color-blue-dim: #rgbify(desaturate(lighten(@accent-color, 10%), 10%)) []; - - .nav[data-v-62eacfff], - .solid[data-v-62eacfff], - .transparent[data-v-62eacfff]:hover { - background: darken(@text, 10%); - color: @base; - } - - .nav-unscoped.transparent { - background: fade(darken(@text, 10%), 50%); - } - - .banner-content .name { - --color-text-bright: #rgbify(#fff) []; - } - } - - --color-background: #rgbify(@crust) []; - --color-foreground: #rgbify(@base) []; - --color-foreground-grey: #rgbify(@surface0) []; - --color-foreground-grey-dark: #rgbify(darken(@surface0, 5%)) []; - --color-foreground-blue: #rgbify(@mantle) []; - --color-foreground-blue-dark: #rgbify(@mantle) []; - --color-background-blue-dark: #rgbify(@subtext1) []; - --color-overlay: #rgbify(@surface0) []; - --color-shadow: #rgbify(@mantle) []; - --color-shadow-dark: #rgbify(darken(@text, 10%)) []; - --color-shadow-blue: #rgbify(@blue) []; - --color-text: #rgbify(@text) []; - --color-text-light: #rgbify(@subtext1) []; - --color-text-lighter: #rgbify(@subtext0) []; - --color-text-bright: #rgbify(@text) []; - --color-blue: #rgbify(@accent-color) []; - --color-white: 255, 255, 255; - --color-black: 0, 0, 0; - --color-red: #rgbify(@contrast-color) []; - --color-peach: #rgbify(@maroon) []; - --color-orange: #rgbify(@peach) []; - --color-yellow: #rgbify(@yellow) []; - --color-green: #rgbify(@green) []; - --color-background-1200: #rgbify(@text) []; - --color-background-1100: #rgbify(@text) []; - --color-background-1000: #rgbify(@text) []; - --color-background-900: #rgbify(@subtext1) []; - --color-background-800: #rgbify(@subtext0) []; - --color-background-700: #rgbify(@surface1) []; - --color-background-600: #rgbify(@surface0) []; - --color-background-500: #rgbify(@surface0) []; - --color-background-400: #rgbify(@surface0) []; - --color-background-300: #rgbify(@base) []; - --color-background-200: #rgbify(@mantle) []; - --color-background-100: #rgbify(@crust) []; - --color-gray-1200: #rgbify(@text) []; - --color-gray-1100: #rgbify(@text) []; - --color-gray-1000: #rgbify(@text) []; - --color-gray-900: #rgbify(@text) []; - --color-gray-800: #rgbify(@overlay2) []; - --color-gray-700: #rgbify(@overlay1) []; - --color-gray-600: #rgbify(@overlay0) []; - --color-gray-500: #rgbify(@surface2) []; - --color-gray-400: #rgbify(@surface1) []; - --color-gray-300: #rgbify(@surface0) []; - --color-gray-200: #rgbify(@mantle) []; - --color-gray-100: #rgbify(@crust) []; - --color-blue-100: #rgbify(@text) []; - --color-blue-200: #rgbify(@text) []; - --color-blue-300: #rgbify(@text) []; - --color-blue-400: #rgbify(@sapphire) []; - --color-blue-500: #rgbify(@sapphire) []; - --color-blue-600: #rgbify(@blue) []; - --color-blue-700: #rgbify(@blue) []; - --color-blue-800: #rgbify(@blue) []; - --color-blue-900: #rgbify(@blue) []; - --color-blue-1000: #rgbify(@blue) []; - --color-green-100: #rgbify(@teal) []; - --color-green-200: #rgbify(@green) []; - --color-green-300: #rgbify(@green) []; - --color-green-400: #rgbify(@green) []; - --color-green-500: #rgbify(@green) []; - --color-green-600: #rgbify(@green) []; - --color-green-700: #rgbify(@green) []; - --color-green-800: #rgbify(@green) []; - --color-red-100: #rgbify(@text) []; - --color-red-200: #rgbify(@flamingo) []; - --color-red-300: #rgbify(@maroon) []; - --color-red-400: #rgbify(@red) []; - --color-red-500: #rgbify(@red) []; - --color-red-600: #rgbify(@red) []; - --color-red-700: #rgbify(@red) []; - - & when not (@lookup =latte) { - --color-background: #rgbify(@crust) []; - --color-foreground: #rgbify(@base) []; - --color-foreground-grey: #rgbify(@surface0) []; - --color-foreground-grey-dark: #rgbify(darken(@surface0, 5%)) []; - --color-foreground-blue: #rgbify(@mantle) []; - --color-foreground-blue-dark: #rgbify(@mantle) []; - --color-text: #rgbify(@text) []; - --color-text-light: #rgbify(@subtext0) []; - --color-text-lighter: #rgbify(@subtext1) []; - --color-shadow-dark: #rgbify(@crust) []; - --color-shadow-blue: #rgbify(@crust) []; - --color-background-1200: #rgbify(@text) []; - --color-background-1100: #rgbify(@text) []; - --color-background-1000: #rgbify(@text) []; - --color-background-900: #rgbify(@subtext1) []; - --color-background-800: #rgbify(@subtext0) []; - --color-background-700: #rgbify(@surface1) []; - --color-background-600: #rgbify(@surface0) []; - --color-background-500: #rgbify(@surface0) []; - --color-background-400: #rgbify(@surface0) []; - --color-background-300: #rgbify(@base) []; - --color-background-200: #rgbify(@mantle) []; - --color-background-100: #rgbify(@crust) []; - --color-gray-1200: #rgbify(@text) []; - --color-gray-1100: #rgbify(@text) []; - --color-gray-1000: #rgbify(@text) []; - --color-gray-900: #rgbify(@text) []; - --color-gray-800: #rgbify(@overlay2) []; - --color-gray-700: #rgbify(@overlay1) []; - --color-gray-600: #rgbify(@overlay0) []; - --color-gray-500: #rgbify(@surface2) []; - --color-gray-400: #rgbify(@surface1) []; - --color-gray-300: #rgbify(@surface0) []; - --color-gray-200: #rgbify(@mantle) []; - --color-gray-100: #rgbify(@crust) []; - - --color-blue-dim: #rgbify(desaturate(darken(@accent-color, 10%), 10%)) []; - } - - /* DARK THEME NAV BAR */ - .nav-unscoped when not (@lookup =latte) { - background-color: @mantle; - } - .nav-unscoped.transparent when not (@lookup =latte) { - background-color: fade(@mantle, 50%); - } - .nav-unscoped.transparent:hover when not (@lookup =latte) { - background-color: @mantle; - color: @subtext0; - } - - /* -----------------PROFILE FIXES----------------- */ - #profileColor(@color) { - --color-blue: #rgbify(@color) []; - & when (@lookup =latte) { - --color-blue-dim: #rgbify(lighten(@color, 10%)) []; - } - & when not (@lookup =latte) { - --color-blue-dim: #rgbify(darken(@color, 10%)) []; - } - .progress .bar { - background: linear-gradient(270deg, darken(@color, 10%), @color); - } - } - .user-page-unscoped.orange { - #profileColor(@peach); - } - .user-page-unscoped.green { - #profileColor(@green); - } - .user-page-unscoped.purple { - #profileColor(@mauve); - } - .user-page-unscoped.red { - #profileColor(@red); - } - .user-page-unscoped.blue { - #profileColor(@blue); - } - .user-page-unscoped.pink { - #profileColor(@pink); - } - .user-page-unscoped.gray { - #profileColor(@overlay1); - } - .history-day { - --color-foreground-grey-dark: #rgbify(@crust) []; - } - .x-axis { - --color-background-300: #rgbify(@surface0) []; - } - /* Fixes gap between stats */ - @media (max-width: 1540px) { - .stats-wrap { - grid-row-gap: 25px; - } - } - - /* ----Tracking Status List Stuff---- */ - .list[data-v-5776f768] { - color: @mantle !important; - } - .media-card .list-status[status="Repeating"] { - background: @pink; - } - .banner .el-icon-arrow-down::before { - color: @text !important; - } - .el-textarea__inner::placeholder { - color: @overlay1; - } - .el-dropdown-menu, - .el-dropdown-menu__item--divided::before, - .el-select-dropdown { - background-color: @surface0 !important; - } - .el-popper[x-placement^="bottom"] .popper__arrow::after, - .el-popper[x-placement^="bottom"] .popper__arrow, - .el-tooltip__popper[x-placement^="bottom"] .popper__arrow::after, - .el-tooltip__popper[x-placement^="bottom"] .popper__arrow { - border-bottom-color: @surface0; - } - .el-popper[x-placement^="top"] .popper__arrow::after, - .el-popper[x-placement^="top"] .popper__arrow, - .el-tooltip__popper[x-placement^="top"] .popper__arrow, - .el-tooltip__popper[x-placement^="top"] .popper__arrow::after { - border-top-color: @surface0; - } - .el-dropdown .feed-filter { - color: @overlay0; - } - .el-dropdown-menu { - border-color: @text !important; - } - .el-dropdown-menu__item--divided when not (@lookup =latte) { - border-top-color: @surface1; - } - .el-select-dropdown__item.hover, - .el-select-dropdown__item:hover { - background-color: @base; - } - .el-select-dropdown__item.selected { - color: @accent-color; - } - .el-tooltip__popper.is-dark { - background: @surface0; - color: @text; - } - .tooltip > div { - --color-white: #rgbify(@text) []; - } - .dropdown { - --color-gray-100: #rgbify(@base) []; - --color-background-100: #rgbify(@base) []; - --color-background-200: #rgbify(@mantle) []; - } - .medialist .notes { - --color-overlay: #rgbify(@surface0) []; - } - .el-input__inner::placeholder, - .el-input__prefix { - color: @overlay1; - } - .el-picker-panel { - color: @text; - background-color: @surface0; - border-color: @surface1; - } - .el-date-table th { - color: @overlay1; - border-bottom-color: @surface1; - } - .el-date-picker__header-label { - color: @subtext0; - - &:hover { - color: @accent-color; - } - } - .el-picker-panel__icon-btn { - color: @overlay1; - - &:hover { - color: @accent-color; - } - } - .el-date-table td.available:hover { - color: @accent-color; - } - .el-date-table td.current:not(.disabled) span { - color: @crust; - background-color: @accent-color; - } - .el-date-table td.next-month, - .el-date-table td.prev-month { - color: @surface2; - } - - /* ---------SCORE TWEAKS-------------- */ - .score[data-v-5ca094da] { - color: @base; - } - - /* --------------FOOTER--------------- */ - .footer[data-v-0f519cab] { - background: @text; - color: @crust; - - h2 { - color: rgb(var(--color-blue)); - } - - & when (@lookup =latte) { - --color-blue: #rgbify(lighten(@accent-color, 30%)) []; - } - - & when not (@lookup =latte) { - background: @mantle; - color: @subtext0; - } - } - - /* ------------------SEARCH PAGES------------------ */ - .search, - .expand-description, - .studio { - --color-background-200: #rgbify(@crust) []; - } - .search-wrap, - .filters, - .extra-filters-wrap, - .select, - .options { - --color-background-100: #rgbify(@base) []; - } - .filter.select-wrap .options { - --color-background-100: #rgbify(@mantle) []; - } - - /* ------------------MISC EDITS-------------------- */ - .list-editor-wrap .header::after { - background: fade(@mantle, 50%); - } - .filter.clear-all { - --color-background-500: #rgbify(@overlay1) []; - } - /* --Reset button in notifications----- */ - .reset-btn { - color: @base !important; - } - /* Publish Button in Replies and Messages */ - .save { - color: @base !important; - } - .el-radio { - color: @overlay1; - } - /* Mod Stuff */ - .el-color-dropdown__link-btn { - color: @accent-color; - } - .el-color-picker__color { - border-color: @surface1; - } - .el-color-picker__panel { - background-color: @surface0; - border-color: @surface1; - } - .el-color-dropdown__btn { - border-color: @surface2; - color: @subtext1; - - &:hover { - background-color: transparent; - border-color: @accent-color; - color: @accent-color; - } - } - /* Accent Text */ - .input .hint { - --color-white: #rgbify(@text) []; - } - .el-checkbox__input.is-checked + .el-checkbox__label { - color: @accent-color; - } - .button, - .option.active, - .new-badge, - .submissions .user .stats > div, - .actions .icon, - .submissions .status, - .adult-label, - .header .btn, - .media-tag-editor .btn, - [data-v-843c77a2] .btn, - [data-v-22855988] .btn, - .btn[data-v-156b3973], - .btn[data-v-dceb4a66], - .favourite-btn, - .dialog .btn, - .tag, - .filter, - .media .header div, - .list-editor-wrap .header .save-btn, - .actions > div:not(.donator-badge), - .banner-content .mod-badge-wrap, - .external-link.no-color, - .count.circle, - .el-dropdown-menu__item, - .delete, - .list-editor-wrap .list-editor .body .delete-btn, - .open-user-search, - .save-btn { - & when not (@lookup =latte) { - --color-white: #rgbify(@crust) []; - } - } - .button.comment, - .settings .button, - .el-message-box .el-button--primary, - .mod-badge-wrap, - .medialist.cards .entry-card .edit { - & when not (@lookup =latte) { - --color-text-bright: #rgbify(@crust) []; - } - } - .submit-btn, - .random-btn { - & when not (@lookup =latte) { - color: @crust; - } - } - .user .notification-dot, - .create-btn { - & when not (@lookup =latte) { - color: @crust !important; - } - } - .el-radio__inner::after { - & when not (@lookup =latte) { - background-color: @crust; - } - } - .icon, - .check { - & when not (@lookup =latte) { - --color-blue-300: #rgbify(@crust) []; - } - } - .settings .button { - & when (@lookup =latte) { - --color-text-bright: #rgbify(#fff) []; - } - } - /* ------------IMAGE COVER------------ */ - .cover .image-text, - .plus-progress { - color: @text !important; - } - - .entry .plus-progress, - .medialist.table .entry .edit { - color: @base !important; - } - /* --------SETTINGS-------- */ - .el-radio__inner when not (@lookup =latte) { - background-color: @text; - } - .el-checkbox__input.is-checked .el-checkbox__inner, - .el-radio__input.is-checked .el-radio__inner { - background-color: @accent-color; - border-color: @accent-color; - } - .el-checkbox__inner::after { - border-color: @crust; - border-width: 2px; - left: 3px; - } - .el-radio__input.is-checked + .el-radio__label { - color: @accent-color; - } - /* --------HIDE SCROLLBAR IN BIO----- */ - .section::-webkit-scrollbar { - display: none; - } - .section { - -ms-overflow-style: none; - scrollbar-width: none; - } - /* --------REMOVE DROPDOWN SHADOWS----- */ - .dropdown.dropdown { - box-shadow: none; - } - /* ---------ANILIST LIKER PLUGIN------ */ - #AnilistLikerPlugin .btntop { - margin-bottom: -4px; - margin-top: 5px; - } - #AnilistLikerPlugin .btnbottom { - margin-top: -2px; - } - /* ---------AUTOMAIL TWEAKS--------- */ - .hohMediaScore { - border-color: @surface0; - padding: 4px; - border-radius: 10px; - margin-left: 0; - background-color: @base; - color: @accent-color; - } - .activity-feed .hohNoteSuffix:not(:empty), - .activity-feed .hohRewatchSuffix:not(:empty), - .activity-feed .hohScore:not(.hohSmiley), - .hohFeedScore .hohScore { - border-radius: 5px; - padding: 2.5px 5px 1px !important; - color: @subtext1 !important; - background-color: @surface0; - - &:not(:first-of-type) { - margin: 3px; - } - } - .activity-feed .hohRewatchSuffix:not(:empty) { - padding-left: 2px !important; - } - .hohExtraFilters button { - margin-bottom: 20px; - } - .filter-group.compare-btn, - .hohButton { - color: @base; - } - .hohButton, - .hohCheckbox input:checked + .el-checkbox__inner { - background-color: @accent-color; - } - .hohCheckbox input:checked + .el-checkbox__inner { - border-color: @accent-color; - } - .medialist.table .entry:hover, - .medialist.table .entry .title a:hover, - .compare-btn[data-v-170179fc]:hover { - color: @base; - } - .hohCompare table { - background-color: @crust; - } - .hohAnimeTable, - .hohAnimeTable td, - .hohUserRow td, - .hohUserRow th, - .hohHeaderRow td, - .hohHeaderRow th { - border-color: @surface0 !important; - } - .hohUserRow td { - border-top-color: @surface0 !important; - } - .hohUserRow tr { - border-right-color: @surface0 !important; - } - hr { - color: @surface0; - } - .hohCheckbox - input:checked - + .el-checkbox__inner - .like-wrap.thread - .button.liked - .fa-heart, - .actions .favourite.liked .fa-heart, - .like-wrap.thread .button.isFavourite .fa-heart, - .actions .favourite.isFavourite .fa-heart, - .actions .favourite { - & when not (@lookup =latte) { - --color-white: #rgbify(@crust) []; - } - } - } -} - -@-moz-document domain("anichart.net") { - body:not(.site-theme-dark) { - #catppuccin(@lightFlavor, @accentColor); - } - .site-theme-dark { - #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][@@accentColor]; - @contrast-color: @catppuccin[@@lookup][@@contrastColor]; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - .login[data-v-0d5bfbcd], - .login[data-v-0d5bfbcd]:hover { - color: @base; - } - - [fill="#3db4f2" i] { - fill: @accent !important; - } - - & when not (@lookup =latte) { - .nav { - background: @mantle; - } - - .external-link { - background: @surface1; - - [stroke="#fff" i] { - stroke: @text !important; - } - } - - .external-link .icon, - .dropdown-menu:hover { - --color-white: #rgbify(@crust) []; - } - - [fill="#fff" i] { - fill: @crust !important; - } - } - - & when (@lookup =latte) { - --color-overlay: #rgbify(@text) []; - - .external-link { - background: @subtext0; - } - - .nav { - background: @text; - } - - a.title { - --color-white: #rgbify(@base) []; - } - } - } -} - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/anilist/catppuccin.user.less b/styles/anilist/catppuccin.user.less new file mode 100644 index 0000000000..287c81ceb5 --- /dev/null +++ b/styles/anilist/catppuccin.user.less @@ -0,0 +1,758 @@ +/* ==UserStyle== +@name AniList/AniChart Catppuccin +@namespace github.com/catppuccin/userstyles/styles/anilist +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/anilist +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/anilist/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aanilist +@description Soothing pastel theme for AniList and AniChart +@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"] + +@var select contrastColor "Contrast Color" ["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("anilist.co"), domain("anichart.net") { + body:not(.site-theme-dark) { + #catppuccin(@lightFlavor, @accentColor); + } + .site-theme-dark { + #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]; + + @contrast-color: @catppuccin[@@lookup][@@contrastColor]; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + & when (@lookup = latte) { + --color-blue-dim: #rgbify(desaturate(lighten(@accent-color, 10%), 10%))[]; + + .nav[data-v-62eacfff], + .solid[data-v-62eacfff], + .transparent[data-v-62eacfff]:hover { + background: darken(@text, 10%); + color: @base; + } + + .nav-unscoped.transparent { + background: fade(darken(@text, 10%), 50%); + } + + .banner-content .name { + --color-text-bright: #rgbify(#fff)[]; + } + } + + --color-background: #rgbify(@crust)[]; + --color-foreground: #rgbify(@base)[]; + --color-foreground-grey: #rgbify(@surface0)[]; + --color-foreground-grey-dark: #rgbify(darken(@surface0, 5%))[]; + --color-foreground-blue: #rgbify(@mantle)[]; + --color-foreground-blue-dark: #rgbify(@mantle)[]; + --color-background-blue-dark: #rgbify(@subtext1)[]; + --color-overlay: #rgbify(@surface0)[]; + --color-shadow: #rgbify(@mantle)[]; + --color-shadow-dark: #rgbify(darken(@text, 10%))[]; + --color-shadow-blue: #rgbify(@blue)[]; + --color-text: #rgbify(@text)[]; + --color-text-light: #rgbify(@subtext1)[]; + --color-text-lighter: #rgbify(@subtext0)[]; + --color-text-bright: #rgbify(@text)[]; + --color-blue: #rgbify(@accent-color)[]; + --color-white: 255, 255, 255; + --color-black: 0, 0, 0; + --color-red: #rgbify(@contrast-color)[]; + --color-peach: #rgbify(@maroon)[]; + --color-orange: #rgbify(@peach)[]; + --color-yellow: #rgbify(@yellow)[]; + --color-green: #rgbify(@green)[]; + --color-background-1200: #rgbify(@text)[]; + --color-background-1100: #rgbify(@text)[]; + --color-background-1000: #rgbify(@text)[]; + --color-background-900: #rgbify(@subtext1)[]; + --color-background-800: #rgbify(@subtext0)[]; + --color-background-700: #rgbify(@surface1)[]; + --color-background-600: #rgbify(@surface0)[]; + --color-background-500: #rgbify(@surface0)[]; + --color-background-400: #rgbify(@surface0)[]; + --color-background-300: #rgbify(@base)[]; + --color-background-200: #rgbify(@mantle)[]; + --color-background-100: #rgbify(@crust)[]; + --color-gray-1200: #rgbify(@text)[]; + --color-gray-1100: #rgbify(@text)[]; + --color-gray-1000: #rgbify(@text)[]; + --color-gray-900: #rgbify(@text)[]; + --color-gray-800: #rgbify(@overlay2)[]; + --color-gray-700: #rgbify(@overlay1)[]; + --color-gray-600: #rgbify(@overlay0)[]; + --color-gray-500: #rgbify(@surface2)[]; + --color-gray-400: #rgbify(@surface1)[]; + --color-gray-300: #rgbify(@surface0)[]; + --color-gray-200: #rgbify(@mantle)[]; + --color-gray-100: #rgbify(@crust)[]; + --color-blue-100: #rgbify(@text)[]; + --color-blue-200: #rgbify(@text)[]; + --color-blue-300: #rgbify(@text)[]; + --color-blue-400: #rgbify(@sapphire)[]; + --color-blue-500: #rgbify(@sapphire)[]; + --color-blue-600: #rgbify(@blue)[]; + --color-blue-700: #rgbify(@blue)[]; + --color-blue-800: #rgbify(@blue)[]; + --color-blue-900: #rgbify(@blue)[]; + --color-blue-1000: #rgbify(@blue)[]; + --color-green-100: #rgbify(@teal)[]; + --color-green-200: #rgbify(@green)[]; + --color-green-300: #rgbify(@green)[]; + --color-green-400: #rgbify(@green)[]; + --color-green-500: #rgbify(@green)[]; + --color-green-600: #rgbify(@green)[]; + --color-green-700: #rgbify(@green)[]; + --color-green-800: #rgbify(@green)[]; + --color-red-100: #rgbify(@text)[]; + --color-red-200: #rgbify(@flamingo)[]; + --color-red-300: #rgbify(@maroon)[]; + --color-red-400: #rgbify(@red)[]; + --color-red-500: #rgbify(@red)[]; + --color-red-600: #rgbify(@red)[]; + --color-red-700: #rgbify(@red)[]; + + & when not(@lookup = latte) { + --color-background: #rgbify(@crust)[]; + --color-foreground: #rgbify(@base)[]; + --color-foreground-grey: #rgbify(@surface0)[]; + --color-foreground-grey-dark: #rgbify(darken(@surface0, 5%))[]; + --color-foreground-blue: #rgbify(@mantle)[]; + --color-foreground-blue-dark: #rgbify(@mantle)[]; + --color-text: #rgbify(@text)[]; + --color-text-light: #rgbify(@subtext0)[]; + --color-text-lighter: #rgbify(@subtext1)[]; + --color-shadow-dark: #rgbify(@crust)[]; + --color-shadow-blue: #rgbify(@crust)[]; + --color-background-1200: #rgbify(@text)[]; + --color-background-1100: #rgbify(@text)[]; + --color-background-1000: #rgbify(@text)[]; + --color-background-900: #rgbify(@subtext1)[]; + --color-background-800: #rgbify(@subtext0)[]; + --color-background-700: #rgbify(@surface1)[]; + --color-background-600: #rgbify(@surface0)[]; + --color-background-500: #rgbify(@surface0)[]; + --color-background-400: #rgbify(@surface0)[]; + --color-background-300: #rgbify(@base)[]; + --color-background-200: #rgbify(@mantle)[]; + --color-background-100: #rgbify(@crust)[]; + --color-gray-1200: #rgbify(@text)[]; + --color-gray-1100: #rgbify(@text)[]; + --color-gray-1000: #rgbify(@text)[]; + --color-gray-900: #rgbify(@text)[]; + --color-gray-800: #rgbify(@overlay2)[]; + --color-gray-700: #rgbify(@overlay1)[]; + --color-gray-600: #rgbify(@overlay0)[]; + --color-gray-500: #rgbify(@surface2)[]; + --color-gray-400: #rgbify(@surface1)[]; + --color-gray-300: #rgbify(@surface0)[]; + --color-gray-200: #rgbify(@mantle)[]; + --color-gray-100: #rgbify(@crust)[]; + + --color-blue-dim: #rgbify(desaturate(darken(@accent-color, 10%), 10%))[]; + } + + /* DARK THEME NAV BAR */ + .nav-unscoped when not(@lookup = latte) { + background-color: @mantle; + } + .nav-unscoped.transparent when not(@lookup = latte) { + background-color: fade(@mantle, 50%); + } + .nav-unscoped.transparent:hover when not(@lookup = latte) { + background-color: @mantle; + color: @subtext0; + } + + /* -----------------PROFILE FIXES----------------- */ + #profileColor(@color) { + --color-blue: #rgbify(@color)[]; + & when (@lookup = latte) { + --color-blue-dim: #rgbify(lighten(@color, 10%))[]; + } + & when not(@lookup = latte) { + --color-blue-dim: #rgbify(darken(@color, 10%))[]; + } + .progress .bar { + background: linear-gradient(270deg, darken(@color, 10%), @color); + } + } + .user-page-unscoped.orange { + #profileColor(@peach); + } + .user-page-unscoped.green { + #profileColor(@green); + } + .user-page-unscoped.purple { + #profileColor(@mauve); + } + .user-page-unscoped.red { + #profileColor(@red); + } + .user-page-unscoped.blue { + #profileColor(@blue); + } + .user-page-unscoped.pink { + #profileColor(@pink); + } + .user-page-unscoped.gray { + #profileColor(@overlay1); + } + .history-day { + --color-foreground-grey-dark: #rgbify(@crust)[]; + } + .x-axis { + --color-background-300: #rgbify(@surface0)[]; + } + /* Fixes gap between stats */ + @media (max-width: 1540px) { + .stats-wrap { + grid-row-gap: 25px; + } + } + + /* ----Tracking Status List Stuff---- */ + .list[data-v-5776f768] { + color: @mantle !important; + } + .media-card .list-status[status="Repeating"] { + background: @pink; + } + .banner .el-icon-arrow-down::before { + color: @text !important; + } + .el-textarea__inner::placeholder { + color: @overlay1; + } + .el-dropdown-menu, + .el-dropdown-menu__item--divided::before, + .el-select-dropdown { + background-color: @surface0 !important; + } + .el-popper[x-placement^="bottom"] .popper__arrow::after, + .el-popper[x-placement^="bottom"] .popper__arrow, + .el-tooltip__popper[x-placement^="bottom"] .popper__arrow::after, + .el-tooltip__popper[x-placement^="bottom"] .popper__arrow { + border-bottom-color: @surface0; + } + .el-popper[x-placement^="top"] .popper__arrow::after, + .el-popper[x-placement^="top"] .popper__arrow, + .el-tooltip__popper[x-placement^="top"] .popper__arrow, + .el-tooltip__popper[x-placement^="top"] .popper__arrow::after { + border-top-color: @surface0; + } + .el-dropdown .feed-filter { + color: @overlay0; + } + .el-dropdown-menu { + border-color: @text !important; + } + .el-dropdown-menu__item--divided when not(@lookup = latte) { + border-top-color: @surface1; + } + .el-select-dropdown__item.hover, + .el-select-dropdown__item:hover { + background-color: @base; + } + .el-select-dropdown__item.selected { + color: @accent-color; + } + .el-tooltip__popper.is-dark { + background: @surface0; + color: @text; + } + .tooltip > div { + --color-white: #rgbify(@text)[]; + } + .dropdown { + --color-gray-100: #rgbify(@base)[]; + --color-background-100: #rgbify(@base)[]; + --color-background-200: #rgbify(@mantle)[]; + } + .medialist .notes { + --color-overlay: #rgbify(@surface0)[]; + } + .el-input__inner::placeholder, + .el-input__prefix { + color: @overlay1; + } + .el-picker-panel { + color: @text; + background-color: @surface0; + border-color: @surface1; + } + .el-date-table th { + color: @overlay1; + border-bottom-color: @surface1; + } + .el-date-picker__header-label { + color: @subtext0; + + &:hover { + color: @accent-color; + } + } + .el-picker-panel__icon-btn { + color: @overlay1; + + &:hover { + color: @accent-color; + } + } + .el-date-table td.available:hover { + color: @accent-color; + } + .el-date-table td.current:not(.disabled) span { + color: @crust; + background-color: @accent-color; + } + .el-date-table td.next-month, + .el-date-table td.prev-month { + color: @surface2; + } + + /* ---------SCORE TWEAKS-------------- */ + .score[data-v-5ca094da] { + color: @base; + } + + /* --------------FOOTER--------------- */ + .footer[data-v-0f519cab] { + background: @text; + color: @crust; + + h2 { + color: rgb(var(--color-blue)); + } + + & when (@lookup = latte) { + --color-blue: #rgbify(lighten(@accent-color, 30%))[]; + } + + & when not(@lookup = latte) { + background: @mantle; + color: @subtext0; + } + } + + /* ------------------SEARCH PAGES------------------ */ + .search, + .expand-description, + .studio { + --color-background-200: #rgbify(@crust)[]; + } + .search-wrap, + .filters, + .extra-filters-wrap, + .select, + .options { + --color-background-100: #rgbify(@base)[]; + } + .filter.select-wrap .options { + --color-background-100: #rgbify(@mantle)[]; + } + + /* ------------------MISC EDITS-------------------- */ + .list-editor-wrap .header::after { + background: fade(@mantle, 50%); + } + .filter.clear-all { + --color-background-500: #rgbify(@overlay1)[]; + } + /* --Reset button in notifications----- */ + .reset-btn { + color: @base !important; + } + /* Publish Button in Replies and Messages */ + .save { + color: @base !important; + } + .el-radio { + color: @overlay1; + } + /* Mod Stuff */ + .el-color-dropdown__link-btn { + color: @accent-color; + } + .el-color-picker__color { + border-color: @surface1; + } + .el-color-picker__panel { + background-color: @surface0; + border-color: @surface1; + } + .el-color-dropdown__btn { + border-color: @surface2; + color: @subtext1; + + &:hover { + background-color: transparent; + border-color: @accent-color; + color: @accent-color; + } + } + /* Accent Text */ + .input .hint { + --color-white: #rgbify(@text)[]; + } + .el-checkbox__input.is-checked + .el-checkbox__label { + color: @accent-color; + } + .button, + .option.active, + .new-badge, + .submissions .user .stats > div, + .actions .icon, + .submissions .status, + .adult-label, + .header .btn, + .media-tag-editor .btn, + [data-v-843c77a2] .btn, + [data-v-22855988] .btn, + .btn[data-v-156b3973], + .btn[data-v-dceb4a66], + .favourite-btn, + .dialog .btn, + .tag, + .filter, + .media .header div, + .list-editor-wrap .header .save-btn, + .actions > div:not(.donator-badge), + .banner-content .mod-badge-wrap, + .external-link.no-color, + .count.circle, + .el-dropdown-menu__item, + .delete, + .list-editor-wrap .list-editor .body .delete-btn, + .open-user-search, + .save-btn { + & when not(@lookup = latte) { + --color-white: #rgbify(@crust)[]; + } + } + .button.comment, + .settings .button, + .el-message-box .el-button--primary, + .mod-badge-wrap, + .medialist.cards .entry-card .edit { + & when not(@lookup = latte) { + --color-text-bright: #rgbify(@crust)[]; + } + } + .submit-btn, + .random-btn { + & when not(@lookup = latte) { + color: @crust; + } + } + .user .notification-dot, + .create-btn { + & when not(@lookup = latte) { + color: @crust !important; + } + } + .el-radio__inner::after { + & when not(@lookup = latte) { + background-color: @crust; + } + } + .icon, + .check { + & when not(@lookup = latte) { + --color-blue-300: #rgbify(@crust)[]; + } + } + .settings .button { + & when (@lookup = latte) { + --color-text-bright: #rgbify(#fff)[]; + } + } + /* ------------IMAGE COVER------------ */ + .cover .image-text, + .plus-progress { + color: @text !important; + } + + .entry .plus-progress, + .medialist.table .entry .edit { + color: @base !important; + } + /* --------SETTINGS-------- */ + .el-radio__inner when not(@lookup = latte) { + background-color: @text; + } + .el-checkbox__input.is-checked .el-checkbox__inner, + .el-radio__input.is-checked .el-radio__inner { + background-color: @accent-color; + border-color: @accent-color; + } + .el-checkbox__inner::after { + border-color: @crust; + border-width: 2px; + left: 3px; + } + .el-radio__input.is-checked + .el-radio__label { + color: @accent-color; + } + /* --------HIDE SCROLLBAR IN BIO----- */ + .section::-webkit-scrollbar { + display: none; + } + .section { + -ms-overflow-style: none; + scrollbar-width: none; + } + /* --------REMOVE DROPDOWN SHADOWS----- */ + .dropdown.dropdown { + box-shadow: none; + } + /* ---------ANILIST LIKER PLUGIN------ */ + #AnilistLikerPlugin .btntop { + margin-bottom: -4px; + margin-top: 5px; + } + #AnilistLikerPlugin .btnbottom { + margin-top: -2px; + } + /* ---------AUTOMAIL TWEAKS--------- */ + .hohMediaScore { + border-color: @surface0; + padding: 4px; + border-radius: 10px; + margin-left: 0; + background-color: @base; + color: @accent-color; + } + .activity-feed .hohNoteSuffix:not(:empty), + .activity-feed .hohRewatchSuffix:not(:empty), + .activity-feed .hohScore:not(.hohSmiley), + .hohFeedScore .hohScore { + border-radius: 5px; + padding: 2.5px 5px 1px !important; + color: @subtext1 !important; + background-color: @surface0; + + &:not(:first-of-type) { + margin: 3px; + } + } + .activity-feed .hohRewatchSuffix:not(:empty) { + padding-left: 2px !important; + } + .hohExtraFilters button { + margin-bottom: 20px; + } + .filter-group.compare-btn, + .hohButton { + color: @base; + } + .hohButton, + .hohCheckbox input:checked + .el-checkbox__inner { + background-color: @accent-color; + } + .hohCheckbox input:checked + .el-checkbox__inner { + border-color: @accent-color; + } + .medialist.table .entry:hover, + .medialist.table .entry .title a:hover, + .compare-btn[data-v-170179fc]:hover { + color: @base; + } + .hohCompare table { + background-color: @crust; + } + .hohAnimeTable, + .hohAnimeTable td, + .hohUserRow td, + .hohUserRow th, + .hohHeaderRow td, + .hohHeaderRow th { + border-color: @surface0 !important; + } + .hohUserRow td { + border-top-color: @surface0 !important; + } + .hohUserRow tr { + border-right-color: @surface0 !important; + } + hr { + color: @surface0; + } + .hohCheckbox + input:checked + + .el-checkbox__inner + .like-wrap.thread + .button.liked + .fa-heart, + .actions .favourite.liked .fa-heart, + .like-wrap.thread .button.isFavourite .fa-heart, + .actions .favourite.isFavourite .fa-heart, + .actions .favourite { + & when not(@lookup = latte) { + --color-white: #rgbify(@crust)[]; + } + } + } +} + +@-moz-document domain("anichart.net") { + body:not(.site-theme-dark) { + #catppuccin(@lightFlavor, @accentColor); + } + .site-theme-dark { + #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][@@accentColor]; + @contrast-color: @catppuccin[@@lookup][@@contrastColor]; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + .login[data-v-0d5bfbcd], + .login[data-v-0d5bfbcd]:hover { + color: @base; + } + + [fill="#3db4f2" i] { + fill: @accent !important; + } + + & when not(@lookup = latte) { + .nav { + background: @mantle; + } + + .external-link { + background: @surface1; + + [stroke="#fff" i] { + stroke: @text !important; + } + } + + .external-link .icon, + .dropdown-menu:hover { + --color-white: #rgbify(@crust)[]; + } + + [fill="#fff" i] { + fill: @crust !important; + } + } + + & when (@lookup = latte) { + --color-overlay: #rgbify(@text)[]; + + .external-link { + background: @subtext0; + } + + .nav { + background: @text; + } + + a.title { + --color-white: #rgbify(@base)[]; + } + } + } +} + +#rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/arch-wiki/catppuccin.user.css b/styles/arch-wiki/catppuccin.user.css index 318cf43d73..8787cac059 100644 --- a/styles/arch-wiki/catppuccin.user.css +++ b/styles/arch-wiki/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Arch Wiki Catppuccin +@name Arch Wiki Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/arch-wiki @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/arch-wiki -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/arch-wiki/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/arch-wiki/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aarch-wiki @description Soothing pastel theme for Arch Wiki @author Catppuccin @@ -13,520 +13,4 @@ @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('wiki.archlinux.org') { - @media (prefers-color-scheme: dark) { - :root { - #catppuccin(@darkFlavor, @accentColor); - } - } - @media (prefers-color-scheme: light) { - :root { - #catppuccin(@lightFlavor, @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; - } - } - - #content table, - #content h1, - #content h2, - #content h3, - #content h4, - #content h5, - #content pre, - #content code, - #content tt { - color: @text !important; - } - - body.skin-vector-2022 .vector-sticky-header { - color: @text !important; - background-color: @mantle !important; - border-bottom-color: @blue !important; - } - - #vector-main-menu-pinned-container, - #vector-page-tools-pinned-container { - background-color: @base !important; - } - - #ooui-php-191, - #preferences .mw-htmlform-submit-buttons { - background-color: @mantle !important; - } - - .mw-echo-ui-notificationItemWidget-content-message-header, - .oo-ui-labelElement-label { - color: @text !important; - } - - .oo-ui-optionWidget-selected { - background-color: @surface2 !important; - } - - .oo-ui-buttonElement-framed.oo-ui-widget-disabled - > .oo-ui-buttonElement-button { - background-color: @surface0 !important; - color: @text !important; - border-color: @surface2 !important; - filter: brightness(0.4); - cursor: not-allowed; - } - - .mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(even) td { - background-color: @surface1 !important; - } - - .mw-htmlform-ooui .mw-htmlform-matrix tbody tr:hover td { - background-color: @surface2 !important; - } - - .mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(odd) td, - .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled - .oo-ui-tagMultiselectWidget-handle, - .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined - .oo-ui-tagItemWidget.oo-ui-widget-enabled, - .mw-rcfilters-ui-cell.mw-rcfilters-ui-filterTagMultiselectWidget-views-select, - .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, - .oo-ui-popupWidget-popup, - .mw-echo-ui-notificationItemWidget, - .mw-echo-ui-placeholderItemWidget { - background-color: @surface0 !important; - } - - .mw-echo-ui-notificationsInboxWidget-toolbarWrapper { - background-color: @base !important; - } - - #archnavbar { - background-color: @mantle !important; - border-bottom-color: @blue !important; - } - .mw-parser-output { - background-color: @base !important; - } - - .mw-page-container { - background-color: @base !important; - } - - .vector-header-container { - background-color: @base !important; - } - - #content, - header.mw-header li:not(.new), - #mw-panel-toc, - #mw-navigation li:not(.new), - #mw-panel li:not(.new), - #column-one li:not(.new), - #footer { - a:not([role="button"], .new) { - color: @blue !important; - } - } - - @media screen { - html.client-darkmode { - background-color: @base; - } - } - - .vector-feature-zebra-design-disabled, - body { - background-color: @base; - } - - #archnavbarlogo { - @svg: escape( - '' - ); - background: url("data:image/svg+xml,@{svg}") !important; - background-size: 190px 40px !important; - } - .cdx-text-input__input:enabled:focus { - border-color: @blue; - box-shadow: @blue !important; - } - - .archwiki-template-box-tip { - background-color: fadeout(hsla(90, 90%, 65%, 0.3), 10%) !important; - border-color: fadeout(hsla(90, 90%, 75%, 0.3), 10%); - color: @subtext1; - } - - .archwiki-template-box-note { - background-color: fadeout(hsla(208, 100%, 61%, 0.3), 5%) !important; - border-color: fadeout(hsla(208, 100%, 81%, 0.3), 5%) !important; - color: @subtext1; - } - - .archwiki-template-box-warning { - background-color: fadeout(hsla(7, 99%, 60%, 0.3), 5%) !important; - border-color: fadeout(hsla(7, 99%, 80%, 0.3), 05%) !important; - color: @subtext1; - } - - .firstHeading { - color: @accent-color !important; - } - - #content { - border-color: @overlay0; - } - - #content pre:not([class*="CodeMirror"]), - #content code, - #content tt { - background-color: @surface0; - color: @text; - border-color: @overlay0; - } - - .vector-pinned-container { - border-color: @overlay0 !important; - } - - .vector-pinnable-header-label { - color: @text; - } - - .vector-pinnable-header-toggle-button, - .vector-pinnable-header-unpin-button { - color: @mantle; - background-color: @accent-color; - border-color: @base; - } - - .wikitable { - background-color: @base; - } - - .wikitable > tr > th, - .wikitable > tr > td, - .wikitable > * > tr > th, - .wikitable > * > tr > td { - color: @text; - border-color: @crust; - } - - .wikitable > tr > th, - .wikitable > * > tr > th { - background-color: @mantle; - color: @text; - } - - .pre { - color: @mantle; - } - - .mw-headline { - color: @text; - } - - .plainlinks, - .archwiki-template-man, - .external text { - color: multiply(@blue, #555); - } - - .cdx-button:enabled.cdx-button--weight-quiet, - .cdx-button.cdx-button--fake-button--enabled, - .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet, - .diff-context, - .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle, - .oo-ui-checkboxInputWidget [type="checkbox"] + span { - background-color: @surface0; - color: @text; - border-color: @surface2; - } - - .vector-feature-zebra-design-disabled, - #contentSub:not(:empty) { - color: @surface0 !important; - } - - .mw-editfont-monospace { - background-color: @surface0; - color: @text; - border-color: @surface1; - } - - .diff-deletedline, - .mw-message-box-warning { - background-color: @yellow; - color: @mantle; - } - - .diff-addedline { - background-color: @sky; - color: @mantle; - } - - .mw-message-box-error { - background-color: @flamingo; - border-color: @red; - color: @base; - } - - .mw-number-text { - color: @text; - } - - .cdx-checkbox__icon { - background-color: @surface0; - } - - .oo-ui-checkboxInputWidget.oo-ui-widget-enabled - [type="checkbox"]:checked - + span, - .cdx-checkbox__input:enabled:checked + .cdx-checkbox__icon, - .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive { - background-color: @blue; - border-color: @sapphire; - color: @mantle !important; - } - - .vector-feature-zebra-design-disabled, - #vector-toc-pinned-container, - .vector-toc::after { - background: linear-gradient(rgba(255, 255, 255, 0), @base) !important; - } - - #archnavbar ul li.anb-selected a { - color: @accent-color !important; - } - - .archwiki-template-message { - background-color: @base; - } - - .catlinks { - background-color: @mantle; - } - - .mw-parser-output p { - color: @text !important; - } - - .archwiki-template-meta-related-articles { - background-color: @surface0; - } - - .archwiki-template-meta-related-articles p { - color: @text; - border-bottom-color: @blue; - } - - .archwiki-template-meta-related-articles ul li a { - color: @blue important; - } - - .mw-plusminus-neg, - a.new { - color: @red !important; - } - - .mw-plusminus-pos { - color: @green; - } - - .mw-plusminus-null { - color: @subtext0; - } - - .oo-ui-textInputWidget .oo-ui-inputWidget-input, - .mw-widget-dateInputWidget-handle, - .oo-ui-buttonElement-framed.oo-ui-widget-enabled - > .oo-ui-buttonElement-button, - #pagehistory li.selected { - background-color: @surface0 !important; - color: @text !important; - border-color: @surface2 !important; - } - - .oo-ui-menuSelectWidget { - background-color: @surface0; - border-color: @surface2; - } - - .oo-ui-OptionWidget-highlighted { - background-color: @overlay0 !important; - } - - .oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget, - .minoredit, - .comment { - color: @text; - } - - .mw-footer-container { - color: @text !important; - } - - #archnavbarlist li a { - color: @blue !important; - } - - .anb-selected { - color: @subtext1 !important; - } - - .mw-footer li { - color: @text; - } - - .vector-main-menu, - .vector-pinnable-element { - background-color: @base !important; - } - - #p-navigation ul li a { - color: @blue !important; - } - - .archwiki-template-box-note a { - color: @blue !important; - } - - .archwiki-template-box-note a:visited { - color: @mauve !important; - } - - .mw-page-title-main { - color: @text; - } - - .vector-tab-noicon mw-list-item a { - color: @blue; - } - - .mw-header { - background-color: @base !important; - color: @text; - } - - .mw-footer li a { - color: @blue; - } - - .cdx-text-input__input:enabled { - background-color: @surface0 !important; - color: @text !important; - border-color: @surface1; - } - - .cdx-button:enabled, - .cdx-button.cdxbutton--fake-button--enabled { - color: @mantle; - background-color: @accent-color; - border-color: @base; - } - - .cdx-menu { - background-color: @surface0; - } - - .cdx-menu:hover { - background-color: @base !important; - } - - .anb-home { - color: @text !important; - } - - .vector-dropdown-content { - background-color: @base !important; - } - - .mw-headline::before { - color: @accent-color !important; - } - - .cdx-button { - background-color: @base !important; - color: @text !important; - border-color: @base !important; - } - - .mw-body { - background-color: @base !important; - color: @text !important; - border-color: @base !important; - } - - .mw-search-profile-tabs { - background-color: @base !important; - color: @text !important; - border-color: @base !important; - } - - .mw-content-ltr { - background-color: @base !important; - } - - .vector-sticky-pinned-container::after { - background: @base !important; - } - - .cdx-search-input { - border-color: @mantle !important; - } - - .oo-ui-widget:hover { - background-color: @surface0 !important; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/arch-wiki/catppuccin.user.less b/styles/arch-wiki/catppuccin.user.less new file mode 100644 index 0000000000..7ab13aac7a --- /dev/null +++ b/styles/arch-wiki/catppuccin.user.less @@ -0,0 +1,530 @@ +/* ==UserStyle== +@name Arch Wiki Catppuccin +@namespace github.com/catppuccin/userstyles/styles/arch-wiki +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/arch-wiki +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/arch-wiki/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aarch-wiki +@description Soothing pastel theme for Arch Wiki +@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("wiki.archlinux.org") { + @media (prefers-color-scheme: dark) { + :root { + #catppuccin(@darkFlavor, @accentColor); + } + } + @media (prefers-color-scheme: light) { + :root { + #catppuccin(@lightFlavor, @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; + } + } + + #content table, + #content h1, + #content h2, + #content h3, + #content h4, + #content h5, + #content pre, + #content code, + #content tt { + color: @text !important; + } + + body.skin-vector-2022 .vector-sticky-header { + color: @text !important; + background-color: @mantle !important; + border-bottom-color: @blue !important; + } + + #vector-main-menu-pinned-container, + #vector-page-tools-pinned-container { + background-color: @base !important; + } + + #ooui-php-191, + #preferences .mw-htmlform-submit-buttons { + background-color: @mantle !important; + } + + .mw-echo-ui-notificationItemWidget-content-message-header, + .oo-ui-labelElement-label { + color: @text !important; + } + + .oo-ui-optionWidget-selected { + background-color: @surface2 !important; + } + + .oo-ui-buttonElement-framed.oo-ui-widget-disabled + > .oo-ui-buttonElement-button { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface2 !important; + filter: brightness(0.4); + cursor: not-allowed; + } + + .mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(even) td { + background-color: @surface1 !important; + } + + .mw-htmlform-ooui .mw-htmlform-matrix tbody tr:hover td { + background-color: @surface2 !important; + } + + .mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(odd) td, + .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled + .oo-ui-tagMultiselectWidget-handle, + .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined + .oo-ui-tagItemWidget.oo-ui-widget-enabled, + .mw-rcfilters-ui-cell.mw-rcfilters-ui-filterTagMultiselectWidget-views-select, + .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, + .oo-ui-popupWidget-popup, + .mw-echo-ui-notificationItemWidget, + .mw-echo-ui-placeholderItemWidget { + background-color: @surface0 !important; + } + + .mw-echo-ui-notificationsInboxWidget-toolbarWrapper { + background-color: @base !important; + } + + #archnavbar { + background-color: @mantle !important; + border-bottom-color: @blue !important; + } + .mw-parser-output { + background-color: @base !important; + } + + .mw-page-container { + background-color: @base !important; + } + + .vector-header-container { + background-color: @base !important; + } + + #content, + header.mw-header li:not(.new), + #mw-panel-toc, + #mw-navigation li:not(.new), + #mw-panel li:not(.new), + #column-one li:not(.new), + #footer { + a:not([role="button"], .new) { + color: @blue !important; + } + } + + @media screen { + html.client-darkmode { + background-color: @base; + } + } + + .vector-feature-zebra-design-disabled, + body { + background-color: @base; + } + + #archnavbarlogo { + @svg: escape( + '' + ); + background: url("data:image/svg+xml,@{svg}") !important; + background-size: 190px 40px !important; + } + .cdx-text-input__input:enabled:focus { + border-color: @blue; + box-shadow: @blue !important; + } + + .archwiki-template-box-tip { + background-color: fadeout(hsla(90, 90%, 65%, 0.3), 10%) !important; + border-color: fadeout(hsla(90, 90%, 75%, 0.3), 10%); + color: @subtext1; + } + + .archwiki-template-box-note { + background-color: fadeout(hsla(208, 100%, 61%, 0.3), 5%) !important; + border-color: fadeout(hsla(208, 100%, 81%, 0.3), 5%) !important; + color: @subtext1; + } + + .archwiki-template-box-warning { + background-color: fadeout(hsla(7, 99%, 60%, 0.3), 5%) !important; + border-color: fadeout(hsla(7, 99%, 80%, 0.3), 05%) !important; + color: @subtext1; + } + + .firstHeading { + color: @accent-color !important; + } + + #content { + border-color: @overlay0; + } + + #content pre:not([class*="CodeMirror"]), + #content code, + #content tt { + background-color: @surface0; + color: @text; + border-color: @overlay0; + } + + .vector-pinned-container { + border-color: @overlay0 !important; + } + + .vector-pinnable-header-label { + color: @text; + } + + .vector-pinnable-header-toggle-button, + .vector-pinnable-header-unpin-button { + color: @mantle; + background-color: @accent-color; + border-color: @base; + } + + .wikitable { + background-color: @base; + } + + .wikitable > tr > th, + .wikitable > tr > td, + .wikitable > * > tr > th, + .wikitable > * > tr > td { + color: @text; + border-color: @crust; + } + + .wikitable > tr > th, + .wikitable > * > tr > th { + background-color: @mantle; + color: @text; + } + + .pre { + color: @mantle; + } + + .mw-headline { + color: @text; + } + + .plainlinks, + .archwiki-template-man, + .external text { + color: multiply(@blue, #555); + } + + .cdx-button:enabled.cdx-button--weight-quiet, + .cdx-button.cdx-button--fake-button--enabled, + .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet, + .diff-context, + .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle, + .oo-ui-checkboxInputWidget [type="checkbox"] + span { + background-color: @surface0; + color: @text; + border-color: @surface2; + } + + .vector-feature-zebra-design-disabled, + #contentSub:not(:empty) { + color: @surface0 !important; + } + + .mw-editfont-monospace { + background-color: @surface0; + color: @text; + border-color: @surface1; + } + + .diff-deletedline, + .mw-message-box-warning { + background-color: @yellow; + color: @mantle; + } + + .diff-addedline { + background-color: @sky; + color: @mantle; + } + + .mw-message-box-error { + background-color: @flamingo; + border-color: @red; + color: @base; + } + + .mw-number-text { + color: @text; + } + + .cdx-checkbox__icon { + background-color: @surface0; + } + + .oo-ui-checkboxInputWidget.oo-ui-widget-enabled + [type="checkbox"]:checked + + span, + .cdx-checkbox__input:enabled:checked + .cdx-checkbox__icon, + .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive { + background-color: @blue; + border-color: @sapphire; + color: @mantle !important; + } + + .vector-feature-zebra-design-disabled, + #vector-toc-pinned-container, + .vector-toc::after { + background: linear-gradient(rgba(255, 255, 255, 0), @base) !important; + } + + #archnavbar ul li.anb-selected a { + color: @accent-color !important; + } + + .archwiki-template-message { + background-color: @base; + } + + .catlinks { + background-color: @mantle; + } + + .mw-parser-output p { + color: @text !important; + } + + .archwiki-template-meta-related-articles { + background-color: @surface0; + } + + .archwiki-template-meta-related-articles p { + color: @text; + border-bottom-color: @blue; + } + + .archwiki-template-meta-related-articles ul li a { + color: @blue important; + } + + .mw-plusminus-neg, + a.new { + color: @red !important; + } + + .mw-plusminus-pos { + color: @green; + } + + .mw-plusminus-null { + color: @subtext0; + } + + .oo-ui-textInputWidget .oo-ui-inputWidget-input, + .mw-widget-dateInputWidget-handle, + .oo-ui-buttonElement-framed.oo-ui-widget-enabled + > .oo-ui-buttonElement-button, + #pagehistory li.selected { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface2 !important; + } + + .oo-ui-menuSelectWidget { + background-color: @surface0; + border-color: @surface2; + } + + .oo-ui-OptionWidget-highlighted { + background-color: @overlay0 !important; + } + + .oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget, + .minoredit, + .comment { + color: @text; + } + + .mw-footer-container { + color: @text !important; + } + + #archnavbarlist li a { + color: @blue !important; + } + + .anb-selected { + color: @subtext1 !important; + } + + .mw-footer li { + color: @text; + } + + .vector-main-menu, + .vector-pinnable-element { + background-color: @base !important; + } + + #p-navigation ul li a { + color: @blue !important; + } + + .archwiki-template-box-note a { + color: @blue !important; + } + + .archwiki-template-box-note a:visited { + color: @mauve !important; + } + + .mw-page-title-main { + color: @text; + } + + .vector-tab-noicon mw-list-item a { + color: @blue; + } + + .mw-header { + background-color: @base !important; + color: @text; + } + + .mw-footer li a { + color: @blue; + } + + .cdx-text-input__input:enabled { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface1; + } + + .cdx-button:enabled, + .cdx-button.cdxbutton--fake-button--enabled { + color: @mantle; + background-color: @accent-color; + border-color: @base; + } + + .cdx-menu { + background-color: @surface0; + } + + .cdx-menu:hover { + background-color: @base !important; + } + + .anb-home { + color: @text !important; + } + + .vector-dropdown-content { + background-color: @base !important; + } + + .mw-headline::before { + color: @accent-color !important; + } + + .cdx-button { + background-color: @base !important; + color: @text !important; + border-color: @base !important; + } + + .mw-body { + background-color: @base !important; + color: @text !important; + border-color: @base !important; + } + + .mw-search-profile-tabs { + background-color: @base !important; + color: @text !important; + border-color: @base !important; + } + + .mw-content-ltr { + background-color: @base !important; + } + + .vector-sticky-pinned-container::after { + background: @base !important; + } + + .cdx-search-input { + border-color: @mantle !important; + } + + .oo-ui-widget:hover { + background-color: @surface0 !important; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/boringproxy/catppuccin.user.css b/styles/boringproxy/catppuccin.user.css index c9c0df6434..339f779395 100644 --- a/styles/boringproxy/catppuccin.user.css +++ b/styles/boringproxy/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name boringproxy Catppuccin +@name boringproxy Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/boringproxy @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/boringproxy -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/boringproxy/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/boringproxy/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aboringproxy @description Soothing pastel theme for boringproxy @author Catppuccin @@ -13,197 +13,4 @@ @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("boring.example.com") { - @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: @base; - } - main { - background: @crust; - } - .content { - border-color: @overlay0; - } - - //Side Menu - .menu { - background: @mantle; - } - .menu-item { - background: @crust; - } - .menu-item:hover { - background: @surface2; - color: @accent-color; - } - .menu-item:any-link { - color: @text; - } - - // Right SIde Button - .button { - border-color: @accent-color; - background-color: @crust; - color: @subtext1; - } - .button:hover { - color: @surface0; - background-color: @accent-color; - border-color: @crust; - } - - // Top Headers - .list { - background-color: @crust; - } - - .list-item { - color: @accent-color; - } - // Tunnel Table - .tn-tunnel-link { - color: @subtext1; - text-decoration: none; - } - - .tn-tunnel-table__cell { - color: @text; - } - body a { - color: @text; - } - body a:visited { - color: @accent-color; - } - - .tn-attribute__name { - color: @text; - } - .tn-attribute__value { - color: @subtext0; - } - //Tunnel Adding - .tunnel-adder h1 { - color: @text; - } - - .input { - color: @text; - } - .input input { - background-color: @crust; - color: @subtext0; - border-color: @accent-color; - } - - .input select { - background-color: @crust; - color: @subtext0; - border-color: @accent-color; - } - - // Token Adding - .token-adder { - color: @text; - } - .token-adder select { - background-color: @crust; - color: @subtext0; - border-color: @accent-color; - } - - // Client Adding - .client-adder { - color: @text; - } - .client-adder select { - background-color: @crust; - color: @subtext0; - border-color: @accent-color; - } - .client-adder input { - background-color: @crust; - color: @subtext0; - border-color: @accent-color; - } - - // User Adding - .user-adder { - color: @text; - } - .user-adder input { - background-color: @crust; - color: @subtext0; - border-color: @accent-color; - } - // dialog - .dialog__content { - background-color: @crust; - color: @text; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/boringproxy/catppuccin.user.less b/styles/boringproxy/catppuccin.user.less new file mode 100644 index 0000000000..65652ad540 --- /dev/null +++ b/styles/boringproxy/catppuccin.user.less @@ -0,0 +1,207 @@ +/* ==UserStyle== +@name boringproxy Catppuccin +@namespace github.com/catppuccin/userstyles/styles/boringproxy +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/boringproxy +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/boringproxy/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aboringproxy +@description Soothing pastel theme for boringproxy +@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("boring.example.com") { + @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: @base; + } + main { + background: @crust; + } + .content { + border-color: @overlay0; + } + + //Side Menu + .menu { + background: @mantle; + } + .menu-item { + background: @crust; + } + .menu-item:hover { + background: @surface2; + color: @accent-color; + } + .menu-item:any-link { + color: @text; + } + + // Right SIde Button + .button { + border-color: @accent-color; + background-color: @crust; + color: @subtext1; + } + .button:hover { + color: @surface0; + background-color: @accent-color; + border-color: @crust; + } + + // Top Headers + .list { + background-color: @crust; + } + + .list-item { + color: @accent-color; + } + // Tunnel Table + .tn-tunnel-link { + color: @subtext1; + text-decoration: none; + } + + .tn-tunnel-table__cell { + color: @text; + } + body a { + color: @text; + } + body a:visited { + color: @accent-color; + } + + .tn-attribute__name { + color: @text; + } + .tn-attribute__value { + color: @subtext0; + } + //Tunnel Adding + .tunnel-adder h1 { + color: @text; + } + + .input { + color: @text; + } + .input input { + background-color: @crust; + color: @subtext0; + border-color: @accent-color; + } + + .input select { + background-color: @crust; + color: @subtext0; + border-color: @accent-color; + } + + // Token Adding + .token-adder { + color: @text; + } + .token-adder select { + background-color: @crust; + color: @subtext0; + border-color: @accent-color; + } + + // Client Adding + .client-adder { + color: @text; + } + .client-adder select { + background-color: @crust; + color: @subtext0; + border-color: @accent-color; + } + .client-adder input { + background-color: @crust; + color: @subtext0; + border-color: @accent-color; + } + + // User Adding + .user-adder { + color: @text; + } + .user-adder input { + background-color: @crust; + color: @subtext0; + border-color: @accent-color; + } + // dialog + .dialog__content { + background-color: @crust; + color: @text; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/brave-search/catppuccin.user.css b/styles/brave-search/catppuccin.user.css index 841f40d5f6..dd58764044 100644 --- a/styles/brave-search/catppuccin.user.css +++ b/styles/brave-search/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Brave Search Catppuccin +@name Brave Search Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/brave-search @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/brave-search -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/brave-search/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/brave-search/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Abrave-search @description Soothing pastel theme for Brave Search @author Catppuccin @@ -13,201 +13,4 @@ @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("search.brave.com") { - :root.light { - #catppuccin(@lightFlavor, @accentColor); - } - :root.dark { - #catppuccin(@darkFlavor, @accentColor); - } - :root:not(.light, .dark) { - @media (prefers-color-scheme: light) { - #catppuccin(@lightFlavor, @accentColor); - } - @media (prefers-color-scheme: dark) { - #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; - } - } - - --color-page-background: @base; - --color-container-background: @crust; - --color-container-highlight: @mantle; - --color-serp-header-background: @crust; - --color-text-interactive: @accent-color; - --color-divider-subtle: @surface0; - --color-divider-interactive: @accent-color; - --color-text-primary: @text; - --color-serp-bar-bg: @mantle; - --color-serp-divider-subtle-container: @surface0; - --color-gray-30: @subtext0; - --color-gray-40: @overlay2; - --color-text-secondary: @subtext1; - --color-text-tertiary: @subtext0; - --color-icon-default: @overlay2; - --color-serp-snippet-background: @base; - --color-link-default: @blue; - --color-link-visited: @mauve; - --color-tabs-search-text-default: @accent-color; - --color-primary-50: @accent-color; - --color-primitive-primary-60: @accent-color; - --color-primitive-primary-70: darken(@accent-color, 5%); - --color-container-interactive: transparent; - --color-button-background: @accent-color; - --color-button-disabled: fade(@surface2, 30%); - --color-serp-settings-background: @mantle; - - dialog { - color: @text; - - &::backdrop { - background-color: fade(@crust, 30%); - } - } - - #searchform::after { - outline-color: @surface0; - } - #searchform-actions::before { - background: none !important; - } - #submit-button { - &:hover:not(:disabled) { - background: linear-gradient( - 314deg, - @peach 8.49%, - @pink 43.72%, - @mauve 99.51% - ); - } - - svg { - fill: @overlay2; - } - } - #searchbox::placeholder { - color: @subtext0; - } - - .button.type--filled.theme--default { - color: @base; - - &:disabled { - color: fade(@text, 50%); - } - } - .button.type--outlined.theme--default:hover { - background-color: @accent-color; - border-color: @accent-color !important; - color: @base !important; - } - .tab-item.active .icon { - fill: @accent-color !important; - } - .tab-item.active ::after { - background: @accent-color !important; - } - - .logo-img { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .nav-logo .logo-large { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .nav-logo .logo-small { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .waves-bottom { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .waves-top { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - input[type="radio"]:checked::after { - background-color: @accent-color; - } - - .feedback-footer { - #logo { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - height: 48px; - } - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/brave-search/catppuccin.user.less b/styles/brave-search/catppuccin.user.less new file mode 100644 index 0000000000..5d95a1517a --- /dev/null +++ b/styles/brave-search/catppuccin.user.less @@ -0,0 +1,211 @@ +/* ==UserStyle== +@name Brave Search Catppuccin +@namespace github.com/catppuccin/userstyles/styles/brave-search +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/brave-search +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/brave-search/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Abrave-search +@description Soothing pastel theme for Brave Search +@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("search.brave.com") { + :root.light { + #catppuccin(@lightFlavor, @accentColor); + } + :root.dark { + #catppuccin(@darkFlavor, @accentColor); + } + :root:not(.light, .dark) { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor, @accentColor); + } + @media (prefers-color-scheme: dark) { + #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; + } + } + + --color-page-background: @base; + --color-container-background: @crust; + --color-container-highlight: @mantle; + --color-serp-header-background: @crust; + --color-text-interactive: @accent-color; + --color-divider-subtle: @surface0; + --color-divider-interactive: @accent-color; + --color-text-primary: @text; + --color-serp-bar-bg: @mantle; + --color-serp-divider-subtle-container: @surface0; + --color-gray-30: @subtext0; + --color-gray-40: @overlay2; + --color-text-secondary: @subtext1; + --color-text-tertiary: @subtext0; + --color-icon-default: @overlay2; + --color-serp-snippet-background: @base; + --color-link-default: @blue; + --color-link-visited: @mauve; + --color-tabs-search-text-default: @accent-color; + --color-primary-50: @accent-color; + --color-primitive-primary-60: @accent-color; + --color-primitive-primary-70: darken(@accent-color, 5%); + --color-container-interactive: transparent; + --color-button-background: @accent-color; + --color-button-disabled: fade(@surface2, 30%); + --color-serp-settings-background: @mantle; + + dialog { + color: @text; + + &::backdrop { + background-color: fade(@crust, 30%); + } + } + + #searchform::after { + outline-color: @surface0; + } + #searchform-actions::before { + background: none !important; + } + #submit-button { + &:hover:not(:disabled) { + background: linear-gradient( + 314deg, + @peach 8.49%, + @pink 43.72%, + @mauve 99.51% + ); + } + + svg { + fill: @overlay2; + } + } + #searchbox::placeholder { + color: @subtext0; + } + + .button.type--filled.theme--default { + color: @base; + + &:disabled { + color: fade(@text, 50%); + } + } + .button.type--outlined.theme--default:hover { + background-color: @accent-color; + border-color: @accent-color !important; + color: @base !important; + } + .tab-item.active .icon { + fill: @accent-color !important; + } + .tab-item.active ::after { + background: @accent-color !important; + } + + .logo-img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .nav-logo .logo-large { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .nav-logo .logo-small { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .waves-bottom { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .waves-top { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + input[type="radio"]:checked::after { + background-color: @accent-color; + } + + .feedback-footer { + #logo { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + height: 48px; + } + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/bsky/catppuccin.user.css b/styles/bsky/catppuccin.user.css index 4fb8c08acc..5ce7faed24 100644 --- a/styles/bsky/catppuccin.user.css +++ b/styles/bsky/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Bluesky Social Catppuccin +@name Bluesky Social Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/bsky @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/bsky -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/bsky/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/bsky/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Absky @description Soothing pastel theme for Bluesky Social @author Catppuccin @@ -13,606 +13,4 @@ @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('bsky.app') { - @media (prefers-color-scheme: light) { - html.colorMode--system { - #catppuccin(@lightFlavor, @accentColor); - } - } - @media (prefers-color-scheme: dark) { - html.colorMode--system { - #catppuccin(@darkFlavor, @accentColor); - } - } - - html.theme--light { - #catppuccin(@lightFlavor, @accentColor); - } - html.theme--dim, - html.theme--dark { - #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); - - // fix general site background - this applies to the element - background-color: @base; - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - --text: @text; - --background: @base; - --backgroundLight: @base; - - /* generic text */ - [style*="color: rgb(255, 255, 255)"], - [style*="color: rgb(241, 243, 245)"]//, - /* [style*="color: rgb(11, 15, 20)"] this breas on dark */ { - color: @text !important; - & when (@lookup = latte) { - /* fix button text in latte */ - color: @base !important; - } - } - - /* some background color of follow button + hover */ - [style*="background-color: rgb(241, 243, 245)"] { - background-color: if(@lookup = latte, @crust, @text) !important; - } - - [style*="color: rgb(11, 15, 20)"] { - color: if(@lookup = latte, @text, @crust) !important; - } - - /* secondary text */ - [style*="rgb(169, 183, 197)"], - [style*="rgb(140, 158, 178)"], - [style*="rgb(84, 110, 138)"], - [style*="rgb(66, 87, 108)"] { - color: @subtext1 !important; - } - - // white bottons on the theme/color mode selection in settings - div[style*="background-color: rgb(197, 207, 217)"], // dark - div[style*="background-color: rgb(201, 210, 219)"], // dim - div[style*="background-color: rgb(46, 63, 81)"] // light - { - background-color: @text !important; - > div { - color: @crust !important; - } - } - - /* generic blue inline (e.g. link text, etc) */ - [style*="color: rgb(16, 131, 254)"], // dark - [style*="color: rgb(32, 139, 254)"] // dim - { - color: @accent-color !important; - } - /* generic blue inline underline (links) */ - [style*="text-decoration-color: rgb(16, 131, 254)"], // dark - [style*="text-decoration-color: rgb(32, 139, 254)"] // dim - { - text-decoration-color: @accent-color !important; - } - - /* generic blue inline bg color (e.g. notification count) */ - [style*="background-color: rgb(16, 131, 254)"], // dark - [style*="background-color: rgb(32, 139, 254)"] // dim - { - background-color: @accent-color !important; - - /* notification count contrast fix, also chat message contrast fix (> div) */ - &[style*="color: rgb(241, 243, 245)"], - &[style*="color: rgb(255, 255, 255)"], - > div { - color: @crust !important; - } - - /* icon color fix */ - path[fill="#ffffff"], - path[fill="hsl(211, 20%, 95.3%)"] { - fill: @crust!important; - } - } - - /* sending/pending/failed direct message */ - [style*="background-color: rgb(1, 64, 132)"] { - background-color: fadeout(@accent-color, 70%) !important; - } - - /* blue svg inline */ - [stroke="hsl(211, 99%, 53%)"], - [stroke="#0085ff"] { - stroke: @accent-color; - } - - [fill="hsl(211, 99%, 53%)"], - [fill="hsl(211, 99%, 56%)"], - [fill="#0085ff"] { - fill: @accent-color; - } - - /* a lot of blue things (buttons etc) */ - .r-wzwllv, - div[style*="background-color: rgb(0, 133, 255)"] { - background-color: @accent-color !important; - - /* notification count contrast fix, also chat message contrast fix (> div) */ - &[style*="color: rgb(241, 243, 245)"], - > div { - color: @crust !important; - } - } - - /* subscribe to labeler button */ - button[data-testid="toggleSubscribeBtn"] { - > div { - background-color: @mauve !important; - > div { - color: @crust !important; - } - } - } - - /* direct message "failed to send" text */ - span[style*="color: rgb(205, 10, 55)"] { - color: @red !important; - } - - /* red button text (delete my account) */ - [style*="color: rgb(251, 162, 178)"] { - color: @red !important; - } - - /* red button (delete, etc) */ - button[style*="background-color: rgb(244, 11, 66)"], // dark, light (same color) - button[style*="background-color: rgb(246, 60, 103)"], // dark (hover) - button[style*="background-color: rgb(245, 41, 88)"], // dim - button[style*="background-color: rgb(247, 84, 122)"], // dim (hover) - button[style*="background-color: rgb(205, 10, 55)"] // light (hover) - { - background-color: @red !important; - &:hover { - background-color: fade(@red, 70%) !important; - } - // text color - > div { - color: @crust !important; - } - } - - /* delete account button */ - [style^="background-color: rgb(79, 3, 20)"] { - background-color: @red !important; - } - path[fill="#fba2b2"] { - fill: @crust; - } - - /* generic background color */ - [style*="background-color: rgb(255, 255, 255)"], - [style*="background-color: rgb(0, 0, 0)"], - [style*="background-color: rgb(22, 30, 39)"] { - background-color: @base !important; - - & when (@lookup = latte) { - /* fix button colors in latte */ - [style*="background-color: rgb(0, 0, 0)"] { - background-color: @text !important; - } - } - } - - /* secondary background color */ - [style*="background-color: rgb(20, 25, 31)"], /* dark? */ - [style*="background-color: rgb(20, 27, 35)"], /* dark */ - [style*="background-color: rgb(30, 41, 54)"] /* dim */ { - background-color: @mantle !important; - } - - /* secondary background color when active (e.g. search bar, hovering some buttons like cancel) */ - [style*="background-color: rgb(28, 39, 50)"], // dark - [style*="background-color: rgb(38, 53, 68)"] // dim - { - background-color: @crust !important; - } - - /* some sort of tertiary background color with a slight accent */ - [style*="background-color: rgb(0, 25, 51)"] { - background-color: fadeout(@accent-color, 70%) !important; - } - - /* loading circle */ - circle[style^="stroke: rgb(25, 118, 210)"] { - stroke: @accent-color !important; - } - - /* wide site: new post button (w text) */ - button[style*="background-color: rgb(16, 131, 254)"], // dark - button[style*="background-color: rgb(52, 150, 254)"], // dark (hover) - button[style*="background-color: rgb(32, 139, 254)"], // dim - button[style*="background-color: rgb(76, 162, 254)"] // dim (hover) - { - background-color: @accent-color !important; - &:hover { - background-color: fade(@accent-color, 70%) !important; - } - - > div { - color: @crust !important; - } - svg > path { - fill: @crust !important; - } - } - - /* borders */ - .css-175oi2r { - border-color: @surface0 !important; - } - - /* fix selected tab bottom border issue caused by selector above */ - .css-175oi2r[style*="border-bottom-color: rgb(16, 131, 254)"] { - border-bottom-color: @accent-color !important; - } - - /* fixes the bottom border on tabs (timeline) having a darker color */ - .r-oucylx { - border-bottom-color: @base !important; - } - - /* current selected tab (acc page) !! KEEP THIS BELOW ABOVE DEFINITION !! */ - [style*="border-color: rgb(255, 255, 255)"] { - border-color: @accent-color !important; - } - - /* settings highlight thing */ - [style="background-color: rgb(38, 39, 45)"] { - background-color: @crust !important; - } - - /* thin site: bluesky text */ - .r-yovm8p { - color: @blue; - } - - /* empty profile banner */ - .r-wuyfte { - background-color: @blue; - } - - /* "invalid handle" warning */ - [style*="color: rgb(236, 72, 104); border-color: rgb(209, 16, 67)"] { - color: @red !important; - border-color: @red !important; - } - - /* end of feed text */ - .r-1521r3q { - color: @overlay1; - } - - /* mobile side drawer */ - [data-testid="drawer"] { - background-color: @base; - } - - /* feedback */ - .r-m7buhn { - background-color: @blue; - } - - /* save, report, post modal button */ - [data-testid="sendReportBtn"], - [data-testid="composerPublishBtn"], - [data-testid="editProfileSaveBtn"] { - background: unset !important; - - /* "save changes" button in edit profile */ - > div[style*="background-image: linear-gradient(94.0544deg, rgb(90, 113, 250), rgb(0, 133, 255))"] { - background: @accent-color !important; - } - - /* fix contrast issues */ - > div, - > div > div { - color: @crust !important; - } - } - - [data-testid="saveBtn"] { - > div[style*="background-image: linear-gradient"] { - background: unset !important; - background-color: @accent-color !important; - > div { - color: @crust !important; - } - } - } - - // toast notifications (e.g. "copied to clipboard") - .r-17c3jg3:has(> div[dir="auto"]) { - background-color: @crust !important; - - .r-jwli3a { - color: @text !important; - } - > svg > path { - fill: @text !important; - } - } - - /* draft "Discard" button */ - [style^="background-color: rgb(209, 16, 67)"] { - background-color: @red !important; - } - - /* the round gradient post button in the bottom right when the page is thinner than usual */ - [data-testid="composeFAB"] > div { - background: unset !important; - background-color: @accent-color !important; - - // fix contrast (inner symbol) - .r-jwli3a { - color: @crust !important; - } - } - - /* blue text only button (e.g. cancel post button) */ - div[style*="color: rgb(52, 150, 254)"], - div[style*="color: rgb(76, 162, 254)"] { - color: @accent-color !important; - } - - /* text color when writing a post */ - .ProseMirror, - .ProseMirror-dark { - color: @text; - } - - /* some button background color (when hovering) */ - [style*="background-color: rgb(0, 44, 91)"], - [style*="background-color: rgb(19, 63, 109)"] { - background-color: fade(@accent-color, 30%) !important; - } - - /* several white buttons */ - button[style*="background-color: rgb(255, 255, 255)"] - when - not - (@lookup = latte) { - background-color: @text !important; - } - - /* the white buttons text */ - [style*="color: rgb(0, 0, 0)"] { - color: @crust !important; - } - - /* replace dark fill icons with crust ones */ - path[fill="#000000"] { - fill: @crust; - } - - /* fixes a contrast issue when the suggested follows button is enabled (very ugly selector) */ - button[data-testid="suggestedFollowsBtn"][style*="background-color: rgb(255, 255, 255)"] - > svg - > path { - fill: @base !important; - } - - /* text inside most buttons */ - button > div > div[style~="color: rgb(0, 0, 0)"] { - color: @base !important; - } - - /* search bar text */ - [role="search"], - [data-testid="confirmCodeInput"] { - --placeholderTextColor: @subtext1 !important; - } - - /* search bar icon */ - svg[style^="color: rgb(141, 142, 150)"] { - color: @subtext1 !important; - } - - /* small icons */ - path[fill="#ffffff"], - path[fill="hsl(211, 20%, 95.3%)"] { - fill: @text; - - & when (@lookup = latte) { - fill: @base; - } - } - - /* more gray small icons (seems to only be the trash can/delete icon) */ - path[fill="#8D8E96"] { - fill: @subtext1; - } - - /* settings button at the top of the timeline, hashtag button/icon at top of timeline */ - path[fill="hsl(211, 24%, 70%)"], - path[fill="hsl(211, 20%, 62.4%)"] { - fill: @subtext1; - } - - /* x invite codes available icon */ - div[style*="background-color: rgb(191, 225, 255)"], - div[style*="background-color: rgb(1, 37, 97)"] { - background-color: fadeout(@accent-color, 70%) !important; - > svg > path[fill="#52acfe"] { - fill: @accent-color; - } - } - - /* likes, reposts and comment counts/buttons under posts, maybe more */ - path[fill="hsl(211, 20%, 53%)"], - [style*="color: rgb(111, 134, 159)"] { - color: @subtext1 !important; - fill: @subtext1 !important; - } - - /* heart/like */ - .r-84gixx, - .r-1i89l9k, - div[style*="color: rgb(236, 72, 153)"], - button[data-testid="toggleLikeBtn"] > svg:has(path[fill^="hsl(346,"]) // feed like button - { - color: @red !important; - > path { - fill: @red !important; - } - } - - /* repost */ - .r-5ld2xk, - [style*="color: rgb(69, 237, 159)"] { - color: @green !important; - > path { - fill: @green !important; - } - } - - /* tiny people icon on post view ("Everybody can reply") */ - path[fill="hsl(211, 24%, 43.6%)"], - /* icon above "you have no lists" */ - path[fill="hsl(211, 24%, 34.2%)"] { - fill: @subtext0; - } - - /* onboarding: continue/next button */ - [data-testid="continueBtn"] { - background-color: @accent-color !important; - } - [data-testid="continueBtn"] > div > div { - color: @base !important; - } - [data-testid="continueBtn"] > div > svg > path { - fill: @base !important; - } - - /* pretty self explanatory, user mentions in the post create modal */ - .mention { - color: @accent-color; - } - - /* mentions in the notification tab (highlighted notifications) */ - div[style*="background-color: rgb(0, 17, 36)"], // dark - div[style*="background-color: rgb(21, 41, 63)"], // dim - div[style*="background-color: rgb(240, 247, 255)"] // light - { - background-color: fadeout(@accent-color, 70%) !important; - .css-175oi2r:not([role="checkbox"] *) { - background-color: transparent !important; - } - } - - /* generic blue background color inline (used for buttons in notifications tab) */ - button[style*="background-color: rgb(0, 133, 255)"] { - background-color: @accent-color !important; - } - /* contrast fix for above */ - button[style*="background-color: rgb(0, 133, 255)"] > div > div { - color: @base !important; - } - - /* other button in notifications tab, inner text */ - div[style*="color: rgb(82, 172, 254)"] { - color: @accent-color !important; - } - - /* "No notifications yet!" text in the notifications tab */ - div[style*="color: rgb(141, 142, 150)"] { - color: @subtext0 !important; - } - - /* login: wrong password highlight */ - .r-w7hjet { - background-color: @red; - } - - /* please verify your email popup (green checkmark) */ - circle[fill="#20BC07"] { - fill: @green; - } - - /* toggle circle */ - [style*="background-color: rgb(185, 185, 193)"] { - background-color: @overlay2 !important; - } - - /* skeletons */ - .r-kdyh1x, - .r-cpet4d { - &[style*="background-color: rgb(20, 27, 35);"] { - background-color: @surface0 !important; - } - } - - /* thread lines */ - div[style*="background-color: rgb(46, 63, 81)"].r-m5arl1 { - background: @surface1 !important; - } - - line[stroke="hsl(211, 28%, 24.8%)"][stroke-width="2"] { - stroke: @surface1 !important; - } - - circle[fill="hsl(211, 28%, 24.8%)"][r="1.5"] { - fill: @surface1 !important; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/bsky/catppuccin.user.less b/styles/bsky/catppuccin.user.less new file mode 100644 index 0000000000..0e428c402b --- /dev/null +++ b/styles/bsky/catppuccin.user.less @@ -0,0 +1,617 @@ +/* ==UserStyle== +@name Bluesky Social Catppuccin +@namespace github.com/catppuccin/userstyles/styles/bsky +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/bsky +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/bsky/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Absky +@description Soothing pastel theme for Bluesky Social +@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("bsky.app") { + @media (prefers-color-scheme: light) { + html.colorMode--system { + #catppuccin(@lightFlavor, @accentColor); + } + } + @media (prefers-color-scheme: dark) { + html.colorMode--system { + #catppuccin(@darkFlavor, @accentColor); + } + } + + html.theme--light { + #catppuccin(@lightFlavor, @accentColor); + } + html.theme--dim, + html.theme--dark { + #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); + + // fix general site background - this applies to the element + background-color: @base; + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + --text: @text; + --background: @base; + --backgroundLight: @base; + + /* generic text */ + [style*="color: rgb(255, 255, 255)"], + [style*="color: rgb(241, 243, 245)"] //, + /* [style*="color: rgb(11, 15, 20)"] this breas on dark */ { + color: @text !important; + & when (@lookup = latte) { + /* fix button text in latte */ + color: @base !important; + } + } + + /* some background color of follow button + hover */ + [style*="background-color: rgb(241, 243, 245)"] { + background-color: if(@lookup = latte, @crust, @text) !important; + } + + [style*="color: rgb(11, 15, 20)"] { + color: if(@lookup = latte, @text, @crust) !important; + } + + /* secondary text */ + [style*="rgb(169, 183, 197)"], + [style*="rgb(140, 158, 178)"], + [style*="rgb(84, 110, 138)"], + [style*="rgb(66, 87, 108)"] { + color: @subtext1 !important; + } + + // white bottons on the theme/color mode selection in settings + div[style*="background-color: rgb(197, 207, 217)"], // dark + div[style*="background-color: rgb(201, 210, 219)"], // dim + div[style*="background-color: rgb(46, 63, 81)"] // light + { + background-color: @text !important; + > div { + color: @crust !important; + } + } + + /* generic blue inline (e.g. link text, etc) */ + [style*="color: rgb(16, 131, 254)"], // dark + [style*="color: rgb(32, 139, 254)"] // dim + { + color: @accent-color !important; + } + /* generic blue inline underline (links) */ + [style*="text-decoration-color: rgb(16, 131, 254)"], // dark + [style*="text-decoration-color: rgb(32, 139, 254)"] // dim + { + text-decoration-color: @accent-color !important; + } + + /* generic blue inline bg color (e.g. notification count) */ + [style*="background-color: rgb(16, 131, 254)"], // dark + [style*="background-color: rgb(32, 139, 254)"] // dim + { + background-color: @accent-color !important; + + /* notification count contrast fix, also chat message contrast fix (> div) */ + &[style*="color: rgb(241, 243, 245)"], + &[style*="color: rgb(255, 255, 255)"], + > div { + color: @crust !important; + } + + /* icon color fix */ + path[fill="#ffffff"], + path[fill="hsl(211, 20%, 95.3%)"] { + fill: @crust !important; + } + } + + /* sending/pending/failed direct message */ + [style*="background-color: rgb(1, 64, 132)"] { + background-color: fadeout(@accent-color, 70%) !important; + } + + /* blue svg inline */ + [stroke="hsl(211, 99%, 53%)"], + [stroke="#0085ff"] { + stroke: @accent-color; + } + + [fill="hsl(211, 99%, 53%)"], + [fill="hsl(211, 99%, 56%)"], + [fill="#0085ff"] { + fill: @accent-color; + } + + /* a lot of blue things (buttons etc) */ + .r-wzwllv, + div[style*="background-color: rgb(0, 133, 255)"] { + background-color: @accent-color !important; + + /* notification count contrast fix, also chat message contrast fix (> div) */ + &[style*="color: rgb(241, 243, 245)"], + > div { + color: @crust !important; + } + } + + /* subscribe to labeler button */ + button[data-testid="toggleSubscribeBtn"] { + > div { + background-color: @mauve !important; + > div { + color: @crust !important; + } + } + } + + /* direct message "failed to send" text */ + span[style*="color: rgb(205, 10, 55)"] { + color: @red !important; + } + + /* red button text (delete my account) */ + [style*="color: rgb(251, 162, 178)"] { + color: @red !important; + } + + /* red button (delete, etc) */ + button[style*="background-color: rgb(244, 11, 66)"], + // dark, light (same color) + button[style*="background-color: rgb(246, 60, 103)"], // dark (hover) + button[style*="background-color: rgb(245, 41, 88)"], // dim + button[style*="background-color: rgb(247, 84, 122)"], // dim (hover) + button[style*="background-color: rgb(205, 10, 55)"] // light (hover) + { + background-color: @red !important; + &:hover { + background-color: fade(@red, 70%) !important; + } + // text color + > div { + color: @crust !important; + } + } + + /* delete account button */ + [style^="background-color: rgb(79, 3, 20)"] { + background-color: @red !important; + } + path[fill="#fba2b2"] { + fill: @crust; + } + + /* generic background color */ + [style*="background-color: rgb(255, 255, 255)"], + [style*="background-color: rgb(0, 0, 0)"], + [style*="background-color: rgb(22, 30, 39)"] { + background-color: @base !important; + + & when (@lookup = latte) { + /* fix button colors in latte */ + [style*="background-color: rgb(0, 0, 0)"] { + background-color: @text !important; + } + } + } + + /* secondary background color */ + [style*="background-color: rgb(20, 25, 31)"], /* dark? */ + [style*="background-color: rgb(20, 27, 35)"], /* dark */ + [style*="background-color: rgb(30, 41, 54)"] /* dim */ { + background-color: @mantle !important; + } + + /* secondary background color when active (e.g. search bar, hovering some buttons like cancel) */ + [style*="background-color: rgb(28, 39, 50)"], // dark + [style*="background-color: rgb(38, 53, 68)"] // dim + { + background-color: @crust !important; + } + + /* some sort of tertiary background color with a slight accent */ + [style*="background-color: rgb(0, 25, 51)"] { + background-color: fadeout(@accent-color, 70%) !important; + } + + /* loading circle */ + circle[style^="stroke: rgb(25, 118, 210)"] { + stroke: @accent-color !important; + } + + /* wide site: new post button (w text) */ + button[style*="background-color: rgb(16, 131, 254)"], // dark + button[style*="background-color: rgb(52, 150, 254)"], // dark (hover) + button[style*="background-color: rgb(32, 139, 254)"], // dim + button[style*="background-color: rgb(76, 162, 254)"] // dim (hover) + { + background-color: @accent-color !important; + &:hover { + background-color: fade(@accent-color, 70%) !important; + } + + > div { + color: @crust !important; + } + svg > path { + fill: @crust !important; + } + } + + /* borders */ + .css-175oi2r { + border-color: @surface0 !important; + } + + /* fix selected tab bottom border issue caused by selector above */ + .css-175oi2r[style*="border-bottom-color: rgb(16, 131, 254)"] { + border-bottom-color: @accent-color !important; + } + + /* fixes the bottom border on tabs (timeline) having a darker color */ + .r-oucylx { + border-bottom-color: @base !important; + } + + /* current selected tab (acc page) !! KEEP THIS BELOW ABOVE DEFINITION !! */ + [style*="border-color: rgb(255, 255, 255)"] { + border-color: @accent-color !important; + } + + /* settings highlight thing */ + [style="background-color: rgb(38, 39, 45)"] { + background-color: @crust !important; + } + + /* thin site: bluesky text */ + .r-yovm8p { + color: @blue; + } + + /* empty profile banner */ + .r-wuyfte { + background-color: @blue; + } + + /* "invalid handle" warning */ + [style*="color: rgb(236, 72, 104); border-color: rgb(209, 16, 67)"] { + color: @red !important; + border-color: @red !important; + } + + /* end of feed text */ + .r-1521r3q { + color: @overlay1; + } + + /* mobile side drawer */ + [data-testid="drawer"] { + background-color: @base; + } + + /* feedback */ + .r-m7buhn { + background-color: @blue; + } + + /* save, report, post modal button */ + [data-testid="sendReportBtn"], + [data-testid="composerPublishBtn"], + [data-testid="editProfileSaveBtn"] { + background: unset !important; + + /* "save changes" button in edit profile */ + > div[style*="background-image: linear-gradient(94.0544deg, rgb(90, 113, 250), rgb(0, 133, 255))"] { + background: @accent-color !important; + } + + /* fix contrast issues */ + > div, + > div > div { + color: @crust !important; + } + } + + [data-testid="saveBtn"] { + > div[style*="background-image: linear-gradient"] { + background: unset !important; + background-color: @accent-color !important; + > div { + color: @crust !important; + } + } + } + + // toast notifications (e.g. "copied to clipboard") + .r-17c3jg3:has(> div[dir="auto"]) { + background-color: @crust !important; + + .r-jwli3a { + color: @text !important; + } + > svg > path { + fill: @text !important; + } + } + + /* draft "Discard" button */ + [style^="background-color: rgb(209, 16, 67)"] { + background-color: @red !important; + } + + /* the round gradient post button in the bottom right when the page is thinner than usual */ + [data-testid="composeFAB"] > div { + background: unset !important; + background-color: @accent-color !important; + + // fix contrast (inner symbol) + .r-jwli3a { + color: @crust !important; + } + } + + /* blue text only button (e.g. cancel post button) */ + div[style*="color: rgb(52, 150, 254)"], + div[style*="color: rgb(76, 162, 254)"] { + color: @accent-color !important; + } + + /* text color when writing a post */ + .ProseMirror, + .ProseMirror-dark { + color: @text; + } + + /* some button background color (when hovering) */ + [style*="background-color: rgb(0, 44, 91)"], + [style*="background-color: rgb(19, 63, 109)"] { + background-color: fade(@accent-color, 30%) !important; + } + + /* several white buttons */ + button[style*="background-color: rgb(255, 255, 255)"] when not( + @lookup = latte + ) { + background-color: @text !important; + } + + /* the white buttons text */ + [style*="color: rgb(0, 0, 0)"] { + color: @crust !important; + } + + /* replace dark fill icons with crust ones */ + path[fill="#000000"] { + fill: @crust; + } + + /* fixes a contrast issue when the suggested follows button is enabled (very ugly selector) */ + button[data-testid="suggestedFollowsBtn"][style*="background-color: rgb(255, 255, 255)"] + > svg + > path { + fill: @base !important; + } + + /* text inside most buttons */ + button > div > div[style~="color: rgb(0, 0, 0)"] { + color: @base !important; + } + + /* search bar text */ + [role="search"], + [data-testid="confirmCodeInput"] { + --placeholderTextColor: @subtext1 !important; + } + + /* search bar icon */ + svg[style^="color: rgb(141, 142, 150)"] { + color: @subtext1 !important; + } + + /* small icons */ + path[fill="#ffffff"], + path[fill="hsl(211, 20%, 95.3%)"] { + fill: @text; + + & when (@lookup = latte) { + fill: @base; + } + } + + /* more gray small icons (seems to only be the trash can/delete icon) */ + path[fill="#8D8E96"] { + fill: @subtext1; + } + + /* settings button at the top of the timeline, hashtag button/icon at top of timeline */ + path[fill="hsl(211, 24%, 70%)"], + path[fill="hsl(211, 20%, 62.4%)"] { + fill: @subtext1; + } + + /* x invite codes available icon */ + div[style*="background-color: rgb(191, 225, 255)"], + div[style*="background-color: rgb(1, 37, 97)"] { + background-color: fadeout(@accent-color, 70%) !important; + > svg > path[fill="#52acfe"] { + fill: @accent-color; + } + } + + /* likes, reposts and comment counts/buttons under posts, maybe more */ + path[fill="hsl(211, 20%, 53%)"], + [style*="color: rgb(111, 134, 159)"] { + color: @subtext1 !important; + fill: @subtext1 !important; + } + + /* heart/like */ + .r-84gixx, + .r-1i89l9k, + div[style*="color: rgb(236, 72, 153)"], + button[data-testid="toggleLikeBtn"] + > svg:has(path[fill^="hsl(346,"]) // feed like button + { + color: @red !important; + > path { + fill: @red !important; + } + } + + /* repost */ + .r-5ld2xk, + [style*="color: rgb(69, 237, 159)"] { + color: @green !important; + > path { + fill: @green !important; + } + } + + /* tiny people icon on post view ("Everybody can reply") */ + path[fill="hsl(211, 24%, 43.6%)"], + /* icon above "you have no lists" */ + path[fill="hsl(211, 24%, 34.2%)"] { + fill: @subtext0; + } + + /* onboarding: continue/next button */ + [data-testid="continueBtn"] { + background-color: @accent-color !important; + } + [data-testid="continueBtn"] > div > div { + color: @base !important; + } + [data-testid="continueBtn"] > div > svg > path { + fill: @base !important; + } + + /* pretty self explanatory, user mentions in the post create modal */ + .mention { + color: @accent-color; + } + + /* mentions in the notification tab (highlighted notifications) */ + div[style*="background-color: rgb(0, 17, 36)"], // dark + div[style*="background-color: rgb(21, 41, 63)"], // dim + div[style*="background-color: rgb(240, 247, 255)"] // light + { + background-color: fadeout(@accent-color, 70%) !important; + .css-175oi2r:not([role="checkbox"] *) { + background-color: transparent !important; + } + } + + /* generic blue background color inline (used for buttons in notifications tab) */ + button[style*="background-color: rgb(0, 133, 255)"] { + background-color: @accent-color !important; + } + /* contrast fix for above */ + button[style*="background-color: rgb(0, 133, 255)"] > div > div { + color: @base !important; + } + + /* other button in notifications tab, inner text */ + div[style*="color: rgb(82, 172, 254)"] { + color: @accent-color !important; + } + + /* "No notifications yet!" text in the notifications tab */ + div[style*="color: rgb(141, 142, 150)"] { + color: @subtext0 !important; + } + + /* login: wrong password highlight */ + .r-w7hjet { + background-color: @red; + } + + /* please verify your email popup (green checkmark) */ + circle[fill="#20BC07"] { + fill: @green; + } + + /* toggle circle */ + [style*="background-color: rgb(185, 185, 193)"] { + background-color: @overlay2 !important; + } + + /* skeletons */ + .r-kdyh1x, + .r-cpet4d { + &[style*="background-color: rgb(20, 27, 35);"] { + background-color: @surface0 !important; + } + } + + /* thread lines */ + div[style*="background-color: rgb(46, 63, 81)"].r-m5arl1 { + background: @surface1 !important; + } + + line[stroke="hsl(211, 28%, 24.8%)"][stroke-width="2"] { + stroke: @surface1 !important; + } + + circle[fill="hsl(211, 28%, 24.8%)"][r="1.5"] { + fill: @surface1 !important; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/bstats/catppuccin.user.css b/styles/bstats/catppuccin.user.css index 8f0f10f34d..4f69dd5a1a 100644 --- a/styles/bstats/catppuccin.user.css +++ b/styles/bstats/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name bStats Catppuccin +@name bStats Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/bstats @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/bstats -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/bstats/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/bstats/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Abstats @description Soothing pastel theme for bStats @author Catppuccin @@ -15,801 +15,4 @@ @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 checkbox graphUseAccentColor "Graphs Use Accent" 0 -==/UserStyle== */ - -@-moz-document domain('bstats.org') { - @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, - .collection-header, - .collection-item, - .grey.lighten-4, - .page-footer .footer-copyright { - background: @base !important; - } - .teal.darken-3, - .teal.darken-2, - .dropdown-content, - .side-nav { - background-color: @mantle !important; - } - - .teal { - background-color: @surface0 !important; - } - - /* slide out nav text & icons */ - .subheader, - .left { - color: @text !important; - } - - .collection { - border-color: @surface0; - } - .collection.with-header .collection-header, - .collection .collection-item { - border-bottom-color: @surface0; - } - - .collapsible { - border-top-color: @surface1; - border-right-color: @surface1; - border-left-color: @surface1; - } - .collapsible-body { - border-bottom-color: @surface1; - } - .collapsible-header { - background-color: @surface0 !important; - border-bottom-color: @surface1; - } - - blockquote { - border-left-color: @maroon; - } - /* code box */ - .prettyprint, - .withBox, - .prettyprinted { - background-color: @mantle !important; - outline-color: @mantle; - color: @overlay2; - } - .tag, - .boolean { - color: @blue; - } - .pln { - color: @text; - } - .com { - color: @overlay0; - } - .key { - color: @red; - } - .clo, - .opn, - .pun { - color: @yellow; - } - .str, - .string, - .atv { - color: @green; - } - .atn { - color: @mauve; - } - .number { - color: @peach; - } - - p, - h5, - b, - table, - th, - td, - .white-text, - nav .brand-logo, - nav a, - div.material-table .table-title, - div.material-table table th, - .card-title, - .card-content, - .container, - .center { - color: @text !important; - } - html, - div.material-table table tr td, - .grey-text.text-lighten-4, - .page-footer .footer-copyright { - color: @subtext1 !important; - } - .grey-text, - .grey-text.text-darken-2, - .input-field label, - div.material-table .table-footer label, - div.material-table .table-footer, - label { - color: @subtext0 !important; - } - .blue-text { - color: @blue !important; - } - .red-text { - color: @red !important; - } - .red { - background-color: @red; - } - - /* discord logo on homepage */ - img[src="/images/discord.svg"] when (@lookup=latte) { - filter: saturate(210%) hue-rotate(-20deg) brightness(82%); - } - img[src="/images/discord.svg"] when (@lookup=frappe) { - filter: saturate(53%) hue-rotate(-10deg) brightness(147%) contrast(90%) - sepia(15%) invert(2%); - } - img[src="/images/discord.svg"] when (@lookup=macchiato) { - filter: saturate(52%) hue-rotate(-15deg) brightness(157%) contrast(90%) - sepia(10%); - } - img[src="/images/discord.svg"] when (@lookup=mocha) { - filter: saturate(38%) hue-rotate(-25deg) brightness(153%) sepia(6%); - } - - /* checkbox */ - [type="checkbox"] + label::before, - [type="checkbox"]:not(.filled-in) + label::after { - border-color: @subtext0; - } - [type="checkbox"]:checked + label::before { - border-color: rgba(0, 0, 0, 0); - border-right-color: @green; - border-bottom-color: @green; - } - - /* table hover */ - div.material-table table tbody tr:hover { - background-color: fade(@surface2, 40%); - } - /* nav hover */ - nav ul a:hover { - background-color: fade(@surface2, 40%); - } - .dropdown-content li:hover, - .dropdown-content li.active, - .dropdown-content li.selected { - background-color: fade(@surface2, 5%); - } - - .input-field label { - color: @accent-color !important; - } - /* search unfocused */ - input:not([type]), - input[type="text"], - input[type="password"], - input[type="email"], - input[type="url"], - input[type="time"], - input[type="date"], - input[type="datetime"], - input[type="datetime-local"], - input[type="tel"], - input[type="number"], - input[type="search"], - textarea.materialize-textarea { - border-bottom-color: @subtext0; - box-shadow: 1 1px 0 0 @subtext0; - } - /* search focused */ - input:not([type]):focus:not([readonly]), - input[type="text"]:focus:not([readonly]), - input[type="password"]:focus:not([readonly]), - input[type="email"]:focus:not([readonly]), - input[type="url"]:focus:not([readonly]), - input[type="time"]:focus:not([readonly]), - input[type="date"]:focus:not([readonly]), - input[type="datetime"]:focus:not([readonly]), - input[type="datetime-local"]:focus:not([readonly]), - input[type="tel"]:focus:not([readonly]), - input[type="number"]:focus:not([readonly]), - input[type="search"]:focus:not([readonly]), - textarea.materialize-textarea:focus:not([readonly]) { - border-bottom-color: @accent-color; - box-shadow: 0 1px 0 0 @accent-color; - } - /* valid input */ - input:not([type]).valid, - input:not([type]):focus.valid, - input[type="text"].valid, - input[type="text"]:focus.valid, - input[type="password"].valid, - input[type="password"]:focus.valid, - input[type="email"].valid, - input[type="email"]:focus.valid, - input[type="url"].valid, - input[type="url"]:focus.valid, - input[type="time"].valid, - input[type="time"]:focus.valid, - input[type="date"].valid, - input[type="date"]:focus.valid, - input[type="datetime"].valid, - input[type="datetime"]:focus.valid, - input[type="datetime-local"].valid, - input[type="datetime-local"]:focus.valid, - input[type="tel"].valid, - input[type="tel"]:focus.valid, - input[type="number"].valid, - input[type="number"]:focus.valid, - input[type="search"].valid, - input[type="search"]:focus.valid, - textarea.materialize-textarea.valid, - textarea.materialize-textarea:focus.valid { - border-bottom-color: @green; - box-shadow: 0 1px 0 0 @green; - } - - .teal-text, - .teal-text.text-darken-2, - .teal-text.text-lighten-3, - a { - color: @accent-color !important; - } - - .btn, - .btn-large { - color: @text !important; - } - .btn.disabled, - .disabled.btn-large, - .btn-floating.disabled, - .btn-large.disabled, - .btn-flat.disabled, - .btn:disabled, - .btn-floating:disabled, - .btn-large:disabled, - .btn-flat:disabled, - .btn[disabled], - [disabled].btn-large, - .btn-floating[disabled], - .btn-large[disabled], - .btn-flat[disabled], - .btn-large.red[disabled], - .btn-large.red.disabled[id="delete_button"] { - background-color: @mantle !important; - color: @subtext0 !important; - } - .btn-large.red[id="delete_button"] { - color: @mantle !important; - background-color: @red !important; - } - - .card { - background-color: @base; - border-color: @surface0; - } - - thead, - div.material-table table tr td, - div.material-table .table-header { - border-bottom-color: @surface0; - } - - /* modals found in custom chart settings */ - .modal .modal-content, - .modal .modal-footer { - background-color: @surface0; - } - - /* custom chart dropdown menu */ - .select-wrapper input.select-dropdown { - border-bottom-color: @subtext0; - } - .select-dropdown li.optgroup { - border-top-color: @surface1; - } - .select-dropdown li.disabled, - .select-dropdown li.disabled > span, - .select-dropdown li.optgroup { - color: @text; - } - .select-dropdown li.optgroup > span { - color: @subtext1; - } - .dropdown-content li > a, - .dropdown-content li > span { - color: @accent-color; - } - - .divider { - background-color: @surface1; - } - .caret { - color: @overlay1 !important; - } - - /* custom chart lever */ - .switch label .lever { - background-color: @overlay0; - &::after { - background-color: @overlay2; - } - } - .switch label input[type="checkbox"]:checked + .lever { - background-color: desaturate(darken(@accent-color, 25%), 50%); - & when (@lookup=latte) { - background-color: desaturate(lighten(@accent-color, 12%), 30%); - } - &::after { - background-color: @accent-color; - } - } - - /* custom chart filter data */ - .chip { - color: @text; - background-color: @surface1; - } - .chips .chip.selected { - background-color: @accent-color; - color: @base; - } - .chips.focus { - border-bottom-color: @accent-color; - box-shadow: 0 1px 0 0 @accent-color; - } - .chips .input { - color: @text; - } - input[placeholder="Add an other value"] { - border-bottom-color: @overlay2; - } - - /* HIGHCHARTS "let's hope this does'nt break"-section */ - /* all the charts */ - .highcharts-graph when (@graphUseAccentColor=1) { - stroke: @accent-color; - } - .highcharts-graph when (@graphUseAccentColor=0) { - stroke: @red; - } - /* "shadow" area below graph in time navigator */ - .highcharts-area { - fill: fade(@red, 5%) !important; - & when (@graphUseAccentColor=1) { - fill: fade(@accent-color, 5%) !important; - } - } - - /* charts background */ - .highcharts-container { - background: @base !important; - } - /* map blends in with background on latte flavor */ - .highcharts-map-series .highcharts-point { - stroke: @base !important; - & when (@lookup=latte) { - stroke: @overlay0 !important; - } - } - /* graph chart grid */ - .highcharts-grid.highcharts-yaxis-grid .highcharts-grid-line { - stroke: @surface0; - } - /* bottom timeline line */ - .highcharts-tick, - .highcharts-xaxis .highcharts-axis-line { - stroke: @surface1; - } - /* bottom timeline & y axis text text */ - .highcharts-axis-labels.highcharts-xaxis-labels text, - .highcharts-axis-labels.highcharts-yaxis-labels text { - fill: @subtext1 !important; - } - - /* vertical line on graph hover */ - .highcharts-crosshair, - .highcharts-crosshair-thin { - stroke: @overlay2; - } - /* circle marker on graph */ - .highcharts-markers .highcharts-halo.highcharts-color-0 { - fill: @red !important; - stroke: none !important; - & when (@graphUseAccentColor=1) { - fill: @accent-color !important; - } - } - .highcharts-markers path { - fill: @red !important; - stroke: @base !important; - & when (@graphUseAccentColor=1) { - fill: @accent-color !important; - } - } - - /* time navigator on bottom */ - /* active time span */ - .highcharts-navigator, - .highcharts-navigator-mask-inside { - fill: fade(@surface1, 33%); - } - .highcharts-navigator .highcharts-navigator-outline { - stroke: @surface1; - } - /* navigator handles on the left & right */ - .highcharts-navigator .highcharts-navigator-handle { - fill: @surface0; - stroke: @overlay1; - } - /* vertical timestamp lines */ - .highcharts-grid.highcharts-xaxis-grid.highcharts-navigator-xaxis - .highcharts-grid-line { - stroke: @surface1; - } - /* time navigator timestamp text */ - .highcharts-xaxis-labels.highcharts-navigator-xaxis tspan { - fill: @subtext0 !important; - } - - /* scrollbar */ - .highcharts-scrollbar, - .highcharts-scrollbar-track { - fill: @surface0; - stroke: @surface1; - } - .highcharts-scrollbar, - .highcharts-scrollbar-thumb { - fill: @overlay1; - stroke: @overlay1; - } - .highcharts-scrollbar .highcharts-scrollbar-rifles { - stroke: @mantle; - } - .highcharts-scrollbar-button { - fill: @overlay1; - stroke: @overlay1; - } - .highcharts-scrollbar-arrow { - fill: @mantle; - } - - /* buttons */ - .highcharts-button text { - fill: @subtext1 !important; - } - .highcharts-button-box { - fill: @surface0 !important; - stroke: @surface0 !important; - } - .highcharts-button-symbol { - fill: @subtext0 !important; - stroke: @subtext0 !important; - } - /* normal state */ - .highcharts-button.highcharts-button-normal text { - fill: @subtext1 !important; - } - .highcharts-button.highcharts-button-normal .highcharts-button-box { - fill: @surface0 !important; - stroke: @surface0 !important; - } - /* hover state */ - .highcharts-button.highcharts-button-hover text { - fill: @text !important; - } - .highcharts-button.highcharts-button-hover .highcharts-button-box { - fill: @surface2 !important; - stroke: @surface2 !important; - } - /* pressed state */ - .highcharts-button.highcharts-button-pressed text { - fill: @text !important; - } - .highcharts-button.highcharts-button-pressed .highcharts-button-box { - fill: @surface2 !important; - stroke: @surface2 !important; - } - /* disabled state */ - .highcharts-button.highcharts-button-disabled text { - fill: @overlay0 !important; - } - .highcharts-button.highcharts-button-disabled .highcharts-button-box { - fill: @base !important; - stroke: @surface0 !important; - } - - /* "Load full data" button */ - .highcharts-menu { - background: @surface0 !important; - border-color: @surface1 !important; - box-shadow: @mantle 3px 3px 10px !important; - } - .highcharts-menu-item { - color: @text !important; - &:hover { - color: @base !important; - background: @accent-color !important; - } - } - /* pie text "shadow" */ - .highcharts-text-outline { - stroke: @mantle; - stroke-width: 2px; - } - /* pie text */ - .highcharts-label.highcharts-data-label tspan { - fill: @subtext1; - } - /* drilldown pie text */ - .highcharts-label.highcharts-data-label.highcharts-drilldown-data-label - tspan { - fill: @blue; - } - .highcharts-label.highcharts-data-label.highcharts-drilldown-data-label - text { - fill: @blue !important; - color: @blue !important; - } - /* pie subtitle */ - .highcharts-subtitle tspan { - fill: @subtext0; - } - /* pie hover text */ - .highcharts-label.highcharts-tooltip text { - fill: @subtext1 !important; - color: @subtext1 !important; - } - /* hover text */ - .highcharts-label.highcharts-tooltip-box tspan { - fill: @subtext1; - } - /* hover text red dot */ - .highcharts-label.highcharts-tooltip-box tspan[style="fill:#F44336"] { - fill: @red !important; - & when (@graphUseAccentColor=1) { - fill: @accent-color !important; - } - } - /* map hover text */ - .highcharts-label.highcharts-tooltip - span:not(div.highcharts-label > span:nth-child(1) > span:nth-child(1)) { - color: @subtext1 !important; - } - /* "No data to display" */ - .highcharts-label.highcharts-no-data tspan { - fill: @subtext1; - } - /* axis label */ - .highcharts-axis-title tspan { - fill: @subtext1; - } - - /* hover text background */ - .highcharts-label-box, - .highcharts-tooltip-box { - fill: @surface0; - } - - /* legend */ - /* legend title */ - .highcharts-label.highcharts-legend-title text { - fill: @subtext1 !important; - } - /* legend labels */ - .highcharts-axis-labels, - .highcharts-coloraxis-labels text { - fill: @subtext0 !important; - } - /* vertical lines */ - .highcharts-legend-item - .highcharts-grid.highcharts-coloraxis-grid - .highcharts-grid-line { - stroke: @base; - } - /* background only for bar chart legend */ - .highcharts-legend - .highcharts-legend-box[fill="#FFFFFF"][stroke="#999999"] { - fill: @surface0 !important; - stroke: @surface1 !important; - } - /* bar chart entries */ - .highcharts-legend .highcharts-legend-item.highcharts-bar-series tspan { - fill: @subtext1 !important; - &:hover { - fill: @text !important; - } - } - .highcharts-legend - .highcharts-legend-item.highcharts-bar-series.highcharts-legend-item-hidden - tspan { - fill: @overlay2 !important; - &:hover { - fill: @subtext0 !important; - } - } - - .highcharts-point { - stroke: @base !important; - } - /* bar chart circle outline */ - .highcharts-legend .highcharts-legend-item.highcharts-bar-series rect { - stroke: none !important; - } - /* disabled bar chart circle */ - .highcharts-legend - .highcharts-legend-item.highcharts-bar-series.highcharts-legend-item-hidden - rect { - fill: @overlay0 !important; - stroke: none !important; - } - /* bar & pie chart colors */ - /* color 0 */ - .highcharts-point.highcharts-color-0, - .highcharts-halo.highcharts-color-0, - .highcharts-legend-item.highcharts-bar-series.highcharts-color-0 rect { - fill: @red !important; - } - .highcharts-data-label-connector.highcharts-color-0 { - stroke: @red !important; - } - /* color 1 */ - .highcharts-point.highcharts-color-1, - .highcharts-halo.highcharts-color-1, - .highcharts-legend-item.highcharts-bar-series.highcharts-color-1 rect { - fill: @green !important; - } - .highcharts-data-label-connector.highcharts-color-1 { - stroke: @green !important; - } - /* color 2 */ - .highcharts-point.highcharts-color-2, - .highcharts-halo.highcharts-color-2, - .highcharts-legend-item.highcharts-bar-series.highcharts-color-2 rect { - fill: @sky !important; - } - .highcharts-data-label-connector.highcharts-color-2 { - stroke: @sky !important; - } - /* color 3 */ - .highcharts-point.highcharts-color-3, - .highcharts-halo.highcharts-color-3, - .highcharts-legend-item.highcharts-bar-series.highcharts-color-3 rect { - fill: @peach !important; - } - .highcharts-data-label-connector.highcharts-color-3 { - stroke: @peach !important; - } - /* color 4 */ - .highcharts-point.highcharts-color-4, - .highcharts-halo.highcharts-color-4, - .highcharts-legend-item.highcharts-bar-series.highcharts-color-4 rect { - fill: @yellow !important; - } - .highcharts-data-label-connector.highcharts-color-4 { - stroke: @yellow !important; - } - /* color 5 */ - .highcharts-point.highcharts-color-5, - .highcharts-halo.highcharts-color-5, - .highcharts-legend-item.highcharts-bar-series.highcharts-color-5 rect { - fill: @teal !important; - } - .highcharts-data-label-connector.highcharts-color-5 { - stroke: @teal !important; - } - /* color 6 */ - .highcharts-point.highcharts-color-6, - .highcharts-halo.highcharts-color-6, - .highcharts-legend-item.highcharts-bar-series.highcharts-color-6 rect { - fill: @pink !important; - } - .highcharts-data-label-connector.highcharts-color-6 { - stroke: @pink !important; - } - /* color 7 */ - .highcharts-point.highcharts-color-7, - .highcharts-halo.highcharts-color-7, - .highcharts-legend-item.highcharts-bar-series.highcharts-color-7 rect { - fill: @flamingo !important; - } - .highcharts-data-label-connector.highcharts-color-7 { - stroke: @flamingo !important; - } - /* color 8 */ - .highcharts-point.highcharts-color-8, - .highcharts-halo.highcharts-color-8, - .highcharts-legend-item.highcharts-bar-series.highcharts-color-8 rect { - fill: @subtext0 !important; - } - .highcharts-data-label-connector.highcharts-color-8 { - stroke: @subtext0 !important; - } - /* color 9 */ - .highcharts-point.highcharts-color-9, - .highcharts-halo.highcharts-color-9, - .highcharts-legend-item.highcharts-bar-series.highcharts-color-9 rect { - fill: @blue !important; - } - .highcharts-data-label-connector.highcharts-color-9 { - stroke: @blue !important; - } - /* color 10 */ - .highcharts-point.highcharts-color-10, - .highcharts-halo.highcharts-color-10, - .highcharts-legend-item.highcharts-bar-series.highcharts-color-10 rect { - fill: @mauve !important; - } - .highcharts-data-label-connector.highcharts-color-10 { - stroke: @mauve !important; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/bstats/catppuccin.user.less b/styles/bstats/catppuccin.user.less new file mode 100644 index 0000000000..e24b3029d8 --- /dev/null +++ b/styles/bstats/catppuccin.user.less @@ -0,0 +1,813 @@ +/* ==UserStyle== +@name bStats Catppuccin +@namespace github.com/catppuccin/userstyles/styles/bstats +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/bstats +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/bstats/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Abstats +@description Soothing pastel theme for bStats +@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"] + +@var checkbox graphUseAccentColor "Graphs Use Accent" 0 +==/UserStyle== */ + +@-moz-document domain("bstats.org") { + @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, + .collection-header, + .collection-item, + .grey.lighten-4, + .page-footer .footer-copyright { + background: @base !important; + } + .teal.darken-3, + .teal.darken-2, + .dropdown-content, + .side-nav { + background-color: @mantle !important; + } + + .teal { + background-color: @surface0 !important; + } + + /* slide out nav text & icons */ + .subheader, + .left { + color: @text !important; + } + + .collection { + border-color: @surface0; + } + .collection.with-header .collection-header, + .collection .collection-item { + border-bottom-color: @surface0; + } + + .collapsible { + border-top-color: @surface1; + border-right-color: @surface1; + border-left-color: @surface1; + } + .collapsible-body { + border-bottom-color: @surface1; + } + .collapsible-header { + background-color: @surface0 !important; + border-bottom-color: @surface1; + } + + blockquote { + border-left-color: @maroon; + } + /* code box */ + .prettyprint, + .withBox, + .prettyprinted { + background-color: @mantle !important; + outline-color: @mantle; + color: @overlay2; + } + .tag, + .boolean { + color: @blue; + } + .pln { + color: @text; + } + .com { + color: @overlay0; + } + .key { + color: @red; + } + .clo, + .opn, + .pun { + color: @yellow; + } + .str, + .string, + .atv { + color: @green; + } + .atn { + color: @mauve; + } + .number { + color: @peach; + } + + p, + h5, + b, + table, + th, + td, + .white-text, + nav .brand-logo, + nav a, + div.material-table .table-title, + div.material-table table th, + .card-title, + .card-content, + .container, + .center { + color: @text !important; + } + html, + div.material-table table tr td, + .grey-text.text-lighten-4, + .page-footer .footer-copyright { + color: @subtext1 !important; + } + .grey-text, + .grey-text.text-darken-2, + .input-field label, + div.material-table .table-footer label, + div.material-table .table-footer, + label { + color: @subtext0 !important; + } + .blue-text { + color: @blue !important; + } + .red-text { + color: @red !important; + } + .red { + background-color: @red; + } + + /* discord logo on homepage */ + img[src="/images/discord.svg"] when (@lookup = latte) { + filter: saturate(210%) hue-rotate(-20deg) brightness(82%); + } + img[src="/images/discord.svg"] when (@lookup = frappe) { + filter: saturate(53%) hue-rotate(-10deg) brightness(147%) contrast(90%) + sepia(15%) invert(2%); + } + img[src="/images/discord.svg"] when (@lookup = macchiato) { + filter: saturate(52%) hue-rotate(-15deg) brightness(157%) contrast(90%) + sepia(10%); + } + img[src="/images/discord.svg"] when (@lookup = mocha) { + filter: saturate(38%) hue-rotate(-25deg) brightness(153%) sepia(6%); + } + + /* checkbox */ + [type="checkbox"] + label::before, + [type="checkbox"]:not(.filled-in) + label::after { + border-color: @subtext0; + } + [type="checkbox"]:checked + label::before { + border-color: rgba(0, 0, 0, 0); + border-right-color: @green; + border-bottom-color: @green; + } + + /* table hover */ + div.material-table table tbody tr:hover { + background-color: fade(@surface2, 40%); + } + /* nav hover */ + nav ul a:hover { + background-color: fade(@surface2, 40%); + } + .dropdown-content li:hover, + .dropdown-content li.active, + .dropdown-content li.selected { + background-color: fade(@surface2, 5%); + } + + .input-field label { + color: @accent-color !important; + } + /* search unfocused */ + input:not([type]), + input[type="text"], + input[type="password"], + input[type="email"], + input[type="url"], + input[type="time"], + input[type="date"], + input[type="datetime"], + input[type="datetime-local"], + input[type="tel"], + input[type="number"], + input[type="search"], + textarea.materialize-textarea { + border-bottom-color: @subtext0; + box-shadow: 1 1px 0 0 @subtext0; + } + /* search focused */ + input:not([type]):focus:not([readonly]), + input[type="text"]:focus:not([readonly]), + input[type="password"]:focus:not([readonly]), + input[type="email"]:focus:not([readonly]), + input[type="url"]:focus:not([readonly]), + input[type="time"]:focus:not([readonly]), + input[type="date"]:focus:not([readonly]), + input[type="datetime"]:focus:not([readonly]), + input[type="datetime-local"]:focus:not([readonly]), + input[type="tel"]:focus:not([readonly]), + input[type="number"]:focus:not([readonly]), + input[type="search"]:focus:not([readonly]), + textarea.materialize-textarea:focus:not([readonly]) { + border-bottom-color: @accent-color; + box-shadow: 0 1px 0 0 @accent-color; + } + /* valid input */ + input:not([type]).valid, + input:not([type]):focus.valid, + input[type="text"].valid, + input[type="text"]:focus.valid, + input[type="password"].valid, + input[type="password"]:focus.valid, + input[type="email"].valid, + input[type="email"]:focus.valid, + input[type="url"].valid, + input[type="url"]:focus.valid, + input[type="time"].valid, + input[type="time"]:focus.valid, + input[type="date"].valid, + input[type="date"]:focus.valid, + input[type="datetime"].valid, + input[type="datetime"]:focus.valid, + input[type="datetime-local"].valid, + input[type="datetime-local"]:focus.valid, + input[type="tel"].valid, + input[type="tel"]:focus.valid, + input[type="number"].valid, + input[type="number"]:focus.valid, + input[type="search"].valid, + input[type="search"]:focus.valid, + textarea.materialize-textarea.valid, + textarea.materialize-textarea:focus.valid { + border-bottom-color: @green; + box-shadow: 0 1px 0 0 @green; + } + + .teal-text, + .teal-text.text-darken-2, + .teal-text.text-lighten-3, + a { + color: @accent-color !important; + } + + .btn, + .btn-large { + color: @text !important; + } + .btn.disabled, + .disabled.btn-large, + .btn-floating.disabled, + .btn-large.disabled, + .btn-flat.disabled, + .btn:disabled, + .btn-floating:disabled, + .btn-large:disabled, + .btn-flat:disabled, + .btn[disabled], + [disabled].btn-large, + .btn-floating[disabled], + .btn-large[disabled], + .btn-flat[disabled], + .btn-large.red[disabled], + .btn-large.red.disabled[id="delete_button"] { + background-color: @mantle !important; + color: @subtext0 !important; + } + .btn-large.red[id="delete_button"] { + color: @mantle !important; + background-color: @red !important; + } + + .card { + background-color: @base; + border-color: @surface0; + } + + thead, + div.material-table table tr td, + div.material-table .table-header { + border-bottom-color: @surface0; + } + + /* modals found in custom chart settings */ + .modal .modal-content, + .modal .modal-footer { + background-color: @surface0; + } + + /* custom chart dropdown menu */ + .select-wrapper input.select-dropdown { + border-bottom-color: @subtext0; + } + .select-dropdown li.optgroup { + border-top-color: @surface1; + } + .select-dropdown li.disabled, + .select-dropdown li.disabled > span, + .select-dropdown li.optgroup { + color: @text; + } + .select-dropdown li.optgroup > span { + color: @subtext1; + } + .dropdown-content li > a, + .dropdown-content li > span { + color: @accent-color; + } + + .divider { + background-color: @surface1; + } + .caret { + color: @overlay1 !important; + } + + /* custom chart lever */ + .switch label .lever { + background-color: @overlay0; + &::after { + background-color: @overlay2; + } + } + .switch label input[type="checkbox"]:checked + .lever { + background-color: desaturate(darken(@accent-color, 25%), 50%); + & when (@lookup = latte) { + background-color: desaturate(lighten(@accent-color, 12%), 30%); + } + &::after { + background-color: @accent-color; + } + } + + /* custom chart filter data */ + .chip { + color: @text; + background-color: @surface1; + } + .chips .chip.selected { + background-color: @accent-color; + color: @base; + } + .chips.focus { + border-bottom-color: @accent-color; + box-shadow: 0 1px 0 0 @accent-color; + } + .chips .input { + color: @text; + } + input[placeholder="Add an other value"] { + border-bottom-color: @overlay2; + } + + /* HIGHCHARTS "let's hope this does'nt break"-section */ + /* all the charts */ + .highcharts-graph when (@graphUseAccentColor = 1) { + stroke: @accent-color; + } + .highcharts-graph when (@graphUseAccentColor = 0) { + stroke: @red; + } + /* "shadow" area below graph in time navigator */ + .highcharts-area { + fill: fade(@red, 5%) !important; + & when (@graphUseAccentColor = 1) { + fill: fade(@accent-color, 5%) !important; + } + } + + /* charts background */ + .highcharts-container { + background: @base !important; + } + /* map blends in with background on latte flavor */ + .highcharts-map-series .highcharts-point { + stroke: @base !important; + & when (@lookup = latte) { + stroke: @overlay0 !important; + } + } + /* graph chart grid */ + .highcharts-grid.highcharts-yaxis-grid .highcharts-grid-line { + stroke: @surface0; + } + /* bottom timeline line */ + .highcharts-tick, + .highcharts-xaxis .highcharts-axis-line { + stroke: @surface1; + } + /* bottom timeline & y axis text text */ + .highcharts-axis-labels.highcharts-xaxis-labels text, + .highcharts-axis-labels.highcharts-yaxis-labels text { + fill: @subtext1 !important; + } + + /* vertical line on graph hover */ + .highcharts-crosshair, + .highcharts-crosshair-thin { + stroke: @overlay2; + } + /* circle marker on graph */ + .highcharts-markers .highcharts-halo.highcharts-color-0 { + fill: @red !important; + stroke: none !important; + & when (@graphUseAccentColor = 1) { + fill: @accent-color !important; + } + } + .highcharts-markers path { + fill: @red !important; + stroke: @base !important; + & when (@graphUseAccentColor = 1) { + fill: @accent-color !important; + } + } + + /* time navigator on bottom */ + /* active time span */ + .highcharts-navigator, + .highcharts-navigator-mask-inside { + fill: fade(@surface1, 33%); + } + .highcharts-navigator .highcharts-navigator-outline { + stroke: @surface1; + } + /* navigator handles on the left & right */ + .highcharts-navigator .highcharts-navigator-handle { + fill: @surface0; + stroke: @overlay1; + } + /* vertical timestamp lines */ + .highcharts-grid.highcharts-xaxis-grid.highcharts-navigator-xaxis + .highcharts-grid-line { + stroke: @surface1; + } + /* time navigator timestamp text */ + .highcharts-xaxis-labels.highcharts-navigator-xaxis tspan { + fill: @subtext0 !important; + } + + /* scrollbar */ + .highcharts-scrollbar, + .highcharts-scrollbar-track { + fill: @surface0; + stroke: @surface1; + } + .highcharts-scrollbar, + .highcharts-scrollbar-thumb { + fill: @overlay1; + stroke: @overlay1; + } + .highcharts-scrollbar .highcharts-scrollbar-rifles { + stroke: @mantle; + } + .highcharts-scrollbar-button { + fill: @overlay1; + stroke: @overlay1; + } + .highcharts-scrollbar-arrow { + fill: @mantle; + } + + /* buttons */ + .highcharts-button text { + fill: @subtext1 !important; + } + .highcharts-button-box { + fill: @surface0 !important; + stroke: @surface0 !important; + } + .highcharts-button-symbol { + fill: @subtext0 !important; + stroke: @subtext0 !important; + } + /* normal state */ + .highcharts-button.highcharts-button-normal text { + fill: @subtext1 !important; + } + .highcharts-button.highcharts-button-normal .highcharts-button-box { + fill: @surface0 !important; + stroke: @surface0 !important; + } + /* hover state */ + .highcharts-button.highcharts-button-hover text { + fill: @text !important; + } + .highcharts-button.highcharts-button-hover .highcharts-button-box { + fill: @surface2 !important; + stroke: @surface2 !important; + } + /* pressed state */ + .highcharts-button.highcharts-button-pressed text { + fill: @text !important; + } + .highcharts-button.highcharts-button-pressed .highcharts-button-box { + fill: @surface2 !important; + stroke: @surface2 !important; + } + /* disabled state */ + .highcharts-button.highcharts-button-disabled text { + fill: @overlay0 !important; + } + .highcharts-button.highcharts-button-disabled .highcharts-button-box { + fill: @base !important; + stroke: @surface0 !important; + } + + /* "Load full data" button */ + .highcharts-menu { + background: @surface0 !important; + border-color: @surface1 !important; + box-shadow: @mantle 3px 3px 10px !important; + } + .highcharts-menu-item { + color: @text !important; + &:hover { + color: @base !important; + background: @accent-color !important; + } + } + /* pie text "shadow" */ + .highcharts-text-outline { + stroke: @mantle; + stroke-width: 2px; + } + /* pie text */ + .highcharts-label.highcharts-data-label tspan { + fill: @subtext1; + } + /* drilldown pie text */ + .highcharts-label.highcharts-data-label.highcharts-drilldown-data-label + tspan { + fill: @blue; + } + .highcharts-label.highcharts-data-label.highcharts-drilldown-data-label + text { + fill: @blue !important; + color: @blue !important; + } + /* pie subtitle */ + .highcharts-subtitle tspan { + fill: @subtext0; + } + /* pie hover text */ + .highcharts-label.highcharts-tooltip text { + fill: @subtext1 !important; + color: @subtext1 !important; + } + /* hover text */ + .highcharts-label.highcharts-tooltip-box tspan { + fill: @subtext1; + } + /* hover text red dot */ + .highcharts-label.highcharts-tooltip-box tspan[style="fill:#F44336"] { + fill: @red !important; + & when (@graphUseAccentColor = 1) { + fill: @accent-color !important; + } + } + /* map hover text */ + .highcharts-label.highcharts-tooltip + span:not(div.highcharts-label > span:nth-child(1) > span:nth-child(1)) { + color: @subtext1 !important; + } + /* "No data to display" */ + .highcharts-label.highcharts-no-data tspan { + fill: @subtext1; + } + /* axis label */ + .highcharts-axis-title tspan { + fill: @subtext1; + } + + /* hover text background */ + .highcharts-label-box, + .highcharts-tooltip-box { + fill: @surface0; + } + + /* legend */ + /* legend title */ + .highcharts-label.highcharts-legend-title text { + fill: @subtext1 !important; + } + /* legend labels */ + .highcharts-axis-labels, + .highcharts-coloraxis-labels text { + fill: @subtext0 !important; + } + /* vertical lines */ + .highcharts-legend-item + .highcharts-grid.highcharts-coloraxis-grid + .highcharts-grid-line { + stroke: @base; + } + /* background only for bar chart legend */ + .highcharts-legend + .highcharts-legend-box[fill="#FFFFFF"][stroke="#999999"] { + fill: @surface0 !important; + stroke: @surface1 !important; + } + /* bar chart entries */ + .highcharts-legend .highcharts-legend-item.highcharts-bar-series tspan { + fill: @subtext1 !important; + &:hover { + fill: @text !important; + } + } + .highcharts-legend + .highcharts-legend-item.highcharts-bar-series.highcharts-legend-item-hidden + tspan { + fill: @overlay2 !important; + &:hover { + fill: @subtext0 !important; + } + } + + .highcharts-point { + stroke: @base !important; + } + /* bar chart circle outline */ + .highcharts-legend .highcharts-legend-item.highcharts-bar-series rect { + stroke: none !important; + } + /* disabled bar chart circle */ + .highcharts-legend + .highcharts-legend-item.highcharts-bar-series.highcharts-legend-item-hidden + rect { + fill: @overlay0 !important; + stroke: none !important; + } + /* bar & pie chart colors */ + /* color 0 */ + .highcharts-point.highcharts-color-0, + .highcharts-halo.highcharts-color-0, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-0 rect { + fill: @red !important; + } + .highcharts-data-label-connector.highcharts-color-0 { + stroke: @red !important; + } + /* color 1 */ + .highcharts-point.highcharts-color-1, + .highcharts-halo.highcharts-color-1, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-1 rect { + fill: @green !important; + } + .highcharts-data-label-connector.highcharts-color-1 { + stroke: @green !important; + } + /* color 2 */ + .highcharts-point.highcharts-color-2, + .highcharts-halo.highcharts-color-2, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-2 rect { + fill: @sky !important; + } + .highcharts-data-label-connector.highcharts-color-2 { + stroke: @sky !important; + } + /* color 3 */ + .highcharts-point.highcharts-color-3, + .highcharts-halo.highcharts-color-3, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-3 rect { + fill: @peach !important; + } + .highcharts-data-label-connector.highcharts-color-3 { + stroke: @peach !important; + } + /* color 4 */ + .highcharts-point.highcharts-color-4, + .highcharts-halo.highcharts-color-4, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-4 rect { + fill: @yellow !important; + } + .highcharts-data-label-connector.highcharts-color-4 { + stroke: @yellow !important; + } + /* color 5 */ + .highcharts-point.highcharts-color-5, + .highcharts-halo.highcharts-color-5, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-5 rect { + fill: @teal !important; + } + .highcharts-data-label-connector.highcharts-color-5 { + stroke: @teal !important; + } + /* color 6 */ + .highcharts-point.highcharts-color-6, + .highcharts-halo.highcharts-color-6, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-6 rect { + fill: @pink !important; + } + .highcharts-data-label-connector.highcharts-color-6 { + stroke: @pink !important; + } + /* color 7 */ + .highcharts-point.highcharts-color-7, + .highcharts-halo.highcharts-color-7, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-7 rect { + fill: @flamingo !important; + } + .highcharts-data-label-connector.highcharts-color-7 { + stroke: @flamingo !important; + } + /* color 8 */ + .highcharts-point.highcharts-color-8, + .highcharts-halo.highcharts-color-8, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-8 rect { + fill: @subtext0 !important; + } + .highcharts-data-label-connector.highcharts-color-8 { + stroke: @subtext0 !important; + } + /* color 9 */ + .highcharts-point.highcharts-color-9, + .highcharts-halo.highcharts-color-9, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-9 rect { + fill: @blue !important; + } + .highcharts-data-label-connector.highcharts-color-9 { + stroke: @blue !important; + } + /* color 10 */ + .highcharts-point.highcharts-color-10, + .highcharts-halo.highcharts-color-10, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-10 rect { + fill: @mauve !important; + } + .highcharts-data-label-connector.highcharts-color-10 { + stroke: @mauve !important; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/canvas-lms/catppuccin.user.css b/styles/canvas-lms/catppuccin.user.css index 6f2d324af7..211cdf8212 100644 --- a/styles/canvas-lms/catppuccin.user.css +++ b/styles/canvas-lms/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Canvas LMS Catppuccin +@name Canvas LMS Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/canvas-lms @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/canvas-lms -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/canvas-lms/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/canvas-lms/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acanvas-lms @description Soothing pastel theme for Canvas LMS @author Catppuccin @@ -13,177 +13,4 @@ @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("instructure.com") { - @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; - } - } - - #breadcrumbs, - #printQuizButton, - #content, - .navigation-tray-container, - .ic-Dashboard-header__layout, - .button-sidebar-wide, - .access_tokens, - .context_modules, - .textarea-container, - .Button, - .panel, - span { - background-color: @base; - color: @accent-color; - } - - #application, - .comments, - .module-sequence-footer-content, - .immersive_reader_mount_point, - .context_modules { - background: @base !important; - background-color: @base !important; - color: @accent-color !important; - } - - a, - .page-title { - color: fadeout(@text, 80%) !important; - } - - * { - color: @text !important; - background-color: @base !important; - } - .ic-DashboardCard, - .ic-DashboardCard__header_content, - .ic-DashboardCard__action-container, - .ic-DashboardCard__header-subtitle, - .ic-DashboardCard__header-title, - .ic-DashboardCard__header-term { - background-color: @surface0 !important; - } - - .ic-app-header__main-navigation, - .ic-app-header__logomark-container { - background-color: @crust !important; - } - - .ic-app-header__menu-list-item.ic-app-header__menu-list-item--active - .ic-app-header__menu-list-link { - background-color: fadeout(@crust, 80%); - } - - body { - background-color: @base; - } - - #right-side .events_list .event-details::after, - #right-side .events_list .todo-details::after, - #right-side .to-do-list .event-details::after, - #right-side .to-do-list .todo-details::after { - content: ""; - position: absolute; - top: 0; - right: 0; - height: 100%; - width: 12px; - background: linear-gradient( - to right, - rgba(255, 255, 255, 0) 0%, - @surface0 80% - ); - } - - :root { - --ic-brand-global-nav-avatar-border: @accent-color; - --ic-brand-font-color-dark: fadeout(@accent-color, 80%); - --ic-brand-primary: @accent-color; - --ic-brand-global-nav-ic-icon-svg-fill: fadeout(@accent-color, 50%); - --eMdva-color: @base !important; - --ccWIh-color: @crust; - } - .unread_count, - .menu-item-icon-container, - .menu-item__badge, - .nav-badge { - color: fadeout(@text, 80%); - } - - .list-view a.active { - border-left-color: #007fff; - color: #007fff; - } - - // Fix file preview - nav.ViewerControls * { - background-color: @surface1 !important; - } - div.Pages, - .Page-container { - background-color: #f2f2f2 !important; - } - .Page-container * { - background-color: transparent !important; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less new file mode 100644 index 0000000000..ce7c9dc05d --- /dev/null +++ b/styles/canvas-lms/catppuccin.user.less @@ -0,0 +1,187 @@ +/* ==UserStyle== +@name Canvas LMS Catppuccin +@namespace github.com/catppuccin/userstyles/styles/canvas-lms +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/canvas-lms +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/canvas-lms/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acanvas-lms +@description Soothing pastel theme for Canvas LMS +@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("instructure.com") { + @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; + } + } + + #breadcrumbs, + #printQuizButton, + #content, + .navigation-tray-container, + .ic-Dashboard-header__layout, + .button-sidebar-wide, + .access_tokens, + .context_modules, + .textarea-container, + .Button, + .panel, + span { + background-color: @base; + color: @accent-color; + } + + #application, + .comments, + .module-sequence-footer-content, + .immersive_reader_mount_point, + .context_modules { + background: @base !important; + background-color: @base !important; + color: @accent-color !important; + } + + a, + .page-title { + color: fadeout(@text, 80%) !important; + } + + * { + color: @text !important; + background-color: @base !important; + } + .ic-DashboardCard, + .ic-DashboardCard__header_content, + .ic-DashboardCard__action-container, + .ic-DashboardCard__header-subtitle, + .ic-DashboardCard__header-title, + .ic-DashboardCard__header-term { + background-color: @surface0 !important; + } + + .ic-app-header__main-navigation, + .ic-app-header__logomark-container { + background-color: @crust !important; + } + + .ic-app-header__menu-list-item.ic-app-header__menu-list-item--active + .ic-app-header__menu-list-link { + background-color: fadeout(@crust, 80%); + } + + body { + background-color: @base; + } + + #right-side .events_list .event-details::after, + #right-side .events_list .todo-details::after, + #right-side .to-do-list .event-details::after, + #right-side .to-do-list .todo-details::after { + content: ""; + position: absolute; + top: 0; + right: 0; + height: 100%; + width: 12px; + background: linear-gradient( + to right, + rgba(255, 255, 255, 0) 0%, + @surface0 80% + ); + } + + :root { + --ic-brand-global-nav-avatar-border: @accent-color; + --ic-brand-font-color-dark: fadeout(@accent-color, 80%); + --ic-brand-primary: @accent-color; + --ic-brand-global-nav-ic-icon-svg-fill: fadeout(@accent-color, 50%); + --eMdva-color: @base !important; + --ccWIh-color: @crust; + } + .unread_count, + .menu-item-icon-container, + .menu-item__badge, + .nav-badge { + color: fadeout(@text, 80%); + } + + .list-view a.active { + border-left-color: #007fff; + color: #007fff; + } + + // Fix file preview + nav.ViewerControls * { + background-color: @surface1 !important; + } + div.Pages, + .Page-container { + background-color: #f2f2f2 !important; + } + .Page-container * { + background-color: transparent !important; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/chatgpt/catppuccin.user.css b/styles/chatgpt/catppuccin.user.css index 10acfe2d1d..64a288932b 100644 --- a/styles/chatgpt/catppuccin.user.css +++ b/styles/chatgpt/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name ChatGPT Catppuccin +@name ChatGPT Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/chatgpt @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/chatgpt -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chatgpt/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chatgpt/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Achatgpt @description Soothing pastel theme for ChatGPT @author Catppuccin @@ -13,1230 +13,4 @@ @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("chatgpt.com") { - @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); - - :root.light { - #catppuccin(@lightFlavor, @accentColor); - } - - :root.dark { - #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]; - - --ctp-rosewater: @rosewater; - --ctp-flamingo: @flamingo; - --ctp-pink: @pink; - --ctp-mauve: @mauve; - --ctp-red: @red; - --ctp-maroon: @maroon; - --ctp-peach: @peach; - --ctp-yellow: @yellow; - --ctp-green: @green; - --ctp-teal: @teal; - --ctp-sky: @sky; - --ctp-sapphire: @sapphire; - --ctp-blue: @blue; - --ctp-lavender: @lavender; - --ctp-text: @text; - --ctp-subtext1: @subtext1; - --ctp-subtext0: @subtext0; - --ctp-overlay2: @overlay2; - --ctp-overlay1: @overlay1; - --ctp-overlay0: @overlay0; - --ctp-surface2: @surface2; - --ctp-surface1: @surface1; - --ctp-surface0: @surface0; - --ctp-base: @base; - --ctp-mantle: @mantle; - --ctp-crust: @crust; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - code.hljs { - background: none !important; - } - pre { - .bg-token-main-surface-secondary { - background-color: @surface0; - } - .bg-gray-950 { - background-color: @crust; - } - .text-token-text-secondary { - color: @subtext0; - } - } - - .dark\:bg-gray-950:is(.dark *) { - background-color: @mantle; - } - - color: @text; - - @white: if(@lookup=latte, @crust, @text); - @black: if(@lookup=latte, @text, @crust); - --white: @white; - --black: @black; - - & when not (@lookup = latte) { - --gray-50: lighten(mix(@text, @subtext0), 5%); - --gray-100: @text; - --gray-200: @subtext1; - --gray-300: @overlay2; - --gray-400: @overlay0; - --gray-500: @surface2; - --gray-600: @surface1; - --gray-700: @surface0; - --gray-750: @surface0; - --gray-800: @base; - --gray-900: @mantle; - --gray-950: @crust; - --brand-purple: @accent-color; - --text-primary: var(--gray-100) !important; - --text-secondary: var(--gray-200) !important; - --text-tertiary: var(--gray-300) !important; - --text-quaternary: var(--gray-500) !important; - --main-surface-primary: var(--gray-800) !important; - --main-surface-secondary: var(--gray-700) !important; - --main-surface-tertiary: var(--gray-600) !important; - --message-surface: var(--gray-700) !important; - --sidebar-surface-primary: var(--gray-900); - --sidebar-surface-secondary: var(--gray-800); - --sidebar-surface-tertiary: var(--gray-700); - .popover, - .dark .popover, - .dark.popover, - .popover .dark { - --main-surface-primary: var(--gray-700) !important; - --main-surface-secondary: var(--gray-600) !important; - --main-surface-tertiary: var(--gray-500) !important; - --text-primary: var(--white) !important; - --text-secondary: var(--gray-200) !important; - --text-tertiary: var(--gray-300) !important; - } - } - & when (@lookup = latte) { - --gray-50: @crust; - --gray-100: @mantle; - --gray-200: @base; - --gray-300: @surface0; - --gray-400: @surface1; - --gray-500: @surface2; - --gray-600: @overlay0; - --gray-700: @overlay1; - --gray-800: @subtext0; - --gray-900: @subtext1; - --gray-950: @text; - --brand-purple: @accent-color; - --text-primary: var(--gray-950); - --text-secondary: var(--gray-600); - --text-tertiary: var(--gray-400); - --text-quaternary: var(--gray-300); - --main-surface-primary: var(--gray-200); - --main-surface-secondary: var(--gray-100); - --main-surface-tertiary: var(--gray-50); - --message-surface: var(--gray-100) !important; - --sidebar-surface-primary: var(--gray-100); - --sidebar-surface-secondary: var(--gray-200); - --sidebar-surface-tertiary: var(--gray-300); - .popover, - .dark .popover, - .dark.popover, - .popover .dark { - --main-surface-primary: var(--gray-200) !important; - --main-surface-secondary: var(--gray-100) !important; - --main-surface-tertiary: var(--gray-50) !important; - --text-primary: var(--gray-950) !important; - --text-secondary: var(--gray-600) !important; - --text-tertiary: var(--gray-500) !important; - } - } - - --border-light: fade(@text, 10%); - --border-medium: fade(@text, 15%); - --border-heavy: fade(@text, 20%); - --border-xheavy: fade(@text, 25%); - --link: @accent-color; - --link-hover: if( - @lookup = latte, - lighten(@accent-color, 10%), - darken(@accent-color, 10%) - ); - - *:focus { - --tw-ring-offset-color: @base; - --tw-ring-color: @accent-color; - } - - /* ChatGPT logo */ - [style*="background-color: rgb(25, 195, 125);"] { - background-color: @green !important; - color: @base !important; - } - - /* Input */ - - select { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;@{svg}"); - } - - [multiple], - [type="date"], - [type="datetime-local"], - [type="email"], - [type="month"], - [type="number"], - [type="password"], - [type="search"], - [type="tel"], - [type="text"], - [type="time"], - [type="url"], - [type="week"], - select, - textarea { - background-color: @base; - border-color: @overlay2; - } - - [type="checkbox"], - [type="radio"] { - background-color: @base; - border-color: @overlay2; - color: @accent-color; - } - - .form-input, - .form-multiselect, - .form-select, - .form-textarea { - background-color: @base; - border-color: @overlay2; - } - - .form-input:focus, - .form-multiselect:focus, - .form-select:focus, - .form-textarea:focus { - border-color: @accent-color; - } - - .form-input::placeholder, - .form-textarea::placeholder { - color: @overlay2; - } - - /* Buttons */ - - .btn-primary, - .btn-green { - background-color: @accent-color; - color: @base; - - &:hover { - background-color: darken(@accent-color, 10%); - } - - &:focus-visible { - --tw-ring-color: darken(@accent-color, 10%) !important; - } - } - - .btn-danger { - background-color: @red; - color: @base; - - &:hover:not(:disabled) { - background-color: darken(@red, 10%); - } - - &.focus-visible, - &:focus-visible { - --tw-ring-color: darken(@red, 10%) !important; - } - } - - .btn-danger-outline { - border-color: @red; - color: @red; - - &.focus-visible, - &:focus-visible { - --tw-ring-color: lighten(@red, 10%) !important; - } - } - - .btn-neutral { - &.focus-visible, - &:focus-visible { - --tw-ring-color: @overlay0 !important; - } - } - - .btn-dark { - background-color: @surface0; - border-color: @overlay0; - color: @text; - - &:hover { - background-color: @surface1; - } - } - - .btn-light { - background-color: @overlay1; - color: @black; - - &:hover { - background-color: @overlay0; - } - } - - .btn-disabled, - .btn-disabled:hover { - background-color: @text; - } - - /* Borders */ - - .border-black, - .border-black\/10, - .border-black\/20, - .border-black\/30, - .border-black\/5 { - border-color: var(--border-light); - } - - .border-gray-100 { - border-color: var(--gray-100); - } - - .border-gray-200 { - border-color: var(--gray-200); - } - - .border-gray-300 { - border-color: var(--gray-300); - } - - .border-gray-400 { - border-color: var(--gray-400); - } - - .border-gray-500 { - border-color: var(--gray-500); - } - - .border-gray-700 { - border-color: var(--gray-700); - } - - .border-gray-950 { - border-color: var(--gray-950); - } - - .border-green-500 { - border-color: lighten(@green, 10%); - } - - .border-green-600 { - border-color: @green; - } - - .border-orange-400 { - border-color: lighten(mix(@red, @yellow), 10%); - } - - .border-orange-500 { - border-color: mix(@red, @yellow); - } - - .border-red-500 { - border-color: darken(@red, 10%); - } - - .border-white { - border-color: @white; - } - - .border-white\/20 { - border-color: fade(@white, 20%); - } - - .border-t-[\#0077FF] { - border-top-color: @blue; - } - - /* Backgrounds */ - .bg-token-main-surface-primary { - background-color: var(--main-surface-primary); - } - - .\!bg-brand-purple { - background-color: @accent-color !important; - } - - .\!bg-gray-200 { - background-color: var(--gray-200) !important; - } - - .btn-blue { - background-color: @blue; - color: @crust; - - &:hover { - background-color: darken(@blue, 5%); - } - } - - .bg-[\#0077FF], - .bg-\[\#3C46FF\], - .bg-[\#3C46FF], - .bg-[\#4046EC] { - background-color: @blue; - } - - .hover\:bg-\[\#0000FF\]:hover { - background-color: darken(@blue, 5%); - } - - .bg-[\#10A37F] { - background-color: @green; - } - - .bg-[\#B161FD] { - background-color: @accent-color; - } - - .bg-[\#F8CA27] { - background-color: @yellow; - } - - .bg-[\#FF5588] { - background-color: mix(@red, @pink); - } - - .bg-[\#FF6E3C] { - background-color: saturate(mix(@red, @yellow), 10%); - } - .dark\:radix-highlighted\:bg-\[\#2E2F33\][data-highlighted] { - background-color: @surface0; - } - - .bg-black { - background-color: @black; - } - - .bg-black\/20 { - background-color: fade(@black, 20%); - } - - .bg-black\/5 { - background-color: fade(@black, 5%); - } - - .bg-black\/50 { - background-color: fade(@black, 50%); - } - - .bg-black\/90 { - background-color: fade(@black, 90%); - } - - .bg-black\/\[\.04\] { - background-color: fade(@black, 4%); - } - - .bg-black\/\[\.08\] { - background-color: fade(@black, 8%); - } - - .bg-black\/\[\.12\] { - background-color: fade(@black, 12%); - } - - .bg-blue-100 { - background-color: lighten(@blue, 30%); - } - - .bg-blue-200 { - background-color: lighten(@blue, 20%); - } - - .bg-blue-300 { - background-color: lighten(@blue, 10%); - } - - .bg-blue-400 { - background-color: @blue; - } - - .bg-blue-500 { - background-color: darken(@blue, 5%); - } - - .bg-blue-700 { - background-color: darken(@blue, 10%); - } - - .hover\:bg-blue-700:hover { - background-color: darken(@blue, 15%); - } - - .bg-brand-blue-800 { - background-color: darken(@blue, 10%); - } - - .bg-blue-950 { - background-color: darken(@blue, 30%); - } - - .checked\:bg-blue-600:checked { - background-color: @accent-color; - } - - .bg-brand-green { - background-color: lighten(@green, 10%); - } - - .bg-brand-green\/20 { - background-color: fade(lighten(@green, 10%), 20%); - } - - .bg-brand-green\/40 { - background-color: fade(lighten(@green, 10%), 40%); - } - - .bg-brand-purple { - background-color: @accent-color; - } - - .bg-gray-100 { - background-color: var(--gray-100); - } - - .bg-gray-200 { - background-color: var(--gray-200); - } - - .bg-gray-300 { - background-color: var(--gray-300); - } - - .bg-gray-400 { - background-color: var(--gray-400); - } - - .bg-gray-50 { - background-color: var(--gray-50); - } - - .bg-gray-500 { - background-color: var(--gray-500); - } - - .bg-gray-600 { - background-color: var(--gray-600); - } - - .bg-gray-700 { - background-color: var(--gray-700); - } - - .bg-gray-900 { - background-color: var(--gray-900); - } - - .bg-gray-950 { - background-color: var(--gray-950); - } - - .bg-green-100 { - background-color: lighten(@green, 30%); - } - - .bg-green-200 { - background-color: lighten(@green, 20%); - } - - .bg-green-500 { - background-color: lighten(@green, 10%); - } - - .bg-green-500\/10 { - background-color: fade(lighten(@green, 10%), 10%); - } - - .bg-green-600 { - background-color: @green; - } - - .bg-orange-500 { - background-color: mix(@yellow, @red); - } - - .bg-orange-500\/10 { - background-color: fade(mix(@yellow, @red), 10%); - } - - .bg-red-100 { - background-color: fade(lighten(@red, 10%), 30%); - } - - .bg-red-200 { - background-color: lighten(@red, 20%); - } - - .bg-red-500 { - background-color: @red; - } - - .bg-red-500\/10 { - background-color: fade(@red, 10%); - } - - .bg-red-600 { - background-color: lighten(@red, 10%); - } - - .bg-white { - background-color: @white; - } - - .bg-white\/20 { - background-color: fade(@white, 20%); - } - - .bg-white\/25 { - background-color: fade(@white, 25%); - } - - .bg-yellow-100 { - background-color: lighten(@yellow, 20%); - } - - .bg-yellow-200 { - background-color: lighten(@yellow, 10%); - } - - .bg-yellow-400 { - background-color: @yellow; - } - - .bg-yellow-500 { - background-color: darken(@yellow, 10%); - } - - .radix-state-checked\:\!bg-green-600[data-state="checked"] { - background-color: @accent-color !important; - } - - .dark\:radix-state-checked\:border-green-600[data-state="checked"]:is( - .dark * - ) { - border-color: @accent-color; - } - - [class*="bg-transparent"] { - background-color: transparent; - } - - /* Gradients */ - - .from-white { - --tw-gradient-from: @base var(--tw-gradient-from-position); - } - - /* Fill/stroke */ - - .fill-yellow-500 { - fill: @yellow; - } - - .stroke-black { - stroke: @black; - } - - .stroke-brand-purple\/25 { - stroke: fade(@accent-color, 25%); - } - - .stroke-gray-400 { - stroke: @subtext0; - } - - /* Text */ - - .\!text-black { - color: @black !important; - } - - .text-\[\#FE7600\] { - color: mix(@yellow, @red); - } - - .text-\[\#fff\] { - color: @base; - } - - .text-black { - color: @black; - } - - .text-black\/60 { - color: fade(@black, 60%); - } - - .text-black\/70 { - color: fade(@black, 70%); - } - - .text-blue-500 { - color: lighten(@blue, 10%); - } - - .text-blue-600 { - color: @blue; - } - - .text-brand-blue-800 { - color: @blue; - } - - .text-brand-purple { - color: @accent-color; - } - - .text-gray-100 { - color: var(--gray-100); - } - - .text-gray-300 { - color: var(--gray-300); - } - - .text-gray-400 { - color: var(--gray-400); - } - - .text-gray-500 { - color: var(--gray-500); - } - - .text-gray-600 { - color: var(--gray-600); - } - - .text-gray-700 { - color: var(--gray-700); - } - - .text-gray-800 { - color: var(--gray-800); - } - - .text-gray-900 { - color: var(--gray-900); - } - - .text-green-500 { - color: lighten(@green, 10%); - } - - .text-green-600 { - color: @green; - } - - .text-green-700 { - color: darken(@green, 10%); - } - - .text-green-800 { - color: darken(@green, 20%); - } - - .text-green-900 { - color: darken(@green, 30%); - } - - .text-orange-300 { - color: lighten(mix(@yellow, @red), 15%); - } - - .text-orange-400 { - color: lighten(mix(@yellow, @red), 10%); - } - - .text-orange-500 { - color: mix(@yellow, @red); - } - - .text-red-500 { - color: @red; - } - - .text-red-600 { - color: lighten(@red, 10%); - } - - .text-red-700 { - color: @red; - } - - .text-red-800 { - color: darken(@red, 10%); - } - - .text-token-text-error { - --text-error: @red; - } - - .text-white { - color: @white; - } - - .text-white\/25 { - color: fade(@white, 25%); - } - - .text-white\/50 { - color: fade(@white, 50%); - } - - .text-white\/80 { - color: fade(@white, 80%); - } - - .text-yellow-500 { - color: @yellow; - } - - .text-yellow-700 { - color: darken(@yellow, 10%); - } - - .text-yellow-800 { - color: darken(@yellow, 20%); - } - - .text-yellow-900 { - color: darken(@yellow, 30%); - } - - /* Dark mode overrides */ - /* stylelint-disable-next-line no-duplicate-selectors */ - & when not (@lookup = latte) { - .dark\:bg-black { - background-color: @black; - } - - .dark\:bg-white { - background-color: @white; - } - - .dark\:bg-gray-700 { - background-color: var(--gray-700); - } - - /* "Was this response better or worse" dialog button hover */ - .dark\:hover\:bg-gray-800:hover { - background-color: transparent; - } - - .dark\:text-white { - color: @white; - } - - .dark\:text-black { - color: @black; - } - - /* Chat suggestions on new chat page */ - .dark\:text-gray-500 { - color: var(--gray-300); - } - - .dark\:text-\[\#D292FF\] { - color: @mauve; - } - - .dark\:focus\:border-white:focus { - border-color: @text; - } - - .dark\:border-gray-700 { - border-color: var(--gray-700); - } - - /* Up arrow send message button */ - .disabled\:dark\:bg-token-text-quaternary:is(.dark *):disabled { - background-color: var(--text-quaternary); - } - .dark\:disabled\:text-token-main-surface-secondary:disabled:is(.dark *) { - color: var(--main-surface-secondary); - } - } - - /* Other */ - - .ring-black { - --tw-ring-color: @black; - } - - .ring-black\/10 { - --tw-ring-color: fade(@black, 10%); - } - - .ring-white { - --tw-ring-color: @base; - } - - .ring-offset-black { - --tw-ring-offset-color: @base; - } - - /* Invalid LaTeX expressions */ - [style*="color: rgb(204, 0, 0)"] { - color: @red; - } - - /* Circle around OpenAI logo in center of chat */ - .gizmo-shadow-stroke::after { - --tw-shadow: inset 0 0 0 1px @surface0; - } - - .katex-error { - color: @red !important; - } - - [style="background-color: rgb(0, 0, 46);"], - [style="background-color: rgb(255, 255, 219);"] { - background-color: @crust !important; - } - - /* Icon colors for chat suggestion icons on new chat page */ - svg[style="color: rgb(203, 139, 208);"] { - color: @pink !important; - } - svg[style="color: rgb(226, 197, 65);"] { - color: @yellow !important; - } - svg[style="color: rgb(118, 208, 235);"] { - color: @teal !important; - } - svg[style="color: rgb(237, 98, 98);"] { - color: @red !important; - } - } -} - -@-moz-document domain("auth.openai.com") { - @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; - } - } - - color: @text; - background-color: @base; - caret-color: @text; - - a { - color: @accent-color; - } - - body, - .oai-header, - .oai-footer, - .login-container, - .main-container { - background-color: @base; - } - - .oai-header img { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - background-color: transparent; - } - - .title { - color: @text; - } - - .email-input { - background-color: @base; - border-color: @surface0; - color: @text; - - &:focus, - &:valid { - border-color: @accent-color; - - + .email-label { - color: @accent-color; - background-color: @base; - } - } - } - .email-label { - background-color: @base; - color: @subtext0; - } - - .continue-btn { - background-color: @accent-color; - color: @base; - } - - .divider-wrapper { - &::before, - &::after { - border-bottom-color: @surface2; - } - } - - .social-btn { - background-color: @mantle; - border-color: @surface0; - color: @text; - } - - @orange: mix(@red, @yellow); - - img[alt="Google logo"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - img[alt="Microsoft logo"] { - @svg: escape( - '' - ); - - content: url("data:image/svg+xml,@{svg}"); - } - img[alt="Apple logo"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } -} - -@-moz-document domain("auth0.openai.com") { - @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]; - - --primary-color: @accent-color; - --primary-color-no-override: @accent-color; - --action-primary-color: @accent-color; - --link-color: @accent-color; - --page-background-color: @base; - --info-color: @blue; - --success-color: @green; - --error-color: @red; - --error-text-color: @text; - --warning-color: @yellow; - --button-font-color: @text; - --widget-background-color: @base; - --presentational-content-color: @overlay2; - --gray-lightest: @base; - --gray-light: @crust; - --gray-mid: @surface0; - --gray-mid-dark: @surface1; - --gray-dark: @overlay2; - --gray-darkest: @text; - --gray-social-border: @surface0; - - ._button-login-password, - ._button-login-id { - background-color: @accent-color; - color: @base; - } - - .password-icon-tooltip { - background-color: @text; - - &::before { - border-top-color: @text; - } - } - - .oai-header svg { - fill: @text; - } - - @orange: mix(@red, @yellow); - - button > span { - &[data-provider^="google"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); - } - &[data-provider^="windowslive"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); - } - &[data-provider^="apple"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); - } - } - } -} - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/chatgpt/catppuccin.user.less b/styles/chatgpt/catppuccin.user.less new file mode 100644 index 0000000000..c33cbe39dc --- /dev/null +++ b/styles/chatgpt/catppuccin.user.less @@ -0,0 +1,1240 @@ +/* ==UserStyle== +@name ChatGPT Catppuccin +@namespace github.com/catppuccin/userstyles/styles/chatgpt +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/chatgpt +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chatgpt/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Achatgpt +@description Soothing pastel theme for ChatGPT +@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("chatgpt.com") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + + :root.light { + #catppuccin(@lightFlavor, @accentColor); + } + + :root.dark { + #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]; + + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + code.hljs { + background: none !important; + } + pre { + .bg-token-main-surface-secondary { + background-color: @surface0; + } + .bg-gray-950 { + background-color: @crust; + } + .text-token-text-secondary { + color: @subtext0; + } + } + + .dark\:bg-gray-950:is(.dark *) { + background-color: @mantle; + } + + color: @text; + + @white: if(@lookup = latte, @crust, @text); + @black: if(@lookup = latte, @text, @crust); + --white: @white; + --black: @black; + + & when not(@lookup = latte) { + --gray-50: lighten(mix(@text, @subtext0), 5%); + --gray-100: @text; + --gray-200: @subtext1; + --gray-300: @overlay2; + --gray-400: @overlay0; + --gray-500: @surface2; + --gray-600: @surface1; + --gray-700: @surface0; + --gray-750: @surface0; + --gray-800: @base; + --gray-900: @mantle; + --gray-950: @crust; + --brand-purple: @accent-color; + --text-primary: var(--gray-100) !important; + --text-secondary: var(--gray-200) !important; + --text-tertiary: var(--gray-300) !important; + --text-quaternary: var(--gray-500) !important; + --main-surface-primary: var(--gray-800) !important; + --main-surface-secondary: var(--gray-700) !important; + --main-surface-tertiary: var(--gray-600) !important; + --message-surface: var(--gray-700) !important; + --sidebar-surface-primary: var(--gray-900); + --sidebar-surface-secondary: var(--gray-800); + --sidebar-surface-tertiary: var(--gray-700); + .popover, + .dark .popover, + .dark.popover, + .popover .dark { + --main-surface-primary: var(--gray-700) !important; + --main-surface-secondary: var(--gray-600) !important; + --main-surface-tertiary: var(--gray-500) !important; + --text-primary: var(--white) !important; + --text-secondary: var(--gray-200) !important; + --text-tertiary: var(--gray-300) !important; + } + } + & when (@lookup = latte) { + --gray-50: @crust; + --gray-100: @mantle; + --gray-200: @base; + --gray-300: @surface0; + --gray-400: @surface1; + --gray-500: @surface2; + --gray-600: @overlay0; + --gray-700: @overlay1; + --gray-800: @subtext0; + --gray-900: @subtext1; + --gray-950: @text; + --brand-purple: @accent-color; + --text-primary: var(--gray-950); + --text-secondary: var(--gray-600); + --text-tertiary: var(--gray-400); + --text-quaternary: var(--gray-300); + --main-surface-primary: var(--gray-200); + --main-surface-secondary: var(--gray-100); + --main-surface-tertiary: var(--gray-50); + --message-surface: var(--gray-100) !important; + --sidebar-surface-primary: var(--gray-100); + --sidebar-surface-secondary: var(--gray-200); + --sidebar-surface-tertiary: var(--gray-300); + .popover, + .dark .popover, + .dark.popover, + .popover .dark { + --main-surface-primary: var(--gray-200) !important; + --main-surface-secondary: var(--gray-100) !important; + --main-surface-tertiary: var(--gray-50) !important; + --text-primary: var(--gray-950) !important; + --text-secondary: var(--gray-600) !important; + --text-tertiary: var(--gray-500) !important; + } + } + + --border-light: fade(@text, 10%); + --border-medium: fade(@text, 15%); + --border-heavy: fade(@text, 20%); + --border-xheavy: fade(@text, 25%); + --link: @accent-color; + --link-hover: if( + @lookup = latte, + lighten(@accent-color, 10%), + darken(@accent-color, 10%) + ); + + *:focus { + --tw-ring-offset-color: @base; + --tw-ring-color: @accent-color; + } + + /* ChatGPT logo */ + [style*="background-color: rgb(25, 195, 125);"] { + background-color: @green !important; + color: @base !important; + } + + /* Input */ + + select { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml;@{svg}"); + } + + [multiple], + [type="date"], + [type="datetime-local"], + [type="email"], + [type="month"], + [type="number"], + [type="password"], + [type="search"], + [type="tel"], + [type="text"], + [type="time"], + [type="url"], + [type="week"], + select, + textarea { + background-color: @base; + border-color: @overlay2; + } + + [type="checkbox"], + [type="radio"] { + background-color: @base; + border-color: @overlay2; + color: @accent-color; + } + + .form-input, + .form-multiselect, + .form-select, + .form-textarea { + background-color: @base; + border-color: @overlay2; + } + + .form-input:focus, + .form-multiselect:focus, + .form-select:focus, + .form-textarea:focus { + border-color: @accent-color; + } + + .form-input::placeholder, + .form-textarea::placeholder { + color: @overlay2; + } + + /* Buttons */ + + .btn-primary, + .btn-green { + background-color: @accent-color; + color: @base; + + &:hover { + background-color: darken(@accent-color, 10%); + } + + &:focus-visible { + --tw-ring-color: darken(@accent-color, 10%) !important; + } + } + + .btn-danger { + background-color: @red; + color: @base; + + &:hover:not(:disabled) { + background-color: darken(@red, 10%); + } + + &.focus-visible, + &:focus-visible { + --tw-ring-color: darken(@red, 10%) !important; + } + } + + .btn-danger-outline { + border-color: @red; + color: @red; + + &.focus-visible, + &:focus-visible { + --tw-ring-color: lighten(@red, 10%) !important; + } + } + + .btn-neutral { + &.focus-visible, + &:focus-visible { + --tw-ring-color: @overlay0 !important; + } + } + + .btn-dark { + background-color: @surface0; + border-color: @overlay0; + color: @text; + + &:hover { + background-color: @surface1; + } + } + + .btn-light { + background-color: @overlay1; + color: @black; + + &:hover { + background-color: @overlay0; + } + } + + .btn-disabled, + .btn-disabled:hover { + background-color: @text; + } + + /* Borders */ + + .border-black, + .border-black\/10, + .border-black\/20, + .border-black\/30, + .border-black\/5 { + border-color: var(--border-light); + } + + .border-gray-100 { + border-color: var(--gray-100); + } + + .border-gray-200 { + border-color: var(--gray-200); + } + + .border-gray-300 { + border-color: var(--gray-300); + } + + .border-gray-400 { + border-color: var(--gray-400); + } + + .border-gray-500 { + border-color: var(--gray-500); + } + + .border-gray-700 { + border-color: var(--gray-700); + } + + .border-gray-950 { + border-color: var(--gray-950); + } + + .border-green-500 { + border-color: lighten(@green, 10%); + } + + .border-green-600 { + border-color: @green; + } + + .border-orange-400 { + border-color: lighten(mix(@red, @yellow), 10%); + } + + .border-orange-500 { + border-color: mix(@red, @yellow); + } + + .border-red-500 { + border-color: darken(@red, 10%); + } + + .border-white { + border-color: @white; + } + + .border-white\/20 { + border-color: fade(@white, 20%); + } + + .border-t-[\#0077FF] { + border-top-color: @blue; + } + + /* Backgrounds */ + .bg-token-main-surface-primary { + background-color: var(--main-surface-primary); + } + + .\!bg-brand-purple { + background-color: @accent-color !important; + } + + .\!bg-gray-200 { + background-color: var(--gray-200) !important; + } + + .btn-blue { + background-color: @blue; + color: @crust; + + &:hover { + background-color: darken(@blue, 5%); + } + } + + .bg-[\#0077FF], + .bg-\[\#3C46FF\], + .bg-[\#3C46FF], + .bg-[\#4046EC] { + background-color: @blue; + } + + .hover\:bg-\[\#0000FF\]:hover { + background-color: darken(@blue, 5%); + } + + .bg-[\#10A37F] { + background-color: @green; + } + + .bg-[\#B161FD] { + background-color: @accent-color; + } + + .bg-[\#F8CA27] { + background-color: @yellow; + } + + .bg-[\#FF5588] { + background-color: mix(@red, @pink); + } + + .bg-[\#FF6E3C] { + background-color: saturate(mix(@red, @yellow), 10%); + } + .dark\:radix-highlighted\:bg-\[\#2E2F33\][data-highlighted] { + background-color: @surface0; + } + + .bg-black { + background-color: @black; + } + + .bg-black\/20 { + background-color: fade(@black, 20%); + } + + .bg-black\/5 { + background-color: fade(@black, 5%); + } + + .bg-black\/50 { + background-color: fade(@black, 50%); + } + + .bg-black\/90 { + background-color: fade(@black, 90%); + } + + .bg-black\/\[\.04\] { + background-color: fade(@black, 4%); + } + + .bg-black\/\[\.08\] { + background-color: fade(@black, 8%); + } + + .bg-black\/\[\.12\] { + background-color: fade(@black, 12%); + } + + .bg-blue-100 { + background-color: lighten(@blue, 30%); + } + + .bg-blue-200 { + background-color: lighten(@blue, 20%); + } + + .bg-blue-300 { + background-color: lighten(@blue, 10%); + } + + .bg-blue-400 { + background-color: @blue; + } + + .bg-blue-500 { + background-color: darken(@blue, 5%); + } + + .bg-blue-700 { + background-color: darken(@blue, 10%); + } + + .hover\:bg-blue-700:hover { + background-color: darken(@blue, 15%); + } + + .bg-brand-blue-800 { + background-color: darken(@blue, 10%); + } + + .bg-blue-950 { + background-color: darken(@blue, 30%); + } + + .checked\:bg-blue-600:checked { + background-color: @accent-color; + } + + .bg-brand-green { + background-color: lighten(@green, 10%); + } + + .bg-brand-green\/20 { + background-color: fade(lighten(@green, 10%), 20%); + } + + .bg-brand-green\/40 { + background-color: fade(lighten(@green, 10%), 40%); + } + + .bg-brand-purple { + background-color: @accent-color; + } + + .bg-gray-100 { + background-color: var(--gray-100); + } + + .bg-gray-200 { + background-color: var(--gray-200); + } + + .bg-gray-300 { + background-color: var(--gray-300); + } + + .bg-gray-400 { + background-color: var(--gray-400); + } + + .bg-gray-50 { + background-color: var(--gray-50); + } + + .bg-gray-500 { + background-color: var(--gray-500); + } + + .bg-gray-600 { + background-color: var(--gray-600); + } + + .bg-gray-700 { + background-color: var(--gray-700); + } + + .bg-gray-900 { + background-color: var(--gray-900); + } + + .bg-gray-950 { + background-color: var(--gray-950); + } + + .bg-green-100 { + background-color: lighten(@green, 30%); + } + + .bg-green-200 { + background-color: lighten(@green, 20%); + } + + .bg-green-500 { + background-color: lighten(@green, 10%); + } + + .bg-green-500\/10 { + background-color: fade(lighten(@green, 10%), 10%); + } + + .bg-green-600 { + background-color: @green; + } + + .bg-orange-500 { + background-color: mix(@yellow, @red); + } + + .bg-orange-500\/10 { + background-color: fade(mix(@yellow, @red), 10%); + } + + .bg-red-100 { + background-color: fade(lighten(@red, 10%), 30%); + } + + .bg-red-200 { + background-color: lighten(@red, 20%); + } + + .bg-red-500 { + background-color: @red; + } + + .bg-red-500\/10 { + background-color: fade(@red, 10%); + } + + .bg-red-600 { + background-color: lighten(@red, 10%); + } + + .bg-white { + background-color: @white; + } + + .bg-white\/20 { + background-color: fade(@white, 20%); + } + + .bg-white\/25 { + background-color: fade(@white, 25%); + } + + .bg-yellow-100 { + background-color: lighten(@yellow, 20%); + } + + .bg-yellow-200 { + background-color: lighten(@yellow, 10%); + } + + .bg-yellow-400 { + background-color: @yellow; + } + + .bg-yellow-500 { + background-color: darken(@yellow, 10%); + } + + .radix-state-checked\:\!bg-green-600[data-state="checked"] { + background-color: @accent-color !important; + } + + .dark\:radix-state-checked\:border-green-600[data-state="checked"]:is( + .dark * + ) { + border-color: @accent-color; + } + + [class*="bg-transparent"] { + background-color: transparent; + } + + /* Gradients */ + + .from-white { + --tw-gradient-from: @base var(--tw-gradient-from-position); + } + + /* Fill/stroke */ + + .fill-yellow-500 { + fill: @yellow; + } + + .stroke-black { + stroke: @black; + } + + .stroke-brand-purple\/25 { + stroke: fade(@accent-color, 25%); + } + + .stroke-gray-400 { + stroke: @subtext0; + } + + /* Text */ + + .\!text-black { + color: @black !important; + } + + .text-\[\#FE7600\] { + color: mix(@yellow, @red); + } + + .text-\[\#fff\] { + color: @base; + } + + .text-black { + color: @black; + } + + .text-black\/60 { + color: fade(@black, 60%); + } + + .text-black\/70 { + color: fade(@black, 70%); + } + + .text-blue-500 { + color: lighten(@blue, 10%); + } + + .text-blue-600 { + color: @blue; + } + + .text-brand-blue-800 { + color: @blue; + } + + .text-brand-purple { + color: @accent-color; + } + + .text-gray-100 { + color: var(--gray-100); + } + + .text-gray-300 { + color: var(--gray-300); + } + + .text-gray-400 { + color: var(--gray-400); + } + + .text-gray-500 { + color: var(--gray-500); + } + + .text-gray-600 { + color: var(--gray-600); + } + + .text-gray-700 { + color: var(--gray-700); + } + + .text-gray-800 { + color: var(--gray-800); + } + + .text-gray-900 { + color: var(--gray-900); + } + + .text-green-500 { + color: lighten(@green, 10%); + } + + .text-green-600 { + color: @green; + } + + .text-green-700 { + color: darken(@green, 10%); + } + + .text-green-800 { + color: darken(@green, 20%); + } + + .text-green-900 { + color: darken(@green, 30%); + } + + .text-orange-300 { + color: lighten(mix(@yellow, @red), 15%); + } + + .text-orange-400 { + color: lighten(mix(@yellow, @red), 10%); + } + + .text-orange-500 { + color: mix(@yellow, @red); + } + + .text-red-500 { + color: @red; + } + + .text-red-600 { + color: lighten(@red, 10%); + } + + .text-red-700 { + color: @red; + } + + .text-red-800 { + color: darken(@red, 10%); + } + + .text-token-text-error { + --text-error: @red; + } + + .text-white { + color: @white; + } + + .text-white\/25 { + color: fade(@white, 25%); + } + + .text-white\/50 { + color: fade(@white, 50%); + } + + .text-white\/80 { + color: fade(@white, 80%); + } + + .text-yellow-500 { + color: @yellow; + } + + .text-yellow-700 { + color: darken(@yellow, 10%); + } + + .text-yellow-800 { + color: darken(@yellow, 20%); + } + + .text-yellow-900 { + color: darken(@yellow, 30%); + } + + /* Dark mode overrides */ + /* stylelint-disable-next-line no-duplicate-selectors */ + & when not(@lookup = latte) { + .dark\:bg-black { + background-color: @black; + } + + .dark\:bg-white { + background-color: @white; + } + + .dark\:bg-gray-700 { + background-color: var(--gray-700); + } + + /* "Was this response better or worse" dialog button hover */ + .dark\:hover\:bg-gray-800:hover { + background-color: transparent; + } + + .dark\:text-white { + color: @white; + } + + .dark\:text-black { + color: @black; + } + + /* Chat suggestions on new chat page */ + .dark\:text-gray-500 { + color: var(--gray-300); + } + + .dark\:text-\[\#D292FF\] { + color: @mauve; + } + + .dark\:focus\:border-white:focus { + border-color: @text; + } + + .dark\:border-gray-700 { + border-color: var(--gray-700); + } + + /* Up arrow send message button */ + .disabled\:dark\:bg-token-text-quaternary:is(.dark *):disabled { + background-color: var(--text-quaternary); + } + .dark\:disabled\:text-token-main-surface-secondary:disabled:is(.dark *) { + color: var(--main-surface-secondary); + } + } + + /* Other */ + + .ring-black { + --tw-ring-color: @black; + } + + .ring-black\/10 { + --tw-ring-color: fade(@black, 10%); + } + + .ring-white { + --tw-ring-color: @base; + } + + .ring-offset-black { + --tw-ring-offset-color: @base; + } + + /* Invalid LaTeX expressions */ + [style*="color: rgb(204, 0, 0)"] { + color: @red; + } + + /* Circle around OpenAI logo in center of chat */ + .gizmo-shadow-stroke::after { + --tw-shadow: inset 0 0 0 1px @surface0; + } + + .katex-error { + color: @red !important; + } + + [style="background-color: rgb(0, 0, 46);"], + [style="background-color: rgb(255, 255, 219);"] { + background-color: @crust !important; + } + + /* Icon colors for chat suggestion icons on new chat page */ + svg[style="color: rgb(203, 139, 208);"] { + color: @pink !important; + } + svg[style="color: rgb(226, 197, 65);"] { + color: @yellow !important; + } + svg[style="color: rgb(118, 208, 235);"] { + color: @teal !important; + } + svg[style="color: rgb(237, 98, 98);"] { + color: @red !important; + } + } +} + +@-moz-document domain("auth.openai.com") { + @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; + } + } + + color: @text; + background-color: @base; + caret-color: @text; + + a { + color: @accent-color; + } + + body, + .oai-header, + .oai-footer, + .login-container, + .main-container { + background-color: @base; + } + + .oai-header img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + background-color: transparent; + } + + .title { + color: @text; + } + + .email-input { + background-color: @base; + border-color: @surface0; + color: @text; + + &:focus, + &:valid { + border-color: @accent-color; + + + .email-label { + color: @accent-color; + background-color: @base; + } + } + } + .email-label { + background-color: @base; + color: @subtext0; + } + + .continue-btn { + background-color: @accent-color; + color: @base; + } + + .divider-wrapper { + &::before, + &::after { + border-bottom-color: @surface2; + } + } + + .social-btn { + background-color: @mantle; + border-color: @surface0; + color: @text; + } + + @orange: mix(@red, @yellow); + + img[alt="Google logo"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + img[alt="Microsoft logo"] { + @svg: escape( + '' + ); + + content: url("data:image/svg+xml,@{svg}"); + } + img[alt="Apple logo"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } +} + +@-moz-document domain("auth0.openai.com") { + @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]; + + --primary-color: @accent-color; + --primary-color-no-override: @accent-color; + --action-primary-color: @accent-color; + --link-color: @accent-color; + --page-background-color: @base; + --info-color: @blue; + --success-color: @green; + --error-color: @red; + --error-text-color: @text; + --warning-color: @yellow; + --button-font-color: @text; + --widget-background-color: @base; + --presentational-content-color: @overlay2; + --gray-lightest: @base; + --gray-light: @crust; + --gray-mid: @surface0; + --gray-mid-dark: @surface1; + --gray-dark: @overlay2; + --gray-darkest: @text; + --gray-social-border: @surface0; + + ._button-login-password, + ._button-login-id { + background-color: @accent-color; + color: @base; + } + + .password-icon-tooltip { + background-color: @text; + + &::before { + border-top-color: @text; + } + } + + .oai-header svg { + fill: @text; + } + + @orange: mix(@red, @yellow); + + button > span { + &[data-provider^="google"] { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); + } + &[data-provider^="windowslive"] { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); + } + &[data-provider^="apple"] { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); + } + } + } +} + +#rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/chatreplay/catppuccin.user.css b/styles/chatreplay/catppuccin.user.css index d93d7ff6ed..c7009f0680 100644 --- a/styles/chatreplay/catppuccin.user.css +++ b/styles/chatreplay/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name ChatReplay Catppuccin +@name ChatReplay Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/chatreplay @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/chatreplay -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chatreplay/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chatreplay/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Achatreplay @description Soothing pastel theme for ChatReplay @author Catppuccin @@ -16,202 +16,4 @@ @var range bg-opacity "Background Opacity" [0.2 , -0.05 , 1 , 0.05] @var range bg-blur "Background Blur" [20, 0, 100, 1, 'px'] -==/UserStyle== */ - -@-moz-document domain("chatreplay.stream") { - :root[dark] #chat-container { - #catppuccin(@darkFlavor, @accentColor, chat); - } - :root #chat-container { - #catppuccin(@lightFlavor, @accentColor, chat); - } - @media (prefers-color-scheme: light) { - :root { - #catppuccin(@lightFlavor, @accentColor, base); - } - } - @media (prefers-color-scheme: dark) { - :root { - #catppuccin(@darkFlavor, @accentColor, base); - } - } - - /* prettier-ignore */ - @catppuccin: { - @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; - @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; - @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; - @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; - } - - #catppuccin(@lookup, @accent, @platform) { - @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; - } - } - - & when (@platform = chat) { - a:not(.username), - i { - color: @accent-color; - } - color: @text; - --text-color: @text; - --timestamp-color: @subtext1; - --bg-color: @base; - --bg-color-transparent: fade(@base, 10%); - --settings-bg-color: @mantle; - --btn-bg-color: @surface0; - --bg-color-highlight: @surface0; - --scrollbar-thumb: @surface0; - --btn-hover-bg: @surface1; - --link-color: @accent-color; - --border-color: @surface0; - --settings-shadow: 0 4px 8px rgba(@crust, 0.4), 0 0 4px rgba(@crust, 0.4); - .message-notice { - border-left-color: @accent-color; - } - .message--highlighted a { - color: @accent-color; - } - .message--highlighted { - background: @accent-color; - border-color: @accent-color; - color: @base; - text-shadow: none; - } - .red-dot::after { - background: @red; - } - &[overlay] { - --bg-color: rgba(@base, var(--overlay-opacity)); - --bg-color-highlight: rgba( - @base, - max(0.4, calc(var(--overlay-opacity) * 1.2)) - ); - --text-shadow: -1px -1px 0px @base, 0px -1px 0px @base, - 1px -1px 0px @base, -1px 0px 0px @base, 1px 0px 0px @base, - -1px 1px 0px @base, 0px 1px 0px @base, 1px 1px 0px @base; - --text-color: @text; - } - .resume-scroll { - background-color: @surface0; - } - } - @keyframes rotating { - 0% { - transform: rotate(0); - } - - 100% { - transform: rotate(360deg); - scale: 1.5; - fill: @red; - } - } - - & when (@platform = base) { - background-color: @base; - color: @text; - - body { - color: @text; - } - .card { - background: fade(@crust, 80%); - } - .card.c1cw4bqg.c1cw4bqg { - color: @subtext0; - } - a, - i { - color: @accent-color; - } - button.gradient, - .btn.gradient { - background: linear-gradient( - 45deg, - @accent-color, - spin(@accent-color, 45) - ); - color: @base; - text-shadow: none; - } - button:not(.custom), - .btn { - background: @surface0; - text-shadow: none; - color: @text; - } - .item.zmyc33:hover, - .item.active.zmyc33 { - background-color: @surface0; - } - .video-title.damcrq, - .logo-text.c1j5psx1.c1j5psx1 { - color: @text; - } - [d="M 4,0 1,3 v 10 h 4 v 3 l 3,-3 h 2 L 15,8 V 0 Z m 10,7 -3,3 H 9 L 7,12 V 10 H 5 V 1 h 9 z"], - [d="m 8.5,3 3,2 -3,2 z"] { - fill: @accent-color; - } - [d="m 4,1 h 10 v 7 l -4,4 H 4 Z"] { - fill: @base; - } - .delete.c19loos5.c19loos5 { - border-color: @red; - } - .mark.z8oy0d.z8oy0d { - background: @accent-color; - color: @base; - } - .bg.c1ejz165.c1ejz165 { - opacity: @bg-opacity; - filter: blur(@bg-blur); - } - // .topbar-container.c1j5psx1.c1j5psx1 { - // border-bottom: none; - // } - #inner-a.tmgko.tmgko { - background: @mantle; - } - } - } -} -// vim:ft=less +==/UserStyle== */ \ No newline at end of file diff --git a/styles/chatreplay/catppuccin.user.less b/styles/chatreplay/catppuccin.user.less new file mode 100644 index 0000000000..60ca9cdb9c --- /dev/null +++ b/styles/chatreplay/catppuccin.user.less @@ -0,0 +1,217 @@ +/* ==UserStyle== +@name ChatReplay Catppuccin +@namespace github.com/catppuccin/userstyles/styles/chatreplay +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/chatreplay +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chatreplay/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Achatreplay +@description Soothing pastel theme for ChatReplay +@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"] + +@var range bg-opacity "Background Opacity" [0.2 , -0.05 , 1 , 0.05] +@var range bg-blur "Background Blur" [20, 0, 100, 1, 'px'] +==/UserStyle== */ + +@-moz-document domain("chatreplay.stream") { + :root[dark] #chat-container { + #catppuccin(@darkFlavor, @accentColor, chat); + } + :root #chat-container { + #catppuccin(@lightFlavor, @accentColor, chat); + } + @media (prefers-color-scheme: light) { + :root { + #catppuccin(@lightFlavor, @accentColor, base); + } + } + @media (prefers-color-scheme: dark) { + :root { + #catppuccin(@darkFlavor, @accentColor, base); + } + } + + /* deno-fmt-ignore */ + @catppuccin: { + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + }; + + #catppuccin(@lookup, @accent, @platform) { + @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; + } + } + + & when (@platform = chat) { + a:not(.username), + i { + color: @accent-color; + } + color: @text; + --text-color: @text; + --timestamp-color: @subtext1; + --bg-color: @base; + --bg-color-transparent: fade(@base, 10%); + --settings-bg-color: @mantle; + --btn-bg-color: @surface0; + --bg-color-highlight: @surface0; + --scrollbar-thumb: @surface0; + --btn-hover-bg: @surface1; + --link-color: @accent-color; + --border-color: @surface0; + --settings-shadow: 0 4px 8px rgba(@crust, 0.4), 0 0 4px rgba(@crust, 0.4); + .message-notice { + border-left-color: @accent-color; + } + .message--highlighted a { + color: @accent-color; + } + .message--highlighted { + background: @accent-color; + border-color: @accent-color; + color: @base; + text-shadow: none; + } + .red-dot::after { + background: @red; + } + &[overlay] { + --bg-color: rgba(@base, var(--overlay-opacity)); + --bg-color-highlight: rgba( + @base, + max(0.4, calc(var(--overlay-opacity) * 1.2)) + ); + --text-shadow: + -1px -1px 0px @base, 0px -1px 0px @base, 1px -1px 0px @base, -1px 0px + 0px @base, 1px 0px 0px @base, -1px 1px 0px @base, 0px 1px 0px @base, + 1px 1px 0px @base; + --text-color: @text; + } + .resume-scroll { + background-color: @surface0; + } + } + @keyframes rotating { + 0% { + transform: rotate(0); + } + + 100% { + transform: rotate(360deg); + scale: 1.5; + fill: @red; + } + } + + & when (@platform = base) { + background-color: @base; + color: @text; + + body { + color: @text; + } + .card { + background: fade(@crust, 80%); + } + .card.c1cw4bqg.c1cw4bqg { + color: @subtext0; + } + a, + i { + color: @accent-color; + } + button.gradient, + .btn.gradient { + background: linear-gradient( + 45deg, + @accent-color, + spin(@accent-color, 45) + ); + color: @base; + text-shadow: none; + } + button:not(.custom), + .btn { + background: @surface0; + text-shadow: none; + color: @text; + } + .item.zmyc33:hover, + .item.active.zmyc33 { + background-color: @surface0; + } + .video-title.damcrq, + .logo-text.c1j5psx1.c1j5psx1 { + color: @text; + } + [d="M 4,0 1,3 v 10 h 4 v 3 l 3,-3 h 2 L 15,8 V 0 Z m 10,7 -3,3 H 9 L 7,12 V 10 H 5 V 1 h 9 z"], + [d="m 8.5,3 3,2 -3,2 z"] { + fill: @accent-color; + } + [d="m 4,1 h 10 v 7 l -4,4 H 4 Z"] { + fill: @base; + } + .delete.c19loos5.c19loos5 { + border-color: @red; + } + .mark.z8oy0d.z8oy0d { + background: @accent-color; + color: @base; + } + .bg.c1ejz165.c1ejz165 { + opacity: @bg-opacity; + filter: blur(@bg-blur); + } + // .topbar-container.c1j5psx1.c1j5psx1 { + // border-bottom: none; + // } + #inner-a.tmgko.tmgko { + background: @mantle; + } + } + } +} diff --git a/styles/chess.com/catppuccin.user.css b/styles/chess.com/catppuccin.user.css index 64cd6d353f..f9aac290f9 100644 --- a/styles/chess.com/catppuccin.user.css +++ b/styles/chess.com/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Chess.com Catppuccin +@name Chess.com Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/chess.com @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/chess.com -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chess.com/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chess.com/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Achess.com @description Soothing pastel theme for Chess.com @author Catppuccin @@ -15,730 +15,4 @@ @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 highlightColor "Highlight" ["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("chess.com") { - :root { - #catppuccin(@lightFlavor, @accentColor); - } - - :root.dark-mode { - #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]; - - @highlight-color: @catppuccin[@@lookup][@@highlightColor]; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - --color-bg-opaque: @mantle; - --color-bg-opaque-lighter: @base; - --color-bg-subtle: @surface1; - --color-bg-subtler: @surface0; - --color-bg-input: @mantle; - --color-bg-speech: @surface0; - --color-bg-secondary: @surface0; - --color-bg-tertiary: @surface1; - --color-bg-quaternary: @surface2; - --color-gray-100: @overlay1; - --color-text-speech: @text; - - --color-icon-default: @subtext0; - --color-icon-default-hovered: @subtext1; - --color-icon-bolder: @subtext1; - --color-icon-boldest: @text; - - --color-text-boldest: @text; - --color-text-bolder: @text; - --color-text-default: @text; - --color-text-default-hovered: @subtext1; - --color-text-subtle: @subtext1; - --color-text-placeholder: @subtext0; - --color-text-inverse: @crust; - --color-text-link: @blue; - --color-text-link-hovered: @sky; - - --color-border-default: @surface1; - --color-border-subtle: @overlay2; - --color-border-selected: @accent-color; - - --color-green-300: @accent-color; - --color-red-300: @red; /* Danger */ - --color-red-400: @red; /* Danger */ - --color-green-400: @green; /* Success */ - - /* Links */ - --color-blue-200: @sapphire; - --color-blue-300: @sky; - --color-blue-400: @blue; - - --color-classification-blunder: @red; - --color-classification-miss: @maroon; - --color-classification-mistake: @peach; - --color-classification-inaccuracy: @yellow; - --color-classification-best: @green; - --color-classification-excellent: @green; - --color-classification-good: @teal; - --color-classification-great: @blue; - --color-classification-brilliant: @sapphire; - --color-classification-book: @rosewater; - - --color-icon-win: @green; - --color-text-win: @green; - --color-icon-draw: @subtext0; - --color-text-draw: @subtext0; - --color-bg-draw: @subtext0; - --color-border-draw: var(--color-transparent-white-10); - --color-icon-loss: @red; - --color-text-loss: @red; - --color-border-loss: @red; - - --color-icon-bullet: @peach; - --color-icon-blitz: @yellow; - - body { - --theme-background-color: @base !important; - --theme-background-image: none; - - --globalBackground: @mantle !important; - --globalBackgroundOpaque: @mantle !important; - --globalSecondaryBackground: @crust !important; - --globalTertiaryBackground: @surface0 !important; - --globalAccentBackground: @accent-color !important; - --globalSecondaryAccentBackground: @surface0 !important; - --globalSiteBackground: @base !important; - --globalBorder: @surface0 !important; - --globalColorThemeFull: @text !important; - --globalColorThemeHigh: @text; - --globalColorThemeMid: @overlay2 !important; - --globalColorThemeLow: @overlay0 !important; - --globalColorThemeLower: @base !important; - --globalColorThemeLink: @sapphire !important; - --globalColorThemeBlueToMid: @text; - --globalOverlayBackground: @base !important; - --globalColorWin: @green !important; - --globalColorDraw: @accent-color !important; - --globalColorLoss: @red !important; - - --labelBgColor: @surface1; - --activeLabelColor: @accent-color; - --buttonBgColor: @text; - - --nodeColor: @text; - --nodeBackground: @yellow; - } - - /* Home page */ - .index-title, - .index-info-item-counter { - color: @text !important; - } - .index-info-item { - color: @subtext0 !important; - } - .index-suggestion-title, - .index-posts-title, - .index-post-name { - color: @text; - } - .index-quote-author, - .index-quote-body, - .index-post-author { - color: @subtext1; - } - - .promo-title, - .promo-rank { - color: @text; - } - .promo-subtitle { - color: @subtext1; - } - - .home-username-link { - color: @text; - } - - /* Lessons page */ - .level-title { - color: @text; - } - .level-desc, - .course-header-description strong { - color: @subtext1; - } - - .lessons-search-filter { - .form-dropdown-chevron, - .form-dropdown-control-label, - .form-dropdown-value { - color: @subtext1; - } - } - - /* Play lesson video */ - .lesson-status { - background-color: @text; - } - - /* More page */ - .landing-header { - color: @text; - } - - /* UI */ - .v5-title-label { - color: @text; - } - .v5-tabs-list, - .v5-tabs-list-dark { - --borderColor: @surface2; - --tabTitleColor: @subtext0; - --tabHoverTitleColor: @subtext1; - --tabSelectedBorderColor: @subtext1; - --tabSelectedTitleColor: @text; - } - .ui_v5-input-component { - --borderColor: @surface0; - --borderFocus: @surface1; - --bgColor: @base; - --textColor: @text; - --secondaryTextColor: @subtext1; - } - .ui_v5-input-group-component { - --inputIconColor: @subtext0; - } - .ui_v5-button-component { - --boxShadow: none; - --boxShadowHover: none; - box-shadow: none; - - &.ui_v5-button-basic { - --basicColor: @text !important; - --basicHoverColor: @text !important; - --basicBgColor: @surface1 !important; - --basicBghover: @surface2 !important; - --borderColor: @surface0 !important; - } - - &.ui_v5-button-primary { - color: @crust !important; - background-color: @accent-color; - - &:hover { - background-color: darken(@accent-color, 5%); - box-shadow: none; - } - } - } - .ui_v5-select-component { - --borderColor: @surface0; - --borderFocus: @surface1; - --bgColor: @base; - --textColor: @text; - --arrowColor: @subtext0; - } - .ui_pagination-item-component { - --paginationColor: @text; - --paginationBgColor: @surface1; - --paginationBgHover: @surface2; - --paginationColorMuted: @base; - --paginationBgColorMuted: @overlay1; - } - - .nav-link-text { - color: @text !important; - } - .nav-menu-area:last-of-type .icon-font-chess { - color: @mantle !important; - } - .nav-link-main-design, - .nav-link-main-link { - color: @text !important; - - &:hover { - color: @subtext1 !important; - } - } - - #tb { - .toolbar-action-icon { - color: @subtext1; - } - - .toolbar-action-wrapper:hover .toolbar-action-icon { - color: @text !important; - } - } - - #sb { - color: @subtext0; - - &.open { - background-color: @mantle; - } - - .nav-action:hover { - background-color: @surface0; - color: @text; - } - - .nav-panel-shade, - .nav-panel-theme-bg, - .nav-action.has-popover + .nav-popover { - background: @mantle !important; - } - - .nav-popover.dark .btn-link { - color: @text; - } - .nav-menu-area:last-of-type { - color: @text !important; - } - .nav-popover.nav-search { - --search-bg-color: @surface0; - } - } - - .nav-popover.dark { - background: @mantle; - } - - .section-heading-component .back-link-component { - color: currentcolor; - } - .section-heading-black { - background-color: @surface1; - color: @text; - } - .nav-section-header-component { - background-color: @base; - color: @text; - } - - .popover-friends-header, - .popover-friends-content, - .popover-messages-header, - .popover-messages-content, - .popover-settings-header, - .popover-settings-content { - background: @mantle; - } - - /* Buttons */ - - .selector-button-button, - .time-selector-button-button { - background: @surface0; - - &:hover { - background: @surface1; - } - } - - .cc-switch-checkbox:not(.cc-switch-readonly):checked - + .cc-switch-label - .cc-switch-button { - background-color: @surface1; - } - - .cc-button-component, - .cc-button-primary { - --bgColor: @accent-color; - --bgColorHover: darken(@accent-color, 5%); - --textColor: @crust; - --textColorHover: @crust; - box-shadow: none; - } - - .cc-button-primary, - .cc-button-monetization { - --borderBottomLine: darken(@accent-color, 2%); - --borderBottomLineHover: darken(@accent-color, 4%); - } - - .cc-button-secondary { - --bgColor: @surface0; - --bgColorHover: darken(@surface0, 5%); - --iconColor: @text; - --iconColorHover: @text; - --textColor: @text; - --textColorHover: @text; - } - - .cc-button-danger { - --bgColor: @red; - --bgColorHover: darken(@red, 5%); - color: @crust; - } - - .v5-section-shadow, - .v5-section-shadow-hover { - --linkHoverBackground: @surface1; - --linkBoxShadow: 0 0.5rem 0 0 @surface2; - } - - /* Game */ - - .user-username-component, - .cc-user-username-white, - .cc-user-rating-white { - color: @text; - text-shadow: none; - } - - .user-tagline-rating.user-tagline-white { - color: @overlay1; - } - - .clock-component.clock-black { - background: @surface0; - } - .clock-component.clock-white { - background: @text; - } - - .highlight { - background: @highlight-color !important; - opacity: 1 !important; - } - .hover-square rect { - stroke: @overlay1 !important; - } - .hint { - background-color: @overlay1; - filter: drop-shadow(0 0 1px @crust); - } - .capture-hint { - background-color: @overlay1; - filter: drop-shadow(0 0 1px @crust); - z-index: -1; - } - - /* Review/evaluation */ - - .evaluation-bar-bar { - .evaluation-bar-black { - background-color: @surface2; - } - .evaluation-bar-draw { - background-color: @overlay1; - } - .evaluation-bar-white { - background-color: @text; - } - } - - .review-rating-white { - background-color: @text; - } - .review-rating-black { - background-color: @surface0; - color: @text; - } - - .overview-view-new-game-button { - background-color: @surface1; - } - - .arrow { - fill: @overlay0 !important; - } - - g#winner [fill="#dbac16"] { - fill: @yellow !important; - } - - /* Game over */ - - .modal-game-over-header-grey, - .modal-game-over-header-black-win, - .game-over-header-component { - background-color: @base; - color: @text; - } - - .modal-game-over-user-winner-active, - .modal-game-over-user-crown { - background: @lavender; - } - - .game-over-review-button-label { - color: @crust; - text-shadow: none; - } - - /* Ads */ - - .placeholder-ad-upgrade { - background-color: @accent-color; - } - .placeholder-ad-link { - color: @crust; - } - - .modal-trial-component.modal-trial-special-offer { - .modal-trial-header-background { - background-color: @accent-color; - } - } - - .coach-nudges-modal-component { - background: @mantle; - } - - .ready-to-play-banner-component { - background-color: @mantle; - - .ready-to-play-banner-title, - .ready-to-play-banner-list { - color: @text; - } - } - - .notifications-links-trial .nav-link-text { - color: @crust !important; - } - - /* Misc */ - - /* GM/IM/etc badge */ - --color-bg-chesstitle: @accent-color; - .course-author-title, - .course-header-author-title, - .form-dropdown-short-title, - .index-chess-title, - .leaderboard-index-chess-title, - .player-header-title, - .category-headline-chess-title { - color: @crust !important; - } - - .tooltip-body { - background: @surface0; - color: @text; - - &::after { - border-top-color: @surface0 !important; - } - } - .popup-component { - background-color: @surface0; - color: @text; - - &.popup-left .popup-arrow { - border-left-color: @surface0; - } - &.popup-right .popup-arrow { - border-right-color: @surface0; - } - } - - /* Error banner */ - .alerts-alert { - color: @crust; - } - - div.mode-selection-button-selected { - > .mode-selection-button-description { - color: @surface1; - } - - > .mode-selection-button-mode { - color: @mantle; - } - } - - .status-component { - background-color: @accent-color; - color: @crust; - } - - .navigation-footer-page-component, - .navigation-footer-platform-icon { - color: @subtext1; - text-shadow: none; - } - - .download-button-button { - color: @crust !important; - } - - .table-hover tbody tr:hover { - background-color: @surface2; - } - - /* Board */ - @board: escape( - '' - ); - - #board-play-computer, - .fade-in-overlay { - background-image: url("data:image/svg+xml,@{board}"); - } - - .coordinate-light { - fill: @accent-color; - } - .coordinate-dark { - fill: @surface0; - } - - /* - The "Tatiana" piece set. - - Author: sadsnake1 - License: CC BY-NC-SA 4.0 (https://creativecommons.org/licenses/by-nc-sa/4.0/) - Source: https://github.com/sharechess/sharechess/tree/4f2f54c1340df59556f0f1d67e7b788c3322229c/public/pieces/tatiana - */ - - @bishop: ''; - @king: ''; - @knight: ''; - @rook: ''; - @pawn: ''; - @queen: ''; - - #piece(@piece, @type) { - @raw: if( - @type = "white", - replace( - replace( - replace(replace(@piece, "%BORDER%", @mantle), "%BG%", @text), - "#fff", - @mantle - ), - "#000", - @text - ), - replace( - replace( - replace(replace(@piece, "%BORDER%", @mantle), "%BG%", @surface2), - "#fff", - @text - ), - "#000", - @mantle - ) - ); - @svg: escape(@raw); - @result: url("data:image/svg+xml,@{svg}"); - } - - --theme-board-style-image: url("data:image/svg+xml,@{board}"); - --theme-board-style-highlight-color: @highlight-color; - - --theme-piece-set-wp: #piece(@pawn, "white") []; - --theme-piece-set-wn: #piece(@knight, "white") []; - --theme-piece-set-wr: #piece(@rook, "white") []; - --theme-piece-set-wb: #piece(@bishop, "white") []; - --theme-piece-set-wq: #piece(@queen, "white") []; - --theme-piece-set-wk: #piece(@king, "white") []; - --theme-piece-set-bp: #piece(@pawn, "black") []; - --theme-piece-set-bn: #piece(@knight, "black") []; - --theme-piece-set-bb: #piece(@bishop, "black") []; - --theme-piece-set-br: #piece(@rook, "black") []; - --theme-piece-set-bq: #piece(@queen, "black") []; - --theme-piece-set-bk: #piece(@king, "black") []; - - .board-popover-component { - background-color: @surface0; - } - - .piece { - /* Black */ - &.bp { - background-image: #piece(@pawn, "black") [] !important; - } - &.bn { - background-image: #piece(@knight, "black") [] !important; - } - &.bb { - background-image: #piece(@bishop, "black") [] !important; - } - &.br { - background-image: #piece(@rook, "black") [] !important; - } - &.bk { - background-image: #piece(@king, "black") [] !important; - } - &.bq { - background-image: #piece(@queen, "black") [] !important; - } - - /* White */ - &.wp { - background-image: #piece(@pawn, "white") [] !important; - } - &.wn { - background-image: #piece(@knight, "white") [] !important; - } - &.wb { - background-image: #piece(@bishop, "white") [] !important; - } - &.wr { - background-image: #piece(@rook, "white") [] !important; - } - &.wk { - background-image: #piece(@king, "white") [] !important; - } - &.wq { - background-image: #piece(@queen, "white") [] !important; - } - } - - .chessboard-pkg-move-list-component .dark-row { - background-color: @surface1; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/chess.com/catppuccin.user.less b/styles/chess.com/catppuccin.user.less new file mode 100644 index 0000000000..fbacab218d --- /dev/null +++ b/styles/chess.com/catppuccin.user.less @@ -0,0 +1,742 @@ +/* ==UserStyle== +@name Chess.com Catppuccin +@namespace github.com/catppuccin/userstyles/styles/chess.com +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/chess.com +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chess.com/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Achess.com +@description Soothing pastel theme for Chess.com +@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"] + +@var select highlightColor "Highlight" ["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("chess.com") { + :root { + #catppuccin(@lightFlavor, @accentColor); + } + + :root.dark-mode { + #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]; + + @highlight-color: @catppuccin[@@lookup][@@highlightColor]; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + --color-bg-opaque: @mantle; + --color-bg-opaque-lighter: @base; + --color-bg-subtle: @surface1; + --color-bg-subtler: @surface0; + --color-bg-input: @mantle; + --color-bg-speech: @surface0; + --color-bg-secondary: @surface0; + --color-bg-tertiary: @surface1; + --color-bg-quaternary: @surface2; + --color-gray-100: @overlay1; + --color-text-speech: @text; + + --color-icon-default: @subtext0; + --color-icon-default-hovered: @subtext1; + --color-icon-bolder: @subtext1; + --color-icon-boldest: @text; + + --color-text-boldest: @text; + --color-text-bolder: @text; + --color-text-default: @text; + --color-text-default-hovered: @subtext1; + --color-text-subtle: @subtext1; + --color-text-placeholder: @subtext0; + --color-text-inverse: @crust; + --color-text-link: @blue; + --color-text-link-hovered: @sky; + + --color-border-default: @surface1; + --color-border-subtle: @overlay2; + --color-border-selected: @accent-color; + + --color-green-300: @accent-color; + --color-red-300: @red; /* Danger */ + --color-red-400: @red; /* Danger */ + --color-green-400: @green; /* Success */ + + /* Links */ + --color-blue-200: @sapphire; + --color-blue-300: @sky; + --color-blue-400: @blue; + + --color-classification-blunder: @red; + --color-classification-miss: @maroon; + --color-classification-mistake: @peach; + --color-classification-inaccuracy: @yellow; + --color-classification-best: @green; + --color-classification-excellent: @green; + --color-classification-good: @teal; + --color-classification-great: @blue; + --color-classification-brilliant: @sapphire; + --color-classification-book: @rosewater; + + --color-icon-win: @green; + --color-text-win: @green; + --color-icon-draw: @subtext0; + --color-text-draw: @subtext0; + --color-bg-draw: @subtext0; + --color-border-draw: var(--color-transparent-white-10); + --color-icon-loss: @red; + --color-text-loss: @red; + --color-border-loss: @red; + + --color-icon-bullet: @peach; + --color-icon-blitz: @yellow; + + body { + --theme-background-color: @base !important; + --theme-background-image: none; + + --globalBackground: @mantle !important; + --globalBackgroundOpaque: @mantle !important; + --globalSecondaryBackground: @crust !important; + --globalTertiaryBackground: @surface0 !important; + --globalAccentBackground: @accent-color !important; + --globalSecondaryAccentBackground: @surface0 !important; + --globalSiteBackground: @base !important; + --globalBorder: @surface0 !important; + --globalColorThemeFull: @text !important; + --globalColorThemeHigh: @text; + --globalColorThemeMid: @overlay2 !important; + --globalColorThemeLow: @overlay0 !important; + --globalColorThemeLower: @base !important; + --globalColorThemeLink: @sapphire !important; + --globalColorThemeBlueToMid: @text; + --globalOverlayBackground: @base !important; + --globalColorWin: @green !important; + --globalColorDraw: @accent-color !important; + --globalColorLoss: @red !important; + + --labelBgColor: @surface1; + --activeLabelColor: @accent-color; + --buttonBgColor: @text; + + --nodeColor: @text; + --nodeBackground: @yellow; + } + + /* Home page */ + .index-title, + .index-info-item-counter { + color: @text !important; + } + .index-info-item { + color: @subtext0 !important; + } + .index-suggestion-title, + .index-posts-title, + .index-post-name { + color: @text; + } + .index-quote-author, + .index-quote-body, + .index-post-author { + color: @subtext1; + } + + .promo-title, + .promo-rank { + color: @text; + } + .promo-subtitle { + color: @subtext1; + } + + .home-username-link { + color: @text; + } + + /* Lessons page */ + .level-title { + color: @text; + } + .level-desc, + .course-header-description strong { + color: @subtext1; + } + + .lessons-search-filter { + .form-dropdown-chevron, + .form-dropdown-control-label, + .form-dropdown-value { + color: @subtext1; + } + } + + /* Play lesson video */ + .lesson-status { + background-color: @text; + } + + /* More page */ + .landing-header { + color: @text; + } + + /* UI */ + .v5-title-label { + color: @text; + } + .v5-tabs-list, + .v5-tabs-list-dark { + --borderColor: @surface2; + --tabTitleColor: @subtext0; + --tabHoverTitleColor: @subtext1; + --tabSelectedBorderColor: @subtext1; + --tabSelectedTitleColor: @text; + } + .ui_v5-input-component { + --borderColor: @surface0; + --borderFocus: @surface1; + --bgColor: @base; + --textColor: @text; + --secondaryTextColor: @subtext1; + } + .ui_v5-input-group-component { + --inputIconColor: @subtext0; + } + .ui_v5-button-component { + --boxShadow: none; + --boxShadowHover: none; + box-shadow: none; + + &.ui_v5-button-basic { + --basicColor: @text !important; + --basicHoverColor: @text !important; + --basicBgColor: @surface1 !important; + --basicBghover: @surface2 !important; + --borderColor: @surface0 !important; + } + + &.ui_v5-button-primary { + color: @crust !important; + background-color: @accent-color; + + &:hover { + background-color: darken(@accent-color, 5%); + box-shadow: none; + } + } + } + .ui_v5-select-component { + --borderColor: @surface0; + --borderFocus: @surface1; + --bgColor: @base; + --textColor: @text; + --arrowColor: @subtext0; + } + .ui_pagination-item-component { + --paginationColor: @text; + --paginationBgColor: @surface1; + --paginationBgHover: @surface2; + --paginationColorMuted: @base; + --paginationBgColorMuted: @overlay1; + } + + .nav-link-text { + color: @text !important; + } + .nav-menu-area:last-of-type .icon-font-chess { + color: @mantle !important; + } + .nav-link-main-design, + .nav-link-main-link { + color: @text !important; + + &:hover { + color: @subtext1 !important; + } + } + + #tb { + .toolbar-action-icon { + color: @subtext1; + } + + .toolbar-action-wrapper:hover .toolbar-action-icon { + color: @text !important; + } + } + + #sb { + color: @subtext0; + + &.open { + background-color: @mantle; + } + + .nav-action:hover { + background-color: @surface0; + color: @text; + } + + .nav-panel-shade, + .nav-panel-theme-bg, + .nav-action.has-popover + .nav-popover { + background: @mantle !important; + } + + .nav-popover.dark .btn-link { + color: @text; + } + .nav-menu-area:last-of-type { + color: @text !important; + } + .nav-popover.nav-search { + --search-bg-color: @surface0; + } + } + + .nav-popover.dark { + background: @mantle; + } + + .section-heading-component .back-link-component { + color: currentcolor; + } + .section-heading-black { + background-color: @surface1; + color: @text; + } + .nav-section-header-component { + background-color: @base; + color: @text; + } + + .popover-friends-header, + .popover-friends-content, + .popover-messages-header, + .popover-messages-content, + .popover-settings-header, + .popover-settings-content { + background: @mantle; + } + + /* Buttons */ + + .selector-button-button, + .time-selector-button-button { + background: @surface0; + + &:hover { + background: @surface1; + } + } + + .cc-switch-checkbox:not(.cc-switch-readonly):checked + + .cc-switch-label + .cc-switch-button { + background-color: @surface1; + } + + .cc-button-component, + .cc-button-primary { + --bgColor: @accent-color; + --bgColorHover: darken(@accent-color, 5%); + --textColor: @crust; + --textColorHover: @crust; + box-shadow: none; + } + + .cc-button-primary, + .cc-button-monetization { + --borderBottomLine: darken(@accent-color, 2%); + --borderBottomLineHover: darken(@accent-color, 4%); + } + + .cc-button-secondary { + --bgColor: @surface0; + --bgColorHover: darken(@surface0, 5%); + --iconColor: @text; + --iconColorHover: @text; + --textColor: @text; + --textColorHover: @text; + } + + .cc-button-danger { + --bgColor: @red; + --bgColorHover: darken(@red, 5%); + color: @crust; + } + + .v5-section-shadow, + .v5-section-shadow-hover { + --linkHoverBackground: @surface1; + --linkBoxShadow: 0 0.5rem 0 0 @surface2; + } + + /* Game */ + + .user-username-component, + .cc-user-username-white, + .cc-user-rating-white { + color: @text; + text-shadow: none; + } + + .user-tagline-rating.user-tagline-white { + color: @overlay1; + } + + .clock-component.clock-black { + background: @surface0; + } + .clock-component.clock-white { + background: @text; + } + + .highlight { + background: @highlight-color !important; + opacity: 1 !important; + } + .hover-square rect { + stroke: @overlay1 !important; + } + .hint { + background-color: @overlay1; + filter: drop-shadow(0 0 1px @crust); + } + .capture-hint { + background-color: @overlay1; + filter: drop-shadow(0 0 1px @crust); + z-index: -1; + } + + /* Review/evaluation */ + + .evaluation-bar-bar { + .evaluation-bar-black { + background-color: @surface2; + } + .evaluation-bar-draw { + background-color: @overlay1; + } + .evaluation-bar-white { + background-color: @text; + } + } + + .review-rating-white { + background-color: @text; + } + .review-rating-black { + background-color: @surface0; + color: @text; + } + + .overview-view-new-game-button { + background-color: @surface1; + } + + .arrow { + fill: @overlay0 !important; + } + + g#winner [fill="#dbac16"] { + fill: @yellow !important; + } + + /* Game over */ + + .modal-game-over-header-grey, + .modal-game-over-header-black-win, + .game-over-header-component { + background-color: @base; + color: @text; + } + + .modal-game-over-user-winner-active, + .modal-game-over-user-crown { + background: @lavender; + } + + .game-over-review-button-label { + color: @crust; + text-shadow: none; + } + + /* Ads */ + + .placeholder-ad-upgrade { + background-color: @accent-color; + } + .placeholder-ad-link { + color: @crust; + } + + .modal-trial-component.modal-trial-special-offer { + .modal-trial-header-background { + background-color: @accent-color; + } + } + + .coach-nudges-modal-component { + background: @mantle; + } + + .ready-to-play-banner-component { + background-color: @mantle; + + .ready-to-play-banner-title, + .ready-to-play-banner-list { + color: @text; + } + } + + .notifications-links-trial .nav-link-text { + color: @crust !important; + } + + /* Misc */ + + /* GM/IM/etc badge */ + --color-bg-chesstitle: @accent-color; + .course-author-title, + .course-header-author-title, + .form-dropdown-short-title, + .index-chess-title, + .leaderboard-index-chess-title, + .player-header-title, + .category-headline-chess-title { + color: @crust !important; + } + + .tooltip-body { + background: @surface0; + color: @text; + + &::after { + border-top-color: @surface0 !important; + } + } + .popup-component { + background-color: @surface0; + color: @text; + + &.popup-left .popup-arrow { + border-left-color: @surface0; + } + &.popup-right .popup-arrow { + border-right-color: @surface0; + } + } + + /* Error banner */ + .alerts-alert { + color: @crust; + } + + div.mode-selection-button-selected { + > .mode-selection-button-description { + color: @surface1; + } + + > .mode-selection-button-mode { + color: @mantle; + } + } + + .status-component { + background-color: @accent-color; + color: @crust; + } + + .navigation-footer-page-component, + .navigation-footer-platform-icon { + color: @subtext1; + text-shadow: none; + } + + .download-button-button { + color: @crust !important; + } + + .table-hover tbody tr:hover { + background-color: @surface2; + } + + /* Board */ + @board: escape( + '' + ); + + #board-play-computer, + .fade-in-overlay { + background-image: url("data:image/svg+xml,@{board}"); + } + + .coordinate-light { + fill: @accent-color; + } + .coordinate-dark { + fill: @surface0; + } + + /* + The "Tatiana" piece set. + + Author: sadsnake1 + License: CC BY-NC-SA 4.0 (https://creativecommons.org/licenses/by-nc-sa/4.0/) + Source: https://github.com/sharechess/sharechess/tree/4f2f54c1340df59556f0f1d67e7b788c3322229c/public/pieces/tatiana + */ + + @bishop: ''; + @king: ''; + @knight: ''; + @rook: ''; + @pawn: ''; + @queen: ''; + + #piece(@piece, @type) { + @raw: if( + @type = "white", + replace( + replace( + replace(replace(@piece, "%BORDER%", @mantle), "%BG%", @text), + "#fff", + @mantle + ), + "#000", + @text + ), + replace( + replace( + replace(replace(@piece, "%BORDER%", @mantle), "%BG%", @surface2), + "#fff", + @text + ), + "#000", + @mantle + ) + ); + @svg: escape(@raw); + @result: url("data:image/svg+xml,@{svg}"); + } + + --theme-board-style-image: url("data:image/svg+xml,@{board}"); + --theme-board-style-highlight-color: @highlight-color; + + --theme-piece-set-wp: #piece(@pawn, "white")[]; + --theme-piece-set-wn: #piece(@knight, "white")[]; + --theme-piece-set-wr: #piece(@rook, "white")[]; + --theme-piece-set-wb: #piece(@bishop, "white")[]; + --theme-piece-set-wq: #piece(@queen, "white")[]; + --theme-piece-set-wk: #piece(@king, "white")[]; + --theme-piece-set-bp: #piece(@pawn, "black")[]; + --theme-piece-set-bn: #piece(@knight, "black")[]; + --theme-piece-set-bb: #piece(@bishop, "black")[]; + --theme-piece-set-br: #piece(@rook, "black")[]; + --theme-piece-set-bq: #piece(@queen, "black")[]; + --theme-piece-set-bk: #piece(@king, "black")[]; + + .board-popover-component { + background-color: @surface0; + } + + .piece { + /* Black */ + &.bp { + background-image: #piece(@pawn, "black")[] !important; + } + &.bn { + background-image: #piece(@knight, "black")[] !important; + } + &.bb { + background-image: #piece(@bishop, "black")[] !important; + } + &.br { + background-image: #piece(@rook, "black")[] !important; + } + &.bk { + background-image: #piece(@king, "black")[] !important; + } + &.bq { + background-image: #piece(@queen, "black")[] !important; + } + + /* White */ + &.wp { + background-image: #piece(@pawn, "white")[] !important; + } + &.wn { + background-image: #piece(@knight, "white")[] !important; + } + &.wb { + background-image: #piece(@bishop, "white")[] !important; + } + &.wr { + background-image: #piece(@rook, "white")[] !important; + } + &.wk { + background-image: #piece(@king, "white")[] !important; + } + &.wq { + background-image: #piece(@queen, "white")[] !important; + } + } + + .chessboard-pkg-move-list-component .dark-row { + background-color: @surface1; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/cinny/catppuccin.user.css b/styles/cinny/catppuccin.user.css index 4052049aa3..84300e0844 100644 --- a/styles/cinny/catppuccin.user.css +++ b/styles/cinny/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Cinny Catppuccin +@name Cinny Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/cinny @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/cinny -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/cinny/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/cinny/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acinny @description Soothing pastel theme for Cinny @author Catppuccin @@ -13,270 +13,4 @@ @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("cinny.in") { - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @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; - } - } - - /* Backgrounds */ - --bg-surface: @base; - --bg-surface-transparent: fade(@base, 0%); - --bg-surface-low: @mantle; - --bg-surface-low-transparent: fade(@mantle, 0%); - --bg-surface-extra-low: @crust; - --bg-surface-extra-low-transparent: fade(@crust, 0%); - --bg-surface-border: fade(@crust, 20%); - --bg-surface-hover: @surface0; - --bg-surface-active: @surface1; - --bg-overlay: fade(@crust, 60%); - --bg-overlay-low: fade(@crust, 80%); - --bg-primary: @accent-color; - --bg-primary-hover: fade(@accent-color, 80%); - --bg-primary-active: fade(@accent-color, 70%); - --bg-primary-border: fade(@accent-color, 38%); - --bg-tooltip: @surface0; - --bg-badge: @lavender; - --bg-positive: @green; - --bg-positive-hover: fade(@green, 8%); - --bg-positive-active: fade(@green, 15%); - --bg-positive-border: fade(@green, 40%); - --bg-caution: @peach; - --bg-caution-hover: fade(@peach, 8%); - --bg-caution-active: fade(@peach, 15%); - --bg-caution-border: fade(@peach, 40%); - --bg-danger: @maroon; - --bg-danger-hover: fade(@maroon, 5%); - --bg-danger-active: fade(@maroon, 10%); - --bg-danger-border: fade(@maroon, 20%); - --bg-ping: fade(@green, 40%); - --bg-ping-hover: fade(@green, 50%); - - /* Texts */ - --tc-surface-high: @text; - --tc-surface-normal: @text; - --tc-surface-normal-low: @subtext1; - --tc-surface-low: @subtext0; - --tc-primary-high: @crust; - --tc-primary-normal: @text; - --tc-primary-low: @subtext1; - --tc-tooltip: @subtext0; - --tc-code: @mauve; - --tc-link: @rosewater; - --tc-badge: @crust; - --tc-positive-high: @green; - --tc-positive-normal: @green; - --tc-positive-low: @green; - --tc-caution-high: @peach; - --tc-caution-normal: @peach; - --tc-caution-low: @peach; - --tc-danger-high: @maroon; - --tc-danger-normal: @maroon; - --tc-danger-low: @maroon; - - /* Icons */ - --ic-surface-high: @text; - --ic-surface-normal: @text; - --ic-surface-low: @subtext1; - --ic-primary-high: @crust; - --ic-primary-normal: @crust; - --ic-primary-low: @crust; - --ic-positive-high: @green; - --ic-positive-normal: @maroon; - --ic-caution-high: @peach; - --ic-caution-normal: @peach; - --ic-danger-high: @maroon; - --ic-danger-normal: @maroon; - - /* Users */ - --mx-uc-1: @blue; - --mx-uc-2: @pink; - --mx-uc-3: @teal; - --mx-uc-4: @red; - --mx-uc-5: @peach; - --mx-uc-6: @sky; - --mx-uc-7: @mauve; - --mx-uc-8: @green; - - body.oq6d071w, - &._15q3ngn0, - &._15q3ngn1, - &._15q3ngn2 { - --oq6d070: @mantle; - --oq6d071: @base; - --oq6d072: @surface0; - --oq6d073: @surface1; - --oq6d074: @text; - --oq6d075: @base; - --oq6d076: @surface0; - --oq6d077: @surface1; - --oq6d078: @surface2; - --oq6d079: @text; - --oq6d07a: @mantle; - --oq6d07b: @base; - --oq6d07c: @surface0; - --oq6d07d: @surface1; - --oq6d07e: @text; - - --oq6d07f: @subtext0; - --oq6d07g: @overlay2; - --oq6d07h: @overlay1; - --oq6d07i: @overlay0; - - --oq6d07j: @base; - - --oq6d07k: fade(@accent-color, 50%); - --oq6d07l: fade(@accent-color, 40%); - --oq6d07m: fade(@accent-color, 30%); - --oq6d07n: fade(@accent-color, 20%); - - --oq6d07o: @text; - --oq6d07p: @subtext1; - --oq6d07q: @subtext0; - --oq6d07r: @overlay2; - --oq6d07s: @overlay1; - - --oq6d07t: @mantle; - --oq6d07u: @surface0; - --oq6d07v: @surface1; - --oq6d07w: @surface2; - --oq6d07x: @overlay0; - --oq6d07y: @subtext0; - - --oq6d07z: fade(@green, 90%); - --oq6d0710: fade(@green, 95%); - --oq6d0711: fade(@green, 97.5%); - --oq6d0712: @green; - --oq6d0713: @surface0; - --oq6d0714: fade(@surface0, 97.5%); - --oq6d0715: fade(@surface0, 95%); - --oq6d0716: fade(@surface0, 90%); - --oq6d0717: fade(@surface0, 80%); - - --oq6d0718: @green; - - --oq6d0719: fade(@peach, 90%); - --oq6d071a: fade(@peach, 95%); - --oq6d071b: fade(@peach, 97.5%); - --oq6d071c: @peach; - --oq6d071d: fade(@surface0, 97.5%); - --oq6d071e: fade(@surface0, 95%); - --oq6d071f: fade(@surface0, 90%); - --oq6d071g: fade(@surface0, 80%); - --oq6d071h: fade(@surface0, 70%); - - --oq6d071i: fade(@maroon, 90%); - --oq6d071j: fade(@maroon, 95%); - --oq6d071k: fade(@maroon, 97.5%); - --oq6d071l: @maroon; - --oq6d071m: fade(@surface0, 97.5%); - --oq6d071n: fade(@surface0, 95%); - --oq6d071o: fade(@surface0, 90%); - --oq6d071p: fade(@surface0, 80%); - --oq6d071q: fade(@surface0, 70%); - --oq6d071r: fade(@surface0, 60%); - --oq6d071s: fade(@maroon, 90%); - - --oq6d071t: fade(@text, 50%); - --oq6d071u: @crust; - --oq6d071v: fade(@crust, 60%); - } - - /* Syntax highlighting */ - body.prism-light, - &.prism-light, - &.prism-dark { - --prism-comment: @overlay2; - --prism-punctuation: @overlay2; - --prism-property: @yellow; - --prism-boolean: @peach; - --prism-selector: @green; - --prism-operator: @sky; - --prism-atrule: @mauve; - --prism-keyword: @mauve; - --prism-regex: @pink; - } - - /* Search results */ - ._1m2qi7rn { - background-color: @accent-color; - color: @base; - } - - /* Footer */ - .footer { - .text-s1, - .text-h2, - a { - color: @text; - } - - .footer__creator, - .footer__menu-container .text-b3 { - color: @subtext0; - } - - background-color: @base; - } - } - - :root, - .silver-theme { - #catppuccin(@lightFlavor, @accentColor); - } - - .dark-theme, - .butter-theme { - #catppuccin(@darkFlavor, @accentColor); - } -} - -/* prettier-ignore */ -@catppuccin: { - @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; - @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; - @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; - @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; -} - -// vim:ft=less +==/UserStyle== */ \ No newline at end of file diff --git a/styles/cinny/catppuccin.user.less b/styles/cinny/catppuccin.user.less new file mode 100644 index 0000000000..bac3825ed8 --- /dev/null +++ b/styles/cinny/catppuccin.user.less @@ -0,0 +1,280 @@ +/* ==UserStyle== +@name Cinny Catppuccin +@namespace github.com/catppuccin/userstyles/styles/cinny +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/cinny +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/cinny/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acinny +@description Soothing pastel theme for Cinny +@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("cinny.in") { + #catppuccin(@lookup, @accent) { + @rosewater: @catppuccin[@@lookup][@rosewater]; + @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; + } + } + + /* Backgrounds */ + --bg-surface: @base; + --bg-surface-transparent: fade(@base, 0%); + --bg-surface-low: @mantle; + --bg-surface-low-transparent: fade(@mantle, 0%); + --bg-surface-extra-low: @crust; + --bg-surface-extra-low-transparent: fade(@crust, 0%); + --bg-surface-border: fade(@crust, 20%); + --bg-surface-hover: @surface0; + --bg-surface-active: @surface1; + --bg-overlay: fade(@crust, 60%); + --bg-overlay-low: fade(@crust, 80%); + --bg-primary: @accent-color; + --bg-primary-hover: fade(@accent-color, 80%); + --bg-primary-active: fade(@accent-color, 70%); + --bg-primary-border: fade(@accent-color, 38%); + --bg-tooltip: @surface0; + --bg-badge: @lavender; + --bg-positive: @green; + --bg-positive-hover: fade(@green, 8%); + --bg-positive-active: fade(@green, 15%); + --bg-positive-border: fade(@green, 40%); + --bg-caution: @peach; + --bg-caution-hover: fade(@peach, 8%); + --bg-caution-active: fade(@peach, 15%); + --bg-caution-border: fade(@peach, 40%); + --bg-danger: @maroon; + --bg-danger-hover: fade(@maroon, 5%); + --bg-danger-active: fade(@maroon, 10%); + --bg-danger-border: fade(@maroon, 20%); + --bg-ping: fade(@green, 40%); + --bg-ping-hover: fade(@green, 50%); + + /* Texts */ + --tc-surface-high: @text; + --tc-surface-normal: @text; + --tc-surface-normal-low: @subtext1; + --tc-surface-low: @subtext0; + --tc-primary-high: @crust; + --tc-primary-normal: @text; + --tc-primary-low: @subtext1; + --tc-tooltip: @subtext0; + --tc-code: @mauve; + --tc-link: @rosewater; + --tc-badge: @crust; + --tc-positive-high: @green; + --tc-positive-normal: @green; + --tc-positive-low: @green; + --tc-caution-high: @peach; + --tc-caution-normal: @peach; + --tc-caution-low: @peach; + --tc-danger-high: @maroon; + --tc-danger-normal: @maroon; + --tc-danger-low: @maroon; + + /* Icons */ + --ic-surface-high: @text; + --ic-surface-normal: @text; + --ic-surface-low: @subtext1; + --ic-primary-high: @crust; + --ic-primary-normal: @crust; + --ic-primary-low: @crust; + --ic-positive-high: @green; + --ic-positive-normal: @maroon; + --ic-caution-high: @peach; + --ic-caution-normal: @peach; + --ic-danger-high: @maroon; + --ic-danger-normal: @maroon; + + /* Users */ + --mx-uc-1: @blue; + --mx-uc-2: @pink; + --mx-uc-3: @teal; + --mx-uc-4: @red; + --mx-uc-5: @peach; + --mx-uc-6: @sky; + --mx-uc-7: @mauve; + --mx-uc-8: @green; + + body.oq6d071w, + &._15q3ngn0, + &._15q3ngn1, + &._15q3ngn2 { + --oq6d070: @mantle; + --oq6d071: @base; + --oq6d072: @surface0; + --oq6d073: @surface1; + --oq6d074: @text; + --oq6d075: @base; + --oq6d076: @surface0; + --oq6d077: @surface1; + --oq6d078: @surface2; + --oq6d079: @text; + --oq6d07a: @mantle; + --oq6d07b: @base; + --oq6d07c: @surface0; + --oq6d07d: @surface1; + --oq6d07e: @text; + + --oq6d07f: @subtext0; + --oq6d07g: @overlay2; + --oq6d07h: @overlay1; + --oq6d07i: @overlay0; + + --oq6d07j: @base; + + --oq6d07k: fade(@accent-color, 50%); + --oq6d07l: fade(@accent-color, 40%); + --oq6d07m: fade(@accent-color, 30%); + --oq6d07n: fade(@accent-color, 20%); + + --oq6d07o: @text; + --oq6d07p: @subtext1; + --oq6d07q: @subtext0; + --oq6d07r: @overlay2; + --oq6d07s: @overlay1; + + --oq6d07t: @mantle; + --oq6d07u: @surface0; + --oq6d07v: @surface1; + --oq6d07w: @surface2; + --oq6d07x: @overlay0; + --oq6d07y: @subtext0; + + --oq6d07z: fade(@green, 90%); + --oq6d0710: fade(@green, 95%); + --oq6d0711: fade(@green, 97.5%); + --oq6d0712: @green; + --oq6d0713: @surface0; + --oq6d0714: fade(@surface0, 97.5%); + --oq6d0715: fade(@surface0, 95%); + --oq6d0716: fade(@surface0, 90%); + --oq6d0717: fade(@surface0, 80%); + + --oq6d0718: @green; + + --oq6d0719: fade(@peach, 90%); + --oq6d071a: fade(@peach, 95%); + --oq6d071b: fade(@peach, 97.5%); + --oq6d071c: @peach; + --oq6d071d: fade(@surface0, 97.5%); + --oq6d071e: fade(@surface0, 95%); + --oq6d071f: fade(@surface0, 90%); + --oq6d071g: fade(@surface0, 80%); + --oq6d071h: fade(@surface0, 70%); + + --oq6d071i: fade(@maroon, 90%); + --oq6d071j: fade(@maroon, 95%); + --oq6d071k: fade(@maroon, 97.5%); + --oq6d071l: @maroon; + --oq6d071m: fade(@surface0, 97.5%); + --oq6d071n: fade(@surface0, 95%); + --oq6d071o: fade(@surface0, 90%); + --oq6d071p: fade(@surface0, 80%); + --oq6d071q: fade(@surface0, 70%); + --oq6d071r: fade(@surface0, 60%); + --oq6d071s: fade(@maroon, 90%); + + --oq6d071t: fade(@text, 50%); + --oq6d071u: @crust; + --oq6d071v: fade(@crust, 60%); + } + + /* Syntax highlighting */ + body.prism-light, + &.prism-light, + &.prism-dark { + --prism-comment: @overlay2; + --prism-punctuation: @overlay2; + --prism-property: @yellow; + --prism-boolean: @peach; + --prism-selector: @green; + --prism-operator: @sky; + --prism-atrule: @mauve; + --prism-keyword: @mauve; + --prism-regex: @pink; + } + + /* Search results */ + ._1m2qi7rn { + background-color: @accent-color; + color: @base; + } + + /* Footer */ + .footer { + .text-s1, + .text-h2, + a { + color: @text; + } + + .footer__creator, + .footer__menu-container .text-b3 { + color: @subtext0; + } + + background-color: @base; + } + } + + :root, + .silver-theme { + #catppuccin(@lightFlavor, @accentColor); + } + + .dark-theme, + .butter-theme { + #catppuccin(@darkFlavor, @accentColor); + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/cobalt/catppuccin.user.css b/styles/cobalt/catppuccin.user.css index f93f23f326..1c9dd24b83 100644 --- a/styles/cobalt/catppuccin.user.css +++ b/styles/cobalt/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name cobalt Catppuccin +@name cobalt Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/cobalt @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/cobalt -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/cobalt/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/cobalt/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acobalt @description Soothing pastel theme for cobalt @author Catppuccin @@ -13,134 +13,4 @@ @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('cobalt.tools') { - [data-theme="dark"] { - #catppuccin(@darkFlavor, @accentColor); - } - [data-theme="light"] { - #catppuccin(@lightFlavor, @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; - } - } - - --primary: @base; - --secondary: @text; - --gray: @subtext0; - --blue: @blue; - --green: @green; - --red: @maroon; - --dark-red: @red; - --white: @crust; - --button: @surface0; - --button-hover: darken(@surface0, 5%); - --button-active-hover: darken(@subtext0, 5%); - --button-elevated: @surface1; - --button-elevated-hover: darken(@surface1, 5%); - --button-text: @text; - --sidebar-bg: @mantle; - --sidebar-hover: @surface0; - --sidebar-highlight: @text; - --input-border: @surface2; - --popup-bg: @mantle; - --toggle-bg-enabled: @accent-color; - - #donate-page { - --donate-gradient-start: @surface1 !important; - --donate-gradient-end: @surface0 !important; - } - - #banner-left { - color: @text; - } - - #banner-subtitle { - color: @subtext0; - opacity: 1; - } - - .donate-card button { - color: @text !important; - } - - .donate-card { - color: @text; - } - - .donate-card-title { - color: @text; - } - - .donate-card-subtitle { - color: @subtext0; - opacity: 1; - } - - #input-container.focused { - box-shadow: 0 0 0 2px @text inset !important; - } - - #input-dollar-sign { - color: @text; - } - - #donation-custom-input { - color: @text !important; - } - - #cobalt-logo path { - fill: @text; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/cobalt/catppuccin.user.less b/styles/cobalt/catppuccin.user.less new file mode 100644 index 0000000000..b339e880d3 --- /dev/null +++ b/styles/cobalt/catppuccin.user.less @@ -0,0 +1,144 @@ +/* ==UserStyle== +@name cobalt Catppuccin +@namespace github.com/catppuccin/userstyles/styles/cobalt +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/cobalt +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/cobalt/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acobalt +@description Soothing pastel theme for cobalt +@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("cobalt.tools") { + [data-theme="dark"] { + #catppuccin(@darkFlavor, @accentColor); + } + [data-theme="light"] { + #catppuccin(@lightFlavor, @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; + } + } + + --primary: @base; + --secondary: @text; + --gray: @subtext0; + --blue: @blue; + --green: @green; + --red: @maroon; + --dark-red: @red; + --white: @crust; + --button: @surface0; + --button-hover: darken(@surface0, 5%); + --button-active-hover: darken(@subtext0, 5%); + --button-elevated: @surface1; + --button-elevated-hover: darken(@surface1, 5%); + --button-text: @text; + --sidebar-bg: @mantle; + --sidebar-hover: @surface0; + --sidebar-highlight: @text; + --input-border: @surface2; + --popup-bg: @mantle; + --toggle-bg-enabled: @accent-color; + + #donate-page { + --donate-gradient-start: @surface1 !important; + --donate-gradient-end: @surface0 !important; + } + + #banner-left { + color: @text; + } + + #banner-subtitle { + color: @subtext0; + opacity: 1; + } + + .donate-card button { + color: @text !important; + } + + .donate-card { + color: @text; + } + + .donate-card-title { + color: @text; + } + + .donate-card-subtitle { + color: @subtext0; + opacity: 1; + } + + #input-container.focused { + box-shadow: 0 0 0 2px @text inset !important; + } + + #input-dollar-sign { + color: @text; + } + + #donation-custom-input { + color: @text !important; + } + + #cobalt-logo path { + fill: @text; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/codeberg/catppuccin.user.css b/styles/codeberg/catppuccin.user.css index a2950f8aca..2e349257c2 100644 --- a/styles/codeberg/catppuccin.user.css +++ b/styles/codeberg/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Codeberg Catppuccin +@name Codeberg Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/codeberg @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/codeberg -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/codeberg/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/codeberg/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acodeberg @description Soothing pastel theme for Codeberg @author Catppuccin @@ -13,122 +13,4 @@ @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('codeberg.org') { - @import (css) - url("https://catppuccin.github.io/gitea/theme-catppuccin-@{lightFlavor}-@{accentColor}.css") - (prefers-color-scheme: light); - @import (css) - url("https://catppuccin.github.io/gitea/theme-catppuccin-@{darkFlavor}-@{accentColor}.css") - (prefers-color-scheme: dark); -} - -@-moz-document domain('codeberg.org') { - #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]; - - /* Base styles not needed, themed in upstream Gitea port. */ - - --color-body: @base; - --color-nav-text: @crust; - --color-nav-hover-bg: darken(@accent-color, 5%); - --color-secondary-nav-bg: @surface0; - --color-link: @blue; - --color-footer-text: @text; - - .ui.secondary.menu .dropdown.item:hover, - .ui.secondary.menu a.item:hover, - .ui.secondary.menu a.active.item:hover { - background-color: var(--color-nav-hover-bg); - color: var(--color-black); - } - - .ui.basic.red.buttons .button, - .ui.basic.red.button { - &:hover, - &:focus { - background-color: @red; - border-color: var(--color-light-border); - color: @crust; - } - } - - #codeberg-logo (@color) { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - #navbar-logo img { - #codeberg-logo(@crust); - } - .branding img { - #codeberg-logo(@text); - } - - footer { - .button:hover { - background-color: @accent-color; - color: @crust; - } - - a:hover { - color: @blue !important; - } - } - } - - @media (prefers-color-scheme: light) { - [data-theme="codeberg-dark"], - [data-theme="codeberg-light"], - [data-theme="codeberg-auto"] { - #catppuccin(@lightFlavor, @accentColor); - } - } - - @media (prefers-color-scheme: dark) { - [data-theme="codeberg-dark"], - [data-theme="codeberg-light"], - [data-theme="codeberg-auto"] { - #catppuccin(@darkFlavor, @accentColor); - } - } -} - -/* prettier-ignore */ -@catppuccin: { - @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; - @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; - @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; - @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; -} - -// vim:ft=less +==/UserStyle== */ \ No newline at end of file diff --git a/styles/codeberg/catppuccin.user.less b/styles/codeberg/catppuccin.user.less new file mode 100644 index 0000000000..c45acfe59f --- /dev/null +++ b/styles/codeberg/catppuccin.user.less @@ -0,0 +1,132 @@ +/* ==UserStyle== +@name Codeberg Catppuccin +@namespace github.com/catppuccin/userstyles/styles/codeberg +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/codeberg +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/codeberg/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acodeberg +@description Soothing pastel theme for Codeberg +@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("codeberg.org") { + @import (css) + url("https://catppuccin.github.io/gitea/theme-catppuccin-@{lightFlavor}-@{accentColor}.css") + (prefers-color-scheme: light); + @import (css) + url("https://catppuccin.github.io/gitea/theme-catppuccin-@{darkFlavor}-@{accentColor}.css") + (prefers-color-scheme: dark); +} + +@-moz-document domain("codeberg.org") { + #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]; + + /* Base styles not needed, themed in upstream Gitea port. */ + + --color-body: @base; + --color-nav-text: @crust; + --color-nav-hover-bg: darken(@accent-color, 5%); + --color-secondary-nav-bg: @surface0; + --color-link: @blue; + --color-footer-text: @text; + + .ui.secondary.menu .dropdown.item:hover, + .ui.secondary.menu a.item:hover, + .ui.secondary.menu a.active.item:hover { + background-color: var(--color-nav-hover-bg); + color: var(--color-black); + } + + .ui.basic.red.buttons .button, + .ui.basic.red.button { + &:hover, + &:focus { + background-color: @red; + border-color: var(--color-light-border); + color: @crust; + } + } + + #codeberg-logo(@color) { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + #navbar-logo img { + #codeberg-logo(@crust); + } + .branding img { + #codeberg-logo(@text); + } + + footer { + .button:hover { + background-color: @accent-color; + color: @crust; + } + + a:hover { + color: @blue !important; + } + } + } + + @media (prefers-color-scheme: light) { + [data-theme="codeberg-dark"], + [data-theme="codeberg-light"], + [data-theme="codeberg-auto"] { + #catppuccin(@lightFlavor, @accentColor); + } + } + + @media (prefers-color-scheme: dark) { + [data-theme="codeberg-dark"], + [data-theme="codeberg-light"], + [data-theme="codeberg-auto"] { + #catppuccin(@darkFlavor, @accentColor); + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/crates.io/catppuccin.user.css b/styles/crates.io/catppuccin.user.css index 6f6df59d50..442ee27039 100644 --- a/styles/crates.io/catppuccin.user.css +++ b/styles/crates.io/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name crates.io Catppuccin +@name crates.io Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/crates.io @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/crates.io -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/crates.io/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/crates.io/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acrates.io @description Soothing pastel theme for crates.io @author Catppuccin @@ -13,313 +13,4 @@ @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('crates.io') { - @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); - - code.hljs { - background: none !important; - } - - @media (prefers-color-scheme: light) { - :root[data-color-scheme="system"] { - #catppuccin(@lightFlavor, @accentColor); - } - } - @media (prefers-color-scheme: dark) { - :root[data-color-scheme="system"] { - #catppuccin(@darkFlavor, @accentColor); - } - } - - :root[data-color-scheme="dark"] { - #catppuccin(@darkFlavor, @accentColor); - } - :root[data-color-scheme="light"] { - #catppuccin(@lightFlavor, @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]; - - --ctp-rosewater: @rosewater; - --ctp-flamingo: @flamingo; - --ctp-pink: @pink; - --ctp-mauve: @mauve; - --ctp-red: @red; - --ctp-maroon: @maroon; - --ctp-peach: @peach; - --ctp-yellow: @yellow; - --ctp-green: @green; - --ctp-teal: @teal; - --ctp-sky: @sky; - --ctp-sapphire: @sapphire; - --ctp-blue: @blue; - --ctp-lavender: @lavender; - --ctp-text: @text; - --ctp-subtext1: @subtext1; - --ctp-subtext0: @subtext0; - --ctp-overlay2: @overlay2; - --ctp-overlay1: @overlay1; - --ctp-overlay0: @overlay0; - --ctp-surface2: @surface2; - --ctp-surface1: @surface1; - --ctp-surface0: @surface0; - --ctp-base: @base; - --ctp-mantle: @mantle; - --ctp-crust: @crust; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - &, - * { - --shadow: none !important; - --csstools-color-scheme--dark: none; - - --header-bg-color: @mantle; - --main-color: @text; - --main-color-light: @subtext1; - --main-shadow-color: @surface0; - --main-bg: @mantle; - --main-bg-dark: @base; - --gray-border: @surface0; - --link-color: @accent-color; - --link-hover-color: darken(@accent-color, 5%); - --footer-header-color: @text; - - /* Main article/readme background */ - --csstools-light-dark-toggle--49: @base; - - /* Inline code background */ - --csstools-light-dark-toggle--85: @mantle; - /* Code block background */ - --csstools-light-dark-toggle--86: @mantle; - /* Copyable text hover */ - --csstools-light-dark-toggle--3: @base; - - /* Versions cards */ - --csstools-light-dark-toggle--108: @base; - --csstools-light-dark-toggle--110: @surface0; - --csstools-light-dark-toggle--105: @surface0; - [class*="_new"] { - color: @green; - } - /* Dependencies cards */ - --csstools-light-dark-toggle--73: @base; - --csstools-light-dark-toggle--69: @surface0; - --grey600: @subtext0; - --grey700: @text; - /* Dependents cards */ - --csstools-light-dark-toggle--84: @base; - --csstools-light-dark-toggle--81: @surface0; - /* Search results cards */ - --csstools-light-dark-toggle--2: @base; - /* Homepage cards */ - --csstools-light-dark-toggle--77: @base; - --csstools-light-dark-toggle--80: @surface0; - --csstools-light-dark-toggle--78: @subtext1; - - /* Header search bar */ - --csstools-light-dark-toggle--33: @crust; - --yellow500: @accent-color; - --yellow700: darken(@accent-color, 5%); - - /* Dropdown */ - --csstools-light-dark-toggle--20: @mantle; - /* Dropdown items */ - [class*="_item_"] { - button:hover, - > a:hover, - [class*="_selected_"] { - background: @surface0; - color: @text !important; - } - } - } - - /* Toasts */ - .c-notification { - --ecn-green: @green; - --ecn-blue: @blue; - --ecn-orange: @peach; - --ecn-red: @red; - - &, - .c-notification__icon { - color: @crust; - } - } - - /* Tooltips */ - .ember-tooltip { - color: @text; - background-color: @crust; - text-shadow: none; - - &[x-placement^="top"] .ember-tooltip-arrow { - border-top-color: @crust; - } - } - - /* Icons and icon badges */ - [class*="downloads_"] [fill="#FFF"] { - fill: @surface0 !important; - } - [fill="#B13B89"], - [fill="#B84D94"], - svg[class*="_download-icon"] { - fill: @accent-color !important; - } - [stroke="#B84D94"] { - stroke: @accent-color !important; - } - - /* Footer links */ - ._content_hautyr { - h1 { - text-shadow: none; - } - - a { - color: @accent-color; - - &:hover { - color: darken(@accent-color, 5%); - text-shadow: none; - } - } - } - - /* Misc header text */ - [class*="_header-inner_"] { - &, - a { - color: @text; - } - } - - /* Search bar magnifying glass icon */ - form[action="/search"] button { - color: @crust; - } - - /* Sort by search results */ - ._icon_xsqxju { - color: @accent-color; - } - - /* Primary buttons */ - [class*="_tan-button_"], - [class*="_yellow-button_"] { - color: @crust; - background: @accent-color; - - &:hover { - background-color: darken(@accent-color, 5%); - } - } - - [class*="_red-button_"] { - --bg-color-top: @maroon; - --bg-color-bottom: @maroon; - --bg-color-top-dark: @red; - --bg-color-bottom-dark: @red; - } - - /* User email settings */ - [class*="_me-email_"] { - [class*="_row_"] { - border-color: @surface0; - } - [class*="_verified_"] { - color: @green; - } - } - - /* Logged out home page hero */ - [class*="_hero-title_"] { - color: @text; - text-shadow: none; - } - [class*="_hero-button_"] [class*="_icon_"] { - color: @crust; - } - [class*="_blurb_"] [class*="_stats-value_"] { - [class*="_label_"], - svg { - color: @subtext0; - } - } - - /* User avatar backgrounds */ - [class*="_avatar_"] { - background-color: @surface0; - box-shadow: none; - } - - [class*="_yanked-badge_"] { - background-color: @red; - color: @crust; - } - - /* Tables in READMEs */ - table { - th, - td { - border-color: @surface1; - } - } - } -} - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/crates.io/catppuccin.user.less b/styles/crates.io/catppuccin.user.less new file mode 100644 index 0000000000..22cb887fd4 --- /dev/null +++ b/styles/crates.io/catppuccin.user.less @@ -0,0 +1,323 @@ +/* ==UserStyle== +@name crates.io Catppuccin +@namespace github.com/catppuccin/userstyles/styles/crates.io +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/crates.io +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/crates.io/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acrates.io +@description Soothing pastel theme for crates.io +@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("crates.io") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + + code.hljs { + background: none !important; + } + + @media (prefers-color-scheme: light) { + :root[data-color-scheme="system"] { + #catppuccin(@lightFlavor, @accentColor); + } + } + @media (prefers-color-scheme: dark) { + :root[data-color-scheme="system"] { + #catppuccin(@darkFlavor, @accentColor); + } + } + + :root[data-color-scheme="dark"] { + #catppuccin(@darkFlavor, @accentColor); + } + :root[data-color-scheme="light"] { + #catppuccin(@lightFlavor, @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]; + + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + &, + * { + --shadow: none !important; + --csstools-color-scheme--dark: none; + + --header-bg-color: @mantle; + --main-color: @text; + --main-color-light: @subtext1; + --main-shadow-color: @surface0; + --main-bg: @mantle; + --main-bg-dark: @base; + --gray-border: @surface0; + --link-color: @accent-color; + --link-hover-color: darken(@accent-color, 5%); + --footer-header-color: @text; + + /* Main article/readme background */ + --csstools-light-dark-toggle--49: @base; + + /* Inline code background */ + --csstools-light-dark-toggle--85: @mantle; + /* Code block background */ + --csstools-light-dark-toggle--86: @mantle; + /* Copyable text hover */ + --csstools-light-dark-toggle--3: @base; + + /* Versions cards */ + --csstools-light-dark-toggle--108: @base; + --csstools-light-dark-toggle--110: @surface0; + --csstools-light-dark-toggle--105: @surface0; + [class*="_new"] { + color: @green; + } + /* Dependencies cards */ + --csstools-light-dark-toggle--73: @base; + --csstools-light-dark-toggle--69: @surface0; + --grey600: @subtext0; + --grey700: @text; + /* Dependents cards */ + --csstools-light-dark-toggle--84: @base; + --csstools-light-dark-toggle--81: @surface0; + /* Search results cards */ + --csstools-light-dark-toggle--2: @base; + /* Homepage cards */ + --csstools-light-dark-toggle--77: @base; + --csstools-light-dark-toggle--80: @surface0; + --csstools-light-dark-toggle--78: @subtext1; + + /* Header search bar */ + --csstools-light-dark-toggle--33: @crust; + --yellow500: @accent-color; + --yellow700: darken(@accent-color, 5%); + + /* Dropdown */ + --csstools-light-dark-toggle--20: @mantle; + /* Dropdown items */ + [class*="_item_"] { + button:hover, + > a:hover, + [class*="_selected_"] { + background: @surface0; + color: @text !important; + } + } + } + + /* Toasts */ + .c-notification { + --ecn-green: @green; + --ecn-blue: @blue; + --ecn-orange: @peach; + --ecn-red: @red; + + &, + .c-notification__icon { + color: @crust; + } + } + + /* Tooltips */ + .ember-tooltip { + color: @text; + background-color: @crust; + text-shadow: none; + + &[x-placement^="top"] .ember-tooltip-arrow { + border-top-color: @crust; + } + } + + /* Icons and icon badges */ + [class*="downloads_"] [fill="#FFF"] { + fill: @surface0 !important; + } + [fill="#B13B89"], + [fill="#B84D94"], + svg[class*="_download-icon"] { + fill: @accent-color !important; + } + [stroke="#B84D94"] { + stroke: @accent-color !important; + } + + /* Footer links */ + ._content_hautyr { + h1 { + text-shadow: none; + } + + a { + color: @accent-color; + + &:hover { + color: darken(@accent-color, 5%); + text-shadow: none; + } + } + } + + /* Misc header text */ + [class*="_header-inner_"] { + &, + a { + color: @text; + } + } + + /* Search bar magnifying glass icon */ + form[action="/search"] button { + color: @crust; + } + + /* Sort by search results */ + ._icon_xsqxju { + color: @accent-color; + } + + /* Primary buttons */ + [class*="_tan-button_"], + [class*="_yellow-button_"] { + color: @crust; + background: @accent-color; + + &:hover { + background-color: darken(@accent-color, 5%); + } + } + + [class*="_red-button_"] { + --bg-color-top: @maroon; + --bg-color-bottom: @maroon; + --bg-color-top-dark: @red; + --bg-color-bottom-dark: @red; + } + + /* User email settings */ + [class*="_me-email_"] { + [class*="_row_"] { + border-color: @surface0; + } + [class*="_verified_"] { + color: @green; + } + } + + /* Logged out home page hero */ + [class*="_hero-title_"] { + color: @text; + text-shadow: none; + } + [class*="_hero-button_"] [class*="_icon_"] { + color: @crust; + } + [class*="_blurb_"] [class*="_stats-value_"] { + [class*="_label_"], + svg { + color: @subtext0; + } + } + + /* User avatar backgrounds */ + [class*="_avatar_"] { + background-color: @surface0; + box-shadow: none; + } + + [class*="_yanked-badge_"] { + background-color: @red; + color: @crust; + } + + /* Tables in READMEs */ + table { + th, + td { + border-color: @surface1; + } + } + } +} + +#rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/crowdin/catppuccin.user.css b/styles/crowdin/catppuccin.user.css index 2b9f7e3b86..529a68719d 100644 --- a/styles/crowdin/catppuccin.user.css +++ b/styles/crowdin/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Crowdin Catppuccin +@name Crowdin Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/crowdin @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/crowdin -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/crowdin/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/crowdin/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acrowdin @description Soothing pastel theme for Crowdin @author Catppuccin @@ -13,196 +13,4 @@ @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 regexp("https://crowdin.com(?!/translate).*") -{ - @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; - } - } - - :root:root:root:root:root { - --app-bg: @mantle; - --body-bg: @base; - --light-bg: @surface0; - --search-bg: @surface0; - --super-light-bg: @surface1; - --body-color: @text; - --link-hover: @green; - --primary: @green; - --secondary: @rosewater; - --tertiary: @pink; - --primary-btn: @green; - --primary-btn-hover: @teal; - --warning-content: @yellow; - --info: @blue; - --crowdin-primary-blue-gray-05: @surface1; - --crowdin-primary-blue-gray: @overlay0; - } - - .btn-primary, - .btn-primary:hover { - color: @base; - } - - .btn-outline-primary, - .btn-outline-primary:hover { - color: @green; - border-color: @green; - } - } -} - -@-moz-document regexp("https://crowdin.com/translate/.*") -{ - @media (prefers-color-scheme: light) { - #catppuccin(@lightFlavor, @accentColor); - } - @media (prefers-color-scheme: dark) { - #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: @mantle !important; - color: @text !important; - } - - #left_panel, - .nav-tabs, - .navbar-inner.editor-navbar, - #discussions_control, - #main_menu { - background-color: @surface0 !important; - } - - #editor-center-layout, - .editor-pane-inner, - #translation_wrapper, - #translation_text_container, - .texts-to-translate-header, - #right_panel, - .texts-to-translate-paging, - #asset_preview_wrapper.no-preview, - .editor-pane-title-and-buttons-helper { - background-color: @base !important; - color: @text !important; - } - - .body.dark-theme #main_menu .nav-pills > li.active > a { - background-color: @blue; - } - - .progress .bar-validate { - background-color: @lavender; - } - .progress .bar-translate { - background-color: @sapphire; - } - - a, - .btn-link { - color: @rosewater !important; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/crowdin/catppuccin.user.less b/styles/crowdin/catppuccin.user.less new file mode 100644 index 0000000000..20dba6602c --- /dev/null +++ b/styles/crowdin/catppuccin.user.less @@ -0,0 +1,204 @@ +/* ==UserStyle== +@name Crowdin Catppuccin +@namespace github.com/catppuccin/userstyles/styles/crowdin +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/crowdin +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/crowdin/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acrowdin +@description Soothing pastel theme for Crowdin +@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 regexp("https://crowdin.com(?!/translate).*") { + @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; + } + } + + :root:root:root:root:root { + --app-bg: @mantle; + --body-bg: @base; + --light-bg: @surface0; + --search-bg: @surface0; + --super-light-bg: @surface1; + --body-color: @text; + --link-hover: @green; + --primary: @green; + --secondary: @rosewater; + --tertiary: @pink; + --primary-btn: @green; + --primary-btn-hover: @teal; + --warning-content: @yellow; + --info: @blue; + --crowdin-primary-blue-gray-05: @surface1; + --crowdin-primary-blue-gray: @overlay0; + } + + .btn-primary, + .btn-primary:hover { + color: @base; + } + + .btn-outline-primary, + .btn-outline-primary:hover { + color: @green; + border-color: @green; + } + } +} + +@-moz-document regexp("https://crowdin.com/translate/.*") { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor, @accentColor); + } + @media (prefers-color-scheme: dark) { + #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: @mantle !important; + color: @text !important; + } + + #left_panel, + .nav-tabs, + .navbar-inner.editor-navbar, + #discussions_control, + #main_menu { + background-color: @surface0 !important; + } + + #editor-center-layout, + .editor-pane-inner, + #translation_wrapper, + #translation_text_container, + .texts-to-translate-header, + #right_panel, + .texts-to-translate-paging, + #asset_preview_wrapper.no-preview, + .editor-pane-title-and-buttons-helper { + background-color: @base !important; + color: @text !important; + } + + .body.dark-theme #main_menu .nav-pills > li.active > a { + background-color: @blue; + } + + .progress .bar-validate { + background-color: @lavender; + } + .progress .bar-translate { + background-color: @sapphire; + } + + a, + .btn-link { + color: @rosewater !important; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/deepl/catppuccin.user.css b/styles/deepl/catppuccin.user.css index f41d2986cc..305fa2e187 100644 --- a/styles/deepl/catppuccin.user.css +++ b/styles/deepl/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name DeepL Catppuccin +@name DeepL Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/deepl @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/deepl -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/deepl/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/deepl/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Adeepl @description Soothing pastel theme for DeepL @author Catppuccin @@ -13,335 +13,4 @@ @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 regexp("https:\\/\\/www.deepl.com\\/?(.*\\/)translator.*$") { - @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]; - - @text-filter: @catppuccin[@@lookup][@text_filter]; - @blue-filter: @catppuccin[@@lookup][@blue_filter]; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - /* header */ - .BasePageHeader-module--container--d81cb { - background-color: @mantle !important; - } - - /* background */ - body { - background-color: @base !important; - color: @text !important; - } - - .bg-neutral-next-50, - .bg-white, - .contextual-menu-dragging-area, - input { - background-color: @base !important; - } - - .pageFooterV2-module--footerOuterContainer--0b055 { - background-color: @mantle !important; - } - - .scrollablePopiverListRoot-module--root--588fe { - background-color: @base !important; - } - - /* text color */ - h1, - h2, - h3, - h4, - p, - a, - button, - span, - input, - ul, - li, - .mb-3, - .mb-4, - .GlossaryModalWithIllustration-module--content--2bf03, - .lmt__glossary_editor_glossaryName { - color: @text !important; - } - - .text-neutral-next-600 { - color: @subtext0 !important; - } - - /* privacy notice */ - .cookieBanner-module--container--9baef { - background-color: @surface0 !important; - color: @text !important; - } - - .button-module--button--4f58d.button-module--color_primaryAlt3--cd3cf { - border-color: @text !important; - } - - /* side menu */ - .classicSidemenu-module--menuContainer--35157 { - background-color: @base !important; - } - - /* borders */ - .border-black { - border-color: @surface2 !important; - } - - .border-neutral-next-100, - .StartFreeTrialButton-module--startFreeTrialButton--bd671 { - border-color: @surface0 !important; - } - - .divide-y > :not([hidden]) ~ :not([hidden]) { - border-color: @base; - } - - .TranslatorTab-module--active--0b6ea - .TranslatorTab-module--innerLower--8a080 { - background-color: @accent-color !important; - } - - .ring-neutral-next-900 { - --tw-ring-color: @surface2; - } - - .border-neutral-next-900 { - border-color: @surface2 !important; - } - - input { - border-color: @surface0 !important; - } - - /* hover */ - button:hover, - .bg-blue-next-500:hover { - background-color: @surface1 !important; - } - - a:hover { - background-color: @mantle !important; - } - - .FlyoutMenuButton-module--flyoutMenuButton--97ae6:hover { - background-color: @mantle !important; - } - - [class*="SourceTranslatorArea-module--focusBorder--"]:has( - div[contenteditable="true"]:focus - ) { - border-color: @accent-color; - } - - [class*="PageHeaderLink-module--pageHeaderLink--"]:not( - [class*="PageHeaderLink-module--nohover--"] - ):hover { - color: @accent-color; - border-color: @accent-color; - } - - .hover\:bg-\[\#B4DAE8\]:hover { - background-color: @surface2 !important; - } - - /* highlight */ - .bg-\[\#E1F0F5\] { - background-color: @surface1 !important; - } - - /* buttons */ - .TranslatorTab-module--cardButton--4b203, - .bg-\[\#EDF8FC\] { - background-color: @surface0 !important; - border-color: @surface0 !important; - } - - .StartFreeTrialButton-module--startFreeTrialButton--bd671, - .bg-blue-next-50 { - background-color: @surface0 !important; - } - - .bg-blue-next-500 { - background-color: @surface0; - border-color: @surface0; - } - - .LanguageSelector-module--wrapper--f9f17 { - --button-background: @surface0 !important; - --button-border-color: @surface0 !important; - color: @base !important; - } - - .CareerBanner-module--container--2ac20 { - background-color: @surface0 !important; - } - - /* glossary button */ - .lmt__glossaryButton, - .lmt__glossaryButton__desktop:hover, - .ModalDialogContent-module--content--5751e { - background-color: @surface0 !important; - } - - .lmt__glossary_acceptButton, - .lmt__glossary_editor, - .lmt__glossary_editor_subBar_top, - .lmt__glossary_editor_subBar_bottom, - .lmt__glossary_editor_mainBar, - .Select-module--wrapper--53ec7 .Select-module--flyout--c91f3, - .lmt_firstEntry-content, - .lmt__glossary_newEntry_langButton, - .Select-module--wrapper--53ec7, - .Select-module--button--f032e { - background-color: @surface0 !important; - border-color: @surface0 !important; - } - - .desktop-glossary-overwrites .lmt__language_select__menu { - background-color: @surface0 !important; - color: @text !important; - } - - .lmt__glossary_newEntry_langDropdown.lmt__language_select__menu - button - .langName { - color: @text !important; - } - - /* pro banner */ - .ProBanner2021-module--wrapper--c7e3d, - .p-8 { - background: @base !important; - } - - /* some button colors */ - .badge-module--badge--c9ebe.badge-module--proDark--a4d4e { - background-color: @green; - color: @base !important; - } - - .button-module--button--a854e.button-module--color_secondary--f171e { - background-color: @peach; - border-color: @peach !important; - color: @base !important; - } - - .button-module--button--a854e.button-module--variant_outline--b937c { - background-color: @surface0 !important; - border-color: @surface0 !important; - } - - .button-module--button--a854e.button-module--color_primary--bfa59 { - background-color: @blue !important; - border-color: @blue !important; - color: @base !important; - } - - /* dropdowns */ - .ProductUpdatesContainer-module--updateContainer--16394, - .ProductUpdateFooter-module--updateFooter--b46f0, - .LanguageSelector-module--flyout--6bfe6 { - background-color: @base !important; - border-color: @surface0 !important; - } - - /* allow mic/get extension prompt */ - .bg-neutral-next-900, - .bg-blue-next-800 { - background-color: @surface0 !important; - color: @text !important; - } - - /* icons, svgs and images */ - svg { - color: @text !important; - } - - .lmt__glossary_ad_checkmark, - .lmt__glossary_arrowDown { - border-color: @text !important; - } - - path, - .DeeplLogoText-module--logoText--34a4f, - .ProBanner2021-module--lockitem--febe3, - .FlyoutMenuButton-module--flyoutMenuButton--97ae6::after, - #top-navi-sidemenu-opener, - .pageFooterV2-module--socialMediaLinks--71305, - .ProBanner2021-module--checkitem--2d8e7, - [src*="https://static.deepl.com/img/app_desktop.svg"] - { - filter: @text-filter; - } - - .Logo-module--logoImg--1ee7e, - .LogoLink-module--logoText--33735, - .deeplLogo-module--logo--ffd7a { - filter: @blue-filter; - } - } -} - -/* 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; @blue_filter: brightness(0) saturate(100%) invert(26%) sepia(100%) saturate(1906%) hue-rotate(213deg) brightness(97%) contrast(97%); @lavender: #7287fd; @text: #4c4f69; @text_filter: brightness(0) saturate(100%) invert(31%) sepia(12%) saturate(1015%) hue-rotate(196deg) brightness(94%) contrast(91%); @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; @blue_filter: brightness(0) saturate(100%) invert(68%) sepia(9%) saturate(1948%) hue-rotate(186deg) brightness(98%) contrast(90%); @lavender: #babbf1; @text: #c6d0f5; @text_filter: brightness(0) saturate(100%) invert(80%) sepia(11%) saturate(726%) hue-rotate(192deg) brightness(104%) contrast(92%); @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; @blue_filter: brightness(0) saturate(100%) invert(65%) sepia(13%) saturate(1397%) hue-rotate(184deg) brightness(103%) contrast(91%); @lavender: #b7bdf8; @text: #cad3f5; @text_filter: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1385%) hue-rotate(192deg) brightness(101%) contrast(92%); @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; @blue_filter: brightness(0) saturate(100%) invert(65%) sepia(51%) saturate(534%) hue-rotate(188deg) brightness(98%) contrast(101%); @lavender: #b4befe; @text: #cdd6f4; @text_filter: brightness(0) saturate(100%) invert(87%) sepia(6%) saturate(985%) hue-rotate(191deg) brightness(96%) contrast(99%); @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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/deepl/catppuccin.user.less b/styles/deepl/catppuccin.user.less new file mode 100644 index 0000000000..0d22ff6096 --- /dev/null +++ b/styles/deepl/catppuccin.user.less @@ -0,0 +1,344 @@ +/* ==UserStyle== +@name DeepL Catppuccin +@namespace github.com/catppuccin/userstyles/styles/deepl +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/deepl +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/deepl/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Adeepl +@description Soothing pastel theme for DeepL +@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 regexp("https:\\/\\/www.deepl.com\\/?(.*\\/)translator.*$") { + @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]; + + @text-filter: @catppuccin[@@lookup][@text_filter]; + @blue-filter: @catppuccin[@@lookup][@blue_filter]; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + /* header */ + .BasePageHeader-module--container--d81cb { + background-color: @mantle !important; + } + + /* background */ + body { + background-color: @base !important; + color: @text !important; + } + + .bg-neutral-next-50, + .bg-white, + .contextual-menu-dragging-area, + input { + background-color: @base !important; + } + + .pageFooterV2-module--footerOuterContainer--0b055 { + background-color: @mantle !important; + } + + .scrollablePopiverListRoot-module--root--588fe { + background-color: @base !important; + } + + /* text color */ + h1, + h2, + h3, + h4, + p, + a, + button, + span, + input, + ul, + li, + .mb-3, + .mb-4, + .GlossaryModalWithIllustration-module--content--2bf03, + .lmt__glossary_editor_glossaryName { + color: @text !important; + } + + .text-neutral-next-600 { + color: @subtext0 !important; + } + + /* privacy notice */ + .cookieBanner-module--container--9baef { + background-color: @surface0 !important; + color: @text !important; + } + + .button-module--button--4f58d.button-module--color_primaryAlt3--cd3cf { + border-color: @text !important; + } + + /* side menu */ + .classicSidemenu-module--menuContainer--35157 { + background-color: @base !important; + } + + /* borders */ + .border-black { + border-color: @surface2 !important; + } + + .border-neutral-next-100, + .StartFreeTrialButton-module--startFreeTrialButton--bd671 { + border-color: @surface0 !important; + } + + .divide-y > :not([hidden]) ~ :not([hidden]) { + border-color: @base; + } + + .TranslatorTab-module--active--0b6ea + .TranslatorTab-module--innerLower--8a080 { + background-color: @accent-color !important; + } + + .ring-neutral-next-900 { + --tw-ring-color: @surface2; + } + + .border-neutral-next-900 { + border-color: @surface2 !important; + } + + input { + border-color: @surface0 !important; + } + + /* hover */ + button:hover, + .bg-blue-next-500:hover { + background-color: @surface1 !important; + } + + a:hover { + background-color: @mantle !important; + } + + .FlyoutMenuButton-module--flyoutMenuButton--97ae6:hover { + background-color: @mantle !important; + } + + [class*="SourceTranslatorArea-module--focusBorder--"]:has( + div[contenteditable="true"]:focus + ) { + border-color: @accent-color; + } + + [class*="PageHeaderLink-module--pageHeaderLink--"]:not( + [class*="PageHeaderLink-module--nohover--"] + ):hover { + color: @accent-color; + border-color: @accent-color; + } + + .hover\:bg-\[\#B4DAE8\]:hover { + background-color: @surface2 !important; + } + + /* highlight */ + .bg-\[\#E1F0F5\] { + background-color: @surface1 !important; + } + + /* buttons */ + .TranslatorTab-module--cardButton--4b203, + .bg-\[\#EDF8FC\] { + background-color: @surface0 !important; + border-color: @surface0 !important; + } + + .StartFreeTrialButton-module--startFreeTrialButton--bd671, + .bg-blue-next-50 { + background-color: @surface0 !important; + } + + .bg-blue-next-500 { + background-color: @surface0; + border-color: @surface0; + } + + .LanguageSelector-module--wrapper--f9f17 { + --button-background: @surface0 !important; + --button-border-color: @surface0 !important; + color: @base !important; + } + + .CareerBanner-module--container--2ac20 { + background-color: @surface0 !important; + } + + /* glossary button */ + .lmt__glossaryButton, + .lmt__glossaryButton__desktop:hover, + .ModalDialogContent-module--content--5751e { + background-color: @surface0 !important; + } + + .lmt__glossary_acceptButton, + .lmt__glossary_editor, + .lmt__glossary_editor_subBar_top, + .lmt__glossary_editor_subBar_bottom, + .lmt__glossary_editor_mainBar, + .Select-module--wrapper--53ec7 .Select-module--flyout--c91f3, + .lmt_firstEntry-content, + .lmt__glossary_newEntry_langButton, + .Select-module--wrapper--53ec7, + .Select-module--button--f032e { + background-color: @surface0 !important; + border-color: @surface0 !important; + } + + .desktop-glossary-overwrites .lmt__language_select__menu { + background-color: @surface0 !important; + color: @text !important; + } + + .lmt__glossary_newEntry_langDropdown.lmt__language_select__menu + button + .langName { + color: @text !important; + } + + /* pro banner */ + .ProBanner2021-module--wrapper--c7e3d, + .p-8 { + background: @base !important; + } + + /* some button colors */ + .badge-module--badge--c9ebe.badge-module--proDark--a4d4e { + background-color: @green; + color: @base !important; + } + + .button-module--button--a854e.button-module--color_secondary--f171e { + background-color: @peach; + border-color: @peach !important; + color: @base !important; + } + + .button-module--button--a854e.button-module--variant_outline--b937c { + background-color: @surface0 !important; + border-color: @surface0 !important; + } + + .button-module--button--a854e.button-module--color_primary--bfa59 { + background-color: @blue !important; + border-color: @blue !important; + color: @base !important; + } + + /* dropdowns */ + .ProductUpdatesContainer-module--updateContainer--16394, + .ProductUpdateFooter-module--updateFooter--b46f0, + .LanguageSelector-module--flyout--6bfe6 { + background-color: @base !important; + border-color: @surface0 !important; + } + + /* allow mic/get extension prompt */ + .bg-neutral-next-900, + .bg-blue-next-800 { + background-color: @surface0 !important; + color: @text !important; + } + + /* icons, svgs and images */ + svg { + color: @text !important; + } + + .lmt__glossary_ad_checkmark, + .lmt__glossary_arrowDown { + border-color: @text !important; + } + + path, + .DeeplLogoText-module--logoText--34a4f, + .ProBanner2021-module--lockitem--febe3, + .FlyoutMenuButton-module--flyoutMenuButton--97ae6::after, + #top-navi-sidemenu-opener, + .pageFooterV2-module--socialMediaLinks--71305, + .ProBanner2021-module--checkitem--2d8e7, + [src*="https://static.deepl.com/img/app_desktop.svg"] { + filter: @text-filter; + } + + .Logo-module--logoImg--1ee7e, + .LogoLink-module--logoText--33735, + .deeplLogo-module--logo--ffd7a { + filter: @blue-filter; + } + } +} + +/* deno-fmt-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; @blue_filter: brightness(0) saturate(100%) invert(26%) sepia(100%) saturate(1906%) hue-rotate(213deg) brightness(97%) contrast(97%); @lavender: #7287fd; @text: #4c4f69; @text_filter: brightness(0) saturate(100%) invert(31%) sepia(12%) saturate(1015%) hue-rotate(196deg) brightness(94%) contrast(91%); @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; @blue_filter: brightness(0) saturate(100%) invert(68%) sepia(9%) saturate(1948%) hue-rotate(186deg) brightness(98%) contrast(90%); @lavender: #babbf1; @text: #c6d0f5; @text_filter: brightness(0) saturate(100%) invert(80%) sepia(11%) saturate(726%) hue-rotate(192deg) brightness(104%) contrast(92%); @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; @blue_filter: brightness(0) saturate(100%) invert(65%) sepia(13%) saturate(1397%) hue-rotate(184deg) brightness(103%) contrast(91%); @lavender: #b7bdf8; @text: #cad3f5; @text_filter: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1385%) hue-rotate(192deg) brightness(101%) contrast(92%); @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; @blue_filter: brightness(0) saturate(100%) invert(65%) sepia(51%) saturate(534%) hue-rotate(188deg) brightness(98%) contrast(101%); @lavender: #b4befe; @text: #cdd6f4; @text_filter: brightness(0) saturate(100%) invert(87%) sepia(6%) saturate(985%) hue-rotate(191deg) brightness(96%) contrast(99%); @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +}; diff --git a/styles/docs.rs/catppuccin.user.css b/styles/docs.rs/catppuccin.user.css index ca6b56344a..62e26aed52 100644 --- a/styles/docs.rs/catppuccin.user.css +++ b/styles/docs.rs/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name docs.rs Catppuccin +@name docs.rs Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/docs.rs @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/docs.rs -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/docs.rs/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/docs.rs/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Adocs.rs @description Soothing pastel theme for docs.rs @author Catppuccin @@ -13,328 +13,4 @@ @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('docs.rs'), domain('doc.rust-lang.org') { - @media (prefers-color-scheme: light) { - :root:not([data-docs-rs-theme]) { - #catppuccin(@lightFlavor, @accentColor); - } - } - @media (prefers-color-scheme: dark) { - :root:not([data-docs-rs-theme]) { - #catppuccin(@darkFlavor, @accentColor); - } - } - - :root[data-docs-rs-theme="dark"] { - #catppuccin(@darkFlavor, @accentColor); - } - :root[data-docs-rs-theme="light"] { - #catppuccin(@lightFlavor, @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; - } - } - - --color-background-code: @mantle; - --color-background: @base; - --input-color: @text; - --input-box-shadow-focus: 0 0 8px 4px @accent-color; - --color-border-light: @surface2; - --color-border: @surface0; - --color-doc-link-background: @accent-color; - --color-doc-link-hover: @accent-color; - --color-error-hover: red; - --color-error: red; - --color-macro: red; - --color-menu-border: red; - --color-menu-header-background: red; - --color-navbar-standard: @text; - --color-standard: @subtext1; - --color-brand: @text; - --color-struct: red; - --color-type: @peach; - --color-url: @accent-color; - --color-warn-background: @peach; - --color-warn-msg: @crust; - --color-warn-hover: red; - --color-warn: @peach; - --color-background-input: @mantle; - --color-table-header-background: @surface0; - --color-table-header: @text; - --color-search-focus: red; - --chart-title-color: red; - --chart-grid: red; - - --main-background-color: @base; - --main-color: @text; - --settings-input-color: @accent-color; - --settings-input-border-color: @surface0; - --settings-button-color: @text; - --settings-button-border-focus: @accent-color; - --sidebar-background-color: @mantle; - --sidebar-background-color-hover: @crust; - --source-sidebar-background-selected: @surface0; - --source-sidebar-background-hover: @base; - --code-block-background-color: @mantle; - --headings-border-bottom-color: @overlay1; - --border-color: @surface0; - --button-background-color: @mantle; - --right-side-color: @surface2; - --code-attribute-color: @yellow; - --toggles-color: @subtext1; - --search-input-focused-border-color: @accent-color; - --copy-path-button-color: @text; - --codeblock-error-hover-color: @red; - --codeblock-error-color: fade(@red, 70%); - --codeblock-ignore-hover-color: @red; - --codeblock-ignore-color: fade(@red, 70%); - --warning-border-color: red; - --type-link-color: @sky; - --trait-link-color: @mauve; - --assoc-item-link-color: @yellow; - --function-link-color: @green; - --macro-link-color: @green; - --keyword-link-color: @yellow; - --mod-link-color: @accent-color; - --link-color: @accent-color; - --sidebar-link-color: @accent-color; - --sidebar-current-link-background-color: @surface0; - --search-result-link-focus-background-color: fade(@accent-color, 20%); - --search-result-border-color: @surface0; - --search-color: @text; - --search-error-code-background-color: red; - --search-results-alias-color: red; - --search-results-grey-color: @subtext1; - --search-tab-title-count-color: @subtext0; - --search-tab-button-not-selected-border-top-color: @crust; - --search-tab-button-not-selected-background: @crust; - --search-tab-button-selected-border-top-color: @accent-color; - --search-tab-button-selected-background: @base; - --stab-background-color: @surface0; - --stab-code-color: @accent-color; - --code-highlight-kw-color: @mauve; - --code-highlight-kw-2-color: @mauve; - --code-highlight-lifetime-color: @blue; - --code-highlight-prelude-color: @yellow; - --code-highlight-prelude-val-color: @yellow; - --code-highlight-number-color: @peach; - --code-highlight-string-color: @green; - --code-highlight-literal-color: @red; - --code-highlight-attribute-color: @yellow; - --code-highlight-self-color: @red; - --code-highlight-macro-color: @blue; - --code-highlight-question-mark-color: @teal; - --code-highlight-comment-color: @overlay2; - --code-highlight-doc-comment-color: @overlay2; - --color-syntax-foreground: inherit; - --color-syntax-attribute: @yellow; - --color-syntax-background: @mantle; - --color-syntax-bool: @red; - --color-syntax-comment: @overlay2; - --color-syntax-doc-comment: @overlay2; - --color-syntax-keyword1: @mauve; - --color-syntax-keyword2: @mauve; - --color-syntax-lifetime: @blue; - --color-syntax-macro: @blue; - --color-syntax-number: @peach; - --color-syntax-prelude-ty: @yellow; - --color-syntax-prelude-val: @yellow; - --color-syntax-question-mark: @teal; - --color-syntax-self: @red; - --color-syntax-string: @green; - --src-line-numbers-span-color: @accent-color; - --src-line-number-highlighted-background-color: fade(@accent-color, 30%); - --test-arrow-color: #dedede; - --test-arrow-background-color: red; - --test-arrow-hover-color: #dedede; - --test-arrow-hover-background-color: red; - --target-background-color: fade(@accent-color, 10%); - --target-border-color: @accent-color; - --kbd-color: @text; - --kbd-background: @mantle; - --kbd-box-shadow-color: @surface1; - --crate-search-hover-border: red; - --src-sidebar-background-selected: @surface0; - --src-sidebar-background-hover: @surface1; - --table-alt-row-background-color: @mantle; - --codeblock-link-background: fade(@surface0, 50%); - --scrape-example-toggle-line-background: red; - --scrape-example-toggle-line-hover-background: red; - --scrape-example-code-line-highlight: fade(@accent-color, 40%); - --scrape-example-code-line-highlight-focus: fade(@accent-color, 40%); - --scrape-example-help-border-color: @subtext0; - --scrape-example-help-color: @subtext1; - --scrape-example-help-hover-border-color: @text; - --scrape-example-help-hover-color: @text; - --scrape-example-code-wrapper-background-start: @base; - --scrape-example-code-wrapper-background-end: @base; - --sidebar-resizer-hover: @sky; - --sidebar-resizer-active: @sapphire; - - select { - background-color: @mantle; - border-color: @surface0; - } - - hr { - border-color: @overlay1; - } - - .rust-logo { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - img[alt="Change settings"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - #settings-menu { - img[alt="Change settings"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - > a:not(:has(img))::before { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } - - .setting-check input:checked { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - #copy-path { - @raw: ''; - @raw_before: ''; - - > img { - @svg: escape(replace(@raw, "%COLOR%", @subtext0)); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - &:hover > img { - @svg: escape(replace(@raw, "%COLOR%", @text)); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - &:not(:has(> img)) { - &::before { - @svg: escape(replace(@raw_before, "%COLOR%", @subtext0)); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - &:hover::before { - @svg: escape(replace(@raw_before, "%COLOR%", @text)); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - } - } - - details.toggle { - @plus: escape( - '' - ); - @minus: escape( - '' - ); - - > summary::before { - background: url("data:image/svg+xml,@{plus}") no-repeat top left; - filter: none; - } - - &[open] > summary::before { - background: url("data:image/svg+xml,@{minus}") no-repeat top left; - } - } - - .src #sidebar-button > a::before { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .pure-menu-link { - color: @subtext0; - - &:hover { - color: @text; - } - } - .pure-table { - &, - td, - th { - border-color: @surface0; - } - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/docs.rs/catppuccin.user.less b/styles/docs.rs/catppuccin.user.less new file mode 100644 index 0000000000..7d3ea9df1b --- /dev/null +++ b/styles/docs.rs/catppuccin.user.less @@ -0,0 +1,338 @@ +/* ==UserStyle== +@name docs.rs Catppuccin +@namespace github.com/catppuccin/userstyles/styles/docs.rs +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/docs.rs +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/docs.rs/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Adocs.rs +@description Soothing pastel theme for docs.rs +@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("docs.rs"), domain("doc.rust-lang.org") { + @media (prefers-color-scheme: light) { + :root:not([data-docs-rs-theme]) { + #catppuccin(@lightFlavor, @accentColor); + } + } + @media (prefers-color-scheme: dark) { + :root:not([data-docs-rs-theme]) { + #catppuccin(@darkFlavor, @accentColor); + } + } + + :root[data-docs-rs-theme="dark"] { + #catppuccin(@darkFlavor, @accentColor); + } + :root[data-docs-rs-theme="light"] { + #catppuccin(@lightFlavor, @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; + } + } + + --color-background-code: @mantle; + --color-background: @base; + --input-color: @text; + --input-box-shadow-focus: 0 0 8px 4px @accent-color; + --color-border-light: @surface2; + --color-border: @surface0; + --color-doc-link-background: @accent-color; + --color-doc-link-hover: @accent-color; + --color-error-hover: red; + --color-error: red; + --color-macro: red; + --color-menu-border: red; + --color-menu-header-background: red; + --color-navbar-standard: @text; + --color-standard: @subtext1; + --color-brand: @text; + --color-struct: red; + --color-type: @peach; + --color-url: @accent-color; + --color-warn-background: @peach; + --color-warn-msg: @crust; + --color-warn-hover: red; + --color-warn: @peach; + --color-background-input: @mantle; + --color-table-header-background: @surface0; + --color-table-header: @text; + --color-search-focus: red; + --chart-title-color: red; + --chart-grid: red; + + --main-background-color: @base; + --main-color: @text; + --settings-input-color: @accent-color; + --settings-input-border-color: @surface0; + --settings-button-color: @text; + --settings-button-border-focus: @accent-color; + --sidebar-background-color: @mantle; + --sidebar-background-color-hover: @crust; + --source-sidebar-background-selected: @surface0; + --source-sidebar-background-hover: @base; + --code-block-background-color: @mantle; + --headings-border-bottom-color: @overlay1; + --border-color: @surface0; + --button-background-color: @mantle; + --right-side-color: @surface2; + --code-attribute-color: @yellow; + --toggles-color: @subtext1; + --search-input-focused-border-color: @accent-color; + --copy-path-button-color: @text; + --codeblock-error-hover-color: @red; + --codeblock-error-color: fade(@red, 70%); + --codeblock-ignore-hover-color: @red; + --codeblock-ignore-color: fade(@red, 70%); + --warning-border-color: red; + --type-link-color: @sky; + --trait-link-color: @mauve; + --assoc-item-link-color: @yellow; + --function-link-color: @green; + --macro-link-color: @green; + --keyword-link-color: @yellow; + --mod-link-color: @accent-color; + --link-color: @accent-color; + --sidebar-link-color: @accent-color; + --sidebar-current-link-background-color: @surface0; + --search-result-link-focus-background-color: fade(@accent-color, 20%); + --search-result-border-color: @surface0; + --search-color: @text; + --search-error-code-background-color: red; + --search-results-alias-color: red; + --search-results-grey-color: @subtext1; + --search-tab-title-count-color: @subtext0; + --search-tab-button-not-selected-border-top-color: @crust; + --search-tab-button-not-selected-background: @crust; + --search-tab-button-selected-border-top-color: @accent-color; + --search-tab-button-selected-background: @base; + --stab-background-color: @surface0; + --stab-code-color: @accent-color; + --code-highlight-kw-color: @mauve; + --code-highlight-kw-2-color: @mauve; + --code-highlight-lifetime-color: @blue; + --code-highlight-prelude-color: @yellow; + --code-highlight-prelude-val-color: @yellow; + --code-highlight-number-color: @peach; + --code-highlight-string-color: @green; + --code-highlight-literal-color: @red; + --code-highlight-attribute-color: @yellow; + --code-highlight-self-color: @red; + --code-highlight-macro-color: @blue; + --code-highlight-question-mark-color: @teal; + --code-highlight-comment-color: @overlay2; + --code-highlight-doc-comment-color: @overlay2; + --color-syntax-foreground: inherit; + --color-syntax-attribute: @yellow; + --color-syntax-background: @mantle; + --color-syntax-bool: @red; + --color-syntax-comment: @overlay2; + --color-syntax-doc-comment: @overlay2; + --color-syntax-keyword1: @mauve; + --color-syntax-keyword2: @mauve; + --color-syntax-lifetime: @blue; + --color-syntax-macro: @blue; + --color-syntax-number: @peach; + --color-syntax-prelude-ty: @yellow; + --color-syntax-prelude-val: @yellow; + --color-syntax-question-mark: @teal; + --color-syntax-self: @red; + --color-syntax-string: @green; + --src-line-numbers-span-color: @accent-color; + --src-line-number-highlighted-background-color: fade(@accent-color, 30%); + --test-arrow-color: #dedede; + --test-arrow-background-color: red; + --test-arrow-hover-color: #dedede; + --test-arrow-hover-background-color: red; + --target-background-color: fade(@accent-color, 10%); + --target-border-color: @accent-color; + --kbd-color: @text; + --kbd-background: @mantle; + --kbd-box-shadow-color: @surface1; + --crate-search-hover-border: red; + --src-sidebar-background-selected: @surface0; + --src-sidebar-background-hover: @surface1; + --table-alt-row-background-color: @mantle; + --codeblock-link-background: fade(@surface0, 50%); + --scrape-example-toggle-line-background: red; + --scrape-example-toggle-line-hover-background: red; + --scrape-example-code-line-highlight: fade(@accent-color, 40%); + --scrape-example-code-line-highlight-focus: fade(@accent-color, 40%); + --scrape-example-help-border-color: @subtext0; + --scrape-example-help-color: @subtext1; + --scrape-example-help-hover-border-color: @text; + --scrape-example-help-hover-color: @text; + --scrape-example-code-wrapper-background-start: @base; + --scrape-example-code-wrapper-background-end: @base; + --sidebar-resizer-hover: @sky; + --sidebar-resizer-active: @sapphire; + + select { + background-color: @mantle; + border-color: @surface0; + } + + hr { + border-color: @overlay1; + } + + .rust-logo { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img[alt="Change settings"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + #settings-menu { + img[alt="Change settings"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + > a:not(:has(img))::before { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + + .setting-check input:checked { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + #copy-path { + @raw: ''; + @raw_before: ''; + + > img { + @svg: escape(replace(@raw, "%COLOR%", @subtext0)); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + &:hover > img { + @svg: escape(replace(@raw, "%COLOR%", @text)); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + + &:not(:has(> img)) { + &::before { + @svg: escape(replace(@raw_before, "%COLOR%", @subtext0)); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + + &:hover::before { + @svg: escape(replace(@raw_before, "%COLOR%", @text)); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + } + } + + details.toggle { + @plus: escape( + '' + ); + @minus: escape( + '' + ); + + > summary::before { + background: url("data:image/svg+xml,@{plus}") no-repeat top left; + filter: none; + } + + &[open] > summary::before { + background: url("data:image/svg+xml,@{minus}") no-repeat top left; + } + } + + .src #sidebar-button > a::before { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .pure-menu-link { + color: @subtext0; + + &:hover { + color: @text; + } + } + .pure-table { + &, + td, + th { + border-color: @surface0; + } + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/duckduckgo/catppuccin.user.css b/styles/duckduckgo/catppuccin.user.css index 9b9adda01b..57e36c1b3d 100644 --- a/styles/duckduckgo/catppuccin.user.css +++ b/styles/duckduckgo/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name DuckDuckGo Catppuccin +@name DuckDuckGo Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/duckduckgo @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/duckduckgo -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/duckduckgo/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/duckduckgo/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aduckduckgo @description Soothing pastel theme for DuckDuckGo @author Catppuccin @@ -13,1263 +13,4 @@ @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(duckduckgo.com) { - :root { - &:not(.dark-bg, .no-theme) { - #catppuccin(@lightFlavor, @accentColor); - } - - &.dark-bg { - #catppuccin(@darkFlavor, @accentColor); - } - - &.no-theme { - @media (prefers-color-scheme: light) { - #catppuccin(@lightFlavor, @accentColor); - } - @media (prefers-color-scheme: dark) { - #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; - } - } - - --sds-color-text-02: @text !important; - --sds-color-text-disabled: @overlay0 !important; - --theme-col-txt-page-separator: @text!important; - --theme-col-page-separator: @text !important; - --theme-col-txt-url: @text !important; - --theme-col-txt-title-visited: @mauve !important; - --theme-col-txt-snippet: @text !important; - --theme-col-txt-card-title: @text; - --theme-col-txt-url-domain: @subtext1 !important; - --theme-col-txt-title: @blue !important; - --theme-col-bg-card: @surface0 !important; - --theme-col-about-link: @blue; - --theme-col-border-ui: @surface1 !important; - --theme-col-bg-expandcollapse: @surface0 !important; - --sds-color-palette-gray-60: @accent-color !important; - --sds-color-text-accent-01: @accent-color !important; - --theme-col-txt-msg: @text !important; - --theme-col-txt-url-path: @subtext0 !important; - --theme-col-border-expandcollapse: @surface1; - --col-blue-50: @sapphire !important; - --col-blue-60: @blue !important; - --theme-col-bg-page: @base !important; - --sds-color-text-01: @text !important; - --sds-color-text-on-color: @base !important; - --theme-spp-high-contrast-text-secondary: @accent-color !important; - --theme-spp-high-contrast-card-indicator-color: @surface0 !important; - --theme-spp-high-contrast-title-span-text: @text !important; - --theme-spp-high-contrast-bg: @surface0 !important; - --sds-color-palette-yellow-50: @yellow !important; - --sds-color-text-04: @subtext1 !important; - --theme-col-txt-card-body: @text !important; - --theme-col-txt-qna-details: @subtext0 !important; - --theme-col-txt-card: @text !important; - --sds-color-text-03: @subtext0 !important; - --col-slate-light: @subtext0; - --col-silver-dark: @overlay1; - --theme-col-txt-button-secondary: @accent-color !important; - --theme-bg-legacy-home: @base !important; - --theme-bg-cta-cards: @surface0 !important; - --theme-button-primary-bg: @blue !important; - --theme-button-primary-bg--hover: @blue !important; - --theme-button-primary-bg--active: @blue !important; - --theme-button-primary-text: @crust !important; - --theme-badge-fg--green: @crust !important; - --theme-browser-comparison-table-check-bg: @green !important; - --theme-browser-comparison-table-cross-bg: @red !important; - --theme-searchbox-bg: @surface0 !important; - --theme-searchbox-bg--hover: @surface0 !important; - --theme-searchbox-bg--active: @surface0 !important; - --theme-searchbox-bg--focused: @surface0 !important; - --theme-border-color-legacy-home-searchbox: @surface2 !important; - --theme-button-link-text: @blue !important; - --theme-browser-comparison-table-badge-text: @text !important; - --theme-badge-bg--green: @green !important; - --theme-badge-bg--yellow: @yellow !important; - --theme-atb-button-bg: @blue; - --theme-atb-button-bg--hover: @blue; - --theme-atb-button-bg--active: @blue; - --col-silver-light: @surface1 !important; - --theme-col-card-inner-border: @surface2 !important; - --sds-color-text-link-02: @text !important; - --sds-color-text-link-02--hover: @subtext1 !important; - --theme-text-legacy-home: @text !important; - --theme-browser-comparison-table-row-bg: @surface0 !important; - --theme-browser-comparison-table-row-alt-bg: @surface1 !important; - --theme-bg-home-bottom: @base !important; - --theme-atb-card-back-bg: @surface0 !important; - --theme-atb-card-front-bg: @surface1 !important; - --theme-text-bg: @text !important; - .featureCards_root__brAX3 { - --feature-card-background-color: @surface0 !important; - } - --theme-accordion-background--expanded: @surface0 !important; - --theme-accordion-background: @surface1 !important; - --theme-footer-link-text: @blue !important; - --theme-sidemenu-bg: @surface0 !important; - --theme-col-txt-button-tertiary: @text !important; - --theme-bg-legacy-home-searchbox: @surface0 !important; - --theme-bg-info-snippet: @surface2 !important; - --theme-button-tertiary-txt: @text !important; - --theme-browser-comparison-table-icon-bg: @mantle !important; - --theme-col-bg-ui: @mantle !important; - --theme-col-bg-header: @mantle !important; - --theme-col-bg-header-modal: @surface0 !important; - --theme-col-bg-button-primary: @blue !important; - --sds-color-background-dark: @crust !important; - /* ai chat */ - --sds-color-text-link-02-hover: @text !important; - --theme-dc-color-background-dark: @base !important; - --theme-dc-color-gpt-main: @mauve !important; - --theme-dc-color-gpt-bg: @mauve !important; - --theme-dc-color-claude-main: @green !important; - --theme-dc-color-claude-bg: @green !important; - --sds-color-background-destructive: @red !important; - --sds-color-text-on-dark-01: @text !important; - --theme-dc-color-fire-button: fade(@red, 40%) !important; - --sds-color-background-destructive-state-01: @red !important; - --sds-color-background-destructive-state-02: @red !important; - --sds-color-text-destructive: @red !important; - --sds-color-text-success: @green !important; - --sds-color-text-link-01: @blue !important; - --sds-color-background-container-01: @surface0 !important; - --sds-color-border-accent-01: @accent-color !important; - --theme-dc-color-container-message: @surface0 !important; - --sds-color-palette-gray-85: @surface1 !important; - --sds-color-palette-white: @crust !important; - --sds-color-background-accent-01: @accent-color !important; - --theme-col-txt-card-body-light: @text !important; - --theme-col-bg-page-alt-2: @surface0 !important; - --theme-col-bg-ui-active: @surface1 !important; - --theme-dc-color-llama-main: @pink !important; - --theme-dc-color-mixtral-main: @peach !important; - --theme-dc-color-anchor-sleep: @subtext0 !important; - /* maps */ - --sds-color-background-01: @base !important; - --sds-color-background-02: @mantle !important; - --sds-color-palette-red-40: @red !important; - --sds-color-border-01: @surface0 !important; - --col-blue-30: @blue !important; - --sds-color-palette-green-60: @green !important; - --sds-color-background-utility: @surface0 !important; - - .address-detail { - background-color: @mantle; - color: @text; - border-color: @surface0; - } - - .footer, - .footer--mobile, - .modal--dropdown--settings, - .settings-dropdown--section, - .frm__field, - .frm__switch, - .tileview .metabar--fixed, - body, - .zci, - html, - .body--home, - html.displayable-atb-banner .body--home, - .site-wrapper, - .region__body, - .badge-link, - .module--carousel__image-wrapper, - .result__image, - .vertical--map__sidebar, - .vertical--map__sidebar__header, - .page-chrome_newtab, - .js-carousel-module-more, - .zci--type--tiles:not(.is-fallback).is-full-page.is-expanded, - .zci--type--tiles:not(.is-fallback).is-full-page.is-expanded - .metabar:not(.is-stuck) { - background-color: @base !important; - } - /* .dropdown--settings--icon .dropdown__button:after needs visibility: hidden, otherwise we get a case of clashing icons */ - .dropdown__button::after { - visibility: hidden; - } - - /* privacy reminders */ - .wXKLp5dS9jGvo097pfaG, - .privacy-reminder__text { - color: @green !important; - } - .IuA6a2PUTR9Lck6m0WlP, - .privacy-reminder__icon-circle { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - .XxDCpwElzOhQaLmCxJ8z, - .privacy-reminder__icon-shield { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - .privacy-reminder__icon-check { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - .privacy-reminder__modal-hide, - .privacy-reminder__modal-link { - color: @text !important; - } - - /* stopwatch */ - .zci--stopwatch .time { - color: @text !important; - } - .label { - color: @text; - background-color: @crust; - } - .stopwatch__btn.start { - border-color: @green !important; - background-color: @green; - color: @mantle !important; - } - .stopwatch__btn[disabled] { - color: @text !important; - background-color: @surface0 !important; - border-color: @surface0; - } - .stopwatch__btn.stop { - color: @mantle; - background-color: @red !important; - border-color: @red !important; - } - .stopwatch__btn { - background-color: @surface2; - border-color: @surface2; - color: @text; - } - .zci--stopwatch td { - color: @text; - } - - /* html chars */ - .record__body, - .chomp--link__mr, - .tx-clr--lt2 { - color: @text; - } - .c-list__item { - border-color: @mantle; - } - .chomp--link__icn::before { - color: @text; - } - - /* cal */ - .calendar .t_right, - .calendar .t_left { - background-color: @surface2; - } - .calendar__header { - color: @text; - } - table.calendar tr { - color: @text; - } - .calendar__today { - color: @mantle; - background-color: @accent-color; - } - - .zci.is-active { - border-color: @surface0; - } - - .module__toggle--more::after { - background: linear-gradient(transparent, @surface0); - } - - /* button on hover */ - .btn:hover:not(.is-disabled) { - background-color: @mantle; - color: @blue; - border-color: @mantle; - } - - /* stocks infobox */ - .stocks-module__currentPrice, - .stocks-module__exchange, - .stocks-module__currency, - .stocks-module__stats { - color: @text; - } - .stocks-module__timePeriod { - background-color: @surface2; - color: @text; - } - .stocks-module__latestUpdate, - .ia-module--stocks a.stocks-module__attribution, - .stocks-module__footer { - color: @subtext1; - } - .stocks-module__timePeriod.selected { - color: @mantle; - background-color: @accent-color; - } - .ia-module--stocks.increase .color-coded { - color: @green !important; - } - .stocks-module__hover-label { - &[style*="color: rgb(222, 88, 51);"] { - color: @red !important; - } - &[style*="color: rgb(91, 158, 77);"] { - color: @green !important; - } - } - .ia-module--stocks.increase .color-coded path { - stroke: @green; - fill: @green; - } - .ia-module--stocks - .stocks-module__chart-area-row - .stocks-module__chart - svg { - [stroke="#de5833"] { - stroke: @red !important; - } - [fill="#de5833"] { - fill: @red !important; - } - [stroke="#5b9e4d"] { - stroke: @green !important; - [fill="#5b9e4d"] { - fill: @green !important; - } - } - } - .ia-module--stocks.decrease .color-coded { - color: @red; - } - .ia-module--stocks.decrease .color-coded path { - stroke: @red; - fill: @red; - } - .ia-module--stocks - .stocks-module__stats-wrapper - .stocks-module__stats - .stocks-module__stat-col - .stocks-module__stat { - border-bottom-color: @overlay0; - } - .stocks-module__chart .horizontal-line, - .stocks-module__chart .vertical-line, - .stocks-module__chart .prev-close-line { - stroke: @surface2; - } - - /* color box */ - .tx-clr--lt { - color: @text; - } - .tx-clr--dk2 { - color: @subtext0; - } - - /* ai chat >:( */ - .feedback-external__link { - color: @blue; - } - .feedback-duckchat-modal__disclaimer { - color: @text; - } - .feedback-modal__radio { - color: @text; - } - .modal__close { - color: @text; - } - /* lyrics box */ - .js-lyrics-module { - color: @subtext1 !important; - } - .module--lyrics__subtitle-box { - border-color: @surface2; - } - .module__inner-toggle--chevron { - color: @accent-color !important; - background-color: @surface1 !important; - border-color: @surface2; - } - .module__inner-toggle::before, - .module__inner-toggle::after { - background-color: @surface2 !important; - } - .module--lyrics:not(.is-expanded) - .module--lyrics__footer.can-expand::after { - background: linear-gradient(transparent, @surface0); - } - .module--lyrics__explicit-tag { - border-color: @subtext1; - color: @subtext0; - } - - // translation boxes - .module--translations .dropdown--translation-select, - .module--translations-translatedtext { - background: @surface0 !important; - border-color: @surface0; - } - .module--translations .module--translations-translatedtext.is-placeholder { - color: @subtext0; - } - .module--translations-swap-svg { - fill: @text !important; - } - .module--translations-original textarea, - .module--translations-translatedtext, - .module--translations-footer a { - color: @text; - } - .module--translations-clear, - .module--translations-copy { - color: @subtext0 !important; - } - .modal__list__filter input { - background: @mantle; - } - - //coding info box - .module:not( - .module--carousel, - .module--placeholder, - .module--images, - .module--translations, - .module__chromeless - ) { - background: @surface0 !important; - border-color: @surface1 !important; - } - .module__toggle, - .tile__expand { - background-color: @surface0 !important; - border-color: @surface1 !important; - } - - .module__title__link, - .module__text, - .pln, - .pun, - code, - .module__more-at-bottom { - color: @text !important; - } - code { - background-color: @mantle !important; - } - .lit { - color: @peach !important; - } - .com { - color: @subtext1 !important; - } - .str { - color: @green !important; - } - .atv { - color: @teal !important; - } - .module__title__sub { - color: @subtext0; - } - .prettyprint { - background-color: @mantle; - } - .is-link-style-exp .btn--primary:not(.is-disabled) { - background-color: @blue !important; - border-color: @blue !important; - color: @mantle !important; - } - - .featureCards_dark__5Xbsn { - background: linear-gradient(180deg, @yellow, @blue); - } - - .modal__box.modal__box--feedback.modal__box--headed .modal__box__header { - background-color: @surface0 !important; - } - - // defentions info box - .module--definitions__pronunciation { - color: @subtext0 !important; - } - - .module--definitions__group ol li::before { - color: @accent-color !important; - } - - .module--definitions__usage { - color: @subtext0 !important; - } - .module__title, - .module--definitions__definition { - color: @text !important; - } - - .play-btn__icn_hollow { - fill: @accent-color !important; - } - .module__toggle { - color: @accent-color !important; - } - - // weather info box - .forecast-wrapper .module__weather-warning--red, - .module__weather-warning--red:hover, - .module__weather-warning--red:focus, - .module__weather-warning--red:visited { - color: @red !important; - } - .module__weather-warning { - color: @yellow !important; - } - .text--primary, - .tx-clr--dk, - .tx-clr--slate, - .module__temperature-unit:not(.module__temperature-unit--on), - .module__items-day { - color: @subtext0 !important; - } - .module__temperature-unit, - .module__temperature-unit:hover { - color: @accent-color !important; - } - .module__detail__precip-label, - .module__items-precip-label, - .ia-module--module--definitions__reference, - .js-definitions-internal { - color: @blue !important; - } - .module__detail__hour-label, - .module__current, - .module__detail__temp-label, - .module__items-unit--on { - color: @text !important; - } - .module__items-item { - background: @surface0 !important; - border-color: @surface2 !important; - } - .module__weatherkit-logo { - fill: @accent-color; - } - .module__warnings, - .module__temperature-unit--on { - border-color: @surface2 !important; - } - //raindrop icon - .module__detail__precip-label__icon, - .module__items-precip-label__icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - //rain icon - .module__items-icon-precip { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - width: 32px; - height: 32px; - margin-top: 5px; - margin-bottom: -5px; - max-width: 100%; - } - - //calculator - .tile__ctrl__btn, - .tile__history, - .tile__past-calc { - background: @surface0 !important; - border-color: @surface2 !important; - color: @text !important; - } - .attribution--link__icon { - color: @text; - } - .tile__ctrl__toggle-slider { - background: @surface1 !important; - } - .tile__ctrl__toggle-slider::before { - background-color: @mantle !important; - } - .tile__tab__sci .tile__ctrl__btn, - .tile__ctrl__toggle { - background-color: @surface2 !important; - color: @text !important; - border-color: @overlay0 !important; - } - .tile__display__main, - .tile__past-result { - color: @text !important; - } - .tile__display__main { - background-color: @base !important; - } - .tile__display { - box-shadow: - inset -1px -1px 0 @overlay0, - inset 1px 1px 0 @overlay0 !important; - background-color: @base !important; - border-color: @surface2 !important; - color: @text !important; - } - .tile__display.selected { - box-shadow: - inset -1px -1px 0 @blue, - inset 1px 1px 0 @blue !important; - } - .tile__ctrl--important { - background-color: @yellow !important; - color: @mantle !important; - } - .tile__display__aside, - .tile__past-formula, - .tile__option { - color: @subtext0 !important; - } - .tile__option--active { - color: @accent-color !important; - } - - .bg-delayed-color { - background-color: @red; - } - - #error_homepage { - background-color: @rosewater !important; - color: @red !important; - } - - .search--adv { - background-color: @surface0 !important; - border-color: @surface0 !important; - } - - .open-in-app__deep-link { - color: @mantle; - } - - .modal__header__clear, - .sep--before, - .js-region-filter-clear, - .result__a, - .module--carousel__body__title, - .js-carousel-module-more, - .js-no-results-web, - .bing .tile__title--pr a, - .sidebar-filter__show-more, - .module__footer, - .js-settings-dropdown-reset-appearance, - .modal--dropdown--settings .settings-dropdown--button, - .settings-page-wrapper a:not(.btn, .set-tab), - .module__link--blue, - .place-list-item__cta-item__text { - color: @blue !important; - } - - .tile__title a:visited { - color: @mauve; - } - - .place-detail__status--off { - color: @red; - } - - .place-detail__status--on { - color: @green; - } - - .result__a:visited { - color: @mauve !important; - } - .bg-clr--green { - background-color: @green; - } - .tile__status, - .osGBsMSM4O7_HVv5OcxQ, - .C68Y1fiPXCZijXmzVAbe { - color: @mantle !important; - } - - .modal__header, - .modal__footer, - .modal__box, - .tile, - .related-searches__item, - .bg-clr--white, - .tile__media__free-shipping-label, - .sidebar-filter__options, - .sidebar-filter__option.is-size, - .module__footer, - .frm__select, - .set-bookmarklet, - .set-reset, - .search__autocomplete, - .frm__input, - .frm__color__swatch { - border-color: @surface0 !important; - background-color: @crust !important; - } - - .sep--before::before, - .sep { - border-left-color: @surface2; - } - - .header-wrap { - box-shadow: none !important; - } - - .header-wrap, - .module--carousel__left, - .module--carousel__right, - .detail, - .btn { - background-color: @mantle; - } - - .set-header--fixed .tileview--grid .metabar--fixed, - .tileview--grid .metabar--fixed.is-stuck { - background-color: @surface0; - border-top-color: @surface0; - } - - .modal--dropdown--region.modal--popout .frm__input, - .js-region-filter-list, - .tile__body, - .bg-clr--white, - .acp-wrap, - .tile__media__free-shipping-label, - .tile__media--pr, - .modal__box, - .nav-menu__list, - .set-tab.is-active, - .frm__select select, - .cloudsave, - .feedback-btn__send, - .set-bookmarklet__input, - .howItWorksSection_downloadsCard__U3Ph9, - .metabar__grid-btn, - .feedback-btn__icon-wrap .set-bookmarklet__input .btn, - .btn.btn--secondary, - .btn.is-disabled, - input, - textarea, - .frm__input, - .frm__text, - .detail--xd .c-detail__btn, - .set-bookmarklet, - .set-reset, - .zci--json_validator textarea, - .colorpicker, - .feedback-modal__submit.is-disabled, - .feedback-modal__submit.is-disabled:active, - .feedback-modal__submit.is-disabled:focus, - .module__section, - .module--carousel__item, - .is-related-search-exp.dark-bg, - .related-searches__item, - .detail--xd .tile-nav--sm, - .set-bookmarklet__detail, - .set-reset__detail, - .module__footer, - .js-definitions-internal { - background-color: @surface0 !important; - } - .module--carousel__item { - border-color: @surface1 !important; - } - - .modal__header, - .module__section, - .module__section:first-child.place-detail__section--tab, - .module__clickable-header { - border-color: @surface1 !important; - } - - .btn.is-disabled:hover, - .frm__switch__label:hover, - .feedback-modal__submit.is-disabled:hover, - .btn.btn--skeleton:hover, - .module__footer-carousel__label:hover { - background-color: @surface2 !important; - border-color: @surface2 !important; - } - .is-checked .frm__switch__label.btn { - background-color: @accent-color !important; - color: @mantle !important; - } - .js-set-exit { - background-color: @accent-color !important; - border-color: @accent-color !important; - color: @base !important; - } - .js-set-exit:hover { - background-color: fade(@accent-color, 80%) !important; - border-color: fade(@accent-color, 80%) !important; - color: @base !important; - } - .set-bookmarklet__data { - background-color: @surface2; - color: @text; - } - - .modal__list__link.is-highlighted, - .modal__list li:hover { - background-color: @overlay1; - } - - .metabar__dropdowns-wrap::before { - background-image: linear-gradient(90deg, @base, transparent); - } - - .metabar__dropdowns-wrap::after { - background-image: linear-gradient(90deg, transparent, @base); - } - - .nav-menu__item__badge { - background-color: @yellow; - color: @mantle; - } - - .settings-dropdown--section, - .set-head, - .frm__hr { - border-bottom-color: @surface2; - } - - .zcm--right-fade::before { - background: linear-gradient(90deg, transparent, @mantle); - } - .search-filters-wrap::before { - background: linear-gradient(90deg, @base, transparent); - } - - .search-filters-wrap::after { - background: linear-gradient(90deg, transparent, @base); - } - - .footer, - .footer--mobile { - border-top-color: @surface0; - } - - .is-vertical-tabs-exp, - #duckbar, - .zcm__link:not(.dropdown__button).is-active, - .set-main-footer { - border-color: @accent-color !important; - } - - #more-results { - background-color: @surface0 !important; - } - - input, - select, - h1, - h2, - h4, - h5, - h6, - ul, - ol, - blockquote, - p, - body, - .module--carousel__footer, - .set-tab.is-active, - .zcm__link, - .feedback-prompt__link, - .feedback-btn__send, - .tile--img__sub, - .result__snippet, - .result__snippet b, - .modal__list__link, - .acp, - .header_headerButton__cLYU3, - .is-vertical-tabs-exp, - .module.module--images, - .module__header.module__header--link, - .text--title, - .text--airline-flight, - .timing, - .flight-details__values, - .airlines-footer, - .tx-clr--slate, - .nav-menu__heading, - .zci, - .metabar__grid-btn, - .module--carousel__left, - .module--carousel__right, - .c-detail__title__sub, - .c-detail__desc, - .c-detail__filemeta, - .c-detail__more, - .frm__label, - .js-cloudsave-new-suggestion, - .zci__body, - .zci__body a, - .c-base__title { - color: @text !important; - } - - .zci--airlines .text--title svg path { - fill: @text; - } - - .star { - color: @overlay2; - } - - .set-tab, - .set-tab:visited, - .tile-nav.can-scroll { - background-color: @mantle; - color: @overlay1; - } - - .js-cloudsave-save-btn, - .js-cloudsave-load-btn { - background-color: @surface2; - border-color: @overlay0; - color: @text; - } - - .video-source, - .tile__count, - .result__url, - .tile__time, - .feedback-prompt, - .footer__text, - .vertical--news .result__url, - .result__timestamp, - .js-metabar-secondary, - .sidebar-filters, - .tile--pr__original-price, - .nav-menu__item a, - .nav-menu__close, - .frm__desc, - .dropdown__button, - .tx-clr--slate-light, - .flight-details__labels, - .scheduled-time, - .source-link, - .tile__source, - .zci__more-at, - .cloudsave__close, - .module--definitions__attribution-text, - .module__attribution, - .module__attribution-link { - color: @subtext0 !important; - } - - .dropdown--region.has-inactive-region .dropdown__button::after, - .modal--dropdown--region.modal--popout .modal__header::before, - .js-carousel-module-title, - .tile--pr__brand, - .frm__select, - .star::after, - .feedback-btn__icon, - .detail--xd .tile-nav--sm, - .detail__close, - .module--definitions__collapsed-group ol li::before { - color: @accent-color !important; - } - - .search__button:hover, - .search--header.has-text.search--hover .search__button { - background-color: @accent-color !important; - color: @base !important; - } - - .settings-page-wrapper.is-checked { - border-color: @blue; - background-color: @sapphire !important; - color: @mantle !important; - } - .modal--dropdown--settings - .settings-dropdown--section - .settings-dropdown--header { - .settings-dropdown--header--link, - .settings-dropdown--header--label { - color: @text !important; - } - } - .ddgsi-check::before { - color: @mantle !important; - } - .set-bookmarklet__title, - .set-reset__title { - color: @text !important; - } - .frm__select::after { - color: @accent-color !important; - } - - .switch, - .frm__switch__label { - background-color: @crust !important; - } - - .frm__switch__label::after { - background: @overlay2 !important; - } - - .is-checked .frm__switch__label::after { - background: @base !important; - } - - .switch__knob { - background: @overlay2 !important; - } - - .is-on .switch__knob { - background: @base !important; - } - - .switch.is-on { - background-color: @accent-color !important; - } - - .dropdown__switch.is-on::before { - color: @base !important; - } - - .search--header { - background-color: @surface0; - border-color: @surface0; - } - - .acp--highlight, - .bg-clr--platinum-light { - background-color: @overlay0; - } - - .review__rating-stars, - .place-list-item__rating__image { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } //ddg icon - .header__logo, - .js-logo-ddg { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .yhccgqM_FdvJ79N6Jm6c { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - //duckduckgo search too long icon - .logo_homepage { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - // search glass icon - .related-searches__item-text::before { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - // ddg header logo - .header_logoImg__PFezv { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } -} - -@-moz-document domain(start.duckduckgo.com) { - :root:not(.theme-dark) { - #catppuccin(@lightFlavor, @accentColor); - } - - :root.theme-dark { - #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%); - } - - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - input { - background-color: @surface0 !important; - color: @text !important; - } - li:hover { - background-color: @surface2 !important; - } - ul { - background-color: @surface0 !important; - } - body { - background-color: @base !important; - } - h1, - h2, - h3, - p, - a, - span { - color: @text !important; - } - - --color-yellow60: @yellow !important; - --theme-button-primary-bg: @blue !important; - --theme-searchbox-caret-bg: @accent-color !important; - - .home_root__naJUp { - --theme-bg-home: @base !important; - --theme-button-secondary-text: @text !important; - --theme-text-bg: @text !important; - --theme-bg-home-searchbox: @surface0 !important; - --theme-border-color-home-searchbox: @surface0 !important; - } - .searchbox_suggestions__umkQH { - --theme-searchbox-bg: @surface0 !important - ; - } - .minimal-homepage_minimalHeroLogo__QSVlf { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - .header_headerButton__cLYU3 { - color: @text !important; - } - .sideMenu_sideMenuContent__OE7n9, - .searchbox_iconWrapper__suWUe { - background-color: @surface0 !important; - } - .button_primary__e2_Sy { - color: @mantle !important; - } - .searchbox_hasQuery__j8_VE:hover - .searchbox_searchButton__F5Bwq:not(:disabled), - .searchbox_hasQuery__j8_VE:focus-within { - color: @mantle !important; - background-color: @accent-color !important; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/duckduckgo/catppuccin.user.less b/styles/duckduckgo/catppuccin.user.less new file mode 100644 index 0000000000..b620bb7e7c --- /dev/null +++ b/styles/duckduckgo/catppuccin.user.less @@ -0,0 +1,1270 @@ +/* ==UserStyle== +@name DuckDuckGo Catppuccin +@namespace github.com/catppuccin/userstyles/styles/duckduckgo +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/duckduckgo +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/duckduckgo/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aduckduckgo +@description Soothing pastel theme for DuckDuckGo +@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(duckduckgo.com) { + :root { + &:not(.dark-bg, .no-theme) { + #catppuccin(@lightFlavor, @accentColor); + } + + &.dark-bg { + #catppuccin(@darkFlavor, @accentColor); + } + + &.no-theme { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor, @accentColor); + } + @media (prefers-color-scheme: dark) { + #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; + } + } + + --sds-color-text-02: @text !important; + --sds-color-text-disabled: @overlay0 !important; + --theme-col-txt-page-separator: @text !important; + --theme-col-page-separator: @text !important; + --theme-col-txt-url: @text !important; + --theme-col-txt-title-visited: @mauve !important; + --theme-col-txt-snippet: @text !important; + --theme-col-txt-card-title: @text; + --theme-col-txt-url-domain: @subtext1 !important; + --theme-col-txt-title: @blue !important; + --theme-col-bg-card: @surface0 !important; + --theme-col-about-link: @blue; + --theme-col-border-ui: @surface1 !important; + --theme-col-bg-expandcollapse: @surface0 !important; + --sds-color-palette-gray-60: @accent-color !important; + --sds-color-text-accent-01: @accent-color !important; + --theme-col-txt-msg: @text !important; + --theme-col-txt-url-path: @subtext0 !important; + --theme-col-border-expandcollapse: @surface1; + --col-blue-50: @sapphire !important; + --col-blue-60: @blue !important; + --theme-col-bg-page: @base !important; + --sds-color-text-01: @text !important; + --sds-color-text-on-color: @base !important; + --theme-spp-high-contrast-text-secondary: @accent-color !important; + --theme-spp-high-contrast-card-indicator-color: @surface0 !important; + --theme-spp-high-contrast-title-span-text: @text !important; + --theme-spp-high-contrast-bg: @surface0 !important; + --sds-color-palette-yellow-50: @yellow !important; + --sds-color-text-04: @subtext1 !important; + --theme-col-txt-card-body: @text !important; + --theme-col-txt-qna-details: @subtext0 !important; + --theme-col-txt-card: @text !important; + --sds-color-text-03: @subtext0 !important; + --col-slate-light: @subtext0; + --col-silver-dark: @overlay1; + --theme-col-txt-button-secondary: @accent-color !important; + --theme-bg-legacy-home: @base !important; + --theme-bg-cta-cards: @surface0 !important; + --theme-button-primary-bg: @blue !important; + --theme-button-primary-bg--hover: @blue !important; + --theme-button-primary-bg--active: @blue !important; + --theme-button-primary-text: @crust !important; + --theme-badge-fg--green: @crust !important; + --theme-browser-comparison-table-check-bg: @green !important; + --theme-browser-comparison-table-cross-bg: @red !important; + --theme-searchbox-bg: @surface0 !important; + --theme-searchbox-bg--hover: @surface0 !important; + --theme-searchbox-bg--active: @surface0 !important; + --theme-searchbox-bg--focused: @surface0 !important; + --theme-border-color-legacy-home-searchbox: @surface2 !important; + --theme-button-link-text: @blue !important; + --theme-browser-comparison-table-badge-text: @text !important; + --theme-badge-bg--green: @green !important; + --theme-badge-bg--yellow: @yellow !important; + --theme-atb-button-bg: @blue; + --theme-atb-button-bg--hover: @blue; + --theme-atb-button-bg--active: @blue; + --col-silver-light: @surface1 !important; + --theme-col-card-inner-border: @surface2 !important; + --sds-color-text-link-02: @text !important; + --sds-color-text-link-02--hover: @subtext1 !important; + --theme-text-legacy-home: @text !important; + --theme-browser-comparison-table-row-bg: @surface0 !important; + --theme-browser-comparison-table-row-alt-bg: @surface1 !important; + --theme-bg-home-bottom: @base !important; + --theme-atb-card-back-bg: @surface0 !important; + --theme-atb-card-front-bg: @surface1 !important; + --theme-text-bg: @text !important; + .featureCards_root__brAX3 { + --feature-card-background-color: @surface0 !important; + } + --theme-accordion-background--expanded: @surface0 !important; + --theme-accordion-background: @surface1 !important; + --theme-footer-link-text: @blue !important; + --theme-sidemenu-bg: @surface0 !important; + --theme-col-txt-button-tertiary: @text !important; + --theme-bg-legacy-home-searchbox: @surface0 !important; + --theme-bg-info-snippet: @surface2 !important; + --theme-button-tertiary-txt: @text !important; + --theme-browser-comparison-table-icon-bg: @mantle !important; + --theme-col-bg-ui: @mantle !important; + --theme-col-bg-header: @mantle !important; + --theme-col-bg-header-modal: @surface0 !important; + --theme-col-bg-button-primary: @blue !important; + --sds-color-background-dark: @crust !important; + /* ai chat */ + --sds-color-text-link-02-hover: @text !important; + --theme-dc-color-background-dark: @base !important; + --theme-dc-color-gpt-main: @mauve !important; + --theme-dc-color-gpt-bg: @mauve !important; + --theme-dc-color-claude-main: @green !important; + --theme-dc-color-claude-bg: @green !important; + --sds-color-background-destructive: @red !important; + --sds-color-text-on-dark-01: @text !important; + --theme-dc-color-fire-button: fade(@red, 40%) !important; + --sds-color-background-destructive-state-01: @red !important; + --sds-color-background-destructive-state-02: @red !important; + --sds-color-text-destructive: @red !important; + --sds-color-text-success: @green !important; + --sds-color-text-link-01: @blue !important; + --sds-color-background-container-01: @surface0 !important; + --sds-color-border-accent-01: @accent-color !important; + --theme-dc-color-container-message: @surface0 !important; + --sds-color-palette-gray-85: @surface1 !important; + --sds-color-palette-white: @crust !important; + --sds-color-background-accent-01: @accent-color !important; + --theme-col-txt-card-body-light: @text !important; + --theme-col-bg-page-alt-2: @surface0 !important; + --theme-col-bg-ui-active: @surface1 !important; + --theme-dc-color-llama-main: @pink !important; + --theme-dc-color-mixtral-main: @peach !important; + --theme-dc-color-anchor-sleep: @subtext0 !important; + /* maps */ + --sds-color-background-01: @base !important; + --sds-color-background-02: @mantle !important; + --sds-color-palette-red-40: @red !important; + --sds-color-border-01: @surface0 !important; + --col-blue-30: @blue !important; + --sds-color-palette-green-60: @green !important; + --sds-color-background-utility: @surface0 !important; + + .address-detail { + background-color: @mantle; + color: @text; + border-color: @surface0; + } + + .footer, + .footer--mobile, + .modal--dropdown--settings, + .settings-dropdown--section, + .frm__field, + .frm__switch, + .tileview .metabar--fixed, + body, + .zci, + html, + .body--home, + html.displayable-atb-banner .body--home, + .site-wrapper, + .region__body, + .badge-link, + .module--carousel__image-wrapper, + .result__image, + .vertical--map__sidebar, + .vertical--map__sidebar__header, + .page-chrome_newtab, + .js-carousel-module-more, + .zci--type--tiles:not(.is-fallback).is-full-page.is-expanded, + .zci--type--tiles:not(.is-fallback).is-full-page.is-expanded + .metabar:not(.is-stuck) { + background-color: @base !important; + } + /* .dropdown--settings--icon .dropdown__button:after needs visibility: hidden, otherwise we get a case of clashing icons */ + .dropdown__button::after { + visibility: hidden; + } + + /* privacy reminders */ + .wXKLp5dS9jGvo097pfaG, + .privacy-reminder__text { + color: @green !important; + } + .IuA6a2PUTR9Lck6m0WlP, + .privacy-reminder__icon-circle { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + .XxDCpwElzOhQaLmCxJ8z, + .privacy-reminder__icon-shield { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + .privacy-reminder__icon-check { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + .privacy-reminder__modal-hide, + .privacy-reminder__modal-link { + color: @text !important; + } + + /* stopwatch */ + .zci--stopwatch .time { + color: @text !important; + } + .label { + color: @text; + background-color: @crust; + } + .stopwatch__btn.start { + border-color: @green !important; + background-color: @green; + color: @mantle !important; + } + .stopwatch__btn[disabled] { + color: @text !important; + background-color: @surface0 !important; + border-color: @surface0; + } + .stopwatch__btn.stop { + color: @mantle; + background-color: @red !important; + border-color: @red !important; + } + .stopwatch__btn { + background-color: @surface2; + border-color: @surface2; + color: @text; + } + .zci--stopwatch td { + color: @text; + } + + /* html chars */ + .record__body, + .chomp--link__mr, + .tx-clr--lt2 { + color: @text; + } + .c-list__item { + border-color: @mantle; + } + .chomp--link__icn::before { + color: @text; + } + + /* cal */ + .calendar .t_right, + .calendar .t_left { + background-color: @surface2; + } + .calendar__header { + color: @text; + } + table.calendar tr { + color: @text; + } + .calendar__today { + color: @mantle; + background-color: @accent-color; + } + + .zci.is-active { + border-color: @surface0; + } + + .module__toggle--more::after { + background: linear-gradient(transparent, @surface0); + } + + /* button on hover */ + .btn:hover:not(.is-disabled) { + background-color: @mantle; + color: @blue; + border-color: @mantle; + } + + /* stocks infobox */ + .stocks-module__currentPrice, + .stocks-module__exchange, + .stocks-module__currency, + .stocks-module__stats { + color: @text; + } + .stocks-module__timePeriod { + background-color: @surface2; + color: @text; + } + .stocks-module__latestUpdate, + .ia-module--stocks a.stocks-module__attribution, + .stocks-module__footer { + color: @subtext1; + } + .stocks-module__timePeriod.selected { + color: @mantle; + background-color: @accent-color; + } + .ia-module--stocks.increase .color-coded { + color: @green !important; + } + .stocks-module__hover-label { + &[style*="color: rgb(222, 88, 51);"] { + color: @red !important; + } + &[style*="color: rgb(91, 158, 77);"] { + color: @green !important; + } + } + .ia-module--stocks.increase .color-coded path { + stroke: @green; + fill: @green; + } + .ia-module--stocks + .stocks-module__chart-area-row + .stocks-module__chart + svg { + [stroke="#de5833"] { + stroke: @red !important; + } + [fill="#de5833"] { + fill: @red !important; + } + [stroke="#5b9e4d"] { + stroke: @green !important; + [fill="#5b9e4d"] { + fill: @green !important; + } + } + } + .ia-module--stocks.decrease .color-coded { + color: @red; + } + .ia-module--stocks.decrease .color-coded path { + stroke: @red; + fill: @red; + } + .ia-module--stocks + .stocks-module__stats-wrapper + .stocks-module__stats + .stocks-module__stat-col + .stocks-module__stat { + border-bottom-color: @overlay0; + } + .stocks-module__chart .horizontal-line, + .stocks-module__chart .vertical-line, + .stocks-module__chart .prev-close-line { + stroke: @surface2; + } + + /* color box */ + .tx-clr--lt { + color: @text; + } + .tx-clr--dk2 { + color: @subtext0; + } + + /* ai chat >:( */ + .feedback-external__link { + color: @blue; + } + .feedback-duckchat-modal__disclaimer { + color: @text; + } + .feedback-modal__radio { + color: @text; + } + .modal__close { + color: @text; + } + /* lyrics box */ + .js-lyrics-module { + color: @subtext1 !important; + } + .module--lyrics__subtitle-box { + border-color: @surface2; + } + .module__inner-toggle--chevron { + color: @accent-color !important; + background-color: @surface1 !important; + border-color: @surface2; + } + .module__inner-toggle::before, + .module__inner-toggle::after { + background-color: @surface2 !important; + } + .module--lyrics:not(.is-expanded) + .module--lyrics__footer.can-expand::after { + background: linear-gradient(transparent, @surface0); + } + .module--lyrics__explicit-tag { + border-color: @subtext1; + color: @subtext0; + } + + // translation boxes + .module--translations .dropdown--translation-select, + .module--translations-translatedtext { + background: @surface0 !important; + border-color: @surface0; + } + .module--translations .module--translations-translatedtext.is-placeholder { + color: @subtext0; + } + .module--translations-swap-svg { + fill: @text !important; + } + .module--translations-original textarea, + .module--translations-translatedtext, + .module--translations-footer a { + color: @text; + } + .module--translations-clear, + .module--translations-copy { + color: @subtext0 !important; + } + .modal__list__filter input { + background: @mantle; + } + + //coding info box + .module:not( + .module--carousel, + .module--placeholder, + .module--images, + .module--translations, + .module__chromeless + ) { + background: @surface0 !important; + border-color: @surface1 !important; + } + .module__toggle, + .tile__expand { + background-color: @surface0 !important; + border-color: @surface1 !important; + } + + .module__title__link, + .module__text, + .pln, + .pun, + code, + .module__more-at-bottom { + color: @text !important; + } + code { + background-color: @mantle !important; + } + .lit { + color: @peach !important; + } + .com { + color: @subtext1 !important; + } + .str { + color: @green !important; + } + .atv { + color: @teal !important; + } + .module__title__sub { + color: @subtext0; + } + .prettyprint { + background-color: @mantle; + } + .is-link-style-exp .btn--primary:not(.is-disabled) { + background-color: @blue !important; + border-color: @blue !important; + color: @mantle !important; + } + + .featureCards_dark__5Xbsn { + background: linear-gradient(180deg, @yellow, @blue); + } + + .modal__box.modal__box--feedback.modal__box--headed .modal__box__header { + background-color: @surface0 !important; + } + + // defentions info box + .module--definitions__pronunciation { + color: @subtext0 !important; + } + + .module--definitions__group ol li::before { + color: @accent-color !important; + } + + .module--definitions__usage { + color: @subtext0 !important; + } + .module__title, + .module--definitions__definition { + color: @text !important; + } + + .play-btn__icn_hollow { + fill: @accent-color !important; + } + .module__toggle { + color: @accent-color !important; + } + + // weather info box + .forecast-wrapper .module__weather-warning--red, + .module__weather-warning--red:hover, + .module__weather-warning--red:focus, + .module__weather-warning--red:visited { + color: @red !important; + } + .module__weather-warning { + color: @yellow !important; + } + .text--primary, + .tx-clr--dk, + .tx-clr--slate, + .module__temperature-unit:not(.module__temperature-unit--on), + .module__items-day { + color: @subtext0 !important; + } + .module__temperature-unit, + .module__temperature-unit:hover { + color: @accent-color !important; + } + .module__detail__precip-label, + .module__items-precip-label, + .ia-module--module--definitions__reference, + .js-definitions-internal { + color: @blue !important; + } + .module__detail__hour-label, + .module__current, + .module__detail__temp-label, + .module__items-unit--on { + color: @text !important; + } + .module__items-item { + background: @surface0 !important; + border-color: @surface2 !important; + } + .module__weatherkit-logo { + fill: @accent-color; + } + .module__warnings, + .module__temperature-unit--on { + border-color: @surface2 !important; + } + //raindrop icon + .module__detail__precip-label__icon, + .module__items-precip-label__icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + //rain icon + .module__items-icon-precip { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + width: 32px; + height: 32px; + margin-top: 5px; + margin-bottom: -5px; + max-width: 100%; + } + + //calculator + .tile__ctrl__btn, + .tile__history, + .tile__past-calc { + background: @surface0 !important; + border-color: @surface2 !important; + color: @text !important; + } + .attribution--link__icon { + color: @text; + } + .tile__ctrl__toggle-slider { + background: @surface1 !important; + } + .tile__ctrl__toggle-slider::before { + background-color: @mantle !important; + } + .tile__tab__sci .tile__ctrl__btn, + .tile__ctrl__toggle { + background-color: @surface2 !important; + color: @text !important; + border-color: @overlay0 !important; + } + .tile__display__main, + .tile__past-result { + color: @text !important; + } + .tile__display__main { + background-color: @base !important; + } + .tile__display { + box-shadow: + inset -1px -1px 0 @overlay0, + inset 1px 1px 0 @overlay0 !important; + background-color: @base !important; + border-color: @surface2 !important; + color: @text !important; + } + .tile__display.selected { + box-shadow: inset -1px -1px 0 @blue, inset 1px 1px 0 @blue !important; + } + .tile__ctrl--important { + background-color: @yellow !important; + color: @mantle !important; + } + .tile__display__aside, + .tile__past-formula, + .tile__option { + color: @subtext0 !important; + } + .tile__option--active { + color: @accent-color !important; + } + + .bg-delayed-color { + background-color: @red; + } + + #error_homepage { + background-color: @rosewater !important; + color: @red !important; + } + + .search--adv { + background-color: @surface0 !important; + border-color: @surface0 !important; + } + + .open-in-app__deep-link { + color: @mantle; + } + + .modal__header__clear, + .sep--before, + .js-region-filter-clear, + .result__a, + .module--carousel__body__title, + .js-carousel-module-more, + .js-no-results-web, + .bing .tile__title--pr a, + .sidebar-filter__show-more, + .module__footer, + .js-settings-dropdown-reset-appearance, + .modal--dropdown--settings .settings-dropdown--button, + .settings-page-wrapper a:not(.btn, .set-tab), + .module__link--blue, + .place-list-item__cta-item__text { + color: @blue !important; + } + + .tile__title a:visited { + color: @mauve; + } + + .place-detail__status--off { + color: @red; + } + + .place-detail__status--on { + color: @green; + } + + .result__a:visited { + color: @mauve !important; + } + .bg-clr--green { + background-color: @green; + } + .tile__status, + .osGBsMSM4O7_HVv5OcxQ, + .C68Y1fiPXCZijXmzVAbe { + color: @mantle !important; + } + + .modal__header, + .modal__footer, + .modal__box, + .tile, + .related-searches__item, + .bg-clr--white, + .tile__media__free-shipping-label, + .sidebar-filter__options, + .sidebar-filter__option.is-size, + .module__footer, + .frm__select, + .set-bookmarklet, + .set-reset, + .search__autocomplete, + .frm__input, + .frm__color__swatch { + border-color: @surface0 !important; + background-color: @crust !important; + } + + .sep--before::before, + .sep { + border-left-color: @surface2; + } + + .header-wrap { + box-shadow: none !important; + } + + .header-wrap, + .module--carousel__left, + .module--carousel__right, + .detail, + .btn { + background-color: @mantle; + } + + .set-header--fixed .tileview--grid .metabar--fixed, + .tileview--grid .metabar--fixed.is-stuck { + background-color: @surface0; + border-top-color: @surface0; + } + + .modal--dropdown--region.modal--popout .frm__input, + .js-region-filter-list, + .tile__body, + .bg-clr--white, + .acp-wrap, + .tile__media__free-shipping-label, + .tile__media--pr, + .modal__box, + .nav-menu__list, + .set-tab.is-active, + .frm__select select, + .cloudsave, + .feedback-btn__send, + .set-bookmarklet__input, + .howItWorksSection_downloadsCard__U3Ph9, + .metabar__grid-btn, + .feedback-btn__icon-wrap .set-bookmarklet__input .btn, + .btn.btn--secondary, + .btn.is-disabled, + input, + textarea, + .frm__input, + .frm__text, + .detail--xd .c-detail__btn, + .set-bookmarklet, + .set-reset, + .zci--json_validator textarea, + .colorpicker, + .feedback-modal__submit.is-disabled, + .feedback-modal__submit.is-disabled:active, + .feedback-modal__submit.is-disabled:focus, + .module__section, + .module--carousel__item, + .is-related-search-exp.dark-bg, + .related-searches__item, + .detail--xd .tile-nav--sm, + .set-bookmarklet__detail, + .set-reset__detail, + .module__footer, + .js-definitions-internal { + background-color: @surface0 !important; + } + .module--carousel__item { + border-color: @surface1 !important; + } + + .modal__header, + .module__section, + .module__section:first-child.place-detail__section--tab, + .module__clickable-header { + border-color: @surface1 !important; + } + + .btn.is-disabled:hover, + .frm__switch__label:hover, + .feedback-modal__submit.is-disabled:hover, + .btn.btn--skeleton:hover, + .module__footer-carousel__label:hover { + background-color: @surface2 !important; + border-color: @surface2 !important; + } + .is-checked .frm__switch__label.btn { + background-color: @accent-color !important; + color: @mantle !important; + } + .js-set-exit { + background-color: @accent-color !important; + border-color: @accent-color !important; + color: @base !important; + } + .js-set-exit:hover { + background-color: fade(@accent-color, 80%) !important; + border-color: fade(@accent-color, 80%) !important; + color: @base !important; + } + .set-bookmarklet__data { + background-color: @surface2; + color: @text; + } + + .modal__list__link.is-highlighted, + .modal__list li:hover { + background-color: @overlay1; + } + + .metabar__dropdowns-wrap::before { + background-image: linear-gradient(90deg, @base, transparent); + } + + .metabar__dropdowns-wrap::after { + background-image: linear-gradient(90deg, transparent, @base); + } + + .nav-menu__item__badge { + background-color: @yellow; + color: @mantle; + } + + .settings-dropdown--section, + .set-head, + .frm__hr { + border-bottom-color: @surface2; + } + + .zcm--right-fade::before { + background: linear-gradient(90deg, transparent, @mantle); + } + .search-filters-wrap::before { + background: linear-gradient(90deg, @base, transparent); + } + + .search-filters-wrap::after { + background: linear-gradient(90deg, transparent, @base); + } + + .footer, + .footer--mobile { + border-top-color: @surface0; + } + + .is-vertical-tabs-exp, + #duckbar, + .zcm__link:not(.dropdown__button).is-active, + .set-main-footer { + border-color: @accent-color !important; + } + + #more-results { + background-color: @surface0 !important; + } + + input, + select, + h1, + h2, + h4, + h5, + h6, + ul, + ol, + blockquote, + p, + body, + .module--carousel__footer, + .set-tab.is-active, + .zcm__link, + .feedback-prompt__link, + .feedback-btn__send, + .tile--img__sub, + .result__snippet, + .result__snippet b, + .modal__list__link, + .acp, + .header_headerButton__cLYU3, + .is-vertical-tabs-exp, + .module.module--images, + .module__header.module__header--link, + .text--title, + .text--airline-flight, + .timing, + .flight-details__values, + .airlines-footer, + .tx-clr--slate, + .nav-menu__heading, + .zci, + .metabar__grid-btn, + .module--carousel__left, + .module--carousel__right, + .c-detail__title__sub, + .c-detail__desc, + .c-detail__filemeta, + .c-detail__more, + .frm__label, + .js-cloudsave-new-suggestion, + .zci__body, + .zci__body a, + .c-base__title { + color: @text !important; + } + + .zci--airlines .text--title svg path { + fill: @text; + } + + .star { + color: @overlay2; + } + + .set-tab, + .set-tab:visited, + .tile-nav.can-scroll { + background-color: @mantle; + color: @overlay1; + } + + .js-cloudsave-save-btn, + .js-cloudsave-load-btn { + background-color: @surface2; + border-color: @overlay0; + color: @text; + } + + .video-source, + .tile__count, + .result__url, + .tile__time, + .feedback-prompt, + .footer__text, + .vertical--news .result__url, + .result__timestamp, + .js-metabar-secondary, + .sidebar-filters, + .tile--pr__original-price, + .nav-menu__item a, + .nav-menu__close, + .frm__desc, + .dropdown__button, + .tx-clr--slate-light, + .flight-details__labels, + .scheduled-time, + .source-link, + .tile__source, + .zci__more-at, + .cloudsave__close, + .module--definitions__attribution-text, + .module__attribution, + .module__attribution-link { + color: @subtext0 !important; + } + + .dropdown--region.has-inactive-region .dropdown__button::after, + .modal--dropdown--region.modal--popout .modal__header::before, + .js-carousel-module-title, + .tile--pr__brand, + .frm__select, + .star::after, + .feedback-btn__icon, + .detail--xd .tile-nav--sm, + .detail__close, + .module--definitions__collapsed-group ol li::before { + color: @accent-color !important; + } + + .search__button:hover, + .search--header.has-text.search--hover .search__button { + background-color: @accent-color !important; + color: @base !important; + } + + .settings-page-wrapper.is-checked { + border-color: @blue; + background-color: @sapphire !important; + color: @mantle !important; + } + .modal--dropdown--settings + .settings-dropdown--section + .settings-dropdown--header { + .settings-dropdown--header--link, + .settings-dropdown--header--label { + color: @text !important; + } + } + .ddgsi-check::before { + color: @mantle !important; + } + .set-bookmarklet__title, + .set-reset__title { + color: @text !important; + } + .frm__select::after { + color: @accent-color !important; + } + + .switch, + .frm__switch__label { + background-color: @crust !important; + } + + .frm__switch__label::after { + background: @overlay2 !important; + } + + .is-checked .frm__switch__label::after { + background: @base !important; + } + + .switch__knob { + background: @overlay2 !important; + } + + .is-on .switch__knob { + background: @base !important; + } + + .switch.is-on { + background-color: @accent-color !important; + } + + .dropdown__switch.is-on::before { + color: @base !important; + } + + .search--header { + background-color: @surface0; + border-color: @surface0; + } + + .acp--highlight, + .bg-clr--platinum-light { + background-color: @overlay0; + } + + .review__rating-stars, + .place-list-item__rating__image { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } //ddg icon + .header__logo, + .js-logo-ddg { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .yhccgqM_FdvJ79N6Jm6c { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + //duckduckgo search too long icon + .logo_homepage { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + // search glass icon + .related-searches__item-text::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + // ddg header logo + .header_logoImg__PFezv { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } +} + +@-moz-document domain(start.duckduckgo.com) { + :root:not(.theme-dark) { + #catppuccin(@lightFlavor, @accentColor); + } + + :root.theme-dark { + #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%); + } + + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + input { + background-color: @surface0 !important; + color: @text !important; + } + li:hover { + background-color: @surface2 !important; + } + ul { + background-color: @surface0 !important; + } + body { + background-color: @base !important; + } + h1, + h2, + h3, + p, + a, + span { + color: @text !important; + } + + --color-yellow60: @yellow !important; + --theme-button-primary-bg: @blue !important; + --theme-searchbox-caret-bg: @accent-color !important; + + .home_root__naJUp { + --theme-bg-home: @base !important; + --theme-button-secondary-text: @text !important; + --theme-text-bg: @text !important; + --theme-bg-home-searchbox: @surface0 !important; + --theme-border-color-home-searchbox: @surface0 !important; + } + .searchbox_suggestions__umkQH { + --theme-searchbox-bg: @surface0 !important; + } + .minimal-homepage_minimalHeroLogo__QSVlf { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + .header_headerButton__cLYU3 { + color: @text !important; + } + .sideMenu_sideMenuContent__OE7n9, + .searchbox_iconWrapper__suWUe { + background-color: @surface0 !important; + } + .button_primary__e2_Sy { + color: @mantle !important; + } + .searchbox_hasQuery__j8_VE:hover + .searchbox_searchButton__F5Bwq:not(:disabled), + .searchbox_hasQuery__j8_VE:focus-within { + color: @mantle !important; + background-color: @accent-color !important; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/ecosia/catppuccin.user.css b/styles/ecosia/catppuccin.user.css index 9e364e970b..c9dd708273 100644 --- a/styles/ecosia/catppuccin.user.css +++ b/styles/ecosia/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Ecosia Catppuccin +@name Ecosia Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/ecosia @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ecosia -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ecosia/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ecosia/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aecosia @description Soothing pastel theme for Ecosia @author Catppuccin @@ -13,138 +13,4 @@ @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("ecosia.org") { - :root.light { - #catppuccin(@lightFlavor, @accentColor); - } - - :root.dark { - #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; - } - } - - --color-brand-primary: @accent-color !important; - --color-brand-secondary: @crust !important; - --color-error: @red !important; - --color-success: @green !important; - --color-disabled: @overlay1 !important; - --color-button-background-primary: @accent-color !important; - --color-button-background-primary-active: @accent-color !important; - --color-button-background-primary-hover: @accent-color; - --color-button-background-secondary: @surface0 !important; - --color-button-background-secondary-active: @surface2 !important; - --color-button-background-secondary-hover: @surface1 !important; - --color-button-content-primary: @base !important; - --color-button-content-secondary: @text !important; - --color-button-content-tertiary: @accent-color !important; - --color-button-border: @surface0 !important; - --color-button-background-transparent-hover: @surface1; - --color-button-background-transparent-active: @surface2; - --color-background-primary: @base !important; - --color-background-secondary: @crust !important; - --color-background-tertiary: @mantle !important; - --color-background-quaternary: @surface0; - --color-background-elevation-1: @mantle !important; - --color-highlighter: @surface0 !important; - --color-highlight-primary: @surface0 !important; - --color-overlay-primary: @overlay0 !important; - --color-overlay-secondary: @overlay1 !important; - --color-text-primary: @text !important; - --color-text-secondary: @subtext0 !important; - --color-text-tertiary: @text !important; - --color-link-primary: @sapphire !important; - --color-link-secondary: @sky !important; - --color-url: @sapphire !important; - --color-link-results-default: @sapphire !important; - --color-link-results-visited: @teal !important; - --color-decorative-icon: @accent-color !important; - --color-elevation-layer-1: @surface1; - --color-elevation-layer-2: @surface2; - --color-decorative-border-1: @surface1 !important; - --color-focused: @accent-color !important; - --color-form-border-default: @surface0 !important; - --color-form-border-hover: @surface1 !important; - --color-form-border-primary-active: @accent-color !important; - --color-tripadvisor-rating: @subtext0 !important; - --color-tree-counter-tree-tall: @yellow !important; - --color-green-leaf-icon-color-top: @green !important; - --color-green-leaf-icon-color-bottom: @green !important; - --color-fossil-fuel-icon-color-top: @flamingo !important; - --color-fossil-fuel-icon-color-bottom: @maroon !important; - - /* search page */ - --color-above-fold-background: @surface0 !important; - --color-above-fold-background-addon: @overlay1 !important; - --color-above-fold-text: @text !important; - --color-section-wrapper-background-gray: @surface1 !important; - --color-section-wrapper-background-dark-green: @surface0 !important; - --color-section-wrapper-background-light-green: @surface0 !important; - --color-section-header-title: @text !important; - --color-projects-title: @text !important; - --color-projects-description: @surface1; - --color-financial-report-total-background: @surface0 !important; - --color-financial-report-total-text: @text !important; - --color-forest-background-addon: @surface1 !important; - --color-forest-background-secondary: @surface0 !important; - --color-before-after-text: @text !important; - - /* override color digit on homepage */ - .count__digit, - .counter__description { - color: @text !important; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/ecosia/catppuccin.user.less b/styles/ecosia/catppuccin.user.less new file mode 100644 index 0000000000..80064d7164 --- /dev/null +++ b/styles/ecosia/catppuccin.user.less @@ -0,0 +1,148 @@ +/* ==UserStyle== +@name Ecosia Catppuccin +@namespace github.com/catppuccin/userstyles/styles/ecosia +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ecosia +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ecosia/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aecosia +@description Soothing pastel theme for Ecosia +@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("ecosia.org") { + :root.light { + #catppuccin(@lightFlavor, @accentColor); + } + + :root.dark { + #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; + } + } + + --color-brand-primary: @accent-color !important; + --color-brand-secondary: @crust !important; + --color-error: @red !important; + --color-success: @green !important; + --color-disabled: @overlay1 !important; + --color-button-background-primary: @accent-color !important; + --color-button-background-primary-active: @accent-color !important; + --color-button-background-primary-hover: @accent-color; + --color-button-background-secondary: @surface0 !important; + --color-button-background-secondary-active: @surface2 !important; + --color-button-background-secondary-hover: @surface1 !important; + --color-button-content-primary: @base !important; + --color-button-content-secondary: @text !important; + --color-button-content-tertiary: @accent-color !important; + --color-button-border: @surface0 !important; + --color-button-background-transparent-hover: @surface1; + --color-button-background-transparent-active: @surface2; + --color-background-primary: @base !important; + --color-background-secondary: @crust !important; + --color-background-tertiary: @mantle !important; + --color-background-quaternary: @surface0; + --color-background-elevation-1: @mantle !important; + --color-highlighter: @surface0 !important; + --color-highlight-primary: @surface0 !important; + --color-overlay-primary: @overlay0 !important; + --color-overlay-secondary: @overlay1 !important; + --color-text-primary: @text !important; + --color-text-secondary: @subtext0 !important; + --color-text-tertiary: @text !important; + --color-link-primary: @sapphire !important; + --color-link-secondary: @sky !important; + --color-url: @sapphire !important; + --color-link-results-default: @sapphire !important; + --color-link-results-visited: @teal !important; + --color-decorative-icon: @accent-color !important; + --color-elevation-layer-1: @surface1; + --color-elevation-layer-2: @surface2; + --color-decorative-border-1: @surface1 !important; + --color-focused: @accent-color !important; + --color-form-border-default: @surface0 !important; + --color-form-border-hover: @surface1 !important; + --color-form-border-primary-active: @accent-color !important; + --color-tripadvisor-rating: @subtext0 !important; + --color-tree-counter-tree-tall: @yellow !important; + --color-green-leaf-icon-color-top: @green !important; + --color-green-leaf-icon-color-bottom: @green !important; + --color-fossil-fuel-icon-color-top: @flamingo !important; + --color-fossil-fuel-icon-color-bottom: @maroon !important; + + /* search page */ + --color-above-fold-background: @surface0 !important; + --color-above-fold-background-addon: @overlay1 !important; + --color-above-fold-text: @text !important; + --color-section-wrapper-background-gray: @surface1 !important; + --color-section-wrapper-background-dark-green: @surface0 !important; + --color-section-wrapper-background-light-green: @surface0 !important; + --color-section-header-title: @text !important; + --color-projects-title: @text !important; + --color-projects-description: @surface1; + --color-financial-report-total-background: @surface0 !important; + --color-financial-report-total-text: @text !important; + --color-forest-background-addon: @surface1 !important; + --color-forest-background-secondary: @surface0 !important; + --color-before-after-text: @text !important; + + /* override color digit on homepage */ + .count__digit, + .counter__description { + color: @text !important; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/elk/catppuccin.user.css b/styles/elk/catppuccin.user.css index 976f93b73d..3850d8272c 100644 --- a/styles/elk/catppuccin.user.css +++ b/styles/elk/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Elk Catppuccin +@name Elk Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/elk @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/elk -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/elk/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/elk/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aelk @description Soothing pastel theme for Elk @author Catppuccin @@ -13,143 +13,4 @@ @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("elk.zone") { - :root.dark { - #catppuccin(@darkFlavor, @accentColor); - } - :root.light { - #catppuccin(@lightFlavor, @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; - } - } - - --c-primary: @accent-color !important; - --c-primary-active: lighten(@accent-color, 10%) !important; - --c-primary-light: @surface0 !important; - --c-border: @surface0 !important; - --c-border-dark: @surface1 !important; - --c-bg-base: @base !important; - --rgb-bg-base: #rgbify(@mantle) [] !important; - --c-bg-active: @surface0 !important; - --c-bg-code: @surface0 !important; - --c-bg-selection: @accent-color !important; - --c-bg-fade: @surface0 !important; - --c-text-base: @text !important; - --c-text-code: @rosewater !important; - --c-text-secondary: @subtext0 !important; - --c-text-secondary-light: @subtext1 !important; - --c-bg-btn-disabled: @surface1 !important; - --c-text-btn-disabled: @text !important; - --c-text-btn: @text !important; - --c-success: @green !important; - --c-warning: @yellow !important; - --c-error: @red !important; - --c-danger: @red !important; - --c-danger-active: lighten(@red, 10%) !important; - --c-bg-dm: @surface0 !important; - - .btn-solid, - [btn-solid=""] { - color: var(--c-bg-base); - } - - ::-webkit-scrollbar-thumb { - background: fade(@surface1, 70%); - } - - ::-webkit-scrollbar-thumb:hover { - background: fade(@surface1, 80%); - } - - [text-red], - [text-red-600], - [hover^="text-red"]:hover { - color: rgba(#rgbify(@red) [], var(--un-text-opacity)); - } - - [text-blue], - [hover^="text-blue"]:hover { - color: rgba(#rgbify(@blue) [], var(--un-text-opacity)); - } - - [text-green], - [hover^="text-green"]:hover { - color: rgba(#rgbify(@green) [], var(--un-text-opacity)); - } - - [text-yellow], - [hover^="text-yellow"]:hover { - color: rgba(#rgbify(@yellow) [], var(--un-text-opacity)); - } - - [text-purple], - [hover^="text-purple"]:hover { - color: rgba(#rgbify(@lavender) [], var(--un-text-opacity)); - } - - [group-hover^="bg-purple/10"]:hover { - background-color: fade(@lavender, 10%); - } - - .filter-saturate-0, - [filter-saturate-0=""] { - filter: none; - } - } -} - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/elk/catppuccin.user.less b/styles/elk/catppuccin.user.less new file mode 100644 index 0000000000..cea1d105cb --- /dev/null +++ b/styles/elk/catppuccin.user.less @@ -0,0 +1,153 @@ +/* ==UserStyle== +@name Elk Catppuccin +@namespace github.com/catppuccin/userstyles/styles/elk +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/elk +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/elk/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aelk +@description Soothing pastel theme for Elk +@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("elk.zone") { + :root.dark { + #catppuccin(@darkFlavor, @accentColor); + } + :root.light { + #catppuccin(@lightFlavor, @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; + } + } + + --c-primary: @accent-color !important; + --c-primary-active: lighten(@accent-color, 10%) !important; + --c-primary-light: @surface0 !important; + --c-border: @surface0 !important; + --c-border-dark: @surface1 !important; + --c-bg-base: @base !important; + --rgb-bg-base: #rgbify(@mantle)[] !important; + --c-bg-active: @surface0 !important; + --c-bg-code: @surface0 !important; + --c-bg-selection: @accent-color !important; + --c-bg-fade: @surface0 !important; + --c-text-base: @text !important; + --c-text-code: @rosewater !important; + --c-text-secondary: @subtext0 !important; + --c-text-secondary-light: @subtext1 !important; + --c-bg-btn-disabled: @surface1 !important; + --c-text-btn-disabled: @text !important; + --c-text-btn: @text !important; + --c-success: @green !important; + --c-warning: @yellow !important; + --c-error: @red !important; + --c-danger: @red !important; + --c-danger-active: lighten(@red, 10%) !important; + --c-bg-dm: @surface0 !important; + + .btn-solid, + [btn-solid=""] { + color: var(--c-bg-base); + } + + ::-webkit-scrollbar-thumb { + background: fade(@surface1, 70%); + } + + ::-webkit-scrollbar-thumb:hover { + background: fade(@surface1, 80%); + } + + [text-red], + [text-red-600], + [hover^="text-red"]:hover { + color: rgba(#rgbify(@red)[], var(--un-text-opacity)); + } + + [text-blue], + [hover^="text-blue"]:hover { + color: rgba(#rgbify(@blue)[], var(--un-text-opacity)); + } + + [text-green], + [hover^="text-green"]:hover { + color: rgba(#rgbify(@green)[], var(--un-text-opacity)); + } + + [text-yellow], + [hover^="text-yellow"]:hover { + color: rgba(#rgbify(@yellow)[], var(--un-text-opacity)); + } + + [text-purple], + [hover^="text-purple"]:hover { + color: rgba(#rgbify(@lavender)[], var(--un-text-opacity)); + } + + [group-hover^="bg-purple/10"]:hover { + background-color: fade(@lavender, 10%); + } + + .filter-saturate-0, + [filter-saturate-0=""] { + filter: none; + } + } +} + +#rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/formative/catppuccin.user.css b/styles/formative/catppuccin.user.css index f98127123c..f3910639fc 100644 --- a/styles/formative/catppuccin.user.css +++ b/styles/formative/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Formative Catppuccin +@name Formative Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/formative @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/formative -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/formative/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/formative/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aformative @description Soothing pastel theme for Formative @author Catppuccin @@ -13,1648 +13,4 @@ @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('app.formative.com'), domain("goformative.com") { - @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]; - - @contrast-accent-color: if(@lookup = latte, @text, @base); - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - border-color: @overlay0; - color: @text; - } - .input { - border-color: @overlay0; - } - - .MainAppSideMenu__LogoLink-sc-11gwnv8-2, - .MainAppHeader__LogoLink-sc-1gw0bt9-2, - .SplitColumnLayout__StyledLogo-sc-4mcl10-4 { - svg { - path:nth-child(1) { - fill: @yellow !important; - } - path:nth-child(2) { - fill: @green !important; - } - path:nth-child(3) { - fill: @blue !important; - } - path:nth-child(4) { - fill: @red !important; - } - path:nth-child(5) { - fill: @yellow !important; - } - path:nth-child(6) { - fill: @text !important; - } - } - } - - background: @base; - body { - color: @text; - } - - hr { - border-color: @overlay0 !important; - } - - .MainAppSideMenu__RootNav-sc-11gwnv8-0 { - background: @surface0; - .SideTabItem__RootButton-sc-vtkzgr-0 { - &.selected { - background: fade(@accent-color, 50%); - &::after { - background: @accent-color; - } - } - &:hover { - .avatar { - box-shadow: @accent-color 0 0 0 1px; - } - } - &:not(.selected):hover { - .side-tab-item-label-div, - .material-icons-outlined, - .svg-icons svg { - color: @accent-color; - } - } - } - .side-tab-item-label-div, - .material-icons-outlined, - .svg-icons { - color: @text; - } - } - .notifications-count { - background: @accent-color; - color: @contrast-accent-color; - } - .NotificationCenterAlert__TriggerDiv-sc-165xmi4-0 { - background-color: @surface0; - .material-icons-outlined { - color: @text; - } - } - .avatar:hover { - box-shadow: @accent-color 0 0 0 1px; - } - .MainAppHeader__RootDiv-sc-1gw0bt9-0 { - background-color: @surface0; - } - - .SecondaryHeader__RootDiv-sc-1lpafq7-0 { - background: @surface0; - border-color: @overlay0; - .TabsItem__RootDiv-sc-tj1og8-0 > a { - color: @text; - } - .TabsItem__RootDiv-sc-tj1og8-0:hover > a { - color: @accent-color; - } - .TabsItem__SelectedLineDiv-sc-tj1og8-1 { - background: @accent-color !important; - } - .TabsItem__TabLink-sc-tj1og8-3:focus-visible { - background: transparent !important; - } - } - - main, - .FormativesShelf__HeaderDiv-sc-1pswvpk-3, - .FormativesShelf__StyledSecondaryHeader-sc-1pswvpk-4, - .TabsItem__TabDiv-sc-tj1og8-4:focus-visible { - background: @base; - } - .Home__TitleSpan-sc-q7a345-5, - .ClassesShelf__TitleSpan-sc-1ews12o-2, - .TabsItem__TabDiv-sc-tj1og8-4, - .OverflowEllipsis__RootDiv-sc-1mjk6uz-0, - .Label-sc-rzlz3u-0, - .Text-sc-1mon9hz-0, - .ProfileAccountInfo__BaseDiv-sc-1nbrrm9-0, - .Achievements__StyledHeading-sc-nmy2km-2, - .Achievements__StyledSubHeading-sc-nmy2km-3, - .BadgeCard__BadgeLabelDiv-sc-13976oo-8, - .BadgeCard__BadgeDescriptionDiv-sc-13976oo-9, - .EmptyExplainer__EmptyExplainerMainText-sc-1ixiesy-2, - .EmptyExplainer__EmptyExplainerSubtext-sc-1ixiesy-3, - .LabelledDropdownList__StyledLabel-sc-co7v7a-1, - .BadgeSidebar__BadgeLabelDiv-sc-oi03p1-3, - .BadgeSidebar__BadgeDescriptionDiv-sc-oi03p1-4, - .BadgeSidebar__ChallengeProgressStatusDiv-sc-oi03p1-8, - .BadgeSidebar__ChallengeProgressFractionDiv-sc-oi03p1-9, - .BadgeSidebar__LevelDescriptionDiv-sc-oi03p1-13, - .BadgeSidebar__AchievedOnDiv-sc-oi03p1-14, - .QuestionNotificationRow__NameP-sc-f7ccw5-7, - .QuestionNotificationRow__StyledTimeAgo-sc-f7ccw5-8, - .TextViewable__RootDiv-sc-ohojgu-0, - .ScorePill__ScoreDiv-sc-w63ftw-0, - .QuestionViewable__QuestionTextRichTextWrapperDiv-sc-13jvio2-1, - .QuestionViewable__QuestionNumberDiv-sc-13jvio2-3, - .FormativeStudentFooter__ProgressCountDiv-sc-6tj89c-1, - .FormativeStudentFooter__SubTextDiv-sc-6tj89c-5, - .FormativesShelf__ShowScoresText-sc-1pswvpk-6, - .ModalBody__RootDiv-sc-1lg094f-0, - .Elements__Title-sc-1qtb2ho-9, - .JoinQuickCode__QuickCodeTextParagraph-sc-1uhfett-1, - .CallToActionLink__ActionText-sc-yuiy65-1, - .Checkbox__CheckboxLabel-sc-1oy0ey9-4, - .ModalTitle__TitleH4-sc-18cspoj-1, - .FormativeItemViewable__HintDiv-sc-m0kwch-8, - .NoFormatives__HeadingDiv-sc-1v9g5eg-1, - .NoFormatives__BodyP-sc-1v9g5eg-2, - .DragAndDropViewableContainer__InstructionsDiv-sc-1ke293x-0, - .QuestionViewable__CorrectAnswerLabelDiv-sc-13jvio2-7, - .MatchingTableRow__ArrowIcon-sc-1u9h4tb-1, - .PracticeSet__StyledLastUpdated-sc-1wup6tb-9, - .MaterialIcon-sc-1g5xoi8-0, - .MinimalFormativeStudentHeader__FormativeTitleDiv-sc-14rcnaq-4, - .ErrorExplainer__SubTextHeading-sc-7nq4if-2, - .ErrorExplainer__MainTextHeading-sc-7nq4if-1, - .ErrorExplainer__TechnicalDetailsHeading-sc-7nq4if-3, - .ErrorExplainer__ErrorIdParagraph-sc-7nq4if-4, - .TeacherPacedStart__DetailsDiv-sc-1f4f5sd-4, - .Elements__SubText-sc-1qtb2ho-11, - .RichText__RootReadOnlyDiv-sc-fjolxt-1 *, - .ValidatedInputNew__InputPrefixSpan-sc-18vdili-3, - .LaunchRespondusBrowser__MainTextHeading-sc-1ymzzc2-5, - .LaunchRespondusBrowser__DetailsParagraph-sc-1ymzzc2-4, - .PracticeSession__PopoverContentDiv-sc-1t2vn9a-4, - .ExpandableAccordionHeader__HeaderRow-sc-cu02pz-1, - .VerticalButton__StyledSpan-sc-1h2we7r-1, - .ShelfTile__LabelDiv-sc-1oc4c00-3, - .PracticeSet__AddItemCardContents-sc-1wup6tb-10 { - color: @text; - } - .TabsItem__TabDiv-sc-tj1og8-4:hover, - .RespondusTroubleshootLink__TroubleshootingAnchor-sc-17na5u4-7, - .Summary__RawButtonLink-sc-1ofq6fd-2 { - color: @accent-color; - } - .FormativesShelf__StyledSecondaryHeader-sc-1pswvpk-4 { - border-color: @overlay0; - } - .TabsItem__SelectedLineDiv-sc-tj1og8-1 { - background: @accent-color !important; - } - .Pill__RootDiv-sc-4b6mpn-0, - .ItemInfoPill-sc-ecx83e-0, - .FormativeItemViewable__HintsRemainingCountDiv-sc-m0kwch-11, - .IconWarningButton__RootButton-sc-1b683n6-0, - .Ellipse__RootButton-sc-1teidw7-0 { - &.IconWarningButton__RootButton-sc-1b683n6-0:hover { - border-color: @red; - } - > svg[width="16"] { - path { - stroke: @red; - } - } - &, - .material-icons-outlined { - color: @text !important; - } - background: @surface2 !important; - border-color: @overlay0; - } - .Card__RootDiv-sc-hyrluv-0, - .Card__RootDiv-sc-4gt2nj-0 { - background: @surface0; - border-color: @overlay0; - &.selected { - border-color: @accent-color; - outline-color: @accent-color; - } - .material-icons-outlined { - color: @text; - } - &:hover { - .FormativeCard__TitleOverflowEllipsis-sc-tkxjaz-7, - .SectionCard__SectionTitleOverflowEllipsis-sc-ir1v2v-4 { - color: @accent-color; - } - } - } - .ClassAvatar__RootDiv-sc-i7tto7-0, - .avatar > div { - background: @accent-color; - color: @contrast-accent-color; - } - .ReactSelect__control { - background: @surface0; - border-color: @overlay0; - .ReactSelect__placeholder { - color: @subtext0; - } - .ReactSelect__indicator, - .ReactSelect__single-value, - .ReactSelect__input-container { - color: @text; - } - &:focus-within { - border-color: @accent-color !important; - } - } - .react-select-icon { - color: @text; - } - .ReactSelect__menu { - background: @surface2 !important; - color: @text; - .SearchBarOption__RootLink-sc-191bb28-1:hover - .SearchBarOption__TitleOverflowEllipsis-sc-191bb28-0 { - color: @accent-color; - } - .ReactSelect__option--is-focused { - background: @overlay0; - } - .ReactSelect__option--is-selected { - background: @accent-color; - color: @contrast-accent-color; - } - .ReactSelect__menu-notice { - color: @subtext0; - } - } - - .ClassesShelfContainer__StyledButton-sc-zx4vft-0 .material-icons-outlined { - color: @text; - } - - .Button__StyledButton-sc-aum9f1-1, - .IconButton__RootButton-sc-ebvofk-0, - .SectionDetail__BackLink-sc-1aifgaj-4 { - background: @surface0 !important; - &, - .material-icons-outlined { - color: @accent-color !important; - border-color: @overlay0; - } - &:hover, - &:enabled:focus { - background: @surface1; - border-color: @accent-color; - } - } - .Switch__RootButton-sc-1ss5zxi-0 { - background: @surface0; - &[aria-checked="true"] { - background: @accent-color; - } - .Switch__BallDiv-sc-1ss5zxi-1 { - background: @overlay0; - } - } - .ButtonSwitch__RootDiv-sc-1cluxwg-0 { - background: @surface1; - .ButtonSwitchOption__RootDiv-sc-ek1jm8-0 { - &.selected { - background: @surface2; - } - color: @text; - } - } - .FormativeCardScore__PercentageSpan-sc-p5mc30-1 { - &[style*="rgba(32, 213, 171, 0.2)"] { - background: fade(@green, 50%) !important; - } - &[style*="rgba(255, 222, 51, 0.2)"] { - background: fade(@yellow, 50%) !important; - } - &[style*="rgba(0, 165, 251, 0.2)"] { - background: fade(@blue, 50%) !important; - } - &[style*="rgba(255, 76, 77, 0.2)"] { - background: fade(@red, 50%) !important; - } - } - - .Dropdown__PopoverContent-sc-1s7u5eb-2, - .Popover__PopoverContent-sc-1x169li-4 { - background: @surface2; - .DropdownRow__RowButton-sc-1bu6csb-0 { - background: @surface2; - border-color: @overlay2; - &, - .dropdown-list-icon, - .material-icons-outlined { - color: @text !important; - svg path { - fill: @text !important; - } - } - &:hover { - background: @overlay0 !important; - color: @text !important; - } - } - .Dropdown__PopoverArrow-sc-1s7u5eb-1, - .Popover__PopoverArrow-sc-1x169li-3 { - fill: @surface2; - } - .StrokePicker__InnerDiv-sc-8widgm-4 { - background: @surface2; - } - } - .DropdownList__TriggerButton-sc-1hvvmg1-0, - .EmptyExplainer__StyledMaterialIcon-sc-1ixiesy-4 { - color: @accent-color; - } - - .ProfileAccountInfo__DashedGroup-sc-1nbrrm9-2 { - border-color: @overlay0; - } - - .BadgeCard__RootButton-sc-13976oo-0 { - &:hover, - &:focus, - &.selected { - .BadgeCard__BadgeLabelDiv-sc-13976oo-8 { - color: @accent-color; - } - .Card__RootDiv-sc-4gt2nj-0 { - border-color: @accent-color; - } - } - .BadgeCard__ProgressPercentSpan-sc-13976oo-7 { - color: @text; - } - } - .BadgeSidebar__RootDiv-sc-oi03p1-0 { - background: @surface0; - .SvgIconWrapper__SvgIconDiv-sc-1u203y2-0 { - svg path { - fill: @text; - } - &:hover { - background: @surface1; - } - } - .BadgeSidebar__ChallengeLevelsDiv-sc-oi03p1-10 { - border-color: @overlay0; - } - } - .BadgeCard__BadgeImage-sc-13976oo-5, - .BadgeSidebar__BadgeImage-sc-oi03p1-2 { - &[src*="responses"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - &[src*="formatives-assigned-submitted"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } - .ProgressBar__ProgressDiv-sc-4qm1te-0 { - background: @overlay0; - .ProgressBar__ProgressBarDiv-sc-4qm1te-2 { - background: @accent-color; - } - } - .notification { - &.notification-success { - background: @green !important; - color: @contrast-accent-color !important; - } - } - .Tooltip__Content-sc-1k6bq57-0 { - background: @surface0; - color: @text; - .Tooltip__KeyboardShortcutContainerDiv-sc-1k6bq57-1 { - background: @surface1; - color: @text; - } - } - .Modal__Overlay-sc-1uf7odj-0 { - background: fade(@crust, 80%); - } - .Modal__Content-sc-1uf7odj-1 { - background: @base; - .modal-header, - .modal-footer { - border-color: @overlay0 !important; - } - .ModalHeader__Title-sc-1aoz840-1 { - color: @text; - } - .modal-footer { - background: @base; - } - .ModalHeader__CloseButton-sc-1aoz840-2 { - border-color: @overlay0; - background: @surface0; - &:enabled:hover { - background: @surface1 !important; - border-color: @accent-color; - } - } - .CopyablePracticeSetInfo__LinkText-sc-14zdsnw-3, - .CopyablePracticeSetInfo__ExplainerDiv-sc-14zdsnw-5 { - background: @surface0; - } - .ThemePreview__PrimaryColorDiv-sc-zh51j9-0[style*="outline"] { - &[style*="outline: rgb(255, 255, 255)"] { - outline-color: @text !important; - } - &[style*="outline: rgb(13, 100, 242)"] { - outline-color: @accent-color !important; - } - } - } - .ReactModal__Overlay { - background: fade(@crust, 80%); - .ReactModal__ActualContent { - background: @base !important; - .ModalBody-sc-1lg094f-0 > * { - color: @text !important; - &.ErrorExplainer__BodyDiv-sc-7nq4if-0 { - .material-icons-outlined { - color: @red; - } - .ErrorExplainer__TechnicalDetailsHeading-sc-7nq4if-3, - .ErrorExplainer__ErrorIdParagraph-sc-7nq4if-4 { - color: @subtext0; - } - } - &.Input__StyledInput-sc-1632reg-0 { - background: @surface0 !important; - &::placeholder { - color: @overlay2 !important; - } - &:focus { - border-color: @accent-color; - } - } - &.CookiePolicyModal__AccordionDiv-sc-dpnzx7-0 - .AccordionItem__ContainerDiv-sc-1aj05j4-0 { - &, - .AccordionItem__HeaderDiv-sc-1aj05j4-1, - .AccordionItem__BodyDiv-sc-1aj05j4-5 { - background: @surface0; - border-color: @overlay0; - } - .material-icons-outlined { - color: @text; - } - .CookiePolicyModal__BlueAlertText-sc-dpnzx7-5 { - color: @accent-color; - } - } - } - .ModalBody-sc-1lg094f-0:has(.Submit__ContentTitleH3-sc-1vceatk-1) - svg - path { - fill: @accent-color; - } - .ModalTitle { - background: @base; - } - .PracticeDispatchModalOptionLink__RootLink-sc-1wp7oro-0 { - background: @surface1 !important; - img { - &[src*="flashcard-preview"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - &[src*="match-preview"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - &[src*="quiz-preview"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } - } - } - } - .NotificationCenterAlertListContainer__RootDiv-sc-1kyy25p-0 { - background: @surface2; - .FormativeNotificationsCard__HeaderDiv-sc-fv5hu9-1, - .QuestionNotificationRow__IndentedBorderDiv-sc-f7ccw5-1, - .QuestionNotificationRow__RootDiv-sc-f7ccw5-0 { - border-color: @overlay2; - } - .FormativeNotificationsCard__RootDiv-sc-fv5hu9-0 { - background: @surface2; - border-color: @overlay2; - &:hover { - background: @overlay0; - } - } - .QuestionNotificationRow__RootDiv-sc-f7ccw5-0:hover { - background: transparent; - } - .material-icons-outlined { - color: @text; - &:hover { - color: @accent-color; - } - } - } - .SectionCard__InactiveSectionIcon-sc-ir1v2v-3 { - svg { - path:nth-child(1) { - fill: @overlay0 !important; - } - path:nth-child(2), - path:nth-child(3) { - fill: @text !important; - } - } - } - .SectionDetail__Header-sc-1aifgaj-2 { - background: transparent; - } - - .FormativeStudentHeader__UpperDiv-sc-yw00ql-12 { - background: @crust !important; - color: @text; - &, - .FormativeStudentHeader__InfoItem-sc-yw00ql-7 { - border-color: @overlay0; - } - } - .FormativeStudentHeader__NavStrip-sc-yw00ql-11 { - .FormativeStudentHeader__ScrollableDiv-sc-yw00ql-9 { - &::-webkit-scrollbar-track { - background: @surface0 !important; - border-color: @surface0 !important; - } - &::-webkit-scrollbar-thumb { - background: @overlay0 !important; - border-color: @overlay0 !important; - } - } - background: @mantle; - border-color: @overlay0; - .selectedSection { - border-color: @accent-color; - } - .formative-nav-item { - &, - .formative-nav-item-icon { - color: @text; - } - .FormativeStudentNavItem__StyledMessageIcon-sc-i1u5ts-4 { - color: @accent-color; - } - &:hover, - &:focus { - background: @surface1; - color: @accent-color; - border-color: @accent-color; - } - .fxpwVv { - background-color: @green; - } - .hSVaRB { - background-color: @text; - } - .kBznqt { - background-color: @yellow; - } - .hfnlVy { - background-color: @red; - } - .bDcnFV { - background-color: @peach; - } - svg { - path { - stroke: @red; - } - } - } - } - .checkbox-root { - button { - background: @surface0; - border-color: @accent-color !important; - box-shadow: none !important; - } - &.checked button { - background: @accent-color !important; - } - .Checkbox__RadioCircleDiv-sc-1oy0ey9-3 { - background: @contrast-accent-color !important; - } - .Checkbox__IndicatorIcon-sc-1oy0ey9-5 { - color: @contrast-accent-color; - } - } - .FormativeUnavailableMessage__InnerDiv-sc-14kxg7t-1 { - border-color: @accent-color; - background-color: @surface0; - } - .FormativeItemViewable__RootDiv-sc-m0kwch-0, - .SectionDescription__SectionInformationCard-sc-nmaua7-0 { - background: @mantle; - .correct { - outline-color: @green !important; - background: color-mix(in srgb, @base, @green 25%) !important; - } - .incorrect { - outline-color: @red !important; - background: color-mix(in srgb, @base, @red 25%) !important; - } - &, - .withFunctionalizedViewable__LeftColumn-sc-1636o2h-2, - .withFunctionalizedViewable__RightColumn-sc-1636o2h-4 { - border-color: @overlay0; - } - .SectionDescription__DividerDiv-sc-nmaua7-1 { - border-color: @overlay0; - } - .ScoreCircle__RootDiv-sc-lj5glq-0 { - &[style*="rgb(32, 213, 171)"] { - background-color: @green !important; - .material-icons-outlined { - color: @contrast-accent-color !important; - } - } - &[style*="rgb(255, 222, 51)"] { - background-color: @yellow !important; - } - &[style*="rgb(255, 138, 51)"] { - background-color: @peach !important; - } - &[style*="rgb(255, 76, 77)"] { - background-color: @red !important; - .material-icons-outlined { - color: @contrast-accent-color !important; - } - } - border-color: @overlay2 !important; - } - .BlankOutput__FillableEntity-sc-15mzaww-3, - .BlankOutput__FillableNumericDiv-sc-15mzaww-2 { - outline-color: @accent-color; - color: @text; - background: @surface0; - .KatexOutput__RootDiv-sc-gu2jna-0 { - [style*="color: rgb(204, 0, 0)"] { - color: @red !important; - } - } - } - .match-table-grid-container table { - th, - tr, - td { - background: @surface0 !important; - border-color: @overlay0; - .checkbox-root button { - background: @surface1; - } - } - } - .TargetElementViewable__BoxDiv-sc-1cp2mml-1 { - background: @surface0; - border-color: @accent-color; - .TargetChoiceViewable__ContentDiv-sc-6nylj9-1 { - background: @surface1; - border-color: @overlay0; - } - .TargetElementViewable__AddSelectedChoiceButton-sc-1cp2mml-6 i { - background: @accent-color; - color: @contrast-accent-color; - } - } - .MatchingTable__Table-sc-1rhxmvo-1 { - &, - td, - tr { - border-color: @overlay0; - } - tr.isOver { - outline-color: @accent-color; - } - } - .ChoiceElementViewable__RootDiv-sc-viwu2x-0 { - background: @surface0; - border-color: @overlay0; - &:hover, - &.highlight { - border-color: @accent-color; - background: @surface1; - } - .ChoiceElementViewable__LabelRichText-sc-viwu2x-4 { - background: transparent; - color: @text; - } - .Button__StyledButton-sc-aum9f1-1, - i { - background: transparent !important; - } - } - .ChoiceElement__RootDiv-sc-1mbtxfk-1 { - background: transparent; - } - .ChoiceElement__StyledRawButton-sc-1mbtxfk-0 { - .ChoiceElement__LabelRichText-sc-1mbtxfk-3, - .material-icons-outlined { - background: transparent; - } - } - .ChoiceOptionViewable__RightSideDiv-sc-a2vwy6-2 { - border-color: @overlay0; - .ChoiceOptionViewable__StrickenOverlayDiv-sc-a2vwy6-7 { - background-image: repeating-linear-gradient( - 315deg, - transparent, - transparent 16px, - @text 16px, - @text 18px - ); - } - } - .InlineChoiceOutput__InlineChoiceOutputDiv-sc-1694w84-2 { - background: @surface0; - border-color: @accent-color; - } - .DrawingCardButton__RootButton-sc-u2qprg-1 { - border-color: @overlay0; - .DrawingCardButton__DrawingPreview-sc-u2qprg-3 { - background: rgb(245, 246, 248); - } - .DrawingCardButton__HoverDarkScrim-sc-u2qprg-2 { - background: fade(@crust, 75%); - border-radius: 0; - } - .DrawingCardButton__ShowYourWorkPseudoButtonDiv-sc-u2qprg-0 { - border-color: @overlay0; - color: @text; - background: @base; - } - .DrawingCardButton__IncompleteIndicatorDiv-sc-u2qprg-4 { - background: @yellow; - svg path { - fill: @contrast-accent-color; - } - } - &:hover .DrawingCardButton__ShowYourWorkPseudoButtonDiv-sc-u2qprg-0 { - background: @surface2; - border-color: @accent-color; - } - } - .DragAndDropImageDropLocation__DropLocationContainerDiv-sc-oq3fcx-1 { - &:hover { - .DragAndDropImageDropLocationPoint-sc-1v0z50f-0 { - background: @surface1; - border-color: @surface1; - } - .dropzone-tip::before { - background: @surface1; - } - } - .DragAndDropImageDropLocationPoint-sc-1v0z50f-0 { - background: @surface0; - border-color: @surface0; - } - .dropzone-tip::before { - background: @surface0; - } - .isOver .dropzone { - background: @surface1; - .dropzone-number { - background: @surface2 !important; - } - } - .dropzone { - &:hover, - &.selected { - background: @surface1; - .dropzone-number { - background: @surface2 !important; - } - } - border-color: @accent-color !important; - background: @surface0; - .dropzone-number { - background: @surface1; - } - } - } - .DragAndDropChoice__RootDiv-sc-1wzeg1h-3 { - background: @surface0; - border-color: @overlay0; - .Button__StyledButton-sc-aum9f1-1, - .DragAndDropChoice__DragIcon-sc-1wzeg1h-1 { - background: transparent; - } - &.selected { - background: @surface1; - } - } - .DragAndDropDropzoneOutput__RootDiv-sc-1is7exh-0 { - background: @surface0; - border-color: @accent-color; - &.hasAnswer { - border-color: @overlay0; - } - } - .AnswerCorrectnessIndicator__CircleDiv-sc-18hnk99-1 { - &.correct { - background: @green; - } - .material-icons-outlined { - color: @contrast-accent-color; - } - } - .ShortAnswerViewableDetails__InputAutosizeTextarea-sc-1ugk4gk-0 { - background: @surface0; - border-color: @overlay0; - color: @text; - } - .ExpandableAccordionHeader__RootButton-sc-cu02pz-0 { - background: transparent; - } - .GraphViewableDetails__GraphAndControlsDiv-sc-13yx2r4-2 { - .VerticalButton__StyledButton-sc-1h2we7r-2 { - &:disabled { - i, - span { - color: @subtext0; - } - } - &:not(:disabled):hover, - &:not(:disabled):focus-within { - div { - background: @surface0; - } - span { - color: @accent-color; - } - } - } - .Graph__ContainerDiv-sc-1y56z00-0 { - border-color: @overlay0; - background: @surface0; - svg { - line[stroke="rgb(4,28,68)"], - marker[stroke="rgb(4,28,68)"] { - fill: @subtext1; - stroke: @subtext1; - } - path[stroke="rgb(80,95,121)"] { - fill: @subtext0; - stroke: @subtext0; - } - path[stroke="rgb(192,197,207)"] { - fill: @overlay0; - stroke: @overlay0; - } - path[stroke="rgb(13,100,242)"] { - stroke: @blue; - fill: @blue; - } - text { - stroke: @surface0 !important; - fill: @text; - } - ellipse[fill="rgb(13,100,242)"] { - stroke: @surface0; - fill: @blue; - } - } - .Coords__CoordsDiv-sc-1fj077e-1 { - background: @surface2; - } - } - } - } - .MediaSlider__RootSpan-sc-1gz67jn-0 { - .TrimmerMarker__TooltipDiv-sc-1f17hi4-1 { - background: @surface2; - color: @text; - } - .Thumb__RootSpan-sc-yv6w5k-0 { - background: @accent-color; - z-index: 2; - } - .Segment__SegmentSpan-sc-r0cy9o-0 { - background: @surface0 !important; - } - .TrimmerMarker__RootSpan-sc-1f17hi4-0 { - background: @overlay0; - z-index: 1; - } - } - .slider { - background: @surface1; - .thumb { - background: @overlay0; - color: @text; - } - } - .ExpandedDrawing__BodyDiv-sc-cz2rcw-0 { - .DrawingToolbar__RootDiv-sc-2xuxy3-0 { - &, - .DrawingToolbar__ToolDiv-sc-2xuxy3-3 { - background: @surface0; - color: @text; - } - .DrawingToolbar__ToolDiv-sc-2xuxy3-3:hover { - &, - .svg-icons, - .material-icons-outlined { - color: @accent-color; - } - } - .selected { - &::after { - background: @accent-color; - } - color: @accent-color; - } - } - .DrawingSidebar__ExpandedAnswerDiv-sc-1hvcy70-0 { - background: @mantle; - } - .DrawingSidebar__SidebarTopExplainer-sc-1hvcy70-1 { - background: @base; - border-color: @overlay0; - color: @text; - .DrawingSidebar__StyledSvgIcon-sc-1hvcy70-5 { - color: @text; - } - } - .SidePicker__RootDiv-sc-xie0qr-0 { - background: @base; - border-color: @overlay0; - } - } - .MathLiveInput__RootDiv-sc-tki2b-0 { - .keyboard-button-wrapper .svg-icons svg path { - fill: @accent-color !important; - } - color: @text; - border-color: @overlay0; - background: @surface0; - &:focus-within, - &:hover { - border-color: @accent-color; - } - &.invalid { - color: @red; - } - math-field { - --caret-color: @accent-color; - --selection-background-color: fade(@accent-color, 50%); - --selection-color: @text; - --correct-color: @text; - --incorrect-color: @red; - --latex-color: @blue; - --placeholder-color: @blue; - } - .ML__keyboard--plate { - --keyboard-text: @text; - --keyboard-text-active: @accent-color; - --keyboard-background: @surface0; - --keycap-background: @surface1; - --keycap-background-active: @surface2; - --keycap-background-border: @overlay0; - --keycap-background-border-bottom: @overlay0; - --keycap-text: @text; - --keycap-secondary-text: @subtext0; - --keycap-text-active: @accent-color; - --keycap-modifier-background: @surface2; - --keycap-modifier-background-active: @overlay0; - --keycap-modifier-border: @overlay1; - --keycap-modifier-border-bottom: @overlay1; - - [data-tooltip]::after { - background-color: @surface2; - color: @text; - } - border-color: @overlay0 !important; - } - } - .ML__keyboard.alternate-keys { - --keyboard-alternate-background: @surface2; - --keyboard-alternate-background-active: @overlay0; - --keyboard-alternate-text: @text; - --keyboard-alternate-text-active: @text; - } - - #mathlive-popover-panel { - background: @surface2; - color: @text; - box-shadow: 0 14px 28px fade(@crust, 25%) 0 10px 10px fade(@crust, 22%); - li:hover { - background: @overlay0; - } - &::after { - border-color: @surface2 transparent; - } - } - - .FullPointsAnimation__AbsoluteContainerDiv-sc-mzm76r-0, - .ScoreCircle__LottieWrapperDiv-sc-lj5glq-1, - .Summary__SummaryDiv-sc-1ofq6fd-0, - .MatchingSessionSummary__CheckmarkContainerDiv-sc-d3unim-2 { - svg { - path[fill="rgb(32,213,171)"], - path[fill="rgb(33,214,170)"] { - fill: @green !important; - } - path[fill="rgb(255,138,51)"] { - fill: @peach !important; - } - path[fill="rgb(255,222,51)"] { - fill: @yellow !important; - } - path[fill="rgb(255,76,77)"], - path[fill="rgb(255,76,76)"] { - fill: @red !important; - } - path[fill="rgb(201,68,204)"] { - fill: @mauve !important; - } - path[fill="rgb(0,165,249)"] { - fill: @blue !important; - } - path[fill="rgb(255,255,255)"], - path[fill="rgb(242,242,242)"] { - fill: @contrast-accent-color !important; - } - - path[stroke="rgb(32,213,171)"], - path[stroke="rgb(33,214,170)"] { - stroke: @green !important; - } - path[stroke="rgb(255,138,51)"] { - stroke: @peach !important; - } - path[stroke="rgb(255,222,51)"] { - stroke: @yellow !important; - } - path[stroke="rgb(255,76,77)"], - path[stroke="rgb(255,76,76)"] { - stroke: @red !important; - } - path[stroke="rgb(201,68,204)"] { - stroke: @mauve !important; - } - path[stroke="rgb(0,165,249)"] { - stroke: @blue !important; - } - path[stroke="rgb(255,255,255)"], - path[stroke="rgb(242,242,242)"] { - stroke: @contrast-accent-color !important; - } - } - } - - .Elements__JoinLayoutDiv-sc-1qtb2ho-0 { - background: @base; - .SplitColumnLayout__Card-sc-4mcl10-0 { - background: @surface0; - .Login__ContentDiv-sc-5w2jun-0, - .Login__LoginServiceButtonsRowDiv-sc-5w2jun-3 { - .Button__StyledButton-sc-aum9f1-1 { - background: @surface1 !important; - &:hover { - background: @surface2 !important; - } - } - .material-icons-outlined { - color: @text; - } - .NewselaServiceLoginButton__QuestionTextDiv-sc-mk13mj-1 { - color: @text; - } - .NewselaServiceLoginButton__ActionDiv-sc-mk13mj-2 { - color: @accent-color; - } - } - } - .JoinQuickCode__StyledLink-sc-1uhfett-2, - .CallToActionLink__StyledLink-sc-yuiy65-0, - .Login__ForgotLink-sc-5w2jun-1 { - color: @accent-color; - } - .react-code-input { - input { - background: @surface1; - border-color: @overlay0; - &:focus-within { - border-color: @accent-color; - } - } - &:not(:focus-within).empty [data-id="0"] { - border-color: @accent-color; - } - } - .JoinQuickCode__StyledPrimaryButton-sc-1uhfett-5 { - background: @surface1; - &:hover { - background: @surface2; - } - } - .ValidatedInputNew__StyledInput-sc-18vdili-4 { - background: @surface1; - border-color: @overlay0 !important; - color: @text; - } - } - .FormativeStudentFooter__BottomDiv-sc-6tj89c-3 { - border-color: @overlay0; - } - .StudentFormativeStatus__RootDiv-sc-y86tx8-1 { - &.bQdPlK { - background: @green; - } - &, - .material-icons-outlined { - color: @contrast-accent-color; - } - } - .FloatingToolButton__FloatingButton-sc-1gy4xsl-0 { - background: @overlay0; - &:hover, - &:enabled:hover, - &:focus, - &:enabled:focus { - background: @overlay1; - } - .material-icons-outlined { - color: @accent-color; - } - } - .PracticeSet__StyledHeader-sc-1wup6tb-6 { - background: @surface0; - border-color: @overlay0; - input.ReactiveTextInput__StyledInput-sc-go3drs-2 { - color: @text !important; - &::placeholder, - &:focus::placeholder { - color: @subtext0 !important; - } - } - .HeaderBackLink__TertiaryButtonLink-sc-1vx1tro-0, - .Button__StyledButton-sc-aum9f1-1 { - background: @surface1 !important; - color: @accent-color !important; - &:not([disabled]):hover { - background: @surface2; - } - } - .PracticeSet__DividerDiv-sc-1wup6tb-4 { - background: @overlay0; - } - } - .PracticeSet__ContentDiv-sc-1wup6tb-1 { - .AutoSizeInput__StyledInput-sc-ops4en-2 { - color: @text; - background: transparent !important; - - &:focus { - border-color: @subtext0; - } - } - .FlashcardSide__RootDiv-sc-amoro3-1 { - background: @surface0; - color: @text; - } - .PracticeItemEditor__HeaderDiv-sc-1jko4q4-0 { - background: @surface1; - } - .PracticeItemEditor__ContentDiv-sc-1jko4q4-2 { - background: @surface0; - .TextareaCard__RootDiv-sc-qx9s19-0 { - background: @surface1; - border-color: @overlay0; - textarea { - color: @text; - } - } - .MediaButton__StyledButton-sc-12h2vjb-0 { - background: @surface1; - border-color: @overlay0; - color: @text; - &:hover { - background: @surface2; - color: @accent-color; - } - } - } - } - .Banner__Root-sc-yf4o5r-0 { - &.error { - .material-icons-outlined { - color: @red; - } - border-color: @red; - } - background: @surface2; - color: @text; - } - .FileUploadButton__DropZoneDiv-sc-88u8tg-2 { - background: @surface0; - border-color: @accent-color; - .material-icons-outlined { - color: @accent-color; - } - } - .DividerWord__LineDiv-sc-59xl7-1 { - background: @overlay0; - } - .DividerWord__WordDiv-sc-59xl7-2 { - color: @text; - } - .MinimalFormativeStudentHeader__RootDiv-sc-14rcnaq-0 { - border-color: @overlay0; - } - .FormativeItemViewable__FeedbackMessagesListDiv-sc-m0kwch-1 { - .FeedbackMessagesList__MessagesListDiv-sc-9o5dsw-0 { - background: @surface1; - .FeedbackMessagesList__EmptyDiv-sc-9o5dsw-1 svg { - path:nth-child(1) { - fill: @yellow; - } - path:nth-child(2) { - fill: @green; - } - path:nth-child(3) { - fill: @mauve; - } - path:nth-child(4) { - stroke: @peach; - } - path:nth-child(5) { - stroke: @peach; - } - } - } - .FeedbackMessage__FeedbackBoxDiv-sc-q3ku9d-2 { - background: @surface2; - border-color: @overlay2; - } - .FeedbackMessageComposer__RootDiv-sc-vs8711-0 { - border-color: @overlay0; - .FeedbackMessageComposer__RichTextContainerDiv-sc-vs8711-3 { - border-color: @overlay1; - color: @text; - .public-DraftEditorPlaceholder-inner { - color: @subtext0; - } - } - } - } - .Toolbar__RootDiv-sc-1e3lohg-0 { - border-color: @overlay0; - box-shadow: @overlay0 0 1px 3px 0; - &::before, - &::after { - border-color: @surface2 transparent transparent; - } - &, - .buttonWrapper button { - background: @surface2; - } - .buttonWrapper button { - &:hover { - background: @overlay0; - } - &.active { - color: @accent-color; - svg { - fill: @accent-color; - } - } - svg { - fill: @text; - } - color: @text; - } - } - .TeacherPacedStart__RootDiv-sc-1f4f5sd-0 { - background: @surface0 !important; - } - .FeedbackMessageIcon__UnreadJewelDiv-sc-1x1yblc-1 { - background: @red; - box-shadow: @text 0 0 0 2px; - } - .CookiePolicyBanner__ContainerDiv-sc-1p3fxjn-1 { - background: @surface0; - border-color: @accent-color; - .Button__StyledButton-sc-aum9f1-1 { - background: @surface1; - &:hover { - background: @surface2; - } - } - } - .GameContainer__RootDiv-sc-1c3jzzv-0 { - background: @base !important; - .Timer__RootDiv-sc-bbbpy2-0 { - background: @surface1; - &, - i { - color: @text; - } - } - .Header__HeaderDiv-sc-327vcg-0 { - background: @surface0; - border-color: @overlay0; - .HeaderBackLink__TertiaryButtonLink-sc-1vx1tro-0, - .Button__StyledButton-sc-aum9f1-1 { - background: @surface1; - color: @accent-color; - &:hover { - background: @surface2; - } - } - } - .ThemePicker__ToggleItem-sc-juof75-3 { - div { - outline-color: @text !important; - } - &[aria-checked="true"], - &[aria-checked="true"] div { - outline-color: @accent-color !important; - } - } - .TitleCard__StartButton-sc-xz0ejb-1 { - background: @accent-color; - color: @base; - } - .QuizSession__BodyDiv-sc-4aco0-0 { - .QuizSession__DividerDiv-sc-4aco0-4 { - background: @overlay0; - } - .AnswerChoiceCard__CardButton-sc-lns4c-0 { - &::before { - box-shadow: @overlay0 0 0 0 1px; - } - &.correct::before { - animation: 1.2s ease 0s 1 normal forwards running - catppuccin-formative-practiceset-quiz-correct; - } - &.incorrect::before { - animation: 1.2s ease 0s 1 normal forwards running - catppuccin-formative-practiceset-quiz-incorrect; - } - .AnswerChoiceCard__CorrectnessPill-sc-lns4c-2 { - &.correct { - background: @green; - i, - span { - color: @contrast-accent-color; - } - } - background: @red; - i, - span { - color: @contrast-accent-color; - } - } - .AnswerChoiceCard__CorrectnessOverlay-sc-lns4c-3 { - &.correct { - background: @green; - } - i { - color: @contrast-accent-color !important; - } - background: @red; - } - } - } - .MatchingSessionSummary__RootDiv-sc-d3unim-0, - .MatchingSessionSummary__CheckmarkOverlayDiv-sc-d3unim-1 { - background: @base; - .Glow__RootDiv-sc-1c8wp5s-0 { - background: @accent-color !important; - color: @contrast-accent-color; - } - .MatchingSessionSummary__SessionDiv-sc-d3unim-13 { - border-color: @overlay0; - &.highlight { - background: fade(@yellow, 25%); - } - } - } - .LatestPerformances__PerformanceDiv-sc-g3qin-2, - .Leaderboard__PerformanceDiv-sc-152arb5-3 { - border-color: @overlay0; - } - .MatchingSession__ContentDiv-sc-edrizy-0 { - .ProgressBar__RootDiv-sc-ly2f4w-0 { - .Glow__FlashDiv-sc-1c8wp5s-1 { - background: transparent; - } - .ProgressBar__PointsContainerSpan-sc-ly2f4w-3 - .Glow__RootDiv-sc-1c8wp5s-0 { - background: @surface0 !important; - color: @text; - } - .ProgressBar__BarDiv-sc-ly2f4w-1 { - background: @surface0; - border-color: @overlay0; - .Glow__RootDiv-sc-1c8wp5s-0 { - background: @accent-color !important; - } - } - } - } - .PracticeSessionCard__CardButton-sc-wwcpxc-0 { - border-color: @overlay0; - } - .FlashcardSide__RootDiv-sc-amoro3-1 { - background: @surface0; - border-color: @overlay0; - color: @text; - } - .StreakProgressBar__Progress-sc-1b8tyg3-2 { - background: @surface0; - .StreakProgressBar__ProgressBarDiv-sc-1b8tyg3-3 { - background: @accent-color; - } - } - .StreakProgressBar__StyledSvgIcon-sc-1b8tyg3-4 { - svg path { - fill: @yellow; - stroke: @contrast-accent-color; - } - &.visible { - animation: 0.5s ease 0s 1 normal none running - catppuccin-formative-practiceset-quiz-streak; - } - } - .PracticeSession__AnswerButton-sc-1t2vn9a-3 { - color: @contrast-accent-color; - &.red { - background: @red; - } - &.green { - background: @green; - } - } - } - .PillToggleGroup__Item-sc-12fkyq8-1 { - &[aria-checked="true"] { - background: @surface0; - color: @accent-color; - } - &:hover { - background: @surface0; - } - border-color: @overlay0; - color: @text; - } - .FeedbackButton__StyledButton-sc-1b7u8ss-0 { - background: @surface2; - i { - color: @text; - } - } - @keyframes catppuccin-formative-practiceset-quiz-correct { - 0% { - box-shadow: @overlay0 0 0 0 1px; - } - 70% { - box-shadow: @overlay0 0 0 0 1px; - } - 100% { - box-shadow: @green 0 0 0 3px; - } - } - @keyframes catppuccin-formative-practiceset-quiz-incorrect { - 0% { - box-shadow: @overlay0 0 0 0 1px; - } - 70% { - box-shadow: @overlay0 0 0 0 1px; - } - 100% { - box-shadow: @red 0 0 0 3px; - } - } - @keyframes catppuccin-formative-practiceset-quiz-streak { - 0% { - filter: drop-shadow(fade(@yellow, 80) 0 0 0); - transform: scale(0.8); - } - 50% { - filter: drop-shadow(fade(@yellow, 80) 0 0 12px); - transform: scale(1.3); - } - 100% { - filter: drop-shadow(fade(@yellow, 80) 0 0 0); - transform: scale(1); - } - } - .Shelf__RootDiv-sc-5aism7-0 { - background: @surface0; - .ShelfTile__RootButton-sc-1oc4c00-0 { - background: @surface1; - &:hover { - background: @surface2; - box-shadow: @accent-color 0 0 0 1px; - .label { - color: @accent-color; - } - } - .ShelfTile__IconDiv-sc-1oc4c00-1 { - background: @accent-color !important; - i { - color: @contrast-accent-color; - } - } - } - } - img.spinner { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - .NoFormatives__StyledImg-sc-1v9g5eg-4 { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - .PracticeSetGrid__EmptyStateDiv-sc-1yuxflk-1 img { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/formative/catppuccin.user.less b/styles/formative/catppuccin.user.less new file mode 100644 index 0000000000..16aa070f6c --- /dev/null +++ b/styles/formative/catppuccin.user.less @@ -0,0 +1,1658 @@ +/* ==UserStyle== +@name Formative Catppuccin +@namespace github.com/catppuccin/userstyles/styles/formative +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/formative +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/formative/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aformative +@description Soothing pastel theme for Formative +@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("app.formative.com"), domain("goformative.com") { + @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]; + + @contrast-accent-color: if(@lookup = latte, @text, @base); + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + border-color: @overlay0; + color: @text; + } + .input { + border-color: @overlay0; + } + + .MainAppSideMenu__LogoLink-sc-11gwnv8-2, + .MainAppHeader__LogoLink-sc-1gw0bt9-2, + .SplitColumnLayout__StyledLogo-sc-4mcl10-4 { + svg { + path:nth-child(1) { + fill: @yellow !important; + } + path:nth-child(2) { + fill: @green !important; + } + path:nth-child(3) { + fill: @blue !important; + } + path:nth-child(4) { + fill: @red !important; + } + path:nth-child(5) { + fill: @yellow !important; + } + path:nth-child(6) { + fill: @text !important; + } + } + } + + background: @base; + body { + color: @text; + } + + hr { + border-color: @overlay0 !important; + } + + .MainAppSideMenu__RootNav-sc-11gwnv8-0 { + background: @surface0; + .SideTabItem__RootButton-sc-vtkzgr-0 { + &.selected { + background: fade(@accent-color, 50%); + &::after { + background: @accent-color; + } + } + &:hover { + .avatar { + box-shadow: @accent-color 0 0 0 1px; + } + } + &:not(.selected):hover { + .side-tab-item-label-div, + .material-icons-outlined, + .svg-icons svg { + color: @accent-color; + } + } + } + .side-tab-item-label-div, + .material-icons-outlined, + .svg-icons { + color: @text; + } + } + .notifications-count { + background: @accent-color; + color: @contrast-accent-color; + } + .NotificationCenterAlert__TriggerDiv-sc-165xmi4-0 { + background-color: @surface0; + .material-icons-outlined { + color: @text; + } + } + .avatar:hover { + box-shadow: @accent-color 0 0 0 1px; + } + .MainAppHeader__RootDiv-sc-1gw0bt9-0 { + background-color: @surface0; + } + + .SecondaryHeader__RootDiv-sc-1lpafq7-0 { + background: @surface0; + border-color: @overlay0; + .TabsItem__RootDiv-sc-tj1og8-0 > a { + color: @text; + } + .TabsItem__RootDiv-sc-tj1og8-0:hover > a { + color: @accent-color; + } + .TabsItem__SelectedLineDiv-sc-tj1og8-1 { + background: @accent-color !important; + } + .TabsItem__TabLink-sc-tj1og8-3:focus-visible { + background: transparent !important; + } + } + + main, + .FormativesShelf__HeaderDiv-sc-1pswvpk-3, + .FormativesShelf__StyledSecondaryHeader-sc-1pswvpk-4, + .TabsItem__TabDiv-sc-tj1og8-4:focus-visible { + background: @base; + } + .Home__TitleSpan-sc-q7a345-5, + .ClassesShelf__TitleSpan-sc-1ews12o-2, + .TabsItem__TabDiv-sc-tj1og8-4, + .OverflowEllipsis__RootDiv-sc-1mjk6uz-0, + .Label-sc-rzlz3u-0, + .Text-sc-1mon9hz-0, + .ProfileAccountInfo__BaseDiv-sc-1nbrrm9-0, + .Achievements__StyledHeading-sc-nmy2km-2, + .Achievements__StyledSubHeading-sc-nmy2km-3, + .BadgeCard__BadgeLabelDiv-sc-13976oo-8, + .BadgeCard__BadgeDescriptionDiv-sc-13976oo-9, + .EmptyExplainer__EmptyExplainerMainText-sc-1ixiesy-2, + .EmptyExplainer__EmptyExplainerSubtext-sc-1ixiesy-3, + .LabelledDropdownList__StyledLabel-sc-co7v7a-1, + .BadgeSidebar__BadgeLabelDiv-sc-oi03p1-3, + .BadgeSidebar__BadgeDescriptionDiv-sc-oi03p1-4, + .BadgeSidebar__ChallengeProgressStatusDiv-sc-oi03p1-8, + .BadgeSidebar__ChallengeProgressFractionDiv-sc-oi03p1-9, + .BadgeSidebar__LevelDescriptionDiv-sc-oi03p1-13, + .BadgeSidebar__AchievedOnDiv-sc-oi03p1-14, + .QuestionNotificationRow__NameP-sc-f7ccw5-7, + .QuestionNotificationRow__StyledTimeAgo-sc-f7ccw5-8, + .TextViewable__RootDiv-sc-ohojgu-0, + .ScorePill__ScoreDiv-sc-w63ftw-0, + .QuestionViewable__QuestionTextRichTextWrapperDiv-sc-13jvio2-1, + .QuestionViewable__QuestionNumberDiv-sc-13jvio2-3, + .FormativeStudentFooter__ProgressCountDiv-sc-6tj89c-1, + .FormativeStudentFooter__SubTextDiv-sc-6tj89c-5, + .FormativesShelf__ShowScoresText-sc-1pswvpk-6, + .ModalBody__RootDiv-sc-1lg094f-0, + .Elements__Title-sc-1qtb2ho-9, + .JoinQuickCode__QuickCodeTextParagraph-sc-1uhfett-1, + .CallToActionLink__ActionText-sc-yuiy65-1, + .Checkbox__CheckboxLabel-sc-1oy0ey9-4, + .ModalTitle__TitleH4-sc-18cspoj-1, + .FormativeItemViewable__HintDiv-sc-m0kwch-8, + .NoFormatives__HeadingDiv-sc-1v9g5eg-1, + .NoFormatives__BodyP-sc-1v9g5eg-2, + .DragAndDropViewableContainer__InstructionsDiv-sc-1ke293x-0, + .QuestionViewable__CorrectAnswerLabelDiv-sc-13jvio2-7, + .MatchingTableRow__ArrowIcon-sc-1u9h4tb-1, + .PracticeSet__StyledLastUpdated-sc-1wup6tb-9, + .MaterialIcon-sc-1g5xoi8-0, + .MinimalFormativeStudentHeader__FormativeTitleDiv-sc-14rcnaq-4, + .ErrorExplainer__SubTextHeading-sc-7nq4if-2, + .ErrorExplainer__MainTextHeading-sc-7nq4if-1, + .ErrorExplainer__TechnicalDetailsHeading-sc-7nq4if-3, + .ErrorExplainer__ErrorIdParagraph-sc-7nq4if-4, + .TeacherPacedStart__DetailsDiv-sc-1f4f5sd-4, + .Elements__SubText-sc-1qtb2ho-11, + .RichText__RootReadOnlyDiv-sc-fjolxt-1 *, + .ValidatedInputNew__InputPrefixSpan-sc-18vdili-3, + .LaunchRespondusBrowser__MainTextHeading-sc-1ymzzc2-5, + .LaunchRespondusBrowser__DetailsParagraph-sc-1ymzzc2-4, + .PracticeSession__PopoverContentDiv-sc-1t2vn9a-4, + .ExpandableAccordionHeader__HeaderRow-sc-cu02pz-1, + .VerticalButton__StyledSpan-sc-1h2we7r-1, + .ShelfTile__LabelDiv-sc-1oc4c00-3, + .PracticeSet__AddItemCardContents-sc-1wup6tb-10 { + color: @text; + } + .TabsItem__TabDiv-sc-tj1og8-4:hover, + .RespondusTroubleshootLink__TroubleshootingAnchor-sc-17na5u4-7, + .Summary__RawButtonLink-sc-1ofq6fd-2 { + color: @accent-color; + } + .FormativesShelf__StyledSecondaryHeader-sc-1pswvpk-4 { + border-color: @overlay0; + } + .TabsItem__SelectedLineDiv-sc-tj1og8-1 { + background: @accent-color !important; + } + .Pill__RootDiv-sc-4b6mpn-0, + .ItemInfoPill-sc-ecx83e-0, + .FormativeItemViewable__HintsRemainingCountDiv-sc-m0kwch-11, + .IconWarningButton__RootButton-sc-1b683n6-0, + .Ellipse__RootButton-sc-1teidw7-0 { + &.IconWarningButton__RootButton-sc-1b683n6-0:hover { + border-color: @red; + } + > svg[width="16"] { + path { + stroke: @red; + } + } + &, + .material-icons-outlined { + color: @text !important; + } + background: @surface2 !important; + border-color: @overlay0; + } + .Card__RootDiv-sc-hyrluv-0, + .Card__RootDiv-sc-4gt2nj-0 { + background: @surface0; + border-color: @overlay0; + &.selected { + border-color: @accent-color; + outline-color: @accent-color; + } + .material-icons-outlined { + color: @text; + } + &:hover { + .FormativeCard__TitleOverflowEllipsis-sc-tkxjaz-7, + .SectionCard__SectionTitleOverflowEllipsis-sc-ir1v2v-4 { + color: @accent-color; + } + } + } + .ClassAvatar__RootDiv-sc-i7tto7-0, + .avatar > div { + background: @accent-color; + color: @contrast-accent-color; + } + .ReactSelect__control { + background: @surface0; + border-color: @overlay0; + .ReactSelect__placeholder { + color: @subtext0; + } + .ReactSelect__indicator, + .ReactSelect__single-value, + .ReactSelect__input-container { + color: @text; + } + &:focus-within { + border-color: @accent-color !important; + } + } + .react-select-icon { + color: @text; + } + .ReactSelect__menu { + background: @surface2 !important; + color: @text; + .SearchBarOption__RootLink-sc-191bb28-1:hover + .SearchBarOption__TitleOverflowEllipsis-sc-191bb28-0 { + color: @accent-color; + } + .ReactSelect__option--is-focused { + background: @overlay0; + } + .ReactSelect__option--is-selected { + background: @accent-color; + color: @contrast-accent-color; + } + .ReactSelect__menu-notice { + color: @subtext0; + } + } + + .ClassesShelfContainer__StyledButton-sc-zx4vft-0 .material-icons-outlined { + color: @text; + } + + .Button__StyledButton-sc-aum9f1-1, + .IconButton__RootButton-sc-ebvofk-0, + .SectionDetail__BackLink-sc-1aifgaj-4 { + background: @surface0 !important; + &, + .material-icons-outlined { + color: @accent-color !important; + border-color: @overlay0; + } + &:hover, + &:enabled:focus { + background: @surface1; + border-color: @accent-color; + } + } + .Switch__RootButton-sc-1ss5zxi-0 { + background: @surface0; + &[aria-checked="true"] { + background: @accent-color; + } + .Switch__BallDiv-sc-1ss5zxi-1 { + background: @overlay0; + } + } + .ButtonSwitch__RootDiv-sc-1cluxwg-0 { + background: @surface1; + .ButtonSwitchOption__RootDiv-sc-ek1jm8-0 { + &.selected { + background: @surface2; + } + color: @text; + } + } + .FormativeCardScore__PercentageSpan-sc-p5mc30-1 { + &[style*="rgba(32, 213, 171, 0.2)"] { + background: fade(@green, 50%) !important; + } + &[style*="rgba(255, 222, 51, 0.2)"] { + background: fade(@yellow, 50%) !important; + } + &[style*="rgba(0, 165, 251, 0.2)"] { + background: fade(@blue, 50%) !important; + } + &[style*="rgba(255, 76, 77, 0.2)"] { + background: fade(@red, 50%) !important; + } + } + + .Dropdown__PopoverContent-sc-1s7u5eb-2, + .Popover__PopoverContent-sc-1x169li-4 { + background: @surface2; + .DropdownRow__RowButton-sc-1bu6csb-0 { + background: @surface2; + border-color: @overlay2; + &, + .dropdown-list-icon, + .material-icons-outlined { + color: @text !important; + svg path { + fill: @text !important; + } + } + &:hover { + background: @overlay0 !important; + color: @text !important; + } + } + .Dropdown__PopoverArrow-sc-1s7u5eb-1, + .Popover__PopoverArrow-sc-1x169li-3 { + fill: @surface2; + } + .StrokePicker__InnerDiv-sc-8widgm-4 { + background: @surface2; + } + } + .DropdownList__TriggerButton-sc-1hvvmg1-0, + .EmptyExplainer__StyledMaterialIcon-sc-1ixiesy-4 { + color: @accent-color; + } + + .ProfileAccountInfo__DashedGroup-sc-1nbrrm9-2 { + border-color: @overlay0; + } + + .BadgeCard__RootButton-sc-13976oo-0 { + &:hover, + &:focus, + &.selected { + .BadgeCard__BadgeLabelDiv-sc-13976oo-8 { + color: @accent-color; + } + .Card__RootDiv-sc-4gt2nj-0 { + border-color: @accent-color; + } + } + .BadgeCard__ProgressPercentSpan-sc-13976oo-7 { + color: @text; + } + } + .BadgeSidebar__RootDiv-sc-oi03p1-0 { + background: @surface0; + .SvgIconWrapper__SvgIconDiv-sc-1u203y2-0 { + svg path { + fill: @text; + } + &:hover { + background: @surface1; + } + } + .BadgeSidebar__ChallengeLevelsDiv-sc-oi03p1-10 { + border-color: @overlay0; + } + } + .BadgeCard__BadgeImage-sc-13976oo-5, + .BadgeSidebar__BadgeImage-sc-oi03p1-2 { + &[src*="responses"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + &[src*="formatives-assigned-submitted"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + .ProgressBar__ProgressDiv-sc-4qm1te-0 { + background: @overlay0; + .ProgressBar__ProgressBarDiv-sc-4qm1te-2 { + background: @accent-color; + } + } + .notification { + &.notification-success { + background: @green !important; + color: @contrast-accent-color !important; + } + } + .Tooltip__Content-sc-1k6bq57-0 { + background: @surface0; + color: @text; + .Tooltip__KeyboardShortcutContainerDiv-sc-1k6bq57-1 { + background: @surface1; + color: @text; + } + } + .Modal__Overlay-sc-1uf7odj-0 { + background: fade(@crust, 80%); + } + .Modal__Content-sc-1uf7odj-1 { + background: @base; + .modal-header, + .modal-footer { + border-color: @overlay0 !important; + } + .ModalHeader__Title-sc-1aoz840-1 { + color: @text; + } + .modal-footer { + background: @base; + } + .ModalHeader__CloseButton-sc-1aoz840-2 { + border-color: @overlay0; + background: @surface0; + &:enabled:hover { + background: @surface1 !important; + border-color: @accent-color; + } + } + .CopyablePracticeSetInfo__LinkText-sc-14zdsnw-3, + .CopyablePracticeSetInfo__ExplainerDiv-sc-14zdsnw-5 { + background: @surface0; + } + .ThemePreview__PrimaryColorDiv-sc-zh51j9-0[style*="outline"] { + &[style*="outline: rgb(255, 255, 255)"] { + outline-color: @text !important; + } + &[style*="outline: rgb(13, 100, 242)"] { + outline-color: @accent-color !important; + } + } + } + .ReactModal__Overlay { + background: fade(@crust, 80%); + .ReactModal__ActualContent { + background: @base !important; + .ModalBody-sc-1lg094f-0 > * { + color: @text !important; + &.ErrorExplainer__BodyDiv-sc-7nq4if-0 { + .material-icons-outlined { + color: @red; + } + .ErrorExplainer__TechnicalDetailsHeading-sc-7nq4if-3, + .ErrorExplainer__ErrorIdParagraph-sc-7nq4if-4 { + color: @subtext0; + } + } + &.Input__StyledInput-sc-1632reg-0 { + background: @surface0 !important; + &::placeholder { + color: @overlay2 !important; + } + &:focus { + border-color: @accent-color; + } + } + &.CookiePolicyModal__AccordionDiv-sc-dpnzx7-0 + .AccordionItem__ContainerDiv-sc-1aj05j4-0 { + &, + .AccordionItem__HeaderDiv-sc-1aj05j4-1, + .AccordionItem__BodyDiv-sc-1aj05j4-5 { + background: @surface0; + border-color: @overlay0; + } + .material-icons-outlined { + color: @text; + } + .CookiePolicyModal__BlueAlertText-sc-dpnzx7-5 { + color: @accent-color; + } + } + } + .ModalBody-sc-1lg094f-0:has(.Submit__ContentTitleH3-sc-1vceatk-1) + svg + path { + fill: @accent-color; + } + .ModalTitle { + background: @base; + } + .PracticeDispatchModalOptionLink__RootLink-sc-1wp7oro-0 { + background: @surface1 !important; + img { + &[src*="flashcard-preview"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + &[src*="match-preview"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + &[src*="quiz-preview"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + } + } + } + .NotificationCenterAlertListContainer__RootDiv-sc-1kyy25p-0 { + background: @surface2; + .FormativeNotificationsCard__HeaderDiv-sc-fv5hu9-1, + .QuestionNotificationRow__IndentedBorderDiv-sc-f7ccw5-1, + .QuestionNotificationRow__RootDiv-sc-f7ccw5-0 { + border-color: @overlay2; + } + .FormativeNotificationsCard__RootDiv-sc-fv5hu9-0 { + background: @surface2; + border-color: @overlay2; + &:hover { + background: @overlay0; + } + } + .QuestionNotificationRow__RootDiv-sc-f7ccw5-0:hover { + background: transparent; + } + .material-icons-outlined { + color: @text; + &:hover { + color: @accent-color; + } + } + } + .SectionCard__InactiveSectionIcon-sc-ir1v2v-3 { + svg { + path:nth-child(1) { + fill: @overlay0 !important; + } + path:nth-child(2), + path:nth-child(3) { + fill: @text !important; + } + } + } + .SectionDetail__Header-sc-1aifgaj-2 { + background: transparent; + } + + .FormativeStudentHeader__UpperDiv-sc-yw00ql-12 { + background: @crust !important; + color: @text; + &, + .FormativeStudentHeader__InfoItem-sc-yw00ql-7 { + border-color: @overlay0; + } + } + .FormativeStudentHeader__NavStrip-sc-yw00ql-11 { + .FormativeStudentHeader__ScrollableDiv-sc-yw00ql-9 { + &::-webkit-scrollbar-track { + background: @surface0 !important; + border-color: @surface0 !important; + } + &::-webkit-scrollbar-thumb { + background: @overlay0 !important; + border-color: @overlay0 !important; + } + } + background: @mantle; + border-color: @overlay0; + .selectedSection { + border-color: @accent-color; + } + .formative-nav-item { + &, + .formative-nav-item-icon { + color: @text; + } + .FormativeStudentNavItem__StyledMessageIcon-sc-i1u5ts-4 { + color: @accent-color; + } + &:hover, + &:focus { + background: @surface1; + color: @accent-color; + border-color: @accent-color; + } + .fxpwVv { + background-color: @green; + } + .hSVaRB { + background-color: @text; + } + .kBznqt { + background-color: @yellow; + } + .hfnlVy { + background-color: @red; + } + .bDcnFV { + background-color: @peach; + } + svg { + path { + stroke: @red; + } + } + } + } + .checkbox-root { + button { + background: @surface0; + border-color: @accent-color !important; + box-shadow: none !important; + } + &.checked button { + background: @accent-color !important; + } + .Checkbox__RadioCircleDiv-sc-1oy0ey9-3 { + background: @contrast-accent-color !important; + } + .Checkbox__IndicatorIcon-sc-1oy0ey9-5 { + color: @contrast-accent-color; + } + } + .FormativeUnavailableMessage__InnerDiv-sc-14kxg7t-1 { + border-color: @accent-color; + background-color: @surface0; + } + .FormativeItemViewable__RootDiv-sc-m0kwch-0, + .SectionDescription__SectionInformationCard-sc-nmaua7-0 { + background: @mantle; + .correct { + outline-color: @green !important; + background: color-mix(in srgb, @base, @green 25%) !important; + } + .incorrect { + outline-color: @red !important; + background: color-mix(in srgb, @base, @red 25%) !important; + } + &, + .withFunctionalizedViewable__LeftColumn-sc-1636o2h-2, + .withFunctionalizedViewable__RightColumn-sc-1636o2h-4 { + border-color: @overlay0; + } + .SectionDescription__DividerDiv-sc-nmaua7-1 { + border-color: @overlay0; + } + .ScoreCircle__RootDiv-sc-lj5glq-0 { + &[style*="rgb(32, 213, 171)"] { + background-color: @green !important; + .material-icons-outlined { + color: @contrast-accent-color !important; + } + } + &[style*="rgb(255, 222, 51)"] { + background-color: @yellow !important; + } + &[style*="rgb(255, 138, 51)"] { + background-color: @peach !important; + } + &[style*="rgb(255, 76, 77)"] { + background-color: @red !important; + .material-icons-outlined { + color: @contrast-accent-color !important; + } + } + border-color: @overlay2 !important; + } + .BlankOutput__FillableEntity-sc-15mzaww-3, + .BlankOutput__FillableNumericDiv-sc-15mzaww-2 { + outline-color: @accent-color; + color: @text; + background: @surface0; + .KatexOutput__RootDiv-sc-gu2jna-0 { + [style*="color: rgb(204, 0, 0)"] { + color: @red !important; + } + } + } + .match-table-grid-container table { + th, + tr, + td { + background: @surface0 !important; + border-color: @overlay0; + .checkbox-root button { + background: @surface1; + } + } + } + .TargetElementViewable__BoxDiv-sc-1cp2mml-1 { + background: @surface0; + border-color: @accent-color; + .TargetChoiceViewable__ContentDiv-sc-6nylj9-1 { + background: @surface1; + border-color: @overlay0; + } + .TargetElementViewable__AddSelectedChoiceButton-sc-1cp2mml-6 i { + background: @accent-color; + color: @contrast-accent-color; + } + } + .MatchingTable__Table-sc-1rhxmvo-1 { + &, + td, + tr { + border-color: @overlay0; + } + tr.isOver { + outline-color: @accent-color; + } + } + .ChoiceElementViewable__RootDiv-sc-viwu2x-0 { + background: @surface0; + border-color: @overlay0; + &:hover, + &.highlight { + border-color: @accent-color; + background: @surface1; + } + .ChoiceElementViewable__LabelRichText-sc-viwu2x-4 { + background: transparent; + color: @text; + } + .Button__StyledButton-sc-aum9f1-1, + i { + background: transparent !important; + } + } + .ChoiceElement__RootDiv-sc-1mbtxfk-1 { + background: transparent; + } + .ChoiceElement__StyledRawButton-sc-1mbtxfk-0 { + .ChoiceElement__LabelRichText-sc-1mbtxfk-3, + .material-icons-outlined { + background: transparent; + } + } + .ChoiceOptionViewable__RightSideDiv-sc-a2vwy6-2 { + border-color: @overlay0; + .ChoiceOptionViewable__StrickenOverlayDiv-sc-a2vwy6-7 { + background-image: repeating-linear-gradient( + 315deg, + transparent, + transparent 16px, + @text 16px, + @text 18px + ); + } + } + .InlineChoiceOutput__InlineChoiceOutputDiv-sc-1694w84-2 { + background: @surface0; + border-color: @accent-color; + } + .DrawingCardButton__RootButton-sc-u2qprg-1 { + border-color: @overlay0; + .DrawingCardButton__DrawingPreview-sc-u2qprg-3 { + background: rgb(245, 246, 248); + } + .DrawingCardButton__HoverDarkScrim-sc-u2qprg-2 { + background: fade(@crust, 75%); + border-radius: 0; + } + .DrawingCardButton__ShowYourWorkPseudoButtonDiv-sc-u2qprg-0 { + border-color: @overlay0; + color: @text; + background: @base; + } + .DrawingCardButton__IncompleteIndicatorDiv-sc-u2qprg-4 { + background: @yellow; + svg path { + fill: @contrast-accent-color; + } + } + &:hover .DrawingCardButton__ShowYourWorkPseudoButtonDiv-sc-u2qprg-0 { + background: @surface2; + border-color: @accent-color; + } + } + .DragAndDropImageDropLocation__DropLocationContainerDiv-sc-oq3fcx-1 { + &:hover { + .DragAndDropImageDropLocationPoint-sc-1v0z50f-0 { + background: @surface1; + border-color: @surface1; + } + .dropzone-tip::before { + background: @surface1; + } + } + .DragAndDropImageDropLocationPoint-sc-1v0z50f-0 { + background: @surface0; + border-color: @surface0; + } + .dropzone-tip::before { + background: @surface0; + } + .isOver .dropzone { + background: @surface1; + .dropzone-number { + background: @surface2 !important; + } + } + .dropzone { + &:hover, + &.selected { + background: @surface1; + .dropzone-number { + background: @surface2 !important; + } + } + border-color: @accent-color !important; + background: @surface0; + .dropzone-number { + background: @surface1; + } + } + } + .DragAndDropChoice__RootDiv-sc-1wzeg1h-3 { + background: @surface0; + border-color: @overlay0; + .Button__StyledButton-sc-aum9f1-1, + .DragAndDropChoice__DragIcon-sc-1wzeg1h-1 { + background: transparent; + } + &.selected { + background: @surface1; + } + } + .DragAndDropDropzoneOutput__RootDiv-sc-1is7exh-0 { + background: @surface0; + border-color: @accent-color; + &.hasAnswer { + border-color: @overlay0; + } + } + .AnswerCorrectnessIndicator__CircleDiv-sc-18hnk99-1 { + &.correct { + background: @green; + } + .material-icons-outlined { + color: @contrast-accent-color; + } + } + .ShortAnswerViewableDetails__InputAutosizeTextarea-sc-1ugk4gk-0 { + background: @surface0; + border-color: @overlay0; + color: @text; + } + .ExpandableAccordionHeader__RootButton-sc-cu02pz-0 { + background: transparent; + } + .GraphViewableDetails__GraphAndControlsDiv-sc-13yx2r4-2 { + .VerticalButton__StyledButton-sc-1h2we7r-2 { + &:disabled { + i, + span { + color: @subtext0; + } + } + &:not(:disabled):hover, + &:not(:disabled):focus-within { + div { + background: @surface0; + } + span { + color: @accent-color; + } + } + } + .Graph__ContainerDiv-sc-1y56z00-0 { + border-color: @overlay0; + background: @surface0; + svg { + line[stroke="rgb(4,28,68)"], + marker[stroke="rgb(4,28,68)"] { + fill: @subtext1; + stroke: @subtext1; + } + path[stroke="rgb(80,95,121)"] { + fill: @subtext0; + stroke: @subtext0; + } + path[stroke="rgb(192,197,207)"] { + fill: @overlay0; + stroke: @overlay0; + } + path[stroke="rgb(13,100,242)"] { + stroke: @blue; + fill: @blue; + } + text { + stroke: @surface0 !important; + fill: @text; + } + ellipse[fill="rgb(13,100,242)"] { + stroke: @surface0; + fill: @blue; + } + } + .Coords__CoordsDiv-sc-1fj077e-1 { + background: @surface2; + } + } + } + } + .MediaSlider__RootSpan-sc-1gz67jn-0 { + .TrimmerMarker__TooltipDiv-sc-1f17hi4-1 { + background: @surface2; + color: @text; + } + .Thumb__RootSpan-sc-yv6w5k-0 { + background: @accent-color; + z-index: 2; + } + .Segment__SegmentSpan-sc-r0cy9o-0 { + background: @surface0 !important; + } + .TrimmerMarker__RootSpan-sc-1f17hi4-0 { + background: @overlay0; + z-index: 1; + } + } + .slider { + background: @surface1; + .thumb { + background: @overlay0; + color: @text; + } + } + .ExpandedDrawing__BodyDiv-sc-cz2rcw-0 { + .DrawingToolbar__RootDiv-sc-2xuxy3-0 { + &, + .DrawingToolbar__ToolDiv-sc-2xuxy3-3 { + background: @surface0; + color: @text; + } + .DrawingToolbar__ToolDiv-sc-2xuxy3-3:hover { + &, + .svg-icons, + .material-icons-outlined { + color: @accent-color; + } + } + .selected { + &::after { + background: @accent-color; + } + color: @accent-color; + } + } + .DrawingSidebar__ExpandedAnswerDiv-sc-1hvcy70-0 { + background: @mantle; + } + .DrawingSidebar__SidebarTopExplainer-sc-1hvcy70-1 { + background: @base; + border-color: @overlay0; + color: @text; + .DrawingSidebar__StyledSvgIcon-sc-1hvcy70-5 { + color: @text; + } + } + .SidePicker__RootDiv-sc-xie0qr-0 { + background: @base; + border-color: @overlay0; + } + } + .MathLiveInput__RootDiv-sc-tki2b-0 { + .keyboard-button-wrapper .svg-icons svg path { + fill: @accent-color !important; + } + color: @text; + border-color: @overlay0; + background: @surface0; + &:focus-within, + &:hover { + border-color: @accent-color; + } + &.invalid { + color: @red; + } + math-field { + --caret-color: @accent-color; + --selection-background-color: fade(@accent-color, 50%); + --selection-color: @text; + --correct-color: @text; + --incorrect-color: @red; + --latex-color: @blue; + --placeholder-color: @blue; + } + .ML__keyboard--plate { + --keyboard-text: @text; + --keyboard-text-active: @accent-color; + --keyboard-background: @surface0; + --keycap-background: @surface1; + --keycap-background-active: @surface2; + --keycap-background-border: @overlay0; + --keycap-background-border-bottom: @overlay0; + --keycap-text: @text; + --keycap-secondary-text: @subtext0; + --keycap-text-active: @accent-color; + --keycap-modifier-background: @surface2; + --keycap-modifier-background-active: @overlay0; + --keycap-modifier-border: @overlay1; + --keycap-modifier-border-bottom: @overlay1; + + [data-tooltip]::after { + background-color: @surface2; + color: @text; + } + border-color: @overlay0 !important; + } + } + .ML__keyboard.alternate-keys { + --keyboard-alternate-background: @surface2; + --keyboard-alternate-background-active: @overlay0; + --keyboard-alternate-text: @text; + --keyboard-alternate-text-active: @text; + } + + #mathlive-popover-panel { + background: @surface2; + color: @text; + box-shadow: 0 14px 28px fade(@crust, 25%) 0 10px 10px fade(@crust, 22%); + li:hover { + background: @overlay0; + } + &::after { + border-color: @surface2 transparent; + } + } + + .FullPointsAnimation__AbsoluteContainerDiv-sc-mzm76r-0, + .ScoreCircle__LottieWrapperDiv-sc-lj5glq-1, + .Summary__SummaryDiv-sc-1ofq6fd-0, + .MatchingSessionSummary__CheckmarkContainerDiv-sc-d3unim-2 { + svg { + path[fill="rgb(32,213,171)"], + path[fill="rgb(33,214,170)"] { + fill: @green !important; + } + path[fill="rgb(255,138,51)"] { + fill: @peach !important; + } + path[fill="rgb(255,222,51)"] { + fill: @yellow !important; + } + path[fill="rgb(255,76,77)"], + path[fill="rgb(255,76,76)"] { + fill: @red !important; + } + path[fill="rgb(201,68,204)"] { + fill: @mauve !important; + } + path[fill="rgb(0,165,249)"] { + fill: @blue !important; + } + path[fill="rgb(255,255,255)"], + path[fill="rgb(242,242,242)"] { + fill: @contrast-accent-color !important; + } + + path[stroke="rgb(32,213,171)"], + path[stroke="rgb(33,214,170)"] { + stroke: @green !important; + } + path[stroke="rgb(255,138,51)"] { + stroke: @peach !important; + } + path[stroke="rgb(255,222,51)"] { + stroke: @yellow !important; + } + path[stroke="rgb(255,76,77)"], + path[stroke="rgb(255,76,76)"] { + stroke: @red !important; + } + path[stroke="rgb(201,68,204)"] { + stroke: @mauve !important; + } + path[stroke="rgb(0,165,249)"] { + stroke: @blue !important; + } + path[stroke="rgb(255,255,255)"], + path[stroke="rgb(242,242,242)"] { + stroke: @contrast-accent-color !important; + } + } + } + + .Elements__JoinLayoutDiv-sc-1qtb2ho-0 { + background: @base; + .SplitColumnLayout__Card-sc-4mcl10-0 { + background: @surface0; + .Login__ContentDiv-sc-5w2jun-0, + .Login__LoginServiceButtonsRowDiv-sc-5w2jun-3 { + .Button__StyledButton-sc-aum9f1-1 { + background: @surface1 !important; + &:hover { + background: @surface2 !important; + } + } + .material-icons-outlined { + color: @text; + } + .NewselaServiceLoginButton__QuestionTextDiv-sc-mk13mj-1 { + color: @text; + } + .NewselaServiceLoginButton__ActionDiv-sc-mk13mj-2 { + color: @accent-color; + } + } + } + .JoinQuickCode__StyledLink-sc-1uhfett-2, + .CallToActionLink__StyledLink-sc-yuiy65-0, + .Login__ForgotLink-sc-5w2jun-1 { + color: @accent-color; + } + .react-code-input { + input { + background: @surface1; + border-color: @overlay0; + &:focus-within { + border-color: @accent-color; + } + } + &:not(:focus-within).empty [data-id="0"] { + border-color: @accent-color; + } + } + .JoinQuickCode__StyledPrimaryButton-sc-1uhfett-5 { + background: @surface1; + &:hover { + background: @surface2; + } + } + .ValidatedInputNew__StyledInput-sc-18vdili-4 { + background: @surface1; + border-color: @overlay0 !important; + color: @text; + } + } + .FormativeStudentFooter__BottomDiv-sc-6tj89c-3 { + border-color: @overlay0; + } + .StudentFormativeStatus__RootDiv-sc-y86tx8-1 { + &.bQdPlK { + background: @green; + } + &, + .material-icons-outlined { + color: @contrast-accent-color; + } + } + .FloatingToolButton__FloatingButton-sc-1gy4xsl-0 { + background: @overlay0; + &:hover, + &:enabled:hover, + &:focus, + &:enabled:focus { + background: @overlay1; + } + .material-icons-outlined { + color: @accent-color; + } + } + .PracticeSet__StyledHeader-sc-1wup6tb-6 { + background: @surface0; + border-color: @overlay0; + input.ReactiveTextInput__StyledInput-sc-go3drs-2 { + color: @text !important; + &::placeholder, + &:focus::placeholder { + color: @subtext0 !important; + } + } + .HeaderBackLink__TertiaryButtonLink-sc-1vx1tro-0, + .Button__StyledButton-sc-aum9f1-1 { + background: @surface1 !important; + color: @accent-color !important; + &:not([disabled]):hover { + background: @surface2; + } + } + .PracticeSet__DividerDiv-sc-1wup6tb-4 { + background: @overlay0; + } + } + .PracticeSet__ContentDiv-sc-1wup6tb-1 { + .AutoSizeInput__StyledInput-sc-ops4en-2 { + color: @text; + background: transparent !important; + + &:focus { + border-color: @subtext0; + } + } + .FlashcardSide__RootDiv-sc-amoro3-1 { + background: @surface0; + color: @text; + } + .PracticeItemEditor__HeaderDiv-sc-1jko4q4-0 { + background: @surface1; + } + .PracticeItemEditor__ContentDiv-sc-1jko4q4-2 { + background: @surface0; + .TextareaCard__RootDiv-sc-qx9s19-0 { + background: @surface1; + border-color: @overlay0; + textarea { + color: @text; + } + } + .MediaButton__StyledButton-sc-12h2vjb-0 { + background: @surface1; + border-color: @overlay0; + color: @text; + &:hover { + background: @surface2; + color: @accent-color; + } + } + } + } + .Banner__Root-sc-yf4o5r-0 { + &.error { + .material-icons-outlined { + color: @red; + } + border-color: @red; + } + background: @surface2; + color: @text; + } + .FileUploadButton__DropZoneDiv-sc-88u8tg-2 { + background: @surface0; + border-color: @accent-color; + .material-icons-outlined { + color: @accent-color; + } + } + .DividerWord__LineDiv-sc-59xl7-1 { + background: @overlay0; + } + .DividerWord__WordDiv-sc-59xl7-2 { + color: @text; + } + .MinimalFormativeStudentHeader__RootDiv-sc-14rcnaq-0 { + border-color: @overlay0; + } + .FormativeItemViewable__FeedbackMessagesListDiv-sc-m0kwch-1 { + .FeedbackMessagesList__MessagesListDiv-sc-9o5dsw-0 { + background: @surface1; + .FeedbackMessagesList__EmptyDiv-sc-9o5dsw-1 svg { + path:nth-child(1) { + fill: @yellow; + } + path:nth-child(2) { + fill: @green; + } + path:nth-child(3) { + fill: @mauve; + } + path:nth-child(4) { + stroke: @peach; + } + path:nth-child(5) { + stroke: @peach; + } + } + } + .FeedbackMessage__FeedbackBoxDiv-sc-q3ku9d-2 { + background: @surface2; + border-color: @overlay2; + } + .FeedbackMessageComposer__RootDiv-sc-vs8711-0 { + border-color: @overlay0; + .FeedbackMessageComposer__RichTextContainerDiv-sc-vs8711-3 { + border-color: @overlay1; + color: @text; + .public-DraftEditorPlaceholder-inner { + color: @subtext0; + } + } + } + } + .Toolbar__RootDiv-sc-1e3lohg-0 { + border-color: @overlay0; + box-shadow: @overlay0 0 1px 3px 0; + &::before, + &::after { + border-color: @surface2 transparent transparent; + } + &, + .buttonWrapper button { + background: @surface2; + } + .buttonWrapper button { + &:hover { + background: @overlay0; + } + &.active { + color: @accent-color; + svg { + fill: @accent-color; + } + } + svg { + fill: @text; + } + color: @text; + } + } + .TeacherPacedStart__RootDiv-sc-1f4f5sd-0 { + background: @surface0 !important; + } + .FeedbackMessageIcon__UnreadJewelDiv-sc-1x1yblc-1 { + background: @red; + box-shadow: @text 0 0 0 2px; + } + .CookiePolicyBanner__ContainerDiv-sc-1p3fxjn-1 { + background: @surface0; + border-color: @accent-color; + .Button__StyledButton-sc-aum9f1-1 { + background: @surface1; + &:hover { + background: @surface2; + } + } + } + .GameContainer__RootDiv-sc-1c3jzzv-0 { + background: @base !important; + .Timer__RootDiv-sc-bbbpy2-0 { + background: @surface1; + &, + i { + color: @text; + } + } + .Header__HeaderDiv-sc-327vcg-0 { + background: @surface0; + border-color: @overlay0; + .HeaderBackLink__TertiaryButtonLink-sc-1vx1tro-0, + .Button__StyledButton-sc-aum9f1-1 { + background: @surface1; + color: @accent-color; + &:hover { + background: @surface2; + } + } + } + .ThemePicker__ToggleItem-sc-juof75-3 { + div { + outline-color: @text !important; + } + &[aria-checked="true"], + &[aria-checked="true"] div { + outline-color: @accent-color !important; + } + } + .TitleCard__StartButton-sc-xz0ejb-1 { + background: @accent-color; + color: @base; + } + .QuizSession__BodyDiv-sc-4aco0-0 { + .QuizSession__DividerDiv-sc-4aco0-4 { + background: @overlay0; + } + .AnswerChoiceCard__CardButton-sc-lns4c-0 { + &::before { + box-shadow: @overlay0 0 0 0 1px; + } + &.correct::before { + animation: 1.2s ease 0s 1 normal forwards running + catppuccin-formative-practiceset-quiz-correct; + } + &.incorrect::before { + animation: 1.2s ease 0s 1 normal forwards running + catppuccin-formative-practiceset-quiz-incorrect; + } + .AnswerChoiceCard__CorrectnessPill-sc-lns4c-2 { + &.correct { + background: @green; + i, + span { + color: @contrast-accent-color; + } + } + background: @red; + i, + span { + color: @contrast-accent-color; + } + } + .AnswerChoiceCard__CorrectnessOverlay-sc-lns4c-3 { + &.correct { + background: @green; + } + i { + color: @contrast-accent-color !important; + } + background: @red; + } + } + } + .MatchingSessionSummary__RootDiv-sc-d3unim-0, + .MatchingSessionSummary__CheckmarkOverlayDiv-sc-d3unim-1 { + background: @base; + .Glow__RootDiv-sc-1c8wp5s-0 { + background: @accent-color !important; + color: @contrast-accent-color; + } + .MatchingSessionSummary__SessionDiv-sc-d3unim-13 { + border-color: @overlay0; + &.highlight { + background: fade(@yellow, 25%); + } + } + } + .LatestPerformances__PerformanceDiv-sc-g3qin-2, + .Leaderboard__PerformanceDiv-sc-152arb5-3 { + border-color: @overlay0; + } + .MatchingSession__ContentDiv-sc-edrizy-0 { + .ProgressBar__RootDiv-sc-ly2f4w-0 { + .Glow__FlashDiv-sc-1c8wp5s-1 { + background: transparent; + } + .ProgressBar__PointsContainerSpan-sc-ly2f4w-3 + .Glow__RootDiv-sc-1c8wp5s-0 { + background: @surface0 !important; + color: @text; + } + .ProgressBar__BarDiv-sc-ly2f4w-1 { + background: @surface0; + border-color: @overlay0; + .Glow__RootDiv-sc-1c8wp5s-0 { + background: @accent-color !important; + } + } + } + } + .PracticeSessionCard__CardButton-sc-wwcpxc-0 { + border-color: @overlay0; + } + .FlashcardSide__RootDiv-sc-amoro3-1 { + background: @surface0; + border-color: @overlay0; + color: @text; + } + .StreakProgressBar__Progress-sc-1b8tyg3-2 { + background: @surface0; + .StreakProgressBar__ProgressBarDiv-sc-1b8tyg3-3 { + background: @accent-color; + } + } + .StreakProgressBar__StyledSvgIcon-sc-1b8tyg3-4 { + svg path { + fill: @yellow; + stroke: @contrast-accent-color; + } + &.visible { + animation: 0.5s ease 0s 1 normal none running + catppuccin-formative-practiceset-quiz-streak; + } + } + .PracticeSession__AnswerButton-sc-1t2vn9a-3 { + color: @contrast-accent-color; + &.red { + background: @red; + } + &.green { + background: @green; + } + } + } + .PillToggleGroup__Item-sc-12fkyq8-1 { + &[aria-checked="true"] { + background: @surface0; + color: @accent-color; + } + &:hover { + background: @surface0; + } + border-color: @overlay0; + color: @text; + } + .FeedbackButton__StyledButton-sc-1b7u8ss-0 { + background: @surface2; + i { + color: @text; + } + } + @keyframes catppuccin-formative-practiceset-quiz-correct { + 0% { + box-shadow: @overlay0 0 0 0 1px; + } + 70% { + box-shadow: @overlay0 0 0 0 1px; + } + 100% { + box-shadow: @green 0 0 0 3px; + } + } + @keyframes catppuccin-formative-practiceset-quiz-incorrect { + 0% { + box-shadow: @overlay0 0 0 0 1px; + } + 70% { + box-shadow: @overlay0 0 0 0 1px; + } + 100% { + box-shadow: @red 0 0 0 3px; + } + } + @keyframes catppuccin-formative-practiceset-quiz-streak { + 0% { + filter: drop-shadow(fade(@yellow, 80) 0 0 0); + transform: scale(0.8); + } + 50% { + filter: drop-shadow(fade(@yellow, 80) 0 0 12px); + transform: scale(1.3); + } + 100% { + filter: drop-shadow(fade(@yellow, 80) 0 0 0); + transform: scale(1); + } + } + .Shelf__RootDiv-sc-5aism7-0 { + background: @surface0; + .ShelfTile__RootButton-sc-1oc4c00-0 { + background: @surface1; + &:hover { + background: @surface2; + box-shadow: @accent-color 0 0 0 1px; + .label { + color: @accent-color; + } + } + .ShelfTile__IconDiv-sc-1oc4c00-1 { + background: @accent-color !important; + i { + color: @contrast-accent-color; + } + } + } + } + img.spinner { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + .NoFormatives__StyledImg-sc-1v9g5eg-4 { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + .PracticeSetGrid__EmptyStateDiv-sc-1yuxflk-1 img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/freedesktop/catppuccin.user.css b/styles/freedesktop/catppuccin.user.css index 767049583f..6b4db87712 100644 --- a/styles/freedesktop/catppuccin.user.css +++ b/styles/freedesktop/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name freedesktop.org Catppuccin +@name freedesktop.org Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/freedesktop @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/freedesktop -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/freedesktop/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/freedesktop/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Afreedesktop @description Soothing pastel theme for freedesktop.org @author Catppuccin @@ -13,137 +13,4 @@ @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('www.freedesktop.org'), domain('specifications.freedesktop.org') { - @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; - color: @text; - } - - #content h1, - #content h2, - #content h3 { - color: @accent-color; - } - - .pageheader { - background-color: @mantle; - border-color: @crust; - color: @subtext1; - } - - .pageheader .actions ul li a, - input[type="submit"] { - background-color: transparent; - color: @accent-color; - border-color: @accent-color; - } - - input#searchbox { - color: @subtext1; - background-color: @overlay0; - border-color: @overlay1; - box-shadow: none; - &:focus { - border-color: @accent-color; - outline-color: none; - outline-style: none; - } - } - - .headerpath .title { - color: @subtext1; - } - - a:link { - color: @blue; - } - - a:visited { - color: @lavender; - } - code { - background-color: @crust; - color: @text; - } - - pre { - background-color: @mantle; - border-color: @surface0; - - code { - background-color: @mantle; - color: @text; - } - } - - hr { - border-style: solid; - border-color: @surface1; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/freedesktop/catppuccin.user.less b/styles/freedesktop/catppuccin.user.less new file mode 100644 index 0000000000..58f7d12544 --- /dev/null +++ b/styles/freedesktop/catppuccin.user.less @@ -0,0 +1,148 @@ +/* ==UserStyle== +@name freedesktop.org Catppuccin +@namespace github.com/catppuccin/userstyles/styles/freedesktop +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/freedesktop +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/freedesktop/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Afreedesktop +@description Soothing pastel theme for freedesktop.org +@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("www.freedesktop.org"), + domain("specifications.freedesktop.org") { + @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; + color: @text; + } + + #content h1, + #content h2, + #content h3 { + color: @accent-color; + } + + .pageheader { + background-color: @mantle; + border-color: @crust; + color: @subtext1; + } + + .pageheader .actions ul li a, + input[type="submit"] { + background-color: transparent; + color: @accent-color; + border-color: @accent-color; + } + + input#searchbox { + color: @subtext1; + background-color: @overlay0; + border-color: @overlay1; + box-shadow: none; + &:focus { + border-color: @accent-color; + outline-color: none; + outline-style: none; + } + } + + .headerpath .title { + color: @subtext1; + } + + a:link { + color: @blue; + } + + a:visited { + color: @lavender; + } + code { + background-color: @crust; + color: @text; + } + + pre { + background-color: @mantle; + border-color: @surface0; + + code { + background-color: @mantle; + color: @text; + } + } + + hr { + border-style: solid; + border-color: @surface1; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/ghostty.org/catppuccin.user.css b/styles/ghostty.org/catppuccin.user.css index ae29231d5b..9773dae6d6 100644 --- a/styles/ghostty.org/catppuccin.user.css +++ b/styles/ghostty.org/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Ghostty.org Catppuccin +@name Ghostty.org Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/ghostty.org @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ghostty.org -@version 0.0.1 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ghostty.org/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ghostty.org/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aghostty.org @description Soothing pastel theme for Ghostty.org @author Catppuccin @@ -13,140 +13,4 @@ @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('ghostty.org') { - @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); - - @media (prefers-color-scheme: light) { - :root, - body { - #catppuccin(@lightFlavor, @accentColor); - } - } - @media (prefers-color-scheme: dark) { - :root, - body { - #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]; - - --ctp-rosewater: @rosewater; - --ctp-flamingo: @flamingo; - --ctp-pink: @pink; - --ctp-mauve: @mauve; - --ctp-red: @red; - --ctp-maroon: @maroon; - --ctp-peach: @peach; - --ctp-yellow: @yellow; - --ctp-green: @green; - --ctp-teal: @teal; - --ctp-sky: @sky; - --ctp-sapphire: @sapphire; - --ctp-blue: @blue; - --ctp-lavender: @lavender; - --ctp-text: @text; - --ctp-subtext1: @subtext1; - --ctp-subtext0: @subtext0; - --ctp-overlay2: @overlay2; - --ctp-overlay1: @overlay1; - --ctp-overlay0: @overlay0; - --ctp-surface2: @surface2; - --ctp-surface1: @surface1; - --ctp-surface0: @surface0; - --ctp-base: @base; - --ctp-mantle: @mantle; - --ctp-crust: @crust; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - --brand-color: @accent-color; - --brand-color-hsl: #hslify(@accent-color) []; - --gray-0: @base; - --gray-1: @surface0; - --gray-2: @surface1; - --gray-3: @overlay1; - --gray-4: @subtext0; - --gray-5: @subtext1; - --gray-6: @subtext1; - --gray-7: @subtext1; - --gray-8: @text; - --gray-9: @text; - --black: @crust; - --white: @text; - - --callout-note: @blue; - --callout-tip: @green; - --callout-important: @mauve; - --callout-warning: @yellow; - --callout-caution: @red; - - [class*="Link_buttonLink"]:hover, - ul [class*="NavTree_active"] { - color: @crust !important; - } - - img[alt="Ghostty"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } -} - -#hslify(@color) { - @raw: e( - %("%s, %s%, %s%", hue(@color), saturation(@color), lightness(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/ghostty.org/catppuccin.user.less b/styles/ghostty.org/catppuccin.user.less new file mode 100644 index 0000000000..54d04a0068 --- /dev/null +++ b/styles/ghostty.org/catppuccin.user.less @@ -0,0 +1,150 @@ +/* ==UserStyle== +@name Ghostty.org Catppuccin +@namespace github.com/catppuccin/userstyles/styles/ghostty.org +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ghostty.org +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ghostty.org/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aghostty.org +@description Soothing pastel theme for Ghostty.org +@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("ghostty.org") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + + @media (prefers-color-scheme: light) { + :root, + body { + #catppuccin(@lightFlavor, @accentColor); + } + } + @media (prefers-color-scheme: dark) { + :root, + body { + #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]; + + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + --brand-color: @accent-color; + --brand-color-hsl: #hslify(@accent-color)[]; + --gray-0: @base; + --gray-1: @surface0; + --gray-2: @surface1; + --gray-3: @overlay1; + --gray-4: @subtext0; + --gray-5: @subtext1; + --gray-6: @subtext1; + --gray-7: @subtext1; + --gray-8: @text; + --gray-9: @text; + --black: @crust; + --white: @text; + + --callout-note: @blue; + --callout-tip: @green; + --callout-important: @mauve; + --callout-warning: @yellow; + --callout-caution: @red; + + [class*="Link_buttonLink"]:hover, + ul [class*="NavTree_active"] { + color: @crust !important; + } + + img[alt="Ghostty"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } +} + +#hslify(@color) { + @raw: e( + %("%s, %s%, %s%", hue(@color), saturation(@color), lightness(@color)) + ); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/github/catppuccin.user.css b/styles/github/catppuccin.user.css index a9aba01a04..404e4233e9 100644 --- a/styles/github/catppuccin.user.css +++ b/styles/github/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name GitHub Catppuccin +@name GitHub Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/github @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/github -@version 2024.12.28.2 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/github/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/github/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agithub @description Soothing pastel theme for GitHub @author Catppuccin @@ -13,903 +13,4 @@ @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 regexp("https:\/\/(gist\.)*github\.com(?!((\/.+?\/.+?\/commit\/[A-Fa-f0-9]+\.(patch|diff)$)|\/home$|\/features($|\/.*)|\/marketplace($|\?.*|\/.*)|\/organizations\/plan)).*$"), url-prefix("https://viewscreen.githubusercontent.com/diff/img") -{ - [data-color-mode="auto"] { - @media (prefers-color-scheme: light) { - &[data-light-theme="light"] { - #catppuccin(@lightFlavor, @accentColor); - } - &[data-light-theme="dark"] { - #catppuccin(@darkFlavor, @accentColor); - } - } - - @media (prefers-color-scheme: dark) { - &[data-dark-theme="light"] { - #catppuccin(@lightFlavor, @accentColor); - } - &[data-dark-theme="dark"] { - #catppuccin(@darkFlavor, @accentColor); - } - } - } - [data-color-mode="light"][data-light-theme="dark"], - [data-color-mode="dark"][data-dark-theme="dark"] { - #catppuccin(@darkFlavor, @accentColor); - } - [data-color-mode="light"][data-light-theme="light"], - [data-color-mode="dark"][data-dark-theme="light"] { - #catppuccin(@lightFlavor, @accentColor); - } - - html:not([data-light-theme="light"], [data-light-theme="dark"]) - body:not(.logged-out)::after, - html:not([data-dark-theme="dark"], [data-dark-theme="light"]) - body:not(.logged-out)::after { - position: fixed; - top: 0; - left: 0; - padding: 1rem; - margin: 1rem; - border-radius: 0.5rem; - max-width: 40ch; - background-color: var(--color-danger-fg); - color: var(--color-header-bg); - content: "Unsupported GitHub theme detected! Please switch to the default light/dark theme via the GitHub Appearance settings to get the best experience for the Catppuccin GitHub userstyle."; - z-index: 9999; - } - - #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; - } - } - .cm-placeholder { - color: @subtext0; - } - - accent-color: @accent-color; - color: @text; - - --color-social-reaction-bg-reacted-hover: fade(@accent-color, 30%); - --color-notifications-button-hover-bg: fade(@accent-color, 60%); - --color-workflow-card-header-shadow: rgba(27, 31, 35, 0.04); - --color-icon-directory: var(--fgColor-muted, var(--color-fg-muted)); - --color-calendar-halloween-graph-day-L1-bg: fadeout( - @accent-color, - 60% - ) !important; - --color-calendar-halloween-graph-day-L2-bg: fadeout( - @accent-color, - 40% - ) !important; - --color-calendar-halloween-graph-day-L3-bg: fadeout( - @accent-color, - 20% - ) !important; - --color-calendar-halloween-graph-day-L4-bg: @accent-color !important; - --color-calendar-winter-graph-day-L1-bg: fadeout( - @accent-color, - 60% - ) !important; - --color-calendar-winter-graph-day-L2-bg: fadeout( - @accent-color, - 40% - ) !important; - --color-calendar-winter-graph-day-L3-bg: fadeout( - @accent-color, - 20% - ) !important; - --color-calendar-winter-graph-day-L4-bg: @accent-color !important; - --color-calendar-graph-day-bg: @surface0 !important; - --color-calendar-graph-day-border: transparent !important; - --color-calendar-graph-day-L1-bg: fadeout(@accent-color, 60%) !important; - --color-calendar-graph-day-L2-bg: fadeout(@accent-color, 40%) !important; - --color-calendar-graph-day-L3-bg: fadeout(@accent-color, 20%) !important; - --color-calendar-graph-day-L4-bg: @accent-color !important; - --color-calendar-graph-day-L2-border: transparent !important; - --color-calendar-graph-day-L3-border: transparent !important; - --color-calendar-graph-day-L4-border: transparent !important; - --color-user-mention-fg: @accent-color; - --color-user-mention-bg: fade(@accent-color, 30%); - --color-dashboard-feed-bg: var(--color-scale-gray-9); - --color-mktg-btn-shadow-outline: rgba(255, 255, 255, 0.25) 0 0 0 1px inset; - --color-marketing-icon-secondary: var(--color-scale-blue-5); - --color-project-header-bg: var(--color-scale-gray-9); - --color-project-sidebar-bg: var(--color-scale-gray-8); - --color-project-gradient-in: var(--color-scale-gray-8); - --color-project-gradient-out: rgba(22, 27, 34, 0); - --color-diff-blob-selected-line-highlight-mix-blend-mode: screen; - --topicTag-borderColor: #0000; - --highlight-neutral-bgColor: fade(@yellow, 30%); - --page-header-bgColor: @crust; - --diffBlob-additionNum-bgColor: fadeout(@green, 70%); - --diffBlob-additionNum-fgColor: @text; - --diffBlob-additionLine-bgColor: fadeout(@green, 85%); - --diffBlob-additionWord-bgColor: fadeout(@green, 70%); - --diffBlob-additionWord-fgColor: @text; - --diffBlob-deletionNum-bgColor: fadeout(@red, 70%); - --diffBlob-deletionNum-fgColor: @text; - --diffBlob-deletionLine-bgColor: fadeout(@red, 85%); - --diffBlob-deletionWord-bgColor: fadeout(@red, 70%); - --diffBlob-deletionWord-fgColor: @text; - --diffBlob-hunkNum-bgColor-rest: fadeout(@accent-color, 60%); - --diffBlob-hunkNum-bgColor-hover: fade(@accent-color, 75%); - --diffBlob-hunkLine-bgColor: fadeout(@accent-color, 75%); - --diffBlob-expander-iconColor: @subtext0; - --diffBlob-emptyNum-bgColor: @mantle; - --diffBlob-emptyLine-bgColor: @mantle; - --codeMirror-fgColor: @text; - --codeMirror-bgColor: @base; - --codeMirror-gutters-bgColor: @base; - --codeMirror-gutterMarker-fgColor-default: @base; - --codeMirror-gutterMarker-fgColor-muted: @overlay0; - --codeMirror-lineNumber-fgColor: @overlay1; - --codeMirror-cursor-fgColor: @text; - --codeMirror-selection-bgColor: #388bfd66; - --codeMirror-activeline-bgColor: #6e768166; - --codeMirror-matchingBracket-fgColor: @text; - --codeMirror-lines-bgColor: @base; - --codeMirror-syntax-fgColor-comment: @overlay2; - --codeMirror-syntax-fgColor-constant: @blue; - --codeMirror-syntax-fgColor-entity: @blue; - --codeMirror-syntax-fgColor-keyword: @mauve; - --codeMirror-syntax-fgColor-storage: @peach; - --codeMirror-syntax-fgColor-string: @green; - --codeMirror-syntax-fgColor-support: #79c0ff; - --codeMirror-syntax-fgColor-variable: @peach; - --header-fgColor-default: @text; - --header-fgColor-logo: @text; - --header-bgColor: @crust; - --header-borderColor-divider: #8b949e; - --headerSearch-bgColor: @mantle; - --headerSearch-borderColor: @surface0; - --avatar-bgColor: fade(@text, 26%); - --avatar-borderColor: @surface0; - --avatar-shadow: 0px 0px 0px 2px #0d1117; - --avatarStack-fade-bgColor-default: @surface1; - --avatarStack-fade-bgColor-muted: #21262d; - --control-bgColor-rest: @red; - --control-bgColor-hover: #292e36; - --control-bgColor-active: @surface1; - --control-bgColor-disabled: fade(@mantle, 60%); - --control-bgColor-selected: #161b22; - --control-fgColor-rest: @text; - --control-fgColor-placeholder: #484f58; - --control-fgColor-disabled: fade(@subtext0, 70%); - --control-borderColor-rest: @surface1; - --control-borderColor-emphasis: #666e79; - --control-borderColor-disabled: fade(@surface1, 75%); - --control-borderColor-selected: #f0f6fc; - --control-borderColor-success: @green; - --control-borderColor-danger: @red; - --control-borderColor-warning: @yellow; - --control-iconColor-rest: #848d97; - --control-transparent-bgColor-rest: #0000; - --control-transparent-bgColor-hover: fade(@surface2, 20%); - --control-transparent-bgColor-active: fade(@overlay0, 50%); - --control-transparent-bgColor-disabled: #21262db3; - --control-transparent-bgColor-selected: #b1bac414; - --control-transparent-borderColor-rest: #0000; - --control-transparent-borderColor-hover: #0000; - --control-transparent-borderColor-active: #0000; - --control-danger-fgColor-rest: @red; - --control-danger-fgColor-hover: @crust; - --control-danger-bgColor-hover: fade(@red, 80%); - --control-danger-bgColor-active: @red; - --control-checked-bgColor-rest: @accent-color; - --control-checked-bgColor-hover: lighten(@accent-color, 5%); - --control-checked-bgColor-active: lighten(@accent-color, 5%); - --control-checked-bgColor-disabled: #6e7681; - --control-checked-fgColor-rest: @crust; - --control-checked-fgColor-disabled: #010409; - --control-checked-borderColor-rest: @accent-color; - --control-checked-borderColor-hover: @accent-color; - --control-checked-borderColor-active: @accent-color; - --control-checked-borderColor-disabled: @surface0; - --controlTrack-bgColor-rest: @surface0; - --controlTrack-bgColor-hover: @surface1; - --controlTrack-bgColor-active: @surface2; - --controlTrack-bgColor-disabled: #6e7681; - --controlTrack-fgColor-rest: #848d97; - --controlTrack-fgColor-disabled: @text; - --controlTrack-borderColor-rest: #0000; - --controlTrack-borderColor-disabled: #6e7681; - --controlKnob-bgColor-rest: @base; - --controlKnob-bgColor-disabled: #21262db3; - --controlKnob-bgColor-checked: @text; - --controlKnob-borderColor-rest: @surface2; - --controlKnob-borderColor-disabled: #21262db3; - --controlKnob-borderColor-checked: @blue; - --button-default-fgColor-rest: @text; - --button-default-bgColor-rest: @surface0; - --button-default-bgColor-hover: @surface1; - --button-default-bgColor-active: @surface2; - --button-default-bgColor-selected: @surface2; - --button-default-bgColor-disabled: fade(@surface0, 70%); - --button-default-borderColor-rest: @surface1; - --button-default-borderColor-hover: @surface1; - --button-default-borderColor-active: @surface1; - --button-default-borderColor-disabled: fade(@surface0, 70%); - --button-default-shadow-resting: 0px 0px 0px 0px #000; - --button-primary-fgColor-rest: @base; - --button-primary-fgColor-disabled: fade(@base, 60%); - --button-primary-iconColor-rest: @base; - --button-primary-bgColor-rest: @green; - --button-primary-bgColor-hover: lighten(@green, 5%); - --button-primary-bgColor-active: saturate(@green, 5%); - --button-primary-bgColor-disabled: fade(@green, 70%); - --button-primary-borderColor-rest: @green; - --button-primary-borderColor-hover: @green; - --button-primary-borderColor-active: @green; - --button-primary-borderColor-disabled: fade(@green, 70%); - --button-primary-shadow-selected: 0px 0px 0px 0px #000; - --button-invisible-fgColor-rest: @text; - --button-invisible-fgColor-hover: lighten(@accent-color, 10%); - --button-invisible-fgColor-disabled: #6e7681; - --button-invisible-iconColor-rest: @overlay2; - --button-invisible-iconColor-hover: #e6edf3; - --button-invisible-iconColor-disabled: #6e7681; - --button-invisible-bgColor-rest: #0000; - --button-invisible-bgColor-hover: #b1bac41f; - --button-invisible-bgColor-active: #b1bac433; - --button-invisible-bgColor-disabled: fade(@surface1, 70%); - --button-invisible-borderColor-rest: #0000; - --button-invisible-borderColor-hover: #0000; - --button-invisible-borderColor-disabled: fade(@surface1, 70%); - --button-outline-fgColor-rest: #388bfd; - --button-outline-fgColor-hover: #58a6ff; - --button-outline-fgColor-active: @text; - --button-outline-fgColor-disabled: #4493f880; - --button-outline-bgColor-rest: #f0f6fc; - --button-outline-bgColor-hover: @surface1; - --button-outline-bgColor-active: #0d419d; - --button-outline-bgColor-disabled: #0d1117; - --button-outline-borderColor-hover: #f0f6fc1a; - --button-outline-borderColor-selected: #f0f6fc1a; - --button-outline-shadow-selected: 0px 0px 0px 0px #000; - --button-danger-fgColor-rest: @red; - --button-danger-fgColor-hover: @base; - --button-danger-fgColor-active: @base; - --button-danger-fgColor-disabled: fade(@red, 50%); - --button-danger-iconColor-rest: @red; - --button-danger-iconColor-hover: @crust; - --button-danger-bgColor-rest: @surface0; - --button-danger-bgColor-hover: @red; - --button-danger-bgColor-active: darken(@red, 5%); - --button-danger-bgColor-disabled: @base; - --button-danger-borderColor-rest: @surface1; - --button-danger-borderColor-hover: @red; - --button-danger-borderColor-active: darken(@red, 5%); - --button-danger-shadow-selected: 0px 0px 0px 0px #000; - --button-inactive-fgColor: #8b949e; - --button-inactive-bgColor: #21262d; - --button-star-iconColor: @yellow; - --buttonCounter-default-bgColor-rest: @surface1; - --buttonCounter-invisible-bgColor-rest: @surface1; - --buttonCounter-primary-bgColor-rest: #04260f33; - --buttonCounter-outline-bgColor-rest: #051d4d33; - --buttonCounter-outline-bgColor-hover: #051d4d33; - --buttonCounter-outline-bgColor-disabled: #1f6feb0d; - --buttonCounter-outline-fgColor-rest: #388bfd; - --buttonCounter-outline-fgColor-hover: #58a6ff; - --buttonCounter-outline-fgColor-disabled: #4493f880; - --buttonCounter-danger-bgColor-hover: fade(@text, 20%); - --buttonCounter-danger-bgColor-disabled: #da36330d; - --buttonCounter-danger-bgColor-rest: #49020233; - --buttonCounter-danger-fgColor-rest: @red; - --buttonCounter-danger-fgColor-hover: @text; - --buttonCounter-danger-fgColor-disabled: fade(@red, 50%); - --focus-outlineColor: @accent-color; - --menu-bgColor-active: @mantle; - --overlay-bgColor: @base; - --overlay-borderColor: @surface0; - --overlay-backdrop-bgColor: #161b2266; - --selectMenu-borderColor: #484f58; - --selectMenu-bgColor-active: #0c2d6b; - --sideNav-bgColor-selected: #21262d; - --skeletonLoader-bgColor: #161b22; - --timelineBadge-bgColor: @mantle; - --treeViewItem-leadingVisual-iconColor-rest: @subtext0; - --underlineNav-borderColor-active: @accent-color; - --underlineNav-borderColor-hover: #6e768166; - --underlineNav-iconColor-rest: #848d97; - --selection-bgColor: fade(@accent-color, 30%); - --reactionButton-selected-bgColor-rest: fade(@accent-color, 20%); - --reactionButton-selected-bgColor-hover: fade(@accent-color, 35%); - --reactionButton-selected-fgColor-rest: @accent-color; - --reactionButton-selected-fgColor-hover: @accent-color; - --fgColor-default: @text; - --fgColor-muted: @subtext1; - --fgColor-onEmphasis: @base; - --fgColor-white: if(@lookup = latte, @crust, @text); - --fgColor-disabled: @surface2; - --fgColor-link: @accent-color; - --fgColor-neutral: @subtext1; - --fgColor-accent: @accent-color; - --fgColor-success: @green; - --fgColor-attention: @yellow; - --fgColor-severe: @peach; - --fgColor-danger: @red; - --fgColor-open: @green; - --fgColor-closed: @red; - --fgColor-done: @mauve; - --fgColor-sponsors: @pink; - --bgColor-default: @base; - --bgColor-muted: @mantle; - --bgColor-inset: @crust; - --bgColor-emphasis: @overlay2; - --bgColor-inverse: @text; - --bgColor-disabled: #21262db3; - --bgColor-transparent: #0000; - --bgColor-neutral-muted: fade(@surface0, 40%); - --bgColor-neutral-emphasis: @subtext0; - --bgColor-accent-muted: fade(@accent-color, 20%); - --bgColor-accent-emphasis: @accent-color; - --bgColor-success-muted: #2ea04326; - --bgColor-success-emphasis: @green; - --bgColor-attention-muted: fade(@yellow, 15%); - --bgColor-attention-emphasis: @yellow; - --bgColor-severe-muted: fade(@peach, 26%); - --bgColor-severe-emphasis: @peach; - --bgColor-danger-muted: fade(@red, 26%); - --bgColor-danger-emphasis: @red; - --bgColor-open-muted: #2ea0431a; - --bgColor-open-emphasis: @green; - --bgColor-closed-muted: fade(@red, 15%); - --bgColor-closed-emphasis: @red; - --bgColor-done-muted: #a371f726; - --bgColor-done-emphasis: @mauve; - --bgColor-sponsors-muted: #db61a21a; - --bgColor-sponsors-emphasis: @pink; - --borderColor-default: @surface1; - --borderColor-muted: @surface0; - --borderColor-emphasis: #484f58; - --borderColor-disabled: #21262db3; - --borderColor-transparent: #0000; - --borderColor-neutral-muted: #6e768166; - --borderColor-neutral-emphasis: #6e7681; - --borderColor-accent-muted: fade(@accent-color, 50%); - --borderColor-accent-emphasis: @accent-color; - --borderColor-success-muted: darken(@green, 5%); - --borderColor-success-emphasis: @green; - --borderColor-attention-muted: fade(@flamingo, 30%); - --borderColor-attention-emphasis: @flamingo; - --borderColor-severe-muted: @peach; - --borderColor-severe-emphasis: #bd561d; - --borderColor-danger-muted: @red; - --borderColor-danger-emphasis: @red; - --borderColor-open-muted: darken(@green, 5%); - --borderColor-open-emphasis: @green; - --borderColor-closed-muted: @red; - --borderColor-closed-emphasis: @red; - --borderColor-done-muted: @lavender; - --borderColor-done-emphasis: @mauve; - --borderColor-sponsors-muted: #db61a266; - --borderColor-sponsors-emphasis: @pink; - & when (@lookup =latte) { - --color-ansi-black: @subtext1; - --color-ansi-black-bright: @subtext0; - --color-ansi-gray: @subtext0; - --color-ansi-white: @surface2; - --color-ansi-white-bright: @surface1; - } - & when not (@lookup =latte) { - --color-ansi-black: @surface1; - --color-ansi-black-bright: @surface2; - --color-ansi-gray: @surface2; - --color-ansi-white: @subtext1; - --color-ansi-white-bright: @subtext0; - } - --color-ansi-red: @red; - --color-ansi-red-bright: @red; - --color-ansi-green: @green; - --color-ansi-green-bright: @green; - --color-ansi-yellow: @yellow; - --color-ansi-yellow-bright: @yellow; - --color-ansi-blue: @blue; - --color-ansi-blue-bright: @blue; - --color-ansi-magenta: @pink; - --color-ansi-magenta-bright: @pink; - --color-ansi-cyan: @teal; - --color-ansi-cyan-bright: @teal; - --color-prettylights-syntax-comment: @overlay2; - --color-prettylights-syntax-constant: @blue; - --color-prettylights-syntax-constant-other-reference-link: @blue; - --color-prettylights-syntax-entity: @blue; - --color-prettylights-syntax-storage-modifier-import: @peach; - --color-prettylights-syntax-entity-tag: @blue; - --color-prettylights-syntax-keyword: @mauve; - --color-prettylights-syntax-string: @green; - --color-prettylights-syntax-variable: @peach; - --color-prettylights-syntax-invalid-illegal-text: @red; - --color-prettylights-syntax-invalid-illegal-bg: fadeout(@red, 85%); - --color-prettylights-syntax-markup-heading: @red; - --color-prettylights-syntax-markup-italic: @yellow; - --color-prettylights-syntax-markup-bold: @yellow; - --color-prettylights-syntax-markup-deleted-text: @text; - --color-prettylights-syntax-markup-deleted-bg: fadeout(@red, 60%); - --color-prettylights-syntax-markup-inserted-text: @text; - --color-prettylights-syntax-markup-inserted-bg: fadeout(@green, 60%); - --color-prettylights-syntax-markup-changed-text: @text; - --color-prettylights-syntax-markup-changed-bg: fadeout(@yellow, 60%); - --color-prettylights-syntax-markup-ignored-text: @text; - --bgColor-white: @base; - --color-scale-white: @base; - --color-scale-gray-3: @overlay2; - --color-scale-gray-5: @overlay0; - --color-scale-gray-6: @surface1; - --color-scale-gray-7: @surface1; - --color-scale-blue-2: @sky; - --color-scale-blue-5: @blue; - --color-scale-green-3: @green; - --color-scale-green-4: @green; - --color-scale-yellow-3: @peach; - --color-scale-orange-4: @peach; - --color-scale-red-4: @red; - --shadow-inset: inset 0px 1px 0px 0px @crust; - --shadow-resting-xsmall: 0px 1px 0px 0px @crust; - --shadow-resting-small: 0px 1px 0px 0px @crust, 0px 1px 3px 0px @crust; - --shadow-resting-medium: 0px 3px 6px 0px @crust; - --shadow-floating-small: 0px 0px 0px 1px @base, 0px 6px 12px -3px @crust, - 0px 6px 18px 0px @crust; - --shadow-floating-medium: 0px 0px 0px 1px @surface0, - 0px 8px 16px -4px @crust, 0px 4px 32px -4px @crust, - 0px 24px 48px -12px @crust, 0px 48px 96px -24px @crust; - --shadow-floating-large: 0px 0px 0px 1px @surface0, - 0px 24px 48px 0px #010409; - --shadow-floating-xlarge: 0px 0px 0px 1px @surface0, - 0px 32px 64px 0px #010409; - --shadow-floating-legacy: 0px 6px 12px -3px @crust, 0px 6px 18px 0px @crust; - --outline-focus: @blue solid 2px; - - /* Customer Terms & Agreements Page: https://github.com/customer-terms */ - .enterprise-customer-agreement { - color: @text !important; - - &:hover { - .octicon, - h3 { - color: @accent-color !important; - } - } - } - - /* Enhanced Repo Insights Views - https://github.com/orgs/community/discussions/135572 */ - --data-blue-color-emphasis: @accent-color; - --data-red-color-emphasis: @red; - --data-green-color-emphasis: @green; - - /* Copilot Chat */ - --display-green-fgColor: @green; - --display-teal-fgColor: @teal; - --display-purple-fgColor: @mauve; - --display-blue-fgColor: @blue; - --display-pink-fgColor: @pink; - --display-gray-fgColor: @subtext0; - react-app[app-name="copilot-immersive-v1"], - copilot-dashboard-entrypoint { - button { - color: @text; - } - } - - --tooltip-fgColor: @base; - --tooltip-bgColor: @overlay2; - - /* Refined GitHub */ - --rgh-heat-color: @peach; - - .turbo-progress-bar { - background-color: @accent-color; - } - - .form-select { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - img[src="https://github.githubassets.com/assets/mona-loading-default-c3c7aad1282f.gif"] - { - content: url("https://giscus.catppuccin.com/assets/loading_48x48.gif"); - } - - /* Header when logged out */ - .HeaderMenu-link { - color: @text; - - &:hover { - color: @text; - } - } - .header-search-button { - &.placeholder { - color: @subtext0; - } - - svg { - fill: @text !important; - } - } - .HeaderMenu-toggle-bar { - background-color: @text; - } - .notification-indicator .mail-status { - background-image: linear-gradient( - @accent-color, - darken(@accent-color, 5%) - ); - } - - .CheckStep { - .ansifg-r { - color: var(--color-ansi-red); - } - .ansifg-y { - color: var(--color-ansi-yellow); - } - .ansifg-g { - color: var(--color-ansi-green); - } - .ansifg-b { - color: var(--color-ansi-blue); - } - .ansifg-c { - color: var(--color-ansi-cyan); - } - .ansifg-m { - color: var(--color-ansi-magenta); - } - .ansifg-gr { - color: var(--color-ansi-gray); - } - } - - .js-activity-overview-graph .js-highlight-blob { - fill: @accent-color; - stroke: @accent-color; - } - - .subnav-link.selected { - border-bottom-color: @accent-color; - } - - /* Pull request check in progress indicator */ - [stroke="#DBAB0A"] { - stroke: fade(@yellow, 70%) !important; - } - [fill="#DBAB0A"] { - fill: @yellow !important; - } - } -} - -@-moz-document url-prefix("https://viewscreen.githubusercontent.com/markdown/mermaid") -{ - [data-color-mode="auto"] { - @media (prefers-color-scheme: light) { - &[data-light-theme="light"] { - #catppuccin(@lightFlavor, @accentColor); - } - &[data-light-theme="dark"] { - #catppuccin(@darkFlavor, @accentColor); - } - } - - @media (prefers-color-scheme: dark) { - &[data-dark-theme="light"] { - #catppuccin(@lightFlavor, @accentColor); - } - &[data-dark-theme="dark"] { - #catppuccin(@darkFlavor, @accentColor); - } - } - } - [data-color-mode="light"][data-light-theme="dark"], - [data-color-mode="dark"][data-dark-theme="dark"] { - #catppuccin(@darkFlavor, @accentColor); - } - [data-color-mode="light"][data-light-theme="light"], - [data-color-mode="dark"][data-dark-theme="light"] { - #catppuccin(@lightFlavor, @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]; - - ::selection { - background-color: fade(@accent-color, 30%); - } - - background-color: @base; - - --color-btn-text: @text; - --color-btn-bg: @surface0; - --color-btn-border: @surface1; - --color-btn-hover-bg: @surface1; - --color-btn-hover-border: @surface2; - --color-btn-active-bg: @surface2; - --color-btn-selected-bg: @surface2; - --color-btn-counter-bg: @surface2; - --color-btn-outline-text: @accent-color; - --color-fg-muted: @subtext1; - --button-default-fgColor-rest: @text; - --button-default-bgColor-rest: @surface0; - --button-default-bgColor-hover: @surface1; - --button-default-bgColor-active: @surface2; - --button-default-bgColor-selected: @surface2; - --button-default-bgColor-disabled: fade(@surface0, 70%); - --button-default-borderColor-rest: @surface1; - --button-default-borderColor-hover: @surface1; - --button-default-borderColor-active: @surface1; - --button-default-borderColor-disabled: fade(@surface0, 70%); - - #diagram { - .node rect, - .node circle, - .node ellipse, - .node polygon, - .node path { - fill: fade(@accent-color, 10%); - stroke: @accent-color; - } - - .cluster rect { - fill: @surface0; - stroke: @surface2; - } - - .label text, - span, - p { - fill: @text; - color: @text; - } - - .flowchart-link { - stroke: @subtext0; - } - .marker { - stroke: @subtext0; - fill: @subtext0; - } - - .edgeLabel { - background-color: @crust; - p { - background-color: @surface2; - } - } - } - - .octicon { - fill: var(--color-fg-muted) !important; - } - } -} - -@-moz-document regexp("https:\/\/notebooks\.githubusercontent\.com\/view\/ipynb.*") { - :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; - } - } - - --jp-border-color0: var(--color-scale-gray-7); - --jp-border-color1: var(--color-scale-gray-7); - --jp-border-color2: var(--color-scale-gray-8); - --jp-border-color3: var(--color-scale-gray-9); - --jp-ui-font-color0: @text; - --jp-ui-font-color1: fadeout(@text, 13%); - --jp-ui-font-color2: fadeout(@text, 46%); - --jp-ui-font-color3: fadeout(@text, 72%); - --jp-ui-inverse-font-color0: @crust; - --jp-ui-inverse-font-color1: fadeout(@crust, 20%); - --jp-ui-inverse-font-color2: fadeout(@crust, 50%); - --jp-ui-inverse-font-color3: fadeout(@crust, 70%); - --jp-content-font-color0: @text; - --jp-content-font-color1: @text; - --jp-content-font-color2: fadeout(@text, 30%); - --jp-content-font-color3: fadeout(@text, 50%); - --jp-content-link-color: @sapphire; - --jp-layout-color0: @base !important; - --jp-layout-color1: var(--color-scale-gray-9); - --jp-layout-color2: var(--color-scale-gray-8); - --jp-layout-color3: var(--color-scale-gray-7); - --jp-layout-color4: var(--color-scale-gray-6); - --jp-inverse-layout-color0: var(--color-scale-white); - --jp-inverse-layout-color1: var(--color-scale-white); - --jp-inverse-layout-color2: var(--color-scale-gray-2); - --jp-inverse-layout-color3: var(--color-scale-gray-4); - --jp-inverse-layout-color4: var(--color-scale-gray-6); - --jp-brand-color0: var(--color-scale-blue-7); - --jp-brand-color1: var(--color-scale-blue-5); - --jp-brand-color2: var(--color-scale-blue-3); - --jp-brand-color3: var(--color-scale-blue-1); - --jp-brand-color4: var(--color-scale-blue-0); - --jp-accent-color0: var(--color-scale-green-7); - --jp-accent-color1: var(--color-scale-green-5); - --jp-accent-color2: var(--color-scale-green-3); - --jp-accent-color3: var(--color-scale-green-1); - --jp-warn-color0: var(--color-scale-orange-7); - --jp-warn-color1: var(--color-scale-orange-5); - --jp-warn-color2: var(--color-scale-orange-3); - --jp-warn-color3: var(--color-scale-orange-1); - --jp-error-color0: var(--color-scale-red-7); - --jp-error-color1: var(--color-scale-red-5); - --jp-error-color2: var(--color-scale-red-3); - --jp-error-color3: var(--color-scale-red-1); - --jp-success-color0: var(--color-scale-green-7); - --jp-success-color1: var(--color-scale-green-5); - --jp-success-color2: var(--color-scale-green-3); - --jp-success-color3: var(--color-scale-green-1); - --jp-info-color0: var(--color-scale-blue-7); - --jp-info-color1: var(--color-scale-blue-5); - --jp-info-color2: var(--color-scale-blue-3); - --jp-info-color3: var(--color-scale-blue-1); - --jp-cell-editor-background: @mantle; - --jp-cell-editor-border-color: var(--color-scale-gray-7); - --jp-cell-editor-box-shadow: inset 0 0 2px var(--color-scale-blue-3); - --jp-cell-prompt-not-active-font-color: fadeout(@text, 50%); - --jp-cell-inprompt-font-color: var(--color-scale-blue-6); - --jp-cell-outprompt-font-color: var(--color-scale-coral-6); - --jp-notebook-multiselected-color: fadeout(@overlay2, 86%); - --jp-rendermime-error-background: fadeout(@red, 82%); - --jp-rendermime-table-row-background: var(--color-scale-gray-9); - --jp-rendermime-table-row-hover-background: fadeout(@surface2, 86%); - --jp-dialog-background: fadeout(@crust, 40%); - --jp-toolbar-box-shadow: 0px 0px 2px 0px fadeout(@crust, 20%); - --jp-input-box-shadow: inset 0 0 2px var(--color-scale-blue-3); - --jp-input-background: var(--color-scale-gray-8); - --jp-input-active-box-shadow-color: fadeout(@blue, 70%); - --jp-editor-selected-focused-background: fadeout(@blue, 86%); - --jp-mirror-editor-keyword-color: var(--color-scale-green-5); - --jp-mirror-editor-atom-color: var(--color-scale-blue-3); - --jp-mirror-editor-number-color: var(--color-scale-green-4); - --jp-mirror-editor-def-color: var(--color-scale-blue-6); - --jp-mirror-editor-variable-color: var(--color-scale-gray-3); - --jp-mirror-editor-variable-2-color: var(--color-scale-blue-4); - --jp-mirror-editor-variable-3-color: var(--color-scale-green-6); - --jp-mirror-editor-punctuation-color: var(--color-scale-blue-4); - --jp-mirror-editor-property-color: var(--color-scale-blue-4); - --jp-mirror-editor-operator-color: @mauve; - --jp-mirror-editor-comment-color: @subtext0; - --jp-mirror-editor-string-color: @peach; - --jp-mirror-editor-string-2-color: var(--color-scale-purple-3); - --jp-mirror-editor-meta-color: @mauve; - --jp-mirror-editor-qualifier-color: var(--color-scale-gray-5); - --jp-mirror-editor-builtin-color: var(--color-scale-green-6); - --jp-mirror-editor-bracket-color: var(--color-scale-gray-2); - --jp-mirror-editor-tag-color: var(--color-scale-blue-7); - --jp-mirror-editor-attribute-color: var(--color-scale-blue-7); - --jp-mirror-editor-header-color: var(--color-scale-blue-5); - --jp-mirror-editor-quote-color: var(--color-scale-green-3); - --jp-mirror-editor-link-color: var(--color-scale-blue-7); - --jp-mirror-editor-error-color: @red; - --jp-mirror-editor-hr-color: var(--color-scale-gray-8); - --jp-vega-background: var(--color-scale-gray-4); - --jp-search-selected-match-background-color: @yellow; - --jp-search-selected-match-color: @crust; - --jp-icon-contrast-color0: var(--color-scale-purple-6); - --jp-icon-contrast-color1: var(--color-scale-green-6); - --jp-icon-contrast-color2: var(--color-scale-pink-6); - --jp-icon-contrast-color3: var(--color-scale-blue-6); - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/github/catppuccin.user.less b/styles/github/catppuccin.user.less new file mode 100644 index 0000000000..4c7217673a --- /dev/null +++ b/styles/github/catppuccin.user.less @@ -0,0 +1,917 @@ +/* ==UserStyle== +@name GitHub Catppuccin +@namespace github.com/catppuccin/userstyles/styles/github +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/github +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/github/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agithub +@description Soothing pastel theme for GitHub +@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 regexp( + "https:\/\/(gist\.)*github\.com(?!((\/.+?\/.+?\/commit\/[A-Fa-f0-9]+\.(patch|diff)$)|\/home$|\/features($|\/.*)|\/marketplace($|\?.*|\/.*)|\/organizations\/plan)).*$" + ), + url-prefix("https://viewscreen.githubusercontent.com/diff/img") { + [data-color-mode="auto"] { + @media (prefers-color-scheme: light) { + &[data-light-theme="light"] { + #catppuccin(@lightFlavor, @accentColor); + } + &[data-light-theme="dark"] { + #catppuccin(@darkFlavor, @accentColor); + } + } + + @media (prefers-color-scheme: dark) { + &[data-dark-theme="light"] { + #catppuccin(@lightFlavor, @accentColor); + } + &[data-dark-theme="dark"] { + #catppuccin(@darkFlavor, @accentColor); + } + } + } + [data-color-mode="light"][data-light-theme="dark"], + [data-color-mode="dark"][data-dark-theme="dark"] { + #catppuccin(@darkFlavor, @accentColor); + } + [data-color-mode="light"][data-light-theme="light"], + [data-color-mode="dark"][data-dark-theme="light"] { + #catppuccin(@lightFlavor, @accentColor); + } + + html:not([data-light-theme="light"], [data-light-theme="dark"]) + body:not(.logged-out)::after, + html:not([data-dark-theme="dark"], [data-dark-theme="light"]) + body:not(.logged-out)::after { + position: fixed; + top: 0; + left: 0; + padding: 1rem; + margin: 1rem; + border-radius: 0.5rem; + max-width: 40ch; + background-color: var(--color-danger-fg); + color: var(--color-header-bg); + content: "Unsupported GitHub theme detected! Please switch to the default light/dark theme via the GitHub Appearance settings to get the best experience for the Catppuccin GitHub userstyle."; + z-index: 9999; + } + + #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; + } + } + .cm-placeholder { + color: @subtext0; + } + + accent-color: @accent-color; + color: @text; + + --color-social-reaction-bg-reacted-hover: fade(@accent-color, 30%); + --color-notifications-button-hover-bg: fade(@accent-color, 60%); + --color-workflow-card-header-shadow: rgba(27, 31, 35, 0.04); + --color-icon-directory: var(--fgColor-muted, var(--color-fg-muted)); + --color-calendar-halloween-graph-day-L1-bg: fadeout( + @accent-color, + 60% + ) !important; + --color-calendar-halloween-graph-day-L2-bg: fadeout( + @accent-color, + 40% + ) !important; + --color-calendar-halloween-graph-day-L3-bg: fadeout( + @accent-color, + 20% + ) !important; + --color-calendar-halloween-graph-day-L4-bg: @accent-color !important; + --color-calendar-winter-graph-day-L1-bg: fadeout( + @accent-color, + 60% + ) !important; + --color-calendar-winter-graph-day-L2-bg: fadeout( + @accent-color, + 40% + ) !important; + --color-calendar-winter-graph-day-L3-bg: fadeout( + @accent-color, + 20% + ) !important; + --color-calendar-winter-graph-day-L4-bg: @accent-color !important; + --color-calendar-graph-day-bg: @surface0 !important; + --color-calendar-graph-day-border: transparent !important; + --color-calendar-graph-day-L1-bg: fadeout(@accent-color, 60%) !important; + --color-calendar-graph-day-L2-bg: fadeout(@accent-color, 40%) !important; + --color-calendar-graph-day-L3-bg: fadeout(@accent-color, 20%) !important; + --color-calendar-graph-day-L4-bg: @accent-color !important; + --color-calendar-graph-day-L2-border: transparent !important; + --color-calendar-graph-day-L3-border: transparent !important; + --color-calendar-graph-day-L4-border: transparent !important; + --color-user-mention-fg: @accent-color; + --color-user-mention-bg: fade(@accent-color, 30%); + --color-dashboard-feed-bg: var(--color-scale-gray-9); + --color-mktg-btn-shadow-outline: rgba(255, 255, 255, 0.25) 0 0 0 1px inset; + --color-marketing-icon-secondary: var(--color-scale-blue-5); + --color-project-header-bg: var(--color-scale-gray-9); + --color-project-sidebar-bg: var(--color-scale-gray-8); + --color-project-gradient-in: var(--color-scale-gray-8); + --color-project-gradient-out: rgba(22, 27, 34, 0); + --color-diff-blob-selected-line-highlight-mix-blend-mode: screen; + --topicTag-borderColor: #0000; + --highlight-neutral-bgColor: fade(@yellow, 30%); + --page-header-bgColor: @crust; + --diffBlob-additionNum-bgColor: fadeout(@green, 70%); + --diffBlob-additionNum-fgColor: @text; + --diffBlob-additionLine-bgColor: fadeout(@green, 85%); + --diffBlob-additionWord-bgColor: fadeout(@green, 70%); + --diffBlob-additionWord-fgColor: @text; + --diffBlob-deletionNum-bgColor: fadeout(@red, 70%); + --diffBlob-deletionNum-fgColor: @text; + --diffBlob-deletionLine-bgColor: fadeout(@red, 85%); + --diffBlob-deletionWord-bgColor: fadeout(@red, 70%); + --diffBlob-deletionWord-fgColor: @text; + --diffBlob-hunkNum-bgColor-rest: fadeout(@accent-color, 60%); + --diffBlob-hunkNum-bgColor-hover: fade(@accent-color, 75%); + --diffBlob-hunkLine-bgColor: fadeout(@accent-color, 75%); + --diffBlob-expander-iconColor: @subtext0; + --diffBlob-emptyNum-bgColor: @mantle; + --diffBlob-emptyLine-bgColor: @mantle; + --codeMirror-fgColor: @text; + --codeMirror-bgColor: @base; + --codeMirror-gutters-bgColor: @base; + --codeMirror-gutterMarker-fgColor-default: @base; + --codeMirror-gutterMarker-fgColor-muted: @overlay0; + --codeMirror-lineNumber-fgColor: @overlay1; + --codeMirror-cursor-fgColor: @text; + --codeMirror-selection-bgColor: #388bfd66; + --codeMirror-activeline-bgColor: #6e768166; + --codeMirror-matchingBracket-fgColor: @text; + --codeMirror-lines-bgColor: @base; + --codeMirror-syntax-fgColor-comment: @overlay2; + --codeMirror-syntax-fgColor-constant: @blue; + --codeMirror-syntax-fgColor-entity: @blue; + --codeMirror-syntax-fgColor-keyword: @mauve; + --codeMirror-syntax-fgColor-storage: @peach; + --codeMirror-syntax-fgColor-string: @green; + --codeMirror-syntax-fgColor-support: #79c0ff; + --codeMirror-syntax-fgColor-variable: @peach; + --header-fgColor-default: @text; + --header-fgColor-logo: @text; + --header-bgColor: @crust; + --header-borderColor-divider: #8b949e; + --headerSearch-bgColor: @mantle; + --headerSearch-borderColor: @surface0; + --avatar-bgColor: fade(@text, 26%); + --avatar-borderColor: @surface0; + --avatar-shadow: 0px 0px 0px 2px #0d1117; + --avatarStack-fade-bgColor-default: @surface1; + --avatarStack-fade-bgColor-muted: #21262d; + --control-bgColor-rest: @red; + --control-bgColor-hover: #292e36; + --control-bgColor-active: @surface1; + --control-bgColor-disabled: fade(@mantle, 60%); + --control-bgColor-selected: #161b22; + --control-fgColor-rest: @text; + --control-fgColor-placeholder: #484f58; + --control-fgColor-disabled: fade(@subtext0, 70%); + --control-borderColor-rest: @surface1; + --control-borderColor-emphasis: #666e79; + --control-borderColor-disabled: fade(@surface1, 75%); + --control-borderColor-selected: #f0f6fc; + --control-borderColor-success: @green; + --control-borderColor-danger: @red; + --control-borderColor-warning: @yellow; + --control-iconColor-rest: #848d97; + --control-transparent-bgColor-rest: #0000; + --control-transparent-bgColor-hover: fade(@surface2, 20%); + --control-transparent-bgColor-active: fade(@overlay0, 50%); + --control-transparent-bgColor-disabled: #21262db3; + --control-transparent-bgColor-selected: #b1bac414; + --control-transparent-borderColor-rest: #0000; + --control-transparent-borderColor-hover: #0000; + --control-transparent-borderColor-active: #0000; + --control-danger-fgColor-rest: @red; + --control-danger-fgColor-hover: @crust; + --control-danger-bgColor-hover: fade(@red, 80%); + --control-danger-bgColor-active: @red; + --control-checked-bgColor-rest: @accent-color; + --control-checked-bgColor-hover: lighten(@accent-color, 5%); + --control-checked-bgColor-active: lighten(@accent-color, 5%); + --control-checked-bgColor-disabled: #6e7681; + --control-checked-fgColor-rest: @crust; + --control-checked-fgColor-disabled: #010409; + --control-checked-borderColor-rest: @accent-color; + --control-checked-borderColor-hover: @accent-color; + --control-checked-borderColor-active: @accent-color; + --control-checked-borderColor-disabled: @surface0; + --controlTrack-bgColor-rest: @surface0; + --controlTrack-bgColor-hover: @surface1; + --controlTrack-bgColor-active: @surface2; + --controlTrack-bgColor-disabled: #6e7681; + --controlTrack-fgColor-rest: #848d97; + --controlTrack-fgColor-disabled: @text; + --controlTrack-borderColor-rest: #0000; + --controlTrack-borderColor-disabled: #6e7681; + --controlKnob-bgColor-rest: @base; + --controlKnob-bgColor-disabled: #21262db3; + --controlKnob-bgColor-checked: @text; + --controlKnob-borderColor-rest: @surface2; + --controlKnob-borderColor-disabled: #21262db3; + --controlKnob-borderColor-checked: @blue; + --button-default-fgColor-rest: @text; + --button-default-bgColor-rest: @surface0; + --button-default-bgColor-hover: @surface1; + --button-default-bgColor-active: @surface2; + --button-default-bgColor-selected: @surface2; + --button-default-bgColor-disabled: fade(@surface0, 70%); + --button-default-borderColor-rest: @surface1; + --button-default-borderColor-hover: @surface1; + --button-default-borderColor-active: @surface1; + --button-default-borderColor-disabled: fade(@surface0, 70%); + --button-default-shadow-resting: 0px 0px 0px 0px #000; + --button-primary-fgColor-rest: @base; + --button-primary-fgColor-disabled: fade(@base, 60%); + --button-primary-iconColor-rest: @base; + --button-primary-bgColor-rest: @green; + --button-primary-bgColor-hover: lighten(@green, 5%); + --button-primary-bgColor-active: saturate(@green, 5%); + --button-primary-bgColor-disabled: fade(@green, 70%); + --button-primary-borderColor-rest: @green; + --button-primary-borderColor-hover: @green; + --button-primary-borderColor-active: @green; + --button-primary-borderColor-disabled: fade(@green, 70%); + --button-primary-shadow-selected: 0px 0px 0px 0px #000; + --button-invisible-fgColor-rest: @text; + --button-invisible-fgColor-hover: lighten(@accent-color, 10%); + --button-invisible-fgColor-disabled: #6e7681; + --button-invisible-iconColor-rest: @overlay2; + --button-invisible-iconColor-hover: #e6edf3; + --button-invisible-iconColor-disabled: #6e7681; + --button-invisible-bgColor-rest: #0000; + --button-invisible-bgColor-hover: #b1bac41f; + --button-invisible-bgColor-active: #b1bac433; + --button-invisible-bgColor-disabled: fade(@surface1, 70%); + --button-invisible-borderColor-rest: #0000; + --button-invisible-borderColor-hover: #0000; + --button-invisible-borderColor-disabled: fade(@surface1, 70%); + --button-outline-fgColor-rest: #388bfd; + --button-outline-fgColor-hover: #58a6ff; + --button-outline-fgColor-active: @text; + --button-outline-fgColor-disabled: #4493f880; + --button-outline-bgColor-rest: #f0f6fc; + --button-outline-bgColor-hover: @surface1; + --button-outline-bgColor-active: #0d419d; + --button-outline-bgColor-disabled: #0d1117; + --button-outline-borderColor-hover: #f0f6fc1a; + --button-outline-borderColor-selected: #f0f6fc1a; + --button-outline-shadow-selected: 0px 0px 0px 0px #000; + --button-danger-fgColor-rest: @red; + --button-danger-fgColor-hover: @base; + --button-danger-fgColor-active: @base; + --button-danger-fgColor-disabled: fade(@red, 50%); + --button-danger-iconColor-rest: @red; + --button-danger-iconColor-hover: @crust; + --button-danger-bgColor-rest: @surface0; + --button-danger-bgColor-hover: @red; + --button-danger-bgColor-active: darken(@red, 5%); + --button-danger-bgColor-disabled: @base; + --button-danger-borderColor-rest: @surface1; + --button-danger-borderColor-hover: @red; + --button-danger-borderColor-active: darken(@red, 5%); + --button-danger-shadow-selected: 0px 0px 0px 0px #000; + --button-inactive-fgColor: #8b949e; + --button-inactive-bgColor: #21262d; + --button-star-iconColor: @yellow; + --buttonCounter-default-bgColor-rest: @surface1; + --buttonCounter-invisible-bgColor-rest: @surface1; + --buttonCounter-primary-bgColor-rest: #04260f33; + --buttonCounter-outline-bgColor-rest: #051d4d33; + --buttonCounter-outline-bgColor-hover: #051d4d33; + --buttonCounter-outline-bgColor-disabled: #1f6feb0d; + --buttonCounter-outline-fgColor-rest: #388bfd; + --buttonCounter-outline-fgColor-hover: #58a6ff; + --buttonCounter-outline-fgColor-disabled: #4493f880; + --buttonCounter-danger-bgColor-hover: fade(@text, 20%); + --buttonCounter-danger-bgColor-disabled: #da36330d; + --buttonCounter-danger-bgColor-rest: #49020233; + --buttonCounter-danger-fgColor-rest: @red; + --buttonCounter-danger-fgColor-hover: @text; + --buttonCounter-danger-fgColor-disabled: fade(@red, 50%); + --focus-outlineColor: @accent-color; + --menu-bgColor-active: @mantle; + --overlay-bgColor: @base; + --overlay-borderColor: @surface0; + --overlay-backdrop-bgColor: #161b2266; + --selectMenu-borderColor: #484f58; + --selectMenu-bgColor-active: #0c2d6b; + --sideNav-bgColor-selected: #21262d; + --skeletonLoader-bgColor: #161b22; + --timelineBadge-bgColor: @mantle; + --treeViewItem-leadingVisual-iconColor-rest: @subtext0; + --underlineNav-borderColor-active: @accent-color; + --underlineNav-borderColor-hover: #6e768166; + --underlineNav-iconColor-rest: #848d97; + --selection-bgColor: fade(@accent-color, 30%); + --reactionButton-selected-bgColor-rest: fade(@accent-color, 20%); + --reactionButton-selected-bgColor-hover: fade(@accent-color, 35%); + --reactionButton-selected-fgColor-rest: @accent-color; + --reactionButton-selected-fgColor-hover: @accent-color; + --fgColor-default: @text; + --fgColor-muted: @subtext1; + --fgColor-onEmphasis: @base; + --fgColor-white: if(@lookup = latte, @crust, @text); + --fgColor-disabled: @surface2; + --fgColor-link: @accent-color; + --fgColor-neutral: @subtext1; + --fgColor-accent: @accent-color; + --fgColor-success: @green; + --fgColor-attention: @yellow; + --fgColor-severe: @peach; + --fgColor-danger: @red; + --fgColor-open: @green; + --fgColor-closed: @red; + --fgColor-done: @mauve; + --fgColor-sponsors: @pink; + --bgColor-default: @base; + --bgColor-muted: @mantle; + --bgColor-inset: @crust; + --bgColor-emphasis: @overlay2; + --bgColor-inverse: @text; + --bgColor-disabled: #21262db3; + --bgColor-transparent: #0000; + --bgColor-neutral-muted: fade(@surface0, 40%); + --bgColor-neutral-emphasis: @subtext0; + --bgColor-accent-muted: fade(@accent-color, 20%); + --bgColor-accent-emphasis: @accent-color; + --bgColor-success-muted: #2ea04326; + --bgColor-success-emphasis: @green; + --bgColor-attention-muted: fade(@yellow, 15%); + --bgColor-attention-emphasis: @yellow; + --bgColor-severe-muted: fade(@peach, 26%); + --bgColor-severe-emphasis: @peach; + --bgColor-danger-muted: fade(@red, 26%); + --bgColor-danger-emphasis: @red; + --bgColor-open-muted: #2ea0431a; + --bgColor-open-emphasis: @green; + --bgColor-closed-muted: fade(@red, 15%); + --bgColor-closed-emphasis: @red; + --bgColor-done-muted: #a371f726; + --bgColor-done-emphasis: @mauve; + --bgColor-sponsors-muted: #db61a21a; + --bgColor-sponsors-emphasis: @pink; + --borderColor-default: @surface1; + --borderColor-muted: @surface0; + --borderColor-emphasis: #484f58; + --borderColor-disabled: #21262db3; + --borderColor-transparent: #0000; + --borderColor-neutral-muted: #6e768166; + --borderColor-neutral-emphasis: #6e7681; + --borderColor-accent-muted: fade(@accent-color, 50%); + --borderColor-accent-emphasis: @accent-color; + --borderColor-success-muted: darken(@green, 5%); + --borderColor-success-emphasis: @green; + --borderColor-attention-muted: fade(@flamingo, 30%); + --borderColor-attention-emphasis: @flamingo; + --borderColor-severe-muted: @peach; + --borderColor-severe-emphasis: #bd561d; + --borderColor-danger-muted: @red; + --borderColor-danger-emphasis: @red; + --borderColor-open-muted: darken(@green, 5%); + --borderColor-open-emphasis: @green; + --borderColor-closed-muted: @red; + --borderColor-closed-emphasis: @red; + --borderColor-done-muted: @lavender; + --borderColor-done-emphasis: @mauve; + --borderColor-sponsors-muted: #db61a266; + --borderColor-sponsors-emphasis: @pink; + & when (@lookup = latte) { + --color-ansi-black: @subtext1; + --color-ansi-black-bright: @subtext0; + --color-ansi-gray: @subtext0; + --color-ansi-white: @surface2; + --color-ansi-white-bright: @surface1; + } + & when not(@lookup = latte) { + --color-ansi-black: @surface1; + --color-ansi-black-bright: @surface2; + --color-ansi-gray: @surface2; + --color-ansi-white: @subtext1; + --color-ansi-white-bright: @subtext0; + } + --color-ansi-red: @red; + --color-ansi-red-bright: @red; + --color-ansi-green: @green; + --color-ansi-green-bright: @green; + --color-ansi-yellow: @yellow; + --color-ansi-yellow-bright: @yellow; + --color-ansi-blue: @blue; + --color-ansi-blue-bright: @blue; + --color-ansi-magenta: @pink; + --color-ansi-magenta-bright: @pink; + --color-ansi-cyan: @teal; + --color-ansi-cyan-bright: @teal; + --color-prettylights-syntax-comment: @overlay2; + --color-prettylights-syntax-constant: @blue; + --color-prettylights-syntax-constant-other-reference-link: @blue; + --color-prettylights-syntax-entity: @blue; + --color-prettylights-syntax-storage-modifier-import: @peach; + --color-prettylights-syntax-entity-tag: @blue; + --color-prettylights-syntax-keyword: @mauve; + --color-prettylights-syntax-string: @green; + --color-prettylights-syntax-variable: @peach; + --color-prettylights-syntax-invalid-illegal-text: @red; + --color-prettylights-syntax-invalid-illegal-bg: fadeout(@red, 85%); + --color-prettylights-syntax-markup-heading: @red; + --color-prettylights-syntax-markup-italic: @yellow; + --color-prettylights-syntax-markup-bold: @yellow; + --color-prettylights-syntax-markup-deleted-text: @text; + --color-prettylights-syntax-markup-deleted-bg: fadeout(@red, 60%); + --color-prettylights-syntax-markup-inserted-text: @text; + --color-prettylights-syntax-markup-inserted-bg: fadeout(@green, 60%); + --color-prettylights-syntax-markup-changed-text: @text; + --color-prettylights-syntax-markup-changed-bg: fadeout(@yellow, 60%); + --color-prettylights-syntax-markup-ignored-text: @text; + --bgColor-white: @base; + --color-scale-white: @base; + --color-scale-gray-3: @overlay2; + --color-scale-gray-5: @overlay0; + --color-scale-gray-6: @surface1; + --color-scale-gray-7: @surface1; + --color-scale-blue-2: @sky; + --color-scale-blue-5: @blue; + --color-scale-green-3: @green; + --color-scale-green-4: @green; + --color-scale-yellow-3: @peach; + --color-scale-orange-4: @peach; + --color-scale-red-4: @red; + --shadow-inset: inset 0px 1px 0px 0px @crust; + --shadow-resting-xsmall: 0px 1px 0px 0px @crust; + --shadow-resting-small: 0px 1px 0px 0px @crust, 0px 1px 3px 0px @crust; + --shadow-resting-medium: 0px 3px 6px 0px @crust; + --shadow-floating-small: + 0px 0px 0px 1px @base, 0px 6px 12px -3px @crust, 0px 6px 18px 0px @crust; + --shadow-floating-medium: + 0px 0px 0px 1px @surface0, 0px 8px 16px -4px @crust, 0px 4px 32px -4px + @crust, 0px 24px 48px -12px @crust, 0px 48px 96px -24px @crust; + --shadow-floating-large: + 0px 0px 0px 1px @surface0, 0px 24px 48px 0px #010409; + --shadow-floating-xlarge: + 0px 0px 0px 1px @surface0, 0px 32px 64px 0px #010409; + --shadow-floating-legacy: 0px 6px 12px -3px @crust, 0px 6px 18px 0px @crust; + --outline-focus: @blue solid 2px; + + /* Customer Terms & Agreements Page: https://github.com/customer-terms */ + .enterprise-customer-agreement { + color: @text !important; + + &:hover { + .octicon, + h3 { + color: @accent-color !important; + } + } + } + + /* Enhanced Repo Insights Views - https://github.com/orgs/community/discussions/135572 */ + --data-blue-color-emphasis: @accent-color; + --data-red-color-emphasis: @red; + --data-green-color-emphasis: @green; + + /* Copilot Chat */ + --display-green-fgColor: @green; + --display-teal-fgColor: @teal; + --display-purple-fgColor: @mauve; + --display-blue-fgColor: @blue; + --display-pink-fgColor: @pink; + --display-gray-fgColor: @subtext0; + react-app[app-name="copilot-immersive-v1"], + copilot-dashboard-entrypoint { + button { + color: @text; + } + } + + --tooltip-fgColor: @base; + --tooltip-bgColor: @overlay2; + + /* Refined GitHub */ + --rgh-heat-color: @peach; + + .turbo-progress-bar { + background-color: @accent-color; + } + + .form-select { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + img[src="https://github.githubassets.com/assets/mona-loading-default-c3c7aad1282f.gif"] { + content: url("https://giscus.catppuccin.com/assets/loading_48x48.gif"); + } + + /* Header when logged out */ + .HeaderMenu-link { + color: @text; + + &:hover { + color: @text; + } + } + .header-search-button { + &.placeholder { + color: @subtext0; + } + + svg { + fill: @text !important; + } + } + .HeaderMenu-toggle-bar { + background-color: @text; + } + .notification-indicator .mail-status { + background-image: linear-gradient( + @accent-color, + darken(@accent-color, 5%) + ); + } + + .CheckStep { + .ansifg-r { + color: var(--color-ansi-red); + } + .ansifg-y { + color: var(--color-ansi-yellow); + } + .ansifg-g { + color: var(--color-ansi-green); + } + .ansifg-b { + color: var(--color-ansi-blue); + } + .ansifg-c { + color: var(--color-ansi-cyan); + } + .ansifg-m { + color: var(--color-ansi-magenta); + } + .ansifg-gr { + color: var(--color-ansi-gray); + } + } + + .js-activity-overview-graph .js-highlight-blob { + fill: @accent-color; + stroke: @accent-color; + } + + .subnav-link.selected { + border-bottom-color: @accent-color; + } + + /* Pull request check in progress indicator */ + [stroke="#DBAB0A"] { + stroke: fade(@yellow, 70%) !important; + } + [fill="#DBAB0A"] { + fill: @yellow !important; + } + } +} + +@-moz-document url-prefix( + "https://viewscreen.githubusercontent.com/markdown/mermaid" + ) { + [data-color-mode="auto"] { + @media (prefers-color-scheme: light) { + &[data-light-theme="light"] { + #catppuccin(@lightFlavor, @accentColor); + } + &[data-light-theme="dark"] { + #catppuccin(@darkFlavor, @accentColor); + } + } + + @media (prefers-color-scheme: dark) { + &[data-dark-theme="light"] { + #catppuccin(@lightFlavor, @accentColor); + } + &[data-dark-theme="dark"] { + #catppuccin(@darkFlavor, @accentColor); + } + } + } + [data-color-mode="light"][data-light-theme="dark"], + [data-color-mode="dark"][data-dark-theme="dark"] { + #catppuccin(@darkFlavor, @accentColor); + } + [data-color-mode="light"][data-light-theme="light"], + [data-color-mode="dark"][data-dark-theme="light"] { + #catppuccin(@lightFlavor, @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]; + + ::selection { + background-color: fade(@accent-color, 30%); + } + + background-color: @base; + + --color-btn-text: @text; + --color-btn-bg: @surface0; + --color-btn-border: @surface1; + --color-btn-hover-bg: @surface1; + --color-btn-hover-border: @surface2; + --color-btn-active-bg: @surface2; + --color-btn-selected-bg: @surface2; + --color-btn-counter-bg: @surface2; + --color-btn-outline-text: @accent-color; + --color-fg-muted: @subtext1; + --button-default-fgColor-rest: @text; + --button-default-bgColor-rest: @surface0; + --button-default-bgColor-hover: @surface1; + --button-default-bgColor-active: @surface2; + --button-default-bgColor-selected: @surface2; + --button-default-bgColor-disabled: fade(@surface0, 70%); + --button-default-borderColor-rest: @surface1; + --button-default-borderColor-hover: @surface1; + --button-default-borderColor-active: @surface1; + --button-default-borderColor-disabled: fade(@surface0, 70%); + + #diagram { + .node rect, + .node circle, + .node ellipse, + .node polygon, + .node path { + fill: fade(@accent-color, 10%); + stroke: @accent-color; + } + + .cluster rect { + fill: @surface0; + stroke: @surface2; + } + + .label text, + span, + p { + fill: @text; + color: @text; + } + + .flowchart-link { + stroke: @subtext0; + } + .marker { + stroke: @subtext0; + fill: @subtext0; + } + + .edgeLabel { + background-color: @crust; + p { + background-color: @surface2; + } + } + } + + .octicon { + fill: var(--color-fg-muted) !important; + } + } +} + +@-moz-document regexp( + "https:\/\/notebooks\.githubusercontent\.com\/view\/ipynb.*" + ) { + :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; + } + } + + --jp-border-color0: var(--color-scale-gray-7); + --jp-border-color1: var(--color-scale-gray-7); + --jp-border-color2: var(--color-scale-gray-8); + --jp-border-color3: var(--color-scale-gray-9); + --jp-ui-font-color0: @text; + --jp-ui-font-color1: fadeout(@text, 13%); + --jp-ui-font-color2: fadeout(@text, 46%); + --jp-ui-font-color3: fadeout(@text, 72%); + --jp-ui-inverse-font-color0: @crust; + --jp-ui-inverse-font-color1: fadeout(@crust, 20%); + --jp-ui-inverse-font-color2: fadeout(@crust, 50%); + --jp-ui-inverse-font-color3: fadeout(@crust, 70%); + --jp-content-font-color0: @text; + --jp-content-font-color1: @text; + --jp-content-font-color2: fadeout(@text, 30%); + --jp-content-font-color3: fadeout(@text, 50%); + --jp-content-link-color: @sapphire; + --jp-layout-color0: @base !important; + --jp-layout-color1: var(--color-scale-gray-9); + --jp-layout-color2: var(--color-scale-gray-8); + --jp-layout-color3: var(--color-scale-gray-7); + --jp-layout-color4: var(--color-scale-gray-6); + --jp-inverse-layout-color0: var(--color-scale-white); + --jp-inverse-layout-color1: var(--color-scale-white); + --jp-inverse-layout-color2: var(--color-scale-gray-2); + --jp-inverse-layout-color3: var(--color-scale-gray-4); + --jp-inverse-layout-color4: var(--color-scale-gray-6); + --jp-brand-color0: var(--color-scale-blue-7); + --jp-brand-color1: var(--color-scale-blue-5); + --jp-brand-color2: var(--color-scale-blue-3); + --jp-brand-color3: var(--color-scale-blue-1); + --jp-brand-color4: var(--color-scale-blue-0); + --jp-accent-color0: var(--color-scale-green-7); + --jp-accent-color1: var(--color-scale-green-5); + --jp-accent-color2: var(--color-scale-green-3); + --jp-accent-color3: var(--color-scale-green-1); + --jp-warn-color0: var(--color-scale-orange-7); + --jp-warn-color1: var(--color-scale-orange-5); + --jp-warn-color2: var(--color-scale-orange-3); + --jp-warn-color3: var(--color-scale-orange-1); + --jp-error-color0: var(--color-scale-red-7); + --jp-error-color1: var(--color-scale-red-5); + --jp-error-color2: var(--color-scale-red-3); + --jp-error-color3: var(--color-scale-red-1); + --jp-success-color0: var(--color-scale-green-7); + --jp-success-color1: var(--color-scale-green-5); + --jp-success-color2: var(--color-scale-green-3); + --jp-success-color3: var(--color-scale-green-1); + --jp-info-color0: var(--color-scale-blue-7); + --jp-info-color1: var(--color-scale-blue-5); + --jp-info-color2: var(--color-scale-blue-3); + --jp-info-color3: var(--color-scale-blue-1); + --jp-cell-editor-background: @mantle; + --jp-cell-editor-border-color: var(--color-scale-gray-7); + --jp-cell-editor-box-shadow: inset 0 0 2px var(--color-scale-blue-3); + --jp-cell-prompt-not-active-font-color: fadeout(@text, 50%); + --jp-cell-inprompt-font-color: var(--color-scale-blue-6); + --jp-cell-outprompt-font-color: var(--color-scale-coral-6); + --jp-notebook-multiselected-color: fadeout(@overlay2, 86%); + --jp-rendermime-error-background: fadeout(@red, 82%); + --jp-rendermime-table-row-background: var(--color-scale-gray-9); + --jp-rendermime-table-row-hover-background: fadeout(@surface2, 86%); + --jp-dialog-background: fadeout(@crust, 40%); + --jp-toolbar-box-shadow: 0px 0px 2px 0px fadeout(@crust, 20%); + --jp-input-box-shadow: inset 0 0 2px var(--color-scale-blue-3); + --jp-input-background: var(--color-scale-gray-8); + --jp-input-active-box-shadow-color: fadeout(@blue, 70%); + --jp-editor-selected-focused-background: fadeout(@blue, 86%); + --jp-mirror-editor-keyword-color: var(--color-scale-green-5); + --jp-mirror-editor-atom-color: var(--color-scale-blue-3); + --jp-mirror-editor-number-color: var(--color-scale-green-4); + --jp-mirror-editor-def-color: var(--color-scale-blue-6); + --jp-mirror-editor-variable-color: var(--color-scale-gray-3); + --jp-mirror-editor-variable-2-color: var(--color-scale-blue-4); + --jp-mirror-editor-variable-3-color: var(--color-scale-green-6); + --jp-mirror-editor-punctuation-color: var(--color-scale-blue-4); + --jp-mirror-editor-property-color: var(--color-scale-blue-4); + --jp-mirror-editor-operator-color: @mauve; + --jp-mirror-editor-comment-color: @subtext0; + --jp-mirror-editor-string-color: @peach; + --jp-mirror-editor-string-2-color: var(--color-scale-purple-3); + --jp-mirror-editor-meta-color: @mauve; + --jp-mirror-editor-qualifier-color: var(--color-scale-gray-5); + --jp-mirror-editor-builtin-color: var(--color-scale-green-6); + --jp-mirror-editor-bracket-color: var(--color-scale-gray-2); + --jp-mirror-editor-tag-color: var(--color-scale-blue-7); + --jp-mirror-editor-attribute-color: var(--color-scale-blue-7); + --jp-mirror-editor-header-color: var(--color-scale-blue-5); + --jp-mirror-editor-quote-color: var(--color-scale-green-3); + --jp-mirror-editor-link-color: var(--color-scale-blue-7); + --jp-mirror-editor-error-color: @red; + --jp-mirror-editor-hr-color: var(--color-scale-gray-8); + --jp-vega-background: var(--color-scale-gray-4); + --jp-search-selected-match-background-color: @yellow; + --jp-search-selected-match-color: @crust; + --jp-icon-contrast-color0: var(--color-scale-purple-6); + --jp-icon-contrast-color1: var(--color-scale-green-6); + --jp-icon-contrast-color2: var(--color-scale-pink-6); + --jp-icon-contrast-color3: var(--color-scale-blue-6); + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/gmail/catppuccin.user.css b/styles/gmail/catppuccin.user.css index c92cf5498e..23b2c1a1ee 100644 --- a/styles/gmail/catppuccin.user.css +++ b/styles/gmail/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Gmail Catppuccin +@name Gmail Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/gmail @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/gmail -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/gmail/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/gmail/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agmail @description Soothing pastel theme for Gmail @author Catppuccin @@ -13,978 +13,4 @@ @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("mail.google.com") { - @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]; - - @crust-filter: @catppuccin[@@lookup][@crust_filter]; - @text-filter: @catppuccin[@@lookup][@text_filter]; - @yellow-filter: @catppuccin[@@lookup][@yellow_filter]; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - - caret-color: @text; - } - - #input-styling { - input, - select, - button { - background-color: @mantle; - color: @text; - border-color: @surface0; - border-style: solid; - border-width: 1px; - box-shadow: none; - } - } - - * { - text-shadow: none !important; - } - - /* Gmail logo */ - [src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r5.png"], - [src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_dark_1x_r5.png"] - { - height: unset !important; - width: unset !important; - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - /* Tooltips */ - .T-ays-iP, - .gb_Ac { - background-color: @crust; - color: @text; - } - - /* Buttons */ - - /* Solid primary */ - .T-I-atl { - background-color: @accent-color; - color: @crust; - } - - /* Transparent primary */ - .l0, - div.b8 .a8k, - .bAo > .ad { - color: @accent-color; - - &::before { - background-color: @accent-color; - } - } - - /* Transparent secondary */ - .bs0 > .acM, - .bti > .btg, - .a8Y > .T-I-ax7 { - color: @text; - - /* Disabled */ - &.acN { - color: @subtext0; - } - - &:hover::before { - background-color: @overlay2; - } - } - - /* Header and sidebars */ - .w-asV, - .bkL, - .bhZ.bym, - .bhZ.bjB, - .bhZ.bym.baA { - background-color: @mantle; - } - /* Header icons */ - .gb_Lc svg, - .gb_Pc.gb_Uc svg, - .gb_Lc .gb_rd .gb_sd, - .gb_Lc .gb_rd .gb_Kc, - .gb_Lc .gb_rd .gb_ud, - .gb_Pc.gb_Uc .gb_sd { - color: @text; - } - /* Search mail input */ - .gb_Lc .gb_hd { - background-color: @crust; - - .gb_je, - svg { - color: @text; - } - } - /* Active search / filter modal */ - .gssb_c { - /* Icons */ - button svg, - .asor { - filter: @text-filter; - } - - /* Recent searches */ - .aRp, - .gssb_e, - .gssb_m { - background-color: @base; - color: @text; - } - - /* Hovered recent searches */ - .gssb_i { - background-color: @surface0; - - > .gssb_a { - border-left-color: @accent-color; - } - - /* X icon */ - .gsaq_b { - filter: @text-filter; - } - } - - .aSP, - .gssb_e { - border-color: @surface2; - } - - /* Separator */ - .gssb_l { - background-color: @surface0; - } - - /* Search results */ - - /* Icons */ - .gsoi_0, - .asor_o, - .gsoi_msra { - filter: @text-filter; - } - - /* People involved */ - .asor_e { - color: @subtext0; - } - } - /* Pill filters */ - .H2 { - background-color: @base; - border-color: @surface0; - color: @subtext1; - fill: @subtext1; - - &:hover { - background-color: @mantle; - } - - &.bws { - background-color: @accent-color; - color: @crust; - fill: @crust; - - .HV { - filter: @crust-filter; - } - - &:hover .H1 { - background-color: darken(@accent-color, 5%); - } - } - } - .aqc .H2 { - border-color: @text; - color: @text; - - &.bws { - background-color: @surface2; - color: @mantle; - } - } - /* Advanced search/filters modal */ - .ZF-z6, - .ZF-zT, - .ZF-Av .lJ, - .ZF-Av .lN { - background-color: @base; - - &, - .boo > .ZG, - .boo .aQl > .J-JN-M-I-Jm, - .boo .aaa > .J-JN-M-I-Jm, - .boo .ZE > .J-JN-M-I-Jm { - color: @text; - } - - .btl.acK, - .btn::before { - filter: @text-filter; - } - - /* Text inputs */ - .nr { - background-color: @base; - color: @text; - - &:focus { - box-shadow: inset 0 -1px 0 0 @accent-color; - } - } - - /* Calendar input */ - .bs5::after { - filter: @text-filter; - } - .J-JB-KA, - .J-JB-KA-JS, - .J-JB-KA-Jk, - .J-JB-KA-LG { - background-color: @base; - color: @text; - border-color: @surface0; - - /* Past days */ - .J-JB-KA-Ku-Kk { - color: @subtext0; - } - /* Future days */ - .J-JB-KA-a1R-JB.J-JB-KA-LH, - .J-JB-KA-a1R-JB.J-JB-KA-Ku-Kk, - .J-JB-KA-JB.J-JB-KA-a1R-JB { - color: @subtext1; - } - - /* Hovered day */ - .J-JB-KA-JB:not(.J-JB-KA-K8, .J-JB-KA-KO):hover { - color: @crust; - - &::before { - background-color: fade(@accent-color, 70%); - } - } - - /* Selected day */ - .J-JB-KA-KO { - color: @crust; - - &::before { - background-color: @accent-color; - } - } - - /* Unselected today */ - .J-JB-KA-K8 { - color: @crust; - - &::before { - background-color: @overlay2; - } - } - } - - /* Checkbox inputs */ - .bs1 + .bs3, - .btj + .aD { - color: @text; - - &::before { - filter: @text-filter; - } - } - - /* Dropdown/select inputs */ - .J-JN-M-I { - color: @text; - } - } - - /* Sidebar selected item */ - .TK .TO.nZ:active, - .TK .TO.ol:active, - .TK .TO.nZ, - .TK .TO.ol, - .byl .TK .nZ.aBP, - .byl .TK .nZ.aS3, - .byl .TK .nZ.aS4, - .byl .TK .nZ.aS5, - .byl .TK .nZ.aS6, - .VDSZAf.H5o3mc { - background-color: @surface0; - } - .TO.NQ, - .n6 .ah9:hover, - .n6 .ah9.aiu:hover, - .n6 .ah9:focus, - .TK .TO:active, - .n6 .ah9.aiu:active, - .CL:hover, - .H5o3mc:not(.VDSZAf):hover, - .CL.NQ, - .H5o3mc:not(.VDSZAf).NQ { - background-color: @surface1; - } - .byl .TK .TO.nZ > .aHS-bnt .n0, - .TK .nZ > .aHS-bnt .bsU, - .byl .TK .nZ.aS3 .nU > .n0, - .TK .nZ.aS3 .bsU, - .byl .TK .nZ.aS4 .nU > .n0, - .TK .nZ.aS4 .bsU, - .byl .TK .nZ.aS5 .nU > .n0, - .TK .nZ.aS5 .bsU, - .byl .TK .nZ.aS6 .nU > .n0, - .TK .nZ.aS6 .bsU, - .TK .TO.nZ .nU > .n0, - .TK .ol.NQ .nU > .n0, - .TK .TO.ol .nU > .n0, - .TK .nZ .bsU, - .TK .ol .bsU, - .VDSZAf.H5o3mc > .Q7, - .TO .nU > .n0, - .TO.NQ .nU > .n0, - .TO.nZ .nU > .n0, - .ah9 > .CJ, - .n3 > .CL > .CK, - .aAv, - .bsU { - color: @text; - } - /* Icons */ - .nZ > .TN.aHS-bnt .qj, - .TO:not(.nZ) > .TN > .qj:not([style*="background-color"]), - .n6 .n4 .G-asx, - .aAw .aAu, - .pM, - .TO.nZ > .TN > .qj, - .n3 .CL::before { - filter: @text-filter; - } - - /* Compose email button */ - .z0 > .L3 { - background-color: @accent-color; - color: @crust; - - &:focus { - background-color: @text; - } - } - .WR .z0 > .L3::before, - .WR.anZ .z0 > .L3::before { - filter: @crust-filter; - } - - /* Top section of inbox */ - .bkK > .nH { - background-color: @surface0; - - /* Icons */ - .bzn, - .aqJ .amJ, - .adg .adk { - filter: @text-filter; - } - } - /* Inbox categories */ - .aKx > .aKz { - color: @text; - } - /* Icons */ - .aAy > div { - filter: @text-filter; - } - /* Currently selected category */ - .J-KU-KO::before { - background-color: @text; - } - /* Inbox categories hover */ - .aRz.J-KU:hover { - background-color: @surface1; - } - /* Email count / pagination */ - div[aria-label="Show more messages"] { - .Dj { - color: @subtext1; - } - - &::before { - background-color: @text; - } - } - .h0 { - color: @subtext1; - } - /* Inbox footer */ - .md.mj, - .aeU .ma, - .ma .mb, - .ae3 .l6, - .l9, - .l8, - .aiD { - color: @subtext1; - } - /* Storage progress bar */ - .aiC { - background-color: @overlay0; - - .aiA { - background-color: @subtext0; - } - } - /* External link icon */ - .aiz { - filter: @text-filter; - } - - /* Read emails */ - .yO { - background-color: @base; - color: @text; - - box-shadow: inset 0 -1px 0 0 @surface0; - - &:hover { - box-shadow: - inset 1px 0 0 @surface0, - inset -1px 0 0 @surface0, - 0 0 4px 0 @surface1, - 0 0 6px 2px @surface1; - } - } - /* Read email text */ - .zE { - color: @text; - } - // Select icon - .xY > .T-Jo, - td.apU > .T-KT.aXw::before, - // Important icon - .pG .a9q, - // Delete/trash icon - .aqN, - // Hover action icons - .bqY li { - filter: @text-filter; - } - /* Important icon filled, star icon filled */ - .ha .a9q.pH, - .a9q.pH, - .aoj, - td.apU > .T-KT.T-KT-Jp::before { - filter: @yellow-filter; - } - .pG:hover > .a9q::before { - background-color: fade(@yellow, 30%); - } - /* Read email dates */ - .yO > .xW { - color: @subtext0; - } - /* Read email summary truncated */ - .y2 { - color: @subtext1; - } - /* Selected unread emails */ - .x7 { - background-color: @accent-color; - color: @mantle; - - /* Dates */ - .xW { - color: @crust; - } - - // Select icon - .xY > .T-Jo, - // Star icon - td.apU > .T-KT.aXw::before, - // Important icon - .pG .a9q, - // Delete/trash icon - .aqN, - // Hover action icons - .bqY li { - filter: @crust-filter; - } - } - /* Unsubscribe button */ - .aOd.T-I { - color: @text; - box-shadow: inset 0 0 0 1px @surface2; - } - /* Draft text */ - .boq { - color: @red; - } - /* No drafts message, trash 30 days message */ - .TD, - .Tm .ya { - background-color: @surface1; - color: @text; - } - /* Your social/promotions/updates tab is empty */ - .aRs { - background-color: @base; - color: @subtext0; - - .aRv { - color: @text; - } - .aRq { - color: @accent-color; - } - } - /* You could lose access banner */ - .GR { - background-color: @base; - - /* Primary text */ - .GX { - color: @text; - } - /* Subtext */ - .GT { - color: @subtext1; - } - - /* Dismiss button */ - .GW { - color: @text; - - &::before { - background-color: @text; - } - } - /* Add recovery info button */ - .GV { - color: @accent-color; - - &::before { - background-color: @accent-color; - } - } - } - /* Attachments chips */ - .brc { - box-shadow: inset 0 0 0 1px @surface0; - color: @text; - - &:hover { - background-color: @surface0; - } - } - - /* Floating menu */ - .J-M, - .OO.Pa { - background-color: @surface1; - - /* Menu section header */ - .J-awr, - .asc { - color: @subtext1; - } - - /* Menu item */ - - .J-N, - .J-Ks-KO .J-N-Jz, - .J-N-JT .J-N-Jz, - .J-N-JW .J-N-Jz, - .J-LC, - .J-JK, - .bmz { - color: @text; - } - /* Disabled */ - .J-N-JE .J-N-atj, - .J-N-JE .J-N-Jz { - color: @subtext0 !important; - } - - /* Checkmark, arrow, checkbox, star, calendar icon */ - .J-Ks-KO .J-N-Jo, - .asi .J-Ks-KO::before, - .J-Ph-hFsbo, - .J-LC-Jo, - .bi4 > .T-KT:not(.T-KT-Jp, .byM)::before, - .aaA.mYVwse, - .J-N-JX { - filter: @text-filter; - } - .bmz.bjF::before { - border-color: @subtext0; - } - - /* Hovered menu item */ - .J-N-JT, - .J-N-JW, - .J-LC-JT, - .J-LC-JW, - .J-JK-JT, - .J-JK-JW, - .bmz.bk5 { - background-color: @surface2; - border-color: @overlay1; - } - - /* Menu section divider */ - .J-Kh { - border-top-color: @surface2; - } - } - /* Modal search input */ - .agd .J-M-JJ input { - background-color: @surface1; - color: @text; - } - .bqf { - box-shadow: inset 0 -2px 0 0 @surface2; - - &:focus { - box-shadow: inset 0 -2px 0 0 @accent-color; - } - } - /* Magnifying glass icon */ - .A0 { - filter: @text-filter; - } - /* Edit label modal */ - div.Kj-JD { - background-color: @base; - - /* Edit label text */ - span.Kj-JD-K7-K0 { - color: @text; - } - - /* Close X icon */ - span.Kj-JD-K7-Jq::after { - filter: @text-filter; - } - - #input-styling(); - - /* Input labels */ - div.Kj-JD-Jz { - color: @subtext1; - } - - /* Cancel button */ - div.Kj-JD-Jl > button, - .bBh .Kj-JD-Jl > .J-at1-auR { - color: @subtext1; - } - - /* Save button */ - div.Kj-JD-Jl > button.J-at1-atl, - div.Kj-JD-Jl > button.J-at1-auR { - background-color: @accent-color; - color: @crust; - } - } - - /* Toast notifications */ - .bAp.b8.UC .vh { - background-color: @crust; - color: @text; - } - /* Close icon */ - .b8 .bBe .bBf { - filter: @text-filter; - } - - /* Compose mail window */ - /* Top header bar */ - .Hy.Hy .m, - .IG { - background-color: @mantle; - - .Hp, - .zu, - .H, - .Iy .az9 { - color: @text; - } - - .Hm img, - .SB, - .b7 .mK, - .bAm .aaq .mK, - .Un .mK, - .HX .mK, - .HQ .Un::after { - filter: @text-filter; - } - } - .aaZ, - .Ap, - .Am, - .aDg > .aDj, - .aoP .Ar, - .wO, - .aoT, - .agP, - .aGb, - .GQ { - color: @text; - caret-color: @text; - - &, - &::before { - background: @base; - } - } - .gQ, - .gO, - .oL { - color: @subtext0; - } - /* Bottom toolbar icons */ - .aaA, - .btC .dv, - .btC .og.T-I-J3, - .btC .J-N-JX.og.T-I-J3, - .btC .Y1, - .btC .Xv.T-I.J-JN-M-I > .J-JN-M-I-JG, - .J-JN-M-I-JG, - .J-Z-M-I-J6-H > .J-Z-M-I-JG { - filter: @text-filter; - } - /* Floating toolbar (expanded window) */ - .J-Z { - background-color: @mantle; - - .J-Z-I, - .J-Z-M-I { - color: @subtext1; - } - } - /* Send button */ - .gU .v7.T-I:not(.btz), - .gU .hG:not(.v6) { - background-color: @accent-color; - color: @crust; - } - .hG > .G-asx, - .SI .hG > .G-asx { - filter: @crust-filter; - } - /* Contact autofill */ - .afC, - .bvx { - background: @mantle; - - /* Contact list item */ - .agJ { - .aL8, - .aXS { - color: @text; - } - - &:hover { - background: @base; - } - } - } - - --pkw-background: @mantle; - --pkw-outline: @surface0; - --pkw-outline-variant: @surface0; - --pkw-on-surface-variant: @text; - /* Contact chip */ - .agh, - .bbV { - background: @base; - - .afV { - background: @base; - color: @text; - - &:hover { - background: @surface0; - color: @text; - } - } - } - - /* Settings */ - .dt { - color: @text; - } - /* Navigation header */ - .v { - /* Tabs */ - .fY, - .f1 { - background-color: @surface0; - - .f0 { - color: @text; - } - } - - /* Currently selected tab */ - .fZ { - box-shadow: inset 0 -2px 0 0 @accent-color; - } - } - /* Main panel */ - .r4 { - background-color: @base; - color: @text; - - /* Dividers */ - .r7 td, - .Jb .J0:not(:last-child) { - border-bottom-color: @surface0; - } - - /* Links */ - .r7 .e, - .sA, - .r4 .e, - .el { - color: @accent-color; - } - - #input-styling(); - .qK, - .qL { - background-color: @mantle; - } - .nr, - .Ar { - background-color: @base; - color: @text; - border-color: @surface0 !important; - } - /* Some buttons */ - .Uu { - box-shadow: inset 0 0 0 1px @surface0; - color: @accent-color; - } - } - /* Labels page */ - .alO { - background-color: @base; - color: @text; - - .rb { - color: @subtext1; - } - - /* Table items */ - .To.Ze { - background-color: @surface0; - } - - /* Links */ - .alP { - color: @accent-color; - } - - /* Dividers */ - .rZ { - background-color: @surface0; - } - } - - /* Confirm popup modal */ - div[aria-modal="true"] { - --gm3-dialog-refactored-container-color: @base; - --gm3-dialog-refactored-supporting-text-color: @text; - --gm3-dialog-refactored-headline-color: @text; - - /* Buttons */ - [data-mdc-dialog-action="ok"] { - background-color: @accent-color; - --gm3-button-text-label-text-color: @crust; - --gm3-button-text-hover-label-text-color: @crust; - --gm3-button-text-pressed-label-text-color: @crust; - } - - [data-mdc-dialog-action="cancel"] { - --gm3-button-text-label-text-color: @subtext1; - --gm3-button-text-hover-label-text-color: @text; - --gm3-button-text-focus-label-text-color: @text; - --gm3-button-text-pressed-label-text-color: @text; - - &:hover, - &:focus, - &:active { - background-color: @surface0; - } - } - } - } -} - -/* prettier-ignore */ -@catppuccin: { - @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @yellow_filter: brightness(0) saturate(100%) invert(84%) sepia(47%) saturate(5389%) hue-rotate(348deg) brightness(92%) contrast(90%);; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @text_filter: brightness(0) saturate(100%) invert(31%) sepia(12%) saturate(1015%) hue-rotate(196deg) brightness(94%) contrast(91%); @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; @crust_filter: brightness(0) saturate(100%) invert(96%) sepia(3%) saturate(583%) hue-rotate(187deg) brightness(92%) contrast(97%); }; - @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @yellow_filter: brightness(0) saturate(100%) invert(79%) sepia(20%) saturate(586%) hue-rotate(1deg) brightness(103%) contrast(84%); @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @text_filter: brightness(0) saturate(100%) invert(80%) sepia(11%) saturate(726%) hue-rotate(192deg) brightness(104%) contrast(92%); @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; @crust_filter: brightness(0) saturate(100%) invert(11%) sepia(6%) saturate(3257%) hue-rotate(192deg) brightness(93%) contrast(88%); }; - @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @yellow_filter: brightness(0) saturate(100%) invert(87%) sepia(24%) saturate(488%) hue-rotate(350deg) brightness(97%) contrast(93%); @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @text_filter: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1385%) hue-rotate(192deg) brightness(101%) contrast(92%); @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; @crust_filter: brightness(0) saturate(100%) invert(9%) sepia(7%) saturate(2560%) hue-rotate(198deg) brightness(95%) contrast(97%); }; - @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @yellow_filter: brightness(0) saturate(100%) invert(83%) sepia(35%) saturate(324%) hue-rotate(347deg) brightness(105%) contrast(95%); @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @text_filter: brightness(0) saturate(100%) invert(87%) sepia(6%) saturate(985%) hue-rotate(191deg) brightness(96%) contrast(99%); @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; @crust_filter: brightness(0) saturate(100%) invert(3%) sepia(12%) saturate(3951%) hue-rotate(206deg) brightness(96%) contrast(92%); }; -} - -// vim:ft=less +==/UserStyle== */ \ No newline at end of file diff --git a/styles/gmail/catppuccin.user.less b/styles/gmail/catppuccin.user.less new file mode 100644 index 0000000000..a7b629a2c1 --- /dev/null +++ b/styles/gmail/catppuccin.user.less @@ -0,0 +1,987 @@ +/* ==UserStyle== +@name Gmail Catppuccin +@namespace github.com/catppuccin/userstyles/styles/gmail +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/gmail +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/gmail/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agmail +@description Soothing pastel theme for Gmail +@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("mail.google.com") { + @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]; + + @crust-filter: @catppuccin[@@lookup][@crust_filter]; + @text-filter: @catppuccin[@@lookup][@text_filter]; + @yellow-filter: @catppuccin[@@lookup][@yellow_filter]; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + + caret-color: @text; + } + + #input-styling { + input, + select, + button { + background-color: @mantle; + color: @text; + border-color: @surface0; + border-style: solid; + border-width: 1px; + box-shadow: none; + } + } + + * { + text-shadow: none !important; + } + + /* Gmail logo */ + [src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r5.png"], + [src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_dark_1x_r5.png"] { + height: unset !important; + width: unset !important; + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + /* Tooltips */ + .T-ays-iP, + .gb_Ac { + background-color: @crust; + color: @text; + } + + /* Buttons */ + + /* Solid primary */ + .T-I-atl { + background-color: @accent-color; + color: @crust; + } + + /* Transparent primary */ + .l0, + div.b8 .a8k, + .bAo > .ad { + color: @accent-color; + + &::before { + background-color: @accent-color; + } + } + + /* Transparent secondary */ + .bs0 > .acM, + .bti > .btg, + .a8Y > .T-I-ax7 { + color: @text; + + /* Disabled */ + &.acN { + color: @subtext0; + } + + &:hover::before { + background-color: @overlay2; + } + } + + /* Header and sidebars */ + .w-asV, + .bkL, + .bhZ.bym, + .bhZ.bjB, + .bhZ.bym.baA { + background-color: @mantle; + } + /* Header icons */ + .gb_Lc svg, + .gb_Pc.gb_Uc svg, + .gb_Lc .gb_rd .gb_sd, + .gb_Lc .gb_rd .gb_Kc, + .gb_Lc .gb_rd .gb_ud, + .gb_Pc.gb_Uc .gb_sd { + color: @text; + } + /* Search mail input */ + .gb_Lc .gb_hd { + background-color: @crust; + + .gb_je, + svg { + color: @text; + } + } + /* Active search / filter modal */ + .gssb_c { + /* Icons */ + button svg, + .asor { + filter: @text-filter; + } + + /* Recent searches */ + .aRp, + .gssb_e, + .gssb_m { + background-color: @base; + color: @text; + } + + /* Hovered recent searches */ + .gssb_i { + background-color: @surface0; + + > .gssb_a { + border-left-color: @accent-color; + } + + /* X icon */ + .gsaq_b { + filter: @text-filter; + } + } + + .aSP, + .gssb_e { + border-color: @surface2; + } + + /* Separator */ + .gssb_l { + background-color: @surface0; + } + + /* Search results */ + + /* Icons */ + .gsoi_0, + .asor_o, + .gsoi_msra { + filter: @text-filter; + } + + /* People involved */ + .asor_e { + color: @subtext0; + } + } + /* Pill filters */ + .H2 { + background-color: @base; + border-color: @surface0; + color: @subtext1; + fill: @subtext1; + + &:hover { + background-color: @mantle; + } + + &.bws { + background-color: @accent-color; + color: @crust; + fill: @crust; + + .HV { + filter: @crust-filter; + } + + &:hover .H1 { + background-color: darken(@accent-color, 5%); + } + } + } + .aqc .H2 { + border-color: @text; + color: @text; + + &.bws { + background-color: @surface2; + color: @mantle; + } + } + /* Advanced search/filters modal */ + .ZF-z6, + .ZF-zT, + .ZF-Av .lJ, + .ZF-Av .lN { + background-color: @base; + + &, + .boo > .ZG, + .boo .aQl > .J-JN-M-I-Jm, + .boo .aaa > .J-JN-M-I-Jm, + .boo .ZE > .J-JN-M-I-Jm { + color: @text; + } + + .btl.acK, + .btn::before { + filter: @text-filter; + } + + /* Text inputs */ + .nr { + background-color: @base; + color: @text; + + &:focus { + box-shadow: inset 0 -1px 0 0 @accent-color; + } + } + + /* Calendar input */ + .bs5::after { + filter: @text-filter; + } + .J-JB-KA, + .J-JB-KA-JS, + .J-JB-KA-Jk, + .J-JB-KA-LG { + background-color: @base; + color: @text; + border-color: @surface0; + + /* Past days */ + .J-JB-KA-Ku-Kk { + color: @subtext0; + } + /* Future days */ + .J-JB-KA-a1R-JB.J-JB-KA-LH, + .J-JB-KA-a1R-JB.J-JB-KA-Ku-Kk, + .J-JB-KA-JB.J-JB-KA-a1R-JB { + color: @subtext1; + } + + /* Hovered day */ + .J-JB-KA-JB:not(.J-JB-KA-K8, .J-JB-KA-KO):hover { + color: @crust; + + &::before { + background-color: fade(@accent-color, 70%); + } + } + + /* Selected day */ + .J-JB-KA-KO { + color: @crust; + + &::before { + background-color: @accent-color; + } + } + + /* Unselected today */ + .J-JB-KA-K8 { + color: @crust; + + &::before { + background-color: @overlay2; + } + } + } + + /* Checkbox inputs */ + .bs1 + .bs3, + .btj + .aD { + color: @text; + + &::before { + filter: @text-filter; + } + } + + /* Dropdown/select inputs */ + .J-JN-M-I { + color: @text; + } + } + + /* Sidebar selected item */ + .TK .TO.nZ:active, + .TK .TO.ol:active, + .TK .TO.nZ, + .TK .TO.ol, + .byl .TK .nZ.aBP, + .byl .TK .nZ.aS3, + .byl .TK .nZ.aS4, + .byl .TK .nZ.aS5, + .byl .TK .nZ.aS6, + .VDSZAf.H5o3mc { + background-color: @surface0; + } + .TO.NQ, + .n6 .ah9:hover, + .n6 .ah9.aiu:hover, + .n6 .ah9:focus, + .TK .TO:active, + .n6 .ah9.aiu:active, + .CL:hover, + .H5o3mc:not(.VDSZAf):hover, + .CL.NQ, + .H5o3mc:not(.VDSZAf).NQ { + background-color: @surface1; + } + .byl .TK .TO.nZ > .aHS-bnt .n0, + .TK .nZ > .aHS-bnt .bsU, + .byl .TK .nZ.aS3 .nU > .n0, + .TK .nZ.aS3 .bsU, + .byl .TK .nZ.aS4 .nU > .n0, + .TK .nZ.aS4 .bsU, + .byl .TK .nZ.aS5 .nU > .n0, + .TK .nZ.aS5 .bsU, + .byl .TK .nZ.aS6 .nU > .n0, + .TK .nZ.aS6 .bsU, + .TK .TO.nZ .nU > .n0, + .TK .ol.NQ .nU > .n0, + .TK .TO.ol .nU > .n0, + .TK .nZ .bsU, + .TK .ol .bsU, + .VDSZAf.H5o3mc > .Q7, + .TO .nU > .n0, + .TO.NQ .nU > .n0, + .TO.nZ .nU > .n0, + .ah9 > .CJ, + .n3 > .CL > .CK, + .aAv, + .bsU { + color: @text; + } + /* Icons */ + .nZ > .TN.aHS-bnt .qj, + .TO:not(.nZ) > .TN > .qj:not([style*="background-color"]), + .n6 .n4 .G-asx, + .aAw .aAu, + .pM, + .TO.nZ > .TN > .qj, + .n3 .CL::before { + filter: @text-filter; + } + + /* Compose email button */ + .z0 > .L3 { + background-color: @accent-color; + color: @crust; + + &:focus { + background-color: @text; + } + } + .WR .z0 > .L3::before, + .WR.anZ .z0 > .L3::before { + filter: @crust-filter; + } + + /* Top section of inbox */ + .bkK > .nH { + background-color: @surface0; + + /* Icons */ + .bzn, + .aqJ .amJ, + .adg .adk { + filter: @text-filter; + } + } + /* Inbox categories */ + .aKx > .aKz { + color: @text; + } + /* Icons */ + .aAy > div { + filter: @text-filter; + } + /* Currently selected category */ + .J-KU-KO::before { + background-color: @text; + } + /* Inbox categories hover */ + .aRz.J-KU:hover { + background-color: @surface1; + } + /* Email count / pagination */ + div[aria-label="Show more messages"] { + .Dj { + color: @subtext1; + } + + &::before { + background-color: @text; + } + } + .h0 { + color: @subtext1; + } + /* Inbox footer */ + .md.mj, + .aeU .ma, + .ma .mb, + .ae3 .l6, + .l9, + .l8, + .aiD { + color: @subtext1; + } + /* Storage progress bar */ + .aiC { + background-color: @overlay0; + + .aiA { + background-color: @subtext0; + } + } + /* External link icon */ + .aiz { + filter: @text-filter; + } + + /* Read emails */ + .yO { + background-color: @base; + color: @text; + + box-shadow: inset 0 -1px 0 0 @surface0; + + &:hover { + box-shadow: + inset 1px 0 0 @surface0, + inset -1px 0 0 @surface0, + 0 0 4px 0 @surface1, + 0 0 6px 2px @surface1; + } + } + /* Read email text */ + .zE { + color: @text; + } + // Select icon + .xY > .T-Jo, + td.apU > .T-KT.aXw::before, + // Important icon + .pG .a9q, + // Delete/trash icon + .aqN, + // Hover action icons + .bqY li { + filter: @text-filter; + } + /* Important icon filled, star icon filled */ + .ha .a9q.pH, + .a9q.pH, + .aoj, + td.apU > .T-KT.T-KT-Jp::before { + filter: @yellow-filter; + } + .pG:hover > .a9q::before { + background-color: fade(@yellow, 30%); + } + /* Read email dates */ + .yO > .xW { + color: @subtext0; + } + /* Read email summary truncated */ + .y2 { + color: @subtext1; + } + /* Selected unread emails */ + .x7 { + background-color: @accent-color; + color: @mantle; + + /* Dates */ + .xW { + color: @crust; + } + + // Select icon + .xY > .T-Jo, + // Star icon + td.apU > .T-KT.aXw::before, + // Important icon + .pG .a9q, + // Delete/trash icon + .aqN, + // Hover action icons + .bqY li { + filter: @crust-filter; + } + } + /* Unsubscribe button */ + .aOd.T-I { + color: @text; + box-shadow: inset 0 0 0 1px @surface2; + } + /* Draft text */ + .boq { + color: @red; + } + /* No drafts message, trash 30 days message */ + .TD, + .Tm .ya { + background-color: @surface1; + color: @text; + } + /* Your social/promotions/updates tab is empty */ + .aRs { + background-color: @base; + color: @subtext0; + + .aRv { + color: @text; + } + .aRq { + color: @accent-color; + } + } + /* You could lose access banner */ + .GR { + background-color: @base; + + /* Primary text */ + .GX { + color: @text; + } + /* Subtext */ + .GT { + color: @subtext1; + } + + /* Dismiss button */ + .GW { + color: @text; + + &::before { + background-color: @text; + } + } + /* Add recovery info button */ + .GV { + color: @accent-color; + + &::before { + background-color: @accent-color; + } + } + } + /* Attachments chips */ + .brc { + box-shadow: inset 0 0 0 1px @surface0; + color: @text; + + &:hover { + background-color: @surface0; + } + } + + /* Floating menu */ + .J-M, + .OO.Pa { + background-color: @surface1; + + /* Menu section header */ + .J-awr, + .asc { + color: @subtext1; + } + + /* Menu item */ + + .J-N, + .J-Ks-KO .J-N-Jz, + .J-N-JT .J-N-Jz, + .J-N-JW .J-N-Jz, + .J-LC, + .J-JK, + .bmz { + color: @text; + } + /* Disabled */ + .J-N-JE .J-N-atj, + .J-N-JE .J-N-Jz { + color: @subtext0 !important; + } + + /* Checkmark, arrow, checkbox, star, calendar icon */ + .J-Ks-KO .J-N-Jo, + .asi .J-Ks-KO::before, + .J-Ph-hFsbo, + .J-LC-Jo, + .bi4 > .T-KT:not(.T-KT-Jp, .byM)::before, + .aaA.mYVwse, + .J-N-JX { + filter: @text-filter; + } + .bmz.bjF::before { + border-color: @subtext0; + } + + /* Hovered menu item */ + .J-N-JT, + .J-N-JW, + .J-LC-JT, + .J-LC-JW, + .J-JK-JT, + .J-JK-JW, + .bmz.bk5 { + background-color: @surface2; + border-color: @overlay1; + } + + /* Menu section divider */ + .J-Kh { + border-top-color: @surface2; + } + } + /* Modal search input */ + .agd .J-M-JJ input { + background-color: @surface1; + color: @text; + } + .bqf { + box-shadow: inset 0 -2px 0 0 @surface2; + + &:focus { + box-shadow: inset 0 -2px 0 0 @accent-color; + } + } + /* Magnifying glass icon */ + .A0 { + filter: @text-filter; + } + /* Edit label modal */ + div.Kj-JD { + background-color: @base; + + /* Edit label text */ + span.Kj-JD-K7-K0 { + color: @text; + } + + /* Close X icon */ + span.Kj-JD-K7-Jq::after { + filter: @text-filter; + } + + #input-styling(); + + /* Input labels */ + div.Kj-JD-Jz { + color: @subtext1; + } + + /* Cancel button */ + div.Kj-JD-Jl > button, + .bBh .Kj-JD-Jl > .J-at1-auR { + color: @subtext1; + } + + /* Save button */ + div.Kj-JD-Jl > button.J-at1-atl, + div.Kj-JD-Jl > button.J-at1-auR { + background-color: @accent-color; + color: @crust; + } + } + + /* Toast notifications */ + .bAp.b8.UC .vh { + background-color: @crust; + color: @text; + } + /* Close icon */ + .b8 .bBe .bBf { + filter: @text-filter; + } + + /* Compose mail window */ + /* Top header bar */ + .Hy.Hy .m, + .IG { + background-color: @mantle; + + .Hp, + .zu, + .H, + .Iy .az9 { + color: @text; + } + + .Hm img, + .SB, + .b7 .mK, + .bAm .aaq .mK, + .Un .mK, + .HX .mK, + .HQ .Un::after { + filter: @text-filter; + } + } + .aaZ, + .Ap, + .Am, + .aDg > .aDj, + .aoP .Ar, + .wO, + .aoT, + .agP, + .aGb, + .GQ { + color: @text; + caret-color: @text; + + &, + &::before { + background: @base; + } + } + .gQ, + .gO, + .oL { + color: @subtext0; + } + /* Bottom toolbar icons */ + .aaA, + .btC .dv, + .btC .og.T-I-J3, + .btC .J-N-JX.og.T-I-J3, + .btC .Y1, + .btC .Xv.T-I.J-JN-M-I > .J-JN-M-I-JG, + .J-JN-M-I-JG, + .J-Z-M-I-J6-H > .J-Z-M-I-JG { + filter: @text-filter; + } + /* Floating toolbar (expanded window) */ + .J-Z { + background-color: @mantle; + + .J-Z-I, + .J-Z-M-I { + color: @subtext1; + } + } + /* Send button */ + .gU .v7.T-I:not(.btz), + .gU .hG:not(.v6) { + background-color: @accent-color; + color: @crust; + } + .hG > .G-asx, + .SI .hG > .G-asx { + filter: @crust-filter; + } + /* Contact autofill */ + .afC, + .bvx { + background: @mantle; + + /* Contact list item */ + .agJ { + .aL8, + .aXS { + color: @text; + } + + &:hover { + background: @base; + } + } + } + + --pkw-background: @mantle; + --pkw-outline: @surface0; + --pkw-outline-variant: @surface0; + --pkw-on-surface-variant: @text; + /* Contact chip */ + .agh, + .bbV { + background: @base; + + .afV { + background: @base; + color: @text; + + &:hover { + background: @surface0; + color: @text; + } + } + } + + /* Settings */ + .dt { + color: @text; + } + /* Navigation header */ + .v { + /* Tabs */ + .fY, + .f1 { + background-color: @surface0; + + .f0 { + color: @text; + } + } + + /* Currently selected tab */ + .fZ { + box-shadow: inset 0 -2px 0 0 @accent-color; + } + } + /* Main panel */ + .r4 { + background-color: @base; + color: @text; + + /* Dividers */ + .r7 td, + .Jb .J0:not(:last-child) { + border-bottom-color: @surface0; + } + + /* Links */ + .r7 .e, + .sA, + .r4 .e, + .el { + color: @accent-color; + } + + #input-styling(); + .qK, + .qL { + background-color: @mantle; + } + .nr, + .Ar { + background-color: @base; + color: @text; + border-color: @surface0 !important; + } + /* Some buttons */ + .Uu { + box-shadow: inset 0 0 0 1px @surface0; + color: @accent-color; + } + } + /* Labels page */ + .alO { + background-color: @base; + color: @text; + + .rb { + color: @subtext1; + } + + /* Table items */ + .To.Ze { + background-color: @surface0; + } + + /* Links */ + .alP { + color: @accent-color; + } + + /* Dividers */ + .rZ { + background-color: @surface0; + } + } + + /* Confirm popup modal */ + div[aria-modal="true"] { + --gm3-dialog-refactored-container-color: @base; + --gm3-dialog-refactored-supporting-text-color: @text; + --gm3-dialog-refactored-headline-color: @text; + + /* Buttons */ + [data-mdc-dialog-action="ok"] { + background-color: @accent-color; + --gm3-button-text-label-text-color: @crust; + --gm3-button-text-hover-label-text-color: @crust; + --gm3-button-text-pressed-label-text-color: @crust; + } + + [data-mdc-dialog-action="cancel"] { + --gm3-button-text-label-text-color: @subtext1; + --gm3-button-text-hover-label-text-color: @text; + --gm3-button-text-focus-label-text-color: @text; + --gm3-button-text-pressed-label-text-color: @text; + + &:hover, + &:focus, + &:active { + background-color: @surface0; + } + } + } + } +} + +/* deno-fmt-ignore */ +@catppuccin: { + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @yellow_filter: brightness(0) saturate(100%) invert(84%) sepia(47%) saturate(5389%) hue-rotate(348deg) brightness(92%) contrast(90%);; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @text_filter: brightness(0) saturate(100%) invert(31%) sepia(12%) saturate(1015%) hue-rotate(196deg) brightness(94%) contrast(91%); @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; @crust_filter: brightness(0) saturate(100%) invert(96%) sepia(3%) saturate(583%) hue-rotate(187deg) brightness(92%) contrast(97%); }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @yellow_filter: brightness(0) saturate(100%) invert(79%) sepia(20%) saturate(586%) hue-rotate(1deg) brightness(103%) contrast(84%); @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @text_filter: brightness(0) saturate(100%) invert(80%) sepia(11%) saturate(726%) hue-rotate(192deg) brightness(104%) contrast(92%); @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; @crust_filter: brightness(0) saturate(100%) invert(11%) sepia(6%) saturate(3257%) hue-rotate(192deg) brightness(93%) contrast(88%); }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @yellow_filter: brightness(0) saturate(100%) invert(87%) sepia(24%) saturate(488%) hue-rotate(350deg) brightness(97%) contrast(93%); @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @text_filter: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1385%) hue-rotate(192deg) brightness(101%) contrast(92%); @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; @crust_filter: brightness(0) saturate(100%) invert(9%) sepia(7%) saturate(2560%) hue-rotate(198deg) brightness(95%) contrast(97%); }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @yellow_filter: brightness(0) saturate(100%) invert(83%) sepia(35%) saturate(324%) hue-rotate(347deg) brightness(105%) contrast(95%); @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @text_filter: brightness(0) saturate(100%) invert(87%) sepia(6%) saturate(985%) hue-rotate(191deg) brightness(96%) contrast(99%); @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; @crust_filter: brightness(0) saturate(100%) invert(3%) sepia(12%) saturate(3951%) hue-rotate(206deg) brightness(96%) contrast(92%); }; +}; diff --git a/styles/go.dev/catppuccin.user.css b/styles/go.dev/catppuccin.user.css index fca9da4a8a..635fecb487 100644 --- a/styles/go.dev/catppuccin.user.css +++ b/styles/go.dev/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name go.dev Catppuccin +@name go.dev Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/go.dev @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/go.dev -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/go.dev/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/go.dev/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ago.dev @description Soothing pastel theme for go.dev @author Catppuccin @@ -13,928 +13,4 @@ @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('go.dev') { - @media (prefers-color-scheme: light) { - :root[data-theme="auto"], - :root:not([data-theme]) { - #catppuccin(@lightFlavor, @accentColor); - } - } - @media (prefers-color-scheme: dark) { - :root[data-theme="auto"], - :root:not([data-theme]) { - #catppuccin(@darkFlavor, @accentColor); - } - } - :root[data-theme="dark"] { - #catppuccin(@darkFlavor, @accentColor); - } - :root[data-theme="light"] { - #catppuccin(@lightFlavor, @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; - } - } - - background-color: @base; - - --abbey: @mantle; - --black-1: @crust; - --color-border: @surface2; - --color-background: @base; - --color-background-accented: @mantle; - --color-background-banner: @mantle; - --color-background-card-footer: @crust; - --color-background-code: @surface0; // Code Snippets - --color-background-info: @surface1; - --color-background-inverted: @crust; - --color-background-logo: @text; - --color-background-playground-input: @mantle; - --color-brand-primary: @accent-color; // Affects most Go-Color Elements - --color-button: @accent-color; - --color-button-accented: @accent-color; - --color-button-text: @crust; - --color-button-text-disabled: @subtext0; - --color-bright-text-link: @accent-color; - --color-text: @text; - --color-text-link: @accent-color; - --color-text-subtle: @subtext1; - --focus-box-shadow: 0 0 0.0625rem 0.0625rem @accent-color; // Only modifies color; - --gray-2: @surface0; - --gray-3: @text; - --gray-6: @crust; - --pink: @red; - --turq-dark: @accent-color; - --white: @text; - --border-code: 0.0625rem @surface2 solid; - - .btn { - background: @accent-color; - color: @crust; - } - // /dl page in go.dev - .Downloads { - div.filename img { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - table.downloadtable { - --color-background-accented: @surface0; - } - } - // Main Page Footer & Pkg.go Footer - .Footer, - .go-Footer { - background-color: @mantle; - - button[aria-label="Shorcuts Modal"] img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - img.Footer-gopher, - img.go-Footer-gopher { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - img.go-Footer-googleLogoImg, - img.Footer-googleLogoImg { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } - // Main Page Footer Get Started - .GettingStartedGo-primaryCta { - color: @crust; - } - - // Main Page Carousel - .GoCarousel button { - background-color: @text; - color: @crust; - } - // Download button in /learn - .Learn-heroAction { - background-color: @accent-color; - - .js-downloadBtn { - color: @crust; - } - } - // Active indicator in /learn - .LearnNav .active svg circle { - fill: @accent-color; - } - - .LeftNav a.active, - .LeftNav a:hover { - background-color: fade(@accent-color, 30%); - - img { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } - // /solutions/use-cases & Why Use Go / 4 icons - .MarketingCardList, - .WhyGo-reasons .WhyGo-reasonIcon { - img.LightMode-img[alt="cloud icon"], - img.DarkMode-img[alt="cloud icon"], - img[alt="Sphere"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - img.LightMode-img[alt="CLI icon"], - img.DarkMode-img[alt="CLI icon"], - img[alt="Command Line"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - img.LightMode-img[alt="web dev icon"], - img.DarkMode-img[alt="web dev icon"], - img[alt="Code"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - img.LightMode-img[alt="ops icon"], - img.DarkMode-img[alt="ops icon"], - img[alt="Sphere"][src="/images/icons/gear-dark.svg"], - img[alt="Sphere"][src="/images/icons/gear.svg"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } - // Mobile Nav Drawer - .NavigationDrawer { - .NavigationDrawer-header { - border-bottom-color: @surface2; - } - - // Drawer Selection - .NavigationDrawer-listItem--active { - background-color: fade(@accent-color, 30%); - } - } - // /play - .PlayPage { - .lines div { - color: @overlay1; // Line numbers - } - } - // Run Button for Code Snippet - .Playground-runButton { - border-color: @accent-color; - } - // Go Main Header - .Site-header, - .go-Header { - background: @crust; - - .Header-menuItem--active a, - .go-Header-menuItem--active a { - border-bottom-color: @accent-color; - } - // Mobile Burger Icon - button.Header-navOpen--white, - button.go-Header-navOpen--white { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - filter: none; - } - } - // 'What's Possible With Go' - .WhyGo-reasons { - .WhyGo-reasonPackagesHeader img { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .WhyGo-reasonShowMoreLink a { - color: @crust; - } - - img.WhyGo-reasonShowMoreImg { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } - // /doc/install icon - img.CopyPaste-icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - // Go Main Logo - .Site-header .Header-logo, - .NavigationDrawer-logo, - .go-Header .go-Header-logo, - .go-NavigationDrawer .go-NavigationDrawer-logo, - .top-bar img.gopherlogo, - .go-Main-headerLogo, - .SearchResults-headerLogo img[alt="Go"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - // Theme Selector Icons - .Footer img[alt="Dark theme"], - .go-Footer img[alt="Dark theme"], - .top-bar img.go-Icon--inverted[data-value="dark"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - // Right Arrow Icons - .go-NavigationDrawer-listItem a[href="#"] img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - .SiteBreadcrumb .BreadcrumbNav-li::after { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .Footer img[alt="Light theme"], - .go-Footer img[alt="Light theme"], - .top-bar img.go-Icon--inverted[data-value="light"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - .Footer img[alt="System theme"], - .go-Footer img[alt="System theme"], - .top-bar img.go-Icon--inverted[data-value="auto"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - // Menu Active Selector - img.TabSection-underline { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - // Code Snippet Highlights - pre { - .comment { - color: @overlay2; - } - ins { - color: @blue; - } - } - // Companies in Main Page Contrast - & when (@lookup = latte) { - .WhoUsesCaseStudyList-caseStudyLink { - background-color: @surface0; - } - } - } -} - -@-moz-document domain('pkg.go.dev') { - @media (prefers-color-scheme: light) { - :root[data-theme="auto"], - :root:not([data-theme]) { - #catppuccin(@lightFlavor, @accentColor); - } - } - @media (prefers-color-scheme: dark) { - :root[data-theme="auto"], - :root:not([data-theme]) { - #catppuccin(@darkFlavor, @accentColor); - } - } - :root[data-theme="dark"] { - #catppuccin(@darkFlavor, @accentColor); - } - :root[data-theme="light"] { - #catppuccin(@lightFlavor, @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]; - - // Pkg.go Carousel - .go-Carousel { - .go-Carousel-nextSlide img { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - .go-Carousel-prevSlide img { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - } - // Alert Chips - .go-Chip--alert { - color: @crust; - } - // Pkg.go Clipboard Icon - .go-Clipboard img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - // Pkg.go Header - .go-Header { - .go-Header-submenu { - border-color: @accent-color; - } - - // Triangle Icon Accented - .go-Header-menuItem:hover img.go-Icon[alt="submenu dropdown icon"], - .go-Header-menuItem:focus-within - img.go-Icon[alt="submenu dropdown icon"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - } - // Triangle Icon - .go-Header, - .go-Main-navMobile { - @svg: escape( - '' - ); - - img.go-Icon[alt="submenu dropdown icon"] { - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - .go-Select { - background-image: url("data:image/svg+xml,@{svg}"); - } - } - // Info Icon - .go-Main-banner .go-Message .go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - // Pkg.go Subheader - .go-Main-header { - background-color: @mantle; - } - // Pkg.go Fixed Header - .go-Main-header[data-raised="true"] { - background-color: @crust; - } - // Pkg.go Package Documentation Mobile Dropdown Icon - .go-Main-navMobile label.go-Label::before { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - // Pkg.go Mobile Navigation Drawer - .go-NavigationDrawer { - .go-NavigationDrawer-header { - border-bottom-color: @overlay2; - } - - .go-NavigationDrawer-listItem--active { - background-color: fade(@accent-color, 30%); - } - } - //Pkg.go Search Bar - .go-SearchForm { - input[type="search"]::-webkit-search-cancel-button { - display: none; - } - } - - .go-Footer { - background-color: @crust; - } - // Pkg.go Shortcut Helpers - .go-ShortcutKey::after { - background-color: @text; - } - // External Link Icon - .Homepage-helpLink, .UnitFiles-titleLink, a[href='https://www.meetup.com/pro/go'], a[href='https://github.com/golang/go/wiki/Conferences'] - { - @svg: escape( - '' - ); - - img, - img.go-Icon, - img.go-Icon:not(.go-Icon--accented) { - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - a::after { - background-image: url("data:image/svg+xml,@{svg}"); - } - } - // 'Jump to' Dialog - Desktop - .JumpDialog { - .JumpDialog-active { - color: @crust; - } - - .go-Button[aria-label="Close"] img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - } - // Pkg.go Package Search Results - .SearchResults-header { - input[type="search"]::-webkit-search-cancel-button { - display: none; - } - } - // Search Icon - .SearchResults-header, - .go-SearchForm { - button[aria-label="Submit search"] img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - } - // Search Icon in pkg.go - Accented - form.Homepage-search--symbol::before { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .ShortcutsDialog { - .go-Button[aria-label="Close"] img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - } - // Pkg.go Package Page - .UnitDetails { - #section-documentation img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - .UnitReadme-title img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - } - - .UnitDirectories img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - .UnitFiles img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - // Pkg.go Package Details Section - .UnitMeta { - .UnitMeta-details { - img.go-Icon { - // Question Tooltip - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - img.go-Icon[alt="unchecked"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - img.go-Icon.go-Icon--accented[alt="checked"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - } - - .UnitMeta-links { - img.go-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - img.depsdev-Icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } - } - // Deprecated Chip - span.Documentation-deprecatedTag { - color: @crust; - } - // Code Snippet Highlights - pre { - .comment { - color: @overlay2; - } - ins { - color: @blue; - } - } - } -} - -@-moz-document url-prefix("https://go.dev/tour") -{ - @media (prefers-color-scheme: light) { - :root[data-theme="auto"], - :root:not([data-theme]) { - #catppuccin(@lightFlavor, @accentColor); - } - } - @media (prefers-color-scheme: dark) { - :root[data-theme="auto"], - :root:not([data-theme]) { - #catppuccin(@darkFlavor, @accentColor); - } - } - :root[data-theme="dark"] { - #catppuccin(@darkFlavor, @accentColor); - } - :root[data-theme="light"] { - #catppuccin(@lightFlavor, @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]; - - #editor-container { - #left-side { - .slide-content { - background-color: @base; - - a { - color: @accent-color; - } - - code { - background-color: @accent-color !important; - color: @crust; - } - - h2, - li, - p { - color: @text; - } - - pre { - background-color: @mantle; - color: @text; - } - } - - .module-bar { - background-color: @mantle; - color: @text; - - a { - color: @accent-color; - } - } - } - - #right-side { - background-color: @base; - - #explorer { - background-color: @mantle; - } - - #file-editor { - .CodeMirror { - background-color: @base; - - .CodeMirror-lines { - background-color: @base; - color: @text; - - .CodeMirror-linenumber { - color: @overlay1; - } - - span.cm-atom { - color: @blue; - } - - span.cm-comment { - color: @peach; - } - - span.cm-keyword { - color: @mauve; - } - - span.cm-number { - color: @green; - } - - span.cm-string { - color: @red; - } - - span.cm-variable { - color: @text; - } - } - } - - .CodeMirror-gutters { - background-color: @mantle; - border-right-color: @surface2; - } - } - - #file-menu { - background-color: @mantle; - } - - .output { - background-color: @base; - - span.stdout { - color: @subtext0; - } - - span.system { - color: @text; - } - } - - a { - background-color: @text; - color: @crust; - } - - a#run { - background-color: @accent-color; - } - - pre.info { - background-color: @surface0 !important; - } - } - - div[vertical-slide], - div[horizontal-slide] { - background-color: @surface2; - } - } - - .toc { - background-color: @base; - - .toc-page.ng-scope { - background-color: @mantle; - color: @text; - } - - .toc-module.ng-scope { - background-color: @mantle; - span.ng-binding { - background-color: @base; - color: @accent-color; - } - - .toc-lesson span.ng-binding { - background-color: @mantle; - color: @text; - } - } - } - - .top-bar { - background-color: @crust; - color: @text; - - span.nav { - svg { - fill: @text; - } - } - } - - .wrapper.ng-scope { - background-color: @base; - - .container { - background-color: @base; - - .lesson.ng-scope { - background-color: @mantle; - } - - h1, - p { - color: @text; - } - - a { - 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/go.dev/catppuccin.user.less b/styles/go.dev/catppuccin.user.less new file mode 100644 index 0000000000..6fffa1c05d --- /dev/null +++ b/styles/go.dev/catppuccin.user.less @@ -0,0 +1,940 @@ +/* ==UserStyle== +@name go.dev Catppuccin +@namespace github.com/catppuccin/userstyles/styles/go.dev +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/go.dev +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/go.dev/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ago.dev +@description Soothing pastel theme for go.dev +@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("go.dev") { + @media (prefers-color-scheme: light) { + :root[data-theme="auto"], + :root:not([data-theme]) { + #catppuccin(@lightFlavor, @accentColor); + } + } + @media (prefers-color-scheme: dark) { + :root[data-theme="auto"], + :root:not([data-theme]) { + #catppuccin(@darkFlavor, @accentColor); + } + } + :root[data-theme="dark"] { + #catppuccin(@darkFlavor, @accentColor); + } + :root[data-theme="light"] { + #catppuccin(@lightFlavor, @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; + } + } + + background-color: @base; + + --abbey: @mantle; + --black-1: @crust; + --color-border: @surface2; + --color-background: @base; + --color-background-accented: @mantle; + --color-background-banner: @mantle; + --color-background-card-footer: @crust; + --color-background-code: @surface0; // Code Snippets + --color-background-info: @surface1; + --color-background-inverted: @crust; + --color-background-logo: @text; + --color-background-playground-input: @mantle; + --color-brand-primary: @accent-color; // Affects most Go-Color Elements + --color-button: @accent-color; + --color-button-accented: @accent-color; + --color-button-text: @crust; + --color-button-text-disabled: @subtext0; + --color-bright-text-link: @accent-color; + --color-text: @text; + --color-text-link: @accent-color; + --color-text-subtle: @subtext1; + --focus-box-shadow: 0 0 0.0625rem 0.0625rem + @accent-color; // Only modifies color; + --gray-2: @surface0; + --gray-3: @text; + --gray-6: @crust; + --pink: @red; + --turq-dark: @accent-color; + --white: @text; + --border-code: 0.0625rem @surface2 solid; + + .btn { + background: @accent-color; + color: @crust; + } + // /dl page in go.dev + .Downloads { + div.filename img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + table.downloadtable { + --color-background-accented: @surface0; + } + } + // Main Page Footer & Pkg.go Footer + .Footer, + .go-Footer { + background-color: @mantle; + + button[aria-label="Shorcuts Modal"] img.go-Icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + + img.Footer-gopher, + img.go-Footer-gopher { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img.go-Footer-googleLogoImg, + img.Footer-googleLogoImg { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + // Main Page Footer Get Started + .GettingStartedGo-primaryCta { + color: @crust; + } + + // Main Page Carousel + .GoCarousel button { + background-color: @text; + color: @crust; + } + // Download button in /learn + .Learn-heroAction { + background-color: @accent-color; + + .js-downloadBtn { + color: @crust; + } + } + // Active indicator in /learn + .LearnNav .active svg circle { + fill: @accent-color; + } + + .LeftNav a.active, + .LeftNav a:hover { + background-color: fade(@accent-color, 30%); + + img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + // /solutions/use-cases & Why Use Go / 4 icons + .MarketingCardList, + .WhyGo-reasons .WhyGo-reasonIcon { + img.LightMode-img[alt="cloud icon"], + img.DarkMode-img[alt="cloud icon"], + img[alt="Sphere"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img.LightMode-img[alt="CLI icon"], + img.DarkMode-img[alt="CLI icon"], + img[alt="Command Line"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img.LightMode-img[alt="web dev icon"], + img.DarkMode-img[alt="web dev icon"], + img[alt="Code"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img.LightMode-img[alt="ops icon"], + img.DarkMode-img[alt="ops icon"], + img[alt="Sphere"][src="/images/icons/gear-dark.svg"], + img[alt="Sphere"][src="/images/icons/gear.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + // Mobile Nav Drawer + .NavigationDrawer { + .NavigationDrawer-header { + border-bottom-color: @surface2; + } + + // Drawer Selection + .NavigationDrawer-listItem--active { + background-color: fade(@accent-color, 30%); + } + } + // /play + .PlayPage { + .lines div { + color: @overlay1; // Line numbers + } + } + // Run Button for Code Snippet + .Playground-runButton { + border-color: @accent-color; + } + // Go Main Header + .Site-header, + .go-Header { + background: @crust; + + .Header-menuItem--active a, + .go-Header-menuItem--active a { + border-bottom-color: @accent-color; + } + // Mobile Burger Icon + button.Header-navOpen--white, + button.go-Header-navOpen--white { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + filter: none; + } + } + // 'What's Possible With Go' + .WhyGo-reasons { + .WhyGo-reasonPackagesHeader img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .WhyGo-reasonShowMoreLink a { + color: @crust; + } + + img.WhyGo-reasonShowMoreImg { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + // /doc/install icon + img.CopyPaste-icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + // Go Main Logo + .Site-header .Header-logo, + .NavigationDrawer-logo, + .go-Header .go-Header-logo, + .go-NavigationDrawer .go-NavigationDrawer-logo, + .top-bar img.gopherlogo, + .go-Main-headerLogo, + .SearchResults-headerLogo img[alt="Go"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + // Theme Selector Icons + .Footer img[alt="Dark theme"], + .go-Footer img[alt="Dark theme"], + .top-bar img.go-Icon--inverted[data-value="dark"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + // Right Arrow Icons + .go-NavigationDrawer-listItem a[href="#"] img.go-Icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + + .SiteBreadcrumb .BreadcrumbNav-li::after { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .Footer img[alt="Light theme"], + .go-Footer img[alt="Light theme"], + .top-bar img.go-Icon--inverted[data-value="light"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + + .Footer img[alt="System theme"], + .go-Footer img[alt="System theme"], + .top-bar img.go-Icon--inverted[data-value="auto"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + // Menu Active Selector + img.TabSection-underline { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + // Code Snippet Highlights + pre { + .comment { + color: @overlay2; + } + ins { + color: @blue; + } + } + // Companies in Main Page Contrast + & when (@lookup = latte) { + .WhoUsesCaseStudyList-caseStudyLink { + background-color: @surface0; + } + } + } +} + +@-moz-document domain("pkg.go.dev") { + @media (prefers-color-scheme: light) { + :root[data-theme="auto"], + :root:not([data-theme]) { + #catppuccin(@lightFlavor, @accentColor); + } + } + @media (prefers-color-scheme: dark) { + :root[data-theme="auto"], + :root:not([data-theme]) { + #catppuccin(@darkFlavor, @accentColor); + } + } + :root[data-theme="dark"] { + #catppuccin(@darkFlavor, @accentColor); + } + :root[data-theme="light"] { + #catppuccin(@lightFlavor, @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]; + + // Pkg.go Carousel + .go-Carousel { + .go-Carousel-nextSlide img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + + .go-Carousel-prevSlide img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + } + // Alert Chips + .go-Chip--alert { + color: @crust; + } + // Pkg.go Clipboard Icon + .go-Clipboard img.go-Icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + // Pkg.go Header + .go-Header { + .go-Header-submenu { + border-color: @accent-color; + } + + // Triangle Icon Accented + .go-Header-menuItem:hover img.go-Icon[alt="submenu dropdown icon"], + .go-Header-menuItem:focus-within + img.go-Icon[alt="submenu dropdown icon"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + } + // Triangle Icon + .go-Header, + .go-Main-navMobile { + @svg: escape( + '' + ); + + img.go-Icon[alt="submenu dropdown icon"] { + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + + .go-Select { + background-image: url("data:image/svg+xml,@{svg}"); + } + } + // Info Icon + .go-Main-banner .go-Message .go-Icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + // Pkg.go Subheader + .go-Main-header { + background-color: @mantle; + } + // Pkg.go Fixed Header + .go-Main-header[data-raised="true"] { + background-color: @crust; + } + // Pkg.go Package Documentation Mobile Dropdown Icon + .go-Main-navMobile label.go-Label::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + // Pkg.go Mobile Navigation Drawer + .go-NavigationDrawer { + .go-NavigationDrawer-header { + border-bottom-color: @overlay2; + } + + .go-NavigationDrawer-listItem--active { + background-color: fade(@accent-color, 30%); + } + } + //Pkg.go Search Bar + .go-SearchForm { + input[type="search"]::-webkit-search-cancel-button { + display: none; + } + } + + .go-Footer { + background-color: @crust; + } + // Pkg.go Shortcut Helpers + .go-ShortcutKey::after { + background-color: @text; + } + // External Link Icon + .Homepage-helpLink, + .UnitFiles-titleLink, + a[href="https://www.meetup.com/pro/go"], + a[href="https://github.com/golang/go/wiki/Conferences"] { + @svg: escape( + '' + ); + + img, + img.go-Icon, + img.go-Icon:not(.go-Icon--accented) { + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + + a::after { + background-image: url("data:image/svg+xml,@{svg}"); + } + } + // 'Jump to' Dialog - Desktop + .JumpDialog { + .JumpDialog-active { + color: @crust; + } + + .go-Button[aria-label="Close"] img.go-Icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + } + // Pkg.go Package Search Results + .SearchResults-header { + input[type="search"]::-webkit-search-cancel-button { + display: none; + } + } + // Search Icon + .SearchResults-header, + .go-SearchForm { + button[aria-label="Submit search"] img.go-Icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + } + // Search Icon in pkg.go - Accented + form.Homepage-search--symbol::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .ShortcutsDialog { + .go-Button[aria-label="Close"] img.go-Icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + } + // Pkg.go Package Page + .UnitDetails { + #section-documentation img.go-Icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + + .UnitReadme-title img.go-Icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + } + + .UnitDirectories img.go-Icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + + .UnitFiles img.go-Icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + // Pkg.go Package Details Section + .UnitMeta { + .UnitMeta-details { + img.go-Icon { + // Question Tooltip + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + + img.go-Icon[alt="unchecked"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + + img.go-Icon.go-Icon--accented[alt="checked"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + } + + .UnitMeta-links { + img.go-Icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + + img.depsdev-Icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + } + // Deprecated Chip + span.Documentation-deprecatedTag { + color: @crust; + } + // Code Snippet Highlights + pre { + .comment { + color: @overlay2; + } + ins { + color: @blue; + } + } + } +} + +@-moz-document url-prefix("https://go.dev/tour") { + @media (prefers-color-scheme: light) { + :root[data-theme="auto"], + :root:not([data-theme]) { + #catppuccin(@lightFlavor, @accentColor); + } + } + @media (prefers-color-scheme: dark) { + :root[data-theme="auto"], + :root:not([data-theme]) { + #catppuccin(@darkFlavor, @accentColor); + } + } + :root[data-theme="dark"] { + #catppuccin(@darkFlavor, @accentColor); + } + :root[data-theme="light"] { + #catppuccin(@lightFlavor, @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]; + + #editor-container { + #left-side { + .slide-content { + background-color: @base; + + a { + color: @accent-color; + } + + code { + background-color: @accent-color !important; + color: @crust; + } + + h2, + li, + p { + color: @text; + } + + pre { + background-color: @mantle; + color: @text; + } + } + + .module-bar { + background-color: @mantle; + color: @text; + + a { + color: @accent-color; + } + } + } + + #right-side { + background-color: @base; + + #explorer { + background-color: @mantle; + } + + #file-editor { + .CodeMirror { + background-color: @base; + + .CodeMirror-lines { + background-color: @base; + color: @text; + + .CodeMirror-linenumber { + color: @overlay1; + } + + span.cm-atom { + color: @blue; + } + + span.cm-comment { + color: @peach; + } + + span.cm-keyword { + color: @mauve; + } + + span.cm-number { + color: @green; + } + + span.cm-string { + color: @red; + } + + span.cm-variable { + color: @text; + } + } + } + + .CodeMirror-gutters { + background-color: @mantle; + border-right-color: @surface2; + } + } + + #file-menu { + background-color: @mantle; + } + + .output { + background-color: @base; + + span.stdout { + color: @subtext0; + } + + span.system { + color: @text; + } + } + + a { + background-color: @text; + color: @crust; + } + + a#run { + background-color: @accent-color; + } + + pre.info { + background-color: @surface0 !important; + } + } + + div[vertical-slide], + div[horizontal-slide] { + background-color: @surface2; + } + } + + .toc { + background-color: @base; + + .toc-page.ng-scope { + background-color: @mantle; + color: @text; + } + + .toc-module.ng-scope { + background-color: @mantle; + span.ng-binding { + background-color: @base; + color: @accent-color; + } + + .toc-lesson span.ng-binding { + background-color: @mantle; + color: @text; + } + } + } + + .top-bar { + background-color: @crust; + color: @text; + + span.nav { + svg { + fill: @text; + } + } + } + + .wrapper.ng-scope { + background-color: @base; + + .container { + background-color: @base; + + .lesson.ng-scope { + background-color: @mantle; + } + + h1, + p { + color: @text; + } + + a { + color: @accent-color; + } + } + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/google-drive/catppuccin.user.css b/styles/google-drive/catppuccin.user.css index 2622fbd766..e15404375a 100644 --- a/styles/google-drive/catppuccin.user.css +++ b/styles/google-drive/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Google Drive Catppuccin +@name Google Drive Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/google-drive @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google-drive -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google-drive/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google-drive/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle-drive @description Soothing pastel theme for Google Drive @author Catppuccin @@ -13,677 +13,4 @@ @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('drive.google.com') { - :root:has(.KkxPLb) { - .vhoiae.vhoiae.vhoiae, - & { - #catppuccin(@lightFlavor, @accentColor); - } - } - :root:has(.LgGVmb) { - .vhoiae.vhoiae.vhoiae, - & { - #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; - } - } - - --dt-on-background: @text; - --dt-on-background-secondary: @subtext0; - --dt-background: @base; - --dt-on-surface: @text; - --dt-inverse-surface: @text; - --dt-on-surface-secondary: @subtext0; - --dt-on-surface-variant: @text; - --dt-surface-variant: @surface0; - --dt-inverse-on-surface: @surface0; - --dt-surface: @base; - --dt-surface-tint: @accent-color; - --dt-shadow-elevation-1: 0px 3px 1px -2px fade(@base, 20%), - 0px 2px 2px 0px fade(@base, 14%), 0px 1px 5px 0px fade(@base, 12%); - --dt-shadow-elevation-2: 0px 2px 4px -1px fade(@base, 20%), - 0px 4px 5px 0px fade(@base, 14%), 0px 1px 10px 0px fade(@base, 12%); - --dt-shadow-elevation-3: 0px 5px 5px -3px fade(@base, 20%), - 0px 8px 10px 1px fade(@base, 14%), 0px 3px 14px 2px fade(@base, 12%); - --dt-shadow-elevation-4: 0px 5px 5px -3px fade(@base, 20%), - 0px 8px 10px 1px fade(@base, 14%), 0px 3px 14px 2px fade(@base, 12%); - --dt-shadow-elevation-5: 0px 8px 10px -6px fade(@base, 20%), - 0px 16px 24px 2px fade(@base, 14%), 0px 6px 30px 5px fade(@base, 12%); - --dt-surface-container-lowest: @crust; - --dt-surface-container-low: @mantle; - --dt-surface-container: @surface0; - --dt-surface-container-high: @surface1; - --dt-surface-container-highest: @surface2; - --dt-surface-dim: @crust; - --dt-surface-bright: @base; - --dt-on-primary-container: @text; - --dt-primary-container-icon: @text; - --dt-primary-container-link: @text; - --dt-primary: @accent-color; - --dt-primary-action: @accent-color; - --dt-primary-action-stateful: @accent-color; - --dt-primary-outline: @accent-color; - --dt-primary-action-state-layer: @accent-color; - --dt-primary-container: @surface0; - --dt-on-primary: @base; - --dt-primary-icon: @base; - --dt-primary-link: @base; - --dt-on-secondary-container: @text; - --dt-secondary-container-icon: @text; - --dt-secondary-container-link: @text; - --dt-secondary: @accent-color; - --dt-secondary-action: @accent-color; - --dt-secondary-action-stateful: @accent-color; - --dt-secondary-outline: @accent-color; - --dt-secondary-action-state-layer: @accent-color; - --dt-secondary-container: @surface0; - --dt-on-secondary: @base; - --dt-secondary-icon: @base; - --dt-secondary-link: @base; - --dt-on-tertiary-container: @text; - --dt-tertiary-container-icon: @text; - --dt-tertiary-container-link: @text; - --dt-tertiary: @accent-color; - --dt-tertiary-action: @accent-color; - --dt-tertiary-action-stateful: @accent-color; - --dt-tertiary-outline: @accent-color; - --dt-tertiary-action-state-layer: @accent-color; - --dt-tertiary-container: @surface0; - --dt-on-tertiary: @base; - --dt-tertiary-icon: @base; - --dt-tertiary-link: @base; - --dt-on-neutral-container: @text; - --dt-neutral-container-icon: @text; - --dt-neutral-container-link: @text; - --dt-neutral: @surface0; - --dt-neutral-action: @text; - --dt-neutral-action-stateful: @text; - --dt-neutral-outline: @surface0; - --dt-neutral-action-state-layer: @surface0; - --dt-neutral-container: @surface0; - --dt-on-neutral: @text; - --dt-neutral-icon: @surface0; - --dt-neutral-link: @surface0; - --dt-on-warning-container: @yellow; - --dt-warning-container-icon: @yellow; - --dt-warning-container-link: @yellow; - --dt-warning: @yellow; - --dt-warning-action: @yellow; - --dt-warning-action-stateful: @yellow; - --dt-warning-outline: @yellow; - --dt-warning-action-state-layer: @yellow; - --dt-warning-container: @surface0; - --dt-on-warning: @base; - --dt-warning-icon: @yellow; - --dt-warning-link: @yellow; - --dt-on-error-container: @red; - --dt-error-container-icon: @red; - --dt-error-container-link: @red; - --dt-error: @red; - --dt-error-action: @red; - --dt-error-action-stateful: @red; - --dt-error-outline: @red; - --dt-error-action-state-layer: @surface1; - --dt-error-container: @surface1; - --dt-on-error: @base; - --dt-error-icon: @base; - --dt-error-link: @base; - --dt-mime-type-blue: @blue; - --dt-mime-type-dark-blue: @blue; - --dt-mime-type-green: @green; - --dt-mime-type-grey: @overlay0; - --dt-mime-type-purple: @mauve; - --dt-mime-type-deep-purple: @mauve; - --dt-mime-type-red: @red; - --dt-mime-type-yellow: @yellow; - --dt-disabled: @overlay0; - --dt-on-disabled: @text; - --dt-outline: @overlay0; - --dt-outline-variant: @surface2; - --dt-light-info-banner-button: @text; - --dt-light-neutral-banner-button: @text; - --dt-light-success-banner-button: @green; - --dt-light-warning-banner-button: @yellow; - --dt-light-error-banner-button: @red; - - --gm3-sys-color-background: @base; - --gm3-sys-color-background-rgb: #rgbify(@base) []; - --gm3-sys-color-error: @red; - --gm3-sys-color-error-rgb: #rgbify(@red) []; - --gm3-sys-color-error-container: @surface2; - --gm3-sys-color-error-container-rgb: #rgbify(@surface2) []; - --gm3-sys-color-inverse-on-surface: @surface0; - --gm3-sys-color-inverse-on-surface-rgb: #rgbify(@surface0) []; - --gm3-sys-color-inverse-primary: red; - --gm3-sys-color-inverse-primary-rgb: 255, 0, 0; - --gm3-sys-color-inverse-surface: @text; - --gm3-sys-color-inverse-surface-rgb: #rgbify(@text) []; - --gm3-sys-color-on-background: @text; - --gm3-sys-color-on-background-rgb: #rgbify(@text) []; - --gm3-sys-color-on-error: @base; - --gm3-sys-color-on-error-rgb: #rgbify(@base) []; - --gm3-sys-color-on-error-container: @red; - --gm3-sys-color-on-error-container-rgb: #rgbify(@red) []; - --gm3-sys-color-on-primary: @base; - --gm3-sys-color-on-primary-rgb: #rgbify(@base) []; - --gm3-sys-color-on-primary-container: @text; - --gm3-sys-color-on-primary-container-rgb: #rgbify(@text) []; - --gm3-sys-color-on-primary-fixed: @base; - --gm3-sys-color-on-primary-fixed-rgb: #rgbify(@base); - --gm3-sys-color-on-primary-fixed-variant: @base; - --gm3-sys-color-on-primary-fixed-variant-rgb: #rgbify(@base); - --gm3-sys-color-on-secondary: @base; - --gm3-sys-color-on-secondary-rgb: #rgbify(@base) []; - --gm3-sys-color-on-secondary-container: @text; - --gm3-sys-color-on-secondary-container-rgb: #rgbify(@text) []; - --gm3-sys-color-on-secondary-fixed: @base; - --gm3-sys-color-on-secondary-fixed-rgb: #rgbify(@base) []; - --gm3-sys-color-on-secondary-fixed-variant: @base; - --gm3-sys-color-on-secondary-fixed-variant-rgb: #rgbify(@base) []; - --gm3-sys-color-on-surface: @text; - --gm3-sys-color-on-surface-rgb: #rgbify(@text) []; - --gm3-sys-color-on-surface-variant: @text; - --gm3-sys-color-on-surface-variant-rgb: #rgbify(@text) []; - --gm3-sys-color-on-tertiary: @base; - --gm3-sys-color-on-tertiary-rgb: #rgbify(@base) []; - --gm3-sys-color-on-tertiary-container: @text; - --gm3-sys-color-on-tertiary-container-rgb: #rgbify(@text) []; - --gm3-sys-color-on-tertiary-fixed: @base; - --gm3-sys-color-on-tertiary-fixed-rgb: #rgbify(@base) []; - --gm3-sys-color-on-tertiary-fixed-variant: @base; - --gm3-sys-color-on-tertiary-fixed-variant-rgb: #rgbify(@base) []; - --gm3-sys-color-outline: @overlay0; - --gm3-sys-color-outline-rgb: #rgbify(@overlay0) []; - --gm3-sys-color-outline-variant: @surface2; - --gm3-sys-color-outline-variant-rgb: #rgbify(@surface2) []; - --gm3-sys-color-primary: @accent-color; - --gm3-sys-color-primary-rgb: #rgbify(@accent-color) []; - --gm3-sys-color-primary-container: @surface0; - --gm3-sys-color-primary-container-rgb: #rgbify(@surface0) []; - --gm3-sys-color-primary-fixed: @accent-color; - --gm3-sys-color-primary-fixed-rgb: #rgbify(@accent-color) []; - --gm3-sys-color-primary-fixed-dim: @accent-color; - --gm3-sys-color-primary-fixed-dim-rgb: #rgbify(@accent-color) []; - --gm3-sys-color-secondary: @accent-color; - --gm3-sys-color-secondary-rgb: #rgbify(@accent-color); - --gm3-sys-color-secondary-container: @surface0; - --gm3-sys-color-secondary-container-rgb: #rgbify(@surface0) []; - --gm3-sys-color-secondary-fixed: #c2e7ff; - --gm3-sys-color-secondary-fixed-rgb: 194, 231, 255; - --gm3-sys-color-secondary-fixed-dim: #7fcfff; - --gm3-sys-color-secondary-fixed-dim-rgb: 127, 207, 255; - --gm3-sys-color-surface: @base; - --gm3-sys-color-surface-rgb: #rgbify(@base) []; - --gm3-sys-color-surface-bright: @base; - --gm3-sys-color-surface-bright-rgb: #rgbify(@base) []; - --gm3-sys-color-surface-container: @surface0; - --gm3-sys-color-surface-container-rgb: #rgbify(@surface0) []; - --gm3-sys-color-surface-container-high: @surface1; - --gm3-sys-color-surface-container-high-rgb: #rgbify(@surface1) []; - --gm3-sys-color-surface-container-highest: @surface2; - --gm3-sys-color-surface-container-highest-rgb: #rgbify(@surface2) []; - --gm3-sys-color-surface-container-low: @mantle; - --gm3-sys-color-surface-container-low-rgb: #rgbify(@mantle) []; - --gm3-sys-color-surface-container-lowest: @crust; - --gm3-sys-color-surface-container-lowest-rgb: #rgbify(@crust) []; - --gm3-sys-color-surface-dim: @crust; - --gm3-sys-color-surface-dim-rgb: #rgbify(@crust) []; - --gm3-sys-color-surface-tint: @accent-color; - --gm3-sys-color-surface-tint-rgb: #rgbify(@accent-color) []; - --gm3-sys-color-surface-variant: @surface0; - --gm3-sys-color-surface-variant-rgb: #rgbify(@surface0) []; - --gm3-sys-color-tertiary: @accent-color; - --gm3-sys-color-tertiary-rgb: #rgbify(@accent-color) []; - --gm3-sys-color-tertiary-container: @surface0; - --gm3-sys-color-tertiary-container-rgb: #rgbify(@surface0); - --gm3-sys-color-tertiary-fixed: @accent-color; - --gm3-sys-color-tertiary-fixed-rgb: #rgbify(@accent-color) []; - --gm3-sys-color-tertiary-fixed-dim: @accent-color; - --gm3-sys-color-tertiary-fixed-dim-rgb: #rgbify(@accent-color) []; - - & when (@lookup = latte) { - --dt-scrim: fade(@text, 50%); - --dt-scrim-2x: fade(@text, 50%); - --gm3-sys-color-scrim: @text; - --gm3-sys-color-scrim-rgb: #rgbify(@text) []; - --gm3-sys-color-shadow: @text; - --gm3-sys-color-shadow-rgb: #rgbify(@text) []; - } - - & when not (@lookup = latte) { - --dt-scrim: fade(@base, 50%); - --dt-scrim-2x: fade(@base, 50%); - --gm3-sys-color-scrim: @base; - --gm3-sys-color-scrim-rgb: #rgbify(@base) []; - --gm3-sys-color-shadow: @base; - --gm3-sys-color-shadow-rgb: #rgbify(@base) []; - } - - /* Settings menu title & back button */ - .gb_Pc svg, - .gb_Uc.gb_Zc svg, - .gb_Pc .gb_gd .gb_od, - .gb_Pc .gb_gd .gb_Oc, - .gb_Pc .gb_gd .gb_id, - .gb_Uc.gb_Zc .gb_od { - color: @text !important; - } - - /* Settings menu Storage total used icon */ - .VBJTHe svg path { - fill: @text; - } - - /* Drive sync checkbox disabled */ - .MlG5Jc gm-checkbox[disabled] ~ .VfPpkd-ga, - .MlG5Jc gm-radio[disabled] ~ .VfPpkd-ga, - .MlG5Jc .VfPpkd-Qa-Qu-db ~ .VfPpkd-ga, - .MlG5Jc .VfPpkd-Eg-Qu-db ~ .VfPpkd-ga { - color: @subtext0 !important; - } - - /* Quota hover box-shadow */ - .KnDsIf:hover, - .KnDsIf:focus, - .al9hA { - box-shadow: 0 2px 6px @overlay0; - } - - /* Quota Google Drive */ - .kJzqSb { - color: @blue; - } - - /* Quota Google Photos */ - .L1pqQb { - color: @yellow; - } - - /* Quota Gmail */ - .au0LDe { - color: @red; - } - - /* Google Account outline */ - .gb_Ea.gb_i { - border-color: @overlay0; - background-color: @surface0; - } - .gb_Ea.gb_i:focus, - .gb_Ea.gb_i:hover { - border-color: @subtext0; - } - - /* File preview (separate tab) background */ - &.ndfHFb-c4YZDc-uoC0bf.ndfHFb-c4YZDc-i5oIFb .ndfHFb-c4YZDc-bnBfGc { - background-color: @base; - } - .a-b-uoC0bf.a-b-L .a-b-jl /* File preview (in Drive) background */ { - background-color: fade(@base, 85%); - } - - /* File preview (separate tab) top bar */ - &.ndfHFb-c4YZDc-uoC0bf.ndfHFb-c4YZDc-i5oIFb .ndfHFb-c4YZDc-Wrql6b.ndfHFb-c4YZDc-Wrql6b-Hyc8Sd, - .a-b-uoC0bf.a-b-L .a-b-K.a-b-K-Hyc8Sd /* File preview (in Drive) top bar */ { - background-color: fade(@base, 85%); - } - - /* File preview (separate tab) bottom bar */ - .ndfHFb-c4YZDc-q77wGc .ndfHFb-c4YZDc-DARUcf-NnAfwf-i5oIFb, .ndfHFb-c4YZDc-q77wGc .ndfHFb-c4YZDc-nJjxad-nK2kYb-i5oIFb, - .a-b-vo .a-b-La-yc-L, .a-b-vo .a-b-Kb-ac-L /* File preview (in Drive) bottom bar */ { - background-color: fade(@base, 85%); - color: @text !important; - /* File preview (separate tab) page input */ - .ndfHFb-c4YZDc-DARUcf-NGme3c-YPqjbf, - .a-b-La-su-vb /* File preview (in Drive) page input */ { - background-color: fade(@base, 50%); - color: @text; - } - } - - /* File preview (separate tab) share button */ - &.ndfHFb-c4YZDc-uoC0bf .zAYgkb-uoC0bf .tk3N6e-LgbsSe, &.ndfHFb-c4YZDc-uoC0bf .zAYgkb-mAKE4e-LQLjdd-xl07Ob-LgbsSe.VIpgJd-Kb3HCc-xl07Ob-LgbsSe, - .a-b-uoC0bf .ae-uoC0bf .g-d, .a-b-uoC0bf .ae-mAKE4e-Hc-w-d.h-R-w-d /* File preview (in Drive) share button */ { - background-color: @accent-color; - color: @base; - /* File preview (separate tab) share icon */ - .IyROMc-euCgFf-LJSvSb, - .ae-c /* File preview (in Drive) share icon */ { - & when (@lookup = latte) { - filter: brightness(0) invert(97%) sepia(4%) saturate(152%) - hue-rotate(183deg) brightness(94%) contrast(106%); - } - & when (@lookup = frappe) { - filter: brightness(0) invert(15%) sepia(8%) saturate(2252%) - hue-rotate(192deg) brightness(98%) contrast(85%); - } - & when (@lookup = macchiato) { - filter: brightness(0) invert(13%) sepia(26%) saturate(823%) - hue-rotate(195deg) brightness(90%) contrast(92%); - } - & when (@lookup = mocha) { - filter: brightness(0) invert(10%) sepia(36%) saturate(650%) - hue-rotate(201deg) brightness(90%) contrast(93%); - } - } - /* File preview (separate tab) share triangle */ - .VIpgJd-Kb3HCc-xl07Ob-LgbsSe-j4gsHd, - .h-R-w-d-Re /* File preview (in Drive) share triangle */ { - border-color: @base transparent !important; - } - } - /* File preview (separate tab) share Quick options */ - .zAYgkb-NhlrFc-xl07Ob-BvBYQ, - .h-w.ae-NhlrFc-w /* File preview (in Drive) share Quick options */ { - background-color: @base; - * { - color: @text !important; - } - /* File preview (in Drive) share Quick options current share level container */ - .h-v-x { - opacity: 100%; - } - /* File preview (separate tab) share Quick options divider */ - .zAYgkb-NhlrFc-gqMrKb, - .ae-NhlrFc-Yo /* File preview (in Drive) share Quick options divider */ { - border-color: @overlay0; - } - /* File preview (separate tab) share Quick options row hover */ - .VIpgJd-j7LFlb-sn54Q, - .h-v-pc /* File preview (in Drive) share Quick options row hover */ { - background-color: @surface0; - } - /* File preview (separate tab) share Quick options row icon */ - .IyROMc-euCgFf-LJSvSb, - .ba-ea-i /* File preview (in Drive) share Quick options row icon */ { - & when (@lookup = latte) { - filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) - hue-rotate(196deg) brightness(90%) contrast(86%); - } - & when (@lookup = frappe) { - filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) - hue-rotate(192deg) brightness(104%) contrast(92%); - } - & when (@lookup = macchiato) { - filter: brightness(0) invert(84%) sepia(13%) saturate(579%) - hue-rotate(193deg) brightness(99%) contrast(94%); - } - & when (@lookup = mocha) { - filter: brightness(0) invert(84%) sepia(19%) saturate(370%) - hue-rotate(192deg) brightness(98%) contrast(95%); - } - } - } - /* File preview (separate tab) Print, Download, 3 dots */ - .ndfHFb-c4YZDc-Bz112c:not([style]), - .ndfHFb-c4YZDc-Bz112c[style*="googlematerialicons"], - .ndfHFb-c4YZDc-Bz112c[style="user-select: none;"], - .ndfHFb-c4YZDc-Wrql6b-htvI8d-wcotoc-wHEfpf-ndfHFb-Bz112c /* File preview (separate tab) Save to drive */, - .ndfHFb-c4YZDc-Wrql6b-w37qKe-Bz112c /* File preview (separate tab) Save to drive (clicked) */, - /* File preview (in Drive) Print, Download, 3 dots */ - .a-b-c:not([style]), - .a-b-c[style*="googlematerialicons"], - .a-b-c[style="user-select: none;"], - .a-b-K-zc-Eb-bg-a-c /* File preview (in Drive) Save to drive */, - .a-b-K-X-c /* File preview (in Drive) Save to drive (clicked) */ { - & when (@lookup = latte) { - filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) - hue-rotate(196deg) brightness(90%) contrast(86%); - } - & when (@lookup = frappe) { - filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) - hue-rotate(192deg) brightness(104%) contrast(92%); - } - & when (@lookup = macchiato) { - filter: brightness(0) invert(84%) sepia(13%) saturate(579%) - hue-rotate(193deg) brightness(99%) contrast(94%); - } - & when (@lookup = mocha) { - filter: brightness(0) invert(84%) sepia(19%) saturate(370%) - hue-rotate(192deg) brightness(98%) contrast(95%); - } - } - /* File preview (separate tab) File title */ - .ndfHFb-c4YZDc-Wrql6b-V1ur5d, - .a-b-cg-Zf /* File preview (in Drive) File title */ { - color: @text; - } - /* File preview (separate tab) 3 dots menu item hover */ - .ndfHFb-c4YZDc-j7LFlb:hover, - .a-b-v:hover /* File preview (in Drive) 3 dots menu item hover */ { - background-color: @surface0; - } - /* File preview (separate tab) No preview available */ - .ndfHFb-c4YZDc-EglORb-haAclf, - .a-b-Tb-j /* File preview (in Drive) No preview available */ { - background-color: @surface0; - color: @text; - /* File preview (separate tab) No preview available Download */ - .ndfHFb-c4YZDc-bN97Pc-nupQLb-LgbsSe, - .a-b-x-rb-d /* File preview (in Drive) No preview available Download */ { - background-color: @surface1; - color: @text; - text-shadow: none; - border-color: transparent; - &:hover { - background-color: @surface2; - background-image: none; - } - } - /* File preview (separate tab) No preview available Download icon */ - .ndfHFb-c4YZDc-bN97Pc-nupQLb-LgbsSe-Bz112c, - .a-b-x-rb-d-c /* File preview (in Drive) No preview available Download icon */ { - & when (@lookup = latte) { - filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) - hue-rotate(196deg) brightness(90%) contrast(86%); - } - & when (@lookup = frappe) { - filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) - hue-rotate(192deg) brightness(104%) contrast(92%); - } - & when (@lookup = macchiato) { - filter: brightness(0) invert(84%) sepia(13%) saturate(579%) - hue-rotate(193deg) brightness(99%) contrast(94%); - } - & when (@lookup = mocha) { - filter: brightness(0) invert(84%) sepia(19%) saturate(370%) - hue-rotate(192deg) brightness(98%) contrast(95%); - } - } - } - /* File preview (in Drive) text document */ - .a-b-r-x, - .ndfHFb-c4YZDc-fmcmS-bN97Pc /* File preview (separate tab) text document */ { - &, - pre { - background-color: @surface0 !important; - color: @text !important; - } - } - /* File preview (in Drive) comment on image */ - .Yk-efwuC { - background-color: @surface0 !important; - /* File preview (in Drive) comment on image person */ - .Yk-Vq7Udc { - background-color: @surface0 !important; - [data-name] { - color: @text !important; - } - /* Comment text */ - .Yk-eKrold-Sg.Yk-eKrold-Sg { - color: @text !important; - } - /* Comment date */ - .Yk-eKrold-bi { - color: @subtext0 !important; - } - } - /* File preview (in Drive) comments */ - .Yk-efwuC-vb-Gd { - background-color: @surface0; - &, - * { - color: @text !important; - } - [role="textbox"] { - background-color: @surface1; - border-color: @overlay0; - &::before { - color: @subtext0 !important; - } - } - [role="button"] { - background-color: @surface1 !important; - /* needed to override border-color */ - &[role="button"] { - border-color: @overlay0 !important; - } - &[aria-disabled="true"] { - background-color: @surface1 !important; - color: @subtext0 !important; - } - } - } - } - - /* Drive sharing window material icon */ - .SbpzSe .VfPpkd-StrnGf-rymPhb-f7MjDc { - color: @accent-color; - } - - /* Drive sharing window access hover */ - .lfDNBb:hover, .lfDNBb:focus-within, - .ZelW3e:hover .FYhd9e, .ZelW3e:focus-within .FYhd9e /* Drive sharing window person row hover */ { - background-color: @surface0; - } - - /* Drive sharing iframe (in Drive) */ - .lb-k-x { - color-scheme: unset; - } - /* Drive sharing iframe (file preview separate tab) */ - .XKSfm-Sx9Kwc-bN97Pc { - color-scheme: auto; /* unset doesn't work? */ - } - [role="tooltip"], - .Kk7lMc-Ca /* Drive applications sidebar tooltip */, - .gb_2e /* Drive google account tooltip */ { - background-color: @surface2; - *, - & { - color: @text !important; - } - border-color: transparent; - /* File preview (separate tab) tooltip arrow */ - .tk3N6e-suEOdc-jQ8oHc, - .tk3N6e-suEOdc-ez0xG { - border-color: @surface2 transparent !important; - } - } - - /* Drive applications sidebar close button */ - .Kk7lMc-QWPxkf-d-j .Yb-Il-d .Yb-Il-d-c-j { - background-color: @surface0; - path:nth-child(1) { - stroke: @text; - } - } - /* Drive applications sidebar get addons */ - .Yb-Il-d#qJTzr .Yb-Il-d-c-j { - & when (@lookup = latte) { - filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) - hue-rotate(196deg) brightness(90%) contrast(86%); - } - & when (@lookup = frappe) { - filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) - hue-rotate(192deg) brightness(104%) contrast(92%); - } - & when (@lookup = macchiato) { - filter: brightness(0) invert(84%) sepia(13%) saturate(579%) - hue-rotate(193deg) brightness(99%) contrast(94%); - } - & when (@lookup = mocha) { - filter: brightness(0) invert(84%) sepia(19%) saturate(370%) - hue-rotate(192deg) brightness(98%) contrast(95%); - } - } - /* Drive applications sidebar close button white background */ - .Yb-Il-d-c-Nd { - background-color: transparent; - } - - /* Drive icon */ - [src="//ssl.gstatic.com/images/branding/product/1x/drive_2020q4_48dp.png"] - { - @darkBlue: mix(@blue, @base, 80%); - @darkGreen: mix(@green, @base, 80%); - - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - /* Drive upload checkmark */ - .z-Ea-Fj-c svg path { - fill: @green; - } - } -} - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/google-drive/catppuccin.user.less b/styles/google-drive/catppuccin.user.less new file mode 100644 index 0000000000..6a9af7dbf3 --- /dev/null +++ b/styles/google-drive/catppuccin.user.less @@ -0,0 +1,714 @@ +/* ==UserStyle== +@name Google Drive Catppuccin +@namespace github.com/catppuccin/userstyles/styles/google-drive +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google-drive +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google-drive/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle-drive +@description Soothing pastel theme for Google Drive +@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("drive.google.com") { + :root:has(.KkxPLb) { + .vhoiae.vhoiae.vhoiae, + & { + #catppuccin(@lightFlavor, @accentColor); + } + } + :root:has(.LgGVmb) { + .vhoiae.vhoiae.vhoiae, + & { + #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; + } + } + + --dt-on-background: @text; + --dt-on-background-secondary: @subtext0; + --dt-background: @base; + --dt-on-surface: @text; + --dt-inverse-surface: @text; + --dt-on-surface-secondary: @subtext0; + --dt-on-surface-variant: @text; + --dt-surface-variant: @surface0; + --dt-inverse-on-surface: @surface0; + --dt-surface: @base; + --dt-surface-tint: @accent-color; + --dt-shadow-elevation-1: + 0px 3px 1px -2px fade(@base, 20%), 0px 2px 2px 0px fade(@base, 14%), 0px + 1px 5px 0px fade(@base, 12%); + --dt-shadow-elevation-2: + 0px 2px 4px -1px fade(@base, 20%), 0px 4px 5px 0px fade(@base, 14%), 0px + 1px 10px 0px fade(@base, 12%); + --dt-shadow-elevation-3: + 0px 5px 5px -3px fade(@base, 20%), 0px 8px 10px 1px fade(@base, 14%), 0px + 3px 14px 2px fade(@base, 12%); + --dt-shadow-elevation-4: + 0px 5px 5px -3px fade(@base, 20%), 0px 8px 10px 1px fade(@base, 14%), 0px + 3px 14px 2px fade(@base, 12%); + --dt-shadow-elevation-5: + 0px 8px 10px -6px fade(@base, 20%), 0px 16px 24px 2px fade(@base, 14%), + 0px 6px 30px 5px fade(@base, 12%); + --dt-surface-container-lowest: @crust; + --dt-surface-container-low: @mantle; + --dt-surface-container: @surface0; + --dt-surface-container-high: @surface1; + --dt-surface-container-highest: @surface2; + --dt-surface-dim: @crust; + --dt-surface-bright: @base; + --dt-on-primary-container: @text; + --dt-primary-container-icon: @text; + --dt-primary-container-link: @text; + --dt-primary: @accent-color; + --dt-primary-action: @accent-color; + --dt-primary-action-stateful: @accent-color; + --dt-primary-outline: @accent-color; + --dt-primary-action-state-layer: @accent-color; + --dt-primary-container: @surface0; + --dt-on-primary: @base; + --dt-primary-icon: @base; + --dt-primary-link: @base; + --dt-on-secondary-container: @text; + --dt-secondary-container-icon: @text; + --dt-secondary-container-link: @text; + --dt-secondary: @accent-color; + --dt-secondary-action: @accent-color; + --dt-secondary-action-stateful: @accent-color; + --dt-secondary-outline: @accent-color; + --dt-secondary-action-state-layer: @accent-color; + --dt-secondary-container: @surface0; + --dt-on-secondary: @base; + --dt-secondary-icon: @base; + --dt-secondary-link: @base; + --dt-on-tertiary-container: @text; + --dt-tertiary-container-icon: @text; + --dt-tertiary-container-link: @text; + --dt-tertiary: @accent-color; + --dt-tertiary-action: @accent-color; + --dt-tertiary-action-stateful: @accent-color; + --dt-tertiary-outline: @accent-color; + --dt-tertiary-action-state-layer: @accent-color; + --dt-tertiary-container: @surface0; + --dt-on-tertiary: @base; + --dt-tertiary-icon: @base; + --dt-tertiary-link: @base; + --dt-on-neutral-container: @text; + --dt-neutral-container-icon: @text; + --dt-neutral-container-link: @text; + --dt-neutral: @surface0; + --dt-neutral-action: @text; + --dt-neutral-action-stateful: @text; + --dt-neutral-outline: @surface0; + --dt-neutral-action-state-layer: @surface0; + --dt-neutral-container: @surface0; + --dt-on-neutral: @text; + --dt-neutral-icon: @surface0; + --dt-neutral-link: @surface0; + --dt-on-warning-container: @yellow; + --dt-warning-container-icon: @yellow; + --dt-warning-container-link: @yellow; + --dt-warning: @yellow; + --dt-warning-action: @yellow; + --dt-warning-action-stateful: @yellow; + --dt-warning-outline: @yellow; + --dt-warning-action-state-layer: @yellow; + --dt-warning-container: @surface0; + --dt-on-warning: @base; + --dt-warning-icon: @yellow; + --dt-warning-link: @yellow; + --dt-on-error-container: @red; + --dt-error-container-icon: @red; + --dt-error-container-link: @red; + --dt-error: @red; + --dt-error-action: @red; + --dt-error-action-stateful: @red; + --dt-error-outline: @red; + --dt-error-action-state-layer: @surface1; + --dt-error-container: @surface1; + --dt-on-error: @base; + --dt-error-icon: @base; + --dt-error-link: @base; + --dt-mime-type-blue: @blue; + --dt-mime-type-dark-blue: @blue; + --dt-mime-type-green: @green; + --dt-mime-type-grey: @overlay0; + --dt-mime-type-purple: @mauve; + --dt-mime-type-deep-purple: @mauve; + --dt-mime-type-red: @red; + --dt-mime-type-yellow: @yellow; + --dt-disabled: @overlay0; + --dt-on-disabled: @text; + --dt-outline: @overlay0; + --dt-outline-variant: @surface2; + --dt-light-info-banner-button: @text; + --dt-light-neutral-banner-button: @text; + --dt-light-success-banner-button: @green; + --dt-light-warning-banner-button: @yellow; + --dt-light-error-banner-button: @red; + + --gm3-sys-color-background: @base; + --gm3-sys-color-background-rgb: #rgbify(@base)[]; + --gm3-sys-color-error: @red; + --gm3-sys-color-error-rgb: #rgbify(@red)[]; + --gm3-sys-color-error-container: @surface2; + --gm3-sys-color-error-container-rgb: #rgbify(@surface2)[]; + --gm3-sys-color-inverse-on-surface: @surface0; + --gm3-sys-color-inverse-on-surface-rgb: #rgbify(@surface0)[]; + --gm3-sys-color-inverse-primary: red; + --gm3-sys-color-inverse-primary-rgb: 255, 0, 0; + --gm3-sys-color-inverse-surface: @text; + --gm3-sys-color-inverse-surface-rgb: #rgbify(@text)[]; + --gm3-sys-color-on-background: @text; + --gm3-sys-color-on-background-rgb: #rgbify(@text)[]; + --gm3-sys-color-on-error: @base; + --gm3-sys-color-on-error-rgb: #rgbify(@base)[]; + --gm3-sys-color-on-error-container: @red; + --gm3-sys-color-on-error-container-rgb: #rgbify(@red)[]; + --gm3-sys-color-on-primary: @base; + --gm3-sys-color-on-primary-rgb: #rgbify(@base)[]; + --gm3-sys-color-on-primary-container: @text; + --gm3-sys-color-on-primary-container-rgb: #rgbify(@text)[]; + --gm3-sys-color-on-primary-fixed: @base; + --gm3-sys-color-on-primary-fixed-rgb: #rgbify(@base); + --gm3-sys-color-on-primary-fixed-variant: @base; + --gm3-sys-color-on-primary-fixed-variant-rgb: #rgbify(@base); + --gm3-sys-color-on-secondary: @base; + --gm3-sys-color-on-secondary-rgb: #rgbify(@base)[]; + --gm3-sys-color-on-secondary-container: @text; + --gm3-sys-color-on-secondary-container-rgb: #rgbify(@text)[]; + --gm3-sys-color-on-secondary-fixed: @base; + --gm3-sys-color-on-secondary-fixed-rgb: #rgbify(@base)[]; + --gm3-sys-color-on-secondary-fixed-variant: @base; + --gm3-sys-color-on-secondary-fixed-variant-rgb: #rgbify(@base)[]; + --gm3-sys-color-on-surface: @text; + --gm3-sys-color-on-surface-rgb: #rgbify(@text)[]; + --gm3-sys-color-on-surface-variant: @text; + --gm3-sys-color-on-surface-variant-rgb: #rgbify(@text)[]; + --gm3-sys-color-on-tertiary: @base; + --gm3-sys-color-on-tertiary-rgb: #rgbify(@base)[]; + --gm3-sys-color-on-tertiary-container: @text; + --gm3-sys-color-on-tertiary-container-rgb: #rgbify(@text)[]; + --gm3-sys-color-on-tertiary-fixed: @base; + --gm3-sys-color-on-tertiary-fixed-rgb: #rgbify(@base)[]; + --gm3-sys-color-on-tertiary-fixed-variant: @base; + --gm3-sys-color-on-tertiary-fixed-variant-rgb: #rgbify(@base)[]; + --gm3-sys-color-outline: @overlay0; + --gm3-sys-color-outline-rgb: #rgbify(@overlay0)[]; + --gm3-sys-color-outline-variant: @surface2; + --gm3-sys-color-outline-variant-rgb: #rgbify(@surface2)[]; + --gm3-sys-color-primary: @accent-color; + --gm3-sys-color-primary-rgb: #rgbify(@accent-color)[]; + --gm3-sys-color-primary-container: @surface0; + --gm3-sys-color-primary-container-rgb: #rgbify(@surface0)[]; + --gm3-sys-color-primary-fixed: @accent-color; + --gm3-sys-color-primary-fixed-rgb: #rgbify(@accent-color)[]; + --gm3-sys-color-primary-fixed-dim: @accent-color; + --gm3-sys-color-primary-fixed-dim-rgb: #rgbify(@accent-color)[]; + --gm3-sys-color-secondary: @accent-color; + --gm3-sys-color-secondary-rgb: #rgbify(@accent-color); + --gm3-sys-color-secondary-container: @surface0; + --gm3-sys-color-secondary-container-rgb: #rgbify(@surface0)[]; + --gm3-sys-color-secondary-fixed: #c2e7ff; + --gm3-sys-color-secondary-fixed-rgb: 194, 231, 255; + --gm3-sys-color-secondary-fixed-dim: #7fcfff; + --gm3-sys-color-secondary-fixed-dim-rgb: 127, 207, 255; + --gm3-sys-color-surface: @base; + --gm3-sys-color-surface-rgb: #rgbify(@base)[]; + --gm3-sys-color-surface-bright: @base; + --gm3-sys-color-surface-bright-rgb: #rgbify(@base)[]; + --gm3-sys-color-surface-container: @surface0; + --gm3-sys-color-surface-container-rgb: #rgbify(@surface0)[]; + --gm3-sys-color-surface-container-high: @surface1; + --gm3-sys-color-surface-container-high-rgb: #rgbify(@surface1)[]; + --gm3-sys-color-surface-container-highest: @surface2; + --gm3-sys-color-surface-container-highest-rgb: #rgbify(@surface2)[]; + --gm3-sys-color-surface-container-low: @mantle; + --gm3-sys-color-surface-container-low-rgb: #rgbify(@mantle)[]; + --gm3-sys-color-surface-container-lowest: @crust; + --gm3-sys-color-surface-container-lowest-rgb: #rgbify(@crust)[]; + --gm3-sys-color-surface-dim: @crust; + --gm3-sys-color-surface-dim-rgb: #rgbify(@crust)[]; + --gm3-sys-color-surface-tint: @accent-color; + --gm3-sys-color-surface-tint-rgb: #rgbify(@accent-color)[]; + --gm3-sys-color-surface-variant: @surface0; + --gm3-sys-color-surface-variant-rgb: #rgbify(@surface0)[]; + --gm3-sys-color-tertiary: @accent-color; + --gm3-sys-color-tertiary-rgb: #rgbify(@accent-color)[]; + --gm3-sys-color-tertiary-container: @surface0; + --gm3-sys-color-tertiary-container-rgb: #rgbify(@surface0); + --gm3-sys-color-tertiary-fixed: @accent-color; + --gm3-sys-color-tertiary-fixed-rgb: #rgbify(@accent-color)[]; + --gm3-sys-color-tertiary-fixed-dim: @accent-color; + --gm3-sys-color-tertiary-fixed-dim-rgb: #rgbify(@accent-color)[]; + + & when (@lookup = latte) { + --dt-scrim: fade(@text, 50%); + --dt-scrim-2x: fade(@text, 50%); + --gm3-sys-color-scrim: @text; + --gm3-sys-color-scrim-rgb: #rgbify(@text)[]; + --gm3-sys-color-shadow: @text; + --gm3-sys-color-shadow-rgb: #rgbify(@text)[]; + } + + & when not(@lookup = latte) { + --dt-scrim: fade(@base, 50%); + --dt-scrim-2x: fade(@base, 50%); + --gm3-sys-color-scrim: @base; + --gm3-sys-color-scrim-rgb: #rgbify(@base)[]; + --gm3-sys-color-shadow: @base; + --gm3-sys-color-shadow-rgb: #rgbify(@base)[]; + } + + /* Settings menu title & back button */ + .gb_Pc svg, + .gb_Uc.gb_Zc svg, + .gb_Pc .gb_gd .gb_od, + .gb_Pc .gb_gd .gb_Oc, + .gb_Pc .gb_gd .gb_id, + .gb_Uc.gb_Zc .gb_od { + color: @text !important; + } + + /* Settings menu Storage total used icon */ + .VBJTHe svg path { + fill: @text; + } + + /* Drive sync checkbox disabled */ + .MlG5Jc gm-checkbox[disabled] ~ .VfPpkd-ga, + .MlG5Jc gm-radio[disabled] ~ .VfPpkd-ga, + .MlG5Jc .VfPpkd-Qa-Qu-db ~ .VfPpkd-ga, + .MlG5Jc .VfPpkd-Eg-Qu-db ~ .VfPpkd-ga { + color: @subtext0 !important; + } + + /* Quota hover box-shadow */ + .KnDsIf:hover, + .KnDsIf:focus, + .al9hA { + box-shadow: 0 2px 6px @overlay0; + } + + /* Quota Google Drive */ + .kJzqSb { + color: @blue; + } + + /* Quota Google Photos */ + .L1pqQb { + color: @yellow; + } + + /* Quota Gmail */ + .au0LDe { + color: @red; + } + + /* Google Account outline */ + .gb_Ea.gb_i { + border-color: @overlay0; + background-color: @surface0; + } + .gb_Ea.gb_i:focus, + .gb_Ea.gb_i:hover { + border-color: @subtext0; + } + + /* File preview (separate tab) background */ + &.ndfHFb-c4YZDc-uoC0bf.ndfHFb-c4YZDc-i5oIFb .ndfHFb-c4YZDc-bnBfGc { + background-color: @base; + } + .a-b-uoC0bf.a-b-L .a-b-jl /* File preview (in Drive) background */ { + background-color: fade(@base, 85%); + } + + /* File preview (separate tab) top bar */ + &.ndfHFb-c4YZDc-uoC0bf.ndfHFb-c4YZDc-i5oIFb + .ndfHFb-c4YZDc-Wrql6b.ndfHFb-c4YZDc-Wrql6b-Hyc8Sd, + .a-b-uoC0bf.a-b-L .a-b-K.a-b-K-Hyc8Sd /* File preview (in Drive) top bar */ + { + background-color: fade(@base, 85%); + } + + /* File preview (separate tab) bottom bar */ + .ndfHFb-c4YZDc-q77wGc .ndfHFb-c4YZDc-DARUcf-NnAfwf-i5oIFb, + .ndfHFb-c4YZDc-q77wGc .ndfHFb-c4YZDc-nJjxad-nK2kYb-i5oIFb, + .a-b-vo .a-b-La-yc-L, + .a-b-vo .a-b-Kb-ac-L /* File preview (in Drive) bottom bar */ { + background-color: fade(@base, 85%); + color: @text !important; + /* File preview (separate tab) page input */ + .ndfHFb-c4YZDc-DARUcf-NGme3c-YPqjbf, + .a-b-La-su-vb /* File preview (in Drive) page input */ { + background-color: fade(@base, 50%); + color: @text; + } + } + + /* File preview (separate tab) share button */ + &.ndfHFb-c4YZDc-uoC0bf .zAYgkb-uoC0bf .tk3N6e-LgbsSe, + &.ndfHFb-c4YZDc-uoC0bf + .zAYgkb-mAKE4e-LQLjdd-xl07Ob-LgbsSe.VIpgJd-Kb3HCc-xl07Ob-LgbsSe, + .a-b-uoC0bf .ae-uoC0bf .g-d, + .a-b-uoC0bf + .ae-mAKE4e-Hc-w-d.h-R-w-d /* File preview (in Drive) share button */ { + background-color: @accent-color; + color: @base; + /* File preview (separate tab) share icon */ + .IyROMc-euCgFf-LJSvSb, + .ae-c /* File preview (in Drive) share icon */ { + & when (@lookup = latte) { + filter: brightness(0) invert(97%) sepia(4%) saturate(152%) hue-rotate( + 183deg + ) brightness(94%) contrast(106%); + } + & when (@lookup = frappe) { + filter: brightness(0) invert(15%) sepia(8%) saturate(2252%) + hue-rotate(192deg) brightness(98%) contrast(85%); + } + & when (@lookup = macchiato) { + filter: brightness(0) invert(13%) sepia(26%) saturate(823%) + hue-rotate(195deg) brightness(90%) contrast(92%); + } + & when (@lookup = mocha) { + filter: brightness(0) invert(10%) sepia(36%) saturate(650%) + hue-rotate(201deg) brightness(90%) contrast(93%); + } + } + /* File preview (separate tab) share triangle */ + .VIpgJd-Kb3HCc-xl07Ob-LgbsSe-j4gsHd, + .h-R-w-d-Re /* File preview (in Drive) share triangle */ { + border-color: @base transparent !important; + } + } + /* File preview (separate tab) share Quick options */ + .zAYgkb-NhlrFc-xl07Ob-BvBYQ, + .h-w.ae-NhlrFc-w /* File preview (in Drive) share Quick options */ { + background-color: @base; + * { + color: @text !important; + } + /* File preview (in Drive) share Quick options current share level container */ + .h-v-x { + opacity: 100%; + } + /* File preview (separate tab) share Quick options divider */ + .zAYgkb-NhlrFc-gqMrKb, + .ae-NhlrFc-Yo /* File preview (in Drive) share Quick options divider */ { + border-color: @overlay0; + } + /* File preview (separate tab) share Quick options row hover */ + .VIpgJd-j7LFlb-sn54Q, + .h-v-pc /* File preview (in Drive) share Quick options row hover */ { + background-color: @surface0; + } + /* File preview (separate tab) share Quick options row icon */ + .IyROMc-euCgFf-LJSvSb, + .ba-ea-i /* File preview (in Drive) share Quick options row icon */ { + & when (@lookup = latte) { + filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) + hue-rotate(196deg) brightness(90%) contrast(86%); + } + & when (@lookup = frappe) { + filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) + hue-rotate(192deg) brightness(104%) contrast(92%); + } + & when (@lookup = macchiato) { + filter: brightness(0) invert(84%) sepia(13%) saturate(579%) + hue-rotate(193deg) brightness(99%) contrast(94%); + } + & when (@lookup = mocha) { + filter: brightness(0) invert(84%) sepia(19%) saturate(370%) + hue-rotate(192deg) brightness(98%) contrast(95%); + } + } + } + /* File preview (separate tab) Print, Download, 3 dots */ + .ndfHFb-c4YZDc-Bz112c:not([style]), + .ndfHFb-c4YZDc-Bz112c[style*="googlematerialicons"], + .ndfHFb-c4YZDc-Bz112c[style="user-select: none;"], + .ndfHFb-c4YZDc-Wrql6b-htvI8d-wcotoc-wHEfpf-ndfHFb-Bz112c + /* File preview (separate tab) Save to drive */, + .ndfHFb-c4YZDc-Wrql6b-w37qKe-Bz112c + /* File preview (separate tab) Save to drive (clicked) */, + /* File preview (in Drive) Print, Download, 3 dots */ + .a-b-c:not([style]), + .a-b-c[style*="googlematerialicons"], + .a-b-c[style="user-select: none;"], + .a-b-K-zc-Eb-bg-a-c /* File preview (in Drive) Save to drive */, + .a-b-K-X-c /* File preview (in Drive) Save to drive (clicked) */ { + & when (@lookup = latte) { + filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) hue-rotate( + 196deg + ) brightness(90%) contrast(86%); + } + & when (@lookup = frappe) { + filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) hue-rotate( + 192deg + ) brightness(104%) contrast(92%); + } + & when (@lookup = macchiato) { + filter: brightness(0) invert(84%) sepia(13%) saturate(579%) hue-rotate( + 193deg + ) brightness(99%) contrast(94%); + } + & when (@lookup = mocha) { + filter: brightness(0) invert(84%) sepia(19%) saturate(370%) hue-rotate( + 192deg + ) brightness(98%) contrast(95%); + } + } + /* File preview (separate tab) File title */ + .ndfHFb-c4YZDc-Wrql6b-V1ur5d, + .a-b-cg-Zf /* File preview (in Drive) File title */ { + color: @text; + } + /* File preview (separate tab) 3 dots menu item hover */ + .ndfHFb-c4YZDc-j7LFlb:hover, + .a-b-v:hover /* File preview (in Drive) 3 dots menu item hover */ { + background-color: @surface0; + } + /* File preview (separate tab) No preview available */ + .ndfHFb-c4YZDc-EglORb-haAclf, + .a-b-Tb-j /* File preview (in Drive) No preview available */ { + background-color: @surface0; + color: @text; + /* File preview (separate tab) No preview available Download */ + .ndfHFb-c4YZDc-bN97Pc-nupQLb-LgbsSe, + .a-b-x-rb-d /* File preview (in Drive) No preview available Download */ { + background-color: @surface1; + color: @text; + text-shadow: none; + border-color: transparent; + &:hover { + background-color: @surface2; + background-image: none; + } + } + /* File preview (separate tab) No preview available Download icon */ + .ndfHFb-c4YZDc-bN97Pc-nupQLb-LgbsSe-Bz112c, + .a-b-x-rb-d-c /* File preview (in Drive) No preview available Download icon */ + { + & when (@lookup = latte) { + filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) + hue-rotate(196deg) brightness(90%) contrast(86%); + } + & when (@lookup = frappe) { + filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) + hue-rotate(192deg) brightness(104%) contrast(92%); + } + & when (@lookup = macchiato) { + filter: brightness(0) invert(84%) sepia(13%) saturate(579%) + hue-rotate(193deg) brightness(99%) contrast(94%); + } + & when (@lookup = mocha) { + filter: brightness(0) invert(84%) sepia(19%) saturate(370%) + hue-rotate(192deg) brightness(98%) contrast(95%); + } + } + } + /* File preview (in Drive) text document */ + .a-b-r-x, + .ndfHFb-c4YZDc-fmcmS-bN97Pc /* File preview (separate tab) text document */ + { + &, + pre { + background-color: @surface0 !important; + color: @text !important; + } + } + /* File preview (in Drive) comment on image */ + .Yk-efwuC { + background-color: @surface0 !important; + /* File preview (in Drive) comment on image person */ + .Yk-Vq7Udc { + background-color: @surface0 !important; + [data-name] { + color: @text !important; + } + /* Comment text */ + .Yk-eKrold-Sg.Yk-eKrold-Sg { + color: @text !important; + } + /* Comment date */ + .Yk-eKrold-bi { + color: @subtext0 !important; + } + } + /* File preview (in Drive) comments */ + .Yk-efwuC-vb-Gd { + background-color: @surface0; + &, + * { + color: @text !important; + } + [role="textbox"] { + background-color: @surface1; + border-color: @overlay0; + &::before { + color: @subtext0 !important; + } + } + [role="button"] { + background-color: @surface1 !important; + /* needed to override border-color */ + &[role="button"] { + border-color: @overlay0 !important; + } + &[aria-disabled="true"] { + background-color: @surface1 !important; + color: @subtext0 !important; + } + } + } + } + + /* Drive sharing window material icon */ + .SbpzSe .VfPpkd-StrnGf-rymPhb-f7MjDc { + color: @accent-color; + } + + /* Drive sharing window access hover */ + .lfDNBb:hover, + .lfDNBb:focus-within, + .ZelW3e:hover .FYhd9e, + .ZelW3e:focus-within .FYhd9e /* Drive sharing window person row hover */ { + background-color: @surface0; + } + + /* Drive sharing iframe (in Drive) */ + .lb-k-x { + color-scheme: unset; + } + /* Drive sharing iframe (file preview separate tab) */ + .XKSfm-Sx9Kwc-bN97Pc { + color-scheme: auto; /* unset doesn't work? */ + } + [role="tooltip"], + .Kk7lMc-Ca /* Drive applications sidebar tooltip */, + .gb_2e /* Drive google account tooltip */ { + background-color: @surface2; + *, + & { + color: @text !important; + } + border-color: transparent; + /* File preview (separate tab) tooltip arrow */ + .tk3N6e-suEOdc-jQ8oHc, + .tk3N6e-suEOdc-ez0xG { + border-color: @surface2 transparent !important; + } + } + + /* Drive applications sidebar close button */ + .Kk7lMc-QWPxkf-d-j .Yb-Il-d .Yb-Il-d-c-j { + background-color: @surface0; + path:nth-child(1) { + stroke: @text; + } + } + /* Drive applications sidebar get addons */ + .Yb-Il-d#qJTzr .Yb-Il-d-c-j { + & when (@lookup = latte) { + filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) hue-rotate( + 196deg + ) brightness(90%) contrast(86%); + } + & when (@lookup = frappe) { + filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) hue-rotate( + 192deg + ) brightness(104%) contrast(92%); + } + & when (@lookup = macchiato) { + filter: brightness(0) invert(84%) sepia(13%) saturate(579%) hue-rotate( + 193deg + ) brightness(99%) contrast(94%); + } + & when (@lookup = mocha) { + filter: brightness(0) invert(84%) sepia(19%) saturate(370%) hue-rotate( + 192deg + ) brightness(98%) contrast(95%); + } + } + /* Drive applications sidebar close button white background */ + .Yb-Il-d-c-Nd { + background-color: transparent; + } + + /* Drive icon */ + [src="//ssl.gstatic.com/images/branding/product/1x/drive_2020q4_48dp.png"] { + @darkBlue: mix(@blue, @base, 80%); + @darkGreen: mix(@green, @base, 80%); + + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + /* Drive upload checkmark */ + .z-Ea-Fj-c svg path { + fill: @green; + } + } +} + +#rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/google-gemini/catppuccin.user.css b/styles/google-gemini/catppuccin.user.css index dfdc8b63d7..cf91c8bfdf 100644 --- a/styles/google-gemini/catppuccin.user.css +++ b/styles/google-gemini/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Google Gemini Catppuccin +@name Google Gemini Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/google-gemini @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google-gemini -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google-gemini/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google-gemini/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle-gemini @description Soothing pastel theme for Google Gemini @author Catppuccin @@ -13,415 +13,4 @@ @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('gemini.google.com') { - @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); - - :root .dark-theme { - #catppuccin(@darkFlavor, @accentColor); - } - - :root .light-theme { - #catppuccin(@lightFlavor, @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]; - - --ctp-rosewater: @rosewater; - --ctp-flamingo: @flamingo; - --ctp-pink: @pink; - --ctp-mauve: @mauve; - --ctp-red: @red; - --ctp-maroon: @maroon; - --ctp-peach: @peach; - --ctp-yellow: @yellow; - --ctp-green: @green; - --ctp-teal: @teal; - --ctp-sky: @sky; - --ctp-sapphire: @sapphire; - --ctp-blue: @blue; - --ctp-lavender: @lavender; - --ctp-text: @text; - --ctp-subtext1: @subtext1; - --ctp-subtext0: @subtext0; - --ctp-overlay2: @overlay2; - --ctp-overlay1: @overlay1; - --ctp-overlay0: @overlay0; - --ctp-surface2: @surface2; - --ctp-surface1: @surface1; - --ctp-surface0: @surface0; - --ctp-base: @base; - --ctp-mantle: @mantle; - --ctp-crust: @crust; - - color-scheme: if(@lookup =latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - --bard-color-neutral-90: @mantle; - --bard-color-on-selected-conversation-metadata-v2: @text; - --bard-color-surface-container: @mantle; - --bard-color-on-surface-opacity-38: @surface2 !important; - --bard-color-surface-container-highest: lighten(@base, 5%); - --bard-color-response-container-flipped-background: @surface0; - --bard-color-inverse-on-surface: darken(@mantle, 1%); - --bard-color-sidenav-mobile-controls: @text; - --bard-color-main-container-background: @base; - --bard-color-main-container-background-rgb: #rgbify(@base) []; - --bard-color-window-container-background: @base; - --bard-color-response-container-background: @base; - --bard-color-response-container-background-rgb: #rgbify(@base) []; - --bard-color-onhover-conversation-metadata-button-v2: @surface1; - --bard-color-selected-conversation-metadata-button-v2: fade( - @accent-color, - 40% - ); - --bard-color-new-conversation-button: @surface0; - --bard-color-on-new-conversation-button: @text; - --bard-color-onhover-conversation-metadata-v2: @surface0; - --bard-color-sidenav-upgrade-button: @surface0; - --bard-color-form-field-placeholder: @subtext0; - --bard-color-discovery-carousel-background: @mantle; - --bard-color-discovery-carousel-icon: @accent-color; - --bard-color-example-prompt-background: @crust; - --bard-color-bard-mode-logo-prefix: @subtext1; - --bard-color-neutral-96: @crust; - --bard-color-adv-marketing-basic-background: @surface0; - --bard-color-adv-marketing-product-background: @surface0; - --bard-color-adv-marketing-disclaimer: @subtext0; - --bard-color-input-area-buttons-selected-background: fade( - @accent-color, - 70% - ); - --bard-color-zero-state-card-selected: fade(@accent-color, 30%); - --bard-color-zero-state-prompt-chip-background: fade(@accent-color, 50%); - --bard-color-zero-state-prompt-chip-text: lighten(@accent-color, 5%); - --bard-color-regular-banner: @accent-color; - --bard-color-regular-banner-text: @crust; - --bard-color-skeleton-loader-background-1-rgb: #rgbify(@mantle) []; - --bard-color-skeleton-loader-background-2-rgb: #rgbify(@accent-color) []; - --bard-color-skeleton-loader-background-3-rgb: #rgbify(@accent-color) []; - --bard-color-brand-text-gradient-stop-1: @blue; - --bard-color-brand-text-gradient-stop-2: @sapphire; - --bard-color-brand-text-gradient-stop-3: @peach; - --bard-color-on-surface-opacity-12: fade(@teal, 10%); - --bard-color-footer-background: @mantle; - --bard-color-draft-chip-background: @surface0; - --bard-color-processing-animation-color-1: @surface1; - --bard-color-processing-animation-color-2: @crust; - --bard-color-tunable-selection-button: @mantle; - --bard-color-tunable-selection-button-icon: @text; - --bard-color-feedback-form-container-background: @mantle; - --bard-color-fact-check-tooltip-entailed-highlight: fade(@green, 25%); - --bard-color-fact-check-tooltip-entailed-selected: fade(@green, 35%); - --bard-color-fact-check-tooltip-contradictory-highlight: fade(@red, 25%); - --bard-color-fact-check-tooltip-contradictory-selected: fade(@red, 40%); - --bard-color-factuality-form-background: @mantle; - --bard-color-fact-check-button-complete: @surface0; - --bard-color-fact-check-button-loading: @surface1; - --bard-color-tunable-selection-menu-text: @text; - --bard-color-tunable-selection-menu-background: @mantle; - --bard-color-tunable-selection-textarea-background: @base; - --bard-color-tunable-selection-shimmer-non-advanced: @accent-color; - --bard-color-onegooglebar-product-controls: @text; - --bard-color-adv-marketing-check: @text; - - --mdc-switch-selected-hover-handle-color: lighten(@accent-color, 10%); - --mdc-switch-selected-focus-handle-color: lighten(@accent-color, 10%); - --mdc-switch-selected-pressed-handle-color: lighten(@accent-color, 15%); - --mdc-switch-selected-track-color: fade(@accent-color, 50%); - --mdc-switch-selected-hover-track-color: fade(@accent-color, 50%); - --mdc-switch-selected-focus-track-color: fade(@accent-color, 50%); - --mdc-switch-selected-pressed-track-color: fade(@accent-color, 50%); - --mdc-switch-selected-handle-color: @accent-color; - --mdc-switch-unselected-handle-color: @subtext0; - --mdc-switch-unselected-hover-handle-color: @subtext1; - --mdc-switch-unselected-focus-handle-color: @text; - --mdc-switch-unselected-pressed-handle-color: @text; - --mdc-switch-unselected-track-color: @surface2; - --mdc-switch-unselected-hover-track-color: @surface2; - --mdc-switch-unselected-pressed-track-color: @surface2; - --mdc-switch-unselected-focus-track-color: @surface2; - --mdc-checkbox-selected-icon-color: @accent-color; - --mdc-checkbox-selected-checkmark-color: var(--gem-sys-color--on-primary); - --mdc-checkbox-selected-hover-icon-color: @accent-color; - --mdc-checkbox-selected-pressed-icon-color: @accent-color; - --mdc-checkbox-selected-focus-icon-color: @accent-color; - --mdc-checkbox-selected-focus-state-layer-color: @accent-color; - --mdc-checkbox-selected-hover-state-layer-color: @accent-color; - --mdc-checkbox-selected-pressed-state-layer-color: @text; - --mdc-checkbox-unselected-pressed-state-layer-color: @accent-color; - --mdc-checkbox-unselected-focus-state-layer-color: @text; - --mdc-checkbox-unselected-hover-state-layer-color: @text; - --mdc-checkbox-unselected-focus-icon-color: @text; - --mdc-checkbox-unselected-icon-color: @subtext1; - --mdc-checkbox-unselected-hover-icon-color: @text; - --mdc-text-button-label-text-color: @subtext1; - --mdc-text-button-hover-label-text-color: @overlay2; - --mdc-list-list-item-hover-label-text-color: @text; - --mdc-filled-button-label-text-color: @crust; - --mdc-circular-progress-active-indicator-color: @accent-color; - --mdc-outlined-button-focus-outline-color: @text; - --mdc-outlined-button-hover-label-text-color: @subtext1; - --mdc-list-list-item-focus-label-text-color: @text; - --mdc-icon-button-disabled-icon-color: @surface2; - --mdc-outlined-text-field-input-text-color: @text; - --mdc-outlined-text-field-focus-outline-color: @accent-color; - --mdc-outlined-text-field-outline-color: @overlay1; - - --mat-app-text-color: @text; - --mat-text-button-state-layer-color: @overlay2; - --mat-sidenav-container-text-color: @text; - --mat-expansion-header-text-color: @text; - --mat-expansion-header-indicator-color: @text; - --mat-expansion-container-text-color: @text; - --mat-checkbox-label-text-color: @text; - --mat-bottom-sheet-container-text-color: @text; - --mat-bottom-sheet-container-background-color: @base; - --mat-menu-item-hover-state-layer-color: @surface0; - --mat-menu-item-focus-state-layer-color: @surface0; - --mat-menu-item-label-text-color: @text; - --mat-menu-container-color: @base; - --mat-menu-item-icon-color: @text; - --mat-filled-button-state-layer-color: @overlay2; - --mat-focus-indicator-border-color: @accent-color; - --mat-fab-small-hover-state-layer-opacity: 1; - --mat-divider-color: @overlay2; - - --gm-outlinedtextfield-outline-color: @subtext0; - --gm-outlinedtextfield-outline-color--stateful: @accent-color; - --gm-outlinedtextfield-ink-color: @text; - --gm3-sys-color-on-secondary-container: @crust; - --gm3-sys-color-secondary-container: @text; - - --gem-sys-color--surface: @base; - --gem-sys-color--surface-container: @mantle; - --gem-sys-color--surface--rgb: #rgbify(@base) []; - --gem-sys-color--on-surface: @text; - --gem-sys-color--on-surface-variant: @subtext1; - --gem-sys-color--outline-variant: @surface1; - --gem-sys-color--surface-container-high: @surface0; - --gem-sys-color--surface-container-low: lighten(@mantle, 2%); - --gem-sys-color--outline: @subtext0; - --gem-sys-color--on-primary-container: @text; - --gem-sys-color--on-primary-fixed: darken(@accent-color, 40%); - --gem-sys-color--on-primary: darken(@accent-color, 60%); - --gem-sys-color--primary: @accent-color; - --gem-sys-color--primary-container: fade(@accent-color, 60%); - --gem-sys-color--on-surface--rgb: #rgbify(@subtext0) []; - --gem-sys-color--surface-dim--rgb: #rgbify(@crust) []; - --gem-sys-color--surface-container-highest: @surface0; - --gem-sys-color--primary-fixed: @text; - --gem-sys-color--on-secondary: fade(@accent-color, 30%); - --gem-sys-color--surface-variant: @surface0; - - --og-theme-color: @text; - - .action-icon { - --gem-sys-color--on-primary: @accent-color; - --gem-sys-color--on-surface-variant: @mantle; - } - .draft-preview-label-chip.selected { - color: @crust; - } - .buttons-container-link-button { - color: @crust; - } - .mdc-text-field--outlined:hover:not( - .mdc-text-field--disabled, - .mdc-text-field--focused - ) { - & .mdc-notched-outline__leading, - & .mdc-notched-outline__trailing { - border-color: @text !important; - } - } - .gmat-mdc-dialog .mat-mdc-dialog-container { - .mdc-dialog__content { - color: @subtext0; - } - .mdc-dialog__title { - color: @text; - } - } - .gmat-mdc-button.mat-mdc-outlined-button.mat-unthemed { - --mdc-outlined-button-outline-color: @overlay0; - --mdc-outlined-button-label-text-color: @subtext0; - } - .gmat-mdc-button.mat-mdc-outlined-button { - --mat-outlined-button-state-layer-color: @overlay2; - } - .gmat-mdc-button.mat-mdc-outlined-button:not( - .mat-mdc-button-disabled, - [disabled], - :disabled - ).mdc-ripple-upgraded--background-focused, - .gmat-mdc-button.mat-mdc-outlined-button:not( - .mat-mdc-button-disabled, - [disabled], - :disabled, - .mdc-ripple-upgraded - ):focus { - color: @text; - } - .gmat-mdc-chip { - --mdc-chip-label-text-color: @subtext0; - } - .gmat-mdc-chip.gmat-hairline-chip { - --mdc-chip-outline-color: @subtext0; - } - .gmat-mdc-chip.cdk-focused { - --mdc-chip-label-text-color: @text; - } - .mat-mdc-standard-chip { - --mdc-chip-hover-state-layer-color: @overlay1; - --mdc-chip-focus-state-layer-color: @overlay2; - } - .mdc-tooltip__surface { - --mdc-plain-tooltip-container-color: @overlay0; - --mdc-plain-tooltip-supporting-text-color: @text; - } - .mdc-form-field { - --mdc-form-field-label-text-color: @text; - } - .mdc-icon-button { - --mdc-icon-button-icon-color: @text !important; - } - .mdc-dialog__surface { - background-color: @base !important; - } - .expandable-button:disabled { - color: rgba(var(--gem-sys-color--on-surface--rgb), 0.38); - } - .mat-mdc-progress-bar { - --mdc-linear-progress-active-indicator-color: @accent-color; - --mdc-linear-progress-track-color: fade(@accent-color, 50%); - } - .mdc-list-item, - .gmat-mdc-list { - --mdc-list-list-item-hover-state-layer-color: @overlay1; - --mdc-list-list-item-label-text-color: @text; - --mdc-list-list-item-leading-icon-color: @text; - --mdc-list-list-item-focus-state-layer-color: @overlay2; - } - .gmat-mdc-button.mat-mdc-button.mat-primary { - --mdc-text-button-label-text-color: @accent-color; - --mdc-text-button-hover-label-text-color: lighten(@accent-color, 5%); - --mdc-text-button-focus-label-text-color: lighten(@accent-color, 8%); - } - .gmat-mdc-button.mat-mdc-button.mat-unthemed { - --mat-text-button-state-layer-color: @overlay2; - } - .gmat-mdc-button.mat-mdc-icon-button { - --mat-icon-button-state-layer-color: @overlay2; - } - .gmat-mdc-button.mat-mdc-fab:not( - .mat-mdc-button-disabled - ).mat-primary.gmat-mdc-fab-fill { - --mdc-fab-container-color: @accent-color; - --mat-fab-foreground-color: @crust; - } - .gmat-mdc-button.mat-mdc-mini-fab:not( - .mat-mdc-button-disabled - ).mat-primary.gmat-mdc-fab-outline { - --mat-fab-small-state-layer-color: @surface0; - } - .mat-mdc-fab:not(.mdc-riple-upgraded):focus::before, - .mat-mdc-mini-fab:not(.mdc-riple-upgraded):focus::before { - background: @surface2; - } - .mat-mdc-menu-panel { - background-color: @base !important; - } - .mat-mdc-fab.mat-accent { - --mat-fab-foreground-color: @text; - } - .xap-count-badge-dot { - background-color: @red; - } - & when (@lookup = latte) { - --gem-sys-color--on-primary-fixed: @accent-color; - --gem-sys-color--on-primary: @mantle; - --gem-sys-color--primary-fixed: @crust; - } - [data-mat-icon-name="search"] svg { - > path:nth-child(1) { - fill: @blue; - } - > path:nth-child(2) { - fill: @green; - } - > path:nth-child(3) { - fill: @yellow; - } - > path:nth-child(4) { - fill: @red; - } - } - .google-logo img { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - [src="https://www.gstatic.com/lamda/images/replit_dark_24px_7d0347bf84c2570074db9.svg"], - [src="https://www.gstatic.com/lamda/images/replit_light_24px_3a2ee6003110f3c8460c9.svg"] - { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } -} - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/google-gemini/catppuccin.user.less b/styles/google-gemini/catppuccin.user.less new file mode 100644 index 0000000000..8825ea1eaf --- /dev/null +++ b/styles/google-gemini/catppuccin.user.less @@ -0,0 +1,424 @@ +/* ==UserStyle== +@name Google Gemini Catppuccin +@namespace github.com/catppuccin/userstyles/styles/google-gemini +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google-gemini +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google-gemini/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle-gemini +@description Soothing pastel theme for Google Gemini +@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("gemini.google.com") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + + :root .dark-theme { + #catppuccin(@darkFlavor, @accentColor); + } + + :root .light-theme { + #catppuccin(@lightFlavor, @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]; + + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + --bard-color-neutral-90: @mantle; + --bard-color-on-selected-conversation-metadata-v2: @text; + --bard-color-surface-container: @mantle; + --bard-color-on-surface-opacity-38: @surface2 !important; + --bard-color-surface-container-highest: lighten(@base, 5%); + --bard-color-response-container-flipped-background: @surface0; + --bard-color-inverse-on-surface: darken(@mantle, 1%); + --bard-color-sidenav-mobile-controls: @text; + --bard-color-main-container-background: @base; + --bard-color-main-container-background-rgb: #rgbify(@base)[]; + --bard-color-window-container-background: @base; + --bard-color-response-container-background: @base; + --bard-color-response-container-background-rgb: #rgbify(@base)[]; + --bard-color-onhover-conversation-metadata-button-v2: @surface1; + --bard-color-selected-conversation-metadata-button-v2: fade( + @accent-color, + 40% + ); + --bard-color-new-conversation-button: @surface0; + --bard-color-on-new-conversation-button: @text; + --bard-color-onhover-conversation-metadata-v2: @surface0; + --bard-color-sidenav-upgrade-button: @surface0; + --bard-color-form-field-placeholder: @subtext0; + --bard-color-discovery-carousel-background: @mantle; + --bard-color-discovery-carousel-icon: @accent-color; + --bard-color-example-prompt-background: @crust; + --bard-color-bard-mode-logo-prefix: @subtext1; + --bard-color-neutral-96: @crust; + --bard-color-adv-marketing-basic-background: @surface0; + --bard-color-adv-marketing-product-background: @surface0; + --bard-color-adv-marketing-disclaimer: @subtext0; + --bard-color-input-area-buttons-selected-background: fade( + @accent-color, + 70% + ); + --bard-color-zero-state-card-selected: fade(@accent-color, 30%); + --bard-color-zero-state-prompt-chip-background: fade(@accent-color, 50%); + --bard-color-zero-state-prompt-chip-text: lighten(@accent-color, 5%); + --bard-color-regular-banner: @accent-color; + --bard-color-regular-banner-text: @crust; + --bard-color-skeleton-loader-background-1-rgb: #rgbify(@mantle)[]; + --bard-color-skeleton-loader-background-2-rgb: #rgbify(@accent-color)[]; + --bard-color-skeleton-loader-background-3-rgb: #rgbify(@accent-color)[]; + --bard-color-brand-text-gradient-stop-1: @blue; + --bard-color-brand-text-gradient-stop-2: @sapphire; + --bard-color-brand-text-gradient-stop-3: @peach; + --bard-color-on-surface-opacity-12: fade(@teal, 10%); + --bard-color-footer-background: @mantle; + --bard-color-draft-chip-background: @surface0; + --bard-color-processing-animation-color-1: @surface1; + --bard-color-processing-animation-color-2: @crust; + --bard-color-tunable-selection-button: @mantle; + --bard-color-tunable-selection-button-icon: @text; + --bard-color-feedback-form-container-background: @mantle; + --bard-color-fact-check-tooltip-entailed-highlight: fade(@green, 25%); + --bard-color-fact-check-tooltip-entailed-selected: fade(@green, 35%); + --bard-color-fact-check-tooltip-contradictory-highlight: fade(@red, 25%); + --bard-color-fact-check-tooltip-contradictory-selected: fade(@red, 40%); + --bard-color-factuality-form-background: @mantle; + --bard-color-fact-check-button-complete: @surface0; + --bard-color-fact-check-button-loading: @surface1; + --bard-color-tunable-selection-menu-text: @text; + --bard-color-tunable-selection-menu-background: @mantle; + --bard-color-tunable-selection-textarea-background: @base; + --bard-color-tunable-selection-shimmer-non-advanced: @accent-color; + --bard-color-onegooglebar-product-controls: @text; + --bard-color-adv-marketing-check: @text; + + --mdc-switch-selected-hover-handle-color: lighten(@accent-color, 10%); + --mdc-switch-selected-focus-handle-color: lighten(@accent-color, 10%); + --mdc-switch-selected-pressed-handle-color: lighten(@accent-color, 15%); + --mdc-switch-selected-track-color: fade(@accent-color, 50%); + --mdc-switch-selected-hover-track-color: fade(@accent-color, 50%); + --mdc-switch-selected-focus-track-color: fade(@accent-color, 50%); + --mdc-switch-selected-pressed-track-color: fade(@accent-color, 50%); + --mdc-switch-selected-handle-color: @accent-color; + --mdc-switch-unselected-handle-color: @subtext0; + --mdc-switch-unselected-hover-handle-color: @subtext1; + --mdc-switch-unselected-focus-handle-color: @text; + --mdc-switch-unselected-pressed-handle-color: @text; + --mdc-switch-unselected-track-color: @surface2; + --mdc-switch-unselected-hover-track-color: @surface2; + --mdc-switch-unselected-pressed-track-color: @surface2; + --mdc-switch-unselected-focus-track-color: @surface2; + --mdc-checkbox-selected-icon-color: @accent-color; + --mdc-checkbox-selected-checkmark-color: var(--gem-sys-color--on-primary); + --mdc-checkbox-selected-hover-icon-color: @accent-color; + --mdc-checkbox-selected-pressed-icon-color: @accent-color; + --mdc-checkbox-selected-focus-icon-color: @accent-color; + --mdc-checkbox-selected-focus-state-layer-color: @accent-color; + --mdc-checkbox-selected-hover-state-layer-color: @accent-color; + --mdc-checkbox-selected-pressed-state-layer-color: @text; + --mdc-checkbox-unselected-pressed-state-layer-color: @accent-color; + --mdc-checkbox-unselected-focus-state-layer-color: @text; + --mdc-checkbox-unselected-hover-state-layer-color: @text; + --mdc-checkbox-unselected-focus-icon-color: @text; + --mdc-checkbox-unselected-icon-color: @subtext1; + --mdc-checkbox-unselected-hover-icon-color: @text; + --mdc-text-button-label-text-color: @subtext1; + --mdc-text-button-hover-label-text-color: @overlay2; + --mdc-list-list-item-hover-label-text-color: @text; + --mdc-filled-button-label-text-color: @crust; + --mdc-circular-progress-active-indicator-color: @accent-color; + --mdc-outlined-button-focus-outline-color: @text; + --mdc-outlined-button-hover-label-text-color: @subtext1; + --mdc-list-list-item-focus-label-text-color: @text; + --mdc-icon-button-disabled-icon-color: @surface2; + --mdc-outlined-text-field-input-text-color: @text; + --mdc-outlined-text-field-focus-outline-color: @accent-color; + --mdc-outlined-text-field-outline-color: @overlay1; + + --mat-app-text-color: @text; + --mat-text-button-state-layer-color: @overlay2; + --mat-sidenav-container-text-color: @text; + --mat-expansion-header-text-color: @text; + --mat-expansion-header-indicator-color: @text; + --mat-expansion-container-text-color: @text; + --mat-checkbox-label-text-color: @text; + --mat-bottom-sheet-container-text-color: @text; + --mat-bottom-sheet-container-background-color: @base; + --mat-menu-item-hover-state-layer-color: @surface0; + --mat-menu-item-focus-state-layer-color: @surface0; + --mat-menu-item-label-text-color: @text; + --mat-menu-container-color: @base; + --mat-menu-item-icon-color: @text; + --mat-filled-button-state-layer-color: @overlay2; + --mat-focus-indicator-border-color: @accent-color; + --mat-fab-small-hover-state-layer-opacity: 1; + --mat-divider-color: @overlay2; + + --gm-outlinedtextfield-outline-color: @subtext0; + --gm-outlinedtextfield-outline-color--stateful: @accent-color; + --gm-outlinedtextfield-ink-color: @text; + --gm3-sys-color-on-secondary-container: @crust; + --gm3-sys-color-secondary-container: @text; + + --gem-sys-color--surface: @base; + --gem-sys-color--surface-container: @mantle; + --gem-sys-color--surface--rgb: #rgbify(@base)[]; + --gem-sys-color--on-surface: @text; + --gem-sys-color--on-surface-variant: @subtext1; + --gem-sys-color--outline-variant: @surface1; + --gem-sys-color--surface-container-high: @surface0; + --gem-sys-color--surface-container-low: lighten(@mantle, 2%); + --gem-sys-color--outline: @subtext0; + --gem-sys-color--on-primary-container: @text; + --gem-sys-color--on-primary-fixed: darken(@accent-color, 40%); + --gem-sys-color--on-primary: darken(@accent-color, 60%); + --gem-sys-color--primary: @accent-color; + --gem-sys-color--primary-container: fade(@accent-color, 60%); + --gem-sys-color--on-surface--rgb: #rgbify(@subtext0)[]; + --gem-sys-color--surface-dim--rgb: #rgbify(@crust)[]; + --gem-sys-color--surface-container-highest: @surface0; + --gem-sys-color--primary-fixed: @text; + --gem-sys-color--on-secondary: fade(@accent-color, 30%); + --gem-sys-color--surface-variant: @surface0; + + --og-theme-color: @text; + + .action-icon { + --gem-sys-color--on-primary: @accent-color; + --gem-sys-color--on-surface-variant: @mantle; + } + .draft-preview-label-chip.selected { + color: @crust; + } + .buttons-container-link-button { + color: @crust; + } + .mdc-text-field--outlined:hover:not( + .mdc-text-field--disabled, + .mdc-text-field--focused + ) { + & .mdc-notched-outline__leading, + & .mdc-notched-outline__trailing { + border-color: @text !important; + } + } + .gmat-mdc-dialog .mat-mdc-dialog-container { + .mdc-dialog__content { + color: @subtext0; + } + .mdc-dialog__title { + color: @text; + } + } + .gmat-mdc-button.mat-mdc-outlined-button.mat-unthemed { + --mdc-outlined-button-outline-color: @overlay0; + --mdc-outlined-button-label-text-color: @subtext0; + } + .gmat-mdc-button.mat-mdc-outlined-button { + --mat-outlined-button-state-layer-color: @overlay2; + } + .gmat-mdc-button.mat-mdc-outlined-button:not( + .mat-mdc-button-disabled, + [disabled], + :disabled + ).mdc-ripple-upgraded--background-focused, + .gmat-mdc-button.mat-mdc-outlined-button:not( + .mat-mdc-button-disabled, + [disabled], + :disabled, + .mdc-ripple-upgraded + ):focus { + color: @text; + } + .gmat-mdc-chip { + --mdc-chip-label-text-color: @subtext0; + } + .gmat-mdc-chip.gmat-hairline-chip { + --mdc-chip-outline-color: @subtext0; + } + .gmat-mdc-chip.cdk-focused { + --mdc-chip-label-text-color: @text; + } + .mat-mdc-standard-chip { + --mdc-chip-hover-state-layer-color: @overlay1; + --mdc-chip-focus-state-layer-color: @overlay2; + } + .mdc-tooltip__surface { + --mdc-plain-tooltip-container-color: @overlay0; + --mdc-plain-tooltip-supporting-text-color: @text; + } + .mdc-form-field { + --mdc-form-field-label-text-color: @text; + } + .mdc-icon-button { + --mdc-icon-button-icon-color: @text !important; + } + .mdc-dialog__surface { + background-color: @base !important; + } + .expandable-button:disabled { + color: rgba(var(--gem-sys-color--on-surface--rgb), 0.38); + } + .mat-mdc-progress-bar { + --mdc-linear-progress-active-indicator-color: @accent-color; + --mdc-linear-progress-track-color: fade(@accent-color, 50%); + } + .mdc-list-item, + .gmat-mdc-list { + --mdc-list-list-item-hover-state-layer-color: @overlay1; + --mdc-list-list-item-label-text-color: @text; + --mdc-list-list-item-leading-icon-color: @text; + --mdc-list-list-item-focus-state-layer-color: @overlay2; + } + .gmat-mdc-button.mat-mdc-button.mat-primary { + --mdc-text-button-label-text-color: @accent-color; + --mdc-text-button-hover-label-text-color: lighten(@accent-color, 5%); + --mdc-text-button-focus-label-text-color: lighten(@accent-color, 8%); + } + .gmat-mdc-button.mat-mdc-button.mat-unthemed { + --mat-text-button-state-layer-color: @overlay2; + } + .gmat-mdc-button.mat-mdc-icon-button { + --mat-icon-button-state-layer-color: @overlay2; + } + .gmat-mdc-button.mat-mdc-fab:not( + .mat-mdc-button-disabled + ).mat-primary.gmat-mdc-fab-fill { + --mdc-fab-container-color: @accent-color; + --mat-fab-foreground-color: @crust; + } + .gmat-mdc-button.mat-mdc-mini-fab:not( + .mat-mdc-button-disabled + ).mat-primary.gmat-mdc-fab-outline { + --mat-fab-small-state-layer-color: @surface0; + } + .mat-mdc-fab:not(.mdc-riple-upgraded):focus::before, + .mat-mdc-mini-fab:not(.mdc-riple-upgraded):focus::before { + background: @surface2; + } + .mat-mdc-menu-panel { + background-color: @base !important; + } + .mat-mdc-fab.mat-accent { + --mat-fab-foreground-color: @text; + } + .xap-count-badge-dot { + background-color: @red; + } + & when (@lookup = latte) { + --gem-sys-color--on-primary-fixed: @accent-color; + --gem-sys-color--on-primary: @mantle; + --gem-sys-color--primary-fixed: @crust; + } + [data-mat-icon-name="search"] svg { + > path:nth-child(1) { + fill: @blue; + } + > path:nth-child(2) { + fill: @green; + } + > path:nth-child(3) { + fill: @yellow; + } + > path:nth-child(4) { + fill: @red; + } + } + .google-logo img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + [src="https://www.gstatic.com/lamda/images/replit_dark_24px_7d0347bf84c2570074db9.svg"], + [src="https://www.gstatic.com/lamda/images/replit_light_24px_3a2ee6003110f3c8460c9.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } +} + +#rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/google-photos/catppuccin.user.css b/styles/google-photos/catppuccin.user.css index be47a28486..2034e87d2d 100644 --- a/styles/google-photos/catppuccin.user.css +++ b/styles/google-photos/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Google Photos Catppuccin +@name Google Photos Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/google-photos @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google-photos -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google-photos/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google-photos/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle-photos @description Soothing pastel theme for Google Photos @author Catppuccin @@ -13,1055 +13,4 @@ @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('photos.google.com') { - @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; - } - } - - --pkw-background: @surface0; - --gm3-dialog-refactored-container-color: @base; - --pkw-on-surface-variant: @subtext0; - --pkw-on-surface: @text; - --gm-colortextbutton-ink-color: @blue; - --gm3-sys-color-on-surface-variant: @text; - .gp1Lgf { - --gm3-card-outlined-hover-outline-color: @surface2; - --gm3-card-outlined-container-color: @surface0; - --gm3-card-outlined-outline-color: @surface2; - } - .hIolmc { - --gm3-chip-assist-flat-label-text-color: @text; - --gm3-chip-assist-flat-hover-label-text-color: @accent-color; - --gm3-chip-assist-flat-outline-color: @surface2; - --gm3-sys-color-outline: @surface2; - } - .I2nt9 { - --gm3-text-field-filled-container-color: @surface2; - --gm3-text-field-filled-input-text-color: @text; - --gm3-sys-color-primary: @accent-color; - --gm3-sys-color-on-surface: @text; - --gm3-text-field-filled-caret-color: @accent-color; - --gm3-text-field-filled-label-text-color: @text; - } - /* checkbox */ - --mdc-checkbox-selected-icon-color: @accent-color; - --mdc-checkbox-selected-checkmark-color: @mantle; - --mdc-checkbox-unselected-icon-color: @surface0; - /* radio checkbox/switches */ - .bEtrNb { - --gm3-radio-selected-focus-icon-color: @accent-color; - --gm3-radio-selected-hover-icon-color: @accent-color; - --gm3-radio-selected-icon-color: @accent-color; - --gm3-radio-selected-pressed-icon-color: @accent-color; - --gm3-radio-selected-hover-state-layer-color: @accent-color; - --gm3-radio-unselected-icon-color: @surface0; - --gm3-radio-unselected-hover-icon-color: @surface2; - } - - .OKFoxe { - --gm3-switch-selected-focus-track-color: @accent-color; - --gm3-switch-selected-hover-state-layer-color: @accent-color; - --gm3-switch-selected-track-color: @accent-color; - --gm3-switch-selected-hover-track-color: @accent-color; - --gm3-switch-selected-pressed-state-layer-color: @accent-color; - --gm3-switch-selected-pressed-track-color: @accent-color; - --gm3-switch-selected-hover-handle-color: darken(@accent-color, 20%); - --gm3-switch-selected-pressed-handle-color: darken(@accent-color, 15%); - --gm3-switch-selected-handle-color: darken(@accent-color, 10%); - --gm3-switch-selected-icon-color: @base; - } - /* uploading photo popups */ - .z1QT7e { - --gm3-card-elevated-container-color: @surface0; - } - - /* editing photo sidebar */ - .dm7YTc .FcHdhd { - --gm3-navigation-drawer-coplanar-container-color: @base; - } - - /* loading circle */ - .DMuDh { - --gm3-circular-progress-active-indicator-color: @accent-color; - } - - /* main background */ - .uGCjIb, - .HnzzId, - body { - background-color: @base !important; - color: @text !important; - } - /* uploading photo popups */ - .RUTfA { - background-color: @blue !important; - color: @mantle !important; - } - .uq8qae, - .wgq1ae { - color: @text !important; - } - .BNcPhf { - background-color: @blue !important; - } - /* top bar */ - .fXq1Rc .QtDoYb { - background-color: @crust; - border-color: @crust; - } - /* top bar when selected */ - .KWdEHf.QtDoYb.CWVNI { - background-color: @crust; - border-color: @crust; - } - - /* selected photo background */ - .rtIMgb.WjVZdb { - background-color: @overlay0; - } - /* move to archive buttonn */ - .QFDibd { - color: @text; - } - .JoLw2e { - background-color: @base; - } - /* blue move to archive suggestion */ - .mVK51d { - background-color: @blue; - } - .FkI4sc { - color: @mantle; - } - .rtMuCd { - border-bottom-color: @blue; - } - /* don't miss a moment notif popup */ - .KG4Qee, - .RODueb { - background-color: @surface0; - } - .R5XrWc { - color: @text; - } - .yERkJe { - color: @subtext0; - } - /* grey popup in the bottom left corner */ - .zyTWof-YAxtVc { - background-color: @surface0; - } - .zyTWof-gIZMF { - color: @text; - } - /* search bar in the top bar */ - .Aul2T, - .cI2tlc .jBmls { - background-color: @surface0 !important; - } - .LAL5ie .ZAGvjd { - color: @text; - -webkit-text-fill-color: @text; - } - .cI2tlc .jBmls { - box-shadow: none !important; - } - .l9dCke, - .ggIr1e, - .OmFprf { - border-color: @surface1 !important; - } - .LAL5ie .jBmls { - border-top-color: @surface1; - } - .obNJBf.wH28vf > .lEclge { - color: @text; - } - .obNJBf { - color: @subtext0; - } - /* the word photos in the google photos logo */ - .EIug8e { - color: @text; - } - /* the text in the carousel at the top of the main page */ - .oedbUb { - color: @text; - } - /* date of when the photos were taken */ - .xA0gfb { - color: @subtext1; - } - /* place where photos were taken */ - .LzExud { - color: @subtext0; - } - /* top and sidebar svgs */ - .v1262d, - .gb_Ra.gb_Ja svg { - fill: @text !important; - } - .uprWmb .v1262d { - fill: @mantle !important; - } - /* sidebar */ - .RSjvib { - background-color: @crust; - } - .uprWmb:hover, - .uprWmb { - background: @accent-color !important; - } - .HksvWb, - .HEHjMc { - color: @text; - } - .HEHjMc:hover { - color: @accent-color; - } - - .uprWmb .HksvWb { - color: @mantle !important; - } - .ylKyWb { - color: @subtext0; - } - .lJ21id { - background-color: @surface0; - } - .Olf00, - .J0dufb { - background-color: @accent-color !important; - color: @mantle; - } - /* sidebar slider */ - .bButFf { - background-color: @surface0; - border-bottom-color: @accent-color; - color: @text; - } - /* year when scrolling */ - .HrGXnb { - background-color: @surface0; - color: @text; - } - /* unlock storage discount button */ - .z3RRjd:not(:disabled) { - color: @accent-color; - border-color: @surface0; - } - /* locked photo dialog */ - .uW2Fw-P5QLlc { - background-color: @base !important; - } - .uW2Fw-k2Wrsb { - color: @text; - } - /* search bar */ - .fXq1Rc:not(.A82uMb) .Aul2T.qs41qe { - background: @surface1; - } - /* storage used bar */ - .XCxRFf { - background-color: @accent-color; - box-shadow: 2px 0 0 lighten(@accent-color, 10%); - } - .DFG23b { - background-color: @overlay0; - } - /* carousel buttons */ - .yhB1zd { - background: @surface0; - } - - /* favorites page */ - .ZEmz6b { - color: @text; - } - - /* albums page */ - /* background */ - .gN5aAe, - .eReC4e { - background-color: @base; - } - /* album title */ - .mfQCM, - .go6nxb, - .MXxZYe, - .NbrDvb, - .mfQCMe { - color: @text; - } - .kmqzh .tL9Q4c { - color: @text; - background-color: @surface0; - } - /* # of photos in album */ - .UV4Xae, - .Me6kjf { - color: @subtext0; - } - /* album date */ - .UmNiJe { - color: @subtext0; - } - /* play highlights button */ - .HQ97kd { - color: @text; - background-color: @base; - } - /* sharing dialog */ - .ju3TMb, - .hUsHhf, - .ex6r4d, - .dqAVOd { - color: @text; - background-color: @surface0; - } - .J2j0Cc.uH98yc { - background-color: @surface2; - } - /* ... menu in album */ - .s2VtY.JPdR6b { - background-color: @surface0; - } - .o7Osof .oJeWuf { - color: @text; - } - /* add to album */ - .Purf9b { - background-color: @base; - } - .Pk50Ic { - background: @accent-color; - } - /* underline on album title */ - .kmqzh .cXrdqd::before, - .kmqzh .cXrdqd::after { - background: @blue !important; - } - - /* favorites page */ - .YzU3ub.Sn08je { - background-color: @surface0; - } - - /* print store */ - .E2jkGc, - .bVnuib, - .D8oEA, - .mKmjtc, - .GVzd9d { - color: @text; - } - /* products */ - .CxyEyc { - background-color: @surface0; - border-color: @surface2; - } - /* photo books and canvases */ - .bYS0Le .p102md { - background-color: @surface0; - border-color: @surface2; - } - .INNc9c, - .fGZ5Db, - .KhXBec { - color: @text; - } - .b9GWRb { - color: @subtext0; - } - - /* explore page */ - .OgirMe, - .dykGZb { - color: @text; - } - /* names under faces */ - .hsohWb { - color: @text; - } - /* text in photos */ - .ydXkjb, - .WABMHe, - .fn6ocf { - color: @text; - } - /* categories inside the footer */ - .QmUPuf { - color: @text; - } - .QkA5Vc:not(:disabled) { - color: @subtext0; - } - - /* cannot connect page */ - .Ih0h6e, - .aPRVsf { - color: @text; - } - /* rety button */ - .RSxr8 { - background-color: darken(@accent-color, 15%); - } - - /* sharing page */ - /* item */ - .I7yCae { - color: @text; - } - .DcsHOb { - border-color: @surface2; - } - /* partner sharing dialog */ - .VfPpkd-P5QLlc, - .I4p4db, - .t1IGPc, - .Co16uf { - background-color: @surface0; - } - .osOuXd:not(.VfPpkd-O1htCb-OWXEXe-OWB6Me) .VfPpkd-TkwUic, - .osOuXd .VfPpkd-YPmvEd { - background-color: @surface2; - } - .V639qd .VfPpkd-cnG4Wd, - .fpyzKd, - .osOuXd:not(.VfPpkd-O1htCb-OWXEXe-OWB6Me) .VfPpkd-uusGie-fmcmS, - .osOuXd.VfPpkd-OkbHre.VfPpkd-rymPhb-Gtdoyb, - .VfPpkd-OkbHre .VfPpkd-rymPhb-fpDzbe-fmcmS, - .jc9Jq, - .Qwsrhf, - .VfPpkd-k2Wrsb { - color: @text; - } - .osOuXd - .VfPpkd-OkbHre.VfPpkd-rymPhb-ibnC6b.VfPpkd-rymPhb-ibnC6b-OWXEXe-gk6SMd { - background-color: @overlay2; - } - /* disabled text */ - .oFJeZc:disabled { - color: @surface2; - } - /* the small arrow in the dropdown box */ - .hqBSCb:not(.VfPpkd-O1htCb-OWXEXe-OWB6Me).VfPpkd-O1htCb-OWXEXe-XpnDCe - .VfPpkd-t08AT-Bz112c { - fill: @accent-color; - } - - /* sharing via links subpage */ - /* background */ - .Cv8Rjc { - background-color: @base; - } - /* page title & subtitle */ - .UtdETd, - .wMLcHf { - color: @text; - } - /* date when it was shared */ - .DtcBIe { - color: @subtext1; - } - /* item border */ - .j90Xnb { - border-color: @surface1; - } - - /* settings page */ - /* main text */ - h1, - .fl9QFd, - .CZ5Sfb, - .mSbCD, - .Ecvatc, - .C96I0d, - .HiceN, - .Qizfvf, - .bCPWJc, - .P0eWkf, - .rvEjke, - .IGdgBf, - .Sn08je, - .Ja4Wfd, - .tLNx2, - .x1vyqd, - .CqtWH, - .wbspQd, - .vUbGoc, - .GIYFWc, - .btKbVe, - .l9UZue, - .hEFMYc, - .BrvAFe { - color: @text; - } - /* top bar */ - .eReC4e.FbgB9 { - border-color: @surface0; - } - .yNVtPc .ZAGvjd .Ny5lGc::placeholder { - color: @text; - } - /* upload button */ - .s4MBmb { - color: @text; - } - /* automatic album label */ - .ecTDsc { - background-color: @accent-color; - color: @crust; - } - /* subtext */ - .fYwTV, - .rN6Qmb, - .eT2rxc, - .EqBDpe, - .cuFkEd, - .hcClrf, - .o7Osof .HhLEze, - .k4Or1e, - .uNz2Jf, - .PzGzq, - .QWd4Mb { - color: @subtext0; - } - /* "view" button links */ - .oFJeZc:not(:disabled) { - color: @accent-color; - } - /* sectional borders */ - .X0f2Ie, - .TYKfpe { - border-color: @surface0 !important; - } - /* storage discount button */ - .kDryjd:not(:disabled) { - background-color: @accent-color; - color: @crust; - } - /* selected radial selector */ - .bEtrNb - .VfPpkd-gBXA9-bMcfAe:enabled:checked - + .VfPpkd-RsCWK - .VfPpkd-wVo5xe-LkdAo, - .bEtrNb .VfPpkd-gBXA9-bMcfAe:enabled + .VfPpkd-RsCWK .VfPpkd-Z5TpLc-LkdAo { - border-color: @accent-color; - } - /* unselected radial selector */ - .bEtrNb - .VfPpkd-gBXA9-bMcfAe:enabled:not(:checked) - + .VfPpkd-RsCWK - .VfPpkd-wVo5xe-LkdAo { - border-color: @surface0; - } - /* switch that is in the off position */ - .OKFoxe .VfPpkd-uMhiad::before { - background: @mantle; - } - .OKFoxe:disabled .VfPpkd-l6JLsf::before { - background-color: @surface1 !important; - } - .OKFoxe.VfPpkd-scr2fc-OWXEXe-uqeOfd:disabled .VfPpkd-pafCAf { - fill: @accent-color; - } - /* switch that is in the on position */ - .OKFoxe.VfPpkd-scr2fc-OWXEXe-gk6SMd:enabled .VfPpkd-uMhiad::after { - background-color: @accent-color; - } - .OKFoxe.VfPpkd-scr2fc-OWXEXe-gk6SMd:enabled .VfPpkd-pafCAf { - fill: @mantle; - } - .OKFoxe:enabled .VfPpkd-l6JLsf::after { - background: @surface1; - } - - /* partner sharing */ - .QYw5Ld { - background-color: @accent-color; - border-color: @surface0; - } - - .QYw5Ld span { - color: @crust; - } - - .Sxge7c, - .GkGmge { - color: @text !important; - } - - /* print orders page */ - .fwAVoc { - color: @text; - } - - /* privacy page */ - .UNOf0e, - .bTd6c { - color: @text; - } - /* footer */ - .rniux { - color: @subtext0; - } - - /* slideshow buttons */ - .UPRhTe { - background-color: @base; - } - - /* activity log page */ - /* main backgroound */ - .X67EZe { - background-color: @surface0; - } - /* main text */ - .vLZJlf, - .GiPflf, - .iEGkef { - color: @text; - } - /* type of activity */ - .PDX3vc.LMgvRb { - color: @green; - } - .y03tld .e2CuFe { - border-top-color: @green; - } - /* reached the end */ - .EIkL5b { - color: @subtext0; - } - - /* utilities page */ - /* headings */ - .ARSUIf { - color: @text; - } - /* elements */ - .FkWMmd { - color: @text; - } - .lnQi4 { - border-color: @surface2; - } - /* "new" pill thingy idk what to call this lol */ - .Li8WFe { - color: @mantle; - background-color: @accent-color; - } - /* create highlight video subpage */ - .a4dmPd { - border-color: @surface0; - } - .BH0KJc { - color: @text; - } - .z3RRjd:disabled { - color: @subtext0; - } - .IZzwM.bu4MSb { - --gm3-chip-input-without-avatar-label-text-color: @text; - --gm3-chip-input-without-avatar-with-trailing-icon-trailing-icon-color: @text; - background-color: @overlay0; - } - - /* trash page */ - .NSzyed { - color: @text; - } - - /* storage page */ - .hwDBSe, - .tzFvIf, - .BZXMjd .MrqLTc, - .ZbJY6, - .NKihpc, - .V3WOgd { - color: @text; - } - .gyqWff, - .BZXMjd .chfDde { - color: @subtext0; - } - - /* how much storage is used bar */ - .O4tDGf:nth-of-type(1), - .vN9JEc:nth-of-type(1) > .ZbKZ3d { - background-color: @accent-color; - } - .O4tDGf:nth-of-type(2), - .vN9JEc:nth-of-type(2) > .ZbKZ3d { - background-color: lighten(@accent-color, 15%); - } - .yVr0Vb { - background-color: @overlay0; - } - /* google 1 more storage border */ - .BZXMjd.mPxwXe { - background-image: conic-gradient(@surface0, @surface0), - conic-gradient( - from 2deg, - @peach 0deg, - @peach 90deg, - @green 90deg, - @green 180deg, - @blue 180deg, - @blue 270deg, - @red 270deg, - @red 1turn - ), - linear-gradient(@surface2, @surface2); - } - /* review and delete */ - .nfTM4e, - .UKzvpf .ASWyTc, - .TTlRAe .oevqcc { - color: @text; - } - .UKzvpf .YvjW7c { - color: @subtext0; - } - .UKzvpf:not(:last-child) .e0CX4d::after { - background-color: @overlay0; - } - .KVhwqd .TTlRAe .e0CX4d, - .TTlRAe:not(:last-child) .e0CX4d { - border-color: @overlay0; - } - - /* photo editing sidebar */ - .gmtNPe { - background-color: @surface0; - } - .bYXAhf, - .hGASzd, - .YFLDdf, - .QEQULc { - color: @text; - } - .dm7YTc .kDryjd:disabled { - color: fade(@text, 35%); - background-color: fade(@base, 40%); - } - .ALaST { - border-color: @surface0; - } - /* cropping tol */ - .j1AIcc { - background-color: @surface0; - } - .TERVqe { - background-color: @mantle; - } - /* effect sliders */ - .dm7YTc .fEUJ5b .dCWhBf, - .dm7YTc .fEUJ5b .R4GWv, - .dm7YTc .fEUJ5b.qoCZef .dCWhBf, - .dm7YTc .fEUJ5b.qoCZef .R4GWv, - .dm7YTc .fEUJ5b.qs41qe .dCWhBf, - .dm7YTc .fEUJ5b.qs41qe .R4GWv, - .dm7YTc .fEUJ5b .bBKqme { - background-color: @accent-color; - } - /* filters tool */ - .XlI4Ne { - color: @text; - } - /* pen tool */ - .W3FYdb { - background-color: @surface0; - } - /* photo info */ - .Q77Pt { - background-color: @base; - } - .WUbige { - color: @text; - } - .wiOkb, - .R9U8ab, - .x1LMef { - color: @text; - } - .JzSi2b, - .oBMhZb { - color: @subtext0; - } - .KefOhc { - border-bottom-color: @surface0; - } - /* editing date/location */ - .rrk4We:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me), - .sGhbA, - .LAL5ie .jBmls, - .VfPpkd-fmcmS-OyKIhb::after { - background-color: @surface2; - } - .oMg70c:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-NLUYnc-V67aGc, - .oMg70c:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) - .VfPpkd-NLUYnc-V67aGc-OWXEXe-TATcMc-KLRBe, - .oMg70c:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-fmcmS-wGMbrd, - .sGhbA, - .osOuXd:not(.VfPpkd-O1htCb-OWXEXe-OWB6Me) - .VfPpkd-NLUYnc-V67aGc-OWXEXe-TATcMc-KLRBe, - .BnQsec, - .mplJGb { - color: @text; - } - .osOuXd:not(.VfPpkd-O1htCb-OWXEXe-OWB6Me) .VfPpkd-RWgCYc-ksKsZd::after { - border-color: @accent-color; - } - .ddaf0 .qggZ5d .d1dlne::after { - background-color: @accent-color; - } - .pRVpNc { - color: @subtext0; - } - - /* unsupported videos page */ - /* video title & amount of vid selected */ - .nTuy2b, - .dSfdaf, - .rtExYb { - color: @text; - } - /* date & size of vid */ - .iKLDRc { - color: @subtext0; - } - /* selected video backgrounc */ - .s67Ibf.UYcdu { - background: fade(@accent-color, 40%); - } - - /* skipped suggestions page */ - /* suggestion background */ - .AbQ7md { - background: @surface0; - border-color: @surface2; - } - /* date of suggestion */ - .Vy0KAc { - color: @text; - } - - a { - color: @blue; - } - - .ATUW8c { - box-shadow: 0 0 0 1px var(--pkw-outline, (@surface2)) inset; - } - - // google 1 icon - .BZXMjd.mPxwXe .oXxEid { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - //google logo - .UDKXKd, - .uuRyud { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - // app store install button - .ASbIvd { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - - & when (@lookup =latte) { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - } - - //google play install button - .Od6mvf { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - - & when (@lookup =latte) { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - } - - // sharing - .MmE0qc { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - // favorites image - .ryy2Zd { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - //album image - .AAF8rf { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - //archive image - .ZgMovb { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - // no photo orders image - .raQi0b { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - - & when (@lookup =latte) { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - } - - //app download page image - .TN5Asf { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - - & when (@lookup =latte) { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - } - - //google shield icon - .SAdUce { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - & when (@lookup =latte) { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - } - - //trash icon - .bR1LEf { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - // sharing buddy icon - .PfAiBf { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - // add photos svg - .nlmbYc { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - } -} -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/google-photos/catppuccin.user.less b/styles/google-photos/catppuccin.user.less new file mode 100644 index 0000000000..670f903222 --- /dev/null +++ b/styles/google-photos/catppuccin.user.less @@ -0,0 +1,1066 @@ +/* ==UserStyle== +@name Google Photos Catppuccin +@namespace github.com/catppuccin/userstyles/styles/google-photos +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google-photos +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google-photos/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle-photos +@description Soothing pastel theme for Google Photos +@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("photos.google.com") { + @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; + } + } + + --pkw-background: @surface0; + --gm3-dialog-refactored-container-color: @base; + --pkw-on-surface-variant: @subtext0; + --pkw-on-surface: @text; + --gm-colortextbutton-ink-color: @blue; + --gm3-sys-color-on-surface-variant: @text; + .gp1Lgf { + --gm3-card-outlined-hover-outline-color: @surface2; + --gm3-card-outlined-container-color: @surface0; + --gm3-card-outlined-outline-color: @surface2; + } + .hIolmc { + --gm3-chip-assist-flat-label-text-color: @text; + --gm3-chip-assist-flat-hover-label-text-color: @accent-color; + --gm3-chip-assist-flat-outline-color: @surface2; + --gm3-sys-color-outline: @surface2; + } + .I2nt9 { + --gm3-text-field-filled-container-color: @surface2; + --gm3-text-field-filled-input-text-color: @text; + --gm3-sys-color-primary: @accent-color; + --gm3-sys-color-on-surface: @text; + --gm3-text-field-filled-caret-color: @accent-color; + --gm3-text-field-filled-label-text-color: @text; + } + /* checkbox */ + --mdc-checkbox-selected-icon-color: @accent-color; + --mdc-checkbox-selected-checkmark-color: @mantle; + --mdc-checkbox-unselected-icon-color: @surface0; + /* radio checkbox/switches */ + .bEtrNb { + --gm3-radio-selected-focus-icon-color: @accent-color; + --gm3-radio-selected-hover-icon-color: @accent-color; + --gm3-radio-selected-icon-color: @accent-color; + --gm3-radio-selected-pressed-icon-color: @accent-color; + --gm3-radio-selected-hover-state-layer-color: @accent-color; + --gm3-radio-unselected-icon-color: @surface0; + --gm3-radio-unselected-hover-icon-color: @surface2; + } + + .OKFoxe { + --gm3-switch-selected-focus-track-color: @accent-color; + --gm3-switch-selected-hover-state-layer-color: @accent-color; + --gm3-switch-selected-track-color: @accent-color; + --gm3-switch-selected-hover-track-color: @accent-color; + --gm3-switch-selected-pressed-state-layer-color: @accent-color; + --gm3-switch-selected-pressed-track-color: @accent-color; + --gm3-switch-selected-hover-handle-color: darken(@accent-color, 20%); + --gm3-switch-selected-pressed-handle-color: darken(@accent-color, 15%); + --gm3-switch-selected-handle-color: darken(@accent-color, 10%); + --gm3-switch-selected-icon-color: @base; + } + /* uploading photo popups */ + .z1QT7e { + --gm3-card-elevated-container-color: @surface0; + } + + /* editing photo sidebar */ + .dm7YTc .FcHdhd { + --gm3-navigation-drawer-coplanar-container-color: @base; + } + + /* loading circle */ + .DMuDh { + --gm3-circular-progress-active-indicator-color: @accent-color; + } + + /* main background */ + .uGCjIb, + .HnzzId, + body { + background-color: @base !important; + color: @text !important; + } + /* uploading photo popups */ + .RUTfA { + background-color: @blue !important; + color: @mantle !important; + } + .uq8qae, + .wgq1ae { + color: @text !important; + } + .BNcPhf { + background-color: @blue !important; + } + /* top bar */ + .fXq1Rc .QtDoYb { + background-color: @crust; + border-color: @crust; + } + /* top bar when selected */ + .KWdEHf.QtDoYb.CWVNI { + background-color: @crust; + border-color: @crust; + } + + /* selected photo background */ + .rtIMgb.WjVZdb { + background-color: @overlay0; + } + /* move to archive buttonn */ + .QFDibd { + color: @text; + } + .JoLw2e { + background-color: @base; + } + /* blue move to archive suggestion */ + .mVK51d { + background-color: @blue; + } + .FkI4sc { + color: @mantle; + } + .rtMuCd { + border-bottom-color: @blue; + } + /* don't miss a moment notif popup */ + .KG4Qee, + .RODueb { + background-color: @surface0; + } + .R5XrWc { + color: @text; + } + .yERkJe { + color: @subtext0; + } + /* grey popup in the bottom left corner */ + .zyTWof-YAxtVc { + background-color: @surface0; + } + .zyTWof-gIZMF { + color: @text; + } + /* search bar in the top bar */ + .Aul2T, + .cI2tlc .jBmls { + background-color: @surface0 !important; + } + .LAL5ie .ZAGvjd { + color: @text; + -webkit-text-fill-color: @text; + } + .cI2tlc .jBmls { + box-shadow: none !important; + } + .l9dCke, + .ggIr1e, + .OmFprf { + border-color: @surface1 !important; + } + .LAL5ie .jBmls { + border-top-color: @surface1; + } + .obNJBf.wH28vf > .lEclge { + color: @text; + } + .obNJBf { + color: @subtext0; + } + /* the word photos in the google photos logo */ + .EIug8e { + color: @text; + } + /* the text in the carousel at the top of the main page */ + .oedbUb { + color: @text; + } + /* date of when the photos were taken */ + .xA0gfb { + color: @subtext1; + } + /* place where photos were taken */ + .LzExud { + color: @subtext0; + } + /* top and sidebar svgs */ + .v1262d, + .gb_Ra.gb_Ja svg { + fill: @text !important; + } + .uprWmb .v1262d { + fill: @mantle !important; + } + /* sidebar */ + .RSjvib { + background-color: @crust; + } + .uprWmb:hover, + .uprWmb { + background: @accent-color !important; + } + .HksvWb, + .HEHjMc { + color: @text; + } + .HEHjMc:hover { + color: @accent-color; + } + + .uprWmb .HksvWb { + color: @mantle !important; + } + .ylKyWb { + color: @subtext0; + } + .lJ21id { + background-color: @surface0; + } + .Olf00, + .J0dufb { + background-color: @accent-color !important; + color: @mantle; + } + /* sidebar slider */ + .bButFf { + background-color: @surface0; + border-bottom-color: @accent-color; + color: @text; + } + /* year when scrolling */ + .HrGXnb { + background-color: @surface0; + color: @text; + } + /* unlock storage discount button */ + .z3RRjd:not(:disabled) { + color: @accent-color; + border-color: @surface0; + } + /* locked photo dialog */ + .uW2Fw-P5QLlc { + background-color: @base !important; + } + .uW2Fw-k2Wrsb { + color: @text; + } + /* search bar */ + .fXq1Rc:not(.A82uMb) .Aul2T.qs41qe { + background: @surface1; + } + /* storage used bar */ + .XCxRFf { + background-color: @accent-color; + box-shadow: 2px 0 0 lighten(@accent-color, 10%); + } + .DFG23b { + background-color: @overlay0; + } + /* carousel buttons */ + .yhB1zd { + background: @surface0; + } + + /* favorites page */ + .ZEmz6b { + color: @text; + } + + /* albums page */ + /* background */ + .gN5aAe, + .eReC4e { + background-color: @base; + } + /* album title */ + .mfQCM, + .go6nxb, + .MXxZYe, + .NbrDvb, + .mfQCMe { + color: @text; + } + .kmqzh .tL9Q4c { + color: @text; + background-color: @surface0; + } + /* # of photos in album */ + .UV4Xae, + .Me6kjf { + color: @subtext0; + } + /* album date */ + .UmNiJe { + color: @subtext0; + } + /* play highlights button */ + .HQ97kd { + color: @text; + background-color: @base; + } + /* sharing dialog */ + .ju3TMb, + .hUsHhf, + .ex6r4d, + .dqAVOd { + color: @text; + background-color: @surface0; + } + .J2j0Cc.uH98yc { + background-color: @surface2; + } + /* ... menu in album */ + .s2VtY.JPdR6b { + background-color: @surface0; + } + .o7Osof .oJeWuf { + color: @text; + } + /* add to album */ + .Purf9b { + background-color: @base; + } + .Pk50Ic { + background: @accent-color; + } + /* underline on album title */ + .kmqzh .cXrdqd::before, + .kmqzh .cXrdqd::after { + background: @blue !important; + } + + /* favorites page */ + .YzU3ub.Sn08je { + background-color: @surface0; + } + + /* print store */ + .E2jkGc, + .bVnuib, + .D8oEA, + .mKmjtc, + .GVzd9d { + color: @text; + } + /* products */ + .CxyEyc { + background-color: @surface0; + border-color: @surface2; + } + /* photo books and canvases */ + .bYS0Le .p102md { + background-color: @surface0; + border-color: @surface2; + } + .INNc9c, + .fGZ5Db, + .KhXBec { + color: @text; + } + .b9GWRb { + color: @subtext0; + } + + /* explore page */ + .OgirMe, + .dykGZb { + color: @text; + } + /* names under faces */ + .hsohWb { + color: @text; + } + /* text in photos */ + .ydXkjb, + .WABMHe, + .fn6ocf { + color: @text; + } + /* categories inside the footer */ + .QmUPuf { + color: @text; + } + .QkA5Vc:not(:disabled) { + color: @subtext0; + } + + /* cannot connect page */ + .Ih0h6e, + .aPRVsf { + color: @text; + } + /* rety button */ + .RSxr8 { + background-color: darken(@accent-color, 15%); + } + + /* sharing page */ + /* item */ + .I7yCae { + color: @text; + } + .DcsHOb { + border-color: @surface2; + } + /* partner sharing dialog */ + .VfPpkd-P5QLlc, + .I4p4db, + .t1IGPc, + .Co16uf { + background-color: @surface0; + } + .osOuXd:not(.VfPpkd-O1htCb-OWXEXe-OWB6Me) .VfPpkd-TkwUic, + .osOuXd .VfPpkd-YPmvEd { + background-color: @surface2; + } + .V639qd .VfPpkd-cnG4Wd, + .fpyzKd, + .osOuXd:not(.VfPpkd-O1htCb-OWXEXe-OWB6Me) .VfPpkd-uusGie-fmcmS, + .osOuXd.VfPpkd-OkbHre.VfPpkd-rymPhb-Gtdoyb, + .VfPpkd-OkbHre .VfPpkd-rymPhb-fpDzbe-fmcmS, + .jc9Jq, + .Qwsrhf, + .VfPpkd-k2Wrsb { + color: @text; + } + .osOuXd + .VfPpkd-OkbHre.VfPpkd-rymPhb-ibnC6b.VfPpkd-rymPhb-ibnC6b-OWXEXe-gk6SMd { + background-color: @overlay2; + } + /* disabled text */ + .oFJeZc:disabled { + color: @surface2; + } + /* the small arrow in the dropdown box */ + .hqBSCb:not(.VfPpkd-O1htCb-OWXEXe-OWB6Me).VfPpkd-O1htCb-OWXEXe-XpnDCe + .VfPpkd-t08AT-Bz112c { + fill: @accent-color; + } + + /* sharing via links subpage */ + /* background */ + .Cv8Rjc { + background-color: @base; + } + /* page title & subtitle */ + .UtdETd, + .wMLcHf { + color: @text; + } + /* date when it was shared */ + .DtcBIe { + color: @subtext1; + } + /* item border */ + .j90Xnb { + border-color: @surface1; + } + + /* settings page */ + /* main text */ + h1, + .fl9QFd, + .CZ5Sfb, + .mSbCD, + .Ecvatc, + .C96I0d, + .HiceN, + .Qizfvf, + .bCPWJc, + .P0eWkf, + .rvEjke, + .IGdgBf, + .Sn08je, + .Ja4Wfd, + .tLNx2, + .x1vyqd, + .CqtWH, + .wbspQd, + .vUbGoc, + .GIYFWc, + .btKbVe, + .l9UZue, + .hEFMYc, + .BrvAFe { + color: @text; + } + /* top bar */ + .eReC4e.FbgB9 { + border-color: @surface0; + } + .yNVtPc .ZAGvjd .Ny5lGc::placeholder { + color: @text; + } + /* upload button */ + .s4MBmb { + color: @text; + } + /* automatic album label */ + .ecTDsc { + background-color: @accent-color; + color: @crust; + } + /* subtext */ + .fYwTV, + .rN6Qmb, + .eT2rxc, + .EqBDpe, + .cuFkEd, + .hcClrf, + .o7Osof .HhLEze, + .k4Or1e, + .uNz2Jf, + .PzGzq, + .QWd4Mb { + color: @subtext0; + } + /* "view" button links */ + .oFJeZc:not(:disabled) { + color: @accent-color; + } + /* sectional borders */ + .X0f2Ie, + .TYKfpe { + border-color: @surface0 !important; + } + /* storage discount button */ + .kDryjd:not(:disabled) { + background-color: @accent-color; + color: @crust; + } + /* selected radial selector */ + .bEtrNb + .VfPpkd-gBXA9-bMcfAe:enabled:checked + + .VfPpkd-RsCWK + .VfPpkd-wVo5xe-LkdAo, + .bEtrNb .VfPpkd-gBXA9-bMcfAe:enabled + .VfPpkd-RsCWK .VfPpkd-Z5TpLc-LkdAo { + border-color: @accent-color; + } + /* unselected radial selector */ + .bEtrNb + .VfPpkd-gBXA9-bMcfAe:enabled:not(:checked) + + .VfPpkd-RsCWK + .VfPpkd-wVo5xe-LkdAo { + border-color: @surface0; + } + /* switch that is in the off position */ + .OKFoxe .VfPpkd-uMhiad::before { + background: @mantle; + } + .OKFoxe:disabled .VfPpkd-l6JLsf::before { + background-color: @surface1 !important; + } + .OKFoxe.VfPpkd-scr2fc-OWXEXe-uqeOfd:disabled .VfPpkd-pafCAf { + fill: @accent-color; + } + /* switch that is in the on position */ + .OKFoxe.VfPpkd-scr2fc-OWXEXe-gk6SMd:enabled .VfPpkd-uMhiad::after { + background-color: @accent-color; + } + .OKFoxe.VfPpkd-scr2fc-OWXEXe-gk6SMd:enabled .VfPpkd-pafCAf { + fill: @mantle; + } + .OKFoxe:enabled .VfPpkd-l6JLsf::after { + background: @surface1; + } + + /* partner sharing */ + .QYw5Ld { + background-color: @accent-color; + border-color: @surface0; + } + + .QYw5Ld span { + color: @crust; + } + + .Sxge7c, + .GkGmge { + color: @text !important; + } + + /* print orders page */ + .fwAVoc { + color: @text; + } + + /* privacy page */ + .UNOf0e, + .bTd6c { + color: @text; + } + /* footer */ + .rniux { + color: @subtext0; + } + + /* slideshow buttons */ + .UPRhTe { + background-color: @base; + } + + /* activity log page */ + /* main backgroound */ + .X67EZe { + background-color: @surface0; + } + /* main text */ + .vLZJlf, + .GiPflf, + .iEGkef { + color: @text; + } + /* type of activity */ + .PDX3vc.LMgvRb { + color: @green; + } + .y03tld .e2CuFe { + border-top-color: @green; + } + /* reached the end */ + .EIkL5b { + color: @subtext0; + } + + /* utilities page */ + /* headings */ + .ARSUIf { + color: @text; + } + /* elements */ + .FkWMmd { + color: @text; + } + .lnQi4 { + border-color: @surface2; + } + /* "new" pill thingy idk what to call this lol */ + .Li8WFe { + color: @mantle; + background-color: @accent-color; + } + /* create highlight video subpage */ + .a4dmPd { + border-color: @surface0; + } + .BH0KJc { + color: @text; + } + .z3RRjd:disabled { + color: @subtext0; + } + .IZzwM.bu4MSb { + --gm3-chip-input-without-avatar-label-text-color: @text; + --gm3-chip-input-without-avatar-with-trailing-icon-trailing-icon-color: @text; + background-color: @overlay0; + } + + /* trash page */ + .NSzyed { + color: @text; + } + + /* storage page */ + .hwDBSe, + .tzFvIf, + .BZXMjd .MrqLTc, + .ZbJY6, + .NKihpc, + .V3WOgd { + color: @text; + } + .gyqWff, + .BZXMjd .chfDde { + color: @subtext0; + } + + /* how much storage is used bar */ + .O4tDGf:nth-of-type(1), + .vN9JEc:nth-of-type(1) > .ZbKZ3d { + background-color: @accent-color; + } + .O4tDGf:nth-of-type(2), + .vN9JEc:nth-of-type(2) > .ZbKZ3d { + background-color: lighten(@accent-color, 15%); + } + .yVr0Vb { + background-color: @overlay0; + } + /* google 1 more storage border */ + .BZXMjd.mPxwXe { + background-image: + conic-gradient(@surface0, @surface0), + conic-gradient( + from 2deg, + @peach 0deg, + @peach 90deg, + @green 90deg, + @green 180deg, + @blue 180deg, + @blue 270deg, + @red 270deg, + @red 1turn + ), + linear-gradient(@surface2, @surface2); + } + /* review and delete */ + .nfTM4e, + .UKzvpf .ASWyTc, + .TTlRAe .oevqcc { + color: @text; + } + .UKzvpf .YvjW7c { + color: @subtext0; + } + .UKzvpf:not(:last-child) .e0CX4d::after { + background-color: @overlay0; + } + .KVhwqd .TTlRAe .e0CX4d, + .TTlRAe:not(:last-child) .e0CX4d { + border-color: @overlay0; + } + + /* photo editing sidebar */ + .gmtNPe { + background-color: @surface0; + } + .bYXAhf, + .hGASzd, + .YFLDdf, + .QEQULc { + color: @text; + } + .dm7YTc .kDryjd:disabled { + color: fade(@text, 35%); + background-color: fade(@base, 40%); + } + .ALaST { + border-color: @surface0; + } + /* cropping tol */ + .j1AIcc { + background-color: @surface0; + } + .TERVqe { + background-color: @mantle; + } + /* effect sliders */ + .dm7YTc .fEUJ5b .dCWhBf, + .dm7YTc .fEUJ5b .R4GWv, + .dm7YTc .fEUJ5b.qoCZef .dCWhBf, + .dm7YTc .fEUJ5b.qoCZef .R4GWv, + .dm7YTc .fEUJ5b.qs41qe .dCWhBf, + .dm7YTc .fEUJ5b.qs41qe .R4GWv, + .dm7YTc .fEUJ5b .bBKqme { + background-color: @accent-color; + } + /* filters tool */ + .XlI4Ne { + color: @text; + } + /* pen tool */ + .W3FYdb { + background-color: @surface0; + } + /* photo info */ + .Q77Pt { + background-color: @base; + } + .WUbige { + color: @text; + } + .wiOkb, + .R9U8ab, + .x1LMef { + color: @text; + } + .JzSi2b, + .oBMhZb { + color: @subtext0; + } + .KefOhc { + border-bottom-color: @surface0; + } + /* editing date/location */ + .rrk4We:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me), + .sGhbA, + .LAL5ie .jBmls, + .VfPpkd-fmcmS-OyKIhb::after { + background-color: @surface2; + } + .oMg70c:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-NLUYnc-V67aGc, + .oMg70c:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) + .VfPpkd-NLUYnc-V67aGc-OWXEXe-TATcMc-KLRBe, + .oMg70c:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-fmcmS-wGMbrd, + .sGhbA, + .osOuXd:not(.VfPpkd-O1htCb-OWXEXe-OWB6Me) + .VfPpkd-NLUYnc-V67aGc-OWXEXe-TATcMc-KLRBe, + .BnQsec, + .mplJGb { + color: @text; + } + .osOuXd:not(.VfPpkd-O1htCb-OWXEXe-OWB6Me) .VfPpkd-RWgCYc-ksKsZd::after { + border-color: @accent-color; + } + .ddaf0 .qggZ5d .d1dlne::after { + background-color: @accent-color; + } + .pRVpNc { + color: @subtext0; + } + + /* unsupported videos page */ + /* video title & amount of vid selected */ + .nTuy2b, + .dSfdaf, + .rtExYb { + color: @text; + } + /* date & size of vid */ + .iKLDRc { + color: @subtext0; + } + /* selected video backgrounc */ + .s67Ibf.UYcdu { + background: fade(@accent-color, 40%); + } + + /* skipped suggestions page */ + /* suggestion background */ + .AbQ7md { + background: @surface0; + border-color: @surface2; + } + /* date of suggestion */ + .Vy0KAc { + color: @text; + } + + a { + color: @blue; + } + + .ATUW8c { + box-shadow: 0 0 0 1px var(--pkw-outline, (@surface2)) inset; + } + + // google 1 icon + .BZXMjd.mPxwXe .oXxEid { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + //google logo + .UDKXKd, + .uuRyud { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + // app store install button + .ASbIvd { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + + & when (@lookup = latte) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + } + + //google play install button + .Od6mvf { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + + & when (@lookup = latte) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + } + + // sharing + .MmE0qc { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + // favorites image + .ryy2Zd { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + //album image + .AAF8rf { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + //archive image + .ZgMovb { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + // no photo orders image + .raQi0b { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + + & when (@lookup = latte) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + } + + //app download page image + .TN5Asf { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + + & when (@lookup = latte) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + } + + //google shield icon + .SAdUce { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + & when (@lookup = latte) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + } + + //trash icon + .bR1LEf { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + // sharing buddy icon + .PfAiBf { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + // add photos svg + .nlmbYc { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + } +} +/* deno-fmt-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; }; +}; diff --git a/styles/google/catppuccin.user.css b/styles/google/catppuccin.user.css index c98f18ce92..b8dd65f6bc 100644 --- a/styles/google/catppuccin.user.css +++ b/styles/google/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Google Catppuccin +@name Google Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/google @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle @description Soothing pastel theme for Google @author Catppuccin @@ -13,2422 +13,4 @@ @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 regexp("^https?://(www\\.|images\\.)?google\\..*") -{ - @media (prefers-color-scheme: light) { - :root { - #catppuccin(@lightFlavor, @accentColor); - } - } - @media (prefers-color-scheme: dark) { - :root { - #catppuccin(@darkFlavor, @accentColor); - } - } - - #catppuccin(@lookup, @accent) { - @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); - iframe { - color-scheme: none !important; - } - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - &, - body { - background: @base !important; - --uv-styles-color-surface: @crust; - --uv-styles-color-tertiary: @surface0; - --uv-styles-color-secondary: fade(@blue, 25%); - --uv-styles-color-primary: @base; - --uv-styles-color-on-primary: @blue; - --uv-styles-color-text-primary: @blue; - --uv-styles-color-icon-default: @text; - --uv-styles-color-text-emphasis: @text; - --uv-styles-color-icon-on-secondary: @subtext0; - --uv-styles-color-on-tertiary: @text; - --uv-styles-color-icon-on-tertiary: @text; - --uv-styles-color-scrim: fade(@crust, 75%); - --uv-styles-color-on-scrim: @text; - --uv-styles-color-icon-on-scrim: @text; - --xhUGwc: @base; - --bbQxAb: @text; - --IXoxUe: @subtext0; - --COEmY: @text; - --YLNNHc: @text; - --JKqx2: @blue; - --gS5jXb: @surface0; - --mXZkqc: @surface0; - --EpFNW: @mantle; - --XKMDxc: @mantle; - --TSWZIb: @mantle; - --tefdc5886c2f04483: @text; - --te8f1ea4d4928be48: @text !important; - --ta884a309a24f44f4: @subtext0 !important; - --tdee01b39543f1cac: @base !important; - --tcc8c9ef487836e2b: @surface0 !important; - --ta83cba65577ef850: @blue !important; - --t7d1a3050c2c1c0a5: @text !important; - --t6a0469853a1a02c1: @text !important; - --t5feec22832a0fdd6: @surface0 !important; - --t342c96645d13ae13: @accent-color !important; - --t6c7325fca9d536d4: @text !important; - --tf7148cf5018d5074: @text !important; - --t9ab8d922307d428d: @text; - --t62e84c71989f1975: @red !important; - --tc9db399ed82142e1: @green !important; - --uv-styles-color-text-default: @subtext0 !important; - --uv-styles-color-review-stars: @yellow !important; - --gm3-sys-color-primary: @surface0; - --gm3-sys-color-on-primary: @blue; - --Nsm0ce: @blue; - } - - /* header background */ - .CvDJxb { - background-color: @base !important; - } - - /* safe search toggle dropdown */ - .z4R3Z.yb2zA { - color: @blue !important; - } - .z4R3Z { - color: @text !important; - } - - /* selected image background */ - .PNCib.fT6ABc::after { - background-color: @surface1 !important; - border-color: @blue !important; - } - - /* travel */ - .Usd1Ac { - background-color: @surface0 !important; - border-color: @surface2 !important; - } - .P77izf { - background-color: @base !important; - color: @text !important; - } - .VfPpkd-StrnGf-rymPhb-f7MjDc, - .VfPpkd-qPzbhe-JNdkSc-Bz112c { - color: @accent-color !important; - } - .EL3pcf { - color: @accent-color !important; - } - .bVfPpkd-StrnGf-rymPhb, - .DMZ54e { - color: @text !important; - } - .VfPpkd-pafCAf, - .VfPpkd-pafCAf-OWXEXe-Xhs9z { - fill: @mantle !important; - } - .VfPpkd-l6JLsf::after { - background-color: @blue !important; - } - .VfPpkd-l6JLsf::before { - background-color: @surface2 !important; - } - .VfPpkd-uMhiad::after { - background: @overlay0; - } - .dmaMHc { - background-color: @surface0 !important; - } - .AJxgH { - background-color: @mantle !important; - } - .VfPpkd-cTi5dd { - color: @accent-color !important; - } - /* news column thingymaboober idk what it's actually called, but it's like these columns of news headlines so yeah */ - .nEklgc { - background-color: @surface0; - } - .JJZKK.Wui1sd { - border-color: @surface0; - } - .rbYSKb, - .FuOudf, - .GI74Re { - color: @subtext0; - } - /* widgets */ - /* timer */ - .pMz3A, - .qhXOwb, - .yrvNxb .pv60Cd, - .LPl7kb .pv60Cd, - .Q7q8pf .pv60Cd { - background-color: @mantle !important; - } - - /* color picker */ - .P2c8Dd { - background-color: @base; - } - - .R9RxHd { - border-color: @surface0; - } - - /* unit converter */ - .LNn04b { - background-color: @mantle; - color: @text !important; - border-color: @surface0; - } - - .vXQmIe, - .vk_c { - color: @text !important; - border-color: @surface0 !important; - } - - .NIzGle { - background-color: @yellow; - color: @crust; - } - - /* periodic table */ - .DJ3Gm { - background-color: @peach; - color: @crust; - } - - .nA1S9d { - background-color: @mauve; - color: @crust; - } - - .qY66Od { - background-color: @blue; - color: @crust; - } - - .IJR6Te { - background-color: @sky; - color: @crust; - } - - .asrVsb { - background-color: @surface0; - } - - .VCIyZb { - background-color: @red; - color: @crust; - } - - .QRbwTb { - background-color: @teal; - color: @crust; - } - - .tASb2d { - background-color: darken(@red, 5%); - color: @crust; - } - - .Fm9Me { - background-color: @yellow; - color: @crust; - } - - .wo1y7c { - background-color: @green; - color: @crust; - } - - /* search bar right beneath websites */ - .YbqTTb, - g-flat-button.BwMo1 { - background-color: @base; - border-color: @surface0; - } - - .YbqTTb:focus { - border-color: @accent-color; - } - - /* some play buttons on games */ - .fxvhbc, - .pGGGle { - background-color: @accent-color; - color: @crust; - } - - /* calculator senpai~ */ - .zRQJhd { - background-color: @base !important; - } - .XH1CIc { - color: @subtext0; - } - .pno7A.hU1rMc .Tqvz7b, - .pno7A.rfUaPd .SwDSDf { - color: @subtext1; - } - .pno7A.rfUaPd .Tqvz7b { - color: @text; - } - .tR3EBc { - background-color: @mantle; - } - .AOvabd, - .dxp44d { - background: @surface0 !important; - color: @text !important; - border-color: @surface0 !important; - &:hover { - background-color: @surface1; - border-color: @surface1; - } - } - .zbvg1c { - color: @text; - } - .UUhRt { - background-color: @blue; - color: @mantle; - border-color: @blue; - &:hover { - background-color: @sky; - border-color: @sky; - } - } - .tw-lliw.item-selected .language_list_item { - color: @blue; - } - .qv3Wpe { - color: @text; - } - .TIGsTb { - border-color: @surface0; - } - .TIGsTb:hover { - background-color: @surface0; - border-color: @surface0; - } - .MEdqYd, - .feqqG { - background: @surface2; - color: @text; - border-color: @surface2; - &:hover { - background-color: @overlay0; - border-color: @overlay0; - } - } - /* more button */ - .CybWFf { - background-color: @surface0; - } - .Lu57id { - color: @subtext0; - } - /* live sports */ - .Wrsj9b, - .ofy7ae, - .PPjCfd, - .lr-imso-fix { - background-color: @accent-color !important; - color: @crust !important; - } - - .liveresults-sports-immersive__match-grid-bottom-border, - .liveresults-sports-immersive__match-grid-right-border, - .YENodc { - border-color: @surface0; - } - - .liveresults-sports-immersive__match-tile:hover, - .KAIX8d:hover, - .kwbMAe { - background-color: @surface0; - } - - .imspo_mt__dt-t, - .imspo_mt__pm-infc, - .GOsQPe { - color: @text !important; - } - /* knowoledge panel uwu */ - .H73aad { - &, - &hover { - background-color: @mantle !important; - border-color: @surface0 !important; - } - } - - .AQtWSd, - .ulmfef, - .xCBykf, - .m2E3md { - color: @blue; - } - - .joHe2d { - background-color: @base !important; - box-shadow: 0 1px 0 @base !important; - } - .xt8Uw, - .ipwqjc, - .Bk8Hxd:link, - .ucRBdc, - .PDzHbe, - .pt3Hdf, - .Cv2Brc, - .IFGUre, - .review-dialog { - color: @text; - } - - .GK1a5e { - background-color: @text; - } - - .RC9d6e { - border-top-color: @text; - } - - .IFmkIb.IFmkIb { - background-color: @surface0; - border-color: @surface2; - } - .ab_button { - background-image: linear-gradient(to top, @surface0, @base); - background-color: @surface0; - border-color: @surface1; - } - - .PGbOqf { - background-color: @accent-color; - } - - .yAbdSd { - color: @red; - } - - .ycghLd { - background-color: @red; - border-color: @red; - } - - .IRH78d, - .CFjcj, - .HkuhB { - color: @subtext0; - } - .l2gNXd { - background-color: @yellow; - } - .uVGhGc, - .hIqKNb { - background-color: @surface0; - } - .tcuWYc { - background-image: linear-gradient( - @overlay0 1px, - rgba(255, 255, 255, 0) 0 - ); - } - .qk7LXc.Fb1AKc, - .fAt9Jd, - .SME0md, - .ipwqjc { - background-color: @base !important; - } - - .ttBXeb, - .NDTw3e.K7R36c, - .knowledge-finance-wholepage-chart__fw-uch .uch-svg { - color: @subtext0; - } - - .sQ6RSc { - fill: @text; - } - - .egcvbb { - border-color: @surface2; - &:hover { - border-color: @text; - } - } - - .knowledge-finance-wholepage-chart__hover-card { - background-color: @base; - } - .knowledge-finance-wholepage-chart__hover-card-time { - color: @subtext0; - } - - .fw-ch-sel .KWk7r.qUjgX { - background-color: @surface0; - color: @blue; - } - - .gb_Ka.gb_f, - .gb_Na.gb_f, - #gb { - background-color: @base !important; - svg, - .gb_Rc svg, - .gb_dd .gb_ld, - .gb_3c .gb_ld { - color: @text; - } - } - .gb_Nc a.gb_F, - .gb_Nc span.gb_F { - color: @text; - } - .uU7dJb { - border-bottom-color: @surface0; - background-color: @mantle; - color: @subtext1; - } - .gb_Nc .gb_d:hover { - background-color: @surface0; - } - .KxwPGc { - background-color: @mantle; - } - .HJSKzf { - color: @text; - } - - .gbqfba, - .lJ9FBc input[type="submit"] { - color: @text; - background-color: @surface0; - border-color: @surface1; - &:hover { - color: @text; - background-color: @surface0; - border-color: @surface2; - } - } - - /* AI search */ - - .UxeQfc, - .s7d4ef, - .yXu61c, - .X6JNf, - .BERAof, - .oxbMzd, - .A5s9h, - .V9Wb7c, - .GVUPk, - .GyAeWb, - .A0hi5, - .Tme6jf { - background-color: @base !important; - } - - .d3o3Ad, - .sZKvbe { - fill: @green !important; - } - - .Fzsovc, - .cwYVJe, - .RJPOee, - .vM0jzc, - .clOx1e, - .vDF3Oc.vDF3Oc .R8BTeb, - .vDF3Oc.vDF3Oc .ouxCkc, - .Yt787, - .mulB1, - .xUc8Ie, - .sfgTZc, - .I6Kpxd, - .cQEt3 { - color: @text !important; - } - - .yQLaje, - .tVoQIb, - .f9nOyf, - .kHtcsd, - .DopHqc, - .p7bv, - .ar9V1, - .DfMusf, - .y6CIle, - .JukT7c, - .xUc8Ie.BXdrne, - .sEqX7e, - .ZFiwCf { - background-color: @surface0 !important; - } - - .xUc8Ie.BXdrne, - .YUg0se, - .WGbsof { - border-color: @surface2 !important; - } - - .NOo3C { - color: @subtext1; - } - - .WGbsof[selected] { - background-color: @blue; - border-color: @blue !important; - } - - /* End of AI search */ - - /* "People also search for.." / "People also ask" section */ - .vIifob, - .p8Jhnd { - background-color: @surface0 !important; - } - - .vBnbff, - .RSWv0c.NaC7Cf, - .RSWv0c.NaC7Cf .q8U8x > div:nth-child(1) { - background-color: @surface0 !important; - color: @text !important; - } - - .DxHbyd { - background-color: @surface2 !important; - } - - .dg6jd { - color: @text !important; - } - - /* mobile ui */ - /* header background & search bar */ - .v6U7rf { - background-color: @base; - } - - .zGVn2e, - .u4frDf { - background: @surface0 !important; - } - - /* search suggestions */ - .K4VNlb, - .Sl6fgd.A7Yvie, - .Sl6fgd .zGVn2e, - .UUbT9 { - background-color: @surface0; - border-color: @surface0 !important; - } - .sb43 { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - /* text */ - .SAuUUd-z5C9Gb-fmcmS, - .tJaMb, - .TElO2c, - .cQp1Ab { - color: @text !important; - } - - .s49v2 { - b, - span { - color: @text !important; - } - } - - .ob9lvb { - color: @subtext0; - } - - /* borders */ - .Dgr5Hb, - .GqbEwc { - border-color: @surface0 !important; - } - - #gsr { - background-color: @mantle; - } - - .Ww4FFb { - box-shadow: 0 0 0 1px @base; - } - - .Faw6Fe, - .GpOXq { - border-color: @surface0 !important; - } - - .zGVn2e, - .jh86Nb { - border-color: @surface1 !important; - } - - /* Featured snippets */ - @media (prefers-reduced-motion: no-preference) { - .c2xzTb .ILfuVd b { - background: linear-gradient( - 90deg, - fade(@accent-color, 30%) 50%, - #0000 50% - ) - no-repeat 75% 0; - background-size: 200% 100%; - } - } - - .pHiOh, - a.pHiOh { - color: @subtext1 !important; - } - a { - color: @blue; - } - .RNNXgb { - background: @surface0; - border-color: @surface1; - } - .RNNXgb:hover, - .sbfc .RNNXgb { - background: @surface0 !important; - border-color: @surface0; - box-shadow: 0 1px 6px 0 @crust; - } - .minidiv .RNNXgb { - background: @surface0; - border-color: @surface1; - &:hover { - box-shadow: 0 4px 12px @crust; - } - } - .HSryR .KsRP6 { - border-color: @surface2; - } - .emcav .RNNXgb { - box-shadow: 0 1px 6px 0 @crust; - background: @surface0; - border-color: @surface0; - } - .aajZCb { - background: @surface0; - box-shadow: 0 4px 6px 0 @crust; - } - .xtSCL { - border-top-color: @surface2; - } - .sbct:hover { - background-color: @surface1; - } - .WggQGd { - color: @mauve !important; - } - .JCHpcb { - color: @subtext0; - } - .JCHpcb:hover { - color: @blue; - } - .wM6W7d, - .ABAbCc { - color: @text; - } - .uDetx { - fill: @text; - } - .ExCKkf, - .BjWz4c { - color: @subtext0; - } - .ACRAdd { - border-left-color: @overlay0; - } - .Pvpvv { - background-color: @crust; - border-color: @surface1; - color: @text; - } - .w9dUj { - color: @text !important; - } - .Pvpvv .zE5Aq, - .adnFRd, - .XfJHbe { - color: @blue; - } - .CS4h3e { - background-color: @subtext0; - } - .Pvpvv .xyGai { - color: @text; - } - #SIvCob { - color: @text; - } - .gb_Jc a.gb_B, - .gb_Jc span.gb_B { - color: @text; - } - .gb_Jc svg, - .gb_Oc.gb_Sc svg, - .gb_Jc .gb_ad .gb_id, - .gb_Jc .gb_ad .gb_Ic, - .gb_Jc .gb_ad .gb_cd, - .gb_Oc.gb_Sc .gb_id { - color: @text; - } - .gb_Ka svg, - .gb_Oc svg, - .gb_ad .gb_id, - .gb_0c .gb_id { - color: @text; - } - .gLFyf { - color: @text; - } - .QCzoEc { - color: @overlay2; - } - .szppmdbYutt__middle-slot-promo { - color: @text; - } - .gb_Jc .gb_Ud button:hover svg, - .gb_Jc .gb_d:hover { - background-color: @surface0; - } - .gb_Jc .gb_Ud.gb_qe button:hover svg, - .gb_Ud button:hover svg, - .gb_d:hover { - background-color: @surface0; - } - .gb_We { - background: @mantle; - color: @text; - } - a.gb_B, - span.gb_B { - color: @text; - } - .gb_zc div:first-child { - color: @text; - } - .gb_zc > * { - color: @subtext0; - } - .ClJ9Yb { - color: @subtext0; - } - .sfbg { - background-color: @base; - } - .jfN4p, - .lnXdpd:not([src^="/logos/doodles/"]) { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - .aXBZVd { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - .zgAlFc { - color: @blue; - } - .fLciMb { - color: @text; - } - .d2IKib { - color: @red; - } - .fLciMb:hover { - background-color: @surface0; - } - .kno-ftr.rpBMYb { - color: @subtext0; - } - .aTI8gc { - color: @text; - } - .wwUB2c { - color: @subtext0; - } - .dhERQc { - color: @base !important; - background-color: @blue !important; - } - .z1asCe, - .ikb4Bb { - color: @subtext1 !important; - } - .rsGxI.Ww4FFb, - .Ww4FFb { - background-color: @base; - } - .RES9jf { - color: @text; - } - .CSkcDe, - .related-question-pair div.iDjcJe { - color: @text; - } - .cUnQKe .ILfuVd b, - .cUnQKe .QBI8hf b { - background-color: fade(@blue, 25%); - color: @text; - } - .cUnQKe .ILfuVd, - .cUnQKe .UiGGAb.ILfuVd { - color: @subtext1; - } - .ZYHQ7e { - color: @subtext0; - } - .VuuXrf { - color: @text; - } - .hb8SAc, - .gb_Oc a.gb_H, - .gb_Oc span.gb_H { - color: @text; - } - .TQc1id .I6TXqe { - border-color: @surface2; - } - .I6TXqe, - .zaokob { - background: @base; - } - .tw-lliw:hover, - .tw-lliw:focus { - background-color: @surface0; - } - .language_list_languages.tw-ll-top::after { - background: linear-gradient(to bottom, transparent, @base); - } - .HsZQAe { - border-bottom-color: @surface2; - } - .KLEmSd { - border-bottom-color: @surface1; - } - .NtaMpb .niO4u, - .nZWEZc .ttwCMe, - .xNzW0d, - .lWzCpb { - background-color: @base; - } - .aURkK { - border-left-color: @surface1; - } - .iRPzcb { - border-bottom-color: @surface1; - } - .related-question-pair .d0fCJc { - color: @text; - } - cite, - cite a:link, - cite a:visited { - color: @subtext0; - } - .WZ8Tjf, - .EZAeBe, - .F0gfrd { - color: @subtext0; - } - .yDYNvb.lyLwlc { - color: @text; - } - .H9lube { - background-color: @base; - border-color: @surface2; - } - .Bi9oQd { - background-color: @surface1; - } - .akqY6 { - background: @surface1; - } - .KFFQ0c .YfftMc, - .KFFQ0c .YfftMc span, - .KFFQ0c .YfftMc div, - .KFFQ0c .YfftMc a, - g-menu.DWsAYc g-menu-item a.K1yPdf, - .f3LoEf, - .TXBhSe:hover, - .TXBhSe:not(:hover), - .r025kc.lVm3ye, - .Bo9xMe, - .oyj2db { - color: @subtext0; - } - .dyjrff, - .LEwnzc { - color: @subtext1; - } - .ZFiwCf { - background-color: @surface0; - &:hover { - background-color: @surface1; - } - } - .LGwnxb, - .WGwSK { - color: @text; - } - .EsIlz { - background-color: @base; - border-color: @surface1; - } - .O7G3Gd { - color: @text; - &:hover { - color: @blue; - } - } - .appbar { - background: @base; - border-top-color: @surface1; - } - .bSeRjc:hover .fKmH1e { - color: @subtext1; - background-color: @surface0; - } - .bSeRjc:hover div[aria-expanded="true"] .fKmH1e, - div[aria-expanded="true"] .fKmH1e { - background-color: fade(@blue, 25%); - color: @blue; - } - .LHJvCe, - .vqseUe, - .dMCttd { - color: @subtext0; - } - .dG2XIf .xpdbox .yc7KLc { - background-color: @base; - } - .URgIvb { - border-color: @blue; - background-color: @blue; - } - .pdpvld { - color: @green; - } - .YrbPuc { - color: @subtext1; - } - .SRfaKe, - .SRfaKe h2 { - background-color: @mantle; - } - .y6CIle { - background-color: @surface0; - } - .Yt787, - .vDF3Oc.vDF3Oc .R8BTeb { - color: @text; - } - .IDFSOe { - background-color: @surface2; - } - .ffmmcd, - .u7yw9 .WeviRb { - border-color: @surface1; - } - .wdQNof { - border-color: @surface1; - background-color: @base; - } - .PewBWb { - border-top-color: @surface1; - } - .eadHV.Ses7yd { - color: @text !important; - } - .f, - .j04ED, - .j04ED a, - .j04ED a:link, - .XaIwc { - color: @subtext0 !important; - } - #_Xg6uZYKGBYCDhbIPvK2s2AI_27 - > div:nth-child(3) - > g-right-button:nth-child(1) - > g-fab:nth-child(1), - g-right-button.wgbRNb > g-fab:nth-child(1) { - background-color: @crust !important; - } - .gb_2e { - background-color: @surface0; - } - .gb_Ec { - div:first-child { - color: @text; - } - > * { - color: @subtext0; - } - } - .kLhEKe { - background-color: @base; - } - .S8ee5.CwbYXd { - color: @text; - } - .S8ee5 { - background: @surface0; - } - .S8ee5:hover { - background: @surface1; - } - .rhHIGd { - background-color: @surface2; - } - .sY7ric { - color: @text; - } - .I6a0ee { - background-color: @base; - border-color: @surface2; - color: @text; - } - .I6a0ee:hover { - background-color: @mantle; - border-color: @surface2; - } - .I6a0ee:focus { - background-color: @crust; - border-color: @surface2; - } - .pxhZNb { - background-color: @surface0 !important; - color: @text; - } - .d2F2Td { - color: @text; - } - .c07z9 { - color: @subtext0; - } - .c07z9 a, - .c07z9 a:active, - .c07z9 a:link { - color: @text; - text-decoration-color: @subtext0; - } - .wHYlTd { - color: @subtext0; - } - .dG2XIf .c2xzTb .wDYxhc:first-child { - background: @base; - } - .fm06If .ILfuVd, - .c2xzTb .ILfuVd, - .Jb0Zif .c2xzTb .ILfuVd { - color: @text; - } - .fm06If .ILfuVd b, - .c2xzTb .ILfuVd b { - background-color: fade(@blue, 25%); - color: @text; - } - .GKS7s { - background: @surface0; - border-color: @surface1; - box-shadow: inset 0 0 0 1px @surface2; - } - .GKS7s:hover { - background-color: @surface1 !important; - border-color: @surface2; - } - .yXK7lf em { - color: @text; - } - .Lb0dA:hover { - background-color: @surface0; - } - .Lb0dA[aria-expanded="true"]:hover .EGarzf { - color: @blue; - } - .Lb0dA[aria-expanded="true"] { - background-color: fade(@blue, 25%); - } - .BaegVc:hover { - background-color: @surface0; - } - .hdtb-tl-sel .BaegVc { - background-color: fade(@blue, 25%); - } - .BaegVc:focus { - background-color: fade(@blue, 25%); - } - .TZqsAd { - background: @overlay0; - } - .FalWJb { - background: @base; - } - .YeThId { - border-top-color: @surface1; - } - .k8XOCe { - background-color: @surface0; - } - .s75CSd { - color: @text; - } - .ZkkK1e, - .uAbMZd { - background: @base; - border-color: @surface1; - &:hover { - background: @surface0; - } - } - .QjI2jc { - color: @subtext0; - } - .lhLbod { - color: @subtext0; - } - .nr7I6e div[aria-expanded="true"] .F75bid, - .nr7I6e div[aria-expanded="true"]:hover .fFI3rb .F75bid { - color: @blue; - } - .F75bid { - color: @subtext0; - } - div[aria-expanded="true"] .fFI3rb { - background-color: fade(@blue, 25%) !important; - } - div[aria-expanded="true"]:hover .fFI3rb:hover { - background-color: fade(@blue, 25%) !important; - } - .MAMMm { - background: @mantle; - box-shadow: 0 2px 6px @crust !important; - } - [selected].nWtjMe { - background: fade(@blue, 25%) !important; - } - .uZNuIf:hover { - background-color: @surface0; - color: @text; - } - [selected].nWtjMe .FMKtTb { - color: @text; - } - .nWtjMe .FMKtTb { - color: @subtext0; - } - .GKS7s .FMKtTb, - .GKS7s .RWhoyd.mol54e { - color: @text; - } - .ePSouf .FMKtTb { - color: @subtext0; - } - .NkCsjc:hover { - background-color: @surface0 !important; - color: @text; - } - .nr7I6e div[aria-haspopup="true"]:hover .F75bid { - color: @text; - } - a.hisnlb { - background: fade(@overlay2, 25%); - } - div[aria-expanded="true"] .fFI3rb, - div[aria-expanded="true"]:hover .fFI3rb:hover { - background-color: @surface0 !important; - } - .hdtb-tl-sel .BaegVc .WjMmQ:hover { - color: @blue; - } - .hdtb-mn-hd { - color: @subtext0; - } - .hdtb-mn-hd:hover { - color: @text; - } - .fSnalc { - stroke: @blue; - } - .oOg6Ne { - stroke: @yellow; - } - .ZqPjbb { - stroke: @red; - } - .aPiskd { - stroke: @green; - } - .s8GCU { - background-color: @base; - } - .Lj9fsd { - background-color: @base; - } - .jZWadf { - background-color: @base; - } - .rQEFy, - .rQEFy:hover { - border-color: fade(@blue, 25%); - background-color: fade(@blue, 25%); - } - .gbZSUe { - color: @text; - } - .gbZSUe:hover { - background: @surface0; - } - .XZ5MVe { - color: @blue; - } - a:visited { - color: @mauve; - } - .SvoXfb > .x5f7Bc { - fill: @subtext0; - } - .SvoXfb:hover > .x5f7Bc { - fill: @text; - } - .SvoXfb:hover { - background-color: @surface0; - } - .IsZvec, - .yxAsKe { - color: @subtext0; - } - .zqrO0.k0Jjg .QuU3Wb, - .zqrO0.k0Jjg:hover .QuU3Wb { - color: @subtext1; - } - .uo4vr { - color: @subtext0; - } - .minidiv .sfbg { - background: @base; - box-shadow: 0 1px 6px 0 @crust; - } - .aqCVJb { - background-color: @blue !important; - border-color: @blue !important; - } - .T8VaVe { - color: @blue; - } - .tw-ta, - #tw-source-text-container .tw-ta, - #tw-source-rmn-container .tw-ta { - color: @text; - } - .tw-bilingual-marked { - border-color: @blue; - } - #tw-target { - background-color: @surface0; - } - .tw-data-placeholder { - color: @text; - } - .j1iyq { - border-color: @surface2; - } - .w8qArf .fl { - color: @text !important; - } - .HSryR a.B1uW2d { - border-bottom-color: @surface2; - } - .usJj9c .zz3gNc { - color: @text; - } - .Ss2Faf a { - color: @text; - } - .aCOpRe em, - .yXK7lf em { - color: @text; - } - .FR7ZSc .niO4u { - background-color: @base; - border-color: @surface2; - color: @blue; - } - .g { - color: @text; - } - .VSHxQ { - color: @subtext0; - } - .cF4V5c { - background-color: @crust !important; - } - .cF4V5c g-menu-item a, - .cF4V5c g-menu-item a:visited, - .cF4V5c g-menu-item a:hover { - color: @text; - } - .cF4V5c:hover g-menu-item:hover a, - .cF4V5c:hover g-menu-item a:visited, - .cF4V5c g-menu-item a:hover { - background-color: @surface0; - } - .GZnQqe.LGiluc { - border-top-color: @surface2 !important; - } - .pkWBse { - box-shadow: 1px 1px 15px 0 @crust; - } - .dG2XIf { - background: @base; - border-color: @surface0 !important; - } - .Z0LcW { - color: @text; - } - .i29hTd .qLLird { - color: @text; - } - .i29hTd .kR7nSc { - color: @text; - } - .N6Sb2c { - color: @subtext0; - } - .C9iYEe { - color: @subtext0; - } - .KcXNxb { - background: @base; - } - .ss6qqb .PKDVJd { - color: @subtext0; - } - a.oBa0Fe { - color: @subtext0; - } - .o6juZc { - background-color: @surface0; - } - .o6juZc:hover { - background-color: @surface0; - box-shadow: 0 4px 12px @crust; - } - .W6pGoe { - background: @surface0; - box-shadow: 0 4px 6px 0 @crust; - } - .WdWr7c { - border-top-color: @surface2; - } - .sU3bKf { - color: @text; - } - .O5OUld { - color: @subtext0; - } - .zP7KFe { - background: @surface1; - } - .O5OUld:hover { - color: @blue; - } - .og3lId { - color: @text; - } - .M3w8Nb .o6juZc { - box-shadow: 0 1px 6px 0 @crust; - } - .r8xEL { - color: @text; - } - .ZZ7G7b { - color: @text; - border-color: @surface1; - } - .NZmxZe { - background-color: @base; - border-color: @surface1; - color: @text; - } - .NZmxZe:not(.rQEFy):hover, - .cj2HCb.iuN0sf .w6PoOe:hover, - .CgGjZc:hover { - background-color: @surface0; - border-color: @surface1; - color: @text; - } - .ssfWCe .ZXJQ7c, - .cj2HCb.iuN0sf .w6PoOe, - .G2XB8d, - .cj2HCb.iuN0sf .w6PoOe .KA8Jyb { - color: @subtext0; - .KA8Jyb:hover { - fill: @subtext1; - } - } - .KA8Jyb { - fill: @subtext0; - } - .CgGjZc:hover .G2XB8d { - color: @subtext1; - } - .o6OF0 { - background-color: @surface1; - &:hover { - background-color: @surface2; - } - .SHFPkb { - color: @text; - } - .PnfqLc { - color: @subtext0; - } - } - .zbRPDe, - .scU1d { - color: @text; - } - .UafVBb { - background-color: @base; - border-color: @surface2; - } - .mEQved { - color: @subtext0; - } - .goxjub { - > path:nth-child(1) { - fill: @blue; - } - > path:nth-child(2) { - fill: @green; - } - > path:nth-child(3) { - fill: @yellow; - } - > path:nth-child(4) { - fill: @red; - } - } - [fill="#34a853"] { - fill: @green; - } - [fill="#4285f4"] { - fill: @blue; - } - [fill="#ea4335"] { - fill: @red; - } - [fill="#fbbc05"] { - fill: @yellow; - } - .ssfWCe .ZXJQ7c:hover { - background-color: @surface0; - color: @text; - } - .qcTKEe { - background-color: @base; - } - .ooPrBf { - background: @base; - } - .r9PaP { - color: @subtext0; - } - .r9PaP:hover { - color: @blue; - } - .H1KrKd { - fill: @subtext0; - } - .cEPPT { - border-bottom-color: @surface1; - } - .Ix6LGe { - background: @base; - box-shadow: 0 2px 10px 0 @crust; - } - .Hm7Qac:hover, - .EuKAde { - background-color: @surface0; - } - .igM9Le { - color: @text; - } - .irf0hb { - box-shadow: 1px 1px 15px 0 @crust; - } - .gb_Mc .gb_Vd button:hover svg, - .gb_Mc .gb_d:hover { - background-color: @surface0; - } - .gb_Mc svg, - .gb_Rc.gb_Vc svg, - .gb_Mc .gb_dd .gb_ld, - .gb_Mc .gb_dd .gb_Lc, - .gb_Mc .gb_dd .gb_fd, - .gb_Rc.gb_Vc .gb_ld { - color: @text; - } - .cEW58 { - background-color: @surface0; - } - .dyAbMb { - fill: @subtext0; - } - .zItAnd, - .zItAnd:link, - .zItAnd:visited, - .zItAnd:hover, - .zItAnd:active { - color: @text; - } - .zItAnd { - background-color: @base; - border-color: @surface1; - } - .zItAnd:not(.MgQdud):hover { - background-color: @surface0; - border-color: @surface1; - } - .fKmH1e { - background-color: @base; - border-color: @surface1; - color: @subtext0; - } - .fKmH1e:hover { - background-color: @surface0; - border-color: @surface1; - } - .nfSF8e, - .WRhYSc { - color: @subtext0; - } - .nfSF8e:hover, - .WRhYSc:hover { - background-color: @surface0; - color: @subtext0; - } - .ssJ7i { - color: @text; - } - .iAIpCb { - color: @subtext0; - } - .KMdzJ, - .ss6qqb .oBrLN, - .ylgVCe { - color: @subtext1; - } - .PmPt7d { - color: @subtext0; - } - .gb_Mc a.gb_E, - .gb_Mc span.gb_E { - color: @text; - } - a.gb_E, - span.gb_E { - color: @text !important; - } - .RzdJxc { - border-top-color: @surface2; - } - .rKnmn { - border-top-color: @surface2; - } - .FzCfme { - color: @subtext0; - } - .hMJ0yc { - color: @subtext0; - } - .yg51vc { - background-color: @base; - } - .hdtb-mitem a { - color: @subtext0; - } - .hdtb-mitem .GOE98c, - .hdtb-mitem a, - .hdtb-mitem.hdtb-msel, - .t2vtad { - color: @subtext0; - } - .t2vtad:not(.hdtb-tl-sel) { - color: @subtext0; - } - .dG2XIf .xpdopen .mJ2Mod { - border-color: @surface1; - } - .t2vtad:not(.hdtb-tl-sel):hover { - background-color: @surface0; - border-color: @surface1; - color: @text; - box-shadow: 0 1px 1px @crust; - } - .hdtb-mitem:hover .GOE98c:hover, - .hdtb-mitem:hover a, - .hdtb-mitem.hdtb-msel, - .t2vtad:hover { - color: @blue; - } - .w6PoOe { - color: @subtext0; - } - .w6PoOe:hover { - color: @text; - } - .Lj9fsd.DU1Mzb { - background-color: @base; - box-shadow: 0 1px 6px 0 @crust; - .o6juZc { - border-color: @surface1 !important; - } - } - .dZ5aUe .vbLSne .MjJqGe:not(.xvfzbc):hover { - background-color: @surface0; - } - .FjVBEd { - color: @green; - } - title-with-lhs-icon:hover .ekf0x h3 { - color: @blue; - } - .GmE3X { - color: @text; - } - .iv236 { - color: @text; - } - .GLcBOb { - border-bottom-color: @surface1; - } - .ss6qqb .Ui2TZ { - color: @text; - } - .wx62f { - color: @subtext0; - } - #rhs .u7yw9 { - border-left-color: @surface1; - } - .ss6qqb .Jk5Tjc { - border-color: @surface2; - } - #rhs .u7yw9 .cLjAic { - border-bottom-color: @surface1; - } - .JNkvid .HnYYW { - color: @text; - } - .aokhrd .TZahnb { - border-left-color: @surface1; - } - .Cx1ZMc { - color: @subtext0; - } - .CBPSbf { - background-color: @base; - } - .E74aCb { - color: @text; - } - .OE86Gc { - background-color: @base; - color: @text; - fill: @text; - } - .c72nic { - color: @text; - } - .GXMTjb { - background-color: @base; - border-color: @surface0; - } - .A9y7kf { - color: @subtext0; - } - .OE86Gc a { - color: @blue; - } - .Es2Et { - color: @subtext0; - } - .KwJT0.VqKh3b div div { - background-color: @base; - fill: @text; - color: @text; - border-color: @surface1; - } - .rx7XFb { - background-color: @surface0; - } - .VP31Vb { - color: @text; - } - .HXQjqf { - background-color: fade(@blue, 25%); - color: @blue; - } - .SW5pqf { - color: @blue; - } - .rQEFy:hover { - color: @blue; - } - .hdtb-tl-sel { - border-color: @surface2; - background: @surface0; - color: @text; - } - .hdtb-tl-sel:focus { - border-color: @surface2; - background: @surface0; - color: @blue; - } - .t2vtad:active, - .t2vtad:not(.hdtb-tl-sel):hover:active { - background-color: @surface0 !important; - box-shadow: inset 0 1px 2px @crust !important; - } - .gTl8xb { - border-color: @subtext0 transparent; - } - .hdtb-mn-hd:hover .gTl8xb { - border-color: @text transparent; - } - .h3L8Ub .yMAEcf { - background: @surface0; - border-color: @surface2; - } - .ynRric { - color: @subtext0; - } - .cRV9hb .pcTkSc .wM6W7d { - color: @text; - } - .h3L8Ub .yMAEcf.sbhl { - background-color: @surface1; - } - .sbhl { - background: @surface1; - } - .CjiZvb, - .GZnQqe.EpPYLd:active { - background-color: @surface0; - } - .PyJv1b { - color: @text; - } - .REySof { - color: @overlay2 !important; - } - .NQyKp { - color: @surface0 !important; - background: @accent-color !important; - } - .b0Xfjd { - color: @base !important; - } - .LiOdre { - background-color: @base; - border-color: @surface1; - } - .LiOdre:hover { - background-color: @mantle; - border-color: @surface2; - } - .LiOdre:focus { - border-color: @blue; - } - .mfsgsd { - color: @text; - } - .GCSyeb { - background: @surface1; - } - .IVvPP .cLjAic.WY0eLb, - .Hwkikb.WY0eLb { - border-left-color: @surface1; - } - .mQo3nc { - background-color: @surface0; - color: @subtext0 !important; - } - .cfBJGe { - color: @text; - } - .f6F9Be { - background: @mantle; - } - .KwU3F { - color: @blue; - } - .b0KoTc { - color: @text; - } - .dfB0uf { - color: @text; - } - .unknown_loc { - background: @text; - } - .GS5rRd { - color: @blue; - } - .xSQxL { - color: @blue; - } - .smiUbb { - color: @text; - } - .b2hzT { - border-bottom-color: @surface0; - } - #swml { - border-left-color: @surface0; - } - .KXbwLb { - background-color: @surface2; - } - .WZH4jc .VknLRd .GNJvt { - background: @surface0; - } - .WZH4jc .VknLRd:hover .GNJvt { - background: @surface1; - } - .GNJvt { - color: @text; - } - .fJOpI.H9lube { - background-color: @blue !important; - border-color: @blue; - } - .XNo5Ab.XNo5Ab { - color: @base !important; - fill: @base !important; - } - .Ss2Faf.boljiHqtXe7__place-qa-title { - color: @text !important; - } - .xEzgBc { - color: @text !important; - } - .Ss2Faf.sq4Bpf { - color: @text !important; - } - .ea0Lbe { - background: @surface0; - } - .f6GA0, - .CacfB, - .Ua7Yuf { - background: @base; - } - .DV7the { - color: @blue; - } - .ZeVBtc { - color: @subtext0; - } - .cB9M7 { - background-color: @surface0; - border-color: @surface1; - color: @text; - &:hover { - border-color: @surface2; - } - &:focus { - border-color: @blue; - } - } - .Qwbd3 { - background: @surface0; - color: @text; - border-color: @surface1; - &:hover { - background: @surface1; - border-color: @surface2; - } - } - .ArIAXb { - fill: @surface0; - } - .qOFLsb { - fill: @surface0; - } - .aHK1bd { - color: @subtext0; - } - .diOlIe { - border-top-color: @overlay0; - } - .p4pvTd { - color: @text; - } - .gIYJUc { - background: @base !important; - border-color: @surface1 !important; - } - .Gdd5U > g:nth-child(2) { - > circle:nth-child(1) { - fill: @green !important; - } - > circle:nth-child(2) { - fill: @blue !important; - } - > path:nth-child(3) { - fill: @red !important; - } - > path:nth-child(4) { - fill: @yellow !important; - } - > path:nth-child(5) { - fill: @blue !important; - } - } - .CbAZb { - background: @base; - border-bottom-color: @surface0; - } - .S8wJ3 { - color: @text !important; - } - .ZI7elf { - color: @text !important; - } - .tGS0Nc { - color: @text; - } - .kzt0Nc a { - color: @subtext0 !important; - } - .fgc1P, - .N7KPxb { - border-top-color: @surface0 !important; - } - .kQEH5b { - color: @subtext0 !important; - } - .kNKdL { - color: @text !important; - } - .q0yked:hover { - background-color: @mantle !important; - } - .Oz5Rbb:hover { - background: @mantle !important; - } - .lwwARb { - background-color: @crust !important; - } - .LO47Ff { - color: @text; - } - .j8PBfc { - color: @subtext0; - } - .act-tim-txt-cnt { - color: @text; - } - .act-switch-area { - background-color: @base !important; - } - .EwDHG, - .vNdLpe, - .vNdLpe:visited { - color: @subtext0 !important; - } - // "Looking for results in English?" popup - [style*="background:#1f1000;border:1px solid #502900"], - [style*="background:#feefc3;border:1px solid #fdd663"] { - background: @mantle !important; - border-color: @surface0 !important; - box-shadow: 0 2px 4px @mantle !important; - [style*="color:#bdc1c6"], - [style*="color:#202124"] { - color: @text !important; - } - } - // translate this page label - .eFM0qc.BCF2pd { - background: @base !important; - } - // expand related question icon - .aj35ze { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - // tabs - [selected].YmvwI { - color: @text; - border-bottom-color: @text; - } - .YmvwI { - color: @subtext0; - } - // search bar buttons popups - [style^="background: rgb(32, 33, 36); border: 1px solid rgb(60, 64, 67);"] { - background: @mantle !important; - border-color: @overlay0 !important; - box-shadow: @mantle 1px 2px 4px !important; - color: @text !important; - [style^="border-style: solid;"] { - border-color: @overlay0 transparent !important; - } - } - // google apps button - .gb_F .gb_E, - .gb_F .gb_D { - fill: @text; - } - // translate popup - .t4wgMc { - background: @mantle; - } - .ELfqBe:hover, - .ELfqBe:focus { - background: @surface0; - } - .JFeuTc { - color: @text; - } - // skip to content - .S6VXfe { - background: @base; - } - // selected image - .qyKxnc.FnEtTd .srrRv { - background: fade(@blue, 10%); - } - // images page sticky suggestions header - .JiJthb, - .JiJthb .GKS7s:not([selected]) { - background: @mantle; - } - .JiJthb .F9Idpe.vezEod { - background: linear-gradient( - to left, - transparent 0%, - @mantle 60%, - @mantle - ); - } - // footer logo - [style^="background:url(/images/nav_logo321.webp)"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - // tweets horizontal list - g-right-button, - g-left-button { - & > g-fab { - background: @crust !important; - border-color: @surface0; - } - } - .vwfsqc { - .QuU3Wb { - color: @text; - } - } - // image overlays - .yUzGqc.wr8GYd { - background: fade(@crust, 75%); - color: @text; - } - // google lens icon hover - .ig2Tkd:hover:not(.RDPZE) { - background: fade(@mantle, 80%); - } - // image resolution - .UWuvyf { - background-color: fade(@crust, 80%); - color: @text; - } - // image hover shadow - .mkpRId.qyKxnc:hover .F0uyec { - background: fade(@crust, 5%); - box-shadow: 0 2px 12px 0 @crust; - } - // advanced search - input.jfk-textinput, - .gGbPid { - background: @base; - color: @text; - border-color: @overlay0; - } - .goog-menu { - background: @mantle; - } - .goog-menuitem-highlight, - .goog-menuitem-hover { - background: @surface0; - border-color: @surface0; - } - .goog-menuitem, - .goog-menuitem-highlight .goog-menuitem-content, - .goog-menuitem-hover .goog-menuitem-content { - color: @text; - } - .goog-flat-menu-button-hover { - border-color: @overlay2; - .goog-flat-menu-button-dropdown { - border-color: @overlay2 transparent; - } - } - .goog-flat-menu-button-dropdown { - border-color: @overlay0 transparent; - } - div.otByu div.FAcADc, - div.lFApYd, - .jfk-radiobutton-label { - color: @subtext1; - } - color: @subtext0; - } - @media (prefers-color-scheme: light) { - body { - #catppuccin(@lightFlavor, @accentColor); - } - } - @media (prefers-color-scheme: dark) { - body { - #catppuccin(@darkFlavor, @accentColor); - } - } -} - -@-moz-document regexp("^https?://(ogs\\.)?google\\..*") -{ - @media (prefers-color-scheme: light) { - body { - #catppuccin(@lightFlavor, @accentColor); - } - } - @media (prefers-color-scheme: dark) { - body { - #catppuccin(@darkFlavor, @accentColor); - } - } - #catppuccin(@lookup, @accent) { - @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]; - - .aRDKUe { - .rRF0wd { - fill: @yellow !important; - } - .ub0gT { - fill: @base !important; - } - .Pzuhxc { - color: @text !important; - &:hover { - background-color: @surface2 !important; - } - } - .hCDve { - color: @text !important; - } - .WkuXae { - color: @blue; - } - .coHE2 { - border-color: @surface2 !important; - &:hover { - background-color: fade(@blue, 25%); - } - } - .eYSAde { - color: @text !important; - } - .Lvwayc { - background-color: @surface0 !important; - } - .Z6NXed { - color: @text !important; - } - .bMnvr { - background: @surface1 !important; - } - .Wdz6e { - color: @subtext0 !important; - } - .LzIwWe { - color: @text !important; - } - .znj3je { - color: @text !important; - } - .fVFoBd { - color: @text !important; - } - .cllK4d { - background: @surface0 !important; - color: @subtext0 !important; - } - .aFCkf { - background: @surface0 !important; - color: @blue !important; - } - .DgDbFe .vZvJBb:not(:first-child) .BVnP4c::before { - color: @text !important; - } - .qLP7kc .jFfZdd { - background: @base !important; - } - .Z6NXed:hover { - background-color: @surface1 !important; - } - } - .nz9sqb.EHzcec { - background: var(--gm3-sys-color-surface-container-high, @surface0); - .LVal7b { - background: var(--gm3-sys-color-surface-container-low, @mantle); - } - } - .nz9sqb { - .NQV3m { - color: var(--gm3-sys-color-primary, @blue); - border-color: var(--gm3-sys-color-outline, @surface2); - &:hover { - background-color: fade(@blue, 25%); - } - &:focus { - background-color: fade(@blue, 25%); - } - } - .Rq5Gcb { - color: @text !important; - } - .tX9u1b:hover { - background-color: @surface0; - } - } - .nz9sqb.o07G5 .tX9u1b:active, - .nz9sqb.o07G5 .tX9u1b:active:focus, - .nz9sqb.o07G5 .tX9u1b:active .Rq5Gcb, - .nz9sqb.o07G5 .tX9u1b:active:hover .Rq5Gcb { - background-color: @surface0; - } - .aRDKUe .pRjiJb, - .aRDKUe .DmSTqc { - color: @text; - } - .aRDKUe .idKC9b, - .aRDKUe .MbHqJ { - color: @subtext0; - } - .aRDKUe .GXg3Le { - color: @blue; - } - .aRDKUe .G5bXNb { - background-color: @mantle; - &:hover { - background-color: @base; - } - } - } -} - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/google/catppuccin.user.less b/styles/google/catppuccin.user.less new file mode 100644 index 0000000000..84dc3a6931 --- /dev/null +++ b/styles/google/catppuccin.user.less @@ -0,0 +1,2429 @@ +/* ==UserStyle== +@name Google Catppuccin +@namespace github.com/catppuccin/userstyles/styles/google +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle +@description Soothing pastel theme for Google +@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 regexp("^https?://(www\\.|images\\.)?google\\..*") { + @media (prefers-color-scheme: light) { + :root { + #catppuccin(@lightFlavor, @accentColor); + } + } + @media (prefers-color-scheme: dark) { + :root { + #catppuccin(@darkFlavor, @accentColor); + } + } + + #catppuccin(@lookup, @accent) { + @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); + iframe { + color-scheme: none !important; + } + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + &, + body { + background: @base !important; + --uv-styles-color-surface: @crust; + --uv-styles-color-tertiary: @surface0; + --uv-styles-color-secondary: fade(@blue, 25%); + --uv-styles-color-primary: @base; + --uv-styles-color-on-primary: @blue; + --uv-styles-color-text-primary: @blue; + --uv-styles-color-icon-default: @text; + --uv-styles-color-text-emphasis: @text; + --uv-styles-color-icon-on-secondary: @subtext0; + --uv-styles-color-on-tertiary: @text; + --uv-styles-color-icon-on-tertiary: @text; + --uv-styles-color-scrim: fade(@crust, 75%); + --uv-styles-color-on-scrim: @text; + --uv-styles-color-icon-on-scrim: @text; + --xhUGwc: @base; + --bbQxAb: @text; + --IXoxUe: @subtext0; + --COEmY: @text; + --YLNNHc: @text; + --JKqx2: @blue; + --gS5jXb: @surface0; + --mXZkqc: @surface0; + --EpFNW: @mantle; + --XKMDxc: @mantle; + --TSWZIb: @mantle; + --tefdc5886c2f04483: @text; + --te8f1ea4d4928be48: @text !important; + --ta884a309a24f44f4: @subtext0 !important; + --tdee01b39543f1cac: @base !important; + --tcc8c9ef487836e2b: @surface0 !important; + --ta83cba65577ef850: @blue !important; + --t7d1a3050c2c1c0a5: @text !important; + --t6a0469853a1a02c1: @text !important; + --t5feec22832a0fdd6: @surface0 !important; + --t342c96645d13ae13: @accent-color !important; + --t6c7325fca9d536d4: @text !important; + --tf7148cf5018d5074: @text !important; + --t9ab8d922307d428d: @text; + --t62e84c71989f1975: @red !important; + --tc9db399ed82142e1: @green !important; + --uv-styles-color-text-default: @subtext0 !important; + --uv-styles-color-review-stars: @yellow !important; + --gm3-sys-color-primary: @surface0; + --gm3-sys-color-on-primary: @blue; + --Nsm0ce: @blue; + } + + /* header background */ + .CvDJxb { + background-color: @base !important; + } + + /* safe search toggle dropdown */ + .z4R3Z.yb2zA { + color: @blue !important; + } + .z4R3Z { + color: @text !important; + } + + /* selected image background */ + .PNCib.fT6ABc::after { + background-color: @surface1 !important; + border-color: @blue !important; + } + + /* travel */ + .Usd1Ac { + background-color: @surface0 !important; + border-color: @surface2 !important; + } + .P77izf { + background-color: @base !important; + color: @text !important; + } + .VfPpkd-StrnGf-rymPhb-f7MjDc, + .VfPpkd-qPzbhe-JNdkSc-Bz112c { + color: @accent-color !important; + } + .EL3pcf { + color: @accent-color !important; + } + .bVfPpkd-StrnGf-rymPhb, + .DMZ54e { + color: @text !important; + } + .VfPpkd-pafCAf, + .VfPpkd-pafCAf-OWXEXe-Xhs9z { + fill: @mantle !important; + } + .VfPpkd-l6JLsf::after { + background-color: @blue !important; + } + .VfPpkd-l6JLsf::before { + background-color: @surface2 !important; + } + .VfPpkd-uMhiad::after { + background: @overlay0; + } + .dmaMHc { + background-color: @surface0 !important; + } + .AJxgH { + background-color: @mantle !important; + } + .VfPpkd-cTi5dd { + color: @accent-color !important; + } + /* news column thingymaboober idk what it's actually called, but it's like these columns of news headlines so yeah */ + .nEklgc { + background-color: @surface0; + } + .JJZKK.Wui1sd { + border-color: @surface0; + } + .rbYSKb, + .FuOudf, + .GI74Re { + color: @subtext0; + } + /* widgets */ + /* timer */ + .pMz3A, + .qhXOwb, + .yrvNxb .pv60Cd, + .LPl7kb .pv60Cd, + .Q7q8pf .pv60Cd { + background-color: @mantle !important; + } + + /* color picker */ + .P2c8Dd { + background-color: @base; + } + + .R9RxHd { + border-color: @surface0; + } + + /* unit converter */ + .LNn04b { + background-color: @mantle; + color: @text !important; + border-color: @surface0; + } + + .vXQmIe, + .vk_c { + color: @text !important; + border-color: @surface0 !important; + } + + .NIzGle { + background-color: @yellow; + color: @crust; + } + + /* periodic table */ + .DJ3Gm { + background-color: @peach; + color: @crust; + } + + .nA1S9d { + background-color: @mauve; + color: @crust; + } + + .qY66Od { + background-color: @blue; + color: @crust; + } + + .IJR6Te { + background-color: @sky; + color: @crust; + } + + .asrVsb { + background-color: @surface0; + } + + .VCIyZb { + background-color: @red; + color: @crust; + } + + .QRbwTb { + background-color: @teal; + color: @crust; + } + + .tASb2d { + background-color: darken(@red, 5%); + color: @crust; + } + + .Fm9Me { + background-color: @yellow; + color: @crust; + } + + .wo1y7c { + background-color: @green; + color: @crust; + } + + /* search bar right beneath websites */ + .YbqTTb, + g-flat-button.BwMo1 { + background-color: @base; + border-color: @surface0; + } + + .YbqTTb:focus { + border-color: @accent-color; + } + + /* some play buttons on games */ + .fxvhbc, + .pGGGle { + background-color: @accent-color; + color: @crust; + } + + /* calculator senpai~ */ + .zRQJhd { + background-color: @base !important; + } + .XH1CIc { + color: @subtext0; + } + .pno7A.hU1rMc .Tqvz7b, + .pno7A.rfUaPd .SwDSDf { + color: @subtext1; + } + .pno7A.rfUaPd .Tqvz7b { + color: @text; + } + .tR3EBc { + background-color: @mantle; + } + .AOvabd, + .dxp44d { + background: @surface0 !important; + color: @text !important; + border-color: @surface0 !important; + &:hover { + background-color: @surface1; + border-color: @surface1; + } + } + .zbvg1c { + color: @text; + } + .UUhRt { + background-color: @blue; + color: @mantle; + border-color: @blue; + &:hover { + background-color: @sky; + border-color: @sky; + } + } + .tw-lliw.item-selected .language_list_item { + color: @blue; + } + .qv3Wpe { + color: @text; + } + .TIGsTb { + border-color: @surface0; + } + .TIGsTb:hover { + background-color: @surface0; + border-color: @surface0; + } + .MEdqYd, + .feqqG { + background: @surface2; + color: @text; + border-color: @surface2; + &:hover { + background-color: @overlay0; + border-color: @overlay0; + } + } + /* more button */ + .CybWFf { + background-color: @surface0; + } + .Lu57id { + color: @subtext0; + } + /* live sports */ + .Wrsj9b, + .ofy7ae, + .PPjCfd, + .lr-imso-fix { + background-color: @accent-color !important; + color: @crust !important; + } + + .liveresults-sports-immersive__match-grid-bottom-border, + .liveresults-sports-immersive__match-grid-right-border, + .YENodc { + border-color: @surface0; + } + + .liveresults-sports-immersive__match-tile:hover, + .KAIX8d:hover, + .kwbMAe { + background-color: @surface0; + } + + .imspo_mt__dt-t, + .imspo_mt__pm-infc, + .GOsQPe { + color: @text !important; + } + /* knowoledge panel uwu */ + .H73aad { + &, + &hover { + background-color: @mantle !important; + border-color: @surface0 !important; + } + } + + .AQtWSd, + .ulmfef, + .xCBykf, + .m2E3md { + color: @blue; + } + + .joHe2d { + background-color: @base !important; + box-shadow: 0 1px 0 @base !important; + } + .xt8Uw, + .ipwqjc, + .Bk8Hxd:link, + .ucRBdc, + .PDzHbe, + .pt3Hdf, + .Cv2Brc, + .IFGUre, + .review-dialog { + color: @text; + } + + .GK1a5e { + background-color: @text; + } + + .RC9d6e { + border-top-color: @text; + } + + .IFmkIb.IFmkIb { + background-color: @surface0; + border-color: @surface2; + } + .ab_button { + background-image: linear-gradient(to top, @surface0, @base); + background-color: @surface0; + border-color: @surface1; + } + + .PGbOqf { + background-color: @accent-color; + } + + .yAbdSd { + color: @red; + } + + .ycghLd { + background-color: @red; + border-color: @red; + } + + .IRH78d, + .CFjcj, + .HkuhB { + color: @subtext0; + } + .l2gNXd { + background-color: @yellow; + } + .uVGhGc, + .hIqKNb { + background-color: @surface0; + } + .tcuWYc { + background-image: linear-gradient( + @overlay0 1px, + rgba(255, 255, 255, 0) 0 + ); + } + .qk7LXc.Fb1AKc, + .fAt9Jd, + .SME0md, + .ipwqjc { + background-color: @base !important; + } + + .ttBXeb, + .NDTw3e.K7R36c, + .knowledge-finance-wholepage-chart__fw-uch .uch-svg { + color: @subtext0; + } + + .sQ6RSc { + fill: @text; + } + + .egcvbb { + border-color: @surface2; + &:hover { + border-color: @text; + } + } + + .knowledge-finance-wholepage-chart__hover-card { + background-color: @base; + } + .knowledge-finance-wholepage-chart__hover-card-time { + color: @subtext0; + } + + .fw-ch-sel .KWk7r.qUjgX { + background-color: @surface0; + color: @blue; + } + + .gb_Ka.gb_f, + .gb_Na.gb_f, + #gb { + background-color: @base !important; + svg, + .gb_Rc svg, + .gb_dd .gb_ld, + .gb_3c .gb_ld { + color: @text; + } + } + .gb_Nc a.gb_F, + .gb_Nc span.gb_F { + color: @text; + } + .uU7dJb { + border-bottom-color: @surface0; + background-color: @mantle; + color: @subtext1; + } + .gb_Nc .gb_d:hover { + background-color: @surface0; + } + .KxwPGc { + background-color: @mantle; + } + .HJSKzf { + color: @text; + } + + .gbqfba, + .lJ9FBc input[type="submit"] { + color: @text; + background-color: @surface0; + border-color: @surface1; + &:hover { + color: @text; + background-color: @surface0; + border-color: @surface2; + } + } + + /* AI search */ + + .UxeQfc, + .s7d4ef, + .yXu61c, + .X6JNf, + .BERAof, + .oxbMzd, + .A5s9h, + .V9Wb7c, + .GVUPk, + .GyAeWb, + .A0hi5, + .Tme6jf { + background-color: @base !important; + } + + .d3o3Ad, + .sZKvbe { + fill: @green !important; + } + + .Fzsovc, + .cwYVJe, + .RJPOee, + .vM0jzc, + .clOx1e, + .vDF3Oc.vDF3Oc .R8BTeb, + .vDF3Oc.vDF3Oc .ouxCkc, + .Yt787, + .mulB1, + .xUc8Ie, + .sfgTZc, + .I6Kpxd, + .cQEt3 { + color: @text !important; + } + + .yQLaje, + .tVoQIb, + .f9nOyf, + .kHtcsd, + .DopHqc, + .p7bv, + .ar9V1, + .DfMusf, + .y6CIle, + .JukT7c, + .xUc8Ie.BXdrne, + .sEqX7e, + .ZFiwCf { + background-color: @surface0 !important; + } + + .xUc8Ie.BXdrne, + .YUg0se, + .WGbsof { + border-color: @surface2 !important; + } + + .NOo3C { + color: @subtext1; + } + + .WGbsof[selected] { + background-color: @blue; + border-color: @blue !important; + } + + /* End of AI search */ + + /* "People also search for.." / "People also ask" section */ + .vIifob, + .p8Jhnd { + background-color: @surface0 !important; + } + + .vBnbff, + .RSWv0c.NaC7Cf, + .RSWv0c.NaC7Cf .q8U8x > div:nth-child(1) { + background-color: @surface0 !important; + color: @text !important; + } + + .DxHbyd { + background-color: @surface2 !important; + } + + .dg6jd { + color: @text !important; + } + + /* mobile ui */ + /* header background & search bar */ + .v6U7rf { + background-color: @base; + } + + .zGVn2e, + .u4frDf { + background: @surface0 !important; + } + + /* search suggestions */ + .K4VNlb, + .Sl6fgd.A7Yvie, + .Sl6fgd .zGVn2e, + .UUbT9 { + background-color: @surface0; + border-color: @surface0 !important; + } + .sb43 { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + /* text */ + .SAuUUd-z5C9Gb-fmcmS, + .tJaMb, + .TElO2c, + .cQp1Ab { + color: @text !important; + } + + .s49v2 { + b, + span { + color: @text !important; + } + } + + .ob9lvb { + color: @subtext0; + } + + /* borders */ + .Dgr5Hb, + .GqbEwc { + border-color: @surface0 !important; + } + + #gsr { + background-color: @mantle; + } + + .Ww4FFb { + box-shadow: 0 0 0 1px @base; + } + + .Faw6Fe, + .GpOXq { + border-color: @surface0 !important; + } + + .zGVn2e, + .jh86Nb { + border-color: @surface1 !important; + } + + /* Featured snippets */ + @media (prefers-reduced-motion: no-preference) { + .c2xzTb .ILfuVd b { + background: linear-gradient( + 90deg, + fade(@accent-color, 30%) 50%, + #0000 50% + ) no-repeat 75% 0; + background-size: 200% 100%; + } + } + + .pHiOh, + a.pHiOh { + color: @subtext1 !important; + } + a { + color: @blue; + } + .RNNXgb { + background: @surface0; + border-color: @surface1; + } + .RNNXgb:hover, + .sbfc .RNNXgb { + background: @surface0 !important; + border-color: @surface0; + box-shadow: 0 1px 6px 0 @crust; + } + .minidiv .RNNXgb { + background: @surface0; + border-color: @surface1; + &:hover { + box-shadow: 0 4px 12px @crust; + } + } + .HSryR .KsRP6 { + border-color: @surface2; + } + .emcav .RNNXgb { + box-shadow: 0 1px 6px 0 @crust; + background: @surface0; + border-color: @surface0; + } + .aajZCb { + background: @surface0; + box-shadow: 0 4px 6px 0 @crust; + } + .xtSCL { + border-top-color: @surface2; + } + .sbct:hover { + background-color: @surface1; + } + .WggQGd { + color: @mauve !important; + } + .JCHpcb { + color: @subtext0; + } + .JCHpcb:hover { + color: @blue; + } + .wM6W7d, + .ABAbCc { + color: @text; + } + .uDetx { + fill: @text; + } + .ExCKkf, + .BjWz4c { + color: @subtext0; + } + .ACRAdd { + border-left-color: @overlay0; + } + .Pvpvv { + background-color: @crust; + border-color: @surface1; + color: @text; + } + .w9dUj { + color: @text !important; + } + .Pvpvv .zE5Aq, + .adnFRd, + .XfJHbe { + color: @blue; + } + .CS4h3e { + background-color: @subtext0; + } + .Pvpvv .xyGai { + color: @text; + } + #SIvCob { + color: @text; + } + .gb_Jc a.gb_B, + .gb_Jc span.gb_B { + color: @text; + } + .gb_Jc svg, + .gb_Oc.gb_Sc svg, + .gb_Jc .gb_ad .gb_id, + .gb_Jc .gb_ad .gb_Ic, + .gb_Jc .gb_ad .gb_cd, + .gb_Oc.gb_Sc .gb_id { + color: @text; + } + .gb_Ka svg, + .gb_Oc svg, + .gb_ad .gb_id, + .gb_0c .gb_id { + color: @text; + } + .gLFyf { + color: @text; + } + .QCzoEc { + color: @overlay2; + } + .szppmdbYutt__middle-slot-promo { + color: @text; + } + .gb_Jc .gb_Ud button:hover svg, + .gb_Jc .gb_d:hover { + background-color: @surface0; + } + .gb_Jc .gb_Ud.gb_qe button:hover svg, + .gb_Ud button:hover svg, + .gb_d:hover { + background-color: @surface0; + } + .gb_We { + background: @mantle; + color: @text; + } + a.gb_B, + span.gb_B { + color: @text; + } + .gb_zc div:first-child { + color: @text; + } + .gb_zc > * { + color: @subtext0; + } + .ClJ9Yb { + color: @subtext0; + } + .sfbg { + background-color: @base; + } + .jfN4p, + .lnXdpd:not([src^="/logos/doodles/"]) { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + .aXBZVd { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + .zgAlFc { + color: @blue; + } + .fLciMb { + color: @text; + } + .d2IKib { + color: @red; + } + .fLciMb:hover { + background-color: @surface0; + } + .kno-ftr.rpBMYb { + color: @subtext0; + } + .aTI8gc { + color: @text; + } + .wwUB2c { + color: @subtext0; + } + .dhERQc { + color: @base !important; + background-color: @blue !important; + } + .z1asCe, + .ikb4Bb { + color: @subtext1 !important; + } + .rsGxI.Ww4FFb, + .Ww4FFb { + background-color: @base; + } + .RES9jf { + color: @text; + } + .CSkcDe, + .related-question-pair div.iDjcJe { + color: @text; + } + .cUnQKe .ILfuVd b, + .cUnQKe .QBI8hf b { + background-color: fade(@blue, 25%); + color: @text; + } + .cUnQKe .ILfuVd, + .cUnQKe .UiGGAb.ILfuVd { + color: @subtext1; + } + .ZYHQ7e { + color: @subtext0; + } + .VuuXrf { + color: @text; + } + .hb8SAc, + .gb_Oc a.gb_H, + .gb_Oc span.gb_H { + color: @text; + } + .TQc1id .I6TXqe { + border-color: @surface2; + } + .I6TXqe, + .zaokob { + background: @base; + } + .tw-lliw:hover, + .tw-lliw:focus { + background-color: @surface0; + } + .language_list_languages.tw-ll-top::after { + background: linear-gradient(to bottom, transparent, @base); + } + .HsZQAe { + border-bottom-color: @surface2; + } + .KLEmSd { + border-bottom-color: @surface1; + } + .NtaMpb .niO4u, + .nZWEZc .ttwCMe, + .xNzW0d, + .lWzCpb { + background-color: @base; + } + .aURkK { + border-left-color: @surface1; + } + .iRPzcb { + border-bottom-color: @surface1; + } + .related-question-pair .d0fCJc { + color: @text; + } + cite, + cite a:link, + cite a:visited { + color: @subtext0; + } + .WZ8Tjf, + .EZAeBe, + .F0gfrd { + color: @subtext0; + } + .yDYNvb.lyLwlc { + color: @text; + } + .H9lube { + background-color: @base; + border-color: @surface2; + } + .Bi9oQd { + background-color: @surface1; + } + .akqY6 { + background: @surface1; + } + .KFFQ0c .YfftMc, + .KFFQ0c .YfftMc span, + .KFFQ0c .YfftMc div, + .KFFQ0c .YfftMc a, + g-menu.DWsAYc g-menu-item a.K1yPdf, + .f3LoEf, + .TXBhSe:hover, + .TXBhSe:not(:hover), + .r025kc.lVm3ye, + .Bo9xMe, + .oyj2db { + color: @subtext0; + } + .dyjrff, + .LEwnzc { + color: @subtext1; + } + .ZFiwCf { + background-color: @surface0; + &:hover { + background-color: @surface1; + } + } + .LGwnxb, + .WGwSK { + color: @text; + } + .EsIlz { + background-color: @base; + border-color: @surface1; + } + .O7G3Gd { + color: @text; + &:hover { + color: @blue; + } + } + .appbar { + background: @base; + border-top-color: @surface1; + } + .bSeRjc:hover .fKmH1e { + color: @subtext1; + background-color: @surface0; + } + .bSeRjc:hover div[aria-expanded="true"] .fKmH1e, + div[aria-expanded="true"] .fKmH1e { + background-color: fade(@blue, 25%); + color: @blue; + } + .LHJvCe, + .vqseUe, + .dMCttd { + color: @subtext0; + } + .dG2XIf .xpdbox .yc7KLc { + background-color: @base; + } + .URgIvb { + border-color: @blue; + background-color: @blue; + } + .pdpvld { + color: @green; + } + .YrbPuc { + color: @subtext1; + } + .SRfaKe, + .SRfaKe h2 { + background-color: @mantle; + } + .y6CIle { + background-color: @surface0; + } + .Yt787, + .vDF3Oc.vDF3Oc .R8BTeb { + color: @text; + } + .IDFSOe { + background-color: @surface2; + } + .ffmmcd, + .u7yw9 .WeviRb { + border-color: @surface1; + } + .wdQNof { + border-color: @surface1; + background-color: @base; + } + .PewBWb { + border-top-color: @surface1; + } + .eadHV.Ses7yd { + color: @text !important; + } + .f, + .j04ED, + .j04ED a, + .j04ED a:link, + .XaIwc { + color: @subtext0 !important; + } + #_Xg6uZYKGBYCDhbIPvK2s2AI_27 + > div:nth-child(3) + > g-right-button:nth-child(1) + > g-fab:nth-child(1), + g-right-button.wgbRNb > g-fab:nth-child(1) { + background-color: @crust !important; + } + .gb_2e { + background-color: @surface0; + } + .gb_Ec { + div:first-child { + color: @text; + } + > * { + color: @subtext0; + } + } + .kLhEKe { + background-color: @base; + } + .S8ee5.CwbYXd { + color: @text; + } + .S8ee5 { + background: @surface0; + } + .S8ee5:hover { + background: @surface1; + } + .rhHIGd { + background-color: @surface2; + } + .sY7ric { + color: @text; + } + .I6a0ee { + background-color: @base; + border-color: @surface2; + color: @text; + } + .I6a0ee:hover { + background-color: @mantle; + border-color: @surface2; + } + .I6a0ee:focus { + background-color: @crust; + border-color: @surface2; + } + .pxhZNb { + background-color: @surface0 !important; + color: @text; + } + .d2F2Td { + color: @text; + } + .c07z9 { + color: @subtext0; + } + .c07z9 a, + .c07z9 a:active, + .c07z9 a:link { + color: @text; + text-decoration-color: @subtext0; + } + .wHYlTd { + color: @subtext0; + } + .dG2XIf .c2xzTb .wDYxhc:first-child { + background: @base; + } + .fm06If .ILfuVd, + .c2xzTb .ILfuVd, + .Jb0Zif .c2xzTb .ILfuVd { + color: @text; + } + .fm06If .ILfuVd b, + .c2xzTb .ILfuVd b { + background-color: fade(@blue, 25%); + color: @text; + } + .GKS7s { + background: @surface0; + border-color: @surface1; + box-shadow: inset 0 0 0 1px @surface2; + } + .GKS7s:hover { + background-color: @surface1 !important; + border-color: @surface2; + } + .yXK7lf em { + color: @text; + } + .Lb0dA:hover { + background-color: @surface0; + } + .Lb0dA[aria-expanded="true"]:hover .EGarzf { + color: @blue; + } + .Lb0dA[aria-expanded="true"] { + background-color: fade(@blue, 25%); + } + .BaegVc:hover { + background-color: @surface0; + } + .hdtb-tl-sel .BaegVc { + background-color: fade(@blue, 25%); + } + .BaegVc:focus { + background-color: fade(@blue, 25%); + } + .TZqsAd { + background: @overlay0; + } + .FalWJb { + background: @base; + } + .YeThId { + border-top-color: @surface1; + } + .k8XOCe { + background-color: @surface0; + } + .s75CSd { + color: @text; + } + .ZkkK1e, + .uAbMZd { + background: @base; + border-color: @surface1; + &:hover { + background: @surface0; + } + } + .QjI2jc { + color: @subtext0; + } + .lhLbod { + color: @subtext0; + } + .nr7I6e div[aria-expanded="true"] .F75bid, + .nr7I6e div[aria-expanded="true"]:hover .fFI3rb .F75bid { + color: @blue; + } + .F75bid { + color: @subtext0; + } + div[aria-expanded="true"] .fFI3rb { + background-color: fade(@blue, 25%) !important; + } + div[aria-expanded="true"]:hover .fFI3rb:hover { + background-color: fade(@blue, 25%) !important; + } + .MAMMm { + background: @mantle; + box-shadow: 0 2px 6px @crust !important; + } + [selected].nWtjMe { + background: fade(@blue, 25%) !important; + } + .uZNuIf:hover { + background-color: @surface0; + color: @text; + } + [selected].nWtjMe .FMKtTb { + color: @text; + } + .nWtjMe .FMKtTb { + color: @subtext0; + } + .GKS7s .FMKtTb, + .GKS7s .RWhoyd.mol54e { + color: @text; + } + .ePSouf .FMKtTb { + color: @subtext0; + } + .NkCsjc:hover { + background-color: @surface0 !important; + color: @text; + } + .nr7I6e div[aria-haspopup="true"]:hover .F75bid { + color: @text; + } + a.hisnlb { + background: fade(@overlay2, 25%); + } + div[aria-expanded="true"] .fFI3rb, + div[aria-expanded="true"]:hover .fFI3rb:hover { + background-color: @surface0 !important; + } + .hdtb-tl-sel .BaegVc .WjMmQ:hover { + color: @blue; + } + .hdtb-mn-hd { + color: @subtext0; + } + .hdtb-mn-hd:hover { + color: @text; + } + .fSnalc { + stroke: @blue; + } + .oOg6Ne { + stroke: @yellow; + } + .ZqPjbb { + stroke: @red; + } + .aPiskd { + stroke: @green; + } + .s8GCU { + background-color: @base; + } + .Lj9fsd { + background-color: @base; + } + .jZWadf { + background-color: @base; + } + .rQEFy, + .rQEFy:hover { + border-color: fade(@blue, 25%); + background-color: fade(@blue, 25%); + } + .gbZSUe { + color: @text; + } + .gbZSUe:hover { + background: @surface0; + } + .XZ5MVe { + color: @blue; + } + a:visited { + color: @mauve; + } + .SvoXfb > .x5f7Bc { + fill: @subtext0; + } + .SvoXfb:hover > .x5f7Bc { + fill: @text; + } + .SvoXfb:hover { + background-color: @surface0; + } + .IsZvec, + .yxAsKe { + color: @subtext0; + } + .zqrO0.k0Jjg .QuU3Wb, + .zqrO0.k0Jjg:hover .QuU3Wb { + color: @subtext1; + } + .uo4vr { + color: @subtext0; + } + .minidiv .sfbg { + background: @base; + box-shadow: 0 1px 6px 0 @crust; + } + .aqCVJb { + background-color: @blue !important; + border-color: @blue !important; + } + .T8VaVe { + color: @blue; + } + .tw-ta, + #tw-source-text-container .tw-ta, + #tw-source-rmn-container .tw-ta { + color: @text; + } + .tw-bilingual-marked { + border-color: @blue; + } + #tw-target { + background-color: @surface0; + } + .tw-data-placeholder { + color: @text; + } + .j1iyq { + border-color: @surface2; + } + .w8qArf .fl { + color: @text !important; + } + .HSryR a.B1uW2d { + border-bottom-color: @surface2; + } + .usJj9c .zz3gNc { + color: @text; + } + .Ss2Faf a { + color: @text; + } + .aCOpRe em, + .yXK7lf em { + color: @text; + } + .FR7ZSc .niO4u { + background-color: @base; + border-color: @surface2; + color: @blue; + } + .g { + color: @text; + } + .VSHxQ { + color: @subtext0; + } + .cF4V5c { + background-color: @crust !important; + } + .cF4V5c g-menu-item a, + .cF4V5c g-menu-item a:visited, + .cF4V5c g-menu-item a:hover { + color: @text; + } + .cF4V5c:hover g-menu-item:hover a, + .cF4V5c:hover g-menu-item a:visited, + .cF4V5c g-menu-item a:hover { + background-color: @surface0; + } + .GZnQqe.LGiluc { + border-top-color: @surface2 !important; + } + .pkWBse { + box-shadow: 1px 1px 15px 0 @crust; + } + .dG2XIf { + background: @base; + border-color: @surface0 !important; + } + .Z0LcW { + color: @text; + } + .i29hTd .qLLird { + color: @text; + } + .i29hTd .kR7nSc { + color: @text; + } + .N6Sb2c { + color: @subtext0; + } + .C9iYEe { + color: @subtext0; + } + .KcXNxb { + background: @base; + } + .ss6qqb .PKDVJd { + color: @subtext0; + } + a.oBa0Fe { + color: @subtext0; + } + .o6juZc { + background-color: @surface0; + } + .o6juZc:hover { + background-color: @surface0; + box-shadow: 0 4px 12px @crust; + } + .W6pGoe { + background: @surface0; + box-shadow: 0 4px 6px 0 @crust; + } + .WdWr7c { + border-top-color: @surface2; + } + .sU3bKf { + color: @text; + } + .O5OUld { + color: @subtext0; + } + .zP7KFe { + background: @surface1; + } + .O5OUld:hover { + color: @blue; + } + .og3lId { + color: @text; + } + .M3w8Nb .o6juZc { + box-shadow: 0 1px 6px 0 @crust; + } + .r8xEL { + color: @text; + } + .ZZ7G7b { + color: @text; + border-color: @surface1; + } + .NZmxZe { + background-color: @base; + border-color: @surface1; + color: @text; + } + .NZmxZe:not(.rQEFy):hover, + .cj2HCb.iuN0sf .w6PoOe:hover, + .CgGjZc:hover { + background-color: @surface0; + border-color: @surface1; + color: @text; + } + .ssfWCe .ZXJQ7c, + .cj2HCb.iuN0sf .w6PoOe, + .G2XB8d, + .cj2HCb.iuN0sf .w6PoOe .KA8Jyb { + color: @subtext0; + .KA8Jyb:hover { + fill: @subtext1; + } + } + .KA8Jyb { + fill: @subtext0; + } + .CgGjZc:hover .G2XB8d { + color: @subtext1; + } + .o6OF0 { + background-color: @surface1; + &:hover { + background-color: @surface2; + } + .SHFPkb { + color: @text; + } + .PnfqLc { + color: @subtext0; + } + } + .zbRPDe, + .scU1d { + color: @text; + } + .UafVBb { + background-color: @base; + border-color: @surface2; + } + .mEQved { + color: @subtext0; + } + .goxjub { + > path:nth-child(1) { + fill: @blue; + } + > path:nth-child(2) { + fill: @green; + } + > path:nth-child(3) { + fill: @yellow; + } + > path:nth-child(4) { + fill: @red; + } + } + [fill="#34a853"] { + fill: @green; + } + [fill="#4285f4"] { + fill: @blue; + } + [fill="#ea4335"] { + fill: @red; + } + [fill="#fbbc05"] { + fill: @yellow; + } + .ssfWCe .ZXJQ7c:hover { + background-color: @surface0; + color: @text; + } + .qcTKEe { + background-color: @base; + } + .ooPrBf { + background: @base; + } + .r9PaP { + color: @subtext0; + } + .r9PaP:hover { + color: @blue; + } + .H1KrKd { + fill: @subtext0; + } + .cEPPT { + border-bottom-color: @surface1; + } + .Ix6LGe { + background: @base; + box-shadow: 0 2px 10px 0 @crust; + } + .Hm7Qac:hover, + .EuKAde { + background-color: @surface0; + } + .igM9Le { + color: @text; + } + .irf0hb { + box-shadow: 1px 1px 15px 0 @crust; + } + .gb_Mc .gb_Vd button:hover svg, + .gb_Mc .gb_d:hover { + background-color: @surface0; + } + .gb_Mc svg, + .gb_Rc.gb_Vc svg, + .gb_Mc .gb_dd .gb_ld, + .gb_Mc .gb_dd .gb_Lc, + .gb_Mc .gb_dd .gb_fd, + .gb_Rc.gb_Vc .gb_ld { + color: @text; + } + .cEW58 { + background-color: @surface0; + } + .dyAbMb { + fill: @subtext0; + } + .zItAnd, + .zItAnd:link, + .zItAnd:visited, + .zItAnd:hover, + .zItAnd:active { + color: @text; + } + .zItAnd { + background-color: @base; + border-color: @surface1; + } + .zItAnd:not(.MgQdud):hover { + background-color: @surface0; + border-color: @surface1; + } + .fKmH1e { + background-color: @base; + border-color: @surface1; + color: @subtext0; + } + .fKmH1e:hover { + background-color: @surface0; + border-color: @surface1; + } + .nfSF8e, + .WRhYSc { + color: @subtext0; + } + .nfSF8e:hover, + .WRhYSc:hover { + background-color: @surface0; + color: @subtext0; + } + .ssJ7i { + color: @text; + } + .iAIpCb { + color: @subtext0; + } + .KMdzJ, + .ss6qqb .oBrLN, + .ylgVCe { + color: @subtext1; + } + .PmPt7d { + color: @subtext0; + } + .gb_Mc a.gb_E, + .gb_Mc span.gb_E { + color: @text; + } + a.gb_E, + span.gb_E { + color: @text !important; + } + .RzdJxc { + border-top-color: @surface2; + } + .rKnmn { + border-top-color: @surface2; + } + .FzCfme { + color: @subtext0; + } + .hMJ0yc { + color: @subtext0; + } + .yg51vc { + background-color: @base; + } + .hdtb-mitem a { + color: @subtext0; + } + .hdtb-mitem .GOE98c, + .hdtb-mitem a, + .hdtb-mitem.hdtb-msel, + .t2vtad { + color: @subtext0; + } + .t2vtad:not(.hdtb-tl-sel) { + color: @subtext0; + } + .dG2XIf .xpdopen .mJ2Mod { + border-color: @surface1; + } + .t2vtad:not(.hdtb-tl-sel):hover { + background-color: @surface0; + border-color: @surface1; + color: @text; + box-shadow: 0 1px 1px @crust; + } + .hdtb-mitem:hover .GOE98c:hover, + .hdtb-mitem:hover a, + .hdtb-mitem.hdtb-msel, + .t2vtad:hover { + color: @blue; + } + .w6PoOe { + color: @subtext0; + } + .w6PoOe:hover { + color: @text; + } + .Lj9fsd.DU1Mzb { + background-color: @base; + box-shadow: 0 1px 6px 0 @crust; + .o6juZc { + border-color: @surface1 !important; + } + } + .dZ5aUe .vbLSne .MjJqGe:not(.xvfzbc):hover { + background-color: @surface0; + } + .FjVBEd { + color: @green; + } + title-with-lhs-icon:hover .ekf0x h3 { + color: @blue; + } + .GmE3X { + color: @text; + } + .iv236 { + color: @text; + } + .GLcBOb { + border-bottom-color: @surface1; + } + .ss6qqb .Ui2TZ { + color: @text; + } + .wx62f { + color: @subtext0; + } + #rhs .u7yw9 { + border-left-color: @surface1; + } + .ss6qqb .Jk5Tjc { + border-color: @surface2; + } + #rhs .u7yw9 .cLjAic { + border-bottom-color: @surface1; + } + .JNkvid .HnYYW { + color: @text; + } + .aokhrd .TZahnb { + border-left-color: @surface1; + } + .Cx1ZMc { + color: @subtext0; + } + .CBPSbf { + background-color: @base; + } + .E74aCb { + color: @text; + } + .OE86Gc { + background-color: @base; + color: @text; + fill: @text; + } + .c72nic { + color: @text; + } + .GXMTjb { + background-color: @base; + border-color: @surface0; + } + .A9y7kf { + color: @subtext0; + } + .OE86Gc a { + color: @blue; + } + .Es2Et { + color: @subtext0; + } + .KwJT0.VqKh3b div div { + background-color: @base; + fill: @text; + color: @text; + border-color: @surface1; + } + .rx7XFb { + background-color: @surface0; + } + .VP31Vb { + color: @text; + } + .HXQjqf { + background-color: fade(@blue, 25%); + color: @blue; + } + .SW5pqf { + color: @blue; + } + .rQEFy:hover { + color: @blue; + } + .hdtb-tl-sel { + border-color: @surface2; + background: @surface0; + color: @text; + } + .hdtb-tl-sel:focus { + border-color: @surface2; + background: @surface0; + color: @blue; + } + .t2vtad:active, + .t2vtad:not(.hdtb-tl-sel):hover:active { + background-color: @surface0 !important; + box-shadow: inset 0 1px 2px @crust !important; + } + .gTl8xb { + border-color: @subtext0 transparent; + } + .hdtb-mn-hd:hover .gTl8xb { + border-color: @text transparent; + } + .h3L8Ub .yMAEcf { + background: @surface0; + border-color: @surface2; + } + .ynRric { + color: @subtext0; + } + .cRV9hb .pcTkSc .wM6W7d { + color: @text; + } + .h3L8Ub .yMAEcf.sbhl { + background-color: @surface1; + } + .sbhl { + background: @surface1; + } + .CjiZvb, + .GZnQqe.EpPYLd:active { + background-color: @surface0; + } + .PyJv1b { + color: @text; + } + .REySof { + color: @overlay2 !important; + } + .NQyKp { + color: @surface0 !important; + background: @accent-color !important; + } + .b0Xfjd { + color: @base !important; + } + .LiOdre { + background-color: @base; + border-color: @surface1; + } + .LiOdre:hover { + background-color: @mantle; + border-color: @surface2; + } + .LiOdre:focus { + border-color: @blue; + } + .mfsgsd { + color: @text; + } + .GCSyeb { + background: @surface1; + } + .IVvPP .cLjAic.WY0eLb, + .Hwkikb.WY0eLb { + border-left-color: @surface1; + } + .mQo3nc { + background-color: @surface0; + color: @subtext0 !important; + } + .cfBJGe { + color: @text; + } + .f6F9Be { + background: @mantle; + } + .KwU3F { + color: @blue; + } + .b0KoTc { + color: @text; + } + .dfB0uf { + color: @text; + } + .unknown_loc { + background: @text; + } + .GS5rRd { + color: @blue; + } + .xSQxL { + color: @blue; + } + .smiUbb { + color: @text; + } + .b2hzT { + border-bottom-color: @surface0; + } + #swml { + border-left-color: @surface0; + } + .KXbwLb { + background-color: @surface2; + } + .WZH4jc .VknLRd .GNJvt { + background: @surface0; + } + .WZH4jc .VknLRd:hover .GNJvt { + background: @surface1; + } + .GNJvt { + color: @text; + } + .fJOpI.H9lube { + background-color: @blue !important; + border-color: @blue; + } + .XNo5Ab.XNo5Ab { + color: @base !important; + fill: @base !important; + } + .Ss2Faf.boljiHqtXe7__place-qa-title { + color: @text !important; + } + .xEzgBc { + color: @text !important; + } + .Ss2Faf.sq4Bpf { + color: @text !important; + } + .ea0Lbe { + background: @surface0; + } + .f6GA0, + .CacfB, + .Ua7Yuf { + background: @base; + } + .DV7the { + color: @blue; + } + .ZeVBtc { + color: @subtext0; + } + .cB9M7 { + background-color: @surface0; + border-color: @surface1; + color: @text; + &:hover { + border-color: @surface2; + } + &:focus { + border-color: @blue; + } + } + .Qwbd3 { + background: @surface0; + color: @text; + border-color: @surface1; + &:hover { + background: @surface1; + border-color: @surface2; + } + } + .ArIAXb { + fill: @surface0; + } + .qOFLsb { + fill: @surface0; + } + .aHK1bd { + color: @subtext0; + } + .diOlIe { + border-top-color: @overlay0; + } + .p4pvTd { + color: @text; + } + .gIYJUc { + background: @base !important; + border-color: @surface1 !important; + } + .Gdd5U > g:nth-child(2) { + > circle:nth-child(1) { + fill: @green !important; + } + > circle:nth-child(2) { + fill: @blue !important; + } + > path:nth-child(3) { + fill: @red !important; + } + > path:nth-child(4) { + fill: @yellow !important; + } + > path:nth-child(5) { + fill: @blue !important; + } + } + .CbAZb { + background: @base; + border-bottom-color: @surface0; + } + .S8wJ3 { + color: @text !important; + } + .ZI7elf { + color: @text !important; + } + .tGS0Nc { + color: @text; + } + .kzt0Nc a { + color: @subtext0 !important; + } + .fgc1P, + .N7KPxb { + border-top-color: @surface0 !important; + } + .kQEH5b { + color: @subtext0 !important; + } + .kNKdL { + color: @text !important; + } + .q0yked:hover { + background-color: @mantle !important; + } + .Oz5Rbb:hover { + background: @mantle !important; + } + .lwwARb { + background-color: @crust !important; + } + .LO47Ff { + color: @text; + } + .j8PBfc { + color: @subtext0; + } + .act-tim-txt-cnt { + color: @text; + } + .act-switch-area { + background-color: @base !important; + } + .EwDHG, + .vNdLpe, + .vNdLpe:visited { + color: @subtext0 !important; + } + // "Looking for results in English?" popup + [style*="background:#1f1000;border:1px solid #502900"], + [style*="background:#feefc3;border:1px solid #fdd663"] { + background: @mantle !important; + border-color: @surface0 !important; + box-shadow: 0 2px 4px @mantle !important; + [style*="color:#bdc1c6"], + [style*="color:#202124"] { + color: @text !important; + } + } + // translate this page label + .eFM0qc.BCF2pd { + background: @base !important; + } + // expand related question icon + .aj35ze { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + // tabs + [selected].YmvwI { + color: @text; + border-bottom-color: @text; + } + .YmvwI { + color: @subtext0; + } + // search bar buttons popups + [style^="background: rgb(32, 33, 36); border: 1px solid rgb(60, 64, 67);"] { + background: @mantle !important; + border-color: @overlay0 !important; + box-shadow: @mantle 1px 2px 4px !important; + color: @text !important; + [style^="border-style: solid;"] { + border-color: @overlay0 transparent !important; + } + } + // google apps button + .gb_F .gb_E, + .gb_F .gb_D { + fill: @text; + } + // translate popup + .t4wgMc { + background: @mantle; + } + .ELfqBe:hover, + .ELfqBe:focus { + background: @surface0; + } + .JFeuTc { + color: @text; + } + // skip to content + .S6VXfe { + background: @base; + } + // selected image + .qyKxnc.FnEtTd .srrRv { + background: fade(@blue, 10%); + } + // images page sticky suggestions header + .JiJthb, + .JiJthb .GKS7s:not([selected]) { + background: @mantle; + } + .JiJthb .F9Idpe.vezEod { + background: linear-gradient( + to left, + transparent 0%, + @mantle 60%, + @mantle + ); + } + // footer logo + [style^="background:url(/images/nav_logo321.webp)"] { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + // tweets horizontal list + g-right-button, + g-left-button { + & > g-fab { + background: @crust !important; + border-color: @surface0; + } + } + .vwfsqc { + .QuU3Wb { + color: @text; + } + } + // image overlays + .yUzGqc.wr8GYd { + background: fade(@crust, 75%); + color: @text; + } + // google lens icon hover + .ig2Tkd:hover:not(.RDPZE) { + background: fade(@mantle, 80%); + } + // image resolution + .UWuvyf { + background-color: fade(@crust, 80%); + color: @text; + } + // image hover shadow + .mkpRId.qyKxnc:hover .F0uyec { + background: fade(@crust, 5%); + box-shadow: 0 2px 12px 0 @crust; + } + // advanced search + input.jfk-textinput, + .gGbPid { + background: @base; + color: @text; + border-color: @overlay0; + } + .goog-menu { + background: @mantle; + } + .goog-menuitem-highlight, + .goog-menuitem-hover { + background: @surface0; + border-color: @surface0; + } + .goog-menuitem, + .goog-menuitem-highlight .goog-menuitem-content, + .goog-menuitem-hover .goog-menuitem-content { + color: @text; + } + .goog-flat-menu-button-hover { + border-color: @overlay2; + .goog-flat-menu-button-dropdown { + border-color: @overlay2 transparent; + } + } + .goog-flat-menu-button-dropdown { + border-color: @overlay0 transparent; + } + div.otByu div.FAcADc, + div.lFApYd, + .jfk-radiobutton-label { + color: @subtext1; + } + color: @subtext0; + } + @media (prefers-color-scheme: light) { + body { + #catppuccin(@lightFlavor, @accentColor); + } + } + @media (prefers-color-scheme: dark) { + body { + #catppuccin(@darkFlavor, @accentColor); + } + } +} + +@-moz-document regexp("^https?://(ogs\\.)?google\\..*") { + @media (prefers-color-scheme: light) { + body { + #catppuccin(@lightFlavor, @accentColor); + } + } + @media (prefers-color-scheme: dark) { + body { + #catppuccin(@darkFlavor, @accentColor); + } + } + #catppuccin(@lookup, @accent) { + @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]; + + .aRDKUe { + .rRF0wd { + fill: @yellow !important; + } + .ub0gT { + fill: @base !important; + } + .Pzuhxc { + color: @text !important; + &:hover { + background-color: @surface2 !important; + } + } + .hCDve { + color: @text !important; + } + .WkuXae { + color: @blue; + } + .coHE2 { + border-color: @surface2 !important; + &:hover { + background-color: fade(@blue, 25%); + } + } + .eYSAde { + color: @text !important; + } + .Lvwayc { + background-color: @surface0 !important; + } + .Z6NXed { + color: @text !important; + } + .bMnvr { + background: @surface1 !important; + } + .Wdz6e { + color: @subtext0 !important; + } + .LzIwWe { + color: @text !important; + } + .znj3je { + color: @text !important; + } + .fVFoBd { + color: @text !important; + } + .cllK4d { + background: @surface0 !important; + color: @subtext0 !important; + } + .aFCkf { + background: @surface0 !important; + color: @blue !important; + } + .DgDbFe .vZvJBb:not(:first-child) .BVnP4c::before { + color: @text !important; + } + .qLP7kc .jFfZdd { + background: @base !important; + } + .Z6NXed:hover { + background-color: @surface1 !important; + } + } + .nz9sqb.EHzcec { + background: var(--gm3-sys-color-surface-container-high, @surface0); + .LVal7b { + background: var(--gm3-sys-color-surface-container-low, @mantle); + } + } + .nz9sqb { + .NQV3m { + color: var(--gm3-sys-color-primary, @blue); + border-color: var(--gm3-sys-color-outline, @surface2); + &:hover { + background-color: fade(@blue, 25%); + } + &:focus { + background-color: fade(@blue, 25%); + } + } + .Rq5Gcb { + color: @text !important; + } + .tX9u1b:hover { + background-color: @surface0; + } + } + .nz9sqb.o07G5 .tX9u1b:active, + .nz9sqb.o07G5 .tX9u1b:active:focus, + .nz9sqb.o07G5 .tX9u1b:active .Rq5Gcb, + .nz9sqb.o07G5 .tX9u1b:active:hover .Rq5Gcb { + background-color: @surface0; + } + .aRDKUe .pRjiJb, + .aRDKUe .DmSTqc { + color: @text; + } + .aRDKUe .idKC9b, + .aRDKUe .MbHqJ { + color: @subtext0; + } + .aRDKUe .GXg3Le { + color: @blue; + } + .aRDKUe .G5bXNb { + background-color: @mantle; + &:hover { + background-color: @base; + } + } + } +} + +#rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/grabify/catppuccin.user.css b/styles/grabify/catppuccin.user.css index 5e63179cae..958dda9552 100644 --- a/styles/grabify/catppuccin.user.css +++ b/styles/grabify/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Grabify Catppuccin +@name Grabify Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/grabify @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/grabify -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/grabify/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/grabify/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agrabify @description Soothing pastel theme for Grabify @author Catppuccin @@ -13,560 +13,4 @@ @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('grabify.link') { - @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; - } - } - - background-color: @base; - - a { - color: @accent-color; - - &:hover, - &:focus { - color: darken(@accent-color, 5%); - } - - &[style*="color: "] { - color: @accent-color !important; - - &:hover, - &:focus { - color: darken(@accent-color, 5%) !important; - } - } - } - - hr, - .light-shaded { - background-color: @surface0; - } - - body, - strong, - article :is(h1, h2, li), - .content :is(h1, h2, h3), - .label, - .radio:hover, - .checkbox:hover, - .title, - .subtitle, - .pw-post-title, - .pw-post-body-paragraph { - color: @text; - } - - // Live support box - #wrapper ~ div:has(iframe[style*="color-scheme:light"]) { - display: none !important; - } - - .has-text-white { - color: @text !important; - } - - .has-text-white-ter { - color: @subtext1 !important; - } - - .has-text-grey, - .is-author-metadata, - figcaption, - article blockquote p { - color: @subtext0 !important; - } - - .navbar { - background-color: @crust; - border-color: @surface0; - } - - .navbar-item, - .navbar-link { - color: @text; - - &:hover, - &:focus { - color: @accent-color !important; - } - } - - .navbar-link:not(.is-arrowless)::after { - border-color: @accent-color; - } - - .navbar-dropdown { - background-color: @crust; - color: @text; - border-top-color: @surface0; - box-shadow: none; - } - - .has-gradient-bg.to-bottom-left { - background: @mantle; - } - - .landing-hero { - background: @mantle; - } - - polygon[fill="white"] { - fill: @base !important; - } - - [style*="color: red"], - [style*="color: rgb(224, 36, 36);"], - [style*="color: rgb(224, 185, 36);"], - [style="color: rgb(33, 150, 243);"] { - color: @accent-color !important; - } - - [style="color: rgb(44, 62, 80);"], - [style="font-style: italic; color: rgb(0, 0, 0);"] { - color: @subtext0 !important; - } - - [style="color: rgb(41, 182, 246);"] { - color: @blue !important; - } - - [style="color: rgb(0, 150, 136);"] { - color: @teal !important; - } - - [style="color: rgb(139, 195, 74);"] { - color: @green !important; - } - - .how-it-works-box { - background-color: @mantle; - box-shadow: none; - } - - [data-tooltip] { - &.has-tooltip-arrow { - &.has-tooltip-right::after { - border-right-color: @surface0; - } - - &.has-tooltip-bottom::after { - border-bottom-color: @surface0; - } - - &.has-tooltip-left::after { - border-left-color: @surface0; - } - - &.has-tooltip-top::after { - border-top-color: @surface0; - } - } - - &::before { - background-color: @surface0; - color: @text; - } - } - - [aria-label="Share Post"] path { - fill: @text; - } - - .dropdown-content { - background-color: @mantle; - - a.dropdown-item { - color: @text !important; - - &:hover { - background-color: @crust; - } - } - } - - .footer { - background-color: @mantle !important; - color: @text; - - .footer-separator { - background-color: @surface0; - } - } - - .switch[type="checkbox"] { - + label { - &::before { - background-color: @surface0; - } - - &::after { - background-color: @text; - } - } - - &:checked + label { - &::before { - background-color: @accent-color; - } - - &::after { - background-color: @base; - } - } - } - - .message.is-primary { - background: transparent; - - .message-header { - background-color: @mantle; - color: @text; - } - - .message-body { - background-color: @surface0; - color: @text; - } - } - - .button { - &:not(.is-ghost), - &.is-light { - border-color: @surface0; - background-color: @mantle; - - &, - strong { - color: @text; - } - - &:hover, - &.is-hovered { - background-color: @crust; - } - } - - &.is-primary, - &.is-info, - &.is-link { - background-color: @accent-color; - - &, - strong { - color: @crust; - } - - &:hover, - &.is-hovered { - background-color: darken(@accent-color, 5%); - } - } - - &.is-info.is-outlined { - border-color: @accent-color; - background: transparent; - - &, - strong { - color: @text; - } - - &:hover, - &.is-hovered { - color: @accent-color; - } - } - - &.is-danger { - background-color: @red; - - &, - strong { - color: @crust; - } - - &:hover, - &.is-hovered { - background-color: darken(@red, 5%); - } - } - } - - .input { - background-color: @mantle; - box-shadow: none; - border-color: @surface0; - color: @text; - } - - .card { - background-color: @mantle; - color: @text; - border-color: @surface0; - - .card__description, - .card__title, - .card__website { - color: @text; - } - - .card__image { - border-bottom-color: @surface0; - } - } - - .box { - box-shadow: none; - color: @text; - background-color: @mantle !important; - border-color: @surface0 !important; - } - - .table { - background-color: @mantle; - - &.is-hoverable tbody tr:hover, - &.is-striped tbody tr:nth-child(2n) { - background-color: @crust !important; - } - - .sortable th[data-sorted] { - &:hover { - background-color: @crust; - color: @text; - } - - &::after { - color: @text; - } - } - - th, - td { - border-color: @surface0; - color: @text; - - &[style*="color:"] { - color: @subtext0 !important; - } - } - } - - .log-table { - :is(.is-table-date, .is-table-ip, .is-table-country) div:nth-child(2), - .is-table-referrer .is-no-referrer { - color: @subtext0; - } - } - - .notification { - &.is-success { - background-color: @green; - } - - &.is-warning { - background-color: @yellow; - } - - &.is-danger { - background-color: @red; - } - - &, - strong { - color: @crust; - } - } - - #ab { - // Ad block detection modal - .css1.css2, - .ab_footer { - background-color: @base !important; - box-shadow: 0 2px 12px 0 fade(@crust, 20%); - } - - [style*="color: rgb(44, 62, 80)"] { - color: @text !important; - } - } - - #ab, - .modal-background { - background-color: fade(@crust, 65%) !important; - } - - .modal-card-head, - .modal-card-body, - .modal-card-foot { - background-color: @base; - border-color: @surface0; - } - - .modal-card-title { - color: @text; - } - - .delete { - &::before, - &::after { - background-color: @text; - } - } - - #root .app { - // Ad block disable instructions - [style="color: rgb(0, 0, 0);"] { - color: @text !important; - } - - .btn { - background-color: @accent-color; - - &[style="background-color: rgb(23, 188, 156);"] { - background-color: @accent-color !important; - } - - [style="color: rgb(255, 255, 255);"] { - color: @mantle !important; - } - - &.btn-outline { - background: @crust; - box-shadow: inset 0 0 0 1px @surface0; // the outline property exists for a reason... - } - } - - .blockers { - .blocker.selected, - .blocker:hover { - background-color: @mantle; - } - - .arrow-icon path { - fill: @text !important; - } - } - } - - .select { - &:not(.is-multiple, .is-loading)::after { - border-color: @text; - } - - select { - background-color: @mantle; - border-color: @surface0; - color: @text; - - &:focus { - box-shadow: 0 0 0 0.125em @surface0; // once again, just use outline - } - } - } - - img[src$="images/grabify.svg"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - img[src$="images/grabify-inverted.svg"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - img[src$="images/homepage/2.svg"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - img[src$="images/homepage/4.svg"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - img[src$="images/homepage/5.svg"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .is-world-background { - @svg: escape( - 'includes kosovo' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/grabify/catppuccin.user.less b/styles/grabify/catppuccin.user.less new file mode 100644 index 0000000000..fc9e2a3b9e --- /dev/null +++ b/styles/grabify/catppuccin.user.less @@ -0,0 +1,571 @@ +/* ==UserStyle== +@name Grabify Catppuccin +@namespace github.com/catppuccin/userstyles/styles/grabify +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/grabify +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/grabify/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agrabify +@description Soothing pastel theme for Grabify +@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("grabify.link") { + @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; + } + } + + background-color: @base; + + a { + color: @accent-color; + + &:hover, + &:focus { + color: darken(@accent-color, 5%); + } + + &[style*="color: "] { + color: @accent-color !important; + + &:hover, + &:focus { + color: darken(@accent-color, 5%) !important; + } + } + } + + hr, + .light-shaded { + background-color: @surface0; + } + + body, + strong, + article :is(h1, h2, li), + .content :is(h1, h2, h3), + .label, + .radio:hover, + .checkbox:hover, + .title, + .subtitle, + .pw-post-title, + .pw-post-body-paragraph { + color: @text; + } + + // Live support box + #wrapper ~ div:has(iframe[style*="color-scheme:light"]) { + display: none !important; + } + + .has-text-white { + color: @text !important; + } + + .has-text-white-ter { + color: @subtext1 !important; + } + + .has-text-grey, + .is-author-metadata, + figcaption, + article blockquote p { + color: @subtext0 !important; + } + + .navbar { + background-color: @crust; + border-color: @surface0; + } + + .navbar-item, + .navbar-link { + color: @text; + + &:hover, + &:focus { + color: @accent-color !important; + } + } + + .navbar-link:not(.is-arrowless)::after { + border-color: @accent-color; + } + + .navbar-dropdown { + background-color: @crust; + color: @text; + border-top-color: @surface0; + box-shadow: none; + } + + .has-gradient-bg.to-bottom-left { + background: @mantle; + } + + .landing-hero { + background: @mantle; + } + + polygon[fill="white"] { + fill: @base !important; + } + + [style*="color: red"], + [style*="color: rgb(224, 36, 36);"], + [style*="color: rgb(224, 185, 36);"], + [style="color: rgb(33, 150, 243);"] { + color: @accent-color !important; + } + + [style="color: rgb(44, 62, 80);"], + [style="font-style: italic; color: rgb(0, 0, 0);"] { + color: @subtext0 !important; + } + + [style="color: rgb(41, 182, 246);"] { + color: @blue !important; + } + + [style="color: rgb(0, 150, 136);"] { + color: @teal !important; + } + + [style="color: rgb(139, 195, 74);"] { + color: @green !important; + } + + .how-it-works-box { + background-color: @mantle; + box-shadow: none; + } + + [data-tooltip] { + &.has-tooltip-arrow { + &.has-tooltip-right::after { + border-right-color: @surface0; + } + + &.has-tooltip-bottom::after { + border-bottom-color: @surface0; + } + + &.has-tooltip-left::after { + border-left-color: @surface0; + } + + &.has-tooltip-top::after { + border-top-color: @surface0; + } + } + + &::before { + background-color: @surface0; + color: @text; + } + } + + [aria-label="Share Post"] path { + fill: @text; + } + + .dropdown-content { + background-color: @mantle; + + a.dropdown-item { + color: @text !important; + + &:hover { + background-color: @crust; + } + } + } + + .footer { + background-color: @mantle !important; + color: @text; + + .footer-separator { + background-color: @surface0; + } + } + + .switch[type="checkbox"] { + + label { + &::before { + background-color: @surface0; + } + + &::after { + background-color: @text; + } + } + + &:checked + label { + &::before { + background-color: @accent-color; + } + + &::after { + background-color: @base; + } + } + } + + .message.is-primary { + background: transparent; + + .message-header { + background-color: @mantle; + color: @text; + } + + .message-body { + background-color: @surface0; + color: @text; + } + } + + .button { + &:not(.is-ghost), + &.is-light { + border-color: @surface0; + background-color: @mantle; + + &, + strong { + color: @text; + } + + &:hover, + &.is-hovered { + background-color: @crust; + } + } + + &.is-primary, + &.is-info, + &.is-link { + background-color: @accent-color; + + &, + strong { + color: @crust; + } + + &:hover, + &.is-hovered { + background-color: darken(@accent-color, 5%); + } + } + + &.is-info.is-outlined { + border-color: @accent-color; + background: transparent; + + &, + strong { + color: @text; + } + + &:hover, + &.is-hovered { + color: @accent-color; + } + } + + &.is-danger { + background-color: @red; + + &, + strong { + color: @crust; + } + + &:hover, + &.is-hovered { + background-color: darken(@red, 5%); + } + } + } + + .input { + background-color: @mantle; + box-shadow: none; + border-color: @surface0; + color: @text; + } + + .card { + background-color: @mantle; + color: @text; + border-color: @surface0; + + .card__description, + .card__title, + .card__website { + color: @text; + } + + .card__image { + border-bottom-color: @surface0; + } + } + + .box { + box-shadow: none; + color: @text; + background-color: @mantle !important; + border-color: @surface0 !important; + } + + .table { + background-color: @mantle; + + &.is-hoverable tbody tr:hover, + &.is-striped tbody tr:nth-child(2n) { + background-color: @crust !important; + } + + .sortable th[data-sorted] { + &:hover { + background-color: @crust; + color: @text; + } + + &::after { + color: @text; + } + } + + th, + td { + border-color: @surface0; + color: @text; + + &[style*="color:"] { + color: @subtext0 !important; + } + } + } + + .log-table { + :is(.is-table-date, .is-table-ip, .is-table-country) div:nth-child(2), + .is-table-referrer .is-no-referrer { + color: @subtext0; + } + } + + .notification { + &.is-success { + background-color: @green; + } + + &.is-warning { + background-color: @yellow; + } + + &.is-danger { + background-color: @red; + } + + &, + strong { + color: @crust; + } + } + + #ab { + // Ad block detection modal + .css1.css2, + .ab_footer { + background-color: @base !important; + box-shadow: 0 2px 12px 0 fade(@crust, 20%); + } + + [style*="color: rgb(44, 62, 80)"] { + color: @text !important; + } + } + + #ab, + .modal-background { + background-color: fade(@crust, 65%) !important; + } + + .modal-card-head, + .modal-card-body, + .modal-card-foot { + background-color: @base; + border-color: @surface0; + } + + .modal-card-title { + color: @text; + } + + .delete { + &::before, + &::after { + background-color: @text; + } + } + + #root .app { + // Ad block disable instructions + [style="color: rgb(0, 0, 0);"] { + color: @text !important; + } + + .btn { + background-color: @accent-color; + + &[style="background-color: rgb(23, 188, 156);"] { + background-color: @accent-color !important; + } + + [style="color: rgb(255, 255, 255);"] { + color: @mantle !important; + } + + &.btn-outline { + background: @crust; + box-shadow: inset 0 0 0 1px + @surface0; // the outline property exists for a reason... + } + } + + .blockers { + .blocker.selected, + .blocker:hover { + background-color: @mantle; + } + + .arrow-icon path { + fill: @text !important; + } + } + } + + .select { + &:not(.is-multiple, .is-loading)::after { + border-color: @text; + } + + select { + background-color: @mantle; + border-color: @surface0; + color: @text; + + &:focus { + box-shadow: 0 0 0 0.125em @surface0; // once again, just use outline + } + } + } + + img[src$="images/grabify.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img[src$="images/grabify-inverted.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img[src$="images/homepage/2.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img[src$="images/homepage/4.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img[src$="images/homepage/5.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .is-world-background { + @svg: escape( + 'includes kosovo' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/graphite/catppuccin.user.css b/styles/graphite/catppuccin.user.css index 2b3553163e..02d2735b24 100644 --- a/styles/graphite/catppuccin.user.css +++ b/styles/graphite/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Graphite Catppuccin +@name Graphite Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/graphite @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/graphite -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/graphite/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/graphite/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agraphite @description Soothing pastel theme for Graphite @author Catppuccin @@ -13,100 +13,4 @@ @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('app.graphite.dev') { - :root[data-theme="light"] { - #catppuccin(@lightFlavor, @accentColor); - } - :root[data-theme="dark"] { - #catppuccin(@darkFlavor, @accentColor); - } - - #createset(@color, @type) { - --color-@{type}-default: @color; - --color-@{type}-lowest-contrast: darken(@color, 60%); - --color-@{type}-low-contrast: @color; - --color-@{type}-high-contrast: @color; - --color-@{type}-highest-contrast: lighten(@color, 10%); - } - - #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; - } - } - - --color-bg-light: @base; - --color-bg-med: @mantle; - --color-bg-dark: @crust; - - --text-color-light: @crust; // this means on a light background - --text-color-default: @text; - --text-color-low-contrast: @text; - --text-color-high-contrast: @text; - --text-color-disabled: @subtext0; - - --btn-color-neutral-selected: @surface0; - --btn-color-neutral-default: @surface0; - --btn-color-neutral-hover: @surface0; - - --icon-color-default: @text; - - --border-color-default: @surface1; - - --color-gray-60: @surface0; - - #createset(@accent-color, emphasis); - #createset(@green, positive); - #createset(@peach, caution); - #createset(@red, negative); - #createset(@mauve, action); - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/graphite/catppuccin.user.less b/styles/graphite/catppuccin.user.less new file mode 100644 index 0000000000..a78e20ecfc --- /dev/null +++ b/styles/graphite/catppuccin.user.less @@ -0,0 +1,110 @@ +/* ==UserStyle== +@name Graphite Catppuccin +@namespace github.com/catppuccin/userstyles/styles/graphite +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/graphite +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/graphite/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agraphite +@description Soothing pastel theme for Graphite +@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("app.graphite.dev") { + :root[data-theme="light"] { + #catppuccin(@lightFlavor, @accentColor); + } + :root[data-theme="dark"] { + #catppuccin(@darkFlavor, @accentColor); + } + + #createset(@color, @type) { + --color-@{type}-default: @color; + --color-@{type}-lowest-contrast: darken(@color, 60%); + --color-@{type}-low-contrast: @color; + --color-@{type}-high-contrast: @color; + --color-@{type}-highest-contrast: lighten(@color, 10%); + } + + #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; + } + } + + --color-bg-light: @base; + --color-bg-med: @mantle; + --color-bg-dark: @crust; + + --text-color-light: @crust; // this means on a light background + --text-color-default: @text; + --text-color-low-contrast: @text; + --text-color-high-contrast: @text; + --text-color-disabled: @subtext0; + + --btn-color-neutral-selected: @surface0; + --btn-color-neutral-default: @surface0; + --btn-color-neutral-hover: @surface0; + + --icon-color-default: @text; + + --border-color-default: @surface1; + + --color-gray-60: @surface0; + + #createset(@accent-color, emphasis); + #createset(@green, positive); + #createset(@peach, caution); + #createset(@red, negative); + #createset(@mauve, action); + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/hackage/catppuccin.user.css b/styles/hackage/catppuccin.user.css index 335674656b..43bb34ff8e 100644 --- a/styles/hackage/catppuccin.user.css +++ b/styles/hackage/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Hackage Catppuccin +@name Hackage Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/hackage @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hackage -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hackage/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hackage/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahackage @description Soothing pastel theme for Hackage @author Catppuccin @@ -13,795 +13,4 @@ @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("hackage.haskell.org") { - @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]; - @text-filter: @catppuccin[@@lookup][@text-filter]; - @synopsis-filter: @catppuccin[@@lookup][@synopsis-filter]; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - &, - body { - background-color: @base; - color: @text; - } - - a:hover { - background-color: inherit; - } - - a[href]:link { - color: @accent-color; - } - a[href]:visited { - color: average(@overlay2, @accent-color); - } - - a[href].def:link, - a[href].def:visited { - color: @subtext0; - } - a[href].def:hover { - color: average(@overlay2, @subtext0); - } - - .caption, - h1, - h2, - h3, - h4, - h5, - h6, - summary, - .section1, - .section2, - .section3, - .section4, - .section5, - .section6 { - color: overlay(@accent-color, @surface0); - filter: none; - } - - .collapser::before, - .expander::before, - .noexpander::before { - color: @accent-color; - } - - pre { - background-color: @mantle; - border-color: @surface1; - } - - blockquote { - background-color: @surface0; - border-color: @accent-color; - } - - .src, - .decl, - .declname, - .declbut, - .topdecl, - .arg { - background-color: @mantle; - color: @text; - } - - .declbut { - border-color: @overlay0 !important; - a { - color: @overlay2 !important; - } - } - - /* - * Headers - */ - - #page-header, - #package-header { - background-color: @accent-color; - color: @surface1; - border-color: shade(@accent-color, 25%); - } - - #page-header .caption, - #package-header .caption, - #page-header a:link, - #page-header a:visited { - color: @base !important; - } - - #module-header .caption, - .modulebar { - color: @accent-color; - border-color: @surface1; - } - - #module-header { - background-color: inherit; - } - - #package-header { - &, - #page-menu { - a:link, - a:visited { - color: @base; - } - } - a:hover { - background-color: transparent; - } - - ul.links li { - border-color: @overlay0; - - &:hover { - background-color: transparent; - } - } - } - - ul.links li form { - input, - button { - color: @base; - } - } - - .topbar { - background-color: @accent-color; - - .topbut { - border-color: @overlay0; - - a { - background-color: transparent; - color: @base; - } - } - .title { - color: @base; - } - } - - .botbar { - background-color: @crust; - color: @text; - } - - /* - * Style selectors (for old packages) - */ - - #style-menu { - background-color: @mantle; - - li { - &, - a { - color: @text !important; - } - + li { - border-color: @overlay2; - } - } - } - - /* - * Versions - */ - - a.unpreferred[href]:link, - a.unpreferred[href]:visited { - color: @yellow; - } - - a.deprecated[href]:link, - a.deprecated[href]:visited { - color: @red; - } - - .versions { - a.normal[href]:link, - a.normal[href]:visited { - color: @green; - } - } - - /* - * Readme style - */ - - .embedded-author-content { - border-color: @accent-color; - } - - /* - * Contents & synopsis - */ - - #contents-list { - background-color: @mantle; - } - - #table-of-contents { - background-color: @base; - border-color: @surface1; - } - - #synopsis { - summary, - #control\.syn { - filter: @synopsis-filter; - } - - ul { - &, - li.src { - background-color: @surface0; - } - } - } - - /* - * Quick jump - */ - - #search p.error { - color: @red; - } - - #search-form, - #search-results { - box-shadow: 2px 2px 6px fade(@mantle, 20%); - } - - #search-form { - input { - border-color: @accent-color; - } - } - - #search-results { - border-color: @accent-color; - - & > ul > li { - border-bottom-color: @overlay0; - } - } - - .search-module > ul > li > a[href].active-link { - background-color: @surface2; - } - - .search-result ul.subs::after { - color: @subtext1; - } - - .more-results, - .more-results::before { - color: @subtext0; - } - - .keyboard-shortcuts th { - color: @accent-color; - } - - .key { - background-color: @mantle; - color: @text; - border-color: @mantle; - } - - /* - * Dropdown - */ - - .dropdown-menu { - background-color: @surface0; - border-color: @surface0; - - button { - background-color: @accent-color; - color: @mantle; - border-color: @surface2; - - &:hover, - &:active { - background-color: @accent-color; - color: @mantle; - } - } - } - - /* - * Tables - */ - - table { - &.info { - background-color: @base; - color: @subtext1; - border-color: @surface1; - } - - &.fancy { - &, - tr { - border-color: @surface1; - } - tr.even td { - background-color: @mantle; - } - } - - &.fancy, - &.properties, - &.dataTable.compact.fancy tbody { - th, - td { - background-color: @base; - } - } - } - - .doc { - th, - td { - border-color: @surface1; - } - th { - background-color: @mantle; - } - } - - .infohead, - .infoval { - color: @subtext1; - } - - div#table_length.dataTables_length, - div#table_filter.dataTables_filter { - color: @text; - } - - div #description table { - &, - tr td { - border-color: @surface1; - } - th { - background-color: @mantle; - } - } - - /* - * Source links - */ - - #interface { - .src { - .link, - .selflink { - color: @overlay2 !important; - background-color: transparent !important; - } - } - p.src .link { - background-color: transparent; - color: @overlay2; - border-color: @overlay1; - } - - span.fixity, - span.rightedge { - color: @overlay1; - border-left-color: @overlay1; - } - span.fixity { - color: @overlay1; - } - } - - /* - * Paginator - */ - - .paginator { - span { - color: @text; - } - - a { - color: @overlay1; - - &[href]:link, - &:link:hover { - color: @accent-color; - } - &:visited, - &:visited:hover { - color: average(@overlay2, @accent-color); - } - &:link:hover, - &:visited:hover { - background-image: none; - background-color: @surface1; - border-color: transparent; - } - } - - .current, - .current:hover { - background-image: none; - background-color: @surface0; - color: @accent-color; - border-color: transparent; - } - } - - .paginate_button { - background-color: @overlay0; - } - - /* - * Search query - */ - - #browseTable th { - border-color: @surface1; - } - - #fatalError { - color: @red; - } - - input:invalid { - border-color: @yellow; - box-shadow: 0 0 10px @yellow; - } - - input { - background-color: @mantle; - border-style: solid; - border-color: @surface0; - border-radius: 4px; - } - - input[type="range"] { - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; - background-color: @mantle; - height: 0.2em !important; - - &::-moz-range-thumb, - &::-webkit-slider-thumb { - background-color: @text; - border-color: @surface0; - height: 1em !important; - } - } - - input[type="submit"] { - color: @text; - } - - input[type="range"]:hover, - input[type="submit"]:hover { - background-color: @crust; - } - - /* - * Others - */ - - .candidate-warn { - background-color: @mantle; - border-color: @red; - } - - .candidate-info { - background-color: @mantle; - border-color: @blue; - } - - .box { - background-color: @base; - border-color: @base; - } - - div#modal #content, - #search-results { - background-color: @surface0; - } - - .subs, - .top > .doc, - .subs > .doc { - border-left-color: @surface1; - } - - .subs .subs p.src { - background-color: @mantle; - } - - .top p.src { - border-color: @surface0; - } - - .warning, - strong.warning { - color: @red; - } - - small.info, - .flags-table .flag-disabled { - color: @subtext0; - } - - .text-button { - color: @accent-color; - } - - p.registration-email { - border-color: @accent-color; - } - - :target { - background-image: linear-gradient( - to bottom, - transparent 0%, - transparent 65%, - average(@surface0, @yellow) 60%, - average(@surface0, @yellow) 100% - ); - } - :target:hover { - background-image: linear-gradient( - to bottom, - overlay(@surface0, @yellow) 0%, - overlay(@surface0, @yellow) 100% - ); - } - - #footer { - background-color: @crust; - color: @subtext1; - border-color: @overlay0; - } - - /* - * MathJax - */ - - #MathJax_Message { - background-color: @mantle; - border-color: @surface1; - color: @text; - } - - #MathJax_About, - #MathJax_Help, - .MathJax_Menu { - background-color: @surface0; - color: @text; - border-color: @accent-color; - box-shadow: 0 10px 20px @mantle; - -webkit-box-shadow: 0 10px 20px @mantle; - -moz-box-shadow: 0 10px 20px @mantle; - } - - #MathJax_About > span, - #MathJax_HelpContent { - background-color: @surface1 !important; - color: @subtext1 !important; - border-color: @overlay0 !important; - } - - .MathJax_MenuArrow { - color: @subtext1; - } - - .MathJax_MenuRule { - border-top-color: @overlay0; - } - - .MathJax_MenuActive { - background-color: @surface1; - color: @text; - } - - .MathJax_MenuDisabled { - color: @overlay2; - } - - .MathJax_MenuDisabled:focus, - .MathJax_MenuLabel:focus { - background-color: @surface1; - } - - #MathJax_AboutClose, - #MathJax_HelpClose { - border-color: @surface2; - color: @subtext0; - span { - background-color: @surface2; - } - - &:hover { - color: @text !important; - border-color: @overlay0 !important; - span { - background-color: @overlay0 !important; - } - } - } - - span.mathjax img { - filter: @text-filter; - } - - /* - * Sources - */ - - span.definition, - .hs-identifier { - color: @blue; - } - - .hs-identifier.hs-type { - color: @yellow; - } - - span.keyword, - .hs-keyword { - color: @mauve; - } - - span.str, - span.char, - .hs-string, - .hs-char, - .hs-str, - .hs-chr { - color: @green; - } - - .hs-number { - color: @peach; - } - - .hs-operator { - color: @sky; - } - - span.keyglyph, - span.layout, - span.conop, - .hs-keyglyph, - .hs-layout, - .hs-glyph, - .hs-special { - color: @overlay2; - } - - span.comment, - .hs-comment, - .hs-comment a { - color: @overlay0; - } - - span.cpp, - .hs-pragma, - .hs-cpp { - color: @pink; - } - - pre a { - &:link, - &:visited { - border-bottom-color: @surface0; - } - &:hover, - &.hover-highlight { - background-color: @surface0; - } - } - - span.annot { - color: @text; - - &:hover { - background-color: @surface1; - } - - span.annottext { - background-color: @surface0; - border-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; - @text-filter: brightness(0) saturate(100%) invert(30%) sepia(10%) saturate(1259%) hue-rotate(196deg) brightness(97%) contrast(91%); - @synopsis-filter: sepia(100%) invert(100%) saturate(0) invert(94%) sepia(7%) saturate(345%) hue-rotate(188deg) brightness(91%) contrast(87%); - }; - @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; - @text-filter: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1519%) hue-rotate(192deg) brightness(100%) contrast(93%); - @synopsis-filter: sepia(100%) invert(100%) saturate(0) invert(25%) sepia(25%) saturate(486%) hue-rotate(193deg) brightness(90%) contrast(89%); - }; - @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; - @text-filter: brightness(0) saturate(100%) invert(81%) sepia(9%) saturate(726%) hue-rotate(192deg) brightness(104%) contrast(92%); - @synopsis-filter: sepia(100%) invert(100%) saturate(0) invert(19%) sepia(15%) saturate(979%) hue-rotate(193deg) brightness(101%) contrast(90%); - }; - @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; - @text-filter: brightness(0) saturate(100%) invert(85%) sepia(6%) saturate(1356%) hue-rotate(194deg) brightness(103%) contrast(91%); - @synopsis-filter: sepia(100%) invert(100%) saturate(0) invert(17%) sepia(17%) saturate(874%) hue-rotate(198deg) brightness(90%) contrast(89%); - }; -} - -// vim:ft=less +==/UserStyle== */ \ No newline at end of file diff --git a/styles/hackage/catppuccin.user.less b/styles/hackage/catppuccin.user.less new file mode 100644 index 0000000000..40920d19d0 --- /dev/null +++ b/styles/hackage/catppuccin.user.less @@ -0,0 +1,805 @@ +/* ==UserStyle== +@name Hackage Catppuccin +@namespace github.com/catppuccin/userstyles/styles/hackage +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hackage +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hackage/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahackage +@description Soothing pastel theme for Hackage +@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("hackage.haskell.org") { + @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]; + @text-filter: @catppuccin[@@lookup][@text-filter]; + @synopsis-filter: @catppuccin[@@lookup][@synopsis-filter]; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + &, + body { + background-color: @base; + color: @text; + } + + a:hover { + background-color: inherit; + } + + a[href]:link { + color: @accent-color; + } + a[href]:visited { + color: average(@overlay2, @accent-color); + } + + a[href].def:link, + a[href].def:visited { + color: @subtext0; + } + a[href].def:hover { + color: average(@overlay2, @subtext0); + } + + .caption, + h1, + h2, + h3, + h4, + h5, + h6, + summary, + .section1, + .section2, + .section3, + .section4, + .section5, + .section6 { + color: overlay(@accent-color, @surface0); + filter: none; + } + + .collapser::before, + .expander::before, + .noexpander::before { + color: @accent-color; + } + + pre { + background-color: @mantle; + border-color: @surface1; + } + + blockquote { + background-color: @surface0; + border-color: @accent-color; + } + + .src, + .decl, + .declname, + .declbut, + .topdecl, + .arg { + background-color: @mantle; + color: @text; + } + + .declbut { + border-color: @overlay0 !important; + a { + color: @overlay2 !important; + } + } + + /* + * Headers + */ + + #page-header, + #package-header { + background-color: @accent-color; + color: @surface1; + border-color: shade(@accent-color, 25%); + } + + #page-header .caption, + #package-header .caption, + #page-header a:link, + #page-header a:visited { + color: @base !important; + } + + #module-header .caption, + .modulebar { + color: @accent-color; + border-color: @surface1; + } + + #module-header { + background-color: inherit; + } + + #package-header { + &, + #page-menu { + a:link, + a:visited { + color: @base; + } + } + a:hover { + background-color: transparent; + } + + ul.links li { + border-color: @overlay0; + + &:hover { + background-color: transparent; + } + } + } + + ul.links li form { + input, + button { + color: @base; + } + } + + .topbar { + background-color: @accent-color; + + .topbut { + border-color: @overlay0; + + a { + background-color: transparent; + color: @base; + } + } + .title { + color: @base; + } + } + + .botbar { + background-color: @crust; + color: @text; + } + + /* + * Style selectors (for old packages) + */ + + #style-menu { + background-color: @mantle; + + li { + &, + a { + color: @text !important; + } + + li { + border-color: @overlay2; + } + } + } + + /* + * Versions + */ + + a.unpreferred[href]:link, + a.unpreferred[href]:visited { + color: @yellow; + } + + a.deprecated[href]:link, + a.deprecated[href]:visited { + color: @red; + } + + .versions { + a.normal[href]:link, + a.normal[href]:visited { + color: @green; + } + } + + /* + * Readme style + */ + + .embedded-author-content { + border-color: @accent-color; + } + + /* + * Contents & synopsis + */ + + #contents-list { + background-color: @mantle; + } + + #table-of-contents { + background-color: @base; + border-color: @surface1; + } + + #synopsis { + summary, + #control\.syn { + filter: @synopsis-filter; + } + + ul { + &, + li.src { + background-color: @surface0; + } + } + } + + /* + * Quick jump + */ + + #search p.error { + color: @red; + } + + #search-form, + #search-results { + box-shadow: 2px 2px 6px fade(@mantle, 20%); + } + + #search-form { + input { + border-color: @accent-color; + } + } + + #search-results { + border-color: @accent-color; + + & > ul > li { + border-bottom-color: @overlay0; + } + } + + .search-module > ul > li > a[href].active-link { + background-color: @surface2; + } + + .search-result ul.subs::after { + color: @subtext1; + } + + .more-results, + .more-results::before { + color: @subtext0; + } + + .keyboard-shortcuts th { + color: @accent-color; + } + + .key { + background-color: @mantle; + color: @text; + border-color: @mantle; + } + + /* + * Dropdown + */ + + .dropdown-menu { + background-color: @surface0; + border-color: @surface0; + + button { + background-color: @accent-color; + color: @mantle; + border-color: @surface2; + + &:hover, + &:active { + background-color: @accent-color; + color: @mantle; + } + } + } + + /* + * Tables + */ + + table { + &.info { + background-color: @base; + color: @subtext1; + border-color: @surface1; + } + + &.fancy { + &, + tr { + border-color: @surface1; + } + tr.even td { + background-color: @mantle; + } + } + + &.fancy, + &.properties, + &.dataTable.compact.fancy tbody { + th, + td { + background-color: @base; + } + } + } + + .doc { + th, + td { + border-color: @surface1; + } + th { + background-color: @mantle; + } + } + + .infohead, + .infoval { + color: @subtext1; + } + + div#table_length.dataTables_length, + div#table_filter.dataTables_filter { + color: @text; + } + + div #description table { + &, + tr td { + border-color: @surface1; + } + th { + background-color: @mantle; + } + } + + /* + * Source links + */ + + #interface { + .src { + .link, + .selflink { + color: @overlay2 !important; + background-color: transparent !important; + } + } + p.src .link { + background-color: transparent; + color: @overlay2; + border-color: @overlay1; + } + + span.fixity, + span.rightedge { + color: @overlay1; + border-left-color: @overlay1; + } + span.fixity { + color: @overlay1; + } + } + + /* + * Paginator + */ + + .paginator { + span { + color: @text; + } + + a { + color: @overlay1; + + &[href]:link, + &:link:hover { + color: @accent-color; + } + &:visited, + &:visited:hover { + color: average(@overlay2, @accent-color); + } + &:link:hover, + &:visited:hover { + background-image: none; + background-color: @surface1; + border-color: transparent; + } + } + + .current, + .current:hover { + background-image: none; + background-color: @surface0; + color: @accent-color; + border-color: transparent; + } + } + + .paginate_button { + background-color: @overlay0; + } + + /* + * Search query + */ + + #browseTable th { + border-color: @surface1; + } + + #fatalError { + color: @red; + } + + input:invalid { + border-color: @yellow; + box-shadow: 0 0 10px @yellow; + } + + input { + background-color: @mantle; + border-style: solid; + border-color: @surface0; + border-radius: 4px; + } + + input[type="range"] { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + background-color: @mantle; + height: 0.2em !important; + + &::-moz-range-thumb, + &::-webkit-slider-thumb { + background-color: @text; + border-color: @surface0; + height: 1em !important; + } + } + + input[type="submit"] { + color: @text; + } + + input[type="range"]:hover, + input[type="submit"]:hover { + background-color: @crust; + } + + /* + * Others + */ + + .candidate-warn { + background-color: @mantle; + border-color: @red; + } + + .candidate-info { + background-color: @mantle; + border-color: @blue; + } + + .box { + background-color: @base; + border-color: @base; + } + + div#modal #content, + #search-results { + background-color: @surface0; + } + + .subs, + .top > .doc, + .subs > .doc { + border-left-color: @surface1; + } + + .subs .subs p.src { + background-color: @mantle; + } + + .top p.src { + border-color: @surface0; + } + + .warning, + strong.warning { + color: @red; + } + + small.info, + .flags-table .flag-disabled { + color: @subtext0; + } + + .text-button { + color: @accent-color; + } + + p.registration-email { + border-color: @accent-color; + } + + :target { + background-image: linear-gradient( + to bottom, + transparent 0%, + transparent 65%, + average(@surface0, @yellow) 60%, + average(@surface0, @yellow) 100% + ); + } + :target:hover { + background-image: linear-gradient( + to bottom, + overlay(@surface0, @yellow) 0%, + overlay(@surface0, @yellow) 100% + ); + } + + #footer { + background-color: @crust; + color: @subtext1; + border-color: @overlay0; + } + + /* + * MathJax + */ + + #MathJax_Message { + background-color: @mantle; + border-color: @surface1; + color: @text; + } + + #MathJax_About, + #MathJax_Help, + .MathJax_Menu { + background-color: @surface0; + color: @text; + border-color: @accent-color; + box-shadow: 0 10px 20px @mantle; + -webkit-box-shadow: 0 10px 20px @mantle; + -moz-box-shadow: 0 10px 20px @mantle; + } + + #MathJax_About > span, + #MathJax_HelpContent { + background-color: @surface1 !important; + color: @subtext1 !important; + border-color: @overlay0 !important; + } + + .MathJax_MenuArrow { + color: @subtext1; + } + + .MathJax_MenuRule { + border-top-color: @overlay0; + } + + .MathJax_MenuActive { + background-color: @surface1; + color: @text; + } + + .MathJax_MenuDisabled { + color: @overlay2; + } + + .MathJax_MenuDisabled:focus, + .MathJax_MenuLabel:focus { + background-color: @surface1; + } + + #MathJax_AboutClose, + #MathJax_HelpClose { + border-color: @surface2; + color: @subtext0; + span { + background-color: @surface2; + } + + &:hover { + color: @text !important; + border-color: @overlay0 !important; + span { + background-color: @overlay0 !important; + } + } + } + + span.mathjax img { + filter: @text-filter; + } + + /* + * Sources + */ + + span.definition, + .hs-identifier { + color: @blue; + } + + .hs-identifier.hs-type { + color: @yellow; + } + + span.keyword, + .hs-keyword { + color: @mauve; + } + + span.str, + span.char, + .hs-string, + .hs-char, + .hs-str, + .hs-chr { + color: @green; + } + + .hs-number { + color: @peach; + } + + .hs-operator { + color: @sky; + } + + span.keyglyph, + span.layout, + span.conop, + .hs-keyglyph, + .hs-layout, + .hs-glyph, + .hs-special { + color: @overlay2; + } + + span.comment, + .hs-comment, + .hs-comment a { + color: @overlay0; + } + + span.cpp, + .hs-pragma, + .hs-cpp { + color: @pink; + } + + pre a { + &:link, + &:visited { + border-bottom-color: @surface0; + } + &:hover, + &.hover-highlight { + background-color: @surface0; + } + } + + span.annot { + color: @text; + + &:hover { + background-color: @surface1; + } + + span.annottext { + background-color: @surface0; + border-color: @accent-color; + } + } + } +} + +/* deno-fmt-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; + @text-filter: brightness(0) saturate(100%) invert(30%) sepia(10%) saturate(1259%) hue-rotate(196deg) brightness(97%) contrast(91%); + @synopsis-filter: sepia(100%) invert(100%) saturate(0) invert(94%) sepia(7%) saturate(345%) hue-rotate(188deg) brightness(91%) contrast(87%); + }; + @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; + @text-filter: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1519%) hue-rotate(192deg) brightness(100%) contrast(93%); + @synopsis-filter: sepia(100%) invert(100%) saturate(0) invert(25%) sepia(25%) saturate(486%) hue-rotate(193deg) brightness(90%) contrast(89%); + }; + @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; + @text-filter: brightness(0) saturate(100%) invert(81%) sepia(9%) saturate(726%) hue-rotate(192deg) brightness(104%) contrast(92%); + @synopsis-filter: sepia(100%) invert(100%) saturate(0) invert(19%) sepia(15%) saturate(979%) hue-rotate(193deg) brightness(101%) contrast(90%); + }; + @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; + @text-filter: brightness(0) saturate(100%) invert(85%) sepia(6%) saturate(1356%) hue-rotate(194deg) brightness(103%) contrast(91%); + @synopsis-filter: sepia(100%) invert(100%) saturate(0) invert(17%) sepia(17%) saturate(874%) hue-rotate(198deg) brightness(90%) contrast(89%); + }; +}; diff --git a/styles/hacker-news/catppuccin.user.css b/styles/hacker-news/catppuccin.user.css index 14e41b041a..5b873a8ef4 100644 --- a/styles/hacker-news/catppuccin.user.css +++ b/styles/hacker-news/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Hacker News Catppuccin +@name Hacker News Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/hacker-news @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hacker-news -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hacker-news/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hacker-news/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahacker-news @description Soothing pastel theme for Hacker News @author Catppuccin @@ -13,198 +13,4 @@ @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("news.ycombinator.com") { - @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; - } - } - - [bgcolor="#fafaf0"], - [bgcolor="#f6f6ef"] { - background-color: @base; - } - body { - background-color: @mantle; - color: @text; - } - - td { - color: @text; - } - - /* Header */ - td[bgcolor="#ff6600"] { - background-color: @accent-color; - - .pagetop, - .pagetop a { - color: @crust !important; - } - - img[src="y18.svg"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - border-color: @crust !important; - } - - [color="#ffffff"] { - color: @crust; - } - } - - td[bgcolor="#ffffaa"] { - background-color: @yellow; - - td { - color: @crust; - } - } - - .subtext, - .comhead { - &, - a:link, - a:visited, - a:hover { - color: @overlay2 !important; - } - } - - a:link { - color: @blue; - &:hover { - color: @sky; - } - } - .hnmore a:link, - a:visited { - color: @lavender; - } - - [color="#3c963c"] { - color: @green; - } - - /* Story points */ - .score { - color: @subtext0; - } - - /* Story ranking number */ - .title { - color: @lavender; - } - - /* Comment text */ - .commtext { - color: @text; - } - - /* Comment box */ - input, - textarea, - select { - background-color: @mantle; - color: @text; - border-width: 1px; - border-style: solid; - border-color: @surface0; - border-radius: 2px; - } - - input { - padding: 2px; - } - - /* Poll questions */ - td.comment > div > font { - color: @text; - } - - /* Text post content */ - .toptext { - color: @text; - } - - .votearrow { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .yclinks { - color: @surface2; - } - - b { - color: @text; - } - - table[bgcolor="#ff6600"] { - background-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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/hacker-news/catppuccin.user.less b/styles/hacker-news/catppuccin.user.less new file mode 100644 index 0000000000..03c780f20b --- /dev/null +++ b/styles/hacker-news/catppuccin.user.less @@ -0,0 +1,208 @@ +/* ==UserStyle== +@name Hacker News Catppuccin +@namespace github.com/catppuccin/userstyles/styles/hacker-news +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hacker-news +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hacker-news/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahacker-news +@description Soothing pastel theme for Hacker News +@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("news.ycombinator.com") { + @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; + } + } + + [bgcolor="#fafaf0"], + [bgcolor="#f6f6ef"] { + background-color: @base; + } + body { + background-color: @mantle; + color: @text; + } + + td { + color: @text; + } + + /* Header */ + td[bgcolor="#ff6600"] { + background-color: @accent-color; + + .pagetop, + .pagetop a { + color: @crust !important; + } + + img[src="y18.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + border-color: @crust !important; + } + + [color="#ffffff"] { + color: @crust; + } + } + + td[bgcolor="#ffffaa"] { + background-color: @yellow; + + td { + color: @crust; + } + } + + .subtext, + .comhead { + &, + a:link, + a:visited, + a:hover { + color: @overlay2 !important; + } + } + + a:link { + color: @blue; + &:hover { + color: @sky; + } + } + .hnmore a:link, + a:visited { + color: @lavender; + } + + [color="#3c963c"] { + color: @green; + } + + /* Story points */ + .score { + color: @subtext0; + } + + /* Story ranking number */ + .title { + color: @lavender; + } + + /* Comment text */ + .commtext { + color: @text; + } + + /* Comment box */ + input, + textarea, + select { + background-color: @mantle; + color: @text; + border-width: 1px; + border-style: solid; + border-color: @surface0; + border-radius: 2px; + } + + input { + padding: 2px; + } + + /* Poll questions */ + td.comment > div > font { + color: @text; + } + + /* Text post content */ + .toptext { + color: @text; + } + + .votearrow { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .yclinks { + color: @surface2; + } + + b { + color: @text; + } + + table[bgcolor="#ff6600"] { + background-color: @accent-color; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/have-i-been-pwned/catppuccin.user.css b/styles/have-i-been-pwned/catppuccin.user.css index 28f14ddcde..9d699770dd 100644 --- a/styles/have-i-been-pwned/catppuccin.user.css +++ b/styles/have-i-been-pwned/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Have I Been Pwned Catppuccin +@name Have I Been Pwned Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/have-i-been-pwned @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/have-i-been-pwned -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/have-i-been-pwned/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/have-i-been-pwned/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahave-i-been-pwned @description Soothing pastel theme for Have I Been Pwned @author Catppuccin @@ -13,451 +13,4 @@ @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('haveibeenpwned.com') { - @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]; - @text_filter: @catppuccin[@@lookup][@text_filter]; - @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; - color: @text; - } - - hr { - border-color: @surface0; - } - - a { - &, - &:hover, - &:focus { - color: @text; - border-bottom-color: @surface2; - } - - &:hover { - background-color: fade(@accent-color, 30%); - } - } - - img.pwnLogo.large.modalLogo { - filter: @text_filter; - } - - .bodyGradient { - color: @text; - } - - .modal-header { - background: @crust; - - .close { - color: @text; - } - } - - .fa-loader, - .loaderText { - color: @text; - } - - #postNotificationCallsToAction { - .btn { - background-color: @crust; - color: @text; - } - - a.socialLink { - &, - &:link, - &:visited { - color: @text; - } - } - } - - .modal-content { - background-color: @base; - border-color: @surface0; - } - - .main { - background-color: @mantle; - color: @text; - } - - .main-logo .logo { - border-color: @accent-color; - background-color: fade(@accent-color, 30%); - } - - .pwnedCompanyList { - a, - a:hover { - color: @text; - border-bottom-color: @surface2; - } - - td { - color: @subtext0; - } - } - - footer { - a, - p { - color: @subtext0; - } - } - - .unverified { - &, - a { - color: darken(@red, 50%) !important; - border-bottom-color: darken(@red, 50%) !important; - } - } - - .navbar-inverse { - border-color: @surface0; - background-color: @crust; - - .navbar-toggle { - border-color: @surface0; - - &:hover, - &:focus { - background-color: @surface0; - } - - .icon-bar { - background-color: @text; - } - } - - .navbar-brand { - color: @text; - border-color: @text !important; - } - - li.active > a { - &, - &:hover, - &:focus { - color: @text; - background-color: @crust; - } - } - - li > a { - color: @subtext0; - - &:hover, - &:focus { - color: @text; - } - } - } - - img.pwnLogo { - &[src$="/List.png"], - &[src$="/Email.png"] { - filter: @text_filter; - } - } - - .form-control { - background-color: @crust; - color: @text; - border-color: @surface0 !important; - - &:focus { - box-shadow: 0 0 8px fade(@accent-color, 30%); - } - } - - .btn-primary { - color: @text; - background-color: @crust; - border-color: @surface0 !important; - - &:hover { - background-color: fade(@accent-color, 30%); - } - } - - .btn-success { - background-color: @green; - color: @base; - border-color: @surface0; - } - - .progress-bar { - background-color: @accent-color; - } - - .form-group .termsOfUse { - background-color: @base; - } - - .termsOfUse { - background-color: @mantle; - - &, - a { - color: @subtext0; - border-bottom-color: @surface2; - } - } - - .secondaryHeader { - background-color: @mantle; - } - - .sensitive { - color: @yellow; - } - - .sensitive-fade { - color: @subtext0; - } - - .panel-primary { - border-color: @surface0; - - & > .panel-heading, - & > .panel-footer { - color: @text; - border-color: @surface0; - background-color: @mantle; - } - } - - #noPwnage { - background: @green; - - a.socialLink { - color: @base !important; - } - } - - #invalidAccount { - background: @yellow; - } - - #pwnedWebsitesContainer { - hr { - border-color: @surface0; - } - - & > .pwnedRow { - background: @red; - - .pwnedWebsite { - color: @base; - - a { - color: @base; - border-bottom-color: @base; - - &:hover { - background-color: transparent !important; - } - } - } - } - - a.socialLink { - color: @base !important; - } - } - - .pwnResultBanner { - color: @base; - - a { - color: @base; - border-bottom-color: @base !important; - - &:hover { - background-color: transparent !important; - } - } - } - - #Cloudflare img { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - pre, - code { - background-color: @mantle; - color: @text; - border-color: @surface0; - } - - thead tr { - border-color: @surface0; - } - - .bitcoinAddress { - background-color: @mantle; - color: @text; - } - - .bg-info { - background-color: @mantle; - color: @text; - } - - .subscriptions { - .rpm10 { - border-color: @teal; - - h4, - h5, - .price { - background-color: @teal; - color: @base; - } - } - - .rpm50 { - border-color: @green; - - h4, - h5, - .price { - background-color: @green; - color: @base; - } - } - - .rpm100 { - border-color: @yellow; - - h4, - h5, - .price { - background-color: @yellow; - color: @base; - } - } - - .rpm500 { - border-color: @peach; - - h4, - h5, - .price { - background-color: @peach; - color: @base; - } - } - - .description { - color: @text; - } - } - - .finePrint { - color: @text; - } - - .table-bordered { - &, - th, - td { - border-color: @surface0; - } - } - - .dropdown-menu { - background-color: @base; - - & > li > a { - &:hover, - &:focus { - background-color: @mantle; - } - } - } - - @media (min-width: 768px) { - ul.nav li.dropdown:hover { - background-color: @base; - } - } - - @media (max-width: 480px) { - #searchContainer { - background-color: @mantle; - } - } - } -} - -/* 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; @text_filter: brightness(0) saturate(100%) invert(30%) sepia(7%) saturate(1674%) hue-rotate(196deg) brightness(97%) contrast(91%); @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; @text_filter: brightness(0) saturate(100%) invert(74%) sepia(16%) saturate(454%) hue-rotate(192deg) brightness(110%) contrast(92%); @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; @text_filter: brightness(0) saturate(100%) invert(82%) sepia(77%) saturate(662%) hue-rotate(181deg) brightness(103%) contrast(92%); @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; @text_filter: brightness(0) saturate(100%) invert(88%) sepia(10%) saturate(1247%) hue-rotate(191deg) brightness(99%) contrast(93%); @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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/have-i-been-pwned/catppuccin.user.less b/styles/have-i-been-pwned/catppuccin.user.less new file mode 100644 index 0000000000..bedd9c076f --- /dev/null +++ b/styles/have-i-been-pwned/catppuccin.user.less @@ -0,0 +1,461 @@ +/* ==UserStyle== +@name Have I Been Pwned Catppuccin +@namespace github.com/catppuccin/userstyles/styles/have-i-been-pwned +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/have-i-been-pwned +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/have-i-been-pwned/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahave-i-been-pwned +@description Soothing pastel theme for Have I Been Pwned +@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("haveibeenpwned.com") { + @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]; + @text_filter: @catppuccin[@@lookup][@text_filter]; + @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; + color: @text; + } + + hr { + border-color: @surface0; + } + + a { + &, + &:hover, + &:focus { + color: @text; + border-bottom-color: @surface2; + } + + &:hover { + background-color: fade(@accent-color, 30%); + } + } + + img.pwnLogo.large.modalLogo { + filter: @text_filter; + } + + .bodyGradient { + color: @text; + } + + .modal-header { + background: @crust; + + .close { + color: @text; + } + } + + .fa-loader, + .loaderText { + color: @text; + } + + #postNotificationCallsToAction { + .btn { + background-color: @crust; + color: @text; + } + + a.socialLink { + &, + &:link, + &:visited { + color: @text; + } + } + } + + .modal-content { + background-color: @base; + border-color: @surface0; + } + + .main { + background-color: @mantle; + color: @text; + } + + .main-logo .logo { + border-color: @accent-color; + background-color: fade(@accent-color, 30%); + } + + .pwnedCompanyList { + a, + a:hover { + color: @text; + border-bottom-color: @surface2; + } + + td { + color: @subtext0; + } + } + + footer { + a, + p { + color: @subtext0; + } + } + + .unverified { + &, + a { + color: darken(@red, 50%) !important; + border-bottom-color: darken(@red, 50%) !important; + } + } + + .navbar-inverse { + border-color: @surface0; + background-color: @crust; + + .navbar-toggle { + border-color: @surface0; + + &:hover, + &:focus { + background-color: @surface0; + } + + .icon-bar { + background-color: @text; + } + } + + .navbar-brand { + color: @text; + border-color: @text !important; + } + + li.active > a { + &, + &:hover, + &:focus { + color: @text; + background-color: @crust; + } + } + + li > a { + color: @subtext0; + + &:hover, + &:focus { + color: @text; + } + } + } + + img.pwnLogo { + &[src$="/List.png"], + &[src$="/Email.png"] { + filter: @text_filter; + } + } + + .form-control { + background-color: @crust; + color: @text; + border-color: @surface0 !important; + + &:focus { + box-shadow: 0 0 8px fade(@accent-color, 30%); + } + } + + .btn-primary { + color: @text; + background-color: @crust; + border-color: @surface0 !important; + + &:hover { + background-color: fade(@accent-color, 30%); + } + } + + .btn-success { + background-color: @green; + color: @base; + border-color: @surface0; + } + + .progress-bar { + background-color: @accent-color; + } + + .form-group .termsOfUse { + background-color: @base; + } + + .termsOfUse { + background-color: @mantle; + + &, + a { + color: @subtext0; + border-bottom-color: @surface2; + } + } + + .secondaryHeader { + background-color: @mantle; + } + + .sensitive { + color: @yellow; + } + + .sensitive-fade { + color: @subtext0; + } + + .panel-primary { + border-color: @surface0; + + & > .panel-heading, + & > .panel-footer { + color: @text; + border-color: @surface0; + background-color: @mantle; + } + } + + #noPwnage { + background: @green; + + a.socialLink { + color: @base !important; + } + } + + #invalidAccount { + background: @yellow; + } + + #pwnedWebsitesContainer { + hr { + border-color: @surface0; + } + + & > .pwnedRow { + background: @red; + + .pwnedWebsite { + color: @base; + + a { + color: @base; + border-bottom-color: @base; + + &:hover { + background-color: transparent !important; + } + } + } + } + + a.socialLink { + color: @base !important; + } + } + + .pwnResultBanner { + color: @base; + + a { + color: @base; + border-bottom-color: @base !important; + + &:hover { + background-color: transparent !important; + } + } + } + + #Cloudflare img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + pre, + code { + background-color: @mantle; + color: @text; + border-color: @surface0; + } + + thead tr { + border-color: @surface0; + } + + .bitcoinAddress { + background-color: @mantle; + color: @text; + } + + .bg-info { + background-color: @mantle; + color: @text; + } + + .subscriptions { + .rpm10 { + border-color: @teal; + + h4, + h5, + .price { + background-color: @teal; + color: @base; + } + } + + .rpm50 { + border-color: @green; + + h4, + h5, + .price { + background-color: @green; + color: @base; + } + } + + .rpm100 { + border-color: @yellow; + + h4, + h5, + .price { + background-color: @yellow; + color: @base; + } + } + + .rpm500 { + border-color: @peach; + + h4, + h5, + .price { + background-color: @peach; + color: @base; + } + } + + .description { + color: @text; + } + } + + .finePrint { + color: @text; + } + + .table-bordered { + &, + th, + td { + border-color: @surface0; + } + } + + .dropdown-menu { + background-color: @base; + + & > li > a { + &:hover, + &:focus { + background-color: @mantle; + } + } + } + + @media (min-width: 768px) { + ul.nav li.dropdown:hover { + background-color: @base; + } + } + + @media (max-width: 480px) { + #searchContainer { + background-color: @mantle; + } + } + } +} + +/* deno-fmt-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; @text_filter: brightness(0) saturate(100%) invert(30%) sepia(7%) saturate(1674%) hue-rotate(196deg) brightness(97%) contrast(91%); @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; @text_filter: brightness(0) saturate(100%) invert(74%) sepia(16%) saturate(454%) hue-rotate(192deg) brightness(110%) contrast(92%); @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; @text_filter: brightness(0) saturate(100%) invert(82%) sepia(77%) saturate(662%) hue-rotate(181deg) brightness(103%) contrast(92%); @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; @text_filter: brightness(0) saturate(100%) invert(88%) sepia(10%) saturate(1247%) hue-rotate(191deg) brightness(99%) contrast(93%); @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +}; diff --git a/styles/holodex/catppuccin.user.css b/styles/holodex/catppuccin.user.css index 5b5fea695a..43b4b20316 100644 --- a/styles/holodex/catppuccin.user.css +++ b/styles/holodex/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Holodex Catppuccin +@name Holodex Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/holodex @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/holodex -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/holodex/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/holodex/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aholodex @description Soothing pastel theme for Holodex @author Catppuccin @@ -13,263 +13,4 @@ @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('holodex.net') { - :root:has(.theme--dark) { - #catppuccin(@darkFlavor, @accentColor); - } - - :root:has(.theme--light) { - #catppuccin(@lightFlavor, @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; - } - } - - --v-anchor-base: @accent-color; - --v-primary-base: @accent-color; - --v-primary-lighten1: lighten(@accent-color, 4%); - --v-primary-lighten2: lighten(@accent-color, 8%); - --v-primary-lighten3: lighten(@accent-color, 9%); - --v-primary-lighten4: lighten(@accent-color, 18%); - --v-primary-lighten5: lighten(@accent-color, 19%); - --v-primary-darken1: darken(@accent-color, 14%); - --v-primary-darken2: darken(@accent-color, 31%); - --v-primary-darken3: darken(@accent-color, 35%); - --v-primary-darken4: darken(@accent-color, 43%); - - --v-accent-base: @accent-color; - --v-accent-lighten1: lighten(@accent-color, 4%); - --v-accent-lighten2: lighten(@accent-color, 8%); - --v-accent-lighten3: lighten(@accent-color, 9%); - --v-accent-lighten4: lighten(@accent-color, 18%); - --v-accent-lighten5: lighten(@accent-color, 19%); - --v-accent-darken1: darken(@accent-color, 14%); - --v-accent-darken2: darken(@accent-color, 31%); - --v-accent-darken3: darken(@accent-color, 35%); - --v-accent-darken4: darken(@accent-color, 43%); - - --v-secondary-base: @accent-color; - --v-secondary-lighten1: lighten(@accent-color, 4%); - --v-secondary-lighten2: lighten(@accent-color, 8%); - --v-secondary-lighten3: lighten(@accent-color, 9%); - --v-secondary-lighten4: lighten(@accent-color, 18%); - --v-secondary-lighten5: lighten(@accent-color, 19%); - --v-secondary-darken1: darken(@accent-color, 14%); - --v-secondary-darken2: darken(@accent-color, 31%); - --v-secondary-darken3: darken(@accent-color, 35%); - --v-secondary-darken4: darken(@accent-color, 43%); - - --v-error-base: @red; - --v-error-lighten1: lighten(@red, 4%); - --v-error-lighten2: lighten(@red, 8%); - --v-error-lighten3: lighten(@red, 9%); - --v-error-lighten4: lighten(@red, 18%); - --v-error-lighten5: lighten(@red, 19%); - --v-error-darken1: darken(@red, 14%); - --v-error-darken2: darken(@red, 31%); - --v-error-darken3: darken(@red, 35%); - --v-error-darken4: darken(@red, 43%); - - --v-info-base: @blue; - --v-info-lighten1: lighten(@blue, 4%); - --v-info-lighten2: lighten(@blue, 8%); - --v-info-lighten3: lighten(@blue, 9%); - --v-info-lighten4: lighten(@blue, 18%); - --v-info-lighten5: lighten(@blue, 19%); - --v-info-darken1: darken(@blue, 14%); - --v-info-darken2: darken(@blue, 31%); - --v-info-darken3: darken(@blue, 35%); - --v-info-darken4: darken(@blue, 43%); - - --v-success-base: @green; - --v-success-lighten1: lighten(@green, 4%); - --v-success-lighten2: lighten(@green, 8%); - --v-success-lighten3: lighten(@green, 9%); - --v-success-lighten4: lighten(@green, 18%); - --v-success-lighten5: lighten(@green, 19%); - --v-success-darken1: darken(@green, 14%); - --v-success-darken2: darken(@green, 31%); - --v-success-darken3: darken(@green, 35%); - --v-success-darken4: darken(@green, 43%); - - --v-warning-base: @yellow; - --v-warning-lighten1: lighten(@yellow, 4%); - --v-warning-lighten2: lighten(@yellow, 8%); - --v-warning-lighten3: lighten(@yellow, 9%); - --v-warning-lighten4: lighten(@yellow, 18%); - --v-warning-lighten5: lighten(@yellow, 19%); - --v-warning-darken1: darken(@yellow, 14%); - --v-warning-darken2: darken(@yellow, 31%); - --v-warning-darken3: darken(@yellow, 35%); - --v-warning-darken4: darken(@yellow, 43%); - - --v-background-base: @base; - --v-background-lighten1: lighten(@base, 4%); - --v-background-lighten2: lighten(@base, 8%); - --v-background-lighten3: lighten(@base, 9%); - --v-background-lighten4: lighten(@base, 18%); - --v-background-lighten5: lighten(@base, 19%); - --v-background-darken1: darken(@base, 14%); - --v-background-darken2: darken(@base, 31%); - --v-background-darken3: darken(@base, 35%); - --v-background-darken4: darken(@base, 43%); - - div.v-application { - background: @base !important; - color: @text; - } - - header#top-bar, - header.v-toolbar, - div.v-navigation-drawer__content, - div#bottom-bar, - div.v-main__wrap > div, - div.v-select__selections, - div.v-slide-group__wrapper, - div.v-bottom-navigation, - div.v-select__slot, - div.v-input__slot, - div.v-overlay__scrim { - background: @base !important; - } - div.v-sheet { - background: @base; - border-color: @base; - } - - .v-btn.v-btn--has-bg:not(.nav-btn) { - background-color: @surface0 !important; - } - - .v-list, - .v-list-item, - .v-card, - .v-sheet, - .v-select__selections, - .v-label, - .text--secondary, - .v-input__slot input { - color: @text !important; - path:not([fill*="iid-1"]) { - fill: @text; - } - } - - .v-messages, - .v-list-item__subtitle, - .v-tab:not(.v-tab--active) { - color: @subtext0 !important; - } - - svg.logo path { - fill: darken(@accent-color, 2%) !important; - - &:last-child { - fill: darken(@blue, 8%) !important; - } - } - - .v-chip { - background: @blue; - } - - .primary--text, - .name-vtuber { - color: @accent-color !important; - } - - .text-live { - color: @red; - } - - .stream-count-chip { - color: @crust !important; - } - - .nav-btn.v-btn--active { - color: @accent-color !important; - } - - div.v-sheet.v-alert { - background: none !important; - color: @yellow !important; - - .v-icon path { - fill: @yellow !important; - } - } - - hr { - border-color: @base; - } - - // Snack - div.v-snack { - color: @text; - - div.v-sheet { - background: @surface0 !important; - } - - button.v-btn--text { - color: @text !important; - } - - button.v-btn--is-elevated.v-btn--has-bg { - background: @accent-color !important; - color: @base; - } - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/holodex/catppuccin.user.less b/styles/holodex/catppuccin.user.less new file mode 100644 index 0000000000..3386ea0ece --- /dev/null +++ b/styles/holodex/catppuccin.user.less @@ -0,0 +1,273 @@ +/* ==UserStyle== +@name Holodex Catppuccin +@namespace github.com/catppuccin/userstyles/styles/holodex +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/holodex +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/holodex/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aholodex +@description Soothing pastel theme for Holodex +@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("holodex.net") { + :root:has(.theme--dark) { + #catppuccin(@darkFlavor, @accentColor); + } + + :root:has(.theme--light) { + #catppuccin(@lightFlavor, @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; + } + } + + --v-anchor-base: @accent-color; + --v-primary-base: @accent-color; + --v-primary-lighten1: lighten(@accent-color, 4%); + --v-primary-lighten2: lighten(@accent-color, 8%); + --v-primary-lighten3: lighten(@accent-color, 9%); + --v-primary-lighten4: lighten(@accent-color, 18%); + --v-primary-lighten5: lighten(@accent-color, 19%); + --v-primary-darken1: darken(@accent-color, 14%); + --v-primary-darken2: darken(@accent-color, 31%); + --v-primary-darken3: darken(@accent-color, 35%); + --v-primary-darken4: darken(@accent-color, 43%); + + --v-accent-base: @accent-color; + --v-accent-lighten1: lighten(@accent-color, 4%); + --v-accent-lighten2: lighten(@accent-color, 8%); + --v-accent-lighten3: lighten(@accent-color, 9%); + --v-accent-lighten4: lighten(@accent-color, 18%); + --v-accent-lighten5: lighten(@accent-color, 19%); + --v-accent-darken1: darken(@accent-color, 14%); + --v-accent-darken2: darken(@accent-color, 31%); + --v-accent-darken3: darken(@accent-color, 35%); + --v-accent-darken4: darken(@accent-color, 43%); + + --v-secondary-base: @accent-color; + --v-secondary-lighten1: lighten(@accent-color, 4%); + --v-secondary-lighten2: lighten(@accent-color, 8%); + --v-secondary-lighten3: lighten(@accent-color, 9%); + --v-secondary-lighten4: lighten(@accent-color, 18%); + --v-secondary-lighten5: lighten(@accent-color, 19%); + --v-secondary-darken1: darken(@accent-color, 14%); + --v-secondary-darken2: darken(@accent-color, 31%); + --v-secondary-darken3: darken(@accent-color, 35%); + --v-secondary-darken4: darken(@accent-color, 43%); + + --v-error-base: @red; + --v-error-lighten1: lighten(@red, 4%); + --v-error-lighten2: lighten(@red, 8%); + --v-error-lighten3: lighten(@red, 9%); + --v-error-lighten4: lighten(@red, 18%); + --v-error-lighten5: lighten(@red, 19%); + --v-error-darken1: darken(@red, 14%); + --v-error-darken2: darken(@red, 31%); + --v-error-darken3: darken(@red, 35%); + --v-error-darken4: darken(@red, 43%); + + --v-info-base: @blue; + --v-info-lighten1: lighten(@blue, 4%); + --v-info-lighten2: lighten(@blue, 8%); + --v-info-lighten3: lighten(@blue, 9%); + --v-info-lighten4: lighten(@blue, 18%); + --v-info-lighten5: lighten(@blue, 19%); + --v-info-darken1: darken(@blue, 14%); + --v-info-darken2: darken(@blue, 31%); + --v-info-darken3: darken(@blue, 35%); + --v-info-darken4: darken(@blue, 43%); + + --v-success-base: @green; + --v-success-lighten1: lighten(@green, 4%); + --v-success-lighten2: lighten(@green, 8%); + --v-success-lighten3: lighten(@green, 9%); + --v-success-lighten4: lighten(@green, 18%); + --v-success-lighten5: lighten(@green, 19%); + --v-success-darken1: darken(@green, 14%); + --v-success-darken2: darken(@green, 31%); + --v-success-darken3: darken(@green, 35%); + --v-success-darken4: darken(@green, 43%); + + --v-warning-base: @yellow; + --v-warning-lighten1: lighten(@yellow, 4%); + --v-warning-lighten2: lighten(@yellow, 8%); + --v-warning-lighten3: lighten(@yellow, 9%); + --v-warning-lighten4: lighten(@yellow, 18%); + --v-warning-lighten5: lighten(@yellow, 19%); + --v-warning-darken1: darken(@yellow, 14%); + --v-warning-darken2: darken(@yellow, 31%); + --v-warning-darken3: darken(@yellow, 35%); + --v-warning-darken4: darken(@yellow, 43%); + + --v-background-base: @base; + --v-background-lighten1: lighten(@base, 4%); + --v-background-lighten2: lighten(@base, 8%); + --v-background-lighten3: lighten(@base, 9%); + --v-background-lighten4: lighten(@base, 18%); + --v-background-lighten5: lighten(@base, 19%); + --v-background-darken1: darken(@base, 14%); + --v-background-darken2: darken(@base, 31%); + --v-background-darken3: darken(@base, 35%); + --v-background-darken4: darken(@base, 43%); + + div.v-application { + background: @base !important; + color: @text; + } + + header#top-bar, + header.v-toolbar, + div.v-navigation-drawer__content, + div#bottom-bar, + div.v-main__wrap > div, + div.v-select__selections, + div.v-slide-group__wrapper, + div.v-bottom-navigation, + div.v-select__slot, + div.v-input__slot, + div.v-overlay__scrim { + background: @base !important; + } + div.v-sheet { + background: @base; + border-color: @base; + } + + .v-btn.v-btn--has-bg:not(.nav-btn) { + background-color: @surface0 !important; + } + + .v-list, + .v-list-item, + .v-card, + .v-sheet, + .v-select__selections, + .v-label, + .text--secondary, + .v-input__slot input { + color: @text !important; + path:not([fill*="iid-1"]) { + fill: @text; + } + } + + .v-messages, + .v-list-item__subtitle, + .v-tab:not(.v-tab--active) { + color: @subtext0 !important; + } + + svg.logo path { + fill: darken(@accent-color, 2%) !important; + + &:last-child { + fill: darken(@blue, 8%) !important; + } + } + + .v-chip { + background: @blue; + } + + .primary--text, + .name-vtuber { + color: @accent-color !important; + } + + .text-live { + color: @red; + } + + .stream-count-chip { + color: @crust !important; + } + + .nav-btn.v-btn--active { + color: @accent-color !important; + } + + div.v-sheet.v-alert { + background: none !important; + color: @yellow !important; + + .v-icon path { + fill: @yellow !important; + } + } + + hr { + border-color: @base; + } + + // Snack + div.v-snack { + color: @text; + + div.v-sheet { + background: @surface0 !important; + } + + button.v-btn--text { + color: @text !important; + } + + button.v-btn--is-elevated.v-btn--has-bg { + background: @accent-color !important; + color: @base; + } + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/home-manager-options-search/catppuccin.user.css b/styles/home-manager-options-search/catppuccin.user.css index 430ac05592..7c1d7264f4 100644 --- a/styles/home-manager-options-search/catppuccin.user.css +++ b/styles/home-manager-options-search/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Home Manager Options Search Catppuccin +@name Home Manager Options Search Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/home-manager-options-search @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/home-manager-options-search -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/home-manager-options-search/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/home-manager-options-search/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahome-manager-options-search @description Soothing pastel theme for Home Manager Options Search @author Catppuccin @@ -13,186 +13,4 @@ @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('home-manager-options.extranix.com') { - @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; - color: @text; - } - - header { - background-color: @mantle; - - nav.shortcuts li a { - color: @text; - - &:hover { - background-color: @surface0; - color: @text; - } - } - } - - #lastUpdateElement { - color: @text; - } - - a, - a:visited { - color: @accent-color; - } - - input, - textarea, - select { - background-color: @mantle; - color: @text; - caret-color: @text; - border-color: @surface0; - } - - .progress-bar-striped { - background-image: linear-gradient( - 45deg, - fade(@text, 40%) 25%, - transparent 25%, - transparent 50%, - fade(@text, 40%) 50%, - fade(@text, 40%) 75%, - transparent 75%, - transparent - ); - background-color: @accent-color; - color: @crust; - } - - .form-control:focus { - border-color: @accent-color; - box-shadow: - inset 0 1px 1px rgba(0, 0, 0, 0.075), - 0 0 8px @accent-color; - } - - .table-striped > tbody > tr:nth-of-type(2n + 1) { - background-color: @surface0; - } - - table#indexedOptionsTable tr td, - .table > thead > tr > th { - border-color: @surface2 !important; - } - - table tr.optrow:focus-visible, - table tr.optrow:hover { - background-color: @surface1 !important; - } - - .modal-content { - background-color: @base; - - .modal-header, - .modal-footer { - border-color: @surface0 !important; - } - - .close { - color: @text; - text-shadow: 0 1px 0 @text; - } - - pre { - color: @text; - background-color: @mantle; - border-color: @surface0; - } - } - - .btn-default { - background: @surface0; - color: @text; - text-shadow: none; - box-shadow: none; - border-color: @surface0; - - &:hover, - &:focus, - &:active, - .focus, - .active { - background-color: @surface1; - color: @text; - border-color: @surface0; - } - } - - footer { - background-color: @mantle; - color: @text; - border-color: @surface2; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/home-manager-options-search/catppuccin.user.less b/styles/home-manager-options-search/catppuccin.user.less new file mode 100644 index 0000000000..88b7cd2bdc --- /dev/null +++ b/styles/home-manager-options-search/catppuccin.user.less @@ -0,0 +1,194 @@ +/* ==UserStyle== +@name Home Manager Options Search Catppuccin +@namespace github.com/catppuccin/userstyles/styles/home-manager-options-search +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/home-manager-options-search +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/home-manager-options-search/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahome-manager-options-search +@description Soothing pastel theme for Home Manager Options Search +@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("home-manager-options.extranix.com") { + @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; + color: @text; + } + + header { + background-color: @mantle; + + nav.shortcuts li a { + color: @text; + + &:hover { + background-color: @surface0; + color: @text; + } + } + } + + #lastUpdateElement { + color: @text; + } + + a, + a:visited { + color: @accent-color; + } + + input, + textarea, + select { + background-color: @mantle; + color: @text; + caret-color: @text; + border-color: @surface0; + } + + .progress-bar-striped { + background-image: linear-gradient( + 45deg, + fade(@text, 40%) 25%, + transparent 25%, + transparent 50%, + fade(@text, 40%) 50%, + fade(@text, 40%) 75%, + transparent 75%, + transparent + ); + background-color: @accent-color; + color: @crust; + } + + .form-control:focus { + border-color: @accent-color; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px @accent-color; + } + + .table-striped > tbody > tr:nth-of-type(2n+1) { + background-color: @surface0; + } + + table#indexedOptionsTable tr td, + .table > thead > tr > th { + border-color: @surface2 !important; + } + + table tr.optrow:focus-visible, + table tr.optrow:hover { + background-color: @surface1 !important; + } + + .modal-content { + background-color: @base; + + .modal-header, + .modal-footer { + border-color: @surface0 !important; + } + + .close { + color: @text; + text-shadow: 0 1px 0 @text; + } + + pre { + color: @text; + background-color: @mantle; + border-color: @surface0; + } + } + + .btn-default { + background: @surface0; + color: @text; + text-shadow: none; + box-shadow: none; + border-color: @surface0; + + &:hover, + &:focus, + &:active, + .focus, + .active { + background-color: @surface1; + color: @text; + border-color: @surface0; + } + } + + footer { + background-color: @mantle; + color: @text; + border-color: @surface2; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/homepage/catppuccin.user.css b/styles/homepage/catppuccin.user.css index 0c25ca48eb..c90b0b6f03 100644 --- a/styles/homepage/catppuccin.user.css +++ b/styles/homepage/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name homepage Catppuccin +@name homepage Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/homepage @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/homepage -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/homepage/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/homepage/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahomepage @description Soothing pastel theme for homepage @author Catppuccin @@ -13,192 +13,4 @@ @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("homepage.example.com"), regexp("https?://homepage\\..*") -{ - @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; - } - } - - //Page Level Features - - :is(.dark .dark\:bg-theme-800) { - --tw-bg-opacity: 1; - background-color: @base; //background Color - } - - .dark { - --bg-color: @base; - --scrollbar-thumb: @accent-color; //ScrollBar - --scrollbar-track: @mantle; //Scrollbar base - } - - //Information Widget Features - - :is(.dark .dark\:bg-theme-200\/20) { - background-color: @overlay0 //Information Widgets Progress Bar Background -; - } - :is(.dark .dark\:bg-theme-200\/50) { - background-color: @text //Information Widgets Progress Bar Value -; - } - .border-theme-300 { - --tw-border-opacity: 1; - border-color: @surface0 !important; //Search bar Border (important is needed so top separator doesn't override) - } - :is(.dark .dark\:bg-white\/10) { - background-color: @base //Search bar background -; - } - :is(.dark .dark\:focus\:ring-white\/50:focus) { - --tw-ring-color: @text; //Search bar Focus Border - } - - :is(.dark .dark\:text-white) { - --tw-text-opacity: 1; - color: @accent-color //Search bar Text -; - } - - // Services Level Features - - :is(.dark .dark\:bg-white\/5) { - background-color: @mantle; //Box Background - } - :is(.dark .dark\:shadow-theme-900\/20) { - --tw-shadow-color: @mantle; //Box Shadows - --tw-shadow: var(--tw-shadow-colored); - } - - :is(.dark .dark\:hover\:bg-white\/10:hover) { - background-color: @surface1 //Box Hover Color -; - } - - :is(.dark .dark\:bg-theme-900\/50) { - background-color: @crust; //Ping & Docker Stats Box Background - } - :is(.dark .dark\:bg-theme-900\/20) { - background-color: @surface0; //Stats Background Color - } - - :is(.dark .dark\:bg-theme-900\/40) { - background-color: @accent-color; //Progress Bar - } - :is(.dark .dark\:text-theme-300) { - color: @text; //Section Names + Container Description - } - - // api error - .text-theme-900 { - --tw-border-opacity: 1; - color: @base; // api error text color - } - - .bg-rose-900\/80 { - --tw-border-opacity: 1; - background-color: @red; // api error box color - } - // - - :is(.dark .dark\:text-theme-400) { - --tw-border-opacity: 1; - color: @text; // update and version text - } - - .text-white { - color: @subtext1; // search bar icon - } - - :is(.dark .dark\:border-theme-200\/50) { - --tw-border-opacity: 1; - border-color: @surface2; // top separator - } - - :is(.dark .dark\:hover\:text-theme-300:hover) { - --tw-text-opacity: 1; - color: darken( - @accent-color, - 10% - ); //Section Names + Container Description Hover Color - } - :is(.dark .dark\:text-theme-200) { - --tw-text-opacity: 1; - color: @text; // Container Names + Stats - } - - .text-emerald-500\/80 { - color: lighten( - @green, - 10% - ); //Ping & Docker Status Text (Running + Healthy) - } - .text-orange-400\/50 { - color: lighten(@yellow, 10%); //Docker Status Text (Unhealthy) - } - .text-rose-500\/80 { - color: darken(@red, 10%); //Ping Status Text (Bad) - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/homepage/catppuccin.user.less b/styles/homepage/catppuccin.user.less new file mode 100644 index 0000000000..5e20443c92 --- /dev/null +++ b/styles/homepage/catppuccin.user.less @@ -0,0 +1,198 @@ +/* ==UserStyle== +@name homepage Catppuccin +@namespace github.com/catppuccin/userstyles/styles/homepage +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/homepage +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/homepage/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahomepage +@description Soothing pastel theme for homepage +@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("homepage.example.com"), + regexp("https?://homepage\\..*") { + @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; + } + } + + //Page Level Features + + :is(.dark .dark\:bg-theme-800) { + --tw-bg-opacity: 1; + background-color: @base; //background Color + } + + .dark { + --bg-color: @base; + --scrollbar-thumb: @accent-color; //ScrollBar + --scrollbar-track: @mantle; //Scrollbar base + } + + //Information Widget Features + + :is(.dark .dark\:bg-theme-200\/20) { + background-color: @overlay0; //Information Widgets Progress Bar Background + } + :is(.dark .dark\:bg-theme-200\/50) { + background-color: @text; //Information Widgets Progress Bar Value + } + .border-theme-300 { + --tw-border-opacity: 1; + border-color: @surface0 + !important; //Search bar Border (important is needed so top separator doesn't override) + } + :is(.dark .dark\:bg-white\/10) { + background-color: @base; //Search bar background + } + :is(.dark .dark\:focus\:ring-white\/50:focus) { + --tw-ring-color: @text; //Search bar Focus Border + } + + :is(.dark .dark\:text-white) { + --tw-text-opacity: 1; + color: @accent-color; //Search bar Text + } + + // Services Level Features + + :is(.dark .dark\:bg-white\/5) { + background-color: @mantle; //Box Background + } + :is(.dark .dark\:shadow-theme-900\/20) { + --tw-shadow-color: @mantle; //Box Shadows + --tw-shadow: var(--tw-shadow-colored); + } + + :is(.dark .dark\:hover\:bg-white\/10:hover) { + background-color: @surface1; //Box Hover Color + } + + :is(.dark .dark\:bg-theme-900\/50) { + background-color: @crust; //Ping & Docker Stats Box Background + } + :is(.dark .dark\:bg-theme-900\/20) { + background-color: @surface0; //Stats Background Color + } + + :is(.dark .dark\:bg-theme-900\/40) { + background-color: @accent-color; //Progress Bar + } + :is(.dark .dark\:text-theme-300) { + color: @text; //Section Names + Container Description + } + + // api error + .text-theme-900 { + --tw-border-opacity: 1; + color: @base; // api error text color + } + + .bg-rose-900\/80 { + --tw-border-opacity: 1; + background-color: @red; // api error box color + } + // + + :is(.dark .dark\:text-theme-400) { + --tw-border-opacity: 1; + color: @text; // update and version text + } + + .text-white { + color: @subtext1; // search bar icon + } + + :is(.dark .dark\:border-theme-200\/50) { + --tw-border-opacity: 1; + border-color: @surface2; // top separator + } + + :is(.dark .dark\:hover\:text-theme-300:hover) { + --tw-text-opacity: 1; + color: darken( + @accent-color, + 10% + ); //Section Names + Container Description Hover Color + } + :is(.dark .dark\:text-theme-200) { + --tw-text-opacity: 1; + color: @text; // Container Names + Stats + } + + .text-emerald-500\/80 { + color: lighten( + @green, + 10% + ); //Ping & Docker Status Text (Running + Healthy) + } + .text-orange-400\/50 { + color: lighten(@yellow, 10%); //Docker Status Text (Unhealthy) + } + .text-rose-500\/80 { + color: darken(@red, 10%); //Ping Status Text (Bad) + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/hoogle/catppuccin.user.css b/styles/hoogle/catppuccin.user.css index cd966e59c6..5dcefa1e09 100644 --- a/styles/hoogle/catppuccin.user.css +++ b/styles/hoogle/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Hoogle Catppuccin +@name Hoogle Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/hoogle @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hoogle -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hoogle/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hoogle/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahoogle @description Soothing pastel theme for Hoogle @author Catppuccin @@ -13,283 +13,4 @@ @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("hoogle.haskell.org") { - @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%); - } - - a { - color: @accent-color; - - &:hover { - background-color: @surface0; - } - } - - body { - background-color: @base; - color: @text; - } - - /* - * Top - */ - - #links { - background-color: @accent-color; - color: @surface1; - border-color: shade(@accent-color, 25%); - } - - #top-menu li { - border-color: @crust; - - a, - a:visited, - a:link { - color: @base; - } - a:hover { - background-color: fade(@overlay0, 30%); - } - } - - #logo { - img { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - &:hover { - background-color: transparent; - } - } - - #hoogle, - #scope, - #submit { - background-color: @mantle; - color: @subtext1; - border-style: solid; - border-width: 2px; - border-color: @surface0; - border-radius: 4px; - } - - .chosen-container { - .chosen-drop { - background-color: @mantle; - border-color: @surface0; - } - - .chosen-single { - background-image: none; - background-color: @mantle; - box-shadow: none; - border-style: solid; - border-width: 2px; - border-color: @surface0; - color: @subtext1; - } - - .chosen-default { - color: @crust; - } - - .chosen-search input { - border-color: @surface1; - border-radius: 4px; - } - - .chosen-results { - color: @subtext1; - - li.disabled-result { - color: @overlay0; - } - - li.highlighted { - background-image: none; - background-color: @accent-color; - color: @base; - } - - li.no-results { - color: @subtext1; - background-color: @mantle; - } - } - } - - /* - * Left - */ - - #left { - a { - color: @accent-color; - } - .plus { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - color: @green; - } - .minus { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - color: @red; - } - } - - /* - * Footer - */ - - #footer { - background-color: @crust; - color: @subtext1; - border-color: @overlay0; - } - - /* - * Other - */ - - .error { - border-color: @red; - } - - #example { - background-color: @mantle; - color: @subtext1; - border-color: @surface0; - } - - /* - * Results - */ - - .result.active { - background-color: @mantle; - } - - .ans { - background-color: @mantle; - border-color: @surface0; - - a { - color: @subtext1; - } - .name { - color: @accent-color; - } - } - - .links a { - color: @overlay1; - } - - .from a, - .p1, - .p2 { - color: @green; - } - - .doc, - .doc a { - color: @subtext1; - } - - .open { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - .shut { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .c0 { - background-color: @rosewater; - } - .c1 { - background-color: @green; - } - .c2 { - background-color: @lavender; - } - .c3 { - background-color: @yellow; - } - .c4 { - background-color: @pink; - } - .c5 { - background-color: @teal; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/hoogle/catppuccin.user.less b/styles/hoogle/catppuccin.user.less new file mode 100644 index 0000000000..62c2f82832 --- /dev/null +++ b/styles/hoogle/catppuccin.user.less @@ -0,0 +1,293 @@ +/* ==UserStyle== +@name Hoogle Catppuccin +@namespace github.com/catppuccin/userstyles/styles/hoogle +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hoogle +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hoogle/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahoogle +@description Soothing pastel theme for Hoogle +@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("hoogle.haskell.org") { + @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%); + } + + a { + color: @accent-color; + + &:hover { + background-color: @surface0; + } + } + + body { + background-color: @base; + color: @text; + } + + /* + * Top + */ + + #links { + background-color: @accent-color; + color: @surface1; + border-color: shade(@accent-color, 25%); + } + + #top-menu li { + border-color: @crust; + + a, + a:visited, + a:link { + color: @base; + } + a:hover { + background-color: fade(@overlay0, 30%); + } + } + + #logo { + img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + &:hover { + background-color: transparent; + } + } + + #hoogle, + #scope, + #submit { + background-color: @mantle; + color: @subtext1; + border-style: solid; + border-width: 2px; + border-color: @surface0; + border-radius: 4px; + } + + .chosen-container { + .chosen-drop { + background-color: @mantle; + border-color: @surface0; + } + + .chosen-single { + background-image: none; + background-color: @mantle; + box-shadow: none; + border-style: solid; + border-width: 2px; + border-color: @surface0; + color: @subtext1; + } + + .chosen-default { + color: @crust; + } + + .chosen-search input { + border-color: @surface1; + border-radius: 4px; + } + + .chosen-results { + color: @subtext1; + + li.disabled-result { + color: @overlay0; + } + + li.highlighted { + background-image: none; + background-color: @accent-color; + color: @base; + } + + li.no-results { + color: @subtext1; + background-color: @mantle; + } + } + } + + /* + * Left + */ + + #left { + a { + color: @accent-color; + } + .plus { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + color: @green; + } + .minus { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + color: @red; + } + } + + /* + * Footer + */ + + #footer { + background-color: @crust; + color: @subtext1; + border-color: @overlay0; + } + + /* + * Other + */ + + .error { + border-color: @red; + } + + #example { + background-color: @mantle; + color: @subtext1; + border-color: @surface0; + } + + /* + * Results + */ + + .result.active { + background-color: @mantle; + } + + .ans { + background-color: @mantle; + border-color: @surface0; + + a { + color: @subtext1; + } + .name { + color: @accent-color; + } + } + + .links a { + color: @overlay1; + } + + .from a, + .p1, + .p2 { + color: @green; + } + + .doc, + .doc a { + color: @subtext1; + } + + .open { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + .shut { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .c0 { + background-color: @rosewater; + } + .c1 { + background-color: @green; + } + .c2 { + background-color: @lavender; + } + .c3 { + background-color: @yellow; + } + .c4 { + background-color: @pink; + } + .c5 { + background-color: @teal; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/hoppscotch/catppuccin.user.css b/styles/hoppscotch/catppuccin.user.css index 9090f65003..454c5e8250 100644 --- a/styles/hoppscotch/catppuccin.user.css +++ b/styles/hoppscotch/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Hoppscotch Catppuccin +@name Hoppscotch Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/hoppscotch @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hoppscotch -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hoppscotch/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hoppscotch/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahoppscotch @description Soothing pastel theme for Hoppscotch @author Catppuccin @@ -13,119 +13,4 @@ @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("hoppscotch.io") { - :root.dark { - #catppuccin(@darkFlavor, @accentColor); - } - - :root.light { - #catppuccin(@lightFlavor, @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]; - - @accent-color-light-alpha: 1.1; - @accent-color-dark-alpha: 0.9; - @accent-gradient-from-color: 1.05; - @accent-gradient-via-color: 1.2; - @accent-gradient-to-color: 0.85; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - --primary-color: @base; - --primary-light-color: @surface1; - --primary-dark-color: @crust; - --primary-contrast-color: @mantle; - --secondary-color: @subtext0; - --secondary-light-color: @subtext0; - --secondary-dark-color: @subtext1; - --divider-color: @overlay0; - --divider-light-color: @overlay1; - --divider-dark-color: @surface2; - --error-color: @red; - --tooltip-color: @text; - --popover-color: @crust; - --editor-theme: "vscode-esque"; - --editor-type-color: fade(@mauve, 90%); - --editor-name-color: @blue; - --editor-operator-color: @mauve; - --editor-invalid-color: @maroon; - --editor-separator-color: @overlay0; - --editor-meta-color: @overlay0; - --editor-variable-color: @green; - --editor-link-color: @sapphire; - --editor-constant-color: fade(@lavender, 1.2%); - --editor-keyword-color: @red; - --accent-color: @accent-color; - --accent-light-color: fade(@accent-color, @accent-color-light-alpha); - --accent-dark-color: fade(@accent-color, @accent-color-dark-alpha); - --accent-contrast-color: @crust; - --gradient-from-color: fade(@accent-color, @accent-gradient-from-color); - --gradient-via-color: fade(@accent-color, @accent-gradient-via-color); - --gradient-to-color: fade(@accent-color, @accent-gradient-to-color); - - --editor-process-color: @text; - - .ͼ1 .cm-placeholder { - color: @text; - } - - .cm-focused .cm-activeLine { - background-color: @surface0; - } - - .cm-focused .cm-activeLineGutter { - background-color: @surface2; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/hoppscotch/catppuccin.user.less b/styles/hoppscotch/catppuccin.user.less new file mode 100644 index 0000000000..37158c0c61 --- /dev/null +++ b/styles/hoppscotch/catppuccin.user.less @@ -0,0 +1,129 @@ +/* ==UserStyle== +@name Hoppscotch Catppuccin +@namespace github.com/catppuccin/userstyles/styles/hoppscotch +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hoppscotch +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hoppscotch/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahoppscotch +@description Soothing pastel theme for Hoppscotch +@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("hoppscotch.io") { + :root.dark { + #catppuccin(@darkFlavor, @accentColor); + } + + :root.light { + #catppuccin(@lightFlavor, @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]; + + @accent-color-light-alpha: 1.1; + @accent-color-dark-alpha: 0.9; + @accent-gradient-from-color: 1.05; + @accent-gradient-via-color: 1.2; + @accent-gradient-to-color: 0.85; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + --primary-color: @base; + --primary-light-color: @surface1; + --primary-dark-color: @crust; + --primary-contrast-color: @mantle; + --secondary-color: @subtext0; + --secondary-light-color: @subtext0; + --secondary-dark-color: @subtext1; + --divider-color: @overlay0; + --divider-light-color: @overlay1; + --divider-dark-color: @surface2; + --error-color: @red; + --tooltip-color: @text; + --popover-color: @crust; + --editor-theme: "vscode-esque"; + --editor-type-color: fade(@mauve, 90%); + --editor-name-color: @blue; + --editor-operator-color: @mauve; + --editor-invalid-color: @maroon; + --editor-separator-color: @overlay0; + --editor-meta-color: @overlay0; + --editor-variable-color: @green; + --editor-link-color: @sapphire; + --editor-constant-color: fade(@lavender, 1.2%); + --editor-keyword-color: @red; + --accent-color: @accent-color; + --accent-light-color: fade(@accent-color, @accent-color-light-alpha); + --accent-dark-color: fade(@accent-color, @accent-color-dark-alpha); + --accent-contrast-color: @crust; + --gradient-from-color: fade(@accent-color, @accent-gradient-from-color); + --gradient-via-color: fade(@accent-color, @accent-gradient-via-color); + --gradient-to-color: fade(@accent-color, @accent-gradient-to-color); + + --editor-process-color: @text; + + .ͼ1 .cm-placeholder { + color: @text; + } + + .cm-focused .cm-activeLine { + background-color: @surface0; + } + + .cm-focused .cm-activeLineGutter { + background-color: @surface2; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/hyperpipe/catppuccin.user.css b/styles/hyperpipe/catppuccin.user.css index 4b24608144..bed6903fa5 100644 --- a/styles/hyperpipe/catppuccin.user.css +++ b/styles/hyperpipe/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Hyperpipe Catppuccin +@name Hyperpipe Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/hyperpipe @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hyperpipe -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hyperpipe/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hyperpipe/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahyperpipe @description Soothing pastel theme for Hyperpipe @author Catppuccin @@ -13,112 +13,4 @@ @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("hyperpipe.surge.sh"), - domain("hyperpipe.esmailelbob.xyz"), - domain("listen.whatever.social"), - domain("music.adminforge.de"), - domain("music.pfcd.me"), - domain("listen.whateveritworks.org"), - domain("hyperpipe.frontendfriendly.xyz"), - domain("hyperpipe.drgns.space"), - domain("hyperpipe.projectsegfau.lt"), - domain("hp.ggtyler.dev"), - domain("hyperpipe.lunar.icu"), - domain("hp.iqbalrifai.eu.org"), - domain("hp.ngn.tf"), - domain("hyperpipe.ducks.party") { - @media (prefers-color-scheme: light) { - body { - #catppuccin(@lightFlavor, @accentColor); - } - } - - @media (prefers-color-scheme: dark) { - body { - #catppuccin(@darkFlavor, @accentColor); - } - } - - body[data-theme^="light"] { - #catppuccin(@lightFlavor, @accentColor); - } - - body[data-theme^="dark"], - body[data-theme^="black"], - body[data-theme^="dracula"], - body[data-theme^="nord"] { - #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; - } - } - - --color-foreground: @accent-color !important; - --color-background: @base !important; - --color-background-soft: @surface0 !important; - --color-background-mute: @surface1 !important; - --color-border: @surface0 !important; - --color-border-hover: @overlay0 !important; - --color-shadow: @crust !important; - --color-blur: fade(@mantle, 45%) !important; - --color-gradient: linear-gradient( - 45deg, - @accent-color, - fade(@accent-color, 45%) - ); - --color-scrollbar: @accent-color !important; - --color-heading: @text !important; - --color-text: @text !important; - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/hyperpipe/catppuccin.user.less b/styles/hyperpipe/catppuccin.user.less new file mode 100644 index 0000000000..3a88cae018 --- /dev/null +++ b/styles/hyperpipe/catppuccin.user.less @@ -0,0 +1,122 @@ +/* ==UserStyle== +@name Hyperpipe Catppuccin +@namespace github.com/catppuccin/userstyles/styles/hyperpipe +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hyperpipe +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hyperpipe/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahyperpipe +@description Soothing pastel theme for Hyperpipe +@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("hyperpipe.surge.sh"), + domain("hyperpipe.esmailelbob.xyz"), + domain("listen.whatever.social"), + domain("music.adminforge.de"), + domain("music.pfcd.me"), + domain("listen.whateveritworks.org"), + domain("hyperpipe.frontendfriendly.xyz"), + domain("hyperpipe.drgns.space"), + domain("hyperpipe.projectsegfau.lt"), + domain("hp.ggtyler.dev"), + domain("hyperpipe.lunar.icu"), + domain("hp.iqbalrifai.eu.org"), + domain("hp.ngn.tf"), + domain("hyperpipe.ducks.party") { + @media (prefers-color-scheme: light) { + body { + #catppuccin(@lightFlavor, @accentColor); + } + } + + @media (prefers-color-scheme: dark) { + body { + #catppuccin(@darkFlavor, @accentColor); + } + } + + body[data-theme^="light"] { + #catppuccin(@lightFlavor, @accentColor); + } + + body[data-theme^="dark"], + body[data-theme^="black"], + body[data-theme^="dracula"], + body[data-theme^="nord"] { + #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; + } + } + + --color-foreground: @accent-color !important; + --color-background: @base !important; + --color-background-soft: @surface0 !important; + --color-background-mute: @surface1 !important; + --color-border: @surface0 !important; + --color-border-hover: @overlay0 !important; + --color-shadow: @crust !important; + --color-blur: fade(@mantle, 45%) !important; + --color-gradient: linear-gradient( + 45deg, + @accent-color, + fade(@accent-color, 45%) + ); + --color-scrollbar: @accent-color !important; + --color-heading: @text !important; + --color-text: @text !important; + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/ichi.moe/catppuccin.user.css b/styles/ichi.moe/catppuccin.user.css index e902d2d2e3..ceac771021 100644 --- a/styles/ichi.moe/catppuccin.user.css +++ b/styles/ichi.moe/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name ichi.moe Catppuccin +@name ichi.moe Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/ichi.moe @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ichi.moe -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ichi.moe/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ichi.moe/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aichi.moe @description Soothing pastel theme for ichi.moe @author Catppuccin @@ -15,414 +15,4 @@ @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 checkbox zen "Zen Mode" 0 -==/UserStyle== */ - -@-moz-document domain("ichi.moe") { - @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; - } - } - - html, - body { - background: @base; - color: @text; - } - - footer { - color: @subtext1; - } - - span.query-word:hover { - border-color: @pink; - } - - .panel-error { - background-color: fadeout(@red, 20%); - } - - .highlight { - background-color: fadeout(@yellow, 20%); - } - - .gloss { - & when (@lookup ="latte") { - background-color: @base; - border-color: @surface2; - } - background-color: @surface0; - border-color: @overlay0; - } - - .gloss-rtext { - & when (@lookup ="latte") { - border-color: @surface2; - } - border-color: @overlay0; - } - - .gloss:target { - & when (@lookup ="latte") { - box-shadow: 0 0 5px @surface2; - -webkit-box-shadow: 0 0 5px @surface2; - -moz-box-shadow: 0 0 5px @surface2; - } - box-shadow: 0 0 5px @overlay0; - -webkit-box-shadow: 0 0 5px @overlay0; - -moz-box-shadow: 0 0 5px @overlay0; - } - - a { - color: @sapphire; - } - - a.wiktionary-link { - color: @text; - } - - a.info-link { - color: @text; - } - - a.info-link:hover { - border-bottom-color: @sapphire; - } - - .note-skipped a { - color: @subtext1; - } - - .note-skipped a:hover { - border-color: @subtext1; - } - - .jspDrag { - & when (@lookup ="latte") { - background-color: @surface1; - } - background-color: @surface2; - } - - .conj-negative { - color: @red; - } - - .conj-formal { - color: @blue; - } - - .pos-desc { - color: @green; - } - - .reading-table tr:nth-of-type(2n) { - & when (@lookup ="latte") { - background: fadeout(@surface0, 50%); - } - background: fadeout(@surface1, 50%); - } - - table.kanji-match tr:nth-of-type(2n) { - & when (@lookup ="latte") { - background: fadeout(@surface0, 50%); - } - background: fadeout(@surface1, 50%); - } - - .kanji-big a { - color: @subtext1; - } - - .autocomplete-suggestions { - & when (@lookup ="latte") { - background: @base; - border-color: @surface2; - } - background: @surface0; - border-color: @overlay0; - } - - .autocomplete-selected { - & when (@lookup ="latte") { - background: @base; - } - background: @surface0; - } - - .autocomplete-suggestions strong { - color: @lavender; - } - - .autocomplete-group strong { - border-bottom-color: @text; - } - - .button { - background-color: @sapphire; - border-color: @sapphire; - color: @base; - } - - button:hover, - button:focus, - .button:hover, - .button:focus { - background-color: darken(@sapphire, 25%); - color: @base; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - color: @text; - } - - input[type="text"], - input[type="password"], - input[type="date"], - input[type="datetime"], - input[type="datetime-local"], - input[type="month"], - input[type="week"], - input[type="email"], - input[type="number"], - input[type="search"], - input[type="tel"], - input[type="time"], - input[type="url"], - input[type="color"], - textarea, - input[type="file"], - input[type="checkbox"], - input[type="radio"], - select, - input[type="text"]:focus, - input[type="password"]:focus, - input[type="date"]:focus, - input[type="datetime"]:focus, - input[type="datetime-local"]:focus, - input[type="month"]:focus, - input[type="week"]:focus, - input[type="email"]:focus, - input[type="number"]:focus, - input[type="search"]:focus, - input[type="tel"]:focus, - input[type="time"]:focus, - input[type="url"]:focus, - input[type="color"]:focus, - textarea:focus, - input[type="file"]:focus, - input[type="checkbox"]:focus, - input[type="radio"]:focus, - select:focus { - & when (@lookup ="latte") { - background-color: @base; - border-color: @surface0; - } - background-color: @surface0; - border-color: @surface1; - color: @text; - } - - .header-nav a { - color: @pink; - } - - .header-nav a:hover { - color: darken(@pink, 15%); - } - - .jspTrack { - & when (@lookup ="latte") { - background: @surface0; - } - background: @surface1; - } - - .f-dropdown { - & when (@lookup ="latte") { - background-color: @base; - } - background-color: @surface0; - border-color: @subtext1; - } - - .f-dropdown::before { - border-color: transparent transparent @subtext1; - } - - span.query-pick { - color: @text; - } - - .has-tip { - color: @subtext1; - border-color: @overlay1; - } - - .has-tip:hover, - .has-tip:focus { - border-bottom-color: @sapphire; - color: @sapphire; - } - - label { - color: @subtext1; - } - - table { - background: @base; - & when (@lookup ="latte") { - background-color: @surface0; - } - background-color: @surface1; - } - - table tr th, - table tr td { - color: @subtext1; - } - - .kanji-table td { - & when (@lookup ="latte") { - border-color: @surface0; - } - border-color: @surface1; - } - - table tr.even, - table tr.alt, - table tr:nth-of-type(2n) { - & when (@lookup ="latte") { - background: fadeout(@surface0, 50%); - } - background: fadeout(@surface1, 50%); - } - - .reading-table tr ~ tr > td { - & when (@lookup ="latte") { - border-color: @surface0; - } - border-color: @surface1; - } - - table.kanji-match td { - & when (@lookup ="latte") { - border-color: @surface0; - } - border-color: @surface1; - } - - tr.match-row-kanji, - tr.match-row-reading { - & when (@lookup ="latte") { - border-color: @surface0; - } - border-color: @surface1; - } - - img { - filter: contrast(1.2) opacity(85%); - } - - /* Options */ - & when (@zen = 1) { - .header, - footer, - .landing-page { - display: none; - } - - div.wrapper { - display: flex; - flex-direction: column; - align-items: center; - place-content: center center; - padding: 50px 0; - min-height: 100vh; - margin: 0; - } - - .gloss-all { - width: 100%; - padding: 0 10px; - } - - #div-ichiran-result { - padding: 0 10px; - } - - #div-kanji-form, - #w-form { - width: 100%; - } - - #k-form > div > div, - #w-form > div > div { - width: 100%; - max-width: 304px; - } - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/ichi.moe/catppuccin.user.less b/styles/ichi.moe/catppuccin.user.less new file mode 100644 index 0000000000..e460b2fc61 --- /dev/null +++ b/styles/ichi.moe/catppuccin.user.less @@ -0,0 +1,426 @@ +/* ==UserStyle== +@name ichi.moe Catppuccin +@namespace github.com/catppuccin/userstyles/styles/ichi.moe +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ichi.moe +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ichi.moe/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aichi.moe +@description Soothing pastel theme for ichi.moe +@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"] + +@var checkbox zen "Zen Mode" 0 +==/UserStyle== */ + +@-moz-document domain("ichi.moe") { + @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; + } + } + + html, + body { + background: @base; + color: @text; + } + + footer { + color: @subtext1; + } + + span.query-word:hover { + border-color: @pink; + } + + .panel-error { + background-color: fadeout(@red, 20%); + } + + .highlight { + background-color: fadeout(@yellow, 20%); + } + + .gloss { + & when (@lookup = "latte") { + background-color: @base; + border-color: @surface2; + } + background-color: @surface0; + border-color: @overlay0; + } + + .gloss-rtext { + & when (@lookup = "latte") { + border-color: @surface2; + } + border-color: @overlay0; + } + + .gloss:target { + & when (@lookup = "latte") { + box-shadow: 0 0 5px @surface2; + -webkit-box-shadow: 0 0 5px @surface2; + -moz-box-shadow: 0 0 5px @surface2; + } + box-shadow: 0 0 5px @overlay0; + -webkit-box-shadow: 0 0 5px @overlay0; + -moz-box-shadow: 0 0 5px @overlay0; + } + + a { + color: @sapphire; + } + + a.wiktionary-link { + color: @text; + } + + a.info-link { + color: @text; + } + + a.info-link:hover { + border-bottom-color: @sapphire; + } + + .note-skipped a { + color: @subtext1; + } + + .note-skipped a:hover { + border-color: @subtext1; + } + + .jspDrag { + & when (@lookup = "latte") { + background-color: @surface1; + } + background-color: @surface2; + } + + .conj-negative { + color: @red; + } + + .conj-formal { + color: @blue; + } + + .pos-desc { + color: @green; + } + + .reading-table tr:nth-of-type(2n) { + & when (@lookup = "latte") { + background: fadeout(@surface0, 50%); + } + background: fadeout(@surface1, 50%); + } + + table.kanji-match tr:nth-of-type(2n) { + & when (@lookup = "latte") { + background: fadeout(@surface0, 50%); + } + background: fadeout(@surface1, 50%); + } + + .kanji-big a { + color: @subtext1; + } + + .autocomplete-suggestions { + & when (@lookup = "latte") { + background: @base; + border-color: @surface2; + } + background: @surface0; + border-color: @overlay0; + } + + .autocomplete-selected { + & when (@lookup = "latte") { + background: @base; + } + background: @surface0; + } + + .autocomplete-suggestions strong { + color: @lavender; + } + + .autocomplete-group strong { + border-bottom-color: @text; + } + + .button { + background-color: @sapphire; + border-color: @sapphire; + color: @base; + } + + button:hover, + button:focus, + .button:hover, + .button:focus { + background-color: darken(@sapphire, 25%); + color: @base; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: @text; + } + + input[type="text"], + input[type="password"], + input[type="date"], + input[type="datetime"], + input[type="datetime-local"], + input[type="month"], + input[type="week"], + input[type="email"], + input[type="number"], + input[type="search"], + input[type="tel"], + input[type="time"], + input[type="url"], + input[type="color"], + textarea, + input[type="file"], + input[type="checkbox"], + input[type="radio"], + select, + input[type="text"]:focus, + input[type="password"]:focus, + input[type="date"]:focus, + input[type="datetime"]:focus, + input[type="datetime-local"]:focus, + input[type="month"]:focus, + input[type="week"]:focus, + input[type="email"]:focus, + input[type="number"]:focus, + input[type="search"]:focus, + input[type="tel"]:focus, + input[type="time"]:focus, + input[type="url"]:focus, + input[type="color"]:focus, + textarea:focus, + input[type="file"]:focus, + input[type="checkbox"]:focus, + input[type="radio"]:focus, + select:focus { + & when (@lookup = "latte") { + background-color: @base; + border-color: @surface0; + } + background-color: @surface0; + border-color: @surface1; + color: @text; + } + + .header-nav a { + color: @pink; + } + + .header-nav a:hover { + color: darken(@pink, 15%); + } + + .jspTrack { + & when (@lookup = "latte") { + background: @surface0; + } + background: @surface1; + } + + .f-dropdown { + & when (@lookup = "latte") { + background-color: @base; + } + background-color: @surface0; + border-color: @subtext1; + } + + .f-dropdown::before { + border-color: transparent transparent @subtext1; + } + + span.query-pick { + color: @text; + } + + .has-tip { + color: @subtext1; + border-color: @overlay1; + } + + .has-tip:hover, + .has-tip:focus { + border-bottom-color: @sapphire; + color: @sapphire; + } + + label { + color: @subtext1; + } + + table { + background: @base; + & when (@lookup = "latte") { + background-color: @surface0; + } + background-color: @surface1; + } + + table tr th, + table tr td { + color: @subtext1; + } + + .kanji-table td { + & when (@lookup = "latte") { + border-color: @surface0; + } + border-color: @surface1; + } + + table tr.even, + table tr.alt, + table tr:nth-of-type(2n) { + & when (@lookup = "latte") { + background: fadeout(@surface0, 50%); + } + background: fadeout(@surface1, 50%); + } + + .reading-table tr ~ tr > td { + & when (@lookup = "latte") { + border-color: @surface0; + } + border-color: @surface1; + } + + table.kanji-match td { + & when (@lookup = "latte") { + border-color: @surface0; + } + border-color: @surface1; + } + + tr.match-row-kanji, + tr.match-row-reading { + & when (@lookup = "latte") { + border-color: @surface0; + } + border-color: @surface1; + } + + img { + filter: contrast(1.2) opacity(85%); + } + + /* Options */ + & when (@zen = 1) { + .header, + footer, + .landing-page { + display: none; + } + + div.wrapper { + display: flex; + flex-direction: column; + align-items: center; + place-content: center center; + padding: 50px 0; + min-height: 100vh; + margin: 0; + } + + .gloss-all { + width: 100%; + padding: 0 10px; + } + + #div-ichiran-result { + padding: 0 10px; + } + + #div-kanji-form, + #w-form { + width: 100%; + } + + #k-form > div > div, + #w-form > div > div { + width: 100%; + max-width: 304px; + } + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/indie-wiki-buddy/catppuccin.user.css b/styles/indie-wiki-buddy/catppuccin.user.css index 535c540899..b7f8b6d439 100644 --- a/styles/indie-wiki-buddy/catppuccin.user.css +++ b/styles/indie-wiki-buddy/catppuccin.user.css @@ -1,11 +1,11 @@ /* ==UserStyle== -@name Indie Wiki Buddy Catppuccin +@name Indie Wiki Buddy Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/indie-wiki-buddy @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/indie-wiki-buddy -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/indie-wiki-buddy/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/indie-wiki-buddy/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aindie-wiki-buddy -@description Soothing pastel theme for Indie Wiki Buddy +@description Soothing pastel theme for Indie Wiki Buddy @author Catppuccin @license MIT @@ -13,168 +13,4 @@ @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== */ - -/* -To get a list of supported search engines, run the following command: -curl -s https://raw.githubusercontent.com/KevinPayravi/indie-wiki-buddy/main/manifest-firefox.json | python -c "import sys, json;print(*json.loads(sys.stdin.read())['content_scripts'][2]['matches'], sep='\n')" -*/ -@-moz-document domain('bing.com'), -domain('search.brave.com'), -domain('duckduckgo.com'), -domain('ecosia.org'), -domain('kagi.com'), -domain('qwant.com'), -domain('search.yahoo.com'), -domain('startpage.com'), -domain('ya.ru'), -regexp("^https?://(www\\.)?google\\..*"), -regexp("^https?://(www\\.)?yandex\\..*") -{ - @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]; - - .iwb-new-link button { - color: @base; - background: @blue; - &:hover { - background: @sky; - } - } - .iwb-result-controls { - color: @text !important; - } - } -} - -@-moz-document domain('fandom.com'), -domain('fextralife.com'), -domain('neoseeker.com'), -domain('breezewiki.com'), -domain('antifandom.com'), -domain('bw.artemislena.eu'), -domain('breezewiki.catsarch.com'), -domain('breezewiki.esmailelbob.xyz'), -domain('breezewiki.frontendfriendly.xyz'), -domain('bw.hamstro.dev'), -domain('breeze.hostux.net'), -domain('breezewiki.hyperreal.coffee'), -domain('breeze.mint.lgbt'), -domain('breezewiki.nadeko.net'), -domain('nerd.whatever.social'), -domain('breeze.nohost.network'), -domain('z.opnxng.com'), -domain('bw.projectsegfau.lt'), -domain('breezewiki.pussthecat.org'), -domain('bw.vern.cc'), -domain('breeze.whateveritworks.org'), -domain('breezewiki.woodland.cafe') { - @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]; - - .indie-wiki-banner { - background: @mantle; - color: @text; - ::selection { - background-color: fade(@accent-color, 30%); - } - } - .indie-wiki-banner-exit { - color: @text; - } - .indie-wiki-banner-link { - color: @blue; - - &:hover { - color: @sky; - } - } - .indie-wiki-banner-disabled { - color: @subtext0; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/indie-wiki-buddy/catppuccin.user.less b/styles/indie-wiki-buddy/catppuccin.user.less new file mode 100644 index 0000000000..16b1afc1cb --- /dev/null +++ b/styles/indie-wiki-buddy/catppuccin.user.less @@ -0,0 +1,177 @@ +/* ==UserStyle== +@name Indie Wiki Buddy Catppuccin +@namespace github.com/catppuccin/userstyles/styles/indie-wiki-buddy +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/indie-wiki-buddy +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/indie-wiki-buddy/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aindie-wiki-buddy +@description Soothing pastel theme for Indie Wiki Buddy +@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== */ + +/* +To get a list of supported search engines, run the following command: +curl -s https://raw.githubusercontent.com/KevinPayravi/indie-wiki-buddy/main/manifest-firefox.json | python -c "import sys, json;print(*json.loads(sys.stdin.read())['content_scripts'][2]['matches'], sep='\n')" +*/ +@-moz-document domain("bing.com"), + domain("search.brave.com"), + domain("duckduckgo.com"), + domain("ecosia.org"), + domain("kagi.com"), + domain("qwant.com"), + domain("search.yahoo.com"), + domain("startpage.com"), + domain("ya.ru"), + regexp("^https?://(www\\.)?google\\..*"), + regexp("^https?://(www\\.)?yandex\\..*") { + @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]; + + .iwb-new-link button { + color: @base; + background: @blue; + &:hover { + background: @sky; + } + } + .iwb-result-controls { + color: @text !important; + } + } +} + +@-moz-document domain("fandom.com"), + domain("fextralife.com"), + domain("neoseeker.com"), + domain("breezewiki.com"), + domain("antifandom.com"), + domain("bw.artemislena.eu"), + domain("breezewiki.catsarch.com"), + domain("breezewiki.esmailelbob.xyz"), + domain("breezewiki.frontendfriendly.xyz"), + domain("bw.hamstro.dev"), + domain("breeze.hostux.net"), + domain("breezewiki.hyperreal.coffee"), + domain("breeze.mint.lgbt"), + domain("breezewiki.nadeko.net"), + domain("nerd.whatever.social"), + domain("breeze.nohost.network"), + domain("z.opnxng.com"), + domain("bw.projectsegfau.lt"), + domain("breezewiki.pussthecat.org"), + domain("bw.vern.cc"), + domain("breeze.whateveritworks.org"), + domain("breezewiki.woodland.cafe") { + @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]; + + .indie-wiki-banner { + background: @mantle; + color: @text; + ::selection { + background-color: fade(@accent-color, 30%); + } + } + .indie-wiki-banner-exit { + color: @text; + } + .indie-wiki-banner-link { + color: @blue; + + &:hover { + color: @sky; + } + } + .indie-wiki-banner-disabled { + color: @subtext0; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/inoreader/catppuccin.user.css b/styles/inoreader/catppuccin.user.css index c8b8a2019f..49d50df1de 100644 --- a/styles/inoreader/catppuccin.user.css +++ b/styles/inoreader/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name inoreader Catppuccin +@name inoreader Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/inoreader @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/inoreader -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/inoreader/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/inoreader/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ainoreader @description Soothing pastel theme for inoreader @author Catppuccin @@ -13,624 +13,4 @@ @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('inoreader.com') { - @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, - .inno_dialog, - .reader_pane_view_style_1 .article_subscribed, - .reader_pane_view_style_4 .article_subscribed, - .inno_toolbar_switcher_button_active, - .dashboard_wrapper, - #sb_tree_part, - #sb_menu_icon, - #sb_tp_search_overlay, - #feed_searcher, - #wraper.tree_pane_docked #feed_searcher, - #preferences_main_wrapper, - .reader_pane_view_style_0 .article_expanded:hover, - div.article_expanded, - .article, - .article_expanded - .article_footer_placeholder_middle.footerized.article_footer_placeholder_middle_sticky, - #article_dialog .article_footer_placeholder_top, - #three_way_contents .article_footer_placeholder_top, - .article_footer, - .pricing_plans_row_sticky, - .searcher_top_bar_wrapper { - background-color: @base; - } - - body, - .article_unreaded .article_tile_title, - .icon16, - .icon14, - .icon19, - .h6, - .article_unreaded .article_magazine_content, - .article_unreaded .article_magazine_title, - #sb_tp_dock, - .inno_toolbar_button, - #sb_rp_heading, - .article_header_text, - .article_content, - .profile_menu_themes_heading, - .inno_toolbar_switcher_button:hover, - #sb_rp_heading span.icon16, - .sub_engagement_number, - .sub_folder, - .inline_folders_editor, - .tf, - .top_bar_tab, - .top_bar_tab .icon16, - #tree_pane .icon16, - #add_content_simulated_button .plus_img, - a:link, - .h4[class*="icon-"], - h4[class*="icon-"], - .inno_tabs_wrapper .inno_tabs_header .inno_tabs_tab a:link, - .inno_tabs_wrapper .inno_tabs_header .inno_tabs_tab a:active, - .inno_tabs_wrapper .inno_tabs_header .inno_tabs_tab a:visited, - #tree_pane .plus_img { - color: @text; - } - a.text-color, - a.nav-item-btn, - .icon-arrow_collapse { - color: @text !important; - } - - .progress { - --bs-progress-bar-color: @accent-color; - --bs-progress-bar-bg: @accent-color; - --bs-bar-bg: @overlay1; - } - - .text-muted-color { - color: @subtext0 !important; - } - - #tree_pane, - #reader_pane, - #feeds_nav, - .tree_ad, - .article_full_contents, - .article_unreaded, - .search_empty_state_mask, - .library_wrapper_outer, - .teams_presentation_wrapper, - .article_subscribed, - .tr1, - .search_width_constraint, - .bg-white { - background-color: @base !important; - color: @text; - } - - .st_usage_slider_outer { - background-color: @text; - } - - .st_usage_slider_inner, - #text-menu .dropdown-menu, - .article_unreaded .article_unread_dot .article_unread_dot_internal { - background-color: @accent-color; - } - - .bg-primary { - background-color: @accent-color !important; - } - - #tree_pane .parent_div_inner_selected .plus_img { - color: @accent-color; - } - - .active-url .item-name, - .active-url span[class^="icon-"].h4, - .active-url i[class^="icon-"].h4 { - color: @accent-color !important; - } - - .icon-logo_circle { - color: @crust !important; - } - - #tabs_pane .nav-item a i, - #tabs_pane .nav-item a span, - #tabs_pane #bottom_tabs .nav-item a i { - color: @crust; - } - - #tabs_pane .tabs-counter, - #tabs_pane #bottom_tabs .nav-item a i.icon-full { - color: @text !important; - background-color: @base !important; - } - - #hint-pref { - fill: @accent-color; - } - - .article_footer_buttons.icon-article_topbar_read_later_full, - #reader_pane .ar .article_btns a .h4.icon-saved, - #reader_pane .ar .article_btns a .h4.star_full, - span.icon-yellow, - i.icon-yellow { - color: @yellow; - } - - .bg-alt { - background: @yellow !important; - } - - .btn.btn-alt { - background-color: @yellow; - border-color: @yellow; - } - - .bg-success-color.darker { - background-color: @green !important; - } - - .alert_state { - background-color: @red; - } - - .icon-mark-as-read-single-unread { - color: @blue !important; - } - - .tabs-counter { - background-color: @accent-color !important; - outline-color: @accent-color !important; - color: @mantle; - } - - .active-tab-feeds:not(.active-overlay) #tabs_pane [data-tab="feeds"] i, - .active-tab-dashboard:not(.active-overlay) - #tabs_pane - [data-tab="dashboard"] - i, - .active-tab-saved:not(.active-overlay) #tabs_pane [data-tab="saved"] i, - .active-tab-automation:not(.active-overlay) - #tabs_pane - [data-tab="automation"] - i, - .active-tab-search:not(.active-overlay) #tabs_pane [data-tab="search"] i, - .active-tab-add_feed:not(.active-overlay) - #tabs_pane - [data-tab="add_feed"] - i, - .active-tab-notifications:not(.active-overlay) - #tabs_pane - [data-tab="notifications"] - i, - .active-tab-preferences:not(.active-overlay) - #tabs_pane - [data-tab="preferences"] - i { - background-color: @base; - color: @text !important; - } - - .preferences_main_button, - .preferences_billing_feature_main { - background-color: @mantle; - border-color: @surface0; - } - - .dashboard_gadgets, - .dashboard_gadgets .content, - .library_section_main_article, - .library_secondary_article, - .library_section_list_articles { - background-color: @mantle; - } - - #header_pane, - .search_context_dropdown.open { - background-color: @base !important; - color: @text; - } - - .dropdown-menu, - .ino-autocomplete { - background-color: @mantle; - } - - .dropdown-menu .dropdown-header { - color: @text; - } - - .dropdown-menu .dropdown-item, - a:visited { - color: @subtext0; - } - - .dropdown-menu .dropdown-item:hover, - .dropdown-menu .dropdown-item:focus, - #tree_pane .parent_div_inner:hover, - #tree_pane .parent_div_inner:active, - #tree_pane .parent_div_inner:focus, - .search_context_dropdown.open .search_context_filter:hover, - .nav.nav-hover .nav-item:hover, - .lang_bubble:hover, - #tabs_pane .toggle_sidebar_btn i { - background-color: @surface0; - } - - .dropdown-menu .dropdown-item:active { - background-color: @surface0; - color: @accent-color; - } - - .dropdown-menu .dropdown-item.active, - #tree_pane .parent_div_inner_selected, - #tree_pane .parent_div_inner_selected:hover, - #tree_pane .parent_div_inner_selected a, - .search_context_dropdown.open .search_context_filter.active, - .nav.nav-hover .active-url, - .lang_bubble.lang_bubble_current { - background-color: @surface1; - color: @accent-color; - } - - .btn.btn-outline-text { - color: @text; - border-color: @subtext0; - } - - .btn.btn-primary, - .btn.btn-primary:hover { - color: @text; - background-color: @accent-color; - border-color: @accent-color; - } - - .dropdown-menu-active, - .btn.btn-outline-text:hover { - color: @text; - border-color: @subtext0; - background-color: @surface0; - } - - input[type="text"]:focus, - input[type="checkbox"]:focus + label, - input[type="checkbox"]:active + label, - input[type="button"]:focus, - input[type="button"]:active, - textarea:focus, - select:focus, - button:focus, - input[type="password"]:focus, - input[type="email"]:focus { - box-shadow: 0 0 3px @accent-color !important; - border-color: @accent-color !important; - } - - input[type="text"], - input[type="number"], - input[type="password"], - select, - textarea { - background-color: @base !important; - color: @text !important; - border-color: @subtext0; - } - - .graylink_darker, - .article_short_contents { - color: @subtext0; - } - - div.article_magazine.article_current, - div.article_magazine.article_bulk_selected { - box-shadow: 0 0 0 1px @subtext0; - } - .view_style_3 #reader_pane .ar.article_current .article_tile_picture { - box-shadow: - inset 3px 3px 0 -2px @accent-color, - inset -3px 2px 0 -2px @accent-color; - } - .view_style_3 #reader_pane .ar.article_current { - box-shadow: inset 0 0 0 1px @accent-color; - } - - .view_style_4 #reader_pane .ar.article_current { - box-shadow: 0 0 0 1px @accent-color; - } - .view_style_2 #reader_pane .ar.article_current_3way, - .view_style_2 #reader_pane .ar.article_expanded { - box-shadow: none; - border-color: @text; - } - - .article_magazine_content { - color: @overlay0; - } - - .article_magazine_title { - color: @overlay1; - } - - .inno_dialog_modal_overlay { - background-color: @overlay2; - } - - .subscriptions_legend, - .preferences_main_button_icon span, - a.bluelink:link, - .bluelink, - .inno_tabs_tab_current, - .inno_tabs_tab_current:hover, - .inno_toolbar_button_menu_item_inactive .inno_toolbar_button_menu_icon, - .inno_toolbar_button_menu_icon, - #preferences_subscriptions_table span.icon_active, - .text-primary, - .inno_tabs_wrapper - .inno_tabs_header - .inno_tabs_tab.inno_tabs_tab_current - a:link, - .inno_tabs_wrapper - .inno_tabs_header - .inno_tabs_tab.inno_tabs_tab_current - a:active, - .inno_tabs_wrapper - .inno_tabs_header - .inno_tabs_tab.inno_tabs_tab_current - a:visited { - color: @accent-color !important; - } - - #new_articles_overlay { - color: @accent-color; - background-color: @base; - } - - input.apple-switch:checked { - background-color: @accent-color; - border-color: @accent-color; - } - - .add_content_simulated_button.expanded { - background-color: @surface0; - box-shadow: inset 0 -1px 0 0 @accent-color; - } - - .inno_toolbar_button_menu, - #reader_pane .info_state, - .inno_dialog_modal .info_state, - .preferences_interface_helper, - .sub_folder { - background-color: @mantle; - color: @text; - } - - #profile_menu_themes_wrapper { - display: none; - } - - #sb_reading_part, - #wraper.tree_pane_docked #sb_tree_part { - box-shadow: none; - } - - .whitebutton { - background-color: @base; - color: @text; - border-color: @surface0; - } - - .bluebutton, - .inno_dialog .inno_dialog_buttonbar_button:nth-child(1) { - background-color: @accent-color; - color: @crust; - border-style: none; - } - - .inno_dialog .inno_dialog_buttonbar_button:nth-child(1):hover:enabled { - background-color: @accent-color; - border-color: @accent-color; - } - - .inno_dialog_buttonbar_button { - background-color: @base; - color: @text; - } - - .icon_green { - color: @green; - } - - .reader_pane_view_style_0 .article_unreaded:hover, - .reader_pane_view_style_2 .article_unreaded:hover, - .reader_pane_view_style_2 .article:hover, - .sd .share_wrapper .icon16:hover, - .pricing_feature_row:nth-child(odd), - .pricing_table_row .pricing_table_leftmost_cell, - .article_footer .share_wrapper:hover { - background-color: @surface0; - } - - .add_content_simulated_button_menu, - .profile_menu_plan_badge { - background-color: @surface0; - border-color: @surface0; - color: @text; - } - - .catalog_follow_featured_collection, - .catalog_sub_section_title, - .search_feed_wrapper { - border-color: @surface0; - } - - .border-bottom, - .header-shadow { - border-color: @text; - } - - .pricing_teams_hero { - background-color: @surface0; - background-image: none; - } - - .parent_div_inner:hover, - .inno_toolbar_button_menu_item:hover, - .preferences_profile_wrapper, - code, - pre { - background-color: @surface0; - color: @text; - } - - .preferences_profile_plan_wrapper, - .st_subheader, - .catalog_sub_section_tab.catalog_sub_section_tab_current, - .catalog_sub_section_tab:hover { - background: @surface1; - color: @text; - } - - .article_footer .article_footer_main_buttons .article_footer_buttons:hover, - .article_footer - .article_footer_main_buttons - .article_footer_buttons_current, - .article_footer .icon-article_topbar_more_menu:hover, - .st_header, - input[type="radio"].filter_radio:checked + label, - input[type="checkbox"].filter_radio:checked + label { - background-color: @surface2; - color: @text; - } - - input[type="checkbox"].form-check-input:checked, - input[type="radio"].form-check-input:checked { - background-color: @accent-color; - border-color: @accent-color; - } - - .normal_dim { - color: @subtext1; - } - - .parent_div_inner_selected, - #preferences_header, - #tabs_pane, - .add_content_simulated_button_menu_line_item:hover { - background-color: @accent-color; - color: @mantle; - } - - #preferences_header .icon16, - #preferences_dialog_close_button span.icon16 { - color: @mantle; - } - - .article_tile.article_unreaded.article_expanded { - background-color: @base; - box-shadow: - 0 1px 8px @mantle, - 0 1px 3px @mantle; - } - - div.article_current_3way { - box-shadow: - inset 0 0 0 1 @accent-color, - inset 5px 0 0 0 @accent-color; - } - - div.article_tile.article_expanded { - border-color: @mantle; - } - - .article_footer_placeholder_top .article_footer, - .inno_tabs_header, - .gadget_overview_feed { - border-color: @surface2; - } - - .inno_toolbar_switcher:hover .inno_toolbar_switcher_button_active, - .inno_toolbar_switcher:hover .inno_toolbar_switcher_button_active:hover { - color: @accent-color; - background-color: @base; - border-color: @accent-color; - } - - .inno_tabs_tab:hover { - color: @accent-color; - border-color: @accent-color; - } - - #audio_player_nav.is-overlay .tab-content, - #audio_player_nav .media-player.maximized .container, - #notifications_nav.is-overlay .tab-content, - #support_nav.is-overlay .tab-content, - #profile_nav.is-overlay .tab-content { - background-color: @base; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/inoreader/catppuccin.user.less b/styles/inoreader/catppuccin.user.less new file mode 100644 index 0000000000..52700b4497 --- /dev/null +++ b/styles/inoreader/catppuccin.user.less @@ -0,0 +1,630 @@ +/* ==UserStyle== +@name inoreader Catppuccin +@namespace github.com/catppuccin/userstyles/styles/inoreader +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/inoreader +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/inoreader/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ainoreader +@description Soothing pastel theme for inoreader +@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("inoreader.com") { + @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, + .inno_dialog, + .reader_pane_view_style_1 .article_subscribed, + .reader_pane_view_style_4 .article_subscribed, + .inno_toolbar_switcher_button_active, + .dashboard_wrapper, + #sb_tree_part, + #sb_menu_icon, + #sb_tp_search_overlay, + #feed_searcher, + #wraper.tree_pane_docked #feed_searcher, + #preferences_main_wrapper, + .reader_pane_view_style_0 .article_expanded:hover, + div.article_expanded, + .article, + .article_expanded + .article_footer_placeholder_middle.footerized.article_footer_placeholder_middle_sticky, + #article_dialog .article_footer_placeholder_top, + #three_way_contents .article_footer_placeholder_top, + .article_footer, + .pricing_plans_row_sticky, + .searcher_top_bar_wrapper { + background-color: @base; + } + + body, + .article_unreaded .article_tile_title, + .icon16, + .icon14, + .icon19, + .h6, + .article_unreaded .article_magazine_content, + .article_unreaded .article_magazine_title, + #sb_tp_dock, + .inno_toolbar_button, + #sb_rp_heading, + .article_header_text, + .article_content, + .profile_menu_themes_heading, + .inno_toolbar_switcher_button:hover, + #sb_rp_heading span.icon16, + .sub_engagement_number, + .sub_folder, + .inline_folders_editor, + .tf, + .top_bar_tab, + .top_bar_tab .icon16, + #tree_pane .icon16, + #add_content_simulated_button .plus_img, + a:link, + .h4[class*="icon-"], + h4[class*="icon-"], + .inno_tabs_wrapper .inno_tabs_header .inno_tabs_tab a:link, + .inno_tabs_wrapper .inno_tabs_header .inno_tabs_tab a:active, + .inno_tabs_wrapper .inno_tabs_header .inno_tabs_tab a:visited, + #tree_pane .plus_img { + color: @text; + } + a.text-color, + a.nav-item-btn, + .icon-arrow_collapse { + color: @text !important; + } + + .progress { + --bs-progress-bar-color: @accent-color; + --bs-progress-bar-bg: @accent-color; + --bs-bar-bg: @overlay1; + } + + .text-muted-color { + color: @subtext0 !important; + } + + #tree_pane, + #reader_pane, + #feeds_nav, + .tree_ad, + .article_full_contents, + .article_unreaded, + .search_empty_state_mask, + .library_wrapper_outer, + .teams_presentation_wrapper, + .article_subscribed, + .tr1, + .search_width_constraint, + .bg-white { + background-color: @base !important; + color: @text; + } + + .st_usage_slider_outer { + background-color: @text; + } + + .st_usage_slider_inner, + #text-menu .dropdown-menu, + .article_unreaded .article_unread_dot .article_unread_dot_internal { + background-color: @accent-color; + } + + .bg-primary { + background-color: @accent-color !important; + } + + #tree_pane .parent_div_inner_selected .plus_img { + color: @accent-color; + } + + .active-url .item-name, + .active-url span[class^="icon-"].h4, + .active-url i[class^="icon-"].h4 { + color: @accent-color !important; + } + + .icon-logo_circle { + color: @crust !important; + } + + #tabs_pane .nav-item a i, + #tabs_pane .nav-item a span, + #tabs_pane #bottom_tabs .nav-item a i { + color: @crust; + } + + #tabs_pane .tabs-counter, + #tabs_pane #bottom_tabs .nav-item a i.icon-full { + color: @text !important; + background-color: @base !important; + } + + #hint-pref { + fill: @accent-color; + } + + .article_footer_buttons.icon-article_topbar_read_later_full, + #reader_pane .ar .article_btns a .h4.icon-saved, + #reader_pane .ar .article_btns a .h4.star_full, + span.icon-yellow, + i.icon-yellow { + color: @yellow; + } + + .bg-alt { + background: @yellow !important; + } + + .btn.btn-alt { + background-color: @yellow; + border-color: @yellow; + } + + .bg-success-color.darker { + background-color: @green !important; + } + + .alert_state { + background-color: @red; + } + + .icon-mark-as-read-single-unread { + color: @blue !important; + } + + .tabs-counter { + background-color: @accent-color !important; + outline-color: @accent-color !important; + color: @mantle; + } + + .active-tab-feeds:not(.active-overlay) #tabs_pane [data-tab="feeds"] i, + .active-tab-dashboard:not(.active-overlay) + #tabs_pane + [data-tab="dashboard"] + i, + .active-tab-saved:not(.active-overlay) #tabs_pane [data-tab="saved"] i, + .active-tab-automation:not(.active-overlay) + #tabs_pane + [data-tab="automation"] + i, + .active-tab-search:not(.active-overlay) #tabs_pane [data-tab="search"] i, + .active-tab-add_feed:not(.active-overlay) + #tabs_pane + [data-tab="add_feed"] + i, + .active-tab-notifications:not(.active-overlay) + #tabs_pane + [data-tab="notifications"] + i, + .active-tab-preferences:not(.active-overlay) + #tabs_pane + [data-tab="preferences"] + i { + background-color: @base; + color: @text !important; + } + + .preferences_main_button, + .preferences_billing_feature_main { + background-color: @mantle; + border-color: @surface0; + } + + .dashboard_gadgets, + .dashboard_gadgets .content, + .library_section_main_article, + .library_secondary_article, + .library_section_list_articles { + background-color: @mantle; + } + + #header_pane, + .search_context_dropdown.open { + background-color: @base !important; + color: @text; + } + + .dropdown-menu, + .ino-autocomplete { + background-color: @mantle; + } + + .dropdown-menu .dropdown-header { + color: @text; + } + + .dropdown-menu .dropdown-item, + a:visited { + color: @subtext0; + } + + .dropdown-menu .dropdown-item:hover, + .dropdown-menu .dropdown-item:focus, + #tree_pane .parent_div_inner:hover, + #tree_pane .parent_div_inner:active, + #tree_pane .parent_div_inner:focus, + .search_context_dropdown.open .search_context_filter:hover, + .nav.nav-hover .nav-item:hover, + .lang_bubble:hover, + #tabs_pane .toggle_sidebar_btn i { + background-color: @surface0; + } + + .dropdown-menu .dropdown-item:active { + background-color: @surface0; + color: @accent-color; + } + + .dropdown-menu .dropdown-item.active, + #tree_pane .parent_div_inner_selected, + #tree_pane .parent_div_inner_selected:hover, + #tree_pane .parent_div_inner_selected a, + .search_context_dropdown.open .search_context_filter.active, + .nav.nav-hover .active-url, + .lang_bubble.lang_bubble_current { + background-color: @surface1; + color: @accent-color; + } + + .btn.btn-outline-text { + color: @text; + border-color: @subtext0; + } + + .btn.btn-primary, + .btn.btn-primary:hover { + color: @text; + background-color: @accent-color; + border-color: @accent-color; + } + + .dropdown-menu-active, + .btn.btn-outline-text:hover { + color: @text; + border-color: @subtext0; + background-color: @surface0; + } + + input[type="text"]:focus, + input[type="checkbox"]:focus + label, + input[type="checkbox"]:active + label, + input[type="button"]:focus, + input[type="button"]:active, + textarea:focus, + select:focus, + button:focus, + input[type="password"]:focus, + input[type="email"]:focus { + box-shadow: 0 0 3px @accent-color !important; + border-color: @accent-color !important; + } + + input[type="text"], + input[type="number"], + input[type="password"], + select, + textarea { + background-color: @base !important; + color: @text !important; + border-color: @subtext0; + } + + .graylink_darker, + .article_short_contents { + color: @subtext0; + } + + div.article_magazine.article_current, + div.article_magazine.article_bulk_selected { + box-shadow: 0 0 0 1px @subtext0; + } + .view_style_3 #reader_pane .ar.article_current .article_tile_picture { + box-shadow: + inset 3px 3px 0 -2px @accent-color, + inset -3px 2px 0 -2px @accent-color; + } + .view_style_3 #reader_pane .ar.article_current { + box-shadow: inset 0 0 0 1px @accent-color; + } + + .view_style_4 #reader_pane .ar.article_current { + box-shadow: 0 0 0 1px @accent-color; + } + .view_style_2 #reader_pane .ar.article_current_3way, + .view_style_2 #reader_pane .ar.article_expanded { + box-shadow: none; + border-color: @text; + } + + .article_magazine_content { + color: @overlay0; + } + + .article_magazine_title { + color: @overlay1; + } + + .inno_dialog_modal_overlay { + background-color: @overlay2; + } + + .subscriptions_legend, + .preferences_main_button_icon span, + a.bluelink:link, + .bluelink, + .inno_tabs_tab_current, + .inno_tabs_tab_current:hover, + .inno_toolbar_button_menu_item_inactive .inno_toolbar_button_menu_icon, + .inno_toolbar_button_menu_icon, + #preferences_subscriptions_table span.icon_active, + .text-primary, + .inno_tabs_wrapper + .inno_tabs_header + .inno_tabs_tab.inno_tabs_tab_current + a:link, + .inno_tabs_wrapper + .inno_tabs_header + .inno_tabs_tab.inno_tabs_tab_current + a:active, + .inno_tabs_wrapper + .inno_tabs_header + .inno_tabs_tab.inno_tabs_tab_current + a:visited { + color: @accent-color !important; + } + + #new_articles_overlay { + color: @accent-color; + background-color: @base; + } + + input.apple-switch:checked { + background-color: @accent-color; + border-color: @accent-color; + } + + .add_content_simulated_button.expanded { + background-color: @surface0; + box-shadow: inset 0 -1px 0 0 @accent-color; + } + + .inno_toolbar_button_menu, + #reader_pane .info_state, + .inno_dialog_modal .info_state, + .preferences_interface_helper, + .sub_folder { + background-color: @mantle; + color: @text; + } + + #profile_menu_themes_wrapper { + display: none; + } + + #sb_reading_part, + #wraper.tree_pane_docked #sb_tree_part { + box-shadow: none; + } + + .whitebutton { + background-color: @base; + color: @text; + border-color: @surface0; + } + + .bluebutton, + .inno_dialog .inno_dialog_buttonbar_button:nth-child(1) { + background-color: @accent-color; + color: @crust; + border-style: none; + } + + .inno_dialog .inno_dialog_buttonbar_button:nth-child(1):hover:enabled { + background-color: @accent-color; + border-color: @accent-color; + } + + .inno_dialog_buttonbar_button { + background-color: @base; + color: @text; + } + + .icon_green { + color: @green; + } + + .reader_pane_view_style_0 .article_unreaded:hover, + .reader_pane_view_style_2 .article_unreaded:hover, + .reader_pane_view_style_2 .article:hover, + .sd .share_wrapper .icon16:hover, + .pricing_feature_row:nth-child(odd), + .pricing_table_row .pricing_table_leftmost_cell, + .article_footer .share_wrapper:hover { + background-color: @surface0; + } + + .add_content_simulated_button_menu, + .profile_menu_plan_badge { + background-color: @surface0; + border-color: @surface0; + color: @text; + } + + .catalog_follow_featured_collection, + .catalog_sub_section_title, + .search_feed_wrapper { + border-color: @surface0; + } + + .border-bottom, + .header-shadow { + border-color: @text; + } + + .pricing_teams_hero { + background-color: @surface0; + background-image: none; + } + + .parent_div_inner:hover, + .inno_toolbar_button_menu_item:hover, + .preferences_profile_wrapper, + code, + pre { + background-color: @surface0; + color: @text; + } + + .preferences_profile_plan_wrapper, + .st_subheader, + .catalog_sub_section_tab.catalog_sub_section_tab_current, + .catalog_sub_section_tab:hover { + background: @surface1; + color: @text; + } + + .article_footer .article_footer_main_buttons .article_footer_buttons:hover, + .article_footer + .article_footer_main_buttons + .article_footer_buttons_current, + .article_footer .icon-article_topbar_more_menu:hover, + .st_header, + input[type="radio"].filter_radio:checked + label, + input[type="checkbox"].filter_radio:checked + label { + background-color: @surface2; + color: @text; + } + + input[type="checkbox"].form-check-input:checked, + input[type="radio"].form-check-input:checked { + background-color: @accent-color; + border-color: @accent-color; + } + + .normal_dim { + color: @subtext1; + } + + .parent_div_inner_selected, + #preferences_header, + #tabs_pane, + .add_content_simulated_button_menu_line_item:hover { + background-color: @accent-color; + color: @mantle; + } + + #preferences_header .icon16, + #preferences_dialog_close_button span.icon16 { + color: @mantle; + } + + .article_tile.article_unreaded.article_expanded { + background-color: @base; + box-shadow: 0 1px 8px @mantle, 0 1px 3px @mantle; + } + + div.article_current_3way { + box-shadow: inset 0 0 0 1 @accent-color, inset 5px 0 0 0 @accent-color; + } + + div.article_tile.article_expanded { + border-color: @mantle; + } + + .article_footer_placeholder_top .article_footer, + .inno_tabs_header, + .gadget_overview_feed { + border-color: @surface2; + } + + .inno_toolbar_switcher:hover .inno_toolbar_switcher_button_active, + .inno_toolbar_switcher:hover .inno_toolbar_switcher_button_active:hover { + color: @accent-color; + background-color: @base; + border-color: @accent-color; + } + + .inno_tabs_tab:hover { + color: @accent-color; + border-color: @accent-color; + } + + #audio_player_nav.is-overlay .tab-content, + #audio_player_nav .media-player.maximized .container, + #notifications_nav.is-overlay .tab-content, + #support_nav.is-overlay .tab-content, + #profile_nav.is-overlay .tab-content { + background-color: @base; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/instagram/catppuccin.user.css b/styles/instagram/catppuccin.user.css index ef6e1f531c..170bd213de 100644 --- a/styles/instagram/catppuccin.user.css +++ b/styles/instagram/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Instagram Catppuccin +@name Instagram Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/instagram @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/instagram -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/instagram/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/instagram/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ainstagram @description Soothing pastel theme for Instagram @author Catppuccin @@ -13,866 +13,4 @@ @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('instagram.com') { - ._aa4d { - #catppuccin(@darkFlavor, @accentColor); - } - ._aa4c { - #catppuccin(@lightFlavor, @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]; - - @text-filter: @catppuccin[@@lookup][@text-filter]; - @dark-color: if(@lookup = latte, @text, @crust); - @light-color: if(@lookup = latte, @crust, @text); - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - &, - .x1qjc9v5, - .x9f619, - .x78zum5, - .xdt5ytf, - .x1iyjqo2, - .xl56j7k { - --web-always-black: #rgbify(@dark-color) []; - --ig-primary-icon: #rgbify(@text) []; - --web-always-white: #rgbify(@light-color) []; - --always-white: #rgbify(@light-color) []; - --overlay-alpha-80: fadeout(@dark-color, 50%); - --grey-9: #rgbify(@crust) []; - --ig-primary-background: #rgbify(@base) []; - --ig-secondary-background: #rgbify(@surface0) []; - --ig-banner-background: #rgbify(@crust) []; - --ig-highlight-background: #rgbify(@surface0) []; - --ig-elevated-background: #rgbify(@crust) []; - --ig-elevated-highlight-background: #rgbify(@surface0) []; - --ig-hover-overlay: #rgbify(@text) [], 0.1; - --hover-overlay: fadeout(@surface0, 80%); - --ig-text-on-color: #rgbify(@crust) []; - --ig-badge: #rgbify(@accent-color) []; - --ig-primary-button: #rgbify(@accent-color) []; - --ig-primary-button-hover: fadeout(@accent-color, 20%); - --ig-secondary-button-background: #rgbify(@surface0) []; - --ig-secondary-button-hover: #rgbify(@surface1) []; - --ig-secondary-button: #rgbify(@text) []; - --ig-primary-text: #rgbify(@text) []; - --ig-secondary-text: #rgbify(@subtext0) []; - --ig-tertiary-text: #rgbify(@subtext0) []; - --wbloks-primary-text: @text; - --ig-text-on-media: #rgbify(@text) []; - --ig-separator: #rgbify(@surface0) []; - --chat-admin-text-color: #rgbify (@subtext0) []; - --ig-elevated-separator: #rgbify(@surface0) []; - --post-separator: #rgbify(@overlay0) []; - --ig-stroke: #rgbify(@overlay0) []; - --grey-2: #rgbify(@overlay0) []; - --ig-link: #rgbify(@accent-color) []; - --ig-error-or-destructive: #rgbify(@red) []; - --ig-success: #rgbify(@green) []; - --blue-2: #rgbify(@blue) []; - --ig-close-friends-refreshed: #rgbify(@green) []; - --ig-text-input-border-hover-prism: #rgbify(@surface1) []; - --ig-toggle-outline-prism: #rgbify(@text) []; - --ig-toggle-background-on-prism: #rgbify(@text) []; - --ig-stroke-prism: #rgbify(@crust) []; - --barcelona-logo: #rgbify (@text) []; - --ig-bubble-background: #rgbify (@surface1) []; - --ig-tertiary-icon: #rgbify (@accent-color) []; - --always-dark-overlay: @accent-color; - --secondary-text: @subtext0; - --primary-text: @text; - --primary-icon: @accent-color; - --primary-button-text: @mantle !important; - --primary-button: @blue !important; - scrollbar-color: @accent-color @crust; - } - #splash-screen { - background-color: @base !important; - } - - /* Sidebar */ - .x1xgvd2v { - background-color: @crust !important; - &[style="transform: translateX(0px);"] { - background-color: @mantle !important; - } - } - .x1zvrr1 { - background-color: @mantle; - } - svg[aria-label="Loading..."] { - stroke: @text; - } - - /* Story background */ - .x5qyhuo { - background-color: @base; - } - - /* Story progress bar */ - ._ac3p { - background-color: @accent-color !important; - } - - /* close friends story things */ - .x9bdzbf { - color: @text !important; - } - - /* Story seen / not seen ring */ - button:has(canvas + span > img[alt$="'s profile picture"]) { - canvas { - display: none; - } - - span { - outline-style: solid; - outline-offset: 0.15rem; - } - - &[aria-label^="Story by"][aria-label$="not seen"] span { - outline-color: @accent-color; - outline-width: 0.2rem; - } - &[aria-label^="Story by"]:not([aria-label$="not seen"]) span { - outline-color: @surface2; - outline-width: 0.075rem; - } - } - - /* Posts */ - ._aggc { - background-color: @mantle; - border-color: @overlay0 !important; - border-radius: var(--modal-border-radius); - box-shadow: 0 3px 5px -1px fadeout(@dark-color, 20); - box-sizing: border-box; - } - ._aatc ._aasi, - ._ae1i, - ._aggc textarea.xvbhtw8 { - background-color: @mantle; - } - - /* Icons */ - svg[aria-label="Unlike"] { - fill: @accent-color; - } - svg[aria-label="Close"] { - color: @text; - } - svg[aria-label="Verified"] { - fill: @accent-color; - } - - /* new post thingy */ - ._aa1q._aa1q { - color: @text !important; - } - - /* sumting wong's popup box */ - .x879a55, - .x7ywyr2 { - background-color: @surface1 !important; - } - - /* Share box */ - .xzloghq { - background-color: @surface0; - color: @text !important; - &:hover { - color: @mantle !important; - background-color: @accent-color !important; - } - } - .xk5f4mz { - background-color: @mantle; - &:hover { - background-color: @accent-color; - } - } - .x3nfvp2 { - color: @text !important; - &:hover { - color: @crust; - } - } - - /* reel icon */ - .xq3z1fi { - color: @accent-color !important; - } - - /* Toggle sliders */ - .x1r7x56h { - background-color: @accent-color; - } - .x100vrsf { - background-color: @surface0; - } - - .x1psfjxj { - background-color: @mantle; - } - span[data-bloks-name="bk.components.TextSpan"] { - color: @accent-color !important; - } - .xs7f9wi { - background-color: @mantle !important; - } - .x1d72o { - background-color: @surface0; - } - /* Log In With Facebook text */ - ._ab37 { - color: @blue; - } - /* Excluded: - _9ys7, _9_1f, _9ys8 (verified icon) */ - [style*='background-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png")'], - ._9zkj, - ._a3ds, - ._a3dt, - ._a3du, - ._a3dv, - ._a3dw, - ._9-b3, - ._9znl, - ._9z-6, - ._a3dx, - ._a3dy, - ._a3dz, - ._a3d-, - ._a3d_, - ._a3e0, - ._9zm4, - ._a3e1, - ._a3e2, - ._a3e3, - ._a3e4, - ._a3e5, - ._a3e6, - ._a3e7, - ._a3e8, - ._a3e9, - ._a3ea, - ._9_57, - ._9_n5, - ._9-y3, - ._a3eb, - ._a3ec, - ._a3ed, - ._a3ee, - ._9zlu, - ._9-yp, - ._a3ef, - ._a3eg, - ._9_wm, - ._a3eh, - ._a3ei, - ._9-j_, - ._a3ej, - ._a3ek, - ._9_ij, - ._9_d_, - ._9_e1, - ._9-mm, - ._9_cx, - ._9zm0, - ._9zfi, - ._9-ub, - ._a3el, - ._9-7-, - ._9-1a, - ._a3em, - ._9zrp, - ._a3en, - ._9zz9, - ._a3eo, - ._9zmr, - ._9-8d, - ._9zhi, - ._a3ep, - ._9zs0, - ._9-j-, - ._a3eq, - ._9zli, - ._9_4y, - ._9zm2, - ._9zfj, - ._9zlg, - ._a3er, - ._9-lv, - ._9_ug, - ._9_sh, - ._9_sj, - ._9-k0, - ._9z-c, - ._9_35, - ._9_hh, - ._a3es, - ._a3et, - ._a3eu, - ._9-v-, - ._9_4d, - ._9zlh, - ._a3ev, - ._a3ew, - ._a3ex, - ._a3ey, - ._9_7m, - ._9_fv, - ._a3ez, - ._9-zf, - ._9-zg, - ._9-ze, - ._a9fa, - ._9-zh, - ._9-zi, - ._9-zj, - ._9-zk, - ._9-zl, - ._9-zm, - ._9-zn, - ._9-zo, - ._9-zp, - ._9-zq, - ._9-zr, - ._9-zs, - ._9-zt, - ._a3op, - ._a3oq, - ._9-zu, - ._9-zv, - ._9-zw, - ._9-zx, - ._9-zy, - ._9-zz, - ._9-z-, - ._a3or, - ._a3ot, - ._a3os, - ._9zs1, - ._9zs2, - ._9-z_, - ._9--0, - ._9--1, - ._9--2, - ._9--3, - ._9--4, - ._9--5, - ._9--6, - ._9--7, - ._9--f, - ._9--8, - ._9--9, - ._9--a, - ._9--b, - ._9--c, - ._9--d, - ._9--e, - ._a3ou, - ._9--g, - ._9--h, - ._9--i, - ._9--j, - ._9--l, - ._9--k, - ._9--m, - ._9--n, - ._9--o, - ._9--p, - ._9--q, - ._a3ov, - ._9--s, - ._9--r, - ._9--t, - ._9--u, - ._9--v, - ._9--x, - ._9--y, - ._9--w, - ._9--z, - ._9--_, - ._9-_0, - ._9-_1, - ._9-_2, - ._9-_3, - ._9---, - ._9-_4, - ._9-_5, - ._9-_6, - ._9-_7, - ._a3wy, - ._9-_8, - ._9-_9, - ._a3ow, - ._9-_a, - ._9-_b, - ._9-_c, - ._9-_d, - ._9-_e, - ._9-_f, - ._9-_g, - ._9-_h, - ._9-_i, - ._9-_j, - ._9-_k, - ._9-_l, - ._9-_m, - ._9-_n, - ._9-_o, - ._a3ox, - ._9-_p, - ._9-_q, - ._a9fb, - ._9-_t, - ._9-_r, - ._9-_s, - ._a93g, - ._9-_u, - ._9-_v, - ._a9fc, - ._9-_w, - ._9-_x, - ._9-_y, - ._9-_z, - ._9-_-, - ._9-__, - ._9_00, - ._a3oy, - ._9_01, - ._9_02, - ._9_03, - ._9_04, - ._9_05, - ._9_08, - ._9_09, - ._9_07, - ._9_06, - ._9_0a, - ._9_0b, - ._9_0c, - ._9_0d, - ._9_0e, - ._9_0f, - ._9_0g, - ._a93h, - ._9_0h, - ._9_0i, - ._9_0j, - ._9_0k, - ._aepo, - ._9_0l, - ._9_0m, - ._9_0n, - ._9_0o, - ._9_0p, - ._a3oz, - ._a93l, - ._9_0r, - ._9_0s, - ._a7tk, - ._9_0q, - ._a3o-, - ._9_0t, - ._9_0v, - ._9_0u, - ._a9ej, - ._9_0w, - ._9_0x, - ._9_0y, - ._9_0z, - ._9_0_, - ._9_0-, - ._9_10, - ._9_11, - ._9_12, - ._9_13, - ._9_14, - ._9_15, - ._a3o_, - ._9_18, - ._9_19, - ._9_1a, - ._9_1e, - ._9_1b, - ._9_1c, - ._9_1d, - ._9_16, - ._9_17, - ._a3p0, - ._9_1g, - ._9_1i, - ._9_1h, - ._9_1j, - ._9_1k, - ._9_1l, - ._9_1m, - ._a9pw { - filter: @text-filter; - } - - /* Custom icons */ - @instagram_gradient: radial-gradient( - circle at 30% 107%, - @yellow 0%, - @yellow 5%, - @peach 45%, - @mauve 60%, - @blue 90% - ); - /* Instagram text logo */ - [style*="background-image: url(\"https://static.cdninstagram.com/rsrc.php/v3/yU/r/H5Bq7ru-y9E.png\");"] - { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - background-position: -3px -7px !important; - background-size: unset !important; - } - /* 2fa lock icon */ - [aria-label="Two factor authentication lock icon"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - /* "All caught up" icon */ - img[src="/images/instagram/xig/web/illo-confirm-refresh-light.png"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - [style*='background-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png")'] - { - /* No photo icon */ - &[style*="background-position: 0px -97px"] { - filter: none; - background: @mauve !important; - background: @instagram_gradient !important; - mask-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png"); - mask-position: 0 -97px; - } - - /* Private page icon */ - &[style*="background-position: -49px -97px"] { - filter: none; - background: @mauve !important; - background: @instagram_gradient !important; - mask-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png"); - mask-position: -49px -97px; - } - - &[style*="background-position: -49px 0px"] { - filter: none; - background: @mauve !important; - background: @instagram_gradient !important; - mask-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png"); - mask-position: -49px 0; - } - } - - /* Post swipe icons */ - ._aaqh { - background-color: @surface0; - } - - /* Inside primary buttons */ - .xzloghq, - ._acas:not(._acao) { - &, - svg { - color: @crust; - fill: @mantle; - } - } - ._acas:not(._acao):hover { - background-color: @surface0 !important; - color: @accent-color !important; - } - - /* Secondary buttons */ - .x1gjpkn9, - ._acat, - ._acap { - &, - a& { - &, - &:visited { - color: @text; - } - } - } - - /* Profile banner */ - div:has(> .x1mu97ne) { - background-color: @crust; - border-color: @overlay0; - box-shadow: 0 10px 35px 2px fadeout(@dark-color, 0.7); - } - - /* Dialog overlay */ - .x7r02ix[role="dialog"] { - box-shadow: 0 5px 10px 0 fadeout(@dark-color, 0.5); - } - - /* Settings */ - ._ab81 { - background-color: @mantle; - } - ._ab85, - ._ab6i, - ._ab85 .xvbhtw8, - ._aav4 { - background-color: @crust; - } - /* Settings saved toast */ - ._abmp { - color: @text; - } - - /* Bloks */ - .wbloks_1[data-bloks-name="bk.components.Collection"] { - background-color: @base !important; - } - div[data-bloks-name="bk.components.Flexbox"], - .wbloks_1[data-bloks-name="bk.components.Flexbox"] { - /* Radios have left padding */ - padding-left: 0 !important; - - /* The heading */ - &[style*="background: rgb(0\, 0\, 0)"], - &[style*="background: rgb(255\, 255\, 255)"] { - background-color: @base !important; - } - - /* Radios */ - &[style*="border-radius: 10.5px"], - &[style*="border-radius: 12px"], - &[style*="border-radius: 4px"] { - /* Selected radio */ - &[style*="background: rgb(0\, 149\, 246)"] { - background-color: @accent-color !important; - } - - /* Not selected radio */ - &[style*="background: rgb(219\, 219\, 219)"], - &[style*="background: rgb(38\, 38\, 38)"], - &[style*="background: rgb(54\, 54\, 54)"], - &[style*="background: rgb(255\, 255\, 255)"] { - background-color: @surface0 !important; - } - } - - /* That "border" */ - &[style*="background: rgb(38\, 38\, 38)"] { - display: none; - } - } - - span[data-bloks-name="bk.components.TextSpan"], - span[data-bloks-name="bk.components.Text"] { - &[style*="color: rgb(250\, 250\, 250)"], - &[style*="color: rgb(224\, 241\, 255)"], - &[style*="color: rgb(0\, 55\, 107)"], - &[style*="color: rgb(38\, 38\, 38)"] { - color: @text !important; - } - - &[style*="color: rgb(142\, 142\, 142)"] { - color: @subtext0 !important; - } - } - - /* Map pop-ups */ - .leaflet-popup-content-wrapper, - .leaflet-popup-tip { - background-color: @mantle; - box-shadow: 0 5px 15px fadeout(@dark-color, 0.4); - - * { - color: @text !important; - } - } - - /* Scrollbar */ - ::-webkit-scrollbar { - background-color: @crust; - } - - ::-webkit-scrollbar-thumb { - background-color: @accent-color; - border-radius: 10px; - } - } -} - -@-moz-document regexp('^.*instagram.com/direct.*') { - ._aa4d { - #catppuccin(@darkFlavor, @accentColor); - } - ._aa4c { - #catppuccin(@lightFlavor, @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]; - - .x11jlvup { - --chat-outgoing-message-bubble-background-color: fade(@blue, 80%); - } - .x1n2onr6 { - --chat-incoming-message-bubble-background-color: @surface0; - } - - /* Chat background */ - .xnz67gz { - background-color: @base; - } - /* messages you've sent */ - .xyk4ms5 { - color: @crust !important; - } - /* sidebar */ - .xvbhtw8 { - background-color: @mantle; - } - .x186z157, - .xk50ysn, - .xi81zsa { - color: @subtext0 !important; - } - - /* New Chat Button */ - .xk5f4mz { - background-color: @surface0; - } - - /* Chat button */ - .x1i10hfl:hover { - color: @text; - } - .x1bvjpef { - color: @crust; - } - .x1bvjpef:hover { - color: lighten(@accent-color, 5%); - } - - /* notes */ - .xsnw5ke, - .x3zg9eu::after { - background-color: @surface0 !important; - } - .x103n6ev, - .xzxgvzf { - background-image: linear-gradient( - -90deg, - fade(@surface0, 30%), - fade(@surface0, 100%) - ); - } - - /* explicit music icon in notes */ - .x1cp0k07 { - color: @text; - } - } -} - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@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; - @text-filter: brightness(0) saturate(100%) invert(28%) sepia(17%) saturate(835%) hue-rotate(196deg) brightness(97%) contrast(85%); - }; - @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; - @text-filter: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1519%) hue-rotate(192deg) brightness(100%) contrast(93%); - }; - @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; - @text-filter: brightness(0) saturate(100%) invert(80%) sepia(18%) saturate(377%) hue-rotate(192deg) brightness(103%) contrast(92%); - }; - @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; - @text-filter: brightness(0) saturate(100%) invert(85%) sepia(6%) saturate(1356%) hue-rotate(194deg) brightness(103%) contrast(91%); - }; -} - -// vim:ft=less +==/UserStyle== */ \ No newline at end of file diff --git a/styles/instagram/catppuccin.user.less b/styles/instagram/catppuccin.user.less new file mode 100644 index 0000000000..7b04e9fc3f --- /dev/null +++ b/styles/instagram/catppuccin.user.less @@ -0,0 +1,873 @@ +/* ==UserStyle== +@name Instagram Catppuccin +@namespace github.com/catppuccin/userstyles/styles/instagram +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/instagram +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/instagram/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ainstagram +@description Soothing pastel theme for Instagram +@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("instagram.com") { + ._aa4d { + #catppuccin(@darkFlavor, @accentColor); + } + ._aa4c { + #catppuccin(@lightFlavor, @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]; + + @text-filter: @catppuccin[@@lookup][@text-filter]; + @dark-color: if(@lookup = latte, @text, @crust); + @light-color: if(@lookup = latte, @crust, @text); + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + &, + .x1qjc9v5, + .x9f619, + .x78zum5, + .xdt5ytf, + .x1iyjqo2, + .xl56j7k { + --web-always-black: #rgbify(@dark-color)[]; + --ig-primary-icon: #rgbify(@text)[]; + --web-always-white: #rgbify(@light-color)[]; + --always-white: #rgbify(@light-color)[]; + --overlay-alpha-80: fadeout(@dark-color, 50%); + --grey-9: #rgbify(@crust)[]; + --ig-primary-background: #rgbify(@base)[]; + --ig-secondary-background: #rgbify(@surface0)[]; + --ig-banner-background: #rgbify(@crust)[]; + --ig-highlight-background: #rgbify(@surface0)[]; + --ig-elevated-background: #rgbify(@crust)[]; + --ig-elevated-highlight-background: #rgbify(@surface0)[]; + --ig-hover-overlay: #rgbify(@text)[], 0.1; + --hover-overlay: fadeout(@surface0, 80%); + --ig-text-on-color: #rgbify(@crust)[]; + --ig-badge: #rgbify(@accent-color)[]; + --ig-primary-button: #rgbify(@accent-color)[]; + --ig-primary-button-hover: fadeout(@accent-color, 20%); + --ig-secondary-button-background: #rgbify(@surface0)[]; + --ig-secondary-button-hover: #rgbify(@surface1)[]; + --ig-secondary-button: #rgbify(@text)[]; + --ig-primary-text: #rgbify(@text)[]; + --ig-secondary-text: #rgbify(@subtext0)[]; + --ig-tertiary-text: #rgbify(@subtext0)[]; + --wbloks-primary-text: @text; + --ig-text-on-media: #rgbify(@text)[]; + --ig-separator: #rgbify(@surface0)[]; + --chat-admin-text-color: #rgbify(@subtext0)[]; + --ig-elevated-separator: #rgbify(@surface0)[]; + --post-separator: #rgbify(@overlay0)[]; + --ig-stroke: #rgbify(@overlay0)[]; + --grey-2: #rgbify(@overlay0)[]; + --ig-link: #rgbify(@accent-color)[]; + --ig-error-or-destructive: #rgbify(@red)[]; + --ig-success: #rgbify(@green)[]; + --blue-2: #rgbify(@blue)[]; + --ig-close-friends-refreshed: #rgbify(@green)[]; + --ig-text-input-border-hover-prism: #rgbify(@surface1)[]; + --ig-toggle-outline-prism: #rgbify(@text)[]; + --ig-toggle-background-on-prism: #rgbify(@text)[]; + --ig-stroke-prism: #rgbify(@crust)[]; + --barcelona-logo: #rgbify(@text)[]; + --ig-bubble-background: #rgbify(@surface1)[]; + --ig-tertiary-icon: #rgbify(@accent-color)[]; + --always-dark-overlay: @accent-color; + --secondary-text: @subtext0; + --primary-text: @text; + --primary-icon: @accent-color; + --primary-button-text: @mantle !important; + --primary-button: @blue !important; + scrollbar-color: @accent-color @crust; + } + #splash-screen { + background-color: @base !important; + } + + /* Sidebar */ + .x1xgvd2v { + background-color: @crust !important; + &[style="transform: translateX(0px);"] { + background-color: @mantle !important; + } + } + .x1zvrr1 { + background-color: @mantle; + } + svg[aria-label="Loading..."] { + stroke: @text; + } + + /* Story background */ + .x5qyhuo { + background-color: @base; + } + + /* Story progress bar */ + ._ac3p { + background-color: @accent-color !important; + } + + /* close friends story things */ + .x9bdzbf { + color: @text !important; + } + + /* Story seen / not seen ring */ + button:has(canvas + span > img[alt$="'s profile picture"]) { + canvas { + display: none; + } + + span { + outline-style: solid; + outline-offset: 0.15rem; + } + + &[aria-label^="Story by"][aria-label$="not seen"] span { + outline-color: @accent-color; + outline-width: 0.2rem; + } + &[aria-label^="Story by"]:not([aria-label$="not seen"]) span { + outline-color: @surface2; + outline-width: 0.075rem; + } + } + + /* Posts */ + ._aggc { + background-color: @mantle; + border-color: @overlay0 !important; + border-radius: var(--modal-border-radius); + box-shadow: 0 3px 5px -1px fadeout(@dark-color, 20); + box-sizing: border-box; + } + ._aatc ._aasi, + ._ae1i, + ._aggc textarea.xvbhtw8 { + background-color: @mantle; + } + + /* Icons */ + svg[aria-label="Unlike"] { + fill: @accent-color; + } + svg[aria-label="Close"] { + color: @text; + } + svg[aria-label="Verified"] { + fill: @accent-color; + } + + /* new post thingy */ + ._aa1q._aa1q { + color: @text !important; + } + + /* sumting wong's popup box */ + .x879a55, + .x7ywyr2 { + background-color: @surface1 !important; + } + + /* Share box */ + .xzloghq { + background-color: @surface0; + color: @text !important; + &:hover { + color: @mantle !important; + background-color: @accent-color !important; + } + } + .xk5f4mz { + background-color: @mantle; + &:hover { + background-color: @accent-color; + } + } + .x3nfvp2 { + color: @text !important; + &:hover { + color: @crust; + } + } + + /* reel icon */ + .xq3z1fi { + color: @accent-color !important; + } + + /* Toggle sliders */ + .x1r7x56h { + background-color: @accent-color; + } + .x100vrsf { + background-color: @surface0; + } + + .x1psfjxj { + background-color: @mantle; + } + span[data-bloks-name="bk.components.TextSpan"] { + color: @accent-color !important; + } + .xs7f9wi { + background-color: @mantle !important; + } + .x1d72o { + background-color: @surface0; + } + /* Log In With Facebook text */ + ._ab37 { + color: @blue; + } + /* Excluded: - _9ys7, _9_1f, _9ys8 (verified icon) */ + [style*='background-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png")'], + ._9zkj, + ._a3ds, + ._a3dt, + ._a3du, + ._a3dv, + ._a3dw, + ._9-b3, + ._9znl, + ._9z-6, + ._a3dx, + ._a3dy, + ._a3dz, + ._a3d-, + ._a3d_, + ._a3e0, + ._9zm4, + ._a3e1, + ._a3e2, + ._a3e3, + ._a3e4, + ._a3e5, + ._a3e6, + ._a3e7, + ._a3e8, + ._a3e9, + ._a3ea, + ._9_57, + ._9_n5, + ._9-y3, + ._a3eb, + ._a3ec, + ._a3ed, + ._a3ee, + ._9zlu, + ._9-yp, + ._a3ef, + ._a3eg, + ._9_wm, + ._a3eh, + ._a3ei, + ._9-j_, + ._a3ej, + ._a3ek, + ._9_ij, + ._9_d_, + ._9_e1, + ._9-mm, + ._9_cx, + ._9zm0, + ._9zfi, + ._9-ub, + ._a3el, + ._9-7-, + ._9-1a, + ._a3em, + ._9zrp, + ._a3en, + ._9zz9, + ._a3eo, + ._9zmr, + ._9-8d, + ._9zhi, + ._a3ep, + ._9zs0, + ._9-j-, + ._a3eq, + ._9zli, + ._9_4y, + ._9zm2, + ._9zfj, + ._9zlg, + ._a3er, + ._9-lv, + ._9_ug, + ._9_sh, + ._9_sj, + ._9-k0, + ._9z-c, + ._9_35, + ._9_hh, + ._a3es, + ._a3et, + ._a3eu, + ._9-v-, + ._9_4d, + ._9zlh, + ._a3ev, + ._a3ew, + ._a3ex, + ._a3ey, + ._9_7m, + ._9_fv, + ._a3ez, + ._9-zf, + ._9-zg, + ._9-ze, + ._a9fa, + ._9-zh, + ._9-zi, + ._9-zj, + ._9-zk, + ._9-zl, + ._9-zm, + ._9-zn, + ._9-zo, + ._9-zp, + ._9-zq, + ._9-zr, + ._9-zs, + ._9-zt, + ._a3op, + ._a3oq, + ._9-zu, + ._9-zv, + ._9-zw, + ._9-zx, + ._9-zy, + ._9-zz, + ._9-z-, + ._a3or, + ._a3ot, + ._a3os, + ._9zs1, + ._9zs2, + ._9-z_, + ._9--0, + ._9--1, + ._9--2, + ._9--3, + ._9--4, + ._9--5, + ._9--6, + ._9--7, + ._9--f, + ._9--8, + ._9--9, + ._9--a, + ._9--b, + ._9--c, + ._9--d, + ._9--e, + ._a3ou, + ._9--g, + ._9--h, + ._9--i, + ._9--j, + ._9--l, + ._9--k, + ._9--m, + ._9--n, + ._9--o, + ._9--p, + ._9--q, + ._a3ov, + ._9--s, + ._9--r, + ._9--t, + ._9--u, + ._9--v, + ._9--x, + ._9--y, + ._9--w, + ._9--z, + ._9--_, + ._9-_0, + ._9-_1, + ._9-_2, + ._9-_3, + ._9---, + ._9-_4, + ._9-_5, + ._9-_6, + ._9-_7, + ._a3wy, + ._9-_8, + ._9-_9, + ._a3ow, + ._9-_a, + ._9-_b, + ._9-_c, + ._9-_d, + ._9-_e, + ._9-_f, + ._9-_g, + ._9-_h, + ._9-_i, + ._9-_j, + ._9-_k, + ._9-_l, + ._9-_m, + ._9-_n, + ._9-_o, + ._a3ox, + ._9-_p, + ._9-_q, + ._a9fb, + ._9-_t, + ._9-_r, + ._9-_s, + ._a93g, + ._9-_u, + ._9-_v, + ._a9fc, + ._9-_w, + ._9-_x, + ._9-_y, + ._9-_z, + ._9-_-, + ._9-__, + ._9_00, + ._a3oy, + ._9_01, + ._9_02, + ._9_03, + ._9_04, + ._9_05, + ._9_08, + ._9_09, + ._9_07, + ._9_06, + ._9_0a, + ._9_0b, + ._9_0c, + ._9_0d, + ._9_0e, + ._9_0f, + ._9_0g, + ._a93h, + ._9_0h, + ._9_0i, + ._9_0j, + ._9_0k, + ._aepo, + ._9_0l, + ._9_0m, + ._9_0n, + ._9_0o, + ._9_0p, + ._a3oz, + ._a93l, + ._9_0r, + ._9_0s, + ._a7tk, + ._9_0q, + ._a3o-, + ._9_0t, + ._9_0v, + ._9_0u, + ._a9ej, + ._9_0w, + ._9_0x, + ._9_0y, + ._9_0z, + ._9_0_, + ._9_0-, + ._9_10, + ._9_11, + ._9_12, + ._9_13, + ._9_14, + ._9_15, + ._a3o_, + ._9_18, + ._9_19, + ._9_1a, + ._9_1e, + ._9_1b, + ._9_1c, + ._9_1d, + ._9_16, + ._9_17, + ._a3p0, + ._9_1g, + ._9_1i, + ._9_1h, + ._9_1j, + ._9_1k, + ._9_1l, + ._9_1m, + ._a9pw { + filter: @text-filter; + } + + /* Custom icons */ + @instagram_gradient: radial-gradient( + circle at 30% 107%, + @yellow 0%, + @yellow 5%, + @peach 45%, + @mauve 60%, + @blue 90% + ); + /* Instagram text logo */ + [style*="background-image: url(\"https://static.cdninstagram.com/rsrc.php/v3/yU/r/H5Bq7ru-y9E.png\");"] { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + background-position: -3px -7px !important; + background-size: unset !important; + } + /* 2fa lock icon */ + [aria-label="Two factor authentication lock icon"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + /* "All caught up" icon */ + img[src="/images/instagram/xig/web/illo-confirm-refresh-light.png"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + [style*='background-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png")'] { + /* No photo icon */ + &[style*="background-position: 0px -97px"] { + filter: none; + background: @mauve !important; + background: @instagram_gradient !important; + mask-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png"); + mask-position: 0 -97px; + } + + /* Private page icon */ + &[style*="background-position: -49px -97px"] { + filter: none; + background: @mauve !important; + background: @instagram_gradient !important; + mask-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png"); + mask-position: -49px -97px; + } + + &[style*="background-position: -49px 0px"] { + filter: none; + background: @mauve !important; + background: @instagram_gradient !important; + mask-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png"); + mask-position: -49px 0; + } + } + + /* Post swipe icons */ + ._aaqh { + background-color: @surface0; + } + + /* Inside primary buttons */ + .xzloghq, + ._acas:not(._acao) { + &, + svg { + color: @crust; + fill: @mantle; + } + } + ._acas:not(._acao):hover { + background-color: @surface0 !important; + color: @accent-color !important; + } + + /* Secondary buttons */ + .x1gjpkn9, + ._acat, + ._acap { + &, + a& { + &, + &:visited { + color: @text; + } + } + } + + /* Profile banner */ + div:has(> .x1mu97ne) { + background-color: @crust; + border-color: @overlay0; + box-shadow: 0 10px 35px 2px fadeout(@dark-color, 0.7); + } + + /* Dialog overlay */ + .x7r02ix[role="dialog"] { + box-shadow: 0 5px 10px 0 fadeout(@dark-color, 0.5); + } + + /* Settings */ + ._ab81 { + background-color: @mantle; + } + ._ab85, + ._ab6i, + ._ab85 .xvbhtw8, + ._aav4 { + background-color: @crust; + } + /* Settings saved toast */ + ._abmp { + color: @text; + } + + /* Bloks */ + .wbloks_1[data-bloks-name="bk.components.Collection"] { + background-color: @base !important; + } + div[data-bloks-name="bk.components.Flexbox"], + .wbloks_1[data-bloks-name="bk.components.Flexbox"] { + /* Radios have left padding */ + padding-left: 0 !important; + + /* The heading */ + &[style*="background: rgb(0\, 0\, 0)"], + &[style*="background: rgb(255\, 255\, 255)"] { + background-color: @base !important; + } + + /* Radios */ + &[style*="border-radius: 10.5px"], + &[style*="border-radius: 12px"], + &[style*="border-radius: 4px"] { + /* Selected radio */ + &[style*="background: rgb(0\, 149\, 246)"] { + background-color: @accent-color !important; + } + + /* Not selected radio */ + &[style*="background: rgb(219\, 219\, 219)"], + &[style*="background: rgb(38\, 38\, 38)"], + &[style*="background: rgb(54\, 54\, 54)"], + &[style*="background: rgb(255\, 255\, 255)"] { + background-color: @surface0 !important; + } + } + + /* That "border" */ + &[style*="background: rgb(38\, 38\, 38)"] { + display: none; + } + } + + span[data-bloks-name="bk.components.TextSpan"], + span[data-bloks-name="bk.components.Text"] { + &[style*="color: rgb(250\, 250\, 250)"], + &[style*="color: rgb(224\, 241\, 255)"], + &[style*="color: rgb(0\, 55\, 107)"], + &[style*="color: rgb(38\, 38\, 38)"] { + color: @text !important; + } + + &[style*="color: rgb(142\, 142\, 142)"] { + color: @subtext0 !important; + } + } + + /* Map pop-ups */ + .leaflet-popup-content-wrapper, + .leaflet-popup-tip { + background-color: @mantle; + box-shadow: 0 5px 15px fadeout(@dark-color, 0.4); + + * { + color: @text !important; + } + } + + /* Scrollbar */ + ::-webkit-scrollbar { + background-color: @crust; + } + + ::-webkit-scrollbar-thumb { + background-color: @accent-color; + border-radius: 10px; + } + } +} + +@-moz-document regexp("^.*instagram.com/direct.*") { + ._aa4d { + #catppuccin(@darkFlavor, @accentColor); + } + ._aa4c { + #catppuccin(@lightFlavor, @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]; + + .x11jlvup { + --chat-outgoing-message-bubble-background-color: fade(@blue, 80%); + } + .x1n2onr6 { + --chat-incoming-message-bubble-background-color: @surface0; + } + + /* Chat background */ + .xnz67gz { + background-color: @base; + } + /* messages you've sent */ + .xyk4ms5 { + color: @crust !important; + } + /* sidebar */ + .xvbhtw8 { + background-color: @mantle; + } + .x186z157, + .xk50ysn, + .xi81zsa { + color: @subtext0 !important; + } + + /* New Chat Button */ + .xk5f4mz { + background-color: @surface0; + } + + /* Chat button */ + .x1i10hfl:hover { + color: @text; + } + .x1bvjpef { + color: @crust; + } + .x1bvjpef:hover { + color: lighten(@accent-color, 5%); + } + + /* notes */ + .xsnw5ke, + .x3zg9eu::after { + background-color: @surface0 !important; + } + .x103n6ev, + .xzxgvzf { + background-image: linear-gradient( + -90deg, + fade(@surface0, 30%), + fade(@surface0, 100%) + ); + } + + /* explicit music icon in notes */ + .x1cp0k07 { + color: @text; + } + } +} + +#rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); +} + +/* deno-fmt-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; + @text-filter: brightness(0) saturate(100%) invert(28%) sepia(17%) saturate(835%) hue-rotate(196deg) brightness(97%) contrast(85%); + }; + @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; + @text-filter: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1519%) hue-rotate(192deg) brightness(100%) contrast(93%); + }; + @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; + @text-filter: brightness(0) saturate(100%) invert(80%) sepia(18%) saturate(377%) hue-rotate(192deg) brightness(103%) contrast(92%); + }; + @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; + @text-filter: brightness(0) saturate(100%) invert(85%) sepia(6%) saturate(1356%) hue-rotate(194deg) brightness(103%) contrast(91%); + }; +}; diff --git a/styles/invidious/catppuccin.user.css b/styles/invidious/catppuccin.user.css index 09ea062d18..256cf1e796 100644 --- a/styles/invidious/catppuccin.user.css +++ b/styles/invidious/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Invidious Catppuccin +@name Invidious Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/invidious @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/invidious -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/invidious/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/invidious/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ainvidious @description Soothing pastel theme for Invidious @author Catppuccin @@ -15,330 +15,4 @@ @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 checkbox styleVideoPlayer "Style Video Player" 1 -==/UserStyle== */ - -/** - * kept up-to-date with - * `curl https://api.invidious.io/instances.json | jq '.[] | select(.[1].type=="https") | .[0]'` - */ -@-moz-document domain("anontube.lvkaszus.pl"), - domain("inv.citw.lgbt"), - domain("inv.in.projectsegfau.lt"), - domain("inv.tux.pizza"), - domain("inv.us.projectsegfau.lt"), - domain("inv.zzls.xyz"), - domain("invidious.asir.dev"), - domain("invidious.drgns.space"), - domain("invidious.einfachzocken.eu"), - domain("invidious.fdn.fr"), - domain("invidious.io.lol"), - domain("invidious.lunar.icu"), - domain("invidious.nerdvpn.de"), - domain("invidious.no-logs.com"), - domain("invidious.perennialte.ch"), - domain("invidious.privacydev.net"), - domain("invidious.private.coffee"), - domain("invidious.projectsegfau.lt"), - domain("invidious.protokolla.fi"), - domain("invidious.slipfox.xyz"), - domain("iv.datura.network"), - domain("iv.ggtyler.dev"), - domain("iv.melmac.space"), - domain("iv.nboeck.de"), - domain("iv.winston.sh"), - domain("onion.tube"), - domain("vid.priv.au"), - domain("vid.puffyan.us"), - domain("yewtu.be"), - domain("yt.artemislena.eu"), - domain("yt.cdaut.de"), - domain("yt.drgnz.club"), - domain("yt.oelrichsgarcia.de") { - @media (prefers-color-scheme: light) { - .no-theme { - #catppuccin(@lightFlavor, @accentColor); - } - } - @media (prefers-color-scheme: dark) { - .no-theme { - #catppuccin(@darkFlavor, @accentColor); - } - } - - .light-theme { - #catppuccin(@lightFlavor, @accentColor); - } - .dark-theme { - #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]; - - #lightenOrDarken(@color, @value) { - @result: if( - @lookup = latte, - darken(@color, @value), - lighten(@color, @value) - ); - } - - @link-color: @accent-color; - @link-hover: #lightenOrDarken(@accent-color, 5%) [ @result]; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - background-color: @base !important; - color: @text !important; - - a, - /* menu under the search bar */ - .pure-menu-heading { - color: @link-color; - &:hover, - &:focus, - &:active { - color: @link-hover !important; - } - } - - hr, - /* legend borders are visible as dividers in Settings */ - legend { - border-color: @surface1; - border-style: solid; - } - - legend { - color: @accent-color !important; - } - - .pure-button-primary { - background-color: @surface1 !important; - color: @text !important; - border-color: @surface1 !important; - &:hover, - &:focus { - background-color: @surface2 !important; - color: @text !important; - border-color: @surface1 !important; - } - } - .pure-button-secondary { - background-color: @accent-color !important; - color: @crust !important; - border-color: @surface1 !important; - &:hover, - &:focus { - background-color: #lightenOrDarken(@accent-color, 2%) [ @result] !important; - color: @crust !important; - border-color: @surface1 !important; - } - } - - #subscribe { - background-color: @link-color !important; - color: @crust !important; - :hover, - :focus { - background-color: @link-hover !important; - color: @crust !important; - } - } - - #filters-box { - background-color: @surface0 !important; - } - - .underlined { - border-color: @overlay1; - } - - .video-js .vjs-control-bar, - .vjs-menu-button-popup .vjs-menu .vjs-menu-content { - background-color: @crust !important; - color: @text !important; - } - - .video-js .vjs-slider:hover, - .video-js button:hover { - color: @accent-color !important; - } - - .video-js .vjs-slider { - background-color: @surface2 !important; - } - - .video-js .vjs-load-progress, - .video-js .vjs-load-progress div { - background-color: @surface2 !important; - } - - .video-js.player-style-invidious .vjs-play-progress { - background-color: @accent-color !important; - } - - .vjs-menu li.vjs-menu-item:focus, - .vjs-menu li.vjs-menu-item:hover { - background-color: @surface0 !important; - color: @text !important; - } - - .vjs-menu li.vjs-selected, - .vjs-menu li.vjs-selected:focus, - .vjs-menu li.vjs-selected:hover { - background-color: @blue !important; - } - - .vjs-menu li.vjs-selected, - .vjs-menu li.vjs-selected:focus, - .vjs-menu li.vjs-selected:hover, - .js-focus-visible .vjs-menu li.vjs-selected:hover { - color: @crust !important; - } - - .vjs-modal-dialog-content { - backdrop-filter: blur(4px); - } - - .vjs-share__title { - color: @text !important; - } - .vjs-share__subtitle { - color: @subtext0 !important; - opacity: 100% !important; - } - .vjs-share__short-link { - color: @text !important; - background: @base !important; - } - .vjs-share__btn { - background: @crust !important; - svg path { - fill: @text !important; - } - } - - #related-videos > .h-box > div:not(#autoplay-controls) { - margin-bottom: 48px !important; - } - - footer a, - footer span { - color: @subtext0 !important; - } - - footer span a, - footer span:has(i) { - &:hover { - color: @accent-color !important; - } - } - - .pure-form-message-inline { - color: @subtext0; - } - - select, - input[type="text"], - input[type="number"], - input[type="input"], - input[type="password"] { - color: @text !important; - background-color: @surface0 !important; - border-color: @surface1 !important; - box-shadow: none !important; - &:active { - color: @text !important; - } - } - input[type="search"] { - color: @text !important; - background-color: @base !important; - border-bottom-color: @overlay1 !important; - box-shadow: none !important; - } - input[type="checkbox"] { - background-color: @surface2; - border-color: @surface1; - height: 1rem; - width: 1rem; - -webkit-appearance: none; - appearance: none; - cursor: pointer; - &:checked { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - } - - /* video player background */ - #player-container > .video-js > video, - /* placeholder for loading thumbnails */ - .vjs-poster { - & when (@styleVideoPlayer = 1) { - background-color: @mantle !important; - } - } - - /* watch progress on videos */ - div.watched-indicator { - background-color: @red; - } - - /* Channel owner comments */ - a.channel-owner { - color: @crust; - background-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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/invidious/catppuccin.user.less b/styles/invidious/catppuccin.user.less new file mode 100644 index 0000000000..281700b325 --- /dev/null +++ b/styles/invidious/catppuccin.user.less @@ -0,0 +1,343 @@ +/* ==UserStyle== +@name Invidious Catppuccin +@namespace github.com/catppuccin/userstyles/styles/invidious +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/invidious +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/invidious/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ainvidious +@description Soothing pastel theme for Invidious +@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"] + +@var checkbox styleVideoPlayer "Style Video Player" 1 +==/UserStyle== */ + +/** + * kept up-to-date with + * `curl https://api.invidious.io/instances.json | jq '.[] | select(.[1].type=="https") | .[0]'` + */ +@-moz-document domain("anontube.lvkaszus.pl"), + domain("inv.citw.lgbt"), + domain("inv.in.projectsegfau.lt"), + domain("inv.tux.pizza"), + domain("inv.us.projectsegfau.lt"), + domain("inv.zzls.xyz"), + domain("invidious.asir.dev"), + domain("invidious.drgns.space"), + domain("invidious.einfachzocken.eu"), + domain("invidious.fdn.fr"), + domain("invidious.io.lol"), + domain("invidious.lunar.icu"), + domain("invidious.nerdvpn.de"), + domain("invidious.no-logs.com"), + domain("invidious.perennialte.ch"), + domain("invidious.privacydev.net"), + domain("invidious.private.coffee"), + domain("invidious.projectsegfau.lt"), + domain("invidious.protokolla.fi"), + domain("invidious.slipfox.xyz"), + domain("iv.datura.network"), + domain("iv.ggtyler.dev"), + domain("iv.melmac.space"), + domain("iv.nboeck.de"), + domain("iv.winston.sh"), + domain("onion.tube"), + domain("vid.priv.au"), + domain("vid.puffyan.us"), + domain("yewtu.be"), + domain("yt.artemislena.eu"), + domain("yt.cdaut.de"), + domain("yt.drgnz.club"), + domain("yt.oelrichsgarcia.de") { + @media (prefers-color-scheme: light) { + .no-theme { + #catppuccin(@lightFlavor, @accentColor); + } + } + @media (prefers-color-scheme: dark) { + .no-theme { + #catppuccin(@darkFlavor, @accentColor); + } + } + + .light-theme { + #catppuccin(@lightFlavor, @accentColor); + } + .dark-theme { + #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]; + + #lightenOrDarken(@color, @value) { + @result: if( + @lookup = latte, + darken(@color, @value), + lighten(@color, @value) + ); + } + + @link-color: @accent-color; + @link-hover: #lightenOrDarken(@accent-color, 5%)[@result]; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + background-color: @base !important; + color: @text !important; + + a, + /* menu under the search bar */ + .pure-menu-heading { + color: @link-color; + &:hover, + &:focus, + &:active { + color: @link-hover !important; + } + } + + hr, + /* legend borders are visible as dividers in Settings */ + legend { + border-color: @surface1; + border-style: solid; + } + + legend { + color: @accent-color !important; + } + + .pure-button-primary { + background-color: @surface1 !important; + color: @text !important; + border-color: @surface1 !important; + &:hover, + &:focus { + background-color: @surface2 !important; + color: @text !important; + border-color: @surface1 !important; + } + } + .pure-button-secondary { + background-color: @accent-color !important; + color: @crust !important; + border-color: @surface1 !important; + &:hover, + &:focus { + background-color: #lightenOrDarken(@accent-color, 2%)[@result] + !important; + color: @crust !important; + border-color: @surface1 !important; + } + } + + #subscribe { + background-color: @link-color !important; + color: @crust !important; + :hover, + :focus { + background-color: @link-hover !important; + color: @crust !important; + } + } + + #filters-box { + background-color: @surface0 !important; + } + + .underlined { + border-color: @overlay1; + } + + .video-js .vjs-control-bar, + .vjs-menu-button-popup .vjs-menu .vjs-menu-content { + background-color: @crust !important; + color: @text !important; + } + + .video-js .vjs-slider:hover, + .video-js button:hover { + color: @accent-color !important; + } + + .video-js .vjs-slider { + background-color: @surface2 !important; + } + + .video-js .vjs-load-progress, + .video-js .vjs-load-progress div { + background-color: @surface2 !important; + } + + .video-js.player-style-invidious .vjs-play-progress { + background-color: @accent-color !important; + } + + .vjs-menu li.vjs-menu-item:focus, + .vjs-menu li.vjs-menu-item:hover { + background-color: @surface0 !important; + color: @text !important; + } + + .vjs-menu li.vjs-selected, + .vjs-menu li.vjs-selected:focus, + .vjs-menu li.vjs-selected:hover { + background-color: @blue !important; + } + + .vjs-menu li.vjs-selected, + .vjs-menu li.vjs-selected:focus, + .vjs-menu li.vjs-selected:hover, + .js-focus-visible .vjs-menu li.vjs-selected:hover { + color: @crust !important; + } + + .vjs-modal-dialog-content { + backdrop-filter: blur(4px); + } + + .vjs-share__title { + color: @text !important; + } + .vjs-share__subtitle { + color: @subtext0 !important; + opacity: 100% !important; + } + .vjs-share__short-link { + color: @text !important; + background: @base !important; + } + .vjs-share__btn { + background: @crust !important; + svg path { + fill: @text !important; + } + } + + #related-videos > .h-box > div:not(#autoplay-controls) { + margin-bottom: 48px !important; + } + + footer a, + footer span { + color: @subtext0 !important; + } + + footer span a, + footer span:has(i) { + &:hover { + color: @accent-color !important; + } + } + + .pure-form-message-inline { + color: @subtext0; + } + + select, + input[type="text"], + input[type="number"], + input[type="input"], + input[type="password"] { + color: @text !important; + background-color: @surface0 !important; + border-color: @surface1 !important; + box-shadow: none !important; + &:active { + color: @text !important; + } + } + input[type="search"] { + color: @text !important; + background-color: @base !important; + border-bottom-color: @overlay1 !important; + box-shadow: none !important; + } + input[type="checkbox"] { + background-color: @surface2; + border-color: @surface1; + height: 1rem; + width: 1rem; + -webkit-appearance: none; + appearance: none; + cursor: pointer; + &:checked { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } + + /* video player background */ + #player-container > .video-js > video, + /* placeholder for loading thumbnails */ + .vjs-poster { + & when (@styleVideoPlayer = 1) { + background-color: @mantle !important; + } + } + + /* watch progress on videos */ + div.watched-indicator { + background-color: @red; + } + + /* Channel owner comments */ + a.channel-owner { + color: @crust; + background-color: @accent-color; + } + } +} + +/* deno-fmt-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; } +}; diff --git a/styles/invokeai/catppuccin.user.css b/styles/invokeai/catppuccin.user.css index fd376f3626..57a5c4023c 100644 --- a/styles/invokeai/catppuccin.user.css +++ b/styles/invokeai/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name InvokeAI Catppuccin +@name InvokeAI Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/invokeai @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/invokeai -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/invokeai/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/invokeai/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ainvokeai @description Soothing pastel theme for InvokeAI @author Catppuccin @@ -13,130 +13,4 @@ @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 regexp("http:\\/\\/(127\\.0\\.0\\.1|localhost):9090(.*)") { - @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; - } - } - - :root, - [data-theme]:root { - --accent-color-dim: lighten(@accent-color, -10%); - --accent-color: @accent-color; - --accent-color-bright: lighten(@accent-color, 10%); - --accent-color-hover: var(--accent-color-bright); - --root-bg-color: @mantle; - --background-color: @base; - --background-color-light: @surface0; - --background-color-secondary: @base; - --text-color: @text; - --text-color-secondary: @subtext0; - --subtext-color: @subtext1; - --subtext-color-bright: @subtext0; - --border-color: @surface1; - --border-color-light: @surface2; - --tab-color: @accent-color; - --tab-list-bg: @accent-color; - --btn-delete-image: @red; - --status-good-color: @green; - --status-good-color-glow: lighten(@green, 10%); - --border-color-invalid: @red; - --box-shadow-color-invalid: lighten(@red, 5%); - --tab-panel-bg: var(--background-color-light); - --tab-hover-color: var(--background-color-secondary); - --tab-list-text: white; - --prompt-bg-color: var(--background-color-light); - --switch-bg-color: var(--background-color-secondary); - --btn-base-color: var(--background-color-light); - --btn-base-color-hover: var(--background-color-secondary); - --destructive-color: @red; - --slider-color: @lavender; - --slider-mark-color: var(--slider-color); - --switch-bg-active-color: var(--accent-color); - --console-icon-button-bg-color: var(--btn-base-color); - --console-icon-button-bg-color-hover: var(--btn-base-color-hover); - --console-bg-color: var(--background-color-light); - --svg-color: var(--text-color); - --btn-load-more: var(--background-color-light); - --tab-list-text-inactive: var(--text-color-secondary); - } - - .invokeai-style-cache-1m5jnul { - --number-input-color: var(--text-color-secondary) !important; - } - - .invoke-btn, - .invokeai__button[data-active], - .site-header-right-side .lang-select-btn[data-selected="true"], - .site-header-right-side .lang-select-btn[data-selected="true"]:hover, - button.chakra-button.invokeai__icon-button[data-selected="true"] { - --svg-color: var(--root-bg-color); - color: var(--root-bg-color) !important; - } - - .invokeai-style-cache-vs1g06, - .invokeai-style-cache-vs1g06:hover { - background-color: var(--background-color-light); - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/invokeai/catppuccin.user.less b/styles/invokeai/catppuccin.user.less new file mode 100644 index 0000000000..4fea9481e6 --- /dev/null +++ b/styles/invokeai/catppuccin.user.less @@ -0,0 +1,140 @@ +/* ==UserStyle== +@name InvokeAI Catppuccin +@namespace github.com/catppuccin/userstyles/styles/invokeai +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/invokeai +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/invokeai/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ainvokeai +@description Soothing pastel theme for InvokeAI +@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 regexp("http:\\/\\/(127\\.0\\.0\\.1|localhost):9090(.*)") { + @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; + } + } + + :root, + [data-theme]:root { + --accent-color-dim: lighten(@accent-color, -10%); + --accent-color: @accent-color; + --accent-color-bright: lighten(@accent-color, 10%); + --accent-color-hover: var(--accent-color-bright); + --root-bg-color: @mantle; + --background-color: @base; + --background-color-light: @surface0; + --background-color-secondary: @base; + --text-color: @text; + --text-color-secondary: @subtext0; + --subtext-color: @subtext1; + --subtext-color-bright: @subtext0; + --border-color: @surface1; + --border-color-light: @surface2; + --tab-color: @accent-color; + --tab-list-bg: @accent-color; + --btn-delete-image: @red; + --status-good-color: @green; + --status-good-color-glow: lighten(@green, 10%); + --border-color-invalid: @red; + --box-shadow-color-invalid: lighten(@red, 5%); + --tab-panel-bg: var(--background-color-light); + --tab-hover-color: var(--background-color-secondary); + --tab-list-text: white; + --prompt-bg-color: var(--background-color-light); + --switch-bg-color: var(--background-color-secondary); + --btn-base-color: var(--background-color-light); + --btn-base-color-hover: var(--background-color-secondary); + --destructive-color: @red; + --slider-color: @lavender; + --slider-mark-color: var(--slider-color); + --switch-bg-active-color: var(--accent-color); + --console-icon-button-bg-color: var(--btn-base-color); + --console-icon-button-bg-color-hover: var(--btn-base-color-hover); + --console-bg-color: var(--background-color-light); + --svg-color: var(--text-color); + --btn-load-more: var(--background-color-light); + --tab-list-text-inactive: var(--text-color-secondary); + } + + .invokeai-style-cache-1m5jnul { + --number-input-color: var(--text-color-secondary) !important; + } + + .invoke-btn, + .invokeai__button[data-active], + .site-header-right-side .lang-select-btn[data-selected="true"], + .site-header-right-side .lang-select-btn[data-selected="true"]:hover, + button.chakra-button.invokeai__icon-button[data-selected="true"] { + --svg-color: var(--root-bg-color); + color: var(--root-bg-color) !important; + } + + .invokeai-style-cache-vs1g06, + .invokeai-style-cache-vs1g06:hover { + background-color: var(--background-color-light); + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/jisho/catppuccin.user.css b/styles/jisho/catppuccin.user.css index f5223fe092..9dd24bcf35 100644 --- a/styles/jisho/catppuccin.user.css +++ b/styles/jisho/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Jisho Catppuccin +@name Jisho Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/jisho @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/jisho -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/jisho/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/jisho/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ajisho @description Soothing pastel theme for Jisho @author Catppuccin @@ -13,483 +13,4 @@ @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('jisho.org') { - @media (prefers-color-scheme: light) { - :root[data-color-theme="auto"] { - #catppuccin(@lightFlavor, @accentColor); - } - } - @media (prefers-color-scheme: dark) { - :root[data-color-theme="auto"] { - #catppuccin(@darkFlavor, @accentColor); - } - } - - :root[data-color-theme="dark"] { - #catppuccin(@darkFlavor, @accentColor); - } - :root[data-color-theme="light"] { - #catppuccin(@lightFlavor, @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]; - - @accent-dim: if( - (@lookup = latte), - desaturate(lighten(@accent-color, 8%), 10%), - desaturate(darken(@accent-color, 8%), 10%) - ); - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - body { - background-color: @base !important; - color: @text; - - a { - color: @accent-color; - - &:hover { - color: @accent-dim; - } - } - } - - each(range(6), { - h@{value} { - color: @text; - } - }); - - button, - .button, - .tabs .tab-title > a { - background-color: @overlay0; - color: @text; - - &:hover, - &:focus { - background-color: @overlay1; - color: @text; - } - } - - // ! There is some white space between the buttons in the button group - // ! This is somewhat mitigated by using `margin: 0 -2px;` originally - // ! We use `display: flex;` instead - .button-group { - display: flex; - flex-wrap: wrap; - - &.radius > *, - > li { - margin: unset; - } - } - - .f-dropdown { - background-color: @mantle; - border-color: @overlay0; - - &::before { - border-bottom-color: @surface0; - } - - li:hover { - background-color: @crust; - } - } - - header.row { - background-color: @base; - } - - h1.logo a { - background-image: if( - @lookup = latte, - url("//assets.jisho.org/assets/jisho-logo-v4@2x-7330091c079b9dd59601401b052b52e103978221c8fb6f5e22406d871fcc746a.png"), - url("//assets.jisho.org/assets/jisho-logo-v4-dark@2x-e676613b426d34187b61928823730a225b52165aaef99f948bd3dc5fc16fa787.png") - ); - } - - nav .links { - .color_theme_picker--wrapper:hover { - background-color: @mantle; - } - - .color_theme_picker--choices { - background-color: @mantle; - - li a:hover { - background-color: @crust; - } - } - } - - form.search { - .input_methods, - .input_method_button h4 { - color: @subtext0; - } - - .input_method_button:hover { - background-color: @surface0; - } - - .main { - background-color: @surface0; - box-shadow: none; - } - - .inner { - background-color: @surface1; - - input { - color: @text; - } - } - - .search_type { - border-right-color: @overlay0; - color: @subtext0; - } - - .submit { - background-color: @overlay1; - color: @text; - } - - .search-form_clear-button { - background-color: transparent; // ! Unsure if this needs a background, also extends beyond the input - .clear-icon { - fill: @subtext0; - } - } - - .results, - #radical_area .results { - .result_label { - color: @text; - } - - .result { - background-color: @surface1; - - &:hover { - color: @text; - } - } - - each(range(8), { - .g@{value} { - color: @blue; - } - }); - } - - #radical_area { - .radical_table { - background-image: repeating-linear-gradient( - 180deg, - @surface1, - @surface1 32px, - @surface2 32px, - @surface2 64px - ); - - .number { - background-color: @text; - color: @base; - } - - .radical { - background-image: none; // ! some radicals are rendered with a background image by default - color: @text; - - &.available:hover { - background-color: @overlay0; - } - - &.selected { - border-color: @text; - background-color: fade(@yellow, 30%); - } - } - } - - &.combined_mode { - // ! what is combined mode? - .reset_radicals { - color: @subtext0; - - &:hover { - color: @text; - background-color: @overlay0; - } - } - } - } - - .handwriting { - .panel { - background-color: @surface1; - } - - .pencil-icon { - color: @surface2 !important; - } - } - } - - .speech_area_active #speech_button, - .radical_area_active #radical_button, - .handwriting_area_active #handwriting_button { - border-bottom-color: @accent-color; - } - - #what_is_this { - color: unset; - } - - .japanese_word__furigana-invisible { - opacity: 0; // ! Jisho uses `color: #fff;` to hide furigana, however this does not work in the dark theme - } - - #zen_bar li[data-pos="Noun"] a, - #zen_bar li[data-pos="Proper noun"] a, - #zen_bar li[data-pos="Pronoun"] a, - #zen_bar li[data-pos="Suffix"] a, - #zen_bar li[data-pos="Prefix"] a, - #zen_bar li[data-pos="Symbol"] a, - #zen_bar li[data-pos="Interjection"] a, - #zen_bar li[data-pos="Propernoun"] a { - color: @peach; - border-bottom-color: @peach; - } - - #zen_bar li[data-pos="Particle"] a { - color: @red; - border-bottom-color: @red; - } - - #zen_bar li[data-pos="Verb"] a { - color: @subtext0; - border-bottom-color: @subtext0; - } - - #main_results h4 .result_count { - color: @subtext0; - } - - .fact { - outline-color: @mantle; - border-color: @base; - background-color: @mantle; - } - - .concept_light { - border-bottom-color: @overlay0; - } - - .concept_light-status .concept_light-tag { - color: @base; - background-color: @subtext0; - - &.concept_light-common { - background-color: @green; - } - - a { - color: @base; - } - } - .concept_light-meanings { - .meaning-tags, - .meaning-definition-section_divider { - color: @subtext0; - } - } - - .concept_light .sentence, - .meaning-abstract, - .supplemental_info { - color: @subtext0; - } - - .kanji_light { - border-bottom-color: @overlay0; - - .info { - color: @subtext0; - } - } - - .sentences_block .sentence { - border-bottom-color: @overlay0; - } - - #secondary aside .minor-text { - color: @subtext0; - } - - .kanji-details__main-readings-list a { - border-bottom-color: @subtext0; - } - - .kanji_strokes { - .kanji_play_button, - .replay_button, - .toggle_kanji_actions { - color: @text; - background-color: transparent; - } - - .actions { - background-color: @base; - - h3 { - color: @text; - } - } - - .noUi-target { - .noUi-background { - background-color: @accent-color; - } - - .noUi-base { - border-color: @surface1; - } - - .noUi-origin { - background-color: @overlay0; - } - - .noUi-handle { - background-color: @text; - border-color: @surface2; - } - - .noUi-active { - background-color: @subtext0; - } - } - } - - .stroke_order_diagram--bounding_box, - .stroke_order_diagram--guide_line { - stroke: @surface0; - } - - .stroke_order_diagram--path_start { - fill: fade(@red, 80%); - } - - .stroke_order_diagram--current_path { - stroke: @text; - } - - .stroke_order_diagram--existing_path { - stroke: fade(@subtext0, 50%); - } - - .kanji { - table { - background-color: @mantle; - border-color: @overlay0; - } - - tr { - background-color: @surface0; - - td { - color: @subtext0; - } - } - } - - .discussion_thread { - .comment_body { - background-color: @surface0; - border-color: @overlay0; - - .discussion_status { - background-color: @surface1; - border-bottom-color: @overlay0; - color: @subtext0; - } - - .discussion_about { - background-color: mix(@surface0, @teal, 80%); - color: @teal; - } - - .comment_status { - background-color: @surface2; - color: @subtext0; - } - } - - .discussion_title a { - color: @text !important; - } - } - - footer { - .ornament { - background-color: @red; - box-shadow: 0 0 10px 5px if(@lookup = latte, @base, @overlay0); - } - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/jisho/catppuccin.user.less b/styles/jisho/catppuccin.user.less new file mode 100644 index 0000000000..f7b13c2a96 --- /dev/null +++ b/styles/jisho/catppuccin.user.less @@ -0,0 +1,499 @@ +/* ==UserStyle== +@name Jisho Catppuccin +@namespace github.com/catppuccin/userstyles/styles/jisho +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/jisho +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/jisho/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ajisho +@description Soothing pastel theme for Jisho +@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("jisho.org") { + @media (prefers-color-scheme: light) { + :root[data-color-theme="auto"] { + #catppuccin(@lightFlavor, @accentColor); + } + } + @media (prefers-color-scheme: dark) { + :root[data-color-theme="auto"] { + #catppuccin(@darkFlavor, @accentColor); + } + } + + :root[data-color-theme="dark"] { + #catppuccin(@darkFlavor, @accentColor); + } + :root[data-color-theme="light"] { + #catppuccin(@lightFlavor, @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]; + + @accent-dim: if( + (@lookup = latte), + desaturate(lighten(@accent-color, 8%), 10%), + desaturate(darken(@accent-color, 8%), 10%) + ); + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + body { + background-color: @base !important; + color: @text; + + a { + color: @accent-color; + + &:hover { + color: @accent-dim; + } + } + } + + each( + range(6), + { + h@{value} { + color: @text; + } + } + ); + + button, + .button, + .tabs .tab-title > a { + background-color: @overlay0; + color: @text; + + &:hover, + &:focus { + background-color: @overlay1; + color: @text; + } + } + + // ! There is some white space between the buttons in the button group + // ! This is somewhat mitigated by using `margin: 0 -2px;` originally + // ! We use `display: flex;` instead + .button-group { + display: flex; + flex-wrap: wrap; + + &.radius > *, + > li { + margin: unset; + } + } + + .f-dropdown { + background-color: @mantle; + border-color: @overlay0; + + &::before { + border-bottom-color: @surface0; + } + + li:hover { + background-color: @crust; + } + } + + header.row { + background-color: @base; + } + + h1.logo a { + background-image: if( + @lookup = latte, + url("//assets.jisho.org/assets/jisho-logo-v4@2x-7330091c079b9dd59601401b052b52e103978221c8fb6f5e22406d871fcc746a.png"), + url("//assets.jisho.org/assets/jisho-logo-v4-dark@2x-e676613b426d34187b61928823730a225b52165aaef99f948bd3dc5fc16fa787.png") + ); + } + + nav .links { + .color_theme_picker--wrapper:hover { + background-color: @mantle; + } + + .color_theme_picker--choices { + background-color: @mantle; + + li a:hover { + background-color: @crust; + } + } + } + + form.search { + .input_methods, + .input_method_button h4 { + color: @subtext0; + } + + .input_method_button:hover { + background-color: @surface0; + } + + .main { + background-color: @surface0; + box-shadow: none; + } + + .inner { + background-color: @surface1; + + input { + color: @text; + } + } + + .search_type { + border-right-color: @overlay0; + color: @subtext0; + } + + .submit { + background-color: @overlay1; + color: @text; + } + + .search-form_clear-button { + background-color: transparent; // ! Unsure if this needs a background, also extends beyond the input + .clear-icon { + fill: @subtext0; + } + } + + .results, + #radical_area .results { + .result_label { + color: @text; + } + + .result { + background-color: @surface1; + + &:hover { + color: @text; + } + } + + each( + range(8), + { + .g@{value} { + color: @blue; + } + } + ); + } + + #radical_area { + .radical_table { + background-image: repeating-linear-gradient( + 180deg, + @surface1, + @surface1 32px, + @surface2 32px, + @surface2 64px + ); + + .number { + background-color: @text; + color: @base; + } + + .radical { + background-image: none; // ! some radicals are rendered with a background image by default + color: @text; + + &.available:hover { + background-color: @overlay0; + } + + &.selected { + border-color: @text; + background-color: fade(@yellow, 30%); + } + } + } + + &.combined_mode { + // ! what is combined mode? + .reset_radicals { + color: @subtext0; + + &:hover { + color: @text; + background-color: @overlay0; + } + } + } + } + + .handwriting { + .panel { + background-color: @surface1; + } + + .pencil-icon { + color: @surface2 !important; + } + } + } + + .speech_area_active #speech_button, + .radical_area_active #radical_button, + .handwriting_area_active #handwriting_button { + border-bottom-color: @accent-color; + } + + #what_is_this { + color: unset; + } + + .japanese_word__furigana-invisible { + opacity: 0; // ! Jisho uses `color: #fff;` to hide furigana, however this does not work in the dark theme + } + + #zen_bar li[data-pos="Noun"] a, + #zen_bar li[data-pos="Proper noun"] a, + #zen_bar li[data-pos="Pronoun"] a, + #zen_bar li[data-pos="Suffix"] a, + #zen_bar li[data-pos="Prefix"] a, + #zen_bar li[data-pos="Symbol"] a, + #zen_bar li[data-pos="Interjection"] a, + #zen_bar li[data-pos="Propernoun"] a { + color: @peach; + border-bottom-color: @peach; + } + + #zen_bar li[data-pos="Particle"] a { + color: @red; + border-bottom-color: @red; + } + + #zen_bar li[data-pos="Verb"] a { + color: @subtext0; + border-bottom-color: @subtext0; + } + + #main_results h4 .result_count { + color: @subtext0; + } + + .fact { + outline-color: @mantle; + border-color: @base; + background-color: @mantle; + } + + .concept_light { + border-bottom-color: @overlay0; + } + + .concept_light-status .concept_light-tag { + color: @base; + background-color: @subtext0; + + &.concept_light-common { + background-color: @green; + } + + a { + color: @base; + } + } + .concept_light-meanings { + .meaning-tags, + .meaning-definition-section_divider { + color: @subtext0; + } + } + + .concept_light .sentence, + .meaning-abstract, + .supplemental_info { + color: @subtext0; + } + + .kanji_light { + border-bottom-color: @overlay0; + + .info { + color: @subtext0; + } + } + + .sentences_block .sentence { + border-bottom-color: @overlay0; + } + + #secondary aside .minor-text { + color: @subtext0; + } + + .kanji-details__main-readings-list a { + border-bottom-color: @subtext0; + } + + .kanji_strokes { + .kanji_play_button, + .replay_button, + .toggle_kanji_actions { + color: @text; + background-color: transparent; + } + + .actions { + background-color: @base; + + h3 { + color: @text; + } + } + + .noUi-target { + .noUi-background { + background-color: @accent-color; + } + + .noUi-base { + border-color: @surface1; + } + + .noUi-origin { + background-color: @overlay0; + } + + .noUi-handle { + background-color: @text; + border-color: @surface2; + } + + .noUi-active { + background-color: @subtext0; + } + } + } + + .stroke_order_diagram--bounding_box, + .stroke_order_diagram--guide_line { + stroke: @surface0; + } + + .stroke_order_diagram--path_start { + fill: fade(@red, 80%); + } + + .stroke_order_diagram--current_path { + stroke: @text; + } + + .stroke_order_diagram--existing_path { + stroke: fade(@subtext0, 50%); + } + + .kanji { + table { + background-color: @mantle; + border-color: @overlay0; + } + + tr { + background-color: @surface0; + + td { + color: @subtext0; + } + } + } + + .discussion_thread { + .comment_body { + background-color: @surface0; + border-color: @overlay0; + + .discussion_status { + background-color: @surface1; + border-bottom-color: @overlay0; + color: @subtext0; + } + + .discussion_about { + background-color: mix(@surface0, @teal, 80%); + color: @teal; + } + + .comment_status { + background-color: @surface2; + color: @subtext0; + } + } + + .discussion_title a { + color: @text !important; + } + } + + footer { + .ornament { + background-color: @red; + box-shadow: 0 0 10px 5px if(@lookup = latte, @base, @overlay0); + } + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/keybr.com/catppuccin.user.css b/styles/keybr.com/catppuccin.user.css index 79ada1c0c0..2973813ecd 100644 --- a/styles/keybr.com/catppuccin.user.css +++ b/styles/keybr.com/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name keybr.com Catppuccin +@name keybr.com Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/keybr.com @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/keybr.com -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/keybr.com/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/keybr.com/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Akeybr.com @description Soothing pastel theme for keybr.com @author Catppuccin @@ -13,139 +13,4 @@ @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('keybr.com') { - html[data-color="dark"] { - #catppuccin(@darkFlavor, @accentColor); - } - html[data-color="light"] { - #catppuccin(@lightFlavor, @accentColor); - } - html[data-color="system"] { - @media (prefers-color-scheme: light) { - #catppuccin(@lightFlavor, @accentColor); - } - @media (prefers-color-scheme: dark) { - #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; - } - } - - --primary-d2: @overlay0; - --primary-d1: @overlay0; - --primary: @base; - --primary-l1: @crust; - --primary-l2: @mantle; - --secondary-d1: @subtext0; - --secondary: @text; - --secondary-l1: @subtext0; - --secondary-l2: @accent-color; - --secondary-f1: @subtext0; - --secondary-f2: @subtext0; - --accent-d2: @accent-color; - --accent-d1: @accent-color; - --accent: @accent-color; - --accent-l1: @accent-color; - --accent-l2: @accent-color; - --error-d1: @red; - --error: @red; - --error-l1: @red; - --shadow-color: fade(@crust, 88%); - --slow-key-color: @red; - --fast-key-color: @green; - --Chart-speed__color: @green; - --Chart-accuracy__color: @peach; - --Chart-complexity__color: @pink; - --Chart-threshold__color: @maroon; - --Chart-hist-h__color: @lavender; - --Chart-hist-m__color: @maroon; - --Chart-hist-r__color: @mauve; - --KeyboardKey-pointer__color: @accent-color; - --KeyboardKey-symbol__color: @crust; - --pinky-zone-color: @green; - --ring-zone-color: @teal; - --middle-zone-color: @yellow; - --left-index-zone-color: @blue; - --right-index-zone-color: @maroon; - --thumb-zone-color: @mauve; - --effort-0-color: @crust; - --effort-1-color: @crust; - --effort-2-color: @accent-color; - --effort-3-color: @accent-color; - --Value--more__color: @green; - --Value--less__color: @red; - --KeyboardKey-button--depressed__color: @accent-color; - --LessonKey--included__color: @crust; - --LessonKey--uncalibrated__background-color: @surface0; - --LessonKey--excluded__background-color: @surface0; - --LessonKey--excluded__color: @overlay0; - --DailyGoal-bar__color: @accent-color; - --KeyboardKey-button__color: @accent-color; - --textinput__color: @text; - --textinput--special__color: @subtext1; - --textinput--hit__color: @subtext0; - --textinput--miss__color: @red; - --syntax-keyword: @mauve; - --syntax-string: @green; - --syntax-number: @peach; - --syntax-comment: @overlay2; - --MenuItem__background-color: @mantle; - --MenuItem__color: @text; - --MenuItem--hover__background-color: @surface0; - --MenuItem--hover__color: @text; - --KeyboardKey-symbol--dead__color: @red; - --KeyboardKey-symbol--ligature__color: @blue; - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/keybr.com/catppuccin.user.less b/styles/keybr.com/catppuccin.user.less new file mode 100644 index 0000000000..1bcb388412 --- /dev/null +++ b/styles/keybr.com/catppuccin.user.less @@ -0,0 +1,149 @@ +/* ==UserStyle== +@name keybr.com Catppuccin +@namespace github.com/catppuccin/userstyles/styles/keybr.com +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/keybr.com +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/keybr.com/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Akeybr.com +@description Soothing pastel theme for keybr.com +@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("keybr.com") { + html[data-color="dark"] { + #catppuccin(@darkFlavor, @accentColor); + } + html[data-color="light"] { + #catppuccin(@lightFlavor, @accentColor); + } + html[data-color="system"] { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor, @accentColor); + } + @media (prefers-color-scheme: dark) { + #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; + } + } + + --primary-d2: @overlay0; + --primary-d1: @overlay0; + --primary: @base; + --primary-l1: @crust; + --primary-l2: @mantle; + --secondary-d1: @subtext0; + --secondary: @text; + --secondary-l1: @subtext0; + --secondary-l2: @accent-color; + --secondary-f1: @subtext0; + --secondary-f2: @subtext0; + --accent-d2: @accent-color; + --accent-d1: @accent-color; + --accent: @accent-color; + --accent-l1: @accent-color; + --accent-l2: @accent-color; + --error-d1: @red; + --error: @red; + --error-l1: @red; + --shadow-color: fade(@crust, 88%); + --slow-key-color: @red; + --fast-key-color: @green; + --Chart-speed__color: @green; + --Chart-accuracy__color: @peach; + --Chart-complexity__color: @pink; + --Chart-threshold__color: @maroon; + --Chart-hist-h__color: @lavender; + --Chart-hist-m__color: @maroon; + --Chart-hist-r__color: @mauve; + --KeyboardKey-pointer__color: @accent-color; + --KeyboardKey-symbol__color: @crust; + --pinky-zone-color: @green; + --ring-zone-color: @teal; + --middle-zone-color: @yellow; + --left-index-zone-color: @blue; + --right-index-zone-color: @maroon; + --thumb-zone-color: @mauve; + --effort-0-color: @crust; + --effort-1-color: @crust; + --effort-2-color: @accent-color; + --effort-3-color: @accent-color; + --Value--more__color: @green; + --Value--less__color: @red; + --KeyboardKey-button--depressed__color: @accent-color; + --LessonKey--included__color: @crust; + --LessonKey--uncalibrated__background-color: @surface0; + --LessonKey--excluded__background-color: @surface0; + --LessonKey--excluded__color: @overlay0; + --DailyGoal-bar__color: @accent-color; + --KeyboardKey-button__color: @accent-color; + --textinput__color: @text; + --textinput--special__color: @subtext1; + --textinput--hit__color: @subtext0; + --textinput--miss__color: @red; + --syntax-keyword: @mauve; + --syntax-string: @green; + --syntax-number: @peach; + --syntax-comment: @overlay2; + --MenuItem__background-color: @mantle; + --MenuItem__color: @text; + --MenuItem--hover__background-color: @surface0; + --MenuItem--hover__color: @text; + --KeyboardKey-symbol--dead__color: @red; + --KeyboardKey-symbol--ligature__color: @blue; + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/keyoxide/catppuccin.user.css b/styles/keyoxide/catppuccin.user.css index 36675f5469..a76baa7194 100644 --- a/styles/keyoxide/catppuccin.user.css +++ b/styles/keyoxide/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Keyoxide Catppuccin +@name Keyoxide Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/keyoxide @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/keyoxide -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/keyoxide/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/keyoxide/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Akeyoxide @description Soothing pastel theme for Keyoxide @author Catppuccin @@ -13,294 +13,4 @@ @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 url-prefix('https://keyoxide.org') -{ - @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]; - - @text-filter: @catppuccin[@@lookup][@text-filter]; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - --primary-color: @accent-color; - --primary-color-subtle: lighten(@accent-color, 5%); - --body-background-color: @mantle; - --section-background-color: @base; - --text-color: @text; - --text-color-subtle: @subtext1; - --text-color-inverse: @crust; - - --link-color: @blue; - --link-color-subtle: var(--text-color); - --link-color-hover: lighten(@blue, 5%); - --line-color-subtle: @surface1; - --button-text-color: var(--text-color); - --button-text-color-hover: var(--text-color); - --button-border-color: @surface0; - --button-border-color-hover: @surface0; - --button-background-color: @surface0; - --button-background-color-hover: @surface1; - --input-text-color: var(--text-color); - --input-text-color-hover: var(--text-color); - --input-border-color: @surface0; - --input-border-color-hover: @surface0; - --input-background-color: @mantle; - --input-background-color-hover: @mantle; - --footer-text-color: var(--text-color-subtle); - - .kx-item details summary .info img, - .kx-item details .subsection > img { - filter: @text-filter; - } - - kx-claim, - kx-key { - --loader-color: @subtext1; - --success-color: @green; - --failure-color: @red; - --background-color: @surface0; - --header-background-color: @surface1; - } - - a.button.button--donate.button--opencollective { - background-color: @blue; - color: @crust; - - &:hover { - background-color: lighten(@blue, 5%); - } - - svg { - fill: @crust; - } - } - } -} - -@-moz-document domain('docs.keyoxide.org'), domain('blog.keyoxide.org') { - @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]; - - @text-filter: @catppuccin[@@lookup][@text-filter]; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - background-color: @base; - - --clr-primary-100: @crust; - --clr-primary-99: @crust; - --clr-primary-98: @mantle; - --clr-primary-95: @base; - --clr-primary-90: lighten(@accent-color, 30%); - --clr-primary-80: lighten(@accent-color, 20%); - --clr-primary-70: lighten(@accent-color, 10%); - --clr-primary-60: @accent-color; - --clr-primary-50: darken(@accent-color, 5%); - --clr-primary-40: darken(@accent-color, 10%); - --clr-primary-35: darken(@accent-color, 15%); - --clr-primary-30: darken(@accent-color, 20%); - --clr-primary-25: darken(@accent-color, 25%); - --clr-primary-20: darken(@accent-color, 30%); - --clr-primary-10: darken(@accent-color, 35%); - --clr-primary-0: @text; - --clr-primary: @accent-color; - --clr-header: @text; - --clr-header-subtle: @subtext1; - --clr-text: @text; - --clr-text-subtle: @subtext1; - --clr-bg: @mantle; - --clr-bg-alt: @crust; - --clr-border: @surface0; - --clr-link: @blue; - - --clr-secondary-20: @subtext1; - - nav a.active { - color: @crust; - } - - .quick-links img, - [src="/chevron-up.svg"], - [src="/chevron-down.svg"] { - filter: @text-filter; - } - img[title="Keyoxide logo"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - table { - &, - td { - border-color: @surface0; - } - } - - pre { - background-color: @mantle !important; - color: @text !important; - - span[style="color:#c82728;"] { - color: @blue !important; - } - span[style="color:#4271ae;"], - span[style="color:#f07219;"] { - color: @green !important; - } - span[style="color:#8e908c;"] { - color: @overlay0 !important; - } - span[style="color:#8959a8;"] { - color: @mauve !important; - } - span[style="color:#839c00;"] { - color: @green !important; - } - span[style="color:#3e999f;"] { - color: @teal !important; - } - } - - .info { - background-color: @mantle; - - &::before { - background-color: @sky; - color: @crust; - } - } - - .warning { - background-color: @mantle; - - &::before { - background-color: @yellow; - color: @crust; - } - } - - .widget { - background-color: fade(@accent-color, 60%); - border-color: @accent-color; - - .title { - color: @text; - } - - input, - select { - background-color: @mantle; - } - } - } -} - -/* 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; @text-filter: brightness(0) saturate(100%) invert(32%) sepia(14%) saturate(808%) hue-rotate(196deg) brightness(92%) contrast(95%); @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; @text-filter: brightness(0) saturate(100%) invert(82%) sepia(17%) saturate(401%) hue-rotate(191deg) brightness(97%) contrast(98%); @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; @text-filter: brightness(0) saturate(100%) invert(72%) sepia(78%) saturate(147%) hue-rotate(195deg) brightness(103%) contrast(92%); @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; @text-filter: brightness(0) saturate(100%) invert(94%) sepia(11%) saturate(2056%) hue-rotate(182deg) brightness(96%) contrast(99%); @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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/keyoxide/catppuccin.user.less b/styles/keyoxide/catppuccin.user.less new file mode 100644 index 0000000000..5a797b6ce4 --- /dev/null +++ b/styles/keyoxide/catppuccin.user.less @@ -0,0 +1,303 @@ +/* ==UserStyle== +@name Keyoxide Catppuccin +@namespace github.com/catppuccin/userstyles/styles/keyoxide +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/keyoxide +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/keyoxide/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Akeyoxide +@description Soothing pastel theme for Keyoxide +@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 url-prefix("https://keyoxide.org") { + @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]; + + @text-filter: @catppuccin[@@lookup][@text-filter]; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + --primary-color: @accent-color; + --primary-color-subtle: lighten(@accent-color, 5%); + --body-background-color: @mantle; + --section-background-color: @base; + --text-color: @text; + --text-color-subtle: @subtext1; + --text-color-inverse: @crust; + + --link-color: @blue; + --link-color-subtle: var(--text-color); + --link-color-hover: lighten(@blue, 5%); + --line-color-subtle: @surface1; + --button-text-color: var(--text-color); + --button-text-color-hover: var(--text-color); + --button-border-color: @surface0; + --button-border-color-hover: @surface0; + --button-background-color: @surface0; + --button-background-color-hover: @surface1; + --input-text-color: var(--text-color); + --input-text-color-hover: var(--text-color); + --input-border-color: @surface0; + --input-border-color-hover: @surface0; + --input-background-color: @mantle; + --input-background-color-hover: @mantle; + --footer-text-color: var(--text-color-subtle); + + .kx-item details summary .info img, + .kx-item details .subsection > img { + filter: @text-filter; + } + + kx-claim, + kx-key { + --loader-color: @subtext1; + --success-color: @green; + --failure-color: @red; + --background-color: @surface0; + --header-background-color: @surface1; + } + + a.button.button--donate.button--opencollective { + background-color: @blue; + color: @crust; + + &:hover { + background-color: lighten(@blue, 5%); + } + + svg { + fill: @crust; + } + } + } +} + +@-moz-document domain("docs.keyoxide.org"), domain("blog.keyoxide.org") { + @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]; + + @text-filter: @catppuccin[@@lookup][@text-filter]; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + background-color: @base; + + --clr-primary-100: @crust; + --clr-primary-99: @crust; + --clr-primary-98: @mantle; + --clr-primary-95: @base; + --clr-primary-90: lighten(@accent-color, 30%); + --clr-primary-80: lighten(@accent-color, 20%); + --clr-primary-70: lighten(@accent-color, 10%); + --clr-primary-60: @accent-color; + --clr-primary-50: darken(@accent-color, 5%); + --clr-primary-40: darken(@accent-color, 10%); + --clr-primary-35: darken(@accent-color, 15%); + --clr-primary-30: darken(@accent-color, 20%); + --clr-primary-25: darken(@accent-color, 25%); + --clr-primary-20: darken(@accent-color, 30%); + --clr-primary-10: darken(@accent-color, 35%); + --clr-primary-0: @text; + --clr-primary: @accent-color; + --clr-header: @text; + --clr-header-subtle: @subtext1; + --clr-text: @text; + --clr-text-subtle: @subtext1; + --clr-bg: @mantle; + --clr-bg-alt: @crust; + --clr-border: @surface0; + --clr-link: @blue; + + --clr-secondary-20: @subtext1; + + nav a.active { + color: @crust; + } + + .quick-links img, + [src="/chevron-up.svg"], + [src="/chevron-down.svg"] { + filter: @text-filter; + } + img[title="Keyoxide logo"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + table { + &, + td { + border-color: @surface0; + } + } + + pre { + background-color: @mantle !important; + color: @text !important; + + span[style="color:#c82728;"] { + color: @blue !important; + } + span[style="color:#4271ae;"], + span[style="color:#f07219;"] { + color: @green !important; + } + span[style="color:#8e908c;"] { + color: @overlay0 !important; + } + span[style="color:#8959a8;"] { + color: @mauve !important; + } + span[style="color:#839c00;"] { + color: @green !important; + } + span[style="color:#3e999f;"] { + color: @teal !important; + } + } + + .info { + background-color: @mantle; + + &::before { + background-color: @sky; + color: @crust; + } + } + + .warning { + background-color: @mantle; + + &::before { + background-color: @yellow; + color: @crust; + } + } + + .widget { + background-color: fade(@accent-color, 60%); + border-color: @accent-color; + + .title { + color: @text; + } + + input, + select { + background-color: @mantle; + } + } + } +} + +/* deno-fmt-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; @text-filter: brightness(0) saturate(100%) invert(32%) sepia(14%) saturate(808%) hue-rotate(196deg) brightness(92%) contrast(95%); @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; @text-filter: brightness(0) saturate(100%) invert(82%) sepia(17%) saturate(401%) hue-rotate(191deg) brightness(97%) contrast(98%); @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; @text-filter: brightness(0) saturate(100%) invert(72%) sepia(78%) saturate(147%) hue-rotate(195deg) brightness(103%) contrast(92%); @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; @text-filter: brightness(0) saturate(100%) invert(94%) sepia(11%) saturate(2056%) hue-rotate(182deg) brightness(96%) contrast(99%); @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +}; diff --git a/styles/lastfm/catppuccin.user.css b/styles/lastfm/catppuccin.user.css index 799070dc05..d8bf93d3b1 100644 --- a/styles/lastfm/catppuccin.user.css +++ b/styles/lastfm/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Last.fm Catppuccin +@name Last.fm Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/lastfm @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lastfm -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lastfm/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lastfm/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alastfm @description Soothing pastel theme for Last.fm @author Catppuccin @@ -13,1732 +13,4 @@ @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("last.fm") { - @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]; - - @accent-color-dim: darken(@accent-color, 3%); - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - & when not (@lookup = latte) { - @accent-color-dim: fadeout(@accent-color, 50); - .layout-image { - background: @base; - .layout-image-image { - &[src="https://lastfm.freetls.fastly.net/i/u/300x300/4128a6eb29f94943c9d206c08e625904.jpg"], - &[src="https://lastfm.freetls.fastly.net/i/u/237x178/2a96cbd8b46e442fc41c2b86b821562f.jpg"], - &[src="https://lastfm.freetls.fastly.net/i/u/300x300/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg"] - { - mix-blend-mode: screen; - filter: invert(1); - } - } - } - [src="https://lastfm.freetls.fastly.net/i/u/avatar70s/2a96cbd8b46e442fc41c2b86b821562f.jpg"], - [src="https://lastfm.freetls.fastly.net/i/u/64s/4128a6eb29f94943c9d206c08e625904.jpg"], - [src="https://lastfm.freetls.fastly.net/i/u/64s/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg"] - { - mix-blend-mode: screen; - filter: invert(1); - } - .cover-art { - background: @base; - } - .avatar::after, - .cover-art::after, - .image-list-item::after, - .video-thumbnail::after { - box-shadow: inset 0 0 0 1px rgb(@subtext0, 7%); - } - } - - /* ------UNIVERSAL STYLES INCASE SOME GET MISSED------ */ - body { - color: @text; - background: @base; - } - h1 { - color: @accent-color; - } - .mimic-link { - color: @sapphire; - } - hr { - border-color: @overlay1; - } - a { - color: @accent-color; - &:hover { - color: @accent-color-dim; - } - } - - // Mixin to dynamically set colors of album, artist and track categories - - .category-colors() { - &artist { - --category-background: @yellow; - } - &album { - --category-background: @green; - } - &track { - --category-background: @blue; - } - } - - // Evil image mask hack - // Use as follows: - // .maskimage(mask-image, background-color, mask-position, mask-size, mask-repeat); - // Setting any value to "skip" skips that attribute - .mask-image(@mask-image: url(""), @mask-color: skip, @mask-position: skip, @mask-size: skip, @mask-repeat: skip) { - & when not (@mask-color = skip) { - background-image: none !important; - background-color: @mask-color; - } - & when not (@mask-image = skip) { - mask-image: @mask-image; - -webkit-mask-image: @mask-image; - } - & when not (@mask-position = skip) { - mask-position: @mask-position; - -webkit-mask-position: @mask-position; - } - & when not (@mask-size = skip) { - mask-size: @mask-size; - -webkit-mask-size: @mask-size; - } - & when not (@mask-repeat = skip) { - mask-repeat: @mask-repeat; - -webkit-mask-repeat: @mask-repeat; - } - } - /* -----------------SETTINGS------------------- */ - .content-form .form-row-help-text, - .footnotes { - color: @overlay0; - } - .content-form legend { - color: @subtext1; - } - .change-username-upsell { - background: @mantle; - } - .change-username-faded h2::after { - .mask-image(url("/static/images/icons/lock_dark_24@2x.a7652d49d507.png"), @overlay0, skip, 24px 24px, no-repeat); - } - /* -----------CHECKBOXES, DROPDOWNS AND RADIOS---------- */ - .lfm-form-radio input[type="radio"]:checked + label::before { - border-color: @accent-color; - box-shadow: inset 0 0 0 4px @accent-color; - background-color: @base; - } - .lfm-form-radio input[type="radio"] + label::before { - background-color: @crust; - border-color: @surface1; - } - .content-form select { - background-image: none; // Tempfix - } - - /* HOME PAGE */ - .main-content, - .container, - .content-top-has-nav .content-top, - .two-column-layout .content-top { - background-color: @base; - } - - .content-top-has-nav .content-top::after, - .two-column-layout .content-top::after { - border-top-color: @accent-color-dim; - } - - .homefeed .content-top .secondary-nav-item-link--active, - .home-welcome-header { - color: @text; - } - .secondary-nav-item-link { - color: @subtext0; - } - - .secondary-nav-item-link:focus, - .secondary-nav-item-link:hover, - .homefeed .content-top .secondary-nav-item-link--active, - .homefeed .content-top .secondary-nav-item-link--active:focus, - .homefeed .content-top .secondary-nav-item-link--active:hover { - color: @text; - } - - .homefeed { - .content-top .secondary-nav-item { - &--artists, - &--albums, - &--tracks, - &--events { - .secondary-nav-item-link:hover::after { - background-color: @accent-color-dim; - } - } - } - &--artists, - &--albums, - &--tracks, - &--events { - .content-top .secondary-nav-item-link--active::after { - background-color: @accent-color-dim; - } - } - } - .recs-feed .recs-feed, - .grid-items { - &-cover-image-wrap::after { - background-image: linear-gradient( - 180deg, - transparent 0, - rgba(@mantle, 0.4) 50%, - rgba(@mantle, 0.7) 50%, - rgba(@mantle, 0.7) 100% - ); - } - } - - .recs-feed .context { - background: @mantle; - color: @text; - box-shadow: none; - box-shadow: - inset 1px 0 darken(@mantle, 3%), - inset -1px -1px @crust; - } - .recs-feed .recs-feed-item { - background: transparent; - box-shadow: none; - } - - .stationlink-list .stationlink { - color: @subtext0; - &:focus, - &:hover { - color: @text; - &::before { - background-color: @subtext0; - } - } - &::after { - border-bottom-color: @accent-color-dim; - } - &::before { - background-color: @accent-color; - -webkit-filter: invert(0%); - filter: invert(0%); - } - } - - .subscribe-cta, - .mpu-subscription-upsell, - .mpu-subscription-upsell--mpu { - display: none; - } - .join-cta { - background-color: transparent; - } - .join-cta h3 { - color: @accent-color; - } - - .lazy-features-footer { - display: none; - } - /* ERROR */ - #error { - color: @text; - } - - /* info banner */ - .nag-bar--info { - background-color: @base !important; - } - - /* LIVE */ - /* MUSIC */ - .content-top-header { - color: @accent-color; - } - - .minimal-navigation-item-link { - &, - &:focus, - &:hover { - color: @subtext0; - } - } - - .minimal-navigation-item-link--active, - .music-section-heading, - .music-more-artists-item-name a, - .music-releases-item-name a { - &, - &:focus, - &:hover { - color: @text; - } - } - - .music-releases-item-artist, - .column-tracks-item-name, - .column-tracks-item-artist, - .music-gallery-artist { - color: @text; - } - - .music-section-rediscover-subscribe-banner-cta { - background-color: @base; - } - - /* PROFILE */ - /* BANNER */ - .header--overview .header-background { - opacity: 0.4; - } - - /* SEARCH */ - .artist-result-heading, - .album-result-heading { - color: @text; - } - - /* RECOMMENDATIONS */ - & when not (@lookup = "latte") { - .recs-feed-title a { - color: @text !important; - } - } - & when (@lookup = "latte") { - .recs-feed-title a { - color: @crust !important; - } - } - .recs-feed-item, - .recs-feed .recs-feed-item { - &-- { - .category-colors(); - } - } - @media (min-width: 768px) { - .recs-feed .context::before { - border-radius: 50%; - content: ""; - height: 32px; - left: auto; - position: absolute; - right: 15px; - top: -16px; - width: 32px; - background: var(--category-background) !important; - z-index: 1; - } - .recs-feed .recs-feed-item .context::after { - .mask-image(url("/static/images/icons/rec_types_16.93a8040cce71.png"), @crust, 0 0, 32px 160px, no-repeat); - z-index: 2; - } - .recs-feed .recs-feed-item--album .context::after { - -webkit-mask-position: 0 -64px; - } - .recs-feed .recs-feed-item--artist .context::after { - -webkit-mask-position: 0 -32px; - } - } - .recs-feed .context-love-icon::before { - .mask-image(url("/static/images/icons/love_12.be2fe9170476.png"), @red, 0 0, 12px 12px, no-repeat); - } - .secondary-nav { - box-shadow: inset 0 -1px @accent-color; - } - .music-recommended-artists-artist-name, - .music-recommended-artists-context, - .pagination-page, - .pagination-next { - color: @text; - } - - .music-recommended-albums- { - &item-name, - &album-artist, - &album-context { - color: @text; - } - } - - .recommended-tracks-item-name, - .recommended-tracks-item-artist, - .big-tags-item-context { - color: @text; - } - - p { - color: @subtext0; - } - - /* RECAP PROMOS */ - .promo-v3 .listening-report-promo { - background: @mantle; - border-color: rgba(@mantle, 0.5); - &:hover, - &:focus { - background: @crust; - border-color: rgba(@crust, 0.5); - } - &-date::after { - .mask-image(url("/static/images/listening-report/v3/report-arrow-up.b6c5a2eb4c3b.svg"), @text, skip, contain); - height: 0; - width: 0; - padding: 7px; - filter: none; - } - } - - /* CHARTS */ - .adaptive-skin-wrapper, - .row { - background-color: @base; - } - - .two-column-layout .container { - background-size: 0; - background-position: 0 0; - background-color: @base; - } - - ._buffer-reset, - .sidebar-heading { - color: @accent-color; - } - - .sidebar-group-heading { - color: @text; - } - - .resource-list--sidebar-item-name { - color: @text; - } - .js-link-block.globalchart-item { - background-color: @crust; - box-shadow: - 0 1px @base, - inset 0 -1px @base; - } - .globalchart a, - .globalchart a:focus, - .globalchart a:hover { - color: @text; - } - - .footer-top-row { - background-color: @mantle; - } - - /* EVENTS */ - .events-filter, - .events-filter-recommended, - .dropdown-menu-clickable-button:focus, - .dropdown-menu-clickable-button:hover { - color: @text; - } - - .events-filters { - border-bottom-color: @accent-color; - } - - .events-list-item-venue--address, - .events-list-item-event--lineup { - color: @subtext0; - } - .events-list-anhv1 a, - .events-list-anhv1 a:focus, - .events-list-anhv1 a:hover, - .events-list-item-event--title, - .events-list-item-venue--title { - color: @text; - } - - /* FEATURES */ - .features-header .features-teaser-body, - .features-teaser-wrap--promoted .features-teaser-body { - background: @base; - } - - .features-teaser-title a, - .features-teaser-title a:focus, - .features-teaser-title a:hover { - color: @text; - } - - /* FEATURES POST */ - .features-post-header-body { - background-color: @base; - } - - .features-post-header-title { - color: @accent-color; - } - - .features-post-artist { - color: @text; - } - - .features-post-byline-item.features-post-author { - color: @text; - } - - /* PROFILE */ - .header-avatar-add { - &, - &:not(.cta--inactive):focus, - &:not(.cta--inactive):hover { - background-color: @accent-color-dim; - } - } - .dropdown-menu-clickable, - #share-library-artist, - .dropdown-menu-clickable-item:active, - body:not([data-whatinput="touch"]) .dropdown-menu-clickable-item:focus, - body:not([data-whatinput="touch"]) .dropdown-menu-clickable-item:hover { - background-color: @base; - } - .header--overview { - background-color: @base; - } - .header-metadata .header-metadata-title, - .header-scrobble-since, - .header-title-display-name { - color: @subtext1; - } - .chartlist-play-button::before { - background-color: @accent-color; - -webkit-filter: invert(0%); - filter: invert(0%); - } - .chartlist-play-button:focus:focus::before, - .chartlist-play-button:focus:hover::before, - .chartlist-play-button:hover:focus::before, - .chartlist-play-button:hover:hover::before { - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); - background-color: @subtext0; - } - - .text-Color-link, - h2, - .dropdown-menu-clickable-button.disclose-active { - color: @accent-color; - } - .dropdown-menu-clickable-button, - .dropdown-menu-clickable-item--selected { - &, - &:focus, - &:hover { - color: @accent-color; - } - } - .dropdown-menu-clickable-item, - .dropdown-menu-clickable-item:active, - body:not([data-whatinput="touch"]) .dropdown-menu-clickable-item:focus, - body:not([data-whatinput="touch"]) .dropdown-menu-clickable-item:hover { - color: @text; - } - .btn-secondary { - background-color: @accent-color-dim; - color: @crust; - } - - body:not(.js-focus-visible) - body:not([data-whatinput="touch"]) - .btn-secondary:focus, - body:not([data-whatinput="touch"]) .btn-secondary .focus-visible, - body:not([data-whatinput="touch"]) .btn-secondary:hover { - background-color: @accent-color; - color: @crust; - } - input[type="password"] { - background-color: @crust !important; - border-color: @crust !important; - } - - @keyframes chartlist-anim { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 51%; - } - 100% { - background-position: 0% 50%; - } - } - @keyframes chartlist-anim { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 51%; - } - 100% { - background-position: 0% 50%; - } - } - @keyframes chartlist-anim { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 51%; - } - 100% { - background-position: 0% 50%; - } - } - - .chartlist-row--highlight, - .chartlist-row--now-scrobbling { - /* background-color: #5a1717; */ - background: linear-gradient(270deg, @base 60%, rgba(@accent-color, 0.2)); - background-size: 200% 200%; - -webkit-animation: chartlist-anim 10s ease infinite; - -moz-animation: chartlist-anim 10s ease infinite; - animation: chartlist-anim 10s ease infinite; - } - - .chartlist-name, - .chartlist-artist { - color: @subtext0; - } - - .chartlist-break::after, - .chartlist-row::after { - border-bottom-color: @surface0; - } - - .chartlist-row:hover { - background-color: @crust; - } - - .chartlist-count-bar-slug { - background-color: transparent !important; - background-image: linear-gradient(to right, @accent-color, @accent-color); - color: @crust; - } - .chartlist-count-bar-value { - color: @crust; - } - a:focus .chartlist-count-bar-slug, - a:hover .chartlist-count-bar-slug { - background-color: @accent-color-dim; - } - - .chartlist-count-bar-link { - &, - &:focus, - &:hover { - color: @text; - } - } - - .shout-form textarea { - background-color: @crust; - } - - .chartlist-index { - color: @text; - } - - .chartlist tr:nth-child(1) td.chartlist-index { - color: @accent-color; - } - - /* LISTENING REPORT */ - - // Set color for containers - - .report-box-container { - background: @mantle; - color: @text; - } - - // Topmost report box - - .report-box-container--overview { - background: @accent-color; - color: @base; - // Top border design (////) - .report-headline-border { - .mask-image(url("/static/images/listening-report/v3/bg-lines.73682e46b8be.svg")); - background: @base; - } - .report-headline-top { - color: @base; - border-bottom-color: @base; - } - // Comparison badge colors - .report-headline-meta - .badge-container - .report-badge.report-badge--comparison { - border-color: @base; - .report-arrow { - background: @base; - } - } - // Topmost report chart styling - .report-headline__chart { - .highcharts-series-0 .highcharts-point { - fill: @base; - stroke: rgba(@base, 0.5); - } - .highcharts-series-1 .highcharts-point { - fill: rgba(@base, 0.5); - stroke: transparent; - } - .highcharts-axis-labels { - stroke: @base; - } - } - } - // Middle report containers - .user-dashboard-layout--version-3 .main-content, - .user-dashboard-layout--version-3 .user-dashboard > .container { - // Set background - background: @base; - .listening-report-row { - // Header divider colors follow accent - border-bottom-color: @accent-color; - } - .top-item-overview { - // Style category boxes - &-- { - .category-colors(); - } - background: var(--category-background); - color: @base; - // Badge color is base on accent - .badge-container { - .report-badge { - border-color: @base; - } - .report-badge--comparison .report-arrow { - background: @base; - } - } - // Chart styling - .highcharts-series-group .highcharts-point { - fill: @base; - } - } - // Set color for badges - .listening-report-top-item { - &-- { - .category-colors(); - } - .listening-report-top-item-badge { - background: var(--category-background); - } - color: @text; - } - .top-new-item-type { - &__ { - .category-colors(); - } - background: var(--category-background); - } - // Triangle visualizer comparison subtext - .triangle-ratio--details .comparison { - color: @subtext0; - } - // Style badges on mantle background - .badge-container .report-badge--comparison { - border-color: @text; - .report-arrow { - background: @text; - vertical-align: initial; - } - } - // Style subtext - .quick-fact-row { - color: @subtext1; - &:hover { - color: @text; - } - } - .listening-report-highlight-comparison, - .quick-fact-comparison-text { - color: @subtext0; - } - // User comparison icons - .tag-label { - background: linear-gradient( - 90deg, - darken(@accent-color, 5%), - @accent-color - ); - // Total scrobbles header - &--total-scrobbles::before { - .mask-image(url("/static/images/icons/icon-scrobble.66a5e6978c62.svg"), @base); - } - // Highest discovery header - &--discovery::before { - .mask-image(url("/static/images/icons/icon-compass.ce30ab3b6240.svg"), @base); - } - } - .header-metadata-title { - color: @text; - } - .listening-report-brick { - &-divider { - border-color: @surface0; - } - &-head { - border-bottom-color: @crust; - } - &-inner:hover { - background: mix(@mantle, @base); - } - &-item-scrobbles { - color: @overlay1; - } - // Highlight self for higher or lower position on chart - &-inner--highlight { - &.listening-report-highlight--down { - background: rgba(@red, 0.1); - &:hover { - background: rgba(@red, 0.15); - } - } - &.listening-report-highlight--up { - background: rgba(@green, 0.1); - &:hover { - background: rgba(@green, 0.15); - } - } - } - } - } - - // footer - .user-dashboard-layout--version-3 .footer { - background-color: @mantle; - } - - // Top tags visualizer: Rainbow colors implemented from Catppuccin Palette - - @gradient-colors: @rosewater, @flamingo, @pink, @mauve, @red, @maroon, - @peach, @yellow, @green, @teal, @sky, @sapphire, @blue, @lavender; - each(range(0, 11), { - - .report-box-container--top-tags-over-time .top-tags-over-time-colour-@{value} { - fill: extract(@gradient-colors, @value + 1); - stroke: extract(@gradient-colors, @value + 1); - } - }); - - .highcharts-radial-axis-grid .highcharts-grid-line { - stroke: @surface0; - } - - // universal report arrows - .report-arrow { - .mask-image(url("/static/images/listening-report/v3/report-arrow-up.b6c5a2eb4c3b.svg"), @base, skip, contain); - background-size: contain; - padding: 4px; - margin: 2px; - height: 0; - width: 0; - filter: invert(0) !important; - } - - .music-decades-chart-container { - .highcharts-series-1 .highcharts-point { - fill: rgba(@accent-color, 0.5); - } - } - - /* SHOUT BOX */ - - .shout { - &--active { - background-color: fadeout(@surface1, 30%); - } - - &, - &-form { - border-bottom-color: @surface0; - } - &-user a { - color: @text; - } - &-timestamp, - &-reply { - color: @subtext0; - &:hover { - color: @overlay2; - } - } - &-reply::before { - .mask-image(url("/static/images/icons/reply_sprite_16@2x.a145ef7db2f5.png"), @subtext0, skip, 16px 32px); - } - - &-form { - border-color: none; - } - &-permalink.shout-permalink { - &:focus, - &:hover { - color: @overlay2; - } - } - .vote-button { - color: @overlay1; - &::before { - .mask-image(url("/static/images/icons/upvote_sprite_16@2x.5e02a31189da.png"), @overlay2, 0 0, 16px 32px); - } - &--voted { - color: @green; - &::before { - .mask-image(skip, @green, 0 -16px, skip); - } - } - } - } - - /* LIBRARY */ - .col-sidebar._buffer-sidebar - > figure - > div - > div - > svg - > .highcharts-background { - fill: @base; - } - - .highcharts-point { - fill: @accent-color-dim; - &-select { - fill: @accent-color; - } - } - - .highcharts-axis-labels > text { - fill: @text !important; - } - - #scrobble-chart-content { - .highcharts-background { - fill: @base; - } - .highcharts-point { - fill: rgba(@accent-color, 0.2); - } - .highcharts-xaxis .highcharts-axis-line, - .highcharts-yaxis-grid .highcharts-grid-line { - stroke: @surface2; - stroke-width: 1; - } - .highcharts-axis-title { - fill: @subtext0 !important; - } - } - - /* FOLLOWING */ - .user-list-name { - color: @text; - } - .user-follow, - .user-follow::after { - color: @accent-color; - background-color: @surface0; - } - - /* FOLLOW BUTTON */ - [data-toggle-button-current-state="unfollowed"] - .header-follower-btn::before { - background-color: @red; - color: @text; - } - [data-toggle-button-current-state="followed"] .header-follower-btn::before { - background-color: @green; - color: @text; - } - [data-toggle-button-current-state="followed"] - .header-follower-btn:hover::before { - background-color: @red; - color: @text; - } - - .header-follower-btn { - color: @accent-color; - } - - /* BOOKMARKS */ - .music-bookmarks-artists-item-name { - color: @text; - } - - /* TASTE-O-METER COLORS */ - .tasteometer-donut-base { - fill: @surface1; - } - .tasteometer-avatar img { - border-color: @surface1; - } - .tasteometer-compat-very_low .tasteometer-compat-colour { - color: @subtext0; - fill: @subtext0; - } - .tasteometer-compat-low .tasteometer-compat-colour { - color: @mauve; - fill: @mauve; - } - .tasteometer-compat-medium .tasteometer-compat-colour { - color: @green; - fill: @green; - } - .tasteometer-compat-very_high .tasteometer-compat-colour { - color: @peach; - fill: @peach; - } - .tasteometer-compat-super .tasteometer-compat-colour { - color: @red; - fill: @red; - } - - /* ARTIST */ - .section-with-separator::after { - background-color: @base; - } - body .header-new-bookmark-button, - body .header-new-download-button, - body .header-new-love-button, - body .header-new-more-button { - color: @base; - background-color: @accent-color; - } - body:not([data-whatinput="touch"]) { - .header-new-bookmark-button, - .header-new-download-button, - .header-new-love-button, - .header-new-more-button { - .focus-visible, - &:hover { - color: @base; - background-color: @accent-color; - } - } - } - .wiki-block-inner, - .catalogue-metadata-heading, - .catalogue-metadata-description, - .header-metadata-tnew-title { - color: @subtext0; - } - - .text-18 { - color: @accent-color; - } - - .artist-similar-artists-sidebar-item-name, - .artist-top-albums-item-name, - .listeners-section-item-name, - .catalogue-overview-similar-artists-full-width-item-name, - .similar-albums-item-name, - .discovery-stat-top-item-name, - .source-album-artist, - .source-album-name, - .track-similar-tracks-item-name, - .about-artist-name, - .catalogue-overview-similar-artists-item-name { - a { - &, - &:focus, - &:hover { - color: @text; - } - } - } - - .events-list-item-event-name.link-block-target > span { - color: @text; - } - - .events-list-item-venue > span { - color: @subtext0; - } - - .resource-external-link, - .resource-external-link:hover { - color: @text; - } - .js-playlink-station.desktop-playlink.inline-section-control.stationlink { - color: @text; - } - .section-with-settings .section-control::before { - border-right-color: @subtext0; - } - - .header-metadata .header-metadata-display a { - color: @accent-color; - } - - .big-artist-list-title a { - color: var(--subtext1); - } - .big-artist-list-title a:hover { - color: @text; - } - - /* SIMILAR ARTISTS */ - .similar-artists-item-name { - color: @text; - } - - .similar-artists-item-wiki-inner-2 { - color: @subtext0; - } - - .section-playlink::before { - background-color: @accent-color; - -webkit-filter: invert(0%); - filter: invert(0%); - } - - .section-playlink:hover::before { - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); - background-color: @subtext0; - } - - .section-playlink.js-playlink-station { - color: @text; - } - - .stationlink::before { - background-color: @accent-color; - -webkit-filter: invert(0%); - filter: invert(0%); - } - - .stationlink:focus::before, - .stationlink:hover::before { - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); - background-color: @subtext0; - } - - .video-preview-upload-cta { - background-color: @crust; - box-shadow: 0 0 0 2px @accent-color-dim; - } - - .video-preview-upload-cta:not(.cta--inactive):focus, - .video-preview-upload-cta:not(.cta--inactive):hover { - background-color: @base; - } - - .highcharts-plot-bands-0 > path { - fill: @overlay0; - } - - .listener-trend .highcharts-area { - fill: fadeout(@red, 10%); - } - - .listener-trend .highcharts-graph { - stroke: @red; - } - - .Colored-cta { - background-color: fadeout(@surface2, 30%); - } - .Colored-cta:not(.cta--inactive):focus, - .Colored-cta:not(.cta--inactive):hover { - background-color: fadeout(@surface2, 70%); - } - .similar-items-sidebar-item-name { - color: @text; - } - .resource-list--release-list-item-name { - color: @text; - } - .shout--deleted, - .shout--reported { - background: @base; - } - .play-this-track-playlinks { - color: @text; - } - - /* WIKI */ - .factbox-item, - #factbox-more-members { - color: @subtext0; - } - - .factbox-item > h4 { - color: @accent-color; - } - - .alert-warning { - color: @peach; - background-color: @crust; - } - - .content-form { - .form-control, - input[type="date"], - input[type="email"], - input[type="number"], - input[type="password"], - input[type="text"], - input[type="url"], - select, - textarea { - background-color: @crust !important; - border-color: @crust !important; - color: @subtext0 !important; - &:focus { - box-shadow: none !important; - border-color: @crust !important; - } - &:hover:not([disabled]) { - border-color: @crust !important; - color: @text !important; - } - } - } - .control-label { - color: @accent-color; - } - .join-form .form-row-help-text { - color: @text; - background-color: @surface1; - } - #stylerules { - background-color: @overlay0; - color: @subtext0; - } - .secondary-nav-item-link--active::after, - a.secondary-nav-item-link:focus::after, - a.secondary-nav-item-link:hover::after { - background-color: @accent-color; - } - - /* DOCUMENTATION/API SECTION */ - #app { - .sidebar { - background: @mantle; - border-color: @mantle; - } - a.sidebar-link { - color: @text; - &:hover { - color: @accent-color; - } - } - .sidebar-heading { - color: @subtext1; - } - a.sidebar-link.active { - color: @accent-color; - border-left-color: @accent-color; - } - a { - color: @accent-color; - } - } - - /* OBSESSIONS */ - .obsession-history-play-all::before { - background-color: @accent-color; - -webkit-filter: invert(0%); - filter: invert(0%); - color: @text; - } - - .obsession-history-play-all.js-playlink-station.inline-section-control { - color: @text; - } - - .obsession-history-play-all:hover::before { - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); - background-color: @subtext0; - } - - .obsession-search-result-header { - color: @accent-color; - } - - .obsession-candidate-heading { - color: @text; - } - - .modal-dialog.popup_content, - .modal-content { - background-color: @mantle; - box-shadow: none; - } - - .modal-body { - background-color: @base; - box-shadow: none; - } - - .content-form textarea:focus { - box-shadow: none; - } - - .content-form textarea:hover:not([disabled]) { - border-color: @accent-color; - } - - /* MESSAGES */ - .inbox-notifications .inbox-notifications__item { - color: @subtext0; - } - - .inbox-notifications .inbox-notifications__item--highlight { - background-color: @overlay0; - } - .inbox-notifications .inbox-notifications__item--hover { - box-shadow: none; - } - .inbox-notifications__item--highlight-hover:hover { - background-color: @crust; - } - - .inbox-message-subject { - color: @accent-color; - } - - .inbox-message-message { - color: @text; - } - - .inbox-message-view .inbox-message-message blockquote { - background: @crust; - border-color: @accent-color; - } - - body:not([data-whatinput="touch"]) - .inbox-notifications - .inbox-notifications__item--hover:hover { - background-color: @crust; - } - - .inbox .inbox-message { - background-color: @crust; - } - - .inbox .inbox-message--unviewed { - background-color: @overlay0; - } - - .inbox .inbox-message--unviewed .inbox-message-status::after { - background-color: @accent-color; - } - - /* ADS */ - .lastfm-ad { - display: none; - } - .full-bleed-ad-container, - .sidebar-ad-container { - background-color: @base; - } - - /* RECOMMENDATIONS ON PROFILE */ - .profile-card-content { - background: @surface0 !important; - } - /* UPGRADE TO PRO */ - .btn-subscribe, - .btn-subscribe:hover, - .btn-subscribe:active { - background-color: @accent-color !important; - } - .listening-report-brick--upsell { - display: none; - } - .your-progress { - color: @text; - } - /* ----Profile Cards Hide------- */ - .profile-cards-container { - display: none !important; - } - /* HEADER */ - .header--overview, - .header--sub-page { - color: @text; - } - /* -----Primary Button------ */ - .btn-primary, - .btn-primary:hover, - .btn-primary:active, - .no-data-message-button, - .no-data-message-button:hover, - .no-data-message-button:active, - .api-session-connect, - .api-session-disconnect:hover, - .api-session-disconnect:active, - .clipboard-button, - body:not(.js-focus-visible) - body:not([data-whatinput="touch"]) - .clipboard-button:focus, - body:not([data-whatinput="touch"]) .clipboard-button .focus-visible, - body:not([data-whatinput="touch"]) .clipboard-button:hover { - background-color: @accent-color !important; - color: @base !important; - } - .api-session-disconnect { - background-color: @accent-color-dim !important; - color: @base !important; - } - /* -----Shortcut Button------ */ - .btn-shortcut, - .btn-shortcut:hover, - .btn-shortcut:active { - background-color: @accent-color-dim !important; - color: @text !important; - } - /* ------HEADER----- */ - header { - background: @mantle; - } - /* ------FOOTER----- */ - .footer .footer-heading { - color: @subtext1; - } - .footer { - background-color: @mantle; - color: @text; - } - .footer .footer-bottom { - border-top-color: none; - } - .footer .footer-bottom .row { - background-color: @mantle; - } - .footer .footer-language--active, - .footer-timezone strong, - .footer .footer-language--active strong { - color: @text; - } - .footer .footer-language, - .footer-timezone, - .footer .footer-legal { - color: @overlay0; - } - .translation { - color: @subtext0; - } - /* --------TOP BAR---------- */ - .top-bar, - .player-bar, - .player-bar .player-bar-progress, - .main-content::before, - .masthead-nav { - background: @mantle; - color: @text !important; - } - .player-bar .player-bar-progress-slug { - background: @accent-color; - } - .masthead-nav-control, - .site-auth-control, - .site-auth--anon::before, - .masthead-nav .navlist-more { - color: @text !important; - } - .masthead-nav .masthead-nav-control::after { - background: @accent-color; - } - .auth-dropdown-menu { - background-color: @base !important; - box-shadow: - 0 1px 10px rgba(0, 0, 0, 0.3), - 0 0 0 1px @surface1 !important; - } - .auth-dropdown-menu-item { - color: @text !important; - } - .auth-dropdown-menu-item:hover, - .auth-dropdown-menu-item:active { - background-color: @surface0 !important; - color: @text !important; - } - .auth-dropdown-menu::before, - .js .auth-dropdown-menu::before, - .site-auth:focus .auth-dropdown-menu::before, - .site-auth:hover .auth-dropdown-menu::before { - .mask-image(url("/static/images/dropdown_arrow_dark@2x.7b7cfaa4e8ee.png"), @surface1, skip, 36px 18px, no-repeat); - } - .masthead-nav .masthead-nav-control, - .masthead-nav .navlist-more, - .site-auth-control { - &:focus, - &:hover { - background-color: transparent; - color: @accent-color !important; - } - } - .site-auth-control.btn-secondary { - color: @base !important; - } - .masthead-search-form { - background-color: @mantle; - } - .masthead-search-submit { - background-color: @accent-color; - color: @base; - } - body:not(.js-focus-visible) - body:not([data-whatinput="touch"]) - .masthead-search-submit:focus, - body:not([data-whatinput="touch"]) .masthead-search-submit .focus-visible, - body:not([data-whatinput="touch"]) .masthead-search-submit:hover { - background-color: @accent-color; - color: @base; - } - .masthead-search-field { - color: @text; - } - /* -------PLAYLISTS--------- */ - .chartlist-timestamp { - color: @subtext0; - } - /* -----GENRES TODAY----- */ - .genretodaybar, - .rolling_no { - background: @mantle !important; - } - /* -----NAV ITEMS----- */ - .library-controls .secondary-nav .secondary-nav-item-link--active, - .date-range-picker-button-inner, - .library-controls .secondary-nav .secondary-nav-item-link--active:focus, - .library-controls .secondary-nav .secondary-nav-item-link--active:hover, - body:not([data-whatinput="touch"]) .catalogue-tags .tag a:hover { - color: @accent-color !important; - } - /* ------ARTIST TAGS----- */ - .catalogue-tags .tag a, - .catalogue-tags .tags-add, - .catalogue-tags .tags-add-cta, - body:not([data-whatinput="touch"]) .catalogue-tags .tag a:hover { - color: @accent-color; - box-shadow: inset 0 0 0 1px @accent-color-dim; - } - /* -----HIDE PLAY BUTTON ON TOP TRACK------ */ - .image-overlay-playlink-link::before { - display: none; - } - /* ---------CHARTS FIX--------- */ - .globalchart .globalchart-item:first-child { - background-color: fadeout(@mantle, 80%); - } - .globalchart-item:first-child .globalchart-rank { - color: @accent-color !important; - } - .globalchart-item .globalchart-rank { - color: @text; - } - /* -------LOG IN PAGE------- */ - .auth-container > .auth-container-animation { - background-color: transparent; - } - #join-animation-container { - display: none !important; - } - h1.text-24 { - color: @accent-color; - } - .checkbox { - color: @text; - } - - /* ----ICONS---- */ - .lazy-buylinks-toggle::before { - .mask-image(url("/static/images/icons/download_sprite_16.2d7999c89e09.png"), @text); - } - - .chartlist-more-button::before { - .mask-image(url("/static/images/icons/more_sprite_16.bceb4a93c77a.png"), @text); - } - - .lazy-buylinks-toggle:hover::before, - .lazy-buylinks-toggle:focus::before, - .chartlist-more-button:hover::before, - .chartlist-more-button:focus::before { - background-color: @subtext0; - } - - .chartlist-love-button, - .header-new-love-button { - &::before { - .mask-image(url("/static/images/icons/love_animation_tracklist_24.3c884b0287d4.png"), @text, -24px 0); - } - &:focus::before, - &:hover::before { - .mask-image(skip, @red, -24px 0); - } - } - - [data-toggle-button-current-state="loved"] .chartlist-love-button, - [data-toggle-button-current-state="loved"] .header-new-love-button { - &::before, - &:focus::before, - &:hover::before { - .mask-image(skip, @red, -552px 0); - transition: mask-position 0.7s steps(22) !important; - -webkit-transition: -webkit-mask-position 0.7s steps(22) !important; - } - } - - .section-settings-toggle::before { - .mask-image(url("/static/images/icons/settings_222_16.f63779d3cbad.png"), @text); - } - - .share-button-profile::before { - .mask-image(url("/static/images/icons/share_222_16.9aba752fb1e9.png"), @text); - } - - .section-settings-toggle:hover::before, - .section-settings-toggle:focus::before, - .share-button-profile:hover::before, - .share-button-profile:focus::before { - background-color: @subtext0; - } - - .cta-link::before, - .lyrics-snippet-more-link ::before, - .trending-tracks-more-link ::before, - .more-link-fullwidth-right ::before { - .mask-image(url("/static/images/icons/arrow_small_right_005399_12.8f025ef116be.png"), @accent-color); - } - - .play-this-track-playlink--itunes::before { - .mask-image(url("/static/images/icons/apple_music_color_24.17c0b1b9e185.png"), @text); - } - - .resource-external-link--homepage::before { - .mask-image(url("/static/images/icons/external_links_16.3d45e81fa3fc.png"), @text); - } - - .alert-warning::before { - .mask-image(url("/static/images/icons/alert/warning_16.93f2fe437139.png"), @peach); - } - - .masthead-search-toggle { - &::before { - .mask-image(url("/static/images/icons/search_16.bde37072495a.png"), @text); - } - &::after { - background: @text; - } - } - - .masthead-search-toggle:hover::before, - .masthead-search-toggle:focus::before { - background-color: @subtext0; - } - - .masthead-search-toggle.disclose-active::before { - .mask-image(url("/static/images/icons/delete_999_24.78e2a3de3ab8.png"), @text); - } - - .masthead-search-toggle.disclose-active:hover::before, - .masthead-search-toggle.disclose-active:focus::before { - background-color: @subtext0; - } - - .js .date-range-picker-button::before { - .mask-image(url("/static/images/icons/date_picker_icon.1d7b21ee3a36.svg"), @accent-color, 0 0, 14px 24px, no-repeat); - } - - .page-loading-logo-container { - svg path { - fill: @red; - stroke: @red; - } - } - - .catalogue-tags .tags-add::before { - .mask-image(url("/static/images/icons/add_link_16.637996ed0e2f.png"), @accent-color); - } - - .layout-image { - background: @crust; - .layout-image-image { - mix-blend-mode: screen; - } - } - } -} - -#rgbify(@color) { - @rgb: red(@color) green(@color) blue(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/lastfm/catppuccin.user.less b/styles/lastfm/catppuccin.user.less new file mode 100644 index 0000000000..aed80a5e1f --- /dev/null +++ b/styles/lastfm/catppuccin.user.less @@ -0,0 +1,1851 @@ +/* ==UserStyle== +@name Last.fm Catppuccin +@namespace github.com/catppuccin/userstyles/styles/lastfm +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lastfm +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lastfm/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alastfm +@description Soothing pastel theme for Last.fm +@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("last.fm") { + @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]; + + @accent-color-dim: darken(@accent-color, 3%); + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + & when not(@lookup = latte) { + @accent-color-dim: fadeout(@accent-color, 50); + .layout-image { + background: @base; + .layout-image-image { + &[src="https://lastfm.freetls.fastly.net/i/u/300x300/4128a6eb29f94943c9d206c08e625904.jpg"], + &[src="https://lastfm.freetls.fastly.net/i/u/237x178/2a96cbd8b46e442fc41c2b86b821562f.jpg"], + &[src="https://lastfm.freetls.fastly.net/i/u/300x300/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg"] { + mix-blend-mode: screen; + filter: invert(1); + } + } + } + [src="https://lastfm.freetls.fastly.net/i/u/avatar70s/2a96cbd8b46e442fc41c2b86b821562f.jpg"], + [src="https://lastfm.freetls.fastly.net/i/u/64s/4128a6eb29f94943c9d206c08e625904.jpg"], + [src="https://lastfm.freetls.fastly.net/i/u/64s/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg"] { + mix-blend-mode: screen; + filter: invert(1); + } + .cover-art { + background: @base; + } + .avatar::after, + .cover-art::after, + .image-list-item::after, + .video-thumbnail::after { + box-shadow: inset 0 0 0 1px rgb(@subtext0, 7%); + } + } + + /* ------UNIVERSAL STYLES INCASE SOME GET MISSED------ */ + body { + color: @text; + background: @base; + } + h1 { + color: @accent-color; + } + .mimic-link { + color: @sapphire; + } + hr { + border-color: @overlay1; + } + a { + color: @accent-color; + &:hover { + color: @accent-color-dim; + } + } + + // Mixin to dynamically set colors of album, artist and track categories + + .category-colors() { + &artist { + --category-background: @yellow; + } + &album { + --category-background: @green; + } + &track { + --category-background: @blue; + } + } + + // Evil image mask hack + // Use as follows: + // .maskimage(mask-image, background-color, mask-position, mask-size, mask-repeat); + // Setting any value to "skip" skips that attribute + .mask-image( + @mask-image: url(""), + @mask-color: skip, + @mask-position: skip, + @mask-size: skip, + @mask-repeat: skip, + ) { + & when not(@mask-color = skip) { + background-image: none !important; + background-color: @mask-color; + } + & when not(@mask-image = skip) { + mask-image: @mask-image; + -webkit-mask-image: @mask-image; + } + & when not(@mask-position = skip) { + mask-position: @mask-position; + -webkit-mask-position: @mask-position; + } + & when not(@mask-size = skip) { + mask-size: @mask-size; + -webkit-mask-size: @mask-size; + } + & when not(@mask-repeat = skip) { + mask-repeat: @mask-repeat; + -webkit-mask-repeat: @mask-repeat; + } + } + /* -----------------SETTINGS------------------- */ + .content-form .form-row-help-text, + .footnotes { + color: @overlay0; + } + .content-form legend { + color: @subtext1; + } + .change-username-upsell { + background: @mantle; + } + .change-username-faded h2::after { + .mask-image( + url("/static/images/icons/lock_dark_24@2x.a7652d49d507.png"), + @overlay0, + skip, + 24px 24px, + no-repeat, + ); + } + /* -----------CHECKBOXES, DROPDOWNS AND RADIOS---------- */ + .lfm-form-radio input[type="radio"]:checked + label::before { + border-color: @accent-color; + box-shadow: inset 0 0 0 4px @accent-color; + background-color: @base; + } + .lfm-form-radio input[type="radio"] + label::before { + background-color: @crust; + border-color: @surface1; + } + .content-form select { + background-image: none; // Tempfix + } + + /* HOME PAGE */ + .main-content, + .container, + .content-top-has-nav .content-top, + .two-column-layout .content-top { + background-color: @base; + } + + .content-top-has-nav .content-top::after, + .two-column-layout .content-top::after { + border-top-color: @accent-color-dim; + } + + .homefeed .content-top .secondary-nav-item-link--active, + .home-welcome-header { + color: @text; + } + .secondary-nav-item-link { + color: @subtext0; + } + + .secondary-nav-item-link:focus, + .secondary-nav-item-link:hover, + .homefeed .content-top .secondary-nav-item-link--active, + .homefeed .content-top .secondary-nav-item-link--active:focus, + .homefeed .content-top .secondary-nav-item-link--active:hover { + color: @text; + } + + .homefeed { + .content-top .secondary-nav-item { + &--artists, + &--albums, + &--tracks, + &--events { + .secondary-nav-item-link:hover::after { + background-color: @accent-color-dim; + } + } + } + &--artists, + &--albums, + &--tracks, + &--events { + .content-top .secondary-nav-item-link--active::after { + background-color: @accent-color-dim; + } + } + } + .recs-feed .recs-feed, + .grid-items { + &-cover-image-wrap::after { + background-image: linear-gradient( + 180deg, + transparent 0, + rgba(@mantle, 0.4) 50%, + rgba(@mantle, 0.7) 50%, + rgba(@mantle, 0.7) 100% + ); + } + } + + .recs-feed .context { + background: @mantle; + color: @text; + box-shadow: none; + box-shadow: inset 1px 0 darken(@mantle, 3%), inset -1px -1px @crust; + } + .recs-feed .recs-feed-item { + background: transparent; + box-shadow: none; + } + + .stationlink-list .stationlink { + color: @subtext0; + &:focus, + &:hover { + color: @text; + &::before { + background-color: @subtext0; + } + } + &::after { + border-bottom-color: @accent-color-dim; + } + &::before { + background-color: @accent-color; + -webkit-filter: invert(0%); + filter: invert(0%); + } + } + + .subscribe-cta, + .mpu-subscription-upsell, + .mpu-subscription-upsell--mpu { + display: none; + } + .join-cta { + background-color: transparent; + } + .join-cta h3 { + color: @accent-color; + } + + .lazy-features-footer { + display: none; + } + /* ERROR */ + #error { + color: @text; + } + + /* info banner */ + .nag-bar--info { + background-color: @base !important; + } + + /* LIVE */ + /* MUSIC */ + .content-top-header { + color: @accent-color; + } + + .minimal-navigation-item-link { + &, + &:focus, + &:hover { + color: @subtext0; + } + } + + .minimal-navigation-item-link--active, + .music-section-heading, + .music-more-artists-item-name a, + .music-releases-item-name a { + &, + &:focus, + &:hover { + color: @text; + } + } + + .music-releases-item-artist, + .column-tracks-item-name, + .column-tracks-item-artist, + .music-gallery-artist { + color: @text; + } + + .music-section-rediscover-subscribe-banner-cta { + background-color: @base; + } + + /* PROFILE */ + /* BANNER */ + .header--overview .header-background { + opacity: 0.4; + } + + /* SEARCH */ + .artist-result-heading, + .album-result-heading { + color: @text; + } + + /* RECOMMENDATIONS */ + & when not(@lookup = "latte") { + .recs-feed-title a { + color: @text !important; + } + } + & when (@lookup = "latte") { + .recs-feed-title a { + color: @crust !important; + } + } + .recs-feed-item, + .recs-feed .recs-feed-item { + &-- { + .category-colors(); + } + } + @media (min-width: 768px) { + .recs-feed .context::before { + border-radius: 50%; + content: ""; + height: 32px; + left: auto; + position: absolute; + right: 15px; + top: -16px; + width: 32px; + background: var(--category-background) !important; + z-index: 1; + } + .recs-feed .recs-feed-item .context::after { + .mask-image( + url("/static/images/icons/rec_types_16.93a8040cce71.png"), + @crust, + 0 0, + 32px 160px, + no-repeat, + ); + z-index: 2; + } + .recs-feed .recs-feed-item--album .context::after { + -webkit-mask-position: 0 -64px; + } + .recs-feed .recs-feed-item--artist .context::after { + -webkit-mask-position: 0 -32px; + } + } + .recs-feed .context-love-icon::before { + .mask-image( + url("/static/images/icons/love_12.be2fe9170476.png"), + @red, + 0 0, + 12px 12px, + no-repeat, + ); + } + .secondary-nav { + box-shadow: inset 0 -1px @accent-color; + } + .music-recommended-artists-artist-name, + .music-recommended-artists-context, + .pagination-page, + .pagination-next { + color: @text; + } + + .music-recommended-albums- { + &item-name, + &album-artist, + &album-context { + color: @text; + } + } + + .recommended-tracks-item-name, + .recommended-tracks-item-artist, + .big-tags-item-context { + color: @text; + } + + p { + color: @subtext0; + } + + /* RECAP PROMOS */ + .promo-v3 .listening-report-promo { + background: @mantle; + border-color: rgba(@mantle, 0.5); + &:hover, + &:focus { + background: @crust; + border-color: rgba(@crust, 0.5); + } + &-date::after { + .mask-image( + url("/static/images/listening-report/v3/report-arrow-up.b6c5a2eb4c3b.svg"), + @text, + skip, + contain, + ); + height: 0; + width: 0; + padding: 7px; + filter: none; + } + } + + /* CHARTS */ + .adaptive-skin-wrapper, + .row { + background-color: @base; + } + + .two-column-layout .container { + background-size: 0; + background-position: 0 0; + background-color: @base; + } + + ._buffer-reset, + .sidebar-heading { + color: @accent-color; + } + + .sidebar-group-heading { + color: @text; + } + + .resource-list--sidebar-item-name { + color: @text; + } + .js-link-block.globalchart-item { + background-color: @crust; + box-shadow: 0 1px @base, inset 0 -1px @base; + } + .globalchart a, + .globalchart a:focus, + .globalchart a:hover { + color: @text; + } + + .footer-top-row { + background-color: @mantle; + } + + /* EVENTS */ + .events-filter, + .events-filter-recommended, + .dropdown-menu-clickable-button:focus, + .dropdown-menu-clickable-button:hover { + color: @text; + } + + .events-filters { + border-bottom-color: @accent-color; + } + + .events-list-item-venue--address, + .events-list-item-event--lineup { + color: @subtext0; + } + .events-list-anhv1 a, + .events-list-anhv1 a:focus, + .events-list-anhv1 a:hover, + .events-list-item-event--title, + .events-list-item-venue--title { + color: @text; + } + + /* FEATURES */ + .features-header .features-teaser-body, + .features-teaser-wrap--promoted .features-teaser-body { + background: @base; + } + + .features-teaser-title a, + .features-teaser-title a:focus, + .features-teaser-title a:hover { + color: @text; + } + + /* FEATURES POST */ + .features-post-header-body { + background-color: @base; + } + + .features-post-header-title { + color: @accent-color; + } + + .features-post-artist { + color: @text; + } + + .features-post-byline-item.features-post-author { + color: @text; + } + + /* PROFILE */ + .header-avatar-add { + &, + &:not(.cta--inactive):focus, + &:not(.cta--inactive):hover { + background-color: @accent-color-dim; + } + } + .dropdown-menu-clickable, + #share-library-artist, + .dropdown-menu-clickable-item:active, + body:not([data-whatinput="touch"]) .dropdown-menu-clickable-item:focus, + body:not([data-whatinput="touch"]) .dropdown-menu-clickable-item:hover { + background-color: @base; + } + .header--overview { + background-color: @base; + } + .header-metadata .header-metadata-title, + .header-scrobble-since, + .header-title-display-name { + color: @subtext1; + } + .chartlist-play-button::before { + background-color: @accent-color; + -webkit-filter: invert(0%); + filter: invert(0%); + } + .chartlist-play-button:focus:focus::before, + .chartlist-play-button:focus:hover::before, + .chartlist-play-button:hover:focus::before, + .chartlist-play-button:hover:hover::before { + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); + background-color: @subtext0; + } + + .text-Color-link, + h2, + .dropdown-menu-clickable-button.disclose-active { + color: @accent-color; + } + .dropdown-menu-clickable-button, + .dropdown-menu-clickable-item--selected { + &, + &:focus, + &:hover { + color: @accent-color; + } + } + .dropdown-menu-clickable-item, + .dropdown-menu-clickable-item:active, + body:not([data-whatinput="touch"]) .dropdown-menu-clickable-item:focus, + body:not([data-whatinput="touch"]) .dropdown-menu-clickable-item:hover { + color: @text; + } + .btn-secondary { + background-color: @accent-color-dim; + color: @crust; + } + + body:not(.js-focus-visible) + body:not([data-whatinput="touch"]) + .btn-secondary:focus, + body:not([data-whatinput="touch"]) .btn-secondary .focus-visible, + body:not([data-whatinput="touch"]) .btn-secondary:hover { + background-color: @accent-color; + color: @crust; + } + input[type="password"] { + background-color: @crust !important; + border-color: @crust !important; + } + + @keyframes chartlist-anim { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 51%; + } + 100% { + background-position: 0% 50%; + } + } + @keyframes chartlist-anim { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 51%; + } + 100% { + background-position: 0% 50%; + } + } + @keyframes chartlist-anim { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 51%; + } + 100% { + background-position: 0% 50%; + } + } + + .chartlist-row--highlight, + .chartlist-row--now-scrobbling { + /* background-color: #5a1717; */ + background: linear-gradient(270deg, @base 60%, rgba(@accent-color, 0.2)); + background-size: 200% 200%; + -webkit-animation: chartlist-anim 10s ease infinite; + -moz-animation: chartlist-anim 10s ease infinite; + animation: chartlist-anim 10s ease infinite; + } + + .chartlist-name, + .chartlist-artist { + color: @subtext0; + } + + .chartlist-break::after, + .chartlist-row::after { + border-bottom-color: @surface0; + } + + .chartlist-row:hover { + background-color: @crust; + } + + .chartlist-count-bar-slug { + background-color: transparent !important; + background-image: linear-gradient(to right, @accent-color, @accent-color); + color: @crust; + } + .chartlist-count-bar-value { + color: @crust; + } + a:focus .chartlist-count-bar-slug, + a:hover .chartlist-count-bar-slug { + background-color: @accent-color-dim; + } + + .chartlist-count-bar-link { + &, + &:focus, + &:hover { + color: @text; + } + } + + .shout-form textarea { + background-color: @crust; + } + + .chartlist-index { + color: @text; + } + + .chartlist tr:nth-child(1) td.chartlist-index { + color: @accent-color; + } + + /* LISTENING REPORT */ + + // Set color for containers + + .report-box-container { + background: @mantle; + color: @text; + } + + // Topmost report box + + .report-box-container--overview { + background: @accent-color; + color: @base; + // Top border design (////) + .report-headline-border { + .mask-image( + url("/static/images/listening-report/v3/bg-lines.73682e46b8be.svg"), + ); + background: @base; + } + .report-headline-top { + color: @base; + border-bottom-color: @base; + } + // Comparison badge colors + .report-headline-meta + .badge-container + .report-badge.report-badge--comparison { + border-color: @base; + .report-arrow { + background: @base; + } + } + // Topmost report chart styling + .report-headline__chart { + .highcharts-series-0 .highcharts-point { + fill: @base; + stroke: rgba(@base, 0.5); + } + .highcharts-series-1 .highcharts-point { + fill: rgba(@base, 0.5); + stroke: transparent; + } + .highcharts-axis-labels { + stroke: @base; + } + } + } + // Middle report containers + .user-dashboard-layout--version-3 .main-content, + .user-dashboard-layout--version-3 .user-dashboard > .container { + // Set background + background: @base; + .listening-report-row { + // Header divider colors follow accent + border-bottom-color: @accent-color; + } + .top-item-overview { + // Style category boxes + &-- { + .category-colors(); + } + background: var(--category-background); + color: @base; + // Badge color is base on accent + .badge-container { + .report-badge { + border-color: @base; + } + .report-badge--comparison .report-arrow { + background: @base; + } + } + // Chart styling + .highcharts-series-group .highcharts-point { + fill: @base; + } + } + // Set color for badges + .listening-report-top-item { + &-- { + .category-colors(); + } + .listening-report-top-item-badge { + background: var(--category-background); + } + color: @text; + } + .top-new-item-type { + &__ { + .category-colors(); + } + background: var(--category-background); + } + // Triangle visualizer comparison subtext + .triangle-ratio--details .comparison { + color: @subtext0; + } + // Style badges on mantle background + .badge-container .report-badge--comparison { + border-color: @text; + .report-arrow { + background: @text; + vertical-align: initial; + } + } + // Style subtext + .quick-fact-row { + color: @subtext1; + &:hover { + color: @text; + } + } + .listening-report-highlight-comparison, + .quick-fact-comparison-text { + color: @subtext0; + } + // User comparison icons + .tag-label { + background: linear-gradient( + 90deg, + darken(@accent-color, 5%), + @accent-color + ); + // Total scrobbles header + &--total-scrobbles::before { + .mask-image( + url("/static/images/icons/icon-scrobble.66a5e6978c62.svg"), + @base, + ); + } + // Highest discovery header + &--discovery::before { + .mask-image( + url("/static/images/icons/icon-compass.ce30ab3b6240.svg"), + @base, + ); + } + } + .header-metadata-title { + color: @text; + } + .listening-report-brick { + &-divider { + border-color: @surface0; + } + &-head { + border-bottom-color: @crust; + } + &-inner:hover { + background: mix(@mantle, @base); + } + &-item-scrobbles { + color: @overlay1; + } + // Highlight self for higher or lower position on chart + &-inner--highlight { + &.listening-report-highlight--down { + background: rgba(@red, 0.1); + &:hover { + background: rgba(@red, 0.15); + } + } + &.listening-report-highlight--up { + background: rgba(@green, 0.1); + &:hover { + background: rgba(@green, 0.15); + } + } + } + } + } + + // footer + .user-dashboard-layout--version-3 .footer { + background-color: @mantle; + } + + // Top tags visualizer: Rainbow colors implemented from Catppuccin Palette + + @gradient-colors: + @rosewater, + @flamingo, + @pink, + @mauve, + @red, + @maroon, + @peach, + @yellow, + @green, + @teal, + @sky, + @sapphire, + @blue, + @lavender; + each( + range(0, 11), + { + .report-box-container--top-tags-over-time + .top-tags-over-time-colour-@{value} { + fill: extract(@gradient-colors, @value + 1); + stroke: extract(@gradient-colors, @value + 1); + } + } + ); + + .highcharts-radial-axis-grid .highcharts-grid-line { + stroke: @surface0; + } + + // universal report arrows + .report-arrow { + .mask-image( + url("/static/images/listening-report/v3/report-arrow-up.b6c5a2eb4c3b.svg"), + @base, + skip, + contain, + ); + background-size: contain; + padding: 4px; + margin: 2px; + height: 0; + width: 0; + filter: invert(0) !important; + } + + .music-decades-chart-container { + .highcharts-series-1 .highcharts-point { + fill: rgba(@accent-color, 0.5); + } + } + + /* SHOUT BOX */ + + .shout { + &--active { + background-color: fadeout(@surface1, 30%); + } + + &, + &-form { + border-bottom-color: @surface0; + } + &-user a { + color: @text; + } + &-timestamp, + &-reply { + color: @subtext0; + &:hover { + color: @overlay2; + } + } + &-reply::before { + .mask-image( + url("/static/images/icons/reply_sprite_16@2x.a145ef7db2f5.png"), + @subtext0, + skip, + 16px 32px, + ); + } + + &-form { + border-color: none; + } + &-permalink.shout-permalink { + &:focus, + &:hover { + color: @overlay2; + } + } + .vote-button { + color: @overlay1; + &::before { + .mask-image( + url("/static/images/icons/upvote_sprite_16@2x.5e02a31189da.png"), + @overlay2, + 0 0, + 16px 32px, + ); + } + &--voted { + color: @green; + &::before { + .mask-image(skip, @green, 0 -16px, skip); + } + } + } + } + + /* LIBRARY */ + .col-sidebar._buffer-sidebar + > figure + > div + > div + > svg + > .highcharts-background { + fill: @base; + } + + .highcharts-point { + fill: @accent-color-dim; + &-select { + fill: @accent-color; + } + } + + .highcharts-axis-labels > text { + fill: @text !important; + } + + #scrobble-chart-content { + .highcharts-background { + fill: @base; + } + .highcharts-point { + fill: rgba(@accent-color, 0.2); + } + .highcharts-xaxis .highcharts-axis-line, + .highcharts-yaxis-grid .highcharts-grid-line { + stroke: @surface2; + stroke-width: 1; + } + .highcharts-axis-title { + fill: @subtext0 !important; + } + } + + /* FOLLOWING */ + .user-list-name { + color: @text; + } + .user-follow, + .user-follow::after { + color: @accent-color; + background-color: @surface0; + } + + /* FOLLOW BUTTON */ + [data-toggle-button-current-state="unfollowed"] + .header-follower-btn::before { + background-color: @red; + color: @text; + } + [data-toggle-button-current-state="followed"] .header-follower-btn::before { + background-color: @green; + color: @text; + } + [data-toggle-button-current-state="followed"] + .header-follower-btn:hover::before { + background-color: @red; + color: @text; + } + + .header-follower-btn { + color: @accent-color; + } + + /* BOOKMARKS */ + .music-bookmarks-artists-item-name { + color: @text; + } + + /* TASTE-O-METER COLORS */ + .tasteometer-donut-base { + fill: @surface1; + } + .tasteometer-avatar img { + border-color: @surface1; + } + .tasteometer-compat-very_low .tasteometer-compat-colour { + color: @subtext0; + fill: @subtext0; + } + .tasteometer-compat-low .tasteometer-compat-colour { + color: @mauve; + fill: @mauve; + } + .tasteometer-compat-medium .tasteometer-compat-colour { + color: @green; + fill: @green; + } + .tasteometer-compat-very_high .tasteometer-compat-colour { + color: @peach; + fill: @peach; + } + .tasteometer-compat-super .tasteometer-compat-colour { + color: @red; + fill: @red; + } + + /* ARTIST */ + .section-with-separator::after { + background-color: @base; + } + body .header-new-bookmark-button, + body .header-new-download-button, + body .header-new-love-button, + body .header-new-more-button { + color: @base; + background-color: @accent-color; + } + body:not([data-whatinput="touch"]) { + .header-new-bookmark-button, + .header-new-download-button, + .header-new-love-button, + .header-new-more-button { + .focus-visible, + &:hover { + color: @base; + background-color: @accent-color; + } + } + } + .wiki-block-inner, + .catalogue-metadata-heading, + .catalogue-metadata-description, + .header-metadata-tnew-title { + color: @subtext0; + } + + .text-18 { + color: @accent-color; + } + + .artist-similar-artists-sidebar-item-name, + .artist-top-albums-item-name, + .listeners-section-item-name, + .catalogue-overview-similar-artists-full-width-item-name, + .similar-albums-item-name, + .discovery-stat-top-item-name, + .source-album-artist, + .source-album-name, + .track-similar-tracks-item-name, + .about-artist-name, + .catalogue-overview-similar-artists-item-name { + a { + &, + &:focus, + &:hover { + color: @text; + } + } + } + + .events-list-item-event-name.link-block-target > span { + color: @text; + } + + .events-list-item-venue > span { + color: @subtext0; + } + + .resource-external-link, + .resource-external-link:hover { + color: @text; + } + .js-playlink-station.desktop-playlink.inline-section-control.stationlink { + color: @text; + } + .section-with-settings .section-control::before { + border-right-color: @subtext0; + } + + .header-metadata .header-metadata-display a { + color: @accent-color; + } + + .big-artist-list-title a { + color: var(--subtext1); + } + .big-artist-list-title a:hover { + color: @text; + } + + /* SIMILAR ARTISTS */ + .similar-artists-item-name { + color: @text; + } + + .similar-artists-item-wiki-inner-2 { + color: @subtext0; + } + + .section-playlink::before { + background-color: @accent-color; + -webkit-filter: invert(0%); + filter: invert(0%); + } + + .section-playlink:hover::before { + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); + background-color: @subtext0; + } + + .section-playlink.js-playlink-station { + color: @text; + } + + .stationlink::before { + background-color: @accent-color; + -webkit-filter: invert(0%); + filter: invert(0%); + } + + .stationlink:focus::before, + .stationlink:hover::before { + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); + background-color: @subtext0; + } + + .video-preview-upload-cta { + background-color: @crust; + box-shadow: 0 0 0 2px @accent-color-dim; + } + + .video-preview-upload-cta:not(.cta--inactive):focus, + .video-preview-upload-cta:not(.cta--inactive):hover { + background-color: @base; + } + + .highcharts-plot-bands-0 > path { + fill: @overlay0; + } + + .listener-trend .highcharts-area { + fill: fadeout(@red, 10%); + } + + .listener-trend .highcharts-graph { + stroke: @red; + } + + .Colored-cta { + background-color: fadeout(@surface2, 30%); + } + .Colored-cta:not(.cta--inactive):focus, + .Colored-cta:not(.cta--inactive):hover { + background-color: fadeout(@surface2, 70%); + } + .similar-items-sidebar-item-name { + color: @text; + } + .resource-list--release-list-item-name { + color: @text; + } + .shout--deleted, + .shout--reported { + background: @base; + } + .play-this-track-playlinks { + color: @text; + } + + /* WIKI */ + .factbox-item, + #factbox-more-members { + color: @subtext0; + } + + .factbox-item > h4 { + color: @accent-color; + } + + .alert-warning { + color: @peach; + background-color: @crust; + } + + .content-form { + .form-control, + input[type="date"], + input[type="email"], + input[type="number"], + input[type="password"], + input[type="text"], + input[type="url"], + select, + textarea { + background-color: @crust !important; + border-color: @crust !important; + color: @subtext0 !important; + &:focus { + box-shadow: none !important; + border-color: @crust !important; + } + &:hover:not([disabled]) { + border-color: @crust !important; + color: @text !important; + } + } + } + .control-label { + color: @accent-color; + } + .join-form .form-row-help-text { + color: @text; + background-color: @surface1; + } + #stylerules { + background-color: @overlay0; + color: @subtext0; + } + .secondary-nav-item-link--active::after, + a.secondary-nav-item-link:focus::after, + a.secondary-nav-item-link:hover::after { + background-color: @accent-color; + } + + /* DOCUMENTATION/API SECTION */ + #app { + .sidebar { + background: @mantle; + border-color: @mantle; + } + a.sidebar-link { + color: @text; + &:hover { + color: @accent-color; + } + } + .sidebar-heading { + color: @subtext1; + } + a.sidebar-link.active { + color: @accent-color; + border-left-color: @accent-color; + } + a { + color: @accent-color; + } + } + + /* OBSESSIONS */ + .obsession-history-play-all::before { + background-color: @accent-color; + -webkit-filter: invert(0%); + filter: invert(0%); + color: @text; + } + + .obsession-history-play-all.js-playlink-station.inline-section-control { + color: @text; + } + + .obsession-history-play-all:hover::before { + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); + background-color: @subtext0; + } + + .obsession-search-result-header { + color: @accent-color; + } + + .obsession-candidate-heading { + color: @text; + } + + .modal-dialog.popup_content, + .modal-content { + background-color: @mantle; + box-shadow: none; + } + + .modal-body { + background-color: @base; + box-shadow: none; + } + + .content-form textarea:focus { + box-shadow: none; + } + + .content-form textarea:hover:not([disabled]) { + border-color: @accent-color; + } + + /* MESSAGES */ + .inbox-notifications .inbox-notifications__item { + color: @subtext0; + } + + .inbox-notifications .inbox-notifications__item--highlight { + background-color: @overlay0; + } + .inbox-notifications .inbox-notifications__item--hover { + box-shadow: none; + } + .inbox-notifications__item--highlight-hover:hover { + background-color: @crust; + } + + .inbox-message-subject { + color: @accent-color; + } + + .inbox-message-message { + color: @text; + } + + .inbox-message-view .inbox-message-message blockquote { + background: @crust; + border-color: @accent-color; + } + + body:not([data-whatinput="touch"]) + .inbox-notifications + .inbox-notifications__item--hover:hover { + background-color: @crust; + } + + .inbox .inbox-message { + background-color: @crust; + } + + .inbox .inbox-message--unviewed { + background-color: @overlay0; + } + + .inbox .inbox-message--unviewed .inbox-message-status::after { + background-color: @accent-color; + } + + /* ADS */ + .lastfm-ad { + display: none; + } + .full-bleed-ad-container, + .sidebar-ad-container { + background-color: @base; + } + + /* RECOMMENDATIONS ON PROFILE */ + .profile-card-content { + background: @surface0 !important; + } + /* UPGRADE TO PRO */ + .btn-subscribe, + .btn-subscribe:hover, + .btn-subscribe:active { + background-color: @accent-color !important; + } + .listening-report-brick--upsell { + display: none; + } + .your-progress { + color: @text; + } + /* ----Profile Cards Hide------- */ + .profile-cards-container { + display: none !important; + } + /* HEADER */ + .header--overview, + .header--sub-page { + color: @text; + } + /* -----Primary Button------ */ + .btn-primary, + .btn-primary:hover, + .btn-primary:active, + .no-data-message-button, + .no-data-message-button:hover, + .no-data-message-button:active, + .api-session-connect, + .api-session-disconnect:hover, + .api-session-disconnect:active, + .clipboard-button, + body:not(.js-focus-visible) + body:not([data-whatinput="touch"]) + .clipboard-button:focus, + body:not([data-whatinput="touch"]) .clipboard-button .focus-visible, + body:not([data-whatinput="touch"]) .clipboard-button:hover { + background-color: @accent-color !important; + color: @base !important; + } + .api-session-disconnect { + background-color: @accent-color-dim !important; + color: @base !important; + } + /* -----Shortcut Button------ */ + .btn-shortcut, + .btn-shortcut:hover, + .btn-shortcut:active { + background-color: @accent-color-dim !important; + color: @text !important; + } + /* ------HEADER----- */ + header { + background: @mantle; + } + /* ------FOOTER----- */ + .footer .footer-heading { + color: @subtext1; + } + .footer { + background-color: @mantle; + color: @text; + } + .footer .footer-bottom { + border-top-color: none; + } + .footer .footer-bottom .row { + background-color: @mantle; + } + .footer .footer-language--active, + .footer-timezone strong, + .footer .footer-language--active strong { + color: @text; + } + .footer .footer-language, + .footer-timezone, + .footer .footer-legal { + color: @overlay0; + } + .translation { + color: @subtext0; + } + /* --------TOP BAR---------- */ + .top-bar, + .player-bar, + .player-bar .player-bar-progress, + .main-content::before, + .masthead-nav { + background: @mantle; + color: @text !important; + } + .player-bar .player-bar-progress-slug { + background: @accent-color; + } + .masthead-nav-control, + .site-auth-control, + .site-auth--anon::before, + .masthead-nav .navlist-more { + color: @text !important; + } + .masthead-nav .masthead-nav-control::after { + background: @accent-color; + } + .auth-dropdown-menu { + background-color: @base !important; + box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px @surface1 !important; + } + .auth-dropdown-menu-item { + color: @text !important; + } + .auth-dropdown-menu-item:hover, + .auth-dropdown-menu-item:active { + background-color: @surface0 !important; + color: @text !important; + } + .auth-dropdown-menu::before, + .js .auth-dropdown-menu::before, + .site-auth:focus .auth-dropdown-menu::before, + .site-auth:hover .auth-dropdown-menu::before { + .mask-image( + url("/static/images/dropdown_arrow_dark@2x.7b7cfaa4e8ee.png"), + @surface1, + skip, + 36px 18px, + no-repeat, + ); + } + .masthead-nav .masthead-nav-control, + .masthead-nav .navlist-more, + .site-auth-control { + &:focus, + &:hover { + background-color: transparent; + color: @accent-color !important; + } + } + .site-auth-control.btn-secondary { + color: @base !important; + } + .masthead-search-form { + background-color: @mantle; + } + .masthead-search-submit { + background-color: @accent-color; + color: @base; + } + body:not(.js-focus-visible) + body:not([data-whatinput="touch"]) + .masthead-search-submit:focus, + body:not([data-whatinput="touch"]) .masthead-search-submit .focus-visible, + body:not([data-whatinput="touch"]) .masthead-search-submit:hover { + background-color: @accent-color; + color: @base; + } + .masthead-search-field { + color: @text; + } + /* -------PLAYLISTS--------- */ + .chartlist-timestamp { + color: @subtext0; + } + /* -----GENRES TODAY----- */ + .genretodaybar, + .rolling_no { + background: @mantle !important; + } + /* -----NAV ITEMS----- */ + .library-controls .secondary-nav .secondary-nav-item-link--active, + .date-range-picker-button-inner, + .library-controls .secondary-nav .secondary-nav-item-link--active:focus, + .library-controls .secondary-nav .secondary-nav-item-link--active:hover, + body:not([data-whatinput="touch"]) .catalogue-tags .tag a:hover { + color: @accent-color !important; + } + /* ------ARTIST TAGS----- */ + .catalogue-tags .tag a, + .catalogue-tags .tags-add, + .catalogue-tags .tags-add-cta, + body:not([data-whatinput="touch"]) .catalogue-tags .tag a:hover { + color: @accent-color; + box-shadow: inset 0 0 0 1px @accent-color-dim; + } + /* -----HIDE PLAY BUTTON ON TOP TRACK------ */ + .image-overlay-playlink-link::before { + display: none; + } + /* ---------CHARTS FIX--------- */ + .globalchart .globalchart-item:first-child { + background-color: fadeout(@mantle, 80%); + } + .globalchart-item:first-child .globalchart-rank { + color: @accent-color !important; + } + .globalchart-item .globalchart-rank { + color: @text; + } + /* -------LOG IN PAGE------- */ + .auth-container > .auth-container-animation { + background-color: transparent; + } + #join-animation-container { + display: none !important; + } + h1.text-24 { + color: @accent-color; + } + .checkbox { + color: @text; + } + + /* ----ICONS---- */ + .lazy-buylinks-toggle::before { + .mask-image( + url("/static/images/icons/download_sprite_16.2d7999c89e09.png"), + @text, + ); + } + + .chartlist-more-button::before { + .mask-image( + url("/static/images/icons/more_sprite_16.bceb4a93c77a.png"), + @text, + ); + } + + .lazy-buylinks-toggle:hover::before, + .lazy-buylinks-toggle:focus::before, + .chartlist-more-button:hover::before, + .chartlist-more-button:focus::before { + background-color: @subtext0; + } + + .chartlist-love-button, + .header-new-love-button { + &::before { + .mask-image( + url("/static/images/icons/love_animation_tracklist_24.3c884b0287d4.png"), + @text, + -24px 0, + ); + } + &:focus::before, + &:hover::before { + .mask-image(skip, @red, -24px 0); + } + } + + [data-toggle-button-current-state="loved"] .chartlist-love-button, + [data-toggle-button-current-state="loved"] .header-new-love-button { + &::before, + &:focus::before, + &:hover::before { + .mask-image(skip, @red, -552px 0); + transition: mask-position 0.7s steps(22) !important; + -webkit-transition: -webkit-mask-position 0.7s steps(22) !important; + } + } + + .section-settings-toggle::before { + .mask-image( + url("/static/images/icons/settings_222_16.f63779d3cbad.png"), + @text, + ); + } + + .share-button-profile::before { + .mask-image( + url("/static/images/icons/share_222_16.9aba752fb1e9.png"), + @text, + ); + } + + .section-settings-toggle:hover::before, + .section-settings-toggle:focus::before, + .share-button-profile:hover::before, + .share-button-profile:focus::before { + background-color: @subtext0; + } + + .cta-link::before, + .lyrics-snippet-more-link ::before, + .trending-tracks-more-link ::before, + .more-link-fullwidth-right ::before { + .mask-image( + url("/static/images/icons/arrow_small_right_005399_12.8f025ef116be.png"), + @accent-color, + ); + } + + .play-this-track-playlink--itunes::before { + .mask-image( + url("/static/images/icons/apple_music_color_24.17c0b1b9e185.png"), + @text, + ); + } + + .resource-external-link--homepage::before { + .mask-image( + url("/static/images/icons/external_links_16.3d45e81fa3fc.png"), + @text, + ); + } + + .alert-warning::before { + .mask-image( + url("/static/images/icons/alert/warning_16.93f2fe437139.png"), + @peach, + ); + } + + .masthead-search-toggle { + &::before { + .mask-image( + url("/static/images/icons/search_16.bde37072495a.png"), + @text, + ); + } + &::after { + background: @text; + } + } + + .masthead-search-toggle:hover::before, + .masthead-search-toggle:focus::before { + background-color: @subtext0; + } + + .masthead-search-toggle.disclose-active::before { + .mask-image( + url("/static/images/icons/delete_999_24.78e2a3de3ab8.png"), + @text, + ); + } + + .masthead-search-toggle.disclose-active:hover::before, + .masthead-search-toggle.disclose-active:focus::before { + background-color: @subtext0; + } + + .js .date-range-picker-button::before { + .mask-image( + url("/static/images/icons/date_picker_icon.1d7b21ee3a36.svg"), + @accent-color, + 0 0, + 14px 24px, + no-repeat, + ); + } + + .page-loading-logo-container { + svg path { + fill: @red; + stroke: @red; + } + } + + .catalogue-tags .tags-add::before { + .mask-image( + url("/static/images/icons/add_link_16.637996ed0e2f.png"), + @accent-color, + ); + } + + .layout-image { + background: @crust; + .layout-image-image { + mix-blend-mode: screen; + } + } + } +} + +#rgbify(@color) { + @rgb: red(@color) green(@color) blue(@color); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/learn-x-in-y-minutes/catppuccin.user.css b/styles/learn-x-in-y-minutes/catppuccin.user.css index d235c94401..69012799d9 100644 --- a/styles/learn-x-in-y-minutes/catppuccin.user.css +++ b/styles/learn-x-in-y-minutes/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Learn X in Y Minutes Catppuccin +@name Learn X in Y Minutes Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/learn-x-in-y-minutes @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/learn-x-in-y-minutes -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/learn-x-in-y-minutes/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/learn-x-in-y-minutes/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alearn-x-in-y-minutes @description Soothing pastel theme for Learn X in Y Minutes @author Catppuccin @@ -13,211 +13,4 @@ @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("learnxinyminutes.com") { - @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); - - html.light { - #catppuccin(@lightFlavor, @accentColor); - } - - html.dark { - #catppuccin(@darkFlavor, @accentColor); - } - - html:not(.dark, .light) { - @media (prefers-color-scheme: light) { - #catppuccin(@lightFlavor, @accentColor); - } - @media (prefers-color-scheme: dark) { - #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]; - - --ctp-rosewater: @rosewater; - --ctp-flamingo: @flamingo; - --ctp-pink: @pink; - --ctp-mauve: @mauve; - --ctp-red: @red; - --ctp-maroon: @maroon; - --ctp-peach: @peach; - --ctp-yellow: @yellow; - --ctp-green: @green; - --ctp-teal: @teal; - --ctp-sky: @sky; - --ctp-sapphire: @sapphire; - --ctp-blue: @blue; - --ctp-lavender: @lavender; - --ctp-text: @text; - --ctp-subtext1: @subtext1; - --ctp-subtext0: @subtext0; - --ctp-overlay2: @overlay2; - --ctp-overlay1: @overlay1; - --ctp-overlay0: @overlay0; - --ctp-surface2: @surface2; - --ctp-surface1: @surface1; - --ctp-surface0: @surface0; - --ctp-base: @base; - --ctp-mantle: @mantle; - --ctp-crust: @crust; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - .highlight { - background-color: @mantle; - - pre { - background-color: @mantle !important; - } - } - - &:not(.dark, .light) { - p { - color: @subtext0 !important; - } - - span { - color: @text; - } - } - - .share { - background-color: @mantle; - border-color: @crust; - - &:hover { - background-color: @surface0; - } - } - - .theme-choice button { - color: @text; - background-color: @mantle; - border-color: @crust; - - &:hover { - background-color: @surface0; - } - } - - #lang-select { - color: @text; - background-color: @mantle; - border-color: @crust; - } - - td.lang span a { - color: @text; - background-color: @mantle; - border-color: @crust; - - &:hover { - background-color: @surface0; - } - } - - &, - body { - background-color: @base; - color: @text; - border-color: @base; - box-shadow: none; - } - - td, - th { - color: @text; - border-bottom-color: @surface0; - } - - footer { - p { - color: @subtext1; - } - } - - a { - color: @accent-color !important; - - code { - color: @accent-color !important; - } - - &:visited { - color: darken(@accent-color, 5%) !important; - } - - &.active { - color: @base !important; - background-color: @accent-color !important; - border-color: darken(@accent-color, 15%) !important; - - &:visited { - background-color: darken(@accent-color, 5%) !important; - color: @base !important; - border-color: darken(@accent-color, 10%) !important; - } - } - } - - hr { - border-color: @surface1; - } - - code { - background-color: @mantle; - color: @text; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/learn-x-in-y-minutes/catppuccin.user.less b/styles/learn-x-in-y-minutes/catppuccin.user.less new file mode 100644 index 0000000000..70b362e489 --- /dev/null +++ b/styles/learn-x-in-y-minutes/catppuccin.user.less @@ -0,0 +1,221 @@ +/* ==UserStyle== +@name Learn X in Y Minutes Catppuccin +@namespace github.com/catppuccin/userstyles/styles/learn-x-in-y-minutes +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/learn-x-in-y-minutes +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/learn-x-in-y-minutes/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alearn-x-in-y-minutes +@description Soothing pastel theme for Learn X in Y Minutes +@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("learnxinyminutes.com") { + @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); + + html.light { + #catppuccin(@lightFlavor, @accentColor); + } + + html.dark { + #catppuccin(@darkFlavor, @accentColor); + } + + html:not(.dark, .light) { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor, @accentColor); + } + @media (prefers-color-scheme: dark) { + #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]; + + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + .highlight { + background-color: @mantle; + + pre { + background-color: @mantle !important; + } + } + + &:not(.dark, .light) { + p { + color: @subtext0 !important; + } + + span { + color: @text; + } + } + + .share { + background-color: @mantle; + border-color: @crust; + + &:hover { + background-color: @surface0; + } + } + + .theme-choice button { + color: @text; + background-color: @mantle; + border-color: @crust; + + &:hover { + background-color: @surface0; + } + } + + #lang-select { + color: @text; + background-color: @mantle; + border-color: @crust; + } + + td.lang span a { + color: @text; + background-color: @mantle; + border-color: @crust; + + &:hover { + background-color: @surface0; + } + } + + &, + body { + background-color: @base; + color: @text; + border-color: @base; + box-shadow: none; + } + + td, + th { + color: @text; + border-bottom-color: @surface0; + } + + footer { + p { + color: @subtext1; + } + } + + a { + color: @accent-color !important; + + code { + color: @accent-color !important; + } + + &:visited { + color: darken(@accent-color, 5%) !important; + } + + &.active { + color: @base !important; + background-color: @accent-color !important; + border-color: darken(@accent-color, 15%) !important; + + &:visited { + background-color: darken(@accent-color, 5%) !important; + color: @base !important; + border-color: darken(@accent-color, 10%) !important; + } + } + } + + hr { + border-color: @surface1; + } + + code { + background-color: @mantle; + color: @text; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/lemmy/catppuccin.user.css b/styles/lemmy/catppuccin.user.css index 330cd37b2e..2b7d33778b 100644 --- a/styles/lemmy/catppuccin.user.css +++ b/styles/lemmy/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Lemmy Catppuccin +@name Lemmy Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/lemmy @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lemmy -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lemmy/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lemmy/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alemmy @description Soothing pastel theme for Lemmy @author Catppuccin @@ -13,251 +13,4 @@ @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("lemmy.ml"), - domain("lemmy.world") { - @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; - } - } - - [data-bs-theme="dark"] { - --bs-body-color: @text; - --bs-body-bg: @base; - --bs-emphasis-color: @subtext1; - --bs-secondary-color: @subtext0; - --bs-secondary-bg: @mantle; - --bs-tertiary-color: @crust; - --bs-tertiary-bg: @crust; - --bs-primary-text-emphasis: @overlay0; - --bs-secondary-text-emphasis: @overlay1; - --bs-success-text-emphasis: @green; - --bs-info-text-emphasis: @sky; - --bs-warning-text-emphasis: @yellow; - --bs-danger-text-emphasis: @red; - --bs-light-text-emphasis: @overlay2; - --bs-dark-text-emphasis: @overlay2; - --bs-primary-bg-subtle: @base; - --bs-secondary-bg-subtle: @mantle; - --bs-success-bg-subtle: @green; - --bs-info-bg-subtle: @accent-color; - --bs-warning-bg-subtle: @yellow; - --bs-danger-bg-subtle: @red; - --bs-light-bg-subtle: @base; - --bs-dark-bg-subtle: @base; - --bs-primary-border-subtle: @accent-color; - --bs-secondary-border-subtle: @accent-color; - --bs-success-border-subtle: @green; - --bs-info-border-subtle: @accent-color; - --bs-warning-border-subtle: @yellow; - --bs-danger-border-subtle: @red; - --bs-light-border-subtle: @crust; - --bs-dark-border-subtle: @crust; - --bs-heading-color: @text; - --bs-card-border-color: @crust; - --bs-link-color: @blue; - --bs-link-hover-color: @maroon; - --bs-code-color: @lavender; - --bs-highlight-color: @accent-color; - --bs-highlight-bg: @mantle; - --bs-border-color: @crust; - --bs-form-valid-color: @green; - --bs-form-valid-border-color: @green; - --bs-form-invalid-color: @red; - --bs-form-invalid-border-color: @red; - --bs-dark-rgb: @accent-color; - --bs-btn-bg: @base; - } - - body { - color: @text; - background-color: @base; - } - - .nav-link { - color: @accent-color; - } - .card { - --bs-card-cap-bg: @mantle; - --bs-card-title-color: @text; - --bs-card-subtitle-color: @subtext1; - --bs-card-color: @text; - --bs-card-cap-color: @mantle; - --bs-card-bg: @crust; - } - - .form-control { - color: @text; - background-color: @crust; - border-color: @crust; - } - - .btn-secondary { - --bs-btn-color: @text; - --bs-btn-bg: @base; - --bs-btn-border-color: @overlay1; - --bs-btn-hover-color: @accent-color; - --bs-btn-hover-bg: @crust; - --bs-btn-hover-border-color: @overlay2; - --bs-btn-active-color: @text; - --bs-btn-active-bg: @accent-color; - --bs-btn-active-border-color: @crust; - --bs-btn-active-shadow: inset 0 3px 5px @crust; - --bs-btn-disabled-color: @red; - --bs-btn-disabled-bg: @crust; - --bs-btn-disabled-border-color: @mantle; - } - - .table > :not(caption) > * > * { - color: @text; - background-color: @mantle; - } - - .dropdown-menu-dark { - --bs-dropdown-color: @text; - --bs-dropdown-bg: @crust; - --bs-dropdown-border-color: @mantle; - --bs-dropdown-box-shadow: @mantle; - --bs-dropdown-link-color: @blue; - --bs-dropdown-link-hover-color: @accent-color; - --bs-dropdown-divider-bg: @overlay0; - --bs-dropdown-link-hover-bg: @crust; - --bs-dropdown-link-active-color: @accent-color; - --bs-dropdown-link-active-bg: @mantle; - --bs-dropdown-link-disabled-color: @red; - --bs-dropdown-header-color: @text; - } - - .form-select { - color: @text; - background-color: @mantle; - border-color: @crust; - } - - .btn-outline-secondary { - --bs-btn-color: @text; - --bs-btn-border-color: @mantle; - --bs-btn-hover-color: @accent-color; - --bs-btn-hover-bg: @crust; - --bs-btn-hover-border-color: @overlay0; - --bs-btn-active-color: @accent-color; - --bs-btn-active-bg: @crust; - --bs-btn-active-border-color: @crust; - --bs-btn-active-shadow: inset 0 3px 5px @crust; - --bs-btn-disabled-color: @red; - --bs-btn-disabled-border-color: @mantle; - } - - .nav-tabs .nav-link.active, - .nav-tabs .nav-item.show .nav-link { - color: @accent-color; - background-color: @crust; - border-color: @mantle; - } - - .dropdown-item { - color: @text; - background-color: @crust; - } - - .dropdown-menu { - --bs-dropdown-color: @text; - --bs-dropdown-bg: @crust; - --bs-dropdown-border-color: @mantle; - --bs-dropdown-box-shadow: @mantle; - --bs-dropdown-link-color: @blue; - --bs-dropdown-link-hover-color: @accent-color; - --bs-dropdown-divider-bg: @overlay0; - --bs-dropdown-link-hover-bg: @crust; - --bs-dropdown-link-active-color: @accent-color; - --bs-dropdown-link-active-bg: @mantle; - --bs-dropdown-link-disabled-color: @red; - --bs-dropdown-header-color: @text; - } - - a { - color: @accent-color; - } - - .text-bg-primary { - color: @text; - } - - .text-muted { - color: @accent-color; - } - .text-bg-light { - color: @text !important; - background-color: rgba(#rgbify(@mantle) [], 1) !important; - } - .alert-info, - .alert-warning { - background-color: @mantle !important; - border-color: @mantle !important; - color: @text !important; - } - } -} - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/lemmy/catppuccin.user.less b/styles/lemmy/catppuccin.user.less new file mode 100644 index 0000000000..884389506b --- /dev/null +++ b/styles/lemmy/catppuccin.user.less @@ -0,0 +1,260 @@ +/* ==UserStyle== +@name Lemmy Catppuccin +@namespace github.com/catppuccin/userstyles/styles/lemmy +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lemmy +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lemmy/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alemmy +@description Soothing pastel theme for Lemmy +@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("lemmy.ml"), domain("lemmy.world") { + @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; + } + } + + [data-bs-theme="dark"] { + --bs-body-color: @text; + --bs-body-bg: @base; + --bs-emphasis-color: @subtext1; + --bs-secondary-color: @subtext0; + --bs-secondary-bg: @mantle; + --bs-tertiary-color: @crust; + --bs-tertiary-bg: @crust; + --bs-primary-text-emphasis: @overlay0; + --bs-secondary-text-emphasis: @overlay1; + --bs-success-text-emphasis: @green; + --bs-info-text-emphasis: @sky; + --bs-warning-text-emphasis: @yellow; + --bs-danger-text-emphasis: @red; + --bs-light-text-emphasis: @overlay2; + --bs-dark-text-emphasis: @overlay2; + --bs-primary-bg-subtle: @base; + --bs-secondary-bg-subtle: @mantle; + --bs-success-bg-subtle: @green; + --bs-info-bg-subtle: @accent-color; + --bs-warning-bg-subtle: @yellow; + --bs-danger-bg-subtle: @red; + --bs-light-bg-subtle: @base; + --bs-dark-bg-subtle: @base; + --bs-primary-border-subtle: @accent-color; + --bs-secondary-border-subtle: @accent-color; + --bs-success-border-subtle: @green; + --bs-info-border-subtle: @accent-color; + --bs-warning-border-subtle: @yellow; + --bs-danger-border-subtle: @red; + --bs-light-border-subtle: @crust; + --bs-dark-border-subtle: @crust; + --bs-heading-color: @text; + --bs-card-border-color: @crust; + --bs-link-color: @blue; + --bs-link-hover-color: @maroon; + --bs-code-color: @lavender; + --bs-highlight-color: @accent-color; + --bs-highlight-bg: @mantle; + --bs-border-color: @crust; + --bs-form-valid-color: @green; + --bs-form-valid-border-color: @green; + --bs-form-invalid-color: @red; + --bs-form-invalid-border-color: @red; + --bs-dark-rgb: @accent-color; + --bs-btn-bg: @base; + } + + body { + color: @text; + background-color: @base; + } + + .nav-link { + color: @accent-color; + } + .card { + --bs-card-cap-bg: @mantle; + --bs-card-title-color: @text; + --bs-card-subtitle-color: @subtext1; + --bs-card-color: @text; + --bs-card-cap-color: @mantle; + --bs-card-bg: @crust; + } + + .form-control { + color: @text; + background-color: @crust; + border-color: @crust; + } + + .btn-secondary { + --bs-btn-color: @text; + --bs-btn-bg: @base; + --bs-btn-border-color: @overlay1; + --bs-btn-hover-color: @accent-color; + --bs-btn-hover-bg: @crust; + --bs-btn-hover-border-color: @overlay2; + --bs-btn-active-color: @text; + --bs-btn-active-bg: @accent-color; + --bs-btn-active-border-color: @crust; + --bs-btn-active-shadow: inset 0 3px 5px @crust; + --bs-btn-disabled-color: @red; + --bs-btn-disabled-bg: @crust; + --bs-btn-disabled-border-color: @mantle; + } + + .table > :not(caption) > * > * { + color: @text; + background-color: @mantle; + } + + .dropdown-menu-dark { + --bs-dropdown-color: @text; + --bs-dropdown-bg: @crust; + --bs-dropdown-border-color: @mantle; + --bs-dropdown-box-shadow: @mantle; + --bs-dropdown-link-color: @blue; + --bs-dropdown-link-hover-color: @accent-color; + --bs-dropdown-divider-bg: @overlay0; + --bs-dropdown-link-hover-bg: @crust; + --bs-dropdown-link-active-color: @accent-color; + --bs-dropdown-link-active-bg: @mantle; + --bs-dropdown-link-disabled-color: @red; + --bs-dropdown-header-color: @text; + } + + .form-select { + color: @text; + background-color: @mantle; + border-color: @crust; + } + + .btn-outline-secondary { + --bs-btn-color: @text; + --bs-btn-border-color: @mantle; + --bs-btn-hover-color: @accent-color; + --bs-btn-hover-bg: @crust; + --bs-btn-hover-border-color: @overlay0; + --bs-btn-active-color: @accent-color; + --bs-btn-active-bg: @crust; + --bs-btn-active-border-color: @crust; + --bs-btn-active-shadow: inset 0 3px 5px @crust; + --bs-btn-disabled-color: @red; + --bs-btn-disabled-border-color: @mantle; + } + + .nav-tabs .nav-link.active, + .nav-tabs .nav-item.show .nav-link { + color: @accent-color; + background-color: @crust; + border-color: @mantle; + } + + .dropdown-item { + color: @text; + background-color: @crust; + } + + .dropdown-menu { + --bs-dropdown-color: @text; + --bs-dropdown-bg: @crust; + --bs-dropdown-border-color: @mantle; + --bs-dropdown-box-shadow: @mantle; + --bs-dropdown-link-color: @blue; + --bs-dropdown-link-hover-color: @accent-color; + --bs-dropdown-divider-bg: @overlay0; + --bs-dropdown-link-hover-bg: @crust; + --bs-dropdown-link-active-color: @accent-color; + --bs-dropdown-link-active-bg: @mantle; + --bs-dropdown-link-disabled-color: @red; + --bs-dropdown-header-color: @text; + } + + a { + color: @accent-color; + } + + .text-bg-primary { + color: @text; + } + + .text-muted { + color: @accent-color; + } + .text-bg-light { + color: @text !important; + background-color: rgba(#rgbify(@mantle)[], 1) !important; + } + .alert-info, + .alert-warning { + background-color: @mantle !important; + border-color: @mantle !important; + color: @text !important; + } + } +} + +#rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/libreddit/catppuccin.user.css b/styles/libreddit/catppuccin.user.css index a944ebc435..5e53f4f8f2 100644 --- a/styles/libreddit/catppuccin.user.css +++ b/styles/libreddit/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Libreddit/Redlib Catppuccin +@name Libreddit/Redlib Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/libreddit @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/libreddit -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/libreddit/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/libreddit/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alibreddit @description Soothing pastel theme for Libreddit and Redlib @author Catppuccin @@ -13,179 +13,4 @@ @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("libredd.it"), -domain("libreddit.spike.codes"), -domain("libreddit.dothq.co"), -domain("libreddit.kavin.rocks"), -domain("reddit.invak.id"), -domain("reddit.phii.me"), -domain("lr.riverside.rocks"), -domain("libreddit.strongthany.cc"), -domain("libreddit.database.red"), -domain("libreddit.privacy.com.de"), -domain("libreddit.domain.glass"), -domain("libreddit.sugoma.tk"), -domain("libreddit.jamiethalacker.dev"), -domain("reddit.artemislena.eu"), -domain("r.nf"), -domain("libreddit.some-things.org"), -domain("reddit.stuehieyr.com"), -domain("lr.mint.lgbt"), -domain("libreddit.igna.rocks"), -domain("libreddit.autarkic.org"), -domain("libreddit.flux.industries"), -domain("libreddit.drivet.xyz"), -domain("lr.oversold.host"), -domain("libreddit.de"), -domain("libreddit.pussthecat.org"), -domain("libreddit.mutahar.rocks"), -domain("libreddit.northboot.xyz"), -domain("leddit.xyz"), -domain("de.leddit.xyz"), -domain("lr.cowfee.moe"), -domain("libreddit.hu"), -domain("libreddit.totaldarkness.net"), -domain("libreddit.esmailelbob.xyz"), -domain("lr.vern.cc"), -domain("libreddit.nl"), -domain("lr.stilic.ml"), -domain("reddi.tk"), -domain("libreddit.bus-hit.me"), -domain("libreddit.datatunnel.xyz"), -domain("libreddit.crewz.me"), -domain("r.walkx.org"), -domain("libreddit.kylrth.com"), -domain("libreddit.yonalee.eu"), -domain("libreddit.winscloud.net"), -domain("libreddit.tiekoetter.com"), -domain("reddit.rtrace.io"), -domain("libreddit.lunar.icu"), -domain("libreddit.privacydev.net"), -domain("libreddit.notyourcomputer.net"), -domain("r.ahwx.org"), -domain("bob.fr.to"), -domain("reddit.beparanoid.de"), -domain("libreddit.dcs0.hu"), -domain("reddit.dr460nf1r3.org"), -domain("rd.jae.su"), -domain("libreddit.mha.fi"), -domain("libreddit.foss.wtf"), -domain("libreddit.encrypted-data.xyz"), -domain("libreddit.eu.org"), -domain("l.opnxng.com"), -domain("safereddit.com"), -domain("libreddit.projectsegfau.lt"), -domain("libreddit.bus-hit.me"), -domain("reddit.invak.id"), -domain("redlib.catsarch.com"), -domain("reddit.idevicehacked.com"), -domain("redlib.freedit.eu"), -domain("redlib.perennialte.ch"), -domain("redlib.tux.pizza"), -domain("redlib.vimmer.dev"), -domain("libreddit.privacydev.net"), -domain("lr.n8pjl.ca"), -domain("reddit.owo.si"), -domain("redlib.ducks.party"), -domain("red.ngn.tf"), -domain("redlib.dnfetheus.xyz"), -domain("redlib.cow.rip"), -domain("libreddit.eu.org"), -domain("r.darrennathanael.com"), -domain("redlib.kittywi.re"), -domain("redlib.privacyredirect.com") { - .light, - .gruvboxlight { - #catppuccin(@lightFlavor, @accentColor); - } - - .dark, - .black, - .doomone, - .gruvboxdark, - .dracula, - .gold, - .laserwave, - .nord, - .rosebox, - .violet, - :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; - } - } - - --accent: @accent-color !important; - --green: @green !important; - --text: @text !important; - --foreground: @crust !important; - --background: @base !important; - --outside: @mantle !important; - --post: @mantle !important; - --panel-border: none !important; - --highlighted: @surface0 !important; - --visited: @overlay0 !important; - --shadow: 0 5px 15px 0 transparent !important; - - --nsfw: @peach !important; - --admin: @maroon !important; - - /* thumbnail titles */ - .post_thumbnail span { - background-color: @base; - color: @text; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/libreddit/catppuccin.user.less b/styles/libreddit/catppuccin.user.less new file mode 100644 index 0000000000..d6f6555605 --- /dev/null +++ b/styles/libreddit/catppuccin.user.less @@ -0,0 +1,189 @@ +/* ==UserStyle== +@name Libreddit/Redlib Catppuccin +@namespace github.com/catppuccin/userstyles/styles/libreddit +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/libreddit +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/libreddit/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alibreddit +@description Soothing pastel theme for Libreddit and Redlib +@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("libredd.it"), + domain("libreddit.spike.codes"), + domain("libreddit.dothq.co"), + domain("libreddit.kavin.rocks"), + domain("reddit.invak.id"), + domain("reddit.phii.me"), + domain("lr.riverside.rocks"), + domain("libreddit.strongthany.cc"), + domain("libreddit.database.red"), + domain("libreddit.privacy.com.de"), + domain("libreddit.domain.glass"), + domain("libreddit.sugoma.tk"), + domain("libreddit.jamiethalacker.dev"), + domain("reddit.artemislena.eu"), + domain("r.nf"), + domain("libreddit.some-things.org"), + domain("reddit.stuehieyr.com"), + domain("lr.mint.lgbt"), + domain("libreddit.igna.rocks"), + domain("libreddit.autarkic.org"), + domain("libreddit.flux.industries"), + domain("libreddit.drivet.xyz"), + domain("lr.oversold.host"), + domain("libreddit.de"), + domain("libreddit.pussthecat.org"), + domain("libreddit.mutahar.rocks"), + domain("libreddit.northboot.xyz"), + domain("leddit.xyz"), + domain("de.leddit.xyz"), + domain("lr.cowfee.moe"), + domain("libreddit.hu"), + domain("libreddit.totaldarkness.net"), + domain("libreddit.esmailelbob.xyz"), + domain("lr.vern.cc"), + domain("libreddit.nl"), + domain("lr.stilic.ml"), + domain("reddi.tk"), + domain("libreddit.bus-hit.me"), + domain("libreddit.datatunnel.xyz"), + domain("libreddit.crewz.me"), + domain("r.walkx.org"), + domain("libreddit.kylrth.com"), + domain("libreddit.yonalee.eu"), + domain("libreddit.winscloud.net"), + domain("libreddit.tiekoetter.com"), + domain("reddit.rtrace.io"), + domain("libreddit.lunar.icu"), + domain("libreddit.privacydev.net"), + domain("libreddit.notyourcomputer.net"), + domain("r.ahwx.org"), + domain("bob.fr.to"), + domain("reddit.beparanoid.de"), + domain("libreddit.dcs0.hu"), + domain("reddit.dr460nf1r3.org"), + domain("rd.jae.su"), + domain("libreddit.mha.fi"), + domain("libreddit.foss.wtf"), + domain("libreddit.encrypted-data.xyz"), + domain("libreddit.eu.org"), + domain("l.opnxng.com"), + domain("safereddit.com"), + domain("libreddit.projectsegfau.lt"), + domain("libreddit.bus-hit.me"), + domain("reddit.invak.id"), + domain("redlib.catsarch.com"), + domain("reddit.idevicehacked.com"), + domain("redlib.freedit.eu"), + domain("redlib.perennialte.ch"), + domain("redlib.tux.pizza"), + domain("redlib.vimmer.dev"), + domain("libreddit.privacydev.net"), + domain("lr.n8pjl.ca"), + domain("reddit.owo.si"), + domain("redlib.ducks.party"), + domain("red.ngn.tf"), + domain("redlib.dnfetheus.xyz"), + domain("redlib.cow.rip"), + domain("libreddit.eu.org"), + domain("r.darrennathanael.com"), + domain("redlib.kittywi.re"), + domain("redlib.privacyredirect.com") { + .light, + .gruvboxlight { + #catppuccin(@lightFlavor, @accentColor); + } + + .dark, + .black, + .doomone, + .gruvboxdark, + .dracula, + .gold, + .laserwave, + .nord, + .rosebox, + .violet, + :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; + } + } + + --accent: @accent-color !important; + --green: @green !important; + --text: @text !important; + --foreground: @crust !important; + --background: @base !important; + --outside: @mantle !important; + --post: @mantle !important; + --panel-border: none !important; + --highlighted: @surface0 !important; + --visited: @overlay0 !important; + --shadow: 0 5px 15px 0 transparent !important; + + --nsfw: @peach !important; + --admin: @maroon !important; + + /* thumbnail titles */ + .post_thumbnail span { + background-color: @base; + color: @text; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/lichess/catppuccin.user.css b/styles/lichess/catppuccin.user.css index 2848811038..e26daf0248 100644 --- a/styles/lichess/catppuccin.user.css +++ b/styles/lichess/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Lichess Catppuccin +@name Lichess Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/lichess @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lichess -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lichess/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lichess/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alichess @description Soothing pastel theme for Lichess @author Catppuccin @@ -14,588 +14,4 @@ @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 checkbox stylePieces "Style Pieces" 1 -==/UserStyle== */ - -@-moz-document domain("lichess.org") { - :root:has(body[data-theme="light"]) { - #catppuccin(@lightFlavor, @accentColor); - } - :root:has(body[data-theme="dark"]) { - #catppuccin(@darkFlavor, @accentColor); - } - :root:has(body[data-theme="system"]) { - @media (prefers-color-scheme: light) { - #catppuccin(@lightFlavor, @accentColor); - } - @media (prefers-color-scheme: dark) { - #catppuccin(@darkFlavor, @accentColor); - } - } - - #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; - } - } - - html, - body { - background: @base linear-gradient(to bottom, @crust, @base 116px) - no-repeat; - color: @text !important; - } - - /* Button */ - .site-title a { - color: @accent-color; - } - .site-title span { - color: @text; - } - - /* Game selection menus */ - .hooks__list td { - background-color: fade(@overlay0, 50%); - } - .hooks__list tr.join:hover td { - background-color: fade(@accent-color, 50%); - } - - /* Topbar */ - #topnav.hover section:hover > a, - #topnav section:active > a, - #topnav div, - .site-buttons .shown .toggle, - .site-buttons .dropdown { - background: @crust; - } - #topnav section > a { - color: @subtext0; - } - #topnav.hover section:hover > a, - #topnav section:active > a, - #topnav div a, - #dasher_app .selector button, - #dasher_app .head, - #dasher_app .piece .no-square, - #dasher_app .theme .list button, - #dasher_app .links a, - #dasher_app .links button, - #dasher_app .subs .sub, - .site-buttons .dropdown a, - .site-buttons .dropdown button { - color: @text; - } - #topnav.hover section:hover > a, - #topnav section:active > a, - #topnav div { - border-left-color: @accent-color; - } - signal > i { - background-color: @green; - } - #dasher_app .sub::before, - .is-green::before { - color: @green; - } - #challenge-app .empty { - background: @crust; - } - - /* Popup skining */ - dialog { - background: @crust; - } - .game-setup .optional-config, - .game-setup .ratings { - background: @base; - } - .game-setup .radio input:checked + label { - background: @green; - } - - /* Text */ - .site-buttons .link, - .button, - .input, - .optgroup, - .select, - .textarea, - .lobby__box td.name a, - .lobby__box__top .title, - .lobby__box .user-link, - .mini-game, - .mini-game:hover, - .text, - .ublog-post-card__title, - .lobby__counters a, - .lobby__streams .stream, - .lobby__timeline .entry a, - .lobby__about a, - .lobby__timeline, - .lobby__counters, - .tabs-horiz, - .lobby__streams .more, - .lobby__timeline .more, - .dialog-content, - button, - input, - optgroup, - select, - textarea { - color: @subtext0; - } - .site-buttons .link:hover, - .button.button-metal:hover, - .radio input:checked + label { - color: @text; - } - .site-title-nav__donate, - .lobby__streams .stream.highlight strong, - .utitle, - .lobby__support__text, - .lobby__support i::before { - color: @peach; - } - .mini-game__clock.clock--run, - .tabs-horiz span.active { - color: @red; - } - .tabs-horiz span.active, - .tabs-horiz span:hover { - border-color: @red; - } - a { - color: @blue; - } - /* Links */ - .lobby__timeline .entry:hover a, - a:hover, - a:active, - a:focus { - color: @accent-color; - } - - /* Homepage cards */ - .lobby__app__content, - .box { - background-color: @mantle; - } - .lpools > div { - background: fade(@crust, 20%); - border-color: @surface0; - &:hover { - background-color: fade(@accent-color, 20%); - } - } - .hook__filters { - background-color: fade(@mantle, 50%); - } - .lobby__support a { - background: @crust; - } - .lobby__support a:hover { - background: @peach; - } - .lobby__support a:hover i::before, - .lobby__support a:hover .lobby__support__text { - color: @mantle; - } - .lobby__box__top, - #hook .opponent, - .lobby__box__content, - .ublog-post-card, - .button, - .tour-spotlight { - background: @mantle !important; - } - .unread { - background: @red; - } - .lobby__box tr:nth-child(even) { - background: @crust; - } - - /* Non-main page sidebar nav colors */ - .subnav a.active { - color: @red; - } - .subnav a.active::after, - .subnav a:hover::after { - background: @red; - } - - /* Blog cards */ - .blog-cards > a { - background: @crust; - } - - /* Learn tab */ - .learn-stages .stage.done { - background: @green; - } - .learn-stages .stage.ongoing, - .learn__side-home { - background: @blue; - } - .learn-stages .stage.future { - background: @red; - } - - /* Chess Game */ - .brown .is2d cg-board { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - & when (@stylePieces = 1) { - .is2d .pawn { - #piece(@f, @s) { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - &.black { - #piece(@base, @text); - } - &.white { - #piece(@text, @base); - } - } - .is2d .bishop { - #piece(@f, @s) { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - &.black { - #piece(@base, @text); - } - &.white { - #piece(@text, @base); - } - } - .is2d .knight { - #piece(@f, @s) { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - &.black { - #piece(@base, @text); - } - &.white { - #piece(@text, @base); - } - } - .is2d .rook { - #piece(@f, @s) { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - &.black { - #piece(@base, @text); - } - &.white { - #piece(@text, @base); - } - } - .is2d .king { - #piece(@f, @s) { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - &.black { - #piece(@base, @text); - } - &.white { - #piece(@text, @base); - } - } - .is2d .queen { - &.black { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - &.white { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - } - } - - .orientation-white .files coord:nth-child(2n + 1), - .orientation-white .ranks coord:nth-child(2n), - .orientation-black .files coord:nth-child(2n), - .orientation-black .ranks coord:nth-child(2n + 1) { - color: @base; - } - .orientation-white .files coord:nth-child(2n), - .orientation-white .ranks coord:nth-child(2n + 1), - .orientation-black .files coord:nth-child(2n + 1), - .orientation-black .ranks coord:nth-child(2n) { - color: @crust; - } - square.move-dest { - background: radial-gradient( - fade(@accent-color, 50%) 19%, - rgba(0, 0, 0, 0) 20% - ); - } - square.selected { - background: fade(@accent-color, 50%); - } - square.last-move { - background: fade(@accent-color, 40%); - } - .rclock .time { - background: @mantle; - color: @text; - } - .rclock.running .time { - background: #384722; /* putting it back to default so that the time on the clock is readable */ - } - .rclock .bar { - background: @accent-color; - } - - /* Game Cards */ - .game__meta, - .round__app__table { - background: @crust; - } - rm6 { - background: @mantle; - } - rm6 .buttons, - rm6 i5z { - background: @base; - } - - /* Messages */ - .msg-app__convo__head, - .msg-app__side__search, - .msg-app__convo__reply { - background: @crust; - } - .msg-app__side { - background: @mantle; - } - .msg-app__side__search input, - .msg-app__convo__post__text { - background: @base; - } - .msg-app__side__contact__name { - color: @text; - } - .msg-app__side__contact__msg, - .msg-app__side__contact__date time { - color: @subtext0; - } - - /* User dropdown */ - #powerTip, - #miniGame, - #miniBoard { - background: @crust; - } - .btn-rack__btn, - .btn-rack form, - #friend_box .friend_box_title, - .button.button-metal, - .button.button-empty:not(.disabled):hover, - .button.button-empty.button-green:not(.disabled):hover, - .button.button-empty.button-red:not(.disabled):hover { - background: @base; - } - - /* User Page */ - .user-show__header, - .user-show__social, - .user-show .angles, - .cmn-toggle:hover:not(:disabled) + label::after, - .cmn-toggle + label::after, - .crosstable povs:hover, - .crosstable__users, - .crosstable__score, - .game-row:nth-child(odd), - .number-menu--tabs .nm-item.active { - background: @crust; - } - .number-menu--tabs .nm-item.active, - .user-show .number-menu .to-games.active, - .user-show #games.number-menu { - background: @mantle !important; - } - /* Stats */ - .perf-stat .counter tr.full td:last-child { - background: @crust; - } - .sub-ratings a.active { - background: @mantle; - } - .sub-ratings a[href]:hover { - background: @crust; - } - - /* Analysis page */ - .analyse__clock, - #analyse-cm .title, - .explorer__config .choices button, - .mselect__label, - .cmn-toggle:hover:not(:disabled) + label::after, - .cmn-toggle + label::after, - .crosstable povs:hover, - .crosstable__users, - .crosstable__score, - .mselect__list, - .analyse__tools .comp-off__hint, - .ceval, - .explorer-box tr:nth-child(even), - .board-editor__tools .metadata, - .mchat__content, - .mchat__tab-active, - .crosstable fill { - background: @crust !important; - } - .analyse__tools, - .copyable, - .pv_box, - #ceval-settings { - background: @mantle; - } - .ceval .settings-gear.active { - background-color: @accent-color; - } - #ceval-settings { - border-top-color: @accent-color; - } - .mchat__tab:hover { - background: fade(@accent-color, 50%); - } - /* Openings */ - .opening__config, - .opening__next { - background: @crust; - } - .opening__next { - outline-color: @base; - } - .opening__next:hover { - outline-color: @accent-color; - } - .opening__next__popularity span { - background: @accent-color; - } - .opening__next__title { - color: @accent-color; - } - - /* Puzzles */ - .tview2-column > index { - background: @base; - color: @subtext0 !important; - } - .puzzle__feedback { - background: @base; - } - .puzzle__tools, - .puzzle__side__metas, - .puzzle__side__user, - .puzzle__side__config, - .puzzle__side__theme { - background: @mantle; - } - input, - textarea, - select { - background: @crust; - } - .cmn-toggle:checked + label { - background-color: @green; - } - .cmn-toggle:checked + label::before { - color: @green; - } - - /* Teams */ - .slist tbody tr:nth-child(even), - .team-show__desc, - .team-show__forum__post:nth-child(odd) { - background: @crust; - } - - /* Settings */ - .account .radio input:checked + label, - .account table.allows tr:nth-child(odd) td { - background: @crust; - } - .radio label { - background: @base; - } - .flash-warning { - background: @peach; - } - .form-control:invalid { - border-color: @red; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/lichess/catppuccin.user.less b/styles/lichess/catppuccin.user.less new file mode 100644 index 0000000000..55e7bf8e4b --- /dev/null +++ b/styles/lichess/catppuccin.user.less @@ -0,0 +1,599 @@ +/* ==UserStyle== +@name Lichess Catppuccin +@namespace github.com/catppuccin/userstyles/styles/lichess +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lichess +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lichess/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alichess +@description Soothing pastel theme for Lichess +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +@var checkbox stylePieces "Style Pieces" 1 +==/UserStyle== */ + +@-moz-document domain("lichess.org") { + :root:has(body[data-theme="light"]) { + #catppuccin(@lightFlavor, @accentColor); + } + :root:has(body[data-theme="dark"]) { + #catppuccin(@darkFlavor, @accentColor); + } + :root:has(body[data-theme="system"]) { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor, @accentColor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor, @accentColor); + } + } + + #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; + } + } + + html, + body { + background: @base linear-gradient(to bottom, @crust, @base 116px) + no-repeat; + color: @text !important; + } + + /* Button */ + .site-title a { + color: @accent-color; + } + .site-title span { + color: @text; + } + + /* Game selection menus */ + .hooks__list td { + background-color: fade(@overlay0, 50%); + } + .hooks__list tr.join:hover td { + background-color: fade(@accent-color, 50%); + } + + /* Topbar */ + #topnav.hover section:hover > a, + #topnav section:active > a, + #topnav div, + .site-buttons .shown .toggle, + .site-buttons .dropdown { + background: @crust; + } + #topnav section > a { + color: @subtext0; + } + #topnav.hover section:hover > a, + #topnav section:active > a, + #topnav div a, + #dasher_app .selector button, + #dasher_app .head, + #dasher_app .piece .no-square, + #dasher_app .theme .list button, + #dasher_app .links a, + #dasher_app .links button, + #dasher_app .subs .sub, + .site-buttons .dropdown a, + .site-buttons .dropdown button { + color: @text; + } + #topnav.hover section:hover > a, + #topnav section:active > a, + #topnav div { + border-left-color: @accent-color; + } + signal > i { + background-color: @green; + } + #dasher_app .sub::before, + .is-green::before { + color: @green; + } + #challenge-app .empty { + background: @crust; + } + + /* Popup skining */ + dialog { + background: @crust; + } + .game-setup .optional-config, + .game-setup .ratings { + background: @base; + } + .game-setup .radio input:checked + label { + background: @green; + } + + /* Text */ + .site-buttons .link, + .button, + .input, + .optgroup, + .select, + .textarea, + .lobby__box td.name a, + .lobby__box__top .title, + .lobby__box .user-link, + .mini-game, + .mini-game:hover, + .text, + .ublog-post-card__title, + .lobby__counters a, + .lobby__streams .stream, + .lobby__timeline .entry a, + .lobby__about a, + .lobby__timeline, + .lobby__counters, + .tabs-horiz, + .lobby__streams .more, + .lobby__timeline .more, + .dialog-content, + button, + input, + optgroup, + select, + textarea { + color: @subtext0; + } + .site-buttons .link:hover, + .button.button-metal:hover, + .radio input:checked + label { + color: @text; + } + .site-title-nav__donate, + .lobby__streams .stream.highlight strong, + .utitle, + .lobby__support__text, + .lobby__support i::before { + color: @peach; + } + .mini-game__clock.clock--run, + .tabs-horiz span.active { + color: @red; + } + .tabs-horiz span.active, + .tabs-horiz span:hover { + border-color: @red; + } + a { + color: @blue; + } + /* Links */ + .lobby__timeline .entry:hover a, + a:hover, + a:active, + a:focus { + color: @accent-color; + } + + /* Homepage cards */ + .lobby__app__content, + .box { + background-color: @mantle; + } + .lpools > div { + background: fade(@crust, 20%); + border-color: @surface0; + &:hover { + background-color: fade(@accent-color, 20%); + } + } + .hook__filters { + background-color: fade(@mantle, 50%); + } + .lobby__support a { + background: @crust; + } + .lobby__support a:hover { + background: @peach; + } + .lobby__support a:hover i::before, + .lobby__support a:hover .lobby__support__text { + color: @mantle; + } + .lobby__box__top, + #hook .opponent, + .lobby__box__content, + .ublog-post-card, + .button, + .tour-spotlight { + background: @mantle !important; + } + .unread { + background: @red; + } + .lobby__box tr:nth-child(even) { + background: @crust; + } + + /* Non-main page sidebar nav colors */ + .subnav a.active { + color: @red; + } + .subnav a.active::after, + .subnav a:hover::after { + background: @red; + } + + /* Blog cards */ + .blog-cards > a { + background: @crust; + } + + /* Learn tab */ + .learn-stages .stage.done { + background: @green; + } + .learn-stages .stage.ongoing, + .learn__side-home { + background: @blue; + } + .learn-stages .stage.future { + background: @red; + } + + /* Chess Game */ + .brown .is2d cg-board { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + & when (@stylePieces = 1) { + .is2d .pawn { + #piece(@f, @s) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + &.black { + #piece(@base, @text); + } + &.white { + #piece(@text, @base); + } + } + .is2d .bishop { + #piece(@f, @s) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + &.black { + #piece(@base, @text); + } + &.white { + #piece(@text, @base); + } + } + .is2d .knight { + #piece(@f, @s) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + &.black { + #piece(@base, @text); + } + &.white { + #piece(@text, @base); + } + } + .is2d .rook { + #piece(@f, @s) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + &.black { + #piece(@base, @text); + } + &.white { + #piece(@text, @base); + } + } + .is2d .king { + #piece(@f, @s) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + &.black { + #piece(@base, @text); + } + &.white { + #piece(@text, @base); + } + } + .is2d .queen { + &.black { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + &.white { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + } + } + + .orientation-white .files coord:nth-child(2n+1), + .orientation-white .ranks coord:nth-child(2n), + .orientation-black .files coord:nth-child(2n), + .orientation-black .ranks coord:nth-child(2n+1) { + color: @base; + } + .orientation-white .files coord:nth-child(2n), + .orientation-white .ranks coord:nth-child(2n+1), + .orientation-black .files coord:nth-child(2n+1), + .orientation-black .ranks coord:nth-child(2n) { + color: @crust; + } + square.move-dest { + background: radial-gradient( + fade(@accent-color, 50%) 19%, + rgba(0, 0, 0, 0) 20% + ); + } + square.selected { + background: fade(@accent-color, 50%); + } + square.last-move { + background: fade(@accent-color, 40%); + } + .rclock .time { + background: @mantle; + color: @text; + } + .rclock.running .time { + background: #384722; /* putting it back to default so that the time on the clock is readable */ + } + .rclock .bar { + background: @accent-color; + } + + /* Game Cards */ + .game__meta, + .round__app__table { + background: @crust; + } + rm6 { + background: @mantle; + } + rm6 .buttons, + rm6 i5z { + background: @base; + } + + /* Messages */ + .msg-app__convo__head, + .msg-app__side__search, + .msg-app__convo__reply { + background: @crust; + } + .msg-app__side { + background: @mantle; + } + .msg-app__side__search input, + .msg-app__convo__post__text { + background: @base; + } + .msg-app__side__contact__name { + color: @text; + } + .msg-app__side__contact__msg, + .msg-app__side__contact__date time { + color: @subtext0; + } + + /* User dropdown */ + #powerTip, + #miniGame, + #miniBoard { + background: @crust; + } + .btn-rack__btn, + .btn-rack form, + #friend_box .friend_box_title, + .button.button-metal, + .button.button-empty:not(.disabled):hover, + .button.button-empty.button-green:not(.disabled):hover, + .button.button-empty.button-red:not(.disabled):hover { + background: @base; + } + + /* User Page */ + .user-show__header, + .user-show__social, + .user-show .angles, + .cmn-toggle:hover:not(:disabled) + label::after, + .cmn-toggle + label::after, + .crosstable povs:hover, + .crosstable__users, + .crosstable__score, + .game-row:nth-child(odd), + .number-menu--tabs .nm-item.active { + background: @crust; + } + .number-menu--tabs .nm-item.active, + .user-show .number-menu .to-games.active, + .user-show #games.number-menu { + background: @mantle !important; + } + /* Stats */ + .perf-stat .counter tr.full td:last-child { + background: @crust; + } + .sub-ratings a.active { + background: @mantle; + } + .sub-ratings a[href]:hover { + background: @crust; + } + + /* Analysis page */ + .analyse__clock, + #analyse-cm .title, + .explorer__config .choices button, + .mselect__label, + .cmn-toggle:hover:not(:disabled) + label::after, + .cmn-toggle + label::after, + .crosstable povs:hover, + .crosstable__users, + .crosstable__score, + .mselect__list, + .analyse__tools .comp-off__hint, + .ceval, + .explorer-box tr:nth-child(even), + .board-editor__tools .metadata, + .mchat__content, + .mchat__tab-active, + .crosstable fill { + background: @crust !important; + } + .analyse__tools, + .copyable, + .pv_box, + #ceval-settings { + background: @mantle; + } + .ceval .settings-gear.active { + background-color: @accent-color; + } + #ceval-settings { + border-top-color: @accent-color; + } + .mchat__tab:hover { + background: fade(@accent-color, 50%); + } + /* Openings */ + .opening__config, + .opening__next { + background: @crust; + } + .opening__next { + outline-color: @base; + } + .opening__next:hover { + outline-color: @accent-color; + } + .opening__next__popularity span { + background: @accent-color; + } + .opening__next__title { + color: @accent-color; + } + + /* Puzzles */ + .tview2-column > index { + background: @base; + color: @subtext0 !important; + } + .puzzle__feedback { + background: @base; + } + .puzzle__tools, + .puzzle__side__metas, + .puzzle__side__user, + .puzzle__side__config, + .puzzle__side__theme { + background: @mantle; + } + input, + textarea, + select { + background: @crust; + } + .cmn-toggle:checked + label { + background-color: @green; + } + .cmn-toggle:checked + label::before { + color: @green; + } + + /* Teams */ + .slist tbody tr:nth-child(even), + .team-show__desc, + .team-show__forum__post:nth-child(odd) { + background: @crust; + } + + /* Settings */ + .account .radio input:checked + label, + .account table.allows tr:nth-child(odd) td { + background: @crust; + } + .radio label { + background: @base; + } + .flash-warning { + background: @peach; + } + .form-control:invalid { + border-color: @red; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/lingva/catppuccin.user.css b/styles/lingva/catppuccin.user.css index 0f69363994..7c78eab489 100644 --- a/styles/lingva/catppuccin.user.css +++ b/styles/lingva/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Lingva Catppuccin +@name Lingva Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/lingva @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lingva -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lingva/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lingva/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alingva @description Soothing pastel theme for Lingva @author Catppuccin @@ -13,135 +13,4 @@ @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('lingva.ml'), -domain('translate.plausibility.cloud'), -domain('lingva.lunar.icu'), -domain('translate.projectsegfau.lt'), -domain('lingva.garudalinux.org') { - .chakra-ui-light { - #catppuccin(@lightFlavor, @accentColor); - } - .chakra-ui-dark { - #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: @base; - color: @text; - } - - header { - background-color: @accent-color; - - .chakra-button { - color: darken(@accent-color, 50%); - background: lighten(@accent-color, 5%); - &:hover { - background: darken(@accent-color, 5%); - } - } - } - - footer { - background-color: @accent-color; - color: darken(@accent-color, 50%); - } - - #__next > div { - background: @base; - } - - main { - background: @base; - color: @text; - - select { - border-color: @accent-color; - color: @text; - } - .chakra-select__icon { - color: @text; - } - .chakra-button { - color: @accent-color; - border-color: @accent-color; - - &:hover:not(:disabled) { - background-color: rgba(@accent-color, 0.12); - } - - // Auto translate button (clicked) (Dark and Light classes) - &.css-1huvcr7, - &.css-q22xb2 { - background: @accent-color; - color: @crust; - } - } - .chakra-stack { - border-color: @accent-color; - } - - textarea { - color: @text; - } - - .chakra-text { - color: @subtext1; - } - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/lingva/catppuccin.user.less b/styles/lingva/catppuccin.user.less new file mode 100644 index 0000000000..c8b373be6c --- /dev/null +++ b/styles/lingva/catppuccin.user.less @@ -0,0 +1,145 @@ +/* ==UserStyle== +@name Lingva Catppuccin +@namespace github.com/catppuccin/userstyles/styles/lingva +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lingva +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lingva/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alingva +@description Soothing pastel theme for Lingva +@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("lingva.ml"), + domain("translate.plausibility.cloud"), + domain("lingva.lunar.icu"), + domain("translate.projectsegfau.lt"), + domain("lingva.garudalinux.org") { + .chakra-ui-light { + #catppuccin(@lightFlavor, @accentColor); + } + .chakra-ui-dark { + #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: @base; + color: @text; + } + + header { + background-color: @accent-color; + + .chakra-button { + color: darken(@accent-color, 50%); + background: lighten(@accent-color, 5%); + &:hover { + background: darken(@accent-color, 5%); + } + } + } + + footer { + background-color: @accent-color; + color: darken(@accent-color, 50%); + } + + #__next > div { + background: @base; + } + + main { + background: @base; + color: @text; + + select { + border-color: @accent-color; + color: @text; + } + .chakra-select__icon { + color: @text; + } + .chakra-button { + color: @accent-color; + border-color: @accent-color; + + &:hover:not(:disabled) { + background-color: rgba(@accent-color, 0.12); + } + + // Auto translate button (clicked) (Dark and Light classes) + &.css-1huvcr7, + &.css-q22xb2 { + background: @accent-color; + color: @crust; + } + } + .chakra-stack { + border-color: @accent-color; + } + + textarea { + color: @text; + } + + .chakra-text { + color: @subtext1; + } + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/linkedin/catppuccin.user.css b/styles/linkedin/catppuccin.user.css index fc2e2ae22c..9ed77a6c33 100644 --- a/styles/linkedin/catppuccin.user.css +++ b/styles/linkedin/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name LinkedIn Catppuccin +@name LinkedIn Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/linkedin @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/linkedin -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/linkedin/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/linkedin/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alinkedin @description Soothing pastel theme for LinkedIn @author Catppuccin @@ -13,533 +13,4 @@ @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('www.linkedin.com') { - :root:not(.theme--dark, .theme--mercado-dark) { - #catppuccin(@lightFlavor, @accentColor); - } - :root.theme--dark, - :root.theme--mercado-dark { - #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]; - @surface0: @catppuccin[@@lookup][@surface0]; - @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; - } - } - - --black: @crust; - --black-a90: @crust; - --black-a75: @crust; - --black-a60: fadeout(@crust, 40%); - --black-a45: @crust; - --black-a30: @crust; - --black-a15: @crust; - --black-a12: @crust; - --black-a08: @crust; - --black-a04: @crust; - --black-a100: @crust; - - --white: @text; - --white-a06: @surface0; - --white-a12: @surface0; - --white-a18: @surface0; - --white-a25: @surface0; - --white-a30: @text; - --white-a40: @text; - --white-a45: @text; - --white-a55: @text; - --white-a60: @subtext0; - --white-a70: @text; - --white-a75: @text; - --white-a85: @text; - --white-a90: @text; - --white-a100: @text; - - --blue-10: @blue; - --blue-20: @blue; - --blue-30: @blue; - --blue-40: @blue; - --blue-50: @blue; - --blue-60: @blue; - --blue-70: @blue; - --blue-80: @blue; - --blue-90: @blue; - --blue-100: @blue; - --blue-50-a20: fadeout(@blue, 80%); - --blue-50-a25: fadeout(@blue, 75%); - --blue-50-a30: fadeout(@blue, 70%); - --blue-50-a40: fadeout(@blue, 60%); - --blue-60-a10: fadeout(@blue, 90%); - --blue-60-a15: fadeout(@blue, 15%); - --blue-60-a20: fadeout(@blue, 80%); - --blue-60-a25: fadeout(@blue, 75%); - --blue-60-a30: fadeout(@blue, 70%); - --blue-60-a35: fadeout(@blue, 65%); - --blue-60-a40: fadeout(@blue, 60%); - --blue-60-a45: fadeout(@blue, 55%); - --blue-70-a30: fadeout(@sapphire, 70%); - --blue-70-a40: fadeout(@sapphire, 60%); - --blue-70-a50: fadeout(@sapphire, 50%); - - --cool-gray-10: @mantle; - --cool-gray-20: @surface0; - --cool-gray-30: @mantle; - --cool-gray-40: @mantle; - --cool-gray-50: @mantle; - --cool-gray-60: @mantle; - --cool-gray-70: @mantle; - --cool-gray-80: @surface0; - --cool-gray-85: @mantle; - --cool-gray-90: @mantle; - --cool-gray-100: @mantle; - --cool-gray-60-a10: fadeout(@mantle, 90%); - --cool-gray-60-a15: fadeout(@mantle, 85%); - --cool-gray-60-a20: fadeout(@mantle, 80%); - --cool-gray-60-a25: fadeout(@mantle, 75%); - --cool-gray-60-a30: fadeout(@mantle, 70%); - --cool-gray-60-a35: fadeout(@mantle, 65%); - - --warm-gray-10: @overlay1; - --warm-gray-20: @overlay1; - --warm-gray-30: @overlay1; - --warm-gray-40: @overlay1; - --warm-gray-50: @overlay1; - --warm-gray-60: @overlay1; - --warm-gray-70: @overlay1; - --warm-gray-80: @overlay1; - --warm-gray-90: @overlay1; - --warm-gray-100: @overlay1; - --warm-gray-60-a10: fadeout(@overlay1, 90%); - --warm-gray-60-a15: fadeout(@overlay1, 85%); - --warm-gray-60-a20: fadeout(@overlay1, 80%); - --warm-gray-60-a25: fadeout(@overlay1, 75%); - --warm-gray-60-a30: fadeout(@overlay1, 70%); - --warm-gray-60-a35: fadeout(@overlay1, 65%); - - --warm-red-10: @maroon; - --warm-red-20: @maroon; - --warm-red-30: @maroon; - --warm-red-40: @maroon; - --warm-red-50: @maroon; - --warm-red-60: @maroon; - --warm-red-70: @maroon; - --warm-red-80: @maroon; - --warm-red-90: @maroon; - --warm-red-100: @maroon; - --warm-red-60-a10: fadeout(@maroon, 90%); - --warm-red-60-a15: fadeout(@maroon, 85%); - --warm-red-60-a20: fadeout(@maroon, 80%); - --warm-red-60-a25: fadeout(@maroon, 75%); - --warm-red-60-a30: fadeout(@maroon, 70%); - --warm-red-60-a35: fadeout(@maroon, 65%); - - --teal-10: @teal; - --teal-20: @teal; - --teal-30: @teal; - --teal-40: @teal; - --teal-50: @teal; - --teal-60: @teal; - --teal-70: @teal; - --teal-80: @teal; - --teal-90: @teal; - --teal-100: @teal; - --teal-50-a30: fadein(@teal, 70%); - --teal-60-a10: fadeout(@teal, 90%); - --teal-60-a15: fadeout(@teal, 85%); - --teal-60-a20: fadeout(@teal, 80%); - --teal-60-a25: fadeout(@teal, 75%); - --teal-60-a30: fadeout(@teal, 70%); - --teal-60-a35: fadeout(@teal, 65%); - - --purple-10: @lavender; - --purple-20: @lavender; - --purple-30: @lavender; - --purple-40: @lavender; - --purple-50: @lavender; - --purple-60: @lavender; - --purple-70: @lavender; - --purple-80: @lavender; - --purple-90: @lavender; - --purple-100: @lavender; - --purple-40-a15: fadeout(@lavender, 85%); - --purple-60-a10: fadeout(@lavender, 90%); - --purple-60-a15: fadeout(@lavender, 85%); - --purple-60-a20: fadeout(@lavender, 80%); - --purple-60-a25: fadeout(@lavender, 75%); - --purple-60-a30: fadeout(@lavender, 70%); - --purple-60-a35: fadeout(@lavender, 65%); - --purple-70-a15: fadeout(@lavender, 85%); - - --system-red-10: @red; - --system-red-20: @red; - --system-red-30: @red; - --system-red-40: @red; - --system-red-50: @red; - --system-red-60: @red; - --system-red-70: @red; - --system-red-80: @red; - --system-red-90: @red; - --system-red-100: @red; - --system-red-60-a10: fadeout(@red, 90%); - --system-red-60-a15: fadeout(@red, 85%); - --system-red-60-a20: fadeout(@red, 80%); - --system-red-60-a25: fadeout(@red, 75%); - --system-red-60-a30: fadeout(@red, 70%); - --system-red-60-a35: fadeout(@red, 65%); - - --system-green-10: darken(@green, 20%); - --system-green-20: darken(@green, 20%); - --system-green-30: darken(@green, 20%); - --system-green-40: darken(@green, 20%); - --system-green-50: darken(@green, 20%); - --system-green-60: darken(@green, 20%); - --system-green-70: darken(@green, 20%); - --system-green-80: darken(@green, 20%); - --system-green-90: darken(@green, 20%); - --system-green-100: darken(@green, 20%); - --system-green-60-a10: fadeout(darken(@green, 20), 90%); - --system-green-60-a15: fadeout(darken(@green, 20), 85%); - --system-green-60-a20: fadeout(darken(@green, 20), 80%); - --system-green-60-a25: fadeout(darken(@green, 20), 75%); - --system-green-60-a30: fadeout(darken(@green, 20), 70%); - --system-green-60-a35: fadeout(darken(@green, 20), 65%); - - --pink-10: @pink; - --pink-20: @pink; - --pink-30: @pink; - --pink-40: @pink; - --pink-50: @pink; - --pink-60: @pink; - --pink-70: @pink; - --pink-80: @pink; - --pink-90: @pink; - --pink-100: @pink; - --pink-60-a10: fadeout(@pink, 90%); - --pink-60-a15: fadeout(@pink, 85%); - --pink-60-a20: fadeout(@pink, 80%); - --pink-60-a25: fadeout(@pink, 75%); - --pink-60-a30: fadeout(@pink, 70%); - --pink-60-a35: fadeout(@pink, 65%); - - --amber-10: @yellow; - --amber-20: @yellow; - --amber-30: @yellow; - --amber-40: @yellow; - --amber-50: @yellow; - --amber-60: @yellow; - --amber-70: @yellow; - --amber-80: @yellow; - --amber-90: @yellow; - --amber-100: @yellow; - --amber-30-a50: fadein(@yellow, 50%); - --amber-60-a10: fadeout(@yellow, 90%); - --amber-60-a15: fadeout(@yellow, 85%); - --amber-60-a20: fadeout(@yellow, 80%); - --amber-60-a25: fadeout(@yellow, 75%); - --amber-60-a30: fadeout(@yellow, 70%); - --amber-60-a35: fadeout(@yellow, 65%); - - --copper-10: @rosewater; - --copper-20: @rosewater; - --copper-30: @rosewater; - --copper-40: @rosewater; - --copper-50: @rosewater; - --copper-60: @rosewater; - --copper-70: @rosewater; - --copper-80: @rosewater; - --copper-90: @rosewater; - --copper-100: @rosewater; - --copper-60-a10: fadeout(@rosewater, 90%); - --copper-60-a15: fadeout(@rosewater, 85%); - --copper-60-a20: fadeout(@rosewater, 80%); - --copper-60-a25: fadeout(@rosewater, 75%); - --copper-60-a30: fadeout(@rosewater, 70%); - --copper-60-a35: fadeout(@rosewater, 65%); - - --green-10: @green; - --green-20: @green; - --green-30: @green; - --green-40: @green; - --green-50: @green; - --green-60: @green; - --green-70: @green; - --green-80: @green; - --green-90: @green; - --green-100: @green; - --green-60-a10: fadeout(@green, 90%); - --green-60-a15: fadeout(@green, 85%); - --green-60-a20: fadeout(@green, 80%); - --green-60-a25: fadeout(@green, 75%); - --green-60-a30: fadeout(@green, 70%); - --green-60-a35: fadeout(@green, 65%); - - --sage-10: darken(@green, 40%); - --sage-20: darken(@green, 40%); - --sage-30: darken(@green, 40%); - --sage-40: darken(@green, 40%); - --sage-50: darken(@green, 40%); - --sage-60: darken(@green, 40%); - --sage-70: darken(@green, 40%); - --sage-80: darken(@green, 40%); - --sage-90: darken(@green, 40%); - --sage-100: darken(@green, 40%); - --sage-60-a10: fadeout(darken(@green, 40), 90%); - --sage-60-a15: fadeout(darken(@green, 40), 85%); - --sage-60-a20: fadeout(darken(@green, 40), 80%); - --sage-60-a25: fadeout(darken(@green, 40), 75%); - --sage-60-a30: fadeout(darken(@green, 40), 70%); - --sage-60-a35: fadeout(darken(@green, 40), 65%); - - --lime-10: lighten(@green, 20%); - --lime-20: lighten(@green, 20%); - --lime-30: lighten(@green, 20%); - --lime-40: lighten(@green, 20%); - --lime-50: lighten(@green, 20%); - --lime-60: lighten(@green, 20%); - --lime-70: lighten(@green, 20%); - --lime-80: lighten(@green, 20%); - --lime-90: lighten(@green, 20%); - --lime-100: lighten(@green, 20%); - --lime-60-a10: fadeout(lighten(@green, 20), 90%); - --lime-60-a15: fadeout(lighten(@green, 20), 85%); - --lime-60-a20: fadeout(lighten(@green, 20), 80%); - --lime-60-a25: fadeout(lighten(@green, 20), 75%); - --lime-60-a30: fadeout(lighten(@green, 20), 70%); - --lime-60-a35: fadeout(lighten(@green, 20), 65%); - - --camo-10: @accent-color; - --camo-20: @accent-color; - --camo-30: @accent-color; - --camo-40: @accent-color; - --camo-50: @accent-color; - --camo-60: @accent-color; - --camo-70: @accent-color; - --camo-80: @accent-color; - --camo-90: @accent-color; - --camo-100: @accent-color; - --camo-60-a10: fadeout(@accent-color, 90%); - --camo-60-a15: fadeout(@accent-color, 85%); - --camo-60-a20: fadeout(@accent-color, 80%); - --camo-60-a25: fadeout(@accent-color, 75%); - --camo-60-a30: fadeout(@accent-color, 70%); - --camo-60-a35: fadeout(@accent-color, 65%); - - --smoke-10: @surface1; - --smoke-20: @surface1; - --smoke-30: @surface1; - --smoke-40: @surface1; - --smoke-50: @surface1; - --smoke-60: @surface1; - --smoke-70: @surface1; - --smoke-80: @surface1; - --smoke-90: @surface1; - --smoke-100: @surface1; - --smoke-60-a10: fadeout(@surface1, 90%); - --smoke-60-a15: fadeout(@surface1, 85%); - --smoke-60-a20: fadeout(@surface1, 80%); - --smoke-60-a25: fadeout(@surface1, 75%); - --smoke-60-a30: fadeout(@surface1, 70%); - --smoke-60-a35: fadeout(@surface1, 65%); - - --lavender-10: @lavender; - --lavender-20: @lavender; - --lavender-30: @lavender; - --lavender-40: @lavender; - --lavender-50: @lavender; - --lavender-60: @lavender; - --lavender-70: @lavender; - --lavender-80: @lavender; - --lavender-90: @lavender; - --lavender-100: @lavender; - --lavender-60-a10: fadeout(@lavender, 90%); - --lavender-60-a15: fadeout(@lavender, 85%); - --lavender-60-a20: fadeout(@lavender, 80%); - --lavender-60-a25: fadeout(@lavender, 75%); - --lavender-60-a30: fadeout(@lavender, 70%); - --lavender-60-a35: fadeout(@lavender, 65%); - - --mauve-10: @mauve; - --mauve-20: @mauve; - --mauve-30: @mauve; - --mauve-40: @mauve; - --mauve-50: @mauve; - --mauve-60: @mauve; - --mauve-70: @mauve; - --mauve-80: @mauve; - --mauve-90: @mauve; - --mauve-100: @mauve; - --mauve-60-a10: fadeout(@mauve, 90%); - --mauve-60-a15: fadeout(@mauve, 85%); - --mauve-60-a20: fadeout(@mauve, 80%); - --mauve-60-a25: fadeout(@mauve, 75%); - --mauve-60-a30: fadeout(@mauve, 70%); - --mauve-60-a35: fadeout(@mauve, 65%); - --mauve-80-a50: fadeout(@mauve, 50%); - - --system-gray-10: @surface0; - --system-gray-20: @surface0; - --system-gray-30: @surface0; - --system-gray-40: @surface0; - --system-gray-50: @surface0; - --system-gray-60: @surface0; - --system-gray-70: @surface0; - --system-gray-80: @surface0; - --system-gray-90: @surface0; - --system-gray-100: @surface0; - --system-gray-60-a10: fadeout(@surface0, 90%); - --system-gray-60-a15: fadeout(@surface0, 85%); - --system-gray-60-a20: fadeout(@surface0, 80%); - --system-gray-60-a25: fadeout(@surface0, 75%); - --system-gray-60-a30: fadeout(@surface0, 70%); - --system-gray-60-a35: fadeout(@surface0, 65%); - --system-gray-60-a40: fadeout(@surface0, 60%); - --system-gray-60-a45: fadeout(@surface0, 55%); - - --system-orange-10: @peach; - --system-orange-20: @peach; - --system-orange-30: @peach; - --system-orange-40: @peach; - --system-orange-50: @peach; - --system-orange-60: @peach; - --system-orange-70: @peach; - --system-orange-80: @peach; - --system-orange-90: @peach; - --system-orange-100: @peach; - --system-orange-60-a10: fadeout(@peach, 90%); - --system-orange-60-a15: fadeout(@peach, 85%); - --system-orange-60-a20: fadeout(@peach, 80%); - --system-orange-60-a25: fadeout(@peach, 75%); - --system-orange-60-a30: fadeout(@peach, 70%); - --system-orange-60-a35: fadeout(@peach, 65%); - - /* quality of life changes */ - --color-border-low-emphasis: @surface0; - - /* Codeblock fixes */ - pre { - --color-text-on-dark: @text; - --color-background-container-dark-tint: @crust; - } - - /* more accent */ - --voyager-color-background-badge-notification: @accent-color; - --color-signal-positive: @accent-color; - --color-checked: @accent-color; - --color-checked-hover: @accent-color; - --color-checked-active: @accent-color; - - /* fix for hover buttons */ - --artdeco-button-secondary-default-hover-background-color: fadeout( - @blue, - 80% - ); - - /* text on dark */ - --color-text-on-dark: @text; - - & when not (@lookup =latte) { - --color-element: @crust; - } - - & when (@lookup =latte) { - --black: @text; - --black-a90: @text; - --black-a75: @text; - --black-a45: @text; - --black-a30: @text; - --black-a60: @subtext0; - --black-a15: @text; - --black-a04: @text; - --black-a100: @text; - - --color-scrim: fadeout(@crust, 60%); - --color-icon-on-dark: @text; - - --white: @mantle; - --white-a06: @surface0; - --white-a12: @surface0; - --white-a18: @surface0; - --white-a25: @surface0; - --white-a30: @mantle; - --white-a40: @mantle; - --white-a45: @mantle; - --white-a55: @mantle; - --white-a60: @subtext0; - --white-a70: @mantle; - --white-a75: @mantle; - --white-a85: @mantle; - --white-a90: @mantle; - --white-a100: @mantle; - - --warm-gray-10: @base; - --warm-gray-20: @base; - --warm-gray-30: @base; - --warm-gray-40: @base; - --warm-gray-50: @base; - --warm-gray-60: @base; - --warm-gray-70: @base; - --warm-gray-80: @base; - --warm-gray-90: @base; - --warm-gray-100: @base; - --warm-gray-60-a10: fadeout(@base, 90%); - --warm-gray-60-a15: fadeout(@base, 85%); - --warm-gray-60-a20: fadeout(@base, 80%); - --warm-gray-60-a25: fadeout(@base, 75%); - --warm-gray-60-a30: fadeout(@base, 70%); - --warm-gray-60-a35: fadeout(@base, 65%); - } - - .share-promoted-detour-button-legacy { - background-color: @accent-color !important; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/linkedin/catppuccin.user.less b/styles/linkedin/catppuccin.user.less new file mode 100644 index 0000000000..6bc3c2af3e --- /dev/null +++ b/styles/linkedin/catppuccin.user.less @@ -0,0 +1,543 @@ +/* ==UserStyle== +@name LinkedIn Catppuccin +@namespace github.com/catppuccin/userstyles/styles/linkedin +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/linkedin +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/linkedin/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alinkedin +@description Soothing pastel theme for LinkedIn +@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("www.linkedin.com") { + :root:not(.theme--dark, .theme--mercado-dark) { + #catppuccin(@lightFlavor, @accentColor); + } + :root.theme--dark, + :root.theme--mercado-dark { + #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]; + @surface0: @catppuccin[@@lookup][@surface0]; + @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; + } + } + + --black: @crust; + --black-a90: @crust; + --black-a75: @crust; + --black-a60: fadeout(@crust, 40%); + --black-a45: @crust; + --black-a30: @crust; + --black-a15: @crust; + --black-a12: @crust; + --black-a08: @crust; + --black-a04: @crust; + --black-a100: @crust; + + --white: @text; + --white-a06: @surface0; + --white-a12: @surface0; + --white-a18: @surface0; + --white-a25: @surface0; + --white-a30: @text; + --white-a40: @text; + --white-a45: @text; + --white-a55: @text; + --white-a60: @subtext0; + --white-a70: @text; + --white-a75: @text; + --white-a85: @text; + --white-a90: @text; + --white-a100: @text; + + --blue-10: @blue; + --blue-20: @blue; + --blue-30: @blue; + --blue-40: @blue; + --blue-50: @blue; + --blue-60: @blue; + --blue-70: @blue; + --blue-80: @blue; + --blue-90: @blue; + --blue-100: @blue; + --blue-50-a20: fadeout(@blue, 80%); + --blue-50-a25: fadeout(@blue, 75%); + --blue-50-a30: fadeout(@blue, 70%); + --blue-50-a40: fadeout(@blue, 60%); + --blue-60-a10: fadeout(@blue, 90%); + --blue-60-a15: fadeout(@blue, 15%); + --blue-60-a20: fadeout(@blue, 80%); + --blue-60-a25: fadeout(@blue, 75%); + --blue-60-a30: fadeout(@blue, 70%); + --blue-60-a35: fadeout(@blue, 65%); + --blue-60-a40: fadeout(@blue, 60%); + --blue-60-a45: fadeout(@blue, 55%); + --blue-70-a30: fadeout(@sapphire, 70%); + --blue-70-a40: fadeout(@sapphire, 60%); + --blue-70-a50: fadeout(@sapphire, 50%); + + --cool-gray-10: @mantle; + --cool-gray-20: @surface0; + --cool-gray-30: @mantle; + --cool-gray-40: @mantle; + --cool-gray-50: @mantle; + --cool-gray-60: @mantle; + --cool-gray-70: @mantle; + --cool-gray-80: @surface0; + --cool-gray-85: @mantle; + --cool-gray-90: @mantle; + --cool-gray-100: @mantle; + --cool-gray-60-a10: fadeout(@mantle, 90%); + --cool-gray-60-a15: fadeout(@mantle, 85%); + --cool-gray-60-a20: fadeout(@mantle, 80%); + --cool-gray-60-a25: fadeout(@mantle, 75%); + --cool-gray-60-a30: fadeout(@mantle, 70%); + --cool-gray-60-a35: fadeout(@mantle, 65%); + + --warm-gray-10: @overlay1; + --warm-gray-20: @overlay1; + --warm-gray-30: @overlay1; + --warm-gray-40: @overlay1; + --warm-gray-50: @overlay1; + --warm-gray-60: @overlay1; + --warm-gray-70: @overlay1; + --warm-gray-80: @overlay1; + --warm-gray-90: @overlay1; + --warm-gray-100: @overlay1; + --warm-gray-60-a10: fadeout(@overlay1, 90%); + --warm-gray-60-a15: fadeout(@overlay1, 85%); + --warm-gray-60-a20: fadeout(@overlay1, 80%); + --warm-gray-60-a25: fadeout(@overlay1, 75%); + --warm-gray-60-a30: fadeout(@overlay1, 70%); + --warm-gray-60-a35: fadeout(@overlay1, 65%); + + --warm-red-10: @maroon; + --warm-red-20: @maroon; + --warm-red-30: @maroon; + --warm-red-40: @maroon; + --warm-red-50: @maroon; + --warm-red-60: @maroon; + --warm-red-70: @maroon; + --warm-red-80: @maroon; + --warm-red-90: @maroon; + --warm-red-100: @maroon; + --warm-red-60-a10: fadeout(@maroon, 90%); + --warm-red-60-a15: fadeout(@maroon, 85%); + --warm-red-60-a20: fadeout(@maroon, 80%); + --warm-red-60-a25: fadeout(@maroon, 75%); + --warm-red-60-a30: fadeout(@maroon, 70%); + --warm-red-60-a35: fadeout(@maroon, 65%); + + --teal-10: @teal; + --teal-20: @teal; + --teal-30: @teal; + --teal-40: @teal; + --teal-50: @teal; + --teal-60: @teal; + --teal-70: @teal; + --teal-80: @teal; + --teal-90: @teal; + --teal-100: @teal; + --teal-50-a30: fadein(@teal, 70%); + --teal-60-a10: fadeout(@teal, 90%); + --teal-60-a15: fadeout(@teal, 85%); + --teal-60-a20: fadeout(@teal, 80%); + --teal-60-a25: fadeout(@teal, 75%); + --teal-60-a30: fadeout(@teal, 70%); + --teal-60-a35: fadeout(@teal, 65%); + + --purple-10: @lavender; + --purple-20: @lavender; + --purple-30: @lavender; + --purple-40: @lavender; + --purple-50: @lavender; + --purple-60: @lavender; + --purple-70: @lavender; + --purple-80: @lavender; + --purple-90: @lavender; + --purple-100: @lavender; + --purple-40-a15: fadeout(@lavender, 85%); + --purple-60-a10: fadeout(@lavender, 90%); + --purple-60-a15: fadeout(@lavender, 85%); + --purple-60-a20: fadeout(@lavender, 80%); + --purple-60-a25: fadeout(@lavender, 75%); + --purple-60-a30: fadeout(@lavender, 70%); + --purple-60-a35: fadeout(@lavender, 65%); + --purple-70-a15: fadeout(@lavender, 85%); + + --system-red-10: @red; + --system-red-20: @red; + --system-red-30: @red; + --system-red-40: @red; + --system-red-50: @red; + --system-red-60: @red; + --system-red-70: @red; + --system-red-80: @red; + --system-red-90: @red; + --system-red-100: @red; + --system-red-60-a10: fadeout(@red, 90%); + --system-red-60-a15: fadeout(@red, 85%); + --system-red-60-a20: fadeout(@red, 80%); + --system-red-60-a25: fadeout(@red, 75%); + --system-red-60-a30: fadeout(@red, 70%); + --system-red-60-a35: fadeout(@red, 65%); + + --system-green-10: darken(@green, 20%); + --system-green-20: darken(@green, 20%); + --system-green-30: darken(@green, 20%); + --system-green-40: darken(@green, 20%); + --system-green-50: darken(@green, 20%); + --system-green-60: darken(@green, 20%); + --system-green-70: darken(@green, 20%); + --system-green-80: darken(@green, 20%); + --system-green-90: darken(@green, 20%); + --system-green-100: darken(@green, 20%); + --system-green-60-a10: fadeout(darken(@green, 20), 90%); + --system-green-60-a15: fadeout(darken(@green, 20), 85%); + --system-green-60-a20: fadeout(darken(@green, 20), 80%); + --system-green-60-a25: fadeout(darken(@green, 20), 75%); + --system-green-60-a30: fadeout(darken(@green, 20), 70%); + --system-green-60-a35: fadeout(darken(@green, 20), 65%); + + --pink-10: @pink; + --pink-20: @pink; + --pink-30: @pink; + --pink-40: @pink; + --pink-50: @pink; + --pink-60: @pink; + --pink-70: @pink; + --pink-80: @pink; + --pink-90: @pink; + --pink-100: @pink; + --pink-60-a10: fadeout(@pink, 90%); + --pink-60-a15: fadeout(@pink, 85%); + --pink-60-a20: fadeout(@pink, 80%); + --pink-60-a25: fadeout(@pink, 75%); + --pink-60-a30: fadeout(@pink, 70%); + --pink-60-a35: fadeout(@pink, 65%); + + --amber-10: @yellow; + --amber-20: @yellow; + --amber-30: @yellow; + --amber-40: @yellow; + --amber-50: @yellow; + --amber-60: @yellow; + --amber-70: @yellow; + --amber-80: @yellow; + --amber-90: @yellow; + --amber-100: @yellow; + --amber-30-a50: fadein(@yellow, 50%); + --amber-60-a10: fadeout(@yellow, 90%); + --amber-60-a15: fadeout(@yellow, 85%); + --amber-60-a20: fadeout(@yellow, 80%); + --amber-60-a25: fadeout(@yellow, 75%); + --amber-60-a30: fadeout(@yellow, 70%); + --amber-60-a35: fadeout(@yellow, 65%); + + --copper-10: @rosewater; + --copper-20: @rosewater; + --copper-30: @rosewater; + --copper-40: @rosewater; + --copper-50: @rosewater; + --copper-60: @rosewater; + --copper-70: @rosewater; + --copper-80: @rosewater; + --copper-90: @rosewater; + --copper-100: @rosewater; + --copper-60-a10: fadeout(@rosewater, 90%); + --copper-60-a15: fadeout(@rosewater, 85%); + --copper-60-a20: fadeout(@rosewater, 80%); + --copper-60-a25: fadeout(@rosewater, 75%); + --copper-60-a30: fadeout(@rosewater, 70%); + --copper-60-a35: fadeout(@rosewater, 65%); + + --green-10: @green; + --green-20: @green; + --green-30: @green; + --green-40: @green; + --green-50: @green; + --green-60: @green; + --green-70: @green; + --green-80: @green; + --green-90: @green; + --green-100: @green; + --green-60-a10: fadeout(@green, 90%); + --green-60-a15: fadeout(@green, 85%); + --green-60-a20: fadeout(@green, 80%); + --green-60-a25: fadeout(@green, 75%); + --green-60-a30: fadeout(@green, 70%); + --green-60-a35: fadeout(@green, 65%); + + --sage-10: darken(@green, 40%); + --sage-20: darken(@green, 40%); + --sage-30: darken(@green, 40%); + --sage-40: darken(@green, 40%); + --sage-50: darken(@green, 40%); + --sage-60: darken(@green, 40%); + --sage-70: darken(@green, 40%); + --sage-80: darken(@green, 40%); + --sage-90: darken(@green, 40%); + --sage-100: darken(@green, 40%); + --sage-60-a10: fadeout(darken(@green, 40), 90%); + --sage-60-a15: fadeout(darken(@green, 40), 85%); + --sage-60-a20: fadeout(darken(@green, 40), 80%); + --sage-60-a25: fadeout(darken(@green, 40), 75%); + --sage-60-a30: fadeout(darken(@green, 40), 70%); + --sage-60-a35: fadeout(darken(@green, 40), 65%); + + --lime-10: lighten(@green, 20%); + --lime-20: lighten(@green, 20%); + --lime-30: lighten(@green, 20%); + --lime-40: lighten(@green, 20%); + --lime-50: lighten(@green, 20%); + --lime-60: lighten(@green, 20%); + --lime-70: lighten(@green, 20%); + --lime-80: lighten(@green, 20%); + --lime-90: lighten(@green, 20%); + --lime-100: lighten(@green, 20%); + --lime-60-a10: fadeout(lighten(@green, 20), 90%); + --lime-60-a15: fadeout(lighten(@green, 20), 85%); + --lime-60-a20: fadeout(lighten(@green, 20), 80%); + --lime-60-a25: fadeout(lighten(@green, 20), 75%); + --lime-60-a30: fadeout(lighten(@green, 20), 70%); + --lime-60-a35: fadeout(lighten(@green, 20), 65%); + + --camo-10: @accent-color; + --camo-20: @accent-color; + --camo-30: @accent-color; + --camo-40: @accent-color; + --camo-50: @accent-color; + --camo-60: @accent-color; + --camo-70: @accent-color; + --camo-80: @accent-color; + --camo-90: @accent-color; + --camo-100: @accent-color; + --camo-60-a10: fadeout(@accent-color, 90%); + --camo-60-a15: fadeout(@accent-color, 85%); + --camo-60-a20: fadeout(@accent-color, 80%); + --camo-60-a25: fadeout(@accent-color, 75%); + --camo-60-a30: fadeout(@accent-color, 70%); + --camo-60-a35: fadeout(@accent-color, 65%); + + --smoke-10: @surface1; + --smoke-20: @surface1; + --smoke-30: @surface1; + --smoke-40: @surface1; + --smoke-50: @surface1; + --smoke-60: @surface1; + --smoke-70: @surface1; + --smoke-80: @surface1; + --smoke-90: @surface1; + --smoke-100: @surface1; + --smoke-60-a10: fadeout(@surface1, 90%); + --smoke-60-a15: fadeout(@surface1, 85%); + --smoke-60-a20: fadeout(@surface1, 80%); + --smoke-60-a25: fadeout(@surface1, 75%); + --smoke-60-a30: fadeout(@surface1, 70%); + --smoke-60-a35: fadeout(@surface1, 65%); + + --lavender-10: @lavender; + --lavender-20: @lavender; + --lavender-30: @lavender; + --lavender-40: @lavender; + --lavender-50: @lavender; + --lavender-60: @lavender; + --lavender-70: @lavender; + --lavender-80: @lavender; + --lavender-90: @lavender; + --lavender-100: @lavender; + --lavender-60-a10: fadeout(@lavender, 90%); + --lavender-60-a15: fadeout(@lavender, 85%); + --lavender-60-a20: fadeout(@lavender, 80%); + --lavender-60-a25: fadeout(@lavender, 75%); + --lavender-60-a30: fadeout(@lavender, 70%); + --lavender-60-a35: fadeout(@lavender, 65%); + + --mauve-10: @mauve; + --mauve-20: @mauve; + --mauve-30: @mauve; + --mauve-40: @mauve; + --mauve-50: @mauve; + --mauve-60: @mauve; + --mauve-70: @mauve; + --mauve-80: @mauve; + --mauve-90: @mauve; + --mauve-100: @mauve; + --mauve-60-a10: fadeout(@mauve, 90%); + --mauve-60-a15: fadeout(@mauve, 85%); + --mauve-60-a20: fadeout(@mauve, 80%); + --mauve-60-a25: fadeout(@mauve, 75%); + --mauve-60-a30: fadeout(@mauve, 70%); + --mauve-60-a35: fadeout(@mauve, 65%); + --mauve-80-a50: fadeout(@mauve, 50%); + + --system-gray-10: @surface0; + --system-gray-20: @surface0; + --system-gray-30: @surface0; + --system-gray-40: @surface0; + --system-gray-50: @surface0; + --system-gray-60: @surface0; + --system-gray-70: @surface0; + --system-gray-80: @surface0; + --system-gray-90: @surface0; + --system-gray-100: @surface0; + --system-gray-60-a10: fadeout(@surface0, 90%); + --system-gray-60-a15: fadeout(@surface0, 85%); + --system-gray-60-a20: fadeout(@surface0, 80%); + --system-gray-60-a25: fadeout(@surface0, 75%); + --system-gray-60-a30: fadeout(@surface0, 70%); + --system-gray-60-a35: fadeout(@surface0, 65%); + --system-gray-60-a40: fadeout(@surface0, 60%); + --system-gray-60-a45: fadeout(@surface0, 55%); + + --system-orange-10: @peach; + --system-orange-20: @peach; + --system-orange-30: @peach; + --system-orange-40: @peach; + --system-orange-50: @peach; + --system-orange-60: @peach; + --system-orange-70: @peach; + --system-orange-80: @peach; + --system-orange-90: @peach; + --system-orange-100: @peach; + --system-orange-60-a10: fadeout(@peach, 90%); + --system-orange-60-a15: fadeout(@peach, 85%); + --system-orange-60-a20: fadeout(@peach, 80%); + --system-orange-60-a25: fadeout(@peach, 75%); + --system-orange-60-a30: fadeout(@peach, 70%); + --system-orange-60-a35: fadeout(@peach, 65%); + + /* quality of life changes */ + --color-border-low-emphasis: @surface0; + + /* Codeblock fixes */ + pre { + --color-text-on-dark: @text; + --color-background-container-dark-tint: @crust; + } + + /* more accent */ + --voyager-color-background-badge-notification: @accent-color; + --color-signal-positive: @accent-color; + --color-checked: @accent-color; + --color-checked-hover: @accent-color; + --color-checked-active: @accent-color; + + /* fix for hover buttons */ + --artdeco-button-secondary-default-hover-background-color: fadeout( + @blue, + 80% + ); + + /* text on dark */ + --color-text-on-dark: @text; + + & when not(@lookup = latte) { + --color-element: @crust; + } + + & when (@lookup = latte) { + --black: @text; + --black-a90: @text; + --black-a75: @text; + --black-a45: @text; + --black-a30: @text; + --black-a60: @subtext0; + --black-a15: @text; + --black-a04: @text; + --black-a100: @text; + + --color-scrim: fadeout(@crust, 60%); + --color-icon-on-dark: @text; + + --white: @mantle; + --white-a06: @surface0; + --white-a12: @surface0; + --white-a18: @surface0; + --white-a25: @surface0; + --white-a30: @mantle; + --white-a40: @mantle; + --white-a45: @mantle; + --white-a55: @mantle; + --white-a60: @subtext0; + --white-a70: @mantle; + --white-a75: @mantle; + --white-a85: @mantle; + --white-a90: @mantle; + --white-a100: @mantle; + + --warm-gray-10: @base; + --warm-gray-20: @base; + --warm-gray-30: @base; + --warm-gray-40: @base; + --warm-gray-50: @base; + --warm-gray-60: @base; + --warm-gray-70: @base; + --warm-gray-80: @base; + --warm-gray-90: @base; + --warm-gray-100: @base; + --warm-gray-60-a10: fadeout(@base, 90%); + --warm-gray-60-a15: fadeout(@base, 85%); + --warm-gray-60-a20: fadeout(@base, 80%); + --warm-gray-60-a25: fadeout(@base, 75%); + --warm-gray-60-a30: fadeout(@base, 70%); + --warm-gray-60-a35: fadeout(@base, 65%); + } + + .share-promoted-detour-button-legacy { + background-color: @accent-color !important; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/listenbrainz/catppuccin.user.css b/styles/listenbrainz/catppuccin.user.css index bf21df6da7..c4117b303f 100644 --- a/styles/listenbrainz/catppuccin.user.css +++ b/styles/listenbrainz/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name ListenBrainz Catppuccin +@name ListenBrainz Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/listenbrainz @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/listenbrainz -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/listenbrainz/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/listenbrainz/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alistenbrainz @description Soothing pastel theme for ListenBrainz @author Catppuccin @@ -13,730 +13,4 @@ @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('listenbrainz.org') { - @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; - } - } - - // We can't control which theme is passed to Toastify's props from CSS, but - // we can replace the default theme with whatever colours we want. - --toastify-color-light: @overlay0; - --toastify-text-color-light: @text; - --toastify-color-info: @blue; - --toastify-color-success: @green; - --toastify-color-warning: @yellow; - --toastify-color-error: @red; - - body { - color: @text; - background-color: @base; - - nav[role="navigation"] { - .navbar-header .navbar-toggle { - border-color: @accent-color; - .icon-bar { - background-color: @accent-color; - } - } - - .navbar-logo > img { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - #side-nav { - background-color: @mantle; - a, - a:visited { - color: @blue; - &:hover { - color: @sky; - } - } - - .search-bar input { - background-color: @surface0; - color: @text; - &:focus { - box-shadow: inset 1px 2px 4px @surface1; - ~ button { - box-shadow: inset -3px 2px 4px @surface2; - } - } - ~ button { - background-color: @surface1; - color: @text; - } - } - - .mobile-nav-fix { - background-color: transparent; - } - } - - #side-nav-overlay { - background-color: @crust; - } - } - } - - a { - color: @blue; - &:hover { - color: @sky; - } - &:visited:not(.btn) { - color: @lavender; - &:hover { - color: @sky; - } - } - } - - h2, - h3, - h4 { - color: @text; - } - - .text-muted, - .help-block { - color: @subtext0; - } - - .text-success { - color: @green; - } - - .text-danger { - color: @red; - } - - a > svg.fa-link { - color: @text; - } - - .form-control { - border-color: @base; - background-color: @surface0; - color: @text; - } - - .panel { - background-color: @surface0; - color: @text; - border-color: @surface1; - .panel-heading { - background-color: @surface1; - outline-color: @surface2; - } - } - - .well { - background-color: @surface0; - border-color: @mantle; - } - - .toggle-switch { - background-color: @surface0; - &::before { - background-color: @overlay0; - } - } - .toggle-checkbox:checked + .toggle-switch { - background-color: @surface1; - &::before { - background-color: @accent-color; - } - } - - .table { - tr { - > td, - > th { - border-color: @surface1; - } - } - - &.table-striped > tbody > tr:nth-of-type(2n + 1) { - background-color: @surface0; - } - } - - .music-service-selection .music-service-option { - label { - background-color: @surface1; - border-color: fade(@green, 50%); - } - - input[type="radio"]:checked + label { - background-color: fade(@green, 50%); - &::after { - color: @green; - border-color: @green; - background-color: @surface1; - } - } - } - - .pill.secondary { - color: @text; - border-color: @subtext0; - } - - .btn-primary, - .btn-info, - .btn-outline, - .musicbrainz-profile-button, - .lb-follow-button.block, - .pill.secondary.active { - color: @crust; - background-color: @accent-color; - border-color: transparent; - - &:hover { - color: @crust; - background-color: darken(@accent-color, 5%); - } - } - - .open > .dropdown-toggle.btn-info { - color: @crust; - background-color: darken(@accent-color, 10%); - } - - .secondary-nav > ol.breadcrumb { - background-color: @mantle; - border-color: @crust; - > li.active { - color: @text; - border-color: transparent; - } - } - - .secondary-nav .nav.nav-tabs { - background-color: @mantle; - border-color: @crust; - > li { - background-color: @mantle; - border-color: @crust; - > a { - background-color: transparent; - border-color: @crust; - color: @subtext1; - &.active { - border-bottom-color: transparent; - } - } - &:hover { - background-color: @surface0; - } - - &.active { - background-color: @base; - border-bottom-color: transparent; - } - } - } - - @media (max-width: 991px) { - .secondary-nav::after { - background: linear-gradient(270deg, @crust, transparent); - } - } - - .listen-header h3 { - color: @subtext0; - &::after { - border-top-color: @surface1; - } - } - - .webSocket-box { - border-bottom-color: @mantle; - .read-more { - background-image: linear-gradient(to bottom, transparent, @base); - } - } - - .heart-actions() { - .love { - stroke: @text; - &.loved { - color: @red; - stroke: transparent; - } - &:hover { - color: transparent; - stroke: @red; - } - } - - .hate { - stroke: @text; - &.hated { - color: @mauve; - stroke: transparent; - } - &:hover { - color: transparent; - stroke: @mauve; - } - } - } - - .card { - background-color: @surface0; - border-color: transparent; - box-shadow: - fade(@surface0, 10%) 0 1px 1px, - fade(@surface0, 15%) 0 2px 2px, - fade(@surface0, 20%) 0 4px 4px; - - &#listen-count-card { - margin-bottom: 5px; - border-color: @surface1; - } - - &.listen-card { - .listen-thumbnail > div { - color: @accent-color; - background-color: @surface1; - border-top-left-radius: 7px; - border-bottom-left-radius: 7px; - } - - .listen-time { - color: @subtext0; - } - .listen-controls { - .btn.dropdown-toggle, - .btn.play-button, - .btn-transparent[title="Reset"] { - color: @text; - &:hover, - &.playing { - color: @accent-color; - } - } - - .heart-actions(); - } - - &.playing-now, - &.current-listen { - background-color: @surface1 !important; - - .listen-thumbnail > div { - background-color: @surface2; - height: 100%; - } - } - } - } - - hr, - #listen-count-card hr, - .card-user-sn hr { - border-top-color: @surface1; - } - - .follower-following-list, - .similar-users-list { - box-shadow: inset 0 11px 8px -10px @base; - > :not(:first-child) { - border-color: @surface1; - } - } - - .progress { - background-color: @surface1; - - .progress-bar.purple { - background-color: @mauve; - } - - .progress-bar.orange { - background-color: @peach; - } - - .progress-bar.red { - background-color: @red; - } - } - - .dropdown-menu { - background-color: @overlay0; - button, - a { - color: @text !important; - &:visited { - color: @text !important; - } - &:hover { - background-color: fade(@accent-color, 30%) !important; - } - } - } - - .pager li { - > a, - > a:focus, - > a:visited, - a:active, - > span { - background-color: @surface0; - border-color: @surface1; - - &:hover { - background-color: @surface1; - } - } - - > a, - > a:focus, - > a:visited, - > a:active { - color: @blue; - &:hover { - color: @sky; - } - } - - &.disabled { - > a, - > a:focus, - > a:visited, - > a:active, - > span { - color: @text; - background-color: @surface0; - &:hover { - background-color: inherit; - } - } - } - } - - .react-datetime-picker { - .react-datetime-picker__wrapper { - border-color: @mantle; - } - .react-calendar { - background-color: @surface0; - border-color: @surface1; - - .react-calendar__navigation, - .react-calendar__viewContainer { - button:disabled { - background-color: @surface2; - } - button:enabled:hover { - background-color: @surface1; - } - button:enabled:focus { - background-color: transparent; - } - - .react-calendar__tile--now { - background-color: @peach; - color: @crust; - &:enabled:hover { - background-color: @yellow; - } - } - - .react-calendar__tile--hasActive, - .react-calendar__tile--active { - color: @text; - background-color: fade(@accent-color, 40%); - &:enabled:hover { - background-color: fade(@accent-color, 50%); - } - } - } - - .react-calendar__month-view__days__day--neighboringMonth { - color: @subtext0; - } - - .react-calendar__month-view__days__day--weekend { - color: @red; - } - } - } - - .stats-full-width-graph { - line { - stroke: @subtext0 !important; - } - - text { - fill: @text !important; - } - - &.user-artist-map > div + div > div, - svg + div > div { - background-color: @overlay0 !important; - color: @text !important; - } - } - rect[fill="#353070"] { - fill: @mauve; - } - rect[fill="#eb743b"] { - fill: @peach; - } - .badge-info { - background-color: @surface1; - color: @text; - } - - .modal-content { - background-color: @mantle; - button.close { - color: @text; - opacity: 1; - text-shadow: none; - } - - .track-search { - #recording-mbid, - .track-search-dropdown { - background-color: @surface0; - color: @text; - border-color: @crust; - } - } - - .modal-header, - .modal-footer { - border-color: @crust; - } - } - - .explore-card { - background-color: @surface0; - filter: drop-shadow(0 4px 4px fade(@overlay0, 25%)); - .explore-card-img { - border-color: @surface0; - } - .explore-card-text { - background-color: @surface0; - } - } - - .sidebar { - background-color: @mantle; - .sidebar-header { - background-color: @crust; - color: @text; - } - .sidenav-content-grid { - background: transparent; - } - } - .rc-slider-rail { - background-color: @surface1; - } - .rc-slider-handle { - background-color: @accent-color; - &.rc-slider-handle-dragging { - background-color: @accent-color; - border-color: @accent-color; - } - } - .rc-slider-mark-text { - color: @subtext0; - } - .release-card-grid-title { - background-color: transparent; - &::before, - &::after { - border-color: @surface0; - } - } - - #homepage-container { - @homepage-bg: linear-gradient(288deg, @peach 16.96%, @mauve 98.91%); - @flipped-blue: if( - @lookup = latte, - @catppuccin[@mocha][@blue], - @catppuccin[@latte][@blue] - ); - @flipped-sky: if( - @lookup = latte, - @catppuccin[@mocha][@sky], - @catppuccin[@latte][@sky] - ); - - .homepage-upper { - background: @homepage-bg; - - h1 { - color: @crust; - } - .homepage-info { - h1 { - color: @text; - } - - .homepage-info-links > a { - color: @blue; - &:hover { - color: @sky; - } - } - } - - .homepage-upper-grey-box { - background-color: @base; - } - } - - .homepage-lower { - background: @homepage-bg; - h1 { - color: @text; - } - - .homepage-info { - color: @crust; - h1 { - color: @crust; - } - - .homepage-info-links > a { - color: @flipped-blue; - &:hover { - color: @flipped-sky; - } - } - } - - .homepage-lower-grey-box { - background-color: @base; - } - } - - .homepage-info { - color: @text; - .create-account-button { - background-color: @accent-color; - color: @crust; - &:hover { - background-color: darken(@accent-color, 5%); - } - } - } - } - - #brainz-player { - background-color: @mantle; - border-color: @crust; - - .progress { - background-color: @surface1; - > .progress-bar { - background-color: @accent-color; - } - } - - .no-album-art { - background-color: transparent; - } - - .controls > .btn-link, - .actions > a { - color: @accent-color; - } - - .actions { - .heart-actions(); - - .fa-ellipsis-vertical { - stroke: @accent-color; - } - } - - .dropup-content { - .dropdown-menu(); - } - } - - .footer { - background-color: @mantle; - color: @text; - border-color: @crust; - .color-gray { - color: @subtext0; - } - .section-line { - border-color: @crust; - } - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/listenbrainz/catppuccin.user.less b/styles/listenbrainz/catppuccin.user.less new file mode 100644 index 0000000000..eafa9b23db --- /dev/null +++ b/styles/listenbrainz/catppuccin.user.less @@ -0,0 +1,740 @@ +/* ==UserStyle== +@name ListenBrainz Catppuccin +@namespace github.com/catppuccin/userstyles/styles/listenbrainz +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/listenbrainz +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/listenbrainz/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alistenbrainz +@description Soothing pastel theme for ListenBrainz +@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("listenbrainz.org") { + @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; + } + } + + // We can't control which theme is passed to Toastify's props from CSS, but + // we can replace the default theme with whatever colours we want. + --toastify-color-light: @overlay0; + --toastify-text-color-light: @text; + --toastify-color-info: @blue; + --toastify-color-success: @green; + --toastify-color-warning: @yellow; + --toastify-color-error: @red; + + body { + color: @text; + background-color: @base; + + nav[role="navigation"] { + .navbar-header .navbar-toggle { + border-color: @accent-color; + .icon-bar { + background-color: @accent-color; + } + } + + .navbar-logo > img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + #side-nav { + background-color: @mantle; + a, + a:visited { + color: @blue; + &:hover { + color: @sky; + } + } + + .search-bar input { + background-color: @surface0; + color: @text; + &:focus { + box-shadow: inset 1px 2px 4px @surface1; + ~ button { + box-shadow: inset -3px 2px 4px @surface2; + } + } + ~ button { + background-color: @surface1; + color: @text; + } + } + + .mobile-nav-fix { + background-color: transparent; + } + } + + #side-nav-overlay { + background-color: @crust; + } + } + } + + a { + color: @blue; + &:hover { + color: @sky; + } + &:visited:not(.btn) { + color: @lavender; + &:hover { + color: @sky; + } + } + } + + h2, + h3, + h4 { + color: @text; + } + + .text-muted, + .help-block { + color: @subtext0; + } + + .text-success { + color: @green; + } + + .text-danger { + color: @red; + } + + a > svg.fa-link { + color: @text; + } + + .form-control { + border-color: @base; + background-color: @surface0; + color: @text; + } + + .panel { + background-color: @surface0; + color: @text; + border-color: @surface1; + .panel-heading { + background-color: @surface1; + outline-color: @surface2; + } + } + + .well { + background-color: @surface0; + border-color: @mantle; + } + + .toggle-switch { + background-color: @surface0; + &::before { + background-color: @overlay0; + } + } + .toggle-checkbox:checked + .toggle-switch { + background-color: @surface1; + &::before { + background-color: @accent-color; + } + } + + .table { + tr { + > td, + > th { + border-color: @surface1; + } + } + + &.table-striped > tbody > tr:nth-of-type(2n+1) { + background-color: @surface0; + } + } + + .music-service-selection .music-service-option { + label { + background-color: @surface1; + border-color: fade(@green, 50%); + } + + input[type="radio"]:checked + label { + background-color: fade(@green, 50%); + &::after { + color: @green; + border-color: @green; + background-color: @surface1; + } + } + } + + .pill.secondary { + color: @text; + border-color: @subtext0; + } + + .btn-primary, + .btn-info, + .btn-outline, + .musicbrainz-profile-button, + .lb-follow-button.block, + .pill.secondary.active { + color: @crust; + background-color: @accent-color; + border-color: transparent; + + &:hover { + color: @crust; + background-color: darken(@accent-color, 5%); + } + } + + .open > .dropdown-toggle.btn-info { + color: @crust; + background-color: darken(@accent-color, 10%); + } + + .secondary-nav > ol.breadcrumb { + background-color: @mantle; + border-color: @crust; + > li.active { + color: @text; + border-color: transparent; + } + } + + .secondary-nav .nav.nav-tabs { + background-color: @mantle; + border-color: @crust; + > li { + background-color: @mantle; + border-color: @crust; + > a { + background-color: transparent; + border-color: @crust; + color: @subtext1; + &.active { + border-bottom-color: transparent; + } + } + &:hover { + background-color: @surface0; + } + + &.active { + background-color: @base; + border-bottom-color: transparent; + } + } + } + + @media (max-width: 991px) { + .secondary-nav::after { + background: linear-gradient(270deg, @crust, transparent); + } + } + + .listen-header h3 { + color: @subtext0; + &::after { + border-top-color: @surface1; + } + } + + .webSocket-box { + border-bottom-color: @mantle; + .read-more { + background-image: linear-gradient(to bottom, transparent, @base); + } + } + + .heart-actions() { + .love { + stroke: @text; + &.loved { + color: @red; + stroke: transparent; + } + &:hover { + color: transparent; + stroke: @red; + } + } + + .hate { + stroke: @text; + &.hated { + color: @mauve; + stroke: transparent; + } + &:hover { + color: transparent; + stroke: @mauve; + } + } + } + + .card { + background-color: @surface0; + border-color: transparent; + box-shadow: + fade(@surface0, 10%) 0 1px 1px, + fade(@surface0, 15%) 0 2px 2px, + fade(@surface0, 20%) 0 4px 4px; + + &#listen-count-card { + margin-bottom: 5px; + border-color: @surface1; + } + + &.listen-card { + .listen-thumbnail > div { + color: @accent-color; + background-color: @surface1; + border-top-left-radius: 7px; + border-bottom-left-radius: 7px; + } + + .listen-time { + color: @subtext0; + } + .listen-controls { + .btn.dropdown-toggle, + .btn.play-button, + .btn-transparent[title="Reset"] { + color: @text; + &:hover, + &.playing { + color: @accent-color; + } + } + + .heart-actions(); + } + + &.playing-now, + &.current-listen { + background-color: @surface1 !important; + + .listen-thumbnail > div { + background-color: @surface2; + height: 100%; + } + } + } + } + + hr, + #listen-count-card hr, + .card-user-sn hr { + border-top-color: @surface1; + } + + .follower-following-list, + .similar-users-list { + box-shadow: inset 0 11px 8px -10px @base; + > :not(:first-child) { + border-color: @surface1; + } + } + + .progress { + background-color: @surface1; + + .progress-bar.purple { + background-color: @mauve; + } + + .progress-bar.orange { + background-color: @peach; + } + + .progress-bar.red { + background-color: @red; + } + } + + .dropdown-menu { + background-color: @overlay0; + button, + a { + color: @text !important; + &:visited { + color: @text !important; + } + &:hover { + background-color: fade(@accent-color, 30%) !important; + } + } + } + + .pager li { + > a, + > a:focus, + > a:visited, + a:active, + > span { + background-color: @surface0; + border-color: @surface1; + + &:hover { + background-color: @surface1; + } + } + + > a, + > a:focus, + > a:visited, + > a:active { + color: @blue; + &:hover { + color: @sky; + } + } + + &.disabled { + > a, + > a:focus, + > a:visited, + > a:active, + > span { + color: @text; + background-color: @surface0; + &:hover { + background-color: inherit; + } + } + } + } + + .react-datetime-picker { + .react-datetime-picker__wrapper { + border-color: @mantle; + } + .react-calendar { + background-color: @surface0; + border-color: @surface1; + + .react-calendar__navigation, + .react-calendar__viewContainer { + button:disabled { + background-color: @surface2; + } + button:enabled:hover { + background-color: @surface1; + } + button:enabled:focus { + background-color: transparent; + } + + .react-calendar__tile--now { + background-color: @peach; + color: @crust; + &:enabled:hover { + background-color: @yellow; + } + } + + .react-calendar__tile--hasActive, + .react-calendar__tile--active { + color: @text; + background-color: fade(@accent-color, 40%); + &:enabled:hover { + background-color: fade(@accent-color, 50%); + } + } + } + + .react-calendar__month-view__days__day--neighboringMonth { + color: @subtext0; + } + + .react-calendar__month-view__days__day--weekend { + color: @red; + } + } + } + + .stats-full-width-graph { + line { + stroke: @subtext0 !important; + } + + text { + fill: @text !important; + } + + &.user-artist-map > div + div > div, + svg + div > div { + background-color: @overlay0 !important; + color: @text !important; + } + } + rect[fill="#353070"] { + fill: @mauve; + } + rect[fill="#eb743b"] { + fill: @peach; + } + .badge-info { + background-color: @surface1; + color: @text; + } + + .modal-content { + background-color: @mantle; + button.close { + color: @text; + opacity: 1; + text-shadow: none; + } + + .track-search { + #recording-mbid, + .track-search-dropdown { + background-color: @surface0; + color: @text; + border-color: @crust; + } + } + + .modal-header, + .modal-footer { + border-color: @crust; + } + } + + .explore-card { + background-color: @surface0; + filter: drop-shadow(0 4px 4px fade(@overlay0, 25%)); + .explore-card-img { + border-color: @surface0; + } + .explore-card-text { + background-color: @surface0; + } + } + + .sidebar { + background-color: @mantle; + .sidebar-header { + background-color: @crust; + color: @text; + } + .sidenav-content-grid { + background: transparent; + } + } + .rc-slider-rail { + background-color: @surface1; + } + .rc-slider-handle { + background-color: @accent-color; + &.rc-slider-handle-dragging { + background-color: @accent-color; + border-color: @accent-color; + } + } + .rc-slider-mark-text { + color: @subtext0; + } + .release-card-grid-title { + background-color: transparent; + &::before, + &::after { + border-color: @surface0; + } + } + + #homepage-container { + @homepage-bg: linear-gradient(288deg, @peach 16.96%, @mauve 98.91%); + @flipped-blue: if( + @lookup = latte, + @catppuccin[@mocha][@blue], + @catppuccin[@latte][@blue] + ); + @flipped-sky: if( + @lookup = latte, + @catppuccin[@mocha][@sky], + @catppuccin[@latte][@sky] + ); + + .homepage-upper { + background: @homepage-bg; + + h1 { + color: @crust; + } + .homepage-info { + h1 { + color: @text; + } + + .homepage-info-links > a { + color: @blue; + &:hover { + color: @sky; + } + } + } + + .homepage-upper-grey-box { + background-color: @base; + } + } + + .homepage-lower { + background: @homepage-bg; + h1 { + color: @text; + } + + .homepage-info { + color: @crust; + h1 { + color: @crust; + } + + .homepage-info-links > a { + color: @flipped-blue; + &:hover { + color: @flipped-sky; + } + } + } + + .homepage-lower-grey-box { + background-color: @base; + } + } + + .homepage-info { + color: @text; + .create-account-button { + background-color: @accent-color; + color: @crust; + &:hover { + background-color: darken(@accent-color, 5%); + } + } + } + } + + #brainz-player { + background-color: @mantle; + border-color: @crust; + + .progress { + background-color: @surface1; + > .progress-bar { + background-color: @accent-color; + } + } + + .no-album-art { + background-color: transparent; + } + + .controls > .btn-link, + .actions > a { + color: @accent-color; + } + + .actions { + .heart-actions(); + + .fa-ellipsis-vertical { + stroke: @accent-color; + } + } + + .dropup-content { + .dropdown-menu(); + } + } + + .footer { + background-color: @mantle; + color: @text; + border-color: @crust; + .color-gray { + color: @subtext0; + } + .section-line { + border-color: @crust; + } + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/lobste.rs/catppuccin.user.css b/styles/lobste.rs/catppuccin.user.css index c6d8d3d2e7..ba26522ed4 100644 --- a/styles/lobste.rs/catppuccin.user.css +++ b/styles/lobste.rs/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Lobsters Catppuccin +@name Lobsters Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/lobste.rs @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lobste.rs -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lobste.rs/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lobste.rs/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alobste.rs @description Soothing pastel theme for Lobsters @author Catppuccin @@ -13,149 +13,4 @@ @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('lobste.rs') { - @media (prefers-color-scheme: dark) { - html.color-scheme-system { - #catppuccin(@darkFlavor, @accentColor); - } - } - @media (prefers-color-scheme: light) { - html.color-scheme-system { - #catppuccin(@lightFlavor, @accentColor); - } - } - - html.color-scheme-light { - #catppuccin(@lightFlavor, @accentColor); - } - - html.color-scheme-dark { - #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; - } - } - - background-color: @base; - - --palette-bg: @base; - --palette-fg: @text; - - --color-fg: @text; - --color-fg-shape: @surface2; - - --color-tag-bg: fade(@yellow, 20%); - --color-tag-border: fade(@yellow, 20%); - - --color-lobsters-tag-special-bg: fade(@red, 30%); - --color-lobsters-tag-special-border: fade(@red, 30%); - - --color-tag-media-bg: fade(@blue, 20%); - --color-tag-media-border: fade(@blue, 30%); - - --color-tag-meta-bg: @surface0; - --color-tag-meta-border: @surface2; - - --color-bg-target: fade(@accent-color, 20%); - - --color-fg-affirmative: @green; - --color-fg-accent: @accent-color; - --color-fg-author: @blue; - - --color-fg-contrast-7-5: @blue; - --color-fg-contrast-4-5: @subtext0; - --color-fg-contrast-6: @subtext1; - - --color-fg-link: @blue; - --color-fg-link-visited: @lavender; - - --color-fg-contrast-10: @text; - - --color-box-bg: @mantle; - --color-button-bg: @mantle; - --color-button-bg-shaded: @surface0; - --color-box-border: @surface0; - --color-box-border-focus: @accent-color; - --color-box-bg-shaded: @mantle; - - --color-mobile-story-liner-bg: @base; - --color-mobile-story-comments-bubble-fill: @surface1; - - --color-mobile-story-comments-bubble-fill-zero: @surface0; - - --color-table-header-bg: @surface0; - --color-table-header-border: @surface1; - --color-table-row-bg-even: @mantle; - --color-table-row-bg-odd: @crust; - --color-table-row-border: @base; - - --color-flash-bg-success: fade(@green, 30%); - --color-fg-negative: @red; - - hr { - color: @surface2; - } - - #logo { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - background-color: transparent !important; - &::after { - background: none; - } - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/lobste.rs/catppuccin.user.less b/styles/lobste.rs/catppuccin.user.less new file mode 100644 index 0000000000..4fc3e89d1b --- /dev/null +++ b/styles/lobste.rs/catppuccin.user.less @@ -0,0 +1,159 @@ +/* ==UserStyle== +@name Lobsters Catppuccin +@namespace github.com/catppuccin/userstyles/styles/lobste.rs +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lobste.rs +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lobste.rs/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alobste.rs +@description Soothing pastel theme for Lobsters +@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("lobste.rs") { + @media (prefers-color-scheme: dark) { + html.color-scheme-system { + #catppuccin(@darkFlavor, @accentColor); + } + } + @media (prefers-color-scheme: light) { + html.color-scheme-system { + #catppuccin(@lightFlavor, @accentColor); + } + } + + html.color-scheme-light { + #catppuccin(@lightFlavor, @accentColor); + } + + html.color-scheme-dark { + #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; + } + } + + background-color: @base; + + --palette-bg: @base; + --palette-fg: @text; + + --color-fg: @text; + --color-fg-shape: @surface2; + + --color-tag-bg: fade(@yellow, 20%); + --color-tag-border: fade(@yellow, 20%); + + --color-lobsters-tag-special-bg: fade(@red, 30%); + --color-lobsters-tag-special-border: fade(@red, 30%); + + --color-tag-media-bg: fade(@blue, 20%); + --color-tag-media-border: fade(@blue, 30%); + + --color-tag-meta-bg: @surface0; + --color-tag-meta-border: @surface2; + + --color-bg-target: fade(@accent-color, 20%); + + --color-fg-affirmative: @green; + --color-fg-accent: @accent-color; + --color-fg-author: @blue; + + --color-fg-contrast-7-5: @blue; + --color-fg-contrast-4-5: @subtext0; + --color-fg-contrast-6: @subtext1; + + --color-fg-link: @blue; + --color-fg-link-visited: @lavender; + + --color-fg-contrast-10: @text; + + --color-box-bg: @mantle; + --color-button-bg: @mantle; + --color-button-bg-shaded: @surface0; + --color-box-border: @surface0; + --color-box-border-focus: @accent-color; + --color-box-bg-shaded: @mantle; + + --color-mobile-story-liner-bg: @base; + --color-mobile-story-comments-bubble-fill: @surface1; + + --color-mobile-story-comments-bubble-fill-zero: @surface0; + + --color-table-header-bg: @surface0; + --color-table-header-border: @surface1; + --color-table-row-bg-even: @mantle; + --color-table-row-bg-odd: @crust; + --color-table-row-border: @base; + + --color-flash-bg-success: fade(@green, 30%); + --color-fg-negative: @red; + + hr { + color: @surface2; + } + + #logo { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + background-color: transparent !important; + &::after { + background: none; + } + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/mastodon/catppuccin.user.css b/styles/mastodon/catppuccin.user.css index 1af90772d6..42466da1c6 100644 --- a/styles/mastodon/catppuccin.user.css +++ b/styles/mastodon/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Mastodon Catppuccin +@name Mastodon Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/mastodon @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/mastodon -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mastodon/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mastodon/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amastodon @description Soothing pastel theme for Mastodon @author Catppuccin @@ -13,792 +13,4 @@ @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("mastodon.social"), -domain("social.catppuccin.com"), -domain("fosstodon.org") { - .theme-mastodon-light, - .skin-modern-light, - .skin-mastodon-light { - #catppuccin(@lightFlavor, @accentColor); - } - - .theme-contrast, - .skin-modern-dark, - .skin-contrast { - #catppuccin(@darkFlavor, @accentColor); - } - - @media (prefers-color-scheme: light) { - .theme-default, - .theme-system, - .skin-default, - .skin-system { - #catppuccin(@lightFlavor, @accentColor); - } - } - - @media (prefers-color-scheme: dark) { - .theme-default, - .theme-system, - .skin-default, - .skin-system { - #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; - } - } - - --background-color: @base; - --background-color-alt: @base; - - --dropdown-border-color: @surface1; - --dropdown-background-color: @surface0; - --modal-background-color: @mantle; - --modal-border-color: @crust; - - &, - .column-header__wrapper, - .column > *:not(.loading-indicator), - body.flavour-glitch.skin-default .column-header__wrapper { - --background-border-color: @surface0 !important; - } - - &, - .tabs-bar__wrapper, - .admin-wrapper .sidebar-wrapper__inner, - .ui__header { - background: @crust; - color: @text; - } - - .navigation-panel, - .column-link { - background: transparent; - } - - .account__header__bio .account__header__fields dt { - background: transparent; - } - - .search-popout, - .search-popout em, - .dismissable-banner__message, - .dismissable-banner__message h1, - .account__header__bio .account__header__fields dt, - .account__section-headline a.active, - .account__section-headline button.active, - .notification__filter-bar a.active, - .notification__filter-bar button.active, - .account__header__bio .account__header__content, - .navigation-bar, - .column-link__badge, - .display-name__html, - .column-subheading, - .account__display-name strong, - .status__display-name strong, - .notification__message, - .public-layout .public-account-bio .account__header__content, - .reply-indicator__content, - .status__content, - .status__content__text, - .card__bar .display-name strong, - .about__mail, - .about__domain-blocks__domain h6 { - color: @text; - } - - .search-popout span, - .link-footer p, - .link-footer p a { - color: @subtext1; - } - - .account__header__tabs__name h1 small, - .account__header__bio .account__header__fields dd, - .display-name__account, - .status__relative-time, - .empty-column-indicator, - .follow_requests-unlocked_explanation, - .account .account__display-name, - .label_input .search__input, - .search__input:focus, - .account__header__fields dt, - .rules-list__hint, - .about__domain-blocks__domain { - color: @subtext0; - } - - .compose-panel hr, - .navigation-panel hr { - border-top-color: @surface2; - } - - .mention, - .icon-button.inverted, - .icon-button.inverted:focus, - .icon-button.inverted:hover .account__header__tabs__name h1, - .account__header__content a, - .account__header__bio .account__header__fields a, - .empty-column-indicator a, - .follow_requests-unlocked_explanation a, - .column-back-button, - .text-icon-button, - .icon-button.star-icon.active, - .public-layout .public-account-bio .account__header__fields a, - .column-header__back-button, - .navigation-bar strong, - .reply-indicator__content a.unhandled-link, - .status__content a.unhandled-link, - .announcements__item__content a.unhandled-link, - .reactions-bar__item.active .reactions-bar__item__count, - .column-header.active .column-header__icon, - .about__section__title { - color: @accent-color; - } - - button.icon-button i.fa-retweet { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .prose { - h1, - h2, - h3, - h4, - strong { - color: @text; - } - color: @subtext0; - } - - .rules-list { - color: @text; - li::before { - background-color: @accent-color; - color: @crust; - } - } - - .about__domain-blocks__domain:nth-child(2n) { - background-color: @surface0; - } - - .icon-button.active.inverted { - color: @mantle; - } - - .display-name strong { - color: @text !important; - } - - .boost-modal__action-bar { - span { - color: @subtext1; - } - background: @mantle; - } - - .emoji-mart-anchor-selected, - .reply-indicator__content a { - color: @accent-color !important; - } - - .confirmation-modal { - background-color: @base; - color: @text; - } - .confirmation-modal__action-bar { - background-color: @mantle; - } - - .privacy-dropdown__option { - background: @surface0; - - .privacy-dropdown__option__content, - strong, - i { - color: @text; - } - - &:hover, - &.active { - background: @accent-color !important; - - .privacy-dropdown__option__content, - strong, - i { - color: @crust; - } - } - } - - .privacy-dropdown.active .privacy-dropdown__value { - background: @accent-color !important; - } - - .privacy-dropdown.active .privacy-dropdown__value > button, - .privacy-dropdown__value-icon.active > i { - color: @crust !important; - } - - .emoji-mart-search > input { - color: @text !important; - } - - .emoji-mart-search, - .language-dropdown__dropdown__results { - background: @surface0; - } - - .language-dropdown__dropdown { - background: @surface1 !important; - } - - .language-dropdown__dropdown__results__item { - > span { - color: @text; - } - - &:hover, - &.active { - background: @accent-color; - - > span { - color: @crust; - } - } - } - - .conversation__unread, - .emoji-mart-anchor-bar, - .compose-form__actions .icon-button.active, - .react-toggle--checked .react-toggle-track, - .react-toggle--checked:hover .react-toggle-track, - .pillbar-button:not([disabled]).active, - .pillbar-button:not([disabled]).active:focus, - .pillbar-button:not([disabled]).active:hover, - .radio-button__input.checked { - background-color: @accent-color; - } - - .reactions-bar__item.active { - background-color: rgba(@accent-color, 0.25); - } - - .trends__item__sparkline path:last-child { - stroke: @accent-color !important; - } - .trends__item__sparkline path:first-child { - fill: rgba(@accent-color, 0.25) !important; - } - - .icon-button, - .notification__message .fa { - color: @surface2; - } - - .icon-button:active, - .icon-button.active, - .icon-button:focus, - .icon-button:hover, - .text-icon-button:active, - .text-icon-button:focus, - .text-icon-button:hover, - .public-layout .public-account-bio .account__header__fields a:hover { - color: @accent-color; - } - - .account__domain-pill { - color: @accent-color; - background: fadeout(@accent-color, 80%); - } - - .drawer__header, - .account__section-headline button, - .search__input, - .search__input:focus, - .column-link__badge, - .column-subheading, - .public-layout .header, - .public-layout .public-account-header__bar::before, - .account__header__fields, - .account__header__fields - dd:not(.account__header__bio .account__header__fields dd), - .admin-wrapper .sidebar ul .simple-navigation-active-leaf .selected, - .explore__search-header, - .column-inline-form, - .follow_requests-unlocked_explanation, - .conversation--unread, - .announcements, - .status-card__image { - background: @surface0 !important; - } - - .account__section-headline { - background: @mantle; - } - - .focusable:focus { - background: unset; - } - - .admin-wrapper .sidebar ul a:hover, - .admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover, - .detailed-status, - .detailed-status__action-bar { - background: @surface0; - } - - .admin-wrapper .sidebar ul .simple-navigation-active-leaf a, - .admin-wrapper .sidebar ul a:hover { - color: @text; - } - - .dismissable-banner { - background: @base; - } - - .column-header__wrapper.active { - box-shadow: 0 1px 0 rgba(@accent-color, 0.3); - } - .column-header__wrapper.active::before { - background: radial-gradient( - ellipse, - rgba(@accent-color, 0.23) 0, - rgba(99, 100, 255, 0) 60% - ); - } - - .account__header__bio .account__header__fields dl, - .account__header__bio .account__header__fields, - .boost-modal__container, - .empty-column-indicator, - .column > .scrollable, - .nothing-here, - .public-layout .public-account-bio, - .hero-widget__text, - &.admin, - .admin-wrapper .sidebar ul a.selected, - .admin-wrapper .sidebar ul ul { - background: @base; - } - - .dropdown-button { - border-color: @accent-color; - color: @accent-color; - } - - .public-layout .public-account-header__tabs__tabs .counter::after, - .public-layout .public-account-header__tabs__tabs .counter.active::after, - .react-toggle--checked .react-toggle-thumb, - .radio-button__input.checked, - .account__action-bar__tab.active { - border-color: @accent-color; - } - - .account, - .load-gap { - border-color: @mantle; - } - - .account__section-headline a.active::after { - border-color: transparent transparent @base; - } - - .account__section-headline a.active::before, - .account__section-headline button.active::after, - .account__section-headline button.active::before { - border-color: transparent transparent @mantle; - } - - .poll__chart { - background: @overlay0; - &.leading { - background: @accent-color; - } - } - - .column-header__button { - background: @base; - color: @overlay2; - - &:hover { - background: @surface0; - } - } - - .search-popout, - .drawer__header a:hover, - .account__section-headline button:hover, - .account__section-headline a:hover { - background: @surface0; - } - - .prose a, - .column-link .active, - .compose-form__poll__select__value, - .column-link--transparent.active, - .column-link--transparent:focus, - .column-link:focus, - .column-link--transparent:hover, - .column-link:hover { - color: @accent-color; - } - - .status.collapsed .status__content::after { - background: linear-gradient(fadeout(@base, 100), @base); - } - - .button.button-tertiary:focus, - .button.button-tertiary:hover, - .button.button-tertiary:active { - color: @base; - } - - .button.button-tertiary { - border-color: @accent-color; - } - - .button, - .button.button-tertiary, - .button.logo-button, - .icon-with-badge__badge { - background: @accent-color; - color: @base; - } - - .button.logo-button svg { - fill: currentcolor; - } - - .public-layout .header .nav-button { - background-color: @surface1; - } - - .public-layout .header .nav-button:hover { - background-color: @surface2; - } - - .button.button-secondary { - background-color: transparent; - color: @text; - border-color: @accent-color; - } - .button.button-secondary:active, - .button.button-secondary:focus, - .button.button-secondary:hover { - border-color: @accent-color; - color: @base; - transition: 0.2s; - } - - .button:active, - .button:focus, - .button:hover, - .button.button-tertiary:active, - .button.button-tertiary:focus, - .button.button-tertiary:hover, - .button.logo-button:active, - .button.logo-button:focus, - .button.logo-button:hover, - .announcements__item__unread { - background: @accent-color; - } - - select { - background-color: @mantle; - color: @text; - } - - .mute-modal__cancel-button { - background-color: @base; - color: @text; - &:hover { - background-color: @surface0; - } - } - - .drawer__inner, - .drawer__inner__mastodon, - .compose-form__highlightable, - .compose-form__highlightable .autosuggest-textarea__textarea, - .column-header, - .column-back-button, - .boost-modal, - .mute-modal, - .privacy-dropdown__dropdown, - .explore__search-header .search__input { - background-color: @base; - } - - .mute-modal__action-bar { - background-color: @mantle; - } - - .mute-modal__container { - background-color: @base; - color: @text; - } - - .compose-form .compose-form__modifiers, - .compose-form .compose-form__autosuggest-wrapper, - .autosuggest-textarea__suggestions, - .compose-form .spoiler-input__input { - background: @surface0 !important; - color: @text !important; - } - - .compose-form .compose-form__buttons-wrapper { - background: @surface0; - } - - .load-more:hover { - background-color: @mantle; - } - - .character-counter { - color: @subtext0; - } - - .public-layout .header, - .hero-widget, - .public-layout .public-account-header, - .public-layout .public-account-bio, - .nothing-here { - box-shadow: none; - } - - .dropdown-menu__item--dangerous a { - color: @red; - } - - .search__popout, - .dropdown-menu__arrow::before, - .dropdown-menu__item button, - .dropdown-menu__container__list, - .dropdown-menu.bottom { - background: @surface0; - color: @text; - } - - .dropdown-menu__item a:hover, - .dropdown-menu__item button:hover { - background: @surface1; - } - - .input-copy, - .simple_form input[type="text"], - .simple_form textarea, - .simple_form .block-button, - .notification__filter-bar button, - .simple_form .button, - .simple_form button { - background: @mantle; - color: @text; - } - - .simple_form .block-button:hover, - .simple_form .button:hover, - .notification__filter-bar button:hover, - .simple_form button:hover { - background: @surface0; - } - - .simple_form .input.with_label .label_input > label, - .simple_form select, - .accounts-table__count, - .simple_form textarea { - color: @text; - } - - .simple_form textarea, - .simple_form input[type="password"], - .simple_form input[type="number"], - .simple_form input[type="text"] { - border-color: @crust; - } - - .simple_form input[type="email"]:required:valid { - border-color: @green; - } - - .simple_form input[type="password"], - .simple_form input[type="number"], - .simple_form input[type="email"]:required:valid, - .simple_form - input[type="password"]:required:invalid:not(:placeholder-shown) { - color: @text; - background: @mantle; - } - - .simple_form - input[type="password"]:required:invalid:not(:placeholder-shown) { - border-color: @red; - } - - .simple_form select { - @svg: escape( - '' - ); - background: @mantle url("data:image/svg+xml,@{svg}") no-repeat right 8px - center/auto 16px; - border-color: @crust; - } - - .poll__option input[type="text"]:focus, - .simple_form input[type="datetime-local"]:active, - .simple_form input[type="datetime-local"]:focus, - .simple_form input[type="email"]:active, - .simple_form input[type="email"]:focus, - .simple_form input[type="number"]:active, - .simple_form input[type="number"]:focus, - .simple_form input[type="password"]:active, - .simple_form input[type="password"]:focus, - .simple_form input[type="text"]:active, - .simple_form input[type="text"]:focus, - .simple_form input[type="url"]:active, - .simple_form input[type="url"]:focus, - .simple_form textarea:active, - .simple_form textarea:focus { - border-color: @accent-color !important; - background: @mantle !important; - color: @text !important; - } - - .table > thead > tr > th, - .setting-text:active, - .setting-text:focus { - border-color: @accent-color !important; - } - - .batch-table__toolbar, - .table > thead > tr > th { - background: @surface0 !important; - color: @text !important; - } - - .simple_form input[type="datetime-local"]:hover, - .simple_form input[type="email"]:hover, - .simple_form input[type="number"]:hover, - .simple_form input[type="password"]:hover, - .simple_form input[type="text"]:hover, - .simple_form input[type="url"]:hover, - .simple_form textarea:hover { - background: @mantle !important; - border-color: @accent-color !important; - transition: 0.4s; - } - - .batch-table__row { - background: @surface1; - } - - .batch-table__row:hover, - .batch-table__row:nth-child(2n):hover { - background: @surface2; - } - - .batch-table__row:nth-child(2n), - .table > tbody > tr > td { - background: @surface0; - } - - .table > thead > tr > th { - border-bottom-color: @surface0; - } - - .positive-hint { - color: @green !important; - } - - .card__bar { - background: @surface0; - } - - .reply-indicator { - background: @surface1; - } - - .getting-started, - .getting-started__wrapper { - background: @surface0; - } - - .column-link { - color: @text; - - &:hover { - color: @accent-color; - } - } - - .search__popout h4 { - color: @subtext0; - } - .search__popout__menu__item mark { - color: @text; - } - .search__popout__menu__item.selected, - .search__popout__menu__item:active, - .search__popout__menu__item:focus, - .search__popout__menu__item:hover { - background: @surface1; - color: @text; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/mastodon/catppuccin.user.less b/styles/mastodon/catppuccin.user.less new file mode 100644 index 0000000000..dd0a006383 --- /dev/null +++ b/styles/mastodon/catppuccin.user.less @@ -0,0 +1,802 @@ +/* ==UserStyle== +@name Mastodon Catppuccin +@namespace github.com/catppuccin/userstyles/styles/mastodon +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/mastodon +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mastodon/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amastodon +@description Soothing pastel theme for Mastodon +@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("mastodon.social"), + domain("social.catppuccin.com"), + domain("fosstodon.org") { + .theme-mastodon-light, + .skin-modern-light, + .skin-mastodon-light { + #catppuccin(@lightFlavor, @accentColor); + } + + .theme-contrast, + .skin-modern-dark, + .skin-contrast { + #catppuccin(@darkFlavor, @accentColor); + } + + @media (prefers-color-scheme: light) { + .theme-default, + .theme-system, + .skin-default, + .skin-system { + #catppuccin(@lightFlavor, @accentColor); + } + } + + @media (prefers-color-scheme: dark) { + .theme-default, + .theme-system, + .skin-default, + .skin-system { + #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; + } + } + + --background-color: @base; + --background-color-alt: @base; + + --dropdown-border-color: @surface1; + --dropdown-background-color: @surface0; + --modal-background-color: @mantle; + --modal-border-color: @crust; + + &, + .column-header__wrapper, + .column > *:not(.loading-indicator), + body.flavour-glitch.skin-default .column-header__wrapper { + --background-border-color: @surface0 !important; + } + + &, + .tabs-bar__wrapper, + .admin-wrapper .sidebar-wrapper__inner, + .ui__header { + background: @crust; + color: @text; + } + + .navigation-panel, + .column-link { + background: transparent; + } + + .account__header__bio .account__header__fields dt { + background: transparent; + } + + .search-popout, + .search-popout em, + .dismissable-banner__message, + .dismissable-banner__message h1, + .account__header__bio .account__header__fields dt, + .account__section-headline a.active, + .account__section-headline button.active, + .notification__filter-bar a.active, + .notification__filter-bar button.active, + .account__header__bio .account__header__content, + .navigation-bar, + .column-link__badge, + .display-name__html, + .column-subheading, + .account__display-name strong, + .status__display-name strong, + .notification__message, + .public-layout .public-account-bio .account__header__content, + .reply-indicator__content, + .status__content, + .status__content__text, + .card__bar .display-name strong, + .about__mail, + .about__domain-blocks__domain h6 { + color: @text; + } + + .search-popout span, + .link-footer p, + .link-footer p a { + color: @subtext1; + } + + .account__header__tabs__name h1 small, + .account__header__bio .account__header__fields dd, + .display-name__account, + .status__relative-time, + .empty-column-indicator, + .follow_requests-unlocked_explanation, + .account .account__display-name, + .label_input .search__input, + .search__input:focus, + .account__header__fields dt, + .rules-list__hint, + .about__domain-blocks__domain { + color: @subtext0; + } + + .compose-panel hr, + .navigation-panel hr { + border-top-color: @surface2; + } + + .mention, + .icon-button.inverted, + .icon-button.inverted:focus, + .icon-button.inverted:hover .account__header__tabs__name h1, + .account__header__content a, + .account__header__bio .account__header__fields a, + .empty-column-indicator a, + .follow_requests-unlocked_explanation a, + .column-back-button, + .text-icon-button, + .icon-button.star-icon.active, + .public-layout .public-account-bio .account__header__fields a, + .column-header__back-button, + .navigation-bar strong, + .reply-indicator__content a.unhandled-link, + .status__content a.unhandled-link, + .announcements__item__content a.unhandled-link, + .reactions-bar__item.active .reactions-bar__item__count, + .column-header.active .column-header__icon, + .about__section__title { + color: @accent-color; + } + + button.icon-button i.fa-retweet { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .prose { + h1, + h2, + h3, + h4, + strong { + color: @text; + } + color: @subtext0; + } + + .rules-list { + color: @text; + li::before { + background-color: @accent-color; + color: @crust; + } + } + + .about__domain-blocks__domain:nth-child(2n) { + background-color: @surface0; + } + + .icon-button.active.inverted { + color: @mantle; + } + + .display-name strong { + color: @text !important; + } + + .boost-modal__action-bar { + span { + color: @subtext1; + } + background: @mantle; + } + + .emoji-mart-anchor-selected, + .reply-indicator__content a { + color: @accent-color !important; + } + + .confirmation-modal { + background-color: @base; + color: @text; + } + .confirmation-modal__action-bar { + background-color: @mantle; + } + + .privacy-dropdown__option { + background: @surface0; + + .privacy-dropdown__option__content, + strong, + i { + color: @text; + } + + &:hover, + &.active { + background: @accent-color !important; + + .privacy-dropdown__option__content, + strong, + i { + color: @crust; + } + } + } + + .privacy-dropdown.active .privacy-dropdown__value { + background: @accent-color !important; + } + + .privacy-dropdown.active .privacy-dropdown__value > button, + .privacy-dropdown__value-icon.active > i { + color: @crust !important; + } + + .emoji-mart-search > input { + color: @text !important; + } + + .emoji-mart-search, + .language-dropdown__dropdown__results { + background: @surface0; + } + + .language-dropdown__dropdown { + background: @surface1 !important; + } + + .language-dropdown__dropdown__results__item { + > span { + color: @text; + } + + &:hover, + &.active { + background: @accent-color; + + > span { + color: @crust; + } + } + } + + .conversation__unread, + .emoji-mart-anchor-bar, + .compose-form__actions .icon-button.active, + .react-toggle--checked .react-toggle-track, + .react-toggle--checked:hover .react-toggle-track, + .pillbar-button:not([disabled]).active, + .pillbar-button:not([disabled]).active:focus, + .pillbar-button:not([disabled]).active:hover, + .radio-button__input.checked { + background-color: @accent-color; + } + + .reactions-bar__item.active { + background-color: rgba(@accent-color, 0.25); + } + + .trends__item__sparkline path:last-child { + stroke: @accent-color !important; + } + .trends__item__sparkline path:first-child { + fill: rgba(@accent-color, 0.25) !important; + } + + .icon-button, + .notification__message .fa { + color: @surface2; + } + + .icon-button:active, + .icon-button.active, + .icon-button:focus, + .icon-button:hover, + .text-icon-button:active, + .text-icon-button:focus, + .text-icon-button:hover, + .public-layout .public-account-bio .account__header__fields a:hover { + color: @accent-color; + } + + .account__domain-pill { + color: @accent-color; + background: fadeout(@accent-color, 80%); + } + + .drawer__header, + .account__section-headline button, + .search__input, + .search__input:focus, + .column-link__badge, + .column-subheading, + .public-layout .header, + .public-layout .public-account-header__bar::before, + .account__header__fields, + .account__header__fields + dd:not(.account__header__bio .account__header__fields dd), + .admin-wrapper .sidebar ul .simple-navigation-active-leaf .selected, + .explore__search-header, + .column-inline-form, + .follow_requests-unlocked_explanation, + .conversation--unread, + .announcements, + .status-card__image { + background: @surface0 !important; + } + + .account__section-headline { + background: @mantle; + } + + .focusable:focus { + background: unset; + } + + .admin-wrapper .sidebar ul a:hover, + .admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover, + .detailed-status, + .detailed-status__action-bar { + background: @surface0; + } + + .admin-wrapper .sidebar ul .simple-navigation-active-leaf a, + .admin-wrapper .sidebar ul a:hover { + color: @text; + } + + .dismissable-banner { + background: @base; + } + + .column-header__wrapper.active { + box-shadow: 0 1px 0 rgba(@accent-color, 0.3); + } + .column-header__wrapper.active::before { + background: radial-gradient( + ellipse, + rgba(@accent-color, 0.23) 0, + rgba(99, 100, 255, 0) 60% + ); + } + + .account__header__bio .account__header__fields dl, + .account__header__bio .account__header__fields, + .boost-modal__container, + .empty-column-indicator, + .column > .scrollable, + .nothing-here, + .public-layout .public-account-bio, + .hero-widget__text, + &.admin, + .admin-wrapper .sidebar ul a.selected, + .admin-wrapper .sidebar ul ul { + background: @base; + } + + .dropdown-button { + border-color: @accent-color; + color: @accent-color; + } + + .public-layout .public-account-header__tabs__tabs .counter::after, + .public-layout .public-account-header__tabs__tabs .counter.active::after, + .react-toggle--checked .react-toggle-thumb, + .radio-button__input.checked, + .account__action-bar__tab.active { + border-color: @accent-color; + } + + .account, + .load-gap { + border-color: @mantle; + } + + .account__section-headline a.active::after { + border-color: transparent transparent @base; + } + + .account__section-headline a.active::before, + .account__section-headline button.active::after, + .account__section-headline button.active::before { + border-color: transparent transparent @mantle; + } + + .poll__chart { + background: @overlay0; + &.leading { + background: @accent-color; + } + } + + .column-header__button { + background: @base; + color: @overlay2; + + &:hover { + background: @surface0; + } + } + + .search-popout, + .drawer__header a:hover, + .account__section-headline button:hover, + .account__section-headline a:hover { + background: @surface0; + } + + .prose a, + .column-link .active, + .compose-form__poll__select__value, + .column-link--transparent.active, + .column-link--transparent:focus, + .column-link:focus, + .column-link--transparent:hover, + .column-link:hover { + color: @accent-color; + } + + .status.collapsed .status__content::after { + background: linear-gradient(fadeout(@base, 100), @base); + } + + .button.button-tertiary:focus, + .button.button-tertiary:hover, + .button.button-tertiary:active { + color: @base; + } + + .button.button-tertiary { + border-color: @accent-color; + } + + .button, + .button.button-tertiary, + .button.logo-button, + .icon-with-badge__badge { + background: @accent-color; + color: @base; + } + + .button.logo-button svg { + fill: currentcolor; + } + + .public-layout .header .nav-button { + background-color: @surface1; + } + + .public-layout .header .nav-button:hover { + background-color: @surface2; + } + + .button.button-secondary { + background-color: transparent; + color: @text; + border-color: @accent-color; + } + .button.button-secondary:active, + .button.button-secondary:focus, + .button.button-secondary:hover { + border-color: @accent-color; + color: @base; + transition: 0.2s; + } + + .button:active, + .button:focus, + .button:hover, + .button.button-tertiary:active, + .button.button-tertiary:focus, + .button.button-tertiary:hover, + .button.logo-button:active, + .button.logo-button:focus, + .button.logo-button:hover, + .announcements__item__unread { + background: @accent-color; + } + + select { + background-color: @mantle; + color: @text; + } + + .mute-modal__cancel-button { + background-color: @base; + color: @text; + &:hover { + background-color: @surface0; + } + } + + .drawer__inner, + .drawer__inner__mastodon, + .compose-form__highlightable, + .compose-form__highlightable .autosuggest-textarea__textarea, + .column-header, + .column-back-button, + .boost-modal, + .mute-modal, + .privacy-dropdown__dropdown, + .explore__search-header .search__input { + background-color: @base; + } + + .mute-modal__action-bar { + background-color: @mantle; + } + + .mute-modal__container { + background-color: @base; + color: @text; + } + + .compose-form .compose-form__modifiers, + .compose-form .compose-form__autosuggest-wrapper, + .autosuggest-textarea__suggestions, + .compose-form .spoiler-input__input { + background: @surface0 !important; + color: @text !important; + } + + .compose-form .compose-form__buttons-wrapper { + background: @surface0; + } + + .load-more:hover { + background-color: @mantle; + } + + .character-counter { + color: @subtext0; + } + + .public-layout .header, + .hero-widget, + .public-layout .public-account-header, + .public-layout .public-account-bio, + .nothing-here { + box-shadow: none; + } + + .dropdown-menu__item--dangerous a { + color: @red; + } + + .search__popout, + .dropdown-menu__arrow::before, + .dropdown-menu__item button, + .dropdown-menu__container__list, + .dropdown-menu.bottom { + background: @surface0; + color: @text; + } + + .dropdown-menu__item a:hover, + .dropdown-menu__item button:hover { + background: @surface1; + } + + .input-copy, + .simple_form input[type="text"], + .simple_form textarea, + .simple_form .block-button, + .notification__filter-bar button, + .simple_form .button, + .simple_form button { + background: @mantle; + color: @text; + } + + .simple_form .block-button:hover, + .simple_form .button:hover, + .notification__filter-bar button:hover, + .simple_form button:hover { + background: @surface0; + } + + .simple_form .input.with_label .label_input > label, + .simple_form select, + .accounts-table__count, + .simple_form textarea { + color: @text; + } + + .simple_form textarea, + .simple_form input[type="password"], + .simple_form input[type="number"], + .simple_form input[type="text"] { + border-color: @crust; + } + + .simple_form input[type="email"]:required:valid { + border-color: @green; + } + + .simple_form input[type="password"], + .simple_form input[type="number"], + .simple_form input[type="email"]:required:valid, + .simple_form + input[type="password"]:required:invalid:not(:placeholder-shown) { + color: @text; + background: @mantle; + } + + .simple_form + input[type="password"]:required:invalid:not(:placeholder-shown) { + border-color: @red; + } + + .simple_form select { + @svg: escape( + '' + ); + background: @mantle url("data:image/svg+xml,@{svg}") no-repeat right 8px + center/auto 16px; + border-color: @crust; + } + + .poll__option input[type="text"]:focus, + .simple_form input[type="datetime-local"]:active, + .simple_form input[type="datetime-local"]:focus, + .simple_form input[type="email"]:active, + .simple_form input[type="email"]:focus, + .simple_form input[type="number"]:active, + .simple_form input[type="number"]:focus, + .simple_form input[type="password"]:active, + .simple_form input[type="password"]:focus, + .simple_form input[type="text"]:active, + .simple_form input[type="text"]:focus, + .simple_form input[type="url"]:active, + .simple_form input[type="url"]:focus, + .simple_form textarea:active, + .simple_form textarea:focus { + border-color: @accent-color !important; + background: @mantle !important; + color: @text !important; + } + + .table > thead > tr > th, + .setting-text:active, + .setting-text:focus { + border-color: @accent-color !important; + } + + .batch-table__toolbar, + .table > thead > tr > th { + background: @surface0 !important; + color: @text !important; + } + + .simple_form input[type="datetime-local"]:hover, + .simple_form input[type="email"]:hover, + .simple_form input[type="number"]:hover, + .simple_form input[type="password"]:hover, + .simple_form input[type="text"]:hover, + .simple_form input[type="url"]:hover, + .simple_form textarea:hover { + background: @mantle !important; + border-color: @accent-color !important; + transition: 0.4s; + } + + .batch-table__row { + background: @surface1; + } + + .batch-table__row:hover, + .batch-table__row:nth-child(2n):hover { + background: @surface2; + } + + .batch-table__row:nth-child(2n), + .table > tbody > tr > td { + background: @surface0; + } + + .table > thead > tr > th { + border-bottom-color: @surface0; + } + + .positive-hint { + color: @green !important; + } + + .card__bar { + background: @surface0; + } + + .reply-indicator { + background: @surface1; + } + + .getting-started, + .getting-started__wrapper { + background: @surface0; + } + + .column-link { + color: @text; + + &:hover { + color: @accent-color; + } + } + + .search__popout h4 { + color: @subtext0; + } + .search__popout__menu__item mark { + color: @text; + } + .search__popout__menu__item.selected, + .search__popout__menu__item:active, + .search__popout__menu__item:focus, + .search__popout__menu__item:hover { + background: @surface1; + color: @text; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/mdbook/catppuccin.user.css b/styles/mdbook/catppuccin.user.css index 49ceacb11f..5752bdfde9 100644 --- a/styles/mdbook/catppuccin.user.css +++ b/styles/mdbook/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name mdBook Catppuccin +@name mdBook Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/mdbook @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/mdbook -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mdbook/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mdbook/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amdbook @description Soothing pastel theme for mdBook @author Catppuccin @@ -13,157 +13,4 @@ @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 url-prefix('https://rust-lang.github.io/mdBook/'), domain('doc.rust-lang.org'), domain('rust-book.cs.brown.edu') -{ - @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.css"); - - @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]; - - --ctp-rosewater: @rosewater; - --ctp-flamingo: @flamingo; - --ctp-pink: @pink; - --ctp-mauve: @mauve; - --ctp-red: @red; - --ctp-maroon: @maroon; - --ctp-peach: @peach; - --ctp-yellow: @yellow; - --ctp-green: @green; - --ctp-teal: @teal; - --ctp-sky: @sky; - --ctp-sapphire: @sapphire; - --ctp-blue: @blue; - --ctp-lavender: @lavender; - --ctp-text: @text; - --ctp-subtext1: @subtext1; - --ctp-subtext0: @subtext0; - --ctp-overlay2: @overlay2; - --ctp-overlay1: @overlay1; - --ctp-overlay0: @overlay0; - --ctp-surface2: @surface2; - --ctp-surface1: @surface1; - --ctp-surface0: @surface0; - --ctp-base: @base; - --ctp-mantle: @mantle; - --ctp-crust: @crust; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - --bg: @base; - --fg: @text; - --sidebar-bg: @mantle; - --sidebar-fg: @text; - --sidebar-non-existant: @overlay0; - --sidebar-active: @blue; - --sidebar-spacer: @overlay0; - --scrollbar: @overlay0; - --icons: @overlay0; - --icons-hover: @overlay1; - --links: @blue; - --inline-code-color: @peach; - --theme-popup-bg: @mantle; - --theme-popup-border: @overlay0; - --theme-hover: @overlay0; - --quote-bg: @mantle; - --quote-border: @crust; - --table-border-color: @crust; - --table-header-bg: @mantle; - --table-alternate-bg: @mantle; - --searchbar-border-color: @crust; - --searchbar-bg: @mantle; - --searchbar-fg: @text; - --searchbar-shadow-color: @crust; - --searchresults-header-fg: @text; - --searchresults-border-color: @crust; - --searchresults-li-bg: @base; - --search-mark-bg: @peach; - --warning-border: @peach; - - code.hljs { - color: @text; - background: @mantle; - } - blockquote blockquote { - border-top-color: @surface2; - border-bottom-color: @surface2; - } - hr { - color: @surface2; - } - del { - color: @overlay2; - } - .ace_gutter { - color: @overlay1; - background: @mantle; - } - .ace_gutter-active-line.ace_gutter-cell { - color: @pink; - background: @mantle; - } - } -} - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/mdbook/catppuccin.user.less b/styles/mdbook/catppuccin.user.less new file mode 100644 index 0000000000..9130e7afed --- /dev/null +++ b/styles/mdbook/catppuccin.user.less @@ -0,0 +1,168 @@ +/* ==UserStyle== +@name mdBook Catppuccin +@namespace github.com/catppuccin/userstyles/styles/mdbook +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/mdbook +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mdbook/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amdbook +@description Soothing pastel theme for mdBook +@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 url-prefix("https://rust-lang.github.io/mdBook/"), + domain("doc.rust-lang.org"), + domain("rust-book.cs.brown.edu") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.css"); + + @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]; + + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + --bg: @base; + --fg: @text; + --sidebar-bg: @mantle; + --sidebar-fg: @text; + --sidebar-non-existant: @overlay0; + --sidebar-active: @blue; + --sidebar-spacer: @overlay0; + --scrollbar: @overlay0; + --icons: @overlay0; + --icons-hover: @overlay1; + --links: @blue; + --inline-code-color: @peach; + --theme-popup-bg: @mantle; + --theme-popup-border: @overlay0; + --theme-hover: @overlay0; + --quote-bg: @mantle; + --quote-border: @crust; + --table-border-color: @crust; + --table-header-bg: @mantle; + --table-alternate-bg: @mantle; + --searchbar-border-color: @crust; + --searchbar-bg: @mantle; + --searchbar-fg: @text; + --searchbar-shadow-color: @crust; + --searchresults-header-fg: @text; + --searchresults-border-color: @crust; + --searchresults-li-bg: @base; + --search-mark-bg: @peach; + --warning-border: @peach; + + code.hljs { + color: @text; + background: @mantle; + } + blockquote blockquote { + border-top-color: @surface2; + border-bottom-color: @surface2; + } + hr { + color: @surface2; + } + del { + color: @overlay2; + } + .ace_gutter { + color: @overlay1; + background: @mantle; + } + .ace_gutter-active-line.ace_gutter-cell { + color: @pink; + background: @mantle; + } + } +} + +#rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/mdn/catppuccin.user.css b/styles/mdn/catppuccin.user.css index 41cc2fd62a..9282dceb27 100644 --- a/styles/mdn/catppuccin.user.css +++ b/styles/mdn/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name MDN Catppuccin +@name MDN Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/mdn @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/mdn -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mdn/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mdn/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amdn @description Soothing pastel theme for MDN @author Catppuccin @@ -13,250 +13,4 @@ @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== */ - -#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; - } - } - - --text-primary: @text; - --text-secondary: @subtext0; - --text-active: @overlay1; - --text-inactive: fadeout(@subtext0, 40%); - --text-link: @accent-color; - --text-visited: lighten(saturate(@accent-color, -20%), -20%); - --text-invert: @base; - --background-primary: @base; - --background-secondary: @crust; - --background-tertiary: @mantle; - --background-toc-active: @crust; - --background-mark-yellow: fadeout(@yellow, 60%); - --background-mark-green: fadeout(@green, 60%); - --background-information: fadeout(@blue, 90%); - --background-warning: fadeout(@maroon, 90%); - --background-critical: fadeout(@red, 90%); - --background-success: fadeout(@green, 90%); - --border-primary: @surface2; - --border-secondary: @surface1; - --button-primary-default: @text; - --button-primary-hover: @subtext0; - --button-primary-active: @overlay0; - --button-primary-inactive: @text; - --button-secondary-default: @surface2; - --button-secondary-hover: @surface1; - --button-secondary-active: @overlay0; - --button-secondary-inactive: @surface2; - --button-secondary-border-focus: @blue; - --button-secondary-border-red: @red; - --button-secondary-border-red-focus: @maroon; - --icon-primary: @text; - --icon-secondary: @subtext0; - --icon-information: @blue; - --icon-warning: @peach; - --icon-critical: @maroon; - --icon-success: @green; - --accent-primary: @accent-color; - --accent-primary-engage: fadeout(@accent-color, 90%); - --accent-secondary: @accent-color; - --accent-tertiary: fadeout(saturate(@accent-color, 10%), 90%); - --shadow-01: 0 1px 2px fadeout(@text, 80%); - --shadow-02: 0 1px 6px fadeout(@text, 80%); - --focus-01: 0 0 0 3px fadeout(@text, 50%); - --field-focus-border: @text; - --code-token-tag: @mauve; - --code-token-punctuation: @overlay2; - --code-token-attribute-name: @blue; - --code-token-attribute-value: @peach; - --code-token-comment: @overlay2; - --code-token-default: @text; - --code-token-selector: @lavender; - --code-token-class-selector: @yellow; - --code-token-pseudo-class: @pink; - --code-token-variable-2: @rosewater; - --code-token-at-rule: @flamingo; - --code-token-meta: @overlay1; - --code-background-inline: @mantle; - --code-background-block: @mantle; - --notecard-link-color: @subtext1; - --scrollbar-bg: transparent; - --scrollbar-color: hsla(0, 0%, 100%, 0.25); - --category-color: @sky; - --category-color-background: fadeout(@sky, 60%); - --code-color: lighten(@sky, 10%); - --mark-color: darken(@sky, 30%); - --plus-accent-color: @maroon; - --html-accent-color: @red; - --css-accent-color: @sapphire; - --js-accent-color: @yellow; - --http-accent-color: @green; - --apis-accent-color: @mauve; - --learn-accent-color: @pink; - --plus-code-color: saturate(@maroon, 10%); - --html-code-color: saturate(@red, 10%); - --css-code-color: saturate(@sapphire, 10%); - --js-code-color: saturate(@yellow, 10%); - --http-code-color: saturate(@green, 10%); - --apis-code-color: saturate(@mauve, 10%); - --learn-code-color: saturate(@pink, 10%); - --plus-mark-color: darken(@maroon, 30%); - --html-mark-color: darken(@red, 30%); - --css-mark-color: darken(@sapphire, 30%); - --js-mark-color: darken(@yellow, 30%); - --http-mark-color: darken(@green, 30%); - --apis-mark-color: darken(@mauve, 30%); - --learn-mark-color: darken(@pink, 30%); - --plus-accent-background-color: fadeout(@maroon, 70%); - --html-accent-background-color: fadeout(@red, 70%); - --css-accent-background-color: fadeout(@sapphire, 70%); - --js-accent-background-color: fadeout(@yellow, 70%); - --http-accent-background-color: fadeout(@green, 70%); - --apis-accent-background-color: fadeout(@mauve, 70%); - --learn-accent-background-color: fadeout(@pink, 70%); - --plus-accent-engage: fadeout(@maroon, 30%); - --html-accent-engage: fadeout(@red, 30%); - --css-accent-engage: fadeout(@sapphire, 30%); - --js-accent-engage: fadeout(@yellow, 30%); - --http-accent-engage: fadeout(@green, 30%); - --apis-accent-engage: fadeout(@mauve, 30%); - --learn-accent-engage: fadeout(@pink, 30%); - --modal-backdrop-color: fadeout(@mantle, 30%); - --selection-background-color: fadeout(@surface2, 40%); - --text-primary-red: @red; - --text-primary-green: @green; - --text-primary-blue: @blue; - --text-primary-yellow: @yellow; - --collections-link: @flamingo; - --collections-header: darken(@red, 30%); - --collections-mandala: darken(@red, 20%); - --collections-icon: darken(@red, 10%); - --updates-link: @sky; - --updates-header: @crust; - --updates-mandala: lighten(@sky, 10%); - --updates-icon: @sky; - --ai-help-link: @green; - --ai-help-header: @crust; - --ai-help-mandala: lighten(@green, 10%); - --ai-help-icon: @green; - --form-limit-color: @overlay0; - --form-limit-color-emphasis: @overlay1; - --form-invalid-color: @red; - --form-invalid-focus-color: @flamingo; - --form-invalid-focus-effect-color: fadeout(@flamingo, 80%); - --baseline-high-bg: hsl( - hue(@green), - saturation(@green), - lightness(@surface0) - ); - --baseline-high-engine-bg: hsl( - hue(@green), - saturation(@green), - lightness(@base) - ); - --baseline-high-check: @green; - --baseline-low-bg: hsl(hue(@blue), saturation(@blue), lightness(@surface0)); - --baseline-low-engine-bg: hsl( - hue(@blue), - saturation(@blue), - lightness(@base) - ); - --baseline-low-check: @blue; - --baseline-low-pill-bg: @sapphire; - --baseline-low-pill-color: @base; - --baseline-limited-bg: @surface0; - --baseline-limited-engine-bg: @base; - --baseline-limited-check: @green; - --baseline-limited-cross: @peach; -} - -@-moz-document domain("developer.mozilla.org") { - .light { - #catppuccin(@lightFlavor, @accentColor); - } - - .dark { - #catppuccin(@darkFlavor, @accentColor); - } - - /* stylelint-disable selector-not-notation */ - @media (prefers-color-scheme: light) { - :root:not(.light):not(.dark) { - #catppuccin(@lightFlavor, @accentColor); - } - } - - @media (prefers-color-scheme: dark) { - :root:not(.light):not(.dark) { - #catppuccin(@darkFlavor, @accentColor); - } - } - /* stylelint-enable selector-not-notation */ -} - -@-moz-document domain("interactive-examples.mdn.mozilla.net") { - .theme-light { - #catppuccin(@lightFlavor, @accentColor); - } - .theme-dark { - #catppuccin(@darkFlavor, @accentColor); - } - - @media (prefers-color-scheme: light) { - :root { - #catppuccin(@lightFlavor, @accentColor); - } - } - - @media (prefers-color-scheme: dark) { - :root { - #catppuccin(@darkFlavor, @accentColor); - } - } -} - -/* prettier-ignore */ -@catppuccin: { - @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; - @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; - @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; - @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; -} - -// vim:ft=less +==/UserStyle== */ \ No newline at end of file diff --git a/styles/mdn/catppuccin.user.less b/styles/mdn/catppuccin.user.less new file mode 100644 index 0000000000..66011493da --- /dev/null +++ b/styles/mdn/catppuccin.user.less @@ -0,0 +1,260 @@ +/* ==UserStyle== +@name MDN Catppuccin +@namespace github.com/catppuccin/userstyles/styles/mdn +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/mdn +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mdn/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amdn +@description Soothing pastel theme for MDN +@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== */ + +#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; + } + } + + --text-primary: @text; + --text-secondary: @subtext0; + --text-active: @overlay1; + --text-inactive: fadeout(@subtext0, 40%); + --text-link: @accent-color; + --text-visited: lighten(saturate(@accent-color, -20%), -20%); + --text-invert: @base; + --background-primary: @base; + --background-secondary: @crust; + --background-tertiary: @mantle; + --background-toc-active: @crust; + --background-mark-yellow: fadeout(@yellow, 60%); + --background-mark-green: fadeout(@green, 60%); + --background-information: fadeout(@blue, 90%); + --background-warning: fadeout(@maroon, 90%); + --background-critical: fadeout(@red, 90%); + --background-success: fadeout(@green, 90%); + --border-primary: @surface2; + --border-secondary: @surface1; + --button-primary-default: @text; + --button-primary-hover: @subtext0; + --button-primary-active: @overlay0; + --button-primary-inactive: @text; + --button-secondary-default: @surface2; + --button-secondary-hover: @surface1; + --button-secondary-active: @overlay0; + --button-secondary-inactive: @surface2; + --button-secondary-border-focus: @blue; + --button-secondary-border-red: @red; + --button-secondary-border-red-focus: @maroon; + --icon-primary: @text; + --icon-secondary: @subtext0; + --icon-information: @blue; + --icon-warning: @peach; + --icon-critical: @maroon; + --icon-success: @green; + --accent-primary: @accent-color; + --accent-primary-engage: fadeout(@accent-color, 90%); + --accent-secondary: @accent-color; + --accent-tertiary: fadeout(saturate(@accent-color, 10%), 90%); + --shadow-01: 0 1px 2px fadeout(@text, 80%); + --shadow-02: 0 1px 6px fadeout(@text, 80%); + --focus-01: 0 0 0 3px fadeout(@text, 50%); + --field-focus-border: @text; + --code-token-tag: @mauve; + --code-token-punctuation: @overlay2; + --code-token-attribute-name: @blue; + --code-token-attribute-value: @peach; + --code-token-comment: @overlay2; + --code-token-default: @text; + --code-token-selector: @lavender; + --code-token-class-selector: @yellow; + --code-token-pseudo-class: @pink; + --code-token-variable-2: @rosewater; + --code-token-at-rule: @flamingo; + --code-token-meta: @overlay1; + --code-background-inline: @mantle; + --code-background-block: @mantle; + --notecard-link-color: @subtext1; + --scrollbar-bg: transparent; + --scrollbar-color: hsla(0, 0%, 100%, 0.25); + --category-color: @sky; + --category-color-background: fadeout(@sky, 60%); + --code-color: lighten(@sky, 10%); + --mark-color: darken(@sky, 30%); + --plus-accent-color: @maroon; + --html-accent-color: @red; + --css-accent-color: @sapphire; + --js-accent-color: @yellow; + --http-accent-color: @green; + --apis-accent-color: @mauve; + --learn-accent-color: @pink; + --plus-code-color: saturate(@maroon, 10%); + --html-code-color: saturate(@red, 10%); + --css-code-color: saturate(@sapphire, 10%); + --js-code-color: saturate(@yellow, 10%); + --http-code-color: saturate(@green, 10%); + --apis-code-color: saturate(@mauve, 10%); + --learn-code-color: saturate(@pink, 10%); + --plus-mark-color: darken(@maroon, 30%); + --html-mark-color: darken(@red, 30%); + --css-mark-color: darken(@sapphire, 30%); + --js-mark-color: darken(@yellow, 30%); + --http-mark-color: darken(@green, 30%); + --apis-mark-color: darken(@mauve, 30%); + --learn-mark-color: darken(@pink, 30%); + --plus-accent-background-color: fadeout(@maroon, 70%); + --html-accent-background-color: fadeout(@red, 70%); + --css-accent-background-color: fadeout(@sapphire, 70%); + --js-accent-background-color: fadeout(@yellow, 70%); + --http-accent-background-color: fadeout(@green, 70%); + --apis-accent-background-color: fadeout(@mauve, 70%); + --learn-accent-background-color: fadeout(@pink, 70%); + --plus-accent-engage: fadeout(@maroon, 30%); + --html-accent-engage: fadeout(@red, 30%); + --css-accent-engage: fadeout(@sapphire, 30%); + --js-accent-engage: fadeout(@yellow, 30%); + --http-accent-engage: fadeout(@green, 30%); + --apis-accent-engage: fadeout(@mauve, 30%); + --learn-accent-engage: fadeout(@pink, 30%); + --modal-backdrop-color: fadeout(@mantle, 30%); + --selection-background-color: fadeout(@surface2, 40%); + --text-primary-red: @red; + --text-primary-green: @green; + --text-primary-blue: @blue; + --text-primary-yellow: @yellow; + --collections-link: @flamingo; + --collections-header: darken(@red, 30%); + --collections-mandala: darken(@red, 20%); + --collections-icon: darken(@red, 10%); + --updates-link: @sky; + --updates-header: @crust; + --updates-mandala: lighten(@sky, 10%); + --updates-icon: @sky; + --ai-help-link: @green; + --ai-help-header: @crust; + --ai-help-mandala: lighten(@green, 10%); + --ai-help-icon: @green; + --form-limit-color: @overlay0; + --form-limit-color-emphasis: @overlay1; + --form-invalid-color: @red; + --form-invalid-focus-color: @flamingo; + --form-invalid-focus-effect-color: fadeout(@flamingo, 80%); + --baseline-high-bg: hsl( + hue(@green), + saturation(@green), + lightness(@surface0) + ); + --baseline-high-engine-bg: hsl( + hue(@green), + saturation(@green), + lightness(@base) + ); + --baseline-high-check: @green; + --baseline-low-bg: hsl(hue(@blue), saturation(@blue), lightness(@surface0)); + --baseline-low-engine-bg: hsl( + hue(@blue), + saturation(@blue), + lightness(@base) + ); + --baseline-low-check: @blue; + --baseline-low-pill-bg: @sapphire; + --baseline-low-pill-color: @base; + --baseline-limited-bg: @surface0; + --baseline-limited-engine-bg: @base; + --baseline-limited-check: @green; + --baseline-limited-cross: @peach; +} + +@-moz-document domain("developer.mozilla.org") { + .light { + #catppuccin(@lightFlavor, @accentColor); + } + + .dark { + #catppuccin(@darkFlavor, @accentColor); + } + + /* stylelint-disable selector-not-notation */ + @media (prefers-color-scheme: light) { + :root:not(.light):not(.dark) { + #catppuccin(@lightFlavor, @accentColor); + } + } + + @media (prefers-color-scheme: dark) { + :root:not(.light):not(.dark) { + #catppuccin(@darkFlavor, @accentColor); + } + } + /* stylelint-enable selector-not-notation */ +} + +@-moz-document domain("interactive-examples.mdn.mozilla.net") { + .theme-light { + #catppuccin(@lightFlavor, @accentColor); + } + .theme-dark { + #catppuccin(@darkFlavor, @accentColor); + } + + @media (prefers-color-scheme: light) { + :root { + #catppuccin(@lightFlavor, @accentColor); + } + } + + @media (prefers-color-scheme: dark) { + :root { + #catppuccin(@darkFlavor, @accentColor); + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/microsoft-word/catppuccin.user.css b/styles/microsoft-word/catppuccin.user.css index 39087abf0e..d25e8cd8a1 100644 --- a/styles/microsoft-word/catppuccin.user.css +++ b/styles/microsoft-word/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Microsoft Word Catppuccin +@name Microsoft Word Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/microsoft-word @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/microsoft-word -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/microsoft-word/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/microsoft-word/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amicrosoft-word @description Soothing pastel theme for Microsoft Word @author Catppuccin @@ -13,429 +13,4 @@ @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('live.com') { - #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; - } - } - - .fui-FluentProvider2, - .fui-FluentProvider86, - .fui-FluentProvider102 { - --colorNeutralStroke1: @surface1; - --colorBrandForeground1: @accent-color; - --colorNeutralForeground1: @text; - --colorNeutralBackground1: @surface0; - --colorNeutralForeground2: @text; - --colorNeutralBackground3: @base; - --colorNeutralStroke1Hover: @surface2; - --colorNeutralForeground1Hover: @text; - --colorNeutralStrokeAccessible: @surface2; - --colorNeutralBackground1Hover: @surface1; - --colorNeutralBackground3Hover: @surface0; - --colorNeutralForegroundOnBrand: @base; - --colorNeutralBackground1Selected: @surface1; - } - - .o365sx-navbar, - .o365cs-base .o365sx-button, - [data-unique-id="GoPremiumButton"], - [data-unique-id="DocumentTitleButton"], - #SearchButton { - background-color: @base !important; - color: @text !important; - } - - .OfficeIconColors_mUpgradeProductGlyphColorless, - [aria-label="Saved to OneDrive"] > i:nth-child(1) > svg:nth-child(1), - #SearchButton > span:nth-child(1) > i:nth-child(1), - ._3_LjxRBZZiG458goXcTPLs.o365sx-neutral-dark-font, - ._3eLVxYuaVkSqw02CcIH8ec.o365sx-neutral-dark-font.o365sx-neutral-lighter-hover-background, - span.ms-Icon--WaffleOffice365._2hFKF2Ng35BcYrXwyNH86a { - fill: @text !important; - color: @text !important; - } - - #RibbonContainer > div:nth-child(1) > div:nth-child(2) > div:nth-child(1), - #RibbonContainer > div:nth-child(1) > div:nth-child(2) > div:nth-child(2), - #RibbonTopBarContainer { - background-color: @base !important; - } - - #tablist > div:nth-child(1) { - > div > div:nth-child(1) > button:nth-child(1) { - color: @text !important; - } - } - - #Home-tabpanel, - #Home-tabpanel > div:nth-child(2), - #appLauncherTop, - #appLauncherMainView, - #ContextMenu-ContextMenu { - background-color: @surface0 !important; - } - - #ShareMenu { - background-color: @accent-color; - color: @base; - } - - #Floatie-FontPicker-Floatie > div:nth-child(1), - #Floatie-FontSize-Floatie > div:nth-child(2) { - background-color: @base; - } - - #Floatie-FontPicker-Floatie > div:nth-child(1) > input:nth-child(1), - #Floatie-FontSize-Floatie-input { - color: @text; - } - - #Floatie-FontPicker-Floatie > div:nth-child(1) { - border-color: 1px solid @surface2; - } - - #Floatie-FontSize-Floatiewrapper { - border-color: @surface2; - } - - [data-unique-id="ReactTabbedPanelMenuContainer"] > div:nth-child(1) { - background-color: @base !important; - } - - #TellMe-Menu > div:nth-child(1) { - background-color: @surface0 !important; - > ul:nth-child(1) > li, - ul:nth-child(1) > li:nth-child(2) { - div:nth-child(1) > ul:nth-child(1) { - > li { - background-color: @surface0 !important; - > button:nth-child(1) { - color: @text; - &:hover { - background-color: @surface1 !important; - } - } - } - } - } - } - - ._1acxHZf6WaSGxss7AMw7aZ.o365sx-neutral-lighter-hover-background:hover, - ._3eLVxYuaVkSqw02CcIH8ec.o365sx-neutral-dark-font.o365sx-neutral-lighter-hover-background:hover, - .ribbon-bottom-bar-divider, - .divider-745, - .divider-766 { - background-color: @surface1 !important; - } - - #WACViewPanel { - background-color: @mantle !important; - } - - .Page { - background-color: @base !important; - border-color: @surface1 !important; - } - - .Paragraph, - #TellMe-Menusection-0-title > div:nth-child(1) > span:nth-child(2), - #TellMe-Menusection-1-title > div:nth-child(1) > span:nth-child(2) { - color: @text !important; - } - - .PageAdornmentHeaderLabelThemed, - .PageAdornmentFooterLabelThemed { - background-color: @base !important; - border-color: @text !important; - color: @subtext0; - } - - [id="WACStatusBarContainer"] - > div:nth-child(1) - > div:nth-child(1) - > div:nth-child(1) - > div:nth-child(1) - > div:nth-child(1) - > div:nth-child(1) - > div:nth-child(1) - > div:nth-child(1) - > div:nth-child(1) - > div:nth-child(1) { - div:nth-child(1), - div:nth-child(3) { - > button, - div:nth-child(2) > div:nth-child(1) { - &:hover { - background-color: @surface1 !important; - } - } - } - div:nth-child(3) - > div:nth-child(2) - > div:nth-child(1) - > div:nth-child(2) - > div:nth-child(1) { - > div:nth-child(1) > span:nth-child(1) { - background: @accent-color !important; - } - } - div:nth-child(1) { - > span:nth-child(1) { - background: @subtext0 !important; - } - > span:nth-child(3) { - background: @subtext0 !important; - } - > span:nth-child(4) { - background: @subtext0 !important; - } - } - } - - #ReactFloatie > div:nth-child(1) { - background: @surface0 !important; - } - - #documentTitle - > span:nth-child(1) - > div:nth-child(2) - > i:nth-child(1) - > svg:nth-child(1) { - fill: @text; - } - - #ProgressBar { - background-color: @surface0; - &:hover { - background-color: @surface1; - } - > div:nth-child(2) { - background-color: @surface2 !important; - > div:nth-child(1) { - background: @accent-color; - } - } - } - - #ProgressBar > div:nth-child(3) { - > span:nth-child(1) { - color: @text; - } - > span:nth-child(2) { - color: @accent-color; - } - > span:nth-child(3) { - color: @text; - } - } - - #AppBrand > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) { - &:hover { - background-color: @surface0; - } - } - - #appLauncherTop > div:nth-child(1) { - > div:nth-child(1) > button:nth-child(1) { - &:hover { - background-color: @surface1; - } - } - > a:nth-child(2) { - color: @accent-color; - } - } - - #allAppsLink { - color: @accent-color; - } - - #ProgressCardScore { - > div:nth-child(1) { - color: @accent-color; - } - > div:nth-child(2) { - color: @accent-color; - } - } - - #WACStatusBarContainer - > div:nth-child(1) - > div:nth-child(1) - > div:nth-child(1) - > div:nth-child(1) - > div:nth-child(1) - > div:nth-child(1) - > div:nth-child(1) { - background-color: @surface0; - border-top-color: @surface1; - > div:nth-child(1) - > div:nth-child(1) - > div:nth-child(1) - > div:nth-child(1) { - > div:nth-child(1) > button, - div:nth-child(3) > button { - color: @subtext0 !important; - } - } - } - - [data-unique-id="TellMeControl"] { - background: @surface0 !important; - > div:nth-child(2) > label:nth-child(1), - [data-icon-name="Search"] { - color: @subtext0 !important; - } - } - - #ReactTabbedPanelMenuPageContainer { - background-color: @surface0 !important; - } - - #UploadDocumentFromHomeTab, - #pageSection2CompoundButtonSectionProps - > div:nth-child(2) - > div:nth-child(1) - > div:nth-child(1) - > div:nth-child(1) - > button { - background-color: @surface0 !important; - &:hover { - background-color: @surface1 !important; - } - } - - #MultilineRibbon-RibbonModeToggleDropdown, - #FarPeripheralControls-ModeSwitcherDropdown, - #MultilineRibbon-RibbonModeToggleDropdownsection-0-title, - #MultilineRibbon-RibbonModeToggleDropdownsection-1-title { - background-color: @surface0 !important; - > div:nth-child(1) > span:nth-child(2) { - color: @text !important; - } - } - - .PageAdornmentNumberLabel, - .FileMenuButtonSecondaryText, - #New, - #Open, - #Recent { - color: @subtext0 !important; - } - - #Clipboard_MLR-label, - #Font_MLR-label, - #Paragraph_MLR-label, - #Styles-label, - #Editing-label, - #Dictation-label, - #GetAddins-label, - #Editor-label { - color: @subtext0 !important; - } - - span.NormalTextRun, - .FileMenuButtonPrimaryText, - [class="NewDocumentTemplateLabel"] { - color: @text !important; - } - - svg { - path.OfficeIconColors_m22 { - fill: @text; - } - path.OfficeIconColors_m24, - path.OfficeIconColors_m25, - path.OfficeIconColors_m26, - path.OfficeIconColors_m2262 { - fill: @accent-color; - } - path.OfficeIconColors_m27 { - fill: @green; - } - path.OfficeIconColors_m211 { - fill: @yellow; - } - path.OfficeIconColors_m212 { - fill: @peach; - } - path.OfficeIconColors_m220, - path.OfficeIconColors_m221 { - fill: @mauve; - } - path.OfficeIconColors_m213 { - fill: @red; - } - path.OfficeIconColors_m229 { - fill: @red; - } - path.OfficeIconColors_m295 { - fill: @blue; - } - path.OfficeIconColors_m2131 { - fill: @green; - } - path.OfficeIconColors_m2227 { - fill: @peach; - } - path.OfficeIconColors_m2251 { - fill: @text; - } - } - } - - .UxDarkMode { - #catppuccin(@darkFlavor, @accentColor); - } - #catppuccin(@lightFlavor, @accentColor); -} - -/* prettier-ignore */ -@catppuccin: { - @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; - @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; - @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; - @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; -} - -// vim:ft=less +==/UserStyle== */ \ No newline at end of file diff --git a/styles/microsoft-word/catppuccin.user.less b/styles/microsoft-word/catppuccin.user.less new file mode 100644 index 0000000000..b2044f3b56 --- /dev/null +++ b/styles/microsoft-word/catppuccin.user.less @@ -0,0 +1,439 @@ +/* ==UserStyle== +@name Microsoft Word Catppuccin +@namespace github.com/catppuccin/userstyles/styles/microsoft-word +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/microsoft-word +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/microsoft-word/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amicrosoft-word +@description Soothing pastel theme for Microsoft Word +@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("live.com") { + #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; + } + } + + .fui-FluentProvider2, + .fui-FluentProvider86, + .fui-FluentProvider102 { + --colorNeutralStroke1: @surface1; + --colorBrandForeground1: @accent-color; + --colorNeutralForeground1: @text; + --colorNeutralBackground1: @surface0; + --colorNeutralForeground2: @text; + --colorNeutralBackground3: @base; + --colorNeutralStroke1Hover: @surface2; + --colorNeutralForeground1Hover: @text; + --colorNeutralStrokeAccessible: @surface2; + --colorNeutralBackground1Hover: @surface1; + --colorNeutralBackground3Hover: @surface0; + --colorNeutralForegroundOnBrand: @base; + --colorNeutralBackground1Selected: @surface1; + } + + .o365sx-navbar, + .o365cs-base .o365sx-button, + [data-unique-id="GoPremiumButton"], + [data-unique-id="DocumentTitleButton"], + #SearchButton { + background-color: @base !important; + color: @text !important; + } + + .OfficeIconColors_mUpgradeProductGlyphColorless, + [aria-label="Saved to OneDrive"] > i:nth-child(1) > svg:nth-child(1), + #SearchButton > span:nth-child(1) > i:nth-child(1), + ._3_LjxRBZZiG458goXcTPLs.o365sx-neutral-dark-font, + ._3eLVxYuaVkSqw02CcIH8ec.o365sx-neutral-dark-font.o365sx-neutral-lighter-hover-background, + span.ms-Icon--WaffleOffice365._2hFKF2Ng35BcYrXwyNH86a { + fill: @text !important; + color: @text !important; + } + + #RibbonContainer > div:nth-child(1) > div:nth-child(2) > div:nth-child(1), + #RibbonContainer > div:nth-child(1) > div:nth-child(2) > div:nth-child(2), + #RibbonTopBarContainer { + background-color: @base !important; + } + + #tablist > div:nth-child(1) { + > div > div:nth-child(1) > button:nth-child(1) { + color: @text !important; + } + } + + #Home-tabpanel, + #Home-tabpanel > div:nth-child(2), + #appLauncherTop, + #appLauncherMainView, + #ContextMenu-ContextMenu { + background-color: @surface0 !important; + } + + #ShareMenu { + background-color: @accent-color; + color: @base; + } + + #Floatie-FontPicker-Floatie > div:nth-child(1), + #Floatie-FontSize-Floatie > div:nth-child(2) { + background-color: @base; + } + + #Floatie-FontPicker-Floatie > div:nth-child(1) > input:nth-child(1), + #Floatie-FontSize-Floatie-input { + color: @text; + } + + #Floatie-FontPicker-Floatie > div:nth-child(1) { + border-color: 1px solid @surface2; + } + + #Floatie-FontSize-Floatiewrapper { + border-color: @surface2; + } + + [data-unique-id="ReactTabbedPanelMenuContainer"] > div:nth-child(1) { + background-color: @base !important; + } + + #TellMe-Menu > div:nth-child(1) { + background-color: @surface0 !important; + > ul:nth-child(1) > li, + ul:nth-child(1) > li:nth-child(2) { + div:nth-child(1) > ul:nth-child(1) { + > li { + background-color: @surface0 !important; + > button:nth-child(1) { + color: @text; + &:hover { + background-color: @surface1 !important; + } + } + } + } + } + } + + ._1acxHZf6WaSGxss7AMw7aZ.o365sx-neutral-lighter-hover-background:hover, + ._3eLVxYuaVkSqw02CcIH8ec.o365sx-neutral-dark-font.o365sx-neutral-lighter-hover-background:hover, + .ribbon-bottom-bar-divider, + .divider-745, + .divider-766 { + background-color: @surface1 !important; + } + + #WACViewPanel { + background-color: @mantle !important; + } + + .Page { + background-color: @base !important; + border-color: @surface1 !important; + } + + .Paragraph, + #TellMe-Menusection-0-title > div:nth-child(1) > span:nth-child(2), + #TellMe-Menusection-1-title > div:nth-child(1) > span:nth-child(2) { + color: @text !important; + } + + .PageAdornmentHeaderLabelThemed, + .PageAdornmentFooterLabelThemed { + background-color: @base !important; + border-color: @text !important; + color: @subtext0; + } + + [id="WACStatusBarContainer"] + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) { + div:nth-child(1), + div:nth-child(3) { + > button, + div:nth-child(2) > div:nth-child(1) { + &:hover { + background-color: @surface1 !important; + } + } + } + div:nth-child(3) + > div:nth-child(2) + > div:nth-child(1) + > div:nth-child(2) + > div:nth-child(1) { + > div:nth-child(1) > span:nth-child(1) { + background: @accent-color !important; + } + } + div:nth-child(1) { + > span:nth-child(1) { + background: @subtext0 !important; + } + > span:nth-child(3) { + background: @subtext0 !important; + } + > span:nth-child(4) { + background: @subtext0 !important; + } + } + } + + #ReactFloatie > div:nth-child(1) { + background: @surface0 !important; + } + + #documentTitle + > span:nth-child(1) + > div:nth-child(2) + > i:nth-child(1) + > svg:nth-child(1) { + fill: @text; + } + + #ProgressBar { + background-color: @surface0; + &:hover { + background-color: @surface1; + } + > div:nth-child(2) { + background-color: @surface2 !important; + > div:nth-child(1) { + background: @accent-color; + } + } + } + + #ProgressBar > div:nth-child(3) { + > span:nth-child(1) { + color: @text; + } + > span:nth-child(2) { + color: @accent-color; + } + > span:nth-child(3) { + color: @text; + } + } + + #AppBrand > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) { + &:hover { + background-color: @surface0; + } + } + + #appLauncherTop > div:nth-child(1) { + > div:nth-child(1) > button:nth-child(1) { + &:hover { + background-color: @surface1; + } + } + > a:nth-child(2) { + color: @accent-color; + } + } + + #allAppsLink { + color: @accent-color; + } + + #ProgressCardScore { + > div:nth-child(1) { + color: @accent-color; + } + > div:nth-child(2) { + color: @accent-color; + } + } + + #WACStatusBarContainer + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) { + background-color: @surface0; + border-top-color: @surface1; + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) { + > div:nth-child(1) > button, + div:nth-child(3) > button { + color: @subtext0 !important; + } + } + } + + [data-unique-id="TellMeControl"] { + background: @surface0 !important; + > div:nth-child(2) > label:nth-child(1), + [data-icon-name="Search"] { + color: @subtext0 !important; + } + } + + #ReactTabbedPanelMenuPageContainer { + background-color: @surface0 !important; + } + + #UploadDocumentFromHomeTab, + #pageSection2CompoundButtonSectionProps + > div:nth-child(2) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > button { + background-color: @surface0 !important; + &:hover { + background-color: @surface1 !important; + } + } + + #MultilineRibbon-RibbonModeToggleDropdown, + #FarPeripheralControls-ModeSwitcherDropdown, + #MultilineRibbon-RibbonModeToggleDropdownsection-0-title, + #MultilineRibbon-RibbonModeToggleDropdownsection-1-title { + background-color: @surface0 !important; + > div:nth-child(1) > span:nth-child(2) { + color: @text !important; + } + } + + .PageAdornmentNumberLabel, + .FileMenuButtonSecondaryText, + #New, + #Open, + #Recent { + color: @subtext0 !important; + } + + #Clipboard_MLR-label, + #Font_MLR-label, + #Paragraph_MLR-label, + #Styles-label, + #Editing-label, + #Dictation-label, + #GetAddins-label, + #Editor-label { + color: @subtext0 !important; + } + + span.NormalTextRun, + .FileMenuButtonPrimaryText, + [class="NewDocumentTemplateLabel"] { + color: @text !important; + } + + svg { + path.OfficeIconColors_m22 { + fill: @text; + } + path.OfficeIconColors_m24, + path.OfficeIconColors_m25, + path.OfficeIconColors_m26, + path.OfficeIconColors_m2262 { + fill: @accent-color; + } + path.OfficeIconColors_m27 { + fill: @green; + } + path.OfficeIconColors_m211 { + fill: @yellow; + } + path.OfficeIconColors_m212 { + fill: @peach; + } + path.OfficeIconColors_m220, + path.OfficeIconColors_m221 { + fill: @mauve; + } + path.OfficeIconColors_m213 { + fill: @red; + } + path.OfficeIconColors_m229 { + fill: @red; + } + path.OfficeIconColors_m295 { + fill: @blue; + } + path.OfficeIconColors_m2131 { + fill: @green; + } + path.OfficeIconColors_m2227 { + fill: @peach; + } + path.OfficeIconColors_m2251 { + fill: @text; + } + } + } + + .UxDarkMode { + #catppuccin(@darkFlavor, @accentColor); + } + #catppuccin(@lightFlavor, @accentColor); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/migadu-webmail/catppuccin.user.css b/styles/migadu-webmail/catppuccin.user.css index 611ebb2920..533c67dd5b 100644 --- a/styles/migadu-webmail/catppuccin.user.css +++ b/styles/migadu-webmail/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Migadu Webmail Catppuccin +@name Migadu Webmail Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/migadu-webmail @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/migadu-webmail -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/migadu-webmail/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/migadu-webmail/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amigadu-webmail @description Soothing pastel theme for Migadu Webmail @author Catppuccin @@ -15,482 +15,4 @@ @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 checkbox hideProfilePictures "Hide Profile Pictures" 0 -==/UserStyle== */ - -@-moz-document domain('webmail.migadu.com') { - @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]; - - @orange: mix(@peach, @yellow); - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - --main-color: @text; - --main-bg-color: @base; - --border-color: @surface0; - --dropdown-menu-color: @text; - --dropdown-menu-bg-color: @base; - --dropdown-menu-hover-bg-color: @surface1; - --dropdown-menu-hover-color: @text; - --dropdown-menu-disabled-color: @subtext0; - --dropdown-menu-border-clr: @surface0; - --folders-color: @text; - --folders-disabled-color: @surface2; - --folders-selected-color: @blue; - --folders-selected-bg-color: fade(@blue, 10%); - --folders-focused-color: @blue; - --folders-hover-color: @text; - --folders-hover-bg-color: @base; - --folders-drop-color: @text; - --settings-menu-color: @text; - --settings-menu-selected-color: @blue; - --settings-menu-selected-bg-color: fade(@blue, 10%); - --settings-menu-hover-color: @text; - --settings-menu-hover-bg-color: @base; - --message-list-toolbar-bg-color: @overlay0; - --panel-bg-clr: @base; - --message-header-bg-clr: @mantle; - --hr-color: @surface0; - --dialog-bg-clr: @base; - --dialog-clr: @text; - --tr-hover-bg-clr: @crust; - --loading-color: @text; - --login-color: @text; - --login-bg-color: @crust; - --tab-hover-border-clr: @surface0; - --tab-active-bg-clr: @crust; - --tr-odd-bg-clr: @mantle; - - /* Login page */ - .LoginView .btn, - .LoginView input { - border-color: @surface0; - } - .LoginView input:focus, - .LoginView input:hover { - border-color: @surface1; - } - - /* Inbox */ - .messageItemHeader, - .bodySubHeader, - .thm-message-list-top-toolbar, - .thm-message-list-bottom-toolbar { - background: @mantle !important; - } - - /* Buttons */ - --btn-clr: @text; - --btn-border-clr: @overlay0; - .btn [class^="icon-"] { - color: @text; - } - .btn.btn-success { - &, - [class^="icon-"] { - color: @green !important; - } - background-color: fade(@green, 20%); - &:hover, - &:active { - background-color: fade(@green, 40%); - } - } - .btn.btn-warning { - &, - [class^="icon-"] { - color: @yellow !important; - } - background-color: fade(@yellow, 20%); - &:hover, - &:active { - background-color: fade(@yellow, 40%); - } - } - .btn.btn-danger { - &, - [class^="icon-"] { - color: @red !important; - } - background-color: fade(@red, 20%); - &:hover, - &:active { - background-color: fade(@red, 40%); - } - } - .btn.disabled, - .btn.disabled.fontastic, - .btn.disabled .fontastic { - color: @surface0 !important; - } - .btn, - .btn.disabled, - .btn[disabled], - .btn.disabled:hover, - .btn[disabled]:hover { - border-color: @surface0 !important; - text-shadow: none !important; - background-color: @base; - } - .btn:hover { - background-color: @mantle; - } - - /* Links */ - - --link-color: @blue; - #messageItem .b-text-part a:visited { - color: @mauve; - } - - /* Inputs */ - - --input-bg-clr: @base; - --input-border-clr: @surface0; - --input-focus-border-clr: @overlay0; - --input-clr: @subtext1; - - .select, - select { - @svg: escape( - '▾' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .e-checkbox.material-design input:checked + div { - border-color: darken(@green, 10%); - } - - /* stylelint-disable property-disallowed-list */ - @keyframes checkmark-to-box { - 0% { - top: -1px; - left: 5px; - width: 10px; - height: 18px; - border: 2px solid darken(@green, 10%); - border-width: 0 2px 2px 0; - transform: rotate(45deg); - } - - 50% { - top: 13px; - left: 5px; - width: 4px; - height: 4px; - transform: rotate(45deg); - } - - 100% { - top: 0; - left: 0; - width: 18px; - height: 18px; - border: 2px solid @overlay0; - transform: rotate(0); - } - } - - @keyframes box-to-checkmark { - 0% { - top: 0; - left: 0; - width: 18px; - height: 18px; - border: 2px solid @overlay0; - transform: rotate(0); - } - - 50% { - top: 13px; - left: 5px; - width: 4px; - height: 4px; - transform: rotate(45deg); - } - - 100% { - top: -1px; - left: 5px; - width: 10px; - height: 18px; - border: 2px solid darken(@green, 10%); - border-width: 0 2px 2px 0; - transform: rotate(45deg); - } - } - /* stylelint-enable property-disallowed-list */ - - /* Nothing selected */ - .messageView .b-message-view-desc, - #V-PopupsContacts .b-view-content .b-contact-view-desc { - color: @overlay0; - } - - /* Loading messages */ - .messageList .b-content { - .listDragOver, - .listEmptyMessage, - .listError, - .listLoading { - color: @overlay0; - } - - .listError { - color: @red; - } - } - #messageItem .loading, - #V-PopupsContacts .b-list-content .listEmptyList, - #V-PopupsContacts .b-list-content .listEmptyListLoading, - #V-PopupsContacts .b-list-content .listEmptySearchList { - color: @overlay0; - } - - .icon-spinner { - border-color: @surface1; - border-top-color: @text; - } - .iconcolor-green { - color: @green; - } - .iconcolor-red { - color: @red; - } - .b-folders .is-flagged .flag-icon::after, - .messageListItem.hasFlaggedSubMessage .flagParent::after, - .messageListItem.msgflag-\\flagged .flagParent::after { - color: @orange; - } - - /* Tags */ - - .msgflag-\$important .checkboxMessage { - background-color: @red; - } - - .msgflag-\$important.focused { - background-color: fade(@red, 30%); - } - - .msgflag-\$important:not(.focused) { - color: @red; - } - - .msgflag-\$todo .checkboxMessage { - background-color: @blue; - color: @text; - } - - .msgflag-\$todo.focused { - background-color: fade(@blue, 30%); - } - - .msgflag-\$todo:not(.focused) { - color: @blue; - } - - .msgflag-\$label5 .checkboxMessage { - background-color: darken(@pink, 10%); - color: @text; - } - - .msgflag-\$label4 .checkboxMessage { - background-color: @blue; - color: @text; - } - - .msgflag-\$label3 .checkboxMessage { - background-color: @green; - color: @text; - } - - .msgflag-\$label2 .checkboxMessage { - background-color: @orange; - color: @text; - } - - .msgflag-\$label1 .checkboxMessage { - background-color: @red; - color: @text; - } - - .msgflag-\$label5.focused { - background-color: fade(@pink, 30%); - } - - .msgflag-\$label4.focused { - background-color: fade(@blue, 30%); - } - - .msgflag-\$label3.focused { - background-color: fade(@green, 30%); - } - - .msgflag-\$label2.focused { - background-color: fade(mix(@red, @yellow), 30%); - } - - .msgflag-\$label1.focused { - background-color: fade(@red, 30%); - } - - .msgflag-\$label5:not(.focused) { - color: darken(@pink, 10%); - } - - .msgflag-\$label4:not(.focused) { - color: @blue; - } - - .msgflag-\$label3:not(.focused) { - color: @green; - } - - .msgflag-\$label2:not(.focused) { - color: @orange; - } - - .msgflag-\$label1:not(.focused) { - color: @red; - } - - .messageList .b-content .listSearchDesc { - border-bottom-color: @surface0; - } - - /* Profile pictures */ - img.fromPic when (@hideProfilePictures = 1) { - display: none; - } - - /* Settings */ - #V-Settings-Themes figure { - &.selected { - background-color: fade(@green, 40%); - border-color: @text; - } - &:hover { - border-color: @surface0; - } - } - - #V-PopupsContacts .e-contact-item, - .messageListItem { - &.focused { - border-left-color: @surface2; - background-color: @surface0; - } - - &.checked { - border-left-color: lighten(@accent-color, 10%); - } - - &.checked.focused, - &.selected { - border-left-color: @accent-color; - } - - &.selected { - background-color: fade(@accent-color, 30%); - } - } - - #V-PopupsContacts .e-contact-item { - border-left-color: @surface0; - } - - /* Send mail modal */ - .squire-toolbar, - #V-PopupsCompose .attachmentAreaParent { - border-color: @surface0; - } - #V-PopupsCompose header { - color: @text; - } - /* Minimize and close icons */ - #V-PopupsCompose header div.pull-right a.minimize-custom, - #V-PopupsCompose .close, - .close { - border-color: @text; - color: @text; - } - /* Email address field */ - .emailaddresses { - li[draggable] { - background-color: @mantle; - border-color: @surface0; - box-shadow: 0 1px 0 fade(@mantle, 75%) inset; - color: @text; - } - li a { - color: @surface0; - } - } - - /* Untheme message content */ - div:has(> .bodyText) { - color: #333; - background-color: #fff; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/migadu-webmail/catppuccin.user.less b/styles/migadu-webmail/catppuccin.user.less new file mode 100644 index 0000000000..82e1d6b23a --- /dev/null +++ b/styles/migadu-webmail/catppuccin.user.less @@ -0,0 +1,494 @@ +/* ==UserStyle== +@name Migadu Webmail Catppuccin +@namespace github.com/catppuccin/userstyles/styles/migadu-webmail +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/migadu-webmail +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/migadu-webmail/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amigadu-webmail +@description Soothing pastel theme for Migadu Webmail +@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"] + +@var checkbox hideProfilePictures "Hide Profile Pictures" 0 +==/UserStyle== */ + +@-moz-document domain("webmail.migadu.com") { + @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]; + + @orange: mix(@peach, @yellow); + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + --main-color: @text; + --main-bg-color: @base; + --border-color: @surface0; + --dropdown-menu-color: @text; + --dropdown-menu-bg-color: @base; + --dropdown-menu-hover-bg-color: @surface1; + --dropdown-menu-hover-color: @text; + --dropdown-menu-disabled-color: @subtext0; + --dropdown-menu-border-clr: @surface0; + --folders-color: @text; + --folders-disabled-color: @surface2; + --folders-selected-color: @blue; + --folders-selected-bg-color: fade(@blue, 10%); + --folders-focused-color: @blue; + --folders-hover-color: @text; + --folders-hover-bg-color: @base; + --folders-drop-color: @text; + --settings-menu-color: @text; + --settings-menu-selected-color: @blue; + --settings-menu-selected-bg-color: fade(@blue, 10%); + --settings-menu-hover-color: @text; + --settings-menu-hover-bg-color: @base; + --message-list-toolbar-bg-color: @overlay0; + --panel-bg-clr: @base; + --message-header-bg-clr: @mantle; + --hr-color: @surface0; + --dialog-bg-clr: @base; + --dialog-clr: @text; + --tr-hover-bg-clr: @crust; + --loading-color: @text; + --login-color: @text; + --login-bg-color: @crust; + --tab-hover-border-clr: @surface0; + --tab-active-bg-clr: @crust; + --tr-odd-bg-clr: @mantle; + + /* Login page */ + .LoginView .btn, + .LoginView input { + border-color: @surface0; + } + .LoginView input:focus, + .LoginView input:hover { + border-color: @surface1; + } + + /* Inbox */ + .messageItemHeader, + .bodySubHeader, + .thm-message-list-top-toolbar, + .thm-message-list-bottom-toolbar { + background: @mantle !important; + } + + /* Buttons */ + --btn-clr: @text; + --btn-border-clr: @overlay0; + .btn [class^="icon-"] { + color: @text; + } + .btn.btn-success { + &, + [class^="icon-"] { + color: @green !important; + } + background-color: fade(@green, 20%); + &:hover, + &:active { + background-color: fade(@green, 40%); + } + } + .btn.btn-warning { + &, + [class^="icon-"] { + color: @yellow !important; + } + background-color: fade(@yellow, 20%); + &:hover, + &:active { + background-color: fade(@yellow, 40%); + } + } + .btn.btn-danger { + &, + [class^="icon-"] { + color: @red !important; + } + background-color: fade(@red, 20%); + &:hover, + &:active { + background-color: fade(@red, 40%); + } + } + .btn.disabled, + .btn.disabled.fontastic, + .btn.disabled .fontastic { + color: @surface0 !important; + } + .btn, + .btn.disabled, + .btn[disabled], + .btn.disabled:hover, + .btn[disabled]:hover { + border-color: @surface0 !important; + text-shadow: none !important; + background-color: @base; + } + .btn:hover { + background-color: @mantle; + } + + /* Links */ + + --link-color: @blue; + #messageItem .b-text-part a:visited { + color: @mauve; + } + + /* Inputs */ + + --input-bg-clr: @base; + --input-border-clr: @surface0; + --input-focus-border-clr: @overlay0; + --input-clr: @subtext1; + + .select, + select { + @svg: escape( + '▾' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .e-checkbox.material-design input:checked + div { + border-color: darken(@green, 10%); + } + + /* stylelint-disable property-disallowed-list */ + @keyframes checkmark-to-box { + 0% { + top: -1px; + left: 5px; + width: 10px; + height: 18px; + border: 2px solid darken(@green, 10%); + border-width: 0 2px 2px 0; + transform: rotate(45deg); + } + + 50% { + top: 13px; + left: 5px; + width: 4px; + height: 4px; + transform: rotate(45deg); + } + + 100% { + top: 0; + left: 0; + width: 18px; + height: 18px; + border: 2px solid @overlay0; + transform: rotate(0); + } + } + + @keyframes box-to-checkmark { + 0% { + top: 0; + left: 0; + width: 18px; + height: 18px; + border: 2px solid @overlay0; + transform: rotate(0); + } + + 50% { + top: 13px; + left: 5px; + width: 4px; + height: 4px; + transform: rotate(45deg); + } + + 100% { + top: -1px; + left: 5px; + width: 10px; + height: 18px; + border: 2px solid darken(@green, 10%); + border-width: 0 2px 2px 0; + transform: rotate(45deg); + } + } + /* stylelint-enable property-disallowed-list */ + + /* Nothing selected */ + .messageView .b-message-view-desc, + #V-PopupsContacts .b-view-content .b-contact-view-desc { + color: @overlay0; + } + + /* Loading messages */ + .messageList .b-content { + .listDragOver, + .listEmptyMessage, + .listError, + .listLoading { + color: @overlay0; + } + + .listError { + color: @red; + } + } + #messageItem .loading, + #V-PopupsContacts .b-list-content .listEmptyList, + #V-PopupsContacts .b-list-content .listEmptyListLoading, + #V-PopupsContacts .b-list-content .listEmptySearchList { + color: @overlay0; + } + + .icon-spinner { + border-color: @surface1; + border-top-color: @text; + } + .iconcolor-green { + color: @green; + } + .iconcolor-red { + color: @red; + } + .b-folders .is-flagged .flag-icon::after, + .messageListItem.hasFlaggedSubMessage .flagParent::after, + .messageListItem.msgflag-\\flagged .flagParent::after { + color: @orange; + } + + /* Tags */ + + .msgflag-\$important .checkboxMessage { + background-color: @red; + } + + .msgflag-\$important.focused { + background-color: fade(@red, 30%); + } + + .msgflag-\$important:not(.focused) { + color: @red; + } + + .msgflag-\$todo .checkboxMessage { + background-color: @blue; + color: @text; + } + + .msgflag-\$todo.focused { + background-color: fade(@blue, 30%); + } + + .msgflag-\$todo:not(.focused) { + color: @blue; + } + + .msgflag-\$label5 .checkboxMessage { + background-color: darken(@pink, 10%); + color: @text; + } + + .msgflag-\$label4 .checkboxMessage { + background-color: @blue; + color: @text; + } + + .msgflag-\$label3 .checkboxMessage { + background-color: @green; + color: @text; + } + + .msgflag-\$label2 .checkboxMessage { + background-color: @orange; + color: @text; + } + + .msgflag-\$label1 .checkboxMessage { + background-color: @red; + color: @text; + } + + .msgflag-\$label5.focused { + background-color: fade(@pink, 30%); + } + + .msgflag-\$label4.focused { + background-color: fade(@blue, 30%); + } + + .msgflag-\$label3.focused { + background-color: fade(@green, 30%); + } + + .msgflag-\$label2.focused { + background-color: fade(mix(@red, @yellow), 30%); + } + + .msgflag-\$label1.focused { + background-color: fade(@red, 30%); + } + + .msgflag-\$label5:not(.focused) { + color: darken(@pink, 10%); + } + + .msgflag-\$label4:not(.focused) { + color: @blue; + } + + .msgflag-\$label3:not(.focused) { + color: @green; + } + + .msgflag-\$label2:not(.focused) { + color: @orange; + } + + .msgflag-\$label1:not(.focused) { + color: @red; + } + + .messageList .b-content .listSearchDesc { + border-bottom-color: @surface0; + } + + /* Profile pictures */ + img.fromPic when (@hideProfilePictures = 1) { + display: none; + } + + /* Settings */ + #V-Settings-Themes figure { + &.selected { + background-color: fade(@green, 40%); + border-color: @text; + } + &:hover { + border-color: @surface0; + } + } + + #V-PopupsContacts .e-contact-item, + .messageListItem { + &.focused { + border-left-color: @surface2; + background-color: @surface0; + } + + &.checked { + border-left-color: lighten(@accent-color, 10%); + } + + &.checked.focused, + &.selected { + border-left-color: @accent-color; + } + + &.selected { + background-color: fade(@accent-color, 30%); + } + } + + #V-PopupsContacts .e-contact-item { + border-left-color: @surface0; + } + + /* Send mail modal */ + .squire-toolbar, + #V-PopupsCompose .attachmentAreaParent { + border-color: @surface0; + } + #V-PopupsCompose header { + color: @text; + } + /* Minimize and close icons */ + #V-PopupsCompose header div.pull-right a.minimize-custom, + #V-PopupsCompose .close, + .close { + border-color: @text; + color: @text; + } + /* Email address field */ + .emailaddresses { + li[draggable] { + background-color: @mantle; + border-color: @surface0; + box-shadow: 0 1px 0 fade(@mantle, 75%) inset; + color: @text; + } + li a { + color: @surface0; + } + } + + /* Untheme message content */ + div:has(> .bodyText) { + color: #333; + background-color: #fff; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/minesweeper/catppuccin.user.css b/styles/minesweeper/catppuccin.user.css index 51217719a1..0524d24487 100644 --- a/styles/minesweeper/catppuccin.user.css +++ b/styles/minesweeper/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Minesweeper Online Catppuccin +@name Minesweeper Online Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/minesweeper @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/minesweeper -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/minesweeper/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/minesweeper/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aminesweeper @description Soothing pastel theme for Minesweeper Online @author Catppuccin @@ -13,500 +13,4 @@ @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('minesweeper.online') { - @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; - } - } - - --b0: @crust; - --b1: @base; - - body { - background-color: @crust; - } - - .navbar-desktop { - background-color: @base; - } - - .header { - margin-top: 0; - } - - .navbar-default { - background-color: @base; - } - - .navbar-default .navbar-brand, - .navbar-default .navbar-brand:hover, - .navbar-default .navbar-brand:focus, - .navbar-default .navbar-brand:focus:hover { - color: @text; - } - - .navbar-default .navbar-toggle { - border-color: @surface0; - background-color: @base; - &:hover { - border-color: @surface1; - background-color: @mantle; - } - } - - .navbar-default .navbar-toggle .icon-bar { - background-color: @text; - } - - .navbar-desktop, - .main-content { - box-shadow: @surface0 0 0 0 1px; - } - - hr, - .thumbnail, - .table-bordered { - border-color: @surface0 !important; - } - - .main-column { - box-shadow: @surface0 1px 0 0 0 inset; - } - - .main-content, - .thumbnail, - .table td { - background-color: @mantle; - } - - .homepage-level { - background-color: @mantle; - border-color: @surface0; - } - - a.homepage-level.active, - a.homepage-level:focus, - a.homepage-level:hover { - border-color: @accent-color; - } - - a, - a:hover, - .text-primary { - color: @accent-color; - } - - .text-success, - .level1-link, - .level1-link:hover, - .time-icon, - .end-icon, - .equipment-rarity-0 { - color: @green !important; - } - - .btn-success, - .btn-success:hover, - .btn-success:focus, - .btn-success:focus:hover { - color: @mantle; - background-color: @green; - border-color: @green; - } - - .btn-danger, - .btn-danger:hover, - .btn-danger:focus, - .btn-danger:focus:hover { - color: @mantle; - background-color: @red; - border-color: @red; - } - - code { - background-color: fade(@red, 12.5%); - } - - #premium_content > div:nth-child(21) { - > p:nth-child(3) > code:nth-child(1) { - color: @peach !important; - } - > p:nth-child(4) > code:nth-child(1) { - color: @blue !important; - } - > p:nth-child(5) > code:nth-child(1) { - color: @green !important; - } - } - - .equipment-item-rarity-0 { - border-color: @green; - background-color: fade(@green, 12.5%); - } - - .equipment-item-rarity-1 { - border-color: @blue; - background-color: fade(@blue, 12.5%); - } - - .level2-link, - .level2-link:hover, - .blue, - .ws-icon, - .equipment-rarity-1, - .equipment-rarity-1:active, - .equipment-rarity-1:hover, - .equipment-rarity-1:visited { - color: @blue !important; - } - - .equipment-rarity-2, - .equipment-rarity-2:active, - .equipment-rarity-2:hover, - .equipment-rarity-2:visited { - color: @mauve !important; - } - - .equipment-item-rarity-2 { - border-color: @mauve; - background-color: fade(@mauve, 12.5%); - } - - .equipment-rarity-3, - .equipment-rarity-3:active, - .equipment-rarity-3:hover, - .equipment-rarity-3:visited { - color: @peach !important; - } - - .equipment-item-rarity-3 { - border-color: @peach; - background-color: fade(@peach, 12.5%); - } - - .equipment-item-rarity-4, - .equipment-item-rarity-5 { - border-color: @red; - background-color: fade(@red, 12.5%); - } - - .eff-icon, - .quality-icon { - color: @peach; - } - - .text-danger, - .level3-link, - .level3-link:hover, - .eff-icon.eff-icon.level3, - .list-icon.level3, - .nf-icon.level3, - .time-icon.level3, - .wins-icon.level3, - .ws-icon.ws3, - .mastery-icon.mastery3, - .wins-icon, - .end-icon.end3, - .mastery-icon, - .equipment-rarity-4, - .equipment-rarity-4:active, - .equipment-rarity-4:hover, - .equipment-rarity-4:visited, - .equipment-rarity-5, - .equipment-rarity-5:active, - .equipment-rarity-5:hover, - .equipment-rarity-5:visited { - color: @red !important; - } - - body, - .main-page h1, - .main-page h2, - .main-page h3, - .sidebar-nav ul li a, - .help-menu-item > strong, - .help-content h3, - .sidebar-nav ul li, - a.active, - .brand-link .brand-text, - .black-link, - .black-link:active, - .black-link:hover, - .black-link:visited, - .events-title { - color: @text !important; - } - - .btn-primary, - .btn-primary:hover, - .btn-primary:active:hover, - .btn-primary:active { - border-color: @accent-color; - background-color: @accent-color; - color: @mantle; - } - - .premium-product-descr { - color: fade(@yellow, 60%); - } - - .shop-strike-danger { - background-image: linear-gradient( - rgba(0, 0, 0, 0) 8px, - @red 8px, - @red 10px, - rgba(0, 0, 0, 0) 10px - ); - } - - .gray, - .mediumgray, - .mediumgray:hover, - .dropdown-menu > li > a, - .dropdown-menu > li > a:hover, - .score-icon.icon-silver, - .gray:hover, - .icon-mobile { - color: @subtext0; - } - - .dropdown-menu > li > a:focus, - .dropdown-menu > li > a:hover { - background-color: @base !important; - } - - .nav-tabs > li.active > a, - .nav-tabs > li.active > a:focus, - .nav-tabs > li.active > a:hover, - .nav-tabs > li > a:hover { - border-color: @surface0; - background-color: @base; - color: @text; - } - - .chat-messages { - border-color: @surface0; - } - - .btn-default, - .form-control { - color: @text; - background-color: @mantle; - border-color: @surface0; - &:hover { - color: @text; - background-color: @base; - border-color: @surface1; - } - } - - .btn-info, - .btn-info:hover, - .btn-info:active:hover, - .btn-info:active { - border-color: @blue; - background-color: @blue; - color: @mantle; - } - - .ticket.icon-filter { - color: @sky; - } - - td[class="text-nowrap"], - .result-block, - .dropdown-menu, - td[class=""], - .table-bordered > tbody > tr > td { - background-color: @mantle; - border-color: @surface0 !important; - } - - th[class="homepage-best-players-th"], - th[colspan="1"], - th[class="text-nowrap"], - th[class="text-nowrap quests-column-last"], - .help-table > thead:nth-child(1) > tr:nth-child(1) > th, - table.table:nth-child(3) > tbody:nth-child(1) > tr:nth-child(1) > th, - table.table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > th, - th[colspan="3"] { - border-color: @surface0 !important; - background-color: @base; - } - - .pagination > li > a, - .pagination > li > span { - background-color: @mantle; - border-color: @surface0 !important; - color: @accent-color; - } - - .pagination > .disabled > a { - background-color: @mantle; - border-color: @surface0 !important; - color: @subtext0; - } - - .pagination > li > a:hover { - background-color: @base; - color: @accent-color; - } - - .pagination-sm > li:first-child > a, - .pagination-sm > li:first-child > a:hover, - .pagination > .disabled > a:hover { - background-color: @crust; - color: @subtext0; - } - - .pagination > .active > a, - .pagination > .active > a:hover { - background-color: @accent-color; - color: @mantle; - } - - .open > .dropdown-toggle.btn-default, - .open > .dropdown-toggle.btn-default:focus, - .open > .dropdown-toggle.btn-default:hover, - .btn-default:active:hover { - background-color: @surface0; - border-color: @surface1 !important; - color: @text; - } - - .footer-link, - .season { - color: @subtext0 !important; - } - - .score-icon { - color: @yellow; - } - - .dotted-underline, - .dotted-underline:hover { - border-bottom-color: @subtext0; - } - - .ws-icon.ws11 { - color: @green; - } - - .brand-logo { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .exp-icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .coin-icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .diff-icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } - - .arena-icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .event-item-icon.icon-filter { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .quest-icon { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .arena-coin-icon.icon-filter { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/minesweeper/catppuccin.user.less b/styles/minesweeper/catppuccin.user.less new file mode 100644 index 0000000000..b78fd49291 --- /dev/null +++ b/styles/minesweeper/catppuccin.user.less @@ -0,0 +1,510 @@ +/* ==UserStyle== +@name Minesweeper Online Catppuccin +@namespace github.com/catppuccin/userstyles/styles/minesweeper +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/minesweeper +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/minesweeper/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aminesweeper +@description Soothing pastel theme for Minesweeper Online +@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("minesweeper.online") { + @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; + } + } + + --b0: @crust; + --b1: @base; + + body { + background-color: @crust; + } + + .navbar-desktop { + background-color: @base; + } + + .header { + margin-top: 0; + } + + .navbar-default { + background-color: @base; + } + + .navbar-default .navbar-brand, + .navbar-default .navbar-brand:hover, + .navbar-default .navbar-brand:focus, + .navbar-default .navbar-brand:focus:hover { + color: @text; + } + + .navbar-default .navbar-toggle { + border-color: @surface0; + background-color: @base; + &:hover { + border-color: @surface1; + background-color: @mantle; + } + } + + .navbar-default .navbar-toggle .icon-bar { + background-color: @text; + } + + .navbar-desktop, + .main-content { + box-shadow: @surface0 0 0 0 1px; + } + + hr, + .thumbnail, + .table-bordered { + border-color: @surface0 !important; + } + + .main-column { + box-shadow: @surface0 1px 0 0 0 inset; + } + + .main-content, + .thumbnail, + .table td { + background-color: @mantle; + } + + .homepage-level { + background-color: @mantle; + border-color: @surface0; + } + + a.homepage-level.active, + a.homepage-level:focus, + a.homepage-level:hover { + border-color: @accent-color; + } + + a, + a:hover, + .text-primary { + color: @accent-color; + } + + .text-success, + .level1-link, + .level1-link:hover, + .time-icon, + .end-icon, + .equipment-rarity-0 { + color: @green !important; + } + + .btn-success, + .btn-success:hover, + .btn-success:focus, + .btn-success:focus:hover { + color: @mantle; + background-color: @green; + border-color: @green; + } + + .btn-danger, + .btn-danger:hover, + .btn-danger:focus, + .btn-danger:focus:hover { + color: @mantle; + background-color: @red; + border-color: @red; + } + + code { + background-color: fade(@red, 12.5%); + } + + #premium_content > div:nth-child(21) { + > p:nth-child(3) > code:nth-child(1) { + color: @peach !important; + } + > p:nth-child(4) > code:nth-child(1) { + color: @blue !important; + } + > p:nth-child(5) > code:nth-child(1) { + color: @green !important; + } + } + + .equipment-item-rarity-0 { + border-color: @green; + background-color: fade(@green, 12.5%); + } + + .equipment-item-rarity-1 { + border-color: @blue; + background-color: fade(@blue, 12.5%); + } + + .level2-link, + .level2-link:hover, + .blue, + .ws-icon, + .equipment-rarity-1, + .equipment-rarity-1:active, + .equipment-rarity-1:hover, + .equipment-rarity-1:visited { + color: @blue !important; + } + + .equipment-rarity-2, + .equipment-rarity-2:active, + .equipment-rarity-2:hover, + .equipment-rarity-2:visited { + color: @mauve !important; + } + + .equipment-item-rarity-2 { + border-color: @mauve; + background-color: fade(@mauve, 12.5%); + } + + .equipment-rarity-3, + .equipment-rarity-3:active, + .equipment-rarity-3:hover, + .equipment-rarity-3:visited { + color: @peach !important; + } + + .equipment-item-rarity-3 { + border-color: @peach; + background-color: fade(@peach, 12.5%); + } + + .equipment-item-rarity-4, + .equipment-item-rarity-5 { + border-color: @red; + background-color: fade(@red, 12.5%); + } + + .eff-icon, + .quality-icon { + color: @peach; + } + + .text-danger, + .level3-link, + .level3-link:hover, + .eff-icon.eff-icon.level3, + .list-icon.level3, + .nf-icon.level3, + .time-icon.level3, + .wins-icon.level3, + .ws-icon.ws3, + .mastery-icon.mastery3, + .wins-icon, + .end-icon.end3, + .mastery-icon, + .equipment-rarity-4, + .equipment-rarity-4:active, + .equipment-rarity-4:hover, + .equipment-rarity-4:visited, + .equipment-rarity-5, + .equipment-rarity-5:active, + .equipment-rarity-5:hover, + .equipment-rarity-5:visited { + color: @red !important; + } + + body, + .main-page h1, + .main-page h2, + .main-page h3, + .sidebar-nav ul li a, + .help-menu-item > strong, + .help-content h3, + .sidebar-nav ul li, + a.active, + .brand-link .brand-text, + .black-link, + .black-link:active, + .black-link:hover, + .black-link:visited, + .events-title { + color: @text !important; + } + + .btn-primary, + .btn-primary:hover, + .btn-primary:active:hover, + .btn-primary:active { + border-color: @accent-color; + background-color: @accent-color; + color: @mantle; + } + + .premium-product-descr { + color: fade(@yellow, 60%); + } + + .shop-strike-danger { + background-image: linear-gradient( + rgba(0, 0, 0, 0) 8px, + @red 8px, + @red 10px, + rgba(0, 0, 0, 0) 10px + ); + } + + .gray, + .mediumgray, + .mediumgray:hover, + .dropdown-menu > li > a, + .dropdown-menu > li > a:hover, + .score-icon.icon-silver, + .gray:hover, + .icon-mobile { + color: @subtext0; + } + + .dropdown-menu > li > a:focus, + .dropdown-menu > li > a:hover { + background-color: @base !important; + } + + .nav-tabs > li.active > a, + .nav-tabs > li.active > a:focus, + .nav-tabs > li.active > a:hover, + .nav-tabs > li > a:hover { + border-color: @surface0; + background-color: @base; + color: @text; + } + + .chat-messages { + border-color: @surface0; + } + + .btn-default, + .form-control { + color: @text; + background-color: @mantle; + border-color: @surface0; + &:hover { + color: @text; + background-color: @base; + border-color: @surface1; + } + } + + .btn-info, + .btn-info:hover, + .btn-info:active:hover, + .btn-info:active { + border-color: @blue; + background-color: @blue; + color: @mantle; + } + + .ticket.icon-filter { + color: @sky; + } + + td[class="text-nowrap"], + .result-block, + .dropdown-menu, + td[class=""], + .table-bordered > tbody > tr > td { + background-color: @mantle; + border-color: @surface0 !important; + } + + th[class="homepage-best-players-th"], + th[colspan="1"], + th[class="text-nowrap"], + th[class="text-nowrap quests-column-last"], + .help-table > thead:nth-child(1) > tr:nth-child(1) > th, + table.table:nth-child(3) > tbody:nth-child(1) > tr:nth-child(1) > th, + table.table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > th, + th[colspan="3"] { + border-color: @surface0 !important; + background-color: @base; + } + + .pagination > li > a, + .pagination > li > span { + background-color: @mantle; + border-color: @surface0 !important; + color: @accent-color; + } + + .pagination > .disabled > a { + background-color: @mantle; + border-color: @surface0 !important; + color: @subtext0; + } + + .pagination > li > a:hover { + background-color: @base; + color: @accent-color; + } + + .pagination-sm > li:first-child > a, + .pagination-sm > li:first-child > a:hover, + .pagination > .disabled > a:hover { + background-color: @crust; + color: @subtext0; + } + + .pagination > .active > a, + .pagination > .active > a:hover { + background-color: @accent-color; + color: @mantle; + } + + .open > .dropdown-toggle.btn-default, + .open > .dropdown-toggle.btn-default:focus, + .open > .dropdown-toggle.btn-default:hover, + .btn-default:active:hover { + background-color: @surface0; + border-color: @surface1 !important; + color: @text; + } + + .footer-link, + .season { + color: @subtext0 !important; + } + + .score-icon { + color: @yellow; + } + + .dotted-underline, + .dotted-underline:hover { + border-bottom-color: @subtext0; + } + + .ws-icon.ws11 { + color: @green; + } + + .brand-logo { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .exp-icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .coin-icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .diff-icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + + .arena-icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .event-item-icon.icon-filter { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .quest-icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .arena-coin-icon.icon-filter { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/modrinth/catppuccin.user.css b/styles/modrinth/catppuccin.user.css index 7b5cc48454..57dece9e94 100644 --- a/styles/modrinth/catppuccin.user.css +++ b/styles/modrinth/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Modrinth Catppuccin +@name Modrinth Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/modrinth @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/modrinth -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/modrinth/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/modrinth/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amodrinth @description Soothing pastel theme for Modrinth @author Catppuccin @@ -13,188 +13,4 @@ @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("modrinth.com") { - .light-mode { - #catppuccin(@lightFlavor, @accentColor); - } - - .dark-mode, - .oled-mode { - #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]; - - @shadow: if(@lookup = latte, #dbdfef, #010409); - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - * { - --text-color: @text; - --color-base: @text; - --color-bg: @crust; - --color-secondary: @subtext0; - --color-ad-raised: @surface2; - --color-ad: @surface1; - --color-ad-highlight: @teal; - --color-brand: @accent-color; - --color-brand-green: @green; - --color-button-bg-active: @overlay0; - --color-button-bg-hover: @surface1; - --color-button-bg: @surface0; - --color-button-text-hover: @text; - --color-button-text: @subtext1; - --color-button-text-active: @text; - --color-divider: @surface0; - --color-heading: @text; - --color-icon: @text; - --color-link-active: @teal; - --color-link-hover: @sky; - --color-link: @sapphire; - --color-raised-bg: @base; - --color-blue: @sapphire; - --color-special-blue: @sapphire; - --color-orange: @peach; - --color-special-orange: @peach; - --color-purple: @mauve; - --color-special-purple: @mauve; - --color-red: @red; - --color-gray: @subtext0; - --color-special-gray: @subtext0; - --color-green: @green; - --color-text: @subtext1; - --color-text-dark: @text; - --color-text-inactive: @overlay1; - --color-brand-highlight: @surface0; - --color-brand-inverted: @shadow; - --color-table-alternate-row: @crust; - --color-table-border: @overlay0; - --color-contrast: @text; - --color-accent-contrast: @mantle; - --color-brand-shadow: @accent-color; - --color-warning-banner-side: @red; - --color-warning-banner-bg: fade(@red, 10%); - --color-warning-banner-text: @text; - --color-platform-fabric: @pink; - --color-platform-quilt: @mauve; - --color-platform-forge: @blue; - --color-platform-neoforge: @peach; - --color-platform-liteloader: @sky; - --color-platform-bukkit: @peach; - --color-platform-bungeecord: @yellow; - --color-platform-folia: @green; - --color-platform-paper: @red; - --color-platform-purpur: @lavender; - --color-platform-spigot: @yellow; - --color-platform-velocity: @teal; - --color-platform-waterfall: @blue; - --color-platform-sponge: @yellow; - --color-button-border: fade(@crust, 20%); - --color-tooltip-bg: @surface1; - --color-tooltip-text: @subtext1; - --landing-green-label: @accent-color; - --landing-green-label-bg: fade(@accent-color, 10%); - --landing-blue-label: @blue; - --landing-color-heading: @text; - --landing-color-subheading: @subtext0; - --landing-border-color: @overlay0; - --landing-blue-label-bg: fade(@blue, 10%); - --landing-border-gradient: linear-gradient( - to bottom right, - @overlay0, - @surface2 - ); - } - // homepage - .blob-demonstration, - .blob-demonstration::after { - background: linear-gradient( - 0deg, - fade(@accent-color, 20%), - fade(@base, 10%) - ) !important; - } - .logo-banner path { - fill: @accent-color !important; - } - .logo-banner > svg > g > rect { - display: none; - } - - [tabindex="0"]:focus-visible, - a:focus-visible, - button:focus-visible { - outline-color: @accent-color; - } - - .BDVE3s9MFQttmbMUeYup-2 a b, - .BDVE3s9MFQttmbMUeYup-2 a strong { - color: @accent-color; - } - - // dropdown icon - .multiselect__select::before { - border-color: @text transparent transparent; - color: @text; - } - // header button hover - .btn-wrapper:hover { - a, - button { - --tw-brightness: none !important; - } - } - .nuxt-loading-indicator { - background: @accent-color!important; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/modrinth/catppuccin.user.less b/styles/modrinth/catppuccin.user.less new file mode 100644 index 0000000000..b89b0da3f0 --- /dev/null +++ b/styles/modrinth/catppuccin.user.less @@ -0,0 +1,198 @@ +/* ==UserStyle== +@name Modrinth Catppuccin +@namespace github.com/catppuccin/userstyles/styles/modrinth +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/modrinth +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/modrinth/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amodrinth +@description Soothing pastel theme for Modrinth +@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("modrinth.com") { + .light-mode { + #catppuccin(@lightFlavor, @accentColor); + } + + .dark-mode, + .oled-mode { + #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]; + + @shadow: if(@lookup = latte, #dbdfef, #010409); + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + * { + --text-color: @text; + --color-base: @text; + --color-bg: @crust; + --color-secondary: @subtext0; + --color-ad-raised: @surface2; + --color-ad: @surface1; + --color-ad-highlight: @teal; + --color-brand: @accent-color; + --color-brand-green: @green; + --color-button-bg-active: @overlay0; + --color-button-bg-hover: @surface1; + --color-button-bg: @surface0; + --color-button-text-hover: @text; + --color-button-text: @subtext1; + --color-button-text-active: @text; + --color-divider: @surface0; + --color-heading: @text; + --color-icon: @text; + --color-link-active: @teal; + --color-link-hover: @sky; + --color-link: @sapphire; + --color-raised-bg: @base; + --color-blue: @sapphire; + --color-special-blue: @sapphire; + --color-orange: @peach; + --color-special-orange: @peach; + --color-purple: @mauve; + --color-special-purple: @mauve; + --color-red: @red; + --color-gray: @subtext0; + --color-special-gray: @subtext0; + --color-green: @green; + --color-text: @subtext1; + --color-text-dark: @text; + --color-text-inactive: @overlay1; + --color-brand-highlight: @surface0; + --color-brand-inverted: @shadow; + --color-table-alternate-row: @crust; + --color-table-border: @overlay0; + --color-contrast: @text; + --color-accent-contrast: @mantle; + --color-brand-shadow: @accent-color; + --color-warning-banner-side: @red; + --color-warning-banner-bg: fade(@red, 10%); + --color-warning-banner-text: @text; + --color-platform-fabric: @pink; + --color-platform-quilt: @mauve; + --color-platform-forge: @blue; + --color-platform-neoforge: @peach; + --color-platform-liteloader: @sky; + --color-platform-bukkit: @peach; + --color-platform-bungeecord: @yellow; + --color-platform-folia: @green; + --color-platform-paper: @red; + --color-platform-purpur: @lavender; + --color-platform-spigot: @yellow; + --color-platform-velocity: @teal; + --color-platform-waterfall: @blue; + --color-platform-sponge: @yellow; + --color-button-border: fade(@crust, 20%); + --color-tooltip-bg: @surface1; + --color-tooltip-text: @subtext1; + --landing-green-label: @accent-color; + --landing-green-label-bg: fade(@accent-color, 10%); + --landing-blue-label: @blue; + --landing-color-heading: @text; + --landing-color-subheading: @subtext0; + --landing-border-color: @overlay0; + --landing-blue-label-bg: fade(@blue, 10%); + --landing-border-gradient: linear-gradient( + to bottom right, + @overlay0, + @surface2 + ); + } + // homepage + .blob-demonstration, + .blob-demonstration::after { + background: linear-gradient( + 0deg, + fade(@accent-color, 20%), + fade(@base, 10%) + ) !important; + } + .logo-banner path { + fill: @accent-color !important; + } + .logo-banner > svg > g > rect { + display: none; + } + + [tabindex="0"]:focus-visible, + a:focus-visible, + button:focus-visible { + outline-color: @accent-color; + } + + .BDVE3s9MFQttmbMUeYup-2 a b, + .BDVE3s9MFQttmbMUeYup-2 a strong { + color: @accent-color; + } + + // dropdown icon + .multiselect__select::before { + border-color: @text transparent transparent; + color: @text; + } + // header button hover + .btn-wrapper:hover { + a, + button { + --tw-brightness: none !important; + } + } + .nuxt-loading-indicator { + background: @accent-color !important; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/namemc/catppuccin.user.css b/styles/namemc/catppuccin.user.css index 2dabb65b89..79c60dfb9b 100644 --- a/styles/namemc/catppuccin.user.css +++ b/styles/namemc/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name NameMC Catppuccin +@name NameMC Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/namemc @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/namemc -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/namemc/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/namemc/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anamemc @description Soothing pastel theme for NameMC @author Catppuccin @@ -13,566 +13,4 @@ @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('namemc.com') { - :root[data-bs-theme="dark"] { - #catppuccin(@darkFlavor, @accentColor); - } - :root[data-bs-theme="light"] { - #catppuccin(@lightFlavor, @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; - } - } - - #bsButton(@col, @bgCol) { - --bs-btn-color: @col; - --bs-btn-hover-color: darken(@col, 5%); - --bs-btn-active-color: darken(@col, 5%); - --bs-btn-disabled-color: @col; - - --bs-btn-bg: @bgCol; - --bs-btn-hover-bg: darken(@bgCol, 5%); - --bs-btn-active-bg: darken(@bgCol, 5%); - --bs-btn-disabled-bg: @bgCol; - --bs-btn-border-color: @bgCol; - --bs-btn-hover-border-color: @bgCol; - --bs-btn-active-border-color: @bgCol; - --bs-btn-disabled-border-color: @bgCol; - } - #bsButtonOutline(@col, @hover) { - --bs-btn-color: @col; - --bs-btn-hover-bg: @col; - --bs-btn-active-bg: @col; - --bs-btn-border-color: @col; - --bs-btn-disabled-color: @col; - --bs-btn-focus-shadow-rgb: @col; - --bs-btn-hover-border-color: @col; - --bs-btn-active-border-color: @col; - --bs-btn-disabled-border-color: @col; - - --bs-btn-hover-color: @hover; - --bs-btn-active-color: @hover; - } - - --bs-body-color: @text; - --bs-body-color-rgb: #rgbify(@text) []; - --bs-body-bg: @base; - --bs-body-bg-rgb: #rgbify(@base) []; - --bs-emphasis-color: @text; - --bs-emphasis-color-rgb: #rgbify(@text) []; - --bs-blue: @blue; - --bs-indigo: @mauve; - --bs-purple: @mauve; - --bs-pink: @pink; - --bs-red: @red; - --bs-orange: @peach; - --bs-yellow: @yellow; - --bs-green: @green; - --bs-teal: @teal; - --bs-cyan: @sapphire; - --bs-secondary-color: @subtext0; - --bs-secondary-color-rgb: #rgbify(@subtext0) []; - --bs-tertiary-color: @subtext1; - --bs-tertiary-color-rgb: #rgbify(@subtext1) []; - --bs-tertiary-bg: @base; - --bs-tertiary-bg-rgb: #rgbify(@base) []; - --bs-secondary-text-emphasis: @subtext0; - --bs-success-text-emphasis: @green; - --bs-primary: @accent-color; - --bs-primary-rgb: #rgbify(@accent-color) []; - --bs-secondary: @subtext0; - --bs-secondary-rgb: #rgbify(@subtext0) []; - --bs-success: @green; - --bs-success-rgb: #rgbify(@green) []; - --bs-info: @sky; - --bs-info-rgb: #rgbify(@sky) []; - --bs-warning: @yellow; - --bs-warning-rgb: #rgbify(@yellow) []; - --bs-danger: @red; - --bs-danger-rgb: #rgbify(@red) []; - --bs-light: @base; - --bs-light-rgb: #rgbify(@base) []; - --bs-dark: @text; - --bs-dark-rgb: #rgbify(@text) []; - --bs-dark-text-emphasis: @text; - --bs-primary-bg-subtle: @crust; - --bs-secondary-bg-subtle: @mantle; - --bs-success-bg-subtle: fade(@green, 20%); - --bs-warning-bg-subtle: fade(@yellow, 20%); - --bs-danger-bg-subtle: @base; - --bs-secondary-border-subtle: @surface1; - --bs-success-border-subtle: @green; - --bs-info-border-subtle: @sky; - --bs-warning-border-subtle: @yellow; - --bs-danger-border-subtle: @red; - --bs-link-color: @accent-color; - --bs-link-color-rgb: #rgbify(@accent-color) []; - --bs-code-color: @accent-color; - --bs-highlight-bg: @base; - --bs-form-valid-color: @green; - --bs-focus-ring-color: @accent-color; - --bs-form-valid-border-color: @green; - --bs-form-invalid-color: @red; - --bs-form-invalid-border-color: @red; - - .btn-primary { - #bsButton(@crust, @accent-color); - } - .btn-secondary { - #bsButton(@text, @overlay0); - } - .btn-success { - #bsButton(@crust, @green); - } - .btn-info { - #bsButton(@crust, @sapphire); - } - .btn-warning { - #bsButton(@crust, @yellow); - } - .btn-danger { - #bsButton(@crust, @red); - } - .btn-light { - #bsButton(@crust, @overlay2); - } - .btn-dark { - #bsButton(@text, @surface0); - } - - .btn-outline-primary { - #bsButtonOutline(@accent-color, @text); - } - .btn-outline-secondary { - #bsButtonOutline(@overlay0, @text); - } - .btn-outline-success { - #bsButtonOutline(@green, @text); - } - .btn-outline-info { - #bsButtonOutline(@sapphire, @crust); - } - .btn-outline-warning { - #bsButtonOutline(@yellow, @crust); - } - .btn-outline-danger { - #bsButtonOutline(@red, @text); - } - .btn-outline-light { - #bsButtonOutline(@text, @crust); - } - .btn-outline-dark { - #bsButtonOutline(@surface0, @text); - } - - .text-success { - color: @green !important; - } - - .btn-link { - --bs-btn-disabled-color: @overlay0; - --bs-btn-disabled-border-color: transparent; - --bs-btn-focus-shadow-rgb: #rgbify(@blue) []; - } - - /* i hate that this is necessary */ - .dropdown-menu { - --bs-dropdown-header-color: @overlay1 !important; - --bs-dropdown-border-color: @surface2 !important; - } - - #header { - form { - div.input-group.input-group-lg { - input.form-control { - background-color: @surface0 !important; - - &:focus { - border-color: @accent-color; - box-shadow: none; - } - } - } - } - } - - .navbar-nav .nav-item a { - color: @text !important; - - &:hover { - color: @subtext0 !important; - } - span { - color: @text !important; - - &:hover { - color: @subtext0 !important; - } - } - } - - .card { - background-color: @surface0 !important; - color: @subtext0 !important; - --bs-card-bg: @base !important; - - .card-header { - border-color: @surface2 !important; - } - } - - /* skin display link */ - div.card-header { - span { - color: @text; - - &:hover { - color: @accent-color !important; - } - } - - strong a { - color: @accent-color !important; - } - } - - /* skin display background */ - .checkered { - @dark: fade(@surface0, 40%); - @light: fade(@surface1, 40%); - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - /* skins page nav buttons */ - .nav.nav-pills { - .nav-item .nav-link a { - color: @text !important; - } - .nav-link.active { - background-color: @accent-color !important; - color: @crust !important; - } - } - - .page-item .page-link { - background-color: @surface0 !important; - border-color: @surface2 !important; - color: @text; - - &.active { - background-color: @accent-color !important; - } - - &:focus, - &:hover { - box-shadow: none !important; - color: @accent-color !important; - } - } - - .page-item.active .page-link { - background-color: @accent-color !important; - border-color: @accent-color !important; - color: @crust !important; - } - - /* single skin page */ - a.badge, - span.badge { - background-color: @accent-color !important; - color: @crust !important; - } - - /* usernames page */ - form#upcoming-form { - div.row { - label.col-form-label { - color: @text !important; - } - - div.col { - .input-group { - .input-group-text { - background-color: @base !important; - border-color: @surface2 !important; - } - } - } - } - } - - .form-control, - .form-select { - background-color: @base !important; - border-color: @surface2 !important; - box-shadow: none !important; - color: @subtext1 !important; - - &:focus { - border-color: @accent-color !important; - box-shadow: 0 0 0 0.25rem fade(@accent-color, 25%); - } - } - - /* server list page */ - .mc-red { - color: @maroon !important; - } - .mc-dark-red { - color: @red !important; - } - .mc-gold { - color: @peach !important; - } - .mc-yellow { - color: @yellow !important; - } - .mc-green, - .mc-dark-green { - color: @green !important; - } - .mc-aqua { - color: @sky !important; - } - .mc-dark-aqua { - color: @teal !important; - } - .mc-blue { - color: @sapphire !important; - } - .mc-dark-blue { - color: @blue !important; - } - .mc-light-purple { - color: @pink !important; - } - .mc-dark-purple { - color: @mauve !important; - } - - /* profile page */ - .namemc-rank-10 { - color: @green !important; - } - - .namemc-rank-100, - .namemc-rank-200, - .namemc-rank-900, - .namemc-rank-1000 { - color: @red !important; - } - - #uuid-select { - background-color: @surface1 !important; - } - - .card.mb-3 .card-header a { - color: @accent-color !important; - } - - .skin-button-selected { - /* society if box-shadow-color existed */ - box-shadow: 0 0 6px @overlay0 !important; - background-color: @overlay0 !important; - } - - .player-list { - a:hover { - color: @subtext1 !important; - } - } - - .head-command, - #head-command-select { - background-color: @base !important; - - &:focus { - border-color: @accent-color !important; - box-shadow: none !important; - } - } - - button.head-command { - border-color: @surface0 !important; - color: @subtext1; - - &:hover { - background-color: @surface1 !important; - border-color: @surface2 !important; - color: @text !important; - } - } - - #country { - background-color: @mantle !important; - } - - fieldset.form-group input.form-control { - background-color: @mantle; - } - - form > .row > .col > .input-group { - #discord-input, - #facebook-input, - #github-input, - #instagram-input, - #reddit-input, - #snapchat-input, - #soundcloud-input, - #spotify-input, - #steam-input, - #telegram-input, - #tiktok-input, - #threads-input, - #twitch-input, - #twitter-input, - #youtube-input, - fieldset.form-group input.form-control { - background-color: @mantle; - } - } - - & when (@lookup = latte) { - --bs-black: @text; - --bs-black-rgb: #rgbify(@text) []; - --bs-white: @crust; - --bs-white-rgb: #rgbify(@crust) []; - --bs-gray: @subtext0; - --bs-gray-dark: @text; - --bs-gray-100: @base; - --bs-gray-200: @mantle; - --bs-gray-300: @crust; - --bs-gray-400: @surface0; - --bs-gray-500: @surface2; - --bs-gray-600: @overlay2; - --bs-gray-700: @subtext0; - --bs-gray-800: @subtext1; - --bs-gray-900: @text; - --bs-secondary-bg: @mantle; - --bs-secondary-bg-rgb: #rgbify(@mantle) []; - --bs-primary-text-emphasis: @text; - --bs-info-text-emphasis: @text; - --bs-warning-text-emphasis: @text; - --bs-danger-text-emphasis: @red; - --bs-light-text-emphasis: @subtext0; - --bs-info-bg-subtle: @surface0; - --bs-light-bg-subtle: @base; - --bs-dark-bg-subtle: @surface0; - --bs-primary-border-subtle: @surface2; - --bs-light-border-subtle: @mantle; - --bs-dark-border-subtle: @surface2; - --bs-link-hover-color: @accent-color; - --bs-link-hover-color-rgb: #rgbify(@accent-color) []; - --bs-border-color: @crust; - - .mc-black { - color: @text !important; - } - .mc-dark-gray { - color: @subtext0 !important; - } - .mc-gray, - .mc-reset { - color: @overlay1 !important; - } - .mc-white { - color: @base !important; - } - } - - & when not (@lookup = latte) { - --bs-black: @crust; - --bs-white: @text; - --bs-gray: @overlay2; - --bs-gray-dark: @surface2; - --bs-secondary-bg: @surface0; - --bs-secondary-bg-rgb: #rgbify(@surface0) []; - --bs-primary-text-emphasis: @sapphire; - --bs-info-text-emphasis: @sky; - --bs-warning-text-emphasis: @yellow; - --bs-danger-text-emphasis: @maroon; - --bs-light-text-emphasis: @text; - --bs-info-bg-subtle: @crust; - --bs-light-bg-subtle: @surface0; - --bs-dark-bg-subtle: @mantle; - --bs-primary-border-subtle: @mantle; - --bs-light-border-subtle: @surface1; - --bs-dark-border-subtle: @surface0; - --bs-link-hover-color: @text; - --bs-link-hover-color-rgb: #rgbify(@text) []; - --bs-border-color: @surface1; - - .mc-black { - color: @crust !important; - } - .mc-dark-gray { - color: @overlay0 !important; - } - .mc-gray, - .mc-reset { - color: @subtext0 !important; - } - .mc-white { - color: @text !important; - } - } - } -} - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/namemc/catppuccin.user.less b/styles/namemc/catppuccin.user.less new file mode 100644 index 0000000000..c8940bb915 --- /dev/null +++ b/styles/namemc/catppuccin.user.less @@ -0,0 +1,576 @@ +/* ==UserStyle== +@name NameMC Catppuccin +@namespace github.com/catppuccin/userstyles/styles/namemc +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/namemc +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/namemc/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anamemc +@description Soothing pastel theme for NameMC +@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("namemc.com") { + :root[data-bs-theme="dark"] { + #catppuccin(@darkFlavor, @accentColor); + } + :root[data-bs-theme="light"] { + #catppuccin(@lightFlavor, @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; + } + } + + #bsButton(@col, @bgCol) { + --bs-btn-color: @col; + --bs-btn-hover-color: darken(@col, 5%); + --bs-btn-active-color: darken(@col, 5%); + --bs-btn-disabled-color: @col; + + --bs-btn-bg: @bgCol; + --bs-btn-hover-bg: darken(@bgCol, 5%); + --bs-btn-active-bg: darken(@bgCol, 5%); + --bs-btn-disabled-bg: @bgCol; + --bs-btn-border-color: @bgCol; + --bs-btn-hover-border-color: @bgCol; + --bs-btn-active-border-color: @bgCol; + --bs-btn-disabled-border-color: @bgCol; + } + #bsButtonOutline(@col, @hover) { + --bs-btn-color: @col; + --bs-btn-hover-bg: @col; + --bs-btn-active-bg: @col; + --bs-btn-border-color: @col; + --bs-btn-disabled-color: @col; + --bs-btn-focus-shadow-rgb: @col; + --bs-btn-hover-border-color: @col; + --bs-btn-active-border-color: @col; + --bs-btn-disabled-border-color: @col; + + --bs-btn-hover-color: @hover; + --bs-btn-active-color: @hover; + } + + --bs-body-color: @text; + --bs-body-color-rgb: #rgbify(@text)[]; + --bs-body-bg: @base; + --bs-body-bg-rgb: #rgbify(@base)[]; + --bs-emphasis-color: @text; + --bs-emphasis-color-rgb: #rgbify(@text)[]; + --bs-blue: @blue; + --bs-indigo: @mauve; + --bs-purple: @mauve; + --bs-pink: @pink; + --bs-red: @red; + --bs-orange: @peach; + --bs-yellow: @yellow; + --bs-green: @green; + --bs-teal: @teal; + --bs-cyan: @sapphire; + --bs-secondary-color: @subtext0; + --bs-secondary-color-rgb: #rgbify(@subtext0)[]; + --bs-tertiary-color: @subtext1; + --bs-tertiary-color-rgb: #rgbify(@subtext1)[]; + --bs-tertiary-bg: @base; + --bs-tertiary-bg-rgb: #rgbify(@base)[]; + --bs-secondary-text-emphasis: @subtext0; + --bs-success-text-emphasis: @green; + --bs-primary: @accent-color; + --bs-primary-rgb: #rgbify(@accent-color)[]; + --bs-secondary: @subtext0; + --bs-secondary-rgb: #rgbify(@subtext0)[]; + --bs-success: @green; + --bs-success-rgb: #rgbify(@green)[]; + --bs-info: @sky; + --bs-info-rgb: #rgbify(@sky)[]; + --bs-warning: @yellow; + --bs-warning-rgb: #rgbify(@yellow)[]; + --bs-danger: @red; + --bs-danger-rgb: #rgbify(@red)[]; + --bs-light: @base; + --bs-light-rgb: #rgbify(@base)[]; + --bs-dark: @text; + --bs-dark-rgb: #rgbify(@text)[]; + --bs-dark-text-emphasis: @text; + --bs-primary-bg-subtle: @crust; + --bs-secondary-bg-subtle: @mantle; + --bs-success-bg-subtle: fade(@green, 20%); + --bs-warning-bg-subtle: fade(@yellow, 20%); + --bs-danger-bg-subtle: @base; + --bs-secondary-border-subtle: @surface1; + --bs-success-border-subtle: @green; + --bs-info-border-subtle: @sky; + --bs-warning-border-subtle: @yellow; + --bs-danger-border-subtle: @red; + --bs-link-color: @accent-color; + --bs-link-color-rgb: #rgbify(@accent-color)[]; + --bs-code-color: @accent-color; + --bs-highlight-bg: @base; + --bs-form-valid-color: @green; + --bs-focus-ring-color: @accent-color; + --bs-form-valid-border-color: @green; + --bs-form-invalid-color: @red; + --bs-form-invalid-border-color: @red; + + .btn-primary { + #bsButton(@crust, @accent-color); + } + .btn-secondary { + #bsButton(@text, @overlay0); + } + .btn-success { + #bsButton(@crust, @green); + } + .btn-info { + #bsButton(@crust, @sapphire); + } + .btn-warning { + #bsButton(@crust, @yellow); + } + .btn-danger { + #bsButton(@crust, @red); + } + .btn-light { + #bsButton(@crust, @overlay2); + } + .btn-dark { + #bsButton(@text, @surface0); + } + + .btn-outline-primary { + #bsButtonOutline(@accent-color, @text); + } + .btn-outline-secondary { + #bsButtonOutline(@overlay0, @text); + } + .btn-outline-success { + #bsButtonOutline(@green, @text); + } + .btn-outline-info { + #bsButtonOutline(@sapphire, @crust); + } + .btn-outline-warning { + #bsButtonOutline(@yellow, @crust); + } + .btn-outline-danger { + #bsButtonOutline(@red, @text); + } + .btn-outline-light { + #bsButtonOutline(@text, @crust); + } + .btn-outline-dark { + #bsButtonOutline(@surface0, @text); + } + + .text-success { + color: @green !important; + } + + .btn-link { + --bs-btn-disabled-color: @overlay0; + --bs-btn-disabled-border-color: transparent; + --bs-btn-focus-shadow-rgb: #rgbify(@blue)[]; + } + + /* i hate that this is necessary */ + .dropdown-menu { + --bs-dropdown-header-color: @overlay1 !important; + --bs-dropdown-border-color: @surface2 !important; + } + + #header { + form { + div.input-group.input-group-lg { + input.form-control { + background-color: @surface0 !important; + + &:focus { + border-color: @accent-color; + box-shadow: none; + } + } + } + } + } + + .navbar-nav .nav-item a { + color: @text !important; + + &:hover { + color: @subtext0 !important; + } + span { + color: @text !important; + + &:hover { + color: @subtext0 !important; + } + } + } + + .card { + background-color: @surface0 !important; + color: @subtext0 !important; + --bs-card-bg: @base !important; + + .card-header { + border-color: @surface2 !important; + } + } + + /* skin display link */ + div.card-header { + span { + color: @text; + + &:hover { + color: @accent-color !important; + } + } + + strong a { + color: @accent-color !important; + } + } + + /* skin display background */ + .checkered { + @dark: fade(@surface0, 40%); + @light: fade(@surface1, 40%); + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + /* skins page nav buttons */ + .nav.nav-pills { + .nav-item .nav-link a { + color: @text !important; + } + .nav-link.active { + background-color: @accent-color !important; + color: @crust !important; + } + } + + .page-item .page-link { + background-color: @surface0 !important; + border-color: @surface2 !important; + color: @text; + + &.active { + background-color: @accent-color !important; + } + + &:focus, + &:hover { + box-shadow: none !important; + color: @accent-color !important; + } + } + + .page-item.active .page-link { + background-color: @accent-color !important; + border-color: @accent-color !important; + color: @crust !important; + } + + /* single skin page */ + a.badge, + span.badge { + background-color: @accent-color !important; + color: @crust !important; + } + + /* usernames page */ + form#upcoming-form { + div.row { + label.col-form-label { + color: @text !important; + } + + div.col { + .input-group { + .input-group-text { + background-color: @base !important; + border-color: @surface2 !important; + } + } + } + } + } + + .form-control, + .form-select { + background-color: @base !important; + border-color: @surface2 !important; + box-shadow: none !important; + color: @subtext1 !important; + + &:focus { + border-color: @accent-color !important; + box-shadow: 0 0 0 0.25rem fade(@accent-color, 25%); + } + } + + /* server list page */ + .mc-red { + color: @maroon !important; + } + .mc-dark-red { + color: @red !important; + } + .mc-gold { + color: @peach !important; + } + .mc-yellow { + color: @yellow !important; + } + .mc-green, + .mc-dark-green { + color: @green !important; + } + .mc-aqua { + color: @sky !important; + } + .mc-dark-aqua { + color: @teal !important; + } + .mc-blue { + color: @sapphire !important; + } + .mc-dark-blue { + color: @blue !important; + } + .mc-light-purple { + color: @pink !important; + } + .mc-dark-purple { + color: @mauve !important; + } + + /* profile page */ + .namemc-rank-10 { + color: @green !important; + } + + .namemc-rank-100, + .namemc-rank-200, + .namemc-rank-900, + .namemc-rank-1000 { + color: @red !important; + } + + #uuid-select { + background-color: @surface1 !important; + } + + .card.mb-3 .card-header a { + color: @accent-color !important; + } + + .skin-button-selected { + /* society if box-shadow-color existed */ + box-shadow: 0 0 6px @overlay0 !important; + background-color: @overlay0 !important; + } + + .player-list { + a:hover { + color: @subtext1 !important; + } + } + + .head-command, + #head-command-select { + background-color: @base !important; + + &:focus { + border-color: @accent-color !important; + box-shadow: none !important; + } + } + + button.head-command { + border-color: @surface0 !important; + color: @subtext1; + + &:hover { + background-color: @surface1 !important; + border-color: @surface2 !important; + color: @text !important; + } + } + + #country { + background-color: @mantle !important; + } + + fieldset.form-group input.form-control { + background-color: @mantle; + } + + form > .row > .col > .input-group { + #discord-input, + #facebook-input, + #github-input, + #instagram-input, + #reddit-input, + #snapchat-input, + #soundcloud-input, + #spotify-input, + #steam-input, + #telegram-input, + #tiktok-input, + #threads-input, + #twitch-input, + #twitter-input, + #youtube-input, + fieldset.form-group input.form-control { + background-color: @mantle; + } + } + + & when (@lookup = latte) { + --bs-black: @text; + --bs-black-rgb: #rgbify(@text)[]; + --bs-white: @crust; + --bs-white-rgb: #rgbify(@crust)[]; + --bs-gray: @subtext0; + --bs-gray-dark: @text; + --bs-gray-100: @base; + --bs-gray-200: @mantle; + --bs-gray-300: @crust; + --bs-gray-400: @surface0; + --bs-gray-500: @surface2; + --bs-gray-600: @overlay2; + --bs-gray-700: @subtext0; + --bs-gray-800: @subtext1; + --bs-gray-900: @text; + --bs-secondary-bg: @mantle; + --bs-secondary-bg-rgb: #rgbify(@mantle)[]; + --bs-primary-text-emphasis: @text; + --bs-info-text-emphasis: @text; + --bs-warning-text-emphasis: @text; + --bs-danger-text-emphasis: @red; + --bs-light-text-emphasis: @subtext0; + --bs-info-bg-subtle: @surface0; + --bs-light-bg-subtle: @base; + --bs-dark-bg-subtle: @surface0; + --bs-primary-border-subtle: @surface2; + --bs-light-border-subtle: @mantle; + --bs-dark-border-subtle: @surface2; + --bs-link-hover-color: @accent-color; + --bs-link-hover-color-rgb: #rgbify(@accent-color)[]; + --bs-border-color: @crust; + + .mc-black { + color: @text !important; + } + .mc-dark-gray { + color: @subtext0 !important; + } + .mc-gray, + .mc-reset { + color: @overlay1 !important; + } + .mc-white { + color: @base !important; + } + } + + & when not(@lookup = latte) { + --bs-black: @crust; + --bs-white: @text; + --bs-gray: @overlay2; + --bs-gray-dark: @surface2; + --bs-secondary-bg: @surface0; + --bs-secondary-bg-rgb: #rgbify(@surface0)[]; + --bs-primary-text-emphasis: @sapphire; + --bs-info-text-emphasis: @sky; + --bs-warning-text-emphasis: @yellow; + --bs-danger-text-emphasis: @maroon; + --bs-light-text-emphasis: @text; + --bs-info-bg-subtle: @crust; + --bs-light-bg-subtle: @surface0; + --bs-dark-bg-subtle: @mantle; + --bs-primary-border-subtle: @mantle; + --bs-light-border-subtle: @surface1; + --bs-dark-border-subtle: @surface0; + --bs-link-hover-color: @text; + --bs-link-hover-color-rgb: #rgbify(@text)[]; + --bs-border-color: @surface1; + + .mc-black { + color: @crust !important; + } + .mc-dark-gray { + color: @overlay0 !important; + } + .mc-gray, + .mc-reset { + color: @subtext0 !important; + } + .mc-white { + color: @text !important; + } + } + } +} + +#rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/nitter/catppuccin.user.css b/styles/nitter/catppuccin.user.css index 00ff272523..53eca42591 100644 --- a/styles/nitter/catppuccin.user.css +++ b/styles/nitter/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Nitter Catppuccin +@name Nitter Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/nitter @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/nitter -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/nitter/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/nitter/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anitter @description Soothing pastel theme for Nitter @author Catppuccin @@ -13,152 +13,4 @@ @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("nitter.net"), domain("nitter.unixfox.eu"), domain("nitter.42l.fr"), domain("nitter.fdn.fr"), domain("nitter.1d4.us"), domain("nitter.kavin.rocks"), domain("nitter.namazso.eu"), domain("nitter.hu"), domain("bird.trom.tf"), domain("nitter.it"), domain("twitter.censors.us"), domain("nitter.grimneko.de"), domain("n.hyperborea.cloud"), domain("nitter.ca"), domain("twitter.076.ne.jp"), domain("nitter.mstdn.social"), domain("nitter.fly.dev"), domain("nitter.weiler.rocks"), domain("nitter.sethforprivacy.com"), domain("nttr.stream"), domain("nitter.tiekoetter.com"), domain("nitter.spaceint.fr"), domain("nitter.privacy.com.denitter.mastodon.pro"), domain("nitter.notraxx.chnitter.poast.org"), domain("nitter.bird.froth.zone"), domain("nitter.dcs0.hu"), domain("twitter.beparanoid.de"), domain("n.ramle.be"), domain("nitter.cz"), domain("nitter.privacydev.net"), domain("tweet.lambda.dance"), domain("nitter.kylrth.com"), domain("nitter.oishi-ra.men"), domain("nitter.foss.wtf"), domain("nitter.priv.pw"), domain("t.com.sb"), domain("xcancel.com"), domain("nitter.poast.org") { - @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 { - --bg_color: @mantle; - --fg_color: @text; - --fg_faded: @subtext1; - --fg_dark: @accent-color; - --fg_nav: @accent-color; - --bg_panel: @crust; - --bg_elements: @base; - --bg_overlays: @base; - --bg_hover: @crust; - --grey: @subtext1; - --dark_grey: @overlay0; - --darker_grey: @base; - --darkest_grey: @mantle; - --border_grey: @base; - --accent: @accent-color; - --accent_light: lighten(@accent-color, 10%); - --accent_dark: darken(@accent-color, 10%); - --accent_border: darken(@accent-color, 10%); - --play_button: @accent-color; - --play_button_hover: @accent-color; - --more_replies_dots: darken(@accent-color, 10%); - --error_red: @red; - --verified_blue: @blue; - --icon_text: @text; - --tab: @text; - --tab_selected: @accent-color; - --profile_stat: @text; - --verified_government: @subtext0; - --verified_business: @yellow; - background-color: var(--bg_color); - color: var(--fg_color); - line-height: 1.3; - margin: 0; - } - - /* logo */ - img.site-logo { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - /* Fix Poll Leader color */ - .poll-meter.leader { - color: var(--bg_color); - } - - /* xcancel "verifying your request" */ - [style="background-color:#1f1f1f;color:#1f1f1f;font-family:Arial,Helvetica,sans-serif;font-size:100%;"] { - background: @base !important; - h1, - h2, - p, - #status { - color: @accent-color !important; - } - [style="width:auto;margin:16px auto;border:1px solid #FF6C60;background-color:#1f1f1f;border-radius:3px 3px 3px 3px;padding:10px;"] { - background: @base !important; - border-color: @accent-color !important; - } - } - - /* error text color contrast */ - .error-panel { - color: @crust; - a { - color: @crust; - text-decoration: underline; - } - } - - /* twitter blue verification checkmark contrast */ - .verified-icon.blue { - color: @crust; - } - } -} - -#rgbify(@color) { - @rgb: red(@color) green(@color) blue(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/nitter/catppuccin.user.less b/styles/nitter/catppuccin.user.less new file mode 100644 index 0000000000..2646b7da5a --- /dev/null +++ b/styles/nitter/catppuccin.user.less @@ -0,0 +1,199 @@ +/* ==UserStyle== +@name Nitter Catppuccin +@namespace github.com/catppuccin/userstyles/styles/nitter +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/nitter +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/nitter/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anitter +@description Soothing pastel theme for Nitter +@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("nitter.net"), + domain("nitter.unixfox.eu"), + domain("nitter.42l.fr"), + domain("nitter.fdn.fr"), + domain("nitter.1d4.us"), + domain("nitter.kavin.rocks"), + domain("nitter.namazso.eu"), + domain("nitter.hu"), + domain("bird.trom.tf"), + domain("nitter.it"), + domain("twitter.censors.us"), + domain("nitter.grimneko.de"), + domain("n.hyperborea.cloud"), + domain("nitter.ca"), + domain("twitter.076.ne.jp"), + domain("nitter.mstdn.social"), + domain("nitter.fly.dev"), + domain("nitter.weiler.rocks"), + domain("nitter.sethforprivacy.com"), + domain("nttr.stream"), + domain("nitter.tiekoetter.com"), + domain("nitter.spaceint.fr"), + domain("nitter.privacy.com.denitter.mastodon.pro"), + domain("nitter.notraxx.chnitter.poast.org"), + domain("nitter.bird.froth.zone"), + domain("nitter.dcs0.hu"), + domain("twitter.beparanoid.de"), + domain("n.ramle.be"), + domain("nitter.cz"), + domain("nitter.privacydev.net"), + domain("tweet.lambda.dance"), + domain("nitter.kylrth.com"), + domain("nitter.oishi-ra.men"), + domain("nitter.foss.wtf"), + domain("nitter.priv.pw"), + domain("t.com.sb"), + domain("xcancel.com"), + domain("nitter.poast.org") { + @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 { + --bg_color: @mantle; + --fg_color: @text; + --fg_faded: @subtext1; + --fg_dark: @accent-color; + --fg_nav: @accent-color; + --bg_panel: @crust; + --bg_elements: @base; + --bg_overlays: @base; + --bg_hover: @crust; + --grey: @subtext1; + --dark_grey: @overlay0; + --darker_grey: @base; + --darkest_grey: @mantle; + --border_grey: @base; + --accent: @accent-color; + --accent_light: lighten(@accent-color, 10%); + --accent_dark: darken(@accent-color, 10%); + --accent_border: darken(@accent-color, 10%); + --play_button: @accent-color; + --play_button_hover: @accent-color; + --more_replies_dots: darken(@accent-color, 10%); + --error_red: @red; + --verified_blue: @blue; + --icon_text: @text; + --tab: @text; + --tab_selected: @accent-color; + --profile_stat: @text; + --verified_government: @subtext0; + --verified_business: @yellow; + background-color: var(--bg_color); + color: var(--fg_color); + line-height: 1.3; + margin: 0; + } + + /* logo */ + img.site-logo { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + /* Fix Poll Leader color */ + .poll-meter.leader { + color: var(--bg_color); + } + + /* xcancel "verifying your request" */ + [style="background-color:#1f1f1f;color:#1f1f1f;font-family:Arial,Helvetica,sans-serif;font-size:100%;"] { + background: @base !important; + h1, + h2, + p, + #status { + color: @accent-color !important; + } + [style="width:auto;margin:16px auto;border:1px solid #FF6C60;background-color:#1f1f1f;border-radius:3px 3px 3px 3px;padding:10px;"] { + background: @base !important; + border-color: @accent-color !important; + } + } + + /* error text color contrast */ + .error-panel { + color: @crust; + a { + color: @crust; + text-decoration: underline; + } + } + + /* twitter blue verification checkmark contrast */ + .verified-icon.blue { + color: @crust; + } + } +} + +#rgbify(@color) { + @rgb: red(@color) green(@color) blue(@color); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/nixos-manual/catppuccin.user.css b/styles/nixos-manual/catppuccin.user.css index ea5cc195fe..26e47bc344 100644 --- a/styles/nixos-manual/catppuccin.user.css +++ b/styles/nixos-manual/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name NixOS Manual/Nixpkgs Manual Catppuccin +@name NixOS Manual/Nixpkgs Manual Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/nixos-manual @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/nixos-manual -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/nixos-manual/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/nixos-manual/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anixos-manual @description Soothing pastel theme for NixOS Manual and Nixpkgs Manual @author Catppuccin @@ -13,192 +13,4 @@ @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 url-prefix('https://nixos.org/manual/'), url-prefix('https://daiderd.com/nix-darwin/manual/') -{ - @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); - - @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]; - - --ctp-rosewater: @rosewater; - --ctp-flamingo: @flamingo; - --ctp-pink: @pink; - --ctp-mauve: @mauve; - --ctp-red: @red; - --ctp-maroon: @maroon; - --ctp-peach: @peach; - --ctp-yellow: @yellow; - --ctp-green: @green; - --ctp-teal: @teal; - --ctp-sky: @sky; - --ctp-sapphire: @sapphire; - --ctp-blue: @blue; - --ctp-lavender: @lavender; - --ctp-text: @text; - --ctp-subtext1: @subtext1; - --ctp-subtext0: @subtext0; - --ctp-overlay2: @overlay2; - --ctp-overlay1: @overlay1; - --ctp-overlay0: @overlay0; - --ctp-surface2: @surface2; - --ctp-surface1: @surface1; - --ctp-surface0: @surface0; - --ctp-base: @base; - --ctp-mantle: @mantle; - --ctp-crust: @crust; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - body { - background-color: @base !important; - color: @text; - } - - p, - ol, - ul { - color: @text !important; - } - - a { - border-bottom-color: @accent-color !important; - color: @accent-color; - } - - h1, - h2, - h3, - h4 { - color: @accent-color; - } - h5 { - color: fade(@accent-color, 85%); - } - - hr, - div.toc { - border-top-color: transparent; - border-bottom-color: @overlay1 !important; - } - - div.variablelist { - color: @text; - } - - code { - &.programlisting.hljs { - background-color: fade(@blue, 5%) !important; - } - } - - table.informaltable { - border-color: @surface1; - thead { - background-color: @mantle; - } - } - - #callout(@color) { - background-color: fade(@color, 7%) !important; - border-color: fade(@color, 20%); - - a, - p, - .title { - color: @color !important; - } - a { - border-bottom-color: @color !important; - } - } - - .note { - #callout(@blue); - } - - .tip { - #callout(@green); - } - - .important { - #callout(@mauve); - } - - .caution { - #callout(@yellow); - } - - .warning { - #callout(@peach); - } - - div.example details[open] { - border-color: @surface1 !important; - } - - div:has(> dl):has(> div > span) { - // Version selector - &, - * { - background-color: @crust !important; - color: @text !important; - } - a { - color: @accent-color !important; - } - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/nixos-manual/catppuccin.user.less b/styles/nixos-manual/catppuccin.user.less new file mode 100644 index 0000000000..a67456b433 --- /dev/null +++ b/styles/nixos-manual/catppuccin.user.less @@ -0,0 +1,202 @@ +/* ==UserStyle== +@name NixOS Manual/Nixpkgs Manual Catppuccin +@namespace github.com/catppuccin/userstyles/styles/nixos-manual +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/nixos-manual +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/nixos-manual/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anixos-manual +@description Soothing pastel theme for NixOS Manual and Nixpkgs Manual +@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 url-prefix("https://nixos.org/manual/"), + url-prefix("https://daiderd.com/nix-darwin/manual/") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + + @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]; + + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + body { + background-color: @base !important; + color: @text; + } + + p, + ol, + ul { + color: @text !important; + } + + a { + border-bottom-color: @accent-color !important; + color: @accent-color; + } + + h1, + h2, + h3, + h4 { + color: @accent-color; + } + h5 { + color: fade(@accent-color, 85%); + } + + hr, + div.toc { + border-top-color: transparent; + border-bottom-color: @overlay1 !important; + } + + div.variablelist { + color: @text; + } + + code { + &.programlisting.hljs { + background-color: fade(@blue, 5%) !important; + } + } + + table.informaltable { + border-color: @surface1; + thead { + background-color: @mantle; + } + } + + #callout(@color) { + background-color: fade(@color, 7%) !important; + border-color: fade(@color, 20%); + + a, + p, + .title { + color: @color !important; + } + a { + border-bottom-color: @color !important; + } + } + + .note { + #callout(@blue); + } + + .tip { + #callout(@green); + } + + .important { + #callout(@mauve); + } + + .caution { + #callout(@yellow); + } + + .warning { + #callout(@peach); + } + + div.example details[open] { + border-color: @surface1 !important; + } + + div:has(> dl):has(> div > span) { + // Version selector + &, + * { + background-color: @crust !important; + color: @text !important; + } + a { + color: @accent-color !important; + } + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/nixos-search/catppuccin.user.css b/styles/nixos-search/catppuccin.user.css index 1e922519d9..3852aa68b4 100644 --- a/styles/nixos-search/catppuccin.user.css +++ b/styles/nixos-search/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name NixOS Search Catppuccin +@name NixOS Search Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/nixos-search @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/nixos-search -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/nixos-search/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/nixos-search/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anixos-search @description Soothing pastel theme for NixOS Search @author Catppuccin @@ -13,111 +13,4 @@ @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("search.nixos.org") { - @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; - } - } - - --background-color: @base; - --badge-background: @accent-color; - --button-active-background: @surface1; - --button-active-hover-background: @surface2; - --button-background: @surface0; - --button-hover-background: @surface2; - --color-active-hover-tab: @surface1; - --color-active-tab: @surface0; - --color-hover-tab: @surface1; - --headerbar-background-color: @mantle; - --hover-background: @surface0; - --link-color: @accent-color; - --info-label-background: @accent-color; - --dark-blue: @accent-color; - --light-blue: @accent-color; // used by focus outline - --line-color: @surface0; - --search-result-short-details-color: @subtext1; - --search-result-divider-line-color: @surface0; - --search-result-title-color: @accent-color; - --search-sidebar-link-color: @text; - --search-sidebar-selected-link-background: @accent-color; - --search-sidebar-selected-link-color: @crust; - --terminal-background: @surface0; - --terminal-color: @red; - --text-color: @text; - --text-color-light: @text; - --text-color-warning: @yellow; - - // hardcoded to #fff - .label, - .badge { - color: @crust; - } - - // hardcoded to #005580 - a:hover, - a:focus { - color: @text; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/nixos-search/catppuccin.user.less b/styles/nixos-search/catppuccin.user.less new file mode 100644 index 0000000000..1720b79fe0 --- /dev/null +++ b/styles/nixos-search/catppuccin.user.less @@ -0,0 +1,121 @@ +/* ==UserStyle== +@name NixOS Search Catppuccin +@namespace github.com/catppuccin/userstyles/styles/nixos-search +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/nixos-search +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/nixos-search/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anixos-search +@description Soothing pastel theme for NixOS Search +@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("search.nixos.org") { + @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; + } + } + + --background-color: @base; + --badge-background: @accent-color; + --button-active-background: @surface1; + --button-active-hover-background: @surface2; + --button-background: @surface0; + --button-hover-background: @surface2; + --color-active-hover-tab: @surface1; + --color-active-tab: @surface0; + --color-hover-tab: @surface1; + --headerbar-background-color: @mantle; + --hover-background: @surface0; + --link-color: @accent-color; + --info-label-background: @accent-color; + --dark-blue: @accent-color; + --light-blue: @accent-color; // used by focus outline + --line-color: @surface0; + --search-result-short-details-color: @subtext1; + --search-result-divider-line-color: @surface0; + --search-result-title-color: @accent-color; + --search-sidebar-link-color: @text; + --search-sidebar-selected-link-background: @accent-color; + --search-sidebar-selected-link-color: @crust; + --terminal-background: @surface0; + --terminal-color: @red; + --text-color: @text; + --text-color-light: @text; + --text-color-warning: @yellow; + + // hardcoded to #fff + .label, + .badge { + color: @crust; + } + + // hardcoded to #005580 + a:hover, + a:focus { + color: @text; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/npm/catppuccin.user.css b/styles/npm/catppuccin.user.css index 762dd1170a..2b209e2358 100644 --- a/styles/npm/catppuccin.user.css +++ b/styles/npm/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name npm Catppuccin +@name npm Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/npm @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/npm -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/npm/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/npm/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anpm @description Soothing pastel theme for npm @author Catppuccin @@ -13,1166 +13,4 @@ @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("www.npmjs.com") { - @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]; - - @red-filter: @catppuccin[@@lookup][@red_filter]; - - color-scheme: if(@lookup = latte, light, dark); - accent-color: @accent-color; - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - background-color: transparent; - - &:focus { - box-shadow: 0 0 0 2px @accent-color; - } - - &::placeholder { - color: @subtext0 !important; - } - } - - @npmGradient: linear-gradient(139deg, @peach, @maroon, @red, @pink); - - --color-fg-default: @text; - --color-fg-muted: @subtext1; - --color-fg-subtle: @subtext0; - --color-fg-on-emphasis: @base; - --color-fg-brand: @accent-color; - --color-fg-accent: @blue; - --color-fg-success: @green; - --color-fg-attention: @yellow; - --color-fg-danger: @red; - --color-border-strong: @surface0; - - --header-color: @text; - /* Used on deprecation confirmation page */ - --wombat-red: @maroon; - --wombat-red-hover: @red; - - --search-fg-muted: @subtext1; - --search-border: @surface0; - --search-bg-subtle: @surface0; - - &, - main { - background-color: @base !important; - color: @text; - } - - /* Primary background */ - .bg-white, - ._4ea0e50d { - background-color: @base; - } - - /* Background layer background */ - .bg-black-05, - ._7eb68a55, - .e9998f88 { - background-color: @mantle; - } - - /* Primary text */ - .black, - .black-90, - .black-80, - a { - color: @text; - } - - /* Secondary text */ - .black-70, - .black-60, - .dim:focus, - .dim:hover { - color: @subtext0; - } - - /* Inverse text */ - .white { - color: @base; - } - - /* Border colors */ - .b--black-10, - .b--black-20 { - border-color: @surface0; - } - - /* --- ARBITRARY --- */ - - /* Top loading bar */ - div.fixed.top-0.left-0.z-999 { - background-color: @accent-color; - } - - /* Magnifying glass icon (search box, discover packages) */ - svg g[stroke="#777777"] { - stroke: @subtext0; - } - - /* "Beta" pill */ - .a17280e0 { - color: @green; - border-color: @green; - } - /* Green checkmark */ - [fill="#107010"] { - fill: @green; - } - - /* --- HEADER --- */ - [data-test-id="notification-banner"] { - background-color: if( - @lookup = latte, - desaturate(lighten(@green, 30%), 5%), - desaturate(darken(@green, 5%), 5%) - ); - border-color: @green; - - #notification, - button[aria-label="Close notification"] { - color: if(@lookup = latte, @text, @base); - } - } - header { - border-bottom-color: @surface0; - - /* Top bar gradient */ - .e7070742 { - border-image: @npmGradient 3; - } - - /* Heart icon */ - ._0edb515f { - color: @text; - } - - /* Logo */ - a[href="/"] > svg > path { - fill: @text; - } - - /* Search box */ - form#search { - /* Search button */ - button[type="submit"] { - background-color: @subtext1; - } - - /* Search input wrapper */ - > div { - border-color: @surface0; - - &:focus-within { - border-color: @subtext1; - } - - /* Search input */ - div:has(input[type="search"]) { - background-color: @mantle; - - input[type="search"] { - color: @text; - - &:focus { - box-shadow: none; - } - - &::-webkit-search-cancel-button { - display: none; - } - } - } - - /* Search results (floating box) */ - div.list { - background-color: @base; - - ul[aria-label="Search results"] li { - border-bottom-color: @surface0; - - &:hover { - background-color: @surface1; - } - } - } - } - } - - /* Profile picture navigation */ - nav:has(> button[aria-label="Profile menu"]) { - > button { - /* Dropdown arrow */ - img[alt="avatar"] { - border-color: @text; - - + div > svg { - fill: @text; - } - } - } - - /* Popup */ - > div > div { - border-color: @surface0; - - /* Popup triangle */ - &::after { - border-bottom-color: @base; - } - &::before { - border-bottom-color: @surface0; - } - - /* Username */ - h2 { - border-bottom-color: @surface1; - - span { - color: @text; - } - } - - /* Navigation options */ - ul li a { - &:hover, - &:focus { - background-color: @crust; - } - - /* Red "Add Organization" button */ - &[href="/org/create"] { - border-color: @surface0; - color: @accent-color; - svg { - fill: @accent-color; - } - } - } - } - } - } - - /* --- HOME PAGE --- */ - - ._8c1ee087 { - background-image: linear-gradient( - 270deg, - fade(@red, 16%) 0%, - fade(@red, 56%) 18.45%, - fade(@red, 80%) 49.67%, - fade(@red, 56%) 82.52%, - fade(@red, 19%) 99.7%, - fade(@red, 0%) 99.71%, - fade(@red, 0%) 99.72%, - fade(@red, 16%) 99.73% - ), - url("https://static-production.npmjs.com/abf53a31b2da4657a1a004ee9358551c.png"); - - a[href="/signup"] { - background-color: @yellow; - } - a[href="/products/pro"] { - background-color: @red; - border-color: @text; - } - } - article > section:nth-of-type(2) { - color: @text; - } - - /* Popular libraries section */ - #popular-libraries-header + hr { - border-color: @accent-color; - } - ul[aria-labelledby="popular-libraries-header"] { - li a { - border-bottom-color: @surface0; - } - } - - /* Discover packages section */ - #discover-packages-header + hr { - border-color: mix(@red, @yellow); - } - ul[aria-labelledby="discover-packages-header"] li { - a { - color: @text; - border-color: @surface0; - } - &:nth-of-type(6n + 1):hover a { - color: @mauve; - border-bottom-color: @mauve; - } - &:nth-of-type(6n + 2):hover a { - color: @green; - border-bottom-color: @green; - } - &:nth-of-type(6n + 3):hover a { - color: @sky; - border-bottom-color: @sky; - } - &:nth-of-type(6n + 4):hover a { - color: @red; - border-bottom-color: @red; - } - &:nth-of-type(6n + 5):hover a { - color: @yellow; - border-bottom-color: @yellow; - } - &:nth-of-type(6n + 6):hover a { - color: @pink; - border-bottom-color: @pink; - } - } - - /* By the numbers section */ - ._8f26e3fd { - border-color: @yellow; - } - - /* Recently updated packages section */ - #recently-updated-packages-header + hr { - border-color: @accent-color; - } - - /* --- PACKAGE PAGES --- */ - - /* Deprecation warning */ - .bg-washed-red { - background-color: fade(@red, 30%); - - code { - background-color: @mantle; - color: @text; - } - } - .red { - color: @red !important; - } - - /* "public" text */ - ._813b53b2 { - color: @green; - } - /* TypeScript logo */ - img[alt="TypeScript icon, indicating that this package has built-in type declarations"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - /* DefinitelyTyped logo */ - img[alt="DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/bootstrap package"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - /* Navigation tabs */ - #package-tab(@color) { - border-color: @color; - - &:has(> a[aria-selected="false"]):hover, - &:has(> a[aria-selected="true"]) { - background-color: fade(@color, 20%); - } - - a { - color: @color; - } - } - ul[aria-owns*="package-tab-"] { - li { - &:has(#package-tab-readme), - &:has(#package-tab-members) { - #package-tab(@yellow); - } - &:has(#package-tab-code), - &:has(#package-tab-admin), - &:has(#package-tab-packages) { - #package-tab(@red); - } - &:has(#package-tab-dependents), - &:has(#package-tab-billing) { - #package-tab(@mauve); - } - &:has(#package-tab-dependencies) { - #package-tab(@pink); - } - &:has(#package-tab-versions) { - #package-tab(@sapphire); - } - &:has(#package-tab-orgs), - &:has(#package-tab-teams) { - #package-tab(@green); - } - } - } - - /* Sidebar icons */ - svg:has(+ p > [aria-label="Copy install command line"]), - button[aria-label="Copy install command line"] svg path, - [aria-labelledby="repository repository-link"] svg g, - [aria-labelledby="homePage homePage-link"] svg path, - [aria-label="Showing weekly downloads"] svg { - fill: @text; - } - /* Copy install command box */ - p:has(button[aria-label="Copy install command line"]) { - border-color: @surface0; - } - /* Weekly downloads chart */ - div:has(> svg > [class^="sparkline--"]) { - border-bottom-color: fade(@accent-color, 20%); - - svg { - stroke: @accent-color; - fill: fade(@accent-color, 20%); - } - } - - /* Sidebar provenance popup */ - button[aria-label="View more provenance details"] { - + div > div > div { - background-color: @base; - border-color: @surface0; - - &::after { - border-bottom-color: @base; - } - - &::before { - border-bottom-color: @surface0; - } - - > div { - div:nth-of-type(2) { - border-color: @surface0; - } - } - } - } - ._1e07caeb { - color: @text; - } - ._9666fddd, - ._861fb12a, - ._2160593e { - color: @subtext0; - } - /* Provenance icon */ - .f97c6116 { - fill: @green; - } - /* Provenance section at bottom */ - #provenance-details-header + div { - border-color: @surface0; - } - - /* Sidebar text */ - .c84e15be { - color: @subtext0; - } - - /* Tab headings */ - - [id^="tabpanel-"] h2 { - color: @text; - } - - /* File explorer tab */ - #tabpanel-explore > div > div { - border-color: @surface0; - - > div:has(h2), - div:has(+ pre) { - border-bottom-color: @surface0; - } - - /* Back button inside file */ - ._450b46e9 { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - ul li { - border-bottom-color: @surface0; - - &:hover { - background-color: @surface0; - } - - img { - @folder: escape( - '' - ); - @file: escape( - '' - ); - &._1528cda6 { - content: url("data:image/svg+xml,@{folder}"); - } - &._7ec1ed32 { - content: url("data:image/svg+xml,@{file}"); - } - } - } - - /* File paths/link */ - button, - /* Loading spinner */ - svg:has(> circle) { - color: @text !important; - } - - div:has(+ pre) { - background-color: @mantle; - } - pre { - background-color: @base !important; - color: @text !important; - - .react-syntax-highlighter-line-number { - color: @subtext1 !important; - } - - [style="color: rgb(102, 102, 102);"] { - color: var(--color-prettylights-syntax-comment) !important; - } - [style="color: rgb(150, 152, 150);"] { - color: @overlay0 !important; - } - [style="color: rgb(0, 92, 197);"] { - color: var(--color-prettylights-syntax-constant) !important; - } - [style="color: rgb(215, 58, 73);"], - [style="color: rgb(0, 134, 179);"] { - color: var(--color-prettylights-syntax-keyword) !important; - } - [style="color: rgb(3, 47, 98);"] { - color: var(--color-prettylights-syntax-string) !important; - } - [style="color: rgb(111, 66, 193);"] { - color: var(--color-prettylights-syntax-entity) !important; - } - [style*="color: rgb(223, 80, 0);"] { - color: @peach !important; - } - [style*="color: rgb(99, 163, 92);"] { - color: @green !important; - } - - .hljs-subst, - .hljs-built_in { - color: var( - --color-prettylights-syntax-storage-modifier-import - ) !important; - } - } - } - - /* Versions tab */ - #tabpanel-versions { - ul li[class] div { - border-bottom-color: @surface0; - } - } - - /* Dependencies/dependents tab */ - #tabpanel-dependencies, - #tabpanel-dependents { - ul a { - color: @red; - - &:hover { - color: @text; - } - } - } - - /* Readme tab */ - #tabpanel-readme #readme { - color: @text; - a { - color: @accent-color; - } - h1, - h2, - h3, - h4, - h5, - h6 { - color: @text; - a, - svg { - color: @text; - fill: @text; - } - } - p, - li { - color: @subtext0; - } - strong { - color: @text; - } - pre, - code { - background-color: @mantle; - color: @text; - } - pre.editor.editor-colors { - .keyword, - .storage.type { - color: var(--color-prettylights-syntax-keyword); - font-weight: normal; // stylelint-disable-line property-disallowed-list - } - .string { - color: var(--color-prettylights-syntax-string); - } - .variable { - color: var(--color-prettylights-syntax-variable); - } - .entity, - .function { - color: var(--color-prettylights-syntax-entity); - } - .comment { - color: var(--color-prettylights-syntax-comment); - } - .storage.type.function { - color: var(--color-prettylights-syntax-keyword); - } - .punctuation.definition:not(.string) { - color: @text; - } - .constant { - color: var(--color-prettylights-syntax-constant); - } - } - h1, - h2 { - border-bottom-color: @surface1; - } - h4 { - border-bottom-color: @surface0; - } - blockquote { - background-color: lighten(@surface0, 2%); - border-left-color: @surface2; - } - table { - color: @text; - border-bottom-style: none; - td, - th { - background-color: @base; - border-color: @surface0; - } - } - } - - /* Keyword links */ - #user-content-keywords { - color: @text; - - + ul a { - color: @accent-color; - - &:hover { - color: @text; - } - } - } - /* Share provenance feedback link */ - #user-content-provenance a[href=" https://github.com/npm/feedback"] - { - color: @text; - } - - /* Settings */ - div[role="listitem"], - div[role="radiogroup"] { - background: @base; - } - - /* --- PROFILE PAGES --- */ - - .eaac77a6 { - color: @surface2; - } - ._34da67ba { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - ._69ab2ca0 { - border-color: @surface0; - background-color: @mantle; - } - - /* --- SETTINGS PAGES --- */ - - /* Headings */ - ._7fb5e603 h1 { - color: @text; - } - - /* Left panel */ - aside.e9998f88 { - box-shadow: none; - - ul.c63ae7fc li:hover { - background-color: @crust; - } - - /* Create organization button */ - #organizationsHeader + a[href="/org/create"] { - color: @green; - border-color: @green; - - &:hover { - color: @mantle; - background-color: @green; - } - } - } - - /* Linked accounts & recovery option settings */ - .b49405c7 { - color: @text; - } - - /* Email and password settings */ - p:has(+ div > a[href^="/settings/"][href$="/email"] + a[href^="/settings/"][href$="/password"]), - /* Delete account */ - p:has(+ a[href^="/settings/"][href$="/delete-account"]) { - color: @text; - } - - /* Access tokens settings */ - form#tokens { - table { - td { - span { - color: @subtext1; - - &:hover { - color: @text; - } - } - code { - color: @subtext0; - } - } - + div { - color: @text; - } - } - } - ._305a9f55 ._038c0473 { - border-color: @accent-color; - background-color: fade(@accent-color, 20%); - } - button[aria-label^="Delete token ending in"] { - ._305a9f55 ._038c0473 & { - border-color: @surface2; - } - &.b55db0e2:hover { - border-color: @red; - background-color: @red; - color: @base; - } - } - - /* 2FA authentication page */ - ._75ce47e7 { - background-color: @base; - - ._71252860, - .d7eb966d { - color: @text; - } - - [fill="#65C6C9"], - [fill="url(#paint1_linear_449_428)"], - [fill="url(#paint0_linear_110_3043)"] { - fill: @blue; - } - [fill="url(#paint2_linear_449_428)"], - [fill="url(#paint1_linear_110_3043)"] { - fill: @base; - } - - &::before { - background-image: @npmGradient; - } - } - ._320f7a67 { - background-color: @base; - - &::before { - background-image: @npmGradient; - } - - section { - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6); - } - - div[role="radiogroup"] { - color: @text; - background-color: @surface0; - } - - #gat-banner span { - color: @yellow; - } - } - - /* Create organization page */ - .acb78000::before { - background-image: @npmGradient; - } - /* Step 1: create an org */ - .e99f3f5d { - color: @green; - } - img[src="https://static-production.npmjs.com/28dd82ec6e5fe3cfbb4d2c4ec492076b.svg"] - { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - /* Step 2: invite members */ - img[src="https://static-production.npmjs.com/d6654c911c7cf2159948148754c95bb6.svg"] - { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - div:has(> form[action="/org/create"]) { - color: @text; - - &, - + div { - border-color: @surface0; - } - } - - /* Billing information page */ - .bg-washed-green { - background-color: fade( - lighten(@teal, 10%), - if(@lookup = latte, 50%, 100%) - ); - } - .b--light-green { - border-color: @teal; - } - - /* Pricing page */ - - .dark-gray { - color: @text !important; - } - - .light-silver { - color: @subtext1; - } - - .npm-red { - color: @accent-color; - } - - .a11y-light-gray, - .bg-gray { - background-color: @subtext0 !important; - } - - .bg-dark-gray { - background-color: @text; - } - - .bg-light-gray, - .bg-near-white { - background-color: @surface0 !important; - } - - .npm-bg-hero, - .npm-bg-teams { - background: none; - - > .white { - color: @text; - } - } - - .npm-bg-gradient { - background-image: @npmGradient; - } - - .npm-rainbow-circle { - background-image: linear-gradient(@crust, @crust), @npmGradient; - } - - .npm-btn-red { - background-color: @red; - border-bottom-color: @yellow; - } - - a[href="/products/teams"].npm-title { - background-color: @red; - color: @crust; - border-color: @text; - } - - ul.featureComparisonList img[alt="feature included"] { - filter: @red-filter; - } - - /* --- GENERIC --- */ - - /* Buttons/button links */ - ._24a1e9c7 { - background-image: none; - background-color: @surface0; - color: @text; - border-color: @surface1; - - &:not([disabled]):hover { - background-color: @surface1; - } - - &[disabled] { - background-color: @mantle; - color: @subtext0; - } - - /* Danger */ - &._4a3f8f21 { - & when (@lookup = latte) { - background-color: lighten(@red, 30%); - - &:hover { - background-color: lighten(@red, 25%); - } - } - - & when not (@lookup = latte) { - background-color: @red; - color: @surface1; - - &:hover { - background-color: lighten(@red, 5%); - } - } - } - - /* Success */ - &.c37751f6 { - & when (@lookup = latte) { - background-color: lighten(@green, 30%); - - &:hover { - background-color: lighten(@green, 25%); - } - } - - & when not (@lookup = latte) { - background-color: @green; - color: @surface1; - - &:hover { - background-color: lighten(@green, 5%); - } - } - } - } - - /* Signup form */ - #signup { - /* Logged out signup button in header */ - &[href="/signup"] { - border-color: @surface0; - } - - #signup_email_error_message, - #signup_password_error_message { - color: @red; - } - - fieldset { - color: @text; - } - } - - button[name="show-hide-password"] { - background-color: transparent; - color: @text; - - &:hover { - background-color: @mantle; - } - - &::before { - background-color: @surface0; - } - } - - /* Dropdowns */ - details ul[class*="Dropdown__DropdownMenu"] { - background-color: @base; - border-color: @surface0; - - li a:hover { - background-color: @mantle !important; - color: @text !important; - } - } - /* Select menus */ - select { - background-color: @surface0; - border-color: @surface2; - color: @text; - } - - /* --- SEARCH RESULTS --- */ - nav[aria-label="Pagination Navigation"] { - div > a { - background-color: @base; - border-color: @surface0; - - &:hover { - background-color: @mantle; - } - } - } - #pkg-list-exact-match { - color: @base; - background-color: @accent-color; - } - - /* Username links */ - a[aria-label^="publisher"]:hover { - color: @accent-color; - } - - /* --- FOOTER --- */ - - footer { - h3 { - color: @text; - } - ul a:hover { - color: @accent-color; - } - a[href="https://github.com/npm"] svg - { - > polygon { - fill: @base; - } - - > rect { - fill: @text; - } - } - a[href="https://github.com"] svg - { - fill: @text; - } - &::after { - background-image: @npmGradient; - } - } - - --color-prettylights-syntax-comment: @overlay2; - --color-prettylights-syntax-constant: @teal; - --color-prettylights-syntax-entity: @blue; - --color-prettylights-syntax-storage-modifier-import: @peach; - --color-prettylights-syntax-entity-tag: @teal; - --color-prettylights-syntax-keyword: @mauve; - --color-prettylights-syntax-string: @green; - --color-prettylights-syntax-variable: @peach; - --color-prettylights-syntax-invalid-illegal-text: @red; - --color-prettylights-syntax-invalid-illegal-bg: fadeout(@red, 85%); - --color-prettylights-syntax-markup-heading: @teal; - --color-prettylights-syntax-markup-italic: @yellow; - --color-prettylights-syntax-markup-bold: @yellow; - --color-prettylights-syntax-markup-deleted-text: @text; - --color-prettylights-syntax-markup-deleted-bg: fadeout(@red, 60%); - --color-prettylights-syntax-markup-inserted-text: @text; - --color-prettylights-syntax-markup-inserted-bg: fadeout(@green, 60%); - --color-prettylights-syntax-markup-changed-text: @text; - --color-prettylights-syntax-markup-changed-bg: fadeout(@yellow, 60%); - --color-prettylights-syntax-markup-ignored-text: @text; - - /* stylelint-disable declaration-block-single-line-max-declarations */ - /* prettier-ignore */ - div.highlight pre {.pl-mb,.pl-mdr,.pl-c{color:var(--color-prettylights-syntax-comment)}.pl-c1,.pl-s .pl-v{color:var(--color-prettylights-syntax-constant)}.pl-e,.pl-en{color:var(--color-prettylights-syntax-entity)}.pl-s .pl-s1,.pl-smi{color:var(--color-prettylights-syntax-storage-modifier-import)}.pl-ent{color:var(--color-prettylights-syntax-entity-tag)}.pl-k{color:var(--color-prettylights-syntax-keyword)}.pl-pds,.pl-s,.pl-s .pl-pse .pl-s1,.pl-sr,.pl-sr .pl-cce,.pl-sr .pl-sra,.pl-sr .pl-sre{color:var(--color-prettylights-syntax-string)}.pl-smw,.pl-v{color:var(--color-prettylights-syntax-variable)}.pl-bu{color:var(--color-prettylights-syntax-brackethighlighter-unmatched)}.pl-ii{color:var(--color-prettylights-syntax-invalid-illegal-text);background-color:var(--color-prettylights-syntax-invalid-illegal-bg)}.pl-c2{color:var(--color-prettylights-syntax-carriage-return-text);background-color:var(--color-prettylights-syntax-carriage-return-bg)}.pl-sr .pl-cce{color:var(--color-prettylights-syntax-string-regexp)}.pl-ml{color:var(--color-prettylights-syntax-markup-list)}.pl-mh,.pl-mh .pl-en,.pl-ms{color:var(--color-prettylights-syntax-markup-heading)}.pl-mi{color:var(--color-prettylights-syntax-markup-italic)}.pl-mb{color:var(--color-prettylights-syntax-markup-bold)}.pl-md{color:var(--color-prettylights-syntax-markup-deleted-text);background-color:var(--color-prettylights-syntax-markup-deleted-bg)}.pl-mi1{color:var(--color-prettylights-syntax-markup-inserted-text);background-color:var(--color-prettylights-syntax-markup-inserted-bg)}.pl-mc{color:var(--color-prettylights-syntax-markup-changed-text);background-color:var(--color-prettylights-syntax-markup-changed-bg)}.pl-mi2{color:var(--color-prettylights-syntax-markup-ignored-text);background-color:var(--color-prettylights-syntax-markup-ignored-bg)}.pl-mdr{color:var(--color-prettylights-syntax-meta-diff-range)}.pl-ba{color:var(--color-prettylights-syntax-brackethighlighter-angle)}.pl-sg{color:var(--color-prettylights-syntax-sublimelinter-gutter-mark)}.pl-corl{text-decoration:underline;color:var(--color-prettylights-syntax-constant-other-reference-link)}} - /* stylelint-enable declaration-block-single-line-max-declarations */ - } -} - -/* prettier-ignore */ -@catppuccin: { - @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @red_filter: brightness(0) saturate(100%) invert(13%) sepia(93%) saturate(6590%) hue-rotate(343deg) brightness(85%) contrast(92%); @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; @red_filter: brightness(0) saturate(100%) invert(79%) sepia(26%) saturate(3775%) hue-rotate(304deg) brightness(96%) contrast(88%); @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; @red_filter: brightness(0) saturate(100%) invert(62%) sepia(22%) saturate(880%) hue-rotate(302deg) brightness(98%) contrast(90%); @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; @red_filter: brightness(0) saturate(100%) invert(87%) sepia(37%) saturate(4988%) hue-rotate(296deg) brightness(105%) contrast(91%); @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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/npm/catppuccin.user.less b/styles/npm/catppuccin.user.less new file mode 100644 index 0000000000..3e21333818 --- /dev/null +++ b/styles/npm/catppuccin.user.less @@ -0,0 +1,1177 @@ +/* ==UserStyle== +@name npm Catppuccin +@namespace github.com/catppuccin/userstyles/styles/npm +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/npm +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/npm/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anpm +@description Soothing pastel theme for npm +@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("www.npmjs.com") { + @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]; + + @red-filter: @catppuccin[@@lookup][@red_filter]; + + color-scheme: if(@lookup = latte, light, dark); + accent-color: @accent-color; + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + background-color: transparent; + + &:focus { + box-shadow: 0 0 0 2px @accent-color; + } + + &::placeholder { + color: @subtext0 !important; + } + } + + @npmGradient: linear-gradient(139deg, @peach, @maroon, @red, @pink); + + --color-fg-default: @text; + --color-fg-muted: @subtext1; + --color-fg-subtle: @subtext0; + --color-fg-on-emphasis: @base; + --color-fg-brand: @accent-color; + --color-fg-accent: @blue; + --color-fg-success: @green; + --color-fg-attention: @yellow; + --color-fg-danger: @red; + --color-border-strong: @surface0; + + --header-color: @text; + /* Used on deprecation confirmation page */ + --wombat-red: @maroon; + --wombat-red-hover: @red; + + --search-fg-muted: @subtext1; + --search-border: @surface0; + --search-bg-subtle: @surface0; + + &, + main { + background-color: @base !important; + color: @text; + } + + /* Primary background */ + .bg-white, + ._4ea0e50d { + background-color: @base; + } + + /* Background layer background */ + .bg-black-05, + ._7eb68a55, + .e9998f88 { + background-color: @mantle; + } + + /* Primary text */ + .black, + .black-90, + .black-80, + a { + color: @text; + } + + /* Secondary text */ + .black-70, + .black-60, + .dim:focus, + .dim:hover { + color: @subtext0; + } + + /* Inverse text */ + .white { + color: @base; + } + + /* Border colors */ + .b--black-10, + .b--black-20 { + border-color: @surface0; + } + + /* --- ARBITRARY --- */ + + /* Top loading bar */ + div.fixed.top-0.left-0.z-999 { + background-color: @accent-color; + } + + /* Magnifying glass icon (search box, discover packages) */ + svg g[stroke="#777777"] { + stroke: @subtext0; + } + + /* "Beta" pill */ + .a17280e0 { + color: @green; + border-color: @green; + } + /* Green checkmark */ + [fill="#107010"] { + fill: @green; + } + + /* --- HEADER --- */ + [data-test-id="notification-banner"] { + background-color: if( + @lookup = latte, + desaturate(lighten(@green, 30%), 5%), + desaturate(darken(@green, 5%), 5%) + ); + border-color: @green; + + #notification, + button[aria-label="Close notification"] { + color: if(@lookup = latte, @text, @base); + } + } + header { + border-bottom-color: @surface0; + + /* Top bar gradient */ + .e7070742 { + border-image: @npmGradient 3; + } + + /* Heart icon */ + ._0edb515f { + color: @text; + } + + /* Logo */ + a[href="/"] > svg > path { + fill: @text; + } + + /* Search box */ + form#search { + /* Search button */ + button[type="submit"] { + background-color: @subtext1; + } + + /* Search input wrapper */ + > div { + border-color: @surface0; + + &:focus-within { + border-color: @subtext1; + } + + /* Search input */ + div:has(input[type="search"]) { + background-color: @mantle; + + input[type="search"] { + color: @text; + + &:focus { + box-shadow: none; + } + + &::-webkit-search-cancel-button { + display: none; + } + } + } + + /* Search results (floating box) */ + div.list { + background-color: @base; + + ul[aria-label="Search results"] li { + border-bottom-color: @surface0; + + &:hover { + background-color: @surface1; + } + } + } + } + } + + /* Profile picture navigation */ + nav:has(> button[aria-label="Profile menu"]) { + > button { + /* Dropdown arrow */ + img[alt="avatar"] { + border-color: @text; + + + div > svg { + fill: @text; + } + } + } + + /* Popup */ + > div > div { + border-color: @surface0; + + /* Popup triangle */ + &::after { + border-bottom-color: @base; + } + &::before { + border-bottom-color: @surface0; + } + + /* Username */ + h2 { + border-bottom-color: @surface1; + + span { + color: @text; + } + } + + /* Navigation options */ + ul li a { + &:hover, + &:focus { + background-color: @crust; + } + + /* Red "Add Organization" button */ + &[href="/org/create"] { + border-color: @surface0; + color: @accent-color; + svg { + fill: @accent-color; + } + } + } + } + } + } + + /* --- HOME PAGE --- */ + + ._8c1ee087 { + background-image: + linear-gradient( + 270deg, + fade(@red, 16%) 0%, + fade(@red, 56%) 18.45%, + fade(@red, 80%) 49.67%, + fade(@red, 56%) 82.52%, + fade(@red, 19%) 99.7%, + fade(@red, 0%) 99.71%, + fade(@red, 0%) 99.72%, + fade(@red, 16%) 99.73% + ), + url("https://static-production.npmjs.com/abf53a31b2da4657a1a004ee9358551c.png"); + + a[href="/signup"] { + background-color: @yellow; + } + a[href="/products/pro"] { + background-color: @red; + border-color: @text; + } + } + article > section:nth-of-type(2) { + color: @text; + } + + /* Popular libraries section */ + #popular-libraries-header + hr { + border-color: @accent-color; + } + ul[aria-labelledby="popular-libraries-header"] { + li a { + border-bottom-color: @surface0; + } + } + + /* Discover packages section */ + #discover-packages-header + hr { + border-color: mix(@red, @yellow); + } + ul[aria-labelledby="discover-packages-header"] li { + a { + color: @text; + border-color: @surface0; + } + &:nth-of-type(6n+1):hover a { + color: @mauve; + border-bottom-color: @mauve; + } + &:nth-of-type(6n+2):hover a { + color: @green; + border-bottom-color: @green; + } + &:nth-of-type(6n+3):hover a { + color: @sky; + border-bottom-color: @sky; + } + &:nth-of-type(6n+4):hover a { + color: @red; + border-bottom-color: @red; + } + &:nth-of-type(6n+5):hover a { + color: @yellow; + border-bottom-color: @yellow; + } + &:nth-of-type(6n+6):hover a { + color: @pink; + border-bottom-color: @pink; + } + } + + /* By the numbers section */ + ._8f26e3fd { + border-color: @yellow; + } + + /* Recently updated packages section */ + #recently-updated-packages-header + hr { + border-color: @accent-color; + } + + /* --- PACKAGE PAGES --- */ + + /* Deprecation warning */ + .bg-washed-red { + background-color: fade(@red, 30%); + + code { + background-color: @mantle; + color: @text; + } + } + .red { + color: @red !important; + } + + /* "public" text */ + ._813b53b2 { + color: @green; + } + /* TypeScript logo */ + img[alt="TypeScript icon, indicating that this package has built-in type declarations"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + /* DefinitelyTyped logo */ + img[alt="DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/bootstrap package"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + /* Navigation tabs */ + #package-tab(@color) { + border-color: @color; + + &:has(> a[aria-selected="false"]):hover, + &:has(> a[aria-selected="true"]) { + background-color: fade(@color, 20%); + } + + a { + color: @color; + } + } + ul[aria-owns*="package-tab-"] { + li { + &:has(#package-tab-readme), + &:has(#package-tab-members) { + #package-tab(@yellow); + } + &:has(#package-tab-code), + &:has(#package-tab-admin), + &:has(#package-tab-packages) { + #package-tab(@red); + } + &:has(#package-tab-dependents), + &:has(#package-tab-billing) { + #package-tab(@mauve); + } + &:has(#package-tab-dependencies) { + #package-tab(@pink); + } + &:has(#package-tab-versions) { + #package-tab(@sapphire); + } + &:has(#package-tab-orgs), + &:has(#package-tab-teams) { + #package-tab(@green); + } + } + } + + /* Sidebar icons */ + svg:has(+ p > [aria-label="Copy install command line"]), + button[aria-label="Copy install command line"] svg path, + [aria-labelledby="repository repository-link"] svg g, + [aria-labelledby="homePage homePage-link"] svg path, + [aria-label="Showing weekly downloads"] svg { + fill: @text; + } + /* Copy install command box */ + p:has(button[aria-label="Copy install command line"]) { + border-color: @surface0; + } + /* Weekly downloads chart */ + div:has(> svg > [class^="sparkline--"]) { + border-bottom-color: fade(@accent-color, 20%); + + svg { + stroke: @accent-color; + fill: fade(@accent-color, 20%); + } + } + + /* Sidebar provenance popup */ + button[aria-label="View more provenance details"] { + + div > div > div { + background-color: @base; + border-color: @surface0; + + &::after { + border-bottom-color: @base; + } + + &::before { + border-bottom-color: @surface0; + } + + > div { + div:nth-of-type(2) { + border-color: @surface0; + } + } + } + } + ._1e07caeb { + color: @text; + } + ._9666fddd, + ._861fb12a, + ._2160593e { + color: @subtext0; + } + /* Provenance icon */ + .f97c6116 { + fill: @green; + } + /* Provenance section at bottom */ + #provenance-details-header + div { + border-color: @surface0; + } + + /* Sidebar text */ + .c84e15be { + color: @subtext0; + } + + /* Tab headings */ + + [id^="tabpanel-"] h2 { + color: @text; + } + + /* File explorer tab */ + #tabpanel-explore > div > div { + border-color: @surface0; + + > div:has(h2), + div:has(+ pre) { + border-bottom-color: @surface0; + } + + /* Back button inside file */ + ._450b46e9 { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + ul li { + border-bottom-color: @surface0; + + &:hover { + background-color: @surface0; + } + + img { + @folder: escape( + '' + ); + @file: escape( + '' + ); + &._1528cda6 { + content: url("data:image/svg+xml,@{folder}"); + } + &._7ec1ed32 { + content: url("data:image/svg+xml,@{file}"); + } + } + } + + /* File paths/link */ + button, + /* Loading spinner */ + svg:has(> circle) { + color: @text !important; + } + + div:has(+ pre) { + background-color: @mantle; + } + pre { + background-color: @base !important; + color: @text !important; + + .react-syntax-highlighter-line-number { + color: @subtext1 !important; + } + + [style="color: rgb(102, 102, 102);"] { + color: var(--color-prettylights-syntax-comment) !important; + } + [style="color: rgb(150, 152, 150);"] { + color: @overlay0 !important; + } + [style="color: rgb(0, 92, 197);"] { + color: var(--color-prettylights-syntax-constant) !important; + } + [style="color: rgb(215, 58, 73);"], + [style="color: rgb(0, 134, 179);"] { + color: var(--color-prettylights-syntax-keyword) !important; + } + [style="color: rgb(3, 47, 98);"] { + color: var(--color-prettylights-syntax-string) !important; + } + [style="color: rgb(111, 66, 193);"] { + color: var(--color-prettylights-syntax-entity) !important; + } + [style*="color: rgb(223, 80, 0);"] { + color: @peach !important; + } + [style*="color: rgb(99, 163, 92);"] { + color: @green !important; + } + + .hljs-subst, + .hljs-built_in { + color: var(--color-prettylights-syntax-storage-modifier-import) + !important; + } + } + } + + /* Versions tab */ + #tabpanel-versions { + ul li[class] div { + border-bottom-color: @surface0; + } + } + + /* Dependencies/dependents tab */ + #tabpanel-dependencies, + #tabpanel-dependents { + ul a { + color: @red; + + &:hover { + color: @text; + } + } + } + + /* Readme tab */ + #tabpanel-readme #readme { + color: @text; + a { + color: @accent-color; + } + h1, + h2, + h3, + h4, + h5, + h6 { + color: @text; + a, + svg { + color: @text; + fill: @text; + } + } + p, + li { + color: @subtext0; + } + strong { + color: @text; + } + pre, + code { + background-color: @mantle; + color: @text; + } + pre.editor.editor-colors { + .keyword, + .storage.type { + color: var(--color-prettylights-syntax-keyword); + font-weight: normal; // stylelint-disable-line property-disallowed-list + } + .string { + color: var(--color-prettylights-syntax-string); + } + .variable { + color: var(--color-prettylights-syntax-variable); + } + .entity, + .function { + color: var(--color-prettylights-syntax-entity); + } + .comment { + color: var(--color-prettylights-syntax-comment); + } + .storage.type.function { + color: var(--color-prettylights-syntax-keyword); + } + .punctuation.definition:not(.string) { + color: @text; + } + .constant { + color: var(--color-prettylights-syntax-constant); + } + } + h1, + h2 { + border-bottom-color: @surface1; + } + h4 { + border-bottom-color: @surface0; + } + blockquote { + background-color: lighten(@surface0, 2%); + border-left-color: @surface2; + } + table { + color: @text; + border-bottom-style: none; + td, + th { + background-color: @base; + border-color: @surface0; + } + } + } + + /* Keyword links */ + #user-content-keywords { + color: @text; + + + ul a { + color: @accent-color; + + &:hover { + color: @text; + } + } + } + /* Share provenance feedback link */ + #user-content-provenance a[href=" https://github.com/npm/feedback"] { + color: @text; + } + + /* Settings */ + div[role="listitem"], + div[role="radiogroup"] { + background: @base; + } + + /* --- PROFILE PAGES --- */ + + .eaac77a6 { + color: @surface2; + } + ._34da67ba { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + ._69ab2ca0 { + border-color: @surface0; + background-color: @mantle; + } + + /* --- SETTINGS PAGES --- */ + + /* Headings */ + ._7fb5e603 h1 { + color: @text; + } + + /* Left panel */ + aside.e9998f88 { + box-shadow: none; + + ul.c63ae7fc li:hover { + background-color: @crust; + } + + /* Create organization button */ + #organizationsHeader + a[href="/org/create"] { + color: @green; + border-color: @green; + + &:hover { + color: @mantle; + background-color: @green; + } + } + } + + /* Linked accounts & recovery option settings */ + .b49405c7 { + color: @text; + } + + /* Email and password settings */ + p:has( + + div + > a[href^="/settings/"][href$="/email"] + + a[href^="/settings/"][href$="/password"] + ), + /* Delete account */ + p:has(+ a[href^="/settings/"][href$="/delete-account"]) { + color: @text; + } + + /* Access tokens settings */ + form#tokens { + table { + td { + span { + color: @subtext1; + + &:hover { + color: @text; + } + } + code { + color: @subtext0; + } + } + + div { + color: @text; + } + } + } + ._305a9f55 ._038c0473 { + border-color: @accent-color; + background-color: fade(@accent-color, 20%); + } + button[aria-label^="Delete token ending in"] { + ._305a9f55 ._038c0473 & { + border-color: @surface2; + } + &.b55db0e2:hover { + border-color: @red; + background-color: @red; + color: @base; + } + } + + /* 2FA authentication page */ + ._75ce47e7 { + background-color: @base; + + ._71252860, + .d7eb966d { + color: @text; + } + + [fill="#65C6C9"], + [fill="url(#paint1_linear_449_428)"], + [fill="url(#paint0_linear_110_3043)"] { + fill: @blue; + } + [fill="url(#paint2_linear_449_428)"], + [fill="url(#paint1_linear_110_3043)"] { + fill: @base; + } + + &::before { + background-image: @npmGradient; + } + } + ._320f7a67 { + background-color: @base; + + &::before { + background-image: @npmGradient; + } + + section { + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6); + } + + div[role="radiogroup"] { + color: @text; + background-color: @surface0; + } + + #gat-banner span { + color: @yellow; + } + } + + /* Create organization page */ + .acb78000::before { + background-image: @npmGradient; + } + /* Step 1: create an org */ + .e99f3f5d { + color: @green; + } + img[src="https://static-production.npmjs.com/28dd82ec6e5fe3cfbb4d2c4ec492076b.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + /* Step 2: invite members */ + img[src="https://static-production.npmjs.com/d6654c911c7cf2159948148754c95bb6.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + div:has(> form[action="/org/create"]) { + color: @text; + + &, + + div { + border-color: @surface0; + } + } + + /* Billing information page */ + .bg-washed-green { + background-color: fade( + lighten(@teal, 10%), + if(@lookup = latte, 50%, 100%) + ); + } + .b--light-green { + border-color: @teal; + } + + /* Pricing page */ + + .dark-gray { + color: @text !important; + } + + .light-silver { + color: @subtext1; + } + + .npm-red { + color: @accent-color; + } + + .a11y-light-gray, + .bg-gray { + background-color: @subtext0 !important; + } + + .bg-dark-gray { + background-color: @text; + } + + .bg-light-gray, + .bg-near-white { + background-color: @surface0 !important; + } + + .npm-bg-hero, + .npm-bg-teams { + background: none; + + > .white { + color: @text; + } + } + + .npm-bg-gradient { + background-image: @npmGradient; + } + + .npm-rainbow-circle { + background-image: + linear-gradient(@crust, @crust), + @npmGradient; + } + + .npm-btn-red { + background-color: @red; + border-bottom-color: @yellow; + } + + a[href="/products/teams"].npm-title { + background-color: @red; + color: @crust; + border-color: @text; + } + + ul.featureComparisonList img[alt="feature included"] { + filter: @red-filter; + } + + /* --- GENERIC --- */ + + /* Buttons/button links */ + ._24a1e9c7 { + background-image: none; + background-color: @surface0; + color: @text; + border-color: @surface1; + + &:not([disabled]):hover { + background-color: @surface1; + } + + &[disabled] { + background-color: @mantle; + color: @subtext0; + } + + /* Danger */ + &._4a3f8f21 { + & when (@lookup = latte) { + background-color: lighten(@red, 30%); + + &:hover { + background-color: lighten(@red, 25%); + } + } + + & when not(@lookup = latte) { + background-color: @red; + color: @surface1; + + &:hover { + background-color: lighten(@red, 5%); + } + } + } + + /* Success */ + &.c37751f6 { + & when (@lookup = latte) { + background-color: lighten(@green, 30%); + + &:hover { + background-color: lighten(@green, 25%); + } + } + + & when not(@lookup = latte) { + background-color: @green; + color: @surface1; + + &:hover { + background-color: lighten(@green, 5%); + } + } + } + } + + /* Signup form */ + #signup { + /* Logged out signup button in header */ + &[href="/signup"] { + border-color: @surface0; + } + + #signup_email_error_message, + #signup_password_error_message { + color: @red; + } + + fieldset { + color: @text; + } + } + + button[name="show-hide-password"] { + background-color: transparent; + color: @text; + + &:hover { + background-color: @mantle; + } + + &::before { + background-color: @surface0; + } + } + + /* Dropdowns */ + details ul[class*="Dropdown__DropdownMenu"] { + background-color: @base; + border-color: @surface0; + + li a:hover { + background-color: @mantle !important; + color: @text !important; + } + } + /* Select menus */ + select { + background-color: @surface0; + border-color: @surface2; + color: @text; + } + + /* --- SEARCH RESULTS --- */ + nav[aria-label="Pagination Navigation"] { + div > a { + background-color: @base; + border-color: @surface0; + + &:hover { + background-color: @mantle; + } + } + } + #pkg-list-exact-match { + color: @base; + background-color: @accent-color; + } + + /* Username links */ + a[aria-label^="publisher"]:hover { + color: @accent-color; + } + + /* --- FOOTER --- */ + + footer { + h3 { + color: @text; + } + ul a:hover { + color: @accent-color; + } + a[href="https://github.com/npm"] svg { + > polygon { + fill: @base; + } + + > rect { + fill: @text; + } + } + a[href="https://github.com"] svg { + fill: @text; + } + &::after { + background-image: @npmGradient; + } + } + + --color-prettylights-syntax-comment: @overlay2; + --color-prettylights-syntax-constant: @teal; + --color-prettylights-syntax-entity: @blue; + --color-prettylights-syntax-storage-modifier-import: @peach; + --color-prettylights-syntax-entity-tag: @teal; + --color-prettylights-syntax-keyword: @mauve; + --color-prettylights-syntax-string: @green; + --color-prettylights-syntax-variable: @peach; + --color-prettylights-syntax-invalid-illegal-text: @red; + --color-prettylights-syntax-invalid-illegal-bg: fadeout(@red, 85%); + --color-prettylights-syntax-markup-heading: @teal; + --color-prettylights-syntax-markup-italic: @yellow; + --color-prettylights-syntax-markup-bold: @yellow; + --color-prettylights-syntax-markup-deleted-text: @text; + --color-prettylights-syntax-markup-deleted-bg: fadeout(@red, 60%); + --color-prettylights-syntax-markup-inserted-text: @text; + --color-prettylights-syntax-markup-inserted-bg: fadeout(@green, 60%); + --color-prettylights-syntax-markup-changed-text: @text; + --color-prettylights-syntax-markup-changed-bg: fadeout(@yellow, 60%); + --color-prettylights-syntax-markup-ignored-text: @text; + + /* stylelint-disable declaration-block-single-line-max-declarations */ + /* deno-fmt-ignore */ + div.highlight pre {.pl-mb,.pl-mdr,.pl-c{color:var(--color-prettylights-syntax-comment)}.pl-c1,.pl-s .pl-v{color:var(--color-prettylights-syntax-constant)}.pl-e,.pl-en{color:var(--color-prettylights-syntax-entity)}.pl-s .pl-s1,.pl-smi{color:var(--color-prettylights-syntax-storage-modifier-import)}.pl-ent{color:var(--color-prettylights-syntax-entity-tag)}.pl-k{color:var(--color-prettylights-syntax-keyword)}.pl-pds,.pl-s,.pl-s .pl-pse .pl-s1,.pl-sr,.pl-sr .pl-cce,.pl-sr .pl-sra,.pl-sr .pl-sre{color:var(--color-prettylights-syntax-string)}.pl-smw,.pl-v{color:var(--color-prettylights-syntax-variable)}.pl-bu{color:var(--color-prettylights-syntax-brackethighlighter-unmatched)}.pl-ii{color:var(--color-prettylights-syntax-invalid-illegal-text);background-color:var(--color-prettylights-syntax-invalid-illegal-bg)}.pl-c2{color:var(--color-prettylights-syntax-carriage-return-text);background-color:var(--color-prettylights-syntax-carriage-return-bg)}.pl-sr .pl-cce{color:var(--color-prettylights-syntax-string-regexp)}.pl-ml{color:var(--color-prettylights-syntax-markup-list)}.pl-mh,.pl-mh .pl-en,.pl-ms{color:var(--color-prettylights-syntax-markup-heading)}.pl-mi{color:var(--color-prettylights-syntax-markup-italic)}.pl-mb{color:var(--color-prettylights-syntax-markup-bold)}.pl-md{color:var(--color-prettylights-syntax-markup-deleted-text);background-color:var(--color-prettylights-syntax-markup-deleted-bg)}.pl-mi1{color:var(--color-prettylights-syntax-markup-inserted-text);background-color:var(--color-prettylights-syntax-markup-inserted-bg)}.pl-mc{color:var(--color-prettylights-syntax-markup-changed-text);background-color:var(--color-prettylights-syntax-markup-changed-bg)}.pl-mi2{color:var(--color-prettylights-syntax-markup-ignored-text);background-color:var(--color-prettylights-syntax-markup-ignored-bg)}.pl-mdr{color:var(--color-prettylights-syntax-meta-diff-range)}.pl-ba{color:var(--color-prettylights-syntax-brackethighlighter-angle)}.pl-sg{color:var(--color-prettylights-syntax-sublimelinter-gutter-mark)}.pl-corl{text-decoration:underline;color:var(--color-prettylights-syntax-constant-other-reference-link)}} + /* stylelint-enable declaration-block-single-line-max-declarations */ + } +} + +/* deno-fmt-ignore */ +@catppuccin: { + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @red_filter: brightness(0) saturate(100%) invert(13%) sepia(93%) saturate(6590%) hue-rotate(343deg) brightness(85%) contrast(92%); @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; @red_filter: brightness(0) saturate(100%) invert(79%) sepia(26%) saturate(3775%) hue-rotate(304deg) brightness(96%) contrast(88%); @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; @red_filter: brightness(0) saturate(100%) invert(62%) sepia(22%) saturate(880%) hue-rotate(302deg) brightness(98%) contrast(90%); @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; @red_filter: brightness(0) saturate(100%) invert(87%) sepia(37%) saturate(4988%) hue-rotate(296deg) brightness(105%) contrast(91%); @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; }; +}; diff --git a/styles/ollama/catppuccin.user.css b/styles/ollama/catppuccin.user.css index 3e58c42e6e..63959ed1ed 100644 --- a/styles/ollama/catppuccin.user.css +++ b/styles/ollama/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Ollama Catppuccin +@name Ollama Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/ollama @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ollama -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ollama/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ollama/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aollama @description Soothing pastel theme for Ollama @author Catppuccin @@ -13,279 +13,4 @@ @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('ollama.com') { - @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.css"); - - @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]; - - @text-filter: @catppuccin[@@lookup][@text-filter]; - - --ctp-rosewater: @rosewater; - --ctp-flamingo: @flamingo; - --ctp-pink: @pink; - --ctp-mauve: @mauve; - --ctp-red: @red; - --ctp-maroon: @maroon; - --ctp-peach: @peach; - --ctp-yellow: @yellow; - --ctp-green: @green; - --ctp-teal: @teal; - --ctp-sky: @sky; - --ctp-sapphire: @sapphire; - --ctp-blue: @blue; - --ctp-lavender: @lavender; - --ctp-text: @text; - --ctp-subtext1: @subtext1; - --ctp-subtext0: @subtext0; - --ctp-overlay2: @overlay2; - --ctp-overlay1: @overlay1; - --ctp-overlay0: @overlay0; - --ctp-surface2: @surface2; - --ctp-surface1: @surface1; - --ctp-surface0: @surface0; - --ctp-base: @base; - --ctp-mantle: @mantle; - --ctp-crust: @crust; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - background-color: @base; - color: @text; - - /* Llama logos */ - img[src="/public/ollama.png"], - img[src="/public/shades.png"], - img[src="/public/glasses.png"] { - filter: @text-filter; - } - - code, - pre { - background-color: @mantle; - color: @text !important; - } - - input { - background-color: @mantle; - } - - main, - section, - strong, - h3, - ul, - button, - li, - li::marker { - color: @text; - } - blockquote { - color: @subtext0; - } - - a[class~=""] { - color: @blue; - } - - #query, - #filter, - #search { - background-color: @mantle; - color: @text; - } - #readme, - #display, - #file-explorer { - color: @text; - } - - .command { - color: @text; - } - .truncate { - color: @text; - } - - /* Tailwind */ - - * { - border-color: @surface1; - } - - .prose { - --tw-prose-headings: @text; - --tw-prose-links: @accent-color; - } - - .text-white, - .text-black { - color: @text; - } - .text-gray-900 { - color: @subtext1; - } - .text-green-500, - .text-emerald-500, - .text-green-700 { - color: @green; - } - .text-yellow-900 { - color: @yellow; - } - .text-neutral-300, - .text-neutral-400, - .text-neutral-500 { - color: @subtext0; - } - .text-neutral-700, - .text-neutral-800, - .text-neutral-900 { - color: @subtext1 !important; - } - .text-red-500 { - color: @red; - } - .text-blue-500, - .text-blue-600 { - color: @accent-color; - } - /* Models page, color for non-weight pills/tags. Background color is solid from `.bg-indigo-50`. */ - .text-indigo-600 { - color: @crust; - } - - .bg-neutral-100 pre, - .bg-neutral-100 .command { - background-color: unset !important; - } - .bg-white { - background-color: @mantle; - } - .bg-black, - .hover\:bg-black:hover { - background-color: @surface0 !important; - } - .bg-neutral-50 { - background-color: @surface0; - } - .bg-neutral-100, - .hover\:bg-neutral-100:hover { - background-color: @surface2 !important; - } - .bg-neutral-700, - .bg-neutral-800 { - background-color: @surface1; - } - .bg-green-50 { - background-color: fade(@green, 10%); - } - .bg-yellow-50 { - background-color: fade(@yellow, 10%); - } - .bg-indigo-50 { - background-color: @accent-color; - } - .bg-\[\#ddf4ff\] { - background-color: fade(@accent-color, 10%); - } - - .border { - border-color: @accent-color; - } - .border-neutral-200, - .border-neutral-300, - .divide-gray-200 > :not([hidden]) ~ :not([hidden]), - .divide-neutral-200 > :not([hidden]) ~ :not([hidden]) { - border-color: @surface1; - } - .focus\:border-blue-400:focus { - border-color: @accent-color; - } - .focus\:border-red-400:focus { - border-color: @red; - } - - .ring-neutral-300 { - --tw-ring-color: @surface1 !important; - } - .ring-green-600\/20 { - --tw-ring-color: @green; - } - .ring-yellow-600\/20 { - --tw-ring-color: @yellow; - } - select:focus, - .ring-blue-300, - .focus\:ring-blue-300:focus { - --tw-ring-color: rgba(#rgbify(@accent-color) [], var(--tw-ring-opacity)); - } - .focus\:ring-red-300:focus { - --tw-ring-color: rgba(#rgbify(@red) [], var(--tw-ring-opacity)); - } - } -} - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@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; @text-filter: brightness(0) saturate(100%) invert(32%) sepia(14%) saturate(808%) hue-rotate(196deg) brightness(92%) contrast(95%); @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; @text-filter: brightness(0) saturate(100%) invert(82%) sepia(17%) saturate(401%) hue-rotate(191deg) brightness(97%) contrast(98%); @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; @text-filter: brightness(0) saturate(100%) invert(72%) sepia(78%) saturate(147%) hue-rotate(195deg) brightness(103%) contrast(92%); @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; @text-filter: brightness(0) saturate(100%) invert(94%) sepia(11%) saturate(2056%) hue-rotate(182deg) brightness(96%) contrast(99%); @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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/ollama/catppuccin.user.less b/styles/ollama/catppuccin.user.less new file mode 100644 index 0000000000..81bff07305 --- /dev/null +++ b/styles/ollama/catppuccin.user.less @@ -0,0 +1,289 @@ +/* ==UserStyle== +@name Ollama Catppuccin +@namespace github.com/catppuccin/userstyles/styles/ollama +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ollama +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ollama/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aollama +@description Soothing pastel theme for Ollama +@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("ollama.com") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.css"); + + @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]; + + @text-filter: @catppuccin[@@lookup][@text-filter]; + + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + background-color: @base; + color: @text; + + /* Llama logos */ + img[src="/public/ollama.png"], + img[src="/public/shades.png"], + img[src="/public/glasses.png"] { + filter: @text-filter; + } + + code, + pre { + background-color: @mantle; + color: @text !important; + } + + input { + background-color: @mantle; + } + + main, + section, + strong, + h3, + ul, + button, + li, + li::marker { + color: @text; + } + blockquote { + color: @subtext0; + } + + a[class~=""] { + color: @blue; + } + + #query, + #filter, + #search { + background-color: @mantle; + color: @text; + } + #readme, + #display, + #file-explorer { + color: @text; + } + + .command { + color: @text; + } + .truncate { + color: @text; + } + + /* Tailwind */ + + * { + border-color: @surface1; + } + + .prose { + --tw-prose-headings: @text; + --tw-prose-links: @accent-color; + } + + .text-white, + .text-black { + color: @text; + } + .text-gray-900 { + color: @subtext1; + } + .text-green-500, + .text-emerald-500, + .text-green-700 { + color: @green; + } + .text-yellow-900 { + color: @yellow; + } + .text-neutral-300, + .text-neutral-400, + .text-neutral-500 { + color: @subtext0; + } + .text-neutral-700, + .text-neutral-800, + .text-neutral-900 { + color: @subtext1 !important; + } + .text-red-500 { + color: @red; + } + .text-blue-500, + .text-blue-600 { + color: @accent-color; + } + /* Models page, color for non-weight pills/tags. Background color is solid from `.bg-indigo-50`. */ + .text-indigo-600 { + color: @crust; + } + + .bg-neutral-100 pre, + .bg-neutral-100 .command { + background-color: unset !important; + } + .bg-white { + background-color: @mantle; + } + .bg-black, + .hover\:bg-black:hover { + background-color: @surface0 !important; + } + .bg-neutral-50 { + background-color: @surface0; + } + .bg-neutral-100, + .hover\:bg-neutral-100:hover { + background-color: @surface2 !important; + } + .bg-neutral-700, + .bg-neutral-800 { + background-color: @surface1; + } + .bg-green-50 { + background-color: fade(@green, 10%); + } + .bg-yellow-50 { + background-color: fade(@yellow, 10%); + } + .bg-indigo-50 { + background-color: @accent-color; + } + .bg-\[\#ddf4ff\] { + background-color: fade(@accent-color, 10%); + } + + .border { + border-color: @accent-color; + } + .border-neutral-200, + .border-neutral-300, + .divide-gray-200 > :not([hidden]) ~ :not([hidden]), + .divide-neutral-200 > :not([hidden]) ~ :not([hidden]) { + border-color: @surface1; + } + .focus\:border-blue-400:focus { + border-color: @accent-color; + } + .focus\:border-red-400:focus { + border-color: @red; + } + + .ring-neutral-300 { + --tw-ring-color: @surface1 !important; + } + .ring-green-600\/20 { + --tw-ring-color: @green; + } + .ring-yellow-600\/20 { + --tw-ring-color: @yellow; + } + select:focus, + .ring-blue-300, + .focus\:ring-blue-300:focus { + --tw-ring-color: rgba(#rgbify(@accent-color)[], var(--tw-ring-opacity)); + } + .focus\:ring-red-300:focus { + --tw-ring-color: rgba(#rgbify(@red)[], var(--tw-ring-opacity)); + } + } +} + +#rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); +} + +/* deno-fmt-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; @text-filter: brightness(0) saturate(100%) invert(32%) sepia(14%) saturate(808%) hue-rotate(196deg) brightness(92%) contrast(95%); @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; @text-filter: brightness(0) saturate(100%) invert(82%) sepia(17%) saturate(401%) hue-rotate(191deg) brightness(97%) contrast(98%); @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; @text-filter: brightness(0) saturate(100%) invert(72%) sepia(78%) saturate(147%) hue-rotate(195deg) brightness(103%) contrast(92%); @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; @text-filter: brightness(0) saturate(100%) invert(94%) sepia(11%) saturate(2056%) hue-rotate(182deg) brightness(96%) contrast(99%); @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +}; diff --git a/styles/openmediavault/catppuccin.user.css b/styles/openmediavault/catppuccin.user.css index 067eb72870..88b22091d9 100644 --- a/styles/openmediavault/catppuccin.user.css +++ b/styles/openmediavault/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name openmediavault Catppuccin +@name openmediavault Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/openmediavault @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/openmediavault -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/openmediavault/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/openmediavault/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aopenmediavault @description Soothing pastel theme for openmediavault @author Catppuccin @@ -13,263 +13,4 @@ @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("openmediavault.example.com") { - @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; - } - } - - .omv-dark-theme { - --mat-color-text: @text; - --mat-color-secondary-text: @subtext0; - --mat-color-disabled-text: @red; - --mat-color-hint-text: @blue; - --mat-background-color-hover: @accent-color; - --mat-background-color-selected-button: @accent-color; - --mat-background-color-card: @crust; - --mat-background-color-background: @crust; - --mat-primary-color-text: @accent-color; - --mat-background-color-body: @base; - } - .omv-dark-theme .mat-toolbar.mat-primary { - background: @accent-color; - color: @text; - } - .omv-dark-theme .mat-drawer-container { - background-color: @base; - color: @text; - } - - .omv-dark-theme .mat-card { - background: @mantle; - color: @text; - } - - .omv-dark-theme .mat-flat-button, - .mat-fab, - .mat-mini-fab { - color: @text; - background-color: @crust; - } - .omv-dark-theme .mat-flat-button.mat-button-disabled.mat-button-disabled { - background-color: @mantle; - } - .omv-dark-theme .mat-input-element:disabled { - color: @subtext0; - } - .omv-dark-theme .mat-select-placeholder, - .omv-dark-theme .mat-select-disabled .mat-select-value { - color: @subtext0; - } - .omv-dark-theme .mat-form-field-appearance-legacy .mat-form-field-label, - .omv-dark-theme .mat-form-field-appearance-legacy .mat-hint { - color: @accent-color; - } - .omv-dark-theme .mat-toolbar { - background: @crust; - color: @text; - } - .omv-top-bar[_ngcontent-ydq-c112] - button[_ngcontent-ydq-c112] - .mat-icon[_ngcontent-ydq-c112] { - color: @crust; - } - .omv-top-bar[_ngcontent-ydq-c112] .hostname[_ngcontent-ydq-c112] { - color: @crust; - } - - .omv-dark-theme .mat-icon-button.mat-button-disabled.mat-button-disabled { - color: @overlay0; - } - .omv-dark-theme .mat-chip.omv-background-color-pair-green { - color: @mantle; - background-color: @green; - } - - .omv-scrollable-xy, - .omv-scrollable-y { - scrollbar-color: @accent-color transparent; - --scrollbar-thumb-color: @accent-color !important; - --scrollbar-thumb-hover-color: @accent-color; - } - - .omv-dark-theme .mat-button, - .omv-dark-theme .mat-icon-button, - .omv-dark-theme .mat-stroked-button { - color: @accent-color; - background: inherit; - } - - .omv-dark-theme .mat-pseudo-checkbox-checked, - .omv-dark-theme .mat-pseudo-checkbox-indeterminate, - .omv-dark-theme .mat-accent .mat-pseudo-checkbox-checked, - .omv-dark-theme .mat-accent .mat-pseudo-checkbox-indeterminate { - background: @accent-color; - } - .omv-dark-theme - .mat-checkbox-indeterminate.mat-accent - .mat-checkbox-background, - .omv-dark-theme .mat-checkbox-checked.mat-accent .mat-checkbox-background { - background-color: @accent-color; - } - .omv-dark-theme .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb { - background-color: @accent-color; - } - .omv-dark-theme .mat-slide-toggle.mat-checked .mat-slide-toggle-bar { - background-color: @accent-color; - } - .omv-dark-theme .mat-badge-accent .mat-badge-content { - background: @crust; - color: @accent-color; - } - - .omv-dark-theme .mat-select-panel { - scrollbar-color: @accent-color transparent; - --scrollbar-thumb-color: @accent-color !important; - --scrollbar-thumb-hover-color: @accent-color !important; - background: @crust; - } - - .omv-background-color-pair-success { - color: @mantle; - background-color: @green; - } - .omv-dark-theme - .mat-primary - .mat-option.mat-selected:not(.mat-option-disabled) { - color: @accent-color; - } - - .ngx-datatable.single-selection .datatable-body-row.active, - .ngx-datatable.single-selection - .datatable-body-row.active - .datatable-row-group, - .ngx-datatable.multi-selection .datatable-body-row.active, - .ngx-datatable.multi-selection - .datatable-body-row.active - .datatable-row-group, - .ngx-datatable.multi-click-selection .datatable-body-row.active, - .ngx-datatable.multi-click-selection - .datatable-body-row.active - .datatable-row-group { - color: @accent-color; - background-color: @crust; - } - - .ngx-datatable:not(.cell-selection) .datatable-body-row:hover, - .ngx-datatable:not(.cell-selection) - .datatable-body-row:hover - .datatable-row-group { - color: @crust; - background-color: @blue; - } - - .ngx-datatable.single-selection .datatable-body-row.active:hover, - .ngx-datatable.single-selection - .datatable-body-row.active:hover - .datatable-row-group, - .ngx-datatable.multi-selection .datatable-body-row.active:hover, - .ngx-datatable.multi-selection - .datatable-body-row.active:hover - .datatable-row-group, - .ngx-datatable.multi-click-selection .datatable-body-row.active:hover, - .ngx-datatable.multi-click-selection - .datatable-body-row.active:hover - .datatable-row-group { - color: @crust; - background-color: @green; - } - - .omv-dark-theme .mat-menu-item { - background: @crust; - color: @text; - } - - .omv-dark-theme .mat-menu-panel { - background: @crust; - } - - [_nghost-ckr-c138] - .content[_ngcontent-ckr-c138] - omv-intuition-form-page[_ngcontent-ckr-c138] - .mat-card { - color: @text; - background-color: @mantle; - } - - .mat-flat-button.omv-background-color-pair-primary { - color: @text; - background-color: @crust; - } - - .omv-dark-theme .mat-dialog-container { - background: @crust; - color: @text; - } - - .omv-background-color-pair-terminal { - color: @green; - background-color: @mantle; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/openmediavault/catppuccin.user.less b/styles/openmediavault/catppuccin.user.less new file mode 100644 index 0000000000..dfc3c72113 --- /dev/null +++ b/styles/openmediavault/catppuccin.user.less @@ -0,0 +1,273 @@ +/* ==UserStyle== +@name openmediavault Catppuccin +@namespace github.com/catppuccin/userstyles/styles/openmediavault +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/openmediavault +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/openmediavault/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aopenmediavault +@description Soothing pastel theme for openmediavault +@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("openmediavault.example.com") { + @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; + } + } + + .omv-dark-theme { + --mat-color-text: @text; + --mat-color-secondary-text: @subtext0; + --mat-color-disabled-text: @red; + --mat-color-hint-text: @blue; + --mat-background-color-hover: @accent-color; + --mat-background-color-selected-button: @accent-color; + --mat-background-color-card: @crust; + --mat-background-color-background: @crust; + --mat-primary-color-text: @accent-color; + --mat-background-color-body: @base; + } + .omv-dark-theme .mat-toolbar.mat-primary { + background: @accent-color; + color: @text; + } + .omv-dark-theme .mat-drawer-container { + background-color: @base; + color: @text; + } + + .omv-dark-theme .mat-card { + background: @mantle; + color: @text; + } + + .omv-dark-theme .mat-flat-button, + .mat-fab, + .mat-mini-fab { + color: @text; + background-color: @crust; + } + .omv-dark-theme .mat-flat-button.mat-button-disabled.mat-button-disabled { + background-color: @mantle; + } + .omv-dark-theme .mat-input-element:disabled { + color: @subtext0; + } + .omv-dark-theme .mat-select-placeholder, + .omv-dark-theme .mat-select-disabled .mat-select-value { + color: @subtext0; + } + .omv-dark-theme .mat-form-field-appearance-legacy .mat-form-field-label, + .omv-dark-theme .mat-form-field-appearance-legacy .mat-hint { + color: @accent-color; + } + .omv-dark-theme .mat-toolbar { + background: @crust; + color: @text; + } + .omv-top-bar[_ngcontent-ydq-c112] + button[_ngcontent-ydq-c112] + .mat-icon[_ngcontent-ydq-c112] { + color: @crust; + } + .omv-top-bar[_ngcontent-ydq-c112] .hostname[_ngcontent-ydq-c112] { + color: @crust; + } + + .omv-dark-theme .mat-icon-button.mat-button-disabled.mat-button-disabled { + color: @overlay0; + } + .omv-dark-theme .mat-chip.omv-background-color-pair-green { + color: @mantle; + background-color: @green; + } + + .omv-scrollable-xy, + .omv-scrollable-y { + scrollbar-color: @accent-color transparent; + --scrollbar-thumb-color: @accent-color !important; + --scrollbar-thumb-hover-color: @accent-color; + } + + .omv-dark-theme .mat-button, + .omv-dark-theme .mat-icon-button, + .omv-dark-theme .mat-stroked-button { + color: @accent-color; + background: inherit; + } + + .omv-dark-theme .mat-pseudo-checkbox-checked, + .omv-dark-theme .mat-pseudo-checkbox-indeterminate, + .omv-dark-theme .mat-accent .mat-pseudo-checkbox-checked, + .omv-dark-theme .mat-accent .mat-pseudo-checkbox-indeterminate { + background: @accent-color; + } + .omv-dark-theme + .mat-checkbox-indeterminate.mat-accent + .mat-checkbox-background, + .omv-dark-theme .mat-checkbox-checked.mat-accent .mat-checkbox-background { + background-color: @accent-color; + } + .omv-dark-theme .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb { + background-color: @accent-color; + } + .omv-dark-theme .mat-slide-toggle.mat-checked .mat-slide-toggle-bar { + background-color: @accent-color; + } + .omv-dark-theme .mat-badge-accent .mat-badge-content { + background: @crust; + color: @accent-color; + } + + .omv-dark-theme .mat-select-panel { + scrollbar-color: @accent-color transparent; + --scrollbar-thumb-color: @accent-color !important; + --scrollbar-thumb-hover-color: @accent-color !important; + background: @crust; + } + + .omv-background-color-pair-success { + color: @mantle; + background-color: @green; + } + .omv-dark-theme + .mat-primary + .mat-option.mat-selected:not(.mat-option-disabled) { + color: @accent-color; + } + + .ngx-datatable.single-selection .datatable-body-row.active, + .ngx-datatable.single-selection + .datatable-body-row.active + .datatable-row-group, + .ngx-datatable.multi-selection .datatable-body-row.active, + .ngx-datatable.multi-selection + .datatable-body-row.active + .datatable-row-group, + .ngx-datatable.multi-click-selection .datatable-body-row.active, + .ngx-datatable.multi-click-selection + .datatable-body-row.active + .datatable-row-group { + color: @accent-color; + background-color: @crust; + } + + .ngx-datatable:not(.cell-selection) .datatable-body-row:hover, + .ngx-datatable:not(.cell-selection) + .datatable-body-row:hover + .datatable-row-group { + color: @crust; + background-color: @blue; + } + + .ngx-datatable.single-selection .datatable-body-row.active:hover, + .ngx-datatable.single-selection + .datatable-body-row.active:hover + .datatable-row-group, + .ngx-datatable.multi-selection .datatable-body-row.active:hover, + .ngx-datatable.multi-selection + .datatable-body-row.active:hover + .datatable-row-group, + .ngx-datatable.multi-click-selection .datatable-body-row.active:hover, + .ngx-datatable.multi-click-selection + .datatable-body-row.active:hover + .datatable-row-group { + color: @crust; + background-color: @green; + } + + .omv-dark-theme .mat-menu-item { + background: @crust; + color: @text; + } + + .omv-dark-theme .mat-menu-panel { + background: @crust; + } + + [_nghost-ckr-c138] + .content[_ngcontent-ckr-c138] + omv-intuition-form-page[_ngcontent-ckr-c138] + .mat-card { + color: @text; + background-color: @mantle; + } + + .mat-flat-button.omv-background-color-pair-primary { + color: @text; + background-color: @crust; + } + + .omv-dark-theme .mat-dialog-container { + background: @crust; + color: @text; + } + + .omv-background-color-pair-terminal { + color: @green; + background-color: @mantle; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/paste.rs/catppuccin.user.css b/styles/paste.rs/catppuccin.user.css index c9fef1923f..41b844c055 100644 --- a/styles/paste.rs/catppuccin.user.css +++ b/styles/paste.rs/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name paste.rs Catppuccin +@name paste.rs Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/paste.rs @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/paste.rs -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/paste.rs/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/paste.rs/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apaste.rs @description Soothing pastel theme for paste.rs @author Catppuccin @@ -13,207 +13,4 @@ @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("paste.rs") { - @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; - color: @text; - } - - a { - color: @accent-color; - } - - /* Web UI */ - textarea, - select, - input[type="submit"] { - background-color: @base; - color: @text; - border-color: @overlay0; - border-radius: 4px; - } - textarea:focus, - select:focus, - input[type="submit"]:focus { - border-color: @accent-color; - outline-color: @overlay0; - } - input[type="submit"]:hover { - background-color: @mantle; - } - - main { - color: @text; - border-color: @surface0; - } - - .code.gutter { - background-color: @base !important; - span { - /* Line Numbers */ - color: @overlay0 !important; - } - } - - article.markdown-body { - color: @text; - - h6 { - color: @text; - } - - a { - color: @accent-color; - } - - img { - background: none; - } - - pre { - background: @surface0; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - border-color: @surface0; - } - - blockquote { - border-color: @surface1; - - p { - color: @text; - } - } - - table { - border-color: @surface0 !important; - tr, - th, - td { - border-color: @surface1; - background: none !important; - } - } - } - - /* Syntax-highlighted code */ - .code.text > pre { - background-color: @base !important; - background-image: none; - - span { - color: red !important; - } - - /* General Text, Braces, Delimiters, Parameters, Classes, Metadata */ - span[style*="color:#323232"] { - color: @text !important; - } - - /* Keywords, Operators */ - span[style*="color:#a71d5d"] { - color: @mauve !important; - } - - /* Strings */ - span[style*="color:#183691"], - span[style*="color:#ed6a43"] { - color: @green !important; - } - - /* Comments */ - span[style*="color:#969896"] { - color: @overlay2 !important; - } - - /* Constants, Numbers */ - span[style*="color:#0086b3"] { - color: @peach !important; - } - - /* Methods, Functions */ - span[style*="color:#795da3"], - span[style*="color:#62a35c"], - span[style*="color:#63a35c"] { - color: @blue !important; - } - - /* Errors */ - span[style*="background-color:#f5f5f5"][style*="color:#b52a1d"] { - color: @text !important; - background: fade(@red, 60%) !important; - } - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/paste.rs/catppuccin.user.less b/styles/paste.rs/catppuccin.user.less new file mode 100644 index 0000000000..8b91114f57 --- /dev/null +++ b/styles/paste.rs/catppuccin.user.less @@ -0,0 +1,217 @@ +/* ==UserStyle== +@name paste.rs Catppuccin +@namespace github.com/catppuccin/userstyles/styles/paste.rs +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/paste.rs +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/paste.rs/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apaste.rs +@description Soothing pastel theme for paste.rs +@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("paste.rs") { + @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; + color: @text; + } + + a { + color: @accent-color; + } + + /* Web UI */ + textarea, + select, + input[type="submit"] { + background-color: @base; + color: @text; + border-color: @overlay0; + border-radius: 4px; + } + textarea:focus, + select:focus, + input[type="submit"]:focus { + border-color: @accent-color; + outline-color: @overlay0; + } + input[type="submit"]:hover { + background-color: @mantle; + } + + main { + color: @text; + border-color: @surface0; + } + + .code.gutter { + background-color: @base !important; + span { + /* Line Numbers */ + color: @overlay0 !important; + } + } + + article.markdown-body { + color: @text; + + h6 { + color: @text; + } + + a { + color: @accent-color; + } + + img { + background: none; + } + + pre { + background: @surface0; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + border-color: @surface0; + } + + blockquote { + border-color: @surface1; + + p { + color: @text; + } + } + + table { + border-color: @surface0 !important; + tr, + th, + td { + border-color: @surface1; + background: none !important; + } + } + } + + /* Syntax-highlighted code */ + .code.text > pre { + background-color: @base !important; + background-image: none; + + span { + color: red !important; + } + + /* General Text, Braces, Delimiters, Parameters, Classes, Metadata */ + span[style*="color:#323232"] { + color: @text !important; + } + + /* Keywords, Operators */ + span[style*="color:#a71d5d"] { + color: @mauve !important; + } + + /* Strings */ + span[style*="color:#183691"], + span[style*="color:#ed6a43"] { + color: @green !important; + } + + /* Comments */ + span[style*="color:#969896"] { + color: @overlay2 !important; + } + + /* Constants, Numbers */ + span[style*="color:#0086b3"] { + color: @peach !important; + } + + /* Methods, Functions */ + span[style*="color:#795da3"], + span[style*="color:#62a35c"], + span[style*="color:#63a35c"] { + color: @blue !important; + } + + /* Errors */ + span[style*="background-color:#f5f5f5"][style*="color:#b52a1d"] { + color: @text !important; + background: fade(@red, 60%) !important; + } + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/perplexity/catppuccin.user.css b/styles/perplexity/catppuccin.user.css index fa92a98bd1..3e67ad87fd 100644 --- a/styles/perplexity/catppuccin.user.css +++ b/styles/perplexity/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Perplexity Catppuccin +@name Perplexity Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/perplexity @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/perplexity -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/perplexity/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/perplexity/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aperplexity @description Soothing pastel theme for Perplexity @author Catppuccin @@ -13,437 +13,4 @@ @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('perplexity.ai') { - :root:not([data-color-scheme="dark"]) { - #catppuccin(@lightFlavor, @accentColor); - } - :root, - :root:not([data-color-scheme="light"]) { - #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: @mantle !important; - } - .bg-\[red\] { - background-color: @red !important; - } - - .bg-alert { - background-color: @peach !important; - } - - .bg-backdrop-lightbox\/95 { - background-color: @crust !important; - } - - .bg-backdrop\/70 { - background-color: @mantle !important; - } - - .bg-background { - background-color: @base !important; - } - - .bg-background-300 { - background-color: @crust !important; - } - - .bg-background-super-alt { - background-color: @accent-color !important; - } - - .bg-backgroundDark { - background-color: @surface0 !important; - } - - .bg-black, - .bg-black\/30, - .bg-black\/40, - .bg-black\/50, - .bg-black\/60, - .bg-black\/80 { - background-color: @crust !important; - } - - .bg-borderMain { - background-color: @surface1 !important; - } - - .bg-idle, - .bg-idle\/70 { - background-color: @surface0 !important; - } - - .bg-offset, - .bg-offsetDark, - .bg-offset\/50 { - background-color: @mantle !important; - } - - .bg-offsetPlus { - background-color: @surface0 !important; - } - - .bg-offsetPlusDark, - .dark\:\!bg-offsetPlusDark:where( - [data-color-scheme="dark"] .dark\:\!bg-offsetPlusDark, - [data-color-scheme="dark"] .dark\:\!bg-offsetPlusDark * - ) { - background-color: @mantle !important; - } - - .bg-super, - .bg-superAlt, - .bg-superBG, - .bg-superBGDark, - .bg-superDark, - .bg-superDark\/100, - .bg-super\/100 { - background-color: @accent-color !important; - } - .bg-super\/10, - .bg-superDark\/10 { - background-color: fade(@accent-color, 10%) !important; - } - - .bg-textMain { - background-color: @overlay0 !important; - } - - .bg-textMainDark, - .bg-textMain\/10 { - background-color: @text !important; - } - - .bg-textOff { - background-color: @subtext1 !important; - } - - .bg-textOffDark, - .bg-textOff\/50 { - background-color: @subtext0 !important; - } - - .bg-white, - .bg-white\/30, - .bg-white\/50, - .bg-white\/80 { - background-color: @text !important; - } - - .text-background { - color: @base !important; - } - - .text-black { - color: @crust !important; - } - - .text-offset { - color: @mantle !important; - } - - .text-orange-400 { - color: @peach !important; - } - - .text-super, - .text-superAlt, - .text-superDark, - .text-superDuper { - color: @accent-color !important; - } - - .text-textMain { - color: @text !important; - } - - .text-textMainDark, - .text-textOff { - color: @subtext1 !important; - } - - .text-textOff\/50 { - color: @subtext0 !important; - } - - .text-textOffDark { - color: @subtext1 !important; - } - - .text-textOffDark\/50 { - color: @subtext0 !important; - } - - .text-white { - color: @crust !important; - } - - .text-default { - color: @text !important; - } - - .text-zinc-700 { - color: @subtext1 !important; - } - - .stroke-background { - stroke: @surface0 !important; - } - - .stroke-super, - .stroke-superAlt, - .stroke-superDark { - stroke: @accent-color !important; - } - - .stroke-textMain { - stroke: @text !important; - } - - .stroke-textMainDark, - .stroke-textOff { - stroke: @subtext1 !important; - } - - .stroke-textOffDark { - stroke: @subtext0 !important; - } - - .fill-backgroundDark { - fill: @base !important; - } - - .fill-super, - .fill-superAlt, - .fill-superDark { - fill: @accent-color !important; - } - - .fill-textMain, - .fill-textMainDark { - fill: @text !important; - } - - .fill-textOff, - .fill-textOffDark { - fill: @subtext1 !important; - } - - .border-\[black\]\/10 { - border-color: fade(@mantle, 10%) !important; - } - - .border-background, - .border-black\/10, - .border-black\/5 { - border-color: @mantle !important; - } - .dark\:border-borderMainDark:where( - [data-color-scheme="dark"] .dark\:border-borderMainDark, - [data-color-scheme="dark"] .dark\:border-borderMainDark * - ), - .border-borderMain { - border-color: @surface1 !important; - } - - .border-borderMain\/10, - .border-borderMain\/50, - .border-borderMain\/75 { - border-color: @surface0 !important; - } - - .border-borderMainDark { - border-color: @base !important; - } - - .border-offsetPlus { - border-color: @mantle !important; - } - - .border-super, - .border-super\/10, - .border-super\/100 { - border-color: @accent-color !important; - } - - .border-textMain\/0 { - border-color: transparent !important; - } - - .border-textMainDark { - border-color: @mantle !important; - } - - .border-textOff\/50 { - border-color: @subtext0 !important; - } - - .border-b-offset { - border-bottom-color: @subtext0 !important; - } - .group:hover [class*="group-hover:text-superDark"] { - color: @accent-color !important; - } - - [class*="hover:!bg-superAlt/20"]:hover { - background-color: @accent-color !important; - } - - [class*="hover:bg-offset"]:hover { - background-color: @surface0 !important; - } - - [class*="hover:bg-offsetPlus"]:hover { - background-color: @surface1 !important; - } - - [class*="hover:bg-super"]:hover { - background-color: @accent-color !important; - } - - [class*="hover:text-super"]:hover, - [class*="hover:text-superAlt"]:hover { - color: @accent-color !important; - } - - [class*="hover:text-textMain"]:hover { - color: @text !important; - } - - [class*="hover:text-textOff"]:hover { - color: @subtext0 !important; - } - - [class*="hover:text-white"]:hover { - color: @text !important; - } - - .dark\:divide-borderMainDark\/50:where( - [data-color-scheme="dark"] .dark\:divide-borderMainDark\/50, - [data-color-scheme="dark"] .dark\:divide-borderMainDark\/50 * - ) - > :not([hidden]) - ~ :not([hidden]), - .divide-borderMain\/50 > :not([hidden]) ~ :not([hidden]) { - border-color: @surface1 !important; - } - - .focus\:\!border-backgroundDark:focus { - border-color: @mantle !important; - } - - .focus\:bg-background:focus { - background-color: @base !important; - } - - .focus\:text-super:focus { - color: @accent-color !important; - } - - *[class*="ring"] { - --tw-ring-color: @surface2 !important; - --tw-ring-offset-color: @mantle !important; - } - - /* Additional fixes: */ - - /* citations */ - .citation:hover * { - color: @crust !important; - } - /* switch knob in settings */ - .data-\[state\=checked\]\:before\:\!bg-super[data-state="checked"]::before { - background-color: @accent-color !important; - } - /* switch in main input */ - #copilot-toggle > div::before { - background-color: @overlay1; - } - - /* credits on image view */ - #__next - > div:nth-child(26) - > div:nth-child(2) - > div - > div - > div.gap-md.mx-md.py-md.border-borderMainDark.flex.h-\[74px\].items-center.justify-between.border-b-2 - > div.gap-x-md.flex.items-center - > a - > div - > div - > div.line-clamp-1.break-all.transition-all.duration-300.white.font-sans.text-sm.text-white.selection\:bg-super\/50.selection\:text-textMain.dark\:selection\:bg-superDuper\/10.dark\:selection\:text-superDark { - color: @text !important; - } - - /* research goals in pro search */ - .research-goal::before { - border-color: @surface1; - } - .research-goal-title:hover { - background-color: @surface0; - } - .research-goal-timeline { - background-color: @surface1; - } - } -} - -#rgbify(@color) { - @rgb: red(@color) green(@color) blue(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/perplexity/catppuccin.user.less b/styles/perplexity/catppuccin.user.less new file mode 100644 index 0000000000..530ac84e52 --- /dev/null +++ b/styles/perplexity/catppuccin.user.less @@ -0,0 +1,447 @@ +/* ==UserStyle== +@name Perplexity Catppuccin +@namespace github.com/catppuccin/userstyles/styles/perplexity +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/perplexity +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/perplexity/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aperplexity +@description Soothing pastel theme for Perplexity +@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("perplexity.ai") { + :root:not([data-color-scheme="dark"]) { + #catppuccin(@lightFlavor, @accentColor); + } + :root, + :root:not([data-color-scheme="light"]) { + #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: @mantle !important; + } + .bg-\[red\] { + background-color: @red !important; + } + + .bg-alert { + background-color: @peach !important; + } + + .bg-backdrop-lightbox\/95 { + background-color: @crust !important; + } + + .bg-backdrop\/70 { + background-color: @mantle !important; + } + + .bg-background { + background-color: @base !important; + } + + .bg-background-300 { + background-color: @crust !important; + } + + .bg-background-super-alt { + background-color: @accent-color !important; + } + + .bg-backgroundDark { + background-color: @surface0 !important; + } + + .bg-black, + .bg-black\/30, + .bg-black\/40, + .bg-black\/50, + .bg-black\/60, + .bg-black\/80 { + background-color: @crust !important; + } + + .bg-borderMain { + background-color: @surface1 !important; + } + + .bg-idle, + .bg-idle\/70 { + background-color: @surface0 !important; + } + + .bg-offset, + .bg-offsetDark, + .bg-offset\/50 { + background-color: @mantle !important; + } + + .bg-offsetPlus { + background-color: @surface0 !important; + } + + .bg-offsetPlusDark, + .dark\:\!bg-offsetPlusDark:where( + [data-color-scheme="dark"] .dark\:\!bg-offsetPlusDark, + [data-color-scheme="dark"] .dark\:\!bg-offsetPlusDark * + ) { + background-color: @mantle !important; + } + + .bg-super, + .bg-superAlt, + .bg-superBG, + .bg-superBGDark, + .bg-superDark, + .bg-superDark\/100, + .bg-super\/100 { + background-color: @accent-color !important; + } + .bg-super\/10, + .bg-superDark\/10 { + background-color: fade(@accent-color, 10%) !important; + } + + .bg-textMain { + background-color: @overlay0 !important; + } + + .bg-textMainDark, + .bg-textMain\/10 { + background-color: @text !important; + } + + .bg-textOff { + background-color: @subtext1 !important; + } + + .bg-textOffDark, + .bg-textOff\/50 { + background-color: @subtext0 !important; + } + + .bg-white, + .bg-white\/30, + .bg-white\/50, + .bg-white\/80 { + background-color: @text !important; + } + + .text-background { + color: @base !important; + } + + .text-black { + color: @crust !important; + } + + .text-offset { + color: @mantle !important; + } + + .text-orange-400 { + color: @peach !important; + } + + .text-super, + .text-superAlt, + .text-superDark, + .text-superDuper { + color: @accent-color !important; + } + + .text-textMain { + color: @text !important; + } + + .text-textMainDark, + .text-textOff { + color: @subtext1 !important; + } + + .text-textOff\/50 { + color: @subtext0 !important; + } + + .text-textOffDark { + color: @subtext1 !important; + } + + .text-textOffDark\/50 { + color: @subtext0 !important; + } + + .text-white { + color: @crust !important; + } + + .text-default { + color: @text !important; + } + + .text-zinc-700 { + color: @subtext1 !important; + } + + .stroke-background { + stroke: @surface0 !important; + } + + .stroke-super, + .stroke-superAlt, + .stroke-superDark { + stroke: @accent-color !important; + } + + .stroke-textMain { + stroke: @text !important; + } + + .stroke-textMainDark, + .stroke-textOff { + stroke: @subtext1 !important; + } + + .stroke-textOffDark { + stroke: @subtext0 !important; + } + + .fill-backgroundDark { + fill: @base !important; + } + + .fill-super, + .fill-superAlt, + .fill-superDark { + fill: @accent-color !important; + } + + .fill-textMain, + .fill-textMainDark { + fill: @text !important; + } + + .fill-textOff, + .fill-textOffDark { + fill: @subtext1 !important; + } + + .border-\[black\]\/10 { + border-color: fade(@mantle, 10%) !important; + } + + .border-background, + .border-black\/10, + .border-black\/5 { + border-color: @mantle !important; + } + .dark\:border-borderMainDark:where( + [data-color-scheme="dark"] .dark\:border-borderMainDark, + [data-color-scheme="dark"] .dark\:border-borderMainDark * + ), + .border-borderMain { + border-color: @surface1 !important; + } + + .border-borderMain\/10, + .border-borderMain\/50, + .border-borderMain\/75 { + border-color: @surface0 !important; + } + + .border-borderMainDark { + border-color: @base !important; + } + + .border-offsetPlus { + border-color: @mantle !important; + } + + .border-super, + .border-super\/10, + .border-super\/100 { + border-color: @accent-color !important; + } + + .border-textMain\/0 { + border-color: transparent !important; + } + + .border-textMainDark { + border-color: @mantle !important; + } + + .border-textOff\/50 { + border-color: @subtext0 !important; + } + + .border-b-offset { + border-bottom-color: @subtext0 !important; + } + .group:hover [class*="group-hover:text-superDark"] { + color: @accent-color !important; + } + + [class*="hover:!bg-superAlt/20"]:hover { + background-color: @accent-color !important; + } + + [class*="hover:bg-offset"]:hover { + background-color: @surface0 !important; + } + + [class*="hover:bg-offsetPlus"]:hover { + background-color: @surface1 !important; + } + + [class*="hover:bg-super"]:hover { + background-color: @accent-color !important; + } + + [class*="hover:text-super"]:hover, + [class*="hover:text-superAlt"]:hover { + color: @accent-color !important; + } + + [class*="hover:text-textMain"]:hover { + color: @text !important; + } + + [class*="hover:text-textOff"]:hover { + color: @subtext0 !important; + } + + [class*="hover:text-white"]:hover { + color: @text !important; + } + + .dark\:divide-borderMainDark\/50:where( + [data-color-scheme="dark"] .dark\:divide-borderMainDark\/50, + [data-color-scheme="dark"] .dark\:divide-borderMainDark\/50 * + ) + > :not([hidden]) + ~ :not([hidden]), + .divide-borderMain\/50 > :not([hidden]) ~ :not([hidden]) { + border-color: @surface1 !important; + } + + .focus\:\!border-backgroundDark:focus { + border-color: @mantle !important; + } + + .focus\:bg-background:focus { + background-color: @base !important; + } + + .focus\:text-super:focus { + color: @accent-color !important; + } + + *[class*="ring"] { + --tw-ring-color: @surface2 !important; + --tw-ring-offset-color: @mantle !important; + } + + /* Additional fixes: */ + + /* citations */ + .citation:hover * { + color: @crust !important; + } + /* switch knob in settings */ + .data-\[state\=checked\]\:before\:\!bg-super[data-state="checked"]::before { + background-color: @accent-color !important; + } + /* switch in main input */ + #copilot-toggle > div::before { + background-color: @overlay1; + } + + /* credits on image view */ + #__next + > div:nth-child(26) + > div:nth-child(2) + > div + > div + > div.gap-md.mx-md.py-md.border-borderMainDark.flex.h-\[74px\].items-center.justify-between.border-b-2 + > div.gap-x-md.flex.items-center + > a + > div + > div + > div.line-clamp-1.break-all.transition-all.duration-300.white.font-sans.text-sm.text-white.selection\:bg-super\/50.selection\:text-textMain.dark\:selection\:bg-superDuper\/10.dark\:selection\:text-superDark { + color: @text !important; + } + + /* research goals in pro search */ + .research-goal::before { + border-color: @surface1; + } + .research-goal-title:hover { + background-color: @surface0; + } + .research-goal-timeline { + background-color: @surface1; + } + } +} + +#rgbify(@color) { + @rgb: red(@color) green(@color) blue(@color); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/phanpy/catppuccin.user.css b/styles/phanpy/catppuccin.user.css index 883a3786e9..1b5f5ac364 100644 --- a/styles/phanpy/catppuccin.user.css +++ b/styles/phanpy/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Phanpy Catppuccin +@name Phanpy Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/phanpy @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/phanpy -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/phanpy/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/phanpy/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aphanpy @description Soothing pastel theme for Phanpy @author Catppuccin @@ -13,122 +13,4 @@ @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('phanpy.social') { - :root:not(:has(.is-light)) { - #catppuccin(@darkFlavor, @accentColor); - } - :root.is-light { - #catppuccin(@lightFlavor, @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; - } - } - - --text-color: @text; - --text-insignificant-color: @subtext0; - --link-color: @accent-color; - --link-text-color: @accent-color; - --link-faded-color: @accent-color; - --link-light-color: @accent-color; - --button-bg-blur-color: @accent-color; - --button-bg-color: @accent-color; - --button-text-color: @base; - --bg-faded-color: @base; - --bg-faded-blur-color: @mantle; - --bg-blur-color: @mantle; - --close-button-bg-color: @mantle; - --close-button-color: @subtext0; - --bg-color: @base; - --link-bg-hover-color: @mantle; - --divider-color: @surface0; - --outline-color: @surface0; - --outline-hover-color: @surface2; - --reblog-faded-color: fade(@mauve, 20%); - --reblog-color: @mauve; - --reply-to-faded-color: fade(@yellow, 20%); - --reply-to-text-color: @yellow; - --reply-to-color: @yellow; - --favourite-color: @red; - --green-color: @green; - --red-color: @red; - --comment-line-color: @surface1; - --media-bg-color: @base; - --media-fg-color: @text; - --media-outline-color: @text; - - .szh-menu__item--disabled { - color: @subtext0; - } - - .button.plain2 { - background-color: @mantle; - } - - .replies-parent-link { - background-color: @surface0 !important; - } - - .account-container { - --original-color: @blue; - - .profile-field, - .stats, - .posting-stats-button { - background-color: @mantle; - -webkit-filter: none; - filter: none; - } - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/phanpy/catppuccin.user.less b/styles/phanpy/catppuccin.user.less new file mode 100644 index 0000000000..9ad4357339 --- /dev/null +++ b/styles/phanpy/catppuccin.user.less @@ -0,0 +1,132 @@ +/* ==UserStyle== +@name Phanpy Catppuccin +@namespace github.com/catppuccin/userstyles/styles/phanpy +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/phanpy +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/phanpy/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aphanpy +@description Soothing pastel theme for Phanpy +@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("phanpy.social") { + :root:not(:has(.is-light)) { + #catppuccin(@darkFlavor, @accentColor); + } + :root.is-light { + #catppuccin(@lightFlavor, @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; + } + } + + --text-color: @text; + --text-insignificant-color: @subtext0; + --link-color: @accent-color; + --link-text-color: @accent-color; + --link-faded-color: @accent-color; + --link-light-color: @accent-color; + --button-bg-blur-color: @accent-color; + --button-bg-color: @accent-color; + --button-text-color: @base; + --bg-faded-color: @base; + --bg-faded-blur-color: @mantle; + --bg-blur-color: @mantle; + --close-button-bg-color: @mantle; + --close-button-color: @subtext0; + --bg-color: @base; + --link-bg-hover-color: @mantle; + --divider-color: @surface0; + --outline-color: @surface0; + --outline-hover-color: @surface2; + --reblog-faded-color: fade(@mauve, 20%); + --reblog-color: @mauve; + --reply-to-faded-color: fade(@yellow, 20%); + --reply-to-text-color: @yellow; + --reply-to-color: @yellow; + --favourite-color: @red; + --green-color: @green; + --red-color: @red; + --comment-line-color: @surface1; + --media-bg-color: @base; + --media-fg-color: @text; + --media-outline-color: @text; + + .szh-menu__item--disabled { + color: @subtext0; + } + + .button.plain2 { + background-color: @mantle; + } + + .replies-parent-link { + background-color: @surface0 !important; + } + + .account-container { + --original-color: @blue; + + .profile-field, + .stats, + .posting-stats-button { + background-color: @mantle; + -webkit-filter: none; + filter: none; + } + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/picrew/catppuccin.user.css b/styles/picrew/catppuccin.user.css index aa1a8b9803..351a26a4fb 100644 --- a/styles/picrew/catppuccin.user.css +++ b/styles/picrew/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Picrew Catppuccin +@name Picrew Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/picrew @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/picrew -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/picrew/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/picrew/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apicrew @description Soothing pastel theme for Picrew @author Catppuccin @@ -13,1381 +13,4 @@ @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('picrew.me') { - #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 !important; - color: @text !important; - } - /* language prompt */ - .header-langbox { - background: @mantle !important; - color: @text !important; - } - .header-langbox-buttons button { - background: @subtext0 !important; - color: @base !important; - } - /* header */ - .sitetop-Header { - background: @base !important; - - .splide__arrow { - background: @subtext0 !important; - } - } - .st-Header_Wrapper { - background: @yellow !important; - - .st-Header { - .sp-nav .nav-link li ul, - .sp-nav .nav-link li h2 { - border-top-color: @surface1 !important; - } - - .st-Header_Logo { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;charset=utf8,@{svg}"); - filter: none; - } - - .st-Header_Linkicon { - color: @base !important; - } - - .menu__line { - background-color: @base !important; - } - - /* side menu close button */ - .open .menu__line--1, - .open .menu__line--3 { - background-color: @text !important; - } - } - } - .sitetop-Nav { - background: @mantle !important; - color: @text !important; - } - .splide__pagination__page { - background: @overlay1 !important; - - &.is-active { - background: @accent-color !important; - } - } - #home { - background: @base !important; - color: @text !important; - } - /* "Information" page (main page) */ - .page-info { - background-color: @mantle !important; - } - .sp_title a, - .page-info a { - color: @accent-color !important; - } - .rankA::before { - color: @text !important; - } - /* "welcome creator" page (main page) */ - .header_bg[data-v-2537399f] { - background: linear-gradient(90deg, @surface0, @base); - } - /* MOBILE ONLY: ad for downloading the app */ - .sitetop-appDL { - background: @mantle !important; - - .sitetop-appDL_Header .sitetop-appDL_Title .fa { - color: @accent-color !important; - } - } - /* "Featured Tags" section - directly above Discovery */ - .sitetop-tags { - background: @mantle !important; - - .sitetop-tags_Header .sitetop-tags_Title .fa { - color: @accent-color !important; - } - .recommended-tag-list .recommended-tag-list-item a { - border-color: @accent-color !important; - - /* tag icon before tag name */ - &::before { - color: @accent-color !important; - } - } - } - /* "Discovery" section (image is lightbulb) */ - .sitetop-Discovery { - background: @mantle !important; - - .sitetop-Discovery_Header { - .sitetop-Discovery_Title .fa { - color: @accent-color !important; - } - - .sitetop-DiscoveryList_More a { - background-color: @accent-color !important; - color: @base !important; - } - - .sitetop-Discovery_More { - color: @accent-color !important; - } - } - } - .sitetop-ImagemakerList_List li .squareSize .imagemaker_size { - background: @surface0 !important; - } - /* "Hot Now" section (image is a graph) */ - .sitetop-Hot_Title .fa { - color: @accent-color !important; - } - .sitetop-Hot_CountrySwitch { - background-color: @base !important; - - input:first-of-type + label::before { - background: @base !important; - } - - .sitetop-Hot_CountrySwitch_all span::after { - color: @accent-color !important; - } - - input:last-of-type + label span { - filter: brightness(-20%) !important; - color: @accent-color !important; - } - } - /* "Updated Image Makers (image (.fa) is bullhorn) */ - .sitetop-ImagemakerList { - background: @mantle !important; - } - .sitetop-ImagemakerList_Title .fa { - color: @accent-color !important; - } - .c_btn { - background: @surface1 !important; - color: @text !important; - border-color: @surface1 !important; - - &:hover { - background: @surface2 !important; - color: @text !important; - border-color: @surface2 !important; - } - &:focus { - box-shadow: 0 0 0 1px @accent-color !important; - } - } - .sitetop-info { - background-color: @mantle !important; - color: @text !important; - - h1::after { - background: @mantle !important; - } - i { - background: @mantle !important; - border-radius: 6px !important; - } - } - .title { - color: @text !important; - } - .category { - background: @base !important; - color: @text !important; - } - .date { - color: @subtext1 !important; - } - .simplebar-content-wrapper { - background-color: @mantle !important; - color: @text !important; - } - .st-Terms { - border-color: @accent-color !important; - border-radius: 2px !important; - } - .st-Terms_Wrapper .st-Terms a, - .st-Terms_Wrapper .st-Terms .st-Terms_Body strong { - color: @accent-color !important; - } - .c_select select { - background: @mantle !important; - border-color: @overlay0 !important; - } - .st-Terms_Cookie, - .st-Terms_CookieTitle { - color: @text !important; - } - .st-Terms_Footer { - background-color: @mantle !important; - color: @subtext1 !important; - } - .st-Terms_AgreeBtn { - background: @surface1 !important; - border-color: @surface1 !important; - box-shadow: 0 4px 0 @surface2 !important; - color: @text !important; - - &:hover { - background: @surface2 !important; - border-color: @surface2 !important; - box-shadow: 0 4px 0 @surface2 !important; - color: @text !important; - } - } - .popup { - background-color: @base !important; - border-color: @accent-color !important; - } - .popup-header { - background-color: @mantle !important; - } - .popup-body .content a { - color: @accent-color !important; - } - .bellicon { - color: @accent-color !important; - border-color: @accent-color !important; - } - .close-btn { - border-color: @overlay0 !important; - color: @subtext1 !important; - } - .st-Footer_Wrapper { - background-color: @mantle !important; - color: @text !important; - } - .st-Footer_Links_bottom { - background: @base !important; - color: @subtext1 !important; - } - .st-Footer .st-Footer_Links div span.st-Header_Logo { - filter: none !important; - } - .sitetop-Twitter, - .sitetop-Twitter_Title { - background-color: @mantle !important; - border-bottom-color: @overlay1 !important; - } - .item { - border-bottom-color: @surface2 !important; - } - /* login screen */ - .page-container { - .panel { - background: @mantle !important; - border-radius: 6px !important; - } - .page-header { - color: @text !important; - } - } - .login-container_sns .c_text_right { - color: @subtext0 !important; - } - /* login screen */ - .login-container { - .login-form-container { - .c_text_right a { - color: @accent-color !important; - } - .login-form input:focus { - box-shadow: 0 0 0 1px @accent-color !important; - } - } - hr.sw_hr01 { - border-color: @surface1 !important; - } - input:not([type="checkbox"], [type="radio"]) { - background: @base !important; - border-color: @surface2 !important; - border-radius: 1px !important; - color: @text !important; - } - } - .h100 { - background: @base !important; - color: @text !important; - } - .pwBox .btn-default { - color: @subtext0 !important; - } - /* search page */ - .search-Form > fieldset { - background: @base !important; - - .search-Form_Keyword .search-Form_KeywordInput:focus { - box-shadow: 0 0 0 1px @accent-color !important; - } - } - .search-Form_Keyword { - .search-iconBox { - color: @subtext1 !important; - } - .search-Form_KeywordInput { - background: @mantle !important; - border-color: @overlay1 !important; - color: @text !important; - } - } - .search-filterBox { - background: @base !important; - - .btn-filter { - background-color: @surface1 !important; - border-radius: 6px !important; - border-color: @surface0 !important; - color: @text !important; - } - ul .labelBox { - background: @surface1 !important; - border-color: @surface0 !important; - color: @text !important; - } - } - .search-ImagemakerList .search-ImagemakerList_Result { - background: @mantle !important; - - .squareSize .imagemaker_size { - background: @surface0 !important; - } - } - .search-ImagemakerList_UseRange li > div { - background: @surface0 !important; - border-color: @surface0 !important; - color: @text !important; - } - /* filter menu (search page) */ - .search_Modal { - ul .labelBoxlist .labelBox { - background: @surface1 !important; - border-color: @surface0 !important; - } - .squareSize, - .rectangleSize { - background: @surface0 !important; - } - .c_select::after { - color: @subtext0 !important; - } - } - .vm--container .radioBox { - background-color: @base !important; - - .radioBox_label::before { - background: @accent-color !important; - } - .radioBox_label::after { - border-color: @overlay1 !important; - } - } - .c_select select option { - background-color: @surface0 !important; - color: @text !important; - } - /* page selector (search page) */ - .c_pagination, - .c_pagination_num_wrapper { - background: @mantle !important; - } - .c_pagination_first_wrapper, - .c_pagination_last_wrapper { - background: @base !important; - } - .c_pagination_num.is_current span { - background: @accent-color !important; - color: @base !important; - } - /* creator registration page */ - .creator-content - .email-register-container - .email-register-form - input:not([type="checkbox"], [type="radio"]):focus { - box-shadow: 0 0 0 1px @accent-color !important; - } - .creator-content - .email-register-container - .email-register-form - input:not([type="checkbox"], [type="radio"]) { - background: @mantle !important; - border-color: @surface0 !important; - color: @text !important; - } - /* "Password" field */ - .creator-content - .email-register-container - .email-register-form - fieldset - label - .att { - color: @subtext1 !important; - } - /* name validation popup */ - .is_error { - .tc_validation_input { - .tc_validation_input_message { - background: @mantle !important; - border-color: @red !important; - color: @text !important; - - &::before { - border-top-color: @red !important; - } - } - .tc_validation_input_status::after { - color: @red !important; - } - } - } - .tc_validation_input { - .tc_validation_input_message { - background: @mantle !important; - border-color: @overlay1 !important; - color: @text !important; - - &::before { - border-top-color: @overlay1 !important; - } - } - } - .is_can_use.tc_validation_input .tc_validation_input_status::after { - color: @green !important; - } - /* "Authentication Completed!" icon (registration) */ - .creator-content { - .success { - background: @surface0 !important; - border-color: @accent-color !important; - - &::after { - border-left-color: @accent-color !important; - border-bottom-color: @accent-color !important; - } - } - /* "Terms of Use" and "Privacy Policy" links */ - .email-register-container .email-register-form fieldset a { - color: @accent-color !important; - } - } - /* creator page */ - /* sidebar (creator/info page) */ - .tc_sidebar_im_tmb { - background-color: @subtext0 !important; - border-color: @subtext0 !important; - } - .tc_sidebar { - background-color: @mantle !important; - color: @text !important; - border-right-color: @surface2; - - .nav > li a:hover, - .nav > li a:focus { - background-color: @surface0 !important; - } - } - .tc_sidebar_lang { - background-color: @surface0 !important; - } - .tc_sidebar_basic_wrapper .tc_sidebar_basic_title { - background-color: @base !important; - } - .nav > li > a { - color: @text !important; - } - /* header (creator/info page) */ - .tc_page_header { - background: @mantle !important; - border-color: @surface2 !important; - } - .border-bottom { - border-bottom-color: @surface2 !important; - } - .text-white { - color: @text !important; - } - .navbar-light .navbar-nav .nav-link { - color: @subtext0 !important; - - &:hover { - color: @subtext1 !important; - } - } - /* main body (creator/info page) */ - .gray-bg { - background-color: @base !important; - } - .card-body { - background-color: @mantle !important; - border-color: @surface2 !important; - } - .badge-info { - background-color: @surface2 !important; - border-color: @surface2 !important; - } - .footer { - background: none repeat scroll 0 @mantle !important; - border-top-color: @surface2 !important; - } - .small > a { - color: @accent-color !important; - } - /* "Creator Informations" pages (creator/info page) */ - .card-header { - background: @mantle !important; - border-color: @surface2 !important; - - &:first-child { - background-color: @mantle !important; - } - } - /* creator/image_maker page */ - .btn-primary.btn-lg { - background-color: @surface1 !important; - border-color: @surface1 !important; - color: @text !important; - } - .alert-info { - background-color: @surface0 !important; - border-color: @surface2 !important; - color: @text !important; - } - /* profile page (creator) */ - .account-content section { - border-bottom-color: @subtext0 !important; - - .att, - .indent .mi-renkei { - color: @subtext0 !important; - } - } - /* image maker registration (creator) */ - .modal-body { - background: @base !important; - } - .modal-header { - background-color: @mantle !important; - border-bottom-color: @surface1 !important; - - .close, - .close:hover { - color: @text !important; - } - } - /* "image maker name" (creator) */ - .form-control { - background-color: @mantle !important; - border-color: @surface1 !important; - color: @text !important; - - &:focus { - border-color: @accent-color !important; - } - } - .tc_canvas-square, - .tc_canvas-rectangle { - background: @surface2 !important; - } - /* image maker "type" (creator) */ - .tc_imagemaker_register_type li :checked + label { - border-color: @accent-color !important; - box-shadow: 0 0 0 2px @accent-color !important; - color: @surface1 !important; - } - .tc_imagemaker_register_type - li - :checked - + label - .tc_imagemaker_register_type_name { - background-color: @accent-color !important; - border-bottom-color: @accent-color !important; - color: @surface1 !important; - } - .tc_imagemaker_register_type li label { - background: @overlay0 !important; - border-color: @surface2 !important; - - .tc_imagemaker_register_type_name { - border-bottom-color: @surface2 !important; - } - .tc_imagemaker_register_type_desc { - background-color: @mantle !important; - color: @text !important; - } - } - .modal-footer { - background-color: @mantle !important; - border-top-color: @surface1 !important; - } - .btn-outline-secondary, - .btn-outline-secondary:hover { - background: @surface1 !important; - border-color: @surface2 !important; - color: @text !important; - } - .btn-primary, - .btn-primary:hover { - background-color: @accent-color !important; - border-color: @accent-color !important; - color: @surface1 !important; - } - /* image maker list (creator) */ - .tc_imlist_add_imagemaker { - border-color: @surface1 !important; - - &:hover { - border-color: @subtext1 !important; - } - &::before { - color: @overlay1 !important; - } - } - .card { - background-color: @base !important; - } - .card-footer { - background: @crust !important; - border-top-color: @surface0 !important; - } - .btn-info, - .btn-outline-info { - background-color: @surface0 !important; - border-color: @surface2 !important; - color: @text !important; - - &:hover { - background-color: @overlay0 !important; - border-color: @overlay0 !important; - color: @text !important; - } - } - .btn-info:focus { - box-shadow: 0 0 0 0.1rem @accent-color !important; - } - .badge-default, - .tc_badge_default { - background-color: @surface0 !important; - border-color: @surface2 !important; - color: @subtext0 !important; - } - /* image maker "Edit" (creator) */ - .btn-info { - background-color: @surface2 !important; - border-color: @surface2 !important; - color: @text !important; - } - .btn-warning { - background-color: @accent-color !important; - border-color: @accent-color !important; - color: @base !important; - - &:focus { - box-shadow: 0 0 0 0.1rem @accent-color !important; - } - } - .tc_im_parts_eye .tc_im_parts_eye_icon { - background: @surface0 !important; - } - .tc_im_parts_ctrl .disabled [class^="tc_ctrl_"] { - background-color: @surface0 !important; - - &::before { - color: @text !important; - } - } - .tc_im_layer_list li { - border-color: @overlay0 !important; - } - /* image maker part editor (creator) */ - .tc_sidebar_im_title { - color: @subtext0 !important; - - &::after { - background-color: @subtext0 !important; - } - } - .tc_sidebar_im li a:not(.btn) { - color: @text !important; - } - .tc_sidebar_parts_list li .tc_sidebar_parts_list_parts:hover { - background-color: @surface0 !important; - } - .tc_parts_ctrl_setting .widget.white-bg.disabled { - background-color: @surface0 !important; - border-color: @surface2 !important ; - color: @subtext0 !important; - } - .tc_c_textmenu li a { - color: @accent-color !important; - } - .btn:disabled, - .btn:disabled:hover { - background-color: @surface2 !important; - border-color: @overlay1; - color: @subtext1 !important; - } - .btn-danger, - .btn-danger:hover { - background-color: @red !important; - border-color: @red !important; - color: @base !important; - } - .hr-line-dashed { - background-color: @subtext0 !important; - border-color: @subtext0 !important; - color: @subtext0 !important; - } - /* "bulk upload" (creator) */ - .tc_bulkupload_type_select .tc_bulkupload_type_tab label { - background-color: @surface0 !important; - border-color: @accent-color !important; - } - .tc_bulkupload_color_select li input[type="radio"]:checked + label { - box-shadow: inset 0 0 0 2px @accent-color; - } - .tc_color_chip, - .tc_bulkupload_option h4 { - background-color: @surface0 !important; - border-color: @surface0 !important; - } - /* image maker part settings (creator) */ - .tc_upload_imgs .tc_upload_img_old { - background-color: @surface1 !important; - - &::after { - background-color: @surface0 !important; - } - } - .input-group-text { - background-color: @surface2 !important; - border-color: @surface2 !important; - color: @subtext1 !important; - } - .tc_radio_switch label:first-child input[type="radio"] + span { - background-color: @accent-color !important; - color: @base !important; - - &::before { - box-shadow: - inset 0 0 0 1px @accent-color, - -2px 0 1px @crust !important; - } - } - /* image maker "rules" (creator) */ - .text-info { - color: @accent-color !important; - } - /* image maker "color palette" (creator) */ - .tc_colorgp_detail_parts_deselect li { - background: @surface0; - border-color: @surface2; - color: @text !important; - - &:hover { - background: @surface2 !important; - border-color: @overlay0 !important; - color: @text !important; - } - &::before { - color: @subtext1 !important; - } - } - /* "Sort layer order" (creator) */ - .tc_im_layer_sort li > div { - background: @surface0 !important; - border-color: @surface0 !important; - - i { - color: @subtext1 !important; - } - } - /* item list (creator) */ - .tc_items_itemlist_header .tc_items_itemlist_sortno, - .tc_items_itemlist.is_style_detail > li.tc_item_opened { - background-color: @base !important; - } - .tc_items_itemlist.is_style_detail - > li - .tc_items_itemlist_header - .tc_items_itemlist_no { - background-color: @surface1 !important; - color: @text !important; - } - .tc_items_itemlist.is_style_detail > li { - border-color: @base !important; - } - .page-item.disabled .page-link { - background-color: @surface0 !important; - border-color: @base !important; - color: @text !important; - } - .page-item.active .page-link { - background: @accent-color !important; - border-color: @accent-color !important; - color: @surface0 !important; - } - .tc_items_itemlist.is_style_detail - > li - .tc_items_itemlist_content - .tc_items_itemlist_layers - > li { - border-bottom-color: @subtext0 !important; - } - .tc_c_textmenu li { - border-left-color: @subtext0 !important; - border-right-color: @subtext0 !important; - } - /* thank u isabel for fixing this part */ - .tc_items_itemlist.is_style_detail - > li - .tc_items_itemlist_content - .tc_items_itemlist_layers - > li - .tc_items_itemlist_imgs - > li { - &, - &::before { - background-color: @surface0 !important; - border-color: @surface0 !important; - } - } - .custom-select { - background: @base !important; - border-color: @surface1 !important; - color: @text !important; - } - .tc_items_style > label { - .tc_radio_label { - border-color: @subtext0 !important; - } - input[type="radio"]:checked + .tc_radio_label { - border-color: @accent-color !important; - color: @accent-color !important; - } - } - /* image maker publication (creator) */ - .tc_release_description { - background: @surface0 !important; - } - .border-danger { - border-color: @red !important; - } - .text-danger { - color: @red !important; - } - .text-navy { - color: @accent-color !important; - } - /* discovery page */ - .discovery_header .discovery_description { - color: @overlay2 !important; - } - .discovery_totop { - background-color: @surface1 !important; - color: @text !important; - } - .loading-spiral[data-v-46b20d22] { - border-color: @subtext0 !important; - } - /* image maker (inner + outer) */ - .play-Imagemaker.is_info_show .imagemaker_info_bg { - background: @mantle !important; - } - .imagemaker_info_wrapper { - .imagemaker_info_header { - background-color: @mantle !important; - } - .imagemaker_info_footer { - background-color: @mantle !important; - } - /* help button (outer image maker) */ - .imagemaker_info_btn_help { - background-color: @surface1 !important; - border-color: @surface2 !important; - box-shadow: 0 4px 0 @surface1 !important; - color: @text !important; - } - /* "play" button (outer image maker) */ - .imagemaker_info_btn_start { - background: @accent-color !important; - border-color: @accent-color !important; - box-shadow: 0 4px 0 @accent-color !important; - color: @base !important; - } - .imagemaker_info_creator a { - color: @accent-color !important; - } - .imagemaker_info_description a { - color: @accent-color !important; - } - /* tags (outer image maker) */ - .imagemaker_info_use_range li.is_can > div { - background: @surface0 !important; - border-color: @surface1 !important; - color: @text !important; - } - .imagemaker_info_tag a { - border-color: @surface2 !important; - color: @subtext0 !important; - } - .imagemaker_info_use_range li > div { - background: @surface0 !important; - border-color: @surface1 !important; - color: @text !important; - } - /* tag icon (outer image maker) */ - .imagemaker_info_use_range li.is_can > div::before { - color: @accent-color !important; - } - } - .is_info_show .imagemaker_info_show_btn { - background: @accent-color !important; - color: @overlay0 !important; - } - /* outer bookmark button (outer image maker) */ - .play-Imagemaker.is_info_show .imagemaker_info_icon .bookmark { - background-color: @surface0 !important; - border-color: @surface2 !important; - } - /* dice/random button (inner image maker) */ - .imagemaker_menu_btn { - background-color: @surface1 !important; - } - /* non-selected color (inner image maker) */ - .imagemaker_colorBox ul li { - border-color: @overlay2 !important; - - /* empty color (inner image maker) */ - &.emptycolor { - border-color: @overlay2 !important; - } - /* selected color (inner image maker) */ - &.selected { - border-color: @overlay2 !important; - box-shadow: inset 0 0 0 3px @overlay2 !important; - } - } - .imagemaker_parts_menu ul li.selected { - background-color: @surface0 !important; - - &::before { - box-shadow: inset 0 -5px 0 -1px @accent-color !important; - } - } - li.selected::after { - box-shadow: inset 0 0 0 3px @accent-color !important; - } - /* switch to outer image maker (inner image maker) */ - .imagemaker_info_show_btn { - background-color: @accent-color !important; - border-color: @accent-color !important; - color: @overlay0 !important; - } - /* bookmark button (inner image maker) */ - .play-Imagemaker .bookmark { - background-color: @accent-color !important; - border-color: @accent-color !important; - } - .imagemaker_ctrl_btns .btn_show_itemlist.selected { - background-color: @accent-color !important; - color: @overlay0 !important; - } - /* move image element (background) (inner image maker) */ - .imagemaker_controller { - background-color: @mantle !important; - } - /* rotate image element (inner image maker) */ - .ctrlbtn-rotate_left, - .ctrlbtn-rotate_right { - background: @surface0 !important; - color: @accent-color !important; - } - /* move image element (buttons) (inner image maker) */ - .control_position_wrapper .ctrlbtn_position_inner::before, - .control_position_wrapper .ctrlbtn_position_inner::after { - background: @surface0 !important; - } - .ctrlbtn-move_up, - .ctrlbtn-move_down, - .ctrlbtn-move_right, - .ctrlbtn-move_left { - color: @accent-color !important; - } - .imagemaker_controller_reset, - .imagemaker_controller_reset:hover { - background: @surface0 !important; - color: @text !important; - } - /* "Done" button (inner image maker) */ - .imagemaker_complete_btn, - .imagemaker_complete_btn:hover { - background: @accent-color !important; - color: @surface0 !important; - } - /* load screen after clicking "Done" (image complete) */ - .save_anime { - background-color: @base !important; - } - /* "Your picture is done!" (image complete) */ - .complete-Main { - background: @mantle !important; - } - /* download button (image complete) */ - .complete-Download_Btn, - .complete-Download_Btn:hover { - background: @accent-color !important; - border-color: @accent-color !important; - box-shadow: 0 4px 0 @accent-color !important; - color: @surface1 !important; - } - /* "add to bookmarks" area (image complete) */ - .complete-Container .recommend-bookmark { - background: @mantle !important; - border-color: @surface0 !important; - - /* fix for "Add to bookmarks" button" */ - .c_btn { - box-shadow: 0 4px 0 @surface0 !important; - } - } - /* share image (image complete) */ - .complete-Share_Wrapper { - background: @mantle !important; - border-color: @surface0 !important; - } - .complete-ShareSns .complete-ShareSns_Copy { - background-color: @surface0 !important; - border-color: @surface2 !important; - color: @subtext0 !important; - } - .complete-ShareText { - .complete-ShareText_Title { - color: @subtext0 !important; - } - textarea { - background-color: @surface0 !important; - border-color: @overlay0 !important; - color: @subtext0 !important; - } - } - /* "Create a new one!" button (image complete) */ - .complete-Btn_Back, - .complete-Btn_Back:hover { - background: @surface1 !important; - border-color: @surface1 !important; - box-shadow: 0 4px 0 @surface0 !important; - color: @text; - } - .st-Related_Tags { - background-color: @mantle !important; - } - .st-Related_ImagemakerList { - background-color: @mantle !important; - } - .sitetop-ImagemakerList_List a .sw_imagemaker_creator { - color: @subtext0 !important; - } - /* "Search by tag" (image complete) */ - .st-Related_Tags .st-Related_Tag a { - background: @surface0 !important; - border-color: @accent-color !important; - color: @text !important; - } - /* "Copied to clipboard" popup (image complete) */ - .toasted.sw-Toast.bubble { - background-color: @accent-color !important; - color: @surface0 !important; - } - /* fix for bookmark icon (bookmarks page) */ - .bookmark-inner h2 .fa { - color: @accent-color !important; - } - /* support.picrew.me page */ - .site-branding { - background-color: @base !important; - color: @text !important; - } - .menu-toggle { - background-color: @surface0 !important; - color: @text !important; - - &:hover { - background-color: @surface2 !important; - color: @text !important; - } - } - .site-title a, - .site-description { - color: @text !important; - } - .bogo-language-name a { - color: @accent-color !important; - } - .main-navigation { - background-color: @mantle !important; - color: @text !important; - - a { - color: @text !important; - } - a:hover, - ul > :hover > a { - color: @accent-color !important; - } - /* "what is picrew?" page (support) */ - li.current_page_item > a::before, - li.current-menu-item > a::before { - border-bottom-color: @accent-color !important; - } - .nav-menu > li > a::after, - .menu > li > a::after { - color: @accent-color !important; - } - } - .picrew_front-page-content-area.content-area - .picrew_front-content - .with-featured-image { - background-color: @mantle !important; - } - .widget_linkblock { - border-color: @accent-color !important; - box-shadow: 0 0 0 0 @accent-color inset !important; - color: @text !important; - - .widget_linkblock_title { - color: @accent-color !important; - } - .widget_linkblock_text { - color: @subtext1 !important; - } - &:hover { - border-color: @accent-color !important; - box-shadow: 0 0 0 4px @accent-color inset !important; - color: @text !important; - } - } - .front-widget-area { - border-bottom-color: @surface2 !important; - } - .footer-widget-area { - background-color: @mantle !important; - border-top-color: @mantle !important; - - .widget ul > li { - border-top-color: @surface2 !important; - - &:last-child { - border-bottom-color: @surface2 !important; - } - } - a { - color: @text !important; - } - .widget-title, - a:hover { - color: @accent-color !important; - } - } - /* aaaaaaaaaaaaaa */ - #search-3 > #searchform > div > input[type="text"] { - background-color: @surface0 !important; - border-color: @surface2 !important; - color: @text !important; - - &:focus { - border-color: @accent-color !important; - } - } - #searchsubmit > button, - input[type="button"], - input[type="reset"], - input[type="submit"], - #infinite-handle span { - background-color: @surface1 !important; - color: @text !important; - } - .site-footer { - background-color: @crust !important; - border-top-color: @surface0 !important; - color: @subtext1 !important; - } - .page .site-content { - background-color: @mantle !important; - } - .content-wrapper.full-width.without-featured-image { - background-color: @mantle !important; - color: @text !important; - } - body.page:not(.home) .entry-title { - color: @text !important; - - &::after { - background: @accent-color !important; - } - } - .entry-content h2 { - background: @surface0 !important; - border-bottom-color: @accent-color !important; - color: @text !important; - } - .content-wrapper.full-width .hentry::after { - background-color: @surface1 !important; - } - /* "learn how to play with picrew" page (support) */ - #toc_container { - background: @surface0 !important; - border-color: @surface2 !important; - - a { - color: @accent-color !important; - } - p.toc_title { - color: @text !important; - } - } - .entry-content { - td, - table { - border-color: @surface2 !important; - } - h3 { - border-bottom-color: @surface2 !important; - border-left-color: @accent-color !important; - color: @text !important; - } - h4 { - color: @subtext1 !important; - } - h4::before, - a { - color: @accent-color !important; - } - } - /* "Create your image maker" page (support) */ - .content-wrapper { - background: @mantle !important; - } - .sidebar-widget-area .widget ul > li { - border-top-color: @overlay2 !important; - - > a { - color: @accent-color !important; - } - } - /* "list of creator functions" page (support) */ - .site-content { - background-color: @mantle !important; - } - .sidebar-widget-area .widget-title { - color: @text !important; - } - .blog { - .entry-title a { - color: @accent-color !important; - } - .entry-body { - color: @subtext1 !important; - } - } - .wp-pagenavi { - span.current { - background: @accent-color !important; - border-color: @accent-color !important; - color: @surface1 !important; - } - a { - background-color: @base !important; - border-color: @accent-color !important; - color: @text !important; - - &:hover { - background-color: @accent-color !important; - color: @surface1 !important; - } - } - } - /* "list of creator functions" archive page...? honestly idfk why this is a thing (support) */ - .archive { - .page-title { - color: @text !important; - } - .entry-title a { - color: @accent-color !important; - } - .entry-body { - color: @text !important; - } - } - } - @media (prefers-color-scheme: light) { - :root { - #catppuccin(@lightFlavor, @accentColor); - } - } - @media (prefers-color-scheme: dark) { - :root { - #catppuccin(@darkFlavor, @accentColor); - } - } -} - -/* prettier-ignore */ -@catppuccin: { - @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; - @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; - @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; - @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; -} - -// vim:ft=less +==/UserStyle== */ \ No newline at end of file diff --git a/styles/picrew/catppuccin.user.less b/styles/picrew/catppuccin.user.less new file mode 100644 index 0000000000..00113092d9 --- /dev/null +++ b/styles/picrew/catppuccin.user.less @@ -0,0 +1,1389 @@ +/* ==UserStyle== +@name Picrew Catppuccin +@namespace github.com/catppuccin/userstyles/styles/picrew +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/picrew +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/picrew/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apicrew +@description Soothing pastel theme for Picrew +@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("picrew.me") { + #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 !important; + color: @text !important; + } + /* language prompt */ + .header-langbox { + background: @mantle !important; + color: @text !important; + } + .header-langbox-buttons button { + background: @subtext0 !important; + color: @base !important; + } + /* header */ + .sitetop-Header { + background: @base !important; + + .splide__arrow { + background: @subtext0 !important; + } + } + .st-Header_Wrapper { + background: @yellow !important; + + .st-Header { + .sp-nav .nav-link li ul, + .sp-nav .nav-link li h2 { + border-top-color: @surface1 !important; + } + + .st-Header_Logo { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml;charset=utf8,@{svg}"); + filter: none; + } + + .st-Header_Linkicon { + color: @base !important; + } + + .menu__line { + background-color: @base !important; + } + + /* side menu close button */ + .open .menu__line--1, + .open .menu__line--3 { + background-color: @text !important; + } + } + } + .sitetop-Nav { + background: @mantle !important; + color: @text !important; + } + .splide__pagination__page { + background: @overlay1 !important; + + &.is-active { + background: @accent-color !important; + } + } + #home { + background: @base !important; + color: @text !important; + } + /* "Information" page (main page) */ + .page-info { + background-color: @mantle !important; + } + .sp_title a, + .page-info a { + color: @accent-color !important; + } + .rankA::before { + color: @text !important; + } + /* "welcome creator" page (main page) */ + .header_bg[data-v-2537399f] { + background: linear-gradient(90deg, @surface0, @base); + } + /* MOBILE ONLY: ad for downloading the app */ + .sitetop-appDL { + background: @mantle !important; + + .sitetop-appDL_Header .sitetop-appDL_Title .fa { + color: @accent-color !important; + } + } + /* "Featured Tags" section - directly above Discovery */ + .sitetop-tags { + background: @mantle !important; + + .sitetop-tags_Header .sitetop-tags_Title .fa { + color: @accent-color !important; + } + .recommended-tag-list .recommended-tag-list-item a { + border-color: @accent-color !important; + + /* tag icon before tag name */ + &::before { + color: @accent-color !important; + } + } + } + /* "Discovery" section (image is lightbulb) */ + .sitetop-Discovery { + background: @mantle !important; + + .sitetop-Discovery_Header { + .sitetop-Discovery_Title .fa { + color: @accent-color !important; + } + + .sitetop-DiscoveryList_More a { + background-color: @accent-color !important; + color: @base !important; + } + + .sitetop-Discovery_More { + color: @accent-color !important; + } + } + } + .sitetop-ImagemakerList_List li .squareSize .imagemaker_size { + background: @surface0 !important; + } + /* "Hot Now" section (image is a graph) */ + .sitetop-Hot_Title .fa { + color: @accent-color !important; + } + .sitetop-Hot_CountrySwitch { + background-color: @base !important; + + input:first-of-type + label::before { + background: @base !important; + } + + .sitetop-Hot_CountrySwitch_all span::after { + color: @accent-color !important; + } + + input:last-of-type + label span { + filter: brightness(-20%) !important; + color: @accent-color !important; + } + } + /* "Updated Image Makers (image (.fa) is bullhorn) */ + .sitetop-ImagemakerList { + background: @mantle !important; + } + .sitetop-ImagemakerList_Title .fa { + color: @accent-color !important; + } + .c_btn { + background: @surface1 !important; + color: @text !important; + border-color: @surface1 !important; + + &:hover { + background: @surface2 !important; + color: @text !important; + border-color: @surface2 !important; + } + &:focus { + box-shadow: 0 0 0 1px @accent-color !important; + } + } + .sitetop-info { + background-color: @mantle !important; + color: @text !important; + + h1::after { + background: @mantle !important; + } + i { + background: @mantle !important; + border-radius: 6px !important; + } + } + .title { + color: @text !important; + } + .category { + background: @base !important; + color: @text !important; + } + .date { + color: @subtext1 !important; + } + .simplebar-content-wrapper { + background-color: @mantle !important; + color: @text !important; + } + .st-Terms { + border-color: @accent-color !important; + border-radius: 2px !important; + } + .st-Terms_Wrapper .st-Terms a, + .st-Terms_Wrapper .st-Terms .st-Terms_Body strong { + color: @accent-color !important; + } + .c_select select { + background: @mantle !important; + border-color: @overlay0 !important; + } + .st-Terms_Cookie, + .st-Terms_CookieTitle { + color: @text !important; + } + .st-Terms_Footer { + background-color: @mantle !important; + color: @subtext1 !important; + } + .st-Terms_AgreeBtn { + background: @surface1 !important; + border-color: @surface1 !important; + box-shadow: 0 4px 0 @surface2 !important; + color: @text !important; + + &:hover { + background: @surface2 !important; + border-color: @surface2 !important; + box-shadow: 0 4px 0 @surface2 !important; + color: @text !important; + } + } + .popup { + background-color: @base !important; + border-color: @accent-color !important; + } + .popup-header { + background-color: @mantle !important; + } + .popup-body .content a { + color: @accent-color !important; + } + .bellicon { + color: @accent-color !important; + border-color: @accent-color !important; + } + .close-btn { + border-color: @overlay0 !important; + color: @subtext1 !important; + } + .st-Footer_Wrapper { + background-color: @mantle !important; + color: @text !important; + } + .st-Footer_Links_bottom { + background: @base !important; + color: @subtext1 !important; + } + .st-Footer .st-Footer_Links div span.st-Header_Logo { + filter: none !important; + } + .sitetop-Twitter, + .sitetop-Twitter_Title { + background-color: @mantle !important; + border-bottom-color: @overlay1 !important; + } + .item { + border-bottom-color: @surface2 !important; + } + /* login screen */ + .page-container { + .panel { + background: @mantle !important; + border-radius: 6px !important; + } + .page-header { + color: @text !important; + } + } + .login-container_sns .c_text_right { + color: @subtext0 !important; + } + /* login screen */ + .login-container { + .login-form-container { + .c_text_right a { + color: @accent-color !important; + } + .login-form input:focus { + box-shadow: 0 0 0 1px @accent-color !important; + } + } + hr.sw_hr01 { + border-color: @surface1 !important; + } + input:not([type="checkbox"], [type="radio"]) { + background: @base !important; + border-color: @surface2 !important; + border-radius: 1px !important; + color: @text !important; + } + } + .h100 { + background: @base !important; + color: @text !important; + } + .pwBox .btn-default { + color: @subtext0 !important; + } + /* search page */ + .search-Form > fieldset { + background: @base !important; + + .search-Form_Keyword .search-Form_KeywordInput:focus { + box-shadow: 0 0 0 1px @accent-color !important; + } + } + .search-Form_Keyword { + .search-iconBox { + color: @subtext1 !important; + } + .search-Form_KeywordInput { + background: @mantle !important; + border-color: @overlay1 !important; + color: @text !important; + } + } + .search-filterBox { + background: @base !important; + + .btn-filter { + background-color: @surface1 !important; + border-radius: 6px !important; + border-color: @surface0 !important; + color: @text !important; + } + ul .labelBox { + background: @surface1 !important; + border-color: @surface0 !important; + color: @text !important; + } + } + .search-ImagemakerList .search-ImagemakerList_Result { + background: @mantle !important; + + .squareSize .imagemaker_size { + background: @surface0 !important; + } + } + .search-ImagemakerList_UseRange li > div { + background: @surface0 !important; + border-color: @surface0 !important; + color: @text !important; + } + /* filter menu (search page) */ + .search_Modal { + ul .labelBoxlist .labelBox { + background: @surface1 !important; + border-color: @surface0 !important; + } + .squareSize, + .rectangleSize { + background: @surface0 !important; + } + .c_select::after { + color: @subtext0 !important; + } + } + .vm--container .radioBox { + background-color: @base !important; + + .radioBox_label::before { + background: @accent-color !important; + } + .radioBox_label::after { + border-color: @overlay1 !important; + } + } + .c_select select option { + background-color: @surface0 !important; + color: @text !important; + } + /* page selector (search page) */ + .c_pagination, + .c_pagination_num_wrapper { + background: @mantle !important; + } + .c_pagination_first_wrapper, + .c_pagination_last_wrapper { + background: @base !important; + } + .c_pagination_num.is_current span { + background: @accent-color !important; + color: @base !important; + } + /* creator registration page */ + .creator-content + .email-register-container + .email-register-form + input:not([type="checkbox"], [type="radio"]):focus { + box-shadow: 0 0 0 1px @accent-color !important; + } + .creator-content + .email-register-container + .email-register-form + input:not([type="checkbox"], [type="radio"]) { + background: @mantle !important; + border-color: @surface0 !important; + color: @text !important; + } + /* "Password" field */ + .creator-content + .email-register-container + .email-register-form + fieldset + label + .att { + color: @subtext1 !important; + } + /* name validation popup */ + .is_error { + .tc_validation_input { + .tc_validation_input_message { + background: @mantle !important; + border-color: @red !important; + color: @text !important; + + &::before { + border-top-color: @red !important; + } + } + .tc_validation_input_status::after { + color: @red !important; + } + } + } + .tc_validation_input { + .tc_validation_input_message { + background: @mantle !important; + border-color: @overlay1 !important; + color: @text !important; + + &::before { + border-top-color: @overlay1 !important; + } + } + } + .is_can_use.tc_validation_input .tc_validation_input_status::after { + color: @green !important; + } + /* "Authentication Completed!" icon (registration) */ + .creator-content { + .success { + background: @surface0 !important; + border-color: @accent-color !important; + + &::after { + border-left-color: @accent-color !important; + border-bottom-color: @accent-color !important; + } + } + /* "Terms of Use" and "Privacy Policy" links */ + .email-register-container .email-register-form fieldset a { + color: @accent-color !important; + } + } + /* creator page */ + /* sidebar (creator/info page) */ + .tc_sidebar_im_tmb { + background-color: @subtext0 !important; + border-color: @subtext0 !important; + } + .tc_sidebar { + background-color: @mantle !important; + color: @text !important; + border-right-color: @surface2; + + .nav > li a:hover, + .nav > li a:focus { + background-color: @surface0 !important; + } + } + .tc_sidebar_lang { + background-color: @surface0 !important; + } + .tc_sidebar_basic_wrapper .tc_sidebar_basic_title { + background-color: @base !important; + } + .nav > li > a { + color: @text !important; + } + /* header (creator/info page) */ + .tc_page_header { + background: @mantle !important; + border-color: @surface2 !important; + } + .border-bottom { + border-bottom-color: @surface2 !important; + } + .text-white { + color: @text !important; + } + .navbar-light .navbar-nav .nav-link { + color: @subtext0 !important; + + &:hover { + color: @subtext1 !important; + } + } + /* main body (creator/info page) */ + .gray-bg { + background-color: @base !important; + } + .card-body { + background-color: @mantle !important; + border-color: @surface2 !important; + } + .badge-info { + background-color: @surface2 !important; + border-color: @surface2 !important; + } + .footer { + background: none repeat scroll 0 @mantle !important; + border-top-color: @surface2 !important; + } + .small > a { + color: @accent-color !important; + } + /* "Creator Informations" pages (creator/info page) */ + .card-header { + background: @mantle !important; + border-color: @surface2 !important; + + &:first-child { + background-color: @mantle !important; + } + } + /* creator/image_maker page */ + .btn-primary.btn-lg { + background-color: @surface1 !important; + border-color: @surface1 !important; + color: @text !important; + } + .alert-info { + background-color: @surface0 !important; + border-color: @surface2 !important; + color: @text !important; + } + /* profile page (creator) */ + .account-content section { + border-bottom-color: @subtext0 !important; + + .att, + .indent .mi-renkei { + color: @subtext0 !important; + } + } + /* image maker registration (creator) */ + .modal-body { + background: @base !important; + } + .modal-header { + background-color: @mantle !important; + border-bottom-color: @surface1 !important; + + .close, + .close:hover { + color: @text !important; + } + } + /* "image maker name" (creator) */ + .form-control { + background-color: @mantle !important; + border-color: @surface1 !important; + color: @text !important; + + &:focus { + border-color: @accent-color !important; + } + } + .tc_canvas-square, + .tc_canvas-rectangle { + background: @surface2 !important; + } + /* image maker "type" (creator) */ + .tc_imagemaker_register_type li :checked + label { + border-color: @accent-color !important; + box-shadow: 0 0 0 2px @accent-color !important; + color: @surface1 !important; + } + .tc_imagemaker_register_type + li + :checked + + label + .tc_imagemaker_register_type_name { + background-color: @accent-color !important; + border-bottom-color: @accent-color !important; + color: @surface1 !important; + } + .tc_imagemaker_register_type li label { + background: @overlay0 !important; + border-color: @surface2 !important; + + .tc_imagemaker_register_type_name { + border-bottom-color: @surface2 !important; + } + .tc_imagemaker_register_type_desc { + background-color: @mantle !important; + color: @text !important; + } + } + .modal-footer { + background-color: @mantle !important; + border-top-color: @surface1 !important; + } + .btn-outline-secondary, + .btn-outline-secondary:hover { + background: @surface1 !important; + border-color: @surface2 !important; + color: @text !important; + } + .btn-primary, + .btn-primary:hover { + background-color: @accent-color !important; + border-color: @accent-color !important; + color: @surface1 !important; + } + /* image maker list (creator) */ + .tc_imlist_add_imagemaker { + border-color: @surface1 !important; + + &:hover { + border-color: @subtext1 !important; + } + &::before { + color: @overlay1 !important; + } + } + .card { + background-color: @base !important; + } + .card-footer { + background: @crust !important; + border-top-color: @surface0 !important; + } + .btn-info, + .btn-outline-info { + background-color: @surface0 !important; + border-color: @surface2 !important; + color: @text !important; + + &:hover { + background-color: @overlay0 !important; + border-color: @overlay0 !important; + color: @text !important; + } + } + .btn-info:focus { + box-shadow: 0 0 0 0.1rem @accent-color !important; + } + .badge-default, + .tc_badge_default { + background-color: @surface0 !important; + border-color: @surface2 !important; + color: @subtext0 !important; + } + /* image maker "Edit" (creator) */ + .btn-info { + background-color: @surface2 !important; + border-color: @surface2 !important; + color: @text !important; + } + .btn-warning { + background-color: @accent-color !important; + border-color: @accent-color !important; + color: @base !important; + + &:focus { + box-shadow: 0 0 0 0.1rem @accent-color !important; + } + } + .tc_im_parts_eye .tc_im_parts_eye_icon { + background: @surface0 !important; + } + .tc_im_parts_ctrl .disabled [class^="tc_ctrl_"] { + background-color: @surface0 !important; + + &::before { + color: @text !important; + } + } + .tc_im_layer_list li { + border-color: @overlay0 !important; + } + /* image maker part editor (creator) */ + .tc_sidebar_im_title { + color: @subtext0 !important; + + &::after { + background-color: @subtext0 !important; + } + } + .tc_sidebar_im li a:not(.btn) { + color: @text !important; + } + .tc_sidebar_parts_list li .tc_sidebar_parts_list_parts:hover { + background-color: @surface0 !important; + } + .tc_parts_ctrl_setting .widget.white-bg.disabled { + background-color: @surface0 !important; + border-color: @surface2 !important; + color: @subtext0 !important; + } + .tc_c_textmenu li a { + color: @accent-color !important; + } + .btn:disabled, + .btn:disabled:hover { + background-color: @surface2 !important; + border-color: @overlay1; + color: @subtext1 !important; + } + .btn-danger, + .btn-danger:hover { + background-color: @red !important; + border-color: @red !important; + color: @base !important; + } + .hr-line-dashed { + background-color: @subtext0 !important; + border-color: @subtext0 !important; + color: @subtext0 !important; + } + /* "bulk upload" (creator) */ + .tc_bulkupload_type_select .tc_bulkupload_type_tab label { + background-color: @surface0 !important; + border-color: @accent-color !important; + } + .tc_bulkupload_color_select li input[type="radio"]:checked + label { + box-shadow: inset 0 0 0 2px @accent-color; + } + .tc_color_chip, + .tc_bulkupload_option h4 { + background-color: @surface0 !important; + border-color: @surface0 !important; + } + /* image maker part settings (creator) */ + .tc_upload_imgs .tc_upload_img_old { + background-color: @surface1 !important; + + &::after { + background-color: @surface0 !important; + } + } + .input-group-text { + background-color: @surface2 !important; + border-color: @surface2 !important; + color: @subtext1 !important; + } + .tc_radio_switch label:first-child input[type="radio"] + span { + background-color: @accent-color !important; + color: @base !important; + + &::before { + box-shadow: inset 0 0 0 1px @accent-color, -2px 0 1px @crust !important; + } + } + /* image maker "rules" (creator) */ + .text-info { + color: @accent-color !important; + } + /* image maker "color palette" (creator) */ + .tc_colorgp_detail_parts_deselect li { + background: @surface0; + border-color: @surface2; + color: @text !important; + + &:hover { + background: @surface2 !important; + border-color: @overlay0 !important; + color: @text !important; + } + &::before { + color: @subtext1 !important; + } + } + /* "Sort layer order" (creator) */ + .tc_im_layer_sort li > div { + background: @surface0 !important; + border-color: @surface0 !important; + + i { + color: @subtext1 !important; + } + } + /* item list (creator) */ + .tc_items_itemlist_header .tc_items_itemlist_sortno, + .tc_items_itemlist.is_style_detail > li.tc_item_opened { + background-color: @base !important; + } + .tc_items_itemlist.is_style_detail + > li + .tc_items_itemlist_header + .tc_items_itemlist_no { + background-color: @surface1 !important; + color: @text !important; + } + .tc_items_itemlist.is_style_detail > li { + border-color: @base !important; + } + .page-item.disabled .page-link { + background-color: @surface0 !important; + border-color: @base !important; + color: @text !important; + } + .page-item.active .page-link { + background: @accent-color !important; + border-color: @accent-color !important; + color: @surface0 !important; + } + .tc_items_itemlist.is_style_detail + > li + .tc_items_itemlist_content + .tc_items_itemlist_layers + > li { + border-bottom-color: @subtext0 !important; + } + .tc_c_textmenu li { + border-left-color: @subtext0 !important; + border-right-color: @subtext0 !important; + } + /* thank u isabel for fixing this part */ + .tc_items_itemlist.is_style_detail + > li + .tc_items_itemlist_content + .tc_items_itemlist_layers + > li + .tc_items_itemlist_imgs + > li { + &, + &::before { + background-color: @surface0 !important; + border-color: @surface0 !important; + } + } + .custom-select { + background: @base !important; + border-color: @surface1 !important; + color: @text !important; + } + .tc_items_style > label { + .tc_radio_label { + border-color: @subtext0 !important; + } + input[type="radio"]:checked + .tc_radio_label { + border-color: @accent-color !important; + color: @accent-color !important; + } + } + /* image maker publication (creator) */ + .tc_release_description { + background: @surface0 !important; + } + .border-danger { + border-color: @red !important; + } + .text-danger { + color: @red !important; + } + .text-navy { + color: @accent-color !important; + } + /* discovery page */ + .discovery_header .discovery_description { + color: @overlay2 !important; + } + .discovery_totop { + background-color: @surface1 !important; + color: @text !important; + } + .loading-spiral[data-v-46b20d22] { + border-color: @subtext0 !important; + } + /* image maker (inner + outer) */ + .play-Imagemaker.is_info_show .imagemaker_info_bg { + background: @mantle !important; + } + .imagemaker_info_wrapper { + .imagemaker_info_header { + background-color: @mantle !important; + } + .imagemaker_info_footer { + background-color: @mantle !important; + } + /* help button (outer image maker) */ + .imagemaker_info_btn_help { + background-color: @surface1 !important; + border-color: @surface2 !important; + box-shadow: 0 4px 0 @surface1 !important; + color: @text !important; + } + /* "play" button (outer image maker) */ + .imagemaker_info_btn_start { + background: @accent-color !important; + border-color: @accent-color !important; + box-shadow: 0 4px 0 @accent-color !important; + color: @base !important; + } + .imagemaker_info_creator a { + color: @accent-color !important; + } + .imagemaker_info_description a { + color: @accent-color !important; + } + /* tags (outer image maker) */ + .imagemaker_info_use_range li.is_can > div { + background: @surface0 !important; + border-color: @surface1 !important; + color: @text !important; + } + .imagemaker_info_tag a { + border-color: @surface2 !important; + color: @subtext0 !important; + } + .imagemaker_info_use_range li > div { + background: @surface0 !important; + border-color: @surface1 !important; + color: @text !important; + } + /* tag icon (outer image maker) */ + .imagemaker_info_use_range li.is_can > div::before { + color: @accent-color !important; + } + } + .is_info_show .imagemaker_info_show_btn { + background: @accent-color !important; + color: @overlay0 !important; + } + /* outer bookmark button (outer image maker) */ + .play-Imagemaker.is_info_show .imagemaker_info_icon .bookmark { + background-color: @surface0 !important; + border-color: @surface2 !important; + } + /* dice/random button (inner image maker) */ + .imagemaker_menu_btn { + background-color: @surface1 !important; + } + /* non-selected color (inner image maker) */ + .imagemaker_colorBox ul li { + border-color: @overlay2 !important; + + /* empty color (inner image maker) */ + &.emptycolor { + border-color: @overlay2 !important; + } + /* selected color (inner image maker) */ + &.selected { + border-color: @overlay2 !important; + box-shadow: inset 0 0 0 3px @overlay2 !important; + } + } + .imagemaker_parts_menu ul li.selected { + background-color: @surface0 !important; + + &::before { + box-shadow: inset 0 -5px 0 -1px @accent-color !important; + } + } + li.selected::after { + box-shadow: inset 0 0 0 3px @accent-color !important; + } + /* switch to outer image maker (inner image maker) */ + .imagemaker_info_show_btn { + background-color: @accent-color !important; + border-color: @accent-color !important; + color: @overlay0 !important; + } + /* bookmark button (inner image maker) */ + .play-Imagemaker .bookmark { + background-color: @accent-color !important; + border-color: @accent-color !important; + } + .imagemaker_ctrl_btns .btn_show_itemlist.selected { + background-color: @accent-color !important; + color: @overlay0 !important; + } + /* move image element (background) (inner image maker) */ + .imagemaker_controller { + background-color: @mantle !important; + } + /* rotate image element (inner image maker) */ + .ctrlbtn-rotate_left, + .ctrlbtn-rotate_right { + background: @surface0 !important; + color: @accent-color !important; + } + /* move image element (buttons) (inner image maker) */ + .control_position_wrapper .ctrlbtn_position_inner::before, + .control_position_wrapper .ctrlbtn_position_inner::after { + background: @surface0 !important; + } + .ctrlbtn-move_up, + .ctrlbtn-move_down, + .ctrlbtn-move_right, + .ctrlbtn-move_left { + color: @accent-color !important; + } + .imagemaker_controller_reset, + .imagemaker_controller_reset:hover { + background: @surface0 !important; + color: @text !important; + } + /* "Done" button (inner image maker) */ + .imagemaker_complete_btn, + .imagemaker_complete_btn:hover { + background: @accent-color !important; + color: @surface0 !important; + } + /* load screen after clicking "Done" (image complete) */ + .save_anime { + background-color: @base !important; + } + /* "Your picture is done!" (image complete) */ + .complete-Main { + background: @mantle !important; + } + /* download button (image complete) */ + .complete-Download_Btn, + .complete-Download_Btn:hover { + background: @accent-color !important; + border-color: @accent-color !important; + box-shadow: 0 4px 0 @accent-color !important; + color: @surface1 !important; + } + /* "add to bookmarks" area (image complete) */ + .complete-Container .recommend-bookmark { + background: @mantle !important; + border-color: @surface0 !important; + + /* fix for "Add to bookmarks" button" */ + .c_btn { + box-shadow: 0 4px 0 @surface0 !important; + } + } + /* share image (image complete) */ + .complete-Share_Wrapper { + background: @mantle !important; + border-color: @surface0 !important; + } + .complete-ShareSns .complete-ShareSns_Copy { + background-color: @surface0 !important; + border-color: @surface2 !important; + color: @subtext0 !important; + } + .complete-ShareText { + .complete-ShareText_Title { + color: @subtext0 !important; + } + textarea { + background-color: @surface0 !important; + border-color: @overlay0 !important; + color: @subtext0 !important; + } + } + /* "Create a new one!" button (image complete) */ + .complete-Btn_Back, + .complete-Btn_Back:hover { + background: @surface1 !important; + border-color: @surface1 !important; + box-shadow: 0 4px 0 @surface0 !important; + color: @text; + } + .st-Related_Tags { + background-color: @mantle !important; + } + .st-Related_ImagemakerList { + background-color: @mantle !important; + } + .sitetop-ImagemakerList_List a .sw_imagemaker_creator { + color: @subtext0 !important; + } + /* "Search by tag" (image complete) */ + .st-Related_Tags .st-Related_Tag a { + background: @surface0 !important; + border-color: @accent-color !important; + color: @text !important; + } + /* "Copied to clipboard" popup (image complete) */ + .toasted.sw-Toast.bubble { + background-color: @accent-color !important; + color: @surface0 !important; + } + /* fix for bookmark icon (bookmarks page) */ + .bookmark-inner h2 .fa { + color: @accent-color !important; + } + /* support.picrew.me page */ + .site-branding { + background-color: @base !important; + color: @text !important; + } + .menu-toggle { + background-color: @surface0 !important; + color: @text !important; + + &:hover { + background-color: @surface2 !important; + color: @text !important; + } + } + .site-title a, + .site-description { + color: @text !important; + } + .bogo-language-name a { + color: @accent-color !important; + } + .main-navigation { + background-color: @mantle !important; + color: @text !important; + + a { + color: @text !important; + } + a:hover, + ul > :hover > a { + color: @accent-color !important; + } + /* "what is picrew?" page (support) */ + li.current_page_item > a::before, + li.current-menu-item > a::before { + border-bottom-color: @accent-color !important; + } + .nav-menu > li > a::after, + .menu > li > a::after { + color: @accent-color !important; + } + } + .picrew_front-page-content-area.content-area + .picrew_front-content + .with-featured-image { + background-color: @mantle !important; + } + .widget_linkblock { + border-color: @accent-color !important; + box-shadow: 0 0 0 0 @accent-color inset !important; + color: @text !important; + + .widget_linkblock_title { + color: @accent-color !important; + } + .widget_linkblock_text { + color: @subtext1 !important; + } + &:hover { + border-color: @accent-color !important; + box-shadow: 0 0 0 4px @accent-color inset !important; + color: @text !important; + } + } + .front-widget-area { + border-bottom-color: @surface2 !important; + } + .footer-widget-area { + background-color: @mantle !important; + border-top-color: @mantle !important; + + .widget ul > li { + border-top-color: @surface2 !important; + + &:last-child { + border-bottom-color: @surface2 !important; + } + } + a { + color: @text !important; + } + .widget-title, + a:hover { + color: @accent-color !important; + } + } + /* aaaaaaaaaaaaaa */ + #search-3 > #searchform > div > input[type="text"] { + background-color: @surface0 !important; + border-color: @surface2 !important; + color: @text !important; + + &:focus { + border-color: @accent-color !important; + } + } + #searchsubmit > button, + input[type="button"], + input[type="reset"], + input[type="submit"], + #infinite-handle span { + background-color: @surface1 !important; + color: @text !important; + } + .site-footer { + background-color: @crust !important; + border-top-color: @surface0 !important; + color: @subtext1 !important; + } + .page .site-content { + background-color: @mantle !important; + } + .content-wrapper.full-width.without-featured-image { + background-color: @mantle !important; + color: @text !important; + } + body.page:not(.home) .entry-title { + color: @text !important; + + &::after { + background: @accent-color !important; + } + } + .entry-content h2 { + background: @surface0 !important; + border-bottom-color: @accent-color !important; + color: @text !important; + } + .content-wrapper.full-width .hentry::after { + background-color: @surface1 !important; + } + /* "learn how to play with picrew" page (support) */ + #toc_container { + background: @surface0 !important; + border-color: @surface2 !important; + + a { + color: @accent-color !important; + } + p.toc_title { + color: @text !important; + } + } + .entry-content { + td, + table { + border-color: @surface2 !important; + } + h3 { + border-bottom-color: @surface2 !important; + border-left-color: @accent-color !important; + color: @text !important; + } + h4 { + color: @subtext1 !important; + } + h4::before, + a { + color: @accent-color !important; + } + } + /* "Create your image maker" page (support) */ + .content-wrapper { + background: @mantle !important; + } + .sidebar-widget-area .widget ul > li { + border-top-color: @overlay2 !important; + + > a { + color: @accent-color !important; + } + } + /* "list of creator functions" page (support) */ + .site-content { + background-color: @mantle !important; + } + .sidebar-widget-area .widget-title { + color: @text !important; + } + .blog { + .entry-title a { + color: @accent-color !important; + } + .entry-body { + color: @subtext1 !important; + } + } + .wp-pagenavi { + span.current { + background: @accent-color !important; + border-color: @accent-color !important; + color: @surface1 !important; + } + a { + background-color: @base !important; + border-color: @accent-color !important; + color: @text !important; + + &:hover { + background-color: @accent-color !important; + color: @surface1 !important; + } + } + } + /* "list of creator functions" archive page...? honestly idfk why this is a thing (support) */ + .archive { + .page-title { + color: @text !important; + } + .entry-title a { + color: @accent-color !important; + } + .entry-body { + color: @text !important; + } + } + } + @media (prefers-color-scheme: light) { + :root { + #catppuccin(@lightFlavor, @accentColor); + } + } + @media (prefers-color-scheme: dark) { + :root { + #catppuccin(@darkFlavor, @accentColor); + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/pinterest/catppuccin.user.css b/styles/pinterest/catppuccin.user.css index c7292beafa..051f7bf700 100644 --- a/styles/pinterest/catppuccin.user.css +++ b/styles/pinterest/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Pinterest Catppuccin +@name Pinterest Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/pinterest @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pinterest -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pinterest/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pinterest/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apinterest @description Soothing pastel theme for Pinterest @author Catppuccin @@ -13,851 +13,4 @@ @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 regexp("^https?:\\/\\/(www|[a-z]{2}).pinterest.(com(.(au|mx))?|co(.(uk|kr))?|at|ca|ch|cl|de|dk|es|fr|ie|it|jp|nz|ph|pt|ru|se)\\/.*") { - @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]; - @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; - } - } - - --color-text-light: if((@lookup = latte), @mantle, @text); - --color-text-dark: if((@lookup = latte), @text, @mantle); - --color-text-default: @text; - --color-text-inverse: @mantle; - --color-text-subtle: @subtext0; - --color-text-error: @accent-color; - --color-text-shopping: @accent-color; - --color-text-link: @accent-color; - - --color-text-icon-light: if((@lookup = latte), @mantle, @subtext1); - --color-text-icon-dark: if((@lookup = latte), @subtext1, @mantle); - --color-text-icon-default: @subtext0; - --color-icon-subtle: @subtext1; - --color-text-icon-inverse: @mantle; - --color-text-icon-subtle: @subtext0; - --color-text-icon-error: @accent-color; - --color-text-icon-brand-primary: @accent-color; - - --color-background-light: if((@lookup = latte), @mantle, @subtext1); - --color-background-dark: if((@lookup = latte), @text, @mantle); - --color-background-default: @base; - --color-background-inverse-base: @subtext1; - --color-background-primary-base: @accent-color; - --color-background-secondary-base: @mantle; - --color-background-secondary-active: @mantle; - --color-background-selected-base: @subtext1; - --color-background-box-default: @mantle; - --color-background-box-selected: @accent-color; - --color-background-box-primary: @accent-color; - --color-background-box-secondary: @surface1; - --color-background-overlay: @surface0; - --color-background-popover-primary: @mantle; - --color-background-popover-secondary: @overlay2; - --color-background-tag-primary-hover: @surface2; - --color-background-box-light: @mantle; - --color-background-button-secondary-default: @surface0; - --color-background-button-secondary-hover: @surface1; - --color-background-button-secondary-active: @surface2; - --color-background-tag-primary-default: @surface1; - --color-background-button-disabled-default: darken(@mantle, 2%); - --color-background-formfield-primary: @surface0; - --color-background-avatar-placeholder: @mantle; - --color-border-container: @surface1; - --color-border-default: @mantle; - --color-border-popover-primary: @surface0; - --color-border-popover-secondary: @text; - --color-border-focus: fade(@blue, 50%); - --color-text-success: @green; - --color-text-warning: @yellow; - --color-icon-success: @green; - --color-icon-warning: @yellow; - --color-icon-error: @red; - --color-icon-info: @blue; - --color-icon-recommendation: @mauve; - --color-icon-brand-primary: @accent-color; - --color-icon-inverse: @crust; - --color-background-brand: @accent-color; - --color-background-box-brand: @accent-color; - --color-background-button-primary-default: @accent-color; - --color-background-button-primary-hover: desaturate( - darken(@accent-color, 12%), - 20% - ); - --color-background-button-primary-active: desaturate( - darken(@accent-color, 30%), - 30% - ); - --color-background-badge-warning: @yellow; - --color-background-badge-success: @green; - --color-background-education: @blue; - --color-background-primary-strong: @accent-color; - --color-background-shopping: @blue; - - --g-colorTransparentWhite: fadeout(@base, 30%); - --g-colorTransparentDarkGray: fadeout(@mantle, 20%); - --g-colorGray0: @mantle; - --g-colorGray0Hovered: darken(@mantle, 2.5%); - --g-colorGray0Active: darken(@mantle, 5%); - --g-colorGray50: @mantle; - --g-colorGray100: @mantle; - --g-colorGray100Hovered: darken(@surface0, 2.5%); - --g-colorGray100Active: darken(@surface0, 5%); - --g-colorGray200: @subtext0; - --g-colorGray300: @subtext1; - --g-colorRed100: @accent-color; - --g-colorRed100Hovered: darken(@accent-color, 7.5%); - --g-colorRed100Active: darken(@accent-color, 10%); - --g-color-focus: fadeout(@accent-color, 50%); - --color-gray-roboflow-400: @surface2; - --color-gray-roboflow-200: @mantle; - - --g-blue: @accent-color; - --color-background-info-base: @blue; - --color-background-error-base: @red; - --color-background-warning-base: @peach; - --color-background-success-base: @green; - - body { - background-color: @base; - color: @text; - } - - /* the void (parts not loaded yet) */ - & { - background: @base !important; - } - - .EmojiPickerReact { - --epr-bg-color: @base; - --epr-text-color: @text; - --epr-picker-border-color: @base; - --epr-category-label-bg-color: @base; - --epr-search-input-bg-color: @mantle; - --epr-skin-tone-picker-menu-color: @mantle; - --epr-category-icon-active-color: @accent-color; - --epr-highlight-color: @accent-color; - --epr-hover-bg-color: @surface0; - --epr-focus-bg-color: @surface0; - } - - .C1J, - .LI1.iyn[focus-within], - .iyn:focus, - ._gestalt .react-datepicker__month-select:focus, - ._gestalt .react-datepicker__year-select:focus { - box-shadow: 0 0 0 4px var(--g-color-focus); - } - - .NUb { - color: var(--color-text-inverse); - } - - // Profile button - // Invite collaborators buttons - div[style="border: 1px solid white;"], - div[data-test-id="gestalt-avatar-svg"] { - outline-color: @base !important; - border-color: @base !important; - - .WhU { - background-color: @surface1; - } - } - - svg circle[fill="white"] ~ path[fill="#e60023"] { - fill: @accent-color !important; - } - - div#mweb-unauth-container, - div#mainContainer { - background-color: @base !important; - } - - // "Accounts and more options" popup - div#HeaderAccountOptionsFlyout { - background-color: @mantle; - border-color: transparent; - // external link icons - .Hn_.Uvi.gUZ { - color: var(--color-text-icon-light); - } - } - - div[role="tooltip"] { - background-color: @surface0; - color: @text; - .B1n { - color: @text; - } - } - - // Pin hover icons (and other icons) - .Uvi.gUZ.U9O.kVc { - color: @text; - } - - /* Header & Search */ - - div[data-test-id="header-Header"] div.P_h span.xnr { - color: @text !important; - } - - // search - div[data-test-id="dynamic-search-placeholder"] > div.Lfz.MIw.zI7.iyn.Hsu { - &.ojN, - &.QLY { - display: none; - } - } - - // make top bar match - div[data-test-id="header-background"] { - background-color: @base; - } - - div[data-test-id="one-bar-pill"] { - div { - color: var(--color-text-dark) !important; - } - - .PLa { - color: var(--color-text-icon-light) !important; - } - - .R19 { - color: var(--color-text-icon-dark) !important; - } - } - - div#searchBoxContainer { - // search bar - div.Jea.fev.zI7.iyn.Hsu { - background-color: @mantle !important; - } - - div[style*="box-shadow: rgba(0, 132, 255, 0.5) 0px 0px 0px 4px"] { - box-shadow: 0 0 0 4px var(--g-color-focus) !important; - } - - input { - color: @subtext1 !important; - } - - div.MMh._Y5.feh.s7I.zI7.iyn.Hsu { - background-color: @subtext1 !important; - } - } - - // make selected search suggestions darker - div[aria-selected="true"][data-test-id="search-suggestion"] { - .C9q.Jea.KS5.Lfz.TMJ.XiG.Zr3.zI7.iyn.Hsu { - background-color: @surface0; - } - } - - /* Home */ - - div.moreIdeasBoardRepCarousel - div[data-carousel-indicator="carousel-card"] - div.Jea.XiG.hA-.ho-.zI7.iyn.Hsu { - background-color: @mantle !important; - } - - div.moreIdeasBoardRepCarousel & ~ div.MIw.QLY.zI7.iyn.Hsu { - background: none !important; - } - - /* Pins */ - - // board name to save to - // preview / dropdown - [data-test-id="PinBetterSaveDropdown"], - div[data-test-id="boardSelectionDropdown"] { - .B1n { - color: var(--color-text-light); - } - .AR6 { - color: var(--color-text-light); - } - // background when opened - .G0a { - background-color: @mantle !important; - } - } - - div[data-test-id="pinrep-source-link"] { - background-color: @base !important; - - a div { - color: @text !important; - } - } - - div[data-test-id="savedInfo"] a { - background-color: transparent !important; - - div { - color: var(--color-text-light) !important; - } - } - - div[data-test-id="PinTypeIdentifier"] { - background-color: @base !important; - color: @text !important; - } - - div[data-test-id="persistent-one-click-save"] { - div[style="background-color: rgba(255, 255, 255, 0.85);"] { - background-color: @mantle !important; - } - - a { - background-color: transparent !important; - } - } - - div[style="padding-bottom: 100%; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px;"] { - box-shadow: 0 0 0 1px @crust !important; - } - - // "Saved to" popup - div[role="status"], - div[data-test-id="toast"] { - // needed for Latte - .X8m { - color: @text !important; - } - // "Removed from your board" text after pressing undo - .B1n { - color: @text !important; - } - // popup color - .b0h { - background-color: @surface0; - } - // undo button - .a_A { - background-color: @surface1; - } - } - - // back of send and ... buttons on pins - .NSs { - background-color: @mantle !important; - } - - // Save button - button[aria-label="Save"] { - // text - .B1n { - color: var(--color-text-inverse); - } - } - - // Button when saved - button[aria-label="Pin Saved"] { - // text - .B1n { - color: @text; - } - // background - .kJo { - background-color: @surface0; - } - // border - .gSJ { - border-color: transparent; - } - } - - // pin editing popout - // text - .X8m.zDA.IZT.tBJ.dyH.iFc.j1A.swG { - color: @text !important; - } - // buttons when hovered - .TzN { - background-color: @surface2 !important; - } - // pin notes - textarea[id="PinNoteField"] { - color: @text; - } - - /* Pin page */ - - // pin body shadow - div[data-test-id="closeup-body-style"] { - box-shadow: 0 1px 20px 0 fade(@text, 15%) !important; - background-color: @mantle; - } - - div[data-test-id="closeup-body-sticky-content"] { - background-color: @mantle; - } - - div[data-test-id="closeup-action-items"] { - background-color: @mantle; - .imm { - background-color: @mantle; - } - } - - // comment bar - div[data-test-id="inline-comment-composer-container"] { - border-color: @mantle !important; - background: @mantle !important; - } - - div.public-DraftEditorPlaceholder-root { - color: @subtext1!important; - } - .LJB.Pw5.XgI.fev.ujU.wsz.zI7.iyn.Hsu { - border-color: @surface0 !important; - } - - div[data-test-id="more-description-container"], - div[data-test-id="less-description-container"] { - background-color: @base !important; - } - - div[data-test-id="truncated-text"] { - div[data-test-id="more-button"] { - background: linear-gradient( - 90deg, - transparent 0%, - @base 15% - ) !important; - } - - div[style="background: rgb(255, 255, 255);"] { - background-color: @base !important; - } - } - - div[data-test-id="media-viewer-button"], - div[data-test-id="flashlight-button"], - div[data-test-id="flashlight"], - div[data-test-id="shop-button"] { - background-color: fadeout(@base, 15%) !important; - } - - div[data-test-id="flashlight-dot-style"] { - background-color: var(--color-text-light); - } - - div[data-test-id="visual-search-cropper"] { - path.v2cropperHandle { - fill: var(--color-text-light) !important; - } - - use.v2cropSection { - stroke: var(--color-text-light) !important; - } - } - - textarea#pinNoteText { - background-color: transparent; - color: @subtext1; - caret-color: @text; - } - - div[data-test-id="react-button"] { - .Jea.KS5.mQ8.zI7.iyn.Hsu { - //background-color: @accent-color; - color: @accent-color; - } - } - - // remove "More to explore" bar - div[data-test-id="related-modules-header"] { - .Jea.KS5.LCN.X6t.hUC.imm.jzS.mQ8.zI7.iyn.Hsu { - background-color: transparent; - } - } - - /* Video and story pins */ - - div[data-test-id="visual-content-container"] video ~ div { - svg { - color: var(--color-text-icon-light) !important; - } - - div[role="progressbar"] > div { - background-color: var(--color-text-icon-light) !important; - } - } - - div[data-test-id="closeup-data-loaded"] div.Jea.Rym.zI7.iyn.Hsu { - svg, - span { - color: var(--color-text-icon-light) !important; - } - } - - /* Profile */ - - div[data-test-id="profile-board-card"] div, - div#profileBoardsFeed div[data-test-id="board-card"] div, - div[style="border: 1px solid white; border-radius: 16px;"] { - border-color: @crust !important; - } - - div.SaveButton__background--enabled { - background-color: @accent-color !important; - color: @mantle !important; - } - - div[data-test-id="savedInfo"] a h3 { - color: var(--color-text-light) !important; - } - - a[aria-label="More ideas"] { - .TzN { - background-color: @surface0; - } - } - - a[aria-label="Organize"] { - .TzN { - background-color: @surface0; - } - } - - // remove profile bar - .imm { - background-color: @base; - } - - // "created" and "saved" button backgrounds on main profile page - .DUt.XiG._co._wN.hjq.zI7.iyn.Hsu { - background-color: @surface0 !important; - } - - // Hide ugly block around section previews - .imm[data-test-id^="section"] { - background-color: transparent; - } - - /* Settings */ - - input[type="checkbox"] ~ div { - border-color: @crust !important; - } - - div.tBJ.dyH.iFc.sAJ.xnr.tg7.IZT.swG { - color: var(--color-text-light) !important; - } - - /* Share */ - - div[data-test-id="lego-share-social-bar-auth"] button, - div[data-test-id="copy-link-share-icon-auth"] div.zI7.iyn.Hsu { - background-color: transparent !important; - } - - div[data-test-id="email-share-button-auth"] svg { - rect { - fill: @mantle !important; - } - - path { - fill: @subtext1 !important; - } - } - - div[data-test-id="sharesheet-contact-item-sent-icon"] svg { - color: @text; - } - - div[data-test-id="sharesheet-contact-item-button"] - div[style="background-color: rgb(239, 239, 239); padding-bottom: 100%;"] { - background-color: @mantle !important; - } - - /* Messages */ - - textarea#messageDraft { - background-color: transparent; - color: @subtext1; - caret-color: @text !important; - } - - div[data-test-id="add-pin-to-conversation"] { - div[style="border: 1px solid rgb(218, 218, 218); box-shadow: rgba(0, 132, 255, 0) 0px 0px 0px 4px; padding: 4px 15px; min-height: 48px; width: 100%;"] { - border-color: @mantle !important; - } - - div[style="border: 1px solid transparent; box-shadow: rgba(0, 132, 255, 0.5) 0px 0px 0px 4px; padding: 4px 15px; min-height: 48px; width: 100%;"] { - box-shadow: 0 0 0 4px var(--g-color-focus) !important; - } - } - - /* Create */ - - div[style*="background-color: rgba(255, 255, 255, 0.8); margin: 24px 0px 0px; z-index:"] { - background-color: fadeout(@base, 20%) !important; - } - - input#scrape-view-website-link { - background-color: @base !important; - } - - div[data-test-id="image-from-search-container"] { - --color-text-icon-inverse: @subtext1; - } - - div[data-test-id="storyboard-draft-placeholder-rep"] div.ho-.zI7.iyn.Hsu { - background-color: @mantle !important; - background-image: linear-gradient( - to right, - @mantle 0%, - @crust 20%, - @mantle 40%, - @mantle 100% - ) !important; - } - - div[data-test-id="drafts-container"] { - --color-text-dark: var(--color-text-default); - - div[style="border-color: rgb(17, 17, 17);"] { - border-color: @crust !important; - } - } - - div[data-test-id="drag-behavior-container"] svg { - color: @subtext1; - } - - div[data-test-id="storyboard-pin-card-item"] { - border-color: @crust !important; - } - - button[data-test-id="board-dropdown-select-button"] { - background-color: @base !important; - - span { - color: @subtext1 !important; - } - } - - div[data-test-id="storyboard-interest-tags"] - div[style="background-color: rgb(17, 17, 17);"] { - background-color: @subtext1 !important; - } - - div[data-test-id="editor-canvas-container"] div { - border-color: @accent-color !important; - } - - input[data-test-id="storyboard-editor-details-text-size"] { - background-color: @mantle !important; - color: @text !important; - border-color: @crust !important; - } - - div[data-test-id="storyboard-editor-details-text-color-picker"] { - input { - color: @text !important; - background-color: transparent !important; - } - - .LJB { - border-color: @crust !important; - } - - div[style="height: 40px; box-shadow: rgb(239, 239, 239) 0px 0px 0px 2px inset;"] { - box-shadow: 0 0 0 2px @crust inset !important; - } - } - - div[role="tablist"] button[aria-selected="true"] { - background-color: @crust !important; - } - - input[type="text"], - input[type="search"] { - color: @text; - } - - /* Login */ - - div[data-test-id="signup-default-modal"], - div[data-test-id="login-modal-default"], - div[data-test-id="login-modal-mfa"] { - background-color: @base !important; - - h1 { - color: @text !important; - } - - p { - color: @subtext0 !important; - } - - button[data-test-id="login-signup-toggle"] { - color: @accent-color !important; - } - - button.red.active { - background-color: @accent-color !important; - color: @crust !important; - } - - button.red.active:hover, - button.red.active:focus { - background-color: darken(@accent-color, 2.5%) !important; - } - - span[data-test-id="terms-of-service"], - div[style="margin-top: 15px; color: rgb(51, 51, 51);"] { - color: @subtext1 !important; - - a { - color: @accent-color !important; - } - } - } - - /* Not logged in */ - - div[style="height: 200px; background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 70%);"] { - background: linear-gradient( - fadeout(@base, 100%) 0%, - @base 70% - ) !important; - } - - div#mweb-unauth-container div.HFo.Jea.KS5._he.zI7.iyn.Hsu, - div[data-test-id="header"] - div[style="background-color: rgba(255, 255, 255, 0.95); height: 100%; width: 100%;"] { - background-color: @base !important; - } - - span[data-test-id="terms-of-service"] a { - color: @accent-color !important; - } - - div[data-test-id="breadcrumbs-list"] div.MIw.Rym.zI7.iyn.Hsu, - div[data-test-id="vase-carousel"] div[data-test-id="left-scroll-arrow"] { - background-image: linear-gradient( - to left, - fadeout(@base, 100%), - @base - ) !important; - } - - div[data-test-id="breadcrumbs-list"] div.MIw.p6V.zI7.iyn.Hsu, - div[data-test-id="vase-carousel"] div[data-test-id="right-scroll-arrow"] { - background-image: linear-gradient( - to right, - fadeout(@base, 100%), - @base - ) !important; - } - - div[data-test-id="standard-save-button"] { - span { - color: @mantle !important; - } - // save button hover - .vfW { - background: darken(@accent-color, 10%) !important; - } - } - - /* Other */ - - div[data-test-id="public-beta-page"] { - --color-text-light: @text; - --color-background-recommendation-weak: @crust; - } - - div[data-layout-shift-boundary-id="PageContainer"] { - --color-text-inverse: var(--color-text-light); - } - - // pin side buttons background - .XiG.hUC.wYR.zI7.iyn.Hsu { - background: @base !important; - } - // pin external link on hover - a[rel="noopener noreferrer nofollow"]:has(svg[aria-label="Link"]) { - div[style^="background-color: rgba(255, 255, 255, 0.9)"] { - background: @surface0 !important; - } - div[style^="background-color: rgb(255, 255, 255)"] { - background: @surface1 !important; - } - } - - // "more" buttom - [aria-label="more"] { - .NSs { - background: @surface0; - } - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/pinterest/catppuccin.user.less b/styles/pinterest/catppuccin.user.less new file mode 100644 index 0000000000..44aa91083a --- /dev/null +++ b/styles/pinterest/catppuccin.user.less @@ -0,0 +1,863 @@ +/* ==UserStyle== +@name Pinterest Catppuccin +@namespace github.com/catppuccin/userstyles/styles/pinterest +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pinterest +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pinterest/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apinterest +@description Soothing pastel theme for Pinterest +@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 regexp( + "^https?:\\/\\/(www|[a-z]{2}).pinterest.(com(.(au|mx))?|co(.(uk|kr))?|at|ca|ch|cl|de|dk|es|fr|ie|it|jp|nz|ph|pt|ru|se)\\/.*" + ) { + @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]; + @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; + } + } + + --color-text-light: if((@lookup = latte), @mantle, @text); + --color-text-dark: if((@lookup = latte), @text, @mantle); + --color-text-default: @text; + --color-text-inverse: @mantle; + --color-text-subtle: @subtext0; + --color-text-error: @accent-color; + --color-text-shopping: @accent-color; + --color-text-link: @accent-color; + + --color-text-icon-light: if((@lookup = latte), @mantle, @subtext1); + --color-text-icon-dark: if((@lookup = latte), @subtext1, @mantle); + --color-text-icon-default: @subtext0; + --color-icon-subtle: @subtext1; + --color-text-icon-inverse: @mantle; + --color-text-icon-subtle: @subtext0; + --color-text-icon-error: @accent-color; + --color-text-icon-brand-primary: @accent-color; + + --color-background-light: if((@lookup = latte), @mantle, @subtext1); + --color-background-dark: if((@lookup = latte), @text, @mantle); + --color-background-default: @base; + --color-background-inverse-base: @subtext1; + --color-background-primary-base: @accent-color; + --color-background-secondary-base: @mantle; + --color-background-secondary-active: @mantle; + --color-background-selected-base: @subtext1; + --color-background-box-default: @mantle; + --color-background-box-selected: @accent-color; + --color-background-box-primary: @accent-color; + --color-background-box-secondary: @surface1; + --color-background-overlay: @surface0; + --color-background-popover-primary: @mantle; + --color-background-popover-secondary: @overlay2; + --color-background-tag-primary-hover: @surface2; + --color-background-box-light: @mantle; + --color-background-button-secondary-default: @surface0; + --color-background-button-secondary-hover: @surface1; + --color-background-button-secondary-active: @surface2; + --color-background-tag-primary-default: @surface1; + --color-background-button-disabled-default: darken(@mantle, 2%); + --color-background-formfield-primary: @surface0; + --color-background-avatar-placeholder: @mantle; + --color-border-container: @surface1; + --color-border-default: @mantle; + --color-border-popover-primary: @surface0; + --color-border-popover-secondary: @text; + --color-border-focus: fade(@blue, 50%); + --color-text-success: @green; + --color-text-warning: @yellow; + --color-icon-success: @green; + --color-icon-warning: @yellow; + --color-icon-error: @red; + --color-icon-info: @blue; + --color-icon-recommendation: @mauve; + --color-icon-brand-primary: @accent-color; + --color-icon-inverse: @crust; + --color-background-brand: @accent-color; + --color-background-box-brand: @accent-color; + --color-background-button-primary-default: @accent-color; + --color-background-button-primary-hover: desaturate( + darken(@accent-color, 12%), + 20% + ); + --color-background-button-primary-active: desaturate( + darken(@accent-color, 30%), + 30% + ); + --color-background-badge-warning: @yellow; + --color-background-badge-success: @green; + --color-background-education: @blue; + --color-background-primary-strong: @accent-color; + --color-background-shopping: @blue; + + --g-colorTransparentWhite: fadeout(@base, 30%); + --g-colorTransparentDarkGray: fadeout(@mantle, 20%); + --g-colorGray0: @mantle; + --g-colorGray0Hovered: darken(@mantle, 2.5%); + --g-colorGray0Active: darken(@mantle, 5%); + --g-colorGray50: @mantle; + --g-colorGray100: @mantle; + --g-colorGray100Hovered: darken(@surface0, 2.5%); + --g-colorGray100Active: darken(@surface0, 5%); + --g-colorGray200: @subtext0; + --g-colorGray300: @subtext1; + --g-colorRed100: @accent-color; + --g-colorRed100Hovered: darken(@accent-color, 7.5%); + --g-colorRed100Active: darken(@accent-color, 10%); + --g-color-focus: fadeout(@accent-color, 50%); + --color-gray-roboflow-400: @surface2; + --color-gray-roboflow-200: @mantle; + + --g-blue: @accent-color; + --color-background-info-base: @blue; + --color-background-error-base: @red; + --color-background-warning-base: @peach; + --color-background-success-base: @green; + + body { + background-color: @base; + color: @text; + } + + /* the void (parts not loaded yet) */ + & { + background: @base !important; + } + + .EmojiPickerReact { + --epr-bg-color: @base; + --epr-text-color: @text; + --epr-picker-border-color: @base; + --epr-category-label-bg-color: @base; + --epr-search-input-bg-color: @mantle; + --epr-skin-tone-picker-menu-color: @mantle; + --epr-category-icon-active-color: @accent-color; + --epr-highlight-color: @accent-color; + --epr-hover-bg-color: @surface0; + --epr-focus-bg-color: @surface0; + } + + .C1J, + .LI1.iyn[focus-within], + .iyn:focus, + ._gestalt .react-datepicker__month-select:focus, + ._gestalt .react-datepicker__year-select:focus { + box-shadow: 0 0 0 4px var(--g-color-focus); + } + + .NUb { + color: var(--color-text-inverse); + } + + // Profile button + // Invite collaborators buttons + div[style="border: 1px solid white;"], + div[data-test-id="gestalt-avatar-svg"] { + outline-color: @base !important; + border-color: @base !important; + + .WhU { + background-color: @surface1; + } + } + + svg circle[fill="white"] ~ path[fill="#e60023"] { + fill: @accent-color !important; + } + + div#mweb-unauth-container, + div#mainContainer { + background-color: @base !important; + } + + // "Accounts and more options" popup + div#HeaderAccountOptionsFlyout { + background-color: @mantle; + border-color: transparent; + // external link icons + .Hn_.Uvi.gUZ { + color: var(--color-text-icon-light); + } + } + + div[role="tooltip"] { + background-color: @surface0; + color: @text; + .B1n { + color: @text; + } + } + + // Pin hover icons (and other icons) + .Uvi.gUZ.U9O.kVc { + color: @text; + } + + /* Header & Search */ + + div[data-test-id="header-Header"] div.P_h span.xnr { + color: @text !important; + } + + // search + div[data-test-id="dynamic-search-placeholder"] > div.Lfz.MIw.zI7.iyn.Hsu { + &.ojN, + &.QLY { + display: none; + } + } + + // make top bar match + div[data-test-id="header-background"] { + background-color: @base; + } + + div[data-test-id="one-bar-pill"] { + div { + color: var(--color-text-dark) !important; + } + + .PLa { + color: var(--color-text-icon-light) !important; + } + + .R19 { + color: var(--color-text-icon-dark) !important; + } + } + + div#searchBoxContainer { + // search bar + div.Jea.fev.zI7.iyn.Hsu { + background-color: @mantle !important; + } + + div[style*="box-shadow: rgba(0, 132, 255, 0.5) 0px 0px 0px 4px"] { + box-shadow: 0 0 0 4px var(--g-color-focus) !important; + } + + input { + color: @subtext1 !important; + } + + div.MMh._Y5.feh.s7I.zI7.iyn.Hsu { + background-color: @subtext1 !important; + } + } + + // make selected search suggestions darker + div[aria-selected="true"][data-test-id="search-suggestion"] { + .C9q.Jea.KS5.Lfz.TMJ.XiG.Zr3.zI7.iyn.Hsu { + background-color: @surface0; + } + } + + /* Home */ + + div.moreIdeasBoardRepCarousel + div[data-carousel-indicator="carousel-card"] + div.Jea.XiG.hA-.ho-.zI7.iyn.Hsu { + background-color: @mantle !important; + } + + div.moreIdeasBoardRepCarousel & ~ div.MIw.QLY.zI7.iyn.Hsu { + background: none !important; + } + + /* Pins */ + + // board name to save to + // preview / dropdown + [data-test-id="PinBetterSaveDropdown"], + div[data-test-id="boardSelectionDropdown"] { + .B1n { + color: var(--color-text-light); + } + .AR6 { + color: var(--color-text-light); + } + // background when opened + .G0a { + background-color: @mantle !important; + } + } + + div[data-test-id="pinrep-source-link"] { + background-color: @base !important; + + a div { + color: @text !important; + } + } + + div[data-test-id="savedInfo"] a { + background-color: transparent !important; + + div { + color: var(--color-text-light) !important; + } + } + + div[data-test-id="PinTypeIdentifier"] { + background-color: @base !important; + color: @text !important; + } + + div[data-test-id="persistent-one-click-save"] { + div[style="background-color: rgba(255, 255, 255, 0.85);"] { + background-color: @mantle !important; + } + + a { + background-color: transparent !important; + } + } + + div[style="padding-bottom: 100%; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px;"] { + box-shadow: 0 0 0 1px @crust !important; + } + + // "Saved to" popup + div[role="status"], + div[data-test-id="toast"] { + // needed for Latte + .X8m { + color: @text !important; + } + // "Removed from your board" text after pressing undo + .B1n { + color: @text !important; + } + // popup color + .b0h { + background-color: @surface0; + } + // undo button + .a_A { + background-color: @surface1; + } + } + + // back of send and ... buttons on pins + .NSs { + background-color: @mantle !important; + } + + // Save button + button[aria-label="Save"] { + // text + .B1n { + color: var(--color-text-inverse); + } + } + + // Button when saved + button[aria-label="Pin Saved"] { + // text + .B1n { + color: @text; + } + // background + .kJo { + background-color: @surface0; + } + // border + .gSJ { + border-color: transparent; + } + } + + // pin editing popout + // text + .X8m.zDA.IZT.tBJ.dyH.iFc.j1A.swG { + color: @text !important; + } + // buttons when hovered + .TzN { + background-color: @surface2 !important; + } + // pin notes + textarea[id="PinNoteField"] { + color: @text; + } + + /* Pin page */ + + // pin body shadow + div[data-test-id="closeup-body-style"] { + box-shadow: 0 1px 20px 0 fade(@text, 15%) !important; + background-color: @mantle; + } + + div[data-test-id="closeup-body-sticky-content"] { + background-color: @mantle; + } + + div[data-test-id="closeup-action-items"] { + background-color: @mantle; + .imm { + background-color: @mantle; + } + } + + // comment bar + div[data-test-id="inline-comment-composer-container"] { + border-color: @mantle !important; + background: @mantle !important; + } + + div.public-DraftEditorPlaceholder-root { + color: @subtext1 !important; + } + .LJB.Pw5.XgI.fev.ujU.wsz.zI7.iyn.Hsu { + border-color: @surface0 !important; + } + + div[data-test-id="more-description-container"], + div[data-test-id="less-description-container"] { + background-color: @base !important; + } + + div[data-test-id="truncated-text"] { + div[data-test-id="more-button"] { + background: linear-gradient( + 90deg, + transparent 0%, + @base 15% + ) !important; + } + + div[style="background: rgb(255, 255, 255);"] { + background-color: @base !important; + } + } + + div[data-test-id="media-viewer-button"], + div[data-test-id="flashlight-button"], + div[data-test-id="flashlight"], + div[data-test-id="shop-button"] { + background-color: fadeout(@base, 15%) !important; + } + + div[data-test-id="flashlight-dot-style"] { + background-color: var(--color-text-light); + } + + div[data-test-id="visual-search-cropper"] { + path.v2cropperHandle { + fill: var(--color-text-light) !important; + } + + use.v2cropSection { + stroke: var(--color-text-light) !important; + } + } + + textarea#pinNoteText { + background-color: transparent; + color: @subtext1; + caret-color: @text; + } + + div[data-test-id="react-button"] { + .Jea.KS5.mQ8.zI7.iyn.Hsu { + //background-color: @accent-color; + color: @accent-color; + } + } + + // remove "More to explore" bar + div[data-test-id="related-modules-header"] { + .Jea.KS5.LCN.X6t.hUC.imm.jzS.mQ8.zI7.iyn.Hsu { + background-color: transparent; + } + } + + /* Video and story pins */ + + div[data-test-id="visual-content-container"] video ~ div { + svg { + color: var(--color-text-icon-light) !important; + } + + div[role="progressbar"] > div { + background-color: var(--color-text-icon-light) !important; + } + } + + div[data-test-id="closeup-data-loaded"] div.Jea.Rym.zI7.iyn.Hsu { + svg, + span { + color: var(--color-text-icon-light) !important; + } + } + + /* Profile */ + + div[data-test-id="profile-board-card"] div, + div#profileBoardsFeed div[data-test-id="board-card"] div, + div[style="border: 1px solid white; border-radius: 16px;"] { + border-color: @crust !important; + } + + div.SaveButton__background--enabled { + background-color: @accent-color !important; + color: @mantle !important; + } + + div[data-test-id="savedInfo"] a h3 { + color: var(--color-text-light) !important; + } + + a[aria-label="More ideas"] { + .TzN { + background-color: @surface0; + } + } + + a[aria-label="Organize"] { + .TzN { + background-color: @surface0; + } + } + + // remove profile bar + .imm { + background-color: @base; + } + + // "created" and "saved" button backgrounds on main profile page + .DUt.XiG._co._wN.hjq.zI7.iyn.Hsu { + background-color: @surface0 !important; + } + + // Hide ugly block around section previews + .imm[data-test-id^="section"] { + background-color: transparent; + } + + /* Settings */ + + input[type="checkbox"] ~ div { + border-color: @crust !important; + } + + div.tBJ.dyH.iFc.sAJ.xnr.tg7.IZT.swG { + color: var(--color-text-light) !important; + } + + /* Share */ + + div[data-test-id="lego-share-social-bar-auth"] button, + div[data-test-id="copy-link-share-icon-auth"] div.zI7.iyn.Hsu { + background-color: transparent !important; + } + + div[data-test-id="email-share-button-auth"] svg { + rect { + fill: @mantle !important; + } + + path { + fill: @subtext1 !important; + } + } + + div[data-test-id="sharesheet-contact-item-sent-icon"] svg { + color: @text; + } + + div[data-test-id="sharesheet-contact-item-button"] + div[style="background-color: rgb(239, 239, 239); padding-bottom: 100%;"] { + background-color: @mantle !important; + } + + /* Messages */ + + textarea#messageDraft { + background-color: transparent; + color: @subtext1; + caret-color: @text !important; + } + + div[data-test-id="add-pin-to-conversation"] { + div[style="border: 1px solid rgb(218, 218, 218); box-shadow: rgba(0, 132, 255, 0) 0px 0px 0px 4px; padding: 4px 15px; min-height: 48px; width: 100%;"] { + border-color: @mantle !important; + } + + div[style="border: 1px solid transparent; box-shadow: rgba(0, 132, 255, 0.5) 0px 0px 0px 4px; padding: 4px 15px; min-height: 48px; width: 100%;"] { + box-shadow: 0 0 0 4px var(--g-color-focus) !important; + } + } + + /* Create */ + + div[style*="background-color: rgba(255, 255, 255, 0.8); margin: 24px 0px 0px; z-index:"] { + background-color: fadeout(@base, 20%) !important; + } + + input#scrape-view-website-link { + background-color: @base !important; + } + + div[data-test-id="image-from-search-container"] { + --color-text-icon-inverse: @subtext1; + } + + div[data-test-id="storyboard-draft-placeholder-rep"] div.ho-.zI7.iyn.Hsu { + background-color: @mantle !important; + background-image: linear-gradient( + to right, + @mantle 0%, + @crust 20%, + @mantle 40%, + @mantle 100% + ) !important; + } + + div[data-test-id="drafts-container"] { + --color-text-dark: var(--color-text-default); + + div[style="border-color: rgb(17, 17, 17);"] { + border-color: @crust !important; + } + } + + div[data-test-id="drag-behavior-container"] svg { + color: @subtext1; + } + + div[data-test-id="storyboard-pin-card-item"] { + border-color: @crust !important; + } + + button[data-test-id="board-dropdown-select-button"] { + background-color: @base !important; + + span { + color: @subtext1 !important; + } + } + + div[data-test-id="storyboard-interest-tags"] + div[style="background-color: rgb(17, 17, 17);"] { + background-color: @subtext1 !important; + } + + div[data-test-id="editor-canvas-container"] div { + border-color: @accent-color !important; + } + + input[data-test-id="storyboard-editor-details-text-size"] { + background-color: @mantle !important; + color: @text !important; + border-color: @crust !important; + } + + div[data-test-id="storyboard-editor-details-text-color-picker"] { + input { + color: @text !important; + background-color: transparent !important; + } + + .LJB { + border-color: @crust !important; + } + + div[style="height: 40px; box-shadow: rgb(239, 239, 239) 0px 0px 0px 2px inset;"] { + box-shadow: 0 0 0 2px @crust inset !important; + } + } + + div[role="tablist"] button[aria-selected="true"] { + background-color: @crust !important; + } + + input[type="text"], + input[type="search"] { + color: @text; + } + + /* Login */ + + div[data-test-id="signup-default-modal"], + div[data-test-id="login-modal-default"], + div[data-test-id="login-modal-mfa"] { + background-color: @base !important; + + h1 { + color: @text !important; + } + + p { + color: @subtext0 !important; + } + + button[data-test-id="login-signup-toggle"] { + color: @accent-color !important; + } + + button.red.active { + background-color: @accent-color !important; + color: @crust !important; + } + + button.red.active:hover, + button.red.active:focus { + background-color: darken(@accent-color, 2.5%) !important; + } + + span[data-test-id="terms-of-service"], + div[style="margin-top: 15px; color: rgb(51, 51, 51);"] { + color: @subtext1 !important; + + a { + color: @accent-color !important; + } + } + } + + /* Not logged in */ + + div[style="height: 200px; background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 70%);"] { + background: linear-gradient( + fadeout(@base, 100%) 0%, + @base 70% + ) !important; + } + + div#mweb-unauth-container div.HFo.Jea.KS5._he.zI7.iyn.Hsu, + div[data-test-id="header"] + div[style="background-color: rgba(255, 255, 255, 0.95); height: 100%; width: 100%;"] { + background-color: @base !important; + } + + span[data-test-id="terms-of-service"] a { + color: @accent-color !important; + } + + div[data-test-id="breadcrumbs-list"] div.MIw.Rym.zI7.iyn.Hsu, + div[data-test-id="vase-carousel"] div[data-test-id="left-scroll-arrow"] { + background-image: linear-gradient( + to left, + fadeout(@base, 100%), + @base + ) !important; + } + + div[data-test-id="breadcrumbs-list"] div.MIw.p6V.zI7.iyn.Hsu, + div[data-test-id="vase-carousel"] div[data-test-id="right-scroll-arrow"] { + background-image: linear-gradient( + to right, + fadeout(@base, 100%), + @base + ) !important; + } + + div[data-test-id="standard-save-button"] { + span { + color: @mantle !important; + } + // save button hover + .vfW { + background: darken(@accent-color, 10%) !important; + } + } + + /* Other */ + + div[data-test-id="public-beta-page"] { + --color-text-light: @text; + --color-background-recommendation-weak: @crust; + } + + div[data-layout-shift-boundary-id="PageContainer"] { + --color-text-inverse: var(--color-text-light); + } + + // pin side buttons background + .XiG.hUC.wYR.zI7.iyn.Hsu { + background: @base !important; + } + // pin external link on hover + a[rel="noopener noreferrer nofollow"]:has(svg[aria-label="Link"]) { + div[style^="background-color: rgba(255, 255, 255, 0.9)"] { + background: @surface0 !important; + } + div[style^="background-color: rgb(255, 255, 255)"] { + background: @surface1 !important; + } + } + + // "more" buttom + [aria-label="more"] { + .NSs { + background: @surface0; + } + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/planet-minecraft/catppuccin.user.css b/styles/planet-minecraft/catppuccin.user.css index 8fd861c826..25edbe403c 100644 --- a/styles/planet-minecraft/catppuccin.user.css +++ b/styles/planet-minecraft/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Planet Minecraft Catppuccin +@name Planet Minecraft Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/planet-minecraft @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/planet-minecraft -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/planet-minecraft/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/planet-minecraft/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aplanet-minecraft @description Soothing pastel theme for Planet Minecraft @author Catppuccin @@ -13,378 +13,4 @@ @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("planetminecraft.com") { - [data-theme="light"] { - #catppuccin(@lightFlavor, @accentColor); - } - - [data-theme="dark"] { - #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-bg: @crust; - --header-bg: @base; - --content-bg: @surface0; - --container-bg: @base; - --menu-bg: @surface0; - --menu-color: @subtext1; - --menu-selected-bg: @surface1; - --menu-selected-color: @accent-color; - --footer-bg: @mantle; - --bg-navbar: @mantle; - --tab-selected: @accent-color; - --input-bg: @surface0; - --dark-mid-bg: @base; - --title-color: @text; - --text-color: @text; - --text-color-medium: @subtext0; - --text-color-light: @subtext1; - --border-color: @base; - --footer-a-color: @accent-color; - --nav-hover: @accent-color; - --stat-color: @red; - --a-color: @accent-color; - --a-hover: @accent-color; - --a-selected: fade(@accent-color, 80%); - --tab-hover: fade(@accent-color, 80%); - --tab-color: @subtext0; - --nav-color: @text; - --widget-wrap-bg: @mantle; - --shine-start: @surface2; - --shine-end: @surface1; - --widget-bg: @surface0; - --light-bg: @surface0; - --medium-bg: @crust; - --toolbar-bg: @surface0; - --shine-highlight: @surface0; - --border-color-light: @surface0; - --site-border-color: @surface0; - --graphic-bg: @surface0; - --notice-bg: @overlay0; - --notice-color: @text; - --menu-disabled-color: @crust; - --control-bg: @accent-color; - --a-visited: @accent-color; - --nav-bar-border: none; - --feed-alt-bg: @surface1; - --nav-selected: @accent-color; - - .tab_options > ul > li.currentpage, - .tab_options > ul > li.ui-state-active, - .tab_options > ul > li:hover { - border-bottom-color: @accent-color; - } - - .site_btn_secondary { - color: @subtext1; - background: @surface1; - &:hover { - color: @accent-color; - background: fade(@surface1, 80%); - } - } - - .site_btn, - .site_btn_alt, - #subscribe_full .site_btn, - .pagination p a.pagination_page, - .pagination p > span.pagination_page, - .vert_menu > ul > li:only-child > a.current_select, - .vert_menu > ul > li > a.current_select { - color: @base; - background: @accent-color; - &:not(:disabled, [data-disabled="disabled"]):hover { - background: fade(@accent-color, 80%); - } - } - - #profile-bar #profile-actions .togglable.selected { - background: @accent-color; - color: @base; - } - - .tipso_bubble .bottom { - background: @surface0 !important; - } - - /* because the icons on the display mode buttons are white, we cant have white base here, so we improvise for latte */ - & when (@lookup = latte) { - #display_modes a { - background: @text !important; - box-shadow: none !important; - } - - /* fix nav menu dropdown icons */ - .navbar_icon .dropdown { - --svozk: var(--s) -256px -326px !important; - background: var(--s) -256px -326px !important; - } - - .content-actions li { - background: @surface0; - - a, - .link, - .js_link, - .js_link_m { - color: @text; - } - } - - .content-actions li .js_link:hover, - .content-actions li .js_link_m:hover, - .content-actions li .link:hover, - .content-actions li a:hover { - .material-icons { - color: @text !important; - } - - color: @text !important; - background: @accent-color !important; - } - - .content-actions li .material-icons { - color: @subtext0 !important; - } - } - - & when not (@lookup = latte) { - #display_modes a { - background: @base !important; - box-shadow: none !important; - } - } - - #display_modes a.selected, - #display_modes a:hover { - background: @accent-color; - } - - .navigation-wrap .navmenu a { - text-shadow: none !important; - } - - #header - #header-wrap - .header_text - > ul - > li - > .material-btn.mem_submit - .material-icons, - #header #header-wrap .header_text > ul > li > a.mem_submit .material-icons, - #mobileRightPanel - .sidr-inner - > ul - > li - > .material-btn.mem_submit - .material-icons, - #mobileRightPanel .sidr-inner > ul > li > a.mem_submit .material-icons { - color: @green !important; - } - - #header - #header-wrap - .header_text - > ul - > li - > .material-btn[data-alert="1"].mem_notifications - .material-icons, - #header - #header-wrap - .header_text - > ul - > li - > .material-btn[data-alert="1"].mem_tickets - .material-icons, - #header - #header-wrap - .header_text - > ul - > li - > a[data-alert="1"].mem_notifications - .material-icons, - #header - #header-wrap - .header_text - > ul - > li - > a[data-alert="1"].mem_tickets - .material-icons, - #mobileRightPanel - .sidr-inner - > ul - > li - > .material-btn[data-alert="1"].mem_notifications - .material-icons, - #mobileRightPanel - .sidr-inner - > ul - > li - > .material-btn[data-alert="1"].mem_tickets - .material-icons, - #mobileRightPanel - .sidr-inner - > ul - > li - > a[data-alert="1"].mem_notifications - .material-icons, - #mobileRightPanel - .sidr-inner - > ul - > li - > a[data-alert="1"].mem_tickets - .material-icons { - color: @yellow; - } - - .material-icons, - .mem_submit > span, - .mem_notifications > span { - color: @text !important; - } - - .green { - background: @green; - color: @base; - - .material-icons { - color: @base; - } - } - - // .content-actions li:not(:only-child, :first-child) { - // border-top: none; - // } - - .tipso_content, - .member_profile_card_right { - background: @surface0; - } - - .tipso_arrow { - border-color: @surface0; - } - - #popular-reel .caption { - & when (@lookup = latte) { - background: fade(@text, 50%) !important; - - .pop-title { - color: @base !important; - text-shadow: none; - } - - .caption-subtitle { - color: @crust !important; - text-shadow: none; - } - } - - & when not (@lookup = latte) { - background: fade(@base, 50%) !important; - - .pop-title { - color: @text !important; - text-shadow: none; - } - - .caption-subtitle { - color: @subtext0 !important; - text-shadow: none; - } - - .content-actions li { - background: @surface0; - - a, - .link, - .js_link, - .js_link_m { - color: @text; - } - } - - .content-actions li .js_link:hover, - .content-actions li .js_link_m:hover, - .content-actions li .link:hover, - .content-actions li a:hover { - .material-icons { - color: @accent-color !important; - } - color: @accent-color !important; - background: @surface1 !important; - } - - .content-actions li .material-icons { - color: @subtext0 !important; - } - } - } - - #content_notice .site_btn, - #content_notice .site_btn_alt { - text-shadow: none; - } - - .custom_input:focus, - input:focus, - select:focus, - textarea:focus { - border-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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/planet-minecraft/catppuccin.user.less b/styles/planet-minecraft/catppuccin.user.less new file mode 100644 index 0000000000..57b969e900 --- /dev/null +++ b/styles/planet-minecraft/catppuccin.user.less @@ -0,0 +1,388 @@ +/* ==UserStyle== +@name Planet Minecraft Catppuccin +@namespace github.com/catppuccin/userstyles/styles/planet-minecraft +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/planet-minecraft +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/planet-minecraft/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aplanet-minecraft +@description Soothing pastel theme for Planet Minecraft +@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("planetminecraft.com") { + [data-theme="light"] { + #catppuccin(@lightFlavor, @accentColor); + } + + [data-theme="dark"] { + #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-bg: @crust; + --header-bg: @base; + --content-bg: @surface0; + --container-bg: @base; + --menu-bg: @surface0; + --menu-color: @subtext1; + --menu-selected-bg: @surface1; + --menu-selected-color: @accent-color; + --footer-bg: @mantle; + --bg-navbar: @mantle; + --tab-selected: @accent-color; + --input-bg: @surface0; + --dark-mid-bg: @base; + --title-color: @text; + --text-color: @text; + --text-color-medium: @subtext0; + --text-color-light: @subtext1; + --border-color: @base; + --footer-a-color: @accent-color; + --nav-hover: @accent-color; + --stat-color: @red; + --a-color: @accent-color; + --a-hover: @accent-color; + --a-selected: fade(@accent-color, 80%); + --tab-hover: fade(@accent-color, 80%); + --tab-color: @subtext0; + --nav-color: @text; + --widget-wrap-bg: @mantle; + --shine-start: @surface2; + --shine-end: @surface1; + --widget-bg: @surface0; + --light-bg: @surface0; + --medium-bg: @crust; + --toolbar-bg: @surface0; + --shine-highlight: @surface0; + --border-color-light: @surface0; + --site-border-color: @surface0; + --graphic-bg: @surface0; + --notice-bg: @overlay0; + --notice-color: @text; + --menu-disabled-color: @crust; + --control-bg: @accent-color; + --a-visited: @accent-color; + --nav-bar-border: none; + --feed-alt-bg: @surface1; + --nav-selected: @accent-color; + + .tab_options > ul > li.currentpage, + .tab_options > ul > li.ui-state-active, + .tab_options > ul > li:hover { + border-bottom-color: @accent-color; + } + + .site_btn_secondary { + color: @subtext1; + background: @surface1; + &:hover { + color: @accent-color; + background: fade(@surface1, 80%); + } + } + + .site_btn, + .site_btn_alt, + #subscribe_full .site_btn, + .pagination p a.pagination_page, + .pagination p > span.pagination_page, + .vert_menu > ul > li:only-child > a.current_select, + .vert_menu > ul > li > a.current_select { + color: @base; + background: @accent-color; + &:not(:disabled, [data-disabled="disabled"]):hover { + background: fade(@accent-color, 80%); + } + } + + #profile-bar #profile-actions .togglable.selected { + background: @accent-color; + color: @base; + } + + .tipso_bubble .bottom { + background: @surface0 !important; + } + + /* because the icons on the display mode buttons are white, we cant have white base here, so we improvise for latte */ + & when (@lookup = latte) { + #display_modes a { + background: @text !important; + box-shadow: none !important; + } + + /* fix nav menu dropdown icons */ + .navbar_icon .dropdown { + --svozk: var(--s) -256px -326px !important; + background: var(--s) -256px -326px !important; + } + + .content-actions li { + background: @surface0; + + a, + .link, + .js_link, + .js_link_m { + color: @text; + } + } + + .content-actions li .js_link:hover, + .content-actions li .js_link_m:hover, + .content-actions li .link:hover, + .content-actions li a:hover { + .material-icons { + color: @text !important; + } + + color: @text !important; + background: @accent-color !important; + } + + .content-actions li .material-icons { + color: @subtext0 !important; + } + } + + & when not(@lookup = latte) { + #display_modes a { + background: @base !important; + box-shadow: none !important; + } + } + + #display_modes a.selected, + #display_modes a:hover { + background: @accent-color; + } + + .navigation-wrap .navmenu a { + text-shadow: none !important; + } + + #header + #header-wrap + .header_text + > ul + > li + > .material-btn.mem_submit + .material-icons, + #header #header-wrap .header_text > ul > li > a.mem_submit .material-icons, + #mobileRightPanel + .sidr-inner + > ul + > li + > .material-btn.mem_submit + .material-icons, + #mobileRightPanel .sidr-inner > ul > li > a.mem_submit .material-icons { + color: @green !important; + } + + #header + #header-wrap + .header_text + > ul + > li + > .material-btn[data-alert="1"].mem_notifications + .material-icons, + #header + #header-wrap + .header_text + > ul + > li + > .material-btn[data-alert="1"].mem_tickets + .material-icons, + #header + #header-wrap + .header_text + > ul + > li + > a[data-alert="1"].mem_notifications + .material-icons, + #header + #header-wrap + .header_text + > ul + > li + > a[data-alert="1"].mem_tickets + .material-icons, + #mobileRightPanel + .sidr-inner + > ul + > li + > .material-btn[data-alert="1"].mem_notifications + .material-icons, + #mobileRightPanel + .sidr-inner + > ul + > li + > .material-btn[data-alert="1"].mem_tickets + .material-icons, + #mobileRightPanel + .sidr-inner + > ul + > li + > a[data-alert="1"].mem_notifications + .material-icons, + #mobileRightPanel + .sidr-inner + > ul + > li + > a[data-alert="1"].mem_tickets + .material-icons { + color: @yellow; + } + + .material-icons, + .mem_submit > span, + .mem_notifications > span { + color: @text !important; + } + + .green { + background: @green; + color: @base; + + .material-icons { + color: @base; + } + } + + // .content-actions li:not(:only-child, :first-child) { + // border-top: none; + // } + + .tipso_content, + .member_profile_card_right { + background: @surface0; + } + + .tipso_arrow { + border-color: @surface0; + } + + #popular-reel .caption { + & when (@lookup = latte) { + background: fade(@text, 50%) !important; + + .pop-title { + color: @base !important; + text-shadow: none; + } + + .caption-subtitle { + color: @crust !important; + text-shadow: none; + } + } + + & when not(@lookup = latte) { + background: fade(@base, 50%) !important; + + .pop-title { + color: @text !important; + text-shadow: none; + } + + .caption-subtitle { + color: @subtext0 !important; + text-shadow: none; + } + + .content-actions li { + background: @surface0; + + a, + .link, + .js_link, + .js_link_m { + color: @text; + } + } + + .content-actions li .js_link:hover, + .content-actions li .js_link_m:hover, + .content-actions li .link:hover, + .content-actions li a:hover { + .material-icons { + color: @accent-color !important; + } + color: @accent-color !important; + background: @surface1 !important; + } + + .content-actions li .material-icons { + color: @subtext0 !important; + } + } + } + + #content_notice .site_btn, + #content_notice .site_btn_alt { + text-shadow: none; + } + + .custom_input:focus, + input:focus, + select:focus, + textarea:focus { + border-color: @accent-color; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/porkbun/catppuccin.user.css b/styles/porkbun/catppuccin.user.css index 8a7eaf834c..031f0f7caf 100644 --- a/styles/porkbun/catppuccin.user.css +++ b/styles/porkbun/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Porkbun Catppuccin +@name Porkbun Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/porkbun @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/porkbun -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/porkbun/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/porkbun/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aporkbun @description Soothing pastel theme for Porkbun @author Catppuccin @@ -13,390 +13,4 @@ @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('porkbun.com') { - @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; - color: @text; - } - - --cloudflare_on: @peach; - --porkbun_danger: @red; - --porkbun_warning: @yellow; - --porkbun_success: @green; - --porkbun_pink_hover: darken(@accent-color, 5%); - --porkbun_pink: @accent-color; - --porkbun_gold: @yellow; - --porkbun_pink_light: lighten(@accent-color, 5%); - --porkbun_pink_medium: @accent-color; - --porkbun_dark_gray: @text; - --porkbun_light_gray: @surface0; - --porkbun_medium_gray: @overlay1; - --porkbun_white: @mantle; - --blue_link: @blue; - --blue_link_hover: @sapphire; - --headerMenuLink_color: @text; - --headerMenuLink-hover_color: @text; - --homepageBlurb_color: @text; - - /* Misc */ - - .text-muted { - color: @subtext0; - } - .text-danger { - color: @red; - } - .text-success { - color: @green; - } - - .badge-porkbun { - background-color: @surface0; - color: @text; - } - - .alert-info { - background-color: fade(@blue, 30%); - color: @blue; - border-color: @blue; - } - - .alert-warning { - background-color: fade(@yellow, 30%); - color: @yellow; - border-color: @yellow; - } - - .alert-danger { - background-color: fade(@red, 30%); - color: @red; - border-color: @red; - } - - hr { - border-top-color: @surface1; - } - - /* Inline overrides */ - - [style*="background-color:white;"], - [style*="background-color: rgb(248, 248, 248);"] { - background-color: @surface0 !important; - } - [style*="color:black;"], - [style*="color: white;"] { - color: @text !important; - } - - &[stylus-iframe="https://porkbun.com"], - #beacon-container-body { - background-color: transparent; - - .hsds-beacon button { - background-color: @accent-color; - - [class*="FabButtoncss__FabBackgroundUI"] > svg { - fill: @accent-color; - } - - > span { - color: @crust; - } - } - } - - /* Buttons */ - - .btn-default, - .sortByPriceButton { - &:not(.searchAddRemoveIcon, .searchAddRemoveIconSideBar) { - background-color: @surface0; - color: @text; - border-color: @surface1; - } - - &:hover { - background-color: @surface1; - color: @text; - } - } - - .btn-primary { - background-color: @accent-color; - border-color: @accent-color; - color: @crust; - - &:hover { - background-color: darken(@accent-color, 5%); - } - } - - .btn-danger { - background-color: @red; - border-color: @red; - color: @crust; - } - - .btn-success { - background-color: @green; - border-color: @green; - color: @crust; - } - - .btn-success-light { - background-color: @green; - color: @crust; - } - - .btn-porkbun-white-borderless, - .btn-porkbun-white:hover, - .btn-porkbun-white:focus { - color: @text; - } - - .btn-porkbun-white.active { - color: @crust; - - .text-muted { - color: @surface0; - } - } - - /* Inputs */ - - .slider { - background-color: @red; - - &::before { - background-color: @crust; - } - } - - .dropdown-menu { - background-color: @surface0; - - > li > a { - color: @text; - - &:hover { - background-color: @surface1; - } - } - - .divider { - background-color: @surface1; - } - } - - .form-control { - background-color: @mantle; - color: @text; - border-color: @surface0; - - &:focus { - box-shadow: 0 0 8px fade(@accent-color, 50%); - } - } - - select:not([multiple]) { - -webkit-appearance: auto; - } - - /* Table dividers */ - - .table { - > tbody, - > tfoot, - > thead { - > tr { - > th, - > td { - border-top-color: @surface1; - } - } - } - - > thead > tr > th { - border-bottom-color: @surface2; - } - - [style*="border-top:2px solid gray;"] { - border-top-color: @surface2 !important; - } - } - - .table-bordered { - border-color: @surface1; - - > tbody, - > tfoot, - > thead { - > tr { - > th, - > td { - border-color: @surface1; - } - } - } - } - - /* Main */ - - .headerContainer, - footer > div { - background-color: @crust !important; - } - - #headerBrandLogo, - #footerLogo { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .reviewWidget { - .googleReviewCount { - color: @subtext1; - } - - .fas[class*="fa-star"] { - color: @yellow; - } - } - - .homepageBulletIconFontAwesome { - color: @subtext0; - } - .homePageSupportOptionCenterRight { - border-color: @surface0; - } - - #domainSearchBulkDropButton { - &:hover, - &:active, - &:target, - &:focus { - background-color: @surface0; - } - } - - #searchResultsContainer { - background-color: transparent; - - .sideBarSearchResults { - border-color: @surface0; - } - } - .searchResultsTldLetterBox { - border-color: @surface1; - } - - .cartBox { - border-color: @surface1; - } - .cartSummaryBoxFreeList > li::before { - color: @subtext0; - } - - .marketplaceRow { - border-top-color: @surface0; - } - - .domainsPricingAllExtensionsHeader { - background-color: transparent; - } - - #homePagePricingContainer { - background-color: transparent; - } - - .hostingBox { - border-color: @surface0; - } - - .well { - background-color: @base; - border-color: @surface0; - } - - .modal-content { - background-color: @base; - - .close { - color: @text; - opacity: 1; - } - } - - .nav-tabs { - border-bottom-color: @surface0; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/porkbun/catppuccin.user.less b/styles/porkbun/catppuccin.user.less new file mode 100644 index 0000000000..8071536ad0 --- /dev/null +++ b/styles/porkbun/catppuccin.user.less @@ -0,0 +1,400 @@ +/* ==UserStyle== +@name Porkbun Catppuccin +@namespace github.com/catppuccin/userstyles/styles/porkbun +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/porkbun +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/porkbun/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aporkbun +@description Soothing pastel theme for Porkbun +@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("porkbun.com") { + @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; + color: @text; + } + + --cloudflare_on: @peach; + --porkbun_danger: @red; + --porkbun_warning: @yellow; + --porkbun_success: @green; + --porkbun_pink_hover: darken(@accent-color, 5%); + --porkbun_pink: @accent-color; + --porkbun_gold: @yellow; + --porkbun_pink_light: lighten(@accent-color, 5%); + --porkbun_pink_medium: @accent-color; + --porkbun_dark_gray: @text; + --porkbun_light_gray: @surface0; + --porkbun_medium_gray: @overlay1; + --porkbun_white: @mantle; + --blue_link: @blue; + --blue_link_hover: @sapphire; + --headerMenuLink_color: @text; + --headerMenuLink-hover_color: @text; + --homepageBlurb_color: @text; + + /* Misc */ + + .text-muted { + color: @subtext0; + } + .text-danger { + color: @red; + } + .text-success { + color: @green; + } + + .badge-porkbun { + background-color: @surface0; + color: @text; + } + + .alert-info { + background-color: fade(@blue, 30%); + color: @blue; + border-color: @blue; + } + + .alert-warning { + background-color: fade(@yellow, 30%); + color: @yellow; + border-color: @yellow; + } + + .alert-danger { + background-color: fade(@red, 30%); + color: @red; + border-color: @red; + } + + hr { + border-top-color: @surface1; + } + + /* Inline overrides */ + + [style*="background-color:white;"], + [style*="background-color: rgb(248, 248, 248);"] { + background-color: @surface0 !important; + } + [style*="color:black;"], + [style*="color: white;"] { + color: @text !important; + } + + &[stylus-iframe="https://porkbun.com"], + #beacon-container-body { + background-color: transparent; + + .hsds-beacon button { + background-color: @accent-color; + + [class*="FabButtoncss__FabBackgroundUI"] > svg { + fill: @accent-color; + } + + > span { + color: @crust; + } + } + } + + /* Buttons */ + + .btn-default, + .sortByPriceButton { + &:not(.searchAddRemoveIcon, .searchAddRemoveIconSideBar) { + background-color: @surface0; + color: @text; + border-color: @surface1; + } + + &:hover { + background-color: @surface1; + color: @text; + } + } + + .btn-primary { + background-color: @accent-color; + border-color: @accent-color; + color: @crust; + + &:hover { + background-color: darken(@accent-color, 5%); + } + } + + .btn-danger { + background-color: @red; + border-color: @red; + color: @crust; + } + + .btn-success { + background-color: @green; + border-color: @green; + color: @crust; + } + + .btn-success-light { + background-color: @green; + color: @crust; + } + + .btn-porkbun-white-borderless, + .btn-porkbun-white:hover, + .btn-porkbun-white:focus { + color: @text; + } + + .btn-porkbun-white.active { + color: @crust; + + .text-muted { + color: @surface0; + } + } + + /* Inputs */ + + .slider { + background-color: @red; + + &::before { + background-color: @crust; + } + } + + .dropdown-menu { + background-color: @surface0; + + > li > a { + color: @text; + + &:hover { + background-color: @surface1; + } + } + + .divider { + background-color: @surface1; + } + } + + .form-control { + background-color: @mantle; + color: @text; + border-color: @surface0; + + &:focus { + box-shadow: 0 0 8px fade(@accent-color, 50%); + } + } + + select:not([multiple]) { + -webkit-appearance: auto; + } + + /* Table dividers */ + + .table { + > tbody, + > tfoot, + > thead { + > tr { + > th, + > td { + border-top-color: @surface1; + } + } + } + + > thead > tr > th { + border-bottom-color: @surface2; + } + + [style*="border-top:2px solid gray;"] { + border-top-color: @surface2 !important; + } + } + + .table-bordered { + border-color: @surface1; + + > tbody, + > tfoot, + > thead { + > tr { + > th, + > td { + border-color: @surface1; + } + } + } + } + + /* Main */ + + .headerContainer, + footer > div { + background-color: @crust !important; + } + + #headerBrandLogo, + #footerLogo { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .reviewWidget { + .googleReviewCount { + color: @subtext1; + } + + .fas[class*="fa-star"] { + color: @yellow; + } + } + + .homepageBulletIconFontAwesome { + color: @subtext0; + } + .homePageSupportOptionCenterRight { + border-color: @surface0; + } + + #domainSearchBulkDropButton { + &:hover, + &:active, + &:target, + &:focus { + background-color: @surface0; + } + } + + #searchResultsContainer { + background-color: transparent; + + .sideBarSearchResults { + border-color: @surface0; + } + } + .searchResultsTldLetterBox { + border-color: @surface1; + } + + .cartBox { + border-color: @surface1; + } + .cartSummaryBoxFreeList > li::before { + color: @subtext0; + } + + .marketplaceRow { + border-top-color: @surface0; + } + + .domainsPricingAllExtensionsHeader { + background-color: transparent; + } + + #homePagePricingContainer { + background-color: transparent; + } + + .hostingBox { + border-color: @surface0; + } + + .well { + background-color: @base; + border-color: @surface0; + } + + .modal-content { + background-color: @base; + + .close { + color: @text; + opacity: 1; + } + } + + .nav-tabs { + border-bottom-color: @surface0; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/pronouns.cc/catppuccin.user.css b/styles/pronouns.cc/catppuccin.user.css index 19767fbe80..3983d47850 100644 --- a/styles/pronouns.cc/catppuccin.user.css +++ b/styles/pronouns.cc/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name pronouns.cc Catppuccin +@name pronouns.cc Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/pronouns.cc @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pronouns.cc -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pronouns.cc/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pronouns.cc/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apronouns.cc @description Soothing pastel theme for pronouns.cc @author Catppuccin @@ -13,250 +13,4 @@ @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('pronouns.cc') { - :root[data-bs-theme="dark"] { - #catppuccin(@darkFlavor, @accentColor); - .bg-dark { - --bs-bg-opacity: 1; - background-color: rgba( - var(--bs-lightt-rgb), - var(--bs-bg-opacity) - ) !important; - } - } - :root[data-bs-theme="light"] { - #catppuccin(@lightFlavor, @accentColor); - .bg-light { - --bs-bg-opacity: 1; - background-color: rgba( - var(--bs-darkk-rgb), - var(--bs-bg-opacity) - ) !important; - } - } - - #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; - } - } - .form-floating input::placeholder { - color: transparent !important; - } - .form-control:focus { - border-color: @accent-color; - box-shadow: 0 0 0 0.25rem fade(@accent-color, 25%); - } - --bs-border-color: @surface1; - --bs-border-color-translucent: @surface0; - .modal { - --bs-modal-bg: @crust; - --bs-modal-border-color: var(--bs-border-color-translucent); - --bs-modal-header-border-color: var(--bs-border-color); - --bs-modal-footer-border-color: var(--bs-border-color); - } - .dropdown-menu { - --bs-dropdown-link-active-color: @crust; - --bs-dropdown-link-active-bg: @accent-color; - } - .toast { - --bs-toast-color: @text; - background-color: darken(@surface0, 5%); - } - .toast-header { - color: @text; - background-color: @surface0; - } - .toast-body { - color: @text; - } - --bs-badge-color: @text; - --bs-body-color: @text; - --bs-body-color-rgb: #rgbify(@text) []; - --bs-body-bg: @crust; - --bs-darkk-rgb: #rgbify(@base); - --bs-lightt-rgb: #rgbify(@base); - --bs-emphasis-color: @accent-color; - --bs-emphasis-color-rgb: #rgbify(@accent-color) []; - --bs-secondary-color: @subtext0; - --bs-secondary-color-rgb: @subtext0; - --bs-secondary-bg: @base; - --bs-secondary-bg-rgb: #rgbify(@base) []; - --bs-tertiary-color: @subtext1; - --bs-tertiary-color-rgb: @subtext1; - --bs-tertiary-bg: @surface0; - --bs-tertiary-bg-rgb: #rgbify(@surface0) []; - --bs-primary-text-emphasis: @accent-color; - --bs-secondary-text-emphasis: @subtext1; - --bs-success-text-emphasis: @green; - --bs-info-text-emphasis: @teal; - --bs-warning-text-emphasis: @yellow; - --bs-danger-text-emphasis: @red; - --bs-light-text-emphasis: @subtext0; - --bs-primary-bg-subtle: @mantle; - --bs-secondary-bg-subtle: @base; - --bs-primary-border-subtle: @blue; - --bs-secondary-border-subtle: @overlay0; - --bs-success-border-subtle: @green; - --bs-info-border-subtle: @teal; - --bs-warning-border-subtle: @yellow; - --bs-danger-border-subtle: @red; - --bs-light-border-subtle: @overlay1; - --bs-dark-border-subtle: @surface1; - --bs-heading-color: inherit; - --bs-link-color: @accent-color; - --bs-link-color-rgb: #rgbify(@accent-color) []; - --bs-link-hover-color: @accent-color; - --bs-link-hover-color-rgb: #rgbify(@accent-color) []; - - --bs-code-color: @pink; - --bs-highlight-color: @rosewater; - .list-group { - --bs-list-group-color: var(--bs-body-color); - --bs-list-group-bg: var(--bs-body-bg); - --bs-list-group-action-color: var(--bs-secondary-color); - --bs-list-group-action-hover-color: var(--bs-emphasis-color); - --bs-list-group-action-hover-bg: var(--bs-tertiary-bg); - --bs-list-group-action-active-color: var(--bs-body-color); - --bs-list-group-action-active-bg: var(--bs-secondary-bg); - --bs-list-group-disabled-color: var(--bs-secondary-color); - --bs-list-group-disabled-bg: var(--bs-body-bg); - --bs-list-group-active-color: @base; - --bs-list-group-active-bg: @accent-color; - --bs-list-group-active-border-color: @accent-color; - border-radius: var(--bs-list-group-border-radius); - } - // navbar - .navbar { - --bs-navbar-color: @subtext0; - --bs-navbar-hover-color: @subtext0; - --bs-navbar-disabled-color: @subtext1; - --bs-navbar-active-color: @text !important; - --bs-navbar-brand-color: @text !important; - --bs-navbar-brand-hover-color: @text !important; - --bs-navbar-toggler-border-color: @surface0; - } - #colorizedButton(@color, @bg, @border: @bg, @hv-color: @color, @hv-bg: darken(@bg, 5%), @hv-border: @hv-bg) { - --bs-btn-color: @color; - --bs-btn-bg: @bg; - --bs-btn-border-color: @border; - - --bs-btn-hover-color: @hv-color; - --bs-btn-hover-bg: @hv-bg; - --bs-btn-hover-border-color: @hv-border; - - --bs-btn-active-color: @hv-color; - --bs-btn-active-bg: @hv-bg; - --bs-btn-active-border-color: @hv-border; - - --bs-btn-focus-shadow-rgb: #rgbify(@bg) []; - --bs-btn-disabled-color: @color; - --bs-btn-disabled-bg: @bg; - --bs-btn-disabled-border-color: @border; - } - #coloredButton(@color) { - #colorizedButton(@crust, @color, @color, @hv-color: @crust, lighten(@color, 10%)); - } - //buttons - .btn-primary { - #colorizedButton(@base, @accent-color, @hv-bg: lighten(@accent-color, 10%)); - } - .btn-secondary { - #colorizedButton(@text, @surface0, @hv-bg: @surface1); - } - .btn-outline-secondary { - #colorizedButton(@surface1, transparent, @surface1, @subtext0, @surface1); - } - .btn-success { - #coloredButton(@green); - } - .btn-info { - #coloredButton(@teal); - } - .btn-warning { - #coloredButton(@yellow); - } - .btn-danger { - #coloredButton(@red); - } - .form-control { - &::-webkit-file-upload-button, - &::file-selector-button { - background-color: @base; - } - &:hover:not(:disabled, [readonly]) { - &::-webkit-file-upload-button, - &::file-selector-button { - background-color: @surface0; - } - } - } - .btn-close-white, - .btn-close { - --bs-btn-close-color: @surface0; - @svg: escape( - '' - ); - --bs-btn-close-bg: url("data:image/svg+xml,@{svg}"); - --bs-btn-close-opacity: 1; - } - .navbar-toggler-icon { - @svg: escape( - '' - ); - --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,@{svg}"); - } - } -} - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/pronouns.cc/catppuccin.user.less b/styles/pronouns.cc/catppuccin.user.less new file mode 100644 index 0000000000..4684162d2d --- /dev/null +++ b/styles/pronouns.cc/catppuccin.user.less @@ -0,0 +1,277 @@ +/* ==UserStyle== +@name pronouns.cc Catppuccin +@namespace github.com/catppuccin/userstyles/styles/pronouns.cc +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pronouns.cc +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pronouns.cc/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apronouns.cc +@description Soothing pastel theme for pronouns.cc +@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("pronouns.cc") { + :root[data-bs-theme="dark"] { + #catppuccin(@darkFlavor, @accentColor); + .bg-dark { + --bs-bg-opacity: 1; + background-color: rgba( + var(--bs-lightt-rgb), + var(--bs-bg-opacity) + ) !important; + } + } + :root[data-bs-theme="light"] { + #catppuccin(@lightFlavor, @accentColor); + .bg-light { + --bs-bg-opacity: 1; + background-color: rgba( + var(--bs-darkk-rgb), + var(--bs-bg-opacity) + ) !important; + } + } + + #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; + } + } + .form-floating input::placeholder { + color: transparent !important; + } + .form-control:focus { + border-color: @accent-color; + box-shadow: 0 0 0 0.25rem fade(@accent-color, 25%); + } + --bs-border-color: @surface1; + --bs-border-color-translucent: @surface0; + .modal { + --bs-modal-bg: @crust; + --bs-modal-border-color: var(--bs-border-color-translucent); + --bs-modal-header-border-color: var(--bs-border-color); + --bs-modal-footer-border-color: var(--bs-border-color); + } + .dropdown-menu { + --bs-dropdown-link-active-color: @crust; + --bs-dropdown-link-active-bg: @accent-color; + } + .toast { + --bs-toast-color: @text; + background-color: darken(@surface0, 5%); + } + .toast-header { + color: @text; + background-color: @surface0; + } + .toast-body { + color: @text; + } + --bs-badge-color: @text; + --bs-body-color: @text; + --bs-body-color-rgb: #rgbify(@text)[]; + --bs-body-bg: @crust; + --bs-darkk-rgb: #rgbify(@base); + --bs-lightt-rgb: #rgbify(@base); + --bs-emphasis-color: @accent-color; + --bs-emphasis-color-rgb: #rgbify(@accent-color)[]; + --bs-secondary-color: @subtext0; + --bs-secondary-color-rgb: @subtext0; + --bs-secondary-bg: @base; + --bs-secondary-bg-rgb: #rgbify(@base)[]; + --bs-tertiary-color: @subtext1; + --bs-tertiary-color-rgb: @subtext1; + --bs-tertiary-bg: @surface0; + --bs-tertiary-bg-rgb: #rgbify(@surface0)[]; + --bs-primary-text-emphasis: @accent-color; + --bs-secondary-text-emphasis: @subtext1; + --bs-success-text-emphasis: @green; + --bs-info-text-emphasis: @teal; + --bs-warning-text-emphasis: @yellow; + --bs-danger-text-emphasis: @red; + --bs-light-text-emphasis: @subtext0; + --bs-primary-bg-subtle: @mantle; + --bs-secondary-bg-subtle: @base; + --bs-primary-border-subtle: @blue; + --bs-secondary-border-subtle: @overlay0; + --bs-success-border-subtle: @green; + --bs-info-border-subtle: @teal; + --bs-warning-border-subtle: @yellow; + --bs-danger-border-subtle: @red; + --bs-light-border-subtle: @overlay1; + --bs-dark-border-subtle: @surface1; + --bs-heading-color: inherit; + --bs-link-color: @accent-color; + --bs-link-color-rgb: #rgbify(@accent-color)[]; + --bs-link-hover-color: @accent-color; + --bs-link-hover-color-rgb: #rgbify(@accent-color)[]; + + --bs-code-color: @pink; + --bs-highlight-color: @rosewater; + .list-group { + --bs-list-group-color: var(--bs-body-color); + --bs-list-group-bg: var(--bs-body-bg); + --bs-list-group-action-color: var(--bs-secondary-color); + --bs-list-group-action-hover-color: var(--bs-emphasis-color); + --bs-list-group-action-hover-bg: var(--bs-tertiary-bg); + --bs-list-group-action-active-color: var(--bs-body-color); + --bs-list-group-action-active-bg: var(--bs-secondary-bg); + --bs-list-group-disabled-color: var(--bs-secondary-color); + --bs-list-group-disabled-bg: var(--bs-body-bg); + --bs-list-group-active-color: @base; + --bs-list-group-active-bg: @accent-color; + --bs-list-group-active-border-color: @accent-color; + border-radius: var(--bs-list-group-border-radius); + } + // navbar + .navbar { + --bs-navbar-color: @subtext0; + --bs-navbar-hover-color: @subtext0; + --bs-navbar-disabled-color: @subtext1; + --bs-navbar-active-color: @text !important; + --bs-navbar-brand-color: @text !important; + --bs-navbar-brand-hover-color: @text !important; + --bs-navbar-toggler-border-color: @surface0; + } + #colorizedButton( + @color, + @bg, + @border: @bg, + @hv-color: @color, + @hv-bg: darken(@bg, 5%), + @hv-border: @hv-bg, + ) { + --bs-btn-color: @color; + --bs-btn-bg: @bg; + --bs-btn-border-color: @border; + + --bs-btn-hover-color: @hv-color; + --bs-btn-hover-bg: @hv-bg; + --bs-btn-hover-border-color: @hv-border; + + --bs-btn-active-color: @hv-color; + --bs-btn-active-bg: @hv-bg; + --bs-btn-active-border-color: @hv-border; + + --bs-btn-focus-shadow-rgb: #rgbify(@bg)[]; + --bs-btn-disabled-color: @color; + --bs-btn-disabled-bg: @bg; + --bs-btn-disabled-border-color: @border; + } + #coloredButton(@color) { + #colorizedButton( + @crust, + @color, + @color, + @hv-color: @crust, + lighten(@color, 10%), + ); + } + //buttons + .btn-primary { + #colorizedButton( + @base, + @accent-color, + @hv-bg: lighten(@accent-color, 10%), + ); + } + .btn-secondary { + #colorizedButton(@text, @surface0, @hv-bg: @surface1); + } + .btn-outline-secondary { + #colorizedButton(@surface1, transparent, @surface1, @subtext0, @surface1); + } + .btn-success { + #coloredButton(@green); + } + .btn-info { + #coloredButton(@teal); + } + .btn-warning { + #coloredButton(@yellow); + } + .btn-danger { + #coloredButton(@red); + } + .form-control { + &::-webkit-file-upload-button, + &::file-selector-button { + background-color: @base; + } + &:hover:not(:disabled, [readonly]) { + &::-webkit-file-upload-button, + &::file-selector-button { + background-color: @surface0; + } + } + } + .btn-close-white, + .btn-close { + --bs-btn-close-color: @surface0; + @svg: escape( + '' + ); + --bs-btn-close-bg: url("data:image/svg+xml,@{svg}"); + --bs-btn-close-opacity: 1; + } + .navbar-toggler-icon { + @svg: escape( + '' + ); + --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,@{svg}"); + } + } +} + +#rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/pronouns.page/catppuccin.user.css b/styles/pronouns.page/catppuccin.user.css index 2b6dba4ab5..26c71d3129 100644 --- a/styles/pronouns.page/catppuccin.user.css +++ b/styles/pronouns.page/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Pronouns.page Catppuccin +@name Pronouns.page Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/pronouns.page @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pronouns.page -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pronouns.page/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pronouns.page/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apronouns.page @description Soothing pastel theme for Pronouns.page @author Catppuccin @@ -13,472 +13,4 @@ @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('pronouns.page') { - body:not([data-theme="dark"]) { - #catppuccin(@lightFlavor, @accentColor); - } - - body[data-theme="dark"], - body[data-theme="dark"]:not(.reduced-colours) { - #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; - } - } - - background-color: @base !important; - color: @text !important; - - --bs-body-color: @text; - --bs-body-bg: @base; - --bs-white-rgb: #rgbify(@crust) []; - --bs-primary-rgb: #rgbify(@accent-color) []; - --bs-secondary-rgb: #rgbify(@overlay0) []; - --bs-secondary-color: @subtext0; - --bs-tertiary-bg: @crust; - --bs-success-text-emphasis: @green; - --bs-info-text-emphasis: @sapphire; - --bs-warning-text-emphasis: @yellow; - --bs-danger-text-emphasis: @red; - --bs-light-text-emphasis: @text; - --bs-dark-text-emphasis: @subtext1; - --bs-heading-color: @text; - --bs-form-valid-color: @green; - --bs-form-valid-border-color: @green; - --bs-form-invalid-color: @red; - --bs-form-invalid-border-color: @red; - - /* Buttons */ - - .btn-primary { - color: @crust; - --bs-btn-bg: @accent-color; - } - - .btn-primary, - .btn-outline-primary { - --bs-btn-hover-bg: @accent-color; - --bs-btn-border-color: @accent-color; - --bs-btn-hover-border-color: @accent-color; - --bs-btn-active-bg: @accent-color; - --bs-btn-active-border-color: @accent-color; - --bs-btn-disabled-color: @accent-color; - --bs-btn-disabled-bg: darken(@accent-color, 5%); - --bs-btn-disabled-border-color: @accent-color; - } - - .btn-outline-primary { - color: @text; - - &:hover { - color: @crust; - } - } - - .btn-success { - --bs-btn-color: @crust; - --bs-btn-bg: @green; - --bs-btn-border-color: @green; - --bs-btn-hover-color: @crust; - --bs-btn-hover-bg: darken(@green, 5%); - --bs-btn-hover-border-color: darken(@green, 5%); - --bs-btn-active-color: @crust; - --bs-btn-active-bg: darken(@green, 5%); - --bs-btn-active-border-color: darken(@green, 5%); - --bs-btn-disabled-color: @text; - --bs-btn-disabled-bg: @green; - --bs-btn-disabled-border-color: @green; - } - - .btn-outline-success { - color: @green; - - &:hover { - color: @crust; - } - - --bs-btn-color: @green; - --bs-btn-border-color: @green; - --bs-btn-hover-color: @crust; - --bs-btn-hover-bg: @green; - --bs-btn-hover-border-color: @green; - --bs-btn-active-color: @crust; - --bs-btn-active-bg: @green; - --bs-btn-active-border-color: @green; - --bs-btn-disabled-color: @green; - --bs-btn-disabled-border-color: @green; - } - - .btn-outline-danger { - --bs-btn-color: @red; - --bs-btn-border-color: @red; - --bs-btn-hover-color: @crust; - --bs-btn-hover-bg: @red; - --bs-btn-hover-border-color: @red; - --bs-btn-active-color: @crust; - --bs-btn-active-bg: @red; - --bs-btn-active-border-color: @red; - --bs-btn-disabled-color: @red; - --bs-btn-disabled-border-color: @red; - } - - .btn-secondary { - --bs-btn-color: @text; - --bs-btn-bg: @overlay0; - --bs-btn-border-color: @overlay0; - --bs-btn-hover-color: @text; - --bs-btn-hover-bg: @surface2; - --bs-btn-hover-border-color: @surface2; - --bs-btn-active-color: @text; - --bs-btn-active-bg: @surface2; - --bs-btn-active-border-color: @surface2; - --bs-btn-disabled-color: @text; - --bs-btn-disabled-bg: @overlay0; - --bs-btn-disabled-border-color: @overlay0; - } - - .btn-outline-secondary { - --bs-btn-color: @overlay0; - --bs-btn-border-color: @overlay0; - --bs-btn-hover-color: @text; - --bs-btn-hover-bg: @overlay0; - --bs-btn-hover-border-color: @overlay0; - --bs-btn-active-color: @text; - --bs-btn-active-bg: @overlay0; - --bs-btn-active-border-color: @overlay0; - --bs-btn-disabled-color: @overlay0; - --bs-btn-disabled-border-color: @overlay0; - } - - .btn-light { - &, - &:disabled, - &.disabled { - color: @text; - background-color: @crust; - } - } - .btn-dark, - .btn-outline-dark:hover { - color: @crust; - background-color: @text; - } - .btn-outline-dark { - color: @text; - } - - .btn-square { - background-color: @accent-color !important; - } - - /* Inputs */ - - .form-check-input:checked { - background-color: @accent-color !important; - border-color: @accent-color !important; - } - - .form-control { - color: @text; - background-color: @mantle; - border-color: @surface0; - - &:focus { - box-shadow: 0 0 0 0.25rem fade(@accent-color, 50%); - } - } - - .dropdown-menu { - color: @text; - background-color: @mantle; - border-color: @surface0; - - .dropdown-item { - color: @text; - - &:hover, - &:focus { - background-color: @crust; - } - } - } - - .vdp-datepicker__calendar { - background-color: @crust; - border-color: @surface0; - - .disabled { - color: @subtext0; - } - - .prev::after { - border-right-color: @text; - } - .next::after { - border-left-color: @text; - } - - header span:not(.disabled):hover { - background-color: @text; - color: @crust; - - &.prev::after { - border-right-color: @crust; - } - &.next::after { - border-left-color: @crust; - } - } - - .cell.selected { - background-color: @accent-color; - color: @crust; - } - .cell:not(.blank, .disabled):hover { - border-color: @accent-color; - } - } - - /* Header */ - - header .nav-item { - color: @text !important; - - &:hover { - color: @accent-color !important; - } - } - - .nav-custom:not(.nav-custom-start) .nav-item { - border-color: @surface0; - - &:hover { - border-bottom-color: @accent-color !important; - } - - &.btn.active, - &.btn:hover { - border-bottom-color: @accent-color !important; - } - } - - .nav-custom-start .btn, - .nav-custom .btn { - border-inline-start-color: @surface2 !important; - - &:hover, - &.active { - color: lighten(@accent-color, 5%) !important; - border-inline-start-color: @accent-color !important; - } - } - - .hamburger-menu .btn-hamburger { - background-color: @crust !important; - border-color: @surface0; - } - - .card { - background-color: @mantle; - } - - /* Footer */ - - .separator { - > .mask::after { - box-shadow: 0 0 10px @text; - } - - > span { - box-shadow: 0 2px 4px @text; - background: @text; - color: @crust; - } - } - - /* Calendar */ - - .list-group-flare > :first-child { - border-top-color: @accent-color !important; - } - .list-group-item { - color: @text !important; - background-color: @mantle !important; - border-color: @surface0 !important; - } - .calendar > .day.day-event { - border-color: @accent-color; - - &:hover { - background-color: darken(@accent-color, 10%) !important; - - .day-number { - color: @crust; - text-shadow: none; - } - } - - &.day-event-1 { - background-color: @accent-color; - color: @crust; - } - } - - /* Dictionary */ - .page-link { - color: @text; - background-color: @crust; - border-color: @surface0; - } - .page-item.active .page-link { - color: @crust; - background-color: @accent-color; - border-color: @accent-color; - } - .page-item.disabled .page-link { - color: @text; - background-color: @base; - border-color: @surface0; - } - table { - --bs-table-color: @text !important; - --bs-table-striped-color: @text !important; - --bs-table-hover-color: @text !important; - --bs-table-hover-bg: @surface1 !important; - --bs-table-striped-bg: @surface0 !important; - } - - /* Other */ - - .bg-light { - background-color: @mantle !important; - } - .bg-dark { - background-color: @text !important; - } - .bg-white { - background-color: @crust !important; - } - .text-dark { - color: @text !important; - } - .colour-default { - color: @text !important; - } - .colour-pink { - color: @accent-color !important; - } - .colour-orange { - color: @peach !important; - } - .colour-red { - color: @red !important; - } - .colour-grey { - color: @overlay2 !important; - } - - .alert-light { - background-color: @surface2; - color: @text; - } - .alert-info { - background-color: fade(@sapphire, 30%); - border-color: @sapphire; - color: @text; - } - - .nav-pills { - --bs-nav-pills-link-active-bg: @accent-color; - --bs-nav-pills-link-active-color: @crust; - } - - .badge { - --bs-badge-color: @text; - } - - .border { - border-color: @surface0 !important; - } - - a { - color: @accent-color; - - &:hover { - color: lighten(@accent-color, 5%); - } - } - - code { - color: @crust; - background-color: @accent-color; - border-color: transparent; - } - - /* Share QR code */ - [fill="#ff95bb"] { - fill: @accent-color; - } - - mark, - .mark { - background-color: fade(@yellow, 50%); - color: @text; - } - } -} - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/pronouns.page/catppuccin.user.less b/styles/pronouns.page/catppuccin.user.less new file mode 100644 index 0000000000..edbe4e19d2 --- /dev/null +++ b/styles/pronouns.page/catppuccin.user.less @@ -0,0 +1,482 @@ +/* ==UserStyle== +@name Pronouns.page Catppuccin +@namespace github.com/catppuccin/userstyles/styles/pronouns.page +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pronouns.page +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pronouns.page/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apronouns.page +@description Soothing pastel theme for Pronouns.page +@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("pronouns.page") { + body:not([data-theme="dark"]) { + #catppuccin(@lightFlavor, @accentColor); + } + + body[data-theme="dark"], + body[data-theme="dark"]:not(.reduced-colours) { + #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; + } + } + + background-color: @base !important; + color: @text !important; + + --bs-body-color: @text; + --bs-body-bg: @base; + --bs-white-rgb: #rgbify(@crust)[]; + --bs-primary-rgb: #rgbify(@accent-color)[]; + --bs-secondary-rgb: #rgbify(@overlay0)[]; + --bs-secondary-color: @subtext0; + --bs-tertiary-bg: @crust; + --bs-success-text-emphasis: @green; + --bs-info-text-emphasis: @sapphire; + --bs-warning-text-emphasis: @yellow; + --bs-danger-text-emphasis: @red; + --bs-light-text-emphasis: @text; + --bs-dark-text-emphasis: @subtext1; + --bs-heading-color: @text; + --bs-form-valid-color: @green; + --bs-form-valid-border-color: @green; + --bs-form-invalid-color: @red; + --bs-form-invalid-border-color: @red; + + /* Buttons */ + + .btn-primary { + color: @crust; + --bs-btn-bg: @accent-color; + } + + .btn-primary, + .btn-outline-primary { + --bs-btn-hover-bg: @accent-color; + --bs-btn-border-color: @accent-color; + --bs-btn-hover-border-color: @accent-color; + --bs-btn-active-bg: @accent-color; + --bs-btn-active-border-color: @accent-color; + --bs-btn-disabled-color: @accent-color; + --bs-btn-disabled-bg: darken(@accent-color, 5%); + --bs-btn-disabled-border-color: @accent-color; + } + + .btn-outline-primary { + color: @text; + + &:hover { + color: @crust; + } + } + + .btn-success { + --bs-btn-color: @crust; + --bs-btn-bg: @green; + --bs-btn-border-color: @green; + --bs-btn-hover-color: @crust; + --bs-btn-hover-bg: darken(@green, 5%); + --bs-btn-hover-border-color: darken(@green, 5%); + --bs-btn-active-color: @crust; + --bs-btn-active-bg: darken(@green, 5%); + --bs-btn-active-border-color: darken(@green, 5%); + --bs-btn-disabled-color: @text; + --bs-btn-disabled-bg: @green; + --bs-btn-disabled-border-color: @green; + } + + .btn-outline-success { + color: @green; + + &:hover { + color: @crust; + } + + --bs-btn-color: @green; + --bs-btn-border-color: @green; + --bs-btn-hover-color: @crust; + --bs-btn-hover-bg: @green; + --bs-btn-hover-border-color: @green; + --bs-btn-active-color: @crust; + --bs-btn-active-bg: @green; + --bs-btn-active-border-color: @green; + --bs-btn-disabled-color: @green; + --bs-btn-disabled-border-color: @green; + } + + .btn-outline-danger { + --bs-btn-color: @red; + --bs-btn-border-color: @red; + --bs-btn-hover-color: @crust; + --bs-btn-hover-bg: @red; + --bs-btn-hover-border-color: @red; + --bs-btn-active-color: @crust; + --bs-btn-active-bg: @red; + --bs-btn-active-border-color: @red; + --bs-btn-disabled-color: @red; + --bs-btn-disabled-border-color: @red; + } + + .btn-secondary { + --bs-btn-color: @text; + --bs-btn-bg: @overlay0; + --bs-btn-border-color: @overlay0; + --bs-btn-hover-color: @text; + --bs-btn-hover-bg: @surface2; + --bs-btn-hover-border-color: @surface2; + --bs-btn-active-color: @text; + --bs-btn-active-bg: @surface2; + --bs-btn-active-border-color: @surface2; + --bs-btn-disabled-color: @text; + --bs-btn-disabled-bg: @overlay0; + --bs-btn-disabled-border-color: @overlay0; + } + + .btn-outline-secondary { + --bs-btn-color: @overlay0; + --bs-btn-border-color: @overlay0; + --bs-btn-hover-color: @text; + --bs-btn-hover-bg: @overlay0; + --bs-btn-hover-border-color: @overlay0; + --bs-btn-active-color: @text; + --bs-btn-active-bg: @overlay0; + --bs-btn-active-border-color: @overlay0; + --bs-btn-disabled-color: @overlay0; + --bs-btn-disabled-border-color: @overlay0; + } + + .btn-light { + &, + &:disabled, + &.disabled { + color: @text; + background-color: @crust; + } + } + .btn-dark, + .btn-outline-dark:hover { + color: @crust; + background-color: @text; + } + .btn-outline-dark { + color: @text; + } + + .btn-square { + background-color: @accent-color !important; + } + + /* Inputs */ + + .form-check-input:checked { + background-color: @accent-color !important; + border-color: @accent-color !important; + } + + .form-control { + color: @text; + background-color: @mantle; + border-color: @surface0; + + &:focus { + box-shadow: 0 0 0 0.25rem fade(@accent-color, 50%); + } + } + + .dropdown-menu { + color: @text; + background-color: @mantle; + border-color: @surface0; + + .dropdown-item { + color: @text; + + &:hover, + &:focus { + background-color: @crust; + } + } + } + + .vdp-datepicker__calendar { + background-color: @crust; + border-color: @surface0; + + .disabled { + color: @subtext0; + } + + .prev::after { + border-right-color: @text; + } + .next::after { + border-left-color: @text; + } + + header span:not(.disabled):hover { + background-color: @text; + color: @crust; + + &.prev::after { + border-right-color: @crust; + } + &.next::after { + border-left-color: @crust; + } + } + + .cell.selected { + background-color: @accent-color; + color: @crust; + } + .cell:not(.blank, .disabled):hover { + border-color: @accent-color; + } + } + + /* Header */ + + header .nav-item { + color: @text !important; + + &:hover { + color: @accent-color !important; + } + } + + .nav-custom:not(.nav-custom-start) .nav-item { + border-color: @surface0; + + &:hover { + border-bottom-color: @accent-color !important; + } + + &.btn.active, + &.btn:hover { + border-bottom-color: @accent-color !important; + } + } + + .nav-custom-start .btn, + .nav-custom .btn { + border-inline-start-color: @surface2 !important; + + &:hover, + &.active { + color: lighten(@accent-color, 5%) !important; + border-inline-start-color: @accent-color !important; + } + } + + .hamburger-menu .btn-hamburger { + background-color: @crust !important; + border-color: @surface0; + } + + .card { + background-color: @mantle; + } + + /* Footer */ + + .separator { + > .mask::after { + box-shadow: 0 0 10px @text; + } + + > span { + box-shadow: 0 2px 4px @text; + background: @text; + color: @crust; + } + } + + /* Calendar */ + + .list-group-flare > :first-child { + border-top-color: @accent-color !important; + } + .list-group-item { + color: @text !important; + background-color: @mantle !important; + border-color: @surface0 !important; + } + .calendar > .day.day-event { + border-color: @accent-color; + + &:hover { + background-color: darken(@accent-color, 10%) !important; + + .day-number { + color: @crust; + text-shadow: none; + } + } + + &.day-event-1 { + background-color: @accent-color; + color: @crust; + } + } + + /* Dictionary */ + .page-link { + color: @text; + background-color: @crust; + border-color: @surface0; + } + .page-item.active .page-link { + color: @crust; + background-color: @accent-color; + border-color: @accent-color; + } + .page-item.disabled .page-link { + color: @text; + background-color: @base; + border-color: @surface0; + } + table { + --bs-table-color: @text !important; + --bs-table-striped-color: @text !important; + --bs-table-hover-color: @text !important; + --bs-table-hover-bg: @surface1 !important; + --bs-table-striped-bg: @surface0 !important; + } + + /* Other */ + + .bg-light { + background-color: @mantle !important; + } + .bg-dark { + background-color: @text !important; + } + .bg-white { + background-color: @crust !important; + } + .text-dark { + color: @text !important; + } + .colour-default { + color: @text !important; + } + .colour-pink { + color: @accent-color !important; + } + .colour-orange { + color: @peach !important; + } + .colour-red { + color: @red !important; + } + .colour-grey { + color: @overlay2 !important; + } + + .alert-light { + background-color: @surface2; + color: @text; + } + .alert-info { + background-color: fade(@sapphire, 30%); + border-color: @sapphire; + color: @text; + } + + .nav-pills { + --bs-nav-pills-link-active-bg: @accent-color; + --bs-nav-pills-link-active-color: @crust; + } + + .badge { + --bs-badge-color: @text; + } + + .border { + border-color: @surface0 !important; + } + + a { + color: @accent-color; + + &:hover { + color: lighten(@accent-color, 5%); + } + } + + code { + color: @crust; + background-color: @accent-color; + border-color: transparent; + } + + /* Share QR code */ + [fill="#ff95bb"] { + fill: @accent-color; + } + + mark, + .mark { + background-color: fade(@yellow, 50%); + color: @text; + } + } +} + +#rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/proton/catppuccin.user.css b/styles/proton/catppuccin.user.css index f444bb741e..d287cf64dc 100644 --- a/styles/proton/catppuccin.user.css +++ b/styles/proton/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Proton Catppuccin +@name Proton Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/proton @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/proton -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/proton/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/proton/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aproton @description Soothing pastel theme for Proton @author Catppuccin @@ -13,276 +13,4 @@ @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 regexp("https://(account|mail|drive|calendar).proton.me/.*$") -{ - @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; - } - } - - svg.logo { - @accentH: hue(@accent-color); - @protonH: hue(#6d4aff); - - .replaceColor(@org, @property) { - &[@{property}="@{org}"] { - @hDiff: @protonH - hue(@org); - @{property}: hsl( - @accentH - @hDiff, - saturation(@org) - 30%, - lightness(@org) - ); - } - } - - /* prettier-ignore */ - > path { - .replaceColor(#B8D7FF, fill); - .replaceColor(#8F69FF, fill); - .replaceColor(#6D4AFF, fill); - .replaceColor(#FFBB93, fill); - } - - /* prettier-ignore */ - > defs stop { - .replaceColor(#E3D9FF, stop-color); - .replaceColor(#7341FF, stop-color); - .replaceColor(#6D4AFF, stop-color); - .replaceColor(#AA8EFF, stop-color); - .replaceColor(#06B8FF, stop-color); - .replaceColor(#BFE8FF, stop-color); - .replaceColor(#BFABFF, stop-color); - .replaceColor(#FF50C3, stop-color); - .replaceColor(#B487FF, stop-color); - .replaceColor(#FFC8FF, stop-color); - .replaceColor(#8EFFEE, stop-color); - .replaceColor(#C9C7FF, stop-color); - .replaceColor(#00F0C3, stop-color); - .replaceColor(#FFD580, stop-color); - .replaceColor(#F6C592, stop-color); - .replaceColor(#EBB6A2, stop-color); - .replaceColor(#DFA5AF, stop-color); - .replaceColor(#D397BE, stop-color); - .replaceColor(#C486CB, stop-color); - .replaceColor(#B578D9, stop-color); - .replaceColor(#A166E5, stop-color); - .replaceColor(#8B57F2, stop-color); - .replaceColor(#704CFF, stop-color); - .replaceColor(#B39FFB, stop-color); - .replaceColor(#FFE8DB, stop-color); - .replaceColor(#957AFD, stop-color); - .replaceColor(#FFC6C6, stop-color); - .replaceColor(#FA528E, stop-color); - .replaceColor(#FF8065, stop-color); - .replaceColor(#FFA51F, stop-color); - } - } - - &, - .ui-prominent, - .ui-standard { - #lightenOrDarken(@color, @value) { - @result: if( - @lookup=latte, - lighten(@color, @value), - darken(@color, @value) - ); - } - - #darkenOrLighten(@color, @value) { - @result: if( - @lookup=latte, - darken(@color, @value), - lighten(@color, @value) - ); - } - - --primary-minor-2: #lightenOrDarken(@accent-color, 60%) [ @result]; - --primary-minor-1: #lightenOrDarken(@accent-color, 50%) [ @result]; - --primary: @accent-color; - --primary-major-1: #darkenOrLighten(@accent-color, 4%) [ @result]; - --primary-major-2: #darkenOrLighten(@accent-color, 8%) [ @result]; - --primary-major-3: #darkenOrLighten(@accent-color, 12%) [ @result]; - --primary-contrast: @mantle; - --signal-danger-minor-2: #lightenOrDarken(@maroon, 40%) [ @result]; - --signal-danger-minor-1: #lightenOrDarken(@maroon, 30%) [ @result]; - --signal-danger: @maroon; - --signal-danger-major-1: #darkenOrLighten(@maroon, 4%) [ @result]; - --signal-danger-major-2: #darkenOrLighten(@maroon, 8%) [ @result]; - --signal-danger-major-3: #darkenOrLighten(@maroon, 12%) [ @result]; - --signal-danger-contrast: @mantle; - --signal-warning-minor-2: #lightenOrDarken(@peach, 40%) [ @result]; - --signal-warning-minor-1: #lightenOrDarken(@peach, 30%) [ @result]; - --signal-warning: @peach; - --signal-warning-major-1: #darkenOrLighten(@peach, 4%) [ @result]; - --signal-warning-major-2: #darkenOrLighten(@peach, 8%) [ @result]; - --signal-warning-major-3: #darkenOrLighten(@peach, 12%) [ @result]; - --signal-warning-contrast: @mantle; - --signal-success-minor-2: #lightenOrDarken(@green, 40%) [ @result]; - --signal-success-minor-1: #lightenOrDarken(@green, 30%) [ @result]; - --signal-success: @green; - --signal-success-major-1: #darkenOrLighten(@green, 4%) [ @result]; - --signal-success-major-2: #darkenOrLighten(@green, 8%) [ @result]; - --signal-success-major-3: #darkenOrLighten(@green, 12%) [ @result]; - --signal-success-contrast: @mantle; - --signal-info-minor-2: #lightenOrDarken(@blue, 40%) [ @result]; - --signal-info-minor-1: #lightenOrDarken(@blue, 30%) [ @result]; - --signal-info: @blue; - --signal-info-major-1: #darkenOrLighten(@blue, 4%) [ @result]; - --signal-info-major-2: #darkenOrLighten(@blue, 8%) [ @result]; - --signal-info-major-3: #darkenOrLighten(@blue, 12%) [ @result]; - --signal-info-contrast: @mantle; - --interaction-norm-minor-2: #lightenOrDarken(@accent-color, 40%) [ - @result]; - --interaction-norm-minor-1: #lightenOrDarken(@accent-color, 30%) [ - @result]; - --interaction-norm: @accent-color; - --interaction-norm-major-1: #darkenOrLighten(@accent-color, 4%) [ @result]; - --interaction-norm-major-2: #darkenOrLighten(@accent-color, 8%) [ @result]; - --interaction-norm-major-3: #darkenOrLighten(@accent-color, 12%) [ - @result]; - --interaction-norm-contrast: @mantle; - --interaction-weak-minor-2: #lightenOrDarken(@surface0, 20%) [ @result]; - --interaction-weak-minor-1: #lightenOrDarken(@surface0, 10%) [ @result]; - --interaction-weak: @surface0; - --interaction-weak-major-1: #darkenOrLighten(@surface0, 4%) [ @result]; - --interaction-weak-major-2: #darkenOrLighten(@surface0, 8%) [ @result]; - --interaction-weak-major-3: #darkenOrLighten(@surface0, 12%) [ @result]; - --interaction-weak-contrast: @text; - --text-norm: @text; - --text-weak: @subtext0; - --text-hint: @subtext1; - --text-disabled: @overlay1; - --text-invert: @crust; - --field-norm: @overlay2; - --field-hover: @overlay1; - --field-disabled: @overlay0; - --field-focus: @accent-color; - --field-highlight: fadeout(@accent-color, 30%); - --focus-outline: @accent-color; - --focus-ring: fadeout(@accent-color, 60%); - --border-norm: @overlay0; - --border-weak: @overlay1; - --background-norm: @base; - --background-weak: @mantle; - --background-strong: @crust; - --background-invert: @text; - --interaction-default: transparent; - --interaction-default-hover: fadeout(@overlay1, 80%); - --interaction-default-active: fadeout(@overlay1, 60%); - --shadow-primary-color: red(@accent-color) green(@accent-color) - blue(@accent-color); - --shadow-norm-opacity: 0.5; - --shadow-raised-opacity: 1; - --shadow-lifted-opacity: 0.75; - --backdrop-norm: fadeout(@crust, 50%); - --optional-scrollbar-thumb-color: @surface0; - --optional-scrollbar-thumb-hover-color: @surface2; - --optional-link-norm: var(--interaction-norm-major-1); - --optional-link-hover: var(--interaction-norm-major-2); - --optional-link-active: var(--interaction-norm-major-3); - --optional-background-elevated: @surface0; - --optional-background-lowered: var(--background-norm); - --optional-email-item-unread-background-color: var(--background-weak); - --optional-email-item-read-background-color: var(--background-norm); - --optional-email-item-read-text-color: var(--text-weak); - --optional-mini-calendar-today-color: @text; - --optional-logo-text-proton-color: @text; - --optional-logo-text-product-color: @text; - --favorite-icon-color: @peach; - } - - .ui-prominent { - --background-norm: @mantle; - --background-weak: @base; - --background-strong: @crust; - } - - .button-promotion { - --upgrade-color-stop-1: @red; - --upgrade-color-stop-2: @blue; - } - - .item-container-row:not(.item-is-selected):hover, - .item-container:not(.item-is-selected):hover { - box-shadow: none; - background-color: var(--navigation-current-item-background-color); - color: var(--email-item-unread-text-color); - } - - .message-content:not(.plain) .message-iframe iframe { - color-scheme: light; - } - - @media (min-width: 28.135em) { - .sign-layout-bg { - background: linear-gradient( - 68.66deg, - desaturate(@mantle, 5%) 1.3%, - desaturate(@base, 5%) 50% - ); - } - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/proton/catppuccin.user.less b/styles/proton/catppuccin.user.less new file mode 100644 index 0000000000..702b7c3404 --- /dev/null +++ b/styles/proton/catppuccin.user.less @@ -0,0 +1,283 @@ +/* ==UserStyle== +@name Proton Catppuccin +@namespace github.com/catppuccin/userstyles/styles/proton +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/proton +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/proton/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aproton +@description Soothing pastel theme for Proton +@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 regexp("https://(account|mail|drive|calendar).proton.me/.*$") { + @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; + } + } + + svg.logo { + @accentH: hue(@accent-color); + @protonH: hue(#6d4aff); + + .replaceColor(@org, @property) { + &[@{property}="@{org}"] { + @hDiff: @protonH - hue(@org); + @{property}: hsl( + @accentH - @hDiff, + saturation(@org) - 30%, + lightness(@org) + ); + } + } + + /* deno-fmt-ignore */ + > path { + .replaceColor(#B8D7FF, fill); + .replaceColor(#8F69FF, fill); + .replaceColor(#6D4AFF, fill); + .replaceColor(#FFBB93, fill); + } + + /* deno-fmt-ignore */ + > defs stop { + .replaceColor(#E3D9FF, stop-color); + .replaceColor(#7341FF, stop-color); + .replaceColor(#6D4AFF, stop-color); + .replaceColor(#AA8EFF, stop-color); + .replaceColor(#06B8FF, stop-color); + .replaceColor(#BFE8FF, stop-color); + .replaceColor(#BFABFF, stop-color); + .replaceColor(#FF50C3, stop-color); + .replaceColor(#B487FF, stop-color); + .replaceColor(#FFC8FF, stop-color); + .replaceColor(#8EFFEE, stop-color); + .replaceColor(#C9C7FF, stop-color); + .replaceColor(#00F0C3, stop-color); + .replaceColor(#FFD580, stop-color); + .replaceColor(#F6C592, stop-color); + .replaceColor(#EBB6A2, stop-color); + .replaceColor(#DFA5AF, stop-color); + .replaceColor(#D397BE, stop-color); + .replaceColor(#C486CB, stop-color); + .replaceColor(#B578D9, stop-color); + .replaceColor(#A166E5, stop-color); + .replaceColor(#8B57F2, stop-color); + .replaceColor(#704CFF, stop-color); + .replaceColor(#B39FFB, stop-color); + .replaceColor(#FFE8DB, stop-color); + .replaceColor(#957AFD, stop-color); + .replaceColor(#FFC6C6, stop-color); + .replaceColor(#FA528E, stop-color); + .replaceColor(#FF8065, stop-color); + .replaceColor(#FFA51F, stop-color); + } + } + + &, + .ui-prominent, + .ui-standard { + #lightenOrDarken(@color, @value) { + @result: if( + @lookup = latte, + lighten(@color, @value), + darken(@color, @value) + ); + } + + #darkenOrLighten(@color, @value) { + @result: if( + @lookup = latte, + darken(@color, @value), + lighten(@color, @value) + ); + } + + --primary-minor-2: #lightenOrDarken(@accent-color, 60%)[@result]; + --primary-minor-1: #lightenOrDarken(@accent-color, 50%)[@result]; + --primary: @accent-color; + --primary-major-1: #darkenOrLighten(@accent-color, 4%)[@result]; + --primary-major-2: #darkenOrLighten(@accent-color, 8%)[@result]; + --primary-major-3: #darkenOrLighten(@accent-color, 12%)[@result]; + --primary-contrast: @mantle; + --signal-danger-minor-2: #lightenOrDarken(@maroon, 40%)[@result]; + --signal-danger-minor-1: #lightenOrDarken(@maroon, 30%)[@result]; + --signal-danger: @maroon; + --signal-danger-major-1: #darkenOrLighten(@maroon, 4%)[@result]; + --signal-danger-major-2: #darkenOrLighten(@maroon, 8%)[@result]; + --signal-danger-major-3: #darkenOrLighten(@maroon, 12%)[@result]; + --signal-danger-contrast: @mantle; + --signal-warning-minor-2: #lightenOrDarken(@peach, 40%)[@result]; + --signal-warning-minor-1: #lightenOrDarken(@peach, 30%)[@result]; + --signal-warning: @peach; + --signal-warning-major-1: #darkenOrLighten(@peach, 4%)[@result]; + --signal-warning-major-2: #darkenOrLighten(@peach, 8%)[@result]; + --signal-warning-major-3: #darkenOrLighten(@peach, 12%)[@result]; + --signal-warning-contrast: @mantle; + --signal-success-minor-2: #lightenOrDarken(@green, 40%)[@result]; + --signal-success-minor-1: #lightenOrDarken(@green, 30%)[@result]; + --signal-success: @green; + --signal-success-major-1: #darkenOrLighten(@green, 4%)[@result]; + --signal-success-major-2: #darkenOrLighten(@green, 8%)[@result]; + --signal-success-major-3: #darkenOrLighten(@green, 12%)[@result]; + --signal-success-contrast: @mantle; + --signal-info-minor-2: #lightenOrDarken(@blue, 40%)[@result]; + --signal-info-minor-1: #lightenOrDarken(@blue, 30%)[@result]; + --signal-info: @blue; + --signal-info-major-1: #darkenOrLighten(@blue, 4%)[@result]; + --signal-info-major-2: #darkenOrLighten(@blue, 8%)[@result]; + --signal-info-major-3: #darkenOrLighten(@blue, 12%)[@result]; + --signal-info-contrast: @mantle; + --interaction-norm-minor-2: #lightenOrDarken(@accent-color, 40%)[@result]; + --interaction-norm-minor-1: #lightenOrDarken(@accent-color, 30%)[@result]; + --interaction-norm: @accent-color; + --interaction-norm-major-1: #darkenOrLighten(@accent-color, 4%)[@result]; + --interaction-norm-major-2: #darkenOrLighten(@accent-color, 8%)[@result]; + --interaction-norm-major-3: #darkenOrLighten(@accent-color, 12%)[@result]; + --interaction-norm-contrast: @mantle; + --interaction-weak-minor-2: #lightenOrDarken(@surface0, 20%)[@result]; + --interaction-weak-minor-1: #lightenOrDarken(@surface0, 10%)[@result]; + --interaction-weak: @surface0; + --interaction-weak-major-1: #darkenOrLighten(@surface0, 4%)[@result]; + --interaction-weak-major-2: #darkenOrLighten(@surface0, 8%)[@result]; + --interaction-weak-major-3: #darkenOrLighten(@surface0, 12%)[@result]; + --interaction-weak-contrast: @text; + --text-norm: @text; + --text-weak: @subtext0; + --text-hint: @subtext1; + --text-disabled: @overlay1; + --text-invert: @crust; + --field-norm: @overlay2; + --field-hover: @overlay1; + --field-disabled: @overlay0; + --field-focus: @accent-color; + --field-highlight: fadeout(@accent-color, 30%); + --focus-outline: @accent-color; + --focus-ring: fadeout(@accent-color, 60%); + --border-norm: @overlay0; + --border-weak: @overlay1; + --background-norm: @base; + --background-weak: @mantle; + --background-strong: @crust; + --background-invert: @text; + --interaction-default: transparent; + --interaction-default-hover: fadeout(@overlay1, 80%); + --interaction-default-active: fadeout(@overlay1, 60%); + --shadow-primary-color: red(@accent-color) green(@accent-color) blue( + @accent-color + ); + --shadow-norm-opacity: 0.5; + --shadow-raised-opacity: 1; + --shadow-lifted-opacity: 0.75; + --backdrop-norm: fadeout(@crust, 50%); + --optional-scrollbar-thumb-color: @surface0; + --optional-scrollbar-thumb-hover-color: @surface2; + --optional-link-norm: var(--interaction-norm-major-1); + --optional-link-hover: var(--interaction-norm-major-2); + --optional-link-active: var(--interaction-norm-major-3); + --optional-background-elevated: @surface0; + --optional-background-lowered: var(--background-norm); + --optional-email-item-unread-background-color: var(--background-weak); + --optional-email-item-read-background-color: var(--background-norm); + --optional-email-item-read-text-color: var(--text-weak); + --optional-mini-calendar-today-color: @text; + --optional-logo-text-proton-color: @text; + --optional-logo-text-product-color: @text; + --favorite-icon-color: @peach; + } + + .ui-prominent { + --background-norm: @mantle; + --background-weak: @base; + --background-strong: @crust; + } + + .button-promotion { + --upgrade-color-stop-1: @red; + --upgrade-color-stop-2: @blue; + } + + .item-container-row:not(.item-is-selected):hover, + .item-container:not(.item-is-selected):hover { + box-shadow: none; + background-color: var(--navigation-current-item-background-color); + color: var(--email-item-unread-text-color); + } + + .message-content:not(.plain) .message-iframe iframe { + color-scheme: light; + } + + @media (min-width: 28.135em) { + .sign-layout-bg { + background: linear-gradient( + 68.66deg, + desaturate(@mantle, 5%) 1.3%, + desaturate(@base, 5%) 50% + ); + } + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/pypi/catppuccin.user.css b/styles/pypi/catppuccin.user.css index bfcfc513d9..f0e7217489 100644 --- a/styles/pypi/catppuccin.user.css +++ b/styles/pypi/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name PyPI Catppuccin +@name PyPI Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/pypi @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pypi -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pypi/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pypi/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apypi @description Soothing pastel theme for PyPI @author Catppuccin @@ -13,967 +13,4 @@ @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('pypi.org') { - @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); - - @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]; - - --ctp-rosewater: @rosewater; - --ctp-flamingo: @flamingo; - --ctp-pink: @pink; - --ctp-mauve: @mauve; - --ctp-red: @red; - --ctp-maroon: @maroon; - --ctp-peach: @peach; - --ctp-yellow: @yellow; - --ctp-green: @green; - --ctp-teal: @teal; - --ctp-sky: @sky; - --ctp-sapphire: @sapphire; - --ctp-blue: @blue; - --ctp-lavender: @lavender; - --ctp-text: @text; - --ctp-subtext1: @subtext1; - --ctp-subtext0: @subtext0; - --ctp-overlay2: @overlay2; - --ctp-overlay1: @overlay1; - --ctp-overlay0: @overlay0; - --ctp-surface2: @surface2; - --ctp-surface1: @surface1; - --ctp-surface0: @surface0; - --ctp-base: @base; - --ctp-mantle: @mantle; - --ctp-crust: @crust; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - color: unset; - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - body { - background-color: @base !important; - color: @text !important; - } - - input, - select, - textarea { - background-color: @mantle !important; - border-color: @surface0 !important; - color: @text !important; - - &:active, - &:focus, - &:hover { - border-color: @accent-color !important; - box-shadow: inset 0 0 0 1px @accent-color !important; - } - } - - input:disabled, - select:disabled { - &, - &:active, - &:focus, - &:hover { - background-color: @mantle !important; - } - } - - hr { - background-color: @surface0 !important; - background-image: linear-gradient(90deg, @surface0, @surface0) !important; - } - - .project-description blockquote { - color: @subtext0 !important; - } - - .banner, - .footer { - background-color: @mantle !important; - color: @text !important; - } - - .accordion__link { - color: @accent-color !important; - } - - .password-strength { - border-color: @surface2 !important; - } - - .accordion__link:active, - .accordion__link:focus { - outline-color: @accent-color !important; - outline-style: solid; - } - - @media (max-width: 1000px) { - .accordion__link { - color: @text !important; - } - - .accordion__link:active, - .accordion__link:focus { - outline-color: @text !important; - } - } - - .footer__divider { - border-color: @surface0 !important; - } - - a, - .footer__menu li a { - &:active, - &:focus { - outline-color: @accent-color !important; - } - } - - .skip-to-content:focus { - background-color: @base !important; - color: @text !important; - } - - a:not(.site-header__logo, .button, .dropdown__link, .badge, .release__card), - a:hover:not( - .site-header__logo, - .button, - .dropdown__link, - .badge, - .release__card - ), - .footer__menu li a, - .footer__text a, - .language-switcher ul button { - color: @accent-color !important; - } - - .footer__text a, - .language-switcher ul button { - &:active, - &:focus { - outline-color: @accent-color !important; - } - } - - .footer__menu h2, - .footer__text, - .language-switcher ul button.language-switcher__selected::before { - color: @text !important; - } - - .language-switcher { - background-color: @crust !important; - border-top-color: @crust !important; - color: @text !important; - } - - .horizontal-section--grey { - background-color: @base !important; - border-bottom-color: @base !important; - border-top-color: @base !important; - } - - .statistics-bar__statistic { - color: @subtext0 !important; - } - - .lede-paragraph { - color: @subtext1 !important; - } - - .site-header { - background-color: @crust !important; - border-bottom-color: @crust !important; - } - - .site-header__logo:active, - .site-header__logo:focus { - outline-color: @text !important; - } - - .dropdown__content { - border-color: @accent-color !important; - box-shadow: none !important; - } - - .dropdown__content li:hover { - background-color: @base !important; - } - - .dropdown button.dropdown__link:not(:hover), - .dropdown__link { - background-color: @crust !important; - border-bottom-color: @crust !important; - color: @text !important; - } - - .dropdown__link:hover { - background-color: @base !important; - } - - a.dropdown__link, - a.dropdown__link:hover { - background-image: none !important; - color: @text !important; - } - - .horizontal-menu__link:active, - .horizontal-menu__link:focus { - outline-color: @accent-color !important; - } - - .horizontal-menu--light .horizontal-menu__link { - color: @accent-color !important; - } - - .horizontal-menu--light .horizontal-menu__link:hover { - text-decoration-color: @accent-color !important; - } - - .sponsors, - .sidebar-section.loaded { - display: none; - } - - .package-snippet { - background-color: @crust !important; - border-color: @surface0 !important; - box-shadow: none !important; - } - - .package-snippet__created { - color: @subtext0 !important; - } - - .package-snippet__description { - color: @subtext1 !important; - } - - .search-form__search { - background-color: @surface0 !important; - } - .search-form__button { - color: @subtext0; - } - - .button { - border-color: @subtext0 !important; - color: @text !important; - - &:active, - &:focus, - &:hover { - border-color: @subtext1 !important; - color: @text !important; - } - } - - .button--primary, - .button--primary:active, - .button--primary:focus, - .button--primary:hover { - background-color: @accent-color !important; - border-color: @accent-color !important; - color: @base !important; - outline-color: @accent-color !important; - } - - .danger { - color: @red !important; - } - - .notification-bar { - background-color: @accent-color !important; - border-bottom-color: @accent-color !important; - color: @base !important; - } - - .notification-bar--danger { - background-color: @red !important; - } - - .notification-bar--success { - background-color: @green !important; - } - - .notification-bar--banner .button { - color: @base !important; - } - - .badge--warning { - background-color: @yellow !important; - border-color: @yellow !important; - color: @base !important; - - &:hover { - color: @base !important; - } - } - - .badge--warning:active, - .badge--warning:focus { - outline-color: invisible !important; - } - - .callout-block--warning { - border-color: @yellow !important; - } - - .callout-block--warning > :not(.modal, .button, a) { - color: @text !important; - } - - .callout-block--warning::before { - background-color: @yellow !important; - } - - .callout-block--warning .callout-block__dismiss:active, - .callout-block--warning .callout-block__dismiss:focus { - outline-color: @yellow !important; - } - - .callout-block { - border-color: @accent-color !important; - } - - .callout-block::before { - background-color: @accent-color !important; - } - - .callout-block--danger { - border-color: @red !important; - } - - .callout-block--danger > :not(.modal, .button) { - color: @text !important; - } - - .callout-block--danger::before { - background-color: @red !important; - } - - .callout-block--danger .callout-block__dismiss:active, - .callout-block--danger .callout-block__dismiss:focus { - outline-color: @red !important; - } - - .callout-block--success { - border-color: @green !important; - } - - .callout-block--success > :not(.modal, .button) { - color: @text !important; - } - - .callout-block--success::before { - background-color: @green !important; - } - - .callout-block--success .callout-block__dismiss:active, - .callout-block--success .callout-block__dismiss:focus { - outline-color: @green !important; - } - - .faq-group h3::before { - color: @accent-color !important; - } - - .badge { - background-color: @accent-color !important; - border-color: @accent-color !important; - color: @base !important; - } - - .badge:hover { - color: @base !important; - } - - .badge:active, - .badge:focus { - border-color: @base !important; - outline-color: @accent-color !important; - } - - .badge--success { - background-color: @green !important; - border-color: @green !important; - } - - .badge--success:active, - .badge--success:focus { - outline-color: @green !important; - } - - .notification-bar--warning { - background-color: @yellow !important; - color: @base !important; - } - - .notification-bar--warning .notification-bar__dismiss:active, - .notification-bar--warning .notification-bar__dismiss:focus { - outline-color: @yellow !important; - } - - .table td, - .table th { - border-bottom-color: @surface0 !important; - } - - .table--collaborators .table__user-text > * { - background-image: linear-gradient( - 90deg, - @accent-color, - @accent-color - ) !important; - color: @accent-color !important; - } - - .table--collaborators .table__user-text > :hover { - background-image: linear-gradient( - 90deg, - @accent-color, - @accent-color - ) !important; - color: @accent-color !important; - } - - .table--collaborators .table__user-text > :active, - .table--collaborators .table__user-text > :focus { - outline-color: @accent-color !important; - } - - @media (max-width: 600px) { - .table--security-logs, - .table--collaborators, - .table--releases, - .table--emails, - .table--2fa, - .table--api-tokens, - .table--publisher-list { - border-bottom-color: @surface0 !important; - } - - .table--security-logs tbody tr td:first-child, - .table--security-logs tbody tr th:first-child, - .table--collaborators tbody tr td:first-child, - .table--collaborators tbody tr th:first-child, - .table--releases tbody tr td:first-child, - .table--releases tbody tr th:first-child, - .table--emails tbody tr td:first-child, - .table--emails tbody tr th:first-child, - .table--2fa tbody tr td:first-child, - .table--2fa tbody tr th:first-child, - .table--api-tokens tbody tr td:first-child, - .table--api-tokens tbody tr th:first-child, - .table--publisher-list tbody tr td:first-child, - .table--publisher-list tbody tr th:first-child { - border-top-color: @surface0 !important; - } - } - - @media (max-width: 800px) { - .table--files, - .table--history, - .table--downloads { - border-bottom-color: @subtext0 !important; - } - - .table--files tbody tr td:first-child, - .table--files tbody tr th:first-child, - .table--history tbody tr td:first-child, - .table--history tbody tr th:first-child, - .table--downloads tbody tr td:first-child, - .table--downloads tbody tr th:first-child { - border-top-color: @subtext0 !important; - } - } - - @media (max-width: 400px) { - .table--hashes { - border-bottom-color: @subtext0 !important; - } - - .table--hashes tbody tr td:first-child, - .table--hashes tbody tr th:first-child { - border-top-color: @subtext0 !important; - } - - .table--hashes td .button::before { - border-color: transparent !important; - } - } - - .sponsor-grid__sponsor { - background-color: @mantle !important; - border-color: @subtext0 !important; - } - - .sponsor-grid__sponsor:active, - .sponsor-grid__sponsor:hover { - border-color: @subtext0 !important; - } - - .sponsor-grid__sponsor--invitation, - .sponsor-grid__sponsor--invitation:hover { - border-color: @accent-color !important; - } - - .sponsor-grid__sponsor-activity { - color: @subtext0 !important; - } - - .sponsor-package { - border-color: @accent-color !important; - } - - .sponsor-package__header { - background-color: @accent-color !important; - color: @base !important; - } - - .sponsor-package__icon { - background-color: @accent-color !important; - } - - .mobile-search { - background-color: @crust !important; - } - - .hooray-list { - border-top-color: @subtext0 !important; - } - - .hooray-list li { - border-bottom-color: @subtext0 !important; - } - - .hooray-list li::before { - color: @text !important; - } - - .button--tertiary { - background-color: @crust !important; - border-color: @subtext0 !important; - } - - .button--danger { - background-color: @red !important; - border-color: @red !important; - color: @base !important; - } - - .button--danger:active, - .button--danger:focus, - .button--danger:hover { - background-color: @red !important; - border-color: @red !important; - color: @base !important; - text-decoration-color: @red !important; - } - - .button--danger:active, - .button--danger:focus { - border-color: @red !important; - } - - .button--danger:active:active, - .button--danger:active:focus, - .button--danger:focus:active, - .button--danger:focus:focus { - outline-color: @red !important; - } - - .button--warning { - background-color: @yellow !important; - border-color: @yellow !important; - color: @base !important; - } - - .button--warning:active, - .button--warning:focus, - .button--warning:hover { - background-color: @yellow !important; - border-color: @yellow !important; - color: @base !important; - text-decoration-color: @yellow !important; - } - - .button--warning:active, - .button--warning:focus { - border-color: @yellow !important; - } - - .button--disabled, - .button--disabled:active, - .button--disabled:focus, - .button--disabled:hover, - .button[disabled], - .button[disabled]:active, - .button[disabled]:focus, - .button[disabled]:hover { - background-color: @base !important; - border-color: @subtext0 !important; - color: @subtext0 !important; - } - - .button--switch-to-desktop, - .button--switch-to-desktop:active, - .button--switch-to-desktop:focus, - .button--switch-to-desktop:hover { - border-color: @text !important; - color: @text !important; - } - - .password-strength .password-strength__gauge--0 { - background-color: @red !important; - } - - .password-strength .password-strength__gauge--1 { - background-color: @peach !important; - } - - .password-strength .password-strength__gauge--2 { - background-color: @yellow !important; - } - - .password-strength .password-strength__gauge--3 { - background-color: @blue !important; - } - - .password-strength .password-strength__gauge--4 { - background-color: @green !important; - } - - .package-header__pip-instructions span { - background-color: @crust !important; - border-color: @subtext0 !important; - } - - .package-header__pip-instructions button { - background-color: @crust !important; - border-color: @subtext0 !important; - color: @text !important; - } - - .package-header__pip-instructions button:hover { - background-color: @base !important; - } - - .package-header__pip-instructions button:active, - .package-header__pip-instructions button:focus { - outline-color: @base !important; - } - - .docutils.literal, - code, - kbd, - pre, - samp, - tt { - background-color: @mantle !important; - border-color: @mantle !important; - color: @subtext1 !important; - } - - .vertical-tabs__tab:hover { - color: @accent-color !important; - } - - .vertical-tabs__tab:active, - .vertical-tabs__tab:focus { - box-shadow: 0 0 0 2px @crust !important; - outline-color: @accent-color !important; - } - - @media (max-width: 800px) { - .vertical-tabs__tab--mobile, - .vertical-tabs__tab--mobile:last-of-type { - border-bottom-color: @surface0 !important; - } - } - - .vertical-tabs__tab--is-active, - .vertical-tabs__tab--is-active:hover { - background: @crust !important; - color: @accent-color !important; - } - - .vertical-tabs__content:focus { - outline-color: @accent-color !important; - } - - .verified small { - color: @subtext0 !important; - } - - .sidebar-section .sidebar-section__user-gravatar:active, - .sidebar-section .sidebar-section__user-gravatar:focus { - outline-color: @accent-color !important; - } - - .sidebar-section__user-gravatar-text, - .sidebar-section__user-gravatar-text:hover { - background-image: linear-gradient( - 90deg, - @accent-color, - @accent-color - ) !important; - color: @accent-color !important; - } - - .sidebar-section__user-gravatar-text:active, - .sidebar-section__user-gravatar-text:focus { - outline-color: @accent-color !important; - } - - .sidebar-section { - border-bottom-color: @surface0; - } - - .status-badge { - background-color: @crust !important; - border-color: @mantle !important; - } - - .status-badge span { - color: @base !important; - text-decoration: none !important; - } - - .status-badge:active, - .status-badge:focus { - outline-color: @mantle !important; - } - - .status-badge::before { - color: @base !important; - border-right-color: @mantle !important; - } - - .status-badge--good { - background-color: @green !important; - color: @base !important; - } - - .status-badge--warn { - background-color: @yellow !important; - } - - .status-badge--bad { - background-color: @red !important; - color: @base !important; - } - - .viewport-section__rule { - background-color: @base !important; - } - - .viewport-section--dark { - background-color: @base !important; - color: @text !important; - } - - .viewport-section--ee .viewport-section__heading { - background-color: @base !important; - color: @accent-color !important; - } - - .viewport-section--ee - .viewport-section__video - .viewport-section__video-container { - border-color: @crust !important; - outline-color: invisible !important; - } - - .form-errors, - .form-errors li::before { - color: @red !important; - } - - .form-errors .form-error--valid, - .form-errors .form-error--valid::before { - color: @green !important; - } - - .breadcrumbs__breadcrumb { - color: @text !important; - } - - .breadcrumbs__breadcrumb:first-child { - color: @text !important; - } - - .breadcrumbs__breadcrumb:not(:last-child)::after { - color: @text !important; - } - - .horizontal-menu__link--with-icon:hover .fa, - .horizontal-menu__link--with-icon:hover .user-image { - opacity: 100% !important; - } - - .release__line { - @svg: escape( - '' - ); - - background-image: url("data:image/svg+xml;utf8,@{svg}") !important; - } - - .release__node[src*="white"] { - background-color: @base !important; - } - - .release__card { - background-color: @crust !important; - border-color: @surface0 !important; - color: @text !important; - } - - .release__version-date { - color: @subtext0 !important; - } - - .release--current { - background-color: @mantle !important; - border-color: @surface0 !important; - } - - .release { - border-left-color: @mantle !important; - } - - .checkbox-tree li { - &::before, - &::after { - border-color: @surface2; - } - } - - .filter-badge { - background-color: @accent-color; - - &, - .filter-badge__remove-button, - .filter-badge__icon { - color: @crust; - } - .filter-badge__remove-button { - border-left-color: if( - @lookup = latte, - lighten(@accent-color, 10%), - darken(@accent-color, 5%) - ); - - &:hover { - background-color: darken(@accent-color, 10%); - } - } - } - - @media (min-width: 801px) { - .package-snippet, - .package-snippet:hover { - @svg: escape( - '' - ); - - background-image: url("data:image/svg+xml;utf8,@{svg}") !important; - } - } - - .site-header__logo img { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .about-pypi__logo img { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .-js-white-cube, - .release__node[src*="white"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .release__node[src*="blue"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - background-color: @mantle !important; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/pypi/catppuccin.user.less b/styles/pypi/catppuccin.user.less new file mode 100644 index 0000000000..1546937c1c --- /dev/null +++ b/styles/pypi/catppuccin.user.less @@ -0,0 +1,977 @@ +/* ==UserStyle== +@name PyPI Catppuccin +@namespace github.com/catppuccin/userstyles/styles/pypi +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pypi +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pypi/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apypi +@description Soothing pastel theme for PyPI +@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("pypi.org") { + @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); + + @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]; + + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + color: unset; + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + body { + background-color: @base !important; + color: @text !important; + } + + input, + select, + textarea { + background-color: @mantle !important; + border-color: @surface0 !important; + color: @text !important; + + &:active, + &:focus, + &:hover { + border-color: @accent-color !important; + box-shadow: inset 0 0 0 1px @accent-color !important; + } + } + + input:disabled, + select:disabled { + &, + &:active, + &:focus, + &:hover { + background-color: @mantle !important; + } + } + + hr { + background-color: @surface0 !important; + background-image: linear-gradient(90deg, @surface0, @surface0) !important; + } + + .project-description blockquote { + color: @subtext0 !important; + } + + .banner, + .footer { + background-color: @mantle !important; + color: @text !important; + } + + .accordion__link { + color: @accent-color !important; + } + + .password-strength { + border-color: @surface2 !important; + } + + .accordion__link:active, + .accordion__link:focus { + outline-color: @accent-color !important; + outline-style: solid; + } + + @media (max-width: 1000px) { + .accordion__link { + color: @text !important; + } + + .accordion__link:active, + .accordion__link:focus { + outline-color: @text !important; + } + } + + .footer__divider { + border-color: @surface0 !important; + } + + a, + .footer__menu li a { + &:active, + &:focus { + outline-color: @accent-color !important; + } + } + + .skip-to-content:focus { + background-color: @base !important; + color: @text !important; + } + + a:not(.site-header__logo, .button, .dropdown__link, .badge, .release__card), + a:hover:not( + .site-header__logo, + .button, + .dropdown__link, + .badge, + .release__card + ), + .footer__menu li a, + .footer__text a, + .language-switcher ul button { + color: @accent-color !important; + } + + .footer__text a, + .language-switcher ul button { + &:active, + &:focus { + outline-color: @accent-color !important; + } + } + + .footer__menu h2, + .footer__text, + .language-switcher ul button.language-switcher__selected::before { + color: @text !important; + } + + .language-switcher { + background-color: @crust !important; + border-top-color: @crust !important; + color: @text !important; + } + + .horizontal-section--grey { + background-color: @base !important; + border-bottom-color: @base !important; + border-top-color: @base !important; + } + + .statistics-bar__statistic { + color: @subtext0 !important; + } + + .lede-paragraph { + color: @subtext1 !important; + } + + .site-header { + background-color: @crust !important; + border-bottom-color: @crust !important; + } + + .site-header__logo:active, + .site-header__logo:focus { + outline-color: @text !important; + } + + .dropdown__content { + border-color: @accent-color !important; + box-shadow: none !important; + } + + .dropdown__content li:hover { + background-color: @base !important; + } + + .dropdown button.dropdown__link:not(:hover), + .dropdown__link { + background-color: @crust !important; + border-bottom-color: @crust !important; + color: @text !important; + } + + .dropdown__link:hover { + background-color: @base !important; + } + + a.dropdown__link, + a.dropdown__link:hover { + background-image: none !important; + color: @text !important; + } + + .horizontal-menu__link:active, + .horizontal-menu__link:focus { + outline-color: @accent-color !important; + } + + .horizontal-menu--light .horizontal-menu__link { + color: @accent-color !important; + } + + .horizontal-menu--light .horizontal-menu__link:hover { + text-decoration-color: @accent-color !important; + } + + .sponsors, + .sidebar-section.loaded { + display: none; + } + + .package-snippet { + background-color: @crust !important; + border-color: @surface0 !important; + box-shadow: none !important; + } + + .package-snippet__created { + color: @subtext0 !important; + } + + .package-snippet__description { + color: @subtext1 !important; + } + + .search-form__search { + background-color: @surface0 !important; + } + .search-form__button { + color: @subtext0; + } + + .button { + border-color: @subtext0 !important; + color: @text !important; + + &:active, + &:focus, + &:hover { + border-color: @subtext1 !important; + color: @text !important; + } + } + + .button--primary, + .button--primary:active, + .button--primary:focus, + .button--primary:hover { + background-color: @accent-color !important; + border-color: @accent-color !important; + color: @base !important; + outline-color: @accent-color !important; + } + + .danger { + color: @red !important; + } + + .notification-bar { + background-color: @accent-color !important; + border-bottom-color: @accent-color !important; + color: @base !important; + } + + .notification-bar--danger { + background-color: @red !important; + } + + .notification-bar--success { + background-color: @green !important; + } + + .notification-bar--banner .button { + color: @base !important; + } + + .badge--warning { + background-color: @yellow !important; + border-color: @yellow !important; + color: @base !important; + + &:hover { + color: @base !important; + } + } + + .badge--warning:active, + .badge--warning:focus { + outline-color: invisible !important; + } + + .callout-block--warning { + border-color: @yellow !important; + } + + .callout-block--warning > :not(.modal, .button, a) { + color: @text !important; + } + + .callout-block--warning::before { + background-color: @yellow !important; + } + + .callout-block--warning .callout-block__dismiss:active, + .callout-block--warning .callout-block__dismiss:focus { + outline-color: @yellow !important; + } + + .callout-block { + border-color: @accent-color !important; + } + + .callout-block::before { + background-color: @accent-color !important; + } + + .callout-block--danger { + border-color: @red !important; + } + + .callout-block--danger > :not(.modal, .button) { + color: @text !important; + } + + .callout-block--danger::before { + background-color: @red !important; + } + + .callout-block--danger .callout-block__dismiss:active, + .callout-block--danger .callout-block__dismiss:focus { + outline-color: @red !important; + } + + .callout-block--success { + border-color: @green !important; + } + + .callout-block--success > :not(.modal, .button) { + color: @text !important; + } + + .callout-block--success::before { + background-color: @green !important; + } + + .callout-block--success .callout-block__dismiss:active, + .callout-block--success .callout-block__dismiss:focus { + outline-color: @green !important; + } + + .faq-group h3::before { + color: @accent-color !important; + } + + .badge { + background-color: @accent-color !important; + border-color: @accent-color !important; + color: @base !important; + } + + .badge:hover { + color: @base !important; + } + + .badge:active, + .badge:focus { + border-color: @base !important; + outline-color: @accent-color !important; + } + + .badge--success { + background-color: @green !important; + border-color: @green !important; + } + + .badge--success:active, + .badge--success:focus { + outline-color: @green !important; + } + + .notification-bar--warning { + background-color: @yellow !important; + color: @base !important; + } + + .notification-bar--warning .notification-bar__dismiss:active, + .notification-bar--warning .notification-bar__dismiss:focus { + outline-color: @yellow !important; + } + + .table td, + .table th { + border-bottom-color: @surface0 !important; + } + + .table--collaborators .table__user-text > * { + background-image: linear-gradient( + 90deg, + @accent-color, + @accent-color + ) !important; + color: @accent-color !important; + } + + .table--collaborators .table__user-text > :hover { + background-image: linear-gradient( + 90deg, + @accent-color, + @accent-color + ) !important; + color: @accent-color !important; + } + + .table--collaborators .table__user-text > :active, + .table--collaborators .table__user-text > :focus { + outline-color: @accent-color !important; + } + + @media (max-width: 600px) { + .table--security-logs, + .table--collaborators, + .table--releases, + .table--emails, + .table--2fa, + .table--api-tokens, + .table--publisher-list { + border-bottom-color: @surface0 !important; + } + + .table--security-logs tbody tr td:first-child, + .table--security-logs tbody tr th:first-child, + .table--collaborators tbody tr td:first-child, + .table--collaborators tbody tr th:first-child, + .table--releases tbody tr td:first-child, + .table--releases tbody tr th:first-child, + .table--emails tbody tr td:first-child, + .table--emails tbody tr th:first-child, + .table--2fa tbody tr td:first-child, + .table--2fa tbody tr th:first-child, + .table--api-tokens tbody tr td:first-child, + .table--api-tokens tbody tr th:first-child, + .table--publisher-list tbody tr td:first-child, + .table--publisher-list tbody tr th:first-child { + border-top-color: @surface0 !important; + } + } + + @media (max-width: 800px) { + .table--files, + .table--history, + .table--downloads { + border-bottom-color: @subtext0 !important; + } + + .table--files tbody tr td:first-child, + .table--files tbody tr th:first-child, + .table--history tbody tr td:first-child, + .table--history tbody tr th:first-child, + .table--downloads tbody tr td:first-child, + .table--downloads tbody tr th:first-child { + border-top-color: @subtext0 !important; + } + } + + @media (max-width: 400px) { + .table--hashes { + border-bottom-color: @subtext0 !important; + } + + .table--hashes tbody tr td:first-child, + .table--hashes tbody tr th:first-child { + border-top-color: @subtext0 !important; + } + + .table--hashes td .button::before { + border-color: transparent !important; + } + } + + .sponsor-grid__sponsor { + background-color: @mantle !important; + border-color: @subtext0 !important; + } + + .sponsor-grid__sponsor:active, + .sponsor-grid__sponsor:hover { + border-color: @subtext0 !important; + } + + .sponsor-grid__sponsor--invitation, + .sponsor-grid__sponsor--invitation:hover { + border-color: @accent-color !important; + } + + .sponsor-grid__sponsor-activity { + color: @subtext0 !important; + } + + .sponsor-package { + border-color: @accent-color !important; + } + + .sponsor-package__header { + background-color: @accent-color !important; + color: @base !important; + } + + .sponsor-package__icon { + background-color: @accent-color !important; + } + + .mobile-search { + background-color: @crust !important; + } + + .hooray-list { + border-top-color: @subtext0 !important; + } + + .hooray-list li { + border-bottom-color: @subtext0 !important; + } + + .hooray-list li::before { + color: @text !important; + } + + .button--tertiary { + background-color: @crust !important; + border-color: @subtext0 !important; + } + + .button--danger { + background-color: @red !important; + border-color: @red !important; + color: @base !important; + } + + .button--danger:active, + .button--danger:focus, + .button--danger:hover { + background-color: @red !important; + border-color: @red !important; + color: @base !important; + text-decoration-color: @red !important; + } + + .button--danger:active, + .button--danger:focus { + border-color: @red !important; + } + + .button--danger:active:active, + .button--danger:active:focus, + .button--danger:focus:active, + .button--danger:focus:focus { + outline-color: @red !important; + } + + .button--warning { + background-color: @yellow !important; + border-color: @yellow !important; + color: @base !important; + } + + .button--warning:active, + .button--warning:focus, + .button--warning:hover { + background-color: @yellow !important; + border-color: @yellow !important; + color: @base !important; + text-decoration-color: @yellow !important; + } + + .button--warning:active, + .button--warning:focus { + border-color: @yellow !important; + } + + .button--disabled, + .button--disabled:active, + .button--disabled:focus, + .button--disabled:hover, + .button[disabled], + .button[disabled]:active, + .button[disabled]:focus, + .button[disabled]:hover { + background-color: @base !important; + border-color: @subtext0 !important; + color: @subtext0 !important; + } + + .button--switch-to-desktop, + .button--switch-to-desktop:active, + .button--switch-to-desktop:focus, + .button--switch-to-desktop:hover { + border-color: @text !important; + color: @text !important; + } + + .password-strength .password-strength__gauge--0 { + background-color: @red !important; + } + + .password-strength .password-strength__gauge--1 { + background-color: @peach !important; + } + + .password-strength .password-strength__gauge--2 { + background-color: @yellow !important; + } + + .password-strength .password-strength__gauge--3 { + background-color: @blue !important; + } + + .password-strength .password-strength__gauge--4 { + background-color: @green !important; + } + + .package-header__pip-instructions span { + background-color: @crust !important; + border-color: @subtext0 !important; + } + + .package-header__pip-instructions button { + background-color: @crust !important; + border-color: @subtext0 !important; + color: @text !important; + } + + .package-header__pip-instructions button:hover { + background-color: @base !important; + } + + .package-header__pip-instructions button:active, + .package-header__pip-instructions button:focus { + outline-color: @base !important; + } + + .docutils.literal, + code, + kbd, + pre, + samp, + tt { + background-color: @mantle !important; + border-color: @mantle !important; + color: @subtext1 !important; + } + + .vertical-tabs__tab:hover { + color: @accent-color !important; + } + + .vertical-tabs__tab:active, + .vertical-tabs__tab:focus { + box-shadow: 0 0 0 2px @crust !important; + outline-color: @accent-color !important; + } + + @media (max-width: 800px) { + .vertical-tabs__tab--mobile, + .vertical-tabs__tab--mobile:last-of-type { + border-bottom-color: @surface0 !important; + } + } + + .vertical-tabs__tab--is-active, + .vertical-tabs__tab--is-active:hover { + background: @crust !important; + color: @accent-color !important; + } + + .vertical-tabs__content:focus { + outline-color: @accent-color !important; + } + + .verified small { + color: @subtext0 !important; + } + + .sidebar-section .sidebar-section__user-gravatar:active, + .sidebar-section .sidebar-section__user-gravatar:focus { + outline-color: @accent-color !important; + } + + .sidebar-section__user-gravatar-text, + .sidebar-section__user-gravatar-text:hover { + background-image: linear-gradient( + 90deg, + @accent-color, + @accent-color + ) !important; + color: @accent-color !important; + } + + .sidebar-section__user-gravatar-text:active, + .sidebar-section__user-gravatar-text:focus { + outline-color: @accent-color !important; + } + + .sidebar-section { + border-bottom-color: @surface0; + } + + .status-badge { + background-color: @crust !important; + border-color: @mantle !important; + } + + .status-badge span { + color: @base !important; + text-decoration: none !important; + } + + .status-badge:active, + .status-badge:focus { + outline-color: @mantle !important; + } + + .status-badge::before { + color: @base !important; + border-right-color: @mantle !important; + } + + .status-badge--good { + background-color: @green !important; + color: @base !important; + } + + .status-badge--warn { + background-color: @yellow !important; + } + + .status-badge--bad { + background-color: @red !important; + color: @base !important; + } + + .viewport-section__rule { + background-color: @base !important; + } + + .viewport-section--dark { + background-color: @base !important; + color: @text !important; + } + + .viewport-section--ee .viewport-section__heading { + background-color: @base !important; + color: @accent-color !important; + } + + .viewport-section--ee + .viewport-section__video + .viewport-section__video-container { + border-color: @crust !important; + outline-color: invisible !important; + } + + .form-errors, + .form-errors li::before { + color: @red !important; + } + + .form-errors .form-error--valid, + .form-errors .form-error--valid::before { + color: @green !important; + } + + .breadcrumbs__breadcrumb { + color: @text !important; + } + + .breadcrumbs__breadcrumb:first-child { + color: @text !important; + } + + .breadcrumbs__breadcrumb:not(:last-child)::after { + color: @text !important; + } + + .horizontal-menu__link--with-icon:hover .fa, + .horizontal-menu__link--with-icon:hover .user-image { + opacity: 100% !important; + } + + .release__line { + @svg: escape( + '' + ); + + background-image: url("data:image/svg+xml;utf8,@{svg}") !important; + } + + .release__node[src*="white"] { + background-color: @base !important; + } + + .release__card { + background-color: @crust !important; + border-color: @surface0 !important; + color: @text !important; + } + + .release__version-date { + color: @subtext0 !important; + } + + .release--current { + background-color: @mantle !important; + border-color: @surface0 !important; + } + + .release { + border-left-color: @mantle !important; + } + + .checkbox-tree li { + &::before, + &::after { + border-color: @surface2; + } + } + + .filter-badge { + background-color: @accent-color; + + &, + .filter-badge__remove-button, + .filter-badge__icon { + color: @crust; + } + .filter-badge__remove-button { + border-left-color: if( + @lookup = latte, + lighten(@accent-color, 10%), + darken(@accent-color, 5%) + ); + + &:hover { + background-color: darken(@accent-color, 10%); + } + } + } + + @media (min-width: 801px) { + .package-snippet, + .package-snippet:hover { + @svg: escape( + '' + ); + + background-image: url("data:image/svg+xml;utf8,@{svg}") !important; + } + } + + .site-header__logo img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .about-pypi__logo img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .-js-white-cube, + .release__node[src*="white"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .release__node[src*="blue"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + background-color: @mantle !important; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/pythonanywhere/catppuccin.user.css b/styles/pythonanywhere/catppuccin.user.css index e0ae0ecd2d..bd729b34e4 100644 --- a/styles/pythonanywhere/catppuccin.user.css +++ b/styles/pythonanywhere/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name PythonAnywhere Catppuccin +@name PythonAnywhere Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/pythonanywhere @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pythonanywhere -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pythonanywhere/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pythonanywhere/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apythonanywhere @description Soothing pastel theme for PythonAnywhere @author Catppuccin @@ -13,1469 +13,4 @@ @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('www.pythonanywhere.com'), domain('eu.pythonanywhere.com'), domain('blog.pythonanywhere.com') { - @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); - - @import (css) - url("https://chroma.catppuccin.com/@{lightFlavor}-chroma-style.css") - (prefers-color-scheme: light); - @import (css) - url("https://chroma.catppuccin.com/@{darkFlavor}-chroma-style.css") - (prefers-color-scheme: dark); - - @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]; - @red-filter: @catppuccin[@@lookup][@red-filter]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @green-filter: @catppuccin[@@lookup][@green-filter]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @text-filter: @catppuccin[@@lookup][@text-filter]; - @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]; - - --ctp-rosewater: @rosewater; - --ctp-flamingo: @flamingo; - --ctp-pink: @pink; - --ctp-mauve: @mauve; - --ctp-red: @red; - --ctp-maroon: @maroon; - --ctp-peach: @peach; - --ctp-yellow: @yellow; - --ctp-green: @green; - --ctp-teal: @teal; - --ctp-sky: @sky; - --ctp-sapphire: @sapphire; - --ctp-blue: @blue; - --ctp-lavender: @lavender; - --ctp-text: @text; - --ctp-subtext1: @subtext1; - --ctp-subtext0: @subtext0; - --ctp-overlay2: @overlay2; - --ctp-overlay1: @overlay1; - --ctp-overlay0: @overlay0; - --ctp-surface2: @surface2; - --ctp-surface1: @surface1; - --ctp-surface0: @surface0; - --ctp-base: @base; - --ctp-mantle: @mantle; - --ctp-crust: @crust; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0; - } - } - - /* Ace file editor */ - .ace_editor { - background-color: @crust; - color: @text; - - .ace_gutter, - .ace_gutter-cell { - background: @mantle; - color: @overlay1; - } - .ace_print-margin { - background: @mantle; - } - - .ace_marker-layer { - .ace_active-line { - background-color: fade(@yellow, 20%); - } - .highlight-line-error { - background-color: fade(@red, 20%); - } - .ace_bracket { - border-color: @overlay1; - } - } - - .ace_doctype { - color: @mauve; - } - .ace_cursor, - .ace_xml.ace_text { - color: @text; - } - - .ace_heading { - &.ace_1, - &.ace_1 + .ace_heading { - color: @red; - } - &.ace_2, - &.ace_2 + .ace_heading { - color: @peach; - } - &.ace_3, - &.ace_3 + .ace_heading { - color: @yellow; - } - &.ace_4, - &.ace_4 + .ace_heading { - color: @green; - } - &.ace_5, - &.ace_5 + .ace_heading { - color: @blue; - } - &.ace_6, - &.ace_6 + .ace_heading { - color: @mauve; - } - } - - .ace_list { - color: @text; - &.ace_markup { - color: @sky; - } - } - - .ace_marker-layer .ace_selection { - background: fade(@accent-color, 30%); - } - .ace_fold { - background-color: @surface0; - border-color: @surface1; - } - .ace_constant.ace_language, - .ace_keyword, - .ace_meta { - color: @mauve; - } - .ace_xml, - .ace_support.ace_class, - .ace_support.ace_type { - color: @yellow; - } - .ace_line .ace_identifier:not(:first-of-type), - .ace_entity.ace_name.ace_function, - .ace_constant { - color: @blue; - } - .ace_paren, - .ace_variable.ace_language { - color: @red; - } - .ace_constant.ace_numeric { - color: @peach; - } - .ace_entity.ace_other.ace_attribute-name, - .ace_support.ace_constant, - .ace_support.ace_function { - color: @teal; - } - .ace_entity.ace_name.ace_tag, - .ace_variable { - color: @blue; - } - .ace_storage { - color: @peach; - } - .ace_string { - color: @green; - } - .ace_comment { - color: @overlay2; - } - .ace_indent-guide { - @svg: escape( - '' - ); - - background-image: url("data:image/svg+xml;utf8,@{svg}"); - } - } - - .ace_tooltip { - background-color: @crust; - color: @text; - border-color: @surface0; - } - - #ace_settingsmenu { - background-color: @mantle; - box-shadow: none; - color: @subtext0; - } - - #kbshortcutmenu { - background-color: @mantle; - box-shadow: none; - - .ace_optionsMenuEntry { - &:hover, - &:focus { - background-color: @base; - } - } - - &, - .ace_optionsMenuCommand { - color: @subtext0; - } - - .ace_optionsMenuKey { - color: @accent-color; - } - } - - /* Console */ - - x-screen { - background-color: @base !important; - color: @text !important; - } - - .cursor-node { - border-color: @accent-color !important; - &[focus="true"] { - background-color: @accent-color !important; - } - } - - /* $ prompt character */ - [style*="color: rgb(0, 186, 19);"] { - color: @green !important; - } - - /* ANSI colors */ - x-row span { - /* Black & Bright Black */ - &[style^="color: rgb(0, 0, 0);"] { - color: if(@lookup = latte, @subtext1, @surface1) !important; - } - &[style*="background-color: rgb(0, 0, 0);"] { - background-color: if(@lookup = latte, @subtext1, @surface1) !important; - } - - &[style^="color: rgb(85, 87, 83);"] { - color: if(@lookup = latte, @subtext1, @surface2) !important; - } - &[style*="background-color: rgb(85, 87, 83);"] { - background-color: if(@lookup = latte, @subtext1, @surface2) !important; - } - - /* Red and Bright Red */ - &[style^="color: rgb(204, 0, 0);"], - &[style^="color: rgb(239, 41, 41);"] { - color: @red !important; - } - &[style*="background-color: rgb(204, 0, 0);"], - &[style*="background-color: rgb(239, 41, 41);"] { - background-color: @red !important; - } - /* Dim Red */ - &[style^="color: rgb(136, 0, 0);"] { - color: fade(@red, 80%) !important; - } - - /* Green and Bright Green */ - &[style^="color: rgb(78, 154, 6);"], - &[style^="color: rgb(0, 186, 19);"] { - color: @green !important; - } - &[style*="background-color: rgb(78, 154, 6);"], - &[style*="background-color: rgb(0, 186, 19);"] { - background-color: @green !important; - } - /* Dim Green */ - &[style^="color: rgb(52, 103, 4);"] { - color: fade(@green, 80%) !important; - } - - /* Yellow and Bright Yellow */ - &[style^="color: rgb(196, 160, 0);"], - &[style^="color: rgb(252, 233, 79);"] { - color: @yellow !important; - } - &[style*="background-color: rgb(196, 160, 0);"], - &[style*="background-color: rgb(252, 233, 79);"] { - background-color: @yellow !important; - } - /* Dim Yellow */ - &[style^="color: rgb(131, 107, 0);"] { - color: fade(@yellow, 80%) !important; - } - - /* Blue and Bright Blue */ - &[style^="color: rgb(52, 101, 164);"], - &[style^="color: rgb(114, 159, 207);"] { - color: @blue !important; - } - &[style*="background-color: rgb(52, 101, 164);"], - &[style*="background-color: rgb(114, 159, 207);"] { - background-color: @blue !important; - } - /* Dim Blue */ - &[style^="color: rgb(35, 67, 109);"] { - color: fade(@blue, 80%) !important; - } - - /* Pink and Bright Pink */ - &[style^="color: rgb(117, 80, 123);"], - &[style^="color: rgb(242, 0, 203);"] { - color: @pink !important; - } - &[style*="background-color: rgb(117, 80, 123);"], - &[style*="background-color: rgb(242, 0, 203);"] { - background-color: @pink !important; - } - /* Dim Pink */ - &[style^="color: rgb(78, 53, 82);"] { - color: fade(@pink, 80%) !important; - } - - /* Teal and Bright Teal */ - &[style^="color: rgb(6, 152, 154);"], - &[style^="color: rgb(0, 181, 189);"] { - color: @teal !important; - } - &[style*="background-color: rgb(6, 152, 154);"], - &[style*="background-color: rgb(0, 181, 189);"] { - background-color: @teal !important; - } - /* Dim Teal */ - &[style^="color: rgb(4, 101, 103);"] { - color: fade(@teal, 80%) !important; - } - - /* White */ - &[style^="color: rgb(211, 215, 207);"] { - color: if(@lookup = latte, @surface2, @subtext1) !important; - } - &[style*="background-color: rgb(211, 215, 207);"] { - background-color: if(@lookup = latte, @surface2, @subtext1) !important; - } - /* Bright White */ - &[style^="color: rgb(238, 238, 236);"] { - color: if(@lookup = latte, @surface1, @subtext0) !important; - } - &[style*="background-color: rgb(238, 238, 236);"] { - background-color: if(@lookup = latte, @surface1, @subtext0) !important; - } - /* Dim White */ - &[style^="color: rgb(141, 143, 138);"] { - color: fade(if(@lookup = latte, @surface2, @subtext1), 80%) !important; - } - } - - #terminal div { - &[style*="color: rgb(16, 16, 16);"] { - color: @text !important; - } - - &[style*="background-color: rgb(240, 240, 240);"] { - background-color: @crust !important; - } - } - - body, - .dark { - background-color: @base; - color: @text; - } - - a { - &, - &:hover, - &:focus { - color: @accent-color; - } - } - - hr, - pre { - border-color: @surface0; - } - - small, - .small { - color: @subtext0; - } - - input, - button:not(.close, [class*="btn"], [data-toggle="dropdown"]) { - background-color: @crust; - border-color: @surface0; - - &:hover, - &:focus { - background-color: @mantle; - } - - i.glyphicon { - pointer-events: none; - } - } - - blockquote { - border-color: @surface0; - - footer, - small, - .small { - color: @subtext0; - } - } - - .footer p { - color: @text; - } - - .gsc-modal-background-image { - background-color: @base; - } - - .gsc-results-wrapper-overlay { - background-color: @mantle; - color: @subtext0; - } - - input.gsc-input, - .gsc-input-box, - .gsc-input-box-hover, - .gsc-input-box-focus { - border-color: @surface0; - } - - .gsc-completion-container { - background-color: @crust; - border-color: @surface0; - } - - .gsc-completion-selected { - background-color: @mantle; - } - - input.gsc-input { - background-color: @mantle; - } - - .gsc-input-box, - .gsc-results { - background-color: @mantle; - } - - .gsc-option-menu-item-highlighted { - background-color: @base; - color: @text; - } - - .gsc-selected-option-container { - background-color: @crust; - color: @text; - border-color: @surface0; - } - - .gsc-webResult.gsc-result { - border-color: @surface0; - background-color: @mantle; - } - - .gsc-search-button-v2 { - &, - &:hover, - &:focus { - border-color: @surface0; - background-color: @crust; - color: @text; - } - svg { - fill: @text; - } - } - - .gsc-result-info, - .gsc-orderby-label, - .gsc-option-menu-item { - color: @subtext0; - } - - .gcsc-find-more-on-google { - color: @accent-color; - } - - .gcsc-find-more-on-google-magnifier { - fill: @accent-color; - } - - .gsc-results .gsc-cursor-box .gsc-cursor-page { - color: @text; - background-color: unset; - } - - .gsc-control-cse .gsc-option-menu { - background-color: @crust; - } - - .gs-webResult div.gs-visibleUrl { - color: @subtext0; - } - - .gs-webResult.gs-result a.gs-title { - &, - &:hover, - &:focus, - b { - color: @accent-color; - } - } - - .gs-webResult .gs-snippet { - color: @text; - } - - .badge { - background-color: @crust; - - &:hover, - &:focus { - background-color: @mantle; - } - } - - .dashboard-panel__headline a { - text-decoration-color: @accent-color; - } - - .dashboard-columns { - border-top-color: @surface0; - - &::before { - background-color: @surface0; - } - - .row > div { - border-color: @surface0; - } - } - - .pagination > li { - > span, - > a { - background-color: @crust; - border-color: @surface0; - color: @text; - - &:hover, - &:focus { - background-color: @mantle; - } - } - } - - textarea { - background-color: @crust; - outline-color: @surface0; - border-color: none; - outline-style: solid; - - &:focus { - outline-color: @accent-color; - } - } - - .jumbotron { - background-color: @mantle; - } - - .jumbotron > hr { - border-top-color: @mantle; - } - - .top-nav { - background: @crust; - - li a, - li button.btn-link { - color: @text; - } - - button:focus, - a:focus, - li a:focus { - background-color: @crust; - } - } - - .err { - border-color: @red; - } - - .btn-success, - .open > .dropdown-toggle.btn-success { - &, - &:focus, - &.focus, - &:active, - &.active, - &:hover { - color: @mantle; - background-color: @green; - border-color: @surface0; - } - } - - .btn-success .badge { - color: @green; - background-color: @crust; - } - - tr.hoverable:hover { - background-color: @mantle; - } - - td { - &.file_size, - &.file_timestamp { - color: @subtext0; - } - } - - span[style="color: blue;"] { - color: @text !important; - } - - [style="color: #888"], - [style="color: #444"] { - color: @text !important; - } - - .btn-info, - .btn-primary, - .open > .dropdown-toggle.btn-info, - .open > .dropdown-toggle.btn-primary { - &, - &:focus, - &.focus, - &:active, - &.active, - &:hover { - color: @base; - background-color: @accent-color; - border-color: @surface0; - } - } - - .label-primary { - background-color: @accent-color; - color: @crust; - } - - .label-info { - background-color: @accent-color; - color: @crust; - } - - .label-danger { - background-color: @red; - color: @crust; - } - - .btn-danger { - background-color: @red; - border-color: @red; - color: @crust; - - &:hover, - &:focus { - background-color: darken(@red, 5%); - color: @mantle; - } - } - - .btn-warning { - background-color: @yellow; - border-color: @yellow; - color: @mantle; - - &:hover, - &:focus { - background-color: darken(@yellow, 5%); - color: @mantle; - } - } - - .edit_value { - color: @accent-color; - } - - .btn-info .badge, - .btn-primary .badge { - color: @accent-color; - background-color: @crust; - } - - .alert-success, - .alert-info, - .alert-warning, - .alert-danger { - border-color: @surface0; - - &, - small { - color: @base; - } - - button { - background-color: unset; - } - - hr { - border-top-color: @surface0; - } - - a { - color: @base; - text-decoration: underline; - } - - .close { - &, - &:hover, - &:focus { - color: @crust; - } - } - } - - .alert-success { - background-color: @green; - } - - .alert-info { - background-color: @accent-color; - } - - .alert-warning { - background-color: @yellow; - } - - .alert-danger { - background-color: @red; - } - - .close { - opacity: 100%; - text-shadow: none; - - &, - &:hover, - &:focus { - color: @text; - background: none; - } - } - - .form-control { - color: @text; - background-color: @crust; - border-color: @surface0; - box-shadow: inset 0 1px 1px @surface0; - - &:focus { - border-color: @surface0; - box-shadow: inset 0 1px 1px @surface0; - } - - &[disabled], - &[readonly] { - background-color: @mantle; - } - } - - .help-block { - color: @text; - } - - .pricing_table ul { - background-color: @base; - } - - .pricing_table ul li { - background: @mantle; - } - - .pricing_table ul li:first-child, - .account_type_header { - color: @text; - } - - .sub_and_dark_blue, - .scheduled_task:not(.enabled) { - color: @subtext0; - } - - #id_initializing_mysql_spinner { - background-color: @crust !important; - color: @text; - } - - .directory_listing_table i.pale { - color: @subtext0; - opacity: 100%; - } - - .pricing_table ul.Free li { - background-color: @mantle; - } - - .col-md-12 { - div[style*="background-color"] { - background-color: @mantle !important; - } - - h1[style*="color"] { - color: @text !important; - } - } - - .table { - background-color: @base; - - th, - td { - border-top-color: @surface0; - } - - > thead th { - border-bottom-color: @surface0; - } - - .success, - .info, - .warning, - .danger { - background-color: @base; - - &, - td, - th { - &, - &:hover { - background-color: @base; - } - } - } - - td.active, - th.active, - &.active td, - &.active th { - background-color: @mantle; - } - } - - .table-bordered { - border-color: @surface0; - - th, - td { - border-color: @surface0; - } - } - - .table-striped > tbody > tr:nth-of-type(odd), - .table-hover > tbody > tr:hover { - background-color: @mantle; - } - - .highlighted_feature_text { - color: @green; - } - - .text-muted { - color: @subtext0; - } - - .modal-header { - border-bottom-color: @surface0; - } - - .modal-content { - background-color: @base; - border-color: @surface0; - box-shadow: 0 3px 9px @crust; - } - - .modal-backdrop { - background-color: @crust; - } - - .directories_listing_group h4, - .page-header, - .gsc-above-wrapper-area, - .nav-tabs, - .property_group_header { - border-bottom-color: @surface0; - } - - .nav-tabs a { - &:hover, - &:focus { - border-color: @surface0 !important; - } - } - - .popover { - background-color: @mantle; - border-color: @surface0; - box-shadow: none; - - &.top > .arrow { - &, - &::after { - border-top-color: @mantle; - } - } - - &.right > .arrow { - &, - &::after { - border-right-color: @mantle; - } - } - - &.left > .arrow { - &, - &::after { - border-left-color: @mantle; - } - } - - &.bottom > .arrow { - &, - &::after { - border-bottom-color: @mantle; - } - } - } - - .popover-title { - background-color: @mantle; - border-bottom-color: @surface0; - } - - .modal-footer { - border-top-color: @surface0; - } - - .unsorted { - color: @subtext0; - } - - .sorted-up, - .sorted-down { - color: @accent-color; - } - - .ui-widget-content { - border-color: @surface0; - background: @mantle; - color: @text; - } - - .ui-state-default { - border-color: @surface0; - background: @surface1; - color: @text; - } - - .bootstrap-switch { - border-color: @surface0; - - &.bootstrap-switch-focused { - border-color: @surface0; - box-shadow: none; - } - - .bootstrap-switch-label { - color: @text; - background-color: @surface0; - } - - .bootstrap-switch-handle-off, - .bootstrap-switch-handle-on { - color: @text; - background-color: @crust; - - &.bootstrap-switch-success, - &.bootstrap-switch-warning, - &.bootstrap-switch-danger, - &.bootstrap-switch-primary { - color: @base; - } - - &.bootstrap-switch-success { - background-color: @green; - } - - &.bootstrap-switch-warning { - background-color: @yellow; - } - - &.bootstrap-switch-danger { - background-color: @red; - } - - &.bootstrap-switch-primary { - background-color: @accent-color; - } - } - } - - .tooltip-inner { - color: @text; - background-color: @crust; - } - - .tooltip { - &.right .tooltip-arrow { - border-right-color: @crust; - } - - &.left .tooltip-arrow { - border-left-color: @crust; - } - - &.top, - &.top-left, - &.top-right { - .tooltip-arrow { - border-top-color: @crust; - } - } - - &.bottom, - &.bottom-left, - &.bottom-right { - .tooltip-arrow { - border-bottom-color: @crust; - } - } - } - - .has-error { - .help-block, - .control-label, - .radio, - .checkbox, - .radio-inline, - .checkbox-inline, - label { - color: @red; - } - } - - .success-stories-container { - background-color: @mantle; - color: @text; - - h3 { - color: @text; - } - } - - .gsc-control-cse { - border-color: @surface0; - background-color: @base; - } - - .post_metadata { - color: @subtext0; - } - - .ui-widget-header { - background-color: @base; - border-color: @surface0; - color: @text; - } - - .fullscreen-main-navbar { - background-color: @mantle; - } - - .dropdown-menu { - background-color: @mantle; - border-color: @surface0; - box-shadow: none; - - > li > a { - color: @text; - - &:hover, - &:focus { - background-color: @base; - } - } - } - - .fullscreen-main-navbar button.btn-link { - &:hover, - &:focus { - background-color: @base; - } - } - - .navbar-default .btn-link { - &, - &:hover, - &:focus { - color: @text; - } - } - - .btn.btn-default { - border-color: @accent-color; - color: @accent-color; - background-color: @base; - - &:hover, - &:focus { - background-color: @surface0; - } - } - - .well { - background-color: @mantle; - border-color: @surface0; - } - - .icon-bar { - background-color: @text; - } - - .nav-tabs > li, - .nav-pills > li { - > a { - border-color: @surface0; - - &, - &:hover, - &:focus { - color: @accent-color; - } - } - - &.active > a { - &, - &:focus { - background-color: @mantle; - } - - &:hover, - &:focus { - background-color: @crust; - } - } - - &:not(.active) > a { - &:hover, - &:focus { - background-color: @mantle; - } - } - } - - .ui-state-highlight { - border-color: @accent-color; - background: @accent-color; - color: @base; - } - - .primary-navbar { - a, - form, - .active { - background-color: @base; - } - - form .btn-link { - color: @accent-color; - } - - .active a { - color: @text; - } - } - - .post, - .topic { - background-color: @mantle; - border-color: @surface0; - } - - .editable-click { - &, - &:hover, - &:focus { - border-bottom-color: @subtext0; - } - } - - [style*="background: whitesmoke;"] { - background-color: @mantle !important; - } - - @media (min-width: 768px) { - .modal-content { - box-shadow: 0 5px 15px @crust; - } - } - - @media screen and (max-width: 767px) { - .table-responsive { - border-color: @surface0; - } - } - - #id_main_screenshot { - box-shadow: 12px 12px 29px @surface1; - } - - #id_hosting_details, - #id_education_details { - &, - h1, - h2, - h3 { - background-color: @mantle; - color: @text; - } - - .btn { - color: @crust !important; - } - - a { - color: @accent-color; - } - } - - #id_develop_anywhere_details { - background-color: @base; - } - - #id_support_details { - background-color: @base; - - a { - color: @accent-color !important; - } - } - - #id_company_info_strip { - color: @text; - } - - .console_table .info_tooltip { - color: @accent-color; - } - - #id_console_name { - color: @text; - } - - .beginner_pane, - .pricing_pane { - background-color: @mantle; - } - - #id_error_message, - #id_login_error { - color: @red; - } - - .post_preview { - background-color: @base; - - h3 { - color: @text; - } - } - - .teacher-navbar { - background-color: @mantle; - color: @text; - } - - .nav > li > a:focus { - background: none; - } - - /* blog */ - - .site-header { - background-color: @crust; - } - - h1, - h2, - h3, - h4, - code { - color: @text !important; - } - - button code { - background: none !important; - color: inherit !important; - } - - p, - .tipue_search_content_text, - .tipue_search_content_bold, - #tipue_search_error, - #tipue_search_results_count, - .post-meta { - color: @subtext0; - } - - .navbar-default .navbar-toggle { - &:hover, - &:focus { - background-color: @mantle; - } - } - - button:not(.btn-link, .btn, [data-toggle="dropdown"]), - .pagination a, - #tipue_search_foot_boxes li.current, - #tipue_search_foot_boxes li a { - background-color: @accent-color; - color: @crust; - border-color: @accent-color; - } - - button:disabled, - .pagination .disabled { - background-color: darken(@accent-color, 5%); - border-color: darken(@accent-color, 5%); - } - - #tipue_search_input, - form.navbar-search { - background-color: @mantle; - color: @text; - } - - svg { - fill: @subtext0; - } - - .fa-at, - .fa-twitter, - .fa-rss { - filter: @text-filter; - } - - .hide_search_icon path { - stroke: @subtext0; - } - - footer, - footer .wrap { - background-color: @crust; - color: @text; - border-color: @crust; - } - - .pagination a, - #tipue_search_foot_boxes li.current, - #tipue_search_foot_boxes li a { - background-color: @accent-color; - color: @crust; - border-color: @accent-color; - } - - img[src*="ssl.gstatic.com/ui/v1/disclosure/small-grey-disclosure-arrow-down.png"], - img[src*="/static/anywhere/images/staff.png"], - img[src*="/static/glyphicons/glyphicons_"], - img[src="/static/anywhere/images/PA-logo-snake-only.svg"], - .testimonial-content, - .quickstart_logo:not([src$="/django-logo-negative-small.png"]), - .ui-icon { - filter: @text-filter; - } - - img[src*="/static/anywhere/images/cross.png"] { - filter: @red-filter; - } - - img[src*="/static/anywhere/images/tick.png"] { - filter: @green-filter; - } - - .quickstart_logo[src$="/django-logo-negative-small.png"] { - // Original image has background - can't filter - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - img[src$="/images/PA-logo.svg"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml;utf8,@{svg}"); - } - } -} - -/* prettier-ignore */ -@catppuccin: { - @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @red-filter: brightness(0) saturate(100%) invert(25%) sepia(97%) saturate(4962%) hue-rotate(337deg) brightness(81%) contrast(106%); @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @green-filter: brightness(0) saturate(100%) invert(47%) sepia(78%) saturate(440%) hue-rotate(63deg) brightness(94%) contrast(93%); @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @text-filter: brightness(0) saturate(100%) invert(30%) sepia(7%) saturate(1674%) hue-rotate(196deg) brightness(97%) contrast(91%); @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; @red-filter: brightness(0) saturate(100%) invert(68%) sepia(21%) saturate(4617%) hue-rotate(312deg) brightness(110%) contrast(81%); @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @green-filter: brightness(0) saturate(100%) invert(84%) sepia(22%) saturate(540%) hue-rotate(51deg) brightness(90%) contrast(92%); @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @text-filter: brightness(0) saturate(100%) invert(74%) sepia(16%) saturate(454%) hue-rotate(192deg) brightness(110%) contrast(92%); @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; @red-filter: brightness(0) saturate(100%) invert(61%) sepia(16%) saturate(1882%) hue-rotate(306deg) brightness(111%) contrast(86%); @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @green-filter: brightness(0) saturate(100%) invert(83%) sepia(35%) saturate(356%) hue-rotate(57deg) brightness(94%) contrast(88%); @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @text-filter: brightness(0) saturate(100%) invert(82%) sepia(77%) saturate(662%) hue-rotate(181deg) brightness(103%) contrast(92%); @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; @red-filter: brightness(0) saturate(100%) invert(58%) sepia(60%) saturate(462%) hue-rotate(299deg) brightness(107%) contrast(91%); @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @green-filter: brightness(0) saturate(100%) invert(95%) sepia(57%) saturate(525%) hue-rotate(47deg) brightness(93%) contrast(91%); @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @text-filter: brightness(0) saturate(100%) invert(88%) sepia(10%) saturate(1247%) hue-rotate(191deg) brightness(99%) contrast(93%); @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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/pythonanywhere/catppuccin.user.less b/styles/pythonanywhere/catppuccin.user.less new file mode 100644 index 0000000000..49975a8775 --- /dev/null +++ b/styles/pythonanywhere/catppuccin.user.less @@ -0,0 +1,1481 @@ +/* ==UserStyle== +@name PythonAnywhere Catppuccin +@namespace github.com/catppuccin/userstyles/styles/pythonanywhere +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pythonanywhere +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pythonanywhere/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apythonanywhere +@description Soothing pastel theme for PythonAnywhere +@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("www.pythonanywhere.com"), + domain("eu.pythonanywhere.com"), + domain("blog.pythonanywhere.com") { + @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); + + @import (css) + url("https://chroma.catppuccin.com/@{lightFlavor}-chroma-style.css") + (prefers-color-scheme: light); + @import (css) + url("https://chroma.catppuccin.com/@{darkFlavor}-chroma-style.css") + (prefers-color-scheme: dark); + + @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]; + @red-filter: @catppuccin[@@lookup][@red-filter]; + @maroon: @catppuccin[@@lookup][@maroon]; + @peach: @catppuccin[@@lookup][@peach]; + @yellow: @catppuccin[@@lookup][@yellow]; + @green: @catppuccin[@@lookup][@green]; + @green-filter: @catppuccin[@@lookup][@green-filter]; + @teal: @catppuccin[@@lookup][@teal]; + @sky: @catppuccin[@@lookup][@sky]; + @sapphire: @catppuccin[@@lookup][@sapphire]; + @blue: @catppuccin[@@lookup][@blue]; + @lavender: @catppuccin[@@lookup][@lavender]; + @text: @catppuccin[@@lookup][@text]; + @text-filter: @catppuccin[@@lookup][@text-filter]; + @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]; + + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0; + } + } + + /* Ace file editor */ + .ace_editor { + background-color: @crust; + color: @text; + + .ace_gutter, + .ace_gutter-cell { + background: @mantle; + color: @overlay1; + } + .ace_print-margin { + background: @mantle; + } + + .ace_marker-layer { + .ace_active-line { + background-color: fade(@yellow, 20%); + } + .highlight-line-error { + background-color: fade(@red, 20%); + } + .ace_bracket { + border-color: @overlay1; + } + } + + .ace_doctype { + color: @mauve; + } + .ace_cursor, + .ace_xml.ace_text { + color: @text; + } + + .ace_heading { + &.ace_1, + &.ace_1 + .ace_heading { + color: @red; + } + &.ace_2, + &.ace_2 + .ace_heading { + color: @peach; + } + &.ace_3, + &.ace_3 + .ace_heading { + color: @yellow; + } + &.ace_4, + &.ace_4 + .ace_heading { + color: @green; + } + &.ace_5, + &.ace_5 + .ace_heading { + color: @blue; + } + &.ace_6, + &.ace_6 + .ace_heading { + color: @mauve; + } + } + + .ace_list { + color: @text; + &.ace_markup { + color: @sky; + } + } + + .ace_marker-layer .ace_selection { + background: fade(@accent-color, 30%); + } + .ace_fold { + background-color: @surface0; + border-color: @surface1; + } + .ace_constant.ace_language, + .ace_keyword, + .ace_meta { + color: @mauve; + } + .ace_xml, + .ace_support.ace_class, + .ace_support.ace_type { + color: @yellow; + } + .ace_line .ace_identifier:not(:first-of-type), + .ace_entity.ace_name.ace_function, + .ace_constant { + color: @blue; + } + .ace_paren, + .ace_variable.ace_language { + color: @red; + } + .ace_constant.ace_numeric { + color: @peach; + } + .ace_entity.ace_other.ace_attribute-name, + .ace_support.ace_constant, + .ace_support.ace_function { + color: @teal; + } + .ace_entity.ace_name.ace_tag, + .ace_variable { + color: @blue; + } + .ace_storage { + color: @peach; + } + .ace_string { + color: @green; + } + .ace_comment { + color: @overlay2; + } + .ace_indent-guide { + @svg: escape( + '' + ); + + background-image: url("data:image/svg+xml;utf8,@{svg}"); + } + } + + .ace_tooltip { + background-color: @crust; + color: @text; + border-color: @surface0; + } + + #ace_settingsmenu { + background-color: @mantle; + box-shadow: none; + color: @subtext0; + } + + #kbshortcutmenu { + background-color: @mantle; + box-shadow: none; + + .ace_optionsMenuEntry { + &:hover, + &:focus { + background-color: @base; + } + } + + &, + .ace_optionsMenuCommand { + color: @subtext0; + } + + .ace_optionsMenuKey { + color: @accent-color; + } + } + + /* Console */ + + x-screen { + background-color: @base !important; + color: @text !important; + } + + .cursor-node { + border-color: @accent-color !important; + &[focus="true"] { + background-color: @accent-color !important; + } + } + + /* $ prompt character */ + [style*="color: rgb(0, 186, 19);"] { + color: @green !important; + } + + /* ANSI colors */ + x-row span { + /* Black & Bright Black */ + &[style^="color: rgb(0, 0, 0);"] { + color: if(@lookup = latte, @subtext1, @surface1) !important; + } + &[style*="background-color: rgb(0, 0, 0);"] { + background-color: if(@lookup = latte, @subtext1, @surface1) !important; + } + + &[style^="color: rgb(85, 87, 83);"] { + color: if(@lookup = latte, @subtext1, @surface2) !important; + } + &[style*="background-color: rgb(85, 87, 83);"] { + background-color: if(@lookup = latte, @subtext1, @surface2) !important; + } + + /* Red and Bright Red */ + &[style^="color: rgb(204, 0, 0);"], + &[style^="color: rgb(239, 41, 41);"] { + color: @red !important; + } + &[style*="background-color: rgb(204, 0, 0);"], + &[style*="background-color: rgb(239, 41, 41);"] { + background-color: @red !important; + } + /* Dim Red */ + &[style^="color: rgb(136, 0, 0);"] { + color: fade(@red, 80%) !important; + } + + /* Green and Bright Green */ + &[style^="color: rgb(78, 154, 6);"], + &[style^="color: rgb(0, 186, 19);"] { + color: @green !important; + } + &[style*="background-color: rgb(78, 154, 6);"], + &[style*="background-color: rgb(0, 186, 19);"] { + background-color: @green !important; + } + /* Dim Green */ + &[style^="color: rgb(52, 103, 4);"] { + color: fade(@green, 80%) !important; + } + + /* Yellow and Bright Yellow */ + &[style^="color: rgb(196, 160, 0);"], + &[style^="color: rgb(252, 233, 79);"] { + color: @yellow !important; + } + &[style*="background-color: rgb(196, 160, 0);"], + &[style*="background-color: rgb(252, 233, 79);"] { + background-color: @yellow !important; + } + /* Dim Yellow */ + &[style^="color: rgb(131, 107, 0);"] { + color: fade(@yellow, 80%) !important; + } + + /* Blue and Bright Blue */ + &[style^="color: rgb(52, 101, 164);"], + &[style^="color: rgb(114, 159, 207);"] { + color: @blue !important; + } + &[style*="background-color: rgb(52, 101, 164);"], + &[style*="background-color: rgb(114, 159, 207);"] { + background-color: @blue !important; + } + /* Dim Blue */ + &[style^="color: rgb(35, 67, 109);"] { + color: fade(@blue, 80%) !important; + } + + /* Pink and Bright Pink */ + &[style^="color: rgb(117, 80, 123);"], + &[style^="color: rgb(242, 0, 203);"] { + color: @pink !important; + } + &[style*="background-color: rgb(117, 80, 123);"], + &[style*="background-color: rgb(242, 0, 203);"] { + background-color: @pink !important; + } + /* Dim Pink */ + &[style^="color: rgb(78, 53, 82);"] { + color: fade(@pink, 80%) !important; + } + + /* Teal and Bright Teal */ + &[style^="color: rgb(6, 152, 154);"], + &[style^="color: rgb(0, 181, 189);"] { + color: @teal !important; + } + &[style*="background-color: rgb(6, 152, 154);"], + &[style*="background-color: rgb(0, 181, 189);"] { + background-color: @teal !important; + } + /* Dim Teal */ + &[style^="color: rgb(4, 101, 103);"] { + color: fade(@teal, 80%) !important; + } + + /* White */ + &[style^="color: rgb(211, 215, 207);"] { + color: if(@lookup = latte, @surface2, @subtext1) !important; + } + &[style*="background-color: rgb(211, 215, 207);"] { + background-color: if(@lookup = latte, @surface2, @subtext1) !important; + } + /* Bright White */ + &[style^="color: rgb(238, 238, 236);"] { + color: if(@lookup = latte, @surface1, @subtext0) !important; + } + &[style*="background-color: rgb(238, 238, 236);"] { + background-color: if(@lookup = latte, @surface1, @subtext0) !important; + } + /* Dim White */ + &[style^="color: rgb(141, 143, 138);"] { + color: fade(if(@lookup = latte, @surface2, @subtext1), 80%) !important; + } + } + + #terminal div { + &[style*="color: rgb(16, 16, 16);"] { + color: @text !important; + } + + &[style*="background-color: rgb(240, 240, 240);"] { + background-color: @crust !important; + } + } + + body, + .dark { + background-color: @base; + color: @text; + } + + a { + &, + &:hover, + &:focus { + color: @accent-color; + } + } + + hr, + pre { + border-color: @surface0; + } + + small, + .small { + color: @subtext0; + } + + input, + button:not(.close, [class*="btn"], [data-toggle="dropdown"]) { + background-color: @crust; + border-color: @surface0; + + &:hover, + &:focus { + background-color: @mantle; + } + + i.glyphicon { + pointer-events: none; + } + } + + blockquote { + border-color: @surface0; + + footer, + small, + .small { + color: @subtext0; + } + } + + .footer p { + color: @text; + } + + .gsc-modal-background-image { + background-color: @base; + } + + .gsc-results-wrapper-overlay { + background-color: @mantle; + color: @subtext0; + } + + input.gsc-input, + .gsc-input-box, + .gsc-input-box-hover, + .gsc-input-box-focus { + border-color: @surface0; + } + + .gsc-completion-container { + background-color: @crust; + border-color: @surface0; + } + + .gsc-completion-selected { + background-color: @mantle; + } + + input.gsc-input { + background-color: @mantle; + } + + .gsc-input-box, + .gsc-results { + background-color: @mantle; + } + + .gsc-option-menu-item-highlighted { + background-color: @base; + color: @text; + } + + .gsc-selected-option-container { + background-color: @crust; + color: @text; + border-color: @surface0; + } + + .gsc-webResult.gsc-result { + border-color: @surface0; + background-color: @mantle; + } + + .gsc-search-button-v2 { + &, + &:hover, + &:focus { + border-color: @surface0; + background-color: @crust; + color: @text; + } + svg { + fill: @text; + } + } + + .gsc-result-info, + .gsc-orderby-label, + .gsc-option-menu-item { + color: @subtext0; + } + + .gcsc-find-more-on-google { + color: @accent-color; + } + + .gcsc-find-more-on-google-magnifier { + fill: @accent-color; + } + + .gsc-results .gsc-cursor-box .gsc-cursor-page { + color: @text; + background-color: unset; + } + + .gsc-control-cse .gsc-option-menu { + background-color: @crust; + } + + .gs-webResult div.gs-visibleUrl { + color: @subtext0; + } + + .gs-webResult.gs-result a.gs-title { + &, + &:hover, + &:focus, + b { + color: @accent-color; + } + } + + .gs-webResult .gs-snippet { + color: @text; + } + + .badge { + background-color: @crust; + + &:hover, + &:focus { + background-color: @mantle; + } + } + + .dashboard-panel__headline a { + text-decoration-color: @accent-color; + } + + .dashboard-columns { + border-top-color: @surface0; + + &::before { + background-color: @surface0; + } + + .row > div { + border-color: @surface0; + } + } + + .pagination > li { + > span, + > a { + background-color: @crust; + border-color: @surface0; + color: @text; + + &:hover, + &:focus { + background-color: @mantle; + } + } + } + + textarea { + background-color: @crust; + outline-color: @surface0; + border-color: none; + outline-style: solid; + + &:focus { + outline-color: @accent-color; + } + } + + .jumbotron { + background-color: @mantle; + } + + .jumbotron > hr { + border-top-color: @mantle; + } + + .top-nav { + background: @crust; + + li a, + li button.btn-link { + color: @text; + } + + button:focus, + a:focus, + li a:focus { + background-color: @crust; + } + } + + .err { + border-color: @red; + } + + .btn-success, + .open > .dropdown-toggle.btn-success { + &, + &:focus, + &.focus, + &:active, + &.active, + &:hover { + color: @mantle; + background-color: @green; + border-color: @surface0; + } + } + + .btn-success .badge { + color: @green; + background-color: @crust; + } + + tr.hoverable:hover { + background-color: @mantle; + } + + td { + &.file_size, + &.file_timestamp { + color: @subtext0; + } + } + + span[style="color: blue;"] { + color: @text !important; + } + + [style="color: #888"], + [style="color: #444"] { + color: @text !important; + } + + .btn-info, + .btn-primary, + .open > .dropdown-toggle.btn-info, + .open > .dropdown-toggle.btn-primary { + &, + &:focus, + &.focus, + &:active, + &.active, + &:hover { + color: @base; + background-color: @accent-color; + border-color: @surface0; + } + } + + .label-primary { + background-color: @accent-color; + color: @crust; + } + + .label-info { + background-color: @accent-color; + color: @crust; + } + + .label-danger { + background-color: @red; + color: @crust; + } + + .btn-danger { + background-color: @red; + border-color: @red; + color: @crust; + + &:hover, + &:focus { + background-color: darken(@red, 5%); + color: @mantle; + } + } + + .btn-warning { + background-color: @yellow; + border-color: @yellow; + color: @mantle; + + &:hover, + &:focus { + background-color: darken(@yellow, 5%); + color: @mantle; + } + } + + .edit_value { + color: @accent-color; + } + + .btn-info .badge, + .btn-primary .badge { + color: @accent-color; + background-color: @crust; + } + + .alert-success, + .alert-info, + .alert-warning, + .alert-danger { + border-color: @surface0; + + &, + small { + color: @base; + } + + button { + background-color: unset; + } + + hr { + border-top-color: @surface0; + } + + a { + color: @base; + text-decoration: underline; + } + + .close { + &, + &:hover, + &:focus { + color: @crust; + } + } + } + + .alert-success { + background-color: @green; + } + + .alert-info { + background-color: @accent-color; + } + + .alert-warning { + background-color: @yellow; + } + + .alert-danger { + background-color: @red; + } + + .close { + opacity: 100%; + text-shadow: none; + + &, + &:hover, + &:focus { + color: @text; + background: none; + } + } + + .form-control { + color: @text; + background-color: @crust; + border-color: @surface0; + box-shadow: inset 0 1px 1px @surface0; + + &:focus { + border-color: @surface0; + box-shadow: inset 0 1px 1px @surface0; + } + + &[disabled], + &[readonly] { + background-color: @mantle; + } + } + + .help-block { + color: @text; + } + + .pricing_table ul { + background-color: @base; + } + + .pricing_table ul li { + background: @mantle; + } + + .pricing_table ul li:first-child, + .account_type_header { + color: @text; + } + + .sub_and_dark_blue, + .scheduled_task:not(.enabled) { + color: @subtext0; + } + + #id_initializing_mysql_spinner { + background-color: @crust !important; + color: @text; + } + + .directory_listing_table i.pale { + color: @subtext0; + opacity: 100%; + } + + .pricing_table ul.Free li { + background-color: @mantle; + } + + .col-md-12 { + div[style*="background-color"] { + background-color: @mantle !important; + } + + h1[style*="color"] { + color: @text !important; + } + } + + .table { + background-color: @base; + + th, + td { + border-top-color: @surface0; + } + + > thead th { + border-bottom-color: @surface0; + } + + .success, + .info, + .warning, + .danger { + background-color: @base; + + &, + td, + th { + &, + &:hover { + background-color: @base; + } + } + } + + td.active, + th.active, + &.active td, + &.active th { + background-color: @mantle; + } + } + + .table-bordered { + border-color: @surface0; + + th, + td { + border-color: @surface0; + } + } + + .table-striped > tbody > tr:nth-of-type(odd), + .table-hover > tbody > tr:hover { + background-color: @mantle; + } + + .highlighted_feature_text { + color: @green; + } + + .text-muted { + color: @subtext0; + } + + .modal-header { + border-bottom-color: @surface0; + } + + .modal-content { + background-color: @base; + border-color: @surface0; + box-shadow: 0 3px 9px @crust; + } + + .modal-backdrop { + background-color: @crust; + } + + .directories_listing_group h4, + .page-header, + .gsc-above-wrapper-area, + .nav-tabs, + .property_group_header { + border-bottom-color: @surface0; + } + + .nav-tabs a { + &:hover, + &:focus { + border-color: @surface0 !important; + } + } + + .popover { + background-color: @mantle; + border-color: @surface0; + box-shadow: none; + + &.top > .arrow { + &, + &::after { + border-top-color: @mantle; + } + } + + &.right > .arrow { + &, + &::after { + border-right-color: @mantle; + } + } + + &.left > .arrow { + &, + &::after { + border-left-color: @mantle; + } + } + + &.bottom > .arrow { + &, + &::after { + border-bottom-color: @mantle; + } + } + } + + .popover-title { + background-color: @mantle; + border-bottom-color: @surface0; + } + + .modal-footer { + border-top-color: @surface0; + } + + .unsorted { + color: @subtext0; + } + + .sorted-up, + .sorted-down { + color: @accent-color; + } + + .ui-widget-content { + border-color: @surface0; + background: @mantle; + color: @text; + } + + .ui-state-default { + border-color: @surface0; + background: @surface1; + color: @text; + } + + .bootstrap-switch { + border-color: @surface0; + + &.bootstrap-switch-focused { + border-color: @surface0; + box-shadow: none; + } + + .bootstrap-switch-label { + color: @text; + background-color: @surface0; + } + + .bootstrap-switch-handle-off, + .bootstrap-switch-handle-on { + color: @text; + background-color: @crust; + + &.bootstrap-switch-success, + &.bootstrap-switch-warning, + &.bootstrap-switch-danger, + &.bootstrap-switch-primary { + color: @base; + } + + &.bootstrap-switch-success { + background-color: @green; + } + + &.bootstrap-switch-warning { + background-color: @yellow; + } + + &.bootstrap-switch-danger { + background-color: @red; + } + + &.bootstrap-switch-primary { + background-color: @accent-color; + } + } + } + + .tooltip-inner { + color: @text; + background-color: @crust; + } + + .tooltip { + &.right .tooltip-arrow { + border-right-color: @crust; + } + + &.left .tooltip-arrow { + border-left-color: @crust; + } + + &.top, + &.top-left, + &.top-right { + .tooltip-arrow { + border-top-color: @crust; + } + } + + &.bottom, + &.bottom-left, + &.bottom-right { + .tooltip-arrow { + border-bottom-color: @crust; + } + } + } + + .has-error { + .help-block, + .control-label, + .radio, + .checkbox, + .radio-inline, + .checkbox-inline, + label { + color: @red; + } + } + + .success-stories-container { + background-color: @mantle; + color: @text; + + h3 { + color: @text; + } + } + + .gsc-control-cse { + border-color: @surface0; + background-color: @base; + } + + .post_metadata { + color: @subtext0; + } + + .ui-widget-header { + background-color: @base; + border-color: @surface0; + color: @text; + } + + .fullscreen-main-navbar { + background-color: @mantle; + } + + .dropdown-menu { + background-color: @mantle; + border-color: @surface0; + box-shadow: none; + + > li > a { + color: @text; + + &:hover, + &:focus { + background-color: @base; + } + } + } + + .fullscreen-main-navbar button.btn-link { + &:hover, + &:focus { + background-color: @base; + } + } + + .navbar-default .btn-link { + &, + &:hover, + &:focus { + color: @text; + } + } + + .btn.btn-default { + border-color: @accent-color; + color: @accent-color; + background-color: @base; + + &:hover, + &:focus { + background-color: @surface0; + } + } + + .well { + background-color: @mantle; + border-color: @surface0; + } + + .icon-bar { + background-color: @text; + } + + .nav-tabs > li, + .nav-pills > li { + > a { + border-color: @surface0; + + &, + &:hover, + &:focus { + color: @accent-color; + } + } + + &.active > a { + &, + &:focus { + background-color: @mantle; + } + + &:hover, + &:focus { + background-color: @crust; + } + } + + &:not(.active) > a { + &:hover, + &:focus { + background-color: @mantle; + } + } + } + + .ui-state-highlight { + border-color: @accent-color; + background: @accent-color; + color: @base; + } + + .primary-navbar { + a, + form, + .active { + background-color: @base; + } + + form .btn-link { + color: @accent-color; + } + + .active a { + color: @text; + } + } + + .post, + .topic { + background-color: @mantle; + border-color: @surface0; + } + + .editable-click { + &, + &:hover, + &:focus { + border-bottom-color: @subtext0; + } + } + + [style*="background: whitesmoke;"] { + background-color: @mantle !important; + } + + @media (min-width: 768px) { + .modal-content { + box-shadow: 0 5px 15px @crust; + } + } + + @media screen and (max-width: 767px) { + .table-responsive { + border-color: @surface0; + } + } + + #id_main_screenshot { + box-shadow: 12px 12px 29px @surface1; + } + + #id_hosting_details, + #id_education_details { + &, + h1, + h2, + h3 { + background-color: @mantle; + color: @text; + } + + .btn { + color: @crust !important; + } + + a { + color: @accent-color; + } + } + + #id_develop_anywhere_details { + background-color: @base; + } + + #id_support_details { + background-color: @base; + + a { + color: @accent-color !important; + } + } + + #id_company_info_strip { + color: @text; + } + + .console_table .info_tooltip { + color: @accent-color; + } + + #id_console_name { + color: @text; + } + + .beginner_pane, + .pricing_pane { + background-color: @mantle; + } + + #id_error_message, + #id_login_error { + color: @red; + } + + .post_preview { + background-color: @base; + + h3 { + color: @text; + } + } + + .teacher-navbar { + background-color: @mantle; + color: @text; + } + + .nav > li > a:focus { + background: none; + } + + /* blog */ + + .site-header { + background-color: @crust; + } + + h1, + h2, + h3, + h4, + code { + color: @text !important; + } + + button code { + background: none !important; + color: inherit !important; + } + + p, + .tipue_search_content_text, + .tipue_search_content_bold, + #tipue_search_error, + #tipue_search_results_count, + .post-meta { + color: @subtext0; + } + + .navbar-default .navbar-toggle { + &:hover, + &:focus { + background-color: @mantle; + } + } + + button:not(.btn-link, .btn, [data-toggle="dropdown"]), + .pagination a, + #tipue_search_foot_boxes li.current, + #tipue_search_foot_boxes li a { + background-color: @accent-color; + color: @crust; + border-color: @accent-color; + } + + button:disabled, + .pagination .disabled { + background-color: darken(@accent-color, 5%); + border-color: darken(@accent-color, 5%); + } + + #tipue_search_input, + form.navbar-search { + background-color: @mantle; + color: @text; + } + + svg { + fill: @subtext0; + } + + .fa-at, + .fa-twitter, + .fa-rss { + filter: @text-filter; + } + + .hide_search_icon path { + stroke: @subtext0; + } + + footer, + footer .wrap { + background-color: @crust; + color: @text; + border-color: @crust; + } + + .pagination a, + #tipue_search_foot_boxes li.current, + #tipue_search_foot_boxes li a { + background-color: @accent-color; + color: @crust; + border-color: @accent-color; + } + + img[src*="ssl.gstatic.com/ui/v1/disclosure/small-grey-disclosure-arrow-down.png"], + img[src*="/static/anywhere/images/staff.png"], + img[src*="/static/glyphicons/glyphicons_"], + img[src="/static/anywhere/images/PA-logo-snake-only.svg"], + .testimonial-content, + .quickstart_logo:not([src$="/django-logo-negative-small.png"]), + .ui-icon { + filter: @text-filter; + } + + img[src*="/static/anywhere/images/cross.png"] { + filter: @red-filter; + } + + img[src*="/static/anywhere/images/tick.png"] { + filter: @green-filter; + } + + .quickstart_logo[src$="/django-logo-negative-small.png"] { + // Original image has background - can't filter + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img[src$="/images/PA-logo.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml;utf8,@{svg}"); + } + } +} + +/* deno-fmt-ignore */ +@catppuccin: { + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @red-filter: brightness(0) saturate(100%) invert(25%) sepia(97%) saturate(4962%) hue-rotate(337deg) brightness(81%) contrast(106%); @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @green-filter: brightness(0) saturate(100%) invert(47%) sepia(78%) saturate(440%) hue-rotate(63deg) brightness(94%) contrast(93%); @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @text-filter: brightness(0) saturate(100%) invert(30%) sepia(7%) saturate(1674%) hue-rotate(196deg) brightness(97%) contrast(91%); @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; @red-filter: brightness(0) saturate(100%) invert(68%) sepia(21%) saturate(4617%) hue-rotate(312deg) brightness(110%) contrast(81%); @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @green-filter: brightness(0) saturate(100%) invert(84%) sepia(22%) saturate(540%) hue-rotate(51deg) brightness(90%) contrast(92%); @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @text-filter: brightness(0) saturate(100%) invert(74%) sepia(16%) saturate(454%) hue-rotate(192deg) brightness(110%) contrast(92%); @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; @red-filter: brightness(0) saturate(100%) invert(61%) sepia(16%) saturate(1882%) hue-rotate(306deg) brightness(111%) contrast(86%); @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @green-filter: brightness(0) saturate(100%) invert(83%) sepia(35%) saturate(356%) hue-rotate(57deg) brightness(94%) contrast(88%); @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @text-filter: brightness(0) saturate(100%) invert(82%) sepia(77%) saturate(662%) hue-rotate(181deg) brightness(103%) contrast(92%); @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; @red-filter: brightness(0) saturate(100%) invert(58%) sepia(60%) saturate(462%) hue-rotate(299deg) brightness(107%) contrast(91%); @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @green-filter: brightness(0) saturate(100%) invert(95%) sepia(57%) saturate(525%) hue-rotate(47deg) brightness(93%) contrast(91%); @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @text-filter: brightness(0) saturate(100%) invert(88%) sepia(10%) saturate(1247%) hue-rotate(191deg) brightness(99%) contrast(93%); @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +}; diff --git a/styles/quizlet/catppuccin.user.css b/styles/quizlet/catppuccin.user.css index 72b3fefdd5..f6de13be65 100644 --- a/styles/quizlet/catppuccin.user.css +++ b/styles/quizlet/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Quizlet Catppuccin +@name Quizlet Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/quizlet @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/quizlet -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/quizlet/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/quizlet/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aquizlet @description Soothing pastel theme for Quizlet @author Catppuccin @@ -13,2354 +13,4 @@ @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("quizlet.com") { - @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; - } - } - - :root body { - color: @text; - background: @base; - } - - .DashboardLayout { - background-color: @base !important; - } - - .TopNavigation { - background-color: @crust; - // border-bottom: none; - } - - .s19dmjr1 { - border-color: none; - background: @surface0; - } - - .NavigationTab--span { - color: @text !important; - } - - .s13oqxd2.NavigationTab:not(.no-highlight::after) { - background: @overlay2; - } - - .e1bxx0ta::after:hover { - background: @overlay2; - } - - .hri9878 { - color: @subtext1; - } - - .AssemblyCard { - background-color: @mantle; - border-color: @mantle; - box-shadow: 0 0.125rem 0.5rem 0 @crust; - } - h5 { - color: @text; - } - - .CourseOverviewPreviewCard-recommendationTitle { - color: @text; - } - - .UISwitch-input:hover:not(:disabled) ~ .UISwitch-label { - color: @yellow; - } - - .UIToggle-optionInput:hover:not(:disabled) ~ .UIToggle-optionLabel { - color: @yellow; - } - - .UIToggle-optionInput:checked:not(:disabled) ~ .UIToggle-optionLabel { - background-color: @yellow; - color: @mantle; - } - - .UIButton--inverted, - .UIButton--inverted:visited, - html.touch .UIButton--inverted:focus:hover:not(:active) { - box-shadow: inset 0 0 0 3px @overlay0; - } - - .UIButton--borderless, - .UIButton--borderless:visited, - html.touch .UIButton--borderless:focus:hover:not(:active) { - background: none; - background-color: initial; - color: inherit; - } - - .UIButton, - .UIButton:visited, - html.touch .UIButton:focus:hover:not(:active) { - color: inherit; - background-color: @blue; - } - - .UIButton--alert, - .UIButton--alert:visited, - html.touch .UIButton--alert:focus:hover:not(:active) { - background-color: @red; - } - - .h1ebmrjk { - background: linear-gradient(180deg, #0000 69.83%, @base 100%); - } - - .jqcfj5w { - filter: brightness(0) saturate(100%) invert(12%) sepia(5%) saturate(4408%) - hue-rotate(195deg) brightness(93%) contrast(90%); - } - - .RichTextEditor[aria-invalid="true"]:not([aria-disabled="true"]) - .RichTextEditor-label, - .LanguageBarSide.has-error .UILink, - .LanguageBarSide.has-error select { - color: @maroon; - } - - .neeykg0 { - filter: brightness(0) saturate(100%) invert(14%) sepia(10%) - saturate(1367%) hue-rotate(192deg) brightness(95%) contrast(95%); - } - - .CourseOverviewPreviewCard-recommendationLink:hover { - background-color: @crust; - } - - .CourseOverviewPreviewCard-subtitle { - color: @subtext1; - } - - .CourseOverviewPreviewCard-recommendationLabel { - color: @subtext1; - } - - .CourseOverviewPreviewCard-divider { - border-color: @mantle; - } - - .AssemblyPrimaryButton--default { - background-color: @crust; - border-color: @text; - } - - .c1vierhv { - border-color: @overlay2; - } - - .djzjpyv { - color: @subtext1; - } - - span { - color: inherit; - } - - .s139vgrg { - color: @subtext1; - } - - form { - background-color: inherit; - } - input { - background-color: @surface0; - } - - .b1r2wylq { - background-color: @mantle; - box-shadow: 0 0.125rem 0.25rem @crust; - } - - .AssemblyPill { - background-color: @crust; - color: @text; - } - - .t7pmw6o { - color: @text; - } - - .UIBaseCard-footer .UserLink-username, - .UserLink-username { - color: @text; - } - .UserLink-title { - color: @text; - } - .UILinkBox { - background-color: @mantle; - } - - .UIBaseCardHeader-info { - color: @text; - } - - .UIBaseCardHeader-thumbnail { - border-color: @mantle; - } - - .a1s81tf6 { - background-color: @mantle; - } - - .aup4qff { - color: @mantle; - } - - .illkdv2c { - color: @maroon; - } - - .react-calendar__month-view__weekdays__weekday { - color: @subtext0; - } - - .CalendarTile--isCurrentWeek::after { - background-color: @mantle; - } - - .CalendarTile--isCurrentWeek { - color: @text; - } - - .AssemblyIcon--medium { - color: inherit; - } - - .AssemblyIconButton--tertiary { - color: @text; - } - - .AssemblyButtonBase--circle { - color: @text; - } - - .AssemblySecondaryButton { - background-color: @crust; - color: @text; - } - - .AssemblyPillText { - color: @text; - } - - .SiteActivity-button.isGlobalNavInExperiment { - color: @text; - } - - .UIIcon--large { - color: @text; - } - - .s1da1u6y { - background-color: @crust; - } - - .CalendarTile--hasEvent { - color: @mantle; - } - - .c1qopd51 { - color: @maroon; - } - - .AssemblyIconButton--primary { - background: @base; - } - - .AssemblyButtonBase:hover:not([disabled]), - [aria-disabled="true"] { - background: @mantle; - } - - .SiteActivity-button { - border-color: @overlay2; - color: @text; - } - - .SiteActivity-button:focus, - .SiteActivity-button:hover { - border-color: @overlay0; - color: @subtext1; - } - - .NotificationBadge-container { - background: @overlay2; - } - - [d17q91q7][aria-expanded="true"] { - background-color: @text; - } - - .UILinkBox-link .UILink:active, - .UILinkBox-link .UILink:focus, - .UILinkBox-link .UILink:hover { - border-bottom-color: @overlay2; - } - - .AssemblySmallCard-hover:hover::after { - background-color: @overlay2; - } - - .rellgo5 { - color: @text; - } - - #react-autowhatever-site-header-global-search-autosuggest { - background-color: @crust; - border-color: @mantle; - } - - .tqxyjjt { - color: @text; - } - - text { - color: @subtext1; - } - - li.react-autosuggest__suggestion:hover { - background: @mantle; - } - - .poy4xqf { - background: @crust; - border-color: @crust; - } - - .wej97zk { - background-color: @crust; - } - - .wvbj6cw { - background-color: @crust; - } - - .c721v4v { - color: @text; - } - - .c139umgt { - color: @text; - } - - .t1ow6gy9 { - color: @subtext1; - } - - .u1jilvfz { - background-color: @overlay2; - } - - .wej97zk:hover { - background-color: @mantle; - } - - .s1ovpdog { - background-color: @mantle; - border-top-color: @overlay0; - } - - .c1ap9d88 .AssemblyMenuItem--title { - color: @subtext0; - } - - .c1ap9d88:hover { - background-color: @base; - } - - .c1ap9d88 { - background-color: @mantle; - } - - .h1hbonvg { - background-color: @mantle; - } - - .UIBaseCard-labelTag { - background-color: @surface0; - color: @text; - } - - .UIIcon--chevron-right { - color: @text; - } - - .UIIcon--chevron-left { - color: @text; - } - - .UIPopover, - .UIPopover::after { - background-color: @mantle; - } - - .UIPopover.UIPopover--mediumShadow { - box-shadow: 0 0.125rem 0.25rem @crust; - } - - .SetRecommendationCard-contextMenuItem:hover { - background-color: @crust; - } - - .cxvmyeq { - border-color: @crust; - } - - .wxhi4p:hover { - background-color: @mantle; - } - - .AssemblyTab { - color: @subtext0; - } - - .AssemblyTab::after { - color: @subtext0; - } - - .s4cgp9b.AssemblyTab { - color: @text; - } - - .AssemblyTab:hover { - color: @lavender; - } - - .f1ub3img { - border-top-color: @overlay2; - } - - .AssemblyTabsWrapper::before { - background-color: @overlay2; - } - - .s4cgp9b.AssemblyTab::after { - background: @blue; - } - - .AssemblyTab:hover::after { - background: @blue; - } - - .w15oa27z:hover { - background: @mantle; - } - - .i1v4i7rf.textbookIcon { - background-image: url("https://assets.quizlet.com/a/j/dist/app/i/explanations/textbook_night.1ff39f68b703b28.svg"); - } - - .sinah8x { - color: @subtext0; - } - - .SetPage { - background-color: @base; - } - - .SetPage .SetPage-setDetailsInfoWrapper, - .SetPage .SetPage-setIntroWrapper.SetPage-setIntroWrapper { - background-color: @base; - } - - .SetPage-setDetailsInfoWrapper { - background-color: @base; - } - - .SetPage-setDetailsTermsWrapper { - background-color: @base; - } - - .SetPage .SetPage-setDetailsTermsWrapper, - .SetPage .SetPage-setLinksWrapper.SetPage-setLinksWrapper { - background-color: @base; - } - - .SiteFooter { - background-color: @base; - color: @text; - } - - .SiteFooter-bottom { - background-color: @base; - } - - .SetPageStickyHeader.is-pinned { - background-color: @crust; - } - - .StudyModesNavItem { - background-color: @mantle; - } - - .StudyModesNavItemName { - color: @text; - } - - .StudyModesNavItemName:visited { - color: @text; - } - - .c78g08u { - background-color: @mantle; - box-shadow: 0 0.25rem 1rem 0 @crust; - } - - .o1rf13bx { - color: @text; - } - - .lck97c5 { - background: @mantle; - } - - .SetPageTerm { - background: @mantle; - } - - .AssemblyIconButton--secondary { - background: @crust; - } - - .UIDropdown--inverted { - background: @base; - } - - .UIDropdown-select { - color: @text; - } - - .soyu1j6 { - color: @maroon; - } - - .s1e29328.cbb9lkx { - color: @red; - background: @rosewater; - border-color: @peach; - } - - .kahyre1 { - color: @green; - } - - .kzo3tk { - color: @blue; - } - - .SiteActivity-button .NotificationBadge-container { - background-color: @blue; - } - - .hgmlhdt { - background-color: @crust; - } - - .o1rfl3bx { - color: @text; - border-color: @overlay2; - } - - .c1lf7cxm { - color: @subtext0; - } - - .l3ucz5w { - color: @subtext1; - } - - .u3v4pv0 { - color: @subtext0; - } - - .StudyModesNavItem:hover { - border-bottom-color: @overlay2; - } - - .o1g4qwv { - background-color: @crust; - } - - .tqyy7cr.h19ive8k { - color: @text; - } - - .t1kgxwr0 { - color: @text; - } - - .tuxzbsj { - fill: @text; - } - - .c5iom2o { - color: @lavender; - } - - .lck97c5:focus .c5iom2o, - .lck97c5:hover .c5iom2o { - color: @blue; - } - - .t4sjwm7 { - color: @text; - } - - body.colorRefresh-setPageOnly .UISwitch-label { - color: @text; - } - - .UISwitch-label { - border-color: @overlay1; - background-color: @mantle; - color: @subtext0; - } - - .SetPageTerm-sideContent { - border-right-color: @overlay2; - } - - .UISwitch-input:checked:not(:disabled ~ .UISwitch-label) { - color: @mantle; - border-color: @yellow; - background-color: @yellow; - } - - .AssemblyIconButton--highlight { - background: none; - color: @yellow; - } - - .UIToggle-optionLabel { - background-color: @mantle; - color: @blue; - } - - .AssemblyIconButton--highlight:hover:not([disabled]) { - background-color: @crust; - } - - .AssemblyIconButton--tertiary:hover:not([disabled]) { - background-color: @crust; - } - - .AssemblyButtonBase--square { - color: @text; - } - - .z1x1k8pd.svwhkoh { - color: @green; - border-color: @green; - } - - .svwhkoh { - background-color: @mantle; - } - - .kzo3tk.cbb9lkx { - background: @green; - border-color: @green; - color: @blue; - } - - .kahyre1.l40n85g { - color: @green; - } - - .soyu1j6.l40n85g { - color: @red; - } - - .axrvw3e.s1e29328.cbb9lkx { - background: @flamingo; - border-color: @flamingo; - color: @red; - } - - .mnlifen { - background: @mantle; - } - - .f1yw38c3 { - background: none; - } - - .AssemblyToggleSwitch-input:checked + .AssemblyToggleSwitch-fauxInput { - background: @lavender; - } - - .AssemblyToggleSwitch-input:checked - + .AssemblyToggleSwitch-fauxInput::after { - background-color: @pink; - } - - .AssemblyToggleSwitch-fauxInput { - background: @overlay1; - } - - .AssemblyToggleSwitch-fauxInput::after { - background: @lavender; - } - - .c13e2cpr { - background-color: @mantle; - color: @text; - } - - .AssemblyInput { - background-color: @surface0; - color: @text; - } - - .AssemblyInput-input { - color: @subtext1; - } - - .a1k2umqi { - background-color: @crust; - } - - .bxtl8jy { - background-color: @surface0; - color: @text; - } - - .ah6785x { - color: @subtext1; - } - - .a1fcz3cu:focus-within > .ah6785x { - color: @subtext1; - } - - .e29yge6 - .react-autosuggest__container - .react-autosuggest__suggestions-container--open { - background: @mantle; - } - - .e1g8wmc7 { - background-color: @surface0; - } - - .AssemblyLink--secondary:hover { - color: @peach; - } - - .a1k2umqi:focus-within { - border-bottom-color: @blue; - } - - .cgyrcnx { - background-color: @overlay2; - } - - .byhd60 { - background-color: @maroon; - } - - .d11ucs5j { - background: @overlay2; - } - - .sjsxdsz { - border-bottom-color: @overlay2; - } - - .fz4nps6 { - border-top-color: @overlay2; - } - - .AssemblyPrimaryButton--default:disabled, - .AssemblyPrimaryButton--default[aria-disabled="true"] { - background: @surface0; - border-color: @base; - color: @subtext0; - } - - .ptc18zm { - background: inherit; - } - - .c1gi3y8b { - background: @crust; - } - - .k3lm6f3 { - background-color: @crust; - color: @text; - } - - .w1uwrq7e { - color: @text; - border-color: @overlay2; - } - - .t1d08860 { - color: inherit; - } - - .i1p8x1gp .i1e9rt5 { - color: @maroon; - } - - .i1p8x1gp { - background-color: @mantle; - } - - .i1p8x1gp, - .i1p8x1gp:focus, - .i1p8x1gp:hover { - border-color: @maroon; - } - - .cv1rd7s { - background: @mantle; - } - - .cv1rd7s, - .cv1rd7s:focus, - .cv1rd7s:hover { - border-color: @green; - } - - .cv1rd7s .i1e9rt5 { - color: @green; - } - - .b1jcf4jl { - background-color: @crust; - } - - .pck8ctn { - color: @text; - } - - .i6cf9vy { - color: @red; - } - - .c2mfnz6 { - color: @green; - } - - .pr2w5fu:first-child { - border-right-color: @overlay2; - } - - .t117larf { - background-color: @crust; - border-color: @overlay2; - color: @text; - } - - .q1m09plc:hover { - background-color: @crust; - } - - .q1m09plc { - color: @blue; - } - - .hbcu5v.q1m09plc { - color: @subtext1; - } - - .qzk5crt { - color: @text; - } - - .sd72jj0 { - color: @subtext1; - } - - .UIModalHeader { - background-color: @crust; - } - - .UIModalBody { - background-color: @mantle; - } - - .TestModeOptions { - background-color: @mantle; - } - - .UIModal-box { - color: @text; - } - - .UICheckbox-label { - color: @text; - } - - .UICheckbox-input:checked ~ .UICheckbox-fauxInput { - border-color: @yellow; - } - - .UICheckbox-fauxInput::after { - border-color: @yellow; - border-width: 0 0 0.125rem 0.125rem; - } - - .UIInput-input { - color: @text; - } - - .UIInput[aria-invalid="false"] .UIInput-input ~ .UIInput-border { - box-shadow: 0 0.125rem 0 0 @overlay2; - } - - .UILink, - .UILink:visited { - color: @rosewater; - } - - .UIButton:active, - html.cursor .UIButton:hover, - html.cursor .UIButton:hover:visited { - background-color: @sky; - } - - .UIHorizontalRule { - border-bottom-color: @overlay2; - } - - .OptionsModal-description, - .TestModeOptions-listOption-description { - color: @subtext0; - } - - .swjz05g { - background-color: @crust; - } - - .swjz05g, - .swjz05g:focus, - .swjz05g:hover { - border-color: @blue; - } - - .s2y71yx label { - background: @surface0; - } - - .s2y71yx input { - background: inherit; - color: @text; - } - - .TextbookRecommendations { - background: @crust; - } - - .TextbookCard-Details { - color: @subtext1; - } - - .AssemblyLink--title:any-link { - color: @text; - } - - .AssemblyLink--title:hover { - color: @yellow; - } - /* .AssemblyIcon--small { - color: @lavender; - } */ - - .ah3z5j1 { - border-color: @blue; - } - - .hkyil8p { - color: @blue; - } - - .e17gih4t { - border-color: @overlay2; - } - - .o1q1tz6w { - border-color: @overlay2; - color: @text; - } - - .hg3d33q { - border-color: #0000; - } - - .ser6cev, - .c86ukn8 { - color: @subtext0; - } - - .a99ei82 { - background-color: @mantle; - border-color: @overlay2; - } - - .qcpiy8g { - color: @text; - } - - .pqa404y { - color: @green; - } - - .s18c8hjh { - color: @maroon; - } - - .ljt3l6v { - fill: @subtext0; - } - - .c16l7630.iayao2g { - color: @green; - } - - .i1e9dzkh.iayao2g { - color: @maroon; - } - - .w1e3jc65 { - background-color: @mantle; - border-color: @mantle; - } - - .t7fr19y { - color: @lavender; - } - - .dw1ojws { - color: @subtext0; - } - - .w1e3jc65:hover { - border-color: @overlay2; - } - - .q1nxab59 { - color: @subtext1; - } - - .ssbjprp { - color: @subtext0; - } - - .smvj06a { - color: @subtext1; - } - - .cfzatrd.a548wz9 { - color: @green; - } - - .cag3g2z.anp68o5 { - color: @green; - } - - .CombinePage-wrap { - background-color: @base; - } - - .CombinePageTable-row { - background-color: @mantle; - } - - .CombinePageTable-rowTermCount { - color: @subtext1; - } - - .CombinePageTable-setTitle .UIHeading--four { - color: @text; - } - - .UIDropdown { - background: @mantle; - border-color: @crust; - } - - .UIDropdown .UIDropdown-icon { - color: @overlay2; - } - - .UIDropdown-select:focus option { - background: @mantle; - } - - option:hover { - background: @crust; - } - - .ModeControls { - background-color: @mantle; - } - - .ModeControls-backText { - color: @text; - } - - .ModeControls-back { - border-bottom-color: @overlay2; - } - - .UIButton--whiteBorder { - background: @crust; - border-color: @base; - color: @text; - } - - .MatchModeControls-currentTime { - color: @blue; - } - - .MatchModeQuestionScatterTile { - background-color: @mantle; - border-color: @overlay0; - } - - .MatchModeQuestionScatterTile.is-draggedOver, - .MatchModeQuestionScatterTile.is-dragging, - .MatchModeQuestionScatterTile:hover { - border-color: @overlay2; - } - - .MatchModeQuestionScatterTile.is-incorrect { - border-color: @maroon; - } - - .MatchModeQuestionScatterTile.is-correct { - border-color: @green; - } - - .HighscoresList { - background-color: @crust; - } - - .HighscoreRow { - background-color: @mantle; - } - - .UIButton[aria-disabled="true"], - .UIButton[aria-disabled="true"]:active, - .UIButton[aria-disabled="true"]:focus, - .UIButton[aria-disabled="true"]:visited, - .UIButton[disabled], - .UIButton[disabled]:active, - .UIButton[disabled]:focus, - .UIButton[disabled]:visited, - html.cursor .UIButton[aria-disabled="true"]:hover, - html.cursor .UIButton[disabled]:hover { - background-color: @mantle; - } - - .t10tqhey { - background-color: @mantle; - color: @text; - border-color: @crust; - } - - .t9i9vmb.h19ive8k, - .t1s26kx5.h19ive8k, - .s1rx7q8q.h19ive8k { - color: @text; - } - - .s8j1d54, - .c49e2ip { - color: @subtext1; - } - - .c6p6uaq .react-calendar__month-view__days__day { - color: @text; - } - - .c6p6uaq .react-calendar__month-view__days__day--neighboringMonth { - color: @subtext0; - } - - .AchievementsImage--isActive .a130rwfv, - .al33ekg.isActive .a130rwfv { - color: @subtext0; - } - - .s1rtnf4c::before, - .s1rtnf4c::after { - background: none; - } - - .AchievementsImage--isActive .a130rwfv, - .al33ekg.isActive .a130rwfv, - .DashboardLayout .SetPreviewLink--noLinkBox, - .DashboardLayout .PreviewCard--noLinkBox { - background-color: @mantle; - } - - .SetPreview-queryMatchHighlight { - background: @yellow; - color: @base; - } - - .cpey3pe { - color: @text; - } - - .s1fl65t6 { - color: @subtext0; - } - - .t1ne2oir { - color: @text; - } - - .b1xq6unb { - color: @text; - } - - .bp0a7jj { - color: @subtext1; - } - - .pltikop { - color: @blue; - } - - .SettingsBox-box { - background-color: @mantle; - } - - .EdgyDataCoursePillbox .UIPill { - background: @crust; - border-color: @overlay2; - color: @text; - } - - .UIAutosuggest .react-autosuggest__suggestions-container { - background: @mantle; - } - - .UIAutosuggest .react-autosuggest__suggestion { - border-bottom-color: @overlay2; - } - - .UIAutosuggest - .react-autosuggest__suggestion.react-autosuggest__suggestion--highlighted { - border-bottom-color: @yellow; - } - - .EdgyDataCourseSelector-suggestion .EdgyDataCourseSelector-suggestionName { - color: @text; - } - - .UIInput-input.UIInput-autoExpandInput.is-focused ~ .UIInput-border, - .UIInput-input:focus ~ .UIInput-border { - box-shadow: 0 0.25rem 0 0 @yellow; - } - - .Divider-label { - background: @mantle; - } - - .the-label, - .UIButton { - color: @crust; - } - - input:checked + .p22broa { - box-shadow: 0 0 0 0.25rem @blue; - } - - .button.google { - background-color: @red; - border-color: @peach; - } - - .button.google::after { - border-right-color: @peach; - } - - .b1opuclq { - background-color: @mantle; - box-shadow: 0 0.25rem 1rem 0 @crust; - } - - .button.apple .label, - .button.facebook .label, - .button.google .label { - color: @crust; - } - - .button.facebook { - background-color: @blue; - border-color: @lavender; - } - - .button.facebook::after { - border-right-color: @lavender; - } - - .UIInput-input:-webkit-autofill, - .UIInput-input:-webkit-autofill:focus, - .UIInput-input:-webkit-autofill:hover { - box-shadow: none !important; - } - .UIInput-input:-internal-autofill-previewed, - .UIInput-input:-internal-autofill-selected { - -webkit-text-fill-color: @text; - } - - .UILink:active, - html.cursor .UILink:hover, - html.cursor .UILink:hover:visited { - color: @maroon; - } - - .setting legend, - .setting p { - color: @text; - } - - .UIButton-wrapper { - color: inherit; - } - - .UIButton--alert:active, - html.cursor .UIButton--alert:hover, - html.cursor .UIButton--alert:hover:visited { - background-color: @maroon; - } - - .c1qo8ql4 { - background-color: @base; - } - - .phx9gy6 { - color: @text; - } - - .soad3d7 { - color: @text; - } - - .AssemblyLink--primary:any-link { - color: @rosewater; - } - - .AssemblyLink { - color: @rosewater; - } - - .UIButton--borderless:active, - html.cursor .UIButton--borderless:hover, - html.cursor .UIButton--borderless:hover:visited { - background-color: initial; - color: @yellow; - } - - .UIButton--borderless[aria-disabled="true"], - .UIButton--borderless[aria-disabled="true"]:active, - .UIButton--borderless[aria-disabled="true"]:focus, - .UIButton--borderless[aria-disabled="true"]:visited, - .UIButton--borderless[disabled], - .UIButton--borderless[disabled]:active, - .UIButton--borderless[disabled]:focus, - .UIButton--borderless[disabled]:visited, - html.cursor .UIButton--borderless[aria-disabled="true"]:hover, - html.cursor .UIButton--borderless[disabled]:hover { - background-color: initial; - } - - .s19dmjr1.isGlobalNavInExperiment.is-focused, - .s19dmjr1.isGlobalNavInExperiment.is-focused input { - background: @surface0; - } - - .t1iqlnnn p { - color: @subtext1; - } - - .axupt8p, - .igkckaz { - color: @rosewater; - } - - .axupt8p:active, - .axupt8p:focus, - .axupt8p:hover { - color: @flamingo; - } - - .cnuw08l { - background-color: @mantle; - } - - .c192jkj8 { - color: @text; - } - - .a1sd82zg { - background-color: @crust; - border-left-color: @lavender; - } - - .g84nzqs { - background-image: none; - } - - .du7o3ew > div:not(:last-child) { - border-right-color: @overlay2; - } - - .i73vo82:hover { - color: @crust; - background-color: @crust; - } - - .f2nmi2p { - border-top-color: @overlay2; - } - - .a1scx0nz { - background-color: @mantle; - } - - .a4ouqer { - color: @text; - } - - .t104cykg { - color: @text; - } - - .ExplanationsLandingPage #PrismicExplanationsSearchBarTarget label, - .ExplanationsLandingPage #SearchBarTarget label, - .explanations.prismic-page #PrismicExplanationsSearchBarTarget label, - .explanations.prismic-page #SearchBarTarget label { - background-color: @surface0; - } - - .l1rgb1ub { - border-color: @overlay2; - } - - .theme-night .h1uvmh9x, - .h1uvmh9x { - background: @mantle; - } - - .h1wn8ccf { - color: @text; - } - - .ccm0r9d { - color: @subtext0; - } - - .AssemblySmallCard-isActive::after { - background-color: @lavender; - } - - .i192320l { - border-color: @mantle; - } - - .b1j40uwt::before { - background-color: @mantle; - } - - .theme-night .g84nzqs { - background: none; - } - - .CreateSetHeader-sticky { - background: @base; - } - - .a1fcz3cu { - background-color: @surface0; - } - - .CreateSetHeader-permissionsLink { - color: @subtext1; - } - - .CreateSetDiagramUploader .UIFloatedCard--white, - .TermContent-inner { - background-color: @mantle; - } - - .CreateSetDiagramUploader-banner { - border-color: @overlay0; - } - - .AssemblyIconButton--primaryInverted { - border-color: @overlay2; - } - - .StudiableItemToolbar { - border-bottom-color: @overlay2; - } - - .b18prmdf { - box-shadow: 0 0.125rem 0 0 @overlay2; - } - - .ImageUploadProminentContextToggle { - border-color: @overlay0; - } - - .UILinkButton { - border-bottom-color: @blue; - color: @text; - } - - .p10i2lyl { - background-color: @mantle; - } - - * + .KeyboardShortcuts-shortcut, - .KeyboardShortcuts-shortcut + *, - .KeyboardShortcuts-shortcut + .KeyboardShortcuts-shortcut { - border-top-color: @overlay2; - } - - .UIKeyboardInput { - color: @text; - border-color: @overlay2; - } - - .UIDropdown-select option { - color: @text; - } - - .UIButton--inverted:active, - html.cursor .UIButton--inverted:hover, - html.cursor .UIButton--inverted:hover:visited { - box-shadow: inset 0 0 0 3px @overlay2; - } - - .PMEditor:focus-within ~ .b18prmdf { - box-shadow: 0 0.25rem 0 0 @yellow; - } - - .UITooltip, - .UITooltip::after { - background: @crust; - } - - :not(.ie11 .UITooltip), - :not(.ie11 .UIPopover) { - filter: none; - } - - .LanguageSelect-option:hover, - .Select-option.is-focused .LanguageSelect-option { - background-color: @yellow; - } - - .i1u1jhdl { - background-color: @crust; - } - - .TermRowDragPlaceholder { - background: @base; - } - - .CreateSetDiagramUploader-banner.is-dropTarget { - border-color: @yellow; - } - - .TermContent-addRow:hover .UILinkButton { - border-bottom-color: @yellow; - } - - .tetv1rf.t8spden:hover { - background-color: @crust; - } - - .ImportTerms { - background-color: @base; - } - - .ImportTerms-import, - .ImportTerms-preview { - background-color: @base; - } - - .ImportTerms-textarea { - color: @text; - border-color: @overlay2; - } - - .TermRowsPreview .TermRowsPreview-row { - background: @mantle; - } - - .UIRadio-input:checked ~ .UIRadio-fauxInput { - border-color: @yellow; - } - - .UIRadio-fauxInput::after { - background-color: @yellow; - } - - .UILinkButton:active, - .UILinkButton:focus, - .UILinkButton:hover { - border-bottom-color: @yellow; - } - - .AutosuggestContextItem { - background-color: @crust; - color: @text; - } - - .AssemblyNotice-error { - border-color: @red; - background-color: @surface0; - } - - .TermRow.is-duplicate { - outline-color: @yellow; - } - - .AssemblyPrimaryButton--danger { - background: @red; - color: @crust; - } - - .AssemblyPrimaryButton--danger:hover:not([disabled]), - [aria-disabled="true"] { - background: @pink; - } - - .s19dmjr1.is-focused, - .s19dmjr1.is-focused input, - .s2y71yx label, - .s2y71yx.is-expanded label { - background: @surface0; - color: @text; - } - - .eeiq5c0 { - color: @text; - } - - .t1r0fp00, - .t1elfe8k { - color: @subtext0; - } - - .MobilePage { - background: @base; - } - - .MobilePage-feature { - border-color: @overlay2; - } - - .MobilePage-anyDevice { - border-top-color: @overlay2; - } - - .AssemblyTextButton--secondary { - color: @text; - } - - .AssemblyPrimaryButton--upgrade { - background: @yellow; - } - - .page, - .PrismicSimpleRichText--white, - .PrismicTextCallout--whiteBackground, - .PrismicVideoEmbedWithText--whiteBackground, - .p1mcvm6s, - .PrismicImageTextTile--whiteBackground, - .PrismicTextCallout--twilightBlue200Background, - #SearchResultsPageHeader-mainExperiment { - background-color: @base; - } - - .tfomyx6, - .i1rs7b62, - .d5ww82k { - color: @text; - } - - .cssrxmc { - background-color: @yellow; - } - - .PrismicImageTextTile-tileWrapper { - background-color: @mantle; - } - - .AssemblyPrimaryButton--upgrade:hover:not([disabled]) { - background: @rosewater; - } - - .s1qq0zr7 { - background-color: @mantle; - } - - .sv0yvnj a, - .sv0yvnj a:visited:not(:last-child) { - color: @text; - } - - .sg4pwu6:hover, - .hivq638, - .s1ahro8n:hover { - background-color: @crust; - } - - .e7lqtuc - .react-autosuggest__suggestions-container.react-autosuggest__suggestions-container--open { - background-color: @mantle; - } - - .e7lqtuc .react-autosuggest__section-title, - .SearchResultsPageHeader-queryFeedback, - .SearchResultsPage-contentType .SearchResultsPage-emptyStateHeadline, - .SearchResultsPage-contentType .SearchResultsPage-emptyStateDescription, - .SearchResultsPage-contentType - .SearchResultsPage-emptyStateSuggestionsList { - color: @text; - } - - .markdown-body { - color: @subtext1; - } - - .e7lqtuc - li.react-autosuggest__suggestion.react-autosuggest__suggestion--highlighted, - .e7lqtuc li.react-autosuggest__suggestion:hover { - background-color: @crust; - border-color: @lavender; - } - - .UserPreviewCard-username, - .ClassPreviewCard-title { - color: @text; - } - - .UserPreviewCard-classesDescription, - .UserPreviewCard-createdSetsDescription, - .QuestionCard-subject, - .ClassPreviewCard-location, - .ClassPreviewCard-membersDescription, - .ClassPreviewCard-studySetsDescription { - color: @subtext1; - } - - .QuestionCard-bottomGradient { - background-image: none; - } - - .AssemblyTextButton--primary { - color: @rosewater; - } - - .TosLegend--normal { - color: @subtext1; - } - - .AssemblyLink--secondary:any-link { - color: @rosewater; - } - - .lghzn8f, - .a1cdxe01.h9lvpq { - color: @text; - } - - .s1mff1xn, - .AssemblyCheckbox-label { - color: @text; - } - - .ccnmm10 { - background-color: @mantle; - } - - .c1g4obhz { - background-color: @crust; - color: @text; - } - - .SetPageTerm-wordText, - .SetPageTerm-definitionText { - color: @text; - } - - .SetPageTerms-embeddedDesktopAdWrapper { - background: @mantle; - } - - .c1qw5oc { - background: @crust; - border-bottom-color: @surface0; - } - - .c19lfjrd, - .l1fkuqeb { - background-color: @base; - } - - .bxyvgmh { - background-color: @mantle; - } - - .ata5p6z[aria-disabled="true"], - .ata5p6z[aria-disabled="true"] div, - .ata5p6z[aria-disabled="true"] textarea { - background-color: @mantle; - } - - .ata5p6z { - border-color: @overlay2; - background-color: @mantle; - } - - .AssemblyIconButton--primary:disabled, - .AssemblyIconButton--primary[aria-disabled="true"] { - background: @surface1; - color: @text; - } - - .ugcsb7m { - background-color: @blue; - color: @crust; - } - - .AssemblySecondaryButton:disabled, - .AssemblySecondaryButton[aria-disabled="true"] { - background-color: @base; - border-color: @overlay2; - } - - .m9mf1hr div, - .m9mf1hr textarea { - background-color: @mantle; - } - - .lu5rlws { - color: @subtext1; - } - - .b1yjduyh { - background-color: @mantle; - } - - .d6tac4m { - background-color: @surface0; - } - - .RecentFeed-empty { - background-color: @mantle; - } - - .i1ykvw4f { - background: @mantle; - } - - .i1ykvw4f:hover { - background: @crust; - } - - .RecentFeed-empty--cta { - color: @text; - } - - .UIButton--whiteBorder:active, - html.cursor .UIButton--whiteBorder:hover, - html.cursor .UIButton--whiteBorder:hover:visited { - color: @yellow; - } - - .c124zyvn { - background: @base; - } - - .AssemblyLink--primary:hover { - color: @maroon; - } - - .cczh2hb, - .h1jftztg, - .t2m5erc { - color: @text; - } - - .t1nv0ihp, - .sku1zau, - .s54kfc3 { - color: @subtext1; - } - - .ImageUploadProminentContextToggle - .ImageUploadProminentContextToggle-IconExplanation { - color: @text; - } - - .SiteHeaderLogo-link { - color: @blue; - } - - .c1sgnxr5 { - color: @green; - } - - .suyglfi { - color: @text; - } - - .s2y71yx - li.react-autosuggest__suggestion.react-autosuggest__suggestion--highlighted, - .s2y71yx li.react-autosuggest__suggestion:hover { - background: @mantle; - } - - .q1kwd3of { - color: @overlay2; - } - - .c1741jrq:not(:first-child) { - border-top-color: @overlay2; - } - - .SetsView-studySetResults { - color: @text; - } - - .UILink .SetPreview-cardHeaderTitle, - .UILink .SetPreview-cardHeaderTitle:visited, - html.touch .UILink .SetPreview-cardHeaderTitle:focus:hover:not(:active) { - color: @text; - } - - .SetPreview-cardBylineClass { - color: @subtext0; - } - - .UILink .SetPreview-cardHeaderTitle:active, - html.cursor .UILink .SetPreview-cardHeaderTitle:hover, - html.cursor .UILink .SetPreview-cardHeaderTitle:hover:visited { - color: @yellow; - } - - .e29yge6 - .react-autosuggest__container - .react-autosuggest__suggestion.react-autosuggest__suggestion--highlighted, - .e29yge6 - .react-autosuggest__container - .react-autosuggest__suggestion:hover { - background-color: @crust; - } - - .e29yge6 .react-autosuggest__container .react-autosuggest__suggestion { - border-bottom-color: @mantle; - } - - .EdgyDataCourseSelector-addYourOwn { - color: @blue; - } - - .i5h71e0 { - background-color: @surface0; - } - - .ikdjsw2 { - color: @text; - } - - .i1m3kkj2 { - color: @text; - } - - .i1190urg { - color: @subtext0; - } - - .le206v0 { - border-color: @overlay2; - } - - .sby7w0g { - background: @overlay2; - } - - .c3s5vdc:hover { - background-color: @blue; - } - - .g4cyoxx { - color: @text; - } - - .s1lyn4nc { - background: @blue; - } - - .UIModal.is-white .UIModal-box { - background: @mantle; - } - - .UIModalBadge { - background-color: @blue; - color: @crust; - } - - .CombinePage-sourceSelectWrap .UIFieldset-legend { - color: @text; - } - - .k1reqlz9.ijrfqxy svg { - fill: @green; - } - - .dhmqhsx.ijrfqxy svg { - fill: @red; - } - - .c6p6uaq .react-calendar__navigation__label { - color: @text; - } - - .c6p6uaq .react-calendar__navigation__arrow { - color: @text; - } - - .c6p6uaq .react-calendar__navigation__arrow:disabled { - color: @overlay1; - } - - .f1sxiitf { - background: none; - } - - .c1ext0pg { - background-color: @surface1; - color: @text; - } - - .sl7nfp9 { - background-color: @mantle; - } - - .sdw19mu .SetPreviewCardV1 { - border-bottom-color: @overlay2; - } - - .fiejqa { - background: none; - } - - .t1ied0h6 { - color: @subtext1; - } - - .SetListMediumCard-isActive::before { - background-color: @lavender; - } - - .c51obz3 { - background-color: @base; - } - - .s80h93u { - color: @text; - border-color: @overlay2; - } - - .s80h93u:active:not([disabled]), - .s80h93u:hover:not([disabled]) { - background: @crust; - } - - .r78nxpu > div:hover { - background-color: @mantle; - } - - .stbnqj0 { - color: @text; - } - - .c1n6gny6, - .to5kbh1 { - color: @text; - } - - .tb3hrve { - color: @subtext0; - } - - .HurricaneBanner--default { - background: @crust; - border-bottom-color: @surface0; - } - - .HurricaneBanner--default .HurricaneBanner-text { - color: @text; - } - - .StudyModesNavSectionTitle { - color: @text; - } - - .cgkxufs { - background: @crust; - border-bottom-color: @overlay0; - } - - .TeacherChoosePageView-gameTypeOption { - background-color: @mantle; - } - - .TeacherChoosePageView-gameTypes--text { - color: @text; - } - - .TeacherChoosePageView-gameTypes--description { - color: @subtext0; - } - - .TeacherChoosePageView-gameTypes--cta, - .CardContent-cta { - color: @blue; - } - - .TeacherChoosePageView-gameTypeOption:hover, - .PlayModeCard:hover { - border-bottom-color: @yellow; - } - - .PlayModeCard:active, - .PlayModeCard:focus:not(:active:not(:hover)), - html.cursor .PlayModeCard:hover, - html.cursor .PlayModeCard:hover:visited { - border-color: @yellow; - } - - .PlayModeCard { - background-color: @mantle; - } - - .CardContent-option { - background: @crust; - color: @text; - } - - .CardContent-text, - .CardContent-title { - color: @text; - } - - .TeacherLobbyView-join { - background-color: @mantle; - } - - .TeacherLobbyView .UIFloatedCard, - .TeacherStartGameView-side, - .TeacherEndView-side { - background: @crust; - } - - .theme-night .TeacherLobbyView .UIFloatedCard { - border-color: @overlay2; - } - - .TeacherLobbyView-join--instructionLink .UIButton { - color: @blue; - } - - .TeacherLobbyView-player:hover { - color: @red; - } - - .td5er02 .UIFloatedCard { - background-color: @mantle; - } - - .TermStat--perfectTerms .TermStat-header { - background-color: @green; - } - - .TermStat-header { - color: @mantle; - } - - .TermStatGroup-navProgress { - color: @subtext0\1; - } - - .TeacherEndView-side--bottomButton .UIButton.UIButton--whiteBorderRounded { - color: @text; - } - - .SegmentedControl.SegmentedControl--quizletBlue - .SegmentedControl-navItem.is-active, - .segmented-control.SegmentedControl--quizletBlue - .SegmentedControl-navItem.is-active { - background: @lavender; - color: @crust; - } - - .StudyWhileWaitingView { - background-color: @base; - } - - .firefox - .CardsList.CardsList--showSingle - .CardsItem - .CardsItemSide - .CardsItemInner, - .ie11 - .CardsList.CardsList--showSingle - .CardsItem - .CardsItemSide - .CardsItemInner, - .webkit - .CardsList.CardsList--showSingle - .CardsItem - .CardsItemSide - .CardsItemInner { - background-color: @mantle; - } - - .StudentTeamView-teamInner { - background-color: @mantle; - } - - .StudentAnswerOption .UIButton { - background-color: @mantle !important; - } - - .StudentAnswerOption .UIButton:active, - html.cursor .StudentAnswerOption .UIButton:hover, - html.cursor .StudentAnswerOption .UIButton:hover:visited { - border-color: @yellow; - } - - .StudentPlayingHeader { - background: @crust; - } - - .StudentLeaderboard-headstart { - background: @blue; - } - - .StudentLeaderboard { - background: @lavender; - } - - .StudentLeaderboard-team { - background: @blue; - } - - .StudentGameboard-feedback.is-incorrectAnswer { - background: @red; - } - - .StudentAnswerOption.is-showingIncorrectFeedback.StudentAnswerOption - .UIButton { - background: @red !important; - } - - .StudentAnswerOption.is-showingCorrectFeedback.StudentAnswerOption - .UIButton { - background: @green !important; - } - - .StudentIncorrectAnswerFeedback-section--correct - .StudentIncorrectAnswerFeedback-heading { - color: @green; - } - - .TermStat--learnedTerms .TermStat-header { - background-color: @red; - } - - .TeacherChoosePageView-gameTypeOption:active, - .TeacherChoosePageView-gameTypeOption:focus:not(:active:not(:hover)), - html.cursor .TeacherChoosePageView-gameTypeOption:hover, - html.cursor .TeacherChoosePageView-gameTypeOption:hover:visited { - border-color: @yellow; - } - - .tllqvk3, - .c1tmoumb { - background-color: @mantle; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/quizlet/catppuccin.user.less b/styles/quizlet/catppuccin.user.less new file mode 100644 index 0000000000..67c691da85 --- /dev/null +++ b/styles/quizlet/catppuccin.user.less @@ -0,0 +1,2365 @@ +/* ==UserStyle== +@name Quizlet Catppuccin +@namespace github.com/catppuccin/userstyles/styles/quizlet +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/quizlet +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/quizlet/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aquizlet +@description Soothing pastel theme for Quizlet +@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("quizlet.com") { + @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; + } + } + + :root body { + color: @text; + background: @base; + } + + .DashboardLayout { + background-color: @base !important; + } + + .TopNavigation { + background-color: @crust; + // border-bottom: none; + } + + .s19dmjr1 { + border-color: none; + background: @surface0; + } + + .NavigationTab--span { + color: @text !important; + } + + .s13oqxd2.NavigationTab:not(.no-highlight::after) { + background: @overlay2; + } + + .e1bxx0ta::after:hover { + background: @overlay2; + } + + .hri9878 { + color: @subtext1; + } + + .AssemblyCard { + background-color: @mantle; + border-color: @mantle; + box-shadow: 0 0.125rem 0.5rem 0 @crust; + } + h5 { + color: @text; + } + + .CourseOverviewPreviewCard-recommendationTitle { + color: @text; + } + + .UISwitch-input:hover:not(:disabled) ~ .UISwitch-label { + color: @yellow; + } + + .UIToggle-optionInput:hover:not(:disabled) ~ .UIToggle-optionLabel { + color: @yellow; + } + + .UIToggle-optionInput:checked:not(:disabled) ~ .UIToggle-optionLabel { + background-color: @yellow; + color: @mantle; + } + + .UIButton--inverted, + .UIButton--inverted:visited, + html.touch .UIButton--inverted:focus:hover:not(:active) { + box-shadow: inset 0 0 0 3px @overlay0; + } + + .UIButton--borderless, + .UIButton--borderless:visited, + html.touch .UIButton--borderless:focus:hover:not(:active) { + background: none; + background-color: initial; + color: inherit; + } + + .UIButton, + .UIButton:visited, + html.touch .UIButton:focus:hover:not(:active) { + color: inherit; + background-color: @blue; + } + + .UIButton--alert, + .UIButton--alert:visited, + html.touch .UIButton--alert:focus:hover:not(:active) { + background-color: @red; + } + + .h1ebmrjk { + background: linear-gradient(180deg, #0000 69.83%, @base 100%); + } + + .jqcfj5w { + filter: brightness(0) saturate(100%) invert(12%) sepia(5%) saturate(4408%) + hue-rotate(195deg) brightness(93%) contrast(90%); + } + + .RichTextEditor[aria-invalid="true"]:not([aria-disabled="true"]) + .RichTextEditor-label, + .LanguageBarSide.has-error .UILink, + .LanguageBarSide.has-error select { + color: @maroon; + } + + .neeykg0 { + filter: brightness(0) saturate(100%) invert(14%) sepia(10%) saturate( + 1367% + ) hue-rotate(192deg) brightness(95%) contrast(95%); + } + + .CourseOverviewPreviewCard-recommendationLink:hover { + background-color: @crust; + } + + .CourseOverviewPreviewCard-subtitle { + color: @subtext1; + } + + .CourseOverviewPreviewCard-recommendationLabel { + color: @subtext1; + } + + .CourseOverviewPreviewCard-divider { + border-color: @mantle; + } + + .AssemblyPrimaryButton--default { + background-color: @crust; + border-color: @text; + } + + .c1vierhv { + border-color: @overlay2; + } + + .djzjpyv { + color: @subtext1; + } + + span { + color: inherit; + } + + .s139vgrg { + color: @subtext1; + } + + form { + background-color: inherit; + } + input { + background-color: @surface0; + } + + .b1r2wylq { + background-color: @mantle; + box-shadow: 0 0.125rem 0.25rem @crust; + } + + .AssemblyPill { + background-color: @crust; + color: @text; + } + + .t7pmw6o { + color: @text; + } + + .UIBaseCard-footer .UserLink-username, + .UserLink-username { + color: @text; + } + .UserLink-title { + color: @text; + } + .UILinkBox { + background-color: @mantle; + } + + .UIBaseCardHeader-info { + color: @text; + } + + .UIBaseCardHeader-thumbnail { + border-color: @mantle; + } + + .a1s81tf6 { + background-color: @mantle; + } + + .aup4qff { + color: @mantle; + } + + .illkdv2c { + color: @maroon; + } + + .react-calendar__month-view__weekdays__weekday { + color: @subtext0; + } + + .CalendarTile--isCurrentWeek::after { + background-color: @mantle; + } + + .CalendarTile--isCurrentWeek { + color: @text; + } + + .AssemblyIcon--medium { + color: inherit; + } + + .AssemblyIconButton--tertiary { + color: @text; + } + + .AssemblyButtonBase--circle { + color: @text; + } + + .AssemblySecondaryButton { + background-color: @crust; + color: @text; + } + + .AssemblyPillText { + color: @text; + } + + .SiteActivity-button.isGlobalNavInExperiment { + color: @text; + } + + .UIIcon--large { + color: @text; + } + + .s1da1u6y { + background-color: @crust; + } + + .CalendarTile--hasEvent { + color: @mantle; + } + + .c1qopd51 { + color: @maroon; + } + + .AssemblyIconButton--primary { + background: @base; + } + + .AssemblyButtonBase:hover:not([disabled]), + [aria-disabled="true"] { + background: @mantle; + } + + .SiteActivity-button { + border-color: @overlay2; + color: @text; + } + + .SiteActivity-button:focus, + .SiteActivity-button:hover { + border-color: @overlay0; + color: @subtext1; + } + + .NotificationBadge-container { + background: @overlay2; + } + + [d17q91q7][aria-expanded="true"] { + background-color: @text; + } + + .UILinkBox-link .UILink:active, + .UILinkBox-link .UILink:focus, + .UILinkBox-link .UILink:hover { + border-bottom-color: @overlay2; + } + + .AssemblySmallCard-hover:hover::after { + background-color: @overlay2; + } + + .rellgo5 { + color: @text; + } + + #react-autowhatever-site-header-global-search-autosuggest { + background-color: @crust; + border-color: @mantle; + } + + .tqxyjjt { + color: @text; + } + + text { + color: @subtext1; + } + + li.react-autosuggest__suggestion:hover { + background: @mantle; + } + + .poy4xqf { + background: @crust; + border-color: @crust; + } + + .wej97zk { + background-color: @crust; + } + + .wvbj6cw { + background-color: @crust; + } + + .c721v4v { + color: @text; + } + + .c139umgt { + color: @text; + } + + .t1ow6gy9 { + color: @subtext1; + } + + .u1jilvfz { + background-color: @overlay2; + } + + .wej97zk:hover { + background-color: @mantle; + } + + .s1ovpdog { + background-color: @mantle; + border-top-color: @overlay0; + } + + .c1ap9d88 .AssemblyMenuItem--title { + color: @subtext0; + } + + .c1ap9d88:hover { + background-color: @base; + } + + .c1ap9d88 { + background-color: @mantle; + } + + .h1hbonvg { + background-color: @mantle; + } + + .UIBaseCard-labelTag { + background-color: @surface0; + color: @text; + } + + .UIIcon--chevron-right { + color: @text; + } + + .UIIcon--chevron-left { + color: @text; + } + + .UIPopover, + .UIPopover::after { + background-color: @mantle; + } + + .UIPopover.UIPopover--mediumShadow { + box-shadow: 0 0.125rem 0.25rem @crust; + } + + .SetRecommendationCard-contextMenuItem:hover { + background-color: @crust; + } + + .cxvmyeq { + border-color: @crust; + } + + .wxhi4p:hover { + background-color: @mantle; + } + + .AssemblyTab { + color: @subtext0; + } + + .AssemblyTab::after { + color: @subtext0; + } + + .s4cgp9b.AssemblyTab { + color: @text; + } + + .AssemblyTab:hover { + color: @lavender; + } + + .f1ub3img { + border-top-color: @overlay2; + } + + .AssemblyTabsWrapper::before { + background-color: @overlay2; + } + + .s4cgp9b.AssemblyTab::after { + background: @blue; + } + + .AssemblyTab:hover::after { + background: @blue; + } + + .w15oa27z:hover { + background: @mantle; + } + + .i1v4i7rf.textbookIcon { + background-image: url("https://assets.quizlet.com/a/j/dist/app/i/explanations/textbook_night.1ff39f68b703b28.svg"); + } + + .sinah8x { + color: @subtext0; + } + + .SetPage { + background-color: @base; + } + + .SetPage .SetPage-setDetailsInfoWrapper, + .SetPage .SetPage-setIntroWrapper.SetPage-setIntroWrapper { + background-color: @base; + } + + .SetPage-setDetailsInfoWrapper { + background-color: @base; + } + + .SetPage-setDetailsTermsWrapper { + background-color: @base; + } + + .SetPage .SetPage-setDetailsTermsWrapper, + .SetPage .SetPage-setLinksWrapper.SetPage-setLinksWrapper { + background-color: @base; + } + + .SiteFooter { + background-color: @base; + color: @text; + } + + .SiteFooter-bottom { + background-color: @base; + } + + .SetPageStickyHeader.is-pinned { + background-color: @crust; + } + + .StudyModesNavItem { + background-color: @mantle; + } + + .StudyModesNavItemName { + color: @text; + } + + .StudyModesNavItemName:visited { + color: @text; + } + + .c78g08u { + background-color: @mantle; + box-shadow: 0 0.25rem 1rem 0 @crust; + } + + .o1rf13bx { + color: @text; + } + + .lck97c5 { + background: @mantle; + } + + .SetPageTerm { + background: @mantle; + } + + .AssemblyIconButton--secondary { + background: @crust; + } + + .UIDropdown--inverted { + background: @base; + } + + .UIDropdown-select { + color: @text; + } + + .soyu1j6 { + color: @maroon; + } + + .s1e29328.cbb9lkx { + color: @red; + background: @rosewater; + border-color: @peach; + } + + .kahyre1 { + color: @green; + } + + .kzo3tk { + color: @blue; + } + + .SiteActivity-button .NotificationBadge-container { + background-color: @blue; + } + + .hgmlhdt { + background-color: @crust; + } + + .o1rfl3bx { + color: @text; + border-color: @overlay2; + } + + .c1lf7cxm { + color: @subtext0; + } + + .l3ucz5w { + color: @subtext1; + } + + .u3v4pv0 { + color: @subtext0; + } + + .StudyModesNavItem:hover { + border-bottom-color: @overlay2; + } + + .o1g4qwv { + background-color: @crust; + } + + .tqyy7cr.h19ive8k { + color: @text; + } + + .t1kgxwr0 { + color: @text; + } + + .tuxzbsj { + fill: @text; + } + + .c5iom2o { + color: @lavender; + } + + .lck97c5:focus .c5iom2o, + .lck97c5:hover .c5iom2o { + color: @blue; + } + + .t4sjwm7 { + color: @text; + } + + body.colorRefresh-setPageOnly .UISwitch-label { + color: @text; + } + + .UISwitch-label { + border-color: @overlay1; + background-color: @mantle; + color: @subtext0; + } + + .SetPageTerm-sideContent { + border-right-color: @overlay2; + } + + .UISwitch-input:checked:not(:disabled ~ .UISwitch-label) { + color: @mantle; + border-color: @yellow; + background-color: @yellow; + } + + .AssemblyIconButton--highlight { + background: none; + color: @yellow; + } + + .UIToggle-optionLabel { + background-color: @mantle; + color: @blue; + } + + .AssemblyIconButton--highlight:hover:not([disabled]) { + background-color: @crust; + } + + .AssemblyIconButton--tertiary:hover:not([disabled]) { + background-color: @crust; + } + + .AssemblyButtonBase--square { + color: @text; + } + + .z1x1k8pd.svwhkoh { + color: @green; + border-color: @green; + } + + .svwhkoh { + background-color: @mantle; + } + + .kzo3tk.cbb9lkx { + background: @green; + border-color: @green; + color: @blue; + } + + .kahyre1.l40n85g { + color: @green; + } + + .soyu1j6.l40n85g { + color: @red; + } + + .axrvw3e.s1e29328.cbb9lkx { + background: @flamingo; + border-color: @flamingo; + color: @red; + } + + .mnlifen { + background: @mantle; + } + + .f1yw38c3 { + background: none; + } + + .AssemblyToggleSwitch-input:checked + .AssemblyToggleSwitch-fauxInput { + background: @lavender; + } + + .AssemblyToggleSwitch-input:checked + + .AssemblyToggleSwitch-fauxInput::after { + background-color: @pink; + } + + .AssemblyToggleSwitch-fauxInput { + background: @overlay1; + } + + .AssemblyToggleSwitch-fauxInput::after { + background: @lavender; + } + + .c13e2cpr { + background-color: @mantle; + color: @text; + } + + .AssemblyInput { + background-color: @surface0; + color: @text; + } + + .AssemblyInput-input { + color: @subtext1; + } + + .a1k2umqi { + background-color: @crust; + } + + .bxtl8jy { + background-color: @surface0; + color: @text; + } + + .ah6785x { + color: @subtext1; + } + + .a1fcz3cu:focus-within > .ah6785x { + color: @subtext1; + } + + .e29yge6 + .react-autosuggest__container + .react-autosuggest__suggestions-container--open { + background: @mantle; + } + + .e1g8wmc7 { + background-color: @surface0; + } + + .AssemblyLink--secondary:hover { + color: @peach; + } + + .a1k2umqi:focus-within { + border-bottom-color: @blue; + } + + .cgyrcnx { + background-color: @overlay2; + } + + .byhd60 { + background-color: @maroon; + } + + .d11ucs5j { + background: @overlay2; + } + + .sjsxdsz { + border-bottom-color: @overlay2; + } + + .fz4nps6 { + border-top-color: @overlay2; + } + + .AssemblyPrimaryButton--default:disabled, + .AssemblyPrimaryButton--default[aria-disabled="true"] { + background: @surface0; + border-color: @base; + color: @subtext0; + } + + .ptc18zm { + background: inherit; + } + + .c1gi3y8b { + background: @crust; + } + + .k3lm6f3 { + background-color: @crust; + color: @text; + } + + .w1uwrq7e { + color: @text; + border-color: @overlay2; + } + + .t1d08860 { + color: inherit; + } + + .i1p8x1gp .i1e9rt5 { + color: @maroon; + } + + .i1p8x1gp { + background-color: @mantle; + } + + .i1p8x1gp, + .i1p8x1gp:focus, + .i1p8x1gp:hover { + border-color: @maroon; + } + + .cv1rd7s { + background: @mantle; + } + + .cv1rd7s, + .cv1rd7s:focus, + .cv1rd7s:hover { + border-color: @green; + } + + .cv1rd7s .i1e9rt5 { + color: @green; + } + + .b1jcf4jl { + background-color: @crust; + } + + .pck8ctn { + color: @text; + } + + .i6cf9vy { + color: @red; + } + + .c2mfnz6 { + color: @green; + } + + .pr2w5fu:first-child { + border-right-color: @overlay2; + } + + .t117larf { + background-color: @crust; + border-color: @overlay2; + color: @text; + } + + .q1m09plc:hover { + background-color: @crust; + } + + .q1m09plc { + color: @blue; + } + + .hbcu5v.q1m09plc { + color: @subtext1; + } + + .qzk5crt { + color: @text; + } + + .sd72jj0 { + color: @subtext1; + } + + .UIModalHeader { + background-color: @crust; + } + + .UIModalBody { + background-color: @mantle; + } + + .TestModeOptions { + background-color: @mantle; + } + + .UIModal-box { + color: @text; + } + + .UICheckbox-label { + color: @text; + } + + .UICheckbox-input:checked ~ .UICheckbox-fauxInput { + border-color: @yellow; + } + + .UICheckbox-fauxInput::after { + border-color: @yellow; + border-width: 0 0 0.125rem 0.125rem; + } + + .UIInput-input { + color: @text; + } + + .UIInput[aria-invalid="false"] .UIInput-input ~ .UIInput-border { + box-shadow: 0 0.125rem 0 0 @overlay2; + } + + .UILink, + .UILink:visited { + color: @rosewater; + } + + .UIButton:active, + html.cursor .UIButton:hover, + html.cursor .UIButton:hover:visited { + background-color: @sky; + } + + .UIHorizontalRule { + border-bottom-color: @overlay2; + } + + .OptionsModal-description, + .TestModeOptions-listOption-description { + color: @subtext0; + } + + .swjz05g { + background-color: @crust; + } + + .swjz05g, + .swjz05g:focus, + .swjz05g:hover { + border-color: @blue; + } + + .s2y71yx label { + background: @surface0; + } + + .s2y71yx input { + background: inherit; + color: @text; + } + + .TextbookRecommendations { + background: @crust; + } + + .TextbookCard-Details { + color: @subtext1; + } + + .AssemblyLink--title:any-link { + color: @text; + } + + .AssemblyLink--title:hover { + color: @yellow; + } + /* .AssemblyIcon--small { + color: @lavender; + } */ + + .ah3z5j1 { + border-color: @blue; + } + + .hkyil8p { + color: @blue; + } + + .e17gih4t { + border-color: @overlay2; + } + + .o1q1tz6w { + border-color: @overlay2; + color: @text; + } + + .hg3d33q { + border-color: #0000; + } + + .ser6cev, + .c86ukn8 { + color: @subtext0; + } + + .a99ei82 { + background-color: @mantle; + border-color: @overlay2; + } + + .qcpiy8g { + color: @text; + } + + .pqa404y { + color: @green; + } + + .s18c8hjh { + color: @maroon; + } + + .ljt3l6v { + fill: @subtext0; + } + + .c16l7630.iayao2g { + color: @green; + } + + .i1e9dzkh.iayao2g { + color: @maroon; + } + + .w1e3jc65 { + background-color: @mantle; + border-color: @mantle; + } + + .t7fr19y { + color: @lavender; + } + + .dw1ojws { + color: @subtext0; + } + + .w1e3jc65:hover { + border-color: @overlay2; + } + + .q1nxab59 { + color: @subtext1; + } + + .ssbjprp { + color: @subtext0; + } + + .smvj06a { + color: @subtext1; + } + + .cfzatrd.a548wz9 { + color: @green; + } + + .cag3g2z.anp68o5 { + color: @green; + } + + .CombinePage-wrap { + background-color: @base; + } + + .CombinePageTable-row { + background-color: @mantle; + } + + .CombinePageTable-rowTermCount { + color: @subtext1; + } + + .CombinePageTable-setTitle .UIHeading--four { + color: @text; + } + + .UIDropdown { + background: @mantle; + border-color: @crust; + } + + .UIDropdown .UIDropdown-icon { + color: @overlay2; + } + + .UIDropdown-select:focus option { + background: @mantle; + } + + option:hover { + background: @crust; + } + + .ModeControls { + background-color: @mantle; + } + + .ModeControls-backText { + color: @text; + } + + .ModeControls-back { + border-bottom-color: @overlay2; + } + + .UIButton--whiteBorder { + background: @crust; + border-color: @base; + color: @text; + } + + .MatchModeControls-currentTime { + color: @blue; + } + + .MatchModeQuestionScatterTile { + background-color: @mantle; + border-color: @overlay0; + } + + .MatchModeQuestionScatterTile.is-draggedOver, + .MatchModeQuestionScatterTile.is-dragging, + .MatchModeQuestionScatterTile:hover { + border-color: @overlay2; + } + + .MatchModeQuestionScatterTile.is-incorrect { + border-color: @maroon; + } + + .MatchModeQuestionScatterTile.is-correct { + border-color: @green; + } + + .HighscoresList { + background-color: @crust; + } + + .HighscoreRow { + background-color: @mantle; + } + + .UIButton[aria-disabled="true"], + .UIButton[aria-disabled="true"]:active, + .UIButton[aria-disabled="true"]:focus, + .UIButton[aria-disabled="true"]:visited, + .UIButton[disabled], + .UIButton[disabled]:active, + .UIButton[disabled]:focus, + .UIButton[disabled]:visited, + html.cursor .UIButton[aria-disabled="true"]:hover, + html.cursor .UIButton[disabled]:hover { + background-color: @mantle; + } + + .t10tqhey { + background-color: @mantle; + color: @text; + border-color: @crust; + } + + .t9i9vmb.h19ive8k, + .t1s26kx5.h19ive8k, + .s1rx7q8q.h19ive8k { + color: @text; + } + + .s8j1d54, + .c49e2ip { + color: @subtext1; + } + + .c6p6uaq .react-calendar__month-view__days__day { + color: @text; + } + + .c6p6uaq .react-calendar__month-view__days__day--neighboringMonth { + color: @subtext0; + } + + .AchievementsImage--isActive .a130rwfv, + .al33ekg.isActive .a130rwfv { + color: @subtext0; + } + + .s1rtnf4c::before, + .s1rtnf4c::after { + background: none; + } + + .AchievementsImage--isActive .a130rwfv, + .al33ekg.isActive .a130rwfv, + .DashboardLayout .SetPreviewLink--noLinkBox, + .DashboardLayout .PreviewCard--noLinkBox { + background-color: @mantle; + } + + .SetPreview-queryMatchHighlight { + background: @yellow; + color: @base; + } + + .cpey3pe { + color: @text; + } + + .s1fl65t6 { + color: @subtext0; + } + + .t1ne2oir { + color: @text; + } + + .b1xq6unb { + color: @text; + } + + .bp0a7jj { + color: @subtext1; + } + + .pltikop { + color: @blue; + } + + .SettingsBox-box { + background-color: @mantle; + } + + .EdgyDataCoursePillbox .UIPill { + background: @crust; + border-color: @overlay2; + color: @text; + } + + .UIAutosuggest .react-autosuggest__suggestions-container { + background: @mantle; + } + + .UIAutosuggest .react-autosuggest__suggestion { + border-bottom-color: @overlay2; + } + + .UIAutosuggest + .react-autosuggest__suggestion.react-autosuggest__suggestion--highlighted { + border-bottom-color: @yellow; + } + + .EdgyDataCourseSelector-suggestion .EdgyDataCourseSelector-suggestionName { + color: @text; + } + + .UIInput-input.UIInput-autoExpandInput.is-focused ~ .UIInput-border, + .UIInput-input:focus ~ .UIInput-border { + box-shadow: 0 0.25rem 0 0 @yellow; + } + + .Divider-label { + background: @mantle; + } + + .the-label, + .UIButton { + color: @crust; + } + + input:checked + .p22broa { + box-shadow: 0 0 0 0.25rem @blue; + } + + .button.google { + background-color: @red; + border-color: @peach; + } + + .button.google::after { + border-right-color: @peach; + } + + .b1opuclq { + background-color: @mantle; + box-shadow: 0 0.25rem 1rem 0 @crust; + } + + .button.apple .label, + .button.facebook .label, + .button.google .label { + color: @crust; + } + + .button.facebook { + background-color: @blue; + border-color: @lavender; + } + + .button.facebook::after { + border-right-color: @lavender; + } + + .UIInput-input:-webkit-autofill, + .UIInput-input:-webkit-autofill:focus, + .UIInput-input:-webkit-autofill:hover { + box-shadow: none !important; + } + .UIInput-input:-internal-autofill-previewed, + .UIInput-input:-internal-autofill-selected { + -webkit-text-fill-color: @text; + } + + .UILink:active, + html.cursor .UILink:hover, + html.cursor .UILink:hover:visited { + color: @maroon; + } + + .setting legend, + .setting p { + color: @text; + } + + .UIButton-wrapper { + color: inherit; + } + + .UIButton--alert:active, + html.cursor .UIButton--alert:hover, + html.cursor .UIButton--alert:hover:visited { + background-color: @maroon; + } + + .c1qo8ql4 { + background-color: @base; + } + + .phx9gy6 { + color: @text; + } + + .soad3d7 { + color: @text; + } + + .AssemblyLink--primary:any-link { + color: @rosewater; + } + + .AssemblyLink { + color: @rosewater; + } + + .UIButton--borderless:active, + html.cursor .UIButton--borderless:hover, + html.cursor .UIButton--borderless:hover:visited { + background-color: initial; + color: @yellow; + } + + .UIButton--borderless[aria-disabled="true"], + .UIButton--borderless[aria-disabled="true"]:active, + .UIButton--borderless[aria-disabled="true"]:focus, + .UIButton--borderless[aria-disabled="true"]:visited, + .UIButton--borderless[disabled], + .UIButton--borderless[disabled]:active, + .UIButton--borderless[disabled]:focus, + .UIButton--borderless[disabled]:visited, + html.cursor .UIButton--borderless[aria-disabled="true"]:hover, + html.cursor .UIButton--borderless[disabled]:hover { + background-color: initial; + } + + .s19dmjr1.isGlobalNavInExperiment.is-focused, + .s19dmjr1.isGlobalNavInExperiment.is-focused input { + background: @surface0; + } + + .t1iqlnnn p { + color: @subtext1; + } + + .axupt8p, + .igkckaz { + color: @rosewater; + } + + .axupt8p:active, + .axupt8p:focus, + .axupt8p:hover { + color: @flamingo; + } + + .cnuw08l { + background-color: @mantle; + } + + .c192jkj8 { + color: @text; + } + + .a1sd82zg { + background-color: @crust; + border-left-color: @lavender; + } + + .g84nzqs { + background-image: none; + } + + .du7o3ew > div:not(:last-child) { + border-right-color: @overlay2; + } + + .i73vo82:hover { + color: @crust; + background-color: @crust; + } + + .f2nmi2p { + border-top-color: @overlay2; + } + + .a1scx0nz { + background-color: @mantle; + } + + .a4ouqer { + color: @text; + } + + .t104cykg { + color: @text; + } + + .ExplanationsLandingPage #PrismicExplanationsSearchBarTarget label, + .ExplanationsLandingPage #SearchBarTarget label, + .explanations.prismic-page #PrismicExplanationsSearchBarTarget label, + .explanations.prismic-page #SearchBarTarget label { + background-color: @surface0; + } + + .l1rgb1ub { + border-color: @overlay2; + } + + .theme-night .h1uvmh9x, + .h1uvmh9x { + background: @mantle; + } + + .h1wn8ccf { + color: @text; + } + + .ccm0r9d { + color: @subtext0; + } + + .AssemblySmallCard-isActive::after { + background-color: @lavender; + } + + .i192320l { + border-color: @mantle; + } + + .b1j40uwt::before { + background-color: @mantle; + } + + .theme-night .g84nzqs { + background: none; + } + + .CreateSetHeader-sticky { + background: @base; + } + + .a1fcz3cu { + background-color: @surface0; + } + + .CreateSetHeader-permissionsLink { + color: @subtext1; + } + + .CreateSetDiagramUploader .UIFloatedCard--white, + .TermContent-inner { + background-color: @mantle; + } + + .CreateSetDiagramUploader-banner { + border-color: @overlay0; + } + + .AssemblyIconButton--primaryInverted { + border-color: @overlay2; + } + + .StudiableItemToolbar { + border-bottom-color: @overlay2; + } + + .b18prmdf { + box-shadow: 0 0.125rem 0 0 @overlay2; + } + + .ImageUploadProminentContextToggle { + border-color: @overlay0; + } + + .UILinkButton { + border-bottom-color: @blue; + color: @text; + } + + .p10i2lyl { + background-color: @mantle; + } + + * + .KeyboardShortcuts-shortcut, + .KeyboardShortcuts-shortcut + *, + .KeyboardShortcuts-shortcut + .KeyboardShortcuts-shortcut { + border-top-color: @overlay2; + } + + .UIKeyboardInput { + color: @text; + border-color: @overlay2; + } + + .UIDropdown-select option { + color: @text; + } + + .UIButton--inverted:active, + html.cursor .UIButton--inverted:hover, + html.cursor .UIButton--inverted:hover:visited { + box-shadow: inset 0 0 0 3px @overlay2; + } + + .PMEditor:focus-within ~ .b18prmdf { + box-shadow: 0 0.25rem 0 0 @yellow; + } + + .UITooltip, + .UITooltip::after { + background: @crust; + } + + :not(.ie11 .UITooltip), + :not(.ie11 .UIPopover) { + filter: none; + } + + .LanguageSelect-option:hover, + .Select-option.is-focused .LanguageSelect-option { + background-color: @yellow; + } + + .i1u1jhdl { + background-color: @crust; + } + + .TermRowDragPlaceholder { + background: @base; + } + + .CreateSetDiagramUploader-banner.is-dropTarget { + border-color: @yellow; + } + + .TermContent-addRow:hover .UILinkButton { + border-bottom-color: @yellow; + } + + .tetv1rf.t8spden:hover { + background-color: @crust; + } + + .ImportTerms { + background-color: @base; + } + + .ImportTerms-import, + .ImportTerms-preview { + background-color: @base; + } + + .ImportTerms-textarea { + color: @text; + border-color: @overlay2; + } + + .TermRowsPreview .TermRowsPreview-row { + background: @mantle; + } + + .UIRadio-input:checked ~ .UIRadio-fauxInput { + border-color: @yellow; + } + + .UIRadio-fauxInput::after { + background-color: @yellow; + } + + .UILinkButton:active, + .UILinkButton:focus, + .UILinkButton:hover { + border-bottom-color: @yellow; + } + + .AutosuggestContextItem { + background-color: @crust; + color: @text; + } + + .AssemblyNotice-error { + border-color: @red; + background-color: @surface0; + } + + .TermRow.is-duplicate { + outline-color: @yellow; + } + + .AssemblyPrimaryButton--danger { + background: @red; + color: @crust; + } + + .AssemblyPrimaryButton--danger:hover:not([disabled]), + [aria-disabled="true"] { + background: @pink; + } + + .s19dmjr1.is-focused, + .s19dmjr1.is-focused input, + .s2y71yx label, + .s2y71yx.is-expanded label { + background: @surface0; + color: @text; + } + + .eeiq5c0 { + color: @text; + } + + .t1r0fp00, + .t1elfe8k { + color: @subtext0; + } + + .MobilePage { + background: @base; + } + + .MobilePage-feature { + border-color: @overlay2; + } + + .MobilePage-anyDevice { + border-top-color: @overlay2; + } + + .AssemblyTextButton--secondary { + color: @text; + } + + .AssemblyPrimaryButton--upgrade { + background: @yellow; + } + + .page, + .PrismicSimpleRichText--white, + .PrismicTextCallout--whiteBackground, + .PrismicVideoEmbedWithText--whiteBackground, + .p1mcvm6s, + .PrismicImageTextTile--whiteBackground, + .PrismicTextCallout--twilightBlue200Background, + #SearchResultsPageHeader-mainExperiment { + background-color: @base; + } + + .tfomyx6, + .i1rs7b62, + .d5ww82k { + color: @text; + } + + .cssrxmc { + background-color: @yellow; + } + + .PrismicImageTextTile-tileWrapper { + background-color: @mantle; + } + + .AssemblyPrimaryButton--upgrade:hover:not([disabled]) { + background: @rosewater; + } + + .s1qq0zr7 { + background-color: @mantle; + } + + .sv0yvnj a, + .sv0yvnj a:visited:not(:last-child) { + color: @text; + } + + .sg4pwu6:hover, + .hivq638, + .s1ahro8n:hover { + background-color: @crust; + } + + .e7lqtuc + .react-autosuggest__suggestions-container.react-autosuggest__suggestions-container--open { + background-color: @mantle; + } + + .e7lqtuc .react-autosuggest__section-title, + .SearchResultsPageHeader-queryFeedback, + .SearchResultsPage-contentType .SearchResultsPage-emptyStateHeadline, + .SearchResultsPage-contentType .SearchResultsPage-emptyStateDescription, + .SearchResultsPage-contentType + .SearchResultsPage-emptyStateSuggestionsList { + color: @text; + } + + .markdown-body { + color: @subtext1; + } + + .e7lqtuc + li.react-autosuggest__suggestion.react-autosuggest__suggestion--highlighted, + .e7lqtuc li.react-autosuggest__suggestion:hover { + background-color: @crust; + border-color: @lavender; + } + + .UserPreviewCard-username, + .ClassPreviewCard-title { + color: @text; + } + + .UserPreviewCard-classesDescription, + .UserPreviewCard-createdSetsDescription, + .QuestionCard-subject, + .ClassPreviewCard-location, + .ClassPreviewCard-membersDescription, + .ClassPreviewCard-studySetsDescription { + color: @subtext1; + } + + .QuestionCard-bottomGradient { + background-image: none; + } + + .AssemblyTextButton--primary { + color: @rosewater; + } + + .TosLegend--normal { + color: @subtext1; + } + + .AssemblyLink--secondary:any-link { + color: @rosewater; + } + + .lghzn8f, + .a1cdxe01.h9lvpq { + color: @text; + } + + .s1mff1xn, + .AssemblyCheckbox-label { + color: @text; + } + + .ccnmm10 { + background-color: @mantle; + } + + .c1g4obhz { + background-color: @crust; + color: @text; + } + + .SetPageTerm-wordText, + .SetPageTerm-definitionText { + color: @text; + } + + .SetPageTerms-embeddedDesktopAdWrapper { + background: @mantle; + } + + .c1qw5oc { + background: @crust; + border-bottom-color: @surface0; + } + + .c19lfjrd, + .l1fkuqeb { + background-color: @base; + } + + .bxyvgmh { + background-color: @mantle; + } + + .ata5p6z[aria-disabled="true"], + .ata5p6z[aria-disabled="true"] div, + .ata5p6z[aria-disabled="true"] textarea { + background-color: @mantle; + } + + .ata5p6z { + border-color: @overlay2; + background-color: @mantle; + } + + .AssemblyIconButton--primary:disabled, + .AssemblyIconButton--primary[aria-disabled="true"] { + background: @surface1; + color: @text; + } + + .ugcsb7m { + background-color: @blue; + color: @crust; + } + + .AssemblySecondaryButton:disabled, + .AssemblySecondaryButton[aria-disabled="true"] { + background-color: @base; + border-color: @overlay2; + } + + .m9mf1hr div, + .m9mf1hr textarea { + background-color: @mantle; + } + + .lu5rlws { + color: @subtext1; + } + + .b1yjduyh { + background-color: @mantle; + } + + .d6tac4m { + background-color: @surface0; + } + + .RecentFeed-empty { + background-color: @mantle; + } + + .i1ykvw4f { + background: @mantle; + } + + .i1ykvw4f:hover { + background: @crust; + } + + .RecentFeed-empty--cta { + color: @text; + } + + .UIButton--whiteBorder:active, + html.cursor .UIButton--whiteBorder:hover, + html.cursor .UIButton--whiteBorder:hover:visited { + color: @yellow; + } + + .c124zyvn { + background: @base; + } + + .AssemblyLink--primary:hover { + color: @maroon; + } + + .cczh2hb, + .h1jftztg, + .t2m5erc { + color: @text; + } + + .t1nv0ihp, + .sku1zau, + .s54kfc3 { + color: @subtext1; + } + + .ImageUploadProminentContextToggle + .ImageUploadProminentContextToggle-IconExplanation { + color: @text; + } + + .SiteHeaderLogo-link { + color: @blue; + } + + .c1sgnxr5 { + color: @green; + } + + .suyglfi { + color: @text; + } + + .s2y71yx + li.react-autosuggest__suggestion.react-autosuggest__suggestion--highlighted, + .s2y71yx li.react-autosuggest__suggestion:hover { + background: @mantle; + } + + .q1kwd3of { + color: @overlay2; + } + + .c1741jrq:not(:first-child) { + border-top-color: @overlay2; + } + + .SetsView-studySetResults { + color: @text; + } + + .UILink .SetPreview-cardHeaderTitle, + .UILink .SetPreview-cardHeaderTitle:visited, + html.touch .UILink .SetPreview-cardHeaderTitle:focus:hover:not(:active) { + color: @text; + } + + .SetPreview-cardBylineClass { + color: @subtext0; + } + + .UILink .SetPreview-cardHeaderTitle:active, + html.cursor .UILink .SetPreview-cardHeaderTitle:hover, + html.cursor .UILink .SetPreview-cardHeaderTitle:hover:visited { + color: @yellow; + } + + .e29yge6 + .react-autosuggest__container + .react-autosuggest__suggestion.react-autosuggest__suggestion--highlighted, + .e29yge6 + .react-autosuggest__container + .react-autosuggest__suggestion:hover { + background-color: @crust; + } + + .e29yge6 .react-autosuggest__container .react-autosuggest__suggestion { + border-bottom-color: @mantle; + } + + .EdgyDataCourseSelector-addYourOwn { + color: @blue; + } + + .i5h71e0 { + background-color: @surface0; + } + + .ikdjsw2 { + color: @text; + } + + .i1m3kkj2 { + color: @text; + } + + .i1190urg { + color: @subtext0; + } + + .le206v0 { + border-color: @overlay2; + } + + .sby7w0g { + background: @overlay2; + } + + .c3s5vdc:hover { + background-color: @blue; + } + + .g4cyoxx { + color: @text; + } + + .s1lyn4nc { + background: @blue; + } + + .UIModal.is-white .UIModal-box { + background: @mantle; + } + + .UIModalBadge { + background-color: @blue; + color: @crust; + } + + .CombinePage-sourceSelectWrap .UIFieldset-legend { + color: @text; + } + + .k1reqlz9.ijrfqxy svg { + fill: @green; + } + + .dhmqhsx.ijrfqxy svg { + fill: @red; + } + + .c6p6uaq .react-calendar__navigation__label { + color: @text; + } + + .c6p6uaq .react-calendar__navigation__arrow { + color: @text; + } + + .c6p6uaq .react-calendar__navigation__arrow:disabled { + color: @overlay1; + } + + .f1sxiitf { + background: none; + } + + .c1ext0pg { + background-color: @surface1; + color: @text; + } + + .sl7nfp9 { + background-color: @mantle; + } + + .sdw19mu .SetPreviewCardV1 { + border-bottom-color: @overlay2; + } + + .fiejqa { + background: none; + } + + .t1ied0h6 { + color: @subtext1; + } + + .SetListMediumCard-isActive::before { + background-color: @lavender; + } + + .c51obz3 { + background-color: @base; + } + + .s80h93u { + color: @text; + border-color: @overlay2; + } + + .s80h93u:active:not([disabled]), + .s80h93u:hover:not([disabled]) { + background: @crust; + } + + .r78nxpu > div:hover { + background-color: @mantle; + } + + .stbnqj0 { + color: @text; + } + + .c1n6gny6, + .to5kbh1 { + color: @text; + } + + .tb3hrve { + color: @subtext0; + } + + .HurricaneBanner--default { + background: @crust; + border-bottom-color: @surface0; + } + + .HurricaneBanner--default .HurricaneBanner-text { + color: @text; + } + + .StudyModesNavSectionTitle { + color: @text; + } + + .cgkxufs { + background: @crust; + border-bottom-color: @overlay0; + } + + .TeacherChoosePageView-gameTypeOption { + background-color: @mantle; + } + + .TeacherChoosePageView-gameTypes--text { + color: @text; + } + + .TeacherChoosePageView-gameTypes--description { + color: @subtext0; + } + + .TeacherChoosePageView-gameTypes--cta, + .CardContent-cta { + color: @blue; + } + + .TeacherChoosePageView-gameTypeOption:hover, + .PlayModeCard:hover { + border-bottom-color: @yellow; + } + + .PlayModeCard:active, + .PlayModeCard:focus:not(:active:not(:hover)), + html.cursor .PlayModeCard:hover, + html.cursor .PlayModeCard:hover:visited { + border-color: @yellow; + } + + .PlayModeCard { + background-color: @mantle; + } + + .CardContent-option { + background: @crust; + color: @text; + } + + .CardContent-text, + .CardContent-title { + color: @text; + } + + .TeacherLobbyView-join { + background-color: @mantle; + } + + .TeacherLobbyView .UIFloatedCard, + .TeacherStartGameView-side, + .TeacherEndView-side { + background: @crust; + } + + .theme-night .TeacherLobbyView .UIFloatedCard { + border-color: @overlay2; + } + + .TeacherLobbyView-join--instructionLink .UIButton { + color: @blue; + } + + .TeacherLobbyView-player:hover { + color: @red; + } + + .td5er02 .UIFloatedCard { + background-color: @mantle; + } + + .TermStat--perfectTerms .TermStat-header { + background-color: @green; + } + + .TermStat-header { + color: @mantle; + } + + .TermStatGroup-navProgress { + color: @subtext0\1; + } + + .TeacherEndView-side--bottomButton .UIButton.UIButton--whiteBorderRounded { + color: @text; + } + + .SegmentedControl.SegmentedControl--quizletBlue + .SegmentedControl-navItem.is-active, + .segmented-control.SegmentedControl--quizletBlue + .SegmentedControl-navItem.is-active { + background: @lavender; + color: @crust; + } + + .StudyWhileWaitingView { + background-color: @base; + } + + .firefox + .CardsList.CardsList--showSingle + .CardsItem + .CardsItemSide + .CardsItemInner, + .ie11 + .CardsList.CardsList--showSingle + .CardsItem + .CardsItemSide + .CardsItemInner, + .webkit + .CardsList.CardsList--showSingle + .CardsItem + .CardsItemSide + .CardsItemInner { + background-color: @mantle; + } + + .StudentTeamView-teamInner { + background-color: @mantle; + } + + .StudentAnswerOption .UIButton { + background-color: @mantle !important; + } + + .StudentAnswerOption .UIButton:active, + html.cursor .StudentAnswerOption .UIButton:hover, + html.cursor .StudentAnswerOption .UIButton:hover:visited { + border-color: @yellow; + } + + .StudentPlayingHeader { + background: @crust; + } + + .StudentLeaderboard-headstart { + background: @blue; + } + + .StudentLeaderboard { + background: @lavender; + } + + .StudentLeaderboard-team { + background: @blue; + } + + .StudentGameboard-feedback.is-incorrectAnswer { + background: @red; + } + + .StudentAnswerOption.is-showingIncorrectFeedback.StudentAnswerOption + .UIButton { + background: @red !important; + } + + .StudentAnswerOption.is-showingCorrectFeedback.StudentAnswerOption + .UIButton { + background: @green !important; + } + + .StudentIncorrectAnswerFeedback-section--correct + .StudentIncorrectAnswerFeedback-heading { + color: @green; + } + + .TermStat--learnedTerms .TermStat-header { + background-color: @red; + } + + .TeacherChoosePageView-gameTypeOption:active, + .TeacherChoosePageView-gameTypeOption:focus:not(:active:not(:hover)), + html.cursor .TeacherChoosePageView-gameTypeOption:hover, + html.cursor .TeacherChoosePageView-gameTypeOption:hover:visited { + border-color: @yellow; + } + + .tllqvk3, + .c1tmoumb { + background-color: @mantle; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/raindrop/catppuccin.user.css b/styles/raindrop/catppuccin.user.css index f4f5189a22..f56e0f7826 100644 --- a/styles/raindrop/catppuccin.user.css +++ b/styles/raindrop/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Raindrop Catppuccin +@name Raindrop Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/raindrop @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/raindrop -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/raindrop/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/raindrop/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Araindrop @description Soothing pastel theme for Raindrop @author Catppuccin @@ -13,155 +13,4 @@ @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('app.raindrop.io') { - [data-theme="night"] { - #catppuccin(@darkFlavor, @accentColor) !important; - } - [data-theme="day"], - [data-theme="sunset"] { - #catppuccin(@lightFlavor, @accentColor); - } - - // theme selector previews - [class^="theme-"] { - &[data-index="0"], - &[data-index="2"] > [class^="main-"], - &[data-index="3"] { - #catppuccin(@lightFlavor, @accentColor) !important; - } - &[data-index="1"], - &[data-index="2"] > [class^="sidebar-"] { - #catppuccin(@darkFlavor, @accentColor) !important; - } - } - - #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; - } - } - - &, - [data-theme] { - --background-color: @base; - --disable-background-color: @crust; - --disable-text-color: @overlay1; - --accent-color: @accent-color; - --alternative-background-color: @mantle; - --sidebar-background-color: @mantle; - --hover-background-color: fade(@overlay0, 20%); - --active-background-color: @surface1; - --primary-text-color: @text; - --secondary-text-color: @subtext0; - --shadow-color: fade(@text, 10%); - --shadow-light-color: fade(@text, 10%); - --danger-color: @red; - --important-color: @red; - --success-color: @green; - --highlights-color: @mauve; - --reminder-color: @peach; - --note-color: @yellow; - --article-color: @peach; - --audio-color: @mauve; - --document-color: @subtext0; - --book-color: @rosewater; - --image-color: @green; - --video-color: @blue; - --broken-color: @maroon; - --duplicate-color: @sapphire; - --tag-color: @subtext0; - --filter-color: @subtext0; - - [data-variant="active"] { - background: fade(@accent-color, 10%) !important; - } - // bookmark edit page header - [class^="header-"][data-fancy="true"] { - background: linear-gradient( - to bottom, - var(--background-color) 30%, - fade(@base, 60%) 100% - ); - } - // bookmark edit page cover selector - [class^="cover-"] > [class^="more-"] { - background: fade(@accent-color, 85%); - } - // add bookmark button text color - [title="Add Bookmark"] { - color: @base; - } - // disabled add bookmark button - [class^="button-"][data-variant="primary"][disabled] { - filter: none; - opacity: 100%; - background: @overlay0; - color: @crust; - } - // dropping bookmark to collection color overlay - [class*="isDropping-"] { - background-color: fade(@accent-color, 10%); - } - // sidebar background color - .svSidebar { - background: var(--sidebar-background-color); - } - color: @text; - } - // google login button - [href^="https://api.raindrop.io/v1/auth/google"] > span - { - color: @text; - } - - // todo: recolor "Colors circle" icons using custom images (like the chess.com theme) - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/raindrop/catppuccin.user.less b/styles/raindrop/catppuccin.user.less new file mode 100644 index 0000000000..c26a12e711 --- /dev/null +++ b/styles/raindrop/catppuccin.user.less @@ -0,0 +1,164 @@ +/* ==UserStyle== +@name Raindrop Catppuccin +@namespace github.com/catppuccin/userstyles/styles/raindrop +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/raindrop +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/raindrop/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Araindrop +@description Soothing pastel theme for Raindrop +@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("app.raindrop.io") { + [data-theme="night"] { + #catppuccin(@darkFlavor, @accentColor) !important; + } + [data-theme="day"], + [data-theme="sunset"] { + #catppuccin(@lightFlavor, @accentColor); + } + + // theme selector previews + [class^="theme-"] { + &[data-index="0"], + &[data-index="2"] > [class^="main-"], + &[data-index="3"] { + #catppuccin(@lightFlavor, @accentColor) !important; + } + &[data-index="1"], + &[data-index="2"] > [class^="sidebar-"] { + #catppuccin(@darkFlavor, @accentColor) !important; + } + } + + #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; + } + } + + &, + [data-theme] { + --background-color: @base; + --disable-background-color: @crust; + --disable-text-color: @overlay1; + --accent-color: @accent-color; + --alternative-background-color: @mantle; + --sidebar-background-color: @mantle; + --hover-background-color: fade(@overlay0, 20%); + --active-background-color: @surface1; + --primary-text-color: @text; + --secondary-text-color: @subtext0; + --shadow-color: fade(@text, 10%); + --shadow-light-color: fade(@text, 10%); + --danger-color: @red; + --important-color: @red; + --success-color: @green; + --highlights-color: @mauve; + --reminder-color: @peach; + --note-color: @yellow; + --article-color: @peach; + --audio-color: @mauve; + --document-color: @subtext0; + --book-color: @rosewater; + --image-color: @green; + --video-color: @blue; + --broken-color: @maroon; + --duplicate-color: @sapphire; + --tag-color: @subtext0; + --filter-color: @subtext0; + + [data-variant="active"] { + background: fade(@accent-color, 10%) !important; + } + // bookmark edit page header + [class^="header-"][data-fancy="true"] { + background: linear-gradient( + to bottom, + var(--background-color) 30%, + fade(@base, 60%) 100% + ); + } + // bookmark edit page cover selector + [class^="cover-"] > [class^="more-"] { + background: fade(@accent-color, 85%); + } + // add bookmark button text color + [title="Add Bookmark"] { + color: @base; + } + // disabled add bookmark button + [class^="button-"][data-variant="primary"][disabled] { + filter: none; + opacity: 100%; + background: @overlay0; + color: @crust; + } + // dropping bookmark to collection color overlay + [class*="isDropping-"] { + background-color: fade(@accent-color, 10%); + } + // sidebar background color + .svSidebar { + background: var(--sidebar-background-color); + } + color: @text; + } + // google login button + [href^="https://api.raindrop.io/v1/auth/google"] > span { + color: @text; + } + + // todo: recolor "Colors circle" icons using custom images (like the chess.com theme) + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/reddit/catppuccin.user.css b/styles/reddit/catppuccin.user.css index 83d41935b7..9e00ccaf31 100644 --- a/styles/reddit/catppuccin.user.css +++ b/styles/reddit/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Reddit Catppuccin +@name Reddit Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/reddit @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/reddit -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/reddit/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/reddit/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Areddit @description Soothing pastel theme for Reddit @author Catppuccin @@ -13,1137 +13,4 @@ @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("reddit.com") { - :root:not(.theme-dark) .theme-rpl, - :root:not(.theme-dark).theme-rpl, - :root:not(.theme-dark) .theme-beta, - :root:not(.theme-dark).theme-beta, - .theme-light { - #catppuccin(@lightFlavor, @accentColor); - } - - :root:not(.theme-light) .theme-rpl, - :root:not(.theme-light).theme-rpl, - :root:not(.theme-light) .theme-beta, - :root:not(.theme-light).theme-beta, - .theme-dark { - #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; - } - } - - /* BETA */ - --color-pizzaRed: @red !important; - --color-global-brand-orangered: @peach !important; - --color-global-focus: @surface1 !important; - --color-interactive-content-disabled: @subtext0 !important; - --color-interactive-background-disabled: fade(@surface2, 70%) !important; - --color-interactive-pressed: @surface2 !important; - --color-neutral-content: @text !important; - --color-neutral-content-disabled: @subtext0 !important; - --color-neutral-content-weak: @subtext0 !important; - --color-neutral-content-strong: @text !important; - --color-global-white: @crust !important; - --color-neutral-background: @base !important; - --color-neutral-background-selected: @surface0 !important; - --color-neutral-background-weak: @mantle !important; - --color-neutral-background-medium: @base !important; - --color-neutral-background-strong: @crust !important; - --color-neutral-background-hover: @surface0 !important; - --color-neutral-border: @surface0 !important; - --color-neutral-border-medium: @surface0 !important; - --color-neutral-border-weak: @surface0 !important; - --color-neutral-border-strong: @surface2 !important; - --color-primary: @accent-color !important; - --color-primary-hover: lighten(@accent-color, 10%) !important; - --color-primary-visited: @lavender !important; - --color-primary-background: @accent-color !important; - --color-primary-background-hover: darken(@accent-color, 5%) !important; - --color-primary-background-selected: darken(@accent-color, 5%) !important; - --color-primary-onBackground: @base !important; - --color-primary-onBackground-selected: @crust !important; - --color-secondary: @subtext0 !important; - --color-secondary-hover: @subtext1 !important; - --color-secondary-weak: @subtext0 !important; - --color-secondary-onBackground: @text !important; - --color-secondary-background: @mantle !important; - --color-secondary-background-hover: @surface1 !important; - --color-secondary-background-selected: @surface1 !important; - --color-secondary-plain: @subtext0 !important; - --color-secondary-plain-hover: @subtext1 !important; - --color-danger-background: @red !important; - --color-danger-background-disabled: fadeout(@red, 80%) !important; - --color-danger-background-hover: fadeout(@red, 2%) !important; - --color-danger-onBackground: @text !important; - --color-danger-content: @red !important; - --color-danger-content-default: @crust; - --color-danger-content-hover: darken(@red, 2%) !important; - --color-success-content: @green !important; - --color-success-hover: darken(@green, 2%) !important; - --color-success-onBackground: @crust; - --color-success-background: @green !important; - --color-success-background-hover: darken(@green, 2%) !important; - --color-warning-content: @yellow !important; - --color-warning-content-hover: darken(@yellow, 2%) !important; - --color-warning-onBackground: @base !important; - --color-warning-background: @yellow !important; - --color-warning-background-hover: darken(@yellow, 2%) !important; - --color-upvote-content: @accent-color !important; - --color-upvote-disabled: @subtext0 !important; - --color-upvote-onBackground: @text !important; - --color-upvote-background: @base !important; - --color-upvote-background-hover: darken(@accent-color, 5%) !important; - --color-upvote-background-disabled: @base !important; - --color-downvote-content: @text !important; - --color-downvote-content-weak: @text !important; - --color-downvote-disabled: @subtext0 !important; - --color-downvote-onBackground: @text !important; - --color-downvote-background: @base !important; - --color-downvote-background-hover: darken(@blue, 5%) !important; - --color-downvote-background-disabled: @mantle !important; - --color-tone-1: @text !important; - --color-tone-2: @subtext0 !important; - --color-tone-3: @overlay2 !important; - --color-tone-4: @surface0 !important; - --color-tone-5: @surface1 !important; - --color-tone-6: @surface2 !important; - --color-tone-7: @base !important; - --color-avatar-gradient: @accent-color !important; - --color-transparent-background-hover: fadeout(@surface0, 70%) !important; - --color-opacity-50: fadeout(@base, 50%) !important; - --color-online: @accent-color !important; - --color-favorite: @accent-color !important; - --color-brand-background: @accent-color !important; - --color-brand-background-hover: darken(@accent-color, 5%) !important; - --color-brand-onBackground: @crust !important; - --color-global-orangered: @accent-color !important; - --color-action-upvote: @accent-color !important; - --color-action-downvote: @blue; - --color-banner-error-text: @base !important; - - --shreddit-color-wordmark: @accent-color; - #reddit-logo { - circle[fill="#FF4500"] { - fill: @accent-color !important; - } - path[fill="#FFF"] { - fill: @crust !important; - } - } - - /* normal stuff */ - - &, - div[class^="subredditvars"] { - --color-online: @green !important; - --newCommunityTheme-actionIcon: @subtext0 !important; - --newCommunityTheme-actionIconAlpha20: fadeout(@crust, 20%) !important; - --newCommunityTheme-actionIconAlpha50: fadeout(@crust, 20%) !important; - --newCommunityTheme-actionIconShaded80: @subtext0 !important; - --newCommunityTheme-actionIconTinted80: @subtext1 !important; - --newCommunityTheme-active: @accent-color !important; - --newCommunityTheme-activeAlpha10: fadeout(@crust, 20%) !important; - --newCommunityTheme-activeAlpha20: fadeout(@crust, 20%) !important; - --newCommunityTheme-activeAlpha50: fadeout(@crust, 20%) !important; - --newCommunityTheme-activeLight60: @accent-color !important; - --newCommunityTheme-activeShaded80: @accent-color !important; - --newCommunityTheme-activeShaded90: @accent-color !important; - --newCommunityTheme-activeTinted05: @text !important; - --newCommunityTheme-banner-backgroundColor: @accent-color !important; - --newCommunityTheme-banner-iconColor: @accent-color !important; - --newCommunityTheme-body: @mantle !important; - --newCommunityTheme-bodyAlpha50: @surface0 !important; - --newCommunityTheme-bodyAlpha70: @surface1 !important; - --newCommunityTheme-bodyAlpha80: @surface2 !important; - --newCommunityTheme-bodyFade: @subtext0 !important; - --newCommunityTheme-bodyShaded80: @mantle !important; - --newCommunityTheme-bodyText: @text !important; - --newCommunityTheme-bodyTextAlpha03: @mantle !important; - --newCommunityTheme-bodyTextAlpha20: @surface1 !important; - --newCommunityTheme-bodyTextShaded20: @surface0 !important; - --newCommunityTheme-bodyTextTinted20: @subtext0 !important; - --newCommunityTheme-bodyTinted50: @overlay1 !important; - --newCommunityTheme-bodyTinted80: @overlay0 !important; - --newCommunityTheme-button: @text !important; - --newCommunityTheme-buttonAlpha05: fadeout(@crust, 20%) !important; - --newCommunityTheme-buttonAlpha10: fadeout(@crust, 20%) !important; - --newCommunityTheme-buttonAlpha20: fadeout(@crust, 20%) !important; - --newCommunityTheme-buttonAlpha40: @subtext0 !important; - --newCommunityTheme-buttonAlpha50: @subtext1 !important; - --newCommunityTheme-buttonAlpha80: @subtext1 !important; - --newCommunityTheme-buttonShaded80: @overlay0 !important; - --newCommunityTheme-buttonTinted20: @accent-color !important; - --newCommunityTheme-buttonTinted50: @accent-color !important; - --newCommunityTheme-buttonTinted80: @accent-color !important; - --newCommunityTheme-canvas: @crust !important; - --newCommunityTheme-checkbox: @text !important; - --newCommunityTheme-errorText: @red !important; - --newCommunityTheme-field: @surface0 !important; - --newCommunityTheme-fieldFade: fadeout(@surface1, 30%) !important; - --newCommunityTheme-flair: @accent-color !important; - --newCommunityTheme-highlight: @base !important; - --newCommunityTheme-inactive: @subtext0 !important; - --newCommunityTheme-lightText: @text !important; - --newCommunityTheme-lightTextAlpha75: @subtext1 !important; - --newCommunityTheme-line: fadeout(@surface1, 30%) !important; - --newCommunityTheme-lineShaded80: fadeout(@surface1, 30%) !important; - --newCommunityTheme-lineShaded90: fadeout(@surface1, 30%) !important; - --newCommunityTheme-lineShadedNinety: fadeout(@surface1, 30%) !important; - --newCommunityTheme-linkText: @accent-color !important; - --newCommunityTheme-linkTextAlpha80: @accent-color !important; - --newCommunityTheme-linkTextShaded80: @accent-color !important; - --newCommunityTheme-linkTextTinted80: @accent-color !important; - --newCommunityTheme-linkTextWithBody: @accent-color !important; - --newCommunityTheme-menu: @mantle !important; - --newCommunityTheme-menuActiveText: @text !important; - --newCommunityTheme-menuButtonBackground-active: @base !important; - --newCommunityTheme-menuButtonBackground-focus: @base !important; - --newCommunityTheme-menuButtonBackground-hover: @base !important; - --newCommunityTheme-menuInactiveText: @text !important; - --newCommunityTheme-metaText: @subtext0 !important; - --newCommunityTheme-metaTextAlpha50: @subtext0 !important; - --newCommunityTheme-metaTextShaded80: @subtext0 !important; - --newCommunityTheme-monospaceColor: @accent-color !important; - --newCommunityTheme-navBar-activeLink: @text !important; - --newCommunityTheme-navBar-activeSubmenuCaret: @text !important; - --newCommunityTheme-navBar-activeSubmenuLink: @text !important; - --newCommunityTheme-navBar-backgroundColor: @mantle !important; - --newCommunityTheme-navBar-hoverLink: @text !important; - --newCommunityTheme-navBar-inactiveLink: @text !important; - --newCommunityTheme-navBar-inactiveSubmenuCaret: @text !important; - --newCommunityTheme-navBar-inactiveSubmenuLink: @text !important; - --newCommunityTheme-navBar-submenuBackgroundColor: @mantle !important; - --newCommunityTheme-navIcon: @text !important; - - /* upvote/downvote focus */ - --newCommunityTheme-navIconFaded10: fadeout(@crust, 20%) !important; - - --newCommunityTheme-nsfw: @red !important; - --newCommunityTheme-nsfwBlocking-bgcolor: @crust !important; - --newCommunityTheme-nsfwBlocking-color: @text !important; - --newCommunityTheme-nsfwBlocking-contentTitleBgColor: @base !important; - --newCommunityTheme-nsfwBlocking-mainCtaBgColor: @mantle !important; - --newCommunityTheme-pageHeader: @surface2 !important; - --newCommunityTheme-placeholder: @surface0 !important; - --newCommunityTheme-post: @mantle !important; - --newCommunityTheme-postError: @red !important; - --newCommunityTheme-postFlairText: @crust !important; - --newCommunityTheme-postIcon: @accent-color !important; - --newCommunityTheme-postLine: fadeout(@surface1, 30%) !important; - --newCommunityTheme-postLineShaded80: fadeout(@surface1, 30%) !important; - --newCommunityTheme-postLineShaded90: fadeout(@surface1, 30%) !important; - --newCommunityTheme-postTinted20: @base !important; - --newCommunityTheme-postTransparent20: @base !important; - --newCommunityTheme-primaryButtonShadedEighty: @overlay1 !important; - --newCommunityTheme-primaryButtonTintedEighty: @overlay1 !important; - --newCommunityTheme-primaryButtonTintedFifty: @overlay0 !important; - --newCommunityTheme-primaryButtonTintedSixty: @overlay0 !important; - --newCommunityTheme-quarantine: @yellow !important; - --newCommunityTheme-report: @surface1 !important; - --newCommunityTheme-search-syntaxHighlightBackgroundColor: @accent-color !important; - --newCommunityTheme-search-syntaxHighlightColor: @base !important; - --newCommunityTheme-titleText: @text !important; - --newCommunityTheme-upsell-appleIcon: @subtext1 !important; - --newCommunityTheme-upsell-ssoButtonBorderColor: fadeout( - @surface1, - 30% - ) !important; - --newCommunityTheme-upsell-ssoButtonTextColor: @text !important; - --newCommunityTheme-voteText-base: @subtext0 !important; - --newCommunityTheme-voteText-downvote: @blue !important; - --newCommunityTheme-voteText-downvoteShaded80: @blue !important; - --newCommunityTheme-voteText-downvoteTinted80: @blue !important; - --newCommunityTheme-voteText-upvote: @red !important; - --newCommunityTheme-voteText-upvoteShaded80: @red !important; - --newCommunityTheme-voteText-upvoteTinted80: @red !important; - --newCommunityTheme-widgetColors-appleIcon: @overlay0 !important; - --newCommunityTheme-widgetColors-lineColor: fadeout( - @surface1, - 30% - ) !important; - - /* sidebar widgets */ - --newCommunityTheme-widgetColors-sidebarWidgetBackgroundColor: @mantle !important; - --newCommunityTheme-widgetColors-sidebarWidgetBorderColor: fadeout( - @surface1, - 30% - ) !important; - --newCommunityTheme-widgetColors-sidebarWidgetHeaderColor: @crust !important; - --newCommunityTheme-widgetColors-sidebarWidgetHeaderColorAlpha60: @mantle !important; - --newCommunityTheme-widgetColors-sidebarWidgetTextColor: @text !important; - --newCommunityTheme-widgetColors-sidebarWidgetTextColorShaded80: @subtext1 !important; - --newCommunityTheme-widgetColors-sidebarWidgetTitleColor: @text !important; - - --newRedditTheme-actionIcon: @subtext0 !important; - --newRedditTheme-actionIconAlpha20: fadeout(@crust, 20%) !important; - --newRedditTheme-actionIconAlpha50: fadeout(@crust, 20%) !important; - --newRedditTheme-actionIconShaded80: @subtext0 !important; - --newRedditTheme-actionIconTinted80: @subtext1 !important; - --newRedditTheme-active: @accent-color !important; - --newRedditTheme-activeAlpha10: fadeout(@crust, 20%) !important; - --newRedditTheme-activeAlpha20: fadeout(@crust, 20%) !important; - --newRedditTheme-activeAlpha50: fadeout(@crust, 20%) !important; - --newRedditTheme-activeLight60: @accent-color !important; - --newRedditTheme-activeShaded80: @accent-color !important; - --newRedditTheme-activeShaded90: @accent-color !important; - --newRedditTheme-activeTinted05: @text !important; - --newRedditTheme-banner-backgroundColor: @accent-color !important; - --newRedditTheme-banner-iconColor: @accent-color !important; - --newRedditTheme-body: @mantle !important; - --newRedditTheme-bodyAlpha50: @surface0 !important; - --newRedditTheme-bodyAlpha70: @surface1 !important; - --newRedditTheme-bodyAlpha80: @surface2 !important; - --newRedditTheme-bodyFade: fadeout(@crust, 20%) !important; - --newRedditTheme-bodyShaded80: @mantle !important; - --newRedditTheme-bodyText: @text !important; - --newRedditTheme-bodyTextAlpha03: fadeout(@crust, 20%) !important; - --newRedditTheme-bodyTextAlpha20: @surface1 !important; - --newRedditTheme-bodyTextShaded20: @surface0 !important; - --newRedditTheme-bodyTextTinted20: @subtext1 !important; - --newRedditTheme-bodyTinted50: @overlay0 !important; - --newRedditTheme-bodyTinted80: @overlay1 !important; - --newRedditTheme-button: @text !important; - --newRedditTheme-buttonAlpha05: fadeout(@crust, 20%) !important; - --newRedditTheme-buttonAlpha10: fadeout(@crust, 20%) !important; - --newRedditTheme-buttonAlpha20: fadeout(@crust, 20%) !important; - --newRedditTheme-buttonAlpha40: @subtext0 !important; - --newRedditTheme-buttonAlpha50: @subtext1 !important; - --newRedditTheme-buttonAlpha80: @subtext1 !important; - --newRedditTheme-buttonShaded80: @overlay0 !important; - --newRedditTheme-buttonTinted20: @accent-color !important; - --newRedditTheme-buttonTinted50: @accent-color !important; - --newRedditTheme-buttonTinted80: @accent-color !important; - --newRedditTheme-canvas: @crust !important; - --newRedditTheme-checkbox: @text !important; - --newRedditTheme-errorText: @red !important; - --newRedditTheme-field: @base !important; - --newRedditTheme-fieldFade: @mantle !important; - --newRedditTheme-flair: @accent-color !important; - - /* controls menu, link, and other similar highlights. very important */ - --newRedditTheme-highlight: @base !important; - - --newRedditTheme-inactive: @surface0 !important; - --newRedditTheme-lightText: @text !important; - --newRedditTheme-lightTextAlpha75: @subtext1 !important; - --newRedditTheme-line: fadeout(@surface1, 30%) !important; - --newRedditTheme-lineShaded80: fadeout(@surface1, 30%) !important; - --newRedditTheme-lineShaded90: fadeout(@surface1, 30%) !important; - --newRedditTheme-lineShadedNinety: fadeout(@surface1, 30%) !important; - - /* links */ - --newRedditTheme-linkText: @accent-color !important; - --newRedditTheme-linkTextAlpha80: @accent-color !important; - --newRedditTheme-linkTextShaded80: @accent-color !important; - --newRedditTheme-linkTextTinted80: @accent-color !important; - --newRedditTheme-linkTextWithBody: @accent-color !important; - - /* menus */ - --newRedditTheme-menu: @mantle !important; - --newRedditTheme-menuActiveText: @text !important; - --newRedditTheme-menuButtonBackground-active: @accent-color !important; - --newRedditTheme-menuButtonBackground-focus: @base !important; - --newRedditTheme-menuButtonBackground-hover: @base !important; - --newRedditTheme-menuInactiveText: @text !important; - - --newRedditTheme-metaText: @subtext0 !important; - --newRedditTheme-metaTextAlpha50: fadeout(@crust, 20%) !important; - --newRedditTheme-metaTextShaded80: @subtext1 !important; - --newRedditTheme-monospaceColor: @accent-color !important; - --newRedditTheme-navBar-activeLink: @text !important; - --newRedditTheme-navBar-activeSubmenuCaret: @text !important; - --newRedditTheme-navBar-activeSubmenuLink: @text !important; - --newRedditTheme-navBar-backgroundColor: @mantle !important; - --newRedditTheme-navBar-hoverLink: @text !important; - --newRedditTheme-navBar-inactiveLink: @text !important; - --newRedditTheme-navBar-inactiveSubmenuCaret: @text !important; - --newRedditTheme-navBar-inactiveSubmenuLink: @text !important; - --newRedditTheme-navBar-submenuBackgroundColor: @mantle !important; - --newRedditTheme-navIcon: @text !important; - --newRedditTheme-navIconFaded10: fadeout(@crust, 20%) !important; - --newRedditTheme-nsfw: @red !important; - --newRedditTheme-nsfwBlocking-bgcolor: @crust !important; - --newRedditTheme-nsfwBlocking-color: @text !important; - --newRedditTheme-nsfwBlocking-contentTitleBgColor: @base !important; - --newRedditTheme-nsfwBlocking-mainCtaBgColor: @mantle !important; - --newRedditTheme-pageHeader: @surface0 !important; - --newRedditTheme-placeholder: @surface1 !important; - --newRedditTheme-post: @mantle !important; - --newRedditTheme-postError: @red !important; - --newRedditTheme-postFlairText: @text !important; - --newRedditTheme-postIcon: @accent-color !important; - --newRedditTheme-postLine: fadeout(@surface1, 30%) !important; - --newRedditTheme-postLineShaded80: fadeout(@surface1, 30%) !important; - --newRedditTheme-postLineShaded90: fadeout(@surface1, 30%) !important; - --newRedditTheme-postTinted20: @base !important; - --newRedditTheme-postTransparent20: fadeout(@crust, 20%) !important; - --newRedditTheme-primaryButtonShadedEighty: @surface1 !important; - --newRedditTheme-primaryButtonTintedEighty: @surface2 !important; - --newRedditTheme-primaryButtonTintedFifty: @surface1 !important; - --newRedditTheme-primaryButtonTintedSixty: @surface1 !important; - --newRedditTheme-quarantine: @yellow !important; - --newRedditTheme-report: @base !important; - --newRedditTheme-search-syntaxHighlightBackgroundColor: @accent-color !important; - --newRedditTheme-search-syntaxHighlightColor: @base !important; - --newRedditTheme-titleText: @text !important; - --newRedditTheme-upsell-appleIcon: @overlay0 !important; - --newRedditTheme-upsell-ssoButtonBorderColor: @text !important; - --newRedditTheme-upsell-ssoButtonTextColor: @text !important; - --newRedditTheme-voteText-base: @subtext1 !important; - --newRedditTheme-voteText-downvote: @blue !important; - --newRedditTheme-voteText-downvoteShaded80: @blue !important; - --newRedditTheme-voteText-downvoteTinted80: @blue !important; - --newRedditTheme-voteText-upvote: @red !important; - --newRedditTheme-voteText-upvoteShaded80: @red !important; - --newRedditTheme-voteText-upvoteTinted80: @red !important; - --newRedditTheme-widgetColors-appleIcon: @overlay0 !important; - --newRedditTheme-widgetColors-lineColor: fadeout( - @surface1, - 30% - ) !important; - --newRedditTheme-widgetColors-sidebarWidgetBackgroundColor: @mantle !important; - --newRedditTheme-widgetColors-sidebarWidgetBorderColor: fadeout( - @surface1, - 30% - ) !important; - --newRedditTheme-widgetColors-sidebarWidgetHeaderColor: @crust !important; - --newRedditTheme-widgetColors-sidebarWidgetHeaderColorAlpha60: fadeout( - @crust, - 20% - ) !important; - --newRedditTheme-widgetColors-sidebarWidgetTextColor: @text !important; - --newRedditTheme-widgetColors-sidebarWidgetTextColorShaded80: @subtext1 !important; - --newRedditTheme-widgetColors-sidebarWidgetTitleColor: @text !important; - --tw-bg-opacity: @crust !important; - --vds-video-bg-color: @crust !important; - } - - /* reddit chat variables */ - :root { - --activity-button-chatFilterColor: @surface0 !important; - --activity-button-newChatFilter-activeBg: @accent-color !important; - --activity-button-newChatFilter-activeText: @base !important; - --activity-button-newChatFilter-defaultBorder: @surface1 !important; - --activity-button-newChatFilter-defaultText: @text !important; - --activity-button-primary: @accent-color !important; - --activity-button-secondary: @text !important; - --activity-buttonPrimary-color: @accent-color !important; - --activity-buttonSecondary-active: @accent-color !important; - --activity-checkbox-checked: @accent-color !important; - --activity-checkbox-checkmark: @text !important; - --activity-checkbox-unchecked: @base !important; - --activity-checkbox-uncheckedBorder: @surface1 !important; - --activity-icon-active: @accent-color !important; - --activity-icon-contrast: @surface1 !important; - --activity-icon-default: @subtext0 !important; - --activity-icon-disable: @surface2 !important; - --activity-icon-hover: @surface2 !important; - --activity-icon-nsfw-bg: @base !important; - --activity-icon-nsfw-text: @text !important; - --activity-icon-subIcon-backgroundColor: @text !important; - --activity-icon-toaster: @crust !important; - --activity-input-background: fadeout(@crust, 20%) !important; - --activity-input-border: @surface1 !important; - --activity-input-channelRename: @subtext0 !important; - --activity-input-color: @subtext1 !important; - --activity-input-error: @red !important; - --activity-input-focusBg: @green !important; - --activity-input-focusColor: @text !important; - --activity-input-ownerBg: @surface0 !important; - --activity-link-hoverText: @red !important; - --activity-link-staticText: @accent-color !important; - --activity-link-staticUnderline: @accent-color !important; - --activity-minimizedPortal-backgroundColor-unreadFinal: @mantle !important; - --activity-minimizedPortal-backgroundColor-unreadInitial: @accent-color !important; - --activity-minimizedPortal-color-unreadFinal: @text !important; - --activity-minimizedPortal-color-unreadInitial: @text !important; - --activity-send-disable: @surface0 !important; - --activity-send-hover: @accent-color !important; - --activity-text-active: @accent-color !important; - --activity-text-fade: @subtext0 !important; - --activity-text-highlight: @text !important; - --activity-text-light: @subtext0 !important; - --activity-text-meta: @subtext0 !important; - --activity-text-regular: @text !important; - --activity-text-success: @green !important; - --activity-text-tutorial: @rosewater !important; - --activity-text-warning: @red !important; - --addReaction-backgroundColor: @surface0 !important; - --addReaction-iconFill: @surface1 !important; - --boxShadow: fadeout(@crust, 20%) !important; - --bubble-border: fadeout(@surface1, 30%) !important; - --bubble-channelsFilter-background: @crust !important; - --bubble-channelsFilter-selected: @overlay0 !important; - --bubble-color: @text !important; - --bubble-link-color: @accent-color !important; - --bubbleActions-hover: @surface0 !important; - --editName: @surface1 !important; - --layout-body: @mantle !important; - --layout-colsBorder: fadeout(@surface1, 30%) !important; - --layout-controlsBorder: fadeout(@surface1, 30%) !important; - --layout-dropdown-border: fadeout(@surface1, 30%) !important; - --layout-header-counterBg: @red !important; - --layout-header-counterText: @text !important; - --layout-overlayBackground: fadeout(@crust, 20%) !important; - --layout-overlayReportFlow: fadeout(@crust, 20%) !important; - --layout-scrollbar: @text !important; - --layout-scrollbarHover: @accent-color !important; - --layout-timeStamp-tooltip-background: @surface0 !important; - --message-list-item-button: @surface1 !important; - --message-list-item-onlineIndicator: @green !important; - --message-list-item-ownerBg: @surface1 !important; - --message-list-item-richItem: @overlay0 !important; - --message-list-item-richItemBorder: fadeout(@surface1, 30%) !important; - --message-list-item-white: @text !important; - --modal-buttonsBackground: @text !important; - --modal-primaryButtonWarning: @red !important; - --modal-secondaryButton: @text !important; - --newChat-inviteLink-borderColor: fadeout(@surface1, 30%) !important; - --overlay-backgroundColor: @mantle !important; - --overlay-headerColor: @text !important; - --overlay-inputBackground: @crust !important; - --overlay-searchBarBackground: @mantle !important; - --prompt-tooltip-background: @accent-color !important; - --searchBar-backgroundColor: @mantle !important; - --settings-color: @subtext0 !important; - --settings-dropdownItemHoverBackground: @crust !important; - --settings-panelBackground: @crust !important; - --settings-panelItemHoverBackground: @surface0 !important; - --settings-panelItemSelectedBackground: @surface1 !important; - --sidebar-background: fadeout(@surface1, 30%) !important; - --sidebar-basic-background-active: @accent-color !important; - --sidebar-basic-background-hover: @mantle !important; - --sidebar-footer-background: @crust !important; - --sidebar-item-active: @surface1 !important; - --sidebar-item-hover: @surface0 !important; - --sidebar-item-selected: @surface2 !important; - --sidebar-item-text-active: @text !important; - --sidebar-subreddit-background-active: @accent-color !important; - --sidebar-subreddit-background-hover: @surface1 !important; - --sidebar-text-divider: @surface1 !important; - --skeleton-field: @surface2 !important; - --skeleton-inactive: @surface0 !important; - --subreddit-iconBg: @accent-color !important; - --toast-error: @red !important; - --toast-pending: @crust !important; - --toast-success: @green !important; - --uploads-progress-background: @subtext0 !important; - --uploads-progress-bar: @accent-color !important; - --videoModal-button-background: @text !important; - --videoModal-button-color: @mantle !important; - } - - /* site background */ - div.ListingLayout-backgroundContainer::before { - background: @base !important; - } - - /* PROFILE MENU */ - - /* karma count */ - span#email-collection-tooltip-id > :nth-child(2) > :nth-child(2) > span { - color: @subtext0 !important; - } - - /* profile button karma icon */ - i.icon-karma_fill { - color: @red !important; - } - - /* menu headers */ - div[role="menu"] > div > div > span > span { - color: @subtext0 !important; - } - - /* switches, should also apply sitewide */ - button[role="switch"][aria-checked="false"] { - background: @surface0 !important; - } - - button[role="switch"] > div { - background: @text !important; - } - - /* online status */ - ._2dn5Ncenn0BSD4tCSmxQhA { - fill: @green !important; - } - - ._3SlBAJb2MbUHwgBZFH8eL7 { - fill: @base !important; - } - - /* PROFILE PAGE */ - - /* create avatar button */ - button._3F1tNW0P4Ff182mO_CefIg { - background: linear-gradient(90deg, @red, @peach) !important; - color: @base !important; - } - - button._3F1tNW0P4Ff182mO_CefIg > i { - color: @base !important; - } - - /* cake day and followers icon */ - i.icon-cake_fill, - i.icon-user_fill { - color: @accent-color !important; - } - - /* add social links button readability tweak */ - div._3hew1NnzwygOKDNQDKp6R4, - div._3hew1NnzwygOKDNQDKp6R4 > i, - li._3hew1NnzwygOKDNQDKp6R4 { - color: @base !important; - } - - /* profile moderation and user settings page */ - div._1VP69d9lk-Wk9zokOaylL { - --background: @base !important; - --canvas: @base !important; - } - - /* Beta Badge */ - span._2KFJx8Dhh1o1u0Xb8e7NuD { - color: @accent-color !important; - } - - /* Delete Account */ - button.EBd2MhBQlQeZ13YeP0K8a { - color: @accent-color !important; - } - - /* Delete Account Icon */ - svg._1Fa4RPHlhrfUZuNaXK2-eP > path { - fill: @accent-color !important; - } - - /* blocked, muted input */ - input._1Vnaj3fBuYrmHKEPQD_zWW { - background-color: @base !important; - } - - /* fixes profile posts not being themed */ - div.scrollerItem > div, - div[data-testid="post-container"], - div[style="background:#1A1A1B"], - div._2otRz3OtuWajw1RleFDJ5P { - background: @mantle !important; - } - - /* NFT AVATAR VIEWER */ - - /* modal background */ - div._productDetails_7kbcu_53 { - background: @mantle !important; - color: @text !important; - } - - /* Tag Color */ - .RESUserTagImage::after { - color: @accent-color; - } - - /* mint status */ - div._mintStatus_7kbcu_264 { - color: @accent-color !important; - } - - /* carousel background */ - div._carousel_7kbcu_45 { - background: linear-gradient(243.37deg, @base 16.42%, @blue 100%); - } - - /* nft card back */ - div._card_1ooes_1 { - background: @blue !important; - } - - ol._container_1t62i_1 { - border-color: @base !important; - } - - ol._container_1t62i_1 > li { - border-color: @base !important; - } - - ol._container_1t62i_1 > li > div { - color: @base !important; - } - - div.MuiMobileStepper-dot { - background: @surface0 !important; - } - - div.MuiMobileStepper-dotActive { - background: @accent-color !important; - } - - div._scrollContainer_7kbcu_104 > div > h3, - div._cardAuthor_7kbcu_79 { - color: @subtext0 !important; - } - - div._container_oikih_1 { - background: @crust !important; - border-color: @surface1 !important; - } - - /* external links */ - a._pill_7kbcu_280 { - background: @crust !important; - color: @text !important; - } - - /* shop for avatars button */ - button._shopForMoreButton_7kbcu_125 { - background: linear-gradient(90deg, @red, @peach) !important; - color: @base !important; - } - - /* AVATAR CREATOR */ - div._wrapper_1upjl_7 { - background: @base !important; - color: @text !important; - } - - /* SITE HEADER */ - - /* reddit logo */ - a[aria-label="Home"] > svg > g > circle { - fill: @accent-color !important; - } - - a[aria-label="Home"] > svg:first-child > g > path { - fill: @base !important; - } - - a[aria-label="Home"] > svg:nth-child(2) > g > path { - fill: @text !important; - } - - /* Post title from notification */ - h1._eYtD2XCVieq6emjKBH3m { - color: @text !important; - } - - /* notification icon */ - button[aria-label="Open notifications inbox"] > div > span { - background: @accent-color !important; - color: @mantle !important; - } - - /* advertise button */ - #change-username-tooltip-id > span._2I12Htze2UzJmmfnrgYJOn > a { - background: @surface0 !important; - color: @text !important; - } - - #change-username-tooltip-id > span._2I12Htze2UzJmmfnrgYJOn > a > i { - color: @text !important; - } - - /* reddit now notification */ - a[href="/now"] > div { - background: @accent-color !important; - } - - /* search scope pill text */ - div[data-testid="search-scope-pill-text"] { - color: @text !important; - } - - /* search popup title */ - div[class*="_2SdHzo12ISmrC8H86TgSCp"][class*="_1QVrieUoti9cxiQSRw314E"][class*="uWdXen_41bh0iwLrgzFkc"] { - --posttitletextcolor: @text !important; - } - - /* safe search toggle */ - button#safe-search-toggle[aria-checked="true"] { - background: @accent-color !important; - } - - /* NAVIGATION SIDEBAR */ - - /* close icon */ - i.icon-close { - color: @subtext0 !important; - } - - /* item color */ - a[role="menuitem"] { - color: @text !important; - } - - /* navigation sidebar header color */ - div[role="menu"] > div[role="heading"] { - color: @subtext0 !important; - } - - a[role="menuitem"]:hover { - background: @surface0 !important; - } - - /* favorites */ - i.icon-star_fill { - color: @accent-color !important; - } - - i.icon-star { - color: @subtext0 !important; - } - - /* RIGHT FRONTPAGE SIDEBAR */ - - /* reddit premium icon */ - i.icon-premium_fill { - color: @accent-color !important; - } - - /* reddit premium try now button */ - button._10BQ7pjWbeYP63SAPNS8Ts.q_unSaY23rpdd3lDvGZ- { - background: @accent-color !important; - color: @base !important; - } - - /* recent posts thumbnail borders */ - div._3fWuhJ6bVet7XJT5A0mZM2 > div > div > div { - border-color: @subtext0 !important; - } - - /* POSTS */ - - /* post background for card style */ - div[data-adclicklocation="background"] { - background: @base !important; - } - - /* post options (save, comment, etc.) */ - div._3-miAEojrCvx_4FQ8x3P-s, - i.icon-comment, - i.icon-share, - i.icon-save, - i.icon-expand, - i.icon-collapse, - i.icon-text_post, - i.icon-image_post, - i.icon-media_gallery, - i.icon-video_post, - i.icon-gif_post, - i.icon-embed, - i.icon-external_link, - i.icon-poll_post { - color: @subtext0 !important; - } - - /* post title color */ - div[data-adclicklocation="title"] > div > a > div > h3, - div[data-adclicklocation="title"] - > div:first-child - > div:first-child - > h1:first-child { - color: @text !important; - } - - /* - * post op color and - * post date color - */ - div[data-adclicklocation="top_bar"] > span, - a[data-testid="post_author_link"] { - color: @subtext0 !important; - } - - /* nsfw flair */ - span._1wzhGvvafQFOWAyA157okr { - border-color: @red !important; - color: @red !important; - } - - /* pinned post icon */ - i.icon-pin_fill { - color: @green !important; - } - - /* give award icon */ - i.icon-award { - color: @subtext0 !important; - } - - /* locked post icon */ - i.icon-archived_fill, - i.icon-lock_fill { - color: @yellow !important; - } - - /* post button divider */ - div[data-click-id="body"] > div:nth-child(3) > div:nth-child(3) { - border-color: @surface1 !important; - } - - /* UPVOTES/DOWNVOTES */ - - /* upvote/downvote background */ - div.Post, - div[data-click-id="media"] { - background: @mantle !important; - fill: @mantle !important; - } - - /* inactive vote text color */ - div[id^="vote-arrows"] > div { - color: @subtext0 !important; - } - - /* active upvote color */ - i.icon-upvote_fill { - color: @red !important; - } - - button[aria-label="upvote"][aria-pressed="false"] > span:hover > i { - color: @red !important; - } - - /* active upvote text color */ - button[aria-label="upvote"][aria-pressed="true"] ~ div { - color: @red !important; - } - - /* hover background for both upvotes and downvotes */ - button[aria-label="upvote"][aria-label="downvote"] > span:hover { - background: @surface0 !important; - } - - /* active downvote color */ - .icon-downvote_fill { - color: @blue !important; - } - - /* active downvote text color */ - button[aria-label="downvote"][aria-pressed="true"] ~ div { - color: @blue !important; - } - - button[aria-label="downvote"][aria-pressed="false"] > span:hover > i { - color: @blue !important; - } - - /* REPORT MODAL */ - - a.o1ov2mzLxTFAFP-O4Uv8I { - color: @accent-color !important; - } - - button._1lDGFVGU9k2mi-4kjU95Rp { - color: @base !important; - } - - /* SUBREDDIT PAGES */ - a[role="button"][target="_blank"] { - background: @text !important; - color: @base !important; - } - - /* radio buttons (flair selector, etc.) */ - div[role="radio"]:hover, - div[role="radio"]:focus { - background: @accent-color !important; - } - - div[role="radio"] > svg, - div[role="radio"] > svg:active { - fill: @text !important; - } - - /* checkboxes */ - button[role="checkbox"] { - fill: @accent-color !important; - } - - /* SUBREDDIT RIGHT SIDEBAR (some styles carry over from the homepage right sidebar section) */ - - /* header background */ - ._ZhON3a3vplThB8NFwuJn { - background: @crust !important; - color: @text !important; - } - - /* subreddit image background */ - img[alt="Subreddit Icon"][role="presentation"] { - background: @accent-color !important; - } - - /* border between uela */ - ._1KrMye71CT332tKKKUWAj6:not(:last-of-type) { - border-bottom-color: @surface0; - } - - /* follower color */ - .bg-neutral-background { - color: @text !important; - } - - /* default subreddit icon */ - i.icon-community_fill { - color: @accent-color !important; - } - - /* online users */ - div._21RLQh5PvUhC6vOKoFeHUP::before { - color: @green !important; - } - - /* POST VIEWER */ - - /* spoiler tags */ - ._2v4IIjPhKL0PDaWaWtjJ1E { - background: @surface0 !important; - } - - /* mod comment tag */ - span[id^="CommentTopMeta--Mod"] { - color: @green !important; - } - - /* op comment tag */ - span[id^="CommentTopMeta--OP"] { - color: @blue !important; - } - - /* post overlay if you have "open in new tab" disabled */ - div#overlayScrollContainer > div { - background: @crust !important; - } - - /* fixes comment section background not working when "open in new tab is disabled" */ - div._2M2wOqmeoPVvcSsJ6Po9-V._3287nL7j7epK9JmDC3N1VR { - background: @mantle !important; - } - - /* shade applied to background when clicking on a post with "open in new tab" disabled */ - div._2DJXORCrmcNpPTSq0LqL6i, - div._1DK52RbaamLOWw5UPaht_S { - background: fadeout(@crust, 20%) !important; - } - - /* gold award gradient */ - div.TmlaIdEplCzZ0F1aRGYQh[role="presentation"] { - background: linear-gradient( - 188deg, - #f9e2af1f 1.7%, - #f9e2af00 46%, - rgba(0, 0, 0, 0) - ) !important; - } - - /* image gallery next/previous buttons */ - a[title="Next"] > i, - a[title="Previous"] > i { - background: @surface0 !important; - } - - /* image gallery image count */ - div._61i6grM3um1yuw4GrN97P { - background: fadeout(@crust, 20%) !important; - color: @text !important; - } - - /* comment search bar */ - input#comment_search-bar { - background: @base !important; - } - - /* tab bar below banner */ - ._1gVVmSnHZpkUgVShsn7-ua { - background: @mantle !important; - } - - /* MULTIREDDITS/CUSTOM FEEDS */ - - /* delete custom feed button */ - .bX6SqXfzfxpv4GQbuIYVZ { - color: @red !important; - } - - /* TOOLTIPS */ - div.HQ2VJViRjokXpRbJzPvvc { - background: @mantle !important; - color: @text !important; - } - - div.HQ2VJViRjokXpRbJzPvvc::after { - border-top-color: @mantle !important; - } - - /* Recap Reddit Logo */ - .snoo-cls-1, - .snoo-cls-2, - .snoo-cls-3, - .snoo-cls-6, - .snoo-cls-8, - .snoo-cls-9 { - fill: @base; - } - - .snoo-cls-4, - .snoo-cls-5, - .snoo-cls-7, - .snoo-cls-10, - .snoo-cls-11 { - fill: @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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/reddit/catppuccin.user.less b/styles/reddit/catppuccin.user.less new file mode 100644 index 0000000000..fe77590b3f --- /dev/null +++ b/styles/reddit/catppuccin.user.less @@ -0,0 +1,1158 @@ +/* ==UserStyle== +@name Reddit Catppuccin +@namespace github.com/catppuccin/userstyles/styles/reddit +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/reddit +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/reddit/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Areddit +@description Soothing pastel theme for Reddit +@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("reddit.com") { + :root:not(.theme-dark) .theme-rpl, + :root:not(.theme-dark).theme-rpl, + :root:not(.theme-dark) .theme-beta, + :root:not(.theme-dark).theme-beta, + .theme-light { + #catppuccin(@lightFlavor, @accentColor); + } + + :root:not(.theme-light) .theme-rpl, + :root:not(.theme-light).theme-rpl, + :root:not(.theme-light) .theme-beta, + :root:not(.theme-light).theme-beta, + .theme-dark { + #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; + } + } + + /* BETA */ + --color-pizzaRed: @red !important; + --color-global-brand-orangered: @peach !important; + --color-global-focus: @surface1 !important; + --color-interactive-content-disabled: @subtext0 !important; + --color-interactive-background-disabled: fade(@surface2, 70%) !important; + --color-interactive-pressed: @surface2 !important; + --color-neutral-content: @text !important; + --color-neutral-content-disabled: @subtext0 !important; + --color-neutral-content-weak: @subtext0 !important; + --color-neutral-content-strong: @text !important; + --color-global-white: @crust !important; + --color-neutral-background: @base !important; + --color-neutral-background-selected: @surface0 !important; + --color-neutral-background-weak: @mantle !important; + --color-neutral-background-medium: @base !important; + --color-neutral-background-strong: @crust !important; + --color-neutral-background-hover: @surface0 !important; + --color-neutral-border: @surface0 !important; + --color-neutral-border-medium: @surface0 !important; + --color-neutral-border-weak: @surface0 !important; + --color-neutral-border-strong: @surface2 !important; + --color-primary: @accent-color !important; + --color-primary-hover: lighten(@accent-color, 10%) !important; + --color-primary-visited: @lavender !important; + --color-primary-background: @accent-color !important; + --color-primary-background-hover: darken(@accent-color, 5%) !important; + --color-primary-background-selected: darken(@accent-color, 5%) !important; + --color-primary-onBackground: @base !important; + --color-primary-onBackground-selected: @crust !important; + --color-secondary: @subtext0 !important; + --color-secondary-hover: @subtext1 !important; + --color-secondary-weak: @subtext0 !important; + --color-secondary-onBackground: @text !important; + --color-secondary-background: @mantle !important; + --color-secondary-background-hover: @surface1 !important; + --color-secondary-background-selected: @surface1 !important; + --color-secondary-plain: @subtext0 !important; + --color-secondary-plain-hover: @subtext1 !important; + --color-danger-background: @red !important; + --color-danger-background-disabled: fadeout(@red, 80%) !important; + --color-danger-background-hover: fadeout(@red, 2%) !important; + --color-danger-onBackground: @text !important; + --color-danger-content: @red !important; + --color-danger-content-default: @crust; + --color-danger-content-hover: darken(@red, 2%) !important; + --color-success-content: @green !important; + --color-success-hover: darken(@green, 2%) !important; + --color-success-onBackground: @crust; + --color-success-background: @green !important; + --color-success-background-hover: darken(@green, 2%) !important; + --color-warning-content: @yellow !important; + --color-warning-content-hover: darken(@yellow, 2%) !important; + --color-warning-onBackground: @base !important; + --color-warning-background: @yellow !important; + --color-warning-background-hover: darken(@yellow, 2%) !important; + --color-upvote-content: @accent-color !important; + --color-upvote-disabled: @subtext0 !important; + --color-upvote-onBackground: @text !important; + --color-upvote-background: @base !important; + --color-upvote-background-hover: darken(@accent-color, 5%) !important; + --color-upvote-background-disabled: @base !important; + --color-downvote-content: @text !important; + --color-downvote-content-weak: @text !important; + --color-downvote-disabled: @subtext0 !important; + --color-downvote-onBackground: @text !important; + --color-downvote-background: @base !important; + --color-downvote-background-hover: darken(@blue, 5%) !important; + --color-downvote-background-disabled: @mantle !important; + --color-tone-1: @text !important; + --color-tone-2: @subtext0 !important; + --color-tone-3: @overlay2 !important; + --color-tone-4: @surface0 !important; + --color-tone-5: @surface1 !important; + --color-tone-6: @surface2 !important; + --color-tone-7: @base !important; + --color-avatar-gradient: @accent-color !important; + --color-transparent-background-hover: fadeout(@surface0, 70%) !important; + --color-opacity-50: fadeout(@base, 50%) !important; + --color-online: @accent-color !important; + --color-favorite: @accent-color !important; + --color-brand-background: @accent-color !important; + --color-brand-background-hover: darken(@accent-color, 5%) !important; + --color-brand-onBackground: @crust !important; + --color-global-orangered: @accent-color !important; + --color-action-upvote: @accent-color !important; + --color-action-downvote: @blue; + --color-banner-error-text: @base !important; + + --shreddit-color-wordmark: @accent-color; + #reddit-logo { + circle[fill="#FF4500"] { + fill: @accent-color !important; + } + path[fill="#FFF"] { + fill: @crust !important; + } + } + + /* normal stuff */ + + &, + div[class^="subredditvars"] { + --color-online: @green !important; + --newCommunityTheme-actionIcon: @subtext0 !important; + --newCommunityTheme-actionIconAlpha20: fadeout(@crust, 20%) !important; + --newCommunityTheme-actionIconAlpha50: fadeout(@crust, 20%) !important; + --newCommunityTheme-actionIconShaded80: @subtext0 !important; + --newCommunityTheme-actionIconTinted80: @subtext1 !important; + --newCommunityTheme-active: @accent-color !important; + --newCommunityTheme-activeAlpha10: fadeout(@crust, 20%) !important; + --newCommunityTheme-activeAlpha20: fadeout(@crust, 20%) !important; + --newCommunityTheme-activeAlpha50: fadeout(@crust, 20%) !important; + --newCommunityTheme-activeLight60: @accent-color !important; + --newCommunityTheme-activeShaded80: @accent-color !important; + --newCommunityTheme-activeShaded90: @accent-color !important; + --newCommunityTheme-activeTinted05: @text !important; + --newCommunityTheme-banner-backgroundColor: @accent-color !important; + --newCommunityTheme-banner-iconColor: @accent-color !important; + --newCommunityTheme-body: @mantle !important; + --newCommunityTheme-bodyAlpha50: @surface0 !important; + --newCommunityTheme-bodyAlpha70: @surface1 !important; + --newCommunityTheme-bodyAlpha80: @surface2 !important; + --newCommunityTheme-bodyFade: @subtext0 !important; + --newCommunityTheme-bodyShaded80: @mantle !important; + --newCommunityTheme-bodyText: @text !important; + --newCommunityTheme-bodyTextAlpha03: @mantle !important; + --newCommunityTheme-bodyTextAlpha20: @surface1 !important; + --newCommunityTheme-bodyTextShaded20: @surface0 !important; + --newCommunityTheme-bodyTextTinted20: @subtext0 !important; + --newCommunityTheme-bodyTinted50: @overlay1 !important; + --newCommunityTheme-bodyTinted80: @overlay0 !important; + --newCommunityTheme-button: @text !important; + --newCommunityTheme-buttonAlpha05: fadeout(@crust, 20%) !important; + --newCommunityTheme-buttonAlpha10: fadeout(@crust, 20%) !important; + --newCommunityTheme-buttonAlpha20: fadeout(@crust, 20%) !important; + --newCommunityTheme-buttonAlpha40: @subtext0 !important; + --newCommunityTheme-buttonAlpha50: @subtext1 !important; + --newCommunityTheme-buttonAlpha80: @subtext1 !important; + --newCommunityTheme-buttonShaded80: @overlay0 !important; + --newCommunityTheme-buttonTinted20: @accent-color !important; + --newCommunityTheme-buttonTinted50: @accent-color !important; + --newCommunityTheme-buttonTinted80: @accent-color !important; + --newCommunityTheme-canvas: @crust !important; + --newCommunityTheme-checkbox: @text !important; + --newCommunityTheme-errorText: @red !important; + --newCommunityTheme-field: @surface0 !important; + --newCommunityTheme-fieldFade: fadeout(@surface1, 30%) !important; + --newCommunityTheme-flair: @accent-color !important; + --newCommunityTheme-highlight: @base !important; + --newCommunityTheme-inactive: @subtext0 !important; + --newCommunityTheme-lightText: @text !important; + --newCommunityTheme-lightTextAlpha75: @subtext1 !important; + --newCommunityTheme-line: fadeout(@surface1, 30%) !important; + --newCommunityTheme-lineShaded80: fadeout(@surface1, 30%) !important; + --newCommunityTheme-lineShaded90: fadeout(@surface1, 30%) !important; + --newCommunityTheme-lineShadedNinety: fadeout(@surface1, 30%) !important; + --newCommunityTheme-linkText: @accent-color !important; + --newCommunityTheme-linkTextAlpha80: @accent-color !important; + --newCommunityTheme-linkTextShaded80: @accent-color !important; + --newCommunityTheme-linkTextTinted80: @accent-color !important; + --newCommunityTheme-linkTextWithBody: @accent-color !important; + --newCommunityTheme-menu: @mantle !important; + --newCommunityTheme-menuActiveText: @text !important; + --newCommunityTheme-menuButtonBackground-active: @base !important; + --newCommunityTheme-menuButtonBackground-focus: @base !important; + --newCommunityTheme-menuButtonBackground-hover: @base !important; + --newCommunityTheme-menuInactiveText: @text !important; + --newCommunityTheme-metaText: @subtext0 !important; + --newCommunityTheme-metaTextAlpha50: @subtext0 !important; + --newCommunityTheme-metaTextShaded80: @subtext0 !important; + --newCommunityTheme-monospaceColor: @accent-color !important; + --newCommunityTheme-navBar-activeLink: @text !important; + --newCommunityTheme-navBar-activeSubmenuCaret: @text !important; + --newCommunityTheme-navBar-activeSubmenuLink: @text !important; + --newCommunityTheme-navBar-backgroundColor: @mantle !important; + --newCommunityTheme-navBar-hoverLink: @text !important; + --newCommunityTheme-navBar-inactiveLink: @text !important; + --newCommunityTheme-navBar-inactiveSubmenuCaret: @text !important; + --newCommunityTheme-navBar-inactiveSubmenuLink: @text !important; + --newCommunityTheme-navBar-submenuBackgroundColor: @mantle !important; + --newCommunityTheme-navIcon: @text !important; + + /* upvote/downvote focus */ + --newCommunityTheme-navIconFaded10: fadeout(@crust, 20%) !important; + + --newCommunityTheme-nsfw: @red !important; + --newCommunityTheme-nsfwBlocking-bgcolor: @crust !important; + --newCommunityTheme-nsfwBlocking-color: @text !important; + --newCommunityTheme-nsfwBlocking-contentTitleBgColor: @base !important; + --newCommunityTheme-nsfwBlocking-mainCtaBgColor: @mantle !important; + --newCommunityTheme-pageHeader: @surface2 !important; + --newCommunityTheme-placeholder: @surface0 !important; + --newCommunityTheme-post: @mantle !important; + --newCommunityTheme-postError: @red !important; + --newCommunityTheme-postFlairText: @crust !important; + --newCommunityTheme-postIcon: @accent-color !important; + --newCommunityTheme-postLine: fadeout(@surface1, 30%) !important; + --newCommunityTheme-postLineShaded80: fadeout(@surface1, 30%) !important; + --newCommunityTheme-postLineShaded90: fadeout(@surface1, 30%) !important; + --newCommunityTheme-postTinted20: @base !important; + --newCommunityTheme-postTransparent20: @base !important; + --newCommunityTheme-primaryButtonShadedEighty: @overlay1 !important; + --newCommunityTheme-primaryButtonTintedEighty: @overlay1 !important; + --newCommunityTheme-primaryButtonTintedFifty: @overlay0 !important; + --newCommunityTheme-primaryButtonTintedSixty: @overlay0 !important; + --newCommunityTheme-quarantine: @yellow !important; + --newCommunityTheme-report: @surface1 !important; + --newCommunityTheme-search-syntaxHighlightBackgroundColor: @accent-color + !important; + --newCommunityTheme-search-syntaxHighlightColor: @base !important; + --newCommunityTheme-titleText: @text !important; + --newCommunityTheme-upsell-appleIcon: @subtext1 !important; + --newCommunityTheme-upsell-ssoButtonBorderColor: fadeout( + @surface1, + 30% + ) !important; + --newCommunityTheme-upsell-ssoButtonTextColor: @text !important; + --newCommunityTheme-voteText-base: @subtext0 !important; + --newCommunityTheme-voteText-downvote: @blue !important; + --newCommunityTheme-voteText-downvoteShaded80: @blue !important; + --newCommunityTheme-voteText-downvoteTinted80: @blue !important; + --newCommunityTheme-voteText-upvote: @red !important; + --newCommunityTheme-voteText-upvoteShaded80: @red !important; + --newCommunityTheme-voteText-upvoteTinted80: @red !important; + --newCommunityTheme-widgetColors-appleIcon: @overlay0 !important; + --newCommunityTheme-widgetColors-lineColor: fadeout( + @surface1, + 30% + ) !important; + + /* sidebar widgets */ + --newCommunityTheme-widgetColors-sidebarWidgetBackgroundColor: @mantle + !important; + --newCommunityTheme-widgetColors-sidebarWidgetBorderColor: fadeout( + @surface1, + 30% + ) !important; + --newCommunityTheme-widgetColors-sidebarWidgetHeaderColor: @crust + !important; + --newCommunityTheme-widgetColors-sidebarWidgetHeaderColorAlpha60: @mantle + !important; + --newCommunityTheme-widgetColors-sidebarWidgetTextColor: @text !important; + --newCommunityTheme-widgetColors-sidebarWidgetTextColorShaded80: @subtext1 + !important; + --newCommunityTheme-widgetColors-sidebarWidgetTitleColor: @text + !important; + + --newRedditTheme-actionIcon: @subtext0 !important; + --newRedditTheme-actionIconAlpha20: fadeout(@crust, 20%) !important; + --newRedditTheme-actionIconAlpha50: fadeout(@crust, 20%) !important; + --newRedditTheme-actionIconShaded80: @subtext0 !important; + --newRedditTheme-actionIconTinted80: @subtext1 !important; + --newRedditTheme-active: @accent-color !important; + --newRedditTheme-activeAlpha10: fadeout(@crust, 20%) !important; + --newRedditTheme-activeAlpha20: fadeout(@crust, 20%) !important; + --newRedditTheme-activeAlpha50: fadeout(@crust, 20%) !important; + --newRedditTheme-activeLight60: @accent-color !important; + --newRedditTheme-activeShaded80: @accent-color !important; + --newRedditTheme-activeShaded90: @accent-color !important; + --newRedditTheme-activeTinted05: @text !important; + --newRedditTheme-banner-backgroundColor: @accent-color !important; + --newRedditTheme-banner-iconColor: @accent-color !important; + --newRedditTheme-body: @mantle !important; + --newRedditTheme-bodyAlpha50: @surface0 !important; + --newRedditTheme-bodyAlpha70: @surface1 !important; + --newRedditTheme-bodyAlpha80: @surface2 !important; + --newRedditTheme-bodyFade: fadeout(@crust, 20%) !important; + --newRedditTheme-bodyShaded80: @mantle !important; + --newRedditTheme-bodyText: @text !important; + --newRedditTheme-bodyTextAlpha03: fadeout(@crust, 20%) !important; + --newRedditTheme-bodyTextAlpha20: @surface1 !important; + --newRedditTheme-bodyTextShaded20: @surface0 !important; + --newRedditTheme-bodyTextTinted20: @subtext1 !important; + --newRedditTheme-bodyTinted50: @overlay0 !important; + --newRedditTheme-bodyTinted80: @overlay1 !important; + --newRedditTheme-button: @text !important; + --newRedditTheme-buttonAlpha05: fadeout(@crust, 20%) !important; + --newRedditTheme-buttonAlpha10: fadeout(@crust, 20%) !important; + --newRedditTheme-buttonAlpha20: fadeout(@crust, 20%) !important; + --newRedditTheme-buttonAlpha40: @subtext0 !important; + --newRedditTheme-buttonAlpha50: @subtext1 !important; + --newRedditTheme-buttonAlpha80: @subtext1 !important; + --newRedditTheme-buttonShaded80: @overlay0 !important; + --newRedditTheme-buttonTinted20: @accent-color !important; + --newRedditTheme-buttonTinted50: @accent-color !important; + --newRedditTheme-buttonTinted80: @accent-color !important; + --newRedditTheme-canvas: @crust !important; + --newRedditTheme-checkbox: @text !important; + --newRedditTheme-errorText: @red !important; + --newRedditTheme-field: @base !important; + --newRedditTheme-fieldFade: @mantle !important; + --newRedditTheme-flair: @accent-color !important; + + /* controls menu, link, and other similar highlights. very important */ + --newRedditTheme-highlight: @base !important; + + --newRedditTheme-inactive: @surface0 !important; + --newRedditTheme-lightText: @text !important; + --newRedditTheme-lightTextAlpha75: @subtext1 !important; + --newRedditTheme-line: fadeout(@surface1, 30%) !important; + --newRedditTheme-lineShaded80: fadeout(@surface1, 30%) !important; + --newRedditTheme-lineShaded90: fadeout(@surface1, 30%) !important; + --newRedditTheme-lineShadedNinety: fadeout(@surface1, 30%) !important; + + /* links */ + --newRedditTheme-linkText: @accent-color !important; + --newRedditTheme-linkTextAlpha80: @accent-color !important; + --newRedditTheme-linkTextShaded80: @accent-color !important; + --newRedditTheme-linkTextTinted80: @accent-color !important; + --newRedditTheme-linkTextWithBody: @accent-color !important; + + /* menus */ + --newRedditTheme-menu: @mantle !important; + --newRedditTheme-menuActiveText: @text !important; + --newRedditTheme-menuButtonBackground-active: @accent-color !important; + --newRedditTheme-menuButtonBackground-focus: @base !important; + --newRedditTheme-menuButtonBackground-hover: @base !important; + --newRedditTheme-menuInactiveText: @text !important; + + --newRedditTheme-metaText: @subtext0 !important; + --newRedditTheme-metaTextAlpha50: fadeout(@crust, 20%) !important; + --newRedditTheme-metaTextShaded80: @subtext1 !important; + --newRedditTheme-monospaceColor: @accent-color !important; + --newRedditTheme-navBar-activeLink: @text !important; + --newRedditTheme-navBar-activeSubmenuCaret: @text !important; + --newRedditTheme-navBar-activeSubmenuLink: @text !important; + --newRedditTheme-navBar-backgroundColor: @mantle !important; + --newRedditTheme-navBar-hoverLink: @text !important; + --newRedditTheme-navBar-inactiveLink: @text !important; + --newRedditTheme-navBar-inactiveSubmenuCaret: @text !important; + --newRedditTheme-navBar-inactiveSubmenuLink: @text !important; + --newRedditTheme-navBar-submenuBackgroundColor: @mantle !important; + --newRedditTheme-navIcon: @text !important; + --newRedditTheme-navIconFaded10: fadeout(@crust, 20%) !important; + --newRedditTheme-nsfw: @red !important; + --newRedditTheme-nsfwBlocking-bgcolor: @crust !important; + --newRedditTheme-nsfwBlocking-color: @text !important; + --newRedditTheme-nsfwBlocking-contentTitleBgColor: @base !important; + --newRedditTheme-nsfwBlocking-mainCtaBgColor: @mantle !important; + --newRedditTheme-pageHeader: @surface0 !important; + --newRedditTheme-placeholder: @surface1 !important; + --newRedditTheme-post: @mantle !important; + --newRedditTheme-postError: @red !important; + --newRedditTheme-postFlairText: @text !important; + --newRedditTheme-postIcon: @accent-color !important; + --newRedditTheme-postLine: fadeout(@surface1, 30%) !important; + --newRedditTheme-postLineShaded80: fadeout(@surface1, 30%) !important; + --newRedditTheme-postLineShaded90: fadeout(@surface1, 30%) !important; + --newRedditTheme-postTinted20: @base !important; + --newRedditTheme-postTransparent20: fadeout(@crust, 20%) !important; + --newRedditTheme-primaryButtonShadedEighty: @surface1 !important; + --newRedditTheme-primaryButtonTintedEighty: @surface2 !important; + --newRedditTheme-primaryButtonTintedFifty: @surface1 !important; + --newRedditTheme-primaryButtonTintedSixty: @surface1 !important; + --newRedditTheme-quarantine: @yellow !important; + --newRedditTheme-report: @base !important; + --newRedditTheme-search-syntaxHighlightBackgroundColor: @accent-color + !important; + --newRedditTheme-search-syntaxHighlightColor: @base !important; + --newRedditTheme-titleText: @text !important; + --newRedditTheme-upsell-appleIcon: @overlay0 !important; + --newRedditTheme-upsell-ssoButtonBorderColor: @text !important; + --newRedditTheme-upsell-ssoButtonTextColor: @text !important; + --newRedditTheme-voteText-base: @subtext1 !important; + --newRedditTheme-voteText-downvote: @blue !important; + --newRedditTheme-voteText-downvoteShaded80: @blue !important; + --newRedditTheme-voteText-downvoteTinted80: @blue !important; + --newRedditTheme-voteText-upvote: @red !important; + --newRedditTheme-voteText-upvoteShaded80: @red !important; + --newRedditTheme-voteText-upvoteTinted80: @red !important; + --newRedditTheme-widgetColors-appleIcon: @overlay0 !important; + --newRedditTheme-widgetColors-lineColor: fadeout( + @surface1, + 30% + ) !important; + --newRedditTheme-widgetColors-sidebarWidgetBackgroundColor: @mantle + !important; + --newRedditTheme-widgetColors-sidebarWidgetBorderColor: fadeout( + @surface1, + 30% + ) !important; + --newRedditTheme-widgetColors-sidebarWidgetHeaderColor: @crust !important; + --newRedditTheme-widgetColors-sidebarWidgetHeaderColorAlpha60: fadeout( + @crust, + 20% + ) !important; + --newRedditTheme-widgetColors-sidebarWidgetTextColor: @text !important; + --newRedditTheme-widgetColors-sidebarWidgetTextColorShaded80: @subtext1 + !important; + --newRedditTheme-widgetColors-sidebarWidgetTitleColor: @text !important; + --tw-bg-opacity: @crust !important; + --vds-video-bg-color: @crust !important; + } + + /* reddit chat variables */ + :root { + --activity-button-chatFilterColor: @surface0 !important; + --activity-button-newChatFilter-activeBg: @accent-color !important; + --activity-button-newChatFilter-activeText: @base !important; + --activity-button-newChatFilter-defaultBorder: @surface1 !important; + --activity-button-newChatFilter-defaultText: @text !important; + --activity-button-primary: @accent-color !important; + --activity-button-secondary: @text !important; + --activity-buttonPrimary-color: @accent-color !important; + --activity-buttonSecondary-active: @accent-color !important; + --activity-checkbox-checked: @accent-color !important; + --activity-checkbox-checkmark: @text !important; + --activity-checkbox-unchecked: @base !important; + --activity-checkbox-uncheckedBorder: @surface1 !important; + --activity-icon-active: @accent-color !important; + --activity-icon-contrast: @surface1 !important; + --activity-icon-default: @subtext0 !important; + --activity-icon-disable: @surface2 !important; + --activity-icon-hover: @surface2 !important; + --activity-icon-nsfw-bg: @base !important; + --activity-icon-nsfw-text: @text !important; + --activity-icon-subIcon-backgroundColor: @text !important; + --activity-icon-toaster: @crust !important; + --activity-input-background: fadeout(@crust, 20%) !important; + --activity-input-border: @surface1 !important; + --activity-input-channelRename: @subtext0 !important; + --activity-input-color: @subtext1 !important; + --activity-input-error: @red !important; + --activity-input-focusBg: @green !important; + --activity-input-focusColor: @text !important; + --activity-input-ownerBg: @surface0 !important; + --activity-link-hoverText: @red !important; + --activity-link-staticText: @accent-color !important; + --activity-link-staticUnderline: @accent-color !important; + --activity-minimizedPortal-backgroundColor-unreadFinal: @mantle + !important; + --activity-minimizedPortal-backgroundColor-unreadInitial: @accent-color + !important; + --activity-minimizedPortal-color-unreadFinal: @text !important; + --activity-minimizedPortal-color-unreadInitial: @text !important; + --activity-send-disable: @surface0 !important; + --activity-send-hover: @accent-color !important; + --activity-text-active: @accent-color !important; + --activity-text-fade: @subtext0 !important; + --activity-text-highlight: @text !important; + --activity-text-light: @subtext0 !important; + --activity-text-meta: @subtext0 !important; + --activity-text-regular: @text !important; + --activity-text-success: @green !important; + --activity-text-tutorial: @rosewater !important; + --activity-text-warning: @red !important; + --addReaction-backgroundColor: @surface0 !important; + --addReaction-iconFill: @surface1 !important; + --boxShadow: fadeout(@crust, 20%) !important; + --bubble-border: fadeout(@surface1, 30%) !important; + --bubble-channelsFilter-background: @crust !important; + --bubble-channelsFilter-selected: @overlay0 !important; + --bubble-color: @text !important; + --bubble-link-color: @accent-color !important; + --bubbleActions-hover: @surface0 !important; + --editName: @surface1 !important; + --layout-body: @mantle !important; + --layout-colsBorder: fadeout(@surface1, 30%) !important; + --layout-controlsBorder: fadeout(@surface1, 30%) !important; + --layout-dropdown-border: fadeout(@surface1, 30%) !important; + --layout-header-counterBg: @red !important; + --layout-header-counterText: @text !important; + --layout-overlayBackground: fadeout(@crust, 20%) !important; + --layout-overlayReportFlow: fadeout(@crust, 20%) !important; + --layout-scrollbar: @text !important; + --layout-scrollbarHover: @accent-color !important; + --layout-timeStamp-tooltip-background: @surface0 !important; + --message-list-item-button: @surface1 !important; + --message-list-item-onlineIndicator: @green !important; + --message-list-item-ownerBg: @surface1 !important; + --message-list-item-richItem: @overlay0 !important; + --message-list-item-richItemBorder: fadeout(@surface1, 30%) !important; + --message-list-item-white: @text !important; + --modal-buttonsBackground: @text !important; + --modal-primaryButtonWarning: @red !important; + --modal-secondaryButton: @text !important; + --newChat-inviteLink-borderColor: fadeout(@surface1, 30%) !important; + --overlay-backgroundColor: @mantle !important; + --overlay-headerColor: @text !important; + --overlay-inputBackground: @crust !important; + --overlay-searchBarBackground: @mantle !important; + --prompt-tooltip-background: @accent-color !important; + --searchBar-backgroundColor: @mantle !important; + --settings-color: @subtext0 !important; + --settings-dropdownItemHoverBackground: @crust !important; + --settings-panelBackground: @crust !important; + --settings-panelItemHoverBackground: @surface0 !important; + --settings-panelItemSelectedBackground: @surface1 !important; + --sidebar-background: fadeout(@surface1, 30%) !important; + --sidebar-basic-background-active: @accent-color !important; + --sidebar-basic-background-hover: @mantle !important; + --sidebar-footer-background: @crust !important; + --sidebar-item-active: @surface1 !important; + --sidebar-item-hover: @surface0 !important; + --sidebar-item-selected: @surface2 !important; + --sidebar-item-text-active: @text !important; + --sidebar-subreddit-background-active: @accent-color !important; + --sidebar-subreddit-background-hover: @surface1 !important; + --sidebar-text-divider: @surface1 !important; + --skeleton-field: @surface2 !important; + --skeleton-inactive: @surface0 !important; + --subreddit-iconBg: @accent-color !important; + --toast-error: @red !important; + --toast-pending: @crust !important; + --toast-success: @green !important; + --uploads-progress-background: @subtext0 !important; + --uploads-progress-bar: @accent-color !important; + --videoModal-button-background: @text !important; + --videoModal-button-color: @mantle !important; + } + + /* site background */ + div.ListingLayout-backgroundContainer::before { + background: @base !important; + } + + /* PROFILE MENU */ + + /* karma count */ + span#email-collection-tooltip-id > :nth-child(2) > :nth-child(2) > span { + color: @subtext0 !important; + } + + /* profile button karma icon */ + i.icon-karma_fill { + color: @red !important; + } + + /* menu headers */ + div[role="menu"] > div > div > span > span { + color: @subtext0 !important; + } + + /* switches, should also apply sitewide */ + button[role="switch"][aria-checked="false"] { + background: @surface0 !important; + } + + button[role="switch"] > div { + background: @text !important; + } + + /* online status */ + ._2dn5Ncenn0BSD4tCSmxQhA { + fill: @green !important; + } + + ._3SlBAJb2MbUHwgBZFH8eL7 { + fill: @base !important; + } + + /* PROFILE PAGE */ + + /* create avatar button */ + button._3F1tNW0P4Ff182mO_CefIg { + background: linear-gradient(90deg, @red, @peach) !important; + color: @base !important; + } + + button._3F1tNW0P4Ff182mO_CefIg > i { + color: @base !important; + } + + /* cake day and followers icon */ + i.icon-cake_fill, + i.icon-user_fill { + color: @accent-color !important; + } + + /* add social links button readability tweak */ + div._3hew1NnzwygOKDNQDKp6R4, + div._3hew1NnzwygOKDNQDKp6R4 > i, + li._3hew1NnzwygOKDNQDKp6R4 { + color: @base !important; + } + + /* profile moderation and user settings page */ + div._1VP69d9lk-Wk9zokOaylL { + --background: @base !important; + --canvas: @base !important; + } + + /* Beta Badge */ + span._2KFJx8Dhh1o1u0Xb8e7NuD { + color: @accent-color !important; + } + + /* Delete Account */ + button.EBd2MhBQlQeZ13YeP0K8a { + color: @accent-color !important; + } + + /* Delete Account Icon */ + svg._1Fa4RPHlhrfUZuNaXK2-eP > path { + fill: @accent-color !important; + } + + /* blocked, muted input */ + input._1Vnaj3fBuYrmHKEPQD_zWW { + background-color: @base !important; + } + + /* fixes profile posts not being themed */ + div.scrollerItem > div, + div[data-testid="post-container"], + div[style="background:#1A1A1B"], + div._2otRz3OtuWajw1RleFDJ5P { + background: @mantle !important; + } + + /* NFT AVATAR VIEWER */ + + /* modal background */ + div._productDetails_7kbcu_53 { + background: @mantle !important; + color: @text !important; + } + + /* Tag Color */ + .RESUserTagImage::after { + color: @accent-color; + } + + /* mint status */ + div._mintStatus_7kbcu_264 { + color: @accent-color !important; + } + + /* carousel background */ + div._carousel_7kbcu_45 { + background: linear-gradient(243.37deg, @base 16.42%, @blue 100%); + } + + /* nft card back */ + div._card_1ooes_1 { + background: @blue !important; + } + + ol._container_1t62i_1 { + border-color: @base !important; + } + + ol._container_1t62i_1 > li { + border-color: @base !important; + } + + ol._container_1t62i_1 > li > div { + color: @base !important; + } + + div.MuiMobileStepper-dot { + background: @surface0 !important; + } + + div.MuiMobileStepper-dotActive { + background: @accent-color !important; + } + + div._scrollContainer_7kbcu_104 > div > h3, + div._cardAuthor_7kbcu_79 { + color: @subtext0 !important; + } + + div._container_oikih_1 { + background: @crust !important; + border-color: @surface1 !important; + } + + /* external links */ + a._pill_7kbcu_280 { + background: @crust !important; + color: @text !important; + } + + /* shop for avatars button */ + button._shopForMoreButton_7kbcu_125 { + background: linear-gradient(90deg, @red, @peach) !important; + color: @base !important; + } + + /* AVATAR CREATOR */ + div._wrapper_1upjl_7 { + background: @base !important; + color: @text !important; + } + + /* SITE HEADER */ + + /* reddit logo */ + a[aria-label="Home"] > svg > g > circle { + fill: @accent-color !important; + } + + a[aria-label="Home"] > svg:first-child > g > path { + fill: @base !important; + } + + a[aria-label="Home"] > svg:nth-child(2) > g > path { + fill: @text !important; + } + + /* Post title from notification */ + h1._eYtD2XCVieq6emjKBH3m { + color: @text !important; + } + + /* notification icon */ + button[aria-label="Open notifications inbox"] > div > span { + background: @accent-color !important; + color: @mantle !important; + } + + /* advertise button */ + #change-username-tooltip-id > span._2I12Htze2UzJmmfnrgYJOn > a { + background: @surface0 !important; + color: @text !important; + } + + #change-username-tooltip-id > span._2I12Htze2UzJmmfnrgYJOn > a > i { + color: @text !important; + } + + /* reddit now notification */ + a[href="/now"] > div { + background: @accent-color !important; + } + + /* search scope pill text */ + div[data-testid="search-scope-pill-text"] { + color: @text !important; + } + + /* search popup title */ + div[class*="_2SdHzo12ISmrC8H86TgSCp"][class*="_1QVrieUoti9cxiQSRw314E"][class*="uWdXen_41bh0iwLrgzFkc"] { + --posttitletextcolor: @text !important; + } + + /* safe search toggle */ + button#safe-search-toggle[aria-checked="true"] { + background: @accent-color !important; + } + + /* NAVIGATION SIDEBAR */ + + /* close icon */ + i.icon-close { + color: @subtext0 !important; + } + + /* item color */ + a[role="menuitem"] { + color: @text !important; + } + + /* navigation sidebar header color */ + div[role="menu"] > div[role="heading"] { + color: @subtext0 !important; + } + + a[role="menuitem"]:hover { + background: @surface0 !important; + } + + /* favorites */ + i.icon-star_fill { + color: @accent-color !important; + } + + i.icon-star { + color: @subtext0 !important; + } + + /* RIGHT FRONTPAGE SIDEBAR */ + + /* reddit premium icon */ + i.icon-premium_fill { + color: @accent-color !important; + } + + /* reddit premium try now button */ + button._10BQ7pjWbeYP63SAPNS8Ts.q_unSaY23rpdd3lDvGZ- { + background: @accent-color !important; + color: @base !important; + } + + /* recent posts thumbnail borders */ + div._3fWuhJ6bVet7XJT5A0mZM2 > div > div > div { + border-color: @subtext0 !important; + } + + /* POSTS */ + + /* post background for card style */ + div[data-adclicklocation="background"] { + background: @base !important; + } + + /* post options (save, comment, etc.) */ + div._3-miAEojrCvx_4FQ8x3P-s, + i.icon-comment, + i.icon-share, + i.icon-save, + i.icon-expand, + i.icon-collapse, + i.icon-text_post, + i.icon-image_post, + i.icon-media_gallery, + i.icon-video_post, + i.icon-gif_post, + i.icon-embed, + i.icon-external_link, + i.icon-poll_post { + color: @subtext0 !important; + } + + /* post title color */ + div[data-adclicklocation="title"] > div > a > div > h3, + div[data-adclicklocation="title"] + > div:first-child + > div:first-child + > h1:first-child { + color: @text !important; + } + + /* + * post op color and + * post date color + */ + div[data-adclicklocation="top_bar"] > span, + a[data-testid="post_author_link"] { + color: @subtext0 !important; + } + + /* nsfw flair */ + span._1wzhGvvafQFOWAyA157okr { + border-color: @red !important; + color: @red !important; + } + + /* pinned post icon */ + i.icon-pin_fill { + color: @green !important; + } + + /* give award icon */ + i.icon-award { + color: @subtext0 !important; + } + + /* locked post icon */ + i.icon-archived_fill, + i.icon-lock_fill { + color: @yellow !important; + } + + /* post button divider */ + div[data-click-id="body"] > div:nth-child(3) > div:nth-child(3) { + border-color: @surface1 !important; + } + + /* UPVOTES/DOWNVOTES */ + + /* upvote/downvote background */ + div.Post, + div[data-click-id="media"] { + background: @mantle !important; + fill: @mantle !important; + } + + /* inactive vote text color */ + div[id^="vote-arrows"] > div { + color: @subtext0 !important; + } + + /* active upvote color */ + i.icon-upvote_fill { + color: @red !important; + } + + button[aria-label="upvote"][aria-pressed="false"] > span:hover > i { + color: @red !important; + } + + /* active upvote text color */ + button[aria-label="upvote"][aria-pressed="true"] ~ div { + color: @red !important; + } + + /* hover background for both upvotes and downvotes */ + button[aria-label="upvote"][aria-label="downvote"] > span:hover { + background: @surface0 !important; + } + + /* active downvote color */ + .icon-downvote_fill { + color: @blue !important; + } + + /* active downvote text color */ + button[aria-label="downvote"][aria-pressed="true"] ~ div { + color: @blue !important; + } + + button[aria-label="downvote"][aria-pressed="false"] > span:hover > i { + color: @blue !important; + } + + /* REPORT MODAL */ + + a.o1ov2mzLxTFAFP-O4Uv8I { + color: @accent-color !important; + } + + button._1lDGFVGU9k2mi-4kjU95Rp { + color: @base !important; + } + + /* SUBREDDIT PAGES */ + a[role="button"][target="_blank"] { + background: @text !important; + color: @base !important; + } + + /* radio buttons (flair selector, etc.) */ + div[role="radio"]:hover, + div[role="radio"]:focus { + background: @accent-color !important; + } + + div[role="radio"] > svg, + div[role="radio"] > svg:active { + fill: @text !important; + } + + /* checkboxes */ + button[role="checkbox"] { + fill: @accent-color !important; + } + + /* SUBREDDIT RIGHT SIDEBAR (some styles carry over from the homepage right sidebar section) */ + + /* header background */ + ._ZhON3a3vplThB8NFwuJn { + background: @crust !important; + color: @text !important; + } + + /* subreddit image background */ + img[alt="Subreddit Icon"][role="presentation"] { + background: @accent-color !important; + } + + /* border between uela */ + ._1KrMye71CT332tKKKUWAj6:not(:last-of-type) { + border-bottom-color: @surface0; + } + + /* follower color */ + .bg-neutral-background { + color: @text !important; + } + + /* default subreddit icon */ + i.icon-community_fill { + color: @accent-color !important; + } + + /* online users */ + div._21RLQh5PvUhC6vOKoFeHUP::before { + color: @green !important; + } + + /* POST VIEWER */ + + /* spoiler tags */ + ._2v4IIjPhKL0PDaWaWtjJ1E { + background: @surface0 !important; + } + + /* mod comment tag */ + span[id^="CommentTopMeta--Mod"] { + color: @green !important; + } + + /* op comment tag */ + span[id^="CommentTopMeta--OP"] { + color: @blue !important; + } + + /* post overlay if you have "open in new tab" disabled */ + div#overlayScrollContainer > div { + background: @crust !important; + } + + /* fixes comment section background not working when "open in new tab is disabled" */ + div._2M2wOqmeoPVvcSsJ6Po9-V._3287nL7j7epK9JmDC3N1VR { + background: @mantle !important; + } + + /* shade applied to background when clicking on a post with "open in new tab" disabled */ + div._2DJXORCrmcNpPTSq0LqL6i, + div._1DK52RbaamLOWw5UPaht_S { + background: fadeout(@crust, 20%) !important; + } + + /* gold award gradient */ + div.TmlaIdEplCzZ0F1aRGYQh[role="presentation"] { + background: linear-gradient( + 188deg, + #f9e2af1f 1.7%, + #f9e2af00 46%, + rgba(0, 0, 0, 0) + ) !important; + } + + /* image gallery next/previous buttons */ + a[title="Next"] > i, + a[title="Previous"] > i { + background: @surface0 !important; + } + + /* image gallery image count */ + div._61i6grM3um1yuw4GrN97P { + background: fadeout(@crust, 20%) !important; + color: @text !important; + } + + /* comment search bar */ + input#comment_search-bar { + background: @base !important; + } + + /* tab bar below banner */ + ._1gVVmSnHZpkUgVShsn7-ua { + background: @mantle !important; + } + + /* MULTIREDDITS/CUSTOM FEEDS */ + + /* delete custom feed button */ + .bX6SqXfzfxpv4GQbuIYVZ { + color: @red !important; + } + + /* TOOLTIPS */ + div.HQ2VJViRjokXpRbJzPvvc { + background: @mantle !important; + color: @text !important; + } + + div.HQ2VJViRjokXpRbJzPvvc::after { + border-top-color: @mantle !important; + } + + /* Recap Reddit Logo */ + .snoo-cls-1, + .snoo-cls-2, + .snoo-cls-3, + .snoo-cls-6, + .snoo-cls-8, + .snoo-cls-9 { + fill: @base; + } + + .snoo-cls-4, + .snoo-cls-5, + .snoo-cls-7, + .snoo-cls-10, + .snoo-cls-11 { + fill: @accent-color; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/rentry.co/catppuccin.user.css b/styles/rentry.co/catppuccin.user.css index 04bb8f1363..cd9a8fca50 100644 --- a/styles/rentry.co/catppuccin.user.css +++ b/styles/rentry.co/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Rentry.co Catppuccin +@name Rentry.co Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/rentry.co @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/rentry.co -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/rentry.co/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/rentry.co/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Arentry.co @description Soothing pastel theme for Rentry.co @author Catppuccin @@ -13,473 +13,4 @@ @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('rentry.org'), domain('rentry.co') { - @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); - .dark-mode { - #catppuccin(@darkFlavor, @accentColor); - #darkModeBtn::before { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } - :root:not(.dark-mode) { - #catppuccin(@lightFlavor, @accentColor); - #darkModeBtn::before { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } - - #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]; - - --ctp-rosewater: @rosewater; - --ctp-flamingo: @flamingo; - --ctp-pink: @pink; - --ctp-mauve: @mauve; - --ctp-red: @red; - --ctp-maroon: @maroon; - --ctp-peach: @peach; - --ctp-yellow: @yellow; - --ctp-green: @green; - --ctp-teal: @teal; - --ctp-sky: @sky; - --ctp-sapphire: @sapphire; - --ctp-blue: @blue; - --ctp-lavender: @lavender; - --ctp-text: @text; - --ctp-subtext1: @subtext1; - --ctp-subtext0: @subtext0; - --ctp-overlay2: @overlay2; - --ctp-overlay1: @overlay1; - --ctp-overlay0: @overlay0; - --ctp-surface2: @surface2; - --ctp-surface1: @surface1; - --ctp-surface0: @surface0; - --ctp-base: @base; - --ctp-mantle: @mantle; - --ctp-crust: @crust; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - body { - background: @crust; - color: @text; - } - /* Editor and preview */ - .cm-s-default, - .markdownx-preview, - .entry-text, - .tab-content { - background: @base !important; - color: @text !important; - } - - /* Tab navigation */ - .nav-link { - background: @mantle; - color: @overlay0 !important; - - &.active { - background: @base !important; - color: @text !important; - } - } - .form-control, - textarea { - background: @base !important; - color: @text !important; - } - .input-success { - box-shadow: inset 4px 0 @green !important; - } - .input-error { - &, - & + .CodeMirror-wrap { - box-shadow: @red 4px 0 inset !important; - } - } - .input-warning { - box-shadow: @yellow 4px 0 inset !important; - } - .btn { - background: @base !important; - color: @text !important; - &:hover { - background: @surface0 !important; - color: @text !important; - } - } - .btn-success { - &, - &.btn, - &:hover { - color: @green !important; - } - &#submitButton { - background: @base !important; - &:hover { - background: @surface0 !important; - } - } - } - .btn-danger { - &, - &.btn, - &:hover { - color: @red !important; - } - } - .clipboard { - color: @text; - background: none; - } - #progressBar { - background-color: @blue !important; - } - .full-contrast:not(.active) path { - fill: @overlay2 !important; - } - .full-contrast.active path { - fill: @peach !important; - } - .edit-code { - background: @mantle; - color: @text !important; - } - .cb-tooltiptext { - color: @text !important; - background: @surface0 !important; - } - .cb-tooltiptext-bottom::after { - border-color: transparent transparent @surface0; - } - .headerlink { - color: @overlay1 !important; - } - #submitButton { - background: @mantle !important; - } - // claim-guide page - .color-change { - &[style="color:grey"] { - color: @overlay2 !important; - } - &[style="color:#039205"] { - color: @green !important; - } - } - // delete modal - .modal-content { - background: @crust; - color: @text; - } - .modal-body { - color: @overlay2; - } - .modal-header { - color: @text !important; - } - .modal-header, - .modal-footer { - border-color: @surface1 !important; - } - #deleteButton { - color: @red !important; - } - // footer - a { - color: @blue; - - &:hover { - color: @sky !important; - } - } - .text-muted { - color: @overlay2 !important; - } - .text-primary { - color: @blue !important; - } - .text-success { - color: @green !important; - } - .text-warning, - .text-warning-darker { - color: @yellow !important; - } - .text-danger { - color: @red !important; - } - // editor - .CodeMirror-line::selection, - .CodeMirror-line > span::selection, - .CodeMirror-line > span > span::selection { - background-color: fade(@overlay2, 25%); - } - .cm-s-default { - .cm-formatting-admonition { - color: @yellow; - } - .cm-mark { - color: @yellow; - } - .cm-link { - color: @lavender; - } - .cm-url { - color: @blue; - } - .cm-formatting-toc { - color: @mauve; - } - .cm-variable-2 { - color: @green; - } - .cm-keyword { - color: @pink; - } - .cm-meta { - color: @subtext0; - } - .cm-comment { - color: @pink; - } - .cm-hr { - color: @surface2; - } - .cm-tag { - color: @blue; - } - .cm-header { - color: @text; - } - .cm-quote { - color: @green; - border-color: @green; - } - } - blockquote { - color: @green; - border-color: @green; - } - mark { - background: fade(@yellow, 25%); - color: @text; - } - .spoiler { - color: @text; - background: @text; - } - .spoiler:hover { - background: none; - } - code { - color: @red !important; - background: fade(@red, 10%) !important; - } - hr { - border-top-color: @surface1 !important; - } - .admonition { - &.info, - &.hint, - &.tip { - color: @blue; - background: fade(@blue, 25%); - & > .admonition-title::before { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } - &.note, - &.important { - color: @green; - background-color: fade(@green, 25%); - &, - .admonition.greentext { - & > .admonition-title::before { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } - } - &.greentext { - color: @green; - background-color: fade(@yellow, 25%); - } - &.warning, - &.caution, - &.attention { - color: @yellow; - background-color: fade(@yellow, 25%); - & > .admonition-title::before { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } - &.danger, - &.error { - color: @red; - background-color: fade(@red, 25%); - & > .admonition-title::before { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } - .admonition-title::before, - &.warning > .admonition-title::before, - &.danger > .admonition-title::before { - filter: none !important; - } - } - // code - .highlighttable { - border-left-color: @surface0 !important; - } - .linenodiv > pre > .normal > a:not(:hover), - .linenodiv > pre > a:not(:hover) { - color: @overlay2 !important; - } - .entry-text pre, - .markdownx-preview pre, - code { - color: @red !important; - } - .highlight { - pre { - color: @text !important; - } - border-color: @surface0 !important; - } - /* tables */ - // help tab/page table - .mtable > tbody > tr:nth-child(even) { - background-color: @mantle !important; - } - // markdown tables - .ntable th { - background-color: @surface1 !important; - border-color: @surface2 !important; - color: @text; - } - .ntable tr:nth-child(even) { - background-color: @surface0 !important; - } - } -} - -@-moz-document regexp('https?://rentry\\.(co|org)/.+/(raw|exists)'), - url-prefix('https://rentry.co/static/'), - domain('export3.rentry.co') { - @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%); - } - body { - color: @text !important; - background: @base !important; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/rentry.co/catppuccin.user.less b/styles/rentry.co/catppuccin.user.less new file mode 100644 index 0000000000..dbd09d28de --- /dev/null +++ b/styles/rentry.co/catppuccin.user.less @@ -0,0 +1,483 @@ +/* ==UserStyle== +@name Rentry.co Catppuccin +@namespace github.com/catppuccin/userstyles/styles/rentry.co +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/rentry.co +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/rentry.co/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Arentry.co +@description Soothing pastel theme for Rentry.co +@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("rentry.org"), domain("rentry.co") { + @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); + .dark-mode { + #catppuccin(@darkFlavor, @accentColor); + #darkModeBtn::before { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + :root:not(.dark-mode) { + #catppuccin(@lightFlavor, @accentColor); + #darkModeBtn::before { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + + #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]; + + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + body { + background: @crust; + color: @text; + } + /* Editor and preview */ + .cm-s-default, + .markdownx-preview, + .entry-text, + .tab-content { + background: @base !important; + color: @text !important; + } + + /* Tab navigation */ + .nav-link { + background: @mantle; + color: @overlay0 !important; + + &.active { + background: @base !important; + color: @text !important; + } + } + .form-control, + textarea { + background: @base !important; + color: @text !important; + } + .input-success { + box-shadow: inset 4px 0 @green !important; + } + .input-error { + &, + & + .CodeMirror-wrap { + box-shadow: @red 4px 0 inset !important; + } + } + .input-warning { + box-shadow: @yellow 4px 0 inset !important; + } + .btn { + background: @base !important; + color: @text !important; + &:hover { + background: @surface0 !important; + color: @text !important; + } + } + .btn-success { + &, + &.btn, + &:hover { + color: @green !important; + } + &#submitButton { + background: @base !important; + &:hover { + background: @surface0 !important; + } + } + } + .btn-danger { + &, + &.btn, + &:hover { + color: @red !important; + } + } + .clipboard { + color: @text; + background: none; + } + #progressBar { + background-color: @blue !important; + } + .full-contrast:not(.active) path { + fill: @overlay2 !important; + } + .full-contrast.active path { + fill: @peach !important; + } + .edit-code { + background: @mantle; + color: @text !important; + } + .cb-tooltiptext { + color: @text !important; + background: @surface0 !important; + } + .cb-tooltiptext-bottom::after { + border-color: transparent transparent @surface0; + } + .headerlink { + color: @overlay1 !important; + } + #submitButton { + background: @mantle !important; + } + // claim-guide page + .color-change { + &[style="color:grey"] { + color: @overlay2 !important; + } + &[style="color:#039205"] { + color: @green !important; + } + } + // delete modal + .modal-content { + background: @crust; + color: @text; + } + .modal-body { + color: @overlay2; + } + .modal-header { + color: @text !important; + } + .modal-header, + .modal-footer { + border-color: @surface1 !important; + } + #deleteButton { + color: @red !important; + } + // footer + a { + color: @blue; + + &:hover { + color: @sky !important; + } + } + .text-muted { + color: @overlay2 !important; + } + .text-primary { + color: @blue !important; + } + .text-success { + color: @green !important; + } + .text-warning, + .text-warning-darker { + color: @yellow !important; + } + .text-danger { + color: @red !important; + } + // editor + .CodeMirror-line::selection, + .CodeMirror-line > span::selection, + .CodeMirror-line > span > span::selection { + background-color: fade(@overlay2, 25%); + } + .cm-s-default { + .cm-formatting-admonition { + color: @yellow; + } + .cm-mark { + color: @yellow; + } + .cm-link { + color: @lavender; + } + .cm-url { + color: @blue; + } + .cm-formatting-toc { + color: @mauve; + } + .cm-variable-2 { + color: @green; + } + .cm-keyword { + color: @pink; + } + .cm-meta { + color: @subtext0; + } + .cm-comment { + color: @pink; + } + .cm-hr { + color: @surface2; + } + .cm-tag { + color: @blue; + } + .cm-header { + color: @text; + } + .cm-quote { + color: @green; + border-color: @green; + } + } + blockquote { + color: @green; + border-color: @green; + } + mark { + background: fade(@yellow, 25%); + color: @text; + } + .spoiler { + color: @text; + background: @text; + } + .spoiler:hover { + background: none; + } + code { + color: @red !important; + background: fade(@red, 10%) !important; + } + hr { + border-top-color: @surface1 !important; + } + .admonition { + &.info, + &.hint, + &.tip { + color: @blue; + background: fade(@blue, 25%); + & > .admonition-title::before { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + &.note, + &.important { + color: @green; + background-color: fade(@green, 25%); + &, + .admonition.greentext { + & > .admonition-title::before { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + } + &.greentext { + color: @green; + background-color: fade(@yellow, 25%); + } + &.warning, + &.caution, + &.attention { + color: @yellow; + background-color: fade(@yellow, 25%); + & > .admonition-title::before { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + &.danger, + &.error { + color: @red; + background-color: fade(@red, 25%); + & > .admonition-title::before { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + .admonition-title::before, + &.warning > .admonition-title::before, + &.danger > .admonition-title::before { + filter: none !important; + } + } + // code + .highlighttable { + border-left-color: @surface0 !important; + } + .linenodiv > pre > .normal > a:not(:hover), + .linenodiv > pre > a:not(:hover) { + color: @overlay2 !important; + } + .entry-text pre, + .markdownx-preview pre, + code { + color: @red !important; + } + .highlight { + pre { + color: @text !important; + } + border-color: @surface0 !important; + } + /* tables */ + // help tab/page table + .mtable > tbody > tr:nth-child(even) { + background-color: @mantle !important; + } + // markdown tables + .ntable th { + background-color: @surface1 !important; + border-color: @surface2 !important; + color: @text; + } + .ntable tr:nth-child(even) { + background-color: @surface0 !important; + } + } +} + +@-moz-document regexp("https?://rentry\\.(co|org)/.+/(raw|exists)"), + url-prefix("https://rentry.co/static/"), + domain("export3.rentry.co") { + @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%); + } + body { + color: @text !important; + background: @base !important; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/searxng/catppuccin.user.css b/styles/searxng/catppuccin.user.css index d5116399b0..95b59956f2 100644 --- a/styles/searxng/catppuccin.user.css +++ b/styles/searxng/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name SearXNG Catppuccin +@name SearXNG Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/searxng @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/searxng -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/searxng/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/searxng/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Asearxng @description Soothing pastel theme for SearXNG @author Catppuccin @@ -15,191 +15,4 @@ @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 checkbox additions "Additional Tweaks" 0 -==/UserStyle== */ - -/* Domains picked from https://searx.space/. */ -@-moz-document domain("search.bus-hit.me"), domain("search.inetol.net") { - @media (prefers-color-scheme: light) { - :root.theme-auto { - #catppuccin(@lightFlavor, @accentColor); - } - } - - @media (prefers-color-scheme: dark) { - :root.theme-auto { - #catppuccin(@darkFlavor, @accentColor); - } - } - - :root.theme-dark { - #catppuccin(@darkFlavor, @accentColor); - } - :root.theme-light { - #catppuccin(@lightFlavor, @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; - } - } - - --color-base-font: @text; - --color-base-background: @base; - --color-base-background-mobile: @base; - --color-url-font: @accent-color; - --color-url-visited-font: @accent-color; - --color-header-background: @mantle; - --color-header-border: @mantle; - --color-footer-background: @mantle; - --color-footer-border: @mantle; - --color-sidebar-border: @base; - --color-sidebar-font: @text; - --color-sidebar-background: @base; - --color-backtotop-font: @subtext1; - --color-backtotop-border: @surface0; - --color-backtotop-background: @surface0; - --color-btn-background: @accent-color; - --color-btn-font: @base; - --color-show-btn-background: @accent-color; - --color-show-btn-font: @base; - --color-search-border: @surface0; - --color-search-shadow: 0 2px 8px @crust; - --color-search-background: @surface0; - --color-search-font: @text; - --color-search-background-hover: @accent-color; - --color-error: @red; - --color-error-background: @surface0; - --color-warning: @yellow; - --color-warning-background: @surface0; - --color-success: @green; - --color-success-background: @surface0; - --color-categories-item-selected-font: @text; - --color-categories-item-border-selected: @accent-color; - --color-autocomplete-font: @subtext1; - --color-autocomplete-border: @surface0; - --color-autocomplete-shadow: 0 2px 8px @crust; - --color-autocomplete-background: @surface0; - --color-autocomplete-background-hover: @surface1; - --color-answer-font: @text; - --color-answer-background: @mantle; - --color-result-background: @mantle; - --color-result-border: @base; - --color-result-url-font: @subtext1; - --color-result-vim-selected: @surface0; - --color-result-vim-arrow: @accent-color; - --color-result-description-highlight-font: @text; - --color-result-link-font: @accent-color; - --color-result-link-font-highlight: @accent-color; - --color-result-link-visited-font: @accent-color; - --color-result-publishdate-font: @surface2; - --color-result-engines-font: @surface2; - --color-result-search-url-border: @surface2; - --color-result-search-url-font: @text; - --color-result-detail-font: @text; - --color-result-detail-label-font: @subtext0; - --color-result-detail-background: @base; - --color-result-detail-hr: @base; - --color-result-detail-link: @accent-color; - --color-result-detail-loader-border: rgba(255, 255, 255, 0.2); - --color-result-detail-loader-borderleft: @crust; - --color-result-image-span-font: @text; - --color-result-image-span-font-selected: @base; - --color-result-image-background: @mantle; - --color-settings-tr-hover: @surface0; - --color-settings-engine-description-font: @text; - --color-settings-engine-group-background: @surface0; - --color-toolkit-badge-font: @text; - --color-toolkit-badge-background: @surface0; - --color-toolkit-kbd-font: @text; - --color-toolkit-kbd-background: @mantle; - --color-toolkit-dialog-border: @mantle; - --color-toolkit-dialog-background: @mantle; - --color-toolkit-tabs-label-border: @base; - --color-toolkit-tabs-section-border: @base; - --color-toolkit-select-background: @surface0; - --color-toolkit-select-border: @surface0; - --color-toolkit-select-background-hover: @surface1; - --color-toolkit-input-text-font: @text; - --color-toolkit-checkbox-onoff-off-background: @surface0; - --color-toolkit-checkbox-onoff-on-background: @surface0; - --color-toolkit-checkbox-onoff-on-mark-background: @green; - --color-toolkit-checkbox-onoff-on-mark-color: @mantle; - --color-toolkit-checkbox-onoff-off-mark-background: @red; - --color-toolkit-checkbox-onoff-off-mark-color: @mantle; - --color-toolkit-checkbox-label-background: @base; - --color-toolkit-checkbox-label-border: @mantle; - --color-toolkit-checkbox-input-border: @accent-color; - --color-toolkit-engine-tooltip-border: @surface0; - --color-toolkit-engine-tooltip-background: @surface0; - --color-toolkit-loader-border: rgba(255, 255, 255, 0.2); - --color-toolkit-loader-borderleft: @crust; - --color-doc-code: @rosewater; - --color-doc-code-background: @mantle; - - #search_logo svg :not([fill="none"]) { - fill: @accent-color; - } - #search_logo svg :not([stroke="none"]) { - stroke: @accent-color; - } - - & when(@additions = 1) { - article.result { - background-color: var(--color-result-background); - border-radius: 0.75em; - padding: 0.75em; - margin: 0.5em; - } - article.category-images { - padding-bottom: 4em; - } - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/searxng/catppuccin.user.less b/styles/searxng/catppuccin.user.less new file mode 100644 index 0000000000..5444abd7c1 --- /dev/null +++ b/styles/searxng/catppuccin.user.less @@ -0,0 +1,203 @@ +/* ==UserStyle== +@name SearXNG Catppuccin +@namespace github.com/catppuccin/userstyles/styles/searxng +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/searxng +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/searxng/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Asearxng +@description Soothing pastel theme for SearXNG +@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"] + +@var checkbox additions "Additional Tweaks" 0 +==/UserStyle== */ + +/* Domains picked from https://searx.space/. */ +@-moz-document domain("search.bus-hit.me"), domain("search.inetol.net") { + @media (prefers-color-scheme: light) { + :root.theme-auto { + #catppuccin(@lightFlavor, @accentColor); + } + } + + @media (prefers-color-scheme: dark) { + :root.theme-auto { + #catppuccin(@darkFlavor, @accentColor); + } + } + + :root.theme-dark { + #catppuccin(@darkFlavor, @accentColor); + } + :root.theme-light { + #catppuccin(@lightFlavor, @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; + } + } + + --color-base-font: @text; + --color-base-background: @base; + --color-base-background-mobile: @base; + --color-url-font: @accent-color; + --color-url-visited-font: @accent-color; + --color-header-background: @mantle; + --color-header-border: @mantle; + --color-footer-background: @mantle; + --color-footer-border: @mantle; + --color-sidebar-border: @base; + --color-sidebar-font: @text; + --color-sidebar-background: @base; + --color-backtotop-font: @subtext1; + --color-backtotop-border: @surface0; + --color-backtotop-background: @surface0; + --color-btn-background: @accent-color; + --color-btn-font: @base; + --color-show-btn-background: @accent-color; + --color-show-btn-font: @base; + --color-search-border: @surface0; + --color-search-shadow: 0 2px 8px @crust; + --color-search-background: @surface0; + --color-search-font: @text; + --color-search-background-hover: @accent-color; + --color-error: @red; + --color-error-background: @surface0; + --color-warning: @yellow; + --color-warning-background: @surface0; + --color-success: @green; + --color-success-background: @surface0; + --color-categories-item-selected-font: @text; + --color-categories-item-border-selected: @accent-color; + --color-autocomplete-font: @subtext1; + --color-autocomplete-border: @surface0; + --color-autocomplete-shadow: 0 2px 8px @crust; + --color-autocomplete-background: @surface0; + --color-autocomplete-background-hover: @surface1; + --color-answer-font: @text; + --color-answer-background: @mantle; + --color-result-background: @mantle; + --color-result-border: @base; + --color-result-url-font: @subtext1; + --color-result-vim-selected: @surface0; + --color-result-vim-arrow: @accent-color; + --color-result-description-highlight-font: @text; + --color-result-link-font: @accent-color; + --color-result-link-font-highlight: @accent-color; + --color-result-link-visited-font: @accent-color; + --color-result-publishdate-font: @surface2; + --color-result-engines-font: @surface2; + --color-result-search-url-border: @surface2; + --color-result-search-url-font: @text; + --color-result-detail-font: @text; + --color-result-detail-label-font: @subtext0; + --color-result-detail-background: @base; + --color-result-detail-hr: @base; + --color-result-detail-link: @accent-color; + --color-result-detail-loader-border: rgba(255, 255, 255, 0.2); + --color-result-detail-loader-borderleft: @crust; + --color-result-image-span-font: @text; + --color-result-image-span-font-selected: @base; + --color-result-image-background: @mantle; + --color-settings-tr-hover: @surface0; + --color-settings-engine-description-font: @text; + --color-settings-engine-group-background: @surface0; + --color-toolkit-badge-font: @text; + --color-toolkit-badge-background: @surface0; + --color-toolkit-kbd-font: @text; + --color-toolkit-kbd-background: @mantle; + --color-toolkit-dialog-border: @mantle; + --color-toolkit-dialog-background: @mantle; + --color-toolkit-tabs-label-border: @base; + --color-toolkit-tabs-section-border: @base; + --color-toolkit-select-background: @surface0; + --color-toolkit-select-border: @surface0; + --color-toolkit-select-background-hover: @surface1; + --color-toolkit-input-text-font: @text; + --color-toolkit-checkbox-onoff-off-background: @surface0; + --color-toolkit-checkbox-onoff-on-background: @surface0; + --color-toolkit-checkbox-onoff-on-mark-background: @green; + --color-toolkit-checkbox-onoff-on-mark-color: @mantle; + --color-toolkit-checkbox-onoff-off-mark-background: @red; + --color-toolkit-checkbox-onoff-off-mark-color: @mantle; + --color-toolkit-checkbox-label-background: @base; + --color-toolkit-checkbox-label-border: @mantle; + --color-toolkit-checkbox-input-border: @accent-color; + --color-toolkit-engine-tooltip-border: @surface0; + --color-toolkit-engine-tooltip-background: @surface0; + --color-toolkit-loader-border: rgba(255, 255, 255, 0.2); + --color-toolkit-loader-borderleft: @crust; + --color-doc-code: @rosewater; + --color-doc-code-background: @mantle; + + #search_logo svg :not([fill="none"]) { + fill: @accent-color; + } + #search_logo svg :not([stroke="none"]) { + stroke: @accent-color; + } + + & when (@additions = 1) { + article.result { + background-color: var(--color-result-background); + border-radius: 0.75em; + padding: 0.75em; + margin: 0.5em; + } + article.category-images { + padding-bottom: 4em; + } + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/shinigami-eyes/catppuccin.user.css b/styles/shinigami-eyes/catppuccin.user.css index bb575b19ae..2d532d8283 100644 --- a/styles/shinigami-eyes/catppuccin.user.css +++ b/styles/shinigami-eyes/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Shinigami Eyes Catppuccin +@name Shinigami Eyes Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/shinigami-eyes @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/shinigami-eyes -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/shinigami-eyes/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/shinigami-eyes/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ashinigami-eyes @description Soothing pastel theme for Shinigami Eyes @author Catppuccin @@ -13,149 +13,4 @@ @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== */ - -/* -These are the domains for the sites that Shinigami Eyes works with. -The list can be found at https://github.com/shinigami-eyes/shinigami-eyes/blob/b66e9ad41fa4daef31886b139d8af6f852efcaaa/extension/manifest.json#L15-L96. -*/ -@-moz-document domain("facebook.com"), - domain("youtube.com"), - domain("reddit.com"), - domain("twitter.com"), - domain("x.com"), - domain("medium.com"), - domain("disqus.com"), - domain("tumblr.com"), - domain("wikipedia.org"), - domain("rationalwiki.org"), - domain("cohost.org"), - domain("bsky.app"), - domain("anarchism.space"), - domain("aus.social"), - domain("c.im"), - domain("chaos.social"), - domain("eightpoint.app"), - domain("eldritch.cafe"), - domain("fosstodon.org"), - domain("hachyderm.io"), - domain("infosec.exchange"), - domain("kolektiva.social"), - domain("mas.to"), - domain("masto.ai"), - domain("chaosfem.tw"), - domain("mastodon.art"), - domain("mastodon.cloud"), - domain("mastodon.green"), - domain("mastodon.ie"), - domain("mastodon.nz"), - domain("mastodon.online"), - domain("mastodon.scot"), - domain("mastodon.social"), - domain("mastodon.world"), - domain("mastodon.xyz"), - domain("mastodonapp.uk"), - domain("meow.social"), - domain("mstdn.ca"), - domain("mstdn.jp"), - domain("mstdn.social"), - domain("octodon.social"), - domain("ohai.social"), - domain("pixelfed.social"), - domain("queer.party"), - domain("sfba.social"), - domain("social.transsafety.network"), - domain("tech.lgbt"), - domain("techhub.social"), - domain("toot.cat"), - domain("toot.community"), - domain("toot.wales"), - domain("vulpine.club"), - domain("wandering.shop"), - domain("lgbtqia.space"), - domain("threads.net"), - domain("duckduckgo.com"), - domain("bing.com"), - domain("google.ar"), - domain("google.at"), - domain("google.be"), - domain("google.ca"), - domain("google.ch"), - domain("google.co.uk"), - domain("google.com"), - domain("google.de"), - domain("google.dk"), - domain("google.es"), - domain("google.fi"), - domain("google.fr"), - domain("google.is"), - domain("google.it"), - domain("google.no"), - domain("google.pt"), - domain("google.se") { - @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]; - - body { - --ShinigamiEyesTFriendly: @green !important; - --ShinigamiEyesTransphobic: @red !important; - } - - .shinigami-eyes-theme-purple-yellow { - --ShinigamiEyesTFriendly: @mauve !important; - --ShinigamiEyesTransphobic: @yellow !important; - } - - .shinigami-eyes-theme-cyan-orange { - --ShinigamiEyesTFriendly: @sapphire !important; - --ShinigamiEyesTransphobic: @peach !important; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/shinigami-eyes/catppuccin.user.less b/styles/shinigami-eyes/catppuccin.user.less new file mode 100644 index 0000000000..14babaa7d4 --- /dev/null +++ b/styles/shinigami-eyes/catppuccin.user.less @@ -0,0 +1,159 @@ +/* ==UserStyle== +@name Shinigami Eyes Catppuccin +@namespace github.com/catppuccin/userstyles/styles/shinigami-eyes +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/shinigami-eyes +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/shinigami-eyes/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ashinigami-eyes +@description Soothing pastel theme for Shinigami Eyes +@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== */ + +/* +These are the domains for the sites that Shinigami Eyes works with. +The list can be found at https://github.com/shinigami-eyes/shinigami-eyes/blob/b66e9ad41fa4daef31886b139d8af6f852efcaaa/extension/manifest.json#L15-L96. +*/ +@-moz-document domain("facebook.com"), + domain("youtube.com"), + domain("reddit.com"), + domain("twitter.com"), + domain("x.com"), + domain("medium.com"), + domain("disqus.com"), + domain("tumblr.com"), + domain("wikipedia.org"), + domain("rationalwiki.org"), + domain("cohost.org"), + domain("bsky.app"), + domain("anarchism.space"), + domain("aus.social"), + domain("c.im"), + domain("chaos.social"), + domain("eightpoint.app"), + domain("eldritch.cafe"), + domain("fosstodon.org"), + domain("hachyderm.io"), + domain("infosec.exchange"), + domain("kolektiva.social"), + domain("mas.to"), + domain("masto.ai"), + domain("chaosfem.tw"), + domain("mastodon.art"), + domain("mastodon.cloud"), + domain("mastodon.green"), + domain("mastodon.ie"), + domain("mastodon.nz"), + domain("mastodon.online"), + domain("mastodon.scot"), + domain("mastodon.social"), + domain("mastodon.world"), + domain("mastodon.xyz"), + domain("mastodonapp.uk"), + domain("meow.social"), + domain("mstdn.ca"), + domain("mstdn.jp"), + domain("mstdn.social"), + domain("octodon.social"), + domain("ohai.social"), + domain("pixelfed.social"), + domain("queer.party"), + domain("sfba.social"), + domain("social.transsafety.network"), + domain("tech.lgbt"), + domain("techhub.social"), + domain("toot.cat"), + domain("toot.community"), + domain("toot.wales"), + domain("vulpine.club"), + domain("wandering.shop"), + domain("lgbtqia.space"), + domain("threads.net"), + domain("duckduckgo.com"), + domain("bing.com"), + domain("google.ar"), + domain("google.at"), + domain("google.be"), + domain("google.ca"), + domain("google.ch"), + domain("google.co.uk"), + domain("google.com"), + domain("google.de"), + domain("google.dk"), + domain("google.es"), + domain("google.fi"), + domain("google.fr"), + domain("google.is"), + domain("google.it"), + domain("google.no"), + domain("google.pt"), + domain("google.se") { + @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]; + + body { + --ShinigamiEyesTFriendly: @green !important; + --ShinigamiEyesTransphobic: @red !important; + } + + .shinigami-eyes-theme-purple-yellow { + --ShinigamiEyesTFriendly: @mauve !important; + --ShinigamiEyesTransphobic: @yellow !important; + } + + .shinigami-eyes-theme-cyan-orange { + --ShinigamiEyesTFriendly: @sapphire !important; + --ShinigamiEyesTransphobic: @peach !important; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/snapchat-web/catppuccin.user.css b/styles/snapchat-web/catppuccin.user.css index f428f632fc..9a746bd62a 100644 --- a/styles/snapchat-web/catppuccin.user.css +++ b/styles/snapchat-web/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Snapchat Web Catppuccin +@name Snapchat Web Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/snapchat-web @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/snapchat-web -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/snapchat-web/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/snapchat-web/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Asnapchat-web @description Soothing pastel theme for Snapchat Web @author Catppuccin @@ -13,161 +13,4 @@ @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('web.snapchat.com') { - :root[theme="dark"] { - #catppuccin(@darkFlavor, @accentColor); - } - :root[theme="light"] { - #catppuccin(@lightFlavor, @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; - } - } - - /* Snapchat applies the variables (overrides?) to specific elements so we need to apply to every element (with high specificity) to override those. */ - &, - body > main#root * { - --sigMain: @base; - --sigSurface: @mantle; - --sigSurfaceRGB: red(@mantle) green(@mantle) blue(@mantle); - --sigAboveSurface: @crust; - --sigSurfaceDown: @base; - --sigSubscreen: @crust; - --sigTextField: @crust; - --sigDivider: @surface0; - --sigDividerLight: @surface0; - --sigColorBackgroundBorder: @surface0; - --sigBackgroundPrimary: @base; - --sigBackgroundSecondary: @mantle; - --sigBackgroundSecondaryHover: darken(@mantle, 5%); - --sigBackgroundTertiary: @crust; - --sigBackgroundMessageHover: @surface1; - --sigBackgroundMessageSaved: @surface0; - --sigBackgroundMessageSavedHover: @surface2; - --sigOverlay: fade(@overlay0, 40%); - --sigOverlayHover: fade(@overlay0, 35%); - --sigBrandSecondary: @accent-color; - - --sigTextPrimary: @text; - --sigButtonOnPrimary: @crust; - --sigTextSecondary: @subtext0; - --sigButtonOnSecondary: @subtext0; - --sigTextTertiary: @subtext1; - --sigButtonOnTertiary: @subtext1; - --sigTextNegative: @red; - --sigButtonOnSuccess: @base; - --sigButtonOnError: @base; - --sigButtonOnNegative: @base; - --sigButtonOnChatSurfaceCalling: @base; - --sigTextPlayer: @crust; - --sigButtonGreyHover: darken(@surface0, 5%); - --sigButtonGreyActive: darken(@surface0, 8%); - - --sigButtonPrimary: @accent-color; - --sigButtonPrimaryHover: darken(@accent-color, 5%); - --sigButtonPrimaryActive: darken(@accent-color, 8%); - --sigButtonSecondary: @surface0; - --sigButtonSecondaryHover: @surface1; - --sigButtonSecondaryActive: @surface2; - --sigButtonNegative: @red; - --sigButtonError: @red; - --sigButtonErrorHover: darken(@red, 5%); - --sigButtonSuccess: @green; - --sigButtonSuccessHover: darken(@green, 5%); - --sigIconCalling: @green; - --sigIconCallingHover: darken(@green, 5%); - --sigChatSurfaceCalling: @green; - --sigChatSurfaceCallingDisabled: darken(@green, 20%); - --sigChatSurfaceCallingHover: darken(@green, 5%); - - --sigChat: @blue; - --sigChatIcon: @blue; - --sigSnapWithoutSound: @red; - --sigSnapWithSound: @mauve; - } - - // new chat button - button[title="New Chat"], - // checkbox to choose camera - [id*="downshift-"] a, - // checkbox in new chat popup - [aria-label="Unselect chosen user"] { - path[fill="#fff"] { - fill: @crust; - } - // replaces blue fill - path[fill="#51B7FF"] { - fill: @accent-color; - } - } - - // new group button - form > div > div > div[role="searchbox"] button { - color: @crust; - path { - fill: @crust; - } - } - - // story reply text - li button[type="button"].replyText { - background-color: rgba(30, 30, 30, 0.8); - } - - // buttons when in call - [data-projection-id] button { - --sigColorAlwaysWhite: @surface0; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/snapchat-web/catppuccin.user.less b/styles/snapchat-web/catppuccin.user.less new file mode 100644 index 0000000000..da848404ea --- /dev/null +++ b/styles/snapchat-web/catppuccin.user.less @@ -0,0 +1,171 @@ +/* ==UserStyle== +@name Snapchat Web Catppuccin +@namespace github.com/catppuccin/userstyles/styles/snapchat-web +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/snapchat-web +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/snapchat-web/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Asnapchat-web +@description Soothing pastel theme for Snapchat Web +@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("web.snapchat.com") { + :root[theme="dark"] { + #catppuccin(@darkFlavor, @accentColor); + } + :root[theme="light"] { + #catppuccin(@lightFlavor, @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; + } + } + + /* Snapchat applies the variables (overrides?) to specific elements so we need to apply to every element (with high specificity) to override those. */ + &, + body > main#root * { + --sigMain: @base; + --sigSurface: @mantle; + --sigSurfaceRGB: red(@mantle) green(@mantle) blue(@mantle); + --sigAboveSurface: @crust; + --sigSurfaceDown: @base; + --sigSubscreen: @crust; + --sigTextField: @crust; + --sigDivider: @surface0; + --sigDividerLight: @surface0; + --sigColorBackgroundBorder: @surface0; + --sigBackgroundPrimary: @base; + --sigBackgroundSecondary: @mantle; + --sigBackgroundSecondaryHover: darken(@mantle, 5%); + --sigBackgroundTertiary: @crust; + --sigBackgroundMessageHover: @surface1; + --sigBackgroundMessageSaved: @surface0; + --sigBackgroundMessageSavedHover: @surface2; + --sigOverlay: fade(@overlay0, 40%); + --sigOverlayHover: fade(@overlay0, 35%); + --sigBrandSecondary: @accent-color; + + --sigTextPrimary: @text; + --sigButtonOnPrimary: @crust; + --sigTextSecondary: @subtext0; + --sigButtonOnSecondary: @subtext0; + --sigTextTertiary: @subtext1; + --sigButtonOnTertiary: @subtext1; + --sigTextNegative: @red; + --sigButtonOnSuccess: @base; + --sigButtonOnError: @base; + --sigButtonOnNegative: @base; + --sigButtonOnChatSurfaceCalling: @base; + --sigTextPlayer: @crust; + --sigButtonGreyHover: darken(@surface0, 5%); + --sigButtonGreyActive: darken(@surface0, 8%); + + --sigButtonPrimary: @accent-color; + --sigButtonPrimaryHover: darken(@accent-color, 5%); + --sigButtonPrimaryActive: darken(@accent-color, 8%); + --sigButtonSecondary: @surface0; + --sigButtonSecondaryHover: @surface1; + --sigButtonSecondaryActive: @surface2; + --sigButtonNegative: @red; + --sigButtonError: @red; + --sigButtonErrorHover: darken(@red, 5%); + --sigButtonSuccess: @green; + --sigButtonSuccessHover: darken(@green, 5%); + --sigIconCalling: @green; + --sigIconCallingHover: darken(@green, 5%); + --sigChatSurfaceCalling: @green; + --sigChatSurfaceCallingDisabled: darken(@green, 20%); + --sigChatSurfaceCallingHover: darken(@green, 5%); + + --sigChat: @blue; + --sigChatIcon: @blue; + --sigSnapWithoutSound: @red; + --sigSnapWithSound: @mauve; + } + + // new chat button + button[title="New Chat"], + // checkbox to choose camera + [id*="downshift-"] a, + // checkbox in new chat popup + [aria-label="Unselect chosen user"] { + path[fill="#fff"] { + fill: @crust; + } + // replaces blue fill + path[fill="#51B7FF"] { + fill: @accent-color; + } + } + + // new group button + form > div > div > div[role="searchbox"] button { + color: @crust; + path { + fill: @crust; + } + } + + // story reply text + li button[type="button"].replyText { + background-color: rgba(30, 30, 30, 0.8); + } + + // buttons when in call + [data-projection-id] button { + --sigColorAlwaysWhite: @surface0; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/spotify-web/catppuccin.user.css b/styles/spotify-web/catppuccin.user.css index 59b471ddf5..20f164d440 100644 --- a/styles/spotify-web/catppuccin.user.css +++ b/styles/spotify-web/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Spotify Web Catppuccin +@name Spotify Web Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/spotify-web @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/spotify-web -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/spotify-web/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/spotify-web/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aspotify-web @description Soothing pastel theme for Spotify Web @author Catppuccin @@ -13,615 +13,4 @@ @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('open.spotify.com') { - @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; - } - } - - .encore-dark-theme, - .encore-dark-theme .encore-base-set, - .encore-light-theme, - .encore-light-theme .encore-base-set, - .encore-dark-theme .encore-inverted-light-set { - --background-base: @base; - --background-highlight: @surface0; - --background-press: @crust; - --background-elevated-base: @surface0; - --background-elevated-highlight: @surface1; - --background-elevated-press: @crust; - --background-tinted-base: @crust; - --background-tinted-highlight: @mantle; - --background-tinted-press: @base; - --background-unsafe-for-small-text-base: @base; - --background-unsafe-for-small-text-highlight: @base; - --background-unsafe-for-small-text-press: @base; - --text-base: @text; - --text-subdued: @subtext1; - --text-bright-accent: @accent-color; - --text-negative: @red; - --text-warning: @yellow; - --text-positive: @accent-color; - --text-announcement: @sapphire; - --essential-base: @text; - --essential-subdued: @subtext1; - --essential-bright-accent: @accent-color; - --essential-negative: @red; - --essential-warning: @yellow; - --essential-positive: @green; - --essential-announcement: @base; - --decorative-base: @text; - --decorative-subdued: @surface2; - } - .encore-dark-theme .encore-inverted-light-set { - --background-base: @surface1; - --background-highlight: @surface0; - --background-press: @surface1; - } - .encore-dark-theme .encore-bright-accent-set { - --background-base: @accent-color; - --background-highlight: @accent-color; - --background-press: @accent-color; - --background-elevated-base: @accent-color; - --background-elevated-highlight: @accent-color; - --background-elevated-press: @accent-color; - --background-tinted-base: @accent-color; - --background-tinted-highlight: @accent-color; - --background-tinted-press: @accent-color; - --background-unsafe-for-small-text-base: @accent-color; - --background-unsafe-for-small-text-highlight: @accent-color; - --background-unsafe-for-small-text-press: @accent-color; - --decorative-subdued: darken(@accent-color, 10%); - } - .encore-dark-theme .encore-over-media-set { - --background-base: @mantle; - --background-highlight: @crust; - --background-press: @mantle; - --background-unsafe-for-small-text-base: @mantle; - --background-unsafe-for-small-text-highlight: @mantle; - --background-unsafe-for-small-text-press: @mantle; - --background-elevated-base: @crust; - --background-elevated-highlight: @crust; - --background-elevated-press: @mantle; - --background-tinted-base: @mantle; - --background-tinted-highlight: @mantle; - --background-tinted-press: @mantle; - } - & when (@lookup =latte) { - .T1xI1RTSFU7Wu94UuvE6 * { - background: @surface0 !important; - } - .bQthUEx0_U98DJkT1saO, - .RVRoa p { - color: @base !important; - } - } - .encore-text { - color: @text; - } - .ydlidzq2hSQrvGXn7yni { - background: @text; - color: @crust; - } - .encore-dark-theme .encore-base-set > *, - .encore-dark-theme > * { - --parents-essential-base: @text; - } - .X8yW2lJbFCQfV5GjoRwL { - --generic-tooltip-background-color: @mantle; - } - .SboKmDrCTZng7t4EgNoM { - background-color: @mantle !important; - } - - #main > * > *, - .sqKERfoKl4KwrtHqcKOd, - .HkbHLcqgUfXruL5xVi28, - .uhDzVbFHyCQDH6WrWZaC, - .pHrwZOFBdT8FNXnmcPPI { - background: @crust !important; - } - - /* some borders on the playlist details */ - .ePPpO_NuGDUxVRTw7y6W { - border-color: @surface0; - } - - // Some animated bar icon - .uWvwXlS0Da1bWsRX6KOw, - .n5XwsUqagSoVk8oMiw1x { - filter: saturate(0) brightness(1.3) !important; - } - .eoWRdH, - .in4OjUTflcsoj9RUpf05 *, - .gpNta6i8q3KYJC6WBZQC * { - color: @subtext0 !important; - } - ._EShSNaBK1wUIaZQFJJQ { - box-shadow: 0 4px 20px @mantle; - } - .gHImFiUWOg93pvTefeAD, - .CoLO4pdSl8LGWyVZA00t { - background: @base !important; - } - .mjZrvVI3CxfHJXu7y0Lg, - .coBkWVskipFo8KxLKief .T1xI1RTSFU7Wu94UuvE6 { - background-color: @accent-color !important; - } - .ListRowTitle__LineClamp-sc-1xe2if1-0.lmgIvZ *, - .EaTxqhHk6J4ecKHwpY5m *, - .SboKmDrCTZng7t4EgNoM *, - .MfVrtIzQJ7iZXfRWg6eM, - .Ydwa1P5GkCggtLlSvphs, - .Fb61sprjhh75aOITDnsJ *, - .Ai_McRq9wJEYK21w8nX_ *, - .QZhV0hWVKlExlKr266jo::placeholder, - .JzZyf6OGCGtdscOZGt8Y.t6HIrX67Lp80Nj6tGauz *, - .hfdkySA4kiUldFsPj9lD.ZcNcu7WZgOAz_Mkcoff3 *, - .ListRowTitle__LineClamp-sc-1xe2if1-0 *, - .FZhaXNtbN3Crwrgd0TA7.control-button, - .COJ84QbXPrd4jkO1HU2N *, - .zhQX2DOI2muMo8EKsZ6h, - .MHIOvvlSYRmF7VAJDLWy, - .JouuH90_RNAdTj0ZjcCA, - .r9m6lHy7RyIPDzW1Youe, - .PDPsYDh4ntfQE3B4duUI, - .bfQ2S9bMXr_kJjqEfcwA *, - .QO9loc33XC50mMRUCIvf, - .G7zO58ORUHxcUw0sXktM, - .rq2VQ5mb9SDAFWbBIUIn *, - .lp9Tfm4rsM9_pfbIE0zd, - .w6j_vX6SF5IxSXrrkYw5, - .prGqQr33U0mG14TJ5V8a *, - .BQD_pE0Nva_z6z7CvZww *, - .W5cB_o0XkkU7Q8tlTGxq, - .PGSe59fD1Hwc9yUM2d3U a, - .jb9xD5ECTqKFK02qe3HZ *, - .X8yW2lJbFCQfV5GjoRwL *, - .tbvnCR3ZJxmAKY6nRPBe, - .CmR9tHJ5ta6oWJlKBm3k *, - .xgmjVLxjqfcXK5BV_XyN.fUYMR7LuRXv0KJWFvRZA, - .DzWw3g4E_66wu9ktqn36 .home-active-icon, - .Footer__StyledFooter-sc-xwm5vq-0 *, - .DzWw3g4E_66wu9ktqn36 .search-active-icon, - .dYnaPI, - .home-active-icon, - .zOsKPnD_9x3KJqQCSmAq, - .beyOcd3p0PEzhrlKIbU1, - .oORVTPvg6eTQflVKKgw8 { - color: @text !important; - } - .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4) - .ObVor_8sQq5whKbtWs8a, - .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4) - .PAqIqZXvse_3h6sDVxU0, - .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4) - .UudGCx16EmBkuFPllvss - a, - .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4) - .W676nknusnBt8sz19YVV, - .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4) - ._TH6YAXEzJtzSxhkGSqu, - .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4) - ._TH6YAXEzJtzSxhkGSqu - a, - .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4) - .ObVor_8sQq5whKbtWs8a, - .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4) - .PAqIqZXvse_3h6sDVxU0, - .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4) - .UudGCx16EmBkuFPllvss - a, - .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4) - .W676nknusnBt8sz19YVV, - .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4) - ._TH6YAXEzJtzSxhkGSqu, - .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4) - ._TH6YAXEzJtzSxhkGSqu - a, - .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG .PAqIqZXvse_3h6sDVxU0, - .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG .UudGCx16EmBkuFPllvss, - .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG .UudGCx16EmBkuFPllvss a, - .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG ._TH6YAXEzJtzSxhkGSqu, - .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG ._TH6YAXEzJtzSxhkGSqu a, - .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG .ucB9avGYvzsmzXUOw0S7, - .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover .PAqIqZXvse_3h6sDVxU0, - .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover .UudGCx16EmBkuFPllvss, - .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover .UudGCx16EmBkuFPllvss a, - .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover ._TH6YAXEzJtzSxhkGSqu, - .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover ._TH6YAXEzJtzSxhkGSqu a, - .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover .ucB9avGYvzsmzXUOw0S7, - .NPv26QCDgdnwsPOlYJmQ div:nth-child(2) { - color: @subtext1; - } - .VKCcyYujazVPj6VkksPM svg path { - fill: @text; - } - .ThG4UqWk7ASXCMm69Opn, - .BQD_pE0Nva_z6z7CvZww *, - .k2ndSrHzhAsXBcLqRKYx * { - color: @overlay2 !important; - } - .gqYYMz8DkhaT3e44LcHQ span { - color: @base; - } - *[class*="ButtonInner-sc-14ud5tc-0 GBxjH encore-bright-accent-set vq0lsCoYrDUDvkuUIaRg"] - * { - color: @crust !important; - fill: @crust !important; - } - .bk509U3ZhZc9YBJAmoPB { - background: @mantle; - } - .HVCCFeUiHVwZVv74p34a *, - .mXNT9H2GU7lDW4cGx0q1, - .uV8q95GGAb2VDtL3gpYa { - background: @surface0 !important; - } - ._VADS4mdajCt5Yuf6KjW, - .uJjmxe0T11dUVeW6Biz8 { - background-color: @base; - } - .QO9loc33XC50mMRUCIvf { - background-color: @surface0; - } - .QO9loc33XC50mMRUCIvf:focus { - -webkit-box-shadow: 0 0 0 2px @text; - box-shadow: 0 0 0 2px @text; - } - .QO9loc33XC50mMRUCIvf:hover { - background-color: @surface1; - } - .H6jh9Xd7DNOq3NsLDmCB:active, - .H6jh9Xd7DNOq3NsLDmCB:focus, - .H6jh9Xd7DNOq3NsLDmCB:hover { - color: @text !important; - } - .NbcaczStd8vD2rHWwaKv, - .QZhV0hWVKlExlKr266jo { - background-color: @surface0; - color: @text; - } - div[role*="menuitem"] { - background-color: @surface0 !important; - } - .H6jh9Xd7DNOq3NsLDmCB, - .htqz7Vb8mLJvGKTi1vrs, - .dsbIME { - color: @text; - } - .IconWrapper__Wrapper-sc-1hf1hjl-0 svg { - color: @crust !important; - } - .kPpCsU { - fill: @text; - } - .VgSbatGBB9XwTH2_dsxg .ql0zZd7giPXSnPg75NR0 { - background: @base !important; - color: @text; - } - .HsbczDqu9qjcYr7EIdHR, - .rovbQsmAS_mwvpKHaVhQ * { - background: transparent !important; - } - .Z35BWOA10YGn5uc9YgAp, - .pQmF4tvRpUeLWgPKUcW7 { - background-color: @crust; - } - .S4OmZ_IZexmZ5dasPqW5 { - background-color: @accent-color !important; - } - .T1xI1RTSFU7Wu94UuvE6[style*="background-color:"] { - background-color: @accent-color !important; - } - .fIvMht6B9HdROywMNJZ4.hIFR8WDm_54EEIa1gwpC { - background-color: @accent-color !important; - } - // Explicit icon - .kpGMQq1KFz620g_BD_dS { - background-color: @overlay0; - } - .link-subtle { - color: @subtext1; - &:hover { - color: @text; - } - } - .c0KyMkxeMCWQGE7cR8s_, - .s58sp4t3h1uU9n_42KqD, - .TextForLabel-sc-1jqya9m-0 span { - color: @base !important; - } - // Search cards - .LunqxlFIupJw_Dkx6mNx { - background: @mantle !important; - } - .bQthUEx0_U98DJkT1saO, - .RVRoa p { - color: @text; - } - // Social buttons - .kmZeYl { - background-color: @mantle; - &:hover { - background-color: @crust; - } - } - // Cookie Banner - #onetrust-banner-sdk { - background-color: @base !important; - color: @text !important; - } - #onetrust-policy-text, - .ot-dpd-title, - .onetrust-policy-title, - .ot-text-bold { - color: @text !important; - } - .ot-dpd-desc, - .ot-link-btn { - color: @text !important; - } - #onetrust-consent-sdk #onetrust-policy-title { - color: @text !important; - } - #onetrust-banner-sdk button { - color: @text !important; - } - #onetrust-pc-btn-handler { - background-color: @base !important; - } - // Cookie Settings - #onetrust-consent-sdk #onetrust-pc-sdk, - .ot-acc-txt, - .ot-acc-grpdesc { - background-color: @base !important; - } - #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-title, - #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-desc, - #onetrust-consent-sdk #onetrust-pc-sdk h3, - #onetrust-consent-sdk #onetrust-pc-sdk h5, - #onetrust-consent-sdk #onetrust-pc-sdk h4, - #onetrust-consent-sdk #onetrust-pc-sdk h6, - #onetrust-consent-sdk #onetrust-pc-sdk h2, - #onetrust-pc-sdk .ot-always-active, - .ot-acc-txt, - .ot-acc-grpdesc, - #onetrust-consent-sdk #onetrust-pc-sdk p { - color: @text !important; - } - #onetrust-pc-sdk .ot-accordion-layout.ot-cat-item { - border-color: @accent-color !important; - border-radius: 8px; - } - #onetrust-consent-sdk - #onetrust-pc-sdk - button:not( - #clear-filters-handler, - .ot-close-icon, - #filter-btn-handler, - .ot-remove-objection-handler, - .ot-obj-leg-btn-handler, - [aria-expanded], - .ot-link-btn - ) { - background-color: @accent-color !important; - border-color: @accent-color !important; - } - // Vendors List - #onetrust-consent-sdk #onetrust-pc-sdk .ot-sel-all-hdr span { - color: @text; - } - #onetrust-pc-sdk input[type="text"] { - background-color: @mantle !important; - border-color: @accent-color !important; - } - #onetrust-pc-sdk .ot-pc-header, - #onetrust-pc-sdk ul li { - border-bottom-color: @accent-color !important; - border-top-color: @accent-color !important; - } - #ot-ven-lst { - border-top-color: @accent-color !important; - } - .ot-pc-footer { - border-top-color: @accent-color !important; - } - #onetrust-pc-sdk li > button { - border-top-color: @accent-color !important; - } - #onetrust-consent-sdk #onetrust-pc-sdk #ot-sel-blk { - background-color: @base !important; - } - // Sign Up Banner - .dz_h98rH9nZCwfPdnKgr { - background-image: none; - } - // Icon - .RfidWIoz8FON2WhFoItU { - color: @text; - } - // Playlist bottom - .cuLHaM { - background-color: @base; - } - // Left Sidebar - #Desktop_LeftSidebar_Id { - background-color: transparent; - } - // Sidebar top - .y2UicQnlTq148rL8Y0jp { - box-shadow: 0 6px 10px @mantle; - } - // Bottom player - .vnCew8qzJq3cVGlYFXRI { - background-color: @text; - } - .vnCew8qzJq3cVGlYFXRI * { - fill: @crust; - } - - .rovbQsmAS_mwvpKHaVhQ .PFgcCoJSWC3KjhZxHDYH * { - fill: @text !important; - } - .TywOcKZEqNynWecCiATc { - --bg-color: @surface1; - --fg-color: @text; - --is-active-fg-color: @accent-color; - } - a { - color: @accent-color; - } - .Ng3dPPA2_1CFYkzPukjM { - background: @blue; - } - .KAZD28usA1vPz5GVpm63.EHxL6K_6WWDlTCZP6x5w::after { - background-color: @accent-color; - } - .tippy-box[data-theme~="activation"] { - background-color: @accent-color; - color: @crust; - .c0KyMkxeMCWQGE7cR8s_ *, - .TextForLabel-sc-1jqya9m-0.kIsEKW { - color: @crust; - } - } - .YIJxiTuPgMQav316cRqP { - --generic-tooltip-background-color: @surface0; - } - .tippy-arrow { - color: @surface0 !important; - } - .zrvvPyoxE6wQNqnu0yWA, - .mjprSb2e1tKJpqwvgFSh, - .jW4eWdr_LUeOXwPpKhWG { - color: @text; - background: @surface0; - } - input:checked ~ .Js64TOfWtHksI6TQ6knT { - background: @accent-color !important; - } - .bXJ77rNIJ18Y0GfegQdr + label > :first-child { - background: @text !important; - } - .Z35BWOA10YGn5uc9YgAp:focus-within, - .Z35BWOA10YGn5uc9YgAp:hover, - .Z35BWOA10YGn5uc9YgAp[data-context-menu-open="true"] { - background: @mantle !important; - } - .wC9sIed7pfp47wZbmU6m:hover, - .wC9sIed7pfp47wZbmU6m:not([aria-checked="true"]):focus { - background: @surface0 !important; - } - .DuEPSADpSwCcO880xjUG:not(:first-child) > .QgtQw2NJz7giDZxap2BB::before { - border-color: @surface0; - } - .pSxFsY9Fgcj5f8Gf05mh, - .qyKJPLjz8o4jnbk92JOn { - background-color: fade(@crust, 70%); - } - .eG930DCaQXDFqjhxRGIs > * { - background: @crust !important; - } - .IconWrapper__Wrapper-sc-1hf1hjl-0.fIXqki svg { - color: @text !important; - } - .IconWrapper__Wrapper-sc-1hf1hjl-0.bjlVXn svg.bneLcE { - color: @base !important; - } - // Shuffle / Loop Icons - .OF_3F0SQCsBtL1jSTlTA svg, - .OF_3F0SQCsBtL1jSTlTA::after, - .tP0mccyU1WAa7I9PevC1 svg, - .tP0mccyU1WAa7I9PevC1::after { - color: @accent-color !important; - } - // Full Screen Song Window - .npv-up-next { - background-color: @surface0 !important; - } - .mbUrqWP55sK6zhspiR72 button { - color: @text !important; - } - .npv-lyrics__text-wrapper--previous p { - color: @subtext1 !important; - } - .npv-lyrics__text-wrapper--current p { - color: @text !important; - } - .npv-lyrics__text-wrapper--next p { - color: @subtext0 !important; - } - .npv-lyrics__text--credits { - color: @text !important; - } - // Context Menus - div[data-tippy-root], - #context-menu, - #hover-or-focus-tooltip, - .nYdM55iHFByRTzJUmx9X { - border-radius: 8px; - background-color: @surface0; - color: @text; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/spotify-web/catppuccin.user.less b/styles/spotify-web/catppuccin.user.less new file mode 100644 index 0000000000..d964e0ea3f --- /dev/null +++ b/styles/spotify-web/catppuccin.user.less @@ -0,0 +1,625 @@ +/* ==UserStyle== +@name Spotify Web Catppuccin +@namespace github.com/catppuccin/userstyles/styles/spotify-web +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/spotify-web +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/spotify-web/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aspotify-web +@description Soothing pastel theme for Spotify Web +@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("open.spotify.com") { + @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; + } + } + + .encore-dark-theme, + .encore-dark-theme .encore-base-set, + .encore-light-theme, + .encore-light-theme .encore-base-set, + .encore-dark-theme .encore-inverted-light-set { + --background-base: @base; + --background-highlight: @surface0; + --background-press: @crust; + --background-elevated-base: @surface0; + --background-elevated-highlight: @surface1; + --background-elevated-press: @crust; + --background-tinted-base: @crust; + --background-tinted-highlight: @mantle; + --background-tinted-press: @base; + --background-unsafe-for-small-text-base: @base; + --background-unsafe-for-small-text-highlight: @base; + --background-unsafe-for-small-text-press: @base; + --text-base: @text; + --text-subdued: @subtext1; + --text-bright-accent: @accent-color; + --text-negative: @red; + --text-warning: @yellow; + --text-positive: @accent-color; + --text-announcement: @sapphire; + --essential-base: @text; + --essential-subdued: @subtext1; + --essential-bright-accent: @accent-color; + --essential-negative: @red; + --essential-warning: @yellow; + --essential-positive: @green; + --essential-announcement: @base; + --decorative-base: @text; + --decorative-subdued: @surface2; + } + .encore-dark-theme .encore-inverted-light-set { + --background-base: @surface1; + --background-highlight: @surface0; + --background-press: @surface1; + } + .encore-dark-theme .encore-bright-accent-set { + --background-base: @accent-color; + --background-highlight: @accent-color; + --background-press: @accent-color; + --background-elevated-base: @accent-color; + --background-elevated-highlight: @accent-color; + --background-elevated-press: @accent-color; + --background-tinted-base: @accent-color; + --background-tinted-highlight: @accent-color; + --background-tinted-press: @accent-color; + --background-unsafe-for-small-text-base: @accent-color; + --background-unsafe-for-small-text-highlight: @accent-color; + --background-unsafe-for-small-text-press: @accent-color; + --decorative-subdued: darken(@accent-color, 10%); + } + .encore-dark-theme .encore-over-media-set { + --background-base: @mantle; + --background-highlight: @crust; + --background-press: @mantle; + --background-unsafe-for-small-text-base: @mantle; + --background-unsafe-for-small-text-highlight: @mantle; + --background-unsafe-for-small-text-press: @mantle; + --background-elevated-base: @crust; + --background-elevated-highlight: @crust; + --background-elevated-press: @mantle; + --background-tinted-base: @mantle; + --background-tinted-highlight: @mantle; + --background-tinted-press: @mantle; + } + & when (@lookup = latte) { + .T1xI1RTSFU7Wu94UuvE6 * { + background: @surface0 !important; + } + .bQthUEx0_U98DJkT1saO, + .RVRoa p { + color: @base !important; + } + } + .encore-text { + color: @text; + } + .ydlidzq2hSQrvGXn7yni { + background: @text; + color: @crust; + } + .encore-dark-theme .encore-base-set > *, + .encore-dark-theme > * { + --parents-essential-base: @text; + } + .X8yW2lJbFCQfV5GjoRwL { + --generic-tooltip-background-color: @mantle; + } + .SboKmDrCTZng7t4EgNoM { + background-color: @mantle !important; + } + + #main > * > *, + .sqKERfoKl4KwrtHqcKOd, + .HkbHLcqgUfXruL5xVi28, + .uhDzVbFHyCQDH6WrWZaC, + .pHrwZOFBdT8FNXnmcPPI { + background: @crust !important; + } + + /* some borders on the playlist details */ + .ePPpO_NuGDUxVRTw7y6W { + border-color: @surface0; + } + + // Some animated bar icon + .uWvwXlS0Da1bWsRX6KOw, + .n5XwsUqagSoVk8oMiw1x { + filter: saturate(0) brightness(1.3) !important; + } + .eoWRdH, + .in4OjUTflcsoj9RUpf05 *, + .gpNta6i8q3KYJC6WBZQC * { + color: @subtext0 !important; + } + ._EShSNaBK1wUIaZQFJJQ { + box-shadow: 0 4px 20px @mantle; + } + .gHImFiUWOg93pvTefeAD, + .CoLO4pdSl8LGWyVZA00t { + background: @base !important; + } + .mjZrvVI3CxfHJXu7y0Lg, + .coBkWVskipFo8KxLKief .T1xI1RTSFU7Wu94UuvE6 { + background-color: @accent-color !important; + } + .ListRowTitle__LineClamp-sc-1xe2if1-0.lmgIvZ *, + .EaTxqhHk6J4ecKHwpY5m *, + .SboKmDrCTZng7t4EgNoM *, + .MfVrtIzQJ7iZXfRWg6eM, + .Ydwa1P5GkCggtLlSvphs, + .Fb61sprjhh75aOITDnsJ *, + .Ai_McRq9wJEYK21w8nX_ *, + .QZhV0hWVKlExlKr266jo::placeholder, + .JzZyf6OGCGtdscOZGt8Y.t6HIrX67Lp80Nj6tGauz *, + .hfdkySA4kiUldFsPj9lD.ZcNcu7WZgOAz_Mkcoff3 *, + .ListRowTitle__LineClamp-sc-1xe2if1-0 *, + .FZhaXNtbN3Crwrgd0TA7.control-button, + .COJ84QbXPrd4jkO1HU2N *, + .zhQX2DOI2muMo8EKsZ6h, + .MHIOvvlSYRmF7VAJDLWy, + .JouuH90_RNAdTj0ZjcCA, + .r9m6lHy7RyIPDzW1Youe, + .PDPsYDh4ntfQE3B4duUI, + .bfQ2S9bMXr_kJjqEfcwA *, + .QO9loc33XC50mMRUCIvf, + .G7zO58ORUHxcUw0sXktM, + .rq2VQ5mb9SDAFWbBIUIn *, + .lp9Tfm4rsM9_pfbIE0zd, + .w6j_vX6SF5IxSXrrkYw5, + .prGqQr33U0mG14TJ5V8a *, + .BQD_pE0Nva_z6z7CvZww *, + .W5cB_o0XkkU7Q8tlTGxq, + .PGSe59fD1Hwc9yUM2d3U a, + .jb9xD5ECTqKFK02qe3HZ *, + .X8yW2lJbFCQfV5GjoRwL *, + .tbvnCR3ZJxmAKY6nRPBe, + .CmR9tHJ5ta6oWJlKBm3k *, + .xgmjVLxjqfcXK5BV_XyN.fUYMR7LuRXv0KJWFvRZA, + .DzWw3g4E_66wu9ktqn36 .home-active-icon, + .Footer__StyledFooter-sc-xwm5vq-0 *, + .DzWw3g4E_66wu9ktqn36 .search-active-icon, + .dYnaPI, + .home-active-icon, + .zOsKPnD_9x3KJqQCSmAq, + .beyOcd3p0PEzhrlKIbU1, + .oORVTPvg6eTQflVKKgw8 { + color: @text !important; + } + .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4) + .ObVor_8sQq5whKbtWs8a, + .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4) + .PAqIqZXvse_3h6sDVxU0, + .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4) + .UudGCx16EmBkuFPllvss + a, + .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4) + .W676nknusnBt8sz19YVV, + .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4) + ._TH6YAXEzJtzSxhkGSqu, + .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4) + ._TH6YAXEzJtzSxhkGSqu + a, + .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4) + .ObVor_8sQq5whKbtWs8a, + .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4) + .PAqIqZXvse_3h6sDVxU0, + .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4) + .UudGCx16EmBkuFPllvss + a, + .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4) + .W676nknusnBt8sz19YVV, + .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4) + ._TH6YAXEzJtzSxhkGSqu, + .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4) + ._TH6YAXEzJtzSxhkGSqu + a, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG .PAqIqZXvse_3h6sDVxU0, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG .UudGCx16EmBkuFPllvss, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG .UudGCx16EmBkuFPllvss a, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG ._TH6YAXEzJtzSxhkGSqu, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG ._TH6YAXEzJtzSxhkGSqu a, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG .ucB9avGYvzsmzXUOw0S7, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover .PAqIqZXvse_3h6sDVxU0, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover .UudGCx16EmBkuFPllvss, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover .UudGCx16EmBkuFPllvss a, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover ._TH6YAXEzJtzSxhkGSqu, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover ._TH6YAXEzJtzSxhkGSqu a, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover .ucB9avGYvzsmzXUOw0S7, + .NPv26QCDgdnwsPOlYJmQ div:nth-child(2) { + color: @subtext1; + } + .VKCcyYujazVPj6VkksPM svg path { + fill: @text; + } + .ThG4UqWk7ASXCMm69Opn, + .BQD_pE0Nva_z6z7CvZww *, + .k2ndSrHzhAsXBcLqRKYx * { + color: @overlay2 !important; + } + .gqYYMz8DkhaT3e44LcHQ span { + color: @base; + } + *[class*="ButtonInner-sc-14ud5tc-0 GBxjH encore-bright-accent-set vq0lsCoYrDUDvkuUIaRg"] + * { + color: @crust !important; + fill: @crust !important; + } + .bk509U3ZhZc9YBJAmoPB { + background: @mantle; + } + .HVCCFeUiHVwZVv74p34a *, + .mXNT9H2GU7lDW4cGx0q1, + .uV8q95GGAb2VDtL3gpYa { + background: @surface0 !important; + } + ._VADS4mdajCt5Yuf6KjW, + .uJjmxe0T11dUVeW6Biz8 { + background-color: @base; + } + .QO9loc33XC50mMRUCIvf { + background-color: @surface0; + } + .QO9loc33XC50mMRUCIvf:focus { + -webkit-box-shadow: 0 0 0 2px @text; + box-shadow: 0 0 0 2px @text; + } + .QO9loc33XC50mMRUCIvf:hover { + background-color: @surface1; + } + .H6jh9Xd7DNOq3NsLDmCB:active, + .H6jh9Xd7DNOq3NsLDmCB:focus, + .H6jh9Xd7DNOq3NsLDmCB:hover { + color: @text !important; + } + .NbcaczStd8vD2rHWwaKv, + .QZhV0hWVKlExlKr266jo { + background-color: @surface0; + color: @text; + } + div[role*="menuitem"] { + background-color: @surface0 !important; + } + .H6jh9Xd7DNOq3NsLDmCB, + .htqz7Vb8mLJvGKTi1vrs, + .dsbIME { + color: @text; + } + .IconWrapper__Wrapper-sc-1hf1hjl-0 svg { + color: @crust !important; + } + .kPpCsU { + fill: @text; + } + .VgSbatGBB9XwTH2_dsxg .ql0zZd7giPXSnPg75NR0 { + background: @base !important; + color: @text; + } + .HsbczDqu9qjcYr7EIdHR, + .rovbQsmAS_mwvpKHaVhQ * { + background: transparent !important; + } + .Z35BWOA10YGn5uc9YgAp, + .pQmF4tvRpUeLWgPKUcW7 { + background-color: @crust; + } + .S4OmZ_IZexmZ5dasPqW5 { + background-color: @accent-color !important; + } + .T1xI1RTSFU7Wu94UuvE6[style*="background-color:"] { + background-color: @accent-color !important; + } + .fIvMht6B9HdROywMNJZ4.hIFR8WDm_54EEIa1gwpC { + background-color: @accent-color !important; + } + // Explicit icon + .kpGMQq1KFz620g_BD_dS { + background-color: @overlay0; + } + .link-subtle { + color: @subtext1; + &:hover { + color: @text; + } + } + .c0KyMkxeMCWQGE7cR8s_, + .s58sp4t3h1uU9n_42KqD, + .TextForLabel-sc-1jqya9m-0 span { + color: @base !important; + } + // Search cards + .LunqxlFIupJw_Dkx6mNx { + background: @mantle !important; + } + .bQthUEx0_U98DJkT1saO, + .RVRoa p { + color: @text; + } + // Social buttons + .kmZeYl { + background-color: @mantle; + &:hover { + background-color: @crust; + } + } + // Cookie Banner + #onetrust-banner-sdk { + background-color: @base !important; + color: @text !important; + } + #onetrust-policy-text, + .ot-dpd-title, + .onetrust-policy-title, + .ot-text-bold { + color: @text !important; + } + .ot-dpd-desc, + .ot-link-btn { + color: @text !important; + } + #onetrust-consent-sdk #onetrust-policy-title { + color: @text !important; + } + #onetrust-banner-sdk button { + color: @text !important; + } + #onetrust-pc-btn-handler { + background-color: @base !important; + } + // Cookie Settings + #onetrust-consent-sdk #onetrust-pc-sdk, + .ot-acc-txt, + .ot-acc-grpdesc { + background-color: @base !important; + } + #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-title, + #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-desc, + #onetrust-consent-sdk #onetrust-pc-sdk h3, + #onetrust-consent-sdk #onetrust-pc-sdk h5, + #onetrust-consent-sdk #onetrust-pc-sdk h4, + #onetrust-consent-sdk #onetrust-pc-sdk h6, + #onetrust-consent-sdk #onetrust-pc-sdk h2, + #onetrust-pc-sdk .ot-always-active, + .ot-acc-txt, + .ot-acc-grpdesc, + #onetrust-consent-sdk #onetrust-pc-sdk p { + color: @text !important; + } + #onetrust-pc-sdk .ot-accordion-layout.ot-cat-item { + border-color: @accent-color !important; + border-radius: 8px; + } + #onetrust-consent-sdk + #onetrust-pc-sdk + button:not( + #clear-filters-handler, + .ot-close-icon, + #filter-btn-handler, + .ot-remove-objection-handler, + .ot-obj-leg-btn-handler, + [aria-expanded], + .ot-link-btn + ) { + background-color: @accent-color !important; + border-color: @accent-color !important; + } + // Vendors List + #onetrust-consent-sdk #onetrust-pc-sdk .ot-sel-all-hdr span { + color: @text; + } + #onetrust-pc-sdk input[type="text"] { + background-color: @mantle !important; + border-color: @accent-color !important; + } + #onetrust-pc-sdk .ot-pc-header, + #onetrust-pc-sdk ul li { + border-bottom-color: @accent-color !important; + border-top-color: @accent-color !important; + } + #ot-ven-lst { + border-top-color: @accent-color !important; + } + .ot-pc-footer { + border-top-color: @accent-color !important; + } + #onetrust-pc-sdk li > button { + border-top-color: @accent-color !important; + } + #onetrust-consent-sdk #onetrust-pc-sdk #ot-sel-blk { + background-color: @base !important; + } + // Sign Up Banner + .dz_h98rH9nZCwfPdnKgr { + background-image: none; + } + // Icon + .RfidWIoz8FON2WhFoItU { + color: @text; + } + // Playlist bottom + .cuLHaM { + background-color: @base; + } + // Left Sidebar + #Desktop_LeftSidebar_Id { + background-color: transparent; + } + // Sidebar top + .y2UicQnlTq148rL8Y0jp { + box-shadow: 0 6px 10px @mantle; + } + // Bottom player + .vnCew8qzJq3cVGlYFXRI { + background-color: @text; + } + .vnCew8qzJq3cVGlYFXRI * { + fill: @crust; + } + + .rovbQsmAS_mwvpKHaVhQ .PFgcCoJSWC3KjhZxHDYH * { + fill: @text !important; + } + .TywOcKZEqNynWecCiATc { + --bg-color: @surface1; + --fg-color: @text; + --is-active-fg-color: @accent-color; + } + a { + color: @accent-color; + } + .Ng3dPPA2_1CFYkzPukjM { + background: @blue; + } + .KAZD28usA1vPz5GVpm63.EHxL6K_6WWDlTCZP6x5w::after { + background-color: @accent-color; + } + .tippy-box[data-theme~="activation"] { + background-color: @accent-color; + color: @crust; + .c0KyMkxeMCWQGE7cR8s_ *, + .TextForLabel-sc-1jqya9m-0.kIsEKW { + color: @crust; + } + } + .YIJxiTuPgMQav316cRqP { + --generic-tooltip-background-color: @surface0; + } + .tippy-arrow { + color: @surface0 !important; + } + .zrvvPyoxE6wQNqnu0yWA, + .mjprSb2e1tKJpqwvgFSh, + .jW4eWdr_LUeOXwPpKhWG { + color: @text; + background: @surface0; + } + input:checked ~ .Js64TOfWtHksI6TQ6knT { + background: @accent-color !important; + } + .bXJ77rNIJ18Y0GfegQdr + label > :first-child { + background: @text !important; + } + .Z35BWOA10YGn5uc9YgAp:focus-within, + .Z35BWOA10YGn5uc9YgAp:hover, + .Z35BWOA10YGn5uc9YgAp[data-context-menu-open="true"] { + background: @mantle !important; + } + .wC9sIed7pfp47wZbmU6m:hover, + .wC9sIed7pfp47wZbmU6m:not([aria-checked="true"]):focus { + background: @surface0 !important; + } + .DuEPSADpSwCcO880xjUG:not(:first-child) > .QgtQw2NJz7giDZxap2BB::before { + border-color: @surface0; + } + .pSxFsY9Fgcj5f8Gf05mh, + .qyKJPLjz8o4jnbk92JOn { + background-color: fade(@crust, 70%); + } + .eG930DCaQXDFqjhxRGIs > * { + background: @crust !important; + } + .IconWrapper__Wrapper-sc-1hf1hjl-0.fIXqki svg { + color: @text !important; + } + .IconWrapper__Wrapper-sc-1hf1hjl-0.bjlVXn svg.bneLcE { + color: @base !important; + } + // Shuffle / Loop Icons + .OF_3F0SQCsBtL1jSTlTA svg, + .OF_3F0SQCsBtL1jSTlTA::after, + .tP0mccyU1WAa7I9PevC1 svg, + .tP0mccyU1WAa7I9PevC1::after { + color: @accent-color !important; + } + // Full Screen Song Window + .npv-up-next { + background-color: @surface0 !important; + } + .mbUrqWP55sK6zhspiR72 button { + color: @text !important; + } + .npv-lyrics__text-wrapper--previous p { + color: @subtext1 !important; + } + .npv-lyrics__text-wrapper--current p { + color: @text !important; + } + .npv-lyrics__text-wrapper--next p { + color: @subtext0 !important; + } + .npv-lyrics__text--credits { + color: @text !important; + } + // Context Menus + div[data-tippy-root], + #context-menu, + #hover-or-focus-tooltip, + .nYdM55iHFByRTzJUmx9X { + border-radius: 8px; + background-color: @surface0; + color: @text; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/stack-overflow/catppuccin.user.css b/styles/stack-overflow/catppuccin.user.css index e8f99fd99c..bc9826f738 100644 --- a/styles/stack-overflow/catppuccin.user.css +++ b/styles/stack-overflow/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Stack Overflow Catppuccin +@name Stack Overflow Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/stack-overflow @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/stack-overflow -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/stack-overflow/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/stack-overflow/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Astack-overflow @description Soothing pastel theme for Stack Overflow @author Catppuccin @@ -13,503 +13,4 @@ @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('stackoverflow.com'), domain('stackexchange.com'), domain('serverfault.com'), -domain('superuser.com'), domain('mathoverflow.net'), domain('askubuntu.com'), domain('stackapps.com') { - @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); - code.hljs { - background: none !important; - } - - body:not(.theme-highcontrast, .theme-dark).unified-theme { - &, - .themed { - #catppuccin(@lightFlavor, @accentColor); - } - } - body:not(.theme-highcontrast).unified-theme.theme-dark { - &, - .themed { - #catppuccin(@darkFlavor, @accentColor); - } - } - - @media (prefers-color-scheme: light) { - body:not(.theme-highcontrast).unified-theme.theme-system { - #catppuccin(@lightFlavor, @accentColor); - } - } - @media (prefers-color-scheme: dark) { - body:not(.theme-highcontrast).unified-theme.theme-system { - #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]; - - --ctp-rosewater: @rosewater; - --ctp-flamingo: @flamingo; - --ctp-pink: @pink; - --ctp-mauve: @mauve; - --ctp-red: @red; - --ctp-maroon: @maroon; - --ctp-peach: @peach; - --ctp-yellow: @yellow; - --ctp-green: @green; - --ctp-teal: @teal; - --ctp-sky: @sky; - --ctp-sapphire: @sapphire; - --ctp-blue: @blue; - --ctp-lavender: @lavender; - --ctp-text: @text; - --ctp-subtext1: @subtext1; - --ctp-subtext0: @subtext0; - --ctp-overlay2: @overlay2; - --ctp-overlay1: @overlay1; - --ctp-overlay0: @overlay0; - --ctp-surface2: @surface2; - --ctp-surface1: @surface1; - --ctp-surface0: @surface0; - --ctp-base: @base; - --ctp-mantle: @mantle; - --ctp-crust: @crust; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - &, - * { - --theme-background-color: @mantle; - --theme-content-background-color: @base; - --theme-content-border-color: @surface0; - --theme-topbar-background-color: @mantle; - --theme-topbar-search-background: @mantle; - --theme-topbar-search-border: @surface2; - --theme-topbar-search-placeholder: @subtext0; - --theme-topbar-item-color: @text; - --theme-topbar-item-color-hover: @text; - --theme-topbar-item-background-hover: @surface0; - --theme-button-primary-background-color: @accent-color; - --theme-button-primary-hover-background-color: darken(@accent-color, 5%); - --theme-button-primary-active-background-color: @text; - --theme-link-color: @accent-color; - --theme-link-color-hover: darken(@accent-color, 5%); - --theme-footer-title-color: @text; - --theme-footer-text-color: @subtext0; - --theme-footer-link-color: @subtext0; - --theme-footer-link-color-hover: @subtext1; - --theme-footer-background-color: @mantle; - --theme-header-background-color: transparent; - --theme-tag-background-color: @accent-color; - --theme-tag-border-color: @accent-color; - --theme-tag-color: @mantle; - --theme-tag-hover-background-color: darken(@accent-color, 5%); - --theme-tag-hover-border-color: darken(@accent-color, 5%); - --theme-tag-hover-color: @mantle; - --theme-post-title-color: @accent-color; - --theme-post-title-color-hover: darken(@accent-color, 5%); - - --highlight-bg: @mantle; - - --theme-primary: @accent-color; - --theme-primary-100: fade(@accent-color, 20%); - --theme-primary-200: fade(@accent-color, 30%); - --theme-primary-500: fade(@accent-color, 90%); - --theme-primary-600: @accent-color; - - --translucent-secondary: fade(@accent-color, 10%); - --theme-secondary-100: fade(@accent-color, 20%); - --theme-secondary-200: fade(@accent-color, 30%); - --theme-secondary-300: fade(@accent-color, 40%); - --theme-secondary-400: fade(@accent-color, 50%); - --theme-secondary-500: fade(@accent-color, 60%); - --theme-secondary-600: fade(@accent-color, 70%); - - --white: @mantle; - --black: @text; - --black-100: @base; - --black-150: @surface0; - --black-200: @surface1; - --black-225: @surface1; - --black-250: @surface2; - --black-300: @overlay0; - --black-350: @overlay2; - --black-400: @subtext0; - --black-500: @subtext1; - --black-600: @text; - - --purple-100: fade(@mauve, 30%); - --purple-200: fade(@mauve, 40%); - --purple-400: fade(@mauve, 60%); - - --green-100: @green; - --green-400: @green; - --green-500: @green; - - --blue-200: fade(@blue, 30%); - --blue-300: fade(@blue, 40%); - --blue-400: @sky; - --blue-500: @blue; - - --orange-400: fade(@peach, 80%); - --orange-500: fade(@peach, 90%); - --orange-600: @peach; - - --bronze-100: fade(@rosewater, 20%); - --bronze-200: fade(@rosewater, 30%); - --bronze-300: fade(@rosewater, 40%); - --bronze-400: fade(@rosewater, 50%); - - --yellow-100: fade(@yellow, 20%); - --yellow-200: fade(@yellow, 30%); - --yellow-400: fade(@yellow, 70%); - --yellow-500: fade(@yellow, 90%); - - --red-200: fade(@red, 40%); - --red-400: fade(@red, 70%); - --red-500: fade(@red, 80%); - - --scrollbar: @surface1; - } - - .wmd-button > span { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .s-topbar .s-topbar--logo .-img, - .envelope-on, - .envelope-off, - .vote-up-off, - .vote-up-on, - .vote-down-off, - .vote-down-on, - .feed-icon, - .vote-accepted-off, - .vote-accepted-on, - .vote-accepted-bounty, - .badge-earned-check, - .delete-tag, - .grippie, - .expander-arrow-hide, - .expander-arrow-show, - .expander-arrow-small-hide, - .expander-arrow-small-show, - .anonymous-gravatar, - .badge1, - .badge2, - .badge3 { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .s-avatar { - &.subcommunity-topic-mobile-dev { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - &.subcommunity-topic-r-language { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - } - - [fill="#BCBBBB"] { - fill: @overlay2 !important; - } - [fill="#F48024"] { - fill: @peach !important; - } - - .s-topbar .s-topbar--logo .-img { - filter: none; - } - - .s-sidebarwidget { - background-color: @base; - border-color: @surface0; - - .s-sidebarwidget--header { - background-color: @surface0; - border-color: @surface1; - } - &::after, - .s-sidebarwidget--content, - .s-sidebarwidget--header { - border-color: @surface1; - } - } - - .s-prose kbd { - border-top-color: transparent; - box-shadow: - 0 1px 1px @crust, - inset 0 1px 0 0 @overlay2; - } - - .s-pagination .s-pagination--item { - border-color: @surface2; - } - - .s-badge { - color: @crust; - background-color: @mauve; - } - - .s-notice { - &, - .s-notice--btn { - color: @text !important; - } - } - - .badge, - .badge-tag { - background-color: @surface0; - color: @text; - } - - #onetrust-consent-sdk { - #onetrust-banner-sdk { - background-color: @mantle; - - &:focus { - outline-color: @surface1; - } - - #onetrust-accept-btn-handler, - #onetrust-reject-all-handler { - background-color: @accent-color; - color: @crust; - } - - #onetrust-button-group button#onetrust-pc-btn-handler { - background-color: @crust !important; - border-color: @accent-color !important; - color: @accent-color !important; - } - - #onetrust-policy-title, - #onetrust-policy-text, - .ot-b-addl-desc, - .ot-dpd-desc, - .ot-dpd-title, - #onetrust-policy-text :not(.onetrust-vendors-list-handler), - .ot-dpd-desc :not(.onetrust-vendors-list-handler), - #banner-options *, - .ot-cat-header, - .ot-optout-signal, - a { - color: @text !important; - } - } - - /* Manage cookies popup */ - #onetrust-pc-sdk { - background-color: @base; - - h3, - h4, - h5, - h6, - p, - #ot-ven-lst .ot-ven-opts p, - #ot-pc-desc, - #ot-pc-title, - .ot-li-title, - .ot-sel-all-hdr span, - #ot-host-lst .ot-host-info, - #ot-fltr-modal #modal-header, - .ot-checkbox label span, - #ot-pc-lst #ot-sel-blk p, - #ot-pc-lst #ot-lst-title h3, - #ot-pc-lst .back-btn-handler p, - #ot-pc-lst .ot-ven-name, - #ot-pc-lst #ot-ven-lst .consent-category, - .ot-leg-btn-container .ot-inactive-leg-btn, - .ot-label-status, - .ot-chkbox label span, - #clear-filters-handler, - .ot-optout-signal { - color: @text; - } - - .ot-pc-header { - background-color: @mantle !important; - border-bottom-color: @surface1; - } - - .ot-accordion-layout.ot-cat-item { - border-color: @surface1; - } - - .ot-pc-footer { - border-top-color: @surface2 !important; - } - - button:not( - #clear-filters-handler, - .ot-close-icon, - #filter-btn-handler, - .ot-remove-objection-handler, - .ot-obj-leg-btn-handler, - [aria-expanded], - .ot-link-btn - ), - .ot-leg-btn-container .ot-active-leg-btn { - background-color: @accent-color !important; - border-color: @accent-color; - color: @mantle; - } - } - } - - .sunset-background { - background-color: @base !important; - color: @text !important; - } - - .disabled-link { - color: @overlay2; - } - - /* Stack Exchange logo */ - [fill="#FEFEFE"] { - fill: @text !important; - } - [fill="#2F96E8"], - [fill="#2D6DB5"] { - fill: @blue !important; - } - [fill="#8FD8F7"] { - fill: lighten(@sky, 10%); - } - [fill="#46A2D9"] { - fill: lighten(@blue, 5%); - } - [fill="#155397"] { - fill: darken(@blue, 10%) !important; - } - - /* Other Stack Exchange site logos */ - [alt="Server Fault"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - [alt="Super User"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - [alt="MathOverflow"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - [alt="Ask Ubuntu"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - [alt="Stack Apps"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - [alt="Unix & Linux"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - &:has([alt="Unix & Linux"]) { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - [alt="Cryptography"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - &:has([alt="Cryptography"]) { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - - .site-header { - background-image: none; - } - } - } -} - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/stack-overflow/catppuccin.user.less b/styles/stack-overflow/catppuccin.user.less new file mode 100644 index 0000000000..01025a4991 --- /dev/null +++ b/styles/stack-overflow/catppuccin.user.less @@ -0,0 +1,516 @@ +/* ==UserStyle== +@name Stack Overflow Catppuccin +@namespace github.com/catppuccin/userstyles/styles/stack-overflow +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/stack-overflow +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/stack-overflow/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Astack-overflow +@description Soothing pastel theme for Stack Overflow +@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("stackoverflow.com"), + domain("stackexchange.com"), + domain("serverfault.com"), + domain("superuser.com"), + domain("mathoverflow.net"), + domain("askubuntu.com"), + domain("stackapps.com") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + code.hljs { + background: none !important; + } + + body:not(.theme-highcontrast, .theme-dark).unified-theme { + &, + .themed { + #catppuccin(@lightFlavor, @accentColor); + } + } + body:not(.theme-highcontrast).unified-theme.theme-dark { + &, + .themed { + #catppuccin(@darkFlavor, @accentColor); + } + } + + @media (prefers-color-scheme: light) { + body:not(.theme-highcontrast).unified-theme.theme-system { + #catppuccin(@lightFlavor, @accentColor); + } + } + @media (prefers-color-scheme: dark) { + body:not(.theme-highcontrast).unified-theme.theme-system { + #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]; + + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + &, + * { + --theme-background-color: @mantle; + --theme-content-background-color: @base; + --theme-content-border-color: @surface0; + --theme-topbar-background-color: @mantle; + --theme-topbar-search-background: @mantle; + --theme-topbar-search-border: @surface2; + --theme-topbar-search-placeholder: @subtext0; + --theme-topbar-item-color: @text; + --theme-topbar-item-color-hover: @text; + --theme-topbar-item-background-hover: @surface0; + --theme-button-primary-background-color: @accent-color; + --theme-button-primary-hover-background-color: darken(@accent-color, 5%); + --theme-button-primary-active-background-color: @text; + --theme-link-color: @accent-color; + --theme-link-color-hover: darken(@accent-color, 5%); + --theme-footer-title-color: @text; + --theme-footer-text-color: @subtext0; + --theme-footer-link-color: @subtext0; + --theme-footer-link-color-hover: @subtext1; + --theme-footer-background-color: @mantle; + --theme-header-background-color: transparent; + --theme-tag-background-color: @accent-color; + --theme-tag-border-color: @accent-color; + --theme-tag-color: @mantle; + --theme-tag-hover-background-color: darken(@accent-color, 5%); + --theme-tag-hover-border-color: darken(@accent-color, 5%); + --theme-tag-hover-color: @mantle; + --theme-post-title-color: @accent-color; + --theme-post-title-color-hover: darken(@accent-color, 5%); + + --highlight-bg: @mantle; + + --theme-primary: @accent-color; + --theme-primary-100: fade(@accent-color, 20%); + --theme-primary-200: fade(@accent-color, 30%); + --theme-primary-500: fade(@accent-color, 90%); + --theme-primary-600: @accent-color; + + --translucent-secondary: fade(@accent-color, 10%); + --theme-secondary-100: fade(@accent-color, 20%); + --theme-secondary-200: fade(@accent-color, 30%); + --theme-secondary-300: fade(@accent-color, 40%); + --theme-secondary-400: fade(@accent-color, 50%); + --theme-secondary-500: fade(@accent-color, 60%); + --theme-secondary-600: fade(@accent-color, 70%); + + --white: @mantle; + --black: @text; + --black-100: @base; + --black-150: @surface0; + --black-200: @surface1; + --black-225: @surface1; + --black-250: @surface2; + --black-300: @overlay0; + --black-350: @overlay2; + --black-400: @subtext0; + --black-500: @subtext1; + --black-600: @text; + + --purple-100: fade(@mauve, 30%); + --purple-200: fade(@mauve, 40%); + --purple-400: fade(@mauve, 60%); + + --green-100: @green; + --green-400: @green; + --green-500: @green; + + --blue-200: fade(@blue, 30%); + --blue-300: fade(@blue, 40%); + --blue-400: @sky; + --blue-500: @blue; + + --orange-400: fade(@peach, 80%); + --orange-500: fade(@peach, 90%); + --orange-600: @peach; + + --bronze-100: fade(@rosewater, 20%); + --bronze-200: fade(@rosewater, 30%); + --bronze-300: fade(@rosewater, 40%); + --bronze-400: fade(@rosewater, 50%); + + --yellow-100: fade(@yellow, 20%); + --yellow-200: fade(@yellow, 30%); + --yellow-400: fade(@yellow, 70%); + --yellow-500: fade(@yellow, 90%); + + --red-200: fade(@red, 40%); + --red-400: fade(@red, 70%); + --red-500: fade(@red, 80%); + + --scrollbar: @surface1; + } + + .wmd-button > span { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .s-topbar .s-topbar--logo .-img, + .envelope-on, + .envelope-off, + .vote-up-off, + .vote-up-on, + .vote-down-off, + .vote-down-on, + .feed-icon, + .vote-accepted-off, + .vote-accepted-on, + .vote-accepted-bounty, + .badge-earned-check, + .delete-tag, + .grippie, + .expander-arrow-hide, + .expander-arrow-show, + .expander-arrow-small-hide, + .expander-arrow-small-show, + .anonymous-gravatar, + .badge1, + .badge2, + .badge3 { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .s-avatar { + &.subcommunity-topic-mobile-dev { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + &.subcommunity-topic-r-language { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } + + [fill="#BCBBBB"] { + fill: @overlay2 !important; + } + [fill="#F48024"] { + fill: @peach !important; + } + + .s-topbar .s-topbar--logo .-img { + filter: none; + } + + .s-sidebarwidget { + background-color: @base; + border-color: @surface0; + + .s-sidebarwidget--header { + background-color: @surface0; + border-color: @surface1; + } + &::after, + .s-sidebarwidget--content, + .s-sidebarwidget--header { + border-color: @surface1; + } + } + + .s-prose kbd { + border-top-color: transparent; + box-shadow: 0 1px 1px @crust, inset 0 1px 0 0 @overlay2; + } + + .s-pagination .s-pagination--item { + border-color: @surface2; + } + + .s-badge { + color: @crust; + background-color: @mauve; + } + + .s-notice { + &, + .s-notice--btn { + color: @text !important; + } + } + + .badge, + .badge-tag { + background-color: @surface0; + color: @text; + } + + #onetrust-consent-sdk { + #onetrust-banner-sdk { + background-color: @mantle; + + &:focus { + outline-color: @surface1; + } + + #onetrust-accept-btn-handler, + #onetrust-reject-all-handler { + background-color: @accent-color; + color: @crust; + } + + #onetrust-button-group button#onetrust-pc-btn-handler { + background-color: @crust !important; + border-color: @accent-color !important; + color: @accent-color !important; + } + + #onetrust-policy-title, + #onetrust-policy-text, + .ot-b-addl-desc, + .ot-dpd-desc, + .ot-dpd-title, + #onetrust-policy-text :not(.onetrust-vendors-list-handler), + .ot-dpd-desc :not(.onetrust-vendors-list-handler), + #banner-options *, + .ot-cat-header, + .ot-optout-signal, + a { + color: @text !important; + } + } + + /* Manage cookies popup */ + #onetrust-pc-sdk { + background-color: @base; + + h3, + h4, + h5, + h6, + p, + #ot-ven-lst .ot-ven-opts p, + #ot-pc-desc, + #ot-pc-title, + .ot-li-title, + .ot-sel-all-hdr span, + #ot-host-lst .ot-host-info, + #ot-fltr-modal #modal-header, + .ot-checkbox label span, + #ot-pc-lst #ot-sel-blk p, + #ot-pc-lst #ot-lst-title h3, + #ot-pc-lst .back-btn-handler p, + #ot-pc-lst .ot-ven-name, + #ot-pc-lst #ot-ven-lst .consent-category, + .ot-leg-btn-container .ot-inactive-leg-btn, + .ot-label-status, + .ot-chkbox label span, + #clear-filters-handler, + .ot-optout-signal { + color: @text; + } + + .ot-pc-header { + background-color: @mantle !important; + border-bottom-color: @surface1; + } + + .ot-accordion-layout.ot-cat-item { + border-color: @surface1; + } + + .ot-pc-footer { + border-top-color: @surface2 !important; + } + + button:not( + #clear-filters-handler, + .ot-close-icon, + #filter-btn-handler, + .ot-remove-objection-handler, + .ot-obj-leg-btn-handler, + [aria-expanded], + .ot-link-btn + ), + .ot-leg-btn-container .ot-active-leg-btn { + background-color: @accent-color !important; + border-color: @accent-color; + color: @mantle; + } + } + } + + .sunset-background { + background-color: @base !important; + color: @text !important; + } + + .disabled-link { + color: @overlay2; + } + + /* Stack Exchange logo */ + [fill="#FEFEFE"] { + fill: @text !important; + } + [fill="#2F96E8"], + [fill="#2D6DB5"] { + fill: @blue !important; + } + [fill="#8FD8F7"] { + fill: lighten(@sky, 10%); + } + [fill="#46A2D9"] { + fill: lighten(@blue, 5%); + } + [fill="#155397"] { + fill: darken(@blue, 10%) !important; + } + + /* Other Stack Exchange site logos */ + [alt="Server Fault"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + [alt="Super User"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + [alt="MathOverflow"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + [alt="Ask Ubuntu"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + [alt="Stack Apps"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + [alt="Unix & Linux"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + &:has([alt="Unix & Linux"]) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + [alt="Cryptography"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + &:has([alt="Cryptography"]) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + + .site-header { + background-image: none; + } + } + } +} + +#rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/startpage/catppuccin.user.css b/styles/startpage/catppuccin.user.css index 4fb95b47b4..0f31a5d0a1 100644 --- a/styles/startpage/catppuccin.user.css +++ b/styles/startpage/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Startpage Catppuccin +@name Startpage Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/startpage @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/startpage -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/startpage/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/startpage/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Astartpage @description Soothing pastel theme for Startpage @author Catppuccin @@ -13,177 +13,4 @@ @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("startpage.com") { - @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 { - --sx-accent: @accent-color; - --sx-background: @base; - --sx-border: @surface0; - --sx-tabLinkHover: @teal; - --sx-foreground: @text; - --sx-foregroundAlt: @subtext1; - --sx-foregroundEmphasis: lighten(@text, 10%); - --sx-popupBackground: @surface0; - --sx-popupForeground: @text; - --sx-popupForegroundEm: @text; - --sx-popupUrl: @blue; - --sx-buttonHighlight: @accent-color; - --sx-loadingBars: @mantle; - --sx-darkIcons: @crust; - --sx-arrowButtonBackground: @text; - --sx-arrowButtonForeground: @text; - } - - .css-nguon6 button { - color: @accent-color; - border-color: @accent-color; - } - - .css-fg9wif, - .header, - .wp-qi-sb__result, - .linkHover, - .footer__container { - background: @mantle !important; - } - - body { - color: @text; - } - - body, - .layout-web, - .layout-web__body, - .ex-qi-kp:not(.ex-qi-kp--light, .ex-qi-kp--night, .ex-qi-kp--air) - .sx-kp-infobox-wrap - .sx-infobox - tr:not(.sx-heading-row) - > *, - .w-gl { - background: @base !important; - } - - .wp-qi-sb__result { - border-color: @mantle !important; - } - - .wp-qi-sb__top-square-img { - border-bottom-color: @mantle !important; - } - - /* fonts */ - .w-gl__result-title, - .inline-nav-menu__link, - .wp-qi-sb__title { - color: @text !important; - } - - .w-gl__result, - .search-filter-time__dropdown, - .search-filter-region__dropdown, - .search-filter-family__field-label, - .wp-qi-sb__extract { - color: @subtext1 !important; - } - - .w-gl__result-url { - color: @accent-color !important; - } - - .wp-qi-sb__expand-text, - .inline-nav-menu__link__active, - .inline-nav-menu__link:hover { - color: @green !important; - } - - .inline-nav-menu__link__active, - .inline-nav-menu__link__post-link:hover { - border-bottom-color: @green !important; - } - - .pagination .num--active { - background: @flamingo !important; - border-color: @flamingo !important; - } - - .pagination__num:hover, - .pagination__next-prev-button:hover { - background: @blue !important; - border-color: @blue !important; - } - - header { - background-color: @mantle !important; - } - - .w-gl__result-title:visited { - color: @lavender !important; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/startpage/catppuccin.user.less b/styles/startpage/catppuccin.user.less new file mode 100644 index 0000000000..33c7867183 --- /dev/null +++ b/styles/startpage/catppuccin.user.less @@ -0,0 +1,187 @@ +/* ==UserStyle== +@name Startpage Catppuccin +@namespace github.com/catppuccin/userstyles/styles/startpage +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/startpage +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/startpage/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Astartpage +@description Soothing pastel theme for Startpage +@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("startpage.com") { + @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 { + --sx-accent: @accent-color; + --sx-background: @base; + --sx-border: @surface0; + --sx-tabLinkHover: @teal; + --sx-foreground: @text; + --sx-foregroundAlt: @subtext1; + --sx-foregroundEmphasis: lighten(@text, 10%); + --sx-popupBackground: @surface0; + --sx-popupForeground: @text; + --sx-popupForegroundEm: @text; + --sx-popupUrl: @blue; + --sx-buttonHighlight: @accent-color; + --sx-loadingBars: @mantle; + --sx-darkIcons: @crust; + --sx-arrowButtonBackground: @text; + --sx-arrowButtonForeground: @text; + } + + .css-nguon6 button { + color: @accent-color; + border-color: @accent-color; + } + + .css-fg9wif, + .header, + .wp-qi-sb__result, + .linkHover, + .footer__container { + background: @mantle !important; + } + + body { + color: @text; + } + + body, + .layout-web, + .layout-web__body, + .ex-qi-kp:not(.ex-qi-kp--light, .ex-qi-kp--night, .ex-qi-kp--air) + .sx-kp-infobox-wrap + .sx-infobox + tr:not(.sx-heading-row) + > *, + .w-gl { + background: @base !important; + } + + .wp-qi-sb__result { + border-color: @mantle !important; + } + + .wp-qi-sb__top-square-img { + border-bottom-color: @mantle !important; + } + + /* fonts */ + .w-gl__result-title, + .inline-nav-menu__link, + .wp-qi-sb__title { + color: @text !important; + } + + .w-gl__result, + .search-filter-time__dropdown, + .search-filter-region__dropdown, + .search-filter-family__field-label, + .wp-qi-sb__extract { + color: @subtext1 !important; + } + + .w-gl__result-url { + color: @accent-color !important; + } + + .wp-qi-sb__expand-text, + .inline-nav-menu__link__active, + .inline-nav-menu__link:hover { + color: @green !important; + } + + .inline-nav-menu__link__active, + .inline-nav-menu__link__post-link:hover { + border-bottom-color: @green !important; + } + + .pagination .num--active { + background: @flamingo !important; + border-color: @flamingo !important; + } + + .pagination__num:hover, + .pagination__next-prev-button:hover { + background: @blue !important; + border-color: @blue !important; + } + + header { + background-color: @mantle !important; + } + + .w-gl__result-title:visited { + color: @lavender !important; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/status.cafe/catppuccin.user.css b/styles/status.cafe/catppuccin.user.css index a9ba37a74c..e0fc9874b8 100644 --- a/styles/status.cafe/catppuccin.user.css +++ b/styles/status.cafe/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name status.cafe Catppuccin +@name status.cafe Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/status.cafe @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/status.cafe -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/status.cafe/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/status.cafe/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Astatus.cafe @description Soothing pastel theme for status.cafe @author Catppuccin @@ -13,164 +13,4 @@ @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 regexp("https://status\\.cafe/(?!users).*"), domain("forum.status.cafe") -{ - @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; - } - } - - background-color: @base; - - body { - background-color: @base; - color: @text; - } - - textarea { - background-color: @mantle; - color: @text; - border-color: @surface1; - border-style: solid; - border-width: 1px; - border-radius: 2px; - padding: 3px; - } - - input { - background-color: @mantle; - color: @text; - border-color: @surface1; - border-style: solid; - border-width: 1px; - border-radius: 4px; - padding: 2px 5px; - :hover { - background-color: darken(@mantle, 2%); - } - - :active { - background-color: @crust; - border-color: @surface0; - } - } - - textarea:hover, - input:hover { - border-color: darken(@surface1, 5%); - } - - .flash { - background-color: @green; - } - - a:not(.flash a) { - color: @accent-color; - } - - a:visited:not(.flash a) { - color: darken(@accent-color, 5%); - } - - table, - th, - td { - border-color: @surface1 !important; - } - - thead { - background-color: @surface1; - color: @text; - } - - .forum { - background-color: @yellow; - a { - color: darken(@blue, 10%) !important; - } - } - - tbody, - .topic > tbody > tr:nth-child(2n) { - background-color: @mantle; - } - - hr { - background-color: @surface1; - } - - .signature { - border-top-color: @surface0; - } - - & when (@lookup = latte) { - a:visited:not(.flash a) { - color: darken(@accent-color, 10%); - } - input:active { - background-color: @surface0; - border-color: @surface2; - } - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/status.cafe/catppuccin.user.less b/styles/status.cafe/catppuccin.user.less new file mode 100644 index 0000000000..bf6b7cfdc4 --- /dev/null +++ b/styles/status.cafe/catppuccin.user.less @@ -0,0 +1,174 @@ +/* ==UserStyle== +@name status.cafe Catppuccin +@namespace github.com/catppuccin/userstyles/styles/status.cafe +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/status.cafe +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/status.cafe/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Astatus.cafe +@description Soothing pastel theme for status.cafe +@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 regexp("https://status\\.cafe/(?!users).*"), + domain("forum.status.cafe") { + @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; + } + } + + background-color: @base; + + body { + background-color: @base; + color: @text; + } + + textarea { + background-color: @mantle; + color: @text; + border-color: @surface1; + border-style: solid; + border-width: 1px; + border-radius: 2px; + padding: 3px; + } + + input { + background-color: @mantle; + color: @text; + border-color: @surface1; + border-style: solid; + border-width: 1px; + border-radius: 4px; + padding: 2px 5px; + :hover { + background-color: darken(@mantle, 2%); + } + + :active { + background-color: @crust; + border-color: @surface0; + } + } + + textarea:hover, + input:hover { + border-color: darken(@surface1, 5%); + } + + .flash { + background-color: @green; + } + + a:not(.flash a) { + color: @accent-color; + } + + a:visited:not(.flash a) { + color: darken(@accent-color, 5%); + } + + table, + th, + td { + border-color: @surface1 !important; + } + + thead { + background-color: @surface1; + color: @text; + } + + .forum { + background-color: @yellow; + a { + color: darken(@blue, 10%) !important; + } + } + + tbody, + .topic > tbody > tr:nth-child(2n) { + background-color: @mantle; + } + + hr { + background-color: @surface1; + } + + .signature { + border-top-color: @surface0; + } + + & when (@lookup = latte) { + a:visited:not(.flash a) { + color: darken(@accent-color, 10%); + } + input:active { + background-color: @surface0; + border-color: @surface2; + } + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/stylus/catppuccin.user.css b/styles/stylus/catppuccin.user.css index 7f8b036db2..d034cbe5a6 100644 --- a/styles/stylus/catppuccin.user.css +++ b/styles/stylus/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Stylus Catppuccin +@name Stylus Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/stylus @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/stylus -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/stylus/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/stylus/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Astylus @description Soothing pastel theme for Stylus @author Catppuccin @@ -13,306 +13,4 @@ @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 url-prefix("moz-extension://"), url-prefix(chrome-extension://) -{ - :root { - &[data-ui-theme="light"] { - #catppuccin(@lightFlavor, @accentColor); - } - &[data-ui-theme="dark"] { - #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; - } - } - - --bg: @base; - --fg: @text; - --c30: @subtext1; - --c40: @overlay0; - --c45: @surface2; - --c50: @subtext0; - --c60: @subtext0; - --c65: @surface2; - --c75: @overlay1; - --c80: @surface1; - --c85: @surface0; - --c90: @base; - --c95: @mantle; - --c97: @mantle; - --c98: @base; - --c99: @base; - --c100: @base; - --red1: @red; - --accent-1: @accent-color; - --accent-2: @accent-color; - --accent-3: fade(@accent-color, 25%); - - .slider { - --color-on: fade(@accent-color, 25%); - --color-off: @surface2; - } - - :focus { - --focus-color1: @accent-color !important; - --focus-color2: fade(@accent-color, 25%) !important; - } - - .active #filters-stats, - .dirty #save-button, - .dirty #save-button + button { - background-color: @accent-color; - border-color: @accent-color; - color: @base; - } - #header-resizer { - color: @surface1; - } - #message-box-title::before { - @fade_color: fade(@accent-color, 67%); - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - [src="moz-extension://8fc71d5e-96b2-44a4-8d6f-ead6ff4d3c56/images/icon/16.png"], img[src="/images/icon/128.png"] - { - @fade_color: fade(@accent-color, 67%); - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - #message-box.danger { - #message-box-title { - background-color: @red; - color: @base; - - &::before { - @fade_color: fade(@red, 67%); - @svg: escape( - '' - ); - background: url("data:image/svg+xml,@{svg}") !important; - } - } - - #message-box-close-icon i { - color: var(--c40); - &:hover { - color: var(--bg); - } - } - } - - #filters label:hover, - #filters .filter-selection:hover { - background-color: @surface0; - } - .oldUI .disabled h2::after, - .entry.usercss .style-name-link::after { - background-color: fade(@accent-color, 25%); - } - - /* Syntax highlighting */ - .CodeMirror-activeline-background { - background: @mantle; - } - .CodeMirror-linenumber { - color: @subtext0; - } - div.CodeMirror span.CodeMirror-matchingbracket { - color: @green; - } - .cm-s-default { - .cm-string { - color: @green; - } - .cm-qualifier { - color: @yellow; - } - .cm-variable-2 { - color: @mauve; - } - .cm-keyword { - color: @mauve; - } - .cm-atom { - color: @red; - } - .cm-number { - color: @peach; - } - .cm-def { - color: @mauve; - } - .cm-tag { - color: @blue; - } - .cm-builtin { - color: @red; - } - .cm-variable-3 { - color: @teal; - } - .cm-comment { - color: @overlay2; - } - .cm-operator { - color: @yellow; - } - .cm-variable { - color: @blue; - } - .cm-property { - color: @blue; - } - } - button:disabled, - select:disabled, - option:disabled, - select[disabled] > option { - color: @subtext0; - } - .applies-to input, - .applies-to select { - background: @base; - border-color: @surface0; - color: @subtext0; - } - button { - color: @text !important; - background: @mantle !important; - border-color: @surface0; - &:hover { - border-color: @text; - } - } - #save-button[disabled] { - background: @surface0 !important; - } - #message-box-title { - color: @text; - } - .svg-icon { - fill: @overlay0; - - &:hover { - fill: @overlay1; - } - } - .onoffswitch input:checked + span { - background-color: fade(@accent-color, 25%); - - &::before { - background-color: @accent-color; - } - } - #options-title { - color: @base; - } - h2 { - color: @accent-color !important; - } - .installed .configure-usercss { - i { - color: @accent-color; - } - - svg, - &:hover svg { - fill: @accent-color !important; - } - } - #live-reload-install-hint { - color: @teal; - } - #menu.delete { - header { - background: fade(@red, 25%); - } - - > div, - [data-cmd="delete"] { - border-color: @red; - } - } - .entry.odd { - background-color: fade(@surface0, 25%); - } - .updater-icons > :not(.check-update)::after { - border-color: @yellow; - background: @base; - } - .split-btn-menu { - border-color: @accent-color; - - > :hover { - background: fade(@accent-color, 25%); - } - } - #help-popup .title { - background: @mantle; - } - #toc li:hover { - background: fade(@accent-color, 20%); - } - input:invalid { - background: fade(@red, 10%); - color: @red; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/stylus/catppuccin.user.less b/styles/stylus/catppuccin.user.less new file mode 100644 index 0000000000..2b3e7a6cfb --- /dev/null +++ b/styles/stylus/catppuccin.user.less @@ -0,0 +1,316 @@ +/* ==UserStyle== +@name Stylus Catppuccin +@namespace github.com/catppuccin/userstyles/styles/stylus +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/stylus +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/stylus/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Astylus +@description Soothing pastel theme for Stylus +@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 url-prefix("moz-extension://"), + url-prefix("chrome-extension://") { + :root { + &[data-ui-theme="light"] { + #catppuccin(@lightFlavor, @accentColor); + } + &[data-ui-theme="dark"] { + #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; + } + } + + --bg: @base; + --fg: @text; + --c30: @subtext1; + --c40: @overlay0; + --c45: @surface2; + --c50: @subtext0; + --c60: @subtext0; + --c65: @surface2; + --c75: @overlay1; + --c80: @surface1; + --c85: @surface0; + --c90: @base; + --c95: @mantle; + --c97: @mantle; + --c98: @base; + --c99: @base; + --c100: @base; + --red1: @red; + --accent-1: @accent-color; + --accent-2: @accent-color; + --accent-3: fade(@accent-color, 25%); + + .slider { + --color-on: fade(@accent-color, 25%); + --color-off: @surface2; + } + + :focus { + --focus-color1: @accent-color !important; + --focus-color2: fade(@accent-color, 25%) !important; + } + + .active #filters-stats, + .dirty #save-button, + .dirty #save-button + button { + background-color: @accent-color; + border-color: @accent-color; + color: @base; + } + #header-resizer { + color: @surface1; + } + #message-box-title::before { + @fade_color: fade(@accent-color, 67%); + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + [src="moz-extension://8fc71d5e-96b2-44a4-8d6f-ead6ff4d3c56/images/icon/16.png"], + img[src="/images/icon/128.png"] { + @fade_color: fade(@accent-color, 67%); + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + #message-box.danger { + #message-box-title { + background-color: @red; + color: @base; + + &::before { + @fade_color: fade(@red, 67%); + @svg: escape( + '' + ); + background: url("data:image/svg+xml,@{svg}") !important; + } + } + + #message-box-close-icon i { + color: var(--c40); + &:hover { + color: var(--bg); + } + } + } + + #filters label:hover, + #filters .filter-selection:hover { + background-color: @surface0; + } + .oldUI .disabled h2::after, + .entry.usercss .style-name-link::after { + background-color: fade(@accent-color, 25%); + } + + /* Syntax highlighting */ + .CodeMirror-activeline-background { + background: @mantle; + } + .CodeMirror-linenumber { + color: @subtext0; + } + div.CodeMirror span.CodeMirror-matchingbracket { + color: @green; + } + .cm-s-default { + .cm-string { + color: @green; + } + .cm-qualifier { + color: @yellow; + } + .cm-variable-2 { + color: @mauve; + } + .cm-keyword { + color: @mauve; + } + .cm-atom { + color: @red; + } + .cm-number { + color: @peach; + } + .cm-def { + color: @mauve; + } + .cm-tag { + color: @blue; + } + .cm-builtin { + color: @red; + } + .cm-variable-3 { + color: @teal; + } + .cm-comment { + color: @overlay2; + } + .cm-operator { + color: @yellow; + } + .cm-variable { + color: @blue; + } + .cm-property { + color: @blue; + } + } + button:disabled, + select:disabled, + option:disabled, + select[disabled] > option { + color: @subtext0; + } + .applies-to input, + .applies-to select { + background: @base; + border-color: @surface0; + color: @subtext0; + } + button { + color: @text !important; + background: @mantle !important; + border-color: @surface0; + &:hover { + border-color: @text; + } + } + #save-button[disabled] { + background: @surface0 !important; + } + #message-box-title { + color: @text; + } + .svg-icon { + fill: @overlay0; + + &:hover { + fill: @overlay1; + } + } + .onoffswitch input:checked + span { + background-color: fade(@accent-color, 25%); + + &::before { + background-color: @accent-color; + } + } + #options-title { + color: @base; + } + h2 { + color: @accent-color !important; + } + .installed .configure-usercss { + i { + color: @accent-color; + } + + svg, + &:hover svg { + fill: @accent-color !important; + } + } + #live-reload-install-hint { + color: @teal; + } + #menu.delete { + header { + background: fade(@red, 25%); + } + + > div, + [data-cmd="delete"] { + border-color: @red; + } + } + .entry.odd { + background-color: fade(@surface0, 25%); + } + .updater-icons > :not(.check-update)::after { + border-color: @yellow; + background: @base; + } + .split-btn-menu { + border-color: @accent-color; + + > :hover { + background: fade(@accent-color, 25%); + } + } + #help-popup .title { + background: @mantle; + } + #toc li:hover { + background: fade(@accent-color, 20%); + } + input:invalid { + background: fade(@red, 10%); + color: @red; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/substack/catppuccin.user.css b/styles/substack/catppuccin.user.css index 583601ebe0..7af085333c 100644 --- a/styles/substack/catppuccin.user.css +++ b/styles/substack/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Substack Catppuccin +@name Substack Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/substack @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/substack -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/substack/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/substack/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Asubstack @description Soothing pastel theme for Substack @author Catppuccin @@ -13,297 +13,4 @@ @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("substack.com") { - @media (prefers-color-scheme: dark) { - :root { - #catppuccin(@darkFlavor, @accentColor); - } - } - @media (prefers-color-scheme: light) { - :root { - #catppuccin(@lightFlavor, @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; - } - } - - color: @text; - background-color: @base !important; - - &, - .dark-mode, - .dark-theme, - [class*="_pubTheme_"] { - --color-bg-primary: @base; - --color-bg-primary-rgb: #rgbify(@base) []; - --color-bg-primary-raw: #rgbify(@base) []; - --color-bg-primary-hover: @surface0; - --color-bg-secondary: @surface0; - --color-bg-tertiary: @surface1; - --color-bg-elevated-primary: @mantle; - --color-bg-elevated-secondary: @crust; - --color-fg-primary: @text; - --color-fg-secondary: @subtext1; - --color-fg-tertiary: @subtext0; - --color-utility-detail: @surface1; - --color-utility-white: @text; - --color-detail-themed: @surface1; - --color-accent-themed: @accent-color; - - --color-accent-fg-red: @red; - --color-accent-bg-red: fade(@red, 20%); - --color-semantic-error-bg-primary: @red; - --color-semantic-error-utility-contrast: @crust; - - --color-accent-fg-orange: @accent-color; - --color-accent-bg-orange: fade(@accent-color, 20%); - - --color-accent-fg-green: @green; - --color-accent-bg-green: fade(@green, 20%); - - --color-accent-fg-cyan: @blue; - --color-accent-bg-cyan: fade(@blue, 20%); - - /* Buttons */ - --color-button-primary-bg: @accent-color; - --color-button-primary-bg-hover: darken(@accent-color, 5%); - --color-button-primary-fg: @crust; - - --color-button-secondary-bg: @surface0; - --color-button-secondary-bg-hover: @surface1; - --color-button-secondary-fg: @text; - - --color-button-tertiary-bg-hover: @surface1; - --color-button-tertiary-fg: @text; - - --color-button-mono-bg: @text; - --color-button-mono-bg-hover: @subtext1; - --color-button-mono-fg: @crust; - - --color-button-disabled-fg: @subtext0; - - /* Tooltips & Toasts */ - --color-bg-tooltip: @mantle; - --material-thick: @mantle; - - --print_pop: @accent-color; - --print_secondary: @subtext1; - --background_pop: @accent-color; - --print_on_pop: @crust; - --color_theme_bg_pop: @accent-color; - --color_theme_bg_pop_darken: darken(@accent-color, 5%); - --color_theme_print_on_pop: @crust; - --border_subtle: @surface1; - --background_contrast_1: @mantle; - --background_contrast_2: @surface2; - - --color-chat-other-fg-secondary: @subtext1; - - --color-semantic-select-fg-primary: @accent-color; - --color-semantic-select-utility-detail: fade(@accent-color, 20%); - --color-semantic-highlight-fg-primary: @accent-color; - - /* Weird variables issue fixes */ - --color-light-bg-primary: @mantle; /* Was text, changing to mantle for (select text) -> Share -> Download button color. Might break things */ - --color-light-bg-secondary: @surface0; /* substack.com homepage sections */ - --color-dark-bg-primary: @mantle; - --color-dark-bg-secondary: @base; - --color-dark-bg-tertiary: @surface0; - - /* Publications with different variables */ - --color-primary-themed: @text; - --color-secondary-themed: @subtext1; - - --color-bg-secondary-themed: @surface0; - - --web_bg_color: @mantle; - --print_on_web_bg_color: @text; - - /* Share button */ - --material-dark-regular: @mantle; - /* Copy (heading link) to clipboard notification */ - --material-dark-thick: @crust; - /* Button hover, faded to 0.1 */ - --color-primitive-white-rgb: #rgbify(@text) []; - - /* Various full screen modals for singing up, subscribing etc */ - --cover_print_primary: @text; - --cover_print_secondary: @subtext1; - --cover_print_tertiary: @subtext0; - --cover_bg_color: @base; - --cover_input_background: @mantle; - } - - /* Substack logos */ - [fill="#ff6719" i] { - fill: @accent-color !important; - } - /* Inverted logo colors */ - [fill="#FFFFFF" i] { - fill: @crust !important; - } - - /* Footer */ - .footer-wrap { - &, - .footer { - background-color: @mantle; - } - - .home-footer { - &, - a, - .footer-info .footer-info-col h3 { - color: @text; - } - } - } - .subscribe-footer .button.primary { - border-color: @crust; - } - - /* Signup, onboarding, and profile */ - - .homepage-nav .homepage-nav-bar .homepage-nav-wrap.grey { - background-color: @base; - } - .signup-page { - background-color: @base; - - .signup-box-wrap .error { - color: @red; - } - } - - .onboarding-profile-page { - .accept-tos * { - color: @subtext1; - } - - .skip-button { - color: @text; - } - } - - .profile-page .set-up-profile-button { - color: @crust; - } - .edit-profile-page .publication-section .all-toggle { - color: @subtext1; - } - - /* Misc inputs */ - button[role="switch"], - input[type="radio"] + span { - --color-utility-white: @surface0; - } - - input[type="text"], - input[type="date"], - select { - background-color: @mantle; - color: @text; - } - - .themed-select > div { - background-color: @mantle; - border-color: @surface0; - - * { - color: @text; - } - } - - [aria-label="File Picker"] { - background-color: @base; - } - - /* Dashboard */ - - /* Icons */ - [stroke="#888888"], - [stroke="#555555"] { - stroke: @subtext1 !important; - } - - /* Import posts */ - .signup-page > .container .signup-box { - background-color: @base; - } - - /* Stats */ - .subscriber-stats-page { - .heading .options .header-option .header-button { - background-color: @surface0; - } - - table { - td, - th { - background-color: @base; - } - } - } - - /* Editor */ - .tw-bg-pub-accent { - background-color: @accent-color !important; - } - } -} - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/substack/catppuccin.user.less b/styles/substack/catppuccin.user.less new file mode 100644 index 0000000000..b6bfb142d0 --- /dev/null +++ b/styles/substack/catppuccin.user.less @@ -0,0 +1,307 @@ +/* ==UserStyle== +@name Substack Catppuccin +@namespace github.com/catppuccin/userstyles/styles/substack +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/substack +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/substack/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Asubstack +@description Soothing pastel theme for Substack +@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("substack.com") { + @media (prefers-color-scheme: dark) { + :root { + #catppuccin(@darkFlavor, @accentColor); + } + } + @media (prefers-color-scheme: light) { + :root { + #catppuccin(@lightFlavor, @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; + } + } + + color: @text; + background-color: @base !important; + + &, + .dark-mode, + .dark-theme, + [class*="_pubTheme_"] { + --color-bg-primary: @base; + --color-bg-primary-rgb: #rgbify(@base)[]; + --color-bg-primary-raw: #rgbify(@base)[]; + --color-bg-primary-hover: @surface0; + --color-bg-secondary: @surface0; + --color-bg-tertiary: @surface1; + --color-bg-elevated-primary: @mantle; + --color-bg-elevated-secondary: @crust; + --color-fg-primary: @text; + --color-fg-secondary: @subtext1; + --color-fg-tertiary: @subtext0; + --color-utility-detail: @surface1; + --color-utility-white: @text; + --color-detail-themed: @surface1; + --color-accent-themed: @accent-color; + + --color-accent-fg-red: @red; + --color-accent-bg-red: fade(@red, 20%); + --color-semantic-error-bg-primary: @red; + --color-semantic-error-utility-contrast: @crust; + + --color-accent-fg-orange: @accent-color; + --color-accent-bg-orange: fade(@accent-color, 20%); + + --color-accent-fg-green: @green; + --color-accent-bg-green: fade(@green, 20%); + + --color-accent-fg-cyan: @blue; + --color-accent-bg-cyan: fade(@blue, 20%); + + /* Buttons */ + --color-button-primary-bg: @accent-color; + --color-button-primary-bg-hover: darken(@accent-color, 5%); + --color-button-primary-fg: @crust; + + --color-button-secondary-bg: @surface0; + --color-button-secondary-bg-hover: @surface1; + --color-button-secondary-fg: @text; + + --color-button-tertiary-bg-hover: @surface1; + --color-button-tertiary-fg: @text; + + --color-button-mono-bg: @text; + --color-button-mono-bg-hover: @subtext1; + --color-button-mono-fg: @crust; + + --color-button-disabled-fg: @subtext0; + + /* Tooltips & Toasts */ + --color-bg-tooltip: @mantle; + --material-thick: @mantle; + + --print_pop: @accent-color; + --print_secondary: @subtext1; + --background_pop: @accent-color; + --print_on_pop: @crust; + --color_theme_bg_pop: @accent-color; + --color_theme_bg_pop_darken: darken(@accent-color, 5%); + --color_theme_print_on_pop: @crust; + --border_subtle: @surface1; + --background_contrast_1: @mantle; + --background_contrast_2: @surface2; + + --color-chat-other-fg-secondary: @subtext1; + + --color-semantic-select-fg-primary: @accent-color; + --color-semantic-select-utility-detail: fade(@accent-color, 20%); + --color-semantic-highlight-fg-primary: @accent-color; + + /* Weird variables issue fixes */ + --color-light-bg-primary: @mantle; /* Was text, changing to mantle for (select text) -> Share -> Download button color. Might break things */ + --color-light-bg-secondary: @surface0; /* substack.com homepage sections */ + --color-dark-bg-primary: @mantle; + --color-dark-bg-secondary: @base; + --color-dark-bg-tertiary: @surface0; + + /* Publications with different variables */ + --color-primary-themed: @text; + --color-secondary-themed: @subtext1; + + --color-bg-secondary-themed: @surface0; + + --web_bg_color: @mantle; + --print_on_web_bg_color: @text; + + /* Share button */ + --material-dark-regular: @mantle; + /* Copy (heading link) to clipboard notification */ + --material-dark-thick: @crust; + /* Button hover, faded to 0.1 */ + --color-primitive-white-rgb: #rgbify(@text)[]; + + /* Various full screen modals for singing up, subscribing etc */ + --cover_print_primary: @text; + --cover_print_secondary: @subtext1; + --cover_print_tertiary: @subtext0; + --cover_bg_color: @base; + --cover_input_background: @mantle; + } + + /* Substack logos */ + [fill="#ff6719" i] { + fill: @accent-color !important; + } + /* Inverted logo colors */ + [fill="#FFFFFF" i] { + fill: @crust !important; + } + + /* Footer */ + .footer-wrap { + &, + .footer { + background-color: @mantle; + } + + .home-footer { + &, + a, + .footer-info .footer-info-col h3 { + color: @text; + } + } + } + .subscribe-footer .button.primary { + border-color: @crust; + } + + /* Signup, onboarding, and profile */ + + .homepage-nav .homepage-nav-bar .homepage-nav-wrap.grey { + background-color: @base; + } + .signup-page { + background-color: @base; + + .signup-box-wrap .error { + color: @red; + } + } + + .onboarding-profile-page { + .accept-tos * { + color: @subtext1; + } + + .skip-button { + color: @text; + } + } + + .profile-page .set-up-profile-button { + color: @crust; + } + .edit-profile-page .publication-section .all-toggle { + color: @subtext1; + } + + /* Misc inputs */ + button[role="switch"], + input[type="radio"] + span { + --color-utility-white: @surface0; + } + + input[type="text"], + input[type="date"], + select { + background-color: @mantle; + color: @text; + } + + .themed-select > div { + background-color: @mantle; + border-color: @surface0; + + * { + color: @text; + } + } + + [aria-label="File Picker"] { + background-color: @base; + } + + /* Dashboard */ + + /* Icons */ + [stroke="#888888"], + [stroke="#555555"] { + stroke: @subtext1 !important; + } + + /* Import posts */ + .signup-page > .container .signup-box { + background-color: @base; + } + + /* Stats */ + .subscriber-stats-page { + .heading .options .header-option .header-button { + background-color: @surface0; + } + + table { + td, + th { + background-color: @base; + } + } + } + + /* Editor */ + .tw-bg-pub-accent { + background-color: @accent-color !important; + } + } +} + +#rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/syncthing/catppuccin.user.css b/styles/syncthing/catppuccin.user.css index 27d7f4c23b..b5c0e253db 100644 --- a/styles/syncthing/catppuccin.user.css +++ b/styles/syncthing/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Syncthing Catppuccin +@name Syncthing Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/syncthing @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/syncthing -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/syncthing/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/syncthing/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Asyncthing @description Soothing pastel theme for Syncthing @author Catppuccin @@ -15,332 +15,4 @@ @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 text urls "URL(s) for Syncthing" "127\.0\.0\.1\:8384,0\.0\.0\.0\:8384,localhost\:8384" -==/UserStyle== */ - -/* - `replace( ," ", "", "g")` is here to remove extra spaces (if any) -*/ - -@-moz-document regexp(replace(replace(%("https?://(%s)/.*", @urls), ",", "|", "g"), " ", "", "g")) -{ - @media (prefers-color-scheme: light) { - :root { - #catppuccin(@lightFlavor, @accentColor); - } - } - - @media (prefers-color-scheme: dark) { - :root { - #catppuccin(@darkFlavor, @accentColor); - } - } - - .light-theme { - #catppuccin(@lightFlavor, @accentColor); - } - - .dark-theme { - #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 { - color: @text !important; - background-color: @base !important; - } - - a { - color: @accent-color; - } - - .nav-tabs > li.active > a:hover, - .nav-tabs > li.active > a { - color: @accent-color !important; - } - - /* navbar */ - .navbar { - background-color: @mantle !important; - border-color: @mantle !important; - } - - .navbar-text, - .dropdown > a, - .dropdown-menu > li > a, - .hidden-xs > a, - .navbar-link { - color: @text !important; - } - - .dropdown-menu { - border-color: @surface1 !important; - background-color: @mantle !important; - } - - .dropdown-menu > li > a:hover, - .dropdown-menu > li > a:focus { - color: @text !important; - background-color: @surface0 !important; - } - - .open > .dropdown-toggle, - .dropdown-toggle:hover { - border-color: @surface1 !important; - background-color: @surface0 !important; - } - - .divider { - background-color: @surface1 !important; - } - - li.hidden-xs:hover, - .navbar-link:hover, - .navbar-link:focus { - border-color: @surface1 !important; - background-color: @surface0 !important; - } - - .dropdown-menu > .active > a { - color: @base !important; - background-color: @accent-color !important; - } - - /* main panel */ - .panel { - background-color: @base !important; - } - - .panel-default { - border-color: @surface0 !important; - } - - .panel-default > .panel-heading { - color: @text !important; - border-color: @surface0 !important; - background-color: @surface0 !important; - } - - .panel-footer { - background-color: @base !important; - } - - .table-striped > tbody > tr { - border-top-color: @surface0 !important; - } - - .table-striped > tbody > tr:nth-of-type(odd) { - background-color: @base !important; - } - - .panel-group .panel-heading + .panel-collapse > .panel-body, - .panel-group .panel-heading + .panel-collapse > .list-group { - border-top-color: @base !important; - } - - .identicon > rect { - fill: @text !important; - } - - /* buttons */ - .btn-default { - color: @text !important; - background-color: transparent !important; - border-color: @surface0 !important; - } - - .btn-default:hover, - .btn-default:focus, - .btn-default.focus { - color: @text !important; - background-color: @surface0 !important; - } - - .btn-primary { - background-color: @accent-color !important; - color: @base; - } - - .btn-primary:hover, - .btn-primary:focus, - .btn-primary.focus { - background-color: fade(@accent-color, 90%) !important; - } - - .btn-warning { - background-color: @yellow !important; - color: @base; - } - - .btn-warning:hover, - .btn-warning:focus, - .btn-warning.focus { - background-color: fade(@yellow, 90%) !important; - } - - .btn-danger { - background-color: @red !important; - color: @base; - } - - .btn-danger:hover, - .btn-danger:focus, - .btn-danger.focus { - background-color: fade(@red, 90%) !important; - } - - /* modal dialogs */ - .modal-header { - border-color: @surface0 !important; - background-color: @mantle; - } - - .modal-content { - border-color: @surface0 !important; - background-color: @mantle !important; - } - - .modal-footer { - border-color: @surface0 !important; - background-color: @mantle !important; - } - - .alert-warning { - background-color: @yellow !important; - color: @base !important; - } - - .alert-danger { - background-color: @red !important; - color: @base !important; - } - - .help-block { - color: @text !important; - } - - .form-control { - color: @text !important; - border-color: @surface0 !important; - background-color: @base !important; - } - - code.ng-binding { - color: @mauve !important; - background-color: @mantle !important; - } - - .well, - .form-control[readonly="readonly"] { - /* read-only fields */ - color: @subtext0 !important; - border-color: @subtext0 !important; - background-color: @mantle !important; - } - - /* buttons for pagination */ - .pagination > li > a, - .pagination > li > span { - background-color: @base !important; - border-color: @surface0 !important; - } - - .pagination > li > a:hover, - .pagination > li > a:focus, - .pagination > li > a.focus { - background-color: @surface0 !important; - } - - /* progress bars */ - .progress-bar { - background-color: @accent-color !important; - } - - .progress-bar-success { - background-color: @green !important; - } - - .progress-bar-info { - background-color: @flamingo !important; - } - - .progress-bar-warning { - background-color: @yellow !important; - } - - .progress-bar-danger { - background-color: @red !important; - } - - /* text */ - .text-primary { - color: @accent-color !important; - } - - .text-success { - color: @green !important; - } - - .text-info { - color: @flamingo !important; - } - - .text-warning { - color: @yellow !important; - } - - .text-danger { - color: @red !important; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/syncthing/catppuccin.user.less b/styles/syncthing/catppuccin.user.less new file mode 100644 index 0000000000..8524b5b386 --- /dev/null +++ b/styles/syncthing/catppuccin.user.less @@ -0,0 +1,345 @@ +/* ==UserStyle== +@name Syncthing Catppuccin +@namespace github.com/catppuccin/userstyles/styles/syncthing +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/syncthing +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/syncthing/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Asyncthing +@description Soothing pastel theme for Syncthing +@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"] + +@var text urls "URL(s) for Syncthing" "127\.0\.0\.1\:8384,0\.0\.0\.0\:8384,localhost\:8384" +==/UserStyle== */ + +/* + `replace( ," ", "", "g")` is here to remove extra spaces (if any) +*/ + +@-moz-document regexp( + replace(replace(%("https?://(%s)/.*", @urls), ",", "|", "g"), " ", "", "g") + ) { + @media (prefers-color-scheme: light) { + :root { + #catppuccin(@lightFlavor, @accentColor); + } + } + + @media (prefers-color-scheme: dark) { + :root { + #catppuccin(@darkFlavor, @accentColor); + } + } + + .light-theme { + #catppuccin(@lightFlavor, @accentColor); + } + + .dark-theme { + #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 { + color: @text !important; + background-color: @base !important; + } + + a { + color: @accent-color; + } + + .nav-tabs > li.active > a:hover, + .nav-tabs > li.active > a { + color: @accent-color !important; + } + + /* navbar */ + .navbar { + background-color: @mantle !important; + border-color: @mantle !important; + } + + .navbar-text, + .dropdown > a, + .dropdown-menu > li > a, + .hidden-xs > a, + .navbar-link { + color: @text !important; + } + + .dropdown-menu { + border-color: @surface1 !important; + background-color: @mantle !important; + } + + .dropdown-menu > li > a:hover, + .dropdown-menu > li > a:focus { + color: @text !important; + background-color: @surface0 !important; + } + + .open > .dropdown-toggle, + .dropdown-toggle:hover { + border-color: @surface1 !important; + background-color: @surface0 !important; + } + + .divider { + background-color: @surface1 !important; + } + + li.hidden-xs:hover, + .navbar-link:hover, + .navbar-link:focus { + border-color: @surface1 !important; + background-color: @surface0 !important; + } + + .dropdown-menu > .active > a { + color: @base !important; + background-color: @accent-color !important; + } + + /* main panel */ + .panel { + background-color: @base !important; + } + + .panel-default { + border-color: @surface0 !important; + } + + .panel-default > .panel-heading { + color: @text !important; + border-color: @surface0 !important; + background-color: @surface0 !important; + } + + .panel-footer { + background-color: @base !important; + } + + .table-striped > tbody > tr { + border-top-color: @surface0 !important; + } + + .table-striped > tbody > tr:nth-of-type(odd) { + background-color: @base !important; + } + + .panel-group .panel-heading + .panel-collapse > .panel-body, + .panel-group .panel-heading + .panel-collapse > .list-group { + border-top-color: @base !important; + } + + .identicon > rect { + fill: @text !important; + } + + /* buttons */ + .btn-default { + color: @text !important; + background-color: transparent !important; + border-color: @surface0 !important; + } + + .btn-default:hover, + .btn-default:focus, + .btn-default.focus { + color: @text !important; + background-color: @surface0 !important; + } + + .btn-primary { + background-color: @accent-color !important; + color: @base; + } + + .btn-primary:hover, + .btn-primary:focus, + .btn-primary.focus { + background-color: fade(@accent-color, 90%) !important; + } + + .btn-warning { + background-color: @yellow !important; + color: @base; + } + + .btn-warning:hover, + .btn-warning:focus, + .btn-warning.focus { + background-color: fade(@yellow, 90%) !important; + } + + .btn-danger { + background-color: @red !important; + color: @base; + } + + .btn-danger:hover, + .btn-danger:focus, + .btn-danger.focus { + background-color: fade(@red, 90%) !important; + } + + /* modal dialogs */ + .modal-header { + border-color: @surface0 !important; + background-color: @mantle; + } + + .modal-content { + border-color: @surface0 !important; + background-color: @mantle !important; + } + + .modal-footer { + border-color: @surface0 !important; + background-color: @mantle !important; + } + + .alert-warning { + background-color: @yellow !important; + color: @base !important; + } + + .alert-danger { + background-color: @red !important; + color: @base !important; + } + + .help-block { + color: @text !important; + } + + .form-control { + color: @text !important; + border-color: @surface0 !important; + background-color: @base !important; + } + + code.ng-binding { + color: @mauve !important; + background-color: @mantle !important; + } + + .well, + .form-control[readonly="readonly"] { + /* read-only fields */ + color: @subtext0 !important; + border-color: @subtext0 !important; + background-color: @mantle !important; + } + + /* buttons for pagination */ + .pagination > li > a, + .pagination > li > span { + background-color: @base !important; + border-color: @surface0 !important; + } + + .pagination > li > a:hover, + .pagination > li > a:focus, + .pagination > li > a.focus { + background-color: @surface0 !important; + } + + /* progress bars */ + .progress-bar { + background-color: @accent-color !important; + } + + .progress-bar-success { + background-color: @green !important; + } + + .progress-bar-info { + background-color: @flamingo !important; + } + + .progress-bar-warning { + background-color: @yellow !important; + } + + .progress-bar-danger { + background-color: @red !important; + } + + /* text */ + .text-primary { + color: @accent-color !important; + } + + .text-success { + color: @green !important; + } + + .text-info { + color: @flamingo !important; + } + + .text-warning { + color: @yellow !important; + } + + .text-danger { + color: @red !important; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/tabnews/catppuccin.user.css b/styles/tabnews/catppuccin.user.css index 4d11020b30..72b74442f2 100644 --- a/styles/tabnews/catppuccin.user.css +++ b/styles/tabnews/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name TabNews Catppuccin +@name TabNews Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/tabnews @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/tabnews -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/tabnews/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/tabnews/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atabnews @description Soothing pastel theme for TabNews @author Catppuccin @@ -13,268 +13,4 @@ @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('tabnews.com.br') { - :root:has(div[data-color-mode="dark"]) { - #catppuccin(@darkFlavor, @accentColor); - } - :root:has(div[data-color-mode="light"]) { - #catppuccin(@lightFlavor, @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; - } - } - - --bgColor-default: @base; - --bgColor-emphasis: @crust; - --fgColor-default: @text; - --bgColor-neutral-emphasis: @subtext0; - --bgColor-accent-emphasis: @accent-color; - --fgColor-accent: @accent-color; - --fgColor-onEmphasis: @text; - --color-accent-fg: @accent-color; - --fgColor-muted: @overlay0; - --borderColor-default: @surface0; - --button-default-bgColor-rest: @base; - --button-default-bgColor-hover: @crust; - --button-default-fgColor-rest: @text; - --button-default-fgColor-hover: @text; - --button-primary-bgColor-rest: @accent-color; - --button-primary-bgColor-disabled: fadeout(@accent-color, 15%); - --button-primary-fgColor-disabled: @text; - --button-primary-fgColor-rest: @surface0; - --button-primary-bgColor-hover: darken(@accent-color, 5%); - --button-primary-fgColor-hover: @surface0; - --button-default-bgColor-active: @base; - --controlKnob-bgColor-rest: @crust; - --bgColor-accent-muted: @mantle; - --fgColor-danger: @red; - --button-danger-bgColor-hover: @red; - --control-danger-fgColor-hover: @red; - --control-danger-bgColor-hover: @mantle; - --bgColor-success-emphasis: @green; - --fgColor-success: @green; - - input[type="checkbox"] { - --fgColor-onEmphasis: @surface0; - } - - /* Create post box */ - --codeMirror-fgColor: @text; - --bgColor-muted: @base; - --bgColor-inset: @base; - --color-prettylights-syntax-markup-heading: @text; - --color-prettylights-syntax-markup-inserted-text: @subtext0; - --color-prettylights-syntax-string: @blue; - - /* Header */ - --header-bgColor: @mantle; - --header-fgColor-default: @text; - --color-header-text: @text; - --header-fgColor-logo: @text; - --color-header-logo: @text; - --color-checks-input-placeholder-text: @text; - --headerSearch-bgColor: @mantle; - --headerSearch-borderColor: @overlay0; - --color-prettylights-syntax-variable: @mauve; - --color-prettylights-syntax-markup-list: @text; - - #nprogress .bar { - background: @accent-color; - } - - /* Style the button to change theme when light theme is on */ - button[style="--button-color: #e7dfc3;"] svg { - color: @sky; - } - - button[style="--button-color: #ecdc0f99;"] svg { - color: @yellow; - } - - svg[fill="#0969da"] { - fill: @blue; - } - svg[fill="#2da44e"] { - fill: @green; - } - - /* Style the "Status" page */ - text { - fill: @text; - } - - path.recharts-rectangle { - fill: @accent-color; - } - - path.recharts-rectangle.recharts-tooltip-cursor { - fill: @overlay0; - } - - div.recharts-default-tooltip { - border-color: @overlay0 !important; - } - - li.recharts-tooltip-item { - color: @accent-color !important; - } - - div[overflow="hidden"] { - border-color: @overlay0; - * { - border-color: @overlay0; - } - } - - /* Style the "Search with Google" overlay box */ - div[class*="Overlay__StyledOverlay"] { - background: @base; - - h2 { - color: @text; - } - - .gsc-control-cse { - background: @base; - border-color: transparent; - } - - .gsc-input-box { - background: @base; - border-color: @overlay0; - } - - .gsc-input { - background: transparent; - color: @text; - } - - .gsc-search-button > button { - border-color: @overlay0; - background: @base !important; - svg { - fill: @text; - } - } - } - - .gsc-completion-container { - background: @base !important; - border-color: @overlay0; - - .gsc-completion-selected { - background: @crust; - } - span { - color: @text !important; - } - } - - .gsc-refinementhActive, - .gsc-refinementhInactive { - color: @text; - background: @base; - border-color: @accent-color; - } - - .gsc-option-menu-container { - color: @text; - .gsc-selected-option-container { - background: @base; - border-color: @text; - color: @text; - } - .gsc-option-menu { - background: @base; - .gsc-option-menu-item-highlighted { - background: @crust; - } - } - } - - .gsc-result-info, - .gsc-orderby-label, - .gs-label, - .gs-title, - .gs-snippet, - .gsc-option-menu-item, - .gscb_a { - color: @text !important; - b { - color: @text !important; - } - } - - .gsc-webResult { - border-color: transparent; - background: @base; - .gsc-url-top > * { - color: @accent-color; - } - } - - .gsc-cursor-page { - background: @base; - color: @text; - border-color: @text; - } - - .gcsc-find-more-on-google { - color: @text; - svg { - fill: @text; - } - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/tabnews/catppuccin.user.less b/styles/tabnews/catppuccin.user.less new file mode 100644 index 0000000000..552a1693d2 --- /dev/null +++ b/styles/tabnews/catppuccin.user.less @@ -0,0 +1,278 @@ +/* ==UserStyle== +@name TabNews Catppuccin +@namespace github.com/catppuccin/userstyles/styles/tabnews +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/tabnews +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/tabnews/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atabnews +@description Soothing pastel theme for TabNews +@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("tabnews.com.br") { + :root:has(div[data-color-mode="dark"]) { + #catppuccin(@darkFlavor, @accentColor); + } + :root:has(div[data-color-mode="light"]) { + #catppuccin(@lightFlavor, @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; + } + } + + --bgColor-default: @base; + --bgColor-emphasis: @crust; + --fgColor-default: @text; + --bgColor-neutral-emphasis: @subtext0; + --bgColor-accent-emphasis: @accent-color; + --fgColor-accent: @accent-color; + --fgColor-onEmphasis: @text; + --color-accent-fg: @accent-color; + --fgColor-muted: @overlay0; + --borderColor-default: @surface0; + --button-default-bgColor-rest: @base; + --button-default-bgColor-hover: @crust; + --button-default-fgColor-rest: @text; + --button-default-fgColor-hover: @text; + --button-primary-bgColor-rest: @accent-color; + --button-primary-bgColor-disabled: fadeout(@accent-color, 15%); + --button-primary-fgColor-disabled: @text; + --button-primary-fgColor-rest: @surface0; + --button-primary-bgColor-hover: darken(@accent-color, 5%); + --button-primary-fgColor-hover: @surface0; + --button-default-bgColor-active: @base; + --controlKnob-bgColor-rest: @crust; + --bgColor-accent-muted: @mantle; + --fgColor-danger: @red; + --button-danger-bgColor-hover: @red; + --control-danger-fgColor-hover: @red; + --control-danger-bgColor-hover: @mantle; + --bgColor-success-emphasis: @green; + --fgColor-success: @green; + + input[type="checkbox"] { + --fgColor-onEmphasis: @surface0; + } + + /* Create post box */ + --codeMirror-fgColor: @text; + --bgColor-muted: @base; + --bgColor-inset: @base; + --color-prettylights-syntax-markup-heading: @text; + --color-prettylights-syntax-markup-inserted-text: @subtext0; + --color-prettylights-syntax-string: @blue; + + /* Header */ + --header-bgColor: @mantle; + --header-fgColor-default: @text; + --color-header-text: @text; + --header-fgColor-logo: @text; + --color-header-logo: @text; + --color-checks-input-placeholder-text: @text; + --headerSearch-bgColor: @mantle; + --headerSearch-borderColor: @overlay0; + --color-prettylights-syntax-variable: @mauve; + --color-prettylights-syntax-markup-list: @text; + + #nprogress .bar { + background: @accent-color; + } + + /* Style the button to change theme when light theme is on */ + button[style="--button-color: #e7dfc3;"] svg { + color: @sky; + } + + button[style="--button-color: #ecdc0f99;"] svg { + color: @yellow; + } + + svg[fill="#0969da"] { + fill: @blue; + } + svg[fill="#2da44e"] { + fill: @green; + } + + /* Style the "Status" page */ + text { + fill: @text; + } + + path.recharts-rectangle { + fill: @accent-color; + } + + path.recharts-rectangle.recharts-tooltip-cursor { + fill: @overlay0; + } + + div.recharts-default-tooltip { + border-color: @overlay0 !important; + } + + li.recharts-tooltip-item { + color: @accent-color !important; + } + + div[overflow="hidden"] { + border-color: @overlay0; + * { + border-color: @overlay0; + } + } + + /* Style the "Search with Google" overlay box */ + div[class*="Overlay__StyledOverlay"] { + background: @base; + + h2 { + color: @text; + } + + .gsc-control-cse { + background: @base; + border-color: transparent; + } + + .gsc-input-box { + background: @base; + border-color: @overlay0; + } + + .gsc-input { + background: transparent; + color: @text; + } + + .gsc-search-button > button { + border-color: @overlay0; + background: @base !important; + svg { + fill: @text; + } + } + } + + .gsc-completion-container { + background: @base !important; + border-color: @overlay0; + + .gsc-completion-selected { + background: @crust; + } + span { + color: @text !important; + } + } + + .gsc-refinementhActive, + .gsc-refinementhInactive { + color: @text; + background: @base; + border-color: @accent-color; + } + + .gsc-option-menu-container { + color: @text; + .gsc-selected-option-container { + background: @base; + border-color: @text; + color: @text; + } + .gsc-option-menu { + background: @base; + .gsc-option-menu-item-highlighted { + background: @crust; + } + } + } + + .gsc-result-info, + .gsc-orderby-label, + .gs-label, + .gs-title, + .gs-snippet, + .gsc-option-menu-item, + .gscb_a { + color: @text !important; + b { + color: @text !important; + } + } + + .gsc-webResult { + border-color: transparent; + background: @base; + .gsc-url-top > * { + color: @accent-color; + } + } + + .gsc-cursor-page { + background: @base; + color: @text; + border-color: @text; + } + + .gcsc-find-more-on-google { + color: @text; + svg { + fill: @text; + } + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/tldraw/catppuccin.user.css b/styles/tldraw/catppuccin.user.css index 304462f636..ee36466e51 100644 --- a/styles/tldraw/catppuccin.user.css +++ b/styles/tldraw/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name tldraw Catppuccin +@name tldraw Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/tldraw @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/tldraw -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/tldraw/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/tldraw/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atldraw @description Soothing pastel theme for tldraw @author Catppuccin @@ -13,420 +13,4 @@ @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('tldraw.com') { - .tl-theme__dark { - #catppuccin(@darkFlavor, @accentColor); - } - .tl-theme__light { - #catppuccin(@lightFlavor, @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; - } - } - - --color-accent: @accent-color !important; - --color-background: @base !important; - --color-brush-fill: @surface0 !important; - --color-brush-stroke: @surface2 !important; - --color-grid: @overlay0 !important; - --color-low: @surface0 !important; - --color-low-border: @overlay2 !important; - --color-culled: @subtext1 !important; - --color-muted-none: fade(@surface0, 70%); - --color-muted-0: @surface0; - --color-muted-1: @surface1; - --color-muted-2: @surface2 !important; - --color-hint: @surface2 !important; - --color-overlay: fade(@base, 50%) !important; - --color-divider: @surface1 !important; - --color-panel-contrast: @surface2 !important; - --color-panel-overlay: fade(@overlay0, 80%); - --color-panel: @surface0 !important; - --color-focus: @sky !important; - --color-selected: @accent-color !important; - --color-selected-contrast: @crust !important; - --color-selection-fill: fade(@blue, 50%); - --color-selection-stroke: @sapphire !important; - --color-text-0: @text !important; - --color-text-1: @text !important; - --color-text-3: @subtext1 !important; - --color-text-shadow: @subtext0 !important; - --color-primary: @blue !important; - --color-warn: @maroon !important; - --color-text: @text !important; - --color-laser: @red !important; - - --shadow-1-1: fade(@crust, 16%); - --shadow-1-2: fade(@crust, 22%); - --shadow-2-1: fade(@crust, 66%); - --shadow-2-2: fade(@crust, 33%); - --shadow-3-1: fade(@crust, 50%); - - --shadow-1: 0px 1px 2px var(--shadow-1-1), 0px 1px 3px var(--shadow-1-2); - --shadow-2: 0px 1px 3px var(--shadow-2-1), 0px 2px 6px var(--shadow-2-2), - inset 0px 0px 0px 1px var(--color-panel-contrast); - --shadow-3: 0px 1px 3px var(--shadow-3-1), 0px 2px 12px var(--shadow-3-1), - inset 0px 0px 0px 1px var(--color-panel-contrast); - - .tlui-menu__submenu__trigger[data-state="open"]:not(:hover)::after { - border-radius: var(--radius-1); - background: linear-gradient( - 90deg, - @surface0 0%, - var(--color-muted-2) 100% - ); - } - .tlui-menu-zone *[data-state="open"]::after { - background: linear-gradient( - 180deg, - @surface0 0%, - var(--color-muted-2) 100% - ); - } - .tlui-people-menu__avatar { - background-color: @green !important; - } - - --color-black: @text; - --color-gray: if(@lookup = latte, @subtext0, @subtext0); - --color-red: @red; - --color-light-red: lighten(@red, 5%); - --color-orange: @peach; - --color-yellow: @yellow; - --color-green: darken(@green, 5%); - --color-light-green: lighten(@green, 5%); - --color-blue: @blue; - --color-light-blue: @sky; - --color-violet: darken(@mauve, 10%); - --color-light-violet: @mauve; - - [title="Color — Black"] { - color: var(--color-black) !important; - } - [title="Color — Grey"] { - color: var(--color-gray) !important; - } - [title="Color — Red"] { - color: var(--color-red) !important; - } - [title="Color — Light red"] { - color: var(--color-light-red) !important; - } - [title="Color — Orange"] { - color: var(--color-orange) !important; - } - [title="Color — Yellow"] { - color: var(--color-yellow) !important; - } - [title="Color — Green"] { - color: var(--color-green) !important; - } - [title="Color — Light green"] { - color: var(--color-light-green) !important; - } - [title="Color — Blue"] { - color: var(--color-blue) !important; - } - [title="Color — Light blue"] { - color: var(--color-light-blue) !important; - } - [title="Color — Violet"] { - color: var(--color-violet) !important; - } - [title="Color — Light violet"] { - color: var(--color-light-violet) !important; - } - .tl-svg-container { - [fill="#e1e1e1"], - [fill="#1d1d1d"], - [fill="#494949"], - [fill="#989898"] { - fill: var(--color-black) !important; - } - [fill="#010403"] { - fill: @crust !important; - } - [fill="#9398b0"], - [fill="#adb5bd"], - [fill="#bcc3c9"], - [fill="#7c8187"] { - fill: var(--color-gray) !important; - } - [fill="#e03131"], - [fill="#e55959"], - [fill="#8f3734"] { - fill: var(--color-red) !important; - } - [fill="#ff8787"], - [fill="#fe9e9e"], - [fill="#a56767"] { - fill: var(--color-light-red) !important; - } - [fill="#f76707"], - [fill="#f78438"], - [fill="#9f552d"] { - fill: var(--color-orange) !important; - } - [fill="#ffc034"], - [fill="#ffc078"], - [fill="#fecb92"] { - fill: var(--color-yellow) !important; - } - [fill="#099268"], - [fill="#39a785"], - [fill="#366a53"] { - fill: var(--color-green) !important; - } - [fill="#40c057"], - [fill="#65cb78"], - [fill="#4e874e"] { - fill: var(--color-light-green) !important; - } - [fill="#4263eb"], - [fill="#6681ee"], - [fill="#3a4b9e"] { - fill: var(--color-blue) !important; - } - [fill="#4dabf7"], - [fill="#6fbbf8"], - [fill="#4d7aa9"] { - fill: var(--color-light-blue) !important; - } - [fill="#ae3ec9"], - [fill="#bd63d3"], - [fill="#763a8b"] { - fill: var(--color-violet) !important; - } - [fill="#e599f7"], - [fill="#e9acf8"], - [fill="#9770a9"] { - fill: var(--color-light-violet) !important; - } - [stroke="#e1e1e1"], - [stroke="#1d1d1d"] { - stroke: var(--color-black) !important; - } - [stroke="#9398b0"], - [stroke="#adb5bd"] { - stroke: var(--color-gray) !important; - } - [stroke="#e03131"] { - stroke: var(--color-red) !important; - } - [stroke="#ff8787"] { - stroke: var(--color-light-red) !important; - } - [stroke="#f76707"] { - stroke: var(--color-orange) !important; - } - [stroke="#ffc034"], - [stroke="#ffc078"] { - stroke: var(--color-yellow) !important; - } - [stroke="#099268"] { - stroke: var(--color-green) !important; - } - [stroke="#40c057"] { - stroke: var(--color-light-green) !important; - } - [stroke="#4263eb"] { - stroke: var(--color-blue) !important; - } - [stroke="#4dabf7"] { - stroke: var(--color-light-blue) !important; - } - [stroke="#ae3ec9"] { - stroke: var(--color-violet) !important; - } - [stroke="#e599f7"] { - stroke: var(--color-light-violet) !important; - } - [stroke="color(display-p3 0.8078 0.7225 0.0312)"], - [stroke="color(display-p3 0.972 0.8705 0.05)"] { - stroke: var(--color-yellow) !important; - } - [stroke="color(display-p3 0.6299 0.7012 0.7856)"], - [stroke="color(display-p3 0.8163 0.9023 0.9416)"] { - stroke: var(--color-text-3) !important; - } - [stroke="color(display-p3 0.7024 0.0403 0.753)"], - [stroke="color(display-p3 0.9676 0.5652 0.9999)"] { - stroke: var(--color-light-violet) !important; - } - [stroke="color(display-p3 0.5651 0.0079 0.8986)"], - [stroke="color(display-p3 0.7469 0.5089 0.9995)"] { - stroke: var(--color-violet) !important; - } - [stroke="color(display-p3 0.0032 0.4655 0.7991)"], - [stroke="color(display-p3 0.308 0.6632 0.9996)"] { - stroke: var(--color-blue) !important; - } - [stroke="color(display-p3 0.0023 0.7259 0.7735)"], - [stroke="color(display-p3 0.1512 0.9414 0.9996)"] { - stroke: var(--color-light-blue) !important; - } - [stroke="color(display-p3 0.7699 0.4937 0.0085)"], - [stroke="color(display-p3 0.9988 0.6905 0.266)"] { - stroke: var(--color-orange) !important; - } - [stroke="color(display-p3 0.0085 0.582 0.4604)"], - [stroke="color(display-p3 0.2536 0.984 0.7981)"] { - stroke: var(--color-green) !important; - } - [stroke="color(display-p3 0.2711 0.6172 0.0195)"], - [stroke="color(display-p3 0.563 0.9495 0.3857)"] { - stroke: var(--color-light-green) !important; - } - [stroke="color(display-p3 0.7849 0.0585 0.3589)"], - [stroke="color(display-p3 0.9988 0.5301 0.6397)"] { - stroke: var(--color-light-red) !important; - } - [stroke="color(display-p3 0.7978 0.0509 0.2035)"], - [stroke="color(display-p3 0.9992 0.4376 0.45)"] { - stroke: var(--color-red) !important; - } - } - - [data-testid="mobile-styles.button"] { - &[style*="color: rgb(229, 153, 247);"] { - color: var(--color-light-violet) !important; - } - &[style*="color: rgb(147, 152, 176);"], - &[style*="color: rgb(173, 181, 189);"] { - color: var(--color-gray) !important; - } - &[style*="color: rgb(224, 49, 49);"] { - color: var(--color-red) !important; - } - &[style*="color: rgb(247, 103, 7);"] { - color: var(--color-orange) !important; - } - &[style*="color: rgb(255, 192, 52);"], - &[style*="color: rgb(255, 192, 120);"] { - color: var(--color-yellow) !important; - } - &[style*="color: rgb(9, 146, 104);"] { - color: var(--color-green) !important; - } - &[style*="color: rgb(64, 192, 87);"] { - color: var(--color-light-green) !important; - } - &[style*="color: rgb(66, 99, 235);"] { - color: var(--color-blue) !important; - } - &[style*="color: rgb(77, 171, 247);"] { - color: var(--color-light-blue) !important; - } - &[style*="color: rgb(174, 62, 201);"] { - color: var(--color-violet) !important; - } - &[style*="color: rgb(255, 135, 135);"] { - color: var(--color-light-red) !important; - } - } - - div:has(.tl-text.tl-text-content) { - &[style*="color: rgb(225, 225, 225);"], - &[style*="color: rgb(29, 29, 29);"] { - color: var(--color-black) !important; - } - &[style*="color: rgb(147, 152, 176);"], - &[style*="color: rgb(173, 181, 189);"] { - color: var(--color-gray) !important; - background-color: var(--color-gray) !important; - } - &[style*="color: rgb(224, 49, 49);"] { - color: var(--color-red) !important; - background-color: var(--color-red) !important; - } - &[style*="color: rgb(255, 135, 135);"] { - color: var(--color-light-red) !important; - background-color: var(--color-light-red) !important; - } - &[style*="color: rgb(247, 103, 7);"] { - color: var(--color-orange) !important; - background-color: var(--color-orange) !important; - } - &[style*="color: rgb(255, 192, 52);"], - &[style*="color: rgb(255, 192, 120);"] { - color: var(--color-yellow) !important; - background-color: var(--color-yellow) !important; - } - &[style*="color: rgb(9, 146, 104);"] { - color: var(--color-green) !important; - background-color: var(--color-green) !important; - } - &[style*="color: rgb(64, 192, 87);"] { - color: var(--color-light-green) !important; - background-color: var(--color-light-green) !important; - } - &[style*="color: rgb(66, 99, 235);"] { - color: var(--color-blue) !important; - background-color: var(--color-blue) !important; - } - &[style*="color: rgb(77, 171, 247);"] { - color: var(--color-light-blue) !important; - background-color: var(--color-light-blue) !important; - } - &[style*="color: rgb(174, 62, 201);"] { - color: var(--color-violet) !important; - background-color: var(--color-violet) !important; - } - &[style*="color: rgb(229, 153, 247);"] { - color: var(--color-light-violet) !important; - background-color: var(--color-light-violet) !important; - } - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/tldraw/catppuccin.user.less b/styles/tldraw/catppuccin.user.less new file mode 100644 index 0000000000..17c6ec1511 --- /dev/null +++ b/styles/tldraw/catppuccin.user.less @@ -0,0 +1,432 @@ +/* ==UserStyle== +@name tldraw Catppuccin +@namespace github.com/catppuccin/userstyles/styles/tldraw +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/tldraw +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/tldraw/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atldraw +@description Soothing pastel theme for tldraw +@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("tldraw.com") { + .tl-theme__dark { + #catppuccin(@darkFlavor, @accentColor); + } + .tl-theme__light { + #catppuccin(@lightFlavor, @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; + } + } + + --color-accent: @accent-color !important; + --color-background: @base !important; + --color-brush-fill: @surface0 !important; + --color-brush-stroke: @surface2 !important; + --color-grid: @overlay0 !important; + --color-low: @surface0 !important; + --color-low-border: @overlay2 !important; + --color-culled: @subtext1 !important; + --color-muted-none: fade(@surface0, 70%); + --color-muted-0: @surface0; + --color-muted-1: @surface1; + --color-muted-2: @surface2 !important; + --color-hint: @surface2 !important; + --color-overlay: fade(@base, 50%) !important; + --color-divider: @surface1 !important; + --color-panel-contrast: @surface2 !important; + --color-panel-overlay: fade(@overlay0, 80%); + --color-panel: @surface0 !important; + --color-focus: @sky !important; + --color-selected: @accent-color !important; + --color-selected-contrast: @crust !important; + --color-selection-fill: fade(@blue, 50%); + --color-selection-stroke: @sapphire !important; + --color-text-0: @text !important; + --color-text-1: @text !important; + --color-text-3: @subtext1 !important; + --color-text-shadow: @subtext0 !important; + --color-primary: @blue !important; + --color-warn: @maroon !important; + --color-text: @text !important; + --color-laser: @red !important; + + --shadow-1-1: fade(@crust, 16%); + --shadow-1-2: fade(@crust, 22%); + --shadow-2-1: fade(@crust, 66%); + --shadow-2-2: fade(@crust, 33%); + --shadow-3-1: fade(@crust, 50%); + + --shadow-1: 0px 1px 2px var(--shadow-1-1), 0px 1px 3px var(--shadow-1-2); + --shadow-2: + 0px 1px 3px var(--shadow-2-1), 0px 2px 6px var(--shadow-2-2), inset 0px + 0px 0px 1px var(--color-panel-contrast); + --shadow-3: + 0px 1px 3px var(--shadow-3-1), 0px 2px 12px var(--shadow-3-1), inset 0px + 0px 0px 1px var(--color-panel-contrast); + + .tlui-menu__submenu__trigger[data-state="open"]:not(:hover)::after { + border-radius: var(--radius-1); + background: linear-gradient( + 90deg, + @surface0 0%, + var(--color-muted-2) 100% + ); + } + .tlui-menu-zone *[data-state="open"]::after { + background: linear-gradient( + 180deg, + @surface0 0%, + var(--color-muted-2) 100% + ); + } + .tlui-people-menu__avatar { + background-color: @green !important; + } + + --color-black: @text; + --color-gray: if(@lookup = latte, @subtext0, @subtext0); + --color-red: @red; + --color-light-red: lighten(@red, 5%); + --color-orange: @peach; + --color-yellow: @yellow; + --color-green: darken(@green, 5%); + --color-light-green: lighten(@green, 5%); + --color-blue: @blue; + --color-light-blue: @sky; + --color-violet: darken(@mauve, 10%); + --color-light-violet: @mauve; + + [title="Color — Black"] { + color: var(--color-black) !important; + } + [title="Color — Grey"] { + color: var(--color-gray) !important; + } + [title="Color — Red"] { + color: var(--color-red) !important; + } + [title="Color — Light red"] { + color: var(--color-light-red) !important; + } + [title="Color — Orange"] { + color: var(--color-orange) !important; + } + [title="Color — Yellow"] { + color: var(--color-yellow) !important; + } + [title="Color — Green"] { + color: var(--color-green) !important; + } + [title="Color — Light green"] { + color: var(--color-light-green) !important; + } + [title="Color — Blue"] { + color: var(--color-blue) !important; + } + [title="Color — Light blue"] { + color: var(--color-light-blue) !important; + } + [title="Color — Violet"] { + color: var(--color-violet) !important; + } + [title="Color — Light violet"] { + color: var(--color-light-violet) !important; + } + .tl-svg-container { + [fill="#e1e1e1"], + [fill="#1d1d1d"], + [fill="#494949"], + [fill="#989898"] { + fill: var(--color-black) !important; + } + [fill="#010403"] { + fill: @crust !important; + } + [fill="#9398b0"], + [fill="#adb5bd"], + [fill="#bcc3c9"], + [fill="#7c8187"] { + fill: var(--color-gray) !important; + } + [fill="#e03131"], + [fill="#e55959"], + [fill="#8f3734"] { + fill: var(--color-red) !important; + } + [fill="#ff8787"], + [fill="#fe9e9e"], + [fill="#a56767"] { + fill: var(--color-light-red) !important; + } + [fill="#f76707"], + [fill="#f78438"], + [fill="#9f552d"] { + fill: var(--color-orange) !important; + } + [fill="#ffc034"], + [fill="#ffc078"], + [fill="#fecb92"] { + fill: var(--color-yellow) !important; + } + [fill="#099268"], + [fill="#39a785"], + [fill="#366a53"] { + fill: var(--color-green) !important; + } + [fill="#40c057"], + [fill="#65cb78"], + [fill="#4e874e"] { + fill: var(--color-light-green) !important; + } + [fill="#4263eb"], + [fill="#6681ee"], + [fill="#3a4b9e"] { + fill: var(--color-blue) !important; + } + [fill="#4dabf7"], + [fill="#6fbbf8"], + [fill="#4d7aa9"] { + fill: var(--color-light-blue) !important; + } + [fill="#ae3ec9"], + [fill="#bd63d3"], + [fill="#763a8b"] { + fill: var(--color-violet) !important; + } + [fill="#e599f7"], + [fill="#e9acf8"], + [fill="#9770a9"] { + fill: var(--color-light-violet) !important; + } + [stroke="#e1e1e1"], + [stroke="#1d1d1d"] { + stroke: var(--color-black) !important; + } + [stroke="#9398b0"], + [stroke="#adb5bd"] { + stroke: var(--color-gray) !important; + } + [stroke="#e03131"] { + stroke: var(--color-red) !important; + } + [stroke="#ff8787"] { + stroke: var(--color-light-red) !important; + } + [stroke="#f76707"] { + stroke: var(--color-orange) !important; + } + [stroke="#ffc034"], + [stroke="#ffc078"] { + stroke: var(--color-yellow) !important; + } + [stroke="#099268"] { + stroke: var(--color-green) !important; + } + [stroke="#40c057"] { + stroke: var(--color-light-green) !important; + } + [stroke="#4263eb"] { + stroke: var(--color-blue) !important; + } + [stroke="#4dabf7"] { + stroke: var(--color-light-blue) !important; + } + [stroke="#ae3ec9"] { + stroke: var(--color-violet) !important; + } + [stroke="#e599f7"] { + stroke: var(--color-light-violet) !important; + } + [stroke="color(display-p3 0.8078 0.7225 0.0312)"], + [stroke="color(display-p3 0.972 0.8705 0.05)"] { + stroke: var(--color-yellow) !important; + } + [stroke="color(display-p3 0.6299 0.7012 0.7856)"], + [stroke="color(display-p3 0.8163 0.9023 0.9416)"] { + stroke: var(--color-text-3) !important; + } + [stroke="color(display-p3 0.7024 0.0403 0.753)"], + [stroke="color(display-p3 0.9676 0.5652 0.9999)"] { + stroke: var(--color-light-violet) !important; + } + [stroke="color(display-p3 0.5651 0.0079 0.8986)"], + [stroke="color(display-p3 0.7469 0.5089 0.9995)"] { + stroke: var(--color-violet) !important; + } + [stroke="color(display-p3 0.0032 0.4655 0.7991)"], + [stroke="color(display-p3 0.308 0.6632 0.9996)"] { + stroke: var(--color-blue) !important; + } + [stroke="color(display-p3 0.0023 0.7259 0.7735)"], + [stroke="color(display-p3 0.1512 0.9414 0.9996)"] { + stroke: var(--color-light-blue) !important; + } + [stroke="color(display-p3 0.7699 0.4937 0.0085)"], + [stroke="color(display-p3 0.9988 0.6905 0.266)"] { + stroke: var(--color-orange) !important; + } + [stroke="color(display-p3 0.0085 0.582 0.4604)"], + [stroke="color(display-p3 0.2536 0.984 0.7981)"] { + stroke: var(--color-green) !important; + } + [stroke="color(display-p3 0.2711 0.6172 0.0195)"], + [stroke="color(display-p3 0.563 0.9495 0.3857)"] { + stroke: var(--color-light-green) !important; + } + [stroke="color(display-p3 0.7849 0.0585 0.3589)"], + [stroke="color(display-p3 0.9988 0.5301 0.6397)"] { + stroke: var(--color-light-red) !important; + } + [stroke="color(display-p3 0.7978 0.0509 0.2035)"], + [stroke="color(display-p3 0.9992 0.4376 0.45)"] { + stroke: var(--color-red) !important; + } + } + + [data-testid="mobile-styles.button"] { + &[style*="color: rgb(229, 153, 247);"] { + color: var(--color-light-violet) !important; + } + &[style*="color: rgb(147, 152, 176);"], + &[style*="color: rgb(173, 181, 189);"] { + color: var(--color-gray) !important; + } + &[style*="color: rgb(224, 49, 49);"] { + color: var(--color-red) !important; + } + &[style*="color: rgb(247, 103, 7);"] { + color: var(--color-orange) !important; + } + &[style*="color: rgb(255, 192, 52);"], + &[style*="color: rgb(255, 192, 120);"] { + color: var(--color-yellow) !important; + } + &[style*="color: rgb(9, 146, 104);"] { + color: var(--color-green) !important; + } + &[style*="color: rgb(64, 192, 87);"] { + color: var(--color-light-green) !important; + } + &[style*="color: rgb(66, 99, 235);"] { + color: var(--color-blue) !important; + } + &[style*="color: rgb(77, 171, 247);"] { + color: var(--color-light-blue) !important; + } + &[style*="color: rgb(174, 62, 201);"] { + color: var(--color-violet) !important; + } + &[style*="color: rgb(255, 135, 135);"] { + color: var(--color-light-red) !important; + } + } + + div:has(.tl-text.tl-text-content) { + &[style*="color: rgb(225, 225, 225);"], + &[style*="color: rgb(29, 29, 29);"] { + color: var(--color-black) !important; + } + &[style*="color: rgb(147, 152, 176);"], + &[style*="color: rgb(173, 181, 189);"] { + color: var(--color-gray) !important; + background-color: var(--color-gray) !important; + } + &[style*="color: rgb(224, 49, 49);"] { + color: var(--color-red) !important; + background-color: var(--color-red) !important; + } + &[style*="color: rgb(255, 135, 135);"] { + color: var(--color-light-red) !important; + background-color: var(--color-light-red) !important; + } + &[style*="color: rgb(247, 103, 7);"] { + color: var(--color-orange) !important; + background-color: var(--color-orange) !important; + } + &[style*="color: rgb(255, 192, 52);"], + &[style*="color: rgb(255, 192, 120);"] { + color: var(--color-yellow) !important; + background-color: var(--color-yellow) !important; + } + &[style*="color: rgb(9, 146, 104);"] { + color: var(--color-green) !important; + background-color: var(--color-green) !important; + } + &[style*="color: rgb(64, 192, 87);"] { + color: var(--color-light-green) !important; + background-color: var(--color-light-green) !important; + } + &[style*="color: rgb(66, 99, 235);"] { + color: var(--color-blue) !important; + background-color: var(--color-blue) !important; + } + &[style*="color: rgb(77, 171, 247);"] { + color: var(--color-light-blue) !important; + background-color: var(--color-light-blue) !important; + } + &[style*="color: rgb(174, 62, 201);"] { + color: var(--color-violet) !important; + background-color: var(--color-violet) !important; + } + &[style*="color: rgb(229, 153, 247);"] { + color: var(--color-light-violet) !important; + background-color: var(--color-light-violet) !important; + } + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/trinket/catppuccin.user.css b/styles/trinket/catppuccin.user.css index df2d7a71ed..3b5a793504 100644 --- a/styles/trinket/catppuccin.user.css +++ b/styles/trinket/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Trinket Catppuccin +@name Trinket Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/trinket @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/trinket -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/trinket/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/trinket/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atrinket @description Soothing pastel theme for Trinket @author Catppuccin @@ -13,1323 +13,4 @@ @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('trinket.io') { - @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); - - @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]; - - --ctp-rosewater: @rosewater; - --ctp-flamingo: @flamingo; - --ctp-pink: @pink; - --ctp-mauve: @mauve; - --ctp-red: @red; - --ctp-maroon: @maroon; - --ctp-peach: @peach; - --ctp-yellow: @yellow; - --ctp-green: @green; - --ctp-teal: @teal; - --ctp-sky: @sky; - --ctp-sapphire: @sapphire; - --ctp-blue: @blue; - --ctp-lavender: @lavender; - --ctp-text: @text; - --ctp-subtext1: @subtext1; - --ctp-subtext0: @subtext0; - --ctp-overlay2: @overlay2; - --ctp-overlay1: @overlay1; - --ctp-overlay0: @overlay0; - --ctp-surface2: @surface2; - --ctp-surface1: @surface1; - --ctp-surface0: @surface0; - --ctp-base: @base; - --ctp-mantle: @mantle; - --ctp-crust: @crust; - - .ace_editor { - background-color: @crust; - color: @text; - - .ace_gutter { - background: @mantle; - color: @overlay1; - } - .ace_print-margin { - background: @mantle; - } - - .ace_marker-layer { - .ace_active-line { - background-color: fade(@yellow, 20%); - } - .highlight-line-error { - background-color: fade(@red, 20%); - } - .ace_bracket { - border-color: @overlay1; - } - } - - .ace_cursor { - color: @text; - } - .ace_marker-layer .ace_selection { - background: fade(@accent-color, 30%); - } - .ace_fold { - background-color: @surface0; - border-color: @surface1; - } - - .ace_constant.ace_language, - .ace_keyword, - .ace_meta, - .ace_variable.ace_language { - color: @mauve; - } - .ace_line .ace_identifier:not(:first-of-type) { - color: @blue; - } - .ace_paren { - color: @red; - } - .ace_constant.ace_numeric { - color: @peach; - } - .ace_entity.ace_other.ace_attribute-name, - .ace_support.ace_constant, - .ace_support.ace_function { - color: @teal; - } - .ace_entity.ace_name.ace_tag, - .ace_support.ace_class, - .ace_support.ace_type { - color: @blue; - } - .ace_storage { - color: @peach; - } - .ace_string { - color: @green; - } - .ace_comment { - color: @overlay2; - } - - .ace_indent-guide { - @svg: escape( - '' - ); - - background-image: url("data:image/svg+xml;utf8,@{svg}"); - } - } - - #ace_settingsmenu { - background-color: @mantle !important; - box-shadow: none !important; - color: @subtext0; - } - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - body { - background-color: @base !important; - color: @text !important; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - color: @text !important; - } - - a { - color: @accent-color; - text-decoration-color: @accent-color; - - &:hover { - color: @accent-color; - } - } - - hr, - fieldset { - border-color: @surface0 !important; - } - - footer { - border-top-color: @surface0 !important; - background-color: @mantle !important; - } - - code { - background-color: @mantle !important; - color: @text !important; - } - - select { - background-color: @crust !important; - border-color: @surface0 !important; - color: @text !important; - } - - iframe[frameborder] { - border-color: @surface0 !important; - } - - label { - color: @subtext0 !important; - } - - table { - background-color: @base !important; - border-color: @surface0 !important; - - th, - td { - color: @text !important; - } - - tr.even, - tr.alt, - tr:nth-of-type(2n) { - background-color: @mantle !important; - } - - thead { - background-color: @mantle !important; - } - } - - input, - textarea { - background-color: @crust !important; - color: @text !important; - border-color: @surface0 !important; - - &::placeholder { - color: @subtext0 !important; - } - } - - textarea.lined { - background-color: @base !important; - } - - path[fill="#444444"] { - fill: @text !important; - } - - pre { - border-color: @surface0 !important; - background-color: @mantle !important; - } - - #page.hfeed a:hover { - border-bottom-color: @accent-color !important; - } - - .author-section { - box-shadow: none !important; - } - - .code-editor .expander { - background-image: linear-gradient( - to right, - fade(@mantle, 0), - @mantle 50% - ) !important; - } - - .sidebar-content a:hover { - color: @accent-color !important; - } - - .progress { - border-color: @surface0 !important; - background-color: @crust !important; - color: @base !important; - } - - .sidebar { - box-shadow: 1px 0 15px fade(@crust, 0.5) !important; - background-color: @base !important; - } - - .sidebar-top { - background-color: @base !important; - border-bottom-color: @surface0 !important; - } - - .meter.green { - background-color: @green !important; - } - - .file-upload { - background-color: @crust !important; - border-color: @surface0 !important; - color: @text !important; - } - - .notifyjs-foundation-success, - .alert-box.success { - color: @base !important; - background-color: @green !important; - border-color: @green !important; - } - - .alert-box.alert, - .alert-box.code-error { - color: @base !important; - background-color: @red !important; - border-color: @red !important; - } - - .lineno, - article .categories, - article .date, - article .date a { - color: @subtext0 !important; - - &a:hover { - color: @accent-color !important; - } - } - - .linedwrap .lines { - border-right-color: @surface0; - } - - .codelines { - background-color: @mantle !important; - } - - span.beta { - color: @accent-color !important; - } - - .resources a { - color: @text !important; - - &:hover .book-item { - box-shadow: 0 0 15px @surface0 !important; - } - } - - #trinket-gallery #trinketDetails a.closer { - border-color: @surface0 !important; - background-color: @crust !important; - } - - .panel { - background-color: @crust !important; - color: @text !important; - border-color: @surface0 !important; - - li { - color: @subtext0 !important; - } - } - - .code-plan-colors, - .code-label, - .code-name, - .codeplus-plan-colors, - .codeplus-label, - .codeplus-name, - .connect-plan-colors, - .connect-label, - .connect-name, - .classroom-plan-colors, - .classroom-label, - .classroom-name, - i.trinket-key.logo { - background-color: @accent-color !important; - color: @base !important; - } - - .code-plan-colors-inverted, - .connect-plan-colors-inverted, - .classroom-plan-colors-inverted { - color: @accent-color; - } - - .nav-wrapper, - .entry-footer { - border-bottom-color: @surface0 !important; - } - - .top-bar, - .top-bar-section ul li, - .top-bar-section li:not(.has-form) a:not(.button, .faux-button), - .name { - background-color: @crust !important; - } - - .top-bar-section li:not(.has-form) a:not(.button, .faux-button):hover { - background-color: @mantle !important; - } - - .angular-ui-tree-placeholder { - background-color: @base !important; - border-color: @surface0 !important; - } - - .editable-click:hover, - a.editable-click:hover { - color: @accent-color !important; - } - - .outline-list-item.lesson { - border-bottom-color: @surface0 !important; - } - - .intercom-namespace .intercom-o8wqhy { - box-shadow: none; - } - - .intercom-lightweight-app-launcher-icon-open svg path { - fill: @base !important; - } - - .intercom-lightweight-app-launcher { - background-color: @accent-color !important; - } - - .edit-material-title:hover { - background-color: @crust !important; - } - - a.dashboard-actions-link, - a.edit-lesson-actions-link, - a.edit-material-actions-link { - i { - color: @text !important; - } - - &:hover { - background-color: @mantle !important; - } - } - - .dashboard-content.dashboard-list { - .submission-row, - .user-row { - border-bottom-color: @surface0 !important; - - &:not(.row-open):hover { - background-color: @mantle !important; - } - } - } - - .dashboard-content .material-row .material-name span { - color: @text !important; - } - - .chart-wrapper { - background-color: @base !important; - } - - .chart-segment { - span { - color: @base !important; - } - - &.completed { - background-color: @green !important; - } - - &.submitted { - background-color: @blue !important; - } - - &.started { - background-color: @yellow !important; - } - - &.not-started { - background-color: @text !important; - background-image: repeating-linear-gradient( - 135deg, - @subtext1, - @subtext1 10px, - transparent 10px, - transparent 30px - ) !important; - } - } - - .outline-list { - background-color: @mantle !important; - } - - .outline-list-item.angular-ui-tree-node.isDraft { - background-image: repeating-linear-gradient( - 45deg, - @base, - @base 10px, - transparent 10px, - transparent 20px - ) !important; - } - - .top-bar .toggle-topbar.menu-icon a { - color: @text !important; - } - - .top-bar.expanded .toggle-topbar a span::after { - box-shadow: - 0 0 0 1px @text, - 0 7px 0 1px @text, - 0 14px 0 1px @text; - } - - .button.dropdown-blue::after { - border-top-color: @text !important; - } - - .top-bar-section .title h5 a { - color: @text !important; - } - - .update-row { - border-top-color: @surface2 !important; - } - - .top-bar-section .divider { - border-top-color: @surface0 !important; - } - - nav.top-bar .top-bar-section .dropdown, - nav.top-bar .top-bar-section body.course .dropdown-blue, - body.course nav.top-bar .top-bar-section .dropdown-blue { - border-color: @surface0 !important; - } - - .content-heading { - background-color: @mantle !important; - } - - .top-bar-section ul li > a, - #userdata, - .subheader, - .green-highlight:not(.disabled) > *, - .tab-scroll-link, - .closer, - .entry-title a, - .jqconsole-prompt, - .jqconsole-old-prompt { - color: @text !important; - } - - .top-bar-section .has-dropdown > a::after { - border-top-color: @text !important; - } - - #loadingContent { - background-color: @base !important; - } - - .fa-spinner { - color: @text !important; - } - - button, - .button, - .faux-button { - background-color: @crust !important; - color: @text !important; - border-color: @surface0 !important; - - &:hover { - background-color: @mantle !important; - } - - &:not(.disabled) { - &.secondary, - &.success { - background-color: @surface0 !important; - color: @text !important; - border-color: @surface0 !important; - - // the :not() adds specificity to override the `!important` in the default styles - &:hover:not(.disabled) { - background-color: @green !important; - color: @base !important; - border-color: @surface0 !important; - } - } - - &.danger { - background-color: @red !important; - border-color: @red !important; - color: @base !important; - - &:hover { - background-color: darken(@red, 5%) !important; - } - } - - &.caution { - border-color: @red !important; - color: @red; - - &:hover { - background-color: fade(@red, 40%) !important; - } - } - } - - &#sidebar-link, - &#sidebar-close { - background-color: @base !important; - } - } - - .site-header { - border-bottom-color: @surface0 !important; - } - - .menu-icon { - fill: @text !important; - } - - .draft-message, - .broadcast-message { - color: @subtext0 !important; - } - - .color-swatch { - color: @surface0 !important; - } - - #embed-documentation dd, - dl#documentation dd { - &, - .methodHeader, - .methodDocs { - border-color: @surface0 !important; - - pre { - background-color: @base !important; - } - } - - .methodHeader { - background-color: @crust !important; - } - - &.active a { - border-bottom-color: @surface0 !important; - } - } - - .switch { - label { - background-color: @crust !important; - - &::after { - background-color: @text !important; - } - } - - input:checked + label { - background-color: @accent-color !important; - - &::after { - background-color: @base !important; - } - } - } - - .accordion { - dd > a { - background-color: @mantle !important; - color: @text !important; - } - - dd > .content.active { - background-color: @mantle !important; - } - } - - .icon-bar { - background-color: @base !important; - - > a { - background-color: @crust !important; - } - - > a:hover { - background-color: @mantle !important; - } - - .item, - > * i { - color: @text !important; - } - } - - .exit-off-canvas { - box-shadow: - -4px 0 4px @surface0, - 4px 0 4px @surface0 !important; - background-color: fade(@base, 50%) !important; - } - - #trinket-gallery #trinketDetails .spotlight { - background-color: fade(@base, 50%) !important; - } - - .right-off-canvas-menu, - .left-off-canvas-menu { - background-color: @base !important; - } - - .tab-nav { - border-bottom-color: @base !important; - - .menu-button { - background-color: @base !important; - color: @text !important; - } - - .tab { - background-color: @crust !important; - border-color: @surface0 !important; - border-top-color: @crust !important; - box-shadow: none !important; - - i.warning { - color: @red !important; - } - - a { - color: @text !important; - } - - &.active { - background-color: @surface0 !important; - - span { - background-color: @surface0 !important; - } - } - } - } - - .side-nav { - border-color: @surface0 !important; - - li { - border-top-color: @surface2 !important; - } - - a { - color: @accent-color !important; - - &.active { - color: @text !important; - } - } - } - - li.side-nav-heading { - background-color: @mantle !important; - } - - .decorated > span { - &::before, - &::after { - border-bottom-color: @surface0; - } - } - - .tab-options, - .f-dropdown.open { - background-color: @base !important; - border-color: @surface0 !important; - - &::before, - &::after { - border-bottom-color: @crust !important; - } - - a { - background-color: @crust !important; - color: @text !important; - } - } - - .reveal-modal { - background-color: @base !important; - border-color: @surface0 !important; - box-shadow: none !important; - - .close-reveal-modal { - color: @subtext0 !important; - } - } - - ul.off-canvas-list li { - a { - border-bottom-color: @surface0 !important; - color: @text !important; - background-color: @base !important; - } - - a:hover { - background-color: @mantle !important; - } - - label { - background-color: @mantle !important; - border-top-color: @surface0 !important; - color: @subtext0 !important; - } - } - - .faux-input { - background-color: @crust !important; - border-color: @surface0 !important; - box-shadow: none !important; - color: @text !important; - } - - .label:not(.last-saved) { - background-color: @accent-color !important; - color: @base !important; - } - - .last-saved { - color: @subtext0 !important; - } - - .code-editor .info-area { - border-top-color: @surface0 !important; - background-color: @base !important; - color: @text !important; - } - - .injectionDiv { - color: initial !important; - } - - .pricing-table { - border-color: @surface0 !important; - - .cta-button { - background-color: @base !important; - } - - .price { - background-color: @base !important; - color: @text !important; - } - - .title { - background-color: @mantle !important; - } - - .description, - .bullet-item { - background-color: @base !important; - color: @text !important; - border-bottom-color: @surface2 !important; - - p { - color: @subtext0 !important; - } - } - } - - .blue-highlight:not(.disabled) { - background-color: @accent-color !important; - - &, - i.fa, - label { - color: @base !important; - } - } - - .featured-course-list li { - border-color: @surface0 !important; - } - - .course-title { - background-color: @mantle !important; - border-bottom-color: @surface0 !important; - - a { - color: @text !important; - } - } - - .course-list li { - border-color: @surface0 !important; - - &:hover { - background-color: @mantle !important; - } - } - - .library-subnav { - border-bottom-color: @surface0 !important; - } - - .trinket-last-date { - color: @subtext0 !important; - } - - .fa { - &.neutral { - color: @subtext0 !important; - } - - &.success { - color: @green !important; - } - - &.alert, - &.caution { - color: @red !important; - } - } - - .shared-modal ul#my-folders-list li.folder-item { - border-top-color: @surface0 !important; - } - - .trinket-stat .badge { - background-color: @accent-color !important; - background-image: none !important; - color: @base !important; - } - - .editable-empty { - color: @subtext0 !important; - } - - .breadcrumbs { - background-color: @mantle !important; - border-color: @surface0 !important; - - .editable { - border-bottom-color: @subtext0 !important; - - &:hover { - color: @accent-color !important; - } - } - - > .current { - color: @text !important; - } - } - - .jqconsole-header { - color: @subtext0 !important; - } - - .jqconsole-output:not(.error) { - color: @subtext1 !important; - } - - .jqconsole-output.error, - .jqconsole-error { - background-color: @red !important; - color: @base !important; - } - - .draft-circle { - background-color: @accent-color !important; - } - - .MathJax_Preview { - color: @subtext0 !important; - } - - [data-magellan-expedition], - [data-magellan-expedition-clone] { - background-color: @base !important; - } - - #trinkets-list, - .trinkets-list { - > li { - border-color: @surface0 !important; - box-shadow: none; - } - - > li .snapshot .title { - background-color: unset !important; - border-top-color: @surface0 !important; - } - - .dragging-trinket { - background-color: @crust !important; - border-color: @surface0 !important; - color: @subtext0 !important; - } - } - - #sidebar-link:hover, - #sidebar-close:hover { - opacity: 100% !important; - } - - #search-2 input { - &, - &:hover, - &:focus { - background-color: @crust !important; - color: @text !important; - border-color: @surface0 !important; - } - } - - #material-edit .toolbar { - background-color: @mantle; - border-top-color: @surface0; - border-bottom-color: @surface0; - } - - #outline { - background-color: @mantle !important; - border-right-color: @surface0 !important; - - ul { - background-color: @mantle !important; - } - - .outline-list-item.material.current { - background-color: @crust !important; - color: @text !important; - } - - .info, - .outline-list-item.lesson { - border-bottom-color: @surface0 !important; - } - } - - #outline-expander { - background-color: @accent-color !important; - color: @base !important; - } - - #class-progress { - background-color: @surface0 !important; - - .percentage { - background-color: @accent-color !important; - } - } - - #course-nav { - background-color: @mantle !important; - border-color: @surface0 !important; - - .title.breadcrumbs { - background-color: @crust !important; - } - } - - #reset-output { - color: @subtext0 !important; - } - - #instructionsToolbar { - border-bottom-color: @surface0 !important; - } - - #instructionsContainer { - background-color: @base !important; - } - - #team { - background-color: @mantle !important; - - img { - box-shadow: 0 0 0 10px @accent-color !important; - } - - a.social { - background-color: @accent-color !important; - - i::before { - color: @base !important; - } - } - } - - #outputTabs { - background-color: @crust !important; - border-bottom-color: @surface0 !important; - - .active { - background-color: @mantle !important; - } - - #instructionsTab { - border-left-color: @surface0 !important; - } - } - - #recent-trinkets .item a { - background-color: @mantle !important; - border-color: @surface0 !important; - box-shadow: none !important; - } - - #content-wrapper { - border-color: @surface0 !important; - } - - #wrapper { - border-color: @surface0 !important; - - .trinket-content { - border-top-color: @surface0 !important; - } - - .trinket-wrapper .trinket-content { - background-color: @base !important; - } - - .trinket-label { - color: @subtext0 !important; - } - - &, - .trinket-content-wrapper > :not(.codeOutput, #content-overlay) { - background-color: @base; - } - - .codeOutput { - background-color: initial !important; - } - - .left-menu-toggle { - border-right-color: @surface0 !important; - } - - .right-menu-toggle { - border-left-color: @surface0 !important; - } - - .icon-bar .item.split { - &.button, - &.faux-button { - span { - border-left-color: @surface0 !important; - } - - span::after { - border-top-color: @text !important; - } - } - } - } - - #content-overlay { - background-color: rgba(@base, 0.2) !important; - } - - #books-index .book-img { - outline-color: @surface0 !important; - - &:hover { - outline-color: @accent-color !important; - } - } - - #svg-logo .letters { - fill: @text !important; - } - - #svg-logo .yellow { - fill: @yellow !important; - } - - #svg-logo .blue { - fill: @blue !important; - } - - #svg-logo .green { - fill: @green !important; - } - - #svg-logo .white { - fill: @base !important; - } - - #blue-logo-circle { - // There normally isn't an animation applied to this - // element because the circle blends in to the background. - opacity: 0; - animation: RtL 1s 0.75s ease 1 forwards !important; - } - - #hero { - background-color: @mantle !important; - } - - #graphic { - /* This is the element for graphics output. If styled with Catppuccin, it may make graphics unviewable due to contrast issues. */ - background-color: white !important; - - &, - label { - color: initial !important; - } - } - - @keyframes attention-error-border-pulse { - 0% { - box-shadow: inset 0 0 0 @red; - } - 40% { - box-shadow: inset 0 0 0 @red; - } - 70% { - box-shadow: inset 0 0 6px @red; - } - 100% { - box-shadow: inset 0 0 0 @red; - } - } - - @keyframes bluePulseButton { - 0% { - box-shadow: 0 0 0 0 fade(@accent-color, 0.4); - background-color: @accent-color; - } - - 70% { - box-shadow: 0 0 0 10px fade(@accent-color, 0); - background-color: @accent-color; - } - - 100% { - box-shadow: none; - background-color: @accent-color; - } - } - - img[src$="trinket-logo-notag.png"], - img[src$="trinket-logo.png"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - img[src$="trinket-logo-notag.png"] { - margin: 50px 0 30px; - padding-left: 300px; - } - - img[src$="trinket-logo-circles.png"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - #dragbar { - @svg: escape( - '' - ); - - background-color: @surface0 !important; - border-left-color: @surface0 !important; - border-right-color: @surface0 !important; - background-image: url("data:image/svg+xml;utf8,@{svg}") !important; - } - - #output-dragbar { - @svg: escape( - '' - ); - - background-color: @surface0 !important; - border-top-color: @surface0 !important; - border-bottom-color: @surface0 !important; - background-image: url("data:image/svg+xml;utf8,@{svg}") !important; - } - - .lang-sprite, - #trinkets-list.list-view > li .snapshot .title::before, - .trinkets-list.list-view > li .snapshot .title::before { - @svg: escape( - '' - ); - - background-image: url("data:image/svg+xml;utf8,@{svg}"); - } - } -} - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/trinket/catppuccin.user.less b/styles/trinket/catppuccin.user.less new file mode 100644 index 0000000000..127b5ec815 --- /dev/null +++ b/styles/trinket/catppuccin.user.less @@ -0,0 +1,1328 @@ +/* ==UserStyle== +@name Trinket Catppuccin +@namespace github.com/catppuccin/userstyles/styles/trinket +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/trinket +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/trinket/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atrinket +@description Soothing pastel theme for Trinket +@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("trinket.io") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + + @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]; + + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + + .ace_editor { + background-color: @crust; + color: @text; + + .ace_gutter { + background: @mantle; + color: @overlay1; + } + .ace_print-margin { + background: @mantle; + } + + .ace_marker-layer { + .ace_active-line { + background-color: fade(@yellow, 20%); + } + .highlight-line-error { + background-color: fade(@red, 20%); + } + .ace_bracket { + border-color: @overlay1; + } + } + + .ace_cursor { + color: @text; + } + .ace_marker-layer .ace_selection { + background: fade(@accent-color, 30%); + } + .ace_fold { + background-color: @surface0; + border-color: @surface1; + } + + .ace_constant.ace_language, + .ace_keyword, + .ace_meta, + .ace_variable.ace_language { + color: @mauve; + } + .ace_line .ace_identifier:not(:first-of-type) { + color: @blue; + } + .ace_paren { + color: @red; + } + .ace_constant.ace_numeric { + color: @peach; + } + .ace_entity.ace_other.ace_attribute-name, + .ace_support.ace_constant, + .ace_support.ace_function { + color: @teal; + } + .ace_entity.ace_name.ace_tag, + .ace_support.ace_class, + .ace_support.ace_type { + color: @blue; + } + .ace_storage { + color: @peach; + } + .ace_string { + color: @green; + } + .ace_comment { + color: @overlay2; + } + + .ace_indent-guide { + @svg: escape( + '' + ); + + background-image: url("data:image/svg+xml;utf8,@{svg}"); + } + } + + #ace_settingsmenu { + background-color: @mantle !important; + box-shadow: none !important; + color: @subtext0; + } + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + body { + background-color: @base !important; + color: @text !important; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: @text !important; + } + + a { + color: @accent-color; + text-decoration-color: @accent-color; + + &:hover { + color: @accent-color; + } + } + + hr, + fieldset { + border-color: @surface0 !important; + } + + footer { + border-top-color: @surface0 !important; + background-color: @mantle !important; + } + + code { + background-color: @mantle !important; + color: @text !important; + } + + select { + background-color: @crust !important; + border-color: @surface0 !important; + color: @text !important; + } + + iframe[frameborder] { + border-color: @surface0 !important; + } + + label { + color: @subtext0 !important; + } + + table { + background-color: @base !important; + border-color: @surface0 !important; + + th, + td { + color: @text !important; + } + + tr.even, + tr.alt, + tr:nth-of-type(2n) { + background-color: @mantle !important; + } + + thead { + background-color: @mantle !important; + } + } + + input, + textarea { + background-color: @crust !important; + color: @text !important; + border-color: @surface0 !important; + + &::placeholder { + color: @subtext0 !important; + } + } + + textarea.lined { + background-color: @base !important; + } + + path[fill="#444444"] { + fill: @text !important; + } + + pre { + border-color: @surface0 !important; + background-color: @mantle !important; + } + + #page.hfeed a:hover { + border-bottom-color: @accent-color !important; + } + + .author-section { + box-shadow: none !important; + } + + .code-editor .expander { + background-image: linear-gradient( + to right, + fade(@mantle, 0), + @mantle 50% + ) !important; + } + + .sidebar-content a:hover { + color: @accent-color !important; + } + + .progress { + border-color: @surface0 !important; + background-color: @crust !important; + color: @base !important; + } + + .sidebar { + box-shadow: 1px 0 15px fade(@crust, 0.5) !important; + background-color: @base !important; + } + + .sidebar-top { + background-color: @base !important; + border-bottom-color: @surface0 !important; + } + + .meter.green { + background-color: @green !important; + } + + .file-upload { + background-color: @crust !important; + border-color: @surface0 !important; + color: @text !important; + } + + .notifyjs-foundation-success, + .alert-box.success { + color: @base !important; + background-color: @green !important; + border-color: @green !important; + } + + .alert-box.alert, + .alert-box.code-error { + color: @base !important; + background-color: @red !important; + border-color: @red !important; + } + + .lineno, + article .categories, + article .date, + article .date a { + color: @subtext0 !important; + + &a:hover { + color: @accent-color !important; + } + } + + .linedwrap .lines { + border-right-color: @surface0; + } + + .codelines { + background-color: @mantle !important; + } + + span.beta { + color: @accent-color !important; + } + + .resources a { + color: @text !important; + + &:hover .book-item { + box-shadow: 0 0 15px @surface0 !important; + } + } + + #trinket-gallery #trinketDetails a.closer { + border-color: @surface0 !important; + background-color: @crust !important; + } + + .panel { + background-color: @crust !important; + color: @text !important; + border-color: @surface0 !important; + + li { + color: @subtext0 !important; + } + } + + .code-plan-colors, + .code-label, + .code-name, + .codeplus-plan-colors, + .codeplus-label, + .codeplus-name, + .connect-plan-colors, + .connect-label, + .connect-name, + .classroom-plan-colors, + .classroom-label, + .classroom-name, + i.trinket-key.logo { + background-color: @accent-color !important; + color: @base !important; + } + + .code-plan-colors-inverted, + .connect-plan-colors-inverted, + .classroom-plan-colors-inverted { + color: @accent-color; + } + + .nav-wrapper, + .entry-footer { + border-bottom-color: @surface0 !important; + } + + .top-bar, + .top-bar-section ul li, + .top-bar-section li:not(.has-form) a:not(.button, .faux-button), + .name { + background-color: @crust !important; + } + + .top-bar-section li:not(.has-form) a:not(.button, .faux-button):hover { + background-color: @mantle !important; + } + + .angular-ui-tree-placeholder { + background-color: @base !important; + border-color: @surface0 !important; + } + + .editable-click:hover, + a.editable-click:hover { + color: @accent-color !important; + } + + .outline-list-item.lesson { + border-bottom-color: @surface0 !important; + } + + .intercom-namespace .intercom-o8wqhy { + box-shadow: none; + } + + .intercom-lightweight-app-launcher-icon-open svg path { + fill: @base !important; + } + + .intercom-lightweight-app-launcher { + background-color: @accent-color !important; + } + + .edit-material-title:hover { + background-color: @crust !important; + } + + a.dashboard-actions-link, + a.edit-lesson-actions-link, + a.edit-material-actions-link { + i { + color: @text !important; + } + + &:hover { + background-color: @mantle !important; + } + } + + .dashboard-content.dashboard-list { + .submission-row, + .user-row { + border-bottom-color: @surface0 !important; + + &:not(.row-open):hover { + background-color: @mantle !important; + } + } + } + + .dashboard-content .material-row .material-name span { + color: @text !important; + } + + .chart-wrapper { + background-color: @base !important; + } + + .chart-segment { + span { + color: @base !important; + } + + &.completed { + background-color: @green !important; + } + + &.submitted { + background-color: @blue !important; + } + + &.started { + background-color: @yellow !important; + } + + &.not-started { + background-color: @text !important; + background-image: repeating-linear-gradient( + 135deg, + @subtext1, + @subtext1 10px, + transparent 10px, + transparent 30px + ) !important; + } + } + + .outline-list { + background-color: @mantle !important; + } + + .outline-list-item.angular-ui-tree-node.isDraft { + background-image: repeating-linear-gradient( + 45deg, + @base, + @base 10px, + transparent 10px, + transparent 20px + ) !important; + } + + .top-bar .toggle-topbar.menu-icon a { + color: @text !important; + } + + .top-bar.expanded .toggle-topbar a span::after { + box-shadow: 0 0 0 1px @text, 0 7px 0 1px @text, 0 14px 0 1px @text; + } + + .button.dropdown-blue::after { + border-top-color: @text !important; + } + + .top-bar-section .title h5 a { + color: @text !important; + } + + .update-row { + border-top-color: @surface2 !important; + } + + .top-bar-section .divider { + border-top-color: @surface0 !important; + } + + nav.top-bar .top-bar-section .dropdown, + nav.top-bar .top-bar-section body.course .dropdown-blue, + body.course nav.top-bar .top-bar-section .dropdown-blue { + border-color: @surface0 !important; + } + + .content-heading { + background-color: @mantle !important; + } + + .top-bar-section ul li > a, + #userdata, + .subheader, + .green-highlight:not(.disabled) > *, + .tab-scroll-link, + .closer, + .entry-title a, + .jqconsole-prompt, + .jqconsole-old-prompt { + color: @text !important; + } + + .top-bar-section .has-dropdown > a::after { + border-top-color: @text !important; + } + + #loadingContent { + background-color: @base !important; + } + + .fa-spinner { + color: @text !important; + } + + button, + .button, + .faux-button { + background-color: @crust !important; + color: @text !important; + border-color: @surface0 !important; + + &:hover { + background-color: @mantle !important; + } + + &:not(.disabled) { + &.secondary, + &.success { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface0 !important; + + // the :not() adds specificity to override the `!important` in the default styles + &:hover:not(.disabled) { + background-color: @green !important; + color: @base !important; + border-color: @surface0 !important; + } + } + + &.danger { + background-color: @red !important; + border-color: @red !important; + color: @base !important; + + &:hover { + background-color: darken(@red, 5%) !important; + } + } + + &.caution { + border-color: @red !important; + color: @red; + + &:hover { + background-color: fade(@red, 40%) !important; + } + } + } + + &#sidebar-link, + &#sidebar-close { + background-color: @base !important; + } + } + + .site-header { + border-bottom-color: @surface0 !important; + } + + .menu-icon { + fill: @text !important; + } + + .draft-message, + .broadcast-message { + color: @subtext0 !important; + } + + .color-swatch { + color: @surface0 !important; + } + + #embed-documentation dd, + dl#documentation dd { + &, + .methodHeader, + .methodDocs { + border-color: @surface0 !important; + + pre { + background-color: @base !important; + } + } + + .methodHeader { + background-color: @crust !important; + } + + &.active a { + border-bottom-color: @surface0 !important; + } + } + + .switch { + label { + background-color: @crust !important; + + &::after { + background-color: @text !important; + } + } + + input:checked + label { + background-color: @accent-color !important; + + &::after { + background-color: @base !important; + } + } + } + + .accordion { + dd > a { + background-color: @mantle !important; + color: @text !important; + } + + dd > .content.active { + background-color: @mantle !important; + } + } + + .icon-bar { + background-color: @base !important; + + > a { + background-color: @crust !important; + } + + > a:hover { + background-color: @mantle !important; + } + + .item, + > * i { + color: @text !important; + } + } + + .exit-off-canvas { + box-shadow: -4px 0 4px @surface0, 4px 0 4px @surface0 !important; + background-color: fade(@base, 50%) !important; + } + + #trinket-gallery #trinketDetails .spotlight { + background-color: fade(@base, 50%) !important; + } + + .right-off-canvas-menu, + .left-off-canvas-menu { + background-color: @base !important; + } + + .tab-nav { + border-bottom-color: @base !important; + + .menu-button { + background-color: @base !important; + color: @text !important; + } + + .tab { + background-color: @crust !important; + border-color: @surface0 !important; + border-top-color: @crust !important; + box-shadow: none !important; + + i.warning { + color: @red !important; + } + + a { + color: @text !important; + } + + &.active { + background-color: @surface0 !important; + + span { + background-color: @surface0 !important; + } + } + } + } + + .side-nav { + border-color: @surface0 !important; + + li { + border-top-color: @surface2 !important; + } + + a { + color: @accent-color !important; + + &.active { + color: @text !important; + } + } + } + + li.side-nav-heading { + background-color: @mantle !important; + } + + .decorated > span { + &::before, + &::after { + border-bottom-color: @surface0; + } + } + + .tab-options, + .f-dropdown.open { + background-color: @base !important; + border-color: @surface0 !important; + + &::before, + &::after { + border-bottom-color: @crust !important; + } + + a { + background-color: @crust !important; + color: @text !important; + } + } + + .reveal-modal { + background-color: @base !important; + border-color: @surface0 !important; + box-shadow: none !important; + + .close-reveal-modal { + color: @subtext0 !important; + } + } + + ul.off-canvas-list li { + a { + border-bottom-color: @surface0 !important; + color: @text !important; + background-color: @base !important; + } + + a:hover { + background-color: @mantle !important; + } + + label { + background-color: @mantle !important; + border-top-color: @surface0 !important; + color: @subtext0 !important; + } + } + + .faux-input { + background-color: @crust !important; + border-color: @surface0 !important; + box-shadow: none !important; + color: @text !important; + } + + .label:not(.last-saved) { + background-color: @accent-color !important; + color: @base !important; + } + + .last-saved { + color: @subtext0 !important; + } + + .code-editor .info-area { + border-top-color: @surface0 !important; + background-color: @base !important; + color: @text !important; + } + + .injectionDiv { + color: initial !important; + } + + .pricing-table { + border-color: @surface0 !important; + + .cta-button { + background-color: @base !important; + } + + .price { + background-color: @base !important; + color: @text !important; + } + + .title { + background-color: @mantle !important; + } + + .description, + .bullet-item { + background-color: @base !important; + color: @text !important; + border-bottom-color: @surface2 !important; + + p { + color: @subtext0 !important; + } + } + } + + .blue-highlight:not(.disabled) { + background-color: @accent-color !important; + + &, + i.fa, + label { + color: @base !important; + } + } + + .featured-course-list li { + border-color: @surface0 !important; + } + + .course-title { + background-color: @mantle !important; + border-bottom-color: @surface0 !important; + + a { + color: @text !important; + } + } + + .course-list li { + border-color: @surface0 !important; + + &:hover { + background-color: @mantle !important; + } + } + + .library-subnav { + border-bottom-color: @surface0 !important; + } + + .trinket-last-date { + color: @subtext0 !important; + } + + .fa { + &.neutral { + color: @subtext0 !important; + } + + &.success { + color: @green !important; + } + + &.alert, + &.caution { + color: @red !important; + } + } + + .shared-modal ul#my-folders-list li.folder-item { + border-top-color: @surface0 !important; + } + + .trinket-stat .badge { + background-color: @accent-color !important; + background-image: none !important; + color: @base !important; + } + + .editable-empty { + color: @subtext0 !important; + } + + .breadcrumbs { + background-color: @mantle !important; + border-color: @surface0 !important; + + .editable { + border-bottom-color: @subtext0 !important; + + &:hover { + color: @accent-color !important; + } + } + + > .current { + color: @text !important; + } + } + + .jqconsole-header { + color: @subtext0 !important; + } + + .jqconsole-output:not(.error) { + color: @subtext1 !important; + } + + .jqconsole-output.error, + .jqconsole-error { + background-color: @red !important; + color: @base !important; + } + + .draft-circle { + background-color: @accent-color !important; + } + + .MathJax_Preview { + color: @subtext0 !important; + } + + [data-magellan-expedition], + [data-magellan-expedition-clone] { + background-color: @base !important; + } + + #trinkets-list, + .trinkets-list { + > li { + border-color: @surface0 !important; + box-shadow: none; + } + + > li .snapshot .title { + background-color: unset !important; + border-top-color: @surface0 !important; + } + + .dragging-trinket { + background-color: @crust !important; + border-color: @surface0 !important; + color: @subtext0 !important; + } + } + + #sidebar-link:hover, + #sidebar-close:hover { + opacity: 100% !important; + } + + #search-2 input { + &, + &:hover, + &:focus { + background-color: @crust !important; + color: @text !important; + border-color: @surface0 !important; + } + } + + #material-edit .toolbar { + background-color: @mantle; + border-top-color: @surface0; + border-bottom-color: @surface0; + } + + #outline { + background-color: @mantle !important; + border-right-color: @surface0 !important; + + ul { + background-color: @mantle !important; + } + + .outline-list-item.material.current { + background-color: @crust !important; + color: @text !important; + } + + .info, + .outline-list-item.lesson { + border-bottom-color: @surface0 !important; + } + } + + #outline-expander { + background-color: @accent-color !important; + color: @base !important; + } + + #class-progress { + background-color: @surface0 !important; + + .percentage { + background-color: @accent-color !important; + } + } + + #course-nav { + background-color: @mantle !important; + border-color: @surface0 !important; + + .title.breadcrumbs { + background-color: @crust !important; + } + } + + #reset-output { + color: @subtext0 !important; + } + + #instructionsToolbar { + border-bottom-color: @surface0 !important; + } + + #instructionsContainer { + background-color: @base !important; + } + + #team { + background-color: @mantle !important; + + img { + box-shadow: 0 0 0 10px @accent-color !important; + } + + a.social { + background-color: @accent-color !important; + + i::before { + color: @base !important; + } + } + } + + #outputTabs { + background-color: @crust !important; + border-bottom-color: @surface0 !important; + + .active { + background-color: @mantle !important; + } + + #instructionsTab { + border-left-color: @surface0 !important; + } + } + + #recent-trinkets .item a { + background-color: @mantle !important; + border-color: @surface0 !important; + box-shadow: none !important; + } + + #content-wrapper { + border-color: @surface0 !important; + } + + #wrapper { + border-color: @surface0 !important; + + .trinket-content { + border-top-color: @surface0 !important; + } + + .trinket-wrapper .trinket-content { + background-color: @base !important; + } + + .trinket-label { + color: @subtext0 !important; + } + + &, + .trinket-content-wrapper > :not(.codeOutput, #content-overlay) { + background-color: @base; + } + + .codeOutput { + background-color: initial !important; + } + + .left-menu-toggle { + border-right-color: @surface0 !important; + } + + .right-menu-toggle { + border-left-color: @surface0 !important; + } + + .icon-bar .item.split { + &.button, + &.faux-button { + span { + border-left-color: @surface0 !important; + } + + span::after { + border-top-color: @text !important; + } + } + } + } + + #content-overlay { + background-color: rgba(@base, 0.2) !important; + } + + #books-index .book-img { + outline-color: @surface0 !important; + + &:hover { + outline-color: @accent-color !important; + } + } + + #svg-logo .letters { + fill: @text !important; + } + + #svg-logo .yellow { + fill: @yellow !important; + } + + #svg-logo .blue { + fill: @blue !important; + } + + #svg-logo .green { + fill: @green !important; + } + + #svg-logo .white { + fill: @base !important; + } + + #blue-logo-circle { + // There normally isn't an animation applied to this + // element because the circle blends in to the background. + opacity: 0; + animation: RtL 1s 0.75s ease 1 forwards !important; + } + + #hero { + background-color: @mantle !important; + } + + #graphic { + /* This is the element for graphics output. If styled with Catppuccin, it may make graphics unviewable due to contrast issues. */ + background-color: white !important; + + &, + label { + color: initial !important; + } + } + + @keyframes attention-error-border-pulse { + 0% { + box-shadow: inset 0 0 0 @red; + } + 40% { + box-shadow: inset 0 0 0 @red; + } + 70% { + box-shadow: inset 0 0 6px @red; + } + 100% { + box-shadow: inset 0 0 0 @red; + } + } + + @keyframes bluePulseButton { + 0% { + box-shadow: 0 0 0 0 fade(@accent-color, 0.4); + background-color: @accent-color; + } + + 70% { + box-shadow: 0 0 0 10px fade(@accent-color, 0); + background-color: @accent-color; + } + + 100% { + box-shadow: none; + background-color: @accent-color; + } + } + + img[src$="trinket-logo-notag.png"], + img[src$="trinket-logo.png"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img[src$="trinket-logo-notag.png"] { + margin: 50px 0 30px; + padding-left: 300px; + } + + img[src$="trinket-logo-circles.png"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + #dragbar { + @svg: escape( + '' + ); + + background-color: @surface0 !important; + border-left-color: @surface0 !important; + border-right-color: @surface0 !important; + background-image: url("data:image/svg+xml;utf8,@{svg}") !important; + } + + #output-dragbar { + @svg: escape( + '' + ); + + background-color: @surface0 !important; + border-top-color: @surface0 !important; + border-bottom-color: @surface0 !important; + background-image: url("data:image/svg+xml;utf8,@{svg}") !important; + } + + .lang-sprite, + #trinkets-list.list-view > li .snapshot .title::before, + .trinkets-list.list-view > li .snapshot .title::before { + @svg: escape( + '' + ); + + background-image: url("data:image/svg+xml;utf8,@{svg}"); + } + } +} + +#rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/tuta/catppuccin.user.css b/styles/tuta/catppuccin.user.css index ca88c2a0f1..4f9aec7af6 100644 --- a/styles/tuta/catppuccin.user.css +++ b/styles/tuta/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Tuta Catppuccin +@name Tuta Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/tuta @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/tuta -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/tuta/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/tuta/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atuta @description Soothing pastel theme for Tuta @author Catppuccin @@ -13,213 +13,4 @@ @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("app.tuta.com"), domain("mail.tutanota.com") { - @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, - drawer-menu, - .list-bg { - background-color: @mantle !important; - color: @text; - } - - .list-row { - background-color: @base; - } - .odd-row { - background-color: @surface0; - } - - .header-nav { - background-color: @base; - } - - .elevated-bg, - .folder-column, - div[aria-modal] { - background-color: @base !important; - } - - .icon { - &[style*="fill: rgb(78, 78, 78);"] { - fill: @text !important; - } - - &[style*="fill: rgb(174, 174, 174);"] { - fill: @subtext0 !important; - } - - &[style*="fill: rgb(255, 83, 83);"] { - fill: @accent-color !important; - } - } - - .h2 { - color: @subtext1 !important; - } - - .bottom-nav { - background: @mantle !important; - color: @text !important; - } - - .dropdown-button, - .dropdown-button div { - color: @text !important; - } - .dropdown-button:hover { - background-color: @surface1 !important; - } - - /* logo */ - path[style*="fill: #00d2a7;"] { - fill: @accent-color !important; - } - - path[style*="fill: #c5c7c7;"] { - fill: @text !important; - } - - .row-selected { - border-color: @accent-color !important; - color: @accent-color !important; - } - .row-selected > .nav-button { - color: @accent-color !important; - } - .row-selected > .nav-button > .icon { - fill: @accent-color !important; - } - - .secondary { - color: @accent-color !important; - } - - .nav-button, - .sidebar-section.mb { - color: @subtext0 !important; - } - - .bubble { - background-color: @base; - color: @text; - } - - :where(.mouse-nav) .state-bg:hover, - :where(.keyboard-nav) .state-bg:hover, - [style*="background: rgba(139, 139, 139, 0.22)"] { - background-color: @surface0 !important; - } - - .nav-bg, - .content-bg, - [style*="background-color: rgb(35, 35, 35)"] { - background-color: @base !important; - } - [style*="background-color: rgb(17, 17, 17);"] { - background-color: @mantle !important; - } - [style*="background-color: rgba(139, 139, 139, 0.22);"] { - background-color: @surface0 !important; - } - [style*="background-color: rgba(139, 139, 139, 0.38);"] { - background-color: @surface1 !important; - } - - [style*="color: rgb(221, 221, 221);"] { - color: @text !important; - } - - [style*="color: rgb(174, 174, 174);"] { - color: @subtext1 !important; - } - - .teamLabel { - background-color: @accent-color; - color: @mantle; - } - - [style*="border: 2px solid rgb(255, 83, 83);"] { - border-color: @accent-color !important; - } - [style*="color: rgb(255, 83, 83);"], - .content-accent-fg { - color: @accent-color !important; - } - - button.expander { - color: @subtext0 !important; - } - - .logo-height > svg:nth-child(1) > path:nth-child(2) { - fill: @accent-color !important; - } - - ::-webkit-scrollbar-thumb { - background-color: @surface1; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/tuta/catppuccin.user.less b/styles/tuta/catppuccin.user.less new file mode 100644 index 0000000000..9fb0db9576 --- /dev/null +++ b/styles/tuta/catppuccin.user.less @@ -0,0 +1,223 @@ +/* ==UserStyle== +@name Tuta Catppuccin +@namespace github.com/catppuccin/userstyles/styles/tuta +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/tuta +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/tuta/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atuta +@description Soothing pastel theme for Tuta +@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("app.tuta.com"), domain("mail.tutanota.com") { + @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, + drawer-menu, + .list-bg { + background-color: @mantle !important; + color: @text; + } + + .list-row { + background-color: @base; + } + .odd-row { + background-color: @surface0; + } + + .header-nav { + background-color: @base; + } + + .elevated-bg, + .folder-column, + div[aria-modal] { + background-color: @base !important; + } + + .icon { + &[style*="fill: rgb(78, 78, 78);"] { + fill: @text !important; + } + + &[style*="fill: rgb(174, 174, 174);"] { + fill: @subtext0 !important; + } + + &[style*="fill: rgb(255, 83, 83);"] { + fill: @accent-color !important; + } + } + + .h2 { + color: @subtext1 !important; + } + + .bottom-nav { + background: @mantle !important; + color: @text !important; + } + + .dropdown-button, + .dropdown-button div { + color: @text !important; + } + .dropdown-button:hover { + background-color: @surface1 !important; + } + + /* logo */ + path[style*="fill: #00d2a7;"] { + fill: @accent-color !important; + } + + path[style*="fill: #c5c7c7;"] { + fill: @text !important; + } + + .row-selected { + border-color: @accent-color !important; + color: @accent-color !important; + } + .row-selected > .nav-button { + color: @accent-color !important; + } + .row-selected > .nav-button > .icon { + fill: @accent-color !important; + } + + .secondary { + color: @accent-color !important; + } + + .nav-button, + .sidebar-section.mb { + color: @subtext0 !important; + } + + .bubble { + background-color: @base; + color: @text; + } + + :where(.mouse-nav) .state-bg:hover, + :where(.keyboard-nav) .state-bg:hover, + [style*="background: rgba(139, 139, 139, 0.22)"] { + background-color: @surface0 !important; + } + + .nav-bg, + .content-bg, + [style*="background-color: rgb(35, 35, 35)"] { + background-color: @base !important; + } + [style*="background-color: rgb(17, 17, 17);"] { + background-color: @mantle !important; + } + [style*="background-color: rgba(139, 139, 139, 0.22);"] { + background-color: @surface0 !important; + } + [style*="background-color: rgba(139, 139, 139, 0.38);"] { + background-color: @surface1 !important; + } + + [style*="color: rgb(221, 221, 221);"] { + color: @text !important; + } + + [style*="color: rgb(174, 174, 174);"] { + color: @subtext1 !important; + } + + .teamLabel { + background-color: @accent-color; + color: @mantle; + } + + [style*="border: 2px solid rgb(255, 83, 83);"] { + border-color: @accent-color !important; + } + [style*="color: rgb(255, 83, 83);"], + .content-accent-fg { + color: @accent-color !important; + } + + button.expander { + color: @subtext0 !important; + } + + .logo-height > svg:nth-child(1) > path:nth-child(2) { + fill: @accent-color !important; + } + + ::-webkit-scrollbar-thumb { + background-color: @surface1; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/twitch/catppuccin.user.css b/styles/twitch/catppuccin.user.css index 12807e9317..cf354c9bf7 100644 --- a/styles/twitch/catppuccin.user.css +++ b/styles/twitch/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Twitch Catppuccin +@name Twitch Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/twitch @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/twitch -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/twitch/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/twitch/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atwitch @description Soothing pastel theme for Twitch @author Catppuccin @@ -13,1540 +13,4 @@ @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("twitch.tv") { - @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); - - .tw-root--theme-dark { - #catppuccin(@darkFlavor, @accentColor); - } - .tw-root--theme-light { - #catppuccin(@lightFlavor, @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; - } - - &, - .tw-dialog-layer { - --color-background-input-focus: @crust; - --color-background-interactable-hover: @surface0; - --color-background-interactable-alpha-hover: @surface0; - --color-background-interactable-active: @surface1; - --color-background-button-secondary-active: @surface1; - --color-background-button-text-default: null !important; - --color-background-pill-subtle: @subtext0; - --color-background-placeholder: @surface0; - --color-background-selectable: @surface0; - --color-text-input-placeholder: @text; - --color-border-input: @base; - --color-border-tab: @surface0; - --color-text-button-primary: @crust; - --color-text-overlay: @base; - --color-text-base: @subtext1; - --color-text-alt: @text; - --color-text-alt-2: @text; - --color-text-interactable-selected: @crust; - --color-background-alt-2: @crust; - --color-text-tag: @text; - --color-background-button-secondary-default: @crust; - --color-background-button-secondary-hover: @surface0; - --color-background-button-overlay-secondary-default: fade(@text, 13%); - --color-background-tag-default: @mantle; - --color-background-tag-hover: @crust; - --color-background-float: @mantle; - --color-background-body: @base; - --color-background-base: @mantle; - --color-background-alt: @mantle; - --color-background-input: @crust; - --color-brand-muted-cupcake: @pink; - --color-brand-muted-mint: @green; - --color-brand-muted-sky: @sky; - --color-brand-muted-blush: @peach; - --color-brand-muted-canary: @peach; - --color-brand-muted-lavender: @lavender; - --color-brand-muted-mustard: @yellow; - --color-brand-muted-emerald: @green; - --color-brand-muted-coral: @peach; - --color-brand-muted-ocean: @blue; - --color-brand-accent-grape: @mauve; - --color-brand-accent-dragonfruit: @flamingo; - --color-brand-accent-carrot: @peach; - --color-brand-accent-sun: @peach; - --color-brand-accent-lime: @green; - --color-brand-accent-turquoise: @sky; - --color-brand-accent-eggplant: @mauve; - --color-brand-accent-wine: @flamingo; - --color-brand-accent-slime: @green; - --color-brand-accent-seafoam: @green; - --color-brand-accent-cherry: @red; - --color-brand-accent-marine: @blue; - --color-brand-accent-seaweed: @teal; - --color-brand-accent-fiji: @green; - --color-brand-accent-blueberry: @blue; - --color-brand-accent-arctic: @sky; - --color-brand-accent-highlighter: @yellow; - --color-brand-accent-flamingo: @flamingo; - --color-brand-accent-ruby: @red; - --color-brand-accent-punch: @flamingo; - --color-brand-accent-creamsicle: @yellow; - --color-red: @maroon; - --color-red-darker: @red; - --color-orange: @peach; - --color-yellow: @yellow; - --color-green: @green; - --color-green-darker: @green; - --color-blue: @blue; - --color-prime-blue: @blue; - --color-magenta: @flamingo; - --color-error: @red; - --color-warn: @yellow; - --color-success: @green; - --color-white: @text; - --color-black: @crust; - --color-info: @blue; - --color-twitch-purple: @accent-color; - --color-twitch-purple-4: @accent-color; - --color-twitch-purple-5: @accent-color; - --color-twitch-purple-6: @accent-color; - --color-twitch-purple-7: @accent-color; - --color-twitch-purple-8: @accent-color; - --color-twitch-purple-9: @accent-color; - --color-twitch-purple-10: @accent-color; - --color-twitch-purple-11: @accent-color; - --color-twitch-purple-12: @accent-color; - --color-orange-7: @yellow; - --color-orange-8: @yellow; - --color-orange-9: @yellow; - --color-orange-10: @yellow; - --color-orange-11: @yellow; - --color-orange-12: @yellow; - --color-orange-13: @yellow; - --color-yellow-6: @peach; - --color-yellow-7: @peach; - --color-yellow-8: @peach; - --color-yellow-9: @peach; - --color-yellow-10: @peach; - --color-yellow-11: @peach; - --color-yellow-12: @peach; - --color-yellow-13: @peach; - --color-yellow-14: @peach; - --color-yellow-15: @peach; - --color-green-5: @green; - --color-green-6: @green; - --color-green-7: @green; - --color-green-8: @green; - --color-green-9: @green; - --color-green-10: @green; - --color-green-11: @green; - --color-green-12: @green; - --color-green-13: @green; - --color-green-14: @green; - --color-green-15: @teal; - --color-cyan-9: @sapphire; - --color-cyan-10: @sapphire; - --color-cyan-11: @sapphire; - --color-cyan-12: @sapphire; - --color-cyan-13: @sapphire; - --color-cyan-14: @sapphire; - --color-cyan-15: @sky; - --color-blue-4: @blue; - --color-blue-5: @blue; - --color-blue-6: @blue; - --color-blue-7: @blue; - --color-blue-8: @blue; - --color-blue-9: @blue; - --color-blue-10: @sky; - --color-blue-11: @sky; - --color-blue-14: @sky; - --color-magenta-5: @flamingo; - --color-magenta-6: @flamingo; - --color-magenta-7: @flamingo; - --color-magenta-8: @flamingo; - --color-magenta-9: @flamingo; - --color-magenta-10: @flamingo; - --color-magenta-11: @pink; - --color-magenta-12: @pink; - --color-magenta-14: @pink; - --color-red-4: @accent-color; - --color-red-5: @accent-color; - --color-red-6: @accent-color; - --color-red-7: @accent-color; - --color-red-8: @accent-color; - --color-red-9: @accent-color; - --color-red-10: @accent-color; - --color-red-11: @peach; - --color-red-12: @peach; - --color-red-14: @peach; - --color-twitter: @blue; - --color-facebook: @blue; - --color-reddit: @peach; - --color-snapchat: @yellow; - --color-instagram: @blue; - --color-youtube: @red; - --color-paypal: @blue; - --color-paypal-blue: @blue; - --color-paypal-yellow: @yellow; - --color-venmo: @blue; - --color-vk: @blue; - --color-amazon: @yellow; - --color-background-button-text-hover: @surface0; - --color-text-accessible-red: @accent-color; - --color-border-input-checkbox: @subtext0; - --color-border-input-checkbox-hover: @text; - --color-text-label: @text; - --color-border-input-hover: @surface0; - --color-opac-b-14: @crust; - --color-text-button-overlay: @text !important; - --color-background-progress: @surface0; - --color-background-range-overlay-fill: @text !important; - --color-text-button-overlay-hover: @text !important; - --color-text-tooltip: @base !important; - --color-background-tooltip: @text !important; - --color-hinted-grey-2: @surface0; - --color-hinted-grey-15: @text; - --color-background-overlay-alt: fade(@mantle, 60%); - --color-background-button-overlay-primary-hover: @subtext1; - --color-background-button-overlay-text-hover: @crust; - --color-border-overlay: @surface0; - --color-background-button-disabled: @surface0; - --color-text-button-disabled: @subtext0; - --color-background-toggle-handle: @text; - --color-border-toggle: @text; - --color-border-toggle-hover: @text; - --color-background-toggle-checked: @mantle; - --color-background-input-checkbox-checked-background: @crust; - } - - --color-text-link: @accent-color; - --color-text-link-active: darken(@accent-color, 5%); - --color-text-link-focus: darken(@accent-color, 5%); - --color-text-link-hover: darken(@accent-color, 5%); - --color-text-link-visited: @accent-color; - - &, - [class*="ScAccentRegionCssVars"] { - --color-accent: @accent-color; - } - /* Hardcoded accent color */ - [style="color: rgb(160, 84, 255);"] { - color: @accent-color !important; - } - - /* Full screened video player title & description */ - - p[data-test-selector="stream-info-card-component__subtitle"], - p[data-test-selector="stream-info-card-component__description"] { - color: @text !important; - } - - /* `Pinned message` popup */ - - div.pinned-chat__pinned-by svg { - color: @text; - } - - p.pinned-chat__message { - span { - color: @text !important; - } - - a { - color: @accent-color; - } - } - - /* `Intended for certain audiences` label */ - - div[data-a-target="content-classification-warning-disclosure-overlay"] p { - color: @text !important; - } - - /* `Hype Train` popup */ - - div.hype-train-progress-bar-info-view__level-container p, - div.hype-train-approaching-view__leftSide p, - div.hype-train-expanded-layout p, - div.hype-train-expanded-layout svg { - color: @text; - } - - path[d="m18 17 4-4V2H6v15h4v4l4-4h4zM12 6h2v6h-2V6zm7 0h-2v6h2V6z"] { - fill: @mantle; - } - - /* `Is video buffering?` warning */ - - div.low-latency-notification { - p { - color: @text; - } - border-color: @accent-color; - } - - /* `Includes paid promotion` label */ - - div.disclosure-card { - p, - svg, - a { - color: @text; - } - background: fade(@mantle, 80%); - } - - /* Raiding popup */ - - div[data-test-selector="raid-banner"] { - color: @text; - } - - /* `Predict with Channel Points` popup */ - - div[data-test-selector="expanded-content"] p, - p[data-test-selector="community-prediction-highlight-header__top-predictors"], - p[data-test-selector="community-prediction-highlight-body__outcome-title"] { - color: @text; - } - - /* TODO: ensure that the poll does not default to this */ - div[data-test-selector="header-content"] p { - color: @text !important; - } - - div.channel-points-icon svg, - div[data-test-selector="header-content"] span, - div[data-test-selector="community-prediction-highlight-body__outcome-points"] - span { - color: @accent-color; - } - - button[data-test-selector="community-prediction-highlight-header__how-to-play"], - button[data-test-selector="community-prediction-highlight-header__terms-and-conditions"], - button[data-test-selector="community-prediction-highlight-header__send-feedback"], - button[data-test-selector="community-prediction-highlight-header__dismiss-message"] { - color: @text; - } - - /* ??? */ - - div.happening-now-disable-prompt p { - color: @text !important; - } - - /* Gifting sub popup */ - - div.mystery-gift-chat-banner { - span { - color: @accent-color; - } - - p { - color: @text; - } - } - - /* VOD metadata */ - - div.tw-media-card-stat { - color: @text; - } - - /* DMCA warning */ - - div.muted-segments-alert__content p { - color: @text; - } - - /* VOD time labels */ - - div.vod-seekbar-time-labels p { - color: @text !important; - } - - /* VOD timestamp */ - - div.vod-seekbar-preview-overlay__wrapper p { - color: @text !important; - } - - /* Seekbar segment */ - - div[data-test-selector="seekbar-interaction-area__interactionArea"] - span[data-test-selector="seekbar-segment__segment"] { - background: @accent-color !important; - } - - /* Seekbar DMCA muted segment */ - - div[data-test-selector="seekbar-interaction-area__interactionArea"] - span[data-test-selector="seekbar-segment__segment"][style*="background-color: rgba(212, 73, 73, 0.5);"] { - background: @red !important; - } - - /* Seekbar buffered segment */ - - div[data-test-selector="seekbar-interaction-area__interactionArea"] - span[data-test-selector="seekbar-segment__segment"][style*="background-color: rgba(255, 255, 255, 0.85);"] { - background: @overlay2 !important; - } - - /* Recent VOD title */ - - div.player-overlay-background h4 { - color: @subtext0 !important; - } - - a.offline-recommendations-video-card p { - color: @text; - } - - /* Offline screen follow panel */ - - div[data-test-selector="follow-panel-overlay"] p { - color: @text !important; - } - - div[data-test-selector="follow-panel-overlay"] button div { - color: @crust !important; - } - - /* Front page warning sign */ - - div.content-overlay-gate__content[data-a-target="player-overlay-content-gate"] - div.content-overlay-icon - svg { - color: @red; - } - - /* Front page age warning */ - - div.content-overlay-gate__content[data-a-target="player-overlay-content-gate"] - p.content-overlay-gate__allow-pointers { - color: @red !important; - } - - /* Front page age selector */ - - div[data-a-target="player-overlay-age-gate-form"] select { - color: @text; - } - - /* Following usercard */ - - div[data-a-target="user-card-modal"] p { - color: @text !important; - } - - /* Usercard mod log tabs */ - - .viewer-card-mod-drawer-tab--active { - box-shadow: 0 calc(var(--border-width-default) * -3) 0 @accent-color inset !important; - } - - /* Usercard header */ - - .viewer-card-header__overlay { - background-color: fade(@mantle, 60%) !important; - } - - /* PiP username */ - - div.mini-overlay__title span { - color: @text; - } - - /* Viewercard username */ - - div.viewer-card-header__display-name h4 { - color: @accent-color !important; - } - - /* Viewercard metadata */ - - div.viewer-card-header__display-name svg:not(button svg) { - color: @subtext1; - } - - div.viewer-card-header__display-name p { - color: @text !important; - } - - /* Extension name */ - - div[aria-describedby="popover-extensions-body"] h6 { - color: @text; - } - - /* Extension description */ - - div.extensions-popover-view-layout__body p { - color: @text; - } - - /* Extension service buttons */ - - div.extensions-popover-view-layout__body svg { - color: @subtext0; - } - - div.extensions-popover-view-layout__body div { - color: @text; - } - - /* Extension overlay */ - - .extension-view__iframe { - color-scheme: light; - } - - .carousel-metadata { - background: @crust; - } - .carousel-metadata--fadeout { - background: @crust; - } - .chat-line__timestamp { - color: @subtext0; - } - .chat-line__message-body--highlighted { - background-color: @accent-color; - color: @crust; - border-color: @accent-color; - } - .chat-scrollable-area__message-container { - background-color: @mantle; - } - .side-nav-card__link:hover { - background: @surface0 !important; - } - .footer { - background: @crust; - } - .whispers-list-item--selected, - .whispers-list-item:hover { - background-color: @surface0; - } - .thread-header__title-bar-container--focused { - background-color: @mantle; - } - .thread-header__title-bar-container { - background: @mantle; - } - .thread-header__click-area:focus .thread-header__title-bar-container { - background-color: @mantle; - } - .navigation-link { - color: @text; - - &:hover, - .active { - color: @accent-color; - } - } - .navigation-link__active-indicator { - background-color: @accent-color !important; - } - .chat-room { - background: @mantle; - } - div.pinned-chat__highlight-card div.highlight { - background: @mantle; - } - - .server-message-alert { - border-color: @red !important; - border-left-color: @red !important; - } - - .server-message-alert__icon { - color: @red !important; - } - - /* Predictions */ - .fixed-prediction-button { - color: @mantle !important; - - .channel-points-icon svg { - color: @mantle !important; - } - - &.fixed-prediction-button--disabled { - color: @text !important; - - .channel-points-icon svg { - color: @text !important; - } - } - } - [style*="rgb(255, 255, 255)"] { - color: @base !important; - .channel-root, - .channel-info-content, - .chat-author__display-name, - &[data-a-target="chat-message-username"], - &.message-author__display-name { - color: @text !important; - } - } - [style="color: rgb(56, 122, 255);"] { - color: @blue !important; - } - [style="color: rgb(245, 0, 155);"] { - color: @pink !important; - } - - /* FrankerFaceZ uptime timer */ - .ffz-il-tooltip__container { - .tw-c-text-overlay { - background-color: var(--color-background-overlay-alt) !important; - } - - p, - figure.ffz-i-flag { - color: @text; - } - } - - [data-a-target="preview-card-image-link"] when (@lookup = latte) { - --color-background-overlay-alt: fade(@text, 80%); - .tw-media-card-stat, - p, - figure.ffz-i-flag { - color: @base; - } - } - - /* VOD chapters */ - .preview-card-game-balloon__content .tw-interactable:hover { - p, - figure { - color: @text !important; - } - .media-row__image-play-overlay { - background-color: fade(@base, 80%) !important; - } - } - - .fixed-prediction-button--blue, - [style*="background-color: rgb(56, 122, 255);"], - [style*="background: rgb(56, 122, 255);"] { - background-color: @blue !important; - } - .fixed-prediction-button--pink, - [style*="background-color: rgb(245, 0, 155);"], - [style*="background: rgb(245, 0, 155);"] { - background-color: @pink !important; - } - - input[disabled] { - background-color: @surface0; - } - .chat-wysiwyg-input__placeholder { - color: @subtext0; - } - - button[aria-label="Play"], - button[aria-label="Pause"] { - + div svg { - color: @subtext0; - } - } - - [data-a-target="video-ad-label"], - [data-a-target="video-ad-countdown"] { - color: @text !important; - } - - /* Override for logo icon */ - .tw-animated-glitch-logo { - --color-white: @crust; - } - - /* Modals */ - .modal__content { - color: @text; - } - - /* Leaderboard highlighted username */ - .bits-leaderboard-expanded-top-three-entry__marquee-username, - .channel-leaderboard-header-runner-up-entry__username, - .bits-leaderboard-expanded-top-three-entry__username { - div { - color: @base !important; - } - } - - .channel-leaderboard-header-rotating__expand-grabber { - background: @surface0 !important; - } - - /* Privacy center */ - - .privacy-center-root__number-item { - background: @accent-color; - color: @base; - } - - .privacy-center-accordion { - border-color: @accent-color; - } - - .privacy-center-home-tabs { - color: @base !important; - &[aria-selected="true"], - &:hover { - color: @surface1 !important; - } - } - - .home-page__title-container, - .tw-responsive-wrapper { - svg path { - &[fill="#fff"], - &[fill="#FFF"] { - fill: transparent !important; - } - } - } - - .home-page__title { - color: @base !important; - } - - .tw-balloon { - .tw-callout-message__title { - color: var(--color-text-variable) !important; - } - - .tw-callout__close div.tw-svg { - fill: var(--color-text-variable) !important; - } - } - - /* Home page tips and analytics */ - - .analytics-tip-card, - .creator-home-card__icon .creator-home-card__icon-svg { - color: @base !important; - button { - color: @base !important; - } - } - - .creator-home-welcome-title__overlay-text, - .analytics-highlights-chart-tooltip__label--dark { - color: @base !important; - } - - .creator-home-focus-position { - background: linear-gradient(@accent-color, @base); - } - - /* Shield mode tray */ - - .shield-mode-icon svg path { - fill: @peach; - } - - .tray-highlight, - .chat-input-highlight, - .shield-mode-shortcut__btn { - border-color: @peach !important; - } - - /* Shield mode mod view button */ - - .shield-mode-shortcut__inner, - .shield-mode-view-toggle--active { - color: @base; - background: @peach; - } - - /* Channel points reward cost */ - - .reward-icon__cost { - color: @text !important; - background: fade(@mantle, 60%) !important; - } - - /* Directory banner */ - - .directory-header-new__banner-cover { - background: linear-gradient(0deg, @base, fade(@mantle, 25%)), - linear-gradient(90deg, @base, fade(@mantle, 25%)); - } - - .home-video * { - color: @text !important; - } - - /* Cookies and Advertising Choices */ - - .top-bar--pointer-enabled .consent-banner__content--gdpr-v2, - .consent-banner { - a, - button { - color: @base !important; - } - - button:not([data-a-target="consent-banner-accept"]) { - background-color: fade(@base, 10%); - } - } - - /* Mod view changelog shadow */ - - .mod-view-whats-new-list--more-posts-to-see::after { - background-image: linear-gradient(transparent, @mantle); - } - - /* Unban requests */ - - .unban-requests-tabs__load-previous { - background-image: linear-gradient(@mantle, fade(@mantle, 0%)); - } - - .unban-requests-action-button__selected { - color: @base !important; - background: @accent-color; - } - - .unban-requests-tabs__load-previous > div { - background: @surface0; - } - - /* Timestamps, mod actions and deleted messages */ - - .targeted-mod-action, - .message__timestamp, - .vcml-message__timestamp, - .chat-line__message--deleted { - color: @subtext0; - } - - /* Suspicious user banner in usercard */ - - .low-trust-user-banner div { - color: @text !important; - } - - /* Emote preview */ - - .chat-input__preview__text { - color: @base !important; - } - - /* Twitch logo in onboarding screen */ - - .onboarding-modal-splash-screen__container { - svg path[fill="#fff"] { - fill: transparent !important; - } - } - - /* Stream category subtitle in onboarding screen */ - - .onboarding-modal-main-list-live-channels-live-channel-card__sub-title { - color: @subtext0 !important; - } - - /* Subscriptions */ - - .tier-display { - color: @mauve; - } - - .tier-display__prime { - color: @blue; - } - - .sub-badge-progress p, - .sub-badge-progress__all-badges--text, - .expired-sub-message { - color: @subtext0 !important; - } - - /* Clips timestamp */ - - .player-controls, - .clips-player-seekbar-container { - .tw-balloon p { - color: @text !important; - } - } - - .sunlight-modal__content { - color: @text !important; - } - - .tw-loading-spinner { - color: @text; - } - - .player-overlay-background { - div, - div p { - color: @text !important; - } - & when (@lookup = latte) { - div, - div p { - color: @base !important; - } - } - } - - .vertical-selector a:hover { - background: darken(@accent-color, 5%); - } - - /* Chat popouts */ - - div[data-test-selector="chat-private-callout-queue__callout-container"] { - .tw-callout__close > button { - color: @base !important; - } - div[data-a-target="tw-progress-bar-animation"] { - background: @base; - } - div.tw-progress-bar { - background: fade(@base, 10%); - } - button .tw-svg { - fill: @base; - } - } - - /* SUBtember subscribe button */ - - .gift-subtember-button { - background: @teal; - } - - .player-controls when (@lookup = latte) { - --color-text-button-overlay: @base !important; - --color-background-range-overlay-fill: @base !important; - --color-text-button-overlay-hover: @mantle !important; - } - - /* Clips watch live prompt */ - - .watch-live-prompt { - h5 { - color: @text !important; - } - h6 { - color: @subtext0 !important; - } - } - - .clips-top-nav-user { - .clips-top-nav-user__username, - .tw-svg { - color: @text !important; - } - } - } -} - -@-moz-document domain("dashboard.twitch.tv") { - .tw-root--theme-dark { - #catppuccin(@darkFlavor, @accentColor); - } - .tw-root--theme-light { - #catppuccin(@lightFlavor, @accentColor); - } - - #catppuccin(@lookup, @accent) { - @text: @catppuccin[@@lookup][@text]; - @green: @catppuccin[@@lookup][@green]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @surface0: @catppuccin[@@lookup][@surface0]; - @accent-color: @catppuccin[@@lookup][@@accent]; - - article button { - --color-fill-current: @base !important; - --color-background-button-overlay: @base !important; - --color-background-button-overlay-hover: @base !important; - --color-background-button-icon-overlay-hover: fade(@base, 13%); - --color-background-button-overlay-primary-hover: fade( - @base, - 13% - ) !important; - } - - .simplebar-content { - background-color: @mantle; - } - - .scrollable-area--suppress-scroll-x > .simplebar-scroll-content, - .scrollable-area--suppress-scroll-x - > .simplebar-scroll-content - > .simplebar-content { - background-color: @base; - } - - .sunlight-page .simplebar-scroll-content .simplebar-content { - background-color: @base; - } - .info_box_row { - background: @crust; - } - .info_box_row_label { - color: @text; - } - .video-card-thumbnail__video-state-overlay { - color: @text !important; - background: fade(@mantle, 80%) !important; - } - - /* Twitch alerts */ - - .alerts-home-main-wrapper { - color: @text !important; - } - - .alerts-home-scrollable-area, - .alert-boxes-section-border-container { - color: @text !important; - .simplebar-content { - background: @mantle !important; - } - .alert-set-card { - background: @crust !important; - } - } - - /* Analytics */ - - .top-stats-tab--active { - color: @accent-color !important; - box-shadow: 0 calc(var(--border-width-default) * -3) 0 @accent-color inset; - .top-stats-tab__title { - color: @accent-color !important; - } - } - - .top-stats-tab:hover { - box-shadow: - inset 0 -2px 0 @accent-color, - 0 4px 6px -4px @accent-color; - background: @base !important; - } - - /* Stream Manager */ - - .stream-manager--page-view { - .mosaic-tile .simplebar-content, - .stream-manager-edit-mode-item, - .stream-manager-edit-mode-stat-item { - background: @mantle !important; - } - } - - /* Autohost / managed channels list */ - - .dashboard-centered-page { - .simplebar-scroll-content, - .simplebar-content { - background: transparent !important; - } - - .autohost-list-item--hovered { - color: @text; - background: @base; - - button svg path { - fill: @text !important; - } - } - } - - /* Research */ - - .time-to-stream-tab--active { - box-shadow: 0 calc(var(--border-width-default) * -3) 0 @accent-color inset; - } - - /* Collection thumbnails */ - - .collection-preview-image__wrapper { - color: @text !important; - background: linear-gradient( - 90deg, - fade(@mantle, 0%), - fade(@mantle, 100%) 75% - ); - } - - /* AutoMod shadow */ - - .automod-level-controls__categories--bottom::after { - background-image: linear-gradient(fade(@mantle, 0%), @mantle); - } - - /* Tables */ - - .tw-table, - .tw-table-heading { - border-color: @surface0; - background: @crust; - } - - /* Achievements & activity page */ - - .ach-sb, - .activity-page__scrollable .simplebar-content { - background: @mantle !important; - } - - /* Clips player background */ - - .clips-player-container { - background: @crust; - } - - .clmgr-table__row:hover { - background: @surface0 !important; - } - - /* Announcements button */ - - .announcements-icon--green svg { - fill: @green !important; - } - } -} - -@-moz-document domain("dev.twitch.tv"), url-prefix("https://discuss.dev.twitch.com/embed/topics") -{ - @media (prefers-color-scheme: dark) { - :root { - #catppuccin(@darkFlavor, @accentColor); - } - } - @media (prefers-color-scheme: light) { - :root { - #catppuccin(@lightFlavor, @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]; - - --ctp-rosewater: @rosewater; - --ctp-flamingo: @flamingo; - --ctp-pink: @pink; - --ctp-mauve: @mauve; - --ctp-red: @red; - --ctp-maroon: @maroon; - --ctp-peach: @peach; - --ctp-yellow: @yellow; - --ctp-green: @green; - --ctp-teal: @teal; - --ctp-sky: @sky; - --ctp-sapphire: @sapphire; - --ctp-blue: @blue; - --ctp-lavender: @lavender; - --ctp-text: @text; - --ctp-subtext1: @subtext1; - --ctp-subtext0: @subtext0; - --ctp-overlay2: @overlay2; - --ctp-overlay1: @overlay1; - --ctp-overlay0: @overlay0; - --ctp-surface2: @surface2; - --ctp-surface1: @surface1; - --ctp-surface0: @surface0; - --ctp-base: @base; - --ctp-mantle: @mantle; - --ctp-crust: @crust; - - &, - body { - color: @text !important; - background: @base; - --primary-medium: @text; - --primary-low: @surface0; - scrollbar-color: @surface0 @mantle; - } - - a.btn, - button.btn { - border-color: @accent-color; - background: @accent-color !important; - color: @base !important; - } - - a.btn:hover, - button.btn:hover { - background: fade(@accent-color, 80%) !important; - } - - /* Recent announcements */ - .topics-list .topic-list-item .main-link a { - color: @accent-color; - } - - .topic-created-at, - .topic-last-posted-at, - .topic-like-count, - .topic-post-count { - color: @subtext0 !important; - } - - /* Header */ - .nav__container, - .dev-top-nav { - background: @crust !important; - - .tw-link, - .dev-top-nav__nav-items-container { - color: @text !important; - background: @crust !important; - } - .online { - border-color: @crust !important; - } - a.btn.light { - background: fade(@accent-color, 10%) !important; - color: @text !important; - } - .nav__links a { - color: @text; - - &:hover { - color: @subtext0; - } - &.active { - color: @accent-color; - border-color: @accent-color; - } - } - .nav__logo svg path { - fill: @text; - } - } - - /* Footers */ - .footer, - .dev-footer, - .subscribe-footer { - h5, - p, - a, - div { - color: @text !important; - } - a:hover { - color: @accent-color !important; - } - - svg path { - fill: @text !important; - } - - background: @crust; - } - - .bright-cta { - * { - color: @mantle !important; - } - background: @accent-color; - } - .content-alternate-2 { - background: @base; - } - - .sandbox-tab { - color: @text !important; - } - - .why-twitch ul li { - background: @base; - border-color: @surface0 !important; - } - - .sandbox-tab.active { - color: @accent-color !important; - border-color: @accent-color !important; - } - - .hero, - .extension-cta, - .subscribe-footer { - background: @mantle; - } - - thead tr th { - border-color: @surface0; - background: @mantle; - } - - tbody tr td { - border-color: @surface0; - } - - tbody tr:nth-child(odd) { - background: @base !important; - } - tbody tr:nth-child(even) { - background: @mantle !important; - } - - h1, - h2, - h3, - h4, - h5, - h6, - hr { - color: @text !important; - border-color: @surface0 !important; - } - - .right-code { - p { - color: @subtext0; - } - } - - blockquote { - border-color: @accent-color; - background: @mantle; - } - - .content, - .main, - .topics-list, - .doc-content { - background: @base; - border-color: @base !important; - a { - color: @accent-color; - } - border-bottom-color: @surface0 !important; - border-image: none; - -webkit-border-image: none; - } - - code { - border-color: @accent-color !important; - background: fade(@accent-color, 5%) !important; - color: @text !important; - } - - /* Code */ - .right-code pre, - pre.highlight, - pre { - border-color: @mantle !important; - background: @mantle !important; - code { - background: transparent !important; - color: @text !important; - } - } - - /* Pills */ - .pill-new { - color: @base !important; - background: @accent-color !important; - } - .pill-beta { - color: @base !important; - background: @yellow !important; - } - - /* Navbar */ - .sidebar { - background: @mantle !important; - dl { - border-color: @base !important; - } - dt a, - dl dd a { - color: @text !important; - } - dl dd a.active-highlight { - color: @accent-color !important; - } - dl dd a.active-highlight::before { - border-left-color: @accent-color !important; - } - dt a:hover { - background: @base !important; - } - - /* Search */ - - input { - color: @text; - &::placeholder { - color: @subtext0; - } - &:focus { - background: @crust !important; - box-shadow: 0 0 3px 1px fade(@accent-color, 70%); - color: @text; - } - } - - .search-icon svg path { - fill: @text !important; - } - - .algolia-autocomplete { - .algolia-docsearch-suggestion--category-header { - color: @text !important; - background: @mantle !important; - border-color: @base !important; - } - - .algolia-docsearch-suggestion--highlight { - background: @accent-color !important; - color: @base !important; - } - - .algolia-docsearch-suggestion--content { - background: @mantle !important; - } - - .algolia-docsearch-suggestion--title { - color: @text !important; - } - - .algolia-docsearch-suggestion--text { - color: @subtext0 !important; - } - - .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content { - .algolia-docsearch-suggestion--title, - .algolia-docsearch-suggestion--text { - background: @crust !important; - .algolia-docsearch-suggestion--highlight { - background: @base !important; - } - } - } - } - } - - ul.grid li.story { - h4 a, - a.btn { - color: @text !important; - } - a { - color: @accent-color !important; - } - .story__links a { - color: @base !important; - } - - border-color: @surface0; - } - - .submission .relative .outer { - svg path { - fill: @text; - } - button { - border-color: @accent-color !important; - } - - .tag button { - background: @accent-color !important; - border-color: @accent-color !important; - } - - .author { - color: @subtext0 !important; - } - background: @mantle; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/twitch/catppuccin.user.less b/styles/twitch/catppuccin.user.less new file mode 100644 index 0000000000..0cfc2c3591 --- /dev/null +++ b/styles/twitch/catppuccin.user.less @@ -0,0 +1,1552 @@ +/* ==UserStyle== +@name Twitch Catppuccin +@namespace github.com/catppuccin/userstyles/styles/twitch +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/twitch +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/twitch/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atwitch +@description Soothing pastel theme for Twitch +@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("twitch.tv") { + @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); + + .tw-root--theme-dark { + #catppuccin(@darkFlavor, @accentColor); + } + .tw-root--theme-light { + #catppuccin(@lightFlavor, @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; + } + + &, + .tw-dialog-layer { + --color-background-input-focus: @crust; + --color-background-interactable-hover: @surface0; + --color-background-interactable-alpha-hover: @surface0; + --color-background-interactable-active: @surface1; + --color-background-button-secondary-active: @surface1; + --color-background-button-text-default: null !important; + --color-background-pill-subtle: @subtext0; + --color-background-placeholder: @surface0; + --color-background-selectable: @surface0; + --color-text-input-placeholder: @text; + --color-border-input: @base; + --color-border-tab: @surface0; + --color-text-button-primary: @crust; + --color-text-overlay: @base; + --color-text-base: @subtext1; + --color-text-alt: @text; + --color-text-alt-2: @text; + --color-text-interactable-selected: @crust; + --color-background-alt-2: @crust; + --color-text-tag: @text; + --color-background-button-secondary-default: @crust; + --color-background-button-secondary-hover: @surface0; + --color-background-button-overlay-secondary-default: fade(@text, 13%); + --color-background-tag-default: @mantle; + --color-background-tag-hover: @crust; + --color-background-float: @mantle; + --color-background-body: @base; + --color-background-base: @mantle; + --color-background-alt: @mantle; + --color-background-input: @crust; + --color-brand-muted-cupcake: @pink; + --color-brand-muted-mint: @green; + --color-brand-muted-sky: @sky; + --color-brand-muted-blush: @peach; + --color-brand-muted-canary: @peach; + --color-brand-muted-lavender: @lavender; + --color-brand-muted-mustard: @yellow; + --color-brand-muted-emerald: @green; + --color-brand-muted-coral: @peach; + --color-brand-muted-ocean: @blue; + --color-brand-accent-grape: @mauve; + --color-brand-accent-dragonfruit: @flamingo; + --color-brand-accent-carrot: @peach; + --color-brand-accent-sun: @peach; + --color-brand-accent-lime: @green; + --color-brand-accent-turquoise: @sky; + --color-brand-accent-eggplant: @mauve; + --color-brand-accent-wine: @flamingo; + --color-brand-accent-slime: @green; + --color-brand-accent-seafoam: @green; + --color-brand-accent-cherry: @red; + --color-brand-accent-marine: @blue; + --color-brand-accent-seaweed: @teal; + --color-brand-accent-fiji: @green; + --color-brand-accent-blueberry: @blue; + --color-brand-accent-arctic: @sky; + --color-brand-accent-highlighter: @yellow; + --color-brand-accent-flamingo: @flamingo; + --color-brand-accent-ruby: @red; + --color-brand-accent-punch: @flamingo; + --color-brand-accent-creamsicle: @yellow; + --color-red: @maroon; + --color-red-darker: @red; + --color-orange: @peach; + --color-yellow: @yellow; + --color-green: @green; + --color-green-darker: @green; + --color-blue: @blue; + --color-prime-blue: @blue; + --color-magenta: @flamingo; + --color-error: @red; + --color-warn: @yellow; + --color-success: @green; + --color-white: @text; + --color-black: @crust; + --color-info: @blue; + --color-twitch-purple: @accent-color; + --color-twitch-purple-4: @accent-color; + --color-twitch-purple-5: @accent-color; + --color-twitch-purple-6: @accent-color; + --color-twitch-purple-7: @accent-color; + --color-twitch-purple-8: @accent-color; + --color-twitch-purple-9: @accent-color; + --color-twitch-purple-10: @accent-color; + --color-twitch-purple-11: @accent-color; + --color-twitch-purple-12: @accent-color; + --color-orange-7: @yellow; + --color-orange-8: @yellow; + --color-orange-9: @yellow; + --color-orange-10: @yellow; + --color-orange-11: @yellow; + --color-orange-12: @yellow; + --color-orange-13: @yellow; + --color-yellow-6: @peach; + --color-yellow-7: @peach; + --color-yellow-8: @peach; + --color-yellow-9: @peach; + --color-yellow-10: @peach; + --color-yellow-11: @peach; + --color-yellow-12: @peach; + --color-yellow-13: @peach; + --color-yellow-14: @peach; + --color-yellow-15: @peach; + --color-green-5: @green; + --color-green-6: @green; + --color-green-7: @green; + --color-green-8: @green; + --color-green-9: @green; + --color-green-10: @green; + --color-green-11: @green; + --color-green-12: @green; + --color-green-13: @green; + --color-green-14: @green; + --color-green-15: @teal; + --color-cyan-9: @sapphire; + --color-cyan-10: @sapphire; + --color-cyan-11: @sapphire; + --color-cyan-12: @sapphire; + --color-cyan-13: @sapphire; + --color-cyan-14: @sapphire; + --color-cyan-15: @sky; + --color-blue-4: @blue; + --color-blue-5: @blue; + --color-blue-6: @blue; + --color-blue-7: @blue; + --color-blue-8: @blue; + --color-blue-9: @blue; + --color-blue-10: @sky; + --color-blue-11: @sky; + --color-blue-14: @sky; + --color-magenta-5: @flamingo; + --color-magenta-6: @flamingo; + --color-magenta-7: @flamingo; + --color-magenta-8: @flamingo; + --color-magenta-9: @flamingo; + --color-magenta-10: @flamingo; + --color-magenta-11: @pink; + --color-magenta-12: @pink; + --color-magenta-14: @pink; + --color-red-4: @accent-color; + --color-red-5: @accent-color; + --color-red-6: @accent-color; + --color-red-7: @accent-color; + --color-red-8: @accent-color; + --color-red-9: @accent-color; + --color-red-10: @accent-color; + --color-red-11: @peach; + --color-red-12: @peach; + --color-red-14: @peach; + --color-twitter: @blue; + --color-facebook: @blue; + --color-reddit: @peach; + --color-snapchat: @yellow; + --color-instagram: @blue; + --color-youtube: @red; + --color-paypal: @blue; + --color-paypal-blue: @blue; + --color-paypal-yellow: @yellow; + --color-venmo: @blue; + --color-vk: @blue; + --color-amazon: @yellow; + --color-background-button-text-hover: @surface0; + --color-text-accessible-red: @accent-color; + --color-border-input-checkbox: @subtext0; + --color-border-input-checkbox-hover: @text; + --color-text-label: @text; + --color-border-input-hover: @surface0; + --color-opac-b-14: @crust; + --color-text-button-overlay: @text !important; + --color-background-progress: @surface0; + --color-background-range-overlay-fill: @text !important; + --color-text-button-overlay-hover: @text !important; + --color-text-tooltip: @base !important; + --color-background-tooltip: @text !important; + --color-hinted-grey-2: @surface0; + --color-hinted-grey-15: @text; + --color-background-overlay-alt: fade(@mantle, 60%); + --color-background-button-overlay-primary-hover: @subtext1; + --color-background-button-overlay-text-hover: @crust; + --color-border-overlay: @surface0; + --color-background-button-disabled: @surface0; + --color-text-button-disabled: @subtext0; + --color-background-toggle-handle: @text; + --color-border-toggle: @text; + --color-border-toggle-hover: @text; + --color-background-toggle-checked: @mantle; + --color-background-input-checkbox-checked-background: @crust; + } + + --color-text-link: @accent-color; + --color-text-link-active: darken(@accent-color, 5%); + --color-text-link-focus: darken(@accent-color, 5%); + --color-text-link-hover: darken(@accent-color, 5%); + --color-text-link-visited: @accent-color; + + &, + [class*="ScAccentRegionCssVars"] { + --color-accent: @accent-color; + } + /* Hardcoded accent color */ + [style="color: rgb(160, 84, 255);"] { + color: @accent-color !important; + } + + /* Full screened video player title & description */ + + p[data-test-selector="stream-info-card-component__subtitle"], + p[data-test-selector="stream-info-card-component__description"] { + color: @text !important; + } + + /* `Pinned message` popup */ + + div.pinned-chat__pinned-by svg { + color: @text; + } + + p.pinned-chat__message { + span { + color: @text !important; + } + + a { + color: @accent-color; + } + } + + /* `Intended for certain audiences` label */ + + div[data-a-target="content-classification-warning-disclosure-overlay"] p { + color: @text !important; + } + + /* `Hype Train` popup */ + + div.hype-train-progress-bar-info-view__level-container p, + div.hype-train-approaching-view__leftSide p, + div.hype-train-expanded-layout p, + div.hype-train-expanded-layout svg { + color: @text; + } + + path[d="m18 17 4-4V2H6v15h4v4l4-4h4zM12 6h2v6h-2V6zm7 0h-2v6h2V6z"] { + fill: @mantle; + } + + /* `Is video buffering?` warning */ + + div.low-latency-notification { + p { + color: @text; + } + border-color: @accent-color; + } + + /* `Includes paid promotion` label */ + + div.disclosure-card { + p, + svg, + a { + color: @text; + } + background: fade(@mantle, 80%); + } + + /* Raiding popup */ + + div[data-test-selector="raid-banner"] { + color: @text; + } + + /* `Predict with Channel Points` popup */ + + div[data-test-selector="expanded-content"] p, + p[data-test-selector="community-prediction-highlight-header__top-predictors"], + p[data-test-selector="community-prediction-highlight-body__outcome-title"] { + color: @text; + } + + /* TODO: ensure that the poll does not default to this */ + div[data-test-selector="header-content"] p { + color: @text !important; + } + + div.channel-points-icon svg, + div[data-test-selector="header-content"] span, + div[data-test-selector="community-prediction-highlight-body__outcome-points"] + span { + color: @accent-color; + } + + button[data-test-selector="community-prediction-highlight-header__how-to-play"], + button[data-test-selector="community-prediction-highlight-header__terms-and-conditions"], + button[data-test-selector="community-prediction-highlight-header__send-feedback"], + button[data-test-selector="community-prediction-highlight-header__dismiss-message"] { + color: @text; + } + + /* ??? */ + + div.happening-now-disable-prompt p { + color: @text !important; + } + + /* Gifting sub popup */ + + div.mystery-gift-chat-banner { + span { + color: @accent-color; + } + + p { + color: @text; + } + } + + /* VOD metadata */ + + div.tw-media-card-stat { + color: @text; + } + + /* DMCA warning */ + + div.muted-segments-alert__content p { + color: @text; + } + + /* VOD time labels */ + + div.vod-seekbar-time-labels p { + color: @text !important; + } + + /* VOD timestamp */ + + div.vod-seekbar-preview-overlay__wrapper p { + color: @text !important; + } + + /* Seekbar segment */ + + div[data-test-selector="seekbar-interaction-area__interactionArea"] + span[data-test-selector="seekbar-segment__segment"] { + background: @accent-color !important; + } + + /* Seekbar DMCA muted segment */ + + div[data-test-selector="seekbar-interaction-area__interactionArea"] + span[data-test-selector="seekbar-segment__segment"][style*="background-color: rgba(212, 73, 73, 0.5);"] { + background: @red !important; + } + + /* Seekbar buffered segment */ + + div[data-test-selector="seekbar-interaction-area__interactionArea"] + span[data-test-selector="seekbar-segment__segment"][style*="background-color: rgba(255, 255, 255, 0.85);"] { + background: @overlay2 !important; + } + + /* Recent VOD title */ + + div.player-overlay-background h4 { + color: @subtext0 !important; + } + + a.offline-recommendations-video-card p { + color: @text; + } + + /* Offline screen follow panel */ + + div[data-test-selector="follow-panel-overlay"] p { + color: @text !important; + } + + div[data-test-selector="follow-panel-overlay"] button div { + color: @crust !important; + } + + /* Front page warning sign */ + + div.content-overlay-gate__content[data-a-target="player-overlay-content-gate"] + div.content-overlay-icon + svg { + color: @red; + } + + /* Front page age warning */ + + div.content-overlay-gate__content[data-a-target="player-overlay-content-gate"] + p.content-overlay-gate__allow-pointers { + color: @red !important; + } + + /* Front page age selector */ + + div[data-a-target="player-overlay-age-gate-form"] select { + color: @text; + } + + /* Following usercard */ + + div[data-a-target="user-card-modal"] p { + color: @text !important; + } + + /* Usercard mod log tabs */ + + .viewer-card-mod-drawer-tab--active { + box-shadow: 0 calc(var(--border-width-default) * -3) 0 @accent-color inset + !important; + } + + /* Usercard header */ + + .viewer-card-header__overlay { + background-color: fade(@mantle, 60%) !important; + } + + /* PiP username */ + + div.mini-overlay__title span { + color: @text; + } + + /* Viewercard username */ + + div.viewer-card-header__display-name h4 { + color: @accent-color !important; + } + + /* Viewercard metadata */ + + div.viewer-card-header__display-name svg:not(button svg) { + color: @subtext1; + } + + div.viewer-card-header__display-name p { + color: @text !important; + } + + /* Extension name */ + + div[aria-describedby="popover-extensions-body"] h6 { + color: @text; + } + + /* Extension description */ + + div.extensions-popover-view-layout__body p { + color: @text; + } + + /* Extension service buttons */ + + div.extensions-popover-view-layout__body svg { + color: @subtext0; + } + + div.extensions-popover-view-layout__body div { + color: @text; + } + + /* Extension overlay */ + + .extension-view__iframe { + color-scheme: light; + } + + .carousel-metadata { + background: @crust; + } + .carousel-metadata--fadeout { + background: @crust; + } + .chat-line__timestamp { + color: @subtext0; + } + .chat-line__message-body--highlighted { + background-color: @accent-color; + color: @crust; + border-color: @accent-color; + } + .chat-scrollable-area__message-container { + background-color: @mantle; + } + .side-nav-card__link:hover { + background: @surface0 !important; + } + .footer { + background: @crust; + } + .whispers-list-item--selected, + .whispers-list-item:hover { + background-color: @surface0; + } + .thread-header__title-bar-container--focused { + background-color: @mantle; + } + .thread-header__title-bar-container { + background: @mantle; + } + .thread-header__click-area:focus .thread-header__title-bar-container { + background-color: @mantle; + } + .navigation-link { + color: @text; + + &:hover, + .active { + color: @accent-color; + } + } + .navigation-link__active-indicator { + background-color: @accent-color !important; + } + .chat-room { + background: @mantle; + } + div.pinned-chat__highlight-card div.highlight { + background: @mantle; + } + + .server-message-alert { + border-color: @red !important; + border-left-color: @red !important; + } + + .server-message-alert__icon { + color: @red !important; + } + + /* Predictions */ + .fixed-prediction-button { + color: @mantle !important; + + .channel-points-icon svg { + color: @mantle !important; + } + + &.fixed-prediction-button--disabled { + color: @text !important; + + .channel-points-icon svg { + color: @text !important; + } + } + } + [style*="rgb(255, 255, 255)"] { + color: @base !important; + .channel-root, + .channel-info-content, + .chat-author__display-name, + &[data-a-target="chat-message-username"], + &.message-author__display-name { + color: @text !important; + } + } + [style="color: rgb(56, 122, 255);"] { + color: @blue !important; + } + [style="color: rgb(245, 0, 155);"] { + color: @pink !important; + } + + /* FrankerFaceZ uptime timer */ + .ffz-il-tooltip__container { + .tw-c-text-overlay { + background-color: var(--color-background-overlay-alt) !important; + } + + p, + figure.ffz-i-flag { + color: @text; + } + } + + [data-a-target="preview-card-image-link"] when (@lookup = latte) { + --color-background-overlay-alt: fade(@text, 80%); + .tw-media-card-stat, + p, + figure.ffz-i-flag { + color: @base; + } + } + + /* VOD chapters */ + .preview-card-game-balloon__content .tw-interactable:hover { + p, + figure { + color: @text !important; + } + .media-row__image-play-overlay { + background-color: fade(@base, 80%) !important; + } + } + + .fixed-prediction-button--blue, + [style*="background-color: rgb(56, 122, 255);"], + [style*="background: rgb(56, 122, 255);"] { + background-color: @blue !important; + } + .fixed-prediction-button--pink, + [style*="background-color: rgb(245, 0, 155);"], + [style*="background: rgb(245, 0, 155);"] { + background-color: @pink !important; + } + + input[disabled] { + background-color: @surface0; + } + .chat-wysiwyg-input__placeholder { + color: @subtext0; + } + + button[aria-label="Play"], + button[aria-label="Pause"] { + + div svg { + color: @subtext0; + } + } + + [data-a-target="video-ad-label"], + [data-a-target="video-ad-countdown"] { + color: @text !important; + } + + /* Override for logo icon */ + .tw-animated-glitch-logo { + --color-white: @crust; + } + + /* Modals */ + .modal__content { + color: @text; + } + + /* Leaderboard highlighted username */ + .bits-leaderboard-expanded-top-three-entry__marquee-username, + .channel-leaderboard-header-runner-up-entry__username, + .bits-leaderboard-expanded-top-three-entry__username { + div { + color: @base !important; + } + } + + .channel-leaderboard-header-rotating__expand-grabber { + background: @surface0 !important; + } + + /* Privacy center */ + + .privacy-center-root__number-item { + background: @accent-color; + color: @base; + } + + .privacy-center-accordion { + border-color: @accent-color; + } + + .privacy-center-home-tabs { + color: @base !important; + &[aria-selected="true"], + &:hover { + color: @surface1 !important; + } + } + + .home-page__title-container, + .tw-responsive-wrapper { + svg path { + &[fill="#fff"], + &[fill="#FFF"] { + fill: transparent !important; + } + } + } + + .home-page__title { + color: @base !important; + } + + .tw-balloon { + .tw-callout-message__title { + color: var(--color-text-variable) !important; + } + + .tw-callout__close div.tw-svg { + fill: var(--color-text-variable) !important; + } + } + + /* Home page tips and analytics */ + + .analytics-tip-card, + .creator-home-card__icon .creator-home-card__icon-svg { + color: @base !important; + button { + color: @base !important; + } + } + + .creator-home-welcome-title__overlay-text, + .analytics-highlights-chart-tooltip__label--dark { + color: @base !important; + } + + .creator-home-focus-position { + background: linear-gradient(@accent-color, @base); + } + + /* Shield mode tray */ + + .shield-mode-icon svg path { + fill: @peach; + } + + .tray-highlight, + .chat-input-highlight, + .shield-mode-shortcut__btn { + border-color: @peach !important; + } + + /* Shield mode mod view button */ + + .shield-mode-shortcut__inner, + .shield-mode-view-toggle--active { + color: @base; + background: @peach; + } + + /* Channel points reward cost */ + + .reward-icon__cost { + color: @text !important; + background: fade(@mantle, 60%) !important; + } + + /* Directory banner */ + + .directory-header-new__banner-cover { + background: + linear-gradient(0deg, @base, fade(@mantle, 25%)), + linear-gradient(90deg, @base, fade(@mantle, 25%)); + } + + .home-video * { + color: @text !important; + } + + /* Cookies and Advertising Choices */ + + .top-bar--pointer-enabled .consent-banner__content--gdpr-v2, + .consent-banner { + a, + button { + color: @base !important; + } + + button:not([data-a-target="consent-banner-accept"]) { + background-color: fade(@base, 10%); + } + } + + /* Mod view changelog shadow */ + + .mod-view-whats-new-list--more-posts-to-see::after { + background-image: linear-gradient(transparent, @mantle); + } + + /* Unban requests */ + + .unban-requests-tabs__load-previous { + background-image: linear-gradient(@mantle, fade(@mantle, 0%)); + } + + .unban-requests-action-button__selected { + color: @base !important; + background: @accent-color; + } + + .unban-requests-tabs__load-previous > div { + background: @surface0; + } + + /* Timestamps, mod actions and deleted messages */ + + .targeted-mod-action, + .message__timestamp, + .vcml-message__timestamp, + .chat-line__message--deleted { + color: @subtext0; + } + + /* Suspicious user banner in usercard */ + + .low-trust-user-banner div { + color: @text !important; + } + + /* Emote preview */ + + .chat-input__preview__text { + color: @base !important; + } + + /* Twitch logo in onboarding screen */ + + .onboarding-modal-splash-screen__container { + svg path[fill="#fff"] { + fill: transparent !important; + } + } + + /* Stream category subtitle in onboarding screen */ + + .onboarding-modal-main-list-live-channels-live-channel-card__sub-title { + color: @subtext0 !important; + } + + /* Subscriptions */ + + .tier-display { + color: @mauve; + } + + .tier-display__prime { + color: @blue; + } + + .sub-badge-progress p, + .sub-badge-progress__all-badges--text, + .expired-sub-message { + color: @subtext0 !important; + } + + /* Clips timestamp */ + + .player-controls, + .clips-player-seekbar-container { + .tw-balloon p { + color: @text !important; + } + } + + .sunlight-modal__content { + color: @text !important; + } + + .tw-loading-spinner { + color: @text; + } + + .player-overlay-background { + div, + div p { + color: @text !important; + } + & when (@lookup = latte) { + div, + div p { + color: @base !important; + } + } + } + + .vertical-selector a:hover { + background: darken(@accent-color, 5%); + } + + /* Chat popouts */ + + div[data-test-selector="chat-private-callout-queue__callout-container"] { + .tw-callout__close > button { + color: @base !important; + } + div[data-a-target="tw-progress-bar-animation"] { + background: @base; + } + div.tw-progress-bar { + background: fade(@base, 10%); + } + button .tw-svg { + fill: @base; + } + } + + /* SUBtember subscribe button */ + + .gift-subtember-button { + background: @teal; + } + + .player-controls when (@lookup = latte) { + --color-text-button-overlay: @base !important; + --color-background-range-overlay-fill: @base !important; + --color-text-button-overlay-hover: @mantle !important; + } + + /* Clips watch live prompt */ + + .watch-live-prompt { + h5 { + color: @text !important; + } + h6 { + color: @subtext0 !important; + } + } + + .clips-top-nav-user { + .clips-top-nav-user__username, + .tw-svg { + color: @text !important; + } + } + } +} + +@-moz-document domain("dashboard.twitch.tv") { + .tw-root--theme-dark { + #catppuccin(@darkFlavor, @accentColor); + } + .tw-root--theme-light { + #catppuccin(@lightFlavor, @accentColor); + } + + #catppuccin(@lookup, @accent) { + @text: @catppuccin[@@lookup][@text]; + @green: @catppuccin[@@lookup][@green]; + @base: @catppuccin[@@lookup][@base]; + @mantle: @catppuccin[@@lookup][@mantle]; + @crust: @catppuccin[@@lookup][@crust]; + @surface0: @catppuccin[@@lookup][@surface0]; + @accent-color: @catppuccin[@@lookup][@@accent]; + + article button { + --color-fill-current: @base !important; + --color-background-button-overlay: @base !important; + --color-background-button-overlay-hover: @base !important; + --color-background-button-icon-overlay-hover: fade(@base, 13%); + --color-background-button-overlay-primary-hover: fade( + @base, + 13% + ) !important; + } + + .simplebar-content { + background-color: @mantle; + } + + .scrollable-area--suppress-scroll-x > .simplebar-scroll-content, + .scrollable-area--suppress-scroll-x + > .simplebar-scroll-content + > .simplebar-content { + background-color: @base; + } + + .sunlight-page .simplebar-scroll-content .simplebar-content { + background-color: @base; + } + .info_box_row { + background: @crust; + } + .info_box_row_label { + color: @text; + } + .video-card-thumbnail__video-state-overlay { + color: @text !important; + background: fade(@mantle, 80%) !important; + } + + /* Twitch alerts */ + + .alerts-home-main-wrapper { + color: @text !important; + } + + .alerts-home-scrollable-area, + .alert-boxes-section-border-container { + color: @text !important; + .simplebar-content { + background: @mantle !important; + } + .alert-set-card { + background: @crust !important; + } + } + + /* Analytics */ + + .top-stats-tab--active { + color: @accent-color !important; + box-shadow: 0 calc(var(--border-width-default) * -3) 0 @accent-color + inset; + .top-stats-tab__title { + color: @accent-color !important; + } + } + + .top-stats-tab:hover { + box-shadow: inset 0 -2px 0 @accent-color, 0 4px 6px -4px @accent-color; + background: @base !important; + } + + /* Stream Manager */ + + .stream-manager--page-view { + .mosaic-tile .simplebar-content, + .stream-manager-edit-mode-item, + .stream-manager-edit-mode-stat-item { + background: @mantle !important; + } + } + + /* Autohost / managed channels list */ + + .dashboard-centered-page { + .simplebar-scroll-content, + .simplebar-content { + background: transparent !important; + } + + .autohost-list-item--hovered { + color: @text; + background: @base; + + button svg path { + fill: @text !important; + } + } + } + + /* Research */ + + .time-to-stream-tab--active { + box-shadow: 0 calc(var(--border-width-default) * -3) 0 @accent-color + inset; + } + + /* Collection thumbnails */ + + .collection-preview-image__wrapper { + color: @text !important; + background: linear-gradient( + 90deg, + fade(@mantle, 0%), + fade(@mantle, 100%) 75% + ); + } + + /* AutoMod shadow */ + + .automod-level-controls__categories--bottom::after { + background-image: linear-gradient(fade(@mantle, 0%), @mantle); + } + + /* Tables */ + + .tw-table, + .tw-table-heading { + border-color: @surface0; + background: @crust; + } + + /* Achievements & activity page */ + + .ach-sb, + .activity-page__scrollable .simplebar-content { + background: @mantle !important; + } + + /* Clips player background */ + + .clips-player-container { + background: @crust; + } + + .clmgr-table__row:hover { + background: @surface0 !important; + } + + /* Announcements button */ + + .announcements-icon--green svg { + fill: @green !important; + } + } +} + +@-moz-document domain("dev.twitch.tv"), + url-prefix("https://discuss.dev.twitch.com/embed/topics") { + @media (prefers-color-scheme: dark) { + :root { + #catppuccin(@darkFlavor, @accentColor); + } + } + @media (prefers-color-scheme: light) { + :root { + #catppuccin(@lightFlavor, @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]; + + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + + &, + body { + color: @text !important; + background: @base; + --primary-medium: @text; + --primary-low: @surface0; + scrollbar-color: @surface0 @mantle; + } + + a.btn, + button.btn { + border-color: @accent-color; + background: @accent-color !important; + color: @base !important; + } + + a.btn:hover, + button.btn:hover { + background: fade(@accent-color, 80%) !important; + } + + /* Recent announcements */ + .topics-list .topic-list-item .main-link a { + color: @accent-color; + } + + .topic-created-at, + .topic-last-posted-at, + .topic-like-count, + .topic-post-count { + color: @subtext0 !important; + } + + /* Header */ + .nav__container, + .dev-top-nav { + background: @crust !important; + + .tw-link, + .dev-top-nav__nav-items-container { + color: @text !important; + background: @crust !important; + } + .online { + border-color: @crust !important; + } + a.btn.light { + background: fade(@accent-color, 10%) !important; + color: @text !important; + } + .nav__links a { + color: @text; + + &:hover { + color: @subtext0; + } + &.active { + color: @accent-color; + border-color: @accent-color; + } + } + .nav__logo svg path { + fill: @text; + } + } + + /* Footers */ + .footer, + .dev-footer, + .subscribe-footer { + h5, + p, + a, + div { + color: @text !important; + } + a:hover { + color: @accent-color !important; + } + + svg path { + fill: @text !important; + } + + background: @crust; + } + + .bright-cta { + * { + color: @mantle !important; + } + background: @accent-color; + } + .content-alternate-2 { + background: @base; + } + + .sandbox-tab { + color: @text !important; + } + + .why-twitch ul li { + background: @base; + border-color: @surface0 !important; + } + + .sandbox-tab.active { + color: @accent-color !important; + border-color: @accent-color !important; + } + + .hero, + .extension-cta, + .subscribe-footer { + background: @mantle; + } + + thead tr th { + border-color: @surface0; + background: @mantle; + } + + tbody tr td { + border-color: @surface0; + } + + tbody tr:nth-child(odd) { + background: @base !important; + } + tbody tr:nth-child(even) { + background: @mantle !important; + } + + h1, + h2, + h3, + h4, + h5, + h6, + hr { + color: @text !important; + border-color: @surface0 !important; + } + + .right-code { + p { + color: @subtext0; + } + } + + blockquote { + border-color: @accent-color; + background: @mantle; + } + + .content, + .main, + .topics-list, + .doc-content { + background: @base; + border-color: @base !important; + a { + color: @accent-color; + } + border-bottom-color: @surface0 !important; + border-image: none; + -webkit-border-image: none; + } + + code { + border-color: @accent-color !important; + background: fade(@accent-color, 5%) !important; + color: @text !important; + } + + /* Code */ + .right-code pre, + pre.highlight, + pre { + border-color: @mantle !important; + background: @mantle !important; + code { + background: transparent !important; + color: @text !important; + } + } + + /* Pills */ + .pill-new { + color: @base !important; + background: @accent-color !important; + } + .pill-beta { + color: @base !important; + background: @yellow !important; + } + + /* Navbar */ + .sidebar { + background: @mantle !important; + dl { + border-color: @base !important; + } + dt a, + dl dd a { + color: @text !important; + } + dl dd a.active-highlight { + color: @accent-color !important; + } + dl dd a.active-highlight::before { + border-left-color: @accent-color !important; + } + dt a:hover { + background: @base !important; + } + + /* Search */ + + input { + color: @text; + &::placeholder { + color: @subtext0; + } + &:focus { + background: @crust !important; + box-shadow: 0 0 3px 1px fade(@accent-color, 70%); + color: @text; + } + } + + .search-icon svg path { + fill: @text !important; + } + + .algolia-autocomplete { + .algolia-docsearch-suggestion--category-header { + color: @text !important; + background: @mantle !important; + border-color: @base !important; + } + + .algolia-docsearch-suggestion--highlight { + background: @accent-color !important; + color: @base !important; + } + + .algolia-docsearch-suggestion--content { + background: @mantle !important; + } + + .algolia-docsearch-suggestion--title { + color: @text !important; + } + + .algolia-docsearch-suggestion--text { + color: @subtext0 !important; + } + + .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content { + .algolia-docsearch-suggestion--title, + .algolia-docsearch-suggestion--text { + background: @crust !important; + .algolia-docsearch-suggestion--highlight { + background: @base !important; + } + } + } + } + } + + ul.grid li.story { + h4 a, + a.btn { + color: @text !important; + } + a { + color: @accent-color !important; + } + .story__links a { + color: @base !important; + } + + border-color: @surface0; + } + + .submission .relative .outer { + svg path { + fill: @text; + } + button { + border-color: @accent-color !important; + } + + .tag button { + background: @accent-color !important; + border-color: @accent-color !important; + } + + .author { + color: @subtext0 !important; + } + background: @mantle; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/twitter/catppuccin.user.css b/styles/twitter/catppuccin.user.css index a95596b62a..998fc32eb5 100644 --- a/styles/twitter/catppuccin.user.css +++ b/styles/twitter/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Twitter Catppuccin +@name Twitter Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/twitter @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/twitter -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/twitter/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/twitter/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atwitter @description Soothing pastel theme for Twitter @author Catppuccin @@ -16,1027 +16,4 @@ @var checkbox colorizeLogo "Colorize Logo" 0 @var checkbox darkenShadows "Darken Shadows on Dark Themes" 1 -==/UserStyle== */ - -@-moz-document domain("twitter.com"), -domain("x.com") { - @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.LightsOut { - --border-color: @surface0; - --color: @overlay1; - --color-emphasis: @text; - --hover-bg-color: @surface0; - - // shadows - .r-qo02w8, - .r-15ce4ve { - @default-shadow: - fade(@text, 20%) 0 0 15px, - fade(@text, 15%) 0 0 3px 1px; - @black-shadow: - rgba(0, 0, 0, 0.4) 0 0 15px, - rgba(0, 0, 0, 0.35) 0 0 3px 1px; - - box-shadow: @default-shadow; - - & when (@darkenShadows = 1) { - box-shadow: if(@lookup=latte, @default-shadow, @black-shadow); - } - } - - .r-1tbvlxk { - @default-shadow: drop-shadow(fade(@text, 25%) 1px -1px 1px); - @black-shadow: drop-shadow(rgba(0, 0, 0, 0.5) 1px -1px 1px); - - filter: @default-shadow; - - & when (@darkenShadows = 1) { - filter: if(@lookup=latte, @default-shadow, @black-shadow); - } - } - - .r-1uusn97 { - @default-shadow: - fade(@text, 20%) 0 0 5px, - fade(@text, 15%) 0 1px 4px 1px; - @black-shadow: - rgba(0, 0, 0, 0.4) 0 0 5px, - rgba(0, 0, 0, 0.35) 0 1px 4px 1px; - - box-shadow: @default-shadow; - - & when (@darkenShadows = 1) { - box-shadow: if(@lookup=latte, @default-shadow, @black-shadow); - } - } - } - - body, - .PageContainer, - #placeholder { - background-color: @base !important; - color: @text; - } - - #ScriptLoadFailure span { - color: @text; - } - - [style*="scrollbar-color: rgb(62, 65, 68) rgb(22, 24, 28)"] { - scrollbar-color: @accent-color transparent !important; - scrollbar-width: thin; - } - - // bg color - [data-testid="primaryColumn"], - .r-kemksi { - background-color: @base; - } - - // arrow on account switcher - .r-cqee49 { - color: @base; - } - - // top nav bg color - .r-5zmot { - background-color: fade(@base, 75%); - } - - // element hover (when on base) - .r-1hdo0pc, - .r-pjtv4k { - background-color: fade(@text, 10%); - } - - // element active (when on base) - .r-11gmi9o { - background-color: fade(@text, 20%); - } - - .r-1cuuowz { - background-color: fade(@text, 3%); - } - - // text - .r-1nao33i { - color: @text; - } - - // white text, seems to appear on accent colors - .r-jwli3a { - color: if(@lookup=latte, #fff, @crust); - - // cw svg - &:has( - path[d="M3.693 21.707l-1.414-1.414 2.429-2.429c-2.479-2.421-3.606-5.376-3.658-5.513l-.131-.352.131-.352c.133-.353 3.331-8.648 10.937-8.648 2.062 0 3.989.621 5.737 1.85l2.556-2.557 1.414 1.414L3.693 21.707zm-.622-9.706c.356.797 1.354 2.794 3.051 4.449l2.417-2.418c-.361-.609-.553-1.306-.553-2.032 0-2.206 1.794-4 4-4 .727 0 1.424.192 2.033.554l2.263-2.264C14.953 5.434 13.512 5 11.986 5c-5.416 0-8.258 5.535-8.915 7.001zM11.986 10c-1.103 0-2 .897-2 2 0 .178.023.352.067.519l2.451-2.451c-.167-.044-.341-.067-.519-.067zm10.951 1.647l.131.352-.131.352c-.133.353-3.331 8.648-10.937 8.648-.709 0-1.367-.092-2-.223v-2.047c.624.169 1.288.27 2 .27 5.415 0 8.257-5.533 8.915-7-.252-.562-.829-1.724-1.746-2.941l1.438-1.438c1.53 1.971 2.268 3.862 2.33 4.027z"] - ) { - color: @text; - } - } - - // borders - .r-1kqtdi0, - .r-1roi411 { - border-color: @surface0; - } - - .r-1igl3o0 { - border-bottom-color: @surface0; - } - - .r-2sztyj { - border-top-color: @surface0; - } - - .r-1aihyag { - border-right-color: @surface0; - } - - .r-1wyyjkm { - border-left-color: @subtext0; // border when replying to a dm - } - - // is this post relevant to you? - .r-1ccsd61, - .r-xzxzvz { - border-color: @surface2; - } - - .r-gu4em3, - .r-1bnu78o, - .r-z32n2g, // search bar - .r-1m3jxhj { - background-color: @surface0; - } - - // base color border - .r-1xc7w19 { - border-color: @base; - } - - // active border for dms - .r-1pbtemp { - border-right-color: @accent-color; - } - - // accent color borders - .r-vhj8yc { - border-color: @accent-color; - } - - // magnifying glass in search bar - .r-1bwzh9t { - color: @overlay1; - } - - // right side content - .r-g2wdr4 { - background-color: @mantle; - } - - .r-14wv3jr { - border-color: @mantle; - } - - // bg color accent - .r-l5o3uw { - background-color: @accent-color; - - .r-jwli3a { - color: if(@lookup=latte, #fff, @crust); - } - } - - // accent element when hovered - .r-1vtznih { - background-color: darken(@accent-color, 10%); - - .r-jwli3a { - color: if(@lookup=latte, #fff, @crust); - } - } - - .r-1peqgm7 { - background-color: fade(@accent-color, 10%); - } - - // accent element when active - .r-yuvema { - background-color: darken(@accent-color, 15%); - - .r-jwli3a { - color: if(@lookup=latte, #fff, @crust); - } - } - - .r-r18ze4 { - background-color: fade(@accent-color, 20%); - } - - // white elements when hovered - .r-jc7xae { - background-color: darken(@text, 4%); - } - - // white elements when active - .r-6wtuen { - background-color: darken(@text, 8%); - } - - // tooltips - .r-1pr99xn { - background-color: @surface1; - } - - // new notifications - .r-1eltapf { - background-color: fade(@sapphire, 10%); - } - - // polls - .r-eok2q2 { - background-color: fade(@accent-color, 60%); - } - - // box shadow around active poll input box - .r-9cip40 { - box-shadow: @accent-color 0 0 0 1px; - } - - // spaces - .r-1blqq69 { - border-color: @mauve; - } - - // reactions on dms - .r-qazpri { - color: @overlay1; - } - - @keyframes r-1wvy3k1 { - 0% { - box-shadow: fade(@mauve, 40%) 0; - } - - 100% { - box-shadow: fade(@mauve, 0%) 0; - } - } - - [style="background-image: linear-gradient(61.63deg, rgb(45, 66, 255) -15.05%, rgb(156, 99, 250) 104.96%);"] { - background-image: linear-gradient( - 61.63deg, - @blue -15.05%, - @mauve 104.96% - ) !important; - } - - // tweet textbox placeholder - .draftjs-styles_0 .public-DraftEditorPlaceholder-root { - color: @overlay0; - } - - // who can reply? bg - .r-rgqbpe { - background-color: fade(@blue, 10%); - } - - // circles - .r-s224ru { - background-color: @green; - } - - .r-h7o7i8 { - background-color: fade(@green, 10%); - } - - // live indicator - .r-4nw3r4, - .r-1dgebii { - background-color: @red; - } - - // live border - .r-b5kvu3 { - border-color: @red; - } - - // red transparent bg (appears with "unfollow" hover) - .r-qqmkd0 { - background-color: fade(@red, 10%); - } - - // red bg on hover - .r-12d83nn { - background-color: darken(@red, 10%); - } - - // red bg when active - .r-oybae9 { - background-color: darken(@red, 15%); - } - - .r-11mg6pl { - border-color: if(@lookup=latte, #fff, @crust); // white border - } - - // mask over layer - .r-11z020y { - background-color: fade(desaturate(darken(@accent-color, 10%), 50%), 12%); - } - - // likes - [fill="rgb(249,22,127)"], - [fill="rgb(222,45,108)"], - g[clip-path="url(#__lottie_element_562)"] path, - [style="color: rgb(249, 24, 128);"] [viewBox="0 0 24 24"] path { - fill: @red !important; - } - - // likes when hover - .r-1krxqcr { - background-color: fade(@red, 10%); - } - - // likes when active - .r-uuique { - background-color: fade(@red, 20%); - } - - // heart svg on notifications page - .r-vkub15, - .r-9l7dzd { - color: @red; - } - - // bell svg on notifications page - .r-1cvl2hr { - color: @accent-color; - } - - // retweet svg on notifications page - .r-o6sn0f { - color: @green; - } - - // rt when hover - .r-15azkrj { - background-color: fade(@green, 10%); - } - - // rt when active - .r-1x669os { - background-color: fade(@green, 20%); - } - - // image won't load svg - [data-testid="card.wrapper"] - [d="M21.04 1.54L17.5 5.09c-.04-.02-.08-.03-.13-.04L14.3 3H9.7l-3 2H5C3.62 5 2.5 6.12 2.5 7.5v11c0 .46.12.88.34 1.25l-1.3 1.29 1.42 1.42 19.5-19.5-1.42-1.42zM13.7 5l2.33 1.56-2 1.99C13.44 8.2 12.74 8 12 8c-2.21 0-4 1.79-4 4 0 .74.2 1.44.55 2.03L4.5 18.09V7.5c0-.28.22-.5.5-.5h2.3l3-2h3.4zM12 10c.18 0 .35.02.52.07l-2.45 2.45c-.05-.17-.07-.34-.07-.52 0-1.1.9-2 2-2zm7 11H7.24l2-2H19c.28 0 .5-.22.5-.5V9h2v9.5c0 1.38-1.12 2.5-2.5 2.5z"] { - color: @overlay0; - } - - // cw button - .r-n94g0g { - background-color: fade(@text, 30%); // when hovered - } - - .r-z9i421 { - background-color: fade(@text, 27%); // when active - } - - .r-19130f6 { - background-color: @crust; // when hovered - } - - .r-l8tqsx { - background-color: fade(@text, 10%); // when active - } - - // lock svg when you try to write a commu note but can't - .r-3gvs5h { - background-color: @overlay1; - } - - // sunglasses commu note - .r-1fkb3t2 { - background-color: @surface1; - } - - // media player text - .r-jwli3a { - color: @text; - } - - .r-1kwlb9n { - background-color: fade(@red, 12%); - } - - // hard-coded shit - // ugly-ass twitter blue/premium bg. why. - [style*="https://abs.twimg.com/responsive-web/client-web/background-premiumplus-web"] - { - background-image: none !important; - background-color: @surface0; - } - - [stroke="#2F3336" i] { - stroke: @surface2 !important; - } - - [stroke="#1D9BF0" i], - [style*="stroke: rgb(29, 155, 240)"] { - stroke: @accent-color !important; - } - - [stroke="#FFD400" i] { - stroke: @yellow !important; - } - - [fill="#829AAB" i] { - fill: @overlay2 !important; - } - - // "we received your report" svg - [fill="#1DA1F2" i] { - fill: if(@lookup=latte, darken(@sky, 15%), darken(@sky, 30%)) !important; - } - - [fill="#78C6EE" i] { - fill: @sky !important; - } - - // yellow verified badge - [stop-color="#f4e72a" i], - [stop-color="#cd8105" i], - [stop-color="#cb7b00" i], - [stop-color="#f4ec26" i], - [stop-color="#f9e87f" i], - [stop-color="#e2b719" i] { - stop-color: @yellow !important; - } - - [fill="#d18800" i] { - fill: @yellow !important; - } - - // [fill="#333333" i] { - // fill: @crust !important; - // - // ~ [fill="white"] { - // fill: @text !important; - // } - // } - - [style*="border-color: rgb(83, 100, 113)"] { - border-color: @surface1 !important; - } - - [style*="border-color: rgb(51, 54, 57)"] { - border-color: @surface0 !important; - } - - [style*="border-color: rgb(103, 7, 15)"] { - border-color: fadeout(@red, 50%) !important; - } - - [style*="border-color: rgb(29, 155, 240)"] { - border-color: @accent-color !important; - } - - [style*="color: rgb(231, 233, 234)"]:not( - [style*="background-color: rgb(231, 233, 234)"] - ), - [style*="color: rgb(239, 243, 244)"]:not( - [style*="background-color: rgb(239, 243, 244)"] - ), - [style*="color: rgb(255, 255, 255)"]:not( - [style*="background-color: rgb(255, 255, 255)"] - ) { - color: @text !important; - } - - [style*="color: rgb(231, 233, 234)"]:not( - [style*="background-color: rgb(231, 233, 234)"] - ) - input::placeholder { - color: @subtext1 !important; - } - - // faded text - [style*="color: rgb(113, 118, 123)"]:not( - [style*="background-color: rgb(113, 118, 123)"] - ), - [style*="color: rgb(182, 185, 188)"]:not( - [style*="background-color: rgb(182, 185, 188)"] - ) { - color: @overlay1 !important; - } - - // retweets color - [style*="color: rgb(0, 186, 124)"]:not( - [style*="background-color: rgb(0, 186, 124)"] - ) { - color: @green !important; - } - - // likes/unfollow color - [style*="color: rgb(249, 24, 128)"]:not( - [style*="background-color: rgb(249, 24, 128)"] - ), - [style*="color: rgb(244, 33, 46)"]:not( - [style*="background-color: rgb(244, 33, 46)"] - ) { - color: @red !important; - } - - [style*="color: rgb(250, 68, 152)"]:not( - [style*="background-color: rgb(250, 68, 152)"] - ) { - color: @pink !important; - } - - [style*="color: rgb(255, 212, 0)"]:not( - [style*="background-color: rgb(255, 212, 0)"] - ) { - color: @yellow !important; - } - - [style*="color: rgb(120, 86, 255)"]:not( - [style*="background-color: rgb(120, 86, 255)"] - ) { - color: @mauve !important; - } - - [style*="color: rgb(255, 122, 0)"]:not( - [style*="background-color: rgb(255, 122, 0)"] - ) { - color: @peach !important; - } - - // accent color (blue) - [style*="color: rgb(29, 155, 240)"]:not( - [style*="background-color: rgb(29, 155, 240)"] - ) { - color: @accent-color !important; - } - - // background colors - [style*="background-color: rgb(142, 205, 248)"] { - background-color: lighten(@accent-color, 10%) !important; - } - - [style*="background-color: rgb(2, 17, 61)"] { - background-color: fade(@accent-color, 15%) !important; - } - - [style*="background-color: rgba(255, 255, 255, 0.25)"] { - background-color: fade(@text, 25%) !important; - } - - [style*="background-color: rgb(147, 147, 147)"] { - background-color: @overlay0 !important; - - // for toggle circle - + [style*="background-color: rgb(250, 250, 250)"] - when - not - (@lookup = latte) { - background-color: @text !important; - } - } - - [style*="background-color: rgb(29, 155, 240)"] { - background-color: @accent-color !important; - - [style*="color: rgb(255, 255, 255)"] { - color: if(@lookup=latte, #fff, @crust) !important; - } - } - - [style*="background-color: rgb(239, 243, 244)"] { - background-color: @text !important; - - [style*="color: rgb(15, 20, 25)"] { - color: if(@lookup=latte, #fff, @crust) !important; - } - } - - [style*="background-color: rgb(244, 33, 46)"] { - background-color: @red !important; - - [style*="color: rgb(255, 255, 255)"] { - color: if(@lookup=latte, #fff, @crust) !important; - } - } - - [style*="background-color: rgb(0, 0, 0)"], - [style*="background-color: #000"] { - background-color: @base !important; - } - - [style*="background-color: rgba(15, 20, 25, 0.75)"] { - background-color: fade(@crust, 75%) !important; - - [style*="color: rgb(255, 255, 255)"] svg { - color: @text !important; - } - } - - // whatever - .r-l5o3uw, - .r-1vtznih, - .r-4nw3r4, - .r-12d83nn, - .r-oybae9, - .r-yuvema, - .r-3gvs5h, - [style="background-image: linear-gradient(61.63deg, rgb(45, 66, 255) -15.05%, rgb(156, 99, 250) 104.96%);"] { - [style*="color: rgb(255, 255, 255)"]:not( - [style*="background-color: rgb(255, 255, 255)"] - ), - &[style*="color: rgb(255, 255, 255)"]:not( - [style*="background-color: rgb(255, 255, 255)"] - ), - [style*="color: rgb(231, 233, 234)"]:not( - [style*="background-color: rgb(231, 233, 234)"] - ), - &[style*="color: rgb(231, 233, 234)"]:not( - [style*="background-color: rgb(231, 233, 234)"] - ), - [color="white"] { - color: if(@lookup=latte, #fff, @crust) !important; - } - } - - [data-testid="videoComponent"]:not(.r-4nw3r4), - .r-loe9s5, - .r-drfeu3:has( - [style="background-color: rgba(255, 255, 255, 0.25); border-color: rgba(0, 0, 0, 0); backdrop-filter: blur(4px);"] - ) { - [style*="color: rgb(255, 255, 255)"]:not( - [style*="background-color: rgb(255, 255, 255)"] - ), - &[style*="color: rgb(255, 255, 255)"]:not( - [style*="background-color: rgb(255, 255, 255)"] - ), - .r-jwli3a { - color: #fff !important; - } - } - - // dms have to be here bc of the above - .r-eff69c { - background-color: darken(@accent-color, 5%); - - [style*="color: rgb(255, 255, 255)"] { - color: @crust !important; - } - } - - // follow button - [data-testid$="-follow"] { - [style*="color: rgb(15, 20, 25)"] { - color: if(@lookup=latte, #fff, @crust) !important; - } - } - - // sports stuff on explore page - // a[href^="/i/events"] > div > div > div[style^="background-color"] > div[style*="color: rgb(255, 255, 255)"] span { - // color: #fff !important; - // } - - // options - & when (@colorizeLogo = 1) { - path[d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"] { - fill: @accent-color !important; - } - } - - a[aria-label^="Translated from"][aria-label$="by Google"] svg path { - fill: @text !important; - } - } -} - -@-moz-document domain("api.twitter.com"), -domain("api.x.com") { - @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]; - - html { - background: @mantle; - } - - #header { - color: @subtext0; - background: @base; - border-bottom-color: @surface1; - - .logo a { - border-bottom-color: transparent; - } - - #session { - a { - background: transparent; - color: @subtext0; - } - - h2 img { - border-color: @surface1; - } - } - } - - .footer { - background: @mantle; - border-top-color: @surface1; - } - - .auth h2 { - color: @subtext1; - } - - .oauth #bd { - border-color: @surface1; - } - - .app-info h3 img { - border-color: @base; - } - - .permissions.allow strong { - color: @green; - } - - .button { - background: @overlay0; - color: @text; - border-color: @surface1; - - &:hover { - color: @text; - border-color: @surface1; - background: darken(@surface2, 10%); - } - } - - .button.selected, - .follow-button .unfollow .button { - background-color: @accent-color; - color: if(@lookup=latte, #fff, @crust); - border-color: darken(@accent-color, 10%); - - &:hover { - background-color: darken(@accent-color, 10%); - } - - .app-info, - #bd h3 { - color: @subtext0; - } - - #ft { - color: @overlay0; - } - } - } -} - -@-moz-document domain("twitter.com"), -domain("x.com") { - @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]; - - #session a, - #session input, - #session button { - background: @surface0; - color: @subtext0; - } - - #session .user-menu { - a:focus, - a:hover, - button:focus, - button:hover, - input:focus, - input:hover { - color: if(@lookup=latte, #fff, @crust); - background-color: @accent-color; - } - } - - .notice, - .notice p, - h2 { - color: @subtext1; - } - - .notice.error { - background: fade(@red, 20%); - border-color: fade(@red, 25%); - } - - // report page? why isn't this themed - .ResponsiveLayout--Night .PageContainer { - background-color: @base; - } - - .list-explanation { - color: @subtext0; - } - - .ResponsiveLayout--Night .list-btn { - &:first-of-type { - border-top-color: @mantle; - } - - &:hover { - background-color: @mantle; - } - } - - .submit-btn { - background-color: @accent-color; - color: if(@lookup=latte, #fff, @crust); - border-color: darken(@accent-color, 10%); - } - - .submit-btn:hover, - .redirect-btn:hover { - background-color: darken(@accent-color, 10%); - } - - .block-btn { - color: @maroon; - border-color: @maroon; - } - - .mute-btn, - .unfollow-btn, - .email-report-btn { - color: @accent-color; - border-color: @accent-color; - } - - .list-btn { - border-color: @surface1; - - &:first-of-type { - border-top-color: @surface1; - } - - &:hover { - background-color: @surface0; - } - } - - // authorize page - .js #session .user-menu { - background-color: @surface0; - } - - .dropdown-caret .caret-outer, - .dropdown-caret .caret-inner { - border-bottom-color: @surface0; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/twitter/catppuccin.user.less b/styles/twitter/catppuccin.user.less new file mode 100644 index 0000000000..6696d9884f --- /dev/null +++ b/styles/twitter/catppuccin.user.less @@ -0,0 +1,1036 @@ +/* ==UserStyle== +@name Twitter Catppuccin +@namespace github.com/catppuccin/userstyles/styles/twitter +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/twitter +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/twitter/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atwitter +@description Soothing pastel theme for Twitter +@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"] + +@var checkbox colorizeLogo "Colorize Logo" 0 +@var checkbox darkenShadows "Darken Shadows on Dark Themes" 1 +==/UserStyle== */ + +@-moz-document domain("twitter.com"), domain("x.com") { + @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.LightsOut { + --border-color: @surface0; + --color: @overlay1; + --color-emphasis: @text; + --hover-bg-color: @surface0; + + // shadows + .r-qo02w8, + .r-15ce4ve { + @default-shadow: + fade(@text, 20%) 0 0 15px, + fade(@text, 15%) 0 0 3px 1px; + @black-shadow: + rgba(0, 0, 0, 0.4) 0 0 15px, + rgba(0, 0, 0, 0.35) 0 0 3px 1px; + + box-shadow: @default-shadow; + + & when (@darkenShadows = 1) { + box-shadow: if(@lookup = latte, @default-shadow, @black-shadow); + } + } + + .r-1tbvlxk { + @default-shadow: drop-shadow(fade(@text, 25%) 1px -1px 1px); + @black-shadow: drop-shadow(rgba(0, 0, 0, 0.5) 1px -1px 1px); + + filter: @default-shadow; + + & when (@darkenShadows = 1) { + filter: if(@lookup = latte, @default-shadow, @black-shadow); + } + } + + .r-1uusn97 { + @default-shadow: + fade(@text, 20%) 0 0 5px, + fade(@text, 15%) 0 1px 4px 1px; + @black-shadow: + rgba(0, 0, 0, 0.4) 0 0 5px, + rgba(0, 0, 0, 0.35) 0 1px 4px 1px; + + box-shadow: @default-shadow; + + & when (@darkenShadows = 1) { + box-shadow: if(@lookup = latte, @default-shadow, @black-shadow); + } + } + } + + body, + .PageContainer, + #placeholder { + background-color: @base !important; + color: @text; + } + + #ScriptLoadFailure span { + color: @text; + } + + [style*="scrollbar-color: rgb(62, 65, 68) rgb(22, 24, 28)"] { + scrollbar-color: @accent-color transparent !important; + scrollbar-width: thin; + } + + // bg color + [data-testid="primaryColumn"], + .r-kemksi { + background-color: @base; + } + + // arrow on account switcher + .r-cqee49 { + color: @base; + } + + // top nav bg color + .r-5zmot { + background-color: fade(@base, 75%); + } + + // element hover (when on base) + .r-1hdo0pc, + .r-pjtv4k { + background-color: fade(@text, 10%); + } + + // element active (when on base) + .r-11gmi9o { + background-color: fade(@text, 20%); + } + + .r-1cuuowz { + background-color: fade(@text, 3%); + } + + // text + .r-1nao33i { + color: @text; + } + + // white text, seems to appear on accent colors + .r-jwli3a { + color: if(@lookup = latte, #fff, @crust); + + // cw svg + &:has( + path[d="M3.693 21.707l-1.414-1.414 2.429-2.429c-2.479-2.421-3.606-5.376-3.658-5.513l-.131-.352.131-.352c.133-.353 3.331-8.648 10.937-8.648 2.062 0 3.989.621 5.737 1.85l2.556-2.557 1.414 1.414L3.693 21.707zm-.622-9.706c.356.797 1.354 2.794 3.051 4.449l2.417-2.418c-.361-.609-.553-1.306-.553-2.032 0-2.206 1.794-4 4-4 .727 0 1.424.192 2.033.554l2.263-2.264C14.953 5.434 13.512 5 11.986 5c-5.416 0-8.258 5.535-8.915 7.001zM11.986 10c-1.103 0-2 .897-2 2 0 .178.023.352.067.519l2.451-2.451c-.167-.044-.341-.067-.519-.067zm10.951 1.647l.131.352-.131.352c-.133.353-3.331 8.648-10.937 8.648-.709 0-1.367-.092-2-.223v-2.047c.624.169 1.288.27 2 .27 5.415 0 8.257-5.533 8.915-7-.252-.562-.829-1.724-1.746-2.941l1.438-1.438c1.53 1.971 2.268 3.862 2.33 4.027z"] + ) { + color: @text; + } + } + + // borders + .r-1kqtdi0, + .r-1roi411 { + border-color: @surface0; + } + + .r-1igl3o0 { + border-bottom-color: @surface0; + } + + .r-2sztyj { + border-top-color: @surface0; + } + + .r-1aihyag { + border-right-color: @surface0; + } + + .r-1wyyjkm { + border-left-color: @subtext0; // border when replying to a dm + } + + // is this post relevant to you? + .r-1ccsd61, + .r-xzxzvz { + border-color: @surface2; + } + + .r-gu4em3, + .r-1bnu78o, + .r-z32n2g, // search bar + .r-1m3jxhj { + background-color: @surface0; + } + + // base color border + .r-1xc7w19 { + border-color: @base; + } + + // active border for dms + .r-1pbtemp { + border-right-color: @accent-color; + } + + // accent color borders + .r-vhj8yc { + border-color: @accent-color; + } + + // magnifying glass in search bar + .r-1bwzh9t { + color: @overlay1; + } + + // right side content + .r-g2wdr4 { + background-color: @mantle; + } + + .r-14wv3jr { + border-color: @mantle; + } + + // bg color accent + .r-l5o3uw { + background-color: @accent-color; + + .r-jwli3a { + color: if(@lookup = latte, #fff, @crust); + } + } + + // accent element when hovered + .r-1vtznih { + background-color: darken(@accent-color, 10%); + + .r-jwli3a { + color: if(@lookup = latte, #fff, @crust); + } + } + + .r-1peqgm7 { + background-color: fade(@accent-color, 10%); + } + + // accent element when active + .r-yuvema { + background-color: darken(@accent-color, 15%); + + .r-jwli3a { + color: if(@lookup = latte, #fff, @crust); + } + } + + .r-r18ze4 { + background-color: fade(@accent-color, 20%); + } + + // white elements when hovered + .r-jc7xae { + background-color: darken(@text, 4%); + } + + // white elements when active + .r-6wtuen { + background-color: darken(@text, 8%); + } + + // tooltips + .r-1pr99xn { + background-color: @surface1; + } + + // new notifications + .r-1eltapf { + background-color: fade(@sapphire, 10%); + } + + // polls + .r-eok2q2 { + background-color: fade(@accent-color, 60%); + } + + // box shadow around active poll input box + .r-9cip40 { + box-shadow: @accent-color 0 0 0 1px; + } + + // spaces + .r-1blqq69 { + border-color: @mauve; + } + + // reactions on dms + .r-qazpri { + color: @overlay1; + } + + @keyframes r-1wvy3k1 { + 0% { + box-shadow: fade(@mauve, 40%) 0; + } + + 100% { + box-shadow: fade(@mauve, 0%) 0; + } + } + + [style="background-image: linear-gradient(61.63deg, rgb(45, 66, 255) -15.05%, rgb(156, 99, 250) 104.96%);"] { + background-image: linear-gradient( + 61.63deg, + @blue -15.05%, + @mauve 104.96% + ) !important; + } + + // tweet textbox placeholder + .draftjs-styles_0 .public-DraftEditorPlaceholder-root { + color: @overlay0; + } + + // who can reply? bg + .r-rgqbpe { + background-color: fade(@blue, 10%); + } + + // circles + .r-s224ru { + background-color: @green; + } + + .r-h7o7i8 { + background-color: fade(@green, 10%); + } + + // live indicator + .r-4nw3r4, + .r-1dgebii { + background-color: @red; + } + + // live border + .r-b5kvu3 { + border-color: @red; + } + + // red transparent bg (appears with "unfollow" hover) + .r-qqmkd0 { + background-color: fade(@red, 10%); + } + + // red bg on hover + .r-12d83nn { + background-color: darken(@red, 10%); + } + + // red bg when active + .r-oybae9 { + background-color: darken(@red, 15%); + } + + .r-11mg6pl { + border-color: if(@lookup = latte, #fff, @crust); // white border + } + + // mask over layer + .r-11z020y { + background-color: fade(desaturate(darken(@accent-color, 10%), 50%), 12%); + } + + // likes + [fill="rgb(249,22,127)"], + [fill="rgb(222,45,108)"], + g[clip-path="url(#__lottie_element_562)"] path, + [style="color: rgb(249, 24, 128);"] [viewBox="0 0 24 24"] path { + fill: @red !important; + } + + // likes when hover + .r-1krxqcr { + background-color: fade(@red, 10%); + } + + // likes when active + .r-uuique { + background-color: fade(@red, 20%); + } + + // heart svg on notifications page + .r-vkub15, + .r-9l7dzd { + color: @red; + } + + // bell svg on notifications page + .r-1cvl2hr { + color: @accent-color; + } + + // retweet svg on notifications page + .r-o6sn0f { + color: @green; + } + + // rt when hover + .r-15azkrj { + background-color: fade(@green, 10%); + } + + // rt when active + .r-1x669os { + background-color: fade(@green, 20%); + } + + // image won't load svg + [data-testid="card.wrapper"] + [d="M21.04 1.54L17.5 5.09c-.04-.02-.08-.03-.13-.04L14.3 3H9.7l-3 2H5C3.62 5 2.5 6.12 2.5 7.5v11c0 .46.12.88.34 1.25l-1.3 1.29 1.42 1.42 19.5-19.5-1.42-1.42zM13.7 5l2.33 1.56-2 1.99C13.44 8.2 12.74 8 12 8c-2.21 0-4 1.79-4 4 0 .74.2 1.44.55 2.03L4.5 18.09V7.5c0-.28.22-.5.5-.5h2.3l3-2h3.4zM12 10c.18 0 .35.02.52.07l-2.45 2.45c-.05-.17-.07-.34-.07-.52 0-1.1.9-2 2-2zm7 11H7.24l2-2H19c.28 0 .5-.22.5-.5V9h2v9.5c0 1.38-1.12 2.5-2.5 2.5z"] { + color: @overlay0; + } + + // cw button + .r-n94g0g { + background-color: fade(@text, 30%); // when hovered + } + + .r-z9i421 { + background-color: fade(@text, 27%); // when active + } + + .r-19130f6 { + background-color: @crust; // when hovered + } + + .r-l8tqsx { + background-color: fade(@text, 10%); // when active + } + + // lock svg when you try to write a commu note but can't + .r-3gvs5h { + background-color: @overlay1; + } + + // sunglasses commu note + .r-1fkb3t2 { + background-color: @surface1; + } + + // media player text + .r-jwli3a { + color: @text; + } + + .r-1kwlb9n { + background-color: fade(@red, 12%); + } + + // hard-coded shit + // ugly-ass twitter blue/premium bg. why. + [style*="https://abs.twimg.com/responsive-web/client-web/background-premiumplus-web"] { + background-image: none !important; + background-color: @surface0; + } + + [stroke="#2F3336" i] { + stroke: @surface2 !important; + } + + [stroke="#1D9BF0" i], + [style*="stroke: rgb(29, 155, 240)"] { + stroke: @accent-color !important; + } + + [stroke="#FFD400" i] { + stroke: @yellow !important; + } + + [fill="#829AAB" i] { + fill: @overlay2 !important; + } + + // "we received your report" svg + [fill="#1DA1F2" i] { + fill: if(@lookup = latte, darken(@sky, 15%), darken(@sky, 30%)) + !important; + } + + [fill="#78C6EE" i] { + fill: @sky !important; + } + + // yellow verified badge + [stop-color="#f4e72a" i], + [stop-color="#cd8105" i], + [stop-color="#cb7b00" i], + [stop-color="#f4ec26" i], + [stop-color="#f9e87f" i], + [stop-color="#e2b719" i] { + stop-color: @yellow !important; + } + + [fill="#d18800" i] { + fill: @yellow !important; + } + + // [fill="#333333" i] { + // fill: @crust !important; + // + // ~ [fill="white"] { + // fill: @text !important; + // } + // } + + [style*="border-color: rgb(83, 100, 113)"] { + border-color: @surface1 !important; + } + + [style*="border-color: rgb(51, 54, 57)"] { + border-color: @surface0 !important; + } + + [style*="border-color: rgb(103, 7, 15)"] { + border-color: fadeout(@red, 50%) !important; + } + + [style*="border-color: rgb(29, 155, 240)"] { + border-color: @accent-color !important; + } + + [style*="color: rgb(231, 233, 234)"]:not( + [style*="background-color: rgb(231, 233, 234)"] + ), + [style*="color: rgb(239, 243, 244)"]:not( + [style*="background-color: rgb(239, 243, 244)"] + ), + [style*="color: rgb(255, 255, 255)"]:not( + [style*="background-color: rgb(255, 255, 255)"] + ) { + color: @text !important; + } + + [style*="color: rgb(231, 233, 234)"]:not( + [style*="background-color: rgb(231, 233, 234)"] + ) + input::placeholder { + color: @subtext1 !important; + } + + // faded text + [style*="color: rgb(113, 118, 123)"]:not( + [style*="background-color: rgb(113, 118, 123)"] + ), + [style*="color: rgb(182, 185, 188)"]:not( + [style*="background-color: rgb(182, 185, 188)"] + ) { + color: @overlay1 !important; + } + + // retweets color + [style*="color: rgb(0, 186, 124)"]:not( + [style*="background-color: rgb(0, 186, 124)"] + ) { + color: @green !important; + } + + // likes/unfollow color + [style*="color: rgb(249, 24, 128)"]:not( + [style*="background-color: rgb(249, 24, 128)"] + ), + [style*="color: rgb(244, 33, 46)"]:not( + [style*="background-color: rgb(244, 33, 46)"] + ) { + color: @red !important; + } + + [style*="color: rgb(250, 68, 152)"]:not( + [style*="background-color: rgb(250, 68, 152)"] + ) { + color: @pink !important; + } + + [style*="color: rgb(255, 212, 0)"]:not( + [style*="background-color: rgb(255, 212, 0)"] + ) { + color: @yellow !important; + } + + [style*="color: rgb(120, 86, 255)"]:not( + [style*="background-color: rgb(120, 86, 255)"] + ) { + color: @mauve !important; + } + + [style*="color: rgb(255, 122, 0)"]:not( + [style*="background-color: rgb(255, 122, 0)"] + ) { + color: @peach !important; + } + + // accent color (blue) + [style*="color: rgb(29, 155, 240)"]:not( + [style*="background-color: rgb(29, 155, 240)"] + ) { + color: @accent-color !important; + } + + // background colors + [style*="background-color: rgb(142, 205, 248)"] { + background-color: lighten(@accent-color, 10%) !important; + } + + [style*="background-color: rgb(2, 17, 61)"] { + background-color: fade(@accent-color, 15%) !important; + } + + [style*="background-color: rgba(255, 255, 255, 0.25)"] { + background-color: fade(@text, 25%) !important; + } + + [style*="background-color: rgb(147, 147, 147)"] { + background-color: @overlay0 !important; + + // for toggle circle + + [style*="background-color: rgb(250, 250, 250)"] when not( + @lookup = latte + ) { + background-color: @text !important; + } + } + + [style*="background-color: rgb(29, 155, 240)"] { + background-color: @accent-color !important; + + [style*="color: rgb(255, 255, 255)"] { + color: if(@lookup = latte, #fff, @crust) !important; + } + } + + [style*="background-color: rgb(239, 243, 244)"] { + background-color: @text !important; + + [style*="color: rgb(15, 20, 25)"] { + color: if(@lookup = latte, #fff, @crust) !important; + } + } + + [style*="background-color: rgb(244, 33, 46)"] { + background-color: @red !important; + + [style*="color: rgb(255, 255, 255)"] { + color: if(@lookup = latte, #fff, @crust) !important; + } + } + + [style*="background-color: rgb(0, 0, 0)"], + [style*="background-color: #000"] { + background-color: @base !important; + } + + [style*="background-color: rgba(15, 20, 25, 0.75)"] { + background-color: fade(@crust, 75%) !important; + + [style*="color: rgb(255, 255, 255)"] svg { + color: @text !important; + } + } + + // whatever + .r-l5o3uw, + .r-1vtznih, + .r-4nw3r4, + .r-12d83nn, + .r-oybae9, + .r-yuvema, + .r-3gvs5h, + [style="background-image: linear-gradient(61.63deg, rgb(45, 66, 255) -15.05%, rgb(156, 99, 250) 104.96%);"] { + [style*="color: rgb(255, 255, 255)"]:not( + [style*="background-color: rgb(255, 255, 255)"] + ), + &[style*="color: rgb(255, 255, 255)"]:not( + [style*="background-color: rgb(255, 255, 255)"] + ), + [style*="color: rgb(231, 233, 234)"]:not( + [style*="background-color: rgb(231, 233, 234)"] + ), + &[style*="color: rgb(231, 233, 234)"]:not( + [style*="background-color: rgb(231, 233, 234)"] + ), + [color="white"] { + color: if(@lookup = latte, #fff, @crust) !important; + } + } + + [data-testid="videoComponent"]:not(.r-4nw3r4), + .r-loe9s5, + .r-drfeu3:has( + [style="background-color: rgba(255, 255, 255, 0.25); border-color: rgba(0, 0, 0, 0); backdrop-filter: blur(4px);"] + ) { + [style*="color: rgb(255, 255, 255)"]:not( + [style*="background-color: rgb(255, 255, 255)"] + ), + &[style*="color: rgb(255, 255, 255)"]:not( + [style*="background-color: rgb(255, 255, 255)"] + ), + .r-jwli3a { + color: #fff !important; + } + } + + // dms have to be here bc of the above + .r-eff69c { + background-color: darken(@accent-color, 5%); + + [style*="color: rgb(255, 255, 255)"] { + color: @crust !important; + } + } + + // follow button + [data-testid$="-follow"] { + [style*="color: rgb(15, 20, 25)"] { + color: if(@lookup = latte, #fff, @crust) !important; + } + } + + // sports stuff on explore page + // a[href^="/i/events"] > div > div > div[style^="background-color"] > div[style*="color: rgb(255, 255, 255)"] span { + // color: #fff !important; + // } + + // options + & when (@colorizeLogo = 1) { + path[d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"] { + fill: @accent-color !important; + } + } + + a[aria-label^="Translated from"][aria-label$="by Google"] svg path { + fill: @text !important; + } + } +} + +@-moz-document domain("api.twitter.com"), domain("api.x.com") { + @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]; + + html { + background: @mantle; + } + + #header { + color: @subtext0; + background: @base; + border-bottom-color: @surface1; + + .logo a { + border-bottom-color: transparent; + } + + #session { + a { + background: transparent; + color: @subtext0; + } + + h2 img { + border-color: @surface1; + } + } + } + + .footer { + background: @mantle; + border-top-color: @surface1; + } + + .auth h2 { + color: @subtext1; + } + + .oauth #bd { + border-color: @surface1; + } + + .app-info h3 img { + border-color: @base; + } + + .permissions.allow strong { + color: @green; + } + + .button { + background: @overlay0; + color: @text; + border-color: @surface1; + + &:hover { + color: @text; + border-color: @surface1; + background: darken(@surface2, 10%); + } + } + + .button.selected, + .follow-button .unfollow .button { + background-color: @accent-color; + color: if(@lookup = latte, #fff, @crust); + border-color: darken(@accent-color, 10%); + + &:hover { + background-color: darken(@accent-color, 10%); + } + + .app-info, + #bd h3 { + color: @subtext0; + } + + #ft { + color: @overlay0; + } + } + } +} + +@-moz-document domain("twitter.com"), domain("x.com") { + @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]; + + #session a, + #session input, + #session button { + background: @surface0; + color: @subtext0; + } + + #session .user-menu { + a:focus, + a:hover, + button:focus, + button:hover, + input:focus, + input:hover { + color: if(@lookup = latte, #fff, @crust); + background-color: @accent-color; + } + } + + .notice, + .notice p, + h2 { + color: @subtext1; + } + + .notice.error { + background: fade(@red, 20%); + border-color: fade(@red, 25%); + } + + // report page? why isn't this themed + .ResponsiveLayout--Night .PageContainer { + background-color: @base; + } + + .list-explanation { + color: @subtext0; + } + + .ResponsiveLayout--Night .list-btn { + &:first-of-type { + border-top-color: @mantle; + } + + &:hover { + background-color: @mantle; + } + } + + .submit-btn { + background-color: @accent-color; + color: if(@lookup = latte, #fff, @crust); + border-color: darken(@accent-color, 10%); + } + + .submit-btn:hover, + .redirect-btn:hover { + background-color: darken(@accent-color, 10%); + } + + .block-btn { + color: @maroon; + border-color: @maroon; + } + + .mute-btn, + .unfollow-btn, + .email-report-btn { + color: @accent-color; + border-color: @accent-color; + } + + .list-btn { + border-color: @surface1; + + &:first-of-type { + border-top-color: @surface1; + } + + &:hover { + background-color: @surface0; + } + } + + // authorize page + .js #session .user-menu { + background-color: @surface0; + } + + .dropdown-caret .caret-outer, + .dropdown-caret .caret-inner { + border-bottom-color: @surface0; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/vercel/catppuccin.user.css b/styles/vercel/catppuccin.user.css index 5480367091..35326a3234 100644 --- a/styles/vercel/catppuccin.user.css +++ b/styles/vercel/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Vercel/Next.js Catppuccin +@name Vercel/Next.js Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/vercel @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/vercel -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/vercel/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/vercel/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Avercel @description Soothing pastel theme for Vercel and Next.js @author Catppuccin @@ -13,321 +13,4 @@ @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("vercel.com"), domain("nextjs.org") { - :root.dark-theme { - #catppuccin(@darkFlavor, @accentColor); - } - :root.light-theme { - #catppuccin(@lightFlavor, @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; - } - } - - --geist-foreground: @text; - --geist-background: @mantle; - - --accents-1: @base; - --accents-2: @surface0; - --accents-3: @surface1; - --accents-4: @surface2; - --accents-5: @overlay0; - --accents-6: @overlay1; - --accents-7: @overlay2; - --accents-8: @subtext0; - - --geist-link-color: @accent-color; - --geist-selection: @subtext0; - --geist-success: @accent-color; - --geist-error: @red; - --geist-cyan: @teal; - - --ds-background-100: @base; - --ds-background-200: @mantle; - - --ds-gray-100: @mantle; - --ds-gray-200: @surface0; - --ds-gray-300: @surface1; - --ds-gray-400: @surface1; - --ds-gray-600: @subtext0; - --ds-gray-700: @subtext1; - --ds-gray-800: @subtext1; - --ds-gray-900: @subtext0; - --ds-gray-900-value: #rgbify(@subtext0) []; - --ds-gray-1000: @text; - --ds-gray-1000-value: #rgbify(@text) []; - --ds-gray-alpha-100: fade(@text, 6%); - --ds-gray-alpha-200: fade(@text, 9%); - --ds-gray-alpha-400: @surface0; - --ds-gray-alpha-900: fade(@text, 61%); - - --themed-hover-bg: @subtext1; - - --ds-red-400: @red; - --ds-red-800: @red; - --ds-red-900: lighten(@red, 5%); - - --ds-blue-200: fade(@accent-color, 30%); - --ds-blue-300: fade(@accent-color, 40%); - --ds-blue-400: fade(@accent-color, 50%); - --ds-blue-700: @accent-color; - --ds-blue-900: @accent-color; - - --tw-gradient-top: transparent; - - svg { - --geist-stroke: var(--geist-background) !important; - } - - .geist-disabled img, - .geist-disabled svg { - filter: none; - } - - .styled-scrollbar { - scrollbar-color: @accent-color transparent; - } - - .dark\:from-black, - .from-white { - --tw-gradient-from: @mantle; - } - - .shadow, - .shadow-md, - .shadow-sm { - box-shadow: none !important; - } - - .card-grid_card__S85BZ { - background: linear-gradient(180deg, @base 0%, @crust 100%); - - &:hover { - background: linear-gradient(180deg, @base 0%, @mantle 100%); - } - } - - [class*="fieldset_footer"] { - background-color: @base; - } - } -} - -@-moz-document domain("nextjs.org") { - :root.dark-theme { - #catppuccin(@darkFlavor, @accentColor); - } - :root.light-theme { - #catppuccin(@lightFlavor, @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]; - - article { - :not(h1, h2, h3, h4) > a { - color: @accent-color; - } - - a:hover { - color: darken(@accent-color, 5%); - } - } - - nav { - /* Vertical line to the left of links */ - a > div.bg-blue-600 { - background-color: @accent-color; - } - } - - button[role="combobox"], - [data-radix-popper-content-wrapper] { - --ds-blue-400: @base; - --ds-purple-400: @base; - - /* App Router icon */ - --ds-blue-700: @blue; - - /* Pages Router icon */ - --ds-purple-700: @mauve; - } - - /* Syntax higlighting */ - [class*="code-block_pre"] { - --shiki-token-punctuation: @overlay2; - --shiki-token-constant: @peach; - --shiki-token-string: @green; - --shiki-token-string-expression: @green; - --shiki-token-comment: @overlay2; - --shiki-token-keyword: @mauve; - --shiki-token-parameter: @maroon; - --shiki-token-function: @blue; - } - - /* Footer social media icons */ - img[src="/icons/github.svg"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - img[src="/icons/x.svg"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .group:hover .dark\:group-hover\:bg-white { - background-color: @subtext1; - } - .group:hover .dark\:group-hover\:text-black { - color: @crust; - } - - [data-docs-container] code:not(pre code), - [data-docs-table-of-contents] code:not(pre code) { - border-color: @surface0 !important; - background-color: @mantle !important; - } - - td a { - color: @accent-color; - } - - .animated-optimizations_window__CjM85 { - background: @mantle !important; - } - - .features_card__xYla9, - .foundation_root__wm0ez, - .foundation_card__v7VKB { - background: @base; - } - - .foundation_cpu__ciXpm { - background: @mantle; - } - - .header_header__zJOD0 { - background: @base; - } - - .mute, - .subtitle { - color: @subtext0; - } - - .mobile-menu_mobileMenu__xqbOP a.mobile-menu_selected__G55UL { - color: var(--geist-background); - } - - .dark-theme .dark\:bg-black\/50 { - background-color: var(--geist-background); - } - - .gradient, - .gradient-text { - --text-gradient: @text; - } - - .bg-background-200, - .bg-vercel-100 { - background-color: @mantle; - } - - .guides_book__j9vP8 { - background: @base !important; - } - - .guides_bind__9COxI { - background: @overlay0 !important; - } - - .bg-gray-50 { - background-color: @mantle; - } - } -} - -#rgbify(@color) { - @rgb: red(@color), green(@color), blue(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/vercel/catppuccin.user.less b/styles/vercel/catppuccin.user.less new file mode 100644 index 0000000000..3117226c94 --- /dev/null +++ b/styles/vercel/catppuccin.user.less @@ -0,0 +1,331 @@ +/* ==UserStyle== +@name Vercel/Next.js Catppuccin +@namespace github.com/catppuccin/userstyles/styles/vercel +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/vercel +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/vercel/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Avercel +@description Soothing pastel theme for Vercel and Next.js +@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("vercel.com"), domain("nextjs.org") { + :root.dark-theme { + #catppuccin(@darkFlavor, @accentColor); + } + :root.light-theme { + #catppuccin(@lightFlavor, @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; + } + } + + --geist-foreground: @text; + --geist-background: @mantle; + + --accents-1: @base; + --accents-2: @surface0; + --accents-3: @surface1; + --accents-4: @surface2; + --accents-5: @overlay0; + --accents-6: @overlay1; + --accents-7: @overlay2; + --accents-8: @subtext0; + + --geist-link-color: @accent-color; + --geist-selection: @subtext0; + --geist-success: @accent-color; + --geist-error: @red; + --geist-cyan: @teal; + + --ds-background-100: @base; + --ds-background-200: @mantle; + + --ds-gray-100: @mantle; + --ds-gray-200: @surface0; + --ds-gray-300: @surface1; + --ds-gray-400: @surface1; + --ds-gray-600: @subtext0; + --ds-gray-700: @subtext1; + --ds-gray-800: @subtext1; + --ds-gray-900: @subtext0; + --ds-gray-900-value: #rgbify(@subtext0)[]; + --ds-gray-1000: @text; + --ds-gray-1000-value: #rgbify(@text)[]; + --ds-gray-alpha-100: fade(@text, 6%); + --ds-gray-alpha-200: fade(@text, 9%); + --ds-gray-alpha-400: @surface0; + --ds-gray-alpha-900: fade(@text, 61%); + + --themed-hover-bg: @subtext1; + + --ds-red-400: @red; + --ds-red-800: @red; + --ds-red-900: lighten(@red, 5%); + + --ds-blue-200: fade(@accent-color, 30%); + --ds-blue-300: fade(@accent-color, 40%); + --ds-blue-400: fade(@accent-color, 50%); + --ds-blue-700: @accent-color; + --ds-blue-900: @accent-color; + + --tw-gradient-top: transparent; + + svg { + --geist-stroke: var(--geist-background) !important; + } + + .geist-disabled img, + .geist-disabled svg { + filter: none; + } + + .styled-scrollbar { + scrollbar-color: @accent-color transparent; + } + + .dark\:from-black, + .from-white { + --tw-gradient-from: @mantle; + } + + .shadow, + .shadow-md, + .shadow-sm { + box-shadow: none !important; + } + + .card-grid_card__S85BZ { + background: linear-gradient(180deg, @base 0%, @crust 100%); + + &:hover { + background: linear-gradient(180deg, @base 0%, @mantle 100%); + } + } + + [class*="fieldset_footer"] { + background-color: @base; + } + } +} + +@-moz-document domain("nextjs.org") { + :root.dark-theme { + #catppuccin(@darkFlavor, @accentColor); + } + :root.light-theme { + #catppuccin(@lightFlavor, @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]; + + article { + :not(h1, h2, h3, h4) > a { + color: @accent-color; + } + + a:hover { + color: darken(@accent-color, 5%); + } + } + + nav { + /* Vertical line to the left of links */ + a > div.bg-blue-600 { + background-color: @accent-color; + } + } + + button[role="combobox"], + [data-radix-popper-content-wrapper] { + --ds-blue-400: @base; + --ds-purple-400: @base; + + /* App Router icon */ + --ds-blue-700: @blue; + + /* Pages Router icon */ + --ds-purple-700: @mauve; + } + + /* Syntax higlighting */ + [class*="code-block_pre"] { + --shiki-token-punctuation: @overlay2; + --shiki-token-constant: @peach; + --shiki-token-string: @green; + --shiki-token-string-expression: @green; + --shiki-token-comment: @overlay2; + --shiki-token-keyword: @mauve; + --shiki-token-parameter: @maroon; + --shiki-token-function: @blue; + } + + /* Footer social media icons */ + img[src="/icons/github.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + img[src="/icons/x.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .group:hover .dark\:group-hover\:bg-white { + background-color: @subtext1; + } + .group:hover .dark\:group-hover\:text-black { + color: @crust; + } + + [data-docs-container] code:not(pre code), + [data-docs-table-of-contents] code:not(pre code) { + border-color: @surface0 !important; + background-color: @mantle !important; + } + + td a { + color: @accent-color; + } + + .animated-optimizations_window__CjM85 { + background: @mantle !important; + } + + .features_card__xYla9, + .foundation_root__wm0ez, + .foundation_card__v7VKB { + background: @base; + } + + .foundation_cpu__ciXpm { + background: @mantle; + } + + .header_header__zJOD0 { + background: @base; + } + + .mute, + .subtitle { + color: @subtext0; + } + + .mobile-menu_mobileMenu__xqbOP a.mobile-menu_selected__G55UL { + color: var(--geist-background); + } + + .dark-theme .dark\:bg-black\/50 { + background-color: var(--geist-background); + } + + .gradient, + .gradient-text { + --text-gradient: @text; + } + + .bg-background-200, + .bg-vercel-100 { + background-color: @mantle; + } + + .guides_book__j9vP8 { + background: @base !important; + } + + .guides_bind__9COxI { + background: @overlay0 !important; + } + + .bg-gray-50 { + background-color: @mantle; + } + } +} + +#rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/vikunja/catppuccin.user.css b/styles/vikunja/catppuccin.user.css index fdd66012cb..163f73d7a1 100644 --- a/styles/vikunja/catppuccin.user.css +++ b/styles/vikunja/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Vikunja Catppuccin +@name Vikunja Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/vikunja @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/vikunja -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/vikunja/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/vikunja/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Avikunja @description Soothing pastel theme for Vikunja @author Catppuccin @@ -13,339 +13,4 @@ @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('try.vikunja.io') { - #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]; - - #hslbreakdown(@color, @item) { - --@{item}-h: hue(@color) !important; - --@{item}-s: saturation(@color) !important; - --@{item}-l: lightness(@color) !important; - --@{item}-light-l: lightness(@color) !important; - --@{item}-dark-l: lightness(@color) !important; - --@{item}-invert-l: lightness(@color) !important; - } - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - #hslbreakdown(@accent-color, primary); - --site-background: @mantle; - --content-heading-color: @text; - --card-header-color: @text; - --card-color: @text; - --body-color: @text; - --label-color: @text; - --strong-color: @text; - --primary: @accent-color; - --primary-invert: @base; - --switch-view-color: @base; - --input-background-color: @base; - --input-icon-color: @text; - --table-row-hover-background-color: @mantle; - --table-head-cell-color: @text; - --input-border-color: @overlay0; - --link-hover: @accent-color; - --white: @base; - --grey: @overlay0; - --card-content-background-color: @base; - --success: @green; - --danger: @red; - --warning: @yellow; - --text: @text; - --text-strong: @text; - --button-text-hover-background-color: @base; - - body, - div#app, - header, - aside.menu-container, - footer.card-footer { - background: @mantle !important; - } - - svg.llama-cool > circle, - svg.logo > path[fill="#196aff"] { - fill: @accent-color; - } - - svg.logo, - h1, - .action-heading, - .subtitle a, - .project-menu-title { - color: @text !important; - } - - h1.title.task-id, - div.detail-title, - div.detail-title span { - color: @overlay0; - } - - button { - box-shadow: none !important; - } - - button.is-danger { - color: @red !important; - background: none; - - &:hover { - background: @red !important; - color: @surface0 !important; - } - - &:active { - background: darken(@red, 10%) !important; - color: @surface0 !important; - } - } - - button.is-success { - color: @green; - - &:hover { - background: @green !important; - color: @surface0 !important; - } - - &:active { - background: darken(@green, 10%) !important; - } - } - - .base-button.is-primary { - color: @base; - - &:hover { - background: @accent-color; - } - - &:active { - background: darken(@accent-color, 10%); - } - - span.icon { - color: @base !important; - } - } - - button.base-button:not(.is-primary) { - color: @text; - } - - div.action-buttons > button:hover, - button.search-result-button:hover, - .button.is-text:active, - .single-task:hover { - background: @mantle; - } - - p.is-editor-empty::before { - color: @overlay0; - } - - header > button.base-button.menu-button::before, - header > button.base-button.menu-button::after { - background: @text; - } - - .menu .menu-list { - li > a, - li > a > span { - color: @text; - } - li > a.router-link-active { - color: @accent-color; - } - li:hover { - background: @mantle; - } - } - - a.base-button.menu-bottom-link { - color: @overlay0; - - &:hover { - color: @overlay2; - } - } - - div.is-done { - background: @green; - color: @surface0; - } - - div.tiptap__editor { - a { - color: @accent-color; - } - } - - p.created { - color: @overlay0; - } - - .progress-bar { - --progress-bar-background-color: @crust; - --progress-value-background-color: @accent-color; - } - - .loader-container.is-loading::after { - --loader-border-color: @accent-color; - } - - /* Gantt */ - div.gantt-container { - --grey-300: @surface0; - } - - div.g-gantt-chart { - .g-upper-timeunit, - .g-timeunit { - color: @text !important; - } - - .g-timeunit .today { - color: @surface0; - } - - .g-gantt-row { - background: @base; - } - - div.g-gantt-bar { - div.g-gantt-bar-label > div { - color: @surface0; - } - - .g-gantt-bar-handle-left, - .g-gantt-bar-handle-right { - background: darken(@accent-color, 10%); - } - } - } - - /* Kaban */ - div.bucket-header, - div.task-item, - div.bucket-footer, - div.bucket > button.base-button { - background: @base; - } - - div.task-item > .task { - background: @mantle; - - span.icon, - span.priority-label { - background: @surface0; - } - } - - /* Command Palette */ - span.result-title, - div.active-cmd.tag { - background: @base; - } - - /* Keyboard Shortcuts modal */ - kbd { - color: @text; - border-color: @overlay0; - background: @base; - } - - div.message-wrapper > div.message.info { - background: @base; - } - - /* Popups */ - div.v-popper__inner { - background: @mantle; - color: @text; - } - - div.v-popper__arrow-outer { - border-color: @mantle; - } - - .modal-mask { - span, - p, - strong { - color: @text !important; - } - } - - /* Vue Notifications */ - .vue-notification { - color: @surface0 !important; - } - .vue-notification button { - background: none; - color: @overlay0 !important; - } - - .vue-notification.success { - background: @green; - border-left-color: darken(@green, 5%); - } - } - - :root.dark { - #catppuccin(@darkFlavor, @accentColor); - } - :root.light { - #catppuccin(@lightFlavor, @accentColor); - } -} - -/* prettier-ignore */ -@catppuccin: { - @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; - @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; - @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; - @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; -} - -// vim:ft=less +==/UserStyle== */ \ No newline at end of file diff --git a/styles/vikunja/catppuccin.user.less b/styles/vikunja/catppuccin.user.less new file mode 100644 index 0000000000..2c51ec13e1 --- /dev/null +++ b/styles/vikunja/catppuccin.user.less @@ -0,0 +1,349 @@ +/* ==UserStyle== +@name Vikunja Catppuccin +@namespace github.com/catppuccin/userstyles/styles/vikunja +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/vikunja +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/vikunja/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Avikunja +@description Soothing pastel theme for Vikunja +@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("try.vikunja.io") { + #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]; + + #hslbreakdown(@color, @item) { + --@{item}-h: hue(@color) !important; + --@{item}-s: saturation(@color) !important; + --@{item}-l: lightness(@color) !important; + --@{item}-light-l: lightness(@color) !important; + --@{item}-dark-l: lightness(@color) !important; + --@{item}-invert-l: lightness(@color) !important; + } + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + #hslbreakdown(@accent-color, primary); + --site-background: @mantle; + --content-heading-color: @text; + --card-header-color: @text; + --card-color: @text; + --body-color: @text; + --label-color: @text; + --strong-color: @text; + --primary: @accent-color; + --primary-invert: @base; + --switch-view-color: @base; + --input-background-color: @base; + --input-icon-color: @text; + --table-row-hover-background-color: @mantle; + --table-head-cell-color: @text; + --input-border-color: @overlay0; + --link-hover: @accent-color; + --white: @base; + --grey: @overlay0; + --card-content-background-color: @base; + --success: @green; + --danger: @red; + --warning: @yellow; + --text: @text; + --text-strong: @text; + --button-text-hover-background-color: @base; + + body, + div#app, + header, + aside.menu-container, + footer.card-footer { + background: @mantle !important; + } + + svg.llama-cool > circle, + svg.logo > path[fill="#196aff"] { + fill: @accent-color; + } + + svg.logo, + h1, + .action-heading, + .subtitle a, + .project-menu-title { + color: @text !important; + } + + h1.title.task-id, + div.detail-title, + div.detail-title span { + color: @overlay0; + } + + button { + box-shadow: none !important; + } + + button.is-danger { + color: @red !important; + background: none; + + &:hover { + background: @red !important; + color: @surface0 !important; + } + + &:active { + background: darken(@red, 10%) !important; + color: @surface0 !important; + } + } + + button.is-success { + color: @green; + + &:hover { + background: @green !important; + color: @surface0 !important; + } + + &:active { + background: darken(@green, 10%) !important; + } + } + + .base-button.is-primary { + color: @base; + + &:hover { + background: @accent-color; + } + + &:active { + background: darken(@accent-color, 10%); + } + + span.icon { + color: @base !important; + } + } + + button.base-button:not(.is-primary) { + color: @text; + } + + div.action-buttons > button:hover, + button.search-result-button:hover, + .button.is-text:active, + .single-task:hover { + background: @mantle; + } + + p.is-editor-empty::before { + color: @overlay0; + } + + header > button.base-button.menu-button::before, + header > button.base-button.menu-button::after { + background: @text; + } + + .menu .menu-list { + li > a, + li > a > span { + color: @text; + } + li > a.router-link-active { + color: @accent-color; + } + li:hover { + background: @mantle; + } + } + + a.base-button.menu-bottom-link { + color: @overlay0; + + &:hover { + color: @overlay2; + } + } + + div.is-done { + background: @green; + color: @surface0; + } + + div.tiptap__editor { + a { + color: @accent-color; + } + } + + p.created { + color: @overlay0; + } + + .progress-bar { + --progress-bar-background-color: @crust; + --progress-value-background-color: @accent-color; + } + + .loader-container.is-loading::after { + --loader-border-color: @accent-color; + } + + /* Gantt */ + div.gantt-container { + --grey-300: @surface0; + } + + div.g-gantt-chart { + .g-upper-timeunit, + .g-timeunit { + color: @text !important; + } + + .g-timeunit .today { + color: @surface0; + } + + .g-gantt-row { + background: @base; + } + + div.g-gantt-bar { + div.g-gantt-bar-label > div { + color: @surface0; + } + + .g-gantt-bar-handle-left, + .g-gantt-bar-handle-right { + background: darken(@accent-color, 10%); + } + } + } + + /* Kaban */ + div.bucket-header, + div.task-item, + div.bucket-footer, + div.bucket > button.base-button { + background: @base; + } + + div.task-item > .task { + background: @mantle; + + span.icon, + span.priority-label { + background: @surface0; + } + } + + /* Command Palette */ + span.result-title, + div.active-cmd.tag { + background: @base; + } + + /* Keyboard Shortcuts modal */ + kbd { + color: @text; + border-color: @overlay0; + background: @base; + } + + div.message-wrapper > div.message.info { + background: @base; + } + + /* Popups */ + div.v-popper__inner { + background: @mantle; + color: @text; + } + + div.v-popper__arrow-outer { + border-color: @mantle; + } + + .modal-mask { + span, + p, + strong { + color: @text !important; + } + } + + /* Vue Notifications */ + .vue-notification { + color: @surface0 !important; + } + .vue-notification button { + background: none; + color: @overlay0 !important; + } + + .vue-notification.success { + background: @green; + border-left-color: darken(@green, 5%); + } + } + + :root.dark { + #catppuccin(@darkFlavor, @accentColor); + } + :root.light { + #catppuccin(@lightFlavor, @accentColor); + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/web.dev/catppuccin.user.css b/styles/web.dev/catppuccin.user.css index 5b173d93cb..bf4e216125 100644 --- a/styles/web.dev/catppuccin.user.css +++ b/styles/web.dev/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name web.dev Catppuccin +@name web.dev Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/web.dev @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/web.dev -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/web.dev/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/web.dev/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aweb.dev @description Soothing pastel theme for web.dev @author Catppuccin @@ -13,192 +13,4 @@ @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('web.dev') { - @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; - } - } - - :focus-visible { - outline-color: @accent-color; - } - - --webdev-background-gray: @surface0; - --webdev-background-gray-2: @surface1; - --webdev-background-oficial-gray: @surface0; - --webdev-background-white: @base; - --webdev-google-colors-blue-50: @base; - --webdev-google-colors-blue-600: @accent-color; - --webdev-google-colors-blue-800: @accent-color; - --webdev-primary: @accent-color; - --webdev-text-text-1: @text; - --webdev-text-text-2: @subtext1; - --webdev-text-text-3: @subtext0; - --webdev-illustration-colors-blue: @blue; - --webdev-illustration-colors-gray: @surface2; - --webdev-illustration-colors-green: @green; - --webdev-illustration-colors-red: @red; - - --devsite-secondary-text-color: @subtext1; - --devsite-primary-border: 1px solid @surface0; - --devsite-secondary-border: 1px solid @surface2; - - --devsite-contrast-link-color: @accent-color; - --devsite-header-link-color-active: @text; - - --devsite-button-disabled-background: @surface0; - --devsite-button-disabled-color: @subtext0; - --devsite-button-primary-background-active: @accent-color; - --devsite-button-primary-color-active: @crust; - --devsite-button-primary-border-hover: 2px solid transparent; - - --devsite-input-background: @surface0; - --devsite-input-background-focus: fade(@accent-color, 30%); - - devsite-multiple-choice { - .devsite-multiple-choice-question { - color: @text; - } - - --devsite-multiple-choice-background: @surface0; - --devsite-multiple-choice-correct-background: fade(@green, 10%); - --devsite-multiple-choice-correct-color: @green; - --devsite-multiple-choice-incorrect-background: fade(@red, 10%); - --devsite-multiple-choice-incorrect-color: @red; - } - - body:not([codelabs-content-type="paginated"]) { - --devsite-notice-link-background-hover: @mantle; - - --devsite-caution-notice-background: fade(@red, 10%); - --devsite-caution-notice-color: @red; - --devsite-key-point-notice-background: fade(@sapphire, 10%); - --devsite-key-point-notice-color: @sapphire; - --devsite-key-term-notice-background: fade(@mauve, 10%); - --devsite-key-term-notice-color: @mauve; - --devsite-note-notice-background: fade(@blue, 10%); - --devsite-note-notice-color: @blue; - --devsite-status-notice-color: @teal; - --devsite-success-notice-background: fade(@green, 10%); - --devsite-success-notice-color: @green; - --devsite-warning-notice-background: fade(@peach, 10%); - --devsite-warning-notice-color: @peach; - } - - devsite-code, - devsite-code[dark-code], - devsite-content { - --devsite-code-background: @mantle; - --devsite-code-color: @text; - --devsite-code-buttons-color: @overlay2; - --devsite-code-buttons-hover: @subtext1; - - --devsite-var-color: @mauve; - --devsite-code-comments-color: @overlay2; - --devsite-code-keywords-color: @mauve; - --devsite-code-numbers-color: @peach; - --devsite-code-strings-color: @green; - --devsite-code-types-color: @yellow; - } - - devsite-header devsite-language-selector { - --devsite-select-color: @text; - } - - devsite-playlist { - .devsite-playlist--header h1:first-of-type, - .devsite-playlist--header-badge-info, - .devsite-playlist--header-details-info { - color: @crust; - } - - .devsite-playlist--sections .devsite-playlist--section[expanded] { - color: @crust; - } - - devsite-bookmark { - --devsite-bookmark-icon-color: @crust; - --devsite-bookmark-icon-arrow-color: @crust; - --devsite-dropdown-list-toggle-color-hover: @crust; - } - } - - devsite-content { - --devsite-search-results-breadcrumb-color: @subtext0; - } - - .devsite-site-logo { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .wd-footer-promo { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/web.dev/catppuccin.user.less b/styles/web.dev/catppuccin.user.less new file mode 100644 index 0000000000..715c99c30b --- /dev/null +++ b/styles/web.dev/catppuccin.user.less @@ -0,0 +1,202 @@ +/* ==UserStyle== +@name web.dev Catppuccin +@namespace github.com/catppuccin/userstyles/styles/web.dev +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/web.dev +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/web.dev/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aweb.dev +@description Soothing pastel theme for web.dev +@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("web.dev") { + @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; + } + } + + :focus-visible { + outline-color: @accent-color; + } + + --webdev-background-gray: @surface0; + --webdev-background-gray-2: @surface1; + --webdev-background-oficial-gray: @surface0; + --webdev-background-white: @base; + --webdev-google-colors-blue-50: @base; + --webdev-google-colors-blue-600: @accent-color; + --webdev-google-colors-blue-800: @accent-color; + --webdev-primary: @accent-color; + --webdev-text-text-1: @text; + --webdev-text-text-2: @subtext1; + --webdev-text-text-3: @subtext0; + --webdev-illustration-colors-blue: @blue; + --webdev-illustration-colors-gray: @surface2; + --webdev-illustration-colors-green: @green; + --webdev-illustration-colors-red: @red; + + --devsite-secondary-text-color: @subtext1; + --devsite-primary-border: 1px solid @surface0; + --devsite-secondary-border: 1px solid @surface2; + + --devsite-contrast-link-color: @accent-color; + --devsite-header-link-color-active: @text; + + --devsite-button-disabled-background: @surface0; + --devsite-button-disabled-color: @subtext0; + --devsite-button-primary-background-active: @accent-color; + --devsite-button-primary-color-active: @crust; + --devsite-button-primary-border-hover: 2px solid transparent; + + --devsite-input-background: @surface0; + --devsite-input-background-focus: fade(@accent-color, 30%); + + devsite-multiple-choice { + .devsite-multiple-choice-question { + color: @text; + } + + --devsite-multiple-choice-background: @surface0; + --devsite-multiple-choice-correct-background: fade(@green, 10%); + --devsite-multiple-choice-correct-color: @green; + --devsite-multiple-choice-incorrect-background: fade(@red, 10%); + --devsite-multiple-choice-incorrect-color: @red; + } + + body:not([codelabs-content-type="paginated"]) { + --devsite-notice-link-background-hover: @mantle; + + --devsite-caution-notice-background: fade(@red, 10%); + --devsite-caution-notice-color: @red; + --devsite-key-point-notice-background: fade(@sapphire, 10%); + --devsite-key-point-notice-color: @sapphire; + --devsite-key-term-notice-background: fade(@mauve, 10%); + --devsite-key-term-notice-color: @mauve; + --devsite-note-notice-background: fade(@blue, 10%); + --devsite-note-notice-color: @blue; + --devsite-status-notice-color: @teal; + --devsite-success-notice-background: fade(@green, 10%); + --devsite-success-notice-color: @green; + --devsite-warning-notice-background: fade(@peach, 10%); + --devsite-warning-notice-color: @peach; + } + + devsite-code, + devsite-code[dark-code], + devsite-content { + --devsite-code-background: @mantle; + --devsite-code-color: @text; + --devsite-code-buttons-color: @overlay2; + --devsite-code-buttons-hover: @subtext1; + + --devsite-var-color: @mauve; + --devsite-code-comments-color: @overlay2; + --devsite-code-keywords-color: @mauve; + --devsite-code-numbers-color: @peach; + --devsite-code-strings-color: @green; + --devsite-code-types-color: @yellow; + } + + devsite-header devsite-language-selector { + --devsite-select-color: @text; + } + + devsite-playlist { + .devsite-playlist--header h1:first-of-type, + .devsite-playlist--header-badge-info, + .devsite-playlist--header-details-info { + color: @crust; + } + + .devsite-playlist--sections .devsite-playlist--section[expanded] { + color: @crust; + } + + devsite-bookmark { + --devsite-bookmark-icon-color: @crust; + --devsite-bookmark-icon-arrow-color: @crust; + --devsite-dropdown-list-toggle-color-hover: @crust; + } + } + + devsite-content { + --devsite-search-results-breadcrumb-color: @subtext0; + } + + .devsite-site-logo { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .wd-footer-promo { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/whatsapp-web/catppuccin.user.css b/styles/whatsapp-web/catppuccin.user.css index d4dc6d5776..5a959da670 100644 --- a/styles/whatsapp-web/catppuccin.user.css +++ b/styles/whatsapp-web/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name WhatsApp Web Catppuccin +@name WhatsApp Web Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/whatsapp-web @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/whatsapp-web -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/whatsapp-web/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/whatsapp-web/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Awhatsapp-web @description Soothing pastel theme for WhatsApp Web @author Catppuccin @@ -15,673 +15,4 @@ @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 checkbox lighterMessages "Lighter incoming messages" 0 -==/UserStyle== */ - -@-moz-document domain("web.whatsapp.com") { - body { - #catppuccin(@lightFlavor, @accentColor); - } - - body.dark { - #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; - } - } - - .landing-wrapper-before { - background-color: @accent-color !important; - } - - /* STATUS PAGE */ - --status-background: @base !important; - .bfsx6evv { - background-color: @mantle !important; - } - - --modal-backdrop-solid: @base !important; - - /* join group pop up */ - --modal-background: @base !important; - - /* startup progress */ - --progress-primary: @accent-color !important; - --progress-background: @surface1 !important; - --startup-background: @base !important; - --startup-background-rgb: #rgbify(@base) []; - /* home page, no chat selected */ - --intro-background: @base !important; - --intro-border: @accent-color !important; - /* general background */ - --app-background: @base !important; - - /* CHAT LIST */ - /* nav bar background */ - --navbar-background: @mantle !important; - /* filters container background */ - --filters-container-background: @base !important; - /* filters item background */ - --filters-item-background: @surface0 !important; - /* filters item color */ - --filters-item-color: @subtext0 !important; - /* filters item background hover */ - --filters-item-background-hover: @surface1 !important; - /* filters item active background */ - --filters-item-active-background: fadeout(@accent-color, 70%) !important; - /* filters item active color */ - --filters-item-active-color: @accent-color !important; - /* chat list background */ - --background-default: @base !important; - /* chat list header */ - --panel-header-background: @mantle !important; - /* icons */ - --panel-header-icon: @text !important; - /* other warnings (notifications) */ - --butterbar-default-background: @mantle !important; - --butterbar-notification-icon: @sky !important; - /* loading messages warning */ - --butterbar-green-nux-background: @mantle !important; - /* update available warning */ - --butterbar-update-background: @mantle !important; - --butterbar-update-icon: @accent-color !important; - /* chat list search bar */ - --search-container-background: @base !important; - --search-input-container-background: @base !important; - --search-input-background: @surface0 !important; - --search-input-container-background-active: @mantle !important; - --icon-search-back: @accent-color !important; - /* archive icon */ - --icon-bright-highlight: @accent-color !important; - /* archived unread marker */ - --unread-marker-background: @accent-color !important; - --unread-timestamp: @accent-color !important; - /* archived chats header */ - --archived-chat-persistent-header-background: @crust !important; - /* unread voice message */ - --ptt-green: @green !important; - /* read voice message */ - --ptt-blue: @blue !important; - /* pinned chat icon */ - --icon-pinned: @accent-color !important; - /* last message in selected chat */ - --secondary-stronger: @subtext1 !important; - /* background for active and hover chats in chat list */ - --background-default-active: @surface1 !important; - --background-default-hover: @surface0 !important; - /* unread chats filter */ - --icon-high-emphasis: @green !important; - .p7idzaix { - color: @crust !important; - } - /* voice message playing */ - --ptt-ooc-background: @mantle !important; - - /* CONVERSATION */ - /* chat background */ - --conversation-panel-background: @mantle !important; - /* MESSAGES */ - /* background for incoming and outgoing messages */ - & when (@lighterMessages=1) { - --incoming-background: @surface1 !important; - --incoming-background-deeper: @surface2 !important; - /* arrow icon in messages */ - --incoming-background-rgb: #rgbify(@surface1) []; - } - & when (@lighterMessages=0) { - --incoming-background: @base !important; - --incoming-background-deeper: @surface0 !important; - /* arrow icon in messages */ - --incoming-background-rgb: #rgbify(@base) []; - } - --outgoing-background: @surface0 !important; - /* read double tick */ - --icon-ack: @blue !important; - /* received double tick */ - --bubble-meta-icon: @subtext0 !important; - /* message timestamp */ - --bubble-meta: @text !important; - --message-primary: @text !important; - /* POLL */ - /* creation */ - --poll-modal-background-color: @base !important; - --poll-modal-footer-background-color: @surface0 !important; - /* votes */ - --poll-bar-fill-receiver: @green !important; - --poll-bar-fill-sender: @green !important; - --checkbox-mark: @crust !important; - - /* audio duration */ - --audio-progress-metadata: @subtext0 !important; - /* system messages (unread or day messages in chats) */ - --system-message-text: @text !important; - --system-message-background: @crust !important; - /* unread system message background */ - --unread-background: @crust !important; - --unread-bar-background: @surface1 !important; - /* meta data for documents */ - --document-meta: @subtext1 !important; - /* mentions, links and link previews */ - --mention-at-symbol: @sapphire !important; - --link: @sapphire !important; - --link-preview: @text !important; - --link-preview-lighter: @subtext1 !important; - --link-preview-light: @subtext0 !important; - --outgoing-background-rgb: #rgbify(@surface0) []; - /* QUOTED MESSAGES */ - /* quoted messages */ - --quoted-message-text: @text !important; - /* background for quoted incoming and outgoing messages */ - --outgoing-background-deeper: @surface1 !important; - - /* SEARCH IN CHAT HIGHLIGHT */ - --highlight: @teal !important; - - /* quote colors */ - .bg-color-1 { - background-color: @green !important; - } - .color-1 { - color: @green !important; - } - .bg-color-2 { - background-color: @blue !important; - } - .color-2 { - color: @blue !important; - } - .bg-color-3 { - background-color: @pink !important; - } - .color-3 { - color: @pink !important; - } - .bg-color-4 { - background-color: @sapphire !important; - } - .color-4 { - color: @sapphire !important; - } - .bg-color-5 { - background-color: @peach !important; - } - .color-5 { - color: @peach !important; - } - .bg-color-6 { - background-color: @sky !important; - } - .color-6 { - color: @sky !important; - } - .bg-color-7 { - background-color: @yellow !important; - } - .color-7 { - color: @yellow !important; - } - .bg-color-8 { - background-color: @teal !important; - } - .color-8 { - color: @teal !important; - } - .bg-color-9 { - background-color: @lavender !important; - } - .color-9 { - color: @lavender !important; - } - .bg-color-10 { - background-color: @red!important; - } - .color-10 { - color: @red!important; - } - .bg-color-11 { - background-color: @mauve !important; - } - .color-11 { - color: @mauve !important; - } - .bg-color-12 { - background-color: @flamingo !important; - } - .color-12 { - color: @flamingo !important; - } - .bg-color-13 { - background-color: @rosewater !important; - } - .color-13 { - color: @rosewater !important; - } - .bg-color-14 { - background-color: @pink !important; - } - .color-14 { - color: @pink !important; - } - .bg-color-15 { - background-color: @maroon !important; - } - .color-15 { - color: @maroon !important; - } - .bg-color-16 { - background-color: @teal !important; - } - .color-16 { - color: @teal !important; - } - /* general text */ - --primary: @text !important; - --primary-strong: @text !important; - --primary-stronger: @text !important; - --primary-strongest: @text !important; - --secondary: @subtext0 !important; - --secondary-strongest-rgb: #rgbify(@text) []; - --inline-code-text: @blue !important; - /* chat list typing message */ - --typing: @green !important; - /* background for video player and image viewer */ - --media-viewer-background: @mantle !important; - /* not loaded media */ - --media-gallery-thumb-background: @crust !important; - - /* Group info/Contact info */ - --photopicker-overlay-background: fadeout(@mantle, 80%) !important; - --photopicker-overlay-background-rgb: #rgbify(@base) []; - --media-viewer-background-rgb: #rgbify(@base) []; - --drawer-background-deep: @crust !important; - /* group info read more */ - --input-button-more: @sapphire !important; - /* Group info thumbnails border */ - --chat-info-drawer-thumb-background: @surface2 !important; - /* Group admin badge background */ - --chat-marker-background: @mantle !important; - --chat-marker-border: @mantle !important; - /* Group admin badge foreground */ - --chat-marker: @subtext0 !important; - /* Media gallery */ - --drawer-gallery-background: @crust !important; - /* mute toggle */ - --switch-button-checked-color: @accent-color !important; - --switch-track-checked-color: @surface2 !important; - --switch-track-color: @surface2 !important; - --switch-button-color: @overlay1 !important; - - /* danger, block, exit and report buttons */ - --danger: @red!important; - - /* group added by someone not in contacts */ - --button-plain-background: @surface0 !important; - --button-plain-background-hover: @surface1 !important; - - /* EMOJI AND STICKERS */ - --panel-input-background: @surface0 !important; - --sticker-button-background: @surface1 !important; - --active-tab-marker: @accent-color !important; - - /* REACTIONS */ - --reactions-panel-background-color: @surface0 !important; - --reactions-tray-background: @surface0 !important; - --reactions-details-background: @surface0 !important; - --svg-gray-button: @surface0 !important; - - /* Forward message popup */ - --panel-background-colored-deeper: @crust !important; - --modal-backdrop: fadeout(@mantle, 80%) !important; - - /* Forward media caption */ - --forward-caption-preview-background: @mantle !important; - --forward-caption-preview-content: @crust !important; - - /* MEDIA EDITOR */ - /* background for media editor */ - --panel-background-deeper: @mantle !important; - /* message box for media editor */ - --media-editor-image-caption-input-background: @surface0 !important; - /* selected picture in media editor */ - --media-editor-thumb-border-active: @accent-color !important; - /* send button in media editor */ - --button-round-background: @accent-color !important; - - /* COMPOSE BAR */ - /* type a message bar and background */ - --compose-input-background: @surface0 !important; - --compose-input-border: @surface1 !important; - --compose-panel-background: @mantle !important; - --rich-text-panel-background: @mantle !important; - /* select messages fixes */ - --panel-background: @mantle !important; - --panel-background-rgb: #rgbify(@mantle) []; - --checkbox-background: @accent-color !important; - /* quoted message in compose */ - --popup-panel-background: @surface0 !important; - /* use Surface 0 for contrast, other colors don't pass AAA */ - /* mention list item background */ - --compose-panel-background-hover: @surface1 !important; - /* compose bar icons */ - --icon: @accent-color !important; - /* ATTACH ICONS */ - /* poll icon */ - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(6) - > button - > span - > svg - > circle { - fill: @green !important; - } - /* image icon */ - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(1) - > button - > span - > svg - > g:nth-child(1) - > g - > path:nth-child(2) { - fill: @pink !important; - } - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(1) - > button - > span - > svg - > g:nth-child(1) - > g - > path:nth-child(1) { - fill: @pink !important; - filter: brightness(85%) !important; - } - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(1) - > button - > span - > svg - > g:nth-child(1) - > g - > rect { - fill: @pink !important; - filter: brightness(70%) !important; - } - /* sticker icon */ - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(2) - > button - > span - > svg - > g - > circle { - fill: @blue !important; - filter: brightness(85%) !important; - } - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(2) - > button - > span - > svg - > g - > path:nth-child(2) { - fill: @blue !important; - } - /* camera icon */ - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(3) - > button - > span - > svg - > g:nth-child(1) - > g - > path:nth-child(1) { - fill: @red!important; - filter: brightness(85%) !important; - } - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(3) - > button - > span - > svg - > g:nth-child(1) - > g - > path:nth-child(2) { - fill: @red!important; - } - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(3) - > button - > span - > svg - > g:nth-child(1) - > g - > rect { - fill: @red!important; - filter: brightness(85%) !important; - } - /* document icon */ - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(4) - > button - > span - > svg - > g:nth-child(1) - > g - > path:nth-child(1) { - fill: @mauve !important; - filter: brightness(85%) !important; - } - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(4) - > button - > span - > svg - > g:nth-child(1) - > g - > path:nth-child(2) { - fill: @mauve !important; - } - /* contact icon */ - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(5) - > button - > span - > svg - > g:nth-child(1) - > g - > g - > path:nth-child(1) { - fill: @sky !important; - filter: brightness(85%) !important; - } - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(5) - > button - > span - > svg - > g:nth-child(1) - > g - > g - > path:nth-child(2) { - fill: @sky !important; - } - /* VOICE MESSAGE SENDING */ - --ptt-draft-button-send: @accent-color !important; - --ptt-draft-waveform-background: @base !important; - --ptt-draft-button-stop: @red !important; - --ptt-draft-button-stop-hover: @maroon !important; - - /* GENERAL OPTIONS */ - /* dropdown menus */ - --dropdown-background: @surface0 !important; - --dropdown-background-hover: @surface1 !important; - - /* OTHER SECTIONS */ - /* profile background */ - --drawer-background: @base !important; - /* communities, new chat, other panes */ - --panel-background-colored: @mantle !important; - --drawer-section-background: @base !important; - /* new chat icons */ - --round-icon-background: @green !important; - --inverse: @text !important; - /* title and icon for drawers */ - --drawer-header-title: @text !important; - /* buttons such as create community */ - --button-primary-background: @accent-color !important; - --button-primary-background-hover: fadeout(@accent-color, 80%) !important; - /* keyboard shortcuts background */ - --panel-background-lighter: @mantle !important; - /* active input in modals and drawers */ - --input-border-active: @accent-color !important; - - /* Start page drawing */ - #app - > div - > div - > div._2Ts6i._2xAQV - > div - > div - > div.WM0_u - > span - > svg - > path:nth-child(1) { - fill: @surface2 !important; - } - - /* Status unread dot */ - #df9d3429-f0ef-48b5-b5eb-f9d27b2deba6 > path:nth-child(2) { - fill: @accent-color !important; - } - - #side - > div._3gYev - > div - > div - > button - > div._3xdht._1ZD3q - > span - > svg - > path { - fill: @accent-color !important; - } - } -} - -#rgbify(@color) { - @rgb: red(@color) green(@color) blue(@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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/whatsapp-web/catppuccin.user.less b/styles/whatsapp-web/catppuccin.user.less new file mode 100644 index 0000000000..6d14687862 --- /dev/null +++ b/styles/whatsapp-web/catppuccin.user.less @@ -0,0 +1,685 @@ +/* ==UserStyle== +@name WhatsApp Web Catppuccin +@namespace github.com/catppuccin/userstyles/styles/whatsapp-web +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/whatsapp-web +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/whatsapp-web/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Awhatsapp-web +@description Soothing pastel theme for WhatsApp Web +@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"] + +@var checkbox lighterMessages "Lighter incoming messages" 0 +==/UserStyle== */ + +@-moz-document domain("web.whatsapp.com") { + body { + #catppuccin(@lightFlavor, @accentColor); + } + + body.dark { + #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; + } + } + + .landing-wrapper-before { + background-color: @accent-color !important; + } + + /* STATUS PAGE */ + --status-background: @base !important; + .bfsx6evv { + background-color: @mantle !important; + } + + --modal-backdrop-solid: @base !important; + + /* join group pop up */ + --modal-background: @base !important; + + /* startup progress */ + --progress-primary: @accent-color !important; + --progress-background: @surface1 !important; + --startup-background: @base !important; + --startup-background-rgb: #rgbify(@base)[]; + /* home page, no chat selected */ + --intro-background: @base !important; + --intro-border: @accent-color !important; + /* general background */ + --app-background: @base !important; + + /* CHAT LIST */ + /* nav bar background */ + --navbar-background: @mantle !important; + /* filters container background */ + --filters-container-background: @base !important; + /* filters item background */ + --filters-item-background: @surface0 !important; + /* filters item color */ + --filters-item-color: @subtext0 !important; + /* filters item background hover */ + --filters-item-background-hover: @surface1 !important; + /* filters item active background */ + --filters-item-active-background: fadeout(@accent-color, 70%) !important; + /* filters item active color */ + --filters-item-active-color: @accent-color !important; + /* chat list background */ + --background-default: @base !important; + /* chat list header */ + --panel-header-background: @mantle !important; + /* icons */ + --panel-header-icon: @text !important; + /* other warnings (notifications) */ + --butterbar-default-background: @mantle !important; + --butterbar-notification-icon: @sky !important; + /* loading messages warning */ + --butterbar-green-nux-background: @mantle !important; + /* update available warning */ + --butterbar-update-background: @mantle !important; + --butterbar-update-icon: @accent-color !important; + /* chat list search bar */ + --search-container-background: @base !important; + --search-input-container-background: @base !important; + --search-input-background: @surface0 !important; + --search-input-container-background-active: @mantle !important; + --icon-search-back: @accent-color !important; + /* archive icon */ + --icon-bright-highlight: @accent-color !important; + /* archived unread marker */ + --unread-marker-background: @accent-color !important; + --unread-timestamp: @accent-color !important; + /* archived chats header */ + --archived-chat-persistent-header-background: @crust !important; + /* unread voice message */ + --ptt-green: @green !important; + /* read voice message */ + --ptt-blue: @blue !important; + /* pinned chat icon */ + --icon-pinned: @accent-color !important; + /* last message in selected chat */ + --secondary-stronger: @subtext1 !important; + /* background for active and hover chats in chat list */ + --background-default-active: @surface1 !important; + --background-default-hover: @surface0 !important; + /* unread chats filter */ + --icon-high-emphasis: @green !important; + .p7idzaix { + color: @crust !important; + } + /* voice message playing */ + --ptt-ooc-background: @mantle !important; + + /* CONVERSATION */ + /* chat background */ + --conversation-panel-background: @mantle !important; + /* MESSAGES */ + /* background for incoming and outgoing messages */ + & when (@lighterMessages = 1) { + --incoming-background: @surface1 !important; + --incoming-background-deeper: @surface2 !important; + /* arrow icon in messages */ + --incoming-background-rgb: #rgbify(@surface1)[]; + } + & when (@lighterMessages = 0) { + --incoming-background: @base !important; + --incoming-background-deeper: @surface0 !important; + /* arrow icon in messages */ + --incoming-background-rgb: #rgbify(@base)[]; + } + --outgoing-background: @surface0 !important; + /* read double tick */ + --icon-ack: @blue !important; + /* received double tick */ + --bubble-meta-icon: @subtext0 !important; + /* message timestamp */ + --bubble-meta: @text !important; + --message-primary: @text !important; + /* POLL */ + /* creation */ + --poll-modal-background-color: @base !important; + --poll-modal-footer-background-color: @surface0 !important; + /* votes */ + --poll-bar-fill-receiver: @green !important; + --poll-bar-fill-sender: @green !important; + --checkbox-mark: @crust !important; + + /* audio duration */ + --audio-progress-metadata: @subtext0 !important; + /* system messages (unread or day messages in chats) */ + --system-message-text: @text !important; + --system-message-background: @crust !important; + /* unread system message background */ + --unread-background: @crust !important; + --unread-bar-background: @surface1 !important; + /* meta data for documents */ + --document-meta: @subtext1 !important; + /* mentions, links and link previews */ + --mention-at-symbol: @sapphire !important; + --link: @sapphire !important; + --link-preview: @text !important; + --link-preview-lighter: @subtext1 !important; + --link-preview-light: @subtext0 !important; + --outgoing-background-rgb: #rgbify(@surface0)[]; + /* QUOTED MESSAGES */ + /* quoted messages */ + --quoted-message-text: @text !important; + /* background for quoted incoming and outgoing messages */ + --outgoing-background-deeper: @surface1 !important; + + /* SEARCH IN CHAT HIGHLIGHT */ + --highlight: @teal !important; + + /* quote colors */ + .bg-color-1 { + background-color: @green !important; + } + .color-1 { + color: @green !important; + } + .bg-color-2 { + background-color: @blue !important; + } + .color-2 { + color: @blue !important; + } + .bg-color-3 { + background-color: @pink !important; + } + .color-3 { + color: @pink !important; + } + .bg-color-4 { + background-color: @sapphire !important; + } + .color-4 { + color: @sapphire !important; + } + .bg-color-5 { + background-color: @peach !important; + } + .color-5 { + color: @peach !important; + } + .bg-color-6 { + background-color: @sky !important; + } + .color-6 { + color: @sky !important; + } + .bg-color-7 { + background-color: @yellow !important; + } + .color-7 { + color: @yellow !important; + } + .bg-color-8 { + background-color: @teal !important; + } + .color-8 { + color: @teal !important; + } + .bg-color-9 { + background-color: @lavender !important; + } + .color-9 { + color: @lavender !important; + } + .bg-color-10 { + background-color: @red !important; + } + .color-10 { + color: @red !important; + } + .bg-color-11 { + background-color: @mauve !important; + } + .color-11 { + color: @mauve !important; + } + .bg-color-12 { + background-color: @flamingo !important; + } + .color-12 { + color: @flamingo !important; + } + .bg-color-13 { + background-color: @rosewater !important; + } + .color-13 { + color: @rosewater !important; + } + .bg-color-14 { + background-color: @pink !important; + } + .color-14 { + color: @pink !important; + } + .bg-color-15 { + background-color: @maroon !important; + } + .color-15 { + color: @maroon !important; + } + .bg-color-16 { + background-color: @teal !important; + } + .color-16 { + color: @teal !important; + } + /* general text */ + --primary: @text !important; + --primary-strong: @text !important; + --primary-stronger: @text !important; + --primary-strongest: @text !important; + --secondary: @subtext0 !important; + --secondary-strongest-rgb: #rgbify(@text)[]; + --inline-code-text: @blue !important; + /* chat list typing message */ + --typing: @green !important; + /* background for video player and image viewer */ + --media-viewer-background: @mantle !important; + /* not loaded media */ + --media-gallery-thumb-background: @crust !important; + + /* Group info/Contact info */ + --photopicker-overlay-background: fadeout(@mantle, 80%) !important; + --photopicker-overlay-background-rgb: #rgbify(@base)[]; + --media-viewer-background-rgb: #rgbify(@base)[]; + --drawer-background-deep: @crust !important; + /* group info read more */ + --input-button-more: @sapphire !important; + /* Group info thumbnails border */ + --chat-info-drawer-thumb-background: @surface2 !important; + /* Group admin badge background */ + --chat-marker-background: @mantle !important; + --chat-marker-border: @mantle !important; + /* Group admin badge foreground */ + --chat-marker: @subtext0 !important; + /* Media gallery */ + --drawer-gallery-background: @crust !important; + /* mute toggle */ + --switch-button-checked-color: @accent-color !important; + --switch-track-checked-color: @surface2 !important; + --switch-track-color: @surface2 !important; + --switch-button-color: @overlay1 !important; + + /* danger, block, exit and report buttons */ + --danger: @red !important; + + /* group added by someone not in contacts */ + --button-plain-background: @surface0 !important; + --button-plain-background-hover: @surface1 !important; + + /* EMOJI AND STICKERS */ + --panel-input-background: @surface0 !important; + --sticker-button-background: @surface1 !important; + --active-tab-marker: @accent-color !important; + + /* REACTIONS */ + --reactions-panel-background-color: @surface0 !important; + --reactions-tray-background: @surface0 !important; + --reactions-details-background: @surface0 !important; + --svg-gray-button: @surface0 !important; + + /* Forward message popup */ + --panel-background-colored-deeper: @crust !important; + --modal-backdrop: fadeout(@mantle, 80%) !important; + + /* Forward media caption */ + --forward-caption-preview-background: @mantle !important; + --forward-caption-preview-content: @crust !important; + + /* MEDIA EDITOR */ + /* background for media editor */ + --panel-background-deeper: @mantle !important; + /* message box for media editor */ + --media-editor-image-caption-input-background: @surface0 !important; + /* selected picture in media editor */ + --media-editor-thumb-border-active: @accent-color !important; + /* send button in media editor */ + --button-round-background: @accent-color !important; + + /* COMPOSE BAR */ + /* type a message bar and background */ + --compose-input-background: @surface0 !important; + --compose-input-border: @surface1 !important; + --compose-panel-background: @mantle !important; + --rich-text-panel-background: @mantle !important; + /* select messages fixes */ + --panel-background: @mantle !important; + --panel-background-rgb: #rgbify(@mantle)[]; + --checkbox-background: @accent-color !important; + /* quoted message in compose */ + --popup-panel-background: @surface0 !important; + /* use Surface 0 for contrast, other colors don't pass AAA */ + /* mention list item background */ + --compose-panel-background-hover: @surface1 !important; + /* compose bar icons */ + --icon: @accent-color !important; + /* ATTACH ICONS */ + /* poll icon */ + div._1OT67 + > div + > span + > div + > div + > ul + > li:nth-child(6) + > button + > span + > svg + > circle { + fill: @green !important; + } + /* image icon */ + div._1OT67 + > div + > span + > div + > div + > ul + > li:nth-child(1) + > button + > span + > svg + > g:nth-child(1) + > g + > path:nth-child(2) { + fill: @pink !important; + } + div._1OT67 + > div + > span + > div + > div + > ul + > li:nth-child(1) + > button + > span + > svg + > g:nth-child(1) + > g + > path:nth-child(1) { + fill: @pink !important; + filter: brightness(85%) !important; + } + div._1OT67 + > div + > span + > div + > div + > ul + > li:nth-child(1) + > button + > span + > svg + > g:nth-child(1) + > g + > rect { + fill: @pink !important; + filter: brightness(70%) !important; + } + /* sticker icon */ + div._1OT67 + > div + > span + > div + > div + > ul + > li:nth-child(2) + > button + > span + > svg + > g + > circle { + fill: @blue !important; + filter: brightness(85%) !important; + } + div._1OT67 + > div + > span + > div + > div + > ul + > li:nth-child(2) + > button + > span + > svg + > g + > path:nth-child(2) { + fill: @blue !important; + } + /* camera icon */ + div._1OT67 + > div + > span + > div + > div + > ul + > li:nth-child(3) + > button + > span + > svg + > g:nth-child(1) + > g + > path:nth-child(1) { + fill: @red !important; + filter: brightness(85%) !important; + } + div._1OT67 + > div + > span + > div + > div + > ul + > li:nth-child(3) + > button + > span + > svg + > g:nth-child(1) + > g + > path:nth-child(2) { + fill: @red !important; + } + div._1OT67 + > div + > span + > div + > div + > ul + > li:nth-child(3) + > button + > span + > svg + > g:nth-child(1) + > g + > rect { + fill: @red !important; + filter: brightness(85%) !important; + } + /* document icon */ + div._1OT67 + > div + > span + > div + > div + > ul + > li:nth-child(4) + > button + > span + > svg + > g:nth-child(1) + > g + > path:nth-child(1) { + fill: @mauve !important; + filter: brightness(85%) !important; + } + div._1OT67 + > div + > span + > div + > div + > ul + > li:nth-child(4) + > button + > span + > svg + > g:nth-child(1) + > g + > path:nth-child(2) { + fill: @mauve !important; + } + /* contact icon */ + div._1OT67 + > div + > span + > div + > div + > ul + > li:nth-child(5) + > button + > span + > svg + > g:nth-child(1) + > g + > g + > path:nth-child(1) { + fill: @sky !important; + filter: brightness(85%) !important; + } + div._1OT67 + > div + > span + > div + > div + > ul + > li:nth-child(5) + > button + > span + > svg + > g:nth-child(1) + > g + > g + > path:nth-child(2) { + fill: @sky !important; + } + /* VOICE MESSAGE SENDING */ + --ptt-draft-button-send: @accent-color !important; + --ptt-draft-waveform-background: @base !important; + --ptt-draft-button-stop: @red !important; + --ptt-draft-button-stop-hover: @maroon !important; + + /* GENERAL OPTIONS */ + /* dropdown menus */ + --dropdown-background: @surface0 !important; + --dropdown-background-hover: @surface1 !important; + + /* OTHER SECTIONS */ + /* profile background */ + --drawer-background: @base !important; + /* communities, new chat, other panes */ + --panel-background-colored: @mantle !important; + --drawer-section-background: @base !important; + /* new chat icons */ + --round-icon-background: @green !important; + --inverse: @text !important; + /* title and icon for drawers */ + --drawer-header-title: @text !important; + /* buttons such as create community */ + --button-primary-background: @accent-color !important; + --button-primary-background-hover: fadeout(@accent-color, 80%) !important; + /* keyboard shortcuts background */ + --panel-background-lighter: @mantle !important; + /* active input in modals and drawers */ + --input-border-active: @accent-color !important; + + /* Start page drawing */ + #app + > div + > div + > div._2Ts6i._2xAQV + > div + > div + > div.WM0_u + > span + > svg + > path:nth-child(1) { + fill: @surface2 !important; + } + + /* Status unread dot */ + #df9d3429-f0ef-48b5-b5eb-f9d27b2deba6 > path:nth-child(2) { + fill: @accent-color !important; + } + + #side + > div._3gYev + > div + > div + > button + > div._3xdht._1ZD3q + > span + > svg + > path { + fill: @accent-color !important; + } + } +} + +#rgbify(@color) { + @rgb: red(@color) green(@color) blue(@color); +} + +/* deno-fmt-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; }; +}; diff --git a/styles/wiki.nixos.org/catppuccin.user.css b/styles/wiki.nixos.org/catppuccin.user.css index 6a7ade3ac0..873705aaf9 100644 --- a/styles/wiki.nixos.org/catppuccin.user.css +++ b/styles/wiki.nixos.org/catppuccin.user.css @@ -1,10 +1,10 @@ /* ==UserStyle== -@name NixOS Wiki Catppuccin +@name NixOS Wiki Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/wiki.nixos.org @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/wiki.nixos.org -@version 2024.12.28 +@version 2024.12.29 @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Awiki.nixos.org -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/wiki.nixos.org/catppuccin.user.css +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/wiki.nixos.org/catppuccin.user.less @description Soothing pastel theme for NixOS Wiki @author Catppuccin @license MIT @@ -14,1482 +14,4 @@ @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 checkbox highlight-redirect "Highlight redirect links" 0 -==/UserStyle== */ - -@-moz-document domain('wiki.nixos.org') { - @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); - - @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]; - - --ctp-rosewater: @rosewater; - --ctp-flamingo: @flamingo; - --ctp-pink: @pink; - --ctp-mauve: @mauve; - --ctp-red: @red; - --ctp-maroon: @maroon; - --ctp-peach: @peach; - --ctp-yellow: @yellow; - --ctp-green: @green; - --ctp-teal: @teal; - --ctp-sky: @sky; - --ctp-sapphire: @sapphire; - --ctp-blue: @blue; - --ctp-lavender: @lavender; - --ctp-text: @text; - --ctp-subtext1: @subtext1; - --ctp-subtext0: @subtext0; - --ctp-overlay2: @overlay2; - --ctp-overlay1: @overlay1; - --ctp-overlay0: @overlay0; - --ctp-surface2: @surface2; - --ctp-surface1: @surface1; - --ctp-surface0: @surface0; - --ctp-base: @base; - --ctp-mantle: @mantle; - --ctp-crust: @crust; - - --background-color-base: @base; - --home-panel-heading-background: @mantle; - --home-panel-border-color: @surface0; - --table-border-color: @crust; - --table-header-background: @surface1; - --table-even-background: @surface2; - - background-color: @base; - - body, - .vector-feature-zebra-design-enabled .vector-header-container .mw-header, - .vector-feature-zebra-design-enabled .mw-page-container, - .vector-feature-zebra-design-enabled .vector-pinned-container, - .vector-feature-zebra-design-enabled - .vector-dropdown - .vector-dropdown-content, - .uls-lcd, - .uls-search, - .uls-filtersuggestion, - #uls-settings-block.uls-settings-block--vector-2022.uls-settings-block--with-add-languages, - .app-badges .footer-sidebar-content, - .pure-form input[type="search"], - .suggestions-dropdown, - .cdx-menu, - .vector-header-container .mw-header, - .mw-page-container, - .vector-pinned-container, - .vector-header-container .vector-sticky-header, - .mw-mmv-image, - .mw-body, - .frb-form-wrapper, - .mw-echo-ui-placeholderItemWidget, - .oo-ui-popupWidget-popup, - .mw-echo-ui-notificationItemWidget, - .oo-ui-optionWidget-selected { - background-color: @base; - } - - body, - .mw-heading, - h1, - h2, - h3, - h4, - h5, - h6, - .vector-feature-zebra-design-enabled body, - .vector-feature-zebra-design-enabled - .vector-toc - .vector-toc-list-item-active - > .vector-toc-link, - .vector-feature-zebra-design-enabled - .vector-toc - .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) - > .vector-toc-link, - .vector-feature-zebra-design-enabled - .vector-toc - .vector-toc-list-item-active.vector-toc-level-1-active - > .vector-toc-link, - .vector-menu-tabs .mw-list-item.selected a, - .vector-menu-tabs .mw-list-item.selected a:visited, - .cdx-button:enabled, - .cdx-button.cdx-button--fake-button--enabled, - .mw-footer li, - .vector-feature-zebra-design-enabled - .vector-toc - .vector-toc-level-1-active:not(.vector-toc-list-item-active) - > .vector-toc-link, - .central-featured-lang small, - .footer-sidebar-text, - .other-project-tagline, - .site-license, - .search-container .js-langpicker-label, - .langlist > ul > li, - .suggestion-title, - .cdx-menu-item--enabled .cdx-menu-item__content, - .mwe-popups .mwe-popups-extract, - .mw-body-content .mw-number-text h3, - .vector-pinnable-element .vector-menu-heading, - .vector-toc .vector-toc-list-item-active > .vector-toc-link, - .vector-toc - .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) - > .vector-toc-link, - .vector-toc - .vector-toc-list-item-active.vector-toc-level-1-active - > .vector-toc-link, - .uls-empty-state .uls-empty-state__header, - .uls-empty-state .uls-empty-state__desc, - .uls-no-results-found-title, - .mw-mmv-post-image, - .mw-mmv-credit, - .frb-form-wrapper, - .mw-echo-ui-notificationItemWidget-content-message-header, - .oo-ui-labelElement, - #contentSub:not(:empty) { - color: @text !important; - } - - .mw-parser-output .fmbox { - border-color: @surface2 !important; - background-color: @base !important; - } - - .cdx-thumbnail__image { - border-color: @text; - } - - /* maths */ - .equation-box, - .equation-box * { - background: none !important; - } - img.mwe-math-fallback-image-display, - img.mwe-math-fallback-image-inline { - & when (@lookup = latte) { - filter: brightness(0) saturate(100%) invert(31%) sepia(9%) - saturate(1499%) hue-rotate(196deg) brightness(90%) contrast(85%); - } - - & when (@lookup = frappe) { - filter: brightness(0) saturate(100%) invert(92%) sepia(6%) - saturate(3753%) hue-rotate(184deg) brightness(93%) contrast(106%); - } - - & when (@lookup = macchiato) { - filter: brightness(0) saturate(100%) invert(82%) sepia(7%) - saturate(1042%) hue-rotate(193deg) brightness(103%) contrast(92%); - } - - & when (@lookup = mocha) { - filter: brightness(0) saturate(100%) invert(83%) sepia(28%) - saturate(223%) hue-rotate(190deg) brightness(99%) contrast(93%); - } - } - - .mwe-popups .mwe-popups-extract[dir="ltr"]::after { - background-image: linear-gradient( - to right, - rgba(255, 255, 255, 0), - @surface0 50% - ); - } - table { - background: @surface2 !important; - } - - tr { - background-color: @surface0 !important; - } - - th { - background: @overlay0 !important; - color: @mantle !important; - } - - .quotebox, - div.thumbinner { - background-color: @surface0 !important; - border-color: @surface2 !important; - } - - .navbox-group, - .infobox-label { - color: @text !important; - } - - .cdx-button:enabled, - .cdx-text-input__input:enabled { - color: @text; - background-color: @base; - border-color: @surface2; - &:hover { - background-color: @mantle; - border-color: @text; - color: @text; - } - } - - .vector-dropdown .vector-dropdown-content, - .header-container.header-chrome { - background-color: @mantle; - } - - .skin-vector .uls-search { - border-bottom-color: @surface2; - } - - .oo-ui-textInputWidget, - .oo-ui-inputWidget-input { - color: @text !important; - background-color: @surface1 !important; - border-color: @surface2 !important; - } - - .oo-ui-pendingElement-pending { - background-color: @base; - background-image: linear-gradient( - 135deg, - @surface0 25%, - transparent 25%, - transparent 50%, - @surface0 50%, - @surface0 75%, - transparent 75%, - transparent - ); - } - - .oo-ui-tagItemWidget.oo-ui-widget-disabled { - color: @text; - background-color: @overlay0; - text-shadow: 0 0 0 @text; - border-color: @surface0; - } - - .oo-ui-buttonElement-frameless.oo-ui-widget-enabled - > .oo-ui-buttonElement-button, - .mw-mmv-credit, - .mw-mmv-options-dialog-header, - .mw-mmv-options-text-header { - color: @text; - } - - .mw-mmv-options-text-body { - color: @subtext0; - } - - .mw-ui-input:not(:disabled) { - background-color: @surface0; - color: @text; - border-color: @surface2; - } - - .mw-ui-button { - color: @mantle; - background-color: @accent-color; - border-color: @accent-color; - } - - .imbox-delete { - border-color: @red !important; - background-color: @surface0 !important; - } - - .imbox { - background-color: @overlay0 !important; - border-color: @peach !important; - } - - .talkheader-help { - background-color: @surface1 !important; - border-color: @green !important; - } - - .assess, - .assess-NA, - .navbox-subgroup { - background: @surface0 !important; - border-color: @surface1 !important; - } - - .documentation, - .documentation-container, - .documentation-metadata { - background-color: fade(@green, 15%) !important; - } - - .ambox, - .portalborder { - background-color: @surface1 !important; - border-color: @surface2 !important; - } - - .navbox-title { - color: @text !important; - } - - .mw-content-ltr.mw-highlight-lines pre, - .mw-content-ltr.content .mw-highlight-lines pre { - box-shadow: inset 2.75em 0 0 @mantle; - } - - .mw-redirect when (@highlight-redirect = 1) { - color: @green !important; - } - - .mbox-text { - color: @text !important; - } - - .sidebar-above, - .p, - .o { - color: @text !important; - } - .ni, - .mw-templatedata-doc-muted { - color: @subtext1 !important; - } - .nv, - .nn { - color: @blue !important; - } - - .sidebar-above a span { - color: @text !important; - } - - .sidebar-title-with-pretitle span { - color: @text !important; - } - - .nt { - color: @green !important; - } - - .nl { - color: @teal !important; - } - - .ambox-style { - border-left-color: @yellow !important; - } - - .mw-parser-output .mainpage-frame { - background: @surface0 !important; - border-color: @surface0 !important; - } - - .mw-parser-output .mainpage-heading-title { - background: linear-gradient( - to right, - rgba(saturate(lighten(@accent-color, 4%), -3%), 0.4), - @surface0 - ) !important; - } - - .hidden-title { - background-color: @green !important; - color: @mantle !important; - } - - .mw-mmv-post-image, - .mw-mmv-options-dialog { - background-color: @base; - color: @text; - } - .mw-mmv-image-metadata { - background-color: @base; - border-color: @base; - } - - .mw-mmv-dialog-down-arrow { - background-color: @base !important; - } - - .oo-ui-tagItemWidget.oo-ui-widget-enabled { - color: @text; - background-color: @overlay0 !important; - border-color: @surface0; - } - - ol.references li:target { - background-color: @surface2; - } - - .mw-body-content .error { - color: @red; - } - - .divbox-gray, - .infobox-above { - background-color: @surface2 !important; - border-color: @overlay0 !important; - } - - .biota > * > tr > th { - background-color: @yellow !important; - color: @mantle !important; - } - - .cmbox { - background-color: @blue !important; - } - - .wikitable { - background-color: @surface0 !important; - color: @text !important; - border-color: @surface2 !important; - } - - .wikitable > * > tr > th { - background-color: @surface1 !important; - } - - .wikitable > * > tr > td, - .wikitable > * > tr > th { - background-color: @surface0 !important; - color: @text !important; - border-color: @surface2; - } - - .mw-searchresults-has-iw .iw-result__header a { - color: @text; - } - - .mw-search-result-data { - color: @subtext0; - } - - .navbox-abovebelow { - background-color: @overlay2 !important; - border-color: @overlay2 !important; - } - - .vector-feature-zebra-design-enabled - .vector-pinnable-element - .vector-menu-heading { - color: @text; - border-bottom-color: @surface0; - } - - .mwe-popups .mwe-popups-container { - background-color: @surface0; - } - - .vector-pinnable-header-toggle-button { - background-color: @surface0; - color: @text; - &:hover { - background-color: @base; - } - } - - .mw-parser-output .navbox-list { - border-color: @surface0; - } - - .pure-button-primary-progressive, - .pure-button-primary-progressive:hover { - background-color: @accent-color; - border-color: @accent-color; - } - - .suggestion-link { - border-bottom-color: @surface0; - } - - .cdx-menu, - .skin-vector .uls-menu, - .suggestiodns-dropdown, - .cdx-search-input--has-end-button, - .vector-sticky-header, - .vector-sticky-header-context-bar, - .mw-heading2 { - border-color: @surface2; - } - - .suggestion-link.active { - background-color: fade(@accent-color, 20%); - .suggestion-title { - color: @accent-color; - } - } - - .mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted, - .cdx-menu-item--enabled.cdx-menu-item--highlighted { - background-color: fade(@accent-color, 20%); - } - - .mw-echo-ui-sortedListWidget, - .mw-echo-ui-sortedListWidget-group, - .mw-echo-ui-subGroupListWidget-header { - border-color: @surface2; - } - - .mw-mmv-post-image, - .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive - .cdx-button__icon { - background-color: @crust; - } - - .cdx-text-input__input:enabled::placeholder, - .cdx-text-input__input:enabled ~ .cdx-text-input__icon-vue, - .skin-vector .uls-languagefilter, - .skin-vector .uls-lcd-region-title, - .suggestion-description, - .cdx-menu-item--enabled .cdx-menu-item__text__description, - .mw-number-text, - .boilerplate > div:nth-child(3) > span:nth-child(1), - .boilerplate > div:nth-child(4) > span:nth-child(2) { - color: @subtext0 !important; - } - - input:hover + .cdx-button.cdx-button--action-progressive { - background-color: fade(@accent-color, 12.5%); - } - - #pt-notifications-alert .mw-echo-unseen-notifications::after { - background-color: @red !important; - } - - #pt-notifications-notice .mw-echo-unseen-notifications::after { - background-color: @blue !important; - } - - a, - .mw-parser-output a.external:visited { - color: @accent-color; - &:visited { - color: @mauve; - } - } - - a.new, - .mw-parser-output .cs1-visible-error, - .vector-menu-tabs .mw-list-item.new a, - .mw-plusminus-neg { - color: @red; - } - - a.mw-selflink { - color: @text; - } - - #searchInput { - color: @text; - &:hover { - border-color: @surface2; - } - &:focus { - border-color: @accent-color; - } - } - - .pure-form input[type="search"] { - border-color: @surface2; - box-shadow: inset 0 0 0 1px @surface2; - } - - #pt-notifications-alert .mw-echo-notifications-badge::after, - #pt-notifications-notice .mw-echo-notifications-badge::after, - .mw-echo-notification-badge-nojs::after { - border-color: @crust; - background-color: @accent-color; - color: @base; - } - - h2 { - border-bottom-color: @surface2; - } - - .mw-footer { - border-top-color: @surface2; - } - - .bookshelf { - border-top-color: @surface0; - box-shadow: 0 -1px 0 @surface0; - } - - body.ns-talk .mw-parser-output .mp-toolbox, - .mw-parser-output .tmbox, - #talkheader { - border-color: fade(@yellow, 20%) !important; - background-color: fade(@yellow, 10%) !important; - } - - body.ns-talk .mw-parser-output .mp-toolbox-daily th { - border-color: fade(@yellow, 80%) !important; - background-color: fade(@yellow, 20%) !important; - } - - .fn.org { - color: @accent-color; - } - - .mw-parser-output .mp-toolbox-daily th, - .mw-parser-output td.mp-toolbox-tfl-not { - background: fade(@yellow, 20%) !important; - border-color: fade(@yellow, 20%) !important; - } - - body.ns-talk .mw-parser-output .mp-toolbox-daily { - border-color: fade(@yellow, 20%) !important; - background: none !important; - } - - .mw-parser-output tr + tr > .navbox-list, - .mw-parser-output tr + tr > .navbox-group { - border-top-color: @surface0; - } - - .ext-phonos-PhonosButton.oo-ui-buttonElement-frameless.oo-ui-buttonWidget - > .oo-ui-buttonElement-button:hover { - background-color: fade(@accent-color, 20%); - } - - .styled-select:hover { - background-color: @surface0; - } - - .lang-list-button, - .lang-list-button:hover { - background-color: @base; - border-color: @surface1; - outline-color: @base; - } - - .cdx-typeahead-search__search-footer__icon.cdx-icon { - color: @subtext0; - } - - .vector-toc - .vector-toc-level-1-active:not(.vector-toc-list-item-active) - > .vector-toc-link { - color: @text !important; - } - - .lang-list-active .lang-list-button { - background-color: @base; - border-color: @surface1; - outline-color: @base; - } - - .lang-list-button:focus { - box-shadow: inset 0 0 0 1px @accent-color; - } - - .lang-list-border { - background-color: @surface1; - } - - .infobox-header { - background-color: @surface1 !important; - color: @text !important; - } - - td[style*="background-color"], - td[style*="background-color"] * { - color: @crust !important; - } - - #toc-Services > a:nth-child(1) > div:nth-child(1) { - color: @text !important; - } - - .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive, - .vector-menu-tabs .mw-list-item a, - .vector-feature-zebra-design-enabled .vector-toc .vector-toc-link, - .mw-parser-output a.extiw, - .mw-parser-output a.external, - .mw-collapsible-toggle-default .mw-collapsible-text, - .vector-feature-zebra-design-enabled - .vector-pinnable-element - .mw-list-item - a, - .vector-feature-zebra-design-enabled - .vector-dropdown-content - .mw-list-item - a, - .vector-feature-zebra-design-enabled - .vector-pinnable-element - .mw-list-item - a:not(.mw-selflink):visited, - .vector-feature-zebra-design-enabled - .vector-dropdown-content - .mw-list-item - a:not(.mw-selflink):visited, - .uls-language-block a, - .lang-list-button, - .fancycaptcha-reload, - #pt-userpage-2 a:not(.mw-selflink), - .vector-pinnable-element .mw-list-item a, - .vector-pinnable-element .mw-list-item a:not(.mw-selflink):visited, - .vector-toc .vector-toc-link, - .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive - > .oo-ui-buttonElement-button, - .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive - > .oo-ui-buttonElement-button:hover, - .vector-dropdown-content .mw-list-item a, - .vector-dropdown-content .mw-list-item a:not(.mw-selflink):visited { - color: @accent-color; - } - - .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive, - .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive, - .mw-ui-button.mw-ui-progressive:not(:disabled), - .mw-ui-button.mw-ui-progressive:not(:disabled):hover { - background-color: @accent-color; - border-color: @accent-color; - color: @base; - } - - .mw-message-box-warning, - .boilerplate { - border-color: @accent-color !important; - background-color: fade(@accent-color, 25%) !important; - color: @text; - } - - .vector-feature-zebra-design-enabled .vector-sticky-pinned-container::after, - .vector-sticky-pinned-container::after { - background: none; - } - - .vector-feature-zebra-design-enabled .vector-pinnable-header-toggle-button { - background-color: @surface0; - color: @text; - &:hover { - background-color: @base; - } - } - - .vector-feature-zebra-design-enabled .vector-pinnable-header, - .vector-pinnable-header, - .vector-pinnable-element .vector-menu-heading { - border-bottom-color: @surface0; - } - - hr { - border-bottom-color: @base; - } - - .central-featured-lang strong:hover, - .link-box:hover, - .central-featured-lang :hover, - .other-project-link:hover, - .lang-list-container { - background-color: @surface0; - } - - .vector-page-toolbar-container { - box-shadow: 0 1px @surface1; - } - - .mw-parser-output .navbox-even { - background-color: @surface1; - } - - .vector-feature-zebra-design-enabled .vector-page-titlebar::after, - .mw-parser-output .wikipedia-languages-prettybars, - .vector-page-titlebar::after { - background-color: @surface2 !important; - } - - table.expanded:nth-child(2) > tbody:nth-child(1) > tr:nth-child(2) { - background-color: fade(@accent-color, 20%) !important; - } - - .client-js .mw-content-ltr .mw-editsection-bracket:first-of-type, - .client-js .mw-content-ltr .mw-editsection-bracket:not(:first-of-type), - .mw-collapsible-toggle-default::before, - .mw-collapsible-toggle-default::after { - color: @subtext1; - } - - .infobox, - .mw-parser-output .navbox, - .catlinks, - .mw-parser-output #mp-topbanner, - .mw-parser-output .sidebar, - .fancycaptcha-captcha-container, - .fancycaptcha-captcha-and-reload, - .cdx-checkbox__icon, - .mw-message-box, - .uls-menu .uls-no-results-view .uls-no-found-more, - .client-js - .vector-below-page-title - .vector-page-titlebar-toc - > label:nth-child(2), - .mw-parser-output .ombox, - code, - .oo-ui-buttonElement-framed.oo-ui-widget-enabled - > .oo-ui-buttonElement-button, - .mw-mmv-label, - #page-secondary-actions > a, - .mw-parser-output .ambox, - td[class="sidebar-navbar"], - textarea, - .mw-parser-output .side-box { - background-color: @surface0 !important; - color: @text !important; - border-color: @surface2 !important; - } - - #pagehistory li.selected { - background-color: @surface0 !important; - color: @text !important; - border-color: @surface2 !important; - outline-color: @surface2 !important; - } - - .cdx-checkbox__icon { - border-color: @accent-color !important; - } - - .fancycaptcha-captcha-container .mw-ui-inputو .mw-ui-input:not(:disabled) { - background-color: @base !important; - color: @text !important; - border-color: @surface1; - } - - .mw-ui-input:not(:disabled), - .mw-ui-button:not(:disabled) { - background-color: @base !important; - color: @text !important; - border-color: @surface1 !important; - } - - .mw-parser-output .module-shortcutboxplain { - background-color: @base !important; - color: @text !important; - border-color: @surface2; - } - - .sidebar-pretitle, - .sidebar-title-with-pretitle, - .sidebar-list-title { - background-color: fade(@accent-color, 20%) !important; - } - - .mw-parser-output #mp-bottom, - .mw-parser-output .sidebar-collapse .sidebar-below { - border-color: @surface2; - } - - .lang-list-content, - .bookshelf .text { - background-color: @surface0; - } - - .mw-parser-output #mp-bottom .mp-h2, - .uls-language-block > ul > li:hover { - background: @surface0; - border-color: @surface2; - } - - figure[typeof~="mw:File/Thumb"] { - background-color: @mantle !important; - color: @text !important; - border-top-color: @surface2; - border-left-color: @surface2; - border-right-color: @surface2; - > figcaption { - background-color: @mantle !important; - color: @text !important; - border-bottom-color: @surface2; - border-left-color: @surface2; - border-right-color: @surface2; - } - > :not(figcaption) .mw-file-element { - color: @surface2 !important; - border-color: @surface2; - } - } - - .mw-parser-output #mp-left, - .mw-parser-output #mp-left .mp-h2, - th[class="sidebar-title"] { - background-color: fade(@green, 10%) !important; - border-color: fade(@green, 20%) !important; - } - - .mw-plusminus-pos { - color: @green !important; - } - - .mw-parser-output #mp-right, - .mw-parser-output #mp-right .mp-h2 { - background-color: fade(@blue, 10%) !important; - border-color: fade(@blue, 20%) !important; - } - - .mw-parser-output #mp-lower, - .mw-parser-output #mp-lower .mp-h2 { - background-color: fade(@mauve, 10%) !important; - border-color: fade(@mauve, 20%) !important; - } - - .mw-collapsible-toggle-default:active .mw-collapsible-text { - color: @peach; - } - - .mw-parser-output #mp-middle, - .mw-parser-output #mp-middle .mp-h2 { - background-color: fade(@pink, 10%) !important; - border-color: fade(@pink, 20%) !important; - } - - .mw-parser-output .navbox-title, - .summary, - .infobox > tbody:nth-child(1) > tr:nth-child(4) > th:nth-child(1), - .infobox > tbody:nth-child(1) > tr:nth-child(6) > th:nth-child(1) { - background-color: fade(@accent-color, 20%) !important; - } - - .infobox > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1) { - background-color: @surface1 !important; - } - - .mw-parser-output .navbox-group, - table.expanded:nth-child(2) > tbody:nth-child(1) > tr:nth-child(3), - table.expanded:nth-child(2) - > tbody:nth-child(1) - > tr:nth-child(4) - > td:nth-child(2) - > table:nth-child(2) - > tbody:nth-child(1) - > tr:nth-child(1), - table.expanded:nth-child(2) > tbody:nth-child(1) > tr:nth-child(1), - table.nowraplinks:nth-child(1) - > tbody:nth-child(1) - > tr:nth-child(3) - > td:nth-child(1) - > table:nth-child(2) - > tbody:nth-child(1) - > tr:nth-child(1), - table.nowraplinks:nth-child(1) - > tbody:nth-child(1) - > tr:nth-child(4) - > td:nth-child(1) - > table:nth-child(2) - > tbody:nth-child(1) - > tr:nth-child(1), - table.nowraplinks:nth-child(1) - > tbody:nth-child(1) - > tr:nth-child(5) - > td:nth-child(1) - > table:nth-child(2) - > tbody:nth-child(1) - > tr:nth-child(1), - .navbox-abovebelow { - background-color: @surface1 !important; - } - - .mw-parser-output .tracklist > tbody { - color: inherit; - - > .tracklist-total-length * { - background-color: @overlay1; - color: @base; - } - } - - .mw-content-ltr - > table:nth-child(20) - > tbody:nth-child(1) - > tr:nth-child(2) - > td:nth-child(2) { - border-color: @surface2 !important; - background-color: @surface0 !important; - } - - .noarticletext, - #noarticletext { - background-color: @base !important; - } - - #sisterproject { - background-color: @mantle !important; - } - - [style="color:#02a64f;line-height:initial"] { - color: @green !important; - } - - [style="color:#f78e1e;line-height:initial"] { - color: @peach !important; - } - - [style="color:#77278b;line-height:initial"] { - color: @mauve !important; - } - - [style="color:#87746a;line-height:initial"] { - color: @maroon !important; - } - - [style="color:#009aC8;line-height:initial"] { - color: @sky !important; - } - - [style="color:#ffd520;line-height:initial"] { - color: @yellow !important; - } - - [style="color:#0060a9;line-height:initial"] { - color: @blue !important; - } - - table.nowraplinks:nth-child(4) > tbody:nth-child(1) > tr:nth-child(1), - .navbox-list-with-group.navbox-list.navbox-odd { - background-color: @surface0 !important; - } - - .mw-parser-output tr + tr > .navbox-abovebelow { - border-color: @base; - } - - .catlinks li { - border-left-color: @surface2; - } - - .vector-icon.mw-ui-icon-wikimedia-menu { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-ellipsis { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-appearance { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .vector-feature-zebra-design-enabled - .vector-dropdown - .vector-dropdown-label:not(.cdx-button--icon-only)::after, - .vector-icon.mw-ui-icon-wikimedia-expand { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .cdx-checkbox__input:checked:not(:indeterminate) - + .cdx-checkbox__icon::before { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .vector-page-titlebar - .mw-portlet-lang - .vector-dropdown-label.cdx-button--action-progressive.cdx-button--weight-quiet::after { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .vector-dropdown .vector-dropdown-label:not(.cdx-button--icon-only)::after { - @svg: escape( - '' - ); - background: url("data:image/svg+xml,@{svg}") !important; - } - - .vector-icon.mw-ui-icon-wikimedia-language-progressive { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .vector-icon.mw-ui-icon-wikimedia-language { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .mw-parser-output a.external { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .plainlinks a.external { - background: none !important; - } - - #mw-indicator-mw-helplink a { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .cdx-search-input .cdx-text-input__icon.cdx-text-input__start-icon { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .vector-icon.mw-ui-icon-wikimedia-listBullet { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - ul { - @svg: escape( - '' - ); - list-style-image: url("data:image/svg+xml,@{svg}"); - } - - .oo-ui-icon-volumeUp, - .mw-ui-icon-volumeUp::before { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-fullScreen { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .fancycaptcha-reload { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .popups-icon--settings { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-userAvatar { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-watchlist { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-tray { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-bell { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-user-menu-logged-in .vector-dropdown-label::after { - @svg: escape( - '' - ); - background: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-star { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-userTalk { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-sandbox { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-settings { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-unStar { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .oo-ui-image-progressive.oo-ui-icon-settings { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .oo-ui-icon-bell { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .oo-ui-icon-next { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .oo-ui-icon-settings { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .oo-ui-icon-expand { - @svg: escape( - ' expand ' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .oo-ui-icon-tray { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-labFlask { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .mw-ui-icon-vector-gadget-pt-darkmode { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .client-dark-mode .mw-ui-icon-vector-gadget-pt-darkmode { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-userContributions { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-logOut { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .uls-search-label, - .vector-icon.mw-ui-icon-wikimedia-search { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .mw-ui-icon-vector-gadget-pt-darkmode-sticky-header { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .cdx-message .cdx-message__icon { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-edit { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-history { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-speechBubbles { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-editLock { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .branding-box > a:nth-child(1) > span:nth-child(1) > img:nth-child(1) { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .panel-heading, - .mw-pt-languages-list, - .mw-pt-languages-label { - color: @text; - background-color: @base; - } - .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle, - .oo-ui-inputWidget-input, - .mw-widget-dateInputWidget-handle, - .oo-ui-menuSelectWidget { - background-color: @mantle !important; - color: @text !important; - } - .oo-ui-menuOptionWidget:hover { - background-color: @surface1; - color: @text; - } - .cdx-search-input__end-button { - background-color: @crust !important; - } - .mw-pt-languages { - border-bottom-color: @surface0; - } - .mw-pt-progress--complete::after, - .mw-pt-progress--high::after { - border-color: @accent-color; - background: conic-gradient(@text 0, @accent-color 0); - } - pre, - .oo-ui-panelLayout-framed { - border-color: @surface0; - } - #vector-page-titlebar-toc-label { - background-color: @mantle; - color: @subtext0 !important; - border-color: @subtext0 !important; - } - tbody * { - background-color: @surface0 !important; - border-color: @surface2 !important; - } - - [style*="padding: 0.5em; margin: 0.50em 0; background-color: #C1E5FF; border: thin solid #1D99F3; overflow: hidden;"] { - background-color: @sapphire !important; - color: @mantle !important; - } - [style*="padding: 0.5em; margin: 0.50em 0; background-color: #F6F6F6; border: thin solid #31363B; overflow: hidden;"] { - background-color: @rosewater !important; - color: @mantle !important; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/wiki.nixos.org/catppuccin.user.less b/styles/wiki.nixos.org/catppuccin.user.less new file mode 100644 index 0000000000..da1df756a4 --- /dev/null +++ b/styles/wiki.nixos.org/catppuccin.user.less @@ -0,0 +1,1497 @@ +/* ==UserStyle== +@name NixOS Wiki Catppuccin +@namespace github.com/catppuccin/userstyles/styles/wiki.nixos.org +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/wiki.nixos.org +@version 2024.12.29.1 +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Awiki.nixos.org +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/wiki.nixos.org/catppuccin.user.less +@description Soothing pastel theme for NixOS Wiki +@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"] +@var checkbox highlight-redirect "Highlight redirect links" 0 +==/UserStyle== */ + +@-moz-document domain("wiki.nixos.org") { + @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); + + @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]; + + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + + --background-color-base: @base; + --home-panel-heading-background: @mantle; + --home-panel-border-color: @surface0; + --table-border-color: @crust; + --table-header-background: @surface1; + --table-even-background: @surface2; + + background-color: @base; + + body, + .vector-feature-zebra-design-enabled .vector-header-container .mw-header, + .vector-feature-zebra-design-enabled .mw-page-container, + .vector-feature-zebra-design-enabled .vector-pinned-container, + .vector-feature-zebra-design-enabled + .vector-dropdown + .vector-dropdown-content, + .uls-lcd, + .uls-search, + .uls-filtersuggestion, + #uls-settings-block.uls-settings-block--vector-2022.uls-settings-block--with-add-languages, + .app-badges .footer-sidebar-content, + .pure-form input[type="search"], + .suggestions-dropdown, + .cdx-menu, + .vector-header-container .mw-header, + .mw-page-container, + .vector-pinned-container, + .vector-header-container .vector-sticky-header, + .mw-mmv-image, + .mw-body, + .frb-form-wrapper, + .mw-echo-ui-placeholderItemWidget, + .oo-ui-popupWidget-popup, + .mw-echo-ui-notificationItemWidget, + .oo-ui-optionWidget-selected { + background-color: @base; + } + + body, + .mw-heading, + h1, + h2, + h3, + h4, + h5, + h6, + .vector-feature-zebra-design-enabled body, + .vector-feature-zebra-design-enabled + .vector-toc + .vector-toc-list-item-active + > .vector-toc-link, + .vector-feature-zebra-design-enabled + .vector-toc + .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) + > .vector-toc-link, + .vector-feature-zebra-design-enabled + .vector-toc + .vector-toc-list-item-active.vector-toc-level-1-active + > .vector-toc-link, + .vector-menu-tabs .mw-list-item.selected a, + .vector-menu-tabs .mw-list-item.selected a:visited, + .cdx-button:enabled, + .cdx-button.cdx-button--fake-button--enabled, + .mw-footer li, + .vector-feature-zebra-design-enabled + .vector-toc + .vector-toc-level-1-active:not(.vector-toc-list-item-active) + > .vector-toc-link, + .central-featured-lang small, + .footer-sidebar-text, + .other-project-tagline, + .site-license, + .search-container .js-langpicker-label, + .langlist > ul > li, + .suggestion-title, + .cdx-menu-item--enabled .cdx-menu-item__content, + .mwe-popups .mwe-popups-extract, + .mw-body-content .mw-number-text h3, + .vector-pinnable-element .vector-menu-heading, + .vector-toc .vector-toc-list-item-active > .vector-toc-link, + .vector-toc + .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) + > .vector-toc-link, + .vector-toc + .vector-toc-list-item-active.vector-toc-level-1-active + > .vector-toc-link, + .uls-empty-state .uls-empty-state__header, + .uls-empty-state .uls-empty-state__desc, + .uls-no-results-found-title, + .mw-mmv-post-image, + .mw-mmv-credit, + .frb-form-wrapper, + .mw-echo-ui-notificationItemWidget-content-message-header, + .oo-ui-labelElement, + #contentSub:not(:empty) { + color: @text !important; + } + + .mw-parser-output .fmbox { + border-color: @surface2 !important; + background-color: @base !important; + } + + .cdx-thumbnail__image { + border-color: @text; + } + + /* maths */ + .equation-box, + .equation-box * { + background: none !important; + } + img.mwe-math-fallback-image-display, + img.mwe-math-fallback-image-inline { + & when (@lookup = latte) { + filter: brightness(0) saturate(100%) invert(31%) sepia(9%) saturate( + 1499% + ) hue-rotate(196deg) brightness(90%) contrast(85%); + } + + & when (@lookup = frappe) { + filter: brightness(0) saturate(100%) invert(92%) sepia(6%) saturate( + 3753% + ) hue-rotate(184deg) brightness(93%) contrast(106%); + } + + & when (@lookup = macchiato) { + filter: brightness(0) saturate(100%) invert(82%) sepia(7%) saturate( + 1042% + ) hue-rotate(193deg) brightness(103%) contrast(92%); + } + + & when (@lookup = mocha) { + filter: brightness(0) saturate(100%) invert(83%) sepia(28%) saturate( + 223% + ) hue-rotate(190deg) brightness(99%) contrast(93%); + } + } + + .mwe-popups .mwe-popups-extract[dir="ltr"]::after { + background-image: linear-gradient( + to right, + rgba(255, 255, 255, 0), + @surface0 50% + ); + } + table { + background: @surface2 !important; + } + + tr { + background-color: @surface0 !important; + } + + th { + background: @overlay0 !important; + color: @mantle !important; + } + + .quotebox, + div.thumbinner { + background-color: @surface0 !important; + border-color: @surface2 !important; + } + + .navbox-group, + .infobox-label { + color: @text !important; + } + + .cdx-button:enabled, + .cdx-text-input__input:enabled { + color: @text; + background-color: @base; + border-color: @surface2; + &:hover { + background-color: @mantle; + border-color: @text; + color: @text; + } + } + + .vector-dropdown .vector-dropdown-content, + .header-container.header-chrome { + background-color: @mantle; + } + + .skin-vector .uls-search { + border-bottom-color: @surface2; + } + + .oo-ui-textInputWidget, + .oo-ui-inputWidget-input { + color: @text !important; + background-color: @surface1 !important; + border-color: @surface2 !important; + } + + .oo-ui-pendingElement-pending { + background-color: @base; + background-image: linear-gradient( + 135deg, + @surface0 25%, + transparent 25%, + transparent 50%, + @surface0 50%, + @surface0 75%, + transparent 75%, + transparent + ); + } + + .oo-ui-tagItemWidget.oo-ui-widget-disabled { + color: @text; + background-color: @overlay0; + text-shadow: 0 0 0 @text; + border-color: @surface0; + } + + .oo-ui-buttonElement-frameless.oo-ui-widget-enabled + > .oo-ui-buttonElement-button, + .mw-mmv-credit, + .mw-mmv-options-dialog-header, + .mw-mmv-options-text-header { + color: @text; + } + + .mw-mmv-options-text-body { + color: @subtext0; + } + + .mw-ui-input:not(:disabled) { + background-color: @surface0; + color: @text; + border-color: @surface2; + } + + .mw-ui-button { + color: @mantle; + background-color: @accent-color; + border-color: @accent-color; + } + + .imbox-delete { + border-color: @red !important; + background-color: @surface0 !important; + } + + .imbox { + background-color: @overlay0 !important; + border-color: @peach !important; + } + + .talkheader-help { + background-color: @surface1 !important; + border-color: @green !important; + } + + .assess, + .assess-NA, + .navbox-subgroup { + background: @surface0 !important; + border-color: @surface1 !important; + } + + .documentation, + .documentation-container, + .documentation-metadata { + background-color: fade(@green, 15%) !important; + } + + .ambox, + .portalborder { + background-color: @surface1 !important; + border-color: @surface2 !important; + } + + .navbox-title { + color: @text !important; + } + + .mw-content-ltr.mw-highlight-lines pre, + .mw-content-ltr.content .mw-highlight-lines pre { + box-shadow: inset 2.75em 0 0 @mantle; + } + + .mw-redirect when (@highlight-redirect = 1) { + color: @green !important; + } + + .mbox-text { + color: @text !important; + } + + .sidebar-above, + .p, + .o { + color: @text !important; + } + .ni, + .mw-templatedata-doc-muted { + color: @subtext1 !important; + } + .nv, + .nn { + color: @blue !important; + } + + .sidebar-above a span { + color: @text !important; + } + + .sidebar-title-with-pretitle span { + color: @text !important; + } + + .nt { + color: @green !important; + } + + .nl { + color: @teal !important; + } + + .ambox-style { + border-left-color: @yellow !important; + } + + .mw-parser-output .mainpage-frame { + background: @surface0 !important; + border-color: @surface0 !important; + } + + .mw-parser-output .mainpage-heading-title { + background: linear-gradient( + to right, + rgba(saturate(lighten(@accent-color, 4%), -3%), 0.4), + @surface0 + ) !important; + } + + .hidden-title { + background-color: @green !important; + color: @mantle !important; + } + + .mw-mmv-post-image, + .mw-mmv-options-dialog { + background-color: @base; + color: @text; + } + .mw-mmv-image-metadata { + background-color: @base; + border-color: @base; + } + + .mw-mmv-dialog-down-arrow { + background-color: @base !important; + } + + .oo-ui-tagItemWidget.oo-ui-widget-enabled { + color: @text; + background-color: @overlay0 !important; + border-color: @surface0; + } + + ol.references li:target { + background-color: @surface2; + } + + .mw-body-content .error { + color: @red; + } + + .divbox-gray, + .infobox-above { + background-color: @surface2 !important; + border-color: @overlay0 !important; + } + + .biota > * > tr > th { + background-color: @yellow !important; + color: @mantle !important; + } + + .cmbox { + background-color: @blue !important; + } + + .wikitable { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface2 !important; + } + + .wikitable > * > tr > th { + background-color: @surface1 !important; + } + + .wikitable > * > tr > td, + .wikitable > * > tr > th { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface2; + } + + .mw-searchresults-has-iw .iw-result__header a { + color: @text; + } + + .mw-search-result-data { + color: @subtext0; + } + + .navbox-abovebelow { + background-color: @overlay2 !important; + border-color: @overlay2 !important; + } + + .vector-feature-zebra-design-enabled + .vector-pinnable-element + .vector-menu-heading { + color: @text; + border-bottom-color: @surface0; + } + + .mwe-popups .mwe-popups-container { + background-color: @surface0; + } + + .vector-pinnable-header-toggle-button { + background-color: @surface0; + color: @text; + &:hover { + background-color: @base; + } + } + + .mw-parser-output .navbox-list { + border-color: @surface0; + } + + .pure-button-primary-progressive, + .pure-button-primary-progressive:hover { + background-color: @accent-color; + border-color: @accent-color; + } + + .suggestion-link { + border-bottom-color: @surface0; + } + + .cdx-menu, + .skin-vector .uls-menu, + .suggestiodns-dropdown, + .cdx-search-input--has-end-button, + .vector-sticky-header, + .vector-sticky-header-context-bar, + .mw-heading2 { + border-color: @surface2; + } + + .suggestion-link.active { + background-color: fade(@accent-color, 20%); + .suggestion-title { + color: @accent-color; + } + } + + .mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted, + .cdx-menu-item--enabled.cdx-menu-item--highlighted { + background-color: fade(@accent-color, 20%); + } + + .mw-echo-ui-sortedListWidget, + .mw-echo-ui-sortedListWidget-group, + .mw-echo-ui-subGroupListWidget-header { + border-color: @surface2; + } + + .mw-mmv-post-image, + .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive + .cdx-button__icon { + background-color: @crust; + } + + .cdx-text-input__input:enabled::placeholder, + .cdx-text-input__input:enabled ~ .cdx-text-input__icon-vue, + .skin-vector .uls-languagefilter, + .skin-vector .uls-lcd-region-title, + .suggestion-description, + .cdx-menu-item--enabled .cdx-menu-item__text__description, + .mw-number-text, + .boilerplate > div:nth-child(3) > span:nth-child(1), + .boilerplate > div:nth-child(4) > span:nth-child(2) { + color: @subtext0 !important; + } + + input:hover + .cdx-button.cdx-button--action-progressive { + background-color: fade(@accent-color, 12.5%); + } + + #pt-notifications-alert .mw-echo-unseen-notifications::after { + background-color: @red !important; + } + + #pt-notifications-notice .mw-echo-unseen-notifications::after { + background-color: @blue !important; + } + + a, + .mw-parser-output a.external:visited { + color: @accent-color; + &:visited { + color: @mauve; + } + } + + a.new, + .mw-parser-output .cs1-visible-error, + .vector-menu-tabs .mw-list-item.new a, + .mw-plusminus-neg { + color: @red; + } + + a.mw-selflink { + color: @text; + } + + #searchInput { + color: @text; + &:hover { + border-color: @surface2; + } + &:focus { + border-color: @accent-color; + } + } + + .pure-form input[type="search"] { + border-color: @surface2; + box-shadow: inset 0 0 0 1px @surface2; + } + + #pt-notifications-alert .mw-echo-notifications-badge::after, + #pt-notifications-notice .mw-echo-notifications-badge::after, + .mw-echo-notification-badge-nojs::after { + border-color: @crust; + background-color: @accent-color; + color: @base; + } + + h2 { + border-bottom-color: @surface2; + } + + .mw-footer { + border-top-color: @surface2; + } + + .bookshelf { + border-top-color: @surface0; + box-shadow: 0 -1px 0 @surface0; + } + + body.ns-talk .mw-parser-output .mp-toolbox, + .mw-parser-output .tmbox, + #talkheader { + border-color: fade(@yellow, 20%) !important; + background-color: fade(@yellow, 10%) !important; + } + + body.ns-talk .mw-parser-output .mp-toolbox-daily th { + border-color: fade(@yellow, 80%) !important; + background-color: fade(@yellow, 20%) !important; + } + + .fn.org { + color: @accent-color; + } + + .mw-parser-output .mp-toolbox-daily th, + .mw-parser-output td.mp-toolbox-tfl-not { + background: fade(@yellow, 20%) !important; + border-color: fade(@yellow, 20%) !important; + } + + body.ns-talk .mw-parser-output .mp-toolbox-daily { + border-color: fade(@yellow, 20%) !important; + background: none !important; + } + + .mw-parser-output tr + tr > .navbox-list, + .mw-parser-output tr + tr > .navbox-group { + border-top-color: @surface0; + } + + .ext-phonos-PhonosButton.oo-ui-buttonElement-frameless.oo-ui-buttonWidget + > .oo-ui-buttonElement-button:hover { + background-color: fade(@accent-color, 20%); + } + + .styled-select:hover { + background-color: @surface0; + } + + .lang-list-button, + .lang-list-button:hover { + background-color: @base; + border-color: @surface1; + outline-color: @base; + } + + .cdx-typeahead-search__search-footer__icon.cdx-icon { + color: @subtext0; + } + + .vector-toc + .vector-toc-level-1-active:not(.vector-toc-list-item-active) + > .vector-toc-link { + color: @text !important; + } + + .lang-list-active .lang-list-button { + background-color: @base; + border-color: @surface1; + outline-color: @base; + } + + .lang-list-button:focus { + box-shadow: inset 0 0 0 1px @accent-color; + } + + .lang-list-border { + background-color: @surface1; + } + + .infobox-header { + background-color: @surface1 !important; + color: @text !important; + } + + td[style*="background-color"], + td[style*="background-color"] * { + color: @crust !important; + } + + #toc-Services > a:nth-child(1) > div:nth-child(1) { + color: @text !important; + } + + .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive, + .vector-menu-tabs .mw-list-item a, + .vector-feature-zebra-design-enabled .vector-toc .vector-toc-link, + .mw-parser-output a.extiw, + .mw-parser-output a.external, + .mw-collapsible-toggle-default .mw-collapsible-text, + .vector-feature-zebra-design-enabled + .vector-pinnable-element + .mw-list-item + a, + .vector-feature-zebra-design-enabled + .vector-dropdown-content + .mw-list-item + a, + .vector-feature-zebra-design-enabled + .vector-pinnable-element + .mw-list-item + a:not(.mw-selflink):visited, + .vector-feature-zebra-design-enabled + .vector-dropdown-content + .mw-list-item + a:not(.mw-selflink):visited, + .uls-language-block a, + .lang-list-button, + .fancycaptcha-reload, + #pt-userpage-2 a:not(.mw-selflink), + .vector-pinnable-element .mw-list-item a, + .vector-pinnable-element .mw-list-item a:not(.mw-selflink):visited, + .vector-toc .vector-toc-link, + .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive + > .oo-ui-buttonElement-button, + .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive + > .oo-ui-buttonElement-button:hover, + .vector-dropdown-content .mw-list-item a, + .vector-dropdown-content .mw-list-item a:not(.mw-selflink):visited { + color: @accent-color; + } + + .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive, + .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive, + .mw-ui-button.mw-ui-progressive:not(:disabled), + .mw-ui-button.mw-ui-progressive:not(:disabled):hover { + background-color: @accent-color; + border-color: @accent-color; + color: @base; + } + + .mw-message-box-warning, + .boilerplate { + border-color: @accent-color !important; + background-color: fade(@accent-color, 25%) !important; + color: @text; + } + + .vector-feature-zebra-design-enabled .vector-sticky-pinned-container::after, + .vector-sticky-pinned-container::after { + background: none; + } + + .vector-feature-zebra-design-enabled .vector-pinnable-header-toggle-button { + background-color: @surface0; + color: @text; + &:hover { + background-color: @base; + } + } + + .vector-feature-zebra-design-enabled .vector-pinnable-header, + .vector-pinnable-header, + .vector-pinnable-element .vector-menu-heading { + border-bottom-color: @surface0; + } + + hr { + border-bottom-color: @base; + } + + .central-featured-lang strong:hover, + .link-box:hover, + .central-featured-lang :hover, + .other-project-link:hover, + .lang-list-container { + background-color: @surface0; + } + + .vector-page-toolbar-container { + box-shadow: 0 1px @surface1; + } + + .mw-parser-output .navbox-even { + background-color: @surface1; + } + + .vector-feature-zebra-design-enabled .vector-page-titlebar::after, + .mw-parser-output .wikipedia-languages-prettybars, + .vector-page-titlebar::after { + background-color: @surface2 !important; + } + + table.expanded:nth-child(2) > tbody:nth-child(1) > tr:nth-child(2) { + background-color: fade(@accent-color, 20%) !important; + } + + .client-js .mw-content-ltr .mw-editsection-bracket:first-of-type, + .client-js .mw-content-ltr .mw-editsection-bracket:not(:first-of-type), + .mw-collapsible-toggle-default::before, + .mw-collapsible-toggle-default::after { + color: @subtext1; + } + + .infobox, + .mw-parser-output .navbox, + .catlinks, + .mw-parser-output #mp-topbanner, + .mw-parser-output .sidebar, + .fancycaptcha-captcha-container, + .fancycaptcha-captcha-and-reload, + .cdx-checkbox__icon, + .mw-message-box, + .uls-menu .uls-no-results-view .uls-no-found-more, + .client-js + .vector-below-page-title + .vector-page-titlebar-toc + > label:nth-child(2), + .mw-parser-output .ombox, + code, + .oo-ui-buttonElement-framed.oo-ui-widget-enabled + > .oo-ui-buttonElement-button, + .mw-mmv-label, + #page-secondary-actions > a, + .mw-parser-output .ambox, + td[class="sidebar-navbar"], + textarea, + .mw-parser-output .side-box { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface2 !important; + } + + #pagehistory li.selected { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface2 !important; + outline-color: @surface2 !important; + } + + .cdx-checkbox__icon { + border-color: @accent-color !important; + } + + .fancycaptcha-captcha-container .mw-ui-inputو .mw-ui-input:not(:disabled) { + background-color: @base !important; + color: @text !important; + border-color: @surface1; + } + + .mw-ui-input:not(:disabled), + .mw-ui-button:not(:disabled) { + background-color: @base !important; + color: @text !important; + border-color: @surface1 !important; + } + + .mw-parser-output .module-shortcutboxplain { + background-color: @base !important; + color: @text !important; + border-color: @surface2; + } + + .sidebar-pretitle, + .sidebar-title-with-pretitle, + .sidebar-list-title { + background-color: fade(@accent-color, 20%) !important; + } + + .mw-parser-output #mp-bottom, + .mw-parser-output .sidebar-collapse .sidebar-below { + border-color: @surface2; + } + + .lang-list-content, + .bookshelf .text { + background-color: @surface0; + } + + .mw-parser-output #mp-bottom .mp-h2, + .uls-language-block > ul > li:hover { + background: @surface0; + border-color: @surface2; + } + + figure[typeof~="mw:File/Thumb"] { + background-color: @mantle !important; + color: @text !important; + border-top-color: @surface2; + border-left-color: @surface2; + border-right-color: @surface2; + > figcaption { + background-color: @mantle !important; + color: @text !important; + border-bottom-color: @surface2; + border-left-color: @surface2; + border-right-color: @surface2; + } + > :not(figcaption) .mw-file-element { + color: @surface2 !important; + border-color: @surface2; + } + } + + .mw-parser-output #mp-left, + .mw-parser-output #mp-left .mp-h2, + th[class="sidebar-title"] { + background-color: fade(@green, 10%) !important; + border-color: fade(@green, 20%) !important; + } + + .mw-plusminus-pos { + color: @green !important; + } + + .mw-parser-output #mp-right, + .mw-parser-output #mp-right .mp-h2 { + background-color: fade(@blue, 10%) !important; + border-color: fade(@blue, 20%) !important; + } + + .mw-parser-output #mp-lower, + .mw-parser-output #mp-lower .mp-h2 { + background-color: fade(@mauve, 10%) !important; + border-color: fade(@mauve, 20%) !important; + } + + .mw-collapsible-toggle-default:active .mw-collapsible-text { + color: @peach; + } + + .mw-parser-output #mp-middle, + .mw-parser-output #mp-middle .mp-h2 { + background-color: fade(@pink, 10%) !important; + border-color: fade(@pink, 20%) !important; + } + + .mw-parser-output .navbox-title, + .summary, + .infobox > tbody:nth-child(1) > tr:nth-child(4) > th:nth-child(1), + .infobox > tbody:nth-child(1) > tr:nth-child(6) > th:nth-child(1) { + background-color: fade(@accent-color, 20%) !important; + } + + .infobox > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1) { + background-color: @surface1 !important; + } + + .mw-parser-output .navbox-group, + table.expanded:nth-child(2) > tbody:nth-child(1) > tr:nth-child(3), + table.expanded:nth-child(2) + > tbody:nth-child(1) + > tr:nth-child(4) + > td:nth-child(2) + > table:nth-child(2) + > tbody:nth-child(1) + > tr:nth-child(1), + table.expanded:nth-child(2) > tbody:nth-child(1) > tr:nth-child(1), + table.nowraplinks:nth-child(1) + > tbody:nth-child(1) + > tr:nth-child(3) + > td:nth-child(1) + > table:nth-child(2) + > tbody:nth-child(1) + > tr:nth-child(1), + table.nowraplinks:nth-child(1) + > tbody:nth-child(1) + > tr:nth-child(4) + > td:nth-child(1) + > table:nth-child(2) + > tbody:nth-child(1) + > tr:nth-child(1), + table.nowraplinks:nth-child(1) + > tbody:nth-child(1) + > tr:nth-child(5) + > td:nth-child(1) + > table:nth-child(2) + > tbody:nth-child(1) + > tr:nth-child(1), + .navbox-abovebelow { + background-color: @surface1 !important; + } + + .mw-parser-output .tracklist > tbody { + color: inherit; + + > .tracklist-total-length * { + background-color: @overlay1; + color: @base; + } + } + + .mw-content-ltr + > table:nth-child(20) + > tbody:nth-child(1) + > tr:nth-child(2) + > td:nth-child(2) { + border-color: @surface2 !important; + background-color: @surface0 !important; + } + + .noarticletext, + #noarticletext { + background-color: @base !important; + } + + #sisterproject { + background-color: @mantle !important; + } + + [style="color:#02a64f;line-height:initial"] { + color: @green !important; + } + + [style="color:#f78e1e;line-height:initial"] { + color: @peach !important; + } + + [style="color:#77278b;line-height:initial"] { + color: @mauve !important; + } + + [style="color:#87746a;line-height:initial"] { + color: @maroon !important; + } + + [style="color:#009aC8;line-height:initial"] { + color: @sky !important; + } + + [style="color:#ffd520;line-height:initial"] { + color: @yellow !important; + } + + [style="color:#0060a9;line-height:initial"] { + color: @blue !important; + } + + table.nowraplinks:nth-child(4) > tbody:nth-child(1) > tr:nth-child(1), + .navbox-list-with-group.navbox-list.navbox-odd { + background-color: @surface0 !important; + } + + .mw-parser-output tr + tr > .navbox-abovebelow { + border-color: @base; + } + + .catlinks li { + border-left-color: @surface2; + } + + .vector-icon.mw-ui-icon-wikimedia-menu { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-ellipsis { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-appearance { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .vector-feature-zebra-design-enabled + .vector-dropdown + .vector-dropdown-label:not(.cdx-button--icon-only)::after, + .vector-icon.mw-ui-icon-wikimedia-expand { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .cdx-checkbox__input:checked:not(:indeterminate) + + .cdx-checkbox__icon::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .vector-page-titlebar + .mw-portlet-lang + .vector-dropdown-label.cdx-button--action-progressive.cdx-button--weight-quiet::after { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .vector-dropdown .vector-dropdown-label:not(.cdx-button--icon-only)::after { + @svg: escape( + '' + ); + background: url("data:image/svg+xml,@{svg}") !important; + } + + .vector-icon.mw-ui-icon-wikimedia-language-progressive { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .vector-icon.mw-ui-icon-wikimedia-language { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .mw-parser-output a.external { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .plainlinks a.external { + background: none !important; + } + + #mw-indicator-mw-helplink a { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .cdx-search-input .cdx-text-input__icon.cdx-text-input__start-icon { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .vector-icon.mw-ui-icon-wikimedia-listBullet { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + ul { + @svg: escape( + '' + ); + list-style-image: url("data:image/svg+xml,@{svg}"); + } + + .oo-ui-icon-volumeUp, + .mw-ui-icon-volumeUp::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-fullScreen { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .fancycaptcha-reload { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .popups-icon--settings { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-userAvatar { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-watchlist { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-tray { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-bell { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-user-menu-logged-in .vector-dropdown-label::after { + @svg: escape( + '' + ); + background: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-star { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-userTalk { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-sandbox { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-settings { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-unStar { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .oo-ui-image-progressive.oo-ui-icon-settings { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .oo-ui-icon-bell { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .oo-ui-icon-next { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .oo-ui-icon-settings { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .oo-ui-icon-expand { + @svg: escape( + ' expand ' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .oo-ui-icon-tray { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-labFlask { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .mw-ui-icon-vector-gadget-pt-darkmode { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .client-dark-mode .mw-ui-icon-vector-gadget-pt-darkmode { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-userContributions { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-logOut { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .uls-search-label, + .vector-icon.mw-ui-icon-wikimedia-search { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .mw-ui-icon-vector-gadget-pt-darkmode-sticky-header { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .cdx-message .cdx-message__icon { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-edit { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-history { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-speechBubbles { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-editLock { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .branding-box > a:nth-child(1) > span:nth-child(1) > img:nth-child(1) { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .panel-heading, + .mw-pt-languages-list, + .mw-pt-languages-label { + color: @text; + background-color: @base; + } + .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle, + .oo-ui-inputWidget-input, + .mw-widget-dateInputWidget-handle, + .oo-ui-menuSelectWidget { + background-color: @mantle !important; + color: @text !important; + } + .oo-ui-menuOptionWidget:hover { + background-color: @surface1; + color: @text; + } + .cdx-search-input__end-button { + background-color: @crust !important; + } + .mw-pt-languages { + border-bottom-color: @surface0; + } + .mw-pt-progress--complete::after, + .mw-pt-progress--high::after { + border-color: @accent-color; + background: conic-gradient(@text 0, @accent-color 0); + } + pre, + .oo-ui-panelLayout-framed { + border-color: @surface0; + } + #vector-page-titlebar-toc-label { + background-color: @mantle; + color: @subtext0 !important; + border-color: @subtext0 !important; + } + tbody * { + background-color: @surface0 !important; + border-color: @surface2 !important; + } + + [style*="padding: 0.5em; margin: 0.50em 0; background-color: #C1E5FF; border: thin solid #1D99F3; overflow: hidden;"] { + background-color: @sapphire !important; + color: @mantle !important; + } + [style*="padding: 0.5em; margin: 0.50em 0; background-color: #F6F6F6; border: thin solid #31363B; overflow: hidden;"] { + background-color: @rosewater !important; + color: @mantle !important; + } + } +} + +/* deno-fmt-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; }; + }; diff --git a/styles/wikipedia/catppuccin.user.css b/styles/wikipedia/catppuccin.user.css index 7e61c47bb2..8adfc3f0ba 100644 --- a/styles/wikipedia/catppuccin.user.css +++ b/styles/wikipedia/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Wikipedia Catppuccin +@name Wikipedia Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/wikipedia @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/wikipedia -@version 2024.12.28 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/wikipedia/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/wikipedia/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Awikipedia @description Soothing pastel theme for Wikipedia @author Catppuccin @@ -14,1638 +14,4 @@ @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 checkbox highlight-redirect "Highlight redirect links" 0 -==/UserStyle== */ - -@-moz-document domain('wikipedia.org') { - @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); - - @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; - } - } - - --ctp-rosewater: @rosewater; - --ctp-flamingo: @flamingo; - --ctp-pink: @pink; - --ctp-mauve: @mauve; - --ctp-red: @red; - --ctp-maroon: @maroon; - --ctp-peach: @peach; - --ctp-yellow: @yellow; - --ctp-green: @green; - --ctp-teal: @teal; - --ctp-sky: @sky; - --ctp-sapphire: @sapphire; - --ctp-blue: @blue; - --ctp-lavender: @lavender; - --ctp-text: @text; - --ctp-subtext1: @subtext1; - --ctp-subtext0: @subtext0; - --ctp-overlay2: @overlay2; - --ctp-overlay1: @overlay1; - --ctp-overlay0: @overlay0; - --ctp-surface2: @surface2; - --ctp-surface1: @surface1; - --ctp-surface0: @surface0; - --ctp-base: @base; - --ctp-mantle: @mantle; - --ctp-crust: @crust; - - --background-color-base: @base; - - body, - .vector-feature-zebra-design-enabled .vector-header-container .mw-header, - .vector-feature-zebra-design-enabled .mw-page-container, - .vector-feature-zebra-design-enabled .vector-pinned-container, - .vector-feature-zebra-design-enabled - .vector-dropdown - .vector-dropdown-content, - .uls-lcd, - .uls-search, - .uls-filtersuggestion, - #uls-settings-block.uls-settings-block--vector-2022.uls-settings-block--with-add-languages, - .app-badges .footer-sidebar-content, - .pure-form input[type="search"], - .suggestions-dropdown, - .cdx-menu, - .vector-header-container .mw-header, - .mw-page-container, - .vector-pinned-container, - .vector-header-container .vector-sticky-header, - .mw-mmv-image, - .mw-body, - .frb-form-wrapper, - .mw-echo-ui-placeholderItemWidget, - .oo-ui-popupWidget-popup, - .mw-echo-ui-notificationItemWidget, - .oo-ui-optionWidget-selected { - background-color: @base; - } - - body, - .mw-heading, - h1, - h2, - h3, - h4, - h5, - h6, - .vector-feature-zebra-design-enabled body, - .vector-feature-zebra-design-enabled - .vector-toc - .vector-toc-list-item-active - > .vector-toc-link, - .vector-feature-zebra-design-enabled - .vector-toc - .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) - > .vector-toc-link, - .vector-feature-zebra-design-enabled - .vector-toc - .vector-toc-list-item-active.vector-toc-level-1-active - > .vector-toc-link, - .vector-menu-tabs .mw-list-item.selected a, - .vector-menu-tabs .mw-list-item.selected a:visited, - .cdx-button:enabled, - .cdx-button.cdx-button--fake-button--enabled, - .mw-footer li, - .vector-feature-zebra-design-enabled - .vector-toc - .vector-toc-level-1-active:not(.vector-toc-list-item-active) - > .vector-toc-link, - .central-featured-lang small, - .footer-sidebar-text, - .other-project-tagline, - .site-license, - .search-container .js-langpicker-label, - .langlist > ul > li, - .suggestion-title, - .cdx-menu-item--enabled .cdx-menu-item__content, - .mwe-popups .mwe-popups-extract, - .mw-body-content .mw-number-text h3, - .vector-pinnable-element .vector-menu-heading, - .vector-toc .vector-toc-list-item-active > .vector-toc-link, - .vector-toc - .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) - > .vector-toc-link, - .vector-toc - .vector-toc-list-item-active.vector-toc-level-1-active - > .vector-toc-link, - .uls-empty-state .uls-empty-state__header, - .uls-empty-state .uls-empty-state__desc, - .uls-no-results-found-title, - .mw-mmv-post-image, - .mw-mmv-credit, - .frb-form-wrapper, - .mw-echo-ui-notificationItemWidget-content-message-header, - .oo-ui-labelElement, - .reference-text, - #contentSub:not(:empty) { - color: @text !important; - } - - .mw-parser-output .fmbox { - border-color: @surface2 !important; - background-color: @base !important; - } - - .cdx-thumbnail__image { - border-color: @text; - } - - /* maths */ - .equation-box, - .equation-box * { - background: none !important; - } - img.mwe-math-fallback-image-display, - img.mwe-math-fallback-image-inline { - & when (@lookup = latte) { - filter: brightness(0) saturate(100%) invert(31%) sepia(9%) - saturate(1499%) hue-rotate(196deg) brightness(90%) contrast(85%); - } - - & when (@lookup = frappe) { - filter: brightness(0) saturate(100%) invert(92%) sepia(6%) - saturate(3753%) hue-rotate(184deg) brightness(93%) contrast(106%); - } - - & when (@lookup = macchiato) { - filter: brightness(0) saturate(100%) invert(82%) sepia(7%) - saturate(1042%) hue-rotate(193deg) brightness(103%) contrast(92%); - } - - & when (@lookup = mocha) { - filter: brightness(0) saturate(100%) invert(83%) sepia(28%) - saturate(223%) hue-rotate(190deg) brightness(99%) contrast(93%); - } - } - - .mwe-popups .mwe-popups-extract[dir="ltr"]::after { - background-image: linear-gradient( - to right, - rgba(255, 255, 255, 0), - @surface0 50% - ); - } - table { - background: @surface2 !important; - } - - tr { - background-color: @surface0 !important; - } - - th { - background: @overlay0 !important; - color: @mantle !important; - } - - .quotebox, - div.thumbinner { - background-color: @surface0 !important; - border-color: @surface2 !important; - } - - .navbox-group, - .infobox-label { - color: @text !important; - } - - .cdx-button:enabled, - .cdx-text-input__input:enabled { - color: @text; - background-color: @base; - border-color: @surface2; - &:hover { - background-color: @mantle; - border-color: @text; - color: @text; - } - } - - .vector-dropdown .vector-dropdown-content, - .header-container.header-chrome { - background-color: @mantle; - } - - .skin-vector .uls-search { - border-bottom-color: @surface2; - } - - .oo-ui-textInputWidget, - .oo-ui-inputWidget-input { - color: @text !important; - background-color: @surface1 !important; - border-color: @surface2 !important; - } - - .oo-ui-pendingElement-pending { - background-color: @base; - background-image: linear-gradient( - 135deg, - @surface0 25%, - transparent 25%, - transparent 50%, - @surface0 50%, - @surface0 75%, - transparent 75%, - transparent - ); - } - - .oo-ui-tagItemWidget.oo-ui-widget-disabled { - color: @text; - background-color: @overlay0; - text-shadow: 0 0 0 @text; - border-color: @surface0; - } - - .oo-ui-buttonElement-frameless.oo-ui-widget-enabled - > .oo-ui-buttonElement-button, - .mw-mmv-credit, - .mw-mmv-options-dialog-header, - .mw-mmv-options-text-header { - color: @text; - } - - .mw-mmv-options-text-body { - color: @subtext0; - } - - .mw-ui-input:not(:disabled) { - background-color: @surface0; - color: @text; - border-color: @surface2; - } - - .mw-ui-button { - color: @mantle; - background-color: @accent-color; - border-color: @accent-color; - } - - .imbox-delete { - border-color: @red !important; - background-color: @surface0 !important; - } - - .imbox { - background-color: @overlay0 !important; - border-color: @peach !important; - } - - .talkheader-help { - background-color: @surface1 !important; - border-color: @green !important; - } - - .assess, - .assess-NA, - .navbox-subgroup { - background: @surface0 !important; - border-color: @surface1 !important; - } - - .documentation, - .documentation-container, - .documentation-metadata { - background-color: fade(@green, 15%) !important; - } - - .ambox, - .portalborder { - background-color: @surface1 !important; - border-color: @surface2 !important; - } - - .navbox-title { - color: @text !important; - } - - .mw-highlight pre { - background: @surface0 !important; - border-width: 0; - color: @text; - } - - .mw-content-ltr.mw-highlight-lines pre, - .mw-content-ltr.content .mw-highlight-lines pre { - box-shadow: inset 2.75em 0 0 @surface1; - } - - .mw-redirect when (@highlight-redirect = 1) { - color: @green !important; - } - - .mbox-text { - color: @text !important; - } - - .sidebar-above, - .p, - .o { - color: @text !important; - } - .ni, - .mw-templatedata-doc-muted { - color: @subtext1 !important; - } - .nv, - .nn { - color: @blue !important; - } - - .sidebar-above a span { - color: @text !important; - } - - .sidebar-title-with-pretitle span { - color: @text !important; - } - - .nt { - color: @green !important; - } - - .nl { - color: @teal !important; - } - - .ambox-style { - border-left-color: @yellow !important; - } - - .mw-parser-output .mainpage-frame { - background: @surface0 !important; - border-color: @surface0 !important; - } - - .mw-parser-output .mainpage-heading-title { - background: linear-gradient( - to right, - rgba(saturate(lighten(@accent-color, 4%), -3%), 0.4), - @surface0 - ) !important; - } - - .hidden-title { - background-color: @green !important; - color: @mantle !important; - } - - .mw-mmv-post-image, - .mw-mmv-options-dialog { - background-color: @base; - color: @text; - } - .mw-mmv-image-metadata { - background-color: @base; - border-color: @base; - } - - .mw-mmv-dialog-down-arrow { - background-color: @base !important; - } - - .oo-ui-tagItemWidget.oo-ui-widget-enabled { - color: @text; - background-color: @overlay0 !important; - border-color: @surface0; - } - - ol.references li:target { - background-color: @surface2; - } - - .mw-body-content .error { - color: @red; - } - - .divbox-gray, - .infobox-above { - background-color: @surface2 !important; - border-color: @overlay0 !important; - } - - .biota > * > tr > th { - background-color: @yellow !important; - color: @mantle !important; - } - - .cmbox { - background-color: @blue !important; - } - - .wikitable { - background-color: @surface0 !important; - color: @text !important; - border-color: @surface2 !important; - } - - .wikitable > * > tr > th { - background-color: @surface1 !important; - } - - .wikitable > * > tr > td, - .wikitable > * > tr > th { - background-color: @surface0 !important; - color: @text !important; - border-color: @surface2; - } - - .mw-searchresults-has-iw .iw-result__header a { - color: @text; - } - - .mw-search-result-data { - color: @subtext0; - } - - .navbox-abovebelow { - background-color: @overlay2 !important; - border-color: @overlay2 !important; - } - - .vector-feature-zebra-design-enabled - .vector-pinnable-element - .vector-menu-heading { - color: @text; - border-bottom-color: @surface0; - } - - .mwe-popups .mwe-popups-container { - background-color: @surface0; - } - - .vector-pinnable-header-toggle-button { - background-color: @surface0; - color: @text; - &:hover { - background-color: @base; - } - } - - .mw-parser-output .navbox-list { - border-color: @surface0; - } - - .pure-button-primary-progressive, - .pure-button-primary-progressive:hover { - background-color: @accent-color; - border-color: @accent-color; - } - - .suggestion-link { - border-bottom-color: @surface0; - } - - .cdx-menu, - .skin-vector .uls-menu, - .suggestiodns-dropdown, - .cdx-search-input--has-end-button, - .vector-sticky-header, - .vector-sticky-header-context-bar, - .mw-heading2 { - border-color: @surface2; - } - - .suggestion-link.active { - background-color: fade(@accent-color, 20%); - .suggestion-title { - color: @accent-color; - } - } - - .mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted, - .cdx-menu-item--enabled.cdx-menu-item--highlighted { - background-color: fade(@accent-color, 20%); - } - - .mw-echo-ui-sortedListWidget, - .mw-echo-ui-sortedListWidget-group, - .mw-echo-ui-subGroupListWidget-header { - border-color: @surface2; - } - - .mw-mmv-post-image, - .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive - .cdx-button__icon { - background-color: @crust; - } - - .cdx-text-input__input:enabled::placeholder, - .cdx-text-input__input:enabled ~ .cdx-text-input__icon-vue, - .skin-vector .uls-languagefilter, - .skin-vector .uls-lcd-region-title, - .suggestion-description, - .cdx-menu-item--enabled .cdx-menu-item__text__description, - .mw-number-text, - .boilerplate > div:nth-child(3) > span:nth-child(1), - .boilerplate > div:nth-child(4) > span:nth-child(2) { - color: @subtext0 !important; - } - - input:hover + .cdx-button.cdx-button--action-progressive { - background-color: fade(@accent-color, 12.5%); - } - - #pt-notifications-alert .mw-echo-unseen-notifications::after { - background-color: @red !important; - } - - #pt-notifications-notice .mw-echo-unseen-notifications::after { - background-color: @blue !important; - } - - a, - .mw-parser-output a.external:visited { - color: @accent-color; - &:visited { - color: @mauve; - } - } - - a.new, - .mw-parser-output .cs1-visible-error, - .vector-menu-tabs .mw-list-item.new a, - .mw-plusminus-neg { - color: @red; - } - - a.mw-selflink { - color: @text; - } - - #searchInput { - color: @text; - &:hover { - border-color: @surface2; - } - &:focus { - border-color: @accent-color; - } - } - - .pure-form input[type="search"] { - border-color: @surface2; - box-shadow: inset 0 0 0 1px @surface2; - } - - #pt-notifications-alert .mw-echo-notifications-badge::after, - #pt-notifications-notice .mw-echo-notifications-badge::after, - .mw-echo-notification-badge-nojs::after { - border-color: @crust; - background-color: @accent-color; - color: @base; - } - - h2 { - border-bottom-color: @surface2; - } - - .mw-footer { - border-top-color: @surface2; - } - - .bookshelf { - border-top-color: @surface0; - box-shadow: 0 -1px 0 @surface0; - } - - body.ns-talk .mw-parser-output .mp-toolbox, - .mw-parser-output .tmbox, - #talkheader { - border-color: fade(@yellow, 20%) !important; - background-color: fade(@yellow, 10%) !important; - } - - body.ns-talk .mw-parser-output .mp-toolbox-daily th { - border-color: fade(@yellow, 80%) !important; - background-color: fade(@yellow, 20%) !important; - } - - .fn.org { - color: @accent-color; - } - - .mw-parser-output .mp-toolbox-daily th, - .mw-parser-output td.mp-toolbox-tfl-not { - background: fade(@yellow, 20%) !important; - border-color: fade(@yellow, 20%) !important; - } - - body.ns-talk .mw-parser-output .mp-toolbox-daily { - border-color: fade(@yellow, 20%) !important; - background: none !important; - } - - .mw-parser-output tr + tr > .navbox-list, - .mw-parser-output tr + tr > .navbox-group { - border-top-color: @surface0; - } - - .ext-phonos-PhonosButton.oo-ui-buttonElement-frameless.oo-ui-buttonWidget - > .oo-ui-buttonElement-button:hover { - background-color: fade(@accent-color, 20%); - } - - .styled-select:hover { - background-color: @surface0; - } - - .lang-list-button, - .lang-list-button:hover { - background-color: @base; - border-color: @surface1; - outline-color: @base; - } - - .cdx-typeahead-search__search-footer__icon.cdx-icon { - color: @subtext0; - } - - .vector-toc - .vector-toc-level-1-active:not(.vector-toc-list-item-active) - > .vector-toc-link { - color: @text !important; - } - - .lang-list-active .lang-list-button { - background-color: @base; - border-color: @surface1; - outline-color: @base; - } - - .lang-list-button:focus { - box-shadow: inset 0 0 0 1px @accent-color; - } - - .lang-list-border { - background-color: @surface1; - } - - .infobox-header, - .infobox-subheader, - .infobox-full-data { - background-color: @surface1 !important; - color: @text !important; - } - - td[style*="background-color"], - td[style*="background-color"] * { - color: @crust !important; - } - - #toc-Services > a:nth-child(1) > div:nth-child(1) { - color: @text !important; - } - - .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive, - .vector-menu-tabs .mw-list-item a, - .vector-feature-zebra-design-enabled .vector-toc .vector-toc-link, - .mw-parser-output a.extiw, - .mw-parser-output a.external, - .mw-collapsible-toggle-default .mw-collapsible-text, - .vector-feature-zebra-design-enabled - .vector-pinnable-element - .mw-list-item - a, - .vector-feature-zebra-design-enabled - .vector-dropdown-content - .mw-list-item - a, - .vector-feature-zebra-design-enabled - .vector-pinnable-element - .mw-list-item - a:not(.mw-selflink):visited, - .vector-feature-zebra-design-enabled - .vector-dropdown-content - .mw-list-item - a:not(.mw-selflink):visited, - .uls-language-block a, - .lang-list-button, - .fancycaptcha-reload, - #pt-userpage-2 a:not(.mw-selflink), - .vector-pinnable-element .mw-list-item a, - .vector-pinnable-element .mw-list-item a:not(.mw-selflink):visited, - .vector-toc .vector-toc-link, - .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive - > .oo-ui-buttonElement-button, - .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive - > .oo-ui-buttonElement-button:hover, - .vector-dropdown-content .mw-list-item a, - .vector-dropdown-content .mw-list-item a:not(.mw-selflink):visited { - color: @accent-color; - } - - .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive, - .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive, - .mw-ui-button.mw-ui-progressive:not(:disabled), - .mw-ui-button.mw-ui-progressive:not(:disabled):hover { - background-color: @accent-color; - border-color: @accent-color; - color: @base; - } - - .mw-message-box-warning, - .boilerplate { - border-color: @accent-color !important; - background-color: fade(@accent-color, 25%) !important; - color: @text; - } - - .vector-feature-zebra-design-enabled .vector-sticky-pinned-container::after, - .vector-sticky-pinned-container::after { - background: none; - } - - .vector-feature-zebra-design-enabled .vector-pinnable-header-toggle-button { - background-color: @surface0; - color: @text; - &:hover { - background-color: @base; - } - } - - .vector-feature-zebra-design-enabled .vector-pinnable-header, - .vector-pinnable-header, - .vector-pinnable-element .vector-menu-heading { - border-bottom-color: @surface0; - } - - hr { - border-bottom-color: @surface2; - } - - .central-featured-lang strong:hover, - .link-box:hover, - .central-featured-lang :hover, - .other-project-link:hover, - .lang-list-container { - background-color: @surface0; - } - - .vector-page-toolbar-container { - box-shadow: 0 1px @surface1; - } - - .mw-parser-output .navbox-even { - background-color: @surface1; - } - - .vector-feature-zebra-design-enabled .vector-page-titlebar::after, - .mw-parser-output .wikipedia-languages-prettybars, - .vector-page-titlebar::after { - background-color: @surface2 !important; - } - - table.expanded:nth-child(2) > tbody:nth-child(1) > tr:nth-child(2) { - background-color: fade(@accent-color, 20%) !important; - } - - .client-js .mw-content-ltr .mw-editsection-bracket:first-of-type, - .client-js .mw-content-ltr .mw-editsection-bracket:not(:first-of-type), - .mw-collapsible-toggle-default::before, - .mw-collapsible-toggle-default::after { - color: @subtext1; - } - - .infobox, - .mw-parser-output .navbox, - .catlinks, - .mw-parser-output #mp-topbanner, - .mw-parser-output .sidebar, - .fancycaptcha-captcha-container, - .fancycaptcha-captcha-and-reload, - .cdx-checkbox__icon, - .mw-message-box, - .uls-menu .uls-no-results-view .uls-no-found-more, - .client-js - .vector-below-page-title - .vector-page-titlebar-toc - > label:nth-child(2), - .mw-parser-output .ombox, - code, - .oo-ui-buttonElement-framed.oo-ui-widget-enabled - > .oo-ui-buttonElement-button, - .mw-mmv-label, - #page-secondary-actions > a, - .mw-parser-output .ambox, - td[class="sidebar-navbar"], - textarea, - .mw-parser-output .side-box { - background-color: @surface0 !important; - color: @text !important; - border-color: @surface2 !important; - } - - #pagehistory li.selected { - background-color: @surface0 !important; - color: @text !important; - border-color: @surface2 !important; - outline-color: @surface2 !important; - } - - .cdx-checkbox__icon { - border-color: @accent-color !important; - } - - .fancycaptcha-captcha-container .mw-ui-inputو .mw-ui-input:not(:disabled) { - background-color: @base !important; - color: @text !important; - border-color: @surface1; - } - - .mw-ui-input:not(:disabled), - .mw-ui-button:not(:disabled) { - background-color: @base !important; - color: @text !important; - border-color: @surface1 !important; - } - - .mw-parser-output .module-shortcutboxplain { - background-color: @base !important; - color: @text !important; - border-color: @surface2; - } - - .sidebar-pretitle, - .sidebar-title-with-pretitle, - .sidebar-list-title { - background-color: fade(@accent-color, 20%) !important; - } - - .mw-parser-output #mp-bottom, - .mw-parser-output .sidebar-collapse .sidebar-below { - border-color: @surface2; - } - - .lang-list-content, - .bookshelf .text { - background-color: @surface0; - } - - .mw-parser-output #mp-bottom .mp-h2, - .uls-language-block > ul > li:hover { - background: @surface0; - border-color: @surface2; - } - - figure[typeof~="mw:File/Thumb"] { - background-color: @mantle !important; - color: @text !important; - border-top-color: @surface2; - border-left-color: @surface2; - border-right-color: @surface2; - > figcaption { - background-color: @mantle !important; - color: @text !important; - border-bottom-color: @surface2; - border-left-color: @surface2; - border-right-color: @surface2; - } - > :not(figcaption) .mw-file-element { - color: @surface2 !important; - border-color: @surface2; - } - } - - .mw-parser-output #mp-left, - .mw-parser-output #mp-left .mp-h2, - th[class="sidebar-title"] { - background-color: fade(@green, 10%) !important; - border-color: fade(@green, 20%) !important; - } - - .mw-plusminus-pos { - color: @green !important; - } - - .mw-parser-output #mp-right, - .mw-parser-output #mp-right .mp-h2 { - background-color: fade(@blue, 10%) !important; - border-color: fade(@blue, 20%) !important; - } - - .mw-parser-output #mp-lower, - .mw-parser-output #mp-lower .mp-h2 { - background-color: fade(@mauve, 10%) !important; - border-color: fade(@mauve, 20%) !important; - } - - .mw-collapsible-toggle-default:active .mw-collapsible-text { - color: @peach; - } - - .mw-parser-output #mp-middle, - .mw-parser-output #mp-middle .mp-h2 { - background-color: fade(@pink, 10%) !important; - border-color: fade(@pink, 20%) !important; - } - - .mw-parser-output .navbox-title, - .summary, - .infobox > tbody:nth-child(1) > tr:nth-child(4) > th:nth-child(1), - .infobox > tbody:nth-child(1) > tr:nth-child(6) > th:nth-child(1) { - background-color: fade(@accent-color, 20%) !important; - } - - .infobox > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1) { - background-color: @surface1 !important; - } - - .mw-parser-output .navbox-group, - table.expanded:nth-child(2) > tbody:nth-child(1) > tr:nth-child(3), - table.expanded:nth-child(2) - > tbody:nth-child(1) - > tr:nth-child(4) - > td:nth-child(2) - > table:nth-child(2) - > tbody:nth-child(1) - > tr:nth-child(1), - table.expanded:nth-child(2) > tbody:nth-child(1) > tr:nth-child(1), - table.nowraplinks:nth-child(1) - > tbody:nth-child(1) - > tr:nth-child(3) - > td:nth-child(1) - > table:nth-child(2) - > tbody:nth-child(1) - > tr:nth-child(1), - table.nowraplinks:nth-child(1) - > tbody:nth-child(1) - > tr:nth-child(4) - > td:nth-child(1) - > table:nth-child(2) - > tbody:nth-child(1) - > tr:nth-child(1), - table.nowraplinks:nth-child(1) - > tbody:nth-child(1) - > tr:nth-child(5) - > td:nth-child(1) - > table:nth-child(2) - > tbody:nth-child(1) - > tr:nth-child(1), - .navbox-abovebelow { - background-color: @surface1 !important; - } - - .mw-parser-output .tracklist > tbody { - color: inherit; - - > .tracklist-total-length * { - background-color: @overlay1; - color: @base; - } - } - - .mw-content-ltr - > table:nth-child(20) - > tbody:nth-child(1) - > tr:nth-child(2) - > td:nth-child(2) { - border-color: @surface2 !important; - background-color: @surface0 !important; - } - - .noarticletext, - #noarticletext { - background-color: @base !important; - } - - #sisterproject { - background-color: @mantle !important; - } - - [style="color:#02a64f;line-height:initial"] { - color: @green !important; - } - - [style="color:#f78e1e;line-height:initial"] { - color: @peach !important; - } - - [style="color:#77278b;line-height:initial"] { - color: @mauve !important; - } - - [style="color:#87746a;line-height:initial"] { - color: @maroon !important; - } - - [style="color:#009aC8;line-height:initial"] { - color: @sky !important; - } - - [style="color:#ffd520;line-height:initial"] { - color: @yellow !important; - } - - [style="color:#0060a9;line-height:initial"] { - color: @blue !important; - } - - table.nowraplinks:nth-child(4) > tbody:nth-child(1) > tr:nth-child(1), - .navbox-list-with-group.navbox-list.navbox-odd { - background-color: @surface0 !important; - } - - .mw-parser-output tr + tr > .navbox-abovebelow { - border-color: @base; - } - - .catlinks li { - border-left-color: @surface2; - } - - /* Fundraising banner */ - .frb-btn, - .frb-label { - color: @text; - background-color: @base; - border-color: @overlay0; - } - - input[type="radio"]:checked + .frb-btn, - input[type="radio"]:checked + .frb-label, - .frb-btn:hover, - .frb-label:hover { - color: @base; - background-color: @accent-color; - border-color: @accent-color; - } - - #frb-main { - --wmui-base100: @base; - --wmui-base0: @text; - --frb-body: @text; - --frb-muted: @subtext0; - --frb-link: @subtext0; - --frb-link-hover: @text; - --frb-error: @red; - --frb-submit: @accent-color; - --frb-submit-hover: darken(@accent-color, 10%); - - svg.frb-message-icon > g { - circle { - fill: @yellow; - } - path { - fill: @base; - } - } - - .frb-message { - background-color: @green; - border-color: @green; - } - - .frb-message::after { - border-left-color: @green; - } - } - - #frb-inline { - --wmui-base100: @base; - --frb-primary: @red; - --frb-link: @accent-color; - --frb-muted: @subtext0; - --frb-muted-hover: @text; - --frb-body: @text; - --frb-error: @red; - --wmui-red-dark: @red; - --wmui-red-light: @red; - --wmui-green-dark: @green; - --wmui-green-light: @green; - --frb-submit: @accent-color; - --frb-submit-hover: darken(@accent-color, 10%); - - .frb-inline-topbar { - color: @text; - - svg circle { - fill: @yellow; - } - - svg path { - fill: @base; - } - } - - .frb-btn-cta { - background-color: @accent-color !important; - border-color: @accent-color !important; - color: @base !important; - } - - .frb-btn-simple { - color: @accent-color !important; - } - - .frb-monthly-pitch { - color: @blue; - } - - .frb-optin-no-prompt { - color: @base; - } - - .frb-cta-hiddenmessage { - background-color: @red; - color: @base; - } - } - - #frb-nag { - --frb-primary-light: @base; - --frb-body: @text; - --wmui-accent-dark: @subtext0; - --frb-link-hover: @text; - - span.frb-donate-button { - color: @base; - background-color: @red; - - &:hover { - color: @base; - background-color: darken(@red, 10%); - } - } - - svg.frb-icon-close > g { - stroke: @subtext0; - - &:hover { - stroke: @text; - } - } - } - - .frb-nag:not(#frb-nag) { - --frb-message-background: @base; - --frb-message-border: @red; - --frb-message: @text; - border-color: @surface0; - background: @base; - box-shadow: none; - - #nag-rml-btn { - background-color: transparent; - border-color: transparent; - color: @subtext0; - } - - #nag-yes-btn { - background-color: @accent-color; - border-color: @accent-color; - color: @base; - } - } - - .frb-btn-cta-label::after { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .frb-back { - @svg-raw: ''; - @svg: escape(@svg-raw); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .frb-close { - @svg-raw: ''; - @svg: escape(@svg-raw); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .sprite { - @svg: escape( - '' - ); - background-image: linear-gradient(transparent, transparent), - url("data:image/svg+xml,@{svg}"); - } - - .mw-logo-wordmark { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .mw-logo-tagline { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-menu { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-ellipsis { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-appearance { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - .vector-feature-zebra-design-enabled - .vector-dropdown - .vector-dropdown-label:not(.cdx-button--icon-only)::after, - .vector-icon.mw-ui-icon-wikimedia-expand { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .cdx-checkbox__input:checked:not(:indeterminate) - + .cdx-checkbox__icon::before { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .vector-page-titlebar - .mw-portlet-lang - .vector-dropdown-label.cdx-button--action-progressive.cdx-button--weight-quiet::after { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .vector-dropdown .vector-dropdown-label:not(.cdx-button--icon-only)::after { - @svg: escape( - '' - ); - background: url("data:image/svg+xml,@{svg}") !important; - } - - .vector-icon.mw-ui-icon-wikimedia-language-progressive { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .vector-icon.mw-ui-icon-wikimedia-language { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .mw-parser-output a.external { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .plainlinks a.external { - background: none !important; - } - - #mw-indicator-mw-helplink a { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - [alt="Edit this at Wikidata"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}") !important; - } - - .cdx-search-input .cdx-text-input__icon.cdx-text-input__start-icon { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - .vector-icon.mw-ui-icon-wikimedia-listBullet { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}") !important; - } - - ul { - @svg: escape( - '' - ); - list-style-image: url("data:image/svg+xml,@{svg}"); - } - - .oo-ui-icon-volumeUp, - .mw-ui-icon-volumeUp::before { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-fullScreen { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .fancycaptcha-reload { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .popups-icon--settings { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-userAvatar { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-watchlist { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-tray { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-bell { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-user-menu-logged-in .vector-dropdown-label::after { - @svg: escape( - '' - ); - background: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-star { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-userTalk { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-sandbox { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-settings { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-unStar { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .oo-ui-image-progressive.oo-ui-icon-settings { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .oo-ui-icon-bell { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .oo-ui-icon-next { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .oo-ui-icon-settings { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .oo-ui-icon-expand { - @svg: escape( - ' expand ' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .oo-ui-icon-tray { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-labFlask { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .mw-ui-icon-vector-gadget-pt-darkmode { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .client-dark-mode .mw-ui-icon-vector-gadget-pt-darkmode { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-userContributions { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-logOut { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .uls-search-label, - .vector-icon.mw-ui-icon-wikimedia-search { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .mw-ui-icon-vector-gadget-pt-darkmode-sticky-header { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .cdx-message .cdx-message__icon { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-edit { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-history { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-speechBubbles { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .vector-icon.mw-ui-icon-wikimedia-editLock { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .branding-box > a:nth-child(1) > span:nth-child(1) > img:nth-child(1) { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/wikipedia/catppuccin.user.less b/styles/wikipedia/catppuccin.user.less new file mode 100644 index 0000000000..555635f426 --- /dev/null +++ b/styles/wikipedia/catppuccin.user.less @@ -0,0 +1,1654 @@ +/* ==UserStyle== +@name Wikipedia Catppuccin +@namespace github.com/catppuccin/userstyles/styles/wikipedia +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/wikipedia +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/wikipedia/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Awikipedia +@description Soothing pastel theme for Wikipedia +@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"] +@var checkbox highlight-redirect "Highlight redirect links" 0 +==/UserStyle== */ + +@-moz-document domain("wikipedia.org") { + @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); + + @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; + } + } + + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + + --background-color-base: @base; + + body, + .vector-feature-zebra-design-enabled .vector-header-container .mw-header, + .vector-feature-zebra-design-enabled .mw-page-container, + .vector-feature-zebra-design-enabled .vector-pinned-container, + .vector-feature-zebra-design-enabled + .vector-dropdown + .vector-dropdown-content, + .uls-lcd, + .uls-search, + .uls-filtersuggestion, + #uls-settings-block.uls-settings-block--vector-2022.uls-settings-block--with-add-languages, + .app-badges .footer-sidebar-content, + .pure-form input[type="search"], + .suggestions-dropdown, + .cdx-menu, + .vector-header-container .mw-header, + .mw-page-container, + .vector-pinned-container, + .vector-header-container .vector-sticky-header, + .mw-mmv-image, + .mw-body, + .frb-form-wrapper, + .mw-echo-ui-placeholderItemWidget, + .oo-ui-popupWidget-popup, + .mw-echo-ui-notificationItemWidget, + .oo-ui-optionWidget-selected { + background-color: @base; + } + + body, + .mw-heading, + h1, + h2, + h3, + h4, + h5, + h6, + .vector-feature-zebra-design-enabled body, + .vector-feature-zebra-design-enabled + .vector-toc + .vector-toc-list-item-active + > .vector-toc-link, + .vector-feature-zebra-design-enabled + .vector-toc + .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) + > .vector-toc-link, + .vector-feature-zebra-design-enabled + .vector-toc + .vector-toc-list-item-active.vector-toc-level-1-active + > .vector-toc-link, + .vector-menu-tabs .mw-list-item.selected a, + .vector-menu-tabs .mw-list-item.selected a:visited, + .cdx-button:enabled, + .cdx-button.cdx-button--fake-button--enabled, + .mw-footer li, + .vector-feature-zebra-design-enabled + .vector-toc + .vector-toc-level-1-active:not(.vector-toc-list-item-active) + > .vector-toc-link, + .central-featured-lang small, + .footer-sidebar-text, + .other-project-tagline, + .site-license, + .search-container .js-langpicker-label, + .langlist > ul > li, + .suggestion-title, + .cdx-menu-item--enabled .cdx-menu-item__content, + .mwe-popups .mwe-popups-extract, + .mw-body-content .mw-number-text h3, + .vector-pinnable-element .vector-menu-heading, + .vector-toc .vector-toc-list-item-active > .vector-toc-link, + .vector-toc + .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) + > .vector-toc-link, + .vector-toc + .vector-toc-list-item-active.vector-toc-level-1-active + > .vector-toc-link, + .uls-empty-state .uls-empty-state__header, + .uls-empty-state .uls-empty-state__desc, + .uls-no-results-found-title, + .mw-mmv-post-image, + .mw-mmv-credit, + .frb-form-wrapper, + .mw-echo-ui-notificationItemWidget-content-message-header, + .oo-ui-labelElement, + .reference-text, + #contentSub:not(:empty) { + color: @text !important; + } + + .mw-parser-output .fmbox { + border-color: @surface2 !important; + background-color: @base !important; + } + + .cdx-thumbnail__image { + border-color: @text; + } + + /* maths */ + .equation-box, + .equation-box * { + background: none !important; + } + img.mwe-math-fallback-image-display, + img.mwe-math-fallback-image-inline { + & when (@lookup = latte) { + filter: brightness(0) saturate(100%) invert(31%) sepia(9%) saturate( + 1499% + ) hue-rotate(196deg) brightness(90%) contrast(85%); + } + + & when (@lookup = frappe) { + filter: brightness(0) saturate(100%) invert(92%) sepia(6%) saturate( + 3753% + ) hue-rotate(184deg) brightness(93%) contrast(106%); + } + + & when (@lookup = macchiato) { + filter: brightness(0) saturate(100%) invert(82%) sepia(7%) saturate( + 1042% + ) hue-rotate(193deg) brightness(103%) contrast(92%); + } + + & when (@lookup = mocha) { + filter: brightness(0) saturate(100%) invert(83%) sepia(28%) saturate( + 223% + ) hue-rotate(190deg) brightness(99%) contrast(93%); + } + } + + .mwe-popups .mwe-popups-extract[dir="ltr"]::after { + background-image: linear-gradient( + to right, + rgba(255, 255, 255, 0), + @surface0 50% + ); + } + table { + background: @surface2 !important; + } + + tr { + background-color: @surface0 !important; + } + + th { + background: @overlay0 !important; + color: @mantle !important; + } + + .quotebox, + div.thumbinner { + background-color: @surface0 !important; + border-color: @surface2 !important; + } + + .navbox-group, + .infobox-label { + color: @text !important; + } + + .cdx-button:enabled, + .cdx-text-input__input:enabled { + color: @text; + background-color: @base; + border-color: @surface2; + &:hover { + background-color: @mantle; + border-color: @text; + color: @text; + } + } + + .vector-dropdown .vector-dropdown-content, + .header-container.header-chrome { + background-color: @mantle; + } + + .skin-vector .uls-search { + border-bottom-color: @surface2; + } + + .oo-ui-textInputWidget, + .oo-ui-inputWidget-input { + color: @text !important; + background-color: @surface1 !important; + border-color: @surface2 !important; + } + + .oo-ui-pendingElement-pending { + background-color: @base; + background-image: linear-gradient( + 135deg, + @surface0 25%, + transparent 25%, + transparent 50%, + @surface0 50%, + @surface0 75%, + transparent 75%, + transparent + ); + } + + .oo-ui-tagItemWidget.oo-ui-widget-disabled { + color: @text; + background-color: @overlay0; + text-shadow: 0 0 0 @text; + border-color: @surface0; + } + + .oo-ui-buttonElement-frameless.oo-ui-widget-enabled + > .oo-ui-buttonElement-button, + .mw-mmv-credit, + .mw-mmv-options-dialog-header, + .mw-mmv-options-text-header { + color: @text; + } + + .mw-mmv-options-text-body { + color: @subtext0; + } + + .mw-ui-input:not(:disabled) { + background-color: @surface0; + color: @text; + border-color: @surface2; + } + + .mw-ui-button { + color: @mantle; + background-color: @accent-color; + border-color: @accent-color; + } + + .imbox-delete { + border-color: @red !important; + background-color: @surface0 !important; + } + + .imbox { + background-color: @overlay0 !important; + border-color: @peach !important; + } + + .talkheader-help { + background-color: @surface1 !important; + border-color: @green !important; + } + + .assess, + .assess-NA, + .navbox-subgroup { + background: @surface0 !important; + border-color: @surface1 !important; + } + + .documentation, + .documentation-container, + .documentation-metadata { + background-color: fade(@green, 15%) !important; + } + + .ambox, + .portalborder { + background-color: @surface1 !important; + border-color: @surface2 !important; + } + + .navbox-title { + color: @text !important; + } + + .mw-highlight pre { + background: @surface0 !important; + border-width: 0; + color: @text; + } + + .mw-content-ltr.mw-highlight-lines pre, + .mw-content-ltr.content .mw-highlight-lines pre { + box-shadow: inset 2.75em 0 0 @surface1; + } + + .mw-redirect when (@highlight-redirect = 1) { + color: @green !important; + } + + .mbox-text { + color: @text !important; + } + + .sidebar-above, + .p, + .o { + color: @text !important; + } + .ni, + .mw-templatedata-doc-muted { + color: @subtext1 !important; + } + .nv, + .nn { + color: @blue !important; + } + + .sidebar-above a span { + color: @text !important; + } + + .sidebar-title-with-pretitle span { + color: @text !important; + } + + .nt { + color: @green !important; + } + + .nl { + color: @teal !important; + } + + .ambox-style { + border-left-color: @yellow !important; + } + + .mw-parser-output .mainpage-frame { + background: @surface0 !important; + border-color: @surface0 !important; + } + + .mw-parser-output .mainpage-heading-title { + background: linear-gradient( + to right, + rgba(saturate(lighten(@accent-color, 4%), -3%), 0.4), + @surface0 + ) !important; + } + + .hidden-title { + background-color: @green !important; + color: @mantle !important; + } + + .mw-mmv-post-image, + .mw-mmv-options-dialog { + background-color: @base; + color: @text; + } + .mw-mmv-image-metadata { + background-color: @base; + border-color: @base; + } + + .mw-mmv-dialog-down-arrow { + background-color: @base !important; + } + + .oo-ui-tagItemWidget.oo-ui-widget-enabled { + color: @text; + background-color: @overlay0 !important; + border-color: @surface0; + } + + ol.references li:target { + background-color: @surface2; + } + + .mw-body-content .error { + color: @red; + } + + .divbox-gray, + .infobox-above { + background-color: @surface2 !important; + border-color: @overlay0 !important; + } + + .biota > * > tr > th { + background-color: @yellow !important; + color: @mantle !important; + } + + .cmbox { + background-color: @blue !important; + } + + .wikitable { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface2 !important; + } + + .wikitable > * > tr > th { + background-color: @surface1 !important; + } + + .wikitable > * > tr > td, + .wikitable > * > tr > th { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface2; + } + + .mw-searchresults-has-iw .iw-result__header a { + color: @text; + } + + .mw-search-result-data { + color: @subtext0; + } + + .navbox-abovebelow { + background-color: @overlay2 !important; + border-color: @overlay2 !important; + } + + .vector-feature-zebra-design-enabled + .vector-pinnable-element + .vector-menu-heading { + color: @text; + border-bottom-color: @surface0; + } + + .mwe-popups .mwe-popups-container { + background-color: @surface0; + } + + .vector-pinnable-header-toggle-button { + background-color: @surface0; + color: @text; + &:hover { + background-color: @base; + } + } + + .mw-parser-output .navbox-list { + border-color: @surface0; + } + + .pure-button-primary-progressive, + .pure-button-primary-progressive:hover { + background-color: @accent-color; + border-color: @accent-color; + } + + .suggestion-link { + border-bottom-color: @surface0; + } + + .cdx-menu, + .skin-vector .uls-menu, + .suggestiodns-dropdown, + .cdx-search-input--has-end-button, + .vector-sticky-header, + .vector-sticky-header-context-bar, + .mw-heading2 { + border-color: @surface2; + } + + .suggestion-link.active { + background-color: fade(@accent-color, 20%); + .suggestion-title { + color: @accent-color; + } + } + + .mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted, + .cdx-menu-item--enabled.cdx-menu-item--highlighted { + background-color: fade(@accent-color, 20%); + } + + .mw-echo-ui-sortedListWidget, + .mw-echo-ui-sortedListWidget-group, + .mw-echo-ui-subGroupListWidget-header { + border-color: @surface2; + } + + .mw-mmv-post-image, + .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive + .cdx-button__icon { + background-color: @crust; + } + + .cdx-text-input__input:enabled::placeholder, + .cdx-text-input__input:enabled ~ .cdx-text-input__icon-vue, + .skin-vector .uls-languagefilter, + .skin-vector .uls-lcd-region-title, + .suggestion-description, + .cdx-menu-item--enabled .cdx-menu-item__text__description, + .mw-number-text, + .boilerplate > div:nth-child(3) > span:nth-child(1), + .boilerplate > div:nth-child(4) > span:nth-child(2) { + color: @subtext0 !important; + } + + input:hover + .cdx-button.cdx-button--action-progressive { + background-color: fade(@accent-color, 12.5%); + } + + #pt-notifications-alert .mw-echo-unseen-notifications::after { + background-color: @red !important; + } + + #pt-notifications-notice .mw-echo-unseen-notifications::after { + background-color: @blue !important; + } + + a, + .mw-parser-output a.external:visited { + color: @accent-color; + &:visited { + color: @mauve; + } + } + + a.new, + .mw-parser-output .cs1-visible-error, + .vector-menu-tabs .mw-list-item.new a, + .mw-plusminus-neg { + color: @red; + } + + a.mw-selflink { + color: @text; + } + + #searchInput { + color: @text; + &:hover { + border-color: @surface2; + } + &:focus { + border-color: @accent-color; + } + } + + .pure-form input[type="search"] { + border-color: @surface2; + box-shadow: inset 0 0 0 1px @surface2; + } + + #pt-notifications-alert .mw-echo-notifications-badge::after, + #pt-notifications-notice .mw-echo-notifications-badge::after, + .mw-echo-notification-badge-nojs::after { + border-color: @crust; + background-color: @accent-color; + color: @base; + } + + h2 { + border-bottom-color: @surface2; + } + + .mw-footer { + border-top-color: @surface2; + } + + .bookshelf { + border-top-color: @surface0; + box-shadow: 0 -1px 0 @surface0; + } + + body.ns-talk .mw-parser-output .mp-toolbox, + .mw-parser-output .tmbox, + #talkheader { + border-color: fade(@yellow, 20%) !important; + background-color: fade(@yellow, 10%) !important; + } + + body.ns-talk .mw-parser-output .mp-toolbox-daily th { + border-color: fade(@yellow, 80%) !important; + background-color: fade(@yellow, 20%) !important; + } + + .fn.org { + color: @accent-color; + } + + .mw-parser-output .mp-toolbox-daily th, + .mw-parser-output td.mp-toolbox-tfl-not { + background: fade(@yellow, 20%) !important; + border-color: fade(@yellow, 20%) !important; + } + + body.ns-talk .mw-parser-output .mp-toolbox-daily { + border-color: fade(@yellow, 20%) !important; + background: none !important; + } + + .mw-parser-output tr + tr > .navbox-list, + .mw-parser-output tr + tr > .navbox-group { + border-top-color: @surface0; + } + + .ext-phonos-PhonosButton.oo-ui-buttonElement-frameless.oo-ui-buttonWidget + > .oo-ui-buttonElement-button:hover { + background-color: fade(@accent-color, 20%); + } + + .styled-select:hover { + background-color: @surface0; + } + + .lang-list-button, + .lang-list-button:hover { + background-color: @base; + border-color: @surface1; + outline-color: @base; + } + + .cdx-typeahead-search__search-footer__icon.cdx-icon { + color: @subtext0; + } + + .vector-toc + .vector-toc-level-1-active:not(.vector-toc-list-item-active) + > .vector-toc-link { + color: @text !important; + } + + .lang-list-active .lang-list-button { + background-color: @base; + border-color: @surface1; + outline-color: @base; + } + + .lang-list-button:focus { + box-shadow: inset 0 0 0 1px @accent-color; + } + + .lang-list-border { + background-color: @surface1; + } + + .infobox-header, + .infobox-subheader, + .infobox-full-data { + background-color: @surface1 !important; + color: @text !important; + } + + td[style*="background-color"], + td[style*="background-color"] * { + color: @crust !important; + } + + #toc-Services > a:nth-child(1) > div:nth-child(1) { + color: @text !important; + } + + .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive, + .vector-menu-tabs .mw-list-item a, + .vector-feature-zebra-design-enabled .vector-toc .vector-toc-link, + .mw-parser-output a.extiw, + .mw-parser-output a.external, + .mw-collapsible-toggle-default .mw-collapsible-text, + .vector-feature-zebra-design-enabled + .vector-pinnable-element + .mw-list-item + a, + .vector-feature-zebra-design-enabled + .vector-dropdown-content + .mw-list-item + a, + .vector-feature-zebra-design-enabled + .vector-pinnable-element + .mw-list-item + a:not(.mw-selflink):visited, + .vector-feature-zebra-design-enabled + .vector-dropdown-content + .mw-list-item + a:not(.mw-selflink):visited, + .uls-language-block a, + .lang-list-button, + .fancycaptcha-reload, + #pt-userpage-2 a:not(.mw-selflink), + .vector-pinnable-element .mw-list-item a, + .vector-pinnable-element .mw-list-item a:not(.mw-selflink):visited, + .vector-toc .vector-toc-link, + .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive + > .oo-ui-buttonElement-button, + .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive + > .oo-ui-buttonElement-button:hover, + .vector-dropdown-content .mw-list-item a, + .vector-dropdown-content .mw-list-item a:not(.mw-selflink):visited { + color: @accent-color; + } + + .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive, + .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive, + .mw-ui-button.mw-ui-progressive:not(:disabled), + .mw-ui-button.mw-ui-progressive:not(:disabled):hover { + background-color: @accent-color; + border-color: @accent-color; + color: @base; + } + + .mw-message-box-warning, + .boilerplate { + border-color: @accent-color !important; + background-color: fade(@accent-color, 25%) !important; + color: @text; + } + + .vector-feature-zebra-design-enabled .vector-sticky-pinned-container::after, + .vector-sticky-pinned-container::after { + background: none; + } + + .vector-feature-zebra-design-enabled .vector-pinnable-header-toggle-button { + background-color: @surface0; + color: @text; + &:hover { + background-color: @base; + } + } + + .vector-feature-zebra-design-enabled .vector-pinnable-header, + .vector-pinnable-header, + .vector-pinnable-element .vector-menu-heading { + border-bottom-color: @surface0; + } + + hr { + border-bottom-color: @surface2; + } + + .central-featured-lang strong:hover, + .link-box:hover, + .central-featured-lang :hover, + .other-project-link:hover, + .lang-list-container { + background-color: @surface0; + } + + .vector-page-toolbar-container { + box-shadow: 0 1px @surface1; + } + + .mw-parser-output .navbox-even { + background-color: @surface1; + } + + .vector-feature-zebra-design-enabled .vector-page-titlebar::after, + .mw-parser-output .wikipedia-languages-prettybars, + .vector-page-titlebar::after { + background-color: @surface2 !important; + } + + table.expanded:nth-child(2) > tbody:nth-child(1) > tr:nth-child(2) { + background-color: fade(@accent-color, 20%) !important; + } + + .client-js .mw-content-ltr .mw-editsection-bracket:first-of-type, + .client-js .mw-content-ltr .mw-editsection-bracket:not(:first-of-type), + .mw-collapsible-toggle-default::before, + .mw-collapsible-toggle-default::after { + color: @subtext1; + } + + .infobox, + .mw-parser-output .navbox, + .catlinks, + .mw-parser-output #mp-topbanner, + .mw-parser-output .sidebar, + .fancycaptcha-captcha-container, + .fancycaptcha-captcha-and-reload, + .cdx-checkbox__icon, + .mw-message-box, + .uls-menu .uls-no-results-view .uls-no-found-more, + .client-js + .vector-below-page-title + .vector-page-titlebar-toc + > label:nth-child(2), + .mw-parser-output .ombox, + code, + .oo-ui-buttonElement-framed.oo-ui-widget-enabled + > .oo-ui-buttonElement-button, + .mw-mmv-label, + #page-secondary-actions > a, + .mw-parser-output .ambox, + td[class="sidebar-navbar"], + textarea, + .mw-parser-output .side-box { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface2 !important; + } + + #pagehistory li.selected { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface2 !important; + outline-color: @surface2 !important; + } + + .cdx-checkbox__icon { + border-color: @accent-color !important; + } + + .fancycaptcha-captcha-container .mw-ui-inputو .mw-ui-input:not(:disabled) { + background-color: @base !important; + color: @text !important; + border-color: @surface1; + } + + .mw-ui-input:not(:disabled), + .mw-ui-button:not(:disabled) { + background-color: @base !important; + color: @text !important; + border-color: @surface1 !important; + } + + .mw-parser-output .module-shortcutboxplain { + background-color: @base !important; + color: @text !important; + border-color: @surface2; + } + + .sidebar-pretitle, + .sidebar-title-with-pretitle, + .sidebar-list-title { + background-color: fade(@accent-color, 20%) !important; + } + + .mw-parser-output #mp-bottom, + .mw-parser-output .sidebar-collapse .sidebar-below { + border-color: @surface2; + } + + .lang-list-content, + .bookshelf .text { + background-color: @surface0; + } + + .mw-parser-output #mp-bottom .mp-h2, + .uls-language-block > ul > li:hover { + background: @surface0; + border-color: @surface2; + } + + figure[typeof~="mw:File/Thumb"] { + background-color: @mantle !important; + color: @text !important; + border-top-color: @surface2; + border-left-color: @surface2; + border-right-color: @surface2; + > figcaption { + background-color: @mantle !important; + color: @text !important; + border-bottom-color: @surface2; + border-left-color: @surface2; + border-right-color: @surface2; + } + > :not(figcaption) .mw-file-element { + color: @surface2 !important; + border-color: @surface2; + } + } + + .mw-parser-output #mp-left, + .mw-parser-output #mp-left .mp-h2, + th[class="sidebar-title"] { + background-color: fade(@green, 10%) !important; + border-color: fade(@green, 20%) !important; + } + + .mw-plusminus-pos { + color: @green !important; + } + + .mw-parser-output #mp-right, + .mw-parser-output #mp-right .mp-h2 { + background-color: fade(@blue, 10%) !important; + border-color: fade(@blue, 20%) !important; + } + + .mw-parser-output #mp-lower, + .mw-parser-output #mp-lower .mp-h2 { + background-color: fade(@mauve, 10%) !important; + border-color: fade(@mauve, 20%) !important; + } + + .mw-collapsible-toggle-default:active .mw-collapsible-text { + color: @peach; + } + + .mw-parser-output #mp-middle, + .mw-parser-output #mp-middle .mp-h2 { + background-color: fade(@pink, 10%) !important; + border-color: fade(@pink, 20%) !important; + } + + .mw-parser-output .navbox-title, + .summary, + .infobox > tbody:nth-child(1) > tr:nth-child(4) > th:nth-child(1), + .infobox > tbody:nth-child(1) > tr:nth-child(6) > th:nth-child(1) { + background-color: fade(@accent-color, 20%) !important; + } + + .infobox > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1) { + background-color: @surface1 !important; + } + + .mw-parser-output .navbox-group, + table.expanded:nth-child(2) > tbody:nth-child(1) > tr:nth-child(3), + table.expanded:nth-child(2) + > tbody:nth-child(1) + > tr:nth-child(4) + > td:nth-child(2) + > table:nth-child(2) + > tbody:nth-child(1) + > tr:nth-child(1), + table.expanded:nth-child(2) > tbody:nth-child(1) > tr:nth-child(1), + table.nowraplinks:nth-child(1) + > tbody:nth-child(1) + > tr:nth-child(3) + > td:nth-child(1) + > table:nth-child(2) + > tbody:nth-child(1) + > tr:nth-child(1), + table.nowraplinks:nth-child(1) + > tbody:nth-child(1) + > tr:nth-child(4) + > td:nth-child(1) + > table:nth-child(2) + > tbody:nth-child(1) + > tr:nth-child(1), + table.nowraplinks:nth-child(1) + > tbody:nth-child(1) + > tr:nth-child(5) + > td:nth-child(1) + > table:nth-child(2) + > tbody:nth-child(1) + > tr:nth-child(1), + .navbox-abovebelow { + background-color: @surface1 !important; + } + + .mw-parser-output .tracklist > tbody { + color: inherit; + + > .tracklist-total-length * { + background-color: @overlay1; + color: @base; + } + } + + .mw-content-ltr + > table:nth-child(20) + > tbody:nth-child(1) + > tr:nth-child(2) + > td:nth-child(2) { + border-color: @surface2 !important; + background-color: @surface0 !important; + } + + .noarticletext, + #noarticletext { + background-color: @base !important; + } + + #sisterproject { + background-color: @mantle !important; + } + + [style="color:#02a64f;line-height:initial"] { + color: @green !important; + } + + [style="color:#f78e1e;line-height:initial"] { + color: @peach !important; + } + + [style="color:#77278b;line-height:initial"] { + color: @mauve !important; + } + + [style="color:#87746a;line-height:initial"] { + color: @maroon !important; + } + + [style="color:#009aC8;line-height:initial"] { + color: @sky !important; + } + + [style="color:#ffd520;line-height:initial"] { + color: @yellow !important; + } + + [style="color:#0060a9;line-height:initial"] { + color: @blue !important; + } + + table.nowraplinks:nth-child(4) > tbody:nth-child(1) > tr:nth-child(1), + .navbox-list-with-group.navbox-list.navbox-odd { + background-color: @surface0 !important; + } + + .mw-parser-output tr + tr > .navbox-abovebelow { + border-color: @base; + } + + .catlinks li { + border-left-color: @surface2; + } + + /* Fundraising banner */ + .frb-btn, + .frb-label { + color: @text; + background-color: @base; + border-color: @overlay0; + } + + input[type="radio"]:checked + .frb-btn, + input[type="radio"]:checked + .frb-label, + .frb-btn:hover, + .frb-label:hover { + color: @base; + background-color: @accent-color; + border-color: @accent-color; + } + + #frb-main { + --wmui-base100: @base; + --wmui-base0: @text; + --frb-body: @text; + --frb-muted: @subtext0; + --frb-link: @subtext0; + --frb-link-hover: @text; + --frb-error: @red; + --frb-submit: @accent-color; + --frb-submit-hover: darken(@accent-color, 10%); + + svg.frb-message-icon > g { + circle { + fill: @yellow; + } + path { + fill: @base; + } + } + + .frb-message { + background-color: @green; + border-color: @green; + } + + .frb-message::after { + border-left-color: @green; + } + } + + #frb-inline { + --wmui-base100: @base; + --frb-primary: @red; + --frb-link: @accent-color; + --frb-muted: @subtext0; + --frb-muted-hover: @text; + --frb-body: @text; + --frb-error: @red; + --wmui-red-dark: @red; + --wmui-red-light: @red; + --wmui-green-dark: @green; + --wmui-green-light: @green; + --frb-submit: @accent-color; + --frb-submit-hover: darken(@accent-color, 10%); + + .frb-inline-topbar { + color: @text; + + svg circle { + fill: @yellow; + } + + svg path { + fill: @base; + } + } + + .frb-btn-cta { + background-color: @accent-color !important; + border-color: @accent-color !important; + color: @base !important; + } + + .frb-btn-simple { + color: @accent-color !important; + } + + .frb-monthly-pitch { + color: @blue; + } + + .frb-optin-no-prompt { + color: @base; + } + + .frb-cta-hiddenmessage { + background-color: @red; + color: @base; + } + } + + #frb-nag { + --frb-primary-light: @base; + --frb-body: @text; + --wmui-accent-dark: @subtext0; + --frb-link-hover: @text; + + span.frb-donate-button { + color: @base; + background-color: @red; + + &:hover { + color: @base; + background-color: darken(@red, 10%); + } + } + + svg.frb-icon-close > g { + stroke: @subtext0; + + &:hover { + stroke: @text; + } + } + } + + .frb-nag:not(#frb-nag) { + --frb-message-background: @base; + --frb-message-border: @red; + --frb-message: @text; + border-color: @surface0; + background: @base; + box-shadow: none; + + #nag-rml-btn { + background-color: transparent; + border-color: transparent; + color: @subtext0; + } + + #nag-yes-btn { + background-color: @accent-color; + border-color: @accent-color; + color: @base; + } + } + + .frb-btn-cta-label::after { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .frb-back { + @svg-raw: ''; + @svg: escape(@svg-raw); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .frb-close { + @svg-raw: ''; + @svg: escape(@svg-raw); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .sprite { + @svg: escape( + '' + ); + background-image: + linear-gradient(transparent, transparent), + url("data:image/svg+xml,@{svg}"); + } + + .mw-logo-wordmark { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .mw-logo-tagline { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-menu { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-ellipsis { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-appearance { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .vector-feature-zebra-design-enabled + .vector-dropdown + .vector-dropdown-label:not(.cdx-button--icon-only)::after, + .vector-icon.mw-ui-icon-wikimedia-expand { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .cdx-checkbox__input:checked:not(:indeterminate) + + .cdx-checkbox__icon::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .vector-page-titlebar + .mw-portlet-lang + .vector-dropdown-label.cdx-button--action-progressive.cdx-button--weight-quiet::after { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .vector-dropdown .vector-dropdown-label:not(.cdx-button--icon-only)::after { + @svg: escape( + '' + ); + background: url("data:image/svg+xml,@{svg}") !important; + } + + .vector-icon.mw-ui-icon-wikimedia-language-progressive { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .vector-icon.mw-ui-icon-wikimedia-language { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .mw-parser-output a.external { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .plainlinks a.external { + background: none !important; + } + + #mw-indicator-mw-helplink a { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + [alt="Edit this at Wikidata"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}") !important; + } + + .cdx-search-input .cdx-text-input__icon.cdx-text-input__start-icon { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .vector-icon.mw-ui-icon-wikimedia-listBullet { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + ul { + @svg: escape( + '' + ); + list-style-image: url("data:image/svg+xml,@{svg}"); + } + + .oo-ui-icon-volumeUp, + .mw-ui-icon-volumeUp::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-fullScreen { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .fancycaptcha-reload { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .popups-icon--settings { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-userAvatar { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-watchlist { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-tray { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-bell { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-user-menu-logged-in .vector-dropdown-label::after { + @svg: escape( + '' + ); + background: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-star { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-userTalk { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-sandbox { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-settings { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-unStar { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .oo-ui-image-progressive.oo-ui-icon-settings { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .oo-ui-icon-bell { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .oo-ui-icon-next { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .oo-ui-icon-settings { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .oo-ui-icon-expand { + @svg: escape( + ' expand ' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .oo-ui-icon-tray { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-labFlask { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .mw-ui-icon-vector-gadget-pt-darkmode { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .client-dark-mode .mw-ui-icon-vector-gadget-pt-darkmode { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-userContributions { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-logOut { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .uls-search-label, + .vector-icon.mw-ui-icon-wikimedia-search { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .mw-ui-icon-vector-gadget-pt-darkmode-sticky-header { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .cdx-message .cdx-message__icon { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-edit { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-history { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-speechBubbles { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-editLock { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .branding-box > a:nth-child(1) > span:nth-child(1) > img:nth-child(1) { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/wikiwand/catppuccin.user.css b/styles/wikiwand/catppuccin.user.css index 284afc6050..c38c669e0b 100644 --- a/styles/wikiwand/catppuccin.user.css +++ b/styles/wikiwand/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name Wikiwand Catppuccin +@name Wikiwand Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/wikiwand @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/wikiwand -@version 2024.12.28.4 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/wikiwand/catppuccin.user.css +@version 2024.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/wikiwand/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Awikiwand @description Soothing pastel theme for Wikiwand @author Catppuccin @@ -13,149 +13,4 @@ @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("wikiwand.com") { - @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); - - @media (prefers-color-scheme: light) { - .theme-system { - #catppuccin(@lightFlavor, @accentColor); - } - } - @media (prefers-color-scheme: dark) { - .theme-system { - #catppuccin(@darkFlavor, @accentColor); - } - } - - .theme-light, - .theme-desert, - .theme-calmness { - #catppuccin(@lightFlavor, @accentColor); - } - .theme-dark, - .theme-black, - .theme-deepOcean, - .theme-nature { - #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]; - - --ctp-rosewater: @rosewater; - --ctp-flamingo: @flamingo; - --ctp-pink: @pink; - --ctp-mauve: @mauve; - --ctp-red: @red; - --ctp-maroon: @maroon; - --ctp-peach: @peach; - --ctp-yellow: @yellow; - --ctp-green: @green; - --ctp-teal: @teal; - --ctp-sky: @sky; - --ctp-sapphire: @sapphire; - --ctp-blue: @blue; - --ctp-lavender: @lavender; - --ctp-text: @text; - --ctp-subtext1: @subtext1; - --ctp-subtext0: @subtext0; - --ctp-overlay2: @overlay2; - --ctp-overlay1: @overlay1; - --ctp-overlay0: @overlay0; - --ctp-surface2: @surface2; - --ctp-surface1: @surface1; - --ctp-surface0: @surface0; - --ctp-base: @base; - --ctp-mantle: @mantle; - --ctp-crust: @crust; - - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - --color-bg: @base !important; - --color-text: @text !important; - --color-grey: @subtext1 !important; - --color-accent: @accent-color !important; - --color-highlight: @surface2 !important; - --color-ash: @surface2 !important; - --color-border: @surface2 !important; - --color-blue-bg: @surface1 !important; - --color-blue-text: @blue !important; - --color-purple-bg: @surface1 !important; - --color-purple-text: @mauve !important; - --color-green-bg: @surface1 !important; - --color-green-text: @green !important; - --color-orange-bg: @surface1 !important; - --color-orange-text: @peach !important; - --color-table: @surface0 !important; - --color-link: @accent-color !important; - --color-score-A: @green !important; - --color-score-B: @mauve !important; - --color-score-C: @peach !important; - --color-score-F: @red !important; - --color-score-NA: var(--color-grey) !important; - --grad: linear-gradient(-45deg, @peach, @blue, @pink, @yellow) !important; - --box-shadow: 0px 1px 4px 1px @crust !important; - --box-shadow-dark: 0px 0px 1px 1px @crust, 0px 1px 5px 2px @crust !important; - --box-shadow-strong: 0px 1px 5px 2px @crust !important; - --backdrop-bg: @base !important; - --backdrop-bg-ash: fade(@surface1, 50%) !important; - - .mw-no-invert * { - color: @crust !important; - } - - .notheme * { - --color-text: auto; - --color-link: auto; - } - } -} - -/* 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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/wikiwand/catppuccin.user.less b/styles/wikiwand/catppuccin.user.less new file mode 100644 index 0000000000..3ec477cd2a --- /dev/null +++ b/styles/wikiwand/catppuccin.user.less @@ -0,0 +1,160 @@ +/* ==UserStyle== +@name Wikiwand Catppuccin +@namespace github.com/catppuccin/userstyles/styles/wikiwand +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/wikiwand +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/wikiwand/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Awikiwand +@description Soothing pastel theme for Wikiwand +@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("wikiwand.com") { + @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); + + @media (prefers-color-scheme: light) { + .theme-system { + #catppuccin(@lightFlavor, @accentColor); + } + } + @media (prefers-color-scheme: dark) { + .theme-system { + #catppuccin(@darkFlavor, @accentColor); + } + } + + .theme-light, + .theme-desert, + .theme-calmness { + #catppuccin(@lightFlavor, @accentColor); + } + .theme-dark, + .theme-black, + .theme-deepOcean, + .theme-nature { + #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]; + + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + --color-bg: @base !important; + --color-text: @text !important; + --color-grey: @subtext1 !important; + --color-accent: @accent-color !important; + --color-highlight: @surface2 !important; + --color-ash: @surface2 !important; + --color-border: @surface2 !important; + --color-blue-bg: @surface1 !important; + --color-blue-text: @blue !important; + --color-purple-bg: @surface1 !important; + --color-purple-text: @mauve !important; + --color-green-bg: @surface1 !important; + --color-green-text: @green !important; + --color-orange-bg: @surface1 !important; + --color-orange-text: @peach !important; + --color-table: @surface0 !important; + --color-link: @accent-color !important; + --color-score-A: @green !important; + --color-score-B: @mauve !important; + --color-score-C: @peach !important; + --color-score-F: @red !important; + --color-score-NA: var(--color-grey) !important; + --grad: linear-gradient(-45deg, @peach, @blue, @pink, @yellow) !important; + --box-shadow: 0px 1px 4px 1px @crust !important; + --box-shadow-dark: + 0px 0px 1px 1px @crust, 0px 1px 5px 2px @crust !important; + --box-shadow-strong: 0px 1px 5px 2px @crust !important; + --backdrop-bg: @base !important; + --backdrop-bg-ash: fade(@surface1, 50%) !important; + + .mw-no-invert * { + color: @crust !important; + } + + .notheme * { + --color-text: auto; + --color-link: auto; + } + } +} + +/* deno-fmt-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; }; +}; diff --git a/styles/youtube/catppuccin.user.css b/styles/youtube/catppuccin.user.css index fd6b37628a..c0048fad04 100644 --- a/styles/youtube/catppuccin.user.css +++ b/styles/youtube/catppuccin.user.css @@ -1,9 +1,9 @@ /* ==UserStyle== -@name YouTube Catppuccin +@name YouTube Catppuccin [STUB | UPDATE REQUIRED] @namespace github.com/catppuccin/userstyles/styles/youtube @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/youtube -@version 2024.12.29 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/youtube/catppuccin.user.css +@version 2024.12.29.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/youtube/catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ayoutube @description Soothing pastel theme for YouTube @author Catppuccin @@ -16,1506 +16,4 @@ @var checkbox logo "Enable YouTube logo" 1 @var checkbox oled "Enable black bars" 0 -==/UserStyle== */ - -@-moz-document domain('youtube.com') { - :root[dark] { - #catppuccin(@darkFlavor, @accentColor); - } - :root:not([dark]) { - #catppuccin(@lightFlavor, @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]; - @text-filter: @catppuccin[@@lookup][@text_filter]; - - @white: if(@lookup = latte, @base, @text); - @black: if(@lookup = latte, @text, @base); - - color: @text; - background: @base !important; - color-scheme: if(@lookup = latte, light, dark); - - ::selection { - background-color: fade(@accent-color, 30%); - } - - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - - &, - [dark], - [system-icons], - [darker-dark-theme], - &[dark], - &[system-icons], - &[darker-dark-theme] { - --yt-spec-white-1: @text !important; - --yt-spec-white-2: @subtext0 !important; - --yt-spec-white-3: @subtext1 !important; - --yt-spec-white-4: darken(@subtext1, 5%) !important; - --yt-spec-black-1: @overlay1 !important; - --yt-spec-black-2: @overlay0 !important; - --yt-spec-black-3: @surface2 !important; - --yt-spec-black-4: @surface1 !important; - --yt-spec-black-pure: @surface0 !important; - --yt-spec-grey-1: @text !important; - --yt-spec-grey-2: @subtext0 !important; - --yt-spec-grey-3: @subtext1 !important; - --yt-spec-grey-4: @overlay2 !important; - --yt-spec-grey-5: @overlay1 !important; - --yt-brand-youtube-red: @accent-color !important; - --yt-brand-medium-red: @accent-color !important; - --yt-brand-light-red: @accent-color !important; - --yt-spec-red-30: @peach !important; - --yt-spec-red-70: @red !important; - --yt-spec-pale-blue: @sky !important; - --yt-spec-light-blue: @sky !important; - --yt-spec-dark-blue: @sapphire !important; - --yt-spec-navy-blue: @teal !important; - --yt-spec-light-green: @green !important; - --yt-spec-dark-green: @green !important; - --yt-spec-yellow: @peach !important; - --yt-spec-black-pure-alpha-5: @subtext0 !important; - --yt-spec-black-pure-alpha-10: @overlay2 !important; - --yt-spec-black-pure-alpha-15: fadeout(@crust, 15%) !important; - --yt-spec-black-pure-alpha-30: fadeout(@crust, 30%) !important; - --yt-spec-black-pure-alpha-60: fadeout(@crust, 60%) !important; - --yt-spec-black-pure-alpha-80: fadeout(@crust, 80%) !important; - --yt-spec-black-1-alpha-98: fadeout(@crust, 98%) !important; - --yt-spec-black-1-alpha-95: fadeout(@crust, 95%) !important; - --yt-spec-white-1-alpha-10: fadeout(@text, 10%) !important; - --yt-spec-white-1-alpha-20: fadeout(@text, 20%) !important; - --yt-spec-white-1-alpha-25: fadeout(@text, 25%) !important; - --yt-spec-white-1-alpha-30: fadeout(@text, 30%) !important; - --yt-spec-white-1-alpha-70: fadeout(@text, 70%) !important; - --yt-spec-white-1-alpha-95: fadeout(@text, 95%) !important; - --yt-spec-white-1-alpha-98: fadeout(@text, 98%) !important; - --yt-brand-medium-red-alpha-90: fadeout(@accent-color, 90%) !important; - --yt-brand-medium-red-alpha-30: fadeout(@accent-color, 30%) !important; - --yt-brand-light-red-alpha-30: fadeout(@accent-color, 30%) !important; - --yt-spec-light-blue-alpha-30: fadeout(@sapphire, 30%) !important; - --yt-spec-dark-blue-alpha-30: fadeout(@sapphire, 30%) !important; - - --yt-spec-base-background: @base !important; - --yt-spec-raised-background: @base !important; - --yt-spec-menu-background: @mantle !important; - --yt-spec-inverted-background: @text !important; - --yt-spec-additive-background: fadeout(@surface1, 10%) !important; - --yt-spec-outline: @surface0 !important; - --yt-spec-shadow: fadeout(@crust, 25%) !important; - --yt-spec-text-primary: @text !important; - --yt-spec-text-secondary: @subtext0 !important; - --yt-spec-text-disabled: @subtext1 !important; - --yt-spec-text-primary-inverse: @crust !important; - --yt-spec-call-to-action: @accent-color !important; - --yt-spec-call-to-action-inverse: @accent-color !important; - --yt-spec-suggested-action: fadeout(@accent-color, 80%) !important; - --yt-spec-suggested-action-inverse: @text !important; - --yt-spec-icon-active-other: @text !important; - --yt-spec-button-chip-background-hover: @surface1 !important; - --yt-spec-touch-response: @surface0 !important; - - --yt-spec-touch-response-inverse: @accent-color !important; - --yt-spec-brand-icon-active: @accent-color !important; - --yt-spec-brand-button-background: @accent-color !important; - --yt-spec-brand-link-text: @sapphire !important; - --yt-spec-wordmark-text: @text !important; - --yt-spec-error-indicator: @red !important; - --yt-spec-themed-blue: @accent-color !important; - --yt-spec-themed-green: @green !important; - --yt-spec-ad-indicator: @teal !important; - --yt-spec-themed-overlay-background: fadeout(@crust, 80%) !important; - --yt-spec-commerce-badge-background: @green !important; - --yt-spec-static-brand-red: @accent-color !important; - --yt-spec-static-brand-white: @text !important; - --yt-spec-static-brand-black: @base !important; - --yt-spec-static-clear-color: fadeout(@crust, 0%) !important; - --yt-spec-static-clear-black: fadeout(@crust, 0%) !important; - --yt-spec-static-ad-yellow: @peach !important; - --yt-spec-static-grey: @subtext0 !important; - --yt-spec-static-overlay-background-solid: @crust !important; - --yt-spec-static-overlay-background-heavy: @crust; - --yt-spec-static-overlay-background-medium: fade(@crust, 50%) !important; - --yt-spec-static-overlay-background-medium-light: fadeout( - @crust, - 30% - ) !important; - --yt-spec-static-overlay-background-light: fadeout( - @crust, - 10% - ) !important; - --yt-spec-static-overlay-text-primary: @text !important; - --yt-spec-static-overlay-text-secondary: fadeout( - @subtext0, - 70% - ) !important; - --yt-spec-static-overlay-text-disabled: fadeout( - @subtext0, - 30% - ) !important; - --yt-spec-static-overlay-call-to-action: @accent-color !important; - --yt-spec-static-overlay-icon-active-other: @crust !important; - --yt-spec-static-overlay-icon-inactive: @surface1 !important; - --yt-spec-static-overlay-icon-disabled: @surface2 !important; - --yt-spec-static-overlay-button-primary: @accent-color !important; - --yt-spec-static-overlay-button-secondary: @surface0 !important; - --yt-spec-static-overlay-touch-response: @overlay1 !important; - --yt-spec-static-overlay-touch-response-inverse: @surface1 !important; - --yt-spec-static-overlay-background-brand: @accent-color !important; - --yt-spec-assistive-feed-themed-gradient-1: @subtext0 !important; - --yt-spec-assistive-feed-themed-gradient-2: @lavender !important; - --yt-spec-assistive-feed-themed-gradient-3: @red !important; - --yt-spec-brand-background-solid: @base !important; - --yt-spec-brand-background-primary: @base !important; - --yt-spec-brand-background-secondary: @mantle !important; - --yt-spec-general-background-a: @base !important; - --yt-spec-general-background-b: @base !important; - --yt-spec-general-background-c: @crust !important; - --yt-spec-error-background: @base !important; - --yt-spec-10-percent-layer: @surface1 !important; - --yt-spec-snackbar-background: @mantle !important; - --yt-spec-snackbar-background-updated: @mantle !important; - --yt-spec-badge-chip-background: if( - @lookup =latte, - @crust, - @surface0 - ) !important; - --yt-spec-verified-badge-background: @overlay0 !important; - --yt-spec-call-to-action-fadeoutd: fadeout(@sapphire, 30%) !important; - --yt-spec-call-to-action-hover: @accent-color !important; - --yt-spec-brand-button-background-hover: @accent-color !important; - --yt-spec-brand-link-text-fadeoutd: fadeout( - @accent-color, - 30% - ) !important; - --yt-spec-filled-button-focus-outline: @surface0 !important; - --yt-spec-static-overlay-button-hover: @surface1 !important; - --yt-spec-mono-filled-hover: @surface1 !important; - --yt-spec-commerce-filled-hover: @accent-color !important; - --yt-spec-mono-tonal-hover: @surface1 !important; - --yt-spec-commerce-tonal-hover: @surface2 !important; - --yt-spec-static-overlay-filled-hover: @overlay1 !important; - --yt-spec-static-overlay-tonal-hover: @surface1 !important; - --yt-spec-paper-tab-ink: fadeout(@text, 30%); - --yt-spec-filled-button-text: @text !important; - --yt-spec-selected-nav-text: @text !important; - --iron-icon-fill-color: @text !important; - - /* Search bar */ - --ytd-searchbox-border-color: @surface0 !important; - --ytd-searchbox-legacy-border-color: @surface0 !important; - --ytd-searchbox-legacy-border-shadow-color: fadeout( - @crust, - 0% - ) !important; - --ytd-searchbox-legacy-button-color: @mantle !important; - --ytd-searchbox-legacy-button-border-color: @surface0 !important; - --ytd-searchbox-legacy-button-focus-color: @accent-color !important; - --ytd-searchbox-legacy-button-hover-color: @mantle !important; - --ytd-searchbox-legacy-button-hover-border-color: @surface0 !important; - --ytd-searchbox-legacy-button-icon-color: @accent-color !important; - --ytd-searchbox-background: @base !important; - --ytd-searchbox-text-color: @text !important; - - /* System icons */ - --yt-spec-icon-inactive: @text !important; - --yt-spec-icon-disabled: @overlay1 !important; - --yt-spec-brand-icon-inactive: @overlay2 !important; - - /* Yt video Page */ - --yt-live-chat-background-color: @base !important; - --yt-live-chat-action-panel-background-color: @base !important; - --yt-live-chat-secondary-background-color: @surface1; - --yt-live-chat-toast-background-color: @surface2 !important; - --yt-live-chat-mode-change-background-color: @base !important; - --yt-live-chat-secondary-text-color: @subtext0 !important; - --yt-live-chat-tertiary-text-color: fadeout(@text, 54%) !important; - --yt-live-chat-text-input-field-inactive-underline-color: @subtext0 !important; - --yt-live-chat-text-input-field-placeholder-color: @subtext0 !important; - --yt-live-chat-enabled-send-button-color: @text !important; - --yt-live-chat-disabled-icon-button-color: @subtext1 !important; - --yt-live-chat-picker-button-hover-color: @accent-color !important; - --yt-live-chat-mention-background-color: @accent-color !important; - --yt-live-chat-mention-text-color: @text !important; - --yt-live-chat-deleted-message-color: @subtext0; - --yt-live-chat-deleted-message-bar-color: @subtext1 !important; - --yt-live-chat-reconnect-message-color: @text !important; - --yt-live-chat-disabled-button-background-color: @overlay0 !important; - --yt-live-chat-sub-panel-background-color: @base !important; - --yt-live-chat-sub-panel-background-color-transparent: @mantle !important; - --yt-live-chat-moderator-color: @lavender !important; - --yt-live-chat-owner-color: @peach !important; - --yt-live-chat-message-highlight-background-color: @base !important; - --yt-live-chat-sponsor-color: @green !important; - --yt-live-chat-overlay-color: fadeout(@mantle, 50%); - --yt-live-chat-dialog-background-color: @base !important; - --yt-emoji-picker-variant-selector-bg-color: @base !important; - --yt-live-chat-moderation-mode-hover-background-color: fadeout( - @mantle, - 30% - ) !important; - --yt-grey: @subtext0 !important; - --yt-live-chat-text-input-field-suggestion-background-color: @subtext0 !important; - --yt-live-chat-text-input-field-suggestion-background-color-hover: @subtext1 !important; - --yt-emoji-picker-search-background-color: @surface0 !important; - --yt-emoji-picker-search-color: @text !important; - --yt-emoji-picker-search-placeholder-color: @accent-color !important; - --yt-live-chat-slider-active-color: @accent-color !important; - --yt-live-chat-slider-container-color: @surface0 !important; - --yt-live-chat-slider-markers-color: @text !important; - --yt-live-chat-banner-gradient-scrim: linear-gradient( - @mantle, - transparent - ) !important; - --yt-live-chat-action-panel-gradient-scrim: linear-gradient( - to top, - @mantle, - transparent - ) !important; - --yt-live-chat-automod-button-background-color-hover: fadeout( - @crust, - 50% - ) !important; - --yt-live-chat-automod-button-explanation-color: fadeout( - @accent-color, - 70% - ) !important; - --yt-live-chat-shimmer-background-color: fadeout(@crust, 40%) !important; - --yt-live-chat-shimmer-linear-gradient: linear-gradient( - 0deg, - fadeout(@text, 0.1) 40%, - fadeout(@base, 0.3) 50%, - fadeout(@text, 0.1) 60% - ) !important; - --yt-live-chat-vem-background-color: @mantle !important; - --yt-live-chat-product-picker-icon-color: fadeout(@text, 50%) !important; - --yt-live-chat-product-picker-hover-color: @overlay0 !important; - --yt-live-chat-product-picker-disabled-icon-color: fadeout( - @text, - 30% - ) !important; - --yt-live-chat-action-panel-background-color-transparent: ( - null - ) !important; - - --paper-tooltip-background: @overlay0 !important; - --paper-tooltip-text-color: @text !important; - - /* Links */ - --yt-endpoint-color: @accent-color !important; - --yt-endpoint-visited-color: @accent-color !important; - --yt-endpoint-hover-color: @accent-color !important; - - --sb-dark-red-outline: @accent-color !important; - --sb-main-bg-color: @base !important; - --sb-main-fg-color: @text !important; - --sb-grey-bg-color: @base !important; - --sb-grey-fg-color: @subtext0 !important; - --sb-red-bg-color: @accent-color !important; - } - - &:not(.style-scope) { - --primary-text-color: @text !important; - --primary-background-color: @base !important; - --secondary-text-color: @subtext0 !important; - --disabled-text-color: @subtext1 !important; - --divider-color: @overlay0 !important; - --error-color: @red !important; - --primary-color: @accent-color !important; - --light-primary-color: @accent-color !important; - --dark-primary-color: @blue !important; - --accent-color: @accent-color !important; - --light-accent-color: @accent-color !important; - --dark-accent-color: @accent-color !important; - --light-theme-background-color: @base !important; - --light-theme-base-color: @text !important; - --light-theme-text-color: @text !important; - --light-theme-secondary-color: @subtext0 !important; - --light-theme-disabled-color: @subtext1 !important; - --light-theme-divider-color: @overlay0 !important; - --dark-theme-background-color: @base !important; - --dark-theme-base-color: @text !important; - --dark-theme-text-color: @text !important; - --dark-theme-secondary-color: @subtext0 !important; - --dark-theme-disabled-color: @subtext1 !important; - --dark-theme-divider-color: @overlay0 !important; - } - - /* Misc */ - - & when (@logo = 0) { - ytd-topbar-logo-renderer, - svg.ytd-consent-bump-v2-lightbox { - display: none; - } - } - - #channel-name.ytd-video-meta-block { - --yt-endpoint-color: @accent-color !important; - --yt-endpoint-visited-color: @accent-color !important; - color: @accent-color !important; - } - - .yt-page-navigation-progress { - background: @accent-color !important; - } - - /* Selected chapter */ - ytd-macro-markers-list-item-renderer { - --ytd-macro-markers-list-item-background-color: @surface0 !important; - --ytd-macro-markers-list-item-title-color: @text !important; - --ytd-macro-markers-list-item-secondary-color: @subtext1 !important; - --ytd-macro-markers-list-item-timestamp-background-color: @surface1 !important; - } - - ytd-playlist-panel-video-renderer { - --yt-lightsource-section2-color: @surface1 !important; - --yt-lightsource-section4-color: @surface2 !important; - --yt-lightsource-primary-title-color: @text !important; - --yt-lightsource-secondary-title-color: @text !important; - --yt-active-playlist-panel-background-color: @surface0 !important; - } - - ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] - .header.ytd-playlist-panel-renderer { - --iron-icon-fill-color: @text !important; - background-color: @base !important; - } - - #container.ytd-masthead { - --iron-icon-fill-color: @text !important; - } - - #background.ytd-masthead { - --yt-frosted-glass-desktop: @base !important; - } - - ytd-feed-filter-chip-bar-renderer[expand-instead-of-scroll] - #chips-wrapper.ytd-feed-filter-chip-bar-renderer { - --iron-icon-fill-color: @text !important; - background-color: @base !important; - } - - #ytd-player #container when (@oled =0) { - background: @crust !important; - } - - .ytp-progress-list when not(@lookup = latte) { - background: fade(@surface0, 80%); - } - .ytp-load-progress when not(@lookup = latte) { - background: fade(@overlay0, 100%); - } - - ytd-expandable-metadata-renderer { - --yt-lightsource-section1-color: @base !important; - --yt-lightsource-section2-color: @surface0 !important; - --yt-lightsource-section3-color: @surface1 !important; - --yt-lightsource-section4-color: @surface2 !important; - --yt-lightsource-primary-title-color: @text !important; - --yt-lightsource-secondary-title-color: @subtext0 !important; - } - - yt-live-chat-renderer { - --yt-button-default-text-color: @text !important; - --yt-button-default-background-color: @base !important; - --yt-button-dark-text-color: @base !important; - --yt-button-dark-background-color: @accent-color !important; - --yt-button-payment-background-color: @accent-color !important; - } - - yt-icon-button.yt-live-chat-item-list-renderer { - background-color: @accent-color; - color: @crust; - - &:hover { - background-color: darken(@accent-color, 5%); - } - } - - ytd-author-comment-badge-renderer:not( - [style*="--ytd-author-comment-badge-icon-background-color: transparent;"] - ) { - --yt-basic-background-color: @surface0 !important; - --yt-basic-foreground-title-color: @surface0 !important; - --ytd-author-comment-badge-background-color: @surface0 !important; - --ytd-author-comment-badge-name-color: @text !important; - --ytd-author-comment-badge-icon-color: @text !important; - } - - /* Skeleton */ - #guide-skeleton, - #home-container-skeleton, - #home-chips { - background-color: @base; - z-index: -1; - } - - #guide-skeleton .guide-ghost-icon, - #guide-skeleton .guide-ghost-text, - .masthead-skeleton-icon, - #home-page-skeleton .skeleton-bg-color, - .watch-skeleton .skeleton-bg-color { - background-color: @surface1; - } - - /* Ambient mode */ - #cinematics, - #cinematic-container { - mix-blend-mode: lighten; - } - - .ytp-settings-button.ytp-hd-quality-badge::after, - .ytp-settings-button.ytp-hdr-quality-badge::after, - .ytp-settings-button.ytp-4k-quality-badge::after, - .ytp-settings-button.ytp-5k-quality-badge::after, - .ytp-settings-button.ytp-8k-quality-badge::after, - .ytp-settings-button.ytp-3d-badge-grey::after, - .ytp-settings-button.ytp-3d-badge::after { - background-color: @accent-color; - } - - /* Icons */ - - [fill="red"], - [fill="#F00"], - [fill="#FF0000"], - [fill="#f03"], - [fill="#FF0033"] { - fill: @accent-color !important; - } - - [fill="white"] { - fill: if(@lookup = latte, @base, @text) !important; - } - - /* verification badge */ - [src*="https://www.gstatic.com/images/icons/material/system/1x/check_circle_grey600_36dp.png"] - { - filter: @text-filter; - } - - yt-icon.ytd-logo [fill="white"] { - fill: @crust !important; - } - - .yt-spec-icon-shape { - [fill="#FAFAFA"], - [fill="#000"], - [fill="#fff"], - [fill="#FFF"], - [fill="#FFFFFF"] { - fill: @crust !important; - } - } - - .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon, - .yt-spec-icon-badge-shape { - color: @text; - } - - .yt-spec-icon-badge-shape--type-notification - .yt-spec-icon-badge-shape__badge { - background-color: @accent-color !important; - color: @surface0 !important; - } - - /* Buttons */ - - .yt-spec-button-shape-next--mono { - &.yt-spec-button-shape-next--tonal { - color: @text; - background-color: @surface0; - - [fill="rgb(3,3,3)"], - [fill="rgb(0,0,0)"], - [fill="rgb(255,255,255)"] { - fill: @text !important; - } - - [stroke="rgb(0,0,0)"], - [stroke="rgb(255,255,255)"] { - stroke: @text !important; - } - - /* Accent for filled-in thumbs up (like button) */ - [animated-icon-type="LIKE"] { - g path[fill] { - fill: @accent-color !important; - - + [stroke] { - stroke: @accent-color !important; - } - } - } - - &:hover { - background-color: @surface1; - } - } - - &.yt-spec-button-shape-next--outline { - color: @text; - border-color: @surface2; - - &:hover { - background-color: @surface2; - } - } - - &.yt-spec-button-shape-next--text { - color: @text; - - /* Accent for filled-in thumbs up (like button) */ - path[d="M3,11h3v10H3V11z M18.77,11h-4.23l1.52-4.94C16.38,5.03,15.54,4,14.38,4c-0.58,0-1.14,0.24-1.52,0.65L7,11v10h10.43 c1.06,0,1.98-0.67,2.19-1.61l1.34-6C21.23,12.15,20.18,11,18.77,11z"] { - fill: @accent-color; - } - - &:hover { - background-color: @surface1; - } - } - - &.yt-spec-button-shape-next--filled { - color: @crust; - background-color: @accent-color; - - &:hover { - background-color: darken(@accent-color, 5%); - } - } - } - - .yt-spec-button-shape-next--disabled { - background-color: fade(@overlay0, 50%); - color: @subtext0; - } - - .yt-spec-button-shape-next--overlay { - &.yt-spec-button-shape-next--tonal { - color: @text; - background-color: @surface0; - &:hover { - background-color: @surface1; - } - } - &.yt-spec-button-shape-next--text { - color: @text; - } - - &.yt-spec-button-shape-next--filled { - color: @crust; - background-color: @accent-color; - } - - &.yt-spec-button-shape-next--outline { - color: @text; - border-color: @surface1; - &:hover { - background: @surface0; - } - } - } - - .yt-spec-button-shape-next--call-to-action { - &.yt-spec-button-shape-next--outline { - color: @accent-color; - border-color: @surface2; - - &:hover { - background-color: fade(@accent-color, 30%); - color: @accent-color; - } - } - - &.yt-spec-button-shape-next--text { - color: @accent-color; - - &:hover { - background-color: fade(@accent-color, 30%); - } - } - - &.yt-spec-button-shape-next--filled { - color: @crust; - background-color: @accent-color; - - &:hover { - background-color: lighten(@accent-color, 5%); - } - } - } - - .yt-spec-button-shape-next--disabled.yt-spec-button-shape-next--filled { - color: @subtext0; - background-color: fade(@surface1, 70%); - } - - /* Search box */ - ytd-searchbox[has-focus] #container.ytd-searchbox { - border-color: @accent-color; - } - - .ytSearchboxComponentInputBox, - .ytSearchboxComponentInputBoxDark { - background: var(--ytd-searchbox-background) !important; - color: var(--ytd-searchbox-text-color) !important; - border-color: var(--ytd-searchbox-border-color) !important; - box-shadow: none; - } - - .ytSearchboxComponentInputBoxHasFocus, - .ytSearchboxComponentInputBoxHasFocusDark { - border-color: @accent-color !important; - } - - .ytSuggestionComponentSuggestionHover:hover, - .ytSuggestionComponentSuggestionHoverDark:hover { - background: @surface1 !important; - } - - .ytSearchboxComponentSuggestionsContainer, - .ytSearchboxComponentSuggestionsContainerDark { - background: var(--yt-spec-raised-background) !important; - border-color: var(--yt-spec-raised-background) !important; - } - - .ytSuggestionComponentSuggestion, - .ytSuggestionComponentSuggestionDark { - color: var(--ytd-searchbox-text-color) !important; - } - - .ytSearchboxComponentSearchButton, - .ytSearchboxComponentSearchButtonDark { - color: var(--ytd-searchbox-text-color) !important; - background: @surface0 !important; - border-color: var(--ytd-searchbox-border-color) !important; - } - - .ytSearchboxComponentClearButtonIcon, - .ytSearchboxComponentClearButtonIconDark { - color: var(--ytd-searchbox-text-color) !important; - } - - .ytSearchboxComponentReportButton, - .ytSearchboxComponentReportButtonDark, - .ytSuggestionComponentRemoveLink, - .ytSuggestionComponentRemoveLinkDark { - color: @subtext0 !important; - } - - .sbsb_a { - background: @surface0; - } - .sbdd_b { - border-color: var(--yt-spec-raised-background); - background-color: var(--yt-spec-raised-background); - } - .sbpqs_a, - .gsfs { - color: var(--yt-spec-text-primary); - } - .sbsb_i { - color: var(--yt-spec-call-to-action); - } - .sbsb_d { - background-color: var(--yt-spec-additive-background); - } - .sbdd_c { - visibility: hidden; - } - - /* "Suggestion removed" */ - .sbpqs_c { - color: @overlay1; - } - - .sbpqs_a::before, - .sbqs_c::before { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - background: none; - } - - /* Video description */ - - #description { - [style*="color: rgb(255, 255, 255);"], - [style*="color: rgb(19, 19, 19);"] { - color: @text !important; - } - } - - .yt-core-attributed-string__link--call-to-action-color { - color: @accent-color; - } - - .YtwCourseProgressViewModelHostProgressTitle, - .YtwCourseProgressViewModelHostProgressSubtitle { - color: @text; - } - - .YtwCourseProgressViewModelHostProgressBar { - background-color: fade(@white, 20%); - - .YtwCourseProgressViewModelHostProgressBarFill { - background-color: @text; - } - } - - .ytwHowThisWasMadeSectionViewModelSectionTitle, - .ytwHowThisWasMadeSectionViewModelBodyHeader { - color: @text; - } - - .ytwHowThisWasMadeSectionViewModelBodyText { - color: @subtext0; - } - - /* Thumbnails */ - - #time-status:has([aria-label="LIVE"]), - .badge[aria-label="LIVE"], - .badge[aria-label="PREMIERE"], - .badge-shape-wiz--live.badge-shape-wiz--overlay, - .badge-shape-wiz--thumbnail-live { - background: @accent-color; - color: @crust; - } - #thumbnail [style="background-color: rgba(51, 51, 51, 0.8);"], - .YtInlinePlayerControlsTopRightControlsCircleButton, - .badge-shape-wiz--default.badge-shape-wiz--overlay, - .branding-context-container-inner { - background-color: @surface0 !important; - color: @text; - } - .ytp-sb-unsubscribe { - background-color: @surface2; - color: @text; - } - .ytp-sb-subscribe { - background-color: @accent-color; - color: @crust; - } - ytd-thumbnail-overlay-resume-playback-renderer { - background-color: @surface1; - } - .badge-shape-wiz--thumbnail-default { - color: @text; - background: fade(@crust, 80%); - } - - /* Panels, popups, tooltips */ - - .ytp-tooltip-text { - background: fade(@surface0, 90%) !important; - color: @text; - text-shadow: none !important; - } - - .ytp-popup { - background: fade(@surface0, 90%) !important; - text-shadow: none; - } - - .ytp-panel-menu, - .ytp-panel-header, - .ytp-panel-footer, - .ytp-menuitem-label, - .ytp-premium-label, - .ytp-menuitem-content, - .ytp-menuitem-label-count, - .ytp-menu-label-secondary, - .ytd-menu-title-renderer { - color: @text; - } - - .ytp-panel-header { - border-bottom-color: @surface2; - } - - .ytp-panel-footer-content-link { - color: @accent-color; - } - - .ytp-panel-back-button { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - - .ytp-menuitem-toggle-checkbox { - background-color: @surface2; - - &::after { - background-color: @subtext0; - } - } - .ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox { - background: @accent-color; - } - - .ytp-menuitem { - &:not([aria-disabled="true"]):hover { - background-color: @surface1; - } - - svg > path:not([fill="none"]) { - fill: @text !important; - } - - &[aria-haspopup="true"] .ytp-menuitem-content { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - &[role="menuitemradio"][aria-checked="true"] .ytp-menuitem-label { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - } - } - - /* Video player */ - - .ytp-cards-button { - .ytp-cards-button-icon { - use { - fill: @black; - } - path { - fill: @white; - } - } - } - .ytp-cards-teaser { - .ytp-cards-teaser-box { - background-color: @surface2; - border-bottom-color: @surface2; - } - .ytp-cards-teaser-text { - color: @text; - } - } - - .html5-video-player { - color: @white; - - .ytp-swatch-background-color, - .ytp-play-progress { - background: @accent-color !important; - } - - .ytp-svg-fill, - [fill="#fff"] { - fill: @white !important; - } - - .ytp-volume-slider-handle { - &, - &::before { - background-color: @white; - } - &::after { - background-color: fade(@white, 20%); - } - } - - .ytp-time-current, - .ytp-time-separator, - .ytp-time-duration { - color: @white; - } - - .ytp-live-badge { - &[disabled]::before { - background: @accent-color; - } - &::before { - background: @overlay0; - } - } - - /* youtube live ring */ - .yt-spec-avatar-shape__badge-text { - color: @crust; - } - .yt-spec-avatar-shape--live-ring { - border-color: @accent-color; - } - .yt-spec-avatar-shape__live-badge { - background-color: @accent-color; - } - - .ytp-button, - .ytp-subtitles-button { - &[aria-pressed]::after { - background-color: @accent-color; - } - } - - /* stats for nerds */ - .ytp-sfn { - background: fade(@base, 80%); - color: @text; - } - - .ytp-autonav-toggle-button { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); - - &::after { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); - } - - &[aria-checked="true"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); - - &::after { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); - } - } - } - } - - /* Video highlight */ - ytd-rich-item-renderer.ytd-rich-item-renderer-highlight { - background-color: fade(@accent-color, 10%) !important; - box-shadow: fade(@accent-color, 10%) 0 0 0 10px !important; - } - - #shorts-container { - --yt-spec-static-overlay-text-primary: @white; - .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal { - color: @white; - } - - .YtwFactoidRendererLabel { - color: @subtext0; - } - .YtwFactoidRendererValue { - color: @text; - } - - ytd-reel-video-renderer:not([is-watch-while-mode]) { - .yt-spec-button-shape-with-label__label { - color: @subtext1; - } - } - ytd-reel-video-renderer[is-watch-while-mode] - .yt-spec-button-shape-with-label__label { - color: @white; - } - - .yt-spec-button-shape-next--overlay-dark.yt-spec-button-shape-next--tonal, - .YtdDesktopShortsVolumeControlsBackgroundScrim { - background-color: fade(@black, 60%); - color: @white; - } - - .YtProgressBarLineProgressBarPlayed, - .YtProgressBarPlayheadProgressBarPlayheadDot { - background-color: @accent-color !important; - } - - .yt-spec-button-shape-next--overlay-dark.yt-spec-button-shape-next--filled { - background-color: @accent-color; - color: @crust; - } - - .YtdDesktopShortsVolumeControlsMuteIcon { - color: @white !important; - } - - /* Buy super thanks button */ - .YtdShortsSuggestedActionStaticHostContainer { - background-color: fade(@black, 60%); - - .YtdShortsSuggestedActionStaticHostLeadingIcon, - .YtdShortsSuggestedActionStaticHostPrimaryText { - color: @text; - } - } - } - - /* Shorts titles and views on homepage */ - .shortsLockupViewModelHostOutsideMetadataEndpoint { - color: @text; - } - .shortsLockupViewModelHostOutsideMetadataSubhead { - color: @subtext0; - } - - /* Buy super thanks bar */ - #progressContainer.tp-yt-paper-progress { - background-color: @mantle !important; - } - - #comment-chip-container.yt-pdg-comment-chip-renderer, - .slider-knob-inner.tp-yt-paper-slider { - background: @accent-color !important; - } - - #primaryProgress.tp-yt-paper-progress { - background: linear-gradient(139deg, @peach, @maroon, @red, @pink); - } - - #container.ytd-pdg-comment-preview-renderer { - background-color: @mantle !important; - } - - #comment-chip-price.yt-pdg-comment-chip-renderer, - yt-icon.yt-pdg-comment-chip-renderer { - color: @crust; - } - - /* Channel pages */ - .yt-tab-shape-wiz__tab { - color: @subtext1; - } - .yt-tab-shape-wiz__tab--tab-selected { - color: @text; - } - .yt-tab-group-shape-wiz__slider { - background-color: @text; - } - .yt-tab-shape-wiz:hover .yt-tab-shape-wiz__tab-bar { - background-color: @subtext1; - } - .truncated-text-wiz, - .page-header-view-model-wiz__page-header-content-metadata { - color: @subtext1; - } - .page-header-view-model-wiz__page-header-title, - [style="color: rgb(255, 255, 255);"]:has(svg), - .truncated-text-wiz__absolute-button { - color: @text !important; - } - .yt-contextual-sheet-layout-wiz { - background-color: @mantle; - - .yt-list-item-view-model-wiz__container--tappable:hover { - background-color: @surface0; - } - - .yt-list-item-view-model-wiz__title, - .yt-list-item-view-model-wiz__accessory, - .radio-shape-wiz__label-container { - color: @text; - } - } - - /* channel details */ - .profile-badge-view-model-wiz__badge-description { - color: @text !important; - } - - .profile-badge-view-model-wiz__badge-subtitle { - color: @subtext0 !important; - } - - .yt-profile-identity-info-view-model-wiz__divider { - border-color: @surface0 !important; - } - - /* Profiles */ - .yt-profile-card-view-model-wiz { - background-color: @mantle; - } - .yt-profile-identity-info-view-model-wiz__channel-name, - .yt-profile-info-view-model-wiz__section-title, - .yt-comment-interaction-view-model-wiz__video-title, - .yt-shared-subscription-view-model-wiz__channel-name { - color: @text; - } - .yt-profile-identity-info-view-model-wiz__badge, - .yt-profile-identity-info-view-model-wiz__metadata-handle, - .yt-profile-identity-info-view-model-wiz__metadata-content, - .yt-profile-info-view-model-wiz__section-subtitle, - .yt-comment-interaction-view-model-wiz__comment-content { - color: @subtext0; - } - - /* Horizontal list arrows */ - .arrow.yt-horizontal-list-renderer { - background: @surface0; - } - - /* Live chat replay */ - .ytVideoMetadataCarouselViewModelHost, - .YtVideoMetadataCarouselViewModelHost { - background-color: @surface0; - - .ytCarouselTitleViewModelTitle, - .YtCarouselTitleViewModelTitle, - .yt-core-attributed-string, - .yt-icon-shape { - color: @text; - } - } - - /* AI-generated video summary */ - .video-summary-content-view-model-wiz__paragraph { - color: @text; - } - } -} - -@-moz-document url-prefix('https://studio.youtube.com') -{ - :root[dark] { - #catppuccin(@darkFlavor, @accentColor); - } - :root { - #catppuccin(@lightFlavor, @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; - } - } - - [src="https://www.gstatic.com/youtube/img/creator/yt_studio_logo_white.svg"] - { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - } - - &, - html, - html[dark], - html[dark][dark], - &[dark], - &[light], - [light], - html[light], - html[light][light] { - --yt-spec-black-pure-alpha-80: (null) !important; - --yt-spec-black-pure-alpha-60: (null) !important; - --yt-spec-black-1-alpha-98: (null) !important; - --yt-spec-black-1-alpha-95: (null) !important; - --iron-icon-fill-color: unset !important; - - --yt-spec-text-primary: @text !important; - --ytcp-text-primary: @text !important; - --ytcp-text-primary-inverse: @base !important; - --ytcp-static-overlay-text-primary-inverse: @base !important; - --ytcp-wordmark-text: @text !important; - --ytcp-text-secondary: @subtext0 !important; - --ytcp-text-disabled: @subtext1 !important; - --ytcp-overlay-text-primary: @overlay2 !important; - - --ytcp-general-background-a: @base !important; - --yt-spec-base-background: @base !important; - --yt-spec-black-3: @base !important; - - --yt-spec-brand-background-solid: @mantle !important; - --ytcp-brand-background-solid: @mantle !important; - --yt-spec-raised-background: @mantle !important; - --ytcp-general-background-b: @mantle !important; - --ytcp-analytics-reach-background: @mantle !important; - --yt-spec-black-2: @mantle !important; - - --ytcp-general-background-c: @crust !important; - --ytcp-menu-background: @surface0 !important; - - --ytcp-container-border-color: @surface0 !important; - --ytcp-container-hovered-border-color: @surface0 !important; - --ytcp-line-divider-solid: @surface0 !important; - --ytcp-container-border-color-inverse: @subtext0 !important; - --ytcp-line-divider-solid-inverse: @subtext0 !important; - - --ytcp-call-to-action: @accent-color !important; - --ytcp-call-to-action-inverse: @mantle !important; - --ytcp-call-to-action-raised-background: @accent-color !important; - --yt-spec-brand-button-background: @accent-color !important; - --ytcp-call-to-action-raised-disabled: @surface2 !important; - --ytcp-call-to-action-raised-disabled-background: @overlay2 !important; - --ytcp-call-to-action-raised-background-inverse: @base !important; - --ytcp-call-to-action-raised-disabled-inverse: @surface2 !important; - --ytcp-call-to-action-raised-disabled-background-inverse: @overlay2 !important; - - --yt-spec-brand-background-primary: @surface0 !important; - - --yt-compact-link-icon-color: @overlay2 !important; - --ytcp-icon-active: @accent-color !important; - --ytcp-icon-inactive: @overlay2 !important; - --ytcp-icon-disabled: @overlay0 !important; - --ytcp-icon-active-inverse: @overlay1 !important; - --ytcp-icon-disabled-inverse: @subtext1 !important; - - --ytcp-error-red: @red !important; - --ytcp-badge-red: @red !important; - --ytcp-error-red-inverse: @red !important; - --ytcp-themed-red-inverse: @red !important; - --ytcp-themed-red: @accent-color !important; - --ytcp-themed-blue: @accent-color !important; - --ytcp-badge-blue: fade(@accent-color, 30%); - --ytcp-badge-blue-solid: @blue !important; - --ytcp-themed-blue-inverse: @blue !important; - --ytcp-themed-green: @green !important; - --ytmus-genre-primary-melon: @green !important; - --ytcp-themed-green-inverse: @green !important; - --ytcp-analytics-pine: @green !important; - --ytcp-analytics-pine-inverse: @green !important; - --ytcp-analytics-parrot: @green !important; - --ytcp-themed-yellow: @peach !important; - --ytmus-genre-primary-gold: @peach !important; - --ytcp-yellow-inverse: @peach !important; - --ytcp-badge-yellow: @peach !important; - --ytcp-analytics-yellow: @peach !important; - --ytcp-analytics-apricot: @peach !important; - --ytcp-suggested-action: @teal !important; - --ytcp-analytics-overview: @teal !important; - --ytcp-analytics-revenue: @teal !important; - --ytcp-analytics-default-secondary: @teal !important; - --ytcp-analytics-royal-blue: @lavender !important; - --ytcp-analytics-reach: @lavender !important; - --ytcp-analytics-audience: @lavender !important; - --ytcp-analytics-engagement: @pink !important; - --ytcp-analytics-revenue-secondary: @pink !important; - --ytcp-analytics-bubblegum: @flamingo !important; - --ytmus-genre-primary-ruby: @flamingo !important; - --ytmus-genre-primary-salmon: @mauve !important; - --ytmus-genre-primary-orange: @maroon !important; - --ytmus-genre-primary-sky: @sky !important; - --ytmus-genre-primary-sky-inverse: @sky !important; - - --yt-spec-badge-chip-background: @surface1 !important; - --ytcp-focus-inverse: @accent-color !important; - --ytcp-focus: @accent-color !important; - --ytcp-selected-item: @accent-color !important; - --ytcp-hover-item: @overlay2 !important; - --ytcp-chip-active-focus: @accent-color !important; - --ytcp-playhead: @overlay2 !important; - --ytcp-playhead-inverse: @overlay2 !important; - } - - ytcp-button.destructive.ytls-error-dialog { - color: @base !important; - } - - yt-formatted-string.ytls-error-dialog, - tp-yt-iron-icon.ytls-error-dialog { - color: @text !important; - } - } -} - -@-moz-document domain('m.youtube.com') { - html[darker-dark-theme] { - #catppuccin(@darkFlavor, @accentColor); - } - html { - #catppuccin(@lightFlavor, @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]; - - background-color: @base !important; - color: @text !important; - - /* Ambient mode */ - #cinematics { - mix-blend-mode: lighten; - } - - .mobile-topbar-header[data-mode="watch"], - ytm-mobile-topbar-renderer:not([ambient-topbar]) { - background: @base; - } - - .mobile-topbar-header[data-mode="watch"] .mobile-topbar-logo, - .mobile-topbar-header[data-mode="watch"] .mobile-topbar-title, - .mobile-topbar-header[data-mode="watch"] .mobile-topbar-header-content { - color: @text; - } - - .yt-spec-bottom-sheet-layout__bottom-sheet-renderer-container, - .modern-styling { - background: @surface0; - } - - .yt-spec-bottom-sheet-layout__bottom-sheet-layout-header-wrapper { - border-bottom-color: @surface0; - } - - .yt-spec-bottom-sheet-layout__bottom-sheet-content { - color: @text; - } - - /* Comment box */ - .engagement-panel-container { - background: @mantle; - } - - /* Bottom bar */ - ytm-pivot-bar-renderer { - background: @mantle; - color: @text; - border-top-color: @surface0; - } - - /* Chips */ - .chip-bar { - background-color: @base; - } - - [chip-style*="STYLE_"] { - .chip-container { - color: @text; - background-color: @surface0; - } - - &.selected .chip-container { - color: @crust; - background-color: @accent-color; - } - } - - /* Buttons */ - - .yt-spec-touch-feedback-shape--touch-response { - .yt-spec-touch-feedback-shape__fill { - background-color: @text; - } - - .yt-spec-touch-feedback-shape__stroke { - border-color: @surface1; - } - } - - .yt-spec-touch-feedback-shape--overlay-touch-response-inverse - .yt-spec-touch-feedback-shape__fill { - background-color: @accent-color; - } - .yt-spec-touch-feedback-shape--overlay-touch-response - .yt-spec-touch-feedback-shape__fill { - background-color: @text; - } - } -} - -/* 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; @text_filter: brightness(0) saturate(100%) invert(31%) sepia(12%) saturate(1015%) hue-rotate(196deg) brightness(94%) contrast(91%); @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; @text_filter: brightness(0) saturate(100%) invert(80%) sepia(11%) saturate(726%) hue-rotate(192deg) brightness(104%) contrast(92%); @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; @text_filter: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1385%) hue-rotate(192deg) brightness(101%) contrast(92%); @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; @text_filter: brightness(0) saturate(100%) invert(87%) sepia(6%) saturate(985%) hue-rotate(191deg) brightness(96%) contrast(99%); @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 +==/UserStyle== */ \ No newline at end of file diff --git a/styles/youtube/catppuccin.user.less b/styles/youtube/catppuccin.user.less new file mode 100644 index 0000000000..3be7cedec2 --- /dev/null +++ b/styles/youtube/catppuccin.user.less @@ -0,0 +1,1520 @@ +/* ==UserStyle== +@name YouTube Catppuccin +@namespace github.com/catppuccin/userstyles/styles/youtube +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/youtube +@version 2024.12.29.2 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/youtube/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ayoutube +@description Soothing pastel theme for YouTube +@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"] + +@var checkbox logo "Enable YouTube logo" 1 +@var checkbox oled "Enable black bars" 0 +==/UserStyle== */ + +@-moz-document domain("youtube.com") { + :root[dark] { + #catppuccin(@darkFlavor, @accentColor); + } + :root:not([dark]) { + #catppuccin(@lightFlavor, @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]; + @text-filter: @catppuccin[@@lookup][@text_filter]; + + @white: if(@lookup = latte, @base, @text); + @black: if(@lookup = latte, @text, @base); + + color: @text; + background: @base !important; + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + &, + [dark], + [system-icons], + [darker-dark-theme], + &[dark], + &[system-icons], + &[darker-dark-theme] { + --yt-spec-white-1: @text !important; + --yt-spec-white-2: @subtext0 !important; + --yt-spec-white-3: @subtext1 !important; + --yt-spec-white-4: darken(@subtext1, 5%) !important; + --yt-spec-black-1: @overlay1 !important; + --yt-spec-black-2: @overlay0 !important; + --yt-spec-black-3: @surface2 !important; + --yt-spec-black-4: @surface1 !important; + --yt-spec-black-pure: @surface0 !important; + --yt-spec-grey-1: @text !important; + --yt-spec-grey-2: @subtext0 !important; + --yt-spec-grey-3: @subtext1 !important; + --yt-spec-grey-4: @overlay2 !important; + --yt-spec-grey-5: @overlay1 !important; + --yt-brand-youtube-red: @accent-color !important; + --yt-brand-medium-red: @accent-color !important; + --yt-brand-light-red: @accent-color !important; + --yt-spec-red-30: @peach !important; + --yt-spec-red-70: @red !important; + --yt-spec-pale-blue: @sky !important; + --yt-spec-light-blue: @sky !important; + --yt-spec-dark-blue: @sapphire !important; + --yt-spec-navy-blue: @teal !important; + --yt-spec-light-green: @green !important; + --yt-spec-dark-green: @green !important; + --yt-spec-yellow: @peach !important; + --yt-spec-black-pure-alpha-5: @subtext0 !important; + --yt-spec-black-pure-alpha-10: @overlay2 !important; + --yt-spec-black-pure-alpha-15: fadeout(@crust, 15%) !important; + --yt-spec-black-pure-alpha-30: fadeout(@crust, 30%) !important; + --yt-spec-black-pure-alpha-60: fadeout(@crust, 60%) !important; + --yt-spec-black-pure-alpha-80: fadeout(@crust, 80%) !important; + --yt-spec-black-1-alpha-98: fadeout(@crust, 98%) !important; + --yt-spec-black-1-alpha-95: fadeout(@crust, 95%) !important; + --yt-spec-white-1-alpha-10: fadeout(@text, 10%) !important; + --yt-spec-white-1-alpha-20: fadeout(@text, 20%) !important; + --yt-spec-white-1-alpha-25: fadeout(@text, 25%) !important; + --yt-spec-white-1-alpha-30: fadeout(@text, 30%) !important; + --yt-spec-white-1-alpha-70: fadeout(@text, 70%) !important; + --yt-spec-white-1-alpha-95: fadeout(@text, 95%) !important; + --yt-spec-white-1-alpha-98: fadeout(@text, 98%) !important; + --yt-brand-medium-red-alpha-90: fadeout(@accent-color, 90%) !important; + --yt-brand-medium-red-alpha-30: fadeout(@accent-color, 30%) !important; + --yt-brand-light-red-alpha-30: fadeout(@accent-color, 30%) !important; + --yt-spec-light-blue-alpha-30: fadeout(@sapphire, 30%) !important; + --yt-spec-dark-blue-alpha-30: fadeout(@sapphire, 30%) !important; + + --yt-spec-base-background: @base !important; + --yt-spec-raised-background: @base !important; + --yt-spec-menu-background: @mantle !important; + --yt-spec-inverted-background: @text !important; + --yt-spec-additive-background: fadeout(@surface1, 10%) !important; + --yt-spec-outline: @surface0 !important; + --yt-spec-shadow: fadeout(@crust, 25%) !important; + --yt-spec-text-primary: @text !important; + --yt-spec-text-secondary: @subtext0 !important; + --yt-spec-text-disabled: @subtext1 !important; + --yt-spec-text-primary-inverse: @crust !important; + --yt-spec-call-to-action: @accent-color !important; + --yt-spec-call-to-action-inverse: @accent-color !important; + --yt-spec-suggested-action: fadeout(@accent-color, 80%) !important; + --yt-spec-suggested-action-inverse: @text !important; + --yt-spec-icon-active-other: @text !important; + --yt-spec-button-chip-background-hover: @surface1 !important; + --yt-spec-touch-response: @surface0 !important; + + --yt-spec-touch-response-inverse: @accent-color !important; + --yt-spec-brand-icon-active: @accent-color !important; + --yt-spec-brand-button-background: @accent-color !important; + --yt-spec-brand-link-text: @sapphire !important; + --yt-spec-wordmark-text: @text !important; + --yt-spec-error-indicator: @red !important; + --yt-spec-themed-blue: @accent-color !important; + --yt-spec-themed-green: @green !important; + --yt-spec-ad-indicator: @teal !important; + --yt-spec-themed-overlay-background: fadeout(@crust, 80%) !important; + --yt-spec-commerce-badge-background: @green !important; + --yt-spec-static-brand-red: @accent-color !important; + --yt-spec-static-brand-white: @text !important; + --yt-spec-static-brand-black: @base !important; + --yt-spec-static-clear-color: fadeout(@crust, 0%) !important; + --yt-spec-static-clear-black: fadeout(@crust, 0%) !important; + --yt-spec-static-ad-yellow: @peach !important; + --yt-spec-static-grey: @subtext0 !important; + --yt-spec-static-overlay-background-solid: @crust !important; + --yt-spec-static-overlay-background-heavy: @crust; + --yt-spec-static-overlay-background-medium: fade(@crust, 50%) !important; + --yt-spec-static-overlay-background-medium-light: fadeout( + @crust, + 30% + ) !important; + --yt-spec-static-overlay-background-light: fadeout( + @crust, + 10% + ) !important; + --yt-spec-static-overlay-text-primary: @text !important; + --yt-spec-static-overlay-text-secondary: fadeout( + @subtext0, + 70% + ) !important; + --yt-spec-static-overlay-text-disabled: fadeout( + @subtext0, + 30% + ) !important; + --yt-spec-static-overlay-call-to-action: @accent-color !important; + --yt-spec-static-overlay-icon-active-other: @crust !important; + --yt-spec-static-overlay-icon-inactive: @surface1 !important; + --yt-spec-static-overlay-icon-disabled: @surface2 !important; + --yt-spec-static-overlay-button-primary: @accent-color !important; + --yt-spec-static-overlay-button-secondary: @surface0 !important; + --yt-spec-static-overlay-touch-response: @overlay1 !important; + --yt-spec-static-overlay-touch-response-inverse: @surface1 !important; + --yt-spec-static-overlay-background-brand: @accent-color !important; + --yt-spec-assistive-feed-themed-gradient-1: @subtext0 !important; + --yt-spec-assistive-feed-themed-gradient-2: @lavender !important; + --yt-spec-assistive-feed-themed-gradient-3: @red !important; + --yt-spec-brand-background-solid: @base !important; + --yt-spec-brand-background-primary: @base !important; + --yt-spec-brand-background-secondary: @mantle !important; + --yt-spec-general-background-a: @base !important; + --yt-spec-general-background-b: @base !important; + --yt-spec-general-background-c: @crust !important; + --yt-spec-error-background: @base !important; + --yt-spec-10-percent-layer: @surface1 !important; + --yt-spec-snackbar-background: @mantle !important; + --yt-spec-snackbar-background-updated: @mantle !important; + --yt-spec-badge-chip-background: if( + @lookup = latte, + @crust, + @surface0 + ) !important; + --yt-spec-verified-badge-background: @overlay0 !important; + --yt-spec-call-to-action-fadeoutd: fadeout(@sapphire, 30%) !important; + --yt-spec-call-to-action-hover: @accent-color !important; + --yt-spec-brand-button-background-hover: @accent-color !important; + --yt-spec-brand-link-text-fadeoutd: fadeout( + @accent-color, + 30% + ) !important; + --yt-spec-filled-button-focus-outline: @surface0 !important; + --yt-spec-static-overlay-button-hover: @surface1 !important; + --yt-spec-mono-filled-hover: @surface1 !important; + --yt-spec-commerce-filled-hover: @accent-color !important; + --yt-spec-mono-tonal-hover: @surface1 !important; + --yt-spec-commerce-tonal-hover: @surface2 !important; + --yt-spec-static-overlay-filled-hover: @overlay1 !important; + --yt-spec-static-overlay-tonal-hover: @surface1 !important; + --yt-spec-paper-tab-ink: fadeout(@text, 30%); + --yt-spec-filled-button-text: @text !important; + --yt-spec-selected-nav-text: @text !important; + --iron-icon-fill-color: @text !important; + + /* Search bar */ + --ytd-searchbox-border-color: @surface0 !important; + --ytd-searchbox-legacy-border-color: @surface0 !important; + --ytd-searchbox-legacy-border-shadow-color: fadeout( + @crust, + 0% + ) !important; + --ytd-searchbox-legacy-button-color: @mantle !important; + --ytd-searchbox-legacy-button-border-color: @surface0 !important; + --ytd-searchbox-legacy-button-focus-color: @accent-color !important; + --ytd-searchbox-legacy-button-hover-color: @mantle !important; + --ytd-searchbox-legacy-button-hover-border-color: @surface0 !important; + --ytd-searchbox-legacy-button-icon-color: @accent-color !important; + --ytd-searchbox-background: @base !important; + --ytd-searchbox-text-color: @text !important; + + /* System icons */ + --yt-spec-icon-inactive: @text !important; + --yt-spec-icon-disabled: @overlay1 !important; + --yt-spec-brand-icon-inactive: @overlay2 !important; + + /* Yt video Page */ + --yt-live-chat-background-color: @base !important; + --yt-live-chat-action-panel-background-color: @base !important; + --yt-live-chat-secondary-background-color: @surface1; + --yt-live-chat-toast-background-color: @surface2 !important; + --yt-live-chat-mode-change-background-color: @base !important; + --yt-live-chat-secondary-text-color: @subtext0 !important; + --yt-live-chat-tertiary-text-color: fadeout(@text, 54%) !important; + --yt-live-chat-text-input-field-inactive-underline-color: @subtext0 + !important; + --yt-live-chat-text-input-field-placeholder-color: @subtext0 !important; + --yt-live-chat-enabled-send-button-color: @text !important; + --yt-live-chat-disabled-icon-button-color: @subtext1 !important; + --yt-live-chat-picker-button-hover-color: @accent-color !important; + --yt-live-chat-mention-background-color: @accent-color !important; + --yt-live-chat-mention-text-color: @text !important; + --yt-live-chat-deleted-message-color: @subtext0; + --yt-live-chat-deleted-message-bar-color: @subtext1 !important; + --yt-live-chat-reconnect-message-color: @text !important; + --yt-live-chat-disabled-button-background-color: @overlay0 !important; + --yt-live-chat-sub-panel-background-color: @base !important; + --yt-live-chat-sub-panel-background-color-transparent: @mantle !important; + --yt-live-chat-moderator-color: @lavender !important; + --yt-live-chat-owner-color: @peach !important; + --yt-live-chat-message-highlight-background-color: @base !important; + --yt-live-chat-sponsor-color: @green !important; + --yt-live-chat-overlay-color: fadeout(@mantle, 50%); + --yt-live-chat-dialog-background-color: @base !important; + --yt-emoji-picker-variant-selector-bg-color: @base !important; + --yt-live-chat-moderation-mode-hover-background-color: fadeout( + @mantle, + 30% + ) !important; + --yt-grey: @subtext0 !important; + --yt-live-chat-text-input-field-suggestion-background-color: @subtext0 + !important; + --yt-live-chat-text-input-field-suggestion-background-color-hover: @subtext1 + !important; + --yt-emoji-picker-search-background-color: @surface0 !important; + --yt-emoji-picker-search-color: @text !important; + --yt-emoji-picker-search-placeholder-color: @accent-color !important; + --yt-live-chat-slider-active-color: @accent-color !important; + --yt-live-chat-slider-container-color: @surface0 !important; + --yt-live-chat-slider-markers-color: @text !important; + --yt-live-chat-banner-gradient-scrim: linear-gradient( + @mantle, + transparent + ) !important; + --yt-live-chat-action-panel-gradient-scrim: linear-gradient( + to top, + @mantle, + transparent + ) !important; + --yt-live-chat-automod-button-background-color-hover: fadeout( + @crust, + 50% + ) !important; + --yt-live-chat-automod-button-explanation-color: fadeout( + @accent-color, + 70% + ) !important; + --yt-live-chat-shimmer-background-color: fadeout(@crust, 40%) !important; + --yt-live-chat-shimmer-linear-gradient: linear-gradient( + 0deg, + fadeout(@text, 0.1) 40%, + fadeout(@base, 0.3) 50%, + fadeout(@text, 0.1) 60% + ) !important; + --yt-live-chat-vem-background-color: @mantle !important; + --yt-live-chat-product-picker-icon-color: fadeout(@text, 50%) !important; + --yt-live-chat-product-picker-hover-color: @overlay0 !important; + --yt-live-chat-product-picker-disabled-icon-color: fadeout( + @text, + 30% + ) !important; + --yt-live-chat-action-panel-background-color-transparent: (null) + !important; + + --paper-tooltip-background: @overlay0 !important; + --paper-tooltip-text-color: @text !important; + + /* Links */ + --yt-endpoint-color: @accent-color !important; + --yt-endpoint-visited-color: @accent-color !important; + --yt-endpoint-hover-color: @accent-color !important; + + --sb-dark-red-outline: @accent-color !important; + --sb-main-bg-color: @base !important; + --sb-main-fg-color: @text !important; + --sb-grey-bg-color: @base !important; + --sb-grey-fg-color: @subtext0 !important; + --sb-red-bg-color: @accent-color !important; + } + + &:not(.style-scope) { + --primary-text-color: @text !important; + --primary-background-color: @base !important; + --secondary-text-color: @subtext0 !important; + --disabled-text-color: @subtext1 !important; + --divider-color: @overlay0 !important; + --error-color: @red !important; + --primary-color: @accent-color !important; + --light-primary-color: @accent-color !important; + --dark-primary-color: @blue !important; + --accent-color: @accent-color !important; + --light-accent-color: @accent-color !important; + --dark-accent-color: @accent-color !important; + --light-theme-background-color: @base !important; + --light-theme-base-color: @text !important; + --light-theme-text-color: @text !important; + --light-theme-secondary-color: @subtext0 !important; + --light-theme-disabled-color: @subtext1 !important; + --light-theme-divider-color: @overlay0 !important; + --dark-theme-background-color: @base !important; + --dark-theme-base-color: @text !important; + --dark-theme-text-color: @text !important; + --dark-theme-secondary-color: @subtext0 !important; + --dark-theme-disabled-color: @subtext1 !important; + --dark-theme-divider-color: @overlay0 !important; + } + + /* Misc */ + + & when (@logo = 0) { + ytd-topbar-logo-renderer, + svg.ytd-consent-bump-v2-lightbox { + display: none; + } + } + + #channel-name.ytd-video-meta-block { + --yt-endpoint-color: @accent-color !important; + --yt-endpoint-visited-color: @accent-color !important; + color: @accent-color !important; + } + + .yt-page-navigation-progress { + background: @accent-color !important; + } + + /* Selected chapter */ + ytd-macro-markers-list-item-renderer { + --ytd-macro-markers-list-item-background-color: @surface0 !important; + --ytd-macro-markers-list-item-title-color: @text !important; + --ytd-macro-markers-list-item-secondary-color: @subtext1 !important; + --ytd-macro-markers-list-item-timestamp-background-color: @surface1 + !important; + } + + ytd-playlist-panel-video-renderer { + --yt-lightsource-section2-color: @surface1 !important; + --yt-lightsource-section4-color: @surface2 !important; + --yt-lightsource-primary-title-color: @text !important; + --yt-lightsource-secondary-title-color: @text !important; + --yt-active-playlist-panel-background-color: @surface0 !important; + } + + ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] + .header.ytd-playlist-panel-renderer { + --iron-icon-fill-color: @text !important; + background-color: @base !important; + } + + #container.ytd-masthead { + --iron-icon-fill-color: @text !important; + } + + #background.ytd-masthead { + --yt-frosted-glass-desktop: @base !important; + } + + ytd-feed-filter-chip-bar-renderer[expand-instead-of-scroll] + #chips-wrapper.ytd-feed-filter-chip-bar-renderer { + --iron-icon-fill-color: @text !important; + background-color: @base !important; + } + + #ytd-player #container when (@oled = 0) { + background: @crust !important; + } + + .ytp-progress-list when not(@lookup = latte) { + background: fade(@surface0, 80%); + } + .ytp-load-progress when not(@lookup = latte) { + background: fade(@overlay0, 100%); + } + + ytd-expandable-metadata-renderer { + --yt-lightsource-section1-color: @base !important; + --yt-lightsource-section2-color: @surface0 !important; + --yt-lightsource-section3-color: @surface1 !important; + --yt-lightsource-section4-color: @surface2 !important; + --yt-lightsource-primary-title-color: @text !important; + --yt-lightsource-secondary-title-color: @subtext0 !important; + } + + yt-live-chat-renderer { + --yt-button-default-text-color: @text !important; + --yt-button-default-background-color: @base !important; + --yt-button-dark-text-color: @base !important; + --yt-button-dark-background-color: @accent-color !important; + --yt-button-payment-background-color: @accent-color !important; + } + + yt-icon-button.yt-live-chat-item-list-renderer { + background-color: @accent-color; + color: @crust; + + &:hover { + background-color: darken(@accent-color, 5%); + } + } + + ytd-author-comment-badge-renderer:not( + [style*="--ytd-author-comment-badge-icon-background-color: transparent;"] + ) { + --yt-basic-background-color: @surface0 !important; + --yt-basic-foreground-title-color: @surface0 !important; + --ytd-author-comment-badge-background-color: @surface0 !important; + --ytd-author-comment-badge-name-color: @text !important; + --ytd-author-comment-badge-icon-color: @text !important; + } + + /* Skeleton */ + #guide-skeleton, + #home-container-skeleton, + #home-chips { + background-color: @base; + z-index: -1; + } + + #guide-skeleton .guide-ghost-icon, + #guide-skeleton .guide-ghost-text, + .masthead-skeleton-icon, + #home-page-skeleton .skeleton-bg-color, + .watch-skeleton .skeleton-bg-color { + background-color: @surface1; + } + + /* Ambient mode */ + #cinematics, + #cinematic-container { + mix-blend-mode: lighten; + } + + .ytp-settings-button.ytp-hd-quality-badge::after, + .ytp-settings-button.ytp-hdr-quality-badge::after, + .ytp-settings-button.ytp-4k-quality-badge::after, + .ytp-settings-button.ytp-5k-quality-badge::after, + .ytp-settings-button.ytp-8k-quality-badge::after, + .ytp-settings-button.ytp-3d-badge-grey::after, + .ytp-settings-button.ytp-3d-badge::after { + background-color: @accent-color; + } + + /* Icons */ + + [fill="red"], + [fill="#F00"], + [fill="#FF0000"], + [fill="#f03"], + [fill="#FF0033"] { + fill: @accent-color !important; + } + + [fill="white"] { + fill: if(@lookup = latte, @base, @text) !important; + } + + /* verification badge */ + [src*="https://www.gstatic.com/images/icons/material/system/1x/check_circle_grey600_36dp.png"] { + filter: @text-filter; + } + + yt-icon.ytd-logo [fill="white"] { + fill: @crust !important; + } + + .yt-spec-icon-shape { + [fill="#FAFAFA"], + [fill="#000"], + [fill="#fff"], + [fill="#FFF"], + [fill="#FFFFFF"] { + fill: @crust !important; + } + } + + .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon, + .yt-spec-icon-badge-shape { + color: @text; + } + + .yt-spec-icon-badge-shape--type-notification + .yt-spec-icon-badge-shape__badge { + background-color: @accent-color !important; + color: @surface0 !important; + } + + /* Buttons */ + + .yt-spec-button-shape-next--mono { + &.yt-spec-button-shape-next--tonal { + color: @text; + background-color: @surface0; + + [fill="rgb(3,3,3)"], + [fill="rgb(0,0,0)"], + [fill="rgb(255,255,255)"] { + fill: @text !important; + } + + [stroke="rgb(0,0,0)"], + [stroke="rgb(255,255,255)"] { + stroke: @text !important; + } + + /* Accent for filled-in thumbs up (like button) */ + [animated-icon-type="LIKE"] { + g path[fill] { + fill: @accent-color !important; + + + [stroke] { + stroke: @accent-color !important; + } + } + } + + &:hover { + background-color: @surface1; + } + } + + &.yt-spec-button-shape-next--outline { + color: @text; + border-color: @surface2; + + &:hover { + background-color: @surface2; + } + } + + &.yt-spec-button-shape-next--text { + color: @text; + + /* Accent for filled-in thumbs up (like button) */ + path[d="M3,11h3v10H3V11z M18.77,11h-4.23l1.52-4.94C16.38,5.03,15.54,4,14.38,4c-0.58,0-1.14,0.24-1.52,0.65L7,11v10h10.43 c1.06,0,1.98-0.67,2.19-1.61l1.34-6C21.23,12.15,20.18,11,18.77,11z"] { + fill: @accent-color; + } + + &:hover { + background-color: @surface1; + } + } + + &.yt-spec-button-shape-next--filled { + color: @crust; + background-color: @accent-color; + + &:hover { + background-color: darken(@accent-color, 5%); + } + } + } + + .yt-spec-button-shape-next--disabled { + background-color: fade(@overlay0, 50%); + color: @subtext0; + } + + .yt-spec-button-shape-next--overlay { + &.yt-spec-button-shape-next--tonal { + color: @text; + background-color: @surface0; + &:hover { + background-color: @surface1; + } + } + &.yt-spec-button-shape-next--text { + color: @text; + } + + &.yt-spec-button-shape-next--filled { + color: @crust; + background-color: @accent-color; + } + + &.yt-spec-button-shape-next--outline { + color: @text; + border-color: @surface1; + &:hover { + background: @surface0; + } + } + } + + .yt-spec-button-shape-next--call-to-action { + &.yt-spec-button-shape-next--outline { + color: @accent-color; + border-color: @surface2; + + &:hover { + background-color: fade(@accent-color, 30%); + color: @accent-color; + } + } + + &.yt-spec-button-shape-next--text { + color: @accent-color; + + &:hover { + background-color: fade(@accent-color, 30%); + } + } + + &.yt-spec-button-shape-next--filled { + color: @crust; + background-color: @accent-color; + + &:hover { + background-color: lighten(@accent-color, 5%); + } + } + } + + .yt-spec-button-shape-next--disabled.yt-spec-button-shape-next--filled { + color: @subtext0; + background-color: fade(@surface1, 70%); + } + + /* Search box */ + ytd-searchbox[has-focus] #container.ytd-searchbox { + border-color: @accent-color; + } + + .ytSearchboxComponentInputBox, + .ytSearchboxComponentInputBoxDark { + background: var(--ytd-searchbox-background) !important; + color: var(--ytd-searchbox-text-color) !important; + border-color: var(--ytd-searchbox-border-color) !important; + box-shadow: none; + } + + .ytSearchboxComponentInputBoxHasFocus, + .ytSearchboxComponentInputBoxHasFocusDark { + border-color: @accent-color !important; + } + + .ytSuggestionComponentSuggestionHover:hover, + .ytSuggestionComponentSuggestionHoverDark:hover { + background: @surface1 !important; + } + + .ytSearchboxComponentSuggestionsContainer, + .ytSearchboxComponentSuggestionsContainerDark { + background: var(--yt-spec-raised-background) !important; + border-color: var(--yt-spec-raised-background) !important; + } + + .ytSuggestionComponentSuggestion, + .ytSuggestionComponentSuggestionDark { + color: var(--ytd-searchbox-text-color) !important; + } + + .ytSearchboxComponentSearchButton, + .ytSearchboxComponentSearchButtonDark { + color: var(--ytd-searchbox-text-color) !important; + background: @surface0 !important; + border-color: var(--ytd-searchbox-border-color) !important; + } + + .ytSearchboxComponentClearButtonIcon, + .ytSearchboxComponentClearButtonIconDark { + color: var(--ytd-searchbox-text-color) !important; + } + + .ytSearchboxComponentReportButton, + .ytSearchboxComponentReportButtonDark, + .ytSuggestionComponentRemoveLink, + .ytSuggestionComponentRemoveLinkDark { + color: @subtext0 !important; + } + + .sbsb_a { + background: @surface0; + } + .sbdd_b { + border-color: var(--yt-spec-raised-background); + background-color: var(--yt-spec-raised-background); + } + .sbpqs_a, + .gsfs { + color: var(--yt-spec-text-primary); + } + .sbsb_i { + color: var(--yt-spec-call-to-action); + } + .sbsb_d { + background-color: var(--yt-spec-additive-background); + } + .sbdd_c { + visibility: hidden; + } + + /* "Suggestion removed" */ + .sbpqs_c { + color: @overlay1; + } + + .sbpqs_a::before, + .sbqs_c::before { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + background: none; + } + + /* Video description */ + + #description { + [style*="color: rgb(255, 255, 255);"], + [style*="color: rgb(19, 19, 19);"] { + color: @text !important; + } + } + + .yt-core-attributed-string__link--call-to-action-color { + color: @accent-color; + } + + .YtwCourseProgressViewModelHostProgressTitle, + .YtwCourseProgressViewModelHostProgressSubtitle { + color: @text; + } + + .YtwCourseProgressViewModelHostProgressBar { + background-color: fade(@white, 20%); + + .YtwCourseProgressViewModelHostProgressBarFill { + background-color: @text; + } + } + + .ytwHowThisWasMadeSectionViewModelSectionTitle, + .ytwHowThisWasMadeSectionViewModelBodyHeader { + color: @text; + } + + .ytwHowThisWasMadeSectionViewModelBodyText { + color: @subtext0; + } + + /* Thumbnails */ + + #time-status:has([aria-label="LIVE"]), + .badge[aria-label="LIVE"], + .badge[aria-label="PREMIERE"], + .badge-shape-wiz--live.badge-shape-wiz--overlay, + .badge-shape-wiz--thumbnail-live { + background: @accent-color; + color: @crust; + } + #thumbnail [style="background-color: rgba(51, 51, 51, 0.8);"], + .YtInlinePlayerControlsTopRightControlsCircleButton, + .badge-shape-wiz--default.badge-shape-wiz--overlay, + .branding-context-container-inner { + background-color: @surface0 !important; + color: @text; + } + .ytp-sb-unsubscribe { + background-color: @surface2; + color: @text; + } + .ytp-sb-subscribe { + background-color: @accent-color; + color: @crust; + } + ytd-thumbnail-overlay-resume-playback-renderer { + background-color: @surface1; + } + .badge-shape-wiz--thumbnail-default { + color: @text; + background: fade(@crust, 80%); + } + + /* Panels, popups, tooltips */ + + .ytp-tooltip-text { + background: fade(@surface0, 90%) !important; + color: @text; + text-shadow: none !important; + } + + .ytp-popup { + background: fade(@surface0, 90%) !important; + text-shadow: none; + } + + .ytp-panel-menu, + .ytp-panel-header, + .ytp-panel-footer, + .ytp-menuitem-label, + .ytp-premium-label, + .ytp-menuitem-content, + .ytp-menuitem-label-count, + .ytp-menu-label-secondary, + .ytd-menu-title-renderer { + color: @text; + } + + .ytp-panel-header { + border-bottom-color: @surface2; + } + + .ytp-panel-footer-content-link { + color: @accent-color; + } + + .ytp-panel-back-button { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .ytp-menuitem-toggle-checkbox { + background-color: @surface2; + + &::after { + background-color: @subtext0; + } + } + .ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox { + background: @accent-color; + } + + .ytp-menuitem { + &:not([aria-disabled="true"]):hover { + background-color: @surface1; + } + + svg > path:not([fill="none"]) { + fill: @text !important; + } + + &[aria-haspopup="true"] .ytp-menuitem-content { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + &[role="menuitemradio"][aria-checked="true"] .ytp-menuitem-label { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } + + /* Video player */ + + .ytp-cards-button { + .ytp-cards-button-icon { + use { + fill: @black; + } + path { + fill: @white; + } + } + } + .ytp-cards-teaser { + .ytp-cards-teaser-box { + background-color: @surface2; + border-bottom-color: @surface2; + } + .ytp-cards-teaser-text { + color: @text; + } + } + + .html5-video-player { + color: @white; + + .ytp-swatch-background-color, + .ytp-play-progress { + background: @accent-color !important; + } + + .ytp-svg-fill, + [fill="#fff"] { + fill: @white !important; + } + + .ytp-volume-slider-handle { + &, + &::before { + background-color: @white; + } + &::after { + background-color: fade(@white, 20%); + } + } + + .ytp-time-current, + .ytp-time-separator, + .ytp-time-duration { + color: @white; + } + + .ytp-live-badge { + &[disabled]::before { + background: @accent-color; + } + &::before { + background: @overlay0; + } + } + + /* youtube live ring */ + .yt-spec-avatar-shape__badge-text { + color: @crust; + } + .yt-spec-avatar-shape--live-ring { + border-color: @accent-color; + } + .yt-spec-avatar-shape__live-badge { + background-color: @accent-color; + } + + .ytp-button, + .ytp-subtitles-button { + &[aria-pressed]::after { + background-color: @accent-color; + } + } + + /* stats for nerds */ + .ytp-sfn { + background: fade(@base, 80%); + color: @text; + } + + .ytp-autonav-toggle-button { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); + + &::after { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); + } + + &[aria-checked="true"] { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); + + &::after { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); + } + } + } + } + + /* Video highlight */ + ytd-rich-item-renderer.ytd-rich-item-renderer-highlight { + background-color: fade(@accent-color, 10%) !important; + box-shadow: fade(@accent-color, 10%) 0 0 0 10px !important; + } + + #shorts-container { + --yt-spec-static-overlay-text-primary: @white; + .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal { + color: @white; + } + + .YtwFactoidRendererLabel { + color: @subtext0; + } + .YtwFactoidRendererValue { + color: @text; + } + + ytd-reel-video-renderer:not([is-watch-while-mode]) { + .yt-spec-button-shape-with-label__label { + color: @subtext1; + } + } + ytd-reel-video-renderer[is-watch-while-mode] + .yt-spec-button-shape-with-label__label { + color: @white; + } + + .yt-spec-button-shape-next--overlay-dark.yt-spec-button-shape-next--tonal, + .YtdDesktopShortsVolumeControlsBackgroundScrim { + background-color: fade(@black, 60%); + color: @white; + } + + .YtProgressBarLineProgressBarPlayed, + .YtProgressBarPlayheadProgressBarPlayheadDot { + background-color: @accent-color !important; + } + + .yt-spec-button-shape-next--overlay-dark.yt-spec-button-shape-next--filled { + background-color: @accent-color; + color: @crust; + } + + .YtdDesktopShortsVolumeControlsMuteIcon { + color: @white !important; + } + + /* Buy super thanks button */ + .YtdShortsSuggestedActionStaticHostContainer { + background-color: fade(@black, 60%); + + .YtdShortsSuggestedActionStaticHostLeadingIcon, + .YtdShortsSuggestedActionStaticHostPrimaryText { + color: @text; + } + } + } + + /* Shorts titles and views on homepage */ + .shortsLockupViewModelHostOutsideMetadataEndpoint { + color: @text; + } + .shortsLockupViewModelHostOutsideMetadataSubhead { + color: @subtext0; + } + + /* Buy super thanks bar */ + #progressContainer.tp-yt-paper-progress { + background-color: @mantle !important; + } + + #comment-chip-container.yt-pdg-comment-chip-renderer, + .slider-knob-inner.tp-yt-paper-slider { + background: @accent-color !important; + } + + #primaryProgress.tp-yt-paper-progress { + background: linear-gradient(139deg, @peach, @maroon, @red, @pink); + } + + #container.ytd-pdg-comment-preview-renderer { + background-color: @mantle !important; + } + + #comment-chip-price.yt-pdg-comment-chip-renderer, + yt-icon.yt-pdg-comment-chip-renderer { + color: @crust; + } + + /* Channel pages */ + .yt-tab-shape-wiz__tab { + color: @subtext1; + } + .yt-tab-shape-wiz__tab--tab-selected { + color: @text; + } + .yt-tab-group-shape-wiz__slider { + background-color: @text; + } + .yt-tab-shape-wiz:hover .yt-tab-shape-wiz__tab-bar { + background-color: @subtext1; + } + .truncated-text-wiz, + .page-header-view-model-wiz__page-header-content-metadata { + color: @subtext1; + } + .page-header-view-model-wiz__page-header-title, + [style="color: rgb(255, 255, 255);"]:has(svg), + .truncated-text-wiz__absolute-button { + color: @text !important; + } + .yt-contextual-sheet-layout-wiz { + background-color: @mantle; + + .yt-list-item-view-model-wiz__container--tappable:hover { + background-color: @surface0; + } + + .yt-list-item-view-model-wiz__title, + .yt-list-item-view-model-wiz__accessory, + .radio-shape-wiz__label-container { + color: @text; + } + } + + /* channel details */ + .profile-badge-view-model-wiz__badge-description { + color: @text !important; + } + + .profile-badge-view-model-wiz__badge-subtitle { + color: @subtext0 !important; + } + + .yt-profile-identity-info-view-model-wiz__divider { + border-color: @surface0 !important; + } + + /* Profiles */ + .yt-profile-card-view-model-wiz { + background-color: @mantle; + } + .yt-profile-identity-info-view-model-wiz__channel-name, + .yt-profile-info-view-model-wiz__section-title, + .yt-comment-interaction-view-model-wiz__video-title, + .yt-shared-subscription-view-model-wiz__channel-name { + color: @text; + } + .yt-profile-identity-info-view-model-wiz__badge, + .yt-profile-identity-info-view-model-wiz__metadata-handle, + .yt-profile-identity-info-view-model-wiz__metadata-content, + .yt-profile-info-view-model-wiz__section-subtitle, + .yt-comment-interaction-view-model-wiz__comment-content { + color: @subtext0; + } + + /* Horizontal list arrows */ + .arrow.yt-horizontal-list-renderer { + background: @surface0; + } + + /* Live chat replay */ + .ytVideoMetadataCarouselViewModelHost, + .YtVideoMetadataCarouselViewModelHost { + background-color: @surface0; + + .ytCarouselTitleViewModelTitle, + .YtCarouselTitleViewModelTitle, + .yt-core-attributed-string, + .yt-icon-shape { + color: @text; + } + } + + /* AI-generated video summary */ + .video-summary-content-view-model-wiz__paragraph { + color: @text; + } + } +} + +@-moz-document url-prefix("https://studio.youtube.com") { + :root[dark] { + #catppuccin(@darkFlavor, @accentColor); + } + :root { + #catppuccin(@lightFlavor, @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; + } + } + + [src="https://www.gstatic.com/youtube/img/creator/yt_studio_logo_white.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + &, + html, + html[dark], + html[dark][dark], + &[dark], + &[light], + [light], + html[light], + html[light][light] { + --yt-spec-black-pure-alpha-80: (null) !important; + --yt-spec-black-pure-alpha-60: (null) !important; + --yt-spec-black-1-alpha-98: (null) !important; + --yt-spec-black-1-alpha-95: (null) !important; + --iron-icon-fill-color: unset !important; + + --yt-spec-text-primary: @text !important; + --ytcp-text-primary: @text !important; + --ytcp-text-primary-inverse: @base !important; + --ytcp-static-overlay-text-primary-inverse: @base !important; + --ytcp-wordmark-text: @text !important; + --ytcp-text-secondary: @subtext0 !important; + --ytcp-text-disabled: @subtext1 !important; + --ytcp-overlay-text-primary: @overlay2 !important; + + --ytcp-general-background-a: @base !important; + --yt-spec-base-background: @base !important; + --yt-spec-black-3: @base !important; + + --yt-spec-brand-background-solid: @mantle !important; + --ytcp-brand-background-solid: @mantle !important; + --yt-spec-raised-background: @mantle !important; + --ytcp-general-background-b: @mantle !important; + --ytcp-analytics-reach-background: @mantle !important; + --yt-spec-black-2: @mantle !important; + + --ytcp-general-background-c: @crust !important; + --ytcp-menu-background: @surface0 !important; + + --ytcp-container-border-color: @surface0 !important; + --ytcp-container-hovered-border-color: @surface0 !important; + --ytcp-line-divider-solid: @surface0 !important; + --ytcp-container-border-color-inverse: @subtext0 !important; + --ytcp-line-divider-solid-inverse: @subtext0 !important; + + --ytcp-call-to-action: @accent-color !important; + --ytcp-call-to-action-inverse: @mantle !important; + --ytcp-call-to-action-raised-background: @accent-color !important; + --yt-spec-brand-button-background: @accent-color !important; + --ytcp-call-to-action-raised-disabled: @surface2 !important; + --ytcp-call-to-action-raised-disabled-background: @overlay2 !important; + --ytcp-call-to-action-raised-background-inverse: @base !important; + --ytcp-call-to-action-raised-disabled-inverse: @surface2 !important; + --ytcp-call-to-action-raised-disabled-background-inverse: @overlay2 + !important; + + --yt-spec-brand-background-primary: @surface0 !important; + + --yt-compact-link-icon-color: @overlay2 !important; + --ytcp-icon-active: @accent-color !important; + --ytcp-icon-inactive: @overlay2 !important; + --ytcp-icon-disabled: @overlay0 !important; + --ytcp-icon-active-inverse: @overlay1 !important; + --ytcp-icon-disabled-inverse: @subtext1 !important; + + --ytcp-error-red: @red !important; + --ytcp-badge-red: @red !important; + --ytcp-error-red-inverse: @red !important; + --ytcp-themed-red-inverse: @red !important; + --ytcp-themed-red: @accent-color !important; + --ytcp-themed-blue: @accent-color !important; + --ytcp-badge-blue: fade(@accent-color, 30%); + --ytcp-badge-blue-solid: @blue !important; + --ytcp-themed-blue-inverse: @blue !important; + --ytcp-themed-green: @green !important; + --ytmus-genre-primary-melon: @green !important; + --ytcp-themed-green-inverse: @green !important; + --ytcp-analytics-pine: @green !important; + --ytcp-analytics-pine-inverse: @green !important; + --ytcp-analytics-parrot: @green !important; + --ytcp-themed-yellow: @peach !important; + --ytmus-genre-primary-gold: @peach !important; + --ytcp-yellow-inverse: @peach !important; + --ytcp-badge-yellow: @peach !important; + --ytcp-analytics-yellow: @peach !important; + --ytcp-analytics-apricot: @peach !important; + --ytcp-suggested-action: @teal !important; + --ytcp-analytics-overview: @teal !important; + --ytcp-analytics-revenue: @teal !important; + --ytcp-analytics-default-secondary: @teal !important; + --ytcp-analytics-royal-blue: @lavender !important; + --ytcp-analytics-reach: @lavender !important; + --ytcp-analytics-audience: @lavender !important; + --ytcp-analytics-engagement: @pink !important; + --ytcp-analytics-revenue-secondary: @pink !important; + --ytcp-analytics-bubblegum: @flamingo !important; + --ytmus-genre-primary-ruby: @flamingo !important; + --ytmus-genre-primary-salmon: @mauve !important; + --ytmus-genre-primary-orange: @maroon !important; + --ytmus-genre-primary-sky: @sky !important; + --ytmus-genre-primary-sky-inverse: @sky !important; + + --yt-spec-badge-chip-background: @surface1 !important; + --ytcp-focus-inverse: @accent-color !important; + --ytcp-focus: @accent-color !important; + --ytcp-selected-item: @accent-color !important; + --ytcp-hover-item: @overlay2 !important; + --ytcp-chip-active-focus: @accent-color !important; + --ytcp-playhead: @overlay2 !important; + --ytcp-playhead-inverse: @overlay2 !important; + } + + ytcp-button.destructive.ytls-error-dialog { + color: @base !important; + } + + yt-formatted-string.ytls-error-dialog, + tp-yt-iron-icon.ytls-error-dialog { + color: @text !important; + } + } +} + +@-moz-document domain("m.youtube.com") { + html[darker-dark-theme] { + #catppuccin(@darkFlavor, @accentColor); + } + html { + #catppuccin(@lightFlavor, @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]; + + background-color: @base !important; + color: @text !important; + + /* Ambient mode */ + #cinematics { + mix-blend-mode: lighten; + } + + .mobile-topbar-header[data-mode="watch"], + ytm-mobile-topbar-renderer:not([ambient-topbar]) { + background: @base; + } + + .mobile-topbar-header[data-mode="watch"] .mobile-topbar-logo, + .mobile-topbar-header[data-mode="watch"] .mobile-topbar-title, + .mobile-topbar-header[data-mode="watch"] .mobile-topbar-header-content { + color: @text; + } + + .yt-spec-bottom-sheet-layout__bottom-sheet-renderer-container, + .modern-styling { + background: @surface0; + } + + .yt-spec-bottom-sheet-layout__bottom-sheet-layout-header-wrapper { + border-bottom-color: @surface0; + } + + .yt-spec-bottom-sheet-layout__bottom-sheet-content { + color: @text; + } + + /* Comment box */ + .engagement-panel-container { + background: @mantle; + } + + /* Bottom bar */ + ytm-pivot-bar-renderer { + background: @mantle; + color: @text; + border-top-color: @surface0; + } + + /* Chips */ + .chip-bar { + background-color: @base; + } + + [chip-style*="STYLE_"] { + .chip-container { + color: @text; + background-color: @surface0; + } + + &.selected .chip-container { + color: @crust; + background-color: @accent-color; + } + } + + /* Buttons */ + + .yt-spec-touch-feedback-shape--touch-response { + .yt-spec-touch-feedback-shape__fill { + background-color: @text; + } + + .yt-spec-touch-feedback-shape__stroke { + border-color: @surface1; + } + } + + .yt-spec-touch-feedback-shape--overlay-touch-response-inverse + .yt-spec-touch-feedback-shape__fill { + background-color: @accent-color; + } + .yt-spec-touch-feedback-shape--overlay-touch-response + .yt-spec-touch-feedback-shape__fill { + background-color: @text; + } + } +} + +/* deno-fmt-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; @text_filter: brightness(0) saturate(100%) invert(31%) sepia(12%) saturate(1015%) hue-rotate(196deg) brightness(94%) contrast(91%); @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; @text_filter: brightness(0) saturate(100%) invert(80%) sepia(11%) saturate(726%) hue-rotate(192deg) brightness(104%) contrast(92%); @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; @text_filter: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1385%) hue-rotate(192deg) brightness(101%) contrast(92%); @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; @text_filter: brightness(0) saturate(100%) invert(87%) sepia(6%) saturate(985%) hue-rotate(191deg) brightness(96%) contrast(99%); @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +}; diff --git a/template/catppuccin.user.css b/template/catppuccin.user.less similarity index 95% rename from template/catppuccin.user.css rename to template/catppuccin.user.less index 5e56a70f3f..26472fd619 100644 --- a/template/catppuccin.user.css +++ b/template/catppuccin.user.less @@ -3,7 +3,7 @@ @namespace github.com/catppuccin/userstyles/styles/ @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ @version 2000.01.01 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles//catppuccin.user.css +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles//catppuccin.user.less @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3A @description Soothing pastel theme for @author Catppuccin @@ -15,7 +15,7 @@ @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('') { +@-moz-document domain("") { /* This section applies the light/dark themes automatically based on the user's system theme. Use the below example CSS to start if the website you are theming doesn't have a light/dark mode toggle. For an actual example of this, see https://github.com/catppuccin/userstyles/blob/39288b593278e5efa48007d5fc001292cf910672/styles/brave-search/catppuccin.user.css#L16-L29. @@ -92,24 +92,22 @@ background-color: @base; /* If you need to specify an overwrite specific to a flavor - * (e.g. only when the flavor is set to latte), you can use a `when` guard clause. */ + * (e.g. only when the flavor is set to latte), you can use a `when` guard clause. */ & when (@lookup = latte) { /* ... */ } /* You can also negate the statement above by using - * a `when not` guard clause. */ - & when not (@lookup = latte) { + * a `when not` guard clause. */ + & when not(@lookup = latte) { /* ... */ } } } -/* prettier-ignore */ +/* deno-fmt-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 +};