diff --git a/.stylelintrc.js b/.stylelintrc.js index c3440eacc4..bc475acac0 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -6,10 +6,13 @@ export default { extends: "stylelint-config-standard", plugins: [ + "stylelint-use-nesting", "./scripts/lint/stylelint-custom/index.js", ], customSyntax: "postcss-less", rules: { + "csstools/use-nesting": "always", + "catppuccin/optimized-svgs": true, "catppuccin/color-operations": true, "catppuccin/no-redundant-parent-selector": true, diff --git a/deno.json b/deno.json index 768914134b..ac883efa19 100644 --- a/deno.json +++ b/deno.json @@ -20,6 +20,7 @@ "stylelint": "npm:stylelint@^16.12.0", "stylelint-config-recommended": "npm:stylelint-config-recommended@14.0.1", "stylelint-config-standard": "npm:stylelint-config-standard@36.0.1", + "stylelint-use-nesting": "npm:stylelint-use-nesting@^6.0.0", "svgo": "npm:svgo@3.3.2", "type-fest": "npm:type-fest@^4.30.2", "usercss-meta": "npm:usercss-meta@0.12.0" diff --git a/deno.lock b/deno.lock index 01af9eaaba..d334d97023 100644 --- a/deno.lock +++ b/deno.lock @@ -1,5 +1,5 @@ { - "version": "4", + "version": "5", "specifiers": { "jsr:@std/assert@^1.0.9": "1.0.9", "jsr:@std/cli@^1.0.8": "1.0.8", @@ -21,6 +21,7 @@ "npm:postcss-value-parser@4.2.0": "4.2.0", "npm:stylelint-config-recommended@14.0.1": "14.0.1_stylelint@16.12.0__@csstools+css-tokenizer@3.0.3__@csstools+css-parser-algorithms@3.0.4___@csstools+css-tokenizer@3.0.3__postcss-selector-parser@7.0.0__postcss@8.4.49", "npm:stylelint-config-standard@36.0.1": "36.0.1_stylelint@16.12.0__@csstools+css-tokenizer@3.0.3__@csstools+css-parser-algorithms@3.0.4___@csstools+css-tokenizer@3.0.3__postcss-selector-parser@7.0.0__postcss@8.4.49", + "npm:stylelint-use-nesting@6": "6.0.0_stylelint@16.12.0__@csstools+css-tokenizer@3.0.3__@csstools+css-parser-algorithms@3.0.4___@csstools+css-tokenizer@3.0.3__postcss-selector-parser@7.0.0__postcss@8.4.49", "npm:stylelint@*": "16.12.0_@csstools+css-tokenizer@3.0.3_@csstools+css-parser-algorithms@3.0.4__@csstools+css-tokenizer@3.0.3_postcss-selector-parser@7.0.0_postcss@8.4.49", "npm:stylelint@^16.12.0": "16.12.0_@csstools+css-tokenizer@3.0.3_@csstools+css-parser-algorithms@3.0.4__@csstools+css-tokenizer@3.0.3_postcss-selector-parser@7.0.0_postcss@8.4.49", "npm:svgo@3.3.2": "3.3.2", @@ -364,7 +365,8 @@ "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==" }, "cssesc@3.0.0": { - "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==" + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "bin": true }, "csso@5.0.5": { "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", @@ -422,7 +424,8 @@ "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", "dependencies": [ "prr" - ] + ], + "bin": true }, "error-ex@1.3.2": { "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", @@ -459,6 +462,9 @@ "integrity": "sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==", "dependencies": [ "picomatch@4.0.2" + ], + "optionalPeers": [ + "picomatch@4.0.2" ] }, "file-entry-cache@9.1.0": { @@ -526,9 +532,12 @@ "minimist", "neo-async", "source-map", - "uglify-js", "wordwrap" - ] + ], + "optionalDependencies": [ + "uglify-js" + ], + "bin": true }, "has-flag@4.0.0": { "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" @@ -549,7 +558,8 @@ "integrity": "sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==" }, "image-size@0.5.5": { - "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==" + "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==", + "bin": true }, "import-fresh@3.3.0": { "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", @@ -598,7 +608,8 @@ "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", "dependencies": [ "argparse" - ] + ], + "bin": true }, "json-buffer@3.0.1": { "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==" @@ -618,7 +629,8 @@ "minimist", "prettier", "tinyglobby" - ] + ], + "bin": true }, "json-schema-traverse@1.0.0": { "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" @@ -639,16 +651,19 @@ "integrity": "sha512-CasaJidTIhWmjcqv0Uj5vccMI7pJgfD9lMkKtlnTHAdJdYK/7l8pM9tumLyJ0zhbD4KJLo/YvTj+xznQd5NBhg==", "dependencies": [ "copy-anything", + "parse-node-version", + "tslib" + ], + "optionalDependencies": [ "errno", "graceful-fs", "image-size", "make-dir", "mime", "needle", - "parse-node-version", - "source-map", - "tslib" - ] + "source-map" + ], + "bin": true }, "lines-and-columns@1.2.4": { "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" @@ -692,7 +707,8 @@ ] }, "mime@1.6.0": { - "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==" + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "bin": true }, "minimist@1.2.8": { "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==" @@ -701,14 +717,16 @@ "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" }, "nanoid@3.3.8": { - "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==" + "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", + "bin": true }, "needle@3.3.1": { "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==", "dependencies": [ "iconv-lite", "sax" - ] + ], + "bin": true }, "neo-async@2.6.2": { "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==" @@ -789,7 +807,8 @@ ] }, "prettier@3.4.2": { - "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==" + "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==", + "bin": true }, "prr@1.0.1": { "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==" @@ -822,7 +841,8 @@ "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==" }, "semver@5.7.2": { - "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==" + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", + "bin": true }, "signal-exit@4.1.0": { "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==" @@ -871,6 +891,12 @@ "stylelint-config-recommended" ] }, + "stylelint-use-nesting@6.0.0_stylelint@16.12.0__@csstools+css-tokenizer@3.0.3__@csstools+css-parser-algorithms@3.0.4___@csstools+css-tokenizer@3.0.3__postcss-selector-parser@7.0.0__postcss@8.4.49": { + "integrity": "sha512-5/Icok0O35pU3DpHRmISTsElba2btHpPlNcbVrwy6AhapIPKE1QqaMslYhI0Cjt5/w4ALS4iICde9BhVq7HYKA==", + "dependencies": [ + "stylelint" + ] + }, "stylelint@16.12.0_@csstools+css-tokenizer@3.0.3_@csstools+css-parser-algorithms@3.0.4__@csstools+css-tokenizer@3.0.3_postcss-selector-parser@7.0.0_postcss@8.4.49": { "integrity": "sha512-F8zZ3L/rBpuoBZRvI4JVT20ZanPLXfQLzMOZg1tzPflRVh9mKpOZ8qcSIhh1my3FjAjZWG4T2POwGnmn6a6hbg==", "dependencies": [ @@ -912,7 +938,8 @@ "svg-tags", "table", "write-file-atomic" - ] + ], + "bin": true }, "supports-color@7.2.0": { "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", @@ -940,7 +967,8 @@ "css-what", "csso", "picocolors" - ] + ], + "bin": true }, "table@6.9.0": { "integrity": "sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==", @@ -975,7 +1003,8 @@ "integrity": "sha512-UJShLPYi1aWqCdq9HycOL/gwsuqda1OISdBO3t8RlXQC4QvtuIz4b5FCfe2dQIWEpmlRExKmcTBfP1r9bhY7ig==" }, "uglify-js@3.19.3": { - "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==" + "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==", + "bin": true }, "undici-types@6.19.8": { "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==" @@ -999,7 +1028,8 @@ "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", "dependencies": [ "isexe" - ] + ], + "bin": true }, "wordwrap@1.0.0": { "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==" @@ -1038,6 +1068,7 @@ "npm:postcss-value-parser@4.2.0", "npm:stylelint-config-recommended@14.0.1", "npm:stylelint-config-standard@36.0.1", + "npm:stylelint-use-nesting@6", "npm:stylelint@^16.12.0", "npm:svgo@3.3.2", "npm:type-fest@^4.30.2", diff --git a/scripts/lint/stylelint.ts b/scripts/lint/stylelint.ts index fbe61867ec..4899963f90 100644 --- a/scripts/lint/stylelint.ts +++ b/scripts/lint/stylelint.ts @@ -4,6 +4,7 @@ import "postcss-less"; import stylelint from "stylelint"; import "stylelint-config-standard"; import "stylelint-config-recommended"; +import "stylelint-use-nesting"; import { log } from "@/logger.ts"; diff --git a/styles/advent-of-code/catppuccin.user.less b/styles/advent-of-code/catppuccin.user.less index e58a307a22..152524acd0 100644 --- a/styles/advent-of-code/catppuccin.user.less +++ b/styles/advent-of-code/catppuccin.user.less @@ -121,21 +121,21 @@ } .supporter-badge { color: @yellow; - } - .supporter-badge:hover { - color: @yellow; - text-shadow: 0 0 5px @yellow; + &:hover { + color: @yellow; + text-shadow: 0 0 5px @yellow; + } } .sponsor-badge { color: @blue; - } - .sponsor-badge:hover, - .sponsor-badge:focus { - color: @blue; - text-shadow: 0 0 5px @blue; + &:hover, + &:focus { + color: @blue; + text-shadow: 0 0 5px @blue; + } } .leaderboard-entry { @@ -150,10 +150,10 @@ .leaderboard-daylinks-selected { color: @text; text-shadow: 0 0 5px @text; - } - .leaderboard-daylinks-selected:hover { - color: @green; + &:hover { + color: @green; + } } .leaderboard-anon { diff --git a/styles/anilist/catppuccin.user.less b/styles/anilist/catppuccin.user.less index bc07574965..23bc7c2bcd 100644 --- a/styles/anilist/catppuccin.user.less +++ b/styles/anilist/catppuccin.user.less @@ -526,12 +526,12 @@ color: @accent; } /* --------HIDE SCROLLBAR IN BIO----- */ - .section::-webkit-scrollbar { - display: none; - } .section { -ms-overflow-style: none; scrollbar-width: none; + &::-webkit-scrollbar { + display: none; + } } /* --------REMOVE DROPDOWN SHADOWS----- */ .dropdown.dropdown { diff --git a/styles/arch-wiki/catppuccin.user.less b/styles/arch-wiki/catppuccin.user.less index d1361cc057..68c0ad74ee 100644 --- a/styles/arch-wiki/catppuccin.user.less +++ b/styles/arch-wiki/catppuccin.user.less @@ -224,14 +224,14 @@ #content { border-color: @overlay0; - } - #content pre:not([class*="CodeMirror"]), - #content code, - #content tt { - background-color: @surface0; - color: @text; - border-color: @overlay0; + pre:not([class*="CodeMirror"]), + code, + tt { + background-color: @surface0; + color: @text; + border-color: @overlay0; + } } .vector-pinned-container { @@ -251,20 +251,20 @@ .wikitable { background-color: @base; - } - .wikitable > tr > th, - .wikitable > tr > td, - .wikitable > * > tr > th, - .wikitable > * > tr > td { - color: @text; - border-color: @crust; - } + > tr > th, + > tr > td, + > * > tr > th, + > * > tr > td { + color: @text; + border-color: @crust; + } - .wikitable > tr > th, - .wikitable > * > tr > th { - background-color: @mantle; - color: @text; + > tr > th, + > * > tr > th { + background-color: @mantle; + color: @text; + } } .pre { @@ -362,15 +362,15 @@ .archwiki-template-meta-related-articles { background-color: @surface0; - } - .archwiki-template-meta-related-articles p { - color: @text; - border-bottom-color: @blue; - } + p { + color: @text; + border-bottom-color: @blue; + } - .archwiki-template-meta-related-articles ul li a { - color: @blue important; + ul li a { + color: @blue important; + } } .mw-plusminus-neg, @@ -438,10 +438,10 @@ .archwiki-template-box-note a { color: @blue !important; - } - .archwiki-template-box-note a:visited { - color: @mauve !important; + &:visited { + color: @mauve !important; + } } .mw-page-title-main { @@ -476,10 +476,10 @@ .cdx-menu { background-color: @surface0; - } - .cdx-menu:hover { - background-color: @base !important; + &:hover { + background-color: @base !important; + } } .anb-home { diff --git a/styles/boringproxy/catppuccin.user.less b/styles/boringproxy/catppuccin.user.less index 4f28a1bf61..77b7c9593a 100644 --- a/styles/boringproxy/catppuccin.user.less +++ b/styles/boringproxy/catppuccin.user.less @@ -83,13 +83,13 @@ } .menu-item { background: @crust; - } - .menu-item:hover { - background: @surface2; - color: @accent; - } - .menu-item:any-link { - color: @text; + &:hover { + background: @surface2; + color: @accent; + } + &:any-link { + color: @text; + } } // Right SIde Button @@ -97,11 +97,11 @@ border-color: @accent; background-color: @crust; color: @subtext1; - } - .button:hover { - color: @surface0; - background-color: @accent; - border-color: @crust; + &:hover { + color: @surface0; + background-color: @accent; + border-color: @crust; + } } // Top Headers @@ -123,9 +123,9 @@ } body a { color: @text; - } - body a:visited { - color: @accent; + &:visited { + color: @accent; + } } .tn-attribute__name { @@ -141,52 +141,46 @@ .input { color: @text; - } - .input input { - background-color: @crust; - color: @subtext0; - border-color: @accent; - } - .input select { - background-color: @crust; - color: @subtext0; - border-color: @accent; + input, + select { + background-color: @crust; + color: @subtext0; + border-color: @accent; + } } // Token Adding .token-adder { color: @text; - } - .token-adder select { - background-color: @crust; - color: @subtext0; - border-color: @accent; + + select { + background-color: @crust; + color: @subtext0; + border-color: @accent; + } } // Client Adding .client-adder { color: @text; - } - .client-adder select { - background-color: @crust; - color: @subtext0; - border-color: @accent; - } - .client-adder input { - background-color: @crust; - color: @subtext0; - border-color: @accent; + + select, + input { + background-color: @crust; + color: @subtext0; + border-color: @accent; + } } // User Adding .user-adder { color: @text; - } - .user-adder input { - background-color: @crust; - color: @subtext0; - border-color: @accent; + input { + background-color: @crust; + color: @subtext0; + border-color: @accent; + } } // dialog .dialog__content { diff --git a/styles/bsky/catppuccin.user.less b/styles/bsky/catppuccin.user.less index d194a6b0d9..ac8e40f1ac 100644 --- a/styles/bsky/catppuccin.user.less +++ b/styles/bsky/catppuccin.user.less @@ -521,12 +521,12 @@ /* onboarding: continue/next button */ [data-testid="continueBtn"] { background-color: @accent !important; - } - [data-testid="continueBtn"] > div > div { - color: @base !important; - } - [data-testid="continueBtn"] > div > svg > path { - fill: @base !important; + > div > div { + color: @base !important; + } + > div > svg > path { + fill: @base !important; + } } /* pretty self explanatory, user mentions in the post create modal */ diff --git a/styles/bstats/catppuccin.user.less b/styles/bstats/catppuccin.user.less index 36d2b0f772..67648dc96b 100644 --- a/styles/bstats/catppuccin.user.less +++ b/styles/bstats/catppuccin.user.less @@ -95,10 +95,10 @@ .collection { border-color: @surface0; - } - .collection.with-header .collection-header, - .collection .collection-item { - border-bottom-color: @surface0; + &.with-header .collection-header, + .collection-item { + border-bottom-color: @surface0; + } } .collapsible { diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less index 95a23d90d3..fd610ca61c 100644 --- a/styles/canvas-lms/catppuccin.user.less +++ b/styles/canvas-lms/catppuccin.user.less @@ -138,9 +138,9 @@ table { border-color: @surface1; - } - table[style*="border-color: #000000"] { - border-color: @surface1 !important; + &[style*="border-color: #000000"] { + border-color: @surface1 !important; + } } thead th { border-color: @surface1; @@ -590,22 +590,22 @@ background-color: @red; background-image: @red; border-color: @maroon; - } - .btn-unpublished:hover, - .btn-unpublished:active, - .btn-unpublished.active, - .btn-unpublished.disabled, - .btn-unpublished.ui-button.ui-state-disabled, - .btn-unpublished[disabled] { - color: @crust; - background-color: @maroon; - } + &:hover, + &:active, + &.active, + &.disabled, + &.ui-button.ui-state-disabled, + &[disabled] { + color: @crust; + background-color: @maroon; + } - .btn-unpublished:focus { - color: @crust; - background: @maroon; - box-shadow: inset 0 0 0 2px @crust; + &:focus { + color: @crust; + background: @maroon; + box-shadow: inset 0 0 0 2px @crust; + } } /* end of copy-pasted styles */ @@ -731,9 +731,9 @@ border-color: @accent; > div { border-color: @accent; - } - > div:has(> svg) { - background-color: @accent; + &:has(> svg) { + background-color: @accent; + } } } @@ -929,14 +929,14 @@ .ToDoSidebarItem__Close svg { color: @text; } - } - #right-side .events_list { - p { - color: @subtext0; - } + .events_list { + p { + color: @subtext0; + } - .event-details::after { - background: linear-gradient(to right, transparent 0%, @base 80%); + .event-details::after { + background: linear-gradient(to right, transparent 0%, @base 80%); + } } } .PlannerEmptyState-styles__root { @@ -1016,31 +1016,31 @@ border-color: @surface2; span { color: @text; - } - > span > span { - background-color: @surface1; - div[class$="separator"] { - background-color: @surface2; - } - li { + > span > & { background-color: @surface1; - } - ul[role="listbox"] { - background-color: @surface1; - /* the extra selectors are because some lists have group options as list items */ - li:not(:has(ul[role="group"])) { - &:hover, - &:focus, - &:active { - color: @base; - background-color: @accent !important; - span { + div[class$="separator"] { + background-color: @surface2; + } + li { + background-color: @surface1; + } + ul[role="listbox"] { + background-color: @surface1; + /* the extra selectors are because some lists have group options as list items */ + li:not(:has(ul[role="group"])) { + &:hover, + &:focus, + &:active { color: @base; + background-color: @accent !important; + span { + color: @base; + } } } - } - li:has([aria-selected="true"]) { - background-color: mix(@surface1, @overlay2, 70%); + li:has([aria-selected="true"]) { + background-color: mix(@surface1, @overlay2, 70%); + } } } } @@ -1075,9 +1075,9 @@ background-color: @base; color: @text; border-color: @surface2; - } - &:hover > span { - background-color: @base; + &:hover & { + background-color: @base; + } } } @@ -1219,9 +1219,9 @@ color: @text; background-color: @base; border-color: @surface1; - } - .ig-row:hover { - background-color: @hover-accent; + &:hover { + background-color: @hover-accent; + } } } .list-view a.active .nav-badge, @@ -1243,9 +1243,9 @@ #show_by_type { + label > span { color: @text; - } - &:checked + label > span { - background-color: @surface1; + &:checked & { + background-color: @surface1; + } } } @@ -1599,9 +1599,9 @@ border-color: @surface1; .flag_question { filter: @blue-filter; - } - &.marked .flag_question { - filter: @yellow-filter; + &.marked & { + filter: @yellow-filter; + } } .header { background-color: @surface0; @@ -1668,13 +1668,13 @@ a.media-comment { padding: 0; background-image: none; - } - a.media-comment::before { - padding: 0 5px 0 0; - display: inline-block; - transform: translateY(2px) !important; - content: url("/dist/images/audio_comment-eeb35d0efe.gif"); - filter: @text-filter; + &::before { + padding: 0 5px 0 0; + display: inline-block; + transform: translateY(2px) !important; + content: url("/dist/images/audio_comment-eeb35d0efe.gif"); + filter: @text-filter; + } } } } @@ -1920,9 +1920,9 @@ .communication_message { border-color: @surface1; - } - .communication_message div.header { - color: @subtext0; + div.header { + color: @subtext0; + } } span:has(> [data-testid="DiscussionEdit-container"]) { background-color: @base; @@ -2205,12 +2205,12 @@ .mini_calendar { .day { color: @subtext0; - } - .day.has_event { - background-color: @surface0; - } - .day.today { - background-color: mix(@red, @surface0, 10%); + &.has_event { + background-color: @surface0; + } + &.today { + background-color: mix(@red, @surface0, 10%); + } } } .mini-cal-header { @@ -2233,9 +2233,9 @@ .ef-file-preview-header { color: @text; background-color: @mantle; - } - .ef-file-preview-header > * { - border-color: @surface1; + > * { + border-color: @surface1; + } } .ef-file-preview-button { color: @subtext0 !important; @@ -2284,12 +2284,12 @@ } .ctf-message-input { background-color: @base; - } - .ctf-message-input .ctf-message-input__wrapper { - background-color: @surface0; - border-color: @surface2; - input { - background-color: transparent; + .ctf-message-input__wrapper { + background-color: @surface0; + border-color: @surface2; + input { + background-color: transparent; + } } } @@ -2334,9 +2334,9 @@ } .slick-header-column { background-color: @surface0; - } - .slick-header-column.ui-state-default { - border-color: @surface1; + &.ui-state-default { + border-color: @surface1; + } } /* PAGES */ button[class$="tag"] { @@ -2488,9 +2488,9 @@ .bettercanvas-hover-preview { background: @surface1; color: @text; - } - .bettercanvas-hover-preview::after { - background: linear-gradient(0deg, @surface1 50%, transparent); + &::after { + background: linear-gradient(0deg, @surface1 50%, transparent); + } } .bettercanvas-gpa-card { background-color: @surface0; diff --git a/styles/chatgpt/catppuccin.user.less b/styles/chatgpt/catppuccin.user.less index 27a00f6918..6d7e14d48a 100644 --- a/styles/chatgpt/catppuccin.user.less +++ b/styles/chatgpt/catppuccin.user.less @@ -417,10 +417,10 @@ .border-white { border-color: @white; - } - .border-white\/20 { - border-color: fade(@white, 20%); + &\/20 { + border-color: fade(@white, 20%); + } } .border-t-[\#0077FF] { @@ -491,34 +491,34 @@ .bg-black { background-color: @black; - } - .bg-black\/20 { - background-color: fade(@black, 20%); - } + &\/20 { + background-color: fade(@black, 20%); + } - .bg-black\/5 { - background-color: fade(@black, 5%); - } + &\/5 { + background-color: fade(@black, 5%); + } - .bg-black\/50 { - background-color: fade(@black, 50%); - } + &\/50 { + background-color: fade(@black, 50%); + } - .bg-black\/90 { - background-color: fade(@black, 90%); - } + &\/90 { + background-color: fade(@black, 90%); + } - .bg-black\/\[\.04\] { - background-color: fade(@black, 4%); - } + &\/\[\.04\] { + background-color: fade(@black, 4%); + } - .bg-black\/\[\.08\] { - background-color: fade(@black, 8%); - } + &\/\[\.08\] { + background-color: fade(@black, 8%); + } - .bg-black\/\[\.12\] { - background-color: fade(@black, 12%); + &\/\[\.12\] { + background-color: fade(@black, 12%); + } } .bg-blue-100 { @@ -563,14 +563,14 @@ .bg-brand-green { background-color: lighten(@green, 10%); - } - .bg-brand-green\/20 { - background-color: fade(lighten(@green, 10%), 20%); - } + &\/20 { + background-color: fade(lighten(@green, 10%), 20%); + } - .bg-brand-green\/40 { - background-color: fade(lighten(@green, 10%), 40%); + &\/40 { + background-color: fade(lighten(@green, 10%), 40%); + } } .bg-brand-purple { @@ -627,10 +627,10 @@ .bg-green-500 { background-color: lighten(@green, 10%); - } - .bg-green-500\/10 { - background-color: fade(lighten(@green, 10%), 10%); + &\/10 { + background-color: fade(lighten(@green, 10%), 10%); + } } .bg-green-600 { @@ -639,10 +639,10 @@ .bg-orange-500 { background-color: mix(@yellow, @red); - } - .bg-orange-500\/10 { - background-color: fade(mix(@yellow, @red), 10%); + &\/10 { + background-color: fade(mix(@yellow, @red), 10%); + } } .bg-red-100 { @@ -655,10 +655,10 @@ .bg-red-500 { background-color: @red; - } - .bg-red-500\/10 { - background-color: fade(@red, 10%); + &\/10 { + background-color: fade(@red, 10%); + } } .bg-red-600 { @@ -667,14 +667,14 @@ .bg-white { background-color: @white; - } - .bg-white\/20 { - background-color: fade(@white, 20%); - } + &\/20 { + background-color: fade(@white, 20%); + } - .bg-white\/25 { - background-color: fade(@white, 25%); + &\/25 { + background-color: fade(@white, 25%); + } } .bg-yellow-100 { @@ -747,14 +747,14 @@ .text-black { color: @black; - } - .text-black\/60 { - color: fade(@black, 60%); - } + &\/60 { + color: fade(@black, 60%); + } - .text-black\/70 { - color: fade(@black, 70%); + &\/70 { + color: fade(@black, 70%); + } } .text-blue-500 { @@ -859,18 +859,18 @@ .text-white { color: @white; - } - .text-white\/25 { - color: fade(@white, 25%); - } + &\/25 { + color: fade(@white, 25%); + } - .text-white\/50 { - color: fade(@white, 50%); - } + &\/50 { + color: fade(@white, 50%); + } - .text-white\/80 { - color: fade(@white, 80%); + &\/80 { + color: fade(@white, 80%); + } } .text-yellow-500 { @@ -947,10 +947,10 @@ .ring-black { --tw-ring-color: @black; - } - .ring-black\/10 { - --tw-ring-color: fade(@black, 10%); + &\/10 { + --tw-ring-color: fade(@black, 10%); + } } .ring-white { diff --git a/styles/chatreplay/catppuccin.user.less b/styles/chatreplay/catppuccin.user.less index 90e19f9bbd..3e90043e39 100644 --- a/styles/chatreplay/catppuccin.user.less +++ b/styles/chatreplay/catppuccin.user.less @@ -19,12 +19,6 @@ ==/UserStyle== */ @-moz-document domain("chatreplay.stream") { - :root[dark] #chat-container { - #catppuccin(@darkFlavor, chat); - } - :root #chat-container { - #catppuccin(@lightFlavor, chat); - } :root { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor, base); @@ -32,6 +26,12 @@ @media (prefers-color-scheme: dark) { #catppuccin(@darkFlavor, base); } + &:not([dark]) #chat-container { + #catppuccin(@lightFlavor, chat); + } + &[dark] #chat-container { + #catppuccin(@darkFlavor, chat); + } } #catppuccin(@flavor, @platform) { @@ -97,14 +97,14 @@ .message-notice { border-left-color: @accent; } - .message--highlighted a { - color: @accent; - } .message--highlighted { background: @accent; border-color: @accent; color: @base; text-shadow: none; + a { + color: @accent; + } } .red-dot::after { background: @red; @@ -146,9 +146,9 @@ } .card { background: fade(@crust, 80%); - } - .card.c1cw4bqg.c1cw4bqg { - color: @subtext0; + &.c1cw4bqg.c1cw4bqg { + color: @subtext0; + } } a, i { diff --git a/styles/chess.com/catppuccin.user.less b/styles/chess.com/catppuccin.user.less index 76ca8f6d3d..6ba53b534a 100644 --- a/styles/chess.com/catppuccin.user.less +++ b/styles/chess.com/catppuccin.user.less @@ -22,7 +22,7 @@ ==/UserStyle== */ @-moz-document domain("chess.com") { - :root { + :root:not(.dark-mode) { #catppuccin(@lightFlavor); } @@ -311,10 +311,10 @@ #tb { .toolbar-action-icon { color: @subtext1; - } - .toolbar-action-wrapper:hover .toolbar-action-icon { - color: @text !important; + .toolbar-action-wrapper:hover & { + color: @text !important; + } } } diff --git a/styles/cobalt/catppuccin.user.less b/styles/cobalt/catppuccin.user.less index 50059513f4..03be7edc3f 100644 --- a/styles/cobalt/catppuccin.user.less +++ b/styles/cobalt/catppuccin.user.less @@ -101,12 +101,12 @@ opacity: 1; } - .donate-card button { - color: @text !important; - } - .donate-card { color: @text; + + button { + color: @text !important; + } } .donate-card-title { diff --git a/styles/docs.deno.com/catppuccin.user.less b/styles/docs.deno.com/catppuccin.user.less index 8dafee55ee..1a326221e5 100644 --- a/styles/docs.deno.com/catppuccin.user.less +++ b/styles/docs.deno.com/catppuccin.user.less @@ -291,12 +291,12 @@ // Toggle switches (tutorial filters) .slider { background-color: @overlay2; - } - .filter:checked + .slider { - background-color: @accent; - } - .slider::before { - background-color: @surface0; + .filter:checked + & { + background-color: @accent; + } + &::before { + background-color: @surface0; + } } // Download and install tabbed component diff --git a/styles/docs.rs/catppuccin.user.less b/styles/docs.rs/catppuccin.user.less index 9d90dc2d3d..4d935985b4 100644 --- a/styles/docs.rs/catppuccin.user.less +++ b/styles/docs.rs/catppuccin.user.less @@ -262,11 +262,11 @@ @svg: escape(replace(@raw, "%COLOR%", @subtext0)); content: url("data:image/svg+xml,@{svg}"); filter: none; - } - &:hover > img { - @svg: escape(replace(@raw, "%COLOR%", @text)); - content: url("data:image/svg+xml,@{svg}"); - filter: none; + &:hover & { + @svg: escape(replace(@raw, "%COLOR%", @text)); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } } &:not(:has(> img)) { @@ -295,10 +295,10 @@ > summary::before { background: url("data:image/svg+xml,@{plus}") no-repeat top left; filter: none; - } - &[open] > summary::before { - background: url("data:image/svg+xml,@{minus}") no-repeat top left; + &[open] & { + background: url("data:image/svg+xml,@{minus}") no-repeat top left; + } } } diff --git a/styles/duckduckgo/catppuccin.user.less b/styles/duckduckgo/catppuccin.user.less index 5c06ae774f..2ac24e16db 100644 --- a/styles/duckduckgo/catppuccin.user.less +++ b/styles/duckduckgo/catppuccin.user.less @@ -272,25 +272,25 @@ color: @text; background-color: @crust; } - .stopwatch__btn.start { - border-color: @green !important; - background-color: @green; - color: @mantle !important; - } - .stopwatch__btn[disabled] { - color: @text !important; - background-color: @surface0 !important; - border-color: @surface0; - } - .stopwatch__btn.stop { - color: @mantle; - background-color: @red !important; - border-color: @red !important; - } .stopwatch__btn { background-color: @surface2; border-color: @surface2; color: @text; + &.stop { + color: @mantle; + background-color: @red !important; + border-color: @red !important; + } + &[disabled] { + color: @text !important; + background-color: @surface0 !important; + border-color: @surface0; + } + &.start { + border-color: @green !important; + background-color: @green; + color: @mantle !important; + } } .zci--stopwatch td { color: @text; @@ -394,10 +394,10 @@ } .ia-module--stocks.decrease .color-coded { color: @red; - } - .ia-module--stocks.decrease .color-coded path { - stroke: @red; - fill: @red; + path { + stroke: @red; + fill: @red; + } } .ia-module--stocks .stocks-module__stats-wrapper @@ -645,9 +645,9 @@ } .tile__ctrl__toggle-slider { background: @surface1 !important; - } - .tile__ctrl__toggle-slider::before { - background-color: @mantle !important; + &::before { + background-color: @mantle !important; + } } .tile__tab__sci .tile__ctrl__btn, .tile__ctrl__toggle { @@ -669,9 +669,9 @@ background-color: @base !important; border-color: @surface2 !important; color: @text !important; - } - .tile__display.selected { - box-shadow: inset -1px -1px 0 @blue, inset 1px 1px 0 @blue !important; + &.selected { + box-shadow: inset -1px -1px 0 @blue, inset 1px 1px 0 @blue !important; + } } .tile__ctrl--important { background-color: @yellow !important; @@ -858,11 +858,11 @@ background-color: @accent !important; border-color: @accent !important; color: @base !important; - } - .js-set-exit:hover { - background-color: fade(@accent, 80%) !important; - border-color: fade(@accent, 80%) !important; - color: @base !important; + &:hover { + background-color: fade(@accent, 80%) !important; + border-color: fade(@accent, 80%) !important; + color: @base !important; + } } .set-bookmarklet__data { background-color: @surface2; @@ -1069,18 +1069,18 @@ .frm__switch__label::after { background: @overlay2 !important; - } - .is-checked .frm__switch__label::after { - background: @base !important; + .is-checked & { + background: @base !important; + } } .switch__knob { background: @overlay2 !important; - } - .is-on .switch__knob { - background: @base !important; + .is-on & { + background: @base !important; + } } .switch.is-on { diff --git a/styles/elk/catppuccin.user.less b/styles/elk/catppuccin.user.less index 86593515d0..a63a30f6ed 100644 --- a/styles/elk/catppuccin.user.less +++ b/styles/elk/catppuccin.user.less @@ -97,10 +97,10 @@ ::-webkit-scrollbar-thumb { background: fade(@surface1, 70%); - } - ::-webkit-scrollbar-thumb:hover { - background: fade(@surface1, 80%); + &:hover { + background: fade(@surface1, 80%); + } } [text-red], diff --git a/styles/formative/catppuccin.user.less b/styles/formative/catppuccin.user.less index 07b30dfe12..e5e85f10cd 100644 --- a/styles/formative/catppuccin.user.less +++ b/styles/formative/catppuccin.user.less @@ -693,9 +693,9 @@ background: @surface0; border-color: @accent !important; box-shadow: none !important; - } - &.checked button { - background: @accent !important; + &.checked & { + background: @accent !important; + } } .Checkbox__RadioCircleDiv-sc-1oy0ey9-3 { background: @contrast !important; @@ -876,12 +876,6 @@ .dropzone-tip::before { background: @surface0; } - .isOver .dropzone { - background: @surface1; - .dropzone-number { - background: @surface2 !important; - } - } .dropzone { &:hover, &.selected { @@ -895,6 +889,12 @@ .dropzone-number { background: @surface1; } + .isOver & { + background: @surface1; + .dropzone-number { + background: @surface2 !important; + } + } } } .DragAndDropChoice__RootDiv-sc-1wzeg1h-3 { diff --git a/styles/gmail/catppuccin.user.less b/styles/gmail/catppuccin.user.less index ac8a4d0e37..cba9901f92 100644 --- a/styles/gmail/catppuccin.user.less +++ b/styles/gmail/catppuccin.user.less @@ -254,14 +254,14 @@ background-color: darken(@accent, 5%); } } - } - .aqc .H2 { - border-color: @text; - color: @text; + .aqc & { + border-color: @text; + color: @text; - &.bws { - background-color: @surface2; - color: @mantle; + &.bws { + background-color: @surface2; + color: @mantle; + } } } /* Advanced search/filters modal */ diff --git a/styles/go.dev/catppuccin.user.less b/styles/go.dev/catppuccin.user.less index bb8c4209ec..44c8b19032 100644 --- a/styles/go.dev/catppuccin.user.less +++ b/styles/go.dev/catppuccin.user.less @@ -646,22 +646,22 @@ ); content: url("data:image/svg+xml,@{svg}"); filter: none; - } - img.go-Icon[alt="unchecked"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; - } + &[alt="unchecked"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } - img.go-Icon.go-Icon--accented[alt="checked"] { - @svg: escape( - '' - ); - content: url("data:image/svg+xml,@{svg}"); - filter: none; + &.go-Icon--accented[alt="checked"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } } } @@ -851,10 +851,10 @@ a { background-color: @text; color: @crust; - } - a#run { - background-color: @accent; + &#run { + background-color: @accent; + } } pre.info { @@ -881,11 +881,11 @@ span.ng-binding { background-color: @base; color: @accent; - } - .toc-lesson span.ng-binding { - background-color: @mantle; - color: @text; + .toc-lesson & { + background-color: @mantle; + color: @text; + } } } } diff --git a/styles/google-drive/catppuccin.user.less b/styles/google-drive/catppuccin.user.less index 178fd5c3af..2ef5ca6fc9 100644 --- a/styles/google-drive/catppuccin.user.less +++ b/styles/google-drive/catppuccin.user.less @@ -353,10 +353,10 @@ .gb_Ea.gb_i { border-color: @overlay0; background-color: @surface0; - } - .gb_Ea.gb_i:focus, - .gb_Ea.gb_i:hover { - border-color: @subtext0; + &:focus, + &:hover { + border-color: @subtext0; + } } /* File preview (separate tab) background */ diff --git a/styles/google-gemini/catppuccin.user.less b/styles/google-gemini/catppuccin.user.less index e4c52649f8..1abea5cf36 100644 --- a/styles/google-gemini/catppuccin.user.less +++ b/styles/google-gemini/catppuccin.user.less @@ -281,34 +281,34 @@ color: @text; } } - .gmat-mdc-button.mat-mdc-outlined-button.mat-unthemed { - --mdc-outlined-button-outline-color: @overlay0; - --mdc-outlined-button-label-text-color: @subtext0; - } .gmat-mdc-button.mat-mdc-outlined-button { --mat-outlined-button-state-layer-color: @overlay2; - } - .gmat-mdc-button.mat-mdc-outlined-button:not( - .mat-mdc-button-disabled, - [disabled], - :disabled - ).mdc-ripple-upgraded--background-focused, - .gmat-mdc-button.mat-mdc-outlined-button:not( - .mat-mdc-button-disabled, - [disabled], - :disabled, - .mdc-ripple-upgraded - ):focus { - color: @text; + &.mat-unthemed { + --mdc-outlined-button-outline-color: @overlay0; + --mdc-outlined-button-label-text-color: @subtext0; + } + &:not( + .mat-mdc-button-disabled, + [disabled], + :disabled + ).mdc-ripple-upgraded--background-focused, + &:not( + .mat-mdc-button-disabled, + [disabled], + :disabled, + .mdc-ripple-upgraded + ):focus { + color: @text; + } } .gmat-mdc-chip { --mdc-chip-label-text-color: @subtext0; - } - .gmat-mdc-chip.gmat-hairline-chip { - --mdc-chip-outline-color: @subtext0; - } - .gmat-mdc-chip.cdk-focused { - --mdc-chip-label-text-color: @text; + &.gmat-hairline-chip { + --mdc-chip-outline-color: @subtext0; + } + &.cdk-focused { + --mdc-chip-label-text-color: @text; + } } .mat-mdc-standard-chip { --mdc-chip-hover-state-layer-color: @overlay1; diff --git a/styles/google/catppuccin.user.less b/styles/google/catppuccin.user.less index 44b978a9c3..e2fc1b0d14 100644 --- a/styles/google/catppuccin.user.less +++ b/styles/google/catppuccin.user.less @@ -127,11 +127,11 @@ } /* safe search toggle dropdown */ - .z4R3Z.yb2zA { - color: @blue !important; - } .z4R3Z { color: @text !important; + &.yb2zA { + color: @blue !important; + } } /* selected image background */ @@ -346,10 +346,10 @@ } .TIGsTb { border-color: @surface0; - } - .TIGsTb:hover { - background-color: @surface0; - border-color: @surface0; + &:hover { + background-color: @surface0; + border-color: @surface0; + } } .MEdqYd, .feqqG { @@ -773,9 +773,9 @@ } .JCHpcb { color: @subtext0; - } - .JCHpcb:hover { - color: @blue; + &:hover { + color: @blue; + } } .wM6W7d, .ABAbCc { @@ -1124,14 +1124,14 @@ .kLhEKe { background-color: @base; } - .S8ee5.CwbYXd { - color: @text; - } .S8ee5 { background: @surface0; - } - .S8ee5:hover { - background: @surface1; + &.CwbYXd { + color: @text; + } + &:hover { + background: @surface1; + } } .rhHIGd { background-color: @surface2; @@ -1143,14 +1143,14 @@ background-color: @base; border-color: @surface2; color: @text; - } - .I6a0ee:hover { - background-color: @mantle; - border-color: @surface2; - } - .I6a0ee:focus { - background-color: @crust; - border-color: @surface2; + &:hover { + background-color: @mantle; + border-color: @surface2; + } + &:focus { + background-color: @crust; + border-color: @surface2; + } } .pxhZNb { background-color: @surface0 !important; @@ -1161,12 +1161,12 @@ } .c07z9 { color: @subtext0; - } - .c07z9 a, - .c07z9 a:active, - .c07z9 a:link { - color: @text; - text-decoration-color: @subtext0; + a, + a:active, + a:link { + color: @text; + text-decoration-color: @subtext0; + } } .wHYlTd { color: @subtext0; @@ -1188,10 +1188,10 @@ background: @surface0; border-color: @surface1; box-shadow: inset 0 0 0 1px @surface2; - } - .GKS7s:hover { - background-color: @surface1 !important; - border-color: @surface2; + &:hover { + background-color: @surface1 !important; + border-color: @surface2; + } } .yXK7lf em { color: @text; @@ -1199,11 +1199,11 @@ .Lb0dA:hover { background-color: @surface0; } - .Lb0dA[aria-expanded="true"]:hover .EGarzf { - color: @blue; - } .Lb0dA[aria-expanded="true"] { background-color: fade(@blue, 25%); + &:hover .EGarzf { + color: @blue; + } } .BaegVc:hover { background-color: @surface0; @@ -1243,12 +1243,12 @@ .lhLbod { color: @subtext0; } - .nr7I6e div[aria-expanded="true"] .F75bid, - .nr7I6e div[aria-expanded="true"]:hover .fFI3rb .F75bid { - color: @blue; - } .F75bid { color: @subtext0; + .nr7I6e div[aria-expanded="true"] &, + .nr7I6e div[aria-expanded="true"]:hover .fFI3rb & { + color: @blue; + } } div[aria-expanded="true"] .fFI3rb { background-color: fade(@blue, 25%) !important; @@ -1299,9 +1299,9 @@ } .hdtb-mn-hd { color: @subtext0; - } - .hdtb-mn-hd:hover { - color: @text; + &:hover { + color: @text; + } } .fSnalc { stroke: @blue; @@ -1331,9 +1331,9 @@ } .gbZSUe { color: @text; - } - .gbZSUe:hover { - background: @surface0; + &:hover { + background: @surface0; + } } .XZ5MVe { color: @blue; @@ -1344,11 +1344,11 @@ .SvoXfb > .x5f7Bc { fill: @subtext0; } - .SvoXfb:hover > .x5f7Bc { - fill: @text; - } .SvoXfb:hover { background-color: @surface0; + > .x5f7Bc { + fill: @text; + } } .IsZvec, .yxAsKe { @@ -1418,16 +1418,16 @@ } .cF4V5c { background-color: @crust !important; - } - .cF4V5c g-menu-item a, - .cF4V5c g-menu-item a:visited, - .cF4V5c g-menu-item a:hover { - color: @text; - } - .cF4V5c:hover g-menu-item:hover a, - .cF4V5c:hover g-menu-item a:visited, - .cF4V5c g-menu-item a:hover { - background-color: @surface0; + g-menu-item a, + g-menu-item a:visited, + g-menu-item a:hover { + color: @text; + } + &:hover g-menu-item:hover a, + &:hover g-menu-item a:visited, + g-menu-item a:hover { + background-color: @surface0; + } } .GZnQqe.LGiluc { border-top-color: @surface2 !important; @@ -1465,10 +1465,10 @@ } .o6juZc { background-color: @surface0; - } - .o6juZc:hover { - background-color: @surface0; - box-shadow: 0 4px 12px @crust; + &:hover { + background-color: @surface0; + box-shadow: 0 4px 12px @crust; + } } .W6pGoe { background: @surface0; @@ -1590,9 +1590,9 @@ } .r9PaP { color: @subtext0; - } - .r9PaP:hover { - color: @blue; + &:hover { + color: @blue; + } } .H1KrKd { fill: @subtext0; @@ -1642,19 +1642,19 @@ .zItAnd { background-color: @base; border-color: @surface1; - } - .zItAnd:not(.MgQdud):hover { - background-color: @surface0; - border-color: @surface1; + &:not(.MgQdud):hover { + background-color: @surface0; + border-color: @surface1; + } } .fKmH1e { background-color: @base; border-color: @surface1; color: @subtext0; - } - .fKmH1e:hover { - background-color: @surface0; - border-color: @surface1; + &:hover { + background-color: @surface0; + border-color: @surface1; + } } .nfSF8e, .WRhYSc { @@ -1731,9 +1731,9 @@ } .w6PoOe { color: @subtext0; - } - .w6PoOe:hover { - color: @text; + &:hover { + color: @text; + } } .Lj9fsd.DU1Mzb { background-color: @base; @@ -1837,11 +1837,11 @@ border-color: @surface2; background: @surface0; color: @text; - } - .hdtb-tl-sel:focus { - border-color: @surface2; - background: @surface0; - color: @blue; + &:focus { + border-color: @surface2; + background: @surface0; + color: @blue; + } } .t2vtad:active, .t2vtad:not(.hdtb-tl-sel):hover:active { @@ -1850,9 +1850,9 @@ } .gTl8xb { border-color: @subtext0 transparent; - } - .hdtb-mn-hd:hover .gTl8xb { - border-color: @text transparent; + .hdtb-mn-hd:hover & { + border-color: @text transparent; + } } .h3L8Ub .yMAEcf { background: @surface0; @@ -1890,13 +1890,13 @@ .LiOdre { background-color: @base; border-color: @surface1; - } - .LiOdre:hover { - background-color: @mantle; - border-color: @surface2; - } - .LiOdre:focus { - border-color: @blue; + &:hover { + background-color: @mantle; + border-color: @surface2; + } + &:focus { + border-color: @blue; + } } .mfsgsd { color: @text; @@ -1948,14 +1948,14 @@ .KXbwLb { background-color: @surface2; } - .WZH4jc .VknLRd .GNJvt { - background: @surface0; - } - .WZH4jc .VknLRd:hover .GNJvt { - background: @surface1; - } .GNJvt { color: @text; + .WZH4jc .VknLRd:hover & { + background: @surface1; + } + .WZH4jc .VknLRd & { + background: @surface0; + } } .fJOpI.H9lube { background-color: @blue !important; @@ -2442,12 +2442,6 @@ background-color: @surface1 !important; } } - .nz9sqb.EHzcec { - background: var(--gm3-sys-color-surface-container-high, @surface0); - .LVal7b { - background: var(--gm3-sys-color-surface-container-low, @mantle); - } - } .nz9sqb { .NQV3m { color: var(--gm3-sys-color-primary, @blue); @@ -2465,12 +2459,18 @@ .tX9u1b:hover { background-color: @surface0; } - } - .nz9sqb.o07G5 .tX9u1b:active, - .nz9sqb.o07G5 .tX9u1b:active:focus, - .nz9sqb.o07G5 .tX9u1b:active .Rq5Gcb, - .nz9sqb.o07G5 .tX9u1b:active:hover .Rq5Gcb { - background-color: @surface0; + &.EHzcec { + background: var(--gm3-sys-color-surface-container-high, @surface0); + .LVal7b { + background: var(--gm3-sys-color-surface-container-low, @mantle); + } + } + &.o07G5 .tX9u1b:active, + &.o07G5 .tX9u1b:active:focus, + &.o07G5 .tX9u1b:active .Rq5Gcb, + &.o07G5 .tX9u1b:active:hover .Rq5Gcb { + background-color: @surface0; + } } .aRDKUe .pRjiJb, .aRDKUe .DmSTqc { diff --git a/styles/grabify/catppuccin.user.less b/styles/grabify/catppuccin.user.less index 85c9fd6967..2ee5555acc 100644 --- a/styles/grabify/catppuccin.user.less +++ b/styles/grabify/catppuccin.user.less @@ -252,15 +252,15 @@ &::after { background-color: @text; } - } - &:checked + label { - &::before { - background-color: @accent; - } + &:checked & { + &::before { + background-color: @accent; + } - &::after { - background-color: @base; + &::after { + background-color: @base; + } } } } diff --git a/styles/hackage/catppuccin.user.less b/styles/hackage/catppuccin.user.less index cadfefe4b9..3e07cd7b47 100644 --- a/styles/hackage/catppuccin.user.less +++ b/styles/hackage/catppuccin.user.less @@ -535,37 +535,37 @@ color: @red; } - input:invalid { - border-color: @yellow; - box-shadow: 0 0 10px @yellow; - } - input { background-color: @mantle; color: @text; border-style: solid; border-color: @surface0; border-radius: 4px; - } - input[type="range"] { - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; - background-color: @mantle; - height: 0.2em !important; + &:invalid { + border-color: @yellow; + box-shadow: 0 0 10px @yellow; + } - &::-moz-range-thumb, - &::-webkit-slider-thumb { - background-color: @text; - border-color: @surface0; - height: 1em !important; + &[type="range"] { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + background-color: @mantle; + height: 0.2em !important; + + &::-moz-range-thumb, + &::-webkit-slider-thumb { + background-color: @text; + border-color: @surface0; + height: 1em !important; + } } - } - input[type="range"]:hover, - input[type="submit"]:hover { - background-color: @crust; + &[type="range"]:hover, + &[type="submit"]:hover { + background-color: @crust; + } } /* @@ -645,13 +645,13 @@ average(@surface0, @yellow) 60%, average(@surface0, @yellow) 100% ); - } - :target:hover { - background-image: linear-gradient( - to bottom, - overlay(@surface0, @yellow) 0%, - overlay(@surface0, @yellow) 100% - ); + &:hover { + background-image: linear-gradient( + to bottom, + overlay(@surface0, @yellow) 0%, + overlay(@surface0, @yellow) 100% + ); + } } #footer { diff --git a/styles/have-i-been-pwned/catppuccin.user.less b/styles/have-i-been-pwned/catppuccin.user.less index d48fe1676d..e70334504c 100644 --- a/styles/have-i-been-pwned/catppuccin.user.less +++ b/styles/have-i-been-pwned/catppuccin.user.less @@ -247,10 +247,6 @@ background-color: @accent; } - .form-group .termsOfUse { - background-color: @base; - } - .termsOfUse { background-color: @mantle; @@ -259,6 +255,10 @@ color: @subtext0; border-bottom-color: @surface2; } + + .form-group & { + background-color: @base; + } } .secondaryHeader { diff --git a/styles/hyperpipe/catppuccin.user.less b/styles/hyperpipe/catppuccin.user.less index e001f6be97..07da65127d 100644 --- a/styles/hyperpipe/catppuccin.user.less +++ b/styles/hyperpipe/catppuccin.user.less @@ -36,17 +36,17 @@ @media (prefers-color-scheme: dark) { #catppuccin(@darkFlavor); } - } - body[data-theme^="light"] { - #catppuccin(@lightFlavor); - } + &[data-theme^="light"] { + #catppuccin(@lightFlavor); + } - body[data-theme^="dark"], - body[data-theme^="black"], - body[data-theme^="dracula"], - body[data-theme^="nord"] { - #catppuccin(@darkFlavor); + &[data-theme^="dark"], + &[data-theme^="black"], + &[data-theme^="dracula"], + &[data-theme^="nord"] { + #catppuccin(@darkFlavor); + } } #catppuccin(@flavor) { diff --git a/styles/ichi.moe/catppuccin.user.less b/styles/ichi.moe/catppuccin.user.less index 10944c5276..ce189875d4 100644 --- a/styles/ichi.moe/catppuccin.user.less +++ b/styles/ichi.moe/catppuccin.user.less @@ -113,22 +113,22 @@ a { color: @sapphire; - } - a.wiktionary-link { - color: @text; - } + &.wiktionary-link { + color: @text; + } - a.info-link { - color: @text; - } + &.info-link { + color: @text; - a.info-link:hover { - border-bottom-color: @sapphire; - } + &:hover { + border-bottom-color: @sapphire; + } + } - .note-skipped a { - color: @subtext1; + .note-skipped & { + color: @subtext1; + } } .note-skipped a:hover { @@ -249,10 +249,10 @@ .header-nav a { color: @pink; - } - .header-nav a:hover { - color: darken(@pink, 15%); + &:hover { + color: darken(@pink, 15%); + } } .jspTrack { @@ -262,10 +262,10 @@ .f-dropdown { background-color: if(@flavor = "latte", @base, @surface0); border-color: @subtext1; - } - .f-dropdown::before { - border-color: transparent transparent @subtext1; + &::before { + border-color: transparent transparent @subtext1; + } } span.query-pick { @@ -275,12 +275,12 @@ .has-tip { color: @subtext1; border-color: @overlay1; - } - .has-tip:hover, - .has-tip:focus { - border-bottom-color: @sapphire; - color: @sapphire; + &:hover, + &:focus { + border-bottom-color: @sapphire; + color: @sapphire; + } } label { @@ -290,17 +290,17 @@ table { background: @base; background-color: if(@flavor = "latte", @surface0, @surface1); - } - table tr th, - table tr td { - color: @subtext1; - } + tr th, + tr td { + color: @subtext1; + } - table tr.even, - table tr.alt, - table tr:nth-of-type(2n) { - background: fade(if(@flavor = "latte", @surface0, @surface1), 50%); + tr.even, + tr.alt, + tr:nth-of-type(2n) { + background: fade(if(@flavor = "latte", @surface0, @surface1), 50%); + } } .kanji-table td, diff --git a/styles/inoreader/catppuccin.user.less b/styles/inoreader/catppuccin.user.less index b0deb44dc2..1834355728 100644 --- a/styles/inoreader/catppuccin.user.less +++ b/styles/inoreader/catppuccin.user.less @@ -378,11 +378,11 @@ div.article_magazine.article_bulk_selected { box-shadow: 0 0 0 1px @subtext0; } - .view_style_3 #reader_pane .ar.article_current .article_tile_picture { - box-shadow: inset 3px 3px 0 -2px @accent, inset -3px 2px 0 -2px @accent; - } .view_style_3 #reader_pane .ar.article_current { box-shadow: inset 0 0 0 1px @accent; + .article_tile_picture { + box-shadow: inset 3px 3px 0 -2px @accent, inset -3px 2px 0 -2px @accent; + } } .view_style_4 #reader_pane .ar.article_current { diff --git a/styles/instagram/catppuccin.user.less b/styles/instagram/catppuccin.user.less index 909a2d235d..fd0184712f 100644 --- a/styles/instagram/catppuccin.user.less +++ b/styles/instagram/catppuccin.user.less @@ -172,15 +172,15 @@ span { outline-style: solid; outline-offset: 0.15rem; - } - &[aria-label^="Story by"][aria-label$="not seen"] span { - outline-color: @accent; - outline-width: 0.2rem; - } - &[aria-label^="Story by"]:not([aria-label$="not seen"]) span { - outline-color: @surface2; - outline-width: 0.075rem; + &[aria-label^="Story by"][aria-label$="not seen"] & { + outline-color: @accent; + outline-width: 0.2rem; + } + &[aria-label^="Story by"]:not([aria-label$="not seen"]) & { + outline-color: @surface2; + outline-width: 0.075rem; + } } } @@ -827,9 +827,9 @@ } .x1bvjpef { color: @crust; - } - .x1bvjpef:hover { - color: lighten(@accent, 5%); + &:hover { + color: lighten(@accent, 5%); + } } /* notes */ diff --git a/styles/lastfm/catppuccin.user.less b/styles/lastfm/catppuccin.user.less index 8e5c30af87..9d0798009c 100644 --- a/styles/lastfm/catppuccin.user.less +++ b/styles/lastfm/catppuccin.user.less @@ -299,9 +299,9 @@ } .join-cta { background-color: transparent; - } - .join-cta h3 { - color: @accent; + h3 { + color: @accent; + } } .lazy-features-footer { @@ -1191,9 +1191,9 @@ .big-artist-list-title a { color: var(--subtext1); - } - .big-artist-list-title a:hover { - color: @text; + &:hover { + color: @text; + } } /* SIMILAR ARTISTS */ @@ -1235,11 +1235,11 @@ .video-preview-upload-cta { background-color: @crust; box-shadow: 0 0 0 2px @accent-dim; - } - .video-preview-upload-cta:not(.cta--inactive):focus, - .video-preview-upload-cta:not(.cta--inactive):hover { - background-color: @base; + &:not(.cta--inactive):focus, + &:not(.cta--inactive):hover { + background-color: @base; + } } .highcharts-plot-bands-0 > path { @@ -1256,10 +1256,10 @@ .Colored-cta { background-color: fade(@surface2, 70%); - } - .Colored-cta:not(.cta--inactive):focus, - .Colored-cta:not(.cta--inactive):hover { - background-color: fade(@surface2, 30%); + &:not(.cta--inactive):focus, + &:not(.cta--inactive):hover { + background-color: fade(@surface2, 30%); + } } .similar-items-sidebar-item-name { color: @text; @@ -1345,12 +1345,12 @@ .sidebar-heading { color: @subtext1; } - a.sidebar-link.active { - color: @accent; - border-left-color: @accent; - } a { color: @accent; + &.sidebar-link.active { + color: @accent; + border-left-color: @accent; + } } } @@ -1438,10 +1438,10 @@ .inbox .inbox-message--unviewed { background-color: @overlay0; - } - .inbox .inbox-message--unviewed .inbox-message-status::after { - background-color: @accent; + .inbox-message-status::after { + background-color: @accent; + } } /* ADS */ @@ -1513,18 +1513,18 @@ background: @mantle; } /* ------FOOTER----- */ - .footer .footer-heading { - color: @subtext1; - } .footer { background-color: @mantle; color: @text; - } - .footer .footer-bottom { - border-top-color: none; - } - .footer .footer-bottom .row { - background-color: @mantle; + .footer-heading { + color: @subtext1; + } + .footer-bottom { + border-top-color: none; + .row { + background-color: @mantle; + } + } } .footer .footer-language--active, .footer-timezone strong, @@ -1566,11 +1566,11 @@ } .auth-dropdown-menu-item { color: @text !important; - } - .auth-dropdown-menu-item:hover, - .auth-dropdown-menu-item:active { - background-color: @surface0 !important; - color: @text !important; + &:hover, + &:active { + background-color: @surface0 !important; + color: @text !important; + } } .auth-dropdown-menu::before, .js .auth-dropdown-menu::before, @@ -1777,23 +1777,23 @@ &::after { background: @text; } - } - .masthead-search-toggle:hover::before, - .masthead-search-toggle:focus::before { - background-color: @subtext0; - } + &:hover::before, + &:focus::before { + background-color: @subtext0; + } - .masthead-search-toggle.disclose-active::before { - .mask-image( - url("/static/images/icons/delete_999_24.78e2a3de3ab8.png"), - @text, - ); - } + &.disclose-active::before { + .mask-image( + url("/static/images/icons/delete_999_24.78e2a3de3ab8.png"), + @text, + ); + } - .masthead-search-toggle.disclose-active:hover::before, - .masthead-search-toggle.disclose-active:focus::before { - background-color: @subtext0; + &.disclose-active:hover::before, + &.disclose-active:focus::before { + background-color: @subtext0; + } } .js .date-range-picker-button::before { diff --git a/styles/lichess/catppuccin.user.less b/styles/lichess/catppuccin.user.less index fe5b4ada24..fed6fd7f18 100644 --- a/styles/lichess/catppuccin.user.less +++ b/styles/lichess/catppuccin.user.less @@ -229,13 +229,13 @@ } .lobby__support a { background: @crust; - } - .lobby__support a:hover { - background: @peach; - } - .lobby__support a:hover i::before, - .lobby__support a:hover .lobby__support__text { - color: @mantle; + &:hover { + background: @peach; + i::before, + .lobby__support__text { + color: @mantle; + } + } } .lobby__box__top, #hook .opponent, @@ -414,10 +414,10 @@ } rm6 { background: @mantle; - } - rm6 .buttons, - rm6 i5z { - background: @base; + .buttons, + i5z { + background: @base; + } } /* Messages */ @@ -528,9 +528,9 @@ } .opening__next { outline-color: @base; - } - .opening__next:hover { - outline-color: @accent; + &:hover { + outline-color: @accent; + } } .opening__next__popularity span { background: @accent; @@ -561,9 +561,9 @@ } .cmn-toggle:checked + label { background-color: @green; - } - .cmn-toggle:checked + label::before { - color: @green; + &::before { + color: @green; + } } /* Teams */ diff --git a/styles/listenbrainz/catppuccin.user.less b/styles/listenbrainz/catppuccin.user.less index fbd63b0c42..a61d42847e 100644 --- a/styles/listenbrainz/catppuccin.user.less +++ b/styles/listenbrainz/catppuccin.user.less @@ -193,11 +193,11 @@ &::before { background-color: @overlay0; } - } - .toggle-checkbox:checked + .toggle-switch { - background-color: @surface1; - &::before { - background-color: @accent; + .toggle-checkbox:checked + & { + background-color: @surface1; + &::before { + background-color: @accent; + } } } @@ -218,14 +218,14 @@ label { background-color: @surface1; border-color: fade(@green, 50%); - } - input[type="radio"]:checked + label { - background-color: fade(@green, 50%); - &::after { - color: @green; - border-color: @green; - background-color: @surface1; + input[type="radio"]:checked + & { + background-color: fade(@green, 50%); + &::after { + color: @green; + border-color: @green; + background-color: @surface1; + } } } } diff --git a/styles/mastodon/catppuccin.user.less b/styles/mastodon/catppuccin.user.less index 21c5477514..0e432077d7 100644 --- a/styles/mastodon/catppuccin.user.less +++ b/styles/mastodon/catppuccin.user.less @@ -399,13 +399,13 @@ .column-header__wrapper.active { box-shadow: 0 1px 0 fade(@accent, 30%); - } - .column-header__wrapper.active::before { - background: radial-gradient( - ellipse, - fade(@accent, 23%) 0, - rgba(99, 100, 255, 0) 60% - ); + &::before { + background: radial-gradient( + ellipse, + fade(@accent, 23%) 0, + rgba(99, 100, 255, 0) 60% + ); + } } .account__header__bio .account__header__fields dl, @@ -488,14 +488,14 @@ background: linear-gradient(fade(@base, 0%), @base); } - .button.button-tertiary:focus, - .button.button-tertiary:hover, - .button.button-tertiary:active { - color: @base; - } - .button.button-tertiary { border-color: @accent; + + &:focus, + &:hover, + &:active { + color: @base; + } } .button, @@ -512,23 +512,23 @@ .public-layout .header .nav-button { background-color: @surface1; - } - .public-layout .header .nav-button:hover { - background-color: @surface2; + &:hover { + background-color: @surface2; + } } .button.button-secondary { background-color: transparent; color: @text; border-color: @accent; - } - .button.button-secondary:active, - .button.button-secondary:focus, - .button.button-secondary:hover { - border-color: @accent; - color: @base; - transition: 0.2s; + &:active, + &:focus, + &:hover { + border-color: @accent; + color: @base; + transition: 0.2s; + } } .button:active, @@ -730,11 +730,11 @@ .batch-table__row { background: @surface1; - } - .batch-table__row:hover, - .batch-table__row:nth-child(2n):hover { - background: @surface2; + &:hover, + &:nth-child(2n):hover { + background: @surface2; + } } .batch-table__row:nth-child(2n), diff --git a/styles/microsoft-word/catppuccin.user.less b/styles/microsoft-word/catppuccin.user.less index 44703d24c5..1cb01f25f0 100644 --- a/styles/microsoft-word/catppuccin.user.less +++ b/styles/microsoft-word/catppuccin.user.less @@ -225,15 +225,6 @@ } } } - div:nth-child(3) - > div:nth-child(2) - > div:nth-child(1) - > div:nth-child(2) - > div:nth-child(1) { - > div:nth-child(1) > span:nth-child(1) { - background: @accent !important; - } - } div:nth-child(1) { > span:nth-child(1) { background: @subtext0 !important; @@ -244,6 +235,15 @@ > span:nth-child(4) { background: @subtext0 !important; } + div:nth-child(3) + > div:nth-child(2) + > div:nth-child(1) + > div:nth-child(2) + > & { + > div:nth-child(1) > span:nth-child(1) { + background: @accent !important; + } + } } } @@ -270,17 +270,17 @@ background: @accent; } } - } - #ProgressBar > div:nth-child(3) { - > span:nth-child(1) { - color: @text; - } - > span:nth-child(2) { - color: @accent; - } - > span:nth-child(3) { - color: @text; + > div:nth-child(3) { + > span:nth-child(1) { + color: @text; + } + > span:nth-child(2) { + color: @accent; + } + > span:nth-child(3) { + color: @text; + } } } diff --git a/styles/minesweeper/catppuccin.user.less b/styles/minesweeper/catppuccin.user.less index a071908bda..a8c3ec17a9 100644 --- a/styles/minesweeper/catppuccin.user.less +++ b/styles/minesweeper/catppuccin.user.less @@ -84,26 +84,26 @@ .navbar-default { background-color: @base; - } - - .navbar-default .navbar-brand, - .navbar-default .navbar-brand:hover, - .navbar-default .navbar-brand:focus, - .navbar-default .navbar-brand:focus:hover { - color: @text; - } - .navbar-default .navbar-toggle { - border-color: @surface0; - background-color: @base; - &:hover { - border-color: @surface1; - background-color: @mantle; + .navbar-brand, + .navbar-brand:hover, + .navbar-brand:focus, + .navbar-brand:focus:hover { + color: @text; } - } - .navbar-default .navbar-toggle .icon-bar { - background-color: @text; + .navbar-toggle { + border-color: @surface0; + background-color: @base; + &:hover { + border-color: @surface1; + background-color: @mantle; + } + + .icon-bar { + background-color: @text; + } + } } .navbar-desktop, diff --git a/styles/openmediavault/catppuccin.user.less b/styles/openmediavault/catppuccin.user.less index 912000b12a..2e8affbc1a 100644 --- a/styles/openmediavault/catppuccin.user.less +++ b/styles/openmediavault/catppuccin.user.less @@ -78,19 +78,19 @@ --mat-background-color-background: @crust; --mat-primary-color-text: @accent; --mat-background-color-body: @base; - } - .omv-dark-theme .mat-toolbar.mat-primary { - background: @accent; - color: @text; - } - .omv-dark-theme .mat-drawer-container { - background-color: @base; - color: @text; - } + .mat-toolbar.mat-primary { + background: @accent; + color: @text; + } + .mat-drawer-container { + background-color: @base; + color: @text; + } - .omv-dark-theme .mat-card { - background: @mantle; - color: @text; + .mat-card { + background: @mantle; + color: @text; + } } .omv-dark-theme .mat-flat-button, diff --git a/styles/perplexity/catppuccin.user.less b/styles/perplexity/catppuccin.user.less index 007210d593..36a6d4ec3a 100644 --- a/styles/perplexity/catppuccin.user.less +++ b/styles/perplexity/catppuccin.user.less @@ -222,10 +222,10 @@ .text-textOffDark { color: @subtext1 !important; - } - .text-textOffDark\/50 { - color: @subtext0 !important; + &\/50 { + color: @subtext0 !important; + } } .text-white { diff --git a/styles/picrew/catppuccin.user.less b/styles/picrew/catppuccin.user.less index f43c423804..16df015fcb 100644 --- a/styles/picrew/catppuccin.user.less +++ b/styles/picrew/catppuccin.user.less @@ -493,12 +493,6 @@ } } /* creator registration page */ - .creator-content - .email-register-container - .email-register-form - input:not([type="checkbox"], [type="radio"]):focus { - box-shadow: 0 0 0 1px @accent !important; - } .creator-content .email-register-container .email-register-form @@ -506,6 +500,9 @@ background: @mantle !important; border-color: @surface0 !important; color: @text !important; + &:focus { + box-shadow: 0 0 0 1px @accent !important; + } } /* "Password" field */ .creator-content @@ -950,10 +947,10 @@ .tc_items_style > label { .tc_radio_label { border-color: @subtext0 !important; - } - input[type="radio"]:checked + .tc_radio_label { - border-color: @accent !important; - color: @accent !important; + input[type="radio"]:checked + & { + border-color: @accent !important; + color: @accent !important; + } } } /* image maker publication (creator) */ diff --git a/styles/pinterest/catppuccin.user.less b/styles/pinterest/catppuccin.user.less index 533d03f56d..c743fdece7 100644 --- a/styles/pinterest/catppuccin.user.less +++ b/styles/pinterest/catppuccin.user.less @@ -919,14 +919,14 @@ div[data-test-id="drag-behavior-container"] { background-color: @surface1 !important; - } - div[data-test-id="drag-behavior-container"] div div { - border-color: @surface2 !important; - } + div div { + border-color: @surface2 !important; + } - div[data-test-id="drag-behavior-container"] svg { - color: @subtext1; + svg { + color: @subtext1; + } } div[data-test-id="storyboard-pin-card-item"] { @@ -1022,11 +1022,11 @@ button.red.active { background-color: @accent !important; color: @crust !important; - } - button.red.active:hover, - button.red.active:focus { - background-color: darken(@accent, 2.5%) !important; + &:hover, + &:focus { + background-color: darken(@accent, 2.5%) !important; + } } span[data-test-id="terms-of-service"], diff --git a/styles/planet-minecraft/catppuccin.user.less b/styles/planet-minecraft/catppuccin.user.less index 4057589b82..f92648d49d 100644 --- a/styles/planet-minecraft/catppuccin.user.less +++ b/styles/planet-minecraft/catppuccin.user.less @@ -172,22 +172,22 @@ .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 { + .js_link:hover, + .js_link_m:hover, + .link:hover, + a:hover { + .material-icons { + color: @text !important; + } + color: @text !important; + background: @accent !important; } - color: @text !important; - background: @accent !important; - } - - .content-actions li .material-icons { - color: @subtext0 !important; + .material-icons { + color: @subtext0 !important; + } } } @@ -345,21 +345,21 @@ .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 { + .js_link:hover, + .js_link_m:hover, + .link:hover, + a:hover { + .material-icons { + color: @accent !important; + } color: @accent !important; + background: @surface1 !important; } - color: @accent !important; - background: @surface1 !important; - } - .content-actions li .material-icons { - color: @subtext0 !important; + .material-icons { + color: @subtext0 !important; + } } } } diff --git a/styles/pronouns.page/catppuccin.user.less b/styles/pronouns.page/catppuccin.user.less index 25bad1c417..d1a85a2233 100644 --- a/styles/pronouns.page/catppuccin.user.less +++ b/styles/pronouns.page/catppuccin.user.less @@ -356,16 +356,16 @@ color: @text; background-color: @crust; border-color: @surface0; - } - .page-item.active .page-link { - color: @crust; - background-color: @accent; - border-color: @accent; - } - .page-item.disabled .page-link { - color: @text; - background-color: @base; - border-color: @surface0; + .page-item.active & { + color: @crust; + background-color: @accent; + border-color: @accent; + } + .page-item.disabled & { + color: @text; + background-color: @base; + border-color: @surface0; + } } table { --bs-table-color: @text !important; diff --git a/styles/pypi/catppuccin.user.less b/styles/pypi/catppuccin.user.less index 5e6dbb11b5..d82b81a153 100644 --- a/styles/pypi/catppuccin.user.less +++ b/styles/pypi/catppuccin.user.less @@ -139,10 +139,10 @@ .project-description table { tr { background-color: @base !important; - } - tr:nth-child(odd) { - background-color: @mantle !important; + &:nth-child(odd) { + background-color: @mantle !important; + } } &, tr, th, td { @@ -177,11 +177,11 @@ @media (max-width: 1000px) { .accordion__link { color: @text !important; - } - .accordion__link:active, - .accordion__link:focus { - outline-color: @text !important; + &:active, + &:focus { + outline-color: @text !important; + } } } @@ -263,10 +263,10 @@ .dropdown__content { border-color: @accent !important; box-shadow: none !important; - } - .dropdown__content li:hover { - background-color: @base !important; + li:hover { + background-color: @base !important; + } } .dropdown button.dropdown__link:not(:hover), @@ -293,10 +293,10 @@ .horizontal-menu--light .horizontal-menu__link { color: @accent !important; - } - .horizontal-menu--light .horizontal-menu__link:hover { - text-decoration-color: @accent !important; + &:hover { + text-decoration-color: @accent !important; + } } .sponsors, @@ -377,70 +377,70 @@ &:hover { color: @base !important; } - } - .badge--warning:active, - .badge--warning:focus { - outline-color: invisible !important; + &:active, + &:focus { + outline-color: invisible !important; + } } .callout-block--warning { border-color: @yellow !important; - } - .callout-block--warning > :not(.modal, .button, a) { - color: @text !important; - } + > :not(.modal, .button, a) { + color: @text !important; + } - .callout-block--warning::before { - background-color: @yellow !important; - } + &::before { + background-color: @yellow !important; + } - .callout-block--warning .callout-block__dismiss:active, - .callout-block--warning .callout-block__dismiss:focus { - outline-color: @yellow !important; + .callout-block__dismiss:active, + .callout-block__dismiss:focus { + outline-color: @yellow !important; + } } .callout-block { border-color: @accent !important; - } - .callout-block::before { - background-color: @accent !important; + &::before { + background-color: @accent !important; + } } .callout-block--danger { border-color: @red !important; - } - .callout-block--danger > :not(.modal, .button) { - color: @text !important; - } + > :not(.modal, .button) { + color: @text !important; + } - .callout-block--danger::before { - background-color: @red !important; - } + &::before { + background-color: @red !important; + } - .callout-block--danger .callout-block__dismiss:active, - .callout-block--danger .callout-block__dismiss:focus { - outline-color: @red !important; + .callout-block__dismiss:active, + .callout-block__dismiss:focus { + outline-color: @red !important; + } } .callout-block--success { border-color: @green !important; - } - .callout-block--success > :not(.modal, .button) { - color: @text !important; - } + > :not(.modal, .button) { + color: @text !important; + } - .callout-block--success::before { - background-color: @green !important; - } + &::before { + background-color: @green !important; + } - .callout-block--success .callout-block__dismiss:active, - .callout-block--success .callout-block__dismiss:focus { - outline-color: @green !important; + .callout-block__dismiss:active, + .callout-block__dismiss:focus { + outline-color: @green !important; + } } .faq-group h3::before { @@ -451,36 +451,36 @@ background-color: @accent !important; border-color: @accent !important; color: @base !important; - } - .badge:hover { - color: @base !important; - } + &:hover { + color: @base !important; + } - .badge:active, - .badge:focus { - border-color: @base !important; - outline-color: @accent !important; + &:active, + &:focus { + border-color: @base !important; + outline-color: @accent !important; + } } .badge--success { background-color: @green !important; border-color: @green !important; - } - .badge--success:active, - .badge--success:focus { - outline-color: @green !important; + &:active, + &:focus { + outline-color: @green !important; + } } .notification-bar--warning { background-color: @yellow !important; color: @base !important; - } - .notification-bar--warning .notification-bar__dismiss:active, - .notification-bar--warning .notification-bar__dismiss:focus { - outline-color: @yellow !important; + .notification-bar__dismiss:active, + .notification-bar__dismiss:focus { + outline-color: @yellow !important; + } } .table td, @@ -560,26 +560,26 @@ @media (max-width: 400px) { .table--hashes { border-bottom-color: @subtext0 !important; - } - .table--hashes tbody tr td:first-child, - .table--hashes tbody tr th:first-child { - border-top-color: @subtext0 !important; - } + tbody tr td:first-child, + tbody tr th:first-child { + border-top-color: @subtext0 !important; + } - .table--hashes td .button::before { - border-color: transparent !important; + td .button::before { + border-color: transparent !important; + } } } .sponsor-grid__sponsor { background-color: @mantle !important; border-color: @subtext0 !important; - } - .sponsor-grid__sponsor:active, - .sponsor-grid__sponsor:hover { - border-color: @subtext0 !important; + &:active, + &:hover { + border-color: @subtext0 !important; + } } .sponsor-grid__sponsor--invitation, @@ -610,14 +610,14 @@ .hooray-list { border-top-color: @subtext0 !important; - } - .hooray-list li { - border-bottom-color: @subtext0 !important; - } + li { + border-bottom-color: @subtext0 !important; - .hooray-list li::before { - color: @text !important; + &::before { + color: @text !important; + } + } } .button--tertiary { @@ -629,47 +629,47 @@ background-color: @red !important; border-color: @red !important; color: @base !important; - } - .button--danger:active, - .button--danger:focus, - .button--danger:hover { - background-color: @red !important; - border-color: @red !important; - color: @base !important; - text-decoration-color: @red !important; - } + &:active, + &:focus, + &:hover { + background-color: @red !important; + border-color: @red !important; + color: @base !important; + text-decoration-color: @red !important; + } - .button--danger:active, - .button--danger:focus { - border-color: @red !important; - } + &:active, + &:focus { + border-color: @red !important; + } - .button--danger:active:active, - .button--danger:active:focus, - .button--danger:focus:active, - .button--danger:focus:focus { - outline-color: @red !important; + &:active:active, + &:active:focus, + &:focus:active, + &:focus:focus { + outline-color: @red !important; + } } .button--warning { background-color: @yellow !important; border-color: @yellow !important; color: @base !important; - } - .button--warning:active, - .button--warning:focus, - .button--warning:hover { - background-color: @yellow !important; - border-color: @yellow !important; - color: @base !important; - text-decoration-color: @yellow !important; - } + &:active, + &:focus, + &:hover { + background-color: @yellow !important; + border-color: @yellow !important; + color: @base !important; + text-decoration-color: @yellow !important; + } - .button--warning:active, - .button--warning:focus { - border-color: @yellow !important; + &:active, + &:focus { + border-color: @yellow !important; + } } .button--disabled, @@ -722,15 +722,15 @@ background-color: @crust !important; border-color: @subtext0 !important; color: @text !important; - } - .package-header__pip-instructions button:hover { - background-color: @base !important; - } + &:hover { + background-color: @base !important; + } - .package-header__pip-instructions button:active, - .package-header__pip-instructions button:focus { - outline-color: @base !important; + &:active, + &:focus { + outline-color: @base !important; + } } .docutils.literal, @@ -805,21 +805,21 @@ .status-badge { background-color: @crust !important; border-color: @mantle !important; - } - .status-badge span { - color: @base !important; - text-decoration: none !important; - } + span { + color: @base !important; + text-decoration: none !important; + } - .status-badge:active, - .status-badge:focus { - outline-color: @mantle !important; - } + &:active, + &:focus { + outline-color: @mantle !important; + } - .status-badge::before { - color: @base !important; - border-right-color: @mantle !important; + &::before { + color: @base !important; + border-right-color: @mantle !important; + } } .status-badge--good { @@ -869,14 +869,14 @@ .breadcrumbs__breadcrumb { color: @text !important; - } - .breadcrumbs__breadcrumb:first-child { - color: @text !important; - } + &:first-child { + color: @text !important; + } - .breadcrumbs__breadcrumb:not(:last-child)::after { - color: @text !important; + &:not(:last-child)::after { + color: @text !important; + } } .horizontal-menu__link--with-icon:hover .fa, diff --git a/styles/pythonanywhere/catppuccin.user.less b/styles/pythonanywhere/catppuccin.user.less index d2076e2e41..baa7eb3b1f 100644 --- a/styles/pythonanywhere/catppuccin.user.less +++ b/styles/pythonanywhere/catppuccin.user.less @@ -624,10 +624,10 @@ .jumbotron { background-color: @mantle; - } - .jumbotron > hr { - border-top-color: @mantle; + > hr { + border-top-color: @mantle; + } } .top-nav { @@ -837,10 +837,10 @@ .pricing_table ul { background-color: @base; - } - .pricing_table ul li { - background: @mantle; + li { + background: @mantle; + } } .pricing_table ul li:first-child, @@ -1202,24 +1202,24 @@ &:focus { color: @accent; } - } - &.active > a { - &, - &:focus { - background-color: @mantle; - } + &.active & { + &, + &:focus { + background-color: @mantle; + } - &:hover, - &:focus { - background-color: @crust; + &:hover, + &:focus { + background-color: @crust; + } } - } - &:not(.active) > a { - &:hover, - &:focus { - background-color: @mantle; + &:not(.active) & { + &:hover, + &:focus { + background-color: @mantle; + } } } } diff --git a/styles/quizlet/catppuccin.user.less b/styles/quizlet/catppuccin.user.less index 53eaa120e8..82a3a3866b 100644 --- a/styles/quizlet/catppuccin.user.less +++ b/styles/quizlet/catppuccin.user.less @@ -270,12 +270,12 @@ color: @subtext0; } - .CalendarTile--isCurrentWeek::after { - background-color: @mantle; - } - .CalendarTile--isCurrentWeek { color: @text; + + &::after { + background-color: @mantle; + } } .AssemblyIcon--medium { @@ -331,12 +331,12 @@ .SiteActivity-button { border-color: @overlay2; color: @text; - } - .SiteActivity-button:focus, - .SiteActivity-button:hover { - border-color: @overlay0; - color: @subtext1; + &:focus, + &:hover { + border-color: @overlay0; + color: @subtext1; + } } .NotificationBadge-container { @@ -416,16 +416,16 @@ border-top-color: @overlay0; } - .c1ap9d88 .AssemblyMenuItem--title { - color: @subtext0; - } - - .c1ap9d88:hover { - background-color: @base; - } - .c1ap9d88 { background-color: @mantle; + + &:hover { + background-color: @base; + } + + .AssemblyMenuItem--title { + color: @subtext0; + } } .h1hbonvg { @@ -468,10 +468,10 @@ .AssemblyTab { color: @subtext0; - } - .AssemblyTab::after { - color: @subtext0; + &::after { + color: @subtext0; + } } .s4cgp9b.AssemblyTab { @@ -512,11 +512,11 @@ .SetPage { background-color: @base; - } - .SetPage .SetPage-setDetailsInfoWrapper, - .SetPage .SetPage-setIntroWrapper.SetPage-setIntroWrapper { - background-color: @base; + .SetPage-setDetailsInfoWrapper, + .SetPage-setIntroWrapper.SetPage-setIntroWrapper { + background-color: @base; + } } .SetPage-setDetailsInfoWrapper { @@ -551,10 +551,10 @@ .StudyModesNavItemName { color: @text; - } - .StudyModesNavItemName:visited { - color: @text; + &:visited { + color: @text; + } } .c78g08u { @@ -651,25 +651,25 @@ .c5iom2o { color: @lavender; - } - .lck97c5:focus .c5iom2o, - .lck97c5:hover .c5iom2o { - color: @blue; + .lck97c5:focus &, + .lck97c5:hover & { + color: @blue; + } } .t4sjwm7 { color: @text; } - body.colorRefresh-setPageOnly .UISwitch-label { - color: @text; - } - .UISwitch-label { border-color: @overlay1; background-color: @mantle; color: @subtext0; + + body.colorRefresh-setPageOnly & { + color: @text; + } } .SetPageTerm-sideContent { @@ -752,10 +752,10 @@ .AssemblyToggleSwitch-fauxInput { background: @overlay1; - } - .AssemblyToggleSwitch-fauxInput::after { - background: @lavender; + &::after { + background: @lavender; + } } .c13e2cpr { @@ -783,10 +783,10 @@ .ah6785x { color: @subtext1; - } - .a1fcz3cu:focus-within > .ah6785x { - color: @subtext1; + .a1fcz3cu:focus-within > & { + color: @subtext1; + } } .e29yge6 @@ -856,12 +856,12 @@ color: inherit; } - .i1p8x1gp .i1e9rt5 { - color: @maroon; - } - .i1p8x1gp { background-color: @mantle; + + .i1e9rt5 { + color: @maroon; + } } .i1p8x1gp, @@ -910,12 +910,12 @@ color: @text; } - .q1m09plc:hover { - background-color: @crust; - } - .q1m09plc { color: @blue; + + &:hover { + background-color: @crust; + } } .hbcu5v.q1m09plc { @@ -1136,10 +1136,10 @@ .UIDropdown { background: @mantle; border-color: @crust; - } - .UIDropdown .UIDropdown-icon { - color: @overlay2; + .UIDropdown-icon { + color: @overlay2; + } } .UIDropdown-select:focus option { @@ -1175,20 +1175,20 @@ .MatchModeQuestionScatterTile { background-color: @mantle; border-color: @overlay0; - } - .MatchModeQuestionScatterTile.is-draggedOver, - .MatchModeQuestionScatterTile.is-dragging, - .MatchModeQuestionScatterTile:hover { - border-color: @overlay2; - } + &.is-draggedOver, + &.is-dragging, + &:hover { + border-color: @overlay2; + } - .MatchModeQuestionScatterTile.is-incorrect { - border-color: @maroon; - } + &.is-incorrect { + border-color: @maroon; + } - .MatchModeQuestionScatterTile.is-correct { - border-color: @green; + &.is-correct { + border-color: @green; + } } .HighscoresList { @@ -1331,10 +1331,10 @@ .button.google { background-color: @red; border-color: @peach; - } - .button.google::after { - border-right-color: @peach; + &::after { + border-right-color: @peach; + } } .b1opuclq { @@ -1351,10 +1351,10 @@ .button.facebook { background-color: @blue; border-color: @lavender; - } - .button.facebook::after { - border-right-color: @lavender; + &::after { + border-right-color: @lavender; + } } .UIInput-input:-webkit-autofill, @@ -1870,15 +1870,15 @@ background-color: @mantle; } - .ata5p6z[aria-disabled="true"], - .ata5p6z[aria-disabled="true"] div, - .ata5p6z[aria-disabled="true"] textarea { - background-color: @mantle; - } - .ata5p6z { border-color: @overlay2; background-color: @mantle; + + &[aria-disabled="true"], + &[aria-disabled="true"] div, + &[aria-disabled="true"] textarea { + background-color: @mantle; + } } .AssemblyIconButton--primary:disabled, @@ -1921,10 +1921,10 @@ .i1ykvw4f { background: @mantle; - } - .i1ykvw4f:hover { - background: @crust; + &:hover { + background: @crust; + } } .RecentFeed-empty--cta { @@ -2088,10 +2088,10 @@ .c6p6uaq .react-calendar__navigation__arrow { color: @text; - } - .c6p6uaq .react-calendar__navigation__arrow:disabled { - color: @overlay1; + &:disabled { + color: @overlay1; + } } .f1sxiitf { @@ -2130,11 +2130,11 @@ .s80h93u { color: @text; border-color: @overlay2; - } - .s80h93u:active:not([disabled]), - .s80h93u:hover:not([disabled]) { - background: @crust; + &:active:not([disabled]), + &:hover:not([disabled]) { + background: @crust; + } } .r78nxpu > div:hover { @@ -2157,10 +2157,10 @@ .HurricaneBanner--default { background: @crust; border-bottom-color: @surface0; - } - .HurricaneBanner--default .HurricaneBanner-text { - color: @text; + .HurricaneBanner-text { + color: @text; + } } .StudyModesNavSectionTitle { @@ -2241,12 +2241,12 @@ background-color: @mantle; } - .TermStat--perfectTerms .TermStat-header { - background-color: @green; - } - .TermStat-header { color: @mantle; + + .TermStat--perfectTerms & { + background-color: @green; + } } .TermStatGroup-navProgress { diff --git a/styles/react.dev/catppuccin.user.less b/styles/react.dev/catppuccin.user.less index 14c5585df4..deec6f64a1 100644 --- a/styles/react.dev/catppuccin.user.less +++ b/styles/react.dev/catppuccin.user.less @@ -19,7 +19,7 @@ html.dark { #catppuccin(@darkFlavor); } - html { + html:not(.dark) { #catppuccin(@lightFlavor); } diff --git a/styles/reddit/catppuccin.user.less b/styles/reddit/catppuccin.user.less index f4ee7a1c31..ac03ab31e9 100644 --- a/styles/reddit/catppuccin.user.less +++ b/styles/reddit/catppuccin.user.less @@ -633,10 +633,10 @@ button._3F1tNW0P4Ff182mO_CefIg { background: linear-gradient(90deg, @red, @peach) !important; color: @base !important; - } - button._3F1tNW0P4Ff182mO_CefIg > i { - color: @base !important; + > i { + color: @base !important; + } } /* cake day and followers icon */ @@ -716,14 +716,14 @@ ol._container_1t62i_1 { border-color: @base !important; - } - ol._container_1t62i_1 > li { - border-color: @base !important; - } + > li { + border-color: @base !important; - ol._container_1t62i_1 > li > div { - color: @base !important; + > div { + color: @base !important; + } + } } div.MuiMobileStepper-dot { @@ -792,10 +792,10 @@ #change-username-tooltip-id > span._2I12Htze2UzJmmfnrgYJOn > a { background: @surface0 !important; color: @text !important; - } - #change-username-tooltip-id > span._2I12Htze2UzJmmfnrgYJOn > a > i { - color: @text !important; + > i { + color: @text !important; + } } /* reddit now notification */ @@ -1124,10 +1124,10 @@ div.HQ2VJViRjokXpRbJzPvvc { background: @mantle !important; color: @text !important; - } - div.HQ2VJViRjokXpRbJzPvvc::after { - border-top-color: @mantle !important; + &::after { + border-top-color: @mantle !important; + } } /* Recap Reddit Logo */ diff --git a/styles/rentry.co/catppuccin.user.less b/styles/rentry.co/catppuccin.user.less index 7d6840cb0e..6f4c23fd99 100644 --- a/styles/rentry.co/catppuccin.user.less +++ b/styles/rentry.co/catppuccin.user.less @@ -314,9 +314,9 @@ .spoiler { color: @text; background: @text; - } - .spoiler:hover { - background: none; + &:hover { + background: none; + } } code { color: @red !important; diff --git a/styles/seventv/catppuccin.user.less b/styles/seventv/catppuccin.user.less index c6ea31a277..40eb8bb20e 100644 --- a/styles/seventv/catppuccin.user.less +++ b/styles/seventv/catppuccin.user.less @@ -528,11 +528,11 @@ &:hover, &:focus-within { background-color: @base; } - } - } - .seventv-settings-category[in-view="true"] > .settings-category-header { - background-color: @surface0; + &[in-view="true"] > & { + background-color: @surface0; + } + } } .paint-tool-home { diff --git a/styles/spotify-web/catppuccin.user.less b/styles/spotify-web/catppuccin.user.less index 5c791cb68b..72e27ebddd 100644 --- a/styles/spotify-web/catppuccin.user.less +++ b/styles/spotify-web/catppuccin.user.less @@ -311,13 +311,13 @@ } .QO9loc33XC50mMRUCIvf { background-color: @surface0; - } - .QO9loc33XC50mMRUCIvf:focus { - -webkit-box-shadow: 0 0 0 2px @text; - box-shadow: 0 0 0 2px @text; - } - .QO9loc33XC50mMRUCIvf:hover { - background-color: @surface1; + &:focus { + -webkit-box-shadow: 0 0 0 2px @text; + box-shadow: 0 0 0 2px @text; + } + &:hover { + background-color: @surface1; + } } .H6jh9Xd7DNOq3NsLDmCB:active, .H6jh9Xd7DNOq3NsLDmCB:focus, @@ -503,9 +503,9 @@ // Bottom player .vnCew8qzJq3cVGlYFXRI { background-color: @text; - } - .vnCew8qzJq3cVGlYFXRI * { - fill: @crust; + * { + fill: @crust; + } } .rovbQsmAS_mwvpKHaVhQ .PFgcCoJSWC3KjhZxHDYH * { diff --git a/styles/syncthing/catppuccin.user.less b/styles/syncthing/catppuccin.user.less index de6aab59ab..977d886971 100644 --- a/styles/syncthing/catppuccin.user.less +++ b/styles/syncthing/catppuccin.user.less @@ -113,12 +113,12 @@ .dropdown-menu { border-color: @surface1 !important; background-color: @mantle !important; - } - .dropdown-menu > li > a:hover, - .dropdown-menu > li > a:focus { - color: @text !important; - background-color: @surface0 !important; + > li > a:hover, + > li > a:focus { + color: @text !important; + background-color: @surface0 !important; + } } .open > .dropdown-toggle, @@ -150,12 +150,12 @@ .panel-default { border-color: @surface0 !important; - } - .panel-default > .panel-heading { - color: @text !important; - border-color: @surface0 !important; - background-color: @surface0 !important; + > .panel-heading { + color: @text !important; + border-color: @surface0 !important; + background-color: @surface0 !important; + } } .panel-footer { @@ -164,10 +164,10 @@ .table-striped > tbody > tr { border-top-color: @surface0 !important; - } - .table-striped > tbody > tr:nth-of-type(odd) { - background-color: @base !important; + &:nth-of-type(odd) { + background-color: @base !important; + } } .panel-group .panel-heading + .panel-collapse > .panel-body, @@ -184,46 +184,46 @@ color: @text !important; background-color: transparent !important; border-color: @surface0 !important; - } - .btn-default:hover, - .btn-default:focus, - .btn-default.focus { - color: @text !important; - background-color: @surface0 !important; + &:hover, + &:focus, + &.focus { + color: @text !important; + background-color: @surface0 !important; + } } .btn-primary { background-color: @accent !important; color: @base; - } - .btn-primary:hover, - .btn-primary:focus, - .btn-primary.focus { - background-color: fade(@accent, 90%) !important; + &:hover, + &:focus, + &.focus { + background-color: fade(@accent, 90%) !important; + } } .btn-warning { background-color: @yellow !important; color: @base; - } - .btn-warning:hover, - .btn-warning:focus, - .btn-warning.focus { - background-color: fade(@yellow, 90%) !important; + &:hover, + &:focus, + &.focus { + background-color: fade(@yellow, 90%) !important; + } } .btn-danger { background-color: @red !important; color: @base; - } - .btn-danger:hover, - .btn-danger:focus, - .btn-danger.focus { - background-color: fade(@red, 90%) !important; + &:hover, + &:focus, + &.focus { + background-color: fade(@red, 90%) !important; + } } /* modal dialogs */ diff --git a/styles/tabnews/catppuccin.user.less b/styles/tabnews/catppuccin.user.less index beef528400..a93562fc95 100644 --- a/styles/tabnews/catppuccin.user.less +++ b/styles/tabnews/catppuccin.user.less @@ -146,10 +146,10 @@ path.recharts-rectangle { fill: @accent; - } - path.recharts-rectangle.recharts-tooltip-cursor { - fill: @overlay0; + &.recharts-tooltip-cursor { + fill: @overlay0; + } } div.recharts-default-tooltip { diff --git a/styles/trinket/catppuccin.user.less b/styles/trinket/catppuccin.user.less index c24170f81a..94668abcf0 100644 --- a/styles/trinket/catppuccin.user.less +++ b/styles/trinket/catppuccin.user.less @@ -674,13 +674,13 @@ &::after { background-color: @text !important; } - } - input:checked + label { - background-color: @accent !important; + input:checked + & { + background-color: @accent !important; - &::after { - background-color: @base !important; + &::after { + background-color: @base !important; + } } } } @@ -701,10 +701,10 @@ > a { background-color: @crust !important; - } - > a:hover { - background-color: @mantle !important; + &:hover { + background-color: @mantle !important; + } } .item, @@ -817,10 +817,10 @@ border-bottom-color: @surface0 !important; color: @text !important; background-color: @base !important; - } - a:hover { - background-color: @mantle !important; + &:hover { + background-color: @mantle !important; + } } label { @@ -1001,11 +1001,11 @@ > li { border-color: @surface0 !important; box-shadow: none; - } - > li .snapshot .title { - background-color: unset !important; - border-top-color: @surface0 !important; + .snapshot .title { + background-color: unset !important; + border-top-color: @surface0 !important; + } } .dragging-trinket { @@ -1133,10 +1133,10 @@ .trinket-content { border-top-color: @surface0 !important; - } - .trinket-wrapper .trinket-content { - background-color: @base !important; + .trinket-wrapper & { + background-color: @base !important; + } } .trinket-label { @@ -1165,10 +1165,10 @@ &.faux-button { span { border-left-color: @surface0 !important; - } - span::after { - border-top-color: @text !important; + &::after { + border-top-color: @text !important; + } } } } diff --git a/styles/tuta/catppuccin.user.less b/styles/tuta/catppuccin.user.less index 6f0c933e2e..09baf17c6a 100644 --- a/styles/tuta/catppuccin.user.less +++ b/styles/tuta/catppuccin.user.less @@ -134,12 +134,12 @@ .row-selected { border-color: @accent !important; color: @accent !important; - } - .row-selected > .nav-button { - color: @accent !important; + > .nav-button { + color: @accent !important; - > .icon { - fill: @accent !important; + > .icon { + fill: @accent !important; + } } } diff --git a/styles/twitch/catppuccin.user.less b/styles/twitch/catppuccin.user.less index 5d573e7276..936c47cb24 100644 --- a/styles/twitch/catppuccin.user.less +++ b/styles/twitch/catppuccin.user.less @@ -578,9 +578,9 @@ } .thread-header__title-bar-container { background: @mantle; - } - .thread-header__click-area:focus .thread-header__title-bar-container { - background-color: @mantle; + .thread-header__click-area:focus & { + background-color: @mantle; + } } .navigation-link { color: @text; @@ -632,15 +632,12 @@ .chat-author__display-name, .chatter-name, &[data-a-target="chat-message-username"], - &.message-author__display-name { + &.message-author__display-name, + .chatter-name & { color: @text !important; } } - .chatter-name [style*="rgb(255, 255, 255)"] { - color: @text !important; - } - [style="color: rgb(56, 122, 255);"] { color: @blue !important; } @@ -1806,9 +1803,9 @@ } dl dd a.active-highlight { color: @accent !important; - } - dl dd a.active-highlight::before { - border-left-color: @accent !important; + &::before { + border-left-color: @accent !important; + } } dt a:hover { background: @base !important; @@ -1875,9 +1872,9 @@ } a { color: @accent !important; - } - .story__links a { - color: @base !important; + .story__links & { + color: @base !important; + } } border-color: @surface0; @@ -1889,11 +1886,11 @@ } button { border-color: @accent !important; - } - .tag button { - background: @accent !important; - border-color: @accent !important; + .tag & { + background: @accent !important; + border-color: @accent !important; + } } .author { diff --git a/styles/vikunja/catppuccin.user.less b/styles/vikunja/catppuccin.user.less index bcef221bc5..c9d13b9bca 100644 --- a/styles/vikunja/catppuccin.user.less +++ b/styles/vikunja/catppuccin.user.less @@ -139,20 +139,20 @@ button { box-shadow: none !important; - } - button.is-danger { - color: @red !important; - background: none; + &.is-danger { + color: @red !important; + background: none; - &:hover { - background: @red !important; - color: @surface0 !important; - } + &:hover { + background: @red !important; + color: @surface0 !important; + } - &:active { - background: darken(@red, 10%) !important; - color: @surface0 !important; + &:active { + background: darken(@red, 10%) !important; + color: @surface0 !important; + } } } @@ -362,15 +362,15 @@ /* Vue Notifications */ .vue-notification { color: @surface0 !important; - } - .vue-notification button { - background: none; - color: @overlay0 !important; - } + button { + background: none; + color: @overlay0 !important; + } - .vue-notification.success { - background: @green; - border-left-color: darken(@green, 5%); + &.success { + background: @green; + border-left-color: darken(@green, 5%); + } } } } diff --git a/styles/whatsapp-web/catppuccin.user.less b/styles/whatsapp-web/catppuccin.user.less index a3d44a1091..080e2c28a5 100644 --- a/styles/whatsapp-web/catppuccin.user.less +++ b/styles/whatsapp-web/catppuccin.user.less @@ -18,7 +18,7 @@ ==/UserStyle== */ @-moz-document domain("web.whatsapp.com") { - body { + body:not(.dark) { #catppuccin(@lightFlavor); } diff --git a/styles/wiki.nixos.org/catppuccin.user.less b/styles/wiki.nixos.org/catppuccin.user.less index de0ace6f65..463844b788 100644 --- a/styles/wiki.nixos.org/catppuccin.user.less +++ b/styles/wiki.nixos.org/catppuccin.user.less @@ -490,17 +490,17 @@ background-color: @surface0 !important; color: @text !important; border-color: @surface2 !important; - } - .wikitable > * > tr > th { - background-color: @surface1 !important; - } + > * > tr > th { + background-color: @surface1 !important; + } - .wikitable > * > tr > td, - .wikitable > * > tr > th { - background-color: @surface0 !important; - color: @text !important; - border-color: @surface2; + > * > tr > td, + > * > tr > th { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface2; + } } .mw-searchresults-has-iw .iw-result__header a { @@ -1366,13 +1366,13 @@ '' ); background-image: url("data:image/svg+xml,@{svg}"); - } - .client-dark-mode .mw-ui-icon-vector-gadget-pt-darkmode { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); + .client-dark-mode & { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } } .vector-icon.mw-ui-icon-wikimedia-userContributions { diff --git a/styles/youtube/catppuccin.user.less b/styles/youtube/catppuccin.user.less index 8395f54fb2..f9eaa3c531 100644 --- a/styles/youtube/catppuccin.user.less +++ b/styles/youtube/catppuccin.user.less @@ -901,14 +901,6 @@ background-image: url("data:image/svg+xml,@{svg}"); } - .ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml,@{svg}"); - background-color: @accent; - } - .ytp-menuitem { &:not([aria-disabled="true"]):hover { background-color: @surface1; @@ -930,6 +922,14 @@ ); background-image: url("data:image/svg+xml,@{svg}"); } + + &[aria-checked="true"] .ytp-menuitem-toggle-checkbox { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + background-color: @accent; + } } /* Video player */ @@ -1269,7 +1269,7 @@ :root[dark] { #catppuccin(@darkFlavor); } - :root { + :root:not([dark]) { #catppuccin(@lightFlavor); } @@ -1435,7 +1435,7 @@ html[darker-dark-theme] { #catppuccin(@darkFlavor); } - html { + html:not([darker-dark-theme]) { #catppuccin(@lightFlavor); } @@ -1521,11 +1521,11 @@ .chip-container { color: @text; background-color: @surface0; - } - &.selected .chip-container { - color: @crust; - background-color: @accent; + &.selected & { + color: @crust; + background-color: @accent; + } } }