From 95703ab92bb9930ba43627c6765c59a256bc7639 Mon Sep 17 00:00:00 2001 From: Isabel Date: Sat, 18 Nov 2023 04:20:43 +0000 Subject: [PATCH] fix(treewide): enforce `catppuccin/userstyles` code standards (#323) * fix(gmail): stylelint suggestions * fix(whatsapp-web): stylelint suggestions * fix(invidious): stylelint suggestions * bump(invidious): version number * fix(gmail): use `::` instead of `:` for pseudo elements * fix(formative): follow stylelint suggestions * fix(quizlet): follow stylelint suggestions * ci: adjust stylelint config * fix(quizlet): follow more stylelint suggestions * fix(paste.rs): follow stylelint suggestions * fix(nixos-search): namespace * fix(nitter): follow stylelint suggestions * ci(lint): add `deno task lint:fix` * style: run `stylelint --fix` * fix(lastfm): remove duplicate selectors * fix(formative): remove duplicate selectors * fix(deepl): remove duplicate classes * ci(lint): introduce rules against animations & fonts * fix(libreddit): remove unnecessary `&` * ci(lint): disallow boder/outline, add message * ci(lint): disallow atRules * treewide: replace `border` in favour of `border-color` * treewide: reject all font alterations * treewide: `remove outline: none` * style: some more `border` -> `border-color` * ci(lint): `keyframes` needs to stay * fix(nixos-search): enforce userstyles standards * fix(nitter): remove redundant `&` * style(treewide): collapse definitions * fix(chess): piece urls * style: mixin classes -> ids * style: reformat with prettier * chore(treewide): add/fix metadata * fix(lastfm): syntax error * fix(lastfm): remove opionation * fix(lastfm): remove duplicate classes * ci(lint): allow animation/transition properties * fix(lastfm): more small things * fix(treewide): function typos * fix(aoc): unknown unit * fix: more genral forgotten fixes * fix(brave-search): remove redundant `&` * style(planetmc): unpack lookup * fix: remove redundant code * chore: add `vim:ft=less` to all files * chore: remove template comment * fix(anilist): reduce redundant code * ci(lint): allow `no-invalid-position-at-import-rule` * fix(twitch): lint warnings * fix(youtube): `declaration-block-no-duplicate-custom-properties` * fix: get rid of redundant `& {}` selectors * fix(anilist): remove redundant `@rgb-raw` * fix(hoppscotch): `declaration-block-no-duplicate-custom-properties` * fix(yt): remove duplicate code * fix(anilist): remove duplicate code * fix(lastfm): animation name * fix(bstats): remove redundant code * fix(yt): remove redundant code * fix(ichi.moe): `no-duplicate-selectors` * fix(pinterest): use `border-color` instead of `border` * fix(planetmc): `no-duplicate-selectors` * fix(yt): remove over used `::selection` * fix: use `border-color: transparent` instead of `border: none` * fix(searxng): remove stylus-style conditional * fix(invidious): style missing color while i'm at it * ci(lint): add chalk ansi styling * style(treewide): enable & fix `length-zero-no-unit` * ci(lint): prettyprint logger * fix(yt): fold & don't format lookup * fix(mastodon): prevent reggressions * refactor: `not when` -> `when not` * fix(yt): correct `chips` reggression * fix(yt): `border-color` reggression * fix(yt): prevent more reggessions * refactor(chess): use mixin for piece url * style: collapsed definition cleanup --------- Co-authored-by: winston --- src/deno.json | 4 + src/deno.lock | 6 + src/lint/logger.ts | 61 ++ src/lint/main.ts | 58 +- src/lint/stylelint.ts | 41 +- styles/advent-of-code/catppuccin.user.css | 122 +-- styles/anilist/catppuccin.user.css | 831 +++++++------------- styles/boringproxy/catppuccin.user.css | 139 +--- styles/brave-search/catppuccin.user.css | 360 +++------ styles/bstats/catppuccin.user.css | 183 +---- styles/canvas-lms/catppuccin.user.css | 124 +-- styles/chatgpt/catppuccin.user.css | 128 +-- styles/chatreplay/catppuccin.user.css | 241 ++---- styles/chess.com/catppuccin.user.css | 273 ++----- styles/cinny/catppuccin.user.css | 2 +- styles/codeberg/catppuccin.user.css | 123 +-- styles/crowdin/catppuccin.user.css | 124 +-- styles/deepl/catppuccin.user.css | 135 +--- styles/ecosia/catppuccin.user.css | 123 +-- styles/elk/catppuccin.user.css | 170 +--- styles/formative/catppuccin.user.css | 161 +--- styles/github/catppuccin.user.css | 186 +---- styles/gmail/catppuccin.user.css | 132 +--- styles/hacker-news/catppuccin.user.css | 120 +-- styles/homepage/catppuccin.user.css | 121 +-- styles/hoppscotch/catppuccin.user.css | 189 +---- styles/ichi.moe/catppuccin.user.css | 180 +---- styles/instagram/catppuccin.user.css | 133 +--- styles/invidious/catppuccin.user.css | 22 +- styles/invokeai/catppuccin.user.css | 124 +-- styles/lastfm/catppuccin.user.css | 356 +++------ styles/libreddit/catppuccin.user.css | 148 +--- styles/linkedin/catppuccin.user.css | 120 +-- styles/mastodon/catppuccin.user.css | 139 +--- styles/modrinth/catppuccin.user.css | 178 +---- styles/nitter/catppuccin.user.css | 200 +---- styles/nixos-search/catppuccin.user.css | 154 +--- styles/nixos.wiki/catppuccin.user.css | 11 +- styles/paste.rs/catppuccin.user.css | 132 +--- styles/pinterest/catppuccin.user.css | 35 +- styles/planet-minecraft/catppuccin.user.css | 415 ++++------ styles/proton/catppuccin.user.css | 142 +--- styles/quizlet/catppuccin.user.css | 316 ++------ styles/reddit/catppuccin.user.css | 122 +-- styles/searxng/catppuccin.user.css | 308 +++----- styles/startpage/catppuccin.user.css | 135 +--- styles/stylus/catppuccin.user.css | 122 +-- styles/substack/catppuccin.user.css | 11 +- styles/syncthing/catppuccin.user.css | 125 +-- styles/tutanota/catppuccin.user.css | 120 +-- styles/twitch/catppuccin.user.css | 131 +-- styles/vercel/catppuccin.user.css | 120 +-- styles/whatsapp-web/catppuccin.user.css | 141 +--- styles/wikiwand/catppuccin.user.css | 191 +---- styles/youtube/catppuccin.user.css | 202 +---- template/catppuccin.user.css | 6 +- 56 files changed, 1839 insertions(+), 6857 deletions(-) create mode 100644 src/lint/logger.ts diff --git a/src/deno.json b/src/deno.json index a6bc4a7c0b..10541ee341 100644 --- a/src/deno.json +++ b/src/deno.json @@ -2,17 +2,21 @@ "imports": { "@/": "./", "std/": "https://deno.land/std@0.206.0/", + "catppuccin-repo/": "https://raw.githubusercontent.com/catppuccin/catppuccin/91d6b5433730103c504dcf43583b594e418ee7c1/", "globber": "https://deno.land/x/globber@0.1.0/mod.ts", + "@actions/core": "npm:@actions/core@1.10.1", "@octokit/rest": "npm:@octokit/rest@20.0.2", "usercss-meta": "npm:usercss-meta@0.12.0", "ajv": "npm:ajv@8.12.0", + "chalk": "npm:chalk@5.3.0", "less": "npm:less@4.2.0" }, "tasks": { "generate": "./generate/main.ts", "lint": "./lint/main.ts", + "lint:fix": "./lint/main.ts --fix", "sync-maintainers": "./sync-maintainers/main.ts", "update-types": "deno run -A 'npm:json-schema-to-typescript' ./userstyles.schema.json types/userstyles.d.ts" } diff --git a/src/deno.lock b/src/deno.lock index 34b327ce23..562f9e39c8 100644 --- a/src/deno.lock +++ b/src/deno.lock @@ -7,6 +7,7 @@ "npm:@octokit/rest@20.0.2": "npm:@octokit/rest@20.0.2_@octokit+core@5.0.1", "npm:@types/less": "npm:@types/less@3.0.6", "npm:ajv@8.12.0": "npm:ajv@8.12.0", + "npm:chalk@5.3.0": "npm:chalk@5.3.0", "npm:less": "npm:less@4.2.0", "npm:less@4.2.0": "npm:less@4.2.0", "npm:postcss-less": "npm:postcss-less@6.0.0_postcss@8.4.31", @@ -290,6 +291,10 @@ "supports-color": "supports-color@5.5.0" } }, + "chalk@5.3.0": { + "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==", + "dependencies": {} + }, "color-convert@1.9.3": { "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", "dependencies": { @@ -1338,6 +1343,7 @@ "https://deno.land/std@0.206.0/collections/unzip.ts": "3d3469c616b04200ff6a883e0d6dc82cac4c205aa65742e375afb8816be75b35", "https://deno.land/std@0.206.0/collections/without_all.ts": "1e3cccb1ed0659455b473c0766d9414b7710d8cef48862c899f445178f66b779", "https://deno.land/std@0.206.0/collections/zip.ts": "d5def5cf3a0a3fa167956b7eb2ebdc3aca63a41f7ebdfac8c0d1c44fa0dd588d", + "https://deno.land/std@0.206.0/flags/mod.ts": "0948466fc437f017f00c0b972a422b3dc3317a790bcf326429d23182977eaf9f", "https://deno.land/std@0.206.0/fmt/colors.ts": "c51c4642678eb690dcf5ffee5918b675bf01a33fba82acf303701ae1a4f8c8d9", "https://deno.land/std@0.206.0/path/_common/assert_path.ts": "061e4d093d4ba5aebceb2c4da3318bfe3289e868570e9d3a8e327d91c2958946", "https://deno.land/std@0.206.0/path/_common/basename.ts": "0d978ff818f339cd3b1d09dc914881f4d15617432ae519c1b8fdc09ff8d3789a", diff --git a/src/lint/logger.ts b/src/lint/logger.ts new file mode 100644 index 0000000000..7900659347 --- /dev/null +++ b/src/lint/logger.ts @@ -0,0 +1,61 @@ +import chalk from "chalk"; +import core from "@actions/core"; + +export type LoggerProps = core.AnnotationProperties & { + content?: string; +}; + +const pretty_print = ( + message: string, + props: LoggerProps, + severity: "error" | "warning" = "warning", +) => { + const startLine = props.startLine ?? 0; + const lines = (props.content ?? "").split("\n"); + + const error = [ + chalk[severity === "error" ? "red" : "yellow"](severity), + message, + ].join(" "); + + const line = lines[startLine - 1].split("").map((char, i) => { + const startCol = (props.startColumn ?? 0) - 1; + const endCol = (props.endColumn ?? Infinity) - 1; + + if (i >= startCol && i <= endCol) { + return chalk[severity === "error" ? "red" : "yellow"](char); + } else { + return char; + } + }).join(""); + + console.log( + [ + `${props.file}:${chalk.grey(`${props.startLine}:${props.startColumn}`)}`, + ` ┃${chalk.dim(lines[startLine - 2])}`, + ` ┃${chalk.grey(line)}`, + ` ┃${chalk.dim(lines[startLine])}`, + error, + undefined, + ].join("\n"), + ); +}; + +export const log = ( + message: string, + props: LoggerProps, + severity: "error" | "warning" = "warning", +) => { + if (Deno.env.has("CI")) { + switch (severity) { + case "error": + core.error(message, props); + break; + case "warning": + core.warning(message, props); + break; + } + } else { + pretty_print(message, props, severity); + } +}; diff --git a/src/lint/main.ts b/src/lint/main.ts index e701bb8423..2eae00f801 100755 --- a/src/lint/main.ts +++ b/src/lint/main.ts @@ -3,15 +3,20 @@ // TODO: remove this once types for usercss-meta are available // deno-lint-ignore-file no-explicit-any +import { parse as parseFlags } from "std/flags/mod.ts"; import { basename, dirname, join, relative } from "std/path/mod.ts"; import { globber } from "globber"; import core from "@actions/core"; +import chalk from "chalk"; // @deno-types="npm:@types/less"; import less from "less"; import usercssMeta from "usercss-meta"; import { lint } from "./stylelint.ts"; import { REPO_ROOT } from "@/deps.ts"; +import { log, LoggerProps } from "./logger.ts"; + +const flags = parseFlags(Deno.args, { boolean: ["fix"] }); const iterator = globber({ include: ["styles/**/catppuccin.user.css"], @@ -42,7 +47,7 @@ for await (const entry of iterator) { try { metadata = usercssMeta.parse(content).metadata; } catch (err) { - core.error(err, { file: entry.relative }); + log(err, { file: entry.relative, content }, "error"); } const assert = assertions(repo); @@ -52,10 +57,23 @@ for await (const entry of iterator) { if (defacto !== v) { const line = content.split("\n").findIndex((line) => line.includes(k)) + 1; - core.warning(`Metadata \`${k}\` should be ${v} but is \`${defacto}\``, { - file: entry.relative, - startLine: line !== 0 ? line : undefined, - }); + + log( + [ + "Metadata", + chalk.bold(k), + "should be", + chalk.green(v), + "but is", + chalk.red(defacto), + ].join(" "), + { + file: entry.relative, + startLine: line !== 0 ? line : undefined, + content, + }, + "warning", + ); } }); @@ -70,26 +88,40 @@ for await (const entry of iterator) { less.render(content, { lint: true, globalVars }).then().catch( (err: any) => { - core.error(err.message, { - file: entry.relative, - startLine: err.line, - endLine: err.line, - }); + log( + err.message, + { + file: entry.relative, + startLine: err.line, + endLine: err.line, + content, + }, + "error", + ); }, ); - lint(content).then(({ results }) => { + lint(entry.absolute, flags.fix).then(({ results }) => { results.sort( (a, b) => (a.source ?? "").localeCompare(b.source ?? ""), ).map((result) => { result.warnings.map((warning) => { - core.warning(warning.text ?? "unspecified", { + const msg = warning.text?.replace( + new RegExp(`\\(?${warning.rule}\\)?`), + chalk.dim(`(${warning.rule})`), + ) ?? + "unspecified stylelint error"; + + const props = { file: entry.relative, startLine: warning.line, endLine: warning.endLine, startColumn: warning.column, endColumn: warning.endColumn, - }); + content, + } satisfies LoggerProps; + + log(msg, props, warning.severity); }); }); }); diff --git a/src/lint/stylelint.ts b/src/lint/stylelint.ts index e51db42487..3a01fd2a3e 100644 --- a/src/lint/stylelint.ts +++ b/src/lint/stylelint.ts @@ -22,14 +22,44 @@ const config: stylelint.Config = { "alpha-value-notation": null, "color-function-notation": null, "hue-degree-notation": null, - "length-zero-no-unit": null, + + // less doesn't care about these + "no-invalid-position-at-import-rule": null, + "no-invalid-double-slash-comments": null, + + "at-rule-disallowed-list": [[ + "/^font.*/", + ], { + message: (atRule: string) => + `At-rule ${atRule} is not allowed in Catppuccin userstyles`, + }], + "property-disallowed-list": [[ + // disallow setting fonts + "/font.*/", + + // ideally we could disallow these, but CSS continues to be gross + // "/animation.*/", + // "/transition.*/", + + // prefer `border-color` over `border`, `outline-color` over `outline`, etc. + "border", + "outline", + ], { + message: (prop: string) => { + if (["border", "outline"].includes(prop)) { + return `Use \`${prop}-color\` instead of \`${prop}\``; + } else { + return `Property \`${prop}\` is not allowed in Catppuccin userstyles`; + } + }, + }], "function-no-unknown": [ true, { - // generated from https://lesscss.org/functions/ - // via `Array.from(document.querySelectorAll('.section-content h3.docs-heading'), heading => heading.textContent.replace('\n', ''))` ignoreFunctions: [ + // generated from https://lesscss.org/functions/ + // via `Array.from(document.querySelectorAll('.section-content h3.docs-heading'), heading => heading.textContent.replace('\n', ''))` "%", "abs", "acos", @@ -132,8 +162,9 @@ const base = deepMerge( { ...stylelintConfigStandard, extends: {} }, ); -export const lint = (code: string) => +export const lint = (files: string, fix: boolean) => stylelint.lint({ config: deepMerge(base, config), - code, + files, + fix, }); diff --git a/styles/advent-of-code/catppuccin.user.css b/styles/advent-of-code/catppuccin.user.css index d8f263f252..90ece4b06a 100644 --- a/styles/advent-of-code/catppuccin.user.css +++ b/styles/advent-of-code/catppuccin.user.css @@ -12,120 +12,13 @@ @var select flavor "Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] ==/UserStyle== */ @-moz-document domain("adventofcode.com") { + /* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } #catppuccin(@flavor); @@ -309,7 +202,7 @@ .day-success { color: @yellow; - text-shadow: 0 0 5x @yellow; + text-shadow: 0 0 5px @yellow; } input[type="text"], @@ -322,3 +215,4 @@ } } } +// vim:ft=less diff --git a/styles/anilist/catppuccin.user.css b/styles/anilist/catppuccin.user.css index f0c6de6fa3..ff918fab1e 100644 --- a/styles/anilist/catppuccin.user.css +++ b/styles/anilist/catppuccin.user.css @@ -22,125 +22,6 @@ #catppuccin(@darkFlavor, @accentColor); } - @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; - }; - }; - - #rgbify(@color) { - @rgb-raw: red(@color) green(@color) blue(@color); - } - #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @flamingo: @catppuccin[@@lookup][@flamingo]; @@ -170,17 +51,9 @@ @crust: @catppuccin[@@lookup][@crust]; @accent: @catppuccin[@@lookup][@@accentColor]; @contrast-color: @catppuccin[@@lookup][@@contrastColor]; - /* raw rgb needs to be defined for some reason */ - @rgb-raw: @red; - - /* rgbify function converts a less color variable to raw rgb in @rgb-raw */ - #rgbify(@color) { - @rgb-raw: red(@color), green(@color), blue(@color); - } & when (@lookup =latte) { - --color-blue-dim: #rgbify(desaturate(lighten(@accent, 10%), 10%)) [ - @rgb-raw]; + --color-blue-dim: #rgbify(desaturate(lighten(@accent, 10%), 10%)) []; .nav[data-v-62eacfff], .solid[data-v-62eacfff], .transparent[data-v-62eacfff]:hover { @@ -189,135 +62,132 @@ } } - & when not (@lookup =latte) { - --color-blue-dim: #rgbify(desaturate(darken(@accent, 10%), 10%)) [ - @rgb-raw]; - } - /* BASE VARIABLES */ - & { - --color-background: #rgbify(@crust) [ @rgb-raw]; - --color-foreground: #rgbify(@base) [ @rgb-raw]; - --color-foreground-grey: #rgbify(@surface0) [ @rgb-raw]; - --color-foreground-grey-dark: #rgbify(@surface0) [ @rgb-raw]; - --color-foreground-blue: #rgbify(@mantle) [ @rgb-raw]; - --color-foreground-blue-dark: #rgbify(@mantle) [ @rgb-raw]; - --color-background-blue-dark: #rgbify(@subtext1) [ @rgb-raw]; - --color-overlay: #rgbify(@crust) [ @rgb-raw]; - --color-shadow: #rgbify(@mantle) [ @rgb-raw]; - --color-shadow-dark: #rgbify(@crust) [ @rgb-raw]; - --color-shadow-blue: #rgbify(@blue) [ @rgb-raw]; - --color-text: #rgbify(@text) [ @rgb-raw]; - --color-text-light: #rgbify(@subtext1) [ @rgb-raw]; - --color-text-lighter: #rgbify(@subtext0) [ @rgb-raw]; - --color-text-bright: #rgbify(@text) [ @rgb-raw]; - --color-blue: #rgbify(@accent) [ @rgb-raw]; - --color-white: 255, 255, 255; - --color-black: 0, 0, 0; - --color-red: #rgbify(@contrast-color) [ @rgb-raw]; - --color-peach: #rgbify(@maroon) [ @rgb-raw]; - --color-orange: #rgbify(@peach) [ @rgb-raw]; - --color-yellow: #rgbify(@yellow) [ @rgb-raw]; - --color-green: #rgbify(@green) [ @rgb-raw]; - --color-background-1200: #rgbify(@text) [ @rgb-raw]; - --color-background-1100: #rgbify(@text) [ @rgb-raw]; - --color-background-1000: #rgbify(@text) [ @rgb-raw]; - --color-background-900: #rgbify(@subtext1) [ @rgb-raw]; - --color-background-800: #rgbify(@subtext0) [ @rgb-raw]; - --color-background-700: #rgbify(@surface1) [ @rgb-raw]; - --color-background-600: #rgbify(@surface0) [ @rgb-raw]; - --color-background-500: #rgbify(@surface0) [ @rgb-raw]; - --color-background-400: #rgbify(@surface0) [ @rgb-raw]; - --color-background-300: #rgbify(@base) [ @rgb-raw]; - --color-background-200: #rgbify(@mantle) [ @rgb-raw]; - --color-background-100: #rgbify(@crust) [ @rgb-raw]; - --color-gray-1200: #rgbify(@text) [ @rgb-raw]; - --color-gray-1100: #rgbify(@text) [ @rgb-raw]; - --color-gray-1000: #rgbify(@text) [ @rgb-raw]; - --color-gray-900: #rgbify(@text) [ @rgb-raw]; - --color-gray-800: #rgbify(@overlay2) [ @rgb-raw]; - --color-gray-700: #rgbify(@overlay1) [ @rgb-raw]; - --color-gray-600: #rgbify(@overlay0) [ @rgb-raw]; - --color-gray-500: #rgbify(@surface2) [ @rgb-raw]; - --color-gray-400: #rgbify(@surface1) [ @rgb-raw]; - --color-gray-300: #rgbify(@surface0) [ @rgb-raw]; - --color-gray-200: #rgbify(@mantle) [ @rgb-raw]; - --color-gray-100: #rgbify(@crust) [ @rgb-raw]; - --color-blue-100: #rgbify(@text) [ @rgb-raw]; - --color-blue-200: #rgbify(@text) [ @rgb-raw]; - --color-blue-300: #rgbify(@text) [ @rgb-raw]; - --color-blue-400: #rgbify(@sapphire) [ @rgb-raw]; - --color-blue-500: #rgbify(@sapphire) [ @rgb-raw]; - --color-blue-600: #rgbify(@blue) [ @rgb-raw]; - --color-blue-700: #rgbify(@blue) [ @rgb-raw]; - --color-blue-800: #rgbify(@blue) [ @rgb-raw]; - --color-blue-900: #rgbify(@blue) [ @rgb-raw]; - --color-blue-1000: #rgbify(@blue) [ @rgb-raw]; - --color-green-100: #rgbify(@teal) [ @rgb-raw]; - --color-green-200: #rgbify(@green) [ @rgb-raw]; - --color-green-300: #rgbify(@green) [ @rgb-raw]; - --color-green-400: #rgbify(@green) [ @rgb-raw]; - --color-green-500: #rgbify(@green) [ @rgb-raw]; - --color-green-600: #rgbify(@green) [ @rgb-raw]; - --color-green-700: #rgbify(@green) [ @rgb-raw]; - --color-green-800: #rgbify(@green) [ @rgb-raw]; - --color-red-100: #rgbify(@text) [ @rgb-raw]; - --color-red-200: #rgbify(@flamingo) [ @rgb-raw]; - --color-red-300: #rgbify(@maroon) [ @rgb-raw]; - --color-red-400: #rgbify(@red) [ @rgb-raw]; - --color-red-500: #rgbify(@red) [ @rgb-raw]; - --color-red-600: #rgbify(@red) [ @rgb-raw]; - --color-red-700: #rgbify(@red) [ @rgb-raw]; - } + --color-background: #rgbify(@crust) []; + --color-foreground: #rgbify(@base) []; + --color-foreground-grey: #rgbify(@surface0) []; + --color-foreground-grey-dark: #rgbify(@surface0) []; + --color-foreground-blue: #rgbify(@mantle) []; + --color-foreground-blue-dark: #rgbify(@mantle) []; + --color-background-blue-dark: #rgbify(@subtext1) []; + --color-overlay: #rgbify(@crust) []; + --color-shadow: #rgbify(@mantle) []; + --color-shadow-dark: #rgbify(@crust) []; + --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-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) []; + /* DARK THEME SPECIFIC TWEAKS */ & when not (@lookup =latte) { - --color-background: #rgbify(@crust) [ @rgb-raw]; - --color-foreground: #rgbify(@base) [ @rgb-raw]; - --color-foreground-grey: #rgbify(@surface0) [ @rgb-raw]; - --color-foreground-grey-dark: #rgbify(@surface0) [ @rgb-raw]; - --color-foreground-blue: #rgbify(@mantle) [ @rgb-raw]; - --color-foreground-blue-dark: #rgbify(@mantle) [ @rgb-raw]; - --color-text: #rgbify(@text) [ @rgb-raw]; - --color-text-light: #rgbify(@subtext0) [ @rgb-raw]; - --color-text-lighter: #rgbify(@subtext1) [ @rgb-raw]; - --color-shadow-blue: #rgbify(@crust) [ @rgb-raw]; - --color-background-1200: #rgbify(@text) [ @rgb-raw]; - --color-background-1100: #rgbify(@text) [ @rgb-raw]; - --color-background-1000: #rgbify(@text) [ @rgb-raw]; - --color-background-900: #rgbify(@subtext1) [ @rgb-raw]; - --color-background-800: #rgbify(@subtext0) [ @rgb-raw]; - --color-background-700: #rgbify(@surface1) [ @rgb-raw]; - --color-background-600: #rgbify(@surface0) [ @rgb-raw]; - --color-background-500: #rgbify(@surface0) [ @rgb-raw]; - --color-background-400: #rgbify(@surface0) [ @rgb-raw]; - --color-background-300: #rgbify(@base) [ @rgb-raw]; - --color-background-200: #rgbify(@mantle) [ @rgb-raw]; - --color-background-100: #rgbify(@crust) [ @rgb-raw]; - --color-gray-1200: #rgbify(@text) [ @rgb-raw]; - --color-gray-1100: #rgbify(@text) [ @rgb-raw]; - --color-gray-1000: #rgbify(@text) [ @rgb-raw]; - --color-gray-900: #rgbify(@text) [ @rgb-raw]; - --color-gray-800: #rgbify(@overlay2) [ @rgb-raw]; - --color-gray-700: #rgbify(@overlay1) [ @rgb-raw]; - --color-gray-600: #rgbify(@overlay0) [ @rgb-raw]; - --color-gray-500: #rgbify(@surface2) [ @rgb-raw]; - --color-gray-400: #rgbify(@surface1) [ @rgb-raw]; - --color-gray-300: #rgbify(@surface0) [ @rgb-raw]; - --color-gray-200: #rgbify(@mantle) [ @rgb-raw]; - --color-gray-100: #rgbify(@crust) [ @rgb-raw]; + --color-background: #rgbify(@crust) []; + --color-foreground: #rgbify(@base) []; + --color-foreground-grey: #rgbify(@surface0) []; + --color-foreground-grey-dark: #rgbify(@surface0) []; + --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-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, 10%), 10%)) [ + ]; } /* DARK THEME NAV BAR */ .nav-unscoped when not (@lookup =latte) { background-color: @mantle !important; } - /*-----------------PROFILE FIXES-----------------*/ + /* -----------------PROFILE FIXES----------------- */ #profileColor(@color) { - --color-blue: #rgbify(@color) [ @rgb-raw]; + --color-blue: #rgbify(@color) []; & when (@lookup =latte) { - --color-blue-dim: #rgbify(lighten(@color, 10%)) [ @rgb-raw]; + --color-blue-dim: #rgbify(lighten(@color, 10%)) []; } & when not (@lookup =latte) { - --color-blue-dim: #rgbify(darken(@color, 10%)) [ @rgb-raw]; + --color-blue-dim: #rgbify(darken(@color, 10%)) []; } .progress .bar { background: linear-gradient(270deg, darken(@color, 10%), @color); @@ -345,7 +215,7 @@ #profileColor(@overlay1); } - /*--------------Tags----------------*/ + /* --------------Tags---------------- */ .tag { background: @accent !important; color: @base !important; @@ -354,18 +224,18 @@ color: @base !important; } - /*----Tracking Status List Stuff----*/ + /* ----Tracking Status List Stuff---- */ .list[data-v-5776f768], - .el-icon-arrow-down:before { + .el-icon-arrow-down::before { color: @mantle !important; } .el-dropdown-menu, - .el-dropdown-menu__item--divided:before, + .el-dropdown-menu__item--divided::before, .el-select-dropdown { background-color: @base !important; } .el-dropdown-menu { - border: 4px @text !important; + border-color: @text !important; } .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover { @@ -379,19 +249,19 @@ background-color: @mantle; } - /*---------SCORE TWEAKS--------------*/ + /* ---------SCORE TWEAKS-------------- */ .score[data-v-5ca094da] { color: @base; } - /*--------------FOOTER (It's hardcoded idk why anilist dumdum)----------*/ + /* --------------FOOTER (It's hardcoded idk why anilist dumdum)---------- */ .footer[data-v-0f519cab] { background: @crust; color: @subtext0; } - /*------------------MISC EDITS--------------------*/ - /*--Reset button in notifications-----*/ + /* ------------------MISC EDITS-------------------- */ + /* --Reset button in notifications----- */ .reset-btn { color: @base !important; } @@ -399,7 +269,7 @@ .save { color: @base !important; } - /*------------IMAGE COVER------------*/ + /* ------------IMAGE COVER------------ */ .cover .image-text, .plus-progress { color: @text !important; @@ -409,7 +279,7 @@ .medialist.table .entry .edit { color: @base !important; } - /*--------Settings button--------*/ + /* --------Settings button-------- */ .settings[data-v-3deab077] .button { color: @crust; } @@ -418,7 +288,7 @@ background-color: @accent; border-color: @accent; } - .el-checkbox__inner:after { + .el-checkbox__inner::after { border-color: @crust; border-width: 2px; left: 3px; @@ -426,7 +296,7 @@ .el-radio__input.is-checked + .el-radio__label { color: @accent; } - /*--------HIDE SCROLLBAR IN BIO-----*/ + /* --------HIDE SCROLLBAR IN BIO----- */ .section::-webkit-scrollbar { display: none; } @@ -434,16 +304,11 @@ -ms-overflow-style: none; scrollbar-width: none; } - /*--------REMOVE DROPDOWN SHADOWS-----*/ + /* --------REMOVE DROPDOWN SHADOWS----- */ .dropdown.dropdown { box-shadow: none; } - /*---------ANILIST LIKER PLUGIN------*/ - #AnilistLikerPlugin .mmd2 { - font-style: normal !important; - font-weight: 700; - font-family: Overpass; - } + /* ---------ANILIST LIKER PLUGIN------ */ #AnilistLikerPlugin .btntop { margin-bottom: -4px; margin-top: 5px; @@ -462,125 +327,6 @@ #catppuccin(@darkFlavor, @accentColor); } - @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; - }; - }; - - #rgbify(@color) { - @rgb-raw: red(@color) green(@color) blue(@color); - } - #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @flamingo: @catppuccin[@@lookup][@flamingo]; @@ -610,17 +356,9 @@ @crust: @catppuccin[@@lookup][@crust]; @accent: @catppuccin[@@lookup][@@accentColor]; @contrast-color: @catppuccin[@@lookup][@@contrastColor]; - /* raw rgb needs to be defined for some reason */ - @rgb-raw: @red; - - /* rgbify function converts a less color variable to raw rgb in @rgb-raw */ - #rgbify(@color) { - @rgb-raw: red(@color), green(@color), blue(@color); - } & when (@lookup =latte) { - --color-blue-dim: #rgbify(desaturate(lighten(@accent, 10%), 10%)) [ - @rgb-raw]; + --color-blue-dim: #rgbify(desaturate(lighten(@accent, 10%), 10%)) []; .nav[data-v-62eacfff], .solid[data-v-62eacfff], .transparent[data-v-62eacfff]:hover { @@ -629,135 +367,132 @@ } } - & when not (@lookup =latte) { - --color-blue-dim: #rgbify(desaturate(darken(@accent, 10%), 10%)) [ - @rgb-raw]; - } - /* BASE VARIABLES */ - & { - --color-background: #rgbify(@crust) [ @rgb-raw]; - --color-foreground: #rgbify(@base) [ @rgb-raw]; - --color-foreground-grey: #rgbify(@surface0) [ @rgb-raw]; - --color-foreground-grey-dark: #rgbify(@surface0) [ @rgb-raw]; - --color-foreground-blue: #rgbify(@mantle) [ @rgb-raw]; - --color-foreground-blue-dark: #rgbify(@mantle) [ @rgb-raw]; - --color-background-blue-dark: #rgbify(@subtext1) [ @rgb-raw]; - --color-overlay: #rgbify(@crust) [ @rgb-raw]; - --color-shadow: #rgbify(@mantle) [ @rgb-raw]; - --color-shadow-dark: #rgbify(@crust) [ @rgb-raw]; - --color-shadow-blue: #rgbify(@blue) [ @rgb-raw]; - --color-text: #rgbify(@text) [ @rgb-raw]; - --color-text-light: #rgbify(@subtext1) [ @rgb-raw]; - --color-text-lighter: #rgbify(@subtext0) [ @rgb-raw]; - --color-text-bright: #rgbify(@text) [ @rgb-raw]; - --color-blue: #rgbify(@accent) [ @rgb-raw]; - --color-white: 255, 255, 255; - --color-black: 0, 0, 0; - --color-red: #rgbify(@contrast-color) [ @rgb-raw]; - --color-peach: #rgbify(@maroon) [ @rgb-raw]; - --color-orange: #rgbify(@peach) [ @rgb-raw]; - --color-yellow: #rgbify(@yellow) [ @rgb-raw]; - --color-green: #rgbify(@green) [ @rgb-raw]; - --color-background-1200: #rgbify(@text) [ @rgb-raw]; - --color-background-1100: #rgbify(@text) [ @rgb-raw]; - --color-background-1000: #rgbify(@text) [ @rgb-raw]; - --color-background-900: #rgbify(@subtext1) [ @rgb-raw]; - --color-background-800: #rgbify(@subtext0) [ @rgb-raw]; - --color-background-700: #rgbify(@surface1) [ @rgb-raw]; - --color-background-600: #rgbify(@surface0) [ @rgb-raw]; - --color-background-500: #rgbify(@surface0) [ @rgb-raw]; - --color-background-400: #rgbify(@surface0) [ @rgb-raw]; - --color-background-300: #rgbify(@base) [ @rgb-raw]; - --color-background-200: #rgbify(@mantle) [ @rgb-raw]; - --color-background-100: #rgbify(@crust) [ @rgb-raw]; - --color-gray-1200: #rgbify(@text) [ @rgb-raw]; - --color-gray-1100: #rgbify(@text) [ @rgb-raw]; - --color-gray-1000: #rgbify(@text) [ @rgb-raw]; - --color-gray-900: #rgbify(@text) [ @rgb-raw]; - --color-gray-800: #rgbify(@overlay2) [ @rgb-raw]; - --color-gray-700: #rgbify(@overlay1) [ @rgb-raw]; - --color-gray-600: #rgbify(@overlay0) [ @rgb-raw]; - --color-gray-500: #rgbify(@surface2) [ @rgb-raw]; - --color-gray-400: #rgbify(@surface1) [ @rgb-raw]; - --color-gray-300: #rgbify(@surface0) [ @rgb-raw]; - --color-gray-200: #rgbify(@mantle) [ @rgb-raw]; - --color-gray-100: #rgbify(@crust) [ @rgb-raw]; - --color-blue-100: #rgbify(@text) [ @rgb-raw]; - --color-blue-200: #rgbify(@text) [ @rgb-raw]; - --color-blue-300: #rgbify(@text) [ @rgb-raw]; - --color-blue-400: #rgbify(@sapphire) [ @rgb-raw]; - --color-blue-500: #rgbify(@sapphire) [ @rgb-raw]; - --color-blue-600: #rgbify(@blue) [ @rgb-raw]; - --color-blue-700: #rgbify(@blue) [ @rgb-raw]; - --color-blue-800: #rgbify(@blue) [ @rgb-raw]; - --color-blue-900: #rgbify(@blue) [ @rgb-raw]; - --color-blue-1000: #rgbify(@blue) [ @rgb-raw]; - --color-green-100: #rgbify(@teal) [ @rgb-raw]; - --color-green-200: #rgbify(@green) [ @rgb-raw]; - --color-green-300: #rgbify(@green) [ @rgb-raw]; - --color-green-400: #rgbify(@green) [ @rgb-raw]; - --color-green-500: #rgbify(@green) [ @rgb-raw]; - --color-green-600: #rgbify(@green) [ @rgb-raw]; - --color-green-700: #rgbify(@green) [ @rgb-raw]; - --color-green-800: #rgbify(@green) [ @rgb-raw]; - --color-red-100: #rgbify(@text) [ @rgb-raw]; - --color-red-200: #rgbify(@flamingo) [ @rgb-raw]; - --color-red-300: #rgbify(@maroon) [ @rgb-raw]; - --color-red-400: #rgbify(@red) [ @rgb-raw]; - --color-red-500: #rgbify(@red) [ @rgb-raw]; - --color-red-600: #rgbify(@red) [ @rgb-raw]; - --color-red-700: #rgbify(@red) [ @rgb-raw]; - } + --color-background: #rgbify(@crust) []; + --color-foreground: #rgbify(@base) []; + --color-foreground-grey: #rgbify(@surface0) []; + --color-foreground-grey-dark: #rgbify(@surface0) []; + --color-foreground-blue: #rgbify(@mantle) []; + --color-foreground-blue-dark: #rgbify(@mantle) []; + --color-background-blue-dark: #rgbify(@subtext1) []; + --color-overlay: #rgbify(@crust) []; + --color-shadow: #rgbify(@mantle) []; + --color-shadow-dark: #rgbify(@crust) []; + --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-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) []; + /* DARK THEME SPECIFIC TWEAKS */ & when not (@lookup =latte) { - --color-background: #rgbify(@crust) [ @rgb-raw]; - --color-foreground: #rgbify(@base) [ @rgb-raw]; - --color-foreground-grey: #rgbify(@surface0) [ @rgb-raw]; - --color-foreground-grey-dark: #rgbify(@surface0) [ @rgb-raw]; - --color-foreground-blue: #rgbify(@mantle) [ @rgb-raw]; - --color-foreground-blue-dark: #rgbify(@mantle) [ @rgb-raw]; - --color-text: #rgbify(@text) [ @rgb-raw]; - --color-text-light: #rgbify(@subtext0) [ @rgb-raw]; - --color-text-lighter: #rgbify(@subtext1) [ @rgb-raw]; - --color-shadow-blue: #rgbify(@crust) [ @rgb-raw]; - --color-background-1200: #rgbify(@text) [ @rgb-raw]; - --color-background-1100: #rgbify(@text) [ @rgb-raw]; - --color-background-1000: #rgbify(@text) [ @rgb-raw]; - --color-background-900: #rgbify(@subtext1) [ @rgb-raw]; - --color-background-800: #rgbify(@subtext0) [ @rgb-raw]; - --color-background-700: #rgbify(@surface1) [ @rgb-raw]; - --color-background-600: #rgbify(@surface0) [ @rgb-raw]; - --color-background-500: #rgbify(@surface0) [ @rgb-raw]; - --color-background-400: #rgbify(@surface0) [ @rgb-raw]; - --color-background-300: #rgbify(@base) [ @rgb-raw]; - --color-background-200: #rgbify(@mantle) [ @rgb-raw]; - --color-background-100: #rgbify(@crust) [ @rgb-raw]; - --color-gray-1200: #rgbify(@text) [ @rgb-raw]; - --color-gray-1100: #rgbify(@text) [ @rgb-raw]; - --color-gray-1000: #rgbify(@text) [ @rgb-raw]; - --color-gray-900: #rgbify(@text) [ @rgb-raw]; - --color-gray-800: #rgbify(@overlay2) [ @rgb-raw]; - --color-gray-700: #rgbify(@overlay1) [ @rgb-raw]; - --color-gray-600: #rgbify(@overlay0) [ @rgb-raw]; - --color-gray-500: #rgbify(@surface2) [ @rgb-raw]; - --color-gray-400: #rgbify(@surface1) [ @rgb-raw]; - --color-gray-300: #rgbify(@surface0) [ @rgb-raw]; - --color-gray-200: #rgbify(@mantle) [ @rgb-raw]; - --color-gray-100: #rgbify(@crust) [ @rgb-raw]; + --color-background: #rgbify(@crust) []; + --color-foreground: #rgbify(@base) []; + --color-foreground-grey: #rgbify(@surface0) []; + --color-foreground-grey-dark: #rgbify(@surface0) []; + --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-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, 10%), 10%)) []; } + /* DARK THEME NAV BAR */ .nav-unscoped when not (@lookup =latte) { background-color: @mantle !important; } - /*-----------------PROFILE FIXES-----------------*/ + /* -----------------PROFILE FIXES----------------- */ #profileColor(@color) { - --color-blue: #rgbify(@color) [ @rgb-raw]; + --color-blue: #rgbify(@color) []; & when (@lookup =latte) { - --color-blue-dim: #rgbify(lighten(@color, 10%)) [ @rgb-raw]; + --color-blue-dim: #rgbify(lighten(@color, 10%)) []; } & when not (@lookup =latte) { - --color-blue-dim: #rgbify(darken(@color, 10%)) [ @rgb-raw]; + --color-blue-dim: #rgbify(darken(@color, 10%)) []; } .progress .bar { background: linear-gradient(270deg, darken(@color, 10%), @color); @@ -785,7 +520,7 @@ #profileColor(@overlay1); } - /*--------------Tags----------------*/ + /* --------------Tags---------------- */ .tag { background: @accent !important; color: @base !important; @@ -794,18 +529,18 @@ color: @base !important; } - /*----Tracking Status List Stuff----*/ + /* ----Tracking Status List Stuff---- */ .list[data-v-5776f768], - .el-icon-arrow-down:before { + .el-icon-arrow-down::before { color: @mantle !important; } .el-dropdown-menu, - .el-dropdown-menu__item--divided:before, + .el-dropdown-menu__item--divided::before, .el-select-dropdown { background-color: @base !important; } .el-dropdown-menu { - border: 4px @text !important; + border-color: @text !important; } .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover { @@ -819,19 +554,19 @@ background-color: @mantle; } - /*---------SCORE TWEAKS--------------*/ + /* ---------SCORE TWEAKS-------------- */ .score[data-v-5ca094da] { color: @base; } - /*--------------FOOTER (It's hardcoded idk why anilist dumdum)----------*/ + /* --------------FOOTER (It's hardcoded idk why anilist dumdum)---------- */ .footer[data-v-0f519cab] { background: @crust; color: @subtext0; } - /*------------------MISC EDITS--------------------*/ - /*--Reset button in notifications-----*/ + /* ------------------MISC EDITS-------------------- */ + /* --Reset button in notifications----- */ .reset-btn { color: @base !important; } @@ -839,7 +574,7 @@ .save { color: @base !important; } - /*------------IMAGE COVER------------*/ + /* ------------IMAGE COVER------------ */ .cover .image-text, .plus-progress { color: @text !important; @@ -849,7 +584,7 @@ .medialist.table .entry .edit { color: @base !important; } - /*--------Settings button--------*/ + /* --------Settings button-------- */ .settings[data-v-3deab077] .button { color: @crust; } @@ -858,7 +593,7 @@ background-color: @accent; border-color: @accent; } - .el-checkbox__inner:after { + .el-checkbox__inner::after { border-color: @crust; border-width: 2px; left: 3px; @@ -866,7 +601,7 @@ .el-radio__input.is-checked + .el-radio__label { color: @accent; } - /*--------HIDE SCROLLBAR IN BIO-----*/ + /* --------HIDE SCROLLBAR IN BIO----- */ .section::-webkit-scrollbar { display: none; } @@ -874,16 +609,11 @@ -ms-overflow-style: none; scrollbar-width: none; } - /*--------REMOVE DROPDOWN SHADOWS-----*/ + /* --------REMOVE DROPDOWN SHADOWS----- */ .dropdown.dropdown { box-shadow: none; } - /*---------ANILIST LIKER PLUGIN------*/ - #AnilistLikerPlugin .mmd2 { - font-style: normal !important; - font-weight: 700; - font-family: Overpass; - } + /* ---------ANILIST LIKER PLUGIN------ */ #AnilistLikerPlugin .btntop { margin-bottom: -4px; margin-top: 5px; @@ -892,7 +622,7 @@ margin-top: -2px; } - /*--------ANICHART SPECIFIC TWEAKS----*/ + /* --------ANICHART SPECIFIC TWEAKS---- */ .login[data-v-0d5bfbcd], .login[data-v-0d5bfbcd]:hover { color: @base; @@ -923,12 +653,10 @@ color: @accent !important; } .hohMediaScore { - font-size: 90%; - font-family: Overpass; - border: 2px solid @surface0; + border-color: @surface0; padding: 4px; border-radius: 10px; - margin-left: 0px; + margin-left: 0; background-color: @base; color: @accent; } @@ -953,27 +681,26 @@ .hohUserRow th, .hohHeaderRow td, .hohHeaderRow th { - border: 2px solid @surface0 !important; + border-color: @surface0 !important; } .hohUserRow td { - border-top: 4px solid @surface0 !important; + border-top-color: @surface0 !important; } .hohUserRow tr { - border-right: 4px solid @surface0 !important; - } - - /*---------ANILIST LIKER PLUGIN------*/ - #AnilistLikerPlugin .mmd2 { - font-style: normal !important; - font-weight: 700; - font-family: Overpass; - } - #AnilistLikerPlugin .btntop { - margin-bottom: -4px; - margin-top: 5px; - } - #AnilistLikerPlugin .btnbottom { - margin-top: -2px; + border-right-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; }; +} + +#rgbify(@color) { + @rgb-raw: red(@color), green(@color), blue(@color); +} +// vim:ft=less diff --git a/styles/boringproxy/catppuccin.user.css b/styles/boringproxy/catppuccin.user.css index 5d26a9d411..04fca2ef11 100644 --- a/styles/boringproxy/catppuccin.user.css +++ b/styles/boringproxy/catppuccin.user.css @@ -17,120 +17,14 @@ #catppuccin(@flavor, @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; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } + #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @flamingo: @catppuccin[@@lookup][@flamingo]; @@ -169,7 +63,7 @@ background: @crust; } .content { - border: 1px solid @overlay0; + border-color: @overlay0; } //Side Menu @@ -189,14 +83,14 @@ // Right SIde Button .button { - border: 2px solid @accent-color; + border-color: @accent-color; background-color: @crust; color: @subtext1; } .button:hover { color: @surface0; background-color: @accent-color; - border: 2px solid @crust; + border-color: @crust; } // Top Headers @@ -240,13 +134,13 @@ .input input { background-color: @crust; color: @subtext0; - border: 1px solid @accent-color; + border-color: @accent-color; } .input select { background-color: @crust; color: @subtext0; - border: 1px solid @accent-color; + border-color: @accent-color; } // Token Adding @@ -256,7 +150,7 @@ .token-adder select { background-color: @crust; color: @subtext0; - border: 1px solid @accent-color; + border-color: @accent-color; } // Client Adding @@ -266,12 +160,12 @@ .client-adder select { background-color: @crust; color: @subtext0; - border: 1px solid @accent-color; + border-color: @accent-color; } .client-adder input { background-color: @crust; color: @subtext0; - border: 1px solid @accent-color; + border-color: @accent-color; } // User Adding @@ -281,7 +175,7 @@ .user-adder input { background-color: @crust; color: @subtext0; - border: 1px solid @accent-color; + border-color: @accent-color; } // dialog .dialog__content { @@ -290,3 +184,4 @@ } } } +// vim:ft=less diff --git a/styles/brave-search/catppuccin.user.css b/styles/brave-search/catppuccin.user.css index d3fbb6440c..750c200a70 100644 --- a/styles/brave-search/catppuccin.user.css +++ b/styles/brave-search/catppuccin.user.css @@ -19,7 +19,7 @@ :root.dark { #catppuccin(@darkFlavor); } - :root:not(.light):not(.dark) { + :root:not(.light, .dark) { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); } @@ -28,124 +28,13 @@ } } + /* prettier-ignore */ @catppuccin: { - @latte: { - @color-scheme: light; - @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: { - @color-scheme: dark; - @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: { - @color-scheme: dark; - @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: { - @color-scheme: dark; - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; + @latte: { @color-scheme: light; @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: { @color-scheme: dark; @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: { @color-scheme: dark; @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: { @color-scheme: dark; @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) { @rosewater: @catppuccin[@@lookup][@rosewater]; @@ -176,127 +65,126 @@ @crust: @catppuccin[@@lookup][@crust]; @color: @catppuccin[@@lookup][@color-scheme]; - & { - color-scheme: @color; - --body-bg: @base; - --bg-glassy: @mantle; - --bg-1: @surface1; - --bg-2: @surface0; - --bg-02: @crust; - --bg-04: @mantle; - --bg-green: @green; - --bg-blue: @blue; - --bg-red: @red; - --bg-favicon: @surface1; - --bg-form-control-selected: @surface2; - --bg-form-control-unselected: @surface0; - --form-control-selected: @blue; - --form-control-hover: @lavender; - --form-control-focus: @text; - --settings-header-bg: @mantle; - --settings-header-text: @text; - --settings-header-icon: @blue; - --settings-widget-text: @subtext0; - --settings-item-text: @text; - --settings-item-icon: @blue; - --settings-item-border: @overlay0; - --settings-item-border-2: @overlay2; - --settings-btn-bg: @surface0; - --settings-btn-text: @text; - --settings-widget-outline: @overlay0; - --settings-independent-score: @blue; - --settings-global-score: @peach; - --brave-supporter-bg: @base; - --brave-supporter-text: @text; - --context-menu-header-border: @overlay0; - --color-primary: @text; - --color-primary-2: @subtext1; - --color-primary-3: @subtext0; - --color-white: @text; - --color-gray-2: @subtext1; - --color-gray-3: @subtext0; - --color-gray-4: @overlay2; - --color-gray-5: @overlay1; - --color-gray-6: @overlay0; - --color-green: @green; - --color-red: @red; - --color-blue: @blue; - --info-color: @blue; - --link-primary: @blue; - --link-secondary: @blue; - --link-visited: @mauve; - --snippet-url: @subtext0; - --separator-dot: @overlay0; - --theme-purple: @mauve; - --theme-yellow: @yellow; - --border-color: @overlay0; - --blurple-300: @lavender; - --text-01: @text; - --text-02: @subtext1; - --text-03: @subtext0; - --interactive-04: @blue; - --interactive-05: @blue; - --interactive-06: @blue; - --interactive-07: @blue; - --interactive-08: @blue; - --focus-border: @overlay2; - --divider-01: @overlay0; - --disabled: @overlay1; - --btn-filled-bg: @surface0; - --btn-filled-bg-hover: @surface1; - --btn-filled-text-active: @text; - --btn-filled-bg-active: @surface2; - --btn-filled-text-disabled: @overlay1; - --btn-outline-border: @overlay0; - --btn-outline-border-hover: @overlay1; - --btn-outline-text: @text; - --btn-outline-text-hover: @subtext1; - --btn-outline-text-active: @text; - --btn-outline-border-active: @overlay2; - --btn-outline-text-disabled: @overlay1; - --btn-icon-svg-hover: @subtext1; - --btn-icon-bg-hover: @surface1; - --btn-icon-svg-active: @text; - --code-bg-0: @base; - --code-border: @overlay0; - --code-color-1: @surface0; - --code-color-2: @text; - --code-color-3: @green; - --code-color-4: @blue; - --code-color-5: @pink; - --search-bgd-01: @overlay0; - --search-bgd-02: @base; - --search-bgd-03: @crust; - --search-bgd-04: @mantle; - --search-bgd-05: @base; - --search-bgd-06: @surface0; - --search-bgd-07: @mantle; - --search-bgd-08: @crust; - --search-line-01: @surface0; - --search-line-02: @subtext0; - --search-text-01: @text; - --search-text-02: @subtext1; - --search-text-03: @subtext0; - --search-text-04: @subtext0; - --search-text-05: @blue; - --search-text-06: @overlay0; - --search-text-09: @yellow; - --search-text-10: @peach; - --search-interactive-01: @blue; - --search-interactive-02: @mauve; - --search-interactive-03: @mauve; - --search-interactive-04: @sky; - --search-interactive-05: @mauve; - --gray-30: @base; - --gray-60: @surface0; - --gray-90: @overlay0; - --gray-110: @subtext0; - --gray-120: @text; - --secondary-90: @lavender; - } + color-scheme: @color; + --body-bg: @base; + --bg-glassy: @mantle; + --bg-1: @surface1; + --bg-2: @surface0; + --bg-02: @crust; + --bg-04: @mantle; + --bg-green: @green; + --bg-blue: @blue; + --bg-red: @red; + --bg-favicon: @surface1; + --bg-form-control-selected: @surface2; + --bg-form-control-unselected: @surface0; + --form-control-selected: @blue; + --form-control-hover: @lavender; + --form-control-focus: @text; + --settings-header-bg: @mantle; + --settings-header-text: @text; + --settings-header-icon: @blue; + --settings-widget-text: @subtext0; + --settings-item-text: @text; + --settings-item-icon: @blue; + --settings-item-border: @overlay0; + --settings-item-border-2: @overlay2; + --settings-btn-bg: @surface0; + --settings-btn-text: @text; + --settings-widget-outline: @overlay0; + --settings-independent-score: @blue; + --settings-global-score: @peach; + --brave-supporter-bg: @base; + --brave-supporter-text: @text; + --context-menu-header-border: @overlay0; + --color-primary: @text; + --color-primary-2: @subtext1; + --color-primary-3: @subtext0; + --color-white: @text; + --color-gray-2: @subtext1; + --color-gray-3: @subtext0; + --color-gray-4: @overlay2; + --color-gray-5: @overlay1; + --color-gray-6: @overlay0; + --color-green: @green; + --color-red: @red; + --color-blue: @blue; + --info-color: @blue; + --link-primary: @blue; + --link-secondary: @blue; + --link-visited: @mauve; + --snippet-url: @subtext0; + --separator-dot: @overlay0; + --theme-purple: @mauve; + --theme-yellow: @yellow; + --border-color: @overlay0; + --blurple-300: @lavender; + --text-01: @text; + --text-02: @subtext1; + --text-03: @subtext0; + --interactive-04: @blue; + --interactive-05: @blue; + --interactive-06: @blue; + --interactive-07: @blue; + --interactive-08: @blue; + --focus-border: @overlay2; + --divider-01: @overlay0; + --disabled: @overlay1; + --btn-filled-bg: @surface0; + --btn-filled-bg-hover: @surface1; + --btn-filled-text-active: @text; + --btn-filled-bg-active: @surface2; + --btn-filled-text-disabled: @overlay1; + --btn-outline-border: @overlay0; + --btn-outline-border-hover: @overlay1; + --btn-outline-text: @text; + --btn-outline-text-hover: @subtext1; + --btn-outline-text-active: @text; + --btn-outline-border-active: @overlay2; + --btn-outline-text-disabled: @overlay1; + --btn-icon-svg-hover: @subtext1; + --btn-icon-bg-hover: @surface1; + --btn-icon-svg-active: @text; + --code-bg-0: @base; + --code-border: @overlay0; + --code-color-1: @surface0; + --code-color-2: @text; + --code-color-3: @green; + --code-color-4: @blue; + --code-color-5: @pink; + --search-bgd-01: @overlay0; + --search-bgd-02: @base; + --search-bgd-03: @crust; + --search-bgd-04: @mantle; + --search-bgd-05: @base; + --search-bgd-06: @surface0; + --search-bgd-07: @mantle; + --search-bgd-08: @crust; + --search-line-01: @surface0; + --search-line-02: @subtext0; + --search-text-01: @text; + --search-text-02: @subtext1; + --search-text-03: @subtext0; + --search-text-04: @subtext0; + --search-text-05: @blue; + --search-text-06: @overlay0; + --search-text-09: @yellow; + --search-text-10: @peach; + --search-interactive-01: @blue; + --search-interactive-02: @mauve; + --search-interactive-03: @mauve; + --search-interactive-04: @sky; + --search-interactive-05: @mauve; + --gray-30: @base; + --gray-60: @surface0; + --gray-90: @overlay0; + --gray-110: @subtext0; + --gray-120: @text; + --secondary-90: @lavender; #searchform > .searchbox-wrapper::after { background-image: none; } } } +// vim:ft=less diff --git a/styles/bstats/catppuccin.user.css b/styles/bstats/catppuccin.user.css index 39806def9f..50a9c55739 100644 --- a/styles/bstats/catppuccin.user.css +++ b/styles/bstats/catppuccin.user.css @@ -16,120 +16,13 @@ ==/UserStyle== */ @-moz-document domain('bstats.org') { + /* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } :root { #catppuccin(@flavor, @accentColor); @@ -189,35 +82,35 @@ } .collection { - border: 1px solid @surface0; + border-color: @surface0; } .collection.with-header .collection-header, .collection .collection-item { - border-bottom: 1px solid @surface0; + border-bottom-color: @surface0; } .collapsible { - border-top: 1px solid @surface1; - border-right: 1px solid @surface1; - border-left: 1px solid @surface1; + border-top-color: @surface1; + border-right-color: @surface1; + border-left-color: @surface1; } .collapsible-body { - border-bottom: 1px solid @surface1; + border-bottom-color: @surface1; } .collapsible-header { background-color: @surface0 !important; - border-bottom: 1px solid @surface1; + border-bottom-color: @surface1; } blockquote { - border-left: 5px solid @maroon; + border-left-color: @maroon; } /* code box */ .prettyprint, .withBox, .prettyprinted { background-color: @mantle !important; - outline: 1px solid @mantle; + outline-color: @mantle; color: @overlay2; } .tag, @@ -310,12 +203,12 @@ /* checkbox */ [type="checkbox"] + label::before, [type="checkbox"]:not(.filled-in) + label::after { - border: 2px solid @subtext0; + border-color: @subtext0; } [type="checkbox"]:checked + label::before { - border: 0px solid rgba(0, 0, 0, 0); - border-right: 2px solid @green; - border-bottom: 2px solid @green; + border-color: rgba(0, 0, 0, 0); + border-right-color: @green; + border-bottom-color: @green; } /* table hover */ @@ -349,7 +242,7 @@ input[type="number"], input[type="search"], textarea.materialize-textarea { - border-bottom: 1px solid @subtext0; + border-bottom-color: @subtext0; box-shadow: 1 1px 0 0 @subtext0; } /* search focused */ @@ -366,7 +259,7 @@ input[type="number"]:focus:not([readonly]), input[type="search"]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) { - border-bottom: 1px solid @accent-color; + border-bottom-color: @accent-color; box-shadow: 0 1px 0 0 @accent-color; } /* valid input */ @@ -396,7 +289,7 @@ input[type="search"]:focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid { - border-bottom: 1px solid @green; + border-bottom-color: @green; box-shadow: 0 1px 0 0 @green; } @@ -417,7 +310,6 @@ .btn-large.disabled, .btn-flat.disabled, .btn:disabled, - .btn-large:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-flat:disabled, @@ -438,13 +330,13 @@ .card { background-color: @base; - border: 1px solid @surface0; + border-color: @surface0; } thead, div.material-table table tr td, div.material-table .table-header { - border-bottom: 1px solid @surface0; + border-bottom-color: @surface0; } /* modals found in custom chart settings */ @@ -455,10 +347,10 @@ /* custom chart dropdown menu */ .select-wrapper input.select-dropdown { - border-bottom: 1px solid @subtext0; + border-bottom-color: @subtext0; } .select-dropdown li.optgroup { - border-top: 1px solid @surface1; + border-top-color: @surface1; } .select-dropdown li.disabled, .select-dropdown li.disabled > span, @@ -507,30 +399,14 @@ color: @base; } .chips.focus { - border-bottom: 1px solid @accent-color; + border-bottom-color: @accent-color; box-shadow: 0 1px 0 0 @accent-color; } .chips .input { color: @text; } - 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: 1px solid @overlay2; - box-shadow: 1 1px 0 0 @overlay2 !important; - } input[placeholder="Add an other value"] { - border-bottom: 0px solid @overlay2 !important; + border-bottom-color: @overlay2; } /* HIGHCHARTS "let's hope this does'nt break"-section */ @@ -690,7 +566,7 @@ /* "Load full data" button */ .highcharts-menu { background: @surface0 !important; - border: 1px solid @surface1 !important; + border-color: @surface1 !important; box-shadow: @mantle 3px 3px 10px !important; } .highcharts-menu-item { @@ -913,3 +789,4 @@ } } } +// vim:ft=less diff --git a/styles/canvas-lms/catppuccin.user.css b/styles/canvas-lms/catppuccin.user.css index 15f7315f80..8fd68e5c71 100644 --- a/styles/canvas-lms/catppuccin.user.css +++ b/styles/canvas-lms/catppuccin.user.css @@ -4,7 +4,7 @@ @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/canvas-lms @version 0.0.2 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/canvas-lms/catppuccin.user.css -@description Soothing pastel theme for Canvas LMS +@description Soothing pastel theme for Canvas LMS @author Catppuccin @license MIT @@ -17,120 +17,13 @@ #catppuccin(@flavor, @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; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @@ -252,7 +145,7 @@ } .list-view a.active { - border-left: 2px solid #007fff; + border-left-color: #007fff; color: #007fff; } @@ -269,3 +162,4 @@ } } } +// vim:ft=less diff --git a/styles/chatgpt/catppuccin.user.css b/styles/chatgpt/catppuccin.user.css index aefded9073..94e3add50a 100644 --- a/styles/chatgpt/catppuccin.user.css +++ b/styles/chatgpt/catppuccin.user.css @@ -26,120 +26,13 @@ #catppuccin(@darkFlavor); } + /* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } @color: white; #rgbify(@color) { @@ -207,9 +100,11 @@ } /* Main page */ - div[class*="bg-gray-"]:not([class*="bg-gray-900"]):not( - [class*="bg-gray-700"] - ):not(.bg-black .bg-gray-800), + div[class*="bg-gray-"]:not( + [class*="bg-gray-900"], + [class*="bg-gray-700"], + .bg-black .bg-gray-800 + ), div[class*="bg-vert-dark-gradient"] { background: @base !important; } @@ -349,3 +244,4 @@ } } } +// vim:ft=less diff --git a/styles/chatreplay/catppuccin.user.css b/styles/chatreplay/catppuccin.user.css index 115f136515..ca374132d1 100644 --- a/styles/chatreplay/catppuccin.user.css +++ b/styles/chatreplay/catppuccin.user.css @@ -5,6 +5,8 @@ @version 0.0.1 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chatreplay/catppuccin.user.css @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"] @@ -33,120 +35,13 @@ } } + /* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } #catppuccin(@lookup, @accent-color, @platform) { @rosewater: @catppuccin[@@lookup][@rosewater]; @@ -178,72 +73,69 @@ @accent: @catppuccin[@@lookup][@@accent-color]; & when (@platform = chat) { - & { - a, - i { - color: @accent; - } - color: @text; + a, + i { + color: @accent; + } + 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; + --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; + } + .message--highlighted a { + color: @accent; + } + .message--highlighted { + background: @accent; + border-color: @accent; + 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; - --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; - --border-color: @surface0; - --settings-shadow: 0 4px 8px rgba(@crust, 0.4), - 0 0 4px rgba(@crust, 0.4); - .message-notice { - border-left: 4px solid @accent; - } - .message--highlighted a { - color: @accent; - } - .message--highlighted { - background: @accent; - border: 4px solid @accent; - 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); - } + .resume-scroll { + background-color: @surface0; + } + } + @keyframes rotating { + 0% { + transform: rotate(0); + } - to { - transform: rotate(360deg); - scale: 1.5; - fill: @red; - } + 100% { + transform: rotate(360deg); + scale: 1.5; + fill: @red; } } + & when (@platform = base) { - & { - background-color: @base; - color: @text; - } + background-color: @base; + color: @text; + body { color: @text; } @@ -285,7 +177,7 @@ fill: @base; } .delete.c19loos5.c19loos5 { - border: 1px solid @red; + border-color: @red; } .mark.z8oy0d.z8oy0d { background: @accent; @@ -304,3 +196,4 @@ } } } +// vim:ft=less diff --git a/styles/chess.com/catppuccin.user.css b/styles/chess.com/catppuccin.user.css index f0db86e0cb..c1fd8ce43d 100644 --- a/styles/chess.com/catppuccin.user.css +++ b/styles/chess.com/catppuccin.user.css @@ -3,7 +3,7 @@ @namespace github.com/catppuccin/userstyles/styles/chess.com @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/chess.com @version 0.1.2 -@updateURL https://raw.githubusercontent.com/catppuccin/userstyles/main/styles/chess.com/catppuccin.user.css +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chess.com/catppuccin.user.css @description Soothing pastel theme for Chess.com @author Catppuccin @license MIT @@ -23,171 +23,13 @@ #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; - @bb: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/b/bb.png"); - @bk: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/b/bk.png"); - @bn: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/b/bn.png"); - @bp: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/b/bp.png"); - @bq: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/b/bq.png"); - @br: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/b/br.png"); - @wb: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/w/wb.png"); - @wk: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/w/wk.png"); - @wn: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/w/wn.png"); - @wp: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/w/wp.png"); - @wq: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/w/wq.png"); - @wr: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/w/wr.png"); - }; - - @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; - @bb: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/b/bb.png"); - @bk: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/b/bk.png"); - @bn: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/b/bn.png"); - @bp: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/b/bp.png"); - @bq: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/b/bq.png"); - @br: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/b/br.png"); - @wb: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/w/wb.png"); - @wk: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/w/wk.png"); - @wn: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/w/wn.png"); - @wp: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/w/wp.png"); - @wq: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/w/wq.png"); - @wr: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/w/wr.png"); - }; - - @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; - @bb: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/b/bb.png"); - @bk: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/b/bk.png"); - @bn: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/b/bn.png"); - @bp: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/b/bp.png"); - @bq: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/b/bq.png"); - @br: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/b/br.png"); - @wb: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/w/wb.png"); - @wk: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/w/wk.png"); - @wn: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/w/wn.png"); - @wp: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/w/wp.png"); - @wq: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/w/wq.png"); - @wr: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/w/wr.png"); - }; - - @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; - @bb: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/b/bb.png"); - @bk: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/b/bk.png"); - @bn: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/b/bn.png"); - @bp: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/b/bp.png"); - @bq: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/b/bq.png"); - @br: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/b/br.png"); - @wb: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/w/wb.png"); - @wk: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/w/wk.png"); - @wn: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/w/wn.png"); - @wp: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/w/wp.png"); - @wq: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/w/wq.png"); - @wr: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/w/wr.png"); - }; - }; + @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) { @@ -219,53 +61,55 @@ @crust: @catppuccin[@@lookup][@crust]; @accent-color: @catppuccin[@@lookup][@@accent]; - @bb: @catppuccin[@@lookup][@bb]; - @bk: @catppuccin[@@lookup][@bk]; - @bn: @catppuccin[@@lookup][@bn]; - @bp: @catppuccin[@@lookup][@bp]; - @bq: @catppuccin[@@lookup][@bq]; - @br: @catppuccin[@@lookup][@br]; - @wb: @catppuccin[@@lookup][@wb]; - @wk: @catppuccin[@@lookup][@wk]; - @wn: @catppuccin[@@lookup][@wn]; - @wp: @catppuccin[@@lookup][@wp]; - @wq: @catppuccin[@@lookup][@wq]; - @wr: @catppuccin[@@lookup][@wr]; - - & { - --theme-background-color: @base !important; - --globalBackground: @mantle !important; - --globalBackgroundOpaque: @mantle !important; - --globalSecondaryBackground: @crust !important; - --globalTertiaryBackground: @surface0 !important; - --globalAccentBackground: @accent-color !important; - --globalSecondaryAccentBackground: darken(@accent-color, 20%) !important; - --globalSiteBackground: @base !important; - --subtleButtonBackground: hsla(0, 0%, 100%, 0.16); - --globalBorder: @surface0 !important; - --globalGray: hsla(0, 0%, 100%, 0.08); - --globalGraySoft: hsla(0, 0%, 100%, 0.08); - --globalColorThemeFull: @text !important; - --globalColorThemeHigh: @text; - --globalColorThemeMid: @overlay2 !important; - --globalColorThemeLow: @overlay0 !important; - --globalColorThemeLower: @base !important; - --globalColorThemeLink: @sapphire !important; - --globalColorThemeBlueToWhite: #fff; - --globalColorThemeBlueToMid: hsla(0, 0%, 100%, 0.72); - --globalColorThemeBlueToMidHover: hsla(0, 0%, 100%, 0.85); - --globalColorThemeBlueToHigh: hsla(0, 0%, 100%, 0.85); - --globalColorThemeBlueToHighHover: #fff; - --globalColorThemeHighToMid: hsla(0, 0%, 100%, 0.72); - --globalColorThemeFullToMid: hsla(0, 0%, 100%, 0.72); - --globalColorNeutral50: rgba(0, 0, 0, 0.1); - --globalColorNeutral100: rgba(0, 0, 0, 0.2); - --globalColorNeutral200: rgba(0, 0, 0, 0.4); - --globalOverlayBackground: @base !important; - --globalColorWin: @green !important; - --globalColorDraw: @accent-color !important; - --globalColorLoss: @red !important; - } + #piece(@name) { + @url: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/@{lookup}/@{name}.png"); + } + + @bb: #piece("b/bb") []; + @bk: #piece("b/bk") []; + @bn: #piece("b/bn") []; + @bp: #piece("b/bp") []; + @bq: #piece("b/bq") []; + @br: #piece("b/br") []; + @wb: #piece("w/wb") []; + @wk: #piece("w/wk") []; + @wn: #piece("w/wn") []; + @wp: #piece("w/wp") []; + @wq: #piece("w/wq") []; + @wr: #piece("w/wr") []; + + --theme-background-color: @base !important; + --globalBackground: @mantle !important; + --globalBackgroundOpaque: @mantle !important; + --globalSecondaryBackground: @crust !important; + --globalTertiaryBackground: @surface0 !important; + --globalAccentBackground: @accent-color !important; + --globalSecondaryAccentBackground: darken(@accent-color, 20%) !important; + --globalSiteBackground: @base !important; + --subtleButtonBackground: hsla(0, 0%, 100%, 0.16); + --globalBorder: @surface0 !important; + --globalGray: hsla(0, 0%, 100%, 0.08); + --globalGraySoft: hsla(0, 0%, 100%, 0.08); + --globalColorThemeFull: @text !important; + --globalColorThemeHigh: @text; + --globalColorThemeMid: @overlay2 !important; + --globalColorThemeLow: @overlay0 !important; + --globalColorThemeLower: @base !important; + --globalColorThemeLink: @sapphire !important; + --globalColorThemeBlueToWhite: #fff; + --globalColorThemeBlueToMid: hsla(0, 0%, 100%, 0.72); + --globalColorThemeBlueToMidHover: hsla(0, 0%, 100%, 0.85); + --globalColorThemeBlueToHigh: hsla(0, 0%, 100%, 0.85); + --globalColorThemeBlueToHighHover: #fff; + --globalColorThemeHighToMid: hsla(0, 0%, 100%, 0.72); + --globalColorThemeFullToMid: hsla(0, 0%, 100%, 0.72); + --globalColorNeutral50: rgba(0, 0, 0, 0.1); + --globalColorNeutral100: rgba(0, 0, 0, 0.2); + --globalColorNeutral200: rgba(0, 0, 0, 0.4); + --globalOverlayBackground: @base !important; + --globalColorWin: @green !important; + --globalColorDraw: @accent-color !important; + --globalColorLoss: @red !important; /* index page */ .promo-title, @@ -452,12 +296,12 @@ .hint { background-color: @overlay1; - filter: drop-shadow(0px 0px 1px @crust); + filter: drop-shadow(0 0 1px @crust); } .capture-hint { background-color: @overlay1; - filter: drop-shadow(0px 0px 1px @crust); + filter: drop-shadow(0 0 1px @crust); z-index: -1; } @@ -607,3 +451,4 @@ } } } +// vim:ft=less diff --git a/styles/cinny/catppuccin.user.css b/styles/cinny/catppuccin.user.css index 056b3fe185..7b41c4dd21 100644 --- a/styles/cinny/catppuccin.user.css +++ b/styles/cinny/catppuccin.user.css @@ -256,6 +256,6 @@ #catppuccin(@darkFlavor, @accentColor); } } -} /* /@-moz-document */ +} // vim:ft=less diff --git a/styles/codeberg/catppuccin.user.css b/styles/codeberg/catppuccin.user.css index 97bdcc1531..5c1c60c0df 100644 --- a/styles/codeberg/catppuccin.user.css +++ b/styles/codeberg/catppuccin.user.css @@ -17,123 +17,13 @@ /* Apply Theme To Site * For help with URL rules, please see https://github.com/openstyles/stylus/wiki/Writing-styles#valid--moz-document-rules */ @-moz-document domain('codeberg.org') { + /* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @@ -215,3 +105,4 @@ @accentColor); } } +// vim:ft=less diff --git a/styles/crowdin/catppuccin.user.css b/styles/crowdin/catppuccin.user.css index 98c5d2b460..7c270424a7 100644 --- a/styles/crowdin/catppuccin.user.css +++ b/styles/crowdin/catppuccin.user.css @@ -12,124 +12,13 @@ @var select flavor "Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] ==/UserStyle== */ +/* 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; - @teala: rgba(23, 146, 153, 0.25); - @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; - @teala: rgba(129, 200, 190, 0.25); - @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; - @teala: rgba(139, 213, 202, 0.25); - @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; - @teala: rgba(148, 226, 213, 0.25); - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; -}; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @teala: rgba(23, 146, 153, 0.25); @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; @teala: rgba(129, 200, 190, 0.25); @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; @teala: rgba(139, 213, 202, 0.25); @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; @teala: rgba(148, 226, 213, 0.25); @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +} @-moz-document regexp("https://crowdin.com(?!/translate).*") { @@ -271,3 +160,4 @@ } } } +// vim:ft=less diff --git a/styles/deepl/catppuccin.user.css b/styles/deepl/catppuccin.user.css index c6908e8ff3..070a26d799 100644 --- a/styles/deepl/catppuccin.user.css +++ b/styles/deepl/catppuccin.user.css @@ -180,10 +180,6 @@ color: darken(@accent-color, 15%); } - [class*="bg-[#B4DAE8]"] { - // background-color: fadeout(@accent-color, 70%); - } - [class*="bg-[#E1F0F5]"] { background-color: fadeout(@accent-color, 70%); } @@ -569,6 +565,7 @@ // quotes [class|="Quote-module--quote"] { background-color: @base !important; + border-color: @surface0; color: @text; } @@ -578,10 +575,6 @@ } } - [class|="Quote-module--quote"] { - border-color: @surface0; - } - [class|="Quotes-module--quotesNavigationEntry"] { background-color: @surface1; } @@ -716,8 +709,7 @@ // height: 100%; // width: 100vw; // display: flex; - justify-content: center; - align-content: center; + place-content: center center; align-items: center; > div:first-of-type { @@ -727,120 +719,11 @@ } } +/* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; -}; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +} +// vim:ft=less diff --git a/styles/ecosia/catppuccin.user.css b/styles/ecosia/catppuccin.user.css index 9a95c561cf..ee5f109ee4 100644 --- a/styles/ecosia/catppuccin.user.css +++ b/styles/ecosia/catppuccin.user.css @@ -23,123 +23,13 @@ #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; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @@ -237,3 +127,4 @@ --color-before-after-text: @text !important; } } +// vim:ft=less diff --git a/styles/elk/catppuccin.user.css b/styles/elk/catppuccin.user.css index ac785d924c..ddc458bfbf 100644 --- a/styles/elk/catppuccin.user.css +++ b/styles/elk/catppuccin.user.css @@ -21,120 +21,13 @@ #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; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @@ -165,32 +58,30 @@ @crust: @catppuccin[@@lookup][@crust]; @accent-Color: @catppuccin[@@lookup][@@accent]; - & { - --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: red(@mantle), green(@mantle), blue(@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; - } + --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: red(@mantle), green(@mantle), blue(@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; ::selection { color: white; @@ -260,3 +151,4 @@ } } } +// vim:ft=less diff --git a/styles/formative/catppuccin.user.css b/styles/formative/catppuccin.user.css index c986d1285f..08872df987 100644 --- a/styles/formative/catppuccin.user.css +++ b/styles/formative/catppuccin.user.css @@ -2,7 +2,7 @@ @name Formative Catppuccin @namespace github.com/catppuccin/userstyles/styles/formative @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/formative -@version 0.1.1 +@version 0.1.2 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/formative/catppuccin.user.css @description Soothing pastel theme for Formative @author Catppuccin @@ -13,123 +13,13 @@ @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') { - /* Palette Lookup Table - * Defining the Colors per Flavor called via: - * @catppuccin['Flavor']['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; - }; - }; + @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; }; + } :root { #catppuccin(@flavor, @accentColor); @@ -190,9 +80,7 @@ } } - /************************************************************* - * HOMEPAGE - *************************************************************/ + /* HOMEPAGE */ div.ClassAvatar__RootDiv-sc-1ihhtbf-0, .Avatar__RootDiv-sc-r9onsm-0 > div { background-color: @accent-color; @@ -342,8 +230,6 @@ color: @accent-color; } .ReactSelect__control { - .ReactSelect__control--is-focused { - } background-color: @surface0; border-color: @accent-color !important; } @@ -355,7 +241,7 @@ .TWTWN { background-color: @surface0; border-radius: 4px; /* needed to fix radius i somehow broke */ - border: 1px solid @overlay0; + border-color: @overlay0; .jYYNAO, .fHuoBD { @@ -447,10 +333,10 @@ } } - /************************************************************* + /* * Tracker * FIXME: Someone with access to tracker data, please make sure everything is correctly styled. I'll try my best to style everything I can see for now. - *************************************************************/ + */ .StudentTracker__StudentTrackerRoot-sc-17q49lm-0 { background-color: @base; .dHLPyg { @@ -473,9 +359,7 @@ } } - /************************************************************* - * Practice - *************************************************************/ + /* Practice */ .PracticeSets__RootDiv-sc-zal4td-0 { .Button__StyledButton-sc-aum9f1-1 { border-color: @accent-color; @@ -508,9 +392,7 @@ } } - /************************************************************* - * Modals - *************************************************************/ + /* Modals */ .ReactModal__Overlay { .ReactModal__Content { background-color: transparent; @@ -539,7 +421,7 @@ color: @text; } } - /********************************************************/ + label { color: @text; span { @@ -554,7 +436,7 @@ color: @subtext0; } } - /*******************************************************/ + .ModalBody__RootDiv-sc-1lg094f-0 { color: @text; h3 { @@ -878,7 +760,7 @@ } } } - /***********************************************************/ + /********************************************************** */ #student-main-content { background-color: @base; .FormativeDescription__RootDiv-sc-msmcgd-0 { @@ -1267,9 +1149,6 @@ path[fill="rgb(242,242,242)"] { fill: @contrast-accent-color !important; } - path[fill="rgb(32,213,171)"] { - fill: @teal !important; - } path[stroke="rgb(32,213,171)"] { stroke: @green !important; } @@ -1288,9 +1167,6 @@ path[stroke="rgb(242,242,242)"] { stroke: @contrast-accent-color !important; } - path[stroke="rgb(32,213,171)"] { - stroke: @teal !important; - } } } .css-1vamqze { @@ -1360,7 +1236,7 @@ .left > div.selected { border-color: @accent-color; } - [data-tooltip]:after { + [data-tooltip]::after { background: @overlay0; color: @text; } @@ -1430,4 +1306,5 @@ } } } -} /* /@-moz-document */ +} +// vim:ft=less diff --git a/styles/github/catppuccin.user.css b/styles/github/catppuccin.user.css index 9c5aaa7527..adee863615 100644 --- a/styles/github/catppuccin.user.css +++ b/styles/github/catppuccin.user.css @@ -13,123 +13,15 @@ @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 topbar "Topbar colors" 1 -@var checkbox usefont "Use Inter font" 0 ==/UserStyle== */ +/* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; -}; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +} @-moz-document regexp("https:\/\/(gist\.)*github\.com(?!\/(home|marketplace|organizations\/plan))(?!\/.+?\/.+?\/commit\/[A-Fa-f0-9]+\.).*") { [data-color-mode="light"], @@ -158,8 +50,6 @@ left: 0; padding: 1rem; margin: 1rem; - font-size: 0.9rem; - font-weight: 600; border-radius: 0.5rem; max-width: 40ch; background-color: var(--color-danger-fg); @@ -419,7 +309,7 @@ --color-ansi-black: #484f58; --color-ansi-black-bright: #6e7681; --color-ansi-white: #b1bac4; - --color-ansi-white-bright: #ffffff; + --color-ansi-white-bright: #fff; --color-ansi-gray: #6e7681; --color-ansi-red: #ff7b72; --color-ansi-red-bright: #ffa198; @@ -458,7 +348,7 @@ --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); --color-btn-outline-hover-counter-bg: rgba(255, 255, 255, 0.2); - --color-btn-outline-selected-text: #ffffff; + --color-btn-outline-selected-text: #fff; --color-btn-outline-selected-bg: #0d419d; --color-btn-outline-selected-border: rgba(240, 246, 252, 0.1); --color-btn-outline-selected-shadow: 0 0 transparent; @@ -552,7 +442,7 @@ --color-primer-shadow-inset: 0 0 transparent; --color-primer-shadow-focus: 0 0 0 3px #0c2d6b; --color-scale-black: #010409; - --color-scale-white: #ffffff; + --color-scale-white: #fff; --color-scale-gray-0: #f0f6fc; --color-scale-gray-1: #c9d1d9; --color-scale-gray-2: #b1bac4; @@ -726,7 +616,7 @@ --text: @text; } - .hx_IssueLabel not when (@lookup =latte) { + .hx_IssueLabel when not (@lookup =latte) { --lightness-threshold: 0.453; --border-threshold: 0.96; --border-fadeout: max( @@ -874,13 +764,6 @@ color: @subtext1; } - body, - .markdown-body { - & when (@usefont=1) { - font-family: inter, sans-serif; - } - } - #check-step-header-title { color: var(--color-checks-text-link) !important; } @@ -1097,10 +980,7 @@ .lhyFLG { background-color: @mantle; - border-top: 1px solid @surface1; - border-right-color: @surface1; - border-bottom-color: @surface1; - border-left-color: @surface1; + border-color: @surface1; } .hUWqlv, @@ -1218,7 +1098,7 @@ } .ikTPpF { - box-shadow: @base 0px 3px 6px; + box-shadow: @base 0 3px 6px; border-color: @surface0; } @@ -1430,8 +1310,8 @@ .jykkjb { background-color: @base; box-shadow: - @crust 0px -2px 0px inset, - @crust 0px 1px 0px inset; + @crust 0 -2px 0 inset, + @crust 0 1px 0 inset; } .jhjELj, @@ -1471,13 +1351,6 @@ color: @subtext0; } - smt { - background-color: @base; - &:hover { - background-color: @surface0; - } - } - .dtTTcd { background-color: @base; &.hoverable:hover { @@ -1504,7 +1377,7 @@ /* Tree Fix */ - /* Weird barely visible outlines | Can be removed if intentional*/ + /* Weird barely visible outlines | Can be removed if intentional */ .brFBoI, .ldUAkr, .gtXnmh { @@ -1518,7 +1391,7 @@ } .jMdYTc { - border: 1px solid @surface1; + border-color: @surface1; & button { color: @subtext1; @@ -1630,18 +1503,18 @@ &:hover { background-color: @mantle; - border: 1px solid @surface1; + border-color: @surface1; color: @text; } } - /* Fullscreen Sidebar Fixes*/ + /* Fullscreen Sidebar Fixes */ .hMCjFU, .jcKsih, .hpgNiv { background-color: @base; color: @text; - border: 1px solid @surface1; + border-color: @surface1; &:hover { background-color: @surface0; @@ -1654,7 +1527,7 @@ .iGzDhH, .Overlay { background-color: @mantle; - border: 1px solid @surface1; + border-color: @surface1; border-radius: 6px; box-shadow: var(--shadow-floating-large, var(--color-shadow-large)); } @@ -1669,11 +1542,11 @@ .VgnWi { background-color: @base; - border: 1px solid @surface1; + border-color: @surface1; &:focus-within { border-color: @accent-color; - box-shadow: @accent-color 0px 0px 0px 1px inset; + box-shadow: @accent-color 0 0 0 1px inset; } } @@ -1701,7 +1574,7 @@ select option, optgroup { background-color: @mantle; - border: 1px solid @surface1; + border-color: @surface1; border-radius: 6px; box-shadow: var(--shadow-floating-large, var(--color-shadow-large)); } @@ -1720,18 +1593,18 @@ /* Add File Menu */ .dQPLyc { background-color: transparent; - border: 1px solid @surface1; + border-color: @surface1; } .ktGGEf { background-color: @base; - border: 1px solid @surface1; + border-color: @surface1; } .gkfBtX { background-color: @mantle; - border-radius: 6px 0px 0px 0px; - border-bottom: 1px solid @surface1; + border-radius: 6px 0 0; + border-bottom-color: @surface1; } .jproXT { @@ -1752,7 +1625,7 @@ .wLDmP { background-color: @mantle; - border: 1px solid @surface1; + border-color: @surface1; } .eNSiNz .segmentedControl-content, @@ -1815,7 +1688,7 @@ /* Colors */ --color-scale-black: #010409; - --color-scale-white: #ffffff; + --color-scale-white: #fff; --color-scale-gray-0: #f0f6fc; --color-scale-gray-1: #c9d1d9; --color-scale-gray-2: #b1bac4; @@ -2007,3 +1880,4 @@ --jp-icon-contrast-color3: var(--color-scale-blue-6); } } +// vim:ft=less diff --git a/styles/gmail/catppuccin.user.css b/styles/gmail/catppuccin.user.css index 34122a38da..75ec06de27 100644 --- a/styles/gmail/catppuccin.user.css +++ b/styles/gmail/catppuccin.user.css @@ -2,7 +2,7 @@ @name Gmail Catppuccin @namespace github.com/catppuccin/userstyles/styles/gmail @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/gmail -@version 0.1.0 +@version 0.1.1 @description Soothing pastel theme for Gmail @author Catppuccin @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/gmail/catppuccin.user.css @@ -18,120 +18,13 @@ #catppuccin(@flavor, @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; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @@ -342,7 +235,7 @@ .aKz { color: @accent-color !important; } - &:before { + &::before { background: @accent-color !important; } } @@ -388,7 +281,7 @@ box-shadow: 0 5px 10px -5px @crust; } .a81 { - border: 1px solid @surface0; + border-color: @surface0; } /* no star warning */ @@ -475,7 +368,7 @@ filter: brightness(0) saturate(100%) invert(28%) sepia(17%) saturate(835%) hue-rotate(337deg) brightness(300%); } - /*svgs*/ + /* svgs */ .gb_Mc svg, .gb_Rc.gb_Vc svg, .gb_Mc .gb_dd .gb_ld, @@ -509,7 +402,7 @@ .btC .aaA.a2X, .aaZ .J-N-JX.a5, .aaZ .J-N-JX.a2X, - [role="toolbar"] [role="button"]:not(.H2):not(.Ol) { + [role="toolbar"] [role="button"]:not(.H2, .Ol) { filter: invert(1) !important; } @@ -558,8 +451,9 @@ background: @accent-color !important; color: @crust !important; &:hover { - background: ligten(@accent-color, 10%) !important; + background: lighten(@accent-color, 10%) !important; } } } } +// vim:ft=less diff --git a/styles/hacker-news/catppuccin.user.css b/styles/hacker-news/catppuccin.user.css index d6600cfd26..06a3256dc3 100644 --- a/styles/hacker-news/catppuccin.user.css +++ b/styles/hacker-news/catppuccin.user.css @@ -14,120 +14,13 @@ @-moz-document url-prefix("https://news.ycombinator.com") { + /* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } #catppuccin(@flavor); @@ -323,3 +216,4 @@ } } } +// vim:ft=less diff --git a/styles/homepage/catppuccin.user.css b/styles/homepage/catppuccin.user.css index 69fbacd2da..06d430773b 100644 --- a/styles/homepage/catppuccin.user.css +++ b/styles/homepage/catppuccin.user.css @@ -17,120 +17,14 @@ #catppuccin(@flavor, @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; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } + #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @flamingo: @catppuccin[@@lookup][@flamingo]; @@ -255,3 +149,4 @@ } } } +// vim:ft=less diff --git a/styles/hoppscotch/catppuccin.user.css b/styles/hoppscotch/catppuccin.user.css index bb6f3276fc..958fa8a35b 100644 --- a/styles/hoppscotch/catppuccin.user.css +++ b/styles/hoppscotch/catppuccin.user.css @@ -14,122 +14,13 @@ @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") { + /* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } :root.dark { #catppuccin(@darkFlavor, @accentColor); @@ -173,42 +64,39 @@ @accent-gradient-via-color: 1.2; @accent-gradient-to-color: 0.85; - & { - --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, 0.9); - --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-process-color: fade(@pink, 1.4); - --editor-constant-color: fade(@lavender, 1.2); - --editor-keyword-color: @red; - --accent-color: @accent; - --accent-light-color: fade(@accent, @accent-light-alpha); - --accent-dark-color: fade(@accent, @accent-dark-alpha); - --accent-contrast-color: @crust; - --gradient-from-color: fade(@accent, @accent-gradient-from-color); - --gradient-via-color: fade(@accent, @accent-gradient-via-color); - --gradient-to-color: fade(@accent, @accent-gradient-to-color); + --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, 0.9); + --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; + --accent-light-color: fade(@accent, @accent-light-alpha); + --accent-dark-color: fade(@accent, @accent-dark-alpha); + --accent-contrast-color: @crust; + --gradient-from-color: fade(@accent, @accent-gradient-from-color); + --gradient-via-color: fade(@accent, @accent-gradient-via-color); + --gradient-to-color: fade(@accent, @accent-gradient-to-color); - --editor-process-color: @text; - } + --editor-process-color: @text; .ͼ1 .cm-placeholder { color: @text; @@ -223,3 +111,4 @@ } } } +// vim:ft=less diff --git a/styles/ichi.moe/catppuccin.user.css b/styles/ichi.moe/catppuccin.user.css index fa7c0828cb..6a43dbb699 100644 --- a/styles/ichi.moe/catppuccin.user.css +++ b/styles/ichi.moe/catppuccin.user.css @@ -17,120 +17,13 @@ #catppuccin(@flavor); } + /* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } #catppuccin(@lookup) { @rosewater: @catppuccin[@@lookup][@rosewater]; @@ -177,10 +70,6 @@ border-color: @pink; } - span.query-pick { - color: @subtext1; - } - .panel-error { background-color: fadeout(@red, 0.2); } @@ -229,7 +118,7 @@ } a.info-link:hover { - border-bottom: 1px dashed @sapphire; + border-bottom-color: @sapphire; } .note-skipped a { @@ -241,7 +130,10 @@ } .jspDrag { - background-color: @lavender; + & when (@lookup ="latte") { + background-color: @surface1; + } + background-color: @surface2; } .conj-negative { @@ -256,13 +148,6 @@ color: @green; } - .kanji-table td { - & when (@lookup ="latte") { - border: 1px solid @surface1; - } - border: 1px solid @surface0; - } - .reading-table tr:nth-of-type(2n) { & when (@lookup ="latte") { background: fadeout(@surface0, 0.5); @@ -270,20 +155,6 @@ background: fadeout(@surface1, 0.5); } - .reading-table tr ~ tr > td { - & when (@lookup ="latte") { - border-top: 1px solid @surface2; - } - border-top: 1px solid @overlay0; - } - - table.kanji-match td { - & when (@lookup ="latte") { - border-right: 1px solid @surface2; - } - border-right: 1px solid @overlay0; - } - table.kanji-match tr:nth-of-type(2n) { & when (@lookup ="latte") { background: fadeout(@surface0, 0.5); @@ -291,14 +162,6 @@ background: fadeout(@surface1, 0.5); } - tr.match-row-kanji, - tr.match-row-reading { - & when (@lookup ="latte") { - border-bottom: 1px solid @surface2; - } - border-bottom: 1px solid @overlay0; - } - .kanji-big a { color: @subtext1; } @@ -306,10 +169,10 @@ .autocomplete-suggestions { & when (@lookup ="latte") { background: @base; - border: 1px solid @surface2; + border-color: @surface2; } background: @surface0; - border: 1px solid @overlay0; + border-color: @overlay0; } .autocomplete-selected { @@ -324,7 +187,7 @@ } .autocomplete-group strong { - border-bottom: 1px solid @text; + border-bottom-color: @text; } .button { @@ -412,13 +275,6 @@ background: @surface1; } - .jspDrag { - & when (@lookup ="latte") { - background-color: @surface1; - } - background-color: @surface2; - } - .f-dropdown { & when (@lookup ="latte") { background-color: @base; @@ -442,7 +298,7 @@ .has-tip:hover, .has-tip:focus { - border-bottom: dotted 1px @sapphire; + border-bottom-color: @sapphire; color: @sapphire; } @@ -506,7 +362,7 @@ } /* Options */ - if (zen) { + & when (@zen = 1) { .header, footer, .landing-page { @@ -517,8 +373,7 @@ display: flex; flex-direction: column; align-items: center; - align-content: center; - justify-content: center; + place-content: center center; padding: 50px 0; min-height: 100vh; margin: 0; @@ -546,3 +401,4 @@ } } } +// vim:ft=less diff --git a/styles/instagram/catppuccin.user.css b/styles/instagram/catppuccin.user.css index 0dfc8b3030..cddd5db3d0 100644 --- a/styles/instagram/catppuccin.user.css +++ b/styles/instagram/catppuccin.user.css @@ -104,6 +104,9 @@ --ig-error-or-destructive: #rgbify(@maroon) []; --ig-success: #rgbify(@green) []; --blue-2: #rgbify(@blue) []; + + scrollbar-width: none; + scrollbar-color: @accent-color @crust; } // Text selection *::selection { color: @dark_color; @@ -576,11 +579,6 @@ background-color: @accent-color; border-radius: 10px; } - - * { - scrollbar-width: none; - scrollbar-color: @accent-color @crust; - } } } @@ -616,125 +614,24 @@ } } +/* 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%); + @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%); + @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%); + @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%); + @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 diff --git a/styles/invidious/catppuccin.user.css b/styles/invidious/catppuccin.user.css index 484d9b9328..018ea63862 100644 --- a/styles/invidious/catppuccin.user.css +++ b/styles/invidious/catppuccin.user.css @@ -2,7 +2,7 @@ @name Invidious Catppuccin @namespace github.com/catppuccin/userstyles/styles/invidious @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/invidious -@version 0.3.1 +@version 0.3.2 @description Soothing pastel theme for Invidious @author Catppuccin @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/invidious/catppuccin.user.css @@ -155,10 +155,6 @@ .video-js .vjs-control-bar, .vjs-menu-button-popup .vjs-menu .vjs-menu-content { background-color: @crust !important; - } - - .video-js .vjs-control-bar, - .vjs-menu-button-popup .vjs-menu .vjs-menu-content { color: @text !important; } @@ -248,12 +244,11 @@ } input[type="checkbox"] { background-color: @surface2; - border: 1px solid @crust; + border-color: @crust; height: 1rem; width: 1rem; -webkit-appearance: none; appearance: none; - outline: none; cursor: pointer; &:checked { @svg: escape( @@ -263,17 +258,22 @@ } } - // video player background + /* video player background */ #player-container > .video-js > video, - // placeholder for loading thumbnails + /* placeholder for loading thumbnails */ .vjs-poster { & when (@styleVideoPlayer = 1) { background-color: @mantle !important; } } + + /* watch progress on videos */ + div.watched-indicator { + background-color: @red; + } } - // synced colorscheme + /* synced colorscheme */ @media (prefers-color-scheme: light) { .no-theme { #catppuccin(@lightFlavor, @accentColor); @@ -285,7 +285,7 @@ } } - // manually set colorscheme + /* manually set colorscheme */ .light-theme { #catppuccin(@lightFlavor, @accentColor); } diff --git a/styles/invokeai/catppuccin.user.css b/styles/invokeai/catppuccin.user.css index b1dfa59e5c..de34283c1f 100644 --- a/styles/invokeai/catppuccin.user.css +++ b/styles/invokeai/catppuccin.user.css @@ -15,120 +15,13 @@ @-moz-document regexp("http:\\/\\/(127\\.0\\.0\\.1|localhost):9090(.*)") { #catppuccin(@flavor, @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; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @@ -179,9 +72,9 @@ --tab-list-bg: @accent-color; --btn-delete-image: @red; --status-good-color: @green; - --status-good-color-glow: brighten(@green, 10%); + --status-good-color-glow: lighten(@green, 10%); --border-color-invalid: @red; - --box-shadow-color-invalid: brighten(@red, 5%); + --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; @@ -220,3 +113,4 @@ } } } +// vim:ft=less diff --git a/styles/lastfm/catppuccin.user.css b/styles/lastfm/catppuccin.user.css index aeffd4a9f8..f01c20d88c 100644 --- a/styles/lastfm/catppuccin.user.css +++ b/styles/lastfm/catppuccin.user.css @@ -11,125 +11,17 @@ @preprocessor less @var select flavor "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 removepromos "Remove Advertisements" 1 ==/UserStyle== */ @-moz-document domain("last.fm") { #catppuccin(@flavor, @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; - }; - }; + @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; }; + } @rgb-raw: #fff; #rgbify(@color) { @@ -167,7 +59,7 @@ @accent-dim: fadeout(@accent, 0.5); - & not when (@lookup = latte) { + & when not (@lookup = latte) { color-scheme: dark; .layout-image { background: @base; @@ -191,15 +83,15 @@ .cover-art { background: @base; } - .avatar:after, - .cover-art:after, - .image-list-item:after, - .video-thumbnail:after { + .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------*/ + /* ------UNIVERSAL STYLES INCASE SOME GET MISSED------ */ body { color: @text; } @@ -209,28 +101,15 @@ .mimic-link { color: @sapphire; } - /*-----------CHECKBOXES AND RADIOS----------*/ - .lfm-form-radio input[type="radio"]:checked + label:before { - border: 1px solid @accent; + /* -----------CHECKBOXES AND RADIOS---------- */ + .lfm-form-radio input[type="radio"]:checked + label::before { + border-color: @accent; box-shadow: inset 0 0 0 4px @accent; background-color: @base; } - .lfm-form-radio input[type="radio"] + label:before { + .lfm-form-radio input[type="radio"] + label::before { background-color: @crust; - border: 2px solid @surface1; - } - /*-----------REMOVE PRO SUBSCRIPTION REMINDERS------*/ - if removepromos { - .your-progress .buffer-2, - .secondary-nav-item--month, - .secondary-nav-item--year, - .auth-dropdown-pro-text { - display: none !important; - } - .listening-report-promo--month, - .listening-report-promo--year { - display: none !important; - } + border-color: @surface1; } /* HOME PAGE */ @@ -243,7 +122,7 @@ .content-top-has-nav .content-top::after, .two-column-layout .content-top::after { - border-top: 1px solid @accent-dim; + border-top-color: @accent-dim; } .homefeed .content-top .secondary-nav-item-link--active, @@ -284,7 +163,7 @@ .homefeed--events .content-top .secondary-nav-item-link--active::after { background-color: @accent-dim; } - .recs-feed .recs-feed-cover-image-wrap:after { + .recs-feed .recs-feed-cover-image-wrap::after { background-image: linear-gradient( 180deg, transparent 0, @@ -296,10 +175,9 @@ .recs-feed .context { background: @mantle; - box-shadow: - inset 1px 0 darken(@mantle, 3%), - inset -1px -1px @crust; color: @text; + box-shadow: none; + box-shadow: inset 1px 0 darken(@mantle, 3%), inset -1px -1px @crust; } .recs-feed .recs-feed-item { background: transparent; @@ -318,7 +196,7 @@ } .stationlink-list .stationlink::after { - border-bottom: 1px solid @accent-dim; + border-bottom-color: @accent-dim; } .stationlink-list .stationlink::before { @@ -406,29 +284,26 @@ } /* RECOMMENDATIONS */ - .recs-feed-title a { - color: @text !important; + & when not (@lookup = "latte") { + .recs-feed-title a { + color: @text !important; + } } - if (theme=="Latte") { + & when (@lookup = "latte") { .recs-feed-title a { color: @crust !important; } } - .recs-feed .context { - background: @mantle; - box-shadow: none; - color: @subtext1; - } - .recs-feed-item--artist .context:after, - .recs-feed .recs-feed-item--artist .recs-feed-avatar:after { + .recs-feed-item--artist .context::after, + .recs-feed .recs-feed-item--artist .recs-feed-avatar::after { background-color: fadeout(@yellow, 1) !important; } - .recs-feed-item--album .context:after, - .recs-feed .recs-feed-item--album .recs-feed-avatar:after { + .recs-feed-item--album .context::after, + .recs-feed .recs-feed-item--album .recs-feed-avatar::after { background-color: fadeout(@green, 1) !important; } - .recs-feed-item--track .context:after, - .recs-feed .recs-feed-item--track .recs-feed-avatar:after { + .recs-feed-item--track .context::after, + .recs-feed .recs-feed-item--track .recs-feed-avatar::after { background-color: fadeout(@blue, 1) !important; } .secondary-nav { @@ -486,9 +361,7 @@ } .js-link-block.globalchart-item { background-color: @crust; - box-shadow: - 0 1px @base, - inset 0 -1px @base; + box-shadow: 0 1px @base, inset 0 -1px @base; } .globalchart a, .globalchart a:focus, @@ -499,9 +372,6 @@ .footer-top-row { background-color: @mantle; } - .two-column-layout .container { - background-color: #00000000; - } /* EVENTS */ .events-filter, @@ -512,7 +382,7 @@ } .events-filters { - border-bottom: 1px solid @accent; + border-bottom-color: @accent; } .events-list-item-venue--address, @@ -626,7 +496,7 @@ border-color: @crust !important; } - @-webkit-keyframes AnimationName { + @keyframes chartlist-anim { 0% { background-position: 0% 50%; } @@ -637,7 +507,7 @@ background-position: 0% 50%; } } - @-moz-keyframes AnimationName { + @keyframes chartlist-anim { 0% { background-position: 0% 50%; } @@ -648,7 +518,7 @@ background-position: 0% 50%; } } - @keyframes AnimationName { + @keyframes chartlist-anim { 0% { background-position: 0% 50%; } @@ -662,12 +532,12 @@ .chartlist-row--highlight, .chartlist-row--now-scrobbling { - /*background-color: #5a1717;*/ + /* background-color: #5a1717; */ background: linear-gradient(270deg, @base 60%, rgba(@accent, 0.2)); background-size: 200% 200%; - -webkit-animation: AnimationName 10s ease infinite; - -moz-animation: AnimationName 10s ease infinite; - animation: AnimationName 10s ease infinite; + -webkit-animation: chartlist-anim 10s ease infinite; + -moz-animation: chartlist-anim 10s ease infinite; + animation: chartlist-anim 10s ease infinite; } .chartlist-name, @@ -677,17 +547,15 @@ .chartlist-break::after, .chartlist-row::after { - border-bottom: 1px solid @surface0; + border-bottom-color: @surface0; } .chartlist-row:hover { background-color: @crust; } - .chartlist-count-bar-slug { - background-color: transparent !important; - } .chartlist-count-bar-slug { + background-color: transparent !important; background-image: linear-gradient(to right, @accent, @accent); color: @crust; } @@ -728,13 +596,13 @@ } .chartlist tr:nth-child(1) td.chartlist-index { - font-weight: bold; color: @accent; } /* LISTENING REPORT */ .user-dashboard-module { background-color: @base !important; + border-color: @accent-dim; } .highcharts-background { fill: @base !important; @@ -743,7 +611,7 @@ .scrobble-stats-info { color: @text; } - .user-dashboard-legend-item:before { + .user-dashboard-legend-item::before { background: transparent !important; } .user-dashboard-legend-item--current::before { @@ -766,13 +634,13 @@ } .listening-report-top .secondary-nav { - border-bottom: 1px solid @overlay0; + border-bottom-color: @overlay0; } .listening-report-brick { - border: 1px solid @overlay0; + border-color: @overlay0; &:focus, &:hover { - border: 1px solid @overlay0; + border-color: @overlay0; box-shadow: none; } } @@ -789,7 +657,6 @@ .duration-data, .duration-data-value > .js-ticker, - .user-dashboard-small-data-point-value > .js-ticker, .user-dashboard-small-data-point-value > .js-ticker { color: @text; } @@ -800,20 +667,12 @@ fill: @accent; } - .user-dashboard-module { - background: @crust; - border-color: @accent-dim; - } - .user-dashboard-loved-tracks .user-dashboard-big-datapoint-value a { color: @crust; } .user-dashboard-catalogue-item-total a { - text-shadow: - -1px -1px 0 @crust, - 1px -1px 0 @crust, - -1px 1px 0 @crust, + text-shadow: -1px -1px 0 @crust, 1px -1px 0 @crust, -1px 1px 0 @crust, 1px 1px 0 @crust; } @@ -846,10 +705,6 @@ color: @subtext0; } - .highcharts-background { - fill: @crust; - } - .user-dashboard-module-title.js-user-dashboard-module-title { color: @accent; } @@ -876,7 +731,7 @@ color: @subtext0; } - /* Listening Clock*/ + /* Listening Clock */ #SvgjsG1144 { stroke: @crust; } @@ -919,23 +774,23 @@ color: @text; } .user-follow, - .user-follow:after { + .user-follow::after { color: @accent; background-color: @surface0; } - /* FOLLOW BUTTON*/ + /* FOLLOW BUTTON */ [data-toggle-button-current-state="unfollowed"] - .header-follower-btn:before { + .header-follower-btn::before { background-color: @red; color: @text; } - [data-toggle-button-current-state="followed"] .header-follower-btn:before { + [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 { + .header-follower-btn:hover::before { background-color: @red; color: @text; } @@ -954,7 +809,7 @@ fill: @surface1; } .tasteometer-avatar img { - border: 2px solid @surface1; + border-color: @surface1; } .tasteometer-compat-very_low .tasteometer-compat-Color { color: @subtext0; @@ -1066,7 +921,7 @@ color: @text; } .shout { - border-bottom: 1px solid @surface0; + border-bottom-color: @surface0; } .shout-container--active { background-color: fadeout(@surface1, 0.3); @@ -1075,13 +930,13 @@ color: @text; } .shout-form { - border: none; + border-color: none; } .js-playlink-station.desktop-playlink.inline-section-control.stationlink { color: @text; } - .section-with-settings .section-control:before { - border-right: 1px solid @subtext0; + .section-with-settings .section-control::before { + border-right-color: @subtext0; } .header-metadata .header-metadata-display a { @@ -1227,7 +1082,7 @@ .content-form select, .content-form textarea { background-color: @crust; - border: 1px solid @crust; + border-color: @crust; color: @subtext0; } @@ -1241,7 +1096,7 @@ .content-form select:focus, .content-form textarea:focus { box-shadow: none; - border: 1px solid @crust; + border-color: @crust; } .content-form .form-control:hover:not([disabled]), .content-form input[type="date"]:hover:not([disabled]), @@ -1254,7 +1109,7 @@ .content-form textarea:hover:not([disabled]), .content-form .inplace-field, .inplace-field { - border: 1px solid @crust; + border-color: @crust; color: @text; } .control-label { @@ -1268,9 +1123,9 @@ 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 { + .secondary-nav-item-link--active::after, + a.secondary-nav-item-link:focus::after, + a.secondary-nav-item-link:hover::after { background-color: @accent; } @@ -1343,7 +1198,7 @@ .inbox-message-view .inbox-message-message blockquote { background: @crust; - border: 1px solid @accent; + border-color: @accent; } body:not([data-whatinput="touch"]) @@ -1389,7 +1244,7 @@ .your-progress { color: @text; } - /*----Profile Cards Hide-------*/ + /* ----Profile Cards Hide------- */ .profile-cards-container { display: none !important; } @@ -1398,7 +1253,7 @@ .header--sub-page { color: @text; } - /*-----Primary Button------*/ + /* -----Primary Button------ */ .btn-primary, .btn-primary:hover, .btn-primary:active, @@ -1421,14 +1276,14 @@ background-color: @accent-dim !important; color: @base !important; } - /*-----Shortcut Button------*/ + /* -----Shortcut Button------ */ .btn-shortcut, .btn-shortcut:hover, .btn-shortcut:active { background-color: @accent-dim !important; color: @text !important; } - /*------FOOTER-----*/ + /* ------FOOTER----- */ .footer .footer-heading { color: @subtext1; } @@ -1437,7 +1292,7 @@ color: @text; } .footer .footer-bottom { - border-top: none; + border-top-color: none; } .footer .footer-bottom .row { background-color: @mantle; @@ -1452,17 +1307,21 @@ .footer .footer-legal { color: @overlay0; } - /*--------TOP BAR----------*/ + /* --------TOP BAR---------- */ .top-bar, .player-bar, - .main-content:before, + .player-bar .player-bar-progress, + .main-content::before, .masthead-nav { background: @mantle; color: @text !important; } + .player-bar .player-bar-progress-slug { + background: @accent; + } .masthead-nav-control, .site-auth-control, - .site-auth--anon:before, + .site-auth--anon::before, .masthead-nav .navlist-more { color: @text !important; } @@ -1507,16 +1366,16 @@ .masthead-search-field { color: @text; } - /*-------PLAYLISTS---------*/ + /* -------PLAYLISTS--------- */ .chartlist-timestamp { color: @subtext0; } - /*-----GENRES TODAY-----*/ + /* -----GENRES TODAY----- */ .genretodaybar, .rolling_no { background: @mantle !important; } - /*-----NAV ITEMS-----*/ + /* -----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, @@ -1524,7 +1383,7 @@ body:not([data-whatinput="touch"]) .catalogue-tags .tag a:hover { color: @accent !important; } - /*------ARTIST TAGS-----*/ + /* ------ARTIST TAGS----- */ .catalogue-tags .tag a, .catalogue-tags .tags-add, .catalogue-tags .tags-add-cta, @@ -1532,11 +1391,11 @@ color: @accent; box-shadow: inset 0 0 0 1px @accent-dim; } - /*-----HIDE PLAY BUTTON ON TOP TRACK------*/ - .image-overlay-playlink-link:before { + /* -----HIDE PLAY BUTTON ON TOP TRACK------ */ + .image-overlay-playlink-link::before { display: none; } - /*---------CHARTS FIX---------*/ + /* ---------CHARTS FIX--------- */ .globalchart .globalchart-item:first-child { background-color: fadeout(@mantle, 0.8); } @@ -1546,7 +1405,7 @@ .globalchart-item .globalchart-rank { color: @text; } - /*-------LOG IN PAGE-------*/ + /* -------LOG IN PAGE------- */ .auth-container > .auth-container-animation { background-color: transparent; } @@ -1560,7 +1419,7 @@ color: @text; } - /*----ICONS----*/ + /* ----ICONS---- */ .lazy-buylinks-toggle::before { background-image: none !important; mask-image: url("/static/images/icons/download_sprite_16.2d7999c89e09.png"); @@ -1575,10 +1434,10 @@ background-color: @text; } - .lazy-buylinks-toggle:hover:before, - .lazy-buylinks-toggle:focus:before, - .chartlist-more-button:hover:before, - .chartlist-more-button:focus:before { + .lazy-buylinks-toggle:hover::before, + .lazy-buylinks-toggle:focus::before, + .chartlist-more-button:hover::before, + .chartlist-more-button:focus::before { background-color: @subtext0; } @@ -1592,16 +1451,16 @@ -webkit-mask-position: 0 0; } - .chartlist-love-button:focus:before, - .chartlist-love-button:hover:before, + .chartlist-love-button:focus::before, + .chartlist-love-button:hover::before, .header-new-love-button:focus::before, .header-new-love-button:hover::before { mask-position: -24px 0; background-color: @red; } - [data-toggle-button-current-state="loved"] .chartlist-love-button:before, - [data-toggle-button-current-state="loved"] .header-new-love-button:before { + [data-toggle-button-current-state="loved"] .chartlist-love-button::before, + [data-toggle-button-current-state="loved"] .header-new-love-button::before { mask-position: -552px 0; transition: mask-position 0.7s steps(23) !important; -webkit-transition: -webkit-mask-position 0.7s steps(23) !important; @@ -1609,9 +1468,9 @@ } [data-toggle-button-current-state="loved"] - .chartlist-love-button:focus:before, + .chartlist-love-button:focus::before, [data-toggle-button-current-state="loved"] - .chartlist-love-button:hover:before, + .chartlist-love-button:hover::before, [data-toggle-button-current-state="loved"] .header-new-love-button:focus::before, [data-toggle-button-current-state="loved"] @@ -1634,10 +1493,10 @@ background-color: @text; } - .section-settings-toggle:hover:before, - .section-settings-toggle:focus:before, - .share-button-profile:hover:before, - .share-button-profile:focus:before { + .section-settings-toggle:hover::before, + .section-settings-toggle:focus::before, + .share-button-profile:hover::before, + .share-button-profile:focus::before { background-color: @subtext0; } @@ -1679,8 +1538,8 @@ background-color: @text; } - .masthead-search-toggle:hover:before, - .masthead-search-toggle:focus:before { + .masthead-search-toggle:hover::before, + .masthead-search-toggle:focus::before { background-color: @subtext0; } @@ -1691,8 +1550,8 @@ background-color: @text; } - .masthead-search-toggle.disclose-active:hover:before, - .masthead-search-toggle.disclose-active:focus:before { + .masthead-search-toggle.disclose-active:hover::before, + .masthead-search-toggle.disclose-active:focus::before { background-color: @subtext0; } @@ -1733,3 +1592,4 @@ } } } +// vim:ft=less diff --git a/styles/libreddit/catppuccin.user.css b/styles/libreddit/catppuccin.user.css index 8145280322..d6ff85e05e 100644 --- a/styles/libreddit/catppuccin.user.css +++ b/styles/libreddit/catppuccin.user.css @@ -73,120 +73,13 @@ domain("libreddit.foss.wtf"), domain("libreddit.encrypted-data.xyz"), domain("libreddit.eu.org"), domain("l.opnxng.com") { + /* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } .light, .gruvboxlight { @@ -236,21 +129,20 @@ domain("l.opnxng.com") { @crust: @catppuccin[@@lookup][@crust]; @accent-color: @catppuccin[@@lookup][@@accent]; - & { - --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; + --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; - } + --nsfw: @peach !important; + --admin: @maroon !important; } } +// vim:ft=less diff --git a/styles/linkedin/catppuccin.user.css b/styles/linkedin/catppuccin.user.css index a919b350ce..d30a4bbf9a 100644 --- a/styles/linkedin/catppuccin.user.css +++ b/styles/linkedin/catppuccin.user.css @@ -14,120 +14,13 @@ @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') { + /* 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; - @surface0: #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; - @surface0: #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; - @surface0: #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; - @surface0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @surface0: #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; @surface0: #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; @surface0: #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; @surface0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @@ -630,3 +523,4 @@ #catppuccin(@darkFlavor, @accentColor); } } +// vim:ft=less diff --git a/styles/mastodon/catppuccin.user.css b/styles/mastodon/catppuccin.user.css index ec51adb84f..c8e0f0b903 100644 --- a/styles/mastodon/catppuccin.user.css +++ b/styles/mastodon/catppuccin.user.css @@ -46,120 +46,13 @@ domain("wetdry.world") { } #mastodon(@lookup, @accent) { + /* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } @rosewater: @catppuccin[@@lookup][@rosewater]; @flamingo: @catppuccin[@@lookup][@flamingo]; @@ -456,7 +349,7 @@ domain("wetdry.world") { color: @accent-color; } - .status.collapsed .status__content:after { + .status.collapsed .status__content::after { background: linear-gradient(fadeout(@base, 100), @base); } @@ -479,7 +372,7 @@ domain("wetdry.world") { } .button.logo-button svg { - fill: currentColor; + fill: currentcolor; } .public-layout .header .nav-button { @@ -511,7 +404,8 @@ domain("wetdry.world") { .button.button-tertiary:hover, .button.logo-button:active, .button.logo-button:focus, - .button.logo-button:hover { + .button.logo-button:hover, + .announcements__item__unread { background: @accent-color; } @@ -554,7 +448,7 @@ domain("wetdry.world") { } .search__popout, - .dropdown-menu__arrow:before, + .dropdown-menu__arrow::before, .dropdown-menu__item a, .dropdown-menu__item button, .dropdown-menu__container__list, @@ -595,11 +489,11 @@ domain("wetdry.world") { .simple_form input[type="password"], .simple_form input[type="number"], .simple_form input[type="text"] { - border: 1px solid @crust; + border-color: @crust; } .simple_form input[type="email"]:required:valid { - border: 1px solid @green; + border-color: @green; } .simple_form input[type="password"], @@ -613,7 +507,7 @@ domain("wetdry.world") { .simple_form input[type="password"]:required:invalid:not(:placeholder-shown) { - border: 1px solid @red; + border-color: @red; } .simple_form select { @@ -622,7 +516,7 @@ domain("wetdry.world") { ); background: @mantle url("data:image/svg+xml,@{svg}") no-repeat right 8px center/auto 16px; - border: 1px solid @crust; + border-color: @crust; } .simple_form input[type="datetime-local"]:active, @@ -683,7 +577,7 @@ domain("wetdry.world") { } .table > thead > tr > th { - border-bottom: 2px solid @surface0; + border-bottom-color: @surface0; } .positive-hint { @@ -695,3 +589,4 @@ domain("wetdry.world") { } } } +// vim:ft=less diff --git a/styles/modrinth/catppuccin.user.css b/styles/modrinth/catppuccin.user.css index ad4e49304b..c915a4ed50 100644 --- a/styles/modrinth/catppuccin.user.css +++ b/styles/modrinth/catppuccin.user.css @@ -14,124 +14,13 @@ @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\\.|staging\\.|)modrinth\\.com.*") { + /* 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; - @shadow: #dbdfef; - }; - @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; - @shadow: #010409; - }; - @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; - @shadow: #010409; - }; - @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; - @shadow: #010409; - }; - }; + @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; @shadow: #dbdfef; }; + @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; @shadow: #010409; }; + @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; @shadow: #010409; }; + @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; @shadow: #010409; }; + } .light-mode { #catppuccin(@lightFlavor, @accentColor); @@ -172,34 +61,32 @@ @shadow: @catppuccin[@@lookup][@shadow]; @accent-Color: @catppuccin[@@lookup][@@accent]; - & { - --color-bg: @crust; - --color-ad-raised: @surface2; - --color-ad: @surface1; - --color-brand-green: @accent-Color; - --color-button-bg-active: @overlay0; - --color-button-bg-hover: @surface2; - --color-button-bg: @surface1; - --color-button-text-hover: @text; - --color-button-text: @subtext1; - --color-divider: @surface0; - --color-heading: @yellow; - --color-icon: @text; - --color-link-active: @teal; - --color-link-hover: @sky; - --color-link: @sapphire; - --color-raised-bg: @base; - --color-special-blue: @sapphire; - --color-special-orange: @peach; - --color-special-purple: @mauve; - --color-special-red: @red; - --color-text: @subtext1; - --color-text-inactive: @overlay1; - --color-brand-inverted: @shadow; - --color-text-dark: @text; - --color-table-alternate-row: @crust; - --color-table-border: @overlay0; - } + --color-bg: @crust; + --color-ad-raised: @surface2; + --color-ad: @surface1; + --color-brand-green: @accent-Color; + --color-button-bg-active: @overlay0; + --color-button-bg-hover: @surface2; + --color-button-bg: @surface1; + --color-button-text-hover: @text; + --color-button-text: @subtext1; + --color-divider: @surface0; + --color-heading: @yellow; + --color-icon: @text; + --color-link-active: @teal; + --color-link-hover: @sky; + --color-link: @sapphire; + --color-raised-bg: @base; + --color-special-blue: @sapphire; + --color-special-orange: @peach; + --color-special-purple: @mauve; + --color-special-red: @red; + --color-text: @subtext1; + --color-text-inactive: @overlay1; + --color-brand-inverted: @shadow; + --color-text-dark: @text; + --color-table-alternate-row: @crust; + --color-table-border: @overlay0; .BDVE3s9MFQttmbMUeYup-2 a b, .BDVE3s9MFQttmbMUeYup-2 a strong { @@ -207,3 +94,4 @@ } } } +// vim:ft=less diff --git a/styles/nitter/catppuccin.user.css b/styles/nitter/catppuccin.user.css index 962a862aae..ecbb730abe 100644 --- a/styles/nitter/catppuccin.user.css +++ b/styles/nitter/catppuccin.user.css @@ -29,120 +29,13 @@ } } + /* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frapp: { @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; }; + } #rgbify(@color) { @rgb-raw: red(@color) green(@color) blue(@color); @@ -177,56 +70,43 @@ @crust: @catppuccin[@@lookup][@crust]; @accent: @catppuccin[@@lookup][@@accentColor]; - & when (@lookup =latte) { - } - - & when not (@lookup =latte) { - } - - /*----------PREDEFINED COLORS-------------*/ + /* PREDEFINED COLORS */ + --bg_color: @mantle; + --fg_color: @text; + --fg_faded: @subtext1; + --fg_dark: @accent; + --fg_nav: @accent; + --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; + --accent_light: lighten(@accent, 10%); + --accent_dark: darken(@accent, 10%); + --accent_border: darken(@accent, 10%); + --play_button: @accent; + --play_button_hover: @accent; + --more_replies_dots: darken(@accent, 10%); + --error_red: @red; + --verified_blue: @blue; + --icon_text: @text; + --tab: @text; + --tab_selected: @accent; + --profile_stat: @text; + background-color: var(--bg_color); + color: var(--fg_color); + line-height: 1.3; + margin: 0; - & { - --bg_color: @mantle; - --fg_color: @text; - --fg_faded: @subtext1; - --fg_dark: @accent; - --fg_nav: @accent; - --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; - --accent_light: lighten(@accent, 10%); - --accent_dark: darken(@accent, 10%); - --accent_border: darken(@accent, 10%); - --play_button: @accent; - --play_button_hover: @accent; - --more_replies_dots: darken(@accent, 10%); - --error_red: @red; - --verified_blue: @blue; - --icon_text: @text; - --tab: @text; - --tab_selected: @accent; - --profile_stat: @text; - background-color: var(--bg_color); - color: var(--fg_color); - font-family: - Helvetica Neue, - Helvetica, - Arial, - sans-serif; - font-size: 14px; - line-height: 1.3; - margin: 0; - } - /*- Fix Poll Leader color -*/ + /* Fix Poll Leader color */ .poll-meter.leader { color: var(--bg_color); } } } +// vim:ft=less diff --git a/styles/nixos-search/catppuccin.user.css b/styles/nixos-search/catppuccin.user.css index 6b3ee7c230..20a49ab319 100644 --- a/styles/nixos-search/catppuccin.user.css +++ b/styles/nixos-search/catppuccin.user.css @@ -1,6 +1,6 @@ /* ==UserStyle== @name NixOS Search Catppuccin -@namespace github.com/catppuccin/userstyles/nixos-search +@namespace github.com/catppuccin/userstyles/styles/nixos-search @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/nixos-search @version 0.3.0 @description Soothing pastel theme for NixOS Search @@ -62,14 +62,13 @@ pre { color: @red; background-color: @surface0; - border: none; + border-color: @mantle; } a, a:hover, a:focus { color: @accent-color; - outline: none; } /* Navbar */ @@ -80,18 +79,18 @@ .navbar-inner { background-color: @mantle; background-image: none; - border: 1px solid @base; + border-color: @base; } .nav-tabs { - border-bottom: 1px solid @surface0; + border-bottom-color: @surface0; } .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus { background-color: @base; - border: 1px solid @surface0; + border-color: @surface0; color: @text; } @@ -103,7 +102,6 @@ .navbar .nav > li > a:focus, .navbar .nav > li > a:hover { color: @text; - border: none; } .navbar .nav > .active > a, @@ -117,7 +115,7 @@ .nav > li > a:hover, .nav > li > a:focus { background-color: @surface0; - border: 1px solid @surface0; + border-color: @surface0; } /* "Experimental" label */ @@ -135,11 +133,10 @@ text-shadow: none; box-shadow: none; color: @text; - border: 1px solid @base; + border-color: @base; } .btn:focus { - outline: none; color: @text; background-color: @surface1; } @@ -156,7 +153,7 @@ /* "Sort" menu */ .dropdown-menu { background-color: @mantle; - border: 1px solid @crust; + border-color: @crust; box-shadow: 0 5px 10px @mantle; } @@ -174,11 +171,11 @@ .dropdown-menu .divider { background-color: @surface0; - border-bottom: @surface0; + border-bottom-color: @surface0; } .dropdown .caret { - border-top: 4px solid @text; + border-top-color: @text; } /* Overrides menu item hover color */ @@ -217,7 +214,7 @@ .uneditable-input { background-color: @surface0; color: @text; - border: 1px solid @base; + border-color: @base; } textarea:focus, @@ -264,7 +261,7 @@ /* Search results */ .search-page > .search-results > div > :nth-child(2) > li { - border-bottom: 1px solid @surface0; + border-bottom-color: @surface0; } .search-page > .search-results > div > :nth-child(2) > li > :first-child { @@ -294,7 +291,6 @@ pre { color: @text; background-color: @mantle; - border: none; } .search-page @@ -325,7 +321,7 @@ > :nth-child(5) > :nth-child(2) div.tab-content { - border: 1px solid @surface0; + border-color: @surface0; } .search-page @@ -372,15 +368,12 @@ .pager li > span { color: @text; background-color: @surface0; - border: none; border-radius: 5px; } .pager li > a:hover, .pager li > a:focus { background-color: @surface1; - transition: all; - transition-duration: 5ms; } .pager .disabled > a, @@ -389,123 +382,16 @@ .pager .disabled > span { color: @text; background-color: @mantle; - border: none; border-radius: 5px; } } } +/* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; -}; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +} +// vim:ft=less diff --git a/styles/nixos.wiki/catppuccin.user.css b/styles/nixos.wiki/catppuccin.user.css index 0afebea536..0b563a7d5f 100644 --- a/styles/nixos.wiki/catppuccin.user.css +++ b/styles/nixos.wiki/catppuccin.user.css @@ -5,7 +5,7 @@ @version 0.0.1 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/nixos.wiki/catppuccin.user.css @description Soothing pastel theme for NixOS Wiki -@author Catppuccin Org +@author Catppuccin @license MIT @preprocessor less @@ -47,12 +47,10 @@ color-scheme: if(@lookup = latte, light, dark); } - html[data-darkreader-scheme="dark"] body:before { + html[data-darkreader-scheme="dark"] body::before { content: "Please turn off DarkReader for this domain when Catppuccin for NixOS Wiki is active."; background: @red; - box-shadow: - 0px 4px 16px fade(@crust, 10%), - 0px 8px 32px fade(@crust, 5%); + box-shadow: 0 4px 16px fade(@crust, 10%), 0 8px 32px fade(@crust, 5%); color: @crust; position: fixed; top: 0; @@ -74,7 +72,7 @@ color: @text; background-color: @mantle !important; background-image: none !important; - border: none !important; + border-color: transparent !important; .navbar-brand { color: @blue; @@ -337,3 +335,4 @@ @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 diff --git a/styles/paste.rs/catppuccin.user.css b/styles/paste.rs/catppuccin.user.css index 8e4a5a0b63..d68fca91f3 100644 --- a/styles/paste.rs/catppuccin.user.css +++ b/styles/paste.rs/catppuccin.user.css @@ -2,7 +2,7 @@ @name paste.rs Catppuccin @namespace github.com/catppuccin/userstyles/styles/paste.rs @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/paste.rs -@version 0.0.1 +@version 0.0.2 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/paste.rs/catppuccin.user.css @description Soothing pastel theme for paste.rs @author Catppuccin @@ -15,120 +15,13 @@ @-moz-document domain("paste.rs") { #catppuccin(@flavor, @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; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @@ -162,7 +55,6 @@ body { background-color: @mantle; color: @text; - font-family: sans-serif; } a { color: @accent; @@ -174,14 +66,14 @@ input[type="submit"] { background-color: @base; color: @text; - border: 1px solid @overlay0; + border-color: @overlay0; border-radius: 4px; } textarea:focus, select:focus, input[type="submit"]:focus { border-color: @accent; - outline: 1px solid @overlay0; + outline-color: @overlay0; } input[type="submit"]:hover { background-color: @mantle; @@ -195,11 +87,9 @@ span[style="color:#657b83;"] { color: @text !important; } - /**/ span[style="color:#859900;"] { color: @yellow !important; } - /**/ span[style="color:#268bd2;"] { color: @sky !important; } @@ -207,11 +97,9 @@ span[style="color:#93a1a1;"] { color: @overlay1 !important; } - /**/ span[style="color:#b58900;"] { color: @yellow !important; } - /**/ span[style="color:#586e75;"] { color: @mauve !important; } @@ -223,7 +111,6 @@ span[style="color:#2aa198;"] { color: @green !important; } - /**/ span[style="color:#6c71c4;"] { color: @teal !important; } @@ -241,3 +128,4 @@ } } } +// vim:ft=less diff --git a/styles/pinterest/catppuccin.user.css b/styles/pinterest/catppuccin.user.css index 76e84d4783..9dd0d7bfb0 100644 --- a/styles/pinterest/catppuccin.user.css +++ b/styles/pinterest/catppuccin.user.css @@ -63,7 +63,7 @@ } .Dl7 { - border: none !important; + border-color: transparent !important; } svg.ztu > path { @@ -83,8 +83,7 @@ h3, h5, div, - input[type="text"], - ai { + input[type="text"] { color: @text !important; } @@ -128,7 +127,7 @@ /** Mobile **/ div._he.urM.zI7.iyn.Hsu { - border: none !important; + border-color: transparent !important; } /* About */ @@ -265,7 +264,7 @@ textarea.Gnj.Hsu.tBJ.dyH.iFc.sAJ.L4E.Bvi.iyn.H_e.pBj.qJc.TKt.LJB, div.D8X.Hsu.tBJ.dyH.iFc.sAJ.L4E.Bvi.iyn.H_e.pBj.qJc.TKt.LJB.xD4.BMi.rNx { background-color: @mantle; - border: none !important; + border-color: transparent !important; } /** Mobile **/ @@ -357,7 +356,7 @@ } div[data-test-id="gestalt-avatar-svg"] { - border: none !important; + border-color: transparent !important; & div.INd.XiG._HI.zI7.iyn.Hsu { background-color: @crust !important; & svg > text { @@ -379,7 +378,7 @@ } div.INd.Jea.KS5.mQ8.zI7.iyn.Hsu[style="height: 30px; width: 30px; border: 2px solid rgb(17, 17, 17);"] { - border: 2px solid @mantle !important; + border-color: @mantle !important; } div.Jea.KS5.MtH.jzS.kKU.zI7.iyn.Hsu { @@ -674,7 +673,7 @@ } div.XiG._HI.s2n.sLG.zI7.iyn.Hsu { - border: 2px solid @mantle !important; + border-color: @mantle !important; } button.ope.ujU.e43.adn.BG7.CCY.zHr.qJc @@ -691,7 +690,7 @@ background-color: @mantle !important; color: @text !important; caret-color: @text !important; - border: none !important; + border-color: transparent !important; } input[style="min-width: 0px; flex: 1 1 0%; font-size: 16px; color: rgb(51, 51, 51); border: 0px; outline: none; box-sizing: border-box; padding: 0px;"] { @@ -763,12 +762,12 @@ } div.JME.Jea.KS5.fev.zI7.iyn.Hsu { - border: none !important; + border-color: transparent !important; } div.LJB.Pw5.daS.fev.urM.zI7.iyn.Hsu { background-color: @mantle !important; - border: none !important; + border-color: transparent !important; } div.Jea.OVX.jzS.ujU.zI7.iyn.Hsu & textarea { @@ -779,7 +778,7 @@ div[data-test-id="contact-search-field"] & input { background-color: @mantle !important; - border: none !important; + border-color: transparent !important; } div.INd.IVF.Jea.KS5.mQ8.wc1.zI7.iyn.Hsu { @@ -807,7 +806,7 @@ div.Eqh.HFo.INd.JME.Jea.VxL.Zr3.hUC.hjj.jar.zI7.iyn.Hsu { background-color: @base !important; - border: none !important; + border-color: transparent !important; & svg > path { fill: @text !important; } @@ -972,15 +971,11 @@ } @media (prefers-color-scheme: light) { - & { - #catppuccin(@lightFlavor, @accentColor); - } + #catppuccin(@lightFlavor, @accentColor); } @media (prefers-color-scheme: dark) { - & { - #catppuccin(@darkFlavor, @accentColor); - } + #catppuccin(@darkFlavor, @accentColor); } -} /* /@-moz-document */ +} // vim:ft=less diff --git a/styles/planet-minecraft/catppuccin.user.css b/styles/planet-minecraft/catppuccin.user.css index a40fafda79..82190b5611 100644 --- a/styles/planet-minecraft/catppuccin.user.css +++ b/styles/planet-minecraft/catppuccin.user.css @@ -14,183 +14,102 @@ @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") { + /* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } #catppuccin(@lookup, @accent) { - & { - --body-bg: @catppuccin[@@lookup][@crust]; - --header-bg: @catppuccin[@@lookup][@base]; - --content-bg: @catppuccin[@@lookup][@surface0]; - --container-bg: @catppuccin[@@lookup][@base]; - --menu-bg: @catppuccin[@@lookup][@surface0]; - --menu-color: @catppuccin[@@lookup][@subtext1]; - --menu-selected-bg: @catppuccin[@@lookup][@surface1]; - --menu-selected-color: @catppuccin[@@lookup][@@accent]; - --footer-bg: @catppuccin[@@lookup][@mantle]; - --bg-navbar: @catppuccin[@@lookup][@mantle]; - --tab-selected: @catppuccin[@@lookup][@@accent]; - --input-bg: @catppuccin[@@lookup][@surface0]; - --dark-mid-bg: @catppuccin[@@lookup][@base]; - --title-color: @catppuccin[@@lookup][@text]; - --text-color: @catppuccin[@@lookup][@text]; - --text-color-medium: @catppuccin[@@lookup][@subtext0]; - --text-color-light: @catppuccin[@@lookup][@subtext1]; - --border-color: @catppuccin[@@lookup][@base]; - --footer-a-color: @catppuccin[@@lookup][@@accent]; - --nav-hover: @catppuccin[@@lookup][@@accent]; - --stat-color: @catppuccin[@@lookup][@red]; - --a-color: @catppuccin[@@lookup][@@accent]; - --a-hover: @catppuccin[@@lookup][@@accent]; - --a-selected: fade(@catppuccin[@@lookup][@@accent], 80%); - --tab-hover: fade(@catppuccin[@@lookup][@@accent], 80%); - --tab-color: @catppuccin[@@lookup][@subtext0]; - --nav-color: @catppuccin[@@lookup][@text]; - --widget-wrap-bg: @catppuccin[@@lookup][@mantle]; - --shine-start: @catppuccin[@@lookup][@surface2]; - --shine-end: @catppuccin[@@lookup][@surface1]; - --widget-bg: @catppuccin[@@lookup][@surface0]; - --light-bg: @catppuccin[@@lookup][@surface0]; - --medium-bg: @catppuccin[@@lookup][@crust]; - --toolbar-bg: @catppuccin[@@lookup][@surface0]; - --shine-highlight: @catppuccin[@@lookup][@surface0]; - --border-color-light: @catppuccin[@@lookup][@surface0]; - --site-border-color: @catppuccin[@@lookup][@surface0]; - --graphic-bg: @catppuccin[@@lookup][@surface0]; - --notice-bg: @catppuccin[@@lookup][@overlay0]; - --notice-color: @catppuccin[@@lookup][@text]; - --menu-disabled-color: @catppuccin[@@lookup][@crust]; - --control-bg: @catppuccin[@@lookup][@@accent]; - --a-visited: @catppuccin[@@lookup][@@accent]; - --nav-bar-border: none; - --feed-alt-bg: @catppuccin[@@lookup][@surface1]; - --nav-selected: @catppuccin[@@lookup][@@accent]; - } + @rosewater: @catppuccin[@@lookup][@rosewater]; + @flamingo: @catppuccin[@@lookup][@flamingo]; + @pink: @catppuccin[@@lookup][@pink]; + @mauve: @catppuccin[@@lookup][@mauve]; + @red: @catppuccin[@@lookup][@red]; + @maroon: @catppuccin[@@lookup][@maroon]; + @peach: @catppuccin[@@lookup][@peach]; + @yellow: @catppuccin[@@lookup][@yellow]; + @green: @catppuccin[@@lookup][@green]; + @teal: @catppuccin[@@lookup][@teal]; + @sky: @catppuccin[@@lookup][@sky]; + @sapphire: @catppuccin[@@lookup][@sapphire]; + @blue: @catppuccin[@@lookup][@blue]; + @lavender: @catppuccin[@@lookup][@lavender]; + @text: @catppuccin[@@lookup][@text]; + @subtext1: @catppuccin[@@lookup][@subtext1]; + @subtext0: @catppuccin[@@lookup][@subtext0]; + @overlay2: @catppuccin[@@lookup][@overlay2]; + @overlay1: @catppuccin[@@lookup][@overlay1]; + @overlay0: @catppuccin[@@lookup][@overlay0]; + @surface2: @catppuccin[@@lookup][@surface2]; + @surface1: @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-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: 3px solid @catppuccin[@@lookup][@@accent]; + border-bottom-color: @accent-color; } .site_btn_secondary { - color: @catppuccin[@@lookup][@subtext1]; - background: @catppuccin[@@lookup][@surface1]; + color: @subtext1; + background: @surface1; &:hover { - color: @catppuccin[@@lookup][@@accent]; - background: fade(@catppuccin[@@lookup][@surface1], 80%); + color: @accent-color; + background: fade(@surface1, 80%); } } @@ -201,26 +120,26 @@ .pagination p > span.pagination_page, .vert_menu > ul > li:only-child > a.current_select, .vert_menu > ul > li > a.current_select { - color: @catppuccin[@@lookup][@base]; - background: @catppuccin[@@lookup][@@accent]; - &:not(:disabled):not([data-disabled="disabled"]):hover { - background: fade(@catppuccin[@@lookup][@@accent], 80%); + color: @base; + background: @accent-color; + &:not(:disabled, [data-disabled="disabled"]):hover { + background: fade(@accent-color, 80%); } } #profile-bar #profile-actions .togglable.selected { - background: @catppuccin[@@lookup][@@accent]; - color: @catppuccin[@@lookup][@base]; + background: @accent-color; + color: @base; } .tipso_bubble .bottom { - background: @catppuccin[@@lookup][@surface0] !important; + 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: @catppuccin[@@lookup][@text] !important; + background: @text !important; box-shadow: none !important; } @@ -229,18 +148,45 @@ --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: @catppuccin[@@lookup][@base] !important; + background: @base !important; box-shadow: none !important; } } #display_modes a.selected, #display_modes a:hover { - background: @catppuccin[@@lookup][@@accent]; + background: @accent-color; } .navigation-wrap .navmenu a { @@ -262,7 +208,7 @@ > .material-btn.mem_submit .material-icons, #mobileRightPanel .sidr-inner > ul > li > a.mem_submit .material-icons { - color: @catppuccin[@@lookup][@green] !important; + color: @green !important; } #header @@ -317,121 +263,90 @@ > li > a[data-alert="1"].mem_tickets .material-icons { - color: @catppuccin[@@lookup][@yellow]; + color: @yellow; } .material-icons, .mem_submit > span, .mem_notifications > span { - color: @catppuccin[@@lookup][@text] !important; + color: @text !important; } .green { - background: @catppuccin[@@lookup][@green]; - color: @catppuccin[@@lookup][@base]; + background: @green; + color: @base; & .material-icons { - color: @catppuccin[@@lookup][@base]; + color: @base; } } - .content-actions li:not(:only-child):not(:first-child) { + .content-actions li:not(:only-child, :first-child) { border-top: none; } - & when (@lookup = latte) { - .content-actions li { - background: @catppuccin[@@lookup][@surface0]; - - & a, - .link, - .js_link, - .js_link_m { - color: @catppuccin[@@lookup][@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: @catppuccin[@@lookup][@text] !important; - } - - color: @catppuccin[@@lookup][@text] !important; - background: @catppuccin[@@lookup][@@accent] !important; - } - - .content-actions li .material-icons { - color: @catppuccin[@@lookup][@subtext0] !important; - } - } - - & when not (@lookup = latte) { - .content-actions li { - background: @catppuccin[@@lookup][@surface0]; - - & a, - .link, - .js_link, - .js_link_m { - color: @catppuccin[@@lookup][@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: @catppuccin[@@lookup][@@accent] !important; - } - color: @catppuccin[@@lookup][@@accent] !important; - background: @catppuccin[@@lookup][@surface1] !important; - } - - .content-actions li .material-icons { - color: @catppuccin[@@lookup][@subtext0] !important; - } - } - .tipso_content, .member_profile_card_right { - background: @catppuccin[@@lookup][@surface0]; + background: @surface0; } .tipso_arrow { - border-color: @catppuccin[@@lookup][@surface0]; + border-color: @surface0; } #popular-reel .caption { & when (@lookup = latte) { - background: fade(@catppuccin[@@lookup][@text], 50%) !important; + background: fade(@text, 50%) !important; .pop-title { - color: @catppuccin[@@lookup][@base] !important; + color: @base !important; text-shadow: none; } .caption-subtitle { - color: @catppuccin[@@lookup][@crust] !important; + color: @crust !important; text-shadow: none; } } & when not (@lookup = latte) { - background: fade(@catppuccin[@@lookup][@base], 50%) !important; + background: fade(@base, 50%) !important; .pop-title { - color: @catppuccin[@@lookup][@text] !important; + color: @text !important; text-shadow: none; } .caption-subtitle { - color: @catppuccin[@@lookup][@subtext0] !important; + 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; + } } } @@ -444,7 +359,7 @@ input:focus, select:focus, textarea:focus { - border: 1px solid @catppuccin[@@lookup][@@accent]; + border-color: @accent-color; } } @@ -457,4 +372,4 @@ } } -/* /@-moz-document */ +// vim:ft=less diff --git a/styles/proton/catppuccin.user.css b/styles/proton/catppuccin.user.css index aec596fe4c..2b7e713891 100644 --- a/styles/proton/catppuccin.user.css +++ b/styles/proton/catppuccin.user.css @@ -18,120 +18,13 @@ #catppuccin(@flavor, @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; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @@ -216,7 +109,7 @@ &, .ui-prominent, .ui-standard { - .lightenOrDarken(@color, @value) { + #lightenOrDarken(@color, @value) { @result: if( @flavor=latte, lighten(@color, @value), @@ -226,37 +119,37 @@ --primary: @accent-Color; --primary-contrast: @mantle; - --signal-danger-minor-2: .lightenOrDarken(@maroon, 40%) [ @result]; - --signal-danger-minor-1: .lightenOrDarken(@maroon, 30%) [ @result]; + --signal-danger-minor-2: #lightenOrDarken(@maroon, 40%) [ @result]; + --signal-danger-minor-1: #lightenOrDarken(@maroon, 30%) [ @result]; --signal-danger: @maroon; --signal-danger-major-1: saturate(@maroon, 40%); --signal-danger-major-2: saturate(@maroon, 30%); --signal-danger-major-3: saturate(@maroon, 20%); --signal-danger-contrast: @mantle; - --signal-warning-minor-2: .lightenOrDarken(@peach, 40%) [ @result]; - --signal-warning-minor-1: .lightenOrDarken(@peach, 30%) [ @result]; + --signal-warning-minor-2: #lightenOrDarken(@peach, 40%) [ @result]; + --signal-warning-minor-1: #lightenOrDarken(@peach, 30%) [ @result]; --signal-warning: @peach; --signal-warning-major-1: saturate(@peach, 40%); --signal-warning-major-2: saturate(@peach, 30%); --signal-warning-major-3: saturate(@peach, 20%); --signal-warning-contrast: @mantle; - --signal-success-minor-2: .lightenOrDarken(@green, 40%) [ @result]; - --signal-success-minor-1: .lightenOrDarken(@green, 30%) [ @result]; + --signal-success-minor-2: #lightenOrDarken(@green, 40%) [ @result]; + --signal-success-minor-1: #lightenOrDarken(@green, 30%) [ @result]; --signal-success: @green; --signal-success-major-1: saturate(@green, 40%); --signal-success-major-2: saturate(@green, 30%); --signal-success-major-3: saturate(@green, 20%); --signal-success-contrast: @mantle; - --signal-info-minor-2: .lightenOrDarken(@blue, 40%) [ @result]; - --signal-info-minor-1: .lightenOrDarken(@blue, 30%) [ @result]; + --signal-info-minor-2: #lightenOrDarken(@blue, 40%) [ @result]; + --signal-info-minor-1: #lightenOrDarken(@blue, 30%) [ @result]; --signal-info: @blue; --signal-info-major-1: saturate(@blue, 40%); --signal-info-major-2: saturate(@blue, 30%); --signal-info-major-3: saturate(@blue, 20%); --signal-info-contrast: @mantle; - --interaction-norm-minor-2: .lightenOrDarken(@accent-Color, 40%) [ + --interaction-norm-minor-2: #lightenOrDarken(@accent-Color, 40%) [ @result]; - --interaction-norm-minor-1: .lightenOrDarken(@accent-Color, 30%) [ + --interaction-norm-minor-1: #lightenOrDarken(@accent-Color, 30%) [ @result]; --interaction-norm: @accent-Color; --interaction-norm-major-1: saturate(@accent-Color, 30%); @@ -329,3 +222,4 @@ } } } +// vim:ft=less diff --git a/styles/quizlet/catppuccin.user.css b/styles/quizlet/catppuccin.user.css index 01613b48a9..034da992aa 100644 --- a/styles/quizlet/catppuccin.user.css +++ b/styles/quizlet/catppuccin.user.css @@ -2,7 +2,7 @@ @name Quizlet Catppuccin @namespace github.com/catppuccin/userstyles/styles/quizlet @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/quizlet -@version 0.0.1 +@version 0.0.2 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/quizlet/catppuccin.user.css @description Soothing pastel theme for Quizlet @author Catppuccin @@ -15,120 +15,13 @@ @-moz-document domain("quizlet.com") { #catppuccin(@flavor, @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; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @@ -178,14 +71,15 @@ } .s19dmjr1 { - border: none; + border-color: none; + background: @surface0; } .NavigationTab--span { color: @text !important; } - .s13oqxd2.NavigationTab:not(.no-highlight:after) { + .s13oqxd2.NavigationTab:not(.no-highlight::after) { background: @overlay2; } @@ -233,12 +127,15 @@ .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, @@ -247,13 +144,6 @@ background-color: @red; } - .UIButton--borderless, - .UIButton--borderless:visited, - html.touch .UIButton--borderless:focus:hover:not(:active) { - background-color: initial; - color: inherit; - } - .h1ebmrjk { background: linear-gradient(180deg, #0000 69.83%, @base 100%); } @@ -288,20 +178,16 @@ } .CourseOverviewPreviewCard-divider { - border: 0.0625rem solid @mantle; - } - - .AssemblySecondaryButton { - background-color: @crust; + border-color: @mantle; } .AssemblyPrimaryButton--default { background-color: @crust; - border: 0.0625rem solid @text; + border-color: @text; } .c1vierhv { - border: 0.125rem dashed @overlay2; + border-color: @overlay2; } .djzjpyv { @@ -353,7 +239,7 @@ } .UIBaseCardHeader-thumbnail { - border: @mantle; + border-color: @mantle; } .a1s81tf6 { @@ -393,6 +279,7 @@ } .AssemblySecondaryButton { + background-color: @crust; color: @text; } @@ -430,13 +317,13 @@ } .SiteActivity-button { - border: 0.0625rem solid @overlay2; + border-color: @overlay2; color: @text; } .SiteActivity-button:focus, .SiteActivity-button:hover { - border: 0.0625rem solid @overlay0; + border-color: @overlay0; color: @subtext1; } @@ -451,7 +338,7 @@ .UILinkBox-link .UILink:active, .UILinkBox-link .UILink:focus, .UILinkBox-link .UILink:hover { - border-bottom: 0.3125rem solid @overlay2; + border-bottom-color: @overlay2; } .AssemblySmallCard-hover:hover::after { @@ -464,7 +351,7 @@ #react-autowhatever-site-header-global-search-autosuggest { background-color: @crust; - border: @mantle; + border-color: @mantle; } .tqxyjjt { @@ -481,6 +368,7 @@ .poy4xqf { background: @crust; + border-color: @crust; } .wej97zk { @@ -491,10 +379,6 @@ background-color: @crust; } - .poy4xqf { - border: 0.0625rem solid @crust; - } - .c721v4v { color: @text; } @@ -517,7 +401,7 @@ .s1ovpdog { background-color: @mantle; - border-top: 0.0625rem solid @overlay0; + border-top-color: @overlay0; } .c1ap9d88 .AssemblyMenuItem--title { @@ -550,7 +434,7 @@ } .UIPopover, - .UIPopover:after { + .UIPopover::after { background-color: @mantle; } @@ -563,7 +447,7 @@ } .cxvmyeq { - border: 0.0624rem solid @crust; + border-color: @crust; } .wxhi4p:hover { @@ -587,18 +471,18 @@ } .f1ub3img { - border-top: 0.0625rem solid @overlay2; + border-top-color: @overlay2; } - .AssemblyTabsWrapper:before { + .AssemblyTabsWrapper::before { background-color: @overlay2; } - .s4cgp9b.AssemblyTab:after { + .s4cgp9b.AssemblyTab::after { background: @blue; } - .AssemblyTab:hover:after { + .AssemblyTab:hover::after { background: @blue; } @@ -606,12 +490,8 @@ background: @mantle; } - .wxhi4p:hover { - background: @mantle; - } - .i1v4i7rf.textbookIcon { - background-image: url(https://assets.quizlet.com/a/j/dist/app/i/explanations/textbook_night.1ff39f68b703b28.svg); + background-image: url("https://assets.quizlet.com/a/j/dist/app/i/explanations/textbook_night.1ff39f68b703b28.svg"); } .sinah8x { @@ -678,11 +558,6 @@ background: @mantle; } - .UISwitch-label { - background-color: @mantle; - color: @subtext0; - } - .SetPageTerm { background: @mantle; } @@ -727,7 +602,7 @@ .o1rfl3bx { color: @text; - border: 0.125rem solid @overlay2; + border-color: @overlay2; } .c1lf7cxm { @@ -780,11 +655,13 @@ } .UISwitch-label { - border: 0.125rem solid @overlay1; + border-color: @overlay1; + background-color: @mantle; + color: @subtext0; } .SetPageTerm-sideContent { - border-right: 0.125rem solid @overlay2; + border-right-color: @overlay2; } .UISwitch-input:checked:not(:disabled ~ .UISwitch-label) { @@ -803,13 +680,11 @@ color: @blue; } - .AssemblyIconButton--highlight:hover:not([disabled]), - [aria-disabled="true"] { + .AssemblyIconButton--highlight:hover:not([disabled]) { background-color: @crust; } - .AssemblyIconButton--tertiary:hover:not([disabled]), - [aria-disabled="true"] { + .AssemblyIconButton--tertiary:hover:not([disabled]) { background-color: @crust; } @@ -819,7 +694,7 @@ .z1x1k8pd.svwhkoh { color: @green; - border: 0.0625rem solid @green; + border-color: @green; } .svwhkoh { @@ -859,7 +734,7 @@ } .AssemblyToggleSwitch-input:checked - + .AssemblyToggleSwitch-fauxInput:after { + + .AssemblyToggleSwitch-fauxInput::after { background-color: @pink; } @@ -867,7 +742,7 @@ background: @overlay1; } - .AssemblyToggleSwitch-fauxInput:after { + .AssemblyToggleSwitch-fauxInput::after { background: @lavender; } @@ -917,7 +792,7 @@ } .a1k2umqi:focus-within { - border-bottom: 0.125rem solid @blue; + border-bottom-color: @blue; } .cgyrcnx { @@ -933,11 +808,11 @@ } .sjsxdsz { - border-bottom: 0.0625rem solid @overlay2; + border-bottom-color: @overlay2; } .fz4nps6 { - border-top: 0.0625rem solid @overlay2; + border-top-color: @overlay2; } .AssemblyPrimaryButton--default:disabled, @@ -962,7 +837,7 @@ .w1uwrq7e { color: @text; - border: 0.125rem solid @overlay2; + border-color: @overlay2; } .t1d08860 { @@ -1014,12 +889,12 @@ } .pr2w5fu:first-child { - border-right: 0.125rem solid @overlay2; + border-right-color: @overlay2; } .t117larf { background-color: @crust; - border: 0.0625rem solid @overlay2; + border-color: @overlay2; color: @text; } @@ -1067,18 +942,8 @@ border-color: @yellow; } - .s19dmjr1 { - background: @surface0; - } - - .UIButton, - .UIButton:visited, - html.touch .UIButton:focus:hover:not(:active) { - background-color: @blue; - } - - .UICheckbox-fauxInput:after { - border: 0.125rem solid @yellow; + .UICheckbox-fauxInput::after { + border-color: @yellow; border-width: 0 0 0.125rem 0.125rem; } @@ -1102,7 +967,7 @@ } .UIHorizontalRule { - border-bottom: 0.0625rem solid @overlay2; + border-bottom-color: @overlay2; } .OptionsModal-description, @@ -1126,6 +991,7 @@ .s2y71yx input { background: inherit; + color: @text; } .TextbookRecommendations { @@ -1146,12 +1012,9 @@ /* .AssemblyIcon--small { color: @lavender; } */ - .a99ei82 { - background-color: @mantle; - } .ah3z5j1 { - border: 0.125rem solid @blue; + border-color: @blue; } .hkyil8p { @@ -1159,11 +1022,11 @@ } .e17gih4t { - border: 0.125rem dashed @overlay2; + border-color: @overlay2; } .o1q1tz6w { - border: 0.0625rem solid @overlay2; + border-color: @overlay2; color: @text; } @@ -1177,7 +1040,8 @@ } .a99ei82 { - border: 0.125rem solid @overlay2; + background-color: @mantle; + border-color: @overlay2; } .qcpiy8g { @@ -1206,7 +1070,7 @@ .w1e3jc65 { background-color: @mantle; - border: 0.125rem solid @mantle; + border-color: @mantle; } .t7fr19y { @@ -1218,7 +1082,7 @@ } .w1e3jc65:hover { - border: 0.125rem solid @overlay2; + border-color: @overlay2; } .q1nxab59 { @@ -1259,7 +1123,7 @@ .UIDropdown { background: @mantle; - border: 0.125rem solid @crust; + border-color: @crust; } .UIDropdown .UIDropdown-icon { @@ -1283,12 +1147,12 @@ } .ModeControls-back { - border-bottom: 1px solid @overlay2; + border-bottom-color: @overlay2; } .UIButton--whiteBorder { background: @crust; - border: 0.125rem solid @base; + border-color: @base; color: @text; } @@ -1298,7 +1162,7 @@ .MatchModeQuestionScatterTile { background-color: @mantle; - border: 0.125rem solid @overlay0; + border-color: @overlay0; } .MatchModeQuestionScatterTile.is-draggedOver, @@ -1366,8 +1230,8 @@ color: @subtext0; } - .s1rtnf4c:before, - .s1rtnf4c:after { + .s1rtnf4c::before, + .s1rtnf4c::after { background: none; } @@ -1413,7 +1277,7 @@ .EdgyDataCoursePillbox .UIPill { background: @crust; - border: 1px solid @overlay2; + border-color: @overlay2; color: @text; } @@ -1422,12 +1286,12 @@ } .UIAutosuggest .react-autosuggest__suggestion { - border-bottom: 0.125rem solid @overlay2; + border-bottom-color: @overlay2; } .UIAutosuggest .react-autosuggest__suggestion.react-autosuggest__suggestion--highlighted { - border-bottom: 0.125rem solid @yellow; + border-bottom-color: @yellow; } .EdgyDataCourseSelector-suggestion .EdgyDataCourseSelector-suggestionName { @@ -1457,8 +1321,8 @@ border-color: @peach; } - .button.google:after { - border-right: 1px solid @peach; + .button.google::after { + border-right-color: @peach; } .b1opuclq { @@ -1477,8 +1341,8 @@ border-color: @lavender; } - .button.facebook:after { - border-right: 1px solid @lavender; + .button.facebook::after { + border-right-color: @lavender; } .UIInput-input:-webkit-autofill, @@ -1590,7 +1454,7 @@ } .du7o3ew > div:not(:last-child) { - border-right: 0.0625rem solid @overlay2; + border-right-color: @overlay2; } .i73vo82:hover { @@ -1599,7 +1463,7 @@ } .f2nmi2p { - border-top: 0.0625rem solid @overlay2; + border-top-color: @overlay2; } .a1scx0nz { @@ -1638,15 +1502,15 @@ color: @subtext0; } - .AssemblySmallCard-isActive:after { + .AssemblySmallCard-isActive::after { background-color: @lavender; } .i192320l { - border: 0.125rem solid @mantle; + border-color: @mantle; } - .b1j40uwt:before { + .b1j40uwt::before { background-color: @mantle; } @@ -1676,11 +1540,11 @@ } .AssemblyIconButton--primaryInverted { - border: 0.0625rem solid @overlay2; + border-color: @overlay2; } .StudiableItemToolbar { - border-bottom: 2px solid @overlay2; + border-bottom-color: @overlay2; } .b18prmdf { @@ -1688,11 +1552,11 @@ } .ImageUploadProminentContextToggle { - border: 0.125rem dashed @overlay0; + border-color: @overlay0; } .UILinkButton { - border-bottom: 0.3125rem solid @blue; + border-bottom-color: @blue; color: @text; } @@ -1726,7 +1590,7 @@ } .UITooltip, - .UITooltip:after { + .UITooltip::after { background: @crust; } @@ -1782,7 +1646,7 @@ border-color: @yellow; } - .UIRadio-fauxInput:after { + .UIRadio-fauxInput::after { background-color: @yellow; } @@ -1803,7 +1667,7 @@ } .TermRow.is-duplicate { - outline: 0.125rem solid @yellow; + outline-color: @yellow; } .AssemblyPrimaryButton--danger { @@ -1878,8 +1742,7 @@ background-color: @mantle; } - .AssemblyPrimaryButton--upgrade:hover:not([disabled]), - [aria-disabled="true"] { + .AssemblyPrimaryButton--upgrade:hover:not([disabled]) { background: @rosewater; } @@ -2105,10 +1968,6 @@ background: @mantle; } - .s2y71yx input { - color: @text; - } - .q1kwd3of { color: @overlay2; } @@ -2248,7 +2107,7 @@ color: @subtext1; } - .SetListMediumCard-isActive:before { + .SetListMediumCard-isActive::before { background-color: @lavender; } @@ -2262,9 +2121,7 @@ } .s80h93u:active:not([disabled]), - [aria-disabled="true"], - .s80h93u:hover:not([disabled]), - [aria-disabled="true"] { + .s80h93u:hover:not([disabled]) { background: @crust; } @@ -2484,3 +2341,4 @@ } } } +// vim:ft=less diff --git a/styles/reddit/catppuccin.user.css b/styles/reddit/catppuccin.user.css index 018e45f33e..5f271ff029 100644 --- a/styles/reddit/catppuccin.user.css +++ b/styles/reddit/catppuccin.user.css @@ -1,10 +1,11 @@ /* ==UserStyle== @name Reddit Catppuccin @namespace github.com/catppuccin/userstyles/styles/reddit -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/reddit +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/reddit @version 1.1.2 @description Soothing pastel theme for Reddit. -@author jayylmao +@author Catppuccin +@license MIT @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/reddit/catppuccin.user.css @preprocessor stylus @@ -67,7 +68,7 @@ /* non-standard colors */ --surface1Transparent: #bcc0ccbd; - --mist: #dce0e8bd; + --mist: #dce0e8bd; } else if stylusFlavor=="Frappe" { --rosewater: #f2d5cf; @@ -197,7 +198,7 @@ --surface1Transparent: #45475abd; --mist: #000000bd; } - + if stylusAccent=="Rosewater" { --accent: var(--rosewater); } @@ -241,11 +242,11 @@ --accent: var(--lavender); } } - - + + /* REDDIT COLOR VARIABLES */ - - + + div[class^=subredditvars], :root { --color-online: var(--green) !important; --newCommunityTheme-actionIcon: var(--subtext0) !important; @@ -326,10 +327,10 @@ --newCommunityTheme-navBar-inactiveSubmenuLink: var(--text) !important; --newCommunityTheme-navBar-submenuBackgroundColor: var(--mantle) !important; --newCommunityTheme-navIcon: var(--text) !important; - + /* upvote/downvote focus */ --newCommunityTheme-navIconFaded10: var(--mist) !important; - + --newCommunityTheme-nsfw: var(--red) !important; --newCommunityTheme-nsfwBlocking-bgcolor: var(--crust) !important; --newCommunityTheme-nsfwBlocking-color: var(--text) !important; @@ -367,7 +368,7 @@ --newCommunityTheme-voteText-upvoteTinted80: var(--red) !important; --newCommunityTheme-widgetColors-appleIcon: var(--overlay0) !important; --newCommunityTheme-widgetColors-lineColor: var(--surface1Transparent) !important; - + /* sidebar widgets */ --newCommunityTheme-widgetColors-sidebarWidgetBackgroundColor: var(--mantle) !important; --newCommunityTheme-widgetColors-sidebarWidgetBorderColor: var(--surface1Transparent) !important; @@ -376,7 +377,7 @@ --newCommunityTheme-widgetColors-sidebarWidgetTextColor: var(--text) !important; --newCommunityTheme-widgetColors-sidebarWidgetTextColorShaded80: var(--subtext1) !important; --newCommunityTheme-widgetColors-sidebarWidgetTitleColor: var(--text) !important; - + --newRedditTheme-actionIcon: var(--subtext0) !important; --newRedditTheme-actionIconAlpha20: var(--mist) !important; --newRedditTheme-actionIconAlpha50: var(--mist) !important; @@ -422,10 +423,10 @@ --newRedditTheme-field: var(--base) !important; --newRedditTheme-fieldFade: var(--mantle) !important; --newRedditTheme-flair: var(--accent) !important; - + /* controls menu, link, and other similar highlights. very important */ --newRedditTheme-highlight: var(--base) !important; - + --newRedditTheme-inactive: var(--surface0) !important; --newRedditTheme-lightText: var(--text) !important; --newRedditTheme-lightTextAlpha75: var(--subtext1) !important; @@ -433,14 +434,14 @@ --newRedditTheme-lineShaded80: var(--surface1Transparent) !important; --newRedditTheme-lineShaded90: var(--surface1Transparent) !important; --newRedditTheme-lineShadedNinety: var(--surface1Transparent) !important; - + /* links */ --newRedditTheme-linkText: var(--accent) !important; --newRedditTheme-linkTextAlpha80: var(--accent) !important; --newRedditTheme-linkTextShaded80: var(--accent) !important; --newRedditTheme-linkTextTinted80: var(--accent) !important; --newRedditTheme-linkTextWithBody: var(--accent) !important; - + /* menus */ --newRedditTheme-menu: var(--mantle) !important; --newRedditTheme-menuActiveText: var(--text) !important; @@ -448,7 +449,7 @@ --newRedditTheme-menuButtonBackground-focus: var(--base) !important; --newRedditTheme-menuButtonBackground-hover: var(--base) !important; --newRedditTheme-menuInactiveText: var(--text) !important; - + --newRedditTheme-metaText: var(--subtext0) !important; --newRedditTheme-metaTextAlpha50: var(--mist) !important; --newRedditTheme-metaTextShaded80: var(--subtext1) !important; @@ -511,7 +512,7 @@ --tw-bg-opacity: var(--crust) !important; --vds-video-bg-color: var(--crust) !important; } - + /* reddit chat variables */ :root { --activity-button-chatFilterColor: var(--surface0) !important; @@ -626,20 +627,20 @@ --videoModal-button-background: var(--text) !important; --videoModal-button-color: var(--mantle) !important; } - + ::placeholder { color: var(--subtext0) !important; } - + /* site background */ div.ListingLayout-backgroundContainer::before { background: var(--base) !important; } - - + + /* PROFILE MENU */ - - + + /* karma count */ span#email-collection-tooltip-id > :nth-child(2) > :nth-child(2) > span { color: var(--subtext0) !important; @@ -703,7 +704,7 @@ --canvas: var(--base) !important; } - /* Beta Badge */ + /* Beta Badge */ span._2KFJx8Dhh1o1u0Xb8e7NuD { color: var(--accent) !important; } @@ -722,7 +723,7 @@ input._1Vnaj3fBuYrmHKEPQD_zWW { background-color: var(--base) !important; } - + /* fixes profile posts not being themed */ div.scrollerItem > div, div[data-testid=post-container], div[style="background:#1A1A1B"], div._2otRz3OtuWajw1RleFDJ5P { background: var(--mantle) !important; @@ -804,7 +805,7 @@ /* SITE HEADER*/ - + /* reddit logo */ a[aria-label=Home] > svg > g > circle { fill: var(--accent) !important; @@ -817,7 +818,7 @@ a[aria-label=Home] > svg:nth-child(2) > g > path { fill: var(--text) !important; } - + /* notification icon */ button[aria-label="Open notifications inbox"] > div > span { background: var(--accent) !important; @@ -925,7 +926,7 @@ color: var(--text) !important; } - /* + /* * post op color and * post date color */ @@ -955,7 +956,7 @@ } /* post button divider */ - div[data-click-id=body] > div:nth-child(3) > div:nth-child(3) { + div[data-click-id=body] > div:nth-child(3) > div:nth-child(3) { border-color: var(--surface1) !important; } @@ -1032,85 +1033,85 @@ div[role=radio]:hover, div[role=radio]:focus { background: var(--accent) !important; } - + div[role=radio] > svg, div[role=radio] > svg:active { fill: var(--text) !important; } - + /* checkboxes */ button[role=checkbox] { fill: var(--accent) !important; } - - + + /* SUBREDDIT RIGHT SIDEBAR (some styles carry over from the homepage right sidebar section) */ - - + + /* header background */ ._ZhON3a3vplThB8NFwuJn { background: var(--crust) !important; color: var(--text) !important; } - + /* subreddit image background */ img[alt="Subreddit Icon"][role="presentation"] { background: var(--accent) !important; } - + /* default subreddit icon */ i.icon-community_fill { color: var(--accent) !important; } - + /* online users */ div._21RLQh5PvUhC6vOKoFeHUP:before { color: var(--green) !important; } - - + + /* POST VIEWER */ - - + + /* spoiler tags */ ._2v4IIjPhKL0PDaWaWtjJ1E { background: var(--surface0) !important; } - + /* mod comment tag */ span[id^=CommentTopMeta--Mod] { color: var(--green) !important; } - + /* op comment tag */ span[id^=CommentTopMeta--OP] { color: var(--blue) !important; } - + /* post overlay if you have "open in new tab" disabled */ div#overlayScrollContainer > div { background: var(--crust) !important; } - + /* fixes comment section background not working when "open in new tab is disabled" */ div._2M2wOqmeoPVvcSsJ6Po9-V._3287nL7j7epK9JmDC3N1VR { background: var(--mantle) !important; } - + /* shade applied to background when clicking on a post with "open in new tab" disabled */ div._2DJXORCrmcNpPTSq0LqL6i, div._1DK52RbaamLOWw5UPaht_S { background: var(--mist) !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: var(--surface0) !important; } - + /* image gallery image count */ div._61i6grM3um1yuw4GrN97P { background: var(--mist) !important; @@ -1121,30 +1122,31 @@ input#comment_search-bar { background: var(--base) !important; } - + /* tab bar below banner */ ._1gVVmSnHZpkUgVShsn7-ua { background: var(--mantle) !important; } - + /* MULTIREDDITS/CUSTOM FEEDS */ - - + + /* delete custom feed button */ .bX6SqXfzfxpv4GQbuIYVZ { color: var(--red) !important; } - - + + /* TOOLTIPS */ - - + + div.HQ2VJViRjokXpRbJzPvvc { background: var(--mantle) !important; color: var(--text) !important; } - + div.HQ2VJViRjokXpRbJzPvvc::after { border-top-color: var(--mantle) !important; } } +// vim:ft=less diff --git a/styles/searxng/catppuccin.user.css b/styles/searxng/catppuccin.user.css index 2082ba8ebc..f479a381bd 100644 --- a/styles/searxng/catppuccin.user.css +++ b/styles/searxng/catppuccin.user.css @@ -129,120 +129,13 @@ url-prefix("https://www.webrats.xyz/"), url-prefix("https://xcxc.ml/"), url-prefix("https://xo.wtf/") { + /* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } :root.theme-auto { #catppuccin(@lightFlavor, @accentColor); @@ -290,100 +183,98 @@ url-prefix("https://xo.wtf/") @crust: @catppuccin[@@lookup][@crust]; @accent: @catppuccin[@@lookup][@@accent-color]; - & { - --color-base-font: @text; - --color-base-background: @base; - --color-base-background-mobile: @base; - --color-url-font: @accent; - --color-url-visited-font: @accent; - --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-btn-font: @base; - --color-show-btn-background: @accent; - --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-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-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-result-description-highlight-font: @text; - --color-result-link-font: @accent; - --color-result-link-font-highlight: @accent; - --color-result-link-visited-font: @accent; - --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-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-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; - } + --color-base-font: @text; + --color-base-background: @base; + --color-base-background-mobile: @base; + --color-url-font: @accent; + --color-url-visited-font: @accent; + --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-btn-font: @base; + --color-show-btn-background: @accent; + --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-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-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-result-description-highlight-font: @text; + --color-result-link-font: @accent; + --color-result-link-font-highlight: @accent; + --color-result-link-visited-font: @accent; + --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-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-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; @@ -392,7 +283,7 @@ url-prefix("https://xo.wtf/") stroke: @accent; } - if (additions) { + & when(@additions) { article.result { background-color: var(--color-result-background); border-radius: 0.75em; @@ -405,3 +296,4 @@ url-prefix("https://xo.wtf/") } } } +// vim:ft=less diff --git a/styles/startpage/catppuccin.user.css b/styles/startpage/catppuccin.user.css index f78ca431f0..9b1019aff3 100644 --- a/styles/startpage/catppuccin.user.css +++ b/styles/startpage/catppuccin.user.css @@ -95,7 +95,7 @@ body, .layout-web, .layout-web__body, - .ex-qi-kp:not(.ex-qi-kp--light):not(.ex-qi-kp--night):not(.ex-qi-kp--air) + .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) @@ -105,11 +105,11 @@ } .wp-qi-sb__result { - border: 1px solid @mantle !important; + border-color: @mantle !important; } .wp-qi-sb__top-square-img { - border-bottom: 1px solid @mantle !important; + border-bottom-color: @mantle !important; } /* fonts */ @@ -139,18 +139,18 @@ .inline-nav-menu__link__active, .inline-nav-menu__link__post-link:hover { - border-bottom: 2px solid @green !important; + border-bottom-color: @green !important; } .pagination .num--active { background: @flamingo !important; - border: 1px dashed @flamingo !important; + border-color: @flamingo !important; } .pagination__num:hover, .pagination__next-prev-button:hover { background: @blue !important; - border: 1px solid @blue !important; + border-color: @blue !important; } header { @@ -163,120 +163,11 @@ } } +/* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; -}; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +} +// vim:ft=less diff --git a/styles/stylus/catppuccin.user.css b/styles/stylus/catppuccin.user.css index 1a723e0409..8e78f588f8 100644 --- a/styles/stylus/catppuccin.user.css +++ b/styles/stylus/catppuccin.user.css @@ -16,120 +16,13 @@ @-moz-document url-prefix("moz-extension://"), url-prefix(chrome-extension://) { + /* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @@ -244,7 +137,7 @@ .applies-to input, .applies-to select { background: @base; - border: 1px solid @surface0; + border-color: @surface0; color: @subtext0; } button { @@ -295,3 +188,4 @@ #catppuccin(@darkFlavor, @accentColor); } } +// vim:ft=less diff --git a/styles/substack/catppuccin.user.css b/styles/substack/catppuccin.user.css index b620dccc2d..2acc7e7b8e 100644 --- a/styles/substack/catppuccin.user.css +++ b/styles/substack/catppuccin.user.css @@ -72,7 +72,6 @@ --color-accent-red: @red; --color-accent-purple: @mauve; --color-accent-facebook: @blue; - --color-light-bg-primary: @crust; --color-accent-error: @red; --color-detail: @surface1; --color-dark-bg-primary: @mantle; @@ -85,19 +84,17 @@ --print_pop: @peach; --print_on_pop: @crust; --print_secondary: @subtext0; - --web_bg_color: @base; --color-tertiary: @crust; --background_contrast_1: @crust; --background_contrast_2: mix(@crust, @mantle, 50%); --background_contrast_3: @mantle; --background_contrast_4: mix(@mantle, @base, 33%); --background_contrast_5: mix(@mantle, @base, 66%); - --color_theme_bg_contrast_1: @surface0; + --color_theme_bg_contrast_1: unset; --color_theme_bg_contrast_2: mix(@surface0, @surface1, 50%); --color_theme_bg_contrast_3: @surface1; --color_theme_bg_contrast_4: mix(@surface1, @surface2, 50%); --color_theme_bg_contrast_5: @surface2; - --color_theme_bg_contrast_1: unset; --input_background: @surface0; // used for podcast play controls @@ -159,10 +156,10 @@ // prettier-ignore @catppuccin: { - @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; - @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @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; }; + @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 5c3baf2f0e..1c3d47f317 100644 --- a/styles/syncthing/catppuccin.user.css +++ b/styles/syncthing/catppuccin.user.css @@ -22,123 +22,13 @@ @-moz-document regexp(replace(replace(%("https?://(%s)/.*", @urls), ",", "|"), " ", "", "g")) { + /* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @@ -361,7 +251,7 @@ .well, .form-control[readonly="readonly"] { - /* read-only fields*/ + /* read-only fields */ color: @subtext0 !important; border-color: @subtext0 !important; background-color: @mantle !important; @@ -443,3 +333,4 @@ #catppuccin(@darkFlavor, @accentColor); } } +// vim:ft=less diff --git a/styles/tutanota/catppuccin.user.css b/styles/tutanota/catppuccin.user.css index ec1e0f878f..bc6aecd3d4 100644 --- a/styles/tutanota/catppuccin.user.css +++ b/styles/tutanota/catppuccin.user.css @@ -18,120 +18,13 @@ #catppuccin(@flavor, @accentSelect); } + /* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } #catppuccin(@lookup, @accentSelect) { @rosewater: @catppuccin[@@lookup][@rosewater]; @@ -277,3 +170,4 @@ } } } +// vim:ft=less diff --git a/styles/twitch/catppuccin.user.css b/styles/twitch/catppuccin.user.css index 587e2235a1..e8ed9f6ef3 100644 --- a/styles/twitch/catppuccin.user.css +++ b/styles/twitch/catppuccin.user.css @@ -417,17 +417,13 @@ color: @text; } - .server-message-alert, - .server-message-alert, .server-message-alert { - border: var(--border-width-default) solid @red; - border-left: 0.4rem solid @red; + border-color: @red !important; + border-left-color: @red !important; } - .server-message-alert__icon, - .server-message-alert__icon, .server-message-alert__icon { - color: @red; + color: @red !important; } &, @@ -435,7 +431,6 @@ --color-background-input-focus: @crust; --color-background-interactable-hover: @surface0; --color-background-button-text-default: null !important; - --color-background-float: @crust; --color-text-input-placeholder: @text; --color-border-input: @base; --color-text-button-primary: @crust; @@ -613,117 +608,11 @@ } } +/* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; -}; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +} +// vim:ft=less diff --git a/styles/vercel/catppuccin.user.css b/styles/vercel/catppuccin.user.css index 6b37116d1e..c981d69669 100644 --- a/styles/vercel/catppuccin.user.css +++ b/styles/vercel/catppuccin.user.css @@ -20,120 +20,13 @@ #catppuccin(@lightFlavor); } + /* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } #catppuccin(@lookup) { @rosewater: @catppuccin[@@lookup][@rosewater]; @@ -203,3 +96,4 @@ } } } +// vim:ft=less diff --git a/styles/whatsapp-web/catppuccin.user.css b/styles/whatsapp-web/catppuccin.user.css index 2034bb8e33..48d6b79752 100644 --- a/styles/whatsapp-web/catppuccin.user.css +++ b/styles/whatsapp-web/catppuccin.user.css @@ -2,7 +2,7 @@ @name WhatsApp Web Catppuccin @namespace github.com/catppuccin/userstyles/styles/whatsapp-web @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/whatsapp-web -@version 0.0.2 +@version 0.0.3 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/whatsapp-web/catppuccin.user.css @description Soothing pastel theme for WhatsApp Web @author Catppuccin @@ -14,120 +14,13 @@ @var checkbox lighterMessages "Lighter incoming messages" 0 ==/UserStyle== */ @-moz-document domain("web.whatsapp.com") { + /* prettier-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } :root { #catppuccin(@flavor, @accentColor); @@ -248,9 +141,15 @@ /* 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 */ @@ -285,25 +184,12 @@ --link-preview: @text !important; --link-preview-lighter: @subtext1 !important; --link-preview-light: @subtext0 !important; - /* arrow icon in messages */ - & when (@lighterMessages=1) { - --incoming-background-rgb: #rgbify(@surface1) []; - } - & when (@lighterMessages=0) { - --incoming-background-rgb: #rgbify(@base) []; - } --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; - & when (@lighterMessages=1) { - --incoming-background-deeper: @surface2 !important; - } - & when (@lighterMessages=0) { - --incoming-background-deeper: @surface0 !important; - } /* SEARCH IN CHAT HIGHLIGHT */ --highlight: @teal !important; @@ -760,3 +646,4 @@ } } } +// vim:ft=less diff --git a/styles/wikiwand/catppuccin.user.css b/styles/wikiwand/catppuccin.user.css index 4d5fbfd4f1..a350405dfb 100644 --- a/styles/wikiwand/catppuccin.user.css +++ b/styles/wikiwand/catppuccin.user.css @@ -25,120 +25,13 @@ #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; - }; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + } #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @@ -169,51 +62,46 @@ @crust: @catppuccin[@@lookup][@crust]; @accent-Color: @catppuccin[@@lookup][@@accent]; - & { - --color-bg: @base; - --color-text: @text; - --color-grey: @subtext0; - --color-table: @surface0; - --color-table-border: @surface0; - --color-link: @accent-Color; - --toc-bg: @mantle; - --toc-text: @text; - --toc-border: @crust; - --tag-bg: @surface0; - --tag-text: @overlay1; - --navbar-bg: @crust; - --navbar-border: @mantle; - --navbar-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), - 0px 5px 10px rgba(0, 0, 0, 0.3); - } + --color-bg: @base; + --color-text: @text; + --color-grey: @subtext0; + --color-table: @surface0; + --color-table-border: @surface0; + --color-link: @accent-Color; + --toc-bg: @mantle; + --toc-text: @text; + --toc-border: @crust; + --tag-bg: @surface0; + --tag-text: @overlay1; + --navbar-bg: @crust; + --navbar-border: @mantle; + --navbar-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), + 0px 5px 10px rgba(0, 0, 0, 0.3); + .popover_arrow__pQSsX::before { background-color: @surface1; - border: 1px solid @surface2; + border-color: @surface2; } *[class*="dropdown_item"] { color: @text; } .popover_popover__jgyGp { background-color: @surface1; - border: 1px solid @surface2; + border-color: @surface2; border-radius: 0.625em; - box-shadow: - 0 0 2px rgba(0, 0, 0, 0.1), - 0 5px 10px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 2px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.1); } .draggable_wrapper__YB014 { background-color: @surface1; - border: 1px solid @surface0; - box-shadow: - 0 0 2px rgba(0, 0, 0, 0.2), - 0 10px 20px rgba(0, 0, 0, 0.3); + border-color: @surface0; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.3); color: @text; } .checkbox_checkbox__uXwIZ { width: 1.125em; height: 1.125em; border-radius: 0.125em; - border: 1px solid @surface1; + border-color: @surface1; background-color: @surface2; position: relative; } @@ -228,14 +116,14 @@ color: @subtext0 !important; } .draggable_header__bfxdq { - border: 1px solid @surface1 !important; + border-color: @surface1 !important; } .footer_donation__Cje_Q { display: none !important; } .dropdown_content__4NAxl { background-color: @surface1; - border: 1px solid @surface2; + border-color: @surface2; } p.settings_setLabel__NrVBx:nth-child(3), article.settings_section__vRaq_:nth-child(1) { @@ -264,7 +152,7 @@ background-color: @surface2; } .settings_reset__GO2x4 { - border-top: 1px solid @surface2; + border-top-color: @surface2; } .settings_resetBtn__3yLrG { color: @text; @@ -274,11 +162,11 @@ } .themeBtn_label__GyvdH span { background-color: @surface2; - border: 1px solid @surface2; + border-color: @surface2; } .themeBtn_wrapper__KTkHk.themeBtn_active__4gb_I .themeBtn_demoWrapper__fdi7G { - border: 1px solid @accent-Color !important; + border-color: @accent-Color !important; } div.themeBtn_wrapper__KTkHk:nth-child(3) > p:nth-child(2) @@ -301,7 +189,7 @@ border-radius: 4px; } .input_wrapper__aeypb { - border: none !important; + border-color: transparent !important; } .action_action___vLQg { color: @accent-Color; @@ -309,7 +197,7 @@ .share_btn__9IJpe { color: @text; background-color: @surface2; - border: @surface2; + border-color: @surface2; } .share_btn__9IJpe span { color: @text; @@ -377,9 +265,9 @@ } .audio_dot__jeWOr { background-color: @surface2; - box-shadow: 6.666px 0 0 0px @surface2; - border-radius: 0px; - border: 1px solid @surface2 !important; + box-shadow: 6.666px 0 0 0 @surface2; + border-radius: 0; + border-color: @surface2 !important; } .gallery_icon__7LOBi { background-color: @surface2; @@ -462,7 +350,7 @@ } table { background-color: @surface0 !important; - border: none !important; + border-color: transparent !important; } a.wl { color: @accent-Color !important; @@ -480,3 +368,4 @@ } } } +// vim:ft=less diff --git a/styles/youtube/catppuccin.user.css b/styles/youtube/catppuccin.user.css index 6656f456f0..0896b4a3b3 100644 --- a/styles/youtube/catppuccin.user.css +++ b/styles/youtube/catppuccin.user.css @@ -154,14 +154,11 @@ --yt-spec-suggested-action: fadeout(@accent-color, 80%) !important; --yt-spec-suggested-action-inverse: @text !important; --yt-spec-icon-active-other: @overlay0 !important; - --yt-spec-icon-inactive: @overlay1 !important; - --yt-spec-icon-disabled: @overlay2 !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-icon-inactive: @overlay1 !important; --yt-spec-brand-button-background: @accent-color !important; --yt-spec-brand-link-text: @sapphire !important; --yt-spec-wordmark-text: @text !important; @@ -270,12 +267,7 @@ /* Yt video Page */ --yt-live-chat-background-color: @base !important; --yt-live-chat-action-panel-background-color: @base !important; - --yt-live-chat-action-panel-background-color-transparent: @base !important; --yt-live-chat-secondary-background-color: @surface1; - --yt-live-chat-banner-gradient-scrim: linear-gradient( - @mantle, - transparent - ) !important; --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; @@ -452,7 +444,7 @@ .html5-ypc-purchase { background: @accent-color !important; &:hover { - background: ligten(@accent-color, 10%) !important; + background: lighten(@accent-color, 10%) !important; } } @@ -478,7 +470,7 @@ } /* subtitle */ - .ytp-chrome-controls .ytp-button[aria-pressed]:after { + .ytp-chrome-controls .ytp-button[aria-pressed]::after { background-color: @accent-color !important; } @@ -536,10 +528,6 @@ fill: @accent-color !important; } - .style-scope.ytd-thumbnail-overlay-toggle-button-renderer:hover { - fill: @accent-color !important; - } - .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled, .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled { background-color: @accent-color !important; @@ -562,8 +550,8 @@ } /* search results */ - .sbpqs_a:before, - .sbqs_c:before { + .sbpqs_a::before, + .sbqs_c::before { filter: invert(1); } @@ -571,16 +559,17 @@ .sbsb_a, .sbdd_b { background: @mantle !important; - border: none !important; } /* Transcript Button */ .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--outline { color: @accent-color !important; - border-color: @text !important; - } - .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--outline:hover { - background-color: @surface0 !important; + border-color: @surface2 !important; + + &:hover { + background-color: fadeout(@accent-color, 80) !important; + border-color: fadeout(@accent-color, 80) !important; + } } /* text color */ @@ -666,11 +655,6 @@ text-shadow: none !important; } - /* Popup for when you hover over the channel avatar in the video */ - .iv-branding .branding-context-container-inner { - background-color: @base !important; - } - /* Cards */ .iv-drawer-content { background-color: fadeout(@mantle, 5%) !important; @@ -687,11 +671,6 @@ background-color: @base !important; } - .ytp-cards-teaser .ytp-cards-teaser-box, - .iv-card-image { - border: 0px !important; - } - .iv-card-content > :first-child, .html5-video-player a, .iv-card h2, @@ -699,7 +678,7 @@ color: @text !important; } - /*Player tooltip background*/ + /* Player tooltip background */ .ytp-tooltip-text { background: @surface0 !important; } @@ -720,9 +699,9 @@ /* Temporary fix */ .yt-core-attributed-string--link-inherit-color { color: @text !important; - /*&:hover { + /* &:hover { * color: @teal !important; - }*/ + } */ } /* live badges */ @@ -737,10 +716,10 @@ } } .ytp-live-badge { - &:before { + &::before { background: @subtext1 !important; } - &[disabled]:before { + &[disabled]::before { background: @accent-color !important; } } @@ -785,9 +764,8 @@ /* badges e.g. popular */ yt-chip-cloud-chip-renderer[chip-style="STYLE_DEFAULT"][selected], yt-chip-cloud-chip-renderer[chip-style="STYLE_HOME_FILTER"][selected] { - background: @surface0 !important; - border: 1px solid @accent-color !important; - color: @text !important; + background: @accent-color !important; + color: @crust !important; } /* Search border */ @@ -827,7 +805,7 @@ text-shadow: none; } #masthead-search-terms.masthead-search-terms-border { - border: 1px solid @accent-color !important; + border-color: @accent-color !important; box-shadow: none !important; } #yt-masthead { @@ -910,11 +888,11 @@ } } - /* Scrollbar */ - ::-webkit-scrollbar-thumb { - background: @accent-color !important; + .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline { + border-color: @surface0; } + /* Scrollbar */ ::-webkit-scrollbar { width: @scrollbar_width !important; } @@ -932,13 +910,9 @@ background: fadeout(@accent-color, 80%) !important; color: @text !important; } - - ::-moz-selection { - background: fadeout(@accent-color, 80%) !important; - color: @text !important; - } } } + @-moz-document url-prefix('https://www.youtube.com/redirect') { /* youtube.com-redirect */ @@ -996,7 +970,7 @@ box-shadow: fadeout(@crust, 10%) !important; } - /*Community Cross-posting*/ + /* Community Cross-posting */ ytd-shared-post-renderer[uses-compact-lockup] #repost-context.ytd-shared-post-renderer { background-color: var(--second-background); @@ -1031,11 +1005,6 @@ background: fadeout(@accent-color, 80%) !important; color: @text !important; } - - ::-moz-selection { - background: fadeout(@accent-color, 80%) !important; - color: @text !important; - } } } @@ -1215,125 +1184,14 @@ background: fadeout(@accent-color, 80%) !important; color: @text !important; } - - ::-moz-selection { - background: fadeout(@accent-color, 80%) !important; - 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; - }; -}; + @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 diff --git a/template/catppuccin.user.css b/template/catppuccin.user.css index 510b7c22f0..ac691170ac 100644 --- a/template/catppuccin.user.css +++ b/template/catppuccin.user.css @@ -24,8 +24,7 @@ @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; - }; + @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; }; } /* Userstyle as Mixin @@ -102,4 +101,5 @@ .dark-theme { #catppuccin(@darkFlavor, @accentColor); } -} /* /@-moz-document */ +} +// vim:ft=less