diff --git a/.envrc b/.envrc new file mode 100644 index 0000000000..0fdc096fc0 --- /dev/null +++ b/.envrc @@ -0,0 +1,3 @@ +if has nix_direnv_version; then + use flake +fi diff --git a/.gitattributes b/.gitattributes index f271a57c1b..f41afd6189 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1,4 +1 @@ -*.webp filter=lfs diff=lfs merge=lfs -text -*.png filter=lfs diff=lfs merge=lfs -text -*.css linguist-language=less src/** -linguist-detectable diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 672f8e7062..022c0b8da3 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1,38 +1,128 @@ # THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND. /styles/advent-of-code @rubyowo +/styles/alacritty.org @AlwaysNur +/styles/alternativeto @thismoon +/styles/amplenote @stellophiliac /styles/anilist @AnubisNekhet +/styles/anonymous-overflow @ImenaOphelia +/styles/boringproxy @Gandalf-the-Blue /styles/brave-search @ndsboy -/styles/canvas-lms @TheMemeSniper -/styles/chatgpt @rubyowo +/styles/bsky @RoootTheFox +/styles/bstats @rockquiet +/styles/canvas-lms @pynappo +/styles/chatgpt @uncenter /styles/chatreplay @AnubisNekhet -/styles/chess.com @coldenate @isabelroses @skelebro1 +/styles/chess.com @uncenter /styles/cinny @jn-sena -/styles/codeberg @justTOBBI +/styles/claude @ruiiiijiiiiang +/styles/codeberg @isabelroses +/styles/cobalt @kerichdev +/styles/crates.io @uncenter /styles/crowdin @ryanccn /styles/deepl @watatomo -/styles/ecosia @isabelroses +/styles/deepseek @WalkQuackBack +/styles/desmos @gradylink +/styles/dev.to @shnjd +/styles/devdocs @ashish0kumar +/styles/docs.deno.com @uncenter +/styles/docs.rs @uncenter +/styles/duckduckgo @GenShibe /styles/elk @ryanccn -/styles/github @Pocco81 @GlowingUmbreon +/styles/freedesktop @NK308 +/styles/ghostty.org @uncenter +/styles/github @uncenter +/styles/gleam.run @uncenter +/styles/gmail @uncenter +/styles/go.dev @Flapperoo +/styles/google-drive @r58Playz @WalkQuackBack +/styles/google-photos @GenShibe @WalkQuackBack +/styles/grabify @trinkey +/styles/google-gemini @Dandraghas @WalkQuackBack +/styles/hackage @jn-sena /styles/hacker-news @lucasmelin +/styles/have-i-been-pwned @trinkey +/styles/holodex @Guaxinim5573 +/styles/home-manager-options-search @uncenter /styles/homepage @Gandalf-the-Blue +/styles/hoogle @jn-sena +/styles/hoppscotch @justTOBBI +/styles/learn-x-in-y-minutes @nik-rev /styles/ichi.moe @watatomo -/styles/invidious @nekowinston +/styles/inoreader @thomas-philippot +/styles/indie-wiki-buddy @thismoon +/styles/instagram @GenShibe /styles/invokeai @ryanccn +/styles/jisho @Lichthagel +/styles/keybr.com @janTatesa +/styles/keyoxide @uncenter /styles/lastfm @AnubisNekhet -/styles/libreddit @isabelroses -/styles/mastodon @isabelroses +/styles/lemmy @Gandalf-the-Blue +/styles/lichess @coopw1 @zenoix +/styles/lingva @rubyowo +/styles/listenbrainz @00dani +/styles/lobste.rs @steinuil +/styles/mastodon @comfysage +/styles/mdbook @uncenter +/styles/mdn @soya-daizu /styles/modrinth @thismoon +/styles/migadu-webmail @uncenter +/styles/namemc @Meowcelinee +/styles/neovim.io @comfysage +/styles/npmx @42willow /styles/nitter @AnubisNekhet -/styles/nixos-search @alaidriel -/styles/paste.rs @Stonks3141 +/styles/nixos-manual @husjon +/styles/nixos-search @sydrinea +/styles/wiki.nixos.org @orangci +/styles/npm @uncenter +/styles/ollama @NeonGamerBot-QK +/styles/openmediavault @Gandalf-the-Blue +/styles/paste.rs @Guaxinim5573 +/styles/perplexity @Tnixc +/styles/phanpy @Guaxinim5573 +/styles/picrew @Meowcelinee +/styles/pinterest @nuexq +/styles/planet-minecraft @Nyameliaaaa +/styles/poe @TheAnonymousCrusher +/styles/porkbun @uncenter +/styles/pronouns.cc @comfysage +/styles/pronouns.page @uncenter /styles/proton @soya-daizu +/styles/pypi @trinkey +/styles/pythonanywhere @trinkey /styles/quizlet @spaghettiosareyummy -/styles/reddit @jayylmao +/styles/raindrop @thismoon +/styles/react.dev @RaiderHCPlay +/styles/regex101 @uncenter +/styles/rentry.co @thismoon +/styles/scalar @incognitotgt +/styles/searchix @koibtw /styles/searxng @Sekki21956 @ryanccn -/styles/substack @nekowinston -/styles/tutanota @ryanccn -/styles/twitch @GitMuslim @isabelroses -/styles/vercel @ryanccn -/styles/whatsapp-web @FrancoRav -/styles/wikiwand @tnixc -/styles/youtube @isabelroses \ No newline at end of file +/styles/seventv @mxgic1337 +/styles/shinigami-eyes @sofiedotcafe +/styles/snapchat-web @itzTheMeow +/styles/spotify-web @Tnixc +/styles/stack-overflow @uncenter +/styles/startpage @WalkQuackBack +/styles/status.cafe @bunfluff +/styles/stylus @uncenter +/styles/substack @uncenter +/styles/syncthing @BlankParticle +/styles/tabnews @Guaxinim5573 +/styles/tldraw @NekoDrone +/styles/trinket @trinkey +/styles/tuta @ryanccn +/styles/twitch @uncenter @mxgic1337 +/styles/twitter @watatomo +/styles/vercel @ryanccn @Dandraghas +/styles/vikunja @Guaxinim5573 +/styles/web.dev @uncenter +/styles/whatsapp-web @FrancoRav @WalkQuackBack +/styles/wikipedia @uncenter +/styles/wikiwand @Tnixc +/styles/youtube @isabelroses @uncenter +/styles/zen-browser-docs @ashish0kumar + +/.github/ @uncenter @walkquackback +/scripts/ @uncenter @walkquackback +/template/ @uncenter @walkquackback +/lib/ @uncenter @walkquackback \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index d5c760e747..9c0a16c17a 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -1,11 +1,11 @@ blank_issues_enabled: false contact_links: - - name: Userstyle Request + - name: Request a Userstyle url: https://github.com/catppuccin/catppuccin/discussions/new?category=port-requests - about: Request a website to be themed here! - - name: Userstyle Review + about: Request for a website to be themed. + - name: Submit a New Userstyle url: https://github.com/catppuccin/userstyles/compare - about: Already made a theme? Submit a Pull Request here! + about: Already made a theme? Submit a pull request to add it to the collection. - name: Community Discord url: https://discord.com/servers/catppuccin-907385605422448742 - about: Ask questions and chat to other community members! \ No newline at end of file + about: Ask questions and chat to other community members! diff --git a/.github/ISSUE_TEMPLATE/meta.yml b/.github/ISSUE_TEMPLATE/meta.yml index 01bb072136..11031087c2 100644 --- a/.github/ISSUE_TEMPLATE/meta.yml +++ b/.github/ISSUE_TEMPLATE/meta.yml @@ -1,5 +1,5 @@ name: Meta Issue -description: Report your issues with the repository here! +description: Report general userstyles issues. labels: [meta] body: - type: checkboxes diff --git a/.github/ISSUE_TEMPLATE/userstyle.yml b/.github/ISSUE_TEMPLATE/userstyle.yml index ee21384262..1655cf5726 100644 --- a/.github/ISSUE_TEMPLATE/userstyle.yml +++ b/.github/ISSUE_TEMPLATE/userstyle.yml @@ -1,41 +1,64 @@ # THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND. name: Userstyle Issue -description: Report your problems with any of the userstyles here! +description: Report a problem with a userstyle. body: - - type: checkboxes + - id: prerequisites + type: checkboxes attributes: label: Is there an existing issue outlining your problem? description: Please search to see if an issue already exists for your problem. options: - label: I have searched the existing issues and they do not solve my problem. required: true - - type: dropdown + - id: userstyle + type: dropdown attributes: - label: What userstyles are you seeing the problem on? + label: What userstyle are you seeing the problem on? description: "Don't worry about the `lbl:` prefix, it allows issues to be automatically labeled!" - multiple: true - options: ['lbl:advent-of-code', 'lbl:anilist', 'lbl:brave-search', 'lbl:canvas-lms', 'lbl:chatgpt', 'lbl:chatreplay', 'lbl:chess.com', 'lbl:cinny', 'lbl:codeberg', 'lbl:crowdin', 'lbl:deepl', 'lbl:ecosia', 'lbl:elk', 'lbl:github', 'lbl:hacker-news', 'lbl:homepage', 'lbl:ichi.moe', 'lbl:invidious', 'lbl:invokeai', 'lbl:lastfm', 'lbl:libreddit', 'lbl:mastodon', 'lbl:modrinth', 'lbl:nitter', 'lbl:nixos-search', 'lbl:paste.rs', 'lbl:proton', 'lbl:quizlet', 'lbl:reddit', 'lbl:searxng', 'lbl:substack', 'lbl:tutanota', 'lbl:twitch', 'lbl:vercel', 'lbl:whatsapp-web', 'lbl:wikiwand', 'lbl:youtube'] + multiple: false + options: ["lbl:advent-of-code", "lbl:alacritty.org", "lbl:alternativeto", "lbl:amplenote", "lbl:anichart", "lbl:anilist", "lbl:anonymous-overflow", "lbl:arch-wiki", "lbl:boringproxy", "lbl:brave-search", "lbl:bsky", "lbl:bstats", "lbl:canvas-lms", "lbl:chatgpt", "lbl:chatreplay", "lbl:chess.com", "lbl:cinny", "lbl:claude", "lbl:cobalt", "lbl:codeberg", "lbl:crates.io", "lbl:crowdin", "lbl:deepl", "lbl:deepseek", "lbl:desmos", "lbl:dev.to", "lbl:devdocs", "lbl:docs.deno.com", "lbl:docs.rs", "lbl:duckduckgo", "lbl:ecosia", "lbl:elk", "lbl:formative", "lbl:freedesktop", "lbl:ghostty.org", "lbl:github", "lbl:gleam.run", "lbl:gmail", "lbl:go.dev", "lbl:google", "lbl:google-drive", "lbl:google-gemini", "lbl:google-photos", "lbl:grabify", "lbl:graphite", "lbl:hackage", "lbl:hacker-news", "lbl:have-i-been-pwned", "lbl:holodex", "lbl:home-manager-options-search", "lbl:homepage", "lbl:hoogle", "lbl:hoppscotch", "lbl:hyperpipe", "lbl:ichi.moe", "lbl:indie-wiki-buddy", "lbl:inoreader", "lbl:instagram", "lbl:invidious", "lbl:invokeai", "lbl:jisho", "lbl:keybr.com", "lbl:keyoxide", "lbl:lastfm", "lbl:learn-x-in-y-minutes", "lbl:lemmy", "lbl:libreddit", "lbl:lichess", "lbl:lingva", "lbl:linkedin", "lbl:listenbrainz", "lbl:lobste.rs", "lbl:mastodon", "lbl:mdbook", "lbl:mdn", "lbl:microsoft-word", "lbl:migadu-webmail", "lbl:minesweeper", "lbl:modrinth", "lbl:namemc", "lbl:neovim.io", "lbl:next.js", "lbl:nitter", "lbl:nixos-manual", "lbl:nixos-search", "lbl:nixpkgs-manual", "lbl:npm", "lbl:npmx", "lbl:ollama", "lbl:openmediavault", "lbl:paste.rs", "lbl:perplexity", "lbl:phanpy", "lbl:picrew", "lbl:pinterest", "lbl:planet-minecraft", "lbl:poe", "lbl:porkbun", "lbl:pronouns.cc", "lbl:pronouns.page", "lbl:proton", "lbl:pypi", "lbl:pythonanywhere", "lbl:quizlet", "lbl:raindrop", "lbl:react.dev", "lbl:reddit", "lbl:redlib", "lbl:regex101", "lbl:rentry.co", "lbl:scalar", "lbl:searchix", "lbl:searxng", "lbl:seventv", "lbl:shinigami-eyes", "lbl:snapchat-web", "lbl:spotify-web", "lbl:stack-overflow", "lbl:startpage", "lbl:status.cafe", "lbl:stylus", "lbl:substack", "lbl:syncthing", "lbl:tabnews", "lbl:tldraw", "lbl:trinket", "lbl:tuta", "lbl:twitch", "lbl:twitter", "lbl:vercel", "lbl:vikunja", "lbl:web.dev", "lbl:whatsapp-web", "lbl:wiki.nixos.org", "lbl:wikipedia", "lbl:wikiwand", "lbl:youtube", "lbl:zen-browser-docs"] validations: required: true - - type: textarea + - id: description + type: textarea attributes: - label: Describe your problem. - description: Also tell us, what do you expect to see? + label: Description + description: Describe the problem and what you expect to see instead. placeholder: The navigation bar on the website is highlighted incorrectly... validations: required: true - - type: textarea + - id: screenshots + type: textarea attributes: - label: Attach screenshots. + label: Relevant screenshots description: If applicable, attach screenshots which clearly highlight the issue. - - type: input + - id: browser_version + type: input attributes: - label: What browser(s) are you seeing the problem on? - description: "The browser version is also important, you can find out how to get that info [here](https://github.com/catppuccin/userstyles/blob/main/docs/browsers.md)." + label: Browser version(s) this issue occurs on + description: "To get the browser version, see https://userstyles.catppuccin.com/getting-started/faq/#what-version-of-my-browser-am-i-using." placeholder: Firefox v112.0.2 validations: required: true - - type: textarea + - id: stylus_version + type: input + attributes: + label: Stylus extension version + description: If Stylus is pinned, right-click the extension icon and select "Manage Extension". Otherwise, in the extensions popup, click the settings icon or three dots icon if present and select "Manage Extension". The version is displayed on the resulting page. + placeholder: Stylus 2.3.17 + validations: + required: true + - id: userstyle_version + type: input + attributes: + label: Installed version of the userstyle + description: Versions are listed on Stylus' Manage page. To get the version, click the Stylus extension icon, then in the popup, click Manage. The version is found beside the name of the userstyle. + placeholder: v2025.12.05 + validations: + required: true + - id: additional_comments + type: textarea attributes: label: Any additional comments? - description: Add any information that hasn't been covered in the previous sections! \ No newline at end of file + description: Add any information that hasn't been covered in the previous sections! +# yaml-language-server: $schema=https://json.schemastore.org/github-issue-forms.json diff --git a/.github/PULL_REQUEST_TEMPLATE/userstyle-creation.md b/.github/PULL_REQUEST_TEMPLATE/userstyle-creation.md new file mode 100644 index 0000000000..05d75f5d99 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE/userstyle-creation.md @@ -0,0 +1,38 @@ + + +**Website**: ___ + +**URL**: ___ + +**Description**: + + + +## 🗒 Checklist 🗒 + +- [ ] I have read and followed Catppuccin's [userstyle contributing guidelines](https://userstyles.catppuccin.com/contributing/). + + + +- [ ] I used AI (or AI-assistance) for this change. + +--- + +- [ ] I have read and followed Catppuccin's [userstyle submission guidelines](https://userstyles.catppuccin.com/contributing/creating-userstyles/). +- [ ] I have made a new directory underneath `/styles/`. + - [ ] I have ensured that the new directory is in **lower-kebab-case**. + - [ ] I have named the userstyle `catppuccin.user.less` within the new directory. + - [ ] I have followed the [template](https://github.com/catppuccin/userstyles/blob/main/template/catppuccin.user.less) and kept the preprocessor as [LESS](https://lesscss.org/#overview). +- [ ] I have updated the [`userstyles.yml`](https://github.com/catppuccin/userstyles/blob/main/scripts/userstyles.yml) file with information about the new userstyle. + +## 💬 Comments 💬 + + diff --git a/.github/PULL_REQUEST_TEMPLATE/userstyle-update.md b/.github/PULL_REQUEST_TEMPLATE/userstyle-update.md new file mode 100644 index 0000000000..6700b92432 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE/userstyle-update.md @@ -0,0 +1,29 @@ +## 🗒 Checklist 🗒 + +- [ ] I have read and followed Catppuccin's [userstyle contributing guidelines](https://userstyles.catppuccin.com/contributing/). + + + +- [ ] I used AI (or AI-assistance) for this change. + +## 🔧 What does this fix? 🔧 + + + +## 🔍 Reproduction Steps 🔍 + + + + + diff --git a/.github/issue-labeler.yml b/.github/issue-labeler.yml index 9adfe0eee9..4c40d0a6e4 100644 --- a/.github/issue-labeler.yml +++ b/.github/issue-labeler.yml @@ -1,38 +1,277 @@ # THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND. -advent-of-code: ['(lbl:advent-of-code)'] -anilist: ['(lbl:anilist)'] -brave-search: ['(lbl:brave-search)'] -canvas-lms: ['(lbl:canvas-lms)'] -chatgpt: ['(lbl:chatgpt)'] -chatreplay: ['(lbl:chatreplay)'] -chess.com: ['(lbl:chess.com)'] -cinny: ['(lbl:cinny)'] -codeberg: ['(lbl:codeberg)'] -crowdin: ['(lbl:crowdin)'] -deepl: ['(lbl:deepl)'] -ecosia: ['(lbl:ecosia)'] -elk: ['(lbl:elk)'] -github: ['(lbl:github)'] -hacker-news: ['(lbl:hacker-news)'] -homepage: ['(lbl:homepage)'] -ichi.moe: ['(lbl:ichi.moe)'] -invidious: ['(lbl:invidious)'] -invokeai: ['(lbl:invokeai)'] -lastfm: ['(lbl:lastfm)'] -libreddit: ['(lbl:libreddit)'] -mastodon: ['(lbl:mastodon)'] -modrinth: ['(lbl:modrinth)'] -nitter: ['(lbl:nitter)'] -nixos-search: ['(lbl:nixos-search)'] -paste.rs: ['(lbl:paste.rs)'] -proton: ['(lbl:proton)'] -quizlet: ['(lbl:quizlet)'] -reddit: ['(lbl:reddit)'] -searxng: ['(lbl:searxng)'] -substack: ['(lbl:substack)'] -tutanota: ['(lbl:tutanota)'] -twitch: ['(lbl:twitch)'] -vercel: ['(lbl:vercel)'] -whatsapp-web: ['(lbl:whatsapp-web)'] -wikiwand: ['(lbl:wikiwand)'] -youtube: ['(lbl:youtube)'] \ No newline at end of file +advent-of-code: + - '/lbl:advent-of-code(,.*)?$/gm' +alacritty.org: + - '/lbl:alacritty.org(,.*)?$/gm' +alternativeto: + - '/lbl:alternativeto(,.*)?$/gm' +amplenote: + - '/lbl:amplenote(,.*)?$/gm' +anilist: + - '/lbl:anilist(,.*)?$/gm' +anichart: + - '/lbl:anichart(,.*)?$/gm' +anonymous-overflow: + - '/lbl:anonymous-overflow(,.*)?$/gm' +arch-wiki: + - '/lbl:arch-wiki(,.*)?$/gm' +boringproxy: + - '/lbl:boringproxy(,.*)?$/gm' +brave-search: + - '/lbl:brave-search(,.*)?$/gm' +bsky: + - '/lbl:bsky(,.*)?$/gm' +bstats: + - '/lbl:bstats(,.*)?$/gm' +canvas-lms: + - '/lbl:canvas-lms(,.*)?$/gm' +chatgpt: + - '/lbl:chatgpt(,.*)?$/gm' +chatreplay: + - '/lbl:chatreplay(,.*)?$/gm' +chess.com: + - '/lbl:chess.com(,.*)?$/gm' +cinny: + - '/lbl:cinny(,.*)?$/gm' +claude: + - '/lbl:claude(,.*)?$/gm' +codeberg: + - '/lbl:codeberg(,.*)?$/gm' +cobalt: + - '/lbl:cobalt(,.*)?$/gm' +crates.io: + - '/lbl:crates.io(,.*)?$/gm' +crowdin: + - '/lbl:crowdin(,.*)?$/gm' +deepl: + - '/lbl:deepl(,.*)?$/gm' +deepseek: + - '/lbl:deepseek(,.*)?$/gm' +desmos: + - '/lbl:desmos(,.*)?$/gm' +dev.to: + - '/lbl:dev.to(,.*)?$/gm' +devdocs: + - '/lbl:devdocs(,.*)?$/gm' +docs.deno.com: + - '/lbl:docs.deno.com(,.*)?$/gm' +docs.rs: + - '/lbl:docs.rs(,.*)?$/gm' +duckduckgo: + - '/lbl:duckduckgo(,.*)?$/gm' +ecosia: + - '/lbl:ecosia(,.*)?$/gm' +elk: + - '/lbl:elk(,.*)?$/gm' +freedesktop: + - '/lbl:freedesktop(,.*)?$/gm' +formative: + - '/lbl:formative(,.*)?$/gm' +ghostty.org: + - '/lbl:ghostty.org(,.*)?$/gm' +github: + - '/lbl:github(,.*)?$/gm' +gleam.run: + - '/lbl:gleam.run(,.*)?$/gm' +gmail: + - '/lbl:gmail(,.*)?$/gm' +go.dev: + - '/lbl:go.dev(,.*)?$/gm' +google: + - '/lbl:google(,.*)?$/gm' +google-drive: + - '/lbl:google-drive(,.*)?$/gm' +google-photos: + - '/lbl:google-photos(,.*)?$/gm' +grabify: + - '/lbl:grabify(,.*)?$/gm' +graphite: + - '/lbl:graphite(,.*)?$/gm' +google-gemini: + - '/lbl:google-gemini(,.*)?$/gm' +hackage: + - '/lbl:hackage(,.*)?$/gm' +hacker-news: + - '/lbl:hacker-news(,.*)?$/gm' +have-i-been-pwned: + - '/lbl:have-i-been-pwned(,.*)?$/gm' +holodex: + - '/lbl:holodex(,.*)?$/gm' +home-manager-options-search: + - '/lbl:home-manager-options-search(,.*)?$/gm' +homepage: + - '/lbl:homepage(,.*)?$/gm' +hoogle: + - '/lbl:hoogle(,.*)?$/gm' +hoppscotch: + - '/lbl:hoppscotch(,.*)?$/gm' +learn-x-in-y-minutes: + - '/lbl:learn-x-in-y-minutes(,.*)?$/gm' +hyperpipe: + - '/lbl:hyperpipe(,.*)?$/gm' +ichi.moe: + - '/lbl:ichi.moe(,.*)?$/gm' +inoreader: + - '/lbl:inoreader(,.*)?$/gm' +indie-wiki-buddy: + - '/lbl:indie-wiki-buddy(,.*)?$/gm' +instagram: + - '/lbl:instagram(,.*)?$/gm' +invidious: + - '/lbl:invidious(,.*)?$/gm' +invokeai: + - '/lbl:invokeai(,.*)?$/gm' +jisho: + - '/lbl:jisho(,.*)?$/gm' +keybr.com: + - '/lbl:keybr.com(,.*)?$/gm' +keyoxide: + - '/lbl:keyoxide(,.*)?$/gm' +lastfm: + - '/lbl:lastfm(,.*)?$/gm' +lemmy: + - '/lbl:lemmy(,.*)?$/gm' +libreddit: + - '/lbl:libreddit(,.*)?$/gm' +redlib: + - '/lbl:redlib(,.*)?$/gm' +lichess: + - '/lbl:lichess(,.*)?$/gm' +lingva: + - '/lbl:lingva(,.*)?$/gm' +linkedin: + - '/lbl:linkedin(,.*)?$/gm' +listenbrainz: + - '/lbl:listenbrainz(,.*)?$/gm' +lobste.rs: + - '/lbl:lobste.rs(,.*)?$/gm' +mastodon: + - '/lbl:mastodon(,.*)?$/gm' +mdbook: + - '/lbl:mdbook(,.*)?$/gm' +mdn: + - '/lbl:mdn(,.*)?$/gm' +modrinth: + - '/lbl:modrinth(,.*)?$/gm' +microsoft-word: + - '/lbl:microsoft-word(,.*)?$/gm' +migadu-webmail: + - '/lbl:migadu-webmail(,.*)?$/gm' +minesweeper: + - '/lbl:minesweeper(,.*)?$/gm' +namemc: + - '/lbl:namemc(,.*)?$/gm' +neovim.io: + - '/lbl:neovim.io(,.*)?$/gm' +npmx: + - '/lbl:npmx(,.*)?$/gm' +nitter: + - '/lbl:nitter(,.*)?$/gm' +nixos-manual: + - '/lbl:nixos-manual(,.*)?$/gm' +nixpkgs-manual: + - '/lbl:nixpkgs-manual(,.*)?$/gm' +nixos-search: + - '/lbl:nixos-search(,.*)?$/gm' +wiki.nixos.org: + - '/lbl:wiki.nixos.org(,.*)?$/gm' +npm: + - '/lbl:npm(,.*)?$/gm' +ollama: + - '/lbl:ollama(,.*)?$/gm' +openmediavault: + - '/lbl:openmediavault(,.*)?$/gm' +paste.rs: + - '/lbl:paste.rs(,.*)?$/gm' +perplexity: + - '/lbl:perplexity(,.*)?$/gm' +phanpy: + - '/lbl:phanpy(,.*)?$/gm' +picrew: + - '/lbl:picrew(,.*)?$/gm' +pinterest: + - '/lbl:pinterest(,.*)?$/gm' +planet-minecraft: + - '/lbl:planet-minecraft(,.*)?$/gm' +poe: + - '/lbl:poe(,.*)?$/gm' +porkbun: + - '/lbl:porkbun(,.*)?$/gm' +pronouns.cc: + - '/lbl:pronouns.cc(,.*)?$/gm' +pronouns.page: + - '/lbl:pronouns.page(,.*)?$/gm' +proton: + - '/lbl:proton(,.*)?$/gm' +pypi: + - '/lbl:pypi(,.*)?$/gm' +pythonanywhere: + - '/lbl:pythonanywhere(,.*)?$/gm' +quizlet: + - '/lbl:quizlet(,.*)?$/gm' +raindrop: + - '/lbl:raindrop(,.*)?$/gm' +react.dev: + - '/lbl:react.dev(,.*)?$/gm' +reddit: + - '/lbl:reddit(,.*)?$/gm' +regex101: + - '/lbl:regex101(,.*)?$/gm' +rentry.co: + - '/lbl:rentry.co(,.*)?$/gm' +scalar: + - '/lbl:scalar(,.*)?$/gm' +searchix: + - '/lbl:searchix(,.*)?$/gm' +searxng: + - '/lbl:searxng(,.*)?$/gm' +seventv: + - '/lbl:seventv(,.*)?$/gm' +shinigami-eyes: + - '/lbl:shinigami-eyes(,.*)?$/gm' +snapchat-web: + - '/lbl:snapchat-web(,.*)?$/gm' +spotify-web: + - '/lbl:spotify-web(,.*)?$/gm' +stack-overflow: + - '/lbl:stack-overflow(,.*)?$/gm' +startpage: + - '/lbl:startpage(,.*)?$/gm' +status.cafe: + - '/lbl:status.cafe(,.*)?$/gm' +stylus: + - '/lbl:stylus(,.*)?$/gm' +substack: + - '/lbl:substack(,.*)?$/gm' +syncthing: + - '/lbl:syncthing(,.*)?$/gm' +tabnews: + - '/lbl:tabnews(,.*)?$/gm' +tldraw: + - '/lbl:tldraw(,.*)?$/gm' +trinket: + - '/lbl:trinket(,.*)?$/gm' +tuta: + - '/lbl:tuta(,.*)?$/gm' +twitch: + - '/lbl:twitch(,.*)?$/gm' +twitter: + - '/lbl:twitter(,.*)?$/gm' +vercel: + - '/lbl:vercel(,.*)?$/gm' +next.js: + - '/lbl:next.js(,.*)?$/gm' +vikunja: + - '/lbl:vikunja(,.*)?$/gm' +web.dev: + - '/lbl:web.dev(,.*)?$/gm' +whatsapp-web: + - '/lbl:whatsapp-web(,.*)?$/gm' +wikipedia: + - '/lbl:wikipedia(,.*)?$/gm' +wikiwand: + - '/lbl:wikiwand(,.*)?$/gm' +youtube: + - '/lbl:youtube(,.*)?$/gm' +zen-browser-docs: + - '/lbl:zen-browser-docs(,.*)?$/gm' diff --git a/.github/labels.yml b/.github/labels.yml new file mode 100644 index 0000000000..836b41bace --- /dev/null +++ b/.github/labels.yml @@ -0,0 +1,415 @@ +# THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND. +- name: advent-of-code + description: Advent Of Code + color: '#eed49f' +- name: alacritty.org + description: alacritty.org + color: '#f5a97f' +- name: alternativeto + description: AlternativeTo + color: '#7dc4e4' +- name: amplenote + description: Amplenote + color: '#8aadf4' +- name: anilist + description: AniList + color: '#91d7e3' +- name: anichart + description: AniChart + color: '#91d7e3' +- name: anonymous-overflow + description: Anonymous Overflow + color: '#a6da95' +- name: arch-wiki + description: Arch Wiki + color: '#8aadf4' +- name: boringproxy + description: boringproxy + color: '#cad3f5' +- name: brave-search + description: Brave Search + color: '#f5a97f' +- name: bsky + description: Bluesky Social + color: '#8aadf4' +- name: bstats + description: bStats + color: '#a6da95' +- name: canvas-lms + description: Canvas LMS + color: '#ed8796' +- name: chatgpt + description: ChatGPT + color: '#a6da95' +- name: chatreplay + description: ChatReplay + color: '#f5a97f' +- name: chess.com + description: Chess.com + color: '#a6da95' +- name: cinny + description: Cinny + color: '#cad3f5' +- name: claude + description: Claude + color: '#f5a97f' +- name: codeberg + description: Codeberg + color: '#8aadf4' +- name: cobalt + description: cobalt + color: '#cad3f5' +- name: crates.io + description: crates.io + color: '#eed49f' +- name: crowdin + description: Crowdin + color: '#cad3f5' +- name: deepl + description: DeepL + color: '#8aadf4' +- name: deepseek + description: DeepSeek + color: '#8aadf4' +- name: desmos + description: Desmos + color: '#a6da95' +- name: dev.to + description: DEV Community + color: '#cad3f5' +- name: devdocs + description: DevDocs + color: '#cad3f5' +- name: docs.deno.com + description: docs.deno.com + color: '#a6da95' +- name: docs.rs + description: docs.rs + color: '#eed49f' +- name: duckduckgo + description: DuckDuckGo + color: '#f5a97f' +- name: ecosia + description: Ecosia + color: '#a6da95' +- name: elk + description: Elk + color: '#f5a97f' +- name: freedesktop + description: freedesktop.org + color: '#8aadf4' +- name: formative + description: Formative + color: '#8aadf4' +- name: ghostty.org + description: Ghostty.org + color: '#8aadf4' +- name: github + description: GitHub + color: '#cad3f5' +- name: gleam.run + description: gleam.run + color: '#f5bde6' +- name: gmail + description: Gmail + color: '#f5a97f' +- name: go.dev + description: go.dev + color: '#7dc4e4' +- name: google + description: Google + color: '#7dc4e4' +- name: google-drive + description: Google Drive + color: '#8aadf4' +- name: google-photos + description: Google Photos + color: '#7dc4e4' +- name: grabify + description: Grabify + color: '#8bd5ca' +- name: graphite + description: Graphite + color: '#cad3f5' +- name: google-gemini + description: Google Gemini + color: '#c6a0f6' +- name: hackage + description: Hackage + color: '#c6a0f6' +- name: hacker-news + description: Hacker News + color: '#f5a97f' +- name: have-i-been-pwned + description: Have I Been Pwned + color: '#8aadf4' +- name: holodex + description: Holodex + color: '#f5bde6' +- name: home-manager-options-search + description: Home Manager Options Search + color: '#8aadf4' +- name: homepage + description: homepage + color: '#91d7e3' +- name: hoogle + description: Hoogle + color: '#c6a0f6' +- name: hoppscotch + description: Hoppscotch + color: '#a6da95' +- name: learn-x-in-y-minutes + description: Learn X in Y Minutes + color: '#8aadf4' +- name: hyperpipe + description: Hyperpipe + color: '#8bd5ca' +- name: ichi.moe + description: ichi.moe + color: '#f5bde6' +- name: inoreader + description: inoreader + color: '#8aadf4' +- name: indie-wiki-buddy + description: Indie Wiki Buddy + color: '#8aadf4' +- name: instagram + description: Instagram + color: '#f5bde6' +- name: invidious + description: Invidious + color: '#ed8796' +- name: invokeai + description: InvokeAI + color: '#eed49f' +- name: jisho + description: Jisho + color: '#a6da95' +- name: keybr.com + description: keybr.com + color: '#cad3f5' +- name: keyoxide + description: Keyoxide + color: '#c6a0f6' +- name: lastfm + description: Last.fm + color: '#ed8796' +- name: lemmy + description: Lemmy + color: '#a6da95' +- name: libreddit + description: Libreddit + color: '#f5a97f' +- name: redlib + description: Redlib + color: '#f5a97f' +- name: lichess + description: Lichess + color: '#cad3f5' +- name: lingva + description: Lingva + color: '#a6da95' +- name: linkedin + description: LinkedIn + color: '#8aadf4' +- name: listenbrainz + description: ListenBrainz + color: '#f5a97f' +- name: lobste.rs + description: Lobsters + color: '#ed8796' +- name: mastodon + description: Mastodon + color: '#b7bdf8' +- name: mdbook + description: mdBook + color: '#cad3f5' +- name: mdn + description: MDN + color: '#cad3f5' +- name: modrinth + description: Modrinth + color: '#a6da95' +- name: microsoft-word + description: Microsoft Word + color: '#8aadf4' +- name: migadu-webmail + description: Migadu Webmail + color: '#8aadf4' +- name: minesweeper + description: Minesweeper Online + color: '#cad3f5' +- name: namemc + description: NameMC + color: '#8aadf4' +- name: neovim.io + description: neovim.io + color: '#a6da95' +- name: npmx + description: npmx + color: '#cad3f5' +- name: nitter + description: Nitter + color: '#8aadf4' +- name: nixos-manual + description: NixOS Manual + color: '#8aadf4' +- name: nixpkgs-manual + description: Nixpkgs Manual + color: '#8aadf4' +- name: nixos-search + description: NixOS Search + color: '#8aadf4' +- name: wiki.nixos.org + description: NixOS Wiki + color: '#8aadf4' +- name: npm + description: npm + color: '#ed8796' +- name: ollama + description: Ollama + color: '#cad3f5' +- name: openmediavault + description: openmediavault + color: '#91d7e3' +- name: paste.rs + description: paste.rs + color: '#f5a97f' +- name: perplexity + description: Perplexity + color: '#8bd5ca' +- name: phanpy + description: Phanpy + color: '#8aadf4' +- name: picrew + description: Picrew + color: '#eed49f' +- name: pinterest + description: Pinterest + color: '#ed8796' +- name: planet-minecraft + description: Planet Minecraft + color: '#a6da95' +- name: poe + description: Poe + color: '#8aadf4' +- name: porkbun + description: Porkbun + color: '#f5bde6' +- name: pronouns.cc + description: pronouns.cc + color: '#c6a0f6' +- name: pronouns.page + description: Pronouns.page + color: '#f5bde6' +- name: proton + description: Proton + color: '#c6a0f6' +- name: pypi + description: PyPI + color: '#7dc4e4' +- name: pythonanywhere + description: PythonAnywhere + color: '#7dc4e4' +- name: quizlet + description: Quizlet + color: '#c6a0f6' +- name: raindrop + description: Raindrop + color: '#8aadf4' +- name: react.dev + description: React.dev + color: '#7dc4e4' +- name: reddit + description: Reddit + color: '#ed8796' +- name: regex101 + description: regex101 + color: '#8aadf4' +- name: rentry.co + description: Rentry.co + color: '#cad3f5' +- name: scalar + description: Scalar + color: '#cad3f5' +- name: searchix + description: Searchix + color: '#8aadf4' +- name: searxng + description: SearXNG + color: '#8aadf4' +- name: seventv + description: 7TV + color: '#7dc4e4' +- name: shinigami-eyes + description: Shinigami Eyes + color: '#c6a0f6' +- name: snapchat-web + description: Snapchat Web + color: '#eed49f' +- name: spotify-web + description: Spotify Web + color: '#a6da95' +- name: stack-overflow + description: Stack Overflow + color: '#f5a97f' +- name: startpage + description: Startpage + color: '#b7bdf8' +- name: status.cafe + description: status.cafe + color: '#7dc4e4' +- name: stylus + description: Stylus + color: '#8bd5ca' +- name: substack + description: Substack + color: '#f5a97f' +- name: syncthing + description: Syncthing + color: '#7dc4e4' +- name: tabnews + description: TabNews + color: '#cad3f5' +- name: tldraw + description: tldraw + color: '#cad3f5' +- name: trinket + description: Trinket + color: '#8aadf4' +- name: tuta + description: Tuta + color: '#ee99a0' +- name: twitch + description: Twitch + color: '#c6a0f6' +- name: twitter + description: Twitter + color: '#8aadf4' +- name: vercel + description: Vercel + color: '#cad3f5' +- name: next.js + description: Next.js + color: '#cad3f5' +- name: vikunja + description: Vikunja + color: '#8aadf4' +- name: web.dev + description: web.dev + color: '#8aadf4' +- name: whatsapp-web + description: WhatsApp Web + color: '#a6da95' +- name: wikipedia + description: Wikipedia + color: '#cad3f5' +- name: wikiwand + description: Wikiwand + color: '#cad3f5' +- name: youtube + description: YouTube + color: '#ed8796' +- name: zen-browser-docs + description: Zen Browser Docs + color: '#f5a97f' diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml index f6d87c25a7..65ed7d57fb 100644 --- a/.github/pr-labeler.yml +++ b/.github/pr-labeler.yml @@ -1,38 +1,139 @@ # THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND. advent-of-code: styles/advent-of-code/**/* +alacritty.org: styles/alacritty.org/**/* +alternativeto: styles/alternativeto/**/* +amplenote: styles/amplenote/**/* anilist: styles/anilist/**/* +anichart: styles/anilist/**/* +anonymous-overflow: styles/anonymous-overflow/**/* +arch-wiki: styles/arch-wiki/**/* +boringproxy: styles/boringproxy/**/* brave-search: styles/brave-search/**/* +bsky: styles/bsky/**/* +bstats: styles/bstats/**/* canvas-lms: styles/canvas-lms/**/* chatgpt: styles/chatgpt/**/* chatreplay: styles/chatreplay/**/* chess.com: styles/chess.com/**/* cinny: styles/cinny/**/* +claude: styles/claude/**/* codeberg: styles/codeberg/**/* +cobalt: styles/cobalt/**/* +crates.io: styles/crates.io/**/* crowdin: styles/crowdin/**/* deepl: styles/deepl/**/* +deepseek: styles/deepseek/**/* +desmos: styles/desmos/**/* +dev.to: styles/dev.to/**/* +devdocs: styles/devdocs/**/* +docs.deno.com: styles/docs.deno.com/**/* +docs.rs: styles/docs.rs/**/* +duckduckgo: styles/duckduckgo/**/* ecosia: styles/ecosia/**/* elk: styles/elk/**/* +freedesktop: styles/freedesktop/**/* +formative: styles/formative/**/* +ghostty.org: styles/ghostty.org/**/* github: styles/github/**/* +gleam.run: styles/gleam.run/**/* +gmail: styles/gmail/**/* +go.dev: styles/go.dev/**/* +google: styles/google/**/* +google-drive: styles/google-drive/**/* +google-photos: styles/google-photos/**/* +grabify: styles/grabify/**/* +graphite: styles/graphite/**/* +google-gemini: styles/google-gemini/**/* +hackage: styles/hackage/**/* hacker-news: styles/hacker-news/**/* +have-i-been-pwned: styles/have-i-been-pwned/**/* +holodex: styles/holodex/**/* +home-manager-options-search: styles/home-manager-options-search/**/* homepage: styles/homepage/**/* +hoogle: styles/hoogle/**/* +hoppscotch: styles/hoppscotch/**/* +learn-x-in-y-minutes: styles/learn-x-in-y-minutes/**/* +hyperpipe: styles/hyperpipe/**/* ichi.moe: styles/ichi.moe/**/* +inoreader: styles/inoreader/**/* +indie-wiki-buddy: styles/indie-wiki-buddy/**/* +instagram: styles/instagram/**/* invidious: styles/invidious/**/* invokeai: styles/invokeai/**/* +jisho: styles/jisho/**/* +keybr.com: styles/keybr.com/**/* +keyoxide: styles/keyoxide/**/* lastfm: styles/lastfm/**/* +lemmy: styles/lemmy/**/* libreddit: styles/libreddit/**/* +redlib: styles/libreddit/**/* +lichess: styles/lichess/**/* +lingva: styles/lingva/**/* +linkedin: styles/linkedin/**/* +listenbrainz: styles/listenbrainz/**/* +lobste.rs: styles/lobste.rs/**/* mastodon: styles/mastodon/**/* +mdbook: styles/mdbook/**/* +mdn: styles/mdn/**/* modrinth: styles/modrinth/**/* +microsoft-word: styles/microsoft-word/**/* +migadu-webmail: styles/migadu-webmail/**/* +minesweeper: styles/minesweeper/**/* +namemc: styles/namemc/**/* +neovim.io: styles/neovim.io/**/* +npmx: styles/npmx/**/* nitter: styles/nitter/**/* +nixos-manual: styles/nixos-manual/**/* +nixpkgs-manual: styles/nixos-manual/**/* nixos-search: styles/nixos-search/**/* +wiki.nixos.org: styles/wiki.nixos.org/**/* +npm: styles/npm/**/* +ollama: styles/ollama/**/* +openmediavault: styles/openmediavault/**/* paste.rs: styles/paste.rs/**/* +perplexity: styles/perplexity/**/* +phanpy: styles/phanpy/**/* +picrew: styles/picrew/**/* +pinterest: styles/pinterest/**/* +planet-minecraft: styles/planet-minecraft/**/* +poe: styles/poe/**/* +porkbun: styles/porkbun/**/* +pronouns.cc: styles/pronouns.cc/**/* +pronouns.page: styles/pronouns.page/**/* proton: styles/proton/**/* +pypi: styles/pypi/**/* +pythonanywhere: styles/pythonanywhere/**/* quizlet: styles/quizlet/**/* +raindrop: styles/raindrop/**/* +react.dev: styles/react.dev/**/* reddit: styles/reddit/**/* +regex101: styles/regex101/**/* +rentry.co: styles/rentry.co/**/* +scalar: styles/scalar/**/* +searchix: styles/searchix/**/* searxng: styles/searxng/**/* +seventv: styles/seventv/**/* +shinigami-eyes: styles/shinigami-eyes/**/* +snapchat-web: styles/snapchat-web/**/* +spotify-web: styles/spotify-web/**/* +stack-overflow: styles/stack-overflow/**/* +startpage: styles/startpage/**/* +status.cafe: styles/status.cafe/**/* +stylus: styles/stylus/**/* substack: styles/substack/**/* -tutanota: styles/tutanota/**/* +syncthing: styles/syncthing/**/* +tabnews: styles/tabnews/**/* +tldraw: styles/tldraw/**/* +trinket: styles/trinket/**/* +tuta: styles/tuta/**/* twitch: styles/twitch/**/* +twitter: styles/twitter/**/* vercel: styles/vercel/**/* +next.js: styles/vercel/**/* +vikunja: styles/vikunja/**/* +web.dev: styles/web.dev/**/* whatsapp-web: styles/whatsapp-web/**/* +wikipedia: styles/wikipedia/**/* wikiwand: styles/wikiwand/**/* -youtube: styles/youtube/**/* \ No newline at end of file +youtube: styles/youtube/**/* +zen-browser-docs: styles/zen-browser-docs/**/* diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index be7a0802b4..5869cfb599 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,37 +1,7 @@ - +Please go the the `Preview` tab and click on the link to the appropriate pull request template. - +Are you... -## 🎉 Theme for Website 🎉 - - - -## 💬 Additional Comments 💬 - - - -## 🗒 Checklist 🗒 - -- [ ] I have read and followed Catppuccin's [submission guidelines](https://github.com/catppuccin/userstyles/blob/main/docs/userstyle-creation.md). -- [ ] I have made a new directory underneath `/styles/` containing the contents of the [`/template`](https://github.com/catppuccin/userstyles/blob/main/template/) directory. - - [ ] I have ensured that the new directory is in **lower-kebab-case**. - - [ ] I have followed the template and kept the preprocessor as [LESS](https://lesscss.org/#overview). -- [ ] I have made sure to update the - [`userstyles.yml`](https://github.com/catppuccin/userstyles/blob/main/src/userstyles.yml) - file with information about the new userstyle. -- [ ] I have included the following files: - - `catppuccin.user.css` - all the CSS for the userstyle, based on the - template. - - `assets/mocha.webp`, `assets/macchiato.webp`, `assets/frappe.webp` and - `assets/latte.webp` - individual screenshots of the themed website, in all 4 - Catppuccin flavors. - - `catwalk.webp` - image of all individual screenshots stitched together, - generated via [catwalk](https://github.com/catppuccin/toolbox#-catwalk). +- [Adding a new userstyle?](?expand=1&template=userstyle-creation.md) +- [Updating/fixing an existing userstyle?](?expand=1&template=userstyle-update.md) +- Something else? Delete this text and write a short, meaningful description of your changes instead. diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml new file mode 100644 index 0000000000..a4ac1ef033 --- /dev/null +++ b/.github/workflows/build.yml @@ -0,0 +1,35 @@ +name: Build Stylus Export + +on: + workflow_dispatch: + push: + branches: [main] + paths-ignore: ["docs/**"] + +jobs: + build: + if: github.repository == 'catppuccin/userstyles' + runs-on: ubuntu-latest + permissions: + # Give the default GITHUB_TOKEN write permission to commit and push the + # added or changed files to the repository. + contents: write + + steps: + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 + with: + token: ${{ secrets.USERSTYLES_TOKEN }} + + - name: Setup Deno + uses: denoland/setup-deno@v2 + with: + deno-version: v2.3.5 + cache: true + + - name: Generate Stylus import + run: deno task ci:stylus-import + + - name: Upload release artifact + run: gh release upload --clobber all-userstyles-export ./dist/import.json + env: + GH_TOKEN: ${{ github.token }} diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000000..b26d21a5f0 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,63 @@ +name: CI + +on: + push: + branches: [main] + +jobs: + ci: + runs-on: ubuntu-latest + permissions: + # Give the default GITHUB_TOKEN write permission to commit and push the + # added or changed files to the repository. + contents: write + + # Prevent infinite loops by checking if the last commit was autogenerated. + if: ${{ github.repository == 'catppuccin/userstyles' && github.event.commits[0].author.name != 'github-actions' }} + steps: + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 + with: + token: ${{ secrets.USERSTYLES_TOKEN }} + fetch-depth: 2 + + - name: Setup Deno + uses: denoland/setup-deno@v2 + with: + deno-version: v2.3.5 + cache: true + + - name: Bump changed userstyles + run: | + git diff --name-only HEAD^1 HEAD | grep '^styles/.*catppuccin\.user\.less$' | xargs deno task ci:bump + + - name: Commit changes + uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9 + with: + message: "chore: bump changed userstyles" + default_author: github_actions + push: false + + - name: Update generated files + run: deno task ci:generate + env: + GITHUB_TOKEN: ${{ secrets.USERSTYLES_TOKEN }} + + - name: Commit changes + uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9 + with: + message: "chore: update generated files" + default_author: github_actions + push: false + + - name: Format files + run: deno fmt + + - name: Commit changes + uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9 + with: + message: "style: deno fmt" + default_author: github_actions + push: false + + - name: Push changes + run: git push origin "HEAD:${{ github.ref }}" --atomic diff --git a/.github/workflows/deno-check.yml b/.github/workflows/deno-check.yml new file mode 100644 index 0000000000..3a37242698 --- /dev/null +++ b/.github/workflows/deno-check.yml @@ -0,0 +1,28 @@ +name: Deno Check + +on: + push: + branches: [main] + paths: ["**/*.ts"] + pull_request: + branches: [main] + paths: ["**/*.ts"] + +jobs: + check: + if: github.repository == 'catppuccin/userstyles' + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 + + - name: Setup Deno + uses: denoland/setup-deno@v2 + with: + deno-version: v2.3.5 + cache: true + + - name: Check + run: | + deno lint + deno check **/*.ts diff --git a/.github/workflows/deno-lock.yml b/.github/workflows/deno-lock.yml new file mode 100644 index 0000000000..9fcefdfa63 --- /dev/null +++ b/.github/workflows/deno-lock.yml @@ -0,0 +1,32 @@ +name: Update Deno Lock + +on: + pull_request: + branches: [main] + paths: ["deno.json"] + +jobs: + deno-lock: + name: Update Deno lock + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 + with: + ref: ${{ github.event.pull_request.head.ref }} + + - name: Setup Deno + uses: denoland/setup-deno@v2 + with: + deno-version: v2.3.5 + cache: true + + - name: Regenerate Deno lock + run: deno cache **/*.ts --lock=deno.lock + + - name: Commit & push changes + uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9 + with: + message: "chore: regenerate `deno.lock`" + default_author: github_actions + push: true diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml new file mode 100644 index 0000000000..b9d9b0b90b --- /dev/null +++ b/.github/workflows/docs.yml @@ -0,0 +1,35 @@ +name: Deploy Docs to GH Pages + +on: + push: + branches: [main] + paths: + - "docs/**" + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 + - name: Build & Upload Site + uses: withastro/action@a4407e937037e68022f04ae1c068d3634f08bc8d # v4 + with: + path: ./docs + package-manager: pnpm@10.14.0 + + deploy: + needs: build + runs-on: ubuntu-latest + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4 diff --git a/.github/workflows/file-checker.yml b/.github/workflows/file-checker.yml deleted file mode 100644 index 9050e5e148..0000000000 --- a/.github/workflows/file-checker.yml +++ /dev/null @@ -1,50 +0,0 @@ -name: File Checker - -on: - workflow_dispatch: - pull_request: - -jobs: - file-checker: - name: Required Files Included - runs-on: ubuntu-latest - - steps: - - uses: actions/checkout@v3 - - name: Check Files - run: | - MISSING_FILES=0 - echo "# Missing Files Found 😢" >> $GITHUB_STEP_SUMMARY - echo "" >> $GITHUB_STEP_SUMMARY - - required_files=( - "catppuccin.user.css" - "assets/mocha.webp" - "assets/macchiato.webp" - "assets/frappe.webp" - "assets/latte.webp" - "assets/catwalk.webp" - ) - - find_files() { - local path=$1 - for file in "${required_files[@]}"; do - if [ ! -f "$path/$file" ]; then - MISSING_FILES=1 - echo "- $path/$file" >> $GITHUB_STEP_SUMMARY - fi - done - } - - for dir in styles/*; do - if [ -d "$dir" ]; then - find_files "$dir" - fi - done - - if [ $MISSING_FILES -eq 0 ]; then - echo "# No Missing Files 🙌" > $GITHUB_STEP_SUMMARY - fi - - exit $MISSING_FILES -# yaml-language-server: $schema=https://json.schemastore.org/github-workflow.json diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml deleted file mode 100644 index 394c8ec1d3..0000000000 --- a/.github/workflows/format.yml +++ /dev/null @@ -1,22 +0,0 @@ -name: Prettier - -on: - push: - branches: [main] - -jobs: - prettier: - name: Format Code - runs-on: ubuntu-latest - - steps: - - uses: actions/checkout@v3 - with: - token: ${{ secrets.USERSTYLES_TOKEN }} - - name: Run Prettier - uses: creyD/prettier_action@v4.3 - with: - commit_options: "--author 'github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>'" - commit_message: "style: format code with prettier" - prettier_options: "--write styles/**/*.css" - prettier_version: "2.8.4" diff --git a/.github/workflows/generate.yml b/.github/workflows/generate.yml deleted file mode 100644 index fb8454f3c7..0000000000 --- a/.github/workflows/generate.yml +++ /dev/null @@ -1,45 +0,0 @@ -name: File Generator - -on: - workflow_dispatch: - push: - paths: - - "src/**/*" - -env: - DENO_DIR: deno_cache - -jobs: - generate-health-files: - runs-on: ubuntu-latest - name: Generate Health Files - - steps: - - uses: actions/checkout@v3 - with: - token: ${{ secrets.USERSTYLES_TOKEN }} - ref: ${{ github.ref }} - - - name: Set up Deno - uses: denoland/setup-deno@v1 - with: - deno-version: v1.x - - - name: Cache Deno dependencies - uses: actions/cache@v3 - with: - key: ${{ hashFiles('src/generate/deno.lock') }} - path: ${{ env.DENO_DIR }} - - - name: Update Health Files - working-directory: src/generate - run: ./generate.ts - - - name: Push Changes - uses: stefanzweifel/git-auto-commit-action@v4 - if: ${{ github.repository == 'catppuccin/userstyles' && github.ref == 'refs/heads/main' }} - with: - commit_message: "chore: generate health files" - commit_author: "github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>" - branch: ${{ github.ref }} -# yaml-language-server: $schema=https://json.schemastore.org/github-workflow.json diff --git a/.github/workflows/issues.yml b/.github/workflows/issues.yml index 4b3365ed87..1746b21619 100644 --- a/.github/workflows/issues.yml +++ b/.github/workflows/issues.yml @@ -7,15 +7,14 @@ on: jobs: triage: - name: Add Labels runs-on: ubuntu-latest steps: - - uses: github/issue-labeler@v3.1 - with: - repo-token: "${{ secrets.GITHUB_TOKEN }}" - configuration-path: .github/issue-labeler.yml - enable-versioned-regex: 0 - include-title: 1 - sync-labels: 1 -# yaml-language-server: $schema=https://json.schemastore.org/github-workflow.json + - name: Add issue labels + uses: github/issue-labeler@c1b0f9f52a63158c4adc09425e858e87b32e9685 # v3.4 + with: + repo-token: "${{ secrets.GITHUB_TOKEN }}" + configuration-path: .github/issue-labeler.yml + enable-versioned-regex: 0 + include-title: 1 + sync-labels: 1 diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml new file mode 100644 index 0000000000..ed8dccc5c2 --- /dev/null +++ b/.github/workflows/lint.yml @@ -0,0 +1,26 @@ +name: Lint Userstyles + +on: + workflow_dispatch: + pull_request: + paths-ignore: ["docs/**"] + push: + branches: [main] + paths-ignore: ["docs/**"] + +jobs: + lint: + if: github.repository == 'catppuccin/userstyles' + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 + + - name: Setup Deno + uses: denoland/setup-deno@v2 + with: + deno-version: v2.3.5 + cache: true + + - name: Lint + run: deno task lint diff --git a/.github/workflows/maintainers.yml b/.github/workflows/maintainers.yml new file mode 100644 index 0000000000..a8baf49cea --- /dev/null +++ b/.github/workflows/maintainers.yml @@ -0,0 +1,26 @@ +name: Sync Maintainers + +on: + workflow_dispatch: + push: + branches: [main] + paths: ["scripts/userstyles.yml"] + +jobs: + sync-maintainers: + if: github.repository == 'catppuccin/userstyles' + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 + + - name: Setup Deno + uses: denoland/setup-deno@v2 + with: + deno-version: v2.3.5 + cache: true + + - name: Sync maintainers + run: deno task ci:sync-maintainers + env: + GITHUB_TOKEN: ${{ secrets.USERSTYLES_TOKEN }} diff --git a/.github/workflows/pull-requests.yml b/.github/workflows/pull-requests.yml index bf18429f6e..94f70b653f 100644 --- a/.github/workflows/pull-requests.yml +++ b/.github/workflows/pull-requests.yml @@ -5,15 +5,16 @@ on: jobs: triage: - name: Add Labels runs-on: ubuntu-latest + if: ${{ !contains(github.event.pull_request.title, '(tree-wide)') && !contains(github.event.pull_request.title, '(treewide)') }} steps: - - uses: actions/checkout@v3 - - uses: actions/labeler@v4.0.3 + - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6 + + - name: Add pull request labels + uses: actions/labeler@ac9175f8a1f3625fd0d4fb234536d26811351594 # v4.3.0 with: configuration-path: .github/pr-labeler.yml sync-labels: true env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} -# yaml-language-server: $schema=https://json.schemastore.org/github-workflow.json diff --git a/.github/workflows/sync-labels.yml b/.github/workflows/sync-labels.yml new file mode 100644 index 0000000000..8862ff28af --- /dev/null +++ b/.github/workflows/sync-labels.yml @@ -0,0 +1,18 @@ +name: Sync Labels + +on: + workflow_dispatch: + push: + branches: [main] + paths: [".github/labels.yml"] + +jobs: + sync: + if: github.repository == 'catppuccin/userstyles' + runs-on: ubuntu-latest + + steps: + - name: Sync labels + uses: r7kamura/github-label-sync-action@v0 + with: + allow_added_labels: "true" diff --git a/.github/workflows/typos.yml b/.github/workflows/typos.yml deleted file mode 100644 index eec53ac19c..0000000000 --- a/.github/workflows/typos.yml +++ /dev/null @@ -1,28 +0,0 @@ -name: Typo Checker - -on: - pull_request: - push: - branches: [main] - -jobs: - run: - name: Spell Check - runs-on: ubuntu-latest - - steps: - - uses: actions/checkout@v3 - - uses: crate-ci/typos@master - id: typos - continue-on-error: true - - # 'continue-on-error' will always succeed, we should exit based on the outcome and not the conclusion - # ref: https://docs.github.com/en/actions/learn-github-actions/contexts#steps-context - - name: Fail When Typos Are Found in Pull Request - if: ${{ github.event_name == 'pull_request' && steps.typos.outcome != 'success' }} - run: "exit 1" - - # We always want this check to pass on branch 'main' but continue to fail on PRs - - name: Pass When Branch 'main' - if: ${{ github.repository == 'catppuccin/userstyles' && github.ref == 'refs/heads/main' }} - run: "exit 0" diff --git a/.gitignore b/.gitignore index 8d408b0458..c48d869c2c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,10 @@ deno_cache/ +__pycache__/ node_modules/ +dist/ +.direnv/ + +.idea/ +.vscode/ + .DS_Store -.idea -.vscode diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index ce5bd52cf0..0000000000 --- a/.prettierignore +++ /dev/null @@ -1,2 +0,0 @@ -/styles/codeberg/ -/styles/reddit/ diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index 9a8be1221c..0000000000 --- a/.prettierrc +++ /dev/null @@ -1,10 +0,0 @@ -{ - "overrides": [ - { - "files": "styles/**/*.css", - "options": { - "parser": "less" - } - } - ] -} diff --git a/.stylelintrc.js b/.stylelintrc.js new file mode 100644 index 0000000000..f0f92128e4 --- /dev/null +++ b/.stylelintrc.js @@ -0,0 +1,189 @@ +// @ts-check + +/** + * @type {import('npm:stylelint').Config} + */ +export default { + extends: "stylelint-config-standard", + plugins: [ + "./scripts/lint/stylelint-custom/index.js", + ], + customSyntax: "postcss-less", + rules: { + "catppuccin/optimized-svgs": true, + "catppuccin/color-operations": true, + "catppuccin/no-redundant-parent-selector": true, + + "selector-class-pattern": null, + "custom-property-pattern": null, + "selector-id-pattern": null, + + "rule-empty-line-before": null, + "comment-empty-line-before": null, + "custom-property-empty-line-before": null, + "at-rule-empty-line-before": null, + "declaration-empty-line-before": null, + + "property-no-vendor-prefix": null, + "alpha-value-notation": null, + "color-function-notation": null, + "hue-degree-notation": null, + "keyframes-name-pattern": null, + + // Needed for Stylus v1.5.35 workaround, see #341 + "media-feature-range-notation": "prefix", + + // These are not invalid with Less. + "no-invalid-position-at-import-rule": null, + "no-invalid-double-slash-comments": null, + + // font-* properties are disallowed anyway. + "font-family-no-missing-generic-family-keyword": null, + + "at-rule-disallowed-list": [ + ["/^font.*/"], + { + /** + * @param {string} atRule + */ + message: (atRule) => `At-rule ${atRule} is not allowed`, + }, + ], + "property-disallowed-list": [ + [ + // Disallow setting custom fonts. + "/font.*/", + + // Ideally we could disallow these, but CSS continues to be gross. + // "/animation.*/", + // "/transition.*/", + + // Prefer `border-color` over `border`, `outline-color` over `outline`, etc. + "border", + "border-top", + "border-right", + "border-bottom", + "border-left", + "outline", + ], + { + /** + * @param {string} prop + */ + message: (prop) => { + if (prop.includes("border") || ["outline"].includes(prop)) { + return `Use \`${prop}-color\` instead of \`${prop}\``; + } else { + return `Property \`${prop}\` is not allowed`; + } + }, + }, + ], + + "selector-type-no-unknown": null, + "function-no-unknown": [ + true, + { + ignoreFunctions: [ + // Generated from https://lesscss.org/functions/ via `Array.from(document.querySelectorAll('.section-content h3.docs-heading'), heading => heading.textContent.replace('\n', ''))`. + "%", + "abs", + "acos", + "alpha", + "argb", + "asin", + "atan", + "average", + "blue", + "boolean", + "ceil", + "color", + "contrast", + "convert", + "cos", + "darken", + "data-uri", + "default", + "desaturate", + "difference", + "e", + "each", + "escape", + "exclusion", + "extract", + "fade", + "fadein", + "fadeout", + "floor", + "get-unit", + "green", + "greyscale", + "hardlight", + "hsl", + "hsla", + "hsv", + "hsva", + "hsvhue", + "hsvsaturation", + "hsvvalue", + "hue", + "if", + "image-height", + "image-size", + "image-width", + "iscolor", + "isdefined", + "isem", + "iskeyword", + "isnumber", + "ispercentage", + "ispixel", + "isruleset", + "isstring", + "isunit", + "isurl", + "length", + "lighten", + "lightness", + "luma", + "luminance", + "max", + "min", + "mix", + "mod", + "multiply", + "negation", + "overlay", + "percentage", + "pi", + "pow", + "range", + "red", + "replace", + "rgb", + "rgba", + "round", + "saturate", + "saturation", + "screen", + "shade", + "sin", + "softlight", + "spin", + "sqrt", + "svg-gradient", + "tan", + "tint", + "unit", + ], + }, + ], + "function-name-case": null, + "at-rule-no-vendor-prefix": null, + + "no-descending-specificity": null, + "selector-not-notation": null, + + "import-notation": null, + }, +}; diff --git a/.typos.toml b/.typos.toml deleted file mode 100644 index f715d14815..0000000000 --- a/.typos.toml +++ /dev/null @@ -1,18 +0,0 @@ -[default] -locale = "en-us" - -# maintainer names -[default.extend-words] -Ren = "Ren" - -# catppuccin python spelling -[type.py.extend-identifiers] -Flavour = "Flavour" -flavour = "flavour" -flavours = "flavours" - -[type.css] -extend-ignore-re = [ - # css classnames - '\.[\w\d\-_]+(\[[\w\d\-_]+\])?', -] diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000000..74baffcc47 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["denoland.vscode-deno"] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..82f594ebeb --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "deno.enable": true, + "editor.defaultFormatter": "denoland.vscode-deno", + "markdown.extension.toc.updateOnSave": false +} diff --git a/README.md b/README.md index 41c130ec3b..e97a129c78 100644 --- a/README.md +++ b/README.md @@ -5,142 +5,26 @@ -
- Install - · - Contributing - · - Userstyles -
-

- + + + +

- - Stargazers - - Discussions - - Issues +A curated collection of soothing pastel themes for your favorite websites and web applications.

-This repository is a curated collection of customized themes designed for various websites and web applications. -These themes showcase delightful pastel colors, creating a soothing and visually pleasing experience when browsing the web. +

-Userstyles are essentially modified CSS files which can be applied to a specific website, -giving it a unique and appealing aesthetic in line with Catppuccin's color palette. +Visit userstyles.catppuccin.com to get started.

  -## 🖥️ Install - -To install these userstyles: - -1. Install [Stylus](https://github.com/openstyles/stylus) - - [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/)/[Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) - extension. -2. Enable CSP Patching from `Stylus Settings` > `Advanced`. -3. Install the theme: - - `https://github.com/catppuccin/userstyles/raw/main/styles//catppuccin.user.css` - - Replacing `` with the name of the userstyle. -4. Enjoy! - -  - -## 👐 Contributing - -> **Note**
-> If you would like to submit a userstyle or learn how to port Catppuccin to a website, please refer to the [userstyle-creation.md](docs/userstyle-creation.md). - -See [CONTRIBUTING.md](docs/CONTRIBUTING.md) - -  - -## 🖌 Userstyles - - - -
-💭 Development tools - -- [paste.rs](styles/paste.rs) -- [Vercel](styles/vercel) - -
-
-🔎 Search Engines - -- [Brave Search](styles/brave-search) -- [Ecosia](styles/ecosia) -- [NixOS Search](styles/nixos-search) -- [SearXNG](styles/searxng) - -
-
-💬 Messaging - -- [Cinny](styles/cinny) -- [WhatsApp Web](styles/whatsapp-web) - -
-
-🗂️ Productivity - -- [Canvas LMS](styles/canvas-lms) -- [ChatGPT](styles/chatgpt) -- [Codeberg](styles/codeberg) -- [Crowdin](styles/crowdin) -- [DeepL](styles/deepl) -- [GitHub](styles/github) -- [homepage](styles/homepage) -- [ichi.moe](styles/ichi.moe) -- [InvokeAI](styles/invokeai) -- [Proton](styles/proton) -- [Quizlet](styles/quizlet) -- [Tutanota](styles/tutanota) -- [WikiWand](styles/wikiwand) - -
-
-✨ Social - -- [Elk](styles/elk) -- [Hacker News](styles/hacker-news) -- [Invidious](styles/invidious) -- [Libreddit](styles/libreddit) -- [Mastodon](styles/mastodon) -- [Nitter](styles/nitter) -- [Reddit](styles/reddit) -- [Substack](styles/substack) -- [Twitch](styles/twitch) -- [YouTube](styles/youtube) - -
-
-🌈 Leisure - -- [AniList, AniChart](styles/anilist) -- [ChatReplay](styles/chatreplay) -- [Last.fm](styles/lastfm) - -
-
-🎮 Games - -- [Advent Of Code](styles/advent-of-code) -- [Chess.com](styles/chess.com) -- [Modrinth](styles/modrinth) - -
- - -  -

Copyright © 2021-present Catppuccin Org diff --git a/deno.json b/deno.json new file mode 100644 index 0000000000..5b117fa20d --- /dev/null +++ b/deno.json @@ -0,0 +1,64 @@ +{ + "imports": { + "@/": "./scripts/", + "@actions/core": "npm:@actions/core@1.11.1", + "@catppuccin/catppuccin/": "https://raw.githubusercontent.com/catppuccin/catppuccin/d4f82739e687cfd19d168be355367fdbbcc8e029/", + "@catppuccin/palette": "npm:@catppuccin/palette@^1.7.1", + "@octokit/rest": "npm:@octokit/rest@^21.0.2", + "@std/assert": "jsr:@std/assert@^1.0.9", + "@std/async": "jsr:@std/async@^1.2.0", + "@std/cli": "jsr:@std/cli@^1.0.8", + "@std/fmt": "jsr:@std/fmt@^1.0.2", + "@std/fs": "jsr:@std/fs@^1.0.6", + "@std/http": "jsr:@std/http@^1.0.25", + "@std/path": "jsr:@std/path@^1.0.8", + "@std/testing": "jsr:@std/testing@^1.0.17", + "@std/yaml": "jsr:@std/yaml@^1.0.5", + "ajv": "npm:ajv@8.18.0", + "handlebars": "npm:handlebars@4.7.8", + "json-schema-to-typescript": "npm:json-schema-to-typescript@^15.0.3", + "less": "npm:less@4.2.2", + "postcss-less": "npm:postcss-less@6.0.0", + "postcss-value-parser": "npm:postcss-value-parser@4.2.0", + "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", + "svgo": "npm:svgo@4.0.0", + "type-fest": "npm:type-fest@^4.30.2", + "usercss-meta": "npm:usercss-meta@0.12.0" + }, + "tasks": { + "ci:generate": "deno run -A ./scripts/generate/main.ts", + "ci:stylus-import": "deno run -A ./scripts/stylus-import/main.ts", + "ci:sync-maintainers": "deno run -A ./scripts/sync-maintainers/main.ts", + "ci:update-types": "deno run -A ./scripts/types/update-types.ts", + "ci:bump": "deno run -A ./scripts/bump-version/main.ts", + "lint": "deno run -A ./scripts/lint/main.ts", + "lint:fix": "deno task lint --fix", + "serve": "deno run -A ./scripts/serve/main.ts", + "test": "deno test -A", + "test:update": "deno test -A -- --update" + }, + "nodeModulesDir": "auto", + "fmt": { + "indentWidth": 2, + "proseWrap": "never", + "exclude": [ + ".github/ISSUE_TEMPLATE/userstyle.yml", + ".github/*.yml", + "styles/**/*.md", + "scripts/generate/templates/userstyle.md", + "docs/pnpm-lock.yaml" + ] + }, + "lint": { + "rules": { + "tags": [ + "recommended" + ], + "include": [ + "verbatim-module-syntax" + ] + } + } +} diff --git a/deno.lock b/deno.lock new file mode 100644 index 0000000000..4ba3c226e2 --- /dev/null +++ b/deno.lock @@ -0,0 +1,1166 @@ +{ + "version": "5", + "specifiers": { + "jsr:@std/assert@^1.0.17": "1.0.19", + "jsr:@std/assert@^1.0.9": "1.0.19", + "jsr:@std/async@^1.1.0": "1.2.0", + "jsr:@std/async@^1.2.0": "1.2.0", + "jsr:@std/cli@^1.0.28": "1.0.28", + "jsr:@std/cli@^1.0.8": "1.0.28", + "jsr:@std/data-structures@^1.0.10": "1.0.10", + "jsr:@std/encoding@^1.0.10": "1.0.10", + "jsr:@std/fmt@^1.0.2": "1.0.9", + "jsr:@std/fmt@^1.0.9": "1.0.9", + "jsr:@std/fs@^1.0.22": "1.0.23", + "jsr:@std/fs@^1.0.23": "1.0.23", + "jsr:@std/fs@^1.0.6": "1.0.23", + "jsr:@std/html@^1.0.5": "1.0.5", + "jsr:@std/http@^1.0.25": "1.0.25", + "jsr:@std/internal@^1.0.12": "1.0.12", + "jsr:@std/internal@^1.0.5": "1.0.5", + "jsr:@std/media-types@^1.1.0": "1.1.0", + "jsr:@std/net@^1.0.6": "1.0.6", + "jsr:@std/path@^1.0.8": "1.1.4", + "jsr:@std/path@^1.1.4": "1.1.4", + "jsr:@std/streams@^1.0.17": "1.0.17", + "jsr:@std/testing@*": "1.0.17", + "jsr:@std/testing@^1.0.17": "1.0.17", + "jsr:@std/yaml@^1.0.5": "1.0.5", + "npm:@actions/core@1.11.1": "1.11.1", + "npm:@catppuccin/palette@^1.7.1": "1.7.1", + "npm:@octokit/rest@^21.0.2": "21.0.2_@octokit+core@6.1.2", + "npm:@types/less@*": "3.0.7", + "npm:@types/node@*": "22.5.4", + "npm:ajv@8.17.1": "8.17.1", + "npm:ajv@8.18.0": "8.18.0", + "npm:handlebars@4.7.8": "4.7.8", + "npm:json-schema-to-typescript@^15.0.3": "15.0.3", + "npm:less@4.2.2": "4.2.2", + "npm:postcss-less@6.0.0": "6.0.0_postcss@8.4.49", + "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@*": "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@4.0.0": "4.0.0", + "npm:type-fest@^4.30.2": "4.30.2", + "npm:usercss-meta@0.12.0": "0.12.0" + }, + "jsr": { + "@std/assert@1.0.9": { + "integrity": "a9f0c611a869cc791b26f523eec54c7e187aab7932c2c8e8bea0622d13680dcd", + "dependencies": [ + "jsr:@std/internal@^1.0.5" + ] + }, + "@std/assert@1.0.19": { + "integrity": "eaada96ee120cb980bc47e040f82814d786fe8162ecc53c91d8df60b8755991e", + "dependencies": [ + "jsr:@std/internal@^1.0.12" + ] + }, + "@std/async@1.2.0": { + "integrity": "c059c6f6d95ca7cc012ae8e8d7164d1697113d54b0b679e4372b354b11c2dee5" + }, + "@std/cli@1.0.8": { + "integrity": "3762d8dc9a373715c08d871c38d45e637b25266f013a1d0bbe560bca409de94e" + }, + "@std/cli@1.0.28": { + "integrity": "74ef9b976db59ca6b23a5283469c9072be6276853807a83ec6c7ce412135c70a", + "dependencies": [ + "jsr:@std/fmt@^1.0.9", + "jsr:@std/internal@^1.0.12" + ] + }, + "@std/data-structures@1.0.10": { + "integrity": "f574f86b0e07c69b9edc555fcc814b57d29258bad39fd5a34ba8a80ecf033cfe" + }, + "@std/encoding@1.0.10": { + "integrity": "8783c6384a2d13abd5e9e87a7ae0520a30e9f56aeeaa3bdf910a3eaaf5c811a1" + }, + "@std/fmt@1.0.3": { + "integrity": "97765c16aa32245ff4e2204ecf7d8562496a3cb8592340a80e7e554e0bb9149f" + }, + "@std/fmt@1.0.9": { + "integrity": "2487343e8899fb2be5d0e3d35013e54477ada198854e52dd05ed0422eddcabe0" + }, + "@std/fs@1.0.6": { + "integrity": "42b56e1e41b75583a21d5a37f6a6a27de9f510bcd36c0c85791d685ca0b85fa2", + "dependencies": [ + "jsr:@std/path@^1.0.8" + ] + }, + "@std/fs@1.0.23": { + "integrity": "3ecbae4ce4fee03b180fa710caff36bb5adb66631c46a6460aaad49515565a37", + "dependencies": [ + "jsr:@std/internal@^1.0.12", + "jsr:@std/path@^1.1.4" + ] + }, + "@std/html@1.0.5": { + "integrity": "4e2d693f474cae8c16a920fa5e15a3b72267b94b84667f11a50c6dd1cb18d35e" + }, + "@std/http@1.0.25": { + "integrity": "577b4252290af1097132812b339fffdd55fb0f4aeb98ff11bdbf67998aa17193", + "dependencies": [ + "jsr:@std/cli@^1.0.28", + "jsr:@std/encoding", + "jsr:@std/fmt@^1.0.9", + "jsr:@std/fs@^1.0.23", + "jsr:@std/html", + "jsr:@std/media-types", + "jsr:@std/net", + "jsr:@std/path@^1.1.4", + "jsr:@std/streams" + ] + }, + "@std/internal@1.0.5": { + "integrity": "54a546004f769c1ac9e025abd15a76b6671ddc9687e2313b67376125650dc7ba" + }, + "@std/internal@1.0.12": { + "integrity": "972a634fd5bc34b242024402972cd5143eac68d8dffaca5eaa4dba30ce17b027" + }, + "@std/media-types@1.1.0": { + "integrity": "c9d093f0c05c3512932b330e3cc1fe1d627b301db33a4c2c2185c02471d6eaa4" + }, + "@std/net@1.0.6": { + "integrity": "110735f93e95bb9feb95790a8b1d1bf69ec0dc74f3f97a00a76ea5efea25500c" + }, + "@std/path@1.0.8": { + "integrity": "548fa456bb6a04d3c1a1e7477986b6cffbce95102d0bb447c67c4ee70e0364be" + }, + "@std/path@1.1.4": { + "integrity": "1d2d43f39efb1b42f0b1882a25486647cb851481862dc7313390b2bb044314b5", + "dependencies": [ + "jsr:@std/internal@^1.0.12" + ] + }, + "@std/streams@1.0.17": { + "integrity": "7859f3d9deed83cf4b41f19223d4a67661b3d3819e9fc117698f493bf5992140" + }, + "@std/testing@1.0.17": { + "integrity": "87bdc2700fa98249d48a17cd72413352d3d3680dcfbdb64947fd0982d6bbf681", + "dependencies": [ + "jsr:@std/assert@^1.0.17", + "jsr:@std/async@^1.1.0", + "jsr:@std/data-structures", + "jsr:@std/fs@^1.0.22", + "jsr:@std/internal@^1.0.12", + "jsr:@std/path@^1.1.4" + ] + }, + "@std/yaml@1.0.5": { + "integrity": "71ba3d334305ee2149391931508b2c293a8490f94a337eef3a09cade1a2a2742" + } + }, + "npm": { + "@actions/core@1.11.1": { + "integrity": "sha512-hXJCSrkwfA46Vd9Z3q4cpEpHB1rL5NG04+/rbqW9d3+CSvtB1tYe8UTpAlixa1vj0m/ULglfEK2UKxMGxCxv5A==", + "dependencies": [ + "@actions/exec", + "@actions/http-client" + ] + }, + "@actions/exec@1.1.1": { + "integrity": "sha512-+sCcHHbVdk93a0XT19ECtO/gIXoxvdsgQLzb2fE2/5sIZmWQuluYyjPQtrtTHdU1YzTZ7bAPN4sITq2xi1679w==", + "dependencies": [ + "@actions/io" + ] + }, + "@actions/http-client@2.2.3": { + "integrity": "sha512-mx8hyJi/hjFvbPokCg4uRd4ZX78t+YyRPtnKWwIl+RzNaVuFpQHfmlGVfsKEJN8LwTCvL+DfVgAM04XaHkm6bA==", + "dependencies": [ + "tunnel", + "undici" + ] + }, + "@actions/io@1.1.3": { + "integrity": "sha512-wi9JjgKLYS7U/z8PPbco+PvTb/nRWjeoFlJ1Qer83k/3C5PHQi28hiVdeE2kHXmIL99mQFawx8qt/JPjZilJ8Q==" + }, + "@apidevtools/json-schema-ref-parser@11.7.3": { + "integrity": "sha512-WApSdLdXEBb/1FUPca2lteASewEfpjEYJ8oXZP+0gExK5qSfsEKBKcA+WjY6Q4wvXwyv0+W6Kvc372pSceib9w==", + "dependencies": [ + "@jsdevtools/ono", + "@types/json-schema", + "js-yaml" + ] + }, + "@babel/code-frame@7.26.2": { + "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==", + "dependencies": [ + "@babel/helper-validator-identifier", + "js-tokens", + "picocolors" + ] + }, + "@babel/helper-validator-identifier@7.25.9": { + "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==" + }, + "@catppuccin/palette@1.7.1": { + "integrity": "sha512-aRc1tbzrevOTV7nFTT9SRdF26w/MIwT4Jwt4fDMc9itRZUDXCuEDBLyz4TQMlqO9ZP8mf5Hu4Jr6D03NLFc6Gw==" + }, + "@csstools/css-parser-algorithms@3.0.4_@csstools+css-tokenizer@3.0.3": { + "integrity": "sha512-Up7rBoV77rv29d3uKHUIVubz1BTcgyUK72IvCQAbfbMv584xHcGKCKbWh7i8hPrRJ7qU4Y8IO3IY9m+iTB7P3A==", + "dependencies": [ + "@csstools/css-tokenizer" + ] + }, + "@csstools/css-tokenizer@3.0.3": { + "integrity": "sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw==" + }, + "@csstools/media-query-list-parser@4.0.2_@csstools+css-parser-algorithms@3.0.4__@csstools+css-tokenizer@3.0.3_@csstools+css-tokenizer@3.0.3": { + "integrity": "sha512-EUos465uvVvMJehckATTlNqGj4UJWkTmdWuDMjqvSUkjGpmOyFZBVwb4knxCm/k2GMTXY+c/5RkdndzFYWeX5A==", + "dependencies": [ + "@csstools/css-parser-algorithms", + "@csstools/css-tokenizer" + ] + }, + "@csstools/selector-specificity@5.0.0_postcss-selector-parser@7.0.0": { + "integrity": "sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==", + "dependencies": [ + "postcss-selector-parser" + ] + }, + "@dual-bundle/import-meta-resolve@4.1.0": { + "integrity": "sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==" + }, + "@fastify/busboy@2.1.1": { + "integrity": "sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==" + }, + "@jsdevtools/ono@7.1.3": { + "integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==" + }, + "@nodelib/fs.scandir@2.1.5": { + "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", + "dependencies": [ + "@nodelib/fs.stat", + "run-parallel" + ] + }, + "@nodelib/fs.stat@2.0.5": { + "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==" + }, + "@nodelib/fs.walk@1.2.8": { + "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", + "dependencies": [ + "@nodelib/fs.scandir", + "fastq" + ] + }, + "@octokit/auth-token@5.1.1": { + "integrity": "sha512-rh3G3wDO8J9wSjfI436JUKzHIxq8NaiL0tVeB2aXmG6p/9859aUOAjA9pmSPNGGZxfwmaJ9ozOJImuNVJdpvbA==" + }, + "@octokit/core@6.1.2": { + "integrity": "sha512-hEb7Ma4cGJGEUNOAVmyfdB/3WirWMg5hDuNFVejGEDFqupeOysLc2sG6HJxY2etBp5YQu5Wtxwi020jS9xlUwg==", + "dependencies": [ + "@octokit/auth-token", + "@octokit/graphql", + "@octokit/request", + "@octokit/request-error", + "@octokit/types", + "before-after-hook", + "universal-user-agent" + ] + }, + "@octokit/endpoint@10.1.1": { + "integrity": "sha512-JYjh5rMOwXMJyUpj028cu0Gbp7qe/ihxfJMLc8VZBMMqSwLgOxDI1911gV4Enl1QSavAQNJcwmwBF9M0VvLh6Q==", + "dependencies": [ + "@octokit/types", + "universal-user-agent" + ] + }, + "@octokit/graphql@8.1.1": { + "integrity": "sha512-ukiRmuHTi6ebQx/HFRCXKbDlOh/7xEV6QUXaE7MJEKGNAncGI/STSbOkl12qVXZrfZdpXctx5O9X1AIaebiDBg==", + "dependencies": [ + "@octokit/request", + "@octokit/types", + "universal-user-agent" + ] + }, + "@octokit/openapi-types@22.2.0": { + "integrity": "sha512-QBhVjcUa9W7Wwhm6DBFu6ZZ+1/t/oYxqc2tp81Pi41YNuJinbFRx8B133qVOrAaBbF7D/m0Et6f9/pZt9Rc+tg==" + }, + "@octokit/plugin-paginate-rest@11.3.6_@octokit+core@6.1.2": { + "integrity": "sha512-zcvqqf/+TicbTCa/Z+3w4eBJcAxCFymtc0UAIsR3dEVoNilWld4oXdscQ3laXamTszUZdusw97K8+DrbFiOwjw==", + "dependencies": [ + "@octokit/core", + "@octokit/types" + ] + }, + "@octokit/plugin-request-log@5.3.1_@octokit+core@6.1.2": { + "integrity": "sha512-n/lNeCtq+9ofhC15xzmJCNKP2BWTv8Ih2TTy+jatNCCq/gQP/V7rK3fjIfuz0pDWDALO/o/4QY4hyOF6TQQFUw==", + "dependencies": [ + "@octokit/core" + ] + }, + "@octokit/plugin-rest-endpoint-methods@13.2.6_@octokit+core@6.1.2": { + "integrity": "sha512-wMsdyHMjSfKjGINkdGKki06VEkgdEldIGstIEyGX0wbYHGByOwN/KiM+hAAlUwAtPkP3gvXtVQA9L3ITdV2tVw==", + "dependencies": [ + "@octokit/core", + "@octokit/types" + ] + }, + "@octokit/request-error@6.1.5": { + "integrity": "sha512-IlBTfGX8Yn/oFPMwSfvugfncK2EwRLjzbrpifNaMY8o/HTEAFqCA1FZxjD9cWvSKBHgrIhc4CSBIzMxiLsbzFQ==", + "dependencies": [ + "@octokit/types" + ] + }, + "@octokit/request@9.1.3": { + "integrity": "sha512-V+TFhu5fdF3K58rs1pGUJIDH5RZLbZm5BI+MNF+6o/ssFNT4vWlCh/tVpF3NxGtP15HUxTTMUbsG5llAuU2CZA==", + "dependencies": [ + "@octokit/endpoint", + "@octokit/request-error", + "@octokit/types", + "universal-user-agent" + ] + }, + "@octokit/rest@21.0.2_@octokit+core@6.1.2": { + "integrity": "sha512-+CiLisCoyWmYicH25y1cDfCrv41kRSvTq6pPWtRroRJzhsCZWZyCqGyI8foJT5LmScADSwRAnr/xo+eewL04wQ==", + "dependencies": [ + "@octokit/core", + "@octokit/plugin-paginate-rest", + "@octokit/plugin-request-log", + "@octokit/plugin-rest-endpoint-methods" + ] + }, + "@octokit/types@13.6.2": { + "integrity": "sha512-WpbZfZUcZU77DrSW4wbsSgTPfKcp286q3ItaIgvSbBpZJlu6mnYXAkjZz6LVZPXkEvLIM8McanyZejKTYUHipA==", + "dependencies": [ + "@octokit/openapi-types" + ] + }, + "@types/json-schema@7.0.15": { + "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==" + }, + "@types/less@3.0.7": { + "integrity": "sha512-+SD1DrM8EwJsilPFSR1IMMGWOTg5sO1waewoJ1k3BHCvU07zQThy8t2wTfxvHz//R0uK3koAUl9WbWwal0H+YA==" + }, + "@types/lodash@4.17.13": { + "integrity": "sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==" + }, + "@types/node@22.5.4": { + "integrity": "sha512-FDuKUJQm/ju9fT/SeX/6+gBzoPzlVCzfzmGkwKvRHQVxi4BntVbyIwf6a4Xn62mrvndLiml6z/UBXIdEVjQLXg==", + "dependencies": [ + "undici-types" + ] + }, + "ajv@8.17.1": { + "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", + "dependencies": [ + "fast-deep-equal", + "fast-uri", + "json-schema-traverse", + "require-from-string" + ] + }, + "ajv@8.18.0": { + "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==", + "dependencies": [ + "fast-deep-equal", + "fast-uri", + "json-schema-traverse", + "require-from-string" + ] + }, + "ansi-regex@5.0.1": { + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==" + }, + "ansi-styles@4.3.0": { + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": [ + "color-convert" + ] + }, + "argparse@2.0.1": { + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" + }, + "array-union@2.1.0": { + "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==" + }, + "astral-regex@2.0.0": { + "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==" + }, + "balanced-match@2.0.0": { + "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==" + }, + "before-after-hook@3.0.2": { + "integrity": "sha512-Nik3Sc0ncrMK4UUdXQmAnRtzmNQTAAXmXIopizwZ1W1t8QmfJj+zL4OA2I7XPTPW5z5TDqv4hRo/JzouDJnX3A==" + }, + "boolbase@1.0.0": { + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" + }, + "braces@3.0.3": { + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "dependencies": [ + "fill-range" + ] + }, + "callsites@3.1.0": { + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==" + }, + "color-convert@2.0.1": { + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dependencies": [ + "color-name" + ] + }, + "color-name@1.1.4": { + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "colord@2.9.3": { + "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==" + }, + "commander@11.1.0": { + "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==" + }, + "copy-anything@2.0.6": { + "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==", + "dependencies": [ + "is-what" + ] + }, + "cosmiconfig@9.0.0": { + "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==", + "dependencies": [ + "env-paths", + "import-fresh", + "js-yaml", + "parse-json" + ] + }, + "css-functions-list@3.2.3": { + "integrity": "sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==" + }, + "css-select@5.1.0": { + "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", + "dependencies": [ + "boolbase", + "css-what", + "domhandler", + "domutils", + "nth-check" + ] + }, + "css-tree@2.2.1": { + "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", + "dependencies": [ + "mdn-data@2.0.28", + "source-map-js" + ] + }, + "css-tree@3.1.0": { + "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==", + "dependencies": [ + "mdn-data@2.12.2", + "source-map-js" + ] + }, + "css-what@6.1.0": { + "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==" + }, + "cssesc@3.0.0": { + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "bin": true + }, + "csso@5.0.5": { + "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", + "dependencies": [ + "css-tree@2.2.1" + ] + }, + "debug@4.4.0": { + "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==", + "dependencies": [ + "ms" + ] + }, + "dir-glob@3.0.1": { + "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", + "dependencies": [ + "path-type" + ] + }, + "dom-serializer@2.0.0": { + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "dependencies": [ + "domelementtype", + "domhandler", + "entities" + ] + }, + "domelementtype@2.3.0": { + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==" + }, + "domhandler@5.0.3": { + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "dependencies": [ + "domelementtype" + ] + }, + "domutils@3.2.2": { + "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==", + "dependencies": [ + "dom-serializer", + "domelementtype", + "domhandler" + ] + }, + "emoji-regex@8.0.0": { + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" + }, + "entities@4.5.0": { + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==" + }, + "env-paths@2.2.1": { + "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==" + }, + "errno@0.1.8": { + "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", + "dependencies": [ + "prr" + ], + "bin": true + }, + "error-ex@1.3.2": { + "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "dependencies": [ + "is-arrayish" + ] + }, + "fast-deep-equal@3.1.3": { + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" + }, + "fast-glob@3.3.2": { + "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", + "dependencies": [ + "@nodelib/fs.stat", + "@nodelib/fs.walk", + "glob-parent", + "merge2", + "micromatch" + ] + }, + "fast-uri@3.0.3": { + "integrity": "sha512-aLrHthzCjH5He4Z2H9YZ+v6Ujb9ocRuW6ZzkJQOrTxleEijANq4v1TsaPaVG1PZcuurEzrLcWRyYBYXD5cEiaw==" + }, + "fastest-levenshtein@1.0.16": { + "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==" + }, + "fastq@1.17.1": { + "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==", + "dependencies": [ + "reusify" + ] + }, + "fdir@6.4.2_picomatch@4.0.2": { + "integrity": "sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==", + "dependencies": [ + "picomatch@4.0.2" + ], + "optionalPeers": [ + "picomatch@4.0.2" + ] + }, + "file-entry-cache@9.1.0": { + "integrity": "sha512-/pqPFG+FdxWQj+/WSuzXSDaNzxgTLr/OrR1QuqfEZzDakpdYE70PwUxL7BPUa8hpjbvY1+qvCl8k+8Tq34xJgg==", + "dependencies": [ + "flat-cache" + ] + }, + "fill-range@7.1.1": { + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", + "dependencies": [ + "to-regex-range" + ] + }, + "flat-cache@5.0.0": { + "integrity": "sha512-JrqFmyUl2PnPi1OvLyTVHnQvwQ0S+e6lGSwu8OkAZlSaNIZciTY2H/cOOROxsBA1m/LZNHDsqAgDZt6akWcjsQ==", + "dependencies": [ + "flatted", + "keyv" + ] + }, + "flatted@3.3.2": { + "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==" + }, + "glob-parent@5.1.2": { + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dependencies": [ + "is-glob" + ] + }, + "global-modules@2.0.0": { + "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==", + "dependencies": [ + "global-prefix" + ] + }, + "global-prefix@3.0.0": { + "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==", + "dependencies": [ + "ini", + "kind-of", + "which" + ] + }, + "globby@11.1.0": { + "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", + "dependencies": [ + "array-union", + "dir-glob", + "fast-glob", + "ignore@5.3.2", + "merge2", + "slash" + ] + }, + "globjoin@0.1.4": { + "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==" + }, + "graceful-fs@4.2.11": { + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==" + }, + "handlebars@4.7.8": { + "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==", + "dependencies": [ + "minimist", + "neo-async", + "source-map", + "wordwrap" + ], + "optionalDependencies": [ + "uglify-js" + ], + "bin": true + }, + "has-flag@4.0.0": { + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" + }, + "html-tags@3.3.1": { + "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==" + }, + "iconv-lite@0.6.3": { + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dependencies": [ + "safer-buffer" + ] + }, + "ignore@5.3.2": { + "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==" + }, + "ignore@6.0.2": { + "integrity": "sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==" + }, + "image-size@0.5.5": { + "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==", + "bin": true + }, + "import-fresh@3.3.0": { + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dependencies": [ + "parent-module", + "resolve-from@4.0.0" + ] + }, + "imurmurhash@0.1.4": { + "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==" + }, + "ini@1.3.8": { + "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==" + }, + "is-arrayish@0.2.1": { + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==" + }, + "is-extglob@2.1.1": { + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==" + }, + "is-fullwidth-code-point@3.0.0": { + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==" + }, + "is-glob@4.0.3": { + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dependencies": [ + "is-extglob" + ] + }, + "is-number@7.0.0": { + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==" + }, + "is-plain-object@5.0.0": { + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==" + }, + "is-what@3.14.1": { + "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==" + }, + "isexe@2.0.0": { + "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==" + }, + "js-tokens@4.0.0": { + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, + "js-yaml@4.1.0": { + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dependencies": [ + "argparse" + ], + "bin": true + }, + "json-buffer@3.0.1": { + "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==" + }, + "json-parse-even-better-errors@2.3.1": { + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==" + }, + "json-schema-to-typescript@15.0.3": { + "integrity": "sha512-iOKdzTUWEVM4nlxpFudFsWyUiu/Jakkga4OZPEt7CGoSEsAsUgdOZqR6pcgx2STBek9Gm4hcarJpXSzIvZ/hKA==", + "dependencies": [ + "@apidevtools/json-schema-ref-parser", + "@types/json-schema", + "@types/lodash", + "is-glob", + "js-yaml", + "lodash", + "minimist", + "prettier", + "tinyglobby" + ], + "bin": true + }, + "json-schema-traverse@1.0.0": { + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" + }, + "keyv@4.5.4": { + "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==", + "dependencies": [ + "json-buffer" + ] + }, + "kind-of@6.0.3": { + "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==" + }, + "known-css-properties@0.35.0": { + "integrity": "sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==" + }, + "less@4.2.2": { + "integrity": "sha512-tkuLHQlvWUTeQ3doAqnHbNn8T6WX1KA8yvbKG9x4VtKtIjHsVKQZCH11zRgAfbDAXC2UNIg/K9BYAAcEzUIrNg==", + "dependencies": [ + "copy-anything", + "parse-node-version", + "tslib" + ], + "optionalDependencies": [ + "errno", + "graceful-fs", + "image-size", + "make-dir", + "mime", + "needle", + "source-map" + ], + "bin": true + }, + "lines-and-columns@1.2.4": { + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" + }, + "lodash.truncate@4.4.2": { + "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==" + }, + "lodash@4.17.21": { + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "make-dir@2.1.0": { + "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", + "dependencies": [ + "pify", + "semver" + ] + }, + "mathml-tag-names@2.1.3": { + "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==" + }, + "mdn-data@2.0.28": { + "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==" + }, + "mdn-data@2.12.2": { + "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==" + }, + "meow@13.2.0": { + "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==" + }, + "merge2@1.4.1": { + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==" + }, + "micromatch@4.0.8": { + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", + "dependencies": [ + "braces", + "picomatch@2.3.1" + ] + }, + "mime@1.6.0": { + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "bin": true + }, + "minimist@1.2.8": { + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==" + }, + "ms@2.1.3": { + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" + }, + "nanoid@3.3.8": { + "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==" + }, + "normalize-path@3.0.0": { + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" + }, + "nth-check@2.1.1": { + "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", + "dependencies": [ + "boolbase" + ] + }, + "parent-module@1.0.1": { + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dependencies": [ + "callsites" + ] + }, + "parse-json@5.2.0": { + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dependencies": [ + "@babel/code-frame", + "error-ex", + "json-parse-even-better-errors", + "lines-and-columns" + ] + }, + "parse-node-version@1.0.1": { + "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==" + }, + "path-type@4.0.0": { + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==" + }, + "picocolors@1.1.1": { + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==" + }, + "picomatch@2.3.1": { + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==" + }, + "picomatch@4.0.2": { + "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==" + }, + "pify@4.0.1": { + "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==" + }, + "postcss-less@6.0.0_postcss@8.4.49": { + "integrity": "sha512-FPX16mQLyEjLzEuuJtxA8X3ejDLNGGEG503d2YGZR5Ask1SpDN8KmZUMpzCvyalWRywAn1n1VOA5dcqfCLo5rg==", + "dependencies": [ + "postcss" + ] + }, + "postcss-resolve-nested-selector@0.1.6": { + "integrity": "sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==" + }, + "postcss-safe-parser@7.0.1_postcss@8.4.49": { + "integrity": "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==", + "dependencies": [ + "postcss" + ] + }, + "postcss-selector-parser@7.0.0": { + "integrity": "sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==", + "dependencies": [ + "cssesc", + "util-deprecate" + ] + }, + "postcss-value-parser@4.2.0": { + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" + }, + "postcss@8.4.49": { + "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", + "dependencies": [ + "nanoid", + "picocolors", + "source-map-js" + ] + }, + "prettier@3.4.2": { + "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==", + "bin": true + }, + "prr@1.0.1": { + "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==" + }, + "queue-microtask@1.2.3": { + "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==" + }, + "require-from-string@2.0.2": { + "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==" + }, + "resolve-from@4.0.0": { + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==" + }, + "resolve-from@5.0.0": { + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==" + }, + "reusify@1.0.4": { + "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==" + }, + "run-parallel@1.2.0": { + "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", + "dependencies": [ + "queue-microtask" + ] + }, + "safer-buffer@2.1.2": { + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" + }, + "sax@1.4.1": { + "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==" + }, + "semver@5.7.2": { + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", + "bin": true + }, + "signal-exit@4.1.0": { + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==" + }, + "slash@3.0.0": { + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==" + }, + "slice-ansi@4.0.0": { + "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==", + "dependencies": [ + "ansi-styles", + "astral-regex", + "is-fullwidth-code-point" + ] + }, + "source-map-js@1.2.1": { + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==" + }, + "source-map@0.6.1": { + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" + }, + "string-width@4.2.3": { + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dependencies": [ + "emoji-regex", + "is-fullwidth-code-point", + "strip-ansi" + ] + }, + "strip-ansi@6.0.1": { + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dependencies": [ + "ansi-regex" + ] + }, + "stylelint-config-recommended@14.0.1_stylelint@16.12.0__@csstools+css-tokenizer@3.0.3__@csstools+css-parser-algorithms@3.0.4___@csstools+css-tokenizer@3.0.3__postcss-selector-parser@7.0.0__postcss@8.4.49": { + "integrity": "sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==", + "dependencies": [ + "stylelint" + ] + }, + "stylelint-config-standard@36.0.1_stylelint@16.12.0__@csstools+css-tokenizer@3.0.3__@csstools+css-parser-algorithms@3.0.4___@csstools+css-tokenizer@3.0.3__postcss-selector-parser@7.0.0__postcss@8.4.49": { + "integrity": "sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==", + "dependencies": [ + "stylelint", + "stylelint-config-recommended" + ] + }, + "stylelint@16.12.0_@csstools+css-tokenizer@3.0.3_@csstools+css-parser-algorithms@3.0.4__@csstools+css-tokenizer@3.0.3_postcss-selector-parser@7.0.0_postcss@8.4.49": { + "integrity": "sha512-F8zZ3L/rBpuoBZRvI4JVT20ZanPLXfQLzMOZg1tzPflRVh9mKpOZ8qcSIhh1my3FjAjZWG4T2POwGnmn6a6hbg==", + "dependencies": [ + "@csstools/css-parser-algorithms", + "@csstools/css-tokenizer", + "@csstools/media-query-list-parser", + "@csstools/selector-specificity", + "@dual-bundle/import-meta-resolve", + "balanced-match", + "colord", + "cosmiconfig", + "css-functions-list", + "css-tree@3.1.0", + "debug", + "fast-glob", + "fastest-levenshtein", + "file-entry-cache", + "global-modules", + "globby", + "globjoin", + "html-tags", + "ignore@6.0.2", + "imurmurhash", + "is-plain-object", + "known-css-properties", + "mathml-tag-names", + "meow", + "micromatch", + "normalize-path", + "picocolors", + "postcss", + "postcss-resolve-nested-selector", + "postcss-safe-parser", + "postcss-selector-parser", + "postcss-value-parser", + "resolve-from@5.0.0", + "string-width", + "supports-hyperlinks", + "svg-tags", + "table", + "write-file-atomic" + ], + "bin": true + }, + "supports-color@7.2.0": { + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dependencies": [ + "has-flag" + ] + }, + "supports-hyperlinks@3.1.0": { + "integrity": "sha512-2rn0BZ+/f7puLOHZm1HOJfwBggfaHXUpPUSSG/SWM4TWp5KCfmNYwnC3hruy2rZlMnmWZ+QAGpZfchu3f3695A==", + "dependencies": [ + "has-flag", + "supports-color" + ] + }, + "svg-tags@1.0.0": { + "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==" + }, + "svgo@4.0.0": { + "integrity": "sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==", + "dependencies": [ + "commander", + "css-select", + "css-tree@3.1.0", + "css-what", + "csso", + "picocolors", + "sax" + ], + "bin": true + }, + "table@6.9.0": { + "integrity": "sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==", + "dependencies": [ + "ajv@8.17.1", + "lodash.truncate", + "slice-ansi", + "string-width", + "strip-ansi" + ] + }, + "tinyglobby@0.2.10_picomatch@4.0.2": { + "integrity": "sha512-Zc+8eJlFMvgatPZTl6A9L/yht8QqdmUNtURHaKZLmKBE12hNPSrqNkUp2cs3M/UKmNVVAMFQYSjYIVHDjW5zew==", + "dependencies": [ + "fdir", + "picomatch@4.0.2" + ] + }, + "to-regex-range@5.0.1": { + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dependencies": [ + "is-number" + ] + }, + "tslib@2.8.1": { + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==" + }, + "tunnel@0.0.6": { + "integrity": "sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==" + }, + "type-fest@4.30.2": { + "integrity": "sha512-UJShLPYi1aWqCdq9HycOL/gwsuqda1OISdBO3t8RlXQC4QvtuIz4b5FCfe2dQIWEpmlRExKmcTBfP1r9bhY7ig==" + }, + "uglify-js@3.19.3": { + "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==", + "bin": true + }, + "undici-types@6.19.8": { + "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==" + }, + "undici@5.28.4": { + "integrity": "sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==", + "dependencies": [ + "@fastify/busboy" + ] + }, + "universal-user-agent@7.0.2": { + "integrity": "sha512-0JCqzSKnStlRRQfCdowvqy3cy0Dvtlb8xecj/H8JFZuCze4rwjPZQOgvFvn0Ws/usCHQFGpyr+pB9adaGwXn4Q==" + }, + "usercss-meta@0.12.0": { + "integrity": "sha512-zKrXCKdpeIwtVe87omxGo9URf+7mbozduMZEg79dmT4KB3XJwfIkEi/Uk0PcTwR/nZLtAK1+k7isgbGB/g6E7Q==" + }, + "util-deprecate@1.0.2": { + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" + }, + "which@1.3.1": { + "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", + "dependencies": [ + "isexe" + ], + "bin": true + }, + "wordwrap@1.0.0": { + "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==" + }, + "write-file-atomic@5.0.1": { + "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==", + "dependencies": [ + "imurmurhash", + "signal-exit" + ] + } + }, + "redirects": { + "https://github.com/openstyles/stylus/raw/8fe35a4b90d85fb911bd7aa1deab4e4733c31150/src/js/sections-util.js": "https://raw.githubusercontent.com/openstyles/stylus/8fe35a4b90d85fb911bd7aa1deab4e4733c31150/src/js/sections-util.js" + }, + "remote": { + "https://raw.githubusercontent.com/catppuccin/catppuccin/d4f82739e687cfd19d168be355367fdbbcc8e029/resources/categories.schema.json": "9b2190cadcc0e8efa8219bfe67dd16fd003a6ad5fd7c8ae9e6ecfa72d51e4a2f", + "https://raw.githubusercontent.com/openstyles/stylus/8fe35a4b90d85fb911bd7aa1deab4e4733c31150/src/js/sections-util.js": "387e164ad40bc76048dccaafce6a032ac745616e7fc29f1873d7da33f5739502" + }, + "workspace": { + "dependencies": [ + "jsr:@std/assert@^1.0.9", + "jsr:@std/async@^1.2.0", + "jsr:@std/cli@^1.0.8", + "jsr:@std/fmt@^1.0.2", + "jsr:@std/fs@^1.0.6", + "jsr:@std/http@^1.0.25", + "jsr:@std/path@^1.0.8", + "jsr:@std/testing@^1.0.17", + "jsr:@std/yaml@^1.0.5", + "npm:@actions/core@1.11.1", + "npm:@catppuccin/palette@^1.7.1", + "npm:@octokit/rest@^21.0.2", + "npm:ajv@8.18.0", + "npm:handlebars@4.7.8", + "npm:json-schema-to-typescript@^15.0.3", + "npm:less@4.2.2", + "npm:postcss-less@6.0.0", + "npm:postcss-value-parser@4.2.0", + "npm:stylelint-config-recommended@14.0.1", + "npm:stylelint-config-standard@36.0.1", + "npm:stylelint@^16.12.0", + "npm:svgo@4.0.0", + "npm:type-fest@^4.30.2", + "npm:usercss-meta@0.12.0" + ] + } +} diff --git a/docs/.gitignore b/docs/.gitignore new file mode 100644 index 0000000000..bffa11f019 --- /dev/null +++ b/docs/.gitignore @@ -0,0 +1,21 @@ +# build output +dist/ +# generated types +.astro/ + +# dependencies +node_modules/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store \ No newline at end of file diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md deleted file mode 100644 index c760e94d8d..0000000000 --- a/docs/CONTRIBUTING.md +++ /dev/null @@ -1,33 +0,0 @@ -# Contributing! - -🎉 First off, thanks for taking the time to contribute! 🎉 - -## Guidelines - -The following is a set of guidelines for contributing to this repository. Use -your best judgment, and feel free to propose changes to this document in a pull -request. - -## Types of PRs - -It is important to note that there are **two types of PRs** for this repository: - -1. **New Userstyles:** Please see [userstyle-creation.md](userstyle-creation.md) -2. **Other improvements:** These should follow the recommendations below, to help - improve the chances of a merged PR. - -## General Recommendations - -- Create a - [topic branch](https://git-scm.com/book/en/v2/Git-Branching-Branching-Workflows#_topic_branch) - on your fork for your specific PR. -- Consider using - [conventionalcommits.org](https://www.conventionalcommits.org/en/v1.0.0/)'s - rules for creating explicit and meaningful commit messages. -- If it's your first time contributing to a project then you should look to the - popular - [first-contributions](https://github.com/firstcontributions/first-contributions) - repository on GitHub. This will give you hands-on experience with the features - of GitHub required to make a contribution. As always, feel free to join our - [Discord](https://discord.com/servers/catppuccin-907385605422448742) to ask - any questions and clarify your understanding, we are more than happy to help! diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs new file mode 100644 index 0000000000..67a981986d --- /dev/null +++ b/docs/astro.config.mjs @@ -0,0 +1,79 @@ +import { defineConfig } from "astro/config"; +import starlight from "@astrojs/starlight"; +import catppuccin from "@catppuccin/starlight"; +import starlightLinksValidator from "starlight-links-validator"; +import starlightImageZoom from "starlight-image-zoom"; +import starlightGitHubAlerts from "starlight-github-alerts"; +import starlightAutoSidebar from "starlight-auto-sidebar"; +import mermaid from "astro-mermaid"; +import { remarkHeadingId } from "remark-custom-heading-id"; + +export default defineConfig({ + site: "https://userstyles.catppuccin.com", + markdown: { + remarkPlugins: [remarkHeadingId], + }, + integrations: [ + mermaid(), + starlight({ + title: "Catppuccin Userstyles", + favicon: "/favicon.png", + logo: { + dark: "/public/pepperjack-dark.png", + light: "/public/pepperjack-light.png", + }, + social: [ + { + icon: "github", + label: "GitHub", + href: "https://github.com/catppuccin/userstyles", + }, + ], + editLink: { + baseUrl: "https://github.com/catppuccin/userstyles/edit/main/docs", + }, + expressiveCode: { + themes: ["catppuccin-mocha", "catppuccin-latte"], + styleOverrides: { + frames: { + tooltipSuccessBackground: "var(--green)", + tooltipSuccessForeground: "var(--base)", + }, + textMarkers: { + insBackground: + "color-mix(in oklab, var(--sl-color-green-high) 25%, var(--sl-color-gray-6));", + insBorderColor: "var(--sl-color-gray-5)", + delBackground: + "color-mix(in oklab, var(--sl-color-red-high) 25%, var(--sl-color-gray-6));", + delBorderColor: "var(--sl-color-gray-5)", + }, + codeBackground: "var(--sl-color-gray-6)", + }, + }, + sidebar: [ + { + label: "Getting started", + autogenerate: { directory: "getting-started" }, + }, + { + label: "Contributing", + collapsed: true, + autogenerate: { directory: "contributing" }, + }, + ], + plugins: [ + catppuccin(), + starlightLinksValidator(), + starlightGitHubAlerts(), + starlightImageZoom(), + starlightAutoSidebar(), + ], + }), + ], + redirects: { + "/contributing/standard-library/": + "/contributing/reference/libraries/standard/", + "/reference/browsers/": + "/getting-started/faq/#what-version-of-my-browser-am-i-using", + }, +}); diff --git a/docs/browsers.md b/docs/browsers.md deleted file mode 100644 index cbfc3d6c8e..0000000000 --- a/docs/browsers.md +++ /dev/null @@ -1,30 +0,0 @@ -# Browsers - -> **Note**
-> If you see a popular browser that hasn't been added, please create a pull request to do so! - -Find your browser version by following the instructions below: - - - - - - - -
Browser - Instructions -
Chromium - Type chrome://version/ -
Firefox - Type about:support -
Opera (GX) - Type opera://about/ -
Microsoft Edge - Type edge://version/ -
- -## Common Issues - -> **Note**
-> If you are running into any compatibility issues with your browser, please consider opening -> a pull request and documenting your issue here! \ No newline at end of file diff --git a/docs/deno.json b/docs/deno.json new file mode 100644 index 0000000000..6f04c6ab83 --- /dev/null +++ b/docs/deno.json @@ -0,0 +1,7 @@ +{ + "fmt": { + "indentWidth": 2, + "proseWrap": "never", + "exclude": ["pnpm-lock.yaml"] + } +} diff --git a/docs/package.json b/docs/package.json new file mode 100644 index 0000000000..e982e77052 --- /dev/null +++ b/docs/package.json @@ -0,0 +1,28 @@ +{ + "name": "docs", + "private": true, + "type": "module", + "version": "0.0.1", + "scripts": { + "dev": "astro dev", + "start": "astro dev", + "build": "astro build", + "preview": "astro preview", + "astro": "astro" + }, + "dependencies": { + "@astrojs/starlight": "^0.35.2", + "@catppuccin/starlight": "^1.0.2", + "astro": "^5.6.1", + "astro-mermaid": "^1.0.4", + "astro-remote": "^0.3.4", + "mermaid": "^11.10.1", + "remark-custom-heading-id": "^2.0.0", + "sharp": "^0.34.2", + "starlight-auto-sidebar": "^0.2.0", + "starlight-github-alerts": "^0.1.0", + "starlight-image-zoom": "^0.13.0", + "starlight-links-validator": "^0.18.0", + "yaml": "^2.8.1" + } +} diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml new file mode 100644 index 0000000000..5491195d2b --- /dev/null +++ b/docs/pnpm-lock.yaml @@ -0,0 +1,5575 @@ +lockfileVersion: '9.0' + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + +importers: + + .: + dependencies: + '@astrojs/starlight': + specifier: ^0.35.2 + version: 0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) + '@catppuccin/starlight': + specifier: ^1.0.2 + version: 1.1.1(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)))(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) + astro: + specifier: ^5.6.1 + version: 5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1) + astro-mermaid: + specifier: ^1.0.4 + version: 1.0.4(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))(mermaid@11.10.1) + astro-remote: + specifier: ^0.3.4 + version: 0.3.4 + mermaid: + specifier: ^11.10.1 + version: 11.10.1 + remark-custom-heading-id: + specifier: ^2.0.0 + version: 2.0.0 + sharp: + specifier: ^0.34.2 + version: 0.34.3 + starlight-auto-sidebar: + specifier: ^0.2.0 + version: 0.2.0(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))) + starlight-github-alerts: + specifier: ^0.1.0 + version: 0.1.0(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))) + starlight-image-zoom: + specifier: ^0.13.0 + version: 0.13.0(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))) + starlight-links-validator: + specifier: ^0.18.0 + version: 0.18.0(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))) + yaml: + specifier: ^2.8.1 + version: 2.8.1 + +packages: + + '@antfu/install-pkg@1.1.0': + resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==} + + '@antfu/utils@8.1.1': + resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==} + + '@astrojs/compiler@2.12.2': + resolution: {integrity: sha512-w2zfvhjNCkNMmMMOn5b0J8+OmUaBL1o40ipMvqcG6NRpdC+lKxmTi48DT8Xw0SzJ3AfmeFLB45zXZXtmbsjcgw==} + + '@astrojs/internal-helpers@0.7.2': + resolution: {integrity: sha512-KCkCqR3Goym79soqEtbtLzJfqhTWMyVaizUi35FLzgGSzBotSw8DB1qwsu7U96ihOJgYhDk2nVPz+3LnXPeX6g==} + + '@astrojs/markdown-remark@6.3.6': + resolution: {integrity: sha512-bwylYktCTsLMVoCOEHbn2GSUA3c5KT/qilekBKA3CBng0bo1TYjNZPr761vxumRk9kJGqTOtU+fgCAp5Vwokug==} + + '@astrojs/mdx@4.3.4': + resolution: {integrity: sha512-Ew3iP+6zuzzJWNEH5Qr1iknrue1heEfgmfuMpuwLaSwqlUiJQ0NDb2oxKosgWU1ROYmVf1H4KCmS6QdMWKyFjw==} + engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0} + peerDependencies: + astro: ^5.0.0 + + '@astrojs/prism@3.3.0': + resolution: {integrity: sha512-q8VwfU/fDZNoDOf+r7jUnMC2//H2l0TuQ6FkGJL8vD8nw/q5KiL3DS1KKBI3QhI9UQhpJ5dc7AtqfbXWuOgLCQ==} + engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0} + + '@astrojs/sitemap@3.5.1': + resolution: {integrity: sha512-uX5z52GLtQTgOe8r3jeGmFRYrFe52mdpLYJzqjvL1cdy5Kg3MLOZEvaZ/OCH0fSq0t7e50uJQ6oBMZG0ffszBg==} + + '@astrojs/starlight@0.35.2': + resolution: {integrity: sha512-curGghoW4s5pCbW2tINsJPoxEYPan87ptCOv7GZ+S24N3J6AyaOu/OsjZDEMaIpo3ZlObM5DQn+w7iXl3drDhQ==} + peerDependencies: + astro: ^5.5.0 + + '@astrojs/telemetry@3.3.0': + resolution: {integrity: sha512-UFBgfeldP06qu6khs/yY+q1cDAaArM2/7AEIqQ9Cuvf7B1hNLq0xDrZkct+QoIGyjq56y8IaE2I3CTvG99mlhQ==} + engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0} + + '@babel/helper-string-parser@7.27.1': + resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==} + engines: {node: '>=6.9.0'} + + '@babel/helper-validator-identifier@7.27.1': + resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==} + engines: {node: '>=6.9.0'} + + '@babel/parser@7.28.4': + resolution: {integrity: sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==} + engines: {node: '>=6.0.0'} + hasBin: true + + '@babel/runtime@7.28.3': + resolution: {integrity: sha512-9uIQ10o0WGdpP6GDhXcdOJPJuDgFtIDtN/9+ArJQ2NAfAmiuhTQdzkaTGR33v43GYS2UrSA0eX2pPPHoFVvpxA==} + engines: {node: '>=6.9.0'} + + '@babel/types@7.28.4': + resolution: {integrity: sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==} + engines: {node: '>=6.9.0'} + + '@braintree/sanitize-url@7.1.1': + resolution: {integrity: sha512-i1L7noDNxtFyL5DmZafWy1wRVhGehQmzZaz1HiN5e7iylJMSZR7ekOV7NsIqa5qBldlLrsKv4HbgFUVlQrz8Mw==} + + '@capsizecss/unpack@2.4.0': + resolution: {integrity: sha512-GrSU71meACqcmIUxPYOJvGKF0yryjN/L1aCuE9DViCTJI7bfkjgYDPD1zbNDcINJwSSP6UaBZY9GAbYDO7re0Q==} + + '@catppuccin/starlight@1.1.1': + resolution: {integrity: sha512-iyI/gdGfqREetGti3O11l7iMLCmt0LRSbIis8ySlZo8hqb749KyMmisO/9kqBvk2oFKw9hGNDbutcNxKSI2spg==} + peerDependencies: + '@astrojs/starlight': '>=0.34' + astro: ^5.0.0 + + '@chevrotain/cst-dts-gen@11.0.3': + resolution: {integrity: sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ==} + + '@chevrotain/gast@11.0.3': + resolution: {integrity: sha512-+qNfcoNk70PyS/uxmj3li5NiECO+2YKZZQMbmjTqRI3Qchu8Hig/Q9vgkHpI3alNjr7M+a2St5pw5w5F6NL5/Q==} + + '@chevrotain/regexp-to-ast@11.0.3': + resolution: {integrity: sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA==} + + '@chevrotain/types@11.0.3': + resolution: {integrity: sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ==} + + '@chevrotain/utils@11.0.3': + resolution: {integrity: sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==} + + '@ctrl/tinycolor@4.1.0': + resolution: {integrity: sha512-WyOx8cJQ+FQus4Mm4uPIZA64gbk3Wxh0so5Lcii0aJifqwoVOlfFtorjLE0Hen4OYyHZMXDWqMmaQemBhgxFRQ==} + engines: {node: '>=14'} + + '@emnapi/runtime@1.5.0': + resolution: {integrity: sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==} + + '@esbuild/aix-ppc64@0.25.9': + resolution: {integrity: sha512-OaGtL73Jck6pBKjNIe24BnFE6agGl+6KxDtTfHhy1HmhthfKouEcOhqpSL64K4/0WCtbKFLOdzD/44cJ4k9opA==} + engines: {node: '>=18'} + cpu: [ppc64] + os: [aix] + + '@esbuild/android-arm64@0.25.9': + resolution: {integrity: sha512-IDrddSmpSv51ftWslJMvl3Q2ZT98fUSL2/rlUXuVqRXHCs5EUF1/f+jbjF5+NG9UffUDMCiTyh8iec7u8RlTLg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [android] + + '@esbuild/android-arm@0.25.9': + resolution: {integrity: sha512-5WNI1DaMtxQ7t7B6xa572XMXpHAaI/9Hnhk8lcxF4zVN4xstUgTlvuGDorBguKEnZO70qwEcLpfifMLoxiPqHQ==} + engines: {node: '>=18'} + cpu: [arm] + os: [android] + + '@esbuild/android-x64@0.25.9': + resolution: {integrity: sha512-I853iMZ1hWZdNllhVZKm34f4wErd4lMyeV7BLzEExGEIZYsOzqDWDf+y082izYUE8gtJnYHdeDpN/6tUdwvfiw==} + engines: {node: '>=18'} + cpu: [x64] + os: [android] + + '@esbuild/darwin-arm64@0.25.9': + resolution: {integrity: sha512-XIpIDMAjOELi/9PB30vEbVMs3GV1v2zkkPnuyRRURbhqjyzIINwj+nbQATh4H9GxUgH1kFsEyQMxwiLFKUS6Rg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [darwin] + + '@esbuild/darwin-x64@0.25.9': + resolution: {integrity: sha512-jhHfBzjYTA1IQu8VyrjCX4ApJDnH+ez+IYVEoJHeqJm9VhG9Dh2BYaJritkYK3vMaXrf7Ogr/0MQ8/MeIefsPQ==} + engines: {node: '>=18'} + cpu: [x64] + os: [darwin] + + '@esbuild/freebsd-arm64@0.25.9': + resolution: {integrity: sha512-z93DmbnY6fX9+KdD4Ue/H6sYs+bhFQJNCPZsi4XWJoYblUqT06MQUdBCpcSfuiN72AbqeBFu5LVQTjfXDE2A6Q==} + engines: {node: '>=18'} + cpu: [arm64] + os: [freebsd] + + '@esbuild/freebsd-x64@0.25.9': + resolution: {integrity: sha512-mrKX6H/vOyo5v71YfXWJxLVxgy1kyt1MQaD8wZJgJfG4gq4DpQGpgTB74e5yBeQdyMTbgxp0YtNj7NuHN0PoZg==} + engines: {node: '>=18'} + cpu: [x64] + os: [freebsd] + + '@esbuild/linux-arm64@0.25.9': + resolution: {integrity: sha512-BlB7bIcLT3G26urh5Dmse7fiLmLXnRlopw4s8DalgZ8ef79Jj4aUcYbk90g8iCa2467HX8SAIidbL7gsqXHdRw==} + engines: {node: '>=18'} + cpu: [arm64] + os: [linux] + + '@esbuild/linux-arm@0.25.9': + resolution: {integrity: sha512-HBU2Xv78SMgaydBmdor38lg8YDnFKSARg1Q6AT0/y2ezUAKiZvc211RDFHlEZRFNRVhcMamiToo7bDx3VEOYQw==} + engines: {node: '>=18'} + cpu: [arm] + os: [linux] + + '@esbuild/linux-ia32@0.25.9': + resolution: {integrity: sha512-e7S3MOJPZGp2QW6AK6+Ly81rC7oOSerQ+P8L0ta4FhVi+/j/v2yZzx5CqqDaWjtPFfYz21Vi1S0auHrap3Ma3A==} + engines: {node: '>=18'} + cpu: [ia32] + os: [linux] + + '@esbuild/linux-loong64@0.25.9': + resolution: {integrity: sha512-Sbe10Bnn0oUAB2AalYztvGcK+o6YFFA/9829PhOCUS9vkJElXGdphz0A3DbMdP8gmKkqPmPcMJmJOrI3VYB1JQ==} + engines: {node: '>=18'} + cpu: [loong64] + os: [linux] + + '@esbuild/linux-mips64el@0.25.9': + resolution: {integrity: sha512-YcM5br0mVyZw2jcQeLIkhWtKPeVfAerES5PvOzaDxVtIyZ2NUBZKNLjC5z3/fUlDgT6w89VsxP2qzNipOaaDyA==} + engines: {node: '>=18'} + cpu: [mips64el] + os: [linux] + + '@esbuild/linux-ppc64@0.25.9': + resolution: {integrity: sha512-++0HQvasdo20JytyDpFvQtNrEsAgNG2CY1CLMwGXfFTKGBGQT3bOeLSYE2l1fYdvML5KUuwn9Z8L1EWe2tzs1w==} + engines: {node: '>=18'} + cpu: [ppc64] + os: [linux] + + '@esbuild/linux-riscv64@0.25.9': + resolution: {integrity: sha512-uNIBa279Y3fkjV+2cUjx36xkx7eSjb8IvnL01eXUKXez/CBHNRw5ekCGMPM0BcmqBxBcdgUWuUXmVWwm4CH9kg==} + engines: {node: '>=18'} + cpu: [riscv64] + os: [linux] + + '@esbuild/linux-s390x@0.25.9': + resolution: {integrity: sha512-Mfiphvp3MjC/lctb+7D287Xw1DGzqJPb/J2aHHcHxflUo+8tmN/6d4k6I2yFR7BVo5/g7x2Monq4+Yew0EHRIA==} + engines: {node: '>=18'} + cpu: [s390x] + os: [linux] + + '@esbuild/linux-x64@0.25.9': + resolution: {integrity: sha512-iSwByxzRe48YVkmpbgoxVzn76BXjlYFXC7NvLYq+b+kDjyyk30J0JY47DIn8z1MO3K0oSl9fZoRmZPQI4Hklzg==} + engines: {node: '>=18'} + cpu: [x64] + os: [linux] + + '@esbuild/netbsd-arm64@0.25.9': + resolution: {integrity: sha512-9jNJl6FqaUG+COdQMjSCGW4QiMHH88xWbvZ+kRVblZsWrkXlABuGdFJ1E9L7HK+T0Yqd4akKNa/lO0+jDxQD4Q==} + engines: {node: '>=18'} + cpu: [arm64] + os: [netbsd] + + '@esbuild/netbsd-x64@0.25.9': + resolution: {integrity: sha512-RLLdkflmqRG8KanPGOU7Rpg829ZHu8nFy5Pqdi9U01VYtG9Y0zOG6Vr2z4/S+/3zIyOxiK6cCeYNWOFR9QP87g==} + engines: {node: '>=18'} + cpu: [x64] + os: [netbsd] + + '@esbuild/openbsd-arm64@0.25.9': + resolution: {integrity: sha512-YaFBlPGeDasft5IIM+CQAhJAqS3St3nJzDEgsgFixcfZeyGPCd6eJBWzke5piZuZ7CtL656eOSYKk4Ls2C0FRQ==} + engines: {node: '>=18'} + cpu: [arm64] + os: [openbsd] + + '@esbuild/openbsd-x64@0.25.9': + resolution: {integrity: sha512-1MkgTCuvMGWuqVtAvkpkXFmtL8XhWy+j4jaSO2wxfJtilVCi0ZE37b8uOdMItIHz4I6z1bWWtEX4CJwcKYLcuA==} + engines: {node: '>=18'} + cpu: [x64] + os: [openbsd] + + '@esbuild/openharmony-arm64@0.25.9': + resolution: {integrity: sha512-4Xd0xNiMVXKh6Fa7HEJQbrpP3m3DDn43jKxMjxLLRjWnRsfxjORYJlXPO4JNcXtOyfajXorRKY9NkOpTHptErg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [openharmony] + + '@esbuild/sunos-x64@0.25.9': + resolution: {integrity: sha512-WjH4s6hzo00nNezhp3wFIAfmGZ8U7KtrJNlFMRKxiI9mxEK1scOMAaa9i4crUtu+tBr+0IN6JCuAcSBJZfnphw==} + engines: {node: '>=18'} + cpu: [x64] + os: [sunos] + + '@esbuild/win32-arm64@0.25.9': + resolution: {integrity: sha512-mGFrVJHmZiRqmP8xFOc6b84/7xa5y5YvR1x8djzXpJBSv/UsNK6aqec+6JDjConTgvvQefdGhFDAs2DLAds6gQ==} + engines: {node: '>=18'} + cpu: [arm64] + os: [win32] + + '@esbuild/win32-ia32@0.25.9': + resolution: {integrity: sha512-b33gLVU2k11nVx1OhX3C8QQP6UHQK4ZtN56oFWvVXvz2VkDoe6fbG8TOgHFxEvqeqohmRnIHe5A1+HADk4OQww==} + engines: {node: '>=18'} + cpu: [ia32] + os: [win32] + + '@esbuild/win32-x64@0.25.9': + resolution: {integrity: sha512-PPOl1mi6lpLNQxnGoyAfschAodRFYXJ+9fs6WHXz7CSWKbOqiMZsubC+BQsVKuul+3vKLuwTHsS2c2y9EoKwxQ==} + engines: {node: '>=18'} + cpu: [x64] + os: [win32] + + '@expressive-code/core@0.41.3': + resolution: {integrity: sha512-9qzohqU7O0+JwMEEgQhnBPOw5DtsQRBXhW++5fvEywsuX44vCGGof1SL5OvPElvNgaWZ4pFZAFSlkNOkGyLwSQ==} + + '@expressive-code/plugin-frames@0.41.3': + resolution: {integrity: sha512-rFQtmf/3N2CK3Cq/uERweMTYZnBu+CwxBdHuOftEmfA9iBE7gTVvwpbh82P9ZxkPLvc40UMhYt7uNuAZexycRQ==} + + '@expressive-code/plugin-shiki@0.41.3': + resolution: {integrity: sha512-RlTARoopzhFJIOVHLGvuXJ8DCEme/hjV+ZnRJBIxzxsKVpGPW4Oshqg9xGhWTYdHstTsxO663s0cdBLzZj9TQA==} + + '@expressive-code/plugin-text-markers@0.41.3': + resolution: {integrity: sha512-SN8tkIzDpA0HLAscEYD2IVrfLiid6qEdE9QLlGVSxO1KEw7qYvjpbNBQjUjMr5/jvTJ7ys6zysU2vLPHE0sb2g==} + + '@iconify/types@2.0.0': + resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} + + '@iconify/utils@2.3.0': + resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==} + + '@img/sharp-darwin-arm64@0.33.5': + resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [arm64] + os: [darwin] + + '@img/sharp-darwin-arm64@0.34.3': + resolution: {integrity: sha512-ryFMfvxxpQRsgZJqBd4wsttYQbCxsJksrv9Lw/v798JcQ8+w84mBWuXwl+TT0WJ/WrYOLaYpwQXi3sA9nTIaIg==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [arm64] + os: [darwin] + + '@img/sharp-darwin-x64@0.33.5': + resolution: {integrity: sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [x64] + os: [darwin] + + '@img/sharp-darwin-x64@0.34.3': + resolution: {integrity: sha512-yHpJYynROAj12TA6qil58hmPmAwxKKC7reUqtGLzsOHfP7/rniNGTL8tjWX6L3CTV4+5P4ypcS7Pp+7OB+8ihA==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [x64] + os: [darwin] + + '@img/sharp-libvips-darwin-arm64@1.0.4': + resolution: {integrity: sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==} + cpu: [arm64] + os: [darwin] + + '@img/sharp-libvips-darwin-arm64@1.2.0': + resolution: {integrity: sha512-sBZmpwmxqwlqG9ueWFXtockhsxefaV6O84BMOrhtg/YqbTaRdqDE7hxraVE3y6gVM4eExmfzW4a8el9ArLeEiQ==} + cpu: [arm64] + os: [darwin] + + '@img/sharp-libvips-darwin-x64@1.0.4': + resolution: {integrity: sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==} + cpu: [x64] + os: [darwin] + + '@img/sharp-libvips-darwin-x64@1.2.0': + resolution: {integrity: sha512-M64XVuL94OgiNHa5/m2YvEQI5q2cl9d/wk0qFTDVXcYzi43lxuiFTftMR1tOnFQovVXNZJ5TURSDK2pNe9Yzqg==} + cpu: [x64] + os: [darwin] + + '@img/sharp-libvips-linux-arm64@1.0.4': + resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==} + cpu: [arm64] + os: [linux] + libc: [glibc] + + '@img/sharp-libvips-linux-arm64@1.2.0': + resolution: {integrity: sha512-RXwd0CgG+uPRX5YYrkzKyalt2OJYRiJQ8ED/fi1tq9WQW2jsQIn0tqrlR5l5dr/rjqq6AHAxURhj2DVjyQWSOA==} + cpu: [arm64] + os: [linux] + libc: [glibc] + + '@img/sharp-libvips-linux-arm@1.0.5': + resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==} + cpu: [arm] + os: [linux] + libc: [glibc] + + '@img/sharp-libvips-linux-arm@1.2.0': + resolution: {integrity: sha512-mWd2uWvDtL/nvIzThLq3fr2nnGfyr/XMXlq8ZJ9WMR6PXijHlC3ksp0IpuhK6bougvQrchUAfzRLnbsen0Cqvw==} + cpu: [arm] + os: [linux] + libc: [glibc] + + '@img/sharp-libvips-linux-ppc64@1.2.0': + resolution: {integrity: sha512-Xod/7KaDDHkYu2phxxfeEPXfVXFKx70EAFZ0qyUdOjCcxbjqyJOEUpDe6RIyaunGxT34Anf9ue/wuWOqBW2WcQ==} + cpu: [ppc64] + os: [linux] + libc: [glibc] + + '@img/sharp-libvips-linux-s390x@1.0.4': + resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==} + cpu: [s390x] + os: [linux] + libc: [glibc] + + '@img/sharp-libvips-linux-s390x@1.2.0': + resolution: {integrity: sha512-eMKfzDxLGT8mnmPJTNMcjfO33fLiTDsrMlUVcp6b96ETbnJmd4uvZxVJSKPQfS+odwfVaGifhsB07J1LynFehw==} + cpu: [s390x] + os: [linux] + libc: [glibc] + + '@img/sharp-libvips-linux-x64@1.0.4': + resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==} + cpu: [x64] + os: [linux] + libc: [glibc] + + '@img/sharp-libvips-linux-x64@1.2.0': + resolution: {integrity: sha512-ZW3FPWIc7K1sH9E3nxIGB3y3dZkpJlMnkk7z5tu1nSkBoCgw2nSRTFHI5pB/3CQaJM0pdzMF3paf9ckKMSE9Tg==} + cpu: [x64] + os: [linux] + libc: [glibc] + + '@img/sharp-libvips-linuxmusl-arm64@1.0.4': + resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==} + cpu: [arm64] + os: [linux] + libc: [musl] + + '@img/sharp-libvips-linuxmusl-arm64@1.2.0': + resolution: {integrity: sha512-UG+LqQJbf5VJ8NWJ5Z3tdIe/HXjuIdo4JeVNADXBFuG7z9zjoegpzzGIyV5zQKi4zaJjnAd2+g2nna8TZvuW9Q==} + cpu: [arm64] + os: [linux] + libc: [musl] + + '@img/sharp-libvips-linuxmusl-x64@1.0.4': + resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==} + cpu: [x64] + os: [linux] + libc: [musl] + + '@img/sharp-libvips-linuxmusl-x64@1.2.0': + resolution: {integrity: sha512-SRYOLR7CXPgNze8akZwjoGBoN1ThNZoqpOgfnOxmWsklTGVfJiGJoC/Lod7aNMGA1jSsKWM1+HRX43OP6p9+6Q==} + cpu: [x64] + os: [linux] + libc: [musl] + + '@img/sharp-linux-arm64@0.33.5': + resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [arm64] + os: [linux] + libc: [glibc] + + '@img/sharp-linux-arm64@0.34.3': + resolution: {integrity: sha512-QdrKe3EvQrqwkDrtuTIjI0bu6YEJHTgEeqdzI3uWJOH6G1O8Nl1iEeVYRGdj1h5I21CqxSvQp1Yv7xeU3ZewbA==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [arm64] + os: [linux] + libc: [glibc] + + '@img/sharp-linux-arm@0.33.5': + resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [arm] + os: [linux] + libc: [glibc] + + '@img/sharp-linux-arm@0.34.3': + resolution: {integrity: sha512-oBK9l+h6KBN0i3dC8rYntLiVfW8D8wH+NPNT3O/WBHeW0OQWCjfWksLUaPidsrDKpJgXp3G3/hkmhptAW0I3+A==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [arm] + os: [linux] + libc: [glibc] + + '@img/sharp-linux-ppc64@0.34.3': + resolution: {integrity: sha512-GLtbLQMCNC5nxuImPR2+RgrviwKwVql28FWZIW1zWruy6zLgA5/x2ZXk3mxj58X/tszVF69KK0Is83V8YgWhLA==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [ppc64] + os: [linux] + libc: [glibc] + + '@img/sharp-linux-s390x@0.33.5': + resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [s390x] + os: [linux] + libc: [glibc] + + '@img/sharp-linux-s390x@0.34.3': + resolution: {integrity: sha512-3gahT+A6c4cdc2edhsLHmIOXMb17ltffJlxR0aC2VPZfwKoTGZec6u5GrFgdR7ciJSsHT27BD3TIuGcuRT0KmQ==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [s390x] + os: [linux] + libc: [glibc] + + '@img/sharp-linux-x64@0.33.5': + resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [x64] + os: [linux] + libc: [glibc] + + '@img/sharp-linux-x64@0.34.3': + resolution: {integrity: sha512-8kYso8d806ypnSq3/Ly0QEw90V5ZoHh10yH0HnrzOCr6DKAPI6QVHvwleqMkVQ0m+fc7EH8ah0BB0QPuWY6zJQ==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [x64] + os: [linux] + libc: [glibc] + + '@img/sharp-linuxmusl-arm64@0.33.5': + resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [arm64] + os: [linux] + libc: [musl] + + '@img/sharp-linuxmusl-arm64@0.34.3': + resolution: {integrity: sha512-vAjbHDlr4izEiXM1OTggpCcPg9tn4YriK5vAjowJsHwdBIdx0fYRsURkxLG2RLm9gyBq66gwtWI8Gx0/ov+JKQ==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [arm64] + os: [linux] + libc: [musl] + + '@img/sharp-linuxmusl-x64@0.33.5': + resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [x64] + os: [linux] + libc: [musl] + + '@img/sharp-linuxmusl-x64@0.34.3': + resolution: {integrity: sha512-gCWUn9547K5bwvOn9l5XGAEjVTTRji4aPTqLzGXHvIr6bIDZKNTA34seMPgM0WmSf+RYBH411VavCejp3PkOeQ==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [x64] + os: [linux] + libc: [musl] + + '@img/sharp-wasm32@0.33.5': + resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [wasm32] + + '@img/sharp-wasm32@0.34.3': + resolution: {integrity: sha512-+CyRcpagHMGteySaWos8IbnXcHgfDn7pO2fiC2slJxvNq9gDipYBN42/RagzctVRKgxATmfqOSulgZv5e1RdMg==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [wasm32] + + '@img/sharp-win32-arm64@0.34.3': + resolution: {integrity: sha512-MjnHPnbqMXNC2UgeLJtX4XqoVHHlZNd+nPt1kRPmj63wURegwBhZlApELdtxM2OIZDRv/DFtLcNhVbd1z8GYXQ==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [arm64] + os: [win32] + + '@img/sharp-win32-ia32@0.33.5': + resolution: {integrity: sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [ia32] + os: [win32] + + '@img/sharp-win32-ia32@0.34.3': + resolution: {integrity: sha512-xuCdhH44WxuXgOM714hn4amodJMZl3OEvf0GVTm0BEyMeA2to+8HEdRPShH0SLYptJY1uBw+SCFP9WVQi1Q/cw==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [ia32] + os: [win32] + + '@img/sharp-win32-x64@0.33.5': + resolution: {integrity: sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [x64] + os: [win32] + + '@img/sharp-win32-x64@0.34.3': + resolution: {integrity: sha512-OWwz05d++TxzLEv4VnsTz5CmZ6mI6S05sfQGEMrNrQcOEERbX46332IvE7pO/EUiw7jUrrS40z/M7kPyjfl04g==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + cpu: [x64] + os: [win32] + + '@jridgewell/sourcemap-codec@1.5.5': + resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==} + + '@mdx-js/mdx@3.1.0': + resolution: {integrity: sha512-/QxEhPAvGwbQmy1Px8F899L5Uc2KZ6JtXwlCgJmjSTBedwOZkByYcBG4GceIGPXRDsmfxhHazuS+hlOShRLeDw==} + + '@mermaid-js/parser@0.6.2': + resolution: {integrity: sha512-+PO02uGF6L6Cs0Bw8RpGhikVvMWEysfAyl27qTlroUB8jSWr1lL0Sf6zi78ZxlSnmgSY2AMMKVgghnN9jTtwkQ==} + + '@oslojs/encoding@1.1.0': + resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==} + + '@pagefind/darwin-arm64@1.3.0': + resolution: {integrity: sha512-365BEGl6ChOsauRjyVpBjXybflXAOvoMROw3TucAROHIcdBvXk9/2AmEvGFU0r75+vdQI4LJdJdpH4Y6Yqaj4A==} + cpu: [arm64] + os: [darwin] + + '@pagefind/darwin-x64@1.3.0': + resolution: {integrity: sha512-zlGHA23uuXmS8z3XxEGmbHpWDxXfPZ47QS06tGUq0HDcZjXjXHeLG+cboOy828QIV5FXsm9MjfkP5e4ZNbOkow==} + cpu: [x64] + os: [darwin] + + '@pagefind/default-ui@1.3.0': + resolution: {integrity: sha512-CGKT9ccd3+oRK6STXGgfH+m0DbOKayX6QGlq38TfE1ZfUcPc5+ulTuzDbZUnMo+bubsEOIypm4Pl2iEyzZ1cNg==} + + '@pagefind/linux-arm64@1.3.0': + resolution: {integrity: sha512-8lsxNAiBRUk72JvetSBXs4WRpYrQrVJXjlRRnOL6UCdBN9Nlsz0t7hWstRk36+JqHpGWOKYiuHLzGYqYAqoOnQ==} + cpu: [arm64] + os: [linux] + + '@pagefind/linux-x64@1.3.0': + resolution: {integrity: sha512-hAvqdPJv7A20Ucb6FQGE6jhjqy+vZ6pf+s2tFMNtMBG+fzcdc91uTw7aP/1Vo5plD0dAOHwdxfkyw0ugal4kcQ==} + cpu: [x64] + os: [linux] + + '@pagefind/windows-x64@1.3.0': + resolution: {integrity: sha512-BR1bIRWOMqkf8IoU576YDhij1Wd/Zf2kX/kCI0b2qzCKC8wcc2GQJaaRMCpzvCCrmliO4vtJ6RITp/AnoYUUmQ==} + cpu: [x64] + os: [win32] + + '@rollup/pluginutils@5.3.0': + resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + + '@rollup/rollup-android-arm-eabi@4.50.1': + resolution: {integrity: sha512-HJXwzoZN4eYTdD8bVV22DN8gsPCAj3V20NHKOs8ezfXanGpmVPR7kalUHd+Y31IJp9stdB87VKPFbsGY3H/2ag==} + cpu: [arm] + os: [android] + + '@rollup/rollup-android-arm64@4.50.1': + resolution: {integrity: sha512-PZlsJVcjHfcH53mOImyt3bc97Ep3FJDXRpk9sMdGX0qgLmY0EIWxCag6EigerGhLVuL8lDVYNnSo8qnTElO4xw==} + cpu: [arm64] + os: [android] + + '@rollup/rollup-darwin-arm64@4.50.1': + resolution: {integrity: sha512-xc6i2AuWh++oGi4ylOFPmzJOEeAa2lJeGUGb4MudOtgfyyjr4UPNK+eEWTPLvmPJIY/pgw6ssFIox23SyrkkJw==} + cpu: [arm64] + os: [darwin] + + '@rollup/rollup-darwin-x64@4.50.1': + resolution: {integrity: sha512-2ofU89lEpDYhdLAbRdeyz/kX3Y2lpYc6ShRnDjY35bZhd2ipuDMDi6ZTQ9NIag94K28nFMofdnKeHR7BT0CATw==} + cpu: [x64] + os: [darwin] + + '@rollup/rollup-freebsd-arm64@4.50.1': + resolution: {integrity: sha512-wOsE6H2u6PxsHY/BeFHA4VGQN3KUJFZp7QJBmDYI983fgxq5Th8FDkVuERb2l9vDMs1D5XhOrhBrnqcEY6l8ZA==} + cpu: [arm64] + os: [freebsd] + + '@rollup/rollup-freebsd-x64@4.50.1': + resolution: {integrity: sha512-A/xeqaHTlKbQggxCqispFAcNjycpUEHP52mwMQZUNqDUJFFYtPHCXS1VAG29uMlDzIVr+i00tSFWFLivMcoIBQ==} + cpu: [x64] + os: [freebsd] + + '@rollup/rollup-linux-arm-gnueabihf@4.50.1': + resolution: {integrity: sha512-54v4okehwl5TaSIkpp97rAHGp7t3ghinRd/vyC1iXqXMfjYUTm7TfYmCzXDoHUPTTf36L8pr0E7YsD3CfB3ZDg==} + cpu: [arm] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-arm-musleabihf@4.50.1': + resolution: {integrity: sha512-p/LaFyajPN/0PUHjv8TNyxLiA7RwmDoVY3flXHPSzqrGcIp/c2FjwPPP5++u87DGHtw+5kSH5bCJz0mvXngYxw==} + cpu: [arm] + os: [linux] + libc: [musl] + + '@rollup/rollup-linux-arm64-gnu@4.50.1': + resolution: {integrity: sha512-2AbMhFFkTo6Ptna1zO7kAXXDLi7H9fGTbVaIq2AAYO7yzcAsuTNWPHhb2aTA6GPiP+JXh85Y8CiS54iZoj4opw==} + cpu: [arm64] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-arm64-musl@4.50.1': + resolution: {integrity: sha512-Cgef+5aZwuvesQNw9eX7g19FfKX5/pQRIyhoXLCiBOrWopjo7ycfB292TX9MDcDijiuIJlx1IzJz3IoCPfqs9w==} + cpu: [arm64] + os: [linux] + libc: [musl] + + '@rollup/rollup-linux-loongarch64-gnu@4.50.1': + resolution: {integrity: sha512-RPhTwWMzpYYrHrJAS7CmpdtHNKtt2Ueo+BlLBjfZEhYBhK00OsEqM08/7f+eohiF6poe0YRDDd8nAvwtE/Y62Q==} + cpu: [loong64] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-ppc64-gnu@4.50.1': + resolution: {integrity: sha512-eSGMVQw9iekut62O7eBdbiccRguuDgiPMsw++BVUg+1K7WjZXHOg/YOT9SWMzPZA+w98G+Fa1VqJgHZOHHnY0Q==} + cpu: [ppc64] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-riscv64-gnu@4.50.1': + resolution: {integrity: sha512-S208ojx8a4ciIPrLgazF6AgdcNJzQE4+S9rsmOmDJkusvctii+ZvEuIC4v/xFqzbuP8yDjn73oBlNDgF6YGSXQ==} + cpu: [riscv64] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-riscv64-musl@4.50.1': + resolution: {integrity: sha512-3Ag8Ls1ggqkGUvSZWYcdgFwriy2lWo+0QlYgEFra/5JGtAd6C5Hw59oojx1DeqcA2Wds2ayRgvJ4qxVTzCHgzg==} + cpu: [riscv64] + os: [linux] + libc: [musl] + + '@rollup/rollup-linux-s390x-gnu@4.50.1': + resolution: {integrity: sha512-t9YrKfaxCYe7l7ldFERE1BRg/4TATxIg+YieHQ966jwvo7ddHJxPj9cNFWLAzhkVsbBvNA4qTbPVNsZKBO4NSg==} + cpu: [s390x] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-x64-gnu@4.50.1': + resolution: {integrity: sha512-MCgtFB2+SVNuQmmjHf+wfI4CMxy3Tk8XjA5Z//A0AKD7QXUYFMQcns91K6dEHBvZPCnhJSyDWLApk40Iq/H3tA==} + cpu: [x64] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-x64-musl@4.50.1': + resolution: {integrity: sha512-nEvqG+0jeRmqaUMuwzlfMKwcIVffy/9KGbAGyoa26iu6eSngAYQ512bMXuqqPrlTyfqdlB9FVINs93j534UJrg==} + cpu: [x64] + os: [linux] + libc: [musl] + + '@rollup/rollup-openharmony-arm64@4.50.1': + resolution: {integrity: sha512-RDsLm+phmT3MJd9SNxA9MNuEAO/J2fhW8GXk62G/B4G7sLVumNFbRwDL6v5NrESb48k+QMqdGbHgEtfU0LCpbA==} + cpu: [arm64] + os: [openharmony] + + '@rollup/rollup-win32-arm64-msvc@4.50.1': + resolution: {integrity: sha512-hpZB/TImk2FlAFAIsoElM3tLzq57uxnGYwplg6WDyAxbYczSi8O2eQ+H2Lx74504rwKtZ3N2g4bCUkiamzS6TQ==} + cpu: [arm64] + os: [win32] + + '@rollup/rollup-win32-ia32-msvc@4.50.1': + resolution: {integrity: sha512-SXjv8JlbzKM0fTJidX4eVsH+Wmnp0/WcD8gJxIZyR6Gay5Qcsmdbi9zVtnbkGPG8v2vMR1AD06lGWy5FLMcG7A==} + cpu: [ia32] + os: [win32] + + '@rollup/rollup-win32-x64-msvc@4.50.1': + resolution: {integrity: sha512-StxAO/8ts62KZVRAm4JZYq9+NqNsV7RvimNK+YM7ry//zebEH6meuugqW/P5OFUCjyQgui+9fUxT6d5NShvMvA==} + cpu: [x64] + os: [win32] + + '@shikijs/core@3.12.2': + resolution: {integrity: sha512-L1Safnhra3tX/oJK5kYHaWmLEBJi1irASwewzY3taX5ibyXyMkkSDZlq01qigjryOBwrXSdFgTiZ3ryzSNeu7Q==} + + '@shikijs/engine-javascript@3.12.2': + resolution: {integrity: sha512-Nm3/azSsaVS7hk6EwtHEnTythjQfwvrO5tKqMlaH9TwG1P+PNaR8M0EAKZ+GaH2DFwvcr4iSfTveyxMIvXEHMw==} + + '@shikijs/engine-oniguruma@3.12.2': + resolution: {integrity: sha512-hozwnFHsLvujK4/CPVHNo3Bcg2EsnG8krI/ZQ2FlBlCRpPZW4XAEQmEwqegJsypsTAN9ehu2tEYe30lYKSZW/w==} + + '@shikijs/langs@3.12.2': + resolution: {integrity: sha512-bVx5PfuZHDSHoBal+KzJZGheFuyH4qwwcwG/n+MsWno5cTlKmaNtTsGzJpHYQ8YPbB5BdEdKU1rga5/6JGY8ww==} + + '@shikijs/themes@3.12.2': + resolution: {integrity: sha512-fTR3QAgnwYpfGczpIbzPjlRnxyONJOerguQv1iwpyQZ9QXX4qy/XFQqXlf17XTsorxnHoJGbH/LXBvwtqDsF5A==} + + '@shikijs/types@3.12.2': + resolution: {integrity: sha512-K5UIBzxCyv0YoxN3LMrKB9zuhp1bV+LgewxuVwHdl4Gz5oePoUFrr9EfgJlGlDeXCU1b/yhdnXeuRvAnz8HN8Q==} + + '@shikijs/vscode-textmate@10.0.2': + resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==} + + '@swc/helpers@0.5.17': + resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==} + + '@types/d3-array@3.2.1': + resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==} + + '@types/d3-axis@3.0.6': + resolution: {integrity: sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==} + + '@types/d3-brush@3.0.6': + resolution: {integrity: sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==} + + '@types/d3-chord@3.0.6': + resolution: {integrity: sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==} + + '@types/d3-color@3.1.3': + resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==} + + '@types/d3-contour@3.0.6': + resolution: {integrity: sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==} + + '@types/d3-delaunay@6.0.4': + resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==} + + '@types/d3-dispatch@3.0.7': + resolution: {integrity: sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==} + + '@types/d3-drag@3.0.7': + resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==} + + '@types/d3-dsv@3.0.7': + resolution: {integrity: sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==} + + '@types/d3-ease@3.0.2': + resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==} + + '@types/d3-fetch@3.0.7': + resolution: {integrity: sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==} + + '@types/d3-force@3.0.10': + resolution: {integrity: sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==} + + '@types/d3-format@3.0.4': + resolution: {integrity: sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==} + + '@types/d3-geo@3.1.0': + resolution: {integrity: sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==} + + '@types/d3-hierarchy@3.1.7': + resolution: {integrity: sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==} + + '@types/d3-interpolate@3.0.4': + resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==} + + '@types/d3-path@3.1.1': + resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==} + + '@types/d3-polygon@3.0.2': + resolution: {integrity: sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==} + + '@types/d3-quadtree@3.0.6': + resolution: {integrity: sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==} + + '@types/d3-random@3.0.3': + resolution: {integrity: sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==} + + '@types/d3-scale-chromatic@3.1.0': + resolution: {integrity: sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==} + + '@types/d3-scale@4.0.9': + resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==} + + '@types/d3-selection@3.0.11': + resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==} + + '@types/d3-shape@3.1.7': + resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==} + + '@types/d3-time-format@4.0.3': + resolution: {integrity: sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==} + + '@types/d3-time@3.0.4': + resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==} + + '@types/d3-timer@3.0.2': + resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==} + + '@types/d3-transition@3.0.9': + resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==} + + '@types/d3-zoom@3.0.8': + resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==} + + '@types/d3@7.4.3': + resolution: {integrity: sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==} + + '@types/debug@4.1.12': + resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==} + + '@types/estree-jsx@1.0.5': + resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==} + + '@types/estree@1.0.8': + resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==} + + '@types/fontkit@2.0.8': + resolution: {integrity: sha512-wN+8bYxIpJf+5oZdrdtaX04qUuWHcKxcDEgRS9Qm9ZClSHjzEn13SxUC+5eRM+4yXIeTYk8mTzLAWGF64847ew==} + + '@types/geojson@7946.0.16': + resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==} + + '@types/hast@3.0.4': + resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==} + + '@types/js-yaml@4.0.9': + resolution: {integrity: sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==} + + '@types/mdast@4.0.4': + resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==} + + '@types/mdx@2.0.13': + resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==} + + '@types/ms@2.1.0': + resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==} + + '@types/nlcst@2.0.3': + resolution: {integrity: sha512-vSYNSDe6Ix3q+6Z7ri9lyWqgGhJTmzRjZRqyq15N0Z/1/UnVsno9G/N40NBijoYx2seFDIl0+B2mgAb9mezUCA==} + + '@types/node@17.0.45': + resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==} + + '@types/node@24.3.1': + resolution: {integrity: sha512-3vXmQDXy+woz+gnrTvuvNrPzekOi+Ds0ReMxw0LzBiK3a+1k0kQn9f2NWk+lgD4rJehFUmYy2gMhJ2ZI+7YP9g==} + + '@types/picomatch@3.0.2': + resolution: {integrity: sha512-n0i8TD3UDB7paoMMxA3Y65vUncFJXjcUf7lQY7YyKGl6031FNjfsLs6pdLFCy2GNFxItPJG8GvvpbZc2skH7WA==} + + '@types/sax@1.2.7': + resolution: {integrity: sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==} + + '@types/trusted-types@2.0.7': + resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==} + + '@types/unist@2.0.11': + resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==} + + '@types/unist@3.0.3': + resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==} + + '@ungap/structured-clone@1.3.0': + resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==} + + acorn-jsx@5.3.2: + resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} + peerDependencies: + acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 + + acorn@8.15.0: + resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==} + engines: {node: '>=0.4.0'} + hasBin: true + + ansi-align@3.0.1: + resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==} + + ansi-escapes@7.1.0: + resolution: {integrity: sha512-YdhtCd19sKRKfAAUsrcC1wzm4JuzJoiX4pOJqIoW2qmKj5WzG/dL8uUJ0361zaXtHqK7gEhOwtAtz7t3Yq3X5g==} + engines: {node: '>=18'} + + ansi-regex@5.0.1: + resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==} + engines: {node: '>=8'} + + ansi-regex@6.2.2: + resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==} + engines: {node: '>=12'} + + ansi-styles@6.2.3: + resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==} + engines: {node: '>=12'} + + anymatch@3.1.3: + resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} + engines: {node: '>= 8'} + + arg@5.0.2: + resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==} + + argparse@2.0.1: + resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} + + aria-query@5.3.2: + resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==} + engines: {node: '>= 0.4'} + + array-iterate@2.0.1: + resolution: {integrity: sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==} + + astring@1.9.0: + resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==} + hasBin: true + + astro-expressive-code@0.41.3: + resolution: {integrity: sha512-u+zHMqo/QNLE2eqYRCrK3+XMlKakv33Bzuz+56V1gs8H0y6TZ0hIi3VNbIxeTn51NLn+mJfUV/A0kMNfE4rANw==} + peerDependencies: + astro: ^4.0.0-beta || ^5.0.0-beta || ^3.3.0 + + astro-mermaid@1.0.4: + resolution: {integrity: sha512-2M4bVjqLpDB2EZ4EfD6Utzs7VEEORmlt5hNZcMK54IcKWzflohKvowCzg79RHoAdu30W8a4aECAExH8mF7wG4w==} + peerDependencies: + astro: ^4.0.0 || ^5.0.0 + mermaid: ^10.0.0 || ^11.0.0 + + astro-remote@0.3.4: + resolution: {integrity: sha512-jL5skNQLA0YBc1R3bVGXyHew3FqGqsT7AgLzWAVeTLzFkwVMUYvs4/lKJSmS7ygcF1GnHnoKG6++8GL9VtWwGQ==} + engines: {node: '>=18.14.1'} + + astro@5.13.6: + resolution: {integrity: sha512-chy1J+AO3d4lui4MjUyqusiW1jilfkviCBDz+c2MoXxhIImF96GqoliX+79fGy6KMsnMh5lUn+qwy3yUBJqZqg==} + engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'} + hasBin: true + + axobject-query@4.1.0: + resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==} + engines: {node: '>= 0.4'} + + bail@2.0.2: + resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==} + + base-64@1.0.0: + resolution: {integrity: sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==} + + base64-js@1.5.1: + resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} + + bcp-47-match@2.0.3: + resolution: {integrity: sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==} + + bcp-47@2.1.0: + resolution: {integrity: sha512-9IIS3UPrvIa1Ej+lVDdDwO7zLehjqsaByECw0bu2RRGP73jALm6FYbzI5gWbgHLvNdkvfXB5YrSbocZdOS0c0w==} + + blob-to-buffer@1.2.9: + resolution: {integrity: sha512-BF033y5fN6OCofD3vgHmNtwZWRcq9NLyyxyILx9hfMy1sXYy4ojFl765hJ2lP0YaN2fuxPaLO2Vzzoxy0FLFFA==} + + boolbase@1.0.0: + resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==} + + boxen@8.0.1: + resolution: {integrity: sha512-F3PH5k5juxom4xktynS7MoFY+NUWH5LC4CnH11YB8NPew+HLpmBLCybSAEyb2F+4pRXhuhWqFesoQd6DAyc2hw==} + engines: {node: '>=18'} + + brotli@1.3.3: + resolution: {integrity: sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==} + + camelcase@8.0.0: + resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==} + engines: {node: '>=16'} + + ccount@2.0.1: + resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==} + + chalk@5.6.2: + resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==} + engines: {node: ^12.17.0 || ^14.13 || >=16.0.0} + + character-entities-html4@2.1.0: + resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==} + + character-entities-legacy@3.0.0: + resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==} + + character-entities@2.0.2: + resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==} + + character-reference-invalid@2.0.1: + resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==} + + chevrotain-allstar@0.3.1: + resolution: {integrity: sha512-b7g+y9A0v4mxCW1qUhf3BSVPg+/NvGErk/dOkrDaHA0nQIQGAtrOjlX//9OQtRlSCy+x9rfB5N8yC71lH1nvMw==} + peerDependencies: + chevrotain: ^11.0.0 + + chevrotain@11.0.3: + resolution: {integrity: sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==} + + chokidar@4.0.3: + resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==} + engines: {node: '>= 14.16.0'} + + ci-info@4.3.0: + resolution: {integrity: sha512-l+2bNRMiQgcfILUi33labAZYIWlH1kWDp+ecNo5iisRKrbm0xcRyCww71/YU0Fkw0mAFpz9bJayXPjey6vkmaQ==} + engines: {node: '>=8'} + + cli-boxes@3.0.0: + resolution: {integrity: sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==} + engines: {node: '>=10'} + + clone@2.1.2: + resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==} + engines: {node: '>=0.8'} + + clsx@2.1.1: + resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} + engines: {node: '>=6'} + + collapse-white-space@2.1.0: + resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==} + + color-convert@2.0.1: + resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} + engines: {node: '>=7.0.0'} + + color-name@1.1.4: + resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} + + color-string@1.9.1: + resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==} + + color@4.2.3: + resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==} + engines: {node: '>=12.5.0'} + + comma-separated-tokens@2.0.3: + resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==} + + commander@7.2.0: + resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==} + engines: {node: '>= 10'} + + commander@8.3.0: + resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==} + engines: {node: '>= 12'} + + common-ancestor-path@1.0.1: + resolution: {integrity: sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==} + + confbox@0.1.8: + resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==} + + confbox@0.2.2: + resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==} + + cookie-es@1.2.2: + resolution: {integrity: sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg==} + + cookie@1.0.2: + resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==} + engines: {node: '>=18'} + + cose-base@1.0.3: + resolution: {integrity: sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==} + + cose-base@2.2.0: + resolution: {integrity: sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==} + + cross-fetch@3.2.0: + resolution: {integrity: sha512-Q+xVJLoGOeIMXZmbUK4HYk+69cQH6LudR0Vu/pRm2YlU/hDV9CiS0gKUMaWY5f2NeUH9C1nV3bsTlCo0FsTV1Q==} + + crossws@0.3.5: + resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==} + + css-selector-parser@3.1.3: + resolution: {integrity: sha512-gJMigczVZqYAk0hPVzx/M4Hm1D9QOtqkdQk9005TNzDIUGzo5cnHEDiKUT7jGPximL/oYb+LIitcHFQ4aKupxg==} + + css-tree@3.1.0: + resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} + + cssesc@3.0.0: + resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} + engines: {node: '>=4'} + hasBin: true + + cytoscape-cose-bilkent@4.1.0: + resolution: {integrity: sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==} + peerDependencies: + cytoscape: ^3.2.0 + + cytoscape-fcose@2.2.0: + resolution: {integrity: sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==} + peerDependencies: + cytoscape: ^3.2.0 + + cytoscape@3.33.1: + resolution: {integrity: sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==} + engines: {node: '>=0.10'} + + d3-array@2.12.1: + resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==} + + d3-array@3.2.4: + resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==} + engines: {node: '>=12'} + + d3-axis@3.0.0: + resolution: {integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==} + engines: {node: '>=12'} + + d3-brush@3.0.0: + resolution: {integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==} + engines: {node: '>=12'} + + d3-chord@3.0.1: + resolution: {integrity: sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==} + engines: {node: '>=12'} + + d3-color@3.1.0: + resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==} + engines: {node: '>=12'} + + d3-contour@4.0.2: + resolution: {integrity: sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==} + engines: {node: '>=12'} + + d3-delaunay@6.0.4: + resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==} + engines: {node: '>=12'} + + d3-dispatch@3.0.1: + resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==} + engines: {node: '>=12'} + + d3-drag@3.0.0: + resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==} + engines: {node: '>=12'} + + d3-dsv@3.0.1: + resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==} + engines: {node: '>=12'} + hasBin: true + + d3-ease@3.0.1: + resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==} + engines: {node: '>=12'} + + d3-fetch@3.0.1: + resolution: {integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==} + engines: {node: '>=12'} + + d3-force@3.0.0: + resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==} + engines: {node: '>=12'} + + d3-format@3.1.0: + resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==} + engines: {node: '>=12'} + + d3-geo@3.1.1: + resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==} + engines: {node: '>=12'} + + d3-hierarchy@3.1.2: + resolution: {integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==} + engines: {node: '>=12'} + + d3-interpolate@3.0.1: + resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==} + engines: {node: '>=12'} + + d3-path@1.0.9: + resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==} + + d3-path@3.1.0: + resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==} + engines: {node: '>=12'} + + d3-polygon@3.0.1: + resolution: {integrity: sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==} + engines: {node: '>=12'} + + d3-quadtree@3.0.1: + resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==} + engines: {node: '>=12'} + + d3-random@3.0.1: + resolution: {integrity: sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==} + engines: {node: '>=12'} + + d3-sankey@0.12.3: + resolution: {integrity: sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==} + + d3-scale-chromatic@3.1.0: + resolution: {integrity: sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==} + engines: {node: '>=12'} + + d3-scale@4.0.2: + resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==} + engines: {node: '>=12'} + + d3-selection@3.0.0: + resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==} + engines: {node: '>=12'} + + d3-shape@1.3.7: + resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==} + + d3-shape@3.2.0: + resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==} + engines: {node: '>=12'} + + d3-time-format@4.1.0: + resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==} + engines: {node: '>=12'} + + d3-time@3.1.0: + resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==} + engines: {node: '>=12'} + + d3-timer@3.0.1: + resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==} + engines: {node: '>=12'} + + d3-transition@3.0.1: + resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==} + engines: {node: '>=12'} + peerDependencies: + d3-selection: 2 - 3 + + d3-zoom@3.0.0: + resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==} + engines: {node: '>=12'} + + d3@7.9.0: + resolution: {integrity: sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==} + engines: {node: '>=12'} + + dagre-d3-es@7.0.11: + resolution: {integrity: sha512-tvlJLyQf834SylNKax8Wkzco/1ias1OPw8DcUMDE7oUIoSEW25riQVuiu/0OWEFqT0cxHT3Pa9/D82Jr47IONw==} + + dayjs@1.11.18: + resolution: {integrity: sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==} + + debug@4.4.1: + resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==} + engines: {node: '>=6.0'} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true + + decode-named-character-reference@1.2.0: + resolution: {integrity: sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==} + + defu@6.1.4: + resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==} + + delaunator@5.0.1: + resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==} + + dequal@2.0.3: + resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} + engines: {node: '>=6'} + + destr@2.0.5: + resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==} + + detect-libc@2.0.4: + resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==} + engines: {node: '>=8'} + + deterministic-object-hash@2.0.2: + resolution: {integrity: sha512-KxektNH63SrbfUyDiwXqRb1rLwKt33AmMv+5Nhsw1kqZ13SJBRTgZHtGbE+hH3a1mVW1cz+4pqSWVPAtLVXTzQ==} + engines: {node: '>=18'} + + devalue@5.3.2: + resolution: {integrity: sha512-UDsjUbpQn9kvm68slnrs+mfxwFkIflOhkanmyabZ8zOYk8SMEIbJ3TK+88g70hSIeytu4y18f0z/hYHMTrXIWw==} + + devlop@1.1.0: + resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==} + + dfa@1.2.0: + resolution: {integrity: sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==} + + diff@5.2.0: + resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==} + engines: {node: '>=0.3.1'} + + direction@2.0.1: + resolution: {integrity: sha512-9S6m9Sukh1cZNknO1CWAr2QAWsbKLafQiyM5gZ7VgXHeuaoUwffKN4q6NC4A/Mf9iiPlOXQEKW/Mv/mh9/3YFA==} + hasBin: true + + dlv@1.1.3: + resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==} + + dompurify@3.2.6: + resolution: {integrity: sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==} + + dset@3.1.4: + resolution: {integrity: sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==} + engines: {node: '>=4'} + + emoji-regex@10.5.0: + resolution: {integrity: sha512-lb49vf1Xzfx080OKA0o6l8DQQpV+6Vg95zyCJX9VB/BqKYlhG7N4wgROUUHRA+ZPUefLnteQOad7z1kT2bV7bg==} + + emoji-regex@8.0.0: + resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} + + entities@4.5.0: + resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} + engines: {node: '>=0.12'} + + entities@6.0.1: + resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==} + engines: {node: '>=0.12'} + + environment@1.1.0: + resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==} + engines: {node: '>=18'} + + es-module-lexer@1.7.0: + resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==} + + esast-util-from-estree@2.0.0: + resolution: {integrity: sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ==} + + esast-util-from-js@2.0.1: + resolution: {integrity: sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw==} + + esbuild@0.25.9: + resolution: {integrity: sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==} + engines: {node: '>=18'} + hasBin: true + + escape-string-regexp@5.0.0: + resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==} + engines: {node: '>=12'} + + estree-util-attach-comments@3.0.0: + resolution: {integrity: sha512-cKUwm/HUcTDsYh/9FgnuFqpfquUbwIqwKM26BVCGDPVgvaCl/nDCCjUfiLlx6lsEZ3Z4RFxNbOQ60pkaEwFxGw==} + + estree-util-build-jsx@3.0.1: + resolution: {integrity: sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ==} + + estree-util-is-identifier-name@3.0.0: + resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==} + + estree-util-scope@1.0.0: + resolution: {integrity: sha512-2CAASclonf+JFWBNJPndcOpA8EMJwa0Q8LUFJEKqXLW6+qBvbFZuF5gItbQOs/umBUkjviCSDCbBwU2cXbmrhQ==} + + estree-util-to-js@2.0.0: + resolution: {integrity: sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==} + + estree-util-visit@2.0.0: + resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==} + + estree-walker@2.0.2: + resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} + + estree-walker@3.0.3: + resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} + + eventemitter3@5.0.1: + resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==} + + expressive-code@0.41.3: + resolution: {integrity: sha512-YLnD62jfgBZYrXIPQcJ0a51Afv9h8VlWqEGK9uU2T5nL/5rb8SnA86+7+mgCZe5D34Tff5RNEA5hjNVJYHzrFg==} + + exsolve@1.0.7: + resolution: {integrity: sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==} + + extend@3.0.2: + resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==} + + fast-deep-equal@3.1.3: + resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} + + fdir@6.5.0: + resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==} + engines: {node: '>=12.0.0'} + peerDependencies: + picomatch: ^3 || ^4 + peerDependenciesMeta: + picomatch: + optional: true + + flattie@1.1.1: + resolution: {integrity: sha512-9UbaD6XdAL97+k/n+N7JwX46K/M6Zc6KcFYskrYL8wbBV/Uyk0CTAMY0VT+qiK5PM7AIc9aTWYtq65U7T+aCNQ==} + engines: {node: '>=8'} + + fontace@0.3.0: + resolution: {integrity: sha512-czoqATrcnxgWb/nAkfyIrRp6Q8biYj7nGnL6zfhTcX+JKKpWHFBnb8uNMw/kZr7u++3Y3wYSYoZgHkCcsuBpBg==} + + fontkit@2.0.4: + resolution: {integrity: sha512-syetQadaUEDNdxdugga9CpEYVaQIxOwk7GlwZWWZ19//qW4zE5bknOKeMBDYAASwnpaSHKJITRLMF9m1fp3s6g==} + + fsevents@2.3.3: + resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} + engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} + os: [darwin] + + get-east-asian-width@1.3.1: + resolution: {integrity: sha512-R1QfovbPsKmosqTnPoRFiJ7CF9MLRgb53ChvMZm+r4p76/+8yKDy17qLL2PKInORy2RkZZekuK0efYgmzTkXyQ==} + engines: {node: '>=18'} + + github-slugger@2.0.0: + resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==} + + globals@15.15.0: + resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==} + engines: {node: '>=18'} + + h3@1.15.4: + resolution: {integrity: sha512-z5cFQWDffyOe4vQ9xIqNfCZdV4p//vy6fBnr8Q1AWnVZ0teurKMG66rLj++TKwKPUP3u7iMUvrvKaEUiQw2QWQ==} + + hachure-fill@0.5.2: + resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==} + + has-flag@5.0.1: + resolution: {integrity: sha512-CsNUt5x9LUdx6hnk/E2SZLsDyvfqANZSUq4+D3D8RzDJ2M+HDTIkF60ibS1vHaK55vzgiZw1bEPFG9yH7l33wA==} + engines: {node: '>=12'} + + hast-util-embedded@3.0.0: + resolution: {integrity: sha512-naH8sld4Pe2ep03qqULEtvYr7EjrLK2QHY8KJR6RJkTUjPGObe1vnx585uzem2hGra+s1q08DZZpfgDVYRbaXA==} + + hast-util-format@1.1.0: + resolution: {integrity: sha512-yY1UDz6bC9rDvCWHpx12aIBGRG7krurX0p0Fm6pT547LwDIZZiNr8a+IHDogorAdreULSEzP82Nlv5SZkHZcjA==} + + hast-util-from-html@2.0.3: + resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==} + + hast-util-from-parse5@8.0.3: + resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==} + + hast-util-has-property@3.0.0: + resolution: {integrity: sha512-MNilsvEKLFpV604hwfhVStK0usFY/QmM5zX16bo7EjnAEGofr5YyI37kzopBlZJkHD4t887i+q/C8/tr5Q94cA==} + + hast-util-is-body-ok-link@3.0.1: + resolution: {integrity: sha512-0qpnzOBLztXHbHQenVB8uNuxTnm/QBFUOmdOSsEn7GnBtyY07+ENTWVFBAnXd/zEgd9/SUG3lRY7hSIBWRgGpQ==} + + hast-util-is-element@3.0.0: + resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==} + + hast-util-minify-whitespace@1.0.1: + resolution: {integrity: sha512-L96fPOVpnclQE0xzdWb/D12VT5FabA7SnZOUMtL1DbXmYiHJMXZvFkIZfiMmTCNJHUeO2K9UYNXoVyfz+QHuOw==} + + hast-util-parse-selector@4.0.0: + resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==} + + hast-util-phrasing@3.0.1: + resolution: {integrity: sha512-6h60VfI3uBQUxHqTyMymMZnEbNl1XmEGtOxxKYL7stY2o601COo62AWAYBQR9lZbYXYSBoxag8UpPRXK+9fqSQ==} + + hast-util-raw@9.1.0: + resolution: {integrity: sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==} + + hast-util-select@6.0.4: + resolution: {integrity: sha512-RqGS1ZgI0MwxLaKLDxjprynNzINEkRHY2i8ln4DDjgv9ZhcYVIHN9rlpiYsqtFwrgpYU361SyWDQcGNIBVu3lw==} + + hast-util-to-estree@3.1.3: + resolution: {integrity: sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w==} + + hast-util-to-html@9.0.5: + resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==} + + hast-util-to-jsx-runtime@2.3.6: + resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==} + + hast-util-to-parse5@8.0.0: + resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==} + + hast-util-to-string@3.0.1: + resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==} + + hast-util-to-text@4.0.2: + resolution: {integrity: sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==} + + hast-util-whitespace@3.0.0: + resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==} + + hastscript@9.0.1: + resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==} + + html-escaper@3.0.3: + resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==} + + html-void-elements@3.0.0: + resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==} + + html-whitespace-sensitive-tag-names@3.0.1: + resolution: {integrity: sha512-q+310vW8zmymYHALr1da4HyXUQ0zgiIwIicEfotYPWGN0OJVEN/58IJ3A4GBYcEq3LGAZqKb+ugvP0GNB9CEAA==} + + http-cache-semantics@4.2.0: + resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==} + + i18next@23.16.8: + resolution: {integrity: sha512-06r/TitrM88Mg5FdUXAKL96dJMzgqLE5dv3ryBAra4KCwD9mJ4ndOTS95ZuymIGoE+2hzfdaMak2X11/es7ZWg==} + + iconv-lite@0.6.3: + resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==} + engines: {node: '>=0.10.0'} + + import-meta-resolve@4.2.0: + resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==} + + inline-style-parser@0.2.4: + resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==} + + internmap@1.0.1: + resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==} + + internmap@2.0.3: + resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==} + engines: {node: '>=12'} + + iron-webcrypto@1.2.1: + resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==} + + is-absolute-url@4.0.1: + resolution: {integrity: sha512-/51/TKE88Lmm7Gc4/8btclNXWS+g50wXhYJq8HWIBAGUBnoAdRu1aXeh364t/O7wXDAcTJDP8PNuNKWUDWie+A==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + + is-alphabetical@2.0.1: + resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==} + + is-alphanumerical@2.0.1: + resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==} + + is-arrayish@0.3.2: + resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==} + + is-decimal@2.0.1: + resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==} + + is-docker@3.0.0: + resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + hasBin: true + + is-fullwidth-code-point@3.0.0: + resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==} + engines: {node: '>=8'} + + is-hexadecimal@2.0.1: + resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==} + + is-inside-container@1.0.0: + resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==} + engines: {node: '>=14.16'} + hasBin: true + + is-plain-obj@4.1.0: + resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==} + engines: {node: '>=12'} + + is-wsl@3.1.0: + resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==} + engines: {node: '>=16'} + + js-yaml@4.1.0: + resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==} + hasBin: true + + katex@0.16.22: + resolution: {integrity: sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==} + hasBin: true + + khroma@2.1.0: + resolution: {integrity: sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==} + + kleur@3.0.3: + resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==} + engines: {node: '>=6'} + + kleur@4.1.5: + resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==} + engines: {node: '>=6'} + + klona@2.0.6: + resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==} + engines: {node: '>= 8'} + + kolorist@1.8.0: + resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==} + + langium@3.3.1: + resolution: {integrity: sha512-QJv/h939gDpvT+9SiLVlY7tZC3xB2qK57v0J04Sh9wpMb6MP1q8gB21L3WIo8T5P1MSMg3Ep14L7KkDCFG3y4w==} + engines: {node: '>=16.0.0'} + + layout-base@1.0.2: + resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==} + + layout-base@2.0.1: + resolution: {integrity: sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==} + + local-pkg@1.1.2: + resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==} + engines: {node: '>=14'} + + lodash-es@4.17.21: + resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} + + longest-streak@3.1.0: + resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==} + + lru-cache@10.4.3: + resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==} + + magic-string@0.30.19: + resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==} + + magicast@0.3.5: + resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==} + + markdown-extensions@2.0.0: + resolution: {integrity: sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==} + engines: {node: '>=16'} + + markdown-table@3.0.4: + resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==} + + marked-footnote@1.4.0: + resolution: {integrity: sha512-fZTxAhI1TcLEs5UOjCfYfTHpyKGaWQevbxaGTEA68B51l7i87SctPFtHETYqPkEN0ka5opvy4Dy1l/yXVC+hmg==} + peerDependencies: + marked: '>=7.0.0' + + marked-smartypants@1.1.10: + resolution: {integrity: sha512-XGK59M2nhy3Jpa0kdWSXQuKn908VkKbqK1IqF8Rk5QV619OWBs2/rkcg/PVhpKkADlRKJSYe6XqDMZMkZywT4g==} + peerDependencies: + marked: '>=4 <17' + + marked@12.0.2: + resolution: {integrity: sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==} + engines: {node: '>= 18'} + hasBin: true + + marked@16.2.1: + resolution: {integrity: sha512-r3UrXED9lMlHF97jJByry90cwrZBBvZmjG1L68oYfuPMW+uDTnuMbyJDymCWwbTE+f+3LhpNDKfpR3a3saFyjA==} + engines: {node: '>= 20'} + hasBin: true + + mdast-heading-id@2.0.0: + resolution: {integrity: sha512-JVh0xKqsI3INPzJEqqCiuq3BGde5x6AlBTQAetLQQr9qTiDjX4dCvFhIiGmyPt1rftiHELQPI5obGphIOTXeWQ==} + + mdast-util-definitions@6.0.0: + resolution: {integrity: sha512-scTllyX6pnYNZH/AIp/0ePz6s4cZtARxImwoPJ7kS42n+MnVsI4XbnG6d4ibehRIldYMWM2LD7ImQblVhUejVQ==} + + mdast-util-directive@3.1.0: + resolution: {integrity: sha512-I3fNFt+DHmpWCYAT7quoM6lHf9wuqtI+oCOfvILnoicNIqjh5E3dEJWiXuYME2gNe8vl1iMQwyUHa7bgFmak6Q==} + + mdast-util-find-and-replace@3.0.2: + resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==} + + mdast-util-from-markdown@2.0.2: + resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==} + + mdast-util-gfm-autolink-literal@2.0.1: + resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==} + + mdast-util-gfm-footnote@2.1.0: + resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==} + + mdast-util-gfm-strikethrough@2.0.0: + resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==} + + mdast-util-gfm-table@2.0.0: + resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==} + + mdast-util-gfm-task-list-item@2.0.0: + resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==} + + mdast-util-gfm@3.1.0: + resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==} + + mdast-util-mdx-expression@2.0.1: + resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==} + + mdast-util-mdx-jsx@3.2.0: + resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==} + + mdast-util-mdx@3.0.0: + resolution: {integrity: sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==} + + mdast-util-mdxjs-esm@2.0.1: + resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==} + + mdast-util-phrasing@4.1.0: + resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==} + + mdast-util-to-hast@13.2.0: + resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==} + + mdast-util-to-markdown@2.1.2: + resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==} + + mdast-util-to-string@4.0.0: + resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==} + + mdn-data@2.12.2: + resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==} + + mermaid@11.10.1: + resolution: {integrity: sha512-0PdeADVWURz7VMAX0+MiMcgfxFKY4aweSGsjgFihe3XlMKNqmai/cugMrqTd3WNHM93V+K+AZL6Wu6tB5HmxRw==} + + micromark-core-commonmark@2.0.3: + resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==} + + micromark-extension-directive@3.0.2: + resolution: {integrity: sha512-wjcXHgk+PPdmvR58Le9d7zQYWy+vKEU9Se44p2CrCDPiLr2FMyiT4Fyb5UFKFC66wGB3kPlgD7q3TnoqPS7SZA==} + + micromark-extension-gfm-autolink-literal@2.1.0: + resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==} + + micromark-extension-gfm-footnote@2.1.0: + resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==} + + micromark-extension-gfm-strikethrough@2.1.0: + resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==} + + micromark-extension-gfm-table@2.1.1: + resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==} + + micromark-extension-gfm-tagfilter@2.0.0: + resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==} + + micromark-extension-gfm-task-list-item@2.1.0: + resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==} + + micromark-extension-gfm@3.0.0: + resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==} + + micromark-extension-mdx-expression@3.0.1: + resolution: {integrity: sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q==} + + micromark-extension-mdx-jsx@3.0.2: + resolution: {integrity: sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ==} + + micromark-extension-mdx-md@2.0.0: + resolution: {integrity: sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==} + + micromark-extension-mdxjs-esm@3.0.0: + resolution: {integrity: sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==} + + micromark-extension-mdxjs@3.0.0: + resolution: {integrity: sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==} + + micromark-factory-destination@2.0.1: + resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==} + + micromark-factory-label@2.0.1: + resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==} + + micromark-factory-mdx-expression@2.0.3: + resolution: {integrity: sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ==} + + micromark-factory-space@2.0.1: + resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==} + + micromark-factory-title@2.0.1: + resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==} + + micromark-factory-whitespace@2.0.1: + resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==} + + micromark-heading-id@2.0.0: + resolution: {integrity: sha512-TdR5WCmwuCroK8QrfX0/4w9bjj3ayN0GzatxGV/lWQKmM75kNKVZEmdvKZS4MOskARxWXu1WHdIJjMSVMBegow==} + + micromark-util-character@2.1.1: + resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==} + + micromark-util-chunked@2.0.1: + resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==} + + micromark-util-classify-character@2.0.1: + resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==} + + micromark-util-combine-extensions@2.0.1: + resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==} + + micromark-util-decode-numeric-character-reference@2.0.2: + resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==} + + micromark-util-decode-string@2.0.1: + resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==} + + micromark-util-encode@2.0.1: + resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==} + + micromark-util-events-to-acorn@2.0.3: + resolution: {integrity: sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg==} + + micromark-util-html-tag-name@2.0.1: + resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==} + + micromark-util-normalize-identifier@2.0.1: + resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==} + + micromark-util-resolve-all@2.0.1: + resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==} + + micromark-util-sanitize-uri@2.0.1: + resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==} + + micromark-util-subtokenize@2.1.0: + resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==} + + micromark-util-symbol@2.0.1: + resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==} + + micromark-util-types@2.0.2: + resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==} + + micromark@4.0.2: + resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==} + + mlly@1.8.0: + resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==} + + mrmime@2.0.1: + resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==} + engines: {node: '>=10'} + + ms@2.1.3: + resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} + + nanoid@3.3.11: + resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==} + engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} + hasBin: true + + neotraverse@0.6.18: + resolution: {integrity: sha512-Z4SmBUweYa09+o6pG+eASabEpP6QkQ70yHj351pQoEXIs8uHbaU2DWVmzBANKgflPa47A50PtB2+NgRpQvr7vA==} + engines: {node: '>= 10'} + + nlcst-to-string@4.0.0: + resolution: {integrity: sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA==} + + node-fetch-native@1.6.7: + resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==} + + node-fetch@2.7.0: + resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==} + engines: {node: 4.x || >=6.0.0} + peerDependencies: + encoding: ^0.1.0 + peerDependenciesMeta: + encoding: + optional: true + + node-mock-http@1.0.3: + resolution: {integrity: sha512-jN8dK25fsfnMrVsEhluUTPkBFY+6ybu7jSB1n+ri/vOGjJxU8J9CZhpSGkHXSkFjtUhbmoncG/YG9ta5Ludqog==} + + normalize-path@3.0.0: + resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} + engines: {node: '>=0.10.0'} + + nth-check@2.1.1: + resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} + + ofetch@1.4.1: + resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==} + + ohash@2.0.11: + resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==} + + oniguruma-parser@0.12.1: + resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==} + + oniguruma-to-es@4.3.3: + resolution: {integrity: sha512-rPiZhzC3wXwE59YQMRDodUwwT9FZ9nNBwQQfsd1wfdtlKEyCdRV0avrTcSZ5xlIvGRVPd/cx6ZN45ECmS39xvg==} + + p-limit@6.2.0: + resolution: {integrity: sha512-kuUqqHNUqoIWp/c467RI4X6mmyuojY5jGutNU0wVTmEOOfcuwLqyMVoAi9MKi2Ak+5i9+nhmrK4ufZE8069kHA==} + engines: {node: '>=18'} + + p-queue@8.1.1: + resolution: {integrity: sha512-aNZ+VfjobsWryoiPnEApGGmf5WmNsCo9xu8dfaYamG5qaLP7ClhLN6NgsFe6SwJ2UbLEBK5dv9x8Mn5+RVhMWQ==} + engines: {node: '>=18'} + + p-timeout@6.1.4: + resolution: {integrity: sha512-MyIV3ZA/PmyBN/ud8vV9XzwTrNtR4jFrObymZYnZqMmW0zA8Z17vnT0rBgFE/TlohB+YCHqXMgZzb3Csp49vqg==} + engines: {node: '>=14.16'} + + package-manager-detector@1.3.0: + resolution: {integrity: sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==} + + pagefind@1.3.0: + resolution: {integrity: sha512-8KPLGT5g9s+olKMRTU9LFekLizkVIu9tes90O1/aigJ0T5LmyPqTzGJrETnSw3meSYg58YH7JTzhTTW/3z6VAw==} + hasBin: true + + pako@0.2.9: + resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==} + + parse-entities@4.0.2: + resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==} + + parse-latin@7.0.0: + resolution: {integrity: sha512-mhHgobPPua5kZ98EF4HWiH167JWBfl4pvAIXXdbaVohtK7a6YBOy56kvhCqduqyo/f3yrHFWmqmiMg/BkBkYYQ==} + + parse5@7.3.0: + resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==} + + path-data-parser@0.1.0: + resolution: {integrity: sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==} + + pathe@2.0.3: + resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==} + + picocolors@1.1.1: + resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} + + picomatch@2.3.1: + resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} + engines: {node: '>=8.6'} + + picomatch@4.0.3: + resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==} + engines: {node: '>=12'} + + pkg-types@1.3.1: + resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==} + + pkg-types@2.3.0: + resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==} + + points-on-curve@0.2.0: + resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==} + + points-on-path@0.2.1: + resolution: {integrity: sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==} + + postcss-nested@6.2.0: + resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==} + engines: {node: '>=12.0'} + peerDependencies: + postcss: ^8.2.14 + + postcss-selector-parser@6.1.2: + resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==} + engines: {node: '>=4'} + + postcss@8.5.6: + resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==} + engines: {node: ^10 || ^12 || >=14} + + prismjs@1.30.0: + resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==} + engines: {node: '>=6'} + + prompts@2.4.2: + resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==} + engines: {node: '>= 6'} + + property-information@6.5.0: + resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==} + + property-information@7.1.0: + resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==} + + quansync@0.2.11: + resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==} + + radix3@1.1.2: + resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==} + + readdirp@4.1.2: + resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==} + engines: {node: '>= 14.18.0'} + + recma-build-jsx@1.0.0: + resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==} + + recma-jsx@1.0.1: + resolution: {integrity: sha512-huSIy7VU2Z5OLv6oFLosQGGDqPqdO1iq6bWNAdhzMxSJP7RAso4fCZ1cKu8j9YHCZf3TPrq4dw3okhrylgcd7w==} + peerDependencies: + acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 + + recma-parse@1.0.0: + resolution: {integrity: sha512-OYLsIGBB5Y5wjnSnQW6t3Xg7q3fQ7FWbw/vcXtORTnyaSFscOtABg+7Pnz6YZ6c27fG1/aN8CjfwoUEUIdwqWQ==} + + recma-stringify@1.0.0: + resolution: {integrity: sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==} + + regex-recursion@6.0.2: + resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==} + + regex-utilities@2.3.0: + resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==} + + regex@6.0.1: + resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==} + + rehype-expressive-code@0.41.3: + resolution: {integrity: sha512-8d9Py4c/V6I/Od2VIXFAdpiO2kc0SV2qTJsRAaqSIcM9aruW4ASLNe2kOEo1inXAAkIhpFzAHTc358HKbvpNUg==} + + rehype-format@5.0.1: + resolution: {integrity: sha512-zvmVru9uB0josBVpr946OR8ui7nJEdzZobwLOOqHb/OOD88W0Vk2SqLwoVOj0fM6IPCCO6TaV9CvQvJMWwukFQ==} + + rehype-parse@9.0.1: + resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==} + + rehype-raw@7.0.0: + resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==} + + rehype-recma@1.0.0: + resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==} + + rehype-stringify@10.0.1: + resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==} + + rehype@13.0.2: + resolution: {integrity: sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A==} + + remark-custom-heading-id@2.0.0: + resolution: {integrity: sha512-LpR+c4pmuBGG/zhNbebecDnpKyXU4B7bdNu6tXW83T3QWlkwUpHYyUR8uXQ/BERK9HlI5pXGLu7DjkIS07/iVQ==} + + remark-directive@3.0.1: + resolution: {integrity: sha512-gwglrEQEZcZYgVyG1tQuA+h58EZfq5CSULw7J90AFuCTyib1thgHPoqQ+h9iFvU6R+vnZ5oNFQR5QKgGpk741A==} + + remark-gfm@4.0.1: + resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==} + + remark-mdx@3.1.0: + resolution: {integrity: sha512-Ngl/H3YXyBV9RcRNdlYsZujAmhsxwzxpDzpDEhFBVAGthS4GDgnctpDjgFl/ULx5UEDzqtW1cyBSNKqYYrqLBA==} + + remark-parse@11.0.0: + resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==} + + remark-rehype@11.1.2: + resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==} + + remark-smartypants@3.0.2: + resolution: {integrity: sha512-ILTWeOriIluwEvPjv67v7Blgrcx+LZOkAUVtKI3putuhlZm84FnqDORNXPPm+HY3NdZOMhyDwZ1E+eZB/Df5dA==} + engines: {node: '>=16.0.0'} + + remark-stringify@11.0.0: + resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==} + + restructure@3.0.2: + resolution: {integrity: sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==} + + retext-latin@4.0.0: + resolution: {integrity: sha512-hv9woG7Fy0M9IlRQloq/N6atV82NxLGveq+3H2WOi79dtIYWN8OaxogDm77f8YnVXJL2VD3bbqowu5E3EMhBYA==} + + retext-smartypants@6.2.0: + resolution: {integrity: sha512-kk0jOU7+zGv//kfjXEBjdIryL1Acl4i9XNkHxtM7Tm5lFiCog576fjNC9hjoR7LTKQ0DsPWy09JummSsH1uqfQ==} + + retext-stringify@4.0.0: + resolution: {integrity: sha512-rtfN/0o8kL1e+78+uxPTqu1Klt0yPzKuQ2BfWwwfgIUSayyzxpM1PJzkKt4V8803uB9qSy32MvI7Xep9khTpiA==} + + retext@9.0.0: + resolution: {integrity: sha512-sbMDcpHCNjvlheSgMfEcVrZko3cDzdbe1x/e7G66dFp0Ff7Mldvi2uv6JkJQzdRcvLYE8CA8Oe8siQx8ZOgTcA==} + + robust-predicates@3.0.2: + resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==} + + rollup@4.50.1: + resolution: {integrity: sha512-78E9voJHwnXQMiQdiqswVLZwJIzdBKJ1GdI5Zx6XwoFKUIk09/sSrr+05QFzvYb8q6Y9pPV45zzDuYa3907TZA==} + engines: {node: '>=18.0.0', npm: '>=8.0.0'} + hasBin: true + + roughjs@4.6.6: + resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==} + + rw@1.3.3: + resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==} + + safer-buffer@2.1.2: + resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} + + sax@1.4.1: + resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==} + + semver@7.7.2: + resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==} + engines: {node: '>=10'} + hasBin: true + + sharp@0.33.5: + resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + + sharp@0.34.3: + resolution: {integrity: sha512-eX2IQ6nFohW4DbvHIOLRB3MHFpYqaqvXd3Tp5e/T/dSH83fxaNJQRvDMhASmkNTsNTVF2/OOopzRCt7xokgPfg==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} + + shiki@3.12.2: + resolution: {integrity: sha512-uIrKI+f9IPz1zDT+GMz+0RjzKJiijVr6WDWm9Pe3NNY6QigKCfifCEv9v9R2mDASKKjzjQ2QpFLcxaR3iHSnMA==} + + simple-swizzle@0.2.2: + resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==} + + sisteransi@1.0.5: + resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==} + + sitemap@8.0.0: + resolution: {integrity: sha512-+AbdxhM9kJsHtruUF39bwS/B0Fytw6Fr1o4ZAIAEqA6cke2xcoO2GleBw9Zw7nRzILVEgz7zBM5GiTJjie1G9A==} + engines: {node: '>=14.0.0', npm: '>=6.0.0'} + deprecated: 'SECURITY: Multiple vulnerabilities fixed in 8.0.1 (XML injection, path traversal, command injection, protocol injection). Upgrade immediately: npm install sitemap@8.0.1' + hasBin: true + + smartypants@0.2.2: + resolution: {integrity: sha512-TzobUYoEft/xBtb2voRPryAUIvYguG0V7Tt3de79I1WfXgCwelqVsGuZSnu3GFGRZhXR90AeEYIM+icuB/S06Q==} + hasBin: true + + smol-toml@1.4.2: + resolution: {integrity: sha512-rInDH6lCNiEyn3+hH8KVGFdbjc099j47+OSgbMrfDYX1CmXLfdKd7qi6IfcWj2wFxvSVkuI46M+wPGYfEOEj6g==} + engines: {node: '>= 18'} + + source-map-js@1.2.1: + resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} + engines: {node: '>=0.10.0'} + + source-map@0.7.6: + resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==} + engines: {node: '>= 12'} + + space-separated-tokens@2.0.2: + resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==} + + starlight-auto-sidebar@0.2.0: + resolution: {integrity: sha512-iHPAhwnkdkFM84QajJvjKo0twNLg9fU+HrVCxs0QgWAQdYLK9bhM1SxyVPV3O+YBo111mBHryzDA1ChHWUxD1w==} + engines: {node: '>=22.12.0'} + peerDependencies: + '@astrojs/starlight': '>=0.38.0' + + starlight-github-alerts@0.1.0: + resolution: {integrity: sha512-mz+btaGen5ByF1BRCMHnqkzSGXsHfvXfiPGGB9BgeczKUvbDR1PAciLYam0gN0JbZYwZSzmhJzgvcHG6gt4f/Q==} + engines: {node: '>=18.17.1'} + peerDependencies: + '@astrojs/starlight': '>=0.35.0' + + starlight-image-zoom@0.13.0: + resolution: {integrity: sha512-7K/7gshnKooYd4ePy5vtyv1jFoFVNUb8IoXWDcnY69+nxvmLATNrmOzD2M4TJ/aKynPSBSM6j9ia4s/PPy/JGA==} + engines: {node: '>=18'} + peerDependencies: + '@astrojs/starlight': '>=0.32.0' + + starlight-links-validator@0.18.0: + resolution: {integrity: sha512-R0gLdrKWdpAEqux3DL2B3QvNJM8Zpys8CQu1BGLD9hc+66nt/Q6aJDkvvkvoCVky9JKmBEnmL4PhFkyz13lK5g==} + engines: {node: '>=18.17.1'} + peerDependencies: + '@astrojs/starlight': '>=0.32.0' + + stream-replace-string@2.0.0: + resolution: {integrity: sha512-TlnjJ1C0QrmxRNrON00JvaFFlNh5TTG00APw23j74ET7gkQpTASi6/L2fuiav8pzK715HXtUeClpBTw2NPSn6w==} + + string-width@4.2.3: + resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==} + engines: {node: '>=8'} + + string-width@7.2.0: + resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==} + engines: {node: '>=18'} + + stringify-entities@4.0.4: + resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==} + + strip-ansi@6.0.1: + resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==} + engines: {node: '>=8'} + + strip-ansi@7.1.2: + resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==} + engines: {node: '>=12'} + + style-to-js@1.1.17: + resolution: {integrity: sha512-xQcBGDxJb6jjFCTzvQtfiPn6YvvP2O8U1MDIPNfJQlWMYfktPy+iGsHE7cssjs7y84d9fQaK4UF3RIJaAHSoYA==} + + style-to-object@1.0.9: + resolution: {integrity: sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==} + + stylis@4.3.6: + resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==} + + supports-color@10.2.2: + resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==} + engines: {node: '>=18'} + + supports-hyperlinks@4.2.0: + resolution: {integrity: sha512-FWXryrXrsYX2vlTD9WdfgOeN7a2EbuS3MiMaDkFibR0B6IxelCNbFgUJEGLn3eSn+9HX7RuM0ig6Lzr8lccxUA==} + engines: {node: '>=20'} + + terminal-link@5.0.0: + resolution: {integrity: sha512-qFAy10MTMwjzjU8U16YS4YoZD+NQLHzLssFMNqgravjbvIPNiqkGFR4yjhJfmY9R5OFU7+yHxc6y+uGHkKwLRA==} + engines: {node: '>=20'} + + tiny-inflate@1.0.3: + resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==} + + tinyexec@0.3.2: + resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==} + + tinyexec@1.0.1: + resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==} + + tinyglobby@0.2.15: + resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==} + engines: {node: '>=12.0.0'} + + tr46@0.0.3: + resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==} + + trim-lines@3.0.1: + resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==} + + trough@2.2.0: + resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==} + + ts-dedent@2.2.0: + resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==} + engines: {node: '>=6.10'} + + tsconfck@3.1.6: + resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==} + engines: {node: ^18 || >=20} + hasBin: true + peerDependencies: + typescript: ^5.0.0 + peerDependenciesMeta: + typescript: + optional: true + + tslib@2.8.1: + resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==} + + type-fest@4.41.0: + resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==} + engines: {node: '>=16'} + + typescript@5.9.2: + resolution: {integrity: sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==} + engines: {node: '>=14.17'} + hasBin: true + + ufo@1.6.1: + resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==} + + ultrahtml@1.6.0: + resolution: {integrity: sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw==} + + uncrypto@0.1.3: + resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==} + + undici-types@7.10.0: + resolution: {integrity: sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag==} + + unicode-properties@1.4.1: + resolution: {integrity: sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==} + + unicode-trie@2.0.0: + resolution: {integrity: sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==} + + unified@11.0.5: + resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==} + + unifont@0.5.2: + resolution: {integrity: sha512-LzR4WUqzH9ILFvjLAUU7dK3Lnou/qd5kD+IakBtBK4S15/+x2y9VX+DcWQv6s551R6W+vzwgVS6tFg3XggGBgg==} + + unist-util-find-after@5.0.0: + resolution: {integrity: sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==} + + unist-util-is@6.0.0: + resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==} + + unist-util-modify-children@4.0.0: + resolution: {integrity: sha512-+tdN5fGNddvsQdIzUF3Xx82CU9sMM+fA0dLgR9vOmT0oPT2jH+P1nd5lSqfCfXAw+93NhcXNY2qqvTUtE4cQkw==} + + unist-util-position-from-estree@2.0.0: + resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==} + + unist-util-position@5.0.0: + resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==} + + unist-util-remove-position@5.0.0: + resolution: {integrity: sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==} + + unist-util-stringify-position@4.0.0: + resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==} + + unist-util-visit-children@3.0.0: + resolution: {integrity: sha512-RgmdTfSBOg04sdPcpTSD1jzoNBjt9a80/ZCzp5cI9n1qPzLZWF9YdvWGN2zmTumP1HWhXKdUWexjy/Wy/lJ7tA==} + + unist-util-visit-parents@6.0.1: + resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==} + + unist-util-visit@5.0.0: + resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==} + + unstorage@1.17.1: + resolution: {integrity: sha512-KKGwRTT0iVBCErKemkJCLs7JdxNVfqTPc/85ae1XES0+bsHbc/sFBfVi5kJp156cc51BHinIH2l3k0EZ24vOBQ==} + peerDependencies: + '@azure/app-configuration': ^1.8.0 + '@azure/cosmos': ^4.2.0 + '@azure/data-tables': ^13.3.0 + '@azure/identity': ^4.6.0 + '@azure/keyvault-secrets': ^4.9.0 + '@azure/storage-blob': ^12.26.0 + '@capacitor/preferences': ^6.0.3 || ^7.0.0 + '@deno/kv': '>=0.9.0' + '@netlify/blobs': ^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0 + '@planetscale/database': ^1.19.0 + '@upstash/redis': ^1.34.3 + '@vercel/blob': '>=0.27.1' + '@vercel/functions': ^2.2.12 || ^3.0.0 + '@vercel/kv': ^1.0.1 + aws4fetch: ^1.0.20 + db0: '>=0.2.1' + idb-keyval: ^6.2.1 + ioredis: ^5.4.2 + uploadthing: ^7.4.4 + peerDependenciesMeta: + '@azure/app-configuration': + optional: true + '@azure/cosmos': + optional: true + '@azure/data-tables': + optional: true + '@azure/identity': + optional: true + '@azure/keyvault-secrets': + optional: true + '@azure/storage-blob': + optional: true + '@capacitor/preferences': + optional: true + '@deno/kv': + optional: true + '@netlify/blobs': + optional: true + '@planetscale/database': + optional: true + '@upstash/redis': + optional: true + '@vercel/blob': + optional: true + '@vercel/functions': + optional: true + '@vercel/kv': + optional: true + aws4fetch: + optional: true + db0: + optional: true + idb-keyval: + optional: true + ioredis: + optional: true + uploadthing: + optional: true + + util-deprecate@1.0.2: + resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} + + uuid@11.1.0: + resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==} + hasBin: true + + vfile-location@5.0.3: + resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==} + + vfile-message@4.0.3: + resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==} + + vfile@6.0.3: + resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==} + + vite@6.3.6: + resolution: {integrity: sha512-0msEVHJEScQbhkbVTb/4iHZdJ6SXp/AvxL2sjwYQFfBqleHtnCqv1J3sa9zbWz/6kW1m9Tfzn92vW+kZ1WV6QA==} + engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} + hasBin: true + peerDependencies: + '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0 + jiti: '>=1.21.0' + less: '*' + lightningcss: ^1.21.0 + sass: '*' + sass-embedded: '*' + stylus: '*' + sugarss: '*' + terser: ^5.16.0 + tsx: ^4.8.1 + yaml: ^2.4.2 + peerDependenciesMeta: + '@types/node': + optional: true + jiti: + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + sass-embedded: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + tsx: + optional: true + yaml: + optional: true + + vitefu@1.1.1: + resolution: {integrity: sha512-B/Fegf3i8zh0yFbpzZ21amWzHmuNlLlmJT6n7bu5e+pCHUKQIfXSYokrqOBGEMMe9UG2sostKQF9mml/vYaWJQ==} + peerDependencies: + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0 + peerDependenciesMeta: + vite: + optional: true + + vscode-jsonrpc@8.2.0: + resolution: {integrity: sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==} + engines: {node: '>=14.0.0'} + + vscode-languageserver-protocol@3.17.5: + resolution: {integrity: sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==} + + vscode-languageserver-textdocument@1.0.12: + resolution: {integrity: sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==} + + vscode-languageserver-types@3.17.5: + resolution: {integrity: sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==} + + vscode-languageserver@9.0.1: + resolution: {integrity: sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==} + hasBin: true + + vscode-uri@3.0.8: + resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==} + + web-namespaces@2.0.1: + resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==} + + webidl-conversions@3.0.1: + resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==} + + whatwg-url@5.0.0: + resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==} + + which-pm-runs@1.1.0: + resolution: {integrity: sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA==} + engines: {node: '>=4'} + + widest-line@5.0.0: + resolution: {integrity: sha512-c9bZp7b5YtRj2wOe6dlj32MK+Bx/M/d+9VB2SHM1OtsUHR0aV0tdP6DWh/iMt0kWi1t5g1Iudu6hQRNd1A4PVA==} + engines: {node: '>=18'} + + wrap-ansi@9.0.2: + resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==} + engines: {node: '>=18'} + + xxhash-wasm@1.1.0: + resolution: {integrity: sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA==} + + yaml@2.8.1: + resolution: {integrity: sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==} + engines: {node: '>= 14.6'} + hasBin: true + + yargs-parser@21.1.1: + resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==} + engines: {node: '>=12'} + + yocto-queue@1.2.1: + resolution: {integrity: sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==} + engines: {node: '>=12.20'} + + yocto-spinner@0.2.3: + resolution: {integrity: sha512-sqBChb33loEnkoXte1bLg45bEBsOP9N1kzQh5JZNKj/0rik4zAPTNSAVPj3uQAdc6slYJ0Ksc403G2XgxsJQFQ==} + engines: {node: '>=18.19'} + + yoctocolors@2.1.2: + resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==} + engines: {node: '>=18'} + + zod-to-json-schema@3.24.6: + resolution: {integrity: sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg==} + peerDependencies: + zod: ^3.24.1 + + zod-to-ts@1.2.0: + resolution: {integrity: sha512-x30XE43V+InwGpvTySRNz9kB7qFU8DlyEy7BsSTCHPH1R0QasMmHWZDCzYm6bVXtj/9NNJAZF3jW8rzFvH5OFA==} + peerDependencies: + typescript: ^4.9.4 || ^5.0.2 + zod: ^3 + + zod@3.25.76: + resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==} + + zwitch@2.0.4: + resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} + +snapshots: + + '@antfu/install-pkg@1.1.0': + dependencies: + package-manager-detector: 1.3.0 + tinyexec: 1.0.1 + + '@antfu/utils@8.1.1': {} + + '@astrojs/compiler@2.12.2': {} + + '@astrojs/internal-helpers@0.7.2': {} + + '@astrojs/markdown-remark@6.3.6': + dependencies: + '@astrojs/internal-helpers': 0.7.2 + '@astrojs/prism': 3.3.0 + github-slugger: 2.0.0 + hast-util-from-html: 2.0.3 + hast-util-to-text: 4.0.2 + import-meta-resolve: 4.2.0 + js-yaml: 4.1.0 + mdast-util-definitions: 6.0.0 + rehype-raw: 7.0.0 + rehype-stringify: 10.0.1 + remark-gfm: 4.0.1 + remark-parse: 11.0.0 + remark-rehype: 11.1.2 + remark-smartypants: 3.0.2 + shiki: 3.12.2 + smol-toml: 1.4.2 + unified: 11.0.5 + unist-util-remove-position: 5.0.0 + unist-util-visit: 5.0.0 + unist-util-visit-parents: 6.0.1 + vfile: 6.0.3 + transitivePeerDependencies: + - supports-color + + '@astrojs/mdx@4.3.4(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))': + dependencies: + '@astrojs/markdown-remark': 6.3.6 + '@mdx-js/mdx': 3.1.0(acorn@8.15.0) + acorn: 8.15.0 + astro: 5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1) + es-module-lexer: 1.7.0 + estree-util-visit: 2.0.0 + hast-util-to-html: 9.0.5 + kleur: 4.1.5 + rehype-raw: 7.0.0 + remark-gfm: 4.0.1 + remark-smartypants: 3.0.2 + source-map: 0.7.6 + unist-util-visit: 5.0.0 + vfile: 6.0.3 + transitivePeerDependencies: + - supports-color + + '@astrojs/prism@3.3.0': + dependencies: + prismjs: 1.30.0 + + '@astrojs/sitemap@3.5.1': + dependencies: + sitemap: 8.0.0 + stream-replace-string: 2.0.0 + zod: 3.25.76 + + '@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))': + dependencies: + '@astrojs/markdown-remark': 6.3.6 + '@astrojs/mdx': 4.3.4(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) + '@astrojs/sitemap': 3.5.1 + '@pagefind/default-ui': 1.3.0 + '@types/hast': 3.0.4 + '@types/js-yaml': 4.0.9 + '@types/mdast': 4.0.4 + astro: 5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1) + astro-expressive-code: 0.41.3(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) + bcp-47: 2.1.0 + hast-util-from-html: 2.0.3 + hast-util-select: 6.0.4 + hast-util-to-string: 3.0.1 + hastscript: 9.0.1 + i18next: 23.16.8 + js-yaml: 4.1.0 + klona: 2.0.6 + mdast-util-directive: 3.1.0 + mdast-util-to-markdown: 2.1.2 + mdast-util-to-string: 4.0.0 + pagefind: 1.3.0 + rehype: 13.0.2 + rehype-format: 5.0.1 + remark-directive: 3.0.1 + ultrahtml: 1.6.0 + unified: 11.0.5 + unist-util-visit: 5.0.0 + vfile: 6.0.3 + transitivePeerDependencies: + - supports-color + + '@astrojs/telemetry@3.3.0': + dependencies: + ci-info: 4.3.0 + debug: 4.4.1 + dlv: 1.1.3 + dset: 3.1.4 + is-docker: 3.0.0 + is-wsl: 3.1.0 + which-pm-runs: 1.1.0 + transitivePeerDependencies: + - supports-color + + '@babel/helper-string-parser@7.27.1': {} + + '@babel/helper-validator-identifier@7.27.1': {} + + '@babel/parser@7.28.4': + dependencies: + '@babel/types': 7.28.4 + + '@babel/runtime@7.28.3': {} + + '@babel/types@7.28.4': + dependencies: + '@babel/helper-string-parser': 7.27.1 + '@babel/helper-validator-identifier': 7.27.1 + + '@braintree/sanitize-url@7.1.1': {} + + '@capsizecss/unpack@2.4.0': + dependencies: + blob-to-buffer: 1.2.9 + cross-fetch: 3.2.0 + fontkit: 2.0.4 + transitivePeerDependencies: + - encoding + + '@catppuccin/starlight@1.1.1(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)))(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))': + dependencies: + '@astrojs/starlight': 0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) + astro: 5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1) + + '@chevrotain/cst-dts-gen@11.0.3': + dependencies: + '@chevrotain/gast': 11.0.3 + '@chevrotain/types': 11.0.3 + lodash-es: 4.17.21 + + '@chevrotain/gast@11.0.3': + dependencies: + '@chevrotain/types': 11.0.3 + lodash-es: 4.17.21 + + '@chevrotain/regexp-to-ast@11.0.3': {} + + '@chevrotain/types@11.0.3': {} + + '@chevrotain/utils@11.0.3': {} + + '@ctrl/tinycolor@4.1.0': {} + + '@emnapi/runtime@1.5.0': + dependencies: + tslib: 2.8.1 + optional: true + + '@esbuild/aix-ppc64@0.25.9': + optional: true + + '@esbuild/android-arm64@0.25.9': + optional: true + + '@esbuild/android-arm@0.25.9': + optional: true + + '@esbuild/android-x64@0.25.9': + optional: true + + '@esbuild/darwin-arm64@0.25.9': + optional: true + + '@esbuild/darwin-x64@0.25.9': + optional: true + + '@esbuild/freebsd-arm64@0.25.9': + optional: true + + '@esbuild/freebsd-x64@0.25.9': + optional: true + + '@esbuild/linux-arm64@0.25.9': + optional: true + + '@esbuild/linux-arm@0.25.9': + optional: true + + '@esbuild/linux-ia32@0.25.9': + optional: true + + '@esbuild/linux-loong64@0.25.9': + optional: true + + '@esbuild/linux-mips64el@0.25.9': + optional: true + + '@esbuild/linux-ppc64@0.25.9': + optional: true + + '@esbuild/linux-riscv64@0.25.9': + optional: true + + '@esbuild/linux-s390x@0.25.9': + optional: true + + '@esbuild/linux-x64@0.25.9': + optional: true + + '@esbuild/netbsd-arm64@0.25.9': + optional: true + + '@esbuild/netbsd-x64@0.25.9': + optional: true + + '@esbuild/openbsd-arm64@0.25.9': + optional: true + + '@esbuild/openbsd-x64@0.25.9': + optional: true + + '@esbuild/openharmony-arm64@0.25.9': + optional: true + + '@esbuild/sunos-x64@0.25.9': + optional: true + + '@esbuild/win32-arm64@0.25.9': + optional: true + + '@esbuild/win32-ia32@0.25.9': + optional: true + + '@esbuild/win32-x64@0.25.9': + optional: true + + '@expressive-code/core@0.41.3': + dependencies: + '@ctrl/tinycolor': 4.1.0 + hast-util-select: 6.0.4 + hast-util-to-html: 9.0.5 + hast-util-to-text: 4.0.2 + hastscript: 9.0.1 + postcss: 8.5.6 + postcss-nested: 6.2.0(postcss@8.5.6) + unist-util-visit: 5.0.0 + unist-util-visit-parents: 6.0.1 + + '@expressive-code/plugin-frames@0.41.3': + dependencies: + '@expressive-code/core': 0.41.3 + + '@expressive-code/plugin-shiki@0.41.3': + dependencies: + '@expressive-code/core': 0.41.3 + shiki: 3.12.2 + + '@expressive-code/plugin-text-markers@0.41.3': + dependencies: + '@expressive-code/core': 0.41.3 + + '@iconify/types@2.0.0': {} + + '@iconify/utils@2.3.0': + dependencies: + '@antfu/install-pkg': 1.1.0 + '@antfu/utils': 8.1.1 + '@iconify/types': 2.0.0 + debug: 4.4.1 + globals: 15.15.0 + kolorist: 1.8.0 + local-pkg: 1.1.2 + mlly: 1.8.0 + transitivePeerDependencies: + - supports-color + + '@img/sharp-darwin-arm64@0.33.5': + optionalDependencies: + '@img/sharp-libvips-darwin-arm64': 1.0.4 + optional: true + + '@img/sharp-darwin-arm64@0.34.3': + optionalDependencies: + '@img/sharp-libvips-darwin-arm64': 1.2.0 + optional: true + + '@img/sharp-darwin-x64@0.33.5': + optionalDependencies: + '@img/sharp-libvips-darwin-x64': 1.0.4 + optional: true + + '@img/sharp-darwin-x64@0.34.3': + optionalDependencies: + '@img/sharp-libvips-darwin-x64': 1.2.0 + optional: true + + '@img/sharp-libvips-darwin-arm64@1.0.4': + optional: true + + '@img/sharp-libvips-darwin-arm64@1.2.0': + optional: true + + '@img/sharp-libvips-darwin-x64@1.0.4': + optional: true + + '@img/sharp-libvips-darwin-x64@1.2.0': + optional: true + + '@img/sharp-libvips-linux-arm64@1.0.4': + optional: true + + '@img/sharp-libvips-linux-arm64@1.2.0': + optional: true + + '@img/sharp-libvips-linux-arm@1.0.5': + optional: true + + '@img/sharp-libvips-linux-arm@1.2.0': + optional: true + + '@img/sharp-libvips-linux-ppc64@1.2.0': + optional: true + + '@img/sharp-libvips-linux-s390x@1.0.4': + optional: true + + '@img/sharp-libvips-linux-s390x@1.2.0': + optional: true + + '@img/sharp-libvips-linux-x64@1.0.4': + optional: true + + '@img/sharp-libvips-linux-x64@1.2.0': + optional: true + + '@img/sharp-libvips-linuxmusl-arm64@1.0.4': + optional: true + + '@img/sharp-libvips-linuxmusl-arm64@1.2.0': + optional: true + + '@img/sharp-libvips-linuxmusl-x64@1.0.4': + optional: true + + '@img/sharp-libvips-linuxmusl-x64@1.2.0': + optional: true + + '@img/sharp-linux-arm64@0.33.5': + optionalDependencies: + '@img/sharp-libvips-linux-arm64': 1.0.4 + optional: true + + '@img/sharp-linux-arm64@0.34.3': + optionalDependencies: + '@img/sharp-libvips-linux-arm64': 1.2.0 + optional: true + + '@img/sharp-linux-arm@0.33.5': + optionalDependencies: + '@img/sharp-libvips-linux-arm': 1.0.5 + optional: true + + '@img/sharp-linux-arm@0.34.3': + optionalDependencies: + '@img/sharp-libvips-linux-arm': 1.2.0 + optional: true + + '@img/sharp-linux-ppc64@0.34.3': + optionalDependencies: + '@img/sharp-libvips-linux-ppc64': 1.2.0 + optional: true + + '@img/sharp-linux-s390x@0.33.5': + optionalDependencies: + '@img/sharp-libvips-linux-s390x': 1.0.4 + optional: true + + '@img/sharp-linux-s390x@0.34.3': + optionalDependencies: + '@img/sharp-libvips-linux-s390x': 1.2.0 + optional: true + + '@img/sharp-linux-x64@0.33.5': + optionalDependencies: + '@img/sharp-libvips-linux-x64': 1.0.4 + optional: true + + '@img/sharp-linux-x64@0.34.3': + optionalDependencies: + '@img/sharp-libvips-linux-x64': 1.2.0 + optional: true + + '@img/sharp-linuxmusl-arm64@0.33.5': + optionalDependencies: + '@img/sharp-libvips-linuxmusl-arm64': 1.0.4 + optional: true + + '@img/sharp-linuxmusl-arm64@0.34.3': + optionalDependencies: + '@img/sharp-libvips-linuxmusl-arm64': 1.2.0 + optional: true + + '@img/sharp-linuxmusl-x64@0.33.5': + optionalDependencies: + '@img/sharp-libvips-linuxmusl-x64': 1.0.4 + optional: true + + '@img/sharp-linuxmusl-x64@0.34.3': + optionalDependencies: + '@img/sharp-libvips-linuxmusl-x64': 1.2.0 + optional: true + + '@img/sharp-wasm32@0.33.5': + dependencies: + '@emnapi/runtime': 1.5.0 + optional: true + + '@img/sharp-wasm32@0.34.3': + dependencies: + '@emnapi/runtime': 1.5.0 + optional: true + + '@img/sharp-win32-arm64@0.34.3': + optional: true + + '@img/sharp-win32-ia32@0.33.5': + optional: true + + '@img/sharp-win32-ia32@0.34.3': + optional: true + + '@img/sharp-win32-x64@0.33.5': + optional: true + + '@img/sharp-win32-x64@0.34.3': + optional: true + + '@jridgewell/sourcemap-codec@1.5.5': {} + + '@mdx-js/mdx@3.1.0(acorn@8.15.0)': + dependencies: + '@types/estree': 1.0.8 + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + '@types/mdx': 2.0.13 + collapse-white-space: 2.1.0 + devlop: 1.1.0 + estree-util-is-identifier-name: 3.0.0 + estree-util-scope: 1.0.0 + estree-walker: 3.0.3 + hast-util-to-jsx-runtime: 2.3.6 + markdown-extensions: 2.0.0 + recma-build-jsx: 1.0.0 + recma-jsx: 1.0.1(acorn@8.15.0) + recma-stringify: 1.0.0 + rehype-recma: 1.0.0 + remark-mdx: 3.1.0 + remark-parse: 11.0.0 + remark-rehype: 11.1.2 + source-map: 0.7.6 + unified: 11.0.5 + unist-util-position-from-estree: 2.0.0 + unist-util-stringify-position: 4.0.0 + unist-util-visit: 5.0.0 + vfile: 6.0.3 + transitivePeerDependencies: + - acorn + - supports-color + + '@mermaid-js/parser@0.6.2': + dependencies: + langium: 3.3.1 + + '@oslojs/encoding@1.1.0': {} + + '@pagefind/darwin-arm64@1.3.0': + optional: true + + '@pagefind/darwin-x64@1.3.0': + optional: true + + '@pagefind/default-ui@1.3.0': {} + + '@pagefind/linux-arm64@1.3.0': + optional: true + + '@pagefind/linux-x64@1.3.0': + optional: true + + '@pagefind/windows-x64@1.3.0': + optional: true + + '@rollup/pluginutils@5.3.0(rollup@4.50.1)': + dependencies: + '@types/estree': 1.0.8 + estree-walker: 2.0.2 + picomatch: 4.0.3 + optionalDependencies: + rollup: 4.50.1 + + '@rollup/rollup-android-arm-eabi@4.50.1': + optional: true + + '@rollup/rollup-android-arm64@4.50.1': + optional: true + + '@rollup/rollup-darwin-arm64@4.50.1': + optional: true + + '@rollup/rollup-darwin-x64@4.50.1': + optional: true + + '@rollup/rollup-freebsd-arm64@4.50.1': + optional: true + + '@rollup/rollup-freebsd-x64@4.50.1': + optional: true + + '@rollup/rollup-linux-arm-gnueabihf@4.50.1': + optional: true + + '@rollup/rollup-linux-arm-musleabihf@4.50.1': + optional: true + + '@rollup/rollup-linux-arm64-gnu@4.50.1': + optional: true + + '@rollup/rollup-linux-arm64-musl@4.50.1': + optional: true + + '@rollup/rollup-linux-loongarch64-gnu@4.50.1': + optional: true + + '@rollup/rollup-linux-ppc64-gnu@4.50.1': + optional: true + + '@rollup/rollup-linux-riscv64-gnu@4.50.1': + optional: true + + '@rollup/rollup-linux-riscv64-musl@4.50.1': + optional: true + + '@rollup/rollup-linux-s390x-gnu@4.50.1': + optional: true + + '@rollup/rollup-linux-x64-gnu@4.50.1': + optional: true + + '@rollup/rollup-linux-x64-musl@4.50.1': + optional: true + + '@rollup/rollup-openharmony-arm64@4.50.1': + optional: true + + '@rollup/rollup-win32-arm64-msvc@4.50.1': + optional: true + + '@rollup/rollup-win32-ia32-msvc@4.50.1': + optional: true + + '@rollup/rollup-win32-x64-msvc@4.50.1': + optional: true + + '@shikijs/core@3.12.2': + dependencies: + '@shikijs/types': 3.12.2 + '@shikijs/vscode-textmate': 10.0.2 + '@types/hast': 3.0.4 + hast-util-to-html: 9.0.5 + + '@shikijs/engine-javascript@3.12.2': + dependencies: + '@shikijs/types': 3.12.2 + '@shikijs/vscode-textmate': 10.0.2 + oniguruma-to-es: 4.3.3 + + '@shikijs/engine-oniguruma@3.12.2': + dependencies: + '@shikijs/types': 3.12.2 + '@shikijs/vscode-textmate': 10.0.2 + + '@shikijs/langs@3.12.2': + dependencies: + '@shikijs/types': 3.12.2 + + '@shikijs/themes@3.12.2': + dependencies: + '@shikijs/types': 3.12.2 + + '@shikijs/types@3.12.2': + dependencies: + '@shikijs/vscode-textmate': 10.0.2 + '@types/hast': 3.0.4 + + '@shikijs/vscode-textmate@10.0.2': {} + + '@swc/helpers@0.5.17': + dependencies: + tslib: 2.8.1 + + '@types/d3-array@3.2.1': {} + + '@types/d3-axis@3.0.6': + dependencies: + '@types/d3-selection': 3.0.11 + + '@types/d3-brush@3.0.6': + dependencies: + '@types/d3-selection': 3.0.11 + + '@types/d3-chord@3.0.6': {} + + '@types/d3-color@3.1.3': {} + + '@types/d3-contour@3.0.6': + dependencies: + '@types/d3-array': 3.2.1 + '@types/geojson': 7946.0.16 + + '@types/d3-delaunay@6.0.4': {} + + '@types/d3-dispatch@3.0.7': {} + + '@types/d3-drag@3.0.7': + dependencies: + '@types/d3-selection': 3.0.11 + + '@types/d3-dsv@3.0.7': {} + + '@types/d3-ease@3.0.2': {} + + '@types/d3-fetch@3.0.7': + dependencies: + '@types/d3-dsv': 3.0.7 + + '@types/d3-force@3.0.10': {} + + '@types/d3-format@3.0.4': {} + + '@types/d3-geo@3.1.0': + dependencies: + '@types/geojson': 7946.0.16 + + '@types/d3-hierarchy@3.1.7': {} + + '@types/d3-interpolate@3.0.4': + dependencies: + '@types/d3-color': 3.1.3 + + '@types/d3-path@3.1.1': {} + + '@types/d3-polygon@3.0.2': {} + + '@types/d3-quadtree@3.0.6': {} + + '@types/d3-random@3.0.3': {} + + '@types/d3-scale-chromatic@3.1.0': {} + + '@types/d3-scale@4.0.9': + dependencies: + '@types/d3-time': 3.0.4 + + '@types/d3-selection@3.0.11': {} + + '@types/d3-shape@3.1.7': + dependencies: + '@types/d3-path': 3.1.1 + + '@types/d3-time-format@4.0.3': {} + + '@types/d3-time@3.0.4': {} + + '@types/d3-timer@3.0.2': {} + + '@types/d3-transition@3.0.9': + dependencies: + '@types/d3-selection': 3.0.11 + + '@types/d3-zoom@3.0.8': + dependencies: + '@types/d3-interpolate': 3.0.4 + '@types/d3-selection': 3.0.11 + + '@types/d3@7.4.3': + dependencies: + '@types/d3-array': 3.2.1 + '@types/d3-axis': 3.0.6 + '@types/d3-brush': 3.0.6 + '@types/d3-chord': 3.0.6 + '@types/d3-color': 3.1.3 + '@types/d3-contour': 3.0.6 + '@types/d3-delaunay': 6.0.4 + '@types/d3-dispatch': 3.0.7 + '@types/d3-drag': 3.0.7 + '@types/d3-dsv': 3.0.7 + '@types/d3-ease': 3.0.2 + '@types/d3-fetch': 3.0.7 + '@types/d3-force': 3.0.10 + '@types/d3-format': 3.0.4 + '@types/d3-geo': 3.1.0 + '@types/d3-hierarchy': 3.1.7 + '@types/d3-interpolate': 3.0.4 + '@types/d3-path': 3.1.1 + '@types/d3-polygon': 3.0.2 + '@types/d3-quadtree': 3.0.6 + '@types/d3-random': 3.0.3 + '@types/d3-scale': 4.0.9 + '@types/d3-scale-chromatic': 3.1.0 + '@types/d3-selection': 3.0.11 + '@types/d3-shape': 3.1.7 + '@types/d3-time': 3.0.4 + '@types/d3-time-format': 4.0.3 + '@types/d3-timer': 3.0.2 + '@types/d3-transition': 3.0.9 + '@types/d3-zoom': 3.0.8 + + '@types/debug@4.1.12': + dependencies: + '@types/ms': 2.1.0 + + '@types/estree-jsx@1.0.5': + dependencies: + '@types/estree': 1.0.8 + + '@types/estree@1.0.8': {} + + '@types/fontkit@2.0.8': + dependencies: + '@types/node': 24.3.1 + + '@types/geojson@7946.0.16': {} + + '@types/hast@3.0.4': + dependencies: + '@types/unist': 3.0.3 + + '@types/js-yaml@4.0.9': {} + + '@types/mdast@4.0.4': + dependencies: + '@types/unist': 3.0.3 + + '@types/mdx@2.0.13': {} + + '@types/ms@2.1.0': {} + + '@types/nlcst@2.0.3': + dependencies: + '@types/unist': 3.0.3 + + '@types/node@17.0.45': {} + + '@types/node@24.3.1': + dependencies: + undici-types: 7.10.0 + + '@types/picomatch@3.0.2': {} + + '@types/sax@1.2.7': + dependencies: + '@types/node': 17.0.45 + + '@types/trusted-types@2.0.7': + optional: true + + '@types/unist@2.0.11': {} + + '@types/unist@3.0.3': {} + + '@ungap/structured-clone@1.3.0': {} + + acorn-jsx@5.3.2(acorn@8.15.0): + dependencies: + acorn: 8.15.0 + + acorn@8.15.0: {} + + ansi-align@3.0.1: + dependencies: + string-width: 4.2.3 + + ansi-escapes@7.1.0: + dependencies: + environment: 1.1.0 + + ansi-regex@5.0.1: {} + + ansi-regex@6.2.2: {} + + ansi-styles@6.2.3: {} + + anymatch@3.1.3: + dependencies: + normalize-path: 3.0.0 + picomatch: 2.3.1 + + arg@5.0.2: {} + + argparse@2.0.1: {} + + aria-query@5.3.2: {} + + array-iterate@2.0.1: {} + + astring@1.9.0: {} + + astro-expressive-code@0.41.3(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)): + dependencies: + astro: 5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1) + rehype-expressive-code: 0.41.3 + + astro-mermaid@1.0.4(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))(mermaid@11.10.1): + dependencies: + astro: 5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1) + mdast-util-to-string: 4.0.0 + mermaid: 11.10.1 + unist-util-visit: 5.0.0 + + astro-remote@0.3.4: + dependencies: + entities: 4.5.0 + marked: 12.0.2 + marked-footnote: 1.4.0(marked@12.0.2) + marked-smartypants: 1.1.10(marked@12.0.2) + ultrahtml: 1.6.0 + + astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1): + dependencies: + '@astrojs/compiler': 2.12.2 + '@astrojs/internal-helpers': 0.7.2 + '@astrojs/markdown-remark': 6.3.6 + '@astrojs/telemetry': 3.3.0 + '@capsizecss/unpack': 2.4.0 + '@oslojs/encoding': 1.1.0 + '@rollup/pluginutils': 5.3.0(rollup@4.50.1) + acorn: 8.15.0 + aria-query: 5.3.2 + axobject-query: 4.1.0 + boxen: 8.0.1 + ci-info: 4.3.0 + clsx: 2.1.1 + common-ancestor-path: 1.0.1 + cookie: 1.0.2 + cssesc: 3.0.0 + debug: 4.4.1 + deterministic-object-hash: 2.0.2 + devalue: 5.3.2 + diff: 5.2.0 + dlv: 1.1.3 + dset: 3.1.4 + es-module-lexer: 1.7.0 + esbuild: 0.25.9 + estree-walker: 3.0.3 + flattie: 1.1.1 + fontace: 0.3.0 + github-slugger: 2.0.0 + html-escaper: 3.0.3 + http-cache-semantics: 4.2.0 + import-meta-resolve: 4.2.0 + js-yaml: 4.1.0 + kleur: 4.1.5 + magic-string: 0.30.19 + magicast: 0.3.5 + mrmime: 2.0.1 + neotraverse: 0.6.18 + p-limit: 6.2.0 + p-queue: 8.1.1 + package-manager-detector: 1.3.0 + picomatch: 4.0.3 + prompts: 2.4.2 + rehype: 13.0.2 + semver: 7.7.2 + shiki: 3.12.2 + simple-swizzle: 0.2.2 + smol-toml: 1.4.2 + tinyexec: 0.3.2 + tinyglobby: 0.2.15 + tsconfck: 3.1.6(typescript@5.9.2) + ultrahtml: 1.6.0 + unifont: 0.5.2 + unist-util-visit: 5.0.0 + unstorage: 1.17.1 + vfile: 6.0.3 + vite: 6.3.6(@types/node@24.3.1)(yaml@2.8.1) + vitefu: 1.1.1(vite@6.3.6(@types/node@24.3.1)(yaml@2.8.1)) + xxhash-wasm: 1.1.0 + yargs-parser: 21.1.1 + yocto-spinner: 0.2.3 + zod: 3.25.76 + zod-to-json-schema: 3.24.6(zod@3.25.76) + zod-to-ts: 1.2.0(typescript@5.9.2)(zod@3.25.76) + optionalDependencies: + sharp: 0.33.5 + transitivePeerDependencies: + - '@azure/app-configuration' + - '@azure/cosmos' + - '@azure/data-tables' + - '@azure/identity' + - '@azure/keyvault-secrets' + - '@azure/storage-blob' + - '@capacitor/preferences' + - '@deno/kv' + - '@netlify/blobs' + - '@planetscale/database' + - '@types/node' + - '@upstash/redis' + - '@vercel/blob' + - '@vercel/functions' + - '@vercel/kv' + - aws4fetch + - db0 + - encoding + - idb-keyval + - ioredis + - jiti + - less + - lightningcss + - rollup + - sass + - sass-embedded + - stylus + - sugarss + - supports-color + - terser + - tsx + - typescript + - uploadthing + - yaml + + axobject-query@4.1.0: {} + + bail@2.0.2: {} + + base-64@1.0.0: {} + + base64-js@1.5.1: {} + + bcp-47-match@2.0.3: {} + + bcp-47@2.1.0: + dependencies: + is-alphabetical: 2.0.1 + is-alphanumerical: 2.0.1 + is-decimal: 2.0.1 + + blob-to-buffer@1.2.9: {} + + boolbase@1.0.0: {} + + boxen@8.0.1: + dependencies: + ansi-align: 3.0.1 + camelcase: 8.0.0 + chalk: 5.6.2 + cli-boxes: 3.0.0 + string-width: 7.2.0 + type-fest: 4.41.0 + widest-line: 5.0.0 + wrap-ansi: 9.0.2 + + brotli@1.3.3: + dependencies: + base64-js: 1.5.1 + + camelcase@8.0.0: {} + + ccount@2.0.1: {} + + chalk@5.6.2: {} + + character-entities-html4@2.1.0: {} + + character-entities-legacy@3.0.0: {} + + character-entities@2.0.2: {} + + character-reference-invalid@2.0.1: {} + + chevrotain-allstar@0.3.1(chevrotain@11.0.3): + dependencies: + chevrotain: 11.0.3 + lodash-es: 4.17.21 + + chevrotain@11.0.3: + dependencies: + '@chevrotain/cst-dts-gen': 11.0.3 + '@chevrotain/gast': 11.0.3 + '@chevrotain/regexp-to-ast': 11.0.3 + '@chevrotain/types': 11.0.3 + '@chevrotain/utils': 11.0.3 + lodash-es: 4.17.21 + + chokidar@4.0.3: + dependencies: + readdirp: 4.1.2 + + ci-info@4.3.0: {} + + cli-boxes@3.0.0: {} + + clone@2.1.2: {} + + clsx@2.1.1: {} + + collapse-white-space@2.1.0: {} + + color-convert@2.0.1: + dependencies: + color-name: 1.1.4 + + color-name@1.1.4: {} + + color-string@1.9.1: + dependencies: + color-name: 1.1.4 + simple-swizzle: 0.2.2 + + color@4.2.3: + dependencies: + color-convert: 2.0.1 + color-string: 1.9.1 + + comma-separated-tokens@2.0.3: {} + + commander@7.2.0: {} + + commander@8.3.0: {} + + common-ancestor-path@1.0.1: {} + + confbox@0.1.8: {} + + confbox@0.2.2: {} + + cookie-es@1.2.2: {} + + cookie@1.0.2: {} + + cose-base@1.0.3: + dependencies: + layout-base: 1.0.2 + + cose-base@2.2.0: + dependencies: + layout-base: 2.0.1 + + cross-fetch@3.2.0: + dependencies: + node-fetch: 2.7.0 + transitivePeerDependencies: + - encoding + + crossws@0.3.5: + dependencies: + uncrypto: 0.1.3 + + css-selector-parser@3.1.3: {} + + css-tree@3.1.0: + dependencies: + mdn-data: 2.12.2 + source-map-js: 1.2.1 + + cssesc@3.0.0: {} + + cytoscape-cose-bilkent@4.1.0(cytoscape@3.33.1): + dependencies: + cose-base: 1.0.3 + cytoscape: 3.33.1 + + cytoscape-fcose@2.2.0(cytoscape@3.33.1): + dependencies: + cose-base: 2.2.0 + cytoscape: 3.33.1 + + cytoscape@3.33.1: {} + + d3-array@2.12.1: + dependencies: + internmap: 1.0.1 + + d3-array@3.2.4: + dependencies: + internmap: 2.0.3 + + d3-axis@3.0.0: {} + + d3-brush@3.0.0: + dependencies: + d3-dispatch: 3.0.1 + d3-drag: 3.0.0 + d3-interpolate: 3.0.1 + d3-selection: 3.0.0 + d3-transition: 3.0.1(d3-selection@3.0.0) + + d3-chord@3.0.1: + dependencies: + d3-path: 3.1.0 + + d3-color@3.1.0: {} + + d3-contour@4.0.2: + dependencies: + d3-array: 3.2.4 + + d3-delaunay@6.0.4: + dependencies: + delaunator: 5.0.1 + + d3-dispatch@3.0.1: {} + + d3-drag@3.0.0: + dependencies: + d3-dispatch: 3.0.1 + d3-selection: 3.0.0 + + d3-dsv@3.0.1: + dependencies: + commander: 7.2.0 + iconv-lite: 0.6.3 + rw: 1.3.3 + + d3-ease@3.0.1: {} + + d3-fetch@3.0.1: + dependencies: + d3-dsv: 3.0.1 + + d3-force@3.0.0: + dependencies: + d3-dispatch: 3.0.1 + d3-quadtree: 3.0.1 + d3-timer: 3.0.1 + + d3-format@3.1.0: {} + + d3-geo@3.1.1: + dependencies: + d3-array: 3.2.4 + + d3-hierarchy@3.1.2: {} + + d3-interpolate@3.0.1: + dependencies: + d3-color: 3.1.0 + + d3-path@1.0.9: {} + + d3-path@3.1.0: {} + + d3-polygon@3.0.1: {} + + d3-quadtree@3.0.1: {} + + d3-random@3.0.1: {} + + d3-sankey@0.12.3: + dependencies: + d3-array: 2.12.1 + d3-shape: 1.3.7 + + d3-scale-chromatic@3.1.0: + dependencies: + d3-color: 3.1.0 + d3-interpolate: 3.0.1 + + d3-scale@4.0.2: + dependencies: + d3-array: 3.2.4 + d3-format: 3.1.0 + d3-interpolate: 3.0.1 + d3-time: 3.1.0 + d3-time-format: 4.1.0 + + d3-selection@3.0.0: {} + + d3-shape@1.3.7: + dependencies: + d3-path: 1.0.9 + + d3-shape@3.2.0: + dependencies: + d3-path: 3.1.0 + + d3-time-format@4.1.0: + dependencies: + d3-time: 3.1.0 + + d3-time@3.1.0: + dependencies: + d3-array: 3.2.4 + + d3-timer@3.0.1: {} + + d3-transition@3.0.1(d3-selection@3.0.0): + dependencies: + d3-color: 3.1.0 + d3-dispatch: 3.0.1 + d3-ease: 3.0.1 + d3-interpolate: 3.0.1 + d3-selection: 3.0.0 + d3-timer: 3.0.1 + + d3-zoom@3.0.0: + dependencies: + d3-dispatch: 3.0.1 + d3-drag: 3.0.0 + d3-interpolate: 3.0.1 + d3-selection: 3.0.0 + d3-transition: 3.0.1(d3-selection@3.0.0) + + d3@7.9.0: + dependencies: + d3-array: 3.2.4 + d3-axis: 3.0.0 + d3-brush: 3.0.0 + d3-chord: 3.0.1 + d3-color: 3.1.0 + d3-contour: 4.0.2 + d3-delaunay: 6.0.4 + d3-dispatch: 3.0.1 + d3-drag: 3.0.0 + d3-dsv: 3.0.1 + d3-ease: 3.0.1 + d3-fetch: 3.0.1 + d3-force: 3.0.0 + d3-format: 3.1.0 + d3-geo: 3.1.1 + d3-hierarchy: 3.1.2 + d3-interpolate: 3.0.1 + d3-path: 3.1.0 + d3-polygon: 3.0.1 + d3-quadtree: 3.0.1 + d3-random: 3.0.1 + d3-scale: 4.0.2 + d3-scale-chromatic: 3.1.0 + d3-selection: 3.0.0 + d3-shape: 3.2.0 + d3-time: 3.1.0 + d3-time-format: 4.1.0 + d3-timer: 3.0.1 + d3-transition: 3.0.1(d3-selection@3.0.0) + d3-zoom: 3.0.0 + + dagre-d3-es@7.0.11: + dependencies: + d3: 7.9.0 + lodash-es: 4.17.21 + + dayjs@1.11.18: {} + + debug@4.4.1: + dependencies: + ms: 2.1.3 + + decode-named-character-reference@1.2.0: + dependencies: + character-entities: 2.0.2 + + defu@6.1.4: {} + + delaunator@5.0.1: + dependencies: + robust-predicates: 3.0.2 + + dequal@2.0.3: {} + + destr@2.0.5: {} + + detect-libc@2.0.4: {} + + deterministic-object-hash@2.0.2: + dependencies: + base-64: 1.0.0 + + devalue@5.3.2: {} + + devlop@1.1.0: + dependencies: + dequal: 2.0.3 + + dfa@1.2.0: {} + + diff@5.2.0: {} + + direction@2.0.1: {} + + dlv@1.1.3: {} + + dompurify@3.2.6: + optionalDependencies: + '@types/trusted-types': 2.0.7 + + dset@3.1.4: {} + + emoji-regex@10.5.0: {} + + emoji-regex@8.0.0: {} + + entities@4.5.0: {} + + entities@6.0.1: {} + + environment@1.1.0: {} + + es-module-lexer@1.7.0: {} + + esast-util-from-estree@2.0.0: + dependencies: + '@types/estree-jsx': 1.0.5 + devlop: 1.1.0 + estree-util-visit: 2.0.0 + unist-util-position-from-estree: 2.0.0 + + esast-util-from-js@2.0.1: + dependencies: + '@types/estree-jsx': 1.0.5 + acorn: 8.15.0 + esast-util-from-estree: 2.0.0 + vfile-message: 4.0.3 + + esbuild@0.25.9: + optionalDependencies: + '@esbuild/aix-ppc64': 0.25.9 + '@esbuild/android-arm': 0.25.9 + '@esbuild/android-arm64': 0.25.9 + '@esbuild/android-x64': 0.25.9 + '@esbuild/darwin-arm64': 0.25.9 + '@esbuild/darwin-x64': 0.25.9 + '@esbuild/freebsd-arm64': 0.25.9 + '@esbuild/freebsd-x64': 0.25.9 + '@esbuild/linux-arm': 0.25.9 + '@esbuild/linux-arm64': 0.25.9 + '@esbuild/linux-ia32': 0.25.9 + '@esbuild/linux-loong64': 0.25.9 + '@esbuild/linux-mips64el': 0.25.9 + '@esbuild/linux-ppc64': 0.25.9 + '@esbuild/linux-riscv64': 0.25.9 + '@esbuild/linux-s390x': 0.25.9 + '@esbuild/linux-x64': 0.25.9 + '@esbuild/netbsd-arm64': 0.25.9 + '@esbuild/netbsd-x64': 0.25.9 + '@esbuild/openbsd-arm64': 0.25.9 + '@esbuild/openbsd-x64': 0.25.9 + '@esbuild/openharmony-arm64': 0.25.9 + '@esbuild/sunos-x64': 0.25.9 + '@esbuild/win32-arm64': 0.25.9 + '@esbuild/win32-ia32': 0.25.9 + '@esbuild/win32-x64': 0.25.9 + + escape-string-regexp@5.0.0: {} + + estree-util-attach-comments@3.0.0: + dependencies: + '@types/estree': 1.0.8 + + estree-util-build-jsx@3.0.1: + dependencies: + '@types/estree-jsx': 1.0.5 + devlop: 1.1.0 + estree-util-is-identifier-name: 3.0.0 + estree-walker: 3.0.3 + + estree-util-is-identifier-name@3.0.0: {} + + estree-util-scope@1.0.0: + dependencies: + '@types/estree': 1.0.8 + devlop: 1.1.0 + + estree-util-to-js@2.0.0: + dependencies: + '@types/estree-jsx': 1.0.5 + astring: 1.9.0 + source-map: 0.7.6 + + estree-util-visit@2.0.0: + dependencies: + '@types/estree-jsx': 1.0.5 + '@types/unist': 3.0.3 + + estree-walker@2.0.2: {} + + estree-walker@3.0.3: + dependencies: + '@types/estree': 1.0.8 + + eventemitter3@5.0.1: {} + + expressive-code@0.41.3: + dependencies: + '@expressive-code/core': 0.41.3 + '@expressive-code/plugin-frames': 0.41.3 + '@expressive-code/plugin-shiki': 0.41.3 + '@expressive-code/plugin-text-markers': 0.41.3 + + exsolve@1.0.7: {} + + extend@3.0.2: {} + + fast-deep-equal@3.1.3: {} + + fdir@6.5.0(picomatch@4.0.3): + optionalDependencies: + picomatch: 4.0.3 + + flattie@1.1.1: {} + + fontace@0.3.0: + dependencies: + '@types/fontkit': 2.0.8 + fontkit: 2.0.4 + + fontkit@2.0.4: + dependencies: + '@swc/helpers': 0.5.17 + brotli: 1.3.3 + clone: 2.1.2 + dfa: 1.2.0 + fast-deep-equal: 3.1.3 + restructure: 3.0.2 + tiny-inflate: 1.0.3 + unicode-properties: 1.4.1 + unicode-trie: 2.0.0 + + fsevents@2.3.3: + optional: true + + get-east-asian-width@1.3.1: {} + + github-slugger@2.0.0: {} + + globals@15.15.0: {} + + h3@1.15.4: + dependencies: + cookie-es: 1.2.2 + crossws: 0.3.5 + defu: 6.1.4 + destr: 2.0.5 + iron-webcrypto: 1.2.1 + node-mock-http: 1.0.3 + radix3: 1.1.2 + ufo: 1.6.1 + uncrypto: 0.1.3 + + hachure-fill@0.5.2: {} + + has-flag@5.0.1: {} + + hast-util-embedded@3.0.0: + dependencies: + '@types/hast': 3.0.4 + hast-util-is-element: 3.0.0 + + hast-util-format@1.1.0: + dependencies: + '@types/hast': 3.0.4 + hast-util-embedded: 3.0.0 + hast-util-minify-whitespace: 1.0.1 + hast-util-phrasing: 3.0.1 + hast-util-whitespace: 3.0.0 + html-whitespace-sensitive-tag-names: 3.0.1 + unist-util-visit-parents: 6.0.1 + + hast-util-from-html@2.0.3: + dependencies: + '@types/hast': 3.0.4 + devlop: 1.1.0 + hast-util-from-parse5: 8.0.3 + parse5: 7.3.0 + vfile: 6.0.3 + vfile-message: 4.0.3 + + hast-util-from-parse5@8.0.3: + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.3 + devlop: 1.1.0 + hastscript: 9.0.1 + property-information: 7.1.0 + vfile: 6.0.3 + vfile-location: 5.0.3 + web-namespaces: 2.0.1 + + hast-util-has-property@3.0.0: + dependencies: + '@types/hast': 3.0.4 + + hast-util-is-body-ok-link@3.0.1: + dependencies: + '@types/hast': 3.0.4 + + hast-util-is-element@3.0.0: + dependencies: + '@types/hast': 3.0.4 + + hast-util-minify-whitespace@1.0.1: + dependencies: + '@types/hast': 3.0.4 + hast-util-embedded: 3.0.0 + hast-util-is-element: 3.0.0 + hast-util-whitespace: 3.0.0 + unist-util-is: 6.0.0 + + hast-util-parse-selector@4.0.0: + dependencies: + '@types/hast': 3.0.4 + + hast-util-phrasing@3.0.1: + dependencies: + '@types/hast': 3.0.4 + hast-util-embedded: 3.0.0 + hast-util-has-property: 3.0.0 + hast-util-is-body-ok-link: 3.0.1 + hast-util-is-element: 3.0.0 + + hast-util-raw@9.1.0: + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.3 + '@ungap/structured-clone': 1.3.0 + hast-util-from-parse5: 8.0.3 + hast-util-to-parse5: 8.0.0 + html-void-elements: 3.0.0 + mdast-util-to-hast: 13.2.0 + parse5: 7.3.0 + unist-util-position: 5.0.0 + unist-util-visit: 5.0.0 + vfile: 6.0.3 + web-namespaces: 2.0.1 + zwitch: 2.0.4 + + hast-util-select@6.0.4: + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.3 + bcp-47-match: 2.0.3 + comma-separated-tokens: 2.0.3 + css-selector-parser: 3.1.3 + devlop: 1.1.0 + direction: 2.0.1 + hast-util-has-property: 3.0.0 + hast-util-to-string: 3.0.1 + hast-util-whitespace: 3.0.0 + nth-check: 2.1.1 + property-information: 7.1.0 + space-separated-tokens: 2.0.2 + unist-util-visit: 5.0.0 + zwitch: 2.0.4 + + hast-util-to-estree@3.1.3: + dependencies: + '@types/estree': 1.0.8 + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + comma-separated-tokens: 2.0.3 + devlop: 1.1.0 + estree-util-attach-comments: 3.0.0 + estree-util-is-identifier-name: 3.0.0 + hast-util-whitespace: 3.0.0 + mdast-util-mdx-expression: 2.0.1 + mdast-util-mdx-jsx: 3.2.0 + mdast-util-mdxjs-esm: 2.0.1 + property-information: 7.1.0 + space-separated-tokens: 2.0.2 + style-to-js: 1.1.17 + unist-util-position: 5.0.0 + zwitch: 2.0.4 + transitivePeerDependencies: + - supports-color + + hast-util-to-html@9.0.5: + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.3 + ccount: 2.0.1 + comma-separated-tokens: 2.0.3 + hast-util-whitespace: 3.0.0 + html-void-elements: 3.0.0 + mdast-util-to-hast: 13.2.0 + property-information: 7.1.0 + space-separated-tokens: 2.0.2 + stringify-entities: 4.0.4 + zwitch: 2.0.4 + + hast-util-to-jsx-runtime@2.3.6: + dependencies: + '@types/estree': 1.0.8 + '@types/hast': 3.0.4 + '@types/unist': 3.0.3 + comma-separated-tokens: 2.0.3 + devlop: 1.1.0 + estree-util-is-identifier-name: 3.0.0 + hast-util-whitespace: 3.0.0 + mdast-util-mdx-expression: 2.0.1 + mdast-util-mdx-jsx: 3.2.0 + mdast-util-mdxjs-esm: 2.0.1 + property-information: 7.1.0 + space-separated-tokens: 2.0.2 + style-to-js: 1.1.17 + unist-util-position: 5.0.0 + vfile-message: 4.0.3 + transitivePeerDependencies: + - supports-color + + hast-util-to-parse5@8.0.0: + dependencies: + '@types/hast': 3.0.4 + comma-separated-tokens: 2.0.3 + devlop: 1.1.0 + property-information: 6.5.0 + space-separated-tokens: 2.0.2 + web-namespaces: 2.0.1 + zwitch: 2.0.4 + + hast-util-to-string@3.0.1: + dependencies: + '@types/hast': 3.0.4 + + hast-util-to-text@4.0.2: + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.3 + hast-util-is-element: 3.0.0 + unist-util-find-after: 5.0.0 + + hast-util-whitespace@3.0.0: + dependencies: + '@types/hast': 3.0.4 + + hastscript@9.0.1: + dependencies: + '@types/hast': 3.0.4 + comma-separated-tokens: 2.0.3 + hast-util-parse-selector: 4.0.0 + property-information: 7.1.0 + space-separated-tokens: 2.0.2 + + html-escaper@3.0.3: {} + + html-void-elements@3.0.0: {} + + html-whitespace-sensitive-tag-names@3.0.1: {} + + http-cache-semantics@4.2.0: {} + + i18next@23.16.8: + dependencies: + '@babel/runtime': 7.28.3 + + iconv-lite@0.6.3: + dependencies: + safer-buffer: 2.1.2 + + import-meta-resolve@4.2.0: {} + + inline-style-parser@0.2.4: {} + + internmap@1.0.1: {} + + internmap@2.0.3: {} + + iron-webcrypto@1.2.1: {} + + is-absolute-url@4.0.1: {} + + is-alphabetical@2.0.1: {} + + is-alphanumerical@2.0.1: + dependencies: + is-alphabetical: 2.0.1 + is-decimal: 2.0.1 + + is-arrayish@0.3.2: {} + + is-decimal@2.0.1: {} + + is-docker@3.0.0: {} + + is-fullwidth-code-point@3.0.0: {} + + is-hexadecimal@2.0.1: {} + + is-inside-container@1.0.0: + dependencies: + is-docker: 3.0.0 + + is-plain-obj@4.1.0: {} + + is-wsl@3.1.0: + dependencies: + is-inside-container: 1.0.0 + + js-yaml@4.1.0: + dependencies: + argparse: 2.0.1 + + katex@0.16.22: + dependencies: + commander: 8.3.0 + + khroma@2.1.0: {} + + kleur@3.0.3: {} + + kleur@4.1.5: {} + + klona@2.0.6: {} + + kolorist@1.8.0: {} + + langium@3.3.1: + dependencies: + chevrotain: 11.0.3 + chevrotain-allstar: 0.3.1(chevrotain@11.0.3) + vscode-languageserver: 9.0.1 + vscode-languageserver-textdocument: 1.0.12 + vscode-uri: 3.0.8 + + layout-base@1.0.2: {} + + layout-base@2.0.1: {} + + local-pkg@1.1.2: + dependencies: + mlly: 1.8.0 + pkg-types: 2.3.0 + quansync: 0.2.11 + + lodash-es@4.17.21: {} + + longest-streak@3.1.0: {} + + lru-cache@10.4.3: {} + + magic-string@0.30.19: + dependencies: + '@jridgewell/sourcemap-codec': 1.5.5 + + magicast@0.3.5: + dependencies: + '@babel/parser': 7.28.4 + '@babel/types': 7.28.4 + source-map-js: 1.2.1 + + markdown-extensions@2.0.0: {} + + markdown-table@3.0.4: {} + + marked-footnote@1.4.0(marked@12.0.2): + dependencies: + marked: 12.0.2 + + marked-smartypants@1.1.10(marked@12.0.2): + dependencies: + marked: 12.0.2 + smartypants: 0.2.2 + + marked@12.0.2: {} + + marked@16.2.1: {} + + mdast-heading-id@2.0.0: {} + + mdast-util-definitions@6.0.0: + dependencies: + '@types/mdast': 4.0.4 + '@types/unist': 3.0.3 + unist-util-visit: 5.0.0 + + mdast-util-directive@3.1.0: + dependencies: + '@types/mdast': 4.0.4 + '@types/unist': 3.0.3 + ccount: 2.0.1 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + parse-entities: 4.0.2 + stringify-entities: 4.0.4 + unist-util-visit-parents: 6.0.1 + transitivePeerDependencies: + - supports-color + + mdast-util-find-and-replace@3.0.2: + dependencies: + '@types/mdast': 4.0.4 + escape-string-regexp: 5.0.0 + unist-util-is: 6.0.0 + unist-util-visit-parents: 6.0.1 + + mdast-util-from-markdown@2.0.2: + dependencies: + '@types/mdast': 4.0.4 + '@types/unist': 3.0.3 + decode-named-character-reference: 1.2.0 + devlop: 1.1.0 + mdast-util-to-string: 4.0.0 + micromark: 4.0.2 + micromark-util-decode-numeric-character-reference: 2.0.2 + micromark-util-decode-string: 2.0.1 + micromark-util-normalize-identifier: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + unist-util-stringify-position: 4.0.0 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-autolink-literal@2.0.1: + dependencies: + '@types/mdast': 4.0.4 + ccount: 2.0.1 + devlop: 1.1.0 + mdast-util-find-and-replace: 3.0.2 + micromark-util-character: 2.1.1 + + mdast-util-gfm-footnote@2.1.0: + dependencies: + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + micromark-util-normalize-identifier: 2.0.1 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-strikethrough@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-table@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + devlop: 1.1.0 + markdown-table: 3.0.4 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-task-list-item@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm@3.1.0: + dependencies: + mdast-util-from-markdown: 2.0.2 + mdast-util-gfm-autolink-literal: 2.0.1 + mdast-util-gfm-footnote: 2.1.0 + mdast-util-gfm-strikethrough: 2.0.0 + mdast-util-gfm-table: 2.0.0 + mdast-util-gfm-task-list-item: 2.0.0 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-mdx-expression@2.0.1: + dependencies: + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-mdx-jsx@3.2.0: + dependencies: + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + '@types/mdast': 4.0.4 + '@types/unist': 3.0.3 + ccount: 2.0.1 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + parse-entities: 4.0.2 + stringify-entities: 4.0.4 + unist-util-stringify-position: 4.0.0 + vfile-message: 4.0.3 + transitivePeerDependencies: + - supports-color + + mdast-util-mdx@3.0.0: + dependencies: + mdast-util-from-markdown: 2.0.2 + mdast-util-mdx-expression: 2.0.1 + mdast-util-mdx-jsx: 3.2.0 + mdast-util-mdxjs-esm: 2.0.1 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-mdxjs-esm@2.0.1: + dependencies: + '@types/estree-jsx': 1.0.5 + '@types/hast': 3.0.4 + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-phrasing@4.1.0: + dependencies: + '@types/mdast': 4.0.4 + unist-util-is: 6.0.0 + + mdast-util-to-hast@13.2.0: + dependencies: + '@types/hast': 3.0.4 + '@types/mdast': 4.0.4 + '@ungap/structured-clone': 1.3.0 + devlop: 1.1.0 + micromark-util-sanitize-uri: 2.0.1 + trim-lines: 3.0.1 + unist-util-position: 5.0.0 + unist-util-visit: 5.0.0 + vfile: 6.0.3 + + mdast-util-to-markdown@2.1.2: + dependencies: + '@types/mdast': 4.0.4 + '@types/unist': 3.0.3 + longest-streak: 3.1.0 + mdast-util-phrasing: 4.1.0 + mdast-util-to-string: 4.0.0 + micromark-util-classify-character: 2.0.1 + micromark-util-decode-string: 2.0.1 + unist-util-visit: 5.0.0 + zwitch: 2.0.4 + + mdast-util-to-string@4.0.0: + dependencies: + '@types/mdast': 4.0.4 + + mdn-data@2.12.2: {} + + mermaid@11.10.1: + dependencies: + '@braintree/sanitize-url': 7.1.1 + '@iconify/utils': 2.3.0 + '@mermaid-js/parser': 0.6.2 + '@types/d3': 7.4.3 + cytoscape: 3.33.1 + cytoscape-cose-bilkent: 4.1.0(cytoscape@3.33.1) + cytoscape-fcose: 2.2.0(cytoscape@3.33.1) + d3: 7.9.0 + d3-sankey: 0.12.3 + dagre-d3-es: 7.0.11 + dayjs: 1.11.18 + dompurify: 3.2.6 + katex: 0.16.22 + khroma: 2.1.0 + lodash-es: 4.17.21 + marked: 16.2.1 + roughjs: 4.6.6 + stylis: 4.3.6 + ts-dedent: 2.2.0 + uuid: 11.1.0 + transitivePeerDependencies: + - supports-color + + micromark-core-commonmark@2.0.3: + dependencies: + decode-named-character-reference: 1.2.0 + devlop: 1.1.0 + micromark-factory-destination: 2.0.1 + micromark-factory-label: 2.0.1 + micromark-factory-space: 2.0.1 + micromark-factory-title: 2.0.1 + micromark-factory-whitespace: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-chunked: 2.0.1 + micromark-util-classify-character: 2.0.1 + micromark-util-html-tag-name: 2.0.1 + micromark-util-normalize-identifier: 2.0.1 + micromark-util-resolve-all: 2.0.1 + micromark-util-subtokenize: 2.1.0 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-directive@3.0.2: + dependencies: + devlop: 1.1.0 + micromark-factory-space: 2.0.1 + micromark-factory-whitespace: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + parse-entities: 4.0.2 + + micromark-extension-gfm-autolink-literal@2.1.0: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-sanitize-uri: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-footnote@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-core-commonmark: 2.0.3 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-normalize-identifier: 2.0.1 + micromark-util-sanitize-uri: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-strikethrough@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-util-chunked: 2.0.1 + micromark-util-classify-character: 2.0.1 + micromark-util-resolve-all: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-table@2.1.1: + dependencies: + devlop: 1.1.0 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-tagfilter@2.0.0: + dependencies: + micromark-util-types: 2.0.2 + + micromark-extension-gfm-task-list-item@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm@3.0.0: + dependencies: + micromark-extension-gfm-autolink-literal: 2.1.0 + micromark-extension-gfm-footnote: 2.1.0 + micromark-extension-gfm-strikethrough: 2.1.0 + micromark-extension-gfm-table: 2.1.1 + micromark-extension-gfm-tagfilter: 2.0.0 + micromark-extension-gfm-task-list-item: 2.1.0 + micromark-util-combine-extensions: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-mdx-expression@3.0.1: + dependencies: + '@types/estree': 1.0.8 + devlop: 1.1.0 + micromark-factory-mdx-expression: 2.0.3 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-events-to-acorn: 2.0.3 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-mdx-jsx@3.0.2: + dependencies: + '@types/estree': 1.0.8 + devlop: 1.1.0 + estree-util-is-identifier-name: 3.0.0 + micromark-factory-mdx-expression: 2.0.3 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-events-to-acorn: 2.0.3 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + vfile-message: 4.0.3 + + micromark-extension-mdx-md@2.0.0: + dependencies: + micromark-util-types: 2.0.2 + + micromark-extension-mdxjs-esm@3.0.0: + dependencies: + '@types/estree': 1.0.8 + devlop: 1.1.0 + micromark-core-commonmark: 2.0.3 + micromark-util-character: 2.1.1 + micromark-util-events-to-acorn: 2.0.3 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + unist-util-position-from-estree: 2.0.0 + vfile-message: 4.0.3 + + micromark-extension-mdxjs@3.0.0: + dependencies: + acorn: 8.15.0 + acorn-jsx: 5.3.2(acorn@8.15.0) + micromark-extension-mdx-expression: 3.0.1 + micromark-extension-mdx-jsx: 3.0.2 + micromark-extension-mdx-md: 2.0.0 + micromark-extension-mdxjs-esm: 3.0.0 + micromark-util-combine-extensions: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-factory-destination@2.0.1: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-factory-label@2.0.1: + dependencies: + devlop: 1.1.0 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-factory-mdx-expression@2.0.3: + dependencies: + '@types/estree': 1.0.8 + devlop: 1.1.0 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-events-to-acorn: 2.0.3 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + unist-util-position-from-estree: 2.0.0 + vfile-message: 4.0.3 + + micromark-factory-space@2.0.1: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-types: 2.0.2 + + micromark-factory-title@2.0.1: + dependencies: + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-factory-whitespace@2.0.1: + dependencies: + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-heading-id@2.0.0: + dependencies: + micromark-util-symbol: 2.0.1 + + micromark-util-character@2.1.1: + dependencies: + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-util-chunked@2.0.1: + dependencies: + micromark-util-symbol: 2.0.1 + + micromark-util-classify-character@2.0.1: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-util-combine-extensions@2.0.1: + dependencies: + micromark-util-chunked: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-util-decode-numeric-character-reference@2.0.2: + dependencies: + micromark-util-symbol: 2.0.1 + + micromark-util-decode-string@2.0.1: + dependencies: + decode-named-character-reference: 1.2.0 + micromark-util-character: 2.1.1 + micromark-util-decode-numeric-character-reference: 2.0.2 + micromark-util-symbol: 2.0.1 + + micromark-util-encode@2.0.1: {} + + micromark-util-events-to-acorn@2.0.3: + dependencies: + '@types/estree': 1.0.8 + '@types/unist': 3.0.3 + devlop: 1.1.0 + estree-util-visit: 2.0.0 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + vfile-message: 4.0.3 + + micromark-util-html-tag-name@2.0.1: {} + + micromark-util-normalize-identifier@2.0.1: + dependencies: + micromark-util-symbol: 2.0.1 + + micromark-util-resolve-all@2.0.1: + dependencies: + micromark-util-types: 2.0.2 + + micromark-util-sanitize-uri@2.0.1: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-encode: 2.0.1 + micromark-util-symbol: 2.0.1 + + micromark-util-subtokenize@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-util-chunked: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-util-symbol@2.0.1: {} + + micromark-util-types@2.0.2: {} + + micromark@4.0.2: + dependencies: + '@types/debug': 4.1.12 + debug: 4.4.1 + decode-named-character-reference: 1.2.0 + devlop: 1.1.0 + micromark-core-commonmark: 2.0.3 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-chunked: 2.0.1 + micromark-util-combine-extensions: 2.0.1 + micromark-util-decode-numeric-character-reference: 2.0.2 + micromark-util-encode: 2.0.1 + micromark-util-normalize-identifier: 2.0.1 + micromark-util-resolve-all: 2.0.1 + micromark-util-sanitize-uri: 2.0.1 + micromark-util-subtokenize: 2.1.0 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + transitivePeerDependencies: + - supports-color + + mlly@1.8.0: + dependencies: + acorn: 8.15.0 + pathe: 2.0.3 + pkg-types: 1.3.1 + ufo: 1.6.1 + + mrmime@2.0.1: {} + + ms@2.1.3: {} + + nanoid@3.3.11: {} + + neotraverse@0.6.18: {} + + nlcst-to-string@4.0.0: + dependencies: + '@types/nlcst': 2.0.3 + + node-fetch-native@1.6.7: {} + + node-fetch@2.7.0: + dependencies: + whatwg-url: 5.0.0 + + node-mock-http@1.0.3: {} + + normalize-path@3.0.0: {} + + nth-check@2.1.1: + dependencies: + boolbase: 1.0.0 + + ofetch@1.4.1: + dependencies: + destr: 2.0.5 + node-fetch-native: 1.6.7 + ufo: 1.6.1 + + ohash@2.0.11: {} + + oniguruma-parser@0.12.1: {} + + oniguruma-to-es@4.3.3: + dependencies: + oniguruma-parser: 0.12.1 + regex: 6.0.1 + regex-recursion: 6.0.2 + + p-limit@6.2.0: + dependencies: + yocto-queue: 1.2.1 + + p-queue@8.1.1: + dependencies: + eventemitter3: 5.0.1 + p-timeout: 6.1.4 + + p-timeout@6.1.4: {} + + package-manager-detector@1.3.0: {} + + pagefind@1.3.0: + optionalDependencies: + '@pagefind/darwin-arm64': 1.3.0 + '@pagefind/darwin-x64': 1.3.0 + '@pagefind/linux-arm64': 1.3.0 + '@pagefind/linux-x64': 1.3.0 + '@pagefind/windows-x64': 1.3.0 + + pako@0.2.9: {} + + parse-entities@4.0.2: + dependencies: + '@types/unist': 2.0.11 + character-entities-legacy: 3.0.0 + character-reference-invalid: 2.0.1 + decode-named-character-reference: 1.2.0 + is-alphanumerical: 2.0.1 + is-decimal: 2.0.1 + is-hexadecimal: 2.0.1 + + parse-latin@7.0.0: + dependencies: + '@types/nlcst': 2.0.3 + '@types/unist': 3.0.3 + nlcst-to-string: 4.0.0 + unist-util-modify-children: 4.0.0 + unist-util-visit-children: 3.0.0 + vfile: 6.0.3 + + parse5@7.3.0: + dependencies: + entities: 6.0.1 + + path-data-parser@0.1.0: {} + + pathe@2.0.3: {} + + picocolors@1.1.1: {} + + picomatch@2.3.1: {} + + picomatch@4.0.3: {} + + pkg-types@1.3.1: + dependencies: + confbox: 0.1.8 + mlly: 1.8.0 + pathe: 2.0.3 + + pkg-types@2.3.0: + dependencies: + confbox: 0.2.2 + exsolve: 1.0.7 + pathe: 2.0.3 + + points-on-curve@0.2.0: {} + + points-on-path@0.2.1: + dependencies: + path-data-parser: 0.1.0 + points-on-curve: 0.2.0 + + postcss-nested@6.2.0(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + postcss-selector-parser: 6.1.2 + + postcss-selector-parser@6.1.2: + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + + postcss@8.5.6: + dependencies: + nanoid: 3.3.11 + picocolors: 1.1.1 + source-map-js: 1.2.1 + + prismjs@1.30.0: {} + + prompts@2.4.2: + dependencies: + kleur: 3.0.3 + sisteransi: 1.0.5 + + property-information@6.5.0: {} + + property-information@7.1.0: {} + + quansync@0.2.11: {} + + radix3@1.1.2: {} + + readdirp@4.1.2: {} + + recma-build-jsx@1.0.0: + dependencies: + '@types/estree': 1.0.8 + estree-util-build-jsx: 3.0.1 + vfile: 6.0.3 + + recma-jsx@1.0.1(acorn@8.15.0): + dependencies: + acorn: 8.15.0 + acorn-jsx: 5.3.2(acorn@8.15.0) + estree-util-to-js: 2.0.0 + recma-parse: 1.0.0 + recma-stringify: 1.0.0 + unified: 11.0.5 + + recma-parse@1.0.0: + dependencies: + '@types/estree': 1.0.8 + esast-util-from-js: 2.0.1 + unified: 11.0.5 + vfile: 6.0.3 + + recma-stringify@1.0.0: + dependencies: + '@types/estree': 1.0.8 + estree-util-to-js: 2.0.0 + unified: 11.0.5 + vfile: 6.0.3 + + regex-recursion@6.0.2: + dependencies: + regex-utilities: 2.3.0 + + regex-utilities@2.3.0: {} + + regex@6.0.1: + dependencies: + regex-utilities: 2.3.0 + + rehype-expressive-code@0.41.3: + dependencies: + expressive-code: 0.41.3 + + rehype-format@5.0.1: + dependencies: + '@types/hast': 3.0.4 + hast-util-format: 1.1.0 + + rehype-parse@9.0.1: + dependencies: + '@types/hast': 3.0.4 + hast-util-from-html: 2.0.3 + unified: 11.0.5 + + rehype-raw@7.0.0: + dependencies: + '@types/hast': 3.0.4 + hast-util-raw: 9.1.0 + vfile: 6.0.3 + + rehype-recma@1.0.0: + dependencies: + '@types/estree': 1.0.8 + '@types/hast': 3.0.4 + hast-util-to-estree: 3.1.3 + transitivePeerDependencies: + - supports-color + + rehype-stringify@10.0.1: + dependencies: + '@types/hast': 3.0.4 + hast-util-to-html: 9.0.5 + unified: 11.0.5 + + rehype@13.0.2: + dependencies: + '@types/hast': 3.0.4 + rehype-parse: 9.0.1 + rehype-stringify: 10.0.1 + unified: 11.0.5 + + remark-custom-heading-id@2.0.0: + dependencies: + mdast-heading-id: 2.0.0 + micromark-heading-id: 2.0.0 + unist-util-visit: 5.0.0 + + remark-directive@3.0.1: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-directive: 3.1.0 + micromark-extension-directive: 3.0.2 + unified: 11.0.5 + transitivePeerDependencies: + - supports-color + + remark-gfm@4.0.1: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-gfm: 3.1.0 + micromark-extension-gfm: 3.0.0 + remark-parse: 11.0.0 + remark-stringify: 11.0.0 + unified: 11.0.5 + transitivePeerDependencies: + - supports-color + + remark-mdx@3.1.0: + dependencies: + mdast-util-mdx: 3.0.0 + micromark-extension-mdxjs: 3.0.0 + transitivePeerDependencies: + - supports-color + + remark-parse@11.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-from-markdown: 2.0.2 + micromark-util-types: 2.0.2 + unified: 11.0.5 + transitivePeerDependencies: + - supports-color + + remark-rehype@11.1.2: + dependencies: + '@types/hast': 3.0.4 + '@types/mdast': 4.0.4 + mdast-util-to-hast: 13.2.0 + unified: 11.0.5 + vfile: 6.0.3 + + remark-smartypants@3.0.2: + dependencies: + retext: 9.0.0 + retext-smartypants: 6.2.0 + unified: 11.0.5 + unist-util-visit: 5.0.0 + + remark-stringify@11.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-to-markdown: 2.1.2 + unified: 11.0.5 + + restructure@3.0.2: {} + + retext-latin@4.0.0: + dependencies: + '@types/nlcst': 2.0.3 + parse-latin: 7.0.0 + unified: 11.0.5 + + retext-smartypants@6.2.0: + dependencies: + '@types/nlcst': 2.0.3 + nlcst-to-string: 4.0.0 + unist-util-visit: 5.0.0 + + retext-stringify@4.0.0: + dependencies: + '@types/nlcst': 2.0.3 + nlcst-to-string: 4.0.0 + unified: 11.0.5 + + retext@9.0.0: + dependencies: + '@types/nlcst': 2.0.3 + retext-latin: 4.0.0 + retext-stringify: 4.0.0 + unified: 11.0.5 + + robust-predicates@3.0.2: {} + + rollup@4.50.1: + dependencies: + '@types/estree': 1.0.8 + optionalDependencies: + '@rollup/rollup-android-arm-eabi': 4.50.1 + '@rollup/rollup-android-arm64': 4.50.1 + '@rollup/rollup-darwin-arm64': 4.50.1 + '@rollup/rollup-darwin-x64': 4.50.1 + '@rollup/rollup-freebsd-arm64': 4.50.1 + '@rollup/rollup-freebsd-x64': 4.50.1 + '@rollup/rollup-linux-arm-gnueabihf': 4.50.1 + '@rollup/rollup-linux-arm-musleabihf': 4.50.1 + '@rollup/rollup-linux-arm64-gnu': 4.50.1 + '@rollup/rollup-linux-arm64-musl': 4.50.1 + '@rollup/rollup-linux-loongarch64-gnu': 4.50.1 + '@rollup/rollup-linux-ppc64-gnu': 4.50.1 + '@rollup/rollup-linux-riscv64-gnu': 4.50.1 + '@rollup/rollup-linux-riscv64-musl': 4.50.1 + '@rollup/rollup-linux-s390x-gnu': 4.50.1 + '@rollup/rollup-linux-x64-gnu': 4.50.1 + '@rollup/rollup-linux-x64-musl': 4.50.1 + '@rollup/rollup-openharmony-arm64': 4.50.1 + '@rollup/rollup-win32-arm64-msvc': 4.50.1 + '@rollup/rollup-win32-ia32-msvc': 4.50.1 + '@rollup/rollup-win32-x64-msvc': 4.50.1 + fsevents: 2.3.3 + + roughjs@4.6.6: + dependencies: + hachure-fill: 0.5.2 + path-data-parser: 0.1.0 + points-on-curve: 0.2.0 + points-on-path: 0.2.1 + + rw@1.3.3: {} + + safer-buffer@2.1.2: {} + + sax@1.4.1: {} + + semver@7.7.2: {} + + sharp@0.33.5: + dependencies: + color: 4.2.3 + detect-libc: 2.0.4 + semver: 7.7.2 + optionalDependencies: + '@img/sharp-darwin-arm64': 0.33.5 + '@img/sharp-darwin-x64': 0.33.5 + '@img/sharp-libvips-darwin-arm64': 1.0.4 + '@img/sharp-libvips-darwin-x64': 1.0.4 + '@img/sharp-libvips-linux-arm': 1.0.5 + '@img/sharp-libvips-linux-arm64': 1.0.4 + '@img/sharp-libvips-linux-s390x': 1.0.4 + '@img/sharp-libvips-linux-x64': 1.0.4 + '@img/sharp-libvips-linuxmusl-arm64': 1.0.4 + '@img/sharp-libvips-linuxmusl-x64': 1.0.4 + '@img/sharp-linux-arm': 0.33.5 + '@img/sharp-linux-arm64': 0.33.5 + '@img/sharp-linux-s390x': 0.33.5 + '@img/sharp-linux-x64': 0.33.5 + '@img/sharp-linuxmusl-arm64': 0.33.5 + '@img/sharp-linuxmusl-x64': 0.33.5 + '@img/sharp-wasm32': 0.33.5 + '@img/sharp-win32-ia32': 0.33.5 + '@img/sharp-win32-x64': 0.33.5 + optional: true + + sharp@0.34.3: + dependencies: + color: 4.2.3 + detect-libc: 2.0.4 + semver: 7.7.2 + optionalDependencies: + '@img/sharp-darwin-arm64': 0.34.3 + '@img/sharp-darwin-x64': 0.34.3 + '@img/sharp-libvips-darwin-arm64': 1.2.0 + '@img/sharp-libvips-darwin-x64': 1.2.0 + '@img/sharp-libvips-linux-arm': 1.2.0 + '@img/sharp-libvips-linux-arm64': 1.2.0 + '@img/sharp-libvips-linux-ppc64': 1.2.0 + '@img/sharp-libvips-linux-s390x': 1.2.0 + '@img/sharp-libvips-linux-x64': 1.2.0 + '@img/sharp-libvips-linuxmusl-arm64': 1.2.0 + '@img/sharp-libvips-linuxmusl-x64': 1.2.0 + '@img/sharp-linux-arm': 0.34.3 + '@img/sharp-linux-arm64': 0.34.3 + '@img/sharp-linux-ppc64': 0.34.3 + '@img/sharp-linux-s390x': 0.34.3 + '@img/sharp-linux-x64': 0.34.3 + '@img/sharp-linuxmusl-arm64': 0.34.3 + '@img/sharp-linuxmusl-x64': 0.34.3 + '@img/sharp-wasm32': 0.34.3 + '@img/sharp-win32-arm64': 0.34.3 + '@img/sharp-win32-ia32': 0.34.3 + '@img/sharp-win32-x64': 0.34.3 + + shiki@3.12.2: + dependencies: + '@shikijs/core': 3.12.2 + '@shikijs/engine-javascript': 3.12.2 + '@shikijs/engine-oniguruma': 3.12.2 + '@shikijs/langs': 3.12.2 + '@shikijs/themes': 3.12.2 + '@shikijs/types': 3.12.2 + '@shikijs/vscode-textmate': 10.0.2 + '@types/hast': 3.0.4 + + simple-swizzle@0.2.2: + dependencies: + is-arrayish: 0.3.2 + + sisteransi@1.0.5: {} + + sitemap@8.0.0: + dependencies: + '@types/node': 17.0.45 + '@types/sax': 1.2.7 + arg: 5.0.2 + sax: 1.4.1 + + smartypants@0.2.2: {} + + smol-toml@1.4.2: {} + + source-map-js@1.2.1: {} + + source-map@0.7.6: {} + + space-separated-tokens@2.0.2: {} + + starlight-auto-sidebar@0.2.0(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))): + dependencies: + '@astrojs/starlight': 0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) + github-slugger: 2.0.0 + + starlight-github-alerts@0.1.0(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))): + dependencies: + '@astrojs/starlight': 0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) + unist-util-visit: 5.0.0 + + starlight-image-zoom@0.13.0(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))): + dependencies: + '@astrojs/starlight': 0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) + mdast-util-mdx-jsx: 3.2.0 + rehype-raw: 7.0.0 + unist-util-visit: 5.0.0 + unist-util-visit-parents: 6.0.1 + transitivePeerDependencies: + - supports-color + + starlight-links-validator@0.18.0(@astrojs/starlight@0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1))): + dependencies: + '@astrojs/starlight': 0.35.2(astro@5.13.6(@types/node@24.3.1)(rollup@4.50.1)(typescript@5.9.2)(yaml@2.8.1)) + '@types/picomatch': 3.0.2 + github-slugger: 2.0.0 + hast-util-from-html: 2.0.3 + hast-util-has-property: 3.0.0 + is-absolute-url: 4.0.1 + kleur: 4.1.5 + mdast-util-mdx-jsx: 3.2.0 + mdast-util-to-string: 4.0.0 + picomatch: 4.0.3 + terminal-link: 5.0.0 + unist-util-visit: 5.0.0 + transitivePeerDependencies: + - supports-color + + stream-replace-string@2.0.0: {} + + string-width@4.2.3: + dependencies: + emoji-regex: 8.0.0 + is-fullwidth-code-point: 3.0.0 + strip-ansi: 6.0.1 + + string-width@7.2.0: + dependencies: + emoji-regex: 10.5.0 + get-east-asian-width: 1.3.1 + strip-ansi: 7.1.2 + + stringify-entities@4.0.4: + dependencies: + character-entities-html4: 2.1.0 + character-entities-legacy: 3.0.0 + + strip-ansi@6.0.1: + dependencies: + ansi-regex: 5.0.1 + + strip-ansi@7.1.2: + dependencies: + ansi-regex: 6.2.2 + + style-to-js@1.1.17: + dependencies: + style-to-object: 1.0.9 + + style-to-object@1.0.9: + dependencies: + inline-style-parser: 0.2.4 + + stylis@4.3.6: {} + + supports-color@10.2.2: {} + + supports-hyperlinks@4.2.0: + dependencies: + has-flag: 5.0.1 + supports-color: 10.2.2 + + terminal-link@5.0.0: + dependencies: + ansi-escapes: 7.1.0 + supports-hyperlinks: 4.2.0 + + tiny-inflate@1.0.3: {} + + tinyexec@0.3.2: {} + + tinyexec@1.0.1: {} + + tinyglobby@0.2.15: + dependencies: + fdir: 6.5.0(picomatch@4.0.3) + picomatch: 4.0.3 + + tr46@0.0.3: {} + + trim-lines@3.0.1: {} + + trough@2.2.0: {} + + ts-dedent@2.2.0: {} + + tsconfck@3.1.6(typescript@5.9.2): + optionalDependencies: + typescript: 5.9.2 + + tslib@2.8.1: {} + + type-fest@4.41.0: {} + + typescript@5.9.2: {} + + ufo@1.6.1: {} + + ultrahtml@1.6.0: {} + + uncrypto@0.1.3: {} + + undici-types@7.10.0: {} + + unicode-properties@1.4.1: + dependencies: + base64-js: 1.5.1 + unicode-trie: 2.0.0 + + unicode-trie@2.0.0: + dependencies: + pako: 0.2.9 + tiny-inflate: 1.0.3 + + unified@11.0.5: + dependencies: + '@types/unist': 3.0.3 + bail: 2.0.2 + devlop: 1.1.0 + extend: 3.0.2 + is-plain-obj: 4.1.0 + trough: 2.2.0 + vfile: 6.0.3 + + unifont@0.5.2: + dependencies: + css-tree: 3.1.0 + ofetch: 1.4.1 + ohash: 2.0.11 + + unist-util-find-after@5.0.0: + dependencies: + '@types/unist': 3.0.3 + unist-util-is: 6.0.0 + + unist-util-is@6.0.0: + dependencies: + '@types/unist': 3.0.3 + + unist-util-modify-children@4.0.0: + dependencies: + '@types/unist': 3.0.3 + array-iterate: 2.0.1 + + unist-util-position-from-estree@2.0.0: + dependencies: + '@types/unist': 3.0.3 + + unist-util-position@5.0.0: + dependencies: + '@types/unist': 3.0.3 + + unist-util-remove-position@5.0.0: + dependencies: + '@types/unist': 3.0.3 + unist-util-visit: 5.0.0 + + unist-util-stringify-position@4.0.0: + dependencies: + '@types/unist': 3.0.3 + + unist-util-visit-children@3.0.0: + dependencies: + '@types/unist': 3.0.3 + + unist-util-visit-parents@6.0.1: + dependencies: + '@types/unist': 3.0.3 + unist-util-is: 6.0.0 + + unist-util-visit@5.0.0: + dependencies: + '@types/unist': 3.0.3 + unist-util-is: 6.0.0 + unist-util-visit-parents: 6.0.1 + + unstorage@1.17.1: + dependencies: + anymatch: 3.1.3 + chokidar: 4.0.3 + destr: 2.0.5 + h3: 1.15.4 + lru-cache: 10.4.3 + node-fetch-native: 1.6.7 + ofetch: 1.4.1 + ufo: 1.6.1 + + util-deprecate@1.0.2: {} + + uuid@11.1.0: {} + + vfile-location@5.0.3: + dependencies: + '@types/unist': 3.0.3 + vfile: 6.0.3 + + vfile-message@4.0.3: + dependencies: + '@types/unist': 3.0.3 + unist-util-stringify-position: 4.0.0 + + vfile@6.0.3: + dependencies: + '@types/unist': 3.0.3 + vfile-message: 4.0.3 + + vite@6.3.6(@types/node@24.3.1)(yaml@2.8.1): + dependencies: + esbuild: 0.25.9 + fdir: 6.5.0(picomatch@4.0.3) + picomatch: 4.0.3 + postcss: 8.5.6 + rollup: 4.50.1 + tinyglobby: 0.2.15 + optionalDependencies: + '@types/node': 24.3.1 + fsevents: 2.3.3 + yaml: 2.8.1 + + vitefu@1.1.1(vite@6.3.6(@types/node@24.3.1)(yaml@2.8.1)): + optionalDependencies: + vite: 6.3.6(@types/node@24.3.1)(yaml@2.8.1) + + vscode-jsonrpc@8.2.0: {} + + vscode-languageserver-protocol@3.17.5: + dependencies: + vscode-jsonrpc: 8.2.0 + vscode-languageserver-types: 3.17.5 + + vscode-languageserver-textdocument@1.0.12: {} + + vscode-languageserver-types@3.17.5: {} + + vscode-languageserver@9.0.1: + dependencies: + vscode-languageserver-protocol: 3.17.5 + + vscode-uri@3.0.8: {} + + web-namespaces@2.0.1: {} + + webidl-conversions@3.0.1: {} + + whatwg-url@5.0.0: + dependencies: + tr46: 0.0.3 + webidl-conversions: 3.0.1 + + which-pm-runs@1.1.0: {} + + widest-line@5.0.0: + dependencies: + string-width: 7.2.0 + + wrap-ansi@9.0.2: + dependencies: + ansi-styles: 6.2.3 + string-width: 7.2.0 + strip-ansi: 7.1.2 + + xxhash-wasm@1.1.0: {} + + yaml@2.8.1: {} + + yargs-parser@21.1.1: {} + + yocto-queue@1.2.1: {} + + yocto-spinner@0.2.3: + dependencies: + yoctocolors: 2.1.2 + + yoctocolors@2.1.2: {} + + zod-to-json-schema@3.24.6(zod@3.25.76): + dependencies: + zod: 3.25.76 + + zod-to-ts@1.2.0(typescript@5.9.2)(zod@3.25.76): + dependencies: + typescript: 5.9.2 + zod: 3.25.76 + + zod@3.25.76: {} + + zwitch@2.0.4: {} diff --git a/docs/pnpm-workspace.yaml b/docs/pnpm-workspace.yaml new file mode 100644 index 0000000000..d0b7dbe229 --- /dev/null +++ b/docs/pnpm-workspace.yaml @@ -0,0 +1,3 @@ +onlyBuiltDependencies: + - esbuild + - sharp diff --git a/docs/public/CNAME b/docs/public/CNAME new file mode 100644 index 0000000000..3fc4112a95 --- /dev/null +++ b/docs/public/CNAME @@ -0,0 +1 @@ +userstyles.catppuccin.com \ No newline at end of file diff --git a/docs/public/favicon.png b/docs/public/favicon.png new file mode 100644 index 0000000000..4491430bb8 Binary files /dev/null and b/docs/public/favicon.png differ diff --git a/docs/public/lib b/docs/public/lib new file mode 120000 index 0000000000..58677ddb4e --- /dev/null +++ b/docs/public/lib @@ -0,0 +1 @@ +../../lib \ No newline at end of file diff --git a/docs/public/pepperjack-dark.png b/docs/public/pepperjack-dark.png new file mode 100644 index 0000000000..7d29e39669 Binary files /dev/null and b/docs/public/pepperjack-dark.png differ diff --git a/docs/public/pepperjack-light.png b/docs/public/pepperjack-light.png new file mode 100644 index 0000000000..13086e386a Binary files /dev/null and b/docs/public/pepperjack-light.png differ diff --git a/docs/src/assets/example.org-original.webp b/docs/src/assets/example.org-original.webp new file mode 100644 index 0000000000..0488779750 Binary files /dev/null and b/docs/src/assets/example.org-original.webp differ diff --git a/docs/src/assets/example.org-themed.webp b/docs/src/assets/example.org-themed.webp new file mode 100644 index 0000000000..1a704fc66e Binary files /dev/null and b/docs/src/assets/example.org-themed.webp differ diff --git a/docs/src/assets/preview.webp b/docs/src/assets/preview.webp new file mode 100644 index 0000000000..8414a34c65 Binary files /dev/null and b/docs/src/assets/preview.webp differ diff --git a/docs/src/content.config.ts b/docs/src/content.config.ts new file mode 100644 index 0000000000..6cb5eac864 --- /dev/null +++ b/docs/src/content.config.ts @@ -0,0 +1,13 @@ +import { defineCollection } from "astro:content"; +import { docsLoader } from "@astrojs/starlight/loaders"; +import { docsSchema } from "@astrojs/starlight/schema"; +import { autoSidebarLoader } from "starlight-auto-sidebar/loader"; +import { autoSidebarSchema } from "starlight-auto-sidebar/schema"; + +export const collections = { + docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }), + autoSidebar: defineCollection({ + loader: autoSidebarLoader(), + schema: autoSidebarSchema(), + }), +}; diff --git a/docs/src/content/docs/contributing/creating-userstyles.mdx b/docs/src/content/docs/contributing/creating-userstyles.mdx new file mode 100644 index 0000000000..91d7617c5d --- /dev/null +++ b/docs/src/content/docs/contributing/creating-userstyles.mdx @@ -0,0 +1,26 @@ +--- +title: Creating Userstyles +description: Overview of the userstyle creation process. +sidebar: + order: 2 +--- + +import { Steps } from '@astrojs/starlight/components'; + +> [!IMPORTANT] +> Websites should be popular or otherwise commonly known by members of the Catppuccin community; personal or niche sites may not meet the criteria. If you are unsure if a website qualifies, consider creating a [discussion](https://github.com/catppuccin/catppuccin/discussions/new?category=port-requests) before submitting an initial PR. + +To create a userstyle, follow the instructions below. If you are unsure how to theme something, see our [Guides](/contributing/guides/). If you run into any difficulties or have any questions, feel free to join the [Catppuccin Discord server](https://discord.com/servers/catppuccin-907385605422448742) and find us in the #userstyles channel! + + + +1. Fork the `catppuccin/userstyles` repository. +2. Create a new branch under the name `feat/`, (e.g. `feat/nixos-search` instead of NixOS Search). +3. Create a new folder `styles/`. The name must be `lower-kebab-case`. +4. Copy the contents of the [`template`](https://github.com/catppuccin/userstyles/tree/main/template) folder into `styles/`. + - **The template uses [LESS](https://lesscss.org/#overview), a preprocessor for Stylus. Please do not change this as we will only accept userstyles based on the template.** +5. [Write the userstyle](/contributing/tutorials/writing-a-userstyle/). +6. [Edit the `userstyles.yml` file](/contributing/userstylesyml/) and enter the details of your port. +7. Raise a [pull request](https://github.com/catppuccin/userstyles/compare), making sure to read and fill out the template properly. The title of your pull request should follow the format of `feat(): init`. + + diff --git a/docs/src/content/docs/contributing/guides/_meta.yml b/docs/src/content/docs/contributing/guides/_meta.yml new file mode 100644 index 0000000000..01a0a67f19 --- /dev/null +++ b/docs/src/content/docs/contributing/guides/_meta.yml @@ -0,0 +1,2 @@ +label: How can I theme ...? +order: 5 diff --git a/docs/src/content/docs/contributing/guides/images-and-svgs.md b/docs/src/content/docs/contributing/guides/images-and-svgs.md new file mode 100644 index 0000000000..87225f1f1e --- /dev/null +++ b/docs/src/content/docs/contributing/guides/images-and-svgs.md @@ -0,0 +1,116 @@ +--- +title: Images and SVGs +description: Guide for theming images and SVGs in userstyles. +sidebar: + order: 2 +--- + +## Monochrome `` elements + +If you encounter an `` element with single colored contents, the easiest way to theme it is to apply a CSS color filter. The `@-filter` filters can be used to theme Catppuccin colours. + +For example: + +```css +img.twitter-icon { + filter: @blue-filter; +} +``` + +## SVGs as `background-image`s + +Websites will sometimes use the `background-image` CSS property to apply an SVG, often for icons. The value of the `background-image` is usually either a URL to an external SVG resource, such as `url("https://example.org/assets/xyz.svg")`, or an inlined SVG [data URL](https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes/data), like `url("data:image/svg+xml,%3Csvg%3E...%3C/svg%3E");`. + +### External SVG URL + +Below is an example of what a rule for an external SVG URL could look like. + +```css +.xyz { + background-image: url("https://example.org/assets/xyz.svg"); +} +``` + +To obtain the contents of this remote SVG resource, you can either: + +- Visit the URL of the SVG, right click and select **View Page Source**, and copy its contents from the resulting page. +- Run `curl "https://example.org/assets/xyz.svg"` and copy the contents from the terminal output. + +> [!TIP] +> On macOS, copy the SVG contents after `curl`-ing automatically with `| pbcopy`: `curl "https://example.org/assets/xyz.svg" | pbcopy`. + +### Inlined SVG data URL + +Below is an example of what a rule for an inlined SVG data URL could look like. + +```css +.xyz { + background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22red%22%20d%3D%22%22/%3E%3C/svg%3E"); +} +``` + +The text after `data:image/svg+xml,` is URL encoded. To get the contents of the SVG, the string needs to be URL decoded. + +There are two ways to do this: + +- Using the JavaScript built-in function `decodeURIComponent`. You can run `node -e 'console.log(decodeURIComponent("..."))'`, with the URL encoded SVG contents placed between the double quotes in place of `...`. +- Use an online tool such as [urldecoder.io](https://www.urldecoder.io/). + +--- + +Once you have obtained the SVG contents, paste them in between the single quotes of `escape('')` in the following template: + + +```less +.xyz { + @svg: escape(''); + background-image: url("data:image/svg+xml,@{svg}"); +} +``` + +> [!NOTE] +> Ensure `escape()` uses single quotes, not double quotes, before pasting the SVG contents — `escape('')`, not `escape("")`. + +> [!WARNING] +> The error `Invalid % without number` appears until an interpolated color is added in the SVG contents. This is covered in the following section. + +Now, replace any colors in the SVG with their respective Catppuccin variants. For example, take the following SVG icon for Twitter: + +```xml + +``` + +There is only one color used, `fill="#1D9BF0"`. That hex code is a shade of blue, so we can replace it with the `@blue` color using the `fill="@{}"` syntax ([variable interpolation](https://lesscss.org/features/#variables-feature-variable-interpolation)). + +```less +.twitter-icon { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); +} +``` + +## External SVGs through `` elements + +Theming an external SVG referenced from an `` element is similar. However, the `content` property is used instead of `background-image` to replace the image. + +As with the previous tip for `background-image`, only the SVG inside of the `escape('')` needs to be updated. + +```less +img.xyz { + @svg: escape("..."); + content: url("data:image/svg+xml,@{svg}"); +} +``` + +Again, following the example of theming a Twitter logo: + +```less +img.twitter-icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); +} +``` diff --git a/docs/src/content/docs/contributing/guides/index.md b/docs/src/content/docs/contributing/guides/index.md new file mode 100644 index 0000000000..2d6cc8797c --- /dev/null +++ b/docs/src/content/docs/contributing/guides/index.md @@ -0,0 +1,9 @@ +--- +title: How can I theme ...? +description: Guides for common userstyle theming techniques. +sidebar: + order: 1 + label: Overview +--- + +In this guide section, you can find out how to [theme images and SVGs](/contributing/guides/images-and-svgs/), [theme syntax highlighting](/contributing/guides/syntax-highlighting/), and [obtain raw color values](/contributing/guides/raw-color-values/). diff --git a/docs/src/content/docs/contributing/guides/raw-color-values.md b/docs/src/content/docs/contributing/guides/raw-color-values.md new file mode 100644 index 0000000000..2b4e9a616a --- /dev/null +++ b/docs/src/content/docs/contributing/guides/raw-color-values.md @@ -0,0 +1,14 @@ +--- +title: Raw color values +description: Guide for obtaining raw color values of palette colors in RGB or HSL formats. +sidebar: + order: 4 +--- + +## Obtaining RGB values + +See [`#lib.rgbify()`](/contributing/reference/libraries/standard/v/v1#librgbify). + +## Obtaining HSL values + +See [`#lib.hslify()`](/contributing/reference/libraries/standard/v/v1#libhslify). diff --git a/docs/src/content/docs/contributing/guides/syntax-highlighting.md b/docs/src/content/docs/contributing/guides/syntax-highlighting.md new file mode 100644 index 0000000000..c33c5ceafe --- /dev/null +++ b/docs/src/content/docs/contributing/guides/syntax-highlighting.md @@ -0,0 +1,52 @@ +--- +title: Syntax Highlighting +description: Guide for theming syntax highlighting in userstyles. +sidebar: + order: 3 +--- + +If a website uses [highlight.js](https://highlightjs.org/), [Pygments](https://pygments.org/), [Prism.js](https://prismjs.com/), or [Chroma](https://github.com/alecthomas/chroma) for syntax highlighting, follow the steps for the syntax higlighter in use below. First though, you'll need to add the following line near the top of the `#catppuccin` mixin, under `#lib.palette();`/`#lib.defaults();`, to include the necessary CSS variables: + +```css +#lib.css-variables(); +``` + +## highlight.js + +After including the CSS variables with the mixin specified above, add the following line at the top of the userstyle, beneath the `@-moz-document` line. + +```css +@import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); +``` + +## Pygments + +After including the CSS variables with the mixin specified above, add the following line at the top of the userstyle, beneath the `@-moz-document` line. + +```css +@import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); +``` + +## Prism.js + +After including the CSS variables with the mixin specified above, add the following line at the top of the userstyle, beneath the `@-moz-document` line. + +```css +@import url("https://prismjs.catppuccin.com/variables.important.css"); +``` + +## Chroma + +After including the CSS variables with the mixin specified above, add the following lines at the top of the userstyle, beneath the `@-moz-document` line. + +```css +@import (css) + url("https://chroma.catppuccin.com/@{lightFlavor}-chroma-style.css") + (prefers-color-scheme: light); +@import (css) + url("https://chroma.catppuccin.com/@{darkFlavor}-chroma-style.css") + (prefers-color-scheme: dark); +``` + +> [!IMPORTANT] +> The above snippet for Chroma only works properly for userstyles that use browser/system media queries to apply the `#catppuccin` mixin. If a userstyle targets a specific attribute/element on the website to apply the mixin, this will not work all of the time. diff --git a/docs/src/content/docs/contributing/index.md b/docs/src/content/docs/contributing/index.md new file mode 100644 index 0000000000..bc6ec9715c --- /dev/null +++ b/docs/src/content/docs/contributing/index.md @@ -0,0 +1,65 @@ +--- +title: Contributing +description: Contribution guidelines for the Catppuccin Userstyles project. +sidebar: + label: Overview + order: 1 +--- + +If it is your first time contributing to a project on GitHub, please see the popular [first-contributions](https://github.com/firstcontributions/first-contributions) repository. This will give you hands-on experience with the features of GitHub required to make a contribution. As always, feel free to join our [Discord](https://discord.com/servers/catppuccin-907385605422448742) to ask any questions and clarify your understanding, we are more than happy to help! + +## Development environment + +This repository uses [Deno](https://deno.com/) extensively for linting, formatting, and automation. It is highly recommended to set up Deno locally to improve your workflow — see ["Installation" - Deno Docs](https://docs.deno.com/runtime/manual/getting_started/installation). + +With Deno installed locally, you can lint all userstyles with `deno task lint`, and if any issues are found, `deno task lint:fix` to automatically apply fixes in some cases. For quicker linting, specify the userstyle to lint with `deno task lint my-userstyle` (or equivalently using the relative path/autocomplete, `deno task lint styles/my-userstyle`). + +It's helpful to maintainers to run formatting with `deno fmt` before opening a pull request, though not strictly necessary. + +> [!IMPORTANT] +> `deno task lint` is not to be confused with Deno's built-in linter, `deno lint`. `deno lint` only checks our TypeScript files in `scripts/`, whereas `deno task lint` is the custom Deno task for linting userstyles that you should be using. + +To edit and/or create userstyles, [set up live reloading](/contributing/tips-and-tricks/hot-reloading/) so that local changes (edits made from your editor of choice) can be automatically reloaded through Stylus. + +## Versioning + +You may notice that userstyles contain a line in the format of `@version 2000.01.01` in the UserCSS metadata section at the top. **This line should not be edited by hand**. We use an automated versioning system that updates the version value (based on [Calendar Versioning](https://calver.org/)) when a change is made to a userstyle, after merging the pull request. + +## Authoring userstyles + +### Assessing websites + +Some websites are, unfortunately, not ideal for userstyles. Websites with auto-generated classes — think `aeN WR beA nH oy8Mbf`, `cfb2a888`, and so on — lead to unreadable and unmaintainable userstyles that break quickly and are difficult to update/maintain. Such userstyles, if created, will also take longer to review and merge. + +On the other hand, if a website uses CSS variables — see below — it is a great candidate for userstyling. + +### CSS variables + +While writing a userstyle, you may come across [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) (or "custom properties"). We prefer that these variables are used if present, rather than theming individual elements. As the website typically uses these variables itself, it saves a lot of work in theming and maintaining the userstyle. + +### Opinionated changes + +When writing or updating a userstyle, it is important to keep in mind that different users have different preferences. To avoid lengthy discussion over user interface aesthetics, we have a set of rules for what a userstyle may include; importantly, **changes to font, layout, padding, margin, display, and in general anything besides color tweaks are prohibited.** + +### Pull requests + +- Create a [topic branch](https://git-scm.com/book/en/v2/Git-Branching-Branching-Workflows#_topic_branch) on your fork for your specific PR. +- Catppuccin uses the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) standard for creating explicit and meaningful commit messages. This repository requires pull request _titles_ to be in the conventional commit format, however we do not require it for individual commits within a pull request. +- It's better to have a draft pull request than no pull request at all. Having a draft lets others know that a userstyle is being worked on, and gives the opportunity for people to try it out ahead of time (if they really want it themed!). + +### Contribution review process + +```mermaid +graph TD; + A[New userstyle]; + B[Other improvements]; + A --> C[Review by userstyles staff]; + B --> D[Review by maintainer]; + C --> E{Feedback}; + D --> F{Feedback}; + E -->|Changes made| E; + F -->|Changes made| F; + E -->|Approved by userstyles staff| K; + F -->|Approved by maintainer or userstyles staff| L[Merged by maintainer]; + K[Review period] --> M[Merged by userstyles staff]; +``` diff --git a/docs/src/content/docs/contributing/reference/_meta.yml b/docs/src/content/docs/contributing/reference/_meta.yml new file mode 100644 index 0000000000..7d9f637733 --- /dev/null +++ b/docs/src/content/docs/contributing/reference/_meta.yml @@ -0,0 +1,2 @@ +label: Reference +order: 7 diff --git a/docs/src/content/docs/contributing/reference/libraries/_meta.yml b/docs/src/content/docs/contributing/reference/libraries/_meta.yml new file mode 100644 index 0000000000..fc171f4dcc --- /dev/null +++ b/docs/src/content/docs/contributing/reference/libraries/_meta.yml @@ -0,0 +1 @@ +label: Libraries diff --git a/docs/src/content/docs/contributing/reference/libraries/modules/_meta.yml b/docs/src/content/docs/contributing/reference/libraries/modules/_meta.yml new file mode 100644 index 0000000000..13f8cf4d33 --- /dev/null +++ b/docs/src/content/docs/contributing/reference/libraries/modules/_meta.yml @@ -0,0 +1,4 @@ +label: Modules +badge: + text: Beta + variant: caution diff --git a/docs/src/content/docs/contributing/reference/libraries/modules/index.md b/docs/src/content/docs/contributing/reference/libraries/modules/index.md new file mode 100644 index 0000000000..dfb2425132 --- /dev/null +++ b/docs/src/content/docs/contributing/reference/libraries/modules/index.md @@ -0,0 +1,28 @@ +--- +title: Library Modules +description: Reference for library modules. +sidebar: + label: Overview +--- + +Library modules consist of collections of mixins which target design systems or commonly used libraries. + +They follow a standard structure and should be built to be modular and reusable across several userstyles. + +## Structure + +The [standard library](/contributing/reference/libraries/standard/) is a good reference as to how libraries can be structured. + +All libraries are in lib/ with subdirectories per library name, and versioned files (e.g., `v1.less`, `v2.less`, etc). + +They must have a top level mixin in the format `#__libraryname`. All constants and variables should be under a nested `.base` mixin. The nested mixin is used like `#__libraryname.base()` after all other standard library statements. + +Other mixins and constants may be included, but they must be under the top level mixin for scoping purposes. + +## Creation + +Identify what your library module will achieve. Are you targeting a design system, framework, or a library? + +If a design system or framework, is it specific to one userstyle or reusable across multiple? What are the popularity metrics of it? Is the increased maintenance workload worth the benefit it provides in DRY (Don't Repeat Yourself)? + +If the target is a web library, check if there is an [existing port](http://catppuccin.com/ports) for it. The methods outlined in [Syntax Highlighting](/contributing/guides/syntax-highlighting/) may be used to import the theme for the library in question. Some ports may need changes upstreamed to work for userstyles purposes; in these cases, please coordinate with userstyles staff to determine the most suitable approach. diff --git a/docs/src/content/docs/contributing/reference/libraries/standard/_meta.yml b/docs/src/content/docs/contributing/reference/libraries/standard/_meta.yml new file mode 100644 index 0000000000..01f8bc3a01 --- /dev/null +++ b/docs/src/content/docs/contributing/reference/libraries/standard/_meta.yml @@ -0,0 +1,2 @@ +label: Standard Library +order: 1 diff --git a/docs/src/content/docs/contributing/reference/libraries/standard/index.mdx b/docs/src/content/docs/contributing/reference/libraries/standard/index.mdx new file mode 100644 index 0000000000..429a996804 --- /dev/null +++ b/docs/src/content/docs/contributing/reference/libraries/standard/index.mdx @@ -0,0 +1,36 @@ +--- +title: Overview +description: Reference to using the standard library. +sidebar: + order: 1 +--- + +import { Badge } from '@astrojs/starlight/components'; + + +| Version | Documentation | Source Code | +| -------------------------------------------------------------------------------- | -------------------------------------------------- | -------------- | +| v1 | [/v/v1](/contributing/reference/libraries/standard/v/v1/) | [`lib/std/v1.less`](https://github.com/catppuccin/userstyles/blob/main/lib/std/v1.less) | + +--- + +The standard library is a collection of mixins to deduplicate and simplify code in userstyles. It is imported in every userstyle, alongside with other [library modules](/contributing/reference/libraries/modules/) if applicable. + +## Importing + +```less +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; +``` + +## Changelog + +### v1 + +v1 is the first versioned release of the standard library. To migrate from "v0", update your standard library import URLs at the top of the userstyle: + +```diff +-@import "https://userstyles.catppuccin.com/lib/lib.less"; ++@import "https://userstyles.catppuccin.com/lib/std/v1.less"; +``` + +This release contains no API changes and is safe to upgrade to for all userstyles. diff --git a/docs/src/content/docs/contributing/reference/libraries/standard/v/_meta.yml b/docs/src/content/docs/contributing/reference/libraries/standard/v/_meta.yml new file mode 100644 index 0000000000..cf36cd23e6 --- /dev/null +++ b/docs/src/content/docs/contributing/reference/libraries/standard/v/_meta.yml @@ -0,0 +1 @@ +label: Versions diff --git a/docs/src/content/docs/contributing/reference/libraries/standard/v/v1.mdx b/docs/src/content/docs/contributing/reference/libraries/standard/v/v1.mdx new file mode 100644 index 0000000000..7ab1f3b430 --- /dev/null +++ b/docs/src/content/docs/contributing/reference/libraries/standard/v/v1.mdx @@ -0,0 +1,50 @@ +--- +title: v1 +description: Reference to using the v1 version of the standard library. +sidebar: + badge: + text: Latest + variant: success +--- + +## Usage + +```less +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; +``` + +## API + +The standard library exposes a `#lib` namespace. + +### `#lib.palette()` + +The standard library palette mixin provides Less variable definitions for hex colors and CSS filters from the palette. Call the mixin at the top of the `#catppuccin` mixin to inject the variables into the userstyle context. This is used in all userstyles. + +### `#lib.defaults()` + +The standard library defaults mixin provides a set of default styles for text selection and native/input elements. This is generally applied in all userstyles, with some exceptions. + +### `#lib.rgbify()` + +The standard library `rgbify` mixin is a utility mixin for extracting the color in `r, g, b` format from a palette variable. + +#### Examples + +```less +--my-variable-rgb: #lib.rgbify(@base) []; // -> 30, 30, 46 +``` + +### `#lib.hslify()` + +The standard library `hslify` mixin is a utility mixin for extracting the color in `h, s, l` format from a palette variable. + +#### Examples + +```less +--my-variable-hsl: #lib.hslify(@base) []; // -> 240, 21.052631578947366%, 14.901960784313726% +``` + +### `#lib.css-variables()` + +The standard library CSS variables mixin provides the palette variables in [CSS variable/custom property](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) form. This is commonly used alongside [syntax highlighting imports](/contributing/guides/syntax-highlighting/). diff --git a/docs/src/content/docs/contributing/tips-and-tricks/_meta.yml b/docs/src/content/docs/contributing/tips-and-tricks/_meta.yml new file mode 100644 index 0000000000..c564d795c6 --- /dev/null +++ b/docs/src/content/docs/contributing/tips-and-tricks/_meta.yml @@ -0,0 +1,2 @@ +label: Tips and Tricks +order: 6 diff --git a/docs/src/content/docs/contributing/tips-and-tricks/hot-reloading.md b/docs/src/content/docs/contributing/tips-and-tricks/hot-reloading.md new file mode 100644 index 0000000000..98453d503c --- /dev/null +++ b/docs/src/content/docs/contributing/tips-and-tricks/hot-reloading.md @@ -0,0 +1,8 @@ +--- +title: Using hot reloading in Stylus +description: See changes from your IDE in real time with Stylus's "Live reloading" feature. +sidebar: + order: 2 +--- + +See ["Initial installation and live reload" - Stylus Wiki](https://github.com/openstyles/stylus/wiki/Writing-UserCSS#live-reload-on-the-fly-previewingwhen-developing-styles-locally-in-another-editoride). diff --git a/docs/src/content/docs/contributing/tips-and-tricks/inspect-hard-to-grab-elements.md b/docs/src/content/docs/contributing/tips-and-tricks/inspect-hard-to-grab-elements.md new file mode 100644 index 0000000000..0c04936695 --- /dev/null +++ b/docs/src/content/docs/contributing/tips-and-tricks/inspect-hard-to-grab-elements.md @@ -0,0 +1,18 @@ +--- +title: Inspect hard to grab elements +description: Useful tip for inspecting elements that are hard to debug. +sidebar: + order: 1 +--- + +Paste the following snippet into your browser console, then trigger the event. Adjust the delay (in milliseconds) as needed. + +```js +setTimeout(function () { + debugger; +}, 3000); +``` + +![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2017/02/debugger.gif?ssl=1) + +GIF via ["Set a Timed Debugger To Web Inspect Hard-To-Grab Elements" - CSS Tricks](https://css-tricks.com/set-timed-debugger-web-inspect-hard-grab-elements/). diff --git a/docs/src/content/docs/contributing/tutorials/_meta.yml b/docs/src/content/docs/contributing/tutorials/_meta.yml new file mode 100644 index 0000000000..64aa9ab7d2 --- /dev/null +++ b/docs/src/content/docs/contributing/tutorials/_meta.yml @@ -0,0 +1,2 @@ +label: Tutorials +order: 4 diff --git a/docs/src/content/docs/contributing/tutorials/writing-a-userstyle.md b/docs/src/content/docs/contributing/tutorials/writing-a-userstyle.md new file mode 100644 index 0000000000..458308b98a --- /dev/null +++ b/docs/src/content/docs/contributing/tutorials/writing-a-userstyle.md @@ -0,0 +1,167 @@ +--- +title: Writing a userstyle +description: Beginner-friendly walkthrough of creating a userstyle! +sidebar: + order: 1 +--- + +## Prerequisites + +- [Stylus](https://github.com/openstyles/stylus) ([Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/) / [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) extension). +- A website to theme! + +Assuming you have completed steps 1-4 of [Creating Userstyles](/contributing/creating-userstyles/), you should have a new `catppuccin.user.less` file under the `styles//` directory. Follow along in that `catppuccin.user.less` file as we write an example userstyle for [example.org](http://example.org/). + +## Usercss Metadata + +Start by filling out the "metadata block" at the very top of the template. Replace `` with the name of the website you are porting, and please ensure it is capitalized when needed. For `example.org`, it looks like this: + +```less +/* ==UserStyle== +@name example.org Catppuccin +@namespace github.com/catppuccin/userstyles/styles/example.org +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/example.org +@version 2000.01.01 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/example.org/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aexample.org +@description Soothing pastel theme for example.org +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire*", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ +``` + +The rest of the metadata block details the preprocessor and the options of the userstyle. This won't need to be changed. For more information, see ["Usercss Metadata" - Stylus Wiki](https://github.com/openstyles/stylus/wiki/Writing-UserCSS#usercss-metadata). + +## `@-moz-document` + +To tell Stylus which website(s) to apply this userstyle on, replace `` with the domain of your port. For `example.org`, it looks like this: + +```less +@-moz-document domain("example.org") { +``` + +> [!NOTE] +> While `domain()` works for most cases, you may need to use [`regexp()`](https://github.com/openstyles/stylus/wiki/Writing-styles#regexp) for websites with more complex URLs. For example: +> +> ```less +> @-moz-document regexp("http://example.(com|net|org|edu)/") { +> ``` + +## Applying the theme + +This section of the template is about applying the user's light/dark flavors. Read the comments for this section in the template thoroughly and decide which of the two options works best for your port. `example.org` doesn't have a light/dark mode toggle, so we'll apply it based on the user's preferences. + +```less +:root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } +} +``` + +> [!TIP] +> If `example.org` _did_ use a toggle for changing the theme, we suggest using inspect element to try to observe what changes occur when the toggle is adjusted. Typically websites will have a class or attribute on the root `` element. Some examples from our userstyles include `[theme="dark"]`, `.dark`, `.theme-dark`, etc. + +## The `#catppuccin` mixin + +> [!TIP] +> For more on how Less mixins work, see ["Mixins" - lesscss.org](https://lesscss.org/features/#mixins-feature) and ["A Comprehensive Introduction to Less: Mixins" - SitePoint](https://www.sitepoint.com/a-comprehensive-introduction-to-less-mixins/). + +We'll refer to this next section of the template as the "`#catppuccin` mixin". The first part contains a series of mixin calls to include the Catppuccin palette and style defaults from the standard library: + +```less +#lib.palette(); +#lib.defaults(); +``` + +Following that, you will write the CSS rules for your port. Here is what it looks like for our `example.org` port: + +```less +#catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + body { + background-color: @base; + + & > div { + color: @text; + background-color: @surface0; + } + } + + a:link, + a:visited { + color: @accent; + } + + /* ... */ +} +``` + +## Putting it all together + +Combining all of the previous steps, we have a working userstyle! + +```less +/* ==UserStyle== +@name example.org Catppuccin +@namespace github.com/catppuccin/userstyles/styles/example.org +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/example.org +@version 2000.01.01 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/example.org/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aexample.org +@description Soothing pastel theme for example.org +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire*", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@-moz-document domain("example.org") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + body { + background-color: @base; + + & > div { + color: @text; + background-color: @surface0; + } + } + + a:link, + a:visited { + color: @accent; + } + } +} +``` + +| Original | Themed | +| -------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ![Screenshot of the default example.com page.](../../../../assets/example.org-original.webp) | ![Combined screenshots of the example.com page, with the page seen using the Catppuccin palette. Images for flavors Latte, Frappé, Macchiato and Mocha are displayed left to right.](../../../../assets/example.org-themed.webp) | + +Complete the rest of the steps in [Creating Userstyles](/contributing/creating-userstyles/), and then submit your PR! diff --git a/docs/src/content/docs/contributing/userstylesyml.mdx b/docs/src/content/docs/contributing/userstylesyml.mdx new file mode 100644 index 0000000000..d51a482a16 --- /dev/null +++ b/docs/src/content/docs/contributing/userstylesyml.mdx @@ -0,0 +1,100 @@ +--- +title: userstyles.yml +description: Guide for adding and removing userstyles and maintainers. +sidebar: + order: 3 +--- + +import { Steps } from "@astrojs/starlight/components"; + +The [`userstyles.yml`](https://github.com/catppuccin/userstyles/tree/main/scripts/userstyles.yml) file is responsible for tracking all userstyle and maintainer metadata. + +> [!TIP] +> The [`userstyles.schema.json`](https://github.com/catppuccin/userstyles/tree/main/scripts/userstyles.schema.json) file is the schema specification for `userstyles.yml`. Please refer to it for clarification. + +## Adding a new userstyle + + + +1. [Add yourself as a maintainer](#adding-yourself-as-a-maintainer). +2. Locate the `userstyles` section of `userstyles.yml` and add an entry for the new userstyle to the list in alphabetical order. + + You should make changes to everything wrapped in `<>` and remove the `<>` characters. If you need help with any of the fields, refer to other ports in the `userstyles.yml` file. If you would like extra guidance, you can ask for help in the pull request comments or join the [Catppuccin Discord server](https://discord.com/servers/catppuccin-907385605422448742). + + **Required Fields:** + + ```yaml + : + name: + link: + # Up to 3 categories are allowed, and having at least one is required. + # The first category is considered the "primary" category and impacts where the userstyle is listed on the website. + categories: [] + color: + current-maintainers: [*] + ``` + + **Optional Fields:** + + The `note` field allows for additional information about the userstyle to be included on the README. + + The `icon` field allows for specifying an icon from [Simple Icons](https://simpleicons.org/) for the userstyle. The icon's "slug" - which can be found by hovering over the icon's title and clicking the copy button - should be used. + + The `past-maintainers` field contains a list of maintainers who have maintained the port in the past. We encourage all maintainers to add/remove themselves from this list as they see fit. + + + +## Adding yourself as a maintainer + + + +1. Add a new entry to the end of the `collaborators` array in the `userstyles.yml` file. The entry should be made under your GitHub username. The following example shows a new entry for a user with the GitHub username "Pepperjack". + + ```yaml + collaborators: + - &Pepperjack Pepperjack + ``` + +2. Add your username to the `current-maintainers` array of the userstyle you wish to maintain. The following example shows the user "Pepperjack" added to the `example.org` userstyle. + + ```yaml del={7} ins={8} + userstyles: + example.org: + name: example.org + link: https://example.org + categories: [productivity] + color: text + current-maintainers: [] + current-maintainers: [*Pepperjack] + ``` + + If the change is accepted, you will receive an invitation to the `catppuccin` organization, and become a member of the [`userstyles-maintainers` team](https://github.com/orgs/catppuccin/teams/userstyles-maintainers). + + As a maintainer you will be expected to: + + - Review and merge PRs for the userstyle you maintain. + - Keep the userstyle up to date with the latest changes. If you no longer wish to maintain a userstyle, see [Removing yourself as a maintainer](#removing-yourself-as-a-maintainer). + - Follow our code of conduct and guidelines. + + + +## Removing yourself as a maintainer + +Remove your username from the `current-maintainers` array and add it to the `past-maintainers` array of the userstyle(s) you no longer want to maintain. + +The following example shows the user "Pepperjack" removed from the `example.org` userstyle: + +```yaml del={7} ins={8-9} +userstyles: + example.org: + name: example.org + link: https://example.org + categories: [productivity] + color: text + current-maintainers: [*Pepperjack] + current-maintainers: [] + past-maintainers: [*Pepperjack] +``` + +> [!NOTE] +> If you would prefer to not be listed as a past maintainer at all, you can remove yourself from `collaborators` array entirely. Upon removal, you will also be removed from the `userstyles-maintainers` GitHub team. diff --git a/docs/src/content/docs/getting-started/faq.md b/docs/src/content/docs/getting-started/faq.md new file mode 100644 index 0000000000..33f7e1f609 --- /dev/null +++ b/docs/src/content/docs/getting-started/faq.md @@ -0,0 +1,30 @@ +--- +title: FAQ +description: Answers to frequently asked questions about Catppuccin Userstyles. +sidebar: + order: 3 +--- + +## This userstyle is broken! + +Sorry to hear that! Please [open an issue](https://github.com/catppuccin/userstyles/issues/new?template=userstyle.yml). + +## Can I request a userstyle? + +To request a website to be themed, please create a [Port Request](https://github.com/catppuccin/catppuccin/discussions/new?category=port-requests) discussion on [catppuccin/catppuccin](https://github.com/catppuccin/catppuccin). + +## What version of my browser am I using? + +**To find your browser's version:** + +- Find your browser in the table below and follow the matching link to visit the page with the version. + - _Chrome/Chromium_: the version should be the first entry in the table that appears. There is a copy to clipboard button after the version number which you can use. + - _Firefox_: the version is under the "Application Basics" section in the row labeled "Version". + +| Browser | Version | +| -------------- | ------------------- | +| Chromium | `chrome://version/` | +| Firefox | `about:support` | +| Opera (GX) | `opera://about/` | +| Microsoft Edge | `edge://version/` | +| Arc | `arc://version/` | diff --git a/docs/src/content/docs/getting-started/introduction.mdx b/docs/src/content/docs/getting-started/introduction.mdx new file mode 100644 index 0000000000..413777d4cb --- /dev/null +++ b/docs/src/content/docs/getting-started/introduction.mdx @@ -0,0 +1,47 @@ +--- +title: Introduction +description: Introduction to Catppuccin Userstyles. +sidebar: + order: 1 +--- + +A curated collection of soothing pastel themes for your favorite websites and web applications. + +![Combined preview screenshot of four different websites with userstyles applied. In order of appearance, npm is shown in Latte, Wikipedia is shown in Frappé, Chess.com is shown in Macchiato, and GitHub is shown in Mocha.](../../../assets/preview.webp) + +## Getting started + +To get started using the catppuccin/userstyles collection, see [Usage](/getting-started/usage/). + +To get started contributing to catppuccin/userstyles, see [Contributing](/contributing/) and [Creating Userstyles](/contributing/creating-userstyles/). + +## Userstyles + +> [!NOTE] +> Userstyles labeled with the "❤️‍🩹" emoji lack maintainers, and may not work as intended. Contributions are still welcome and encouraged! + +import AnchorHeading from '@astrojs/starlight/components/AnchorHeading.astro'; +import { ports } from "../../../lib/ports"; +import { categories, sortedCategories, categoryMap } from "../../../lib/categories"; + +{sortedCategories.map((cat) => { + const category = categories[cat]; + return ( + <> + {category.emoji}{' '}{category.name} +

{category.description}

+ + + ); +})} diff --git a/docs/src/content/docs/getting-started/usage.mdx b/docs/src/content/docs/getting-started/usage.mdx new file mode 100644 index 0000000000..d9aa58d26e --- /dev/null +++ b/docs/src/content/docs/getting-started/usage.mdx @@ -0,0 +1,50 @@ +--- +title: Usage +description: Guide for how to use Catppuccin Userstyles. +sidebar: + order: 2 +--- + +import { Steps } from '@astrojs/starlight/components'; + +For both of the below installation methods, you will need the Stylus browser extension installed. Install [Stylus](https://github.com/openstyles/stylus) for [Chrome](https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) or [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/). If you use Chrome, make sure to enable "Allow access to file URLs" in the Chrome extension settings for Stylus (visit `chrome://extensions/?id=clngdbkpkpeebahjckkjfobafhncgmne`). + +> [!TIP] +> If you use [Dark Reader](https://darkreader.org/), make sure to disable the extension on websites with Catppuccin userstyles installed to avoid conflicts. + +## All Userstyles + + + +1. Download the compiled Stylus export file, containing our recommended Stylus settings and all userstyles preloaded: [`import.json` (download)](https://github.com/catppuccin/userstyles/releases/download/all-userstyles-export/import.json). + - Alternatively, if you want to further customize the `import.json` file - such as setting it so that all userstyles have the accent color `peach`, or the dark flavor is always `frappe` - you can download a customized Stylus export file from [@uncenter](https://github.com/uncenter)'s "[Catppuccin Userstyles Customizer](https://catppuccin-userstyles-customizer.uncenter.dev/)" instead. +2. Open the Stylus "manage" page. +3. On the sidebar panel, click the **Import** button in the **Backup** section, and select the downloaded file from step 1. + + + +## Individual Userstyles + + + +1. Enable CSP Patching from Stylus's **Settings** > **Advanced**. +2. Install your choice of [available userstyles](/getting-started/introduction/#userstyles) by clicking the **Stylus Install** badge in each README. + + + +# Configuration + +All userstyles come with three default configuration options; the light flavor, the dark flavor, and the accent color. Some userstyles may offer additional site-specific options as well. + +## Decentralized/self-hosted applications + +For decentralized or self-hosted applications, you can apply a theme to one or multiple instances across updates by following the instructions below. + + + +1. Open the Stylus "Manage" page. +2. Click on the userstyle's name in the list. +3. Click on **Style settings** in the left panel. +4. Enter the URL patterns for your instance(s) in the text box labeled **Custom included sites**. For example, to apply a userstyle to `example.org`, you would add a line with `https://example.org/*` to the textbox. The trailing asterisk applies it to all pages on the domain - without it, only the root page is themed. + + diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx new file mode 100644 index 0000000000..732a5c99ef --- /dev/null +++ b/docs/src/content/docs/index.mdx @@ -0,0 +1,18 @@ +--- +title: Catppuccin Userstyles +description: A curated collection of soothing pastel themes for your favorite websites and web applications. +template: splash +hero: + tagline: A curated collection of soothing pastel themes for your favorite websites and web applications. + image: + dark: /public/pepperjack-dark.png + light: /public/pepperjack-light.png + actions: + - text: Get Started + link: /getting-started/introduction + icon: right-arrow + - text: Contribute + link: /contributing/ + icon: right-arrow + variant: secondary +--- diff --git a/docs/src/lib/categories.ts b/docs/src/lib/categories.ts new file mode 100644 index 0000000000..183dcaece0 --- /dev/null +++ b/docs/src/lib/categories.ts @@ -0,0 +1,39 @@ +import YAML from "yaml"; +import { type PortEntry, ports } from "./ports.ts"; + +export type Category = { + key: string; + name: string; + description: string; + emoji: string; +}; + +const CATEGORIES_URL = + "https://raw.githubusercontent.com/catppuccin/catppuccin/d4f82739e687cfd19d168be355367fdbbcc8e029/resources/categories.yml"; + +const content = await fetch( + CATEGORIES_URL, +).then((res) => res.text()); +const parsed = YAML.parse(content) as Category[]; + +// Turn into a lookup table by key +export const categories = Object.fromEntries(parsed.map((c) => [c.key, c])); + +// Group ports by category +export const categoryMap: Record = ports.reduce( + (acc, port) => { + for (const cat of port.categories) { + if (!acc[cat]) acc[cat] = []; + acc[cat].push(port); + } + return acc; + }, + {} as Record, +); + +// Sort categories by name +export const sortedCategories = Object.keys(categoryMap).sort((a, b) => { + const aName = categories[a]?.name ?? a; + const bName = categories[b]?.name ?? b; + return aName.localeCompare(bName); +}); diff --git a/docs/src/lib/ports.ts b/docs/src/lib/ports.ts new file mode 100644 index 0000000000..07345262a8 --- /dev/null +++ b/docs/src/lib/ports.ts @@ -0,0 +1,51 @@ +// deno-lint-ignore-file no-explicit-any + +import fs from "fs"; +import path from "path"; +import YAML from "yaml"; + +export type Collaborator = string; + +export type PortEntry = { + slug: string; + name: string; + link: string; + categories: string[]; + icon?: string; + color: string; + note?: string; + currentMaintainers?: Collaborator[]; + pastMaintainers?: Collaborator[]; + supports?: Record; +}; + +const file = fs.readFileSync( + path.resolve("../scripts/userstyles.yml"), + "utf-8", +); +const parsed = YAML.parse(file) as { + collaborators: Collaborator[]; + userstyles: Record; +}; + +// TODO: Use proper types from scripts lib once possible. + +// Normalize keys (camelCase) +function normalizePort(slug: string, data: any): PortEntry { + return { + slug, + name: data.name, + link: data.link, + categories: data.categories ?? [], + icon: data.icon, + color: data.color, + note: data.note, + currentMaintainers: data["current-maintainers"] ?? [], + pastMaintainers: data["past-maintainers"] ?? [], + supports: data.supports, + }; +} + +export const ports: PortEntry[] = Object.entries(parsed.userstyles).map( + ([slug, data]) => normalizePort(slug, data), +); diff --git a/docs/tsconfig.json b/docs/tsconfig.json new file mode 100644 index 0000000000..8bf91d3bb9 --- /dev/null +++ b/docs/tsconfig.json @@ -0,0 +1,5 @@ +{ + "extends": "astro/tsconfigs/strict", + "include": [".astro/types.d.ts", "**/*"], + "exclude": ["dist"] +} diff --git a/docs/userstyle-creation.md b/docs/userstyle-creation.md deleted file mode 100644 index 47dcc9bee5..0000000000 --- a/docs/userstyle-creation.md +++ /dev/null @@ -1,123 +0,0 @@ -

-

🎨 Userstyle Creation

-

- -

- Guidelines for requesting and creating userstyles -

- -  - -### Requesting Userstyles - -To request a website to be themed, please create a -[Port Request](https://github.com/catppuccin/catppuccin/discussions/new?category=port-requests) -discussion on [catppuccin/catppuccin](https://github.com/catppuccin/catppuccin). -While this may seem odd, this ensures to keep all of our requests in one place -and makes it easier for all people to request what they want without needing to -learn what "Stylus" exactly is. - -**If you have already created a userstyle, please raise a -[Pull Request](https://github.com/catppuccin/userstyles/compare)!** - -  - -### Creating Userstyles - -To create a userstyle, follow the instructions listed below: - -1. Fork this repository. -2. Create a new branch under the name `feat/`, (e.g. - `feat/nixos-search` instead of NixOS Search). -3. Create a new folder `styles/`. The name must be - `lower-kebab-case`. -4. Copy the contents of the [`template`](../template/) folder into - `styles/`. - - **The template uses [LESS](https://lesscss.org/#overview) as the - preprocessor for Stylus. Please do not change this as we will only accept - userstyles based on the template.** -5. Edit the [`catppuccin.user.css`](../template/catppuccin.user.css) file and - replace all the words wrapped with `<>` to fit the details of your port. -6. Edit the [`userstyle.yml`](../src/userstyles.yml) file and put in the details - of your port. **More details given below.** -7. Create your image previews in the [`assets/`](../template/assets/) folder - - **All previews must be `.webp` files.** - - Create a preview image for each flavor. (e.g. `mocha.webp`, - `macchiato.webp`, `frappe.webp` & `latte.webp`) - - Use [catwalk](https://github.com/catppuccin/toolbox#catwalk) to generate a - composite or grid image of all the flavors. **This must be saved as - `catwalk.webp`.** -8. Raise a [Pull Request](https://github.com/catppuccin/userstyles/compare), - making sure to read and fill out the template properly. - -  - -### `userstyles.yml` - -**Please note that the `README`s for each port are auto-generated by scripts -defined in [`src/generate/`](../src/generate)**, along with many other parts of -this repository. This file, `userstyles.yml`, is responsible for holding the -necessary data to auto-generate everything. - -[`userstyles.schema.json`](../src/userstyles.schema.json) is the schema -specification for this file. The fields in the following instructions are based -on the schema: - -1. Add your name to the list of collaborators. - - ```yaml - collaborators: - - & - name: - url: https://github.com/ - ``` - -2. Locate the `userstyles` section and add your port to the list. - - You should make changes to everything wrapped in `<>` and remove the `<>` - characters. If you need help with any of the fields, you should refer to - other ports in the `userstyle.yml` file. If you still cannot figure it out, - you can ask for help in the pull request or join our - [Discord](https://discord.com/servers/catppuccin-907385605422448742). - - `Required Fields:` - - ```yaml - : - name: - category: - readme: - app-link: - current-maintainers: [ * ] - ``` - - `All Fields:` - - These extra `usage` & `faq` keys will ensure that you can add important - information about the port to the README. - - The keys `color` & `icon` are best explained the schema specification itself. - - The key `past-maintainers` is a list of people who have maintained the port - in the past. We encourage all maintainers to add/remove themselves from this - list as they see fit. - - Remember that these 5 fields are **optional**. - - ```yaml - : - name: - category: - color: # OPTIONAL - icon: # OPTIONAL - readme: - app-link: "" - usage: |+ # OPTIONAL - > **Note**
- > - faq: # OPTIONAL - - question: - answer: - current-maintainers: [ * ] - past-maintainers: [ * ] # OPTIONAL - ``` diff --git a/flake.lock b/flake.lock new file mode 100644 index 0000000000..1680966605 --- /dev/null +++ b/flake.lock @@ -0,0 +1,24 @@ +{ + "nodes": { + "nixpkgs": { + "locked": { + "lastModified": 315532800, + "narHash": "sha256-gVTEpnfY0A1e9++s9s6t26RMTQvRoWexvUGxYhbnzHg=", + "rev": "e4b09e47ace7d87de083786b404bf232eb6c89d8", + "type": "tarball", + "url": "https://releases.nixos.org/nixpkgs/nixpkgs-25.11pre809757.e4b09e47ace7/nixexprs.tar.xz?rev=e4b09e47ace7d87de083786b404bf232eb6c89d8" + }, + "original": { + "type": "tarball", + "url": "https://channels.nixos.org/nixpkgs-unstable/nixexprs.tar.xz" + } + }, + "root": { + "inputs": { + "nixpkgs": "nixpkgs" + } + } + }, + "root": "root", + "version": 7 +} diff --git a/flake.nix b/flake.nix new file mode 100644 index 0000000000..9c249bf74c --- /dev/null +++ b/flake.nix @@ -0,0 +1,20 @@ +{ + description = "Catppuccin userstyles"; + + inputs.nixpkgs.url = "https://channels.nixos.org/nixpkgs-unstable/nixexprs.tar.xz"; + + outputs = + { nixpkgs, ... }: + let + forAllSystems = + function: + nixpkgs.lib.genAttrs nixpkgs.lib.systems.flakeExposed ( + system: function nixpkgs.legacyPackages.${system} + ); + in + { + devShells = forAllSystems (pkgs: { + default = pkgs.callPackage ./shell.nix { }; + }); + }; +} diff --git a/lib/lib.less b/lib/lib.less new file mode 100644 index 0000000000..dab95f6028 --- /dev/null +++ b/lib/lib.less @@ -0,0 +1,2 @@ +// Standard library has migrated to a versioned syntax, see https://userstyles.catppuccin.com/contributing/reference/libraries/standard/#v1 for migration details and the latest documentation. +@import "https://userstyles.catppuccin.com/lib/std/v1.less"; diff --git a/lib/std/v1.less b/lib/std/v1.less new file mode 100644 index 0000000000..63a5021d4e --- /dev/null +++ b/lib/std/v1.less @@ -0,0 +1,129 @@ +/* deno-fmt-ignore */ +@catppuccin: { + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +}; + +/* deno-fmt-ignore */ +@catppuccin-filters: { + @latte: { @rosewater: brightness(0) saturate(100%) invert(62%) sepia(42%) saturate(525%) hue-rotate(322deg) brightness(94%) contrast(82%); @flamingo: brightness(0) saturate(100%) invert(54%) sepia(48%) saturate(532%) hue-rotate(311deg) brightness(95%) contrast(82%); @pink: brightness(0) saturate(100%) invert(55%) sepia(54%) saturate(548%) hue-rotate(266deg) brightness(100%) contrast(83%); @mauve: brightness(0) saturate(100%) invert(26%) sepia(31%) saturate(3766%) hue-rotate(247deg) brightness(114%) contrast(114%); @red: brightness(0) saturate(100%) invert(28%) sepia(41%) saturate(3765%) hue-rotate(329deg) brightness(79%) contrast(110%); @maroon: brightness(0) saturate(100%) invert(51%) sepia(51%) saturate(3760%) hue-rotate(322deg) brightness(86%) contrast(111%); @peach: brightness(0) saturate(100%) invert(33%) sepia(99%) saturate(2022%) hue-rotate(4deg) brightness(118%) contrast(103%); @yellow: brightness(0) saturate(100%) invert(49%) sepia(94%) saturate(2020%) hue-rotate(0deg) brightness(120%) contrast(75%); @green: brightness(0) saturate(100%) invert(60%) sepia(63%) saturate(538%) hue-rotate(63deg) brightness(76%) contrast(90%); @teal: brightness(0) saturate(100%) invert(39%) sepia(67%) saturate(1026%) hue-rotate(144deg) brightness(95%) contrast(93%); @sky: brightness(0) saturate(100%) invert(53%) sepia(44%) saturate(3749%) hue-rotate(164deg) brightness(95%) contrast(97%); @sapphire: brightness(0) saturate(100%) invert(41%) sepia(70%) saturate(1021%) hue-rotate(151deg) brightness(103%) contrast(78%); @blue: brightness(0) saturate(100%) invert(30%) sepia(36%) saturate(3759%) hue-rotate(209deg) brightness(103%) contrast(110%); @lavender: brightness(0) saturate(100%) invert(48%) sepia(34%) saturate(3762%) hue-rotate(213deg) brightness(108%) contrast(110%); @text: brightness(0) saturate(100%) invert(43%) sepia(43%) saturate(515%) hue-rotate(196deg) brightness(49%) contrast(68%); @subtext1: brightness(0) saturate(100%) invert(63%) sepia(28%) saturate(515%) hue-rotate(196deg) brightness(48%) contrast(67%); @subtext0: brightness(0) saturate(100%) invert(65%) sepia(15%) saturate(535%) hue-rotate(195deg) brightness(63%) contrast(82%); @overlay2: brightness(0) saturate(100%) invert(63%) sepia(20%) saturate(521%) hue-rotate(195deg) brightness(76%) contrast(47%); @overlay1: brightness(0) saturate(100%) invert(72%) sepia(10%) saturate(534%) hue-rotate(195deg) brightness(81%) contrast(70%); @overlay0: brightness(0) saturate(100%) invert(82%) sepia(25%) saturate(510%) hue-rotate(196deg) brightness(92%) contrast(45%); @surface2: brightness(0) saturate(100%) invert(84%) sepia(6%) saturate(528%) hue-rotate(189deg) brightness(88%) contrast(76%); @surface1: brightness(0) saturate(100%) invert(93%) sepia(24%) saturate(506%) hue-rotate(182deg) brightness(86%) contrast(83%); @surface0: brightness(0) saturate(100%) invert(94%) sepia(22%) saturate(523%) hue-rotate(179deg) brightness(96%) contrast(76%); @base: brightness(0) saturate(100%) invert(91%) sepia(37%) saturate(521%) hue-rotate(181deg) brightness(106%) contrast(94%); @mantle: brightness(0) saturate(100%) invert(89%) sepia(26%) saturate(508%) hue-rotate(188deg) brightness(107%) contrast(90%); @crust: brightness(0) saturate(100%) invert(84%) sepia(32%) saturate(502%) hue-rotate(192deg) brightness(111%) contrast(84%); }; + @frappe: { @rosewater: brightness(0) saturate(100%) invert(80%) sepia(22%) saturate(510%) hue-rotate(315deg) brightness(113%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(78%) sepia(26%) saturate(512%) hue-rotate(311deg) brightness(106%) contrast(86%); @pink: brightness(0) saturate(100%) invert(80%) sepia(22%) saturate(532%) hue-rotate(277deg) brightness(100%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(69%) sepia(37%) saturate(513%) hue-rotate(224deg) brightness(95%) contrast(90%); @red: brightness(0) saturate(100%) invert(58%) sepia(41%) saturate(524%) hue-rotate(310deg) brightness(97%) contrast(85%); @maroon: brightness(0) saturate(100%) invert(67%) sepia(34%) saturate(522%) hue-rotate(309deg) brightness(100%) contrast(83%); @peach: brightness(0) saturate(100%) invert(64%) sepia(32%) saturate(511%) hue-rotate(336deg) brightness(100%) contrast(97%); @yellow: brightness(0) saturate(100%) invert(78%) sepia(25%) saturate(512%) hue-rotate(359deg) brightness(107%) contrast(79%); @green: brightness(0) saturate(100%) invert(84%) sepia(25%) saturate(547%) hue-rotate(49deg) brightness(93%) contrast(82%); @teal: brightness(0) saturate(100%) invert(82%) sepia(21%) saturate(545%) hue-rotate(122deg) brightness(90%) contrast(81%); @sky: brightness(0) saturate(100%) invert(87%) sepia(24%) saturate(513%) hue-rotate(149deg) brightness(92%) contrast(85%); @sapphire: brightness(0) saturate(100%) invert(76%) sepia(32%) saturate(529%) hue-rotate(166deg) brightness(93%) contrast(85%); @blue: brightness(0) saturate(100%) invert(65%) sepia(33%) saturate(518%) hue-rotate(185deg) brightness(96%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(75%) sepia(33%) saturate(509%) hue-rotate(201deg) brightness(96%) contrast(97%); @text: brightness(0) saturate(100%) invert(83%) sepia(29%) saturate(508%) hue-rotate(192deg) brightness(97%) contrast(98%); @subtext1: brightness(0) saturate(100%) invert(81%) sepia(13%) saturate(517%) hue-rotate(190deg) brightness(95%) contrast(85%); @subtext0: brightness(0) saturate(100%) invert(78%) sepia(16%) saturate(515%) hue-rotate(191deg) brightness(95%) contrast(68%); @overlay2: brightness(0) saturate(100%) invert(70%) sepia(17%) saturate(520%) hue-rotate(191deg) brightness(91%) contrast(70%); @overlay1: brightness(0) saturate(100%) invert(73%) sepia(19%) saturate(514%) hue-rotate(189deg) brightness(75%) contrast(69%); @overlay0: brightness(0) saturate(100%) invert(57%) sepia(28%) saturate(505%) hue-rotate(192deg) brightness(75%) contrast(57%); @surface2: brightness(0) saturate(100%) invert(55%) sepia(26%) saturate(532%) hue-rotate(191deg) brightness(62%) contrast(64%); @surface1: brightness(0) saturate(100%) invert(39%) sepia(39%) saturate(506%) hue-rotate(190deg) brightness(59%) contrast(63%); @surface0: brightness(0) saturate(100%) invert(11%) sepia(65%) saturate(1032%) hue-rotate(204deg) brightness(86%) contrast(58%); @base: brightness(0) saturate(100%) invert(11%) sepia(75%) saturate(1023%) hue-rotate(204deg) brightness(60%) contrast(70%); @mantle: brightness(0) saturate(100%) invert(47%) sepia(27%) saturate(530%) hue-rotate(194deg) brightness(31%) contrast(94%); @crust: brightness(0) saturate(100%) invert(30%) sepia(27%) saturate(523%) hue-rotate(194deg) brightness(43%) contrast(96%); }; + @macchiato: { @rosewater: brightness(0) saturate(100%) invert(83%) sepia(22%) saturate(509%) hue-rotate(314deg) brightness(113%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(78%) sepia(22%) saturate(512%) hue-rotate(311deg) brightness(109%) contrast(88%); @pink: brightness(0) saturate(100%) invert(75%) sepia(23%) saturate(509%) hue-rotate(279deg) brightness(109%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(61%) sepia(70%) saturate(1021%) hue-rotate(210deg) brightness(109%) contrast(93%); @red: brightness(0) saturate(100%) invert(54%) sepia(37%) saturate(528%) hue-rotate(301deg) brightness(110%) contrast(87%); @maroon: brightness(0) saturate(100%) invert(66%) sepia(32%) saturate(496%) hue-rotate(306deg) brightness(99%) contrast(89%); @peach: brightness(0) saturate(100%) invert(69%) sepia(34%) saturate(532%) hue-rotate(335deg) brightness(101%) contrast(91%); @yellow: brightness(0) saturate(100%) invert(87%) sepia(19%) saturate(527%) hue-rotate(0deg) brightness(96%) contrast(93%); @green: brightness(0) saturate(100%) invert(86%) sepia(26%) saturate(541%) hue-rotate(53deg) brightness(100%) contrast(75%); @teal: brightness(0) saturate(100%) invert(85%) sepia(22%) saturate(544%) hue-rotate(117deg) brightness(96%) contrast(78%); @sky: brightness(0) saturate(100%) invert(84%) sepia(28%) saturate(526%) hue-rotate(147deg) brightness(98%) contrast(81%); @sapphire: brightness(0) saturate(100%) invert(75%) sepia(42%) saturate(530%) hue-rotate(168deg) brightness(93%) contrast(91%); @blue: brightness(0) saturate(100%) invert(65%) sepia(33%) saturate(519%) hue-rotate(182deg) brightness(98%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(73%) sepia(33%) saturate(510%) hue-rotate(199deg) brightness(98%) contrast(99%); @text: brightness(0) saturate(100%) invert(73%) sepia(80%) saturate(1008%) hue-rotate(190deg) brightness(120%) contrast(92%); @subtext1: brightness(0) saturate(100%) invert(78%) sepia(12%) saturate(515%) hue-rotate(191deg) brightness(101%) contrast(81%); @subtext0: brightness(0) saturate(100%) invert(78%) sepia(15%) saturate(521%) hue-rotate(190deg) brightness(95%) contrast(70%); @overlay2: brightness(0) saturate(100%) invert(69%) sepia(16%) saturate(521%) hue-rotate(192deg) brightness(90%) contrast(72%); @overlay1: brightness(0) saturate(100%) invert(68%) sepia(16%) saturate(523%) hue-rotate(191deg) brightness(77%) contrast(80%); @overlay0: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(535%) hue-rotate(194deg) brightness(63%) contrast(78%); @surface2: brightness(0) saturate(100%) invert(52%) sepia(34%) saturate(510%) hue-rotate(193deg) brightness(54%) contrast(61%); @surface1: brightness(0) saturate(100%) invert(46%) sepia(36%) saturate(516%) hue-rotate(194deg) brightness(46%) contrast(72%); @surface0: brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(513%) hue-rotate(194deg) brightness(39%) contrast(82%); @base: brightness(0) saturate(100%) invert(34%) sepia(36%) saturate(527%) hue-rotate(195deg) brightness(38%) contrast(95%); @mantle: brightness(0) saturate(100%) invert(29%) sepia(42%) saturate(541%) hue-rotate(198deg) brightness(30%) contrast(92%); @crust: brightness(0) saturate(100%) invert(27%) sepia(45%) saturate(543%) hue-rotate(200deg) brightness(25%) contrast(93%); }; + @mocha: { @rosewater: brightness(0) saturate(100%) invert(84%) sepia(22%) saturate(508%) hue-rotate(312deg) brightness(113%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(79%) sepia(23%) saturate(510%) hue-rotate(311deg) brightness(110%) contrast(90%); @pink: brightness(0) saturate(100%) invert(76%) sepia(28%) saturate(508%) hue-rotate(290deg) brightness(112%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(63%) sepia(71%) saturate(1021%) hue-rotate(208deg) brightness(110%) contrast(94%); @red: brightness(0) saturate(100%) invert(61%) sepia(33%) saturate(540%) hue-rotate(293deg) brightness(101%) contrast(90%); @maroon: brightness(0) saturate(100%) invert(70%) sepia(25%) saturate(536%) hue-rotate(301deg) brightness(100%) contrast(84%); @peach: brightness(0) saturate(100%) invert(73%) sepia(36%) saturate(519%) hue-rotate(332deg) brightness(100%) contrast(93%); @yellow: brightness(0) saturate(100%) invert(85%) sepia(27%) saturate(512%) hue-rotate(336deg) brightness(108%) contrast(96%); @green: brightness(0) saturate(100%) invert(86%) sepia(22%) saturate(538%) hue-rotate(63deg) brightness(97%) contrast(88%); @teal: brightness(0) saturate(100%) invert(90%) sepia(24%) saturate(532%) hue-rotate(105deg) brightness(95%) contrast(85%); @sky: brightness(0) saturate(100%) invert(81%) sepia(27%) saturate(522%) hue-rotate(141deg) brightness(99%) contrast(86%); @sapphire: brightness(0) saturate(100%) invert(73%) sepia(43%) saturate(529%) hue-rotate(166deg) brightness(95%) contrast(93%); @blue: brightness(0) saturate(100%) invert(57%) sepia(66%) saturate(1020%) hue-rotate(195deg) brightness(115%) contrast(96%); @lavender: brightness(0) saturate(100%) invert(68%) sepia(33%) saturate(517%) hue-rotate(197deg) brightness(105%) contrast(98%); @text: brightness(0) saturate(100%) invert(75%) sepia(82%) saturate(1008%) hue-rotate(189deg) brightness(120%) contrast(90%); @subtext1: brightness(0) saturate(100%) invert(81%) sepia(11%) saturate(522%) hue-rotate(191deg) brightness(100%) contrast(81%); @subtext0: brightness(0) saturate(100%) invert(79%) sepia(13%) saturate(517%) hue-rotate(191deg) brightness(93%) contrast(71%); @overlay2: brightness(0) saturate(100%) invert(70%) sepia(13%) saturate(523%) hue-rotate(191deg) brightness(88%) contrast(75%); @overlay1: brightness(0) saturate(100%) invert(61%) sepia(17%) saturate(527%) hue-rotate(193deg) brightness(85%) contrast(66%); @overlay0: brightness(0) saturate(100%) invert(67%) sepia(15%) saturate(533%) hue-rotate(193deg) brightness(62%) contrast(82%); @surface2: brightness(0) saturate(100%) invert(58%) sepia(30%) saturate(515%) hue-rotate(196deg) brightness(45%) contrast(62%); @surface1: brightness(0) saturate(100%) invert(44%) sepia(36%) saturate(521%) hue-rotate(198deg) brightness(39%) contrast(70%); @surface0: brightness(0) saturate(100%) invert(10%) sepia(79%) saturate(1035%) hue-rotate(212deg) brightness(62%) contrast(70%); @base: brightness(0) saturate(100%) invert(7%) sepia(23%) saturate(3759%) hue-rotate(219deg) brightness(67%) contrast(84%); @mantle: brightness(0) saturate(100%) invert(22%) sepia(29%) saturate(493%) hue-rotate(204deg) brightness(44%) contrast(102%); @crust: brightness(0) saturate(100%) invert(25%) sepia(44%) saturate(549%) hue-rotate(204deg) brightness(18%) contrast(96%); }; +}; + +#lib { + .palette() { + @rosewater: @catppuccin[@@flavor][@rosewater]; + @flamingo: @catppuccin[@@flavor][@flamingo]; + @pink: @catppuccin[@@flavor][@pink]; + @mauve: @catppuccin[@@flavor][@mauve]; + @red: @catppuccin[@@flavor][@red]; + @maroon: @catppuccin[@@flavor][@maroon]; + @peach: @catppuccin[@@flavor][@peach]; + @yellow: @catppuccin[@@flavor][@yellow]; + @green: @catppuccin[@@flavor][@green]; + @teal: @catppuccin[@@flavor][@teal]; + @sky: @catppuccin[@@flavor][@sky]; + @sapphire: @catppuccin[@@flavor][@sapphire]; + @blue: @catppuccin[@@flavor][@blue]; + @lavender: @catppuccin[@@flavor][@lavender]; + @text: @catppuccin[@@flavor][@text]; + @subtext1: @catppuccin[@@flavor][@subtext1]; + @subtext0: @catppuccin[@@flavor][@subtext0]; + @overlay2: @catppuccin[@@flavor][@overlay2]; + @overlay1: @catppuccin[@@flavor][@overlay1]; + @overlay0: @catppuccin[@@flavor][@overlay0]; + @surface2: @catppuccin[@@flavor][@surface2]; + @surface1: @catppuccin[@@flavor][@surface1]; + @surface0: @catppuccin[@@flavor][@surface0]; + @base: @catppuccin[@@flavor][@base]; + @mantle: @catppuccin[@@flavor][@mantle]; + @crust: @catppuccin[@@flavor][@crust]; + @accent: @catppuccin[@@flavor][@@accentColor]; + + @rosewater-filter: @catppuccin-filters[@@flavor][@rosewater]; + @flamingo-filter: @catppuccin-filters[@@flavor][@flamingo]; + @pink-filter: @catppuccin-filters[@@flavor][@pink]; + @mauve-filter: @catppuccin-filters[@@flavor][@mauve]; + @red-filter: @catppuccin-filters[@@flavor][@red]; + @maroon-filter: @catppuccin-filters[@@flavor][@maroon]; + @peach-filter: @catppuccin-filters[@@flavor][@peach]; + @yellow-filter: @catppuccin-filters[@@flavor][@yellow]; + @green-filter: @catppuccin-filters[@@flavor][@green]; + @teal-filter: @catppuccin-filters[@@flavor][@teal]; + @sky-filter: @catppuccin-filters[@@flavor][@sky]; + @sapphire-filter: @catppuccin-filters[@@flavor][@sapphire]; + @blue-filter: @catppuccin-filters[@@flavor][@blue]; + @lavender-filter: @catppuccin-filters[@@flavor][@lavender]; + @text-filter: @catppuccin-filters[@@flavor][@text]; + @subtext1-filter: @catppuccin-filters[@@flavor][@subtext1]; + @subtext0-filter: @catppuccin-filters[@@flavor][@subtext0]; + @overlay2-filter: @catppuccin-filters[@@flavor][@overlay2]; + @overlay1-filter: @catppuccin-filters[@@flavor][@overlay1]; + @overlay0-filter: @catppuccin-filters[@@flavor][@overlay0]; + @surface2-filter: @catppuccin-filters[@@flavor][@surface2]; + @surface1-filter: @catppuccin-filters[@@flavor][@surface1]; + @surface0-filter: @catppuccin-filters[@@flavor][@surface0]; + @base-filter: @catppuccin-filters[@@flavor][@base]; + @mantle-filter: @catppuccin-filters[@@flavor][@mantle]; + @crust-filter: @catppuccin-filters[@@flavor][@crust]; + @accent-filter: @catppuccin-filters[@@flavor][@@accentColor]; + } + + .defaults() { + color-scheme: if(@flavor = latte, light, dark); + + ::selection { + background-color: fade(@accent, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + } + + .rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); + } + + .hslify(@color) { + @raw: e( + %("%s, %s%, %s%", hue(@color), saturation(@color), lightness(@color)) + ); + } + + .css-variables() { + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + } +} diff --git a/renovate.json5 b/renovate.json5 new file mode 100644 index 0000000000..ffddb0785a --- /dev/null +++ b/renovate.json5 @@ -0,0 +1,11 @@ +{ + $schema: "https://docs.renovatebot.com/renovate-schema.json", + extends: ["local>catppuccin/renovate-config", "helpers:pinGitHubActionDigests"], + packageRules: [ + // Deno keep releasing minor/patch releases for doc updates so disabling updates to the standard lib + { + matchPackageNames: ["/^@jsr/std__/"], + enabled: false, + }, + ], +} diff --git a/scripts/bump-version/calver.test.ts b/scripts/bump-version/calver.test.ts new file mode 100644 index 0000000000..a193df868e --- /dev/null +++ b/scripts/bump-version/calver.test.ts @@ -0,0 +1,51 @@ +import { CalVer } from "@/bump-version/calver.ts"; + +import { assertEquals } from "@std/assert"; + +Deno.test({ + name: "constructor", + fn() { + const calver = new CalVer("2000.01.01"); + assertEquals(calver.toString(), "2000.01.01"); + }, +}); + +Deno.test({ + name: "incrementWith", + fn() { + const calver = new CalVer("2000.01.01"); + calver.incrementWith(new Date("2000-01-01")); + assertEquals(calver.toString(), "2000.01.01.1"); + calver.incrementWith(new Date("2000-01-01")); + assertEquals(calver.toString(), "2000.01.01.2"); + calver.incrementWith(new Date("2000-01-02")); + assertEquals(calver.toString(), "2000.01.02"); + }, +}); + +Deno.test({ + name: "incrementWith - new year", + fn() { + const calver = new CalVer("2000.12.31"); + calver.incrementWith(new Date("2001-01-01")); + assertEquals(calver.toString(), "2001.01.01"); + }, +}); + +Deno.test({ + name: "incrementWith - new month", + fn() { + const calver = new CalVer("2000.01.31"); + calver.incrementWith(new Date("2000-02-01")); + assertEquals(calver.toString(), "2000.02.01"); + }, +}); + +Deno.test({ + name: "incrementWith - earlier date", + fn() { + const calver = new CalVer("2000.01.01"); + calver.incrementWith(new Date("1999-12-31")); + assertEquals(calver.toString(), "1999.12.31"); + }, +}); diff --git a/scripts/bump-version/calver.ts b/scripts/bump-version/calver.ts new file mode 100644 index 0000000000..209e4bdd38 --- /dev/null +++ b/scripts/bump-version/calver.ts @@ -0,0 +1,37 @@ +export class CalVer { + year: number; + month: number; + day: number; + micro?: number; + + constructor(date: string) { + const [year, month, day, micro] = date.split(".").map((num) => + Number.parseInt(num) + ); + this.year = year; + this.month = month; + this.day = day; + this.micro = micro ?? undefined; + } + + toString() { + return `${this.year}.${this.month.toString().padStart(2, "0")}.${ + this.day.toString().padStart(2, "0") + }${this.micro ? "." + this.micro : ""}`; + } + + incrementWith(date: Date) { + const year = date.getUTCFullYear(); + const month = date.getUTCMonth() + 1; + const day = date.getUTCDate(); + + if (this.year === year && this.month === month && this.day === day) { + this.micro = (this.micro ?? 0) + 1; + } else { + this.year = year; + this.month = month; + this.day = day; + this.micro = undefined; + } + } +} diff --git a/scripts/bump-version/main.ts b/scripts/bump-version/main.ts new file mode 100644 index 0000000000..7c3b038af7 --- /dev/null +++ b/scripts/bump-version/main.ts @@ -0,0 +1,55 @@ +import * as path from "@std/path"; + +import { REPO_ROOT } from "@/constants.ts"; +import { CalVer } from "@/bump-version/calver.ts"; +import { parseArgs } from "@std/cli"; +import { getUserstylesFiles } from "@/utils.ts"; + +const args = parseArgs(Deno.args, { boolean: ["all"] }); + +if (!Deno.env.get("CI") && !args.all) { + throw new Error( + "This script should only be used in CI. Userstyle versions are automatically bumped after pull requests are merged.", + ); +} + +let files = []; + +if (args.all) { + files = getUserstylesFiles(); +} else { + files = args._.filter((val) => typeof val == "string").map((p: string) => + path.join(REPO_ROOT, p) + ); +} + +for ( + const file of files +) { + const content = await Deno.readTextFile(file); + + const metadataMatches = content.match( + /^\/\*\s*==UserStyle==[\s\S]*?==\/UserStyle==\s*\*\//, + ); + if (!metadataMatches) { + throw new Error(`No metadata found in ${file}`); + } + const metadata = metadataMatches[0]; + const post = content.slice(metadata.length); + + const versionMatches = metadata.match(/@version(\s+)(.*)/); + if (!versionMatches) { + throw new Error(`No version found in ${file}`); + } + const whitespace = versionMatches[1]; + + const version = new CalVer(versionMatches[2]); + version.incrementWith(new Date()); + + const newContent = metadata.replace( + /@version\s+.*/, + `@version${whitespace}${version.toString()}`, + ) + post; + + await Deno.writeTextFile(file, newContent); +} diff --git a/scripts/constants.ts b/scripts/constants.ts new file mode 100644 index 0000000000..0189475e68 --- /dev/null +++ b/scripts/constants.ts @@ -0,0 +1,18 @@ +import CATEGORIES_SCHEMA from "@catppuccin/catppuccin/resources/categories.schema.json" with { + type: "json", +}; +import USERSTYLES_SCHEMA from "@/userstyles.schema.json" with { + type: "json", +}; + +import * as path from "@std/path"; + +const ROOT = import.meta.dirname; +if (!ROOT) throw new Error("ROOT was not located."); + +/** + * Absolute path to the repository. + */ +export const REPO_ROOT = path.join(ROOT, ".."); + +export { CATEGORIES_SCHEMA, USERSTYLES_SCHEMA }; diff --git a/scripts/generate/labels.ts b/scripts/generate/labels.ts new file mode 100644 index 0000000000..0d5feac6f1 --- /dev/null +++ b/scripts/generate/labels.ts @@ -0,0 +1,98 @@ +import type { UserstylesSchema } from "@/types/mod.ts"; +import { REPO_ROOT } from "@/constants.ts"; + +import * as path from "@std/path"; +import * as yaml from "@std/yaml"; + +import { type ColorName, flavors } from "@catppuccin/palette"; +import { writeWithPreamble } from "@/generate/utils.ts"; + +/** + * Macchiato color definitions as hex values. + */ +const macchiatoHex = flavors.macchiato.colorEntries + .reduce((acc, [identifier, { hex }]) => { + acc[identifier] = hex; + return acc; + }, {} as Record); + +const toIssueLabel = (key: string) => `lbl:${key}`; + +const toIssueLabelRegex = (key: string) => `/${toIssueLabel(key)}(,.*)?$/gm`; + +const toPrLabel = (key: string) => `styles/${key}/**/*`; + +export async function syncIssueLabels(userstyles: UserstylesSchema.Userstyles) { + // .github/issue-labeler.yml + await writeWithPreamble( + path.join(REPO_ROOT, ".github/issue-labeler.yml"), + yaml.stringify( + Object.entries(userstyles) + .reduce((acc, [key, { supports }]) => { + acc[key.toString()] = [toIssueLabelRegex(key)]; + Object.keys(supports ?? {}).forEach((key) => { + acc[key.toString()] = [toIssueLabelRegex(key)]; + }); + return acc; + }, {} as Record), + ), + ); + + // .github/ISSUE_TEMPLATE/userstyle.yml + const userstyleIssueTemplate = Deno.readTextFileSync(path.join( + REPO_ROOT, + "scripts/generate/templates/userstyle-issue.yml", + )); + await Deno.writeTextFile( + path.join(REPO_ROOT, ".github/ISSUE_TEMPLATE/userstyle.yml"), + userstyleIssueTemplate.replace( + `"$LABELS"`, + `${ + Object.entries(userstyles) + .flatMap(([slug, { supports }]) => + [slug, ...Object.keys(supports ?? {})].map((key) => + `"${toIssueLabel(key)}"` + ) + ) + .sort() + .join(", ") + }`, + ), + ); + + // .github/pr-labeler.yml + await writeWithPreamble( + path.join(REPO_ROOT, ".github/pr-labeler.yml"), + yaml.stringify( + Object.entries(userstyles) + .reduce((acc, [key, { supports }]) => { + acc[key] = toPrLabel(key); + Object.keys(supports ?? {}).forEach((supportedKey) => { + acc[supportedKey] = toPrLabel(key); + }); + return acc; + }, {} as Record), + ), + ); + + // .github/labels.yml + await writeWithPreamble( + path.join(REPO_ROOT, ".github/labels.yml"), + yaml.stringify( + Object.entries(userstyles).flatMap(([key, style]) => [ + { + name: key, + description: style.name, + color: style.color ? macchiatoHex[style.color] : macchiatoHex.blue, + }, + ...Object.entries(style.supports ?? {}).map(( + [supportedKey, { name }], + ) => ({ + name: supportedKey, + description: name, + color: style.color ? macchiatoHex[style.color] : macchiatoHex.blue, + })), + ]), + ), + ); +} diff --git a/scripts/generate/main.ts b/scripts/generate/main.ts new file mode 100755 index 0000000000..4038b53da9 --- /dev/null +++ b/scripts/generate/main.ts @@ -0,0 +1,69 @@ +import * as path from "@std/path"; +import { REPO_ROOT } from "@/constants.ts"; + +import { syncIssueLabels } from "@/generate/labels.ts"; +import { generateStyleReadmes } from "@/generate/readme-styles.ts"; +import { writeWithPreamble } from "@/generate/utils.ts"; +import { + getAuthenticatedOctokit, + getUserstylesData, + getUserstylesTeamMembers, +} from "@/utils.ts"; + +if (!Deno.env.get("CI")) { + throw new Error( + "This script should only be used in CI. Generated READMEs and other health files are automatically updated after pull requests are merged.", + ); +} + +const userstylesData = getUserstylesData(); + +/** + * Generate README.md files for each style + */ +generateStyleReadmes(userstylesData.userstyles); +/** + * Keep + * - `.github/issue-labeler.yml` + * - `.github/labels.yml` + * - `.github/pr-labeler.yml` + * in sync with the userstyle metadata. + */ +await syncIssueLabels(userstylesData.userstyles); + +/** + * Keep `.github/CODEOWNERS` in sync with the userstyle metadata. + */ +function maintainersCodeOwners() { + return Object.entries(userstylesData.userstyles!) + .filter(([_, { "current-maintainers": currentMaintainers }]) => + currentMaintainers.length > 0 + ) + .map(([slug, { "current-maintainers": currentMaintainers }]) => { + const codeOwners = currentMaintainers + .map((name) => `@${name}`) + .join(" "); + return `/styles/${slug} ${codeOwners}`; + }) + .join("\n"); +} +async function userstylesStaffCodeOwners() { + const paths = ["/.github/", "/scripts/", "/template/", "/lib/"]; + + const octokit = getAuthenticatedOctokit(); + // Set codeowners to include each member of the userstyles-staff team specifically instead of the team as a whole, + // to require individual reviews from each member instead of just one on behalf of the team. + const staffMembers = await getUserstylesTeamMembers( + octokit, + "userstyles-staff", + ); + return paths.map((path) => + `${path} ${staffMembers.map((member) => "@" + member).join(" ")}` + ).join( + "\n", + ); +} +await writeWithPreamble( + path.join(REPO_ROOT, ".github/CODEOWNERS"), + `${maintainersCodeOwners()}\n\n${await userstylesStaffCodeOwners()}`, +); diff --git a/scripts/generate/readme-styles.ts b/scripts/generate/readme-styles.ts new file mode 100644 index 0000000000..06ea6c4a48 --- /dev/null +++ b/scripts/generate/readme-styles.ts @@ -0,0 +1,89 @@ +import type { UserstylesSchema } from "@/types/mod.ts"; +import { REPO_ROOT } from "@/constants.ts"; + +import * as path from "@std/path"; +import Handlebars from "handlebars"; +import { formatListOfItems } from "@/utils.ts"; + +// we can have some nice things :) +Handlebars.registerHelper( + "pluralize", + (c: number | unknown[], str: string): string => { + if (typeof c === "undefined") return str; + const num = Array.isArray(c) ? c.length : c; + return num === 1 ? str : `${str}s`; + }, +); + +const heading = ( + name: UserstylesSchema.Name, + link: UserstylesSchema.Link, + supports: UserstylesSchema.Supports | undefined, +) => { + return [{ title: name, url: link }].concat( + Object.values(supports ?? {}).map(({ name, link }) => ({ + title: name, + url: link, + })), + ); +}; + +function getNameWithGitHubUrl( + collaborators?: + | UserstylesSchema.CurrentMaintainers + | UserstylesSchema.PastMaintainers, +) { + // no-op when undefined + if (!collaborators) return; + // keep name & set the url to the github.com/ + return collaborators.map((name) => { + return { + name, + url: `https://github.com/${name}`, + }; + }); +} + +export function generateStyleReadmes(userstyles: UserstylesSchema.Userstyles) { + const stylesReadmePath = path.join( + REPO_ROOT, + "scripts/generate/templates/userstyle.md", + ); + const stylesReadmeContent = Deno.readTextFileSync(stylesReadmePath); + + Object.entries(userstyles).map( + ( + [ + slug, + { + name, + link, + note, + supports, + "current-maintainers": currentMaintainers, + "past-maintainers": pastMaintainers, + }, + ], + ) => { + console.log(`Generating README for styles/${slug}...`); + const readmeContent = Handlebars.compile(stylesReadmeContent)({ + heading: heading(name, link, supports), + supportedWebsites: formatListOfItems( + Object.values(supports ?? {}).map(({ name, link }) => + `[${name}](${link})` + ), + ), + slug, + note, + collaborators: { + currentMaintainers: getNameWithGitHubUrl(currentMaintainers), + pastMaintainers: getNameWithGitHubUrl(pastMaintainers), + }, + }); + Deno.writeTextFile( + path.join(REPO_ROOT, "styles", slug.toString(), "README.md"), + readmeContent, + ).catch((e) => console.error(e)); + }, + ); +} diff --git a/scripts/generate/templates/userstyle-issue.yml b/scripts/generate/templates/userstyle-issue.yml new file mode 100644 index 0000000000..d394a55fc8 --- /dev/null +++ b/scripts/generate/templates/userstyle-issue.yml @@ -0,0 +1,64 @@ +# THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND. +name: Userstyle Issue +description: Report a problem with a userstyle. +body: + - id: prerequisites + type: checkboxes + attributes: + label: Is there an existing issue outlining your problem? + description: Please search to see if an issue already exists for your problem. + options: + - label: I have searched the existing issues and they do not solve my problem. + required: true + - id: userstyle + type: dropdown + attributes: + label: What userstyle are you seeing the problem on? + description: "Don't worry about the `lbl:` prefix, it allows issues to be automatically labeled!" + multiple: false + options: ["$LABELS"] + validations: + required: true + - id: description + type: textarea + attributes: + label: Description + description: Describe the problem and what you expect to see instead. + placeholder: The navigation bar on the website is highlighted incorrectly... + validations: + required: true + - id: screenshots + type: textarea + attributes: + label: Relevant screenshots + description: If applicable, attach screenshots which clearly highlight the issue. + - id: browser_version + type: input + attributes: + label: Browser version(s) this issue occurs on + description: "To get the browser version, see https://userstyles.catppuccin.com/getting-started/faq/#what-version-of-my-browser-am-i-using." + placeholder: Firefox v112.0.2 + validations: + required: true + - id: stylus_version + type: input + attributes: + label: Stylus extension version + description: If Stylus is pinned, right-click the extension icon and select "Manage Extension". Otherwise, in the extensions popup, click the settings icon or three dots icon if present and select "Manage Extension". The version is displayed on the resulting page. + placeholder: Stylus 2.3.17 + validations: + required: true + - id: userstyle_version + type: input + attributes: + label: Installed version of the userstyle + description: Versions are listed on Stylus' Manage page. To get the version, click the Stylus extension icon, then in the popup, click Manage. The version is found beside the name of the userstyle. + placeholder: v2025.12.05 + validations: + required: true + - id: additional_comments + type: textarea + attributes: + label: Any additional comments? + description: Add any information that hasn't been covered in the previous sections! +# yaml-language-server: $schema=https://json.schemastore.org/github-issue-forms.json diff --git a/scripts/generate/templates/userstyle.md b/scripts/generate/templates/userstyle.md new file mode 100644 index 0000000000..c6c8c898b0 --- /dev/null +++ b/scripts/generate/templates/userstyle.md @@ -0,0 +1,58 @@ + + + +

+ Logo
+ + Catppuccin for {{#each heading}}{{ this.title }}{{#unless @last}}, {{/unless}}{{/each}} + +

+ +

+ + +

+ +## Usage + +{{#if supportedWebsites}} +> [!IMPORTANT] +> This userstyle also applies to {{ supportedWebsites }}. + +{{/if~}} + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + +{{#if note}} +> [!NOTE] +> {{{ note }}} +{{/if}} + +{{#if collaborators.currentMaintainers.length}} +## 💝 Current {{pluralize collaborators.currentMaintainers 'Maintainer'}} +{{#each collaborators.currentMaintainers}} +- [{{name}}]({{url}}) +{{/each}} +{{else}} +## ❤️‍🩹 Unmaintained +This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! +{{/if}} + +{{#if collaborators.pastMaintainers}} +## 💖 Past {{pluralize collaborators.pastMaintainers 'Maintainer'}} +{{#each collaborators.pastMaintainers}} +- [{{name}}]({{url}}) +{{/each}} +{{/if}} + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/scripts/generate/utils.ts b/scripts/generate/utils.ts new file mode 100644 index 0000000000..7e451760a1 --- /dev/null +++ b/scripts/generate/utils.ts @@ -0,0 +1,9 @@ +export function writeWithPreamble( + filePath: string, + fileContent: string, +) { + return Deno.writeTextFile( + filePath, + "# THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND.\n" + fileContent, + ); +} diff --git a/scripts/lint/file-checker.ts b/scripts/lint/file-checker.ts new file mode 100644 index 0000000000..6b1e751b19 --- /dev/null +++ b/scripts/lint/file-checker.ts @@ -0,0 +1,44 @@ +import { REPO_ROOT } from "@/constants.ts"; + +import * as fs from "@std/fs"; +import * as path from "@std/path"; +import core from "@actions/core"; + +import { log } from "@/logger.ts"; + +const requiredFiles = [ + "catppuccin.user.less", +]; + +export async function checkForMissingFiles() { + const stylesRoot = path.join(REPO_ROOT, "styles"); + + const missingFiles: string[] = []; + for await (const entry of Deno.readDir(stylesRoot)) { + if (!entry.isDirectory) continue; + const styleRoot = path.join(stylesRoot, entry.name); + + await Promise.all(requiredFiles.map(async (f) => { + const fp = path.join(styleRoot, f); + const rfp = path.relative(REPO_ROOT, fp); + + if (!(await fs.exists(fp))) { + missingFiles.push(rfp); + } + })); + } + + // Only write summary if running in GitHub Actions. + if (Deno.env.has("GITHUB_ACTIONS")) { + await core.summary + .addHeading("Missing files") + .addList(missingFiles) + .write(); + } else { + for (const file of missingFiles) { + log.error(`File does not exist`, { file }); + } + } + + return missingFiles.length === 0; +} diff --git a/scripts/lint/library.ts b/scripts/lint/library.ts new file mode 100644 index 0000000000..e632f86ad1 --- /dev/null +++ b/scripts/lint/library.ts @@ -0,0 +1,51 @@ +import * as path from "@std/path"; +// @ts-types="npm:@types/less"; +import less from "less"; + +import { REPO_ROOT } from "@/constants.ts"; + +const LIB_URL_PREFIX = "https://userstyles.catppuccin.com/lib"; +const LIB_DIRECTORY = path.join(REPO_ROOT, "lib"); + +class InterceptingFileManager extends less.FileManager { + #cache = new Map>(); + + override supports(filename: string) { + return filename.startsWith(LIB_URL_PREFIX); + } + override supportsSync() { + return false; + } + + override async loadFile( + filename: string, + _currentDirectory: string, + _options: Less.LoadFileOptions, + _environment: Less.Environment, + ): Promise { + const relativePath = filename.slice(LIB_URL_PREFIX.length); + const localPath = path.join(LIB_DIRECTORY, relativePath); + + let cached = this.#cache.get(localPath); + if (!cached) { + cached = Deno.readTextFile(localPath).catch(() => { + throw { + type: "File", + message: `${filename} failed: not found at ${localPath}`, + }; + }); + this.#cache.set(localPath, cached); + } + + return { contents: await cached, filename: localPath }; + } +} + +interface LessEnvironment { + addFileManager(fileManager: Less.FileManager): void; +} + +(less as unknown as { environment: LessEnvironment }).environment + .addFileManager( + new InterceptingFileManager(), + ); diff --git a/scripts/lint/main.ts b/scripts/lint/main.ts new file mode 100755 index 0000000000..2e6312d4c5 --- /dev/null +++ b/scripts/lint/main.ts @@ -0,0 +1,81 @@ +import { REPO_ROOT } from "@/constants.ts"; + +import { parseArgs } from "@std/cli"; +import * as path from "@std/path"; +import * as color from "@std/fmt/colors"; +// @ts-types="npm:@types/less"; +import less from "less"; + +import { checkForMissingFiles } from "@/lint/file-checker.ts"; +import { log } from "@/logger.ts"; +import { verifyMetadata } from "@/lint/metadata.ts"; +import { runStylelint } from "@/lint/stylelint.ts"; +import { getUserstylesData, getUserstylesFiles } from "@/utils.ts"; +import stylelintConfig from "../../.stylelintrc.js"; +import "@/lint/library.ts"; + +const args = parseArgs(Deno.args, { boolean: ["fix"] }); +const userstyle = args._[0]?.toString().match( + /(?styles\/)?(?[a-z0-9_\-.]+)(?\/)?(?catppuccin\.user\.less)?/, +)?.groups?.userstyle; +const stylesheets = userstyle + ? [path.join(REPO_ROOT, "styles", userstyle, "catppuccin.user.less")] + : getUserstylesFiles(); + +const { userstyles } = getUserstylesData(); + +let didLintFail = false; + +for (const style of stylesheets) { + const dir = path.basename(path.dirname(style)); + const file = path.relative(REPO_ROOT, style); + + let content = await Deno.readTextFile(style); + + // Verify the UserCSS metadata. + const { globalVars, isLess, fixed } = await verifyMetadata( + file, + content, + dir, + userstyles, + args.fix, + ); + + content = fixed; + + // Don't attempt to compile or lint non-LESS files. + if (!isLess) continue; + + // Try to compile the LESS file, report any errors. + less.render(content, { lint: true, globalVars: globalVars }).catch( + (err: Less.RenderError) => { + didLintFail = true; + log.error( + err.message, + { file, startLine: err.line, endLine: err.line, content }, + ); + }, + ); + + // Lint with Stylelint. + const results = await runStylelint(style, content, args.fix, stylelintConfig) + .catch(() => didLintFail = true); + Deno.writeTextFileSync(file, typeof results === "string" ? results : content); +} + +if (await checkForMissingFiles() === false) didLintFail = true; + +// Cause the workflow to fail if any issues were found. + +const THIN_SPACE = "\u2009"; + +if (didLintFail || log.failed) { + if (!args.fix) { + console.log( + `\n ${ + color.bold(color.inverse(color.green(`${THIN_SPACE}TIP${THIN_SPACE}`))) + } Run ${color.bold("deno task lint:fix")} to fix autofixable issues.`, + ); + } + Deno.exit(1); +} diff --git a/scripts/lint/metadata.ts b/scripts/lint/metadata.ts new file mode 100644 index 0000000000..abb0f03bb3 --- /dev/null +++ b/scripts/lint/metadata.ts @@ -0,0 +1,187 @@ +import type { Userstyles } from "@/types/userstyles.d.ts"; +import { REPO_ROOT } from "@/constants.ts"; + +import * as color from "@std/fmt/colors"; +import * as path from "@std/path"; +import { sprintf } from "@std/fmt/printf"; + +// @ts-types="@/types/usercss-meta.d.ts"; +import usercssMeta from "usercss-meta"; +import { log } from "@/logger.ts"; +import { formatListOfItems } from "@/utils.ts"; + +export async function verifyMetadata( + file: string, + content: string, + userstyle: string, + userstyles: Userstyles, + fix: boolean, +) { + // `usercss-meta` prohibits any '\r' characters, which seem to be present on Windows. + content = content.replaceAll("\r\n", "\n"); + + const assertions = generateAssertions(userstyle, userstyles); + + const { metadata, errors: parsingErrors } = usercssMeta.parse(content, { + allowErrors: true, + }); + const lines = content.split("\n"); + + // Pretty print / annotate the parsing errors. + for (const error of parsingErrors) { + let startLine; + if (error.index !== undefined && !Number.isNaN(error.index)) { + startLine = 0; + for (const line of lines) { + startLine++; + error.index -= line.length + 1; + if (error.index < 0) break; + } + } + + // Skip "missing mandatory metadata property" ParseError, assertions checks below will cover. + if (error.code === "missingMandatory") continue; + + log.error(error.message, { + file, + startLine, + content, + }); + } + + for (const [key, expected] of Object.entries(assertions)) { + const current = metadata[key]; + + const atKey = "@" + key; + + if (current !== expected) { + const line = lines + .findIndex((line) => line.includes(`${atKey} `)) + 1; + + const message = current === undefined + ? sprintf( + "UserCSS metadata property `%s` is undefined", + color.bold(atKey), + ) + : sprintf( + 'UserCSS metadata property `%s` should be "%s" but is "%s"', + color.bold(atKey), + color.green(expected), + color.red(String(current)), + ); + + log.error(message, { + file, + startLine: line !== 0 ? line : undefined, + content, + }); + + if (fix) { + content = content.replace( + `${atKey} ${current}`, + `${atKey} ${expected}`, + ); + } + } + } + + const template = (await Deno.readTextFile( + path.join(REPO_ROOT, "template/catppuccin.user.less"), + )) + .split("\n"); + + for (const variable of ["darkFlavor", "lightFlavor", "accentColor"]) { + const declaration = `@var select ${variable}`; + + const expected = template.find((line) => line.includes(declaration))!; + const current = lines.findIndex((line) => line.includes(declaration)) + + 1; + + if (current === 0) { + // This variable is undefined so there isn't a line for it, so we just put it at the bottom of the variables section. + const line = lines + .findLastIndex((line: string) => line.includes("==/UserStyle== */")) + + 1; + + log.error( + sprintf( + "Metadata variable `%s` should exist", + color.bold(variable), + ), + { + file, + startLine: line !== 0 ? line : undefined, + content, + }, + ); + } else if (expected.trim() !== lines[current - 1].trim()) { + const message = sprintf( + "Options for metadata variable `%s` should be `%s`", + color.bold(variable), + (/\[[^\]]+\]/.exec(expected) as RegExpExecArray)[0], + ); + + log.error(message, { + file, + startLine: current, + content, + }); + + if (fix) { + content = content.replace(lines[current - 1], expected); + } + } + } + + // Parse the UserCSS variables to LESS global variables, e.g. + // `@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]` + // gets parsed as + // `lightFlavor: "latte"`. + const globalVars = Object.entries(metadata.vars) + .reduce((acc, [k, v]) => { + return { ...acc, [k]: v.default }; + }, {}); + + return { + globalVars, + isLess: metadata.preprocessor === assertions.preprocessor, + fixed: content, + }; +} + +function generateAssertions(userstyle: string, userstyles: Userstyles) { + const prefix = "https://github.com/catppuccin/userstyles"; + const userstyleData = userstyles[userstyle]; + + if (!userstyleData) { + log.error( + `Metadata section for \`${color.bold(userstyle)}\` userstyle is missing`, + { + file: "scripts/userstyles.yml", + }, + ); + Deno.exit(1); + } + + return { + name: `${ + [ + userstyleData.name, + ...Object.values(userstyleData.supports ?? {}).map(({ name }) => name), + ].join("/") + } Catppuccin`, + namespace: `github.com/catppuccin/userstyles/styles/${userstyle}`, + homepageURL: `${prefix}/tree/main/styles/${userstyle}`, + description: `Soothing pastel theme for ${ + formatListOfItems([ + userstyleData.name, + ...Object.values(userstyleData.supports ?? {}).map(({ name }) => name), + ]) + }`, + author: "Catppuccin", + updateURL: `${prefix}/raw/main/styles/${userstyle}/catppuccin.user.less`, + supportURL: `${prefix}/issues?q=is%3Aopen+is%3Aissue+label%3A${userstyle}`, + license: "MIT", + preprocessor: "less", + }; +} diff --git a/scripts/lint/stylelint-custom/color-operation.js b/scripts/lint/stylelint-custom/color-operation.js new file mode 100644 index 0000000000..e028616c0c --- /dev/null +++ b/scripts/lint/stylelint-custom/color-operation.js @@ -0,0 +1,181 @@ +// @ts-check + +import stylelint from "stylelint"; +import valueParser from "postcss-value-parser"; +import { flavors } from "@catppuccin/palette"; + +const LESS_COLOR_OP_FUNCTIONS = [ + "saturate", + "desaturate", + "lighten", + "darken", + "fadein", + "fadeout", + "fade", + "mix", + "tint", + "shade", +]; +const NUMERICAL_VALUE_REGEX = /^[\d.]+$/; +const VALID_COLOR_VARIABLES = [ + ...Object.keys(flavors.latte.colors).map((color) => "@" + color), + "@accent", +]; + +/** + * Accepts a color operation amount and normalizes it by multiplying it by 100 if it is less than 1. + * @param {string} amount + * @returns {number} + * + * @example + * normalizeColorOperationAmount("0.3") // 30 + * normalizeColorOperationAmount("30") // 30 + */ +function normalizeColorOperationAmount(amount) { + let value = Number.parseFloat(amount); + if (value < 1) value *= 100; + return value; +} + +const { + createPlugin, + utils: { report, ruleMessages, validateOptions }, +} = stylelint; + +const ruleName = "catppuccin/color-operations"; + +const meta = { + fixable: true, +}; + +const messages = ruleMessages(ruleName, { + amount_not_percentage: () => `Function amount argument must be percentage`, + rgba_used_with_variable: () => `Use 'fade' instead of 'rgba' on variables`, + fadeout_used: () => `Use 'fade' instead of 'fadeout'`, + fadein_used: () => `Use 'fade' instead of 'fadein'`, +}); + +/** @type {import('npm:stylelint').Rule} */ +const ruleFunction = (primary, _secondary, context) => { + return (root, result) => { + const validOptions = validateOptions(result, ruleName, { + actual: primary, + possible: [true], + }); + + if (!validOptions) return; + + root.walkDecls((decl) => { + const parsed = valueParser(decl.value); + + parsed.walk((node) => { + if (node.type !== "function") return; + + const pre = decl.prop.length + + (decl.raws.between?.length || 0); + const startIndex = pre + node.sourceIndex; + const endIndex = pre + node.sourceEndIndex - 1; + + // Prevent using `rgba` with variables to change the alpha value. + if ( + node.value === "rgba" && + node.nodes.length === 3 && + node.nodes[0].value.startsWith("@") && + NUMERICAL_VALUE_REGEX.test(node.nodes[2].value) + ) { + if (context.fix) { + node.value = "fade"; + node.nodes[2].value = normalizeColorOperationAmount( + node.nodes[2].value, + ) + "%"; + } else { + report({ + result, + ruleName, + message: messages.rgba_used_with_variable(), + node: decl, + index: startIndex, + endIndex: endIndex, + }); + } + } + + // Use `fade` instead of `fadeout`. + if ( + node.value === "fadeout" + ) { + if ( + context.fix && + // Only autofixable if it follows the pattern of `fadeout(@, %)`. Otherwise, it's ambiguous. + node.nodes.length === 3 && + VALID_COLOR_VARIABLES.includes(node.nodes[0].value) + ) { + node.value = "fade"; + const value = node.nodes[2].value.replace("%", ""); + // Invert the value to get the fade amount. E.g. `fadeout(@color, 30%)` becomes `fade(@color, 70%)`. + node.nodes[2].value = (100 - normalizeColorOperationAmount(value)) + + "%"; + } else { + report({ + result, + ruleName, + message: messages.fadeout_used(), + node: decl, + index: startIndex, + endIndex: endIndex, + }); + } + } + + // Use `fade` instead of `fadein`. Not autofixable because a) on palette variables, it has no effect (increasing opaqueness on a fully opaque color) and b) it's ambiguous otherwise. + if (node.value === "fadein") { + report({ + result, + ruleName, + message: messages.fadein_used(), + node: decl, + index: startIndex, + endIndex: endIndex, + }); + } + + // Use percentage amount values for Less color operation functions. + + if (!LESS_COLOR_OP_FUNCTIONS.includes(node.value)) return; + + const amountArgIndex = node.value === "mix" ? 4 : 2; + + if ( + node.nodes.length === amountArgIndex + 1 && + !node.nodes[amountArgIndex].value.endsWith("%") + ) { + const value = node.nodes[amountArgIndex].value; + if (!NUMERICAL_VALUE_REGEX.test(value)) return; + + if (context.fix) { + node.nodes[amountArgIndex].value = normalizeColorOperationAmount( + value, + ) + "%"; + } else { + report({ + result, + ruleName, + message: messages.amount_not_percentage(), + node: decl, + index: startIndex + node.nodes[amountArgIndex].sourceIndex, + endIndex: startIndex + node.nodes[amountArgIndex].sourceEndIndex - + 1, + }); + } + } + }); + decl.value = parsed.toString(); + }); + }; +}; + +ruleFunction.ruleName = ruleName; +ruleFunction.messages = messages; +ruleFunction.meta = meta; + +export default createPlugin(ruleName, ruleFunction); diff --git a/scripts/lint/stylelint-custom/index.js b/scripts/lint/stylelint-custom/index.js new file mode 100644 index 0000000000..91278615e7 --- /dev/null +++ b/scripts/lint/stylelint-custom/index.js @@ -0,0 +1,9 @@ +import colorOperation from "@/lint/stylelint-custom/color-operation.js"; +import optimizedSvgs from "@/lint/stylelint-custom/optimized-svgs.js"; +import redundantParentSelector from "@/lint/stylelint-custom/redundant-parent-selector.js"; + +export default [ + colorOperation, + optimizedSvgs, + redundantParentSelector, +]; diff --git a/scripts/lint/stylelint-custom/optimized-svgs.js b/scripts/lint/stylelint-custom/optimized-svgs.js new file mode 100644 index 0000000000..4b2a3cf276 --- /dev/null +++ b/scripts/lint/stylelint-custom/optimized-svgs.js @@ -0,0 +1,88 @@ +import stylelint from "stylelint"; +import valueParser from "postcss-value-parser"; +import { optimize } from "svgo"; + +const { + createPlugin, + utils: { report, ruleMessages, validateOptions }, +} = stylelint; + +const ruleName = "catppuccin/optimized-svgs"; + +const meta = { + fixable: true, +}; + +const messages = ruleMessages(ruleName, { + rejected: () => `Unoptimized SVG detected`, +}); + +/** @type {import('npm:stylelint').Rule} */ +const ruleFunction = (primary, _secondary, context) => { + return (root, result) => { + const validOptions = validateOptions(result, ruleName, { + actual: primary, + possible: [true], + }); + + if (!validOptions) return; + + root.walkRules((rule) => { + for (const node of rule.nodes) { + if (node.type === "rule") { + for (const subnode of node.nodes) { + if (subnode.type === "atrule" && subnode.name === "svg") { + const parsed = valueParser(subnode.value); + + if ( + parsed.nodes.length === 1 && + parsed.nodes[0].type === "function" && + parsed.nodes[0].value === "escape" && + parsed.nodes[0].nodes.length === 1 && + parsed.nodes[0].nodes[0].type === "string" + ) { + const svg = parsed.nodes[0].nodes[0].value; + const optimized = optimize(svg, { + multipass: true, + plugins: [ + "cleanupAttrs", + "cleanupIds", + "collapseGroups", + "convertPathData", + "convertTransform", + "convertStyleToAttrs", + "mergePaths", + "removeComments", + "removeUselessDefs", + "removeScripts", + ], + }).data; + + if (optimized !== svg) { + if (context.fix) { + parsed.nodes[0].nodes[0].quote = "'"; + parsed.nodes[0].nodes[0].value = optimized; + subnode.value = parsed.toString(); + } else { + report({ + result, + ruleName, + message: messages.rejected(), + node: subnode, + }); + } + } + } + } + } + } + } + }); + }; +}; + +ruleFunction.ruleName = ruleName; +ruleFunction.messages = messages; +ruleFunction.meta = meta; + +export default createPlugin(ruleName, ruleFunction); diff --git a/scripts/lint/stylelint-custom/redundant-parent-selector.js b/scripts/lint/stylelint-custom/redundant-parent-selector.js new file mode 100644 index 0000000000..36133065b7 --- /dev/null +++ b/scripts/lint/stylelint-custom/redundant-parent-selector.js @@ -0,0 +1,99 @@ +// @ts-check + +import stylelint from "stylelint"; +import { assert } from "@std/assert"; + +const { + createPlugin, + utils: { report, ruleMessages, validateOptions }, +} = stylelint; + +const ruleName = "catppuccin/no-redundant-parent-selector"; + +const meta = { + fixable: true, +}; + +const messages = ruleMessages(ruleName, { + rejected: () => `Redundant parent selector is not allowed`, +}); + +/** @type {import('npm:stylelint').Rule} */ +const ruleFunction = (primary, _secondary, context) => { + return (root, result) => { + const validOptions = validateOptions(result, ruleName, { + actual: primary, + possible: [true], + }); + + if (!validOptions) return; + + root.walkRules((rule) => { + if (rule.selectors.length === 1 && rule.selector === "&") { + if (context.fix) { + // Moves the rule's properties to the parent rule *in place* of the parent selector. + // & { + // color: red; + // } + // becomes + // color: red; + + const parent = rule.parent; + + if (parent) { + let idx = parent.index(rule); + assert(idx !== -1); + + rule.each((node) => { + if (node.type === "decl") { + parent.insertAfter( + parent.nodes[idx], + node.clone(), + ); + idx++; + } + }); + + rule.remove(); + } + } else { + report({ + result, + ruleName, + message: messages.rejected(), + node: rule, + }); + } + } + + rule.selector = rule.selector.replace( + // Match "& ", at the start or after a comma and optional whitespace, but not when followed by "when". + /(^|,\s*)&\s+(?!when\b)/g, + (match, prefix, offset) => { + const matchIndex = offset + prefix.length; + const matchEndIndex = matchIndex + 1; // `&` is one character long. + + if (context.fix) { + return prefix; // Remove '& ' but keep the "prefix" (start or comma and whitespace). + } else { + report({ + result, + ruleName, + message: messages.rejected(), + node: rule, + index: matchIndex, + endIndex: matchEndIndex, + }); + } + return match; + }, + ); + }); + }; +}; + +ruleFunction.ruleName = ruleName; +ruleFunction.messages = messages; +ruleFunction.meta = meta; + +export default createPlugin(ruleName, ruleFunction); diff --git a/scripts/lint/stylelint.ts b/scripts/lint/stylelint.ts new file mode 100644 index 0000000000..d3a4d29723 --- /dev/null +++ b/scripts/lint/stylelint.ts @@ -0,0 +1,44 @@ +import * as color from "@std/fmt/colors"; + +import "postcss-less"; +import stylelint from "stylelint"; +import "stylelint-config-standard"; +import "stylelint-config-recommended"; + +import { log } from "@/logger.ts"; + +export async function runStylelint( + file: string, + content: string, + fix: boolean, + config: stylelint.Config, +): Promise { + const { results, code } = await stylelint.lint({ + code: content, + config, + fix, + }); + + for (const result of results) { + for (const warning of result.warnings) { + // Some cleanup for fancier logging - dims the rule name. + const message = warning.text?.replace( + new RegExp(`\\(?${warning.rule}\\)?`), + color.dim(`(${warning.rule})`), + ) ?? "unspecified stylelint error"; + + log.log(message, { + file, + startLine: warning.line, + endLine: warning.endLine, + startColumn: warning.column, + endColumn: warning.endColumn, + content, + }, warning.severity); + } + + if (result.warnings.length > 0) throw new Error("stylelint error"); + } + + return code; +} diff --git a/scripts/logger.ts b/scripts/logger.ts new file mode 100644 index 0000000000..85df45f278 --- /dev/null +++ b/scripts/logger.ts @@ -0,0 +1,114 @@ +import { sprintf } from "@std/fmt/printf"; +import * as color from "@std/fmt/colors"; +import core from "@actions/core"; + +export type LoggerProps = core.AnnotationProperties & { + file: string; + content?: string; +}; + +function prettyPrint( + message: string, + props: LoggerProps, + severity: "error" | "warning" = "warning", +) { + const { file, startColumn, startLine } = props; + + const lines = (props.content ?? "").split("\n"); + + const error = [ + color[severity === "error" ? "red" : "yellow"](severity), + message, + ].join(" "); + + const pad = startLine ? (startLine + 1).toString().length : 0; + + const logs = [color.underline( + sprintf( + "%s%s%s", + file, + startLine ? ":" + startLine : "", + startColumn ? ":" + startColumn : "", + ), + )]; + + if (startLine) { + const line = lines[startLine - 1].split("").map((char, i) => { + const startCol = (props.startColumn ?? 0) - 1; + const endCol = (props.endColumn ?? Infinity) - 1; + + if (i >= startCol && i <= endCol) { + return color[severity === "error" ? "red" : "yellow"](char); + } else { + return char; + } + }).join(""); + + logs.push(...[ + sprintf( + "%s│ %s", + color.dim(String(startLine - 1).padStart(pad, " ")), + color.dim(lines[startLine - 2]), + ), + sprintf( + "%s│ %s", + color.bold(String(startLine).padStart(pad, " ")), + line, + ), + sprintf( + "%s│ %s", + color.dim(String(startLine + 1).padStart(pad, " ")), + color.dim(lines[startLine]), + ), + ]); + } + + logs.push( + sprintf( + "%*s╰─► %s", + pad, + "", + error, + ), + ); + + console.log("\n" + logs.join("\n")); +} + +export const log = { + failed: false, + + log: function ( + message: string, + props: LoggerProps, + severity: "error" | "warning", + ) { + if (severity === "error") this.failed = true; + if (Deno.env.has("CI")) { + switch (severity) { + case "error": + core.error(message, props); + break; + case "warning": + core.warning(message, props); + break; + } + } else { + prettyPrint(message, props, severity); + } + }, + + warn: function ( + message: string, + props: LoggerProps, + ) { + this.log(message, props, "warning"); + }, + + error: function ( + message: string, + props: LoggerProps, + ) { + this.log(message, props, "error"); + }, +}; diff --git a/scripts/serve/main.ts b/scripts/serve/main.ts new file mode 100644 index 0000000000..65e47edf78 --- /dev/null +++ b/scripts/serve/main.ts @@ -0,0 +1,111 @@ +import { parseArgs } from "@std/cli"; +import { serveDir } from "@std/http/file-server"; +import { debounce } from "@std/async/debounce"; +import { createHash } from "node:crypto"; + +import * as path from "@std/path"; + +import { REPO_ROOT } from "@/constants.ts"; + +const args = parseArgs(Deno.args, {}); +const userstyle = args._[0] + ?.toString() + .match( + /(?styles\/)?(?[a-z0-9_\-.]+)(?\/)?(?catppuccin\.user\.less)?/, + )?.groups?.userstyle; +if (!userstyle) throw new Error("Invalid userstyle argument"); + +const server = Deno.serve({ + onListen() { + // Disable unnecessary post-startup log. + }, +}, (req: Request) => { + const pathname = new URL(req.url).pathname; + + if (pathname.startsWith("/lib")) { + return serveDir(req, { + fsRoot: "lib", + urlRoot: "lib", + }); + } + + return new Response("404: Not Found", { + status: 404, + }); +}); + +const userstylePath = path.join( + REPO_ROOT, + "styles", + userstyle, + "catppuccin.user.less", +); + +const libPath = path.join( + REPO_ROOT, + "lib", +); + +const tempUserstylePath = await Deno.makeTempFile({ + prefix: "userstyle_", + suffix: ".user.less", +}); + +async function calculateLibChecksum(): Promise { + const files = []; + for await (const entry of Deno.readDir(libPath)) { + if (entry.isFile) { + files.push(path.join(libPath, entry.name)); + } + } + + const hash = createHash("sha256"); + for (const file of files) { + const content = await Deno.readTextFile(file); + hash.update(content); + } + + return hash.digest("hex"); +} + +let lastLibChecksum = await calculateLibChecksum(); + +async function updateTempUserstyle() { + let contents = await Deno.readTextFile(userstylePath); + /* Appends a query parameter suffix to import URLs from userstyles.catppuccin.com, containing the library modules content checksum. */ + const importRegex = + /(@import\s+"https:\/\/userstyles\.catppuccin\.com\/lib\/[^\s]+\.less")/g; + contents = contents.replace(importRegex, (match) => { + return match.replace( + /(\.less)/, + `$1?v=${lastLibChecksum.slice(0, 6)}`, + ); + }); + + /* Then replace the remote userstyles.catppuccin.com host with the local(host) server URL for these imports. */ + contents = contents.replaceAll( + "https://userstyles.catppuccin.com", + `http://localhost:${server.addr.port}`, + ); + + await Deno.writeTextFile(tempUserstylePath, contents); +} + +updateTempUserstyle(); + +console.log(`[serve] ${userstyle} userstyle served at '${tempUserstylePath}'`); + +const reload = debounce(() => { + console.log( + `[serve]: reloaded ${userstyle} userstyle`, + ); + updateTempUserstyle(); +}, 200); + +const watcher = Deno.watchFs([userstylePath, libPath]); +for await (const event of watcher) { + if (event.paths.some((path) => path.startsWith(libPath))) { + lastLibChecksum = await calculateLibChecksum(); + } + reload(); +} diff --git a/scripts/stylus-import/main.ts b/scripts/stylus-import/main.ts new file mode 100644 index 0000000000..6c098ed583 --- /dev/null +++ b/scripts/stylus-import/main.ts @@ -0,0 +1,39 @@ +import usercssMeta from "usercss-meta"; +import { ensureDir } from "@std/fs"; +import { calcStyleDigest } from "https://github.com/openstyles/stylus/raw/8fe35a4b90d85fb911bd7aa1deab4e4733c31150/src/js/sections-util.js"; +import { getUserstylesFiles } from "@/utils.ts"; + +// Recommended settings. +const settings = { + settings: { + updateInterval: 24, + updateOnlyEnabled: true, + patchCsp: true, + "editor.linter": "", + }, +}; + +const data: Record[] = [settings]; + +for (const file of getUserstylesFiles()) { + const content = await Deno.readTextFile(file); + const { metadata } = usercssMeta.parse(content); + + const userstyle = { + enabled: true, + name: metadata.name, + description: metadata.description, + author: metadata.author, + url: metadata.url, + updateUrl: metadata.updateURL, + usercssData: metadata, + sourceCode: content, + } as Record; + + userstyle.originalDigest = await calcStyleDigest(userstyle); + + data.push(userstyle); +} + +await ensureDir("dist"); +await Deno.writeTextFile("dist/import.json", JSON.stringify(data)); diff --git a/scripts/sync-maintainers/main.ts b/scripts/sync-maintainers/main.ts new file mode 100755 index 0000000000..fd9d83fda3 --- /dev/null +++ b/scripts/sync-maintainers/main.ts @@ -0,0 +1,66 @@ +import type { Userstyle } from "@/types/userstyles.d.ts"; + +import * as assert from "@std/assert"; + +import { + addUserstylesTeamMember, + getAuthenticatedOctokit, + getUserstylesData, + getUserstylesTeamMembers, + removeUserstylesTeamMember, +} from "@/utils.ts"; + +const { userstyles } = getUserstylesData(); + +// Lowercase usernames of all the "current-maintainers" in the file. +const maintainers = [ + ...new Set( + Object.values(userstyles).flatMap(( + style: Userstyle, + ) => + style["current-maintainers"].map((name) => { + assert.assertExists(name); + return name.toLowerCase(); + }) + ), + ), +]; + +assert.assertExists(maintainers); +assert.assert(Array.isArray(maintainers)); +assert.assertGreater(maintainers.length, 0); + +const octokit = getAuthenticatedOctokit(); +const team = "userstyles-maintainers"; +const maintainersTeamMembers = await getUserstylesTeamMembers( + octokit, + team, +); + +if (assert.equal(maintainers, maintainersTeamMembers)) { + console.log("Maintainers are in sync."); + Deno.exit(0); +} + +const toAdd = maintainers.filter((m) => !maintainersTeamMembers.includes(m)); +const toRemove = maintainersTeamMembers.filter((m) => !maintainers.includes(m)); + +for (const maintainer of toAdd) { + await addUserstylesTeamMember(octokit, team, maintainer); + console.log( + `Added ${maintainer} to the catppuccin/${team} team.`, + ); +} +console.log( + `${toAdd.length} users added to the catppuccin/${team} team.`, +); + +for (const member of toRemove) { + await removeUserstylesTeamMember(octokit, team, member); + console.log( + `Removed ${member} from the catppuccin/${team} team.`, + ); +} +console.log( + `${toRemove.length} users removed from the catppuccin/${team} team.`, +); diff --git a/scripts/tests/__snapshots__/lib.test.ts.snap b/scripts/tests/__snapshots__/lib.test.ts.snap new file mode 100644 index 0000000000..371e090e4e --- /dev/null +++ b/scripts/tests/__snapshots__/lib.test.ts.snap @@ -0,0 +1,20 @@ +export const snapshot = {}; + +snapshot[`#lib.rgbify 1`] = ` +"/* deno-fmt-ignore */ +/* deno-fmt-ignore */ +.foo { + --bar: 255, 0, 0; +} +" +`; + +snapshot[`#lib.hslify 1`] = ` +"/* deno-fmt-ignore */ +/* deno-fmt-ignore */ +.foo { + --bar: 0, 100%, 50%; +} +" +`; + diff --git a/scripts/tests/lib.test.ts b/scripts/tests/lib.test.ts new file mode 100644 index 0000000000..e0bd17f2bf --- /dev/null +++ b/scripts/tests/lib.test.ts @@ -0,0 +1,40 @@ +import { assertSnapshot } from "@std/testing/snapshot"; + +import { REPO_ROOT } from "../constants.ts"; + +// @ts-types="npm:@types/less"; +import less from "less"; + +async function compile(source: string) { + const result = await less.render( + ` +@import "lib/lib.less"; + +${source} +`, + { paths: [REPO_ROOT] }, + ); + return result.css; +} + +Deno.test("#lib.rgbify", async (ctx) => { + await assertSnapshot( + ctx, + await compile(` +.foo { + --bar: #lib.rgbify(red)[]; +} +`), + ); +}); + +Deno.test("#lib.hslify", async (ctx) => { + await assertSnapshot( + ctx, + await compile(` +.foo { + --bar: #lib.hslify(red)[]; +} +`), + ); +}); diff --git a/scripts/types/mod.ts b/scripts/types/mod.ts new file mode 100644 index 0000000000..253094e598 --- /dev/null +++ b/scripts/types/mod.ts @@ -0,0 +1,2 @@ +export * as UserstylesSchema from "@/types/userstyles.d.ts"; +export * as CategoriesSchema from "@catppuccin/catppuccin/resources/types/categories.d.ts"; diff --git a/scripts/types/update-types.ts b/scripts/types/update-types.ts new file mode 100755 index 0000000000..12c2c20f38 --- /dev/null +++ b/scripts/types/update-types.ts @@ -0,0 +1,15 @@ +import { REPO_ROOT, USERSTYLES_SCHEMA } from "@/constants.ts"; + +import * as path from "@std/path"; +import { compile, type JSONSchema } from "json-schema-to-typescript"; + +const TYPES_ROOT = path.join(REPO_ROOT, "scripts/types"); + +const types = await compile( + USERSTYLES_SCHEMA as JSONSchema, + "UserstylesSchema", + { + bannerComment: "// deno-fmt-ignore-file", + }, +); +Deno.writeTextFileSync(path.join(TYPES_ROOT, "userstyles.d.ts"), types); diff --git a/scripts/types/usercss-meta.d.ts b/scripts/types/usercss-meta.d.ts new file mode 100644 index 0000000000..fd2cddb4f7 --- /dev/null +++ b/scripts/types/usercss-meta.d.ts @@ -0,0 +1,223 @@ +declare namespace usercssMeta { + export const ParseError: ParseError; + + export interface ParseError extends Error { + code: + | "invalidCheckboxDefault" + | "invalidRange" + | "invalidRangeMultipleUnits" + | "invalidRangeTooManyValues" + | "invalidRangeValue" + | "invalidRangeDefault" + | "invalidRangeMin" + | "invalidRangeMax" + | "invalidRangeStep" + | "invalidRangeUnits" + | "invalidNumber" + | "invalidSelect" + | "invalidSelectValue" + | "invalidSelectEmptyOptions" + | "invalidSelectLabel" + | "invalidSelectMultipleDefaults" + | "invalidSelectNameDuplicated" + | "invalidString" + | "invalidURLProtocol" + | "invalidVersion" + | "invalidWord" + | "missingChar" + | "missingEOT" + | "missingMandatory" + | "missingValue" + | "unknownJSONLiteral" + | "unknownMeta" + | "unknownVarType"; + + message: string; + + /** + * The string index where the error occurs + */ + index: number; + + /** + * An array of values that is used to compose the error message. + * This allows other clients to generate i18n error message. + */ + args: unknown[]; + } + + // TODO: export util types + // export const util: {}; + + /** + * This is a shortcut of `createParser(options).parse(text);` + */ + export function parse( + content: string, + options?: ParserOptions, + ): ParseResult; + + /** + * Create a metadata parser. + */ + export function createParser(options?: ParserOptions): Parser; + + // TODO: export stringify types + // export function stringify( + // metadata: Metadata, + // options: StringifierOptions, + // ): string; + // export function createStringifier(options: StringifierOptions): Stringifier; + + type Parser = { + /** + * Parse the text (metadata header) and return the result. + */ + parse: typeof parse; + + /** + * Validate the value of the variable object. + * This function uses the validators defined in `createParser`. + */ + validateVar: (varObj: VarObj) => void; + }; + + type ParserOptions = { + /** + * `unknownKey` decides how to parse unknown keys. Possible values are: + * - `ignore`: The directive is ignored. Default. + * - `assign`: Assign the text value (characters before `\s*\n`) to result object. + * - `throw`: Throw a `ParseError`. + * @default "ignore" + */ + unknownKey?: "ignore" | "assign" | "throw"; + + /** + * mandatoryKeys marks multiple keys as mandatory. If some keys are missing then throw a ParseError + * @default ["name", "namespace", "version"] + */ + mandatoryKeys?: string[]; + + /** + * A `key`/`parseFunction` map. + * It allows users to extend the parser. + * + * @example + * const parser = createParser({ + * mandatoryKeys: [], + * parseKey: { + * myKey: util.parseNumber + * } + * }); + * const {metadata} = parser.parse(` + * /* ==UserStyle== + * \@myKey 123456 + * ==/UserStyle== + * `); + * assert.equal(metadata.myKey, 123456); + */ + parseKey?: Record; + + /** + * A `variableType`/`parseFunction` map. + * It extends the parser to parse additional variable types. + * + * @example + * const parser = createParser({ + * mandatoryKeys: [], + * parseVar: { + * myvar: util.parseNumber + * } + * }); + * const {metadata} = parser.parse(`/* ==UserStyle== + * \@var myvar var-name 'Customized variable' 123456 + * ==/UserStyle== *\/`); + * const va = metadata.vars['var-name']; + * assert.equal(va.type, 'myvar'); + * assert.equal(va.label, 'Customized variable'); + * assert.equal(va.default, 123456); + */ + parseVar?: Record; + /** + * A `key`/`validateFunction` map, which is used to validate the metadata value. + * The function accepts a state object. + * + * @example + * const parser = createParser({ + * validateKey: { + * updateURL: state => { + * if (/example\.com/.test(state.value)) { + * throw new ParseError({ + * message: 'Example.com is not a good URL', + * index: state.valueIndex + * }); + * } + * } + * } + * }); + */ + validateKey?: Record; + + /** + * A `variableType`/`validateFunction` map, which is used to validate variables. + * The function accepts a state object. + * + * @example + * const parser = createParser({ + * validateVar: { + * color: state => { + * if (state.value === 'red') { + * throw new ParseError({ + * message: '`red` is not allowed', + * index: state.valueIndex + * }); + * } + * } + * } + * }); + */ + validateVar?: Record void>; + + /** + * If allowErrors is true, the parser will collect parsing errors while + * `parser.parse()` and return them as {@link ParseResult.errors} + * Otherwise, the first parsing error will be thrown. + * @default false + */ + allowErrors?: boolean; + }; + + export type StateObject = { + key: string; + type: string; + value: string; + varResult: unknown; + text: string; + lastIndex: number; + valueIndex: number; + shouldIgnore: boolean; + }; + + type validateFn = (state: StateObject) => void; + + type VarObj = { + label: string; + name: string; + value?: string; + default?: string; + options?: unknown; + }; + type Metadata = { + vars: VarObj[]; + [key: string]: unknown; + }; + + type ParseResult = { + metadata: Metadata; + errors: ParseError[]; + }; +} + +declare module "usercss-meta" { + export = usercssMeta; +} diff --git a/scripts/types/userstyles.d.ts b/scripts/types/userstyles.d.ts new file mode 100644 index 0000000000..cdac1bd8c3 --- /dev/null +++ b/scripts/types/userstyles.d.ts @@ -0,0 +1,147 @@ +// deno-fmt-ignore-file + +/** + * The name of the userstyle. + */ +export type Name = string; +/** + * The url of the website that is being themed. + */ +export type Link = string; +/** + * The categories that fit the userstyle the most, the first category is the primary category which the userstyle will be listed under on the README. + * + * @minItems 1 + * @maxItems 3 + */ +export type Categories = [Category] | [Category, Category] | [Category, Category, Category]; +export type Category = + | "3d_modelling" + | "analytics" + | "application_launcher" + | "artificial_intelligence" + | "boot_loader" + | "browser" + | "browser_extension" + | "cli" + | "code_editor" + | "desktop_environment" + | "development" + | "discussion_forum" + | "document_viewer" + | "documentation_generator" + | "education" + | "email_client" + | "entertainment" + | "file_manager" + | "game" + | "game_development" + | "health_and_fitness" + | "library" + | "music" + | "news_and_journalism" + | "note_taking" + | "notification_daemon" + | "package_registry" + | "photo_and_video" + | "productivity" + | "search_engine" + | "social_networking" + | "syntax_highlighting" + | "system" + | "terminal" + | "translation_tool" + | "userstyle" + | "wiki" + | "window_manager"; +/** + * The fill color for the icon on the Catppuccin website, which should match the color used by Simple Icons. If the icon does not exist in Simple Icons, choose the most suitable color from the branding. + */ +export type Color = + | "rosewater" + | "flamingo" + | "pink" + | "mauve" + | "red" + | "maroon" + | "peach" + | "yellow" + | "green" + | "teal" + | "sky" + | "sapphire" + | "blue" + | "lavender" + | "text"; +/** + * The icon to use on the website. This should be the same name as the SVG file on https://simpleicons.org/. If a `.svg` suffix is present, it's taken from the local website repository resources. + */ +export type Icon = string; +/** + * An additional note that users should read. + */ +export type Note = string; +/** + * The name of the website. + */ +export type WebsiteName = string; +/** + * List of all active maintainers for this userstyle. + */ +export type CurrentMaintainers = string[]; +/** + * List of all users that have maintained this userstyle in the past. + * + * @minItems 1 + */ +export type PastMaintainers = [string, ...string[]]; +/** + * Represents all maintainers and contributors to all userstyles. + * + * @minItems 1 + */ +export type AllCollaborators = [string, ...string[]]; + +export interface UserstylesSchema { + userstyles?: Userstyles; + collaborators?: AllCollaborators; +} +/** + * All userstyles in the Catppuccin organisation. + */ +export interface Userstyles { + [k: string]: Userstyle; +} +/** + * The directory of the userstyle. + * + * This interface was referenced by `Userstyles`'s JSON-Schema definition + * via the `patternProperty` "[A-Za-z0-9_\-]". + */ +export interface Userstyle { + name: Name; + link: Link; + categories: Categories; + color: Color; + icon?: Icon; + note?: Note; + supports?: Supports; + "current-maintainers": CurrentMaintainers; + "past-maintainers"?: PastMaintainers; +} +/** + * All websites that the userstyle also supports. + */ +export interface Supports { + [k: string]: Website; +} +/** + * The unique identifier of the supported website, usually the name of the website lowercased. + * + * This interface was referenced by `Supports`'s JSON-Schema definition + * via the `patternProperty` "[A-Za-z0-9_\-]". + */ +export interface Website { + name: WebsiteName; + link: Link; +} diff --git a/scripts/userstyles.schema.json b/scripts/userstyles.schema.json new file mode 100644 index 0000000000..01846fe7c4 --- /dev/null +++ b/scripts/userstyles.schema.json @@ -0,0 +1,173 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "type": "object", + "additionalProperties": false, + "properties": { + "userstyles": { + "$id": "#userstyles", + "title": "Userstyles", + "type": "object", + "description": "All userstyles in the Catppuccin organisation.", + "patternProperties": { + "[A-Za-z0-9_\\-]": { + "$id": "#userstyles/userstyle", + "title": "Userstyle", + "type": "object", + "description": "The directory of the userstyle.", + "examples": ["youtube"], + "additionalProperties": false, + "properties": { + "name": { + "description": "The name of the userstyle.", + "$ref": "#/$defs/name" + }, + "link": { + "$ref": "#/$defs/link" + }, + "categories": { + "$ref": "#/$defs/categories" + }, + "color": { + "$ref": "#/$defs/color" + }, + "icon": { + "$ref": "#/$defs/icon" + }, + "note": { + "$id": "#userstyles/userstyle/note", + "title": "Note", + "description": "An additional note that users should read.", + "type": "string" + }, + "supports": { + "$id": "#userstyles/userstyle/supports", + "title": "Supports", + "type": "object", + "description": "All websites that the userstyle also supports.", + "patternProperties": { + "[A-Za-z0-9_\\-]": { + "$id": "#userstyles/userstyle/supports/website", + "title": "Website", + "type": "object", + "description": "The unique identifier of the supported website, usually the name of the website lowercased.", + "examples": ["anichart"], + "additionalProperties": false, + "properties": { + "name": { + "$id": "#userstyles/userstyle/supports/website/name", + "title": "Website Name", + "description": "The name of the website.", + "examples": ["AniChart"], + "$ref": "#/$defs/name" + }, + "link": { + "$ref": "#/$defs/link" + } + }, + "required": [ + "name", + "link" + ] + } + } + }, + "current-maintainers": { + "$id": "#userstyles/userstyle/current-maintainers", + "title": "Current Maintainers", + "description": "List of all active maintainers for this userstyle.", + "type": "array", + "$ref": "#/$defs/collaborators" + }, + "past-maintainers": { + "$id": "#userstyles/userstyle/past-maintainers", + "title": "Past Maintainers", + "type": "array", + "minItems": 1, + "description": "List of all users that have maintained this userstyle in the past.", + "$ref": "#/$defs/collaborators" + } + }, + "required": [ + "name", + "categories", + "link", + "color", + "current-maintainers" + ] + } + } + }, + "collaborators": { + "$id": "#all-collaborators", + "title": "All Collaborators", + "description": "Represents all maintainers and contributors to all userstyles.", + "type": "array", + "minItems": 1, + "$ref": "#/$defs/collaborators" + } + }, + "$defs": { + "name": { + "$id": "#name", + "title": "Name", + "type": "string", + "examples": ["YouTube"] + }, + "link": { + "$id": "#link", + "title": "Link", + "description": "The url of the website that is being themed.", + "type": "string" + }, + "color": { + "$id": "#color", + "title": "Color", + "description": "The fill color for the icon on the Catppuccin website, which should match the color used by Simple Icons. If the icon does not exist in Simple Icons, choose the most suitable color from the branding.", + "type": "string", + "enum": [ + "rosewater", + "flamingo", + "pink", + "mauve", + "red", + "maroon", + "peach", + "yellow", + "green", + "teal", + "sky", + "sapphire", + "blue", + "lavender", + "text" + ], + "examples": ["pink"] + }, + "icon": { + "$id": "#icon", + "title": "Icon", + "description": "The icon to use on the website. This should be the same name as the SVG file on https://simpleicons.org/. If a `.svg` suffix is present, it's taken from the local website repository resources.", + "type": "string", + "examples": ["twitch", "twitch.svg"] + }, + "collaborators": { + "$id": "#collaborators", + "description": "The GitHub username of the collaborator.", + "type": "array", + "items": { + "type": "string" + } + }, + "categories": { + "$id": "#categories", + "type": "array", + "title": "Categories", + "description": "The categories that fit the userstyle the most, the first category is the primary category which the userstyle will be listed under on the README.", + "minItems": 1, + "maxItems": 3, + "items": { + "$ref": "https://raw.githubusercontent.com/catppuccin/catppuccin/refs/heads/main/resources/categories.schema.json#/$defs/category" + } + } + } +} diff --git a/scripts/userstyles.yml b/scripts/userstyles.yml new file mode 100644 index 0000000000..57c1872f88 --- /dev/null +++ b/scripts/userstyles.yml @@ -0,0 +1,1028 @@ +collaborators: + - &nik-rev nik-rev + - &AlwaysNur AlwaysNur + - &AnubisNekhet AnubisNekhet + - &ndsboy ndsboy + - &jn-sena jn-sena + - &watatomo watatomo + - &ryanccn ryanccn + - &Pocco81 Pocco81 + - &GlowingUmbreon GlowingUmbreon + - &justTOBBI justTOBBI + - &unseen-ninja unseen-ninja + - &lucasmelin lucasmelin + - &Gingeh Gingeh + - &isabelroses isabelroses + - &thismoon thismoon + - &sydrinea sydrinea + - &soya-daizu soya-daizu + - &jayylmao jayylmao + - &Sekki21956 Sekki21956 + - &nekowinston nekowinston + - &Tnixc Tnixc + - &elkrien elkrien + - &TheMemeSniper TheMemeSniper + - &spaghettiosareyummy spaghettiosareyummy + - &Stonks3141 Stonks3141 + - &rubyowo rubyowo + - &Gandalf-the-Blue Gandalf-the-Blue + - &FrancoRav FrancoRav + - &coldenate coldenate + - &skelebro1 skelebro1 + - &r58Playz r58Playz + - &rockquiet rockquiet + - &Nyameliaaaa Nyameliaaaa + - &Meowcelinee Meowcelinee + - &bartlibert bartlibert + - &BlankParticle BlankParticle + - &GenShibe GenShibe + - &coopw1 coopw1 + - &RoootTheFox RoootTheFox + - &itzTheMeow itzTheMeow + - &Dandraghas Dandraghas + - &uncenter uncenter + - &thomas-philippot thomas-philippot + - &Guaxinim5573 Guaxinim5573 + - &trinkey trinkey + - &NK308 NK308 + - &00dani 00dani + - &kerichdev kerichdev + - &Flapperoo Flapperoo + - &sofiedotcafe sofiedotcafe + - &stellophiliac stellophiliac + - &bunfluff bunfluff + - &NeonGamerBot-QK NeonGamerBot-QK + - &orangci orangci + - &Lichthagel Lichthagel + - &comfysage comfysage + - &janTatesa janTatesa + - &mxgic1337 mxgic1337 + - &steinuil steinuil + - &husjon husjon + - &RaiderHCPlay RaiderHCPlay + - &ruiiiijiiiiang ruiiiijiiiiang + - &pynappo pynappo + - &nuexq nuexq + - &WalkQuackBack WalkQuackBack + - &gradylink gradylink + - &ashish0kumar ashish0kumar + - &shnjd shnjd + - &zenoix zenoix + - &incognitotgt incognitotgt + - &NekoDrone NekoDrone + - &adamperkowski adamperkowski + - &ImenaOphelia ImenaOphelia + - &koibtw koibtw + - &TheAnonymousCrusher TheAnonymousCrusher + - &42willow 42willow + +userstyles: + advent-of-code: + name: Advent Of Code + link: https://adventofcode.com + categories: [game, entertainment] + icon: adventofcode + color: yellow + current-maintainers: [*rubyowo] + alacritty.org: + name: alacritty.org + link: https://alacritty.org + categories: [terminal, development] + icon: alacritty + color: peach + current-maintainers: [*AlwaysNur] + alternativeto: + name: AlternativeTo + link: https://alternativeto.net + categories: [productivity, discussion_forum] + color: sapphire + current-maintainers: [*thismoon] + amplenote: + name: Amplenote + link: https://www.amplenote.com + categories: [note_taking] + color: blue + current-maintainers: [*stellophiliac] + anilist: + name: AniList + link: https://anilist.co + categories: [entertainment, social_networking] + icon: anilist + color: sky + supports: + anichart: + name: AniChart + link: https://anichart.net + current-maintainers: [*AnubisNekhet] + anonymous-overflow: + name: Anonymous Overflow + categories: [discussion_forum, wiki] + color: green + link: https://github.com/httpjamesm/AnonymousOverflow + current-maintainers: [*ImenaOphelia] + arch-wiki: + name: Arch Wiki + link: https://wiki.archlinux.org + categories: [wiki] + icon: archlinux + color: blue + note: "Make sure to use the default **Light** theme." + current-maintainers: [] + past-maintainers: [*GenShibe] + boringproxy: + name: boringproxy + link: https://boringproxy.io + categories: [development] + color: text + current-maintainers: [*Gandalf-the-Blue] + brave-search: + name: Brave Search + link: https://search.brave.com + categories: [search_engine] + icon: brave + color: peach + note: "Make sure to set the theme to either dark or light in Brave Search settings, as the automatic setting will not work." + current-maintainers: [*ndsboy] + bsky: + name: Bluesky Social + link: https://bsky.app + categories: [social_networking] + icon: bluesky + color: blue + current-maintainers: [*RoootTheFox] + bstats: + name: bStats + link: https://bstats.org + categories: [analytics, game_development] + color: green + note: "Make sure to use the default **Teal** theme from the built-in color picker (located at the bottom of the page) for the best experience!" + current-maintainers: [*rockquiet] + canvas-lms: + name: Canvas LMS + link: https://www.instructure.com/canvas + categories: [education] + icon: canvas + color: red + current-maintainers: [*pynappo] + past-maintainers: [*TheMemeSniper] + chatgpt: + name: ChatGPT + link: https://chat.openai.com + categories: [artificial_intelligence] + icon: openai + color: green + current-maintainers: [*uncenter] + past-maintainers: [*rubyowo] + chatreplay: + name: ChatReplay + link: https://chatreplay.stream + categories: [entertainment, social_networking] + color: peach + current-maintainers: [*AnubisNekhet] + chess.com: + name: Chess.com + link: https://chess.com + categories: [game] + icon: chessdotcom + color: green + current-maintainers: [*uncenter] + past-maintainers: [*skelebro1, *isabelroses, *coldenate] + cinny: + name: Cinny + link: https://cinny.in + categories: [social_networking] + color: text + current-maintainers: [*jn-sena] + claude: + name: Claude + link: https://claude.ai + categories: [artificial_intelligence, productivity] + color: peach + icon: claude + current-maintainers: [*ruiiiijiiiiang] + codeberg: + name: Codeberg + link: https://codeberg.org + categories: [development] + icon: codeberg + color: blue + current-maintainers: [*isabelroses] + past-maintainers: [*justTOBBI] + cobalt: + name: cobalt + link: https://cobalt.tools + categories: [productivity, photo_and_video] + color: text + current-maintainers: [*kerichdev] + crates.io: + name: crates.io + link: https://crates.io + categories: [package_registry] + icon: rust + color: yellow + current-maintainers: [*uncenter] + crowdin: + name: Crowdin + link: https://crowdin.com + categories: [translation_tool] + icon: crowdin + color: text + current-maintainers: [*ryanccn] + deepl: + name: DeepL + link: https://deepl.com + categories: [translation_tool] + icon: deepl + color: blue + current-maintainers: [*watatomo] + deepseek: + name: DeepSeek + link: https://chat.deepseek.com + categories: [artificial_intelligence] + icon: deepseek + color: blue + current-maintainers: [*WalkQuackBack] + desmos: + name: Desmos + link: https://desmos.com + categories: [education] + color: green + note: "This userstyle is currently incompatible with DesModder's Visual>Syntax Highlighting plugin." + current-maintainers: [*gradylink] + dev.to: + name: DEV Community + link: https://dev.to + categories: [discussion_forum] + icon: devdotto + color: text + current-maintainers: [*shnjd] + devdocs: + name: DevDocs + link: https://devdocs.io + categories: [development, wiki] + color: text + current-maintainers: [*ashish0kumar] + docs.deno.com: + name: docs.deno.com + link: https://docs.deno.com + categories: [development] + icon: deno + color: green + current-maintainers: [*uncenter] + docs.rs: + name: docs.rs + link: https://docs.rs + categories: [development] + icon: docsdotrs + color: yellow + current-maintainers: [*uncenter] + duckduckgo: + name: DuckDuckGo + link: https://duckduckgo.com + categories: [search_engine] + icon: duckduckgo + color: peach + current-maintainers: [*GenShibe] + ecosia: + name: Ecosia + link: https://www.ecosia.org + categories: [search_engine] + color: green + current-maintainers: [] + past-maintainers: [*isabelroses] + elk: + name: Elk + link: https://elk.zone + categories: [social_networking] + color: peach + current-maintainers: [*ryanccn] + freedesktop: + name: freedesktop.org + link: https://www.freedesktop.org + categories: [development] + icon: freedesktopdotorg + color: blue + current-maintainers: [*NK308] + formative: + name: Formative + link: https://app.formative.com/home + categories: [education] + color: blue + current-maintainers: [] + past-maintainers: [*r58Playz] + ghostty.org: + name: Ghostty.org + link: https://ghostty.org + categories: [terminal] + color: blue + current-maintainers: [*uncenter] + github: + name: GitHub + link: https://github.com + categories: [development, productivity] + icon: github + color: text + note: "Use the **Light default** or **Dark default** themes and disable *Increase contrast* under GitHub's [Theme preferences](https://github.com/settings/appearance)." + current-maintainers: [*uncenter] + past-maintainers: [*unseen-ninja, *Pocco81, *GlowingUmbreon] + gleam.run: + name: gleam.run + link: https://gleam.run + categories: [development] + icon: gleam + color: pink + current-maintainers: [*uncenter] + gmail: + name: Gmail + link: https://mail.google.com + categories: [email_client] + icon: gmail + color: peach + note: "Switch to the default dark theme via the **Settings** > **Themes** > **View all** for the best experience!" + current-maintainers: [*uncenter] + past-maintainers: [*isabelroses] + go.dev: + name: go.dev + link: https://go.dev + categories: [development, wiki] + icon: go + color: sapphire + current-maintainers: [*Flapperoo] + google: + name: Google + link: https://google.com + categories: [search_engine] + icon: google + color: sapphire + current-maintainers: [] + google-drive: + name: Google Drive + link: https://drive.google.com + categories: [productivity] + icon: googledrive + color: blue + current-maintainers: [*r58Playz, *WalkQuackBack] + google-photos: + name: Google Photos + link: https://photos.google.com + categories: [photo_and_video] + icon: googlephotos + color: sapphire + current-maintainers: [*GenShibe, *WalkQuackBack] + grabify: + name: Grabify + link: https://grabify.link + categories: [development, productivity] + color: teal + current-maintainers: [*trinkey] + graphite: + name: Graphite + link: https://app.graphite.com + categories: [development, productivity] + icon: graphite + color: text + current-maintainers: [] + past-maintainers: [*isabelroses] + google-gemini: + name: Google Gemini + link: https://gemini.google.com + categories: [artificial_intelligence] + icon: googlegemini + color: mauve + current-maintainers: [*Dandraghas, *WalkQuackBack] + hackage: + name: Hackage + link: https://hackage.haskell.org + categories: [package_registry] + icon: haskell + color: mauve + current-maintainers: [*jn-sena] + hacker-news: + name: Hacker News + link: https://news.ycombinator.com + categories: [discussion_forum] + icon: ycombinator + color: peach + current-maintainers: [*lucasmelin] + have-i-been-pwned: + name: Have I Been Pwned + link: https://haveibeenpwned.com + categories: [productivity] + color: blue + current-maintainers: [*trinkey] + holodex: + name: Holodex + link: https://holodex.net + categories: [entertainment, social_networking, photo_and_video] + color: pink + note: Holodex's selected theme is ignored. + current-maintainers: [*Guaxinim5573] + home-manager-options-search: + name: Home Manager Options Search + link: https://home-manager-options.extranix.com + categories: [development] + color: blue + current-maintainers: [*uncenter] + homepage: + name: homepage + link: https://github.com/benphelps/homepage + categories: [productivity] + color: sky + current-maintainers: [*Gandalf-the-Blue] + hoogle: + name: Hoogle + link: https://hoogle.haskell.org + categories: [development, search_engine] + icon: haskell + color: mauve + current-maintainers: [*jn-sena] + hoppscotch: + name: Hoppscotch + link: https://hoppscotch.io + categories: [development, productivity] + icon: hoppscotch + color: green + current-maintainers: [*justTOBBI] + learn-x-in-y-minutes: + name: Learn X in Y Minutes + link: https://learnxinyminutes.com + categories: [development, wiki] + color: blue + current-maintainers: [*nik-rev] + hyperpipe: + name: Hyperpipe + link: https://hyperpipe.surge.sh + categories: [music] + color: teal + current-maintainers: [] + past-maintainers: [*jn-sena] + ichi.moe: + name: ichi.moe + link: https://ichi.moe + categories: [translation_tool] + color: pink + current-maintainers: [*watatomo] + inoreader: + name: inoreader + link: https://inoreader.com + categories: [productivity] + icon: inoreader + color: blue + current-maintainers: [*thomas-philippot] + indie-wiki-buddy: + name: Indie Wiki Buddy + link: https://getindie.wiki + categories: [browser_extension] + color: blue + current-maintainers: [*thismoon] + instagram: + name: Instagram + link: https://instagram.com + categories: [social_networking, photo_and_video] + icon: instagram + color: pink + current-maintainers: [*GenShibe] + past-maintainers: [*isabelroses] + invidious: + name: Invidious + link: https://invidious.io + categories: [entertainment] + icon: youtube + color: red + current-maintainers: [] + past-maintainers: [*unseen-ninja, *nekowinston] + invokeai: + name: InvokeAI + link: https://invoke-ai.github.io/InvokeAI + categories: [artificial_intelligence, productivity] + color: yellow + current-maintainers: [*ryanccn] + jisho: + name: Jisho + link: https://jisho.org + categories: [translation_tool] + color: green + current-maintainers: [*Lichthagel] + keybr.com: + name: keybr.com + link: https://keybr.com + categories: [productivity, education] + color: text + current-maintainers: [*janTatesa] + keyoxide: + name: Keyoxide + link: https://keyoxide.org + categories: [development] + color: mauve + current-maintainers: [*uncenter] + lastfm: + name: Last.fm + link: https://last.fm + categories: [music, analytics] + icon: lastdotfm + color: red + current-maintainers: [*AnubisNekhet] + past-maintainers: [*Gingeh] + lemmy: + name: Lemmy + link: https://lemmy.world + categories: [discussion_forum, social_networking] + icon: lemmy + color: green + current-maintainers: [*Gandalf-the-Blue] + libreddit: + name: Libreddit + link: https://github.com/libreddit/libreddit + categories: [discussion_forum, social_networking] + icon: reddit + color: peach + supports: + redlib: + name: Redlib + link: https://github.com/redlib-org/redlib + current-maintainers: [] + past-maintainers: [*unseen-ninja] + lichess: + name: Lichess + link: https://lichess.org + categories: [game] + icon: lichess + color: text + note: "Switch to a default Lichess light/dark theme via **Username** > **Background** for the best experience!" + current-maintainers: [*coopw1, *zenoix] + lingva: + name: Lingva + link: https://github.com/thedaviddelta/lingva-translate + categories: [translation_tool] + color: green + current-maintainers: [*rubyowo] + linkedin: + name: LinkedIn + link: https://www.linkedin.com + categories: [social_networking, productivity] + icon: linkedin + color: blue + current-maintainers: [] + past-maintainers: [*isabelroses] + listenbrainz: + name: ListenBrainz + link: https://listenbrainz.org + categories: [music] + icon: musicbrainz + color: peach + current-maintainers: [*00dani] + lobste.rs: + name: Lobsters + link: https://lobste.rs + categories: [discussion_forum, social_networking] + icon: lobsters + color: red + current-maintainers: [*steinuil] + mastodon: + name: Mastodon + link: https://github.com/mastodon/mastodon + categories: [social_networking] + icon: mastodon + color: lavender + current-maintainers: [*comfysage] + past-maintainers: [*unseen-ninja, *isabelroses] + mdbook: + name: mdBook + link: https://rust-lang.github.io/mdBook/ + categories: [documentation_generator] + icon: mdbook + color: text + current-maintainers: [*uncenter] + mdn: + name: MDN + link: https://developer.mozilla.org + categories: [development, wiki] + icon: mdnwebdocs + color: text + current-maintainers: [*soya-daizu] + modrinth: + name: Modrinth + link: https://modrinth.com + categories: [game] + icon: modrinth + color: green + current-maintainers: [*thismoon] + microsoft-word: + name: Microsoft Word + link: https://office.com + categories: [productivity] + icon: microsoftword + color: blue + current-maintainers: [] + migadu-webmail: + name: Migadu Webmail + link: https://webmail.migadu.com + categories: [email_client] + icon: migadu + color: blue + note: Set Migadu Webmail's built-in theme to 'Migadu' for the optimal experience. + current-maintainers: [*uncenter] + minesweeper: + name: Minesweeper Online + link: https://minesweeper.online + categories: [game] + color: text + current-maintainers: [] + namemc: + name: NameMC + link: https://namemc.com + categories: [game_development, analytics] + icon: namemc + color: blue + current-maintainers: [*Meowcelinee] + neovim.io: + name: neovim.io + link: https://neovim.io + categories: [development] + icon: neovim + color: green + current-maintainers: [*comfysage] + npmx: + name: npmx + link: https://npmx.dev + categories: [package_registry] + color: text + note: npmx-specific accent color appearance options at https://npmx.dev/settings are overriden by this userstyle. + current-maintainers: [*42willow] + nitter: + name: Nitter + link: https://nitter.net + categories: [social_networking, discussion_forum] + icon: twitter + color: blue + current-maintainers: [*AnubisNekhet] + nixos-manual: + name: NixOS Manual + link: https://nixos.org/manual/nixos + categories: [development, wiki] + icon: nixos + color: blue + supports: + nixpkgs-manual: + name: "Nixpkgs Manual" + link: https://nixos.org/manual/nixpkgs + current-maintainers: [*husjon] + nixos-search: + name: NixOS Search + link: https://search.nixos.org + categories: [search_engine] + icon: nixos + color: blue + current-maintainers: [*sydrinea] + wiki.nixos.org: + name: NixOS Wiki + link: https://wiki.nixos.org + categories: [wiki, development] + icon: nixos + color: blue + current-maintainers: [*orangci] + past-maintainers: [*nekowinston] + npm: + name: npm + link: https://www.npmjs.com + categories: [package_registry] + icon: npm + color: red + current-maintainers: [*uncenter] + ollama: + name: Ollama + link: https://ollama.com + categories: [artificial_intelligence, development] + color: text + current-maintainers: [*NeonGamerBot-QK] + openmediavault: + name: openmediavault + link: https://www.openmediavault.org + categories: [file_manager, productivity] + icon: openmediavault + color: sky + current-maintainers: [*Gandalf-the-Blue] + paste.rs: + name: paste.rs + link: https://paste.rs + categories: [development] + icon: pastebin + color: peach + current-maintainers: [*Guaxinim5573] + past-maintainers: [*Stonks3141] + perplexity: + name: Perplexity + link: https://www.perplexity.ai + categories: [artificial_intelligence, search_engine] + icon: perplexity + color: teal + current-maintainers: [*Tnixc] + past-maintainers: [*isabelroses] + phanpy: + name: Phanpy + link: https://phanpy.social + categories: [social_networking] + color: blue + current-maintainers: [*Guaxinim5573] + picrew: + name: Picrew + link: https://picrew.me + categories: [entertainment, productivity] + icon: picrew + color: yellow + current-maintainers: [*Meowcelinee] + pinterest: + name: Pinterest + link: https://www.pinterest.com + categories: [photo_and_video, entertainment, social_networking] + icon: pinterest + color: red + current-maintainers: [*nuexq] + past-maintainers: [*jn-sena] + planet-minecraft: + name: Planet Minecraft + link: https://planetminecraft.com + categories: [game] + color: green + current-maintainers: [*Nyameliaaaa] + poe: + name: Poe + link: https://poe.com + categories: [artificial_intelligence] + icon: poe + color: blue + current-maintainers: [*TheAnonymousCrusher] + porkbun: + name: Porkbun + link: https://porkbun.com + categories: [productivity] + icon: porkbun + color: pink + current-maintainers: [*uncenter] + pronouns.cc: + name: pronouns.cc + link: https://pronouns.cc + categories: [social_networking] + color: mauve + current-maintainers: [*comfysage] + past-maintainers: [*NeonGamerBot-QK] + pronouns.page: + name: Pronouns.page + link: https://pronouns.page + categories: [social_networking] + icon: pronounsdotpage + color: pink + current-maintainers: [*uncenter] + proton: + name: Proton + link: https://proton.me + categories: [productivity, email_client] + icon: protonmail + color: mauve + note: Set Proton Mail's built-in theme to 'Snow' if you're using Latte or 'Carbon' if you're using the others. + current-maintainers: [*soya-daizu] + pypi: + name: PyPI + link: https://pypi.org + categories: [package_registry] + color: sapphire + current-maintainers: [*trinkey] + pythonanywhere: + name: PythonAnywhere + link: https://pythonanywhere.com + categories: [development] + icon: pythonanywhere + color: sapphire + current-maintainers: [*trinkey] + quizlet: + name: Quizlet + link: https://quizlet.com + categories: [education, productivity] + icon: quizlet + color: mauve + current-maintainers: [*spaghettiosareyummy] + raindrop: + name: Raindrop + link: https://app.raindrop.io + categories: [productivity] + color: blue + current-maintainers: [*thismoon] + react.dev: + name: React.dev + link: https://react.dev + categories: [development] + icon: react + color: sapphire + current-maintainers: [*RaiderHCPlay] + reddit: + name: Reddit + link: https://reddit.com + categories: [discussion_forum, social_networking] + color: red + icon: reddit + current-maintainers: [] + past-maintainers: [*jayylmao, *rubyowo] + regex101: + name: regex101 + link: https://regex101.com + categories: [development] + color: blue + current-maintainers: [*uncenter] + rentry.co: + name: Rentry.co + link: https://rentry.co + categories: [productivity] + color: text + current-maintainers: [*thismoon] + scalar: + name: Scalar + link: https://scalar.com + categories: [development] + icon: scalar + color: text + current-maintainers: [*incognitotgt] + searchix: + name: Searchix + link: https://searchix.ovh + categories: [development, search_engine] + color: blue + current-maintainers: [*koibtw] + searxng: + name: SearXNG + link: https://github.com/searxng/searxng + categories: [search_engine] + icon: searxng + color: blue + current-maintainers: [*Sekki21956, *ryanccn] + seventv: + name: 7TV + link: https://7tv.app + categories: [entertainment, browser_extension] + color: sapphire + current-maintainers: [*mxgic1337] + shinigami-eyes: + name: Shinigami Eyes + link: https://shinigami-eyes.github.io + categories: [browser_extension, social_networking] + color: mauve + current-maintainers: [*sofiedotcafe] + snapchat-web: + name: Snapchat Web + link: https://web.snapchat.com + categories: [social_networking, photo_and_video] + icon: snapchat + color: yellow + current-maintainers: [*itzTheMeow] + spotify-web: + name: Spotify Web + link: https://open.spotify.com + categories: [music] + icon: spotify + color: green + current-maintainers: [*Tnixc] + stack-overflow: + name: Stack Overflow + link: https://stackoverflow.com + categories: [discussion_forum, wiki] + icon: stackoverflow + color: peach + current-maintainers: [*uncenter] + startpage: + name: Startpage + link: https://startpage.com + categories: [search_engine] + color: lavender + current-maintainers: [*WalkQuackBack] + past-maintainers: [*bartlibert] + status.cafe: + name: status.cafe + link: https://status.cafe + categories: [social_networking] + color: sapphire + current-maintainers: [*bunfluff] + stylus: + name: Stylus + link: https://github.com/openstyles/stylus + categories: [browser_extension] + color: teal + current-maintainers: [*uncenter] + substack: + name: Substack + link: https://substack.com + categories: [news_and_journalism] + icon: substack + color: peach + current-maintainers: [*uncenter] + past-maintainers: [*nekowinston] + syncthing: + name: Syncthing + link: https://syncthing.net + categories: [file_manager, productivity] + icon: syncthing + color: sapphire + note: This theme is designed to be used with the default WebGUI and default theme provided by Syncthing. This does not theme syncthing.net. + current-maintainers: [*BlankParticle] + tabnews: + name: TabNews + link: https://tabnews.com.br + categories: [discussion_forum, social_networking] + color: text + current-maintainers: [*Guaxinim5573] + tldraw: + name: tldraw + link: https://www.tldraw.com + categories: [productivity] + icon: tldraw + color: text + note: This theme only changes how the colors appear on the tldraw canvas. Exported graphics **will not be Catppuccin-themed**. + current-maintainers: [*NekoDrone] + past-maintainers: [*GenShibe, *uncenter] + trinket: + name: Trinket + link: https://trinket.io + categories: [development] + color: blue + current-maintainers: [*trinkey] + tuta: + name: Tuta + link: https://tuta.com + categories: [email_client] + icon: tutanota + color: maroon + note: Set Tuta's built-in theme to either **light** if you're using Latte or **dark** if you're using the others. + current-maintainers: [*ryanccn] + twitch: + name: Twitch + link: https://twitch.tv + categories: [entertainment, social_networking] + icon: twitch + color: mauve + current-maintainers: [*uncenter, *mxgic1337] + twitter: + name: Twitter + link: https://twitter.com + categories: [social_networking, discussion_forum] + color: blue + icon: twitter + note: Set Twitter's built-in theme to **Lights out** with the blue accent. + current-maintainers: [*watatomo] + vercel: + name: Vercel + link: https://vercel.com + categories: [development] + icon: vercel + color: text + supports: + next.js: + name: Next.js + link: https://nextjs.org + current-maintainers: [*ryanccn, *Dandraghas] + vikunja: + name: Vikunja + link: https://vikunja.io + categories: [productivity, note_taking] + icon: vikunja + color: blue + current-maintainers: [*Guaxinim5573] + web.dev: + name: web.dev + link: https://web.dev + categories: [development] + color: blue + current-maintainers: [*uncenter] + whatsapp-web: + name: WhatsApp Web + link: https://web.whatsapp.com + categories: [social_networking] + icon: whatsapp + color: green + current-maintainers: [*FrancoRav, *WalkQuackBack] + wikipedia: + name: Wikipedia + link: https://www.wikipedia.org + categories: [wiki, search_engine, productivity] + icon: wikipedia + color: text + current-maintainers: [*uncenter] + wikiwand: + name: Wikiwand + link: https://www.wikiwand.com + categories: [wiki, productivity] + icon: wikipedia + color: text + current-maintainers: [*Tnixc] + youtube: + name: YouTube + link: https://youtube.com + categories: [entertainment, social_networking, photo_and_video] + icon: youtube + color: red + current-maintainers: [*isabelroses, *uncenter] + past-maintainers: [*elkrien] + zen-browser-docs: + name: Zen Browser Docs + link: https://zen-browser.app + categories: [productivity] + color: peach + current-maintainers: [*ashish0kumar] +# yaml-language-server: $schema=userstyles.schema.json diff --git a/scripts/utils.ts b/scripts/utils.ts new file mode 100644 index 0000000000..57e03a4503 --- /dev/null +++ b/scripts/utils.ts @@ -0,0 +1,204 @@ +import type { CategoriesSchema, UserstylesSchema } from "@/types/mod.ts"; +import type { SetRequired } from "type-fest/source/set-required.d.ts"; +import { + CATEGORIES_SCHEMA, + REPO_ROOT, + USERSTYLES_SCHEMA, +} from "@/constants.ts"; + +import * as yaml from "@std/yaml"; +import * as path from "@std/path"; + +import Ajv, { type Schema } from "ajv"; +import { log } from "@/logger.ts"; +import { sprintf } from "@std/fmt/printf"; +import { Octokit } from "@octokit/rest"; + +/** + * @param content A string of YAML content + * @param schema A JSON schema + * @returns A promise that resolves to the parsed YAML content, verified against the schema. Rejects if the content is invalid. + */ +export function validateYaml( + content: string, + schema: Schema, + file: string, + options?: Ajv.Options, +): T { + const ajv = new Ajv.default(options); + const validate = ajv.compile(schema); + const data = yaml.parse(content); + + if (!validate(data)) { + log.error( + validate + .errors!.map((err) => + sprintf( + "%s %s%s", + err.instancePath.slice(1).replaceAll("/", "."), + err.message, + err.params.allowedValues + ? ` (${JSON.stringify(err.params.allowedValues, undefined)})` + : "", + ) + ) + .join(" and "), + { + file, + }, + ); + Deno.exit(1); + } + + return data as T; +} + +/** + * Utility function that calls {@link validateYaml} on the userstyles.yml file. + * Fails when data.userstyles is undefined. + */ +export function getUserstylesData(): Userstyles { + const content = Deno.readTextFileSync( + path.join(REPO_ROOT, "scripts/userstyles.yml"), + ); + + try { + const data = validateYaml( + content, + USERSTYLES_SCHEMA, + "scripts/userstyles.yml", + { schemas: [CATEGORIES_SCHEMA] }, + ); + + for (const field of ["userstyles", "collaborators"] as const) { + if (data[field] === undefined) { + log.error(`Missing required field \`${field}\``, { + file: "scripts/userstyles.yml", + }); + Deno.exit(1); + } + } + + return data as Userstyles; + } catch (err) { + if (err instanceof Error && err.name === "SyntaxError") { + const groups = + /(?.*) at line (?\d+), column (?\d+):[\S\s]*/ + .exec( + err.message, + )?.groups; + log.error(groups!.message, { + file: "scripts/userstyles.yml", + startLine: Number(groups!.line), + content: content, + }); + } else { + throw err; + } + + Deno.exit(1); + } +} + +/** + * Utility function that calls {@link validateYaml} on the ports.yml file. + * Fails when data.userstyles is undefined. + */ +export async function getCategoriesData(): Promise< + CategoriesSchema.CategoryDefinitions +> { + const content = await fetch( + "https://raw.githubusercontent.com/catppuccin/catppuccin/d4f82739e687cfd19d168be355367fdbbcc8e029/resources/categories.yml", + ).then((res) => res.text()); + + const data = validateYaml( + content, + CATEGORIES_SCHEMA, + "categories.yml", + ); + + return data; +} + +/** + * Utility function that formats a list of items into the "x, y, ..., and z" format. + * @example + * formatListOfItems(['x']); // 'x' + * @example + * formatListOfItems(['x', 'y']); // 'x and y' + * @example + * formatListOfItems(['x', 'y', 'z']); // 'x, y, and z' + */ +export function formatListOfItems(items: unknown[]): string { + // If there are no items, return an empty string. + if (items.length === 0) return ""; + // If there are two items, connect them with an "and". + if (items.length === 2) return items.join(" and "); + // Otherwise, there is either just one item or more than two items. + return items.reduce((prev, curr, idx, arr) => { + // If this is the first item of the items we are looping through, set our initial string to it. + if (idx === 0) return curr; + // If this is the last one, add a comma (Oxford commas are amazing) followed by "and" and the item to the string. + if (curr === arr.at(-1)) return prev + `, and ${curr}`; + // Otherwise, it is some item in the middle of the list and we can just add it as a comma followed by the item to the string. + return prev + `, ${curr}`; + }) as string; +} + +type Userstyles = SetRequired< + UserstylesSchema.UserstylesSchema, + "userstyles" | "collaborators" +>; + +export function getUserstylesFiles(): string[] { + const files: string[] = []; + for (const dir of Deno.readDirSync(path.join(REPO_ROOT, "styles"))) { + if (!dir.isDirectory) continue; + files.push( + path.join(REPO_ROOT, "styles", dir.name, "catppuccin.user.less"), + ); + } + return files; +} + +export function getAuthenticatedOctokit() { + return new Octokit({ auth: Deno.env.get("GITHUB_TOKEN") }); +} + +export type UserstylesTeam = "userstyles-staff" | "userstyles-maintainers"; + +export async function getUserstylesTeamMembers( + octokit: Octokit, + team: UserstylesTeam, +): Promise { + const members = await octokit.teams.listMembersInOrg({ + org: "catppuccin", + team_slug: team, + per_page: 100, + }); + return members.data.map(({ login }) => login.toLowerCase()); +} + +export async function addUserstylesTeamMember( + octokit: Octokit, + team: UserstylesTeam, + username: string, +) { + await octokit.teams.addOrUpdateMembershipForUserInOrg({ + org: "catppuccin", + team_slug: team, + username, + }); +} + +export async function removeUserstylesTeamMember( + octokit: Octokit, + team: UserstylesTeam, + username: string, +) { + await octokit.teams.removeMembershipForUserInOrg({ + org: "catppuccin", + team_slug: team, + username, + }); +} diff --git a/shell.nix b/shell.nix new file mode 100644 index 0000000000..9268f18e3c --- /dev/null +++ b/shell.nix @@ -0,0 +1,9 @@ +{ + deno, + mkShellNoCC, +}: +mkShellNoCC { + packages = [ + deno + ]; +} diff --git a/src/generate/deno.json b/src/generate/deno.json deleted file mode 100644 index f8a8104f50..0000000000 --- a/src/generate/deno.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "lock": "deno.lock" -} diff --git a/src/generate/deno.lock b/src/generate/deno.lock deleted file mode 100644 index e4bf0b28e5..0000000000 --- a/src/generate/deno.lock +++ /dev/null @@ -1,153 +0,0 @@ -{ - "version": "2", - "remote": { - "https://deno.land/std@0.172.0/_util/asserts.ts": "178dfc49a464aee693a7e285567b3d0b555dc805ff490505a8aae34f9cfb1462", - "https://deno.land/std@0.172.0/_util/os.ts": "d932f56d41e4f6a6093d56044e29ce637f8dcc43c5a90af43504a889cf1775e3", - "https://deno.land/std@0.172.0/bytes/bytes_list.ts": "b4cbdfd2c263a13e8a904b12d082f6177ea97d9297274a4be134e989450dfa6a", - "https://deno.land/std@0.172.0/bytes/concat.ts": "d26d6f3d7922e6d663dacfcd357563b7bf4a380ce5b9c2bbe0c8586662f25ce2", - "https://deno.land/std@0.172.0/bytes/copy.ts": "939d89e302a9761dcf1d9c937c7711174ed74c59eef40a1e4569a05c9de88219", - "https://deno.land/std@0.172.0/encoding/_yaml/dumper/dumper.ts": "49053c293a2250b33f2efc0ce3973280c6dc3bc0b41397af3863b5f03340e01b", - "https://deno.land/std@0.172.0/encoding/_yaml/dumper/dumper_state.ts": "975a3702752a29251c5746206507dfebbfede60dd2c0dec161dc22633fbc6085", - "https://deno.land/std@0.172.0/encoding/_yaml/error.ts": "e60ab51d7c0253cf0d1cf7d445202e8e3da5c77aae0032071ba7400121c281b4", - "https://deno.land/std@0.172.0/encoding/_yaml/loader/loader.ts": "6c59f60faaf78d73db0e016293f4bfed19e6356d7064230d07d6b68a65a1df5d", - "https://deno.land/std@0.172.0/encoding/_yaml/loader/loader_state.ts": "fcc82fcdf167acb0e9e5e32b32682e58b45f2d44210bf685794797ccb5621232", - "https://deno.land/std@0.172.0/encoding/_yaml/mark.ts": "0027d6f62a70a6c64b85bd1751ddf1646ea97edcefbf5bea1706d5e519f4e34f", - "https://deno.land/std@0.172.0/encoding/_yaml/parse.ts": "63e79582e07145ca1d3205d1ac72b82bf5ce14159dabae195abe7e36de8111bd", - "https://deno.land/std@0.172.0/encoding/_yaml/schema.ts": "0833c75c59bf72c8a8f96f6c0615bcd98d23fdd9b076657f42b5c1a4f9d972b0", - "https://deno.land/std@0.172.0/encoding/_yaml/schema/core.ts": "366f56673336ba24f5723c04319efcc7471be5f55d5f8d95c9b4a38ec233d4c6", - "https://deno.land/std@0.172.0/encoding/_yaml/schema/default.ts": "96e9ed6ead36f53a0832c542fc9b8cca7f8b4a67c1c8424e1423a39ee7154db7", - "https://deno.land/std@0.172.0/encoding/_yaml/schema/extended.ts": "f9bd75c79ebdfb92a8e167488b6bde7113a31b8fabe20ad7eed0904fba11bcd2", - "https://deno.land/std@0.172.0/encoding/_yaml/schema/failsafe.ts": "cddcbf0258bbe0cd77ca10e2f5aec13439f50d4068f96aab08ca2d64496dabe8", - "https://deno.land/std@0.172.0/encoding/_yaml/schema/json.ts": "c86905dfb1b6c4633750bfbb5bd529a30be5c08287ab7eb6694390b40e276487", - "https://deno.land/std@0.172.0/encoding/_yaml/schema/mod.ts": "051f93dd97a15aaad2da62bd24627e8fd2f02fb026d21567d924b720d606f078", - "https://deno.land/std@0.172.0/encoding/_yaml/state.ts": "ef03d55ec235d48dcfbecc0ab3ade90bfae69a61094846e08003421c2cf5cfc6", - "https://deno.land/std@0.172.0/encoding/_yaml/stringify.ts": "426b73e4dbaeed26ed855add3862786d7e374bd4c59e5e1bd9a6fcd5082be3c7", - "https://deno.land/std@0.172.0/encoding/_yaml/type.ts": "5ded5472a0f17a219ac3b0e90d96dc8472a68654a40258a31e03a6c6297b6788", - "https://deno.land/std@0.172.0/encoding/_yaml/type/binary.ts": "935d39794420ac3718d26716192239de6a53566c6f2ba5010e8ed26936b94a89", - "https://deno.land/std@0.172.0/encoding/_yaml/type/bool.ts": "1c99cfbaa94b022575b636a73e1549569b26fc6bbff2cd5e539aa77b49bdf303", - "https://deno.land/std@0.172.0/encoding/_yaml/type/float.ts": "f60ad19b27050add694bfc255b7efef27103f047861aa657823ff3f6853bad11", - "https://deno.land/std@0.172.0/encoding/_yaml/type/function.ts": "65a37f6bef43ef141854ee48a1058d9c9c4c80ed6eed6cd35608329a6957e27a", - "https://deno.land/std@0.172.0/encoding/_yaml/type/int.ts": "892f59bb7b2dbd64dd9b643c17441af95c0b962ad027e454cb84a68864787b86", - "https://deno.land/std@0.172.0/encoding/_yaml/type/map.ts": "92e647a6aec0dc184ea4b039a77a15883b54da754311189c595b43f6aaa50030", - "https://deno.land/std@0.172.0/encoding/_yaml/type/merge.ts": "8192bf3e4d637f32567917f48bb276043da9cf729cf594e5ec191f7cd229337e", - "https://deno.land/std@0.172.0/encoding/_yaml/type/mod.ts": "060e2b3d38725094b77ea3a3f05fc7e671fced8e67ca18e525be98c4aa8f4bbb", - "https://deno.land/std@0.172.0/encoding/_yaml/type/nil.ts": "606e8f0c44d73117c81abec822f89ef81e40f712258c74f186baa1af659b8887", - "https://deno.land/std@0.172.0/encoding/_yaml/type/omap.ts": "fbd5da9970c211335ff7c8fa11e9c5e9256e568d52418ac237d1538c5cb0d5e6", - "https://deno.land/std@0.172.0/encoding/_yaml/type/pairs.ts": "ea487a44c0ae64d8d952779fa1cb5fa0a12f32a0b5d3d1e8c1f06f446448427c", - "https://deno.land/std@0.172.0/encoding/_yaml/type/regexp.ts": "672000d22a1062d61577d30b218c28f5cb1d039a7a60079fdde6a4e558d5ca51", - "https://deno.land/std@0.172.0/encoding/_yaml/type/seq.ts": "39b28f7c7aa41263c5c42cab9d184f03555e9ba19493766afc0c0c325a9ac49f", - "https://deno.land/std@0.172.0/encoding/_yaml/type/set.ts": "0e30a9f750306b514c8ae9869d1ac2548d57beab55b33e85ea9673ca0a08264c", - "https://deno.land/std@0.172.0/encoding/_yaml/type/str.ts": "a67a3c6e429d95041399e964015511779b1130ea5889fa257c48457bd3446e31", - "https://deno.land/std@0.172.0/encoding/_yaml/type/timestamp.ts": "706ea80a76a73e48efaeb400ace087da1f927647b53ad6f754f4e06d51af087f", - "https://deno.land/std@0.172.0/encoding/_yaml/type/undefined.ts": "94a316ca450597ccbc6750cbd79097ad0d5f3a019797eed3c841a040c29540ba", - "https://deno.land/std@0.172.0/encoding/_yaml/utils.ts": "26b311f0d42a7ce025060bd6320a68b50e52fd24a839581eb31734cd48e20393", - "https://deno.land/std@0.172.0/encoding/yaml.ts": "02571d1bbbcfd7c5647789cee872ecf9c1c470e1b1a40948ed219fb661e19d87", - "https://deno.land/std@0.172.0/io/buf_reader.ts": "90a7adcb3638d8e1361695cdf844d58bcd97c41711dc6f9f8acc0626ebe097f5", - "https://deno.land/std@0.172.0/io/buf_writer.ts": "759c69d304b04d2909976f2a03a24a107276fbd81ed13593c5c2d43d104b52f3", - "https://deno.land/std@0.172.0/io/buffer.ts": "24abd4a65403ca3fdffcb6d3f985b0285adfd785f1311ce681708a21126776ad", - "https://deno.land/std@0.172.0/io/read_delim.ts": "7e102c66f00a118fa1e1ccd4abb080496f43766686907fd8b9522fdf85443586", - "https://deno.land/std@0.172.0/io/read_lines.ts": "baee9e35034f2fdfccf63bc24b7e3cb45aa1c1c5de26d178f7bcbc572e87772f", - "https://deno.land/std@0.172.0/io/read_string_delim.ts": "46eb0c9db3547caf8c759631effa200bbe48924f9b34f41edc627bde36cee52d", - "https://deno.land/std@0.172.0/path/_constants.ts": "e49961f6f4f48039c0dfed3c3f93e963ca3d92791c9d478ac5b43183413136e0", - "https://deno.land/std@0.172.0/path/_interface.ts": "6471159dfbbc357e03882c2266d21ef9afdb1e4aa771b0545e90db58a0ba314b", - "https://deno.land/std@0.172.0/path/_util.ts": "86c2375a996c1931b2f2ac71fefd5ddf0cf0e579fa4ab12d3e4c552d4223b8d8", - "https://deno.land/std@0.172.0/path/common.ts": "ee7505ab01fd22de3963b64e46cff31f40de34f9f8de1fff6a1bd2fe79380000", - "https://deno.land/std@0.172.0/path/glob.ts": "d479e0a695621c94d3fd7fe7abd4f9499caf32a8de13f25073451c6ef420a4e1", - "https://deno.land/std@0.172.0/path/mod.ts": "4b83694ac500d7d31b0cdafc927080a53dc0c3027eb2895790fb155082b0d232", - "https://deno.land/std@0.172.0/path/posix.ts": "0874b341c2c6968ca38d323338b8b295ea1dae10fa872a768d812e2e7d634789", - "https://deno.land/std@0.172.0/path/separator.ts": "0fb679739d0d1d7bf45b68dacfb4ec7563597a902edbaf3c59b50d5bcadd93b1", - "https://deno.land/std@0.172.0/path/win32.ts": "672942919dd66ce1b8c224e77d3447e2ad8254eaff13fe6946420a9f78fa141e", - "https://deno.land/std@0.172.0/types.d.ts": "220ed56662a0bd393ba5d124aa6ae2ad36a00d2fcbc0e8666a65f4606aaa9784", - "https://deno.land/std@0.181.0/_util/asserts.ts": "178dfc49a464aee693a7e285567b3d0b555dc805ff490505a8aae34f9cfb1462", - "https://deno.land/std@0.181.0/_util/os.ts": "d932f56d41e4f6a6093d56044e29ce637f8dcc43c5a90af43504a889cf1775e3", - "https://deno.land/std@0.181.0/bytes/copy.ts": "939d89e302a9761dcf1d9c937c7711174ed74c59eef40a1e4569a05c9de88219", - "https://deno.land/std@0.181.0/encoding/yaml.ts": "1434324316e821dd76c4d4dcaa88ce792449360335a598b88e7625644c721766", - "https://deno.land/std@0.181.0/fs/_util.ts": "65381f341af1ff7f40198cee15c20f59951ac26e51ddc651c5293e24f9ce6f32", - "https://deno.land/std@0.181.0/fs/walk.ts": "ea95ffa6500c1eda6b365be488c056edc7c883a1db41ef46ec3bf057b1c0fe32", - "https://deno.land/std@0.181.0/io/buffer.ts": "17f4410eaaa60a8a85733e8891349a619eadfbbe42e2f319283ce2b8f29723ab", - "https://deno.land/std@0.181.0/path/_constants.ts": "e49961f6f4f48039c0dfed3c3f93e963ca3d92791c9d478ac5b43183413136e0", - "https://deno.land/std@0.181.0/path/_interface.ts": "6471159dfbbc357e03882c2266d21ef9afdb1e4aa771b0545e90db58a0ba314b", - "https://deno.land/std@0.181.0/path/_util.ts": "d7abb1e0dea065f427b89156e28cdeb32b045870acdf865833ba808a73b576d0", - "https://deno.land/std@0.181.0/path/common.ts": "ee7505ab01fd22de3963b64e46cff31f40de34f9f8de1fff6a1bd2fe79380000", - "https://deno.land/std@0.181.0/path/glob.ts": "d479e0a695621c94d3fd7fe7abd4f9499caf32a8de13f25073451c6ef420a4e1", - "https://deno.land/std@0.181.0/path/mod.ts": "bf718f19a4fdd545aee1b06409ca0805bd1b68ecf876605ce632e932fe54510c", - "https://deno.land/std@0.181.0/path/posix.ts": "8b7c67ac338714b30c816079303d0285dd24af6b284f7ad63da5b27372a2c94d", - "https://deno.land/std@0.181.0/path/separator.ts": "0fb679739d0d1d7bf45b68dacfb4ec7563597a902edbaf3c59b50d5bcadd93b1", - "https://deno.land/std@0.181.0/path/win32.ts": "d186344e5583bcbf8b18af416d13d82b35a317116e6460a5a3953508c3de5bba", - "https://deno.land/std@0.181.0/types.d.ts": "dbaeb2c4d7c526db9828fc8df89d8aecf53b9ced72e0c4568f97ddd8cda616a4", - "https://deno.land/std@0.181.0/yaml/_dumper/dumper.ts": "a2c937a53a2b0473125a31a330334cc3f30e98fd82f8143bc225583d1260890b", - "https://deno.land/std@0.181.0/yaml/_dumper/dumper_state.ts": "f0d0673ceea288334061ca34b63954c2bb5feb5bf6de5e4cfe9a942cdf6e5efe", - "https://deno.land/std@0.181.0/yaml/_error.ts": "b59e2c76ce5a47b1b9fa0ff9f96c1dd92ea1e1b17ce4347ece5944a95c3c1a84", - "https://deno.land/std@0.181.0/yaml/_loader/loader.ts": "04cf748a736a9b3a29bd3d4b3c77d81489f82cfe8391627fd6ba8327e1e8cec2", - "https://deno.land/std@0.181.0/yaml/_loader/loader_state.ts": "0841870b467169269d7c2dfa75cd288c319bc06f65edd9e42c29e5fced91c7a4", - "https://deno.land/std@0.181.0/yaml/_mark.ts": "dcd8585dee585e024475e9f3fe27d29740670fb64ebb970388094cad0fc11d5d", - "https://deno.land/std@0.181.0/yaml/_state.ts": "ef03d55ec235d48dcfbecc0ab3ade90bfae69a61094846e08003421c2cf5cfc6", - "https://deno.land/std@0.181.0/yaml/_type/binary.ts": "d34d8c8d8ed521e270cfede3401c425b971af4f6c69da1e2cb32b172d42c7da7", - "https://deno.land/std@0.181.0/yaml/_type/bool.ts": "5bfa75da84343d45347b521ba4e5aeace9fe6f53447405290d53315a3fc20e66", - "https://deno.land/std@0.181.0/yaml/_type/float.ts": "056bd3cb9c5586238b20517511014fb24b0e36f98f9f6073e12da308b6b9808a", - "https://deno.land/std@0.181.0/yaml/_type/function.ts": "ff574fe84a750695302864e1c31b93f12d14ada4bde79a5f93197fc33ad17471", - "https://deno.land/std@0.181.0/yaml/_type/int.ts": "563ad074f0fa7aecf6b6c3d84135bcc95a8269dcc15de878de20ce868fd773fa", - "https://deno.land/std@0.181.0/yaml/_type/map.ts": "7b105e4ab03a361c61e7e335a0baf4d40f06460b13920e5af3fb2783a1464000", - "https://deno.land/std@0.181.0/yaml/_type/merge.ts": "8192bf3e4d637f32567917f48bb276043da9cf729cf594e5ec191f7cd229337e", - "https://deno.land/std@0.181.0/yaml/_type/mod.ts": "060e2b3d38725094b77ea3a3f05fc7e671fced8e67ca18e525be98c4aa8f4bbb", - "https://deno.land/std@0.181.0/yaml/_type/nil.ts": "606e8f0c44d73117c81abec822f89ef81e40f712258c74f186baa1af659b8887", - "https://deno.land/std@0.181.0/yaml/_type/omap.ts": "cfe59a294726f5cea705c39a61fd2b08199cf48f4ccd6b040cb550ec0f38d0a1", - "https://deno.land/std@0.181.0/yaml/_type/pairs.ts": "0032fdfe57558d21696a4f8cf5b5cfd1f698743177080affc18629685c905666", - "https://deno.land/std@0.181.0/yaml/_type/regexp.ts": "1ce118de15b2da43b4bd8e4395f42d448b731acf3bdaf7c888f40789f9a95f8b", - "https://deno.land/std@0.181.0/yaml/_type/seq.ts": "95333abeec8a7e4d967b8c8328b269e342a4bbdd2585395549b9c4f58c8533a2", - "https://deno.land/std@0.181.0/yaml/_type/set.ts": "f28ba44e632ef2a6eb580486fd47a460445eeddbdf1dbc739c3e62486f566092", - "https://deno.land/std@0.181.0/yaml/_type/str.ts": "a67a3c6e429d95041399e964015511779b1130ea5889fa257c48457bd3446e31", - "https://deno.land/std@0.181.0/yaml/_type/timestamp.ts": "706ea80a76a73e48efaeb400ace087da1f927647b53ad6f754f4e06d51af087f", - "https://deno.land/std@0.181.0/yaml/_type/undefined.ts": "94a316ca450597ccbc6750cbd79097ad0d5f3a019797eed3c841a040c29540ba", - "https://deno.land/std@0.181.0/yaml/_utils.ts": "26b311f0d42a7ce025060bd6320a68b50e52fd24a839581eb31734cd48e20393", - "https://deno.land/std@0.181.0/yaml/parse.ts": "1fbbda572bf3fff578b6482c0d8b85097a38de3176bf3ab2ca70c25fb0c960ef", - "https://deno.land/std@0.181.0/yaml/schema.ts": "96908b78dc50c340074b93fc1598d5e7e2fe59103f89ff81e5a49b2dedf77a67", - "https://deno.land/std@0.181.0/yaml/schema/core.ts": "fa406f18ceedc87a50e28bb90ec7a4c09eebb337f94ef17468349794fa828639", - "https://deno.land/std@0.181.0/yaml/schema/default.ts": "0047e80ae8a4a93293bc4c557ae8a546aabd46bb7165b9d9b940d57b4d88bde9", - "https://deno.land/std@0.181.0/yaml/schema/extended.ts": "0784416bf062d20a1626b53c03380e265b3e39b9409afb9f4cb7d659fd71e60d", - "https://deno.land/std@0.181.0/yaml/schema/failsafe.ts": "d219ab5febc43f770917d8ec37735a4b1ad671149846cbdcade767832b42b92b", - "https://deno.land/std@0.181.0/yaml/schema/json.ts": "5f41dd7c2f1ad545ef6238633ce9ee3d444dfc5a18101e1768bd5504bf90e5e5", - "https://deno.land/std@0.181.0/yaml/schema/mod.ts": "4472e827bab5025e92bc2eb2eeefa70ecbefc64b2799b765c69af84822efef32", - "https://deno.land/std@0.181.0/yaml/stringify.ts": "fffc09c65c68d3d63f8159e8cbaa3f489bc20a8e55b4fbb61a8c2e9f914d1d02", - "https://deno.land/std@0.181.0/yaml/type.ts": "1aabb8e0a3f4229ce0a3526256f68826d9bdf65a36c8a3890ead8011fcba7670", - "https://raw.githubusercontent.com/catppuccin/catppuccin/main/resources/ports.schema.json": "f1bfc1f4c68af258cd2f1a254d70069b7d254ab0cfe298b9b52bcd78299d8e40" - }, - "npm": { - "specifiers": { - "ajv@8.12.0": "ajv@8.12.0" - }, - "packages": { - "ajv@8.12.0": { - "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", - "dependencies": { - "fast-deep-equal": "fast-deep-equal@3.1.3", - "json-schema-traverse": "json-schema-traverse@1.0.0", - "require-from-string": "require-from-string@2.0.2", - "uri-js": "uri-js@4.4.1" - } - }, - "fast-deep-equal@3.1.3": { - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dependencies": {} - }, - "json-schema-traverse@1.0.0": { - "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", - "dependencies": {} - }, - "punycode@2.3.0": { - "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==", - "dependencies": {} - }, - "require-from-string@2.0.2": { - "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==", - "dependencies": {} - }, - "uri-js@4.4.1": { - "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==", - "dependencies": { - "punycode": "punycode@2.3.0" - } - } - } - } -} diff --git a/src/generate/deps.ts b/src/generate/deps.ts deleted file mode 100644 index 406ccef177..0000000000 --- a/src/generate/deps.ts +++ /dev/null @@ -1,12 +0,0 @@ -export { parse as parseYaml } from "https://deno.land/std@0.181.0/encoding/yaml.ts"; - -import Ajv from "npm:ajv@8.12.0"; -import * as path from "https://deno.land/std@0.181.0/path/mod.ts"; -import { walkSync } from "https://deno.land/std@0.181.0/fs/walk.ts"; -import schema from "../userstyles.schema.json" assert { type: "json" }; -import portsSchema from "https://raw.githubusercontent.com/catppuccin/catppuccin/main/resources/ports.schema.json" assert { - type: "json", -}; - -export type { Categories as PortCategories } from "https://raw.githubusercontent.com/catppuccin/catppuccin/main/resources/generate/types.d.ts"; -export { Ajv, path, portsSchema, schema, walkSync }; diff --git a/src/generate/generate.ts b/src/generate/generate.ts deleted file mode 100755 index 021985235f..0000000000 --- a/src/generate/generate.ts +++ /dev/null @@ -1,277 +0,0 @@ -#!/usr/bin/env -S deno run --allow-env --allow-read --allow-write --allow-net -import { - Ajv, - parseYaml, - path, - PortCategories, - portsSchema, - schema, -} from "./deps.ts"; -import { - ApplicationLink, - CurrentMaintainers, - FAQ, - Name, - PastMaintainers, - Usage, - Userstyle, - Userstyles, -} from "./types.d.ts"; - -const ROOT = new URL(".", import.meta.url).pathname; -const REPO_ROOT = path.join(ROOT, "../.."); -const ISSUE_PREFIX = "lbl:"; - -type Metadata = { - userstyles: Userstyles; -}; - -type PortMetadata = { - categories: PortCategories; -}; - -type CollaboratorsData = { - collaborators: CurrentMaintainers | PastMaintainers; - heading: string; -}; - -export type MappedPort = Userstyle & { path: string }; - -const ajv = new (Ajv as unknown as (typeof Ajv)["default"])(); -const validate = ajv.compile(schema); -const validatePorts = ajv.compile(portsSchema); - -const userstylesYaml = Deno.readTextFileSync( - path.join(ROOT, "../userstyles.yml"), -); -const userstylesData = parseYaml(userstylesYaml); -if (!validate(userstylesData)) { - console.log(validate.errors); - Deno.exit(1); -} - -const portsYaml = await fetch( - "https://raw.githubusercontent.com/catppuccin/catppuccin/main/resources/ports.yml", -); -const portsData = parseYaml(await portsYaml.text()); -if (!validatePorts(portsData)) { - console.log(validate.errors); - Deno.exit(1); -} - -const categorized = Object.entries(userstylesData.userstyles).reduce( - (acc, [slug, { category, ...port }]) => { - acc[category] ||= []; - acc[category].push({ path: `styles/${slug}`, category, ...port }); - acc[category].sort((a, b) => { - const aName = typeof a.name === "string" ? a.name : a.name.join(", "); - const bName = typeof b.name === "string" ? b.name : b.name.join(", "); - return aName.localeCompare(bName); - }); - return acc; - }, - {} as Record, -); - -const portListData = portsData.categories - .filter((category) => categorized[category.key] !== undefined) - .map((category) => { - return { - meta: category, - ports: categorized[category.key], - }; - }); - -const portContent = portListData - .map( - (data) => - `
-${data.meta.emoji} ${data.meta.name} - -${ - data.ports - .map((port) => { - const name = Array.isArray(port.name) - ? port.name.join(", ") - : port.name; - return `- [${name}](${port.path})`; - }) - .join("\n") - } - -
`, - ) - .join("\n"); - -const updateReadme = ({ - readme, - section, - newContent, -}: { - readme: string; - section: string; - newContent: string; -}): string => { - const preamble = - ""; - const startMarker = ``; - const endMarker = ``; - const wrapped = `${startMarker}\n${preamble}\n${newContent}\n${endMarker}`; - - if ( - !(readmeContent.includes(startMarker) && readmeContent.includes(endMarker)) - ) { - throw new Error("Markers not found in README.md"); - } - - const pre = readme.split(startMarker)[0]; - const end = readme.split(endMarker)[1]; - return pre + wrapped + end; -}; - -const updateFile = (filePath: string, fileContent: string, comment = true) => { - const preamble = comment - ? "# THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND.\n" - : ""; - Deno.writeTextFileSync(filePath, preamble + fileContent); -}; - -const readmePath = path.join(REPO_ROOT, "README.md"); -let readmeContent = Deno.readTextFileSync(readmePath); -try { - readmeContent = updateReadme({ - readme: readmeContent, - section: "userstyles", - newContent: portContent, - }); - updateFile(readmePath, readmeContent, false); -} catch (e) { - console.log("Failed to update the README:", e); -} - -const pullRequestLabelerPath = path.join(REPO_ROOT, ".github/pr-labeler.yml"); -const pullRequestLabelerContent = Object.entries(userstylesData.userstyles) - .map(([key]) => `${key}: styles/${key}/**/*`) - .join("\n"); -updateFile(pullRequestLabelerPath, pullRequestLabelerContent); - -const issuesLabelerPath = path.join(REPO_ROOT, ".github/issue-labeler.yml"); -const issuesLabelerContent = Object.entries(userstylesData.userstyles) - .map(([key]) => `${key}: ['(${ISSUE_PREFIX + key})']`) - .join("\n"); -updateFile(issuesLabelerPath, issuesLabelerContent); - -const ownersPath = path.join(REPO_ROOT, ".github/CODEOWNERS"); -const ownersContent = Object.entries(userstylesData.userstyles) - .map(([key, style]) => { - const currentMaintainers = style.readme["current-maintainers"] - .map((maintainer) => `@${maintainer.url.split("/").pop()}`) - .join(" "); - return `/styles/${key} ${currentMaintainers}`; - }) - .join("\n"); -updateFile(ownersPath, ownersContent); - -const userstyleIssuePath = path.join(ROOT, "templates/userstyle-issue.yml"); -const userstyleIssueContent = Deno.readTextFileSync(userstyleIssuePath); -const replacedUserstyleIssueContent = userstyleIssueContent.replace( - "$PORTS", - `${ - Object.entries(userstylesData.userstyles) - .map(([key]) => `'${ISSUE_PREFIX + key}'`) - .join(", ") - }`, -); -Deno.writeTextFileSync( - path.join(REPO_ROOT, ".github/ISSUE_TEMPLATE/userstyle.yml"), - replacedUserstyleIssueContent, -); - -const heading = (name: Name, link: ApplicationLink) => { - const nameArray = Array.isArray(name) ? name : [name]; - const linkArray = Array.isArray(link) ? link : [link]; - - if (nameArray.length !== linkArray.length) { - throw new Error( - 'The "name" and "app-link" arrays must have the same length', - ); - } - - return `Catppuccin for ${ - nameArray - .map((name, index) => `${name}`) - .join(", ") - }`; -}; - -const usageContent = (usage?: Usage) => { - return !usage ? "" : `## Usage \n${usage}`; -}; - -const faqContent = (faq?: FAQ) => { - if (!faq) { - return ""; - } - return `## 🙋 FAQ -${ - faq - .map(({ question, answer }) => `- Q: ${question} \n\tA: ${answer}`) - .join("\n") - }`; -}; - -const collaboratorsContent = (allCollaborators: CollaboratorsData[]) => { - return allCollaborators - .filter(({ collaborators }) => collaborators !== undefined) - .map(({ collaborators, heading }) => { - const collaboratorBody = collaborators - .map(({ name, url }) => `- [${name ?? url.split("/").pop()}](${url})`) - .join("\n"); - return `${heading}\n${collaboratorBody}`; - }) - .join("\n\n"); -}; - -const updateStylesReadmeContent = ( - readme: string, - key: string, - userstyle: Userstyle, -) => { - return readme - .replace("$TITLE", heading(userstyle.name, userstyle.readme["app-link"])) - .replaceAll("$LOWERCASE-PORT", key) - .replace("$USAGE", usageContent(userstyle.readme.usage)) - .replace("$FAQ", faqContent(userstyle.readme.faq)) - .replace( - "$COLLABORATORS", - collaboratorsContent([ - { - collaborators: userstyle.readme["current-maintainers"], - heading: "## 💝 Current Maintainer(s)", - }, - { - collaborators: userstyle.readme["past-maintainers"], - heading: "## 💖 Past Maintainer(s)", - }, - ]), - ); -}; - -const stylesReadmePath = path.join(ROOT, "templates/userstyle.md"); -const stylesReadmeContent = Deno.readTextFileSync(stylesReadmePath); -for (const [key, userstyle] of Object.entries(userstylesData.userstyles)) { - try { - console.log(`Generating README for ${key}`); - readmeContent = updateStylesReadmeContent( - stylesReadmeContent, - key, - userstyle, - ); - Deno.writeTextFileSync( - path.join(REPO_ROOT, "styles", key, "README.md"), - readmeContent, - ); - } catch (e) { - console.log(`Failed to update ${userstyle} README:`, e); - } -} diff --git a/src/generate/templates/userstyle-issue.yml b/src/generate/templates/userstyle-issue.yml deleted file mode 100644 index 68482e0461..0000000000 --- a/src/generate/templates/userstyle-issue.yml +++ /dev/null @@ -1,41 +0,0 @@ -# THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND. -name: Userstyle Issue -description: Report your problems with any of the userstyles here! -body: - - type: checkboxes - attributes: - label: Is there an existing issue outlining your problem? - description: Please search to see if an issue already exists for your problem. - options: - - label: I have searched the existing issues and they do not solve my problem. - required: true - - type: dropdown - attributes: - label: What userstyles are you seeing the problem on? - description: "Don't worry about the `lbl:` prefix, it allows issues to be automatically labeled!" - multiple: true - options: [$PORTS] - validations: - required: true - - type: textarea - attributes: - label: Describe your problem. - description: Also tell us, what do you expect to see? - placeholder: The navigation bar on the website is highlighted incorrectly... - validations: - required: true - - type: textarea - attributes: - label: Attach screenshots. - description: If applicable, attach screenshots which clearly highlight the issue. - - type: input - attributes: - label: What browser(s) are you seeing the problem on? - description: "The browser version is also important, you can find out how to get that info [here](https://github.com/catppuccin/userstyles/blob/main/docs/browsers.md)." - placeholder: Firefox v112.0.2 - validations: - required: true - - type: textarea - attributes: - label: Any additional comments? - description: Add any information that hasn't been covered in the previous sections! \ No newline at end of file diff --git a/src/generate/types.d.ts b/src/generate/types.d.ts deleted file mode 100644 index 806e590cb6..0000000000 --- a/src/generate/types.d.ts +++ /dev/null @@ -1,180 +0,0 @@ -/* eslint-disable */ -/** - * This file was automatically generated by json-schema-to-typescript. - * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file, - * and run json-schema-to-typescript to regenerate this file. - */ - -/** - * The name of the userstyle(s). - */ -export type Name = [string, string, ...string[]] | string; -/** - * The category that fits the port the most. - */ -export type Category = - | "browser" - | "browser_extension" - | "cli" - | "code_editor" - | "development" - | "game" - | "leisure" - | "library" - | "messaging" - | "note_taking" - | "productivity" - | "search_engine" - | "social" - | "system" - | "terminal"; -/** - * The fill color for the icon on the Catppuccin website. - */ -export type Color = - | "rosewater" - | "flamingo" - | "pink" - | "mauve" - | "red" - | "maroon" - | "peach" - | "yellow" - | "green" - | "teal" - | "sky" - | "sapphire" - | "blue" - | "lavender" - | "text"; -/** - * The icon to use on the website. This should be the same name as the SVG file on https://simpleicons.org/. If a `.svg` suffix is present, it's taken from the local website repository resources. - */ -export type Icon = string; -/** - * The hyperlink of the app that is being themed. - */ -export type ApplicationLink = [string, string, ...string[]] | string; -/** - * The Usage section of the userstyle README. - */ -export type Usage = string; -/** - * The FAQ section of the userstyle README. - * - * @minItems 1 - */ -export type FAQ = [ - { - question: Question; - answer: Answer; - [k: string]: unknown; - }, - ...{ - question: Question; - answer: Answer; - [k: string]: unknown; - }[], -]; -/** - * A question that a user may have about the userstyle. - */ -export type Question = string; -/** - * An answer to the question about the userstyle. - */ -export type Answer = string; -/** - * List of all active maintainers for this userstyle. - * - * @minItems 1 - */ -export type CurrentMaintainers = [ - { - name?: DisplayName; - url: GitHubProfile; - [k: string]: unknown; - }, - ...{ - name?: DisplayName; - url: GitHubProfile; - [k: string]: unknown; - }[], -]; -/** - * The display name of the collaborator to show in the userstyle README. - */ -export type DisplayName = string; -/** - * The GitHub profile link of the collaborator to show in the userstyle README. - */ -export type GitHubProfile = string; -/** - * List of all maintainers that have maintained on this userstyle in the past. - * - * @minItems 1 - */ -export type PastMaintainers = [ - { - name?: DisplayName; - url: GitHubProfile; - [k: string]: unknown; - }, - ...{ - name?: DisplayName; - url: GitHubProfile; - [k: string]: unknown; - }[], -]; -/** - * Represents all maintainers and contributors to all userstyles. - * - * @minItems 1 - */ -export type AllCollaborators = [ - { - name?: DisplayName; - url: GitHubProfile; - [k: string]: unknown; - }, - ...{ - name?: DisplayName; - url: GitHubProfile; - [k: string]: unknown; - }[], -]; - -export interface UserstylesSchema { - userstyles?: Userstyles; - collaborators?: AllCollaborators; -} -/** - * All userstyles in the Catppuccin org. - */ -export interface Userstyles { - [k: string]: Userstyle; -} -/** - * The directory of the userstyle. - * - * This interface was referenced by `Userstyles`'s JSON-Schema definition - * via the `patternProperty` "[A-Za-z0-9_\-]". - */ -export interface Userstyle { - name: Name; - category: Category; - color?: Color; - icon?: Icon; - readme: README; -} -/** - * Options to help in the auto-generation of the userstyle README. - */ -export interface README { - "app-link": ApplicationLink; - usage?: Usage; - faq?: FAQ; - "current-maintainers": CurrentMaintainers; - "past-maintainers"?: PastMaintainers; - [k: string]: unknown; -} diff --git a/src/userstyles.schema.json b/src/userstyles.schema.json deleted file mode 100644 index 0bc55a46bc..0000000000 --- a/src/userstyles.schema.json +++ /dev/null @@ -1,203 +0,0 @@ -{ - "$schema": "http://json-schema.org/draft-07/schema#", - "type": "object", - "additionalProperties": false, - "properties": { - "userstyles": { - "$id": "#userstyles", - "title": "Userstyles", - "type": "object", - "description": "All userstyles in the Catppuccin org.", - "patternProperties": { - "[A-Za-z0-9_\\-]": { - "$id": "#userstyles/userstyle", - "title": "Userstyle", - "type": "object", - "description": "The directory of the userstyle.", - "examples": ["youtube"], - "required": ["name", "category", "readme"], - "additionalProperties": false, - "properties": { - "name": { - "$id": "#userstyles/userstyle/name", - "title": "Name", - "description": "The name of the userstyle(s).", - "oneOf": [ - { - "type": "array", - "items": { - "type": "string" - }, - "minItems": 2, - "examples": [["AniList", "AniChart"]] - }, - { - "type": "string", - "examples": ["YouTube"] - } - ] - }, - "category": { - "$id": "#userstyles/userstyle/category", - "title": "Category", - "description": "The category that fits the port the most.", - "$ref": "#/$defs/category" - }, - "color": { - "$id": "#userstyles/userstyle/color", - "title": "Color", - "description": "The fill color for the icon on the Catppuccin website.", - "type": "string", - "enum": [ - "rosewater", - "flamingo", - "pink", - "mauve", - "red", - "maroon", - "peach", - "yellow", - "green", - "teal", - "sky", - "sapphire", - "blue", - "lavender", - "text" - ], - "examples": ["pink"] - }, - "icon": { - "$id": "#userstyles/userstyle/icon", - "title": "Icon", - "description": "The icon to use on the website. This should be the same name as the SVG file on https://simpleicons.org/. If a `.svg` suffix is present, it's taken from the local website repository resources.", - "type": "string", - "examples": ["twitch", "twitch.svg"] - }, - "readme": { - "$id": "#userstyles/userstyle/readme", - "title": "README", - "description": "Options to help in the auto-generation of the userstyle README.", - "type": "object", - "required": ["app-link", "current-maintainers"], - "properties": { - "app-link": { - "$id": "#userstyles/userstyle/readme/app-link", - "title": "Application Link", - "description": "The hyperlink of the app that is being themed.", - "oneOf": [ - { - "type": "array", - "items": { - "type": "string" - }, - "minItems": 2, - "examples": [ - ["https://anilist.co", "https://anichart.net"] - ] - }, - { - "type": "string", - "examples": ["https://github.com"] - } - ] - }, - "usage": { - "$id": "#userstyles/userstyle/readme/usage", - "title": "Usage", - "description": "The Usage section of the userstyle README.", - "type": "string" - }, - "faq": { - "$id": "#userstyles/userstyle/readme/faq", - "title": "FAQ", - "description": "The FAQ section of the userstyle README.", - "type": "array", - "minItems": 1, - "items": { - "type": "object", - "properties": { - "question": { - "type": "string", - "title": "Question", - "description": "A question that a user may have about the userstyle." - }, - "answer": { - "type": "string", - "title": "Answer", - "description": "An answer to the question about the userstyle." - } - }, - "required": ["question", "answer"] - } - }, - "current-maintainers": { - "$id": "#userstyles/userstyle/readme/current-maintainers", - "title": "Current Maintainers", - "description": "List of all active maintainers for this userstyle.", - "$ref": "#/$defs/collaborators" - }, - "past-maintainers": { - "$id": "#userstyles/userstyle/readme/past-maintainers", - "title": "Past Maintainers", - "description": "List of all maintainers that have maintained on this userstyle in the past.", - "$ref": "#/$defs/collaborators" - } - } - } - } - } - } - }, - "collaborators": { - "$id": "#all-collaborators", - "title": "All Collaborators", - "description": "Represents all maintainers and contributors to all userstyles.", - "$ref": "#/$defs/collaborators" - } - }, - "$defs": { - "collaborators": { - "$id": "#collaborators", - "type": "array", - "minItems": 1, - "items": { - "type": "object", - "properties": { - "name": { - "type": "string", - "title": "Display Name", - "description": "The display name of the collaborator to show in the userstyle README." - }, - "url": { - "type": "string", - "title": "GitHub Profile", - "description": "The GitHub profile link of the collaborator to show in the userstyle README." - } - }, - "required": ["url"] - } - }, - "category": { - "$id": "#category", - "type": "string", - "enum": [ - "browser", - "browser_extension", - "cli", - "code_editor", - "development", - "game", - "leisure", - "library", - "messaging", - "note_taking", - "productivity", - "search_engine", - "social", - "system", - "terminal" - ] - } - } -} diff --git a/src/userstyles.yml b/src/userstyles.yml deleted file mode 100644 index e30607c21c..0000000000 --- a/src/userstyles.yml +++ /dev/null @@ -1,362 +0,0 @@ -collaborators: - - &anubisnekhet - url: https://github.com/AnubisNekhet - - &ndsboy - url: https://github.com/ndsboy - - &jn-sena - name: Sena - url: https://github.com/jn-sena - - &watatomo - name: Ren - url: https://github.com/watatomo - - &ryanccn - name: Ryan Cao - url: https://github.com/ryanccn - - &pocco81 - url: https://github.com/Pocco81 - - &glowingumbreon - name: Umbreon - url: https://github.com/GlowingUmbreon - - &justtobbi - url: https://github.com/justTOBBI - - &andreasgrafen - name: Andreas Grafen - url: https://github.com/andreasgrafen - - &lucasmelin - name: Lucas Melin - url: https://github.com/lucasmelin - - &gingeh - url: https://github.com/Gingeh - - &isabelroses - name: Isabel - url: https://github.com/isabelroses - - &thismoon - url: https://github.com/thismoon - - &alaidriel - url: https://github.com/alaidriel - - &soya-daizu - name: soya_daizu - url: https://github.com/soya-daizu - - &jayylmao - url: https://github.com/jayylmao - - &sekki21956 - name: Sekki - url: https://github.com/Sekki21956 - - &winston - name: winston - url: https://github.com/nekowinston - - &gitmuslim - url: https://github.com/GitMuslim - - &tnixc - name: Tnixc - url: https://github.com/tnixc - - &elkrien - name: Elkrien - url: https://github.com/elkrien - - &thememesniper - name: TheMemeSniper - url: https://github.com/TheMemeSniper - - &spaghettiosareyummy - url: https://github.com/spaghettiosareyummy - - &stonks3141 - name: Stonks3141 - url: https://github.com/Stonks3141 - - &rubyowo - url: https://github.com/rubyowo - - &gandalf-the-blue - name: Gandalf the Blue - url: https://github.com/Gandalf-the-Blue - - &francorav - name: FrancoRav - url: https://github.com/FrancoRav - - &coldenate - name: coldenate - url: https://github.com/coldenate - - &skelebro1 - name: skele - url: https://github.com/skelebro1 - -userstyles: - advent-of-code: - name: Advent Of Code - category: game - readme: - app-link: https://adventofcode.com - current-maintainers: [*rubyowo] - anilist: - name: ["AniList", "AniChart"] - category: leisure - color: blue - readme: - app-link: ["https://anilist.co", "https://anichart.net"] - usage: |+ - > **Note**
- > This theme applies to [AniChart](https://anichart.net/) as well, which is an extension of AniList. - current-maintainers: [*anubisnekhet] - brave-search: - name: Brave Search - category: search_engine - icon: brave - color: peach - readme: - app-link: "https://search.brave.com" - usage: "Set theme to dark or light in Brave Search settings, the automatic setting will not work" - current-maintainers: [*ndsboy] - canvas-lms: - name: Canvas LMS - category: productivity - readme: - app-link: "https://www.instructure.com/canvas" - current-maintainers: [*thememesniper] - chatgpt: - name: ChatGPT - category: productivity - readme: - app-link: "https://chat.openai.com" - current-maintainers: [*rubyowo] - chatreplay: - name: ChatReplay - category: leisure - readme: - app-link: "https://chatreplay.stream" - current-maintainers: [*anubisnekhet] - chess.com: - name: Chess.com - category: game - color: green - readme: - app-link: "https://chess.com" - current-maintainers: [ *coldenate, *isabelroses, *skelebro1 ] - cinny: - name: Cinny - category: messaging - readme: - app-link: "https://cinny.in" - current-maintainers: [*jn-sena] - codeberg: - name: Codeberg - category: productivity - readme: - app-link: "https://codeberg.org" - faq: - - question: "How do I change the accent color?" - answer: "Changing `--color-primary` to any other color should change the accent color in most places" - current-maintainers: [*justtobbi] - crowdin: - name: Crowdin - category: productivity - readme: - app-link: "https://crowdin.com" - current-maintainers: [*ryanccn] - deepl: - name: DeepL - category: productivity - readme: - app-link: "https://deepl.com" - current-maintainers: [*watatomo] - ecosia: - name: Ecosia - category: search_engine - readme: - app-link: "https://www.ecosia.org" - current-maintainers: [*isabelroses] - elk: - name: Elk - category: social - readme: - app-link: "https://elk.zone" - current-maintainers: [*ryanccn] - github: - name: GitHub - category: productivity - color: text - readme: - app-link: "https://github.com" - current-maintainers: [*pocco81, *glowingumbreon] - past-maintainers: [*andreasgrafen] - hacker-news: - name: Hacker News - category: social - icon: ycombinator - readme: - app-link: "https://news.ycombinator.com" - current-maintainers: [*lucasmelin] - homepage: - name: homepage - category: productivity - readme: - app-link: "https://github.com/benphelps/homepage" - current-maintainers: [*gandalf-the-blue] - ichi.moe: - name: ichi.moe - category: productivity - readme: - app-link: "https://ichi.moe" - current-maintainers: [*watatomo] - invidious: - name: Invidious - category: social - icon: youtube - color: red - readme: - app-link: "https://invidious.io" - current-maintainers: [*winston] - past-maintainers: [*andreasgrafen] - invokeai: - name: InvokeAI - category: productivity - readme: - app-link: "https://invoke-ai.github.io/InvokeAI" - current-maintainers: [*ryanccn] - lastfm: - name: Last.fm - category: leisure - icon: lastdotfm - color: red - readme: - app-link: "https://last.fm" - current-maintainers: [*anubisnekhet] - past-maintainers: [*gingeh] - libreddit: - name: Libreddit - category: social - icon: reddit - color: peach - readme: - app-link: "https://github.com/libreddit/libreddit" - current-maintainers: [*isabelroses] - past-maintainers: [*andreasgrafen] - mastodon: - name: Mastodon - category: social - readme: - app-link: "https://github.com/mastodon/mastodon" - usage: |+ - Add urls to `@-moz-document domain("url")` with url being the chosen server - faq: - - question: "**The theme does not look the same as the preview?**" - answer: "Your Mastodon instance may be using its own custom CSS, which is changing the look of the theme" - - question: "**Theme is not working?**" - answer: | - One solution might be changing the theme from the `preferences > application > theme` to light or dark. - current-maintainers: [*isabelroses] - past-maintainers: [*andreasgrafen] - modrinth: - name: Modrinth - category: game - color: green - readme: - app-link: "https://modrinth.com" - current-maintainers: [*thismoon] - nitter: - name: Nitter - category: social - icon: twitter - color: blue - readme: - app-link: "https://nitter.net" - current-maintainers: [*anubisnekhet] - nixos-search: - name: NixOS Search - category: search_engine - icon: nixos - color: blue - readme: - app-link: "https://search.nixos.org" - current-maintainers: [*alaidriel] - paste.rs: - name: paste.rs - category: development - readme: - app-link: "https://paste.rs" - current-maintainers: [*stonks3141] - proton: - name: Proton - category: productivity - icon: protonmail - color: lavender - readme: - app-link: "https://proton.me/" - usage: "Open Proton Mail and click the settings in the top right, then set the base theme to `Snow` if you are using the Latte flavor, otherwise set it to `Carbon`" - current-maintainers: [*soya-daizu] - quizlet: - name: Quizlet - category: productivity - readme: - app-link: "https://quizlet.com" - current-maintainers: [*spaghettiosareyummy] - reddit: - name: Reddit - category: social - color: red - icon: reddit - readme: - app-link: "https://reddit.com" - current-maintainers: [*jayylmao] - searxng: - name: SearXNG - category: search_engine - readme: - app-link: "https://github.com/searxng/searxng" - current-maintainers: [*sekki21956, *ryanccn] - substack: - name: Substack - category: social - readme: - app-link: "https://substack.com" - current-maintainers: [*winston] - tutanota: - name: Tutanota - category: productivity - color: red - readme: - app-link: "https://tutanota.com/" - usage: |+ - > **Note**
- > Set Tutanota's built-in theme to either **light** if you're using Latte or **dark** if you're using the others. - current-maintainers: [*ryanccn] - twitch: - name: Twitch - category: social - icon: twitch - color: mauve - readme: - app-link: "https://twitch.tv" - usage: |+ - > **Note**
- > Set Twitch's built-in theme to either **light** if you're using Latte or **dark** if you're using the others. - current-maintainers: [*gitmuslim, *isabelroses] - vercel: - name: Vercel - category: development - readme: - app-link: "https://vercel.com" - current-maintainers: [*ryanccn] - whatsapp-web: - name: WhatsApp Web - category: messaging - readme: - app-link: "https://web.whatsapp.com" - current-maintainers: [*francorav] - wikiwand: - name: WikiWand - category: productivity - icon: wikipedia - readme: - app-link: "https://www.wikiwand.com" - current-maintainers: [*tnixc] - youtube: - name: YouTube - category: social - color: red - readme: - app-link: "https://youtube.com" - usage: |+ - > **Note**
- > Make sure your base YouTube theme is set to **light** mode! - faq: - - question: "**What does the 'Enable for black bars' option mean?**" - answer: "It is there in-case you have an OLED display. If you have one, you might want to enable this." - current-maintainers: [*isabelroses] - past-maintainers: [*elkrien] -# yaml-language-server: $schema=https://raw.githubusercontent.com/catppuccin/userstyles/main/src/userstyles.schema.json diff --git a/styles/advent-of-code/README.md b/styles/advent-of-code/README.md index 0bfed36216..059288ff55 100644 --- a/styles/advent-of-code/README.md +++ b/styles/advent-of-code/README.md @@ -10,39 +10,18 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
+## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). - - -## 💝 Current Maintainer(s) +## 💝 Current Maintainer - [rubyowo](https://github.com/rubyowo) +  

diff --git a/styles/advent-of-code/assets/catwalk.webp b/styles/advent-of-code/assets/catwalk.webp deleted file mode 100644 index 4e390057c3..0000000000 --- a/styles/advent-of-code/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f9af8debf23f3d70d13731fd613b1e4818fb599536d07534ab8eb5ebcf29594a -size 372696 diff --git a/styles/advent-of-code/assets/frappe.webp b/styles/advent-of-code/assets/frappe.webp deleted file mode 100644 index 0a7f8630a0..0000000000 --- a/styles/advent-of-code/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f72eb7d37d69d3c0db7f47e5b078e8b603bde1e5e7c27cd4b468775e64ca1e7c -size 63726 diff --git a/styles/advent-of-code/assets/latte.webp b/styles/advent-of-code/assets/latte.webp deleted file mode 100644 index 5674096297..0000000000 --- a/styles/advent-of-code/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9c83683814090f58d9aaa3462c7d9e376f14d0d8ea59668060ba90c924344939 -size 64604 diff --git a/styles/advent-of-code/assets/macchiato.webp b/styles/advent-of-code/assets/macchiato.webp deleted file mode 100644 index 3cc7602f74..0000000000 --- a/styles/advent-of-code/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:fa18ec663664ae6d3f8619ca3c074ae52904b7c45745af6457006241b7854043 -size 64982 diff --git a/styles/advent-of-code/assets/mocha.webp b/styles/advent-of-code/assets/mocha.webp deleted file mode 100644 index b712efd9f9..0000000000 --- a/styles/advent-of-code/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c31f9179e39fb524065154804df865d2179ffa171a7ffa8eea8f17bcc57c5a63 -size 65636 diff --git a/styles/advent-of-code/catppuccin.user.css b/styles/advent-of-code/catppuccin.user.css deleted file mode 100644 index d8f263f252..0000000000 --- a/styles/advent-of-code/catppuccin.user.css +++ /dev/null @@ -1,324 +0,0 @@ -/* ==UserStyle== -@name Advent Of Code Catppuccin -@namespace github.com/catppuccin/userstyles/styles/advent-of-code -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/advent-of-code -@version 0.0.1 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/advent-of-code/catppuccin.user.css -@description Soothing pastel theme for Advent Of Code -@author Catppuccin -@license MIT - -@preprocessor less -@var select flavor "Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] -==/UserStyle== */ -@-moz-document domain("adventofcode.com") { - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - #catppuccin(@flavor); - - #catppuccin(@lookup) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - body { - background: @base; - color: @text; - - header h1 a, - header h1 span { - color: @green; - text-shadow: - 0 0 2px @green, - 0 0 5px @green; - } - - a { - color: @green; - } - - .star-count { - color: @yellow; - } - - .quiet { - color: @subtext0; - opacity: 1; - } - - .share, - .share:hover, - input[type="submit"] { - color: @green; - } - - main { - article { - em { - color: @text; - text-shadow: 0 0 5px @text; - } - - h2 { - color: @text; - } - - input[type="radio"]:checked ~ span, - input[type="checkbox"]:checked ~ span { - color: @text; - } - - input[type="radio"] ~ span:hover, - input[type="radio"] ~ span:focus, - input[type="checkbox"]:hover ~ span, - input[type="checkbox"]:focus ~ span { - background-color: @crust; - } - } - .supporter-badge { - color: @yellow; - } - - .supporter-badge:hover { - color: @yellow; - text-shadow: 0 0 5px @yellow; - } - - .sponsor-badge { - color: @blue; - } - - .sponsor-badge:hover, - .sponsor-badge:focus { - color: @blue; - text-shadow: 0 0 5px @blue; - } - - .leaderboard-entry { - .leaderboard-position { - color: @subtext1; - } - .leaderboard-totalscore { - color: @text; - } - } - - .leaderboard-daylinks-selected { - color: @text; - text-shadow: 0 0 5px @text; - } - - .leaderboard-daylinks-selected:hover { - color: @green; - } - - .leaderboard-anon { - opacity: 1; - color: @subtext0; - } - .calendar { - .calendar-color-w { - color: @text; - } - .calendar-color-s { - color: @yellow; - } - .calendar-color-c { - color: @subtext1; - } - .calendar-color-g3 { - color: darken(@green, 3); - } - .calendar-color-g2 { - color: @green; - } - .calendar-color-g4 { - color: darken(@green, 3.5); - } - .calendar-color-u { - color: @sky; - } - .calendar-color-a { - color: @subtext0; - } - .calendar-color-g1 { - color: darken(@green, 2.5); - } - .calendar-color-g0 { - color: darken(@green, 2); - } - .calendar-color-l { - color: @red; - } - .calendar-mark-complete { - color: @yellow; - } - .calendar-mark-verycomplete { - color: @yellow; - } - .calendar-day { - color: @subtext1; - } - #calendar-countdown { - color: @subtext1; - } - - span { - color: @surface0; - } - - a { - color: @surface2; - } - } - - .day-success { - color: @yellow; - text-shadow: 0 0 5x @yellow; - } - - input[type="text"], - textarea, - code::before { - border-color: @surface0; - background: @crust; - } - } - } - } -} diff --git a/styles/advent-of-code/catppuccin.user.less b/styles/advent-of-code/catppuccin.user.less new file mode 100644 index 0000000000..664d8ab95e --- /dev/null +++ b/styles/advent-of-code/catppuccin.user.less @@ -0,0 +1,209 @@ +/* ==UserStyle== +@name Advent Of Code Catppuccin +@namespace github.com/catppuccin/userstyles/styles/advent-of-code +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/advent-of-code +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/advent-of-code/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aadvent-of-code +@description Soothing pastel theme for Advent Of Code +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("adventofcode.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + body { + background: @base; + color: @text; + + header h1 a, + header h1 span { + color: @green; + text-shadow: 0 0 2px @green, 0 0 5px @green; + } + + a { + color: @green; + } + + .star-count { + color: @yellow; + } + + .quiet { + color: @subtext0; + opacity: 1; + } + + .share, + .share:hover, + input[type="submit"] { + color: @green; + } + + main { + article { + em { + color: @text; + text-shadow: 0 0 5px @text; + } + + h2 { + color: @text; + } + + input[type="radio"]:checked ~ span, + input[type="checkbox"]:checked ~ span { + color: @text; + } + + input[type="radio"] ~ span:hover, + input[type="radio"] ~ span:focus, + input[type="checkbox"]:hover ~ span, + input[type="checkbox"]:focus ~ span { + background-color: @crust; + } + } + .supporter-badge { + color: @yellow; + } + + .supporter-badge:hover { + color: @yellow; + text-shadow: 0 0 5px @yellow; + } + + .sponsor-badge { + color: @blue; + } + + .sponsor-badge:hover, + .sponsor-badge:focus { + color: @blue; + text-shadow: 0 0 5px @blue; + } + + .leaderboard-entry { + .leaderboard-position { + color: @subtext1; + } + .leaderboard-totalscore { + color: @text; + } + } + + .leaderboard-daylinks-selected { + color: @text; + text-shadow: 0 0 5px @text; + } + + .leaderboard-daylinks-selected:hover { + color: @green; + } + + .leaderboard-anon { + opacity: 1; + color: @subtext0; + } + .calendar { + .calendar-color-w { + color: @text; + } + .calendar-color-s { + color: @yellow; + } + .calendar-color-c { + color: @subtext1; + } + .calendar-color-g3 { + color: darken(@green, 3%); + } + .calendar-color-g2 { + color: @green; + } + .calendar-color-g4 { + color: darken(@green, 3.5%); + } + .calendar-color-u { + color: @sky; + } + .calendar-color-a { + color: @subtext0; + } + .calendar-color-g1 { + color: darken(@green, 2.5%); + } + .calendar-color-g0 { + color: darken(@green, 2%); + } + .calendar-color-l { + color: @red; + } + .calendar-mark-complete { + color: @yellow; + } + .calendar-mark-verycomplete { + color: @yellow; + } + .calendar-day { + color: @subtext1; + } + #calendar-countdown { + color: @subtext1; + } + + span { + color: @surface0; + } + + a { + color: @surface2; + } + } + + .day-success { + color: @yellow; + text-shadow: 0 0 5px @yellow; + } + + .stats-both { + color: @yellow; + } + + .stats-firstonly { + color: @overlay0; + } + + a:hover { + background-color: @mantle !important; + } + + input[type="text"], + textarea, + code::before { + border-color: @surface0; + background: @crust; + } + } + } + } +} diff --git a/styles/alacritty.org/README.md b/styles/alacritty.org/README.md new file mode 100644 index 0000000000..8dec010cab --- /dev/null +++ b/styles/alacritty.org/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for alacritty.org + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [AlwaysNur](https://github.com/AlwaysNur) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/alacritty.org/catppuccin.user.less b/styles/alacritty.org/catppuccin.user.less new file mode 100644 index 0000000000..4868840dcd --- /dev/null +++ b/styles/alacritty.org/catppuccin.user.less @@ -0,0 +1,82 @@ +/* ==UserStyle== +@name alacritty.org Catppuccin +@namespace github.com/catppuccin/userstyles/styles/alacritty.org +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/alacritty.org +@version 2025.11.07 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/alacritty.org/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aalacritty.org +@description Soothing pastel theme for alacritty.org +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("alacritty.org") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + body { + color: @text !important; + background-color: @base !important; + } + a { + color: @accent !important; + } + header { + background-color: @mantle !important; + border-bottom-color: @surface0 !important; + nav > a { + color: @text !important; + } + } + em { + color: @green !important; + } + strong, strong > a { + color: @blue !important; + } + #pick-version select { + color: @text !important; + background-color: @surface0; + border-color: @overlay0; + } + h1 { + color: @accent !important; + } + a:not([name]) { + text-shadow: none !important; + } + code { + background-color: @surface0; + } + video { + background-color: @overlay0 !important; + } + img:not(img#logo-img) { + border-color: @overlay0 !important; + } + img#logo-img { + border-color: @mantle !important; + } + kbd { + background-color: @surface1 !important; + border-color: @overlay0 !important; + } + } +} diff --git a/styles/alternativeto/README.md b/styles/alternativeto/README.md new file mode 100644 index 0000000000..ddb173922f --- /dev/null +++ b/styles/alternativeto/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for AlternativeTo + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [thismoon](https://github.com/thismoon) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/alternativeto/catppuccin.user.less b/styles/alternativeto/catppuccin.user.less new file mode 100644 index 0000000000..440a52706b --- /dev/null +++ b/styles/alternativeto/catppuccin.user.less @@ -0,0 +1,431 @@ +/* ==UserStyle== +@name AlternativeTo Catppuccin +@namespace github.com/catppuccin/userstyles/styles/alternativeto +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/alternativeto +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/alternativeto/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aalternativeto +@description Soothing pastel theme for AlternativeTo +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("alternativeto.net") { + :root[data-theme="dark"] { + #catppuccin(@darkFlavor); + } + :root[data-theme="light"] { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --mainBrand: @accent; + --topBrand: @accent; + --footer: @mantle; + --mainBg: @base; + --mainFg: @text; + --popBrand: @accent; + --introBoxText: @text; + --introBoxLink: @text; + --introBoxMeta: @subtext0; + --meta: @subtext0; + --metaLight: @subtext1; + --linkColorHeader: @text; + --linkColor: @text; + --brandLight3: @surface2; + --brandLight4: @surface2; + --brandLight5: @surface1; + --brandLight6: @mantle; + --brandLight7: @surface0; + --brandLight8: @text; + --brandLight10: @surface0; + --brandLight11: @mantle; + --gray50: @surface0; + --gray100: @surface0; + --gray150: @surface0; + --gray200: @surface1; + --gray250: @surface1; + --gray300: @surface1; + --gray500: @overlay0; + --headingButton: @accent; + --positiveGreener: @green; + --positiveGreenerLight: fade(@green, 10%); + --positiveGreenerDark: @green; + --danger: @red; + --negativeLight: fade(@peach, 10%); + --lightDanger: fade(@red, 25%); + --dangerDark: @red; + --ctaMain: @mauve; + --ctaLight: @base; + --ctaLightest: @mantle; + --tab: @mantle; + --toastify-color-dark: @mantle; + --toastify-color-light: @text; + --toastify-color-info: @blue; + --toastify-color-success: @green; + --toastify-color-warning: @yellow; + --toastify-color-error: @red; + + // heart icon + [class^="ModernLikeButton_likeWrapper"] { + [class^="ModernLikeButton_heart"]:hover, + [class^="ModernLikeButton_liked"] { + svg { + color: @red; + } + } + } + // primary button + [class*="Button_primary"] { + color: @crust !important; + } + // footer + [class^="Footer_footer"] { + &, + p a, + [class^="Footer_footerMenu"] li a { + color: @text; + } + } + [class^="Footer_footerLogo"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + // rating stars + [class^="StarRating_star"] { + color: @text; + &[class*="StarRating_active"] { + color: @peach; + } + } + // danger "discontinued" label + [class*="AppAlertWrapper_warning"] span { + color: @peach; + } + // feature point in alternative's features + [class*="HighlightFeatureListItem_featurePoint"]:not( + [class*="HighlightFeatureListItem_gray"] + ) { + background-color: @green; + color: @green; + border-color: lighten(@green, 25%); + } + // app banner (ad) + [class*="AppBanner_iconWrapper"], + [class*="AppBanner_banner"], + [class*="AppBanner_bottom"] { + border-color: @overlay0; + } + // navigation/top bar + [class^="HeaderLinks_globalSiteNav"] a, + [class^="HeaderLinks_globalSiteNav"] span, + [class^="HeaderLinks_authAndMenu"] a, + [class*="Button_headerTextButton"] svg, + [class*="Button_headerTextButton"]:hover svg, + [class^="HeaderLinks_header"] button:focus { + color: @base !important; + } + [class^="HeaderLinks_logoSmall"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + [class*="HeaderLinks_logoLarge"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + // hanburger menu + [class^="DropdownListLink_additionalInfo"] { + color: @subtext0; + } + // svg color variables + @light-peach: lighten(@peach, 25%); + @dark-peach: darken(@peach, 25%); + @dark-blue: desaturate(darken(@blue, 60%), 40%); + @darker-blue: desaturate(darken(@blue, 65%), 40%); + // main page header + img[class*="PageIntroImage_a2-header-"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + // flipped/mirrored/right variation of the a2 robot svg (found in /about and /about/privacy) + &[src^="/static/a2-header-right"] { + transform: scale(-1, 1); + } + } + @media screen and (min-width: 1200px) { + [class*="PageIntroWrapper_wrapper"] { + @svg: escape( + '' + ); + @svg2: escape( + '' + ); + background-image: + url("data:image/svg+xml,@{svg}"), + url("data:image/svg+xml,@{svg2}"); + } + } + // news page header + [src^="/static/a2-screen"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + // new app releases page header + [src^="/static/a2-drop"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + // bottom right loading spinner icon + #nprogress .spinner-icon { + border-top-color: @accent; + border-left-color: @accent; + } + // top progress bar when loading a new page + #nprogress .peg { + box-shadow: 0 0 10px @accent, 0 0 5px @accent; + } + // toast + .Toastify__close-button { + color: @text; + } + [data-testid="toast"] > div > span { + color: @text !important; + } + // remove filter badge + li[class^="AppFilterBarCommon_current"]:hover { + a::after, + > span::after { + color: darken(@red, 25%); + } + } + // news fire icon + @newstype: { + hottest: @peach; + hot_: @yellow; + luke: @text; + }; + each( + @newstype, + { + [class^="NewsForListMeta_@{key}"] { + color: @value; + } + } + ); + // current page nummber + [class*="Pagination_current"] { + color: @subtext0; + } + // full screen screenshot button + [class^="ImageCollection-modern_expandImage"] { + background: fade(@text, 80%) !important; + svg { + color: @crust !important; + } + & when (@flavor = latte) { + background: fade(@crust, 80%) !important; + svg { + color: @text !important; + } + } + } + // social icons + // rrs + svg[color="#f26522"] { + color: @peach !important; + } + // "Share on" icons + @socialapps: { + facebook: @blue; + reddit: @peach; + }; + [class^="ShareButtons_shareButtons"] { + each( + @socialapps, + { + [title="Share on @{key}"] > svg { + color: @value !important; + } + } + ); + } + // AppStores & Other Links + [class*="Button_black"], + [class^="AppExternalLinks_appstoreWrapper"] { + background: @crust; + color: @text; + &:hover { + background: @base; + } + [src$="ms-store.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + [src$="android-store.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + [src$="ios-store.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + // social networks + @socialnetworks: { + Facebook: @blue; + X: @text; + }; + [class^="AppExternalLinks_socialLinksWrapper"] { + each( + @socialnetworks, + { + [title^="@{key} page"] > svg { + color: @value !important; + } + } + ); + } + // yello star (e.g. the level in a user profile) + svg[color="#e39d06"] { + color: @yellow !important; + } + // list like button hover + [class*="LikeButton_likeButton"]:hover [class*="LikeButton_heart"] { + color: @red; + } + // register popup header + .data-collector .header { + color: @overlay2; + } + // danger button (clear all filters) + [class*="Button_danger"] { + background: @red; + border-color: @red; + color: @crust; + } + // warning button + [class*="Button_warning"] { + background-color: @yellow; + border-color: @yellow; + color: @crust; + } + // success button + [class*="Button_success"] { + background-color: @green; + border-color: @green; + color: @crust; + } + // disabled buttons + [class*="Button_button"][disabled] { + background-color: @surface2 !important; + border-color: @surface2 !important; + color: @overlay2 !important; + } + } +} + +@-moz-document domain("auth.alternativeto.net") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --widget-background-color: @base; + --input-background-color: @base; + --input-border-color: @surface1; + --input-text-color: @text; + --base-focus-color: @accent; + --link-color: @accent; + --primary-color: @accent; + --button-font-color: @crust; + --title-font-color: @text; + --font-default-color: @text; + --font-light-color: @subtext0; + --border-default-color: @surface1; + --social-button-border-color: @surface1; + --secondary-button-text-color: @text; + --transparency-focus-color: fade(@accent, 15%); + --icon-default-color: @overlay1; + --gray-lightest: @text; + --error-color: @red; + @error-svg: escape( + '' + ); + --icon-error: url("data:image/svg+xml,@{error-svg}"); + + body { + background: @crust; + } + .footer { + a { + color: @text; + } + background: @mantle; + color: @subtext0; + } + #prompt-logo-center { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + .password-icon-tooltip { + background: @crust; + + &::before { + border-color: @crust transparent transparent; + } + } + // "Continue with" login button icons + @loginicon: { + google: ""; + windowslive: ""; + github: ""; + apple: ""; + }; + each( + @loginicon, + { + span[data-provider="@{key}"] { + @svg: escape(@value); + background-image: url("data:image/svg+xml,@{svg}"); + } + } + ); + } +} diff --git a/styles/amplenote/README.md b/styles/amplenote/README.md new file mode 100644 index 0000000000..c17c0ff0ff --- /dev/null +++ b/styles/amplenote/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Amplenote + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [stellophiliac](https://github.com/stellophiliac) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/amplenote/catppuccin.user.less b/styles/amplenote/catppuccin.user.less new file mode 100644 index 0000000000..898c1605a8 --- /dev/null +++ b/styles/amplenote/catppuccin.user.less @@ -0,0 +1,199 @@ +/* ==UserStyle== +@name Amplenote Catppuccin +@namespace github.com/catppuccin/userstyles/styles/amplenote +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/amplenote +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/amplenote/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aamplenote +@description Soothing pastel theme for Amplenote +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("amplenote.com") { + body:not(.theme-light) { + #catppuccin(@darkFlavor); + } + + body.theme-light { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + &.themeable { + --color-background-primary: @base; + --color-background-primary-rgb: #lib.rgbify(@base)[]; + --color-background-secondary: @mantle; + --color-background-tertiary: @mantle; + + --color-background-popup: @base; + --color-background-dialog: @mantle; + --color-background-header: @mantle; + --color-background-nav: @mantle; + --color-background-nav-active: @surface0; + --color-background-search-bar: @crust; + --color-background-nav-menu: @mantle; + --color-background-nav-menu-divider: @crust; + --color-background-nav-avatar: @crust; + --color-background-popup-small: @surface0; + --color-background-reversed: @surface0; + --color-background-reversed-secondary: @surface2; + + --color-background-element-high-contrast: fade(@overlay2, 40%); + --color-background-element-medium-contrast: fade(@accent, 40%); + --color-background-element-medium-contrast-rgb: fade(@accent. 40%); + --color-background-element-low-contrast: @crust; + + --color-background-note-menu-button: @surface0; + --color-background-banner: @surface0; + --color-background-banner-alt: @base; + --color-background-nav-divider: @surface0; + + --color-background-action-low-contrast: fade(@accent, 50%); + --color-background-action-medium-contrast: fade(@accent, 60%); + --color-background-action-high-contrast: @accent; + --color-background-action-high-contrast-rgb: #lib.rgbify(@accent)[]; + --color-background-action-high-contrast-alt: fade(@accent, 75%); + + --color-background-error-high-contrast: @red; + --color-background-error-medium-contrast: fade(@red, 50%); + + --color-border-primary: @surface0; + --color-border-secondary: @surface1; + --color-border-tertiary: @surface1; + + --color-text-reversed: @text; + + --color-text-high-contrast: @text; + --color-text-nav-high-contrast: @text; + --color-text-medium-contrast: @subtext1; + --color-text-nav-medium-contrast: @subtext1; + --color-text-low-contrast: @subtext0; + --color-text-nav-low-contrast: @subtext0; + --color-text-lower-contrast: @overlay2; + --color-text-nav-lower-contrast: @surface2; + + --color-text-error-low-contrast: @peach; + --color-text-error-low-contrast-rgb: #lib.rgbify(@peach)[]; + --color-text-error-medium-contrast: @red; + --color-text-error-high-contrast: @red; + + --color-text-status: @green; + --color-text-link: @accent; + --color-text-button: @crust; + + --color-background-task-value: @surface1; + --color-background-sidebar-task: @surface0; + + --color-overlay-low-contrast: @accent; + + --mdc-theme-surface: @base; + } + + header.note-header-container .logo-wrapper .ample-svg-logo .logo-icon { + fill: @text; + } + + .notes-list .notes-list-item:hover { + background-color: @crust; + } + + .ample-editor .editor-tabs .tab:not(.current) { + border-bottom-color: @surface0 !important; + } + + .referencing-notes, + .tab.current, + .editor-title-input-wrapper textarea, + .completed-tasks, + .no-tasks-message { + background-color: @base !important; + } + + .new-note-button { + color: @crust !important; + } + + .ample-editor .check-list-item.value-1 .row-wrapper { + border-left-color: @sapphire; + } + + .menu-button.synced { + color: @green !important; + } + + .menu-button .refreshing { + color: @blue !important; + } + + .primary-side-nav .section-link.default .shortcut-icon { + color: @yellow; + } + + .ample-editor:not(.mobile-embed) + .check-list-item:hover:not(.expanded) + .row-wrapper { + background-color: @surface0; + } + + .mdc-chip-set.mdc-chip-set--choice + .mdc-chip.mdc-chip--selected + .mdc-chip__icon--leading, + .mdc-chip.mdc-chip--selected .mdc-chip__icon--leading { + color: @crust; + } + + .account-appearance-app .mdc-chip i.material-icons.mdc-chip__icon--leading { + color: @text; + } + + .DayPicker-Weekday { + color: @subtext0; + } + + .calendar-pane .fc { + .fc-timegrid-now-indicator-arrow { + .line { + border-bottom-color: @accent; + } + .material-icons { + color: @accent; + } + } + + .fc-timegrid-now-indicator-line { + border-color: darken(@accent, 10%); + } + + .fc-timegrid .fc-daygrid-day-events, + .fc-timegrid .all-day-slot { + background-color: @base; + } + } + + #completed-tasks-stroke-gradient, + #completed-tasks-fill-gradient { + [offset="0%"] { + stop-color: @maroon; + } + + [offset="50%"] { + stop-color: @peach; + } + + [offset="100%"] { + stop-color: @yellow; + } + } + } +} diff --git a/styles/anilist/README.md b/styles/anilist/README.md index 8eacbf3689..a3dc449491 100644 --- a/styles/anilist/README.md +++ b/styles/anilist/README.md @@ -10,42 +10,21 @@

- +

-

- -

- -## Previews +## Usage -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
+> [!IMPORTANT] +> This userstyle also applies to [AniChart](https://anichart.net). -## Usage -> **Note**
-> This theme applies to [AniChart](https://anichart.net/) as well, which is an extension of AniList. +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). - - -## 💝 Current Maintainer(s) +## 💝 Current Maintainer - [AnubisNekhet](https://github.com/AnubisNekhet) +  

diff --git a/styles/anilist/assets/anichart/catwalk.webp b/styles/anilist/assets/anichart/catwalk.webp deleted file mode 100644 index 7f9a36405c..0000000000 --- a/styles/anilist/assets/anichart/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:d0869b0d7ce3dbbf77c6c4cdf73d46ef7b6709e8be8fde904fac7a5eae6a583b -size 205864 diff --git a/styles/anilist/assets/anichart/frappe.webp b/styles/anilist/assets/anichart/frappe.webp deleted file mode 100644 index 7d0d7b2bb9..0000000000 --- a/styles/anilist/assets/anichart/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:cc3a4d1abf9c5edb9a353110b29131d92f15d5bdcb589d4f67e5e2ff0e8d91e3 -size 213100 diff --git a/styles/anilist/assets/anichart/latte.webp b/styles/anilist/assets/anichart/latte.webp deleted file mode 100644 index 93f6f164fe..0000000000 --- a/styles/anilist/assets/anichart/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b6d5060a5df7a86662c76e942a0cde8a438bfff1c7fa3ed6477aa9d374d9ef0e -size 211840 diff --git a/styles/anilist/assets/anichart/macchiato.webp b/styles/anilist/assets/anichart/macchiato.webp deleted file mode 100644 index 7b571825ed..0000000000 --- a/styles/anilist/assets/anichart/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:57b91ea687e219e39b94b1e1a5a9ed53f5e353b6f12f5e952da9389cdcd69f2f -size 218150 diff --git a/styles/anilist/assets/anichart/mocha.webp b/styles/anilist/assets/anichart/mocha.webp deleted file mode 100644 index 802f259d1f..0000000000 --- a/styles/anilist/assets/anichart/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:abce914f561f16e423a712cd4db61c10139f8ac979d11434031f397101acf059 -size 219824 diff --git a/styles/anilist/assets/catwalk.webp b/styles/anilist/assets/catwalk.webp deleted file mode 100644 index 1d3753721c..0000000000 --- a/styles/anilist/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:32482735c852ffe19d4a71a996607d0d00f378c98fd021bf43bdba8b6946a3c9 -size 236912 diff --git a/styles/anilist/assets/frappe.webp b/styles/anilist/assets/frappe.webp deleted file mode 100644 index 741e09caf3..0000000000 --- a/styles/anilist/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:956601528366b062d1ef96f92325ca06a1f844ce28f2c75a470c8c87296d2323 -size 246440 diff --git a/styles/anilist/assets/latte.webp b/styles/anilist/assets/latte.webp deleted file mode 100644 index 40c37a12c6..0000000000 --- a/styles/anilist/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7a7124d0e05aa062b0460243bafd1e7cc337613c853948bc917837992dea1bc2 -size 249594 diff --git a/styles/anilist/assets/macchiato.webp b/styles/anilist/assets/macchiato.webp deleted file mode 100644 index 00d2c9d8f9..0000000000 --- a/styles/anilist/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3de010783ec1233c5c53cd98716b29f4cab14e90f6aa97008a434c1c09d23d7b -size 247432 diff --git a/styles/anilist/assets/mocha.webp b/styles/anilist/assets/mocha.webp deleted file mode 100644 index bbd7b08451..0000000000 --- a/styles/anilist/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6ec2388dec2ac59490003ee544139ed6b7a69e93e7d67dd468dc719de4e9cf8c -size 247800 diff --git a/styles/anilist/catppuccin.user.css b/styles/anilist/catppuccin.user.css deleted file mode 100644 index a8ca156872..0000000000 --- a/styles/anilist/catppuccin.user.css +++ /dev/null @@ -1,981 +0,0 @@ -/* ==UserStyle== -@name AniList Catppuccin -@namespace github.com/catppuccin/userstyles/styles/anilist -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/anilist -@version 2.1.1 -@description Soothing pastel theme for AniList -@author Catppuccin -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/anilist/catppuccin.user.css -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent Color" [ "rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green*", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray" ] -@var select contrastColor "Contrast Color" [ "rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green*", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray" ] -==/UserStyle== */ -@-moz-document domain("anilist.co") { - body:not(.site-theme-dark) { - #catppuccin(@lightFlavor, @accentColor); - } - .site-theme-dark { - #catppuccin(@darkFlavor, @accentColor); - } - - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - #rgbify(@color) { - @rgb-raw: red(@color) green(@color) blue(@color); - } - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent: @catppuccin[@@lookup][@@accentColor]; - @contrast-color: @catppuccin[@@lookup][@@contrastColor]; - /* raw rgb needs to be defined for some reason */ - @rgb-raw: @red; - - /* rgbify function converts a less color variable to raw rgb in @rgb-raw */ - #rgbify(@color) { - @rgb-raw: red(@color), green(@color), blue(@color); - } - - & when (@lookup =latte) { - --color-blue-dim: #rgbify(desaturate(lighten(@accent, 10%), 10%)) [ - @rgb-raw]; - .nav[data-v-62eacfff], - .solid[data-v-62eacfff], - .transparent[data-v-62eacfff]:hover { - background: darken(@text, 10%); - color: @base; - } - } - - & when not (@lookup =latte) { - --color-blue-dim: #rgbify(desaturate(darken(@accent, 10%), 10%)) [ - @rgb-raw]; - } - - /* BASE VARIABLES */ - & { - --color-background: #rgbify(@crust) [ @rgb-raw]; - --color-foreground: #rgbify(@base) [ @rgb-raw]; - --color-foreground-grey: #rgbify(@surface0) [ @rgb-raw]; - --color-foreground-grey-dark: #rgbify(@surface0) [ @rgb-raw]; - --color-foreground-blue: #rgbify(@mantle) [ @rgb-raw]; - --color-foreground-blue-dark: #rgbify(@mantle) [ @rgb-raw]; - --color-background-blue-dark: #rgbify(@subtext1) [ @rgb-raw]; - --color-overlay: #rgbify(@crust) [ @rgb-raw]; - --color-shadow: #rgbify(@mantle) [ @rgb-raw]; - --color-shadow-dark: #rgbify(@crust) [ @rgb-raw]; - --color-shadow-blue: #rgbify(@blue) [ @rgb-raw]; - --color-text: #rgbify(@text) [ @rgb-raw]; - --color-text-light: #rgbify(@subtext1) [ @rgb-raw]; - --color-text-lighter: #rgbify(@subtext0) [ @rgb-raw]; - --color-text-bright: #rgbify(@text) [ @rgb-raw]; - --color-blue: #rgbify(@accent) [ @rgb-raw]; - --color-white: 255, 255, 255; - --color-black: 0, 0, 0; - --color-red: #rgbify(@contrast-color) [ @rgb-raw]; - --color-peach: #rgbify(@maroon) [ @rgb-raw]; - --color-orange: #rgbify(@peach) [ @rgb-raw]; - --color-yellow: #rgbify(@yellow) [ @rgb-raw]; - --color-green: #rgbify(@green) [ @rgb-raw]; - --color-background-1200: #rgbify(@text) [ @rgb-raw]; - --color-background-1100: #rgbify(@text) [ @rgb-raw]; - --color-background-1000: #rgbify(@text) [ @rgb-raw]; - --color-background-900: #rgbify(@subtext1) [ @rgb-raw]; - --color-background-800: #rgbify(@subtext0) [ @rgb-raw]; - --color-background-700: #rgbify(@surface1) [ @rgb-raw]; - --color-background-600: #rgbify(@surface0) [ @rgb-raw]; - --color-background-500: #rgbify(@surface0) [ @rgb-raw]; - --color-background-400: #rgbify(@surface0) [ @rgb-raw]; - --color-background-300: #rgbify(@base) [ @rgb-raw]; - --color-background-200: #rgbify(@mantle) [ @rgb-raw]; - --color-background-100: #rgbify(@crust) [ @rgb-raw]; - --color-gray-1200: #rgbify(@text) [ @rgb-raw]; - --color-gray-1100: #rgbify(@text) [ @rgb-raw]; - --color-gray-1000: #rgbify(@text) [ @rgb-raw]; - --color-gray-900: #rgbify(@text) [ @rgb-raw]; - --color-gray-800: #rgbify(@overlay2) [ @rgb-raw]; - --color-gray-700: #rgbify(@overlay1) [ @rgb-raw]; - --color-gray-600: #rgbify(@overlay0) [ @rgb-raw]; - --color-gray-500: #rgbify(@surface2) [ @rgb-raw]; - --color-gray-400: #rgbify(@surface1) [ @rgb-raw]; - --color-gray-300: #rgbify(@surface0) [ @rgb-raw]; - --color-gray-200: #rgbify(@mantle) [ @rgb-raw]; - --color-gray-100: #rgbify(@crust) [ @rgb-raw]; - --color-blue-100: #rgbify(@text) [ @rgb-raw]; - --color-blue-200: #rgbify(@text) [ @rgb-raw]; - --color-blue-300: #rgbify(@text) [ @rgb-raw]; - --color-blue-400: #rgbify(@sapphire) [ @rgb-raw]; - --color-blue-500: #rgbify(@sapphire) [ @rgb-raw]; - --color-blue-600: #rgbify(@blue) [ @rgb-raw]; - --color-blue-700: #rgbify(@blue) [ @rgb-raw]; - --color-blue-800: #rgbify(@blue) [ @rgb-raw]; - --color-blue-900: #rgbify(@blue) [ @rgb-raw]; - --color-blue-1000: #rgbify(@blue) [ @rgb-raw]; - --color-green-100: #rgbify(@teal) [ @rgb-raw]; - --color-green-200: #rgbify(@green) [ @rgb-raw]; - --color-green-300: #rgbify(@green) [ @rgb-raw]; - --color-green-400: #rgbify(@green) [ @rgb-raw]; - --color-green-500: #rgbify(@green) [ @rgb-raw]; - --color-green-600: #rgbify(@green) [ @rgb-raw]; - --color-green-700: #rgbify(@green) [ @rgb-raw]; - --color-green-800: #rgbify(@green) [ @rgb-raw]; - --color-red-100: #rgbify(@text) [ @rgb-raw]; - --color-red-200: #rgbify(@flamingo) [ @rgb-raw]; - --color-red-300: #rgbify(@maroon) [ @rgb-raw]; - --color-red-400: #rgbify(@red) [ @rgb-raw]; - --color-red-500: #rgbify(@red) [ @rgb-raw]; - --color-red-600: #rgbify(@red) [ @rgb-raw]; - --color-red-700: #rgbify(@red) [ @rgb-raw]; - } - /* DARK THEME SPECIFIC TWEAKS */ - & when not (@lookup =latte) { - --color-background: #rgbify(@crust) [ @rgb-raw]; - --color-foreground: #rgbify(@base) [ @rgb-raw]; - --color-foreground-grey: #rgbify(@surface0) [ @rgb-raw]; - --color-foreground-grey-dark: #rgbify(@surface0) [ @rgb-raw]; - --color-foreground-blue: #rgbify(@mantle) [ @rgb-raw]; - --color-foreground-blue-dark: #rgbify(@mantle) [ @rgb-raw]; - --color-text: #rgbify(@text) [ @rgb-raw]; - --color-text-light: #rgbify(@subtext0) [ @rgb-raw]; - --color-text-lighter: #rgbify(@subtext1) [ @rgb-raw]; - --color-shadow-blue: #rgbify(@crust) [ @rgb-raw]; - --color-background-1200: #rgbify(@text) [ @rgb-raw]; - --color-background-1100: #rgbify(@text) [ @rgb-raw]; - --color-background-1000: #rgbify(@text) [ @rgb-raw]; - --color-background-900: #rgbify(@subtext1) [ @rgb-raw]; - --color-background-800: #rgbify(@subtext0) [ @rgb-raw]; - --color-background-700: #rgbify(@surface1) [ @rgb-raw]; - --color-background-600: #rgbify(@surface0) [ @rgb-raw]; - --color-background-500: #rgbify(@surface0) [ @rgb-raw]; - --color-background-400: #rgbify(@surface0) [ @rgb-raw]; - --color-background-300: #rgbify(@base) [ @rgb-raw]; - --color-background-200: #rgbify(@mantle) [ @rgb-raw]; - --color-background-100: #rgbify(@crust) [ @rgb-raw]; - --color-gray-1200: #rgbify(@text) [ @rgb-raw]; - --color-gray-1100: #rgbify(@text) [ @rgb-raw]; - --color-gray-1000: #rgbify(@text) [ @rgb-raw]; - --color-gray-900: #rgbify(@text) [ @rgb-raw]; - --color-gray-800: #rgbify(@overlay2) [ @rgb-raw]; - --color-gray-700: #rgbify(@overlay1) [ @rgb-raw]; - --color-gray-600: #rgbify(@overlay0) [ @rgb-raw]; - --color-gray-500: #rgbify(@surface2) [ @rgb-raw]; - --color-gray-400: #rgbify(@surface1) [ @rgb-raw]; - --color-gray-300: #rgbify(@surface0) [ @rgb-raw]; - --color-gray-200: #rgbify(@mantle) [ @rgb-raw]; - --color-gray-100: #rgbify(@crust) [ @rgb-raw]; - } - /* DARK THEME NAV BAR */ - .nav-unscoped when not (@lookup =latte) { - background-color: @mantle !important; - } - /*-----------------PROFILE FIXES-----------------*/ - #profileColor(@color) { - --color-blue: #rgbify(@color) [ @rgb-raw]; - & when (@lookup =latte) { - --color-blue-dim: #rgbify(lighten(@color, 10%)) [ @rgb-raw]; - } - & when not (@lookup =latte) { - --color-blue-dim: #rgbify(darken(@color, 10%)) [ @rgb-raw]; - } - --color-overlay: @crust; - .progress .bar { - background: linear-gradient(270deg, darken(@color, 10%), @color); - } - } - .user-page-unscoped.orange { - #profileColor(@peach); - } - .user-page-unscoped.green { - #profileColor(@green); - } - .user-page-unscoped.purple { - #profileColor(@mauve); - } - .user-page-unscoped.red { - #profileColor(@red); - } - .user-page-unscoped.blue { - #profileColor(@blue); - } - .user-page-unscoped.pink { - #profileColor(@pink); - } - .user-page-unscoped.gray { - #profileColor(@overlay1); - } - - /*--------------Tags----------------*/ - .tag { - background: @accent !important; - color: @base !important; - } - .genre { - color: @base !important; - } - - /*----Tracking Status List Stuff----*/ - .list[data-v-5776f768], - .el-icon-arrow-down:before { - color: @mantle !important; - } - .el-dropdown-menu, - .el-dropdown-menu__item--divided:before, - .el-select-dropdown { - background-color: @base !important; - } - .el-dropdown-menu { - border: 4px @text !important; - } - .el-dropdown-menu__item:focus, - .el-dropdown-menu__item:not(.is-disabled):hover { - color: @crust !important; - } - .el-dropdown-menu__item--divided when not (@lookup =latte) { - border-top-color: rgb(21, 31, 46); - } - .el-select-dropdown__item.hover, - .el-select-dropdown__item:hover { - background-color: @mantle; - } - - /*---------SCORE TWEAKS--------------*/ - .score[data-v-5ca094da] { - color: @base; - } - - /*--------------FOOTER (It's hardcoded idk why anilist dumdum)----------*/ - .footer[data-v-0f519cab] { - background: @crust; - color: @subtext0; - } - - /*------------------MISC EDITS--------------------*/ - /*--Reset button in notifications-----*/ - .reset-btn { - color: @base !important; - } - /* Publish Button in Replies and Messages */ - .save { - color: @base !important; - } - /*------------IMAGE COVER------------*/ - .cover .image-text, - .plus-progress { - color: @text !important; - } - - .entry .plus-progress, - .medialist.table .entry .edit { - color: @base !important; - } - /*--------Settings button--------*/ - .settings[data-v-3deab077] .button { - color: @crust; - } - .el-checkbox__input.is-checked .el-checkbox__inner, - .el-radio__input.is-checked .el-radio__inner { - background-color: @accent; - border-color: @accent; - } - .el-checkbox__inner:after { - border-color: @crust; - border-width: 2px; - left: 3px; - } - .el-radio__input.is-checked + .el-radio__label { - color: @accent; - } - /*--------HIDE SCROLLBAR IN BIO-----*/ - .section::-webkit-scrollbar { - display: none; - } - .section { - -ms-overflow-style: none; - scrollbar-width: none; - } - /*--------REMOVE DROPDOWN SHADOWS-----*/ - .dropdown.dropdown { - box-shadow: none; - } - /*---------ANILIST LIKER PLUGIN------*/ - #AnilistLikerPlugin .mmd2 { - font-style: normal !important; - font-weight: 700; - font-family: Overpass; - } - #AnilistLikerPlugin .btntop { - margin-bottom: -4px; - margin-top: 5px; - } - #AnilistLikerPlugin .btnbottom { - margin-top: -2px; - } - } -} - -@-moz-document domain("anichart.net") { - body:not(.site-theme-dark) { - #catppuccin(@lightFlavor, @accentColor); - } - .site-theme-dark { - #catppuccin(@darkFlavor, @accentColor); - } - - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - #rgbify(@color) { - @rgb-raw: red(@color) green(@color) blue(@color); - } - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent: @catppuccin[@@lookup][@@accentColor]; - @contrast-color: @catppuccin[@@lookup][@@contrastColor]; - /* raw rgb needs to be defined for some reason */ - @rgb-raw: @red; - - /* rgbify function converts a less color variable to raw rgb in @rgb-raw */ - #rgbify(@color) { - @rgb-raw: red(@color), green(@color), blue(@color); - } - - & when (@lookup =latte) { - --color-blue-dim: #rgbify(desaturate(lighten(@accent, 10%), 10%)) [ - @rgb-raw]; - .nav[data-v-62eacfff], - .solid[data-v-62eacfff], - .transparent[data-v-62eacfff]:hover { - background: darken(@text, 10%); - color: @base; - } - } - - & when not (@lookup =latte) { - --color-blue-dim: #rgbify(desaturate(darken(@accent, 10%), 10%)) [ - @rgb-raw]; - } - - /* BASE VARIABLES */ - & { - --color-background: #rgbify(@crust) [ @rgb-raw]; - --color-foreground: #rgbify(@base) [ @rgb-raw]; - --color-foreground-grey: #rgbify(@surface0) [ @rgb-raw]; - --color-foreground-grey-dark: #rgbify(@surface0) [ @rgb-raw]; - --color-foreground-blue: #rgbify(@mantle) [ @rgb-raw]; - --color-foreground-blue-dark: #rgbify(@mantle) [ @rgb-raw]; - --color-background-blue-dark: #rgbify(@subtext1) [ @rgb-raw]; - --color-overlay: #rgbify(@crust) [ @rgb-raw]; - --color-shadow: #rgbify(@mantle) [ @rgb-raw]; - --color-shadow-dark: #rgbify(@crust) [ @rgb-raw]; - --color-shadow-blue: #rgbify(@blue) [ @rgb-raw]; - --color-text: #rgbify(@text) [ @rgb-raw]; - --color-text-light: #rgbify(@subtext1) [ @rgb-raw]; - --color-text-lighter: #rgbify(@subtext0) [ @rgb-raw]; - --color-text-bright: #rgbify(@text) [ @rgb-raw]; - --color-blue: #rgbify(@accent) [ @rgb-raw]; - --color-white: 255, 255, 255; - --color-black: 0, 0, 0; - --color-red: #rgbify(@contrast-color) [ @rgb-raw]; - --color-peach: #rgbify(@maroon) [ @rgb-raw]; - --color-orange: #rgbify(@peach) [ @rgb-raw]; - --color-yellow: #rgbify(@yellow) [ @rgb-raw]; - --color-green: #rgbify(@green) [ @rgb-raw]; - --color-background-1200: #rgbify(@text) [ @rgb-raw]; - --color-background-1100: #rgbify(@text) [ @rgb-raw]; - --color-background-1000: #rgbify(@text) [ @rgb-raw]; - --color-background-900: #rgbify(@subtext1) [ @rgb-raw]; - --color-background-800: #rgbify(@subtext0) [ @rgb-raw]; - --color-background-700: #rgbify(@surface1) [ @rgb-raw]; - --color-background-600: #rgbify(@surface0) [ @rgb-raw]; - --color-background-500: #rgbify(@surface0) [ @rgb-raw]; - --color-background-400: #rgbify(@surface0) [ @rgb-raw]; - --color-background-300: #rgbify(@base) [ @rgb-raw]; - --color-background-200: #rgbify(@mantle) [ @rgb-raw]; - --color-background-100: #rgbify(@crust) [ @rgb-raw]; - --color-gray-1200: #rgbify(@text) [ @rgb-raw]; - --color-gray-1100: #rgbify(@text) [ @rgb-raw]; - --color-gray-1000: #rgbify(@text) [ @rgb-raw]; - --color-gray-900: #rgbify(@text) [ @rgb-raw]; - --color-gray-800: #rgbify(@overlay2) [ @rgb-raw]; - --color-gray-700: #rgbify(@overlay1) [ @rgb-raw]; - --color-gray-600: #rgbify(@overlay0) [ @rgb-raw]; - --color-gray-500: #rgbify(@surface2) [ @rgb-raw]; - --color-gray-400: #rgbify(@surface1) [ @rgb-raw]; - --color-gray-300: #rgbify(@surface0) [ @rgb-raw]; - --color-gray-200: #rgbify(@mantle) [ @rgb-raw]; - --color-gray-100: #rgbify(@crust) [ @rgb-raw]; - --color-blue-100: #rgbify(@text) [ @rgb-raw]; - --color-blue-200: #rgbify(@text) [ @rgb-raw]; - --color-blue-300: #rgbify(@text) [ @rgb-raw]; - --color-blue-400: #rgbify(@sapphire) [ @rgb-raw]; - --color-blue-500: #rgbify(@sapphire) [ @rgb-raw]; - --color-blue-600: #rgbify(@blue) [ @rgb-raw]; - --color-blue-700: #rgbify(@blue) [ @rgb-raw]; - --color-blue-800: #rgbify(@blue) [ @rgb-raw]; - --color-blue-900: #rgbify(@blue) [ @rgb-raw]; - --color-blue-1000: #rgbify(@blue) [ @rgb-raw]; - --color-green-100: #rgbify(@teal) [ @rgb-raw]; - --color-green-200: #rgbify(@green) [ @rgb-raw]; - --color-green-300: #rgbify(@green) [ @rgb-raw]; - --color-green-400: #rgbify(@green) [ @rgb-raw]; - --color-green-500: #rgbify(@green) [ @rgb-raw]; - --color-green-600: #rgbify(@green) [ @rgb-raw]; - --color-green-700: #rgbify(@green) [ @rgb-raw]; - --color-green-800: #rgbify(@green) [ @rgb-raw]; - --color-red-100: #rgbify(@text) [ @rgb-raw]; - --color-red-200: #rgbify(@flamingo) [ @rgb-raw]; - --color-red-300: #rgbify(@maroon) [ @rgb-raw]; - --color-red-400: #rgbify(@red) [ @rgb-raw]; - --color-red-500: #rgbify(@red) [ @rgb-raw]; - --color-red-600: #rgbify(@red) [ @rgb-raw]; - --color-red-700: #rgbify(@red) [ @rgb-raw]; - } - /* DARK THEME SPECIFIC TWEAKS */ - & when not (@lookup =latte) { - --color-background: #rgbify(@crust) [ @rgb-raw]; - --color-foreground: #rgbify(@base) [ @rgb-raw]; - --color-foreground-grey: #rgbify(@surface0) [ @rgb-raw]; - --color-foreground-grey-dark: #rgbify(@surface0) [ @rgb-raw]; - --color-foreground-blue: #rgbify(@mantle) [ @rgb-raw]; - --color-foreground-blue-dark: #rgbify(@mantle) [ @rgb-raw]; - --color-text: #rgbify(@text) [ @rgb-raw]; - --color-text-light: #rgbify(@subtext0) [ @rgb-raw]; - --color-text-lighter: #rgbify(@subtext1) [ @rgb-raw]; - --color-shadow-blue: #rgbify(@crust) [ @rgb-raw]; - --color-background-1200: #rgbify(@text) [ @rgb-raw]; - --color-background-1100: #rgbify(@text) [ @rgb-raw]; - --color-background-1000: #rgbify(@text) [ @rgb-raw]; - --color-background-900: #rgbify(@subtext1) [ @rgb-raw]; - --color-background-800: #rgbify(@subtext0) [ @rgb-raw]; - --color-background-700: #rgbify(@surface1) [ @rgb-raw]; - --color-background-600: #rgbify(@surface0) [ @rgb-raw]; - --color-background-500: #rgbify(@surface0) [ @rgb-raw]; - --color-background-400: #rgbify(@surface0) [ @rgb-raw]; - --color-background-300: #rgbify(@base) [ @rgb-raw]; - --color-background-200: #rgbify(@mantle) [ @rgb-raw]; - --color-background-100: #rgbify(@crust) [ @rgb-raw]; - --color-gray-1200: #rgbify(@text) [ @rgb-raw]; - --color-gray-1100: #rgbify(@text) [ @rgb-raw]; - --color-gray-1000: #rgbify(@text) [ @rgb-raw]; - --color-gray-900: #rgbify(@text) [ @rgb-raw]; - --color-gray-800: #rgbify(@overlay2) [ @rgb-raw]; - --color-gray-700: #rgbify(@overlay1) [ @rgb-raw]; - --color-gray-600: #rgbify(@overlay0) [ @rgb-raw]; - --color-gray-500: #rgbify(@surface2) [ @rgb-raw]; - --color-gray-400: #rgbify(@surface1) [ @rgb-raw]; - --color-gray-300: #rgbify(@surface0) [ @rgb-raw]; - --color-gray-200: #rgbify(@mantle) [ @rgb-raw]; - --color-gray-100: #rgbify(@crust) [ @rgb-raw]; - } - /* DARK THEME NAV BAR */ - .nav-unscoped when not (@lookup =latte) { - background-color: @mantle !important; - } - /*-----------------PROFILE FIXES-----------------*/ - #profileColor(@color) { - --color-blue: #rgbify(@color) [ @rgb-raw]; - & when (@lookup =latte) { - --color-blue-dim: #rgbify(lighten(@color, 10%)) [ @rgb-raw]; - } - & when not (@lookup =latte) { - --color-blue-dim: #rgbify(darken(@color, 10%)) [ @rgb-raw]; - } - --color-overlay: @crust; - .progress .bar { - background: linear-gradient(270deg, darken(@color, 10%), @color); - } - } - .user-page-unscoped.orange { - #profileColor(@peach); - } - .user-page-unscoped.green { - #profileColor(@green); - } - .user-page-unscoped.purple { - #profileColor(@mauve); - } - .user-page-unscoped.red { - #profileColor(@red); - } - .user-page-unscoped.blue { - #profileColor(@blue); - } - .user-page-unscoped.pink { - #profileColor(@pink); - } - .user-page-unscoped.gray { - #profileColor(@overlay1); - } - - /*--------------Tags----------------*/ - .tag { - background: @accent !important; - color: @base !important; - } - .genre { - color: @base !important; - } - - /*----Tracking Status List Stuff----*/ - .list[data-v-5776f768], - .el-icon-arrow-down:before { - color: @mantle !important; - } - .el-dropdown-menu, - .el-dropdown-menu__item--divided:before, - .el-select-dropdown { - background-color: @base !important; - } - .el-dropdown-menu { - border: 4px @text !important; - } - .el-dropdown-menu__item:focus, - .el-dropdown-menu__item:not(.is-disabled):hover { - color: @crust !important; - } - .el-dropdown-menu__item--divided when not (@lookup =latte) { - border-top-color: rgb(21, 31, 46); - } - .el-select-dropdown__item.hover, - .el-select-dropdown__item:hover { - background-color: @mantle; - } - - /*---------SCORE TWEAKS--------------*/ - .score[data-v-5ca094da] { - color: @base; - } - - /*--------------FOOTER (It's hardcoded idk why anilist dumdum)----------*/ - .footer[data-v-0f519cab] { - background: @crust; - color: @subtext0; - } - - /*------------------MISC EDITS--------------------*/ - /*--Reset button in notifications-----*/ - .reset-btn { - color: @base !important; - } - /* Publish Button in Replies and Messages */ - .save { - color: @base !important; - } - /*------------IMAGE COVER------------*/ - .cover .image-text, - .plus-progress { - color: @text !important; - } - - .entry .plus-progress, - .medialist.table .entry .edit { - color: @base !important; - } - /*--------Settings button--------*/ - .settings[data-v-3deab077] .button { - color: @crust; - } - .el-checkbox__input.is-checked .el-checkbox__inner, - .el-radio__input.is-checked .el-radio__inner { - background-color: @accent; - border-color: @accent; - } - .el-checkbox__inner:after { - border-color: @crust; - border-width: 2px; - left: 3px; - } - .el-radio__input.is-checked + .el-radio__label { - color: @accent; - } - /*--------HIDE SCROLLBAR IN BIO-----*/ - .section::-webkit-scrollbar { - display: none; - } - .section { - -ms-overflow-style: none; - scrollbar-width: none; - } - /*--------REMOVE DROPDOWN SHADOWS-----*/ - .dropdown.dropdown { - box-shadow: none; - } - /*---------ANILIST LIKER PLUGIN------*/ - #AnilistLikerPlugin .mmd2 { - font-style: normal !important; - font-weight: 700; - font-family: Overpass; - } - #AnilistLikerPlugin .btntop { - margin-bottom: -4px; - margin-top: 5px; - } - #AnilistLikerPlugin .btnbottom { - margin-top: -2px; - } - - /*--------ANICHART SPECIFIC TWEAKS----*/ - .login[data-v-0d5bfbcd], - .login[data-v-0d5bfbcd]:hover { - color: @base; - } - - .nav[data-v-e2f25004] { - background: @crust; - } - .season[data-v-e2f25004], - .charts .label[data-v-e2f25004], - .charts .svg-icon[data-v-e2f25004], - .section:first-of-type .section-heading[data-v-309146c2], - a.title[data-v-09928904] { - color: @text; - } - .season.router-link-active[data-v-e2f25004], - .charts a:hover .svg-icon[data-v-e2f25004], - .season[data-v-e2f25004]:hover, - .charts .router-link-active .svg-icon[data-v-e2f25004] { - color: @accent; - } - .settings[data-v-3deab077] .button.danger { - color: @base; - } - /* AUTOMAIL TWEAK */ - .site-theme-dark .el-popper .el-dropdown-menu__item:focus, - .el-popper .el-dropdown-menu__item:not(.is-disabled):hover { - color: @accent !important; - } - .hohMediaScore { - font-size: 90%; - font-family: Overpass; - border: 2px solid @surface0; - padding: 4px; - border-radius: 10px; - margin-left: 0px; - background-color: @base; - color: @accent; - } - .filter-group.compare-btn, - .hohButton { - color: @base; - } - .hohButton { - background-color: @accent; - } - .medialist.table .entry:hover, - .medialist.table .entry .title a:hover, - .compare-btn[data-v-170179fc]:hover { - color: @base; - } - .hohCompare table { - background-color: @crust; - } - .hohAnimeTable, - .hohAnimeTable td, - .hohUserRow td, - .hohUserRow th, - .hohHeaderRow td, - .hohHeaderRow th { - border: 2px solid @surface0 !important; - } - .hohUserRow td { - border-top: 4px solid @surface0 !important; - } - .hohUserRow tr { - border-right: 4px solid @surface0 !important; - } - - /*---------ANILIST LIKER PLUGIN------*/ - #AnilistLikerPlugin .mmd2 { - font-style: normal !important; - font-weight: 700; - font-family: Overpass; - } - #AnilistLikerPlugin .btntop { - margin-bottom: -4px; - margin-top: 5px; - } - #AnilistLikerPlugin .btnbottom { - margin-top: -2px; - } - } -} diff --git a/styles/anilist/catppuccin.user.less b/styles/anilist/catppuccin.user.less new file mode 100644 index 0000000000..223f5a263f --- /dev/null +++ b/styles/anilist/catppuccin.user.less @@ -0,0 +1,654 @@ +/* ==UserStyle== +@name AniList/AniChart Catppuccin +@namespace github.com/catppuccin/userstyles/styles/anilist +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/anilist +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/anilist/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aanilist +@description Soothing pastel theme for AniList and AniChart +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] + +@var select contrastColor "Contrast Color" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("anilist.co"), domain("anichart.net") { + body:not(.site-theme-dark) { + #catppuccin(@lightFlavor); + } + .site-theme-dark { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + + @contrast: @catppuccin[@@flavor][@@contrastColor]; + + #lib.defaults(); + + & when (@flavor = latte) { + --color-blue-dim: #lib.rgbify(desaturate(lighten(@accent, 10%), 10%))[]; + + .nav[data-v-62eacfff], + .solid[data-v-62eacfff], + .transparent[data-v-62eacfff]:hover { + background: darken(@text, 10%); + color: @base; + } + + .nav-unscoped.transparent { + background: fade(darken(@text, 10%), 50%); + } + } + + --color-background: #lib.rgbify(@crust)[]; + --color-foreground: #lib.rgbify(@base)[]; + --color-foreground-grey: #lib.rgbify(@surface0)[]; + --color-foreground-grey-dark: #lib.rgbify(darken(@surface0, 5%))[]; + --color-foreground-blue: #lib.rgbify(@mantle)[]; + --color-foreground-blue-dark: #lib.rgbify(@mantle)[]; + --color-background-blue-dark: #lib.rgbify(@subtext1)[]; + --color-overlay: #lib.rgbify(@surface0)[]; + --color-shadow: #lib.rgbify(@mantle)[]; + --color-shadow-dark: #lib.rgbify(darken(@text, 10%))[]; + --color-shadow-blue: #lib.rgbify(@blue)[]; + --color-text: #lib.rgbify(@text)[]; + --color-text-light: #lib.rgbify(@subtext1)[]; + --color-text-lighter: #lib.rgbify(@subtext0)[]; + --color-text-bright: #lib.rgbify(if(@flavor = latte, @crust, @text))[]; + --color-blue: #lib.rgbify(@accent)[]; + --color-white: 255, 255, 255; + --color-black: 0, 0, 0; + --color-red: #lib.rgbify(@contrast)[]; + --color-peach: #lib.rgbify(@maroon)[]; + --color-orange: #lib.rgbify(@peach)[]; + --color-yellow: #lib.rgbify(@yellow)[]; + --color-green: #lib.rgbify(@green)[]; + --color-background-1200: #lib.rgbify(@text)[]; + --color-background-1100: #lib.rgbify(@text)[]; + --color-background-1000: #lib.rgbify(@text)[]; + --color-background-900: #lib.rgbify(@subtext1)[]; + --color-background-800: #lib.rgbify(@subtext0)[]; + --color-background-700: #lib.rgbify(@surface1)[]; + --color-background-600: #lib.rgbify(@surface0)[]; + --color-background-500: #lib.rgbify(@surface0)[]; + --color-background-400: #lib.rgbify(@surface0)[]; + --color-background-300: #lib.rgbify(@base)[]; + --color-background-200: #lib.rgbify(@mantle)[]; + --color-background-100: #lib.rgbify(@crust)[]; + --color-gray-1200: #lib.rgbify(@text)[]; + --color-gray-1100: #lib.rgbify(@text)[]; + --color-gray-1000: #lib.rgbify(@text)[]; + --color-gray-900: #lib.rgbify(@text)[]; + --color-gray-800: #lib.rgbify(@overlay2)[]; + --color-gray-700: #lib.rgbify(@overlay1)[]; + --color-gray-600: #lib.rgbify(@overlay0)[]; + --color-gray-500: #lib.rgbify(@surface2)[]; + --color-gray-400: #lib.rgbify(@surface1)[]; + --color-gray-300: #lib.rgbify(@surface0)[]; + --color-gray-200: #lib.rgbify(@mantle)[]; + --color-gray-100: #lib.rgbify(@crust)[]; + --color-blue-100: #lib.rgbify(@text)[]; + --color-blue-200: #lib.rgbify(@text)[]; + --color-blue-300: #lib.rgbify(@text)[]; + --color-blue-400: #lib.rgbify(@sapphire)[]; + --color-blue-500: #lib.rgbify(@sapphire)[]; + --color-blue-600: #lib.rgbify(@blue)[]; + --color-blue-700: #lib.rgbify(@blue)[]; + --color-blue-800: #lib.rgbify(@blue)[]; + --color-blue-900: #lib.rgbify(@blue)[]; + --color-blue-1000: #lib.rgbify(@blue)[]; + --color-green-100: #lib.rgbify(@teal)[]; + --color-green-200: #lib.rgbify(@green)[]; + --color-green-300: #lib.rgbify(@green)[]; + --color-green-400: #lib.rgbify(@green)[]; + --color-green-500: #lib.rgbify(@green)[]; + --color-green-600: #lib.rgbify(@green)[]; + --color-green-700: #lib.rgbify(@green)[]; + --color-green-800: #lib.rgbify(@green)[]; + --color-red-100: #lib.rgbify(@text)[]; + --color-red-200: #lib.rgbify(@flamingo)[]; + --color-red-300: #lib.rgbify(@maroon)[]; + --color-red-400: #lib.rgbify(@red)[]; + --color-red-500: #lib.rgbify(@red)[]; + --color-red-600: #lib.rgbify(@red)[]; + --color-red-700: #lib.rgbify(@red)[]; + + & when not(@flavor = latte) { + --color-background: #lib.rgbify(@crust)[]; + --color-foreground: #lib.rgbify(@base)[]; + --color-foreground-grey: #lib.rgbify(@surface0)[]; + --color-foreground-grey-dark: #lib.rgbify(darken(@surface0, 5%))[]; + --color-foreground-blue: #lib.rgbify(@mantle)[]; + --color-foreground-blue-dark: #lib.rgbify(@mantle)[]; + --color-text: #lib.rgbify(@text)[]; + --color-text-light: #lib.rgbify(@subtext0)[]; + --color-text-lighter: #lib.rgbify(@subtext1)[]; + --color-shadow-dark: #lib.rgbify(@crust)[]; + --color-shadow-blue: #lib.rgbify(@crust)[]; + --color-background-1200: #lib.rgbify(@text)[]; + --color-background-1100: #lib.rgbify(@text)[]; + --color-background-1000: #lib.rgbify(@text)[]; + --color-background-900: #lib.rgbify(@subtext1)[]; + --color-background-800: #lib.rgbify(@subtext0)[]; + --color-background-700: #lib.rgbify(@surface1)[]; + --color-background-600: #lib.rgbify(@surface0)[]; + --color-background-500: #lib.rgbify(@surface0)[]; + --color-background-400: #lib.rgbify(@surface0)[]; + --color-background-300: #lib.rgbify(@base)[]; + --color-background-200: #lib.rgbify(@mantle)[]; + --color-background-100: #lib.rgbify(@crust)[]; + --color-gray-1200: #lib.rgbify(@text)[]; + --color-gray-1100: #lib.rgbify(@text)[]; + --color-gray-1000: #lib.rgbify(@text)[]; + --color-gray-900: #lib.rgbify(@text)[]; + --color-gray-800: #lib.rgbify(@overlay2)[]; + --color-gray-700: #lib.rgbify(@overlay1)[]; + --color-gray-600: #lib.rgbify(@overlay0)[]; + --color-gray-500: #lib.rgbify(@surface2)[]; + --color-gray-400: #lib.rgbify(@surface1)[]; + --color-gray-300: #lib.rgbify(@surface0)[]; + --color-gray-200: #lib.rgbify(@mantle)[]; + --color-gray-100: #lib.rgbify(@crust)[]; + + --color-blue-dim: #lib.rgbify(desaturate(darken(@accent, 10%), 10%))[]; + } + + /* DARK THEME NAV BAR */ + .nav-unscoped when not(@flavor = latte) { + background-color: @mantle; + } + .nav-unscoped.transparent when not(@flavor = latte) { + background-color: fade(@mantle, 50%); + } + .nav-unscoped.transparent:hover when not(@flavor = latte) { + background-color: @mantle; + color: @subtext0; + } + + /* -----------------PROFILE FIXES----------------- */ + #profileColor(@color) { + --color-blue: #lib.rgbify(@color)[]; + & when (@flavor = latte) { + --color-blue-dim: #lib.rgbify(lighten(@color, 10%))[]; + } + & when not(@flavor = latte) { + --color-blue-dim: #lib.rgbify(darken(@color, 10%))[]; + } + .progress .bar { + background: linear-gradient(270deg, darken(@color, 10%), @color); + } + } + .user-page-unscoped.orange { + #profileColor(@peach); + } + .user-page-unscoped.green { + #profileColor(@green); + } + .user-page-unscoped.purple { + #profileColor(@mauve); + } + .user-page-unscoped.red { + #profileColor(@red); + } + .user-page-unscoped.blue { + #profileColor(@blue); + } + .user-page-unscoped.pink { + #profileColor(@pink); + } + .user-page-unscoped.gray { + #profileColor(@overlay1); + } + .history-day { + --color-foreground-grey-dark: #lib.rgbify(@crust)[]; + } + .x-axis { + --color-background-300: #lib.rgbify(@surface0)[]; + } + /* Fixes gap between stats */ + @media (max-width: 1540px) { + .stats-wrap { + grid-row-gap: 25px; + } + } + + /* ----Tracking Status List Stuff---- */ + .list[data-v-5776f768] { + color: @mantle !important; + } + .media-card .list-status[status="Repeating"] { + background: @pink; + } + .banner .el-icon-arrow-down::before { + color: @text !important; + } + .el-textarea__inner::placeholder { + color: @overlay1; + } + .el-dropdown-menu, + .el-dropdown-menu__item--divided::before, + .el-select-dropdown { + background-color: @surface0 !important; + } + .el-popper[x-placement^="bottom"] .popper__arrow::after, + .el-popper[x-placement^="bottom"] .popper__arrow, + .el-tooltip__popper[x-placement^="bottom"] .popper__arrow::after, + .el-tooltip__popper[x-placement^="bottom"] .popper__arrow { + border-bottom-color: @surface0; + } + .el-popper[x-placement^="top"] .popper__arrow::after, + .el-popper[x-placement^="top"] .popper__arrow, + .el-tooltip__popper[x-placement^="top"] .popper__arrow, + .el-tooltip__popper[x-placement^="top"] .popper__arrow::after { + border-top-color: @surface0; + } + .el-dropdown .feed-filter { + color: @overlay0; + } + .el-dropdown-menu { + border-color: @text !important; + } + .el-dropdown-menu__item--divided when not(@flavor = latte) { + border-top-color: @surface1; + } + .el-select-dropdown__item.hover, + .el-select-dropdown__item:hover { + background-color: @base; + } + .el-select-dropdown__item.selected { + color: @accent; + } + .el-tooltip__popper.is-dark { + background: @surface0; + color: @text; + } + .tooltip > div { + --color-white: #lib.rgbify(@text)[]; + } + .dropdown { + --color-gray-100: #lib.rgbify(@base)[]; + --color-background-100: #lib.rgbify(@base)[]; + --color-background-200: #lib.rgbify(@mantle)[]; + } + .medialist .notes { + --color-overlay: #lib.rgbify(@surface0)[]; + } + .el-input__inner::placeholder, + .el-input__prefix { + color: @overlay1; + } + .el-picker-panel { + color: @text; + background-color: @surface0; + border-color: @surface1; + } + .el-date-table th { + color: @overlay1; + border-bottom-color: @surface1; + } + .el-date-picker__header-label { + color: @subtext0; + + &:hover { + color: @accent; + } + } + .el-picker-panel__icon-btn { + color: @overlay1; + + &:hover { + color: @accent; + } + } + .el-date-table td.available:hover { + color: @accent; + } + .el-date-table td.current:not(.disabled) span { + color: @crust; + background-color: @accent; + } + .el-date-table td.next-month, + .el-date-table td.prev-month { + color: @surface2; + } + + /* ---------SCORE TWEAKS-------------- */ + .score[data-v-5ca094da] { + color: @base; + } + + /* --------------FOOTER--------------- */ + .footer[data-v-0f519cab] { + background: @text; + color: @crust; + + h2 { + color: rgb(var(--color-blue)); + } + + & when (@flavor = latte) { + --color-blue: #lib.rgbify(lighten(@accent, 30%))[]; + } + + & when not(@flavor = latte) { + background: @mantle; + color: @subtext0; + } + } + + /* ------------------SEARCH PAGES------------------ */ + .search, + .expand-description, + .studio { + --color-background-200: #lib.rgbify(@crust)[]; + } + .search-wrap, + .filters, + .extra-filters-wrap, + .select, + .options { + --color-background-100: #lib.rgbify(@base)[]; + } + .filter.select-wrap .options { + --color-background-100: #lib.rgbify(@mantle)[]; + } + + /* ------------------MISC EDITS-------------------- */ + .list-editor-wrap .header::after { + background: fade(@mantle, 50%); + } + .filter.clear-all { + --color-background-500: #lib.rgbify(@overlay1)[]; + } + /* --Reset button in notifications----- */ + .reset-btn { + color: @base !important; + } + /* Publish Button in Replies and Messages */ + .save { + color: @base !important; + } + .el-radio { + color: @overlay1; + } + /* Mod Stuff */ + .el-color-dropdown__link-btn { + color: @accent; + } + .el-color-picker__color { + border-color: @surface1; + } + .el-color-picker__panel { + background-color: @surface0; + border-color: @surface1; + } + .el-color-dropdown__btn { + border-color: @surface2; + color: @subtext1; + + &:hover { + background-color: transparent; + border-color: @accent; + color: @accent; + } + } + /* Accent Text */ + .input .hint { + --color-white: #lib.rgbify(@text)[]; + } + .el-checkbox__input.is-checked + .el-checkbox__label { + color: @accent; + } + .button, + .option.active, + .new-badge, + .submissions .user .stats > div, + .actions .icon, + .submissions .status, + .adult-label, + .header .btn, + .media-tag-editor .btn, + [data-v-843c77a2] .btn, + [data-v-22855988] .btn, + .btn[data-v-156b3973], + .btn[data-v-dceb4a66], + .favourite-btn, + .dialog .btn, + .tag, + .filter, + .media .header div, + .list-editor-wrap .header .save-btn, + .actions > div:not(.donator-badge), + .banner-content .mod-badge-wrap, + .external-link.no-color, + .count.circle, + .el-dropdown-menu__item, + .delete, + .list-editor-wrap .list-editor .body .delete-btn, + .open-user-search, + .save-btn { + & when not(@flavor = latte) { + --color-white: #lib.rgbify(@crust)[]; + } + } + .submit-btn, + .random-btn { + & when not(@flavor = latte) { + color: @crust; + } + } + .user .notification-dot, + .create-btn { + & when not(@flavor = latte) { + color: @crust !important; + } + } + .el-radio__inner::after { + & when not(@flavor = latte) { + background-color: @crust; + } + } + .icon, + .check { + & when not(@flavor = latte) { + --color-blue-300: #lib.rgbify(@crust)[]; + } + } + /* ------------IMAGE COVER------------ */ + .cover .image-text, + .plus-progress { + color: @text !important; + } + + .entry .plus-progress, + .medialist.table .entry .edit { + color: @base !important; + } + /* --------SETTINGS-------- */ + .el-radio__inner when not(@flavor = latte) { + background-color: @text; + } + .el-checkbox__input.is-checked .el-checkbox__inner, + .el-radio__input.is-checked .el-radio__inner { + background-color: @accent; + border-color: @accent; + } + .el-checkbox__inner::after { + border-color: @crust; + border-width: 2px; + left: 3px; + } + .el-radio__input.is-checked + .el-radio__label { + color: @accent; + } + /* --------HIDE SCROLLBAR IN BIO----- */ + .section::-webkit-scrollbar { + display: none; + } + .section { + -ms-overflow-style: none; + scrollbar-width: none; + } + /* --------REMOVE DROPDOWN SHADOWS----- */ + .dropdown.dropdown { + box-shadow: none; + } + /* ---------ANILIST LIKER PLUGIN------ */ + #AnilistLikerPlugin .btntop { + margin-bottom: -4px; + margin-top: 5px; + } + #AnilistLikerPlugin .btnbottom { + margin-top: -2px; + } + /* ---------AUTOMAIL TWEAKS--------- */ + .hohMediaScore { + border-color: @surface0; + padding: 4px; + border-radius: 10px; + margin-left: 0; + background-color: @base; + color: @accent; + } + .activity-feed .hohNoteSuffix:not(:empty), + .activity-feed .hohRewatchSuffix:not(:empty), + .activity-feed .hohScore:not(.hohSmiley), + .hohFeedScore .hohScore { + border-radius: 5px; + padding: 2.5px 5px 1px !important; + color: @subtext1 !important; + background-color: @surface0; + + &:not(:first-of-type) { + margin: 3px; + } + } + .activity-feed .hohRewatchSuffix:not(:empty) { + padding-left: 2px !important; + } + .hohExtraFilters button { + margin-bottom: 20px; + } + .filter-group.compare-btn, + .hohButton { + color: @base; + } + .hohButton, + .hohCheckbox input:checked + .el-checkbox__inner { + background-color: @accent; + } + .hohCheckbox input:checked + .el-checkbox__inner { + border-color: @accent; + } + .medialist.table .entry:hover, + .medialist.table .entry .title a:hover, + .compare-btn[data-v-170179fc]:hover { + color: @base; + } + .hohCompare table { + background-color: @crust; + } + .hohAnimeTable, + .hohAnimeTable td, + .hohUserRow td, + .hohUserRow th, + .hohHeaderRow td, + .hohHeaderRow th { + border-color: @surface0 !important; + } + .hohUserRow td { + border-top-color: @surface0 !important; + } + .hohUserRow tr { + border-right-color: @surface0 !important; + } + hr { + color: @surface0; + } + .hohCheckbox + input:checked + + .el-checkbox__inner + .like-wrap.thread + .button.liked + .fa-heart, + .actions .favourite.liked .fa-heart, + .like-wrap.thread .button.isFavourite .fa-heart, + .actions .favourite.isFavourite .fa-heart, + .actions .favourite { + & when not(@flavor = latte) { + --color-white: #lib.rgbify(@crust)[]; + } + } + } +} + +@-moz-document domain("anichart.net") { + body:not(.site-theme-dark) { + #catppuccin(@lightFlavor); + } + .site-theme-dark { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + .login[data-v-0d5bfbcd], + .login[data-v-0d5bfbcd]:hover { + color: @base; + } + + [fill="#3db4f2" i] { + fill: @accent !important; + } + + & when not(@flavor = latte) { + .nav { + background: @mantle; + } + + .external-link { + background: @surface1; + + [stroke="#fff" i] { + stroke: @text !important; + } + } + + .external-link .icon, + .dropdown-menu:hover { + --color-white: #lib.rgbify(@crust)[]; + } + + [fill="#fff" i] { + fill: @crust !important; + } + } + + & when (@flavor = latte) { + --color-overlay: #lib.rgbify(@text)[]; + + .external-link { + background: @subtext0; + } + + .nav { + background: @text; + } + + a.title { + --color-white: #lib.rgbify(@base)[]; + } + } + } +} diff --git a/styles/anonymous-overflow/README.md b/styles/anonymous-overflow/README.md new file mode 100644 index 0000000000..51c691df32 --- /dev/null +++ b/styles/anonymous-overflow/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Anonymous Overflow + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [ImenaOphelia](https://github.com/ImenaOphelia) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/anonymous-overflow/catppuccin.user.less b/styles/anonymous-overflow/catppuccin.user.less new file mode 100644 index 0000000000..e70fd80501 --- /dev/null +++ b/styles/anonymous-overflow/catppuccin.user.less @@ -0,0 +1,109 @@ +/* ==UserStyle== +@name Anonymous Overflow Catppuccin +@namespace github.com/catppuccin/userstyles/styles/anonymous-overflow +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/anonymous-overflow +@version 2026.01.10 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/anonymous-overflow/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aanonymous-overflow +@description Soothing pastel theme for Anonymous Overflow +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +/* Working instances filtered from instance list: https://aohub.httpjames.space/. */ +@-moz-document domain("ao.vern.cc"), + domain("overflow.adminforge.de"), + domain("overflow.floppa.cloud"), + domain("overflow.hostux.net"), + domain("ao.bloat.cat"), + domain("ao.owo.si"), + domain("overflow.r4fo.com"), + domain("overflow.ducks.party"), + domain("anonymousoverflow.privacyredirect.com"), + domain("soflow.nerdvpn.de"), + domain("overflow.einfachzocken.eu"), + domain("anonymousoverflow.catsarch.com"), + domain("overflow.darkness.services"), + domain("anonflow.aketawi.space"), + domain("o.iii.st"), + domain("overflow.canine.tools") { + @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); + + :root[data-theme="auto"] { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + :root[data-theme="dark"] { + #catppuccin(@darkFlavor); + } + + :root[data-theme="light"] { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --main-bg: @base; + --text-color: @text; + --muted-text-color: @subtext0; + --link-color: @blue; + --meta-bg: @surface1; + --input-bg: @mantle; + --input-bg-hover: @surface1; + --divider-color: @overlay0; + + .view-input:focus { + border-color: @surface2; + } + + .answer-link .icon img { + background: none; + filter: @text-filter; + } + .answer-meta.accepted { + background-color: @green; + color: @base; + + .answer-link .icon img { + filter: @crust-filter; + } + } + + .sorting img[src="/static/icons/sort.svg"] { + filter: @subtext0-filter; + } + + .logo { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + hr { + border-color: @overlay0; + } + + .error { + background-color: @red; + } + .error, .success { + color: @crust; + } + } +} diff --git a/styles/arch-wiki/README.md b/styles/arch-wiki/README.md new file mode 100644 index 0000000000..5185ea80b1 --- /dev/null +++ b/styles/arch-wiki/README.md @@ -0,0 +1,39 @@ + + + +

+ Logo
+ + Catppuccin for Arch Wiki + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + +> [!NOTE] +> Make sure to use the default **Light** theme. + +## ❤️‍🩹 Unmaintained +This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! + +## 💖 Past Maintainer +- [GenShibe](https://github.com/GenShibe) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/arch-wiki/catppuccin.user.less b/styles/arch-wiki/catppuccin.user.less new file mode 100644 index 0000000000..a0fbdb5a96 --- /dev/null +++ b/styles/arch-wiki/catppuccin.user.less @@ -0,0 +1,495 @@ +/* ==UserStyle== +@name Arch Wiki Catppuccin +@namespace github.com/catppuccin/userstyles/styles/arch-wiki +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/arch-wiki +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/arch-wiki/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aarch-wiki +@description Soothing pastel theme for Arch Wiki +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("wiki.archlinux.org") { + :root.skin-theme-clientpref-os, + .vector-feature-night-mode-enabled, + .skin-invert, + .notheme { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + :root.skin-theme-clientpref-night { + #catppuccin(@darkFlavor); + } + + :root.skin-theme-clientpref-day { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + #content table, + #content h1, + #content h2, + #content h3, + #content h4, + #content h5, + #content pre, + #content code, + #content tt { + color: @text !important; + } + + body.skin-vector-2022 .vector-sticky-header { + color: @text !important; + background-color: @mantle !important; + border-bottom-color: @blue !important; + } + + #vector-main-menu-pinned-container, + #vector-page-tools-pinned-container { + background-color: @base !important; + } + + #ooui-php-191, + #preferences .mw-htmlform-submit-buttons { + background-color: @mantle !important; + } + + .mw-echo-ui-notificationItemWidget-content-message-header, + .oo-ui-labelElement-label { + color: @text !important; + } + + .oo-ui-optionWidget-selected { + background-color: @surface2 !important; + } + + .oo-ui-buttonElement-framed.oo-ui-widget-disabled + > .oo-ui-buttonElement-button { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface2 !important; + filter: brightness(0.4); + cursor: not-allowed; + } + + .mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(even) td { + background-color: @surface1 !important; + } + + .mw-htmlform-ooui .mw-htmlform-matrix tbody tr:hover td { + background-color: @surface2 !important; + } + + .mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(odd) td, + .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled + .oo-ui-tagMultiselectWidget-handle, + .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined + .oo-ui-tagItemWidget.oo-ui-widget-enabled, + .mw-rcfilters-ui-cell.mw-rcfilters-ui-filterTagMultiselectWidget-views-select, + .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, + .oo-ui-popupWidget-popup, + .mw-echo-ui-notificationItemWidget, + .mw-echo-ui-placeholderItemWidget { + background-color: @surface0 !important; + } + + .mw-echo-ui-notificationsInboxWidget-toolbarWrapper { + background-color: @base !important; + } + + #archnavbar { + background-color: @mantle !important; + border-bottom-color: @blue !important; + } + .mw-parser-output { + background-color: @base !important; + } + + .mw-page-container { + background-color: @base !important; + } + + .vector-header-container { + background-color: @base !important; + } + + #content, + header.mw-header li:not(.new), + #mw-panel-toc, + #mw-navigation li:not(.new), + #mw-panel li:not(.new), + #column-one li:not(.new), + #footer { + a:not([role="button"], .new) { + color: @blue !important; + } + } + + @media screen { + html.client-darkmode { + background-color: @base; + } + } + + .vector-feature-zebra-design-disabled, + body { + background-color: @base; + } + + #archnavbarlogo { + @svg: escape( + '' + ); + background: url("data:image/svg+xml,@{svg}") !important; + background-size: 190px 40px !important; + } + .cdx-text-input__input:enabled:focus { + border-color: @blue; + box-shadow: @blue !important; + } + + .archwiki-template-box-tip { + background-color: hsla(90, 90%, 65%, 0.2) !important; + border-color: hsla(90, 90%, 75%, 0.2); + color: @subtext1; + } + + .archwiki-template-box-note { + background-color: hsla(208, 100%, 61%, 0.25) !important; + border-color: hsla(208, 100%, 81%, 0.25) !important; + color: @subtext1; + } + + .archwiki-template-box-warning { + background-color: hsla(7, 99%, 60%, 0.25) !important; + border-color: hsla(7, 99%, 80%, 0.25) !important; + color: @subtext1; + } + + .firstHeading { + color: @accent !important; + } + + #content { + border-color: @overlay0; + } + + #content pre:not([class*="CodeMirror"]), + #content code, + #content tt { + background-color: @surface0; + color: @text; + border-color: @overlay0; + } + + .vector-pinned-container { + border-color: @overlay0 !important; + } + + .vector-pinnable-header-label { + color: @text; + } + + .vector-pinnable-header-toggle-button, + .vector-pinnable-header-unpin-button { + color: @mantle; + background-color: @accent; + border-color: @base; + } + + .wikitable { + background-color: @base; + } + + .wikitable > tr > th, + .wikitable > tr > td, + .wikitable > * > tr > th, + .wikitable > * > tr > td { + color: @text; + border-color: @crust; + } + + .wikitable > tr > th, + .wikitable > * > tr > th { + background-color: @mantle; + color: @text; + } + + .pre { + color: @mantle; + } + + .mw-headline { + color: @text; + } + + .plainlinks, + .archwiki-template-man, + .external text { + color: multiply(@blue, #555); + } + + .cdx-button:enabled.cdx-button--weight-quiet, + .cdx-button.cdx-button--fake-button--enabled, + .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet, + .diff-context, + .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle, + .oo-ui-checkboxInputWidget [type="checkbox"] + span { + background-color: @surface0; + color: @text; + border-color: @surface2; + } + + .vector-feature-zebra-design-disabled, + #contentSub:not(:empty) { + color: @surface0 !important; + } + + .mw-editfont-monospace { + background-color: @surface0; + color: @text; + border-color: @surface1; + } + + .diff-deletedline, + .mw-message-box-warning { + background-color: @yellow; + color: @mantle; + } + + .diff-addedline { + background-color: @sky; + color: @mantle; + } + + .mw-message-box-error { + background-color: @flamingo; + border-color: @red; + color: @base; + } + + .mw-number-text { + color: @text; + } + + .cdx-checkbox__icon { + background-color: @surface0; + } + + .oo-ui-checkboxInputWidget.oo-ui-widget-enabled + [type="checkbox"]:checked + + span, + .cdx-checkbox__input:enabled:checked + .cdx-checkbox__icon, + .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive { + background-color: @blue; + border-color: @sapphire; + color: @mantle !important; + } + + .vector-feature-zebra-design-disabled, + #vector-toc-pinned-container, + .vector-toc::after { + background: linear-gradient(rgba(255, 255, 255, 0), @base) !important; + } + + #archnavbar ul li.anb-selected a { + color: @accent !important; + } + + .archwiki-template-message { + background-color: @base; + } + + .catlinks { + background-color: @mantle; + } + + .mw-parser-output p { + color: @text !important; + } + + .archwiki-template-meta-related-articles { + background-color: @surface0; + } + + .archwiki-template-meta-related-articles p { + color: @text; + border-bottom-color: @blue; + } + + .archwiki-template-meta-related-articles ul li a { + color: @blue important; + } + + .mw-plusminus-neg, + a.new { + color: @red !important; + } + + .mw-plusminus-pos { + color: @green; + } + + .mw-plusminus-null { + color: @subtext0; + } + + .oo-ui-textInputWidget .oo-ui-inputWidget-input, + .mw-widget-dateInputWidget-handle, + .oo-ui-buttonElement-framed.oo-ui-widget-enabled + > .oo-ui-buttonElement-button, + #pagehistory li.selected { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface2 !important; + } + + .oo-ui-menuSelectWidget { + background-color: @surface0; + border-color: @surface2; + } + + .oo-ui-OptionWidget-highlighted { + background-color: @overlay0 !important; + } + + .oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget, + .minoredit, + .comment { + color: @text; + } + + .mw-footer-container { + color: @text !important; + } + + #archnavbarlist li a { + color: @blue !important; + } + + .anb-selected { + color: @subtext1 !important; + } + + .mw-footer li { + color: @text; + } + + .vector-main-menu, + .vector-pinnable-element { + background-color: @base !important; + } + + #p-navigation ul li a { + color: @blue !important; + } + + .archwiki-template-box-note a { + color: @blue !important; + } + + .archwiki-template-box-note a:visited { + color: @mauve !important; + } + + .mw-page-title-main { + color: @text; + } + + .vector-tab-noicon mw-list-item a { + color: @blue; + } + + .mw-header { + background-color: @base !important; + color: @text; + } + + .mw-footer li a { + color: @blue; + } + + .cdx-text-input__input:enabled { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface1; + } + + .cdx-button:enabled, + .cdx-button.cdxbutton--fake-button--enabled { + color: @mantle; + background-color: @accent; + border-color: @base; + } + + .cdx-menu { + background-color: @surface0; + } + + .cdx-menu:hover { + background-color: @base !important; + } + + .anb-home { + color: @text !important; + } + + .vector-dropdown-content { + background-color: @base !important; + } + + .mw-headline::before { + color: @accent !important; + } + + .cdx-button { + background-color: @base !important; + color: @text !important; + border-color: @base !important; + } + + .mw-body { + background-color: @base !important; + color: @text !important; + border-color: @base !important; + } + + .mw-search-profile-tabs { + background-color: @base !important; + color: @text !important; + border-color: @base !important; + } + + .mw-content-ltr { + background-color: @base !important; + } + + .vector-sticky-pinned-container::after { + background: @base !important; + } + + .cdx-search-input { + border-color: @mantle !important; + } + + .oo-ui-widget:hover { + background-color: @surface0 !important; + } + } +} diff --git a/styles/boringproxy/README.md b/styles/boringproxy/README.md new file mode 100644 index 0000000000..275ddc4c98 --- /dev/null +++ b/styles/boringproxy/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for boringproxy + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [Gandalf-the-Blue](https://github.com/Gandalf-the-Blue) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/boringproxy/catppuccin.user.less b/styles/boringproxy/catppuccin.user.less new file mode 100644 index 0000000000..6139fe2523 --- /dev/null +++ b/styles/boringproxy/catppuccin.user.less @@ -0,0 +1,161 @@ +/* ==UserStyle== +@name boringproxy Catppuccin +@namespace github.com/catppuccin/userstyles/styles/boringproxy +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/boringproxy +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/boringproxy/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aboringproxy +@description Soothing pastel theme for boringproxy +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("boring.example.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + body { + background: @base; + } + main { + background: @crust; + } + .content { + border-color: @overlay0; + } + + //Side Menu + .menu { + background: @mantle; + } + .menu-item { + background: @crust; + } + .menu-item:hover { + background: @surface2; + color: @accent; + } + .menu-item:any-link { + color: @text; + } + + // Right SIde Button + .button { + border-color: @accent; + background-color: @crust; + color: @subtext1; + } + .button:hover { + color: @surface0; + background-color: @accent; + border-color: @crust; + } + + // Top Headers + .list { + background-color: @crust; + } + + .list-item { + color: @accent; + } + // Tunnel Table + .tn-tunnel-link { + color: @subtext1; + text-decoration: none; + } + + .tn-tunnel-table__cell { + color: @text; + } + body a { + color: @text; + } + body a:visited { + color: @accent; + } + + .tn-attribute__name { + color: @text; + } + .tn-attribute__value { + color: @subtext0; + } + //Tunnel Adding + .tunnel-adder h1 { + color: @text; + } + + .input { + color: @text; + } + .input input { + background-color: @crust; + color: @subtext0; + border-color: @accent; + } + + .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; + } + + // 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; + } + + // User Adding + .user-adder { + color: @text; + } + .user-adder input { + background-color: @crust; + color: @subtext0; + border-color: @accent; + } + // dialog + .dialog__content { + background-color: @crust; + color: @text; + } + } +} diff --git a/styles/brave-search/README.md b/styles/brave-search/README.md index 30990e5c14..2504298c60 100644 --- a/styles/brave-search/README.md +++ b/styles/brave-search/README.md @@ -10,40 +10,20 @@

- +

-

- -

- -## Previews +## Usage -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
+See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). -## Usage -Set theme to dark or light in Brave Search settings, the automatic setting will not work +> [!NOTE] +> Make sure to set the theme to either dark or light in Brave Search settings, as the automatic setting will not work. - - -## 💝 Current Maintainer(s) +## 💝 Current Maintainer - [ndsboy](https://github.com/ndsboy) +  

diff --git a/styles/brave-search/assets/catwalk.webp b/styles/brave-search/assets/catwalk.webp deleted file mode 100644 index 516a9070dc..0000000000 --- a/styles/brave-search/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:dcdac626a4514aad3e51e330cd3a7a9abde05083286a69e21e1a77f705dd07a5 -size 28500 diff --git a/styles/brave-search/assets/frappe.webp b/styles/brave-search/assets/frappe.webp deleted file mode 100644 index 786481f9d0..0000000000 --- a/styles/brave-search/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:37e6168b70c0eb73e2394adde416d2ba6bd1db5260ad24bc1ed55006f3700c1d -size 26584 diff --git a/styles/brave-search/assets/latte.webp b/styles/brave-search/assets/latte.webp deleted file mode 100644 index efd2fc18fa..0000000000 --- a/styles/brave-search/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:86a5d2966028ae018002cc4a79e1e4dd03fbfb635efdcda176f1f3787121c27e -size 28242 diff --git a/styles/brave-search/assets/macchiato.webp b/styles/brave-search/assets/macchiato.webp deleted file mode 100644 index b37ed1b128..0000000000 --- a/styles/brave-search/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:dda301e2f11194175695a78ec3be2c59742bc017c5736aa2e2f38efc74175773 -size 27528 diff --git a/styles/brave-search/assets/mocha.webp b/styles/brave-search/assets/mocha.webp deleted file mode 100644 index 26f8780961..0000000000 --- a/styles/brave-search/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b348b74cdb84ecd5f445e6599354865823f716e9b9623298c12763f05a50c6fc -size 28198 diff --git a/styles/brave-search/catppuccin.user.css b/styles/brave-search/catppuccin.user.css deleted file mode 100644 index 5f1cc7245b..0000000000 --- a/styles/brave-search/catppuccin.user.css +++ /dev/null @@ -1,298 +0,0 @@ -/* ==UserStyle== -@name Brave Search Catppuccin -@namespace github.com/catppuccin/userstyles/styles/brave-search -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/brave-search -@version 1.0.2 -@description Soothing pastel theme for Brave Search -@author Catppuccin -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/brave-search/catppuccin.user.css -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] -==/UserStyle== */ -@-moz-document domain("search.brave.com") { - :root.light { - #catppuccin(@lightFlavor); - } - :root.dark { - #catppuccin(@darkFlavor); - } - :root:not(.light):not(.dark) { - @media (prefers-color-scheme: light) { - #catppuccin(@lightFlavor); - } - @media (prefers-color-scheme: dark) { - #catppuccin(@darkFlavor); - } - } - - @catppuccin: { - @latte: { - @color-scheme: light; - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @color-scheme: dark; - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @color-scheme: dark; - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @color-scheme: dark; - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - #catppuccin(@lookup) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @color: @catppuccin[@@lookup][@color-scheme]; - - & { - color-scheme: @color; - --body-bg: @base; - --bg-glassy: @mantle; - --bg-1: @surface1; - --bg-2: @surface0; - --bg-02: @crust; - --bg-04: @mantle; - --bg-green: @green; - --bg-blue: @blue; - --bg-red: @red; - --bg-favicon: @surface1; - --bg-form-control-selected: @surface2; - --bg-form-control-unselected: @surface0; - --form-control-selected: @blue; - --form-control-hover: @lavender; - --form-control-focus: @text; - --settings-header-bg: @mantle; - --settings-header-text: @text; - --settings-header-icon: @blue; - --settings-widget-text: @subtext0; - --settings-item-text: @text; - --settings-item-icon: @blue; - --settings-item-border: @overlay0; - --settings-item-border-2: @overlay2; - --settings-btn-bg: @surface0; - --settings-btn-text: @text; - --settings-widget-outline: @overlay0; - --settings-independent-score: @blue; - --settings-global-score: @peach; - --brave-supporter-bg: @base; - --brave-supporter-text: @text; - --context-menu-header-border: @overlay0; - --color-primary: @text; - --color-primary-2: @subtext1; - --color-primary-3: @subtext0; - --color-white: @text; - --color-gray-2: @subtext1; - --color-gray-3: @subtext0; - --color-gray-4: @overlay2; - --color-gray-5: @overlay1; - --color-gray-6: @overlay0; - --color-green: @green; - --color-red: @red; - --color-blue: @blue; - --info-color: @blue; - --link-primary: @blue; - --link-secondary: @blue; - --link-visited: @mauve; - --snippet-url: @subtext0; - --separator-dot: @overlay0; - --theme-purple: @mauve; - --theme-yellow: @yellow; - --border-color: @overlay0; - --blurple-300: @lavender; - --text-01: @text; - --text-02: @subtext1; - --text-03: @subtext0; - --interactive-04: @blue; - --interactive-05: @blue; - --interactive-06: @blue; - --interactive-07: @blue; - --interactive-08: @blue; - --focus-border: @overlay2; - --divider-01: @overlay0; - --disabled: @overlay1; - --btn-filled-bg: @surface0; - --btn-filled-bg-hover: @surface1; - --btn-filled-text-active: @text; - --btn-filled-bg-active: @surface2; - --btn-filled-text-disabled: @overlay1; - --btn-outline-border: @overlay0; - --btn-outline-border-hover: @overlay1; - --btn-outline-text: @text; - --btn-outline-text-hover: @subtext1; - --btn-outline-text-active: @text; - --btn-outline-border-active: @overlay2; - --btn-outline-text-disabled: @overlay1; - --btn-icon-svg-hover: @subtext1; - --btn-icon-bg-hover: @surface1; - --btn-icon-svg-active: @text; - --code-bg-0: @base; - --code-border: @overlay0; - --code-color-1: @surface0; - --code-color-2: @text; - --code-color-3: @green; - --code-color-4: @blue; - --code-color-5: @pink; - --search-bgd-01: @overlay0; - --search-bgd-02: @base; - --search-bgd-03: @crust; - --search-bgd-04: @mantle; - --search-bgd-05: @base; - --search-bgd-06: @surface0; - --search-bgd-07: @mantle; - --search-bgd-08: @crust; - --search-line-01: @surface0; - --search-line-02: @subtext0; - --search-text-01: @text; - --search-text-02: @subtext1; - --search-text-03: @subtext0; - --search-text-04: @subtext0; - --search-text-05: @blue; - --search-text-06: @overlay0; - --search-text-09: @yellow; - --search-text-10: @peach; - --search-interactive-01: @blue; - --search-interactive-02: @mauve; - --search-interactive-03: @mauve; - --search-interactive-04: @sky; - --search-interactive-05: @mauve; - --gray-30: @base; - --gray-60: @surface0; - --gray-90: @overlay0; - --gray-110: @subtext0; - --gray-120: @text; - --secondary-90: @lavender; - } - } -} diff --git a/styles/brave-search/catppuccin.user.less b/styles/brave-search/catppuccin.user.less new file mode 100644 index 0000000000..7b51deb3aa --- /dev/null +++ b/styles/brave-search/catppuccin.user.less @@ -0,0 +1,199 @@ +/* ==UserStyle== +@name Brave Search Catppuccin +@namespace github.com/catppuccin/userstyles/styles/brave-search +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/brave-search +@version 2026.01.15 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/brave-search/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Abrave-search +@description Soothing pastel theme for Brave Search +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("search.brave.com") { + :root.light { + #catppuccin(@lightFlavor); + } + :root.dark { + #catppuccin(@darkFlavor); + } + :root:not(.light, .dark) { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + color: @text; // inherited text (e.g. feedback modal) + + --color-text-primary: @text; + --color-text-secondary: @subtext1; + --color-text-tertiary: @subtext0; + --color-text-disabled: @overlay1; + + --color-icon-default: @overlay2; + --color-icon-secondary: @overlay1; + --color-icon-disabled: @surface2; + + --color-divider-subtle: @surface0; + --color-divider-strong: @surface2; + + --color-button-disabled: @surface1; + + --color-search-background-page: @base; + --color-search-background-search-bar: @surface0; + --color-search-background-container: @surface0; + --color-search-links-link: @blue; + --color-search-background-settings: @mantle; + --color-search-background-highlight: @surface1; + --color-search-background-interactive-normal: fade(@accent, 20%); + --color-search-divider-subtle: @surface1; + --color-search-divider-subtle-container: @surface1; + --color-search-divider-interactive: fade(@accent, 30%); + --color-search-background-enrichment-cards: @surface0; + --color-search-background-suggest-highlight: @surface1; + --color-search-background-user-message-bubble: @surface0; + + --color-primary-20: fade(@accent, 30%); // rerank + --color-neutral-20: @surface1; // search elsewhere link hover border + --color-neutral-5: @surface0; // location sharing ip address info + + --color-white: @text; + --color-schemes-primary: @accent; + --color-schemes-on-primary: @base; + + --color-link-visited: @lavender; + + // Tooltips + --color-primitive-neutral-98: @text; + --color-primitive-neutral-0: @surface0; + + /* Search Results */ + --color-serp-header-background: @base; + .related-query .icon { + color: @overlay2; + } + // Pagination "Next" + .button.type--plain, .button.type--plain-outlined-subtle { + --dsbtn-hover-background: @surface1 !important; + } + + /* Settings */ + --color-page-background: @base; + --color-container-background: @surface0; + --color-primary-50: @accent; // icons + + .form-switch { + --switch-off-background-color: @overlay0; + --switch-off-background-color-hover: @overlay1; + --switch-off-dot-color: @text; + --switch-on-background-color: @accent; + --switch-on-background-color-hover: lighten(@accent, 5%); + --switch-on-dot-color: @base; + } + + /* Search Home */ + + .example-searches { + .card { + background: @surface0; + &:hover { + background: @surface1; + } + } + } + + .download-cta-background::before { + background-image: linear-gradient( + 90deg, + @surface0 0%, + @surface1 100% + ) !important; + mask: none; + } + + .suggestions { + border-top-color: @surface1 !important; + } + + // LLM + --gradient-icons-active: linear-gradient( + 321.5013deg, + @peach 3%, + @pink 40%, + @mauve 99% + ); + #gradient-icons-active stop { + &:nth-child(1) { + stop-color: @peach !important; + } + &:nth-child(2) { + stop-color: @pink !important; + } + &:nth-child(3) { + stop-color: @mauve !important; + } + } + .subutton:hover:not(:disabled, .unavailable), .subutton:focus-visible { + background: linear-gradient( + 314deg, + @peach 8.49%, + @pink 43.72%, + @mauve 99.51% + ); + + .icon { + fill: @base !important; + } + } + .suggestion.ask .ask-badge::before { + background-image: linear-gradient( + 352deg, + fade(@peach, 15%) 3%, + fade(@pink, 15%) 40%, + fade(@mauve, 15%) 99% + ); + } + + #logo img, #nav-logo img, .logo-large { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .nav-logo .logo-small, .logo-wrapper img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .waves-bottom { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .waves-top { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + } +} diff --git a/styles/bsky/README.md b/styles/bsky/README.md new file mode 100644 index 0000000000..0b6ee1a7e7 --- /dev/null +++ b/styles/bsky/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Bluesky Social + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [RoootTheFox](https://github.com/RoootTheFox) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/bsky/catppuccin.user.less b/styles/bsky/catppuccin.user.less new file mode 100644 index 0000000000..9dd95aea13 --- /dev/null +++ b/styles/bsky/catppuccin.user.less @@ -0,0 +1,663 @@ +/* ==UserStyle== +@name Bluesky Social Catppuccin +@namespace github.com/catppuccin/userstyles/styles/bsky +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/bsky +@version 2025.10.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/bsky/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Absky +@description Soothing pastel theme for Bluesky Social +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("bsky.app") { + html.colorMode--system { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + html.theme--light { + #catppuccin(@lightFlavor); + } + html.theme--dim, + html.theme--dark { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + // fix general site background - this applies to the element + background-color: @base; + + --text: @text; + --background: @base; + --backgroundLight: @base; + + /* generic text */ + [style*="color: rgb(255, 255, 255)"], + [style*="color: rgb(241, 243, 245)"] //, + /* [style*="color: rgb(11, 15, 20)"] this breas on dark */ { + color: if(@flavor = latte, @base, @text) !important; + } + + /* some background color of follow button + hover */ + [style*="background-color: rgb(241, 243, 245)"] { + background-color: if(@flavor = latte, @crust, @text) !important; + } + + [style*="color: rgb(11, 15, 20)"] { + color: if(@flavor = latte, @text, @crust) !important; + } + + /* secondary text [contrast_700] */ + [style*="rgb(165, 178, 197)"], // dark + [style*="rgb(171, 184, 201)"], // dim + [style*="rgb(84, 110, 138)"], + [style*="rgb(66, 87, 108)"] { + color: @subtext1 !important; + } + + // white bottons on the theme/color mode selection in settings + div[style*="background-color: rgb(197, 207, 217)"], // dark + div[style*="background-color: rgb(201, 210, 219)"], // dim + div[style*="background-color: rgb(46, 63, 81)"] // light + { + background-color: @text !important; + > div { + color: @crust !important; + } + } + + /* generic blue inline (e.g. link text, etc) [primary_500] */ + [style*="color: rgb(0, 106, 255)"], // dark + [style*="color: rgb(15, 115, 255)"] // dim + { + color: @accent !important; + } + /* generic blue inline underline (links) [primary_500] */ + [style*="text-decoration-color: rgb(0, 106, 255)"], // dark + [style*="text-decoration-color: rgb(15, 115, 255)"] // dim + { + text-decoration-color: @accent !important; + } + + /* generic blue inline bg color (e.g. notification count) [primary_500] */ + [style*="background-color: rgb(0, 106, 255)"], // dark + [style*="background-color: rgb(15, 115, 255)"] // dim + { + background-color: @accent !important; + + /* notification count contrast fix, also chat message contrast fix (> div) */ + &[style*="color: rgb(241, 243, 245)"], + &[style*="color: rgb(255, 255, 255)"], + > div { + color: @crust !important; + } + + /* icon color fix */ + path[fill="#ffffff"], + path[fill="hsl(211, 20%, 95.3%)"] { + fill: @crust !important; + } + } + + /* sending/pending/failed direct message */ + [style*="background-color: rgb(1, 64, 132)"] { + background-color: fade(@accent, 30%) !important; + } + + /* a lot of blue things (buttons etc) */ + .r-wzwllv, + div[style*="background-color: rgb(0, 133, 255)"] { + background-color: @accent !important; + + /* notification count contrast fix, also chat message contrast fix (> div) */ + &[style*="color: rgb(241, 243, 245)"], + > div { + color: @crust !important; + } + } + + /* subscribe to labeler button */ + button[data-testid="toggleSubscribeBtn"] { + > div { + background-color: @mauve !important; + > div { + color: @crust !important; + } + } + } + + /* direct message "failed to send" text */ + span[style*="color: rgb(205, 10, 55)"] { + color: @red !important; + } + + /* red button text (delete my account) [negative_500] */ + [style*="color: rgb(233, 22, 70)"], // dark + [style*="color: rgb(235, 36, 82)"] // dim + { + color: @red !important; + } + + /* red button (delete, etc) */ + button[style*="background-color: rgb(244, 11, 66)"], + // dark, light (same color) + button[style*="background-color: rgb(246, 60, 103)"], // dark (hover) + button[style*="background-color: rgb(245, 41, 88)"], // dim + button[style*="background-color: rgb(247, 84, 122)"], // dim (hover) + button[style*="background-color: rgb(205, 10, 55)"] // light (hover) + { + background-color: @red !important; + &:hover { + background-color: fade(@red, 70%) !important; + } + // text color + > div { + color: @crust !important; + } + } + + /* delete account button */ + [style^="background-color: rgb(79, 3, 20)"] { + background-color: @red !important; + } + path[fill="#fba2b2"] { + fill: @crust; + } + + /* generic background color */ + [style*="background-color: rgb(255, 255, 255)"], + [style*="background-color: rgb(0, 0, 0)"], + [style*="background-color: rgb(21, 29, 40)"] // dim + { + background-color: @base !important; + + & when (@flavor = latte) { + /* fix button colors in latte */ + [style*="background-color: rgb(0, 0, 0)"] { + background-color: @text !important; + } + } + } + + /* secondary background color + sidebar button hover [contrast_25] */ + [style*="background-color: rgb(17, 24, 34)"], // dark + [style*="background-color: rgb(28, 39, 54)"] // dim + { + background-color: @mantle !important; + } + + /* secondary background color (when active?) (e.g. search bar, hovering some buttons like cancel) */ + [style*="background-color: rgb(25, 34, 46)"], // dark + [style*="background-color: rgb(34, 46, 63)"] // dim + { + background-color: @crust !important; + } + + /* some sort of tertiary background color with a slight accent */ + [style*="background-color: rgb(0, 25, 51)"] { + background-color: fade(@accent, 30%) !important; + } + + /* loading circle */ + circle[style^="stroke: rgb(25, 118, 210)"] { + stroke: @accent !important; + } + + /* wide site: new post button (w text) */ + button[style*="background-color: rgb(0, 106, 255)"], // dark + button[style*="background-color: rgb(66, 145, 255)"], // dark (hover) + button[style*="background-color: rgb(15, 115, 255)"], // dim + button[style*="background-color: rgb(77, 151, 255)"] // dim (hover) + { + background-color: @accent !important; + &:hover { + background-color: fade(@accent, 70%) !important; + } + + > div { + color: @crust !important; + } + svg > path { + fill: @crust !important; + } + } + + /* borders */ + .css-175oi2r { + border-color: @surface0 !important; + } + + /* fix selected tab bottom border issue caused by selector above */ + .css-175oi2r[style*="border-bottom-color: rgb(0, 106, 255)"] { + border-bottom-color: @accent !important; + } + + /* fixes the bottom border on tabs (timeline) having a darker color */ + .r-oucylx { + border-bottom-color: @base !important; + } + + /* current selected tab (acc page) !! KEEP THIS BELOW ABOVE DEFINITION !! */ + [style*="border-color: rgb(255, 255, 255)"] { + border-color: @accent !important; + } + + /* settings highlight thing */ + [style="background-color: rgb(38, 39, 45)"] { + background-color: @crust !important; + } + + /* thin site: bluesky text */ + .r-yovm8p { + color: @blue; + } + + /* empty profile banner */ + .r-wuyfte { + background-color: @blue; + } + + /* "invalid handle" warning */ + [style*="color: rgb(236, 72, 104); border-color: rgb(209, 16, 67)"] { + color: @red !important; + border-color: @red !important; + } + + /* end of feed text */ + .r-1521r3q { + color: @overlay1; + } + + /* mobile side drawer */ + [data-testid="drawer"] { + background-color: @base; + } + + /* feedback */ + .r-m7buhn { + background-color: @blue; + } + + /* save, report, post modal button */ + [data-testid="sendReportBtn"], + [data-testid="composerPublishBtn"], + [data-testid="editProfileSaveBtn"] { + background: unset !important; + + /* "save changes" button in edit profile */ + > div[style*="background-image: linear-gradient(94.0544deg, rgb(90, 113, 250), rgb(0, 133, 255))"] { + background: @accent !important; + } + + /* fix contrast issues */ + > div, + > div > div { + color: @crust !important; + } + } + + [data-testid="saveBtn"] { + > div[style*="background-image: linear-gradient"] { + background: unset !important; + background-color: @accent !important; + > div { + color: @crust !important; + } + } + } + + // toast notifications (e.g. "copied to clipboard") + .r-17c3jg3:has(> div[dir="auto"]) { + background-color: @crust !important; + + .r-jwli3a { + color: @text !important; + } + > svg > path { + fill: @text !important; + } + } + + /* draft "Discard" button */ + [style^="background-color: rgb(209, 16, 67)"] { + background-color: @red !important; + } + + /* Discard draft modal border, bunch of other borders around the app [contrast_100] */ + [style*="border-color: rgb(35, 46, 62)"], // dark + [style*="border-color: rgb(44, 58, 78)"] // dim + { + border-color: @surface2 !important; + } + + /* the round gradient post button in the bottom right when the page is thinner than usual */ + [data-testid="composeFAB"] > div { + background: unset !important; + background-color: @accent !important; + + // fix contrast (inner symbol) + .r-jwli3a { + color: @crust !important; + } + } + + /* blue text only button (e.g. cancel post button) */ + div[style*="color: rgb(66, 145, 255)"], // dark + div[style*="color: rgb(77, 151, 255)"], // dim + div[style*="color: rgb(0, 89, 214)"] // latte !! this overlaps with dark. might break? + { + color: @accent !important; + } + + /* text color when writing a post */ + .ProseMirror, + .ProseMirror-dark { + color: @text; + } + + /* some button background color (when hovering) [primary_100] */ + [style*="background-color: rgb(0, 40, 97)"], // dark + [style*="background-color: rgb(18, 52, 100)"], // dim + [style*="background-color: rgb(204, 225, 255)"], // latte + /* add alt text modal */ + [style*="background-color: rgb(14, 73, 137)"] { + background-color: fade(@accent, 30%) !important; + } + + /* several white buttons */ + button[style*="background-color: rgb(255, 255, 255)"] when not( + @flavor = latte + ) { + background-color: @text !important; + } + + /* the white buttons text */ + [style*="color: rgb(0, 0, 0)"] { + color: if(@flavor = latte, @text, @crust) !important; + } + + /* replace dark fill icons with crust ones */ + path[fill="#000000"] { + fill: if(@flavor = latte, @text, @crust); + } + + /* fixes a contrast issue when the suggested follows button is enabled (very ugly selector) */ + button[data-testid="suggestedFollowsBtn"][style*="background-color: rgb(255, 255, 255)"] + > svg + > path { + fill: @base !important; + } + + /* text inside most buttons */ + button > div > div[style~="color: rgb(0, 0, 0)"] { + color: @base !important; + } + + /* search bar text */ + [role="search"], + [data-testid="confirmCodeInput"] { + --placeholderTextColor: @subtext1 !important; + } + + /* search bar icon (this doesn't actually apply because path fill. keeping anyways) [contrast_500] */ + svg[style^="color: rgb(102, 123, 153"], // dark + svg[style^="color: rgb(111, 131, 159)"] // dim + { + color: @subtext1 !important; + } + + /* small icons */ + path[fill="#FFFFFF"] { + fill: @text; + + & when (@flavor = latte) { + fill: @base; + } + } + + /* more gray small icons (e.g. search bar icon, icons below posts [contrast_500] */ + path[fill="#667B99"], // dark + path[fill="#6F839F"], // dim + [style*="color: rgb(111, 131, 159)"], // dark + [style*="color: rgb(111, 131, 159)"] // dim + { + color: @subtext1 !important; + fill: @subtext1 !important; + } + /* settings button at the top of the timeline, hashtag button/icon at top of timeline [contrast_600] */ + path[fill="#8798B0"], // dark + path[fill="#8D9DB4"] // dim + { + fill: @subtext1; + } + + /* x invite codes available icon */ + div[style*="background-color: rgb(191, 225, 255)"], + div[style*="background-color: rgb(1, 37, 97)"] { + background-color: fade(@accent, 30%) !important; + > svg > path[fill="#52acfe"] { + fill: @accent; + } + } + + /* heart/like */ + .r-84gixx, + .r-1i89l9k, + div[style*="color: rgb(236, 72, 153)"], + button[data-testid="toggleLikeBtn"] + > svg:has(path[fill^="hsl(346,"]) // feed like button + { + color: @red !important; + > path { + fill: @red !important; + } + } + + /* repost */ + .r-5ld2xk, + [style*="color: rgb(92, 239, 170)"] { + color: @green !important; + > path { + fill: @green !important; + } + } + + /* saved icon on post + trending icon */ + path[fill="#006AFF"], // dark + path[fill="#0F73FF"] // dim + { + fill: @accent; + } + + /* tiny people icon on post view ("Everybody can reply") */ + path[fill="hsl(211, 24%, 43.6%)"], + /* icon above "you have no lists" */ + path[fill="hsl(211, 24%, 34.2%)"] { + fill: @subtext0; + } + + /* onboarding: continue/next button */ + [data-testid="continueBtn"] { + background-color: @accent !important; + } + [data-testid="continueBtn"] > div > div { + color: @base !important; + } + [data-testid="continueBtn"] > div > svg > path { + fill: @base !important; + } + + /* pretty self explanatory, user mentions in the post create modal */ + .mention { + color: @accent; + } + + /* mentions in the notification tab (highlighted notifications) */ + div[style*="background-color: rgb(0, 17, 36)"], // dark + div[style*="background-color: rgb(21, 41, 63)"], // dim + div[style*="background-color: rgb(240, 247, 255)"], // light + a[style*="background-color: rgb(0, 17, 36)"], // dark + a[style*="background-color: rgb(21, 41, 63)"], // dim + a[style*="background-color: rgb(240, 247, 255)"] // light + { + background-color: fade(@accent, 30%) !important; + .css-175oi2r:not([role="checkbox"] *) { + background-color: transparent !important; + } + } + + /* generic blue background color inline (used for buttons in notifications tab) */ + button[style*="background-color: rgb(0, 133, 255)"] { + background-color: @accent !important; + } + /* contrast fix for above */ + button[style*="background-color: rgb(0, 133, 255)"] > div > div { + color: @base !important; + } + + /* miscellaneous lines around the app [contrast_200] */ + [style*="border-color: rgb(49, 63, 84)"], // dark + [style*="border-color: rgb(57, 73, 96)"] // dim + { + border-color: @surface1 !important; + } + + /* other button in notifications tab, inner text */ + div[style*="color: rgb(82, 172, 254)"] { + color: @accent !important; + } + + /* "No notifications yet!" text in the notifications tab */ + div[style*="color: rgb(141, 142, 150)"] { + color: @subtext0 !important; + } + + /* login: wrong password highlight */ + .r-w7hjet { + background-color: @red; + } + + /* please verify your email popup (green checkmark) */ + circle[fill="#20BC07"] { + fill: @green; + } + + /* toggle circle */ + [style*="background-color: rgb(185, 185, 193)"] { + background-color: @overlay2 !important; + } + + /* skeletons */ + .r-kdyh1x, + .r-cpet4d { + &[style*="background-color: rgb(20, 27, 35);"] { + background-color: @surface0 !important; + } + } + + /* thread lines */ + div[style*="background-color: rgb(35, 46, 62)"].r-m5arl1 { + background: @surface1 !important; + } + + /* character limit progress circle [primary_500] */ + path[stroke="#006AFF"], // dark + path[stroke="#0F73FF"], // dim + path[stroke="#006AFF"] // light + { + stroke: @accent !important; + } + + /* bg circle [contrast_100] */ + path[stroke="#232E3E"], // dark + path[stroke="#2C3A4E"], // dim + path[stroke="#DCE2EA"] // light + { + stroke: @surface1 !important; + } + + /* load new posts button (border: [contrast_100]; bg: [primary_50]) */ + button[style*="border-color: rgb(35, 46, 62); background-color: rgb(0, 30, 71)"], + // dark + button[style*="border-color: rgb(44, 58, 78); background-color: rgb(18, 41, 73)"], + // dim + button[style*="border-color: rgb(220, 226, 234); background-color: rgb(229, 240, 255)"] // light + { + background-color: @surface0 !important; + border-color: @overlay0 !important; + } + + /* any button that's disabled (we should start using broader overrides) */ + button[disabled] > svg > path { + fill: @overlay0; + } + + /* sitewide text inputs */ + /* the divs are styled separately from the input areas */ + div[style*="border-color: rgb(46, 64, 82)"] { + border-color: @surface1 !important; + } + /* search bar [primary_500] */ + div[style*="border-color: rgb(0, 106, 255)"], // dark + div[style*="border-color: rgb(15, 115, 255)"] // dim + { + border-color: @accent !important; + } + + /* image preview borders across app */ + [style*="border-color: rgb(74, 97, 121)"] { + border-color: @surface2 !important; + } + + /* search tab trending buttons */ + [style*="background-color: rgb(142, 9, 40)"] { + background-color: @red !important; + + div { + color: @crust !important; + } + + svg > path { + fill: @crust; + } + } + /* TODO: new which is green but I can't get the right class cause nothing on bsky is a new trending topic atm */ + + /* round icon backgrounds (e.g. feeds) */ + div[style*="background-color: rgb(21, 52, 85)"] { + background-color: @surface0 !important; + } + + /* pill toggle button styles (e.g. account activity notifications) */ + /* active, hover */ + div[style*="border-color: rgb(76, 162, 254);"] { + border-color: @accent !important; + } + div[style*="background-color: rgb(18, 52, 100)"] { + background-color: fade(@accent, 40%) !important; + } + /* inactive, circle in pill */ + div[style*="background-color: rgb(91, 119, 149)"] { + background-color: @surface2 !important; + } + /* inactive, hover */ + div[style*="border-color: rgb(120, 142, 165)"] { + border-color: @overlay1 !important; + } + } +} diff --git a/styles/bstats/README.md b/styles/bstats/README.md new file mode 100644 index 0000000000..dac18bbc4a --- /dev/null +++ b/styles/bstats/README.md @@ -0,0 +1,37 @@ + + + +

+ Logo
+ + Catppuccin for bStats + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + +> [!NOTE] +> Make sure to use the default **Teal** theme from the built-in color picker (located at the bottom of the page) for the best experience! + +## 💝 Current Maintainer +- [rockquiet](https://github.com/rockquiet) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/bstats/catppuccin.user.less b/styles/bstats/catppuccin.user.less new file mode 100644 index 0000000000..83d3edded8 --- /dev/null +++ b/styles/bstats/catppuccin.user.less @@ -0,0 +1,767 @@ +/* ==UserStyle== +@name bStats Catppuccin +@namespace github.com/catppuccin/userstyles/styles/bstats +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/bstats +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/bstats/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Abstats +@description Soothing pastel theme for bStats +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] + +@var checkbox graphUseAccentColor "Graphs Use Accent" 0 +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("bstats.org") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + body, + .collection-header, + .collection-item, + .grey.lighten-4, + .page-footer .footer-copyright { + background: @base !important; + } + .teal.darken-3, + .teal.darken-2, + .dropdown-content, + .side-nav { + background-color: @mantle !important; + } + + .teal { + background-color: @surface0 !important; + } + + /* slide out nav text & icons */ + .subheader, + .left { + color: @text !important; + } + + .collection { + border-color: @surface0; + } + .collection.with-header .collection-header, + .collection .collection-item { + border-bottom-color: @surface0; + } + + .collapsible { + border-top-color: @surface1; + border-right-color: @surface1; + border-left-color: @surface1; + } + .collapsible-body { + border-bottom-color: @surface1; + } + .collapsible-header { + background-color: @surface0 !important; + border-bottom-color: @surface1; + } + + blockquote { + border-left-color: @maroon; + } + /* code box */ + .prettyprint, + .withBox, + .prettyprinted { + background-color: @mantle !important; + outline-color: @mantle; + color: @overlay2; + } + .tag, + .boolean { + color: @blue; + } + .pln { + color: @text; + } + .com { + color: @overlay0; + } + .key { + color: @red; + } + .clo, + .opn, + .pun { + color: @yellow; + } + .str, + .string, + .atv { + color: @green; + } + .atn { + color: @mauve; + } + .number { + color: @peach; + } + + p, + h5, + b, + table, + th, + td, + .white-text, + nav .brand-logo, + nav a, + div.material-table .table-title, + div.material-table table th, + .card-title, + .card-content, + .container, + .center { + color: @text !important; + } + html, + div.material-table table tr td, + .grey-text.text-lighten-4, + .page-footer .footer-copyright { + color: @subtext1 !important; + } + .grey-text, + .grey-text.text-darken-2, + .input-field label, + div.material-table .table-footer label, + div.material-table .table-footer, + label { + color: @subtext0 !important; + } + .blue-text { + color: @blue !important; + } + .red-text { + color: @red !important; + } + .red { + background-color: @red; + } + + /* discord logo on homepage */ + img[src="/images/discord.svg"] when (@flavor = latte) { + filter: saturate(210%) hue-rotate(-20deg) brightness(82%); + } + img[src="/images/discord.svg"] when (@flavor = frappe) { + filter: saturate(53%) hue-rotate(-10deg) brightness(147%) contrast(90%) + sepia(15%) invert(2%); + } + img[src="/images/discord.svg"] when (@flavor = macchiato) { + filter: saturate(52%) hue-rotate(-15deg) brightness(157%) contrast(90%) + sepia(10%); + } + img[src="/images/discord.svg"] when (@flavor = mocha) { + filter: saturate(38%) hue-rotate(-25deg) brightness(153%) sepia(6%); + } + + /* checkbox */ + [type="checkbox"] + label::before, + [type="checkbox"]:not(.filled-in) + label::after { + border-color: @subtext0; + } + [type="checkbox"]:checked + label::before { + border-color: rgba(0, 0, 0, 0); + border-right-color: @green; + border-bottom-color: @green; + } + + /* table hover */ + div.material-table table tbody tr:hover { + background-color: fade(@surface2, 40%); + } + /* nav hover */ + nav ul a:hover { + background-color: fade(@surface2, 40%); + } + .dropdown-content li:hover, + .dropdown-content li.active, + .dropdown-content li.selected { + background-color: fade(@surface2, 5%); + } + + .input-field label { + color: @accent !important; + } + /* search unfocused */ + input:not([type]), + input[type="text"], + input[type="password"], + input[type="email"], + input[type="url"], + input[type="time"], + input[type="date"], + input[type="datetime"], + input[type="datetime-local"], + input[type="tel"], + input[type="number"], + input[type="search"], + textarea.materialize-textarea { + border-bottom-color: @subtext0; + box-shadow: 1 1px 0 0 @subtext0; + } + /* search focused */ + input:not([type]):focus:not([readonly]), + input[type="text"]:focus:not([readonly]), + input[type="password"]:focus:not([readonly]), + input[type="email"]:focus:not([readonly]), + input[type="url"]:focus:not([readonly]), + input[type="time"]:focus:not([readonly]), + input[type="date"]:focus:not([readonly]), + input[type="datetime"]:focus:not([readonly]), + input[type="datetime-local"]:focus:not([readonly]), + input[type="tel"]:focus:not([readonly]), + input[type="number"]:focus:not([readonly]), + input[type="search"]:focus:not([readonly]), + textarea.materialize-textarea:focus:not([readonly]) { + border-bottom-color: @accent; + box-shadow: 0 1px 0 0 @accent; + } + /* valid input */ + input:not([type]).valid, + input:not([type]):focus.valid, + input[type="text"].valid, + input[type="text"]:focus.valid, + input[type="password"].valid, + input[type="password"]:focus.valid, + input[type="email"].valid, + input[type="email"]:focus.valid, + input[type="url"].valid, + input[type="url"]:focus.valid, + input[type="time"].valid, + input[type="time"]:focus.valid, + input[type="date"].valid, + input[type="date"]:focus.valid, + input[type="datetime"].valid, + input[type="datetime"]:focus.valid, + input[type="datetime-local"].valid, + input[type="datetime-local"]:focus.valid, + input[type="tel"].valid, + input[type="tel"]:focus.valid, + input[type="number"].valid, + input[type="number"]:focus.valid, + input[type="search"].valid, + input[type="search"]:focus.valid, + textarea.materialize-textarea.valid, + textarea.materialize-textarea:focus.valid { + border-bottom-color: @green; + box-shadow: 0 1px 0 0 @green; + } + + .teal-text, + .teal-text.text-darken-2, + .teal-text.text-lighten-3, + a { + color: @accent !important; + } + + .btn, + .btn-large { + color: @text !important; + } + .btn.disabled, + .disabled.btn-large, + .btn-floating.disabled, + .btn-large.disabled, + .btn-flat.disabled, + .btn:disabled, + .btn-floating:disabled, + .btn-large:disabled, + .btn-flat:disabled, + .btn[disabled], + [disabled].btn-large, + .btn-floating[disabled], + .btn-large[disabled], + .btn-flat[disabled], + .btn-large.red[disabled], + .btn-large.red.disabled[id="delete_button"] { + background-color: @mantle !important; + color: @subtext0 !important; + } + .btn-large.red[id="delete_button"] { + color: @mantle !important; + background-color: @red !important; + } + + .card { + background-color: @base; + border-color: @surface0; + } + + thead, + div.material-table table tr td, + div.material-table .table-header { + border-bottom-color: @surface0; + } + + /* modals found in custom chart settings */ + .modal .modal-content, + .modal .modal-footer { + background-color: @surface0; + } + + /* custom chart dropdown menu */ + .select-wrapper input.select-dropdown { + border-bottom-color: @subtext0; + } + .select-dropdown li.optgroup { + border-top-color: @surface1; + } + .select-dropdown li.disabled, + .select-dropdown li.disabled > span, + .select-dropdown li.optgroup { + color: @text; + } + .select-dropdown li.optgroup > span { + color: @subtext1; + } + .dropdown-content li > a, + .dropdown-content li > span { + color: @accent; + } + + .divider { + background-color: @surface1; + } + .caret { + color: @overlay1 !important; + } + + /* custom chart lever */ + .switch label .lever { + background-color: @overlay0; + &::after { + background-color: @overlay2; + } + } + .switch label input[type="checkbox"]:checked + .lever { + background-color: desaturate(darken(@accent, 25%), 50%); + & when (@flavor = latte) { + background-color: desaturate(lighten(@accent, 12%), 30%); + } + &::after { + background-color: @accent; + } + } + + /* custom chart filter data */ + .chip { + color: @text; + background-color: @surface1; + } + .chips .chip.selected { + background-color: @accent; + color: @base; + } + .chips.focus { + border-bottom-color: @accent; + box-shadow: 0 1px 0 0 @accent; + } + .chips .input { + color: @text; + } + input[placeholder="Add an other value"] { + border-bottom-color: @overlay2; + } + + /* HIGHCHARTS "let's hope this does'nt break"-section */ + /* all the charts */ + .highcharts-graph when (@graphUseAccentColor = 1) { + stroke: @accent; + } + .highcharts-graph when (@graphUseAccentColor = 0) { + stroke: @red; + } + /* "shadow" area below graph in time navigator */ + .highcharts-area { + fill: fade(@red, 5%) !important; + & when (@graphUseAccentColor = 1) { + fill: fade(@accent, 5%) !important; + } + } + + /* charts background */ + .highcharts-container { + background: @base !important; + } + /* map blends in with background on latte flavor */ + .highcharts-map-series .highcharts-point { + stroke: @base !important; + & when (@flavor = latte) { + stroke: @overlay0 !important; + } + } + /* graph chart grid */ + .highcharts-grid.highcharts-yaxis-grid .highcharts-grid-line { + stroke: @surface0; + } + /* bottom timeline line */ + .highcharts-tick, + .highcharts-xaxis .highcharts-axis-line { + stroke: @surface1; + } + /* bottom timeline & y axis text text */ + .highcharts-axis-labels.highcharts-xaxis-labels text, + .highcharts-axis-labels.highcharts-yaxis-labels text { + fill: @subtext1 !important; + } + + /* vertical line on graph hover */ + .highcharts-crosshair, + .highcharts-crosshair-thin { + stroke: @overlay2; + } + /* circle marker on graph */ + .highcharts-markers .highcharts-halo.highcharts-color-0 { + fill: @red !important; + stroke: none !important; + & when (@graphUseAccentColor = 1) { + fill: @accent !important; + } + } + .highcharts-markers path { + fill: @red !important; + stroke: @base !important; + & when (@graphUseAccentColor = 1) { + fill: @accent !important; + } + } + + /* time navigator on bottom */ + /* active time span */ + .highcharts-navigator, + .highcharts-navigator-mask-inside { + fill: fade(@surface1, 33%); + } + .highcharts-navigator .highcharts-navigator-outline { + stroke: @surface1; + } + /* navigator handles on the left & right */ + .highcharts-navigator .highcharts-navigator-handle { + fill: @surface0; + stroke: @overlay1; + } + /* vertical timestamp lines */ + .highcharts-grid.highcharts-xaxis-grid.highcharts-navigator-xaxis + .highcharts-grid-line { + stroke: @surface1; + } + /* time navigator timestamp text */ + .highcharts-xaxis-labels.highcharts-navigator-xaxis tspan { + fill: @subtext0 !important; + } + + /* scrollbar */ + .highcharts-scrollbar, + .highcharts-scrollbar-track { + fill: @surface0; + stroke: @surface1; + } + .highcharts-scrollbar, + .highcharts-scrollbar-thumb { + fill: @overlay1; + stroke: @overlay1; + } + .highcharts-scrollbar .highcharts-scrollbar-rifles { + stroke: @mantle; + } + .highcharts-scrollbar-button { + fill: @overlay1; + stroke: @overlay1; + } + .highcharts-scrollbar-arrow { + fill: @mantle; + } + + /* buttons */ + .highcharts-button text { + fill: @subtext1 !important; + } + .highcharts-button-box { + fill: @surface0 !important; + stroke: @surface0 !important; + } + .highcharts-button-symbol { + fill: @subtext0 !important; + stroke: @subtext0 !important; + } + /* normal state */ + .highcharts-button.highcharts-button-normal text { + fill: @subtext1 !important; + } + .highcharts-button.highcharts-button-normal .highcharts-button-box { + fill: @surface0 !important; + stroke: @surface0 !important; + } + /* hover state */ + .highcharts-button.highcharts-button-hover text { + fill: @text !important; + } + .highcharts-button.highcharts-button-hover .highcharts-button-box { + fill: @surface2 !important; + stroke: @surface2 !important; + } + /* pressed state */ + .highcharts-button.highcharts-button-pressed text { + fill: @text !important; + } + .highcharts-button.highcharts-button-pressed .highcharts-button-box { + fill: @surface2 !important; + stroke: @surface2 !important; + } + /* disabled state */ + .highcharts-button.highcharts-button-disabled text { + fill: @overlay0 !important; + } + .highcharts-button.highcharts-button-disabled .highcharts-button-box { + fill: @base !important; + stroke: @surface0 !important; + } + + /* "Load full data" button */ + .highcharts-menu { + background: @surface0 !important; + border-color: @surface1 !important; + box-shadow: @mantle 3px 3px 10px !important; + } + .highcharts-menu-item { + color: @text !important; + &:hover { + color: @base !important; + background: @accent !important; + } + } + /* pie text "shadow" */ + .highcharts-text-outline { + stroke: @mantle; + stroke-width: 2px; + } + /* pie text */ + .highcharts-label.highcharts-data-label tspan { + fill: @subtext1; + } + /* drilldown pie text */ + .highcharts-label.highcharts-data-label.highcharts-drilldown-data-label + tspan { + fill: @blue; + } + .highcharts-label.highcharts-data-label.highcharts-drilldown-data-label + text { + fill: @blue !important; + color: @blue !important; + } + /* pie subtitle */ + .highcharts-subtitle tspan { + fill: @subtext0; + } + /* pie hover text */ + .highcharts-label.highcharts-tooltip text { + fill: @subtext1 !important; + color: @subtext1 !important; + } + /* hover text */ + .highcharts-label.highcharts-tooltip-box tspan { + fill: @subtext1; + } + /* hover text red dot */ + .highcharts-label.highcharts-tooltip-box tspan[style="fill:#F44336"] { + fill: @red !important; + & when (@graphUseAccentColor = 1) { + fill: @accent !important; + } + } + /* map hover text */ + .highcharts-label.highcharts-tooltip + span:not(div.highcharts-label > span:nth-child(1) > span:nth-child(1)) { + color: @subtext1 !important; + } + /* "No data to display" */ + .highcharts-label.highcharts-no-data tspan { + fill: @subtext1; + } + /* axis label */ + .highcharts-axis-title tspan { + fill: @subtext1; + } + + /* hover text background */ + .highcharts-label-box, + .highcharts-tooltip-box { + fill: @surface0; + } + + /* legend */ + /* legend title */ + .highcharts-label.highcharts-legend-title text { + fill: @subtext1 !important; + } + /* legend labels */ + .highcharts-axis-labels, + .highcharts-coloraxis-labels text { + fill: @subtext0 !important; + } + /* vertical lines */ + .highcharts-legend-item + .highcharts-grid.highcharts-coloraxis-grid + .highcharts-grid-line { + stroke: @base; + } + /* background only for bar chart legend */ + .highcharts-legend + .highcharts-legend-box[fill="#FFFFFF"][stroke="#999999"] { + fill: @surface0 !important; + stroke: @surface1 !important; + } + /* bar chart entries */ + .highcharts-legend .highcharts-legend-item.highcharts-bar-series tspan { + fill: @subtext1 !important; + &:hover { + fill: @text !important; + } + } + .highcharts-legend + .highcharts-legend-item.highcharts-bar-series.highcharts-legend-item-hidden + tspan { + fill: @overlay2 !important; + &:hover { + fill: @subtext0 !important; + } + } + + .highcharts-point { + stroke: @base !important; + } + /* bar chart circle outline */ + .highcharts-legend .highcharts-legend-item.highcharts-bar-series rect { + stroke: none !important; + } + /* disabled bar chart circle */ + .highcharts-legend + .highcharts-legend-item.highcharts-bar-series.highcharts-legend-item-hidden + rect { + fill: @overlay0 !important; + stroke: none !important; + } + /* bar & pie chart colors */ + /* color 0 */ + .highcharts-point.highcharts-color-0, + .highcharts-halo.highcharts-color-0, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-0 rect { + fill: @red !important; + } + .highcharts-data-label-connector.highcharts-color-0 { + stroke: @red !important; + } + /* color 1 */ + .highcharts-point.highcharts-color-1, + .highcharts-halo.highcharts-color-1, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-1 rect { + fill: @green !important; + } + .highcharts-data-label-connector.highcharts-color-1 { + stroke: @green !important; + } + /* color 2 */ + .highcharts-point.highcharts-color-2, + .highcharts-halo.highcharts-color-2, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-2 rect { + fill: @sky !important; + } + .highcharts-data-label-connector.highcharts-color-2 { + stroke: @sky !important; + } + /* color 3 */ + .highcharts-point.highcharts-color-3, + .highcharts-halo.highcharts-color-3, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-3 rect { + fill: @peach !important; + } + .highcharts-data-label-connector.highcharts-color-3 { + stroke: @peach !important; + } + /* color 4 */ + .highcharts-point.highcharts-color-4, + .highcharts-halo.highcharts-color-4, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-4 rect { + fill: @yellow !important; + } + .highcharts-data-label-connector.highcharts-color-4 { + stroke: @yellow !important; + } + /* color 5 */ + .highcharts-point.highcharts-color-5, + .highcharts-halo.highcharts-color-5, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-5 rect { + fill: @teal !important; + } + .highcharts-data-label-connector.highcharts-color-5 { + stroke: @teal !important; + } + /* color 6 */ + .highcharts-point.highcharts-color-6, + .highcharts-halo.highcharts-color-6, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-6 rect { + fill: @pink !important; + } + .highcharts-data-label-connector.highcharts-color-6 { + stroke: @pink !important; + } + /* color 7 */ + .highcharts-point.highcharts-color-7, + .highcharts-halo.highcharts-color-7, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-7 rect { + fill: @flamingo !important; + } + .highcharts-data-label-connector.highcharts-color-7 { + stroke: @flamingo !important; + } + /* color 8 */ + .highcharts-point.highcharts-color-8, + .highcharts-halo.highcharts-color-8, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-8 rect { + fill: @subtext0 !important; + } + .highcharts-data-label-connector.highcharts-color-8 { + stroke: @subtext0 !important; + } + /* color 9 */ + .highcharts-point.highcharts-color-9, + .highcharts-halo.highcharts-color-9, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-9 rect { + fill: @blue !important; + } + .highcharts-data-label-connector.highcharts-color-9 { + stroke: @blue !important; + } + /* color 10 */ + .highcharts-point.highcharts-color-10, + .highcharts-halo.highcharts-color-10, + .highcharts-legend-item.highcharts-bar-series.highcharts-color-10 rect { + fill: @mauve !important; + } + .highcharts-data-label-connector.highcharts-color-10 { + stroke: @mauve !important; + } + } +} diff --git a/styles/canvas-lms/README.md b/styles/canvas-lms/README.md index fdcb39aa89..8405dcf530 100644 --- a/styles/canvas-lms/README.md +++ b/styles/canvas-lms/README.md @@ -10,37 +10,18 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +## 💝 Current Maintainer +- [pynappo](https://github.com/pynappo) -## 💝 Current Maintainer(s) +## 💖 Past Maintainer - [TheMemeSniper](https://github.com/TheMemeSniper)   diff --git a/styles/canvas-lms/assets/catwalk.webp b/styles/canvas-lms/assets/catwalk.webp deleted file mode 100644 index 7164f62165..0000000000 --- a/styles/canvas-lms/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:1a1985cf2f2066fc5ef3ff25b78d0878fb5916c343d4cb74f9e5d5ff9c1cb420 -size 104552 diff --git a/styles/canvas-lms/assets/frappe.webp b/styles/canvas-lms/assets/frappe.webp deleted file mode 100644 index 5d384f21c3..0000000000 --- a/styles/canvas-lms/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6d38aca42315a15493afb1c9724966e3ac66ad6fbf788492fbac1aac701a61e3 -size 101158 diff --git a/styles/canvas-lms/assets/latte.webp b/styles/canvas-lms/assets/latte.webp deleted file mode 100644 index 2e5dbcdd87..0000000000 --- a/styles/canvas-lms/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:32a62ff1a506232555bedab0fe9a19ddcf71bc129e708a0dc67533412dafc034 -size 98466 diff --git a/styles/canvas-lms/assets/macchiato.webp b/styles/canvas-lms/assets/macchiato.webp deleted file mode 100644 index 8ed1ff30b8..0000000000 --- a/styles/canvas-lms/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7e95dc300b983bf807cadb710c9305ec3e961a8608e78b3eb67195e2869f6e1d -size 101866 diff --git a/styles/canvas-lms/assets/mocha.webp b/styles/canvas-lms/assets/mocha.webp deleted file mode 100644 index a35238dcaa..0000000000 --- a/styles/canvas-lms/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:821199671bd9e91423002b08898e14214f23017dc477d1c9e322f72b60c1ce31 -size 100854 diff --git a/styles/canvas-lms/catppuccin.user.css b/styles/canvas-lms/catppuccin.user.css deleted file mode 100644 index 98a3f92121..0000000000 --- a/styles/canvas-lms/catppuccin.user.css +++ /dev/null @@ -1,259 +0,0 @@ -/* ==UserStyle== -@name Canvas LMS Catppuccin -@namespace github.com/catppuccin/userstyles/styles/canvas-lms -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/canvas-lms -@version 0.0.1 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/canvas-lms/catppuccin.user.css -@description Soothing pastel theme for Canvas LMS -@author Catppuccin -@license MIT - -@preprocessor less -@var select flavor "Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire*", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] -==/UserStyle== */ -@-moz-document domain("instructure.com") { - :root { - #catppuccin(@flavor, @accentColor); - } - - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-color: @catppuccin[@@lookup][@@accent]; - - #breadcrumbs, - #printQuizButton, - #content, - .navigation-tray-container, - .ic-Dashboard-header__layout, - .button-sidebar-wide, - .access_tokens, - .context_modules, - .textarea-container, - .Button, - .panel, - span { - background-color: @base; - color: @accent-color; - } - - #application, - .comments, - .module-sequence-footer-content, - .immersive_reader_mount_point, - .context_modules { - background: @base !important; - background-color: @base !important; - color: @accent-color !important; - } - - a, - .page-title { - color: fadeout(@text, 0.8) !important; - } - - * { - color: @text !important; - background-color: @base !important; - } - .ic-DashboardCard, - .ic-DashboardCard__header_content, - .ic-DashboardCard__action-container, - .ic-DashboardCard__header-subtitle, - .ic-DashboardCard__header-title, - .ic-DashboardCard__header-term { - background-color: @surface0 !important; - } - - .ic-app-header__main-navigation, - .ic-app-header__logomark-container { - background-color: @crust !important; - } - - .ic-app-header__menu-list-item.ic-app-header__menu-list-item--active - .ic-app-header__menu-list-link { - background-color: fadeout(@crust, 0.8); - } - - body { - background-color: @base; - } - - #right-side .events_list .event-details::after, - #right-side .events_list .todo-details::after, - #right-side .to-do-list .event-details::after, - #right-side .to-do-list .todo-details::after { - content: ""; - position: absolute; - top: 0; - right: 0; - height: 100%; - width: 12px; - background: linear-gradient( - to right, - rgba(255, 255, 255, 0) 0%, - @surface0 80% - ); - } - - :root { - --ic-brand-global-nav-avatar-border: @accent-color; - --ic-brand-font-color-dark: fadeout(@accent-color, 0.8); - --ic-brand-primary: @accent-color; - --ic-brand-global-nav-ic-icon-svg-fill: fadeout(@accent-color, 0.5); - --eMdva-color: @base !important; - --ccWIh-color: @crust; - } - .unread_count, - .menu-item-icon-container, - .menu-item__badge, - .nav-badge { - color: fadeout(@text, 0.8); - } - - .list-view a.active { - border-left: 2px solid #007fff; - color: #007fff; - } - } -} diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less new file mode 100644 index 0000000000..b369876e71 --- /dev/null +++ b/styles/canvas-lms/catppuccin.user.less @@ -0,0 +1,2440 @@ +/* ==UserStyle== +@name Canvas LMS Catppuccin +@namespace github.com/catppuccin/userstyles/styles/canvas-lms +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/canvas-lms +@version 2026.04.09 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/canvas-lms/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acanvas-lms +@description Soothing pastel theme for Canvas LMS +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("instructure.com"), domain("instructuremedia.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + /* GLOBALS/VARIABLES */ + --ic-brand-primary: @accent; + --ic-brand-primary-lightened-15: lighten(@accent, 5%); + --ic-brand-primary-darkened-28: darken(@accent, 10%); + --ic-brand-primary-darkened-10: darken(@accent, 3%); + --ic-brand-font-color-dark: @text; + --ic-brand-font-color-dark-lightened-15: @subtext1; + --ic-brand-font-color-dark-lightened-28: @subtext0; + --ic-brand-font-color-dark-lightened-30: @subtext0; + --ic-link-color: @blue; + --ic-link-color-darkened-10: fade(@blue, 90%); + --ic-link-color-lightened-10: lighten(@blue, 10%); + + /* hover colors, used based on whether canvas's css has a blue hover or grayed-out hover color */ + @hover-regular: fade(@surface2, 50%); + @hover-accent: mix(@base, @accent, 70%); + + /* GENERAL UI CHANGES */ + + #footer, + body { + color: @text; + border-color: @surface1; + background-color: @base; + } + hr { + border-color: @surface1; + } + select, + textarea, + input[type="text"], + input[type="password"], + input[type="datetime"], + input[type="datetime-local"], + input[type="date"], + input[type="month"], + input[type="time"], + input[type="week"], + input[type="number"], + input[type="email"], + input[type="url"], + input[type="search"], + input[type="tel"], + input[type="color"], + .uneditable-input { + &ic-Input { + border-color: @surface1; + background-color: @surface0; + } + background-color: @base; + border-color: @surface2; + } + img:not( + [src^="/"], + [src*="cloudfront.net/dist"], + [src*="instructuremedia.com/build"] + ) { + /* force a white background for user-uploaded images */ + background-color: #fffd; + } + scrollbar-color: @surface2 @surface0; + + table { + border-color: @surface1; + } + table[style*="border-color: #000000"] { + border-color: @surface1 !important; + } + thead th { + border-color: @surface1; + } + tbody tr, + tbody td { + border-color: @surface1; + } + td[class$="view-cell"] { + color: @text; + } + + :is(label, fieldset) span[class$="formFieldLabel"] { + color: @subtext1; + } + + :is(label, fieldset) span[class$="text"] { + color: @text; + } + + /* used for links */ + span[color="brand"] { + color: @blue; + } + + /* used for labels */ + span[color="primary"] { + color: @subtext1; + } + span[color="secondary"] { + color: @subtext0; + } + + .user_content { + /* for highlighted non-links in user-created content, revert to regular-ish text color */ + [style~="background-color:"]:not([style~="color:"]) + :not(a.external span) { + color: black; + } + /* just a special exception for pure black text and pure white backgrounds */ + [style*="color: rgb(0, 0, 0)"], + [style*="color: black"], + [style*="color: #000000"] { + &:not([style~="background-color:"]) { + color: @text !important; + } + } + [style*="background-color: rgb(255, 255, 255)"], + [style*="background-color: white"], + [style*="background-color: #ffffff"] { + color: @text !important; + background-color: @base !important; + } + } + + a[class$="link"]:not(.btn, .ic-DashboardCard__link), + a[class$="link"] > span, + button[class$="link"]:not(.btn) { + color: @blue; + &:focus { + outline-color: @accent; + } + } + a.external span { + color: @blue; + } + + /* sticky footers (e.g. teacher-side course settings) */ + .sticky-footer { + background-color: @surface0; + } + .form-actions-sticky-footer { + border-color: @surface1; + } + + /* spinners */ + [class*="spinner__circleTrack"] { + stroke: @surface1 !important; + } + [class*="spinner__circleSpin"] { + stroke: @accent !important; + } + + /* fullscreen background for modal popups */ + :where(body > span > span[class*="mask"]) { + /* modals */ + background-color: fade(@overlay0, 75%); + > span { + color: @text; + background-color: @base; + border-color: @surface1; + div[class$="modalHeader"] { + background-color: transparent; + border-color: @surface1; + button:has(svg[name="IconX"]) { + .flush-button(); + } + } + img { + background-color: transparent; + } + > div[class$="modalFooter"] { + background-color: @surface0; + border-color: @surface1; + button { + .neutral-button(); + } + } + } + } + + div[class*="view-panel__content"] { + color: @text; + } + + /* dialogs */ + .ui-datepicker td span.ui-state-default.ui-state-hover, + .ui-datepicker td a.ui-state-default.ui-state-hover { + border-color: @surface2; + background-color: @surface1; + } + .ui-datepicker-header.ui-widget-header, + .ui-widget-content { + background-color: @surface0; + border-color: @surface1; + } + .ui-widget-overlay { + background-color: fade(@base, 70%); + } + .ui-dialog { + .ui-dialog-titlebar { + background-color: @surface0; + border-color: @surface1; + } + background-color: @surface0; + } + .ui-datepicker .ui-datepicker-time, + .ui-dialog .ui-dialog-buttonpane { + background-color: @surface1; + border-color: @surface2; + } + .form-dialog .form-controls { + background-color: @surface1; + border-color: @surface2; + } + + /* global nav menu */ + .ic-app-header { + .ic-app-header__logomark-container { + background-color: transparent; + } + .ic-app-header__menu-list-item.ic-app-header__menu-list-item--active { + > * { + background-color: @base; + } + .menu-item__text { + background-color: transparent; + } + .ic-app-header__menu-list-link:focus { + box-shadow: + inset 0 0 0 0.125rem @base, + inset 0 0 0 0.25rem + var(--ic-brand-global-nav-menu-item__text-color--active); + } + } + } + .ic-app-header__menu-list-link:focus { + box-shadow: inset 0 0 0 0.125rem @surface1, inset 0 0 0 0.25rem @surface2; + } + --ic-brand-global-nav-menu-item__text-color--active: @accent; + --ic-brand-global-nav-menu-item__badge-text--active: @mantle; + --ic-brand-global-nav-ic-icon-svg-fill--active: @accent; + --ic-brand-global-nav-avatar-border: @text; + + --ic-brand-global-nav-bgd: @mantle; + --ic-brand-global-nav-menu-item__badge-bgd: @surface2; + --ic-brand-global-nav-menu-item__badge-text: @text; + --ic-brand-global-nav-menu-item__text-color: @text; + --ic-brand-global-nav-ic-icon-svg-fill: @text; + .menu-item-icon-container path[fill] { + fill: @text !important; + } + + /* sidebar sliding trays */ + body > span > [class*="tray"] { + background-color: @mantle; + fieldset, + label { + .Gradebook__StatusModalListItem span { + color: black !important; + } + } + div[class$="tray__content"] > div > span:last-of-type:has(> button) { + border-color: @surface1; + background-color: @crust; + } + span[data-testid$="footer"] > div { + border-color: @surface1; + background-color: @crust; + } + } + + div[aria-label="Global Navigation"] [class$="summaryText"] svg { + /* mobile nav menu icons */ + color: @blue; + } + + #nav-tray-portal { + > span > span { + background-color: @base; + [class$="listItem"] { + color: @subtext0; + } + /* needed to persist color on hover */ + a { + color: @blue; + } + div[data-timestamp] { + color: @subtext0; + } + } + label span[class$="label"] { + color: @text; + } + .help-tray li [class$="pill"] { + /* new pill */ + border-color: @green; + color: @green; + background-color: transparent; + } + .profile-tray span[class$="avatar"] { + background-color: @surface0; + span { + color: @accent; + } + } + } + + .profile-tray button[aria-describedby^="Tooltip"] { + /* info tooltip on high contrast ui checkbox */ + .flush-button(); + } + + /* link sidebar for courses */ + .list-view a.active { + border-color: @accent; + color: @accent; + } + + /* pills */ + div[class$="pill"] { + /* info pill (e.g. submitted, graded, etc) */ + background-color: transparent; + border-color: @surface2; + color: @text; + &.css-tfc09q-pill.css-tfc09q-pill { + /* red pills (late, missing) */ + color: @red; + border-color: @red; + } + } + .pill { + background-color: @surface1; + border-color: @surface2; + box-shadow: 0 1px 0 @surface2; + } + /* pills on grades tab */ + .student_assignment [class$="pill"] { + background-color: transparent; + } + .submission-missing-pill > span > div { + color: @red; + border-color: @red; + } + .submission-late-pill > span > div { + /* yes, this is blue in grades and red on dashboard */ + color: @blue; + border-color: @blue; + } + + /* filled-in buttons - this auto-generated class covers a lot of them */ + @hover-button: @surface1; + .neutral-button() { + color: @text; + background-color: @surface0; + border-color: @surface1; + &:hover { + background-color: @hover-button; + > [class$="baseButton__content"] { + background-color: @hover-button; + } + color: @text; + } + path[fill="#000000"] { + fill: @text; + } + > [class$="baseButton__content"] { + color: @text; + background-color: @surface0; + border-color: @surface1; + transition-property: background, transform, filter; + } + [class$="text"] { + color: @text; + } + } + + /* this is for buttons that are accent-colored */ + @hover-accent-button: mix(@base, @accent, 20%); + .accent-button() { + background-color: @accent; + border-color: @surface1; + path[fill="#000000"] { + fill: @mantle; + } + > [class$="baseButton__content"] { + transition-property: all; + color: @mantle; + background-color: @accent; + border-color: @surface1; + } + &:hover { + background-color: @hover-accent-button; + > [class$="baseButton__content"] { + background-color: @hover-accent-button; + } + color: @mantle; + } + } + + span[type="button"] { + .neutral-button(); + } + + /* this is for buttons that have no border/background until hovered */ + @hover-flush-button: fade(@surface1, 30%); + .flush-button() { + color: @text; + background-color: transparent; + border-color: transparent; + &:hover { + background-color: @hover-flush-button; + > [class$="baseButton__content"] { + background-color: @hover-flush-button; + } + color: @text; + } + path[fill="#000000"] { + fill: @text; + } + > [class$="baseButton__content"] { + color: @text; + transition-property: background, transform, filter; + } + [class$="text"] { + color: @text; + } + } + + .btn:not(.btn-primary, .btn-link), + .Button:not( + .Button--link, + .Button--primary, + .Button--icon-action, + .Button--icon-action-danger, + .Button--icon-action-rev + ), + .ui-button { + background-color: @surface0; + color: @text; + border-color: @surface1; + &:focus { + color: @text; + } + &:hover { + background-color: @hover-button; + color: @text; + } + &.ui-state-hover { + background-color: @hover-button; + color: @text; + border-color: darken(@surface1, 5%); + } + &:active { + background-color: darken(@hover-button, 3%); + } + &.active, &.Button--active { + background-color: @subtext0; + border-color: lighten(@surface1, 10%); + color: @mantle; + } + } + + .btn-link, + .Button--link { + &.active, &.Button--active, &.ui-button.ui-state-active, &:active { + background: @surface0; + } + &.disabled, &.ui-button.ui-state-disabled, &[disabled] { + background: transparent; + } + } + + /* the below styles are taken from canvas's common css sheet */ + .ui-button.ui-state-active:hover, + .ui-button.ui-state-active, + .ui-progressbar .ui-button.ui-widget-header { + background-color: @subtext0; + border-color: lighten(@surface1, 10%); + color: @mantle; + } + + --ic-brand-button--primary-bgd: @accent; + --ic-brand-button--primary-text: @crust; + --ic-brand-button--primary-bgd-darkened-5: darken(@accent, 5%); + --ic-brand-button--primary-bgd-darkened-15: darken(@accent, 15%); + + .ui-progressbar .btn-link.ui-button.ui-widget-header, + .ui-progressbar .Button--link.ui-button.ui-widget-header { + background: @surface0; + } + + .btn-published, + .btn-published:hover { + background: @green; + border-color: 1px solid darken(@green, 10%); + color: @crust; + } + + .btn-published:focus { + box-shadow: inset 0 0 0 2px @crust; + background: darken(@green, 10%); + color: @crust; + } + + .btn-published.disabled, + .btn-published.ui-button.ui-state-disabled, + .btn-published.disabled:hover { + border-color: darken(@green, 10%); + background: @green; + color: @crust; + } + + .btn-unpublished { + color: @crust; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + 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; + } + + .btn-unpublished:focus { + color: @crust; + background: @maroon; + box-shadow: inset 0 0 0 2px @crust; + } + /* end of copy-pasted styles */ + + span[role="button"]::before, /* drag handle */ + :is(button, a)[class$="baseButton"]::before { + border-color: @accent; + } + + .ActionButtons button[id^="Drilldown"] { + .accent-button(); + } + + .Button--icon-action:hover, + .Button--icon-action-danger:hover, + .Button--icon-action-rev:hover, + .Button--icon-action:focus, + .Button--icon-action-danger:focus, + .Button--icon-action-rev:focus { + background: transparent !important; + } + + .Button--icon-action-rev:focus { + box-shadow: inset 0 0 0 2px @text; + } + + .btn-primary:focus, .Button--primary:focus { + box-shadow: inset 0 0 0 2px @crust; + } + + /* outlines around clicked elements */ + [class$="__facade"] { + &::before { + border-color: @accent; + } + } + textarea + span[class$="textArea__outline"] { + border-color: @accent; + } + + /* checkboxes */ + input + label span[class$="checkboxFacade__facade"] { + border-color: @surface2; + background-color: @base; + } + input:checked + label span[class$="checkboxFacade__facade"] { + border-color: @surface2; + background-color: @text; + color: @base; + } + + /* toggle switches */ + input + label [class*="toggleFacade__facade"] { + border-color: @surface1; + background-color: @surface0; + span[class$="__iconToggle"] { + &::before { + background-color: @text; + border-color: @surface2; + } + svg { + color: @mantle; + } + } + } + input:checked + label [class*="toggleFacade__facade"] { + border-color: @surface1; + background-color: @green; + span[class$="__iconToggle"] { + &::before { + background-color: @mantle; + border-color: @green; + } + svg { + color: @green; + } + } + } + + input + label span[class$="label"] { + color: @text; + } + + /* dropdown menu buttons */ + [class$="textInput__facade"] { + color: @text; + background-color: transparent; + border-color: @surface2; + input { + color: @text !important; + } + } + select { + color: @text; + border-color: @surface2; + background-color: @base; + } + + /* notifications */ + .ic-notification { + color: @text; + box-shadow: 0 1px 6px @surface1; + .ic-notification__content { + background-color: @base; + } + i { + color: @crust; + } + } + + .ui-state-warning, + .dialog-warning .ui-dialog-titlebar, + .dialog-warning .ui-datepicker .ui-datepicker-header, + .ui-datepicker .dialog-warning .ui-datepicker-header { + border-color: @red; + background: none; + color: @text; + } + + /* alerts */ + div[class*="view-alert"] { + color: @text; + background-color: @base; + border-color: @accent; + > div { + border-color: @accent; + } + > div:has(> svg) { + background-color: @accent; + } + } + + /* pdf reader */ + .Pages { + background-color: @surface0; + } + + /* ui tabs */ + .ui-tabs { + .ui-tabs-panel, + .ui-tabs-nav { + border-color: @surface1; + } + .ui-tabs-nav li.ui-state-hover, + .ui-tabs-nav li:hover, + .ui-tabs-nav li.ui-tabs-active, + .ui-tabs-nav li.ui-tabs-active.ui-state-hover, + .ui-tabs-nav li.ui-tabs-active:hover { + background-color: @base; + border-color: @surface1; + a { + color: @text; + } + } + + .ui-state-hover { + background-color: mix(@overlay2, @surface1, 20%); + } + .ui-tabs-panel { + background-color: @base; + } + #assignments { + tr .title { + border-color: @surface1; + } + } + } + + div[class$="view-tabs__container"] { + background-color: transparent; + div[class$="view-tab"] { + background-color: transparent; + color: @text; + &[aria-selected="true"] { + border-color: @surface2; + border-bottom-color: @base; + } + } + div[role="tabpanel"] > div { + background-color: transparent; + border-color: @surface1; + } + } + div[role="tab"] { + color: @text; + &[aria-selected="true"]::after { + background-color: @accent; + } + } + + /* RECENT ACTIVITY/HOME */ + .recent-activity-header, + .stream-category { + border-color: @surface1; + } + .stream-details tr:hover, + .stream_header:hover { + background-color: @hover-accent; + } + .pages.show .course-title { + color: @subtext0; + } + + /* ANNOUNCEMENTS */ + .ic-item-row { + box-shadow: @surface1 0 -1px 0 0; + box-shadow: 0 -1px @surface1, inset 0 -1px @surface1; + } + [data-testid="pill-container"] * { + color: @subtext0 !important; + } + + /* the unread badge */ + .ic-announcement-row span[class$="badge"] { + background-color: @accent; + } + + .ic-item-row__meta-content-timestamp > p { + color: @subtext0; + } + #mark_all_announcement_read { + .neutral-button(); + } + + /* DASHBOARD */ + .StickyButton-styles__root { + background-color: @accent; + span { + color: @mantle; + } + } + .NotificationBadge-styles__activityIndicator.NotificationBadge-styles__hasBadge + [class$="badge"] { + background-color: @accent; + } + .Day-styles__root { + background-color: @base; + color: @text; + h2 { + border-color: @surface1; + } + .Grouping-styles__title { + color: @blue; + background-color: @base; + &::after { + background-image: none; + } + } + .PlannerItem-styles__root { + border-color: @surface1; + color: @subtext0; + } + .PlannerItem-styles__secondary [class$="-text"] { + color: @subtext0; + } + } + #planner-today-btn, + .PlannerItem-styles__secondary button { + .neutral-button(); + } + + .CompletedItemsFacade-styles__root { + border-color: @surface1; + } + .CompletedItemsFacade-styles__contentPrimary * { + color: @blue; + } + button[data-testid="completed-items-toggle"] { + span[class$="summaryText"] { + color: inherit; + } + } + .ic-Dashboard-header { + background-color: @base; + } + .ic-Dashboard-header__layout { + background-color: @base; + border-color: @surface1; + } + .PlannerHeader-styles__root { + background-color: @base; + svg { + color: @text; + } + } + #DashboardOptionsMenu_Container button { + .flush-button(); + } + .ic-DashboardCard { + background-color: @surface0; + .ic-DashboardCard__header_content { + background-color: @surface0; + } + .ic-DashboardCard__header-button, + .ic-DashboardCard__header-button * { + background-color: transparent; + } + .ic-DashboardCard__action-badge { + background-color: @accent; + .unread_count { + background-color: @accent; + color: @base; + } + } + } + + .ToDoSidebarItem__Info li { + color: @text; + } + .Sidebar__TodoListContainer svg { + color: @text; + } + #right-side { + .h2, + h2 { + border-color: @surface1; + } + background-color: fade(@base, 80%); + .details .header { + color: @subtext0; + } + .ToDoSidebarItem__Close svg { + color: @text; + } + } + #right-side .events_list { + p { + color: @subtext0; + } + + .event-details::after { + background: linear-gradient(to right, transparent 0%, @base 80%); + } + } + .PlannerEmptyState-styles__root { + color: @text; + } + .EmptyDays-styles__root { + background-color: @base; + color: @text; + border-color: @surface2; + > h2 { + border-color: @surface1; + } + } + form[action="/logout"] button { + .neutral-button(); + } + .PlannerHeader [id^="Badge"] { + background-color: @accent; + color: @crust; + } + .Opportunity-styles__root { + background-color: transparent; + } + .Opportunity-styles__oppName { + color: @subtext1; + } + .Opportunity-styles__due, + .Opportunity-styles__points { + color: @subtext1; + } + + /* popup menus */ + span[data-position-content^="Menu"], + span[data-position-content^="Popover"] { + span[class$="arrow"] { + filter: @surface1-filter; + } + > span { + color: @text; + background-color: @surface1; + border-color: @surface2; + } + } + + .ui-menu .ui-menu-item a.ui-state-hover, + .ui-menu .ui-menu-item a.ui-state-active, + .ui-menu .ui-menu-item .ui-progressbar a.ui-widget-header, + .ui-progressbar .ui-menu .ui-menu-item a.ui-widget-header, + .ui-menu .ui-menu-item a.ui-state-focus { + color: @crust; + } + + /* color picker menu (e.g. on dashboard) */ + .ColorPicker__Actions button[class$="baseButton"]:not([id$="Apply"]) { + .neutral-button(); + } + #ColorPicker__Apply { + .accent-button(); + } + .ColorPicker__Container { + background-color: @surface1; + border-color: @surface2; + label span { + color: @subtext0; + } + } + + span[data-testid="RCE_RestoreAutoSaveModal"] { + span[class$="view--block"] { + background-color: transparent; + border-color: @surface1; + color: @text; + } + } + /* select dropdowns */ + span[data-position-content^="Popover"]:has(ul[role="listbox"]) { + border-color: @surface2; + span { + color: @text; + } + > span > span { + background-color: @surface1; + 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%); + } + } + } + } + + /* only on canvas studio apparently */ + span[data-position-content^="Drilldown"] { + border-color: @surface2; + span { + color: @text; + } + li { + background-color: @surface1; + &:not(:has([id^="DrilldownHeader-Title"])) { + &:hover, + &:focus, + &:active { + color: @base; + background-color: @accent !important; + span { + color: @base; + } + } + } + [id^="DrilldownHeader-Separator"] { + background-color: @surface2; + } + } + } + button[id^="Drilldown"] { + > span { + background-color: @base; + color: @text; + border-color: @surface2; + } + &:hover > span { + background-color: @base; + } + } + + /* dropdown menu */ + span[data-position-content^="Menu___"] { + span { + color: @text; + } + [role="menu"] { + &::before { + border-color: @accent; + } + background-color: @surface1; + span[class$="menuItemGroup__label"] { + background-color: @surface1; + } + div[class$="menuItemSeparator"] { + background-color: @surface2; + } + [role="menuitem"], + span[class$="menuItem"] { + background-color: @surface1; + &:hover, + &:focus, + &:active { + color: @base; + background-color: @accent !important; + span { + color: @base; + } + } + } + } + } + + ul[role="menu"] { + div:has(> li[role="menuitem"][data-selected="true"]) { + color: @base; + background-color: @accent !important; + span { + color: @base; + } + } + } + + /* use more noticeable color for file preview selection */ + #App *::selection { + background-color: @accent; + } + + /* ICONS */ + .nav-icon { + background-color: @base; + color: @text; + } + .ui-icon-closethick { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + /* publish icons */ + .publish-icon.publish-icon-published, + .ig-published:not(.student-view) .ig-type-icon { + color: @green; + } + svg[name="IconPublish"], + svg[name="IconBookmark"], + .icon-check { + color: @green !important; + } + svg[name="IconX"] { + color: @text; + } + + /* tree-view expand indicators */ + svg[name="IconArrowOpenEnd"], + svg[name="IconArrowOpenDown"] { + color: @text; + } + + /* unsure what the other colors are */ + span[color="success"] > svg { + color: @green; + } + + .context_module .icon-minimize { + color: @red !important; + } + + .ally-prominent-af-download-button { + @svg: escape( + 'iconAllyDownload-ICCreated with Sketch.' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + img[src="/images/svg-icons/svg_icon_download.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .standalone-icon::before { + color: @text; + } + + /* MODULES */ + .item-group-expandable, + .item-group-container { + border-color: @surface0; + background-color: @base; + } + .item-group-expandable .emptyMessage { + background-color: @base; + } + .header-bar { + background-color: @base; + } + .content, + .footer { + background-color: @base; + } + .ig-header { + background-color: @surface0; + color: @text; + border-color: @surface1; + .name { + text-shadow: 1px 1px 0 fade(@base, 50%); + color: @text; + } + } + .accessible-toggler { + color: @text; + } + .ig-list { + .ig-row { + color: @text; + background-color: @base; + border-color: @surface1; + } + .ig-row:hover { + background-color: @hover-accent; + } + } + .list-view a.active .nav-badge, + .nav-badge { + background-color: @accent; + color: @base; + } + #breadcrumbs { + background-color: @base; + } + .ic-app-nav-toggle-and-crumbs, + .item-group-condensed { + border-color: @surface1; + } + .pages.show .page-title { + color: @text; + } + #show_by_date, + #show_by_type { + + label > span { + color: @text; + } + &:checked + label > span { + background-color: @surface1; + } + } + + /* COURSES */ + .course-list-favorite-course .icon-star::before { + color: @peach; + } + .course-list-table .course-list-table-row:hover { + background-color: mix(@overlay2, @base, 20%); + } + .course-list-unpublished-course-row { + background-color: darken(@base, 5%); + .course-list-unpublished-course { + color: @red; + } + } + /* browse more courses */ + .course_text { + color: @text; + } + + /* CALENDAR */ + #calendar-app { + .agenda-wrapper { + background-color: @base; + } + table { + thead.fc-head, + .fc-head-container, + .fc-row { + border-color: @surface1; + } + .fc-day-header { + color: @text; + } + .fc-body { + background-color: @base; + } + .fc-today { + background-color: darken(@surface0, 5%); + } + .fc-divider { + border-color: @surface2; + } + } + .fc-agendaWeek-view .fc-day-grid .fc-row { + border-color: @surface1; + } + } + :is(.calendar, #calendar-drag-and-drop-container) + .fc-row + :is(.fc-content-skeleton, .fc-helper-skeleton) + td { + border-color: @surface1; + } + + #calendar-app .fc-event, + #calendar-drag-and-drop-container .fc-event { + background-color: transparent; + } + .calendar_header #create_new_event_link { + color: @text; + } + #calendar-list-holder, + #other-calendars-list-holder, + #undated-events { + background-color: @base; + } + + #minical { + color: @text; + background-color: @surface1; + border-color: @surface1; + h2, + .fc-widget-content { + color: @text; + } + .fc-view { + background-color: @base; + * { + border-color: transparent; + } + } + .fc-state-default { + color: @text; + } + .fc-toolbar { + border-color: @surface1; + } + } + #calendar-list-holder { + background-color: @base; + } + #calendars-context-list .context_list_context:hover, + #other-calendars-context-list .context_list_context:hover { + background-color: mix(@overlay2, @base, 20%); + } + #undated-events { + background-color: @base; + .event { + background-color: @base; + } + } + + .ui-datepicker .ui-datepicker-header .ui-datepicker-prev { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .ui-datepicker .ui-datepicker-header .ui-datepicker-next { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + /* INBOX */ + [data-testid="tool-bar"] { + background-color: @mantle; + border-color: @surface2; + button { + .neutral-button(); + } + } + button[data-testid="address-button"] { + .neutral-button(); + } + svg[name="IconEmail"] { + color: @text; + } + + /* left side */ + [data-testid="conversation"] { + border-color: @surface1; + span[class$="badge"] { + color: @text; + background-color: @surface1; + } + } + #inbox-conversation-holder > div > div > div { + /* each email entry */ + border-color: @surface2; + div[style~="background-color:"] { + background-color: mix(@base, @accent, 90%) !important; + } + div[style~="box-shadow:"] { + box-shadow: @accent -4px 0 0 inset !important; + } + + button[data-testid$="read-badge"] { + &::before { + border-color: @blue; + } + span svg { + color: @accent; + } + } + button[data-testid="visible-not-starred"], + button[data-testid="visible-starred"] { + .flush-button(); + } + } + [data-testid="unread-badge"] span svg { + color: @accent; + } + [data-testid="ic-blue-unread-badge"] span { + background-color: @accent; + } + + /* right side */ + span:has(> #inbox-conversation-holder) + span { + > div > div { + border-color: @surface1; + } + button { + .flush-button(); + } + } + /* compose message overlay */ + span[data-testid="compose-modal-desktop"] { + background-color: @surface0; + border-color: @surface1; + span[class$="view"]:has(label[for^="TextArea"]) { + border-color: @surface1; + textarea { + color: @text; + } + } + span[data-testid="past-messages"] div[class$="view"] { + border-color: @surface1; + } + > div[class$="modalBody"] { + button { + .neutral-button(); + } + } + > div[class$="modalFooter"] { + #send-message-button { + .accent-button(); + } + } + } + + /* COURSE CONTENT (QUIZZES, ETC) */ + #assignment_show .student-assignment-overview { + border-color: @surface1; + } + + #assignment_show .description.teacher-version { + border-color: @surface2; + } + + .assignment_header, + #assignment_student_details, + .quiz-header { + border-color: @surface2; + } + + span:has(> [class$="fileDrop__labelContent"]) { + [class$="fileDrop__labelContent"] { + border-color: @overlay1; + &:hover { + border-color: @accent; + } + } + [class$="fileDrop__layout"] * { + background-color: transparent; + } + label > span::before { + border-color: @accent; + } + } + + .question.fill_in_multiple_blanks_question .answer_group, + .question.multiple_dropdowns_question .answer_group { + border-color: @surface1; + } + .quiz-submission, + .question_editing { + background-color: @base; + border-color: @base; + } + .score_value { + color: @subtext1; + } + .question { + background-color: transparent; + } + .quiz_comment { + border-color: @surface1; + background-image: linear-gradient(to bottom, @base, @surface0); + &::before { + border-bottom-color: @surface1; + } + &::after { + border-bottom-color: @base; + } + } + #quiz_show { + ul#quiz_student_details { + border-color: @surface1; + } + .description.teacher-version { + border-color: @surface2; + } + } + .catppuccin_answer_arrow(@color, @filter) { + color: @mantle; + background-image: none; + text-shadow: none; + background-color: @color; + &::before, + &::after { + filter: @filter; + } + } + .answer_arrow.correct { + .catppuccin_answer_arrow(@green, @green-filter); + } + .answer_arrow.info { + .catppuccin_answer_arrow(@text, @text-filter); + } + .answer_arrow.incorrect { + .catppuccin_answer_arrow(@red, @red-filter); + } + #questions.assessment_results .question .answers .answer.wrong_answer { + border-color: @red; + } + #questions.assessment_results + .question + .answers + .answer.wrong_answer + .ui-selectmenu-status { + color: @red; + } + + .muted-notice { + background-color: @surface0; + background-image: linear-gradient(to bottom, @base, @surface0); + text-shadow: @base 1px 1px 1px; + border-color: @surface2; + } + .alert { + background-color: fade(@red, 15%); + span { + color: @red; + } + } + .icon-warning { + color: @red; + } + + .ic-Table { + td, + th.ic-Table--header-row { + border-color: @surface1; + } + } + table.summary { + td, + tbody th { + background-color: @base; + border-color: @surface1; + } + } + ul#question_list { + li.answered a { + color: @lavender; + } + li.marked { + &::before { + content: url("/dist/images/flagged_question-e2565888dd.png"); + filter: @yellow-filter; + } + padding-left: 6px; + background-image: none; + } + li i { + /* question mark icons */ + color: @subtext0; + } + } + #questions { + background-color: @base; + .ambrosiaContainerComponent * { + color: @text; + } + .question { + border-color: @surface1; + .flag_question { + filter: @blue-filter; + } + &.marked .flag_question { + filter: @yellow-filter; + } + .header { + background-color: @surface0; + border-color: @surface1; + .question_points_holder { + color: @subtext0; + } + } + } + .text { + background-color: @base; + } + .answers .answer { + border-color: @surface1; + } + } + .form-actions { + border-color: @surface1; + } + #last_saved_indicator { + color: @subtext1; + } + .ui-tooltip { + &::before { + border-color: transparent transparent @surface0; + } + &.horizontal::before { + border-color: transparent @surface0 transparent transparent; + } + background-color: @surface0; + } + + .module-sequence-footer .module-sequence-footer-content { + background-color: @base; + border-color: @surface1; + a { + .neutral-button(); + } + } + + /* submitting */ + #tinymce-parent-of-submission_body { + .canvas-rce__skins--root, + * { + color: @text; + } + } + .border { + border-color: @surface1; + } + + /* submission details */ + .submission-details-container { + border-color: @surface1; + } + .submission-details-comments { + .comment_author_and_date { + color: @subtext0; + } + .comments { + border-color: @surface1; + background-color: @surface0; + /* To style only the background-image, we move the background-image to ::before and then tweak the styles. */ + 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; + } + } + } + .file-upload-submission { + background-color: @surface0; + } + .submission-details-header__heading-and-grades { + border-color: @surface1; + } + .comment { + color: @text !important; + } + /* text editor */ + .tox { + * { + color: @text; + } + .tox-edit-area.active, + .tox .tox-edit-area.active iframe { + border-color: @accent; + } + .tox-split-button .tox-tbtn.tox-split-button__chevron { + background-color: transparent; + } + .tox-tbtn:focus, + .tox-split-button:focus { + background-color: fade(@overlay2, 50%); + color: @subtext0; + fill: @subtext0; + box-shadow: 0 0 0 2px @accent; + } + .tox-tbtn, + .tox-split-button, + .tox-tbtn.tox-tbtn--enabled, + .tox-split-button .tox-tbtn.tox-split-button__chevron { + &:hover, + &:active { + background-color: @surface0; + color: @subtext0; + svg { + fill: @subtext0; + } + } + } + .tox-tbtn.tox-tbtn--enabled::after { + color: @accent; + } + + .tox-mbtn:hover:not(:disabled), + .tox-mbtn:hover:not(:disabled, .tox-mbtn--active) { + background-color: @hover-button; + } + .tox-mbtn--active { + background-color: @hover-button; + } + + .tox-toolbar, + .tox-toolbar__overflow, + .tox-toolbar__primary, + .tox-editor-header, + .tox-menubar, + .tox-menubar__primary, + .tox-menubar-overlord { + background-color: @base; + } + .tox-pop { + &::after { + border-bottom-color: @surface0; + } + .tox-pop__dialog { + background-color: @surface0; + } + } + .tox-toolbar__group::after { + border-color: @surface2; + } + svg, + #Fill-1, + .tox-icon g { + fill: @text; + } + button[title="Embed Lucid Document"] image { + filter: @text-filter; + } + button[title="Embed"] svg path { + fill: @text; + } + .tox-menu { + background-color: @surface0; + border-color: @surface1; + .tox-collection__item { + color: @text; + } + } + .tox-mbtn:focus:not(:disabled) { + box-shadow: 0 0 0 2px @accent; + } + .tox-collection--list .tox-collection__group { + border-color: @surface1; + } + .tox-collection--list + .tox-collection__item--active:not( + .tox-collection__item--state-disabled + ), + .tox-collection__item--active { + background-color: mix(@accent, @base, 30%); + } + .tox-collection--list .tox-collection__item--enabled { + background-color: @surface1; + } + .tox-tbtn:focus:not(.tox-tbtn--disabled) svg { + fill: @text; + } + } + .canvas-rce__skins--root { + background-color: @base; + } + + /* equation editor */ + span[aria-label="Equation Editor"] { + div[class$="panel"] button { + .neutral-button(); + } + textarea, + math-field { + color: @text; + border-color: @surface2 !important; + } + [data-testid="mathml-preview-element"] { + color: @text; + } + button[data-testid="equation-editor-modal-done"] { + .accent-button(); + } + } + + #rubrics { + .rubric_title { + background-color: @surface0; + border-color: @surface1; + } + .rubric_container { + thead th { + background-color: @surface0; + border-color: @surface1; + } + .ratings * { + border-color: @surface1; + } + } + .rubric-footer { + border-color: @surface1; + } + } + + /* discussions */ + .headerBar { + background: @surface0; + border-color: @surface1; + } + .alert-info { + background-color: @surface0; + color: @blue; + * { + color: @blue; + } + } + .topic .entry-content { + border-color: @surface1; + } + .new-and-total-badge .new-items { + color: @base; + } + .discussion_entry > .discussion-entry-reply-area { + border-color: @surface1; + } + .discussion-reply-box { + background-color: @surface0; + border-color: @surface1; + } + .al-options { + background-color: @surface0; + border-color: @surface1; + } + + .ic-discussion-row, + .pinned-discussions-v2__wrapper, + .unpinned-discussions-v2__wrapper, + .discussions-v2__container-image, + .closed-for-comments-discussions-v2__wrapper { + border-color: @surface1; + background-color: @base; + } + .discussions-v2__container-image { + color: @text; + } + .ic-discussion-row { + box-shadow: -1px -1px @surface1, inset -1px -1px @surface1; + } + .discussion-entries { + background-color: @base; + .discussion_entry, + .toolbarView, + .entry { + background-color: @base; + border-color: @surface1; + .entry-content { + background-color: @base; + } + } + time { + color: @subtext0; + } + } + + /* new discussion redesign */ + .discussion-redesign-layout { + div[data-drawer-content^="DrawerLayout"] { + /* the header with the search bar */ + > span > div:first-child { + background-color: @base; + } + } + div[data-testid="discussion-topic-container"] > span > div { + border-color: @surface1; + } + .discussion-post-manage-discussion path { + color: @text; + } + } + + #DrawerLayoutTray { + /* split screen layout */ + background-color: @base; + border-color: @surface1; + } + button[class$="baseButton"]:has(svg[name="IconX"]) { + .flush-button(); + } + button[class$="baseButton"]:has(svg[name="IconMore"]) { + .flush-button(); + } + + .communication_message { + border-color: @surface1; + } + .communication_message div.header { + color: @subtext0; + } + span:has(> [data-testid="DiscussionEdit-container"]) { + background-color: @base; + } + [data-testid="RCEStatusBar"] { + color: @subtext0; + button { + .flush-button(); + } + > span > div { + border-color: @surface1 !important; + } + [data-btn-id="rce-editormessage-btn"] { + .neutral-button(); + } + } + button[data-testid="attach-btn"] > span { + color: @text; + } + .ic-discussion-content-container > span > span:last-child { + color: @text; + } + .discussions-container__wrapper [class$="summaryText"] { + color: @text; + } + .ic-unread-badge__unread-count { + color: @mantle; + } + .ic-unread-badge__total-count { + background-color: @surface1; + } + hr[data-testid="post-separator"] { + border-color: @surface1 !important; + } + .searchButton__container button, + .discussions-index-manage-menu > button { + .neutral-button(); + } + #add_discussion { + .accent-button(); + } + .discussions-editor + div { + button[data-testid="attach-btn"] { + .flush-button(); + } + .discussions-editor-cancel button { + .neutral-button(); + } + .discussions-editor-submit button { + .accent-button(); + } + } + .discussion-topic-reply-button button { + .accent-button(); + } + .discussion-post-manage-discussion button { + .flush-button; + } + .discussion-post-subscribe button { + .flush-button(); + } + button[data-testid="splitscreenButton"], + button[data-testid="ExpandCollapseThreads-button"] { + .neutral-button(); + } + + /* author profile picture placeholder */ + [data-testid="author_avatar"] { + background-color: @surface0; + border-color: @overlay2; + span { + color: @accent; + } + } + /* unread badges */ + .unread_dot, + #grades_summary .unread_dot, + [data-testid="is-unread"] [class$="badge"] { + background-color: @accent; + } + + /* Enhanced Assigments UI */ + + #assignments-student-footer { + background-color: @mantle !important; + border-top-color: @surface1 !important; + + #submit-button > span { + background-color: @accent; + color: @crust; + } + } + + /* Assignment status green text and circle */ + [color="success"] { + color: @green; + } + + [class*="progressCircle__track"] { + stroke: @surface1 !important; + } + [class*="progressCircle__meter"] { + stroke: @green !important; + } + + /* Upload files button */ + .submission-type-icon-contents { + &:has(svg[name="IconUpload"]) { + background-color: @accent; + + svg[name="IconUpload"] { + fill: @crust !important; + } + } + + border-color: @accent; + + &:has(svg[name="IconMore"]) { + background-color: @base; + + svg[name="IconMore"] { + fill: @accent !important; + } + } + } + [color="primary-inverse"] { + color: @crust; + } + + /* Upload files panel */ + [style*="background-color: rgb(245, 245, 245);"] { + background-color: @surface0 !important; + } + div[style]:has(> div > [data-testid="upload-pane"]) { + border-top-color: @surface2 !important; + + label[for="inputFileDrop"] { + [class*="fileDrop__labelContent"] { + border-color: @overlay1; + } + div:has(> [class*="-screenReaderContent"]) { + background-color: @base; + } + } + + div:has(> [class*="block-baseButton"]) { + background-color: @base; + border-color: @surface1; + [class*="block-baseButton"]:hover > [class$="-baseButton__content"] { + background-color: @surface0; + } + + img { + filter: @text-filter; + } + svg[name="IconFolder"] { + color: @text; + } + } + } + button[id^="webcam"] { + .neutral-button(); + } + + /* GRADES */ + .ic-Table th { + border-color: @surface2; + } + .ic-Table.ic-Table--hover-row tbody tr { + &:hover, + &.ic-Table__row--bg-neutral:hover, + &.ic-Table__row--bg-success:hover, + &.ic-Table__row--bg-alert:hover, + &.ic-Table__row--bg-danger:hover { + background-color: @hover-accent; + } + } + .react-rubric * { + color: @text; + border-color: @surface1; + background-color: transparent; + } + .react-rubric .rating-tier.selected { + .meetsMasteryShader { + background-color: @green; + .triangle { + color: @green; + background-color: transparent; + } + } + .nearMasteryShader { + background-color: @yellow; + .triangle { + color: @yellow; + background-color: transparent; + } + } + .wellBelowMasteryShader { + background-color: @red; + .triangle { + color: @red; + background-color: transparent; + } + } + } + + #grades_summary { + th.title { + border-color: @surface1; + } + tr.final_grade { + border-color: @surface2; + } + a[role="button"] { + .neutral-button(); + } + } + + .ic-Form-control.ic-Form-control--checkbox .ic-Label::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + background-color: @surface0; + border-color: @surface2; + } + .selected-assignment { + background-color: @hover-accent; + } + [data-id="submissions-comments-tray"] { + background-color: @mantle; + div:has(> a[class$="Button"]) { + color: @text; + background-color: @surface0; + } + } + #apply_select_menus { + .accent-button(); + } + #GradeSummarySelectMenuGroup label > span { + color: @text; + } + + /* PEOPLE */ + .ic-Table.ic-Table--striped tbody tr:nth-child(odd) { + background-color: @mantle; + } + + /* COURSE NOTIFICATIONS MENU */ + table[class$="view-table"], + table[class$="view-table"] :is(tr, th, td) { + background-color: @base; + } + thead > tr[class$="view-row"] { + border-color: @surface2; + } + .notifications tr > th span { + color: @text; + } + + /* SYLLABUS */ + #syllabus tr.date.related td, + #syllabus tr.date.related th, + #syllabus tr.date.selected td, + #syllabus tr.date.selected th { + background-color: @hover-accent; + } + #syllabus tr.date.date_passed td, + #syllabus tr.date.date_passed th { + background-color: @mantle; + } + #syllabus tr.detail_list td.not_last { + border-color: @surface0; + } + #immersive_reader_mount_point button, + #immersive_reader_mobile_mount_point button { + .neutral-button(); + } + + .mini_calendar { + .day { + color: @subtext0; + } + .day.has_event { + background-color: @surface0; + } + .day.today { + background-color: mix(@red, @surface0, 10%); + } + } + .mini-cal-header { + border-color: @surface1; + } + + /* FILES */ + .ef-header, + .ef-directory-header, + .ef-footer, + .ef-main .ef-folder-content { + border-color: @surface1; + } + .ef-item-row:hover { + background-color: @hover-regular; + } + .ef-item-row.ef-item-selected { + background-color: @hover-regular; + } + .ef-file-preview-header { + color: @text; + background-color: @mantle; + } + .ef-file-preview-header > * { + border-color: @surface1; + } + .ef-file-preview-button { + color: @subtext0 !important; + } + .ViewerControls { + background-color: @surface1; + } + .ViewerControls--current-page { + color: @text; + } + .AnnotationControlButton, + .AnnotationControlButton-outer { + background-color: @surface1; + border-color: @surface1; + } + .mimeClass-folder { + @svg: escape( + 'folder' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + .ef-big-icon { + filter: @text-filter; + } + .al-trigger-gray { + color: @overlay1; + } + + /* CHAT */ + /* this has terrible autogenerated css class names */ + .ctf-container > *, + .ctf-container { + background-color: @base; + } + .ctf-header, + .header-contents { + border-color: @surface1; + } + .header-contents span { + color: @text; + } + .ding-toggle { + label:has(svg[name="IconCheck"]) > span > span { + background-color: @green; + } + } + .ctf-message-input { + background-color: @base; + } + .ctf-message-input .ctf-message-input__wrapper { + background-color: @surface0; + border-color: @surface2; + input { + background-color: transparent; + } + } + + /* LOGIN PAGE */ + + .ic-flash-info, + .ic-flash-success, + .ic-flash-warning, + .ic-flash-error { + background-color: @surface0; + } + + /* ACCOUNT PAGE */ + th[class$="colHeader"] { + color: @text; + } + .feature-flag-wrapper { + tr span[class$="Text"] { + color: @text; + } + } + + /* CREATOR SIDE */ + /* not prioritized in this userstyle */ + + /* DASHBOARD */ + .unpublished_courses_redesign .ic-DashboardCard__box__header { + background-color: transparent; + border-color: @surface1; + } + /* MODULES */ + .module-publish-icon { + button > span { + background-color: transparent; + } + button:hover > span { + background-color: @hover-button; + } + } + .NewUserTutorialTray__Content > div > * { + border-color: @surface1; + } + .slick-header-column { + background-color: @surface0; + } + .slick-header-column.ui-state-default { + border-color: @surface1; + } + /* PAGES */ + button[class$="tag"] { + background-color: @surface0; + border-color: @surface1; + color: @text; + &:hover { + background-color: @surface1; + } + svg { + fill: @text; + } + } + + /* GRADEBOOK */ + .ui-state-default, + .ui-widget-header { + color: @subtext1; + } + button[data-testid="gradebook-settings-button"] { + .neutral-button(); + } + #gradebook-assignment-search, + #gradebook-student-search { + label span { + color: @subtext1; + } + } + + /* OUTCOMES */ + #outcome_management { + footer { + color: @text; + background-color: @base !important; + } + } + #management > div { + color: @subtext1; + } + .management-panel { + div[data-testid="outcome-group-container"] [class$="view"] { + border-color: @surface1; + } + svg { + fill: @text; + } + } + div[role="separator"] > div { + background-color: @surface0 !important; + } + span[class$="view-heading"], + h2, + h2 > span[class$="text"] { + color: @subtext1; + } + span[class$="billboard__message"], + h3, + h3 > span[class$="text"] { + color: @subtext0; + } + span[class$="billboard"] { + background-color: transparent; + } + + /* DISCUSSIONS */ + /* create discussion page */ + .discussions fieldset span:has(> button[data-testid="save-button"]) { + border-color: @surface1; + } + #manage-assign-to-container div[data-testid="item-assign-to-card"] { + border-color: @surface1; + } + + /* STUDIO */ + #settings_page_wrapper, + #collection_shared_content, + #collection_user_content { + background-color: @base; + span[role="contentinfo"] { + border-color: @surface1; + } + } + .CollectionShow__mediaListWrapper { + img { + background-color: transparent; + } + } + .DefaultLayout__main { + color: @text; + } + h1 { + color: @text; + } + #lti_media_picker { + nav { + background-color: @mantle; + border-block-end-color: @surface0; + } + ul a[class$="Button"] div { + color: @text; + } + li div[class$="topNavBarItem__container"]::after { + background-color: @surface1; + } + } + #media_upload_holder button img { + filter: @text-filter; + } + span[class$="toggleDetails__summary"] > span { + color: @text; + } + div[class$="toggleDetails__details"] { + color: @text; + } + + /* ASSIGNMENT CREATION */ + .page-action-list a { + border-bottom-color: @surface1; + } + + /* EXTENSIONS */ + /* BetterCampus */ + --bcsidebar-selection: @accent; + --bcbackground-0-ungradient: @base; + --bcbackground-0: @base; + --bcbackground-1-ungradient: @surface0; + --bcbackground-1: @surface0; + --bcbackground-2-ungradient: @surface1; + --bcbackground-2: @surface1; + --bcborders-ungradient: @surface0; + --bcborders: @surface0; + --bclinks-ungradient: @blue; + --bclinks: @blue; + --bctext-0-ungradient: @text; + --bctext-0: @text; + --bctext-1-ungradient: @subtext0; + --bctext-1: @subtext0; + --bctext-2-ungradient: @subtext1; + --bctext-2: @subtext1; + --bccards-ungradient: @surface0; + --bccards: @surface0; + --bcshadow: 0 0 10px 0 transparent; + } +} diff --git a/styles/chatgpt/README.md b/styles/chatgpt/README.md index 3f0e71bbce..6c52244531 100644 --- a/styles/chatgpt/README.md +++ b/styles/chatgpt/README.md @@ -10,37 +10,18 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) -## 💝 Current Maintainer(s) +## 💖 Past Maintainer - [rubyowo](https://github.com/rubyowo)   diff --git a/styles/chatgpt/assets/catwalk.webp b/styles/chatgpt/assets/catwalk.webp deleted file mode 100644 index e56f341ca2..0000000000 --- a/styles/chatgpt/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:456f297f08435b78d69673d2302f0b186e1abd0612aec9039ed509b484c10eb2 -size 86502 diff --git a/styles/chatgpt/assets/frappe.webp b/styles/chatgpt/assets/frappe.webp deleted file mode 100644 index 2cc701b975..0000000000 --- a/styles/chatgpt/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:913e1799be0996d35a3c8ec6a2f9b5430f947cf01a1280109eeeef0a9ec7caf8 -size 21814 diff --git a/styles/chatgpt/assets/latte.webp b/styles/chatgpt/assets/latte.webp deleted file mode 100644 index 17d4ca84f4..0000000000 --- a/styles/chatgpt/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:fe3bed28133f3127e24c41c8d1c2491c19e847bb6b1a877c18ec6db07d431dee -size 21952 diff --git a/styles/chatgpt/assets/macchiato.webp b/styles/chatgpt/assets/macchiato.webp deleted file mode 100644 index 31dc6633d9..0000000000 --- a/styles/chatgpt/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:68fcb2105f599ad6bf084a1a72428158949d3cb7f94e47652d29b998974ca537 -size 22880 diff --git a/styles/chatgpt/assets/mocha.webp b/styles/chatgpt/assets/mocha.webp deleted file mode 100644 index 26150fe7ac..0000000000 --- a/styles/chatgpt/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c1f1306bd8c30da28472827b74c1a6d0647908c092f6609c448d1250b113ec17 -size 23440 diff --git a/styles/chatgpt/catppuccin.user.css b/styles/chatgpt/catppuccin.user.css deleted file mode 100644 index 041aa4aced..0000000000 --- a/styles/chatgpt/catppuccin.user.css +++ /dev/null @@ -1,292 +0,0 @@ -/* ==UserStyle== -@name ChatGPT Catppuccin -@namespace github.com/catppuccin/userstyles/styles/chatgpt -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/chatgpt -@version 0.0.1 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chatgpt/catppuccin.user.css -@description Soothing pastel theme for ChatGPT -@author Catppuccin -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] -==/UserStyle== */ -@-moz-document domain("chat.openai.com") { - .light body, - .light html { - #catppuccin(@lightFlavor); - } - - :root, - .dark body, - .dark html { - #catppuccin(@darkFlavor); - } - - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - #catppuccin(@lookup) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - - /* Main page */ - div[class*="bg-gray-"]:not([class*="bg-gray-900"]):not( - [class*="bg-gray-700"] - ):not(.bg-black .bg-gray-800), - div[class*="bg-vert-dark-gradient"] { - background: @base !important; - } - - /* Sidebar */ - div[class*="bg-gray-900"] { - background-color: @mantle !important; - } - - .bg-gray-900 .bg-gray-800 { - background-color: @surface0 !important; - } - - .bg-gradient-to-l { - background: none; - } - - /* Upgrade Plan */ - .shim-yellow { - display: none; - } - - /* Search */ - div[class*="bg-gray-700"] { - background-color: @surface0 !important; - } - - [class*="text-gray-"], - [class*="text-white"]:not(.btn-primary .text-white) { - color: @text !important; - } - - div[class*="border-gray"], - div[class*="border-white"] { - border-color: @overlay0 !important; - } - - input::placeholder, - textarea::placeholder { - color: @overlay0; - } - - input, - textarea { - color: @text; - } - - [class*="bg-white/5"] { - background-color: @surface0 !important; - } - - .px-3.py-3, - .pt-3 { - background: @mantle !important; - } - - .px-3.py-3:hover { - background: @base !important; - } - /* Bot messages */ - .prose { - --tw-prose-body: @text !important; - --tw-prose-bold: @text !important; - --tw-prose-code: @text !important; - --tw-prose-links: @text !important; - --tw-prose-headings: @overlay1 !important; - } - - .bg-black { - background-color: @crust !important; - } - - .bg-black .bg-gray-800 { - background-color: @surface0 !important; - } - - code.hljs, - code[class*="language-"], - pre[class*="language-"] { - color: @text !important; - } - - /* Buttons */ - .btn-neutral { - background-color: @surface1 !important; - color: @text !important; - } - - .btn-primary { - background-color: @green !important; - color: @crust !important; - } - - .btn-primary .text-white { - color: @crust !important; - } - - .btn-danger { - background-color: @red !important; - color: @crust !important; - } - - .text-2xl { - color: @text !important; - } - - .dark [class*="bg-yellow-"] { - color: @crust !important; - } - - .light [class*="bg-yellow-"] { - color: @text !important; - } - - [class*="text-green"] { - color: @green !important; - } - } -} diff --git a/styles/chatgpt/catppuccin.user.less b/styles/chatgpt/catppuccin.user.less new file mode 100644 index 0000000000..170f3ea9e3 --- /dev/null +++ b/styles/chatgpt/catppuccin.user.less @@ -0,0 +1,242 @@ +/* ==UserStyle== +@name ChatGPT Catppuccin +@namespace github.com/catppuccin/userstyles/styles/chatgpt +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/chatgpt +@version 2026.07.26 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chatgpt/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Achatgpt +@description Soothing pastel theme for ChatGPT +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("chatgpt.com") { + // TODO: Codemirror syntax highlighting. + + .light { + #catppuccin(@lightFlavor); + } + + .dark { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + * { + --text-primary: @text; + --text-secondary: @subtext1; + --text-tertiary: @subtext0; + --text-quaternary: @overlay2; + --bg-primary: @base; + --bg-secondary: @surface0; + --bg-tertiary: @surface1; + + --bg-secondary-surface: @mantle; // sidebar + + --bg-elevated-primary: @base; // settings main panel + --bg-elevated-secondary: @mantle; + + --bg-tooltip: @crust; + + --main-surface-primary: @base; + --main-surface-secondary: @surface0; + --main-surface-tertiary: @surface1; + --interactive-bg-secondary-hover: @surface1; + --interactive-bg-secondary-press: @surface0; + + --interactive-label-accent-default: @accent; // some dropdowns in settings + + --border-light: @surface0; + --border-default: @surface1; + --border-medium: @surface2; + --interactive-border-focus: @overlay0; + + --theme-user-msg-bg: @surface0; + --theme-user-msg-text: @text; + --theme-submit-btn-bg: @accent; + --theme-submit-btn-text: @base; + + --theme-secondary-btn-bg: @surface1; + --theme-secondary-btn-text: @text; + + --sidebar-surface: @mantle; // modal backgrounds + --sidebar-surface-primary: @mantle; // syntax highlighted code block backgrounds + + --surface-hover: @surface0; // some button hovers + + --icon-tertiary: @overlay2; + + --text-status-error: @red; + + // chat input prompt border + --shadow-color-1: fade(@mantle, 50%); + --shadow-color-2: fade(@text, 80%); + + .__menu-item[data-sidebar-item] { + --menu-item-highlighted: @surface0; + } + + .__menu-item[data-color="danger"] { + --menu-item-highlighted: fade(@red, 20%); + --menu-item-active: fade(@red, 30%); + --menu-item-open: fade(@red, 30%); + } + + /* Markdown */ + + /* Inline code */ + code:not(pre > code) { + background-color: @surface0; + } + + code[class*="language-"], + pre[class*="language-"], + code.hljs { + color: @text !important; + } + + /* Components */ + + .btn-primary { + background-color: @text; + color: @base; + } + + .btn-purple { + color: @base; + background-color: @accent; + + &:hover { + background-color: lighten(@accent, 5%); + } + + &:focus, &:active { + background-color: darken(@accent, 5%); + } + } + + .btn-danger-outline { + color: @red; + border-color: @red; + } + + .btn-ghost { + &:not(:disabled) { + &:hover { + background-color: @surface0; + } + } + } + + /* Dark Overrides */ + .bg-token-bg-primary { + background-color: var(--bg-primary); + } + .bg-token-main-surface-primary { + background-color: var(--main-surface-primary); + } + .bg-token-sidebar-surface { + background-color: var(--sidebar-surface); + } + + /* Tailwind Utilities */ + .__tailwind-utility(@color, @shade, @value) { + .text-@{color}-@{shade}, + .dark\:text-@{color}-@{shade} { + color: @value; + } + .bg-@{color}-@{shade}, + .dark\:bg-@{color}-@{shade} { + background-color: @value; + } + .border-@{color}-@{shade} { + border-color: @value; + } + .radix-state-checked\:bg-@{color}-@{shade}[data-state="checked"] { + background-color: @value; + } + } + + .__tailwind-utility(green, 600, @green); // confirmation toasts + .__tailwind-utility(red, 500, @red); // failure toasts + .__tailwind-utility(blue, 400, @accent); // toggled checkmarks + .__tailwind-utility(gray, 600, @overlay0); // untoggled checkmarks + .__tailwind-utility(gray, 500, @overlay2); // faint text in/and dividers + + .text-white { + color: @base; + } + + .bg-black { + background-color: @mantle; + } + } + } +} + +@-moz-document domain("auth.openai.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + color: @text; + + background-color: @base; + --main-page-background: @base; + + // Logo + a[href="https://chatgpt.com"] > svg { + filter: @text-filter; + } + + --text-primary: @text; + --text-secondary: @subtext1; + --text-tertiary: @subtext0; + --text-placeholder: @subtext0; // form field labels above the input (e.g. "Email" and "Password") + + --accent-blue: @accent; + --link: @accent; + + --border-medium: @surface2; + + --button-primary-background: @text; + --button-primary-hover: @subtext1; + --button-text-on-primary: @base; + + --button-outline-hover: @surface0; + + --gray-100: @surface2; // divider lines + + input { + color: @text; + } + + [class*="_toggleVisibilityButton"]:where(:hover, :focus-visible)::before { + background-color: @surface0; + } + + [data-overlay-container] [class*="_tooltip"] { + --tooltip-background-color: @mantle !important; + --tooltip-color: @text !important; + } + } +} diff --git a/styles/chatreplay/README.md b/styles/chatreplay/README.md index 6fac7f176a..575a88c34b 100644 --- a/styles/chatreplay/README.md +++ b/styles/chatreplay/README.md @@ -10,39 +10,18 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
+## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). - - -## 💝 Current Maintainer(s) +## 💝 Current Maintainer - [AnubisNekhet](https://github.com/AnubisNekhet) +  

diff --git a/styles/chatreplay/assets/catwalk.webp b/styles/chatreplay/assets/catwalk.webp deleted file mode 100644 index 777b2920fb..0000000000 --- a/styles/chatreplay/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9a2f4d528c7d7629767c5aad2ce7394a8afcbb0137e7da581ff5aca5a2d8557d -size 1148418 diff --git a/styles/chatreplay/assets/frappe.webp b/styles/chatreplay/assets/frappe.webp deleted file mode 100644 index d44fa5d3fc..0000000000 --- a/styles/chatreplay/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:effc7fc8f72dc83c70dd3934891575ab64481d212a8bfde5a94f791d84b83748 -size 156824 diff --git a/styles/chatreplay/assets/latte.webp b/styles/chatreplay/assets/latte.webp deleted file mode 100644 index 3275f36209..0000000000 --- a/styles/chatreplay/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f21d5bc63f919e0008a78d2092f2e3f22971d6688cada3f77705a90ecdf2eeb3 -size 151150 diff --git a/styles/chatreplay/assets/macchiato.webp b/styles/chatreplay/assets/macchiato.webp deleted file mode 100644 index 0297ab6d8d..0000000000 --- a/styles/chatreplay/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:209c6a9f13b923f0b49ea02cd1d70d26edf4a853a3a6c479c3096223b670b932 -size 156798 diff --git a/styles/chatreplay/assets/mocha.webp b/styles/chatreplay/assets/mocha.webp deleted file mode 100644 index 9b544b13cd..0000000000 --- a/styles/chatreplay/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:41bcda7862720b095c656d44c28feb6ad4df44ab1a2456d44292498b7784db0d -size 161576 diff --git a/styles/chatreplay/catppuccin.user.css b/styles/chatreplay/catppuccin.user.css deleted file mode 100644 index fa2728d774..0000000000 --- a/styles/chatreplay/catppuccin.user.css +++ /dev/null @@ -1,294 +0,0 @@ -/* ==UserStyle== -@name ChatReplay Catppuccin -@namespace github.com/catppuccin/userstyles/styles/chatreplay -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/chatreplay -@version 0.0.1 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chatreplay/catppuccin.user.css -@description Soothing pastel theme for ChatReplay - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent Color" [ "rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green*", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Grey" ] - -@var range bg-opacity "Background Opacity" [0.2 , -0.05 , 1 , 0.05] -@var range bg-blur "Background Blur" [20, 0, 100, 1, 'px'] -==/UserStyle== */ - -@-moz-document domain("chatreplay.stream") { - :root[dark] #chat-container { - #catppuccin(@darkFlavor, @accentColor, chat); - } - :root #chat-container { - #catppuccin(@lightFlavor, @accentColor, chat); - } - @media (prefers-color-scheme: light) { - :root { - #catppuccin(@lightFlavor, @accentColor, base); - } - } - @media (prefers-color-scheme: dark) { - :root { - #catppuccin(@darkFlavor, @accentColor, base); - } - } - - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - } - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - } - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - } - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - } - } - - - #catppuccin(@lookup, @accent-color, @platform) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent: @catppuccin[@@lookup][@@accent-color]; - - & when (@platform = chat) { - & { - a, i { - color: @accent; - } - color: @text; - --text-color: @text; - --timestamp-color: @subtext1; - --bg-color: @base; - --bg-color-transparent: fade(@base, 10%); - --settings-bg-color: @mantle; - --btn-bg-color: @surface0; - --bg-color-highlight: @surface0; - --scrollbar-thumb: @surface0; - --btn-hover-bg: @surface1; - --link-color: @accent; - --border-color: @surface0; - --settings-shadow: 0 4px 8px rgba(@crust,.4), 0 0 4px rgba(@crust,.4); - .message-notice { - border-left: 4px solid @accent; - } - .message--highlighted a { - color: @accent; - } - .message--highlighted { - background: @accent; - border: 4px solid @accent; - color: @base; - text-shadow: none - } - .red-dot:after { - background: @red; - } - &[overlay] { - --bg-color: rgba(@base,var(--overlay-opacity)); - --bg-color-highlight: rgba(@base,max(.4, calc(var(--overlay-opacity)*1.2))); - --text-shadow: -1px -1px 0px @base, 0px -1px 0px @base, 1px -1px 0px @base, -1px 0px 0px @base, 1px 0px 0px @base, -1px 1px 0px @base, 0px 1px 0px @base, 1px 1px 0px @base; - --text-color: @text; - } - .resume-scroll { - background-color: @surface0; - } - } - @keyframes rotating { - 0% { - transform: rotate(0) - } - - to { - transform: rotate(360deg); - scale: 1.5; - fill: @red; - } - } - } - & when (@platform = base) { - & { - background-color: @base; - color: @text; - } - body { - color: @text; - } - .card { - background: fade(@crust, 80%) - } - .card.c1cw4bqg.c1cw4bqg { - color: @subtext0; - } - a, i { - color: @accent; - } - button.gradient, .btn.gradient { - background: linear-gradient(45deg, @accent, spin(@accent, 45)); - color: @base; - text-shadow: none; - } - button:not(.custom), .btn { - background: @surface0; - text-shadow: none; - color: @text; - } - .item.zmyc33:hover, .item.active.zmyc33 { - background-color: @surface0; - } - .video-title.damcrq, .logo-text.c1j5psx1.c1j5psx1 { - color: @text; - } - [d="M 4,0 1,3 v 10 h 4 v 3 l 3,-3 h 2 L 15,8 V 0 Z m 10,7 -3,3 H 9 L 7,12 V 10 H 5 V 1 h 9 z"], [d="m 8.5,3 3,2 -3,2 z"] { - fill: @accent; - } - [d="m 4,1 h 10 v 7 l -4,4 H 4 Z"] { - fill: @base; - } - .delete.c19loos5.c19loos5 { - border: 1px solid @red; - } - .mark.z8oy0d.z8oy0d { - background: @accent; - color: @base; - } - .bg.c1ejz165.c1ejz165 { - opacity: @bg-opacity; - filter: blur(@bg-blur); - } - .topbar-container.c1j5psx1.c1j5psx1 { - border-bottom: none; - } - #inner-a.tmgko.tmgko { - background: @mantle; - } - } - } -} diff --git a/styles/chatreplay/catppuccin.user.less b/styles/chatreplay/catppuccin.user.less new file mode 100644 index 0000000000..c0823f028c --- /dev/null +++ b/styles/chatreplay/catppuccin.user.less @@ -0,0 +1,171 @@ +/* ==UserStyle== +@name ChatReplay Catppuccin +@namespace github.com/catppuccin/userstyles/styles/chatreplay +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/chatreplay +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chatreplay/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Achatreplay +@description Soothing pastel theme for ChatReplay +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] + +@var range bg-opacity "Background Opacity" [0.2 , -0.05 , 1 , 0.05] +@var range bg-blur "Background Blur" [20, 0, 100, 1, 'px'] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-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); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor, base); + } + } + + #catppuccin(@flavor, @platform) { + #lib.palette(); + #lib.defaults(); + + & when (@platform = chat) { + a:not(.username), + i { + color: @accent; + } + color: @text; + --text-color: @text; + --timestamp-color: @subtext1; + --bg-color: @base; + --bg-color-transparent: fade(@base, 10%); + --settings-bg-color: @mantle; + --btn-bg-color: @surface0; + --bg-color-highlight: @surface0; + --scrollbar-thumb: @surface0; + --btn-hover-bg: @surface1; + --link-color: @accent; + --border-color: @surface0; + --settings-shadow: 0 4px 8px fade(@crust, 40%), 0 0 4px fade(@crust, 40%); + .message-notice { + border-left-color: @accent; + } + .message--highlighted a { + color: @accent; + } + .message--highlighted { + background: @accent; + border-color: @accent; + color: @base; + text-shadow: none; + } + .red-dot::after { + background: @red; + } + &[overlay] { + --bg-color: rgba(@base, var(--overlay-opacity)); + --bg-color-highlight: rgba( + @base, + max(0.4, calc(var(--overlay-opacity) * 1.2)) + ); + --text-shadow: + -1px -1px 0px @base, 0px -1px 0px @base, 1px -1px 0px @base, -1px 0px + 0px @base, 1px 0px 0px @base, -1px 1px 0px @base, 0px 1px 0px @base, + 1px 1px 0px @base; + --text-color: @text; + } + .resume-scroll { + background-color: @surface0; + } + } + @keyframes rotating { + 0% { + transform: rotate(0); + } + + 100% { + transform: rotate(360deg); + scale: 1.5; + fill: @red; + } + } + + & when (@platform = base) { + background-color: @base; + color: @text; + + body { + color: @text; + } + .card { + background: fade(@crust, 80%); + } + .card.c1cw4bqg.c1cw4bqg { + color: @subtext0; + } + a, + i { + color: @accent; + } + button.gradient, + .btn.gradient { + background: linear-gradient( + 45deg, + @accent, + spin(@accent, 45) + ); + color: @base; + text-shadow: none; + } + button:not(.custom), + .btn { + background: @surface0; + text-shadow: none; + color: @text; + } + .item.zmyc33:hover, + .item.active.zmyc33 { + background-color: @surface0; + } + .video-title.damcrq, + .logo-text.c1j5psx1.c1j5psx1 { + color: @text; + } + [d="M 4,0 1,3 v 10 h 4 v 3 l 3,-3 h 2 L 15,8 V 0 Z m 10,7 -3,3 H 9 L 7,12 V 10 H 5 V 1 h 9 z"], + [d="m 8.5,3 3,2 -3,2 z"] { + fill: @accent; + } + [d="m 4,1 h 10 v 7 l -4,4 H 4 Z"] { + fill: @base; + } + .delete.c19loos5.c19loos5 { + border-color: @red; + } + .mark.z8oy0d.z8oy0d { + background: @accent; + color: @base; + } + .bg.c1ejz165.c1ejz165 { + opacity: @bg-opacity; + filter: blur(@bg-blur); + } + // .topbar-container.c1j5psx1.c1j5psx1 { + // border-bottom: none; + // } + #inner-a.tmgko.tmgko { + background: @mantle; + } + } + } +} diff --git a/styles/chess.com/README.md b/styles/chess.com/README.md index b01aeacf49..beae41cc0c 100644 --- a/styles/chess.com/README.md +++ b/styles/chess.com/README.md @@ -10,40 +10,21 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) -## 💝 Current Maintainer(s) +## 💖 Past Maintainers +- [skelebro1](https://github.com/skelebro1) +- [isabelroses](https://github.com/isabelroses) - [coldenate](https://github.com/coldenate) -- [Isabel](https://github.com/isabelroses) -- [skele](https://github.com/skelebro1)   diff --git a/styles/chess.com/assets/base/b/bb.png b/styles/chess.com/assets/base/b/bb.png deleted file mode 100644 index fcf4c29084..0000000000 --- a/styles/chess.com/assets/base/b/bb.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:17f3966c1ebe4c53ea448e4a46ed2ba119a1fac123732ae5eb1bb5df73cec348 -size 1395 diff --git a/styles/chess.com/assets/base/b/bk.png b/styles/chess.com/assets/base/b/bk.png deleted file mode 100644 index 316f437e87..0000000000 --- a/styles/chess.com/assets/base/b/bk.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:19962633023e6c23cff4d2dbb74791ad80396a0456f9c8321b5e045c040ad3e1 -size 1453 diff --git a/styles/chess.com/assets/base/b/bn.png b/styles/chess.com/assets/base/b/bn.png deleted file mode 100644 index 244524a07a..0000000000 --- a/styles/chess.com/assets/base/b/bn.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b592d594ec7980e44ab3a55b9e2a37a4d0d909b6efc7c7c408534c6096d0b768 -size 1563 diff --git a/styles/chess.com/assets/base/b/bp.png b/styles/chess.com/assets/base/b/bp.png deleted file mode 100644 index 964a6e05f3..0000000000 --- a/styles/chess.com/assets/base/b/bp.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:1004722f7697c28779a4ccec503c3452a2515478f9b563cf991a8ecd9b971a5e -size 1168 diff --git a/styles/chess.com/assets/base/b/bq.png b/styles/chess.com/assets/base/b/bq.png deleted file mode 100644 index 6d86f98ad1..0000000000 --- a/styles/chess.com/assets/base/b/bq.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:91daa3ecc466f723cd9ce698c1e463de32e652c9d7f83dfcc26e8a1c42130c76 -size 1901 diff --git a/styles/chess.com/assets/base/b/br.png b/styles/chess.com/assets/base/b/br.png deleted file mode 100644 index a007aa1e18..0000000000 --- a/styles/chess.com/assets/base/b/br.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4e5cf795f5c4f6dbc2dee061981b0276d2f2e977fabadc3669a384e8b996c6ac -size 1303 diff --git a/styles/chess.com/assets/base/board.png b/styles/chess.com/assets/base/board.png deleted file mode 100644 index 81537ada2e..0000000000 --- a/styles/chess.com/assets/base/board.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:d9f70b1ce1add395a8e96ef86eb5c89d19f81724b66adff1a7fd4fb8bfb3db6f -size 848 diff --git a/styles/chess.com/assets/base/colorboard.png b/styles/chess.com/assets/base/colorboard.png deleted file mode 100644 index 58d3696ab1..0000000000 --- a/styles/chess.com/assets/base/colorboard.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0b4044fb478a75ab6e7f42965f2501c690628293ee9da4c74c01fa0db961312e -size 3299 diff --git a/styles/chess.com/assets/base/w/wb.png b/styles/chess.com/assets/base/w/wb.png deleted file mode 100644 index 9263f9e74d..0000000000 --- a/styles/chess.com/assets/base/w/wb.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:02ae27a6bda80a3e1d556f272f0673a2382b07fc1a2ce91c0d340bef30a52d3e -size 1643 diff --git a/styles/chess.com/assets/base/w/wk.png b/styles/chess.com/assets/base/w/wk.png deleted file mode 100644 index b462d31024..0000000000 --- a/styles/chess.com/assets/base/w/wk.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ff7e0abfd0ed4cb50f07a15716d8bd67c2f19b3a94361eebcd79895ac7ad0e78 -size 1707 diff --git a/styles/chess.com/assets/base/w/wn.png b/styles/chess.com/assets/base/w/wn.png deleted file mode 100644 index 8f34bfd8d4..0000000000 --- a/styles/chess.com/assets/base/w/wn.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:70e80ab4cd34373f354fb46e0d42dd223652ffaa1bc216581a230f6c5eadda4e -size 1682 diff --git a/styles/chess.com/assets/base/w/wp.png b/styles/chess.com/assets/base/w/wp.png deleted file mode 100644 index e7b5698879..0000000000 --- a/styles/chess.com/assets/base/w/wp.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e701753136fe460125bb1edf2d5746cae16387c0c3e8d934b14616202dbfc64e -size 1183 diff --git a/styles/chess.com/assets/base/w/wq.png b/styles/chess.com/assets/base/w/wq.png deleted file mode 100644 index bfbb71c170..0000000000 --- a/styles/chess.com/assets/base/w/wq.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:55a19926673f15637881e2b16c4a34d473ade9e4eebeb804c93f4afbe5c346ba -size 2171 diff --git a/styles/chess.com/assets/base/w/wr.png b/styles/chess.com/assets/base/w/wr.png deleted file mode 100644 index 0a754f318f..0000000000 --- a/styles/chess.com/assets/base/w/wr.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:bde0be75f74114eb1ffe781ec15d999ecc318b30e51e8e4c1933c192428c054c -size 1490 diff --git a/styles/chess.com/assets/catwalk.webp b/styles/chess.com/assets/catwalk.webp deleted file mode 100644 index 7618bb8906..0000000000 --- a/styles/chess.com/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:222cc0947504de46fe00a085110efc78f6fa53ce9b44789765ca3947802b3f45 -size 150756 diff --git a/styles/chess.com/assets/frappe.webp b/styles/chess.com/assets/frappe.webp deleted file mode 100644 index 7feb580de6..0000000000 --- a/styles/chess.com/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f2acbff573f21bbfded7643a5a429f1588a7d13d42bc1cb5002fa565fdd0dec7 -size 132210 diff --git a/styles/chess.com/assets/frappe/b/bb.png b/styles/chess.com/assets/frappe/b/bb.png deleted file mode 100644 index 6289170102..0000000000 --- a/styles/chess.com/assets/frappe/b/bb.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:23fb1dc34abdd37519f2599a9fb629d7058c145acad996b2d87cefd46ac4b018 -size 3249 diff --git a/styles/chess.com/assets/frappe/b/bk.png b/styles/chess.com/assets/frappe/b/bk.png deleted file mode 100644 index 0148ad8c06..0000000000 --- a/styles/chess.com/assets/frappe/b/bk.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3835d2041ff5cbbe592c038c7890246ade959658ff14874a2f8eda3af76fe79b -size 3323 diff --git a/styles/chess.com/assets/frappe/b/bn.png b/styles/chess.com/assets/frappe/b/bn.png deleted file mode 100644 index d084b319df..0000000000 --- a/styles/chess.com/assets/frappe/b/bn.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:5a715e49cf19e6b23f93fca069387cd2d7f752328c37660330fd5acd17baa1ca -size 3343 diff --git a/styles/chess.com/assets/frappe/b/bp.png b/styles/chess.com/assets/frappe/b/bp.png deleted file mode 100644 index a175ee38c8..0000000000 --- a/styles/chess.com/assets/frappe/b/bp.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0425e2818a6e8ba8e7804c47435e0c30e6bb70ebf3959427ab8d1d813ec1f671 -size 2606 diff --git a/styles/chess.com/assets/frappe/b/bq.png b/styles/chess.com/assets/frappe/b/bq.png deleted file mode 100644 index 3804650671..0000000000 --- a/styles/chess.com/assets/frappe/b/bq.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:dad984bff15e9b9cf4943962d1e0739537e515a281e972d4a765656d779abc8e -size 4023 diff --git a/styles/chess.com/assets/frappe/b/br.png b/styles/chess.com/assets/frappe/b/br.png deleted file mode 100644 index 7127a48b88..0000000000 --- a/styles/chess.com/assets/frappe/b/br.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e06c1af2d6fefe677e8d712227b40dffb18e448aba5fa521296b621db6f732c6 -size 2954 diff --git a/styles/chess.com/assets/frappe/blue.png b/styles/chess.com/assets/frappe/blue.png deleted file mode 100644 index 6bf183b08e..0000000000 --- a/styles/chess.com/assets/frappe/blue.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:053a6f91c29db63209922ba82c590c7a462566256cea3a1891dc3214ea8c9673 -size 28327 diff --git a/styles/chess.com/assets/frappe/flamingo.png b/styles/chess.com/assets/frappe/flamingo.png deleted file mode 100644 index 10e9b03532..0000000000 --- a/styles/chess.com/assets/frappe/flamingo.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6a206d8edcb33ed1124f2f537c2430219b4ce90bc026dc1585a653a451e47656 -size 28317 diff --git a/styles/chess.com/assets/frappe/green.png b/styles/chess.com/assets/frappe/green.png deleted file mode 100644 index 7eaa208fc3..0000000000 --- a/styles/chess.com/assets/frappe/green.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7a5ae12aefb9aa7ef379c6f55da121a0ddc75c206c1d94a1bb2f2a5c6abca05a -size 28328 diff --git a/styles/chess.com/assets/frappe/lavender.png b/styles/chess.com/assets/frappe/lavender.png deleted file mode 100644 index 0aa1f667e2..0000000000 --- a/styles/chess.com/assets/frappe/lavender.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:aab0d67b0effbf90701d91404a0a5fd077bd7f219f2dee4de479128d2b84b94f -size 28328 diff --git a/styles/chess.com/assets/frappe/maroon.png b/styles/chess.com/assets/frappe/maroon.png deleted file mode 100644 index 088c7c2111..0000000000 --- a/styles/chess.com/assets/frappe/maroon.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:331b152f11b24177136f9078f9be98a78389684147d22423a4947ee87be10644 -size 28322 diff --git a/styles/chess.com/assets/frappe/mauve.png b/styles/chess.com/assets/frappe/mauve.png deleted file mode 100644 index edd9ff3c40..0000000000 --- a/styles/chess.com/assets/frappe/mauve.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ff39ba0bf2bb7597ad54886bdae36a888e11720ebb3242c3695690a37e16effa -size 28327 diff --git a/styles/chess.com/assets/frappe/peach.png b/styles/chess.com/assets/frappe/peach.png deleted file mode 100644 index 06e5b89b03..0000000000 --- a/styles/chess.com/assets/frappe/peach.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:cee4ee724fb875c6a87bade871f67dd2fbcec5531645813b08b1a0b82d4fb63d -size 28299 diff --git a/styles/chess.com/assets/frappe/pink.png b/styles/chess.com/assets/frappe/pink.png deleted file mode 100644 index 88e2d0c3d0..0000000000 --- a/styles/chess.com/assets/frappe/pink.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c59008de93afbc43ad17b17d39f9ef8df74f65ff5472244f4c07c7274009f88b -size 28329 diff --git a/styles/chess.com/assets/frappe/red.png b/styles/chess.com/assets/frappe/red.png deleted file mode 100644 index 3f56131e03..0000000000 --- a/styles/chess.com/assets/frappe/red.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:890f80a9e79696be7338310068c51660ac83c5b8eddf67320bd232179d27bfc3 -size 28296 diff --git a/styles/chess.com/assets/frappe/rosewater.png b/styles/chess.com/assets/frappe/rosewater.png deleted file mode 100644 index bcba4652c5..0000000000 --- a/styles/chess.com/assets/frappe/rosewater.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e71c415203590c4c55116261743ff1d6c4ee8fc9056c4c194aefd539ca36e914 -size 28330 diff --git a/styles/chess.com/assets/frappe/sapphire.png b/styles/chess.com/assets/frappe/sapphire.png deleted file mode 100644 index f541e5a2d8..0000000000 --- a/styles/chess.com/assets/frappe/sapphire.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6e99274e9fb9dce90e6d153f81280766be40669209f557f76c94a9464768767d -size 28330 diff --git a/styles/chess.com/assets/frappe/sky.png b/styles/chess.com/assets/frappe/sky.png deleted file mode 100644 index d2a5fd50f4..0000000000 --- a/styles/chess.com/assets/frappe/sky.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:77bd097f2410f1203a63d05e9c2a05cbdd265f8a469f1975871e119990f0260f -size 28323 diff --git a/styles/chess.com/assets/frappe/teal.png b/styles/chess.com/assets/frappe/teal.png deleted file mode 100644 index a5ddb48739..0000000000 --- a/styles/chess.com/assets/frappe/teal.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:540247183c99511c88ec25b308659bce8d4e5413ac04446ab9fdb45b048790c7 -size 28329 diff --git a/styles/chess.com/assets/frappe/w/wb.png b/styles/chess.com/assets/frappe/w/wb.png deleted file mode 100644 index cc652db092..0000000000 --- a/styles/chess.com/assets/frappe/w/wb.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:1cbbc043170ea2dc03264487a3ab1e083d1e7b6e1a4361022e8a3f88afc7cfc1 -size 3007 diff --git a/styles/chess.com/assets/frappe/w/wk.png b/styles/chess.com/assets/frappe/w/wk.png deleted file mode 100644 index b039582f5d..0000000000 --- a/styles/chess.com/assets/frappe/w/wk.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:aa99a6294dd5102ef75accc06170c0344850ca365544a84e941c726d0e6d68f8 -size 3357 diff --git a/styles/chess.com/assets/frappe/w/wn.png b/styles/chess.com/assets/frappe/w/wn.png deleted file mode 100644 index 961535bbb9..0000000000 --- a/styles/chess.com/assets/frappe/w/wn.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9430f95a1831d6ea2e3874a4e532b209ba1b2844eccfc114919dd2f8836d58f2 -size 2972 diff --git a/styles/chess.com/assets/frappe/w/wp.png b/styles/chess.com/assets/frappe/w/wp.png deleted file mode 100644 index 43dbe7ee7f..0000000000 --- a/styles/chess.com/assets/frappe/w/wp.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ee62937fd8e1b4d175663a406b7b8d074827a70feb703c484478e11112c25e6e -size 2288 diff --git a/styles/chess.com/assets/frappe/w/wq.png b/styles/chess.com/assets/frappe/w/wq.png deleted file mode 100644 index 69cd725663..0000000000 --- a/styles/chess.com/assets/frappe/w/wq.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:57429ebfd580d8f74fc6b10abc8c4af0a261880d4be2f7fc6c7c6513874a4364 -size 3888 diff --git a/styles/chess.com/assets/frappe/w/wr.png b/styles/chess.com/assets/frappe/w/wr.png deleted file mode 100644 index 7b471a33f4..0000000000 --- a/styles/chess.com/assets/frappe/w/wr.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6f13cd0d41a52dd764915e906cf3535a4838dbd4b433c418adebaa49d4a50edf -size 2794 diff --git a/styles/chess.com/assets/frappe/yellow.png b/styles/chess.com/assets/frappe/yellow.png deleted file mode 100644 index 4cbcda8cef..0000000000 --- a/styles/chess.com/assets/frappe/yellow.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2649d3c18b60b41c26de3104b054364ad38a59f015ee28b50660f33d4262abf8 -size 28325 diff --git a/styles/chess.com/assets/latte.webp b/styles/chess.com/assets/latte.webp deleted file mode 100644 index 11bd473b35..0000000000 --- a/styles/chess.com/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:dda80977df53c6ef5aa6d39f214d8de2e11c688fe6fb89f61054b9ad6dac0479 -size 124110 diff --git a/styles/chess.com/assets/latte/b/bb.png b/styles/chess.com/assets/latte/b/bb.png deleted file mode 100644 index ac01897864..0000000000 --- a/styles/chess.com/assets/latte/b/bb.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3c296560d7a4870ad856b921ff11e52a601b9dbae39919036ac32005b0dcce27 -size 3104 diff --git a/styles/chess.com/assets/latte/b/bk.png b/styles/chess.com/assets/latte/b/bk.png deleted file mode 100644 index 4944ed18b0..0000000000 --- a/styles/chess.com/assets/latte/b/bk.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:dcb8b5db299a7a00b49b976bdcf075a669c03627d8acb5e956e674b6619e06b3 -size 3168 diff --git a/styles/chess.com/assets/latte/b/bn.png b/styles/chess.com/assets/latte/b/bn.png deleted file mode 100644 index 5d9dfc9571..0000000000 --- a/styles/chess.com/assets/latte/b/bn.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a81be4313282fcee4f895c1419011ca29e35692285a6a05b092a51887646f7d2 -size 3131 diff --git a/styles/chess.com/assets/latte/b/bp.png b/styles/chess.com/assets/latte/b/bp.png deleted file mode 100644 index 3eb4a53753..0000000000 --- a/styles/chess.com/assets/latte/b/bp.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a056ef7253fa83525da4d350c6d243971ed8724f769e5a85948ef0c2f317e592 -size 2531 diff --git a/styles/chess.com/assets/latte/b/bq.png b/styles/chess.com/assets/latte/b/bq.png deleted file mode 100644 index 35b3484d8f..0000000000 --- a/styles/chess.com/assets/latte/b/bq.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:546da558bc352ea45883ee4d9d8ed3b23a3de283e808bcfec1f06fe7b49879a8 -size 3810 diff --git a/styles/chess.com/assets/latte/b/br.png b/styles/chess.com/assets/latte/b/br.png deleted file mode 100644 index d98022c3d4..0000000000 --- a/styles/chess.com/assets/latte/b/br.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6ecae99e4efb0983b0056a4561efd8e4a2cb992933c543fd5e94d8de48bd2bd6 -size 2695 diff --git a/styles/chess.com/assets/latte/blue.png b/styles/chess.com/assets/latte/blue.png deleted file mode 100644 index 44c4975eb3..0000000000 --- a/styles/chess.com/assets/latte/blue.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4c350275fe629f0ba17f3810b5fb7e615e576fa6a45ec27840ae4380e46462bf -size 28301 diff --git a/styles/chess.com/assets/latte/flamingo.png b/styles/chess.com/assets/latte/flamingo.png deleted file mode 100644 index 610e2ec5dd..0000000000 --- a/styles/chess.com/assets/latte/flamingo.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:66a07736e319a1f829f14918f671e8e5f41b55b84bd84167c4289359effdbd1b -size 28293 diff --git a/styles/chess.com/assets/latte/green.png b/styles/chess.com/assets/latte/green.png deleted file mode 100644 index d36f7fb889..0000000000 --- a/styles/chess.com/assets/latte/green.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f537cd2a783dcd9867d71bf78e1688ffe4626664e63eec3859a8387813b5a3ac -size 28316 diff --git a/styles/chess.com/assets/latte/lavender.png b/styles/chess.com/assets/latte/lavender.png deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/styles/chess.com/assets/latte/maroon.png b/styles/chess.com/assets/latte/maroon.png deleted file mode 100644 index aa3ab82f65..0000000000 --- a/styles/chess.com/assets/latte/maroon.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:533cdf9aad65552f7e3d8d867f0bf229df3f26a16f566d0d942007d4be303a98 -size 28319 diff --git a/styles/chess.com/assets/latte/mauve.png b/styles/chess.com/assets/latte/mauve.png deleted file mode 100644 index dd18d436b9..0000000000 --- a/styles/chess.com/assets/latte/mauve.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:bec805ed6b4030b9fdc10622eae7b7b4735f9ac1e66a3b0bf0d7a16cfb8456c0 -size 28297 diff --git a/styles/chess.com/assets/latte/peach.png b/styles/chess.com/assets/latte/peach.png deleted file mode 100644 index 6ec94b2330..0000000000 --- a/styles/chess.com/assets/latte/peach.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:fa0f7a7a39812bff6e5e7fe08322b5786bcf9b24236b7e51f75df04a192bd7fe -size 28316 diff --git a/styles/chess.com/assets/latte/pink.png b/styles/chess.com/assets/latte/pink.png deleted file mode 100644 index d11e7379a8..0000000000 --- a/styles/chess.com/assets/latte/pink.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:5c9bba9cbd280f07c5a3d3c9910c1bc870667939e903b20eae9d5533312f42e0 -size 28295 diff --git a/styles/chess.com/assets/latte/red.png b/styles/chess.com/assets/latte/red.png deleted file mode 100644 index 0492d2d8e8..0000000000 --- a/styles/chess.com/assets/latte/red.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6a96917717102925522f1edf717b6c33b225c5a118d38076cd6f3ae4e28f3d27 -size 28322 diff --git a/styles/chess.com/assets/latte/rosewater.png b/styles/chess.com/assets/latte/rosewater.png deleted file mode 100644 index 4fa28e993a..0000000000 --- a/styles/chess.com/assets/latte/rosewater.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a3c69456a8a5195e7bb69c56257e026de26274298b6b2be7c8cdf0f114c073ed -size 28297 diff --git a/styles/chess.com/assets/latte/sapphire.png b/styles/chess.com/assets/latte/sapphire.png deleted file mode 100644 index 02aef36251..0000000000 --- a/styles/chess.com/assets/latte/sapphire.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b81dac689520727bf1e6d0933e16ab2a83eba84e4752fbc0bb739a4193469155 -size 28301 diff --git a/styles/chess.com/assets/latte/sky.png b/styles/chess.com/assets/latte/sky.png deleted file mode 100644 index a242a03b77..0000000000 --- a/styles/chess.com/assets/latte/sky.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4899a34edde6afda6d8ccf228c8c982b9ba9f0994bb6137d21278e0aade86c72 -size 28294 diff --git a/styles/chess.com/assets/latte/teal.png b/styles/chess.com/assets/latte/teal.png deleted file mode 100644 index 6d98c2368b..0000000000 --- a/styles/chess.com/assets/latte/teal.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:fa19a84737aaae84332912509f6c5f937cac3eadf4020ce6548997813ae4691b -size 28297 diff --git a/styles/chess.com/assets/latte/w/wb.png b/styles/chess.com/assets/latte/w/wb.png deleted file mode 100644 index 898b0a52db..0000000000 --- a/styles/chess.com/assets/latte/w/wb.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:40759ad095760e2ce55a7981c9d1269cff6af7c74cfd3e2336762ce66051d3cd -size 3669 diff --git a/styles/chess.com/assets/latte/w/wk.png b/styles/chess.com/assets/latte/w/wk.png deleted file mode 100644 index 46f0cb73d6..0000000000 --- a/styles/chess.com/assets/latte/w/wk.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:93548e1d13d0395544fa4f8ab0333aede212675d448d1c93a585e26297dc7aaa -size 3882 diff --git a/styles/chess.com/assets/latte/w/wn.png b/styles/chess.com/assets/latte/w/wn.png deleted file mode 100644 index ab8c6385b2..0000000000 --- a/styles/chess.com/assets/latte/w/wn.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:44665c779ec4ef72926667a3db5aab386cf4262f95873d3b65e58232e3de14df -size 3529 diff --git a/styles/chess.com/assets/latte/w/wp.png b/styles/chess.com/assets/latte/w/wp.png deleted file mode 100644 index 2345881760..0000000000 --- a/styles/chess.com/assets/latte/w/wp.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:970a66b77f98bc68889bf617b59b85dcf42c30014c66ba7105b34cd1f2094e05 -size 2691 diff --git a/styles/chess.com/assets/latte/w/wq.png b/styles/chess.com/assets/latte/w/wq.png deleted file mode 100644 index 4ba1bf596a..0000000000 --- a/styles/chess.com/assets/latte/w/wq.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:faef34bcac4c1d97a288b7bea2d8de90ae00308b6adc2c215ae2f70ee00c0813 -size 4648 diff --git a/styles/chess.com/assets/latte/w/wr.png b/styles/chess.com/assets/latte/w/wr.png deleted file mode 100644 index 7bf4db9476..0000000000 --- a/styles/chess.com/assets/latte/w/wr.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:d34215d679429388d7d7658599059ab2dcc4541f5ccf5b0ccdfc18f23145d907 -size 3322 diff --git a/styles/chess.com/assets/latte/yellow.png b/styles/chess.com/assets/latte/yellow.png deleted file mode 100644 index a6931ebf9a..0000000000 --- a/styles/chess.com/assets/latte/yellow.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:22608b3f316821b010ec6a596c6cee6cfcf106d2a7a80acfd89cf65928ad1fe9 -size 28297 diff --git a/styles/chess.com/assets/macchiato.webp b/styles/chess.com/assets/macchiato.webp deleted file mode 100644 index 1b8ad17d7d..0000000000 --- a/styles/chess.com/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:640ca4dfd6b1ce6256d9a0805c2512db6058c70f34d70c96d4ab0351f67e3d7b -size 134386 diff --git a/styles/chess.com/assets/macchiato/b/bb.png b/styles/chess.com/assets/macchiato/b/bb.png deleted file mode 100644 index 1175157cbe..0000000000 --- a/styles/chess.com/assets/macchiato/b/bb.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:79361017da3e22acb1fc8f58a65c4e28d376706e92a3eea42776fa59104ab140 -size 3243 diff --git a/styles/chess.com/assets/macchiato/b/bk.png b/styles/chess.com/assets/macchiato/b/bk.png deleted file mode 100644 index e6e85c7052..0000000000 --- a/styles/chess.com/assets/macchiato/b/bk.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0a12c706b54a3fdec1c9f1661cc4b468931ce1242f5146fb28d4b64f2b45ec38 -size 3625 diff --git a/styles/chess.com/assets/macchiato/b/bn.png b/styles/chess.com/assets/macchiato/b/bn.png deleted file mode 100644 index 4b34bed72a..0000000000 --- a/styles/chess.com/assets/macchiato/b/bn.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:910235c34c6c1129913d49f4db98da4dcd8270b2cf9fb2b0e0d1987418ccd31b -size 3331 diff --git a/styles/chess.com/assets/macchiato/b/bp.png b/styles/chess.com/assets/macchiato/b/bp.png deleted file mode 100644 index 1b8175c097..0000000000 --- a/styles/chess.com/assets/macchiato/b/bp.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6154621561dc85567d709324c19567e79216d1c246f32b84566f5a806e80032c -size 2712 diff --git a/styles/chess.com/assets/macchiato/b/bq.png b/styles/chess.com/assets/macchiato/b/bq.png deleted file mode 100644 index 796758dd56..0000000000 --- a/styles/chess.com/assets/macchiato/b/bq.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c6312d5cf3bf10c523f218d5915fbf9f04181277bc082c0b16827b7f42e370cc -size 4061 diff --git a/styles/chess.com/assets/macchiato/b/br.png b/styles/chess.com/assets/macchiato/b/br.png deleted file mode 100644 index e81c0c7ebd..0000000000 --- a/styles/chess.com/assets/macchiato/b/br.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:735e02cdcdab6bb23d55bfb605fe4b1db97d0bf72b6715f369c4c4c9927f4dce -size 2910 diff --git a/styles/chess.com/assets/macchiato/blue.png b/styles/chess.com/assets/macchiato/blue.png deleted file mode 100644 index 203baf0455..0000000000 --- a/styles/chess.com/assets/macchiato/blue.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:882a1da0f97cedfb67e2ce8331eac37b7446af65ea33da805ad21b7b04c39507 -size 28331 diff --git a/styles/chess.com/assets/macchiato/flamingo.png b/styles/chess.com/assets/macchiato/flamingo.png deleted file mode 100644 index 5f6fcc553c..0000000000 --- a/styles/chess.com/assets/macchiato/flamingo.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:99096e1e9afab14f467b30d98815a195706f59865d7f4bf8b7bece87701a92ba -size 28326 diff --git a/styles/chess.com/assets/macchiato/green.png b/styles/chess.com/assets/macchiato/green.png deleted file mode 100644 index 57da448182..0000000000 --- a/styles/chess.com/assets/macchiato/green.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9824dad577f74a8dc130aa5ecd766364c744c027e2e21558d678bb29c0c5c344 -size 28329 diff --git a/styles/chess.com/assets/macchiato/lavender.png b/styles/chess.com/assets/macchiato/lavender.png deleted file mode 100644 index 9c36c6f6ca..0000000000 --- a/styles/chess.com/assets/macchiato/lavender.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6b2b04612ab5d5b9174065d17bd3068310eabf6b50fd49e090a9c0993b01bd03 -size 28323 diff --git a/styles/chess.com/assets/macchiato/maroon.png b/styles/chess.com/assets/macchiato/maroon.png deleted file mode 100644 index 0da5a30db6..0000000000 --- a/styles/chess.com/assets/macchiato/maroon.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:5ba907de08dbfe055295ce3803ab9166344aa37a6b24dda03a13dcb29d9ba48a -size 28327 diff --git a/styles/chess.com/assets/macchiato/mauve.png b/styles/chess.com/assets/macchiato/mauve.png deleted file mode 100644 index a71d99989f..0000000000 --- a/styles/chess.com/assets/macchiato/mauve.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3d8400e96674081f306be031b0468bed9d48e60658dd4646fd55d7b4098f5ff7 -size 28328 diff --git a/styles/chess.com/assets/macchiato/peach.png b/styles/chess.com/assets/macchiato/peach.png deleted file mode 100644 index b9c0db7d4c..0000000000 --- a/styles/chess.com/assets/macchiato/peach.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:dd4e18a1420f3a1a6e4aa41b61ecf4c1a3e18285d421b27bf73c23471f3d9650 -size 28324 diff --git a/styles/chess.com/assets/macchiato/pink.png b/styles/chess.com/assets/macchiato/pink.png deleted file mode 100644 index 700870b6f1..0000000000 --- a/styles/chess.com/assets/macchiato/pink.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:782c5382540a4095935b904bc4fef668abc86d394127c77c02bceb37f22a7488 -size 28330 diff --git a/styles/chess.com/assets/macchiato/red.png b/styles/chess.com/assets/macchiato/red.png deleted file mode 100644 index 957bb248bc..0000000000 --- a/styles/chess.com/assets/macchiato/red.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:dabb6eea4369a95b9320599a9f1cefd468aa76a90ace6545a09ffe999f1dd290 -size 28300 diff --git a/styles/chess.com/assets/macchiato/rosewater.png b/styles/chess.com/assets/macchiato/rosewater.png deleted file mode 100644 index e4330a77a5..0000000000 --- a/styles/chess.com/assets/macchiato/rosewater.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:d8cae8904603d138a1b9ae41fd591522573da955e47d51b66a735d3d554a858e -size 28328 diff --git a/styles/chess.com/assets/macchiato/sapphire.png b/styles/chess.com/assets/macchiato/sapphire.png deleted file mode 100644 index c2e4b3de65..0000000000 --- a/styles/chess.com/assets/macchiato/sapphire.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e6af40b15fe2ef586f75caf4132f9453954f43ce9a3a82a7f55425c0822bdfe9 -size 28328 diff --git a/styles/chess.com/assets/macchiato/sky.png b/styles/chess.com/assets/macchiato/sky.png deleted file mode 100644 index e1640f91ef..0000000000 --- a/styles/chess.com/assets/macchiato/sky.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7ddcd900760f9e40346bb9890dfb9a41fd2c458cb56047dbb9ca405206d8901b -size 28329 diff --git a/styles/chess.com/assets/macchiato/teal.png b/styles/chess.com/assets/macchiato/teal.png deleted file mode 100644 index 57650b32b7..0000000000 --- a/styles/chess.com/assets/macchiato/teal.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:330f8e656244875cb73f4b447b0f54b8a5c533f61fe53a3d1a5f54e016055bae -size 28329 diff --git a/styles/chess.com/assets/macchiato/w/wb.png b/styles/chess.com/assets/macchiato/w/wb.png deleted file mode 100644 index fddf4fe5d9..0000000000 --- a/styles/chess.com/assets/macchiato/w/wb.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2d23feb659591d710a4f9307c059ccd7424b70fe1973252134bec603f066d94b -size 3103 diff --git a/styles/chess.com/assets/macchiato/w/wk.png b/styles/chess.com/assets/macchiato/w/wk.png deleted file mode 100644 index 7700bcb8ab..0000000000 --- a/styles/chess.com/assets/macchiato/w/wk.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:207fa41c3d3d65a1a75ca317039c8bf709e89ef41116eba112da0eee9f8efee4 -size 3381 diff --git a/styles/chess.com/assets/macchiato/w/wn.png b/styles/chess.com/assets/macchiato/w/wn.png deleted file mode 100644 index 00f83d2550..0000000000 --- a/styles/chess.com/assets/macchiato/w/wn.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:1e84ab3b5f682f8f0df1a64dc550819cab5099984e629dc7308815e276d38016 -size 3109 diff --git a/styles/chess.com/assets/macchiato/w/wp.png b/styles/chess.com/assets/macchiato/w/wp.png deleted file mode 100644 index 975621c372..0000000000 --- a/styles/chess.com/assets/macchiato/w/wp.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:d3e0e7a9aaaea3defe695abbad862590b1cc2346fb5d965c608a5f1193a3513d -size 2277 diff --git a/styles/chess.com/assets/macchiato/w/wq.png b/styles/chess.com/assets/macchiato/w/wq.png deleted file mode 100644 index d4cd6d1267..0000000000 --- a/styles/chess.com/assets/macchiato/w/wq.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:24e8909e33fd3d6a5a74035cdbd6e2830ffca0a10a24a2a9db27539702dbcc76 -size 3893 diff --git a/styles/chess.com/assets/macchiato/w/wr.png b/styles/chess.com/assets/macchiato/w/wr.png deleted file mode 100644 index 2a2e61c72a..0000000000 --- a/styles/chess.com/assets/macchiato/w/wr.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f375ae2b0ac8948efa72240ccda234d0e5d52f2d51f79e341a216b8eccfb840f -size 2920 diff --git a/styles/chess.com/assets/macchiato/yellow.png b/styles/chess.com/assets/macchiato/yellow.png deleted file mode 100644 index 72eea1d7d7..0000000000 --- a/styles/chess.com/assets/macchiato/yellow.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4b6e7fa5803381e46a83f3bb80ed2e4dc9e5888f897b752d37637e4e9c9eb1fb -size 28330 diff --git a/styles/chess.com/assets/mocha.webp b/styles/chess.com/assets/mocha.webp deleted file mode 100644 index aecadef69a..0000000000 --- a/styles/chess.com/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:53d35f9cce5806e596903fdc237ca9965217a083f5aa9aa8851eba0a0cdbb933 -size 132582 diff --git a/styles/chess.com/assets/mocha/b/bb.png b/styles/chess.com/assets/mocha/b/bb.png deleted file mode 100644 index 735328c4ca..0000000000 --- a/styles/chess.com/assets/mocha/b/bb.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2831d162d07b88ab8b4a83da15cec56a6ab0bf9a112ebe1da0e146db8be5390d -size 3249 diff --git a/styles/chess.com/assets/mocha/b/bk.png b/styles/chess.com/assets/mocha/b/bk.png deleted file mode 100644 index e9bf90f84c..0000000000 --- a/styles/chess.com/assets/mocha/b/bk.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2d5b4881bb20aa8094674717db5eb19169bf12770f8356df60f75dd566b04a65 -size 3651 diff --git a/styles/chess.com/assets/mocha/b/bn.png b/styles/chess.com/assets/mocha/b/bn.png deleted file mode 100644 index db2940a39b..0000000000 --- a/styles/chess.com/assets/mocha/b/bn.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ef8dd88ec0f18bbe5e37b35b81f39c13f3cb72a3f06fa673ea275e2ccac38f9e -size 3332 diff --git a/styles/chess.com/assets/mocha/b/bp.png b/styles/chess.com/assets/mocha/b/bp.png deleted file mode 100644 index 8aec3e73cc..0000000000 --- a/styles/chess.com/assets/mocha/b/bp.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b217943ecada45d34a812b463fda20d8bd2c3039c8ad4de260b0295e07ea11e8 -size 2732 diff --git a/styles/chess.com/assets/mocha/b/bq.png b/styles/chess.com/assets/mocha/b/bq.png deleted file mode 100644 index f25209524c..0000000000 --- a/styles/chess.com/assets/mocha/b/bq.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:bd2568aa0e3f419798f7297deca1fb32af1e247f3cedd7ac2ef3daba0e1d6afa -size 4049 diff --git a/styles/chess.com/assets/mocha/b/br.png b/styles/chess.com/assets/mocha/b/br.png deleted file mode 100644 index 7e08e5387e..0000000000 --- a/styles/chess.com/assets/mocha/b/br.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:954ee8137f718d20b71cefa15f80b87369abd7e4b3a2ccba641d0a384ed9aec1 -size 2948 diff --git a/styles/chess.com/assets/mocha/blue.png b/styles/chess.com/assets/mocha/blue.png deleted file mode 100644 index 6b45737a79..0000000000 --- a/styles/chess.com/assets/mocha/blue.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:de754c691fa5c5aca9dcce9d82fe6dad0093735d5a69865c4452c57850ae4231 -size 28321 diff --git a/styles/chess.com/assets/mocha/flamingo.png b/styles/chess.com/assets/mocha/flamingo.png deleted file mode 100644 index f6305e3e3a..0000000000 --- a/styles/chess.com/assets/mocha/flamingo.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ed48f0530ec0c5ac6304f0ede8acb501b8450e290ddeab6ce74faaa8af61bb9d -size 28321 diff --git a/styles/chess.com/assets/mocha/green.png b/styles/chess.com/assets/mocha/green.png deleted file mode 100644 index 357b0c6486..0000000000 --- a/styles/chess.com/assets/mocha/green.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c110eb389aad37123877e99286fb208ab4d7a8ff3bea885b38923a8f16bc88b1 -size 28326 diff --git a/styles/chess.com/assets/mocha/lavender.png b/styles/chess.com/assets/mocha/lavender.png deleted file mode 100644 index b0598284f2..0000000000 --- a/styles/chess.com/assets/mocha/lavender.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:d11e2708e5fce0b548fab998a20f96aea74cdc4cba81689096ca690dd46da2be -size 28321 diff --git a/styles/chess.com/assets/mocha/maroon.png b/styles/chess.com/assets/mocha/maroon.png deleted file mode 100644 index 734f56fcfa..0000000000 --- a/styles/chess.com/assets/mocha/maroon.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4a605a9c185c742a1c19e37b7e66b6f4d2912fb04a9bcf7a8a4bd48bf2b59d70 -size 28315 diff --git a/styles/chess.com/assets/mocha/mauve.png b/styles/chess.com/assets/mocha/mauve.png deleted file mode 100644 index 73e16b2358..0000000000 --- a/styles/chess.com/assets/mocha/mauve.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:5e2f9eada62ace1cb353c249d7e1236e9a25494fd9dca33e0800b59989f4374c -size 28324 diff --git a/styles/chess.com/assets/mocha/peach.png b/styles/chess.com/assets/mocha/peach.png deleted file mode 100644 index 2b66690a43..0000000000 --- a/styles/chess.com/assets/mocha/peach.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:dbfe09d04ad4bbf7a8a201fbb73209f5438d0c6c57135fe49815334420216ada -size 28326 diff --git a/styles/chess.com/assets/mocha/pink.png b/styles/chess.com/assets/mocha/pink.png deleted file mode 100644 index 8265135024..0000000000 --- a/styles/chess.com/assets/mocha/pink.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:d1325d5a665d8e0f04959c3ce8469c17dba3cfd99b9f73c891166e0e4eabb7b9 -size 28325 diff --git a/styles/chess.com/assets/mocha/red.png b/styles/chess.com/assets/mocha/red.png deleted file mode 100644 index 405e42743c..0000000000 --- a/styles/chess.com/assets/mocha/red.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c389d64ededcf3a679dee3fcdca05f096d730d6c0df91374b0c28f78eea76e2d -size 28326 diff --git a/styles/chess.com/assets/mocha/rosewater.png b/styles/chess.com/assets/mocha/rosewater.png deleted file mode 100644 index a1935d9a80..0000000000 --- a/styles/chess.com/assets/mocha/rosewater.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:78f3469bd33308b536f6ac3f1d2280a5400ffc9048c5894ff1a594d4cfe01317 -size 28324 diff --git a/styles/chess.com/assets/mocha/sapphire.png b/styles/chess.com/assets/mocha/sapphire.png deleted file mode 100644 index 1e9d2c3866..0000000000 --- a/styles/chess.com/assets/mocha/sapphire.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c1a40603467d4fe110e6d85a3dc5fd03440d0ea27314c6e1c274f856acd2b60a -size 28322 diff --git a/styles/chess.com/assets/mocha/sky.png b/styles/chess.com/assets/mocha/sky.png deleted file mode 100644 index 050053f101..0000000000 --- a/styles/chess.com/assets/mocha/sky.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2f0a0f3b93bb5acb93546f324994752cb7b231ca467b4cb31ec385f177ed5ea5 -size 28322 diff --git a/styles/chess.com/assets/mocha/teal.png b/styles/chess.com/assets/mocha/teal.png deleted file mode 100644 index e5452485bd..0000000000 --- a/styles/chess.com/assets/mocha/teal.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3417ff53ca7fe248c282d0417c926d45b2c905969f39f22aefd99579baad712f -size 28328 diff --git a/styles/chess.com/assets/mocha/w/wb.png b/styles/chess.com/assets/mocha/w/wb.png deleted file mode 100644 index ca720ff0d9..0000000000 --- a/styles/chess.com/assets/mocha/w/wb.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:92429827710931867431b9d8f82ad0b8711d9b9304c75d72a9c5b75ac7e9f974 -size 2969 diff --git a/styles/chess.com/assets/mocha/w/wk.png b/styles/chess.com/assets/mocha/w/wk.png deleted file mode 100644 index 3c0d94de16..0000000000 --- a/styles/chess.com/assets/mocha/w/wk.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:20c47e09e59a1103ab2ca62026a9289297d88c9c1cba650ad1bb54a61f5ec075 -size 3379 diff --git a/styles/chess.com/assets/mocha/w/wn.png b/styles/chess.com/assets/mocha/w/wn.png deleted file mode 100644 index 98316aa1bf..0000000000 --- a/styles/chess.com/assets/mocha/w/wn.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4e34de37a7b2edc99ec664e5e06f6da8086e3b6f16abb57ea7ac23a778d4e880 -size 2978 diff --git a/styles/chess.com/assets/mocha/w/wp.png b/styles/chess.com/assets/mocha/w/wp.png deleted file mode 100644 index 5a8ee28f51..0000000000 --- a/styles/chess.com/assets/mocha/w/wp.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ab0f9c41b2bd06a0428473a485313e21204e0695f6e6a8e2bc7bf86b3089bdd7 -size 2270 diff --git a/styles/chess.com/assets/mocha/w/wq.png b/styles/chess.com/assets/mocha/w/wq.png deleted file mode 100644 index 623d82f0c9..0000000000 --- a/styles/chess.com/assets/mocha/w/wq.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:129ecf923e8e932602f404fabd72914dd938c47b57f67975acf808c9d5231504 -size 3861 diff --git a/styles/chess.com/assets/mocha/w/wr.png b/styles/chess.com/assets/mocha/w/wr.png deleted file mode 100644 index 7975e239ac..0000000000 --- a/styles/chess.com/assets/mocha/w/wr.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6f97b0ecc753e5318a61fb35b81e66d293f5f66e95f6ca16b72d1a47a8b98b12 -size 2753 diff --git a/styles/chess.com/assets/mocha/yellow.png b/styles/chess.com/assets/mocha/yellow.png deleted file mode 100644 index e9efbca861..0000000000 --- a/styles/chess.com/assets/mocha/yellow.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:fde045c037a5a7a08e585bab4fb4326cdd714811e44a6ec731d0dd45247ec1c1 -size 28323 diff --git a/styles/chess.com/catppuccin.user.css b/styles/chess.com/catppuccin.user.css deleted file mode 100644 index 27565376cc..0000000000 --- a/styles/chess.com/catppuccin.user.css +++ /dev/null @@ -1,615 +0,0 @@ -/* ==UserStyle== -@name Chess.com Catppuccin -@namespace github.com/catppuccin/userstyles/styles/chess.com -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/chess.com -@version 0.1.1 -@updateURL https://raw.githubusercontent.com/catppuccin/userstyles/main/styles/chess.com/catppuccin.user.css -@description Soothing pastel theme for Chess.com -@author Catppuccin -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Grey"] - -==/UserStyle== */ -@-moz-document domain("chess.com") { - body { - #catppuccin(@lightFlavor, @accentColor); - } - - .dark-mode { - #catppuccin(@darkFlavor, @accentColor); - } - - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - @bb: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/b/bb.png"); - @bk: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/b/bk.png"); - @bn: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/b/bn.png"); - @bp: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/b/bp.png"); - @bq: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/b/bq.png"); - @br: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/b/br.png"); - @wb: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/w/wb.png"); - @wk: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/w/wk.png"); - @wn: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/w/wn.png"); - @wp: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/w/wp.png"); - @wq: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/w/wq.png"); - @wr: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/latte/w/wr.png"); - }; - - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - @bb: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/b/bb.png"); - @bk: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/b/bk.png"); - @bn: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/b/bn.png"); - @bp: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/b/bp.png"); - @bq: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/b/bq.png"); - @br: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/b/br.png"); - @wb: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/w/wb.png"); - @wk: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/w/wk.png"); - @wn: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/w/wn.png"); - @wp: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/w/wp.png"); - @wq: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/w/wq.png"); - @wr: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/frappe/w/wr.png"); - }; - - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - @bb: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/b/bb.png"); - @bk: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/b/bk.png"); - @bn: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/b/bn.png"); - @bp: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/b/bp.png"); - @bq: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/b/bq.png"); - @br: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/b/br.png"); - @wb: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/w/wb.png"); - @wk: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/w/wk.png"); - @wn: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/w/wn.png"); - @wp: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/w/wp.png"); - @wq: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/w/wq.png"); - @wr: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/macchiato/w/wr.png"); - }; - - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - @bb: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/b/bb.png"); - @bk: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/b/bk.png"); - @bn: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/b/bn.png"); - @bp: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/b/bp.png"); - @bq: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/b/bq.png"); - @br: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/b/br.png"); - @wb: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/w/wb.png"); - @wk: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/w/wk.png"); - @wn: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/w/wn.png"); - @wp: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/w/wp.png"); - @wq: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/w/wq.png"); - @wr: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/mocha/w/wr.png"); - }; - }; - - #catppuccin(@lookup, - @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-color: @catppuccin[@@lookup][@@accent]; - - @bb: @catppuccin[@@lookup][@bb]; - @bk: @catppuccin[@@lookup][@bk]; - @bn: @catppuccin[@@lookup][@bn]; - @bp: @catppuccin[@@lookup][@bp]; - @bq: @catppuccin[@@lookup][@bq]; - @br: @catppuccin[@@lookup][@br]; - @wb: @catppuccin[@@lookup][@wb]; - @wk: @catppuccin[@@lookup][@wk]; - @wn: @catppuccin[@@lookup][@wn]; - @wp: @catppuccin[@@lookup][@wp]; - @wq: @catppuccin[@@lookup][@wq]; - @wr: @catppuccin[@@lookup][@wr]; - - & when (@lookup ="latte") { - body { - background: @base; - } - } - - & { - background: @base; - --globalBackground: @mantle !important; - --globalBackgroundOpaque: @mantle !important; - --globalSecondaryBackground: @crust !important; - --globalTertiaryBackground: @surface0 !important; - --globalAccentBackground: @accent-color !important; - --globalSecondaryAccentBackground: darken(@accent-color, 20%) !important; - --globalSiteBackground: @base !important; - --subtleButtonBackground: hsla(0, 0%, 100%, 0.16); - --globalBorder: @surface0 !important; - --globalGray: hsla(0, 0%, 100%, 0.08); - --globalGraySoft: hsla(0, 0%, 100%, 0.08); - --globalColorThemeFull: @text !important; - --globalColorThemeHigh: @text; - --globalColorThemeMid: @overlay2 !important; - --globalColorThemeLow: @overlay0 !important; - --globalColorThemeLower: @base !important; - --globalColorThemeLink: @sapphire !important; - --globalColorThemeBlueToWhite: #fff; - --globalColorThemeBlueToMid: hsla(0, 0%, 100%, 0.72); - --globalColorThemeBlueToMidHover: hsla(0, 0%, 100%, 0.85); - --globalColorThemeBlueToHigh: hsla(0, 0%, 100%, 0.85); - --globalColorThemeBlueToHighHover: #fff; - --globalColorThemeHighToMid: hsla(0, 0%, 100%, 0.72); - --globalColorThemeFullToMid: hsla(0, 0%, 100%, 0.72); - --globalColorNeutral50: rgba(0, 0, 0, 0.1); - --globalColorNeutral100: rgba(0, 0, 0, 0.2); - --globalColorNeutral200: rgba(0, 0, 0, 0.4); - --globalOverlayBackground: @base !important; - --globalColorWin: @green !important; - --globalColorDraw: @accent-color !important; - --globalColorLoss: @red !important; - } - - /* index page */ - .promo-title, - .index-title { - color: @text !important; - } - - .play-quick-links-title, - .promo-rank, - .v5-header-name, - .promo-subtitle, - #tb .toolbar-action-icon { - color: @text; - } - - .home-username-link { - color: @accent-color; - } - - .index-info-item-counter { - color: @text !important; - } - - .index-info-item { - color: @subtext0 !important; - } - - .index-quote-author .index-chess-title { - background: @accent-color !important; - color: @crust !important; - } - - .authentication-intro-levels { - --labelBackground: @surface0 !important; - --labelBackgroundHover: @surface1 !important; - - .authentication-intro-level-v5.authentication-intro-selected { - border-color: @accent-color !important; - } - } - - /* ui */ - .user-username-component { - color: @text; - } - - .user-tagline-rating.user-tagline-white { - color: @overlay1; - } - - .nav-link-text { - color: @text !important; - } - .nav-menu-area:last-of-type .icon-font-chess { - color: @mantle !important; - } - #sb .nav-popover.dark .btn-link { - color: @text; - } - #sb .nav-menu-area:last-of-type .icon-font-chess { - color: @text !important; - } - .nav-link-main-design:hover, - .nav-link-main-link:hover { - color: darken(@text, 20%) !important; - } - .nav-link-main-design, - .nav-link-main-link { - color: @text !important; - } - .ui_v5-button-component { - --boxShadow: none; - --boxShadowHover: none; - - box-shadow: none; - - &.ui_v5-button-basic { - --basicColor: @text !important; - --basicHoverColor: @text !important; - --basicBgColor: @surface1 !important; - --basicBghover: @surface2 !important; - --borderColor: @surface0 !important; - } - - &.ui_v5-button-primary { - color: @crust !important; - background-color: @accent-color !important; - --borderColor: darken(@accent-color, 20%) !important; - - &:hover { - --secondaryBorderColor: fadeout(@accent-color, 20%) !important; - box-shadow: none; - } - } - } - - .ui_v5-select-component { - &:not(.ui_v5-select-light), - &.ui_v5-select-dark { - background: @base; - } - } - - .ui_v5-input-component { - background: @base; - } - - .ui_v5-input-dark { - --secondaryTextColor: @subtext0; - } - - .ui_v5-switch-checkbox:not(.ui_v5-switch-readonly):checked - + .ui_v5-switch-label { - background: @green; - } - - .nav-panel-shade { - background: @mantle; - } - - .nav-popover.dark { - background: @mantle; - } - - .nav-section-header-component { - background: @base; - } - - #sb .nav-action.has-popover + .nav-popover { - background: @mantle; - } - - .popover-friends-header { - background: @mantle; - } - - .popover-friends-content { - background: @mantle; - } - - .popover-messages-header { - background: @mantle; - } - - .popover-messages-content { - background: @mantle; - } - - .popover-settings-header { - background: @mantle; - } - - .popover-settings-content { - background: @mantle; - } - - .selector-button-button { - background: @surface0; - - &:hover { - background: @surface1; - } - } - - .time-selector-button-button { - background: @surface0; - - &:hover { - background: @surface1; - } - } - - .clock-component.clock-black { - background: @surface0; - } - - .clock-component.clock-white { - background: @text; - } - - .highlight { - background: @peach !important; - } - - .hint { - background-color: @overlay1; - filter: drop-shadow(0px 0px 1px @crust); - } - - .capture-hint { - background-color: @overlay1; - filter: drop-shadow(0px 0px 1px @crust); - z-index: -1; - } - - .modal-game-over-header-grey { - background-color: @base; - } - - .modal-content-component.modal-content-light { - background-color: @base; - } - - .modal-game-over-user-winner-active { - border-color: @lavender; - } - - .modal-game-over-user-crown { - background: @lavender; - } - - .placeholder-ad-upgrade { - background-color: @accent-color; - } - - .placeholder-ad-link { - color: @crust; - } - - div.mode-selection-button-selected > .mode-selection-button-description { - color: @surface1; - } - - div.mode-selection-button-selected > .mode-selection-button-mode { - color: @mantle; - } - - /* crowns */ - img.crowns-full-crown { - /* this selects the crown, but tbh its not easy to rotate-hue an svg to an exact color. we might make more svgs for the crowns? */ - } - - /* Board */ - .board { - background-image: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/@{lookup}/@{accent}.png") !important; - } - - .game-preview-legacy-component { - background-image: url("https://media.githubusercontent.com/media/catppuccin/userstyles/main/styles/chess.com/assets/@{lookup}/@{accent}.png") !important; - } - - /* Black Pieces */ - .piece.bp { - background-image: @bp !important; - } - - .piece.bn { - background-image: @bn !important; - } - - .piece.bb { - background-image: @bb !important; - } - - .piece.br { - background-image: @br !important; - } - - .piece.bk { - background-image: @bk !important; - } - - .piece.bq { - background-image: @bq !important; - } - - /* -- Previews */ - .game-preview-legacy-piece[alt="bb"] { - content: @bb !important; - } - - .game-preview-legacy-piece[alt="bk"] { - content: @bk !important; - } - - .game-preview-legacy-piece[alt="bn"] { - content: @bn !important; - } - - .game-preview-legacy-piece[alt="bp"] { - content: @bp !important; - } - - .game-preview-legacy-piece[alt="bq"] { - content: @bq !important; - } - - .game-preview-legacy-piece[alt="br"] { - content: @br !important; - } - - .game-preview-legacy-piece[alt="wb"] { - content: @wb !important; - } - - .game-preview-legacy-piece[alt="wk"] { - content: @wk !important; - } - - .game-preview-legacy-piece[alt="wn"] { - content: @wn !important; - } - - .game-preview-legacy-piece[alt="wp"] { - content: @wp !important; - } - - .game-preview-legacy-piece[alt="wq"] { - content: @wq !important; - } - - .game-preview-legacy-piece[alt="wr"] { - content: @wr !important; - } - - /* White Pieces */ - .piece.wp { - background-image: @wp !important; - } - - .piece.wn { - background-image: @wn !important; - } - - .piece.wb { - background-image: @wb !important; - } - - .piece.wr { - background-image: @wr !important; - } - - .piece.wk { - background-image: @wk !important; - } - - .piece.wq { - background-image: @wq !important; - } - } -} diff --git a/styles/chess.com/catppuccin.user.less b/styles/chess.com/catppuccin.user.less new file mode 100644 index 0000000000..4841ab55e1 --- /dev/null +++ b/styles/chess.com/catppuccin.user.less @@ -0,0 +1,740 @@ +/* ==UserStyle== +@name Chess.com Catppuccin +@namespace github.com/catppuccin/userstyles/styles/chess.com +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/chess.com +@version 2026.04.13 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chess.com/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Achess.com +@description Soothing pastel theme for Chess.com +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] + +@var select highlightColor1 "Highlight 1" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +@var select highlightColor2 "Highlight 2" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green*", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +@var select highlightColor3 "Highlight 3" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach*", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +@var select highlightColor4 "Highlight 4" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue*", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +@var checkbox styleBoardAndPieces "Style Board & Pieces" 1 +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("chess.com") { + .light-mode { + #catppuccin(@lightFlavor); + } + + .dark-mode { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + @highlight1: @catppuccin[@@flavor][@@highlightColor1]; + @highlight2: @catppuccin[@@flavor][@@highlightColor2]; + @highlight3: @catppuccin[@@flavor][@@highlightColor3]; + @highlight4: @catppuccin[@@flavor][@@highlightColor4]; + + --color-bg-opaque: @mantle; + --color-bg-opaque-lighter: @base; + --color-bg-subtle: @surface1; + --color-bg-subtler: @surface0; + --color-bg-input: @mantle; + --color-bg-speech: @surface0; + --color-bg-secondary: @surface0; + --color-bg-tertiary: @surface1; + --color-bg-quaternary: @surface2; + --color-gray-100: @overlay1; + --color-text-speech: @text; + + --color-icon-default: @subtext0; + --color-icon-default-hovered: @subtext1; + --color-icon-bolder: @subtext1; + --color-icon-boldest: @text; + + --color-text-boldest: @text; + --color-text-bolder: @text; + --color-text-default: @text; + --color-text-default-hovered: @subtext1; + --color-text-subtle: @subtext1; + --color-text-placeholder: @subtext0; + --color-text-inverse: @crust; + --color-text-link: @blue; + --color-text-link-hovered: @sky; + + --color-border-default: @surface1; + --color-border-subtle: @overlay2; + --color-border-selected: @accent; + + --color-green-200: lighten(@accent, 5%); + --color-green-300: @accent; + --color-green-400: darken(@accent, 5%); + + --color-red-300: @red; /* Danger */ + --color-red-400: @red; /* Danger */ + + /* Links */ + --color-blue-200: @sapphire; + --color-blue-300: @sky; + --color-blue-400: @blue; + + --color-classification-blunder: @red; + --color-classification-miss: @maroon; + --color-classification-mistake: @peach; + --color-classification-inaccuracy: @yellow; + --color-classification-best: @green; + --color-classification-excellent: @green; + --color-classification-good: @teal; + --color-classification-great: @blue; + --color-classification-brilliant: @sapphire; + --color-classification-book: @rosewater; + + --color-icon-win: @green; + --color-text-win: @green; + --color-icon-draw: @subtext0; + --color-text-draw: @subtext0; + --color-bg-draw: @subtext0; + --color-border-draw: var(--color-transparent-white-10); + --color-icon-loss: @red; + --color-text-loss: @red; + --color-border-loss: @red; + + --color-icon-bullet: @peach; + --color-icon-blitz: @yellow; + + body { + --theme-background-color: @base !important; + --theme-background-image: none; + + --globalBackground: @mantle !important; + --globalBackgroundOpaque: @mantle !important; + --globalSecondaryBackground: @crust !important; + --globalTertiaryBackground: @surface0 !important; + --globalAccentBackground: @accent !important; + --globalSecondaryAccentBackground: @surface0 !important; + --globalSiteBackground: @base !important; + --globalBorder: @surface0 !important; + --globalColorThemeFull: @text !important; + --globalColorThemeHigh: @text; + --globalColorThemeMid: @overlay2 !important; + --globalColorThemeLow: @overlay0 !important; + --globalColorThemeLower: @base !important; + --globalColorThemeLink: @sapphire !important; + --globalColorThemeBlueToMid: @text; + --globalOverlayBackground: @base !important; + --globalColorWin: @green !important; + --globalColorDraw: @accent !important; + --globalColorLoss: @red !important; + + --labelBgColor: @surface1; + --activeLabelColor: @accent; + --buttonBgColor: @text; + + --nodeColor: @text; + --nodeBackground: @yellow; + } + + /* Home page */ + .index-title, + .index-info-item-counter { + color: @text !important; + } + .index-info-item { + color: @subtext0 !important; + } + .index-suggestion-title, + .index-posts-title, + .index-post-name { + color: @text; + } + .index-quote-author, + .index-quote-body, + .index-post-author { + color: @subtext1; + } + + .promo-title, + .promo-rank { + color: @text; + } + .promo-subtitle { + color: @subtext1; + } + + .home-username-link { + color: @text; + } + + /* Lessons page */ + .level-title { + color: @text; + } + .level-desc, + .course-header-description strong { + color: @subtext1; + } + + .lessons-search-filter { + .form-dropdown-chevron, + .form-dropdown-control-label, + .form-dropdown-value { + color: @subtext1; + } + } + + /* Play lesson video */ + .lesson-status { + background-color: @text; + } + + /* More page */ + .landing-header { + color: @text; + } + + /* UI */ + .v5-title-label { + color: @text; + } + .v5-tabs-list, + .v5-tabs-list-dark { + --borderColor: @surface2; + --tabTitleColor: @subtext0; + --tabHoverTitleColor: @subtext1; + --tabSelectedBorderColor: @subtext1; + --tabSelectedTitleColor: @text; + } + .ui_v5-input-component { + --borderColor: @surface0; + --borderFocus: @surface1; + --bgColor: @base; + --textColor: @text; + --secondaryTextColor: @subtext1; + } + .ui_v5-input-group-component { + --inputIconColor: @subtext0; + } + .ui_v5-button-component { + --boxShadow: none; + --boxShadowHover: none; + box-shadow: none; + + &.ui_v5-button-basic { + --basicColor: @text !important; + --basicHoverColor: @text !important; + --basicBgColor: @surface1 !important; + --basicBghover: @surface2 !important; + --borderColor: @surface0 !important; + } + + &.ui_v5-button-primary { + color: @crust !important; + background-color: @accent; + + &:hover { + background-color: darken(@accent, 5%); + box-shadow: none; + } + } + } + .ui_v5-select-component { + --borderColor: @surface0; + --borderFocus: @surface1; + --bgColor: @base; + --textColor: @text; + --arrowColor: @subtext0; + } + + .ui_pagination-item-component { + --paginationColor: @text; + --paginationBgColor: @surface1; + --paginationBgHover: @surface2; + --paginationColorMuted: @base; + --paginationBgColorMuted: @overlay1; + } + + .nav-link-text { + color: @text !important; + } + .nav-menu-area:last-of-type .icon-font-chess { + color: @mantle !important; + } + .nav-link-main-design, + .nav-link-main-link { + color: @text !important; + + &:hover { + color: @subtext1 !important; + } + } + + #tb { + .toolbar-action-icon { + color: @subtext1; + } + + .toolbar-action-wrapper:hover .toolbar-action-icon { + color: @text !important; + } + } + + #sb { + color: @subtext0; + + &.open { + background-color: @mantle; + } + + .nav-action:hover { + background-color: @surface0; + color: @text; + } + + .nav-panel-shade, + .nav-panel-theme-bg, + .nav-action.has-popover + .nav-popover { + background: @mantle !important; + } + + .nav-popover.dark .btn-link { + color: @text; + } + .nav-menu-area:last-of-type { + color: @text !important; + } + .nav-popover.nav-search { + --search-bg-color: @surface0; + } + } + + .nav-popover.dark { + background: @mantle; + } + + .section-heading-component .back-link-component { + color: currentcolor; + } + .section-heading-black { + background-color: @surface1; + color: @text; + } + .nav-section-header-component { + background-color: @base; + color: @text; + } + + .popover-friends-header, + .popover-friends-content, + .popover-messages-header, + .popover-messages-content, + .popover-settings-header, + .popover-settings-content { + background: @mantle; + } + + /* Buttons */ + + .selector-button-button, + .time-selector-button-button { + background: @surface0; + + &:hover { + background: @surface1; + } + } + + .cc-switch-checkbox:not(.cc-switch-readonly):checked + + .cc-switch-label + .cc-switch-button { + background-color: @surface1; + } + + .cc-button-component, + .cc-button-primary { + --bgColor: @accent; + --bgColorHover: darken(@accent, 5%); + --textColor: @crust; + --textColorHover: @crust; + box-shadow: none; + } + + .cc-button-primary, + .cc-button-monetization { + --borderBottomLine: darken(@accent, 2%); + --borderBottomLineHover: darken(@accent, 4%); + } + + .cc-button-secondary { + --bgColor: @surface0; + --bgColorHover: darken(@surface0, 5%); + --iconColor: @text; + --iconColorHover: @text; + --textColor: @text; + --textColorHover: @text; + } + + .cc-button-danger { + --bgColor: @red; + --bgColorHover: darken(@red, 5%); + color: @crust; + } + + .v5-section-shadow, + .v5-section-shadow-hover { + --linkHoverBackground: @surface1; + --linkBoxShadow: 0 0.5rem 0 0 @surface2; + } + + /* Game */ + + .user-username-component, + .cc-user-username-white, + .cc-user-rating-white { + color: @text; + text-shadow: none; + } + + .user-tagline-rating.user-tagline-white { + color: @overlay1; + } + + .clock-component.clock-black { + background: @surface0; + } + .clock-component.clock-white { + background: @text; + } + + .highlight { + &[style*="rgb(235, 97, 80)"] { + background: fade(@highlight1, 80%) !important; + } + &[style*="rgb(172, 206, 89)"] { + background: fade(@highlight2, 80%) !important; + } + &[style*="rgb(255, 170, 0)"] { + background: fade(@highlight3, 80%) !important; + } + &[style*="rgb(82, 176, 220)"] { + background: fade(@highlight4, 80%) !important; + } + opacity: 1 !important; + } + .hover-square rect { + stroke: @overlay1 !important; + } + .hint { + background-color: @overlay1; + filter: drop-shadow(0 0 1px @crust); + } + .capture-hint { + background-color: @overlay1; + filter: drop-shadow(0 0 1px @crust); + z-index: -1; + } + + /* Review/evaluation */ + + .evaluation-bar-bar { + .evaluation-bar-black { + background-color: @surface2; + } + .evaluation-bar-draw { + background-color: @overlay1; + } + .evaluation-bar-white { + background-color: @text; + } + } + + .review-rating-white { + background-color: @text; + } + .review-rating-black { + background-color: @surface0; + color: @text; + } + + .overview-view-new-game-button { + background-color: @surface1; + } + + .arrow { + &[style*="rgba(248, 85, 63, 0.8)"] { + fill: @highlight1 !important; + } + &[style*="rgba(159, 207, 63, 0.8)"] { + fill: @highlight2 !important; + } + &[style*="rgba(255, 170, 0, 0.8)"] { + fill: @highlight3 !important; + } + &[style*="rgba(72, 193, 249, 0.8)"] { + fill: @highlight4 !important; + } + } + + g#winner [fill="#dbac16"] { + fill: @yellow !important; + } + + /* Game over */ + + .modal-game-over-header-grey, + .modal-game-over-header-black-win, + .game-over-header-component { + background-color: @base; + color: @text; + } + + .modal-game-over-user-winner-active, + .modal-game-over-user-crown { + background: @lavender; + } + + .game-over-review-button-label { + color: @crust; + text-shadow: none; + } + + /* Ads */ + + .placeholder-ad-upgrade { + background-color: @accent; + } + .placeholder-ad-link { + color: @crust; + } + + .modal-trial-component.modal-trial-special-offer { + .modal-trial-header-background { + background-color: @accent; + } + } + + .coach-nudges-modal-component { + background: @mantle; + } + + .ready-to-play-banner-component { + background-color: @mantle; + + .ready-to-play-banner-title, + .ready-to-play-banner-list { + color: @text; + } + } + + .notifications-links-trial .nav-link-text { + color: @crust !important; + } + + /* Misc */ + + /* GM/IM/etc badge */ + --color-bg-chesstitle: @accent; + .course-author-title, + .course-header-author-title, + .form-dropdown-short-title, + .index-chess-title, + .leaderboard-index-chess-title, + .player-header-title, + .category-headline-chess-title { + color: @crust !important; + } + + .tooltip-body { + background: @surface0; + color: @text; + + &::after { + border-top-color: @surface0 !important; + } + } + .popup-component { + background-color: @surface0; + color: @text; + &.popup-left .popup-arrow { + border-left-color: @surface0; + } + &.popup-right .popup-arrow { + border-right-color: @surface0; + } + } + + /* Error banner */ + .alerts-alert { + color: @crust; + } + + div.mode-selection-button-selected { + > .mode-selection-button-description { + color: @surface1; + } + + > .mode-selection-button-mode { + color: @mantle; + } + } + + .status-component { + background-color: @accent; + color: @crust; + } + + .navigation-footer-page-component, + .navigation-footer-platform-icon { + color: @subtext1; + text-shadow: none; + } + + .download-button-button { + color: @crust !important; + } + + .table-hover tbody tr:hover { + background-color: @surface2; + } + + /* Board */ + @light-cell: @catppuccin[@mocha][@text]; + @dark-cell: @catppuccin[@mocha][@@accentColor]; + + @board: escape( + '' + ); + + & when (@styleBoardAndPieces = 1) { + #board-play-computer, + .board.theme-selector-preview-board, + .fade-in-overlay { + background-image: url("data:image/svg+xml,@{board}") !important; + } + + /* Coordinates - Inside */ + .coordinate-light { + fill: @dark-cell; + } + .coordinate-dark { + fill: @light-cell; + } + /* Coordinates - Outside */ + .coordinate-grey { + fill: @subtext0; + } + } + + #piece(@piece, @type) { + @border: @catppuccin[@mocha][@base]; + @darkest: if( + @type = black, + @catppuccin[@mocha][@base], + @catppuccin[@mocha][@text] + ); + @darker: if( + @type = black, + @catppuccin[@mocha][@surface0], + @catppuccin[@mocha][@subtext1] + ); + @main: if( + @type = black, + @catppuccin[@mocha][@surface1], + @catppuccin[@mocha][@subtext0] + ); + @lighter: if( + @type = black, + @catppuccin[@mocha][@surface2], + @catppuccin[@mocha][@overlay2] + ); + @lightest: if( + @type = black, + @catppuccin[@mocha][@overlay0], + @catppuccin[@mocha][@overlay1] + ); + + @bishop: ''; + @king: ''; + @knight: ''; + @rook: ''; + @pawn: ''; + @queen: ''; + + @svg: escape(@@piece); + @result: url("data:image/svg+xml,@{svg}"); + } + + .board-popover-component { + background-color: @surface0; + } + + & when (@styleBoardAndPieces = 1) { + --theme-board-style-image: url("data:image/svg+xml,@{board}"); + --theme-board-style-highlight-color: @highlight1; + + --theme-piece-set-wp: #piece(pawn, white)[]; + --theme-piece-set-wn: #piece(knight, white)[]; + --theme-piece-set-wr: #piece(rook, white)[]; + --theme-piece-set-wb: #piece(bishop, white)[]; + --theme-piece-set-wq: #piece(queen, white)[]; + --theme-piece-set-wk: #piece(king, white)[]; + --theme-piece-set-bp: #piece(pawn, black)[]; + --theme-piece-set-bn: #piece(knight, black)[]; + --theme-piece-set-bb: #piece(bishop, black)[]; + --theme-piece-set-br: #piece(rook, black)[]; + --theme-piece-set-bq: #piece(queen, black)[]; + --theme-piece-set-bk: #piece(king, black)[]; + + .piece { + /* Black */ + &.bp { + background-image: #piece(pawn, black)[] !important; + } + &.bn { + background-image: #piece(knight, black)[] !important; + } + &.bb { + background-image: #piece(bishop, black)[] !important; + } + &.br { + background-image: #piece(rook, black)[] !important; + } + &.bk { + background-image: #piece(king, black)[] !important; + } + &.bq { + background-image: #piece(queen, black)[] !important; + } + + /* White */ + &.wp { + background-image: #piece(pawn, white)[] !important; + } + &.wn { + background-image: #piece(knight, white)[] !important; + } + &.wb { + background-image: #piece(bishop, white)[] !important; + } + &.wr { + background-image: #piece(rook, white)[] !important; + } + &.wk { + background-image: #piece(king, white)[] !important; + } + &.wq { + background-image: #piece(queen, white)[] !important; + } + } + } + + .chessboard-pkg-move-list-component .dark-row { + background-color: @surface1; + } + } +} diff --git a/styles/chess.com/scripts/generate.py b/styles/chess.com/scripts/generate.py deleted file mode 100644 index 3183cf1374..0000000000 --- a/styles/chess.com/scripts/generate.py +++ /dev/null @@ -1,54 +0,0 @@ -"""File to generate boards according to the flavours of the catppuccin""" -from catppuccin import Flavour -from boardinator.boardinator import replace_colors - -themes = { - "latte": Flavour.latte(), - "mocha": Flavour.mocha(), - "macchiato": Flavour.macchiato(), - "frappe": Flavour.frappe(), -} - -accents = [ - "rosewater", - "flamingo", - "pink", - "mauve", - "red", - "maroon", - "peach", - "yellow", - "green", - "teal", - "sky", - "sapphire", - "blue", - "lavender", -] - - -def generate_boards(): - """Generate boards for each flavour of catppuccin""" - for flavour, theme in themes.items(): - for accent in accents: - color_dict = { - (237, 238, 209): ( - theme.base.red, - theme.base.green, - theme.base.blue, - ), # the Light Grayish Yellow Green - (119, 153, 82): ( - getattr(theme, accent).red, - getattr(theme, accent).green, - getattr(theme, accent).blue, - ), # the Dark Grayish Yellow Green - } - replace_colors( - image_path="assets/base/colorboard.png", - output_path=f"assets/{flavour}/{accent}.png", - color_dict=color_dict, - ) - - -if __name__ == "__main__": - generate_boards() diff --git a/styles/chess.com/scripts/poetry.lock b/styles/chess.com/scripts/poetry.lock deleted file mode 100644 index 61bb0aa926..0000000000 --- a/styles/chess.com/scripts/poetry.lock +++ /dev/null @@ -1,511 +0,0 @@ -# This file is automatically @generated by Poetry 1.4.2 and should not be changed by hand. - -[[package]] -name = "astroid" -version = "2.15.4" -description = "An abstract syntax tree for Python with inference support." -category = "dev" -optional = false -python-versions = ">=3.7.2" -files = [ - {file = "astroid-2.15.4-py3-none-any.whl", hash = "sha256:a1b8543ef9d36ea777194bc9b17f5f8678d2c56ee6a45b2c2f17eec96f242347"}, - {file = "astroid-2.15.4.tar.gz", hash = "sha256:c81e1c7fbac615037744d067a9bb5f9aeb655edf59b63ee8b59585475d6f80d8"}, -] - -[package.dependencies] -lazy-object-proxy = ">=1.4.0" -wrapt = {version = ">=1.14,<2", markers = "python_version >= \"3.11\""} - -[[package]] -name = "black" -version = "23.3.0" -description = "The uncompromising code formatter." -category = "dev" -optional = false -python-versions = ">=3.7" -files = [ - {file = "black-23.3.0-cp310-cp310-macosx_10_16_arm64.whl", hash = "sha256:0945e13506be58bf7db93ee5853243eb368ace1c08a24c65ce108986eac65915"}, - {file = "black-23.3.0-cp310-cp310-macosx_10_16_universal2.whl", hash = "sha256:67de8d0c209eb5b330cce2469503de11bca4085880d62f1628bd9972cc3366b9"}, - {file = "black-23.3.0-cp310-cp310-macosx_10_16_x86_64.whl", hash = "sha256:7c3eb7cea23904399866c55826b31c1f55bbcd3890ce22ff70466b907b6775c2"}, - {file = "black-23.3.0-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:32daa9783106c28815d05b724238e30718f34155653d4d6e125dc7daec8e260c"}, - {file = "black-23.3.0-cp310-cp310-win_amd64.whl", hash = "sha256:35d1381d7a22cc5b2be2f72c7dfdae4072a3336060635718cc7e1ede24221d6c"}, - {file = "black-23.3.0-cp311-cp311-macosx_10_16_arm64.whl", hash = "sha256:a8a968125d0a6a404842fa1bf0b349a568634f856aa08ffaff40ae0dfa52e7c6"}, - {file = "black-23.3.0-cp311-cp311-macosx_10_16_universal2.whl", hash = "sha256:c7ab5790333c448903c4b721b59c0d80b11fe5e9803d8703e84dcb8da56fec1b"}, - {file = "black-23.3.0-cp311-cp311-macosx_10_16_x86_64.whl", hash = "sha256:a6f6886c9869d4daae2d1715ce34a19bbc4b95006d20ed785ca00fa03cba312d"}, - {file = "black-23.3.0-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:6f3c333ea1dd6771b2d3777482429864f8e258899f6ff05826c3a4fcc5ce3f70"}, - {file = "black-23.3.0-cp311-cp311-win_amd64.whl", hash = "sha256:11c410f71b876f961d1de77b9699ad19f939094c3a677323f43d7a29855fe326"}, - {file = "black-23.3.0-cp37-cp37m-macosx_10_16_x86_64.whl", hash = "sha256:1d06691f1eb8de91cd1b322f21e3bfc9efe0c7ca1f0e1eb1db44ea367dff656b"}, - {file = "black-23.3.0-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:50cb33cac881766a5cd9913e10ff75b1e8eb71babf4c7104f2e9c52da1fb7de2"}, - {file = "black-23.3.0-cp37-cp37m-win_amd64.whl", hash = "sha256:e114420bf26b90d4b9daa597351337762b63039752bdf72bf361364c1aa05925"}, - {file = "black-23.3.0-cp38-cp38-macosx_10_16_arm64.whl", hash = "sha256:48f9d345675bb7fbc3dd85821b12487e1b9a75242028adad0333ce36ed2a6d27"}, - {file = "black-23.3.0-cp38-cp38-macosx_10_16_universal2.whl", hash = "sha256:714290490c18fb0126baa0fca0a54ee795f7502b44177e1ce7624ba1c00f2331"}, - {file = "black-23.3.0-cp38-cp38-macosx_10_16_x86_64.whl", hash = "sha256:064101748afa12ad2291c2b91c960be28b817c0c7eaa35bec09cc63aa56493c5"}, - {file = "black-23.3.0-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:562bd3a70495facf56814293149e51aa1be9931567474993c7942ff7d3533961"}, - {file = "black-23.3.0-cp38-cp38-win_amd64.whl", hash = "sha256:e198cf27888ad6f4ff331ca1c48ffc038848ea9f031a3b40ba36aced7e22f2c8"}, - {file = "black-23.3.0-cp39-cp39-macosx_10_16_arm64.whl", hash = "sha256:3238f2aacf827d18d26db07524e44741233ae09a584273aa059066d644ca7b30"}, - {file = "black-23.3.0-cp39-cp39-macosx_10_16_universal2.whl", hash = "sha256:f0bd2f4a58d6666500542b26354978218a9babcdc972722f4bf90779524515f3"}, - {file = "black-23.3.0-cp39-cp39-macosx_10_16_x86_64.whl", hash = "sha256:92c543f6854c28a3c7f39f4d9b7694f9a6eb9d3c5e2ece488c327b6e7ea9b266"}, - {file = "black-23.3.0-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:3a150542a204124ed00683f0db1f5cf1c2aaaa9cc3495b7a3b5976fb136090ab"}, - {file = "black-23.3.0-cp39-cp39-win_amd64.whl", hash = "sha256:6b39abdfb402002b8a7d030ccc85cf5afff64ee90fa4c5aebc531e3ad0175ddb"}, - {file = "black-23.3.0-py3-none-any.whl", hash = "sha256:ec751418022185b0c1bb7d7736e6933d40bbb14c14a0abcf9123d1b159f98dd4"}, - {file = "black-23.3.0.tar.gz", hash = "sha256:1c7b8d606e728a41ea1ccbd7264677e494e87cf630e399262ced92d4a8dac940"}, -] - -[package.dependencies] -click = ">=8.0.0" -mypy-extensions = ">=0.4.3" -packaging = ">=22.0" -pathspec = ">=0.9.0" -platformdirs = ">=2" - -[package.extras] -colorama = ["colorama (>=0.4.3)"] -d = ["aiohttp (>=3.7.4)"] -jupyter = ["ipython (>=7.8.0)", "tokenize-rt (>=3.2.0)"] -uvloop = ["uvloop (>=0.15.2)"] - -[[package]] -name = "boardinator" -version = "0.1.0" -description = "A tool made to generate custom Chess.com boards from the terminal." -category = "main" -optional = false -python-versions = ">=3.11,<4.0" -files = [ - {file = "boardinator-0.1.0-py3-none-any.whl", hash = "sha256:acf2446fed7ddbdb0e8c5834724137e50e7e2bc687ce95b7e27bd44373ce8344"}, - {file = "boardinator-0.1.0.tar.gz", hash = "sha256:617eb1217dea8f858e85481d0d15e79d8855c4e99843babc97f1024e593d7f5f"}, -] - -[package.dependencies] -numpy = ">=1.24.3,<2.0.0" -pillow = ">=9.5.0,<10.0.0" - -[[package]] -name = "catppuccin" -version = "1.2.0" -description = "🐍 Soothing pastel theme for Python." -category = "main" -optional = false -python-versions = ">=3.7.2,<4.0.0" -files = [ - {file = "catppuccin-1.2.0-py3-none-any.whl", hash = "sha256:4549e0450da82cec563491c37eb1c073446272e378d613f4d8d25750df4af5d5"}, - {file = "catppuccin-1.2.0.tar.gz", hash = "sha256:85436de911e7b50cda9835f549d841cd28f7a51ff1c5bea5a70cef627ab0388a"}, -] - -[package.extras] -pygments = ["pygments (>=2.13.0,<3.0.0)"] - -[[package]] -name = "click" -version = "8.1.3" -description = "Composable command line interface toolkit" -category = "dev" -optional = false -python-versions = ">=3.7" -files = [ - {file = "click-8.1.3-py3-none-any.whl", hash = "sha256:bb4d8133cb15a609f44e8213d9b391b0809795062913b383c62be0ee95b1db48"}, - {file = "click-8.1.3.tar.gz", hash = "sha256:7682dc8afb30297001674575ea00d1814d808d6a36af415a82bd481d37ba7b8e"}, -] - -[package.dependencies] -colorama = {version = "*", markers = "platform_system == \"Windows\""} - -[[package]] -name = "colorama" -version = "0.4.6" -description = "Cross-platform colored terminal text." -category = "dev" -optional = false -python-versions = "!=3.0.*,!=3.1.*,!=3.2.*,!=3.3.*,!=3.4.*,!=3.5.*,!=3.6.*,>=2.7" -files = [ - {file = "colorama-0.4.6-py2.py3-none-any.whl", hash = "sha256:4f1d9991f5acc0ca119f9d443620b77f9d6b33703e51011c16baf57afb285fc6"}, - {file = "colorama-0.4.6.tar.gz", hash = "sha256:08695f5cb7ed6e0531a20572697297273c47b8cae5a63ffc6d6ed5c201be6e44"}, -] - -[[package]] -name = "dill" -version = "0.3.6" -description = "serialize all of python" -category = "dev" -optional = false -python-versions = ">=3.7" -files = [ - {file = "dill-0.3.6-py3-none-any.whl", hash = "sha256:a07ffd2351b8c678dfc4a856a3005f8067aea51d6ba6c700796a4d9e280f39f0"}, - {file = "dill-0.3.6.tar.gz", hash = "sha256:e5db55f3687856d8fbdab002ed78544e1c4559a130302693d839dfe8f93f2373"}, -] - -[package.extras] -graph = ["objgraph (>=1.7.2)"] - -[[package]] -name = "isort" -version = "5.12.0" -description = "A Python utility / library to sort Python imports." -category = "dev" -optional = false -python-versions = ">=3.8.0" -files = [ - {file = "isort-5.12.0-py3-none-any.whl", hash = "sha256:f84c2818376e66cf843d497486ea8fed8700b340f308f076c6fb1229dff318b6"}, - {file = "isort-5.12.0.tar.gz", hash = "sha256:8bef7dde241278824a6d83f44a544709b065191b95b6e50894bdc722fcba0504"}, -] - -[package.extras] -colors = ["colorama (>=0.4.3)"] -pipfile-deprecated-finder = ["pip-shims (>=0.5.2)", "pipreqs", "requirementslib"] -plugins = ["setuptools"] -requirements-deprecated-finder = ["pip-api", "pipreqs"] - -[[package]] -name = "lazy-object-proxy" -version = "1.9.0" -description = "A fast and thorough lazy object proxy." -category = "dev" -optional = false -python-versions = ">=3.7" -files = [ - {file = "lazy-object-proxy-1.9.0.tar.gz", hash = "sha256:659fb5809fa4629b8a1ac5106f669cfc7bef26fbb389dda53b3e010d1ac4ebae"}, - {file = "lazy_object_proxy-1.9.0-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:b40387277b0ed2d0602b8293b94d7257e17d1479e257b4de114ea11a8cb7f2d7"}, - {file = "lazy_object_proxy-1.9.0-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:e8c6cfb338b133fbdbc5cfaa10fe3c6aeea827db80c978dbd13bc9dd8526b7d4"}, - {file = "lazy_object_proxy-1.9.0-cp310-cp310-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:721532711daa7db0d8b779b0bb0318fa87af1c10d7fe5e52ef30f8eff254d0cd"}, - {file = "lazy_object_proxy-1.9.0-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:66a3de4a3ec06cd8af3f61b8e1ec67614fbb7c995d02fa224813cb7afefee701"}, - {file = "lazy_object_proxy-1.9.0-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:1aa3de4088c89a1b69f8ec0dcc169aa725b0ff017899ac568fe44ddc1396df46"}, - {file = "lazy_object_proxy-1.9.0-cp310-cp310-win32.whl", hash = "sha256:f0705c376533ed2a9e5e97aacdbfe04cecd71e0aa84c7c0595d02ef93b6e4455"}, - {file = "lazy_object_proxy-1.9.0-cp310-cp310-win_amd64.whl", hash = "sha256:ea806fd4c37bf7e7ad82537b0757999264d5f70c45468447bb2b91afdbe73a6e"}, - {file = "lazy_object_proxy-1.9.0-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:946d27deaff6cf8452ed0dba83ba38839a87f4f7a9732e8f9fd4107b21e6ff07"}, - {file = "lazy_object_proxy-1.9.0-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:79a31b086e7e68b24b99b23d57723ef7e2c6d81ed21007b6281ebcd1688acb0a"}, - {file = "lazy_object_proxy-1.9.0-cp311-cp311-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:f699ac1c768270c9e384e4cbd268d6e67aebcfae6cd623b4d7c3bfde5a35db59"}, - {file = "lazy_object_proxy-1.9.0-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:bfb38f9ffb53b942f2b5954e0f610f1e721ccebe9cce9025a38c8ccf4a5183a4"}, - {file = "lazy_object_proxy-1.9.0-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:189bbd5d41ae7a498397287c408617fe5c48633e7755287b21d741f7db2706a9"}, - {file = "lazy_object_proxy-1.9.0-cp311-cp311-win32.whl", hash = "sha256:81fc4d08b062b535d95c9ea70dbe8a335c45c04029878e62d744bdced5141586"}, - {file = "lazy_object_proxy-1.9.0-cp311-cp311-win_amd64.whl", hash = "sha256:f2457189d8257dd41ae9b434ba33298aec198e30adf2dcdaaa3a28b9994f6adb"}, - {file = "lazy_object_proxy-1.9.0-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:d9e25ef10a39e8afe59a5c348a4dbf29b4868ab76269f81ce1674494e2565a6e"}, - {file = "lazy_object_proxy-1.9.0-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:cbf9b082426036e19c6924a9ce90c740a9861e2bdc27a4834fd0a910742ac1e8"}, - {file = "lazy_object_proxy-1.9.0-cp37-cp37m-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:9f5fa4a61ce2438267163891961cfd5e32ec97a2c444e5b842d574251ade27d2"}, - {file = "lazy_object_proxy-1.9.0-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:8fa02eaab317b1e9e03f69aab1f91e120e7899b392c4fc19807a8278a07a97e8"}, - {file = "lazy_object_proxy-1.9.0-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:e7c21c95cae3c05c14aafffe2865bbd5e377cfc1348c4f7751d9dc9a48ca4bda"}, - {file = "lazy_object_proxy-1.9.0-cp37-cp37m-win32.whl", hash = "sha256:f12ad7126ae0c98d601a7ee504c1122bcef553d1d5e0c3bfa77b16b3968d2734"}, - {file = "lazy_object_proxy-1.9.0-cp37-cp37m-win_amd64.whl", hash = "sha256:edd20c5a55acb67c7ed471fa2b5fb66cb17f61430b7a6b9c3b4a1e40293b1671"}, - {file = "lazy_object_proxy-1.9.0-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:2d0daa332786cf3bb49e10dc6a17a52f6a8f9601b4cf5c295a4f85854d61de63"}, - {file = "lazy_object_proxy-1.9.0-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:9cd077f3d04a58e83d04b20e334f678c2b0ff9879b9375ed107d5d07ff160171"}, - {file = "lazy_object_proxy-1.9.0-cp38-cp38-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:660c94ea760b3ce47d1855a30984c78327500493d396eac4dfd8bd82041b22be"}, - {file = "lazy_object_proxy-1.9.0-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:212774e4dfa851e74d393a2370871e174d7ff0ebc980907723bb67d25c8a7c30"}, - {file = "lazy_object_proxy-1.9.0-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:f0117049dd1d5635bbff65444496c90e0baa48ea405125c088e93d9cf4525b11"}, - {file = "lazy_object_proxy-1.9.0-cp38-cp38-win32.whl", hash = "sha256:0a891e4e41b54fd5b8313b96399f8b0e173bbbfc03c7631f01efbe29bb0bcf82"}, - {file = "lazy_object_proxy-1.9.0-cp38-cp38-win_amd64.whl", hash = "sha256:9990d8e71b9f6488e91ad25f322898c136b008d87bf852ff65391b004da5e17b"}, - {file = "lazy_object_proxy-1.9.0-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:9e7551208b2aded9c1447453ee366f1c4070602b3d932ace044715d89666899b"}, - {file = "lazy_object_proxy-1.9.0-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:5f83ac4d83ef0ab017683d715ed356e30dd48a93746309c8f3517e1287523ef4"}, - {file = "lazy_object_proxy-1.9.0-cp39-cp39-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:7322c3d6f1766d4ef1e51a465f47955f1e8123caee67dd641e67d539a534d006"}, - {file = "lazy_object_proxy-1.9.0-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:18b78ec83edbbeb69efdc0e9c1cb41a3b1b1ed11ddd8ded602464c3fc6020494"}, - {file = "lazy_object_proxy-1.9.0-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:09763491ce220c0299688940f8dc2c5d05fd1f45af1e42e636b2e8b2303e4382"}, - {file = "lazy_object_proxy-1.9.0-cp39-cp39-win32.whl", hash = "sha256:9090d8e53235aa280fc9239a86ae3ea8ac58eff66a705fa6aa2ec4968b95c821"}, - {file = "lazy_object_proxy-1.9.0-cp39-cp39-win_amd64.whl", hash = "sha256:db1c1722726f47e10e0b5fdbf15ac3b8adb58c091d12b3ab713965795036985f"}, -] - -[[package]] -name = "mccabe" -version = "0.7.0" -description = "McCabe checker, plugin for flake8" -category = "dev" -optional = false -python-versions = ">=3.6" -files = [ - {file = "mccabe-0.7.0-py2.py3-none-any.whl", hash = "sha256:6c2d30ab6be0e4a46919781807b4f0d834ebdd6c6e3dca0bda5a15f863427b6e"}, - {file = "mccabe-0.7.0.tar.gz", hash = "sha256:348e0240c33b60bbdf4e523192ef919f28cb2c3d7d5c7794f74009290f236325"}, -] - -[[package]] -name = "mypy-extensions" -version = "1.0.0" -description = "Type system extensions for programs checked with the mypy type checker." -category = "dev" -optional = false -python-versions = ">=3.5" -files = [ - {file = "mypy_extensions-1.0.0-py3-none-any.whl", hash = "sha256:4392f6c0eb8a5668a69e23d168ffa70f0be9ccfd32b5cc2d26a34ae5b844552d"}, - {file = "mypy_extensions-1.0.0.tar.gz", hash = "sha256:75dbf8955dc00442a438fc4d0666508a9a97b6bd41aa2f0ffe9d2f2725af0782"}, -] - -[[package]] -name = "numpy" -version = "1.24.3" -description = "Fundamental package for array computing in Python" -category = "main" -optional = false -python-versions = ">=3.8" -files = [ - {file = "numpy-1.24.3-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:3c1104d3c036fb81ab923f507536daedc718d0ad5a8707c6061cdfd6d184e570"}, - {file = "numpy-1.24.3-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:202de8f38fc4a45a3eea4b63e2f376e5f2dc64ef0fa692838e31a808520efaf7"}, - {file = "numpy-1.24.3-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:8535303847b89aa6b0f00aa1dc62867b5a32923e4d1681a35b5eef2d9591a463"}, - {file = "numpy-1.24.3-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:2d926b52ba1367f9acb76b0df6ed21f0b16a1ad87c6720a1121674e5cf63e2b6"}, - {file = "numpy-1.24.3-cp310-cp310-win32.whl", hash = "sha256:f21c442fdd2805e91799fbe044a7b999b8571bb0ab0f7850d0cb9641a687092b"}, - {file = "numpy-1.24.3-cp310-cp310-win_amd64.whl", hash = "sha256:ab5f23af8c16022663a652d3b25dcdc272ac3f83c3af4c02eb8b824e6b3ab9d7"}, - {file = "numpy-1.24.3-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:9a7721ec204d3a237225db3e194c25268faf92e19338a35f3a224469cb6039a3"}, - {file = "numpy-1.24.3-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:d6cc757de514c00b24ae8cf5c876af2a7c3df189028d68c0cb4eaa9cd5afc2bf"}, - {file = "numpy-1.24.3-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:76e3f4e85fc5d4fd311f6e9b794d0c00e7002ec122be271f2019d63376f1d385"}, - {file = "numpy-1.24.3-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:a1d3c026f57ceaad42f8231305d4653d5f05dc6332a730ae5c0bea3513de0950"}, - {file = "numpy-1.24.3-cp311-cp311-win32.whl", hash = "sha256:c91c4afd8abc3908e00a44b2672718905b8611503f7ff87390cc0ac3423fb096"}, - {file = "numpy-1.24.3-cp311-cp311-win_amd64.whl", hash = "sha256:5342cf6aad47943286afa6f1609cad9b4266a05e7f2ec408e2cf7aea7ff69d80"}, - {file = "numpy-1.24.3-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:7776ea65423ca6a15255ba1872d82d207bd1e09f6d0894ee4a64678dd2204078"}, - {file = "numpy-1.24.3-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:ae8d0be48d1b6ed82588934aaaa179875e7dc4f3d84da18d7eae6eb3f06c242c"}, - {file = "numpy-1.24.3-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:ecde0f8adef7dfdec993fd54b0f78183051b6580f606111a6d789cd14c61ea0c"}, - {file = "numpy-1.24.3-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:4749e053a29364d3452c034827102ee100986903263e89884922ef01a0a6fd2f"}, - {file = "numpy-1.24.3-cp38-cp38-win32.whl", hash = "sha256:d933fabd8f6a319e8530d0de4fcc2e6a61917e0b0c271fded460032db42a0fe4"}, - {file = "numpy-1.24.3-cp38-cp38-win_amd64.whl", hash = "sha256:56e48aec79ae238f6e4395886b5eaed058abb7231fb3361ddd7bfdf4eed54289"}, - {file = "numpy-1.24.3-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:4719d5aefb5189f50887773699eaf94e7d1e02bf36c1a9d353d9f46703758ca4"}, - {file = "numpy-1.24.3-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:0ec87a7084caa559c36e0a2309e4ecb1baa03b687201d0a847c8b0ed476a7187"}, - {file = "numpy-1.24.3-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:ea8282b9bcfe2b5e7d491d0bf7f3e2da29700cec05b49e64d6246923329f2b02"}, - {file = "numpy-1.24.3-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:210461d87fb02a84ef243cac5e814aad2b7f4be953b32cb53327bb49fd77fbb4"}, - {file = "numpy-1.24.3-cp39-cp39-win32.whl", hash = "sha256:784c6da1a07818491b0ffd63c6bbe5a33deaa0e25a20e1b3ea20cf0e43f8046c"}, - {file = "numpy-1.24.3-cp39-cp39-win_amd64.whl", hash = "sha256:d5036197ecae68d7f491fcdb4df90082b0d4960ca6599ba2659957aafced7c17"}, - {file = "numpy-1.24.3-pp38-pypy38_pp73-macosx_10_9_x86_64.whl", hash = "sha256:352ee00c7f8387b44d19f4cada524586f07379c0d49270f87233983bc5087ca0"}, - {file = "numpy-1.24.3-pp38-pypy38_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:1a7d6acc2e7524c9955e5c903160aa4ea083736fde7e91276b0e5d98e6332812"}, - {file = "numpy-1.24.3-pp38-pypy38_pp73-win_amd64.whl", hash = "sha256:35400e6a8d102fd07c71ed7dcadd9eb62ee9a6e84ec159bd48c28235bbb0f8e4"}, - {file = "numpy-1.24.3.tar.gz", hash = "sha256:ab344f1bf21f140adab8e47fdbc7c35a477dc01408791f8ba00d018dd0bc5155"}, -] - -[[package]] -name = "packaging" -version = "23.1" -description = "Core utilities for Python packages" -category = "dev" -optional = false -python-versions = ">=3.7" -files = [ - {file = "packaging-23.1-py3-none-any.whl", hash = "sha256:994793af429502c4ea2ebf6bf664629d07c1a9fe974af92966e4b8d2df7edc61"}, - {file = "packaging-23.1.tar.gz", hash = "sha256:a392980d2b6cffa644431898be54b0045151319d1e7ec34f0cfed48767dd334f"}, -] - -[[package]] -name = "pathspec" -version = "0.11.1" -description = "Utility library for gitignore style pattern matching of file paths." -category = "dev" -optional = false -python-versions = ">=3.7" -files = [ - {file = "pathspec-0.11.1-py3-none-any.whl", hash = "sha256:d8af70af76652554bd134c22b3e8a1cc46ed7d91edcdd721ef1a0c51a84a5293"}, - {file = "pathspec-0.11.1.tar.gz", hash = "sha256:2798de800fa92780e33acca925945e9a19a133b715067cf165b8866c15a31687"}, -] - -[[package]] -name = "pillow" -version = "9.5.0" -description = "Python Imaging Library (Fork)" -category = "main" -optional = false -python-versions = ">=3.7" -files = [ - {file = "Pillow-9.5.0-cp310-cp310-macosx_10_10_x86_64.whl", hash = "sha256:ace6ca218308447b9077c14ea4ef381ba0b67ee78d64046b3f19cf4e1139ad16"}, - {file = "Pillow-9.5.0-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:d3d403753c9d5adc04d4694d35cf0391f0f3d57c8e0030aac09d7678fa8030aa"}, - {file = "Pillow-9.5.0-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:5ba1b81ee69573fe7124881762bb4cd2e4b6ed9dd28c9c60a632902fe8db8b38"}, - {file = "Pillow-9.5.0-cp310-cp310-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:fe7e1c262d3392afcf5071df9afa574544f28eac825284596ac6db56e6d11062"}, - {file = "Pillow-9.5.0-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:8f36397bf3f7d7c6a3abdea815ecf6fd14e7fcd4418ab24bae01008d8d8ca15e"}, - {file = "Pillow-9.5.0-cp310-cp310-manylinux_2_28_aarch64.whl", hash = "sha256:252a03f1bdddce077eff2354c3861bf437c892fb1832f75ce813ee94347aa9b5"}, - {file = "Pillow-9.5.0-cp310-cp310-manylinux_2_28_x86_64.whl", hash = "sha256:85ec677246533e27770b0de5cf0f9d6e4ec0c212a1f89dfc941b64b21226009d"}, - {file = "Pillow-9.5.0-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:b416f03d37d27290cb93597335a2f85ed446731200705b22bb927405320de903"}, - {file = "Pillow-9.5.0-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:1781a624c229cb35a2ac31cc4a77e28cafc8900733a864870c49bfeedacd106a"}, - {file = "Pillow-9.5.0-cp310-cp310-win32.whl", hash = "sha256:8507eda3cd0608a1f94f58c64817e83ec12fa93a9436938b191b80d9e4c0fc44"}, - {file = "Pillow-9.5.0-cp310-cp310-win_amd64.whl", hash = "sha256:d3c6b54e304c60c4181da1c9dadf83e4a54fd266a99c70ba646a9baa626819eb"}, - {file = "Pillow-9.5.0-cp311-cp311-macosx_10_10_x86_64.whl", hash = "sha256:7ec6f6ce99dab90b52da21cf0dc519e21095e332ff3b399a357c187b1a5eee32"}, - {file = "Pillow-9.5.0-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:560737e70cb9c6255d6dcba3de6578a9e2ec4b573659943a5e7e4af13f298f5c"}, - {file = "Pillow-9.5.0-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:96e88745a55b88a7c64fa49bceff363a1a27d9a64e04019c2281049444a571e3"}, - {file = "Pillow-9.5.0-cp311-cp311-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:d9c206c29b46cfd343ea7cdfe1232443072bbb270d6a46f59c259460db76779a"}, - {file = "Pillow-9.5.0-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:cfcc2c53c06f2ccb8976fb5c71d448bdd0a07d26d8e07e321c103416444c7ad1"}, - {file = "Pillow-9.5.0-cp311-cp311-manylinux_2_28_aarch64.whl", hash = "sha256:a0f9bb6c80e6efcde93ffc51256d5cfb2155ff8f78292f074f60f9e70b942d99"}, - {file = "Pillow-9.5.0-cp311-cp311-manylinux_2_28_x86_64.whl", hash = "sha256:8d935f924bbab8f0a9a28404422da8af4904e36d5c33fc6f677e4c4485515625"}, - {file = "Pillow-9.5.0-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:fed1e1cf6a42577953abbe8e6cf2fe2f566daebde7c34724ec8803c4c0cda579"}, - {file = "Pillow-9.5.0-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:c1170d6b195555644f0616fd6ed929dfcf6333b8675fcca044ae5ab110ded296"}, - {file = "Pillow-9.5.0-cp311-cp311-win32.whl", hash = "sha256:54f7102ad31a3de5666827526e248c3530b3a33539dbda27c6843d19d72644ec"}, - {file = "Pillow-9.5.0-cp311-cp311-win_amd64.whl", hash = "sha256:cfa4561277f677ecf651e2b22dc43e8f5368b74a25a8f7d1d4a3a243e573f2d4"}, - {file = "Pillow-9.5.0-cp311-cp311-win_arm64.whl", hash = "sha256:965e4a05ef364e7b973dd17fc765f42233415974d773e82144c9bbaaaea5d089"}, - {file = "Pillow-9.5.0-cp312-cp312-win32.whl", hash = "sha256:22baf0c3cf0c7f26e82d6e1adf118027afb325e703922c8dfc1d5d0156bb2eeb"}, - {file = "Pillow-9.5.0-cp312-cp312-win_amd64.whl", hash = "sha256:432b975c009cf649420615388561c0ce7cc31ce9b2e374db659ee4f7d57a1f8b"}, - {file = "Pillow-9.5.0-cp37-cp37m-macosx_10_10_x86_64.whl", hash = "sha256:5d4ebf8e1db4441a55c509c4baa7a0587a0210f7cd25fcfe74dbbce7a4bd1906"}, - {file = "Pillow-9.5.0-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:375f6e5ee9620a271acb6820b3d1e94ffa8e741c0601db4c0c4d3cb0a9c224bf"}, - {file = "Pillow-9.5.0-cp37-cp37m-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:99eb6cafb6ba90e436684e08dad8be1637efb71c4f2180ee6b8f940739406e78"}, - {file = "Pillow-9.5.0-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:2dfaaf10b6172697b9bceb9a3bd7b951819d1ca339a5ef294d1f1ac6d7f63270"}, - {file = "Pillow-9.5.0-cp37-cp37m-manylinux_2_28_aarch64.whl", hash = "sha256:763782b2e03e45e2c77d7779875f4432e25121ef002a41829d8868700d119392"}, - {file = "Pillow-9.5.0-cp37-cp37m-manylinux_2_28_x86_64.whl", hash = "sha256:35f6e77122a0c0762268216315bf239cf52b88865bba522999dc38f1c52b9b47"}, - {file = "Pillow-9.5.0-cp37-cp37m-win32.whl", hash = "sha256:aca1c196f407ec7cf04dcbb15d19a43c507a81f7ffc45b690899d6a76ac9fda7"}, - {file = "Pillow-9.5.0-cp37-cp37m-win_amd64.whl", hash = "sha256:322724c0032af6692456cd6ed554bb85f8149214d97398bb80613b04e33769f6"}, - {file = "Pillow-9.5.0-cp38-cp38-macosx_10_10_x86_64.whl", hash = "sha256:a0aa9417994d91301056f3d0038af1199eb7adc86e646a36b9e050b06f526597"}, - {file = "Pillow-9.5.0-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:f8286396b351785801a976b1e85ea88e937712ee2c3ac653710a4a57a8da5d9c"}, - {file = "Pillow-9.5.0-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:c830a02caeb789633863b466b9de10c015bded434deb3ec87c768e53752ad22a"}, - {file = "Pillow-9.5.0-cp38-cp38-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:fbd359831c1657d69bb81f0db962905ee05e5e9451913b18b831febfe0519082"}, - {file = "Pillow-9.5.0-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:f8fc330c3370a81bbf3f88557097d1ea26cd8b019d6433aa59f71195f5ddebbf"}, - {file = "Pillow-9.5.0-cp38-cp38-manylinux_2_28_aarch64.whl", hash = "sha256:7002d0797a3e4193c7cdee3198d7c14f92c0836d6b4a3f3046a64bd1ce8df2bf"}, - {file = "Pillow-9.5.0-cp38-cp38-manylinux_2_28_x86_64.whl", hash = "sha256:229e2c79c00e85989a34b5981a2b67aa079fd08c903f0aaead522a1d68d79e51"}, - {file = "Pillow-9.5.0-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:9adf58f5d64e474bed00d69bcd86ec4bcaa4123bfa70a65ce72e424bfb88ed96"}, - {file = "Pillow-9.5.0-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:662da1f3f89a302cc22faa9f14a262c2e3951f9dbc9617609a47521c69dd9f8f"}, - {file = "Pillow-9.5.0-cp38-cp38-win32.whl", hash = "sha256:6608ff3bf781eee0cd14d0901a2b9cc3d3834516532e3bd673a0a204dc8615fc"}, - {file = "Pillow-9.5.0-cp38-cp38-win_amd64.whl", hash = "sha256:e49eb4e95ff6fd7c0c402508894b1ef0e01b99a44320ba7d8ecbabefddcc5569"}, - {file = "Pillow-9.5.0-cp39-cp39-macosx_10_10_x86_64.whl", hash = "sha256:482877592e927fd263028c105b36272398e3e1be3269efda09f6ba21fd83ec66"}, - {file = "Pillow-9.5.0-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:3ded42b9ad70e5f1754fb7c2e2d6465a9c842e41d178f262e08b8c85ed8a1d8e"}, - {file = "Pillow-9.5.0-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:c446d2245ba29820d405315083d55299a796695d747efceb5717a8b450324115"}, - {file = "Pillow-9.5.0-cp39-cp39-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:8aca1152d93dcc27dc55395604dcfc55bed5f25ef4c98716a928bacba90d33a3"}, - {file = "Pillow-9.5.0-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:608488bdcbdb4ba7837461442b90ea6f3079397ddc968c31265c1e056964f1ef"}, - {file = "Pillow-9.5.0-cp39-cp39-manylinux_2_28_aarch64.whl", hash = "sha256:60037a8db8750e474af7ffc9faa9b5859e6c6d0a50e55c45576bf28be7419705"}, - {file = "Pillow-9.5.0-cp39-cp39-manylinux_2_28_x86_64.whl", hash = "sha256:07999f5834bdc404c442146942a2ecadd1cb6292f5229f4ed3b31e0a108746b1"}, - {file = "Pillow-9.5.0-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:a127ae76092974abfbfa38ca2d12cbeddcdeac0fb71f9627cc1135bedaf9d51a"}, - {file = "Pillow-9.5.0-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:489f8389261e5ed43ac8ff7b453162af39c3e8abd730af8363587ba64bb2e865"}, - {file = "Pillow-9.5.0-cp39-cp39-win32.whl", hash = "sha256:9b1af95c3a967bf1da94f253e56b6286b50af23392a886720f563c547e48e964"}, - {file = "Pillow-9.5.0-cp39-cp39-win_amd64.whl", hash = "sha256:77165c4a5e7d5a284f10a6efaa39a0ae8ba839da344f20b111d62cc932fa4e5d"}, - {file = "Pillow-9.5.0-pp38-pypy38_pp73-macosx_10_10_x86_64.whl", hash = "sha256:833b86a98e0ede388fa29363159c9b1a294b0905b5128baf01db683672f230f5"}, - {file = "Pillow-9.5.0-pp38-pypy38_pp73-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:aaf305d6d40bd9632198c766fb64f0c1a83ca5b667f16c1e79e1661ab5060140"}, - {file = "Pillow-9.5.0-pp38-pypy38_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:0852ddb76d85f127c135b6dd1f0bb88dbb9ee990d2cd9aa9e28526c93e794fba"}, - {file = "Pillow-9.5.0-pp38-pypy38_pp73-manylinux_2_28_x86_64.whl", hash = "sha256:91ec6fe47b5eb5a9968c79ad9ed78c342b1f97a091677ba0e012701add857829"}, - {file = "Pillow-9.5.0-pp38-pypy38_pp73-win_amd64.whl", hash = "sha256:cb841572862f629b99725ebaec3287fc6d275be9b14443ea746c1dd325053cbd"}, - {file = "Pillow-9.5.0-pp39-pypy39_pp73-macosx_10_10_x86_64.whl", hash = "sha256:c380b27d041209b849ed246b111b7c166ba36d7933ec6e41175fd15ab9eb1572"}, - {file = "Pillow-9.5.0-pp39-pypy39_pp73-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:7c9af5a3b406a50e313467e3565fc99929717f780164fe6fbb7704edba0cebbe"}, - {file = "Pillow-9.5.0-pp39-pypy39_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:5671583eab84af046a397d6d0ba25343c00cd50bce03787948e0fff01d4fd9b1"}, - {file = "Pillow-9.5.0-pp39-pypy39_pp73-manylinux_2_28_x86_64.whl", hash = "sha256:84a6f19ce086c1bf894644b43cd129702f781ba5751ca8572f08aa40ef0ab7b7"}, - {file = "Pillow-9.5.0-pp39-pypy39_pp73-win_amd64.whl", hash = "sha256:1e7723bd90ef94eda669a3c2c19d549874dd5badaeefabefd26053304abe5799"}, - {file = "Pillow-9.5.0.tar.gz", hash = "sha256:bf548479d336726d7a0eceb6e767e179fbde37833ae42794602631a070d630f1"}, -] - -[package.extras] -docs = ["furo", "olefile", "sphinx (>=2.4)", "sphinx-copybutton", "sphinx-inline-tabs", "sphinx-removed-in", "sphinxext-opengraph"] -tests = ["check-manifest", "coverage", "defusedxml", "markdown2", "olefile", "packaging", "pyroma", "pytest", "pytest-cov", "pytest-timeout"] - -[[package]] -name = "platformdirs" -version = "3.5.0" -description = "A small Python package for determining appropriate platform-specific dirs, e.g. a \"user data dir\"." -category = "dev" -optional = false -python-versions = ">=3.7" -files = [ - {file = "platformdirs-3.5.0-py3-none-any.whl", hash = "sha256:47692bc24c1958e8b0f13dd727307cff1db103fca36399f457da8e05f222fdc4"}, - {file = "platformdirs-3.5.0.tar.gz", hash = "sha256:7954a68d0ba23558d753f73437c55f89027cf8f5108c19844d4b82e5af396335"}, -] - -[package.extras] -docs = ["furo (>=2023.3.27)", "proselint (>=0.13)", "sphinx (>=6.1.3)", "sphinx-autodoc-typehints (>=1.23,!=1.23.4)"] -test = ["appdirs (==1.4.4)", "covdefaults (>=2.3)", "pytest (>=7.3.1)", "pytest-cov (>=4)", "pytest-mock (>=3.10)"] - -[[package]] -name = "pylint" -version = "2.17.4" -description = "python code static checker" -category = "dev" -optional = false -python-versions = ">=3.7.2" -files = [ - {file = "pylint-2.17.4-py3-none-any.whl", hash = "sha256:7a1145fb08c251bdb5cca11739722ce64a63db479283d10ce718b2460e54123c"}, - {file = "pylint-2.17.4.tar.gz", hash = "sha256:5dcf1d9e19f41f38e4e85d10f511e5b9c35e1aa74251bf95cdd8cb23584e2db1"}, -] - -[package.dependencies] -astroid = ">=2.15.4,<=2.17.0-dev0" -colorama = {version = ">=0.4.5", markers = "sys_platform == \"win32\""} -dill = {version = ">=0.3.6", markers = "python_version >= \"3.11\""} -isort = ">=4.2.5,<6" -mccabe = ">=0.6,<0.8" -platformdirs = ">=2.2.0" -tomlkit = ">=0.10.1" - -[package.extras] -spelling = ["pyenchant (>=3.2,<4.0)"] -testutils = ["gitpython (>3)"] - -[[package]] -name = "tomlkit" -version = "0.11.8" -description = "Style preserving TOML library" -category = "dev" -optional = false -python-versions = ">=3.7" -files = [ - {file = "tomlkit-0.11.8-py3-none-any.whl", hash = "sha256:8c726c4c202bdb148667835f68d68780b9a003a9ec34167b6c673b38eff2a171"}, - {file = "tomlkit-0.11.8.tar.gz", hash = "sha256:9330fc7faa1db67b541b28e62018c17d20be733177d290a13b24c62d1614e0c3"}, -] - -[[package]] -name = "wrapt" -version = "1.15.0" -description = "Module for decorators, wrappers and monkey patching." -category = "dev" -optional = false -python-versions = "!=3.0.*,!=3.1.*,!=3.2.*,!=3.3.*,!=3.4.*,>=2.7" -files = [ - {file = "wrapt-1.15.0-cp27-cp27m-macosx_10_9_x86_64.whl", hash = "sha256:ca1cccf838cd28d5a0883b342474c630ac48cac5df0ee6eacc9c7290f76b11c1"}, - {file = "wrapt-1.15.0-cp27-cp27m-manylinux1_i686.whl", hash = "sha256:e826aadda3cae59295b95343db8f3d965fb31059da7de01ee8d1c40a60398b29"}, - {file = "wrapt-1.15.0-cp27-cp27m-manylinux1_x86_64.whl", hash = "sha256:5fc8e02f5984a55d2c653f5fea93531e9836abbd84342c1d1e17abc4a15084c2"}, - {file = "wrapt-1.15.0-cp27-cp27m-manylinux2010_i686.whl", hash = "sha256:96e25c8603a155559231c19c0349245eeb4ac0096fe3c1d0be5c47e075bd4f46"}, - {file = "wrapt-1.15.0-cp27-cp27m-manylinux2010_x86_64.whl", hash = "sha256:40737a081d7497efea35ab9304b829b857f21558acfc7b3272f908d33b0d9d4c"}, - {file = "wrapt-1.15.0-cp27-cp27mu-manylinux1_i686.whl", hash = "sha256:f87ec75864c37c4c6cb908d282e1969e79763e0d9becdfe9fe5473b7bb1e5f09"}, - {file = "wrapt-1.15.0-cp27-cp27mu-manylinux1_x86_64.whl", hash = "sha256:1286eb30261894e4c70d124d44b7fd07825340869945c79d05bda53a40caa079"}, - {file = "wrapt-1.15.0-cp27-cp27mu-manylinux2010_i686.whl", hash = "sha256:493d389a2b63c88ad56cdc35d0fa5752daac56ca755805b1b0c530f785767d5e"}, - {file = "wrapt-1.15.0-cp27-cp27mu-manylinux2010_x86_64.whl", hash = "sha256:58d7a75d731e8c63614222bcb21dd992b4ab01a399f1f09dd82af17bbfc2368a"}, - {file = "wrapt-1.15.0-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:21f6d9a0d5b3a207cdf7acf8e58d7d13d463e639f0c7e01d82cdb671e6cb7923"}, - {file = "wrapt-1.15.0-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:ce42618f67741d4697684e501ef02f29e758a123aa2d669e2d964ff734ee00ee"}, - {file = "wrapt-1.15.0-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:41d07d029dd4157ae27beab04d22b8e261eddfc6ecd64ff7000b10dc8b3a5727"}, - {file = "wrapt-1.15.0-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:54accd4b8bc202966bafafd16e69da9d5640ff92389d33d28555c5fd4f25ccb7"}, - {file = "wrapt-1.15.0-cp310-cp310-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:2fbfbca668dd15b744418265a9607baa970c347eefd0db6a518aaf0cfbd153c0"}, - {file = "wrapt-1.15.0-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:76e9c727a874b4856d11a32fb0b389afc61ce8aaf281ada613713ddeadd1cfec"}, - {file = "wrapt-1.15.0-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:e20076a211cd6f9b44a6be58f7eeafa7ab5720eb796975d0c03f05b47d89eb90"}, - {file = "wrapt-1.15.0-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:a74d56552ddbde46c246b5b89199cb3fd182f9c346c784e1a93e4dc3f5ec9975"}, - {file = "wrapt-1.15.0-cp310-cp310-win32.whl", hash = "sha256:26458da5653aa5b3d8dc8b24192f574a58984c749401f98fff994d41d3f08da1"}, - {file = "wrapt-1.15.0-cp310-cp310-win_amd64.whl", hash = "sha256:75760a47c06b5974aa5e01949bf7e66d2af4d08cb8c1d6516af5e39595397f5e"}, - {file = "wrapt-1.15.0-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:ba1711cda2d30634a7e452fc79eabcadaffedf241ff206db2ee93dd2c89a60e7"}, - {file = "wrapt-1.15.0-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:56374914b132c702aa9aa9959c550004b8847148f95e1b824772d453ac204a72"}, - {file = "wrapt-1.15.0-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:a89ce3fd220ff144bd9d54da333ec0de0399b52c9ac3d2ce34b569cf1a5748fb"}, - {file = "wrapt-1.15.0-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:3bbe623731d03b186b3d6b0d6f51865bf598587c38d6f7b0be2e27414f7f214e"}, - {file = "wrapt-1.15.0-cp311-cp311-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:3abbe948c3cbde2689370a262a8d04e32ec2dd4f27103669a45c6929bcdbfe7c"}, - {file = "wrapt-1.15.0-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:b67b819628e3b748fd3c2192c15fb951f549d0f47c0449af0764d7647302fda3"}, - {file = "wrapt-1.15.0-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:7eebcdbe3677e58dd4c0e03b4f2cfa346ed4049687d839adad68cc38bb559c92"}, - {file = "wrapt-1.15.0-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:74934ebd71950e3db69960a7da29204f89624dde411afbfb3b4858c1409b1e98"}, - {file = "wrapt-1.15.0-cp311-cp311-win32.whl", hash = "sha256:bd84395aab8e4d36263cd1b9308cd504f6cf713b7d6d3ce25ea55670baec5416"}, - {file = "wrapt-1.15.0-cp311-cp311-win_amd64.whl", hash = "sha256:a487f72a25904e2b4bbc0817ce7a8de94363bd7e79890510174da9d901c38705"}, - {file = "wrapt-1.15.0-cp35-cp35m-manylinux1_i686.whl", hash = "sha256:4ff0d20f2e670800d3ed2b220d40984162089a6e2c9646fdb09b85e6f9a8fc29"}, - {file = "wrapt-1.15.0-cp35-cp35m-manylinux1_x86_64.whl", hash = "sha256:9ed6aa0726b9b60911f4aed8ec5b8dd7bf3491476015819f56473ffaef8959bd"}, - {file = "wrapt-1.15.0-cp35-cp35m-manylinux2010_i686.whl", hash = "sha256:896689fddba4f23ef7c718279e42f8834041a21342d95e56922e1c10c0cc7afb"}, - {file = "wrapt-1.15.0-cp35-cp35m-manylinux2010_x86_64.whl", hash = "sha256:75669d77bb2c071333417617a235324a1618dba66f82a750362eccbe5b61d248"}, - {file = "wrapt-1.15.0-cp35-cp35m-win32.whl", hash = "sha256:fbec11614dba0424ca72f4e8ba3c420dba07b4a7c206c8c8e4e73f2e98f4c559"}, - {file = "wrapt-1.15.0-cp35-cp35m-win_amd64.whl", hash = "sha256:fd69666217b62fa5d7c6aa88e507493a34dec4fa20c5bd925e4bc12fce586639"}, - {file = "wrapt-1.15.0-cp36-cp36m-macosx_10_9_x86_64.whl", hash = "sha256:b0724f05c396b0a4c36a3226c31648385deb6a65d8992644c12a4963c70326ba"}, - {file = "wrapt-1.15.0-cp36-cp36m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:bbeccb1aa40ab88cd29e6c7d8585582c99548f55f9b2581dfc5ba68c59a85752"}, - {file = "wrapt-1.15.0-cp36-cp36m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:38adf7198f8f154502883242f9fe7333ab05a5b02de7d83aa2d88ea621f13364"}, - {file = "wrapt-1.15.0-cp36-cp36m-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:578383d740457fa790fdf85e6d346fda1416a40549fe8db08e5e9bd281c6a475"}, - {file = "wrapt-1.15.0-cp36-cp36m-musllinux_1_1_aarch64.whl", hash = "sha256:a4cbb9ff5795cd66f0066bdf5947f170f5d63a9274f99bdbca02fd973adcf2a8"}, - {file = "wrapt-1.15.0-cp36-cp36m-musllinux_1_1_i686.whl", hash = "sha256:af5bd9ccb188f6a5fdda9f1f09d9f4c86cc8a539bd48a0bfdc97723970348418"}, - {file = "wrapt-1.15.0-cp36-cp36m-musllinux_1_1_x86_64.whl", hash = "sha256:b56d5519e470d3f2fe4aa7585f0632b060d532d0696c5bdfb5e8319e1d0f69a2"}, - {file = "wrapt-1.15.0-cp36-cp36m-win32.whl", hash = "sha256:77d4c1b881076c3ba173484dfa53d3582c1c8ff1f914c6461ab70c8428b796c1"}, - {file = "wrapt-1.15.0-cp36-cp36m-win_amd64.whl", hash = "sha256:077ff0d1f9d9e4ce6476c1a924a3332452c1406e59d90a2cf24aeb29eeac9420"}, - {file = "wrapt-1.15.0-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:5c5aa28df055697d7c37d2099a7bc09f559d5053c3349b1ad0c39000e611d317"}, - {file = "wrapt-1.15.0-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:3a8564f283394634a7a7054b7983e47dbf39c07712d7b177b37e03f2467a024e"}, - {file = "wrapt-1.15.0-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:780c82a41dc493b62fc5884fb1d3a3b81106642c5c5c78d6a0d4cbe96d62ba7e"}, - {file = "wrapt-1.15.0-cp37-cp37m-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:e169e957c33576f47e21864cf3fc9ff47c223a4ebca8960079b8bd36cb014fd0"}, - {file = "wrapt-1.15.0-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:b02f21c1e2074943312d03d243ac4388319f2456576b2c6023041c4d57cd7019"}, - {file = "wrapt-1.15.0-cp37-cp37m-musllinux_1_1_i686.whl", hash = "sha256:f2e69b3ed24544b0d3dbe2c5c0ba5153ce50dcebb576fdc4696d52aa22db6034"}, - {file = "wrapt-1.15.0-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:d787272ed958a05b2c86311d3a4135d3c2aeea4fc655705f074130aa57d71653"}, - {file = "wrapt-1.15.0-cp37-cp37m-win32.whl", hash = "sha256:02fce1852f755f44f95af51f69d22e45080102e9d00258053b79367d07af39c0"}, - {file = "wrapt-1.15.0-cp37-cp37m-win_amd64.whl", hash = "sha256:abd52a09d03adf9c763d706df707c343293d5d106aea53483e0ec8d9e310ad5e"}, - {file = "wrapt-1.15.0-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:cdb4f085756c96a3af04e6eca7f08b1345e94b53af8921b25c72f096e704e145"}, - {file = "wrapt-1.15.0-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:230ae493696a371f1dbffaad3dafbb742a4d27a0afd2b1aecebe52b740167e7f"}, - {file = "wrapt-1.15.0-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:63424c681923b9f3bfbc5e3205aafe790904053d42ddcc08542181a30a7a51bd"}, - {file = "wrapt-1.15.0-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:d6bcbfc99f55655c3d93feb7ef3800bd5bbe963a755687cbf1f490a71fb7794b"}, - {file = "wrapt-1.15.0-cp38-cp38-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:c99f4309f5145b93eca6e35ac1a988f0dc0a7ccf9ccdcd78d3c0adf57224e62f"}, - {file = "wrapt-1.15.0-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:b130fe77361d6771ecf5a219d8e0817d61b236b7d8b37cc045172e574ed219e6"}, - {file = "wrapt-1.15.0-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:96177eb5645b1c6985f5c11d03fc2dbda9ad24ec0f3a46dcce91445747e15094"}, - {file = "wrapt-1.15.0-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:d5fe3e099cf07d0fb5a1e23d399e5d4d1ca3e6dfcbe5c8570ccff3e9208274f7"}, - {file = "wrapt-1.15.0-cp38-cp38-win32.whl", hash = "sha256:abd8f36c99512755b8456047b7be10372fca271bf1467a1caa88db991e7c421b"}, - {file = "wrapt-1.15.0-cp38-cp38-win_amd64.whl", hash = "sha256:b06fa97478a5f478fb05e1980980a7cdf2712015493b44d0c87606c1513ed5b1"}, - {file = "wrapt-1.15.0-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:2e51de54d4fb8fb50d6ee8327f9828306a959ae394d3e01a1ba8b2f937747d86"}, - {file = "wrapt-1.15.0-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:0970ddb69bba00670e58955f8019bec4a42d1785db3faa043c33d81de2bf843c"}, - {file = "wrapt-1.15.0-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:76407ab327158c510f44ded207e2f76b657303e17cb7a572ffe2f5a8a48aa04d"}, - {file = "wrapt-1.15.0-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:cd525e0e52a5ff16653a3fc9e3dd827981917d34996600bbc34c05d048ca35cc"}, - {file = "wrapt-1.15.0-cp39-cp39-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:9d37ac69edc5614b90516807de32d08cb8e7b12260a285ee330955604ed9dd29"}, - {file = "wrapt-1.15.0-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:078e2a1a86544e644a68422f881c48b84fef6d18f8c7a957ffd3f2e0a74a0d4a"}, - {file = "wrapt-1.15.0-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:2cf56d0e237280baed46f0b5316661da892565ff58309d4d2ed7dba763d984b8"}, - {file = "wrapt-1.15.0-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:7dc0713bf81287a00516ef43137273b23ee414fe41a3c14be10dd95ed98a2df9"}, - {file = "wrapt-1.15.0-cp39-cp39-win32.whl", hash = "sha256:46ed616d5fb42f98630ed70c3529541408166c22cdfd4540b88d5f21006b0eff"}, - {file = "wrapt-1.15.0-cp39-cp39-win_amd64.whl", hash = "sha256:eef4d64c650f33347c1f9266fa5ae001440b232ad9b98f1f43dfe7a79435c0a6"}, - {file = "wrapt-1.15.0-py3-none-any.whl", hash = "sha256:64b1df0f83706b4ef4cfb4fb0e4c2669100fd7ecacfb59e091fad300d4e04640"}, - {file = "wrapt-1.15.0.tar.gz", hash = "sha256:d06730c6aed78cee4126234cf2d071e01b44b915e725a6cb439a879ec9754a3a"}, -] - -[metadata] -lock-version = "2.0" -python-versions = "^3.11" -content-hash = "be1ba591b41dbef807e283f0fe1533f61a1a01a751e4ef785de7a1599a161928" diff --git a/styles/chess.com/scripts/pyproject.toml b/styles/chess.com/scripts/pyproject.toml deleted file mode 100644 index a3bc5387bf..0000000000 --- a/styles/chess.com/scripts/pyproject.toml +++ /dev/null @@ -1,22 +0,0 @@ -[tool.poetry] -name = "chess-com" -version = "0.1.0" -description = "" -authors = ["Nathan Solis <66754842+coldenate@users.noreply.github.com>"] -license = "MIT" -readme = "README.md" -packages = [{include = "chess"}] - -[tool.poetry.dependencies] -python = "^3.11" -boardinator = "^0.1.0" -catppuccin = "^1.2.0" - -[tool.poetry.group.dev.dependencies] -isort = "^5.12.0" -black = "^23.3.0" -pylint = "^2.17.4" - -[build-system] -requires = ["poetry-core"] -build-backend = "poetry.core.masonry.api" diff --git a/styles/cinny/README.md b/styles/cinny/README.md index a8fd503520..f1d14d34d9 100644 --- a/styles/cinny/README.md +++ b/styles/cinny/README.md @@ -10,38 +10,17 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +## 💝 Current Maintainer +- [jn-sena](https://github.com/jn-sena) -## 💝 Current Maintainer(s) -- [Sena](https://github.com/jn-sena)   diff --git a/styles/cinny/assets/catwalk.webp b/styles/cinny/assets/catwalk.webp deleted file mode 100644 index f58d70fac3..0000000000 --- a/styles/cinny/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7a6c39404c0e0b5954c51aa1ede9b12e104e486890771d4d0eae84c1653ccc37 -size 130764 diff --git a/styles/cinny/assets/frappe.webp b/styles/cinny/assets/frappe.webp deleted file mode 100644 index 2b2a79d12a..0000000000 --- a/styles/cinny/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:51811d5e8549a3bb920953caadacc4ed025a6d69640cafe2d1eaed57abd5bcbf -size 124278 diff --git a/styles/cinny/assets/latte.webp b/styles/cinny/assets/latte.webp deleted file mode 100644 index aa82c2a0d3..0000000000 --- a/styles/cinny/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:26fc853689daffcc5a936550b2971bf6e5d169308a557fe00420ddc9f086ffe5 -size 134864 diff --git a/styles/cinny/assets/macchiato.webp b/styles/cinny/assets/macchiato.webp deleted file mode 100644 index 16f9431f27..0000000000 --- a/styles/cinny/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0ae3c2a40427c718f8e1d46eae94a1ac765a1944588689f6360788ed43e8d54b -size 119558 diff --git a/styles/cinny/assets/mocha.webp b/styles/cinny/assets/mocha.webp deleted file mode 100644 index 658b6ff130..0000000000 --- a/styles/cinny/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:473b5d9cea5962f2a021c744d58abf075e61935f1983b3cfbec3b3ba5aa69007 -size 121384 diff --git a/styles/cinny/catppuccin.user.css b/styles/cinny/catppuccin.user.css deleted file mode 100644 index c2dd670b78..0000000000 --- a/styles/cinny/catppuccin.user.css +++ /dev/null @@ -1,161 +0,0 @@ -/* ==UserStyle== -@name Cinny Catppuccin -@namespace github.com/catppuccin/userstyles/styles/cinny -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/cinny -@version 2.1.2 -@description Soothing pastel theme for Cinny -@author Catppuccin -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/cinny/catppuccin.user.css -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" [ "latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha" ] -@var select darkFlavor "Dark Flavor" [ "latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*" ] -@var select accentColor "Accent" [ "rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue*", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray" ] -==/UserStyle== */ - -@-moz-document domain("cinny.in") { - /* prettier-ignore */ - @catppuccin: { - @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; } - @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; } - @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; } - @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; } - } - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accentColor: @catppuccin[@@lookup][@@accent]; - - color-scheme: if(@lookup = latte, light, dark); - - --bg-surface: @base; - --bg-surface-transparent: fadeout(@base, 100%); - --bg-surface-low: @mantle; - --bg-surface-low-transparent: fadeout(@mantle, 100%); - --bg-surface-extra-low: @crust; - --bg-surface-extra-low-transparent: fadeout(@crust, 100); - - --bg-surface-hover: @surface0; - --bg-surface-active: @surface1; - - --bg-primary: @accentColor; - --bg-primary-hover: fadeout(@accentColor, 20%); - --bg-primary-active: fadeout(@accentColor, 30%); - --bg-primary-border: fadeout(@accentColor, 62%); - - --bg-tooltip: @surface0; - --bg-badge: @lavender; - - --bg-positive: @green; - --bg-positive-hover: fadeout(@green, 92%); - --bg-positive-active: fadeout(@green, 85%); - --bg-positive-border: fadeout(@green, 60%); - --bg-caution: @peach; - --bg-caution-hover: fadeout(@peach, 92%); - --bg-caution-active: fadeout(@peach, 85%); - --bg-caution-border: fadeout(@peach, 60%); - --bg-danger: @maroon; - --bg-danger-hover: fadeout(@maroon, 95%); - --bg-danger-active: fadeout(@maroon, 90%); - --bg-danger-border: fadeout(@maroon, 80%); - - --bg-ping: fadeout(@green, 60%); - --bg-ping-hover: fadeout(@green, 50%); - - --tc-surface-high: @text; - --tc-surface-normal: @text; - --tc-surface-normal-low: @subtext1; - --tc-surface-low: @subtext0; - --tc-primary-high: @crust; - --tc-primary-normal: @text; - --tc-primary-low: @subtext1; - - --tc-tooltip: @subtext0; - --tc-code: @mauve; - --tc-link: @rosewater; - --tc-badge: @crust; - - --tc-positive-high: @green; - --tc-positive-normal: @green; - --tc-positive-low: @green; - --tc-caution-high: @peach; - --tc-caution-normal: @peach; - --tc-caution-low: @peach; - --tc-danger-high: @maroon; - --tc-danger-normal: @maroon; - --tc-danger-low: @maroon; - - --ic-surface-high: @text; - --ic-surface-normal: @text; - --ic-surface-low: @subtext1; - --ic-primary-high: @text; - --ic-primary-normal: @crust; - - --ic-positive-high: @green; - --ic-positive-normal: @maroon; - --ic-caution-high: @peach; - --ic-caution-normal: @peach; - --ic-danger-high: @maroon; - --ic-danger-normal: @maroon; - - --mx-uc-1: @blue; - --mx-uc-2: @pink; - --mx-uc-3: @teal; - --mx-uc-4: @red; - --mx-uc-5: @peach; - --mx-uc-6: @sky; - --mx-uc-7: @mauve; - --mx-uc-8: @green; - } - - :root, - .silver-theme { - #catppuccin(@lightFlavor, @accentColor); - } - .dark-theme, - .dark-theme .text, - .butter-theme, - .butter-theme .text { - #catppuccin(@darkFlavor, @accentColor); - } - @media (prefers-color-scheme: light) { - .system-theme { - #catppuccin(@lightFlavor, @accentColor); - } - } - @media (prefers-color-scheme: dark) { - .system-theme, - .system-theme .text { - #catppuccin(@darkFlavor, @accentColor); - } - } -} /* /@-moz-document */ - -// vim:ft=less diff --git a/styles/cinny/catppuccin.user.less b/styles/cinny/catppuccin.user.less new file mode 100644 index 0000000000..366c61276b --- /dev/null +++ b/styles/cinny/catppuccin.user.less @@ -0,0 +1,229 @@ +/* ==UserStyle== +@name Cinny Catppuccin +@namespace github.com/catppuccin/userstyles/styles/cinny +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/cinny +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/cinny/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acinny +@description Soothing pastel theme for Cinny +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("cinny.in") { + @import url("https://prismjs.catppuccin.com/variables.important.css"); + code .token { + opacity: 1 !important; + } + + :root, + .silver-theme { + #catppuccin(@lightFlavor); + } + + .dark-theme, + .butter-theme { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + /* Legacy user colors */ + --mx-uc-1: @blue; + --mx-uc-2: @pink; + --mx-uc-3: @teal; + --mx-uc-4: @red; + --mx-uc-5: @peach; + --mx-uc-6: @sky; + --mx-uc-7: @mauve; + --mx-uc-8: @green; + + body.oq6d071w, + &._15q3ngn0, + &._15q3ngn1, + &._15q3ngn2 { + --oq6d070: @mantle; + --oq6d071: @base; + --oq6d072: @surface0; + --oq6d073: @surface1; + --oq6d074: @text; + --oq6d075: @base; + --oq6d076: @surface0; + --oq6d077: @surface1; + --oq6d078: @surface2; + --oq6d079: @text; + --oq6d07a: @mantle; + --oq6d07b: @base; + --oq6d07c: @surface0; + --oq6d07d: @surface1; + --oq6d07e: @text; + + --oq6d07f: @subtext0; + --oq6d07g: @overlay2; + --oq6d07h: @overlay1; + --oq6d07i: @overlay0; + + --oq6d07j: @base; + + --oq6d07k: fade(@accent, 50%); + --oq6d07l: fade(@accent, 40%); + --oq6d07m: fade(@accent, 30%); + --oq6d07n: fade(@accent, 20%); + + --oq6d07o: @text; + --oq6d07p: @subtext1; + --oq6d07q: @subtext0; + --oq6d07r: @overlay2; + --oq6d07s: @overlay1; + + --oq6d07t: @mantle; + --oq6d07u: @surface0; + --oq6d07v: @surface1; + --oq6d07w: @surface2; + --oq6d07x: @overlay0; + --oq6d07y: @text; + + --oq6d07z: fade(@green, 90%); + --oq6d0710: fade(@green, 95%); + --oq6d0711: fade(@green, 97.5%); + --oq6d0712: @green; + --oq6d0713: @surface0; + --oq6d0714: fade(@surface0, 97.5%); + --oq6d0715: fade(@surface0, 95%); + --oq6d0716: fade(@surface0, 90%); + --oq6d0717: fade(@surface0, 80%); + + --oq6d0718: @green; + + --oq6d0719: fade(@peach, 90%); + --oq6d071a: fade(@peach, 95%); + --oq6d071b: fade(@peach, 97.5%); + --oq6d071c: @peach; + --oq6d071d: fade(@surface0, 97.5%); + --oq6d071e: fade(@surface0, 95%); + --oq6d071f: fade(@surface0, 90%); + --oq6d071g: fade(@surface0, 80%); + --oq6d071h: fade(@surface0, 70%); + + --oq6d071i: fade(@maroon, 90%); + --oq6d071j: fade(@maroon, 95%); + --oq6d071k: fade(@maroon, 97.5%); + --oq6d071l: @maroon; + --oq6d071m: fade(@surface0, 97.5%); + --oq6d071n: fade(@surface0, 95%); + --oq6d071o: fade(@surface0, 90%); + --oq6d071p: fade(@surface0, 80%); + --oq6d071q: fade(@surface0, 70%); + --oq6d071r: fade(@surface0, 60%); + --oq6d071s: fade(@maroon, 90%); + + --oq6d071t: fade(@text, 50%); + --oq6d071u: @crust; + --oq6d071v: fade(@crust, 60%); + } + + /* Search results */ + ._1m2qi7rq { + background-color: @accent; + color: @base; + } + + /* Footer */ + .footer { + .text-s1, + .text-h2, + a { + color: @text; + } + + .footer__creator, + .footer__menu-container .text-b3 { + color: @subtext0; + } + + background-color: @base; + } + + /* I don't think these actually do anything anymore, but they are + still defined in the app. They _might_ be removed in a future release. */ + + /* Backgrounds */ + --bg-surface: @base; + --bg-surface-transparent: fade(@base, 0%); + --bg-surface-low: @mantle; + --bg-surface-low-transparent: fade(@mantle, 0%); + --bg-surface-extra-low: @crust; + --bg-surface-extra-low-transparent: fade(@crust, 0%); + --bg-surface-border: fade(@crust, 20%); + --bg-surface-hover: @surface0; + --bg-surface-active: @surface1; + --bg-overlay: fade(@crust, 60%); + --bg-overlay-low: fade(@crust, 80%); + --bg-primary: @accent; + --bg-primary-hover: fade(@accent, 80%); + --bg-primary-active: fade(@accent, 70%); + --bg-primary-border: fade(@accent, 38%); + --bg-tooltip: @surface0; + --bg-badge: @lavender; + --bg-positive: @green; + --bg-positive-hover: fade(@green, 8%); + --bg-positive-active: fade(@green, 15%); + --bg-positive-border: fade(@green, 40%); + --bg-caution: @peach; + --bg-caution-hover: fade(@peach, 8%); + --bg-caution-active: fade(@peach, 15%); + --bg-caution-border: fade(@peach, 40%); + --bg-danger: @maroon; + --bg-danger-hover: fade(@maroon, 5%); + --bg-danger-active: fade(@maroon, 10%); + --bg-danger-border: fade(@maroon, 20%); + --bg-ping: fade(@green, 40%); + --bg-ping-hover: fade(@green, 50%); + + /* Texts */ + --tc-surface-high: @text; + --tc-surface-normal: @text; + --tc-surface-normal-low: @subtext1; + --tc-surface-low: @subtext0; + --tc-primary-high: @crust; + --tc-primary-normal: @text; + --tc-primary-low: @subtext1; + --tc-tooltip: @subtext0; + --tc-code: @mauve; + --tc-link: @blue; + --tc-badge: @crust; + --tc-positive-high: @green; + --tc-positive-normal: @green; + --tc-positive-low: @green; + --tc-caution-high: @peach; + --tc-caution-normal: @peach; + --tc-caution-low: @peach; + --tc-danger-high: @maroon; + --tc-danger-normal: @maroon; + --tc-danger-low: @maroon; + + /* Icons */ + --ic-surface-high: @text; + --ic-surface-normal: @text; + --ic-surface-low: @subtext1; + --ic-primary-high: @crust; + --ic-primary-normal: @crust; + --ic-primary-low: @crust; + --ic-positive-high: @green; + --ic-positive-normal: @maroon; + --ic-caution-high: @peach; + --ic-caution-normal: @peach; + --ic-danger-high: @maroon; + --ic-danger-normal: @maroon; + } +} diff --git a/styles/claude/README.md b/styles/claude/README.md new file mode 100644 index 0000000000..c64d398cfb --- /dev/null +++ b/styles/claude/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Claude + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [ruiiiijiiiiang](https://github.com/ruiiiijiiiiang) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/claude/catppuccin.user.less b/styles/claude/catppuccin.user.less new file mode 100644 index 0000000000..4d2cee7de0 --- /dev/null +++ b/styles/claude/catppuccin.user.less @@ -0,0 +1,231 @@ +/* ==UserStyle== +@name Claude Catppuccin +@namespace github.com/catppuccin/userstyles/styles/claude +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/claude +@version 2026.04.11.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/claude/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aclaude +@description Soothing pastel theme for Claude +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("claude.ai") { + :root[data-color-version="v2"] { + &[data-mode="dark"] { + #catppuccin(@darkFlavor); + } + &[data-mode="light"] { + #catppuccin(@lightFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --accent-brand: #hslify(@accent)[]; + --accent-000: #hslify(@accent)[]; + --accent-100: #hslify(@accent)[]; + --accent-200: #hslify(lighten(@accent, 5%))[]; + --accent-900: #hslify(darken(@accent, 10%))[]; + --accent-main-000: #hslify(@accent)[]; + --accent-main-100: #hslify(@accent)[]; + --accent-main-200: #hslify(@accent)[]; + --accent-main-900: #hslify(@accent)[]; + --accent-pro-000: #hslify(@accent)[]; + --accent-pro-100: #hslify(@accent)[]; + --accent-pro-200: #hslify(@accent)[]; + --accent-pro-900: #hslify(@accent)[]; + --accent-secondary-000: #hslify(@accent)[]; + --accent-secondary-100: #hslify(@accent)[]; + --accent-secondary-200: #hslify(@accent)[]; + --accent-secondary-900: #hslify(@accent)[]; + --bg-000: #hslify(@surface0)[]; + --bg-100: #hslify(@base)[]; + --bg-200: #hslify(@mantle)[]; + --bg-300: #hslify(@surface0)[]; + --bg-400: #hslify(@surface1)[]; + --bg-500: #hslify(@surface2)[]; + --brand-000: #hslify(@accent)[]; + --brand-100: #hslify(lighten(@accent, 5%))[]; + --brand-200: #hslify(lighten(@accent, 5%))[]; + --brand-900: #hslify(@crust)[]; + --border-000: #hslify(@base)[]; + --border-100: #hslify(@crust)[]; + --border-200: #hslify(@crust)[]; + --border-300: #hslify(@overlay0)[]; + --border-400: #hslify(@overlay1)[]; + --border-500: #hslify(@overlay2)[]; + --danger-000: #hslify(@maroon)[]; + --danger-100: #hslify(@red)[]; + --danger-200: #hslify(@red)[]; + --danger-900: #hslify(@pink)[]; + --oncolor-000: #hslify(darken(@mantle, 5%))[]; + --oncolor-100: #hslify(@mantle)[]; + --oncolor-200: #hslify(@mantle)[]; + --oncolor-300: #hslify(lighten(@mantle, 5%))[]; + --success-000: #hslify(@green)[]; + --success-100: #hslify(lighten(@green, 5%))[]; + --success-200: #hslify(lighten(@green, 5%))[]; + --success-900: #hslify(lighten(@green, 15%))[]; + --text-000: #hslify(darken(@text, 5%))[]; + --text-100: #hslify(@text)[]; + --text-200: #hslify(@text)[]; + --text-300: #hslify(@subtext0)[]; + --text-400: #hslify(@subtext1)[]; + --text-500: #hslify(@subtext0)[]; + --warning-000: #hslify(@yellow)[]; + --warning-100: #hslify(lighten(@yellow, 5%))[]; + --warning-200: #hslify(lighten(@yellow, 5%))[]; + --warning-900: #hslify(lighten(@yellow, 15%))[]; + + /* Side bar */ + nav.\!bg-bg-200 { + background: @mantle !important; + } + + /* Code blocks */ + .code-block__code { + background: @crust !important; + + code { + /* Default color */ + span { + color: @text !important; + } + + /* Green */ + span.token[style="color: rgb(152, 195, 121);"] { + color: @green !important; + } + + /* Yellow */ + span.token[style="color: rgb(209, 154, 102);"] { + color: @yellow !important; + } + + /* Blue */ + span.token[style="color: rgb(97, 175, 239);"] { + color: @blue !important; + } + + /* Red */ + span.token[style="color: rgb(224, 108, 117);"] { + color: @red !important; + } + + /* Magenta */ + span.token[style="color: rgb(198, 120, 221);"] { + color: @mauve !important; + } + + /* Gray */ + span.token[style="color: rgb(171, 178, 191);"] { + color: @overlay2 !important; + } + } + } + + /* Inline code */ + code.text-danger-000 { + color: @accent !important; + } + + /* Tooltip */ + div.bg-black\/80 { + background: @crust !important; + } + div.text-white { + color: @text !important; + } + + /* Logo */ + div.text-\[\#D97757\] { + color: @accent !important; + } + + /* "New chat" plus icon */ + div.text-always-white svg { + color: @base !important; + } + + /* "Subscribe to Pro" and "Create Team Account" buttons */ + button.bg-accent-pro-100 > span.inline-block { + color: @base !important; + } + + /* Pay monthly/annually buttons */ + button.bg-accent-secondary-900 { + span.text-text-000 { + color: @base !important; + } + span.text-text-300 { + color: @surface2 !important; + } + div.bg-accent-secondary-000 { + background: darken(@accent, 15%) !important; + } + } + + /* Delete conversation button */ + div.\!text-danger-000.\[\&\[data-highlighted\]\]\:bg-danger-900[data-highlighted] { + background: fade(@red, 20%) !important; + } + + /* Checkbox */ + input[type="checkbox"] + div.bg-bg-000 { + background: @text !important; + } + + /* "Add writing example" button */ + button.\!text-accent-secondary-100.bg-accent-secondary-900 { + color: @base !important; + &:hover { + color: @text !important; + } + } + + /* "Describe your style" list */ + button.\!bg-accent-secondary-900.text-accent-secondary-000 { + color: @base !important; + } + + /* "Be as descriptive as possible..." helper text */ + div.bg-accent-secondary-900.text-text-200 { + color: @base !important; + } + + /* "Preview with an example..." pills */ + button.hover\:bg-accent-secondary-900.hover\:text-accent-secondary-000 { + color: @accent !important; + &:hover { + color: @base !important; + } + } + + /* "Previewing with ..." dropdown button */ + button.\!text-accent-secondary-100.hover\:\!bg-accent-secondary-900 { + color: @accent !important; + &:hover { + color: @base !important; + } + } + + /* White background (e.g., toggle switch thumb) */ + .bg-white { + background-color: @text; + } + } +} + +#hslify(@color) { + @raw: e(%("%s %s% %s%", hue(@color), saturation(@color), lightness(@color))); +} diff --git a/styles/cobalt/README.md b/styles/cobalt/README.md new file mode 100644 index 0000000000..31effbfe17 --- /dev/null +++ b/styles/cobalt/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for cobalt + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [kerichdev](https://github.com/kerichdev) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/cobalt/catppuccin.user.less b/styles/cobalt/catppuccin.user.less new file mode 100644 index 0000000000..0e10aa4fb2 --- /dev/null +++ b/styles/cobalt/catppuccin.user.less @@ -0,0 +1,105 @@ +/* ==UserStyle== +@name cobalt Catppuccin +@namespace github.com/catppuccin/userstyles/styles/cobalt +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/cobalt +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/cobalt/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acobalt +@description Soothing pastel theme for cobalt +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("cobalt.tools") { + [data-theme="dark"] { + #catppuccin(@darkFlavor); + } + [data-theme="light"] { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --primary: @base; + --secondary: @text; + --gray: @subtext0; + --blue: @blue; + --green: @green; + --red: @maroon; + --medium-red: @red; + --dark-red: @red; + --white: @crust; + --button: @surface0; + --button-hover: darken(@surface0, 5%); + --button-active-hover: darken(@subtext0, 5%); + --button-elevated: @surface1; + --button-elevated-hover: darken(@surface1, 5%); + --button-text: @text; + --sidebar-bg: @mantle; + --sidebar-hover: @surface0; + --sidebar-highlight: @text; + --input-border: @surface2; + --popup-bg: @mantle; + --toggle-bg-enabled: @accent; + + #donate-page { + --donate-gradient-start: @surface1 !important; + --donate-gradient-end: @surface0 !important; + } + + #banner-left { + color: @text; + } + + #banner-subtitle { + color: @subtext0; + opacity: 1; + } + + .donate-card button { + color: @text !important; + } + + .donate-card { + color: @text; + } + + .donate-card-title { + color: @text; + } + + .donate-card-subtitle { + color: @subtext0; + opacity: 1; + } + + #input-container.focused { + box-shadow: 0 0 0 2px @text inset !important; + } + + #input-dollar-sign { + color: @text; + } + + #donation-custom-input { + color: @text !important; + } + + #cobalt-logo path { + fill: @text; + } + + .sidebar-tab.active { + background-color: @accent !important; + } + } +} diff --git a/styles/codeberg/README.md b/styles/codeberg/README.md index 1125408039..c8663c5ca1 100644 --- a/styles/codeberg/README.md +++ b/styles/codeberg/README.md @@ -10,39 +10,18 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
+## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). -## 🙋 FAQ -- Q: How do I change the accent color? - A: Changing `--color-primary` to any other color should change the accent color in most places +## 💝 Current Maintainer +- [isabelroses](https://github.com/isabelroses) -## 💝 Current Maintainer(s) +## 💖 Past Maintainer - [justTOBBI](https://github.com/justTOBBI)   diff --git a/styles/codeberg/assets/catwalk.webp b/styles/codeberg/assets/catwalk.webp deleted file mode 100644 index 614695c8dd..0000000000 --- a/styles/codeberg/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6467062df3f60f4d23f160afd2b4833b24eaed85a18c90b4d98a9bd2113d35b7 -size 337012 diff --git a/styles/codeberg/assets/frappe.webp b/styles/codeberg/assets/frappe.webp deleted file mode 100644 index dbdb47ac96..0000000000 --- a/styles/codeberg/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c7828deebd7221eb22bfdd1ee917197bd8599dc63b54226318d51b05987abb96 -size 54298 diff --git a/styles/codeberg/assets/latte.webp b/styles/codeberg/assets/latte.webp deleted file mode 100644 index e9aff054de..0000000000 --- a/styles/codeberg/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b568011cce9cef6e8dbd76bce8b4df95dc551a06e9508416bcfc34f8be9aece8 -size 61172 diff --git a/styles/codeberg/assets/macchiato.webp b/styles/codeberg/assets/macchiato.webp deleted file mode 100644 index 1465b51f66..0000000000 --- a/styles/codeberg/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:5c6d4b3926a1dda5dc447161c160798ef3ff0e8f5199f5753f090922893e1669 -size 56784 diff --git a/styles/codeberg/assets/mocha.webp b/styles/codeberg/assets/mocha.webp deleted file mode 100644 index c1c9a870e5..0000000000 --- a/styles/codeberg/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4bc1bba8c77f313fd27d554aa05877a8b6ca1f6bb275ddb5b6fc9469a4ed28f3 -size 59224 diff --git a/styles/codeberg/catppuccin.user.css b/styles/codeberg/catppuccin.user.css deleted file mode 100644 index a3f72c60da..0000000000 --- a/styles/codeberg/catppuccin.user.css +++ /dev/null @@ -1,531 +0,0 @@ -/* ==UserStyle== -@name Catppuccin Codeberg -@namespace github.com/catppuccin/userstyles/styles/codeberg -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/codeberg -@version 1.0.2 -@description Soothing pastel theme for Codeberg -@author Catppuccin -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/codeberg/catppuccin.user.css -@license MIT - -@preprocessor stylus -@var select flavor "Flavor" ["Latte", "Frappe", "Macchiato", "Mocha*"] -@var checkbox navbar-color "Use dark navbar-color" 0 -==/UserStyle== */ - -@-moz-document domain("codeberg.org") { - if (flavor=="Latte") { - $type = light - - $rosewater = hsl(10.8, 58.8%, 66.7%) - $flamingo = hsl(0, 59.8%, 66.9%) - $pink = hsl(316, 73.4%, 69%) - $mauve = hsl(266, 85%, 58%) - $red = hsl(347.1, 86.7%, 44.1%) - $maroon = hsl(354.8, 76.3%, 58.6%) - $peach = hsl(22, 99.2%, 52%) - $yellow = hsl(34.9, 77%, 49.4%) - $green = hsl(109.2, 57.6%, 39.8%) - $teal = hsl(183.2, 73.9%, 34.5%) - $sky = hsl(197.1, 96.6%, 45.7%) - $sapphire = hsl(188.9, 70%, 41.8%) - $blue = hsl(219.9, 91.5%, 53.9%) - $lavender = hsl(230.9, 97.2%, 72%) - $text = hsl(233.8, 16%, 35.5%) - $subtext1 = hsl(233.3, 12.8%, 41.4%) - $subtext0 = hsl(232.8, 10.4%, 47.3%) - $overlay2 = hsl(232.2, 9.6%, 53.1%) - $overlay1 = hsl(231.4, 10%, 59%) - $overlay0 = hsl(228, 11.2%, 65.1%) - $surface2 = hsl(226.7, 12.2%, 71%) - $surface1 = hsl(225, 13.6%, 76.9%) - $surface0 = hsl(222.9, 15.9%, 82.7%) - $base = hsl(220, 23.1%, 94.9%) - $mantle = hsl(220, 22%, 92%) - $crust = hsl(220, 20.7%, 88.6%) - } - else if (flavor=="Frappe") { - $type = dark - - $rosewater = hsl(10.3, 57.4%, 88%) - $flamingo = hsl(0, 58.5%, 83.9%) - $pink = hsl(316, 73.2%, 83.9%) - $mauve = hsl(276.7, 59%, 76.1%) - $red = hsl(358.8, 67.8%, 70.8%) - $maroon = hsl(357.8, 65.9%, 75.9%) - $peach = hsl(20.3, 79.1%, 70%) - $yellow = hsl(39.5, 62%, 73.1%) - $green = hsl(95.8, 43.9%, 67.8%) - $teal = hsl(171.5, 39.2%, 64.5%) - $sky = hsl(189.1, 47.8%, 72.9%) - $sapphire = hsl(198.6, 55.4%, 69.2%) - $blue = hsl(221.6, 74.2%, 74.1%) - $lavender = hsl(238.9, 66.3%, 83.7%) - $text = hsl(227.2, 70.1%, 86.9%) - $subtext1 = hsl(226.7, 43.7%, 79.8%) - $subtext0 = hsl(228.3, 29.5%, 72.7%) - $overlay2 = hsl(227.7, 22.3%, 65.7%) - $overlay1 = hsl(226.7, 17%, 58.4%) - $overlay0 = hsl(229.1, 13.4%, 51.6%) - $surface2 = hsl(228, 13.3%, 44.3%) - $surface1 = hsl(227.1, 14.7%, 37.3%) - $surface0 = hsl(230, 15.6%, 30.2%) - $base = hsl(229.1, 18.6%, 23.1%) - $mantle = hsl(230.5, 18.8%, 19.8%) - $crust = hsl(229.4, 19.5%, 17.1%) - } - else if (flavor=="Macchiato") { - $type = dark - - $rosewater = hsl(10, 57.7%, 89.8%) - $flamingo = hsl(0, 58.3%, 85.9%) - $pink = hsl(316.1, 73.7%, 85.1%) - $mauve = hsl(266.5, 82.7%, 79.6%) - $red = hsl(351.2, 73.9%, 72.9%) - $maroon = hsl(355.1, 71.4%, 76.7%) - $peach = hsl(21.4, 85.5%, 72.9%) - $yellow = hsl(40.3, 69.9%, 77.8%) - $green = hsl(105.2, 48.3%, 72%) - $teal = hsl(171.1, 46.8%, 69%) - $sky = hsl(188.8, 59.4%, 72.9%) - $sapphire = hsl(198.6, 65.6%, 69.2%) - $blue = hsl(220.2, 82.8%, 74.9%) - $lavender = hsl(234.5, 82.3%, 84.5%) - $text = hsl(227.4, 68.3%, 87.6%) - $subtext1 = hsl(228, 39.2%, 80%) - $subtext0 = hsl(227.4, 26.8%, 72.2%) - $overlay2 = hsl(228.3, 20%, 64.7%) - $overlay1 = hsl(227.6, 15.5%, 56.9%) - $overlay0 = hsl(230.3, 12.4%, 49.2%) - $surface2 = hsl(229.7, 13.7%, 41.4%) - $surface1 = hsl(231.1, 15.6%, 33.9%) - $surface0 = hsl(230.4, 18.8%, 26.1%) - $base = hsl(231.8, 23.4%, 18.4%) - $mantle = hsl(233.3, 23.1%, 15.3%) - $crust = hsl(235.7, 22.6%, 12.2%) - } - else if (flavor=="Mocha") { - $type = dark - - $rosewater = hsl(9.6, 55.6%, 91.2%) - $flamingo = hsl(0, 58.7%, 87.6%) - $pink = hsl(316.5, 71.8%, 86.1%) - $mauve = hsl(267.4, 83.5%, 81%) - $red = hsl(343.3, 81.2%, 74.9%) - $maroon = hsl(350.4, 65.2%, 77.5%) - $peach = hsl(23, 92%, 75.5%) - $yellow = hsl(41.4, 86%, 83.1%) - $green = hsl(115.5, 54.1%, 76.1%) - $teal = hsl(170, 57.4%, 73.3%) - $sky = hsl(189.2, 71%, 72.9%) - $sapphire = hsl(198.5, 75.9%, 69%) - $lavender = hsl(231.9, 97.4%, 85.1%) - $blue = hsl(217.2, 91.9%, 75.9%) - $text = hsl(226.2, 63.9%, 88%) - $subtext1 = hsl(226.7, 35.3%, 80%) - $subtext0 = hsl(227.6, 23.6%, 71.8%) - $overlay2 = hsl(228.4, 16.8%, 63.7%) - $overlay1 = hsl(229.7, 12.8%, 55.5%) - $overlay0 = hsl(230.8, 10.7%, 47.5%) - $surface2 = hsl(232.5, 12%, 39.2%) - $surface1 = hsl(234.3, 13.2%, 31.2%) - $surface0 = hsl(236.8, 16.2%, 22.9%) - $base = hsl(240, 21.1%, 14.9%) - $mantle = hsl(240, 21.3%, 12%) - $crust = hsl(240, 22.7%, 8.6%) - } - - - :root { - --color-body: $base; - --color-text: $text; - --color-text-light: $subtext0; - --color-text-light-2: $subtext1; - --color-text-light-3: $subtext1; - --color-text-dark: $subtext0; - --color-text-dark-2: $subtext1; - --color-text-dark-3: $subtext1; - --color-secondary: $surface1; - --color-caret: $text; - --color-navbar: $surface0; - --color-footer: $surface0; - - --color-red: $red; - --color-orange: $peach; - --color-yellow: $yellow; - --color-olive: $green; - --color-green: $green; - --color-teal: $teal; - --color-blue: $blue; - --color-violet: $mauve; - --color-purple: $mauve; - --color-grey: $overlay0; - --color-gold: $yellow; - --color-red-light: $red; - --color-orange-light: $peach; - --color-yellow-light: $yellow; - --color-olive-light: $green; - --color-green-light: $green; - --color-teal-light: $teal; - --color-blue-light: $blue; - --color-violet-light: $mauve; - --color-purple-light: $mauve; - --color-grey-light: $overlay2; - --color-gold-light: $yellow; - --color-black: $crust; - --color-white: $text; - - --color-primary: $blue; - - --color-console-fg: $text; - --color-console-bg: $base; - - --color-error-border: $maroon; - --color-error-bg: $overlay0; - --color-error-text: $subtext1; - - --color-success-border: $green; - --color-success-bg: $overlay0; - --color-success-text: $subtext1; - - --color-warning-border: $orange; - --color-warning-bg: $overlay1; - --color-warning-text: $subtext1; - - --color-info-border: $overlay0; - --color-info-bg: $surface0; - --color-info-text: $subtext1; - - --color-box-header: $surface1; - --color-box-body: $surface0; - - --color-markup-code-block: $surface2; - - --color-input-background: $base; - --color-input-border: $surface1; - --color-input-text: $text; - - --color-card: $surface0; - - --color-active: $surface0; - --color-menu: $surface1; - - --color-button: $overlay0; - --color-light-border: $surface1; - --color-dark-border: $overlay0; - - --color-diff-removed-row-bg: rgba($red, 0.2)!important; - --color-diff-removed-row-border: rgba($red, 0.2)!important; - --color-diff-removed-word-bg: rgba($red, 0.4)!important; - - --color-diff-added-row-bg: rgba($green, 0.2)!important; - --color-diff-added-row-border: rgba($green, 0.2)!important; - --color-diff-added-word-bg: rgba($green, 0.4)!important; - - --color-diff-inactive: $surface1; - - --color-code-bg: $surface0; - --color-expand-button: $surface1; - } - - - body { - background-color: $base; - color: $text; - - } - - div#navbar.ui.container { - background-color: $blue !important; - color: $base !important; - } - - if navbar-color { - div#navbar.ui.container { - background-color: $mantle !important; - color: $text !important; - } - } - - th, - textarea, - h4.ui.top.attached.error.header, - div.ui.red.message, - div.ui.segment.sub-menu.repository-menu, - nav.navbar, - div.sidebar, - div.sidebar-menu, - div.card, - div.menu.left.transition.visible, - div.menu.user-menu.left.transition.visible, - a.item.active - input, - div.ui.dropdown.icon.button, - div.ui.borderless.pagination.menu.narrow, - span.name, - blockquote.alert { - background-color: $mantle !important; - color: $text !important; - transition: 0.5s; - } - - div.extra.content.word-break, - td.name, - td.message, - td.text { - border-color: $surface1 !important; - } - - div.ui.top.attached.header.clearing.segment.pr.commit-header, - footer, - h1, - h3, - h4 { - background-color: $mantle !important; - } - - div.ui.compact.tiny.menu, - div.ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar, - div.ui.attached.segment, - div.ui.borderless.pagination.menu, - div.ui.two.item.tabable.menu, - div.ui.secondary.tiny.pointing.borderless.menu.center.grid.repos-filter, - div.header-wrapper, - div.ui.attached.segment.df.ac.sb.py-2.commit-header-row.fw, - div.file-view.markup.markdown, - div.ui.attached.segment.repos-search, - div.ui.attached.table.segment.rounded-bottom { - background-color: $base !important; - } - - span.ui.grey.label.ml-3, - div.ui.circular.mini.grey.label, - div.divider, - button.btn.btn-primary, - div.ui.language.bottom.floating.slide.up.dropdown.link.item.button { - background-color: $surface0 !important; - } - - tr { - background-color: $base !important; - } - - .blob-excerpt.lines-code { - background-color: $mantle !important; - } - .chroma.lines-code { - background-color: transparent !important; - } - .add-code { - background-color: alpha($green, 0.1) !important; - } - .added-code { - background-color: alpha($green, 0.15) !important; - color: $text !important; - } - .del-code { - background-color: alpha($red, 0.1) !important; - } - .removed-code { - background-color: alpha($red, 0.15) !important; - color: $text !important; - } - code.code-inner { - color: $overlay1 !important; - } - tr.tag-code.nl-0.ol-0, td.lines-num, td.lines-type-marker { - background-color: alpha($blue, 0.1) !important; - } - - kbd, - code { - background-color: transparent !important; - color: $text !important; - } - - span.c1 { - color: $overlay1 !important; - } - span.s1 { - color: $peach !important; - } - span.token.string, - span.s2 { - color: $green !important; - } - span.n { - color: $text !important; - } - span.o, - span.kc, - span.kd, - span.kr { - color: $red !important; - } - span.nf { - color: $blue !important; - } - span.token.function, - span.mi { - color: $teal !important; - } - - nav.navbar { - border: none !important; - } - - pre { - background-color: $mantle !important; - border-color: $blue !important; - } - - a.ui.primary.sha.label, - span.ui.primary.sha.label { - background-color: $mantle !important; - } - - h1, - a, - a.header-anchor, - a.item { - background-color: transparent !important; - color: $blue !important; - transition: 0.5s; - } - - a:hover, - a.item:hover, - span.name:hover { - background-color: transparent !important; - color: $green !important; - transition: 0.5s; - } - - .ui.table { - color: $text; - } - - .repository-summary { - background-color: $surface0; - } - - .ui.green.button { - background-color: $green; - color: $base; - } - - .ui.red.button { - background-color: $red; - color: $base; - border-color: $overlay0; - } - - .ui.basic.red.button { - color: $red; - } - - - .ui.negative.button { - background-color: $red; - color: $base; - } - - .ui.basic.green.button { - color: $green; - } - - .ui.breadcrumb { - color: $text; - } - - .following.bar #navbar { - background-color: $blue !important; - - } - - #navbar .item { - color: $surface0; - } - - - * { - caret-color: $text; - } - - @media (prefers-color-scheme: dark) { - .ui.red.label, .ui.red.labels .label { - background-color: $red!important; - border-color: $red!important; - color: $base!important; - } - .ui.green.label, .ui.green.labels, .ui.basic.green.label { - background-color: $green!important; - border-color: $green!important; - color: $base!important; - } - - .repository.file.list #repo-files-table tr { - background-color: $base; - } - .repository.file.list #repo-files-table tr:hover { - background-color: $surface1!important; - } - - .ui.horizontal.segments>.segment { - background-color: $surface0; - } - - .tag-code td.lines-type-marker, td.blob-hunk { - color: $text!important; - } - - .tag-code, .tag-code td { - background: $surface1!important; - } - - .tag-code td.lines-num { - background-color: $surface1!important; - } - - .chroma .sb { - color: $subtext1; - } - - .chroma .nt { - color: rgba($mauve, 0.7)!important; - } - - .chroma .na { - color: rgba($teal, 0.7)!important; - } - - .chroma .nb { - color: rgba($mauve, 0.7); - } - - .chroma .s2 { - color: rgba($teal, 0.7); - } - - .chroma .si { - color: rgba($peach, 0.6); - } - - .chroma .nv { - color: rgba($peach, 0.6); - } - - .chroma .nx { - color: $text; - } - - .chroma .nf { - color: $yellow; - } - - .chroma .s { - color: rgba($teal, 0.7); - } - - } -} diff --git a/styles/codeberg/catppuccin.user.less b/styles/codeberg/catppuccin.user.less new file mode 100644 index 0000000000..fb8a443482 --- /dev/null +++ b/styles/codeberg/catppuccin.user.less @@ -0,0 +1,109 @@ +/* ==UserStyle== +@name Codeberg Catppuccin +@namespace github.com/catppuccin/userstyles/styles/codeberg +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/codeberg +@version 2026.04.16 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/codeberg/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acodeberg +@description Soothing pastel theme for Codeberg +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("codeberg.org") { + @import (css) + url("https://catppuccin.github.io/gitea/theme-catppuccin-@{lightFlavor}-@{accentColor}.css") + (prefers-color-scheme: light); + @import (css) + url("https://catppuccin.github.io/gitea/theme-catppuccin-@{darkFlavor}-@{accentColor}.css") + (prefers-color-scheme: dark); +} + +@-moz-document domain("codeberg.org") { + [data-theme="codeberg-dark"], + [data-theme="codeberg-light"], + [data-theme="codeberg-auto"] { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + // #lib.defaults(); // Not needed, themed in upstream Gitea port. + + --color-body: @base; + --color-nav-text: @crust; + --color-nav-hover-bg: darken(@accent, 5%); + --color-secondary-nav-bg: @surface0; + --color-link: @blue; + --color-footer-text: @text; + + .ui.basic.red.buttons .button, + .ui.basic.red.button { + &:hover, + &:focus { + background-color: @red; + border-color: var(--color-light-border); + color: @crust; + } + } + + #codeberg-logo(@color) { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .branding { + img[src^="https://design.codeberg.org/logo-kit/"] { + #codeberg-logo(@text); + } + } + + #navbar { + a#navbar-logo { + img { + #codeberg-logo(@base); + } + } + + .menu { + > a, button, details > summary { + color: @base; + } + + .donation-pretty { + --color-secondary-alpha-60: fade(darken(@accent, 10%), 60%) + !important; + + &:hover { + background: darken(@accent, 3%) !important; + } + } + } + } + + footer { + .button:hover { + background-color: @accent; + color: @crust; + } + + a:hover { + color: @blue !important; + } + } + } +} diff --git a/styles/crates.io/README.md b/styles/crates.io/README.md new file mode 100644 index 0000000000..10a0778baf --- /dev/null +++ b/styles/crates.io/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for crates.io + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/crates.io/catppuccin.user.less b/styles/crates.io/catppuccin.user.less new file mode 100644 index 0000000000..8b983f5871 --- /dev/null +++ b/styles/crates.io/catppuccin.user.less @@ -0,0 +1,260 @@ +/* ==UserStyle== +@name crates.io Catppuccin +@namespace github.com/catppuccin/userstyles/styles/crates.io +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/crates.io +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/crates.io/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acrates.io +@description Soothing pastel theme for crates.io +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("crates.io") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + + code.hljs { + background: none !important; + } + + :root[data-color-scheme="system"] { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + :root[data-color-scheme="dark"] { + #catppuccin(@darkFlavor); + } + :root[data-color-scheme="light"] { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + &, + * { + --shadow: none !important; + --csstools-color-scheme--dark: none; + + --header-bg-color: @mantle; + --main-color: @text; + --main-color-light: @subtext1; + --main-shadow-color: @surface0; + --main-bg: @mantle; + --main-bg-dark: @base; + --gray-border: @surface0; + --link-color: @accent; + --link-hover-color: darken(@accent, 5%); + --footer-header-color: @text; + + /* Main article/readme background */ + --csstools-light-dark-toggle--63: @base; + + /* Inline code background */ + --csstools-light-dark-toggle--92: @mantle; + /* Code block background */ + --csstools-light-dark-toggle--91: @mantle; + /* Copyable text hover */ + --csstools-light-dark-toggle--78: @base; + + /* Versions cards */ + --csstools-light-dark-toggle--111: @text; + --csstools-light-dark-toggle--113: @base; + --csstools-light-dark-toggle--114: fade(@green, 15%); + --csstools-light-dark-toggle--117: fade(@yellow, 15%); + --csstools-light-dark-toggle--109: @surface0; + --csstools-light-dark-toggle--110: @surface0; + --csstools-light-dark-toggle--115: @surface0; + --csstools-light-dark-toggle--118: @surface0; + --csstools-light-dark-toggle--126: @text; + [class*="_new"] { + color: @green; + } + /* Dependencies cards */ + --csstools-light-dark-toggle--83: @base; + --csstools-light-dark-toggle--79: @surface0; + --csstools-light-dark-toggle--80: @text; + --csstools-light-dark-toggle--81: @text; + --csstools-light-dark-toggle--84: @subtext0; + --grey600: @subtext0; + --grey700: @text; + /* Dependents cards */ + --csstools-light-dark-toggle--89: @base; + --csstools-light-dark-toggle--86: @surface0; + /* Search results cards */ + --csstools-light-dark-toggle--2: @base; + /* Homepage cards */ + --csstools-light-dark-toggle--74: @base; + --csstools-light-dark-toggle--77: @surface0; + --csstools-light-dark-toggle--75: @subtext1; + --csstools-light-dark-toggle--76: @text; + --csstools-light-dark-toggle--19: @subtext0; + --csstools-light-dark-toggle--20: @subtext0; + + /* Header search bar */ + --csstools-light-dark-toggle--34: @crust; + --yellow500: @accent; + --yellow700: darken(@accent, 5%); + + /* Dropdown */ + --csstools-light-dark-toggle--23: @mantle; + --csstools-light-dark-toggle--35: @mantle; + /* Dropdown items */ + [class*="_item_"] { + button:hover, + > a:hover, + [class*="_selected_"] { + background: @surface0; + color: @text !important; + } + } + } + + /* Toasts */ + .c-notification { + --ecn-green: @green; + --ecn-blue: @blue; + --ecn-orange: @peach; + --ecn-red: @red; + + &, + .c-notification__icon { + color: @crust; + } + } + + /* Tooltips */ + .ember-tooltip { + color: @text; + background-color: @crust; + text-shadow: none; + + &[x-placement^="top"] .ember-tooltip-arrow { + border-top-color: @crust; + } + } + + /* Icons and icon badges */ + [class*="downloads_"] [fill="#FFF"] { + fill: @surface0 !important; + } + [fill="#B13B89"], + [fill="#B84D94"], + svg[class*="_download-icon"] { + fill: @accent !important; + } + [stroke="#B84D94"] { + stroke: @accent !important; + } + + /* Footer links */ + ._content_hautyr { + h1 { + text-shadow: none; + } + + a { + color: @accent; + + &:hover { + color: darken(@accent, 5%); + text-shadow: none; + } + } + } + + /* Misc header text */ + [class*="_header-inner_"] { + &, + a { + color: @text; + } + } + + /* Search bar magnifying glass icon */ + form[action="/search"] button { + color: @crust; + } + + /* Sort by search results */ + ._icon_xsqxju { + color: @accent; + } + + /* Primary buttons */ + [class*="_tan-button_"], + [class*="_yellow-button_"] { + color: @crust !important; + background: @accent; + + &:hover { + background-color: darken(@accent, 5%); + } + } + + [class*="_red-button_"] { + --bg-color-top: @maroon; + --bg-color-bottom: @maroon; + --bg-color-top-dark: @red; + --bg-color-bottom-dark: @red; + } + + /* User email settings */ + [class*="_me-email_"] { + [class*="_row_"] { + border-color: @surface0; + } + [class*="_verified_"] { + color: @green; + } + } + + /* Logged out home page hero */ + [class*="_hero-title_"] { + color: @text; + text-shadow: none; + } + [class*="_hero-button_"] [class*="_icon_"] { + color: @crust; + } + [class*="_blurb_"] [class*="_stats-value_"] { + [class*="_label_"], + svg { + color: @subtext0; + } + } + + /* User avatar backgrounds */ + [class*="_avatar_"] { + background-color: @surface0; + box-shadow: none; + } + + [class*="_yanked-badge_"] { + background-color: @red; + color: @crust; + } + + /* Tables in READMEs */ + table { + th, + td { + border-color: @surface1; + } + } + } +} diff --git a/styles/crowdin/README.md b/styles/crowdin/README.md index 9ac5c3fae1..071b91ae3f 100644 --- a/styles/crowdin/README.md +++ b/styles/crowdin/README.md @@ -10,38 +10,17 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +## 💝 Current Maintainer +- [ryanccn](https://github.com/ryanccn) -## 💝 Current Maintainer(s) -- [Ryan Cao](https://github.com/ryanccn)   diff --git a/styles/crowdin/assets/catwalk.webp b/styles/crowdin/assets/catwalk.webp deleted file mode 100644 index f652db8bc6..0000000000 --- a/styles/crowdin/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:76db9036e754e9109311d90a900d12f859f7238c56c1c74c9b0762f620e9ddad -size 206804 diff --git a/styles/crowdin/assets/frappe.webp b/styles/crowdin/assets/frappe.webp deleted file mode 100644 index ad222488e5..0000000000 --- a/styles/crowdin/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2f2c8d108aeee5f5313750105bb34a41bbce6630b8fdd05a4117ad6a5bb58f78 -size 164056 diff --git a/styles/crowdin/assets/latte.webp b/styles/crowdin/assets/latte.webp deleted file mode 100644 index 86d510f92e..0000000000 --- a/styles/crowdin/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:01e5585326175ca5184c5b02f972d99a327e4e51d666d8d7f16db0896ce02d9a -size 156428 diff --git a/styles/crowdin/assets/macchiato.webp b/styles/crowdin/assets/macchiato.webp deleted file mode 100644 index b6e7e50e74..0000000000 --- a/styles/crowdin/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:918cb6b70d8c663b38c98bdf73a5389d4cfabec8a9f49b403c950724e7425443 -size 167850 diff --git a/styles/crowdin/assets/mocha.webp b/styles/crowdin/assets/mocha.webp deleted file mode 100644 index ecd1a4a5c9..0000000000 --- a/styles/crowdin/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3b7338c0502277b375a1bfd7aec8aca000d1bf01566a68020a0f07e4b4c6ea09 -size 169096 diff --git a/styles/crowdin/catppuccin.user.css b/styles/crowdin/catppuccin.user.css deleted file mode 100644 index 98c5d2b460..0000000000 --- a/styles/crowdin/catppuccin.user.css +++ /dev/null @@ -1,273 +0,0 @@ -/* ==UserStyle== -@name Crowdin Catppuccin -@namespace github.com/catppuccin/userstyles/styles/crowdin -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/crowdin -@version 0.0.1 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/crowdin/catppuccin.user.css -@description Soothing pastel theme for Crowdin -@author Catppuccin -@license MIT - -@preprocessor less -@var select flavor "Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] -==/UserStyle== */ - -@catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @teala: rgba(23, 146, 153, 0.25); - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @teala: rgba(129, 200, 190, 0.25); - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @teala: rgba(139, 213, 202, 0.25); - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @teala: rgba(148, 226, 213, 0.25); - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; -}; - -@-moz-document regexp("https://crowdin.com(?!/translate).*") -{ - #catppuccin(@flavor); - - #catppuccin(@lookup) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @teala: @catppuccin[@@lookup][@teala]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - :root:root:root:root:root { - --app-bg: @mantle; - --body-bg: @base; - --light-bg: @surface0; - --search-bg: @surface0; - --super-light-bg: @surface1; - --body-color: @text; - --link-hover: @green; - --primary: @green; - --secondary: @rosewater; - --tertiary: @pink; - --primary-btn: @green; - --primary-btn-hover: @teal; - --warning-content: @yellow; - --info: @blue; - --crowdin-primary-blue-gray-05: @surface1; - --crowdin-primary-blue-gray: @overlay0; - } - - .btn-primary, - .btn-primary:hover { - color: @base; - } - - .btn-outline-primary, - .btn-outline-primary:hover { - color: @green; - border-color: @green; - } - } -} - -@-moz-document regexp("https://crowdin.com/translate/.*") -{ - #catppuccin(@flavor); - - #catppuccin(@lookup) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @teala: @catppuccin[@@lookup][@teala]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - - body { - background-color: @mantle !important; - color: @text !important; - } - - #left_panel, - .nav-tabs, - .navbar-inner.editor-navbar, - #discussions_control, - #main_menu { - background-color: @surface0 !important; - } - - #editor-center-layout, - .editor-pane-inner, - #translation_wrapper, - #translation_text_container, - .texts-to-translate-header, - #right_panel, - .texts-to-translate-paging, - #asset_preview_wrapper.no-preview, - .editor-pane-title-and-buttons-helper { - background-color: @base !important; - color: @text !important; - } - - .body.dark-theme #main_menu .nav-pills > li.active > a { - background-color: @blue; - } - - .progress .bar-validate { - background-color: @lavender; - } - .progress .bar-translate { - background-color: @sapphire; - } - - a, - .btn-link { - color: @rosewater !important; - } - } -} diff --git a/styles/crowdin/catppuccin.user.less b/styles/crowdin/catppuccin.user.less new file mode 100644 index 0000000000..406d790080 --- /dev/null +++ b/styles/crowdin/catppuccin.user.less @@ -0,0 +1,120 @@ +/* ==UserStyle== +@name Crowdin Catppuccin +@namespace github.com/catppuccin/userstyles/styles/crowdin +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/crowdin +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/crowdin/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acrowdin +@description Soothing pastel theme for Crowdin +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document regexp("https://crowdin.com(?!/translate).*") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + :root:root:root:root:root { + --app-bg: @mantle; + --body-bg: @base; + --light-bg: @surface0; + --search-bg: @surface0; + --super-light-bg: @surface1; + --body-color: @text; + --link-hover: @green; + --primary: @green; + --secondary: @rosewater; + --tertiary: @pink; + --primary-btn: @green; + --primary-btn-hover: @teal; + --warning-content: @yellow; + --info: @blue; + --crowdin-primary-blue-gray-05: @surface1; + --crowdin-primary-blue-gray: @overlay0; + } + + .btn-primary, + .btn-primary:hover { + color: @base; + } + + .btn-outline-primary, + .btn-outline-primary:hover { + color: @green; + border-color: @green; + } + } +} + +@-moz-document regexp("https://crowdin.com/translate/.*") { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + body { + background-color: @mantle !important; + color: @text !important; + } + + #left_panel, + .nav-tabs, + .navbar-inner.editor-navbar, + #discussions_control, + #main_menu { + background-color: @surface0 !important; + } + + #editor-center-layout, + .editor-pane-inner, + #translation_wrapper, + #translation_text_container, + .texts-to-translate-header, + #right_panel, + .texts-to-translate-paging, + #asset_preview_wrapper.no-preview, + .editor-pane-title-and-buttons-helper { + background-color: @base !important; + color: @text !important; + } + + .body.dark-theme #main_menu .nav-pills > li.active > a { + background-color: @blue; + } + + .progress .bar-validate { + background-color: @lavender; + } + .progress .bar-translate { + background-color: @sapphire; + } + + a, + .btn-link { + color: @rosewater !important; + } + } +} diff --git a/styles/deepl/README.md b/styles/deepl/README.md index ba247bfd71..b54096642a 100644 --- a/styles/deepl/README.md +++ b/styles/deepl/README.md @@ -10,38 +10,17 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +## 💝 Current Maintainer +- [watatomo](https://github.com/watatomo) -## 💝 Current Maintainer(s) -- [Ren](https://github.com/watatomo)   diff --git a/styles/deepl/assets/catwalk.webp b/styles/deepl/assets/catwalk.webp deleted file mode 100644 index f9c4dfc221..0000000000 --- a/styles/deepl/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4aef20f73d0147512fcab6557ce8eb474f17da3738614d443e37c112149eb501 -size 127544 diff --git a/styles/deepl/assets/frappe.webp b/styles/deepl/assets/frappe.webp deleted file mode 100644 index bef007d57d..0000000000 --- a/styles/deepl/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:903fe5cf1535785a566f66a57c2630989df70c7ce168a393e30b52d30a8b48ce -size 21464 diff --git a/styles/deepl/assets/latte.webp b/styles/deepl/assets/latte.webp deleted file mode 100644 index 5e8ee8767b..0000000000 --- a/styles/deepl/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b636c72da5d0bd90df121836f9a2576db50259241e8a5f38a13cce19412de1c3 -size 27592 diff --git a/styles/deepl/assets/macchiato.webp b/styles/deepl/assets/macchiato.webp deleted file mode 100644 index 50def56828..0000000000 --- a/styles/deepl/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7e797a85ca4ed46549500773d938fdd63b3686b43456e18b3f39fd7c43af666d -size 22964 diff --git a/styles/deepl/assets/mocha.webp b/styles/deepl/assets/mocha.webp deleted file mode 100644 index e7677d9ef6..0000000000 --- a/styles/deepl/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:150f3cc245295c36301f4b3e26a0434e1cfaa9ea08cf108adeaa4babaf6e8397 -size 24304 diff --git a/styles/deepl/catppuccin.user.css b/styles/deepl/catppuccin.user.css deleted file mode 100644 index 08a0781592..0000000000 --- a/styles/deepl/catppuccin.user.css +++ /dev/null @@ -1,1058 +0,0 @@ -/* ==UserStyle== -@name DeepL Catppuccin -@namespace github.com/catppuccin/userstyles/styles/deepl -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/deepl -@version 0.2.2 -@description Soothing pastel theme for DeepL -@author Catppuccin -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/deepl/catppuccin.user.css -@license MIT - -@preprocessor less -@var select flavor "Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire*", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] -@var checkbox quotes "Remove Quotes" 0 -@var checkbox header "Remove Header" 0 -@var checkbox footer "Remove Footer" 0 -@var checkbox tabs "Remove Tabs" 0 -@var checkbox dictionary "Remove Dictionary" 0 -@var checkbox removeAds "Remove DeepL Ads" 0 -@var checkbox removeGlossaryButton "Remove Glossary Button" 0 -==/UserStyle== */ -@-moz-document url-prefix("https://www.deepl.com/translator") -{ - :root { - #catppuccin(@flavor, @accentColor); - } - - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-Color: @catppuccin[@@lookup][@@accent]; - - @accent2: mix(@accent-Color, @text, 60%); - - /* text highlight */ - ::selection { - background: fadeout(@accent-Color, 80%) !important; - color: @text !important; - } - - ::-moz-selection { - background: fadeout(@accent-Color, 80%) !important; - color: @text !important; - } - - .dl_body { - color: @subtext1; - } - - button { - color: @text; - } - - [class*="label--"] { - & when (@lookup ="latte") { - --inlineLabelColor: #fff !important; - } - --inlineLabelColor: @crust; - --outline-color: @accent; - --background: @overlay1; - --backgroundHover: mix(@overlay1, @base, 90%); - - &[class*="selected--"] { - --background: @green; - --backgroundHover: mix(@green, @base, 90%); - } - - [class^="toggle--"] { - [class^="knob--"] { - & when (@lookup ="latte") { - background: #fff; - } - background: @crust; - } - } - } - - [class^="wrapper--"] { - --input-background: @base; - --input-border-color: @surface1; - --input-color: @subtext1; - --button-background: @base; - --button-border-color: @surface1; - --button-color: @subtext1; - - [class^="flyout--"] { - --option-color: @subtext1; - --option-icon-color: @accent; - background: @surface0; - - [class^="option--"][class*="unavailable--"] { - --option-color: @overlay1; - --option-icon-color: @subtext0; - } - - &[class*="withBorderOnFlyout--"] { - --border: 1px solid @surface2; - } - } - } - - [class^="form--"] { - [class^="submit--"] { - & when (@lookup ="latte") { - color: @base; - } - color: @crust; - background: @accent2; - - &:disabled { - background: fadeout(@accent2, 50%); - } - } - } - - .text-deepl-blue { - color: @accent2; - } - - .text-deprecated-grey-darker { - color: @subtext1; - } - - .bg-white { - background-color: @base; - } - - .border-dark-7 { - border-color: @surface1; - } - - .dl_body--redesign { - background-color: @mantle !important; - } - - [class*="button--"][class*="color_primary--"] { - border-color: @accent2; - background-color: @accent2; - color: @accent2; - } - - [class*="button--"][class*="variant_contained--"], - .dark [class*="button--"][class*="variant_contained--"] { - & when (@lookup ="latte") { - color: #fff; - } - color: @crust; - } - - [class*="button--"].variant_text--gozza, - .dark [class*="button--"].variant_text--gozza { - background-color: transparent; - } ///// - .eSEOtericText { - color: @overlay1; - } - - .dl_header { - &, - &::before { - background-color: @crust !important; - } - } - - .dl_header_menu_v2__links__item { - &, - &:visited, - &:active, - &:focus { - color: @accent2; - } - } - - .dl_headerMenu__proButton { - background-color: @accent-Color; - & when (@lookup ="latte") { - color: #fff; - } - color: @crust; - &:hover { - background-color: darken(@accent-Color, 30%); - & when (@lookup ="latte") { - color: #fff; - } - color: @crust; - } - } - - .dl_header_menu_v2__login_button_simple > button { - color: @accent2; - - &:hover { - color: @accent-Color; - } - } - - .dl_header_menu_v2__buttons__menu > button { - &::before, - &::after { - color: @accent2; - } - - &:hover { - &::before, - &::after { - color: @accent-Color; - } - } - } - - .dl_headerMenu__freeBadge, - .dl_headerMenu__fadeoutBadge { - background-color: spin(@accent-Color, -40deg); - & when (@lookup ="latte") { - color: #fff; - } - color: @crust; - } - - .dl_header_menu_v2__links__item.dl_translator_link:not(.nohover):hover { - color: @accent-Color; - } - - .dl_header_menu_v2__links__item:not(.nohover):hover, - .dl_header_menu_v2__links__item.is-active { - border-bottom-color: @accent-Color; - color: @accent-Color; - } - - #new-menu-container { - [class^="menuContainer--"] { - background-color: @base; - } - - [class^="container--"] a { - color: @text; - - &:hover { - color: @accent; - } - } - - [class^="mainContent--"] + [class^="mainContent--"] { - border-top-color: @surface1; - } - - [class^="closeButton"] { - &::before, - &::after { - background-color: @subtext0; - } - - &:hover { - &::before, - &::after { - background-color: @accent-Color; - } - } - } - } - .lmt--web .lmt__language_container .lmt__language_container_switch:hover, - .lmt--web .lmt__language_container .lmt__language_container_switch:focus { - color: @accent-Color; - } - - .lmt__docTrans-tab-container { - [class^="cardButton--"] { - background-color: @base; - border-color: @surface1; - - &:not([class*="active--"]):hover { - background-color: @surface0; - } - } - - [class^="textLower--"] { - color: @overlay2; - } - - [class*="logo"], - [class^="textUpper--"] { - color: @accent-Color; - } - - [class*="active--"] { - [class*="logo"], - [class^="textUpper--"] { - color: @text; - } - - [class^="innerLower--"] { - background-color: @accent-Color; - } - } - } - - .lmt--web .lmt__sides_container, - #doc-trans-source-panel, - #doc-trans-target-panel { - border-color: @surface1; - } - - .integratedLanguageSelectors - .lmt--web - .lmt__sides_container - .lmt__language_container, - .dl_body--redesign .lmt--web .lmt__textarea_container, - .lmt__doc .lmt__language_container #doc-trans-source-panel, - [class^="docTrans__help_popup--"], - #doc-trans-target-panel { - background: @base; - } - - #doc-trans-source-panel, - #doc-trans-target-panel { - [class^="header--"] { - border-bottom-color: @surface2; - } - } - - /* new popup */ - .root--Frqwa { - background-color: @surface0; - } - .selected--bDLH4 { - background-color: @surface1; - } - .divider--v710V { - color: @surface2; - } - - .dl_body--redesign .lmt--web .lmt__source_textarea__length_marker { - color: @subtext0; - } - - .dl_help-popup_assist-text { - color: @overlay1; - } - - .dl_body--redesign - .lmt--web - .lmt__language_select - .lmt__language_select__active { - color: @subtext0; - } - - .lmt--web .lmt__language_select > .lmt__language_select__active { - strong { - color: @accent2; - } - - &:hover { - strong, - .lmt__language_select__opener { - color: @accent-Color; - } - } - } - - .lmt--web .lmt__textarea { - &, - textarea { - color: @text; - } - } - - .lmt--web .lmt__textarea.lmt__textarea--inactive { - color: @overlay2 !important; - } - - .lmt__source_textarea_overlay - .lmt__source_textarea_overlay__sentence--active { - color: @accent2; - background-color: @base; - } - - .integratedLanguageSelectors - .lmt--web - .lmt__sides_container - .lmt__side_container.lmt__side_container--source - .lmt__textarea_container { - border-right-color: @surface1; - border-top-color: @surface1; - } - - .integratedLanguageSelectors - .lmt--web - .lmt__sides_container - .lmt__side_container.lmt__side_container--target - .lmt__textarea_container { - border-top-color: @surface1 !important; - } - - .lmt--showing_alternatives .lmt__translations_as_text::before, - .lmt--web .lmt__translations_as_text h4::before { - border-top-color: @surface1; - } - - .lmt--web .lmt__translations_as_text h4 { - color: @overlay1; - } - - .dl_body--redesign - .lmt--web - .lmt__textarea_container.lmt__textarea_container--focus, - .integratedLanguageSelectors - .lmt--web - .lmt__sides_container.lmt__sides_container--focus_source - .lmt__side_container.lmt__side_container--source - .lmt__textarea_container, - .integratedLanguageSelectors - .lmt--web - .lmt__sides_container.lmt__sides_container--focus_target - .lmt__side_container.lmt__side_container--target - .lmt__textarea_container { - border: 1px solid @accent-Color !important; - } - - .lmt--web .lmt__language_container .lmt__language_container_switch { - color: @accent2; - } - - @keyframes lmt_textarea__busy_animation_ctp { - 0% { - box-shadow: - inset 0 0 0px 0 @base, - inset 0 0 0px 0px rgba(14, 43, 70, 0); - } - - 10% { - box-shadow: - inset 0 0 0px 1px @base, - inset 0 0 0px 2px rgba(14, 43, 70, 0.5); - } - - 20% { - box-shadow: - inset 0 0 1px 3px @base, - inset 0 0 1px 4px rgba(14, 43, 70, 0.5); - } - - 40% { - box-shadow: - inset 0 0 1px 8px @base, - inset 0 0 1px 8px rgba(14, 43, 70, 0.3); - } - } - - .lmt--active_translation_request.lmt--active_translation_request--with_target_has_content - .lmt__side_container--target - .lmt__inner_textarea_container { - animation: lmt_textarea__busy_animation_ctp 1.5s 2.5s linear infinite; - box-shadow: - inset 0 0 1px 14px @base, - inset 0 0 0px rgba(0, 0, 0, 0); - } - - .lmt__toolbar_container, - [data-testid="deepl-ui-tooltip-container"] { - span > button:hover { - background-color: @surface0 !important; - } - } - - .lmt__clear_text_button_wrapper { - [class*="button--"] { - &:active:enabled, - &:hover:enabled { - color: @accent-Color; - } - } - } // language selector - .lmt__language_select__menu.lmt__language_select__menu_three_columns { - &, - input { - background-color: @base; - } - border-color: @surface1; - } - - .lmt__language_select__menu .lmt__dropdown_item_inside_container, - .lmt__language_select__menu - .lmt__formalitySwitch__menu_items - > div - > button, - .lmt__language_select__menu - .lmt__formalitySwitch__menu_items - > div - > div - > button, - .lmt__language_select__menu > div > button, - .lmt__language_select__menu > div > div > button { - color: @subtext1; - } - - .lmt__language_select__menu.lmt__language_select__menu_three_columns - .lmt__language_wrapper - .lmt__language_select_column - button:hover, - .lmt__language_select__menu.lmt__language_select__menu_three_columns - .lmt__language_wrapper - .lmt__language_select_column - button.highlighted { - background-color: fadeout(@yellow, 0.3); - } - - .lmt__language_select__menu.lmt__language_select__menu_three_columns - .lmt__language_wrapper - .lmt__language_select_column { - border-right-color: @surface1; - } - - .lmt--web .lmt__language_select__menu_three_columns_close_button { - color: @accent-Color; - } - - .lmt__language_select__menu.lmt__language_select__menu_three_columns - .lmt__language_wrapper - .lmt__language_select_column - button - .tick { - border-bottom-color: @accent-Color; - border-right-color: @accent-Color; - } // glossary - .lmt__glossary_highlight { - color: @accent-Color; - } - - .lmt__glossaryButton__desktop { - border-color: fadeout(@text, 12%); - } - - .lmt__glossary_button .lmt__glossary_button_label:hover { - color: @accent-Color; - } - - .lmt__glossary_editor_mainBar { - background-color: @accent-Color; - & when (@lookup ="latte") { - color: #fff; - } - color: @crust; - - .lmt__glossary_editorClose { - & when (@lookup ="latte") { - color: #fff; - } - color: @crust; - } - } - - [dl-test="glossary-modal"] { - input { - background-color: @surface1; - } - - &[class*="modal--"] { - background-color: @surface0; - } - - [class*="content--"] { - color: @text; - } - } - - .lmt__glossary_newEntry_langButton { - color: @subtext1; - - &:hover { - color: @accent-Color; - } - } - - .lmt_firstEntry-content - .lmt__glossary_newEntry_langButton - .lmt__glossary_arrowDown { - border-bottom-color: @overlay2; - border-right-color: @overlay2; - } - - .lmt_firstEntry-content .lmt__glossary_newEntry_inputSource, - .lmt_firstEntry-content .lmt__glossary_newEntry_inputTarget { - border-color: @overlay0; - color: @text; - } - - .lmt_firstEntry-content .lmt__glossary_newEntry_langButton { - border-color: @overlay0; - background-color: @surface1; - } - - .lmt_firstEntry-content .lmt__glossary_newEntry_inputSource:focus, - .lmt_firstEntry-content .lmt__glossary_newEntry_inputTarget:focus { - border-color: @accent-Color; - } - - .lmt_firstEntry-content .lmt__glossary_acceptButton { - & when (@lookup ="latte") { - color: #fff; - } - color: @crust; - } - - .lmt__glossary_acceptButton.lmt__glossary_acceptButton--disabled { - &, - &:hover { - background-color: fadeout(@accent-Color, 0.5); - } - } - - .lmt__language_select__menu { - background-color: @surface1; - } - - .lmt__glossary_newEntry_langDropdown.lmt__language_select__menu button { - color: @text; - - &:hover { - background-color: fadeout(@yellow, 0.2) !important; - } - } - - .lmt__glossary_newEntry_langDropdown.lmt__language_select__menu - button - .langName { - color: @text !important; - } - - .lmt__glossary_newEntry_langDropdown.lmt__language_select__menu - button - .langCodePair, - .lmt__glossary_newEntry_langDropdown.lmt__language_select__menu - button - .langCodePair - .langCode { - color: @subtext0; - } - - .lmt__glossary_acceptButton { - background-color: @accent2; - - &:hover { - background-color: @accent-Color; - } - } - - .lmt__glossary_editor - .lmt__glossary_editor_subBar_top - .lmt__glossary_editor_glossarySelect - .lmt__glossary_editor_glossaryNameWrapper - .lmt__glossary_editor_glossaryName { - color: @text; - } - - .lmt__glossary_editor - .lmt__glossary_editor_subBar_top - .lmt__glossary_editor_glossarySelect - .lmt__glossary_editor_glossaryNameWrapper - .lmt__glossary_editor_glossarySelectChevron.lmt__glossary_arrowDown { - border-bottom-color: @accent2; - border-right-color: @accent2; - } - - .lmt__glossary_editor .lmt__glossary_editor_subBar_top, - .lmt__glossary_editor_subBar_bottom - .lmt__glossary_editor - [class^="form--"] { - background-color: @mantle; - } - - .lmt__glossary_editor_subBar_bottom - .lmt__glossary_editor_glossaryAddNewWrapper - .lmt__glossary_editor_glossaryAddNew { - color: @accent-Color; - } - - .lmt__glossary_editor { - background-color: @base; - color: @text; - border-color: @accent-Color; - } - - .lmt__glossaryButton__desktop.switchedOn { - border-color: @accent-Color; - } - - .lmt__glossary_editorRow_editMode .editInput { - border-color: @surface1; - color: @text; - background-color: @base; - } - - .lmt__glossary_editor_checkmark { - & when (@lookup ="latte") { - border-bottom-color: @base; - } - border-bottom-color: @crust; - & when (@lookup ="latte") { - border-right-color: @base; - } - border-right-color: @crust; - } - - .lmt__glossary_editor_langPairHeadline { - color: @text; - border-bottom-color: @surface1; - } - - .lmt__glossary_editorRow { - color: @text; - } - - .lmt__glossary_arrowRightWrapper .lmt__glossary_arrowRight { - border-bottom-color: @overlay1; - border-right-color: @overlay1; - } - - .LanguagePair_arrow { - color: @overlay2; - stroke: @overlay2; - } - - .lmt__glossary_dialog { - background-color: @surface0; - color: @text; - border-color: @surface2; - } - - .lmt__glossary_editorRow .iconButton { - color: @text; - } ///// - .combined_app_ad_mobile_and_desktop .dl_ad_pro_container, - .dl_pro__banner--2021--wrapper, - [class^="footerOuterContainer"], - .lmt_quote__inner { - background-color: @crust; - } - - .lmt_quote__inner, - .lmt_quote__text, - .lmt_quote__source { - color: @subtext0; - } - - .lmt_quote__source a { - color: @accent-Color; - } // popup - .lmt__edit_text_popup { - background-color: @surface1; - } - - .lmt__edit_text_popup li, - .lmt__edit_text_popup .lmt__edit_text_list_item { - color: @subtext1; - border-color: @surface2; - } - - .lmt__edit_text_popup .lmt__edit_text_popup__entry--active { - background-color: fadeout(@yellow, 0.3); - } // dictionary - #lmt__dict_container { - [class^="content--"] { - .tag_lemma a, - .isForeignTerm .tag_trans, - .isForeignTerm .tag_trans a .isForeignTerm .tag_t, - .tag_t a { - color: @accent-Color; - } - - .sep { - color: @text; - } - - .tag_trans { - color: @subtext1; - } - - .notascommon { - color: @overlay1; - } - } - - span > span > button:hover { - color: @accent-Color; - } - } // quotes - .lmt_quotes_nav_entry { - color: @overlay1; - background-color: @overlay0; - } - - .lmt_quotes_nav_entry--active { - color: @accent-Color; - background-color: @accent-Color; - } // footer - .dl_footerV2_container { - [class*="linkList--"] li { - &:not(:first-of-type) a { - color: @accent2 !important; // idk why this isn't coloring - } - - [class*="badge--"] { - background-color: spin(@accent-Color, -40deg) !important; - & when (@lookup ="latte") { - color: #fff; - } - color: @crust; - } - } - } - & when (@lookup ="latte") { - #dl_menu_logo img, - #dl_menu_translator_simplified img, - .lmt_quote .lmt_quote__logo, - .lmt_quote__inner::before, - [class^="docTrans__help_popup__container--"] - [class^="supportedIcons--"] - > div, - .dl_footerV2_container [class^="brandingContainer--"] a > img, - [class^="socialMediaContainer--"] a > img { - filter: invert(100%) hue-rotate(180deg); - } - } - // options - & when (@quotes =1) { - #dl_quotes_container { - display: none; - } - } - - & when (@header=1) { - .dl_header { - display: none; - } - } - - & when (@footer=1) { - .dl_footerV2_container, - .showSeoText .eSEOtericText { - display: none; - } - } - - & when (@tabs=1) { - .lmt__doc { - margin-bottom: 0; - - & Trans-tab-container { - display: none !important; - min-height: 100vh; - } - } - - #lmt_quotes_article { - margin-top: 0; - } - - .dl_translator_page_container { - align-items: center; - align-content: center; - justify-content: center; - } - } - - & when (@dictionary=1) { - #lmt__dict_container { - display: none !important; - } - } - - & when not (@quotes=@footer) { - .showSeoText .eSEOtericText { - margin-bottom: 70px; - } - } - - & when (@footer =1), - (@header=1), - (@quotes=1) { - body { - display: flex; - flex-direction: column; - min-height: calc(100vh - 2em); - align-items: center; - align-content: center; - justify-content: center; - } - - .dl_translator_page_container { - margin: 2em 0; - - > * { - width: 100vw; - } - } - } - - & when (@quotes=1), - (@header=1), - (@footer=1), - (@tabs=1) { - body { - min-height: 100vh; - } - } - - & when (@removeAds=1) { - #lmt_pro_ad_container { - display: none; - } - } - - & when (@removeGlossaryButton=1) { - .lmt__glossaryButton__desktop { - display: none; - } - } - } -} diff --git a/styles/deepl/catppuccin.user.less b/styles/deepl/catppuccin.user.less new file mode 100644 index 0000000000..0f79250fe7 --- /dev/null +++ b/styles/deepl/catppuccin.user.less @@ -0,0 +1,295 @@ +/* ==UserStyle== +@name DeepL Catppuccin +@namespace github.com/catppuccin/userstyles/styles/deepl +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/deepl +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/deepl/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Adeepl +@description Soothing pastel theme for DeepL +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document regexp("https:\\/\\/www.deepl.com\\/?(.*\\/)translator.*$") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + /* header */ + .BasePageHeader-module--container--d81cb { + background-color: @mantle !important; + } + + /* background */ + body { + background-color: @base !important; + color: @text !important; + } + + .bg-neutral-next-50, + .bg-white, + .contextual-menu-dragging-area, + input { + background-color: @base !important; + } + + .pageFooterV2-module--footerOuterContainer--0b055 { + background-color: @mantle !important; + } + + .scrollablePopiverListRoot-module--root--588fe { + background-color: @base !important; + } + + /* text color */ + h1, + h2, + h3, + h4, + p, + a, + button, + span, + input, + ul, + li, + .mb-3, + .mb-4, + .GlossaryModalWithIllustration-module--content--2bf03, + .lmt__glossary_editor_glossaryName { + color: @text !important; + } + + .text-neutral-next-600 { + color: @subtext0 !important; + } + + /* privacy notice */ + .cookieBanner-module--container--9baef { + background-color: @surface0 !important; + color: @text !important; + } + + .button-module--button--4f58d.button-module--color_primaryAlt3--cd3cf { + border-color: @text !important; + } + + /* side menu */ + .classicSidemenu-module--menuContainer--35157 { + background-color: @base !important; + } + + /* borders */ + .border-black { + border-color: @surface2 !important; + } + + .border-neutral-next-100, + .StartFreeTrialButton-module--startFreeTrialButton--bd671 { + border-color: @surface0 !important; + } + + .divide-y > :not([hidden]) ~ :not([hidden]) { + border-color: @base; + } + + .TranslatorTab-module--active--0b6ea + .TranslatorTab-module--innerLower--8a080 { + background-color: @accent !important; + } + + .ring-neutral-next-900 { + --tw-ring-color: @surface2; + } + + .border-neutral-next-900 { + border-color: @surface2 !important; + } + + input { + border-color: @surface0 !important; + } + + /* hover */ + button:hover, + .bg-blue-next-500:hover { + background-color: @surface1 !important; + } + + a:hover { + background-color: @mantle !important; + } + + .FlyoutMenuButton-module--flyoutMenuButton--97ae6:hover { + background-color: @mantle !important; + } + + [class*="SourceTranslatorArea-module--focusBorder--"]:has( + div[contenteditable="true"]:focus + ) { + border-color: @accent; + } + + [class*="PageHeaderLink-module--pageHeaderLink--"]:not( + [class*="PageHeaderLink-module--nohover--"] + ):hover { + color: @accent; + border-color: @accent; + } + + .hover\:bg-\[\#B4DAE8\]:hover { + background-color: @surface2 !important; + } + + /* highlight */ + .bg-\[\#E1F0F5\] { + background-color: @surface1 !important; + } + + /* buttons */ + .TranslatorTab-module--cardButton--4b203, + .bg-\[\#EDF8FC\] { + background-color: @surface0 !important; + border-color: @surface0 !important; + } + + .StartFreeTrialButton-module--startFreeTrialButton--bd671, + .bg-blue-next-50 { + background-color: @surface0 !important; + } + + .bg-blue-next-500 { + background-color: @surface0; + border-color: @surface0; + } + + .LanguageSelector-module--wrapper--f9f17 { + --button-background: @surface0 !important; + --button-border-color: @surface0 !important; + color: @base !important; + } + + .CareerBanner-module--container--2ac20 { + background-color: @surface0 !important; + } + + /* glossary button */ + .lmt__glossaryButton, + .lmt__glossaryButton__desktop:hover, + .ModalDialogContent-module--content--5751e { + background-color: @surface0 !important; + } + + .lmt__glossary_acceptButton, + .lmt__glossary_editor, + .lmt__glossary_editor_subBar_top, + .lmt__glossary_editor_subBar_bottom, + .lmt__glossary_editor_mainBar, + .Select-module--wrapper--53ec7 .Select-module--flyout--c91f3, + .lmt_firstEntry-content, + .lmt__glossary_newEntry_langButton, + .Select-module--wrapper--53ec7, + .Select-module--button--f032e { + background-color: @surface0 !important; + border-color: @surface0 !important; + } + + .desktop-glossary-overwrites .lmt__language_select__menu { + background-color: @surface0 !important; + color: @text !important; + } + + .lmt__glossary_newEntry_langDropdown.lmt__language_select__menu + button + .langName { + color: @text !important; + } + + /* pro banner */ + .ProBanner2021-module--wrapper--c7e3d, + .p-8 { + background: @base !important; + } + + /* some button colors */ + .badge-module--badge--c9ebe.badge-module--proDark--a4d4e { + background-color: @green; + color: @base !important; + } + + .button-module--button--a854e.button-module--color_secondary--f171e { + background-color: @peach; + border-color: @peach !important; + color: @base !important; + } + + .button-module--button--a854e.button-module--variant_outline--b937c { + background-color: @surface0 !important; + border-color: @surface0 !important; + } + + .button-module--button--a854e.button-module--color_primary--bfa59 { + background-color: @blue !important; + border-color: @blue !important; + color: @base !important; + } + + /* dropdowns */ + .ProductUpdatesContainer-module--updateContainer--16394, + .ProductUpdateFooter-module--updateFooter--b46f0, + .LanguageSelector-module--flyout--6bfe6 { + background-color: @base !important; + border-color: @surface0 !important; + } + + /* allow mic/get extension prompt */ + .bg-neutral-next-900, + .bg-blue-next-800 { + background-color: @surface0 !important; + color: @text !important; + } + + /* icons, svgs and images */ + svg { + color: @text !important; + } + + .lmt__glossary_ad_checkmark, + .lmt__glossary_arrowDown { + border-color: @text !important; + } + + path, + .DeeplLogoText-module--logoText--34a4f, + .ProBanner2021-module--lockitem--febe3, + .FlyoutMenuButton-module--flyoutMenuButton--97ae6::after, + #top-navi-sidemenu-opener, + .pageFooterV2-module--socialMediaLinks--71305, + .ProBanner2021-module--checkitem--2d8e7, + [src*="https://static.deepl.com/img/app_desktop.svg"] { + filter: @text-filter; + } + + .Logo-module--logoImg--1ee7e, + .LogoLink-module--logoText--33735, + .deeplLogo-module--logo--ffd7a { + filter: @blue-filter; + } + } +} diff --git a/styles/deepseek/README.md b/styles/deepseek/README.md new file mode 100644 index 0000000000..0d252a88a6 --- /dev/null +++ b/styles/deepseek/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for DeepSeek + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [WalkQuackBack](https://github.com/WalkQuackBack) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/deepseek/catppuccin.user.less b/styles/deepseek/catppuccin.user.less new file mode 100644 index 0000000000..8e9c50889f --- /dev/null +++ b/styles/deepseek/catppuccin.user.less @@ -0,0 +1,264 @@ +/* ==UserStyle== +@name DeepSeek Catppuccin +@namespace github.com/catppuccin/userstyles/styles/deepseek +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/deepseek +@version 2025.12.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/deepseek/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Adeepseek +@description Soothing pastel theme for DeepSeek +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document url-prefix("https://chat.deepseek.com") { + @import url("https://prismjs.catppuccin.com/variables.important.css"); + + body[data-ds-dark-theme] { + #catppuccin(@darkFlavor); + } + body:not([data-ds-dark-theme]) { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + #ds-rgb() { + --ds-bordered-secondary-button-color: var(--dsr-text-1); + --ds-button-hover-color: initial; + --ds-input-prefix-color: var(--dsr-text-1); + --ds-modal-content-color: @surface0; + --ds-rgb-bg-base: var(--ds-rgb-black); + --ds-rgb-elevated: #lib.rgbify(@surface0)[]; + --ds-rgb-error: #lib.rgbify(@red)[]; + --ds-rgb-header: 40 40 40; + --ds-rgb-info: #lib.rgbify(@blue)[]; + --ds-rgb-input-focus: var(--ds-rgb-neutral-900); + --ds-rgb-input-strong: var(--ds-rgb-neutral-700); + --ds-rgb-input: var(--ds-rgb-neutral-800); + --ds-rgb-label-1: #lib.rgbify(@text)[]; + --ds-rgb-label-2: #lib.rgbify(@subtext0)[]; + --ds-rgb-label-3: #lib.rgbify(@overlay1)[]; + --ds-rgb-link: var(--ds-rgb-primary); + --ds-rgb-primary-foreground: #lib.rgbify(@base)[]; + --ds-rgb-primary: #lib.rgbify(@accent)[]; + --ds-rgb-segmented-button: var(--ds-rgb-neutral-500); + --ds-rgb-segmented-separator: var(--ds-rgb-neutral-500); + --ds-rgb-segmented: var(--ds-rgb-neutral-600); + --ds-rgb-separator-strong: #lib.rgbify(@overlay0)[]; + --ds-rgb-separator: #lib.rgbify(@surface2)[]; + --ds-rgb-success: #lib.rgbify(@green)[]; + --ds-rgb-tag: var(--ds-rgb-neutral-600); + --ds-rgb-thumb: var(--ds-rgb-neutral-200); + --ds-rgb-track: var(--ds-rgb-neutral-500); + --ds-rgb-warning: #lib.rgbify(@yellow)[]; + --ds-rgba-transparent: 255 255 255/0; + --ds-tabs-active-color: @accent; + --ds-text-primary-button-color: @accent; + --ds-rgb-hover: #lib.rgbify(mix(@text, @base, 8%))[]; + + --ds-toast-custom-color: @surface0; + --ds-toast-custom-text-color: @text; + --ds-toast-cutsom-border: 1px solid @surface1; + --ds-md-inline-code-color: @base; + } + + --dsw-alias-bg-base: @base; + --dsw-alias-bg-layer-1: @mantle; + --dsw-alias-bg-layer-2: @base; + --dsw-alias-bg-layer-3: @surface0; + + --dsw-alias-bg-mask-1: rgba(0, 0, 0, 0.5); + --dsw-alias-bg-mask-2: rgba(0, 0, 0, 0.2); + --dsw-alias-bg-multi-select: mix(@accent, @mantle, 8%); + --dsw-alias-bg-skeleton: fade(@text, 8%); + + --dsw-alias-border-inverted2: rgba(255, 255, 255, 0.08); + --dsw-alias-border-inverted: rgba(255, 255, 255, 0.06); + --dsw-alias-border-l1: rgba(255, 255, 255, 0.06); + --dsw-alias-border-l2-darkmode-thin: rgba(255, 255, 255, 0.06); + --dsw-alias-border-l2: @surface1; + --dsw-alias-border-l3: @surface2; + --dsw-alias-border-l4: @overlay0; + + --dsw-alias-brand-primary-invert: @text; + --dsw-alias-brand-primary: @accent; + --dsw-alias-brand-text: @accent; + + --dsw-alias-button-contrast-fill: @text; + --dsw-alias-button-elevated-fill: @surface1; + + --dsw-alias-button-floating-fill: @base; + --dsw-alias-button-floating-hover: mix(@text, @base, 8%); + + --dsw-alias-button-ghost-active-border: @accent; + --dsw-alias-button-ghost-active-fill: fade(@accent, 14%); + --dsw-alias-button-ghost-active-hover: fade(@accent, 18%); + + --dsw-alias-button-primary-dimmed: darken(@accent, 8%); + --dsw-alias-button-primary-fill: var(--dsw-alias-brand-primary); + --dsw-alias-button-primary-hover: lighten(@accent, 8%); + + --dsw-alias-interactive-bg-active: fade(@text, 14%); + --dsw-alias-interactive-bg-hover-accent: fade(@text, 24%); + --dsw-alias-interactive-bg-hover-danger: fade(@red, 15%); + --dsw-alias-interactive-bg-hover: fade(@text, 8%); + + --dsw-alias-label-caption: @overlay0; + --dsw-alias-label-dimmed: @surface1; + --dsw-alias-label-primary-dimmed: var(--dsw-static-neutral-bluish-100); + --dsw-alias-label-primary-inverted: var(--dsw-static-neutral-bluish-800); + + --dsw-alias-label-primary: @text; + --dsw-alias-label-secondary: @subtext0; + --dsw-alias-label-tertiary: @overlay1; + + --dsw-alias-markdown-citation: var(--dsw-static-neutral-bluish-800); + --dsw-alias-markdown-code-block-banner: @surface0; + --dsw-alias-markdown-code-block: @mantle; + --dsw-alias-markdown-code-segment-selected: var( + --dsw-static-neutral-bluish-800 + ); + --dsw-alias-markdown-code-segment-unselected: var( + --dsw-static-neutral-bluish-900 + ); + --dsw-alias-markdown-inline-code: @surface0; + --dsw-alias-markdown-tag: var(--dsw-static-neutral-bluish-850); + + --dsw-alias-scrollbar-bg-l1: @surface2; + --dsw-alias-scrollbar-bg-l2: @overlay0; + --dsw-alias-scrollbar-hover-l1: @overlay0; + --dsw-alias-scrollbar-hover-l2: @overlay1; + + --dsw-alias-state-error-primary: @red; + --dsw-alias-state-error-secondary: @red; + + --dsw-alias-state-success-primary: @green; + --dsw-alias-state-success-secondary: @green; + + --dsw-alias-state-warn-label: var(--dsw-static-amber-600); + --dsw-alias-state-warn-primary: var(--dsw-static-amber-500); + --dsw-alias-state-warn-secondary: var(--dsw-static-amber-400); + --dsw-alias-state-warn-tertiary: var(--dsw-static-amber-900); + + --dsw-alias-toast-bg: var(--dsw-static-neutral-bluish-750); + --dsw-alias-tooltip-bg: var(--dsw-static-neutral-bluish-750); + + --dsw-specific-bubble: @surface0; + --dsw-specific-input-major: @surface0; + --dsw-specific-login-input: var(--dsw-static-neutral-900); + --dsw-specific-menu: var(--dsw-alias-bg-layer-3); + --dsw-specific-selector: fade(@text, 14%); + --dsw-specific-sidebar-fill: @mantle; + --dsw-specific-sidebar-nav-item-active-accent: @surface0; + --dsw-specific-sidebar-nav-item-active: @surface0; + --dsw-specific-sidebar-nav-item-hover: fade(@text, 8%); + --dsw-specific-tip: var(--dsw-static-neutral-bluish-800); + + --dsr-bg: @crust; + --dsr-text-0: @text; + --dsr-text-1: @subtext1; + --dsr-text-2: @subtext0; + --dsr-text-3: @overlay2; + --dsr-text-4: @overlay1; + --dsr-border-1: rgb(var(--ds-rgb-neutral-450)); + --dsr-border-2: rgb(var(--ds-rgb-neutral-600)); + --dsr-input-border: #5a5a69; + --dsr-input-bg: #404045; + --dsr-button-main-bg: #509fff; + --dsr-button-main-bg-hover: #4166d5; + --dsr-button-second-bg: var(--dsr-main-2); + --dsr-button-grey-0: rgb(var(--ds-rgb-neutral-600)); + --dsr-button-grey-1: rgb(var(--ds-rgb-neutral-650)); + --dsr-button-grey-2: rgb(var(--ds-rgb-neutral-700)); + --dsr-delete-button-bg: rgb(var(--ds-rgb-red-500) / 0.85); + --dsr-delete-button-bg-hover: rgb(var(--ds-rgb-red-550) / 0.45); + --dsr-tooltip-fg: rgb(var(--ds-rgb-zinc-650)); + --dsr-tooltip-bg: #000; + --dsr-side-bg: #212327; + --dsr-side-hover-bg-rgb: 51, 51, 51; + --dsr-side-hover-bg: rgb(var(--ds-rgb-neutral-750)); + --dsr-icon-fg-1: rgb(var(--ds-rgb-neutral-350)); + --dsr-icon-hover-0: rgb(var(--ds-rgb-neutral-500)); + --dsr-icon-hover-1: rgb(var(--ds-rgb-neutral-700)); + --dsr-side-icon-hover: rgb(var(--ds-rgb-zinc-750)); + --dsr-error-fg: rgb(var(--ds-rgb-red-450)); + --dsr-risk-text: #e4773d; + --dsr-risk-border: #4c4740; + --dsr-risk-fill: #31302e; + + .ds-elevated, [data-elevated] { + #ds-rgb() !important; + } + &, .ds-theme { + #ds-rgb() !important; + + --wip-ds-color-bg-tooltip: @surface0; + } + + .ds-sign-up-form__main { + background: @base; + } + .ds-switch.ds-switch.ds-switch { + --switch-color: @surface2; + --switch-thumb-color: if(@flavor = latte, @base, @text); + &.ds-switch--checked { + --switch-color: @accent; + --switch-thumb-color: @base; + } + } + .ds-basic-button--primary { + --ds-primary-button-text-color: @base; + } + .ds-checkbox svg { + color: @base; + } + + .ds-tooltip { + --tooltip-text-color: @text; + } + + /* Fade out text on active sidebar nav item */ + ._546d736.b64fb9ae ._254829d { + --mask-base-color: #lib.rgbify(@surface0)[]; + } + /* Fade out text on hovered sidebar nav item */ + ._546d736 ._254829d { + --mask-base-color: #lib.rgbify(@surface0)[]; + } + + /* Fade out on top of conversation */ + .c99b79f8.c99b79f8.c99b79f8 { + background: linear-gradient(to bottom, @crust, transparent); + } + /* Fade out on top of conversation when multiselect active */ + .a51c5344 .c99b79f8.c99b79f8.c99b79f8 { + background: linear-gradient( + to bottom, + var(--dsw-alias-bg-multi-select), + transparent + ); + } + + /* Response feedback rating radio button focus */ + ._74d6322 + .ds-radio-button-group + .ds-radio-button.ds-radio-button--active::after { + box-shadow: var(--radio-button-group-button-outline-box-shadow-focus); + } + + /* Send button icon */ + ._7436101 { + color: @base; + } + } +} diff --git a/styles/desmos/README.md b/styles/desmos/README.md new file mode 100644 index 0000000000..192cc6817a --- /dev/null +++ b/styles/desmos/README.md @@ -0,0 +1,37 @@ + + + +

+ Logo
+ + Catppuccin for Desmos + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + +> [!NOTE] +> This userstyle is currently incompatible with DesModder's Visual>Syntax Highlighting plugin. + +## 💝 Current Maintainer +- [gradylink](https://github.com/gradylink) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/desmos/catppuccin.user.less b/styles/desmos/catppuccin.user.less new file mode 100644 index 0000000000..88af2f19e4 --- /dev/null +++ b/styles/desmos/catppuccin.user.less @@ -0,0 +1,1316 @@ +/* ==UserStyle== +@name Desmos Catppuccin +@namespace github.com/catppuccin/userstyles/styles/desmos +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/desmos +@version 2026.07.16 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/desmos/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Adesmos +@description Soothing pastel theme for Desmos +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document regexp( + "^(https?:\/\/)(?!(cl|teacher|student)\.desmos\.com)([a-zA-Z0-9-]+\.)?desmos\.com(\/.*)?$" + ) { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + .dcg-desmos-svg-logo g { + fill: @text; + } + + .dcg-expression-top-bar { + border-right-color: @surface0 !important; + border-bottom-color: @surface0 !important; + } + + .user-info, .dcg-saved-graphs-tile-or-row, .dcg-graph-list__header-row { + border-bottom-color: @surface0 !important; + } + + .dcg-exppanel-container { + --dcg-item-background-color: @base; + background: @base; + } + + i:not( + .dcg-shared-product-icon, + .dcg-icon-error, + .dcg-geo-basic-tools .dcg-icon-caret-down, + .dcg-geometry-toolbar-view i, + .dcg-btn-short-blue i + ) { + opacity: 1 !important; + text-shadow: none !important; + color: @text !important; + } + + .dcg-expressionitem:not(.dcg-selected) .dcg-tab, + .dcg-account-reminder, + .search-container input, + .dcg-evaluation-view__wrapped-value, + .dcg-loading-background-div, + .dcg-mq-sqrt-container .dcg-mq-empty, + .dcg-mq-fraction .dcg-mq-empty, + .dcg-my-graphs-modal__footer, + .dcg-product-filter__button.dcg-hovered, + .dsm-panic-button, + .dcg-select-dropdown-option.dcg-hovered { + background: @mantle !important; + } + + .dcg-expressionitem.dcg-selected .dcg-tab { + background: @accent !important; + + .dcg-num { + color: @mantle !important; + } + + .dcg-slider-menu-opener i, .dcg-icon-zoom-fit, .dcg-icon-create-table { + color: @mantle !important; + } + + .dcg-circular-icon:not(:has(.dcg-icon-parametric-solid)):not( + .dcg-colored-icon + ) { + border-color: @mantle !important; + + i { + color: @mantle !important; + } + } + } + + /* This is not applied to entire view to prevent the graph from changing color. */ + .dcg-new-expression-fade, + .dcg-mq-editable-field::after, + .dcg-popover, + .dcg-options-menu, + .dcg-dropdown-popover__interior, + .dcg-arrow, + .dcg-table-container, + .dcg-mq-editing-overflow-left::before, + .dcg-exppanel-outer__wrapper { + --dcg-custom-background-color: @base; + } + + .dcg-popover .dcg-new-item, + .dcg-evaluation-view__equals-sign, + .dcg-circular-icon-container { + opacity: 1 !important; + } + + .dcg-popover-interior, + .dcg-dropdown-popover__interior, + .dcg-notice--authenticate, + .dcg-btn-white-outline, + .dcg-action-save.dcg-disabled, + .dcg-calc-option, + .dcg-end-test-button, + .dcg-action-cartesian, + .dcg-action-polar, + .dcg-evaluation-view__plaintext, + .dcg-add-inference-wizard__table th, + .dcg-add-inference-wizard__table td, + .dcg-add-inference-wizard__sample-type-selector.dcg-selected, + .dcg-table--cell, + .dcg-checkbox:not(.dcg-geometry-toolbar-view .dcg-checkbox), + .dcg-product-filter__button { + border-color: @text !important; + } + + .dcg-btn-white-outline.dcg-hovered, .dcg-end-test-button.dcg-hovered { + box-shadow: 0 0 0 1px @text !important; + } + + .dcg-arrow::after, .dcg-add-inference-wizard__header { + border-bottom-color: @text !important; + } + + .dcg-expressionitem.dcg-selected { + border-color: @accent !important; + --dcg-item-border-color: @accent !important; + } + + .dcg-expressionitem:not(.dcg-selected) { + border-top-color: @surface0 !important; + } + + .dcg-popover-title, .dcg-dropdown-popover__title, .dcg-help-menu-title { + color: @accent !important; + background-color: transparent !important; + border-bottom-color: @accent !important; + } + + .dcg-toggle-track { + background: @subtext0 !important; + } + + .dcg-toggle-switch, .dcg-or-separator { + background: @text !important; + } + + .dcg-toggled .dcg-toggle-switch { + background: @overlay1 !important; + } + + .dcg-keypad-btn.dcg-btn-light-on-gray, + .dcg-keypad-btn.dcg-btn-light-gray, + .dcg-ctrl-toggle-cover { + background: @mantle !important; + border-color: @surface0 !important; + } + + .dcg-keypad-btn.dcg-btn-dark-on-gray { + background: @crust !important; + border-color: @surface0 !important; + } + + @layer { + .dcg-btn-short-blue, .dcg-btn-blue, .dcg-copy-button { + background: @accent !important; + border-color: transparent !important; + color: @base !important; + + *, *::before { + color: @base !important; + } + } + } + + .dcg-btn-red { + background: @red !important; + border-color: none !important; + color: @base !important; + } + + .dcg-unstyled-button.dcg-disabled { + color: @subtext0 !important; + border-color: @subtext0 !important; + } + + .dcg-overgraph-icon-container { + background: @base; + border-radius: 5px; + } + + .dcg-header, + .dcg-main-header-container, + .navbar-inner, + .dcg-practice-header-view { + background: @crust !important; + border-bottom-color: @surface0 !important; + *:not( + .dcg-btn-blue, + .dcg-dropdown-popover__title, + .dcg-copy-button > span, + .dcg-copy-button, + .dcg-help-menu-title + ) { + color: @text !important; + } + } + + .dcg-variable-permalink, + .dcg-shared-input-blue-outline:not( + .dcg-geometry-toolbar-view .dcg-shared-input-blue-outline + ), + .dcg-input-blue-outline:not( + .dcg-geometry-toolbar-view .dcg-input-blue-outline + ) { + background: @mantle; + border-color: @text !important; + + &.dcg-focus-visible { + box-shadow: inset 0 0 0 1px @accent !important; + border-color: @accent !important; + } + } + + *:not(.dcg-header-right-content) + > * + > *:not(.dcg-share-menu__sharing-options-button) + > .dcg-icon-print, + *:not(.dcg-share-menu__sharing-options-button) > .dcg-icon-export, + .dcg-icon-embed { + box-shadow: 0 0 0 1px @accent !important; + } + + .dcg-hovered:not(.dcg-share-menu__sharing-options-button) > .dcg-icon-print, + .dcg-hovered:not(.dcg-share-menu__sharing-options-button) + > .dcg-icon-export, + .dcg-hovered > .dcg-icon-embed { + background: fade(@accent, 26%) !important; + } + + .dcg-notice--authenticate, + .dcg-authentication-modal, + .dcg-authentication-modal__detail, + .dcg-btn-gray-outline.dcg-hovered:not(.dcg-frontpage-landing__button), + .dcg-resources-container, + .dcg-account-link, + .dcg-title, + .dcg-lost-work-link, + .dcg-action-save.dcg-disabled, + .account-name, + .account-email, + .dcg-account-container *, + .dcg-icon-remove::before, + .dcg-tooltip-message, + .dcg-attempt-recovery.dcg-hovered, + .no-matches, + .dcg-basic-calculator-footer, + .dcg-basic-calculator-footer *, + .dcg-checkbox-label, + .dcg-input-blue-outline, + .dcg-shared-modal-contents-wrapper + *:not( + .dcg-btn-blue, + .dcg-gray-link, + .dcg-blue-link, + .dcg-shared-tab-gray-underline + ), + .dcg-start-practice-screen, + .dcg-calc-option, + .dcg-keypad-control-toggle, + code, + h3, + .dcg-show-more-row-interior, + .dcg-label-input, + .dcg-checkbox-children, + .dcg-axis-label-to, + .pulsing-message, + .dsm-panic-close-button, + #dsm-panic-reopen-button { + color: @text !important; + } + + .dcg-shared-modal-contents-wrapper, + .dcg-shared-modal-title::before, + .dcg-authentication-modal__detail, + .dcg-user-bar, + .dcg-scrollable, + .dcg-expressionitem.dcg-shell, + .dcg-loading-div-container, + .dcg-mini-play-pause, + .dcg-start-practice-screen, + .dcg-basic-calc-practice, + .dcg-cell.dcg-non-editable.dcg-selected, + pre, + .dcg-action-polar:not(.dcg-selected), + .dcg-action-cartesian:not(.dcg-selected), + .dcg-my-graphs-modal__options, + #dsm-panic-popover, + .dcg-hotkeys-header, + .dcg-select-dropdown-list { + background: @base !important; + } + + .dcg-authentication-modal__divider::before, + .dcg-authentication-modal__divider::after { + border-bottom-color: @text !important; + } + + .dcg-btn-gray-outline, .dcg-dropdown-input { + background: @mantle !important; + border-color: @surface0 !important; + + &.dcg-hovered { + box-shadow: 0 0 0 1px @text !important; + } + } + + .dcg-user-bar { + border-bottom-color: @surface0 !important; + } + + .graph-link-container.dcg-hovered, + .graph-link-container.dcg-selected .graph-link, + .dcg-tooltip-message, + .dcg-sliding-interior, + .dcg-keypad-control-toggle, + .dcg-dropdown-choice.dcg-selected, + .dcg-saved-graphs-tile-or-row.dcg-selected, + .dcg-track > .dcg-graphic { + background: @crust !important; + } + + .dcg-circular-icon { + border-color: @text !important; + opacity: 1 !important; + } + + .dcg-thumb > .dcg-graphic { + background: fade(@accent, 59%) !important; + } + + .dcg-thumb > .dcg-center, + .dcg-action-cartesian.dcg-selected, + .dcg-action-polar.dcg-selected { + background: @accent !important; + } + + .dcg-evaluation-view__wrapped-value, + .dcg-circular-icon.dcg-hidden, + .dcg-keypad-control-toggle, + .dcg-btn-gray-outline { + border-color: @surface0 !important; + box-shadow: none !important; + } + + .dcg-tooltip-arrow { + border-bottom-color: @crust !important; + } + + .dcg-hovered > .dcg-add-blank { + background: fade(@text, 26%) !important; + } + + .dcg-icon-error { + color: @yellow !important; + } + + .dcg-action-redo.dcg-disabled, .dcg-action-undo.dcg-disabled { + opacity: 1 !important; + + i { + color: @surface1 !important; + } + } + + .dcg-loading-div { + filter: @text-filter !important; + } + + .dcg-inline-math-input-view .dcg-math-field, + .dcg-ticker-settings-internal .dcg-math-field { + border-bottom-color: @overlay2 !important; + + &.dcg-focus { + border-bottom-color: @accent !important; + } + } + + .dcg-mq-ghost { + opacity: 1 !important; + color: @overlay2; + } + + .dcg-mq-root-block::after, .dcg-action-cancel { + opacity: 1 !important; + } + + .dcg-mini-play-pause { + border-color: @base !important; + } + + .dcg-gray-link, .dcg-centered-top-link, .dcg-cancel-while-loading { + color: @accent !important; + } + + .dcg-shared-tab-gray-underline.dcg-selected { + border-bottom-color: @accent !important; + } + + .dcg-calc-option.dcg-is-selected { + border-color: @accent !important; + box-shadow: 0 0 0 1px @accent !important; + background: fade(@accent, 13%) !important; + } + + /* To make this !important more important than Desmos' !important */ + @layer { + .dcg-mq-selection { + &, + .dcg-mq-non-leaf, + .dcg-mq-scaled { + background: @accent !important; + color: @base !important; + } + } + } + + .dcg-cell.dcg-first-column, .dcg-cell.dcg-interior-column { + border-right-color: @text !important; + } + + .dcg-cell.dcg-table-header { + border-bottom-color: @text !important; + } + + .dcg-cell.dcg-interior-row, .dcg-show-more-row { + border-bottom-color: @surface2 !important; + } + + .dcg-cell.dcg-selected { + box-shadow: inset 0 0 0 2px @accent !important; + + &:not(.dcg-computed-cell)::after, .dcg-inner-border { + border-color: @accent !important; + } + } + + .dcg-action-changeimage.dcg-hovered, + .dcg-expressionitem .dcg-icon-remove.dcg-hovered::before, + .dcg-complex-enabled-note, + .dcg-expression-warning, + .dcg-reference-count, + .dcg-maxLabel.dcg-hovered, + .dcg-minLabel.dcg-hovered { + color: @subtext0 !important; + } + + .active-arrow .dcg-graphic { + border-right-color: @base !important; + } + + .dcg-row:nth-of-type(2) .dcg-cell, + table th, + table td, + .footer, + .dcg-add-inference-wizard--create-button-wrapper, + .dcg-small-screen-menu__logout-container, + .dcg-product-filter__clear-filter-container { + border-top-color: @text !important; + } + + .dcg-row .dcg-cell, + .dcg-expressionfolder .dcg-fade-container::after, + .dcg-expressionitem.dcg-inFolder .dcg-fade-container::after { + border-left-color: @text !important; + } + + .dcg-row:not(:nth-of-type(2)) .dcg-cell { + border-top-color: @surface2 !important; + } + + .dcg-cell .dcg-empty-line { + border-top-color: transparent !important; + } + + #pageHeader.brand, .dcg-grapher__error-in-graph-bounds { + text-shadow: none !important; + } + + .dcg-btn-light-gray, .dcg-btn-light-on-gray { + background: @mantle !important; + box-shadow: none !important; + border-color: @text !important; + color: @text !important; + } + + .spa-header { + background: @green !important; + color: @base; + + @layer { + .spa-header .dcg-icon-desmos { + color: @base !important; + } + } + + .state-name, .test-name { + border-left-color: @base !important; + } + } + + .dcg-complex-container, + .dcg-axes-settings-container, + .dcg-options-menu-section { + border-top-color: @overlay2 !important; + } + + .dcg-visual-settings { + border-bottom-color: @overlay2 !important; + } + + .dcg-checkbox__box, + .dcg-axis-label, + .dcg-clickable-menu-row:has(.dcg-input-label) > .dcg-mathquill-wrapper { + --dcg-accent-color: @accent !important; + } + + .dcg-segmented-control-btn.dcg-selected, + .dcg-action-cartesian.dcg-selected > i::before, + .dcg-action-polar.dcg-selected > i::before, + .dcg-grapher__error-in-graph-bounds, + .dcg-toast-view, + .dcg-toast .dcg-undo, + .dcg-segmented-control-container .dcg-selected i::before, + .dcg-selected-graphs-actions__icon-btn i::before, + .dcg-segmented-control-btn.dcg-selected * { + color: @base !important; + } + + @layer { + .dcg-btn-blue:has(> .dcg-icon-caret-down) { + i { + color: @base !important; + } + + &::before { + border-left-color: @base !important; + } + } + } + + .dcg-label-input { + border-color: @text !important; + + &:focus { + border-color: @accent !important; + box-shadow: 0 1px @accent !important; + } + } + + .dcg-toast { + background: @yellow !important; + border-color: @peach !important; + } + + .dcg-expressionitem.dcg-inference-wizard-insert-target { + --dcg-item-border-color: @text !important; + } + + .dcg-add-inference-wizard__table td:has(.dcg-focus)::after, + .dcg-table--cell:has(.dcg-focus)::after { + border-color: @accent !important; + } + + .dcg-add-inference-wizard__sample-type-selector.dcg-hovered:not( + .dcg-selected + ) { + border-color: @overlay0 !important; + } + + @layer { + .dcg-frontpage-landing-interactive__graph-link, + .dcg-frontpage-landing-interactive__arrow-overlay { + i { + color: @base !important; + } + } + } + + .dcg-my-graphs-modal__heading--selectable { + &.dcg-hovered { + box-shadow: 0 3px @overlay0 !important; + } + + &.dcg-selected { + box-shadow: 0 3px @accent !important; + } + } + + .dcg-saved-graphs-tile { + --dcg-saved-graphs-tile-or-row-hover-color: @crust !important; + background: @mantle !important; + } + + .dcg-graph-list__row.dcg-hovered:not(.dcg-selected), + .dcg-my-graphs-modal__currently-open, + .dcg-graph-list__field-btn.dcg-hovered, + .dcg-product-filter__option--selected { + background: @mantle !important; + } + + @layer { + .dcg-saved-graphs-tile__subtitle { + color: @base !important; + } + } + + .dcg-geometry-toolbar-view { + .dcg-component-checkbox, & { + color: #000 !important; + } + } + + .dcg-my-graphs-modal-empty-state__logged-out { + border-color: @surface1 !important; + } + + .dcg-shortcuts-table tr { + border-bottom-color: @surface2 !important; + } + + --dcg-custom-text-color: @text; + --dcg-custom-background-color-shaded: @base; + + /* DesModder */ + .dsm-plugin-title-bar, + .dsm-version-number, + .dsm-plugin-info-body, + .cm-panel, + #intellisense-container td, + .dsm-vc-outfile-name { + color: @text !important; + } + + .cm-gutters, .cm-foldPlaceholder, .selected-intellisense-option { + background: @crust !important; + } + + .ͼb { + color: @mauve !important; + } + + .ͼe { + color: @red !important; + } + + .ͼd { + color: @green !important; + } + + .cm-activeLineGutter, #intellisense-container, .dsm-vc-outfile-name { + background: @mantle !important; + } + + .cm-focused .cm-matchingBracket { + background: fade(@accent, 25%) !important; + } + + .cm-activeLine { + background: fade(@surface0, 50%) !important; + } + + .cm-foldPlaceholder, #intellisense-container { + border-color: @surface0 !important; + } + + .cm-gutters { + color: @subtext0 !important; + border-right-color: @surface0; + } + + .cm-panels, .dsm-vc-preview-inner { + background: @base !important; + } + + .cm-panels-bottom { + border-top-color: @surface0 !important; + } + + .cm-lintRange-error { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .cm-cursor { + border-left-color: @text !important; + } + + .cm-selectionBackground { + background: @surface1 !important; + } + + .compact-view-enabled .dcg-mq-cursor { + border-color: @text !important; + } + + @layer { + .dsm-vc-preview-expand, + .dsm-vc-remove-frame, + .dsm-vc-preview-play-pause { + i { + color: @base !important; + } + } + } + + .dsm-vc-outfile-name { + border-bottom-color: @overlay0 !important; + + &.dcg-hovered { + box-shadow: 0 1px @overlay0 !important; + } + + &:focus { + border-bottom-color: @accent !important; + box-shadow: 0 1px @accent !important; + } + } + + /* Non-Calculator Pages */ + .cls-1, #states path { + fill: @accent !important; + } + + #states path:not(.uses-desmos) { + filter: brightness(125%); + } + + .dcg-frontpage-landing-hero, + .dcg-frontpage-landing__button--hero, + .dcg-text--dark-blue, + .dcg-for-work-hero__label, + .accessibility-main details[open] summary, + .accessibility-main details[open] summary h3 { + color: @base !important; + } + + .dcg-frontpage-landing__button, .dcg-for-work-hero__button { + background: @text !important; + color: @base !important; + opacity: 1 !important; + } + + .dcg-frontpage-landing-geometry__primary-link { + background: @mauve !important; + } + + .dcg-frontpage-landing-3d__primary-link { + background: @maroon !important; + } + + .dcg-frontpage-landing-section, + .dcg-frontpage-landing-tools__link, + .dcg-link-section-title, + .dcg-finalist-name, + li, + .section-interior *, + .dcg-p-tag, + .dcg-search-container input, + .dcg-searchable-dropdown-list, + .section-interior, + .careers-hero h1, + .sticky-nav li:not(.active) a, + .top-info, + .partners, + .dcg-principles-section *, + .dcg-for-work-hero, + body, + .dcg-basic-markdown-container p, + .dcg-basic-markdown-container table th, + .accessibility-main { + color: @text !important; + } + + .dcg-frontpage-landing-interactive__arrow-overlay { + /* Desmos' normal solution looks bad when zoomed in (it uses like 10 stacked text-shadows.) */ + text-shadow: none; + paint-order: stroke fill; + -webkit-text-stroke: 4px white; + } + + .dcg-frontpage-landing-section--bg-light, + .dcg-frontpage-landing-section--bg-dark, + .dcg-facts-wrapper, + .dcg-principles-container__light-bg, + .dcg-for-work-hero, + .dcg-section--gray, + .callout--primary, + .lt-dropdown-menu, + .dcg-basic-markdown-container table th, + .accessibility-main section:nth-of-type(2n) { + background: @crust !important; + } + + .dcg-frontpage-landing-classroom__card, + body, + .dcg-frontpage-landing-testing__bullets, + .accessibility-features-in-tools li, + .accessibility-main details { + background-color: @base !important; + } + + .dcg-blue-link, + .dcg-footer-link, + .dcg-primary-link, + .dcg-shared-tab-gray-underline, + .dcg-btn-blue-outline { + color: @accent !important; + } + + .dcg-footer-legal-content-container, + .sticky-nav li.active a, + .dcg-principles-header, + .dcg-for-work-hero__label, + .accessibility-main details[open] summary { + background: @accent !important; + } + + .dcg-finalist-location, .dcg-subtitle, .breadcrumbs li::before { + color: @subtext0 !important; + } + + .dcg-shared-tab-gray-underline.dcg-hovered { + border-bottom-color: @accent !important; + } + + .dcg-footer-main-content-container, + .careers-hero, + .dcg-background--light-blue, + .state-info:not(.modal-view) { + background: @base !important; + } + + .dcg-footer-legal-info a, + .dcg-footer-title, + .dcg-copyright, + .dcg-footer-legal-info, + .sticky-nav li.active a, + .dcg-principles-header * { + color: @base !important; + } + + .dcg-test-blurb, + .dcg-key-command, + pre, + .dcg-container, + .lt-dropdown-menu, + .accessibility-main details { + border-color: @surface0 !important; + } + + .dcg-search-container input, + .dcg-searchable-dropdown-list, + .sticky-nav li:not(.active) a, + .dcg-key-command, + .dcg-btn-blue-outline, + *:not(pre) > code { + background: @mantle !important; + } + + .dcg-search-container input:focus, + .pdf-button, + .dcg-btn-blue-outline, + .callout--primary, + .lt-btn, + .lt-section-subscribe button { + border-color: @accent !important; + } + + .dividing-line { + background: @surface0 !important; + } + + .job-openings-message-container .white-background { + background: transparent !important; + } + + .pdf-button.dcg-hovered, .dcg-btn-blue-outline.dcg-hovered { + box-shadow: 0 0 0 1px @accent !important; + } + + .dcg-footer-logo img, .dcg-testimonial__image { + filter: @text-filter; + } + + .dcg-for-work-hero__input { + border-color: @text !important; + + &:focus { + box-shadow: 0 0 0 1px @text !important; + } + } + + .dcg-basic-markdown-container table { + th, td { + border-color: @text !important; + } + } + + /* Scientific, Geometric, and Matrix */ + .dcg-calc-basic-main, #main { + --dcg-custom-background-color: @base; + border-color: transparent !important; + } + + .dcg-basic-list-container, .dcg-matrix-list-container { + border-top-color: @surface0 !important; + } + + .dcg-basic-list-placeholder, + .dcg-keypad-control-bar, + .dcg-matrix-list-placeholder { + border-left-color: @surface0 !important; + border-right-color: @surface0 !important; + } + + .dcg-basic-keypad-container, + .dcg-basic-expression, + .dcg-latex-expression, + .dcg-matrix-expression { + border-color: @surface0 !important; + } + + .dcg-keypad-control-btn.dcg-selected::after, + .dcg-segmented-control-btn.dcg-selected { + background: @accent !important; + } + + .dcg-basic-expression.dcg-focused, + .dcg-matrix-expression.dcg-focused, + .dcg-latex-expression.dcg-focused { + border-color: @accent !important; + box-shadow: inset 0 0 0 1px @accent !important; + } + + .dcg-resize-action { + background: @mantle !important; + border-color: @surface0 !important; + } + + .dcg-matrix-container, .dcg-segmented-control-btn.dcg-selected { + border-color: @text !important; + } + + .dcg-matrix-view .dcg-mq-math-mode.dcg-mq-focused { + border-bottom-color: @accent !important; + } + + .dcg-mq-ans { + border-color: @accent !important; + color: @accent !important; + background: fade(@accent, 26%) !important; + + &::after { + border-color: @accent !important; + color: @accent !important; + background: @mantle !important; + } + } + + .dcg-keypad-control-btn.dcg-disabled { + opacity: 1 !important; + color: @surface1 !important; + + i { + color: @surface1 !important; + } + } + + --dcg-custom-text-color-shaded: @text; + + /* Help Center */ + .lt-container-inner *, + .lt-topbar, + .hc-multiselect-toggle li span[aria-label]::before { + color: @text !important; + } + + .lt-container-inner a:not(.lt-btn--primary), .lt-topbar__link { + color: @accent !important; + } + + .lt-topbar { + background: @crust !important; + } + + .lt-topbar__logo { + filter: @text-filter; + } + + .lt-hero-unit__bg, + .lt-footer-submit-ticket, + .tab, + .lt-new-request-tip, + .form-field input, + .form-field textarea, + .hc-multiselect-toggle, + .hc-multiselect-menu { + background: @mantle !important; + } + + input[type="submit"], .lt-block-list-item__link, .lt-btn--primary { + background: @accent !important; + border-color: @accent !important; + color: @base !important; + } + + input[type="search"] { + background: @crust !important; + border-color: @text !important; + } + + .search::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .lt-block-list-item__link * { + color: @base !important; + } + + .lt-custom-block__icon { + filter: @accent-filter; + } + + .lt-footer, + .lt-search-box:not(.lt-search-box--hero-unit), + .lt-breadcrumbs-wrapper, + .hc-multiselect-menu li:focus, + .hc-multiselect-toggle li { + background: @base !important; + } + + .lt-scroll-to-top { + color: @accent !important; + } + + .pagination-list *, .lt-scroll-to-top, .lt-new-request-tip { + border-color: @accent !important; + } + + .lt-header, .lt-search-result { + border-bottom-color: @surface0 !important; + } + + .lt-search-result__text em { + background: @yellow !important; + color: @base !important; + } + + .lt-toc--link.is-active > span { + color: @base !important; + } + + .tab, .key-command, .hc-multiselect-toggle, .hc-multiselect-menu { + border-color: @surface0 !important; + } + + @layer { + .tabs-link { + color: @text !important; + + &:hover { + color: @accent !important; + } + + &.is-active { + color: @base !important; + background: @accent !important; + border-color: @accent !important; + } + } + } + + .upload-dropzone[data-hc-focus="true"] { + border-color: @accent !important; + } + + --input-border-color: @surface0; + --input-focus-border-color: @accent; + + /* Blog */ + .content-wrap *:not(a), .tag-links > a { + color: @text !important; + } + + .article header { + border-top-color: @surface0 !important; + } + + *:not(.tag-links) > a:not(.img-card, .btn-blue, .btn-blue-outline) { + color: @accent; + } + + .tag-container a { + border-color: @text !important; + + &:active { + background: fade(@text, 50%) !important; + } + } + + .img-card { + border-color: @surface2 !important; + + &:hover { + box-shadow: 0 0 0 1px @surface2 !important; + } + } + + .btn-blue { + background: @accent !important; + color: @base !important; + } + + .btn-blue-outline { + border-color: @accent !important; + color: @accent !important; + + &:hover { + box-shadow: 0 0 0 1px @accent !important; + } + } + + .dcg-frontpage-landing__announcement { + background: @accent; + color: @text; + } + + .dcg-frontpage-landing__announcement-interior { + background-color: fade(@crust, 50%); + } + + /* Exams & Testing Pages (desmos.com/testing/default/{fourfunction,graphing,scientific}) */ + .spa-sample-calculator-view { + .dcg-sample-calculator__header i.dcg-icon-desmos { + color: @base !important; + } + + .dcg-sample-calculator__header { + background-color: @accent !important; + color: @base !important; + } + + .dcg-sample-calculator__calculator-name, + .dcg-sample-calculator__state-name { + border-color: @base; + } + } + + /* Login/sign up modal */ + .dcg-shared-modal-dialog { + color: @text; + --dcg-modal-background-color: @base; + + /* Account signup welcome */ + .dcg-authentication-modal__sublabel { + color: @subtext0; + } + .dcg-authentication-modal__tag { + background-color: fade(@accent, 20%); + + &:hover { + background-color: fade(@accent, 30%); + } + + &.dcg-authentication-modal__tag--selected { + border-color: @accent; + } + } + } + + /* Account button/dropdown (displays username) */ + .dcg-header-bar__account-menu { + &.dcg-hovered, &[aria-expanded="true"] { + background-color: @surface0; + } + } + /* Account settings modal */ + .dcg-shared-account-dialog { + color: @text; + } + + /* Desmos Professional (desmos.com/professional) */ + .dcg-professional-hero { + background-color: @crust; + color: @text; + } + .dcg-section__beta-button { + color: @base; + background-color: @text; + + &.dcg-hovered { + background-color: @subtext1; + } + + &.dcg-depressed { + background-color: @subtext0; + } + } + + /* "powered by" text above logo */ + .dcg-powered-by { + color: @text !important; + } + + /* saved graph titles */ + .dcg-checkbox__content { + color: @accent; + } + /* saved folders */ + .dcg-saved-graphs { + --dcg-folder-background-color: @mantle; + } + + /* slider bounds */ + .dcg-slider { + --dcg-custom-secondary-text-color: @accent; + } + + /* tutorial (internally called tour/trip) */ + .dcg-trip-interior, .dcg-trip-content { + background: @base !important; + color: @text; + } + + /* folders */ + .dcg-folder { + --dcg-folder-background-color: @mantle !important; + } + .dcg-folder-item-count { + color: @subtext1; + } + .dcg-my-graphs-modal__back-btn-text, + .dcg-folder__name, + .dcg-my-graphs-modal__folder-header + > .dcg-my-graphs-modal-saved-graphs-header, + .dcg-example-gallery__heading, + .dcg-saved-graphs-tile__title { + color: @accent; + } + + /* folders search (no items found) */ + .dcg-my-graphs-modal-empty-state__heading { + color: @accent !important; + } + .dcg-my-graphs-modal-empty-state__no-search-results { + color: @subtext1; + } + + /* new graph button */ + .dcg-new-my-graphs-item__button { + color: @text !important; + } + .dropdown-option-container > .dcg-dropdown-choice[role="menuitem"] { + color: @text; + } + + /* update to new behavior button (write f()=random() then enter/exit text mode) */ + .dcg-update-behavior-btn { + border-color: @surface0 !important; + } + + /* desmodder: intellisense current variable highlight */ + .pfc-param-selected { + background: @surface0 !important; + color: @text !important; + } + + /* line numbers */ + .dcg-num { + color: @text; + } + } +} diff --git a/styles/dev.to/README.md b/styles/dev.to/README.md new file mode 100644 index 0000000000..baf9306538 --- /dev/null +++ b/styles/dev.to/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for DEV Community + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [shnjd](https://github.com/shnjd) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/dev.to/catppuccin.user.less b/styles/dev.to/catppuccin.user.less new file mode 100644 index 0000000000..6cf7d73c23 --- /dev/null +++ b/styles/dev.to/catppuccin.user.less @@ -0,0 +1,260 @@ +/* ==UserStyle== +@name DEV Community Catppuccin +@namespace github.com/catppuccin/userstyles/styles/dev.to +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/dev.to +@version 2025.12.29 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/dev.to/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Adev.to +@description Soothing pastel theme for DEV Community +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("dev.to"), domain("forem.com") { + @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); + + body.dark-theme { + #catppuccin(@darkFlavor); + } + body.light-theme { + #catppuccin(@lightFlavor); + } + body[data-user-status="logged-out"] { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --body-bg: @mantle; + --black: if(@flavor = latte, @text, @crust); + --body-color: @text; + --color-primary: @subtext1; + --color-secondary: @subtext0; + + --header-bg: @base; + --header-shadow: @crust; + + --footer-bg: @crust; + --footer-color: @subtext0; + + --form-bg: @crust; + --form-bg-focus: @base; + --form-border: @surface0; + --form-border-hover: @surface1; + --form-border-focus: @accent; + --focus: @accent !important; + + --base-100: @text; + --base-90: @subtext1; + --base-80: @subtext1; + --base-70: @subtext0; + --base-60: @overlay2; + --base-50: @overlay1; + --base-20: @base; + --base-0: @crust; + --base-inverted: @surface0; + + --tab-color-current: @accent; + --tab-color: @text; + --tab-color-hover: @base; + --tab-bg-hover: fade(@accent, 70%); + + --link-branded-color: @accent; + --link-branded-color-hover: @accent; + --link-color: @text; + --link-color-hover: @blue; + --link-bg-hover: @mantle; + --link-color-secondary: @subtext1; + --link-color-secondary-hover: @text; + --link-bg-current: @mantle; + --link-color-current: @accent; + --link-current-bg: @surface0; + --link-current-color: @accent; + + --btn-bg-hover: @surface0; + --btn-color: @text; + --btn-color-hover: @accent; + --btn-primary-bg: @accent; + --btn-primary-bg-hover: fade(@accent, 90%); + --btn-primary-color: @base; + --btn-primary-color-hover: @crust; + + --button-primary-color: @base; + --button-primary-color-hover: @base; + --button-primary-bg: @accent; + --button-primary-bg-hover: fade(@accent, 90%); + --button-secondary-bg: @surface1; + --button-secondary-bg-hover: fade(@surface1, 90%); + --button-secondary-color: @subtext1; + --button-secondary-color-hover: @text; + --button-outlined-bg-hover: @mantle; + --button-outlined-color: @subtext1; + --button-outlined-color-hover: @text; + --button-outlined-border: @surface0; + --button-outlined-border-hover: @surface1; + --button-ghost-bg-hover: @base; + --button-ghost-color: @text; + --button-ghost-color-hover: @text; + --button-ghost-dimmed-color: @subtext0; + --button-ghost-dimmed-color-hover: @subtext1; + + --reaction-like-bg: fade(@red, 10%); + --reaction-like-color: @red; + --reaction-comment-color: @yellow; + --reaction-save-color: @blue; + // Article like button when liked. + img[src^="https://assets.dev.to/assets/heart-plus-active-"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + --divider: @surface0; + + --label-primary: @text; + --label-secondary: @subtext1; + + --accent-brand: @accent; + --accent-danger-darker: @red; + --accent-danger: @red; + --accent-warning: @yellow; + --accent-warning-a10: fade(@yellow, 10%); + --accent-success-a10: fade( + @green, + 20% + ); // Share article link "copied to clipboard" confirmation. + + --card-bg: @base; + --card-color: @text; + --card-border: @mantle; + --card-secondary-bg: @surface0; + --card-secondary-bg-hover: fade(@surface0, 90%); + --card-secondary-color: @subtext1; + --card-secondary-border: @surface0; + --card-tertiary-bg: @surface0; + --card-tertiary-bg-hover: fade(@surface0, 90%); + --card-color-tertiary: @text; + + --cta-branded-bg-hover: @accent; + --cta-branded-color: @accent; + --cta-branded-color-hover: @base; + --cta-branded-border: @accent; + --cta-branded-border-hover: @accent; + + --tooltip-bg: @surface2; + --tooltip-color: @text; + + --modal-bg: @surface0; + + --tag-bg: fade(@blue, 10%); + --tag-bg-hover: fade(@blue, 20%); + --tag-color: @blue; + --tag-color-hover: @blue; + --tag-prefix: @blue; + --tag-prefix-hover: @blue; + + --indicator-bg: @blue; + --indicator-color: @base; + --indicator-subtle-bg: fade(@blue, 20%); + --indicator-subtle-color: @subtext1; + + --syntax-background-color: @mantle; + + // popular colors have accent colors. These colors are dynamically assigned, + // whereas other tags fallback color is not overrided by root variables. + .crayons-tag__prefix { + --tag-prefix: @blue; + } + + // danger button + .crayons-btn--danger { + --color: @base; + --color-hover: @crust; + } + + // like and reply button icons in comments + .crayons-btn--ghost .reaction-icon { + filter: none; + } + + // billboard cards on right column has statically coded borders + .text-styles--billboard { + > div { + border-color: @surface0 !important; + } + } + + // dev.to doesn't provide style for
+ hr { + border-color: @surface2; + } + + // Dev++ page + // NOTE: This styling might change in future + // as it is wrapped with custom conatiner with different variables. + #custom { + background-color: @crust; + color: @text; + + // background + .tw-bg-dolphin, + .tw-bg-white, + .tw-bg-black, + .tw-bg-zinc-50, + .tw-bg-zinc-950 { + background-color: @crust; + } + + .tw-bg-zinc-100, + .tw-bg-zinc-200, + .tw-bg-zinc-800, + .tw-bg-zinc-900 { + background-color: @mantle; + } + + // text + .tw-text-black, + .tw-text-white, + .tw-text-zinc-50, + .tw-text-zinc-950 { + color: @text; + } + + .tw-text-zinc-100, + .tw-text-zinc-200, + .tw-text-zinc-800, + .tw-text-zinc-900 { + color: @subtext1; + } + + .tw-text-zinc-300, + .tw-text-zinc-400, + .tw-text-zinc-600, + .tw-text-zinc-700 { + color: @subtext0; + } + + // border + .tw-border-zinc-800, + .tw-border-zinc-600 { + border-color: @surface0; + } + } + } +} diff --git a/styles/tutanota/README.md b/styles/devdocs/README.md similarity index 53% rename from styles/tutanota/README.md rename to styles/devdocs/README.md index 9d505a5288..0a2016d903 100644 --- a/styles/tutanota/README.md +++ b/styles/devdocs/README.md @@ -4,47 +4,23 @@

Logo
- Catppuccin for Tutanota + Catppuccin for DevDocs

- - + +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- -## Usage -> **Note**
-> Set Tutanota's built-in theme to either **light** if you're using Latte or **dark** if you're using the others. +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +## 💝 Current Maintainer +- [ashish0kumar](https://github.com/ashish0kumar) -## 💝 Current Maintainer(s) -- [Ryan Cao](https://github.com/ryanccn)   diff --git a/styles/devdocs/catppuccin.user.less b/styles/devdocs/catppuccin.user.less new file mode 100644 index 0000000000..66f9012c08 --- /dev/null +++ b/styles/devdocs/catppuccin.user.less @@ -0,0 +1,106 @@ +/* ==UserStyle== +@name DevDocs Catppuccin +@namespace github.com/catppuccin/userstyles/styles/devdocs +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/devdocs +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/devdocs/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Adevdocs +@description Soothing pastel theme for DevDocs +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("devdocs.io") { + @import url("https://prismjs.catppuccin.com/variables.important.css"); + + html._theme-default { + #catppuccin(@lightFlavor); + } + html._theme-dark { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --documentBackground: @base; + --contentBackground: @base; + --textColor: @text; + --textColorLight: @subtext1; + --textColorLighter: @subtext0; + --textColorRed: @red; + + --focusBackground: @surface0; + --focusBorder: @surface1; + --focusText: @text; + --selectionBackground: @accent; + --selectionText: @base; + --selectionBorder: @surface1; + --highlightBackground: @surface2; + --loadingText: @overlay2; + + --linkColor: @blue; + --linkColorHover: @sky; + + --headerBackground: @crust; + --headerBorder: @surface1; + + --searchTagBackground: @crust; + --searchBorder: @surface1; + --inputFocusBorder: @accent; + + --sidebarBackground: @mantle; + --sidebarBorder: @surface1; + --scrollbarColor: @overlay0; + --scrollbarColorHover: @overlay1; + + --boxHeaderBackground: @mantle; + --boxHeaderColor: @text; + --boxBackground: @mantle; + --boxBorder: @surface1; + --boxBorderLight: @surface1; + + --noteBackground: @surface0; + --noteBorder: @surface1; + --noteGreenBackground: fade(@green, 30%); + --noteGreenBorder: @surface1; + --noteBlueBackground: fade(@blue, 30%); + --noteBlueBorder: @surface1; + --noteOrangeBackground: fade(@peach, 30%); + --noteOrangeBorder: @surface1; + --noteRedBackground: fade(@red, 30%); + --noteRedBorder: @surface1; + + --notifBackground: @surface0; + --notifBorder: 1px solid @surface1; + --notifColor: @text; + --tipBackground: @surface0; + --tipBorder: 1px solid @surface1; + --noticeBackground: @surface0; + --noticeBorder: @surface1; + --labelBackground: @surface0; + + ._list-arrow { + fill: @overlay0; + opacity: 1; + + &:hover { + fill: @overlay1; + } + } + + ._search > svg { + fill: @overlay2; + opacity: 1; + } + } +} diff --git a/styles/docs.deno.com/README.md b/styles/docs.deno.com/README.md new file mode 100644 index 0000000000..1f69d5e5bd --- /dev/null +++ b/styles/docs.deno.com/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for docs.deno.com + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/docs.deno.com/catppuccin.user.less b/styles/docs.deno.com/catppuccin.user.less new file mode 100644 index 0000000000..c09084de2e --- /dev/null +++ b/styles/docs.deno.com/catppuccin.user.less @@ -0,0 +1,303 @@ +/* ==UserStyle== +@name docs.deno.com Catppuccin +@namespace github.com/catppuccin/userstyles/styles/docs.deno.com +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/docs.deno.com +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/docs.deno.com/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Adocs.deno.com +@description Soothing pastel theme for docs.deno.com +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("docs.deno.com") { + @import url("https://prismjs.catppuccin.com/variables.important.css"); + + :root.dark { + #catppuccin(@lightFlavor); + } + :root.light { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --primary: #hsla(@accent)[]; + --background-primary: #hsla(@base)[]; + --background-secondary: #hsla(@mantle)[]; + --background-tertiary: #hsla(@crust)[]; + --foreground-primary: #hsla(@text)[]; + --foreground-secondary: #hsla(@subtext1)[]; + --foreground-tertiary: #hsla(@overlay0)[]; + --foreground-quaternary: #hsla(@surface0)[]; + --runtime-background: 124deg, 100%, 3%; + --runtime-foreground: 184deg, 100%, 90%; + --note: #hsla(@blue)[]; + --info: #hsla(@teal)[]; + --caution: #hsla(@yellow)[]; + --tip: #hsla(@green)[]; + + .banner-runtime { + background-color: fade(@accent, 10%); + color: @text; + border-color: @accent; + } + .banner-deploy { + background-color: fade(@sky, 10%); + color: @text; + border-color: @sky; + } + + .runtime-link { + color: @accent; + text-decoration-color: @accent; + + &:hover { + color: darken(@accent, 5%); + text-decoration-color: darken(@accent, 5%); + } + } + .deploy-link { + color: @sky; + text-decoration-color: @sky; + + &:hover { + color: @sapphire; + text-decoration-color: @sapphire; + } + } + .help-link { + color: @mauve; + text-decoration-color: @mauve; + + &:hover { + color: darken(@mauve, 5%); + text-decoration-color: darken(@mauve, 5%); + } + } + + .heading-runtime { + text-decoration-color: @accent; + } + .heading-deploy { + text-decoration-color: @sky; + } + .heading-purple { + text-decoration-color: @mauve; + } + + .runtime-cta { + background-color: @accent; + border-color: @accent; + + &:hover { + background-color: darken(@accent, 5%); + } + } + .jsr-cta { + background-color: @yellow; + border-color: @yellow; + color: @crust; + + &:hover { + background-color: darken(@yellow, 5%); + } + } + .deploy-cta { + background-color: @sky; + border-color: @sky; + color: @crust; + + &:hover { + background-color: @sapphire; + } + } + + &, + [data-color-mode] { + --color-fg-default: @text; + --color-fg-muted: @subtext1; + --color-canvas-default: @base; + --color-canvas-subtle: @mantle; + --color-border-default: @surface2; + --color-border-muted: @surface0; + --color-accent-fg: @accent; + --color-accent-emphasis: darken(@accent, 5%); + --color-danger-fg: @red; + + --color-prettylights-syntax-markup-deleted-bg: fade(@red, 20%); + --color-prettylights-syntax-markup-inserted-bg: fade(@green, 20%); + } + + // Logo + .fill-black { + fill: @text; + } + + &.light { + .theme-toggle { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } + &.dark { + .theme-toggle { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } + + .markdownBlockTitle { + background-color: @surface0; + border-color: @overlay0; + color: @subtext1; + } + .check-icon [stroke="green"] { + stroke: @green !important; + } + .markdown-body .admonition { + &.note { + background-color: fade(@blue, 5%); + .title::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } + &.tip { + background-color: fade(@green, 5%); + .title::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } + &.caution { + background-color: fade(@yellow, 5%); + + .title::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } + &.info { + background-color: fade(@teal, 5%); + + .title::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } + } + + // "Did you find what you needed?" + .bg-blue-50 { + background-color: fade(@blue, 20%); + } + .border-blue-100 { + border-color: fade(@blue, 30%); + } + + // Breadcrumbs + .crumb-link::after { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + // Toggle switches (tutorial filters) + .slider { + background-color: @overlay2; + } + .filter:checked + .slider { + background-color: @accent; + } + .slider::before { + background-color: @surface0; + } + + // Download and install tabbed component + .deno-tabs > div.deno-tabs-content > div, + .deno-tabs > ul.deno-tabs-buttons > li > button[data-active="true"] { + background-color: @surface1; + color: @text; + border-color: @overlay0; + } + .deno-tabs > ul.deno-tabs-buttons > li > button { + background-color: @surface0; + color: @subtext0; + } + .markdown-body .deno-tabs pre { + background-color: @mantle; + border-color: @overlay0; + } + + /* API reference */ + .ddoc { + #ddoc(@token, @color) { + .text-@{token} { + color: @color; + } + .bg-@{token}\/15 { + background-color: fade(@color, 15%); + } + } + + #ddoc( + Namespace, + @yellow, + ); + #ddoc( + Interface, + @sapphire, + ); + #ddoc( + Enum, + @teal, + ); + #ddoc( + Class, + @mauve, + ); + #ddoc( + Function, + @blue, + ); + #ddoc( + Variable, + @lavender, + ); + #ddoc( + TypeAlias, + @pink, + ); + } + } +} + +#hsla(@color) { + @raw: e( + %("%s, %s%, %s%", hue(@color), saturation(@color), lightness(@color)) + ); +} diff --git a/styles/docs.rs/README.md b/styles/docs.rs/README.md new file mode 100644 index 0000000000..a7a8d1db55 --- /dev/null +++ b/styles/docs.rs/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for docs.rs + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/docs.rs/catppuccin.user.less b/styles/docs.rs/catppuccin.user.less new file mode 100644 index 0000000000..9a8115ab54 --- /dev/null +++ b/styles/docs.rs/catppuccin.user.less @@ -0,0 +1,294 @@ +/* ==UserStyle== +@name docs.rs Catppuccin +@namespace github.com/catppuccin/userstyles/styles/docs.rs +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/docs.rs +@version 2026.01.16 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/docs.rs/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Adocs.rs +@description Soothing pastel theme for docs.rs +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("docs.rs"), domain("doc.rust-lang.org") { + :root:not([data-docs-rs-theme]) { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + :root[data-docs-rs-theme="dark"] { + #catppuccin(@darkFlavor); + } + :root[data-docs-rs-theme="light"] { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --color-background-code: @mantle; + --color-background: @base; + --input-color: @text; + --input-box-shadow-focus: 0 0 8px 4px @accent; + --color-border-light: @surface2; + --color-border: @surface0; + --color-doc-link-background: @accent; + --color-doc-link-hover: @accent; + --color-error-hover: red; + --color-error: red; + --color-macro: red; + --color-menu-border: red; + --color-menu-header-background: red; + --color-navbar-standard: @text; + --color-standard: @subtext1; + --color-brand: @text; + --color-struct: red; + --color-type: @peach; + --color-url: @accent; + --color-warn-background: @peach; + --color-warn-msg: @crust; + --color-warn-hover: red; + --color-warn: @peach; + --color-background-input: @mantle; + --color-table-header-background: @surface0; + --color-table-header: @text; + --color-search-focus: red; + --chart-title-color: red; + --chart-grid: red; + + --main-background-color: @base; + --main-color: @text; + --settings-input-color: @accent; + --settings-input-border-color: @surface0; + --settings-button-color: @text; + --settings-button-border-focus: @accent; + --settings-menu-filter: @subtext0-filter; + --settings-menu-hover-filter: @subtext1-filter; + --sidebar-background-color: @mantle; + --sidebar-background-color-hover: @crust; + --sidebar-border-color: @overlay1; + --sidebar-resizer-hover: @sky; + --sidebar-resizer-active: @sapphire; + --source-sidebar-background-selected: @surface0; + --source-sidebar-background-hover: @base; + --code-block-background-color: @mantle; + --headings-border-bottom-color: @overlay1; + --border-color: @surface0; + --button-background-color: @mantle; + --right-side-color: @surface2; + --code-attribute-color: @yellow; + --toggles-color: @subtext1; + --search-input-focused-border-color: @accent; + --copy-path-button-color: @text; + --codeblock-error-hover-color: @red; + --codeblock-error-color: fade(@red, 70%); + --codeblock-ignore-hover-color: @red; + --codeblock-ignore-color: fade(@red, 70%); + --warning-border-color: red; + --type-link-color: @sky; + --trait-link-color: @mauve; + --assoc-item-link-color: @yellow; + --function-link-color: @green; + --macro-link-color: @green; + --keyword-link-color: @yellow; + --mod-link-color: @accent; + --link-color: @accent; + --sidebar-link-color: @accent; + --sidebar-current-link-background-color: @surface0; + --search-result-link-focus-background-color: fade(@accent, 20%); + --search-result-border-color: @surface0; + --search-color: @text; + --search-error-code-background-color: red; + --search-results-alias-color: red; + --search-results-grey-color: @subtext1; + --search-tab-title-count-color: @subtext0; + --search-tab-button-not-selected-border-top-color: @crust; + --search-tab-button-not-selected-background: @crust; + --search-tab-button-selected-border-top-color: @accent; + --search-tab-button-selected-background: @base; + --stab-background-color: @surface0; + --stab-code-color: @accent; + --code-highlight-kw-color: @mauve; + --code-highlight-kw-2-color: @mauve; + --code-highlight-lifetime-color: @blue; + --code-highlight-prelude-color: @yellow; + --code-highlight-prelude-val-color: @yellow; + --code-highlight-number-color: @peach; + --code-highlight-string-color: @green; + --code-highlight-literal-color: @red; + --code-highlight-attribute-color: @yellow; + --code-highlight-self-color: @red; + --code-highlight-macro-color: @blue; + --code-highlight-question-mark-color: @teal; + --code-highlight-comment-color: @overlay2; + --code-highlight-doc-comment-color: @overlay2; + --color-syntax-foreground: inherit; + --color-syntax-attribute: @yellow; + --color-syntax-background: @mantle; + --color-syntax-bool: @red; + --color-syntax-comment: @overlay2; + --color-syntax-doc-comment: @overlay2; + --color-syntax-keyword1: @mauve; + --color-syntax-keyword2: @mauve; + --color-syntax-lifetime: @blue; + --color-syntax-macro: @blue; + --color-syntax-number: @peach; + --color-syntax-prelude-ty: @yellow; + --color-syntax-prelude-val: @yellow; + --color-syntax-question-mark: @teal; + --color-syntax-self: @red; + --color-syntax-string: @green; + --src-line-numbers-span-color: @accent; + --src-line-number-highlighted-background-color: fade(@accent, 30%); + --test-arrow-color: #dedede; + --test-arrow-background-color: red; + --test-arrow-hover-color: #dedede; + --test-arrow-hover-background-color: red; + --target-background-color: fade(@accent, 10%); + --target-border-color: @accent; + --kbd-color: @text; + --kbd-background: @mantle; + --kbd-box-shadow-color: @surface1; + --crate-search-hover-border: red; + --src-sidebar-background-selected: @surface0; + --src-sidebar-background-hover: @surface1; + --table-alt-row-background-color: @mantle; + --codeblock-link-background: fade(@surface0, 50%); + --scrape-example-toggle-line-background: red; + --scrape-example-toggle-line-hover-background: red; + --scrape-example-code-line-highlight: fade(@accent, 40%); + --scrape-example-code-line-highlight-focus: fade(@accent, 40%); + --scrape-example-help-border-color: @subtext0; + --scrape-example-help-color: @subtext1; + --scrape-example-help-hover-border-color: @text; + --scrape-example-help-hover-color: @text; + --scrape-example-code-wrapper-background-start: @base; + --scrape-example-code-wrapper-background-end: @base; + + select { + background-color: @mantle; + border-color: @surface0; + } + + hr { + border-color: @overlay1; + } + + .rust-logo { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img[alt="Change settings"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + #settings-menu { + img[alt="Change settings"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + > a:not(:has(img))::before { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + + .setting-check input:checked { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + #copy-path { + @raw: ''; + @raw_before: ''; + + > img { + @svg: escape(replace(@raw, "%COLOR%", @subtext0)); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + &:hover > img { + @svg: escape(replace(@raw, "%COLOR%", @text)); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + + &:not(:has(> img)) { + &::before { + @svg: escape(replace(@raw_before, "%COLOR%", @subtext0)); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + + &:hover::before { + @svg: escape(replace(@raw_before, "%COLOR%", @text)); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + } + } + + details.toggle { + @plus: escape( + '' + ); + @minus: escape( + '' + ); + + > summary::before { + background: url("data:image/svg+xml,@{plus}") no-repeat top left; + filter: none; + } + + &[open] > summary::before { + background: url("data:image/svg+xml,@{minus}") no-repeat top left; + } + } + + .src #sidebar-button > a::before { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .pure-menu-link { + color: @subtext0; + + &:hover { + color: @text; + } + } + .pure-table { + &, + td, + th { + border-color: @surface0; + } + } + } +} diff --git a/styles/duckduckgo/README.md b/styles/duckduckgo/README.md new file mode 100644 index 0000000000..59720b0c45 --- /dev/null +++ b/styles/duckduckgo/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for DuckDuckGo + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [GenShibe](https://github.com/GenShibe) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/duckduckgo/catppuccin.user.less b/styles/duckduckgo/catppuccin.user.less new file mode 100644 index 0000000000..6f3f492c96 --- /dev/null +++ b/styles/duckduckgo/catppuccin.user.less @@ -0,0 +1,1203 @@ +/* ==UserStyle== +@name DuckDuckGo Catppuccin +@namespace github.com/catppuccin/userstyles/styles/duckduckgo +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/duckduckgo +@version 2026.03.18 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/duckduckgo/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aduckduckgo +@description Soothing pastel theme for DuckDuckGo +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("duckduckgo.com"), domain("duck.ai") { + :root:not(.dark-bg, .no-theme) { + #catppuccin(@lightFlavor); + } + + :root.dark-bg { + #catppuccin(@darkFlavor); + } + + :root.no-theme { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --sds-color-text-02: @text !important; + --sds-color-text-disabled: @overlay0 !important; + --theme-col-txt-page-separator: @text !important; + --theme-col-page-separator: @text !important; + --theme-col-txt-url: @text !important; + --theme-col-txt-title: @blue !important; + --theme-col-txt-title-visited: @lavender !important; + --theme-col-txt-snippet: @text !important; + --theme-col-txt-card-title: @text; + --theme-col-txt-url-domain: @subtext1 !important; + --theme-col-bg-card: @surface0 !important; + --theme-col-about-link: @blue; + --theme-col-border-ui: @surface1 !important; + --theme-col-bg-expandcollapse: @surface0 !important; + --sds-color-palette-gray-60: @accent !important; + --sds-color-text-accent-01: @accent !important; + --theme-col-txt-msg: @text !important; + --theme-col-txt-url-path: @subtext0 !important; + --theme-col-border-expandcollapse: @surface1; + --col-blue-50: @sapphire !important; + --col-blue-60: @blue !important; + --theme-col-bg-page: @base !important; + --sds-color-text-01: @text !important; + --sds-color-text-on-color: @base !important; + --theme-spp-high-contrast-text-secondary: @accent !important; + --theme-spp-high-contrast-card-indicator-color: @surface0 !important; + --theme-spp-high-contrast-title-span-text: @text !important; + --theme-spp-high-contrast-bg: @surface0 !important; + --sds-color-palette-yellow-50: @yellow !important; + --sds-color-text-04: @subtext1 !important; + --theme-col-txt-card-body: @text !important; + --theme-col-txt-qna-details: @subtext0 !important; + --theme-col-txt-card: @text !important; + --sds-color-text-03: @subtext0 !important; + --col-slate-light: @subtext0; + --col-silver-dark: @overlay1; + --theme-col-txt-button-secondary: @accent !important; + --theme-bg-legacy-home: @base !important; + --theme-bg-cta-cards: @surface0 !important; + --theme-button-primary-bg: @blue !important; + --theme-button-primary-bg--hover: @blue !important; + --theme-button-primary-bg--active: @blue !important; + --theme-button-primary-text: @crust !important; + --theme-badge-fg--green: @crust !important; + --theme-browser-comparison-table-check-bg: @green !important; + --theme-browser-comparison-table-cross-bg: @red !important; + --theme-searchbox-bg: @surface0 !important; + --theme-searchbox-bg--hover: @surface0 !important; + --theme-searchbox-bg--active: @surface0 !important; + --theme-searchbox-bg--focused: @surface0 !important; + --theme-border-color-legacy-home-searchbox: @surface2 !important; + --theme-button-link-text: @blue !important; + --theme-browser-comparison-table-badge-text: @text !important; + --theme-badge-bg--green: @green !important; + --theme-badge-bg--yellow: @yellow !important; + --theme-atb-button-bg: @blue; + --theme-atb-button-bg--hover: @blue; + --theme-atb-button-bg--active: @blue; + --col-silver-light: @surface1 !important; + --theme-col-card-inner-border: @surface2 !important; + --sds-color-text-link-02: @text !important; + --sds-color-text-link-02--hover: @subtext1 !important; + --theme-text-legacy-home: @text !important; + --theme-browser-comparison-table-row-bg: @surface0 !important; + --theme-browser-comparison-table-row-alt-bg: @surface1 !important; + --theme-bg-home-bottom: @base !important; + --theme-atb-card-back-bg: @surface0 !important; + --theme-atb-card-front-bg: @surface1 !important; + --theme-text-bg: @text !important; + .featureCards_root__brAX3 { + --feature-card-background-color: @surface0 !important; + } + --theme-accordion-background--expanded: @surface0 !important; + --theme-accordion-background: @surface1 !important; + --theme-footer-link-text: @blue !important; + --theme-sidemenu-bg: @surface0 !important; + --theme-col-txt-button-tertiary: @text !important; + --theme-bg-legacy-home-searchbox: @surface0 !important; + --theme-bg-info-snippet: @surface2 !important; + --theme-button-tertiary-txt: @text !important; + --theme-browser-comparison-table-icon-bg: @mantle !important; + --theme-col-bg-ui: @mantle !important; + --theme-col-bg-header: @mantle !important; + --theme-col-bg-header-modal: @surface0 !important; + --theme-col-bg-button-primary: @blue !important; + --sds-color-background-dark: @crust !important; + /* ai chat */ + --sds-color-text-link-02-hover: @text !important; + --theme-dc-color-background-dark: @base !important; + --theme-dc-color-gpt-main: @mauve !important; + --theme-dc-color-gpt-bg: @mauve !important; + --theme-dc-color-claude-main: @green !important; + --theme-dc-color-claude-bg: @green !important; + --sds-color-background-destructive: @red !important; + --sds-color-text-on-dark-01: @text !important; + --theme-dc-color-fire-button: fade(@red, 40%) !important; + --sds-color-background-destructive-state-01: @red !important; + --sds-color-background-destructive-state-02: @red !important; + --sds-color-text-destructive: @red !important; + --sds-color-text-success: @green !important; + --sds-color-text-link-01: @blue !important; + --sds-color-background-container-01: @surface0 !important; + --sds-color-border-accent-01: @accent !important; + --theme-dc-color-container-message: @surface0 !important; + --sds-color-palette-gray-85: @surface1 !important; + --sds-color-palette-white: @crust !important; + --sds-color-background-accent-01: @accent !important; + --theme-col-txt-card-body-light: @text !important; + --theme-col-bg-page-alt-2: @surface0 !important; + --theme-col-bg-ui-active: @surface1 !important; + --theme-dc-color-llama-main: @pink !important; + --theme-dc-color-mixtral-main: @peach !important; + --theme-dc-color-anchor-sleep: @subtext0 !important; + --theme-assist-bg-chat-system: @mantle !important; + --theme-assist-gradient-stop: @mantle !important; + --sds-color-palette-gray-40: @text !important; + /* maps */ + --sds-color-background-01: @base !important; + --sds-color-background-02: @mantle !important; + --sds-color-palette-red-40: @red !important; + --sds-color-border-01: @surface0 !important; + --col-blue-30: @blue !important; + --sds-color-palette-green-60: @green !important; + --sds-color-background-utility: @surface0 !important; + + .address-detail { + background-color: @mantle; + color: @text; + border-color: @surface0; + } + + .footer, + .footer--mobile, + .modal--dropdown--settings, + .settings-dropdown--section, + .frm__field, + .frm__switch, + .tileview .metabar--fixed, + body, + .zci, + html, + .body--home, + html.displayable-atb-banner .body--home, + .site-wrapper, + .region__body, + .badge-link, + .module--carousel__image-wrapper, + .result__image, + .vertical--map__sidebar, + .vertical--map__sidebar__header, + .page-chrome_newtab, + .js-carousel-module-more, + .zci--type--tiles:not(.is-fallback).is-full-page.is-expanded, + .zci--type--tiles:not(.is-fallback).is-full-page.is-expanded + .metabar:not(.is-stuck) { + background-color: @base !important; + } + /* .dropdown--settings--icon .dropdown__button:after needs visibility: hidden, otherwise we get a case of clashing icons */ + .dropdown__button::after { + visibility: hidden; + } + + /* privacy reminders */ + .wXKLp5dS9jGvo097pfaG, + .privacy-reminder__text { + color: @green !important; + } + .IuA6a2PUTR9Lck6m0WlP, + .privacy-reminder__icon-circle { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + .XxDCpwElzOhQaLmCxJ8z, + .privacy-reminder__icon-shield { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + .privacy-reminder__icon-check { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + .privacy-reminder__modal-hide, + .privacy-reminder__modal-link { + color: @text !important; + } + + /* stopwatch */ + .zci--stopwatch .time { + color: @text !important; + } + .label { + color: @text; + background-color: @crust; + } + .stopwatch__btn.start { + border-color: @green !important; + background-color: @green; + color: @mantle !important; + } + .stopwatch__btn[disabled] { + color: @text !important; + background-color: @surface0 !important; + border-color: @surface0; + } + .stopwatch__btn.stop { + color: @mantle; + background-color: @red !important; + border-color: @red !important; + } + .stopwatch__btn { + background-color: @surface2; + border-color: @surface2; + color: @text; + } + .zci--stopwatch td { + color: @text; + } + + /* html chars */ + .record__body, + .chomp--link__mr, + .tx-clr--lt2 { + color: @text; + } + .c-list__item { + border-color: @mantle; + } + .chomp--link__icn::before { + color: @text; + } + + /* cal */ + .calendar .t_right, + .calendar .t_left { + background-color: @surface2; + } + .calendar__header { + color: @text; + } + table.calendar tr { + color: @text; + } + .calendar__today { + color: @mantle; + background-color: @accent; + } + + .zci.is-active { + border-color: @surface0; + } + + .module__toggle--more::after { + background: linear-gradient(transparent, @surface0); + } + + /* button on hover */ + .btn:hover:not(.is-disabled) { + background-color: @mantle; + color: @blue; + border-color: @mantle; + } + + /* stocks infobox */ + .stocks-module__currentPrice, + .stocks-module__exchange, + .stocks-module__currency, + .stocks-module__stats { + color: @text; + } + .stocks-module__timePeriod { + background-color: @surface2; + color: @text; + } + .stocks-module__latestUpdate, + .ia-module--stocks a.stocks-module__attribution, + .stocks-module__footer { + color: @subtext1; + } + .stocks-module__timePeriod.selected { + color: @mantle; + background-color: @accent; + } + .ia-module--stocks.increase .color-coded { + color: @green !important; + } + .stocks-module__hover-label { + &[style*="color: rgb(222, 88, 51);"] { + color: @red !important; + } + &[style*="color: rgb(91, 158, 77);"] { + color: @green !important; + } + } + .ia-module--stocks.increase .color-coded path { + stroke: @green; + fill: @green; + } + .ia-module--stocks + .stocks-module__chart-area-row + .stocks-module__chart + svg { + [stroke="#de5833"] { + stroke: @red !important; + } + [fill="#de5833"] { + fill: @red !important; + } + [stroke="#5b9e4d"] { + stroke: @green !important; + [fill="#5b9e4d"] { + fill: @green !important; + } + } + } + .ia-module--stocks.decrease .color-coded { + color: @red; + } + .ia-module--stocks.decrease .color-coded path { + stroke: @red; + fill: @red; + } + .ia-module--stocks + .stocks-module__stats-wrapper + .stocks-module__stats + .stocks-module__stat-col + .stocks-module__stat { + border-bottom-color: @overlay0; + } + .stocks-module__chart .horizontal-line, + .stocks-module__chart .vertical-line, + .stocks-module__chart .prev-close-line { + stroke: @surface2; + } + + /* color box */ + .tx-clr--lt { + color: @text; + } + .tx-clr--dk2 { + color: @subtext0; + } + + /* ai chat >:( */ + .feedback-external__link { + color: @blue; + } + .feedback-duckchat-modal__disclaimer { + color: @text; + } + .feedback-modal__radio { + color: @text; + } + .modal__close { + color: @text; + } + /* lyrics box */ + .js-lyrics-module { + color: @subtext1 !important; + } + .module--lyrics__subtitle-box { + border-color: @surface2; + } + .module__inner-toggle--chevron { + color: @accent !important; + background-color: @surface1 !important; + border-color: @surface2; + } + .module__inner-toggle::before, + .module__inner-toggle::after { + background-color: @surface2 !important; + } + .module--lyrics:not(.is-expanded) + .module--lyrics__footer.can-expand::after { + background: linear-gradient(transparent, @surface0); + } + .module--lyrics__explicit-tag { + border-color: @subtext1; + color: @subtext0; + } + + // translation boxes + .module--translations .dropdown--translation-select, + .module--translations-translatedtext { + background: @surface0 !important; + border-color: @surface0; + } + .module--translations .module--translations-translatedtext.is-placeholder { + color: @subtext0; + } + .module--translations-swap-svg { + fill: @text !important; + } + .module--translations-original textarea, + .module--translations-translatedtext, + .module--translations-footer a { + color: @text; + } + .module--translations-clear, + .module--translations-copy { + color: @subtext0 !important; + } + .modal__list__filter input { + background: @mantle; + } + + //coding info box + .module:not( + .module--carousel, + .module--placeholder, + .module--images, + .module--translations, + .module__chromeless + ) { + background: @surface0 !important; + border-color: @surface1 !important; + } + .module__toggle, + .tile__expand { + background-color: @surface0 !important; + border-color: @surface1 !important; + } + + .module__title__link, + .module__text, + .pln, + .pun, + code, + .module__more-at-bottom { + color: @text !important; + } + code { + background-color: @mantle !important; + } + .lit { + color: @peach !important; + } + .com { + color: @subtext1 !important; + } + .str { + color: @green !important; + } + .atv { + color: @teal !important; + } + .module__title__sub { + color: @subtext0; + } + .prettyprint { + background-color: @mantle; + } + .is-link-style-exp .btn--primary:not(.is-disabled) { + background-color: @blue !important; + border-color: @blue !important; + color: @mantle !important; + } + + .featureCards_dark__5Xbsn { + background: linear-gradient(180deg, @yellow, @blue); + } + + .modal__box.modal__box--feedback.modal__box--headed .modal__box__header { + background-color: @surface0 !important; + } + + // defentions info box + .module--definitions__pronunciation { + color: @subtext0 !important; + } + + .module--definitions__group ol li::before { + color: @accent !important; + } + + .module--definitions__usage { + color: @subtext0 !important; + } + .module__title, + .module--definitions__definition { + color: @text !important; + } + + .play-btn__icn_hollow { + fill: @accent !important; + } + .module__toggle { + color: @accent !important; + } + + // weather info box + .forecast-wrapper .module__weather-warning--red, + .module__weather-warning--red:hover, + .module__weather-warning--red:focus, + .module__weather-warning--red:visited { + color: @red !important; + } + .module__weather-warning { + color: @yellow !important; + } + .text--primary, + .tx-clr--dk, + .tx-clr--slate, + .module__temperature-unit:not(.module__temperature-unit--on), + .module__items-day { + color: @subtext0 !important; + } + .module__temperature-unit, + .module__temperature-unit:hover { + color: @accent !important; + } + .module__detail__precip-label, + .module__items-precip-label, + .ia-module--module--definitions__reference, + .js-definitions-internal { + color: @blue !important; + } + .module__detail__hour-label, + .module__current, + .module__detail__temp-label, + .module__items-unit--on { + color: @text !important; + } + .module__items-item { + background: @surface0 !important; + border-color: @surface2 !important; + } + .module__weatherkit-logo { + fill: @accent; + } + .module__warnings, + .module__temperature-unit--on { + border-color: @surface2 !important; + } + //raindrop icon + .module__detail__precip-label__icon, + .module__items-precip-label__icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + //rain icon + .module__items-icon-precip { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + width: 32px; + height: 32px; + margin-top: 5px; + margin-bottom: -5px; + max-width: 100%; + } + + //calculator + .tile__ctrl__btn, + .tile__history, + .tile__past-calc { + background: @surface0 !important; + border-color: @surface2 !important; + color: @text !important; + } + .attribution--link__icon { + color: @text; + } + .tile__ctrl__toggle-slider { + background: @surface1 !important; + } + .tile__ctrl__toggle-slider::before { + background-color: @mantle !important; + } + .tile__tab__sci .tile__ctrl__btn, + .tile__ctrl__toggle { + background-color: @surface2 !important; + color: @text !important; + border-color: @overlay0 !important; + } + .tile__display__main, + .tile__past-result { + color: @text !important; + } + .tile__display__main { + background-color: @base !important; + } + .tile__display { + box-shadow: + inset -1px -1px 0 @overlay0, + inset 1px 1px 0 @overlay0 !important; + background-color: @base !important; + border-color: @surface2 !important; + color: @text !important; + } + .tile__display.selected { + box-shadow: inset -1px -1px 0 @blue, inset 1px 1px 0 @blue !important; + } + .tile__ctrl--important { + background-color: @yellow !important; + color: @mantle !important; + } + .tile__display__aside, + .tile__past-formula, + .tile__option { + color: @subtext0 !important; + } + .tile__option--active { + color: @accent !important; + } + + .bg-delayed-color { + background-color: @red; + } + + #error_homepage { + background-color: @rosewater !important; + color: @red !important; + } + + .search--adv { + background-color: @surface0 !important; + border-color: @surface0 !important; + } + + .open-in-app__deep-link { + color: @mantle; + } + + .modal__header__clear, + .sep--before, + .js-region-filter-clear, + .result__a, + .module--carousel__body__title, + .js-carousel-module-more, + .js-no-results-web, + .bing .tile__title--pr a, + .sidebar-filter__show-more, + .module__footer, + .js-settings-dropdown-reset-appearance, + .modal--dropdown--settings .settings-dropdown--button, + .settings-page-wrapper a:not(.btn, .set-tab), + .module__link--blue, + .place-list-item__cta-item__text { + color: @blue !important; + } + + .tile__title a:visited { + color: @mauve; + } + + .place-detail__status--off { + color: @red; + } + + .place-detail__status--on { + color: @green; + } + + .result__a:visited { + color: @mauve !important; + } + .bg-clr--green { + background-color: @green; + } + .tile__status, + .osGBsMSM4O7_HVv5OcxQ, + .C68Y1fiPXCZijXmzVAbe { + color: @mantle !important; + } + + .modal__header, + .modal__footer, + .modal__box, + .tile, + .related-searches__item, + .bg-clr--white, + .tile__media__free-shipping-label, + .sidebar-filter__options, + .sidebar-filter__option.is-size, + .module__footer, + .frm__select, + .set-bookmarklet, + .set-reset, + .search__autocomplete, + .frm__input, + .frm__color__swatch { + border-color: @surface0 !important; + background-color: @crust !important; + } + + .sep--before::before, + .sep { + border-left-color: @surface2; + } + + .header-wrap { + box-shadow: none !important; + } + + .header-wrap, + .module--carousel__left, + .module--carousel__right, + .detail, + .btn { + background-color: @mantle; + } + + .set-header--fixed .tileview--grid .metabar--fixed, + .tileview--grid .metabar--fixed.is-stuck { + background-color: @surface0; + border-top-color: @surface0; + } + + .modal--dropdown--region.modal--popout .frm__input, + .js-region-filter-list, + .tile__body, + .bg-clr--white, + .acp-wrap, + .tile__media__free-shipping-label, + .tile__media--pr, + .modal__box, + .nav-menu__list, + .set-tab.is-active, + .frm__select select, + .cloudsave, + .feedback-btn__send, + .set-bookmarklet__input, + .howItWorksSection_downloadsCard__U3Ph9, + .metabar__grid-btn, + .feedback-btn__icon-wrap .set-bookmarklet__input .btn, + .btn.btn--secondary, + .btn.is-disabled, + input, + textarea, + .frm__input, + .frm__text, + .detail--xd .c-detail__btn, + .set-bookmarklet, + .set-reset, + .zci--json_validator textarea, + .colorpicker, + .feedback-modal__submit.is-disabled, + .feedback-modal__submit.is-disabled:active, + .feedback-modal__submit.is-disabled:focus, + .module__section, + .module--carousel__item, + .is-related-search-exp.dark-bg, + .related-searches__item, + .detail--xd .tile-nav--sm, + .set-bookmarklet__detail, + .set-reset__detail, + .module__footer, + .js-definitions-internal { + background-color: @surface0 !important; + } + .module--carousel__item { + border-color: @surface1 !important; + } + + .modal__header, + .module__section, + .module__section:first-child.place-detail__section--tab, + .module__clickable-header { + border-color: @surface1 !important; + } + + .btn.is-disabled:hover, + .frm__switch__label:hover, + .feedback-modal__submit.is-disabled:hover, + .btn.btn--skeleton:hover, + .module__footer-carousel__label:hover { + background-color: @surface2 !important; + border-color: @surface2 !important; + } + .is-checked .frm__switch__label.btn { + background-color: @accent !important; + color: @mantle !important; + } + .js-set-exit { + 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; + } + .set-bookmarklet__data { + background-color: @surface2; + color: @text; + } + + .modal__list__link.is-highlighted, + .modal__list li:hover { + background-color: @overlay1; + } + + .metabar__dropdowns-wrap::before { + background-image: linear-gradient(90deg, @base, transparent); + } + + .metabar__dropdowns-wrap::after { + background-image: linear-gradient(90deg, transparent, @base); + } + + .nav-menu__item__badge { + background-color: @yellow; + color: @mantle; + } + + .settings-dropdown--section, + .set-head, + .frm__hr { + border-bottom-color: @surface2; + } + + .zcm--right-fade::before { + background: linear-gradient(90deg, transparent, @mantle); + } + .search-filters-wrap::before { + background: linear-gradient(90deg, @base, transparent); + } + + .search-filters-wrap::after { + background: linear-gradient(90deg, transparent, @base); + } + + .footer, + .footer--mobile { + border-top-color: @surface0; + } + + .is-vertical-tabs-exp, + #duckbar, + .zcm__link:not(.dropdown__button).is-active, + .set-main-footer { + border-color: @accent !important; + } + + #more-results { + background-color: @surface0 !important; + } + + input, + select, + h1, + h2, + h4, + h5, + h6, + ul, + ol, + blockquote, + p, + body, + .module--carousel__footer, + .set-tab.is-active, + .zcm__link, + .feedback-prompt__link, + .feedback-btn__send, + .tile--img__sub, + .result__snippet, + .result__snippet b, + .modal__list__link, + .acp, + .header_headerButton__cLYU3, + .is-vertical-tabs-exp, + .module.module--images, + .module__header.module__header--link, + .text--title, + .text--airline-flight, + .timing, + .flight-details__values, + .airlines-footer, + .tx-clr--slate, + .nav-menu__heading, + .zci, + .metabar__grid-btn, + .module--carousel__left, + .module--carousel__right, + .c-detail__title__sub, + .c-detail__desc, + .c-detail__filemeta, + .c-detail__more, + .frm__label, + .js-cloudsave-new-suggestion, + .zci__body, + .zci__body a, + .c-base__title { + color: @text !important; + } + + .zci--airlines .text--title svg path { + fill: @text; + } + + .star { + color: @overlay2; + } + + .set-tab, + .set-tab:visited, + .tile-nav.can-scroll { + background-color: @mantle; + color: @overlay1; + } + + .js-cloudsave-save-btn, + .js-cloudsave-load-btn { + background-color: @surface2; + border-color: @overlay0; + color: @text; + } + + .video-source, + .tile__count, + .result__url, + .tile__time, + .feedback-prompt, + .footer__text, + .vertical--news .result__url, + .result__timestamp, + .js-metabar-secondary, + .sidebar-filters, + .tile--pr__original-price, + .nav-menu__item a, + .nav-menu__close, + .frm__desc, + .dropdown__button, + .tx-clr--slate-light, + .flight-details__labels, + .scheduled-time, + .source-link, + .tile__source, + .zci__more-at, + .cloudsave__close, + .module--definitions__attribution-text, + .module__attribution, + .module__attribution-link { + color: @subtext0 !important; + } + + .dropdown--region.has-inactive-region .dropdown__button::after, + .modal--dropdown--region.modal--popout .modal__header::before, + .js-carousel-module-title, + .tile--pr__brand, + .frm__select, + .star::after, + .feedback-btn__icon, + .detail--xd .tile-nav--sm, + .detail__close, + .module--definitions__collapsed-group ol li::before { + color: @accent !important; + } + + .search__button:hover, + .search--header.has-text.search--hover .search__button { + background-color: @accent !important; + color: @base !important; + } + + .settings-page-wrapper.is-checked { + border-color: @blue; + background-color: @sapphire !important; + color: @mantle !important; + } + .modal--dropdown--settings + .settings-dropdown--section + .settings-dropdown--header { + .settings-dropdown--header--link, + .settings-dropdown--header--label { + color: @text !important; + } + } + .ddgsi-check::before { + color: @mantle !important; + } + .set-bookmarklet__title, + .set-reset__title { + color: @text !important; + } + .frm__select::after { + color: @accent !important; + } + + .switch, + .frm__switch__label { + background-color: @crust !important; + } + + .frm__switch__label::after { + background: @overlay2 !important; + } + + .is-checked .frm__switch__label::after { + background: @base !important; + } + + .switch__knob { + background: @overlay2 !important; + } + + .is-on .switch__knob { + background: @base !important; + } + + .switch.is-on { + background-color: @accent !important; + } + + .dropdown__switch.is-on::before { + color: @base !important; + } + + .search--header { + background-color: @surface0; + border-color: @surface0; + } + + .acp--highlight, + .bg-clr--platinum-light { + background-color: @overlay0; + } + + .review__rating-stars, + .place-list-item__rating__image { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } //ddg icon + .header__logo, + .js-logo-ddg { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .yhccgqM_FdvJ79N6Jm6c { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + //duckduckgo search too long icon + .logo_homepage { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + // search glass icon + .related-searches__item-text::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + // ddg header logo + .header_logoImg__PFezv { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } +} + +@-moz-document domain("start.duckduckgo.com") { + :root:not(.theme-dark) { + #catppuccin(@lightFlavor); + } + + :root.theme-dark { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + + color-scheme: if(@flavor = latte, light, dark); + + ::selection { + background-color: fade(@accent, 30%); + } + + // TODO: Why does this ::placeholder from defaults explicitly not apply to ? + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + input { + background-color: @surface0 !important; + color: @text !important; + } + li:hover { + background-color: @surface2 !important; + } + ul { + background-color: @surface0 !important; + } + body { + background-color: @base !important; + } + h1, + h2, + h3, + p, + a, + span { + color: @text !important; + } + + --color-yellow60: @yellow !important; + --theme-button-primary-bg: @blue !important; + --theme-searchbox-caret-bg: @accent !important; + + .home_root__naJUp { + --theme-bg-home: @base !important; + --theme-button-secondary-text: @text !important; + --theme-text-bg: @text !important; + --theme-bg-home-searchbox: @surface0 !important; + --theme-border-color-home-searchbox: @surface0 !important; + } + .searchbox_suggestions__umkQH { + --theme-searchbox-bg: @surface0 !important; + } + .minimal-homepage_minimalHeroLogo__QSVlf { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + .header_headerButton__cLYU3 { + color: @text !important; + } + .sideMenu_sideMenuContent__OE7n9, + .searchbox_iconWrapper__suWUe { + background-color: @surface0 !important; + } + .button_primary__e2_Sy { + color: @mantle !important; + } + .searchbox_hasQuery__j8_VE:hover + .searchbox_searchButton__F5Bwq:not(:disabled), + .searchbox_hasQuery__j8_VE:focus-within { + color: @mantle !important; + background-color: @accent !important; + } + } +} diff --git a/styles/ecosia/README.md b/styles/ecosia/README.md index 2005851cc7..2ee1e8da21 100644 --- a/styles/ecosia/README.md +++ b/styles/ecosia/README.md @@ -10,38 +10,19 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +## ❤️‍🩹 Unmaintained +This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! -## 💝 Current Maintainer(s) -- [Isabel](https://github.com/isabelroses) +## 💖 Past Maintainer +- [isabelroses](https://github.com/isabelroses)   diff --git a/styles/ecosia/assets/catwalk.webp b/styles/ecosia/assets/catwalk.webp deleted file mode 100644 index d4f160cb7c..0000000000 --- a/styles/ecosia/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0d85ff2ba09f44c61e00eaf8a723e91ec55622efa4e1ef7a7ba14f11b7f37898 -size 597086 diff --git a/styles/ecosia/assets/frappe.webp b/styles/ecosia/assets/frappe.webp deleted file mode 100644 index 2c80efdd29..0000000000 --- a/styles/ecosia/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:25646494823b9c7653ff5208486453fa7f2682bc9702d9d5fbfd08b22284b294 -size 98048 diff --git a/styles/ecosia/assets/latte.webp b/styles/ecosia/assets/latte.webp deleted file mode 100644 index cf533a9a6c..0000000000 --- a/styles/ecosia/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:cb806404f77606325094e0ae2b84e30b1500047a39f04ceed61b8dce773fd227 -size 92110 diff --git a/styles/ecosia/assets/macchiato.webp b/styles/ecosia/assets/macchiato.webp deleted file mode 100644 index 11eaac75f4..0000000000 --- a/styles/ecosia/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e7bd887087e6259a06cfa44a5317c3f8232dc11f96c2a7034edd3005c7bda53d -size 102802 diff --git a/styles/ecosia/assets/mocha.webp b/styles/ecosia/assets/mocha.webp deleted file mode 100644 index 26afb83e87..0000000000 --- a/styles/ecosia/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:8f96f18b450a463ad642b800ba4ceb78b677554af44cbe973bdf4cabd1a9243d -size 106644 diff --git a/styles/ecosia/catppuccin.user.css b/styles/ecosia/catppuccin.user.css deleted file mode 100644 index 9a95c561cf..0000000000 --- a/styles/ecosia/catppuccin.user.css +++ /dev/null @@ -1,239 +0,0 @@ -/* ==UserStyle== -@name Ecosia Catppuccin -@namespace github.com/catppuccin/userstyles/styles/ecosia -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ecosia -@version 0.0.1 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ecosia/catppuccin.user.css -@description Soothing pastel theme for Ecosia -@author Catppuccin -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire*", "sky:Sky", "lavender:Lavender", "subtext0:Grey"] - -==/UserStyle== */ -@-moz-document domain("ecosia.org") { - :root { - #catppuccin(@lightFlavor, @accentColor); - } - - .dark { - #catppuccin(@darkFlavor, @accentColor); - } - - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-color: @catppuccin[@@lookup][@@accent]; - - /* general */ - --color-brand-primary: @accent-color !important; - --color-brand-secondary: @crust !important; - --color-error: @red !important; - --color-success: @green !important; - --color-disabled: @overlay1 !important; - --color-button-background-primary: @accent-color !important; - --color-button-background-primary-active: @accent-color !important; - --color-button-background-primary-hover: @accent-color; - --color-button-background-secondary: @surface0 !important; - --color-button-background-secondary-active: @surface2 !important; - --color-button-background-secondary-hover: @surface1 !important; - --color-button-content-primary: @base !important; - --color-button-content-secondary: @text !important; - --color-button-content-tertiary: @accent-color !important; - --color-button-border: @surface0 !important; - --color-button-background-transparent-hover: @surface1; - --color-button-background-transparent-active: @surface2; - --color-background-primary: @base !important; - --color-background-secondary: @crust !important; - --color-background-tertiary: @mantle !important; - --color-background-quaternary: @surface0; - --color-background-elevation-1: @mantle !important; - --color-highlighter: @surface0 !important; - --color-highlight-primary: @surface0 !important; - --color-overlay-primary: @overlay0 !important; - --color-overlay-secondary: @overlay1 !important; - --color-text-primary: @text !important; - --color-text-secondary: @subtext0 !important; - --color-text-tertiary: @text !important; - --color-link-primary: @sapphire !important; - --color-link-secondary: @sky !important; - --color-url: @sapphire !important; - --color-link-results-default: @sapphire !important; - --color-link-results-visited: @teal !important; - --color-decorative-icon: @accent-color !important; - --color-elevation-layer-1: @surface1; - --color-elevation-layer-2: @surface2; - --color-decorative-border-1: @surface1 !important; - --color-focused: @accent-color !important; - --color-form-border-default: @surface0 !important; - --color-form-border-hover: @surface1 !important; - --color-form-border-primary-active: @accent-color !important; - --color-tripadvisor-rating: @subtext0 !important; - --color-tree-counter-tree-tall: @yellow !important; - --color-green-leaf-icon-color-top: @green !important; - --color-green-leaf-icon-color-bottom: @green !important; - --color-fossil-fuel-icon-color-top: @flamingo !important; - --color-fossil-fuel-icon-color-bottom: @maroon !important; - - /* search page */ - --color-above-fold-background: @surface0 !important; - --color-above-fold-background-addon: @overlay1 !important; - --color-above-fold-text: @text !important; - --color-section-wrapper-background-gray: @surface1 !important; - --color-section-wrapper-background-dark-green: @surface0 !important; - --color-section-wrapper-background-light-green: @surface0 !important; - --color-section-header-title: @text !important; - --color-projects-title: @text !important; - --color-projects-description: @surface1; - --color-financial-report-total-background: @surface0 !important; - --color-financial-report-total-text: @text !important; - --color-forest-background-addon: @surface1 !important; - --color-forest-background-secondary: @surface0 !important; - --color-before-after-text: @text !important; - } -} diff --git a/styles/ecosia/catppuccin.user.less b/styles/ecosia/catppuccin.user.less new file mode 100644 index 0000000000..2ef6c32b66 --- /dev/null +++ b/styles/ecosia/catppuccin.user.less @@ -0,0 +1,104 @@ +/* ==UserStyle== +@name Ecosia Catppuccin +@namespace github.com/catppuccin/userstyles/styles/ecosia +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ecosia +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ecosia/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aecosia +@description Soothing pastel theme for Ecosia +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("ecosia.org") { + :root.light { + #catppuccin(@lightFlavor); + } + + :root.dark { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --color-brand-primary: @accent !important; + --color-brand-secondary: @crust !important; + --color-error: @red !important; + --color-success: @green !important; + --color-disabled: @overlay1 !important; + --color-button-background-primary: @accent !important; + --color-button-background-primary-active: @accent !important; + --color-button-background-primary-hover: @accent; + --color-button-background-secondary: @surface0 !important; + --color-button-background-secondary-active: @surface2 !important; + --color-button-background-secondary-hover: @surface1 !important; + --color-button-content-primary: @base !important; + --color-button-content-secondary: @text !important; + --color-button-content-tertiary: @accent !important; + --color-button-border: @surface0 !important; + --color-button-background-transparent-hover: @surface1; + --color-button-background-transparent-active: @surface2; + --color-background-primary: @base !important; + --color-background-secondary: @crust !important; + --color-background-tertiary: @mantle !important; + --color-background-quaternary: @surface0; + --color-background-elevation-1: @mantle !important; + --color-highlighter: @surface0 !important; + --color-highlight-primary: @surface0 !important; + --color-overlay-primary: @overlay0 !important; + --color-overlay-secondary: @overlay1 !important; + --color-text-primary: @text !important; + --color-text-secondary: @subtext0 !important; + --color-text-tertiary: @text !important; + --color-link-primary: @sapphire !important; + --color-link-secondary: @sky !important; + --color-url: @sapphire !important; + --color-link-results-default: @sapphire !important; + --color-link-results-visited: @teal !important; + --color-decorative-icon: @accent !important; + --color-elevation-layer-1: @surface1; + --color-elevation-layer-2: @surface2; + --color-decorative-border-1: @surface1 !important; + --color-focused: @accent !important; + --color-form-border-default: @surface0 !important; + --color-form-border-hover: @surface1 !important; + --color-form-border-primary-active: @accent !important; + --color-tripadvisor-rating: @subtext0 !important; + --color-tree-counter-tree-tall: @yellow !important; + --color-green-leaf-icon-color-top: @green !important; + --color-green-leaf-icon-color-bottom: @green !important; + --color-fossil-fuel-icon-color-top: @flamingo !important; + --color-fossil-fuel-icon-color-bottom: @maroon !important; + + /* search page */ + --color-above-fold-background: @surface0 !important; + --color-above-fold-background-addon: @overlay1 !important; + --color-above-fold-text: @text !important; + --color-section-wrapper-background-gray: @surface1 !important; + --color-section-wrapper-background-dark-green: @surface0 !important; + --color-section-wrapper-background-light-green: @surface0 !important; + --color-section-header-title: @text !important; + --color-projects-title: @text !important; + --color-projects-description: @surface1; + --color-financial-report-total-background: @surface0 !important; + --color-financial-report-total-text: @text !important; + --color-forest-background-addon: @surface1 !important; + --color-forest-background-secondary: @surface0 !important; + --color-before-after-text: @text !important; + + /* override color digit on homepage */ + .count__digit, + .counter__description { + color: @text !important; + } + } +} diff --git a/styles/elk/README.md b/styles/elk/README.md index 6e5324ce02..129b7433be 100644 --- a/styles/elk/README.md +++ b/styles/elk/README.md @@ -10,38 +10,17 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +## 💝 Current Maintainer +- [ryanccn](https://github.com/ryanccn) -## 💝 Current Maintainer(s) -- [Ryan Cao](https://github.com/ryanccn)   diff --git a/styles/elk/assets/catwalk.webp b/styles/elk/assets/catwalk.webp deleted file mode 100644 index a8d071be13..0000000000 --- a/styles/elk/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:29f5034c7ec90a82e13585e58cf24a8c7237566adac0841c01a560a228e8b438 -size 152892 diff --git a/styles/elk/assets/frappe.webp b/styles/elk/assets/frappe.webp deleted file mode 100644 index 97c66a1f69..0000000000 --- a/styles/elk/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:24934a190c165ed77e82fc3a67b10198da06ad1c74f884568d2c9a1ed1ddfe6d -size 145742 diff --git a/styles/elk/assets/latte.webp b/styles/elk/assets/latte.webp deleted file mode 100644 index 403d1a668d..0000000000 --- a/styles/elk/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9d2fcd9e22fe3433819fa03ebc2483a3de4b8a9451bd015a5d7a70a600c7d1b4 -size 138596 diff --git a/styles/elk/assets/macchiato.webp b/styles/elk/assets/macchiato.webp deleted file mode 100644 index ccbb72070b..0000000000 --- a/styles/elk/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:96d4656e4cf3a108ace581f92373192760f8d0502b4d8355538b7aaeb07ac57a -size 147440 diff --git a/styles/elk/assets/mocha.webp b/styles/elk/assets/mocha.webp deleted file mode 100644 index 3dff624a34..0000000000 --- a/styles/elk/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:451c07cd8b70a4829aa099a3460fbf58d40d876bacff2a35f24b9fd80677a60f -size 150116 diff --git a/styles/elk/catppuccin.user.css b/styles/elk/catppuccin.user.css deleted file mode 100644 index 8c669cb0d3..0000000000 --- a/styles/elk/catppuccin.user.css +++ /dev/null @@ -1,258 +0,0 @@ -/* ==UserStyle== -@name Elk Catppuccin -@namespace github.com/catppuccin/userstyles/styles/elk -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/elk -@version 0.2.0 -@description Soothing pastel theme for Elk -@author Catppuccin -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/elk/catppuccin.user.css -@license MIT - -@preprocessor less -@var select flavor "Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] -==/UserStyle== */ -@-moz-document domain("elk.zone") { - :root { - #catppuccin(@flavor, @accentColor); - } - - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-Color: @catppuccin[@@lookup][@@accent]; - - & { - --c-primary: @accent-Color !important; - --c-primary-active: lighten(@accent-Color, 10%) !important; - --c-primary-light: @surface0 !important; - --c-border: @surface0 !important; - --c-border-dark: @surface1 !important; - --c-bg-base: @base !important; - --rgb-bg-base: red(@mantle), green(@mantle), blue(@mantle) !important; - --c-bg-active: @surface0 !important; - --c-bg-code: @surface0 !important; - --c-bg-selection: @accent-Color !important; - --c-bg-fade: @surface0 !important; - --c-text-base: @text !important; - --c-text-code: @rosewater !important; - --c-text-secondary: @subtext0 !important; - --c-text-secondary-light: @subtext1 !important; - --c-bg-btn-disabled: @surface1 !important; - --c-text-btn-disabled: @text !important; - --c-text-btn: @text !important; - --c-success: @green !important; - --c-warning: @yellow !important; - --c-error: @red !important; - --c-danger: @red !important; - --c-danger-active: lighten(@red, 10%) !important; - --c-bg-dm: @surface0 !important; - } - - ::selection { - color: white; - } - - .btn-solid, - [btn-solid=""] { - color: var(--c-bg-base); - } - - ::-webkit-scrollbar-thumb { - background: alpha(@surface1, 0.7); - } - - ::-webkit-scrollbar-thumb:hover { - background: alpha(@surface1, 0.8); - } - - [text-red], - [text-red-600], - [hover^="text-red"]:hover { - color: rgbA(red(@red), green(@red), blue(@red), var(--un-text-opacity)); - } - - [text-blue], - [hover^="text-blue"]:hover { - color: rgbA( - red(@blue), - green(@blue), - blue(@blue), - var(--un-text-opacity) - ); - } - - [text-green], - [hover^="text-green"]:hover { - color: rgbA( - red(@green), - green(@green), - blue(@green), - var(--un-text-opacity) - ); - } - - [text-yellow], - [hover^="text-yellow"]:hover { - color: rgbA( - red(@yellow), - green(@yellow), - blue(@yellow), - var(--un-text-opacity) - ); - } - - [text-purple], - [hover^="text-purple"]:hover { - color: rgbA( - red(@lavender), - green(@lavender), - blue(@lavender), - var(--un-text-opacity) - ); - } - - [group-hover^="bg-purple/10"]:hover { - background-color: alpha(@lavender, 0.1); - } - } -} diff --git a/styles/elk/catppuccin.user.less b/styles/elk/catppuccin.user.less new file mode 100644 index 0000000000..5695b642a4 --- /dev/null +++ b/styles/elk/catppuccin.user.less @@ -0,0 +1,105 @@ +/* ==UserStyle== +@name Elk Catppuccin +@namespace github.com/catppuccin/userstyles/styles/elk +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/elk +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/elk/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aelk +@description Soothing pastel theme for Elk +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("elk.zone") { + :root.dark { + #catppuccin(@darkFlavor); + } + :root.light { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --c-primary: @accent !important; + --c-primary-active: lighten(@accent, 10%) !important; + --c-primary-light: @surface0 !important; + --c-border: @surface0 !important; + --c-border-dark: @surface1 !important; + --c-bg-base: @base !important; + --rgb-bg-base: #lib.rgbify(@mantle)[] !important; + --c-bg-active: @surface0 !important; + --c-bg-code: @surface0 !important; + --c-bg-selection: @accent !important; + --c-bg-fade: @surface0 !important; + --c-text-base: @text !important; + --c-text-code: @rosewater !important; + --c-text-secondary: @subtext0 !important; + --c-text-secondary-light: @subtext1 !important; + --c-bg-btn-disabled: @surface1 !important; + --c-text-btn-disabled: @text !important; + --c-text-btn: @text !important; + --c-success: @green !important; + --c-warning: @yellow !important; + --c-error: @red !important; + --c-danger: @red !important; + --c-danger-active: lighten(@red, 10%) !important; + --c-bg-dm: @surface0 !important; + + .btn-solid, + [btn-solid=""] { + color: var(--c-bg-base); + } + + ::-webkit-scrollbar-thumb { + background: fade(@surface1, 70%); + } + + ::-webkit-scrollbar-thumb:hover { + background: fade(@surface1, 80%); + } + + [text-red], + [text-red-600], + [hover^="text-red"]:hover { + color: rgba(#lib.rgbify(@red)[], var(--un-text-opacity)); + } + + [text-blue], + [hover^="text-blue"]:hover { + color: rgba(#lib.rgbify(@blue)[], var(--un-text-opacity)); + } + + [text-green], + [hover^="text-green"]:hover { + color: rgba(#lib.rgbify(@green)[], var(--un-text-opacity)); + } + + [text-yellow], + [hover^="text-yellow"]:hover { + color: rgba(#lib.rgbify(@yellow)[], var(--un-text-opacity)); + } + + [text-purple], + [hover^="text-purple"]:hover { + color: rgba(#lib.rgbify(@lavender)[], var(--un-text-opacity)); + } + + [group-hover^="bg-purple/10"]:hover { + background-color: fade(@lavender, 10%); + } + + .filter-saturate-0, + [filter-saturate-0=""] { + filter: none; + } + } +} diff --git a/styles/formative/README.md b/styles/formative/README.md new file mode 100644 index 0000000000..158744c56c --- /dev/null +++ b/styles/formative/README.md @@ -0,0 +1,37 @@ + + + +

+ Logo
+ + Catppuccin for Formative + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## ❤️‍🩹 Unmaintained +This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! + +## 💖 Past Maintainer +- [r58Playz](https://github.com/r58Playz) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/formative/catppuccin.user.less b/styles/formative/catppuccin.user.less new file mode 100644 index 0000000000..144af4113f --- /dev/null +++ b/styles/formative/catppuccin.user.less @@ -0,0 +1,1616 @@ +/* ==UserStyle== +@name Formative Catppuccin +@namespace github.com/catppuccin/userstyles/styles/formative +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/formative +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/formative/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aformative +@description Soothing pastel theme for Formative +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("app.formative.com"), domain("goformative.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + @contrast: if(@flavor = latte, @text, @base); + + input, + textarea { + border-color: @overlay0; + color: @text; + } + .input { + border-color: @overlay0; + } + + .MainAppSideMenu__LogoLink-sc-11gwnv8-2, + .MainAppHeader__LogoLink-sc-1gw0bt9-2, + .SplitColumnLayout__StyledLogo-sc-4mcl10-4 { + svg { + path:nth-child(1) { + fill: @yellow !important; + } + path:nth-child(2) { + fill: @green !important; + } + path:nth-child(3) { + fill: @blue !important; + } + path:nth-child(4) { + fill: @red !important; + } + path:nth-child(5) { + fill: @yellow !important; + } + path:nth-child(6) { + fill: @text !important; + } + } + } + + background: @base; + body { + color: @text; + } + + hr { + border-color: @overlay0 !important; + } + + .MainAppSideMenu__RootNav-sc-11gwnv8-0 { + background: @surface0; + .SideTabItem__RootButton-sc-vtkzgr-0 { + &.selected { + background: fade(@accent, 50%); + &::after { + background: @accent; + } + } + &:hover { + .avatar { + box-shadow: @accent 0 0 0 1px; + } + } + &:not(.selected):hover { + .side-tab-item-label-div, + .material-icons-outlined, + .svg-icons svg { + color: @accent; + } + } + } + .side-tab-item-label-div, + .material-icons-outlined, + .svg-icons { + color: @text; + } + } + .notifications-count { + background: @accent; + color: @contrast; + } + .NotificationCenterAlert__TriggerDiv-sc-165xmi4-0 { + background-color: @surface0; + .material-icons-outlined { + color: @text; + } + } + .avatar:hover { + box-shadow: @accent 0 0 0 1px; + } + .MainAppHeader__RootDiv-sc-1gw0bt9-0 { + background-color: @surface0; + } + + .SecondaryHeader__RootDiv-sc-1lpafq7-0 { + background: @surface0; + border-color: @overlay0; + .TabsItem__RootDiv-sc-tj1og8-0 > a { + color: @text; + } + .TabsItem__RootDiv-sc-tj1og8-0:hover > a { + color: @accent; + } + .TabsItem__SelectedLineDiv-sc-tj1og8-1 { + background: @accent !important; + } + .TabsItem__TabLink-sc-tj1og8-3:focus-visible { + background: transparent !important; + } + } + + main, + .FormativesShelf__HeaderDiv-sc-1pswvpk-3, + .FormativesShelf__StyledSecondaryHeader-sc-1pswvpk-4, + .TabsItem__TabDiv-sc-tj1og8-4:focus-visible { + background: @base; + } + .Home__TitleSpan-sc-q7a345-5, + .ClassesShelf__TitleSpan-sc-1ews12o-2, + .TabsItem__TabDiv-sc-tj1og8-4, + .OverflowEllipsis__RootDiv-sc-1mjk6uz-0, + .Label-sc-rzlz3u-0, + .Text-sc-1mon9hz-0, + .ProfileAccountInfo__BaseDiv-sc-1nbrrm9-0, + .Achievements__StyledHeading-sc-nmy2km-2, + .Achievements__StyledSubHeading-sc-nmy2km-3, + .BadgeCard__BadgeLabelDiv-sc-13976oo-8, + .BadgeCard__BadgeDescriptionDiv-sc-13976oo-9, + .EmptyExplainer__EmptyExplainerMainText-sc-1ixiesy-2, + .EmptyExplainer__EmptyExplainerSubtext-sc-1ixiesy-3, + .LabelledDropdownList__StyledLabel-sc-co7v7a-1, + .BadgeSidebar__BadgeLabelDiv-sc-oi03p1-3, + .BadgeSidebar__BadgeDescriptionDiv-sc-oi03p1-4, + .BadgeSidebar__ChallengeProgressStatusDiv-sc-oi03p1-8, + .BadgeSidebar__ChallengeProgressFractionDiv-sc-oi03p1-9, + .BadgeSidebar__LevelDescriptionDiv-sc-oi03p1-13, + .BadgeSidebar__AchievedOnDiv-sc-oi03p1-14, + .QuestionNotificationRow__NameP-sc-f7ccw5-7, + .QuestionNotificationRow__StyledTimeAgo-sc-f7ccw5-8, + .TextViewable__RootDiv-sc-ohojgu-0, + .ScorePill__ScoreDiv-sc-w63ftw-0, + .QuestionViewable__QuestionTextRichTextWrapperDiv-sc-13jvio2-1, + .QuestionViewable__QuestionNumberDiv-sc-13jvio2-3, + .FormativeStudentFooter__ProgressCountDiv-sc-6tj89c-1, + .FormativeStudentFooter__SubTextDiv-sc-6tj89c-5, + .FormativesShelf__ShowScoresText-sc-1pswvpk-6, + .ModalBody__RootDiv-sc-1lg094f-0, + .Elements__Title-sc-1qtb2ho-9, + .JoinQuickCode__QuickCodeTextParagraph-sc-1uhfett-1, + .CallToActionLink__ActionText-sc-yuiy65-1, + .Checkbox__CheckboxLabel-sc-1oy0ey9-4, + .ModalTitle__TitleH4-sc-18cspoj-1, + .FormativeItemViewable__HintDiv-sc-m0kwch-8, + .NoFormatives__HeadingDiv-sc-1v9g5eg-1, + .NoFormatives__BodyP-sc-1v9g5eg-2, + .DragAndDropViewableContainer__InstructionsDiv-sc-1ke293x-0, + .QuestionViewable__CorrectAnswerLabelDiv-sc-13jvio2-7, + .MatchingTableRow__ArrowIcon-sc-1u9h4tb-1, + .PracticeSet__StyledLastUpdated-sc-1wup6tb-9, + .MaterialIcon-sc-1g5xoi8-0, + .MinimalFormativeStudentHeader__FormativeTitleDiv-sc-14rcnaq-4, + .ErrorExplainer__SubTextHeading-sc-7nq4if-2, + .ErrorExplainer__MainTextHeading-sc-7nq4if-1, + .ErrorExplainer__TechnicalDetailsHeading-sc-7nq4if-3, + .ErrorExplainer__ErrorIdParagraph-sc-7nq4if-4, + .TeacherPacedStart__DetailsDiv-sc-1f4f5sd-4, + .Elements__SubText-sc-1qtb2ho-11, + .RichText__RootReadOnlyDiv-sc-fjolxt-1 *, + .ValidatedInputNew__InputPrefixSpan-sc-18vdili-3, + .LaunchRespondusBrowser__MainTextHeading-sc-1ymzzc2-5, + .LaunchRespondusBrowser__DetailsParagraph-sc-1ymzzc2-4, + .PracticeSession__PopoverContentDiv-sc-1t2vn9a-4, + .ExpandableAccordionHeader__HeaderRow-sc-cu02pz-1, + .VerticalButton__StyledSpan-sc-1h2we7r-1, + .ShelfTile__LabelDiv-sc-1oc4c00-3, + .PracticeSet__AddItemCardContents-sc-1wup6tb-10 { + color: @text; + } + .TabsItem__TabDiv-sc-tj1og8-4:hover, + .RespondusTroubleshootLink__TroubleshootingAnchor-sc-17na5u4-7, + .Summary__RawButtonLink-sc-1ofq6fd-2 { + color: @accent; + } + .FormativesShelf__StyledSecondaryHeader-sc-1pswvpk-4 { + border-color: @overlay0; + } + .TabsItem__SelectedLineDiv-sc-tj1og8-1 { + background: @accent !important; + } + .Pill__RootDiv-sc-4b6mpn-0, + .ItemInfoPill-sc-ecx83e-0, + .FormativeItemViewable__HintsRemainingCountDiv-sc-m0kwch-11, + .IconWarningButton__RootButton-sc-1b683n6-0, + .Ellipse__RootButton-sc-1teidw7-0 { + &.IconWarningButton__RootButton-sc-1b683n6-0:hover { + border-color: @red; + } + > svg[width="16"] { + path { + stroke: @red; + } + } + &, + .material-icons-outlined { + color: @text !important; + } + background: @surface2 !important; + border-color: @overlay0; + } + .Card__RootDiv-sc-hyrluv-0, + .Card__RootDiv-sc-4gt2nj-0 { + background: @surface0; + border-color: @overlay0; + &.selected { + border-color: @accent; + outline-color: @accent; + } + .material-icons-outlined { + color: @text; + } + &:hover { + .FormativeCard__TitleOverflowEllipsis-sc-tkxjaz-7, + .SectionCard__SectionTitleOverflowEllipsis-sc-ir1v2v-4 { + color: @accent; + } + } + } + .ClassAvatar__RootDiv-sc-i7tto7-0, + .avatar > div { + background: @accent; + color: @contrast; + } + .ReactSelect__control { + background: @surface0; + border-color: @overlay0; + .ReactSelect__placeholder { + color: @subtext0; + } + .ReactSelect__indicator, + .ReactSelect__single-value, + .ReactSelect__input-container { + color: @text; + } + &:focus-within { + border-color: @accent !important; + } + } + .react-select-icon { + color: @text; + } + .ReactSelect__menu { + background: @surface2 !important; + color: @text; + .SearchBarOption__RootLink-sc-191bb28-1:hover + .SearchBarOption__TitleOverflowEllipsis-sc-191bb28-0 { + color: @accent; + } + .ReactSelect__option--is-focused { + background: @overlay0; + } + .ReactSelect__option--is-selected { + background: @accent; + color: @contrast; + } + .ReactSelect__menu-notice { + color: @subtext0; + } + } + + .ClassesShelfContainer__StyledButton-sc-zx4vft-0 .material-icons-outlined { + color: @text; + } + + .Button__StyledButton-sc-aum9f1-1, + .IconButton__RootButton-sc-ebvofk-0, + .SectionDetail__BackLink-sc-1aifgaj-4 { + background: @surface0 !important; + &, + .material-icons-outlined { + color: @accent !important; + border-color: @overlay0; + } + &:hover, + &:enabled:focus { + background: @surface1; + border-color: @accent; + } + } + .Switch__RootButton-sc-1ss5zxi-0 { + background: @surface0; + &[aria-checked="true"] { + background: @accent; + } + .Switch__BallDiv-sc-1ss5zxi-1 { + background: @overlay0; + } + } + .ButtonSwitch__RootDiv-sc-1cluxwg-0 { + background: @surface1; + .ButtonSwitchOption__RootDiv-sc-ek1jm8-0 { + &.selected { + background: @surface2; + } + color: @text; + } + } + .FormativeCardScore__PercentageSpan-sc-p5mc30-1 { + &[style*="rgba(32, 213, 171, 0.2)"] { + background: fade(@green, 50%) !important; + } + &[style*="rgba(255, 222, 51, 0.2)"] { + background: fade(@yellow, 50%) !important; + } + &[style*="rgba(0, 165, 251, 0.2)"] { + background: fade(@blue, 50%) !important; + } + &[style*="rgba(255, 76, 77, 0.2)"] { + background: fade(@red, 50%) !important; + } + } + + .Dropdown__PopoverContent-sc-1s7u5eb-2, + .Popover__PopoverContent-sc-1x169li-4 { + background: @surface2; + .DropdownRow__RowButton-sc-1bu6csb-0 { + background: @surface2; + border-color: @overlay2; + &, + .dropdown-list-icon, + .material-icons-outlined { + color: @text !important; + svg path { + fill: @text !important; + } + } + &:hover { + background: @overlay0 !important; + color: @text !important; + } + } + .Dropdown__PopoverArrow-sc-1s7u5eb-1, + .Popover__PopoverArrow-sc-1x169li-3 { + fill: @surface2; + } + .StrokePicker__InnerDiv-sc-8widgm-4 { + background: @surface2; + } + } + .DropdownList__TriggerButton-sc-1hvvmg1-0, + .EmptyExplainer__StyledMaterialIcon-sc-1ixiesy-4 { + color: @accent; + } + + .ProfileAccountInfo__DashedGroup-sc-1nbrrm9-2 { + border-color: @overlay0; + } + + .BadgeCard__RootButton-sc-13976oo-0 { + &:hover, + &:focus, + &.selected { + .BadgeCard__BadgeLabelDiv-sc-13976oo-8 { + color: @accent; + } + .Card__RootDiv-sc-4gt2nj-0 { + border-color: @accent; + } + } + .BadgeCard__ProgressPercentSpan-sc-13976oo-7 { + color: @text; + } + } + .BadgeSidebar__RootDiv-sc-oi03p1-0 { + background: @surface0; + .SvgIconWrapper__SvgIconDiv-sc-1u203y2-0 { + svg path { + fill: @text; + } + &:hover { + background: @surface1; + } + } + .BadgeSidebar__ChallengeLevelsDiv-sc-oi03p1-10 { + border-color: @overlay0; + } + } + .BadgeCard__BadgeImage-sc-13976oo-5, + .BadgeSidebar__BadgeImage-sc-oi03p1-2 { + &[src*="responses"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + &[src*="formatives-assigned-submitted"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + .ProgressBar__ProgressDiv-sc-4qm1te-0 { + background: @overlay0; + .ProgressBar__ProgressBarDiv-sc-4qm1te-2 { + background: @accent; + } + } + .notification { + &.notification-success { + background: @green !important; + color: @contrast !important; + } + } + .Tooltip__Content-sc-1k6bq57-0 { + background: @surface0; + color: @text; + .Tooltip__KeyboardShortcutContainerDiv-sc-1k6bq57-1 { + background: @surface1; + color: @text; + } + } + .Modal__Overlay-sc-1uf7odj-0 { + background: fade(@crust, 80%); + } + .Modal__Content-sc-1uf7odj-1 { + background: @base; + .modal-header, + .modal-footer { + border-color: @overlay0 !important; + } + .ModalHeader__Title-sc-1aoz840-1 { + color: @text; + } + .modal-footer { + background: @base; + } + .ModalHeader__CloseButton-sc-1aoz840-2 { + border-color: @overlay0; + background: @surface0; + &:enabled:hover { + background: @surface1 !important; + border-color: @accent; + } + } + .CopyablePracticeSetInfo__LinkText-sc-14zdsnw-3, + .CopyablePracticeSetInfo__ExplainerDiv-sc-14zdsnw-5 { + background: @surface0; + } + .ThemePreview__PrimaryColorDiv-sc-zh51j9-0[style*="outline"] { + &[style*="outline: rgb(255, 255, 255)"] { + outline-color: @text !important; + } + &[style*="outline: rgb(13, 100, 242)"] { + outline-color: @accent !important; + } + } + } + .ReactModal__Overlay { + background: fade(@crust, 80%); + .ReactModal__ActualContent { + background: @base !important; + .ModalBody-sc-1lg094f-0 > * { + color: @text !important; + &.ErrorExplainer__BodyDiv-sc-7nq4if-0 { + .material-icons-outlined { + color: @red; + } + .ErrorExplainer__TechnicalDetailsHeading-sc-7nq4if-3, + .ErrorExplainer__ErrorIdParagraph-sc-7nq4if-4 { + color: @subtext0; + } + } + &.Input__StyledInput-sc-1632reg-0 { + background: @surface0 !important; + &::placeholder { + color: @overlay2 !important; + } + &:focus { + border-color: @accent; + } + } + &.CookiePolicyModal__AccordionDiv-sc-dpnzx7-0 + .AccordionItem__ContainerDiv-sc-1aj05j4-0 { + &, + .AccordionItem__HeaderDiv-sc-1aj05j4-1, + .AccordionItem__BodyDiv-sc-1aj05j4-5 { + background: @surface0; + border-color: @overlay0; + } + .material-icons-outlined { + color: @text; + } + .CookiePolicyModal__BlueAlertText-sc-dpnzx7-5 { + color: @accent; + } + } + } + .ModalBody-sc-1lg094f-0:has(.Submit__ContentTitleH3-sc-1vceatk-1) + svg + path { + fill: @accent; + } + .ModalTitle { + background: @base; + } + .PracticeDispatchModalOptionLink__RootLink-sc-1wp7oro-0 { + background: @surface1 !important; + img { + &[src*="flashcard-preview"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + &[src*="match-preview"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + &[src*="quiz-preview"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + } + } + } + .NotificationCenterAlertListContainer__RootDiv-sc-1kyy25p-0 { + background: @surface2; + .FormativeNotificationsCard__HeaderDiv-sc-fv5hu9-1, + .QuestionNotificationRow__IndentedBorderDiv-sc-f7ccw5-1, + .QuestionNotificationRow__RootDiv-sc-f7ccw5-0 { + border-color: @overlay2; + } + .FormativeNotificationsCard__RootDiv-sc-fv5hu9-0 { + background: @surface2; + border-color: @overlay2; + &:hover { + background: @overlay0; + } + } + .QuestionNotificationRow__RootDiv-sc-f7ccw5-0:hover { + background: transparent; + } + .material-icons-outlined { + color: @text; + &:hover { + color: @accent; + } + } + } + .SectionCard__InactiveSectionIcon-sc-ir1v2v-3 { + svg { + path:nth-child(1) { + fill: @overlay0 !important; + } + path:nth-child(2), + path:nth-child(3) { + fill: @text !important; + } + } + } + .SectionDetail__Header-sc-1aifgaj-2 { + background: transparent; + } + + .FormativeStudentHeader__UpperDiv-sc-yw00ql-12 { + background: @crust !important; + color: @text; + &, + .FormativeStudentHeader__InfoItem-sc-yw00ql-7 { + border-color: @overlay0; + } + } + .FormativeStudentHeader__NavStrip-sc-yw00ql-11 { + .FormativeStudentHeader__ScrollableDiv-sc-yw00ql-9 { + &::-webkit-scrollbar-track { + background: @surface0 !important; + border-color: @surface0 !important; + } + &::-webkit-scrollbar-thumb { + background: @overlay0 !important; + border-color: @overlay0 !important; + } + } + background: @mantle; + border-color: @overlay0; + .selectedSection { + border-color: @accent; + } + .formative-nav-item { + &, + .formative-nav-item-icon { + color: @text; + } + .FormativeStudentNavItem__StyledMessageIcon-sc-i1u5ts-4 { + color: @accent; + } + &:hover, + &:focus { + background: @surface1; + color: @accent; + border-color: @accent; + } + .fxpwVv { + background-color: @green; + } + .hSVaRB { + background-color: @text; + } + .kBznqt { + background-color: @yellow; + } + .hfnlVy { + background-color: @red; + } + .bDcnFV { + background-color: @peach; + } + svg { + path { + stroke: @red; + } + } + } + } + .checkbox-root { + button { + background: @surface0; + border-color: @accent !important; + box-shadow: none !important; + } + &.checked button { + background: @accent !important; + } + .Checkbox__RadioCircleDiv-sc-1oy0ey9-3 { + background: @contrast !important; + } + .Checkbox__IndicatorIcon-sc-1oy0ey9-5 { + color: @contrast; + } + } + .FormativeUnavailableMessage__InnerDiv-sc-14kxg7t-1 { + border-color: @accent; + background-color: @surface0; + } + .FormativeItemViewable__RootDiv-sc-m0kwch-0, + .SectionDescription__SectionInformationCard-sc-nmaua7-0 { + background: @mantle; + .correct { + outline-color: @green !important; + background: color-mix(in srgb, @base, @green 25%) !important; + } + .incorrect { + outline-color: @red !important; + background: color-mix(in srgb, @base, @red 25%) !important; + } + &, + .withFunctionalizedViewable__LeftColumn-sc-1636o2h-2, + .withFunctionalizedViewable__RightColumn-sc-1636o2h-4 { + border-color: @overlay0; + } + .SectionDescription__DividerDiv-sc-nmaua7-1 { + border-color: @overlay0; + } + .ScoreCircle__RootDiv-sc-lj5glq-0 { + &[style*="rgb(32, 213, 171)"] { + background-color: @green !important; + .material-icons-outlined { + color: @contrast !important; + } + } + &[style*="rgb(255, 222, 51)"] { + background-color: @yellow !important; + } + &[style*="rgb(255, 138, 51)"] { + background-color: @peach !important; + } + &[style*="rgb(255, 76, 77)"] { + background-color: @red !important; + .material-icons-outlined { + color: @contrast !important; + } + } + border-color: @overlay2 !important; + } + .BlankOutput__FillableEntity-sc-15mzaww-3, + .BlankOutput__FillableNumericDiv-sc-15mzaww-2 { + outline-color: @accent; + color: @text; + background: @surface0; + .KatexOutput__RootDiv-sc-gu2jna-0 { + [style*="color: rgb(204, 0, 0)"] { + color: @red !important; + } + } + } + .match-table-grid-container table { + th, + tr, + td { + background: @surface0 !important; + border-color: @overlay0; + .checkbox-root button { + background: @surface1; + } + } + } + .TargetElementViewable__BoxDiv-sc-1cp2mml-1 { + background: @surface0; + border-color: @accent; + .TargetChoiceViewable__ContentDiv-sc-6nylj9-1 { + background: @surface1; + border-color: @overlay0; + } + .TargetElementViewable__AddSelectedChoiceButton-sc-1cp2mml-6 i { + background: @accent; + color: @contrast; + } + } + .MatchingTable__Table-sc-1rhxmvo-1 { + &, + td, + tr { + border-color: @overlay0; + } + tr.isOver { + outline-color: @accent; + } + } + .ChoiceElementViewable__RootDiv-sc-viwu2x-0 { + background: @surface0; + border-color: @overlay0; + &:hover, + &.highlight { + border-color: @accent; + background: @surface1; + } + .ChoiceElementViewable__LabelRichText-sc-viwu2x-4 { + background: transparent; + color: @text; + } + .Button__StyledButton-sc-aum9f1-1, + i { + background: transparent !important; + } + } + .ChoiceElement__RootDiv-sc-1mbtxfk-1 { + background: transparent; + } + .ChoiceElement__StyledRawButton-sc-1mbtxfk-0 { + .ChoiceElement__LabelRichText-sc-1mbtxfk-3, + .material-icons-outlined { + background: transparent; + } + } + .ChoiceOptionViewable__RightSideDiv-sc-a2vwy6-2 { + border-color: @overlay0; + .ChoiceOptionViewable__StrickenOverlayDiv-sc-a2vwy6-7 { + background-image: repeating-linear-gradient( + 315deg, + transparent, + transparent 16px, + @text 16px, + @text 18px + ); + } + } + .InlineChoiceOutput__InlineChoiceOutputDiv-sc-1694w84-2 { + background: @surface0; + border-color: @accent; + } + .DrawingCardButton__RootButton-sc-u2qprg-1 { + border-color: @overlay0; + .DrawingCardButton__DrawingPreview-sc-u2qprg-3 { + background: rgb(245, 246, 248); + } + .DrawingCardButton__HoverDarkScrim-sc-u2qprg-2 { + background: fade(@crust, 75%); + border-radius: 0; + } + .DrawingCardButton__ShowYourWorkPseudoButtonDiv-sc-u2qprg-0 { + border-color: @overlay0; + color: @text; + background: @base; + } + .DrawingCardButton__IncompleteIndicatorDiv-sc-u2qprg-4 { + background: @yellow; + svg path { + fill: @contrast; + } + } + &:hover .DrawingCardButton__ShowYourWorkPseudoButtonDiv-sc-u2qprg-0 { + background: @surface2; + border-color: @accent; + } + } + .DragAndDropImageDropLocation__DropLocationContainerDiv-sc-oq3fcx-1 { + &:hover { + .DragAndDropImageDropLocationPoint-sc-1v0z50f-0 { + background: @surface1; + border-color: @surface1; + } + .dropzone-tip::before { + background: @surface1; + } + } + .DragAndDropImageDropLocationPoint-sc-1v0z50f-0 { + background: @surface0; + border-color: @surface0; + } + .dropzone-tip::before { + background: @surface0; + } + .isOver .dropzone { + background: @surface1; + .dropzone-number { + background: @surface2 !important; + } + } + .dropzone { + &:hover, + &.selected { + background: @surface1; + .dropzone-number { + background: @surface2 !important; + } + } + border-color: @accent !important; + background: @surface0; + .dropzone-number { + background: @surface1; + } + } + } + .DragAndDropChoice__RootDiv-sc-1wzeg1h-3 { + background: @surface0; + border-color: @overlay0; + .Button__StyledButton-sc-aum9f1-1, + .DragAndDropChoice__DragIcon-sc-1wzeg1h-1 { + background: transparent; + } + &.selected { + background: @surface1; + } + } + .DragAndDropDropzoneOutput__RootDiv-sc-1is7exh-0 { + background: @surface0; + border-color: @accent; + &.hasAnswer { + border-color: @overlay0; + } + } + .AnswerCorrectnessIndicator__CircleDiv-sc-18hnk99-1 { + &.correct { + background: @green; + } + .material-icons-outlined { + color: @contrast; + } + } + .ShortAnswerViewableDetails__InputAutosizeTextarea-sc-1ugk4gk-0 { + background: @surface0; + border-color: @overlay0; + color: @text; + } + .ExpandableAccordionHeader__RootButton-sc-cu02pz-0 { + background: transparent; + } + .GraphViewableDetails__GraphAndControlsDiv-sc-13yx2r4-2 { + .VerticalButton__StyledButton-sc-1h2we7r-2 { + &:disabled { + i, + span { + color: @subtext0; + } + } + &:not(:disabled):hover, + &:not(:disabled):focus-within { + div { + background: @surface0; + } + span { + color: @accent; + } + } + } + .Graph__ContainerDiv-sc-1y56z00-0 { + border-color: @overlay0; + background: @surface0; + svg { + line[stroke="rgb(4,28,68)"], + marker[stroke="rgb(4,28,68)"] { + fill: @subtext1; + stroke: @subtext1; + } + path[stroke="rgb(80,95,121)"] { + fill: @subtext0; + stroke: @subtext0; + } + path[stroke="rgb(192,197,207)"] { + fill: @overlay0; + stroke: @overlay0; + } + path[stroke="rgb(13,100,242)"] { + stroke: @blue; + fill: @blue; + } + text { + stroke: @surface0 !important; + fill: @text; + } + ellipse[fill="rgb(13,100,242)"] { + stroke: @surface0; + fill: @blue; + } + } + .Coords__CoordsDiv-sc-1fj077e-1 { + background: @surface2; + } + } + } + } + .MediaSlider__RootSpan-sc-1gz67jn-0 { + .TrimmerMarker__TooltipDiv-sc-1f17hi4-1 { + background: @surface2; + color: @text; + } + .Thumb__RootSpan-sc-yv6w5k-0 { + background: @accent; + z-index: 2; + } + .Segment__SegmentSpan-sc-r0cy9o-0 { + background: @surface0 !important; + } + .TrimmerMarker__RootSpan-sc-1f17hi4-0 { + background: @overlay0; + z-index: 1; + } + } + .slider { + background: @surface1; + .thumb { + background: @overlay0; + color: @text; + } + } + .ExpandedDrawing__BodyDiv-sc-cz2rcw-0 { + .DrawingToolbar__RootDiv-sc-2xuxy3-0 { + &, + .DrawingToolbar__ToolDiv-sc-2xuxy3-3 { + background: @surface0; + color: @text; + } + .DrawingToolbar__ToolDiv-sc-2xuxy3-3:hover { + &, + .svg-icons, + .material-icons-outlined { + color: @accent; + } + } + .selected { + &::after { + background: @accent; + } + color: @accent; + } + } + .DrawingSidebar__ExpandedAnswerDiv-sc-1hvcy70-0 { + background: @mantle; + } + .DrawingSidebar__SidebarTopExplainer-sc-1hvcy70-1 { + background: @base; + border-color: @overlay0; + color: @text; + .DrawingSidebar__StyledSvgIcon-sc-1hvcy70-5 { + color: @text; + } + } + .SidePicker__RootDiv-sc-xie0qr-0 { + background: @base; + border-color: @overlay0; + } + } + .MathLiveInput__RootDiv-sc-tki2b-0 { + .keyboard-button-wrapper .svg-icons svg path { + fill: @accent !important; + } + color: @text; + border-color: @overlay0; + background: @surface0; + &:focus-within, + &:hover { + border-color: @accent; + } + &.invalid { + color: @red; + } + math-field { + --caret-color: @accent; + --selection-background-color: fade(@accent, 50%); + --selection-color: @text; + --correct-color: @text; + --incorrect-color: @red; + --latex-color: @blue; + --placeholder-color: @blue; + } + .ML__keyboard--plate { + --keyboard-text: @text; + --keyboard-text-active: @accent; + --keyboard-background: @surface0; + --keycap-background: @surface1; + --keycap-background-active: @surface2; + --keycap-background-border: @overlay0; + --keycap-background-border-bottom: @overlay0; + --keycap-text: @text; + --keycap-secondary-text: @subtext0; + --keycap-text-active: @accent; + --keycap-modifier-background: @surface2; + --keycap-modifier-background-active: @overlay0; + --keycap-modifier-border: @overlay1; + --keycap-modifier-border-bottom: @overlay1; + + [data-tooltip]::after { + background-color: @surface2; + color: @text; + } + border-color: @overlay0 !important; + } + } + .ML__keyboard.alternate-keys { + --keyboard-alternate-background: @surface2; + --keyboard-alternate-background-active: @overlay0; + --keyboard-alternate-text: @text; + --keyboard-alternate-text-active: @text; + } + + #mathlive-popover-panel { + background: @surface2; + color: @text; + box-shadow: 0 14px 28px fade(@crust, 25%) 0 10px 10px fade(@crust, 22%); + li:hover { + background: @overlay0; + } + &::after { + border-color: @surface2 transparent; + } + } + + .FullPointsAnimation__AbsoluteContainerDiv-sc-mzm76r-0, + .ScoreCircle__LottieWrapperDiv-sc-lj5glq-1, + .Summary__SummaryDiv-sc-1ofq6fd-0, + .MatchingSessionSummary__CheckmarkContainerDiv-sc-d3unim-2 { + svg { + path[fill="rgb(32,213,171)"], + path[fill="rgb(33,214,170)"] { + fill: @green !important; + } + path[fill="rgb(255,138,51)"] { + fill: @peach !important; + } + path[fill="rgb(255,222,51)"] { + fill: @yellow !important; + } + path[fill="rgb(255,76,77)"], + path[fill="rgb(255,76,76)"] { + fill: @red !important; + } + path[fill="rgb(201,68,204)"] { + fill: @mauve !important; + } + path[fill="rgb(0,165,249)"] { + fill: @blue !important; + } + path[fill="rgb(255,255,255)"], + path[fill="rgb(242,242,242)"] { + fill: @contrast !important; + } + + path[stroke="rgb(32,213,171)"], + path[stroke="rgb(33,214,170)"] { + stroke: @green !important; + } + path[stroke="rgb(255,138,51)"] { + stroke: @peach !important; + } + path[stroke="rgb(255,222,51)"] { + stroke: @yellow !important; + } + path[stroke="rgb(255,76,77)"], + path[stroke="rgb(255,76,76)"] { + stroke: @red !important; + } + path[stroke="rgb(201,68,204)"] { + stroke: @mauve !important; + } + path[stroke="rgb(0,165,249)"] { + stroke: @blue !important; + } + path[stroke="rgb(255,255,255)"], + path[stroke="rgb(242,242,242)"] { + stroke: @contrast !important; + } + } + } + + .Elements__JoinLayoutDiv-sc-1qtb2ho-0 { + background: @base; + .SplitColumnLayout__Card-sc-4mcl10-0 { + background: @surface0; + .Login__ContentDiv-sc-5w2jun-0, + .Login__LoginServiceButtonsRowDiv-sc-5w2jun-3 { + .Button__StyledButton-sc-aum9f1-1 { + background: @surface1 !important; + &:hover { + background: @surface2 !important; + } + } + .material-icons-outlined { + color: @text; + } + .NewselaServiceLoginButton__QuestionTextDiv-sc-mk13mj-1 { + color: @text; + } + .NewselaServiceLoginButton__ActionDiv-sc-mk13mj-2 { + color: @accent; + } + } + } + .JoinQuickCode__StyledLink-sc-1uhfett-2, + .CallToActionLink__StyledLink-sc-yuiy65-0, + .Login__ForgotLink-sc-5w2jun-1 { + color: @accent; + } + .react-code-input { + input { + background: @surface1; + border-color: @overlay0; + &:focus-within { + border-color: @accent; + } + } + &:not(:focus-within).empty [data-id="0"] { + border-color: @accent; + } + } + .JoinQuickCode__StyledPrimaryButton-sc-1uhfett-5 { + background: @surface1; + &:hover { + background: @surface2; + } + } + .ValidatedInputNew__StyledInput-sc-18vdili-4 { + background: @surface1; + border-color: @overlay0 !important; + color: @text; + } + } + .FormativeStudentFooter__BottomDiv-sc-6tj89c-3 { + border-color: @overlay0; + } + .StudentFormativeStatus__RootDiv-sc-y86tx8-1 { + &.bQdPlK { + background: @green; + } + &, + .material-icons-outlined { + color: @contrast; + } + } + .FloatingToolButton__FloatingButton-sc-1gy4xsl-0 { + background: @overlay0; + &:hover, + &:enabled:hover, + &:focus, + &:enabled:focus { + background: @overlay1; + } + .material-icons-outlined { + color: @accent; + } + } + .PracticeSet__StyledHeader-sc-1wup6tb-6 { + background: @surface0; + border-color: @overlay0; + input.ReactiveTextInput__StyledInput-sc-go3drs-2 { + color: @text !important; + &::placeholder, + &:focus::placeholder { + color: @subtext0 !important; + } + } + .HeaderBackLink__TertiaryButtonLink-sc-1vx1tro-0, + .Button__StyledButton-sc-aum9f1-1 { + background: @surface1 !important; + color: @accent !important; + &:not([disabled]):hover { + background: @surface2; + } + } + .PracticeSet__DividerDiv-sc-1wup6tb-4 { + background: @overlay0; + } + } + .PracticeSet__ContentDiv-sc-1wup6tb-1 { + .AutoSizeInput__StyledInput-sc-ops4en-2 { + color: @text; + background: transparent !important; + + &:focus { + border-color: @subtext0; + } + } + .FlashcardSide__RootDiv-sc-amoro3-1 { + background: @surface0; + color: @text; + } + .PracticeItemEditor__HeaderDiv-sc-1jko4q4-0 { + background: @surface1; + } + .PracticeItemEditor__ContentDiv-sc-1jko4q4-2 { + background: @surface0; + .TextareaCard__RootDiv-sc-qx9s19-0 { + background: @surface1; + border-color: @overlay0; + textarea { + color: @text; + } + } + .MediaButton__StyledButton-sc-12h2vjb-0 { + background: @surface1; + border-color: @overlay0; + color: @text; + &:hover { + background: @surface2; + color: @accent; + } + } + } + } + .Banner__Root-sc-yf4o5r-0 { + &.error { + .material-icons-outlined { + color: @red; + } + border-color: @red; + } + background: @surface2; + color: @text; + } + .FileUploadButton__DropZoneDiv-sc-88u8tg-2 { + background: @surface0; + border-color: @accent; + .material-icons-outlined { + color: @accent; + } + } + .DividerWord__LineDiv-sc-59xl7-1 { + background: @overlay0; + } + .DividerWord__WordDiv-sc-59xl7-2 { + color: @text; + } + .MinimalFormativeStudentHeader__RootDiv-sc-14rcnaq-0 { + border-color: @overlay0; + } + .FormativeItemViewable__FeedbackMessagesListDiv-sc-m0kwch-1 { + .FeedbackMessagesList__MessagesListDiv-sc-9o5dsw-0 { + background: @surface1; + .FeedbackMessagesList__EmptyDiv-sc-9o5dsw-1 svg { + path:nth-child(1) { + fill: @yellow; + } + path:nth-child(2) { + fill: @green; + } + path:nth-child(3) { + fill: @mauve; + } + path:nth-child(4) { + stroke: @peach; + } + path:nth-child(5) { + stroke: @peach; + } + } + } + .FeedbackMessage__FeedbackBoxDiv-sc-q3ku9d-2 { + background: @surface2; + border-color: @overlay2; + } + .FeedbackMessageComposer__RootDiv-sc-vs8711-0 { + border-color: @overlay0; + .FeedbackMessageComposer__RichTextContainerDiv-sc-vs8711-3 { + border-color: @overlay1; + color: @text; + .public-DraftEditorPlaceholder-inner { + color: @subtext0; + } + } + } + } + .Toolbar__RootDiv-sc-1e3lohg-0 { + border-color: @overlay0; + box-shadow: @overlay0 0 1px 3px 0; + &::before, + &::after { + border-color: @surface2 transparent transparent; + } + &, + .buttonWrapper button { + background: @surface2; + } + .buttonWrapper button { + &:hover { + background: @overlay0; + } + &.active { + color: @accent; + svg { + fill: @accent; + } + } + svg { + fill: @text; + } + color: @text; + } + } + .TeacherPacedStart__RootDiv-sc-1f4f5sd-0 { + background: @surface0 !important; + } + .FeedbackMessageIcon__UnreadJewelDiv-sc-1x1yblc-1 { + background: @red; + box-shadow: @text 0 0 0 2px; + } + .CookiePolicyBanner__ContainerDiv-sc-1p3fxjn-1 { + background: @surface0; + border-color: @accent; + .Button__StyledButton-sc-aum9f1-1 { + background: @surface1; + &:hover { + background: @surface2; + } + } + } + .GameContainer__RootDiv-sc-1c3jzzv-0 { + background: @base !important; + .Timer__RootDiv-sc-bbbpy2-0 { + background: @surface1; + &, + i { + color: @text; + } + } + .Header__HeaderDiv-sc-327vcg-0 { + background: @surface0; + border-color: @overlay0; + .HeaderBackLink__TertiaryButtonLink-sc-1vx1tro-0, + .Button__StyledButton-sc-aum9f1-1 { + background: @surface1; + color: @accent; + &:hover { + background: @surface2; + } + } + } + .ThemePicker__ToggleItem-sc-juof75-3 { + div { + outline-color: @text !important; + } + &[aria-checked="true"], + &[aria-checked="true"] div { + outline-color: @accent !important; + } + } + .TitleCard__StartButton-sc-xz0ejb-1 { + background: @accent; + color: @base; + } + .QuizSession__BodyDiv-sc-4aco0-0 { + .QuizSession__DividerDiv-sc-4aco0-4 { + background: @overlay0; + } + .AnswerChoiceCard__CardButton-sc-lns4c-0 { + &::before { + box-shadow: @overlay0 0 0 0 1px; + } + &.correct::before { + animation: 1.2s ease 0s 1 normal forwards running + catppuccin-formative-practiceset-quiz-correct; + } + &.incorrect::before { + animation: 1.2s ease 0s 1 normal forwards running + catppuccin-formative-practiceset-quiz-incorrect; + } + .AnswerChoiceCard__CorrectnessPill-sc-lns4c-2 { + &.correct { + background: @green; + i, + span { + color: @contrast; + } + } + background: @red; + i, + span { + color: @contrast; + } + } + .AnswerChoiceCard__CorrectnessOverlay-sc-lns4c-3 { + &.correct { + background: @green; + } + i { + color: @contrast !important; + } + background: @red; + } + } + } + .MatchingSessionSummary__RootDiv-sc-d3unim-0, + .MatchingSessionSummary__CheckmarkOverlayDiv-sc-d3unim-1 { + background: @base; + .Glow__RootDiv-sc-1c8wp5s-0 { + background: @accent !important; + color: @contrast; + } + .MatchingSessionSummary__SessionDiv-sc-d3unim-13 { + border-color: @overlay0; + &.highlight { + background: fade(@yellow, 25%); + } + } + } + .LatestPerformances__PerformanceDiv-sc-g3qin-2, + .Leaderboard__PerformanceDiv-sc-152arb5-3 { + border-color: @overlay0; + } + .MatchingSession__ContentDiv-sc-edrizy-0 { + .ProgressBar__RootDiv-sc-ly2f4w-0 { + .Glow__FlashDiv-sc-1c8wp5s-1 { + background: transparent; + } + .ProgressBar__PointsContainerSpan-sc-ly2f4w-3 + .Glow__RootDiv-sc-1c8wp5s-0 { + background: @surface0 !important; + color: @text; + } + .ProgressBar__BarDiv-sc-ly2f4w-1 { + background: @surface0; + border-color: @overlay0; + .Glow__RootDiv-sc-1c8wp5s-0 { + background: @accent !important; + } + } + } + } + .PracticeSessionCard__CardButton-sc-wwcpxc-0 { + border-color: @overlay0; + } + .FlashcardSide__RootDiv-sc-amoro3-1 { + background: @surface0; + border-color: @overlay0; + color: @text; + } + .StreakProgressBar__Progress-sc-1b8tyg3-2 { + background: @surface0; + .StreakProgressBar__ProgressBarDiv-sc-1b8tyg3-3 { + background: @accent; + } + } + .StreakProgressBar__StyledSvgIcon-sc-1b8tyg3-4 { + svg path { + fill: @yellow; + stroke: @contrast; + } + &.visible { + animation: 0.5s ease 0s 1 normal none running + catppuccin-formative-practiceset-quiz-streak; + } + } + .PracticeSession__AnswerButton-sc-1t2vn9a-3 { + color: @contrast; + &.red { + background: @red; + } + &.green { + background: @green; + } + } + } + .PillToggleGroup__Item-sc-12fkyq8-1 { + &[aria-checked="true"] { + background: @surface0; + color: @accent; + } + &:hover { + background: @surface0; + } + border-color: @overlay0; + color: @text; + } + .FeedbackButton__StyledButton-sc-1b7u8ss-0 { + background: @surface2; + i { + color: @text; + } + } + @keyframes catppuccin-formative-practiceset-quiz-correct { + 0% { + box-shadow: @overlay0 0 0 0 1px; + } + 70% { + box-shadow: @overlay0 0 0 0 1px; + } + 100% { + box-shadow: @green 0 0 0 3px; + } + } + @keyframes catppuccin-formative-practiceset-quiz-incorrect { + 0% { + box-shadow: @overlay0 0 0 0 1px; + } + 70% { + box-shadow: @overlay0 0 0 0 1px; + } + 100% { + box-shadow: @red 0 0 0 3px; + } + } + @keyframes catppuccin-formative-practiceset-quiz-streak { + 0% { + filter: drop-shadow(fade(@yellow, 80%) 0 0 0); + transform: scale(0.8); + } + 50% { + filter: drop-shadow(fade(@yellow, 80%) 0 0 12px); + transform: scale(1.3); + } + 100% { + filter: drop-shadow(fade(@yellow, 80%) 0 0 0); + transform: scale(1); + } + } + .Shelf__RootDiv-sc-5aism7-0 { + background: @surface0; + .ShelfTile__RootButton-sc-1oc4c00-0 { + background: @surface1; + &:hover { + background: @surface2; + box-shadow: @accent 0 0 0 1px; + .label { + color: @accent; + } + } + .ShelfTile__IconDiv-sc-1oc4c00-1 { + background: @accent !important; + i { + color: @contrast; + } + } + } + } + img.spinner { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + .NoFormatives__StyledImg-sc-1v9g5eg-4 { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + .PracticeSetGrid__EmptyStateDiv-sc-1yuxflk-1 img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } +} diff --git a/styles/freedesktop/README.md b/styles/freedesktop/README.md new file mode 100644 index 0000000000..a0f01ebcc3 --- /dev/null +++ b/styles/freedesktop/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for freedesktop.org + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [NK308](https://github.com/NK308) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/freedesktop/catppuccin.user.less b/styles/freedesktop/catppuccin.user.less new file mode 100644 index 0000000000..15c5990e8f --- /dev/null +++ b/styles/freedesktop/catppuccin.user.less @@ -0,0 +1,110 @@ +/* ==UserStyle== +@name freedesktop.org Catppuccin +@namespace github.com/catppuccin/userstyles/styles/freedesktop +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/freedesktop +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/freedesktop/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Afreedesktop +@description Soothing pastel theme for freedesktop.org +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("www.freedesktop.org"), + domain("specifications.freedesktop.org") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + body { + background-color: @base; + color: @text; + } + + #content h1, + #content h2, + #content h3, + #content h4, + #content h5, + #content h6 { + color: @accent; + } + + .pageheader { + background-color: @mantle; + border-color: @crust; + color: @subtext1; + } + + .pageheader .actions ul li a, + input[type="submit"] { + background-color: transparent; + color: @accent; + border-color: @accent; + } + + input#searchbox { + color: @subtext1; + background-color: @overlay0; + border-color: @overlay1; + box-shadow: none; + &:focus { + border-color: @accent; + outline-color: none; + outline-style: none; + } + } + + .headerpath .title { + color: @subtext1; + } + + a:link { + color: @blue; + } + + a:visited { + color: @lavender; + } + code { + background-color: @crust; + color: @text; + } + + pre { + background-color: @mantle; + border-color: @surface0; + + code { + background-color: @mantle; + color: @text; + } + } + + hr { + border-style: solid; + border-color: @surface1; + } + + .topnav, tr:nth-child(2n+1) { + border-color: @surface0; + background-color: @mantle; + } + } +} diff --git a/styles/ghostty.org/README.md b/styles/ghostty.org/README.md new file mode 100644 index 0000000000..2a12a58cb0 --- /dev/null +++ b/styles/ghostty.org/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Ghostty.org + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/ghostty.org/catppuccin.user.less b/styles/ghostty.org/catppuccin.user.less new file mode 100644 index 0000000000..a0e6a9b02b --- /dev/null +++ b/styles/ghostty.org/catppuccin.user.less @@ -0,0 +1,93 @@ +/* ==UserStyle== +@name Ghostty.org Catppuccin +@namespace github.com/catppuccin/userstyles/styles/ghostty.org +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ghostty.org +@version 2026.03.10 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ghostty.org/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aghostty.org +@description Soothing pastel theme for Ghostty.org +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("ghostty.org") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + + html, body { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --brand-color: @accent; + --brand-color-hsl: #hslify(@accent)[]; + --gray-0: @base; + --gray-1: @surface0; + --gray-2: @surface1; + --gray-3: @overlay1; + --gray-4: @subtext0; + --gray-5: @subtext1; + --gray-6: @subtext1; + --gray-7: @subtext1; + --gray-8: @text; + --gray-9: @text; + --black: @crust; + --white: @text; + + --callout-note: @blue; + --callout-tip: @green; + --callout-important: @mauve; + --callout-warning: @yellow; + --callout-caution: @red; + + div[class^="Terminal-module"] { + --adw-headerbar-color: @mantle !important; + --color-sunset-orange: @red; + --color-pastel-orange: @peach; + --color-malachite: @green; + } + + [class*="__buttonLink"][class*="__brand"]:hover, + ul[class*="NavTree-module__"] [class*="__active"] { + color: @crust !important; + } + + img[alt="Ghostty"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + [class*="DownloadPage_header"] img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + pre code { + color: @text; + } + } +} + +/* #lib.hslify() with spaces instead of commas. */ +#hslify(@color) { + @raw: e(%("%s %s% %s%", hue(@color), saturation(@color), lightness(@color))); +} diff --git a/styles/github/README.md b/styles/github/README.md index 7abffa14d2..70cce4d092 100644 --- a/styles/github/README.md +++ b/styles/github/README.md @@ -10,42 +10,23 @@

- +

-

- -

- -## Previews +## Usage -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
+See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +> [!NOTE] +> Use the **Light default** or **Dark default** themes and disable *Increase contrast* under GitHub's [Theme preferences](https://github.com/settings/appearance). +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) - - -## 💝 Current Maintainer(s) +## 💖 Past Maintainers +- [unseen-ninja](https://github.com/unseen-ninja) - [Pocco81](https://github.com/Pocco81) -- [Umbreon](https://github.com/GlowingUmbreon) - -## 💖 Past Maintainer(s) -- [Andreas Grafen](https://github.com/andreasgrafen) +- [GlowingUmbreon](https://github.com/GlowingUmbreon)   diff --git a/styles/github/assets/catwalk.webp b/styles/github/assets/catwalk.webp deleted file mode 100644 index 0b020aeb20..0000000000 --- a/styles/github/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2001250e9f1865225c986d656ca9cf04d2aadefca3cdb4313611c268061b521a -size 112662 diff --git a/styles/github/assets/frappe.webp b/styles/github/assets/frappe.webp deleted file mode 100644 index 572c7cdbe1..0000000000 --- a/styles/github/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:834ffff980c9d8f222c45c1fba257e37c4a1f4c851d66a341ab84db744f07f2f -size 65782 diff --git a/styles/github/assets/latte.webp b/styles/github/assets/latte.webp deleted file mode 100644 index bde5b1bcd6..0000000000 --- a/styles/github/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:8007c42757ded04c5bacd5917843b2c9339589ceb3253540760051d86a424d13 -size 67506 diff --git a/styles/github/assets/macchiato.webp b/styles/github/assets/macchiato.webp deleted file mode 100644 index c0ae45d6fc..0000000000 --- a/styles/github/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9d478688a3aa090984ef2bda83ab1363ee99d350bb6e6852a3aa4d7f88fdd067 -size 67722 diff --git a/styles/github/assets/mocha.webp b/styles/github/assets/mocha.webp deleted file mode 100644 index f6d9f3ba6f..0000000000 --- a/styles/github/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7a5698361fe462f0cb0bf8d4d00fac7c0fdfdfafffcd493ed3d6e81b844e9838 -size 69580 diff --git a/styles/github/catppuccin.user.css b/styles/github/catppuccin.user.css deleted file mode 100644 index 4c3e82d50c..0000000000 --- a/styles/github/catppuccin.user.css +++ /dev/null @@ -1,1644 +0,0 @@ -/* ==UserStyle== -@name Github Catppuccin -@namespace github.com/catppuccin/userstyles/styles/github -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/github -@version 1.2.2 -@description Soothing pastel theme for GitHub -@author Catppuccin -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/github/catppuccin.user.css -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater*", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] -@var checkbox topbar "Topbar colors" 1 -@var checkbox usefont "Use Inter font" 0 -==/UserStyle== */ - -@catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - } - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - } - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - } - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - } -} - -@-moz-document regexp("https:\/\/(gist\.)*github\.com(?!\/(marketplace|organizations\/plan)).*") { - - [data-color-mode="light"], - [data-color-mode="auto"] > .theme-light { - #catppuccin(@lightFlavor, @accentColor); - } - @media (prefers-color-scheme: light) { - [data-color-mode="auto"] { - #catppuccin(@lightFlavor, @accentColor); - } - } - [data-color-mode="dark"], - [data-color-mode="auto"] > .theme-dark { - #catppuccin(@darkFlavor, @accentColor); - } - @media (prefers-color-scheme: dark) { - [data-color-mode="auto"] { - #catppuccin(@darkFlavor, @accentColor); - } - } - - #coloredButton(@name, @color) { - --color-btn-@{name}-text: @base; - --color-btn-@{name}-bg: @color; - --color-btn-@{name}-border: transparent; - --color-btn-@{name}-shadow: 0 0 transparent; - --color-btn-@{name}-inset-shadow: 0 0 transparent; - --color-btn-@{name}-hover-bg: mix(@color, @text, 30%); - --color-btn-@{name}-hover-border: rgba(240, 246, 252, 0.1); - --color-btn-@{name}-selected-bg: mix(@color, @text, 50%); - --color-btn-@{name}-selected-shadow: 0 0 transparent; - --color-btn-@{name}-disabled-text: @crust; - --color-btn-@{name}-disabled-bg: mix(@color, @base, 60%); - --color-btn-@{name}-disabled-border: transparent; - --color-btn-@{name}-focus-bg: #238636; - --color-btn-@{name}-focus-border: rgba(240, 246, 252, 0.1); - --color-btn-@{name}-focus-shadow: 0 0 0 3px rgba(46, 164, 79, 0.4); - --color-btn-@{name}-icon: @base; - --color-btn-@{name}-counter-bg: rgba(255, 255, 255, 0.2); - } - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-color: @catppuccin[@@lookup][@@accent]; - - &, - & body { - accent-color: @accent-color; - --color-canvas-default-transparent: rgba(13, 17, 23, 0); - --color-page-header-bg: @base; - --color-marketing-icon-primary: @sky; - --color-marketing-icon-secondary: @blue; - --color-diff-blob-addition-num-text: @text; - --color-diff-blob-addition-fg: @text; - --color-diff-blob-addition-num-bg: fadeout(@green, 70%); - --color-diff-blob-addition-line-bg: fadeout(@green, 85%); - --color-diff-blob-addition-word-bg: fadeout(@green, 70%); - --color-diff-blob-deletion-num-text: @text; - --color-diff-blob-deletion-fg: @text; - --color-diff-blob-deletion-num-bg: fadeout(@red, 70%); - --color-diff-blob-deletion-line-bg: fadeout(@red, 85%); - --color-diff-blob-deletion-word-bg: fadeout(@red, 70%); - --color-diff-blob-hunk-num-bg: fadeout(@blue, 60%); - --color-diff-blob-expander-icon: #8b949e; - --color-diff-blob-selected-line-highlight-mix-blend-mode: screen; - --color-diffstat-deletion-border: rgba(240, 246, 252, 0.1); - --color-diffstat-addition-border: rgba(240, 246, 252, 0.1); - --color-diffstat-addition-bg: @green; - --color-search-keyword-hl: rgba(210, 153, 34, 0.4); - --color-prettylights-syntax-comment: @overlay1; - --color-prettylights-syntax-constant: @blue; - --color-prettylights-syntax-entity: @blue; - --color-prettylights-syntax-storage-modifier-import: @peach; - --color-prettylights-syntax-entity-tag: @teal; - --color-prettylights-syntax-keyword: @pink; - --color-prettylights-syntax-string: @green; - --color-prettylights-syntax-variable: @peach; - --color-prettylights-syntax-brackethighlighter-unmatched: #f0f; - --color-prettylights-syntax-invalid-illegal-text: @red; - --color-prettylights-syntax-invalid-illegal-bg: fadeout(@red, 85%); - --color-prettylights-syntax-carriage-return-text: #f0f; - --color-prettylights-syntax-carriage-return-bg: #f0f; - --color-prettylights-syntax-string-regexp: #f0f; - --color-prettylights-syntax-markup-list: #f0f; - --color-prettylights-syntax-markup-heading: @teal; - --color-prettylights-syntax-markup-italic: @yellow; - --color-prettylights-syntax-markup-bold: @yellow; - --color-prettylights-syntax-markup-deleted-text: @text; - --color-prettylights-syntax-markup-deleted-bg: fadeout(@red, 60%); - --color-prettylights-syntax-markup-inserted-text: @text; - --color-prettylights-syntax-markup-inserted-bg: fadeout(@green, 60%); - --color-prettylights-syntax-markup-changed-text: @text; - --color-prettylights-syntax-markup-changed-bg: fadeout(@yellow, 60%); - --color-prettylights-syntax-markup-ignored-text: @text; - --color-prettylights-syntax-markup-ignored-bg: #f0f; - --color-prettylights-syntax-meta-diff-range: @mauve; - --color-prettylights-syntax-brackethighlighter-angle: #f0f; - --color-prettylights-syntax-sublimelinter-gutter-mark: #f0f; - --color-prettylights-syntax-constant-other-reference-link: #f0f; - --color-codemirror-text: @text; - --color-codemirror-bg: @base; - --color-codemirror-gutters-bg: @base; - --color-codemirror-guttermarker-text: @base; - --color-codemirror-guttermarker-subtle-text: #6e7681; - --color-codemirror-linenumber-text: #8b949e; - --color-codemirror-cursor: #c9d1d9; - --color-codemirror-selection-bg: rgba(56, 139, 253, 0.4); - --color-codemirror-activeline-bg: rgba(110, 118, 129, 0.1); - --color-codemirror-matchingbracket-text: #c9d1d9; - --color-codemirror-lines-bg: @base; - --color-codemirror-syntax-comment: #8b949e; - --color-codemirror-syntax-constant: #79c0ff; - --color-codemirror-syntax-entity: #d2a8ff; - --color-codemirror-syntax-keyword: #ff7b72; - --color-codemirror-syntax-storage: #ff7b72; - --color-codemirror-syntax-string: #a5d6ff; - --color-codemirror-syntax-support: #79c0ff; - --color-codemirror-syntax-variable: #ffa657; - --color-checks-bg: @mantle; - --color-checks-run-border-width: 1px; - --color-checks-container-border-width: 1px; - --color-checks-text-primary: @text; - --color-checks-text-secondary: @subtext1; - --color-checks-text-link: @sapphire; - --color-checks-btn-icon: @text; - --color-checks-btn-hover-icon: @text; - --color-checks-btn-hover-bg: @crust; - --color-checks-input-text: @surface1; - --color-checks-input-placeholder-text: @subtext1; - --color-checks-input-focus-text: @text; - --color-checks-input-bg: @surface0; - --color-checks-input-shadow: 0 0 0 1px; - --color-checks-donut-error: @red; - --color-checks-donut-pending: @peach; - --color-checks-donut-success: @green; - --color-checks-donut-neutral: @overlay2; - --color-checks-dropdown-text: @text; - --color-checks-dropdown-bg: @surface0; - --color-checks-dropdown-border: @surface1; - --color-checks-dropdown-shadow: @crust; - --color-checks-dropdown-hover-text: @subtext0; - --color-checks-dropdown-hover-bg: @mantle; - --color-checks-dropdown-btn-hover-text: @text; - --color-checks-dropdown-btn-hover-bg: @mantle; - --color-checks-scrollbar-thumb-bg: @mantle; - --color-checks-header-label-text: @text; - --color-checks-header-label-open-text: @accent-color; - --color-checks-header-border: @surface0; - --color-checks-header-icon: @text; - --color-checks-line-text: @subtext0; - --color-checks-line-num-text: @subtext0; - --color-checks-line-timestamp-text: @subtext0; - --color-checks-line-hover-bg: @surface0; - --color-checks-line-selected-bg: @surface0; - --color-checks-line-selected-num-text: #dc2286; - --color-checks-line-dt-fm-text: #dc2286; - --color-checks-line-dt-fm-bg: #dc2286; - --color-checks-gate-bg: rgba(187, 128, 9, 0.15); - --color-checks-gate-text: @text; - --color-checks-gate-waiting-text: @yellow; - --color-checks-step-header-open-bg: @surface0; - --color-checks-step-error-text: @maroon; - --color-checks-step-warning-text: @peach; - --color-checks-logline-text: @text; - --color-checks-logline-num-text: @text; - --color-checks-logline-debug-text: @mauve; - --color-checks-logline-error-text: @text; - --color-checks-logline-error-num-text: @maroon; - --color-checks-logline-error-bg: fadeout(@maroon, 85%); - --color-checks-logline-warning-text: @subtext1; - --color-checks-logline-warning-num-text: @peach; - --color-checks-logline-warning-bg: fadeout(@peach, 85%); - --color-checks-logline-command-text: @blue; - --color-checks-logline-section-text: @green; - --color-checks-ansi-black: @surface1; - --color-checks-ansi-black-bright: @surface2; - --color-checks-ansi-white: @subtext1; - --color-checks-ansi-white-bright: @subtext0; - --divider-color: @surface1; - - & when (@lookup =latte) { - // When using a light theme use the light colors instead of the dark - --color-checks-ansi-black: @subtext1; - --color-checks-ansi-black-bright: @subtext0; - --color-checks-ansi-white: @surface2; - --color-checks-ansi-white-bright: @surface1; - } - - --color-checks-ansi-gray: #f0f; - --color-checks-ansi-red: @red; - --color-checks-ansi-red-bright: @red; - --color-checks-ansi-green: @green; - --color-checks-ansi-green-bright: @green; - --color-checks-ansi-yellow: @yellow; - --color-checks-ansi-yellow-bright: @yellow; - --color-checks-ansi-blue: @blue; - --color-checks-ansi-blue-bright: @blue; - --color-checks-ansi-magenta: @pink; - --color-checks-ansi-magenta-bright: @pink; - --color-checks-ansi-cyan: @teal; - --color-checks-ansi-cyan-bright: @teal; - --color-project-header-bg: #0d1117; - --color-project-sidebar-bg: #161b22; - --color-project-gradient-in: #161b22; - --color-project-gradient-out: rgba(22, 27, 34, 0); - --color-mktg-btn-bg: #f6f8fa; - --color-mktg-btn-shadow-outline: rgb(255, 255, 255 / 25%) 0 0 0 1px inset; - --color-mktg-btn-shadow-focus: rgb(255, 255, 255 / 25%) 0 0 0 4px; - --color-mktg-btn-shadow-hover: 0 4px 7px rgba(0, 0, 0, 0.15), - 0 100px 80px rgba(255, 255, 255, 0.02), - 0 42px 33px rgba(255, 255, 255, 0.024), - 0 22px 18px rgba(255, 255, 255, 0.028), - 0 12px 10px rgba(255, 255, 255, 0.034), - 0 7px 5px rgba(255, 255, 255, 0.04), - 0 3px 2px rgba(255, 255, 255, 0.07); - --color-mktg-btn-shadow-hover-muted: rgb(255, 255, 255) 0 0 0 2px inset; - --color-avatar-bg: rgba(255, 255, 255, 0.1); - --color-avatar-border: rgba(240, 246, 252, 0.1); - --color-avatar-stack-fade: #30363d; - --color-avatar-stack-fade-more: #21262d; - --color-avatar-child-shadow: -2px -2px 0 #0d1117; - --color-topic-tag-border: rgba(0, 0, 0, 0); - --color-counter-border: rgba(0, 0, 0, 0); - --color-select-menu-backdrop-border: #484f58; - --color-select-menu-tap-highlight: rgba(48, 54, 61, 0.5); - --color-select-menu-tap-focus-bg: #0c2d6b; - --color-overlay-shadow: 0 0 0 1px #30363d, - 0 16px 32px rgba(1, 4, 9, 0.85); - --color-header-text: var(--subtext2); - --color-header-bg: @base; - - & when (@topbar =1) { - // If topbar is enabled then make the topbar color different - --color-header-bg: @mantle; - } - - --color-header-divider: #8b949e; - --color-header-logo: @text; - --color-header-search-bg: @surface0; - --color-header-search-border: @surface1; - --color-sidenav-selected-bg: @surface1; - --color-menu-bg-active: @surface2; - --color-input-disabled-bg: rgba(110, 118, 129, 0); - --color-timeline-badge-bg: @surface0; - --color-ansi-black: #484f58; - --color-ansi-black-bright: #6e7681; - --color-ansi-white: #b1bac4; - --color-ansi-white-bright: #ffffff; - --color-ansi-gray: #6e7681; - --color-ansi-red: #ff7b72; - --color-ansi-red-bright: #ffa198; - --color-ansi-green: #3fb950; - --color-ansi-green-bright: #56d364; - --color-ansi-yellow: #d29922; - --color-ansi-yellow-bright: #e3b341; - --color-ansi-blue: #58a6ff; - --color-ansi-blue-bright: #79c0ff; - --color-ansi-magenta: #bc8cff; - --color-ansi-magenta-bright: #d2a8ff; - --color-ansi-cyan: #39c5cf; - --color-ansi-cyan-bright: #56d4dd; - --color-btn-text: @text; - --color-btn-bg: @surface0; - --color-btn-border: transparent; - --color-btn-shadow: 0 0 transparent; - --color-btn-inset-shadow: 0 0 transparent; - --color-btn-hover-bg: @surface1; - --color-btn-hover-border: transparent; - --color-btn-active-bg: @surface2; - --color-btn-active-border: transparent; - --color-btn-selected-bg: @surface2; - --color-btn-focus-bg: #21262d; - --color-btn-focus-border: #8b949e; - --color-btn-focus-shadow: 0 0 0 3px rgba(139, 148, 158, 0.3); - --color-btn-shadow-active: inset 0 0.15em 0.3em rgba(1, 4, 9, 0.15); - --color-btn-shadow-input-focus: 0 0 0 0.2em rgba(31, 111, 235, 0.3); - --color-btn-counter-bg: @surface2; - #coloredButton(primary, @green); - --color-btn-outline-text: #58a6ff; - --color-btn-outline-hover-text: #58a6ff; - --color-btn-outline-hover-bg: #30363d; - --color-btn-outline-hover-border: rgba(240, 246, 252, 0.1); - --color-btn-outline-hover-shadow: 0 1px 0 rgba(1, 4, 9, 0.1); - --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); - --color-btn-outline-hover-counter-bg: rgba(255, 255, 255, 0.2); - --color-btn-outline-selected-text: #ffffff; - --color-btn-outline-selected-bg: #0d419d; - --color-btn-outline-selected-border: rgba(240, 246, 252, 0.1); - --color-btn-outline-selected-shadow: 0 0 transparent; - --color-btn-outline-disabled-text: @subtext0; - --color-btn-outline-disabled-bg: @surface2; - --color-btn-outline-disabled-counter-bg: rgba(31, 111, 235, 0.05); - --color-btn-outline-focus-border: rgba(240, 246, 252, 0.1); - --color-btn-outline-focus-shadow: 0 0 0 3px rgba(17, 88, 199, 0.4); - --color-btn-outline-counter-bg: rgba(31, 111, 235, 0.1); - #coloredButton(danger, @red); - --color-underlinenav-icon: #6e7681; - --color-underlinenav-border-hover: rgba(110, 118, 129, 0.4); - --color-action-list-item-inline-divider: @surface2; - --color-action-list-item-default-hover-bg: @surface0; - --color-action-list-item-default-hover-border: rgba(0, 0, 0, 0); - --color-action-list-item-default-active-bg: rgba(177, 186, 196, 0.2); - --color-action-list-item-default-active-border: rgba(0, 0, 0, 0); - --color-action-list-item-default-selected-bg: @surface1; - --color-action-list-item-danger-hover-bg: rgba(248, 81, 73, 0.16); - --color-action-list-item-danger-active-bg: rgba(248, 81, 73, 0.24); - --color-action-list-item-danger-hover-text: #ff7b72; - --color-switch-track-bg: #010409; - --color-switch-track-border: #6e7681; - --color-switch-track-checked-bg: rgba(31, 111, 235, 0.35); - --color-switch-track-checked-hover-bg: rgba(31, 111, 235, 0.5); - --color-switch-track-checked-active-bg: rgba(31, 111, 235, 0.65); - --color-switch-track-checked-border: #58a6ff; - --color-switch-knob-checked-bg: #1f6feb; - --color-switch-knob-checked-disabled-bg: #484f58; - --color-fg-default: @text; - --color-fg-muted: @subtext1; - --color-fg-subtle: @subtext1; - --color-fg-on-emphasis: @base; - --color-canvas-default: @base; - --color-canvas-overlay: @mantle; - --color-canvas-inset: @surface0; - --color-canvas-subtle: @mantle; - --color-border-default: @surface1; - --color-border-muted: @surface0; - --color-border-subtle: rgba(240, 246, 252, 0.1); - --color-shadow-small: 0 0 transparent; - --color-shadow-medium: 0 3px 6px @crust; - --color-shadow-large: 0 8px 24px @crust; - --color-shadow-extra-large: 0 12px 48px @crust; - --color-neutral-emphasis-plus: @overlay0; - --color-neutral-emphasis: @overlay2; - --color-neutral-muted: rgba(110, 118, 129, 0.4); - --color-neutral-subtle: rgba(110, 118, 129, 0.1); - --color-accent-fg: @accent-color; - --color-accent-emphasis: @accent-color; - --color-accent-muted: fadeout(@accent-color, 60%); - --color-accent-subtle: fadeout(@accent-color, 85%); - --color-success-fg: @green; - --color-success-emphasis: @green; - --color-success-muted: rgba(46, 160, 67, 0.4); - --color-success-subtle: rgba(46, 160, 67, 0.15); - --color-attention-fg: @peach; - --color-attention-emphasis: @peach; - --color-attention-muted: rgba(187, 128, 9, 0.4); - --color-attention-subtle: rgba(187, 128, 9, 0.15); - --color-severe-fg: @maroon; - --color-severe-emphasis: @maroon; - --color-severe-muted: rgba(219, 109, 40, 0.4); - --color-severe-subtle: rgba(219, 109, 40, 0.15); - --color-danger-fg: @red; - --color-danger-emphasis: @red; - --color-danger-muted: rgba(248, 81, 73, 0.4); - --color-danger-subtle: rgba(248, 81, 73, 0.15); - --color-open-fg: @green; - --color-open-emphasis: @green; - --color-open-muted: rgba(46, 160, 67, 0.4); - --color-open-subtle: rgba(46, 160, 67, 0.15); - --color-closed-fg: @red; - --color-closed-emphasis: @red; - --color-closed-muted: rgba(248, 81, 73, 0.4); - --color-closed-subtle: rgba(248, 81, 73, 0.15); - --color-done-fg: @mauve; - --color-done-emphasis: @mauve; - --color-done-muted: rgba(163, 113, 247, 0.4); - --color-done-subtle: rgba(163, 113, 247, 0.15); - --color-sponsors-fg: @mauve; - --color-sponsors-emphasis: @mauve; - --color-sponsors-muted: rgba(219, 97, 162, 0.4); - --color-sponsors-subtle: rgba(219, 97, 162, 0.15); - --color-primer-fg-disabled: fadeout(@accent-color, 50%); - --color-primer-canvas-backdrop: rgba(1, 4, 9, 0.8); - --color-primer-canvas-sticky: rgba(13, 17, 23, 0.95); - --color-primer-border-active: @red; - --color-primer-border-contrast: rgba(255, 255, 255, 0.2); - --color-primer-shadow-highlight: 0 0 transparent; - --color-primer-shadow-inset: 0 0 transparent; - --color-primer-shadow-focus: 0 0 0 3px #0c2d6b; - --color-scale-black: #010409; - --color-scale-white: #ffffff; - --color-scale-gray-0: #f0f6fc; - --color-scale-gray-1: #c9d1d9; - --color-scale-gray-2: #b1bac4; - --color-scale-gray-3: #8b949e; - --color-scale-gray-4: #6e7681; - --color-scale-gray-5: #484f58; - --color-scale-gray-6: #30363d; - --color-scale-gray-7: #21262d; - --color-scale-gray-8: #161b22; - --color-scale-gray-9: #0d1117; - --color-scale-blue-0: #cae8ff; - --color-scale-blue-1: #a5d6ff; - --color-scale-blue-2: #79c0ff; - --color-scale-blue-3: #58a6ff; - --color-scale-blue-4: #388bfd; - --color-scale-blue-5: #1f6feb; - --color-scale-blue-6: #1158c7; - --color-scale-blue-7: #0d419d; - --color-scale-blue-8: #0c2d6b; - --color-scale-blue-9: #051d4d; - --color-scale-green-0: #aff5b4; - --color-scale-green-1: #7ee787; - --color-scale-green-2: #56d364; - --color-scale-green-3: #3fb950; - --color-scale-green-4: #2ea043; - --color-scale-green-5: #238636; - --color-scale-green-6: #196c2e; - --color-scale-green-7: #0f5323; - --color-scale-green-8: #033a16; - --color-scale-green-9: #04260f; - --color-scale-yellow-0: #f8e3a1; - --color-scale-yellow-1: #f2cc60; - --color-scale-yellow-2: #e3b341; - --color-scale-yellow-3: #d29922; - --color-scale-yellow-4: #bb8009; - --color-scale-yellow-5: #9e6a03; - --color-scale-yellow-6: #845306; - --color-scale-yellow-7: #693e00; - --color-scale-yellow-8: #4b2900; - --color-scale-yellow-9: #341a00; - --color-scale-orange-0: #ffdfb6; - --color-scale-orange-1: #ffc680; - --color-scale-orange-2: #ffa657; - --color-scale-orange-3: #f0883e; - --color-scale-orange-4: #db6d28; - --color-scale-orange-5: #bd561d; - --color-scale-orange-6: #9b4215; - --color-scale-orange-7: #762d0a; - --color-scale-orange-8: #5a1e02; - --color-scale-orange-9: #3d1300; - --color-scale-red-0: #ffdcd7; - --color-scale-red-1: #ffc1ba; - --color-scale-red-2: #ffa198; - --color-scale-red-3: #ff7b72; - --color-scale-red-4: #f85149; - --color-scale-red-5: #da3633; - --color-scale-red-6: #b62324; - --color-scale-red-7: #8e1519; - --color-scale-red-8: #67060c; - --color-scale-red-9: #490202; - --color-scale-purple-0: #eddeff; - --color-scale-purple-1: #e2c5ff; - --color-scale-purple-2: #d2a8ff; - --color-scale-purple-3: #bc8cff; - --color-scale-purple-4: #a371f7; - --color-scale-purple-5: #8957e5; - --color-scale-purple-6: #6e40c9; - --color-scale-purple-7: #553098; - --color-scale-purple-8: #3c1e70; - --color-scale-purple-9: #271052; - --color-scale-pink-0: #ffdaec; - --color-scale-pink-1: #ffbedd; - --color-scale-pink-2: #ff9bce; - --color-scale-pink-3: #f778ba; - --color-scale-pink-4: #db61a2; - --color-scale-pink-5: #bf4b8a; - --color-scale-pink-6: #9e3670; - --color-scale-pink-7: #7d2457; - --color-scale-pink-8: #5e103e; - --color-scale-pink-9: #42062a; - --color-scale-coral-0: #FFDDD2; - --color-scale-coral-1: #FFC2B2; - --color-scale-coral-2: #FFA28B; - --color-scale-coral-3: #F78166; - --color-scale-coral-4: #EA6045; - --color-scale-coral-5: #CF462D; - --color-scale-coral-6: #AC3220; - --color-scale-coral-7: #872012; - --color-scale-coral-8: #640D04; - --color-scale-coral-9: #460701; - } - --color-workflow-card-connector: @overlay0; - --color-workflow-card-connector-bg: @overlay0; - --color-workflow-card-connector-inactive: @surface1; - --color-workflow-card-connector-inactive-bg: @surface1; - --color-workflow-card-connector-highlight: @accent-color; - --color-workflow-card-connector-highlight-bg: @accent-color; - --color-workflow-card-bg: @surface1; - --color-workflow-card-inactive-bg: @surface0; - --color-workflow-card-header-shadow: #dc2286; - --color-workflow-card-progress-complete-bg: fadeout(@blue, 85%); - --color-workflow-card-progress-incomplete-bg: @surface1; - --color-discussions-state-answered-icon: var(--color-scale-green-3); - --color-bg-discussions-row-emoji-box: var(--color-scale-gray-6); - --color-notifications-button-text: var(--color-scale-white); - --color-notifications-button-hover-text: var(--color-scale-white); - --color-notifications-button-hover-bg: var(--color-scale-blue-4); - --color-notifications-row-read-bg: var(--color-canvas-default); - --color-notifications-row-bg: var(--color-canvas-subtle); - --color-icon-directory: @text; - --color-checks-step-error-icon: var(--color-scale-red-4); - --color-calendar-halloween-graph-day-L1-bg: #631c03; - --color-calendar-halloween-graph-day-L2-bg: #bd561d; - --color-calendar-halloween-graph-day-L3-bg: #fa7a18; - --color-calendar-halloween-graph-day-L4-bg: #fddf68; - --color-calendar-graph-day-bg: @surface0; - --color-calendar-graph-day-border: transparent; - /* These could do with a bit of refining */ - --color-calendar-graph-day-L1-bg: spin(fade(@green, 40%), 15deg); - --color-calendar-graph-day-L2-bg: spin(fade(@green, 60%), 10deg); - --color-calendar-graph-day-L3-bg: spin(fade(@green, 80%), 5deg); - --color-calendar-graph-day-L4-bg: @green; - --color-calendar-graph-day-L1-border: transparent; - --color-calendar-graph-day-L2-border: transparent; - --color-calendar-graph-day-L3-border: transparent; - --color-calendar-graph-day-L4-border: transparent; - --color-user-mention-fg: var(--color-scale-yellow-0); - --color-user-mention-bg: var(--color-scale-yellow-8); - --color-text-white: @text; - - /* Buttons */ - .btn-danger, - .Button--danger { - background: var(--color-btn-danger-bg) - } - - /* Create PR button & New branch button */ - .iRoQzU, .ifkUYV, .bOZDzN { - background-color: @green; - color: @base; - } - - /* New branch dialog */ - .jenxrv { - background-color: @mantle; - color: @text; - } - - /* Branch drop down */ - .fHiIQb { - background-color: @surface0; - } - - /* Compare button & Cancel new branch button */ - .idPXPh, - .epAEYw { - background-color: @surface0; - color: @text; - border-color: @surface1; - } - - /* search btn */ - .header-search-button.placeholder { - color: @text; - } - - /* Issue tags */ - .hx_IssueLabel { - --text: @text; - } - - .hx_IssueLabel not when (@lookup =latte) { - --lightness-threshold: 0.453; - --border-threshold: 0.96; - --border-fadeout: max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1)); //color: hsl(0deg, 0%, calc(var(--lightness-switch) * 100%)) !important; - color: var(--text) !important; - background: rgb(var(--label-r), var(--label-g), var(--label-b)) !important; - border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 25) * 1%), var(--border-fadeout)) !important; - } - - .hx_IssueLabel when (@lookup =latte) { - --lightness-threshold: 0.6; - --background-fadeout: 0.18; - --border-fadeout: 0.3; - --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch)); - color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%)) !important; - background: rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-fadeout)) !important; - border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-fadeout)) !important; - } - - /* Labels */ - .Label { - color: var(--color-accent-fg); - background-color: @surface0; - border-color: transparent; - } - - .Label--secondary { - background-color: @surface0; - color: @text; - } - - .Label--success { - color: @base; - background-color: @green; - } - - .Label--danger { - background-color: var(--color-danger-emphasis); - color: var(--color-btn-danger-text); - } - - .timeline-comment-header .Label, - .timeline-comment .Label { - color: var(--color-fg-muted); - } - - /* Search */ - .header-search-input { - color: @text !important; - } - - .header-search-input::placeholder { - color: @subtext1 !important; - } - - /* Tags */ - .topic-tag { - --color-accent-fg: @blue; - --color-accent-emphasis: @blue; - --color-accent-muted: fadeout(@blue, 60%); - --color-accent-subtle: fadeout(@blue, 85%); - } - - /* Misc */ - .col-md-8 { - background-color: @base; - } - - .user-mention, .team-mention { - color: @accent-color; - } - - .kSmUFR[data-size="small"][data-no-visuals="true"] svg { - color: @green; - } - .starred .starred-button-icon { - color: @yellow; - } - - /* Large notification */ - .flash { - background: @mantle; - border-color: transparent; - } - - /* Button Fix */ - .color-bg-subtle { - background-color: transparent !important; - } - - .command-palette-details-dialog .color-bg-subtle { - background-color: @surface0 !important; - } - - /* Button selection Fix */ - .navigation-item[aria-selected="true"] .color-fg-muted { - color: @base !important; - } - - /* Darker bg for new AppHeader */ - .AppHeader { - background: var(--color-header-bg); - } - - /* Headers */ - h1, - h2, - h3, - h4, - h5, - h6 { - color: @subtext1 - } - - body, - .markdown-body { - & when (@usefont=1) { - font-family: inter, sans-serif; - } - } - - #check-step-header-title { - color: var(--color-checks-text-link) !important; - } - - ::selection { - background: @surface2 !important; - } - - /* New change visibility box star and watcher preview buttons Fix */ - .btn.color-fg-danger.cursor-default { - color: var(--color-btn-danger-text) !important; - background-color: var(--color-btn-danger-bg); - } - - .btn.color-fg-danger.cursor-default:hover { - background-color: var(--color-btn-danger-hover-bg); - } - - .btn.color-fg-danger.cursor-default > svg.octicon { - color: var(--color-btn-danger-text) !important; - } - - /* New change visibility box danger buttons Fix */ - :where(#repo-visibility-proceed-button-public, #repo-visibility-proceed-button-private):not([data-next-stage]) { - color: var(--color-btn-danger-text); - background-color: var(--color-btn-danger-bg); - } - - /* 2FA authentication box header Fix */ - body.session-authentication div.Box-header { - background-color: inherit; - } - - - /* Footer Logo Fix */ - .footer-octicon > svg:nth-child(1) > path:nth-child(1) { - fill: @text; - } - - /* Footer text hover fix */ - .footer nav.col-12 * { - color: @subtext1 !important; - } - - /* Notifications */ - .notification-indicator .mail-status { - background-image: none; - background-color: @accent-color; - } - - /* Keyboard hint */ - .bdgUpN, - .hZMmEi .TextInput-icon, .hZMmEi .TextInput-action { - color: @text; - background-color: @mantle; - border-color: @surface0; - } - - /* Merge icon */ - .fMJQEf { - color: @text; - background-color: @overlay0; - } - - /* Branch indicator */ - .iVNDSi { - color: @accent-color; - background-color: fade(@accent-color, 10); - } - - /* File view */ - .hwnsNO { - color: @text; - th { - background: @mantle; - } - } - - .dXveNa[data-no-visuals="true"] { - color: @subtext0; - } - - .dXveNa, - .kbjJSF { - background-color: @surface0; - border-color: @surface1; - } - - .gUecKw, - .lcpiaz, - .jolsUx, - .fsSggy { - background-color: @mantle; - } - - .Cxvmo, - .dhYcqs { - color: @red; - } - - .byJIBD, - .dMLfZp[data-size="small"][data-no-visuals="true"] svg { - color: @green; - } - - .lmmHGT:not(:first-of-type), - .fOEJrA, - .fnFdxN, - .huABLg, - .dMLfZp[data-component="IconButton"][data-no-visuals], - .cwSUxL, - .iXnXki[data-size="small"][data-no-visuals="true"], - .jvzHAP, - .hPIyzG, - .gTeenv[data-no-visuals="true"], - .VplrY[data-no-visuals="true"], - .bqDKPR[data-component="IconButton"][data-no-visuals], - .icOaJE[data-size="small"][data-no-visuals="true"], - .kKFNhh, - .lnXbGs, - .dTxwit { - color: @subtext0; - } - - .gssqTz { - color: @text !important; - } - - .bPgnBp, - .jMyfUO, - .hfRvxg, - .cBrzIN { - color: @text; - } - - .eLaeIt:hover:not([disabled]), - .dMLfZp[data-size="small"][data-no-visuals="true"]:hover:not([disabled]), - .bqDKPR[data-component="IconButton"][data-no-visuals], - .bDSYgZ:hover:not([disabled]), - .icOaJE:hover:not([disabled]) { - background-color: @surface0; - } - - .icOaJE[aria-pressed="true"] { - background-color: @surface0; - } - - .cZRqXf { - background-color: @surface0; - &:active:not([disabled]), - &[aria-expanded="true"] { - border-color: @surface2; - } - &:hover:not([disabled]) { - border-color: @surface2; - background-color: @surface1; - } - } - - .kdEavw, - .ddNLNa, - .jepClM, - .gTeenv, - .VplrY { - background-color: @surface0; - &:hover:not([disabled]) { - border-color: @surface2; - background-color: @surface1 - } - } - - .juEfKr { - border-color: @surface2; - } - - .eUqMHM, - .hSXtjz { - background-color: @base; - } - - .gtXnmh, - .ukUXs, - .giEfVQ, - .cKvNNO, - .evdFFE, - .kTUxDY { - background-color: @mantle; - } - - .hLwWNO .PRIVATE_TreeView-item-container, - .hYaoHV, - .rLhXz, - .gtXnmh, - .lmmHGT, - .dEmXPQ { - color: @text; - } - - .bJBoUI, - .iJtJJh { - color: @accent-color; - } - - .lhyFLG { - background-color: @mantle; - border-top: 1px solid @surface1; - border-right-color: @surface1; - border-bottom-color: @surface1; - border-left-color: @surface1; - } - - .hUWqlv, - .bJcMWH { - color: @blue; - } - - .gxGEao { - border-bottom-color: @surface0; - } - - .hLwWNO .PRIVATE_TreeView-item[aria-current="true"] > .PRIVATE_TreeView-item-container { - background-color: @surface0; - &::after { - background-color: @accent-color; - } - } - - .dfAUyE, - .gKuCoB, - .bFrOJy { - .segmentedControl-content { - background-color: @mantle; - color: @text - } - } - - .cuqBaK, - .fCAAcl, - .dAXkSP { - color: @text; - background-color: @base; - &:hover .segmentedControl-content { - background: @surface0; - } - } - - @media (hover: hover) and (pointer: fine) { - .rLhXz:hover:not([aria-disabled]) { - background-color: @surface0; - } - } - - /* Projects */ - .ksbilD, - .cuaLcW, - .joCMLT, - .jClMHS, - .jhjELj, - .diDjDG, - .gFuKCf, - .dHdESs, - .hpfKPO, - .jdgyJn, - .iInViE, - .brqMal, - .AbCTW { - background-color: @mantle; - } - - .jEgFtJ, - .lixtXZ:hover, - .eNIoFu, - .idPXPh:hover, - .fdORwV, - .cjFogo, - .gIOnJa { - background-color: @surface0; - } - - .jBCpbB { - color: @text; - background-color: @surface0; - } - - .kzrUhn.selected { - background-color: @base; - border-color: @surface0; - color: @text; - } - - .esIQoN, - .kbjJSF:disabled { - color: @subtext1; - } - - .eJTCnd, - .eTthoV { - border-color: @surface0; - background-color: @base; - color: @text; - .fixINc, - .eDZJqt { - color: @subtext0; - } - .bniVFX, - .jtlytA { - color: @text; - } - } - - .ikTPpF { - box-shadow: @base 0px 3px 6px; - border-color: @surface0; - } - - .cvveTk, - .dwoION { - background-color: @base; - } - - .FKGWN { - background-color: @base; - border-color: @surface0; - } - - .jEgFtJ::after { - background-color: @accent-color; - } - - .khCtfm:hover { - background-color: @surface0; - } - - .khCtfm, - .khCtfm[data-component="leadingVisual"], - .Tnbrt[data-component="IconButton"][data-no-visuals] { - color: @subtext0; - } - - .Tnbrt { - &:active, &[aria-expanded="true"] { - background-color: @surface2; - } - &:hover { - background-color: @surface1; - } - } - - .imsxCM { - color: @text; - - .is-selected::after { - background-color: @accent-color; - } - } - - .pxYjU { - background-color: @mantle; - color: @text; - border-color: @surface0; - } - - .ilLRrZ { - color: @text; - background-color: @surface1; - } - - .cnIHxk { - background-color: @surface0; - color: @text; - &:disabled { - background-color: @overlay0; - color: @crust; - } - } - - .ghFpol { - background-color: @base; - } - - .hVmCdl, - .fqKZNC, - .fZFWUy, - .kbjJSF, - .flKHtV, - .jolsUx, - .ekNmOn { - color: @text; - } - - .lixtXZ[data-component="IconButton"][data-no-visuals], - .klUZzf:not(:first-of-type) { - color: @subtext0; - } - - .jvpWzR { - &:hover { - background-color: @surface1; - } - &[data-size="large"][data-block="block"] { - color: @subtext0; - } - } - - .fZFWUy, - .fzjwje { - background-color: @base; - } - - .cEYXBH { - background-color: @accent-color; - } - - .joxhcl, .hXyJIp, .fMkBhb > .segmentedControl-content { - background-color: @mantle; - } - - .dVFmxu, - .gbKtit, - .lnKxja, - .jzwNMs { - color: @subtext0; - svg { - fill: @subtext0; - } - &:hover .segmentedControl-content { - background-color: @surface1; - border-color: @surface0; - } - } - - .hJMtSk { - color: @crust; - background-color: @green; - &:disabled { - color: @crust; - background-color: @overlay0; - } - } - - .iDiUTR { - color: @text; - background-color: @base; - border-color: @surface0; - &:hover { - border-color: @surface1; - } - } - - .eQfJKc, - .UHWYv { - color: @red; - } - - .jVIqnb { - color: @red; - background-color: @surface0; - &:hover { - color: @base; - background-color: @red; - } - } - - .UHWYv:hover { - background-color: fade(@red, 20) - } - - .lmmHGT:hover { - background-color: @surface0; - } - - /* Project table view */ - .hYdbWk, - .gkeKEr, - .jzcCeu, - .iGxiw, - .ixFSpw, - .koxWOe, - .gkWKRr, - .ikaTJo > svg, - .dcGHGc, - .dzMFih, - .hYdbWk::before, - .ixFSpw::before, - .dSHKOE { - background-color: @base; - } - - .gkWKRr { - border-top-color: @surface0; - border-right-color: @surface0; - border-left-color: @surface0; - } - - .hPQRKh { - background-color: @surface0; - &:hover:not([disabled]) { - background-color: @surface1; - } - &[data-component="IconButton"][data-no-visuals] { - color: @subtext0; - } - } - - .kfwhFa { - &:hover:not([disabled]) { - background-color: @surface0; - } - &[data-size="small"][data-no-visuals="true"] { - color: @subtext0; - } - } - - .jykkjb { - background-color: @base; - box-shadow: @crust 0px -2px 0px inset, @crust 0px 1px 0px inset; - } - - .jhjELj, - .ixTUPS { - border-color: @surface1; - } - - .gmscZx, - .fUaEiu { - &:hover:not([disabled]) { - background-color: @surface1; - } - &[aria-expanded="true"] { - background-color: @surface0; - } - & [data-component="leadingVisual"], - &[data-size="small"], - &[data-size="small"][data-no-visuals="true"] { - color: @subtext0; - } - } - - .cBssZb { - color: @text; - } - - .jhjELj::before { - border-color: transparent transparent @surface1; - } - - .fHpqaf, - .bfQVnA, - .iGxiw, - .fUzagb, - .gisjeK, - .iQkwAM { - color: @subtext0; - } - - smt { - background-color: @base; - &:hover { - background-color: @surface0; - } - } - - .dtTTcd { - background-color: @base; - &.hoverable:hover { - background-color: @surface0; - } - } - - .pQcjM { - border-color: @surface1; - &.hoverable:hover { - background-color: @surface0; - } - } - - .eTSXcP { - background-color: @red; - } - - .iGxiw { - border-bottom-color: @surface1; - } - } -} -@-moz-document regexp("https:\/\/notebooks\.githubusercontent\.com\/view\/ipynb.*") { - - :root { - #catppuccin(@darkFlavor, @accentColor); - } - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-color: @catppuccin[@@lookup][@@accent]; - - /* Colors */ - --color-scale-black: #010409; - --color-scale-white: #ffffff; - --color-scale-gray-0: #f0f6fc; - --color-scale-gray-1: #c9d1d9; - --color-scale-gray-2: #b1bac4; - --color-scale-gray-3: #8b949e; - --color-scale-gray-4: #6e7681; - --color-scale-gray-5: #484f58; - --color-scale-gray-6: #30363d; - --color-scale-gray-7: #21262d; - --color-scale-gray-8: #161b22; - --color-scale-gray-9: #0d1117; - --color-scale-blue-0: #cae8ff; - --color-scale-blue-1: #a5d6ff; - --color-scale-blue-2: #79c0ff; - --color-scale-blue-3: #58a6ff; - --color-scale-blue-4: #388bfd; - --color-scale-blue-5: #1f6feb; - --color-scale-blue-6: #1158c7; - --color-scale-blue-7: #0d419d; - --color-scale-blue-8: #0c2d6b; - --color-scale-blue-9: #051d4d; - --color-scale-green-0: #aff5b4; - --color-scale-green-1: #7ee787; - --color-scale-green-2: #56d364; - --color-scale-green-3: #3fb950; - --color-scale-green-4: #2ea043; - --color-scale-green-5: #238636; - --color-scale-green-6: #196c2e; - --color-scale-green-7: #0f5323; - --color-scale-green-8: #033a16; - --color-scale-green-9: #04260f; - --color-scale-yellow-0: #f8e3a1; - --color-scale-yellow-1: #f2cc60; - --color-scale-yellow-2: #e3b341; - --color-scale-yellow-3: #d29922; - --color-scale-yellow-4: #bb8009; - --color-scale-yellow-5: #9e6a03; - --color-scale-yellow-6: #845306; - --color-scale-yellow-7: #693e00; - --color-scale-yellow-8: #4b2900; - --color-scale-yellow-9: #341a00; - --color-scale-orange-0: #ffdfb6; - --color-scale-orange-1: #ffc680; - --color-scale-orange-2: #ffa657; - --color-scale-orange-3: #f0883e; - --color-scale-orange-4: #db6d28; - --color-scale-orange-5: #bd561d; - --color-scale-orange-6: #9b4215; - --color-scale-orange-7: #762d0a; - --color-scale-orange-8: #5a1e02; - --color-scale-orange-9: #3d1300; - --color-scale-red-0: #ffdcd7; - --color-scale-red-1: #ffc1ba; - --color-scale-red-2: #ffa198; - --color-scale-red-3: #ff7b72; - --color-scale-red-4: #f85149; - --color-scale-red-5: #da3633; - --color-scale-red-6: #b62324; - --color-scale-red-7: #8e1519; - --color-scale-red-8: #67060c; - --color-scale-red-9: #490202; - --color-scale-purple-0: #eddeff; - --color-scale-purple-1: #e2c5ff; - --color-scale-purple-2: #d2a8ff; - --color-scale-purple-3: #bc8cff; - --color-scale-purple-4: #a371f7; - --color-scale-purple-5: #8957e5; - --color-scale-purple-6: #6e40c9; - --color-scale-purple-7: #553098; - --color-scale-purple-8: #3c1e70; - --color-scale-purple-9: #271052; - --color-scale-pink-0: #ffdaec; - --color-scale-pink-1: #ffbedd; - --color-scale-pink-2: #ff9bce; - --color-scale-pink-3: #f778ba; - --color-scale-pink-4: #db61a2; - --color-scale-pink-5: #bf4b8a; - --color-scale-pink-6: #9e3670; - --color-scale-pink-7: #7d2457; - --color-scale-pink-8: #5e103e; - --color-scale-pink-9: #42062a; - --color-scale-coral-0: #FFDDD2; - --color-scale-coral-1: #FFC2B2; - --color-scale-coral-2: #FFA28B; - --color-scale-coral-3: #F78166; - --color-scale-coral-4: #EA6045; - --color-scale-coral-5: #CF462D; - --color-scale-coral-6: #AC3220; - --color-scale-coral-7: #872012; - --color-scale-coral-8: #640D04; - --color-scale-coral-9: #460701; - - --jp-border-color0: var(--color-scale-gray-7); - --jp-border-color1: var(--color-scale-gray-7); - --jp-border-color2: var(--color-scale-gray-8); - --jp-border-color3: var(--color-scale-gray-9); - --jp-ui-font-color0: @text; - --jp-ui-font-color1: fadeout(@text, 13%); - --jp-ui-font-color2: fadeout(@text, 46%); - --jp-ui-font-color3: fadeout(@text, 72%); - --jp-ui-inverse-font-color0: @crust; - --jp-ui-inverse-font-color1: fadeout(@crust, 20%); - --jp-ui-inverse-font-color2: fadeout(@crust, 50%); - --jp-ui-inverse-font-color3: fadeout(@crust, 70%); - --jp-content-font-color0: @text; - --jp-content-font-color1: @text; - --jp-content-font-color2: fadeout(@text, 30%); - --jp-content-font-color3: fadeout(@text, 50%); - --jp-content-link-color: @sapphire; - --jp-layout-color0: @base !important; - --jp-layout-color1: var(--color-scale-gray-9); - --jp-layout-color2: var(--color-scale-gray-8); - --jp-layout-color3: var(--color-scale-gray-7); - --jp-layout-color4: var(--color-scale-gray-6); - --jp-inverse-layout-color0: var(--color-scale-white); - --jp-inverse-layout-color1: var(--color-scale-white); - --jp-inverse-layout-color2: var(--color-scale-gray-2); - --jp-inverse-layout-color3: var(--color-scale-gray-4); - --jp-inverse-layout-color4: var(--color-scale-gray-6); - --jp-brand-color0: var(--color-scale-blue-7); - --jp-brand-color1: var(--color-scale-blue-5); - --jp-brand-color2: var(--color-scale-blue-3); - --jp-brand-color3: var(--color-scale-blue-1); - --jp-brand-color4: var(--color-scale-blue-0); - --jp-accent-color0: var(--color-scale-green-7); - --jp-accent-color1: var(--color-scale-green-5); - --jp-accent-color2: var(--color-scale-green-3); - --jp-accent-color3: var(--color-scale-green-1); - --jp-warn-color0: var(--color-scale-orange-7); - --jp-warn-color1: var(--color-scale-orange-5); - --jp-warn-color2: var(--color-scale-orange-3); - --jp-warn-color3: var(--color-scale-orange-1); - --jp-error-color0: var(--color-scale-red-7); - --jp-error-color1: var(--color-scale-red-5); - --jp-error-color2: var(--color-scale-red-3); - --jp-error-color3: var(--color-scale-red-1); - --jp-success-color0: var(--color-scale-green-7); - --jp-success-color1: var(--color-scale-green-5); - --jp-success-color2: var(--color-scale-green-3); - --jp-success-color3: var(--color-scale-green-1); - --jp-info-color0: var(--color-scale-blue-7); - --jp-info-color1: var(--color-scale-blue-5); - --jp-info-color2: var(--color-scale-blue-3); - --jp-info-color3: var(--color-scale-blue-1); - --jp-cell-editor-border-color: var(--color-scale-gray-7); - --jp-cell-editor-box-shadow: inset 0 0 2px var(--color-scale-blue-3); - --jp-cell-prompt-not-active-font-color: fadeout(@text, 50%); - --jp-cell-inprompt-font-color: var(--color-scale-blue-6); - --jp-cell-outprompt-font-color: var(--color-scale-coral-6); - --jp-notebook-multiselected-color: fadeout(@overlay2, 86%); - --jp-rendermime-error-background: fadeout(@red, 82%); - --jp-rendermime-table-row-background: var(--color-scale-gray-9); - --jp-rendermime-table-row-hover-background: fadeout(@surface2, 86%); - --jp-dialog-background: fadeout(@crust, 40%); - --jp-toolbar-box-shadow: 0px 0px 2px 0px fadeout(@crust, 20%); - --jp-input-box-shadow: inset 0 0 2px var(--color-scale-blue-3); - --jp-input-background: var(--color-scale-gray-8); - --jp-input-active-box-shadow-color: fadeout(@blue, 70%); - --jp-editor-selected-focused-background: fadeout(@blue, 86%); - --jp-mirror-editor-keyword-color: var(--color-scale-green-5); - --jp-mirror-editor-atom-color: var(--color-scale-blue-3); - --jp-mirror-editor-number-color: var(--color-scale-green-4); - --jp-mirror-editor-def-color: var(--color-scale-blue-6); - --jp-mirror-editor-variable-color: var(--color-scale-gray-3); - --jp-mirror-editor-variable-2-color: var(--color-scale-blue-4); - --jp-mirror-editor-variable-3-color: var(--color-scale-green-6); - --jp-mirror-editor-punctuation-color: var(--color-scale-blue-4); - --jp-mirror-editor-property-color: var(--color-scale-blue-4); - --jp-mirror-editor-operator-color: @mauve; - --jp-mirror-editor-comment-color: @subtext0; - --jp-mirror-editor-string-color: @peach; - --jp-mirror-editor-string-2-color: var(--color-scale-purple-3); - --jp-mirror-editor-meta-color: @mauve; - --jp-mirror-editor-qualifier-color: var(--color-scale-gray-5); - --jp-mirror-editor-builtin-color: var(--color-scale-green-6); - --jp-mirror-editor-bracket-color: var(--color-scale-gray-2); - --jp-mirror-editor-tag-color: var(--color-scale-blue-7); - --jp-mirror-editor-attribute-color: var(--color-scale-blue-7); - --jp-mirror-editor-header-color: var(--color-scale-blue-5); - --jp-mirror-editor-quote-color: var(--color-scale-green-3); - --jp-mirror-editor-link-color: var(--color-scale-blue-7); - --jp-mirror-editor-error-color: @red; - --jp-mirror-editor-hr-color: var(--color-scale-gray-8); - --jp-vega-background: var(--color-scale-gray-4); - --jp-search-selected-match-background-color: @yellow; - --jp-search-selected-match-color: @crust; - --jp-icon-contrast-color0: var(--color-scale-purple-6); - --jp-icon-contrast-color1: var(--color-scale-green-6); - --jp-icon-contrast-color2: var(--color-scale-pink-6); - --jp-icon-contrast-color3: var(--color-scale-blue-6); - } -} diff --git a/styles/github/catppuccin.user.less b/styles/github/catppuccin.user.less new file mode 100644 index 0000000000..95beb0bb74 --- /dev/null +++ b/styles/github/catppuccin.user.less @@ -0,0 +1,815 @@ +/* ==UserStyle== +@name GitHub Catppuccin +@namespace github.com/catppuccin/userstyles/styles/github +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/github +@version 2026.02.17 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/github/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agithub +@description Soothing pastel theme for GitHub +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document /* Match every page on GitHub except github.com/home, github.com/features/*, and github.com/organizations/plan. */ +regexp( + "https:\/\/github\.com(?!(\/home$|\/features($|\/.*)|\/organizations\/plan)).*$" + ), + domain("gist.github.com"), + domain("docs.github.com"), + domain("viewscreen.githubusercontent.com") { + [data-color-mode][data-color-mode="auto"] { + @media (prefers-color-scheme: light) { + &[data-light-theme="light"] { + #catppuccin(@lightFlavor); + } + &[data-light-theme="dark"] { + #catppuccin(@darkFlavor); + } + } + + @media (prefers-color-scheme: dark) { + &[data-dark-theme="light"] { + #catppuccin(@lightFlavor); + } + &[data-dark-theme="dark"] { + #catppuccin(@darkFlavor); + header[data-color-mode] { + #catppuccin(@darkFlavor); + } + } + } + } + [data-color-mode="light"][data-light-theme="dark"], + [data-color-mode="dark"][data-dark-theme="dark"] { + #catppuccin(@darkFlavor); + } + [data-color-mode="light"][data-light-theme="light"], + [data-color-mode="dark"][data-dark-theme="light"] { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + .cm-placeholder { + color: @subtext0; + } + + accent-color: @accent; + color: @text; + + --color-social-reaction-bg-reacted-hover: fade(@accent, 30%); + --color-notifications-button-hover-bg: fade(@accent, 60%); + --color-workflow-card-header-shadow: rgba(27, 31, 35, 0.04); + --color-icon-directory: var(--fgColor-muted, var(--color-fg-muted)); + --color-calendar-halloween-graph-day-L1-bg: fade( + @accent, + 40% + ) !important; + --color-calendar-halloween-graph-day-L2-bg: fade( + @accent, + 60% + ) !important; + --color-calendar-halloween-graph-day-L3-bg: fade( + @accent, + 80% + ) !important; + --color-calendar-halloween-graph-day-L4-bg: @accent !important; + --color-calendar-winter-graph-day-L1-bg: fade( + @accent, + 40% + ) !important; + --color-calendar-winter-graph-day-L2-bg: fade( + @accent, + 60% + ) !important; + --color-calendar-winter-graph-day-L3-bg: fade( + @accent, + 80% + ) !important; + --color-calendar-winter-graph-day-L4-bg: @accent !important; + --color-calendar-graph-day-bg: @surface0 !important; + --color-calendar-graph-day-border: transparent !important; + --color-calendar-graph-day-L1-bg: fade(@accent, 40%) !important; + --color-calendar-graph-day-L2-bg: fade(@accent, 60%) !important; + --color-calendar-graph-day-L3-bg: fade(@accent, 80%) !important; + --color-calendar-graph-day-L4-bg: @accent !important; + --color-calendar-graph-day-L2-border: transparent !important; + --color-calendar-graph-day-L3-border: transparent !important; + --color-calendar-graph-day-L4-border: transparent !important; + --contribution-default-bgColor-0: fade(@accent, 10%) !important; + --contribution-default-bgColor-1: fade(@accent, 40%) !important; + --contribution-default-bgColor-2: fade(@accent, 60%) !important; + --contribution-default-bgColor-3: fade(@accent, 80%) !important; + --contribution-default-bgColor-4: @accent !important; + --color-user-mention-fg: @accent; + --color-user-mention-bg: fade(@accent, 30%); + --color-dashboard-feed-bg: var(--color-scale-gray-9); + --color-mktg-btn-shadow-outline: rgba(255, 255, 255, 0.25) 0 0 0 1px inset; + --color-marketing-icon-secondary: var(--color-scale-blue-5); + --color-project-header-bg: var(--color-scale-gray-9); + --color-project-sidebar-bg: var(--color-scale-gray-8); + --color-project-gradient-in: var(--color-scale-gray-8); + --color-project-gradient-out: rgba(22, 27, 34, 0); + --color-diff-blob-selected-line-highlight-mix-blend-mode: screen; + --topicTag-borderColor: #0000; + --highlight-neutral-bgColor: fade(@yellow, 30%); + --page-header-bgColor: @crust; + --diffBlob-additionNum-bgColor: fade(@green, 30%); + --diffBlob-additionNum-fgColor: @text; + --diffBlob-additionLine-bgColor: fade(@green, 15%); + --diffBlob-additionWord-bgColor: fade(@green, 30%); + --diffBlob-additionWord-fgColor: @text; + --diffBlob-deletionNum-bgColor: fade(@red, 30%); + --diffBlob-deletionNum-fgColor: @text; + --diffBlob-deletionLine-bgColor: fade(@red, 15%); + --diffBlob-deletionWord-bgColor: fade(@red, 30%); + --diffBlob-deletionWord-fgColor: @text; + --diffBlob-hunkNum-bgColor-rest: fade(@accent, 40%); + --diffBlob-hunkNum-bgColor-hover: fade(@accent, 75%); + --diffBlob-hunkLine-bgColor: fade(@accent, 25%); + --diffBlob-expander-iconColor: @subtext0; + --diffBlob-emptyNum-bgColor: @mantle; + --diffBlob-emptyLine-bgColor: @mantle; + --codeMirror-fgColor: @text; + --codeMirror-bgColor: @base; + --codeMirror-gutters-bgColor: @base; + --codeMirror-gutterMarker-fgColor-default: @base; + --codeMirror-gutterMarker-fgColor-muted: @overlay0; + --codeMirror-lineNumber-fgColor: @overlay1; + --codeMirror-cursor-fgColor: @text; + --codeMirror-selection-bgColor: #388bfd66; + --codeMirror-activeline-bgColor: #6e768166; + --codeMirror-matchingBracket-fgColor: @text; + --codeMirror-lines-bgColor: @base; + --codeMirror-syntax-fgColor-comment: @overlay2; + --codeMirror-syntax-fgColor-constant: @blue; + --codeMirror-syntax-fgColor-entity: @blue; + --codeMirror-syntax-fgColor-keyword: @mauve; + --codeMirror-syntax-fgColor-storage: @peach; + --codeMirror-syntax-fgColor-string: @green; + --codeMirror-syntax-fgColor-support: #79c0ff; + --codeMirror-syntax-fgColor-variable: @peach; + --header-fgColor-default: @text; + --header-fgColor-logo: @text; + --header-bgColor: @crust; + --header-borderColor-divider: #8b949e; + --headerSearch-bgColor: @mantle; + --headerSearch-borderColor: @surface0; + --avatar-bgColor: fade(@text, 26%); + --avatar-borderColor: @surface0; + --avatar-shadow: 0px 0px 0px 2px #0d1117; + --avatarStack-fade-bgColor-default: @surface1; + --avatarStack-fade-bgColor-muted: #21262d; + --control-bgColor-rest: @red; + --control-bgColor-hover: #292e36; + --control-bgColor-active: @surface1; + --control-bgColor-disabled: fade(@mantle, 60%); + --control-bgColor-selected: #161b22; + --control-fgColor-rest: @text; + --control-fgColor-placeholder: #484f58; + --control-fgColor-disabled: fade(@subtext0, 70%); + --control-borderColor-rest: @surface1; + --control-borderColor-emphasis: #666e79; + --control-borderColor-disabled: fade(@surface1, 75%); + --control-borderColor-selected: #f0f6fc; + --control-borderColor-success: @green; + --control-borderColor-danger: @red; + --control-borderColor-warning: @yellow; + --control-iconColor-rest: #848d97; + --control-transparent-bgColor-rest: #0000; + --control-transparent-bgColor-hover: fade(@surface2, 20%); + --control-transparent-bgColor-active: fade(@overlay0, 50%); + --control-transparent-bgColor-disabled: #21262db3; + --control-transparent-bgColor-selected: #b1bac414; + --control-transparent-borderColor-rest: #0000; + --control-transparent-borderColor-hover: #0000; + --control-transparent-borderColor-active: #0000; + --control-danger-fgColor-rest: @red; + --control-danger-fgColor-hover: @crust; + --control-danger-bgColor-hover: fade(@red, 80%); + --control-danger-bgColor-active: @red; + --control-checked-bgColor-rest: @accent; + --control-checked-bgColor-hover: lighten(@accent, 5%); + --control-checked-bgColor-active: lighten(@accent, 5%); + --control-checked-bgColor-disabled: #6e7681; + --control-checked-fgColor-rest: @crust; + --control-checked-fgColor-disabled: #010409; + --control-checked-borderColor-rest: @accent; + --control-checked-borderColor-hover: @accent; + --control-checked-borderColor-active: @accent; + --control-checked-borderColor-disabled: @surface0; + --controlTrack-bgColor-rest: @surface0; + --controlTrack-bgColor-hover: @surface1; + --controlTrack-bgColor-active: @surface2; + --controlTrack-bgColor-disabled: #6e7681; + --controlTrack-fgColor-rest: #848d97; + --controlTrack-fgColor-disabled: @text; + --controlTrack-borderColor-rest: #0000; + --controlTrack-borderColor-disabled: #6e7681; + --controlKnob-bgColor-rest: @base; + --controlKnob-bgColor-disabled: #21262db3; + --controlKnob-bgColor-checked: @text; + --controlKnob-borderColor-rest: @surface2; + --controlKnob-borderColor-disabled: #21262db3; + --controlKnob-borderColor-checked: @blue; + --button-default-fgColor-rest: @text; + --button-default-bgColor-rest: @surface0; + --button-default-bgColor-hover: @surface1; + --button-default-bgColor-active: @surface2; + --button-default-bgColor-selected: @surface2; + --button-default-bgColor-disabled: fade(@surface0, 70%); + --button-default-borderColor-rest: @surface1; + --button-default-borderColor-hover: @surface1; + --button-default-borderColor-active: @surface1; + --button-default-borderColor-disabled: fade(@surface0, 70%); + --button-default-shadow-resting: 0px 0px 0px 0px #000; + --button-primary-fgColor-rest: @base; + --button-primary-fgColor-disabled: fade(@base, 60%); + --button-primary-iconColor-rest: @base; + --button-primary-bgColor-rest: @green; + --button-primary-bgColor-hover: lighten(@green, 5%); + --button-primary-bgColor-active: saturate(@green, 5%); + --button-primary-bgColor-disabled: fade(@green, 70%); + --button-primary-borderColor-rest: @green; + --button-primary-borderColor-hover: @green; + --button-primary-borderColor-active: @green; + --button-primary-borderColor-disabled: fade(@green, 70%); + --button-primary-shadow-selected: 0px 0px 0px 0px #000; + --button-invisible-fgColor-rest: @text; + --button-invisible-fgColor-hover: lighten(@accent, 10%); + --button-invisible-fgColor-disabled: #6e7681; + --button-invisible-iconColor-rest: @overlay2; + --button-invisible-iconColor-hover: #e6edf3; + --button-invisible-iconColor-disabled: #6e7681; + --button-invisible-bgColor-rest: #0000; + --button-invisible-bgColor-hover: #b1bac41f; + --button-invisible-bgColor-active: #b1bac433; + --button-invisible-bgColor-disabled: fade(@surface1, 70%); + --button-invisible-borderColor-rest: #0000; + --button-invisible-borderColor-hover: #0000; + --button-invisible-borderColor-disabled: fade(@surface1, 70%); + --button-outline-fgColor-rest: #388bfd; + --button-outline-fgColor-hover: #58a6ff; + --button-outline-fgColor-active: @text; + --button-outline-fgColor-disabled: #4493f880; + --button-outline-bgColor-rest: #f0f6fc; + --button-outline-bgColor-hover: @surface1; + --button-outline-bgColor-active: #0d419d; + --button-outline-bgColor-disabled: #0d1117; + --button-outline-borderColor-hover: #f0f6fc1a; + --button-outline-borderColor-selected: #f0f6fc1a; + --button-outline-shadow-selected: 0px 0px 0px 0px #000; + --button-danger-fgColor-rest: @red; + --button-danger-fgColor-hover: @base; + --button-danger-fgColor-active: @base; + --button-danger-fgColor-disabled: fade(@red, 50%); + --button-danger-iconColor-rest: @red; + --button-danger-iconColor-hover: @crust; + --button-danger-bgColor-rest: @surface0; + --button-danger-bgColor-hover: @red; + --button-danger-bgColor-active: darken(@red, 5%); + --button-danger-bgColor-disabled: @base; + --button-danger-borderColor-rest: @surface1; + --button-danger-borderColor-hover: @red; + --button-danger-borderColor-active: darken(@red, 5%); + --button-danger-shadow-selected: 0px 0px 0px 0px #000; + --button-inactive-fgColor: #8b949e; + --button-inactive-bgColor: #21262d; + --button-star-iconColor: @yellow; + --buttonCounter-default-bgColor-rest: @surface1; + --buttonCounter-invisible-bgColor-rest: @surface1; + --buttonCounter-primary-bgColor-rest: #04260f33; + --buttonCounter-outline-bgColor-rest: #051d4d33; + --buttonCounter-outline-bgColor-hover: #051d4d33; + --buttonCounter-outline-bgColor-disabled: #1f6feb0d; + --buttonCounter-outline-fgColor-rest: #388bfd; + --buttonCounter-outline-fgColor-hover: #58a6ff; + --buttonCounter-outline-fgColor-disabled: #4493f880; + --buttonCounter-danger-bgColor-hover: fade(@text, 20%); + --buttonCounter-danger-bgColor-disabled: #da36330d; + --buttonCounter-danger-bgColor-rest: #49020233; + --buttonCounter-danger-fgColor-rest: @red; + --buttonCounter-danger-fgColor-hover: @text; + --buttonCounter-danger-fgColor-disabled: fade(@red, 50%); + --focus-outlineColor: @accent; + --menu-bgColor-active: @mantle; + --overlay-bgColor: @base; + --overlay-borderColor: @surface0; + --overlay-backdrop-bgColor: #161b2266; + --selectMenu-borderColor: #484f58; + --selectMenu-bgColor-active: #0c2d6b; + --sideNav-bgColor-selected: #21262d; + --skeletonLoader-bgColor: #161b22; + --timelineBadge-bgColor: @mantle; + --treeViewItem-leadingVisual-iconColor-rest: @subtext0; + --underlineNav-borderColor-active: @accent; + --underlineNav-borderColor-hover: #6e768166; + --underlineNav-iconColor-rest: #848d97; + --selection-bgColor: fade(@accent, 30%); + --reactionButton-selected-bgColor-rest: fade(@accent, 20%); + --reactionButton-selected-bgColor-hover: fade(@accent, 35%); + --reactionButton-selected-fgColor-rest: @accent; + --reactionButton-selected-fgColor-hover: @accent; + --fgColor-default: @text; + --fgColor-muted: @subtext1; + --fgColor-onEmphasis: @base; + --fgColor-white: @text; + --fgColor-disabled: @surface2; + --fgColor-link: @accent; + --fgColor-neutral: @subtext1; + --fgColor-accent: @accent; + --fgColor-success: @green; + --fgColor-attention: @yellow; + --fgColor-severe: @peach; + --fgColor-danger: @red; + --fgColor-open: @green; + --fgColor-closed: @red; + --fgColor-done: @mauve; + --fgColor-sponsors: @pink; + --bgColor-default: @base; + --bgColor-muted: @mantle; + --bgColor-inset: @crust; + --bgColor-emphasis: @overlay2; + --bgColor-inverse: @text; + --bgColor-disabled: #21262db3; + --bgColor-transparent: #0000; + --bgColor-neutral-muted: fade(@surface0, 40%); + --bgColor-neutral-emphasis: @subtext0; + --bgColor-accent-muted: fade(@accent, 20%); + --bgColor-accent-emphasis: @accent; + --bgColor-success-muted: #2ea04326; + --bgColor-success-emphasis: @green; + --bgColor-attention-muted: fade(@yellow, 15%); + --bgColor-attention-emphasis: @yellow; + --bgColor-severe-muted: fade(@peach, 26%); + --bgColor-severe-emphasis: @peach; + --bgColor-danger-muted: fade(@red, 26%); + --bgColor-danger-emphasis: @red; + --bgColor-open-muted: #2ea0431a; + --bgColor-open-emphasis: @green; + --bgColor-closed-muted: fade(@red, 15%); + --bgColor-closed-emphasis: @red; + --bgColor-done-muted: #a371f726; + --bgColor-done-emphasis: @mauve; + --bgColor-sponsors-muted: #db61a21a; + --bgColor-sponsors-emphasis: @pink; + --borderColor-default: @surface1; + --borderColor-muted: @surface0; + --borderColor-emphasis: #484f58; + --borderColor-disabled: #21262db3; + --borderColor-transparent: #0000; + --borderColor-neutral-muted: #6e768166; + --borderColor-neutral-emphasis: #6e7681; + --borderColor-accent-muted: fade(@accent, 50%); + --borderColor-accent-emphasis: @accent; + --borderColor-success-muted: darken(@green, 5%); + --borderColor-success-emphasis: @green; + --borderColor-attention-muted: fade(@flamingo, 30%); + --borderColor-attention-emphasis: @flamingo; + --borderColor-severe-muted: @peach; + --borderColor-severe-emphasis: #bd561d; + --borderColor-danger-muted: @red; + --borderColor-danger-emphasis: @red; + --borderColor-open-muted: darken(@green, 5%); + --borderColor-open-emphasis: @green; + --borderColor-closed-muted: @red; + --borderColor-closed-emphasis: @red; + --borderColor-done-muted: @lavender; + --borderColor-done-emphasis: @mauve; + --borderColor-sponsors-muted: #db61a266; + --borderColor-sponsors-emphasis: @pink; + & when (@flavor = latte) { + --color-ansi-black: @subtext1; + --color-ansi-black-bright: @subtext0; + --color-ansi-gray: @subtext0; + --color-ansi-white: @surface2; + --color-ansi-white-bright: @surface1; + } + & when not(@flavor = latte) { + --color-ansi-black: @surface1; + --color-ansi-black-bright: @surface2; + --color-ansi-gray: @surface2; + --color-ansi-white: @subtext1; + --color-ansi-white-bright: @subtext0; + } + --color-ansi-red: @red; + --color-ansi-red-bright: @red; + --color-ansi-green: @green; + --color-ansi-green-bright: @green; + --color-ansi-yellow: @yellow; + --color-ansi-yellow-bright: @yellow; + --color-ansi-blue: @blue; + --color-ansi-blue-bright: @blue; + --color-ansi-magenta: @pink; + --color-ansi-magenta-bright: @pink; + --color-ansi-cyan: @teal; + --color-ansi-cyan-bright: @teal; + --color-prettylights-syntax-comment: @overlay2; + --color-prettylights-syntax-constant: @blue; + --color-prettylights-syntax-constant-other-reference-link: @blue; + --color-prettylights-syntax-entity: @blue; + --color-prettylights-syntax-storage-modifier-import: @peach; + --color-prettylights-syntax-entity-tag: @blue; + --color-prettylights-syntax-keyword: @mauve; + --color-prettylights-syntax-string: @green; + --color-prettylights-syntax-variable: @peach; + --color-prettylights-syntax-invalid-illegal-text: @red; + --color-prettylights-syntax-invalid-illegal-bg: fade(@red, 15%); + --color-prettylights-syntax-markup-heading: @red; + --color-prettylights-syntax-markup-italic: @yellow; + --color-prettylights-syntax-markup-bold: @yellow; + --color-prettylights-syntax-markup-deleted-text: @text; + --color-prettylights-syntax-markup-deleted-bg: fade(@red, 40%); + --color-prettylights-syntax-markup-inserted-text: @text; + --color-prettylights-syntax-markup-inserted-bg: fade(@green, 40%); + --color-prettylights-syntax-markup-changed-text: @text; + --color-prettylights-syntax-markup-changed-bg: fade(@yellow, 40%); + --color-prettylights-syntax-markup-ignored-text: @text; + --bgColor-white: @base; + --color-scale-white: @base; + --color-scale-gray-3: @overlay2; + --color-scale-gray-5: @overlay0; + --color-scale-gray-6: @surface1; + --color-scale-gray-7: @surface1; + --color-scale-blue-2: @sky; + --color-scale-blue-5: @blue; + --color-scale-green-3: @green; + --color-scale-green-4: @green; + --color-scale-yellow-3: @peach; + --color-scale-orange-4: @peach; + --color-scale-red-4: @red; + --shadow-inset: inset 0px 1px 0px 0px @crust; + --shadow-resting-xsmall: 0px 1px 0px 0px @crust; + --shadow-resting-small: 0px 1px 0px 0px @crust, 0px 1px 3px 0px @crust; + --shadow-resting-medium: 0px 3px 6px 0px @crust; + --shadow-floating-small: + 0px 0px 0px 1px @base, 0px 6px 12px -3px @crust, 0px 6px 18px 0px @crust; + --shadow-floating-medium: + 0px 0px 0px 1px @surface0, 0px 8px 16px -4px @crust, 0px 4px 32px -4px + @crust, 0px 24px 48px -12px @crust, 0px 48px 96px -24px @crust; + --shadow-floating-large: + 0px 0px 0px 1px @surface0, 0px 24px 48px 0px #010409; + --shadow-floating-xlarge: + 0px 0px 0px 1px @surface0, 0px 32px 64px 0px #010409; + --shadow-floating-legacy: 0px 6px 12px -3px @crust, 0px 6px 18px 0px @crust; + --outline-focus: @blue solid 2px; + + /* Feed Links */ + .feed-item-content a code, .feed-item-content a tt { + color: @accent; + } + + /* Customer Terms & Agreements Page: https://github.com/customer-terms */ + .enterprise-customer-agreement { + color: @text !important; + + &:hover { + .octicon, + h3 { + color: @accent !important; + } + } + } + + /* Enhanced Repo Insights Views - https://github.com/orgs/community/discussions/135572 */ + --data-blue-color-emphasis: @accent; + --data-red-color-emphasis: @red; + --data-green-color-emphasis: @green; + + /* Copilot Chat */ + --display-green-fgColor: @green; + --display-teal-fgColor: @teal; + --display-purple-fgColor: @mauve; + --display-blue-fgColor: @blue; + --display-pink-fgColor: @pink; + --display-gray-fgColor: @subtext0; + react-app[app-name="copilot-immersive-v1"], + copilot-dashboard-entrypoint { + button { + color: @text; + } + } + + /* docs.github.com */ + --color-fg-default: @text; + --color-canvas-default: @base; + --color-canvas-subtle: @mantle; + + --tooltip-fgColor: @base; + --tooltip-bgColor: @overlay2; + + /* Refined GitHub */ + --rgh-heat-color: @peach; + + .turbo-progress-bar { + background-color: @accent; + } + + .form-select { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + img[src="https://github.githubassets.com/assets/mona-loading-default-c3c7aad1282f.gif"] { + content: url("https://giscus.catppuccin.com/assets/loading_48x48.gif"); + } + + /* Header when logged out */ + .header-search-button { + svg { + fill: @text !important; + } + } + .HeaderMenu-toggle-bar { + border-color: @text; + } + .notification-indicator .mail-status { + background-image: linear-gradient( + @accent, + darken(@accent, 5%) + ); + } + + .CheckStep { + .ansifg-r { + color: var(--color-ansi-red); + } + .ansifg-y { + color: var(--color-ansi-yellow); + } + .ansifg-g { + color: var(--color-ansi-green); + } + .ansifg-b { + color: var(--color-ansi-blue); + } + .ansifg-c { + color: var(--color-ansi-cyan); + } + .ansifg-m { + color: var(--color-ansi-magenta); + } + .ansifg-gr { + color: var(--color-ansi-gray); + } + } + + .js-activity-overview-graph .js-highlight-blob { + fill: @accent; + stroke: @accent; + } + + .subnav-link.selected { + border-bottom-color: @accent; + } + + /* Pull request check in progress indicator */ + [stroke="#DBAB0A" i] { + stroke: fade(@yellow, 70%) !important; + } + [fill="#DBAB0A" i] { + fill: @yellow !important; + } + + /* Issue timeline icon */ + [class*="prc-Timeline-TimelineBadge"], .TimelineItem-Badge { + /* Completed */ + path[d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm1.5 0a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm10.28-1.72-4.5 4.5a.75.75 0 0 1-1.06 0l-2-2a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018l1.47 1.47 3.97-3.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"], + /* Duplicate / Not planned */ + path[d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM3.965 13.096a6.5 6.5 0 0 0 9.131-9.131ZM1.5 8a6.474 6.474 0 0 0 1.404 4.035l9.131-9.131A6.499 6.499 0 0 0 1.5 8Z"], + /* Reopen */ + path[d="M5.029 2.217a6.5 6.5 0 0 1 9.437 5.11.75.75 0 1 0 1.492-.154 8 8 0 0 0-14.315-4.03L.427 1.927A.25.25 0 0 0 0 2.104V5.75A.25.25 0 0 0 .25 6h3.646a.25.25 0 0 0 .177-.427L2.715 4.215a6.491 6.491 0 0 1 2.314-1.998ZM1.262 8.169a.75.75 0 0 0-1.22.658 8.001 8.001 0 0 0 14.315 4.03l1.216 1.216a.25.25 0 0 0 .427-.177V10.25a.25.25 0 0 0-.25-.25h-3.646a.25.25 0 0 0-.177.427l1.358 1.358a6.501 6.501 0 0 1-11.751-3.11.75.75 0 0 0-.272-.506Z"], + path[d="M9.06 9.06a1.5 1.5 0 1 1-2.12-2.12 1.5 1.5 0 0 1 2.12 2.12Z"] { + fill: @base; + } + } + } +} + +@-moz-document url-prefix( + "https://viewscreen.githubusercontent.com/markdown/mermaid" + ) { + [data-color-mode="auto"] { + @media (prefers-color-scheme: light) { + &[data-light-theme="light"] { + #catppuccin(@lightFlavor); + } + &[data-light-theme="dark"] { + #catppuccin(@darkFlavor); + } + } + + @media (prefers-color-scheme: dark) { + &[data-dark-theme="light"] { + #catppuccin(@lightFlavor); + } + &[data-dark-theme="dark"] { + #catppuccin(@darkFlavor); + } + } + } + [data-color-mode="light"][data-light-theme="dark"], + [data-color-mode="dark"][data-dark-theme="dark"] { + #catppuccin(@darkFlavor); + } + [data-color-mode="light"][data-light-theme="light"], + [data-color-mode="dark"][data-dark-theme="light"] { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + + ::selection { + background-color: fade(@accent, 30%); + } + + background-color: @base; + + --color-btn-text: @text; + --color-btn-bg: @surface0; + --color-btn-border: @surface1; + --color-btn-hover-bg: @surface1; + --color-btn-hover-border: @surface2; + --color-btn-active-bg: @surface2; + --color-btn-selected-bg: @surface2; + --color-btn-counter-bg: @surface2; + --color-btn-outline-text: @accent; + --color-fg-muted: @subtext1; + --button-default-fgColor-rest: @text; + --button-default-bgColor-rest: @surface0; + --button-default-bgColor-hover: @surface1; + --button-default-bgColor-active: @surface2; + --button-default-bgColor-selected: @surface2; + --button-default-bgColor-disabled: fade(@surface0, 70%); + --button-default-borderColor-rest: @surface1; + --button-default-borderColor-hover: @surface1; + --button-default-borderColor-active: @surface1; + --button-default-borderColor-disabled: fade(@surface0, 70%); + + #diagram { + .node rect, + .node circle, + .node ellipse, + .node polygon, + .node path { + fill: fade(@accent, 10%); + stroke: @accent; + } + + .cluster rect { + fill: @surface0; + stroke: @surface2; + } + + .label text, + span, + p { + fill: @text; + color: @text; + } + + .flowchart-link { + stroke: @subtext0; + } + .marker { + stroke: @subtext0; + fill: @subtext0; + } + + .edgeLabel { + background-color: @crust; + p { + background-color: @surface2; + } + } + } + + .octicon { + fill: var(--color-fg-muted) !important; + } + } +} + +@-moz-document regexp( + "https:\/\/notebooks\.githubusercontent\.com\/view\/ipynb.*" + ) { + :root { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --jp-border-color0: var(--color-scale-gray-7); + --jp-border-color1: var(--color-scale-gray-7); + --jp-border-color2: var(--color-scale-gray-8); + --jp-border-color3: var(--color-scale-gray-9); + --jp-ui-font-color0: @text; + --jp-ui-font-color1: fade(@text, 87%); + --jp-ui-font-color2: fade(@text, 54%); + --jp-ui-font-color3: fade(@text, 28%); + --jp-ui-inverse-font-color0: @crust; + --jp-ui-inverse-font-color1: fade(@crust, 80%); + --jp-ui-inverse-font-color2: fade(@crust, 50%); + --jp-ui-inverse-font-color3: fade(@crust, 30%); + --jp-content-font-color0: @text; + --jp-content-font-color1: @text; + --jp-content-font-color2: fade(@text, 70%); + --jp-content-font-color3: fade(@text, 50%); + --jp-content-link-color: @sapphire; + --jp-layout-color0: @base !important; + --jp-layout-color1: var(--color-scale-gray-9); + --jp-layout-color2: var(--color-scale-gray-8); + --jp-layout-color3: var(--color-scale-gray-7); + --jp-layout-color4: var(--color-scale-gray-6); + --jp-inverse-layout-color0: var(--color-scale-white); + --jp-inverse-layout-color1: var(--color-scale-white); + --jp-inverse-layout-color2: var(--color-scale-gray-2); + --jp-inverse-layout-color3: var(--color-scale-gray-4); + --jp-inverse-layout-color4: var(--color-scale-gray-6); + --jp-brand-color0: var(--color-scale-blue-7); + --jp-brand-color1: var(--color-scale-blue-5); + --jp-brand-color2: var(--color-scale-blue-3); + --jp-brand-color3: var(--color-scale-blue-1); + --jp-brand-color4: var(--color-scale-blue-0); + --jp-accent-color0: var(--color-scale-green-7); + --jp-accent-color1: var(--color-scale-green-5); + --jp-accent-color2: var(--color-scale-green-3); + --jp-accent-color3: var(--color-scale-green-1); + --jp-warn-color0: var(--color-scale-orange-7); + --jp-warn-color1: var(--color-scale-orange-5); + --jp-warn-color2: var(--color-scale-orange-3); + --jp-warn-color3: var(--color-scale-orange-1); + --jp-error-color0: var(--color-scale-red-7); + --jp-error-color1: var(--color-scale-red-5); + --jp-error-color2: var(--color-scale-red-3); + --jp-error-color3: var(--color-scale-red-1); + --jp-success-color0: var(--color-scale-green-7); + --jp-success-color1: var(--color-scale-green-5); + --jp-success-color2: var(--color-scale-green-3); + --jp-success-color3: var(--color-scale-green-1); + --jp-info-color0: var(--color-scale-blue-7); + --jp-info-color1: var(--color-scale-blue-5); + --jp-info-color2: var(--color-scale-blue-3); + --jp-info-color3: var(--color-scale-blue-1); + --jp-cell-editor-background: @mantle; + --jp-cell-editor-border-color: var(--color-scale-gray-7); + --jp-cell-editor-box-shadow: inset 0 0 2px var(--color-scale-blue-3); + --jp-cell-prompt-not-active-font-color: fade(@text, 50%); + --jp-cell-inprompt-font-color: var(--color-scale-blue-6); + --jp-cell-outprompt-font-color: var(--color-scale-coral-6); + --jp-notebook-multiselected-color: fade(@overlay2, 14%); + --jp-rendermime-error-background: fade(@red, 18%); + --jp-rendermime-table-row-background: var(--color-scale-gray-9); + --jp-rendermime-table-row-hover-background: fade(@surface2, 14%); + --jp-dialog-background: fade(@crust, 60%); + --jp-toolbar-box-shadow: 0px 0px 2px 0px fade(@crust, 80%); + --jp-input-box-shadow: inset 0 0 2px var(--color-scale-blue-3); + --jp-input-background: var(--color-scale-gray-8); + --jp-input-active-box-shadow-color: fade(@blue, 30%); + --jp-editor-selected-focused-background: fade(@blue, 14%); + --jp-mirror-editor-keyword-color: var(--color-scale-green-5); + --jp-mirror-editor-atom-color: var(--color-scale-blue-3); + --jp-mirror-editor-number-color: var(--color-scale-green-4); + --jp-mirror-editor-def-color: var(--color-scale-blue-6); + --jp-mirror-editor-variable-color: var(--color-scale-gray-3); + --jp-mirror-editor-variable-2-color: var(--color-scale-blue-4); + --jp-mirror-editor-variable-3-color: var(--color-scale-green-6); + --jp-mirror-editor-punctuation-color: var(--color-scale-blue-4); + --jp-mirror-editor-property-color: var(--color-scale-blue-4); + --jp-mirror-editor-operator-color: @mauve; + --jp-mirror-editor-comment-color: @subtext0; + --jp-mirror-editor-string-color: @peach; + --jp-mirror-editor-string-2-color: var(--color-scale-purple-3); + --jp-mirror-editor-meta-color: @mauve; + --jp-mirror-editor-qualifier-color: var(--color-scale-gray-5); + --jp-mirror-editor-builtin-color: var(--color-scale-green-6); + --jp-mirror-editor-bracket-color: var(--color-scale-gray-2); + --jp-mirror-editor-tag-color: var(--color-scale-blue-7); + --jp-mirror-editor-attribute-color: var(--color-scale-blue-7); + --jp-mirror-editor-header-color: var(--color-scale-blue-5); + --jp-mirror-editor-quote-color: var(--color-scale-green-3); + --jp-mirror-editor-link-color: var(--color-scale-blue-7); + --jp-mirror-editor-error-color: @red; + --jp-mirror-editor-hr-color: var(--color-scale-gray-8); + --jp-vega-background: var(--color-scale-gray-4); + --jp-search-selected-match-background-color: @yellow; + --jp-search-selected-match-color: @crust; + --jp-icon-contrast-color0: var(--color-scale-purple-6); + --jp-icon-contrast-color1: var(--color-scale-green-6); + --jp-icon-contrast-color2: var(--color-scale-pink-6); + --jp-icon-contrast-color3: var(--color-scale-blue-6); + } +} diff --git a/styles/gleam.run/README.md b/styles/gleam.run/README.md new file mode 100644 index 0000000000..644600dafc --- /dev/null +++ b/styles/gleam.run/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for gleam.run + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/gleam.run/catppuccin.user.less b/styles/gleam.run/catppuccin.user.less new file mode 100644 index 0000000000..20479d2985 --- /dev/null +++ b/styles/gleam.run/catppuccin.user.less @@ -0,0 +1,173 @@ +/* ==UserStyle== +@name gleam.run Catppuccin +@namespace github.com/catppuccin/userstyles/styles/gleam.run +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/gleam.run +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/gleam.run/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agleam.run +@description Soothing pastel theme for gleam.run +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("gleam.run") { + @import url("https://prismjs.catppuccin.com/variables.important.css"); + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + + code.hljs { + background: none !important; + } + + body { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + + &.theme-light { + #catppuccin(@lightFlavor); + } + &.theme-dark { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --color-text-main: @text; + + --color-underwater-blue: @base; + --color-black: @mantle; + --color-blacker: @crust; + --color-white: @text; + --color-faff-pink: @accent; + --color-aged-plastic-yellow: @text; + --color-code-grey: @subtext1; + --color-code-blue: @sky; + --color-code-green: @green; + --color-code-dark-grey: @overlay2; + --color-code-yellow: @yellow; + --color-code-red: @red; + --color-code-orange: @peach; + --color-code-light-pink: @pink; + + --charcoal: var(--color-charcoal); + --underwater-blue: var(--color-underwater-blue); + --black: var(--color-black); + --blacker: var(--color-blacker); + --white: var(--color-white); + --faff-pink: var(--color-faff-pink); + --aged-plastic-yellow: var(--color-aged-plastic-yellow); + --unnamed-blue: var(--color-unnamed-blue); + --code-grey: var(--color-code-grey); + --code-blue: var(--color-code-blue); + --code-green: var(--color-code-green); + --code-dark-grey: var(--color-code-dark-grey); + --code-yellow: var(--color-code-yellow); + --code-red: var(--color-code-red); + --code-orange: var(--color-code-orange); + --code-light-pink: var(--color-code-light-pink); + + img[src="https://gleam.run/images/lucy/lucy.svg"], + img[src="/images/lucy/lucy.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + .hero-lucy-container:hover .hero-lucy, .logo:hover .footer-lucy { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .pride .page-header { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .home-waves { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + p > code, li > code { + background-color: @surface0; + opacity: 1; + } + + /* gleam.run home */ + .button { + color: @crust !important; + background-color: @accent; + } + .home-still-here { + .button { + background-color: @text; + color: @crust; + } + + /* Wanna keep in touch? */ + input[type="submit"] { + background-color: @text !important; + color: @crust; + } + input[type="email"] { + background-color: @mantle; + color: @text; + } + } + + /* tour.gleam.run */ + --color-text: @text; + --color-link: @text; + --color-background: @base; + --color-background-dim: @crust; + --color-text-accent: @accent; + --color-accent-muted: fade(@accent, 50%); + + --code-background: @base; + --code-token-base: @text; + --color-code: @accent; + + /* packages.gleam.run */ + --page-background: @base; + --card-background: @surface0; + --card-border: @surface1; + --card-border-highlight: @surface2; + --text-regular: @text; + --text-highlight: @text; + img[src="/static/packages-icon.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + .darkmode-toggle { + filter: @crust-filter; + } + .page-nav a { + color: @crust; + } + .package-button img { + filter: @accent-filter; + } + } +} diff --git a/styles/gmail/README.md b/styles/gmail/README.md new file mode 100644 index 0000000000..28dee0a018 --- /dev/null +++ b/styles/gmail/README.md @@ -0,0 +1,39 @@ + + + +

+ Logo
+ + Catppuccin for Gmail + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + +> [!NOTE] +> Switch to the default dark theme via the **Settings** > **Themes** > **View all** for the best experience! + +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) + +## 💖 Past Maintainer +- [isabelroses](https://github.com/isabelroses) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/gmail/catppuccin.user.less b/styles/gmail/catppuccin.user.less new file mode 100644 index 0000000000..8fcc5c816a --- /dev/null +++ b/styles/gmail/catppuccin.user.less @@ -0,0 +1,947 @@ +/* ==UserStyle== +@name Gmail Catppuccin +@namespace github.com/catppuccin/userstyles/styles/gmail +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/gmail +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/gmail/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agmail +@description Soothing pastel theme for Gmail +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("mail.google.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + input, + textarea { + caret-color: @text; + } + + #input-styling { + input, + select, + button { + background-color: @mantle; + color: @text; + border-color: @surface0; + border-style: solid; + border-width: 1px; + box-shadow: none; + } + } + + * { + text-shadow: none !important; + } + + /* Gmail logo */ + [src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r5.png"], + [src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_dark_1x_r5.png"] { + height: unset !important; + width: unset !important; + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + /* Tooltips */ + .T-ays-iP, + .gb_Ac { + background-color: @crust; + color: @text; + } + + /* Buttons */ + + /* Solid primary */ + .T-I-atl { + background-color: @accent; + color: @crust; + } + + /* Transparent primary */ + .l0, + div.b8 .a8k, + .bAo > .ad { + color: @accent; + + &::before { + background-color: @accent; + } + } + + /* Transparent secondary */ + .bs0 > .acM, + .bti > .btg, + .a8Y > .T-I-ax7 { + color: @text; + + /* Disabled */ + &.acN { + color: @subtext0; + } + + &:hover::before { + background-color: @overlay2; + } + } + + /* Header and sidebars */ + .w-asV, + .bkL, + .bhZ.bym, + .bhZ.bjB, + .bhZ.bym.baA { + background-color: @mantle; + } + /* Header icons */ + .gb_Kc svg, + .gb_Pc.gb_Uc svg, + .gb_Lc .gb_rd .gb_sd, + .gb_Lc .gb_rd .gb_Kc, + .gb_Lc .gb_rd .gb_ud, + .gb_Pc.gb_Uc .gb_sd { + color: @text; + } + /* Search mail input */ + .gb_Kc .gb_hd { + background-color: @surface1; + + .gb_je, + .gb_qe, + .gsan_a, + .gsas_a, + svg { + color: @text; + } + } + /* Search mail input on focus */ + .gb_hd.gb_id { + background-color: @base; + } + /* Active search / filter modal */ + .gssb_c { + /* Icons */ + button svg, + .asor { + filter: @text-filter; + } + + /* Recent searches */ + .aRp, + .gssb_e, + .gssb_m { + background-color: @base; + color: @text; + } + + /* Hovered recent searches */ + .gssb_i { + background-color: @surface0; + + > .gssb_a { + border-left-color: @accent; + } + + /* X icon */ + .gsaq_b { + filter: @text-filter; + } + } + + .aSP, + .gssb_e { + border-color: @surface2; + } + + /* Separator */ + .gssb_l { + background-color: @surface0; + } + + /* Search results */ + + /* Icons */ + .gsoi_0, + .asor_o, + .gsoi_msra { + filter: @text-filter; + } + + /* People involved */ + .asor_e { + color: @subtext0; + } + } + /* Pill filters */ + .H2 { + background-color: @base; + border-color: @surface0; + color: @subtext1; + fill: @subtext1; + + &:hover { + background-color: @mantle; + } + + &.bws { + background-color: @accent; + color: @crust; + fill: @crust; + + .HV { + filter: @crust-filter; + } + + &:hover .H1 { + background-color: darken(@accent, 5%); + } + } + } + .aqc .H2 { + border-color: @text; + color: @text; + + &.bws { + background-color: @surface2; + color: @mantle; + } + } + /* Advanced search/filters modal */ + .ZF-z6, + .ZF-zT, + .ZF-Av .lJ, + .ZF-Av .lN { + background-color: @base; + + &, + .boo > .ZG, + .boo .aQl > .J-JN-M-I-Jm, + .boo .aaa > .J-JN-M-I-Jm, + .boo .ZE > .J-JN-M-I-Jm { + color: @text; + } + + .btl.acK, + .btn::before { + filter: @text-filter; + } + + /* Text inputs */ + .nr { + background-color: @base; + color: @text; + + &:focus { + box-shadow: inset 0 -1px 0 0 @accent; + } + } + + /* Calendar input */ + .bs5::after { + filter: @text-filter; + } + .J-JB-KA, + .J-JB-KA-JS, + .J-JB-KA-Jk, + .J-JB-KA-LG { + background-color: @base; + color: @text; + border-color: @surface0; + + /* Past days */ + .J-JB-KA-Ku-Kk { + color: @subtext0; + } + /* Future days */ + .J-JB-KA-a1R-JB.J-JB-KA-LH, + .J-JB-KA-a1R-JB.J-JB-KA-Ku-Kk, + .J-JB-KA-JB.J-JB-KA-a1R-JB { + color: @subtext1; + } + + /* Hovered day */ + .J-JB-KA-JB:not(.J-JB-KA-K8, .J-JB-KA-KO):hover { + color: @crust; + + &::before { + background-color: fade(@accent, 70%); + } + } + + /* Selected day */ + .J-JB-KA-KO { + color: @crust; + + &::before { + background-color: @accent; + } + } + + /* Unselected today */ + .J-JB-KA-K8 { + color: @crust; + + &::before { + background-color: @overlay2; + } + } + } + + /* Checkbox inputs */ + .bs1 + .bs3, + .btj + .aD { + color: @text; + + &::before { + filter: @text-filter; + } + } + + /* Dropdown/select inputs */ + .J-JN-M-I { + color: @text; + } + } + + /* Sidebar selected item */ + .TK .TO.nZ:active, + .TK .TO.ol:active, + .TK .TO.nZ, + .TK .TO.ol, + .byl .TK .nZ.aBP, + .byl .TK .nZ.aS3, + .byl .TK .nZ.aS4, + .byl .TK .nZ.aS5, + .byl .TK .nZ.aS6, + .VDSZAf.H5o3mc { + background-color: @surface0; + } + .TO.NQ, + .n6 .ah9:hover, + .n6 .ah9.aiu:hover, + .n6 .ah9:focus, + .TK .TO:active, + .n6 .ah9.aiu:active, + .CL:hover, + .H5o3mc:not(.VDSZAf):hover, + .CL.NQ, + .H5o3mc:not(.VDSZAf).NQ { + background-color: @surface1; + } + .byl .TK .TO.nZ > .aHS-bnt .n0, + .TK .nZ > .aHS-bnt .bsU, + .byl .TK .nZ.aS3 .nU > .n0, + .TK .nZ.aS3 .bsU, + .byl .TK .nZ.aS4 .nU > .n0, + .TK .nZ.aS4 .bsU, + .byl .TK .nZ.aS5 .nU > .n0, + .TK .nZ.aS5 .bsU, + .byl .TK .nZ.aS6 .nU > .n0, + .TK .nZ.aS6 .bsU, + .TK .TO.nZ .nU > .n0, + .TK .ol.NQ .nU > .n0, + .TK .TO.ol .nU > .n0, + .TK .nZ .bsU, + .TK .ol .bsU, + .VDSZAf.H5o3mc > .Q7, + .TO .nU > .n0, + .TO.NQ .nU > .n0, + .TO.nZ .nU > .n0, + .ah9 > .CJ, + .n3 > .CL > .CK, + .aAv, + .bsU { + color: @text; + } + /* Icons */ + .nZ > .TN.aHS-bnt .qj, + .TO:not(.nZ) > .TN > .qj:not([style*="background-color"]), + .n6 .n4 .G-asx, + .aAw .aAu, + .pM, + .TO.nZ > .TN > .qj, + .n3 .CL::before { + filter: @text-filter; + } + + /* Compose email button */ + .z0 > .L3 { + background-color: @accent; + color: @crust; + + &:focus { + background-color: @text; + } + } + .WR .z0 > .L3::before, + .WR.anZ .z0 > .L3::before { + filter: @crust-filter; + } + + /* Top section of inbox */ + .bkK > .nH { + background-color: @surface0; + + /* Icons */ + .bzn, + .aqJ .amJ, + .adg .adk { + filter: @text-filter; + } + } + /* Inbox categories */ + .aKx > .aKz { + color: @text; + } + /* Icons */ + .aAy > div { + filter: @text-filter; + } + /* Currently selected category */ + .J-KU-KO::before { + background-color: @text; + } + /* Inbox categories hover */ + .aRz.J-KU:hover { + background-color: @surface1; + } + /* Email count / pagination */ + div[aria-label="Show more messages"] { + .Dj { + color: @subtext1; + } + + &::before { + background-color: @text; + } + } + .h0 { + color: @subtext1; + } + /* Inbox footer */ + .md.mj, + .aeU .ma, + .ma .mb, + .ae3 .l6, + .l9, + .l8, + .aiD { + color: @subtext1; + } + /* Storage progress bar */ + .aiC { + background-color: @overlay0; + + .aiA { + background-color: @subtext0; + } + } + /* External link icon */ + .aiz { + filter: @text-filter; + } + + /* Read emails */ + .yO { + background-color: @base; + color: @text; + + box-shadow: inset 0 -1px 0 0 @surface0; + + &:hover { + box-shadow: + inset 1px 0 0 @surface0, + inset -1px 0 0 @surface0, + 0 0 4px 0 @surface1, + 0 0 6px 2px @surface1; + } + } + /* Read email text */ + .zE { + color: @text; + } + // Select icon + .xY > .T-Jo, + td.apU > .T-KT.aXw::before, + // Important icon + .pG .a9q, + // Delete/trash icon + .aqN, + // Hover action icons + .bqY li { + filter: @text-filter; + } + /* Important icon filled, star icon filled */ + .ha .a9q.pH, + .a9q.pH, + .aoj, + td.apU > .T-KT.T-KT-Jp::before { + filter: @yellow-filter; + } + .pG:hover > .a9q::before { + background-color: fade(@yellow, 30%); + } + /* Read email dates */ + .yO > .xW { + color: @subtext0; + } + /* Read email summary truncated */ + .y2 { + color: @subtext1; + } + /* Selected unread emails */ + .x7 { + background-color: @accent; + color: @mantle; + + /* Dates */ + .xW { + color: @crust; + } + + // Select icon + .xY > .T-Jo, + // Star icon + td.apU > .T-KT.aXw::before, + // Important icon + .pG .a9q, + // Delete/trash icon + .aqN, + // Hover action icons + .bqY li { + filter: @crust-filter; + } + } + /* Unsubscribe button */ + .aOd.T-I { + color: @text; + box-shadow: inset 0 0 0 1px @surface2; + } + /* Draft text */ + .boq { + color: @red; + } + /* No drafts message, trash 30 days message */ + .TD, + .Tm .ya { + background-color: @surface1; + color: @text; + } + /* Your social/promotions/updates tab is empty */ + .aRs { + background-color: @base; + color: @subtext0; + + .aRv { + color: @text; + } + .aRq { + color: @accent; + } + } + /* You could lose access banner */ + .GR { + background-color: @base; + + /* Primary text */ + .GX { + color: @text; + } + /* Subtext */ + .GT { + color: @subtext1; + } + + /* Dismiss button */ + .GW { + color: @text; + + &::before { + background-color: @text; + } + } + /* Add recovery info button */ + .GV { + color: @accent; + + &::before { + background-color: @accent; + } + } + } + /* Attachments chips */ + .brc { + box-shadow: inset 0 0 0 1px @surface0; + color: @text; + + &:hover { + background-color: @surface0; + } + } + + /* Floating menu */ + .J-M, + .OO.Pa { + background-color: @surface1; + + /* Menu section header */ + .J-awr, + .asc { + color: @subtext1; + } + + /* Menu item */ + + .J-N, + .J-Ks-KO .J-N-Jz, + .J-N-JT .J-N-Jz, + .J-N-JW .J-N-Jz, + .J-LC, + .J-JK, + .bmz { + color: @text; + } + /* Disabled */ + .J-N-JE .J-N-atj, + .J-N-JE .J-N-Jz { + color: @subtext0 !important; + } + + /* Checkmark, arrow, checkbox, star, calendar icon */ + .J-Ks-KO .J-N-Jo, + .asi .J-Ks-KO::before, + .J-Ph-hFsbo, + .J-LC-Jo, + .bi4 > .T-KT:not(.T-KT-Jp, .byM)::before, + .aaA.mYVwse, + .J-N-JX { + filter: @text-filter; + } + .bmz.bjF::before { + border-color: @subtext0; + } + + /* Hovered menu item */ + .J-N-JT, + .J-N-JW, + .J-LC-JT, + .J-LC-JW, + .J-JK-JT, + .J-JK-JW, + .bmz.bk5 { + background-color: @surface2; + border-color: @overlay1; + } + + /* Menu section divider */ + .J-Kh { + border-top-color: @surface2; + } + } + /* Modal search input */ + .agd .J-M-JJ input { + background-color: @surface1; + color: @text; + } + .bqf { + box-shadow: inset 0 -2px 0 0 @surface2; + + &:focus { + box-shadow: inset 0 -2px 0 0 @accent; + } + } + /* Magnifying glass icon */ + .A0 { + filter: @text-filter; + } + /* Edit label modal */ + div.Kj-JD { + background-color: @base; + + /* Edit label text */ + span.Kj-JD-K7-K0 { + color: @text; + } + + /* Close X icon */ + span.Kj-JD-K7-Jq::after { + filter: @text-filter; + } + + #input-styling(); + + /* Input labels */ + div.Kj-JD-Jz { + color: @subtext1; + } + + /* Cancel button */ + div.Kj-JD-Jl > button, + .bBh .Kj-JD-Jl > .J-at1-auR { + color: @subtext1; + } + + /* Save button */ + div.Kj-JD-Jl > button.J-at1-atl, + div.Kj-JD-Jl > button.J-at1-auR { + background-color: @accent; + color: @crust; + } + } + + /* Toast notifications */ + .bAp.b8.UC .vh { + background-color: @crust; + color: @text; + } + /* Close icon */ + .b8 .bBe .bBf { + filter: @text-filter; + } + + /* Compose mail window */ + /* Top header bar */ + .Hy.Hy .m, + .IG { + background-color: @mantle; + + .Hp, + .zu, + .H, + .Iy .az9 { + color: @text; + } + + .Hm img, + .SB, + .b7 .mK, + .bAm .aaq .mK, + .Un .mK, + .HX .mK, + .HQ .Un::after { + filter: @text-filter; + } + } + .aaZ, + .Ap, + .Am, + .aDg > .aDj, + .aoP .Ar, + .wO, + .aoT, + .agP, + .aGb, + .GQ { + color: @text; + caret-color: @text; + + &, + &::before { + background: @base; + } + } + .gQ, + .gO, + .oL { + color: @subtext0; + } + /* Bottom toolbar icons */ + .aaA, + .btC .dv, + .btC .og.T-I-J3, + .btC .J-N-JX.og.T-I-J3, + .btC .Y1, + .btC .Xv.T-I.J-JN-M-I > .J-JN-M-I-JG, + .J-JN-M-I-JG, + .J-Z-M-I-J6-H > .J-Z-M-I-JG { + filter: @text-filter; + } + /* Floating toolbar (expanded window) */ + .J-Z { + background-color: @mantle; + + .J-Z-I, + .J-Z-M-I { + color: @subtext1; + } + } + /* Send button */ + .gU .v7.T-I:not(.btz), + .gU .hG:not(.v6) { + background-color: @accent; + color: @crust; + } + .hG > .G-asx, + .SI .hG > .G-asx { + filter: @crust-filter; + } + /* Contact autofill */ + .afC, + .bvx { + background: @mantle; + + /* Contact list item */ + .agJ { + .aL8, + .aXS { + color: @text; + } + + &:hover { + background: @base; + } + } + } + + --pkw-background: @mantle; + --pkw-outline: @surface0; + --pkw-outline-variant: @surface0; + --pkw-on-surface-variant: @text; + /* Contact chip */ + .agh, + .bbV { + background: @base; + + .afV { + background: @base; + color: @text; + + &:hover { + background: @surface0; + color: @text; + } + } + } + + /* Settings */ + .dt { + color: @text; + } + /* Navigation header */ + .v { + /* Tabs */ + .fY, + .f1 { + background-color: @surface0; + + .f0 { + color: @text; + } + } + + /* Currently selected tab */ + .fZ { + box-shadow: inset 0 -2px 0 0 @accent; + } + } + /* Main panel */ + .r4 { + background-color: @base; + color: @text; + + /* Dividers */ + .r7 td, + .Jb .J0:not(:last-child) { + border-bottom-color: @surface0; + } + + /* Links */ + .r7 .e, + .sA, + .r4 .e, + .el { + color: @accent; + } + + #input-styling(); + .qK, + .qL { + background-color: @mantle; + } + .nr, + .Ar { + background-color: @base; + color: @text; + border-color: @surface0 !important; + } + /* Some buttons */ + .Uu { + box-shadow: inset 0 0 0 1px @surface0; + color: @accent; + } + } + /* Labels page */ + .alO { + background-color: @base; + color: @text; + + .rb { + color: @subtext1; + } + + /* Table items */ + .To.Ze { + background-color: @surface0; + } + + /* Links */ + .alP { + color: @accent; + } + + /* Dividers */ + .rZ { + background-color: @surface0; + } + } + + /* Confirm popup modal */ + div[aria-modal="true"] { + --gm3-dialog-refactored-container-color: @base; + --gm3-dialog-refactored-supporting-text-color: @text; + --gm3-dialog-refactored-headline-color: @text; + + /* Buttons */ + [data-mdc-dialog-action="ok"] { + background-color: @accent; + --gm3-button-text-label-text-color: @crust; + --gm3-button-text-hover-label-text-color: @crust; + --gm3-button-text-pressed-label-text-color: @crust; + } + + [data-mdc-dialog-action="cancel"] { + --gm3-button-text-label-text-color: @subtext1; + --gm3-button-text-hover-label-text-color: @text; + --gm3-button-text-focus-label-text-color: @text; + --gm3-button-text-pressed-label-text-color: @text; + + &:hover, + &:focus, + &:active { + background-color: @surface0; + } + } + } + } +} diff --git a/styles/go.dev/README.md b/styles/go.dev/README.md new file mode 100644 index 0000000000..aab20e9dca --- /dev/null +++ b/styles/go.dev/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for go.dev + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [Flapperoo](https://github.com/Flapperoo) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/go.dev/catppuccin.user.less b/styles/go.dev/catppuccin.user.less new file mode 100644 index 0000000000..26a8ced0fa --- /dev/null +++ b/styles/go.dev/catppuccin.user.less @@ -0,0 +1,663 @@ +/* ==UserStyle== +@name go.dev Catppuccin +@namespace github.com/catppuccin/userstyles/styles/go.dev +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/go.dev +@version 2026.01.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/go.dev/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ago.dev +@description Soothing pastel theme for go.dev +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("go.dev") { + :root[data-theme="auto"], + :root:not([data-theme]) { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + :root[data-theme="dark"] { + #catppuccin(@darkFlavor); + } + :root[data-theme="light"] { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + background-color: @base; + + --abbey: @mantle; + --black-1: @crust; + --color-border: @surface2; + --color-background: @base; + --color-background-accented: @mantle; + --color-background-banner: @mantle; + --color-background-card-footer: @crust; + --color-background-code: @surface0; // Code Snippets + --color-background-info: @surface1; + --color-background-alert: fade(@red, 40%); + --color-background-inverted: @crust; + --color-background-logo: @text; + --color-background-playground-input: @mantle; + --color-brand-primary: @accent; // Affects most Go-Color Elements + --color-button: @accent; + --color-button-accented: @accent; + --color-button-text: @crust; + --color-button-text-disabled: @subtext0; + --color-bright-text-link: @accent; + --color-text: @text; + --color-text-link: @accent; + --color-text-subtle: @subtext1; + --focus-box-shadow: 0 0 0.0625rem 0.0625rem @accent; // Only modifies color; + --gray-2: @surface0; + --gray-3: @text; + --gray-6: @crust; + --pink: @red; + --turq-dark: @accent; + --white: @text; + --border-code: 0.0625rem @surface2 solid; + + .btn { + background: @accent; + color: @crust; + } + // /dl page in go.dev + .Downloads { + div.filename img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + table.downloadtable { + --color-background-accented: @surface0; + } + } + // Main Page Footer & Pkg.go Footer + .Footer, + .go-Footer { + background-color: @mantle; + + img.Footer-gopher, + img.go-Footer-gopher { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img.go-Footer-googleLogoImg, + img.Footer-googleLogoImg { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + // Main Page Footer Get Started + .GettingStartedGo-primaryCta { + color: @crust; + } + + // Main Page Carousel + .GoCarousel button { + background-color: @text; + color: @crust; + } + // Download button in /learn + .Learn-heroAction { + background-color: @accent; + + .js-downloadBtn { + color: @crust; + } + } + // Active indicator in /learn + .LearnNav .active svg circle { + fill: @accent; + } + + .LeftNav a.active, + .LeftNav a:hover { + background-color: fade(@accent, 30%); + + img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + // /solutions/use-cases & Why Use Go / 4 icons + .MarketingCardList, + .WhyGo-reasons .WhyGo-reasonIcon { + img.LightMode-img[alt="cloud icon"], + img.DarkMode-img[alt="cloud icon"], + img[alt="Sphere"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img.LightMode-img[alt="CLI icon"], + img.DarkMode-img[alt="CLI icon"], + img[alt="Command Line"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img.LightMode-img[alt="web dev icon"], + img.DarkMode-img[alt="web dev icon"], + img[alt="Code"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img.LightMode-img[alt="ops icon"], + img.DarkMode-img[alt="ops icon"], + img[alt="Sphere"][src="/images/icons/gear-dark.svg"], + img[alt="Sphere"][src="/images/icons/gear.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + // Mobile Nav Drawer + .NavigationDrawer { + .NavigationDrawer-header { + border-bottom-color: @surface2; + } + + // Drawer Selection + .NavigationDrawer-listItem--active { + background-color: fade(@accent, 30%); + } + } + // /play + .PlayPage { + .lines div { + color: @overlay1; // Line numbers + } + } + // Run Button for Code Snippet + .Playground-runButton { + border-color: @accent; + } + // Go Main Header + .Site-header, + .go-Header { + background: @crust; + + .Header-menuItem--active a, + .go-Header-menuItem--active a { + border-bottom-color: @accent; + } + // Mobile Burger Icon + button.Header-navOpen--white, + button.go-Header-navOpen--white { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + filter: none; + } + } + // 'What's Possible With Go' + .WhyGo-reasons { + .WhyGo-reasonPackagesHeader img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .WhyGo-reasonShowMoreLink a { + color: @crust; + } + + img.WhyGo-reasonShowMoreImg { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + // /doc/install icon + img.CopyPaste-icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + // Go Main Logo + .Site-header .Header-logo, + .NavigationDrawer-logo, + .go-Header .go-Header-logo, + .go-NavigationDrawer .go-NavigationDrawer-logo, + .top-bar img.gopherlogo, + .go-Main-headerLogo, + .SearchResults-headerLogo img[alt="Go"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .SiteBreadcrumb .BreadcrumbNav-li::after { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + // Menu Active Selector + img.TabSection-underline { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + // Code Snippet Highlights + pre { + .comment { + color: @overlay2; + } + ins { + color: @blue; + } + } + // Companies in Main Page Contrast + & when (@flavor = latte) { + .WhoUsesCaseStudyList-caseStudyLink { + background-color: @surface0; + } + } + } +} + +@-moz-document domain("pkg.go.dev") { + :root[data-theme="auto"], + :root:not([data-theme]) { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + :root[data-theme="dark"] { + #catppuccin(@darkFlavor); + } + :root[data-theme="light"] { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + + // Pkg.go Carousel + .go-Carousel { + .go-Carousel-nextSlide img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + + .go-Carousel-prevSlide img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + } + // Alert Chips + .go-Chip--alert { + color: @crust; + } + // Pkg.go Header + .go-Header { + .go-Header-submenu { + border-color: @accent; + } + + // Triangle Icon Accented + .go-Header-menuItem:hover a img.go-Icon { + filter: @accent-filter !important; + } + } + // Icons + .go-Icon { + &:not(.go-Icon--accented) { + filter: @text-filter; + } + &.go-Icon--accented { + filter: @accent-filter; + } + } + // Pkg.go Fixed Header + .go-Main-header[data-raised="true"] { + background-color: @crust; + } + // Pkg.go Package Documentation Mobile Dropdown Icon + .go-Main-navMobile label.go-Label::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + // Pkg.go Mobile Navigation Drawer + .go-NavigationDrawer { + .go-NavigationDrawer-header { + border-bottom-color: @overlay2; + } + + .go-NavigationDrawer-listItem--active { + background-color: fade(@accent, 30%); + } + } + //Pkg.go Search Bar + .go-SearchForm { + input[type="search"]::-webkit-search-cancel-button { + display: none; + } + } + + .go-Footer { + background-color: @crust; + } + // Pkg.go Shortcut Helpers + .go-ShortcutKey::after { + background-color: @text; + } + // External Link Icon + .Homepage-helpLink, + .UnitFiles-titleLink, + a[href="https://www.meetup.com/pro/go"], + a[href="https://github.com/golang/go/wiki/Conferences"] { + @svg: escape( + '' + ); + + img, + img.go-Icon, + img.go-Icon:not(.go-Icon--accented) { + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + + a::after { + background-image: url("data:image/svg+xml,@{svg}"); + } + } + // 'Jump to' Dialog - Desktop + .JumpDialog { + .JumpDialog-active { + color: @crust; + } + } + // Pkg.go Package Search Results + .SearchResults-header { + input[type="search"]::-webkit-search-cancel-button { + display: none; + } + } + // Search Icon in pkg.go - Accented + form.Homepage-search--symbol::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + // Pkg.go Package Details Section + .UnitMeta { + .UnitMeta-links { + img.depsdev-Icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + } + // Deprecated Chip + span.Documentation-deprecatedTag { + color: @crust; + } + // Code Snippet Highlights + pre { + .comment { + color: @overlay2; + } + ins { + color: @blue; + } + } + } +} + +@-moz-document url-prefix("https://go.dev/tour") { + :root[data-theme="auto"], + :root:not([data-theme]) { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + :root[data-theme="dark"] { + #catppuccin(@darkFlavor); + } + :root[data-theme="light"] { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + + #editor-container { + #left-side { + .slide-content { + background-color: @base; + + a { + color: @accent; + } + + code { + background-color: @accent !important; + color: @crust; + } + + h2, + li, + p { + color: @text; + } + + pre { + background-color: @mantle; + color: @text; + } + } + + .module-bar { + background-color: @mantle; + color: @text; + + a { + color: @accent; + } + } + } + + #right-side { + background-color: @base; + + #explorer { + background-color: @mantle; + } + + #file-editor { + .CodeMirror { + background-color: @base; + + .CodeMirror-lines { + background-color: @base; + color: @text; + + .CodeMirror-linenumber { + color: @overlay1; + } + + span.cm-atom { + color: @blue; + } + + span.cm-comment { + color: @peach; + } + + span.cm-keyword { + color: @mauve; + } + + span.cm-number { + color: @green; + } + + span.cm-string { + color: @red; + } + + span.cm-variable { + color: @text; + } + } + } + + .CodeMirror-gutters { + background-color: @mantle; + border-right-color: @surface2; + } + } + + #file-menu { + background-color: @mantle; + } + + .output { + background-color: @base; + + span.stdout { + color: @subtext0; + } + + span.system { + color: @text; + } + } + + a { + background-color: @text; + color: @crust; + } + + a#run { + background-color: @accent; + } + + pre.info { + background-color: @surface0 !important; + } + } + + div[vertical-slide], + div[horizontal-slide] { + background-color: @surface2; + } + } + + .toc { + background-color: @base; + + .toc-page.ng-scope { + background-color: @mantle; + color: @text; + } + + .toc-module.ng-scope { + background-color: @mantle; + span.ng-binding { + background-color: @base; + color: @accent; + } + + .toc-lesson span.ng-binding { + background-color: @mantle; + color: @text; + } + } + } + + .top-bar { + background-color: @crust; + color: @text; + + span.nav { + svg { + fill: @text; + } + } + } + + .wrapper.ng-scope { + background-color: @base; + + .container { + background-color: @base; + + .lesson.ng-scope { + background-color: @mantle; + } + + h1, + p { + color: @text; + } + + a { + color: @accent; + } + } + } + } +} diff --git a/styles/google-drive/README.md b/styles/google-drive/README.md new file mode 100644 index 0000000000..4f3ff0ade2 --- /dev/null +++ b/styles/google-drive/README.md @@ -0,0 +1,36 @@ + + + +

+ Logo
+ + Catppuccin for Google Drive + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainers +- [r58Playz](https://github.com/r58Playz) +- [WalkQuackBack](https://github.com/WalkQuackBack) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/google-drive/catppuccin.user.less b/styles/google-drive/catppuccin.user.less new file mode 100644 index 0000000000..dedab12ae4 --- /dev/null +++ b/styles/google-drive/catppuccin.user.less @@ -0,0 +1,676 @@ +/* ==UserStyle== +@name Google Drive Catppuccin +@namespace github.com/catppuccin/userstyles/styles/google-drive +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google-drive +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google-drive/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle-drive +@description Soothing pastel theme for Google Drive +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("drive.google.com") { + .vhoiae { + &.KkxPLb { + #catppuccin(@lightFlavor); + } + + &.LgGVmb, .yYWAMb.bvmRsc, .dif24c.bvmRsc { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + + // TODO: Try to make use `#lib.defaults()` here, but it causes issues with the color scheme (see below). + // #lib.defaults(); // Color scheme is already set by Google Drive; setting it here causes bugs, and there are no known side effects as Google does not use native UI elements (which would reflect `color-scheme` state and cause potential issues). + + ::selection { + background-color: fade(@accent, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + --dt-on-background: @text; + --dt-on-background-secondary: @subtext0; + --dt-background: @base; + --dt-on-surface: @text; + --dt-inverse-surface: @text; + --dt-on-surface-secondary: @subtext0; + --dt-on-surface-variant: @text; + --dt-surface-variant: @surface0; + --dt-inverse-on-surface: @surface0; + --dt-surface: @base; + --dt-surface-tint: @accent; + --dt-shadow-elevation-1: + 0px 3px 1px -2px fade(@base, 20%), 0px 2px 2px 0px fade(@base, 14%), 0px + 1px 5px 0px fade(@base, 12%); + --dt-shadow-elevation-2: + 0px 2px 4px -1px fade(@base, 20%), 0px 4px 5px 0px fade(@base, 14%), 0px + 1px 10px 0px fade(@base, 12%); + --dt-shadow-elevation-3: + 0px 5px 5px -3px fade(@base, 20%), 0px 8px 10px 1px fade(@base, 14%), 0px + 3px 14px 2px fade(@base, 12%); + --dt-shadow-elevation-4: + 0px 5px 5px -3px fade(@base, 20%), 0px 8px 10px 1px fade(@base, 14%), 0px + 3px 14px 2px fade(@base, 12%); + --dt-shadow-elevation-5: + 0px 8px 10px -6px fade(@base, 20%), 0px 16px 24px 2px fade(@base, 14%), + 0px 6px 30px 5px fade(@base, 12%); + --dt-surface-container-lowest: @crust; + --dt-surface-container-low: @mantle; + --dt-surface-container: @surface0; + --dt-surface-container-high: @surface1; + --dt-surface-container-highest: @surface2; + --dt-surface-dim: @crust; + --dt-surface-bright: @base; + --dt-on-primary-container: @text; + --dt-primary-container-icon: @text; + --dt-primary-container-link: @text; + --dt-primary: @accent; + --dt-primary-action: @accent; + --dt-primary-action-stateful: @accent; + --dt-primary-outline: @accent; + --dt-primary-action-state-layer: @accent; + --dt-primary-container: @surface0; + --dt-on-primary: @base; + --dt-primary-icon: @base; + --dt-primary-link: @base; + --dt-on-secondary-container: @text; + --dt-secondary-container-icon: @text; + --dt-secondary-container-link: @text; + --dt-secondary: @accent; + --dt-secondary-action: @accent; + --dt-secondary-action-stateful: @accent; + --dt-secondary-outline: @accent; + --dt-secondary-action-state-layer: @accent; + --dt-secondary-container: @surface0; + --dt-on-secondary: @base; + --dt-secondary-icon: @base; + --dt-secondary-link: @base; + --dt-on-tertiary-container: @text; + --dt-tertiary-container-icon: @text; + --dt-tertiary-container-link: @text; + --dt-tertiary: @accent; + --dt-tertiary-action: @accent; + --dt-tertiary-action-stateful: @accent; + --dt-tertiary-outline: @accent; + --dt-tertiary-action-state-layer: @accent; + --dt-tertiary-container: @surface0; + --dt-on-tertiary: @base; + --dt-tertiary-icon: @base; + --dt-tertiary-link: @base; + --dt-on-neutral-container: @text; + --dt-neutral-container-icon: @text; + --dt-neutral-container-link: @text; + --dt-neutral: @surface0; + --dt-neutral-action: @text; + --dt-neutral-action-stateful: @text; + --dt-neutral-outline: @surface0; + --dt-neutral-action-state-layer: @surface0; + --dt-neutral-container: @surface0; + --dt-on-neutral: @text; + --dt-neutral-icon: @surface0; + --dt-neutral-link: @surface0; + --dt-on-warning-container: @yellow; + --dt-warning-container-icon: @yellow; + --dt-warning-container-link: @yellow; + --dt-warning: @yellow; + --dt-warning-action: @yellow; + --dt-warning-action-stateful: @yellow; + --dt-warning-outline: @yellow; + --dt-warning-action-state-layer: @yellow; + --dt-warning-container: @surface0; + --dt-on-warning: @base; + --dt-warning-icon: @yellow; + --dt-warning-link: @yellow; + --dt-on-error-container: @red; + --dt-error-container-icon: @red; + --dt-error-container-link: @red; + --dt-error: @red; + --dt-error-action: @red; + --dt-error-action-stateful: @red; + --dt-error-outline: @red; + --dt-error-action-state-layer: @surface1; + --dt-error-container: @surface1; + --dt-on-error: @base; + --dt-error-icon: @base; + --dt-error-link: @base; + --dt-mime-type-blue: @blue; + --dt-mime-type-dark-blue: @blue; + --dt-mime-type-green: @green; + --dt-mime-type-grey: @overlay0; + --dt-mime-type-purple: @mauve; + --dt-mime-type-deep-purple: @mauve; + --dt-mime-type-red: @red; + --dt-mime-type-yellow: @yellow; + --dt-disabled: @overlay0; + --dt-on-disabled: @text; + --dt-outline: @overlay0; + --dt-outline-variant: @surface2; + --dt-light-info-banner-button: @text; + --dt-light-neutral-banner-button: @text; + --dt-light-success-banner-button: @green; + --dt-light-warning-banner-button: @yellow; + --dt-light-error-banner-button: @red; + + --gm3-sys-color-background: @base; + --gm3-sys-color-background-rgb: #lib.rgbify(@base)[]; + --gm3-sys-color-error: @red; + --gm3-sys-color-error-rgb: #lib.rgbify(@red)[]; + --gm3-sys-color-error-container: @surface2; + --gm3-sys-color-error-container-rgb: #lib.rgbify(@surface2)[]; + --gm3-sys-color-inverse-on-surface: @surface0; + --gm3-sys-color-inverse-on-surface-rgb: #lib.rgbify(@surface0)[]; + --gm3-sys-color-inverse-primary: red; + --gm3-sys-color-inverse-primary-rgb: 255, 0, 0; + --gm3-sys-color-inverse-surface: @text; + --gm3-sys-color-inverse-surface-rgb: #lib.rgbify(@text)[]; + --gm3-sys-color-on-background: @text; + --gm3-sys-color-on-background-rgb: #lib.rgbify(@text)[]; + --gm3-sys-color-on-error: @base; + --gm3-sys-color-on-error-rgb: #lib.rgbify(@base)[]; + --gm3-sys-color-on-error-container: @red; + --gm3-sys-color-on-error-container-rgb: #lib.rgbify(@red)[]; + --gm3-sys-color-on-primary: @base; + --gm3-sys-color-on-primary-rgb: #lib.rgbify(@base)[]; + --gm3-sys-color-on-primary-container: @text; + --gm3-sys-color-on-primary-container-rgb: #lib.rgbify(@text)[]; + --gm3-sys-color-on-primary-fixed: @base; + --gm3-sys-color-on-primary-fixed-rgb: #lib.rgbify(@base); + --gm3-sys-color-on-primary-fixed-variant: @base; + --gm3-sys-color-on-primary-fixed-variant-rgb: #lib.rgbify(@base); + --gm3-sys-color-on-secondary: @base; + --gm3-sys-color-on-secondary-rgb: #lib.rgbify(@base)[]; + --gm3-sys-color-on-secondary-container: @text; + --gm3-sys-color-on-secondary-container-rgb: #lib.rgbify(@text)[]; + --gm3-sys-color-on-secondary-fixed: @base; + --gm3-sys-color-on-secondary-fixed-rgb: #lib.rgbify(@base)[]; + --gm3-sys-color-on-secondary-fixed-variant: @base; + --gm3-sys-color-on-secondary-fixed-variant-rgb: #lib.rgbify(@base)[]; + --gm3-sys-color-on-surface: @text; + --gm3-sys-color-on-surface-rgb: #lib.rgbify(@text)[]; + --gm3-sys-color-on-surface-variant: @text; + --gm3-sys-color-on-surface-variant-rgb: #lib.rgbify(@text)[]; + --gm3-sys-color-on-tertiary: @base; + --gm3-sys-color-on-tertiary-rgb: #lib.rgbify(@base)[]; + --gm3-sys-color-on-tertiary-container: @text; + --gm3-sys-color-on-tertiary-container-rgb: #lib.rgbify(@text)[]; + --gm3-sys-color-on-tertiary-fixed: @base; + --gm3-sys-color-on-tertiary-fixed-rgb: #lib.rgbify(@base)[]; + --gm3-sys-color-on-tertiary-fixed-variant: @base; + --gm3-sys-color-on-tertiary-fixed-variant-rgb: #lib.rgbify(@base)[]; + --gm3-sys-color-outline: @overlay0; + --gm3-sys-color-outline-rgb: #lib.rgbify(@overlay0)[]; + --gm3-sys-color-outline-variant: @surface2; + --gm3-sys-color-outline-variant-rgb: #lib.rgbify(@surface2)[]; + --gm3-sys-color-primary: @accent; + --gm3-sys-color-primary-rgb: #lib.rgbify(@accent)[]; + --gm3-sys-color-primary-container: @surface0; + --gm3-sys-color-primary-container-rgb: #lib.rgbify(@surface0)[]; + --gm3-sys-color-primary-fixed: @accent; + --gm3-sys-color-primary-fixed-rgb: #lib.rgbify(@accent)[]; + --gm3-sys-color-primary-fixed-dim: @accent; + --gm3-sys-color-primary-fixed-dim-rgb: #lib.rgbify(@accent)[]; + --gm3-sys-color-secondary: @accent; + --gm3-sys-color-secondary-rgb: #lib.rgbify(@accent); + --gm3-sys-color-secondary-container: @surface0; + --gm3-sys-color-secondary-container-rgb: #lib.rgbify(@surface0)[]; + --gm3-sys-color-secondary-fixed: #c2e7ff; + --gm3-sys-color-secondary-fixed-rgb: 194, 231, 255; + --gm3-sys-color-secondary-fixed-dim: #7fcfff; + --gm3-sys-color-secondary-fixed-dim-rgb: 127, 207, 255; + --gm3-sys-color-surface: @base; + --gm3-sys-color-surface-rgb: #lib.rgbify(@base)[]; + --gm3-sys-color-surface-bright: @base; + --gm3-sys-color-surface-bright-rgb: #lib.rgbify(@base)[]; + --gm3-sys-color-surface-container: @surface0; + --gm3-sys-color-surface-container-rgb: #lib.rgbify(@surface0)[]; + --gm3-sys-color-surface-container-high: @surface1; + --gm3-sys-color-surface-container-high-rgb: #lib.rgbify(@surface1)[]; + --gm3-sys-color-surface-container-highest: @surface2; + --gm3-sys-color-surface-container-highest-rgb: #lib.rgbify(@surface2)[]; + --gm3-sys-color-surface-container-low: @mantle; + --gm3-sys-color-surface-container-low-rgb: #lib.rgbify(@mantle)[]; + --gm3-sys-color-surface-container-lowest: @crust; + --gm3-sys-color-surface-container-lowest-rgb: #lib.rgbify(@crust)[]; + --gm3-sys-color-surface-dim: @crust; + --gm3-sys-color-surface-dim-rgb: #lib.rgbify(@crust)[]; + --gm3-sys-color-surface-tint: @accent; + --gm3-sys-color-surface-tint-rgb: #lib.rgbify(@accent)[]; + --gm3-sys-color-surface-variant: @surface0; + --gm3-sys-color-surface-variant-rgb: #lib.rgbify(@surface0)[]; + --gm3-sys-color-tertiary: @accent; + --gm3-sys-color-tertiary-rgb: #lib.rgbify(@accent)[]; + --gm3-sys-color-tertiary-container: @surface0; + --gm3-sys-color-tertiary-container-rgb: #lib.rgbify(@surface0); + --gm3-sys-color-tertiary-fixed: @accent; + --gm3-sys-color-tertiary-fixed-rgb: #lib.rgbify(@accent)[]; + --gm3-sys-color-tertiary-fixed-dim: @accent; + --gm3-sys-color-tertiary-fixed-dim-rgb: #lib.rgbify(@accent)[]; + + & when (@flavor = latte) { + --dt-scrim: fade(@text, 50%); + --dt-scrim-2x: fade(@text, 50%); + --gm3-sys-color-scrim: @text; + --gm3-sys-color-scrim-rgb: #lib.rgbify(@text)[]; + --gm3-sys-color-shadow: @text; + --gm3-sys-color-shadow-rgb: #lib.rgbify(@text)[]; + } + + & when not(@flavor = latte) { + --dt-scrim: fade(@base, 50%); + --dt-scrim-2x: fade(@base, 50%); + --gm3-sys-color-scrim: @base; + --gm3-sys-color-scrim-rgb: #lib.rgbify(@base)[]; + --gm3-sys-color-shadow: @base; + --gm3-sys-color-shadow-rgb: #lib.rgbify(@base)[]; + } + + /* Settings menu title & back button */ + .gb_Pc svg, + .gb_Uc.gb_Zc svg, + .gb_Pc .gb_gd .gb_od, + .gb_Pc .gb_gd .gb_Oc, + .gb_Pc .gb_gd .gb_id, + .gb_Uc.gb_Zc .gb_od { + color: @text !important; + } + + /* Settings menu Storage total used icon */ + .VBJTHe svg path { + fill: @text; + } + + /* Drive sync checkbox disabled */ + .MlG5Jc gm-checkbox[disabled] ~ .VfPpkd-ga, + .MlG5Jc gm-radio[disabled] ~ .VfPpkd-ga, + .MlG5Jc .VfPpkd-Qa-Qu-db ~ .VfPpkd-ga, + .MlG5Jc .VfPpkd-Eg-Qu-db ~ .VfPpkd-ga { + color: @subtext0 !important; + } + + /* Quota hover box-shadow */ + .KnDsIf:hover, + .KnDsIf:focus, + .al9hA { + box-shadow: 0 2px 6px @overlay0; + } + + /* Quota Google Drive */ + .kJzqSb { + color: @blue; + } + + /* Quota Google Photos */ + .L1pqQb { + color: @yellow; + } + + /* Quota Gmail */ + .au0LDe { + color: @red; + } + + /* Google Account outline */ + .gb_Ea.gb_i { + border-color: @overlay0; + background-color: @surface0; + } + .gb_Ea.gb_i:focus, + .gb_Ea.gb_i:hover { + border-color: @subtext0; + } + + /* File preview (separate tab) background */ + &.ndfHFb-c4YZDc-uoC0bf.ndfHFb-c4YZDc-i5oIFb .ndfHFb-c4YZDc-bnBfGc { + background-color: @base; + } + .a-b-uoC0bf.a-b-L .a-b-jl /* File preview (in Drive) background */ { + background-color: fade(@base, 85%); + } + + /* File preview (separate tab) top bar */ + &.ndfHFb-c4YZDc-uoC0bf.ndfHFb-c4YZDc-i5oIFb + .ndfHFb-c4YZDc-Wrql6b.ndfHFb-c4YZDc-Wrql6b-Hyc8Sd, + .a-b-uoC0bf.a-b-L .a-b-K.a-b-K-Hyc8Sd /* File preview (in Drive) top bar */ + { + background-color: fade(@base, 85%); + } + + /* File preview (separate tab) bottom bar */ + .ndfHFb-c4YZDc-q77wGc .ndfHFb-c4YZDc-DARUcf-NnAfwf-i5oIFb, + .ndfHFb-c4YZDc-q77wGc .ndfHFb-c4YZDc-nJjxad-nK2kYb-i5oIFb, + .a-b-vo .a-b-La-yc-L, + .a-b-vo .a-b-Kb-ac-L /* File preview (in Drive) bottom bar */ { + background-color: fade(@base, 85%); + color: @text !important; + /* File preview (separate tab) page input */ + .ndfHFb-c4YZDc-DARUcf-NGme3c-YPqjbf, + .a-b-La-su-vb /* File preview (in Drive) page input */ { + background-color: fade(@base, 50%); + color: @text; + } + } + + /* File preview (separate tab) share button */ + &.ndfHFb-c4YZDc-uoC0bf .zAYgkb-uoC0bf .tk3N6e-LgbsSe, + &.ndfHFb-c4YZDc-uoC0bf + .zAYgkb-mAKE4e-LQLjdd-xl07Ob-LgbsSe.VIpgJd-Kb3HCc-xl07Ob-LgbsSe, + .a-b-uoC0bf .ae-uoC0bf .g-d, + .a-b-uoC0bf + .ae-mAKE4e-Hc-w-d.h-R-w-d /* File preview (in Drive) share button */ { + background-color: @accent; + color: @base; + /* File preview (separate tab) share icon */ + .IyROMc-euCgFf-LJSvSb, + .ae-c /* File preview (in Drive) share icon */ { + & when (@flavor = latte) { + filter: brightness(0) invert(97%) sepia(4%) saturate(152%) hue-rotate( + 183deg + ) brightness(94%) contrast(106%); + } + & when (@flavor = frappe) { + filter: brightness(0) invert(15%) sepia(8%) saturate(2252%) + hue-rotate(192deg) brightness(98%) contrast(85%); + } + & when (@flavor = macchiato) { + filter: brightness(0) invert(13%) sepia(26%) saturate(823%) + hue-rotate(195deg) brightness(90%) contrast(92%); + } + & when (@flavor = mocha) { + filter: brightness(0) invert(10%) sepia(36%) saturate(650%) + hue-rotate(201deg) brightness(90%) contrast(93%); + } + } + /* File preview (separate tab) share triangle */ + .VIpgJd-Kb3HCc-xl07Ob-LgbsSe-j4gsHd, + .h-R-w-d-Re /* File preview (in Drive) share triangle */ { + border-color: @base transparent !important; + } + } + /* File preview (separate tab) share Quick options */ + .zAYgkb-NhlrFc-xl07Ob-BvBYQ, + .h-w.ae-NhlrFc-w /* File preview (in Drive) share Quick options */ { + background-color: @base; + * { + color: @text !important; + } + /* File preview (in Drive) share Quick options current share level container */ + .h-v-x { + opacity: 100%; + } + /* File preview (separate tab) share Quick options divider */ + .zAYgkb-NhlrFc-gqMrKb, + .ae-NhlrFc-Yo /* File preview (in Drive) share Quick options divider */ { + border-color: @overlay0; + } + /* File preview (separate tab) share Quick options row hover */ + .VIpgJd-j7LFlb-sn54Q, + .h-v-pc /* File preview (in Drive) share Quick options row hover */ { + background-color: @surface0; + } + /* File preview (separate tab) share Quick options row icon */ + .IyROMc-euCgFf-LJSvSb, + .ba-ea-i /* File preview (in Drive) share Quick options row icon */ { + & when (@flavor = latte) { + filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) + hue-rotate(196deg) brightness(90%) contrast(86%); + } + & when (@flavor = frappe) { + filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) + hue-rotate(192deg) brightness(104%) contrast(92%); + } + & when (@flavor = macchiato) { + filter: brightness(0) invert(84%) sepia(13%) saturate(579%) + hue-rotate(193deg) brightness(99%) contrast(94%); + } + & when (@flavor = mocha) { + filter: brightness(0) invert(84%) sepia(19%) saturate(370%) + hue-rotate(192deg) brightness(98%) contrast(95%); + } + } + } + /* File preview (separate tab) Print, Download, 3 dots */ + .ndfHFb-c4YZDc-Bz112c:not([style]), + .ndfHFb-c4YZDc-Bz112c[style*="googlematerialicons"], + .ndfHFb-c4YZDc-Bz112c[style="user-select: none;"], + .ndfHFb-c4YZDc-Wrql6b-htvI8d-wcotoc-wHEfpf-ndfHFb-Bz112c + /* File preview (separate tab) Save to drive */, + .ndfHFb-c4YZDc-Wrql6b-w37qKe-Bz112c + /* File preview (separate tab) Save to drive (clicked) */, + /* File preview (in Drive) Print, Download, 3 dots */ + .a-b-c:not([style]), + .a-b-c[style*="googlematerialicons"], + .a-b-c[style="user-select: none;"], + .a-b-K-zc-Eb-bg-a-c /* File preview (in Drive) Save to drive */, + .a-b-K-X-c /* File preview (in Drive) Save to drive (clicked) */ { + & when (@flavor = latte) { + filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) hue-rotate( + 196deg + ) brightness(90%) contrast(86%); + } + & when (@flavor = frappe) { + filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) hue-rotate( + 192deg + ) brightness(104%) contrast(92%); + } + & when (@flavor = macchiato) { + filter: brightness(0) invert(84%) sepia(13%) saturate(579%) hue-rotate( + 193deg + ) brightness(99%) contrast(94%); + } + & when (@flavor = mocha) { + filter: brightness(0) invert(84%) sepia(19%) saturate(370%) hue-rotate( + 192deg + ) brightness(98%) contrast(95%); + } + } + /* File preview (separate tab) File title */ + .ndfHFb-c4YZDc-Wrql6b-V1ur5d, + .a-b-cg-Zf /* File preview (in Drive) File title */ { + color: @text; + } + /* File preview (separate tab) 3 dots menu item hover */ + .ndfHFb-c4YZDc-j7LFlb:hover, + .a-b-v:hover /* File preview (in Drive) 3 dots menu item hover */ { + background-color: @surface0; + } + /* File preview (separate tab) No preview available */ + .ndfHFb-c4YZDc-EglORb-haAclf, + .a-b-Tb-j /* File preview (in Drive) No preview available */ { + background-color: @surface0; + color: @text; + /* File preview (separate tab) No preview available Download */ + .ndfHFb-c4YZDc-bN97Pc-nupQLb-LgbsSe, + .a-b-x-rb-d /* File preview (in Drive) No preview available Download */ { + background-color: @surface1; + color: @text; + text-shadow: none; + border-color: transparent; + &:hover { + background-color: @surface2; + background-image: none; + } + } + /* File preview (separate tab) No preview available Download icon */ + .ndfHFb-c4YZDc-bN97Pc-nupQLb-LgbsSe-Bz112c, + .a-b-x-rb-d-c /* File preview (in Drive) No preview available Download icon */ + { + & when (@flavor = latte) { + filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) + hue-rotate(196deg) brightness(90%) contrast(86%); + } + & when (@flavor = frappe) { + filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) + hue-rotate(192deg) brightness(104%) contrast(92%); + } + & when (@flavor = macchiato) { + filter: brightness(0) invert(84%) sepia(13%) saturate(579%) + hue-rotate(193deg) brightness(99%) contrast(94%); + } + & when (@flavor = mocha) { + filter: brightness(0) invert(84%) sepia(19%) saturate(370%) + hue-rotate(192deg) brightness(98%) contrast(95%); + } + } + } + /* File preview (in Drive) text document */ + .a-b-r-x, + .ndfHFb-c4YZDc-fmcmS-bN97Pc /* File preview (separate tab) text document */ + { + &, + pre { + background-color: @surface0 !important; + color: @text !important; + } + } + /* File preview (in Drive) comment on image */ + .Yk-efwuC { + background-color: @surface0 !important; + /* File preview (in Drive) comment on image person */ + .Yk-Vq7Udc { + background-color: @surface0 !important; + [data-name] { + color: @text !important; + } + /* Comment text */ + .Yk-eKrold-Sg.Yk-eKrold-Sg { + color: @text !important; + } + /* Comment date */ + .Yk-eKrold-bi { + color: @subtext0 !important; + } + } + /* File preview (in Drive) comments */ + .Yk-efwuC-vb-Gd { + background-color: @surface0; + &, + * { + color: @text !important; + } + [role="textbox"] { + background-color: @surface1; + border-color: @overlay0; + &::before { + color: @subtext0 !important; + } + } + [role="button"] { + background-color: @surface1 !important; + /* needed to override border-color */ + &[role="button"] { + border-color: @overlay0 !important; + } + &[aria-disabled="true"] { + background-color: @surface1 !important; + color: @subtext0 !important; + } + } + } + } + + /* Drive sharing window material icon */ + .SbpzSe .VfPpkd-StrnGf-rymPhb-f7MjDc { + color: @accent; + } + + /* Drive sharing window access hover */ + .lfDNBb:hover, + .lfDNBb:focus-within, + .ZelW3e:hover .FYhd9e, + .ZelW3e:focus-within .FYhd9e /* Drive sharing window person row hover */ { + background-color: @surface0; + } + + /* Drive sharing iframe (in Drive) */ + .lb-k-x { + color-scheme: unset; + } + /* Drive sharing iframe (file preview separate tab) */ + .XKSfm-Sx9Kwc-bN97Pc { + color-scheme: auto; /* unset doesn't work? */ + } + [role="tooltip"], + .Kk7lMc-Ca /* Drive applications sidebar tooltip */, + .gb_2e /* Drive google account tooltip */ { + background-color: @surface2; + *, + & { + color: @text !important; + } + border-color: transparent; + /* File preview (separate tab) tooltip arrow */ + .tk3N6e-suEOdc-jQ8oHc, + .tk3N6e-suEOdc-ez0xG { + border-color: @surface2 transparent !important; + } + } + + /* Drive applications sidebar close button */ + .Kk7lMc-QWPxkf-d-j .Yb-Il-d .Yb-Il-d-c-j { + background-color: @surface0; + path:nth-child(1) { + stroke: @text; + } + } + /* Drive applications sidebar get addons */ + .Yb-Il-d#qJTzr .Yb-Il-d-c-j { + & when (@flavor = latte) { + filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) hue-rotate( + 196deg + ) brightness(90%) contrast(86%); + } + & when (@flavor = frappe) { + filter: brightness(0) invert(80%) sepia(7%) saturate(1070%) hue-rotate( + 192deg + ) brightness(104%) contrast(92%); + } + & when (@flavor = macchiato) { + filter: brightness(0) invert(84%) sepia(13%) saturate(579%) hue-rotate( + 193deg + ) brightness(99%) contrast(94%); + } + & when (@flavor = mocha) { + filter: brightness(0) invert(84%) sepia(19%) saturate(370%) hue-rotate( + 192deg + ) brightness(98%) contrast(95%); + } + } + /* Drive applications sidebar close button white background */ + .Yb-Il-d-c-Nd { + background-color: transparent; + } + + /* Drive icon */ + [src="//ssl.gstatic.com/images/branding/product/1x/drive_2020q4_48dp.png"] { + @darkBlue: mix(@blue, @base, 80%); + @darkGreen: mix(@green, @base, 80%); + + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + /* Drive upload checkmark */ + .z-Ea-Fj-c svg path { + fill: @green; + } + } +} diff --git a/styles/google-gemini/README.md b/styles/google-gemini/README.md new file mode 100644 index 0000000000..fa9136bb9c --- /dev/null +++ b/styles/google-gemini/README.md @@ -0,0 +1,36 @@ + + + +

+ Logo
+ + Catppuccin for Google Gemini + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainers +- [Dandraghas](https://github.com/Dandraghas) +- [WalkQuackBack](https://github.com/WalkQuackBack) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/google-gemini/catppuccin.user.less b/styles/google-gemini/catppuccin.user.less new file mode 100644 index 0000000000..f88ddd0fc5 --- /dev/null +++ b/styles/google-gemini/catppuccin.user.less @@ -0,0 +1,359 @@ +/* ==UserStyle== +@name Google Gemini Catppuccin +@namespace github.com/catppuccin/userstyles/styles/google-gemini +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google-gemini +@version 2026.01.04 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google-gemini/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle-gemini +@description Soothing pastel theme for Google Gemini +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("gemini.google.com") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + + :root .dark-theme { + #catppuccin(@darkFlavor); + } + + :root .light-theme { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --bard-color-neutral-90: @mantle; + --bard-color-on-selected-conversation-metadata-v2: @text; + --bard-color-surface-container: @mantle; + --bard-color-on-surface-opacity-38: @surface2 !important; + --bard-color-surface-container-highest: lighten(@base, 5%); + --bard-color-response-container-flipped-background: @surface0; + --bard-color-inverse-on-surface: darken(@mantle, 1%); + --bard-color-sidenav-mobile-controls: @text; + --bard-color-main-container-background: @base; + --bard-color-main-container-background-rgb: #lib.rgbify(@base)[]; + --bard-color-window-container-background: @base; + --bard-color-response-container-background: @base; + --bard-color-response-container-background-rgb: #lib.rgbify(@base)[]; + --bard-color-onhover-conversation-metadata-button-v2: @surface1; + --bard-color-selected-conversation-metadata-button-v2: fade( + @accent, + 40% + ); + --bard-color-new-conversation-button: @surface0; + --bard-color-on-new-conversation-button: @text; + --bard-color-onhover-conversation-metadata-v2: @surface0; + --bard-color-sidenav-upgrade-button: @surface0; + --bard-color-form-field-placeholder: @subtext0; + --bard-color-discovery-carousel-background: @mantle; + --bard-color-discovery-carousel-icon: @accent; + --bard-color-example-prompt-background: @crust; + --bard-color-bard-mode-logo-prefix: @subtext1; + --bard-color-neutral-96: @crust; + --bard-color-adv-marketing-basic-background: @surface0; + --bard-color-adv-marketing-product-background: @surface0; + --bard-color-adv-marketing-disclaimer: @subtext0; + --bard-color-input-area-buttons-selected-background: fade( + @accent, + 70% + ); + --bard-color-zero-state-card-selected: fade(@accent, 30%); + --bard-color-zero-state-prompt-chip-background: fade(@accent, 50%); + --bard-color-zero-state-prompt-chip-text: lighten(@accent, 5%); + --bard-color-regular-banner: @accent; + --bard-color-regular-banner-text: @crust; + --bard-color-skeleton-loader-background-1-rgb: #lib.rgbify(@mantle)[]; + --bard-color-skeleton-loader-background-2-rgb: #lib.rgbify(@accent)[]; + --bard-color-skeleton-loader-background-3-rgb: #lib.rgbify(@accent)[]; + --bard-color-brand-text-gradient-stop-1: @blue; + --bard-color-brand-text-gradient-stop-2: @sapphire; + --bard-color-brand-text-gradient-stop-3: @peach; + --bard-color-on-surface-opacity-12: fade(@teal, 10%); + --bard-color-footer-background: @mantle; + --bard-color-draft-chip-background: @surface0; + --bard-color-processing-animation-color-1: @surface1; + --bard-color-processing-animation-color-2: @crust; + --bard-color-tunable-selection-button: @mantle; + --bard-color-tunable-selection-button-icon: @text; + --bard-color-feedback-form-container-background: @mantle; + --bard-color-fact-check-tooltip-entailed-highlight: fade(@green, 25%); + --bard-color-fact-check-tooltip-entailed-selected: fade(@green, 35%); + --bard-color-fact-check-tooltip-contradictory-highlight: fade(@red, 25%); + --bard-color-fact-check-tooltip-contradictory-selected: fade(@red, 40%); + --bard-color-factuality-form-background: @mantle; + --bard-color-fact-check-button-complete: @surface0; + --bard-color-fact-check-button-loading: @surface1; + --bard-color-tunable-selection-menu-text: @text; + --bard-color-tunable-selection-menu-background: @mantle; + --bard-color-tunable-selection-textarea-background: @base; + --bard-color-tunable-selection-shimmer-non-advanced: @accent; + --bard-color-onegooglebar-product-controls: @text; + --bard-color-adv-marketing-check: @text; + + --mdc-switch-selected-hover-handle-color: lighten(@accent, 10%); + --mdc-switch-selected-focus-handle-color: lighten(@accent, 10%); + --mdc-switch-selected-pressed-handle-color: lighten(@accent, 15%); + --mdc-switch-selected-track-color: fade(@accent, 50%); + --mdc-switch-selected-hover-track-color: fade(@accent, 50%); + --mdc-switch-selected-focus-track-color: fade(@accent, 50%); + --mdc-switch-selected-pressed-track-color: fade(@accent, 50%); + --mdc-switch-selected-handle-color: @accent; + --mdc-switch-unselected-handle-color: @subtext0; + --mdc-switch-unselected-hover-handle-color: @subtext1; + --mdc-switch-unselected-focus-handle-color: @text; + --mdc-switch-unselected-pressed-handle-color: @text; + --mdc-switch-unselected-track-color: @surface2; + --mdc-switch-unselected-hover-track-color: @surface2; + --mdc-switch-unselected-pressed-track-color: @surface2; + --mdc-switch-unselected-focus-track-color: @surface2; + --mdc-checkbox-selected-icon-color: @accent; + --mdc-checkbox-selected-checkmark-color: var(--gem-sys-color--on-primary); + --mdc-checkbox-selected-hover-icon-color: @accent; + --mdc-checkbox-selected-pressed-icon-color: @accent; + --mdc-checkbox-selected-focus-icon-color: @accent; + --mdc-checkbox-selected-focus-state-layer-color: @accent; + --mdc-checkbox-selected-hover-state-layer-color: @accent; + --mdc-checkbox-selected-pressed-state-layer-color: @text; + --mdc-checkbox-unselected-pressed-state-layer-color: @accent; + --mdc-checkbox-unselected-focus-state-layer-color: @text; + --mdc-checkbox-unselected-hover-state-layer-color: @text; + --mdc-checkbox-unselected-focus-icon-color: @text; + --mdc-checkbox-unselected-icon-color: @subtext1; + --mdc-checkbox-unselected-hover-icon-color: @text; + --mdc-text-button-label-text-color: @subtext1; + --mdc-text-button-hover-label-text-color: @overlay2; + --mdc-list-list-item-hover-label-text-color: @text; + --mdc-filled-button-label-text-color: @crust; + --mdc-circular-progress-active-indicator-color: @accent; + --mdc-outlined-button-focus-outline-color: @text; + --mdc-outlined-button-hover-label-text-color: @subtext1; + --mdc-list-list-item-focus-label-text-color: @text; + --mdc-icon-button-disabled-icon-color: @surface2; + --mdc-outlined-text-field-input-text-color: @text; + --mdc-outlined-text-field-focus-outline-color: @accent; + --mdc-outlined-text-field-outline-color: @overlay1; + + --mat-app-text-color: @text; + --mat-text-button-state-layer-color: @overlay2; + --mat-sidenav-container-text-color: @text; + --mat-expansion-header-text-color: @text; + --mat-expansion-header-indicator-color: @text; + --mat-expansion-container-text-color: @text; + --mat-checkbox-label-text-color: @text; + --mat-bottom-sheet-container-text-color: @text; + --mat-bottom-sheet-container-background-color: @base; + --mat-menu-item-hover-state-layer-color: @surface0; + --mat-menu-item-focus-state-layer-color: @surface0; + --mat-menu-item-label-text-color: @text; + --mat-menu-container-color: @base; + --mat-menu-item-icon-color: @text; + --mat-filled-button-state-layer-color: @overlay2; + --mat-focus-indicator-border-color: @accent; + --mat-fab-small-hover-state-layer-opacity: 1; + --mat-divider-color: @overlay2; + + --gm-outlinedtextfield-outline-color: @subtext0; + --gm-outlinedtextfield-outline-color--stateful: @accent; + --gm-outlinedtextfield-ink-color: @text; + --gm3-sys-color-on-secondary-container: @crust; + --gm3-sys-color-secondary-container: @text; + + --gem-sys-color--surface: @base; + --gem-sys-color--surface-container: @mantle; + --gem-sys-color--surface--rgb: #lib.rgbify(@base)[]; + --gem-sys-color--on-surface: @text; + --gem-sys-color--on-surface-variant: @subtext1; + --gem-sys-color--outline-variant: @surface1; + --gem-sys-color--surface-container-high: @surface0; + --gem-sys-color--surface-container-low: lighten(@mantle, 2%); + --gem-sys-color--outline: @subtext0; + --gem-sys-color--on-primary-container: @text; + --gem-sys-color--on-primary-fixed: darken(@accent, 40%); + --gem-sys-color--on-primary: darken(@accent, 60%); + --gem-sys-color--primary: @accent; + --gem-sys-color--primary-container: fade(@accent, 60%); + --gem-sys-color--on-surface--rgb: #lib.rgbify(@subtext0)[]; + --gem-sys-color--surface-dim--rgb: #lib.rgbify(@crust)[]; + --gem-sys-color--surface-container-highest: @surface0; + --gem-sys-color--primary-fixed: @text; + --gem-sys-color--on-secondary: fade(@accent, 30%); + --gem-sys-color--surface-variant: @surface0; + --gem-sys-color--surface-bright: @surface0; + + --og-theme-color: @text; + + .action-icon { + --gem-sys-color--on-primary: @accent; + --gem-sys-color--on-surface-variant: @mantle; + } + .draft-preview-label-chip.selected { + color: @crust; + } + .buttons-container-link-button { + color: @crust; + } + .mdc-text-field--outlined:hover:not( + .mdc-text-field--disabled, + .mdc-text-field--focused + ) { + .mdc-notched-outline__leading, + .mdc-notched-outline__trailing { + border-color: @text !important; + } + } + .gmat-mdc-dialog .mat-mdc-dialog-container { + .mdc-dialog__content { + color: @subtext0; + } + .mdc-dialog__title { + color: @text; + } + } + .gmat-mdc-button.mat-mdc-outlined-button.mat-unthemed { + --mdc-outlined-button-outline-color: @overlay0; + --mdc-outlined-button-label-text-color: @subtext0; + } + .gmat-mdc-button.mat-mdc-outlined-button { + --mat-outlined-button-state-layer-color: @overlay2; + } + .gmat-mdc-button.mat-mdc-outlined-button:not( + .mat-mdc-button-disabled, + [disabled], + :disabled + ).mdc-ripple-upgraded--background-focused, + .gmat-mdc-button.mat-mdc-outlined-button:not( + .mat-mdc-button-disabled, + [disabled], + :disabled, + .mdc-ripple-upgraded + ):focus { + color: @text; + } + .gmat-mdc-chip { + --mdc-chip-label-text-color: @subtext0; + } + .gmat-mdc-chip.gmat-hairline-chip { + --mdc-chip-outline-color: @subtext0; + } + .gmat-mdc-chip.cdk-focused { + --mdc-chip-label-text-color: @text; + } + .mat-mdc-standard-chip { + --mdc-chip-hover-state-layer-color: @overlay1; + --mdc-chip-focus-state-layer-color: @overlay2; + } + .mdc-tooltip__surface { + --mdc-plain-tooltip-container-color: @overlay0; + --mdc-plain-tooltip-supporting-text-color: @text; + } + .mdc-form-field { + --mdc-form-field-label-text-color: @text; + } + .mdc-icon-button { + --mdc-icon-button-icon-color: @text !important; + } + .mdc-dialog__surface { + background-color: @base !important; + } + .expandable-button:disabled { + color: rgba(var(--gem-sys-color--on-surface--rgb), 0.38); + } + .mat-mdc-progress-bar { + --mdc-linear-progress-active-indicator-color: @accent; + --mdc-linear-progress-track-color: fade(@accent, 50%); + } + .mdc-list-item, + .gmat-mdc-list { + --mdc-list-list-item-hover-state-layer-color: @overlay1; + --mdc-list-list-item-label-text-color: @text; + --mdc-list-list-item-leading-icon-color: @text; + --mdc-list-list-item-focus-state-layer-color: @overlay2; + } + .gmat-mdc-button.mat-mdc-button.mat-primary { + --mdc-text-button-label-text-color: @accent; + --mdc-text-button-hover-label-text-color: lighten(@accent, 5%); + --mdc-text-button-focus-label-text-color: lighten(@accent, 8%); + } + .gmat-mdc-button.mat-mdc-button.mat-unthemed { + --mat-text-button-state-layer-color: @overlay2; + } + .gmat-mdc-button.mat-mdc-icon-button { + --mat-icon-button-state-layer-color: @overlay2; + } + .gmat-mdc-button.mat-mdc-fab:not( + .mat-mdc-button-disabled + ).mat-primary.gmat-mdc-fab-fill { + --mdc-fab-container-color: @accent; + --mat-fab-foreground-color: @crust; + } + .gmat-mdc-button.mat-mdc-mini-fab:not( + .mat-mdc-button-disabled + ).mat-primary.gmat-mdc-fab-outline { + --mat-fab-small-state-layer-color: @surface0; + } + .mat-mdc-fab:not(.mdc-riple-upgraded):focus::before, + .mat-mdc-mini-fab:not(.mdc-riple-upgraded):focus::before { + background: @surface2; + } + .mat-mdc-menu-panel { + background-color: @base !important; + } + .mat-mdc-fab.mat-accent { + --mat-fab-foreground-color: @text; + } + .xap-count-badge-dot { + background-color: @red; + } + & when (@flavor = latte) { + --gem-sys-color--on-primary-fixed: @accent; + --gem-sys-color--on-primary: @mantle; + --gem-sys-color--primary-fixed: @crust; + } + [data-mat-icon-name="search"] svg { + > path:nth-child(1) { + fill: @blue; + } + > path:nth-child(2) { + fill: @green; + } + > path:nth-child(3) { + fill: @yellow; + } + > path:nth-child(4) { + fill: @red; + } + } + .google-logo img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + [src="https://www.gstatic.com/lamda/images/replit_dark_24px_7d0347bf84c2570074db9.svg"], + [src="https://www.gstatic.com/lamda/images/replit_light_24px_3a2ee6003110f3c8460c9.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + /* Gemini Advanced shadows */ + chat-window > div > input-container { + background: unset; + } + input-container::before { + background: unset; + } + } +} diff --git a/styles/google-photos/README.md b/styles/google-photos/README.md new file mode 100644 index 0000000000..dfbd953c62 --- /dev/null +++ b/styles/google-photos/README.md @@ -0,0 +1,36 @@ + + + +

+ Logo
+ + Catppuccin for Google Photos + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainers +- [GenShibe](https://github.com/GenShibe) +- [WalkQuackBack](https://github.com/WalkQuackBack) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/google-photos/catppuccin.user.less b/styles/google-photos/catppuccin.user.less new file mode 100644 index 0000000000..73f5967517 --- /dev/null +++ b/styles/google-photos/catppuccin.user.less @@ -0,0 +1,663 @@ +/* ==UserStyle== +@name Google Photos Catppuccin +@namespace github.com/catppuccin/userstyles/styles/google-photos +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google-photos +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google-photos/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle-photos +@description Soothing pastel theme for Google Photos +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("photos.google.com") { + body { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + .zKHdkd { + #catppuccin(@lightFlavor); + } + + .dm7YTc { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + @inverse-theme: if(@flavor = latte, mocha, latte); + @inverse-accent: @catppuccin[@@inverse-theme][@@accentColor]; + // @color-scheme: if(@flavor = latte, light, dark); // Seems like a bug, this should be `color-scheme` not `@color-scheme`? This variable is not used anywhere else. + + // GM3 base + + @gm3-sys-color-error: @red; + @gm3-sys-color-error-rgb: #lib.rgbify(@gm3-sys-color-error)[]; + @gm3-sys-color-error-container: saturate( + mix(@gm3-sys-color-error, @mantle, 30%), + 20% + ); + @gm3-sys-color-error-container-rgb: #lib.rgbify( + @gm3-sys-color-error-container, + )[]; + + @gm3-sys-color-on-error: saturate( + mix(@gm3-sys-color-error, @base, 20%), + 25% + ); + @gm3-sys-color-on-error-rgb: #lib.rgbify(@gm3-sys-color-on-error)[]; + @gm3-sys-color-on-error-container: saturate( + mix(@gm3-sys-color-error-container, @text, 20%), + 25% + ); + @gm3-sys-color-on-error-container-rgb: #lib.rgbify( + @gm3-sys-color-on-error-container, + )[]; + + @gm3-sys-color-primary: @accent; + @gm3-sys-color-primary-rgb: #lib.rgbify(@gm3-sys-color-primary)[]; + @gm3-sys-color-primary-fixed: lighten(@accent, 5%); + @gm3-sys-color-primary-fixed-rgb: #lib.rgbify( + @gm3-sys-color-primary-fixed, + )[]; + @gm3-sys-color-primary-fixed-dim: darken(@accent, 5%); + @gm3-sys-color-primary-fixed-dim-rgb: #lib.rgbify( + @gm3-sys-color-primary-fixed-dim, + )[]; + + @gm3-sys-color-on-primary: saturate( + mix(@gm3-sys-color-primary, @base, 20%), + 25% + ); + @gm3-sys-color-on-primary-rgb: #lib.rgbify(@gm3-sys-color-on-primary)[]; + @gm3-sys-color-on-primary-fixed: darken(@gm3-sys-color-on-primary, 5%); + @gm3-sys-color-on-primary-fixed-rgb: #lib.rgbify( + @gm3-sys-color-on-primary-fixed, + )[]; + @gm3-sys-color-on-primary-fixed-variant: lighten( + @gm3-sys-color-on-primary, + 5% + ); + @gm3-sys-color-on-primary-fixed-variant-rgb: #lib.rgbify( + @gm3-sys-color-on-primary-fixed-variant, + )[]; + + @gm3-sys-color-primary-container: saturate( + mix(@gm3-sys-color-primary, @mantle, 30%), + 20% + ); + @gm3-sys-color-primary-container-rgb: #lib.rgbify( + @gm3-sys-color-primary-container, + )[]; + @gm3-sys-color-on-primary-container: saturate( + mix(@gm3-sys-color-primary, @text, 20%), + 25% + ); + @gm3-sys-color-on-primary-container-rgb: #lib.rgbify( + @gm3-sys-color-on-primary-container, + )[]; + + @gm3-sys-color-secondary: desaturate(@accent, 20%); + @gm3-sys-color-secondary-rgb: #lib.rgbify(@gm3-sys-color-secondary)[]; + @gm3-sys-color-secondary-fixed: lighten(@gm3-sys-color-secondary, 5%); + @gm3-sys-color-secondary-fixed-rgb: #lib.rgbify( + @gm3-sys-color-secondary-fixed, + )[]; + @gm3-sys-color-secondary-fixed-dim: darken(@gm3-sys-color-secondary, 5%); + @gm3-sys-color-secondary-fixed-dim-rgb: #lib.rgbify( + @gm3-sys-color-secondary-fixed-dim, + )[]; + + @gm3-sys-color-on-secondary: saturate( + mix(@gm3-sys-color-secondary, @base, 20%), + 25% + ); + @gm3-sys-color-on-secondary-rgb: #lib.rgbify(@gm3-sys-color-on-secondary)[]; + @gm3-sys-color-on-secondary-fixed: darken( + @gm3-sys-color-on-secondary, + 5% + ); + @gm3-sys-color-on-secondary-fixed-rgb: #lib.rgbify( + @gm3-sys-color-on-secondary-fixed, + )[]; + @gm3-sys-color-on-secondary-fixed-variant: lighten( + @gm3-sys-color-on-primary, + 5% + ); + @gm3-sys-color-on-secondary-fixed-variant-rgb: #lib.rgbify( + @gm3-sys-color-on-secondary-fixed-variant, + )[]; + + @gm3-sys-color-secondary-container: saturate( + mix(@gm3-sys-color-secondary, @mantle, 35%), + 10% + ); + @gm3-sys-color-secondary-container-rgb: #lib.rgbify( + @gm3-sys-color-secondary-container, + )[]; + @gm3-sys-color-on-secondary-container: saturate( + mix(@gm3-sys-color-secondary, @text, 75%), + 25% + ); + @gm3-sys-color-on-secondary-container-rgb: #lib.rgbify( + @gm3-sys-color-on-secondary-container, + )[]; + + @gm3-sys-color-tertiary: @accent; + @gm3-sys-color-tertiary-rgb: #lib.rgbify(@gm3-sys-color-tertiary)[]; + @gm3-sys-color-tertiary-fixed: lighten(@gm3-sys-color-tertiary, 5%); + @gm3-sys-color-tertiary-fixed-rgb: #lib.rgbify( + @gm3-sys-color-tertiary-fixed, + )[]; + @gm3-sys-color-tertiary-fixed-dim: darken(@gm3-sys-color-tertiary, 5%); + @gm3-sys-color-tertiary-fixed-dim-rgb: #lib.rgbify( + @gm3-sys-color-tertiary-fixed-dim, + )[]; + + @gm3-sys-color-on-tertiary: saturate( + mix(@gm3-sys-color-tertiary, @base, 20%), + 25% + ); + @gm3-sys-color-on-tertiary-rgb: #lib.rgbify(@gm3-sys-color-on-tertiary)[]; + @gm3-sys-color-on-tertiary-fixed: darken(@gm3-sys-color-on-tertiary, 5%); + @gm3-sys-color-on-tertiary-fixed-rgb: #lib.rgbify( + @gm3-sys-color-on-tertiary-fixed, + )[]; + @gm3-sys-color-on-tertiary-fixed-variant: lighten( + @gm3-sys-color-on-tertiary, + 5% + ); + @gm3-sys-color-on-tertiary-fixed-variant-rgb: #lib.rgbify( + @gm3-sys-color-on-tertiary-fixed-variant, + )[]; + + @gm3-sys-color-tertiary-container: saturate( + mix(@gm3-sys-color-tertiary, @mantle, 20%), + 0% + ); + @gm3-sys-color-tertiary-container-rgb: #lib.rgbify( + @gm3-sys-color-tertiary-container, + )[]; + @gm3-sys-color-on-tertiary-container: saturate( + mix(@gm3-sys-color-tertiary-container, @text, 20%), + 25% + ); + @gm3-sys-color-on-tertiary-container-rgb: #lib.rgbify( + @gm3-sys-color-on-tertiary-container, + )[]; + + @gm3-sys-color-background: @base; + @gm3-sys-color-background-rgb: #lib.rgbify(@gm3-sys-color-background)[]; + @gm3-sys-color-on-background: @text; + @gm3-sys-color-on-background-rgb: #lib.rgbify( + @gm3-sys-color-on-background, + )[]; + + @gm3-sys-color-surface: @base; + @gm3-sys-color-surface-rgb: #lib.rgbify(@gm3-sys-color-surface)[]; + @gm3-sys-color-surface-bright: @surface0; + @gm3-sys-color-surface-bright-rgb: #lib.rgbify( + @gm3-sys-color-surface-bright, + )[]; + @gm3-sys-color-surface-dim: @crust; + @gm3-sys-color-surface-dim-rgb: #lib.rgbify(@gm3-sys-color-surface-dim)[]; + @gm3-sys-color-surface-variant: mix(@mantle, @accent, 87.5%); + @gm3-sys-color-surface-variant-rgb: #lib.rgbify( + @gm3-sys-color-surface-variant, + )[]; + @gm3-sys-color-surface-tint: @accent; + @gm3-sys-color-surface-tint-rgb: #lib.rgbify(@gm3-sys-color-surface-tint)[]; + + @gm3-sys-color-on-surface: @text; + @gm3-sys-color-on-surface-rgb: #lib.rgbify(@gm3-sys-color-on-surface)[]; + @gm3-sys-color-on-surface-variant: @subtext0; + @gm3-sys-color-on-surface-variant-rgb: #lib.rgbify( + @gm3-sys-color-on-surface-variant, + )[]; + + @gm3-sys-color-inverse-surface: @text; + @gm3-sys-color-inverse-surface-rgb: #lib.rgbify( + @gm3-sys-color-inverse-surface, + )[]; + @gm3-sys-color-inverse-on-surface: @mantle; + @gm3-sys-color-inverse-on-surface-rgb: #lib.rgbify( + @gm3-sys-color-inverse-on-surface, + )[]; + @gm3-sys-color-inverse-primary: @inverse-accent; + @gm3-sys-color-inverse-primary-rgb: #lib.rgbify( + @gm3-sys-color-inverse-primary, + )[]; + + @gm3-sys-color-surface-container-highest: @surface1; + @gm3-sys-color-surface-container-highest-rgb: #lib.rgbify( + @gm3-sys-color-surface-container-highest, + )[]; + @gm3-sys-color-surface-container-high: @surface0; + @gm3-sys-color-surface-container-high-rgb: #lib.rgbify( + @gm3-sys-color-surface-container-high, + )[]; + @gm3-sys-color-surface-container: @surface0; + @gm3-sys-color-surface-container-rgb: #lib.rgbify( + @gm3-sys-color-surface-container, + )[]; + @gm3-sys-color-surface-container-low: @mantle; + @gm3-sys-color-surface-container-low-rgb: #lib.rgbify( + @gm3-sys-color-surface-container-low, + )[]; + @gm3-sys-color-surface-container-lowest: @crust; + @gm3-sys-color-surface-container-lowest-rgb: #lib.rgbify( + @gm3-sys-color-surface-container-lowest, + )[]; + + @gm3-sys-color-outline: @overlay2; + @gm3-sys-color-outline-rgb: #lib.rgbify(@gm3-sys-color-outline)[]; + @gm3-sys-color-outline-variant: @overlay0; + @gm3-sys-color-outline-variant-rgb: #lib.rgbify( + @gm3-sys-color-outline-variant, + )[]; + + @gm3-sys-color-scrim: #000; + @gm3-sys-color-scrim-rgb: #lib.rgbify(@gm3-sys-color-scrim)[]; + @gm3-sys-color-shadow: #000; + @gm3-sys-color-shadow-rgb: #lib.rgbify(@gm3-sys-color-shadow)[]; + + --gm3-sys-color-background: @gm3-sys-color-background; + --gm3-sys-color-background-rgb: @gm3-sys-color-background-rgb; + --gm3-sys-color-error: @gm3-sys-color-error; + --gm3-sys-color-error-rgb: @gm3-sys-color-error-rgb; + --gm3-sys-color-error-container: @gm3-sys-color-error-container; + --gm3-sys-color-error-container-rgb: @gm3-sys-color-error-container-rgb; + --gm3-sys-color-inverse-on-surface: @gm3-sys-color-inverse-on-surface; + --gm3-sys-color-inverse-on-surface-rgb: @gm3-sys-color-inverse-on-surface-rgb; + --gm3-sys-color-inverse-primary: @gm3-sys-color-inverse-primary; + --gm3-sys-color-inverse-primary-rgb: @gm3-sys-color-inverse-primary-rgb; + --gm3-sys-color-inverse-surface: @gm3-sys-color-inverse-surface; + --gm3-sys-color-inverse-surface-rgb: @gm3-sys-color-inverse-surface-rgb; + --gm3-sys-color-on-background: @gm3-sys-color-on-background; + --gm3-sys-color-on-background-rgb: @gm3-sys-color-on-background-rgb; + --gm3-sys-color-on-error: @gm3-sys-color-on-error; + --gm3-sys-color-on-error-rgb: @gm3-sys-color-on-error-rgb; + --gm3-sys-color-on-error-container: @gm3-sys-color-on-error-container; + --gm3-sys-color-on-error-container-rgb: @gm3-sys-color-on-error-container-rgb; + --gm3-sys-color-on-primary: @gm3-sys-color-on-primary; + --gm3-sys-color-on-primary-rgb: @gm3-sys-color-on-primary-rgb; + --gm3-sys-color-on-primary-container: @gm3-sys-color-on-primary-container; + --gm3-sys-color-on-primary-container-rgb: @gm3-sys-color-on-primary-container-rgb; + --gm3-sys-color-on-primary-fixed: @gm3-sys-color-on-primary-fixed; + --gm3-sys-color-on-primary-fixed-rgb: @gm3-sys-color-on-primary-fixed-rgb; + --gm3-sys-color-on-primary-fixed-variant: @gm3-sys-color-on-primary-fixed-variant; + --gm3-sys-color-on-primary-fixed-variant-rgb: @gm3-sys-color-on-primary-fixed-variant-rgb; + --gm3-sys-color-on-secondary: @gm3-sys-color-on-secondary; + --gm3-sys-color-on-secondary-rgb: @gm3-sys-color-on-secondary-rgb; + --gm3-sys-color-on-secondary-container: @gm3-sys-color-on-secondary-container; + --gm3-sys-color-on-secondary-container-rgb: @gm3-sys-color-on-secondary-container-rgb; + --gm3-sys-color-on-secondary-fixed: @gm3-sys-color-on-secondary-fixed; + --gm3-sys-color-on-secondary-fixed-rgb: @gm3-sys-color-on-secondary-fixed-rgb; + --gm3-sys-color-on-secondary-fixed-variant: @gm3-sys-color-on-secondary-fixed-variant; + --gm3-sys-color-on-secondary-fixed-variant-rgb: @gm3-sys-color-on-secondary-fixed-variant-rgb; + --gm3-sys-color-on-surface: @gm3-sys-color-on-surface; + --gm3-sys-color-on-surface-rgb: @gm3-sys-color-on-surface-rgb; + --gm3-sys-color-on-surface-variant: @gm3-sys-color-on-surface-variant; + --gm3-sys-color-on-surface-variant-rgb: @gm3-sys-color-on-surface-variant-rgb; + --gm3-sys-color-on-tertiary: @gm3-sys-color-on-tertiary; + --gm3-sys-color-on-tertiary-rgb: @gm3-sys-color-on-tertiary-rgb; + --gm3-sys-color-on-tertiary-container: @gm3-sys-color-on-tertiary-container; + --gm3-sys-color-on-tertiary-container-rgb: @gm3-sys-color-on-tertiary-container-rgb; + --gm3-sys-color-on-tertiary-fixed: @gm3-sys-color-on-tertiary-fixed; + --gm3-sys-color-on-tertiary-fixed-rgb: @gm3-sys-color-on-tertiary-fixed-rgb; + --gm3-sys-color-on-tertiary-fixed-variant: @gm3-sys-color-on-tertiary-fixed-variant; + --gm3-sys-color-on-tertiary-fixed-variant-rgb: @gm3-sys-color-on-tertiary-fixed-variant-rgb; + --gm3-sys-color-outline: @gm3-sys-color-outline; + --gm3-sys-color-outline-rgb: @gm3-sys-color-outline-rgb; + --gm3-sys-color-outline-variant: @gm3-sys-color-outline-variant; + --gm3-sys-color-outline-variant-rgb: @gm3-sys-color-outline-variant-rgb; + --gm3-sys-color-primary: @gm3-sys-color-primary; + --gm3-sys-color-primary-rgb: @gm3-sys-color-primary-rgb; + --gm3-sys-color-primary-container: @gm3-sys-color-primary-container; + --gm3-sys-color-primary-container-rgb: @gm3-sys-color-primary-container-rgb; + --gm3-sys-color-primary-fixed: @gm3-sys-color-primary-fixed; + --gm3-sys-color-primary-fixed-rgb: @gm3-sys-color-primary-fixed-rgb; + --gm3-sys-color-primary-fixed-dim: @gm3-sys-color-primary-fixed-dim; + --gm3-sys-color-primary-fixed-dim-rgb: @gm3-sys-color-primary-fixed-dim-rgb; + --gm3-sys-color-scrim: @gm3-sys-color-scrim; + --gm3-sys-color-scrim-rgb: @gm3-sys-color-scrim-rgb; + --gm3-sys-color-secondary: @gm3-sys-color-secondary; + --gm3-sys-color-secondary-rgb: @gm3-sys-color-secondary-rgb; + --gm3-sys-color-secondary-container: @gm3-sys-color-secondary-container; + --gm3-sys-color-secondary-container-rgb: @gm3-sys-color-secondary-container-rgb; + --gm3-sys-color-secondary-fixed: @gm3-sys-color-secondary-fixed; + --gm3-sys-color-secondary-fixed-rgb: @gm3-sys-color-secondary-fixed-rgb; + --gm3-sys-color-secondary-fixed-dim: @gm3-sys-color-secondary-fixed-dim; + --gm3-sys-color-secondary-fixed-dim-rgb: @gm3-sys-color-secondary-fixed-dim-rgb; + --gm3-sys-color-shadow: @gm3-sys-color-shadow; + --gm3-sys-color-shadow-rgb: @gm3-sys-color-shadow-rgb; + --gm3-sys-color-surface: @gm3-sys-color-surface; + --gm3-sys-color-surface-rgb: @gm3-sys-color-surface-rgb; + --gm3-sys-color-surface-bright: @gm3-sys-color-surface-bright; + --gm3-sys-color-surface-bright-rgb: @gm3-sys-color-surface-bright-rgb; + --gm3-sys-color-surface-container: @gm3-sys-color-surface-container; + --gm3-sys-color-surface-container-rgb: @gm3-sys-color-surface-container-rgb; + --gm3-sys-color-surface-container-high: @gm3-sys-color-surface-container-high; + --gm3-sys-color-surface-container-high-rgb: @gm3-sys-color-surface-container-high-rgb; + --gm3-sys-color-surface-container-highest: @gm3-sys-color-surface-container-highest; + --gm3-sys-color-surface-container-highest-rgb: @gm3-sys-color-surface-container-highest-rgb; + --gm3-sys-color-surface-container-low: @gm3-sys-color-surface-container-low; + --gm3-sys-color-surface-container-low-rgb: @gm3-sys-color-surface-container-low-rgb; + --gm3-sys-color-surface-container-lowest: @gm3-sys-color-surface-container-lowest; + --gm3-sys-color-surface-container-lowest-rgb: @gm3-sys-color-surface-container-lowest-rgb; + --gm3-sys-color-surface-dim: @gm3-sys-color-surface-dim; + --gm3-sys-color-surface-dim-rgb: @gm3-sys-color-surface-dim-rgb; + --gm3-sys-color-surface-tint: @gm3-sys-color-surface-tint; + --gm3-sys-color-surface-tint-rgb: @gm3-sys-color-surface-tint-rgb; + --gm3-sys-color-surface-variant: @gm3-sys-color-surface-variant; + --gm3-sys-color-surface-variant-rgb: @gm3-sys-color-surface-variant-rgb; + --gm3-sys-color-tertiary: @gm3-sys-color-tertiary; + --gm3-sys-color-tertiary-rgb: @gm3-sys-color-tertiary-rgb; + --gm3-sys-color-tertiary-container: @gm3-sys-color-tertiary-container; + --gm3-sys-color-tertiary-container-rgb: @gm3-sys-color-tertiary-container-rgb; + --gm3-sys-color-tertiary-fixed: @gm3-sys-color-tertiary-fixed; + --gm3-sys-color-tertiary-fixed-rgb: @gm3-sys-color-tertiary-fixed-rgb; + --gm3-sys-color-tertiary-fixed-dim: @gm3-sys-color-tertiary-fixed-dim; + --gm3-sys-color-tertiary-fixed-dim-rgb: @gm3-sys-color-tertiary-fixed-dim-rgb; + --mdc-ripple-color: var(--gm3-sys-color-primary); + + // GM3 Photos + + @gm3-sys-color-caution: @yellow; + @gm3-sys-color-caution-rgb: #lib.rgbify(@gm3-sys-color-caution)[]; + @gm3-sys-color-on-caution: saturate( + mix(@gm3-sys-color-caution, @base, 20%), + 25% + ); + @gm3-sys-color-on-caution-rgb: #lib.rgbify(@gm3-sys-color-on-caution)[]; + @gm3-sys-color-caution-container: saturate( + mix(@gm3-sys-color-caution, @mantle, 30%), + 20% + ); + @gm3-sys-color-caution-container-rgb: #lib.rgbify( + @gm3-sys-color-caution-container, + )[]; + @gm3-sys-color-on-caution-container: saturate( + mix(@gm3-sys-color-caution-container, @text, 20%), + 25% + ); + @gm3-sys-color-on-caution-container-rgb: #lib.rgbify( + @gm3-sys-color-on-caution-container, + )[]; + @gm3-sys-color-storage-meter-normal-primary: @blue; + @gm3-sys-color-storage-meter-normal-primary-rgb: #lib.rgbify( + @gm3-sys-color-storage-meter-normal-primary, + )[]; + @gm3-sys-color-storage-meter-normal-secondary: lighten( + spin(@blue, -20deg), + 10% + ); + @gm3-sys-color-storage-meter-normal-secondary-rgb: #lib.rgbify( + @gm3-sys-color-storage-meter-normal-secondary, + )[]; + @gm3-sys-color-storage-meter-caution-primary: saturate( + darken(@yellow, 10%), + 10% + ); + @gm3-sys-color-storage-meter-caution-primary-rgb: #lib.rgbify( + @gm3-sys-color-storage-meter-caution-primary, + )[]; + @gm3-sys-color-storage-meter-caution-secondary: @yellow; + @gm3-sys-color-storage-meter-caution-secondary-rgb: #lib.rgbify( + @gm3-sys-color-storage-meter-caution-secondary, + )[]; + @gm3-sys-color-storage-meter-warning-primary: saturate( + darken(@red, 10%), + 10% + ); + @gm3-sys-color-storage-meter-warning-primary-rgb: #lib.rgbify( + @gm3-sys-color-storage-meter-warning-primary, + )[]; + @gm3-sys-color-storage-meter-warning-secondary: @red; + @gm3-sys-color-storage-meter-warning-secondary-rgb: #lib.rgbify( + @gm3-sys-color-storage-meter-warning-secondary, + )[]; + @gm3-sys-color-on-scrim: #fff; + @gm3-sys-color-on-scrim-rgb: #lib.rgbify(@gm3-sys-color-on-scrim)[]; + @gm3-sys-color-lights-out-background: #000; + @gm3-sys-color-lights-out-background-rgb: #lib.rgbify( + @gm3-sys-color-lights-out-background, + )[]; + @gm3-sys-color-gems-main: @blue; + @gm3-sys-color-gems-main-rgb: #lib.rgbify(@gm3-sys-color-gems-main)[]; + @gm3-sys-color-gems-muted: @sapphire; + @gm3-sys-color-gems-muted-rgb: #lib.rgbify(@gm3-sys-color-gems-muted)[]; + @gm3-sys-color-gems-analog: @lavender; + @gm3-sys-color-gems-analog-rgb: #lib.rgbify(@gm3-sys-color-gems-analog)[]; + @gm3-sys-color-gems-complement: @peach; + @gm3-sys-color-gems-complement-rgb: #lib.rgbify( + @gm3-sys-color-gems-complement, + )[]; + @gm3-sys-color-twitter: @text; + @gm3-sys-color-twitter-rgb: #lib.rgbify(@gm3-sys-color-twitter)[]; + + --gm3-sys-color-caution: @gm3-sys-color-caution; + --gm3-sys-color-caution-rgb: @gm3-sys-color-caution-rgb; + --gm3-sys-color-on-caution: @gm3-sys-color-on-caution; + --gm3-sys-color-on-caution-rgb: @gm3-sys-color-on-caution-rgb; + --gm3-sys-color-caution-container: @gm3-sys-color-caution-container; + --gm3-sys-color-caution-container-rgb: @gm3-sys-color-caution-container-rgb; + --gm3-sys-color-on-caution-container: @gm3-sys-color-on-caution-container; + --gm3-sys-color-on-caution-container-rgb: @gm3-sys-color-on-caution-container-rgb; + --gm3-sys-color-storage-meter-normal-primary: @gm3-sys-color-storage-meter-normal-primary; + --gm3-sys-color-storage-meter-normal-primary-rgb: @gm3-sys-color-storage-meter-normal-primary-rgb; + --gm3-sys-color-storage-meter-normal-secondary: @gm3-sys-color-storage-meter-normal-secondary; + --gm3-sys-color-storage-meter-normal-secondary-rgb: @gm3-sys-color-storage-meter-normal-secondary-rgb; + --gm3-sys-color-storage-meter-caution-primary: @gm3-sys-color-storage-meter-caution-primary; + --gm3-sys-color-storage-meter-caution-primary-rgb: @gm3-sys-color-storage-meter-caution-primary-rgb; + --gm3-sys-color-storage-meter-caution-secondary: @gm3-sys-color-storage-meter-caution-secondary; + --gm3-sys-color-storage-meter-caution-secondary-rgb: @gm3-sys-color-storage-meter-caution-secondary-rgb; + --gm3-sys-color-storage-meter-warning-primary: @gm3-sys-color-storage-meter-warning-primary; + --gm3-sys-color-storage-meter-warning-primary-rgb: @gm3-sys-color-storage-meter-warning-primary-rgb; + --gm3-sys-color-storage-meter-warning-secondary: @gm3-sys-color-storage-meter-warning-secondary; + --gm3-sys-color-storage-meter-warning-secondary-rgb: @gm3-sys-color-storage-meter-warning-secondary-rgb; + --gm3-sys-color-on-scrim: @gm3-sys-color-on-scrim; + --gm3-sys-color-on-scrim-rgb: @gm3-sys-color-on-scrim-rgb; + --gm3-sys-color-lights-out-background: @gm3-sys-color-lights-out-background; + --gm3-sys-color-lights-out-background-rgb: @gm3-sys-color-lights-out-background-rgb; + --gm3-sys-color-gems-main: @gm3-sys-color-gems-main; + --gm3-sys-color-gems-main-rgb: @gm3-sys-color-gems-main-rgb; + --gm3-sys-color-gems-muted: @gm3-sys-color-gems-muted; + --gm3-sys-color-gems-muted-rgb: @gm3-sys-color-gems-muted-rgb; + --gm3-sys-color-gems-analog: @gm3-sys-color-gems-analog; + --gm3-sys-color-gems-analog-rgb: @gm3-sys-color-gems-analog-rgb; + --gm3-sys-color-gems-complement: @gm3-sys-color-gems-complement; + --gm3-sys-color-gems-complement-rgb: @gm3-sys-color-gems-complement-rgb; + --gm3-sys-color-twitter: @gm3-sys-color-twitter; + --gm3-sys-color-twitter-rgb: @gm3-sys-color-twitter-rgb; + + /* google 1 more storage border */ + .BZXMjd.mPxwXe { + background-image: + conic-gradient( + var(--gm3-sys-color-background), + var(--gm3-sys-color-background) + ), + conic-gradient( + from 2deg, + @yellow 0deg, + @yellow 90deg, + @green 90deg, + @green 180deg, + @blue 180deg, + @blue 270deg, + @red 270deg, + @red 1turn + ), + linear-gradient( + var(--gm3-sys-color-outline-variant,), + var(--gm3-sys-color-outline-variant,) + ); + } + + // google one icon + .BZXMjd.mPxwXe .oXxEid { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + // google logo + .UDKXKd, + .uuRyud { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + // app store install button + .ASbIvd { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + + & when (@flavor = latte) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + } + + // google play install button + .Od6mvf { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + + & when (@flavor = latte) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + } + + // sharing + .MmE0qc { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + // favorites image + .ryy2Zd { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + // album image + .AAF8rf { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + // archive image + .ZgMovb { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + // no photo orders image + .raQi0b { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + + & when (@flavor = latte) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + } + + // app download page image + .TN5Asf { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + + & when (@flavor = latte) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + } + + // google shield icon + .SAdUce { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + & when (@flavor = latte) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + } + + // trash icon + .bR1LEf { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + // sharing buddy icon + .PfAiBf { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + // add photos svg + .nlmbYc { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + } + + a { + color: var(--gm3-sys-color-primary); + } +} diff --git a/styles/google/README.md b/styles/google/README.md new file mode 100644 index 0000000000..b3bbf1dc9e --- /dev/null +++ b/styles/google/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Google + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## ❤️‍🩹 Unmaintained +This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/google/catppuccin.user.less b/styles/google/catppuccin.user.less new file mode 100644 index 0000000000..38fb659875 --- /dev/null +++ b/styles/google/catppuccin.user.less @@ -0,0 +1,2432 @@ +/* ==UserStyle== +@name Google Catppuccin +@namespace github.com/catppuccin/userstyles/styles/google +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle +@description Soothing pastel theme for Google +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document regexp("^https?://(www\\.|images\\.)?google\\..*") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + // Unset color-scheme from `#lib.defaults()`. + iframe { + color-scheme: none !important; + } + + &, + body { + background: @base !important; + --uv-styles-color-surface: @crust; + --uv-styles-color-tertiary: @surface0; + --uv-styles-color-secondary: fade(@blue, 25%); + --uv-styles-color-primary: @base; + --uv-styles-color-on-primary: @blue; + --uv-styles-color-text-primary: @blue; + --uv-styles-color-icon-default: @text; + --uv-styles-color-text-emphasis: @text; + --uv-styles-color-icon-on-secondary: @subtext0; + --uv-styles-color-on-tertiary: @text; + --uv-styles-color-icon-on-tertiary: @text; + --uv-styles-color-scrim: fade(@crust, 75%); + --uv-styles-color-on-scrim: @text; + --uv-styles-color-icon-on-scrim: @text; + --xhUGwc: @base; + --bbQxAb: @text; + --IXoxUe: @subtext0; + --COEmY: @text; + --YLNNHc: @text; + --JKqx2: @blue; + --gS5jXb: @surface0; + --mXZkqc: @surface0; + --EpFNW: @mantle; + --XKMDxc: @mantle; + --TSWZIb: @mantle; + --tefdc5886c2f04483: @text; + --te8f1ea4d4928be48: @text !important; + --ta884a309a24f44f4: @subtext0 !important; + --tdee01b39543f1cac: @base !important; + --tcc8c9ef487836e2b: @surface0 !important; + --ta83cba65577ef850: @blue !important; + --t7d1a3050c2c1c0a5: @text !important; + --t6a0469853a1a02c1: @text !important; + --t5feec22832a0fdd6: @surface0 !important; + --t342c96645d13ae13: @accent !important; + --t6c7325fca9d536d4: @text !important; + --tf7148cf5018d5074: @text !important; + --t9ab8d922307d428d: @text; + --t62e84c71989f1975: @red !important; + --tc9db399ed82142e1: @green !important; + --uv-styles-color-text-default: @subtext0 !important; + --uv-styles-color-review-stars: @yellow !important; + --gm3-sys-color-primary: @surface0; + --gm3-sys-color-on-primary: @blue; + --Nsm0ce: @blue; + } + + /* header background */ + .CvDJxb { + background-color: @base !important; + } + + /* safe search toggle dropdown */ + .z4R3Z.yb2zA { + color: @blue !important; + } + .z4R3Z { + color: @text !important; + } + + /* selected image background */ + .PNCib.fT6ABc::after { + background-color: @surface1 !important; + border-color: @blue !important; + } + + /* travel */ + .Usd1Ac { + background-color: @surface0 !important; + border-color: @surface2 !important; + } + .P77izf { + background-color: @base !important; + color: @text !important; + } + .VfPpkd-StrnGf-rymPhb-f7MjDc, + .VfPpkd-qPzbhe-JNdkSc-Bz112c { + color: @accent !important; + } + .EL3pcf { + color: @accent !important; + } + .bVfPpkd-StrnGf-rymPhb, + .DMZ54e { + color: @text !important; + } + .VfPpkd-pafCAf, + .VfPpkd-pafCAf-OWXEXe-Xhs9z { + fill: @mantle !important; + } + .VfPpkd-l6JLsf::after { + background-color: @blue !important; + } + .VfPpkd-l6JLsf::before { + background-color: @surface2 !important; + } + .VfPpkd-uMhiad::after { + background: @overlay0; + } + .dmaMHc { + background-color: @surface0 !important; + } + .AJxgH { + background-color: @mantle !important; + } + .VfPpkd-cTi5dd { + color: @accent !important; + } + /* news column thingymaboober idk what it's actually called, but it's like these columns of news headlines so yeah */ + .nEklgc { + background-color: @surface0; + } + .JJZKK.Wui1sd { + border-color: @surface0; + } + .rbYSKb, + .FuOudf, + .GI74Re { + color: @subtext0; + } + /* widgets */ + /* timer */ + .pMz3A, + .qhXOwb, + .yrvNxb .pv60Cd, + .LPl7kb .pv60Cd, + .Q7q8pf .pv60Cd { + background-color: @mantle !important; + } + + /* color picker */ + .P2c8Dd { + background-color: @base; + } + + .R9RxHd { + border-color: @surface0; + } + + /* unit converter */ + .LNn04b { + background-color: @mantle; + color: @text !important; + border-color: @surface0; + } + + .vXQmIe, + .vk_c { + color: @text !important; + border-color: @surface0 !important; + } + + .NIzGle { + background-color: @yellow; + color: @crust; + } + + /* periodic table */ + .DJ3Gm { + background-color: @peach; + color: @crust; + } + + .nA1S9d { + background-color: @mauve; + color: @crust; + } + + .qY66Od { + background-color: @blue; + color: @crust; + } + + .IJR6Te { + background-color: @sky; + color: @crust; + } + + .asrVsb { + background-color: @surface0; + } + + .VCIyZb { + background-color: @red; + color: @crust; + } + + .QRbwTb { + background-color: @teal; + color: @crust; + } + + .tASb2d { + background-color: darken(@red, 5%); + color: @crust; + } + + .Fm9Me { + background-color: @yellow; + color: @crust; + } + + .wo1y7c { + background-color: @green; + color: @crust; + } + + /* search bar right beneath websites */ + .YbqTTb, + g-flat-button.BwMo1 { + background-color: @base; + border-color: @surface0; + } + + .YbqTTb:focus { + border-color: @accent; + } + + /* some play buttons on games */ + .fxvhbc, + .pGGGle { + background-color: @accent; + color: @crust; + } + + /* calculator senpai~ */ + .zRQJhd { + background-color: @base !important; + } + .XH1CIc { + color: @subtext0; + } + .pno7A.hU1rMc .Tqvz7b, + .pno7A.rfUaPd .SwDSDf { + color: @subtext1; + } + .pno7A.rfUaPd .Tqvz7b { + color: @text; + } + .tR3EBc { + background-color: @mantle; + } + .AOvabd, + .dxp44d { + background: @surface0 !important; + color: @text !important; + border-color: @surface0 !important; + &:hover { + background-color: @surface1; + border-color: @surface1; + } + } + .zbvg1c { + color: @text; + } + .UUhRt { + background-color: @blue; + color: @mantle; + border-color: @blue; + &:hover { + background-color: @sky; + border-color: @sky; + } + } + .tw-lliw.item-selected .language_list_item { + color: @blue; + } + .qv3Wpe { + color: @text; + } + .TIGsTb { + border-color: @surface0; + } + .TIGsTb:hover { + background-color: @surface0; + border-color: @surface0; + } + .MEdqYd, + .feqqG { + background: @surface2; + color: @text; + border-color: @surface2; + &:hover { + background-color: @overlay0; + border-color: @overlay0; + } + } + /* more button */ + .CybWFf { + background-color: @surface0; + } + .Lu57id { + color: @subtext0; + } + /* live sports */ + .Wrsj9b, + .ofy7ae, + .PPjCfd, + .lr-imso-fix { + background-color: @accent !important; + color: @crust !important; + } + + .liveresults-sports-immersive__match-grid-bottom-border, + .liveresults-sports-immersive__match-grid-right-border, + .YENodc { + border-color: @surface0; + } + + .liveresults-sports-immersive__match-tile:hover, + .KAIX8d:hover, + .kwbMAe { + background-color: @surface0; + } + + .imspo_mt__dt-t, + .imspo_mt__pm-infc, + .GOsQPe { + color: @text !important; + } + /* knowoledge panel uwu */ + .H73aad { + &, + &hover { + background-color: @mantle !important; + border-color: @surface0 !important; + } + } + + .AQtWSd, + .ulmfef, + .xCBykf, + .m2E3md { + color: @blue; + } + + .joHe2d { + background-color: @base !important; + box-shadow: 0 1px 0 @base !important; + } + .xt8Uw, + .ipwqjc, + .Bk8Hxd:link, + .ucRBdc, + .PDzHbe, + .pt3Hdf, + .Cv2Brc, + .IFGUre, + .review-dialog { + color: @text; + } + + .GK1a5e { + background-color: @text; + } + + .RC9d6e { + border-top-color: @text; + } + + .IFmkIb.IFmkIb { + background-color: @surface0; + border-color: @surface2; + } + .ab_button { + background-image: linear-gradient(to top, @surface0, @base); + background-color: @surface0; + border-color: @surface1; + } + + .PGbOqf { + background-color: @accent; + } + + .yAbdSd { + color: @red; + } + + .ycghLd { + background-color: @red; + border-color: @red; + } + + .IRH78d, + .CFjcj, + .HkuhB { + color: @subtext0; + } + .l2gNXd { + background-color: @yellow; + } + .uVGhGc, + .hIqKNb { + background-color: @surface0; + } + .tcuWYc { + background-image: linear-gradient( + @overlay0 1px, + rgba(255, 255, 255, 0) 0 + ); + } + .qk7LXc.Fb1AKc, + .fAt9Jd, + .SME0md, + .ipwqjc { + background-color: @base !important; + } + + .ttBXeb, + .NDTw3e.K7R36c, + .knowledge-finance-wholepage-chart__fw-uch .uch-svg { + color: @subtext0; + } + + .sQ6RSc { + fill: @text; + } + + .egcvbb { + border-color: @surface2; + &:hover { + border-color: @text; + } + } + + .knowledge-finance-wholepage-chart__hover-card { + background-color: @base; + } + .knowledge-finance-wholepage-chart__hover-card-time { + color: @subtext0; + } + + .fw-ch-sel .KWk7r.qUjgX { + background-color: @surface0; + color: @blue; + } + + .gb_Ka.gb_f, + .gb_Na.gb_f, + #gb { + background-color: @base !important; + svg, + .gb_Rc svg, + .gb_dd .gb_ld, + .gb_3c .gb_ld { + color: @text; + } + } + .gb_Nc a.gb_F, + .gb_Nc span.gb_F { + color: @text; + } + .uU7dJb { + border-bottom-color: @surface0; + background-color: @mantle; + color: @subtext1; + } + .gb_Nc .gb_d:hover { + background-color: @surface0; + } + .KxwPGc { + background-color: @mantle; + } + .HJSKzf { + color: @text; + } + + .gbqfba, + .lJ9FBc input[type="submit"] { + color: @text; + background-color: @surface0; + border-color: @surface1; + &:hover { + color: @text; + background-color: @surface0; + border-color: @surface2; + } + } + + /* AI search */ + + .UxeQfc, + .s7d4ef, + .yXu61c, + .X6JNf, + .BERAof, + .oxbMzd, + .A5s9h, + .V9Wb7c, + .GVUPk, + .GyAeWb, + .A0hi5, + .Tme6jf { + background-color: @base !important; + } + + .d3o3Ad, + .sZKvbe { + fill: @green !important; + } + + .Fzsovc, + .cwYVJe, + .RJPOee, + .vM0jzc, + .clOx1e, + .vDF3Oc.vDF3Oc .R8BTeb, + .vDF3Oc.vDF3Oc .ouxCkc, + .Yt787, + .mulB1, + .xUc8Ie, + .sfgTZc, + .I6Kpxd, + .cQEt3 { + color: @text !important; + } + + .yQLaje, + .tVoQIb, + .f9nOyf, + .kHtcsd, + .DopHqc, + .p7bv, + .ar9V1, + .DfMusf, + .y6CIle, + .JukT7c, + .xUc8Ie.BXdrne, + .sEqX7e, + .ZFiwCf { + background-color: @surface0 !important; + } + + .xUc8Ie.BXdrne, + .YUg0se, + .WGbsof { + border-color: @surface2 !important; + } + + .NOo3C { + color: @subtext1; + } + + .WGbsof[selected] { + background-color: @blue; + border-color: @blue !important; + } + + /* End of AI search */ + + /* "People also search for.." / "People also ask" section */ + .vIifob, + .p8Jhnd { + background-color: @surface0 !important; + } + + .vBnbff, + .RSWv0c.NaC7Cf, + .RSWv0c.NaC7Cf .q8U8x > div:nth-child(1) { + background-color: @surface0 !important; + color: @text !important; + } + + .DxHbyd { + background-color: @surface2 !important; + } + + .dg6jd { + color: @text !important; + } + + /* mobile ui */ + /* header background & search bar */ + .v6U7rf { + background-color: @base; + } + + .zGVn2e, + .u4frDf { + background: @surface0 !important; + } + + /* search suggestions */ + .K4VNlb, + .Sl6fgd.A7Yvie, + .Sl6fgd .zGVn2e, + .UUbT9 { + background-color: @surface0; + border-color: @surface0 !important; + } + .sb43 { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + /* text */ + .SAuUUd-z5C9Gb-fmcmS, + .tJaMb, + .TElO2c, + .cQp1Ab { + color: @text !important; + } + + .s49v2 { + b, + span { + color: @text !important; + } + } + + .ob9lvb { + color: @subtext0; + } + + /* borders */ + .Dgr5Hb, + .GqbEwc { + border-color: @surface0 !important; + } + + #gsr { + background-color: @mantle; + } + + .Ww4FFb { + box-shadow: 0 0 0 1px @base; + } + + .Faw6Fe, + .GpOXq { + border-color: @surface0 !important; + } + + .zGVn2e, + .jh86Nb { + border-color: @surface1 !important; + } + + /* Featured snippets */ + @media (prefers-reduced-motion: no-preference) { + .c2xzTb .ILfuVd b { + background: linear-gradient( + 90deg, + fade(@accent, 30%) 50%, + #0000 50% + ) no-repeat 75% 0; + background-size: 200% 100%; + } + } + + .pHiOh, + a.pHiOh { + color: @subtext1 !important; + } + a { + color: @blue; + } + .RNNXgb { + background: @surface0; + border-color: @surface1; + } + .RNNXgb:hover, + .sbfc .RNNXgb { + background: @surface0 !important; + border-color: @surface0; + box-shadow: 0 1px 6px 0 @crust; + } + .minidiv .RNNXgb { + background: @surface0; + border-color: @surface1; + &:hover { + box-shadow: 0 4px 12px @crust; + } + } + .HSryR .KsRP6 { + border-color: @surface2; + } + .emcav .RNNXgb { + box-shadow: 0 1px 6px 0 @crust; + background: @surface0; + border-color: @surface0; + } + .aajZCb { + background: @surface0; + box-shadow: 0 4px 6px 0 @crust; + } + .xtSCL { + border-top-color: @surface2; + } + .sbct:hover { + background-color: @surface1; + } + .WggQGd { + color: @mauve !important; + } + .JCHpcb { + color: @subtext0; + } + .JCHpcb:hover { + color: @blue; + } + .wM6W7d, + .ABAbCc { + color: @text; + } + .uDetx { + fill: @text; + } + .ExCKkf, + .BjWz4c { + color: @subtext0; + } + .ACRAdd { + border-left-color: @overlay0; + } + .Pvpvv { + background-color: @crust; + border-color: @surface1; + color: @text; + } + .w9dUj { + color: @text !important; + } + .Pvpvv .zE5Aq, + .adnFRd, + .XfJHbe { + color: @blue; + } + .CS4h3e { + background-color: @subtext0; + } + .Pvpvv .xyGai { + color: @text; + } + #SIvCob { + color: @text; + } + .gb_Jc a.gb_B, + .gb_Jc span.gb_B { + color: @text; + } + .gb_Jc svg, + .gb_Oc.gb_Sc svg, + .gb_Jc .gb_ad .gb_id, + .gb_Jc .gb_ad .gb_Ic, + .gb_Jc .gb_ad .gb_cd, + .gb_Oc.gb_Sc .gb_id { + color: @text; + } + .gb_Ka svg, + .gb_Oc svg, + .gb_ad .gb_id, + .gb_0c .gb_id { + color: @text; + } + .gLFyf { + color: @text; + } + .QCzoEc { + color: @overlay2; + } + .szppmdbYutt__middle-slot-promo { + color: @text; + } + .gb_Jc .gb_Ud button:hover svg, + .gb_Jc .gb_d:hover { + background-color: @surface0; + } + .gb_Jc .gb_Ud.gb_qe button:hover svg, + .gb_Ud button:hover svg, + .gb_d:hover { + background-color: @surface0; + } + .gb_We { + background: @mantle; + color: @text; + } + a.gb_B, + span.gb_B { + color: @text; + } + .gb_zc div:first-child { + color: @text; + } + .gb_zc > * { + color: @subtext0; + } + .ClJ9Yb { + color: @subtext0; + } + .sfbg { + background-color: @base; + } + .jfN4p, + .lnXdpd:not([src^="/logos/doodles/"]) { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + .aXBZVd { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + .zgAlFc { + color: @blue; + } + .fLciMb { + color: @text; + } + .d2IKib { + color: @red; + } + .fLciMb:hover { + background-color: @surface0; + } + .kno-ftr.rpBMYb { + color: @subtext0; + } + .aTI8gc { + color: @text; + } + .wwUB2c { + color: @subtext0; + } + .dhERQc { + color: @base !important; + background-color: @blue !important; + } + .z1asCe, + .ikb4Bb { + color: @subtext1 !important; + } + .rsGxI.Ww4FFb, + .Ww4FFb { + background-color: @base; + } + .RES9jf { + color: @text; + } + .CSkcDe, + .related-question-pair div.iDjcJe { + color: @text; + } + .cUnQKe .ILfuVd b, + .cUnQKe .QBI8hf b { + background-color: fade(@blue, 25%); + color: @text; + } + .cUnQKe .ILfuVd, + .cUnQKe .UiGGAb.ILfuVd { + color: @subtext1; + } + .ZYHQ7e { + color: @subtext0; + } + .VuuXrf { + color: @text; + } + .hb8SAc, + .gb_Oc a.gb_H, + .gb_Oc span.gb_H { + color: @text; + } + .TQc1id .I6TXqe { + border-color: @surface2; + } + .I6TXqe, + .zaokob { + background: @base; + } + .tw-lliw:hover, + .tw-lliw:focus { + background-color: @surface0; + } + .language_list_languages.tw-ll-top::after { + background: linear-gradient(to bottom, transparent, @base); + } + .HsZQAe { + border-bottom-color: @surface2; + } + .KLEmSd { + border-bottom-color: @surface1; + } + .NtaMpb .niO4u, + .nZWEZc .ttwCMe, + .xNzW0d, + .lWzCpb { + background-color: @base; + } + .aURkK { + border-left-color: @surface1; + } + .iRPzcb { + border-bottom-color: @surface1; + } + .related-question-pair .d0fCJc { + color: @text; + } + cite, + cite a:link, + cite a:visited { + color: @subtext0; + } + .WZ8Tjf, + .EZAeBe, + .F0gfrd { + color: @subtext0; + } + .yDYNvb.lyLwlc { + color: @text; + } + .H9lube { + background-color: @base; + border-color: @surface2; + } + .Bi9oQd { + background-color: @surface1; + } + .akqY6 { + background: @surface1; + } + .KFFQ0c .YfftMc, + .KFFQ0c .YfftMc span, + .KFFQ0c .YfftMc div, + .KFFQ0c .YfftMc a, + g-menu.DWsAYc g-menu-item a.K1yPdf, + .f3LoEf, + .TXBhSe:hover, + .TXBhSe:not(:hover), + .r025kc.lVm3ye, + .Bo9xMe, + .oyj2db { + color: @subtext0; + } + .dyjrff, + .LEwnzc { + color: @subtext1; + } + .ZFiwCf { + background-color: @surface0; + &:hover { + background-color: @surface1; + } + } + .LGwnxb, + .WGwSK { + color: @text; + } + .EsIlz { + background-color: @base; + border-color: @surface1; + } + .O7G3Gd { + color: @text; + &:hover { + color: @blue; + } + } + .appbar { + background: @base; + border-top-color: @surface1; + } + .bSeRjc:hover .fKmH1e { + color: @subtext1; + background-color: @surface0; + } + .bSeRjc:hover div[aria-expanded="true"] .fKmH1e, + div[aria-expanded="true"] .fKmH1e { + background-color: fade(@blue, 25%); + color: @blue; + } + .LHJvCe, + .vqseUe, + .dMCttd { + color: @subtext0; + } + .dG2XIf .xpdbox .yc7KLc { + background-color: @base; + } + .URgIvb { + border-color: @blue; + background-color: @blue; + } + .pdpvld { + color: @green; + } + .YrbPuc { + color: @subtext1; + } + .SRfaKe, + .SRfaKe h2 { + background-color: @mantle; + } + .y6CIle { + background-color: @surface0; + } + .Yt787, + .vDF3Oc.vDF3Oc .R8BTeb { + color: @text; + } + .IDFSOe { + background-color: @surface2; + } + .ffmmcd, + .u7yw9 .WeviRb { + border-color: @surface1; + } + .wdQNof { + border-color: @surface1; + background-color: @base; + } + .PewBWb { + border-top-color: @surface1; + } + .eadHV.Ses7yd { + color: @text !important; + } + .f, + .j04ED, + .j04ED a, + .j04ED a:link, + .XaIwc { + color: @subtext0 !important; + } + #_Xg6uZYKGBYCDhbIPvK2s2AI_27 + > div:nth-child(3) + > g-right-button:nth-child(1) + > g-fab:nth-child(1), + g-right-button.wgbRNb > g-fab:nth-child(1) { + background-color: @crust !important; + } + .gb_2e { + background-color: @surface0; + } + .gb_Ec { + div:first-child { + color: @text; + } + > * { + color: @subtext0; + } + } + .kLhEKe { + background-color: @base; + } + .S8ee5.CwbYXd { + color: @text; + } + .S8ee5 { + background: @surface0; + } + .S8ee5:hover { + background: @surface1; + } + .rhHIGd { + background-color: @surface2; + } + .sY7ric { + color: @text; + } + .I6a0ee { + background-color: @base; + border-color: @surface2; + color: @text; + } + .I6a0ee:hover { + background-color: @mantle; + border-color: @surface2; + } + .I6a0ee:focus { + background-color: @crust; + border-color: @surface2; + } + .pxhZNb { + background-color: @surface0 !important; + color: @text; + } + .d2F2Td { + color: @text; + } + .c07z9 { + color: @subtext0; + } + .c07z9 a, + .c07z9 a:active, + .c07z9 a:link { + color: @text; + text-decoration-color: @subtext0; + } + .wHYlTd { + color: @subtext0; + } + .dG2XIf .c2xzTb .wDYxhc:first-child { + background: @base; + } + .fm06If .ILfuVd, + .c2xzTb .ILfuVd, + .Jb0Zif .c2xzTb .ILfuVd { + color: @text; + } + .fm06If .ILfuVd b, + .c2xzTb .ILfuVd b { + background-color: fade(@blue, 25%); + color: @text; + } + .GKS7s { + background: @surface0; + border-color: @surface1; + box-shadow: inset 0 0 0 1px @surface2; + } + .GKS7s:hover { + background-color: @surface1 !important; + border-color: @surface2; + } + .yXK7lf em { + color: @text; + } + .Lb0dA:hover { + background-color: @surface0; + } + .Lb0dA[aria-expanded="true"]:hover .EGarzf { + color: @blue; + } + .Lb0dA[aria-expanded="true"] { + background-color: fade(@blue, 25%); + } + .BaegVc:hover { + background-color: @surface0; + } + .hdtb-tl-sel .BaegVc { + background-color: fade(@blue, 25%); + } + .BaegVc:focus { + background-color: fade(@blue, 25%); + } + .TZqsAd { + background: @overlay0; + } + .FalWJb { + background: @base; + } + .YeThId { + border-top-color: @surface1; + } + .k8XOCe { + background-color: @surface0; + } + .s75CSd { + color: @text; + } + .ZkkK1e, + .uAbMZd { + background: @base; + border-color: @surface1; + &:hover { + background: @surface0; + } + } + .QjI2jc { + color: @subtext0; + } + .lhLbod { + color: @subtext0; + } + .nr7I6e div[aria-expanded="true"] .F75bid, + .nr7I6e div[aria-expanded="true"]:hover .fFI3rb .F75bid { + color: @blue; + } + .F75bid { + color: @subtext0; + } + div[aria-expanded="true"] .fFI3rb { + background-color: fade(@blue, 25%) !important; + } + div[aria-expanded="true"]:hover .fFI3rb:hover { + background-color: fade(@blue, 25%) !important; + } + .MAMMm { + background: @mantle; + box-shadow: 0 2px 6px @crust !important; + } + [selected].nWtjMe { + background: fade(@blue, 25%) !important; + } + .uZNuIf:hover { + background-color: @surface0; + color: @text; + } + [selected].nWtjMe .FMKtTb { + color: @text; + } + .nWtjMe .FMKtTb { + color: @subtext0; + } + .GKS7s .FMKtTb, + .GKS7s .RWhoyd.mol54e { + color: @text; + } + .ePSouf .FMKtTb { + color: @subtext0; + } + .NkCsjc:hover { + background-color: @surface0 !important; + color: @text; + } + .nr7I6e div[aria-haspopup="true"]:hover .F75bid { + color: @text; + } + a.hisnlb { + background: fade(@overlay2, 25%); + } + div[aria-expanded="true"] .fFI3rb, + div[aria-expanded="true"]:hover .fFI3rb:hover { + background-color: @surface0 !important; + } + .hdtb-tl-sel .BaegVc .WjMmQ:hover { + color: @blue; + } + .hdtb-mn-hd { + color: @subtext0; + } + .hdtb-mn-hd:hover { + color: @text; + } + .fSnalc { + stroke: @blue; + } + .oOg6Ne { + stroke: @yellow; + } + .ZqPjbb { + stroke: @red; + } + .aPiskd { + stroke: @green; + } + .s8GCU { + background-color: @base; + } + .Lj9fsd { + background-color: @base; + } + .jZWadf { + background-color: @base; + } + .rQEFy, + .rQEFy:hover { + border-color: fade(@blue, 25%); + background-color: fade(@blue, 25%); + } + .gbZSUe { + color: @text; + } + .gbZSUe:hover { + background: @surface0; + } + .XZ5MVe { + color: @blue; + } + a:visited { + color: @mauve; + } + .SvoXfb > .x5f7Bc { + fill: @subtext0; + } + .SvoXfb:hover > .x5f7Bc { + fill: @text; + } + .SvoXfb:hover { + background-color: @surface0; + } + .IsZvec, + .yxAsKe { + color: @subtext0; + } + .zqrO0.k0Jjg .QuU3Wb, + .zqrO0.k0Jjg:hover .QuU3Wb { + color: @subtext1; + } + .uo4vr { + color: @subtext0; + } + .minidiv .sfbg { + background: @base; + box-shadow: 0 1px 6px 0 @crust; + } + .aqCVJb { + background-color: @blue !important; + border-color: @blue !important; + } + .T8VaVe { + color: @blue; + } + .tw-ta, + #tw-source-text-container .tw-ta, + #tw-source-rmn-container .tw-ta { + color: @text; + } + .tw-bilingual-marked { + border-color: @blue; + } + #tw-target { + background-color: @surface0; + } + .tw-data-placeholder { + color: @text; + } + .j1iyq { + border-color: @surface2; + } + .w8qArf .fl { + color: @text !important; + } + .HSryR a.B1uW2d { + border-bottom-color: @surface2; + } + .usJj9c .zz3gNc { + color: @text; + } + .Ss2Faf a { + color: @text; + } + .aCOpRe em, + .yXK7lf em { + color: @text; + } + .FR7ZSc .niO4u { + background-color: @base; + border-color: @surface2; + color: @blue; + } + .g { + color: @text; + } + .VSHxQ { + color: @subtext0; + } + .cF4V5c { + background-color: @crust !important; + } + .cF4V5c g-menu-item a, + .cF4V5c g-menu-item a:visited, + .cF4V5c g-menu-item a:hover { + color: @text; + } + .cF4V5c:hover g-menu-item:hover a, + .cF4V5c:hover g-menu-item a:visited, + .cF4V5c g-menu-item a:hover { + background-color: @surface0; + } + .GZnQqe.LGiluc { + border-top-color: @surface2 !important; + } + .pkWBse { + box-shadow: 1px 1px 15px 0 @crust; + } + .dG2XIf { + background: @base; + border-color: @surface0 !important; + } + .Z0LcW { + color: @text; + } + .i29hTd .qLLird { + color: @text; + } + .i29hTd .kR7nSc { + color: @text; + } + .N6Sb2c { + color: @subtext0; + } + .C9iYEe { + color: @subtext0; + } + .KcXNxb { + background: @base; + } + .ss6qqb .PKDVJd { + color: @subtext0; + } + a.oBa0Fe { + color: @subtext0; + } + .o6juZc { + background-color: @surface0; + } + .o6juZc:hover { + background-color: @surface0; + box-shadow: 0 4px 12px @crust; + } + .W6pGoe { + background: @surface0; + box-shadow: 0 4px 6px 0 @crust; + } + .WdWr7c { + border-top-color: @surface2; + } + .sU3bKf { + color: @text; + } + .O5OUld { + color: @subtext0; + } + .zP7KFe { + background: @surface1; + } + .O5OUld:hover { + color: @blue; + } + .og3lId { + color: @text; + } + .M3w8Nb .o6juZc { + box-shadow: 0 1px 6px 0 @crust; + } + .r8xEL { + color: @text; + } + .ZZ7G7b { + color: @text; + border-color: @surface1; + } + .NZmxZe { + background-color: @base; + border-color: @surface1; + color: @text; + } + .NZmxZe:not(.rQEFy):hover, + .cj2HCb.iuN0sf .w6PoOe:hover, + .CgGjZc:hover { + background-color: @surface0; + border-color: @surface1; + color: @text; + } + .ssfWCe .ZXJQ7c, + .cj2HCb.iuN0sf .w6PoOe, + .G2XB8d, + .cj2HCb.iuN0sf .w6PoOe .KA8Jyb { + color: @subtext0; + .KA8Jyb:hover { + fill: @subtext1; + } + } + .KA8Jyb { + fill: @subtext0; + } + .CgGjZc:hover .G2XB8d { + color: @subtext1; + } + .o6OF0 { + background-color: @surface1; + &:hover { + background-color: @surface2; + } + .SHFPkb { + color: @text; + } + .PnfqLc { + color: @subtext0; + } + } + .zbRPDe, + .scU1d { + color: @text; + } + .UafVBb { + background-color: @base; + border-color: @surface2; + } + .mEQved { + color: @subtext0; + } + .goxjub { + > path:nth-child(1) { + fill: @blue; + } + > path:nth-child(2) { + fill: @green; + } + > path:nth-child(3) { + fill: @yellow; + } + > path:nth-child(4) { + fill: @red; + } + } + [fill="#34a853"] { + fill: @green; + } + [fill="#4285f4"] { + fill: @blue; + } + [fill="#ea4335"] { + fill: @red; + } + [fill="#fbbc05"] { + fill: @yellow; + } + .ssfWCe .ZXJQ7c:hover { + background-color: @surface0; + color: @text; + } + .qcTKEe { + background-color: @base; + } + .ooPrBf { + background: @base; + } + .r9PaP { + color: @subtext0; + } + .r9PaP:hover { + color: @blue; + } + .H1KrKd { + fill: @subtext0; + } + .cEPPT { + border-bottom-color: @surface1; + } + .Ix6LGe { + background: @base; + box-shadow: 0 2px 10px 0 @crust; + } + .Hm7Qac:hover, + .EuKAde { + background-color: @surface0; + } + .igM9Le { + color: @text; + } + .irf0hb { + box-shadow: 1px 1px 15px 0 @crust; + } + .gb_Mc .gb_Vd button:hover svg, + .gb_Mc .gb_d:hover { + background-color: @surface0; + } + .gb_Mc svg, + .gb_Rc.gb_Vc svg, + .gb_Mc .gb_dd .gb_ld, + .gb_Mc .gb_dd .gb_Lc, + .gb_Mc .gb_dd .gb_fd, + .gb_Rc.gb_Vc .gb_ld { + color: @text; + } + .cEW58 { + background-color: @surface0; + } + .dyAbMb { + fill: @subtext0; + } + .zItAnd, + .zItAnd:link, + .zItAnd:visited, + .zItAnd:hover, + .zItAnd:active { + color: @text; + } + .zItAnd { + background-color: @base; + border-color: @surface1; + } + .zItAnd:not(.MgQdud):hover { + background-color: @surface0; + border-color: @surface1; + } + .fKmH1e { + background-color: @base; + border-color: @surface1; + color: @subtext0; + } + .fKmH1e:hover { + background-color: @surface0; + border-color: @surface1; + } + .nfSF8e, + .WRhYSc { + color: @subtext0; + } + .nfSF8e:hover, + .WRhYSc:hover { + background-color: @surface0; + color: @subtext0; + } + .ssJ7i { + color: @text; + } + .iAIpCb { + color: @subtext0; + } + .KMdzJ, + .ss6qqb .oBrLN, + .ylgVCe { + color: @subtext1; + } + .PmPt7d { + color: @subtext0; + } + .gb_Mc a.gb_E, + .gb_Mc span.gb_E { + color: @text; + } + a.gb_E, + span.gb_E { + color: @text !important; + } + .RzdJxc { + border-top-color: @surface2; + } + .rKnmn { + border-top-color: @surface2; + } + .FzCfme { + color: @subtext0; + } + .hMJ0yc { + color: @subtext0; + } + .yg51vc { + background-color: @base; + } + .hdtb-mitem a { + color: @subtext0; + } + .hdtb-mitem .GOE98c, + .hdtb-mitem a, + .hdtb-mitem.hdtb-msel, + .t2vtad { + color: @subtext0; + } + .t2vtad:not(.hdtb-tl-sel) { + color: @subtext0; + } + .dG2XIf .xpdopen .mJ2Mod { + border-color: @surface1; + } + .t2vtad:not(.hdtb-tl-sel):hover { + background-color: @surface0; + border-color: @surface1; + color: @text; + box-shadow: 0 1px 1px @crust; + } + .hdtb-mitem:hover .GOE98c:hover, + .hdtb-mitem:hover a, + .hdtb-mitem.hdtb-msel, + .t2vtad:hover { + color: @blue; + } + .w6PoOe { + color: @subtext0; + } + .w6PoOe:hover { + color: @text; + } + .Lj9fsd.DU1Mzb { + background-color: @base; + box-shadow: 0 1px 6px 0 @crust; + .o6juZc { + border-color: @surface1 !important; + } + } + .dZ5aUe .vbLSne .MjJqGe:not(.xvfzbc):hover { + background-color: @surface0; + } + .FjVBEd { + color: @green; + } + title-with-lhs-icon:hover .ekf0x h3 { + color: @blue; + } + .GmE3X { + color: @text; + } + .iv236 { + color: @text; + } + .GLcBOb { + border-bottom-color: @surface1; + } + .ss6qqb .Ui2TZ { + color: @text; + } + .wx62f { + color: @subtext0; + } + #rhs .u7yw9 { + border-left-color: @surface1; + } + .ss6qqb .Jk5Tjc { + border-color: @surface2; + } + #rhs .u7yw9 .cLjAic { + border-bottom-color: @surface1; + } + .JNkvid .HnYYW { + color: @text; + } + .aokhrd .TZahnb { + border-left-color: @surface1; + } + .Cx1ZMc { + color: @subtext0; + } + .CBPSbf { + background-color: @base; + } + .E74aCb { + color: @text; + } + .OE86Gc { + background-color: @base; + color: @text; + fill: @text; + } + .c72nic { + color: @text; + } + .GXMTjb { + background-color: @base; + border-color: @surface0; + } + .A9y7kf { + color: @subtext0; + } + .OE86Gc a { + color: @blue; + } + .Es2Et { + color: @subtext0; + } + .KwJT0.VqKh3b div div { + background-color: @base; + fill: @text; + color: @text; + border-color: @surface1; + } + .rx7XFb { + background-color: @surface0; + } + .VP31Vb { + color: @text; + } + .HXQjqf { + background-color: fade(@blue, 25%); + color: @blue; + } + .SW5pqf { + color: @blue; + } + .rQEFy:hover { + color: @blue; + } + .hdtb-tl-sel { + border-color: @surface2; + background: @surface0; + color: @text; + } + .hdtb-tl-sel:focus { + border-color: @surface2; + background: @surface0; + color: @blue; + } + .t2vtad:active, + .t2vtad:not(.hdtb-tl-sel):hover:active { + background-color: @surface0 !important; + box-shadow: inset 0 1px 2px @crust !important; + } + .gTl8xb { + border-color: @subtext0 transparent; + } + .hdtb-mn-hd:hover .gTl8xb { + border-color: @text transparent; + } + .h3L8Ub .yMAEcf { + background: @surface0; + border-color: @surface2; + } + .ynRric { + color: @subtext0; + } + .cRV9hb .pcTkSc .wM6W7d { + color: @text; + } + .h3L8Ub .yMAEcf.sbhl { + background-color: @surface1; + } + .sbhl { + background: @surface1; + } + .CjiZvb, + .GZnQqe.EpPYLd:active { + background-color: @surface0; + } + .PyJv1b { + color: @text; + } + .REySof { + color: @overlay2 !important; + } + .NQyKp { + color: @surface0 !important; + background: @accent !important; + } + .b0Xfjd { + color: @base !important; + } + .LiOdre { + background-color: @base; + border-color: @surface1; + } + .LiOdre:hover { + background-color: @mantle; + border-color: @surface2; + } + .LiOdre:focus { + border-color: @blue; + } + .mfsgsd { + color: @text; + } + .GCSyeb { + background: @surface1; + } + .IVvPP .cLjAic.WY0eLb, + .Hwkikb.WY0eLb { + border-left-color: @surface1; + } + .mQo3nc { + background-color: @surface0; + color: @subtext0 !important; + } + .cfBJGe { + color: @text; + } + .f6F9Be { + background: @mantle; + } + .KwU3F { + color: @blue; + } + .b0KoTc { + color: @text; + } + .dfB0uf { + color: @text; + } + .unknown_loc { + background: @text; + } + .GS5rRd { + color: @blue; + } + .xSQxL { + color: @blue; + } + .smiUbb { + color: @text; + } + .b2hzT { + border-bottom-color: @surface0; + } + #swml { + border-left-color: @surface0; + } + .KXbwLb { + background-color: @surface2; + } + .WZH4jc .VknLRd .GNJvt { + background: @surface0; + } + .WZH4jc .VknLRd:hover .GNJvt { + background: @surface1; + } + .GNJvt { + color: @text; + } + .fJOpI.H9lube { + background-color: @blue !important; + border-color: @blue; + } + .XNo5Ab.XNo5Ab { + color: @base !important; + fill: @base !important; + } + .Ss2Faf.boljiHqtXe7__place-qa-title { + color: @text !important; + } + .xEzgBc { + color: @text !important; + } + .Ss2Faf.sq4Bpf { + color: @text !important; + } + .ea0Lbe { + background: @surface0; + } + .f6GA0, + .CacfB, + .Ua7Yuf { + background: @base; + } + .DV7the { + color: @blue; + } + .ZeVBtc { + color: @subtext0; + } + .cB9M7 { + background-color: @surface0; + border-color: @surface1; + color: @text; + &:hover { + border-color: @surface2; + } + &:focus { + border-color: @blue; + } + } + .Qwbd3 { + background: @surface0; + color: @text; + border-color: @surface1; + &:hover { + background: @surface1; + border-color: @surface2; + } + } + .ArIAXb { + fill: @surface0; + } + .qOFLsb { + fill: @surface0; + } + .aHK1bd { + color: @subtext0; + } + .diOlIe { + border-top-color: @overlay0; + } + .p4pvTd { + color: @text; + } + .gIYJUc { + background: @base !important; + border-color: @surface1 !important; + } + .Gdd5U > g:nth-child(2) { + > circle:nth-child(1) { + fill: @green !important; + } + > circle:nth-child(2) { + fill: @blue !important; + } + > path:nth-child(3) { + fill: @red !important; + } + > path:nth-child(4) { + fill: @yellow !important; + } + > path:nth-child(5) { + fill: @blue !important; + } + } + .CbAZb { + background: @base; + border-bottom-color: @surface0; + } + .S8wJ3 { + color: @text !important; + } + .ZI7elf { + color: @text !important; + } + .tGS0Nc { + color: @text; + } + .kzt0Nc a { + color: @subtext0 !important; + } + .fgc1P, + .N7KPxb { + border-top-color: @surface0 !important; + } + .kQEH5b { + color: @subtext0 !important; + } + .kNKdL { + color: @text !important; + } + .q0yked:hover { + background-color: @mantle !important; + } + .Oz5Rbb:hover { + background: @mantle !important; + } + .lwwARb { + background-color: @crust !important; + } + .LO47Ff { + color: @text; + } + .j8PBfc { + color: @subtext0; + } + .act-tim-txt-cnt { + color: @text; + } + .act-switch-area { + background-color: @base !important; + } + .EwDHG, + .vNdLpe, + .vNdLpe:visited { + color: @subtext0 !important; + } + // "Looking for results in English?" popup + [style*="background:#1f1000;border:1px solid #502900"], + [style*="background:#feefc3;border:1px solid #fdd663"] { + background: @mantle !important; + border-color: @surface0 !important; + box-shadow: 0 2px 4px @mantle !important; + [style*="color:#bdc1c6"], + [style*="color:#202124"] { + color: @text !important; + } + } + // translate this page label + .eFM0qc.BCF2pd { + background: @base !important; + } + // expand related question icon + .aj35ze { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + // tabs + [selected].YmvwI { + color: @text; + border-bottom-color: @text; + } + .YmvwI { + color: @subtext0; + } + // search bar buttons popups + [style^="background: rgb(32, 33, 36); border: 1px solid rgb(60, 64, 67);"] { + background: @mantle !important; + border-color: @overlay0 !important; + box-shadow: @mantle 1px 2px 4px !important; + color: @text !important; + [style^="border-style: solid;"] { + border-color: @overlay0 transparent !important; + } + } + // google apps button + .gb_F .gb_E, + .gb_F .gb_D { + fill: @text; + } + // translate popup + .t4wgMc { + background: @mantle; + } + .ELfqBe:hover, + .ELfqBe:focus { + background: @surface0; + } + .JFeuTc { + color: @text; + } + // skip to content + .S6VXfe { + background: @base; + } + // selected image + .qyKxnc.FnEtTd .srrRv { + background: fade(@blue, 10%); + } + // images page sticky suggestions header + .JiJthb, + .JiJthb .GKS7s:not([selected]) { + background: @mantle; + } + .JiJthb .F9Idpe.vezEod { + background: linear-gradient( + to left, + transparent 0%, + @mantle 60%, + @mantle + ); + } + + /// tv show information + // episode title + .huUgrf { + color: @blue; + } + // episode divider + .PZPZlf, .Ea7JLb { + border-color: @surface2; + } + /// season selection + // underline + .A0zxBb { + color: @text; + } + // background and border + .qFF17c { + background-color: @surface0 !important; + border-color: @surface2 !important; + } + // middle divider + .qFF17c > div { + border-color: @surface2 !important; + } + // text + .F3Istb > span { + color: @subtext1 !important; + } + // text underline + .F9SH7d { + border-color: @text !important; + } + /// watch buttons + // button + .ZkkK1e { + background-color: @surface0; + border-color: @surface1; + } + // text + .HJFlGc { + color: @text; + } + // play button + .GzErzd { + color: @blue !important; + } + + // footer logo + [style^="background:url(/images/nav_logo321.webp)"] { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + // tweets horizontal list + g-right-button, + g-left-button { + > g-fab { + background: @crust !important; + border-color: @surface0; + } + } + .vwfsqc { + .QuU3Wb { + color: @text; + } + } + // image overlays + .yUzGqc.wr8GYd { + background: fade(@crust, 75%); + color: @text; + } + // google lens icon hover + .ig2Tkd:hover:not(.RDPZE) { + background: fade(@mantle, 80%); + } + // image resolution + .UWuvyf { + background-color: fade(@crust, 80%); + color: @text; + } + // image hover shadow + .mkpRId.qyKxnc:hover .F0uyec { + background: fade(@crust, 5%); + box-shadow: 0 2px 12px 0 @crust; + } + // advanced search + input.jfk-textinput, + .gGbPid { + background: @base; + color: @text; + border-color: @overlay0; + } + .goog-menu { + background: @mantle; + } + .goog-menuitem-highlight, + .goog-menuitem-hover { + background: @surface0; + border-color: @surface0; + } + .goog-menuitem, + .goog-menuitem-highlight .goog-menuitem-content, + .goog-menuitem-hover .goog-menuitem-content { + color: @text; + } + .goog-flat-menu-button-hover { + border-color: @overlay2; + .goog-flat-menu-button-dropdown { + border-color: @overlay2 transparent; + } + } + .goog-flat-menu-button-dropdown { + border-color: @overlay0 transparent; + } + div.otByu div.FAcADc, + div.lFApYd, + .jfk-radiobutton-label { + color: @subtext1; + } + // knowledge panel + .Qc895c, + .Utq4Cb.PZPZlf, + .SU02Qd g-inner-card { + background-color: @surface0 !important; + } + .Qc895c div, + .Utq4Cb.PZPZlf div, + .CYJS5e { + color: @text !important; + } + .CYJS5e.W0urI, + .REySof.T9jMmf, + .b0Xfjd.Hyaw8c, + .dvfTSb.OdANFd { + background-color: @surface0 !important; + color: @text !important; + } + .CYJS5e.W0urI:hover { + background-color: @surface1 !important; + } + .gEYEQc.x5W9xd.qYvl9c.klitem, + .MJfuMd { + background-color: @base !important; + border-color: @surface1 !important; + } + .NQyKp.Hyaw8c.h4wEae.Maj6Tc { + border-color: @text !important; + } + color: @subtext0; + } + @media (prefers-color-scheme: light) { + body { + #catppuccin(@lightFlavor); + } + } + @media (prefers-color-scheme: dark) { + body { + #catppuccin(@darkFlavor); + } + } +} + +@-moz-document regexp("^https?://(ogs\\.)?google\\..*") { + body { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + + .aRDKUe { + .rRF0wd { + fill: @yellow !important; + } + .ub0gT { + fill: @base !important; + } + .Pzuhxc { + color: @text !important; + &:hover { + background-color: @surface2 !important; + } + } + .hCDve { + color: @text !important; + } + .WkuXae { + color: @blue; + } + .coHE2 { + border-color: @surface2 !important; + &:hover { + background-color: fade(@blue, 25%); + } + } + .eYSAde { + color: @text !important; + } + .Lvwayc { + background-color: @surface0 !important; + } + .Z6NXed { + color: @text !important; + } + .bMnvr { + background: @surface1 !important; + } + .Wdz6e { + color: @subtext0 !important; + } + .LzIwWe { + color: @text !important; + } + .znj3je { + color: @text !important; + } + .fVFoBd { + color: @text !important; + } + .cllK4d { + background: @surface0 !important; + color: @subtext0 !important; + } + .aFCkf { + background: @surface0 !important; + color: @blue !important; + } + .DgDbFe .vZvJBb:not(:first-child) .BVnP4c::before { + color: @text !important; + } + .qLP7kc .jFfZdd { + background: @base !important; + } + .Z6NXed:hover { + background-color: @surface1 !important; + } + } + .nz9sqb.EHzcec { + background: var(--gm3-sys-color-surface-container-high, @surface0); + .LVal7b { + background: var(--gm3-sys-color-surface-container-low, @mantle); + } + } + .nz9sqb { + .NQV3m { + color: var(--gm3-sys-color-primary, @blue); + border-color: var(--gm3-sys-color-outline, @surface2); + &:hover { + background-color: fade(@blue, 25%); + } + &:focus { + background-color: fade(@blue, 25%); + } + } + .Rq5Gcb { + color: @text !important; + } + .tX9u1b:hover { + background-color: @surface0; + } + } + .nz9sqb.o07G5 .tX9u1b:active, + .nz9sqb.o07G5 .tX9u1b:active:focus, + .nz9sqb.o07G5 .tX9u1b:active .Rq5Gcb, + .nz9sqb.o07G5 .tX9u1b:active:hover .Rq5Gcb { + background-color: @surface0; + } + .aRDKUe .pRjiJb, + .aRDKUe .DmSTqc { + color: @text; + } + .aRDKUe .idKC9b, + .aRDKUe .MbHqJ { + color: @subtext0; + } + .aRDKUe .GXg3Le { + color: @blue; + } + .aRDKUe .G5bXNb { + background-color: @mantle; + &:hover { + background-color: @base; + } + } + } +} diff --git a/styles/grabify/README.md b/styles/grabify/README.md new file mode 100644 index 0000000000..0c3a59b82c --- /dev/null +++ b/styles/grabify/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Grabify + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [trinkey](https://github.com/trinkey) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/grabify/catppuccin.user.less b/styles/grabify/catppuccin.user.less new file mode 100644 index 0000000000..552a3d2626 --- /dev/null +++ b/styles/grabify/catppuccin.user.less @@ -0,0 +1,525 @@ +/* ==UserStyle== +@name Grabify Catppuccin +@namespace github.com/catppuccin/userstyles/styles/grabify +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/grabify +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/grabify/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agrabify +@description Soothing pastel theme for Grabify +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("grabify.link") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + background-color: @base; + + a { + color: @accent; + + &:hover, + &:focus { + color: darken(@accent, 5%); + } + + &[style*="color: "] { + color: @accent !important; + + &:hover, + &:focus { + color: darken(@accent, 5%) !important; + } + } + } + + hr, + .light-shaded { + background-color: @surface0; + } + + body, + strong, + article :is(h1, h2, li), + .content :is(h1, h2, h3), + .label, + .radio:hover, + .checkbox:hover, + .title, + .subtitle, + .pw-post-title, + .pw-post-body-paragraph { + color: @text; + } + + // Live support box + #wrapper ~ div:has(iframe[style*="color-scheme:light"]) { + display: none !important; + } + + .has-text-white { + color: @text !important; + } + + .has-text-white-ter { + color: @subtext1 !important; + } + + .has-text-grey, + .is-author-metadata, + figcaption, + article blockquote p { + color: @subtext0 !important; + } + + .navbar { + background-color: @crust; + border-color: @surface0; + } + + .navbar-item, + .navbar-link { + color: @text; + + &:hover, + &:focus { + color: @accent !important; + } + } + + .navbar-link:not(.is-arrowless)::after { + border-color: @accent; + } + + .navbar-dropdown { + background-color: @crust; + color: @text; + border-top-color: @surface0; + box-shadow: none; + } + + .has-gradient-bg.to-bottom-left { + background: @mantle; + } + + .landing-hero { + background: @mantle; + } + + polygon[fill="white"] { + fill: @base !important; + } + + [style*="color: red"], + [style*="color: rgb(224, 36, 36);"], + [style*="color: rgb(224, 185, 36);"], + [style="color: rgb(33, 150, 243);"] { + color: @accent !important; + } + + [style="color: rgb(44, 62, 80);"], + [style="font-style: italic; color: rgb(0, 0, 0);"] { + color: @subtext0 !important; + } + + [style="color: rgb(41, 182, 246);"] { + color: @blue !important; + } + + [style="color: rgb(0, 150, 136);"] { + color: @teal !important; + } + + [style="color: rgb(139, 195, 74);"] { + color: @green !important; + } + + .how-it-works-box { + background-color: @mantle; + box-shadow: none; + } + + [data-tooltip] { + &.has-tooltip-arrow { + &.has-tooltip-right::after { + border-right-color: @surface0; + } + + &.has-tooltip-bottom::after { + border-bottom-color: @surface0; + } + + &.has-tooltip-left::after { + border-left-color: @surface0; + } + + &.has-tooltip-top::after { + border-top-color: @surface0; + } + } + + &::before { + background-color: @surface0; + color: @text; + } + } + + [aria-label="Share Post"] path { + fill: @text; + } + + .dropdown-content { + background-color: @mantle; + + a.dropdown-item { + color: @text !important; + + &:hover { + background-color: @crust; + } + } + } + + .footer { + background-color: @mantle !important; + color: @text; + + .footer-separator { + background-color: @surface0; + } + } + + .switch[type="checkbox"] { + + label { + &::before { + background-color: @surface0; + } + + &::after { + background-color: @text; + } + } + + &:checked + label { + &::before { + background-color: @accent; + } + + &::after { + background-color: @base; + } + } + } + + .message.is-primary { + background: transparent; + + .message-header { + background-color: @mantle; + color: @text; + } + + .message-body { + background-color: @surface0; + color: @text; + } + } + + .button { + &:not(.is-ghost), + &.is-light { + border-color: @surface0; + background-color: @mantle; + + &, + strong { + color: @text; + } + + &:hover, + &.is-hovered { + background-color: @crust; + } + } + + &.is-primary, + &.is-info, + &.is-link { + background-color: @accent; + + &, + strong { + color: @crust; + } + + &:hover, + &.is-hovered { + background-color: darken(@accent, 5%); + } + } + + &.is-info.is-outlined { + border-color: @accent; + background: transparent; + + &, + strong { + color: @text; + } + + &:hover, + &.is-hovered { + color: @accent; + } + } + + &.is-danger { + background-color: @red; + + &, + strong { + color: @crust; + } + + &:hover, + &.is-hovered { + background-color: darken(@red, 5%); + } + } + } + + .input { + background-color: @mantle; + box-shadow: none; + border-color: @surface0; + color: @text; + } + + .card { + background-color: @mantle; + color: @text; + border-color: @surface0; + + .card__description, + .card__title, + .card__website { + color: @text; + } + + .card__image { + border-bottom-color: @surface0; + } + } + + .box { + box-shadow: none; + color: @text; + background-color: @mantle !important; + border-color: @surface0 !important; + } + + .table { + background-color: @mantle; + + &.is-hoverable tbody tr:hover, + &.is-striped tbody tr:nth-child(2n) { + background-color: @crust !important; + } + + .sortable th[data-sorted] { + &:hover { + background-color: @crust; + color: @text; + } + + &::after { + color: @text; + } + } + + th, + td { + border-color: @surface0; + color: @text; + + &[style*="color:"] { + color: @subtext0 !important; + } + } + } + + .log-table { + :is(.is-table-date, .is-table-ip, .is-table-country) div:nth-child(2), + .is-table-referrer .is-no-referrer { + color: @subtext0; + } + } + + .notification { + &.is-success { + background-color: @green; + } + + &.is-warning { + background-color: @yellow; + } + + &.is-danger { + background-color: @red; + } + + &, + strong { + color: @crust; + } + } + + #ab { + // Ad block detection modal + .css1.css2, + .ab_footer { + background-color: @base !important; + box-shadow: 0 2px 12px 0 fade(@crust, 20%); + } + + [style*="color: rgb(44, 62, 80)"] { + color: @text !important; + } + } + + #ab, + .modal-background { + background-color: fade(@crust, 65%) !important; + } + + .modal-card-head, + .modal-card-body, + .modal-card-foot { + background-color: @base; + border-color: @surface0; + } + + .modal-card-title { + color: @text; + } + + .delete { + &::before, + &::after { + background-color: @text; + } + } + + #root .app { + // Ad block disable instructions + [style="color: rgb(0, 0, 0);"] { + color: @text !important; + } + + .btn { + background-color: @accent; + + &[style="background-color: rgb(23, 188, 156);"] { + background-color: @accent !important; + } + + [style="color: rgb(255, 255, 255);"] { + color: @mantle !important; + } + + &.btn-outline { + background: @crust; + box-shadow: inset 0 0 0 1px + @surface0; // the outline property exists for a reason... + } + } + + .blockers { + .blocker.selected, + .blocker:hover { + background-color: @mantle; + } + + .arrow-icon path { + fill: @text !important; + } + } + } + + .select { + &:not(.is-multiple, .is-loading)::after { + border-color: @text; + } + + select { + background-color: @mantle; + border-color: @surface0; + color: @text; + + &:focus { + box-shadow: 0 0 0 0.125em @surface0; // once again, just use outline + } + } + } + + img[src$="images/grabify.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img[src$="images/grabify-inverted.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img[src$="images/homepage/2.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img[src$="images/homepage/4.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img[src$="images/homepage/5.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .is-world-background { + @svg: escape( + 'includes kosovo' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } +} diff --git a/styles/graphite/README.md b/styles/graphite/README.md new file mode 100644 index 0000000000..d981268960 --- /dev/null +++ b/styles/graphite/README.md @@ -0,0 +1,37 @@ + + + +

+ Logo
+ + Catppuccin for Graphite + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## ❤️‍🩹 Unmaintained +This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! + +## 💖 Past Maintainer +- [isabelroses](https://github.com/isabelroses) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/graphite/catppuccin.user.less b/styles/graphite/catppuccin.user.less new file mode 100644 index 0000000000..4a601c369c --- /dev/null +++ b/styles/graphite/catppuccin.user.less @@ -0,0 +1,66 @@ +/* ==UserStyle== +@name Graphite Catppuccin +@namespace github.com/catppuccin/userstyles/styles/graphite +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/graphite +@version 2025.11.07 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/graphite/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agraphite +@description Soothing pastel theme for Graphite +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("app.graphite.com") { + :root[data-theme="light"] { + #catppuccin(@lightFlavor); + } + :root[data-theme="dark"] { + #catppuccin(@darkFlavor); + } + + #createset(@color, @type) { + --color-@{type}-default: @color; + --color-@{type}-lowest-contrast: darken(@color, 60%); + --color-@{type}-low-contrast: @color; + --color-@{type}-high-contrast: @color; + --color-@{type}-highest-contrast: lighten(@color, 10%); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --color-bg-light: @base; + --color-bg-med: @mantle; + --color-bg-dark: @crust; + + --text-color-light: @crust; // this means on a light background + --text-color-default: @text; + --text-color-low-contrast: @text; + --text-color-high-contrast: @text; + --text-color-disabled: @subtext0; + + --btn-color-neutral-selected: @surface0; + --btn-color-neutral-default: @surface0; + --btn-color-neutral-hover: @surface0; + + --icon-color-default: @text; + + --border-color-default: @surface1; + + --color-gray-60: @surface0; + + #createset(@accent, emphasis); + #createset(@green, positive); + #createset(@peach, caution); + #createset(@red, negative); + #createset(@mauve, action); + } +} diff --git a/styles/hackage/README.md b/styles/hackage/README.md new file mode 100644 index 0000000000..e552adc2d5 --- /dev/null +++ b/styles/hackage/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Hackage + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [jn-sena](https://github.com/jn-sena) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/hackage/catppuccin.user.less b/styles/hackage/catppuccin.user.less new file mode 100644 index 0000000000..42234faef8 --- /dev/null +++ b/styles/hackage/catppuccin.user.less @@ -0,0 +1,777 @@ +/* ==UserStyle== +@name Hackage Catppuccin +@namespace github.com/catppuccin/userstyles/styles/hackage +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hackage +@version 2026.03.14 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hackage/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahackage +@description Soothing pastel theme for Hackage +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("hackage.haskell.org"), + domain("hackage-content.haskell.org") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + &, + body { + background-color: @base; + color: @text; + } + + a:hover { + background-color: inherit; + } + + a[href]:link { + color: @accent; + } + a[href]:visited { + color: average(@overlay2, @accent); + } + + a[href].def:link, + a[href].def:visited { + color: @subtext0; + } + a[href].def:hover { + color: average(@overlay2, @subtext0); + } + + button { + background-color: @mantle; + color: @text; + + &:hover { + background-color: @crust; + } + } + + .caption, + h1, + h2, + h3, + h4, + h5, + h6, + summary, + .section1, + .section2, + .section3, + .section4, + .section5, + .section6 { + color: @text; + filter: none; + } + + .collapser::before, + .expander::before, + .noexpander::before { + color: @accent; + } + + pre { + background-color: @mantle; + border-color: @surface1; + } + + blockquote { + background-color: @surface0; + border-color: @accent; + } + + .src, + .decl, + .declname, + .declbut, + .topdecl, + .arg, + .inline-code { + background-color: @mantle; + color: @text; + } + + .declbut { + border-color: @overlay0 !important; + a { + color: @overlay2 !important; + } + } + + /* + * Headers + */ + + #page-header, + #package-header { + background-color: @accent; + color: @surface1; + border-color: shade(@accent, 25%); + } + + #page-header .caption, + #package-header .caption, + #page-header a:link, + #page-header a:visited { + color: @base !important; + } + + #module-header .caption, + .modulebar { + color: @accent; + border-color: @surface1; + } + + #module-header { + background-color: inherit; + } + + #package-header { + &, + #page-menu { + a:link, + a:visited { + color: @base; + } + } + a:hover { + background-color: transparent; + } + + ul.links li { + border-color: @overlay0; + + &:hover { + background-color: transparent; + } + } + } + + ul.links li form { + input, + button { + color: @base; + } + + button { + background-color: transparent; + } + } + + .topbar { + background-color: @accent; + + .topbut { + border-color: @overlay0; + + a { + background-color: transparent; + color: @base; + } + } + .title { + color: @base; + } + } + + .botbar { + background-color: @crust; + color: @text; + } + + /* + * Style selectors (for old packages) + */ + + #style-menu { + background-color: @mantle; + + li { + &, + a { + color: @text !important; + } + + li { + border-color: @overlay2; + } + } + } + + /* + * Versions + */ + + a.unpreferred[href]:link, + a.unpreferred[href]:visited { + color: @yellow; + } + + a.deprecated[href]:link, + a.deprecated[href]:visited { + color: @red; + } + + .versions { + a.normal[href]:link, + a.normal[href]:visited { + color: @green; + } + } + + /* + * Readme style + */ + + .embedded-author-content { + border-color: @accent; + } + + /* + * Contents & synopsis + */ + + #contents-list { + background-color: @mantle; + } + + h2#table-of-contents { + background-color: @mantle; + color: @text; + } + + div#table-of-contents { + background-color: @base; + border-color: @surface1; + } + + #synopsis { + summary, + #control\.syn { + @svg: escape( + 'SynopsisSynopsis' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + ul { + &, + li.src { + background-color: @surface0; + } + } + } + + /* + * Quick jump + */ + + #search p.error { + color: @red; + } + + #search-form, + #search-results { + box-shadow: 2px 2px 6px fade(@mantle, 20%); + } + + #search-form { + input { + border-color: @accent; + } + } + + #search-results { + border-color: @accent; + + > ul > li { + border-bottom-color: @overlay0; + } + } + + .search-module > ul > li > a[href].active-link { + background-color: @surface2; + } + + .search-result ul.subs::after { + color: @subtext1; + } + + .more-results, + .more-results::before { + color: @subtext0; + } + + .keyboard-shortcuts th { + color: @accent; + } + + .key { + background-color: @mantle; + color: @text; + border-color: @mantle; + } + + /* + * Dropdown + */ + + .dropdown-menu { + background-color: @surface0; + border-color: @surface0; + + button { + background-color: @accent; + color: @mantle; + border-color: @surface2; + + &:hover, + &:active { + background-color: @accent; + color: @mantle; + } + } + } + + /* + * Tables + */ + + table { + &.info { + background-color: @base; + color: @subtext1; + border-color: @surface1; + } + + &.fancy { + &, + tr { + border-color: @surface1; + } + tr.even td { + background-color: @mantle; + } + } + + &.fancy, + &.properties, + &.dataTable.compact.fancy tbody { + th, + td { + background-color: @base; + } + } + } + + .doc { + th, + td { + border-color: @surface1; + } + th { + background-color: @mantle; + } + } + + .infohead, + .infoval { + color: @subtext1; + } + + div#table_length.dataTables_length, + div#table_filter.dataTables_filter { + color: @text; + } + + div #description table { + &, + tr td { + border-color: @surface1; + } + th { + background-color: @mantle; + } + } + + /* + * Source links + */ + + #interface { + .src { + .link, + .selflink { + color: @overlay2 !important; + background-color: transparent !important; + } + } + p.src .link { + background-color: transparent; + color: @overlay2; + border-color: @overlay1; + } + + span.fixity, + span.rightedge { + color: @overlay1; + border-left-color: @overlay1; + } + span.fixity { + color: @overlay1; + } + } + + /* + * Paginator + */ + + .paginator { + span { + color: @text; + } + + a { + color: @overlay1; + + &[href]:link, + &:link:hover { + color: @accent; + } + &:visited, + &:visited:hover { + color: average(@overlay2, @accent); + } + &:link:hover, + &:visited:hover { + background-image: none; + background-color: @mantle; + border-color: transparent; + } + } + + .current { + background-image: none; + background-color: @mantle; + color: @accent; + border-color: transparent; + + &:hover { + background-color: @crust !important; + } + } + } + + .paginate_button { + background-color: @overlay0; + } + + /* + * Search query + */ + + #browseTable th { + border-color: @surface1; + } + + #fatalError { + color: @red; + } + + input:invalid { + border-color: @yellow; + box-shadow: 0 0 10px @yellow; + } + + input { + background-color: @mantle; + 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; + + &::-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; + } + + /* + * Upload + */ + + input[type="file"] { + background-color: transparent; + + &::file-selector-button { + background-color: @mantle; + color: @text; + } + } + + /* + * Others + */ + + .candidate-warn { + background-color: @mantle; + border-color: @red; + } + + .candidate-info { + background-color: @mantle; + border-color: @blue; + } + + .box { + background-color: @base; + border-color: @base; + } + + div#modal #content, + #search-results { + background-color: @surface0; + } + + .subs, + .top > .doc, + .subs > .doc { + border-left-color: @surface1; + } + + .subs .subs p.src { + background-color: @mantle; + } + + .top p.src { + border-color: @surface0; + } + + .warning, + strong.warning { + color: @red; + } + + small.info, + .flags-table .flag-disabled { + color: @subtext0; + } + + .text-button { + color: @accent; + } + + p.registration-email { + border-color: @accent; + } + + :target { + background-image: linear-gradient( + to bottom, + transparent 0%, + transparent 65%, + average(@surface0, @yellow) 60%, + average(@surface0, @yellow) 100% + ); + } + :target:hover { + background-image: linear-gradient( + to bottom, + overlay(@surface0, @yellow) 0%, + overlay(@surface0, @yellow) 100% + ); + } + + #footer { + background-color: @crust; + color: @subtext1; + border-color: @overlay0; + } + + /* + * MathJax + */ + + #MathJax_Message { + background-color: @mantle; + border-color: @surface1; + color: @text; + } + + #MathJax_About, + #MathJax_Help, + .MathJax_Menu { + background-color: @surface0; + color: @text; + border-color: @accent; + box-shadow: 0 10px 20px @mantle; + -webkit-box-shadow: 0 10px 20px @mantle; + -moz-box-shadow: 0 10px 20px @mantle; + } + + #MathJax_About > span, + #MathJax_HelpContent { + background-color: @surface1 !important; + color: @subtext1 !important; + border-color: @overlay0 !important; + } + + .MathJax_MenuArrow { + color: @subtext1; + } + + .MathJax_MenuRule { + border-top-color: @overlay0; + } + + .MathJax_MenuActive { + background-color: @surface1; + color: @text; + } + + .MathJax_MenuDisabled { + color: @overlay2; + } + + .MathJax_MenuDisabled:focus, + .MathJax_MenuLabel:focus { + background-color: @surface1; + } + + #MathJax_AboutClose, + #MathJax_HelpClose { + border-color: @surface2; + color: @subtext0; + span { + background-color: @surface2; + } + + &:hover { + color: @text !important; + border-color: @overlay0 !important; + span { + background-color: @overlay0 !important; + } + } + } + + span.mathjax img { + filter: @text-filter; + } + + /* + * Sources + */ + + span.definition, + .hs-identifier { + color: @blue; + } + + .hs-identifier.hs-type { + color: @yellow; + } + + span.keyword, + .hs-keyword { + color: @mauve; + } + + span.str, + span.char, + .hs-string, + .hs-char, + .hs-str, + .hs-chr { + color: @green; + } + + .hs-number { + color: @peach; + } + + .hs-operator { + color: @sky; + } + + span.keyglyph, + span.layout, + span.conop, + .hs-keyglyph, + .hs-layout, + .hs-glyph, + .hs-special { + color: @overlay2; + } + + span.comment, + .hs-comment, + .hs-comment a { + color: @overlay0; + } + + span.cpp, + .hs-pragma, + .hs-cpp { + color: @pink; + } + + pre a { + &:link, + &:visited { + border-bottom-color: @surface0; + } + &:hover, + &.hover-highlight { + background-color: @surface0; + } + } + + span.annot { + color: @text; + + &:hover { + background-color: @surface1; + } + + span.annottext { + background-color: @surface0; + border-color: @accent; + } + } + } +} diff --git a/styles/hacker-news/README.md b/styles/hacker-news/README.md index 3c03c65418..43df843788 100644 --- a/styles/hacker-news/README.md +++ b/styles/hacker-news/README.md @@ -10,38 +10,17 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +## 💝 Current Maintainer +- [lucasmelin](https://github.com/lucasmelin) -## 💝 Current Maintainer(s) -- [Lucas Melin](https://github.com/lucasmelin)   diff --git a/styles/hacker-news/assets/catwalk.webp b/styles/hacker-news/assets/catwalk.webp deleted file mode 100644 index 34db2b8c3a..0000000000 --- a/styles/hacker-news/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6b799861b5dac0506cca04cf57b06c907acb9b9e28864324466e15aeed6e26a8 -size 414436 diff --git a/styles/hacker-news/assets/frappe.webp b/styles/hacker-news/assets/frappe.webp deleted file mode 100644 index 51838969f8..0000000000 --- a/styles/hacker-news/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0ea32ceaaba5a92667789526df11b9adea7ed5e3e294fbbefab9b8c5635e0390 -size 77198 diff --git a/styles/hacker-news/assets/latte.webp b/styles/hacker-news/assets/latte.webp deleted file mode 100644 index 6b11e89b3c..0000000000 --- a/styles/hacker-news/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:d2fb9d9621e2951beb0432fc5c9645bf42912368845547f1e888f8c94da41c1a -size 89358 diff --git a/styles/hacker-news/assets/macchiato.webp b/styles/hacker-news/assets/macchiato.webp deleted file mode 100644 index dad59dbf92..0000000000 --- a/styles/hacker-news/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:59beb3277dcfaacdc9425bbf5db2e0bb86e777ce1983c50c0dead01b4a43dfe8 -size 81600 diff --git a/styles/hacker-news/assets/mocha.webp b/styles/hacker-news/assets/mocha.webp deleted file mode 100644 index a657b561a4..0000000000 --- a/styles/hacker-news/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a538536479b6a17fb576c4666d71eab963ccd87465d51ae94de2ea21241dd1ea -size 85582 diff --git a/styles/hacker-news/catppuccin.user.css b/styles/hacker-news/catppuccin.user.css deleted file mode 100644 index 94f1745804..0000000000 --- a/styles/hacker-news/catppuccin.user.css +++ /dev/null @@ -1,325 +0,0 @@ -/* ==UserStyle== -@name HackerNews Catppuccin -@namespace github.com/catppuccin/userstyles/styles/hacker-news -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hacker-news -@version 0.1.1 -@description Soothing pastel theme for HackerNews -@author Catppuccin -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hacker-news/catppuccin.user.css -@license MIT - -@preprocessor less -@var select flavor "Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] -==/UserStyle== */ - -@-moz-document url-prefix("https://news.ycombinator.com") -{ - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - #catppuccin(@flavor); - - #catppuccin(@lookup) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - - /* Main background */ - #hnmain { - background-color: @base; - } - /* Main body padding background */ - body { - background-color: @base; - } - - /* Background of the FAQ and main page */ - body > center > table > tbody > tr > td { - background-color: @base; - color: @text; - } - - /* Top bar */ - #hnmain > tbody > tr:nth-child(1) > td { - background-color: @peach; - } - - /* Hacker News text in top bar */ - #hnmain - > tbody - > tr:nth-child(1) - > td - > table - > tbody - > tr - > td:nth-child(2) - > span - > b - > a { - color: @surface0; - } - - /* Logged-in user karma */ - #karma { - color: @surface1; - } - - /* Separator characters around logged-in user karma */ - #hnmain - > tbody - > tr:nth-child(1) - > td - > table - > tbody - > tr - > td:nth-child(3) - > span { - color: @surface1; - } - - /* Visited top bar links */ - .pagetop a:visited { - color: @surface1; - } - - /* Unvisited top bar links */ - .pagetop a:link { - color: @surface0; - } - - /* Links */ - a:link { - color: @blue; - } - - /* More link */ - .hnmore a:link, - a:visited { - color: @lavender; - } - - /* New user color */ - .hnuser > font { - color: @green; - } - - /* Story site link */ - .comhead a:link, - .subtext a:visited { - color: @peach; - } - - /* Story points */ - .score { - color: @subtext0; - } - - /* Story ranking number */ - .title { - color: @lavender; - } - - /* Comment text */ - .commtext { - color: @text; - } - - /* Comment hyperlinks */ - .commtext a:link { - color: @sapphire; - } - - /* Comment box */ - textarea, - input { - background-color: @surface0; - color: @text; - border-color: @teal; - } - - /* Poll questions */ - td.comment > div > font { - color: @text; - } - - /* Bottom footer separator bar */ - #hnmain > tbody > tr:nth-child(4) > td > table > tbody > tr > td { - background-color: @base; - } - - /* Search bar text field */ - #hnmain - > tbody - > tr:nth-child(4) - > td - > center:nth-child(6) - > form - > input[type="text"] { - background-color: @surface0; - } - - /* Search bar text */ - #hnmain > tbody > tr:nth-child(4) > td > center:nth-child(6) > form { - color: @text; - } - - /* FAQ Questions */ - body > center > table > tbody > tr > td > p > b { - color: @subtext1; - } - - /* FAQ Header */ - body > center > table > tbody > tr > td > b { - color: @subtext1; - } - - /* Text post content */ - .toptext { - color: @text; - } - - /* Replace vote arrow with svg arrow and mask */ - .votearrow { - background-image: url("data:image/svg+xml,%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' %5B %3C!ENTITY ns_svg 'http://www.w3.org/2000/svg'%3E%3C!ENTITY ns_xlink 'http://www.w3.org/1999/xlink'%3E%0A%5D%3E%3Csvg xmlns='&ns_svg;' width='10' height='10' viewBox='0 0 10 10' fill-opacity='0' xml:space='preserve'%3E%3Cpolygon points='0,10 5,1 10,10 '/%3E%3C/svg%3E%0A"); - -webkit-mask-image: url("data:image/svg+xml,%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' %5B %3C!ENTITY ns_svg 'http://www.w3.org/2000/svg'%3E%3C!ENTITY ns_xlink 'http://www.w3.org/1999/xlink'%3E%0A%5D%3E%3Csvg xmlns='&ns_svg;' width='10' height='10' viewBox='0 0 10 10' fill='black' xml:space='preserve'%3E%3Cpolygon points='0,10 5,1 10,10 '/%3E%3C/svg%3E%0A"); - mask-image: url("data:image/svg+xml,%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' %5B %3C!ENTITY ns_svg 'http://www.w3.org/2000/svg'%3E%3C!ENTITY ns_xlink 'http://www.w3.org/1999/xlink'%3E%0A%5D%3E%3Csvg xmlns='&ns_svg;' width='10' height='10' viewBox='0 0 10 10' fill='black' xml:space='preserve'%3E%3Cpolygon points='0,10 5,1 10,10 '/%3E%3C/svg%3E%0A"); - background-color: @subtext0; - height: 8; - } - } -} diff --git a/styles/hacker-news/catppuccin.user.less b/styles/hacker-news/catppuccin.user.less new file mode 100644 index 0000000000..e578613b82 --- /dev/null +++ b/styles/hacker-news/catppuccin.user.less @@ -0,0 +1,162 @@ +/* ==UserStyle== +@name Hacker News Catppuccin +@namespace github.com/catppuccin/userstyles/styles/hacker-news +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hacker-news +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hacker-news/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahacker-news +@description Soothing pastel theme for Hacker News +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("news.ycombinator.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + [bgcolor="#fafaf0"], + [bgcolor="#f6f6ef"] { + background-color: @base; + } + body { + background-color: @mantle; + color: @text; + } + + td { + color: @text; + } + + /* Header */ + td[bgcolor="#ff6600"] { + background-color: @accent; + + .pagetop, + .pagetop a { + color: @crust !important; + } + + img[src="y18.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + border-color: @crust !important; + } + + [color="#ffffff"] { + color: @crust; + } + } + + td[bgcolor="#ffffaa"] { + background-color: @yellow; + + td { + color: @crust; + } + } + + .subtext, + .comhead { + &, + a:link, + a:visited, + a:hover { + color: @overlay2 !important; + } + } + + a:link { + color: @blue; + &:hover { + color: @sky; + } + } + .hnmore a:link, + a:visited { + color: @lavender; + } + + [color="#3c963c"] { + color: @green; + } + + /* Story points */ + .score { + color: @subtext0; + } + + /* Story ranking number */ + .title { + color: @lavender; + } + + /* Comment text */ + .commtext { + color: @text; + } + + /* Comment box */ + input, + textarea, + select { + background-color: @mantle; + color: @text; + border-width: 1px; + border-style: solid; + border-color: @surface0; + border-radius: 2px; + } + + input { + padding: 2px; + } + + /* Poll questions */ + td.comment > div > font { + color: @text; + } + + /* Text post content */ + .toptext { + color: @text; + } + + .votearrow { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .yclinks { + color: @surface2; + } + + b { + color: @text; + } + + table[bgcolor="#ff6600"] { + background-color: @accent; + } + } +} diff --git a/styles/have-i-been-pwned/README.md b/styles/have-i-been-pwned/README.md new file mode 100644 index 0000000000..7cb23cc027 --- /dev/null +++ b/styles/have-i-been-pwned/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Have I Been Pwned + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [trinkey](https://github.com/trinkey) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/have-i-been-pwned/catppuccin.user.less b/styles/have-i-been-pwned/catppuccin.user.less new file mode 100644 index 0000000000..2b2215a87d --- /dev/null +++ b/styles/have-i-been-pwned/catppuccin.user.less @@ -0,0 +1,414 @@ +/* ==UserStyle== +@name Have I Been Pwned Catppuccin +@namespace github.com/catppuccin/userstyles/styles/have-i-been-pwned +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/have-i-been-pwned +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/have-i-been-pwned/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahave-i-been-pwned +@description Soothing pastel theme for Have I Been Pwned +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("haveibeenpwned.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + body { + background-color: @base; + color: @text; + } + + hr { + border-color: @surface0; + } + + a { + &, + &:hover, + &:focus { + color: @text; + border-bottom-color: @surface2; + } + + &:hover { + background-color: fade(@accent, 30%); + } + } + + img.pwnLogo.large.modalLogo { + filter: @text-filter; + } + + .bodyGradient { + color: @text; + } + + .modal-header { + background: @crust; + + .close { + color: @text; + } + } + + .fa-loader, + .loaderText { + color: @text; + } + + #postNotificationCallsToAction { + .btn { + background-color: @crust; + color: @text; + } + + a.socialLink { + &, + &:link, + &:visited { + color: @text; + } + } + } + + .modal-content { + background-color: @base; + border-color: @surface0; + } + + .main { + background-color: @mantle; + color: @text; + } + + .main-logo .logo { + border-color: @accent; + background-color: fade(@accent, 30%); + } + + .pwnedCompanyList { + a, + a:hover { + color: @text; + border-bottom-color: @surface2; + } + + td { + color: @subtext0; + } + } + + footer { + a, + p { + color: @subtext0; + } + } + + .unverified { + &, + a { + color: darken(@red, 50%) !important; + border-bottom-color: darken(@red, 50%) !important; + } + } + + .navbar-inverse { + border-color: @surface0; + background-color: @crust; + + .navbar-toggle { + border-color: @surface0; + + &:hover, + &:focus { + background-color: @surface0; + } + + .icon-bar { + background-color: @text; + } + } + + .navbar-brand { + color: @text; + border-color: @text !important; + } + + li.active > a { + &, + &:hover, + &:focus { + color: @text; + background-color: @crust; + } + } + + li > a { + color: @subtext0; + + &:hover, + &:focus { + color: @text; + } + } + } + + img.pwnLogo { + &[src$="/List.png"], + &[src$="/Email.png"] { + filter: @text-filter; + } + } + + .form-control { + background-color: @crust; + color: @text; + border-color: @surface0 !important; + + &:focus { + box-shadow: 0 0 8px fade(@accent, 30%); + } + } + + .btn-primary { + color: @text; + background-color: @crust; + border-color: @surface0 !important; + + &:hover { + background-color: fade(@accent, 30%); + } + } + + .btn-success { + background-color: @green; + color: @base; + border-color: @surface0; + } + + .progress-bar { + background-color: @accent; + } + + .form-group .termsOfUse { + background-color: @base; + } + + .termsOfUse { + background-color: @mantle; + + &, + a { + color: @subtext0; + border-bottom-color: @surface2; + } + } + + .secondaryHeader { + background-color: @mantle; + } + + .sensitive { + color: @yellow; + } + + .sensitive-fade { + color: @subtext0; + } + + .panel-primary { + border-color: @surface0; + + > .panel-heading, + > .panel-footer { + color: @text; + border-color: @surface0; + background-color: @mantle; + } + } + + #noPwnage { + background: @green; + + a.socialLink { + color: @base !important; + } + } + + #invalidAccount { + background: @yellow; + } + + #pwnedWebsitesContainer { + hr { + border-color: @surface0; + } + + > .pwnedRow { + background: @red; + + .pwnedWebsite { + color: @base; + + a { + color: @base; + border-bottom-color: @base; + + &:hover { + background-color: transparent !important; + } + } + } + } + + a.socialLink { + color: @base !important; + } + } + + .pwnResultBanner { + color: @base; + + a { + color: @base; + border-bottom-color: @base !important; + + &:hover { + background-color: transparent !important; + } + } + } + + #Cloudflare img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + pre, + code { + background-color: @mantle; + color: @text; + border-color: @surface0; + } + + thead tr { + border-color: @surface0; + } + + .bitcoinAddress { + background-color: @mantle; + color: @text; + } + + .bg-info { + background-color: @mantle; + color: @text; + } + + .subscriptions { + .rpm10 { + border-color: @teal; + + h4, + h5, + .price { + background-color: @teal; + color: @base; + } + } + + .rpm50 { + border-color: @green; + + h4, + h5, + .price { + background-color: @green; + color: @base; + } + } + + .rpm100 { + border-color: @yellow; + + h4, + h5, + .price { + background-color: @yellow; + color: @base; + } + } + + .rpm500 { + border-color: @peach; + + h4, + h5, + .price { + background-color: @peach; + color: @base; + } + } + + .description { + color: @text; + } + } + + .finePrint { + color: @text; + } + + .table-bordered { + &, + th, + td { + border-color: @surface0; + } + } + + .dropdown-menu { + background-color: @base; + + > li > a { + &:hover, + &:focus { + background-color: @mantle; + } + } + } + + @media (min-width: 768px) { + ul.nav li.dropdown:hover { + background-color: @base; + } + } + + @media (max-width: 480px) { + #searchContainer { + background-color: @mantle; + } + } + } +} diff --git a/styles/holodex/README.md b/styles/holodex/README.md new file mode 100644 index 0000000000..6d94380bc2 --- /dev/null +++ b/styles/holodex/README.md @@ -0,0 +1,37 @@ + + + +

+ Logo
+ + Catppuccin for Holodex + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + +> [!NOTE] +> Holodex's selected theme is ignored. + +## 💝 Current Maintainer +- [Guaxinim5573](https://github.com/Guaxinim5573) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/holodex/catppuccin.user.less b/styles/holodex/catppuccin.user.less new file mode 100644 index 0000000000..7246416da7 --- /dev/null +++ b/styles/holodex/catppuccin.user.less @@ -0,0 +1,229 @@ +/* ==UserStyle== +@name Holodex Catppuccin +@namespace github.com/catppuccin/userstyles/styles/holodex +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/holodex +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/holodex/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aholodex +@description Soothing pastel theme for Holodex +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("holodex.net") { + :root:has(.theme--dark) { + #catppuccin(@darkFlavor); + } + + :root:has(.theme--light) { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --v-anchor-base: @accent; + --v-primary-base: @accent; + --v-primary-lighten1: lighten(@accent, 4%); + --v-primary-lighten2: lighten(@accent, 8%); + --v-primary-lighten3: lighten(@accent, 9%); + --v-primary-lighten4: lighten(@accent, 18%); + --v-primary-lighten5: lighten(@accent, 19%); + --v-primary-darken1: darken(@accent, 14%); + --v-primary-darken2: darken(@accent, 31%); + --v-primary-darken3: darken(@accent, 35%); + --v-primary-darken4: darken(@accent, 43%); + + --v-accent-base: @accent; + --v-accent-lighten1: lighten(@accent, 4%); + --v-accent-lighten2: lighten(@accent, 8%); + --v-accent-lighten3: lighten(@accent, 9%); + --v-accent-lighten4: lighten(@accent, 18%); + --v-accent-lighten5: lighten(@accent, 19%); + --v-accent-darken1: darken(@accent, 14%); + --v-accent-darken2: darken(@accent, 31%); + --v-accent-darken3: darken(@accent, 35%); + --v-accent-darken4: darken(@accent, 43%); + + --v-secondary-base: @accent; + --v-secondary-lighten1: lighten(@accent, 4%); + --v-secondary-lighten2: lighten(@accent, 8%); + --v-secondary-lighten3: lighten(@accent, 9%); + --v-secondary-lighten4: lighten(@accent, 18%); + --v-secondary-lighten5: lighten(@accent, 19%); + --v-secondary-darken1: darken(@accent, 14%); + --v-secondary-darken2: darken(@accent, 31%); + --v-secondary-darken3: darken(@accent, 35%); + --v-secondary-darken4: darken(@accent, 43%); + + --v-error-base: @red; + --v-error-lighten1: lighten(@red, 4%); + --v-error-lighten2: lighten(@red, 8%); + --v-error-lighten3: lighten(@red, 9%); + --v-error-lighten4: lighten(@red, 18%); + --v-error-lighten5: lighten(@red, 19%); + --v-error-darken1: darken(@red, 14%); + --v-error-darken2: darken(@red, 31%); + --v-error-darken3: darken(@red, 35%); + --v-error-darken4: darken(@red, 43%); + + --v-info-base: @blue; + --v-info-lighten1: lighten(@blue, 4%); + --v-info-lighten2: lighten(@blue, 8%); + --v-info-lighten3: lighten(@blue, 9%); + --v-info-lighten4: lighten(@blue, 18%); + --v-info-lighten5: lighten(@blue, 19%); + --v-info-darken1: darken(@blue, 14%); + --v-info-darken2: darken(@blue, 31%); + --v-info-darken3: darken(@blue, 35%); + --v-info-darken4: darken(@blue, 43%); + + --v-success-base: @green; + --v-success-lighten1: lighten(@green, 4%); + --v-success-lighten2: lighten(@green, 8%); + --v-success-lighten3: lighten(@green, 9%); + --v-success-lighten4: lighten(@green, 18%); + --v-success-lighten5: lighten(@green, 19%); + --v-success-darken1: darken(@green, 14%); + --v-success-darken2: darken(@green, 31%); + --v-success-darken3: darken(@green, 35%); + --v-success-darken4: darken(@green, 43%); + + --v-warning-base: @yellow; + --v-warning-lighten1: lighten(@yellow, 4%); + --v-warning-lighten2: lighten(@yellow, 8%); + --v-warning-lighten3: lighten(@yellow, 9%); + --v-warning-lighten4: lighten(@yellow, 18%); + --v-warning-lighten5: lighten(@yellow, 19%); + --v-warning-darken1: darken(@yellow, 14%); + --v-warning-darken2: darken(@yellow, 31%); + --v-warning-darken3: darken(@yellow, 35%); + --v-warning-darken4: darken(@yellow, 43%); + + --v-background-base: @base; + --v-background-lighten1: lighten(@base, 4%); + --v-background-lighten2: lighten(@base, 8%); + --v-background-lighten3: lighten(@base, 9%); + --v-background-lighten4: lighten(@base, 18%); + --v-background-lighten5: lighten(@base, 19%); + --v-background-darken1: darken(@base, 14%); + --v-background-darken2: darken(@base, 31%); + --v-background-darken3: darken(@base, 35%); + --v-background-darken4: darken(@base, 43%); + + div.v-application { + background: @base !important; + color: @text; + } + + header#top-bar, + header.v-toolbar, + div.v-navigation-drawer__content, + div#bottom-bar, + div.v-main__wrap > div, + div.v-select__selections, + div.v-slide-group__wrapper, + div.v-bottom-navigation, + div.v-select__slot, + div.v-input__slot, + div.v-overlay__scrim { + background: @base !important; + } + div.v-sheet { + background: @base; + border-color: @base; + } + + .v-btn.v-btn--has-bg:not(.nav-btn) { + background-color: @surface0 !important; + } + + .v-list, + .v-list-item, + .v-card, + .v-sheet, + .v-select__selections, + .v-label, + .text--secondary, + .v-input__slot input { + color: @text !important; + path:not([fill*="iid-1"]) { + fill: @text; + } + } + + .v-messages, + .v-list-item__subtitle, + .v-tab:not(.v-tab--active) { + color: @subtext0 !important; + } + + svg.logo path { + fill: darken(@accent, 2%) !important; + + &:last-child { + fill: darken(@blue, 8%) !important; + } + } + + .v-chip { + background: @blue; + } + + .primary--text, + .name-vtuber { + color: @accent !important; + } + + .text-live { + color: @red; + } + + .stream-count-chip { + color: @crust !important; + } + + .nav-btn.v-btn--active { + color: @accent !important; + } + + div.v-sheet.v-alert { + background: none !important; + color: @yellow !important; + + .v-icon path { + fill: @yellow !important; + } + } + + hr { + border-color: @base; + } + + // Snack + div.v-snack { + color: @text; + + div.v-sheet { + background: @surface0 !important; + } + + button.v-btn--text { + color: @text !important; + } + + button.v-btn--is-elevated.v-btn--has-bg { + background: @accent !important; + color: @base; + } + } + } +} diff --git a/styles/home-manager-options-search/README.md b/styles/home-manager-options-search/README.md new file mode 100644 index 0000000000..d42143be4a --- /dev/null +++ b/styles/home-manager-options-search/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Home Manager Options Search + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/home-manager-options-search/catppuccin.user.less b/styles/home-manager-options-search/catppuccin.user.less new file mode 100644 index 0000000000..24f884e829 --- /dev/null +++ b/styles/home-manager-options-search/catppuccin.user.less @@ -0,0 +1,148 @@ +/* ==UserStyle== +@name Home Manager Options Search Catppuccin +@namespace github.com/catppuccin/userstyles/styles/home-manager-options-search +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/home-manager-options-search +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/home-manager-options-search/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahome-manager-options-search +@description Soothing pastel theme for Home Manager Options Search +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("home-manager-options.extranix.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + body { + background-color: @base; + color: @text; + } + + header { + background-color: @mantle; + + nav.shortcuts li a { + color: @text; + + &:hover { + background-color: @surface0; + color: @text; + } + } + } + + #lastUpdateElement { + color: @text; + } + + a, + a:visited { + color: @accent; + } + + input, + textarea, + select { + background-color: @mantle; + color: @text; + caret-color: @text; + border-color: @surface0; + } + + .progress-bar-striped { + background-image: linear-gradient( + 45deg, + fade(@text, 40%) 25%, + transparent 25%, + transparent 50%, + fade(@text, 40%) 50%, + fade(@text, 40%) 75%, + transparent 75%, + transparent + ); + background-color: @accent; + color: @crust; + } + + .form-control:focus { + border-color: @accent; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px @accent; + } + + .table-striped > tbody > tr:nth-of-type(2n+1) { + background-color: @surface0; + } + + table#indexedOptionsTable tr td, + .table > thead > tr > th { + border-color: @surface2 !important; + } + + table tr.optrow:focus-visible, + table tr.optrow:hover { + background-color: @surface1 !important; + } + + .modal-content { + background-color: @base; + + .modal-header, + .modal-footer { + border-color: @surface0 !important; + } + + .close { + color: @text; + text-shadow: 0 1px 0 @text; + } + + pre { + color: @text; + background-color: @mantle; + border-color: @surface0; + } + } + + .btn-default { + background: @surface0; + color: @text; + text-shadow: none; + box-shadow: none; + border-color: @surface0; + + &:hover, + &:focus, + &:active, + .focus, + .active { + background-color: @surface1; + color: @text; + border-color: @surface0; + } + } + + footer { + background-color: @mantle; + color: @text; + border-color: @surface2; + } + } +} diff --git a/styles/homepage/README.md b/styles/homepage/README.md index 25ee4aa0aa..6291af83fe 100644 --- a/styles/homepage/README.md +++ b/styles/homepage/README.md @@ -10,38 +10,17 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +## 💝 Current Maintainer +- [Gandalf-the-Blue](https://github.com/Gandalf-the-Blue) -## 💝 Current Maintainer(s) -- [Gandalf the Blue](https://github.com/Gandalf-the-Blue)   diff --git a/styles/homepage/assets/catwalk.webp b/styles/homepage/assets/catwalk.webp deleted file mode 100644 index b9ba43d2c7..0000000000 --- a/styles/homepage/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f25115113bc4f54476fe8b8040b7f0dcef61677a2ccb05066df385ce4b0cf091 -size 51490 diff --git a/styles/homepage/assets/frappe.webp b/styles/homepage/assets/frappe.webp deleted file mode 100644 index 51e9b9e528..0000000000 --- a/styles/homepage/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:1ff297fc23c4ac506d14a4b80f531e5d099fc90c66fef20ae85f78c256bd5a97 -size 16716 diff --git a/styles/homepage/assets/latte.webp b/styles/homepage/assets/latte.webp deleted file mode 100644 index c6e5a94a83..0000000000 --- a/styles/homepage/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7c044705e87a8ad712fdcb1d224abb0de057616b84c8c33f1dbaf0844e6f6e46 -size 16754 diff --git a/styles/homepage/assets/macchiato.webp b/styles/homepage/assets/macchiato.webp deleted file mode 100644 index 6a66309763..0000000000 --- a/styles/homepage/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:1c0b0498fdfee90d8854907ea51551567bd6e3c157d6cc2779c724e8bc688467 -size 17152 diff --git a/styles/homepage/assets/mocha.webp b/styles/homepage/assets/mocha.webp deleted file mode 100644 index f6131ac9f9..0000000000 --- a/styles/homepage/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7420e94564fdb416c2f85563634b702cd7ccff0d2a2787d3375cbb632990f781 -size 17850 diff --git a/styles/homepage/catppuccin.user.css b/styles/homepage/catppuccin.user.css deleted file mode 100644 index 69fbacd2da..0000000000 --- a/styles/homepage/catppuccin.user.css +++ /dev/null @@ -1,257 +0,0 @@ -/* ==UserStyle== -@name homepage Catppuccin -@namespace github.com/catppuccin/userstyles/styles/homepage -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/homepage -@version 0.0.1 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/homepage/catppuccin.user.css -@description Soothing pastel theme for homepage -@author Catppuccin -@license MIT - -@preprocessor less -@var select flavor "Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Grey"] -==/UserStyle== */ -@-moz-document domain("homepage.example.com") { - :root { - #catppuccin(@flavor, @accentColor); - } - - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-color: @catppuccin[@@lookup][@@accent]; - - //Page Level Features - - :is(.dark .dark\:bg-theme-800) { - --tw-bg-opacity: 1; - background-color: @base; //background Color - } - - .dark { - --bg-color: @base; - --scrollbar-thumb: @accent-color; //ScrollBar - --scrollbar-track: @mantle; //Scrollbar base - } - - //Information Widget Features - - :is(.dark .dark\:bg-theme-200\/20) { - background-color: @overlay0 //Information Widgets Progress Bar Background -; - } - :is(.dark .dark\:bg-theme-200\/50) { - background-color: @text //Information Widgets Progress Bar Value -; - } - .border-theme-300 { - --tw-border-opacity: 1; - border-color: @accent-color; //Search bar Border - } - :is(.dark .dark\:bg-white\/10) { - background-color: @crust //Search bar background -; - } - :is(.dark .dark\:focus\:ring-white\/50:focus) { - --tw-ring-color: @text; //Search bar Focus Border - } - - :is(.dark .dark\:text-white) { - --tw-text-opacity: 1; - color: @accent-color //Search bar Text -; - } - - // Services Level Features - - :is(.dark .dark\:bg-white\/5) { - background-color: @mantle; //Box Background - } - :is(.dark .dark\:shadow-theme-900\/20) { - --tw-shadow-color: @mantle; //Box Shadows - --tw-shadow: var(--tw-shadow-colored); - } - - :is(.dark .dark\:hover\:bg-white\/10:hover) { - background-color: @surface1 //Box Hover Color -; - } - - :is(.dark .dark\:bg-theme-900\/50) { - background-color: @crust; //Ping & Docker Stats Box Background - } - :is(.dark .dark\:bg-theme-900\/20) { - background-color: @surface0; //Stats Background Color - } - - :is(.dark .dark\:bg-theme-900\/40) { - background-color: @accent-color; //Progress Bar - } - :is(.dark .dark\:text-theme-300) { - color: @text; //Section Names + Container Description - } - :is(.dark .dark\:hover\:text-theme-300:hover) { - --tw-text-opacity: 1; - color: darken( - @accent-color, - 10% - ); //Section Names + Container Description Hover Color - } - :is(.dark .dark\:text-theme-200) { - --tw-text-opacity: 1; - color: @text; // Container Names + Stats - } - - .text-emerald-500\/80 { - color: lighten( - @green, - 10% - ); //Ping & Docker Status Text (Running + Healthy) - } - .text-orange-400\/50 { - color: lighten(@yellow, 10%); //Docker Status Text (Unhealthy) - } - .text-rose-500\/80 { - color: darken(@red, 10%); //Ping Status Text (Bad) - } - } -} diff --git a/styles/homepage/catppuccin.user.less b/styles/homepage/catppuccin.user.less new file mode 100644 index 0000000000..22f7a7a3b7 --- /dev/null +++ b/styles/homepage/catppuccin.user.less @@ -0,0 +1,152 @@ +/* ==UserStyle== +@name homepage Catppuccin +@namespace github.com/catppuccin/userstyles/styles/homepage +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/homepage +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/homepage/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahomepage +@description Soothing pastel theme for homepage +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("homepage.example.com"), + regexp("https?://homepage\\..*") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + //Page Level Features + + :is(.dark .dark\:bg-theme-800) { + --tw-bg-opacity: 1; + background-color: @base; //background Color + } + + .dark { + --bg-color: @base; + --scrollbar-thumb: @accent; //ScrollBar + --scrollbar-track: @mantle; //Scrollbar base + } + + //Information Widget Features + + :is(.dark .dark\:bg-theme-200\/20) { + background-color: @overlay0; //Information Widgets Progress Bar Background + } + :is(.dark .dark\:bg-theme-200\/50) { + background-color: @text; //Information Widgets Progress Bar Value + } + .border-theme-300 { + --tw-border-opacity: 1; + border-color: @surface0 + !important; //Search bar Border (important is needed so top separator doesn't override) + } + :is(.dark .dark\:bg-white\/10) { + background-color: @base; //Search bar background + } + :is(.dark .dark\:focus\:ring-white\/50:focus) { + --tw-ring-color: @text; //Search bar Focus Border + } + + :is(.dark .dark\:text-white) { + --tw-text-opacity: 1; + color: @accent; //Search bar Text + } + + // Services Level Features + + :is(.dark .dark\:bg-white\/5) { + background-color: @mantle; //Box Background + } + :is(.dark .dark\:shadow-theme-900\/20) { + --tw-shadow-color: @mantle; //Box Shadows + --tw-shadow: var(--tw-shadow-colored); + } + + :is(.dark .dark\:hover\:bg-white\/10:hover) { + background-color: @surface1; //Box Hover Color + } + + :is(.dark .dark\:bg-theme-900\/50) { + background-color: @crust; //Ping & Docker Stats Box Background + } + :is(.dark .dark\:bg-theme-900\/20) { + background-color: @surface0; //Stats Background Color + } + + :is(.dark .dark\:bg-theme-900\/40) { + background-color: @accent; //Progress Bar + } + :is(.dark .dark\:text-theme-300) { + color: @text; //Section Names + Container Description + } + + // api error + .text-theme-900 { + --tw-border-opacity: 1; + color: @base; // api error text color + } + + .bg-rose-900\/80 { + --tw-border-opacity: 1; + background-color: @red; // api error box color + } + // + + :is(.dark .dark\:text-theme-400) { + --tw-border-opacity: 1; + color: @text; // update and version text + } + + .text-white { + color: @subtext1; // search bar icon + } + + :is(.dark .dark\:border-theme-200\/50) { + --tw-border-opacity: 1; + border-color: @surface2; // top separator + } + + :is(.dark .dark\:hover\:text-theme-300:hover) { + --tw-text-opacity: 1; + color: darken( + @accent, + 10% + ); //Section Names + Container Description Hover Color + } + :is(.dark .dark\:text-theme-200) { + --tw-text-opacity: 1; + color: @text; // Container Names + Stats + } + + .text-emerald-500\/80 { + color: lighten( + @green, + 10% + ); //Ping & Docker Status Text (Running + Healthy) + } + .text-orange-400\/50 { + color: lighten(@yellow, 10%); //Docker Status Text (Unhealthy) + } + .text-rose-500\/80 { + color: darken(@red, 10%); //Ping Status Text (Bad) + } + } +} diff --git a/styles/hoogle/README.md b/styles/hoogle/README.md new file mode 100644 index 0000000000..dd5eecb44e --- /dev/null +++ b/styles/hoogle/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Hoogle + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [jn-sena](https://github.com/jn-sena) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/hoogle/catppuccin.user.less b/styles/hoogle/catppuccin.user.less new file mode 100644 index 0000000000..64b7584704 --- /dev/null +++ b/styles/hoogle/catppuccin.user.less @@ -0,0 +1,254 @@ +/* ==UserStyle== +@name Hoogle Catppuccin +@namespace github.com/catppuccin/userstyles/styles/hoogle +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hoogle +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hoogle/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahoogle +@description Soothing pastel theme for Hoogle +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("hoogle.haskell.org") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + a { + color: @accent; + + &:hover { + background-color: @surface0; + } + } + + body { + background-color: @base; + color: @text; + } + + /* + * Top + */ + + #links { + background-color: @accent; + color: @surface1; + border-color: shade(@accent, 25%); + } + + #top-menu li { + border-color: @crust; + + a, + a:visited, + a:link { + color: @base; + } + a:hover { + background-color: fade(@overlay0, 30%); + } + } + + #logo { + img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + &:hover { + background-color: transparent; + } + } + + #hoogle, + #scope, + #submit { + background-color: @mantle; + color: @subtext1; + border-style: solid; + border-width: 2px; + border-color: @surface0; + border-radius: 4px; + } + + .chosen-container { + .chosen-drop { + background-color: @mantle; + border-color: @surface0; + } + + .chosen-single { + background-image: none; + background-color: @mantle; + box-shadow: none; + border-style: solid; + border-width: 2px; + border-color: @surface0; + color: @subtext1; + } + + .chosen-default { + color: @crust; + } + + .chosen-search input { + border-color: @surface1; + border-radius: 4px; + } + + .chosen-results { + color: @subtext1; + + li.disabled-result { + color: @overlay0; + } + + li.highlighted { + background-image: none; + background-color: @accent; + color: @base; + } + + li.no-results { + color: @subtext1; + background-color: @mantle; + } + } + } + + /* + * Left + */ + + #left { + a { + color: @accent; + } + .plus { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + color: @green; + } + .minus { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + color: @red; + } + } + + /* + * Footer + */ + + #footer { + background-color: @crust; + color: @subtext1; + border-color: @overlay0; + } + + /* + * Other + */ + + .error { + border-color: @red; + } + + #example { + background-color: @mantle; + color: @subtext1; + border-color: @surface0; + } + + /* + * Results + */ + + .result.active { + background-color: @mantle; + } + + .ans { + background-color: @mantle; + border-color: @surface0; + + a { + color: @subtext1; + } + .name { + color: @accent; + } + } + + .links a { + color: @overlay1; + } + + .from a, + .p1, + .p2 { + color: @green; + } + + .doc, + .doc a { + color: @subtext1; + } + + .open { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + .shut { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .c0 { + background-color: @rosewater; + } + .c1 { + background-color: @green; + } + .c2 { + background-color: @lavender; + } + .c3 { + background-color: @yellow; + } + .c4 { + background-color: @pink; + } + .c5 { + background-color: @teal; + } + } +} diff --git a/styles/hoppscotch/README.md b/styles/hoppscotch/README.md new file mode 100644 index 0000000000..f8dc6aadd6 --- /dev/null +++ b/styles/hoppscotch/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Hoppscotch + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [justTOBBI](https://github.com/justTOBBI) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/hoppscotch/catppuccin.user.less b/styles/hoppscotch/catppuccin.user.less new file mode 100644 index 0000000000..4c8c6c3777 --- /dev/null +++ b/styles/hoppscotch/catppuccin.user.less @@ -0,0 +1,109 @@ +/* ==UserStyle== +@name Hoppscotch Catppuccin +@namespace github.com/catppuccin/userstyles/styles/hoppscotch +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hoppscotch +@version 2025.12.27 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hoppscotch/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahoppscotch +@description Soothing pastel theme for Hoppscotch +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("hoppscotch.io") { + :root.dark { + #catppuccin(@darkFlavor); + } + + :root.light { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + @accent-light-alpha: 1.1; + @accent-dark-alpha: 80%; + @accent-gradient-from-color: 1.05; + @accent-gradient-via-color: 1.2; + @accent-gradient-to-color: 0.85; + + --primary-color: @base; + --primary-light-color: @mantle; + --primary-dark-color: @crust; + --primary-contrast-color: @mantle; + --secondary-color: @subtext0; + --secondary-light-color: @subtext0; + --secondary-dark-color: @subtext1; + --divider-color: @surface0; + --divider-light-color: @surface0; + --divider-dark-color: @surface0; + --error-color: @red; + --tooltip-color: @text; + --popover-color: @crust; + --editor-theme: "vscode-esque"; + --editor-type-color: fade(@mauve, 90%); + --editor-name-color: @blue; + --editor-operator-color: @mauve; + --editor-invalid-color: @maroon; + --editor-separator-color: @overlay0; + --editor-meta-color: @overlay0; + --editor-variable-color: @green; + --editor-link-color: @sapphire; + --editor-constant-color: fade(@lavender, 1.2%); + --editor-keyword-color: @red; + --accent-color: @accent; + --accent-light-color: fade(@accent, @accent-light-alpha); + --accent-dark-color: fade(@accent, @accent-dark-alpha); + --accent-contrast-color: @crust; + --gradient-from-color: fade(@accent, @accent-gradient-from-color); + --gradient-via-color: fade(@accent, @accent-gradient-via-color); + --gradient-to-color: fade(@accent, @accent-gradient-to-color); + + --editor-process-color: @text; + --banner-info-color: fade(@blue, 20%); + + --method-get-color: @green; + --method-post-color: @yellow; + --method-put-color: @sapphire; + --method-patch-color: @mauve; + --method-delete-color: @red; + --method-head-color: @teal; + --method-options-color: @lavender; + --method-default-color: @overlay1; + --status-info-color: @blue; + --status-success-color: @green; + --status-redirect-color: @peach; + --status-critical-error-color: @red; + --status-server-error-color: @red; + --status-missing-data-color: @overlay0; + + .cm-editor { + background: @mantle; + + .cm-placeholder { + color: @text; + } + } + + .cm-focused .cm-activeLine { + background-color: @base; + } + + .cm-focused .cm-activeLineGutter { + background-color: @surface0; + } + + .cm-selectionBackground { + background: fade(@accent, 30%) !important; + } + } +} diff --git a/styles/hyperpipe/README.md b/styles/hyperpipe/README.md new file mode 100644 index 0000000000..1fe862ee85 --- /dev/null +++ b/styles/hyperpipe/README.md @@ -0,0 +1,37 @@ + + + +

+ Logo
+ + Catppuccin for Hyperpipe + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## ❤️‍🩹 Unmaintained +This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! + +## 💖 Past Maintainer +- [jn-sena](https://github.com/jn-sena) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/hyperpipe/catppuccin.user.less b/styles/hyperpipe/catppuccin.user.less new file mode 100644 index 0000000000..89da3f31ec --- /dev/null +++ b/styles/hyperpipe/catppuccin.user.less @@ -0,0 +1,62 @@ +/* ==UserStyle== +@name Hyperpipe Catppuccin +@namespace github.com/catppuccin/userstyles/styles/hyperpipe +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hyperpipe +@version 2026.03.21 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hyperpipe/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahyperpipe +@description Soothing pastel theme for Hyperpipe +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("hyperpipe.surge.sh") { + body { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + body[data-theme^="light"] { + #catppuccin(@lightFlavor); + } + + body[data-theme^="dark"], + body[data-theme^="black"], + body[data-theme^="dracula"], + body[data-theme^="nord"] { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --color-foreground: @accent !important; + --color-background: @base !important; + --color-background-soft: @surface0 !important; + --color-background-mute: @surface1 !important; + --color-border: @surface0 !important; + --color-border-hover: @overlay0 !important; + --color-shadow: @crust !important; + --color-blur: fade(@mantle, 45%) !important; + --color-gradient: linear-gradient( + 45deg, + @accent, + fade(@accent, 45%) + ); + --color-scrollbar: @accent !important; + --color-heading: @text !important; + --color-text: @text !important; + } +} diff --git a/styles/ichi.moe/README.md b/styles/ichi.moe/README.md index 4bd6437103..b22a224662 100644 --- a/styles/ichi.moe/README.md +++ b/styles/ichi.moe/README.md @@ -10,38 +10,17 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +## 💝 Current Maintainer +- [watatomo](https://github.com/watatomo) -## 💝 Current Maintainer(s) -- [Ren](https://github.com/watatomo)   diff --git a/styles/ichi.moe/assets/catwalk.webp b/styles/ichi.moe/assets/catwalk.webp deleted file mode 100644 index 746240471d..0000000000 --- a/styles/ichi.moe/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:184d8aa5341bebf1ad5b6122d61969fc929fbbf1b790c9e9114ce3fb7cc26033 -size 240882 diff --git a/styles/ichi.moe/assets/frappe.webp b/styles/ichi.moe/assets/frappe.webp deleted file mode 100644 index 870de7ba74..0000000000 --- a/styles/ichi.moe/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:057c976f8f6b8945c82157f2b5875a26f3f13d5bd8e96aac7c50e7e22f7f3a43 -size 41652 diff --git a/styles/ichi.moe/assets/latte.webp b/styles/ichi.moe/assets/latte.webp deleted file mode 100644 index cbf7058672..0000000000 --- a/styles/ichi.moe/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:63080ea60988252dab9e4d27d9077a17c170c95ae79ff6a78be6dc037daf6c5a -size 41614 diff --git a/styles/ichi.moe/assets/macchiato.webp b/styles/ichi.moe/assets/macchiato.webp deleted file mode 100644 index 3dc246f969..0000000000 --- a/styles/ichi.moe/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:394ab733171e05ed5700ca461c6acca2ca199afff4ca0a296c11f31181de8807 -size 43398 diff --git a/styles/ichi.moe/assets/mocha.webp b/styles/ichi.moe/assets/mocha.webp deleted file mode 100644 index 0bbdba7917..0000000000 --- a/styles/ichi.moe/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:dae75d393d4ae76db13c1db2f262a832ad556d8fede460aad361f0920be872b6 -size 44386 diff --git a/styles/ichi.moe/catppuccin.user.css b/styles/ichi.moe/catppuccin.user.css deleted file mode 100644 index fa7c0828cb..0000000000 --- a/styles/ichi.moe/catppuccin.user.css +++ /dev/null @@ -1,548 +0,0 @@ -/* ==UserStyle== -@name ichi.moe Catppuccin -@namespace github.com/catppuccin/userstyles/styles/ichi.moe -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ichi.moe -@version 1.1.1 -@description Soothing pastel theme for ichi.moe -@author Catppuccin -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ichi.moe/catppuccin.user.css -@license MIT - -@preprocessor less -@var select flavor "Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] -@var checkbox zen "Zen Mode" 0 -==/UserStyle== */ -@-moz-document domain("ichi.moe") { - :root { - #catppuccin(@flavor); - } - - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - #catppuccin(@lookup) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - - html, - body { - & when (@lookup ="latte") { - background: @mantle; - } - background: @base; - color: @text; - } - - footer { - color: @subtext1; - } - - span.query-word:hover { - border-color: @pink; - } - - span.query-pick { - color: @subtext1; - } - - .panel-error { - background-color: fadeout(@red, 0.2); - } - - .highlight { - background-color: fadeout(@yellow, 0.2); - } - - .gloss { - & when (@lookup ="latte") { - background-color: @base; - border-color: @surface2; - } - background-color: @surface0; - border-color: @overlay0; - } - - .gloss-rtext { - & when (@lookup ="latte") { - border-color: @surface2; - } - border-color: @overlay0; - } - - .gloss:target { - & when (@lookup ="latte") { - box-shadow: 0 0 5px @surface2; - -webkit-box-shadow: 0 0 5px @surface2; - -moz-box-shadow: 0 0 5px @surface2; - } - box-shadow: 0 0 5px @overlay0; - -webkit-box-shadow: 0 0 5px @overlay0; - -moz-box-shadow: 0 0 5px @overlay0; - } - - a { - color: @sapphire; - } - - a.wiktionary-link { - color: @text; - } - - a.info-link { - color: @text; - } - - a.info-link:hover { - border-bottom: 1px dashed @sapphire; - } - - .note-skipped a { - color: @subtext1; - } - - .note-skipped a:hover { - border-color: @subtext1; - } - - .jspDrag { - background-color: @lavender; - } - - .conj-negative { - color: @red; - } - - .conj-formal { - color: @blue; - } - - .pos-desc { - color: @green; - } - - .kanji-table td { - & when (@lookup ="latte") { - border: 1px solid @surface1; - } - border: 1px solid @surface0; - } - - .reading-table tr:nth-of-type(2n) { - & when (@lookup ="latte") { - background: fadeout(@surface0, 0.5); - } - background: fadeout(@surface1, 0.5); - } - - .reading-table tr ~ tr > td { - & when (@lookup ="latte") { - border-top: 1px solid @surface2; - } - border-top: 1px solid @overlay0; - } - - table.kanji-match td { - & when (@lookup ="latte") { - border-right: 1px solid @surface2; - } - border-right: 1px solid @overlay0; - } - - table.kanji-match tr:nth-of-type(2n) { - & when (@lookup ="latte") { - background: fadeout(@surface0, 0.5); - } - background: fadeout(@surface1, 0.5); - } - - tr.match-row-kanji, - tr.match-row-reading { - & when (@lookup ="latte") { - border-bottom: 1px solid @surface2; - } - border-bottom: 1px solid @overlay0; - } - - .kanji-big a { - color: @subtext1; - } - - .autocomplete-suggestions { - & when (@lookup ="latte") { - background: @base; - border: 1px solid @surface2; - } - background: @surface0; - border: 1px solid @overlay0; - } - - .autocomplete-selected { - & when (@lookup ="latte") { - background: @base; - } - background: @surface0; - } - - .autocomplete-suggestions strong { - color: @lavender; - } - - .autocomplete-group strong { - border-bottom: 1px solid @text; - } - - .button { - background-color: @sapphire; - border-color: @sapphire; - color: @base; - } - - button:hover, - button:focus, - .button:hover, - .button:focus { - background-color: darken(@sapphire, 25%); - color: @base; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - color: @text; - } - - input[type="text"], - input[type="password"], - input[type="date"], - input[type="datetime"], - input[type="datetime-local"], - input[type="month"], - input[type="week"], - input[type="email"], - input[type="number"], - input[type="search"], - input[type="tel"], - input[type="time"], - input[type="url"], - input[type="color"], - textarea, - input[type="file"], - input[type="checkbox"], - input[type="radio"], - select, - input[type="text"]:focus, - input[type="password"]:focus, - input[type="date"]:focus, - input[type="datetime"]:focus, - input[type="datetime-local"]:focus, - input[type="month"]:focus, - input[type="week"]:focus, - input[type="email"]:focus, - input[type="number"]:focus, - input[type="search"]:focus, - input[type="tel"]:focus, - input[type="time"]:focus, - input[type="url"]:focus, - input[type="color"]:focus, - textarea:focus, - input[type="file"]:focus, - input[type="checkbox"]:focus, - input[type="radio"]:focus, - select:focus { - & when (@lookup ="latte") { - background-color: @base; - border-color: @surface0; - } - background-color: @surface0; - border-color: @surface1; - color: @text; - } - - .header-nav a { - color: @pink; - } - - .header-nav a:hover { - color: darken(@pink, 15%); - } - - .jspTrack { - & when (@lookup ="latte") { - background: @surface0; - } - background: @surface1; - } - - .jspDrag { - & when (@lookup ="latte") { - background-color: @surface1; - } - background-color: @surface2; - } - - .f-dropdown { - & when (@lookup ="latte") { - background-color: @base; - } - background-color: @surface0; - border-color: @subtext1; - } - - .f-dropdown::before { - border-color: transparent transparent @subtext1 transparent; - } - - span.query-pick { - color: @text; - } - - .has-tip { - color: @subtext1; - border-color: @overlay1; - } - - .has-tip:hover, - .has-tip:focus { - border-bottom: dotted 1px @sapphire; - color: @sapphire; - } - - label { - color: @subtext1; - } - - table { - background: @base; - & when (@lookup ="latte") { - background-color: @surface0; - } - background-color: @surface1; - } - - table tr th, - table tr td { - color: @subtext1; - } - - .kanji-table td { - & when (@lookup ="latte") { - border-color: @surface0; - } - border-color: @surface1; - } - - table tr.even, - table tr.alt, - table tr:nth-of-type(2n) { - & when (@lookup ="latte") { - background: fadeout(@surface0, 0.5); - } - background: fadeout(@surface1, 0.5); - } - - .reading-table tr ~ tr > td { - & when (@lookup ="latte") { - border-color: @surface0; - } - border-color: @surface1; - } - - table.kanji-match td { - & when (@lookup ="latte") { - border-color: @surface0; - } - border-color: @surface1; - } - - tr.match-row-kanji, - tr.match-row-reading { - & when (@lookup ="latte") { - border-color: @surface0; - } - border-color: @surface1; - } - - img { - filter: contrast(1.2) opacity(85%); - } - - /* Options */ - if (zen) { - .header, - footer, - .landing-page { - display: none; - } - - div.wrapper { - display: flex; - flex-direction: column; - align-items: center; - align-content: center; - justify-content: center; - padding: 50px 0; - min-height: 100vh; - margin: 0; - } - - .gloss-all { - width: 100%; - padding: 0 10px; - } - - #div-ichiran-result { - padding: 0 10px; - } - - #div-kanji-form, - #w-form { - width: 100%; - } - - #k-form > div > div, - #w-form > div > div { - width: 100%; - max-width: 304px; - } - } - } -} diff --git a/styles/ichi.moe/catppuccin.user.less b/styles/ichi.moe/catppuccin.user.less new file mode 100644 index 0000000000..4e1e9420e0 --- /dev/null +++ b/styles/ichi.moe/catppuccin.user.less @@ -0,0 +1,321 @@ +/* ==UserStyle== +@name ichi.moe Catppuccin +@namespace github.com/catppuccin/userstyles/styles/ichi.moe +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ichi.moe +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ichi.moe/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aichi.moe +@description Soothing pastel theme for ichi.moe +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] + +@var checkbox zen "Zen Mode" 0 +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("ichi.moe") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + html, + body { + background: @base; + color: @text; + } + + footer { + color: @subtext1; + } + + span.query-word:hover { + border-color: @pink; + } + + .panel-error { + background-color: fade(@red, 80%); + } + + .highlight { + background-color: fade(@yellow, 80%); + } + + .gloss { + background-color: if(@flavor = "latte", @base, @surface0); + } + + .gloss, + .gloss-rtext { + border-color: if(@flavor = "latte", @surface2, @overlay0); + } + + .gloss:target { + & when (@flavor = "latte") { + box-shadow: 0 0 5px @surface2; + -webkit-box-shadow: 0 0 5px @surface2; + -moz-box-shadow: 0 0 5px @surface2; + } + box-shadow: 0 0 5px @overlay0; + -webkit-box-shadow: 0 0 5px @overlay0; + -moz-box-shadow: 0 0 5px @overlay0; + } + + a { + color: @sapphire; + } + + a.wiktionary-link { + color: @text; + } + + a.info-link { + color: @text; + } + + a.info-link:hover { + border-bottom-color: @sapphire; + } + + .note-skipped a { + color: @subtext1; + } + + .note-skipped a:hover { + border-color: @subtext1; + } + + .jspDrag { + background-color: if(@flavor = "latte", @surface1, @surface2); + } + + .conj-negative { + color: @red; + } + + .conj-formal { + color: @blue; + } + + .pos-desc { + color: @green; + } + + .reading-table tr:nth-of-type(2n), + table.kanji-match tr:nth-of-type(2n) { + background: fade(if(@flavor = "latte", @surface0, @surface1), 50%); + } + + .kanji-big a { + color: @subtext1; + } + + .autocomplete-suggestions { + border-color: if(@flavor = "latte", @surface2, @overlay0); + } + + .autocomplete-suggestions, + .autocomplete-selected { + background: if(@flavor = "latte", @base, @surface0); + } + + .autocomplete-suggestions strong { + color: @lavender; + } + + .autocomplete-group strong { + border-bottom-color: @text; + } + + .button { + background-color: @sapphire; + border-color: @sapphire; + color: @base; + } + + button:hover, + button:focus, + .button:hover, + .button:focus { + background-color: darken(@sapphire, 25%); + color: @base; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: @text; + } + + input[type="text"], + input[type="password"], + input[type="date"], + input[type="datetime"], + input[type="datetime-local"], + input[type="month"], + input[type="week"], + input[type="email"], + input[type="number"], + input[type="search"], + input[type="tel"], + input[type="time"], + input[type="url"], + input[type="color"], + textarea, + input[type="file"], + input[type="checkbox"], + input[type="radio"], + select, + input[type="text"]:focus, + input[type="password"]:focus, + input[type="date"]:focus, + input[type="datetime"]:focus, + input[type="datetime-local"]:focus, + input[type="month"]:focus, + input[type="week"]:focus, + input[type="email"]:focus, + input[type="number"]:focus, + input[type="search"]:focus, + input[type="tel"]:focus, + input[type="time"]:focus, + input[type="url"]:focus, + input[type="color"]:focus, + textarea:focus, + input[type="file"]:focus, + input[type="checkbox"]:focus, + input[type="radio"]:focus, + select:focus { + & when (@flavor = "latte") { + background-color: @base; + border-color: @surface0; + } + background-color: @surface0; + border-color: @surface1; + color: @text; + } + + .header-nav a { + color: @pink; + } + + .header-nav a:hover { + color: darken(@pink, 15%); + } + + .jspTrack { + background: if(@flavor = "latte", @surface0, @surface1); + } + + .f-dropdown { + background-color: if(@flavor = "latte", @base, @surface0); + border-color: @subtext1; + } + + .f-dropdown::before { + border-color: transparent transparent @subtext1; + } + + span.query-pick { + color: @text; + } + + .has-tip { + color: @subtext1; + border-color: @overlay1; + } + + .has-tip:hover, + .has-tip:focus { + border-bottom-color: @sapphire; + color: @sapphire; + } + + label { + color: @subtext1; + } + + table { + background: @base; + background-color: if(@flavor = "latte", @surface0, @surface1); + } + + table tr th, + table tr td { + color: @subtext1; + } + + table tr.even, + table tr.alt, + table tr:nth-of-type(2n) { + background: fade(if(@flavor = "latte", @surface0, @surface1), 50%); + } + + .kanji-table td, + .reading-table tr ~ tr > td, + table.kanji-match td, + tr.match-row-kanji, + tr.match-row-reading { + border-color: if(@flavor = "latte", @surface0, @surface1); + } + + img { + filter: contrast(1.2) opacity(85%); + } + + /* Options */ + & when (@zen = 1) { + .header, + footer, + .landing-page { + display: none; + } + + div.wrapper { + display: flex; + flex-direction: column; + align-items: center; + place-content: center center; + padding: 50px 0; + min-height: 100vh; + margin: 0; + } + + .gloss-all { + width: 100%; + padding: 0 10px; + } + + #div-ichiran-result { + padding: 0 10px; + } + + #div-kanji-form, + #w-form { + width: 100%; + } + + #k-form > div > div, + #w-form > div > div { + width: 100%; + max-width: 304px; + } + } + } +} diff --git a/styles/indie-wiki-buddy/README.md b/styles/indie-wiki-buddy/README.md new file mode 100644 index 0000000000..016391b98d --- /dev/null +++ b/styles/indie-wiki-buddy/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Indie Wiki Buddy + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [thismoon](https://github.com/thismoon) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/indie-wiki-buddy/catppuccin.user.less b/styles/indie-wiki-buddy/catppuccin.user.less new file mode 100644 index 0000000000..33099c6794 --- /dev/null +++ b/styles/indie-wiki-buddy/catppuccin.user.less @@ -0,0 +1,115 @@ +/* ==UserStyle== +@name Indie Wiki Buddy Catppuccin +@namespace github.com/catppuccin/userstyles/styles/indie-wiki-buddy +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/indie-wiki-buddy +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/indie-wiki-buddy/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aindie-wiki-buddy +@description Soothing pastel theme for Indie Wiki Buddy +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +/* +To get a list of supported search engines, run the following command: +curl -s https://raw.githubusercontent.com/KevinPayravi/indie-wiki-buddy/main/manifest-firefox.json | python -c "import sys, json;print(*json.loads(sys.stdin.read())['content_scripts'][2]['matches'], sep='\n')" +*/ +@-moz-document domain("bing.com"), + domain("search.brave.com"), + domain("duckduckgo.com"), + domain("ecosia.org"), + domain("kagi.com"), + domain("qwant.com"), + domain("search.yahoo.com"), + domain("startpage.com"), + domain("ya.ru"), + regexp("^https?://(www\\.)?google\\..*"), + regexp("^https?://(www\\.)?yandex\\..*") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + + .iwb-new-link button { + color: @base; + background: @blue; + &:hover { + background: @sky; + } + } + .iwb-result-controls { + color: @text !important; + } + } +} + +@-moz-document domain("fandom.com"), + domain("fextralife.com"), + domain("neoseeker.com"), + domain("breezewiki.com"), + domain("antifandom.com"), + domain("bw.artemislena.eu"), + domain("breezewiki.catsarch.com"), + domain("breezewiki.esmailelbob.xyz"), + domain("breezewiki.frontendfriendly.xyz"), + domain("bw.hamstro.dev"), + domain("breeze.hostux.net"), + domain("breezewiki.hyperreal.coffee"), + domain("breeze.mint.lgbt"), + domain("breezewiki.nadeko.net"), + domain("nerd.whatever.social"), + domain("breeze.nohost.network"), + domain("z.opnxng.com"), + domain("bw.projectsegfau.lt"), + domain("breezewiki.pussthecat.org"), + domain("bw.vern.cc"), + domain("breeze.whateveritworks.org"), + domain("breezewiki.woodland.cafe") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + + .indie-wiki-banner { + background: @mantle; + color: @text; + ::selection { + background-color: fade(@accent, 30%); + } + } + .indie-wiki-banner-exit { + color: @text; + } + .indie-wiki-banner-link { + color: @blue; + + &:hover { + color: @sky; + } + } + .indie-wiki-banner-disabled { + color: @subtext0; + } + } +} diff --git a/styles/inoreader/README.md b/styles/inoreader/README.md new file mode 100644 index 0000000000..40c9045c74 --- /dev/null +++ b/styles/inoreader/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for inoreader + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [thomas-philippot](https://github.com/thomas-philippot) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/inoreader/catppuccin.user.less b/styles/inoreader/catppuccin.user.less new file mode 100644 index 0000000000..d01a456fe4 --- /dev/null +++ b/styles/inoreader/catppuccin.user.less @@ -0,0 +1,582 @@ +/* ==UserStyle== +@name inoreader Catppuccin +@namespace github.com/catppuccin/userstyles/styles/inoreader +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/inoreader +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/inoreader/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ainoreader +@description Soothing pastel theme for inoreader +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("inoreader.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + body, + .inno_dialog, + .reader_pane_view_style_1 .article_subscribed, + .reader_pane_view_style_4 .article_subscribed, + .inno_toolbar_switcher_button_active, + .dashboard_wrapper, + #sb_tree_part, + #sb_menu_icon, + #sb_tp_search_overlay, + #feed_searcher, + #wraper.tree_pane_docked #feed_searcher, + #preferences_main_wrapper, + .reader_pane_view_style_0 .article_expanded:hover, + div.article_expanded, + .article, + .article_expanded + .article_footer_placeholder_middle.footerized.article_footer_placeholder_middle_sticky, + #article_dialog .article_footer_placeholder_top, + #three_way_contents .article_footer_placeholder_top, + .article_footer, + .pricing_plans_row_sticky, + .searcher_top_bar_wrapper { + background-color: @base; + } + + body, + .article_unreaded .article_tile_title, + .icon16, + .icon14, + .icon19, + .h6, + .article_unreaded .article_magazine_content, + .article_unreaded .article_magazine_title, + #sb_tp_dock, + .inno_toolbar_button, + #sb_rp_heading, + .article_header_text, + .article_content, + .profile_menu_themes_heading, + .inno_toolbar_switcher_button:hover, + #sb_rp_heading span.icon16, + .sub_engagement_number, + .sub_folder, + .inline_folders_editor, + .tf, + .top_bar_tab, + .top_bar_tab .icon16, + #tree_pane .icon16, + #add_content_simulated_button .plus_img, + a:link, + .h4[class*="icon-"], + h4[class*="icon-"], + .inno_tabs_wrapper .inno_tabs_header .inno_tabs_tab a:link, + .inno_tabs_wrapper .inno_tabs_header .inno_tabs_tab a:active, + .inno_tabs_wrapper .inno_tabs_header .inno_tabs_tab a:visited, + #tree_pane .plus_img { + color: @text; + } + a.text-color, + a.nav-item-btn, + .icon-arrow_collapse { + color: @text !important; + } + + .progress { + --bs-progress-bar-color: @accent; + --bs-progress-bar-bg: @accent; + --bs-bar-bg: @overlay1; + } + + .text-muted-color { + color: @subtext0 !important; + } + + #tree_pane, + #reader_pane, + #feeds_nav, + .tree_ad, + .article_full_contents, + .article_unreaded, + .search_empty_state_mask, + .library_wrapper_outer, + .teams_presentation_wrapper, + .article_subscribed, + .tr1, + .search_width_constraint, + .bg-white { + background-color: @base !important; + color: @text; + } + + .st_usage_slider_outer { + background-color: @text; + } + + .st_usage_slider_inner, + #text-menu .dropdown-menu, + .article_unreaded .article_unread_dot .article_unread_dot_internal { + background-color: @accent; + } + + .bg-primary { + background-color: @accent !important; + } + + #tree_pane .parent_div_inner_selected .plus_img { + color: @accent; + } + + .active-url .item-name, + .active-url span[class^="icon-"].h4, + .active-url i[class^="icon-"].h4 { + color: @accent !important; + } + + .icon-logo_circle { + color: @crust !important; + } + + #tabs_pane .nav-item a i, + #tabs_pane .nav-item a span, + #tabs_pane #bottom_tabs .nav-item a i { + color: @crust; + } + + #tabs_pane .tabs-counter, + #tabs_pane #bottom_tabs .nav-item a i.icon-full { + color: @text !important; + background-color: @base !important; + } + + #hint-pref { + fill: @accent; + } + + .article_footer_buttons.icon-article_topbar_read_later_full, + #reader_pane .ar .article_btns a .h4.icon-saved, + #reader_pane .ar .article_btns a .h4.star_full, + span.icon-yellow, + i.icon-yellow { + color: @yellow; + } + + .bg-alt { + background: @yellow !important; + } + + .btn.btn-alt { + background-color: @yellow; + border-color: @yellow; + } + + .bg-success-color.darker { + background-color: @green !important; + } + + .alert_state { + background-color: @red; + } + + .icon-mark-as-read-single-unread { + color: @blue !important; + } + + .tabs-counter { + background-color: @accent !important; + outline-color: @accent !important; + color: @mantle; + } + + .active-tab-feeds:not(.active-overlay) #tabs_pane [data-tab="feeds"] i, + .active-tab-dashboard:not(.active-overlay) + #tabs_pane + [data-tab="dashboard"] + i, + .active-tab-saved:not(.active-overlay) #tabs_pane [data-tab="saved"] i, + .active-tab-automation:not(.active-overlay) + #tabs_pane + [data-tab="automation"] + i, + .active-tab-search:not(.active-overlay) #tabs_pane [data-tab="search"] i, + .active-tab-add_feed:not(.active-overlay) + #tabs_pane + [data-tab="add_feed"] + i, + .active-tab-notifications:not(.active-overlay) + #tabs_pane + [data-tab="notifications"] + i, + .active-tab-preferences:not(.active-overlay) + #tabs_pane + [data-tab="preferences"] + i { + background-color: @base; + color: @text !important; + } + + .preferences_main_button, + .preferences_billing_feature_main { + background-color: @mantle; + border-color: @surface0; + } + + .dashboard_gadgets, + .dashboard_gadgets .content, + .library_section_main_article, + .library_secondary_article, + .library_section_list_articles { + background-color: @mantle; + } + + #header_pane, + .search_context_dropdown.open { + background-color: @base !important; + color: @text; + } + + .dropdown-menu, + .ino-autocomplete { + background-color: @mantle; + } + + .dropdown-menu .dropdown-header { + color: @text; + } + + .dropdown-menu .dropdown-item, + a:visited { + color: @subtext0; + } + + .dropdown-menu .dropdown-item:hover, + .dropdown-menu .dropdown-item:focus, + #tree_pane .parent_div_inner:hover, + #tree_pane .parent_div_inner:active, + #tree_pane .parent_div_inner:focus, + .search_context_dropdown.open .search_context_filter:hover, + .nav.nav-hover .nav-item:hover, + .lang_bubble:hover, + #tabs_pane .toggle_sidebar_btn i { + background-color: @surface0; + } + + .dropdown-menu .dropdown-item:active { + background-color: @surface0; + color: @accent; + } + + .dropdown-menu .dropdown-item.active, + #tree_pane .parent_div_inner_selected, + #tree_pane .parent_div_inner_selected:hover, + #tree_pane .parent_div_inner_selected a, + .search_context_dropdown.open .search_context_filter.active, + .nav.nav-hover .active-url, + .lang_bubble.lang_bubble_current { + background-color: @surface1; + color: @accent; + } + + .btn.btn-outline-text { + color: @text; + border-color: @subtext0; + } + + .btn.btn-primary, + .btn.btn-primary:hover { + color: @text; + background-color: @accent; + border-color: @accent; + } + + .dropdown-menu-active, + .btn.btn-outline-text:hover { + color: @text; + border-color: @subtext0; + background-color: @surface0; + } + + input[type="text"]:focus, + input[type="checkbox"]:focus + label, + input[type="checkbox"]:active + label, + input[type="button"]:focus, + input[type="button"]:active, + textarea:focus, + select:focus, + button:focus, + input[type="password"]:focus, + input[type="email"]:focus { + box-shadow: 0 0 3px @accent !important; + border-color: @accent !important; + } + + input[type="text"], + input[type="number"], + input[type="password"], + select, + textarea { + background-color: @base !important; + color: @text !important; + border-color: @subtext0; + } + + .graylink_darker, + .article_short_contents { + color: @subtext0; + } + + div.article_magazine.article_current, + div.article_magazine.article_bulk_selected { + box-shadow: 0 0 0 1px @subtext0; + } + .view_style_3 #reader_pane .ar.article_current .article_tile_picture { + box-shadow: inset 3px 3px 0 -2px @accent, inset -3px 2px 0 -2px @accent; + } + .view_style_3 #reader_pane .ar.article_current { + box-shadow: inset 0 0 0 1px @accent; + } + + .view_style_4 #reader_pane .ar.article_current { + box-shadow: 0 0 0 1px @accent; + } + .view_style_2 #reader_pane .ar.article_current_3way, + .view_style_2 #reader_pane .ar.article_expanded { + box-shadow: none; + border-color: @text; + } + + .article_magazine_content { + color: @overlay0; + } + + .article_magazine_title { + color: @overlay1; + } + + .inno_dialog_modal_overlay { + background-color: @overlay2; + } + + .subscriptions_legend, + .preferences_main_button_icon span, + a.bluelink:link, + .bluelink, + .inno_tabs_tab_current, + .inno_tabs_tab_current:hover, + .inno_toolbar_button_menu_item_inactive .inno_toolbar_button_menu_icon, + .inno_toolbar_button_menu_icon, + #preferences_subscriptions_table span.icon_active, + .text-primary, + .inno_tabs_wrapper + .inno_tabs_header + .inno_tabs_tab.inno_tabs_tab_current + a:link, + .inno_tabs_wrapper + .inno_tabs_header + .inno_tabs_tab.inno_tabs_tab_current + a:active, + .inno_tabs_wrapper + .inno_tabs_header + .inno_tabs_tab.inno_tabs_tab_current + a:visited { + color: @accent !important; + } + + #new_articles_overlay { + color: @accent; + background-color: @base; + } + + input.apple-switch:checked { + background-color: @accent; + border-color: @accent; + } + + .add_content_simulated_button.expanded { + background-color: @surface0; + box-shadow: inset 0 -1px 0 0 @accent; + } + + .inno_toolbar_button_menu, + #reader_pane .info_state, + .inno_dialog_modal .info_state, + .preferences_interface_helper, + .sub_folder { + background-color: @mantle; + color: @text; + } + + #profile_menu_themes_wrapper { + display: none; + } + + #sb_reading_part, + #wraper.tree_pane_docked #sb_tree_part { + box-shadow: none; + } + + .whitebutton { + background-color: @base; + color: @text; + border-color: @surface0; + } + + .bluebutton, + .inno_dialog .inno_dialog_buttonbar_button:nth-child(1) { + background-color: @accent; + color: @crust; + border-style: none; + } + + .inno_dialog .inno_dialog_buttonbar_button:nth-child(1):hover:enabled { + background-color: @accent; + border-color: @accent; + } + + .inno_dialog_buttonbar_button { + background-color: @base; + color: @text; + } + + .icon_green { + color: @green; + } + + .reader_pane_view_style_0 .article_unreaded:hover, + .reader_pane_view_style_2 .article_unreaded:hover, + .reader_pane_view_style_2 .article:hover, + .sd .share_wrapper .icon16:hover, + .pricing_feature_row:nth-child(odd), + .pricing_table_row .pricing_table_leftmost_cell, + .article_footer .share_wrapper:hover { + background-color: @surface0; + } + + .add_content_simulated_button_menu, + .profile_menu_plan_badge { + background-color: @surface0; + border-color: @surface0; + color: @text; + } + + .catalog_follow_featured_collection, + .catalog_sub_section_title, + .search_feed_wrapper { + border-color: @surface0; + } + + .border-bottom, + .header-shadow { + border-color: @text; + } + + .pricing_teams_hero { + background-color: @surface0; + background-image: none; + } + + .parent_div_inner:hover, + .inno_toolbar_button_menu_item:hover, + .preferences_profile_wrapper, + code, + pre { + background-color: @surface0; + color: @text; + } + + .preferences_profile_plan_wrapper, + .st_subheader, + .catalog_sub_section_tab.catalog_sub_section_tab_current, + .catalog_sub_section_tab:hover { + background: @surface1; + color: @text; + } + + .article_footer .article_footer_main_buttons .article_footer_buttons:hover, + .article_footer + .article_footer_main_buttons + .article_footer_buttons_current, + .article_footer .icon-article_topbar_more_menu:hover, + .st_header, + input[type="radio"].filter_radio:checked + label, + input[type="checkbox"].filter_radio:checked + label { + background-color: @surface2; + color: @text; + } + + input[type="checkbox"].form-check-input:checked, + input[type="radio"].form-check-input:checked { + background-color: @accent; + border-color: @accent; + } + + .normal_dim { + color: @subtext1; + } + + .parent_div_inner_selected, + #preferences_header, + #tabs_pane, + .add_content_simulated_button_menu_line_item:hover { + background-color: @accent; + color: @mantle; + } + + #preferences_header .icon16, + #preferences_dialog_close_button span.icon16 { + color: @mantle; + } + + .article_tile.article_unreaded.article_expanded { + background-color: @base; + box-shadow: 0 1px 8px @mantle, 0 1px 3px @mantle; + } + + div.article_current_3way { + box-shadow: inset 0 0 0 1 @accent, inset 5px 0 0 0 @accent; + } + + div.article_tile.article_expanded { + border-color: @mantle; + } + + .article_footer_placeholder_top .article_footer, + .inno_tabs_header, + .gadget_overview_feed { + border-color: @surface2; + } + + .inno_toolbar_switcher:hover .inno_toolbar_switcher_button_active, + .inno_toolbar_switcher:hover .inno_toolbar_switcher_button_active:hover { + color: @accent; + background-color: @base; + border-color: @accent; + } + + .inno_tabs_tab:hover { + color: @accent; + border-color: @accent; + } + + #audio_player_nav.is-overlay .tab-content, + #audio_player_nav .media-player.maximized .container, + #notifications_nav.is-overlay .tab-content, + #support_nav.is-overlay .tab-content, + #profile_nav.is-overlay .tab-content { + background-color: @base; + } + } +} diff --git a/styles/instagram/README.md b/styles/instagram/README.md new file mode 100644 index 0000000000..63b1e77833 --- /dev/null +++ b/styles/instagram/README.md @@ -0,0 +1,37 @@ + + + +

+ Logo
+ + Catppuccin for Instagram + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [GenShibe](https://github.com/GenShibe) + +## 💖 Past Maintainer +- [isabelroses](https://github.com/isabelroses) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/instagram/catppuccin.user.less b/styles/instagram/catppuccin.user.less new file mode 100644 index 0000000000..548a249ca4 --- /dev/null +++ b/styles/instagram/catppuccin.user.less @@ -0,0 +1,834 @@ +/* ==UserStyle== +@name Instagram Catppuccin +@namespace github.com/catppuccin/userstyles/styles/instagram +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/instagram +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/instagram/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ainstagram +@description Soothing pastel theme for Instagram +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("instagram.com") { + ._aa4d { + #catppuccin(@darkFlavor); + } + ._aa4c { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + @dark-color: if(@flavor = latte, @text, @crust); + @light-color: if(@flavor = latte, @crust, @text); + + &, + .x1qjc9v5, + .x9f619, + .x78zum5, + .xdt5ytf, + .x1iyjqo2, + .xl56j7k { + --web-always-black: #lib.rgbify(@dark-color)[]; + --ig-primary-icon: #lib.rgbify(@text)[]; + --web-always-white: #lib.rgbify(@light-color)[]; + --always-white: #lib.rgbify(@light-color)[]; + --overlay-alpha-80: fade(@dark-color, 50%); + --grey-9: #lib.rgbify(@crust)[]; + --ig-primary-background: #lib.rgbify(@base)[]; + --ig-secondary-background: #lib.rgbify(@surface0)[]; + --ig-banner-background: #lib.rgbify(@crust)[]; + --ig-highlight-background: #lib.rgbify(@surface0)[]; + --ig-elevated-background: #lib.rgbify(@crust)[]; + --ig-elevated-highlight-background: #lib.rgbify(@surface0)[]; + --ig-hover-overlay: #lib.rgbify(@text)[], 0.1; + --hover-overlay: fade(@surface0, 20%); + --ig-text-on-color: #lib.rgbify(@crust)[]; + --ig-badge: #lib.rgbify(@accent)[]; + --ig-primary-button: #lib.rgbify(@accent)[]; + --ig-primary-button-hover: fade(@accent, 80%); + --ig-secondary-button-background: #lib.rgbify(@surface0)[]; + --ig-secondary-button-hover: #lib.rgbify(@surface1)[]; + --ig-secondary-button: #lib.rgbify(@text)[]; + --ig-primary-text: #lib.rgbify(@text)[]; + --ig-secondary-text: #lib.rgbify(@subtext0)[]; + --ig-tertiary-text: #lib.rgbify(@subtext0)[]; + --wbloks-primary-text: @text; + --ig-text-on-media: #lib.rgbify(@text)[]; + --ig-separator: #lib.rgbify(@surface0)[]; + --chat-admin-text-color: #lib.rgbify(@subtext0)[]; + --ig-elevated-separator: #lib.rgbify(@surface0)[]; + --post-separator: #lib.rgbify(@overlay0)[]; + --ig-stroke: #lib.rgbify(@overlay0)[]; + --grey-2: #lib.rgbify(@overlay0)[]; + --ig-link: #lib.rgbify(@accent)[]; + --ig-error-or-destructive: #lib.rgbify(@red)[]; + --ig-success: #lib.rgbify(@green)[]; + --blue-2: #lib.rgbify(@blue)[]; + --ig-close-friends-refreshed: #lib.rgbify(@green)[]; + --ig-text-input-border-hover-prism: #lib.rgbify(@surface1)[]; + --ig-toggle-outline-prism: #lib.rgbify(@text)[]; + --ig-toggle-background-on-prism: #lib.rgbify(@text)[]; + --ig-stroke-prism: #lib.rgbify(@crust)[]; + --barcelona-logo: #lib.rgbify(@text)[]; + --ig-bubble-background: #lib.rgbify(@surface1)[]; + --ig-tertiary-icon: #lib.rgbify(@accent)[]; + --always-dark-overlay: @accent; + --secondary-text: @subtext0; + --primary-text: @text; + --primary-icon: @accent; + --primary-button-text: @mantle !important; + --primary-button: @blue !important; + --mwp-primary-theme-color: darken(@blue, 10%); + --chat-composer-button-color: darken(@blue, 10%); + scrollbar-color: @accent @crust; + } + #splash-screen { + background-color: @base !important; + } + + /* Sidebar */ + .x1xgvd2v { + background-color: @crust !important; + &[style="transform: translateX(0px);"] { + background-color: @mantle !important; + } + } + .x1zvrr1 { + background-color: @mantle; + } + svg[aria-label="Loading..."] { + stroke: @text; + } + + /* Story background */ + .x5qyhuo { + background-color: @base; + } + + /* Story progress bar */ + ._ac3p { + background-color: @accent !important; + } + + /* close friends story things */ + .x9bdzbf { + color: @text !important; + } + + /* Story seen / not seen ring */ + button:has(canvas + span > img[alt$="'s profile picture"]) { + canvas { + display: none; + } + + span { + outline-style: solid; + outline-offset: 0.15rem; + } + + &[aria-label^="Story by"][aria-label$="not seen"] span { + outline-color: @accent; + outline-width: 0.2rem; + } + &[aria-label^="Story by"]:not([aria-label$="not seen"]) span { + outline-color: @surface2; + outline-width: 0.075rem; + } + } + + /* Posts */ + ._aggc { + background-color: @mantle; + border-color: @overlay0 !important; + border-radius: var(--modal-border-radius); + box-shadow: 0 3px 5px -1px fade(@dark-color, 80%); + box-sizing: border-box; + } + ._aatc ._aasi, + ._ae1i, + ._aggc textarea.xvbhtw8 { + background-color: @mantle; + } + + /* Icons */ + svg[aria-label="Unlike"], + svg[aria-label="Verified"] { + fill: @accent !important; + } + svg[aria-label="Next"], + svg[aria-label="Go back"], + svg[aria-label="Close"] { + fill: @text !important; + } + + /* new post thingy */ + ._aa1q._aa1q { + color: @text !important; + } + + /* sumting wong's popup box */ + .x879a55, + .x7ywyr2:not( + [style*="background-color: rgb(var(--ig-highlight-background))"] + ) { + background-color: var(--surface1) !important; + } + + /* Share box */ + .xzloghq { + background-color: @surface0; + color: @text !important; + &:hover { + color: @mantle !important; + background-color: @accent !important; + } + } + .xk5f4mz { + background-color: @mantle; + &:hover { + background-color: @accent; + } + } + .x3nfvp2 { + color: @text !important; + &:hover { + color: @crust; + } + } + + /* reel icon */ + .xq3z1fi { + color: @accent !important; + } + + /* Toggle sliders */ + .x1r7x56h { + background-color: @accent; + } + .x100vrsf { + background-color: @surface0; + } + + .x1psfjxj { + background-color: @mantle; + } + span[data-bloks-name="bk.components.TextSpan"] { + color: @accent !important; + } + .xs7f9wi { + background-color: @mantle !important; + } + .x1d72o { + background-color: @surface0; + } + /* Log In With Facebook text */ + ._ab37 { + color: @blue; + } + /* Excluded: - _9ys7, _9_1f, _9ys8 (verified icon) */ + [style*='background-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png")'], + ._9zkj, + ._a3ds, + ._a3dt, + ._a3du, + ._a3dv, + ._a3dw, + ._9-b3, + ._9znl, + ._9z-6, + ._a3dx, + ._a3dy, + ._a3dz, + ._a3d-, + ._a3d_, + ._a3e0, + ._9zm4, + ._a3e1, + ._a3e2, + ._a3e3, + ._a3e4, + ._a3e5, + ._a3e6, + ._a3e7, + ._a3e8, + ._a3e9, + ._a3ea, + ._9_57, + ._9_n5, + ._9-y3, + ._a3eb, + ._a3ec, + ._a3ed, + ._a3ee, + ._9zlu, + ._9-yp, + ._a3ef, + ._a3eg, + ._9_wm, + ._a3eh, + ._a3ei, + ._9-j_, + ._a3ej, + ._a3ek, + ._9_ij, + ._9_d_, + ._9_e1, + ._9-mm, + ._9_cx, + ._9zm0, + ._9zfi, + ._9-ub, + ._a3el, + ._9-7-, + ._9-1a, + ._a3em, + ._9zrp, + ._a3en, + ._9zz9, + ._a3eo, + ._9zmr, + ._9-8d, + ._9zhi, + ._a3ep, + ._9zs0, + ._9-j-, + ._a3eq, + ._9zli, + ._9_4y, + ._9zm2, + ._9zfj, + ._9zlg, + ._a3er, + ._9-lv, + ._9_ug, + ._9_sh, + ._9_sj, + ._9-k0, + ._9z-c, + ._9_35, + ._9_hh, + ._a3es, + ._a3et, + ._a3eu, + ._9-v-, + ._9_4d, + ._9zlh, + ._a3ev, + ._a3ew, + ._a3ex, + ._a3ey, + ._9_7m, + ._9_fv, + ._a3ez, + ._9-zf, + ._9-zg, + ._9-ze, + ._a9fa, + ._9-zh, + ._9-zi, + ._9-zj, + ._9-zk, + ._9-zl, + ._9-zm, + ._9-zn, + ._9-zo, + ._9-zp, + ._9-zq, + ._9-zr, + ._9-zs, + ._9-zt, + ._a3op, + ._a3oq, + ._9-zu, + ._9-zv, + ._9-zw, + ._9-zx, + ._9-zy, + ._9-zz, + ._9-z-, + ._a3or, + ._a3ot, + ._a3os, + ._9zs1, + ._9zs2, + ._9-z_, + ._9--0, + ._9--1, + ._9--2, + ._9--3, + ._9--4, + ._9--5, + ._9--6, + ._9--7, + ._9--f, + ._9--8, + ._9--9, + ._9--a, + ._9--b, + ._9--c, + ._9--d, + ._9--e, + ._a3ou, + ._9--g, + ._9--h, + ._9--i, + ._9--j, + ._9--l, + ._9--k, + ._9--m, + ._9--n, + ._9--o, + ._9--p, + ._9--q, + ._a3ov, + ._9--s, + ._9--r, + ._9--t, + ._9--u, + ._9--v, + ._9--x, + ._9--y, + ._9--w, + ._9--z, + ._9--_, + ._9-_0, + ._9-_1, + ._9-_2, + ._9-_3, + ._9---, + ._9-_4, + ._9-_5, + ._9-_6, + ._9-_7, + ._a3wy, + ._9-_8, + ._9-_9, + ._a3ow, + ._9-_a, + ._9-_b, + ._9-_c, + ._9-_d, + ._9-_e, + ._9-_f, + ._9-_g, + ._9-_h, + ._9-_i, + ._9-_j, + ._9-_k, + ._9-_l, + ._9-_m, + ._9-_n, + ._9-_o, + ._a3ox, + ._9-_p, + ._9-_q, + ._a9fb, + ._9-_t, + ._9-_r, + ._9-_s, + ._a93g, + ._9-_u, + ._9-_v, + ._a9fc, + ._9-_w, + ._9-_x, + ._9-_y, + ._9-_z, + ._9-_-, + ._9-__, + ._9_00, + ._a3oy, + ._9_01, + ._9_02, + ._9_03, + ._9_04, + ._9_05, + ._9_08, + ._9_09, + ._9_07, + ._9_06, + ._9_0a, + ._9_0b, + ._9_0c, + ._9_0d, + ._9_0e, + ._9_0f, + ._9_0g, + ._a93h, + ._9_0h, + ._9_0i, + ._9_0j, + ._9_0k, + ._aepo, + ._9_0l, + ._9_0m, + ._9_0n, + ._9_0o, + ._9_0p, + ._a3oz, + ._a93l, + ._9_0r, + ._9_0s, + ._a7tk, + ._9_0q, + ._a3o-, + ._9_0t, + ._9_0v, + ._9_0u, + ._a9ej, + ._9_0w, + ._9_0x, + ._9_0y, + ._9_0z, + ._9_0_, + ._9_0-, + ._9_10, + ._9_11, + ._9_12, + ._9_13, + ._9_14, + ._9_15, + ._a3o_, + ._9_18, + ._9_19, + ._9_1a, + ._9_1e, + ._9_1b, + ._9_1c, + ._9_1d, + ._9_16, + ._9_17, + ._a3p0, + ._9_1g, + ._9_1i, + ._9_1h, + ._9_1j, + ._9_1k, + ._9_1l, + ._9_1m, + ._a9pw { + filter: @text-filter; + } + + /* Custom icons */ + @instagram_gradient: radial-gradient( + circle at 30% 107%, + @yellow 0%, + @yellow 5%, + @peach 45%, + @mauve 60%, + @blue 90% + ); + /* Instagram text logo */ + [style*="background-image: url(\"https://static.cdninstagram.com/rsrc.php/v3/yU/r/H5Bq7ru-y9E.png\");"] { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + background-position: -3px -7px !important; + background-size: unset !important; + } + /* 2fa lock icon */ + [aria-label="Two factor authentication lock icon"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + /* "All caught up" icon */ + img[src="/images/instagram/xig/web/illo-confirm-refresh-light.png"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + [style*='background-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png")'] { + /* No photo icon */ + &[style*="background-position: 0px -97px"] { + filter: none; + background: @mauve !important; + background: @instagram_gradient !important; + mask-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png"); + mask-position: 0 -97px; + } + + /* Private page icon */ + &[style*="background-position: -49px -97px"] { + filter: none; + background: @mauve !important; + background: @instagram_gradient !important; + mask-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png"); + mask-position: -49px -97px; + } + + &[style*="background-position: -49px 0px"] { + filter: none; + background: @mauve !important; + background: @instagram_gradient !important; + mask-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png"); + mask-position: -49px 0; + } + } + + /* Post swipe icons */ + ._aaqh { + background-color: @surface0; + } + + /* Inside primary buttons */ + .xzloghq, + ._acas:not(._acao) { + &, + svg { + color: @crust; + fill: @mantle; + } + } + ._acas:not(._acao):hover { + background-color: @surface0 !important; + color: @accent !important; + } + + /* Secondary buttons */ + .x1gjpkn9, + ._acat, + ._acap { + &, + a& { + &, + &:visited { + color: @text; + } + } + } + + /* Profile banner */ + div:has(> .x1mu97ne) { + background-color: @crust; + border-color: @overlay0; + box-shadow: 0 10px 35px 2px fade(@dark-color, 30%); + } + + /* Dialog overlay */ + .x7r02ix[role="dialog"] { + box-shadow: 0 5px 10px 0 fade(@dark-color, 50%); + } + + /* Settings */ + ._ab81 { + background-color: @mantle; + } + ._ab85, + ._ab6i, + ._ab85 .xvbhtw8, + ._aav4 { + background-color: @crust; + } + /* Settings saved toast */ + ._abmp { + color: @text; + } + + /* Bloks */ + .wbloks_1[data-bloks-name="bk.components.Collection"] { + background-color: @base !important; + } + div[data-bloks-name="bk.components.Flexbox"], + .wbloks_1[data-bloks-name="bk.components.Flexbox"] { + /* Radios have left padding */ + padding-left: 0 !important; + + /* The heading */ + &[style*="background: rgb(0\, 0\, 0)"], + &[style*="background: rgb(255\, 255\, 255)"] { + background-color: @base !important; + } + + /* Radios */ + &[style*="border-radius: 10.5px"], + &[style*="border-radius: 12px"], + &[style*="border-radius: 4px"] { + /* Selected radio */ + &[style*="background: rgb(0\, 149\, 246)"] { + background-color: @accent !important; + } + + /* Not selected radio */ + &[style*="background: rgb(219\, 219\, 219)"], + &[style*="background: rgb(38\, 38\, 38)"], + &[style*="background: rgb(54\, 54\, 54)"], + &[style*="background: rgb(255\, 255\, 255)"] { + background-color: @surface0 !important; + } + } + + /* That "border" */ + &[style*="background: rgb(38\, 38\, 38)"] { + display: none; + } + } + + span[data-bloks-name="bk.components.TextSpan"], + span[data-bloks-name="bk.components.Text"] { + &[style*="color: rgb(250\, 250\, 250)"], + &[style*="color: rgb(224\, 241\, 255)"], + &[style*="color: rgb(0\, 55\, 107)"], + &[style*="color: rgb(38\, 38\, 38)"] { + color: @text !important; + } + + &[style*="color: rgb(142\, 142\, 142)"] { + color: @subtext0 !important; + } + } + + /* Map pop-ups */ + .leaflet-popup-content-wrapper, + .leaflet-popup-tip { + background-color: @mantle; + box-shadow: 0 5px 15px fade(@dark-color, 60%); + + * { + color: @text !important; + } + } + + /* Scrollbar */ + ::-webkit-scrollbar { + background-color: @crust; + } + + ::-webkit-scrollbar-thumb { + background-color: @accent; + border-radius: 10px; + } + } +} + +@-moz-document regexp("^.*instagram.com/direct.*") { + ._aa4d { + #catppuccin(@darkFlavor); + } + ._aa4c { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + + .x11jlvup { + --chat-outgoing-message-bubble-background-color: fade(@blue, 80%); + } + .x1n2onr6 { + --chat-incoming-message-bubble-background-color: @surface0; + } + + /* Chat background */ + .xnz67gz { + background-color: @base; + } + /* messages you've sent */ + .xyk4ms5 { + color: @crust !important; + } + /* sidebar */ + .xvbhtw8 { + background-color: @mantle; + } + .x186z157, + .xk50ysn, + .xi81zsa { + color: @subtext0 !important; + } + + /* New Chat Button */ + .xk5f4mz { + background-color: @surface0; + } + + /* Chat button */ + .x1i10hfl:hover { + color: @text; + } + .x1bvjpef { + color: @crust; + } + .x1bvjpef:hover { + color: lighten(@accent, 5%); + } + + /* notes */ + .xsnw5ke, + .x3zg9eu::after { + background-color: @surface0 !important; + } + .x103n6ev, + .xzxgvzf { + background-image: linear-gradient( + -90deg, + fade(@surface0, 30%), + fade(@surface0, 100%) + ); + } + + /* voice clip */ + div.x7ywyr2 { + &[style*="background-color: rgb(var(--ig-highlight-background))"] { + div[aria-label="Play"], + div[aria-label="Pause"], + div[role="timer"], + div[role="slider"] { + background-color: @text !important; + } + div[style*="clip-path"] div.x5yr21d.xh8yej3.x1bhxuv2 { + background-color: @subtext0 !important; + } + div[aria-label="Play"]:hover { + background-color: @subtext1 !important; + } + } + &[style*="background-color: var(--mwp-primary-theme-color)"] { + background-color: var(--mwp-primary-theme-color) !important; + div[aria-label="Play"], + div[aria-label="Pause"], + div[role="slider"], + div[role="timer"] { + background-color: @text !important; + } + div[aria-label="Play"]:hover { + background-color: @subtext1 !important; + } + } + } + /* voice clip recording container */ + div[style*="background-color: var(--chat-composer-button-color)"] { + div[role="slider"] { + opacity: 1 !important; + background-color: darken(@blue, 4%) !important; + } + div[aria-label="Play"], + div[aria-label="Pause"], + div[role="timer"], + div[aria-label="Stop recording"] { + background-color: @text !important; + } + } + + /* explicit music icon in notes */ + .x1cp0k07 { + color: @text; + } + } +} diff --git a/styles/invidious/README.md b/styles/invidious/README.md index f8c325f79b..7371b148ab 100644 --- a/styles/invidious/README.md +++ b/styles/invidious/README.md @@ -10,41 +10,20 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- - +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). -## 💝 Current Maintainer(s) -- [winston](https://github.com/nekowinston) +## ❤️‍🩹 Unmaintained +This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! -## 💖 Past Maintainer(s) -- [Andreas Grafen](https://github.com/andreasgrafen) +## 💖 Past Maintainers +- [unseen-ninja](https://github.com/unseen-ninja) +- [nekowinston](https://github.com/nekowinston)   diff --git a/styles/invidious/assets/catwalk.webp b/styles/invidious/assets/catwalk.webp deleted file mode 100644 index 85a58cac18..0000000000 --- a/styles/invidious/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0f3f2c87b916568483c2e6427b86952dbf9f1ce0aaa18c63764c8c547dd18e2c -size 445266 diff --git a/styles/invidious/assets/frappe.webp b/styles/invidious/assets/frappe.webp deleted file mode 100644 index 7559792e14..0000000000 --- a/styles/invidious/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:66f4fae8ba83144e14d119c1ba0129206536331083e03995c23a94f328af67ca -size 64758 diff --git a/styles/invidious/assets/latte.webp b/styles/invidious/assets/latte.webp deleted file mode 100644 index 35c4370ac7..0000000000 --- a/styles/invidious/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:61cf2a2524088fc4dfe67baf14a3219b866b4af930d95e299d35da7a4fc22722 -size 61066 diff --git a/styles/invidious/assets/macchiato.webp b/styles/invidious/assets/macchiato.webp deleted file mode 100644 index 455c3699a7..0000000000 --- a/styles/invidious/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:fb110c472e15569c4f8a45e7a219ce5bb1a4ff9bf5f6faffbe4c675a2c753fc7 -size 65486 diff --git a/styles/invidious/assets/mocha.webp b/styles/invidious/assets/mocha.webp deleted file mode 100644 index d425c55b23..0000000000 --- a/styles/invidious/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:1cefa33a3a33ae9f1dfe8a9082ef742eefaad60d9e163abc67d1f3462f948c97 -size 65366 diff --git a/styles/invidious/catppuccin.user.css b/styles/invidious/catppuccin.user.css deleted file mode 100644 index 2ea6b77abf..0000000000 --- a/styles/invidious/catppuccin.user.css +++ /dev/null @@ -1,304 +0,0 @@ -/* ==UserStyle== -@name Invidious Catppuccin -@namespace github.com/catppuccin/userstyles/styles/invidious -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/invidious -@version 0.3.1 -@description Soothing pastel theme for Invidious -@author Catppuccin -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/invidious/catppuccin.user.css -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" [ "rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue*", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray" ] -@var checkbox styleVideoPlayer "Style Video Player" 1 -==/UserStyle== */ -@-moz-document url-prefix("https://inv.bp.projectsegfau.lt"), - url-prefix("https://inv.privacy.com.de"), - url-prefix("https://inv.riverside.rocks"), - url-prefix("https://inv.vern.cc"), - url-prefix("https://invidio.xamh.de"), - url-prefix("https://invidious.esmailelbob.xyz"), - url-prefix("https://invidious.flokinet.to"), - url-prefix("https://invidious.kavin.rocks"), - url-prefix("https://invidious.namazso.eu"), - url-prefix("https://invidious.nerdvpn.de"), - url-prefix("https://invidious.projectsegfau.lt"), - url-prefix("https://invidious.rhyshl.live"), - url-prefix("https://invidious.sethforprivacy.com"), - url-prefix("https://invidious.slipfox.xyz"), - url-prefix("https://invidious.snopyta.org"), - url-prefix("https://invidious.thewatcherpi.de"), - url-prefix("https://invidious.tiekoetter.com"), - url-prefix("https://iv.winston.sh"), - url-prefix("https://vid.puffyan.us"), - url-prefix("https://y.com.sb"), - url-prefix("https://yewtu.be"), - url-prefix("https://youtube.076.ne.jp"), - url-prefix("https://yt.artemislena.eu"), -{ - /* prettier-ignore */ - @catppuccin: { - @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; } - @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; } - @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; } - @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; } - } - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accentColor: @catppuccin[@@lookup][@@accent]; - @linkColor: @accentColor; - @linkHover: if( - @lookup = latte, - darken(@accentColor, 5%), - lighten(@accentColor, 5%) - ); - - & when (@lookup = latte) { - input[type="checkbox"]:checked { - border: 1px solid @crust; - background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9ImJsYWNrIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMi4yMDcgNC43OTNhMSAxIDAgMDEwIDEuNDE0bC01IDVhMSAxIDAgMDEtMS40MTQgMGwtMi0yYTEgMSAwIDAxMS40MTQtMS40MTRMNi41IDkuMDg2bDQuMjkzLTQuMjkzYTEgMSAwIDAxMS40MTQgMHoiLz48L3N2Zz4K"); - } - } - & when not (@lookup = latte) { - input[type="checkbox"]:checked { - border: 1px solid @crust; - background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9IndoaXRlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMi4yMDcgNC43OTNhMSAxIDAgMDEwIDEuNDE0bC01IDVhMSAxIDAgMDEtMS40MTQgMGwtMi0yYTEgMSAwIDAxMS40MTQtMS40MTRMNi41IDkuMDg2bDQuMjkzLTQuMjkzYTEgMSAwIDAxMS40MTQgMHoiLz48L3N2Zz4="); - } - } - - color-scheme: if(@lookup = latte, light, dark); - background-color: @base !important; - color: @text !important; - - ::placeholder { - color: @subtext0; - } - - &::-webkit-scrollbar { - width: 0.25rem; - background: transparent; - } - - &::-webkit-scrollbar-thumb { - border-radius: 9999px; - background: @accentColor; - } - - #logo .pure-menu-heading { - color: @accentColor; - } - - a, - a:not([data-id]) > .icon, - .pure-u-lg-1-5 > .h-box > a[href^="/watch?"], - .playlist-restricted > ol > li > a { - color: @linkColor !important; - } - - a:hover, - a:active, - summary:hover, - a:not([data-id]):hover > .icon, - .pure-u-lg-1-5 > .h-box > a[href^="/watch?"]:hover, - .playlist-restricted > ol > li > a:hover { - color: @linkHover !important; - } - - button.pure-button-primary, - body a.pure-button-primary { - background-color: @surface1 !important; - color: @text !important; - } - - button.pure-button-primary:hover, - button.pure-button-primary:focus, - body a.pure-button-primary:hover, - body a.pure-button-primary:focus { - background-color: @surface2 !important; - color: @text !important; - } - - #subscribe { - background-color: @linkColor !important; - color: @crust !important; - } - - #subscribe:hover, - #subscribe:focus { - background-color: @linkHover !important; - color: @crust !important; - } - - #filters-box { - background-color: @surface0 !important; - } - - .underlined { - border-color: @overlay1; - } - - .video-js .vjs-control-bar, - .vjs-menu-button-popup .vjs-menu .vjs-menu-content { - background-color: @crust !important; - } - - .video-js .vjs-control-bar, - .vjs-menu-button-popup .vjs-menu .vjs-menu-content { - color: @text !important; - } - - .video-js .vjs-slider:hover, - .video-js button:hover { - color: @accentColor !important; - } - - .video-js .vjs-slider { - background-color: @surface2 !important; - } - - .video-js .vjs-load-progress, - .video-js .vjs-load-progress div { - background-color: @surface2 !important; - } - - .video-js.player-style-invidious .vjs-play-progress { - background-color: @accentColor !important; - } - - .vjs-menu li.vjs-menu-item:focus, - .vjs-menu li.vjs-menu-item:hover { - background-color: @surface0 !important; - color: @text !important; - } - - .vjs-menu li.vjs-selected, - .vjs-menu li.vjs-selected:focus, - .vjs-menu li.vjs-selected:hover { - background-color: @blue !important; - } - - .vjs-menu li.vjs-selected, - .vjs-menu li.vjs-selected:focus, - .vjs-menu li.vjs-selected:hover, - .js-focus-visible .vjs-menu li.vjs-selected:hover { - color: @crust !important; - } - - .vjs-modal-dialog-content { - backdrop-filter: blur(4px); - } - - .vjs-share__title { - color: @text !important; - } - .vjs-share__subtitle { - color: @subtext0 !important; - opacity: 100% !important; - } - .vjs-share__short-link { - color: @text !important; - background: @base !important; - } - .vjs-share__btn { - background: @crust !important; - svg path { - fill: @text !important; - } - } - - #related-videos > .h-box > div:not(#autoplay-controls) { - margin-bottom: 48px !important; - } - - footer, - footer a { - color: @subtext0 !important; - } - - .pure-form-message-inline { - color: @subtext0; - } - - select, - input[type="number"], - input[type="input"], - .pure-input-1 { - &:active { - color: @text !important; - } - color: @subtext0 !important; - background: @surface0 !important; - border-color: @crust !important; - box-shadow: none !important; - } - input[type="checkbox"] { - background-color: @surface2; - border: 1px solid @crust; - height: 1rem; - width: 1rem; - -webkit-appearance: none; - appearance: none; - outline: none; - cursor: pointer; - } - - // video player background - #player-container > .video-js > video, - // placeholder for loading thumbnails - .vjs-poster { - & when (@styleVideoPlayer = 1) { - background-color: @mantle !important; - } - } - } - - // synced colorscheme - @media (prefers-color-scheme: light) { - .no-theme { - #catppuccin(@lightFlavor, @accentColor); - } - } - @media (prefers-color-scheme: dark) { - .no-theme { - #catppuccin(@darkFlavor, @accentColor); - } - } - - // manually set colorscheme - .light-theme { - #catppuccin(@lightFlavor, @accentColor); - } - .dark-theme { - #catppuccin(@darkFlavor, @accentColor); - } -} - -// vim:ft=less diff --git a/styles/invidious/catppuccin.user.less b/styles/invidious/catppuccin.user.less new file mode 100644 index 0000000000..249a14001d --- /dev/null +++ b/styles/invidious/catppuccin.user.less @@ -0,0 +1,297 @@ +/* ==UserStyle== +@name Invidious Catppuccin +@namespace github.com/catppuccin/userstyles/styles/invidious +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/invidious +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/invidious/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ainvidious +@description Soothing pastel theme for Invidious +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] + +@var checkbox styleVideoPlayer "Style Video Player" 1 +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +/** + * kept up-to-date with + * `curl https://api.invidious.io/instances.json | jq '.[] | select(.[1].type=="https") | .[0]'` + */ +@-moz-document domain("anontube.lvkaszus.pl"), + domain("inv.citw.lgbt"), + domain("inv.in.projectsegfau.lt"), + domain("inv.tux.pizza"), + domain("inv.us.projectsegfau.lt"), + domain("inv.zzls.xyz"), + domain("invidious.asir.dev"), + domain("invidious.drgns.space"), + domain("invidious.einfachzocken.eu"), + domain("invidious.fdn.fr"), + domain("invidious.io.lol"), + domain("invidious.lunar.icu"), + domain("invidious.nerdvpn.de"), + domain("invidious.no-logs.com"), + domain("invidious.perennialte.ch"), + domain("invidious.privacydev.net"), + domain("invidious.private.coffee"), + domain("invidious.projectsegfau.lt"), + domain("invidious.protokolla.fi"), + domain("invidious.slipfox.xyz"), + domain("iv.datura.network"), + domain("iv.ggtyler.dev"), + domain("iv.melmac.space"), + domain("iv.nboeck.de"), + domain("iv.winston.sh"), + domain("onion.tube"), + domain("vid.priv.au"), + domain("vid.puffyan.us"), + domain("yewtu.be"), + domain("yt.artemislena.eu"), + domain("yt.cdaut.de"), + domain("yt.drgnz.club"), + domain("yt.oelrichsgarcia.de") { + .no-theme { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + .light-theme { + #catppuccin(@lightFlavor); + } + .dark-theme { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + // TODO: Can we remove lightenOrDarken in favor of shades/tints? Should we add it to the shared lib for now? + #lightenOrDarken(@color, @value) { + @result: if( + @flavor = latte, + darken(@color, @value), + lighten(@color, @value) + ); + } + + @link-color: @accent; + @link-hover: #lightenOrDarken(@accent, 5%)[@result]; + + background-color: @base !important; + color: @text !important; + + a, + /* menu under the search bar */ + .pure-menu-heading { + color: @link-color; + &:hover, + &:focus, + &:active { + color: @link-hover !important; + } + } + + hr, + /* legend borders are visible as dividers in Settings */ + legend { + border-color: @surface1; + border-style: solid; + } + + legend { + color: @accent !important; + } + + .pure-button-primary { + background-color: @surface1 !important; + color: @text !important; + border-color: @surface1 !important; + &:hover, + &:focus { + background-color: @surface2 !important; + color: @text !important; + border-color: @surface1 !important; + } + } + .pure-button-secondary { + background-color: @accent !important; + color: @crust !important; + border-color: @surface1 !important; + &:hover, + &:focus { + background-color: #lightenOrDarken(@accent, 2%)[@result] !important; + color: @crust !important; + border-color: @surface1 !important; + } + } + + #subscribe { + background-color: @link-color !important; + color: @crust !important; + :hover, + :focus { + background-color: @link-hover !important; + color: @crust !important; + } + } + + #filters-box { + background-color: @surface0 !important; + } + + .underlined { + border-color: @overlay1; + } + + .video-js .vjs-control-bar, + .vjs-menu-button-popup .vjs-menu .vjs-menu-content { + background-color: @crust !important; + color: @text !important; + } + + .video-js .vjs-slider:hover, + .video-js button:hover { + color: @accent !important; + } + + .video-js .vjs-slider { + background-color: @surface2 !important; + } + + .video-js .vjs-load-progress, + .video-js .vjs-load-progress div { + background-color: @surface2 !important; + } + + .video-js.player-style-invidious .vjs-play-progress { + background-color: @accent !important; + } + + .vjs-menu li.vjs-menu-item:focus, + .vjs-menu li.vjs-menu-item:hover { + background-color: @surface0 !important; + color: @text !important; + } + + .vjs-menu li.vjs-selected, + .vjs-menu li.vjs-selected:focus, + .vjs-menu li.vjs-selected:hover { + background-color: @blue !important; + } + + .vjs-menu li.vjs-selected, + .vjs-menu li.vjs-selected:focus, + .vjs-menu li.vjs-selected:hover, + .js-focus-visible .vjs-menu li.vjs-selected:hover { + color: @crust !important; + } + + .vjs-modal-dialog-content { + backdrop-filter: blur(4px); + } + + .vjs-share__title { + color: @text !important; + } + .vjs-share__subtitle { + color: @subtext0 !important; + opacity: 100% !important; + } + .vjs-share__short-link { + color: @text !important; + background: @base !important; + } + .vjs-share__btn { + background: @crust !important; + svg path { + fill: @text !important; + } + } + + #related-videos > .h-box > div:not(#autoplay-controls) { + margin-bottom: 48px !important; + } + + footer a, + footer span { + color: @subtext0 !important; + } + + footer span a, + footer span:has(i) { + &:hover { + color: @accent !important; + } + } + + .pure-form-message-inline { + color: @subtext0; + } + + select, + input[type="text"], + input[type="number"], + input[type="input"], + input[type="password"] { + color: @text !important; + background-color: @surface0 !important; + border-color: @surface1 !important; + box-shadow: none !important; + &:active { + color: @text !important; + } + } + input[type="search"] { + color: @text !important; + background-color: @base !important; + border-bottom-color: @overlay1 !important; + box-shadow: none !important; + } + input[type="checkbox"] { + background-color: @surface2; + border-color: @surface1; + height: 1rem; + width: 1rem; + -webkit-appearance: none; + appearance: none; + cursor: pointer; + &:checked { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } + + /* video player background */ + #player-container > .video-js > video, + /* placeholder for loading thumbnails */ + .vjs-poster { + & when (@styleVideoPlayer = 1) { + background-color: @mantle !important; + } + } + + /* watch progress on videos */ + div.watched-indicator { + background-color: @red; + } + + /* Channel owner comments */ + a.channel-owner { + color: @crust; + background-color: @accent; + } + } +} diff --git a/styles/invokeai/README.md b/styles/invokeai/README.md index 08d09cb16f..be399dc76a 100644 --- a/styles/invokeai/README.md +++ b/styles/invokeai/README.md @@ -10,38 +10,17 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +## 💝 Current Maintainer +- [ryanccn](https://github.com/ryanccn) -## 💝 Current Maintainer(s) -- [Ryan Cao](https://github.com/ryanccn)   diff --git a/styles/invokeai/assets/catwalk.webp b/styles/invokeai/assets/catwalk.webp deleted file mode 100644 index ee44e54e05..0000000000 --- a/styles/invokeai/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a4b55bb73ccd6d0f145132a3e2b26d8fd41006513c962c84e6dcd4db1dfb176c -size 81698 diff --git a/styles/invokeai/assets/frappe.webp b/styles/invokeai/assets/frappe.webp deleted file mode 100644 index f487cf01fe..0000000000 --- a/styles/invokeai/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:5bb3e6e7f6926262d9e61a52a803463a2df28b847ae5034372599312f1730fc3 -size 53030 diff --git a/styles/invokeai/assets/latte.webp b/styles/invokeai/assets/latte.webp deleted file mode 100644 index 7830b44aa9..0000000000 --- a/styles/invokeai/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b25133d1bb97841b13ac2f50b8ce7c8c9e1760580369ba4286a633ae88c5d475 -size 45020 diff --git a/styles/invokeai/assets/macchiato.webp b/styles/invokeai/assets/macchiato.webp deleted file mode 100644 index 4e2dcd2e73..0000000000 --- a/styles/invokeai/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3991cb234e06a6fcc4f367cabae87eb921369170bfe9eeb59251dc4377671aef -size 54642 diff --git a/styles/invokeai/assets/mocha.webp b/styles/invokeai/assets/mocha.webp deleted file mode 100644 index bb6f6f635f..0000000000 --- a/styles/invokeai/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e817a3d25dbe2a449cb92c2dfe1ea9cd65c4b711481b784a81826d239293a6a3 -size 54048 diff --git a/styles/invokeai/catppuccin.user.css b/styles/invokeai/catppuccin.user.css deleted file mode 100644 index b1dfa59e5c..0000000000 --- a/styles/invokeai/catppuccin.user.css +++ /dev/null @@ -1,222 +0,0 @@ -/* ==UserStyle== -@name InvokeAI Catppuccin -@namespace github.com/catppuccin/userstyles/styles/invokeai -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/invokeai -@version 0.0.1 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/invokeai/catppuccin.user.css -@description Soothing pastel theme for InvokeAI -@author Catppuccin -@license MIT - -@preprocessor less -@var select flavor "Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Grey"] -==/UserStyle== */ -@-moz-document regexp("http:\\/\\/(127\\.0\\.0\\.1|localhost):9090(.*)") { - #catppuccin(@flavor, @accentColor); - - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-color: @catppuccin[@@lookup][@@accent]; - - :root, - [data-theme]:root { - --accent-color-dim: lighten(@accent-color, -10%); - --accent-color: @accent-color; - --accent-color-bright: lighten(@accent-color, 10%); - --accent-color-hover: var(--accent-color-bright); - --root-bg-color: @mantle; - --background-color: @base; - --background-color-light: @surface0; - --background-color-secondary: @base; - --text-color: @text; - --text-color-secondary: @subtext0; - --subtext-color: @subtext1; - --subtext-color-bright: @subtext0; - --border-color: @surface1; - --border-color-light: @surface2; - --tab-color: @accent-color; - --tab-list-bg: @accent-color; - --btn-delete-image: @red; - --status-good-color: @green; - --status-good-color-glow: brighten(@green, 10%); - --border-color-invalid: @red; - --box-shadow-color-invalid: brighten(@red, 5%); - --tab-panel-bg: var(--background-color-light); - --tab-hover-color: var(--background-color-secondary); - --tab-list-text: white; - --prompt-bg-color: var(--background-color-light); - --switch-bg-color: var(--background-color-secondary); - --btn-base-color: var(--background-color-light); - --btn-base-color-hover: var(--background-color-secondary); - --destructive-color: @red; - --slider-color: @lavender; - --slider-mark-color: var(--slider-color); - --switch-bg-active-color: var(--accent-color); - --console-icon-button-bg-color: var(--btn-base-color); - --console-icon-button-bg-color-hover: var(--btn-base-color-hover); - --console-bg-color: var(--background-color-light); - --svg-color: var(--text-color); - --btn-load-more: var(--background-color-light); - --tab-list-text-inactive: var(--text-color-secondary); - } - - .invokeai-style-cache-1m5jnul { - --number-input-color: var(--text-color-secondary) !important; - } - - .invoke-btn, - .invokeai__button[data-active], - .site-header-right-side .lang-select-btn[data-selected="true"], - .site-header-right-side .lang-select-btn[data-selected="true"]:hover, - button.chakra-button.invokeai__icon-button[data-selected="true"] { - --svg-color: var(--root-bg-color); - color: var(--root-bg-color) !important; - } - - .invokeai-style-cache-vs1g06, - .invokeai-style-cache-vs1g06:hover { - background-color: var(--background-color-light); - } - } -} diff --git a/styles/invokeai/catppuccin.user.less b/styles/invokeai/catppuccin.user.less new file mode 100644 index 0000000000..2ec7a91c4b --- /dev/null +++ b/styles/invokeai/catppuccin.user.less @@ -0,0 +1,94 @@ +/* ==UserStyle== +@name InvokeAI Catppuccin +@namespace github.com/catppuccin/userstyles/styles/invokeai +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/invokeai +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/invokeai/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ainvokeai +@description Soothing pastel theme for InvokeAI +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document regexp("http:\\/\\/(127\\.0\\.0\\.1|localhost):9090(.*)") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + :root, + [data-theme]:root { + --accent-color-dim: lighten(@accent, -10%); + --accent-color: @accent; + --accent-color-bright: lighten(@accent, 10%); + --accent-color-hover: var(--accent-color-bright); + --root-bg-color: @mantle; + --background-color: @base; + --background-color-light: @surface0; + --background-color-secondary: @base; + --text-color: @text; + --text-color-secondary: @subtext0; + --subtext-color: @subtext1; + --subtext-color-bright: @subtext0; + --border-color: @surface1; + --border-color-light: @surface2; + --tab-color: @accent; + --tab-list-bg: @accent; + --btn-delete-image: @red; + --status-good-color: @green; + --status-good-color-glow: lighten(@green, 10%); + --border-color-invalid: @red; + --box-shadow-color-invalid: lighten(@red, 5%); + --tab-panel-bg: var(--background-color-light); + --tab-hover-color: var(--background-color-secondary); + --tab-list-text: white; + --prompt-bg-color: var(--background-color-light); + --switch-bg-color: var(--background-color-secondary); + --btn-base-color: var(--background-color-light); + --btn-base-color-hover: var(--background-color-secondary); + --destructive-color: @red; + --slider-color: @lavender; + --slider-mark-color: var(--slider-color); + --switch-bg-active-color: var(--accent-color); + --console-icon-button-bg-color: var(--btn-base-color); + --console-icon-button-bg-color-hover: var(--btn-base-color-hover); + --console-bg-color: var(--background-color-light); + --svg-color: var(--text-color); + --btn-load-more: var(--background-color-light); + --tab-list-text-inactive: var(--text-color-secondary); + } + + .invokeai-style-cache-1m5jnul { + --number-input-color: var(--text-color-secondary) !important; + } + + .invoke-btn, + .invokeai__button[data-active], + .site-header-right-side .lang-select-btn[data-selected="true"], + .site-header-right-side .lang-select-btn[data-selected="true"]:hover, + button.chakra-button.invokeai__icon-button[data-selected="true"] { + --svg-color: var(--root-bg-color); + color: var(--root-bg-color) !important; + } + + .invokeai-style-cache-vs1g06, + .invokeai-style-cache-vs1g06:hover { + background-color: var(--background-color-light); + } + } +} diff --git a/styles/jisho/README.md b/styles/jisho/README.md new file mode 100644 index 0000000000..5a6fac248a --- /dev/null +++ b/styles/jisho/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Jisho + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [Lichthagel](https://github.com/Lichthagel) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/jisho/catppuccin.user.less b/styles/jisho/catppuccin.user.less new file mode 100644 index 0000000000..0613d8a324 --- /dev/null +++ b/styles/jisho/catppuccin.user.less @@ -0,0 +1,453 @@ +/* ==UserStyle== +@name Jisho Catppuccin +@namespace github.com/catppuccin/userstyles/styles/jisho +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/jisho +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/jisho/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ajisho +@description Soothing pastel theme for Jisho +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("jisho.org") { + :root[data-color-theme="auto"] { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + :root[data-color-theme="dark"] { + #catppuccin(@darkFlavor); + } + :root[data-color-theme="light"] { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + @accent-dim: if( + @flavor = latte, + desaturate(lighten(@accent, 8%), 10%), + desaturate(darken(@accent, 8%), 10%) + ); + + body { + background-color: @base !important; + color: @text; + + a { + color: @accent; + + &:hover { + color: @accent-dim; + } + } + } + + each( + range(6), + { + h@{value} { + color: @text; + } + } + ); + + button, + .button, + .tabs .tab-title > a { + background-color: @overlay0; + color: @text; + + &:hover, + &:focus { + background-color: @overlay1; + color: @text; + } + } + + // ! There is some white space between the buttons in the button group + // ! This is somewhat mitigated by using `margin: 0 -2px;` originally + // ! We use `display: flex;` instead + .button-group { + display: flex; + flex-wrap: wrap; + + &.radius > *, + > li { + margin: unset; + } + } + + .f-dropdown { + background-color: @mantle; + border-color: @overlay0; + + &::before { + border-bottom-color: @surface0; + } + + li:hover { + background-color: @crust; + } + } + + header.row { + background-color: @base; + } + + h1.logo a { + background-image: if( + @flavor = latte, + url("//assets.jisho.org/assets/jisho-logo-v4@2x-7330091c079b9dd59601401b052b52e103978221c8fb6f5e22406d871fcc746a.png"), + url("//assets.jisho.org/assets/jisho-logo-v4-dark@2x-e676613b426d34187b61928823730a225b52165aaef99f948bd3dc5fc16fa787.png") + ); + } + + nav .links { + .color_theme_picker--wrapper:hover { + background-color: @mantle; + } + + .color_theme_picker--choices { + background-color: @mantle; + + li a:hover { + background-color: @crust; + } + } + } + + form.search { + .input_methods, + .input_method_button h4 { + color: @subtext0; + } + + .input_method_button:hover { + background-color: @surface0; + } + + .main { + background-color: @surface0; + box-shadow: none; + } + + .inner { + background-color: @surface1; + + input { + color: @text; + } + } + + .search_type { + border-right-color: @overlay0; + color: @subtext0; + } + + .submit { + background-color: @overlay1; + color: @text; + } + + .search-form_clear-button { + background-color: transparent; // ! Unsure if this needs a background, also extends beyond the input + .clear-icon { + fill: @subtext0; + } + } + + .results, + #radical_area .results { + .result_label { + color: @text; + } + + .result { + background-color: @surface1; + + &:hover { + color: @text; + } + } + + each( + range(8), + { + .g@{value} { + color: @blue; + } + } + ); + } + + #radical_area { + .radical_table { + background-image: repeating-linear-gradient( + 180deg, + @surface1, + @surface1 32px, + @surface2 32px, + @surface2 64px + ); + + .number { + background-color: @text; + color: @base; + } + + .radical { + background-image: none; // ! some radicals are rendered with a background image by default + color: @text; + + &.available:hover { + background-color: @overlay0; + } + + &.selected { + border-color: @text; + background-color: fade(@yellow, 30%); + } + } + } + + &.combined_mode { + // ! what is combined mode? + .reset_radicals { + color: @subtext0; + + &:hover { + color: @text; + background-color: @overlay0; + } + } + } + } + + .handwriting { + .panel { + background-color: @surface1; + } + + .pencil-icon { + color: @surface2 !important; + } + } + } + + .speech_area_active #speech_button, + .radical_area_active #radical_button, + .handwriting_area_active #handwriting_button { + border-bottom-color: @accent; + } + + #what_is_this { + color: unset; + } + + .japanese_word__furigana-invisible { + opacity: 0; // ! Jisho uses `color: #fff;` to hide furigana, however this does not work in the dark theme + } + + #zen_bar li[data-pos="Noun"] a, + #zen_bar li[data-pos="Proper noun"] a, + #zen_bar li[data-pos="Pronoun"] a, + #zen_bar li[data-pos="Suffix"] a, + #zen_bar li[data-pos="Prefix"] a, + #zen_bar li[data-pos="Symbol"] a, + #zen_bar li[data-pos="Interjection"] a, + #zen_bar li[data-pos="Propernoun"] a { + color: @peach; + border-bottom-color: @peach; + } + + #zen_bar li[data-pos="Particle"] a { + color: @red; + border-bottom-color: @red; + } + + #zen_bar li[data-pos="Verb"] a { + color: @subtext0; + border-bottom-color: @subtext0; + } + + #main_results h4 .result_count { + color: @subtext0; + } + + .fact { + outline-color: @mantle; + border-color: @base; + background-color: @mantle; + } + + .concept_light { + border-bottom-color: @overlay0; + } + + .concept_light-status .concept_light-tag { + color: @base; + background-color: @subtext0; + + &.concept_light-common { + background-color: @green; + } + + a { + color: @base; + } + } + .concept_light-meanings { + .meaning-tags, + .meaning-definition-section_divider { + color: @subtext0; + } + } + + .concept_light .sentence, + .meaning-abstract, + .supplemental_info { + color: @subtext0; + } + + .kanji_light { + border-bottom-color: @overlay0; + + .info { + color: @subtext0; + } + } + + .sentences_block .sentence { + border-bottom-color: @overlay0; + } + + #secondary aside .minor-text { + color: @subtext0; + } + + .kanji-details__main-readings-list a { + border-bottom-color: @subtext0; + } + + .kanji_strokes { + .kanji_play_button, + .replay_button, + .toggle_kanji_actions { + color: @text; + background-color: transparent; + } + + .actions { + background-color: @base; + + h3 { + color: @text; + } + } + + .noUi-target { + .noUi-background { + background-color: @accent; + } + + .noUi-base { + border-color: @surface1; + } + + .noUi-origin { + background-color: @overlay0; + } + + .noUi-handle { + background-color: @text; + border-color: @surface2; + } + + .noUi-active { + background-color: @subtext0; + } + } + } + + .stroke_order_diagram--bounding_box, + .stroke_order_diagram--guide_line { + stroke: @surface0; + } + + .stroke_order_diagram--path_start { + fill: fade(@red, 80%); + } + + .stroke_order_diagram--current_path { + stroke: @text; + } + + .stroke_order_diagram--existing_path { + stroke: fade(@subtext0, 50%); + } + + .kanji { + table { + background-color: @mantle; + border-color: @overlay0; + } + + tr { + background-color: @surface0; + + td { + color: @subtext0; + } + } + } + + .discussion_thread { + .comment_body { + background-color: @surface0; + border-color: @overlay0; + + .discussion_status { + background-color: @surface1; + border-bottom-color: @overlay0; + color: @subtext0; + } + + .discussion_about { + background-color: mix(@surface0, @teal, 80%); + color: @teal; + } + + .comment_status { + background-color: @surface2; + color: @subtext0; + } + } + + .discussion_title a { + color: @text !important; + } + } + + footer { + .ornament { + background-color: @red; + box-shadow: 0 0 10px 5px if(@flavor = latte, @base, @overlay0); + } + } + } +} diff --git a/styles/keybr.com/README.md b/styles/keybr.com/README.md new file mode 100644 index 0000000000..aee77c4b11 --- /dev/null +++ b/styles/keybr.com/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for keybr.com + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [janTatesa](https://github.com/janTatesa) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/keybr.com/catppuccin.user.less b/styles/keybr.com/catppuccin.user.less new file mode 100644 index 0000000000..6b03857f62 --- /dev/null +++ b/styles/keybr.com/catppuccin.user.less @@ -0,0 +1,108 @@ +/* ==UserStyle== +@name keybr.com Catppuccin +@namespace github.com/catppuccin/userstyles/styles/keybr.com +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/keybr.com +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/keybr.com/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Akeybr.com +@description Soothing pastel theme for keybr.com +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("keybr.com") { + html[data-color="dark"] { + #catppuccin(@darkFlavor); + } + html[data-color="light"] { + #catppuccin(@lightFlavor); + } + html[data-color="system"] { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --primary-d2: @overlay0; + --primary-d1: @overlay0; + --primary: @base; + --primary-l1: @crust; + --primary-l2: @mantle; + --secondary-d1: @subtext0; + --secondary: @text; + --secondary-l1: @subtext0; + --secondary-l2: @accent; + --secondary-f1: @subtext0; + --secondary-f2: @subtext0; + --accent-d2: @accent; + --accent-d1: @accent; + --accent: @accent; + --accent-l1: @accent; + --accent-l2: @accent; + --error-d1: @red; + --error: @red; + --error-l1: @red; + --shadow-color: fade(@crust, 88%); + --slow-key-color: @red; + --fast-key-color: @green; + --Chart-speed__color: @green; + --Chart-accuracy__color: @peach; + --Chart-complexity__color: @pink; + --Chart-threshold__color: @maroon; + --Chart-hist-h__color: @lavender; + --Chart-hist-m__color: @maroon; + --Chart-hist-r__color: @mauve; + --KeyboardKey-pointer__color: @accent; + --KeyboardKey-symbol__color: @crust; + --pinky-zone-color: @green; + --ring-zone-color: @teal; + --middle-zone-color: @yellow; + --left-index-zone-color: @blue; + --right-index-zone-color: @maroon; + --thumb-zone-color: @mauve; + --effort-0-color: @crust; + --effort-1-color: @crust; + --effort-2-color: @accent; + --effort-3-color: @accent; + --Value--more__color: @green; + --Value--less__color: @red; + --KeyboardKey-button--depressed__color: @accent; + --LessonKey--included__color: @crust; + --LessonKey--uncalibrated__background-color: @surface0; + --LessonKey--excluded__background-color: @surface0; + --LessonKey--excluded__color: @overlay0; + --DailyGoal-bar__color: @accent; + --KeyboardKey-button__color: @accent; + --textinput__color: @text; + --textinput--special__color: @subtext1; + --textinput--hit__color: @subtext0; + --textinput--miss__color: @red; + --syntax-keyword: @mauve; + --syntax-string: @green; + --syntax-number: @peach; + --syntax-comment: @overlay2; + --MenuItem__background-color: @mantle; + --MenuItem__color: @text; + --MenuItem--hover__background-color: @surface0; + --MenuItem--hover__color: @text; + --KeyboardKey-symbol--dead__color: @red; + --KeyboardKey-symbol--ligature__color: @blue; + --Name-color: @subtext0; + --Value-color: @accent; + --effort-color: @accent; + } +} diff --git a/styles/keyoxide/README.md b/styles/keyoxide/README.md new file mode 100644 index 0000000000..a6c5e59e22 --- /dev/null +++ b/styles/keyoxide/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Keyoxide + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/keyoxide/catppuccin.user.less b/styles/keyoxide/catppuccin.user.less new file mode 100644 index 0000000000..7820170afd --- /dev/null +++ b/styles/keyoxide/catppuccin.user.less @@ -0,0 +1,216 @@ +/* ==UserStyle== +@name Keyoxide Catppuccin +@namespace github.com/catppuccin/userstyles/styles/keyoxide +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/keyoxide +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/keyoxide/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Akeyoxide +@description Soothing pastel theme for Keyoxide +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document url-prefix("https://keyoxide.org") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --primary-color: @accent; + --primary-color-subtle: lighten(@accent, 5%); + --body-background-color: @mantle; + --section-background-color: @base; + --text-color: @text; + --text-color-subtle: @subtext1; + --text-color-inverse: @crust; + + --link-color: @blue; + --link-color-subtle: var(--text-color); + --link-color-hover: lighten(@blue, 5%); + --line-color-subtle: @surface1; + --button-text-color: var(--text-color); + --button-text-color-hover: var(--text-color); + --button-border-color: @surface0; + --button-border-color-hover: @surface0; + --button-background-color: @surface0; + --button-background-color-hover: @surface1; + --input-text-color: var(--text-color); + --input-text-color-hover: var(--text-color); + --input-border-color: @surface0; + --input-border-color-hover: @surface0; + --input-background-color: @mantle; + --input-background-color-hover: @mantle; + --footer-text-color: var(--text-color-subtle); + + .kx-item details summary .info img, + .kx-item details .subsection > img { + filter: @text-filter; + } + + kx-claim, + kx-key { + --loader-color: @subtext1; + --success-color: @green; + --failure-color: @red; + --background-color: @surface0; + --header-background-color: @surface1; + } + + a.button.button--donate.button--opencollective { + background-color: @blue; + color: @crust; + + &:hover { + background-color: lighten(@blue, 5%); + } + + svg { + fill: @crust; + } + } + } +} + +@-moz-document domain("docs.keyoxide.org"), domain("blog.keyoxide.org") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + + @text-filter: @catppuccin-filters[@@flavor][@text]; + + #lib.defaults(); + + background-color: @base; + + --clr-primary-100: @crust; + --clr-primary-99: @crust; + --clr-primary-98: @mantle; + --clr-primary-95: @base; + --clr-primary-90: lighten(@accent, 30%); + --clr-primary-80: lighten(@accent, 20%); + --clr-primary-70: lighten(@accent, 10%); + --clr-primary-60: @accent; + --clr-primary-50: darken(@accent, 5%); + --clr-primary-40: darken(@accent, 10%); + --clr-primary-35: darken(@accent, 15%); + --clr-primary-30: darken(@accent, 20%); + --clr-primary-25: darken(@accent, 25%); + --clr-primary-20: darken(@accent, 30%); + --clr-primary-10: darken(@accent, 35%); + --clr-primary-0: @text; + --clr-primary: @accent; + --clr-header: @text; + --clr-header-subtle: @subtext1; + --clr-text: @text; + --clr-text-subtle: @subtext1; + --clr-bg: @mantle; + --clr-bg-alt: @crust; + --clr-border: @surface0; + --clr-link: @blue; + + --clr-secondary-20: @subtext1; + + nav a.active { + color: @crust; + } + + .quick-links img, + [src="/chevron-up.svg"], + [src="/chevron-down.svg"] { + filter: @text-filter; + } + img[title="Keyoxide logo"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + table { + &, + td { + border-color: @surface0; + } + } + + pre { + background-color: @mantle !important; + color: @text !important; + + span[style="color:#c82728;"] { + color: @blue !important; + } + span[style="color:#4271ae;"], + span[style="color:#f07219;"] { + color: @green !important; + } + span[style="color:#8e908c;"] { + color: @overlay0 !important; + } + span[style="color:#8959a8;"] { + color: @mauve !important; + } + span[style="color:#839c00;"] { + color: @green !important; + } + span[style="color:#3e999f;"] { + color: @teal !important; + } + } + + .info { + background-color: @mantle; + + &::before { + background-color: @sky; + color: @crust; + } + } + + .warning { + background-color: @mantle; + + &::before { + background-color: @yellow; + color: @crust; + } + } + + .widget { + background-color: fade(@accent, 60%); + border-color: @accent; + + .title { + color: @text; + } + + input, + select { + background-color: @mantle; + } + } + } +} diff --git a/styles/lastfm/README.md b/styles/lastfm/README.md index 764c84c411..9781e30fcf 100644 --- a/styles/lastfm/README.md +++ b/styles/lastfm/README.md @@ -10,40 +10,18 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- - +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). -## 💝 Current Maintainer(s) +## 💝 Current Maintainer - [AnubisNekhet](https://github.com/AnubisNekhet) -## 💖 Past Maintainer(s) +## 💖 Past Maintainer - [Gingeh](https://github.com/Gingeh)   diff --git a/styles/lastfm/assets/catwalk.webp b/styles/lastfm/assets/catwalk.webp deleted file mode 100644 index 9b0a0d91a6..0000000000 --- a/styles/lastfm/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a4dc576eb90028fc34ecab45dd9c673fb82d9be48d0fc8dca021b04f41492ae1 -size 116566 diff --git a/styles/lastfm/assets/frappe.webp b/styles/lastfm/assets/frappe.webp deleted file mode 100644 index 3f1cacb551..0000000000 --- a/styles/lastfm/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7c56ae4f93ceff92cbc73143d039f1155425396ff7710626a4297e47da86df46 -size 118080 diff --git a/styles/lastfm/assets/latte.webp b/styles/lastfm/assets/latte.webp deleted file mode 100644 index 3369b91791..0000000000 --- a/styles/lastfm/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b5c601029be65e515fcee6b3fc24dcd82bd1677cf081cb5db03c79d24b2b0d52 -size 119080 diff --git a/styles/lastfm/assets/macchiato.webp b/styles/lastfm/assets/macchiato.webp deleted file mode 100644 index e61fc921ef..0000000000 --- a/styles/lastfm/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:63b78e71f37d9aeb60ce7cf499f2958ad0e0eb03c89ba91557128b7b7f136808 -size 120800 diff --git a/styles/lastfm/assets/mocha.webp b/styles/lastfm/assets/mocha.webp deleted file mode 100644 index f90f6f6f0c..0000000000 --- a/styles/lastfm/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:96bccf52aeca558ab8a5b7b2a17e3dd953202dde77799b898c768f0baa2c6921 -size 123808 diff --git a/styles/lastfm/catppuccin.user.css b/styles/lastfm/catppuccin.user.css deleted file mode 100644 index aeffd4a9f8..0000000000 --- a/styles/lastfm/catppuccin.user.css +++ /dev/null @@ -1,1735 +0,0 @@ -/* ==UserStyle== -@name Last.fm Catppuccin -@namespace github.com/catppuccin/userstyles/styles/lastfm -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lastfm -@version 1.1.1 -@description Soothing pastel theme for Last.fm -@author Catppuccin -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lastfm/catppuccin.user.css -@license MIT - -@preprocessor less -@var select flavor "Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" [ "rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green*", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray" ] -@var checkbox removepromos "Remove Advertisements" 1 -==/UserStyle== */ -@-moz-document domain("last.fm") { - #catppuccin(@flavor, @accentColor); - - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - @rgb-raw: #fff; - #rgbify(@color) { - @rgb-raw: red(@color) green(@color) blue(@color); - } - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent: @catppuccin[@@lookup][@@accentColor]; - - @accent-dim: fadeout(@accent, 0.5); - - & not when (@lookup = latte) { - color-scheme: dark; - .layout-image { - background: @base; - .layout-image-image { - &[src="https://lastfm.freetls.fastly.net/i/u/300x300/4128a6eb29f94943c9d206c08e625904.jpg"], - &[src="https://lastfm.freetls.fastly.net/i/u/237x178/2a96cbd8b46e442fc41c2b86b821562f.jpg"], - &[src="https://lastfm.freetls.fastly.net/i/u/300x300/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg"] - { - mix-blend-mode: screen; - filter: invert(1); - } - } - } - [src="https://lastfm.freetls.fastly.net/i/u/avatar70s/2a96cbd8b46e442fc41c2b86b821562f.jpg"], - [src="https://lastfm.freetls.fastly.net/i/u/64s/4128a6eb29f94943c9d206c08e625904.jpg"], - [src="https://lastfm.freetls.fastly.net/i/u/64s/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg"] - { - mix-blend-mode: screen; - filter: invert(1); - } - .cover-art { - background: @base; - } - .avatar:after, - .cover-art:after, - .image-list-item:after, - .video-thumbnail:after { - box-shadow: inset 0 0 0 1px rgb(@subtext0, 7%); - } - } - - /*------UNIVERSAL STYLES INCASE SOME GET MISSED------*/ - body { - color: @text; - } - h1 { - color: @accent; - } - .mimic-link { - color: @sapphire; - } - /*-----------CHECKBOXES AND RADIOS----------*/ - .lfm-form-radio input[type="radio"]:checked + label:before { - border: 1px solid @accent; - box-shadow: inset 0 0 0 4px @accent; - background-color: @base; - } - .lfm-form-radio input[type="radio"] + label:before { - background-color: @crust; - border: 2px solid @surface1; - } - /*-----------REMOVE PRO SUBSCRIPTION REMINDERS------*/ - if removepromos { - .your-progress .buffer-2, - .secondary-nav-item--month, - .secondary-nav-item--year, - .auth-dropdown-pro-text { - display: none !important; - } - .listening-report-promo--month, - .listening-report-promo--year { - display: none !important; - } - } - - /* HOME PAGE */ - .main-content, - .container, - .content-top-has-nav .content-top, - .two-column-layout .content-top { - background-color: @base; - } - - .content-top-has-nav .content-top::after, - .two-column-layout .content-top::after { - border-top: 1px solid @accent-dim; - } - - .homefeed .content-top .secondary-nav-item-link--active, - .home-welcome-header { - color: @text; - } - .secondary-nav-item-link { - color: @subtext0; - } - - .secondary-nav-item-link:focus, - .secondary-nav-item-link:hover, - .homefeed .content-top .secondary-nav-item-link--active, - .homefeed .content-top .secondary-nav-item-link--active:focus, - .homefeed .content-top .secondary-nav-item-link--active:hover { - color: @text; - } - - .homefeed - .content-top - .secondary-nav-item--artists - .secondary-nav-item-link:hover::after, - .homefeed - .content-top - .secondary-nav-item--albums - .secondary-nav-item-link:hover::after, - .homefeed - .content-top - .secondary-nav-item--tracks - .secondary-nav-item-link:hover::after, - .homefeed - .content-top - .secondary-nav-item--events - .secondary-nav-item-link:hover::after, - .homefeed--artists .content-top .secondary-nav-item-link--active::after, - .homefeed--albums .content-top .secondary-nav-item-link--active::after, - .homefeed--tracks .content-top .secondary-nav-item-link--active::after, - .homefeed--events .content-top .secondary-nav-item-link--active::after { - background-color: @accent-dim; - } - .recs-feed .recs-feed-cover-image-wrap:after { - background-image: linear-gradient( - 180deg, - transparent 0, - rgba(@mantle, 0.4) 50%, - rgba(@mantle, 0.7) 50%, - rgba(@mantle, 0.7) 100% - ); - } - - .recs-feed .context { - background: @mantle; - box-shadow: - inset 1px 0 darken(@mantle, 3%), - inset -1px -1px @crust; - color: @text; - } - .recs-feed .recs-feed-item { - background: transparent; - box-shadow: none; - } - a { - color: @accent; - } - .stationlink-list .stationlink { - color: @subtext0; - } - - .stationlink-list .stationlink:focus, - .stationlink-list .stationlink:hover { - color: @text; - } - - .stationlink-list .stationlink::after { - border-bottom: 1px solid @accent-dim; - } - - .stationlink-list .stationlink::before { - background-color: @accent; - -webkit-filter: invert(0%); - filter: invert(0%); - } - - .stationlink-list .stationlink:focus::before, - .stationlink-list .stationlink:hover::before { - background-color: @subtext0; - } - - .subscribe-cta, - .mpu-subscription-upsell, - .mpu-subscription-upsell--mpu { - display: none; - } - .join-cta { - background-color: transparent; - } - .join-cta h3 { - color: @accent; - } - - .lazy-features-footer { - display: none; - } - - /* LIVE */ - /* MUSIC */ - .content-top-header { - color: @accent; - } - - .minimal-navigation-item-link, - .minimal-navigation-item-link:focus, - .minimal-navigation-item-link:hover { - color: @subtext0; - } - - .minimal-navigation-item-link--active, - .minimal-navigation-item-link--active:focus, - .minimal-navigation-item-link--active:hover { - color: @text; - } - - .music-section-heading { - color: @text; - } - - .music-more-artists-item-name a, - .music-more-artists-item-name a:focus, - .music-more-artists-item-name a:hover, - .music-releases-item-name a, - .music-releases-item-name a:focus, - .music-releases-item-name a:hover { - color: @text; - } - - .music-releases-item-artist, - .column-tracks-item-name, - .column-tracks-item-artist, - .music-gallery-artist { - color: @text; - } - - .music-section-rediscover-subscribe-banner-cta { - background-color: @base; - } - - /* PROFILE */ - /* BANNER */ - .header--overview .header-background { - opacity: 0.4; - } - - /* SEARCH */ - .artist-result-heading { - color: @text; - } - - .album-result-heading { - color: @text; - } - - /* RECOMMENDATIONS */ - .recs-feed-title a { - color: @text !important; - } - if (theme=="Latte") { - .recs-feed-title a { - color: @crust !important; - } - } - .recs-feed .context { - background: @mantle; - box-shadow: none; - color: @subtext1; - } - .recs-feed-item--artist .context:after, - .recs-feed .recs-feed-item--artist .recs-feed-avatar:after { - background-color: fadeout(@yellow, 1) !important; - } - .recs-feed-item--album .context:after, - .recs-feed .recs-feed-item--album .recs-feed-avatar:after { - background-color: fadeout(@green, 1) !important; - } - .recs-feed-item--track .context:after, - .recs-feed .recs-feed-item--track .recs-feed-avatar:after { - background-color: fadeout(@blue, 1) !important; - } - .secondary-nav { - box-shadow: inset 0 -1px @accent; - } - .music-recommended-artists-artist-name, - .music-recommended-artists-context, - .pagination-page, - .pagination-next { - color: @text; - } - - .music-recommended-albums-item-name, - .music-recommended-albums-album-artist, - .music-recommended-albums-album-context { - color: @text; - } - - .recommended-tracks-item-name, - .recommended-tracks-item-artist { - color: @text; - } - - .big-tags-item-context { - color: @text; - } - - p { - color: @subtext0; - } - - /* CHARTS */ - .adaptive-skin-wrapper, - .row { - background-color: @base; - } - - .two-column-layout .container { - background-size: 0; - background-position: 0 0; - background-color: @base; - } - - ._buffer-reset, - .sidebar-heading { - color: @accent; - } - - .sidebar-group-heading { - color: @text; - } - - .resource-list--sidebar-item-name { - color: @text; - } - .js-link-block.globalchart-item { - background-color: @crust; - box-shadow: - 0 1px @base, - inset 0 -1px @base; - } - .globalchart a, - .globalchart a:focus, - .globalchart a:hover { - color: @text; - } - - .footer-top-row { - background-color: @mantle; - } - .two-column-layout .container { - background-color: #00000000; - } - - /* EVENTS */ - .events-filter, - .events-filter-recommended, - .dropdown-menu-clickable-button:focus, - .dropdown-menu-clickable-button:hover { - color: @text; - } - - .events-filters { - border-bottom: 1px solid @accent; - } - - .events-list-item-venue--address, - .events-list-item-event--lineup { - color: @subtext0; - } - .events-list-anhv1 a, - .events-list-anhv1 a:focus, - .events-list-anhv1 a:hover, - .events-list-item-event--title, - .events-list-item-venue--title { - color: @text; - } - - /* FEATURES */ - .features-header .features-teaser-body, - .features-teaser-wrap--promoted .features-teaser-body { - background: @base; - } - - .features-teaser-title a, - .features-teaser-title a:focus, - .features-teaser-title a:hover { - color: @text; - } - - /* FEATURES POST */ - .features-post-header-body { - background-color: @base; - } - - .features-post-header-title { - color: @accent; - } - - .features-post-artist { - color: @text; - } - - .features-post-byline-item.features-post-author { - color: @text; - } - - /* PROFILE */ - .header-avatar-add, - .header-avatar-add:not(.cta--inactive):focus, - .header-avatar-add:not(.cta--inactive):hover { - background-color: @accent-dim; - } - .dropdown-menu-clickable, - #share-library-artist, - .dropdown-menu-clickable-item:active, - body:not([data-whatinput="touch"]) .dropdown-menu-clickable-item:focus, - body:not([data-whatinput="touch"]) .dropdown-menu-clickable-item:hover { - background-color: @base; - } - .header--overview { - background-color: @mantle; - } - .header-metadata .header-metadata-title, - .header-scrobble-since, - .header-title-display-name { - color: @subtext1; - } - .chartlist-play-button::before { - background-color: @accent; - -webkit-filter: invert(0%); - filter: invert(0%); - } - - .chartlist-play-button:focus:focus::before, - .chartlist-play-button:focus:hover::before, - .chartlist-play-button:hover:focus::before, - .chartlist-play-button:hover:hover::before { - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); - background-color: @subtext0; - } - - .text-Color-link, - h2, - .dropdown-menu-clickable-item--selected, - .dropdown-menu-clickable-item--selected:focus, - .dropdown-menu-clickable-item--selected:hover, - .dropdown-menu-clickable-button, - .dropdown-menu-clickable-button:hover, - .dropdown-menu-clickable-button:active, - .dropdown-menu-clickable-button.disclose-active { - color: @accent; - } - .dropdown-menu-clickable-item, - .dropdown-menu-clickable-item:active, - body:not([data-whatinput="touch"]) .dropdown-menu-clickable-item:focus, - body:not([data-whatinput="touch"]) .dropdown-menu-clickable-item:hover { - color: @text; - } - .btn-secondary { - background-color: @accent-dim; - color: @crust; - } - - body:not(.js-focus-visible) - body:not([data-whatinput="touch"]) - .btn-secondary:focus, - body:not([data-whatinput="touch"]) .btn-secondary .focus-visible, - body:not([data-whatinput="touch"]) .btn-secondary:hover { - background-color: @accent; - color: @crust; - } - input[type="password"] { - background-color: @crust !important; - border-color: @crust !important; - } - - @-webkit-keyframes AnimationName { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 51%; - } - 100% { - background-position: 0% 50%; - } - } - @-moz-keyframes AnimationName { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 51%; - } - 100% { - background-position: 0% 50%; - } - } - @keyframes AnimationName { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 51%; - } - 100% { - background-position: 0% 50%; - } - } - - .chartlist-row--highlight, - .chartlist-row--now-scrobbling { - /*background-color: #5a1717;*/ - background: linear-gradient(270deg, @base 60%, rgba(@accent, 0.2)); - background-size: 200% 200%; - -webkit-animation: AnimationName 10s ease infinite; - -moz-animation: AnimationName 10s ease infinite; - animation: AnimationName 10s ease infinite; - } - - .chartlist-name, - .chartlist-artist { - color: @subtext0; - } - - .chartlist-break::after, - .chartlist-row::after { - border-bottom: 1px solid @surface0; - } - - .chartlist-row:hover { - background-color: @crust; - } - .chartlist-count-bar-slug { - background-color: transparent !important; - } - - .chartlist-count-bar-slug { - background-image: linear-gradient(to right, @accent, @accent); - color: @crust; - } - .chartlist-count-bar-value { - color: @crust; - } - a:focus .chartlist-count-bar-slug, - a:hover .chartlist-count-bar-slug { - background-color: @accent-dim; - } - - .chartlist-count-bar-link, - .chartlist-count-bar-link:focus, - .chartlist-count-bar-link:hover { - color: @text; - } - - .listening-report-promo { - background-color: @mantle; - } - .listening-report-promo:focus, - .listening-report-promo:hover { - background-color: @crust; - } - .listening-report-promo-title { - color: @subtext0; - } - .listening-report-promo-date { - color: @accent-dim; - } - - .shout-form textarea { - background-color: @crust; - } - - .chartlist-index { - color: @text; - } - - .chartlist tr:nth-child(1) td.chartlist-index { - font-weight: bold; - color: @accent; - } - - /* LISTENING REPORT */ - .user-dashboard-module { - background-color: @base !important; - } - .highcharts-background { - fill: @base !important; - } - .header-metadata-display, - .scrobble-stats-info { - color: @text; - } - .user-dashboard-legend-item:before { - background: transparent !important; - } - .user-dashboard-legend-item--current::before { - background-image: linear-gradient(159deg, @accent, @accent) !important; - } - .user-dashboard-legend-item--comparison::before { - background-image: linear-gradient( - 159deg, - @accent-dim, - @accent-dim - ) !important; - } - .header-metadata-title, - .user-dashboard-scrobble-stats-meta-description, - .user-dashboard-scrobble-stats-previous { - color: var(--subtext1); - } - .user-dashboard-heading { - color: @accent; - } - - .listening-report-top .secondary-nav { - border-bottom: 1px solid @overlay0; - } - .listening-report-brick { - border: 1px solid @overlay0; - &:focus, - &:hover { - border: 1px solid @overlay0; - box-shadow: none; - } - } - .listening-report-library-link { - &, - &:hover { - color: @crust !important; - background-color: @accent !important; - } - } - .user-dashboard-history-subscribe-banner-cta { - display: none; - } - - .duration-data, - .duration-data-value > .js-ticker, - .user-dashboard-small-data-point-value > .js-ticker, - .user-dashboard-small-data-point-value > .js-ticker { - color: @text; - } - - .highcharts-series.highcharts-series-1.highcharts-column-series.highcharts-color-undefined.highcharts-tracker - > a - > rect { - fill: @accent; - } - - .user-dashboard-module { - background: @crust; - border-color: @accent-dim; - } - - .user-dashboard-loved-tracks .user-dashboard-big-datapoint-value a { - color: @crust; - } - - .user-dashboard-catalogue-item-total a { - text-shadow: - -1px -1px 0 @crust, - 1px -1px 0 @crust, - -1px 1px 0 @crust, - 1px 1px 0 @crust; - } - - .user-dashboard-module .user-dashboard-module-share:hover, - body:not([data-whatinput="mouse"]) - .user-dashboard-module - .user-dashboard-module-share:focus, - .user-dashboard-module:hover .user-dashboard-module-share, - body:not([data-whatinput="mouse"]) - .user-dashboard-module:focus - .user-dashboard-module-share { - opacity: 0.1; - } - - .highcharts-text-outline { - fill: @crust; - stroke: @crust; - } - - tspan { - color: @text; - fill: @text; - } - - .user-dashboard-catalogue-item-name.user-dashboard-catalogue-item-link.link-block-target { - color: @text; - } - - .user-dashboard-catalogue-item-artist-name.user-dashboard-catalogue-item-link { - color: @subtext0; - } - - .highcharts-background { - fill: @crust; - } - - .user-dashboard-module-title.js-user-dashboard-module-title { - color: @accent; - } - - .discovery-stat-top-item-name a, - .discovery-stat-top-item-name a:focus, - .discovery-stat-top-item-name a:hover { - color: @text; - } - .discovery-stat-top-item-artist:focus, - .discovery-stat-top-item-artist:hover, - .discovery-stat-top-item-artist a, - .discovery-stat-top-item-artist a:focus, - .discovery-stat-top-item-artist a:hover { - color: @subtext0; - } - - .link-block-target.user-dashboard-leaderboard-profile-link { - color: @text; - } - - .user-dashboard-leaderboard-item--highlight - .user-dashboard-leaderboard-stat { - color: @subtext0; - } - - /* Listening Clock*/ - #SvgjsG1144 { - stroke: @crust; - } - #SvgjsCircle1169 { - fill: @crust; - } - #SvgjsText1199, - #SvgjsText1200, - #SvgjsText1201, - #SvgjsText1202 { - fill: @subtext0; - } - #SvgjsSvg1203 #Layer_1 g path { - fill: @accent; - } - #SvgjsG1023 g circle { - fill: @accent; - } - - /* LIBRARY */ - .col-sidebar._buffer-sidebar - > figure - > div - > div - > svg - > .highcharts-background { - fill: @base; - } - - .highcharts-point { - fill: @accent-dim; - } - - .highcharts-axis-labels > text { - fill: @text !important; - } - - /* FOLLOWING */ - .user-list-name { - color: @text; - } - .user-follow, - .user-follow:after { - color: @accent; - background-color: @surface0; - } - - /* FOLLOW BUTTON*/ - [data-toggle-button-current-state="unfollowed"] - .header-follower-btn:before { - background-color: @red; - color: @text; - } - [data-toggle-button-current-state="followed"] .header-follower-btn:before { - background-color: @green; - color: @text; - } - [data-toggle-button-current-state="followed"] - .header-follower-btn:hover:before { - background-color: @red; - color: @text; - } - - .header-follower-btn { - color: @accent; - } - - /* BOOKMARKS */ - .music-bookmarks-artists-item-name { - color: @text; - } - - /* TASTE-O-METER COLORS */ - .tasteometer-donut-base { - fill: @surface1; - } - .tasteometer-avatar img { - border: 2px solid @surface1; - } - .tasteometer-compat-very_low .tasteometer-compat-Color { - color: @subtext0; - fill: @subtext0; - } - .tasteometer-compat-low .tasteometer-compat-Color { - color: @mauve; - fill: @mauve; - } - .tasteometer-compat-medium .tasteometer-compat-Color { - color: @green; - fill: @green; - } - .tasteometer-compat-very_high .tasteometer-compat-Color { - color: @peach; - fill: @peach; - } - .tasteometer-compat-super .tasteometer-compat-Color { - color: @red; - fill: @red; - } - - /* ARTIST */ - .section-with-separator::after { - background-color: @base; - } - .header-new-bookmark-button, - .header-new-download-button, - .header-new-love-button, - .header-new-more-button, - body:not(.js-focus-visible) - body:not([data-whatinput="touch"]) - .header-new-bookmark-button:focus, - body:not(.js-focus-visible) - body:not([data-whatinput="touch"]) - .header-new-download-button:focus, - body:not(.js-focus-visible) - body:not([data-whatinput="touch"]) - .header-new-love-button:focus, - body:not(.js-focus-visible) - body:not([data-whatinput="touch"]) - .header-new-more-button:focus, - body:not([data-whatinput="touch"]) - .header-new-bookmark-button - .focus-visible, - body:not([data-whatinput="touch"]) .header-new-bookmark-button:hover, - body:not([data-whatinput="touch"]) - .header-new-download-button - .focus-visible, - body:not([data-whatinput="touch"]) .header-new-download-button:hover, - body:not([data-whatinput="touch"]) .header-new-love-button .focus-visible, - body:not([data-whatinput="touch"]) .header-new-love-button:hover, - body:not([data-whatinput="touch"]) .header-new-more-button .focus-visible, - body:not([data-whatinput="touch"]) .header-new-more-button:hover { - color: @base; - background-color: @accent; - } - .wiki-block-inner, - .catalogue-metadata-heading, - .catalogue-metadata-description, - .header-metadata-tnew-title { - color: @subtext0; - } - - .similar-albums-item-name a, - .similar-albums-item-name a:focus, - .similar-albums-item-name a:hover { - color: @text; - } - - .text-18 { - color: @accent; - } - - .artist-similar-artists-sidebar-item-name a, - .artist-similar-artists-sidebar-item-name a:focus, - .artist-similar-artists-sidebar-item-name a:hover { - color: @text; - } - - .events-list-item-event-name.link-block-target > span { - color: @text; - } - - .events-list-item-venue > span { - color: @subtext0; - } - - .artist-top-albums-item-name a, - .artist-top-albums-item-name a:focus, - .artist-top-albums-item-name a:hover { - color: @text; - } - - .listeners-section-item-name a, - .listeners-section-item-name a:focus, - .listeners-section-item-name a:hover { - color: @text; - } - - .catalogue-overview-similar-artists-full-width-item-name a, - .catalogue-overview-similar-artists-full-width-item-name a:focus, - .catalogue-overview-similar-artists-full-width-item-name a:hover { - color: @text; - } - - .resource-external-link, - .resource-external-link:hover { - color: @text; - } - .shout { - border-bottom: 1px solid @surface0; - } - .shout-container--active { - background-color: fadeout(@surface1, 0.3); - } - .shout-user a { - color: @text; - } - .shout-form { - border: none; - } - .js-playlink-station.desktop-playlink.inline-section-control.stationlink { - color: @text; - } - .section-with-settings .section-control:before { - border-right: 1px solid @subtext0; - } - - .header-metadata .header-metadata-display a { - color: @accent; - } - - .big-artist-list-title a { - color: var(--subtext1); - } - .big-artist-list-title a:hover { - color: @text; - } - - /* SIMILAR ARTISTS */ - .similar-artists-item-name { - color: @text; - } - - .similar-artists-item-wiki-inner-2 { - color: @subtext0; - } - - .section-playlink::before { - background-color: @accent; - -webkit-filter: invert(0%); - filter: invert(0%); - } - - .section-playlink:hover::before { - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); - background-color: @subtext0; - } - - .section-playlink.js-playlink-station { - color: @text; - } - - /* TRACK */ - .source-album-artist a, - .source-album-artist a:focus, - .source-album-artist a:hover, - .source-album-name a, - .source-album-name a:focus, - .source-album-name a:hover { - color: @text; - } - - .track-similar-tracks-item-name a, - .track-similar-tracks-item-name a:focus, - .track-similar-tracks-item-name a:hover { - color: @text; - } - - .about-artist-name a, - .about-artist-name a:focus, - .about-artist-name a:hover { - color: @text; - } - - .catalogue-overview-similar-artists-item-name a, - .catalogue-overview-similar-artists-item-name a:focus, - .catalogue-overview-similar-artists-item-name a:hover { - color: @text; - } - - .stationlink::before { - background-color: @accent; - -webkit-filter: invert(0%); - filter: invert(0%); - } - - .stationlink:focus::before, - .stationlink:hover::before { - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); - background-color: @subtext0; - } - - .video-preview-upload-cta { - background-color: @crust; - box-shadow: 0 0 0 2px @accent-dim; - } - - .video-preview-upload-cta:not(.cta--inactive):focus, - .video-preview-upload-cta:not(.cta--inactive):hover { - background-color: @base; - } - - .highcharts-plot-bands-0 > path { - fill: @overlay0; - } - - .listener-trend .highcharts-area { - fill: fadeout(@red, 0.1); - } - - .listener-trend .highcharts-graph { - stroke: @red; - } - - .Colored-cta { - background-color: fadeout(@surface2, 0.3); - } - .Colored-cta:not(.cta--inactive):focus, - .Colored-cta:not(.cta--inactive):hover { - background-color: fadeout(@surface2, 0.7); - } - .similar-items-sidebar-item-name { - color: @text; - } - .resource-list--release-list-item-name { - color: @text; - } - .shout--deleted, - .shout--reported { - background: @base; - } - .play-this-track-playlinks { - color: @text; - } - - /* WIKI */ - .factbox-item, - #factbox-more-members { - color: @subtext0; - } - - .factbox-item > h4 { - color: @accent; - } - - .alert-warning { - color: @peach; - background-color: @crust; - } - - .content-form .form-control, - .content-form input[type="date"], - .content-form input[type="email"], - .content-form input[type="number"], - .content-form input[type="password"], - .content-form input[type="text"], - .content-form input[type="url"], - .content-form select, - .content-form textarea { - background-color: @crust; - border: 1px solid @crust; - color: @subtext0; - } - - .content-form .form-control:focus, - .content-form input[type="date"]:focus, - .content-form input[type="email"]:focus, - .content-form input[type="number"]:focus, - .content-form input[type="password"]:focus, - .content-form input[type="text"]:focus, - .content-form input[type="url"]:focus, - .content-form select:focus, - .content-form textarea:focus { - box-shadow: none; - border: 1px solid @crust; - } - .content-form .form-control:hover:not([disabled]), - .content-form input[type="date"]:hover:not([disabled]), - .content-form input[type="email"]:hover:not([disabled]), - .content-form input[type="number"]:hover:not([disabled]), - .content-form input[type="password"]:hover:not([disabled]), - .content-form input[type="text"]:hover:not([disabled]), - .content-form input[type="url"]:hover:not([disabled]), - .content-form select:hover:not([disabled]), - .content-form textarea:hover:not([disabled]), - .content-form .inplace-field, - .inplace-field { - border: 1px solid @crust; - color: @text; - } - .control-label { - color: @accent; - } - .join-form .form-row-help-text { - color: @text; - background-color: @surface1; - } - #stylerules { - background-color: @overlay0; - color: @subtext0; - } - .secondary-nav-item-link--active:after, - a.secondary-nav-item-link:focus:after, - a.secondary-nav-item-link:hover:after { - background-color: @accent; - } - - /* OBSESSIONS */ - .obsession-history-play-all::before { - background-color: @accent; - -webkit-filter: invert(0%); - filter: invert(0%); - color: @text; - } - - .obsession-history-play-all.js-playlink-station.inline-section-control { - color: @text; - } - - .obsession-history-play-all:hover::before { - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); - background-color: @subtext0; - } - - .obsession-search-result-header { - color: @accent; - } - - .obsession-candidate-heading { - color: @text; - } - - .modal-dialog.popup_content, - .modal-content { - background-color: @mantle; - box-shadow: none; - } - - .modal-body { - background-color: @base; - box-shadow: none; - } - - .content-form textarea:focus { - box-shadow: none; - } - - .content-form textarea:hover:not([disabled]) { - border-color: @accent; - } - - /* MESSAGES */ - .inbox-notifications .inbox-notifications__item { - color: @subtext0; - } - - .inbox-notifications .inbox-notifications__item--highlight { - background-color: @overlay0; - } - .inbox-notifications .inbox-notifications__item--hover { - box-shadow: none; - } - .inbox-notifications__item--highlight-hover:hover { - background-color: @crust; - } - - .inbox-message-subject { - color: @accent; - } - - .inbox-message-message { - color: @text; - } - - .inbox-message-view .inbox-message-message blockquote { - background: @crust; - border: 1px solid @accent; - } - - body:not([data-whatinput="touch"]) - .inbox-notifications - .inbox-notifications__item--hover:hover { - background-color: @crust; - } - - .inbox .inbox-message { - background-color: @crust; - } - - .inbox .inbox-message--unviewed { - background-color: @overlay0; - } - - .inbox .inbox-message--unviewed .inbox-message-status::after { - background-color: @accent; - } - - /* ADS */ - .lastfm-ad { - display: none; - } - .full-bleed-ad-container, - .sidebar-ad-container { - background-color: @base; - } - - /* RECOMMENDATIONS ON PROFILE */ - .profile-card-content { - background: @surface0 !important; - } - /* UPGRADE TO PRO */ - .btn-subscribe, - .btn-subscribe:hover, - .btn-subscribe:active { - background-color: @accent !important; - } - .listening-report-brick--upsell { - display: none; - } - .your-progress { - color: @text; - } - /*----Profile Cards Hide-------*/ - .profile-cards-container { - display: none !important; - } - /* HEADER */ - .header--overview, - .header--sub-page { - color: @text; - } - /*-----Primary Button------*/ - .btn-primary, - .btn-primary:hover, - .btn-primary:active, - .no-data-message-button, - .no-data-message-button:hover, - .no-data-message-button:active, - .api-session-connect, - .api-session-disconnect:hover, - .api-session-disconnect:active, - .clipboard-button, - body:not(.js-focus-visible) - body:not([data-whatinput="touch"]) - .clipboard-button:focus, - body:not([data-whatinput="touch"]) .clipboard-button .focus-visible, - body:not([data-whatinput="touch"]) .clipboard-button:hover { - background-color: @accent !important; - color: @base !important; - } - .api-session-disconnect { - background-color: @accent-dim !important; - color: @base !important; - } - /*-----Shortcut Button------*/ - .btn-shortcut, - .btn-shortcut:hover, - .btn-shortcut:active { - background-color: @accent-dim !important; - color: @text !important; - } - /*------FOOTER-----*/ - .footer .footer-heading { - color: @subtext1; - } - .footer { - background-color: @mantle; - color: @text; - } - .footer .footer-bottom { - border-top: none; - } - .footer .footer-bottom .row { - background-color: @mantle; - } - .footer .footer-language--active, - .footer-timezone strong, - .footer .footer-language--active strong { - color: @text; - } - .footer .footer-language, - .footer-timezone, - .footer .footer-legal { - color: @overlay0; - } - /*--------TOP BAR----------*/ - .top-bar, - .player-bar, - .main-content:before, - .masthead-nav { - background: @mantle; - color: @text !important; - } - .masthead-nav-control, - .site-auth-control, - .site-auth--anon:before, - .masthead-nav .navlist-more { - color: @text !important; - } - .auth-dropdown-menu { - background-color: @base !important; - } - .auth-dropdown-menu-item { - color: @text !important; - } - .auth-dropdown-menu-item:hover, - .auth-dropdown-menu-item:active { - background-color: @overlay0 !important; - color: @text !important; - } - .masthead-nav .masthead-nav-control:focus, - .masthead-nav .masthead-nav-control:hover, - .masthead-nav .navlist-more:focus, - .masthead-nav .navlist-more:hover, - .site-auth-control:focus, - .site-auth-control:hover { - background-color: transparent; - color: @accent !important; - } - .site-auth-control.btn-secondary { - color: @base !important; - } - .masthead-search-form { - background-color: @mantle; - } - .masthead-search-submit { - background-color: @accent; - color: @base; - } - body:not(.js-focus-visible) - body:not([data-whatinput="touch"]) - .masthead-search-submit:focus, - body:not([data-whatinput="touch"]) .masthead-search-submit .focus-visible, - body:not([data-whatinput="touch"]) .masthead-search-submit:hover { - background-color: @accent; - color: @base; - } - .masthead-search-field { - color: @text; - } - /*-------PLAYLISTS---------*/ - .chartlist-timestamp { - color: @subtext0; - } - /*-----GENRES TODAY-----*/ - .genretodaybar, - .rolling_no { - background: @mantle !important; - } - /*-----NAV ITEMS-----*/ - .library-controls .secondary-nav .secondary-nav-item-link--active, - .date-range-picker-button-inner, - .library-controls .secondary-nav .secondary-nav-item-link--active:focus, - .library-controls .secondary-nav .secondary-nav-item-link--active:hover, - body:not([data-whatinput="touch"]) .catalogue-tags .tag a:hover { - color: @accent !important; - } - /*------ARTIST TAGS-----*/ - .catalogue-tags .tag a, - .catalogue-tags .tags-add, - .catalogue-tags .tags-add-cta, - body:not([data-whatinput="touch"]) .catalogue-tags .tag a:hover { - color: @accent; - box-shadow: inset 0 0 0 1px @accent-dim; - } - /*-----HIDE PLAY BUTTON ON TOP TRACK------*/ - .image-overlay-playlink-link:before { - display: none; - } - /*---------CHARTS FIX---------*/ - .globalchart .globalchart-item:first-child { - background-color: fadeout(@mantle, 0.8); - } - .globalchart-item:first-child .globalchart-rank { - color: @accent !important; - } - .globalchart-item .globalchart-rank { - color: @text; - } - /*-------LOG IN PAGE-------*/ - .auth-container > .auth-container-animation { - background-color: transparent; - } - #join-animation-container { - display: none !important; - } - h1.text-24 { - color: @accent; - } - .checkbox { - color: @text; - } - - /*----ICONS----*/ - .lazy-buylinks-toggle::before { - background-image: none !important; - mask-image: url("/static/images/icons/download_sprite_16.2d7999c89e09.png"); - -webkit-mask-image: url("/static/images/icons/download_sprite_16.2d7999c89e09.png"); - background-color: @text; - } - - .chartlist-more-button::before { - background-image: none !important; - mask-image: url("/static/images/icons/more_sprite_16.bceb4a93c77a.png"); - -webkit-mask-image: url("/static/images/icons/more_sprite_16.bceb4a93c77a.png"); - background-color: @text; - } - - .lazy-buylinks-toggle:hover:before, - .lazy-buylinks-toggle:focus:before, - .chartlist-more-button:hover:before, - .chartlist-more-button:focus:before { - background-color: @subtext0; - } - - .chartlist-love-button::before, - .header-new-love-button::before { - background-image: none !important; - mask-image: url("/static/images/icons/love_animation_tracklist_24.3c884b0287d4.png"); - -webkit-mask-image: url("/static/images/icons/love_animation_tracklist_24.3c884b0287d4.png"); - background-color: @text; - mask-position: 0 0; - -webkit-mask-position: 0 0; - } - - .chartlist-love-button:focus:before, - .chartlist-love-button:hover:before, - .header-new-love-button:focus::before, - .header-new-love-button:hover::before { - mask-position: -24px 0; - background-color: @red; - } - - [data-toggle-button-current-state="loved"] .chartlist-love-button:before, - [data-toggle-button-current-state="loved"] .header-new-love-button:before { - mask-position: -552px 0; - transition: mask-position 0.7s steps(23) !important; - -webkit-transition: -webkit-mask-position 0.7s steps(23) !important; - background-color: @red; - } - - [data-toggle-button-current-state="loved"] - .chartlist-love-button:focus:before, - [data-toggle-button-current-state="loved"] - .chartlist-love-button:hover:before, - [data-toggle-button-current-state="loved"] - .header-new-love-button:focus::before, - [data-toggle-button-current-state="loved"] - .header-new-love-button:hover::before { - transition: mask-position 0.7s steps(22) !important; - -webkit-transition: -webkit-mask-position 0.7s steps(22) !important; - } - - .section-settings-toggle::before { - background-image: none !important; - mask-image: url("/static/images/icons/settings_222_16.f63779d3cbad.png"); - -webkit-mask-image: url("/static/images/icons/settings_222_16.f63779d3cbad.png"); - background-color: @text; - } - - .share-button-profile::before { - background-image: none !important; - mask-image: url("/static/images/icons/share_222_16.9aba752fb1e9.png"); - -webkit-mask-image: url("/static/images/icons/share_222_16.9aba752fb1e9.png"); - background-color: @text; - } - - .section-settings-toggle:hover:before, - .section-settings-toggle:focus:before, - .share-button-profile:hover:before, - .share-button-profile:focus:before { - background-color: @subtext0; - } - - .cta-link::before, - .lyrics-snippet-more-link ::before, - .trending-tracks-more-link ::before, - .more-link-fullwidth-right ::before { - background-image: none !important; - mask-image: url("/static/images/icons/arrow_small_right_005399_12.8f025ef116be.png"); - -webkit-mask-image: url("/static/images/icons/arrow_small_right_005399_12.8f025ef116be.png"); - background-color: @accent; - } - - .play-this-track-playlink--itunes::before { - background-image: none !important; - mask-image: url("/static/images/icons/apple_music_color_24.17c0b1b9e185.png"); - -webkit-mask-image: url("/static/images/icons/apple_music_color_24.17c0b1b9e185.png"); - background-color: @text; - } - - .resource-external-link--homepage::before { - background-image: none !important; - mask-image: url("/static/images/icons/external_links_16.3d45e81fa3fc.png"); - -webkit-mask-image: url("/static/images/icons/external_links_16.3d45e81fa3fc.png"); - background-color: @text; - } - - .alert-warning::before { - background-image: none; - mask-image: url("/static/images/icons/alert/warning_16.93f2fe437139.png"); - -webkit-mask-image: url("/static/images/icons/alert/warning_16.93f2fe437139.png"); - background-color: @peach; - } - - .masthead-search-toggle::before { - background-image: none !important; - mask-image: url("/static/images/icons/search_16.bde37072495a.png"); - -webkit-mask-image: url("/static/images/icons/search_16.bde37072495a.png"); - background-color: @text; - } - - .masthead-search-toggle:hover:before, - .masthead-search-toggle:focus:before { - background-color: @subtext0; - } - - .masthead-search-toggle.disclose-active::before { - background-image: none !important; - mask-image: url("/static/images/icons/delete_999_24.78e2a3de3ab8.png"); - -webkit-mask-image: url("/static/images/icons/delete_999_24.78e2a3de3ab8.png"); - background-color: @text; - } - - .masthead-search-toggle.disclose-active:hover:before, - .masthead-search-toggle.disclose-active:focus:before { - background-color: @subtext0; - } - - .masthead-logo { - background-image: none !important; - mask-image: url("/static/images/logo_static.adb61955725c.png"); - -webkit-mask-image: url("/static/images/logo_static.adb61955725c.png"); - mask-position: 50% 50%; - -webkit-mask-position: 50% 50%; - mask-repeat: no-repeat; - -webkit-mask-repeat: no-repeat; - background-color: @red; - } - - .catalogue-tags .tags-add::before { - background-image: none; - mask-image: url("/static/images/icons/add_link_16.637996ed0e2f.png"); - -webkit-mask-image: url("/static/images/icons/add_link_16.637996ed0e2f.png"); - background-color: @accent; - } - - .masthead-logo-loading { - -webkit-mask-image: url("/static/images/logo_animate@2x.e93e5b7db3de.gif"); - mask-image: url("/static/images/logo_animate@2x.e93e5b7db3de.gif"); - -webkit-mask-size: contain; - mask-position: 50% 50%; - -webkit-mask-position: 50% 50%; - mask-repeat: no-repeat; - -webkit-mask-repeat: no-repeat; - background: @accent !important; - } - - .layout-image { - background: @crust; - .layout-image-image { - mix-blend-mode: screen; - } - } - } -} diff --git a/styles/lastfm/catppuccin.user.less b/styles/lastfm/catppuccin.user.less new file mode 100644 index 0000000000..6f86ebed5e --- /dev/null +++ b/styles/lastfm/catppuccin.user.less @@ -0,0 +1,895 @@ +/* ==UserStyle== +@name Last.fm Catppuccin +@namespace github.com/catppuccin/userstyles/styles/lastfm +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lastfm +@version 2026.01.03 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lastfm/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alastfm +@description Soothing pastel theme for Last.fm +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("last.fm") { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + html, html body { + color: @text; + background-color: @base; + } + + /* Components */ + + a, .mimic-link { + color: @accent; + } + + .btn-primary() { + background-color: @accent; + color: @crust; + + &:hover { + background-color: darken(@accent, 5%) !important; + color: @crust !important; + } + } + .btn-primary { + .btn-primary(); + } + .btn-secondary { + background-color: @surface0; + color: @text; + + &:hover { + background-color: @surface1 !important; + color: @text !important; + } + } + .btn-cancel { + color: @subtext1; + } + + .dropdown-menu-clickable { + background: @mantle; + &::before { + filter: @mantle-filter; + } + + .dropdown-menu-clickable-item { + color: @text; + + &:hover { + background-color: @base !important; + } + + &.dropdown-menu-clickable-item--selected { + color: @accent; + } + } + } + .dropdown-menu-clickable-button { + color: @subtext0; + + &:hover, &.disclose-active { + color: @subtext1; + } + + .section-with-settings &.section-control::before { + border-right-color: @surface2; + } + + &::after { + filter: @subtext1-filter; + } + } + + .content-form { + textarea, input, select { + background-color: @mantle !important; + color: @text !important; + border-color: @surface1 !important; + + &:focus { + box-shadow: 0 3px 9px 0 @surface0 !important; + } + } + + .lfm-form-radio input[type="radio"] { + + label::before { + background-color: @base; + border-color: @overlay1; + } + &:checked + label::before { + box-shadow: inset 0 0 0 4px @accent; + border-color: @accent; + } + } + + .form-row-help-text, .footnotes { + color: @subtext0; + } + + legend { + color: @subtext1; + } + } + + .search-form { + .search-submit::before { + filter: @overlay0-filter; + } + + &::after { + border-right-color: @surface1; + } + } + + // Alerts + .alert-warning { + background-color: fade(@peach, 30%); + color: @peach; + + &::before { + filter: @peach-filter; + } + } + + // Modals + .modal-body { + background: @mantle; + } + + // Other + + .section-with-separator::after { + background-color: @surface0; + } + + .container { + background: @base; + } + + .content-top-back-link { + color: @subtext0; + + a::before { + filter: @overlay2-filter; + } + } + + /* Footer */ + .footer { + background: @mantle; + color: @text; + + .footer-heading { + color: @subtext0; + } + + .footer-language { + color: @subtext0; + &.footer-language--active { + color: @text; + } + } + + .footer-timezone { + color: @subtext0; + strong { + color: @text; + } + } + + .footer-legal { + color: @subtext1; + } + + .container { + background: none; + } + } + + /* Header */ + .top-bar { + background: @mantle; + + svg { + filter: @accent-filter; + } + } + .masthead { + .masthead-search-toggle { + &::before { + filter: @text-filter; + } + &::after { + background-color: @text; + } + } + .masthead-nav .masthead-nav-control { + color: @text; + + &::after { + background-color: @text; + } + } + + .auth-avatar-notification-count-badge { + background: @accent; + } + .auth-dropdown-menu { + background: @mantle !important; + + .auth-dropdown-profile { + background-color: @crust; + + .auth-dropdown-profile-info { + .username { + color: @text; + } + .scrobble-count { + color: @subtext0; + } + } + } + .auth-dropdown-menu-links { + background: @mantle; + + .auth-dropdown-menu-item .auth-dropdown-menu-link img { + filter: @text-filter; + } + } + .auth-dropdown-menu-footer { + background: @mantle; + + .auth-upgrade-cta { + background: @mantle; + box-shadow: inset 0 0 0 1px @overlay0; + color: @yellow; + + &:hover { + box-shadow: inset 0 0 0 1px @yellow !important; + color: @yellow !important; + } + } + .auth-logout-cta { + box-shadow: inset 0 0 0 1px @overlay0; + background: @mantle; + color: @text; + } + } + } + } + + .header { + &.header--overview, &.header--sub-page { + color: @text; + } + &.header--overview .container, &.header--sub-page .container { + background: none; + } + + background: @base; + + .header-info { + .header-featured-track { + .featured-item-heading { + color: @subtext1; + } + } + + .header-title-secondary { + .header-scrobble-since, .header-title-display-name { + color: @subtext1; + } + } + + .header-info-secondary { + color: @text; + } + } + } + .header-metadata .header-metadata-title { + color: @subtext1; + } + .secondary-nav { + .secondary-nav-item-link:hover::after, + .secondary-nav-item-link--active::after { + background: @accent; + } + } + + .chartlist { + .chartlist-row { + &:hover { + background-color: @surface0; + } + + &.chartlist-row--highlight, &.chartlist-row--now-scrobbling { + background-color: fade(@accent, 20%); + } + + .chartlist-play { + .chartlist-play-button { + &::before { + background-color: transparent; + filter: @text-filter; + box-shadow: 0 0 0 1px fade(@mantle, 20%); + } + } + } + + .chartlist-loved { + button.chartlist-love-button { + &::before { + filter: @overlay2-filter; + } + &:hover::before, &[data-analytics-action="UnloveTrack"]::before { + filter: @accent-filter; + } + } + } + + .lazy-buylinks-toggle, .chartlist-more-button { + &::before { + filter: @overlay2-filter; + } + &:hover::before { + filter: @subtext0-filter; + } + } + .chartlist-more { + .chartlist-more-menu { + .more-item--track::before, + .more-item--artist::before, + .more-item--obsession::before { + filter: @subtext0-filter; + } + .more-item--delete::before { + filter: @red-filter; + } + } + } + + .chartlist-timestamp { + color: @subtext0; + + .chartlist-now-scrobbling::before { + filter: @subtext0-filter; + } + } + + .chartlist-bar { + .chartlist-count-bar-slug { + background-color: transparent !important; + background-image: linear-gradient( + to right, + fade(@accent, 20%), + fade(@accent, 20%) + ); + color: @crust; + } + .chartlist-count-bar-value { + color: @text; + } + } + } + .chartlist-break::after, .chartlist-row::after { + border-bottom-color: @surface1; + } + + .cover-art { + img[src="https://lastfm.freetls.fastly.net/i/u/64s/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg"] { + mix-blend-mode: screen; + filter: invert(1); + } + + &::after { + box-shadow: inset 0 0 0 1px fade(@subtext0, 7%); + } + } + } + #top-tracks { + .section-settings-toggle::before, + .share-chart .share-button-profile::before { + filter: @subtext0-filter; + } + } + + /* Track Page */ + .catalogue-metadata .lyrics-snippet-more-link a::before, + .more-link-fullwidth-right a::before, + .more-items::before, + .more-link a::before { + filter: @accent-filter; + } + .more-items { + color: @accent; + } + .catalogue-tags { + .tag a, .tags-add, .tags-add-cta { + color: @accent; + box-shadow: inset 0 0 0 1px @accent; + + &:hover { + color: darken(@accent, 5%) !important; + box-shadow: inset 0 0 0 1px darken(@accent, 5%) !important; + } + } + .tags-add::before { + filter: @accent-filter; + } + } + .source-album .source-album-stats, + .about-artist .about-artist-listeners, + .trending-tracks .trending-tracks-item-listeners, + .catalogue-overview-similar-artists-item-aux-text { + color: @subtext1; + } + + .trending-tracks-section { + &, .container { + color: @text; + background: @surface0; + } + } + + .stationlink-list .stationlink::after, + .resource-external-link::after, + .play-this-track-playlink::after { + border-bottom-color: @surface1; + } + + .video-preview-upload-cta { + background: @surface0; + box-shadow: 0 0 0 2px @surface1; + + &:hover { + background: @surface1 !important; + } + + &::before { + filter: @text-filter; + } + } + + /* Shoutbox */ + #shoutbox { + .shout, + .shout-form { + border-bottom-color: @surface0; + } + + .shout-list { + .shout-user a { + color: @text; + } + .shout-timestamp { + color: @subtext0; + + &:focus, + &:hover { + color: @text !important; + } + } + + .shout-action, + .shout-reply, + .vote-button { + color: @subtext1; + + &::before { + filter: @subtext1-filter; + } + + &:focus, + &:hover { + color: @text !important; + + &::before { + filter: @text-filter; + } + } + } + + .vote-button--voted::before, + .vote-button--unvoted:focus::before, + .vote-button--unvoted:hover::before { + filter: @green-filter !important; + } + + .shout-action-more { + .shout-more-actions { + &::before { + filter: @subtext1-filter; + } + + &:focus::before, + &:hover::before { + filter: @text-filter !important; + } + } + .shout-more-actions-menu { + .more-item--report::before { + filter: @subtext0-filter; + } + } + } + } + } + + /* Settings */ + .main-content, + .content-top-has-nav .content-top, + .two-column-layout .content-top { + background: @base; + } + .two-column-layout .container, .two-column-layout .main-content { + background-image: none; + } + .content-top-has-nav .content-top::after, + .two-column-layout .content-top::after { + border-top-color: @surface1; + } + + .change-username-upsell { + background-color: fade(@yellow, 20%); + } + + /* Inbox/Notifications */ + .inbox-notifications { + .inbox-notifications__item--hover { + box-shadow: inset 0 -1px @surface1; + + &:hover { + background-color: @surface0 !important; + } + } + .inbox-notifications__item--highlight-hover { + background-color: @surface1; + } + .inbox-notifications__item-timestamp { + color: @subtext0; + } + } + .inbox .inbox-buttons .inbox-compose-button { + .btn-primary(); + } + + /* Home */ + .secondary-nav-item-link { + &--active::after { + .homefeed--artists .content-top & { + background-color: @yellow; + } + .homefeed--albums .content-top & { + background-color: @green; + } + .homefeed--tracks .content-top & { + background-color: @blue; + } + .homefeed--events .content-top & { + background-color: @mauve; + } + } + &:hover::after { + .homefeed .content-top .secondary-nav-item--artists & { + background-color: @yellow; + } + .homefeed .content-top .secondary-nav-item--albums & { + background-color: @green; + } + .homefeed .content-top .secondary-nav-item--tracks & { + background-color: @blue; + } + .homefeed .content-top .secondary-nav-item--events & { + background-color: @mauve; + } + } + } + .recs-feed { + .recs-feed-item { + .recs-feed-cover-image-wrap { + color: @text; + } + + .recs-feed-playlink::before { + background-color: @text; + } + + &.recs-feed-item--artist .context { + &::before { + background-color: @yellow; + } + &::after { + mask-position: 0 -32px; + } + } + &.recs-feed-item--track .context { + &::before { + background-color: @blue; + } + &::after { + mask-position: 0 -96px; + } + } + &.recs-feed-item--album .context { + &::before { + background-color: @green; + } + &::after { + mask-position: 0 -64px; + } + } + .context { + // Hack using .mask-image() to allow us to mask icons with a background. + &::before { + border-radius: 50%; + content: ""; + height: 32px; + left: auto; + position: absolute; + right: 15px; + top: -16px; + width: 32px; + z-index: 1; + } + &::after { + .mask-image( + url("/static/images/icons/rec_types_16@2x.5bf9cfd03a3e.png"), + @crust, + 0 0, + 32px 160px, + no-repeat, + ); + z-index: 2; + } + + color: @subtext1; + background-color: @surface0; + box-shadow: inset 1px 0 @surface1, inset -1px -1px @surface1; + } + } + } + + // Events - Browse Popular Music (no event recommendations) + .no-data-message-button { + .btn-primary(); + } + + .stationlinks { + .stationlink-list .stationlink::before { + background-color: @text; + } + } + .mpu-subscription-upsell { + color: @subtext0; + } + .subscribe-cta { + background-color: fade(@yellow, 10%); + } + + .subscribe-cta a, .btn-subscribe { + background-color: @yellow; + color: @crust; + + &:hover { + background-color: darken(@yellow, 5%) !important; + color: @crust !important; + } + } + + /* Profile */ + .profile-cards-items { + .profile-card .profile-card-content { + background: linear-gradient( + 90deg, + @surface0 185px 80%, + fade(@surface0, 75%) 95%, + transparent + ); + + .profile-card-content-title { + color: @text; + } + p { + color: @subtext1; + } + } + } + + /* Reports */ + .listening-report-promo { + background-color: @surface0 !important; + border-color: @surface1 !important; + + .listening-report-promo-date::after { + filter: @overlay2-filter; + } + + .listening-report-promo-title { + color: @subtext0; + } + } + + /* Library */ + .library-controls { + .secondary-nav-item .secondary-nav-item-link { + &::before { + filter: @text-filter; + } + &--active, &:hover { + color: @accent; + + &::before { + filter: @accent-filter; + } + } + } + } + .library-controls-datepicker { + .date-range-picker-button { + color: @accent; + + &::before, .date-range-picker-button-inner::before { + filter: @accent-filter; + } + } + } + .date-range-picker-content { + background-color: @mantle; + + &::before { + filter: @mantle-filter; + } + + .date-range-picker-presets a { + color: @text; + + &:hover { + background-color: @surface0 !important; + } + } + + .date-range-picker-form { + border-top-color: @surface1; + + .control-label { + color: @subtext1; + } + } + } + #scrobble-chart-content { + .highcharts-background { + fill: @base !important; + } + .highcharts-axis-title { + fill: @subtext1 !important; + } + .highcharts-axis-labels text { + fill: @subtext0 !important; + } + + .highcharts-yaxis-grid .highcharts-grid-line { + stroke: @overlay0 !important; + } + .highcharts-xaxis .highcharts-axis-line { + stroke: @overlay1 !important; + } + + .highcharts-series-group { + .highcharts-point { + fill: fade(@accent, 30%); + } + } + + .highcharts-tooltip { + .highcharts-tooltip-box:not(.highcharts-shadow) { + fill: @mantle !important; + stroke: @surface0 !important; + } + + text { + fill: @text !important; + } + } + } + .metadata-title { + color: @subtext1; + } + .date-heading { + color: @subtext0; + } + + // Pagination + .pagination { + .pagination-page { + &[aria-current] { + color: @accent; + box-shadow: inset 0 -2px @accent; + } + &:not(.pagination-page--ellipsis):hover { + box-shadow: inset 0 -2px @accent; + } + } + } + + /* Followers */ + .text-light { + color: @subtext1; + } + .user-list-follower-btn { + [data-toggle-button-current-state="followed"] & { + background-color: @green; + + &:hover { + background-color: @red !important; + } + } + [data-toggle-button-current-state="unfollowed"] & { + background-color: @accent; + + &:hover { + background-color: darken(@accent, 5%) !important; + } + } + + &::before { + filter: @crust-filter; + } + } + + /* Obsessions */ + .obsession-candidates-row::before { + border-top-color: @surface1; + } + + // TODO: https://www.last.fm/music + // TODO: https://www.last.fm/user/*/listening-report/week (Reports) + } +} + +// Usage: +// .maskimage(mask-image, background-color, mask-position, mask-size, mask-repeat); +// Setting any value to "skip" skips that attribute. +// We cannot apply filters to psuedo elements with background-images when the pseudo element also has a background(-color), which is when this must be used. +.mask-image( + @mask-image: url(""), + @mask-color: skip, + @mask-position: skip, + @mask-size: skip, + @mask-repeat: skip, +) { + & when not(@mask-color = skip) { + background-image: none !important; + background-color: @mask-color; + } + & when not(@mask-image = skip) { + mask-image: @mask-image; + } + & when not(@mask-position = skip) { + mask-position: @mask-position; + } + & when not(@mask-size = skip) { + mask-size: @mask-size; + } + & when not(@mask-repeat = skip) { + mask-repeat: @mask-repeat; + } +} diff --git a/styles/learn-x-in-y-minutes/README.md b/styles/learn-x-in-y-minutes/README.md new file mode 100644 index 0000000000..53b0104c2f --- /dev/null +++ b/styles/learn-x-in-y-minutes/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Learn X in Y Minutes + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [nik-rev](https://github.com/nik-rev) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/learn-x-in-y-minutes/catppuccin.user.less b/styles/learn-x-in-y-minutes/catppuccin.user.less new file mode 100644 index 0000000000..04f9333c50 --- /dev/null +++ b/styles/learn-x-in-y-minutes/catppuccin.user.less @@ -0,0 +1,151 @@ +/* ==UserStyle== +@name Learn X in Y Minutes Catppuccin +@namespace github.com/catppuccin/userstyles/styles/learn-x-in-y-minutes +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/learn-x-in-y-minutes +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/learn-x-in-y-minutes/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alearn-x-in-y-minutes +@description Soothing pastel theme for Learn X in Y Minutes +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("learnxinyminutes.com") { + @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); + + html.light { + #catppuccin(@lightFlavor); + } + + html.dark { + #catppuccin(@darkFlavor); + } + + html:not(.dark, .light) { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + .highlight { + background-color: @mantle; + + pre { + background-color: @mantle !important; + } + } + + &:not(.dark, .light) { + p { + color: @subtext0 !important; + } + + span { + color: @text; + } + } + + .share { + background-color: @mantle; + border-color: @crust; + + &:hover { + background-color: @surface0; + } + } + + .theme-choice button { + color: @text; + background-color: @mantle; + border-color: @crust; + + &:hover { + background-color: @surface0; + } + } + + #lang-select { + color: @text; + background-color: @mantle; + border-color: @crust; + } + + td.lang span a { + color: @text; + background-color: @mantle; + border-color: @crust; + + &:hover { + background-color: @surface0; + } + } + + &, + body { + background-color: @base; + color: @text; + border-color: @base; + box-shadow: none; + } + + td, + th { + color: @text; + border-bottom-color: @surface0; + } + + footer { + p { + color: @subtext1; + } + } + + a { + color: @accent !important; + + code { + color: @accent !important; + } + + &:visited { + color: darken(@accent, 5%) !important; + } + + &.active { + color: @base !important; + background-color: @accent !important; + border-color: darken(@accent, 15%) !important; + + &:visited { + background-color: darken(@accent, 5%) !important; + color: @base !important; + border-color: darken(@accent, 10%) !important; + } + } + } + + hr { + border-color: @surface1; + } + + code { + background-color: @mantle; + color: @text; + } + } +} diff --git a/styles/lemmy/README.md b/styles/lemmy/README.md new file mode 100644 index 0000000000..938de631bd --- /dev/null +++ b/styles/lemmy/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Lemmy + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [Gandalf-the-Blue](https://github.com/Gandalf-the-Blue) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/lemmy/catppuccin.user.less b/styles/lemmy/catppuccin.user.less new file mode 100644 index 0000000000..f64f24246e --- /dev/null +++ b/styles/lemmy/catppuccin.user.less @@ -0,0 +1,210 @@ +/* ==UserStyle== +@name Lemmy Catppuccin +@namespace github.com/catppuccin/userstyles/styles/lemmy +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lemmy +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lemmy/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alemmy +@description Soothing pastel theme for Lemmy +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("lemmy.ml"), domain("lemmy.world") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + [data-bs-theme="dark"] { + --bs-body-color: @text; + --bs-body-bg: @base; + --bs-emphasis-color: @subtext1; + --bs-secondary-color: @subtext0; + --bs-secondary-bg: @mantle; + --bs-tertiary-color: @crust; + --bs-tertiary-bg: @crust; + --bs-primary-text-emphasis: @overlay0; + --bs-secondary-text-emphasis: @overlay1; + --bs-success-text-emphasis: @green; + --bs-info-text-emphasis: @sky; + --bs-warning-text-emphasis: @yellow; + --bs-danger-text-emphasis: @red; + --bs-light-text-emphasis: @overlay2; + --bs-dark-text-emphasis: @overlay2; + --bs-primary-bg-subtle: @base; + --bs-secondary-bg-subtle: @mantle; + --bs-success-bg-subtle: @green; + --bs-info-bg-subtle: @accent; + --bs-warning-bg-subtle: @yellow; + --bs-danger-bg-subtle: @red; + --bs-light-bg-subtle: @base; + --bs-dark-bg-subtle: @base; + --bs-primary-border-subtle: @accent; + --bs-secondary-border-subtle: @accent; + --bs-success-border-subtle: @green; + --bs-info-border-subtle: @accent; + --bs-warning-border-subtle: @yellow; + --bs-danger-border-subtle: @red; + --bs-light-border-subtle: @crust; + --bs-dark-border-subtle: @crust; + --bs-heading-color: @text; + --bs-card-border-color: @crust; + --bs-link-color: @blue; + --bs-link-hover-color: @maroon; + --bs-code-color: @lavender; + --bs-highlight-color: @accent; + --bs-highlight-bg: @mantle; + --bs-border-color: @crust; + --bs-form-valid-color: @green; + --bs-form-valid-border-color: @green; + --bs-form-invalid-color: @red; + --bs-form-invalid-border-color: @red; + --bs-dark-rgb: @accent; + --bs-btn-bg: @base; + } + + body { + color: @text; + background-color: @base; + } + + .nav-link { + color: @accent; + } + .card { + --bs-card-cap-bg: @mantle; + --bs-card-title-color: @text; + --bs-card-subtitle-color: @subtext1; + --bs-card-color: @text; + --bs-card-cap-color: @mantle; + --bs-card-bg: @crust; + } + + .form-control { + color: @text; + background-color: @crust; + border-color: @crust; + } + + .btn-secondary { + --bs-btn-color: @text; + --bs-btn-bg: @base; + --bs-btn-border-color: @overlay1; + --bs-btn-hover-color: @accent; + --bs-btn-hover-bg: @crust; + --bs-btn-hover-border-color: @overlay2; + --bs-btn-active-color: @text; + --bs-btn-active-bg: @accent; + --bs-btn-active-border-color: @crust; + --bs-btn-active-shadow: inset 0 3px 5px @crust; + --bs-btn-disabled-color: @red; + --bs-btn-disabled-bg: @crust; + --bs-btn-disabled-border-color: @mantle; + } + + .table > :not(caption) > * > * { + color: @text; + background-color: @mantle; + } + + .dropdown-menu-dark { + --bs-dropdown-color: @text; + --bs-dropdown-bg: @crust; + --bs-dropdown-border-color: @mantle; + --bs-dropdown-box-shadow: @mantle; + --bs-dropdown-link-color: @blue; + --bs-dropdown-link-hover-color: @accent; + --bs-dropdown-divider-bg: @overlay0; + --bs-dropdown-link-hover-bg: @crust; + --bs-dropdown-link-active-color: @accent; + --bs-dropdown-link-active-bg: @mantle; + --bs-dropdown-link-disabled-color: @red; + --bs-dropdown-header-color: @text; + } + + .form-select { + color: @text; + background-color: @mantle; + border-color: @crust; + } + + .btn-outline-secondary { + --bs-btn-color: @text; + --bs-btn-border-color: @mantle; + --bs-btn-hover-color: @accent; + --bs-btn-hover-bg: @crust; + --bs-btn-hover-border-color: @overlay0; + --bs-btn-active-color: @accent; + --bs-btn-active-bg: @crust; + --bs-btn-active-border-color: @crust; + --bs-btn-active-shadow: inset 0 3px 5px @crust; + --bs-btn-disabled-color: @red; + --bs-btn-disabled-border-color: @mantle; + } + + .nav-tabs .nav-link.active, + .nav-tabs .nav-item.show .nav-link { + color: @accent; + background-color: @crust; + border-color: @mantle; + } + + .dropdown-item { + color: @text; + background-color: @crust; + } + + .dropdown-menu { + --bs-dropdown-color: @text; + --bs-dropdown-bg: @crust; + --bs-dropdown-border-color: @mantle; + --bs-dropdown-box-shadow: @mantle; + --bs-dropdown-link-color: @blue; + --bs-dropdown-link-hover-color: @accent; + --bs-dropdown-divider-bg: @overlay0; + --bs-dropdown-link-hover-bg: @crust; + --bs-dropdown-link-active-color: @accent; + --bs-dropdown-link-active-bg: @mantle; + --bs-dropdown-link-disabled-color: @red; + --bs-dropdown-header-color: @text; + } + + a { + color: @accent; + } + + .text-bg-primary { + color: @text; + } + + .text-muted { + color: @accent; + } + .text-bg-light { + color: @text !important; + background-color: rgba(#lib.rgbify(@mantle)[], 1) !important; + } + .alert-info, + .alert-warning { + background-color: @mantle !important; + border-color: @mantle !important; + color: @text !important; + } + } +} diff --git a/styles/libreddit/README.md b/styles/libreddit/README.md index 93db475961..232a6fef72 100644 --- a/styles/libreddit/README.md +++ b/styles/libreddit/README.md @@ -4,47 +4,28 @@

Logo
- Catppuccin for Libreddit + Catppuccin for Libreddit, Redlib

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- +## Usage +> [!IMPORTANT] +> This userstyle also applies to [Redlib](https://github.com/redlib-org/redlib). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). -## 💝 Current Maintainer(s) -- [Isabel](https://github.com/isabelroses) +## ❤️‍🩹 Unmaintained +This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! -## 💖 Past Maintainer(s) -- [Andreas Grafen](https://github.com/andreasgrafen) +## 💖 Past Maintainer +- [unseen-ninja](https://github.com/unseen-ninja)   diff --git a/styles/libreddit/assets/catwalk.webp b/styles/libreddit/assets/catwalk.webp deleted file mode 100644 index f391cf03aa..0000000000 --- a/styles/libreddit/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:fa77b5084d8c2872f5b9ddfbfc7d71c67341d38b24204218be50040afc2b78c0 -size 192158 diff --git a/styles/libreddit/assets/frappe.webp b/styles/libreddit/assets/frappe.webp deleted file mode 100644 index be9c1eb8f8..0000000000 --- a/styles/libreddit/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2d36296acd07374ed2c29d0b95c2582a7021853b1676224ff9577652ef4fa930 -size 36222 diff --git a/styles/libreddit/assets/latte.webp b/styles/libreddit/assets/latte.webp deleted file mode 100644 index b3eebc5536..0000000000 --- a/styles/libreddit/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9379f0118b30b684a051917014b58fb0b0ec140923f57698cf15bdcc273cd8a0 -size 34424 diff --git a/styles/libreddit/assets/macchiato.webp b/styles/libreddit/assets/macchiato.webp deleted file mode 100644 index ca4ec7c1dd..0000000000 --- a/styles/libreddit/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f35bca1dfda06a6186e40d07b874af5dd0141ab964b68a431848f8209ad3fc21 -size 36630 diff --git a/styles/libreddit/assets/mocha.webp b/styles/libreddit/assets/mocha.webp deleted file mode 100644 index 0dc09884e2..0000000000 --- a/styles/libreddit/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:62cc12d9fd2c5573c36f392aa0f83751463beb2643d5497d1e1dd84dc548468d -size 36614 diff --git a/styles/libreddit/catppuccin.user.css b/styles/libreddit/catppuccin.user.css deleted file mode 100644 index 8145280322..0000000000 --- a/styles/libreddit/catppuccin.user.css +++ /dev/null @@ -1,256 +0,0 @@ -/* ==UserStyle== -@name Libreddit Catppuccin -@namespace github.com/catppuccin/userstyles/styles/libreddit -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/libreddit -@version 2.0.4 -@description Soothing pastel theme for Libreddit -@author Catppuccin -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/libreddit/catppuccin.user.css -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] -==/UserStyle== */ -@-moz-document domain("libredd.it"), -domain("libreddit.spike.codes"), -domain("libreddit.dothq.co"), -domain("libreddit.kavin.rocks"), -domain("reddit.invak.id"), -domain("reddit.phii.me"), -domain("lr.riverside.rocks"), -domain("libreddit.strongthany.cc"), -domain("libreddit.database.red"), -domain("libreddit.privacy.com.de"), -domain("libreddit.domain.glass"), -domain("libreddit.sugoma.tk"), -domain("libreddit.jamiethalacker.dev"), -domain("reddit.artemislena.eu"), -domain("r.nf"), -domain("libreddit.some-things.org"), -domain("reddit.stuehieyr.com"), -domain("lr.mint.lgbt"), -domain("libreddit.igna.rocks"), -domain("libreddit.autarkic.org"), -domain("libreddit.flux.industries"), -domain("libreddit.drivet.xyz"), -domain("lr.oversold.host"), -domain("libreddit.de"), -domain("libreddit.pussthecat.org"), -domain("libreddit.mutahar.rocks"), -domain("libreddit.northboot.xyz"), -domain("leddit.xyz"), -domain("de.leddit.xyz"), -domain("lr.cowfee.moe"), -domain("libreddit.hu"), -domain("libreddit.totaldarkness.net"), -domain("libreddit.esmailelbob.xyz"), -domain("lr.vern.cc"), -domain("libreddit.nl"), -domain("lr.stilic.ml"), -domain("reddi.tk"), -domain("libreddit.bus-hit.me"), -domain("libreddit.datatunnel.xyz"), -domain("libreddit.crewz.me"), -domain("r.walkx.org"), -domain("libreddit.kylrth.com"), -domain("libreddit.yonalee.eu"), -domain("libreddit.winscloud.net"), -domain("libreddit.tiekoetter.com"), -domain("reddit.rtrace.io"), -domain("libreddit.lunar.icu"), -domain("libreddit.privacydev.net"), -domain("libreddit.notyourcomputer.net"), -domain("r.ahwx.org"), -domain("bob.fr.to"), -domain("reddit.beparanoid.de"), -domain("libreddit.dcs0.hu"), -domain("reddit.dr460nf1r3.org"), -domain("rd.jae.su"), -domain("libreddit.mha.fi"), -domain("libreddit.foss.wtf"), -domain("libreddit.encrypted-data.xyz"), -domain("libreddit.eu.org"), -domain("l.opnxng.com") { - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - .light, - .gruvboxlight { - #catppuccin(@lightFlavor, @accentColor); - } - - .dark, - .black, - .doomone, - .gruvboxdark, - .dracula, - .gold, - .laserwave, - .nord, - .rosebox, - .violet, - :root { - #catppuccin(@darkFlavor, @accentColor); - } - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-color: @catppuccin[@@lookup][@@accent]; - - & { - --accent: @accent-color !important; - --green: @green !important; - --text: @text !important; - --foreground: @crust !important; - --background: @base !important; - --outside: @mantle !important; - --post: @mantle !important; - --panel-border: none !important; - --highlighted: @surface0 !important; - --visited: @overlay0 !important; - --shadow: 0 5px 15px 0 transparent !important; - - --nsfw: @peach !important; - --admin: @maroon !important; - } - } -} diff --git a/styles/libreddit/catppuccin.user.less b/styles/libreddit/catppuccin.user.less new file mode 100644 index 0000000000..9be86d8ca4 --- /dev/null +++ b/styles/libreddit/catppuccin.user.less @@ -0,0 +1,145 @@ +/* ==UserStyle== +@name Libreddit/Redlib Catppuccin +@namespace github.com/catppuccin/userstyles/styles/libreddit +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/libreddit +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/libreddit/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alibreddit +@description Soothing pastel theme for Libreddit and Redlib +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("libredd.it"), + domain("libreddit.spike.codes"), + domain("libreddit.dothq.co"), + domain("libreddit.kavin.rocks"), + domain("reddit.invak.id"), + domain("reddit.phii.me"), + domain("lr.riverside.rocks"), + domain("libreddit.strongthany.cc"), + domain("libreddit.database.red"), + domain("libreddit.privacy.com.de"), + domain("libreddit.domain.glass"), + domain("libreddit.sugoma.tk"), + domain("libreddit.jamiethalacker.dev"), + domain("reddit.artemislena.eu"), + domain("r.nf"), + domain("libreddit.some-things.org"), + domain("reddit.stuehieyr.com"), + domain("lr.mint.lgbt"), + domain("libreddit.igna.rocks"), + domain("libreddit.autarkic.org"), + domain("libreddit.flux.industries"), + domain("libreddit.drivet.xyz"), + domain("lr.oversold.host"), + domain("libreddit.de"), + domain("libreddit.pussthecat.org"), + domain("libreddit.mutahar.rocks"), + domain("libreddit.northboot.xyz"), + domain("leddit.xyz"), + domain("de.leddit.xyz"), + domain("lr.cowfee.moe"), + domain("libreddit.hu"), + domain("libreddit.totaldarkness.net"), + domain("libreddit.esmailelbob.xyz"), + domain("lr.vern.cc"), + domain("libreddit.nl"), + domain("lr.stilic.ml"), + domain("reddi.tk"), + domain("libreddit.bus-hit.me"), + domain("libreddit.datatunnel.xyz"), + domain("libreddit.crewz.me"), + domain("r.walkx.org"), + domain("libreddit.kylrth.com"), + domain("libreddit.yonalee.eu"), + domain("libreddit.winscloud.net"), + domain("libreddit.tiekoetter.com"), + domain("reddit.rtrace.io"), + domain("libreddit.lunar.icu"), + domain("libreddit.privacydev.net"), + domain("libreddit.notyourcomputer.net"), + domain("r.ahwx.org"), + domain("bob.fr.to"), + domain("reddit.beparanoid.de"), + domain("libreddit.dcs0.hu"), + domain("reddit.dr460nf1r3.org"), + domain("rd.jae.su"), + domain("libreddit.mha.fi"), + domain("libreddit.foss.wtf"), + domain("libreddit.encrypted-data.xyz"), + domain("libreddit.eu.org"), + domain("l.opnxng.com"), + domain("safereddit.com"), + domain("libreddit.projectsegfau.lt"), + domain("libreddit.bus-hit.me"), + domain("reddit.invak.id"), + domain("redlib.catsarch.com"), + domain("reddit.idevicehacked.com"), + domain("redlib.freedit.eu"), + domain("redlib.perennialte.ch"), + domain("redlib.tux.pizza"), + domain("redlib.vimmer.dev"), + domain("libreddit.privacydev.net"), + domain("lr.n8pjl.ca"), + domain("reddit.owo.si"), + domain("redlib.ducks.party"), + domain("red.ngn.tf"), + domain("redlib.dnfetheus.xyz"), + domain("redlib.cow.rip"), + domain("libreddit.eu.org"), + domain("r.darrennathanael.com"), + domain("redlib.kittywi.re"), + domain("redlib.privacyredirect.com") { + .light, + .gruvboxlight { + #catppuccin(@lightFlavor); + } + + .dark, + .black, + .doomone, + .gruvboxdark, + .dracula, + .gold, + .laserwave, + .nord, + .rosebox, + .violet, + :root { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --accent: @accent !important; + --green: @green !important; + --text: @text !important; + --foreground: @crust !important; + --background: @base !important; + --outside: @mantle !important; + --post: @mantle !important; + --panel-border: none !important; + --highlighted: @surface0 !important; + --visited: @overlay0 !important; + --shadow: 0 5px 15px 0 transparent !important; + + --nsfw: @peach !important; + --admin: @maroon !important; + + /* thumbnail titles */ + .post_thumbnail span { + background-color: @base; + color: @text; + } + } +} diff --git a/styles/lichess/README.md b/styles/lichess/README.md new file mode 100644 index 0000000000..e8d15b1c01 --- /dev/null +++ b/styles/lichess/README.md @@ -0,0 +1,38 @@ + + + +

+ Logo
+ + Catppuccin for Lichess + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + +> [!NOTE] +> Switch to a default Lichess light/dark theme via **Username** > **Background** for the best experience! + +## 💝 Current Maintainers +- [coopw1](https://github.com/coopw1) +- [zenoix](https://github.com/zenoix) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/lichess/catppuccin.user.less b/styles/lichess/catppuccin.user.less new file mode 100644 index 0000000000..e63badfb3b --- /dev/null +++ b/styles/lichess/catppuccin.user.less @@ -0,0 +1,623 @@ +/* ==UserStyle== +@name Lichess Catppuccin +@namespace github.com/catppuccin/userstyles/styles/lichess +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lichess +@version 2025.09.19 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lichess/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alichess +@description Soothing pastel theme for Lichess +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] + +@var select lastMoveColor "Last Move" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +@var select checkColor "Check Indicator" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +@var checkbox stylePieces "Style Pieces" 1 +@var checkbox styleBoard "Style Board" 1 +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("lichess.org") { + :root:has(body[data-theme="light"]) { + #catppuccin(@lightFlavor); + } + :root:has(body[data-theme="dark"]) { + #catppuccin(@darkFlavor); + } + :root:has(body[data-theme="system"]) { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + @lastMove: @catppuccin[@@flavor][@@lastMoveColor]; + @check: @catppuccin[@@flavor][@@checkColor]; + + &, + body { + background: @base linear-gradient(to bottom, @crust, @base 116px) + no-repeat; + color: @text !important; + } + + /* Button */ + .site-title a { + color: @accent; + } + .site-title span { + color: @text; + } + + /* Game selection menus */ + .hooks__list td { + background-color: fade(@overlay0, 50%); + } + .hooks__list tr.join:hover td { + background-color: fade(@accent, 50%); + } + + /* Topbar */ + #topnav.hover section:hover > a, + #topnav section:active > a, + #topnav div, + .site-buttons .shown .toggle, + .site-buttons .dropdown { + background: @crust; + } + #topnav section > a { + color: @subtext0; + } + #topnav.hover section:hover > a, + #topnav section:active > a, + #topnav div a, + #dasher_app .selector button, + #dasher_app .head, + #dasher_app .piece .no-square, + #dasher_app .theme .list button, + #dasher_app .links a, + #dasher_app .links button, + #dasher_app .subs .sub, + .site-buttons .dropdown a, + .site-buttons .dropdown button { + color: @text; + } + #topnav.hover section:hover > a, + #topnav section:active > a, + #topnav div { + border-left-color: @accent; + } + signal > i { + background-color: @green; + } + #dasher_app .sub::before, + .is-green::before { + color: @green; + } + #challenge-app .empty { + background: @crust; + } + + /* Popup skining */ + dialog { + background: @crust; + } + .game-setup .optional-config, + .game-setup .ratings { + background: @base; + } + .game-setup .radio input:checked + label { + background: @green; + } + + /* Text */ + .site-buttons .link, + .button, + .input, + .optgroup, + .select, + .textarea, + .lobby__box td.name a, + .lobby__box__top .title, + .lobby__box .user-link, + .mini-game, + .mini-game:hover, + .text, + .ublog-post-card__title, + .lobby__counters a, + .lobby__streams .stream, + .lobby__timeline .entry a, + .lobby__about a, + .lobby__timeline, + .lobby__counters, + .tabs-horiz, + .lobby__streams .more, + .lobby__timeline .more, + .dialog-content, + button, + input, + optgroup, + select, + textarea { + color: @subtext0; + } + .site-buttons .link:hover, + .button.button-metal:hover, + .radio input:checked + label { + color: @text; + } + .site-title-nav__donate, + .lobby__streams .stream.highlight strong, + .utitle, + .lobby__support__text, + .lobby__support i::before { + color: @peach; + } + .mini-game__clock.clock--run, + .tabs-horiz span.active { + color: @red; + } + .tabs-horiz span.active, + .tabs-horiz span:hover { + border-color: @red; + } + a { + color: @blue; + } + /* Links */ + .lobby__timeline .entry:hover a, + a:hover, + a:active, + a:focus { + color: @accent; + } + + /* Homepage cards */ + .lobby__app__content, + .box { + background-color: @mantle; + } + .lpools > div { + background: fade(@crust, 20%); + border-color: @surface0; + &:hover { + background-color: fade(@accent, 20%); + } + } + .hook__filters { + background-color: fade(@mantle, 50%); + } + .lobby__support a { + background: @crust; + } + .lobby__support a:hover { + background: @peach; + } + .lobby__support a:hover i::before, + .lobby__support a:hover .lobby__support__text { + color: @mantle; + } + .lobby__box__top, + #hook .opponent, + .lobby__box__content, + .ublog-post-card, + .button, + .tour-spotlight { + background: @mantle !important; + } + .unread { + background: @red; + } + .lobby__box tr:nth-child(even) { + background: @crust; + } + + /* Non-main page sidebar nav colors */ + .subnav a.active { + color: @red; + } + .subnav a.active::after, + .subnav a:hover::after { + background: @red; + } + + /* Blog cards */ + .blog-cards > a { + background: @crust; + } + + /* Learn tab */ + .learn-stages .stage.done { + background: @green; + } + .learn-stages .stage.ongoing, + .learn__side-home { + background: @blue; + } + .learn-stages .stage.future { + background: @red; + } + + /* Chess Game */ + @light-cell: if(@flavor = latte, @surface0, @accent); + @dark-cell: if(@flavor = latte, @accent, @surface0); + & when (@styleBoard = 1) { + /* Board */ + .is2d cg-board::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + /* File and Rank Coords */ + .orientation-white .files coord:nth-child(2n+1), + .orientation-white .ranks coord:nth-child(2n), + .orientation-black .files coord:nth-child(2n), + .orientation-black .ranks coord:nth-child(2n+1) { + color: @light-cell; + } + .orientation-white .files coord:nth-child(2n), + .orientation-white .ranks coord:nth-child(2n+1), + .orientation-black .files coord:nth-child(2n+1), + .orientation-black .ranks coord:nth-child(2n) { + color: @dark-cell; + } + + /* Squares */ + square { + &.move-dest { + background: radial-gradient( + @overlay1 19%, + rgba(0, 0, 0, 0) 20% + ); + } + + &.selected { + background: fade(@accent, 50%); + } + + &.last-move { + background-color: fade(@lastMove, 75%); + } + + &.check { + background: radial-gradient( + ellipse at center, + @check 0%, + @check 25%, + fade(@check, 0%) 89%, + fade(@check, 0%) 100% + ); + } + + /* Capture indicator */ + &.oc.move-dest { + background: radial-gradient( + transparent 0%, + transparent 79%, + fade(@overlay1, 50%) 80% + ); + } + } + + /* Analysis Arrows */ + svg.cg-shapes g { + &[cgHash*="green"] { + filter: @green-filter; + } + &[cgHash*="paleBlue"] { + filter: @sky-filter; + } + &[cgHash*="red"] { + filter: @red-filter; + } + } + } + & when (@stylePieces = 1) { + @w-piece-fill: if(@flavor = latte, @mantle, @text); + @b-piece-fill: if(@flavor = latte, @text, @mantle); + @w-piece-stroke: if(@flavor = latte, @text, @mantle); + @b-piece-stroke: if(@flavor = latte, @mantle, @text); + + .is2d .pawn { + #piece(@f, @s) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + &.black { + #piece(@b-piece-fill, @b-piece-stroke); + } + &.white { + #piece(@w-piece-fill, @w-piece-stroke); + } + } + .is2d .bishop { + #piece(@f, @s) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + &.black { + #piece(@b-piece-fill, @b-piece-stroke); + } + &.white { + #piece(@w-piece-fill, @w-piece-stroke); + } + } + .is2d .knight { + #piece(@f, @s) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + &.black { + #piece(@b-piece-fill, @b-piece-stroke); + } + &.white { + #piece(@w-piece-fill, @w-piece-stroke); + } + } + .is2d .rook { + #piece(@f, @s) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + &.black { + #piece(@b-piece-fill, @b-piece-stroke); + } + &.white { + #piece(@w-piece-fill, @w-piece-stroke); + } + } + .is2d .king { + #piece(@f, @s) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + &.black { + #piece(@b-piece-fill, @b-piece-stroke); + } + &.white { + #piece(@w-piece-fill, @w-piece-stroke); + } + } + .is2d .queen { + #piece(@f, @s) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + &.black { + #piece(@b-piece-fill, @b-piece-stroke); + } + &.white { + #piece(@w-piece-fill, @w-piece-stroke); + } + } + } + + .rclock .time { + background: @mantle; + color: @text; + } + .rclock.running .time { + background: #384722; /* putting it back to default so that the time on the clock is readable */ + } + .rclock .bar { + background: @accent; + } + + /* Game Cards */ + .game__meta, + .round__app__table { + background: @crust; + } + rm6 { + background: @mantle; + } + rm6 .buttons, + rm6 i5z { + background: @base; + } + + /* Messages */ + .msg-app__convo__head, + .msg-app__side__search, + .msg-app__convo__reply { + background: @crust; + } + .msg-app__side { + background: @mantle; + } + .msg-app__side__search input, + .msg-app__convo__post__text { + background: @base; + } + .msg-app__side__contact__name { + color: @text; + } + .msg-app__side__contact__msg, + .msg-app__side__contact__date time { + color: @subtext0; + } + + /* User dropdown */ + #powerTip, + #miniGame, + #miniBoard { + background: @crust; + } + .btn-rack__btn, + .btn-rack form, + #friend_box .friend_box_title, + .button.button-metal, + .button.button-empty:not(.disabled):hover, + .button.button-empty.button-green:not(.disabled):hover, + .button.button-empty.button-red:not(.disabled):hover { + background: @base; + } + + /* User Page */ + .user-show__header, + .user-show__social, + .user-show .angles, + .cmn-toggle:hover:not(:disabled) + label::after, + .cmn-toggle + label::after, + .crosstable povs:hover, + .crosstable__users, + .crosstable__score, + .game-row:nth-child(odd), + .number-menu--tabs .nm-item.active { + background: @crust; + } + .number-menu--tabs .nm-item.active, + .user-show .number-menu .to-games.active, + .user-show #games.number-menu { + background: @mantle !important; + } + /* Stats */ + .perf-stat .counter tr.full td:last-child { + background: @crust; + } + .sub-ratings a.active { + background: @mantle; + } + .sub-ratings a[href]:hover { + background: @crust; + } + + /* Analysis page */ + .analyse__clock, + #analyse-cm .title, + .explorer__config .choices button, + .mselect__label, + .cmn-toggle:hover:not(:disabled) + label::after, + .cmn-toggle + label::after, + .crosstable povs:hover, + .crosstable__users, + .crosstable__score, + .mselect__list, + .analyse__tools .comp-off__hint, + .ceval, + .explorer-box tr:nth-child(even), + .board-editor__tools .metadata, + .mchat__content, + .mchat__tab-active, + .crosstable fill { + background: @crust !important; + } + .analyse__tools, + .copyable, + .pv_box, + #ceval-settings { + background: @mantle; + } + .ceval .settings-gear.active { + background-color: @accent; + } + #ceval-settings { + border-top-color: @accent; + } + .mchat__tab:hover { + background: fade(@accent, 50%); + } + .ceval .bar span { + background: @green; + + &.threat { + background: @red; + } + } + .show-threat.active, + .show-threat:hover:not(.hidden) { + color: @red; + } + /* Openings */ + .opening__config, + .opening__next { + background: @crust; + } + .opening__next { + outline-color: @base; + } + .opening__next:hover { + outline-color: @accent; + } + .opening__next__popularity span { + background: @accent; + } + .opening__next__title { + color: @accent; + } + + /* Puzzles */ + .tview2-column > index { + background: @base; + color: @subtext0 !important; + } + .puzzle__feedback { + background: @base; + } + .puzzle__tools, + .puzzle__side__metas, + .puzzle__side__user, + .puzzle__side__config, + .puzzle__side__theme { + background: @mantle; + } + input, + textarea, + select { + background: @crust; + } + .cmn-toggle:checked + label { + background-color: @green; + } + .cmn-toggle:checked + label::before { + color: @green; + } + + /* Teams */ + .slist tbody tr:nth-child(even), + .team-show__desc, + .team-show__forum__post:nth-child(odd) { + background: @crust; + } + + /* Settings */ + .account .radio input:checked + label, + .account table.allows tr:nth-child(odd) td { + background: @crust; + } + .radio label { + background: @base; + } + .flash-warning { + background: @peach; + } + .form-control:invalid { + border-color: @red; + } + } +} diff --git a/styles/lingva/README.md b/styles/lingva/README.md new file mode 100644 index 0000000000..6497383184 --- /dev/null +++ b/styles/lingva/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Lingva + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [rubyowo](https://github.com/rubyowo) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/lingva/catppuccin.user.less b/styles/lingva/catppuccin.user.less new file mode 100644 index 0000000000..15041b059d --- /dev/null +++ b/styles/lingva/catppuccin.user.less @@ -0,0 +1,101 @@ +/* ==UserStyle== +@name Lingva Catppuccin +@namespace github.com/catppuccin/userstyles/styles/lingva +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lingva +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lingva/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alingva +@description Soothing pastel theme for Lingva +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("lingva.ml"), + domain("translate.plausibility.cloud"), + domain("lingva.lunar.icu"), + domain("translate.projectsegfau.lt"), + domain("lingva.garudalinux.org") { + .chakra-ui-light { + #catppuccin(@lightFlavor); + } + .chakra-ui-dark { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + body { + background: @base; + color: @text; + } + + header { + background-color: @accent; + + .chakra-button { + color: darken(@accent, 50%); + background: lighten(@accent, 5%); + &:hover { + background: darken(@accent, 5%); + } + } + } + + footer { + background-color: @accent; + color: darken(@accent, 50%); + } + + #__next > div { + background: @base; + } + + main { + background: @base; + color: @text; + + select { + border-color: @accent; + color: @text; + } + .chakra-select__icon { + color: @text; + } + .chakra-button { + color: @accent; + border-color: @accent; + + &:hover:not(:disabled) { + background-color: fade(@accent, 12%); + } + + // Auto translate button (clicked) (Dark and Light classes) + &.css-1huvcr7, + &.css-q22xb2 { + background: @accent; + color: @crust; + } + } + .chakra-stack { + border-color: @accent; + } + + textarea { + color: @text; + } + + .chakra-text { + color: @subtext1; + } + } + } +} diff --git a/styles/linkedin/README.md b/styles/linkedin/README.md new file mode 100644 index 0000000000..f6ed5635bd --- /dev/null +++ b/styles/linkedin/README.md @@ -0,0 +1,37 @@ + + + +

+ Logo
+ + Catppuccin for LinkedIn + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## ❤️‍🩹 Unmaintained +This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! + +## 💖 Past Maintainer +- [isabelroses](https://github.com/isabelroses) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/linkedin/catppuccin.user.less b/styles/linkedin/catppuccin.user.less new file mode 100644 index 0000000000..8c4428b84d --- /dev/null +++ b/styles/linkedin/catppuccin.user.less @@ -0,0 +1,499 @@ +/* ==UserStyle== +@name LinkedIn Catppuccin +@namespace github.com/catppuccin/userstyles/styles/linkedin +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/linkedin +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/linkedin/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alinkedin +@description Soothing pastel theme for LinkedIn +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("www.linkedin.com") { + :root:not(.theme--dark, .theme--mercado-dark) { + #catppuccin(@lightFlavor); + } + :root.theme--dark, + :root.theme--mercado-dark { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --black: @crust; + --black-a90: @crust; + --black-a75: @crust; + --black-a60: fade(@crust, 60%); + --black-a45: @crust; + --black-a30: @crust; + --black-a15: @crust; + --black-a12: @crust; + --black-a08: @crust; + --black-a04: @crust; + --black-a100: @crust; + + --white: @text; + --white-a06: @surface0; + --white-a12: @surface0; + --white-a18: @surface0; + --white-a25: @surface0; + --white-a30: @text; + --white-a40: @text; + --white-a45: @text; + --white-a55: @text; + --white-a60: @subtext0; + --white-a70: @text; + --white-a75: @text; + --white-a85: @text; + --white-a90: @text; + --white-a100: @text; + + --blue-10: @blue; + --blue-20: @blue; + --blue-30: @blue; + --blue-40: @blue; + --blue-50: @blue; + --blue-60: @blue; + --blue-70: @blue; + --blue-80: @blue; + --blue-90: @blue; + --blue-100: @blue; + --blue-50-a20: fade(@blue, 20%); + --blue-50-a25: fade(@blue, 25%); + --blue-50-a30: fade(@blue, 30%); + --blue-50-a40: fade(@blue, 40%); + --blue-60-a10: fade(@blue, 10%); + --blue-60-a15: fade(@blue, 85%); + --blue-60-a20: fade(@blue, 20%); + --blue-60-a25: fade(@blue, 25%); + --blue-60-a30: fade(@blue, 30%); + --blue-60-a35: fade(@blue, 35%); + --blue-60-a40: fade(@blue, 40%); + --blue-60-a45: fade(@blue, 45%); + --blue-70-a30: fade(@sapphire, 30%); + --blue-70-a40: fade(@sapphire, 40%); + --blue-70-a50: fade(@sapphire, 50%); + + --cool-gray-10: @mantle; + --cool-gray-20: @surface0; + --cool-gray-30: @mantle; + --cool-gray-40: @mantle; + --cool-gray-50: @mantle; + --cool-gray-60: @mantle; + --cool-gray-70: @mantle; + --cool-gray-80: @surface0; + --cool-gray-85: @mantle; + --cool-gray-90: @mantle; + --cool-gray-100: @mantle; + --cool-gray-60-a10: fade(@mantle, 10%); + --cool-gray-60-a15: fade(@mantle, 15%); + --cool-gray-60-a20: fade(@mantle, 20%); + --cool-gray-60-a25: fade(@mantle, 25%); + --cool-gray-60-a30: fade(@mantle, 30%); + --cool-gray-60-a35: fade(@mantle, 35%); + + --warm-gray-10: @overlay1; + --warm-gray-20: @overlay1; + --warm-gray-30: @overlay1; + --warm-gray-40: @overlay1; + --warm-gray-50: @overlay1; + --warm-gray-60: @overlay1; + --warm-gray-70: @overlay1; + --warm-gray-80: @overlay1; + --warm-gray-90: @overlay1; + --warm-gray-100: @overlay1; + --warm-gray-60-a10: fade(@overlay1, 10%); + --warm-gray-60-a15: fade(@overlay1, 15%); + --warm-gray-60-a20: fade(@overlay1, 20%); + --warm-gray-60-a25: fade(@overlay1, 25%); + --warm-gray-60-a30: fade(@overlay1, 30%); + --warm-gray-60-a35: fade(@overlay1, 35%); + + --warm-red-10: @maroon; + --warm-red-20: @maroon; + --warm-red-30: @maroon; + --warm-red-40: @maroon; + --warm-red-50: @maroon; + --warm-red-60: @maroon; + --warm-red-70: @maroon; + --warm-red-80: @maroon; + --warm-red-90: @maroon; + --warm-red-100: @maroon; + --warm-red-60-a10: fade(@maroon, 10%); + --warm-red-60-a15: fade(@maroon, 15%); + --warm-red-60-a20: fade(@maroon, 20%); + --warm-red-60-a25: fade(@maroon, 25%); + --warm-red-60-a30: fade(@maroon, 30%); + --warm-red-60-a35: fade(@maroon, 35%); + + --teal-10: @teal; + --teal-20: @teal; + --teal-30: @teal; + --teal-40: @teal; + --teal-50: @teal; + --teal-60: @teal; + --teal-70: @teal; + --teal-80: @teal; + --teal-90: @teal; + --teal-100: @teal; + --teal-50-a30: fade(@teal, 30%); + --teal-60-a10: fade(@teal, 10%); + --teal-60-a15: fade(@teal, 15%); + --teal-60-a20: fade(@teal, 20%); + --teal-60-a25: fade(@teal, 25%); + --teal-60-a30: fade(@teal, 30%); + --teal-60-a35: fade(@teal, 35%); + + --purple-10: @lavender; + --purple-20: @lavender; + --purple-30: @lavender; + --purple-40: @lavender; + --purple-50: @lavender; + --purple-60: @lavender; + --purple-70: @lavender; + --purple-80: @lavender; + --purple-90: @lavender; + --purple-100: @lavender; + --purple-40-a15: fade(@lavender, 15%); + --purple-60-a10: fade(@lavender, 10%); + --purple-60-a15: fade(@lavender, 15%); + --purple-60-a20: fade(@lavender, 20%); + --purple-60-a25: fade(@lavender, 25%); + --purple-60-a30: fade(@lavender, 30%); + --purple-60-a35: fade(@lavender, 35%); + --purple-70-a15: fade(@lavender, 15%); + + --system-red-10: @red; + --system-red-20: @red; + --system-red-30: @red; + --system-red-40: @red; + --system-red-50: @red; + --system-red-60: @red; + --system-red-70: @red; + --system-red-80: @red; + --system-red-90: @red; + --system-red-100: @red; + --system-red-60-a10: fade(@red, 10%); + --system-red-60-a15: fade(@red, 15%); + --system-red-60-a20: fade(@red, 20%); + --system-red-60-a25: fade(@red, 25%); + --system-red-60-a30: fade(@red, 30%); + --system-red-60-a35: fade(@red, 35%); + + --system-green-10: darken(@green, 20%); + --system-green-20: darken(@green, 20%); + --system-green-30: darken(@green, 20%); + --system-green-40: darken(@green, 20%); + --system-green-50: darken(@green, 20%); + --system-green-60: darken(@green, 20%); + --system-green-70: darken(@green, 20%); + --system-green-80: darken(@green, 20%); + --system-green-90: darken(@green, 20%); + --system-green-100: darken(@green, 20%); + --system-green-60-a10: fade(darken(@green, 20%), 10%); + --system-green-60-a15: fade(darken(@green, 20%), 15%); + --system-green-60-a20: fade(darken(@green, 20%), 20%); + --system-green-60-a25: fade(darken(@green, 20%), 25%); + --system-green-60-a30: fade(darken(@green, 20%), 30%); + --system-green-60-a35: fade(darken(@green, 20%), 35%); + + --pink-10: @pink; + --pink-20: @pink; + --pink-30: @pink; + --pink-40: @pink; + --pink-50: @pink; + --pink-60: @pink; + --pink-70: @pink; + --pink-80: @pink; + --pink-90: @pink; + --pink-100: @pink; + --pink-60-a10: fade(@pink, 10%); + --pink-60-a15: fade(@pink, 15%); + --pink-60-a20: fade(@pink, 20%); + --pink-60-a25: fade(@pink, 25%); + --pink-60-a30: fade(@pink, 30%); + --pink-60-a35: fade(@pink, 35%); + + --amber-10: @yellow; + --amber-20: @yellow; + --amber-30: @yellow; + --amber-40: @yellow; + --amber-50: @yellow; + --amber-60: @yellow; + --amber-70: @yellow; + --amber-80: @yellow; + --amber-90: @yellow; + --amber-100: @yellow; + --amber-30-a50: fade(@yellow, 50%); + --amber-60-a10: fade(@yellow, 10%); + --amber-60-a15: fade(@yellow, 15%); + --amber-60-a20: fade(@yellow, 20%); + --amber-60-a25: fade(@yellow, 25%); + --amber-60-a30: fade(@yellow, 30%); + --amber-60-a35: fade(@yellow, 35%); + + --copper-10: @rosewater; + --copper-20: @rosewater; + --copper-30: @rosewater; + --copper-40: @rosewater; + --copper-50: @rosewater; + --copper-60: @rosewater; + --copper-70: @rosewater; + --copper-80: @rosewater; + --copper-90: @rosewater; + --copper-100: @rosewater; + --copper-60-a10: fade(@rosewater, 10%); + --copper-60-a15: fade(@rosewater, 15%); + --copper-60-a20: fade(@rosewater, 20%); + --copper-60-a25: fade(@rosewater, 25%); + --copper-60-a30: fade(@rosewater, 30%); + --copper-60-a35: fade(@rosewater, 35%); + + --green-10: @green; + --green-20: @green; + --green-30: @green; + --green-40: @green; + --green-50: @green; + --green-60: @green; + --green-70: @green; + --green-80: @green; + --green-90: @green; + --green-100: @green; + --green-60-a10: fade(@green, 10%); + --green-60-a15: fade(@green, 15%); + --green-60-a20: fade(@green, 20%); + --green-60-a25: fade(@green, 25%); + --green-60-a30: fade(@green, 30%); + --green-60-a35: fade(@green, 35%); + + --sage-10: darken(@green, 40%); + --sage-20: darken(@green, 40%); + --sage-30: darken(@green, 40%); + --sage-40: darken(@green, 40%); + --sage-50: darken(@green, 40%); + --sage-60: darken(@green, 40%); + --sage-70: darken(@green, 40%); + --sage-80: darken(@green, 40%); + --sage-90: darken(@green, 40%); + --sage-100: darken(@green, 40%); + --sage-60-a10: fade(darken(@green, 40%), 10%); + --sage-60-a15: fade(darken(@green, 40%), 15%); + --sage-60-a20: fade(darken(@green, 40%), 20%); + --sage-60-a25: fade(darken(@green, 40%), 25%); + --sage-60-a30: fade(darken(@green, 40%), 30%); + --sage-60-a35: fade(darken(@green, 40%), 35%); + + --lime-10: lighten(@green, 20%); + --lime-20: lighten(@green, 20%); + --lime-30: lighten(@green, 20%); + --lime-40: lighten(@green, 20%); + --lime-50: lighten(@green, 20%); + --lime-60: lighten(@green, 20%); + --lime-70: lighten(@green, 20%); + --lime-80: lighten(@green, 20%); + --lime-90: lighten(@green, 20%); + --lime-100: lighten(@green, 20%); + --lime-60-a10: fade(lighten(@green, 20%), 10%); + --lime-60-a15: fade(lighten(@green, 20%), 15%); + --lime-60-a20: fade(lighten(@green, 20%), 20%); + --lime-60-a25: fade(lighten(@green, 20%), 25%); + --lime-60-a30: fade(lighten(@green, 20%), 30%); + --lime-60-a35: fade(lighten(@green, 20%), 35%); + + --camo-10: @accent; + --camo-20: @accent; + --camo-30: @accent; + --camo-40: @accent; + --camo-50: @accent; + --camo-60: @accent; + --camo-70: @accent; + --camo-80: @accent; + --camo-90: @accent; + --camo-100: @accent; + --camo-60-a10: fade(@accent, 10%); + --camo-60-a15: fade(@accent, 15%); + --camo-60-a20: fade(@accent, 20%); + --camo-60-a25: fade(@accent, 25%); + --camo-60-a30: fade(@accent, 30%); + --camo-60-a35: fade(@accent, 35%); + + --smoke-10: @surface1; + --smoke-20: @surface1; + --smoke-30: @surface1; + --smoke-40: @surface1; + --smoke-50: @surface1; + --smoke-60: @surface1; + --smoke-70: @surface1; + --smoke-80: @surface1; + --smoke-90: @surface1; + --smoke-100: @surface1; + --smoke-60-a10: fade(@surface1, 10%); + --smoke-60-a15: fade(@surface1, 15%); + --smoke-60-a20: fade(@surface1, 20%); + --smoke-60-a25: fade(@surface1, 25%); + --smoke-60-a30: fade(@surface1, 30%); + --smoke-60-a35: fade(@surface1, 35%); + + --lavender-10: @lavender; + --lavender-20: @lavender; + --lavender-30: @lavender; + --lavender-40: @lavender; + --lavender-50: @lavender; + --lavender-60: @lavender; + --lavender-70: @lavender; + --lavender-80: @lavender; + --lavender-90: @lavender; + --lavender-100: @lavender; + --lavender-60-a10: fade(@lavender, 10%); + --lavender-60-a15: fade(@lavender, 15%); + --lavender-60-a20: fade(@lavender, 20%); + --lavender-60-a25: fade(@lavender, 25%); + --lavender-60-a30: fade(@lavender, 30%); + --lavender-60-a35: fade(@lavender, 35%); + + --mauve-10: @mauve; + --mauve-20: @mauve; + --mauve-30: @mauve; + --mauve-40: @mauve; + --mauve-50: @mauve; + --mauve-60: @mauve; + --mauve-70: @mauve; + --mauve-80: @mauve; + --mauve-90: @mauve; + --mauve-100: @mauve; + --mauve-60-a10: fade(@mauve, 10%); + --mauve-60-a15: fade(@mauve, 15%); + --mauve-60-a20: fade(@mauve, 20%); + --mauve-60-a25: fade(@mauve, 25%); + --mauve-60-a30: fade(@mauve, 30%); + --mauve-60-a35: fade(@mauve, 35%); + --mauve-80-a50: fade(@mauve, 50%); + + --system-gray-10: @surface0; + --system-gray-20: @surface0; + --system-gray-30: @surface0; + --system-gray-40: @surface0; + --system-gray-50: @surface0; + --system-gray-60: @surface0; + --system-gray-70: @surface0; + --system-gray-80: @surface0; + --system-gray-90: @surface0; + --system-gray-100: @surface0; + --system-gray-60-a10: fade(@surface0, 10%); + --system-gray-60-a15: fade(@surface0, 15%); + --system-gray-60-a20: fade(@surface0, 20%); + --system-gray-60-a25: fade(@surface0, 25%); + --system-gray-60-a30: fade(@surface0, 30%); + --system-gray-60-a35: fade(@surface0, 35%); + --system-gray-60-a40: fade(@surface0, 40%); + --system-gray-60-a45: fade(@surface0, 45%); + + --system-orange-10: @peach; + --system-orange-20: @peach; + --system-orange-30: @peach; + --system-orange-40: @peach; + --system-orange-50: @peach; + --system-orange-60: @peach; + --system-orange-70: @peach; + --system-orange-80: @peach; + --system-orange-90: @peach; + --system-orange-100: @peach; + --system-orange-60-a10: fade(@peach, 10%); + --system-orange-60-a15: fade(@peach, 15%); + --system-orange-60-a20: fade(@peach, 20%); + --system-orange-60-a25: fade(@peach, 25%); + --system-orange-60-a30: fade(@peach, 30%); + --system-orange-60-a35: fade(@peach, 35%); + + /* quality of life changes */ + --color-border-low-emphasis: @surface0; + + /* Codeblock fixes */ + pre { + --color-text-on-dark: @text; + --color-background-container-dark-tint: @crust; + } + + /* more accent */ + --voyager-color-background-badge-notification: @accent; + --color-signal-positive: @accent; + --color-checked: @accent; + --color-checked-hover: @accent; + --color-checked-active: @accent; + + /* fix for hover buttons */ + --artdeco-button-secondary-default-hover-background-color: fade( + @blue, + 20% + ); + + /* text on dark */ + --color-text-on-dark: @text; + + & when not(@flavor = latte) { + --color-element: @crust; + } + + & when (@flavor = latte) { + --black: @text; + --black-a90: @text; + --black-a75: @text; + --black-a45: @text; + --black-a30: @text; + --black-a60: @subtext0; + --black-a15: @text; + --black-a04: @text; + --black-a100: @text; + + --color-scrim: fade(@crust, 40%); + --color-icon-on-dark: @text; + + --white: @mantle; + --white-a06: @surface0; + --white-a12: @surface0; + --white-a18: @surface0; + --white-a25: @surface0; + --white-a30: @mantle; + --white-a40: @mantle; + --white-a45: @mantle; + --white-a55: @mantle; + --white-a60: @subtext0; + --white-a70: @mantle; + --white-a75: @mantle; + --white-a85: @mantle; + --white-a90: @mantle; + --white-a100: @mantle; + + --warm-gray-10: @base; + --warm-gray-20: @base; + --warm-gray-30: @base; + --warm-gray-40: @base; + --warm-gray-50: @base; + --warm-gray-60: @base; + --warm-gray-70: @base; + --warm-gray-80: @base; + --warm-gray-90: @base; + --warm-gray-100: @base; + --warm-gray-60-a10: fade(@base, 10%); + --warm-gray-60-a15: fade(@base, 15%); + --warm-gray-60-a20: fade(@base, 20%); + --warm-gray-60-a25: fade(@base, 25%); + --warm-gray-60-a30: fade(@base, 30%); + --warm-gray-60-a35: fade(@base, 35%); + } + + .share-promoted-detour-button-legacy { + background-color: @accent !important; + } + } +} diff --git a/styles/listenbrainz/README.md b/styles/listenbrainz/README.md new file mode 100644 index 0000000000..861cf38b41 --- /dev/null +++ b/styles/listenbrainz/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for ListenBrainz + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [00dani](https://github.com/00dani) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/listenbrainz/catppuccin.user.less b/styles/listenbrainz/catppuccin.user.less new file mode 100644 index 0000000000..f1872cf8ca --- /dev/null +++ b/styles/listenbrainz/catppuccin.user.less @@ -0,0 +1,694 @@ +/* ==UserStyle== +@name ListenBrainz Catppuccin +@namespace github.com/catppuccin/userstyles/styles/listenbrainz +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/listenbrainz +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/listenbrainz/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alistenbrainz +@description Soothing pastel theme for ListenBrainz +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("listenbrainz.org") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + // We can't control which theme is passed to Toastify's props from CSS, but + // we can replace the default theme with whatever colours we want. + --toastify-color-light: @overlay0; + --toastify-text-color-light: @text; + --toastify-color-info: @blue; + --toastify-color-success: @green; + --toastify-color-warning: @yellow; + --toastify-color-error: @red; + + body { + color: @text; + background-color: @base; + + nav[role="navigation"] { + .navbar-header .navbar-toggle { + border-color: @accent; + .icon-bar { + background-color: @accent; + } + } + + .navbar-logo > img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + #side-nav { + background-color: @mantle; + a, + a:visited { + color: @blue; + &:hover { + color: @sky; + } + } + + .search-bar input { + background-color: @surface0; + color: @text; + &:focus { + box-shadow: inset 1px 2px 4px @surface1; + ~ button { + box-shadow: inset -3px 2px 4px @surface2; + } + } + ~ button { + background-color: @surface1; + color: @text; + } + } + + .mobile-nav-fix { + background-color: transparent; + } + } + + #side-nav-overlay { + background-color: @crust; + } + } + } + + a { + color: @blue; + &:hover { + color: @sky; + } + &:visited:not(.btn) { + color: @lavender; + &:hover { + color: @sky; + } + } + } + + h2, + h3, + h4 { + color: @text; + } + + .text-muted, + .help-block { + color: @subtext0; + } + + .text-success { + color: @green; + } + + .text-danger { + color: @red; + } + + a > svg.fa-link { + color: @text; + } + + .form-control { + border-color: @base; + background-color: @surface0; + color: @text; + } + + .panel { + background-color: @surface0; + color: @text; + border-color: @surface1; + .panel-heading { + background-color: @surface1; + outline-color: @surface2; + } + } + + .well { + background-color: @surface0; + border-color: @mantle; + } + + .toggle-switch { + background-color: @surface0; + &::before { + background-color: @overlay0; + } + } + .toggle-checkbox:checked + .toggle-switch { + background-color: @surface1; + &::before { + background-color: @accent; + } + } + + .table { + tr { + > td, + > th { + border-color: @surface1; + } + } + + &.table-striped > tbody > tr:nth-of-type(2n+1) { + background-color: @surface0; + } + } + + .music-service-selection .music-service-option { + label { + background-color: @surface1; + border-color: fade(@green, 50%); + } + + input[type="radio"]:checked + label { + background-color: fade(@green, 50%); + &::after { + color: @green; + border-color: @green; + background-color: @surface1; + } + } + } + + .pill.secondary { + color: @text; + border-color: @subtext0; + } + + .btn-primary, + .btn-info, + .btn-outline, + .musicbrainz-profile-button, + .lb-follow-button.block, + .pill.secondary.active { + color: @crust; + background-color: @accent; + border-color: transparent; + + &:hover { + color: @crust; + background-color: darken(@accent, 5%); + } + } + + .open > .dropdown-toggle.btn-info { + color: @crust; + background-color: darken(@accent, 10%); + } + + .secondary-nav > ol.breadcrumb { + background-color: @mantle; + border-color: @crust; + > li.active { + color: @text; + border-color: transparent; + } + } + + .secondary-nav .nav.nav-tabs { + background-color: @mantle; + border-color: @crust; + > li { + background-color: @mantle; + border-color: @crust; + > a { + background-color: transparent; + border-color: @crust; + color: @subtext1; + &.active { + border-bottom-color: transparent; + } + } + &:hover { + background-color: @surface0; + } + + &.active { + background-color: @base; + border-bottom-color: transparent; + } + } + } + + @media (max-width: 991px) { + .secondary-nav::after { + background: linear-gradient(270deg, @crust, transparent); + } + } + + .listen-header h3 { + color: @subtext0; + &::after { + border-top-color: @surface1; + } + } + + .webSocket-box { + border-bottom-color: @mantle; + .read-more { + background-image: linear-gradient(to bottom, transparent, @base); + } + } + + .heart-actions() { + .love { + stroke: @text; + &.loved { + color: @red; + stroke: transparent; + } + &:hover { + color: transparent; + stroke: @red; + } + } + + .hate { + stroke: @text; + &.hated { + color: @mauve; + stroke: transparent; + } + &:hover { + color: transparent; + stroke: @mauve; + } + } + } + + .card { + background-color: @surface0; + border-color: transparent; + box-shadow: + fade(@surface0, 10%) 0 1px 1px, + fade(@surface0, 15%) 0 2px 2px, + fade(@surface0, 20%) 0 4px 4px; + + &#listen-count-card { + margin-bottom: 5px; + border-color: @surface1; + } + + &.listen-card { + .listen-thumbnail > div { + color: @accent; + background-color: @surface1; + border-top-left-radius: 7px; + border-bottom-left-radius: 7px; + } + + .listen-time { + color: @subtext0; + } + .listen-controls { + .btn.dropdown-toggle, + .btn.play-button, + .btn-transparent[title="Reset"] { + color: @text; + &:hover, + &.playing { + color: @accent; + } + } + + .heart-actions(); + } + + &.playing-now, + &.current-listen { + background-color: @surface1 !important; + + .listen-thumbnail > div { + background-color: @surface2; + height: 100%; + } + } + } + } + + hr, + #listen-count-card hr, + .card-user-sn hr { + border-top-color: @surface1; + } + + .follower-following-list, + .similar-users-list { + box-shadow: inset 0 11px 8px -10px @base; + > :not(:first-child) { + border-color: @surface1; + } + } + + .progress { + background-color: @surface1; + + .progress-bar.purple { + background-color: @mauve; + } + + .progress-bar.orange { + background-color: @peach; + } + + .progress-bar.red { + background-color: @red; + } + } + + .dropdown-menu { + background-color: @overlay0; + button, + a { + color: @text !important; + &:visited { + color: @text !important; + } + &:hover { + background-color: fade(@accent, 30%) !important; + } + } + } + + .pager li { + > a, + > a:focus, + > a:visited, + a:active, + > span { + background-color: @surface0; + border-color: @surface1; + + &:hover { + background-color: @surface1; + } + } + + > a, + > a:focus, + > a:visited, + > a:active { + color: @blue; + &:hover { + color: @sky; + } + } + + &.disabled { + > a, + > a:focus, + > a:visited, + > a:active, + > span { + color: @text; + background-color: @surface0; + &:hover { + background-color: inherit; + } + } + } + } + + .react-datetime-picker { + .react-datetime-picker__wrapper { + border-color: @mantle; + } + .react-calendar { + background-color: @surface0; + border-color: @surface1; + + .react-calendar__navigation, + .react-calendar__viewContainer { + button:disabled { + background-color: @surface2; + } + button:enabled:hover { + background-color: @surface1; + } + button:enabled:focus { + background-color: transparent; + } + + .react-calendar__tile--now { + background-color: @peach; + color: @crust; + &:enabled:hover { + background-color: @yellow; + } + } + + .react-calendar__tile--hasActive, + .react-calendar__tile--active { + color: @text; + background-color: fade(@accent, 40%); + &:enabled:hover { + background-color: fade(@accent, 50%); + } + } + } + + .react-calendar__month-view__days__day--neighboringMonth { + color: @subtext0; + } + + .react-calendar__month-view__days__day--weekend { + color: @red; + } + } + } + + .stats-full-width-graph { + line { + stroke: @subtext0 !important; + } + + text { + fill: @text !important; + } + + &.user-artist-map > div + div > div, + svg + div > div { + background-color: @overlay0 !important; + color: @text !important; + } + } + rect[fill="#353070"] { + fill: @mauve; + } + rect[fill="#eb743b"] { + fill: @peach; + } + .badge-info { + background-color: @surface1; + color: @text; + } + + .modal-content { + background-color: @mantle; + button.close { + color: @text; + opacity: 1; + text-shadow: none; + } + + .track-search { + #recording-mbid, + .track-search-dropdown { + background-color: @surface0; + color: @text; + border-color: @crust; + } + } + + .modal-header, + .modal-footer { + border-color: @crust; + } + } + + .explore-card { + background-color: @surface0; + filter: drop-shadow(0 4px 4px fade(@overlay0, 25%)); + .explore-card-img { + border-color: @surface0; + } + .explore-card-text { + background-color: @surface0; + } + } + + .sidebar { + background-color: @mantle; + .sidebar-header { + background-color: @crust; + color: @text; + } + .sidenav-content-grid { + background: transparent; + } + } + .rc-slider-rail { + background-color: @surface1; + } + .rc-slider-handle { + background-color: @accent; + &.rc-slider-handle-dragging { + background-color: @accent; + border-color: @accent; + } + } + .rc-slider-mark-text { + color: @subtext0; + } + .release-card-grid-title { + background-color: transparent; + &::before, + &::after { + border-color: @surface0; + } + } + + #homepage-container { + @homepage-bg: linear-gradient(288deg, @peach 16.96%, @mauve 98.91%); + @flipped-blue: if( + @flavor = latte, + @catppuccin[@mocha][@blue], + @catppuccin[@latte][@blue] + ); + @flipped-sky: if( + @flavor = latte, + @catppuccin[@mocha][@sky], + @catppuccin[@latte][@sky] + ); + + .homepage-upper { + background: @homepage-bg; + + h1 { + color: @crust; + } + .homepage-info { + h1 { + color: @text; + } + + .homepage-info-links > a { + color: @blue; + &:hover { + color: @sky; + } + } + } + + .homepage-upper-grey-box { + background-color: @base; + } + } + + .homepage-lower { + background: @homepage-bg; + h1 { + color: @text; + } + + .homepage-info { + color: @crust; + h1 { + color: @crust; + } + + .homepage-info-links > a { + color: @flipped-blue; + &:hover { + color: @flipped-sky; + } + } + } + + .homepage-lower-grey-box { + background-color: @base; + } + } + + .homepage-info { + color: @text; + .create-account-button { + background-color: @accent; + color: @crust; + &:hover { + background-color: darken(@accent, 5%); + } + } + } + } + + #brainz-player { + background-color: @mantle; + border-color: @crust; + + .progress { + background-color: @surface1; + > .progress-bar { + background-color: @accent; + } + } + + .no-album-art { + background-color: transparent; + } + + .controls > .btn-link, + .actions > a { + color: @accent; + } + + .actions { + .heart-actions(); + + .fa-ellipsis-vertical { + stroke: @accent; + } + } + + .dropup-content { + .dropdown-menu(); + } + } + + .footer { + background-color: @mantle; + color: @text; + border-color: @crust; + .color-gray { + color: @subtext0; + } + .section-line { + border-color: @crust; + } + } + } +} diff --git a/styles/lobste.rs/README.md b/styles/lobste.rs/README.md new file mode 100644 index 0000000000..06369d1b28 --- /dev/null +++ b/styles/lobste.rs/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Lobsters + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [steinuil](https://github.com/steinuil) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/lobste.rs/catppuccin.user.less b/styles/lobste.rs/catppuccin.user.less new file mode 100644 index 0000000000..167563f544 --- /dev/null +++ b/styles/lobste.rs/catppuccin.user.less @@ -0,0 +1,112 @@ +/* ==UserStyle== +@name Lobsters Catppuccin +@namespace github.com/catppuccin/userstyles/styles/lobste.rs +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/lobste.rs +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lobste.rs/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alobste.rs +@description Soothing pastel theme for Lobsters +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("lobste.rs") { + html:has(head > link[rel="stylesheet"][href^="/assets/system-"]) { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + html:has(head > link[rel="stylesheet"][href^="/assets/light-"]) { + #catppuccin(@lightFlavor); + } + + html:has(head > link[rel="stylesheet"][href^="/assets/dark-"]) { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --color-bg: @base; + + --color-fg: @text; + --color-fg-shape: @surface2; + + --color-tag-bg: fade(@yellow, 20%); + --color-tag-border: fade(@yellow, 20%); + + --color-lobsters-tag-special-bg: fade(@red, 30%); + --color-lobsters-tag-special-border: fade(@red, 30%); + + --color-tag-media-bg: fade(@blue, 20%); + --color-tag-media-border: fade(@blue, 30%); + + --color-tag-meta-bg: @surface0; + --color-tag-meta-border: @surface2; + + --color-bg-target: fade(@accent, 20%); + + --color-fg-affirmative: @green; + --color-fg-accent: @accent; + --color-fg-author: @blue; + + --color-fg-contrast-7-5: @blue; + + --color-fg-link: @blue; + --color-fg-link-visited: @lavender; + + --color-fg-contrast-4-5: @subtext0; + --color-fg-contrast-5: @subtext1; + --color-fg-contrast-6: @subtext1; + --color-fg-contrast-10: @text; + --color-fg-contrast-13: @text; + + --color-box-bg: @mantle; + --color-button-bg: @mantle; + --color-button-bg-shaded: @surface0; + --color-box-border: @surface0; + --color-box-border-focus: @accent; + --color-box-bg-shaded: @mantle; + + --color-mobile-story-liner-bg: @base; + --color-mobile-story-comments-bubble-fill: @surface1; + + --color-mobile-story-comments-bubble-fill-zero: @surface0; + + --color-table-header-bg: @surface0; + --color-table-header-border: @surface1; + --color-table-row-bg-even: @mantle; + --color-table-row-bg-odd: @crust; + --color-table-row-border: @base; + + --color-flash-bg-success: fade(@green, 30%); + --color-fg-negative: @red; + + hr { + color: @surface2; + } + + #logo { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + background-color: transparent !important; + &::after { + background: none; + } + } + } +} diff --git a/styles/mastodon/README.md b/styles/mastodon/README.md index e87d9850ae..b85c75f385 100644 --- a/styles/mastodon/README.md +++ b/styles/mastodon/README.md @@ -10,48 +10,20 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- -## Usage -Add urls to `@-moz-document domain("url")` with url being the chosen server - +## Usage -## 🙋 FAQ -- Q: **The theme does not look the same as the preview?** - A: Your Mastodon instance may be using its own custom CSS, which is changing the look of the theme -- Q: **Theme is not working?** - A: One solution might be changing the theme from the `preferences > application > theme` to light or dark. +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). -## 💝 Current Maintainer(s) -- [Isabel](https://github.com/isabelroses) +## 💝 Current Maintainer +- [comfysage](https://github.com/comfysage) -## 💖 Past Maintainer(s) -- [Andreas Grafen](https://github.com/andreasgrafen) +## 💖 Past Maintainers +- [unseen-ninja](https://github.com/unseen-ninja) +- [isabelroses](https://github.com/isabelroses)   diff --git a/styles/mastodon/assets/catwalk.webp b/styles/mastodon/assets/catwalk.webp deleted file mode 100644 index e0794f786e..0000000000 --- a/styles/mastodon/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:694daa0160b9eb3f3cff089c66bf809825700cae59bf2fb6082d808f532259cb -size 485508 diff --git a/styles/mastodon/assets/frappe.webp b/styles/mastodon/assets/frappe.webp deleted file mode 100644 index c728174fa4..0000000000 --- a/styles/mastodon/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9a5198dd79d625ed93914eeadefb864058561a74db07de20443f89193628d6ef -size 82114 diff --git a/styles/mastodon/assets/latte.webp b/styles/mastodon/assets/latte.webp deleted file mode 100644 index 7e49d1396f..0000000000 --- a/styles/mastodon/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:03c91dac485a92987216e214aacfd3b6e97c93deea605e509aa0d227d62620fe -size 80210 diff --git a/styles/mastodon/assets/macchiato.webp b/styles/mastodon/assets/macchiato.webp deleted file mode 100644 index b409a94f3f..0000000000 --- a/styles/mastodon/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e2207dfd8c27f6b72504c23b49d615d98ceb19e32ee15a2ed6ffad4dd12dc71a -size 84122 diff --git a/styles/mastodon/assets/mocha.webp b/styles/mastodon/assets/mocha.webp deleted file mode 100644 index 836394d021..0000000000 --- a/styles/mastodon/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3c12b15d8ed4b48c6f56912974abe5aa8de4e40e7fad3a585d010cf21cbcc4f9 -size 85350 diff --git a/styles/mastodon/catppuccin.user.css b/styles/mastodon/catppuccin.user.css deleted file mode 100644 index 8684c644ea..0000000000 --- a/styles/mastodon/catppuccin.user.css +++ /dev/null @@ -1,682 +0,0 @@ -/* ==UserStyle== -@name Mastodon Catppuccin -@namespace github.com/catppuccin/userstyles/styles/mastodon -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/mastodon -@version 1.1.5 -@description Soothing pastel theme for Mastodon -@author Catppuccin -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mastodon/catppuccin.user.css -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire*", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] -==/UserStyle== */ -@-moz-document domain("mstdn.social"), -domain("fosstodon.org"), -domain("tech.lgbt"), -domain("mastodon.social") { - .theme-mastodon-light, - :root:has(.theme-mastodon-light), - .skin-mastodon-light, - :root:has(.skin-mastodon-light) { - #mastodon(@lightFlavor, @accentColor); - } - - .theme-default, - .theme-contrast, - :root:has(.theme-default), - :root:has(.theme-contrast), - .skin-default, - .skin-contrast, - :root:has(.skin-default), - :root:has(.skin-contrast) { - #mastodon(@darkFlavor, @accentColor); - } - - #mastodon(@lookup, @accent) { - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-Color: @catppuccin[@@lookup][@@accent]; - - body, - .tabs-bar__wrapper, - .admin-wrapper .sidebar-wrapper__inner { - background: @crust; - color: @text; - } - - .account__header__bio .account__header__fields dt { - background: transparent; - } - - .search-popout, - .search-popout em, - .dismissable-banner__message, - .account__header__bio .account__header__fields dt, - .account__section-headline a.active, - .account__section-headline button.active, - .notification__filter-bar a.active, - .notification__filter-bar button.active, - .account__header__bio .account__header__content, - .navigation-bar, - .column-link__badge, - .column-subheading, - .account__display-name strong, - .status__display-name strong, - .notification__message, - .public-layout .public-account-bio .account__header__content, - .reply-indicator__content, - .status__content, - .card__bar .display-name strong { - color: @text; - } - - .search-popout span, - .link-footer p, - .link-footer p a { - color: @subtext1; - } - - .account__header__tabs__name h1 small, - .account__header__bio .account__header__fields dd, - .display-name__account, - .status__relative-time, - .empty-column-indicator, - .follow_requests-unlocked_explanation, - .account .account__display-name, - .label_input .search__input, - .search__input:focus, - .account__header__fields dt { - color: @subtext0; - } - - .compose-panel hr, - .navigation-panel hr { - border-top-color: @subtext0; - } - - .trends__item, - .status, - .getting-started__trends h4, - .trends__item__name span, - .story { - border-color: @surface0; - } - - .account__header__tabs__name h1, - .account__header__content a, - .account__header__bio .account__header__fields a, - .empty-column-indicator a, - .follow_requests-unlocked_explanation a, - .column-back-button, - .icon-button.inverted, - .text-icon-button, - .icon-button.active, - .public-layout .public-account-bio .account__header__fields a, - .column-header__back-button, - .navigation-bar strong, - .reply-indicator__content a.unhandled-link, - .status__content a.unhandled-link { - color: @accent-Color; - } - - .icon-button, - .notification__message .fa { - color: @surface2; - } - - .icon-button:active, - .icon-button:focus, - .icon-button:hover, - .text-icon-button:active, - .text-icon-button:focus, - .text-icon-button:hover, - .icon-button.inverted:active, - .icon-button.inverted:focus, - .icon-button.inverted:hover, - .public-layout .public-account-bio .account__header__fields a:hover { - color: @accent-Color; - } - - .ui__header, - .column-header, - .column-header__button, - .column-header__back-button, - .column-back-button, - .drawer__header, - .account__section-headline, - .notification__filter-bar, - .account__section-headline button, - .notification__filter-bar button, - .account__header, - .search__input, - .search__input:focus, - .column-link__badge, - .column-subheading, - .public-layout .header, - .public-layout .public-account-header__bar::before, - .account__header__fields, - .account__header__fields dt, - .account__header__fields - dd:not(.account__header__bio .account__header__fields dd), - .focusable:focus, - .admin-wrapper .sidebar ul .simple-navigation-active-leaf .selected { - border-color: @mantle; - background: @surface1; - } - - .admin-wrapper .sidebar ul a:hover, - .admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover { - background: @surface0; - } - - .dismissable-banner { - border-color: @surface1; - background: @base; - } - - .theme-mastodon-light .account__header__bar, - .theme-mastodon-light .column-header__back-button, - .account__header__bio .account__header__fields dl, - .account__header__bio .account__header__fields, - .empty-column-indicator, - .column > .scrollable, - .nothing-here, - .public-layout .public-account-bio, - .hero-widget__text, - body.admin, - .admin-wrapper .sidebar ul a.selected, - .admin-wrapper .sidebar ul ul { - border-color: @mantle; - background: @base; - } - - .public-layout .public-account-header__tabs__tabs .counter::after { - border-color: @accent-Color; - } - - .public-layout .public-account-header__tabs__tabs .counter.active::after { - border-color: @accent-Color; - } - - .account, - .load-gap { - border-color: @mantle; - } - - .account__section-headline a.active::after { - border-color: transparent transparent @base; - } - - .account__section-headline a.active::before, - .account__section-headline button.active::after, - .account__section-headline button.active::before, - .notification__filter-bar a.active::after, - .notification__filter-bar a.active::before, - .notification__filter-bar button.active::after, - .notification__filter-bar button.active::before { - border-color: transparent transparent @mantle; - } - - .search-popout, - .drawer__header a:hover, - .column-header__button:hover, - .account__section-headline button:hover, - .notification__filter-bar button:hover, - .account__section-headline a:hover { - background: @surface2; - } - - .column-link .active, - .column-link--transparent.active, - .column-link--transparent:focus, - .column-link:focus { - color: @accent-Color; - } - - .column-link--transparent:hover, - .column-link:hover { - color: @accent-Color; - } - - .follow_requests-unlocked_explanation { - background: @base; - } - - .status.collapsed .status__content:after { - background: linear-gradient(fadeout(@base, 100), @base); - } - - .button.button-tertiary:focus, - .button.button-tertiary:hover, - .button.button-tertiary:active { - color: @base; - } - - .button.button-tertiary { - border-color: @accent-Color; - } - - .button, - .button.button-tertiary, - .button.logo-button { - background: @accent-Color; - color: @base; - } - - .button.logo-button svg { - fill: currentColor; - } - - .public-layout .header .nav-button { - background-color: @surface1; - } - - .public-layout .header .nav-button:hover { - background-color: @surface2; - } - - .button.button-secondary:active, - .button.button-secondary:focus, - .button.button-secondary:hover { - border-color: @accent-Color; - color: @base; - transition: 0.4s; - } - - .button:active, - .button:focus, - .button:hover, - .button.button-tertiary:active, - .button.button-tertiary:focus, - .button.button-tertiary:hover, - .button.logo-button:active, - .button.logo-button:focus, - .button.logo-button:hover { - background: @accent-Color; - } - - .drawer__inner, - .drawer__inner__mastodon { - background-color: @base; - } - - .compose-form .compose-form__modifiers, - .compose-form .autosuggest-textarea__textarea, - .compose-form .spoiler-input__input { - background: @surface1; - color: @text; - } - - .compose-form .autosuggest-textarea__textarea::placeholder { - color: @subtext0; - } - - .compose-form .compose-form__buttons-wrapper { - background: @surface0; - } - - .load-more:hover { - background-color: @mantle; - } - - - .character-counter { - color: @subtext0; - } - - .public-layout .header, - .hero-widget, - .public-layout .public-account-header, - .public-layout .public-account-bio, - .nothing-here { - box-shadow: none; - } - - .emoji-picker-dropdown__menu { - background: @surface1; - color: @text; - * { - border-color: @overlay0; - } - .emoji-mart-anchor-bar { - background: @accent-Color; - } - .emoji-mart-anchor-selected { - color: @accent-Color !important; - } - .emoji-mart-anchor { - color: @surface2; - } - .emoji-mart-search input { - color: @text; - &::placeholder { - color: @text; - } - } - .emoji-mart-bar:first-child { - color: @text; - background: @surface0; - } - .emoji-mart-search, .emoji-mart-scroll, .emoji-mart-category-label span { - color: @text; - background: @surface1; - } - } - - .dropdown-menu__arrow:before, - .dropdown-menu__item a, - .dropdown-menu__item button, - .dropdown-menu__container__list, - .dropdown-menu.bottom { - background: @surface0; - color: @text; - } - - .dropdown-menu__item a:hover, - .dropdown-menu__item button:hover { - background: @surface1; - } - - .input-copy, - .simple_form input[type="text"], - .simple_form textarea, - .simple_form .block-button, - .simple_form .button, - .simple_form button { - background: @mantle; - color: @text; - } - - .simple_form .block-button:hover, - .simple_form .button:hover, - .simple_form button:hover { - background: @surface0; - } - - .simple_form .input.with_label .label_input > label, - .simple_form select, - .accounts-table__count, - .simple_form textarea { - color: @text; - } - - .simple_form textarea, - .simple_form input[type="password"], - .simple_form input[type="number"], - .simple_form input[type="text"] { - border: 1px solid @crust; - } - - .simple_form input[type="email"]:required:valid { - border: 1px solid @green; - } - - .simple_form input[type="password"], - .simple_form input[type="number"], - .simple_form input[type="email"]:required:valid, - .simple_form - input[type="password"]:required:invalid:not(:placeholder-shown) { - color: @text; - background: @mantle; - } - - .simple_form - input[type="password"]:required:invalid:not(:placeholder-shown) { - border: 1px solid @red; - } - - .simple_form select { - background: @mantle - url("data:image/svg+xml;utf8,") - no-repeat right 8px center/auto 16px; - border: 1px solid @crust; - } - - .simple_form input[type="datetime-local"]:active, - .simple_form input[type="datetime-local"]:focus, - .simple_form input[type="email"]:active, - .simple_form input[type="email"]:focus, - .simple_form input[type="number"]:active, - .simple_form input[type="number"]:focus, - .simple_form input[type="password"]:active, - .simple_form input[type="password"]:focus, - .simple_form input[type="text"]:active, - .simple_form input[type="text"]:focus, - .simple_form input[type="url"]:active, - .simple_form input[type="url"]:focus, - .simple_form textarea:active, - .simple_form textarea:focus { - border-color: @accent-Color !important; - background: @mantle !important; - color: @text !important; - } - - .table > thead > tr > th { - border-color: @accent-Color !important; - } - - .batch-table__toolbar, - .table > thead > tr > th { - background: @surface0 !important; - color: @text !important; - } - - .simple_form input[type="datetime-local"]:hover, - .simple_form input[type="email"]:hover, - .simple_form input[type="number"]:hover, - .simple_form input[type="password"]:hover, - .simple_form input[type="text"]:hover, - .simple_form input[type="url"]:hover, - .simple_form textarea:hover { - background: @mantle !important; - border-color: @accent-Color !important; - transition: 0.4s; - } - - .batch-table__row { - background: @surface1; - } - - .batch-table__row:hover, - .batch-table__row:nth-child(2n):hover { - background: @surface2; - } - - .batch-table__row:nth-child(2n), - .table > tbody > tr > td { - background: @surface0; - } - - .table > thead > tr > th { - border-bottom: 2px solid @surface0; - } - - .positive-hint { - color: @green !important; - } - - .card__bar { - background: @surface0; - } - - .reply-indicator { - background: @surface0; - color: @text; - a, - .display-name__html { - color: @accent-Color; - } - } - - /* glitch support */ - .glitch { - .local-settings__navigation { - background: @base; - .active { - background: @accent-Color; - color: @base; - } - .close { - background: @red; - color: @base; - } - .local-settings__navigation__item { - border-bottom-color: @surface1; - &:not(.active, .close) { - background: @base; - color: @text; - } - } - } - .local-settings, .local-settings__page { - background: @surface0; - color: @text; - span.hint { - color: @subtext0; - } - } - } - } -} diff --git a/styles/mastodon/catppuccin.user.less b/styles/mastodon/catppuccin.user.less new file mode 100644 index 0000000000..815ea2d98e --- /dev/null +++ b/styles/mastodon/catppuccin.user.less @@ -0,0 +1,121 @@ +/* ==UserStyle== +@name Mastodon Catppuccin +@namespace github.com/catppuccin/userstyles/styles/mastodon +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/mastodon +@version 2026.07.08 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mastodon/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amastodon +@description Soothing pastel theme for Mastodon +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("mastodon.social"), domain("fosstodon.org") { + [data-color-scheme="light"] { + #catppuccin(@lightFlavor); + } + [data-color-scheme="dark"] { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --color-bg-primary: @base; + --color-bg-secondary: @surface0; + --color-bg-tertiary: @surface1; + --color-bg-inverted: @text; + + --color-text-primary: @text; + --color-text-secondary: @subtext1; + --color-text-tertiary: @subtext0; + --color-text-inverted: @base; + + /* Brand */ + --color-bg-brand-base: @accent; + --color-bg-brand-base-hover: darken(@accent, 5%); + --color-bg-brand-soft: fade(@accent, 40%); + --color-bg-brand-softest: fade(@accent, 15%); + + --color-text-brand: @accent; + --color-text-on-brand-base: @base; + --color-text-brand-on-inverted: @accent; + + /* States */ + + // Error + --color-bg-error-base: @red; + --color-bg-error-base-hover: darken(@red, 5%); + --color-bg-error-soft: fade(@red, 40%); + --color-bg-error-softest: fade(@red, 15%); + --color-text-error: @red; + --color-text-on-error-base: @base; + + // Warning + --color-bg-warning-base: @yellow; + --color-bg-warning-soft: fade(@yellow, 40%); + --color-bg-warning-softest: fade(@yellow, 15%); + --color-text-warning: @yellow; + --color-text-on-warning-base: @base; + + // Success + --color-bg-success-base: @green; + --color-bg-success-soft: fade(@green, 40%); + --color-bg-success-softest: fade(@green, 15%); + --color-text-success: @green; + --color-text-on-success-base: @base; + + // Disabled + --color-bg-disabled: @overlay1; + --color-text-disabled: @overlay1; + --color-text-on-disabled: @subtext0; + + /* Borders */ + --color-border-primary: @surface2; + --color-border-brand: @accent; + --color-border-brand-soft: fade(@accent, 50%); + --color-border-error: @red; + --color-border-error-soft: fade(@red, 50%); + --color-border-warning-soft: fade(@yellow, 50%); + --color-border-success-soft: fade(@green, 50%); + + /* Other */ + --color-shadow-primary: fade(@mantle, 30%); + --color-bg-overlay-base: fade(@text, 60%); + --color-bg-overlay-highlight: fade(@text, 5%); + + /* Images (alt text, hide/spoilers) */ + --color-bg-media-base: @crust; + --color-text-on-media: @text; + --color-border-media: @surface1; + + /* Actions (bookmarking, favoriting) */ + --color-text-bookmark-highlight: @teal; + --color-text-favourite-highlight: @yellow; + + .logo { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + /* Verified badge icon (e.g. profile fields) */ + svg.icon-verified { + path[fill="url(#VerifiedGradient)"] { + fill: @green !important; + } + path[stroke="#fff"] { + stroke: @base !important; + } + } + } +} diff --git a/styles/mdbook/README.md b/styles/mdbook/README.md new file mode 100644 index 0000000000..4344a0db2f --- /dev/null +++ b/styles/mdbook/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for mdBook + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/mdbook/catppuccin.user.less b/styles/mdbook/catppuccin.user.less new file mode 100644 index 0000000000..0c07c560bb --- /dev/null +++ b/styles/mdbook/catppuccin.user.less @@ -0,0 +1,108 @@ +/* ==UserStyle== +@name mdBook Catppuccin +@namespace github.com/catppuccin/userstyles/styles/mdbook +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/mdbook +@version 2026.04.09 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mdbook/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amdbook +@description Soothing pastel theme for mdBook +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("rust-lang.github.io"), + domain("doc.rust-lang.org"), + domain("rust-book.cs.brown.edu"), + domain("rustc-dev-guide.rust-lang.org"), + domain("forge.rust-lang.org"), + domain("lang-team.rust-lang.org"), + domain("doc.redox-os.org"), + url-prefix("https://lukaswirth.dev/tlborm/") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.css"); + + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --bg: @base; + --fg: @text; + --sidebar-bg: @mantle; + --sidebar-fg: @text; + --sidebar-non-existant: @overlay0; + --sidebar-active: @blue; + --sidebar-spacer: @overlay0; + --scrollbar: @overlay0; + --icons: @overlay0; + --icons-hover: @overlay2; + --links: @blue; + --inline-code-color: @text; + --theme-popup-bg: @mantle; + --theme-popup-border: @overlay0; + --theme-hover: @overlay0; + --quote-bg: @mantle; + --quote-border: @crust; + --table-border-color: @surface0; + --table-header-bg: mix(@accent, @base, 30%); + --table-alternate-bg: @mantle; + --searchbar-border-color: @surface0; + --searchbar-bg: @mantle; + --searchbar-fg: @text; + --searchbar-shadow-color: @crust; + --searchresults-header-fg: @text; + --searchresults-border-color: @surface2; + --searchresults-li-bg: @base; + --sidebar-header-border-color: @lavender; + --search-mark-bg: @peach; + --warning-border: @peach; + --copy-button-filter: @subtext0-filter; + --copy-button-filter-hover: @blue-filter; + --blockquote-note-color: @blue; + --blockquote-tip-color: @green; + --blockquote-important-color: @mauve; + --blockquote-warning-color: @yellow; + --blockquote-caution-color: @red; + /* https://github.com/cognitive-engineering-lab/mdbook-quiz */ + --mdbook-incorrect: @red; + --mdbook-correct: @green; + + code.hljs { + color: @text; + background: @mantle; + } + blockquote blockquote { + border-top-color: @surface2; + border-bottom-color: @surface2; + } + hr { + color: @surface2; + } + del { + color: @overlay2; + } + .ace_gutter { + color: @overlay1; + background: @mantle; + } + .ace_gutter-active-line.ace_gutter-cell { + color: @pink; + background: @mantle; + } + } +} diff --git a/styles/mdn/README.md b/styles/mdn/README.md new file mode 100644 index 0000000000..b4fa3e6a4e --- /dev/null +++ b/styles/mdn/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for MDN + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [soya-daizu](https://github.com/soya-daizu) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/mdn/catppuccin.user.less b/styles/mdn/catppuccin.user.less new file mode 100644 index 0000000000..3cda4d880e --- /dev/null +++ b/styles/mdn/catppuccin.user.less @@ -0,0 +1,151 @@ +/* ==UserStyle== +@name MDN Catppuccin +@namespace github.com/catppuccin/userstyles/styles/mdn +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/mdn +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mdn/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amdn +@description Soothing pastel theme for MDN +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +#catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --color-text-primary: @text; + --color-text-secondary: @subtext0; + --color-background-page: @base; + --color-background-primary: @mantle; + --color-background-secondary: @surface0; + --color-link-normal: @blue; + --color-link-visited: @mauve; + --color-border-primary: @surface1; + --color-border-secondary: @overlay2; // used for icons + --color-border-active: @accent; + --color-area-background: fade(@accent, 25%); + --color-area-highlight-border: @accent; + --color-area-link: @accent; + --color-background-red: fade(@red, 25%); + --color-background-orange: fade(@peach, 25%); + --color-background-yellow: fade(@yellow, 25%); + --color-background-green: fade(@green, 25%); + --color-background-blue: fade(@blue, 25%); + --color-background-purple: fade(@mauve, 25%); + --color-white: @text; + --color-white-alpha-25: fade(@text, 25%); + --color-white-alpha-75: fade(@text, 75%); + --color-black: @crust; + --color-black-alpha-25: fade(@crust, 25%); + --color-black-alpha-75: fade(@crust, 75%); + + --color-gray-90: hsl(hue(@base), saturation(@base), 90%); + --color-gray-80: hsl(hue(@base), saturation(@base), 80%); + --color-gray-60: hsl(hue(@base), saturation(@base), 60%); + --color-gray-40: hsl(hue(@base), saturation(@base), 40%); + --color-gray-20: hsl(hue(@base), saturation(@base), 20%); + --color-gray-10: hsl(hue(@base), saturation(@base), 10%); + --color-gray-05: hsl(hue(@base), saturation(@base), 5%); + #__color-scale(@id, @color) { + --color-@{id}-90: hsl(hue(@color), saturation(@color), 90%); + --color-@{id}-80: hsl(hue(@color), saturation(@color), 80%); + --color-@{id}-50: hsl(hue(@color), saturation(@color), 50%); + --color-@{id}-20: hsl(hue(@color), saturation(@color), 20%); + --color-@{id}-10: hsl(hue(@color), saturation(@color), 10%); + } + #__color-scale(red, @red); + #__color-scale(orange, @peach); + #__color-scale(yellow, @yellow); + #__color-scale(green, @green); + #__color-scale(blue, @blue); + #__color-scale(purple, @mauve); + + .baseline-indicator { + --baseline-bg: @surface0; + --baseline-engine-bg: @base; + --baseline-check: @green; + --baseline-cross: @peach; + + @darker: fade(@peach, 20%); + @svg: escape( + '' + ); + --baseline-img: url("data:image/svg+xml,@{svg}"); + + &.high { + --baseline-bg: fade(@green, 20%); + --baseline-engine-bg: fade(@green, 20%); + --baseline-check: @green; + + @darker: fade(@green, 20%); + @svg: escape( + '' + ); + --baseline-img: url("data:image/svg+xml,@{svg}"); + } + + &.low { + --baseline-bg: fade(@blue, 20%); + --baseline-engine-bg: fade(@blue, 20%); + --baseline-check: @blue; + --baseline-pill-bg: @blue; + --baseline-pill-color: @base; + + @darker: fade(@blue, 20%); + @svg: escape( + '' + ); + --baseline-img: url("data:image/svg+xml,@{svg}"); + } + } +} + +@-moz-document domain("developer.mozilla.org") { + @import url("https://prismjs.catppuccin.com/variables.important.css"); + + .light { + #catppuccin(@lightFlavor); + } + + .dark { + #catppuccin(@darkFlavor); + } + + /* stylelint-disable selector-not-notation */ + :root:not(.light):not(.dark) { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + /* stylelint-enable selector-not-notation */ +} + +@-moz-document domain("interactive-examples.mdn.mozilla.net") { + .theme-light { + #catppuccin(@lightFlavor); + } + .theme-dark { + #catppuccin(@darkFlavor); + } + + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } +} diff --git a/src/generate/templates/userstyle.md b/styles/microsoft-word/README.md similarity index 61% rename from src/generate/templates/userstyle.md rename to styles/microsoft-word/README.md index dfe5f242cc..923e100fac 100644 --- a/src/generate/templates/userstyle.md +++ b/styles/microsoft-word/README.md @@ -4,43 +4,23 @@

Logo
- $TITLE + Catppuccin for Microsoft Word

- - + +

-

- -

+## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## ❤️‍🩹 Unmaintained +This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- -$USAGE - -$FAQ - -$COLLABORATORS   diff --git a/styles/microsoft-word/catppuccin.user.less b/styles/microsoft-word/catppuccin.user.less new file mode 100644 index 0000000000..019ee792cd --- /dev/null +++ b/styles/microsoft-word/catppuccin.user.less @@ -0,0 +1,399 @@ +/* ==UserStyle== +@name Microsoft Word Catppuccin +@namespace github.com/catppuccin/userstyles/styles/microsoft-word +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/microsoft-word +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/microsoft-word/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amicrosoft-word +@description Soothing pastel theme for Microsoft Word +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] + +@var checkbox applyToDocument "Apply Theme to Document" 0 +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("live.com") { + #catppuccin(@lightFlavor); + + .UxDarkMode { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + .fui-FluentProvider2, + .fui-FluentProvider86, + .fui-FluentProvider102 { + --colorNeutralStroke1: @surface1; + --colorBrandForeground1: @accent; + --colorNeutralForeground1: @text; + --colorNeutralBackground1: @surface0; + --colorNeutralForeground2: @text; + --colorNeutralBackground3: @base; + --colorNeutralStroke1Hover: @surface2; + --colorNeutralForeground1Hover: @text; + --colorNeutralStrokeAccessible: @surface2; + --colorNeutralBackground1Hover: @surface1; + --colorNeutralBackground3Hover: @surface0; + --colorNeutralForegroundOnBrand: @base; + --colorNeutralBackground1Selected: @surface1; + } + + .o365sx-navbar, + .o365cs-base .o365sx-button, + [data-unique-id="GoPremiumButton"], + [data-unique-id="DocumentTitleButton"], + #SearchButton { + background-color: @base !important; + color: @text !important; + } + + .OfficeIconColors_mUpgradeProductGlyphColorless, + [aria-label="Saved to OneDrive"] > i:nth-child(1) > svg:nth-child(1), + #SearchButton > span:nth-child(1) > i:nth-child(1), + ._3_LjxRBZZiG458goXcTPLs.o365sx-neutral-dark-font, + ._3eLVxYuaVkSqw02CcIH8ec.o365sx-neutral-dark-font.o365sx-neutral-lighter-hover-background, + span.ms-Icon--WaffleOffice365._2hFKF2Ng35BcYrXwyNH86a { + fill: @text !important; + color: @text !important; + } + + #RibbonContainer > div:nth-child(1) > div:nth-child(2) > div:nth-child(1), + #RibbonContainer > div:nth-child(1) > div:nth-child(2) > div:nth-child(2), + #RibbonTopBarContainer { + background-color: @base !important; + } + + #tablist > div:nth-child(1) { + > div > div:nth-child(1) > button:nth-child(1) { + color: @text !important; + } + } + + #Home-tabpanel, + #Home-tabpanel > div:nth-child(2), + #appLauncherTop, + #appLauncherMainView, + #ContextMenu-ContextMenu { + background-color: @surface0 !important; + } + + #ShareMenu { + background-color: @accent; + color: @base; + } + + #Floatie-FontPicker-Floatie > div:nth-child(1), + #Floatie-FontSize-Floatie > div:nth-child(2) { + background-color: @base; + } + + #Floatie-FontPicker-Floatie > div:nth-child(1) > input:nth-child(1), + #Floatie-FontSize-Floatie-input { + color: @text; + } + + #Floatie-FontPicker-Floatie > div:nth-child(1) { + border-color: 1px solid @surface2; + } + + #Floatie-FontSize-Floatiewrapper { + border-color: @surface2; + } + + [data-unique-id="ReactTabbedPanelMenuContainer"] > div:nth-child(1) { + background-color: @base !important; + } + + #TellMe-Menu > div:nth-child(1) { + background-color: @surface0 !important; + > ul:nth-child(1) > li, + ul:nth-child(1) > li:nth-child(2) { + div:nth-child(1) > ul:nth-child(1) { + > li { + background-color: @surface0 !important; + > button:nth-child(1) { + color: @text; + &:hover { + background-color: @surface1 !important; + } + } + } + } + } + } + + ._1acxHZf6WaSGxss7AMw7aZ.o365sx-neutral-lighter-hover-background:hover, + ._3eLVxYuaVkSqw02CcIH8ec.o365sx-neutral-dark-font.o365sx-neutral-lighter-hover-background:hover, + .ribbon-bottom-bar-divider, + .divider-745, + .divider-766 { + background-color: @surface1 !important; + } + + #WACViewPanel { + background-color: @mantle !important; + } + + & when (@applyToDocument = 1) { + .Page { + background-color: @base !important; + border-color: @surface1 !important; + } + span.NormalTextRun, + .FileMenuButtonPrimaryText, + [class="NewDocumentTemplateLabel"] { + color: @text !important; + } + } + + .Paragraph, + #TellMe-Menusection-0-title > div:nth-child(1) > span:nth-child(2), + #TellMe-Menusection-1-title > div:nth-child(1) > span:nth-child(2) { + color: @text !important; + } + + .PageAdornmentHeaderLabelThemed, + .PageAdornmentFooterLabelThemed { + background-color: @base !important; + border-color: @text !important; + color: @subtext0; + } + + [id="WACStatusBarContainer"] + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) { + div:nth-child(1), + div:nth-child(3) { + > button, + div:nth-child(2) > div:nth-child(1) { + &:hover { + background-color: @surface1 !important; + } + } + } + div:nth-child(3) + > div:nth-child(2) + > div:nth-child(1) + > div:nth-child(2) + > div:nth-child(1) { + > div:nth-child(1) > span:nth-child(1) { + background: @accent !important; + } + } + div:nth-child(1) { + > span:nth-child(1) { + background: @subtext0 !important; + } + > span:nth-child(3) { + background: @subtext0 !important; + } + > span:nth-child(4) { + background: @subtext0 !important; + } + } + } + + #ReactFloatie > div:nth-child(1) { + background: @surface0 !important; + } + + #documentTitle + > span:nth-child(1) + > div:nth-child(2) + > i:nth-child(1) + > svg:nth-child(1) { + fill: @text; + } + + #ProgressBar { + background-color: @surface0; + &:hover { + background-color: @surface1; + } + > div:nth-child(2) { + background-color: @surface2 !important; + > div:nth-child(1) { + background: @accent; + } + } + } + + #ProgressBar > div:nth-child(3) { + > span:nth-child(1) { + color: @text; + } + > span:nth-child(2) { + color: @accent; + } + > span:nth-child(3) { + color: @text; + } + } + + #AppBrand > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) { + &:hover { + background-color: @surface0; + } + } + + #appLauncherTop > div:nth-child(1) { + > div:nth-child(1) > button:nth-child(1) { + &:hover { + background-color: @surface1; + } + } + > a:nth-child(2) { + color: @accent; + } + } + + #allAppsLink { + color: @accent; + } + + #ProgressCardScore { + > div:nth-child(1) { + color: @accent; + } + > div:nth-child(2) { + color: @accent; + } + } + + #WACStatusBarContainer + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) { + background-color: @surface0; + border-top-color: @surface1; + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) { + > div:nth-child(1) > button, + div:nth-child(3) > button { + color: @subtext0 !important; + } + } + } + + [data-unique-id="TellMeControl"] { + background: @surface0 !important; + > div:nth-child(2) > label:nth-child(1), + [data-icon-name="Search"] { + color: @subtext0 !important; + } + } + + #ReactTabbedPanelMenuPageContainer { + background-color: @surface0 !important; + } + + #UploadDocumentFromHomeTab, + #pageSection2CompoundButtonSectionProps + > div:nth-child(2) + > div:nth-child(1) + > div:nth-child(1) + > div:nth-child(1) + > button { + background-color: @surface0 !important; + &:hover { + background-color: @surface1 !important; + } + } + + #MultilineRibbon-RibbonModeToggleDropdown, + #FarPeripheralControls-ModeSwitcherDropdown, + #MultilineRibbon-RibbonModeToggleDropdownsection-0-title, + #MultilineRibbon-RibbonModeToggleDropdownsection-1-title { + background-color: @surface0 !important; + > div:nth-child(1) > span:nth-child(2) { + color: @text !important; + } + } + + .PageAdornmentNumberLabel, + .FileMenuButtonSecondaryText, + #New, + #Open, + #Recent { + color: @subtext0 !important; + } + + #Clipboard_MLR-label, + #Font_MLR-label, + #Paragraph_MLR-label, + #Styles-label, + #Editing-label, + #Dictation-label, + #GetAddins-label, + #Editor-label { + color: @subtext0 !important; + } + + svg { + path.OfficeIconColors_m22 { + fill: @text; + } + path.OfficeIconColors_m24, + path.OfficeIconColors_m25, + path.OfficeIconColors_m26, + path.OfficeIconColors_m2262 { + fill: @accent; + } + path.OfficeIconColors_m27 { + fill: @green; + } + path.OfficeIconColors_m211 { + fill: @yellow; + } + path.OfficeIconColors_m212 { + fill: @peach; + } + path.OfficeIconColors_m220, + path.OfficeIconColors_m221 { + fill: @mauve; + } + path.OfficeIconColors_m213 { + fill: @red; + } + path.OfficeIconColors_m229 { + fill: @red; + } + path.OfficeIconColors_m295 { + fill: @blue; + } + path.OfficeIconColors_m2131 { + fill: @green; + } + path.OfficeIconColors_m2227 { + fill: @peach; + } + path.OfficeIconColors_m2251 { + fill: @text; + } + } + } +} diff --git a/styles/migadu-webmail/README.md b/styles/migadu-webmail/README.md new file mode 100644 index 0000000000..616d47d557 --- /dev/null +++ b/styles/migadu-webmail/README.md @@ -0,0 +1,37 @@ + + + +

+ Logo
+ + Catppuccin for Migadu Webmail + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + +> [!NOTE] +> Set Migadu Webmail's built-in theme to 'Migadu' for the optimal experience. + +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/migadu-webmail/catppuccin.user.less b/styles/migadu-webmail/catppuccin.user.less new file mode 100644 index 0000000000..516f95231a --- /dev/null +++ b/styles/migadu-webmail/catppuccin.user.less @@ -0,0 +1,448 @@ +/* ==UserStyle== +@name Migadu Webmail Catppuccin +@namespace github.com/catppuccin/userstyles/styles/migadu-webmail +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/migadu-webmail +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/migadu-webmail/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amigadu-webmail +@description Soothing pastel theme for Migadu Webmail +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] + +@var checkbox hideProfilePictures "Hide Profile Pictures" 0 +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("webmail.migadu.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + @orange: mix(@peach, @yellow); + + --main-color: @text; + --main-bg-color: @base; + --border-color: @surface0; + --dropdown-menu-color: @text; + --dropdown-menu-bg-color: @base; + --dropdown-menu-hover-bg-color: @surface1; + --dropdown-menu-hover-color: @text; + --dropdown-menu-disabled-color: @subtext0; + --dropdown-menu-border-clr: @surface0; + --folders-color: @text; + --folders-disabled-color: @surface2; + --folders-selected-color: @blue; + --folders-selected-bg-color: fade(@blue, 10%); + --folders-focused-color: @blue; + --folders-hover-color: @text; + --folders-hover-bg-color: @base; + --folders-drop-color: @text; + --settings-menu-color: @text; + --settings-menu-selected-color: @blue; + --settings-menu-selected-bg-color: fade(@blue, 10%); + --settings-menu-hover-color: @text; + --settings-menu-hover-bg-color: @base; + --message-list-toolbar-bg-color: @overlay0; + --panel-bg-clr: @base; + --message-header-bg-clr: @mantle; + --hr-color: @surface0; + --dialog-bg-clr: @base; + --dialog-clr: @text; + --tr-hover-bg-clr: @crust; + --loading-color: @text; + --login-color: @text; + --login-bg-color: @crust; + --tab-hover-border-clr: @surface0; + --tab-active-bg-clr: @crust; + --tr-odd-bg-clr: @mantle; + + /* Login page */ + .LoginView .btn, + .LoginView input { + border-color: @surface0; + } + .LoginView input:focus, + .LoginView input:hover { + border-color: @surface1; + } + + /* Inbox */ + .messageItemHeader, + .bodySubHeader, + .thm-message-list-top-toolbar, + .thm-message-list-bottom-toolbar { + background: @mantle !important; + } + + /* Buttons */ + --btn-clr: @text; + --btn-border-clr: @overlay0; + .btn [class^="icon-"] { + color: @text; + } + .btn.btn-success { + &, + [class^="icon-"] { + color: @green !important; + } + background-color: fade(@green, 20%); + &:hover, + &:active { + background-color: fade(@green, 40%); + } + } + .btn.btn-warning { + &, + [class^="icon-"] { + color: @yellow !important; + } + background-color: fade(@yellow, 20%); + &:hover, + &:active { + background-color: fade(@yellow, 40%); + } + } + .btn.btn-danger { + &, + [class^="icon-"] { + color: @red !important; + } + background-color: fade(@red, 20%); + &:hover, + &:active { + background-color: fade(@red, 40%); + } + } + .btn.disabled, + .btn.disabled.fontastic, + .btn.disabled .fontastic { + color: @surface0 !important; + } + .btn, + .btn.disabled, + .btn[disabled], + .btn.disabled:hover, + .btn[disabled]:hover { + border-color: @surface0 !important; + text-shadow: none !important; + background-color: @base; + } + .btn:hover { + background-color: @mantle; + } + + /* Links */ + + --link-color: @blue; + #messageItem .b-text-part a:visited { + color: @mauve; + } + + /* Inputs */ + + --input-bg-clr: @base; + --input-border-clr: @surface0; + --input-focus-border-clr: @overlay0; + --input-clr: @subtext1; + + .select, + select { + @svg: escape( + '▾' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .e-checkbox.material-design input:checked + div { + border-color: darken(@green, 10%); + } + + /* stylelint-disable property-disallowed-list */ + @keyframes checkmark-to-box { + 0% { + top: -1px; + left: 5px; + width: 10px; + height: 18px; + border: 2px solid darken(@green, 10%); + border-width: 0 2px 2px 0; + transform: rotate(45deg); + } + + 50% { + top: 13px; + left: 5px; + width: 4px; + height: 4px; + transform: rotate(45deg); + } + + 100% { + top: 0; + left: 0; + width: 18px; + height: 18px; + border: 2px solid @overlay0; + transform: rotate(0); + } + } + + @keyframes box-to-checkmark { + 0% { + top: 0; + left: 0; + width: 18px; + height: 18px; + border: 2px solid @overlay0; + transform: rotate(0); + } + + 50% { + top: 13px; + left: 5px; + width: 4px; + height: 4px; + transform: rotate(45deg); + } + + 100% { + top: -1px; + left: 5px; + width: 10px; + height: 18px; + border: 2px solid darken(@green, 10%); + border-width: 0 2px 2px 0; + transform: rotate(45deg); + } + } + /* stylelint-enable property-disallowed-list */ + + /* Nothing selected */ + .messageView .b-message-view-desc, + #V-PopupsContacts .b-view-content .b-contact-view-desc { + color: @overlay0; + } + + /* Loading messages */ + .messageList .b-content { + .listDragOver, + .listEmptyMessage, + .listError, + .listLoading { + color: @overlay0; + } + + .listError { + color: @red; + } + } + #messageItem .loading, + #V-PopupsContacts .b-list-content .listEmptyList, + #V-PopupsContacts .b-list-content .listEmptyListLoading, + #V-PopupsContacts .b-list-content .listEmptySearchList { + color: @overlay0; + } + + .icon-spinner { + border-color: @surface1; + border-top-color: @text; + } + .iconcolor-green { + color: @green; + } + .iconcolor-red { + color: @red; + } + .b-folders .is-flagged .flag-icon::after, + .messageListItem.hasFlaggedSubMessage .flagParent::after, + .messageListItem.msgflag-\\flagged .flagParent::after { + color: @orange; + } + + /* Tags */ + + .msgflag-\$important .checkboxMessage { + background-color: @red; + } + + .msgflag-\$important.focused { + background-color: fade(@red, 30%); + } + + .msgflag-\$important:not(.focused) { + color: @red; + } + + .msgflag-\$todo .checkboxMessage { + background-color: @blue; + color: @text; + } + + .msgflag-\$todo.focused { + background-color: fade(@blue, 30%); + } + + .msgflag-\$todo:not(.focused) { + color: @blue; + } + + .msgflag-\$label5 .checkboxMessage { + background-color: darken(@pink, 10%); + color: @text; + } + + .msgflag-\$label4 .checkboxMessage { + background-color: @blue; + color: @text; + } + + .msgflag-\$label3 .checkboxMessage { + background-color: @green; + color: @text; + } + + .msgflag-\$label2 .checkboxMessage { + background-color: @orange; + color: @text; + } + + .msgflag-\$label1 .checkboxMessage { + background-color: @red; + color: @text; + } + + .msgflag-\$label5.focused { + background-color: fade(@pink, 30%); + } + + .msgflag-\$label4.focused { + background-color: fade(@blue, 30%); + } + + .msgflag-\$label3.focused { + background-color: fade(@green, 30%); + } + + .msgflag-\$label2.focused { + background-color: fade(mix(@red, @yellow), 30%); + } + + .msgflag-\$label1.focused { + background-color: fade(@red, 30%); + } + + .msgflag-\$label5:not(.focused) { + color: darken(@pink, 10%); + } + + .msgflag-\$label4:not(.focused) { + color: @blue; + } + + .msgflag-\$label3:not(.focused) { + color: @green; + } + + .msgflag-\$label2:not(.focused) { + color: @orange; + } + + .msgflag-\$label1:not(.focused) { + color: @red; + } + + .messageList .b-content .listSearchDesc { + border-bottom-color: @surface0; + } + + /* Profile pictures */ + img.fromPic when (@hideProfilePictures = 1) { + display: none; + } + + /* Settings */ + #V-Settings-Themes figure { + &.selected { + background-color: fade(@green, 40%); + border-color: @text; + } + &:hover { + border-color: @surface0; + } + } + + #V-PopupsContacts .e-contact-item, + .messageListItem { + &.focused { + border-left-color: @surface2; + background-color: @surface0; + } + + &.checked { + border-left-color: lighten(@accent, 10%); + } + + &.checked.focused, + &.selected { + border-left-color: @accent; + } + + &.selected { + background-color: fade(@accent, 30%); + } + } + + #V-PopupsContacts .e-contact-item { + border-left-color: @surface0; + } + + /* Send mail modal */ + .squire-toolbar, + #V-PopupsCompose .attachmentAreaParent { + border-color: @surface0; + } + #V-PopupsCompose header { + color: @text; + } + /* Minimize and close icons */ + #V-PopupsCompose header div.pull-right a.minimize-custom, + #V-PopupsCompose .close, + .close { + border-color: @text; + color: @text; + } + /* Email address field */ + .emailaddresses { + li[draggable] { + background-color: @mantle; + border-color: @surface0; + box-shadow: 0 1px 0 fade(@mantle, 75%) inset; + color: @text; + } + li a { + color: @surface0; + } + } + + /* Untheme message content */ + div:has(> .bodyText) { + color: #333; + background-color: #fff; + } + } +} diff --git a/styles/minesweeper/README.md b/styles/minesweeper/README.md new file mode 100644 index 0000000000..990e51679c --- /dev/null +++ b/styles/minesweeper/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Minesweeper Online + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## ❤️‍🩹 Unmaintained +This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/minesweeper/catppuccin.user.less b/styles/minesweeper/catppuccin.user.less new file mode 100644 index 0000000000..d530af335c --- /dev/null +++ b/styles/minesweeper/catppuccin.user.less @@ -0,0 +1,464 @@ +/* ==UserStyle== +@name Minesweeper Online Catppuccin +@namespace github.com/catppuccin/userstyles/styles/minesweeper +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/minesweeper +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/minesweeper/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aminesweeper +@description Soothing pastel theme for Minesweeper Online +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("minesweeper.online") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --b0: @crust; + --b1: @base; + + body { + background-color: @crust; + } + + .navbar-desktop { + background-color: @base; + } + + .header { + margin-top: 0; + } + + .navbar-default { + background-color: @base; + } + + .navbar-default .navbar-brand, + .navbar-default .navbar-brand:hover, + .navbar-default .navbar-brand:focus, + .navbar-default .navbar-brand:focus:hover { + color: @text; + } + + .navbar-default .navbar-toggle { + border-color: @surface0; + background-color: @base; + &:hover { + border-color: @surface1; + background-color: @mantle; + } + } + + .navbar-default .navbar-toggle .icon-bar { + background-color: @text; + } + + .navbar-desktop, + .main-content { + box-shadow: @surface0 0 0 0 1px; + } + + hr, + .thumbnail, + .table-bordered { + border-color: @surface0 !important; + } + + .main-column { + box-shadow: @surface0 1px 0 0 0 inset; + } + + .main-content, + .thumbnail, + .table td { + background-color: @mantle; + } + + .homepage-level { + background-color: @mantle; + border-color: @surface0; + } + + a.homepage-level.active, + a.homepage-level:focus, + a.homepage-level:hover { + border-color: @accent; + } + + a, + a:hover, + .text-primary { + color: @accent; + } + + .text-success, + .level1-link, + .level1-link:hover, + .time-icon, + .end-icon, + .equipment-rarity-0 { + color: @green !important; + } + + .btn-success, + .btn-success:hover, + .btn-success:focus, + .btn-success:focus:hover { + color: @mantle; + background-color: @green; + border-color: @green; + } + + .btn-danger, + .btn-danger:hover, + .btn-danger:focus, + .btn-danger:focus:hover { + color: @mantle; + background-color: @red; + border-color: @red; + } + + code { + background-color: fade(@red, 12.5%); + } + + #premium_content > div:nth-child(21) { + > p:nth-child(3) > code:nth-child(1) { + color: @peach !important; + } + > p:nth-child(4) > code:nth-child(1) { + color: @blue !important; + } + > p:nth-child(5) > code:nth-child(1) { + color: @green !important; + } + } + + .equipment-item-rarity-0 { + border-color: @green; + background-color: fade(@green, 12.5%); + } + + .equipment-item-rarity-1 { + border-color: @blue; + background-color: fade(@blue, 12.5%); + } + + .level2-link, + .level2-link:hover, + .blue, + .ws-icon, + .equipment-rarity-1, + .equipment-rarity-1:active, + .equipment-rarity-1:hover, + .equipment-rarity-1:visited { + color: @blue !important; + } + + .equipment-rarity-2, + .equipment-rarity-2:active, + .equipment-rarity-2:hover, + .equipment-rarity-2:visited { + color: @mauve !important; + } + + .equipment-item-rarity-2 { + border-color: @mauve; + background-color: fade(@mauve, 12.5%); + } + + .equipment-rarity-3, + .equipment-rarity-3:active, + .equipment-rarity-3:hover, + .equipment-rarity-3:visited { + color: @peach !important; + } + + .equipment-item-rarity-3 { + border-color: @peach; + background-color: fade(@peach, 12.5%); + } + + .equipment-item-rarity-4, + .equipment-item-rarity-5 { + border-color: @red; + background-color: fade(@red, 12.5%); + } + + .eff-icon, + .quality-icon { + color: @peach; + } + + .text-danger, + .level3-link, + .level3-link:hover, + .eff-icon.eff-icon.level3, + .list-icon.level3, + .nf-icon.level3, + .time-icon.level3, + .wins-icon.level3, + .ws-icon.ws3, + .mastery-icon.mastery3, + .wins-icon, + .end-icon.end3, + .mastery-icon, + .equipment-rarity-4, + .equipment-rarity-4:active, + .equipment-rarity-4:hover, + .equipment-rarity-4:visited, + .equipment-rarity-5, + .equipment-rarity-5:active, + .equipment-rarity-5:hover, + .equipment-rarity-5:visited { + color: @red !important; + } + + body, + .main-page h1, + .main-page h2, + .main-page h3, + .sidebar-nav ul li a, + .help-menu-item > strong, + .help-content h3, + .sidebar-nav ul li, + a.active, + .brand-link .brand-text, + .black-link, + .black-link:active, + .black-link:hover, + .black-link:visited, + .events-title { + color: @text !important; + } + + .btn-primary, + .btn-primary:hover, + .btn-primary:active:hover, + .btn-primary:active { + border-color: @accent; + background-color: @accent; + color: @mantle; + } + + .premium-product-descr { + color: fade(@yellow, 60%); + } + + .shop-strike-danger { + background-image: linear-gradient( + rgba(0, 0, 0, 0) 8px, + @red 8px, + @red 10px, + rgba(0, 0, 0, 0) 10px + ); + } + + .gray, + .mediumgray, + .mediumgray:hover, + .dropdown-menu > li > a, + .dropdown-menu > li > a:hover, + .score-icon.icon-silver, + .gray:hover, + .icon-mobile { + color: @subtext0; + } + + .dropdown-menu > li > a:focus, + .dropdown-menu > li > a:hover { + background-color: @base !important; + } + + .nav-tabs > li.active > a, + .nav-tabs > li.active > a:focus, + .nav-tabs > li.active > a:hover, + .nav-tabs > li > a:hover { + border-color: @surface0; + background-color: @base; + color: @text; + } + + .chat-messages { + border-color: @surface0; + } + + .btn-default, + .form-control { + color: @text; + background-color: @mantle; + border-color: @surface0; + &:hover { + color: @text; + background-color: @base; + border-color: @surface1; + } + } + + .btn-info, + .btn-info:hover, + .btn-info:active:hover, + .btn-info:active { + border-color: @blue; + background-color: @blue; + color: @mantle; + } + + .ticket.icon-filter { + color: @sky; + } + + td[class="text-nowrap"], + .result-block, + .dropdown-menu, + td[class=""], + .table-bordered > tbody > tr > td { + background-color: @mantle; + border-color: @surface0 !important; + } + + th[class="homepage-best-players-th"], + th[colspan="1"], + th[class="text-nowrap"], + th[class="text-nowrap quests-column-last"], + .help-table > thead:nth-child(1) > tr:nth-child(1) > th, + table.table:nth-child(3) > tbody:nth-child(1) > tr:nth-child(1) > th, + table.table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > th, + th[colspan="3"] { + border-color: @surface0 !important; + background-color: @base; + } + + .pagination > li > a, + .pagination > li > span { + background-color: @mantle; + border-color: @surface0 !important; + color: @accent; + } + + .pagination > .disabled > a { + background-color: @mantle; + border-color: @surface0 !important; + color: @subtext0; + } + + .pagination > li > a:hover { + background-color: @base; + color: @accent; + } + + .pagination-sm > li:first-child > a, + .pagination-sm > li:first-child > a:hover, + .pagination > .disabled > a:hover { + background-color: @crust; + color: @subtext0; + } + + .pagination > .active > a, + .pagination > .active > a:hover { + background-color: @accent; + color: @mantle; + } + + .open > .dropdown-toggle.btn-default, + .open > .dropdown-toggle.btn-default:focus, + .open > .dropdown-toggle.btn-default:hover, + .btn-default:active:hover { + background-color: @surface0; + border-color: @surface1 !important; + color: @text; + } + + .footer-link, + .season { + color: @subtext0 !important; + } + + .score-icon { + color: @yellow; + } + + .dotted-underline, + .dotted-underline:hover { + border-bottom-color: @subtext0; + } + + .ws-icon.ws11 { + color: @green; + } + + .brand-logo { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .exp-icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .coin-icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .diff-icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + filter: none; + } + + .arena-icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .event-item-icon.icon-filter { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .quest-icon { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .arena-coin-icon.icon-filter { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } +} diff --git a/styles/modrinth/README.md b/styles/modrinth/README.md index 4e1fa9f93f..2966ae1911 100644 --- a/styles/modrinth/README.md +++ b/styles/modrinth/README.md @@ -10,39 +10,18 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
+## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). - - -## 💝 Current Maintainer(s) +## 💝 Current Maintainer - [thismoon](https://github.com/thismoon) +  

diff --git a/styles/modrinth/assets/catwalk.webp b/styles/modrinth/assets/catwalk.webp deleted file mode 100644 index 9257541ca0..0000000000 --- a/styles/modrinth/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:090036bcb9228979d29b51cb1f3b1f9a189515e4fe07ae607977f2a614e4ab48 -size 199984 diff --git a/styles/modrinth/assets/frappe.webp b/styles/modrinth/assets/frappe.webp deleted file mode 100644 index 03a9a79a95..0000000000 --- a/styles/modrinth/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9f310fff0fd72e8e77ddfbcb93668001800275cf08ca55e7fd03fef75d8ab715 -size 55588 diff --git a/styles/modrinth/assets/latte.webp b/styles/modrinth/assets/latte.webp deleted file mode 100644 index 9150d29826..0000000000 --- a/styles/modrinth/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7d1831cc72a6d02fc6bb08e5fb37ebe9a749dbac05e46bb3023fd96ee47852dd -size 67608 diff --git a/styles/modrinth/assets/macchiato.webp b/styles/modrinth/assets/macchiato.webp deleted file mode 100644 index 3d0f742385..0000000000 --- a/styles/modrinth/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6880ef2f74b1f91e778b988ca4ba27a7aaa27fc39792a6edd0b8ef3294b2f93e -size 57420 diff --git a/styles/modrinth/assets/mocha.webp b/styles/modrinth/assets/mocha.webp deleted file mode 100644 index c99554f7db..0000000000 --- a/styles/modrinth/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:362e64e760f08964930ea677878c7343e260dbc9ae614acc06636fb68cb3bf28 -size 59090 diff --git a/styles/modrinth/catppuccin.user.css b/styles/modrinth/catppuccin.user.css deleted file mode 100644 index c5fc556f16..0000000000 --- a/styles/modrinth/catppuccin.user.css +++ /dev/null @@ -1,209 +0,0 @@ -/* ==UserStyle== -@name Modrinth Catppuccin -@namespace github.com/catppuccin/userstyles/styles/modrinth -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/modrinth -@version 1.1.2 -@description Soothing pastel theme for Modrinth -@author Catppuccin -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/modrinth/catppuccin.user.css -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] -==/UserStyle== */ -@-moz-document regexp(".*https:\\/\\/modrinth\\.com.*") { - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - @shadow: #dbdfef; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - @shadow: #010409; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - @shadow: #010409; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - @shadow: #010409; - }; - }; - - .light-mode { - #catppuccin(@lightFlavor, @accentColor); - } - - .dark-mode, - .oled-mode { - #catppuccin(@darkFlavor, @accentColor); - } - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @shadow: @catppuccin[@@lookup][@shadow]; - @accent-Color: @catppuccin[@@lookup][@@accent]; - - & { - --color-bg: @crust; - --color-ad-raised: @surface2; - --color-ad: @surface1; - --color-brand-green: @accent-Color; - --color-button-bg-active: @overlay0; - --color-button-bg-hover: @surface2; - --color-button-bg: @surface1; - --color-button-text-hover: @text; - --color-button-text: @subtext1; - --color-divider: @surface0; - --color-heading: @yellow; - --color-icon: @text; - --color-link-active: @teal; - --color-link-hover: @sky; - --color-link: @sapphire; - --color-raised-bg: @base; - --color-special-blue: @sapphire; - --color-special-orange: @peach; - --color-special-purple: @mauve; - --color-special-red: @red; - --color-text: @subtext1; - --color-text-inactive: @overlay1; - --color-brand-inverted: @shadow; - --color-text-dark: @text; - --color-table-alternate-row: @crust; - --color-table-border: @overlay0; - } - - .BDVE3s9MFQttmbMUeYup-2 a b, - .BDVE3s9MFQttmbMUeYup-2 a strong { - color: @accent-Color; - } - } -} diff --git a/styles/modrinth/catppuccin.user.less b/styles/modrinth/catppuccin.user.less new file mode 100644 index 0000000000..0594241a38 --- /dev/null +++ b/styles/modrinth/catppuccin.user.less @@ -0,0 +1,200 @@ +/* ==UserStyle== +@name Modrinth Catppuccin +@namespace github.com/catppuccin/userstyles/styles/modrinth +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/modrinth +@version 2026.04.13 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/modrinth/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amodrinth +@description Soothing pastel theme for Modrinth +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("modrinth.com") { + .light, + .light-mode, + .light-properties, + html { + #catppuccin(@lightFlavor); + } + + .dark, + .dark-mode, + .oled-mode, + :root[data-theme="dark"] { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + // TODO: Use Catppuccin palette colors? `fade()`-ed? + @shadow: if(@flavor = latte, #dbdfef, #010409); + + #css-variables() !important; + + // homepage + .blob-demonstration, + .blob-demonstration::after { + background: linear-gradient( + 0deg, + fade(@accent, 20%), + fade(@base, 10%) + ) !important; + } + .logo-banner path { + fill: @accent !important; + } + .logo-banner > svg > g > rect { + display: none; + } + + [tabindex="0"]:focus-visible, + a:focus-visible, + button:focus-visible { + outline-color: @accent; + } + + .BDVE3s9MFQttmbMUeYup-2 a b, + .BDVE3s9MFQttmbMUeYup-2 a strong { + color: @accent; + } + + // dropdown icon + .multiselect__select::before { + border-color: @text transparent transparent; + color: @text; + } + // header button hover + .btn-wrapper:hover { + a, + button { + --tw-brightness: none !important; + } + } + .nuxt-loading-indicator { + background: @accent !important; + } + + #css-variables() { + --text-color: @text; + --color-base: @text; + --color-bg: @crust; + --color-secondary: @subtext0; + --color-ad-raised: @surface2; + --color-ad: @surface1; + --color-ad-highlight: @teal; + --color-brand: @accent; + --color-brand-green: @green; + --color-button-bg-active: @overlay0; + --color-button-bg-selected: fade(@accent, 25%); + --color-button-bg-hover: @surface1; + --color-button-bg: @surface0; + --color-button-text-hover: @text; + --color-button-text: @subtext1; + --color-button-text-active: @text; + --color-button-text-selected: @accent; + --color-divider: @surface0; + --color-divider-dark: @surface2; + --color-heading: @text; + --color-icon: @text; + --color-link-active: @sapphire; + --color-link-hover: @sky; + --color-link: @blue; + --color-raised-bg: @base; + --color-blue: @sapphire; + --color-special-blue: @sapphire; + --color-orange: @peach; + --color-special-orange: @peach; + --color-purple: @mauve; + --color-special-purple: @mauve; + --color-red: @red; + --color-gray: @subtext0; + --color-special-gray: @subtext0; + --color-green: @green; + --color-text: @subtext1; + --color-text-dark: @text; + --color-text-inactive: @overlay1; + --color-brand-highlight: fade(@accent, 25%); + --color-brand-inverted: @shadow; + --color-table-alternate-row: @crust; + --color-table-border: @overlay0; + --color-contrast: @text; + --color-accent-contrast: @mantle; + --color-red-highlight: fade(@red, 25%); + --color-orange-highlight: fade(@peach, 25%); + --color-green-highlight: fade(@accent, 25%); + --color-blue-highlight: fade(@blue, 25%); + --color-purple-highlight: fade(@mauve, 25%); + --color-gray-highlight: fade(@text, 25%); + --color-red-bg: fade(@red, 20%); + --color-orange-bg: fade(@peach, 25%); + --color-green-bg: fade(@accent, 25%); + --color-blue-bg: fade(@blue, 25%); + --color-purple-bg: fade(@mauve, 25%); + --color-brand-shadow: @accent; + --color-warning-banner-side: @red; + --color-warning-banner-bg: fade(@red, 25%); + --color-warning-banner-text: @text; + --color-platform-fabric: @rosewater; + --color-platform-quilt: @mauve; + --color-platform-forge: @lavender; + --color-platform-neoforge: @peach; + --color-platform-liteloader: @sky; + --color-platform-bukkit: @peach; + --color-platform-bungeecord: @yellow; + --color-platform-folia: @green; + --color-platform-paper: @red; + --color-platform-purpur: @mauve; + --color-platform-spigot: @yellow; + --color-platform-velocity: @teal; + --color-platform-waterfall: @blue; + --color-platform-sponge: @yellow; + --color-platform-ornithe: @teal; + --color-platform-bta-babric: @green; + --color-platform-legacy-fabric: @lavender; + --color-platform-nilloader: @pink; + --color-button-border: fade(@crust, 20%); + --color-tooltip-bg: @surface1; + --color-tooltip-text: @subtext1; + --landing-green-label: @accent; + --landing-green-label-bg: fade(@accent, 10%); + --landing-blue-label: @blue; + --landing-color-heading: @text; + --landing-color-subheading: @subtext0; + --landing-border-color: @overlay0; + --landing-blue-label-bg: fade(@blue, 10%); + --landing-border-gradient: linear-gradient( + to bottom right, + @overlay0, + @surface2 + ); + --brand-gradient-strong-bg: linear-gradient( + 270deg, + fade(@accent, 5%) 10%, + fade(@accent, 15%) + ); + --brand-gradient-border: fade(@accent, 10%); + + --surface-1: @crust; + --surface-1-5: mix(@crust, @mantle, 50%); + --surface-2: @mantle; + --surface-2-5: mix(@mantle, @base, 50%); + --surface-3: @base; + --surface-4: @surface0; + --surface-5: @surface2; + + --color-text-primary: @text; + --color-text-default: @subtext1; + --color-text-tertiary: @subtext0; + } + } +} diff --git a/styles/namemc/README.md b/styles/namemc/README.md new file mode 100644 index 0000000000..abd238c17f --- /dev/null +++ b/styles/namemc/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for NameMC + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [Meowcelinee](https://github.com/Meowcelinee) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/namemc/catppuccin.user.less b/styles/namemc/catppuccin.user.less new file mode 100644 index 0000000000..ac2af13445 --- /dev/null +++ b/styles/namemc/catppuccin.user.less @@ -0,0 +1,528 @@ +/* ==UserStyle== +@name NameMC Catppuccin +@namespace github.com/catppuccin/userstyles/styles/namemc +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/namemc +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/namemc/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anamemc +@description Soothing pastel theme for NameMC +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("namemc.com") { + :root[data-bs-theme="dark"] { + #catppuccin(@darkFlavor); + } + :root[data-bs-theme="light"] { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + #bsButton(@col, @bgCol) { + --bs-btn-color: @col; + --bs-btn-hover-color: darken(@col, 5%); + --bs-btn-active-color: darken(@col, 5%); + --bs-btn-disabled-color: @col; + + --bs-btn-bg: @bgCol; + --bs-btn-hover-bg: darken(@bgCol, 5%); + --bs-btn-active-bg: darken(@bgCol, 5%); + --bs-btn-disabled-bg: @bgCol; + --bs-btn-border-color: @bgCol; + --bs-btn-hover-border-color: @bgCol; + --bs-btn-active-border-color: @bgCol; + --bs-btn-disabled-border-color: @bgCol; + } + #bsButtonOutline(@col, @hover) { + --bs-btn-color: @col; + --bs-btn-hover-bg: @col; + --bs-btn-active-bg: @col; + --bs-btn-border-color: @col; + --bs-btn-disabled-color: @col; + --bs-btn-focus-shadow-rgb: @col; + --bs-btn-hover-border-color: @col; + --bs-btn-active-border-color: @col; + --bs-btn-disabled-border-color: @col; + + --bs-btn-hover-color: @hover; + --bs-btn-active-color: @hover; + } + + --bs-body-color: @text; + --bs-body-color-rgb: #lib.rgbify(@text)[]; + --bs-body-bg: @base; + --bs-body-bg-rgb: #lib.rgbify(@base)[]; + --bs-emphasis-color: @text; + --bs-emphasis-color-rgb: #lib.rgbify(@text)[]; + --bs-blue: @blue; + --bs-indigo: @mauve; + --bs-purple: @mauve; + --bs-pink: @pink; + --bs-red: @red; + --bs-orange: @peach; + --bs-yellow: @yellow; + --bs-green: @green; + --bs-teal: @teal; + --bs-cyan: @sapphire; + --bs-secondary-color: @subtext0; + --bs-secondary-color-rgb: #lib.rgbify(@subtext0)[]; + --bs-tertiary-color: @subtext1; + --bs-tertiary-color-rgb: #lib.rgbify(@subtext1)[]; + --bs-tertiary-bg: @base; + --bs-tertiary-bg-rgb: #lib.rgbify(@base)[]; + --bs-secondary-text-emphasis: @subtext0; + --bs-success-text-emphasis: @green; + --bs-primary: @accent; + --bs-primary-rgb: #lib.rgbify(@accent)[]; + --bs-secondary: @subtext0; + --bs-secondary-rgb: #lib.rgbify(@subtext0)[]; + --bs-success: @green; + --bs-success-rgb: #lib.rgbify(@green)[]; + --bs-info: @sky; + --bs-info-rgb: #lib.rgbify(@sky)[]; + --bs-warning: @yellow; + --bs-warning-rgb: #lib.rgbify(@yellow)[]; + --bs-danger: @red; + --bs-danger-rgb: #lib.rgbify(@red)[]; + --bs-light: @base; + --bs-light-rgb: #lib.rgbify(@base)[]; + --bs-dark: @text; + --bs-dark-rgb: #lib.rgbify(@text)[]; + --bs-dark-text-emphasis: @text; + --bs-primary-bg-subtle: @crust; + --bs-secondary-bg-subtle: @mantle; + --bs-success-bg-subtle: fade(@green, 20%); + --bs-warning-bg-subtle: fade(@yellow, 20%); + --bs-danger-bg-subtle: @base; + --bs-secondary-border-subtle: @surface1; + --bs-success-border-subtle: @green; + --bs-info-border-subtle: @sky; + --bs-warning-border-subtle: @yellow; + --bs-danger-border-subtle: @red; + --bs-link-color: @accent; + --bs-link-color-rgb: #lib.rgbify(@accent)[]; + --bs-code-color: @accent; + --bs-highlight-bg: @base; + --bs-form-valid-color: @green; + --bs-focus-ring-color: @accent; + --bs-form-valid-border-color: @green; + --bs-form-invalid-color: @red; + --bs-form-invalid-border-color: @red; + + .btn-primary { + #bsButton(@crust, @accent); + } + .btn-secondary { + #bsButton(@text, @overlay0); + } + .btn-success { + #bsButton(@crust, @green); + } + .btn-info { + #bsButton(@crust, @sapphire); + } + .btn-warning { + #bsButton(@crust, @yellow); + } + .btn-danger { + #bsButton(@crust, @red); + } + .btn-light { + #bsButton(@crust, @overlay2); + } + .btn-dark { + #bsButton(@text, @surface0); + } + + .btn-outline-primary { + #bsButtonOutline(@accent, @text); + } + .btn-outline-secondary { + #bsButtonOutline(@overlay0, @text); + } + .btn-outline-success { + #bsButtonOutline(@green, @text); + } + .btn-outline-info { + #bsButtonOutline(@sapphire, @crust); + } + .btn-outline-warning { + #bsButtonOutline(@yellow, @crust); + } + .btn-outline-danger { + #bsButtonOutline(@red, @text); + } + .btn-outline-light { + #bsButtonOutline(@text, @crust); + } + .btn-outline-dark { + #bsButtonOutline(@surface0, @text); + } + + .text-success { + color: @green !important; + } + + .btn-link { + --bs-btn-disabled-color: @overlay0; + --bs-btn-disabled-border-color: transparent; + --bs-btn-focus-shadow-rgb: #lib.rgbify(@blue)[]; + } + + /* i hate that this is necessary */ + .dropdown-menu { + --bs-dropdown-header-color: @overlay1 !important; + --bs-dropdown-border-color: @surface2 !important; + } + + #header { + form { + div.input-group.input-group-lg { + input.form-control { + background-color: @surface0 !important; + + &:focus { + border-color: @accent; + box-shadow: none; + } + } + } + } + } + + .navbar-nav .nav-item a { + color: @text !important; + + &:hover { + color: @subtext0 !important; + } + span { + color: @text !important; + + &:hover { + color: @subtext0 !important; + } + } + } + + .card { + background-color: @surface0 !important; + color: @subtext0 !important; + --bs-card-bg: @base !important; + + .card-header { + border-color: @surface2 !important; + } + } + + /* skin display link */ + div.card-header { + span { + color: @text; + + &:hover { + color: @accent !important; + } + } + + strong a { + color: @accent !important; + } + } + + /* skin display background */ + .checkered { + @dark: fade(@surface0, 40%); + @light: fade(@surface1, 40%); + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + /* skins page nav buttons */ + .nav.nav-pills { + .nav-item .nav-link a { + color: @text !important; + } + .nav-link.active { + background-color: @accent !important; + color: @crust !important; + } + } + + .page-item .page-link { + background-color: @surface0 !important; + border-color: @surface2 !important; + color: @text; + + &.active { + background-color: @accent !important; + } + + &:focus, + &:hover { + box-shadow: none !important; + color: @accent !important; + } + } + + .page-item.active .page-link { + background-color: @accent !important; + border-color: @accent !important; + color: @crust !important; + } + + /* single skin page */ + a.badge, + span.badge { + background-color: @accent !important; + color: @crust !important; + } + + /* usernames page */ + form#upcoming-form { + div.row { + label.col-form-label { + color: @text !important; + } + + div.col { + .input-group { + .input-group-text { + background-color: @base !important; + border-color: @surface2 !important; + } + } + } + } + } + + .form-control, + .form-select { + background-color: @base !important; + border-color: @surface2 !important; + box-shadow: none !important; + color: @subtext1 !important; + + &:focus { + border-color: @accent !important; + box-shadow: 0 0 0 0.25rem fade(@accent, 25%); + } + } + + /* server list page */ + .mc-red { + color: @maroon !important; + } + .mc-dark-red { + color: @red !important; + } + .mc-gold { + color: @peach !important; + } + .mc-yellow { + color: @yellow !important; + } + .mc-green, + .mc-dark-green { + color: @green !important; + } + .mc-aqua { + color: @sky !important; + } + .mc-dark-aqua { + color: @teal !important; + } + .mc-blue { + color: @sapphire !important; + } + .mc-dark-blue { + color: @blue !important; + } + .mc-light-purple { + color: @pink !important; + } + .mc-dark-purple { + color: @mauve !important; + } + + /* profile page */ + .namemc-rank-10 { + color: @green !important; + } + + .namemc-rank-100, + .namemc-rank-200, + .namemc-rank-900, + .namemc-rank-1000 { + color: @red !important; + } + + #uuid-select { + background-color: @surface1 !important; + } + + .card.mb-3 .card-header a { + color: @accent !important; + } + + .skin-button-selected { + /* society if box-shadow-color existed */ + box-shadow: 0 0 6px @overlay0 !important; + background-color: @overlay0 !important; + } + + .player-list { + a:hover { + color: @subtext1 !important; + } + } + + .head-command, + #head-command-select { + background-color: @base !important; + + &:focus { + border-color: @accent !important; + box-shadow: none !important; + } + } + + button.head-command { + border-color: @surface0 !important; + color: @subtext1; + + &:hover { + background-color: @surface1 !important; + border-color: @surface2 !important; + color: @text !important; + } + } + + #country { + background-color: @mantle !important; + } + + fieldset.form-group input.form-control { + background-color: @mantle; + } + + form > .row > .col > .input-group { + #discord-input, + #facebook-input, + #github-input, + #instagram-input, + #reddit-input, + #snapchat-input, + #soundcloud-input, + #spotify-input, + #steam-input, + #telegram-input, + #tiktok-input, + #threads-input, + #twitch-input, + #twitter-input, + #youtube-input, + fieldset.form-group input.form-control { + background-color: @mantle; + } + } + + & when (@flavor = latte) { + --bs-black: @text; + --bs-black-rgb: #lib.rgbify(@text)[]; + --bs-white: @crust; + --bs-white-rgb: #lib.rgbify(@crust)[]; + --bs-gray: @subtext0; + --bs-gray-dark: @text; + --bs-gray-100: @base; + --bs-gray-200: @mantle; + --bs-gray-300: @crust; + --bs-gray-400: @surface0; + --bs-gray-500: @surface2; + --bs-gray-600: @overlay2; + --bs-gray-700: @subtext0; + --bs-gray-800: @subtext1; + --bs-gray-900: @text; + --bs-secondary-bg: @mantle; + --bs-secondary-bg-rgb: #lib.rgbify(@mantle)[]; + --bs-primary-text-emphasis: @text; + --bs-info-text-emphasis: @text; + --bs-warning-text-emphasis: @text; + --bs-danger-text-emphasis: @red; + --bs-light-text-emphasis: @subtext0; + --bs-info-bg-subtle: @surface0; + --bs-light-bg-subtle: @base; + --bs-dark-bg-subtle: @surface0; + --bs-primary-border-subtle: @surface2; + --bs-light-border-subtle: @mantle; + --bs-dark-border-subtle: @surface2; + --bs-link-hover-color: @accent; + --bs-link-hover-color-rgb: #lib.rgbify(@accent)[]; + --bs-border-color: @crust; + + .mc-black { + color: @text !important; + } + .mc-dark-gray { + color: @subtext0 !important; + } + .mc-gray, + .mc-reset { + color: @overlay1 !important; + } + .mc-white { + color: @base !important; + } + } + + & when not(@flavor = latte) { + --bs-black: @crust; + --bs-white: @text; + --bs-gray: @overlay2; + --bs-gray-dark: @surface2; + --bs-secondary-bg: @surface0; + --bs-secondary-bg-rgb: #lib.rgbify(@surface0)[]; + --bs-primary-text-emphasis: @sapphire; + --bs-info-text-emphasis: @sky; + --bs-warning-text-emphasis: @yellow; + --bs-danger-text-emphasis: @maroon; + --bs-light-text-emphasis: @text; + --bs-info-bg-subtle: @crust; + --bs-light-bg-subtle: @surface0; + --bs-dark-bg-subtle: @mantle; + --bs-primary-border-subtle: @mantle; + --bs-light-border-subtle: @surface1; + --bs-dark-border-subtle: @surface0; + --bs-link-hover-color: @text; + --bs-link-hover-color-rgb: #lib.rgbify(@text)[]; + --bs-border-color: @surface1; + + .mc-black { + color: @crust !important; + } + .mc-dark-gray { + color: @overlay0 !important; + } + .mc-gray, + .mc-reset { + color: @subtext0 !important; + } + .mc-white { + color: @text !important; + } + } + } +} diff --git a/styles/neovim.io/README.md b/styles/neovim.io/README.md new file mode 100644 index 0000000000..c3352193b9 --- /dev/null +++ b/styles/neovim.io/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for neovim.io + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [comfysage](https://github.com/comfysage) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/neovim.io/catppuccin.user.less b/styles/neovim.io/catppuccin.user.less new file mode 100644 index 0000000000..49b3d7ad7d --- /dev/null +++ b/styles/neovim.io/catppuccin.user.less @@ -0,0 +1,114 @@ +/* ==UserStyle== +@name neovim.io Catppuccin +@namespace github.com/catppuccin/userstyles/styles/neovim.io +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/neovim.io +@version 2025.09.19 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/neovim.io/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aneovim.io +@description Soothing pastel theme for neovim.io +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("neovim.io") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --fg-color: @text; + --inverse-fg-color: @surface0; + --bg-color: @base; + --accent-bg-color: @mantle; + --link-color: @blue; + --accent-color: @accent; + --border-color: @accent; + --code-color: @accent; + + a:not([class]) { + text-decoration-color: var(--link-color); + + &:hover, + &:focus { + color: var(--link-color); + } + } + + a[aria-label="logo"] svg[aria-label="Neovim"] { + path[fill="url(#a)"] { + fill: @blue; + } + + path[fill="url(#b)"], + path[fill="url(#c)"] { + fill: @green; + } + + g[fill="#444"] path { + fill: @blue; + } + } + + --bs-btn-active-color: @base; + + .btn { + color: @base; + background: linear-gradient( + @accent 0% 95%, + darken(@accent, 10%) 95% 100% + ); + + &:hover, + &:focus { + box-shadow: 0 0 10px @accent; + outline-color: @text; + } + } + + // docs + --tag-color: @accent; + + code, + code.hljs, + pre, + samp { + background-color: @mantle !important; + color: @text; + } + + .generator-stats { + color: @subtext0; + } + + --docsearch-container-background: fade(@base, 30%); + --docsearch-modal-background: @mantle; + --docsearch-highlight-color: @accent; + --docsearch-logo-color: @accent; + + .DocSearch-Logo { + .cls-1, + .cls-2 { + fill: var(--docsearch-logo-color); + } + } + } +} diff --git a/styles/nitter/README.md b/styles/nitter/README.md index a58c8bfa03..31a4dd46ec 100644 --- a/styles/nitter/README.md +++ b/styles/nitter/README.md @@ -10,39 +10,18 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
+## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). - - -## 💝 Current Maintainer(s) +## 💝 Current Maintainer - [AnubisNekhet](https://github.com/AnubisNekhet) +  

diff --git a/styles/nitter/assets/catwalk.webp b/styles/nitter/assets/catwalk.webp deleted file mode 100644 index a1ae416ce4..0000000000 --- a/styles/nitter/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2973a27b2884745b5e7a9a3d329c411cf7ae9d0f04a040342a31e4025b2ec772 -size 303876 diff --git a/styles/nitter/assets/frappe.webp b/styles/nitter/assets/frappe.webp deleted file mode 100644 index fa15dc5ff3..0000000000 --- a/styles/nitter/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:57382b5c6c473e1dd8e4b549e2fcd8902029878cde8eab0c075a065d58758e82 -size 315982 diff --git a/styles/nitter/assets/latte.webp b/styles/nitter/assets/latte.webp deleted file mode 100644 index 0f27939cda..0000000000 --- a/styles/nitter/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f03da8cf4836eddefe0c34025ea50a4142cf51e6588696f524dd2a8cacf23247 -size 307258 diff --git a/styles/nitter/assets/macchiato.webp b/styles/nitter/assets/macchiato.webp deleted file mode 100644 index 0c664469bb..0000000000 --- a/styles/nitter/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e64531970f42a444393f8c85dd0b8487984ccd1017aa1b8546a28b7e1928f856 -size 316534 diff --git a/styles/nitter/assets/mocha.webp b/styles/nitter/assets/mocha.webp deleted file mode 100644 index e984bcf494..0000000000 --- a/styles/nitter/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:da3abfe76f024ad57c347f9ebc007d87da049e9b4fc1d4a3cdb456bcb92fea75 -size 316704 diff --git a/styles/nitter/catppuccin.user.css b/styles/nitter/catppuccin.user.css deleted file mode 100644 index 962a862aae..0000000000 --- a/styles/nitter/catppuccin.user.css +++ /dev/null @@ -1,232 +0,0 @@ -/* ==UserStyle== -@name Nitter Catppuccin -@namespace github.com/catppuccin/userstyles/styles/nitter -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/nitter -@version 2.0.5 -@description Soothing pastel theme for Nitter -@author Catppuccin -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/nitter/catppuccin.user.css -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" [ "rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green*", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray" ] -==/UserStyle== */ -@-moz-document domain("nitter.net"), domain("nitter.unixfox.eu"), domain("nitter.42l.fr"), domain("nitter.fdn.fr"), domain("nitter.1d4.us"), domain("nitter.kavin.rocks"), domain("nitter.namazso.eu"), domain("nitter.hu"), domain("bird.trom.tf"), domain("nitter.it"), domain("twitter.censors.us"), domain("nitter.grimneko.de"), domain("n.hyperborea.cloud"), domain("nitter.ca"), domain("twitter.076.ne.jp"), domain("nitter.mstdn.social"), domain("nitter.fly.dev"), domain("nitter.weiler.rocks"), domain("nitter.sethforprivacy.com"), domain("nttr.stream"), domain("nitter.tiekoetter.com"), domain("nitter.spaceint.fr"), domain("nitter.privacy.com.denitter.mastodon.pro"), domain("nitter.notraxx.chnitter.poast.org"), domain("nitter.bird.froth.zone"), domain("nitter.dcs0.hu"), domain("twitter.beparanoid.de"), domain("n.ramle.be"), domain("nitter.cz"), domain("nitter.privacydev.net"), domain("tweet.lambda.dance"), domain("nitter.kylrth.com"), domain("nitter.oishi-ra.men"), domain("nitter.foss.wtf"), domain("nitter.priv.pw"), domain("t.com.sb") { - body { - #catppuccin(@darkFlavor, @accentColor); - } - - @media (prefers-color-scheme: light) { - body { - #catppuccin(@lightFlavor, @accentColor); - } - } - @media (prefers-color-scheme: dark) { - body { - #catppuccin(@darkFlavor, @accentColor); - } - } - - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - #rgbify(@color) { - @rgb-raw: red(@color) green(@color) blue(@color); - } - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent: @catppuccin[@@lookup][@@accentColor]; - - & when (@lookup =latte) { - } - - & when not (@lookup =latte) { - } - - /*----------PREDEFINED COLORS-------------*/ - - & { - --bg_color: @mantle; - --fg_color: @text; - --fg_faded: @subtext1; - --fg_dark: @accent; - --fg_nav: @accent; - --bg_panel: @crust; - --bg_elements: @base; - --bg_overlays: @base; - --bg_hover: @crust; - --grey: @subtext1; - --dark_grey: @overlay0; - --darker_grey: @base; - --darkest_grey: @mantle; - --border_grey: @base; - --accent: @accent; - --accent_light: lighten(@accent, 10%); - --accent_dark: darken(@accent, 10%); - --accent_border: darken(@accent, 10%); - --play_button: @accent; - --play_button_hover: @accent; - --more_replies_dots: darken(@accent, 10%); - --error_red: @red; - --verified_blue: @blue; - --icon_text: @text; - --tab: @text; - --tab_selected: @accent; - --profile_stat: @text; - background-color: var(--bg_color); - color: var(--fg_color); - font-family: - Helvetica Neue, - Helvetica, - Arial, - sans-serif; - font-size: 14px; - line-height: 1.3; - margin: 0; - } - /*- Fix Poll Leader color -*/ - .poll-meter.leader { - color: var(--bg_color); - } - } -} diff --git a/styles/nitter/catppuccin.user.less b/styles/nitter/catppuccin.user.less new file mode 100644 index 0000000000..4e20f791c7 --- /dev/null +++ b/styles/nitter/catppuccin.user.less @@ -0,0 +1,153 @@ +/* ==UserStyle== +@name Nitter Catppuccin +@namespace github.com/catppuccin/userstyles/styles/nitter +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/nitter +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/nitter/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anitter +@description Soothing pastel theme for Nitter +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("nitter.net"), + domain("nitter.unixfox.eu"), + domain("nitter.42l.fr"), + domain("nitter.fdn.fr"), + domain("nitter.1d4.us"), + domain("nitter.kavin.rocks"), + domain("nitter.namazso.eu"), + domain("nitter.hu"), + domain("bird.trom.tf"), + domain("nitter.it"), + domain("twitter.censors.us"), + domain("nitter.grimneko.de"), + domain("n.hyperborea.cloud"), + domain("nitter.ca"), + domain("twitter.076.ne.jp"), + domain("nitter.mstdn.social"), + domain("nitter.fly.dev"), + domain("nitter.weiler.rocks"), + domain("nitter.sethforprivacy.com"), + domain("nttr.stream"), + domain("nitter.tiekoetter.com"), + domain("nitter.spaceint.fr"), + domain("nitter.privacy.com.denitter.mastodon.pro"), + domain("nitter.notraxx.chnitter.poast.org"), + domain("nitter.bird.froth.zone"), + domain("nitter.dcs0.hu"), + domain("twitter.beparanoid.de"), + domain("n.ramle.be"), + domain("nitter.cz"), + domain("nitter.privacydev.net"), + domain("tweet.lambda.dance"), + domain("nitter.kylrth.com"), + domain("nitter.oishi-ra.men"), + domain("nitter.foss.wtf"), + domain("nitter.priv.pw"), + domain("t.com.sb"), + domain("xcancel.com"), + domain("nitter.poast.org") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + body { + --bg_color: @mantle; + --fg_color: @text; + --fg_faded: @subtext1; + --fg_dark: @accent; + --fg_nav: @accent; + --bg_panel: @crust; + --bg_elements: @base; + --bg_overlays: @base; + --bg_hover: @crust; + --grey: @subtext1; + --dark_grey: @overlay0; + --darker_grey: @base; + --darkest_grey: @mantle; + --border_grey: @base; + --accent: @accent; + --accent_light: lighten(@accent, 10%); + --accent_dark: darken(@accent, 10%); + --accent_border: darken(@accent, 10%); + --play_button: @accent; + --play_button_hover: @accent; + --more_replies_dots: darken(@accent, 10%); + --error_red: @red; + --verified_blue: @blue; + --icon_text: @text; + --tab: @text; + --tab_selected: @accent; + --profile_stat: @text; + --verified_government: @subtext0; + --verified_business: @yellow; + background-color: var(--bg_color); + color: var(--fg_color); + line-height: 1.3; + margin: 0; + } + + /* logo */ + img.site-logo { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + /* Fix Poll Leader color */ + .poll-meter.leader { + color: var(--bg_color); + } + + /* xcancel "verifying your request" */ + [style="background-color:#1f1f1f;color:#1f1f1f;font-family:Arial,Helvetica,sans-serif;font-size:100%;"] { + background: @base !important; + h1, + h2, + p, + #status { + color: @accent !important; + } + [style="width:auto;margin:16px auto;border:1px solid #FF6C60;background-color:#1f1f1f;border-radius:3px 3px 3px 3px;padding:10px;"] { + background: @base !important; + border-color: @accent !important; + } + } + + /* error text color contrast */ + .error-panel { + color: @crust; + a { + color: @crust; + text-decoration: underline; + } + } + + /* twitter blue verification checkmark contrast */ + .verified-icon.blue { + color: @crust; + } + } +} + +#rgbify(@color) { + @rgb: red(@color) green(@color) blue(@color); +} diff --git a/styles/nixos-manual/README.md b/styles/nixos-manual/README.md new file mode 100644 index 0000000000..78f5cf3a9d --- /dev/null +++ b/styles/nixos-manual/README.md @@ -0,0 +1,38 @@ + + + +

+ Logo
+ + Catppuccin for NixOS Manual, Nixpkgs Manual + +

+ +

+ + +

+ +## Usage + +> [!IMPORTANT] +> This userstyle also applies to [Nixpkgs Manual](https://nixos.org/manual/nixpkgs). + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [husjon](https://github.com/husjon) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/nixos-manual/catppuccin.user.less b/styles/nixos-manual/catppuccin.user.less new file mode 100644 index 0000000000..3faf83c024 --- /dev/null +++ b/styles/nixos-manual/catppuccin.user.less @@ -0,0 +1,75 @@ +/* ==UserStyle== +@name NixOS Manual/Nixpkgs Manual Catppuccin +@namespace github.com/catppuccin/userstyles/styles/nixos-manual +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/nixos-manual +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/nixos-manual/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anixos-manual +@description Soothing pastel theme for NixOS Manual and Nixpkgs Manual +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document url-prefix("https://nixos.org/manual/"), + url-prefix("https://nix-darwin.github.io/nix-darwin/manual/") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --background: @base; + --main-text-color: @text; + --link-color: @accent; + --heading-color: @accent; + --small-heading-color: fade(@accent, 85%); + --note-text-color: @blue; + --note-background: @base; + --warning-text-color: @red; + --warning-background: @base; + --codeblock-background: @surface0; + --codeblock-text-color: @text; + + div.book .programlisting, + div.appendix .programlisting { + background-color: @surface0 !important; + } + + hr, + div.toc { + border-top-color: transparent; + border-bottom-color: @overlay1 !important; + } + + // Version selector + div[style^="background: #333333;color: #FFFFFF;"] { + background-color: @crust !important; + + &, + dt { + color: @text !important; + } + + a { + color: @accent !important; + } + } + } +} diff --git a/styles/nixos-search/README.md b/styles/nixos-search/README.md index c32b06f0bb..a387d6108b 100644 --- a/styles/nixos-search/README.md +++ b/styles/nixos-search/README.md @@ -10,38 +10,17 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +## 💝 Current Maintainer +- [sydrinea](https://github.com/sydrinea) -## 💝 Current Maintainer(s) -- [alaidriel](https://github.com/alaidriel)   diff --git a/styles/nixos-search/assets/catwalk.webp b/styles/nixos-search/assets/catwalk.webp deleted file mode 100644 index 9a195b0a62..0000000000 --- a/styles/nixos-search/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:402ceb2bf5ca2f3334348de25900f931b9c1211e0ed409cb99bcd91b70187818 -size 94340 diff --git a/styles/nixos-search/assets/frappe.webp b/styles/nixos-search/assets/frappe.webp deleted file mode 100644 index 2a05303311..0000000000 --- a/styles/nixos-search/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ed739f3896c9af47d663ce92cecafb4461e2fe1729d81a9c7128497cc3b87eac -size 91070 diff --git a/styles/nixos-search/assets/latte.webp b/styles/nixos-search/assets/latte.webp deleted file mode 100644 index 238442f5a9..0000000000 --- a/styles/nixos-search/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:cd3d455e9e4440e8f0659b0314aac41eb4ca7e99f4b26b3a4f3282198cdcc84d -size 99480 diff --git a/styles/nixos-search/assets/macchiato.webp b/styles/nixos-search/assets/macchiato.webp deleted file mode 100644 index ccdd464e6c..0000000000 --- a/styles/nixos-search/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ecb64686d80b21de4c5a4ff915ce9c4a8cc5d4ed47e8a116ff3e49d0004fa09b -size 95328 diff --git a/styles/nixos-search/assets/mocha.webp b/styles/nixos-search/assets/mocha.webp deleted file mode 100644 index 4eb1525b83..0000000000 --- a/styles/nixos-search/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:29826bd3b9a62603388a80284b219f6f992d7f12e976e77b497137d9bb2a77b1 -size 99192 diff --git a/styles/nixos-search/catppuccin.user.css b/styles/nixos-search/catppuccin.user.css deleted file mode 100644 index 6b3ee7c230..0000000000 --- a/styles/nixos-search/catppuccin.user.css +++ /dev/null @@ -1,511 +0,0 @@ -/* ==UserStyle== -@name NixOS Search Catppuccin -@namespace github.com/catppuccin/userstyles/nixos-search -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/nixos-search -@version 0.3.0 -@description Soothing pastel theme for NixOS Search -@author Catppuccin -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/nixos-search/catppuccin.user.css -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue*", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] -==/UserStyle== */ -@-moz-document domain("search.nixos.org") { - @media (prefers-color-scheme: light) { - #catppuccin(@lightFlavor, @accentColor); - } - - @media (prefers-color-scheme: dark) { - #catppuccin(@darkFlavor, @accentColor); - } - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-color: @catppuccin[@@lookup][@@accent]; - - /* Generic */ - html, - body { - background-color: @base; - color: @text; - } - - code, - pre { - color: @red; - background-color: @surface0; - border: none; - } - - a, - a:hover, - a:focus { - color: @accent-color; - outline: none; - } - - /* Navbar */ - .navbar .navbar-static-top { - background-color: @mantle; - } - - .navbar-inner { - background-color: @mantle; - background-image: none; - border: 1px solid @base; - } - - .nav-tabs { - border-bottom: 1px solid @surface0; - } - - .nav-tabs > .active > a, - .nav-tabs > .active > a:hover, - .nav-tabs > .active > a:focus { - background-color: @base; - border: 1px solid @surface0; - color: @text; - } - - .navbar .nav > li > a { - text-shadow: none; - color: @subtext0; - } - - .navbar .nav > li > a:focus, - .navbar .nav > li > a:hover { - color: @text; - border: none; - } - - .navbar .nav > .active > a, - .navbar .nav > .active > a:hover, - .navbar .nav > .active > a:focus { - background-color: @surface0; - color: @text; - } - - /* Installation instructions tabs */ - .nav > li > a:hover, - .nav > li > a:focus { - background-color: @surface0; - border: 1px solid @surface0; - } - - /* "Experimental" label */ - .label, - .badge { - background-color: @accent-color; - color: @crust; - text-shadow: none; - } - - /* Buttons */ - .btn { - background-color: @surface0; - background-image: none; - text-shadow: none; - box-shadow: none; - color: @text; - border: 1px solid @base; - } - - .btn:focus { - outline: none; - color: @text; - background-color: @surface1; - } - - .btn:hover, - .btn:active, - .btn.active, - .btn.disabled, - .btn[disabled] { - background-color: @surface1; - color: @text; - } - - /* "Sort" menu */ - .dropdown-menu { - background-color: @mantle; - border: 1px solid @crust; - box-shadow: 0 5px 10px @mantle; - } - - .dropdown-menu > li > a { - color: @text; - } - - .dropdown-menu > li > a:hover, - .dropdown-menu > li > a:focus, - .dropdown-submenu:hover > a, - .dropdown-submenu:focus > a { - background-color: @surface0; - background-image: none; - } - - .dropdown-menu .divider { - background-color: @surface0; - border-bottom: @surface0; - } - - .dropdown .caret { - border-top: 4px solid @text; - } - - /* Overrides menu item hover color */ - .search-page - > .search-results - > div - > :first-child - > div:first-child - > ul - > li - > a { - color: @text; - } - - /* Loading indicator */ - .loader { - color: @crust; - } - - /* Input box */ - textarea, - input[type="text"], - input[type="password"], - input[type="datetime"], - input[type="datetime-local"], - input[type="date"], - input[type="month"], - input[type="time"], - input[type="week"], - input[type="number"], - input[type="email"], - input[type="url"], - input[type="search"], - input[type="tel"], - input[type="color"], - .uneditable-input { - background-color: @surface0; - color: @text; - border: 1px solid @base; - } - - textarea:focus, - input[type="text"]:focus, - input[type="password"]:focus, - input[type="datetime"]:focus, - input[type="datetime-local"]:focus, - input[type="date"]:focus, - input[type="month"]:focus, - input[type="time"]:focus, - input[type="week"]:focus, - input[type="number"]:focus, - input[type="email"]:focus, - input[type="url"]:focus, - input[type="search"]:focus, - input[type="tel"]:focus, - input[type="color"]:focus, - .uneditable-input:focus { - border-color: @accent-color; - box-shadow: - inset 0 1px 1px @crust, - 0 0 8px @accent-color; - } - - /* Fix input box placeholder text */ - textarea::placeholder, - input[type="text"]::placeholder, - input[type="password"]::placeholder, - input[type="datetime"]::placeholder, - input[type="datetime-local"]::placeholder, - input[type="date"]::placeholder, - input[type="month"]::placeholder, - input[type="time"]::placeholder, - input[type="week"]::placeholder, - input[type="number"]::placeholder, - input[type="email"]::placeholder, - input[type="url"]::placeholder, - input[type="search"]::placeholder, - input[type="tel"]::placeholder, - input[type="color"]::placeholder, - .uneditable-input::placeholder { - color: @subtext0; - } - - /* Search results */ - .search-page > .search-results > div > :nth-child(2) > li { - border-bottom: 1px solid @surface0; - } - - .search-page > .search-results > div > :nth-child(2) > li > :first-child { - color: @accent-color; - } - - .search-page - > .search-results - > div - > :nth-child(2) - > li.package - > :nth-child(5) - > :nth-child(2) - ul.nav-tabs - > li - > a { - color: @text; - } - - .search-page - > .search-results - > div - > :nth-child(2) - > li.package - > :nth-child(5) - > :nth-child(2) - pre { - color: @text; - background-color: @mantle; - border: none; - } - - .search-page - > .search-results - > div - > :nth-child(2) - > li.package - .result-item-show-more { - background-color: @base; - color: @text; - } - - .search-page - > .search-results - > div - > :nth-child(2) - > li.package - > :nth-child(3) - > li { - color: @text; - } - - .search-page - > .search-results - > div - > :nth-child(2) - > li.package - > :nth-child(5) - > :nth-child(2) - div.tab-content { - border: 1px solid @surface0; - } - - .search-page - > .search-results - > div - > :nth-child(2) - > li.option - > :nth-child(2) - > div:nth-child(2n) - pre - code { - color: @text; - background-color: @mantle; - } - - /* Search sidebar */ - .search-page ul.search-sidebar > li { - border-color: @surface0; - } - - .search-page ul.search-sidebar > li > ul > li > a { - color: @text; - } - - .search-page ul.search-sidebar > li > ul > li > a:hover { - background-color: @surface0; - } - - .search-page ul.search-sidebar > li > ul > li > a.selected { - color: @crust; - background-color: @accent-color; - } - - /* Override sidebar labels (number of packages) */ - .search-sidebar .label, - .search-sidebar .badge { - background-color: @surface0; - color: @text; - text-shadow: none; - } - - /* Pager */ - .pager li > a, - .pager li > span { - color: @text; - background-color: @surface0; - border: none; - border-radius: 5px; - } - - .pager li > a:hover, - .pager li > a:focus { - background-color: @surface1; - transition: all; - transition-duration: 5ms; - } - - .pager .disabled > a, - .pager .disabled > a:hover, - .pager .disabled > a:focus, - .pager .disabled > span { - color: @text; - background-color: @mantle; - border: none; - border-radius: 5px; - } - } -} - -@catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; -}; diff --git a/styles/nixos-search/catppuccin.user.less b/styles/nixos-search/catppuccin.user.less new file mode 100644 index 0000000000..c3824876bd --- /dev/null +++ b/styles/nixos-search/catppuccin.user.less @@ -0,0 +1,79 @@ +/* ==UserStyle== +@name NixOS Search Catppuccin +@namespace github.com/catppuccin/userstyles/styles/nixos-search +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/nixos-search +@version 2026.05.14 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/nixos-search/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anixos-search +@description Soothing pastel theme for NixOS Search +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("search.nixos.org") { + :root:not([data-theme]) { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + :root[data-theme="dark"] { + #catppuccin(@darkFlavor); + } + + :root[data-theme="light"] { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --background-color: @base; + --badge-background: @surface2; + --button-active-background: @surface1; + --button-active-hover-background: @surface2; + --button-background: @surface0; + --button-hover-background: @surface2; + --color-active-hover-tab: @surface1; + --color-active-tab: @surface0; + --color-hover-tab: @surface1; + --headerbar-background-color: @mantle; + --hover-background: @surface0; + --link-color: @accent; + --info-label-background: @accent; + --dark-blue: @accent; + --light-blue: @accent; // used by focus outline + --line-color: @surface0; + --search-result-short-details-color: @subtext1; + --search-result-divider-line-color: @surface0; + --search-result-title-color: @accent; + --search-sidebar-link-color: @text; + --search-sidebar-selected-link-background: @accent; + --search-sidebar-selected-link-color: @crust; + --terminal-background: @surface0; + --terminal-color: @text; + --text-color: @text; + --text-color-light: @text; + --text-color-warning: @yellow; + + .badge { + color: @text; + } + /* Experimental Flakes label */ + .label { + color: @base; + text-shadow: none; + } + } +} diff --git a/styles/npm/README.md b/styles/npm/README.md new file mode 100644 index 0000000000..7eaa3d4603 --- /dev/null +++ b/styles/npm/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for npm + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/npm/catppuccin.user.less b/styles/npm/catppuccin.user.less new file mode 100644 index 0000000000..5a61b92a1b --- /dev/null +++ b/styles/npm/catppuccin.user.less @@ -0,0 +1,1134 @@ +/* ==UserStyle== +@name npm Catppuccin +@namespace github.com/catppuccin/userstyles/styles/npm +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/npm +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/npm/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anpm +@description Soothing pastel theme for npm +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("www.npmjs.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + input, + textarea { + background-color: transparent; + + &:focus { + box-shadow: 0 0 0 2px @accent; + } + } + + // TODO: Should accent-color be set in defaults? + accent-color: @accent; + + @npmGradient: linear-gradient(139deg, @peach, @maroon, @red, @pink); + + --color-fg-default: @text; + --color-fg-muted: @subtext1; + --color-fg-subtle: @subtext0; + --color-fg-on-emphasis: @base; + --color-fg-brand: @accent; + --color-fg-accent: @blue; + --color-fg-success: @green; + --color-fg-attention: @yellow; + --color-fg-danger: @red; + --color-border-strong: @surface0; + + --header-color: @text; + /* Used on deprecation confirmation page */ + --wombat-red: @maroon; + --wombat-red-hover: @red; + + --search-fg-muted: @subtext1; + --search-border: @surface0; + --search-bg-subtle: @surface0; + + &, + main { + background-color: @base !important; + color: @text; + } + + /* Primary background */ + .bg-white, + ._4ea0e50d { + background-color: @base; + } + + /* Background layer background */ + .bg-black-05, + ._7eb68a55, + .e9998f88 { + background-color: @mantle; + } + + /* Primary text */ + .black, + .black-90, + .black-80, + a { + color: @text; + } + + /* Secondary text */ + .black-70, + .black-60, + .dim:focus, + .dim:hover { + color: @subtext0; + } + + /* Inverse text */ + .white { + color: @base; + } + + /* Border colors */ + .b--black-10, + .b--black-20 { + border-color: @surface0; + } + + /* --- ARBITRARY --- */ + + /* Top loading bar */ + div.fixed.top-0.left-0.z-999 { + background-color: @accent; + } + + /* Magnifying glass icon (search box, discover packages) */ + svg g[stroke="#777777"] { + stroke: @subtext0; + } + + /* "Beta" pill */ + .a17280e0 { + color: @green; + border-color: @green; + } + /* Green checkmark */ + [fill="#107010"] { + fill: @green; + } + + /* --- HEADER --- */ + [data-test-id="notification-banner"] { + background-color: if( + @flavor = latte, + desaturate(lighten(@green, 30%), 5%), + desaturate(darken(@green, 5%), 5%) + ); + border-color: @green; + + #notification, + button[aria-label="Close notification"] { + color: if(@flavor = latte, @text, @base); + } + } + header { + border-bottom-color: @surface0; + + /* Top bar gradient */ + .e7070742 { + border-image: @npmGradient 3; + } + + /* Heart icon */ + ._0edb515f { + color: @text; + } + + /* Logo */ + a[href="/"] > svg > path { + fill: @text; + } + + /* Search box */ + form#search { + /* Search button */ + button[type="submit"] { + background-color: @subtext1; + } + + /* Search input wrapper */ + > div { + border-color: @surface0; + + &:focus-within { + border-color: @subtext1; + } + + /* Search input */ + div:has(input[type="search"]) { + background-color: @mantle; + + input[type="search"] { + color: @text; + + &:focus { + box-shadow: none; + } + + &::-webkit-search-cancel-button { + display: none; + } + } + } + + /* Search results (floating box) */ + div.list { + background-color: @base; + + ul[aria-label="Search results"] li { + border-bottom-color: @surface0; + + &:hover { + background-color: @surface1; + } + } + } + } + } + + /* Profile picture navigation */ + nav:has(> button[aria-label="Profile menu"]) { + > button { + /* Dropdown arrow */ + img[alt="avatar"] { + border-color: @text; + + + div > svg { + fill: @text; + } + } + } + + /* Popup */ + > div > div { + border-color: @surface0; + + /* Popup triangle */ + &::after { + border-bottom-color: @base; + } + &::before { + border-bottom-color: @surface0; + } + + /* Username */ + h2 { + border-bottom-color: @surface1; + + span { + color: @text; + } + } + + /* Navigation options */ + ul li a { + &:hover, + &:focus { + background-color: @crust; + } + + /* Red "Add Organization" button */ + &[href="/org/create"] { + border-color: @surface0; + color: @accent; + svg { + fill: @accent; + } + } + } + } + } + } + + /* --- HOME PAGE --- */ + + ._8c1ee087 { + background-image: + linear-gradient( + 270deg, + fade(@red, 16%) 0%, + fade(@red, 56%) 18.45%, + fade(@red, 80%) 49.67%, + fade(@red, 56%) 82.52%, + fade(@red, 19%) 99.7%, + fade(@red, 0%) 99.71%, + fade(@red, 0%) 99.72%, + fade(@red, 16%) 99.73% + ), + url("https://static-production.npmjs.com/abf53a31b2da4657a1a004ee9358551c.png"); + + a[href="/signup"] { + background-color: @yellow; + } + a[href="/products/pro"] { + background-color: @red; + border-color: @text; + } + } + article > section:nth-of-type(2) { + color: @text; + } + + /* Popular libraries section */ + #popular-libraries-header + hr { + border-color: @accent; + } + ul[aria-labelledby="popular-libraries-header"] { + li a { + border-bottom-color: @surface0; + } + } + + /* Discover packages section */ + #discover-packages-header + hr { + border-color: mix(@red, @yellow); + } + ul[aria-labelledby="discover-packages-header"] li { + a { + color: @text; + border-color: @surface0; + } + &:nth-of-type(6n+1):hover a { + color: @mauve; + border-bottom-color: @mauve; + } + &:nth-of-type(6n+2):hover a { + color: @green; + border-bottom-color: @green; + } + &:nth-of-type(6n+3):hover a { + color: @sky; + border-bottom-color: @sky; + } + &:nth-of-type(6n+4):hover a { + color: @red; + border-bottom-color: @red; + } + &:nth-of-type(6n+5):hover a { + color: @yellow; + border-bottom-color: @yellow; + } + &:nth-of-type(6n+6):hover a { + color: @pink; + border-bottom-color: @pink; + } + } + + /* By the numbers section */ + ._8f26e3fd { + border-color: @yellow; + } + + /* Recently updated packages section */ + #recently-updated-packages-header + hr { + border-color: @accent; + } + + /* --- PACKAGE PAGES --- */ + + /* Deprecation warning */ + .bg-washed-red { + background-color: fade(@red, 30%); + + code { + background-color: @mantle; + color: @text; + } + } + .red { + color: @red !important; + } + + /* "public" text */ + ._813b53b2 { + color: @green; + } + /* TypeScript logo */ + img[alt="TypeScript icon, indicating that this package has built-in type declarations"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + /* DefinitelyTyped logo */ + img[alt="DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/bootstrap package"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + /* Navigation tabs */ + #package-tab(@color) { + border-color: @color; + + &:has(> a[aria-selected="false"]):hover, + &:has(> a[aria-selected="true"]) { + background-color: fade(@color, 20%); + } + + a { + color: @color; + } + } + ul[aria-owns*="package-tab-"] { + li { + &:has(#package-tab-readme), + &:has(#package-tab-members) { + #package-tab(@yellow); + } + &:has(#package-tab-code), + &:has(#package-tab-admin), + &:has(#package-tab-packages) { + #package-tab(@red); + } + &:has(#package-tab-dependents), + &:has(#package-tab-billing) { + #package-tab(@mauve); + } + &:has(#package-tab-dependencies) { + #package-tab(@pink); + } + &:has(#package-tab-versions) { + #package-tab(@sapphire); + } + &:has(#package-tab-orgs), + &:has(#package-tab-teams) { + #package-tab(@green); + } + } + } + + /* Sidebar icons */ + svg:has(+ p > [aria-label="Copy install command line"]), + button[aria-label="Copy install command line"] svg path, + [aria-labelledby="repository repository-link"] svg g, + [aria-labelledby="homePage homePage-link"] svg path, + [aria-label="Showing weekly downloads"] svg { + fill: @text; + } + /* Copy install command box */ + p:has(button[aria-label="Copy install command line"]) { + border-color: @surface0; + } + /* Weekly downloads chart */ + div:has(> svg > [class^="sparkline--"]) { + border-bottom-color: fade(@accent, 20%); + + svg { + stroke: @accent; + fill: fade(@accent, 20%); + } + } + + /* Sidebar provenance popup */ + button[aria-label="View more provenance details"] { + + div > div > div { + background-color: @base; + border-color: @surface0; + + &::after { + border-bottom-color: @base; + } + + &::before { + border-bottom-color: @surface0; + } + + > div { + div:nth-of-type(2) { + border-color: @surface0; + } + } + } + } + ._1e07caeb { + color: @text; + } + ._9666fddd, + ._861fb12a, + ._2160593e { + color: @subtext0; + } + /* Provenance icon */ + .f97c6116 { + fill: @green; + } + /* Provenance section at bottom */ + #provenance-details-header + div { + border-color: @surface0; + } + + /* Sidebar text */ + .c84e15be { + color: @subtext0; + } + + /* Tab headings */ + + [id^="tabpanel-"] h2 { + color: @text; + } + + /* File explorer tab */ + #tabpanel-explore > div > div { + border-color: @surface0; + + > div:has(h2), + div:has(+ pre) { + border-bottom-color: @surface0; + } + + /* Back button inside file */ + ._450b46e9 { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + ul li { + border-bottom-color: @surface0; + + &:hover { + background-color: @surface0; + } + + img { + @folder: escape( + '' + ); + @file: escape( + '' + ); + &._1528cda6 { + content: url("data:image/svg+xml,@{folder}"); + } + &._7ec1ed32 { + content: url("data:image/svg+xml,@{file}"); + } + } + } + + /* File paths/link */ + button, + /* Loading spinner */ + svg:has(> circle) { + color: @text !important; + } + + div:has(+ pre) { + background-color: @mantle; + } + pre { + background-color: @base !important; + color: @text !important; + + .react-syntax-highlighter-line-number { + color: @subtext1 !important; + } + + [style="color: rgb(102, 102, 102);"] { + color: var(--color-prettylights-syntax-comment) !important; + } + [style="color: rgb(150, 152, 150);"] { + color: @overlay0 !important; + } + [style="color: rgb(0, 92, 197);"] { + color: var(--color-prettylights-syntax-constant) !important; + } + [style="color: rgb(215, 58, 73);"], + [style="color: rgb(0, 134, 179);"] { + color: var(--color-prettylights-syntax-keyword) !important; + } + [style="color: rgb(3, 47, 98);"] { + color: var(--color-prettylights-syntax-string) !important; + } + [style="color: rgb(111, 66, 193);"] { + color: var(--color-prettylights-syntax-entity) !important; + } + [style*="color: rgb(223, 80, 0);"] { + color: @peach !important; + } + [style*="color: rgb(99, 163, 92);"] { + color: @green !important; + } + + .hljs-subst, + .hljs-built_in { + color: var(--color-prettylights-syntax-storage-modifier-import) + !important; + } + } + } + + /* Versions tab */ + #tabpanel-versions { + ul li[class] div { + border-bottom-color: @surface0; + } + } + + /* Dependencies/dependents tab */ + #tabpanel-dependencies, + #tabpanel-dependents { + ul a { + color: @accent; + + &:hover { + color: @text; + } + } + } + + /* Readme tab */ + #tabpanel-readme #readme { + color: @text; + a { + color: @accent; + } + h1, + h2, + h3, + h4, + h5, + h6 { + color: @text; + a, + svg { + color: @text; + fill: @text; + } + } + p, + li { + color: @subtext0; + } + strong { + color: @text; + } + pre, + code { + background-color: @mantle; + color: @text; + } + pre.editor.editor-colors { + .keyword, + .storage.type { + color: var(--color-prettylights-syntax-keyword); + font-weight: normal; // stylelint-disable-line property-disallowed-list + } + .string { + color: var(--color-prettylights-syntax-string); + } + .variable { + color: var(--color-prettylights-syntax-variable); + } + .entity, + .function { + color: var(--color-prettylights-syntax-entity); + } + .comment { + color: var(--color-prettylights-syntax-comment); + } + .storage.type.function { + color: var(--color-prettylights-syntax-keyword); + } + .punctuation.definition:not(.string) { + color: @text; + } + .constant { + color: var(--color-prettylights-syntax-constant); + } + } + h1, + h2 { + border-bottom-color: @surface1; + } + h4 { + border-bottom-color: @surface0; + } + blockquote { + background-color: lighten(@surface0, 2%); + border-left-color: @surface2; + } + table { + color: @text; + border-bottom-style: none; + td, + th { + background-color: @base; + border-color: @surface0; + } + } + } + + /* Keyword links */ + #user-content-keywords { + color: @text; + + + ul a { + color: @accent; + + &:hover { + color: @text; + } + } + } + /* Share provenance feedback link */ + #user-content-provenance a[href=" https://github.com/npm/feedback"] { + color: @text; + } + + /* Settings */ + div[role="listitem"], + div[role="radiogroup"] { + background: @base; + } + + /* --- PROFILE PAGES --- */ + + .eaac77a6 { + color: @surface2; + } + ._34da67ba { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + ._69ab2ca0 { + border-color: @surface0; + background-color: @mantle; + } + + /* --- SETTINGS PAGES --- */ + + /* Headings */ + ._7fb5e603 h1 { + color: @text; + } + + /* Left panel */ + aside.e9998f88 { + box-shadow: none; + + ul.c63ae7fc li:hover { + background-color: @crust; + } + + /* Create organization button */ + #organizationsHeader + a[href="/org/create"] { + color: @green; + border-color: @green; + + &:hover { + color: @mantle; + background-color: @green; + } + } + } + + /* Linked accounts & recovery option settings */ + .b49405c7 { + color: @text; + } + + /* Email and password settings */ + p:has( + + div + > a[href^="/settings/"][href$="/email"] + + a[href^="/settings/"][href$="/password"] + ), + /* Delete account */ + p:has(+ a[href^="/settings/"][href$="/delete-account"]) { + color: @text; + } + + /* Access tokens settings */ + form#tokens { + table { + td { + span { + color: @subtext1; + + &:hover { + color: @text; + } + } + code { + color: @subtext0; + } + } + + div { + color: @text; + } + } + } + ._305a9f55 ._038c0473 { + border-color: @accent; + background-color: fade(@accent, 20%); + } + button[aria-label^="Delete token ending in"] { + ._305a9f55 ._038c0473 & { + border-color: @surface2; + } + &.b55db0e2:hover { + border-color: @red; + background-color: @red; + color: @base; + } + } + + /* 2FA authentication page */ + ._75ce47e7 { + background-color: @base; + + ._71252860, + .d7eb966d { + color: @text; + } + + [fill="#65C6C9"], + [fill="url(#paint1_linear_449_428)"], + [fill="url(#paint0_linear_110_3043)"] { + fill: @blue; + } + [fill="url(#paint2_linear_449_428)"], + [fill="url(#paint1_linear_110_3043)"] { + fill: @base; + } + + &::before { + background-image: @npmGradient; + } + } + ._320f7a67 { + background-color: @base; + + &::before { + background-image: @npmGradient; + } + + section { + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6); + } + + div[role="radiogroup"] { + color: @text; + background-color: @surface0; + } + + #gat-banner span { + color: @yellow; + } + } + + /* Create organization page */ + .acb78000::before { + background-image: @npmGradient; + } + /* Step 1: create an org */ + .e99f3f5d { + color: @green; + } + img[src="https://static-production.npmjs.com/28dd82ec6e5fe3cfbb4d2c4ec492076b.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + /* Step 2: invite members */ + img[src="https://static-production.npmjs.com/d6654c911c7cf2159948148754c95bb6.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + div:has(> form[action="/org/create"]) { + color: @text; + + &, + + div { + border-color: @surface0; + } + } + + /* Billing information page */ + .bg-washed-green { + background-color: fade( + lighten(@teal, 10%), + if(@flavor = latte, 50%, 100%) + ); + } + .b--light-green { + border-color: @teal; + } + + /* Pricing page */ + + .dark-gray { + color: @text !important; + } + + .light-silver { + color: @subtext1; + } + + .npm-red { + color: @accent; + } + + .a11y-light-gray, + .bg-gray { + background-color: @subtext0 !important; + } + + .bg-dark-gray { + background-color: @text; + } + + .bg-light-gray, + .bg-near-white { + background-color: @surface0 !important; + } + + .npm-bg-hero, + .npm-bg-teams { + background: none; + + > .white { + color: @text; + } + } + + .npm-bg-gradient { + background-image: @npmGradient; + } + + .npm-rainbow-circle { + background-image: + linear-gradient(@crust, @crust), + @npmGradient; + } + + .npm-btn-red { + background-color: @red; + border-bottom-color: @yellow; + } + + a[href="/products/teams"].npm-title { + background-color: @red; + color: @crust; + border-color: @text; + } + + ul.featureComparisonList img[alt="feature included"] { + filter: @red-filter; + } + + /* --- GENERIC --- */ + + /* Buttons/button links */ + ._24a1e9c7 { + background-image: none; + background-color: @surface0; + color: @text; + border-color: @surface1; + + &:not([disabled]):hover { + background-color: @surface1; + } + + &[disabled] { + background-color: @mantle; + color: @subtext0; + } + + /* Danger */ + &._4a3f8f21 { + & when (@flavor = latte) { + background-color: lighten(@red, 30%); + + &:hover { + background-color: lighten(@red, 25%); + } + } + + & when not(@flavor = latte) { + background-color: @red; + color: @surface1; + + &:hover { + background-color: lighten(@red, 5%); + } + } + } + + /* Success */ + &.c37751f6 { + & when (@flavor = latte) { + background-color: lighten(@green, 30%); + + &:hover { + background-color: lighten(@green, 25%); + } + } + + & when not(@flavor = latte) { + background-color: @green; + color: @surface1; + + &:hover { + background-color: lighten(@green, 5%); + } + } + } + } + + /* Signup form */ + #signup { + /* Logged out signup button in header */ + &[href="/signup"] { + border-color: @surface0; + } + + #signup_email_error_message, + #signup_password_error_message { + color: @red; + } + + fieldset { + color: @text; + } + } + + button[name="show-hide-password"] { + background-color: transparent; + color: @text; + + &:hover { + background-color: @mantle; + } + + &::before { + background-color: @surface0; + } + } + + /* Dropdowns */ + details ul[class*="Dropdown__DropdownMenu"] { + background-color: @base; + border-color: @surface0; + + li a:hover { + background-color: @mantle !important; + color: @text !important; + } + } + /* Select menus */ + select { + background-color: @surface0; + border-color: @surface2; + color: @text; + } + + /* --- SEARCH RESULTS --- */ + nav[aria-label="Pagination Navigation"] { + div > a { + background-color: @base; + border-color: @surface0; + + &:hover { + background-color: @mantle; + } + } + } + #pkg-list-exact-match { + color: @base; + background-color: @accent; + } + + /* Username links */ + a[aria-label^="publisher"]:hover { + color: @accent; + } + + /* --- FOOTER --- */ + + footer { + h3 { + color: @text; + } + ul a:hover { + color: @accent; + } + a[href="https://github.com/npm"] svg { + > polygon { + fill: @base; + } + + > rect { + fill: @text; + } + } + a[href="https://github.com"] svg { + fill: @text; + } + &::after { + background-image: @npmGradient; + } + } + + --color-prettylights-syntax-comment: @overlay2; + --color-prettylights-syntax-constant: @teal; + --color-prettylights-syntax-entity: @blue; + --color-prettylights-syntax-storage-modifier-import: @peach; + --color-prettylights-syntax-entity-tag: @teal; + --color-prettylights-syntax-keyword: @mauve; + --color-prettylights-syntax-string: @green; + --color-prettylights-syntax-variable: @peach; + --color-prettylights-syntax-invalid-illegal-text: @red; + --color-prettylights-syntax-invalid-illegal-bg: fade(@red, 15%); + --color-prettylights-syntax-markup-heading: @teal; + --color-prettylights-syntax-markup-italic: @yellow; + --color-prettylights-syntax-markup-bold: @yellow; + --color-prettylights-syntax-markup-deleted-text: @text; + --color-prettylights-syntax-markup-deleted-bg: fade(@red, 40%); + --color-prettylights-syntax-markup-inserted-text: @text; + --color-prettylights-syntax-markup-inserted-bg: fade(@green, 40%); + --color-prettylights-syntax-markup-changed-text: @text; + --color-prettylights-syntax-markup-changed-bg: fade(@yellow, 40%); + --color-prettylights-syntax-markup-ignored-text: @text; + + /* stylelint-disable declaration-block-single-line-max-declarations */ + /* deno-fmt-ignore */ + div.highlight pre {.pl-mb,.pl-mdr,.pl-c{color:var(--color-prettylights-syntax-comment)}.pl-c1,.pl-s .pl-v{color:var(--color-prettylights-syntax-constant)}.pl-e,.pl-en{color:var(--color-prettylights-syntax-entity)}.pl-s .pl-s1,.pl-smi{color:var(--color-prettylights-syntax-storage-modifier-import)}.pl-ent{color:var(--color-prettylights-syntax-entity-tag)}.pl-k{color:var(--color-prettylights-syntax-keyword)}.pl-pds,.pl-s,.pl-s .pl-pse .pl-s1,.pl-sr,.pl-sr .pl-cce,.pl-sr .pl-sra,.pl-sr .pl-sre{color:var(--color-prettylights-syntax-string)}.pl-smw,.pl-v{color:var(--color-prettylights-syntax-variable)}.pl-bu{color:var(--color-prettylights-syntax-brackethighlighter-unmatched)}.pl-ii{color:var(--color-prettylights-syntax-invalid-illegal-text);background-color:var(--color-prettylights-syntax-invalid-illegal-bg)}.pl-c2{color:var(--color-prettylights-syntax-carriage-return-text);background-color:var(--color-prettylights-syntax-carriage-return-bg)}.pl-sr .pl-cce{color:var(--color-prettylights-syntax-string-regexp)}.pl-ml{color:var(--color-prettylights-syntax-markup-list)}.pl-mh,.pl-mh .pl-en,.pl-ms{color:var(--color-prettylights-syntax-markup-heading)}.pl-mi{color:var(--color-prettylights-syntax-markup-italic)}.pl-mb{color:var(--color-prettylights-syntax-markup-bold)}.pl-md{color:var(--color-prettylights-syntax-markup-deleted-text);background-color:var(--color-prettylights-syntax-markup-deleted-bg)}.pl-mi1{color:var(--color-prettylights-syntax-markup-inserted-text);background-color:var(--color-prettylights-syntax-markup-inserted-bg)}.pl-mc{color:var(--color-prettylights-syntax-markup-changed-text);background-color:var(--color-prettylights-syntax-markup-changed-bg)}.pl-mi2{color:var(--color-prettylights-syntax-markup-ignored-text);background-color:var(--color-prettylights-syntax-markup-ignored-bg)}.pl-mdr{color:var(--color-prettylights-syntax-meta-diff-range)}.pl-ba{color:var(--color-prettylights-syntax-brackethighlighter-angle)}.pl-sg{color:var(--color-prettylights-syntax-sublimelinter-gutter-mark)}.pl-corl{text-decoration:underline;color:var(--color-prettylights-syntax-constant-other-reference-link)}} + /* stylelint-enable declaration-block-single-line-max-declarations */ + } +} diff --git a/styles/npmx/README.md b/styles/npmx/README.md new file mode 100644 index 0000000000..b7018c3831 --- /dev/null +++ b/styles/npmx/README.md @@ -0,0 +1,37 @@ + + + +

+ Logo
+ + Catppuccin for npmx + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + +> [!NOTE] +> npmx-specific accent color appearance options at https://npmx.dev/settings are overriden by this userstyle. + +## 💝 Current Maintainer +- [42willow](https://github.com/42willow) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/npmx/catppuccin.user.less b/styles/npmx/catppuccin.user.less new file mode 100644 index 0000000000..934ca72292 --- /dev/null +++ b/styles/npmx/catppuccin.user.less @@ -0,0 +1,73 @@ +/* ==UserStyle== +@name npmx Catppuccin +@namespace github.com/catppuccin/userstyles/styles/npmx +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/npmx +@version 2026.04.13 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/npmx/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anpmx +@description Soothing pastel theme for npmx +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("npmx.dev") { + :root[data-theme="dark"][data-bg-theme] { + #catppuccin(@darkFlavor); + } + :root[data-theme="light"][data-bg-theme] { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --bg: @base; + --bg-subtle: @mantle; + --bg-muted: @crust; + --bg-elevated: @surface0; + + --fg: @text; + --fg-subtle: @overlay1; + --fg-muted: @subtext0; + --fg-elevated: @subtext0; + + --accent: @accent; + --accent-muted: @accent; + + --border: @surface1; + --border-subtle: @surface0; + --border-hover: @overlay0; + + --swatch-sky: @sky; + --swatch-coral: @peach; + --swatch-amber: @yellow; + --swatch-emerald: @green; + --swatch-violet: @mauve; + --swatch-magenta: @pink; + --swatch-neutral: @text; + + --badge-orange: @peach; + --badge-yellow: @yellow; + --badge-green: @green; + --badge-cyan: @teal; + --badge-blue: @blue; + --badge-indigo: @lavender; + --badge-purple: @mauve; + --badge-pink: @pink; + + --colors-red-500: @red; + --colors-emerald-500: @green; + --colors-yellow-600: @yellow; + --colors-amber-500: @peach; + --colors-emerald-400: @green; + --colors-orange-500: @peach; + } +} diff --git a/styles/ollama/README.md b/styles/ollama/README.md new file mode 100644 index 0000000000..e875eed46e --- /dev/null +++ b/styles/ollama/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Ollama + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [NeonGamerBot-QK](https://github.com/NeonGamerBot-QK) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/ollama/catppuccin.user.less b/styles/ollama/catppuccin.user.less new file mode 100644 index 0000000000..d25172300f --- /dev/null +++ b/styles/ollama/catppuccin.user.less @@ -0,0 +1,211 @@ +/* ==UserStyle== +@name Ollama Catppuccin +@namespace github.com/catppuccin/userstyles/styles/ollama +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ollama +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ollama/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aollama +@description Soothing pastel theme for Ollama +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("ollama.com") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.css"); + + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + background-color: @base; + color: @text; + + /* Llama logos */ + img[src="/public/ollama.png"], + img[src="/public/shades.png"], + img[src="/public/glasses.png"] { + filter: @text-filter; + } + + code, + pre { + background-color: @mantle; + color: @text !important; + } + + input { + background-color: @mantle; + } + + main, + section, + strong, + h3, + ul, + button, + li, + li::marker { + color: @text; + } + blockquote { + color: @subtext0; + } + + a[class~=""] { + color: @blue; + } + + #query, + #filter, + #search { + background-color: @mantle; + color: @text; + } + #readme, + #display, + #file-explorer { + color: @text; + } + + .command { + color: @text; + } + .truncate { + color: @text; + } + + /* Tailwind */ + + * { + border-color: @surface1; + } + + .prose { + --tw-prose-headings: @text; + --tw-prose-links: @accent; + } + + .text-white, + .text-black { + color: @text; + } + .text-gray-900 { + color: @subtext1; + } + .text-green-500, + .text-emerald-500, + .text-green-700 { + color: @green; + } + .text-yellow-900 { + color: @yellow; + } + .text-neutral-300, + .text-neutral-400, + .text-neutral-500 { + color: @subtext0; + } + .text-neutral-700, + .text-neutral-800, + .text-neutral-900 { + color: @subtext1 !important; + } + .text-red-500 { + color: @red; + } + .text-blue-500, + .text-blue-600 { + color: @accent; + } + /* Models page, color for non-weight pills/tags. Background color is solid from `.bg-indigo-50`. */ + .text-indigo-600 { + color: @crust; + } + + .bg-neutral-100 pre, + .bg-neutral-100 .command { + background-color: unset !important; + } + .bg-white { + background-color: @mantle; + } + .bg-black, + .hover\:bg-black:hover { + background-color: @surface0 !important; + } + .bg-neutral-50 { + background-color: @surface0; + } + .bg-neutral-100, + .hover\:bg-neutral-100:hover { + background-color: @surface2 !important; + } + .bg-neutral-700, + .bg-neutral-800 { + background-color: @surface1; + } + .bg-green-50 { + background-color: fade(@green, 10%); + } + .bg-yellow-50 { + background-color: fade(@yellow, 10%); + } + .bg-indigo-50 { + background-color: @accent; + } + .bg-\[\#ddf4ff\] { + background-color: fade(@accent, 10%); + } + + .border { + border-color: @accent; + } + .border-neutral-200, + .border-neutral-300, + .divide-gray-200 > :not([hidden]) ~ :not([hidden]), + .divide-neutral-200 > :not([hidden]) ~ :not([hidden]) { + border-color: @surface1; + } + .focus\:border-blue-400:focus { + border-color: @accent; + } + .focus\:border-red-400:focus { + border-color: @red; + } + + .ring-neutral-300 { + --tw-ring-color: @surface1 !important; + } + .ring-green-600\/20 { + --tw-ring-color: @green; + } + .ring-yellow-600\/20 { + --tw-ring-color: @yellow; + } + select:focus, + .ring-blue-300, + .focus\:ring-blue-300:focus { + --tw-ring-color: rgba(#lib.rgbify(@accent)[], var(--tw-ring-opacity)); + } + .focus\:ring-red-300:focus { + --tw-ring-color: rgba(#lib.rgbify(@red)[], var(--tw-ring-opacity)); + } + } +} diff --git a/styles/openmediavault/README.md b/styles/openmediavault/README.md new file mode 100644 index 0000000000..ea0ae16dba --- /dev/null +++ b/styles/openmediavault/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for openmediavault + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [Gandalf-the-Blue](https://github.com/Gandalf-the-Blue) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/openmediavault/catppuccin.user.less b/styles/openmediavault/catppuccin.user.less new file mode 100644 index 0000000000..0ce957c96f --- /dev/null +++ b/styles/openmediavault/catppuccin.user.less @@ -0,0 +1,227 @@ +/* ==UserStyle== +@name openmediavault Catppuccin +@namespace github.com/catppuccin/userstyles/styles/openmediavault +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/openmediavault +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/openmediavault/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aopenmediavault +@description Soothing pastel theme for openmediavault +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("openmediavault.example.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + .omv-dark-theme { + --mat-color-text: @text; + --mat-color-secondary-text: @subtext0; + --mat-color-disabled-text: @red; + --mat-color-hint-text: @blue; + --mat-background-color-hover: @accent; + --mat-background-color-selected-button: @accent; + --mat-background-color-card: @crust; + --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; + } + + .omv-dark-theme .mat-card { + background: @mantle; + color: @text; + } + + .omv-dark-theme .mat-flat-button, + .mat-fab, + .mat-mini-fab { + color: @text; + background-color: @crust; + } + .omv-dark-theme .mat-flat-button.mat-button-disabled.mat-button-disabled { + background-color: @mantle; + } + .omv-dark-theme .mat-input-element:disabled { + color: @subtext0; + } + .omv-dark-theme .mat-select-placeholder, + .omv-dark-theme .mat-select-disabled .mat-select-value { + color: @subtext0; + } + .omv-dark-theme .mat-form-field-appearance-legacy .mat-form-field-label, + .omv-dark-theme .mat-form-field-appearance-legacy .mat-hint { + color: @accent; + } + .omv-dark-theme .mat-toolbar { + background: @crust; + color: @text; + } + .omv-top-bar[_ngcontent-ydq-c112] + button[_ngcontent-ydq-c112] + .mat-icon[_ngcontent-ydq-c112] { + color: @crust; + } + .omv-top-bar[_ngcontent-ydq-c112] .hostname[_ngcontent-ydq-c112] { + color: @crust; + } + + .omv-dark-theme .mat-icon-button.mat-button-disabled.mat-button-disabled { + color: @overlay0; + } + .omv-dark-theme .mat-chip.omv-background-color-pair-green { + color: @mantle; + background-color: @green; + } + + .omv-scrollable-xy, + .omv-scrollable-y { + scrollbar-color: @accent transparent; + --scrollbar-thumb-color: @accent !important; + --scrollbar-thumb-hover-color: @accent; + } + + .omv-dark-theme .mat-button, + .omv-dark-theme .mat-icon-button, + .omv-dark-theme .mat-stroked-button { + color: @accent; + background: inherit; + } + + .omv-dark-theme .mat-pseudo-checkbox-checked, + .omv-dark-theme .mat-pseudo-checkbox-indeterminate, + .omv-dark-theme .mat-accent .mat-pseudo-checkbox-checked, + .omv-dark-theme .mat-accent .mat-pseudo-checkbox-indeterminate { + background: @accent; + } + .omv-dark-theme + .mat-checkbox-indeterminate.mat-accent + .mat-checkbox-background, + .omv-dark-theme .mat-checkbox-checked.mat-accent .mat-checkbox-background { + background-color: @accent; + } + .omv-dark-theme .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb { + background-color: @accent; + } + .omv-dark-theme .mat-slide-toggle.mat-checked .mat-slide-toggle-bar { + background-color: @accent; + } + .omv-dark-theme .mat-badge-accent .mat-badge-content { + background: @crust; + color: @accent; + } + + .omv-dark-theme .mat-select-panel { + scrollbar-color: @accent transparent; + --scrollbar-thumb-color: @accent !important; + --scrollbar-thumb-hover-color: @accent !important; + background: @crust; + } + + .omv-background-color-pair-success { + color: @mantle; + background-color: @green; + } + .omv-dark-theme + .mat-primary + .mat-option.mat-selected:not(.mat-option-disabled) { + color: @accent; + } + + .ngx-datatable.single-selection .datatable-body-row.active, + .ngx-datatable.single-selection + .datatable-body-row.active + .datatable-row-group, + .ngx-datatable.multi-selection .datatable-body-row.active, + .ngx-datatable.multi-selection + .datatable-body-row.active + .datatable-row-group, + .ngx-datatable.multi-click-selection .datatable-body-row.active, + .ngx-datatable.multi-click-selection + .datatable-body-row.active + .datatable-row-group { + color: @accent; + background-color: @crust; + } + + .ngx-datatable:not(.cell-selection) .datatable-body-row:hover, + .ngx-datatable:not(.cell-selection) + .datatable-body-row:hover + .datatable-row-group { + color: @crust; + background-color: @blue; + } + + .ngx-datatable.single-selection .datatable-body-row.active:hover, + .ngx-datatable.single-selection + .datatable-body-row.active:hover + .datatable-row-group, + .ngx-datatable.multi-selection .datatable-body-row.active:hover, + .ngx-datatable.multi-selection + .datatable-body-row.active:hover + .datatable-row-group, + .ngx-datatable.multi-click-selection .datatable-body-row.active:hover, + .ngx-datatable.multi-click-selection + .datatable-body-row.active:hover + .datatable-row-group { + color: @crust; + background-color: @green; + } + + .omv-dark-theme .mat-menu-item { + background: @crust; + color: @text; + } + + .omv-dark-theme .mat-menu-panel { + background: @crust; + } + + [_nghost-ckr-c138] + .content[_ngcontent-ckr-c138] + omv-intuition-form-page[_ngcontent-ckr-c138] + .mat-card { + color: @text; + background-color: @mantle; + } + + .mat-flat-button.omv-background-color-pair-primary { + color: @text; + background-color: @crust; + } + + .omv-dark-theme .mat-dialog-container { + background: @crust; + color: @text; + } + + .omv-background-color-pair-terminal { + color: @green; + background-color: @mantle; + } + } +} diff --git a/styles/paste.rs/README.md b/styles/paste.rs/README.md index 18ccf57bda..2ad2ab3639 100644 --- a/styles/paste.rs/README.md +++ b/styles/paste.rs/README.md @@ -10,37 +10,18 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +## 💝 Current Maintainer +- [Guaxinim5573](https://github.com/Guaxinim5573) -## 💝 Current Maintainer(s) +## 💖 Past Maintainer - [Stonks3141](https://github.com/Stonks3141)   diff --git a/styles/paste.rs/assets/catwalk.webp b/styles/paste.rs/assets/catwalk.webp deleted file mode 100644 index a9350bdae6..0000000000 --- a/styles/paste.rs/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7374c1ae5fdf4d4d70bdf337404fe3b352198d81ca7c5158bfeb2d7f4d5e1643 -size 72522 diff --git a/styles/paste.rs/assets/frappe.webp b/styles/paste.rs/assets/frappe.webp deleted file mode 100644 index b1b1e47cb5..0000000000 --- a/styles/paste.rs/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0c7d4968f497efad82a2ba2c2837447fed0c2fb52032e559b69f4077c6b72a46 -size 42392 diff --git a/styles/paste.rs/assets/latte.webp b/styles/paste.rs/assets/latte.webp deleted file mode 100644 index 583d2fd7ee..0000000000 --- a/styles/paste.rs/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:331c6cf1a30fb0c576f3d3e5736215570af53e1b075dd4e8727687dc2b00bad4 -size 43516 diff --git a/styles/paste.rs/assets/macchiato.webp b/styles/paste.rs/assets/macchiato.webp deleted file mode 100644 index 45285140dd..0000000000 --- a/styles/paste.rs/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a66ff9dd08bbb3f2e80051f1b1f671a5b6eb9174239da66cae39a93dcd03403f -size 44236 diff --git a/styles/paste.rs/assets/mocha.webp b/styles/paste.rs/assets/mocha.webp deleted file mode 100644 index 08ffd9c5b7..0000000000 --- a/styles/paste.rs/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7223a895e77361eb839189650e5548b4914c406d4fa202a5fdeaf093c506bb8a -size 45784 diff --git a/styles/paste.rs/catppuccin.user.css b/styles/paste.rs/catppuccin.user.css deleted file mode 100644 index 8e4a5a0b63..0000000000 --- a/styles/paste.rs/catppuccin.user.css +++ /dev/null @@ -1,243 +0,0 @@ -/* ==UserStyle== -@name paste.rs Catppuccin -@namespace github.com/catppuccin/userstyles/styles/paste.rs -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/paste.rs -@version 0.0.1 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/paste.rs/catppuccin.user.css -@description Soothing pastel theme for paste.rs -@author Catppuccin -@license MIT - -@preprocessor less -@var select flavor "Flavor" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire*", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] -==/UserStyle== */ -@-moz-document domain("paste.rs") { - #catppuccin(@flavor, @accentColor); - - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-color: @catppuccin[@@lookup][@@accent]; - - body { - background-color: @mantle; - color: @text; - font-family: sans-serif; - } - a { - color: @accent; - } - - /* Web UI */ - textarea, - select, - input[type="submit"] { - background-color: @base; - color: @text; - border: 1px solid @overlay0; - border-radius: 4px; - } - textarea:focus, - select:focus, - input[type="submit"]:focus { - border-color: @accent; - outline: 1px solid @overlay0; - } - input[type="submit"]:hover { - background-color: @mantle; - } - - /* Syntax-highlighted code */ - pre { - background-color: @base !important; - } - /* Main text */ - span[style="color:#657b83;"] { - color: @text !important; - } - /**/ - span[style="color:#859900;"] { - color: @yellow !important; - } - /**/ - span[style="color:#268bd2;"] { - color: @sky !important; - } - /* Comments */ - span[style="color:#93a1a1;"] { - color: @overlay1 !important; - } - /**/ - span[style="color:#b58900;"] { - color: @yellow !important; - } - /**/ - span[style="color:#586e75;"] { - color: @mauve !important; - } - /* Quotes */ - span[style="color:#839496;"] { - color: @green !important; - } - /* String literals */ - span[style="color:#2aa198;"] { - color: @green !important; - } - /**/ - span[style="color:#6c71c4;"] { - color: @teal !important; - } - /* self/this */ - span[style="color:#d33682;"] { - color: @red !important; - } - /* Constants */ - span[style="color:#cb4b16;"] { - color: @peach !important; - } - /* String escape sequences */ - span[style="color:#dc322f;"] { - color: @maroon !important; - } - } -} diff --git a/styles/paste.rs/catppuccin.user.less b/styles/paste.rs/catppuccin.user.less new file mode 100644 index 0000000000..69eda3ca07 --- /dev/null +++ b/styles/paste.rs/catppuccin.user.less @@ -0,0 +1,171 @@ +/* ==UserStyle== +@name paste.rs Catppuccin +@namespace github.com/catppuccin/userstyles/styles/paste.rs +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/paste.rs +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/paste.rs/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apaste.rs +@description Soothing pastel theme for paste.rs +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("paste.rs") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + body { + background-color: @base; + color: @text; + } + + a { + color: @accent; + } + + /* Web UI */ + textarea, + select, + input[type="submit"] { + background-color: @base; + color: @text; + border-color: @overlay0; + border-radius: 4px; + } + textarea:focus, + select:focus, + input[type="submit"]:focus { + border-color: @accent; + outline-color: @overlay0; + } + input[type="submit"]:hover { + background-color: @mantle; + } + + main { + color: @text; + border-color: @surface0; + } + + .code.gutter { + background-color: @base !important; + span { + /* Line Numbers */ + color: @overlay0 !important; + } + } + + article.markdown-body { + color: @text; + + h6 { + color: @text; + } + + a { + color: @accent; + } + + img { + background: none; + } + + pre { + background: @surface0; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + border-color: @surface0; + } + + blockquote { + border-color: @surface1; + + p { + color: @text; + } + } + + table { + border-color: @surface0 !important; + tr, + th, + td { + border-color: @surface1; + background: none !important; + } + } + } + + /* Syntax-highlighted code */ + .code.text > pre { + background-color: @base !important; + background-image: none; + + span { + color: red !important; + } + + /* General Text, Braces, Delimiters, Parameters, Classes, Metadata */ + span[style*="color:#323232"] { + color: @text !important; + } + + /* Keywords, Operators */ + span[style*="color:#a71d5d"] { + color: @mauve !important; + } + + /* Strings */ + span[style*="color:#183691"], + span[style*="color:#ed6a43"] { + color: @green !important; + } + + /* Comments */ + span[style*="color:#969896"] { + color: @overlay2 !important; + } + + /* Constants, Numbers */ + span[style*="color:#0086b3"] { + color: @peach !important; + } + + /* Methods, Functions */ + span[style*="color:#795da3"], + span[style*="color:#62a35c"], + span[style*="color:#63a35c"] { + color: @blue !important; + } + + /* Errors */ + span[style*="background-color:#f5f5f5"][style*="color:#b52a1d"] { + color: @text !important; + background: fade(@red, 60%) !important; + } + } + } +} diff --git a/styles/perplexity/README.md b/styles/perplexity/README.md new file mode 100644 index 0000000000..486d85f57e --- /dev/null +++ b/styles/perplexity/README.md @@ -0,0 +1,37 @@ + + + +

+ Logo
+ + Catppuccin for Perplexity + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [Tnixc](https://github.com/Tnixc) + +## 💖 Past Maintainer +- [isabelroses](https://github.com/isabelroses) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/perplexity/catppuccin.user.less b/styles/perplexity/catppuccin.user.less new file mode 100644 index 0000000000..c8009c37d8 --- /dev/null +++ b/styles/perplexity/catppuccin.user.less @@ -0,0 +1,450 @@ +/* ==UserStyle== +@name Perplexity Catppuccin +@namespace github.com/catppuccin/userstyles/styles/perplexity +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/perplexity +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/perplexity/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aperplexity +@description Soothing pastel theme for Perplexity +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("perplexity.ai") { + :root:not([data-color-scheme="dark"]) { + #catppuccin(@lightFlavor); + } + :root, + :root:not([data-color-scheme="light"]) { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + ::selection { + background-color: fade(@accent, 30%) + !important; // TODO: Has !important unlike the defaults. Add !important to defaults? + color: @text + !important; // TODO: Another case of setting the text color in the selection. + } + + body { + background-color: @mantle !important; + } + .bg-\[red\] { + background-color: @red !important; + } + + .bg-alert { + background-color: @peach !important; + } + .bg-text-100 { + background-color: @text !important; + } + + .bg-backdrop-lightbox\/95 { + background-color: @crust !important; + } + + .bg-backdrop\/70 { + background-color: @mantle !important; + } + + .bg-background, .bg-background-50 { + background-color: @base !important; + } + + .bg-background-100 { + background-color: @base !important; + } + + .bg-background-300, .bg-background-200 { + background-color: @mantle !important; + } + + .bg-background-super-alt { + background-color: @accent !important; + } + + .bg-backgroundDark { + background-color: @surface0 !important; + } + + .bg-black, + .bg-black\/30, + .bg-black\/40, + .bg-black\/50, + .bg-black\/60, + .bg-black\/80 { + background-color: @crust !important; + } + + .bg-borderMain { + background-color: @surface1 !important; + } + + .bg-idle, + .bg-idle\/70 { + background-color: @surface0 !important; + } + + .bg-offset, + .bg-offsetDark, + .bg-offset\/50 { + background-color: @mantle !important; + } + + .bg-offsetPlus { + background-color: @surface0 !important; + } + + .bg-offsetPlusDark, + .dark\:\!bg-offsetPlusDark:where( + [data-color-scheme="dark"] .dark\:\!bg-offsetPlusDark, + [data-color-scheme="dark"] .dark\:\!bg-offsetPlusDark * + ) { + background-color: @mantle !important; + } + + .bg-super, + .bg-superAlt, + .bg-superBG, + .bg-superBGDark, + .bg-superDark, + .bg-superDark\/100, + .bg-super\/100 { + background-color: @accent !important; + } + .bg-super\/10, + .bg-superDark\/10 { + background-color: fade(@accent, 10%) !important; + } + + .bg-textMain { + background-color: @crust !important; + } + + .bg-textMainDark, + .bg-textMain\/10 { + background-color: @text !important; + } + + .bg-textOff { + background-color: @subtext1 !important; + } + + .bg-textOffDark, + .bg-textOff\/50 { + background-color: @subtext0 !important; + } + + .bg-white, + .bg-white\/30, + .bg-white\/50, + .bg-white\/80 { + background-color: @text !important; + } + + .text-background { + color: @base !important; + } + + .text-black { + color: @crust !important; + } + + .text-offset { + color: @mantle !important; + } + + .text-orange-400 { + color: @peach !important; + } + + .text-super, + .text-superAlt, + .text-superDark, + .text-superDuper { + color: @accent !important; + } + + .text-textMain { + color: @text !important; + } + + .text-textMainDark, + .text-textOff { + color: @subtext1 !important; + } + + .text-textOff\/50 { + color: @subtext0 !important; + } + + .text-textOffDark { + color: @subtext1 !important; + } + + .text-textOffDark\/50 { + color: @subtext0 !important; + } + + .text-white { + color: @crust !important; + } + + .text-default { + color: @text !important; + } + + .text-zinc-700 { + color: @subtext1 !important; + } + + .stroke-background { + stroke: @surface0 !important; + } + + .stroke-super, + .stroke-superAlt, + .stroke-superDark { + stroke: @accent !important; + } + + .stroke-textMain { + stroke: @text !important; + } + + .stroke-textMainDark, + .stroke-textOff { + stroke: @subtext1 !important; + } + + .stroke-textOffDark { + stroke: @subtext0 !important; + } + + .fill-backgroundDark { + fill: @base !important; + } + + .fill-super, + .fill-superAlt, + .fill-superDark { + fill: @accent !important; + } + + .fill-textMain, + .fill-textMainDark { + fill: @text !important; + } + + .fill-textOff, + .fill-textOffDark { + fill: @subtext1 !important; + } + + .border-\[black\]\/10 { + border-color: fade(@mantle, 10%) !important; + } + + .border-background, + .border-black\/10, + .border-black\/5 { + border-color: @mantle !important; + } + .dark\:border-borderMainDark:where( + [data-color-scheme="dark"] .dark\:border-borderMainDark, + [data-color-scheme="dark"] .dark\:border-borderMainDark * + ), + .border-borderMain { + border-color: @surface1 !important; + } + + .border-borderMain\/10, + .border-borderMain\/50, + .border-borderMain\/75 { + border-color: @surface0 !important; + } + + .border-borderMainDark { + border-color: @base !important; + } + + .border-offsetPlus { + border-color: @mantle !important; + } + + .border-super, + .border-super\/10, + .border-super\/100 { + border-color: @accent !important; + } + + .border-textMain\/0 { + border-color: transparent !important; + } + + .border-textMainDark { + border-color: @mantle !important; + } + + .border-textOff\/50 { + border-color: @subtext0 !important; + } + + .border-b-offset { + border-bottom-color: @subtext0 !important; + } + .group:hover [class*="group-hover:text-superDark"] { + color: @accent !important; + } + + [class*="hover:!bg-superAlt/20"]:hover { + background-color: @accent !important; + } + + [class*="data-[focused=self]:bg-background-200"]:focus, + [class*="hover:bg-background-200"]:hover { + background-color: @crust !important; + } + + [class*=":hover:bg-offset"]:hover, [class*="hover:bg-offset"]:hover { + background-color: @surface0 !important; + } + + [class*="hover:bg-offsetPlus"]:hover { + background-color: @surface1 !important; + } + + [class*="hover:bg-super"]:hover { + background-color: @accent !important; + } + + [class*="hover:text-super"]:hover, + [class*="hover:text-superAlt"]:hover { + color: @accent !important; + } + + [class*="hover:text-textMain"]:hover { + color: @text !important; + } + + [class*="hover:text-textOff"]:hover { + color: @subtext0 !important; + } + + [class*="hover:text-white"]:hover { + color: @text !important; + } + + [data-focused="self"] { + background-color: @surface1 !important; + } + + .dark\:divide-borderMainDark\/50:where( + [data-color-scheme="dark"] .dark\:divide-borderMainDark\/50, + [data-color-scheme="dark"] .dark\:divide-borderMainDark\/50 * + ) + > :not([hidden]) + ~ :not([hidden]), + .divide-borderMain\/50 > :not([hidden]) ~ :not([hidden]) { + border-color: @surface1 !important; + } + + .focus\:\!border-backgroundDark:focus { + border-color: @mantle !important; + } + + .focus\:bg-background:focus { + background-color: @base !important; + } + + .focus\:text-super:focus { + color: @accent !important; + } + + .focus-visible\:bg-offsetPlus:focus-visible { + background-color: @crust !important; + } + + *[class*="ring"] { + --tw-ring-color: @surface2 !important; + --tw-ring-offset-color: @mantle !important; + } + + .caret-superDuper { + caret-color: @accent !important; + } + .data-\[state\=checked\]\:bg-super[data-state="checked"] { + background-color: @accent !important; + } + + /* Additional fixes: */ + + .scrollbar-thumb-idle { + --scrollbar-thumb: @surface1 !important; + } + + /* gradient on super long prompt */ + div[style="background: linear-gradient(transparent, currentcolor);"] { + background: linear-gradient(transparent, @base) !important; + } + + /* citations */ + .citation:hover * { + color: @crust !important; + } + /* switch knob in settings */ + .data-\[state\=checked\]\:before\:\!bg-super[data-state="checked"]::before { + background-color: @accent !important; + } + /* switch in main input */ + #copilot-toggle > div::before { + background-color: @overlay1; + } + + /* credits on image view */ + #__next + > div:nth-child(26) + > div:nth-child(2) + > div + > div + > div.gap-md.mx-md.py-md.border-borderMainDark.flex.h-\[74px\].items-center.justify-between.border-b-2 + > div.gap-x-md.flex.items-center + > a + > div + > div + > div.line-clamp-1.break-all.transition-all.duration-300.white.font-sans.text-sm.text-white.selection\:bg-super\/50.selection\:text-textMain.dark\:selection\:bg-superDuper\/10.dark\:selection\:text-superDark { + color: @text !important; + } + + /* research goals in pro search */ + .research-goal::before { + border-color: @surface1; + } + .research-goal-title:hover { + background-color: @surface0; + } + .research-goal-timeline { + background-color: @surface1; + } + + .\!bg-transparent { + background: transparent !important; + } + } +} + +#rgbify(@color) { + @rgb: red(@color) green(@color) blue(@color); +} diff --git a/styles/phanpy/README.md b/styles/phanpy/README.md new file mode 100644 index 0000000000..37f382ba58 --- /dev/null +++ b/styles/phanpy/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Phanpy + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [Guaxinim5573](https://github.com/Guaxinim5573) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/phanpy/catppuccin.user.less b/styles/phanpy/catppuccin.user.less new file mode 100644 index 0000000000..667c2fcbc4 --- /dev/null +++ b/styles/phanpy/catppuccin.user.less @@ -0,0 +1,88 @@ +/* ==UserStyle== +@name Phanpy Catppuccin +@namespace github.com/catppuccin/userstyles/styles/phanpy +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/phanpy +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/phanpy/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aphanpy +@description Soothing pastel theme for Phanpy +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("phanpy.social") { + :root:not(:has(.is-light)) { + #catppuccin(@darkFlavor); + } + :root.is-light { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --text-color: @text; + --text-insignificant-color: @subtext0; + --link-color: @accent; + --link-text-color: @accent; + --link-faded-color: @accent; + --link-light-color: @accent; + --button-bg-blur-color: @accent; + --button-bg-color: @accent; + --button-text-color: @base; + --bg-faded-color: @base; + --bg-faded-blur-color: @mantle; + --bg-blur-color: @mantle; + --close-button-bg-color: @mantle; + --close-button-color: @subtext0; + --bg-color: @base; + --link-bg-hover-color: @mantle; + --divider-color: @surface0; + --outline-color: @surface0; + --outline-hover-color: @surface2; + --reblog-faded-color: fade(@mauve, 20%); + --reblog-color: @mauve; + --reply-to-faded-color: fade(@yellow, 20%); + --reply-to-text-color: @yellow; + --reply-to-color: @yellow; + --favourite-color: @red; + --green-color: @green; + --red-color: @red; + --comment-line-color: @surface1; + --media-bg-color: @base; + --media-fg-color: @text; + --media-outline-color: @text; + + .szh-menu__item--disabled { + color: @subtext0; + } + + .button.plain2 { + background-color: @mantle; + } + + .replies-parent-link { + background-color: @surface0 !important; + } + + .account-container { + --original-color: @blue; + + .profile-field, + .stats, + .posting-stats-button { + background-color: @mantle; + -webkit-filter: none; + filter: none; + } + } + } +} diff --git a/styles/picrew/README.md b/styles/picrew/README.md new file mode 100644 index 0000000000..1ed85c45d8 --- /dev/null +++ b/styles/picrew/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Picrew + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [Meowcelinee](https://github.com/Meowcelinee) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/picrew/catppuccin.user.less b/styles/picrew/catppuccin.user.less new file mode 100644 index 0000000000..f595e744f3 --- /dev/null +++ b/styles/picrew/catppuccin.user.less @@ -0,0 +1,1457 @@ +/* ==UserStyle== +@name Picrew Catppuccin +@namespace github.com/catppuccin/userstyles/styles/picrew +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/picrew +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/picrew/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apicrew +@description Soothing pastel theme for Picrew +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("picrew.me") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + body { + background-color: @base !important; + color: @text !important; + } + /* language prompt */ + .header-langbox { + background: @mantle !important; + color: @text !important; + } + .header-langbox-buttons button { + background: @subtext0 !important; + color: @base !important; + } + /* header */ + .sitetop-Header { + background: @base !important; + + .splide__arrow { + background: @subtext0 !important; + } + } + .st-Header_Wrapper { + background: @yellow !important; + + .st-Header { + .sp-nav .nav-link li ul, + .sp-nav .nav-link li h2 { + border-top-color: @surface1 !important; + } + + .st-Header_Logo { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml;charset=utf8,@{svg}"); + filter: none; + } + + .st-Header_Linkicon { + color: @base !important; + } + + .menu__line { + background-color: @base !important; + } + + /* side menu close button */ + .open .menu__line--1, + .open .menu__line--3 { + background-color: @text !important; + } + } + } + .sitetop-Nav { + background: @mantle !important; + color: @text !important; + } + .splide__pagination__page { + background: @overlay1 !important; + + &.is-active { + background: @accent !important; + } + } + #home { + background: @base !important; + color: @text !important; + } + .smallNewsBox span { + color: @accent !important; + } + /* "Information" page (main page) */ + .page-info { + background-color: @mantle !important; + } + .sp_title a, + .page-info a { + color: @accent !important; + } + .rankA::before { + color: @text !important; + } + /* "welcome creator" page (main page) */ + .header_bg[data-v-2537399f] { + background: linear-gradient(90deg, @surface0, @base); + } + /* MOBILE ONLY: ad for downloading the app */ + .sitetop-appDL { + background: @mantle !important; + + .sitetop-appDL_Header .sitetop-appDL_Title .fa { + color: @accent !important; + } + } + /* "Featured Tags" section - directly above Discovery */ + .sitetop-tags { + background: @mantle !important; + + .sitetop-tags_Header .sitetop-tags_Title .fa { + color: @accent !important; + } + .recommended-tag-list .recommended-tag-list-item a { + border-color: @accent !important; + + /* tag icon before tag name */ + &::before { + color: @accent !important; + } + } + } + /* "Discovery" section (image is lightbulb) */ + .sitetop-Discovery { + background: @mantle !important; + + .sitetop-Discovery_Header { + .sitetop-Discovery_Title .fa { + color: @accent !important; + } + + .sitetop-DiscoveryList_More a { + background-color: @accent !important; + color: @base !important; + } + + .sitetop-Discovery_More { + color: @accent !important; + } + } + } + .sitetop-ImagemakerList_List li .squareSize .imagemaker_size { + background: @surface0 !important; + } + /* "Hot Now" section (image is a graph) */ + .sitetop-Hot_Title .fa { + color: @accent !important; + } + .sitetop-Hot_CountrySwitch { + background-color: @base !important; + + input:first-of-type + label::before { + background: @base !important; + } + + .sitetop-Hot_CountrySwitch_all span::after { + color: @accent !important; + } + + input:last-of-type + label span { + filter: brightness(-20%) !important; + color: @accent !important; + } + } + /* "Updated Image Makers (image (.fa) is bullhorn) */ + .sitetop-ImagemakerList { + background: @mantle !important; + } + .sitetop-ImagemakerList_Title .fa { + color: @accent !important; + } + .c_btn { + background: @surface1 !important; + color: @text !important; + border-color: @surface1 !important; + + &:hover { + background: @surface2 !important; + color: @text !important; + border-color: @surface2 !important; + } + &:focus { + box-shadow: 0 0 0 1px @accent !important; + } + } + .sitetop-info { + background-color: @mantle !important; + color: @text !important; + + h1::after { + background: @mantle !important; + } + i { + background: @mantle !important; + border-radius: 6px !important; + } + } + .title { + color: @text !important; + } + .category { + background: @base !important; + color: @text !important; + } + .date { + color: @subtext1 !important; + } + .simplebar-content-wrapper { + background-color: @mantle !important; + color: @text !important; + } + .st-Terms { + border-color: @accent !important; + border-radius: 2px !important; + } + .st-Terms_Wrapper .st-Terms a, + .st-Terms_Wrapper .st-Terms .st-Terms_Body strong { + color: @accent !important; + } + .c_select select { + background: @mantle !important; + border-color: @overlay0 !important; + } + .st-Terms_Cookie, + .st-Terms_CookieTitle { + color: @text !important; + } + .st-Terms_Footer { + background-color: @mantle !important; + color: @subtext1 !important; + } + .st-Terms_AgreeBtn { + background: @surface1 !important; + border-color: @surface1 !important; + box-shadow: 0 4px 0 @surface2 !important; + color: @text !important; + + &:hover { + background: @surface2 !important; + border-color: @surface2 !important; + box-shadow: 0 4px 0 @surface2 !important; + color: @text !important; + } + } + .popup { + background-color: @base !important; + border-color: @accent !important; + } + .popup-header { + background-color: @mantle !important; + } + .popup-body .content a { + color: @accent !important; + } + .bellicon { + color: @accent !important; + border-color: @accent !important; + } + .close-btn { + border-color: @overlay0 !important; + color: @subtext1 !important; + } + .st-Footer_Wrapper { + background-color: @mantle !important; + color: @text !important; + } + .st-Footer_Links_bottom { + background: @base !important; + color: @subtext1 !important; + } + .st-Footer .st-Footer_Links div span.st-Header_Logo { + filter: none !important; + } + .sitetop-Twitter, + .sitetop-Twitter_Title { + background-color: @mantle !important; + border-bottom-color: @overlay1 !important; + } + .item { + border-bottom-color: @surface2 !important; + } + /* login screen */ + .page-container { + .panel { + background: @mantle !important; + border-radius: 6px !important; + } + .page-header { + color: @text !important; + } + } + .login-container_sns .c_text_right { + color: @subtext0 !important; + } + /* login screen */ + .login-container { + .login-form-container { + .c_text_right a { + color: @accent !important; + } + .login-form input:focus { + box-shadow: 0 0 0 1px @accent !important; + } + } + hr.sw_hr01 { + border-color: @surface1 !important; + } + input:not([type="checkbox"], [type="radio"]) { + background: @base !important; + border-color: @surface2 !important; + border-radius: 1px !important; + color: @text !important; + } + } + .h100 { + background: @base !important; + color: @text !important; + } + .pwBox .btn-default { + color: @subtext0 !important; + } + /* search page */ + .search-Form > fieldset { + background: @base !important; + + .search-Form_Keyword .search-Form_KeywordInput:focus { + box-shadow: 0 0 0 1px @accent !important; + } + } + .search-Form_Keyword { + .search-iconBox { + color: @subtext1 !important; + } + .search-Form_KeywordInput { + background: @mantle !important; + border-color: @overlay1 !important; + color: @text !important; + } + } + .search-filterBox { + background: @base !important; + + .btn-filter { + background-color: @surface1 !important; + border-radius: 6px !important; + border-color: @surface0 !important; + color: @text !important; + } + ul .labelBox { + background: @surface1 !important; + border-color: @surface0 !important; + color: @text !important; + } + } + .search-ImagemakerList .search-ImagemakerList_Result { + background: @mantle !important; + + .squareSize .imagemaker_size { + background: @surface0 !important; + } + } + .search-ImagemakerList_UseRange li > div { + background: @surface0 !important; + border-color: @surface0 !important; + color: @text !important; + } + /* filter menu (search page) */ + .search_Modal { + ul .labelBoxlist .labelBox { + background: @surface1 !important; + border-color: @surface0 !important; + } + .squareSize, + .rectangleSize { + background: @surface0 !important; + } + .c_select::after { + color: @subtext0 !important; + } + } + .vm--container .radioBox { + background-color: @base !important; + + .radioBox_label::before { + background: @accent !important; + } + .radioBox_label::after { + border-color: @overlay1 !important; + } + } + .c_select select option { + background-color: @surface0 !important; + color: @text !important; + } + /* page selector (search page) */ + .c_pagination, + .c_pagination_num_wrapper { + background: @mantle !important; + } + .c_pagination_first_wrapper, + .c_pagination_last_wrapper { + background: @base !important; + } + .c_pagination_num.is_current span { + background: @accent !important; + color: @base !important; + } + /* image makers from a specific creator (search) */ + .creator-Header div .creator-Header_Name { + color: @accent !important; + } + .creator-ImagemakerList_Result { + background-color: @mantle !important; + .squareSize a { + .creator-ImagemakerList_UseRange { + li { + div { + background: @mantle !important; + border-color: @surface0 !important; + color: @subtext0 !important; + &::before { + color: @green !important; + } + } + } + } + .imagesizeBox { + background: @surface0 !important; + .imagemaker_size { + background: @surface1 !important; + .creator-ImagemakerList_Creator { + color: @subtext0 !important; + } + } + } + } + } + /* creator registration page */ + .creator-content + .email-register-container + .email-register-form + input:not([type="checkbox"], [type="radio"]):focus { + box-shadow: 0 0 0 1px @accent !important; + } + .creator-content + .email-register-container + .email-register-form + input:not([type="checkbox"], [type="radio"]) { + background: @mantle !important; + border-color: @surface0 !important; + color: @text !important; + } + /* "Password" field */ + .creator-content + .email-register-container + .email-register-form + fieldset + label + .att { + color: @subtext1 !important; + } + /* name validation popup */ + .is_error { + .tc_validation_input { + .tc_validation_input_message { + background: @mantle !important; + border-color: @red !important; + color: @text !important; + + &::before { + border-top-color: @red !important; + } + } + .tc_validation_input_status::after { + color: @red !important; + } + } + } + .tc_validation_input { + .tc_validation_input_message { + background: @mantle !important; + border-color: @overlay1 !important; + color: @text !important; + + &::before { + border-top-color: @overlay1 !important; + } + } + } + .is_can_use.tc_validation_input .tc_validation_input_status::after { + color: @green !important; + } + /* "Authentication Completed!" icon (registration) */ + .creator-content { + .success { + background: @surface0 !important; + border-color: @accent !important; + + &::after { + border-left-color: @accent !important; + border-bottom-color: @accent !important; + } + } + /* "Terms of Use" and "Privacy Policy" links */ + .email-register-container .email-register-form fieldset a { + color: @accent !important; + } + } + /* creator page */ + /* sidebar (creator/info page) */ + .tc_sidebar_im_tmb { + background-color: @subtext0 !important; + border-color: @subtext0 !important; + } + .tc_sidebar { + background-color: @mantle !important; + color: @text !important; + border-right-color: @surface2; + + .nav > li a:hover, + .nav > li a:focus { + background-color: @surface0 !important; + } + } + .tc_sidebar_lang { + background-color: @surface0 !important; + } + .tc_sidebar_basic_wrapper .tc_sidebar_basic_title { + background-color: @base !important; + } + .nav > li > a { + color: @text !important; + } + /* header (creator/info page) */ + .tc_page_header { + background: @mantle !important; + border-color: @surface2 !important; + } + .border-bottom { + border-bottom-color: @surface2 !important; + } + .text-white { + color: @text !important; + } + .navbar-light .navbar-nav .nav-link { + color: @subtext0 !important; + + &:hover { + color: @subtext1 !important; + } + } + /* main body (creator/info page) */ + .gray-bg { + background-color: @base !important; + } + .card-body { + background-color: @mantle !important; + border-color: @surface2 !important; + } + .badge-info { + background-color: @surface2 !important; + border-color: @surface2 !important; + } + .footer { + background: none repeat scroll 0 @mantle !important; + border-top-color: @surface2 !important; + } + .small > a { + color: @accent !important; + } + /* "Creator Informations" pages (creator/info page) */ + .card-header { + background: @mantle !important; + border-color: @surface2 !important; + + &:first-child { + background-color: @mantle !important; + } + } + /* creator/image_maker page */ + .btn-primary.btn-lg { + background-color: @surface1 !important; + border-color: @surface1 !important; + color: @text !important; + } + .alert-info { + background-color: @surface0 !important; + border-color: @surface2 !important; + color: @text !important; + } + /* profile page (creator) */ + .account-content section { + border-bottom-color: @subtext0 !important; + + .att, + .indent .mi-renkei { + color: @subtext0 !important; + } + } + /* image maker registration (creator) */ + .modal-body { + background: @base !important; + } + .modal-header { + background-color: @mantle !important; + border-bottom-color: @surface1 !important; + + .close, + .close:hover { + color: @text !important; + } + } + /* "image maker name" (creator) */ + .form-control { + background-color: @mantle !important; + border-color: @surface1 !important; + color: @text !important; + + &:focus { + border-color: @accent !important; + } + } + .tc_canvas-square, + .tc_canvas-rectangle { + background: @surface2 !important; + } + /* image maker "type" (creator) */ + .tc_imagemaker_register_type li :checked + label { + border-color: @accent !important; + box-shadow: 0 0 0 2px @accent !important; + color: @surface1 !important; + } + .tc_imagemaker_register_type + li + :checked + + label + .tc_imagemaker_register_type_name { + background-color: @accent !important; + border-bottom-color: @accent !important; + color: @surface1 !important; + } + .tc_imagemaker_register_type li label { + background: @overlay0 !important; + border-color: @surface2 !important; + + .tc_imagemaker_register_type_name { + border-bottom-color: @surface2 !important; + } + .tc_imagemaker_register_type_desc { + background-color: @mantle !important; + color: @text !important; + } + } + .modal-footer { + background-color: @mantle !important; + border-top-color: @surface1 !important; + } + .btn-outline-secondary, + .btn-outline-secondary:hover { + background: @surface1 !important; + border-color: @surface2 !important; + color: @text !important; + } + .btn-primary, + .btn-primary:hover { + background-color: @accent !important; + border-color: @accent !important; + color: @surface1 !important; + } + /* image maker list (creator) */ + .tc_imlist_add_imagemaker { + border-color: @surface1 !important; + + &:hover { + border-color: @subtext1 !important; + } + &::before { + color: @overlay1 !important; + } + } + .card { + background-color: @base !important; + } + .card-footer { + background: @crust !important; + border-top-color: @surface0 !important; + } + .btn-info, + .btn-outline-info { + background-color: @surface0 !important; + border-color: @surface2 !important; + color: @text !important; + + &:hover { + background-color: @overlay0 !important; + border-color: @overlay0 !important; + color: @text !important; + } + } + .btn-info:focus { + box-shadow: 0 0 0 0.1rem @accent !important; + } + .badge-default, + .tc_badge_default { + background-color: @surface0 !important; + border-color: @surface2 !important; + color: @subtext0 !important; + } + /* image maker "Edit" (creator) */ + .btn-info { + background-color: @surface2 !important; + border-color: @surface2 !important; + color: @text !important; + } + .btn-warning { + background-color: @accent !important; + border-color: @accent !important; + color: @base !important; + + &:focus { + box-shadow: 0 0 0 0.1rem @accent !important; + } + } + .tc_im_parts_eye .tc_im_parts_eye_icon { + background: @surface0 !important; + } + .tc_im_parts_ctrl .disabled [class^="tc_ctrl_"] { + background-color: @surface0 !important; + + &::before { + color: @text !important; + } + } + .tc_im_layer_list li { + border-color: @overlay0 !important; + } + /* image maker part editor (creator) */ + .tc_sidebar_im_title { + color: @subtext0 !important; + + &::after { + background-color: @subtext0 !important; + } + } + .tc_sidebar_im li a:not(.btn) { + color: @text !important; + } + .tc_sidebar_parts_list li .tc_sidebar_parts_list_parts:hover { + background-color: @surface0 !important; + } + .tc_parts_ctrl_setting .widget.white-bg.disabled { + background-color: @surface0 !important; + border-color: @surface2 !important; + color: @subtext0 !important; + } + .tc_c_textmenu li a { + color: @accent !important; + } + .btn:disabled, + .btn:disabled:hover { + background-color: @surface2 !important; + border-color: @overlay1; + color: @subtext1 !important; + } + .btn-danger, + .btn-danger:hover { + background-color: @red !important; + border-color: @red !important; + color: @base !important; + } + .hr-line-dashed { + background-color: @subtext0 !important; + border-color: @subtext0 !important; + color: @subtext0 !important; + } + /* "bulk upload" (creator) */ + .tc_bulkupload_type_select .tc_bulkupload_type_tab label { + background-color: @surface0 !important; + border-color: @accent !important; + } + .tc_bulkupload_color_select li input[type="radio"]:checked + label { + box-shadow: inset 0 0 0 2px @accent; + } + .tc_color_chip, + .tc_bulkupload_option h4 { + background-color: @surface0 !important; + border-color: @surface0 !important; + } + /* image maker part settings (creator) */ + .tc_upload_imgs .tc_upload_img_old { + background-color: @surface1 !important; + + &::after { + background-color: @surface0 !important; + } + } + .input-group-text { + background-color: @surface2 !important; + border-color: @surface2 !important; + color: @subtext1 !important; + } + .tc_radio_switch label:first-child input[type="radio"] + span { + background-color: @accent !important; + color: @base !important; + + &::before { + box-shadow: inset 0 0 0 1px @accent, -2px 0 1px @crust !important; + } + } + /* image maker "rules" (creator) */ + .text-info { + color: @accent !important; + } + /* image maker "color palette" (creator) */ + .tc_colorgp_detail_parts_deselect li { + background: @surface0; + border-color: @surface2; + color: @text !important; + + &:hover { + background: @surface2 !important; + border-color: @overlay0 !important; + color: @text !important; + } + &::before { + color: @subtext1 !important; + } + } + /* "Sort layer order" (creator) */ + .tc_im_layer_sort li > div { + background: @surface0 !important; + border-color: @surface0 !important; + + i { + color: @subtext1 !important; + } + } + /* item list (creator) */ + .tc_items_itemlist_header .tc_items_itemlist_sortno, + .tc_items_itemlist.is_style_detail > li.tc_item_opened { + background-color: @base !important; + } + .tc_items_itemlist.is_style_detail + > li + .tc_items_itemlist_header + .tc_items_itemlist_no { + background-color: @surface1 !important; + color: @text !important; + } + .tc_items_itemlist.is_style_detail > li { + border-color: @base !important; + } + .page-item.disabled .page-link { + background-color: @surface0 !important; + border-color: @base !important; + color: @text !important; + } + .page-item.active .page-link { + background: @accent !important; + border-color: @accent !important; + color: @surface0 !important; + } + .tc_items_itemlist.is_style_detail + > li + .tc_items_itemlist_content + .tc_items_itemlist_layers + > li { + border-bottom-color: @subtext0 !important; + } + .tc_c_textmenu li { + border-left-color: @subtext0 !important; + border-right-color: @subtext0 !important; + } + /* thank u isabel for fixing this part */ + .tc_items_itemlist.is_style_detail + > li + .tc_items_itemlist_content + .tc_items_itemlist_layers + > li + .tc_items_itemlist_imgs + > li { + &, + &::before { + background-color: @surface0 !important; + border-color: @surface0 !important; + } + } + .custom-select { + background: @base !important; + border-color: @surface1 !important; + color: @text !important; + } + .tc_items_style > label { + .tc_radio_label { + border-color: @subtext0 !important; + } + input[type="radio"]:checked + .tc_radio_label { + border-color: @accent !important; + color: @accent !important; + } + } + /* image maker publication (creator) */ + .tc_release_description { + background: @surface0 !important; + } + .border-danger { + border-color: @red !important; + } + .text-danger { + color: @red !important; + } + .text-navy { + color: @accent !important; + } + /* discovery page */ + .discovery_header .discovery_description { + color: @overlay2 !important; + } + .discovery_totop { + background-color: @surface1 !important; + color: @text !important; + } + .loading-spiral[data-v-46b20d22] { + border-color: @subtext0 !important; + } + /* image maker (inner + outer) */ + .play-Imagemaker.is_info_show .imagemaker_info_bg { + background: @mantle !important; + } + /* "Scope of Use" modal */ + .play-Container .vm--container .vm--modal .content-wrapper { + background: @surface0 !important; + + a { + color: @accent !important; + } + table, td { + border-color: @surface0 !important; + } + .useable::before { + color: @accent !important; + } + } + /* "how to use bookmark" modal (not signed in) */ + .simplebar-wrapper + .simplebar-mask + .simplebar-offset + .simplebar-content-wrapper { + background: @surface0 !important; + + header button.close-dialog { + color: @text !important; + } + } + .imagemaker_info_wrapper { + .imagemaker_info_header { + background-color: @mantle !important; + .imagemaker_info_use_range li a { + color: @accent !important; + } + } + .imagemaker_info_footer { + background-color: @mantle !important; + } + /* help button (outer image maker) */ + .imagemaker_info_btn_help { + background-color: @surface1 !important; + border-color: @surface2 !important; + box-shadow: 0 4px 0 @surface1 !important; + color: @text !important; + } + /* "play" button (outer image maker) */ + .imagemaker_info_btn_start { + background: @accent !important; + border-color: @accent !important; + box-shadow: 0 4px 0 @accent !important; + color: @base !important; + } + .imagemaker_info_creator a { + color: @accent !important; + } + .imagemaker_info_description a { + color: @accent !important; + } + /* tags (outer image maker) */ + .imagemaker_info_use_range li.is_can > div { + background: @surface0 !important; + border-color: @surface1 !important; + color: @text !important; + } + .imagemaker_info_tag a { + border-color: @surface2 !important; + color: @subtext0 !important; + &::before { + color: @accent !important; + } + } + .imagemaker_info_use_range li > div { + background: @surface0 !important; + border-color: @surface1 !important; + color: @text !important; + } + /* tag icon (outer image maker) */ + .imagemaker_info_use_range li.is_can > div::before { + color: @accent !important; + } + } + .is_info_show .imagemaker_info_show_btn { + background: @accent !important; + color: @overlay0 !important; + } + /* outer bookmark button (outer image maker) */ + .play-Imagemaker.is_info_show .imagemaker_info_icon .bookmark { + background-color: @surface0 !important; + border-color: @surface2 !important; + } + /* dice/random button (inner image maker) */ + .imagemaker_menu_btn { + background-color: @surface1 !important; + } + /* non-selected color (inner image maker) */ + .imagemaker_colorBox ul li { + border-color: @overlay2 !important; + + /* empty color (inner image maker) */ + &.emptycolor { + border-color: @overlay2 !important; + } + /* selected color (inner image maker) */ + &.selected { + border-color: @overlay2 !important; + box-shadow: inset 0 0 0 3px @overlay2 !important; + } + } + .imagemaker_parts_menu ul li.selected { + background-color: @surface0 !important; + + &::before { + box-shadow: inset 0 -5px 0 -1px @accent !important; + } + } + li.selected::after { + box-shadow: inset 0 0 0 3px @accent !important; + } + /* switch to outer image maker (inner image maker) */ + .imagemaker_info_show_btn { + background-color: @accent !important; + border-color: @accent !important; + color: @overlay0 !important; + } + /* bookmark button (inner image maker) */ + .play-Imagemaker .bookmark { + background-color: @accent !important; + border-color: @accent !important; + } + .imagemaker_ctrl_btns .btn_show_itemlist.selected { + background-color: @accent !important; + color: @overlay0 !important; + } + /* randomize image (inner image maker) */ + .play-Container + .play-Imagemaker + .imagemaker_control_wrapper + .imagemaker_control_popup { + background: @mantle !important; + } + .is_menu_show .imagemaker_menu_btn { + color: @subtext0 !important; + } + .imagemaker_control_panel_wrapper .imagemaker_random_menu { + background: @surface0 !important; + } + .imagemaker_btn_random { + background: @accent !important; + color: @crust !important; + } + .imagemaker_btn_allreset { + background: @surface2 !important; + color: @text !important; + } + /* move image element (background) (inner image maker) */ + .imagemaker_controller { + background-color: @mantle !important; + } + /* rotate image element (inner image maker) */ + .ctrlbtn-rotate_left, + .ctrlbtn-rotate_right { + background: @surface0 !important; + color: @accent !important; + } + /* move image element (buttons) (inner image maker) */ + .control_position_wrapper .ctrlbtn_position_inner::before, + .control_position_wrapper .ctrlbtn_position_inner::after { + background: @surface0 !important; + } + .ctrlbtn-move_up, + .ctrlbtn-move_down, + .ctrlbtn-move_right, + .ctrlbtn-move_left { + color: @accent !important; + } + .imagemaker_controller_reset, + .imagemaker_controller_reset:hover { + background: @surface0 !important; + color: @text !important; + } + /* "Done" button (inner image maker) */ + .imagemaker_complete_btn, + .imagemaker_complete_btn:hover { + background: @accent !important; + color: @surface0 !important; + } + /* image randomizer complete modal (image complete) */ + .randommaker_result_modal_wrapper { + .randommaker_result_modal { + background-color: @surface0 !important; + border-color: @accent !important; + } + .randommaker_result_message { + background: @yellow !important; + color: @crust !important; + } + .randommaker_result_btns { + .randommaker_again_btn { + background: @yellow !important; + border-color: @yellow !important; + color: @crust !important; + } + .randommaker_complete_btn { + background: @green !important; + border-color: @green !important; + box-shadow: 0 4px 0 @green !important; + color: @crust !important; + } + } + } + /* load screen after clicking "Done" (image complete) */ + .save_anime { + background-color: @base !important; + } + /* "Your picture is done!" (image complete) */ + .complete-Main { + background: @mantle !important; + } + /* download button (image complete) */ + .complete-Download_Btn, + .complete-Download_Btn:hover { + background: @accent !important; + border-color: @accent !important; + box-shadow: 0 4px 0 @accent !important; + color: @surface1 !important; + } + /* "add to bookmarks" area (image complete) */ + .complete-Container .recommend-bookmark { + background: @mantle !important; + border-color: @surface0 !important; + + /* fix for "Add to bookmarks" button" */ + .c_btn { + box-shadow: 0 4px 0 @surface0 !important; + } + } + /* share image (image complete) */ + .complete-Share_Wrapper { + background: @mantle !important; + border-color: @surface0 !important; + } + .complete-ShareSns .complete-ShareSns_Copy { + background-color: @surface0 !important; + border-color: @surface2 !important; + color: @subtext0 !important; + } + .complete-ShareText { + .complete-ShareText_Title { + color: @subtext0 !important; + } + textarea { + background-color: @surface0 !important; + border-color: @overlay0 !important; + color: @subtext0 !important; + } + } + /* "Create a new one!" button (image complete) */ + .complete-Btn_Back, + .complete-Btn_Back:hover { + background: @surface1 !important; + border-color: @surface1 !important; + box-shadow: 0 4px 0 @surface0 !important; + color: @text; + } + .st-Related_Tags { + background-color: @mantle !important; + } + .st-Related_ImagemakerList { + background-color: @mantle !important; + } + .sitetop-ImagemakerList_List a .sw_imagemaker_creator { + color: @subtext0 !important; + } + /* "Search by tag" (image complete) */ + .st-Related_Tags .st-Related_Tag a { + background: @surface0 !important; + border-color: @accent !important; + color: @text !important; + + &::before { + color: @accent !important; + } + } + /* "Copied to clipboard" popup (image complete) */ + .toasted.sw-Toast.bubble { + background-color: @accent !important; + color: @surface0 !important; + } + /* fix for bookmark icon (bookmarks page) */ + .bookmark-inner h2 .fa { + color: @accent !important; + } + /* support.picrew.me page */ + .site-branding { + background-color: @base !important; + color: @text !important; + } + .menu-toggle { + background-color: @surface0 !important; + color: @text !important; + + &:hover { + background-color: @surface2 !important; + color: @text !important; + } + } + .site-title a, + .site-description { + color: @text !important; + } + .bogo-language-name a { + color: @accent !important; + } + .main-navigation { + background-color: @mantle !important; + color: @text !important; + + a { + color: @text !important; + } + a:hover, + ul > :hover > a { + color: @accent !important; + } + /* "what is picrew?" page (support) */ + li.current_page_item > a::before, + li.current-menu-item > a::before { + border-bottom-color: @accent !important; + } + .nav-menu > li > a::after, + .menu > li > a::after { + color: @accent !important; + } + } + .picrew_front-page-content-area.content-area + .picrew_front-content + .with-featured-image { + background-color: @mantle !important; + } + .widget_linkblock { + border-color: @accent !important; + box-shadow: 0 0 0 0 @accent inset !important; + color: @text !important; + + .widget_linkblock_title { + color: @accent !important; + } + .widget_linkblock_text { + color: @subtext1 !important; + } + &:hover { + border-color: @accent !important; + box-shadow: 0 0 0 4px @accent inset !important; + color: @text !important; + } + } + .front-widget-area { + border-bottom-color: @surface2 !important; + } + .footer-widget-area { + background-color: @mantle !important; + border-top-color: @mantle !important; + + .widget ul > li { + border-top-color: @surface2 !important; + + &:last-child { + border-bottom-color: @surface2 !important; + } + } + a { + color: @text !important; + } + .widget-title, + a:hover { + color: @accent !important; + } + } + /* aaaaaaaaaaaaaa */ + #search-3 > #searchform > div > input[type="text"] { + background-color: @surface0 !important; + border-color: @surface2 !important; + color: @text !important; + + &:focus { + border-color: @accent !important; + } + } + #searchsubmit > button, + input[type="button"], + input[type="reset"], + input[type="submit"], + #infinite-handle span { + background-color: @surface1 !important; + color: @text !important; + } + .site-footer { + background-color: @crust !important; + border-top-color: @surface0 !important; + color: @subtext1 !important; + } + .page .site-content { + background-color: @mantle !important; + } + .content-wrapper.full-width.without-featured-image { + background-color: @mantle !important; + color: @text !important; + } + body.page:not(.home) .entry-title { + color: @text !important; + + &::after { + background: @accent !important; + } + } + .entry-content h2 { + background: @surface0 !important; + border-bottom-color: @accent !important; + color: @text !important; + } + .content-wrapper.full-width .hentry::after { + background-color: @surface1 !important; + } + /* "learn how to play with picrew" page (support) */ + #toc_container { + background: @surface0 !important; + border-color: @surface2 !important; + + a { + color: @accent !important; + } + p.toc_title { + color: @text !important; + } + } + .entry-content { + td, + table { + border-color: @surface2 !important; + } + h3 { + border-bottom-color: @surface2 !important; + border-left-color: @accent !important; + color: @text !important; + } + h4 { + color: @subtext1 !important; + } + h4::before, + a { + color: @accent !important; + } + } + /* "Create your image maker" page (support) */ + .content-wrapper { + background: @mantle !important; + } + .sidebar-widget-area .widget ul > li { + border-top-color: @overlay2 !important; + + > a { + color: @accent !important; + } + } + /* "list of creator functions" page (support) */ + .site-content { + background-color: @mantle !important; + } + .sidebar-widget-area .widget-title { + color: @text !important; + } + .blog { + .entry-title a { + color: @accent !important; + } + .entry-body { + color: @subtext1 !important; + } + } + .wp-pagenavi { + span.current { + background: @accent !important; + border-color: @accent !important; + color: @surface1 !important; + } + a { + background-color: @base !important; + border-color: @accent !important; + color: @text !important; + + &:hover { + background-color: @accent !important; + color: @surface1 !important; + } + } + } + /* "list of creator functions" archive page...? honestly idfk why this is a thing (support) */ + .archive { + .page-title { + color: @text !important; + } + .entry-title a { + color: @accent !important; + } + .entry-body { + color: @text !important; + } + } + } +} diff --git a/styles/pinterest/README.md b/styles/pinterest/README.md new file mode 100644 index 0000000000..4465d1fa48 --- /dev/null +++ b/styles/pinterest/README.md @@ -0,0 +1,37 @@ + + + +

+ Logo
+ + Catppuccin for Pinterest + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [nuexq](https://github.com/nuexq) + +## 💖 Past Maintainer +- [jn-sena](https://github.com/jn-sena) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/pinterest/catppuccin.user.less b/styles/pinterest/catppuccin.user.less new file mode 100644 index 0000000000..1f0dc97fe1 --- /dev/null +++ b/styles/pinterest/catppuccin.user.less @@ -0,0 +1,275 @@ +/* ==UserStyle== +@name Pinterest Catppuccin +@namespace github.com/catppuccin/userstyles/styles/pinterest +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pinterest +@version 2025.10.09 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pinterest/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apinterest +@description Soothing pastel theme for Pinterest +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document regexp( + "^https?:\\/\\/(www|[a-z]{2}).pinterest.(com(.(au|mx))?|co(.(uk|kr))?|at|ca|ch|cl|de|dk|es|fr|ie|it|jp|nz|ph|pt|ru|se)\\/.*" + ) { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + &, + body { + color: @text; + background: @base; + } + + --sema-color-background-default: @base; + --sema-color-background-secondary: @surface0; + --sema-color-hover-background-secondary: @surface1; + --sema-color-background-tertiary: @overlay0; // send message to conversation button + --sema-color-hover-background-tertiary: @overlay2; + --sema-color-text-default: @text; + --sema-color-text-subtle: @subtext1; + --sema-color-text-link: @accent; // links / messages username + --sema-color-text-dark: @text; // commenter username / bar pills text + --sema-color-text-light: if( + @flavor = latte, + @base, + @text + ); // Explore suggested articles link + --sema-color-icon-primary: @accent; // logo + --sema-color-icon-inverse: @mantle; + --sema-color-border-decorative: @surface2; + --sema-color-border-interactive: @overlay0; // form inputs + --sema-color-hover-border-interactive: @overlay1; + --sema-color-border-focus-outer-default: @accent; + --sema-color-border-focus-inner-default: @base; + --sema-color-border-disabled: @surface1; + --sema-color-icon-disabled: @subtext0; // board actions in organize mode + + /* Pins */ + --sema-color-background-primary: @accent; + --sema-color-hover-background-primary: darken(@accent, 5%); + --sema-color-background-wash-light: @base; + --sema-color-pressed-background-primary: darken(@accent, 5%); + --comp-button-color-background-primary-selected: @surface1; // select dropdown + --comp-button-color-background-tertiary-semi-transparent-default: fade( + @base, + 50% + ); // pin action + --comp-button-color-hover-background-tertiary-semi-transparent-default: fade( + @base, + 50% + ); + + [data-test-id="more-description-container"] { + background-color: @base !important; + [style*="background: linear-gradient"] { + background: linear-gradient(90deg, transparent 0%, @base 100%) + !important; + } + } + [data-test-id="closeup-metadata-details-divider"] { + border-top-color: var(--sema-color-border-decorative) !important; + } + [data-test-id="PinBetterSaveDropdown"] { + --sema-color-text-inverse: @text; + --sema-color-icon-inverse: @text; + } + + --sema-color-text-error: @red; + --sema-color-background-error-default: @maroon; + --sema-color-icon-error: @red; + --sema-color-border-error: @red; + + /* Boards */ + --sema-color-background-checked: @accent; // "Secret" toggle + --sema-color-hover-background-checked: darken(@accent, 5%); + --sema-color-pressed-background-checked: darken(@accent, 10%); + --comp-switch-color-background-container-enabled-off: @surface2; + --comp-switch-color-hover-background-container-enabled-off: @overlay0; + --comp-button-color-hover-background-secondary-default: @surface1; // "Cancel" button hover + + [data-test-id="profile-board-card"] [style*="border-color: white;"] { + // pin preview collage images + border-color: @base !important; + } + + --sema-color-border-inverse: @base; // around profile pictures under previews + --sema-color-pressed-background-default: @surface2; // "Edit" icon / edit modal "X" icon buttons + --comp-button-color-pressed-background-secondary-default: @surface2; // active "View profile" button + --sema-color-pressed-background-elevation: @surface2; // plus action + + // "select and reorder" / organize + [data-test-id="pinRepSelectionBorder"] { + &[style*="border-color: rgb(255, 255, 255);"] { + border-color: @base !important; + } + &[style*="box-shadow: rgb(255, 255, 255) 0px 0px 0px 3px inset;"] { + box-shadow: @accent 0 0 0 3px inset !important; + } + } + + /* Sidebar */ + --sema-color-icon-default: @text; + --sema-color-hover-background-default: @surface0; + --base-color-grayscale-100: @surface0; // border + [aria-label="You have new Updates"] { + --sema-color-text-light: @base; // notification badge + } + // Explore + [data-test-id="topic-rep-title"] { + --sema-color-text-inverse: @text; // Explore categories + } + --sema-color-background-elevation: @mantle; + --sema-color-hover-background-elevation: @base; + // Create + --sema-color-icon-dark: @text; + [data-test-id="drag-behavior-container"] { + --sema-color-text-default: if( + @flavor = latte, + @text, + @surface2 + ); // drag container error + } + // Tooltips + --sema-color-background-inverse: @text; + --sema-color-text-inverse: @base; + + /* Search */ + --sema-color-icon-subtle: @overlay2; + + #searchBoxContainer > div { + background-color: @mantle !important; + + > div[style*="box-shadow:"] { + // on focus + box-shadow: fade(@accent, 50%) 0 0 0 4px !important; + } + + // divider + [style*="background:#d8d8d8;"], + [style*="background: rgb(216, 216, 216);"] { + background: @surface1 !important; + } + + input { + color: @subtext1 !important; + } + } + + [id^="SuggestionGroup-Option"][aria-selected="true"] > a > div { + background-color: @surface1; + } + + /* Home */ + [data-test-id="homefeed-feed"] + div:has( + > [data-root-margin="more-ideas-tabs"] + )[style*="background-color: rgb(255, 255, 255);"] { + background-color: @base !important; + } + + --sema-color-background-selected: @accent; // active tab underline + --sema-color-hover-background-selected: darken(@accent, 5%); + --sema-color-pressed-background-selected: darken(@accent, 10%); + + // share modal + [data-test-id="lego-share-social-bar-auth"] button { + background-color: @base !important; + } + + /* Settings */ + --sema-color-text-disabled: @overlay2; // disabled "Reset"/"Save" buttons + + /* Messages */ + textarea#messageDraft { + background-color: transparent !important; + color: @subtext1; + caret-color: @text !important; + } + + div[data-test-id="add-pin-to-conversation"] { + div[style="border: 1px solid rgb(218, 218, 218); box-shadow: rgba(0, 132, 255, 0) 0px 0px 0px 4px; min-height: 48px; width: 100%;"] { + border-color: @mantle !important; + } + + div[style="border: 1px solid transparent; box-shadow: rgba(0, 132, 255, 0.5) 0px 0px 0px 4px; min-height: 48px; width: 100%;"] { + box-shadow: fade(@accent, 50%) 0 0 0 4px !important; + } + } + + /* Loading */ + .mainContainer + > div[style*="background-color: rgba(255, 255, 255, 0.5); height: 100%; width: 100%; z-index: 1;"] { + background-color: @base !important; + } + + /* Emoji Picker */ + .EmojiPickerReact { + --epr-bg-color: @base; + --epr-text-color: @text; + --epr-picker-border-color: @base; + --epr-category-label-bg-color: @base; + --epr-search-input-bg-color: @mantle; + --epr-skin-tone-picker-menu-color: @mantle; + --epr-category-icon-active-color: @accent; + --epr-highlight-color: @accent; + --epr-hover-bg-color: @surface0; + --epr-focus-bg-color: @surface0; + } + + /* suggestion bar */ + --sema-color-pressed-background-secondary: @surface2; + [data-test-id="one-bar-pill"] { + --sema-color-text-dark: if(@flavor = latte, @text, @base); + } + [data-test-id="one-bar-navigation-arrows"] { + &[style*="to left"]:not([style*="to right"]) { + background: linear-gradient(to left, @base, transparent 40px) + !important; + } + &[style*="to right"]:not([style*="to left"]) { + background: linear-gradient(to right, @base, transparent 40px) + !important; + } + &[style*="to left"][style*="to right"] { + background: + linear-gradient(to left, @base, transparent 40px), + linear-gradient(to right, @base, transparent 40px) !important; + } + } + [data-test-id="multi-select-filter-fade-bottom-edge"] { + background: linear-gradient(0deg, @base 0%, transparent 100%) !important; + } + + /* Toasts */ + --comp-toast-color-background-default: @overlay2; + + /* SaveButton */ + [data-test-id="SaveButton"] > [class^="SaveButton"] { + // Your saved ideas pins "Save" button + background-color: var(--sema-color-background-primary); + &:hover { + background-color: var(--sema-color-hover-background-primary); + } + } + } +} diff --git a/styles/planet-minecraft/README.md b/styles/planet-minecraft/README.md new file mode 100644 index 0000000000..c44ac5bc36 --- /dev/null +++ b/styles/planet-minecraft/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Planet Minecraft + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [Nyameliaaaa](https://github.com/Nyameliaaaa) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/planet-minecraft/catppuccin.user.less b/styles/planet-minecraft/catppuccin.user.less new file mode 100644 index 0000000000..0183f85c9f --- /dev/null +++ b/styles/planet-minecraft/catppuccin.user.less @@ -0,0 +1,343 @@ +/* ==UserStyle== +@name Planet Minecraft Catppuccin +@namespace github.com/catppuccin/userstyles/styles/planet-minecraft +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/planet-minecraft +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/planet-minecraft/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aplanet-minecraft +@description Soothing pastel theme for Planet Minecraft +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("planetminecraft.com") { + [data-theme="light"] { + #catppuccin(@lightFlavor); + } + [data-theme="dark"] { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --body-bg: @crust; + --header-bg: @base; + --content-bg: @surface0; + --container-bg: @base; + --menu-bg: @surface0; + --menu-color: @subtext1; + --menu-selected-bg: @surface1; + --menu-selected-color: @accent; + --footer-bg: @mantle; + --bg-navbar: @mantle; + --tab-selected: @accent; + --input-bg: @surface0; + --dark-mid-bg: @base; + --title-color: @text; + --text-color: @text; + --text-color-medium: @subtext0; + --text-color-light: @subtext1; + --border-color: @base; + --footer-a-color: @accent; + --nav-hover: @accent; + --stat-color: @red; + --a-color: @accent; + --a-hover: @accent; + --a-selected: fade(@accent, 80%); + --tab-hover: fade(@accent, 80%); + --tab-color: @subtext0; + --nav-color: @text; + --widget-wrap-bg: @mantle; + --shine-start: @surface2; + --shine-end: @surface1; + --widget-bg: @surface0; + --light-bg: @surface0; + --medium-bg: @crust; + --toolbar-bg: @surface0; + --shine-highlight: @surface0; + --border-color-light: @surface0; + --site-border-color: @surface0; + --graphic-bg: @surface0; + --notice-bg: @overlay0; + --notice-color: @text; + --menu-disabled-color: @crust; + --control-bg: @accent; + --a-visited: @accent; + --nav-bar-border: none; + --feed-alt-bg: @surface1; + --nav-selected: @accent; + + .tab_options > ul > li.currentpage, + .tab_options > ul > li.ui-state-active, + .tab_options > ul > li:hover { + border-bottom-color: @accent; + } + + .site_btn_secondary { + color: @subtext1; + background: @surface1; + &:hover { + color: @accent; + background: fade(@surface1, 80%); + } + } + + .site_btn, + .site_btn_alt, + #subscribe_full .site_btn, + .pagination p a.pagination_page, + .pagination p > span.pagination_page, + .vert_menu > ul > li:only-child > a.current_select, + .vert_menu > ul > li > a.current_select { + color: @base; + background: @accent; + &:not(:disabled, [data-disabled="disabled"]):hover { + background: fade(@accent, 80%); + } + } + + #profile-bar #profile-actions .togglable.selected { + background: @accent; + color: @base; + } + + .tipso_bubble .bottom { + background: @surface0 !important; + } + + /* because the icons on the display mode buttons are white, we cant have white base here, so we improvise for latte */ + & when (@flavor = latte) { + #display_modes a { + background: @text !important; + box-shadow: none !important; + } + + /* fix nav menu dropdown icons */ + .navbar_icon .dropdown { + --svozk: var(--s) -256px -326px !important; + background: var(--s) -256px -326px !important; + } + + .content-actions li { + background: @surface0; + + a, + .link, + .js_link, + .js_link_m { + color: @text; + } + } + + .content-actions li .js_link:hover, + .content-actions li .js_link_m:hover, + .content-actions li .link:hover, + .content-actions li a:hover { + .material-icons { + color: @text !important; + } + + color: @text !important; + background: @accent !important; + } + + .content-actions li .material-icons { + color: @subtext0 !important; + } + } + + & when not(@flavor = latte) { + #display_modes a { + background: @base !important; + box-shadow: none !important; + } + } + + #display_modes a.selected, + #display_modes a:hover { + background: @accent; + } + + .navigation-wrap .navmenu a { + text-shadow: none !important; + } + + #header + #header-wrap + .header_text + > ul + > li + > .material-btn.mem_submit + .material-icons, + #header #header-wrap .header_text > ul > li > a.mem_submit .material-icons, + #mobileRightPanel + .sidr-inner + > ul + > li + > .material-btn.mem_submit + .material-icons, + #mobileRightPanel .sidr-inner > ul > li > a.mem_submit .material-icons { + color: @green !important; + } + + #header + #header-wrap + .header_text + > ul + > li + > .material-btn[data-alert="1"].mem_notifications + .material-icons, + #header + #header-wrap + .header_text + > ul + > li + > .material-btn[data-alert="1"].mem_tickets + .material-icons, + #header + #header-wrap + .header_text + > ul + > li + > a[data-alert="1"].mem_notifications + .material-icons, + #header + #header-wrap + .header_text + > ul + > li + > a[data-alert="1"].mem_tickets + .material-icons, + #mobileRightPanel + .sidr-inner + > ul + > li + > .material-btn[data-alert="1"].mem_notifications + .material-icons, + #mobileRightPanel + .sidr-inner + > ul + > li + > .material-btn[data-alert="1"].mem_tickets + .material-icons, + #mobileRightPanel + .sidr-inner + > ul + > li + > a[data-alert="1"].mem_notifications + .material-icons, + #mobileRightPanel + .sidr-inner + > ul + > li + > a[data-alert="1"].mem_tickets + .material-icons { + color: @yellow; + } + + .material-icons, + .mem_submit > span, + .mem_notifications > span { + color: @text !important; + } + + .green { + background: @green; + color: @base; + + .material-icons { + color: @base; + } + } + + // .content-actions li:not(:only-child, :first-child) { + // border-top: none; + // } + + .tipso_content, + .member_profile_card_right { + background: @surface0; + } + + .tipso_arrow { + border-color: @surface0; + } + + #popular-reel .caption { + & when (@flavor = latte) { + background: fade(@text, 50%) !important; + + .pop-title { + color: @base !important; + text-shadow: none; + } + + .caption-subtitle { + color: @crust !important; + text-shadow: none; + } + } + + & when not(@flavor = latte) { + background: fade(@base, 50%) !important; + + .pop-title { + color: @text !important; + text-shadow: none; + } + + .caption-subtitle { + color: @subtext0 !important; + text-shadow: none; + } + + .content-actions li { + background: @surface0; + + a, + .link, + .js_link, + .js_link_m { + color: @text; + } + } + + .content-actions li .js_link:hover, + .content-actions li .js_link_m:hover, + .content-actions li .link:hover, + .content-actions li a:hover { + .material-icons { + color: @accent !important; + } + color: @accent !important; + background: @surface1 !important; + } + + .content-actions li .material-icons { + color: @subtext0 !important; + } + } + } + + #content_notice .site_btn, + #content_notice .site_btn_alt { + text-shadow: none; + } + + .custom_input:focus, + input:focus, + select:focus, + textarea:focus { + border-color: @accent; + } + } +} diff --git a/styles/poe/README.md b/styles/poe/README.md new file mode 100644 index 0000000000..b50cfb329d --- /dev/null +++ b/styles/poe/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Poe + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [TheAnonymousCrusher](https://github.com/TheAnonymousCrusher) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/poe/catppuccin.user.less b/styles/poe/catppuccin.user.less new file mode 100644 index 0000000000..99ed32b2a3 --- /dev/null +++ b/styles/poe/catppuccin.user.less @@ -0,0 +1,122 @@ +/* ==UserStyle== +@name Poe Catppuccin +@namespace github.com/catppuccin/userstyles/styles/poe +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/poe +@version 2026.01.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/poe/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apoe +@description Soothing pastel theme for Poe +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +// Using `url-prefix `instead of `domain` prevents a broken theme on the Help Center (https://help.poe.com/). +@-moz-document url-prefix("https://poe.com") { + :root:not(.dark, .light) { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + :root { + &.dark { + #catppuccin(@darkFlavor); + } + &.light { + #catppuccin(@lightFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --pdl-bg-base: @mantle; + --pdl-bg-faint: @base; + --pdl-bg-muted: @surface0; + --pdl-bg-subtle: @surface1; + --pdl-bg-emphasis: @surface2; + + --pdl-fg-base: @text; + --pdl-fg-muted: @subtext1; + --pdl-fg-subtle: @subtext0; + + --pdl-bg-reverse: @text; + --pdl-fg-reverse: @base; + + --pdl-border-base: @surface1; + --pdl-border-emphasis: @overlay0; + + --pdl-accent-base: @accent; + --pdl-accent-on-accent: @base; + --pdl-fg-white: @base; + + --code-block-bg: @base; + + --pdl-error-base: @red; + + --pdl-success-base: @green; + --pdl-success-muted: fade(@green, 60%); + --pdl-success-on-success: @base; + + // Settings + --pdl-action-default-bg: @mantle; + --pdl-action-disabled-bg: @surface0; + --pdl-action-default-border: @surface2; + --pdl-action-hover-border: @overlay0; + --pdl-action-hover-border-accent: @accent; + --pdl-action-default-fg: @text; + --pdl-action-disabled-fg: @overlay2; + --violet-9: @accent; + --violet-10: @accent; + --violet-11: @accent; + --ruby-10: @red; // danger button text + --ruby-11: @red; // danger button hover text + + textarea { + color: @text; + } + + [class^="Tooltip_root"] { + --pdl-tooltip-bg: @surface0; + --pdl-tooltip-color: @text; + } + + // API + ul[data-pdl-sidebar-menu] { + li[data-pdl-sidebar-menu-item] { + --item-active-bg-color: @surface0; + --item-hover-bg-color: @surface1; + } + } + + // Login + --fade-bottom-gradual: linear-gradient( + to bottom, + transparent 0%, + fade(@crust, 50%) 60%, + @mantle 90%, + @mantle 100% + ); + --fg-base--ignore-light-mode: @text; + + // Logo (Login, Chat) + img[src^="https://psc2.cf2.poecdn.net/assets/_next/static/media/poeFullMultibot"], + img[src^="https://psc2.cf2.poecdn.net/assets/_next/static/media/poeFullWhiteMultibot"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } +} diff --git a/styles/porkbun/README.md b/styles/porkbun/README.md new file mode 100644 index 0000000000..cd963eb75e --- /dev/null +++ b/styles/porkbun/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Porkbun + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/porkbun/catppuccin.user.less b/styles/porkbun/catppuccin.user.less new file mode 100644 index 0000000000..69645943db --- /dev/null +++ b/styles/porkbun/catppuccin.user.less @@ -0,0 +1,354 @@ +/* ==UserStyle== +@name Porkbun Catppuccin +@namespace github.com/catppuccin/userstyles/styles/porkbun +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/porkbun +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/porkbun/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aporkbun +@description Soothing pastel theme for Porkbun +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("porkbun.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + &, + body { + background-color: @base; + color: @text; + } + + --cloudflare_on: @peach; + --porkbun_danger: @red; + --porkbun_warning: @yellow; + --porkbun_success: @green; + --porkbun_pink_hover: darken(@accent, 5%); + --porkbun_pink: @accent; + --porkbun_gold: @yellow; + --porkbun_pink_light: lighten(@accent, 5%); + --porkbun_pink_medium: @accent; + --porkbun_dark_gray: @text; + --porkbun_light_gray: @surface0; + --porkbun_medium_gray: @overlay1; + --porkbun_white: @mantle; + --blue_link: @blue; + --blue_link_hover: @sapphire; + --headerMenuLink_color: @text; + --headerMenuLink-hover_color: @text; + --homepageBlurb_color: @text; + + /* Misc */ + + .text-muted { + color: @subtext0; + } + .text-danger { + color: @red; + } + .text-success { + color: @green; + } + + .badge-porkbun { + background-color: @surface0; + color: @text; + } + + .alert-info { + background-color: fade(@blue, 30%); + color: @blue; + border-color: @blue; + } + + .alert-warning { + background-color: fade(@yellow, 30%); + color: @yellow; + border-color: @yellow; + } + + .alert-danger { + background-color: fade(@red, 30%); + color: @red; + border-color: @red; + } + + hr { + border-top-color: @surface1; + } + + /* Inline overrides */ + + [style*="background-color:white;"], + [style*="background-color: rgb(248, 248, 248);"] { + background-color: @surface0 !important; + } + [style*="color:black;"], + [style*="color: white;"] { + color: @text !important; + } + + &[stylus-iframe="https://porkbun.com"], + #beacon-container-body { + background-color: transparent; + + .hsds-beacon button { + background-color: @accent; + + [class*="FabButtoncss__FabBackgroundUI"] > svg { + fill: @accent; + } + + > span { + color: @crust; + } + } + } + + /* Buttons */ + + .btn-default, + .sortByPriceButton { + &:not(.searchAddRemoveIcon, .searchAddRemoveIconSideBar) { + background-color: @surface0; + color: @text; + border-color: @surface1; + } + + &:hover { + background-color: @surface1; + color: @text; + } + } + + .btn-primary { + background-color: @accent; + border-color: @accent; + color: @crust; + + &:hover { + background-color: darken(@accent, 5%); + } + } + + .btn-danger { + background-color: @red; + border-color: @red; + color: @crust; + } + + .btn-success { + background-color: @green; + border-color: @green; + color: @crust; + } + + .btn-success-light { + background-color: @green; + color: @crust; + } + + .btn-porkbun-white-borderless, + .btn-porkbun-white:hover, + .btn-porkbun-white:focus { + color: @text; + } + + .btn-porkbun-white.active { + color: @crust; + + .text-muted { + color: @surface0; + } + } + + /* Inputs */ + + .slider { + background-color: @red; + + &::before { + background-color: @crust; + } + } + + .dropdown-menu { + background-color: @surface0; + + > li > a { + color: @text; + + &:hover { + background-color: @surface1; + } + } + + .divider { + background-color: @surface1; + } + } + + .form-control { + background-color: @mantle; + color: @text; + border-color: @surface0; + + &:focus { + box-shadow: 0 0 8px fade(@accent, 50%); + } + } + + select:not([multiple]) { + -webkit-appearance: auto; + } + + /* Table dividers */ + + .table { + > tbody, + > tfoot, + > thead { + > tr { + > th, + > td { + border-top-color: @surface1; + } + } + } + + > thead > tr > th { + border-bottom-color: @surface2; + } + + [style*="border-top:2px solid gray;"] { + border-top-color: @surface2 !important; + } + } + + .table-bordered { + border-color: @surface1; + + > tbody, + > tfoot, + > thead { + > tr { + > th, + > td { + border-color: @surface1; + } + } + } + } + + /* Main */ + + .headerContainer, + footer > div { + background-color: @crust !important; + } + + #headerBrandLogo, + #footerLogo { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .reviewWidget { + .googleReviewCount { + color: @subtext1; + } + + .fas[class*="fa-star"] { + color: @yellow; + } + } + + .homepageBulletIconFontAwesome { + color: @subtext0; + } + .homePageSupportOptionCenterRight { + border-color: @surface0; + } + + #domainSearchBulkDropButton { + &:hover, + &:active, + &:target, + &:focus { + background-color: @surface0; + } + } + + #searchResultsContainer { + background-color: transparent; + + .sideBarSearchResults { + border-color: @surface0; + } + } + .searchResultsTldLetterBox { + border-color: @surface1; + } + + .cartBox { + border-color: @surface1; + } + .cartSummaryBoxFreeList > li::before { + color: @subtext0; + } + + .marketplaceRow { + border-top-color: @surface0; + } + + .domainsPricingAllExtensionsHeader { + background-color: transparent; + } + + #homePagePricingContainer { + background-color: transparent; + } + + .hostingBox { + border-color: @surface0; + } + + .well { + background-color: @base; + border-color: @surface0; + } + + .modal-content { + background-color: @base; + + .close { + color: @text; + opacity: 1; + } + } + + .nav-tabs { + border-bottom-color: @surface0; + } + } +} diff --git a/styles/pronouns.cc/README.md b/styles/pronouns.cc/README.md new file mode 100644 index 0000000000..c684be57a8 --- /dev/null +++ b/styles/pronouns.cc/README.md @@ -0,0 +1,37 @@ + + + +

+ Logo
+ + Catppuccin for pronouns.cc + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [comfysage](https://github.com/comfysage) + +## 💖 Past Maintainer +- [NeonGamerBot-QK](https://github.com/NeonGamerBot-QK) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/pronouns.cc/catppuccin.user.less b/styles/pronouns.cc/catppuccin.user.less new file mode 100644 index 0000000000..08ca6fcc95 --- /dev/null +++ b/styles/pronouns.cc/catppuccin.user.less @@ -0,0 +1,230 @@ +/* ==UserStyle== +@name pronouns.cc Catppuccin +@namespace github.com/catppuccin/userstyles/styles/pronouns.cc +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pronouns.cc +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pronouns.cc/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apronouns.cc +@description Soothing pastel theme for pronouns.cc +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("pronouns.cc") { + :root[data-bs-theme="dark"] { + #catppuccin(@darkFlavor); + .bg-dark { + --bs-bg-opacity: 1; + background-color: rgba( + var(--bs-lightt-rgb), + var(--bs-bg-opacity) + ) !important; + } + } + :root[data-bs-theme="light"] { + #catppuccin(@lightFlavor); + .bg-light { + --bs-bg-opacity: 1; + background-color: rgba( + var(--bs-darkk-rgb), + var(--bs-bg-opacity) + ) !important; + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + .form-floating input::placeholder { + color: transparent !important; + } + .form-control:focus { + border-color: @accent; + box-shadow: 0 0 0 0.25rem fade(@accent, 25%); + } + --bs-border-color: @surface1; + --bs-border-color-translucent: @surface0; + .modal { + --bs-modal-bg: @crust; + --bs-modal-border-color: var(--bs-border-color-translucent); + --bs-modal-header-border-color: var(--bs-border-color); + --bs-modal-footer-border-color: var(--bs-border-color); + } + .dropdown-menu { + --bs-dropdown-link-active-color: @crust; + --bs-dropdown-link-active-bg: @accent; + } + .toast { + --bs-toast-color: @text; + background-color: darken(@surface0, 5%); + } + .toast-header { + color: @text; + background-color: @surface0; + } + .toast-body { + color: @text; + } + --bs-badge-color: @text; + --bs-body-color: @text; + --bs-body-color-rgb: #lib.rgbify(@text)[]; + --bs-body-bg: @crust; + --bs-darkk-rgb: #lib.rgbify(@base); + --bs-lightt-rgb: #lib.rgbify(@base); + --bs-emphasis-color: @accent; + --bs-emphasis-color-rgb: #lib.rgbify(@accent)[]; + --bs-secondary-color: @subtext0; + --bs-secondary-color-rgb: @subtext0; + --bs-secondary-bg: @base; + --bs-secondary-bg-rgb: #lib.rgbify(@base)[]; + --bs-tertiary-color: @subtext1; + --bs-tertiary-color-rgb: @subtext1; + --bs-tertiary-bg: @surface0; + --bs-tertiary-bg-rgb: #lib.rgbify(@surface0)[]; + --bs-primary-text-emphasis: @accent; + --bs-secondary-text-emphasis: @subtext1; + --bs-success-text-emphasis: @green; + --bs-info-text-emphasis: @teal; + --bs-warning-text-emphasis: @yellow; + --bs-danger-text-emphasis: @red; + --bs-light-text-emphasis: @subtext0; + --bs-primary-bg-subtle: @mantle; + --bs-secondary-bg-subtle: @base; + --bs-primary-border-subtle: @blue; + --bs-secondary-border-subtle: @overlay0; + --bs-success-border-subtle: @green; + --bs-info-border-subtle: @teal; + --bs-warning-border-subtle: @yellow; + --bs-danger-border-subtle: @red; + --bs-light-border-subtle: @overlay1; + --bs-dark-border-subtle: @surface1; + --bs-heading-color: inherit; + --bs-link-color: @accent; + --bs-link-color-rgb: #lib.rgbify(@accent)[]; + --bs-link-hover-color: @accent; + --bs-link-hover-color-rgb: #lib.rgbify(@accent)[]; + + --bs-code-color: @pink; + --bs-highlight-color: @rosewater; + .list-group { + --bs-list-group-color: var(--bs-body-color); + --bs-list-group-bg: var(--bs-body-bg); + --bs-list-group-action-color: var(--bs-secondary-color); + --bs-list-group-action-hover-color: var(--bs-emphasis-color); + --bs-list-group-action-hover-bg: var(--bs-tertiary-bg); + --bs-list-group-action-active-color: var(--bs-body-color); + --bs-list-group-action-active-bg: var(--bs-secondary-bg); + --bs-list-group-disabled-color: var(--bs-secondary-color); + --bs-list-group-disabled-bg: var(--bs-body-bg); + --bs-list-group-active-color: @base; + --bs-list-group-active-bg: @accent; + --bs-list-group-active-border-color: @accent; + border-radius: var(--bs-list-group-border-radius); + } + // navbar + .navbar { + --bs-navbar-color: @subtext0; + --bs-navbar-hover-color: @subtext0; + --bs-navbar-disabled-color: @subtext1; + --bs-navbar-active-color: @text !important; + --bs-navbar-brand-color: @text !important; + --bs-navbar-brand-hover-color: @text !important; + --bs-navbar-toggler-border-color: @surface0; + } + #colorizedButton( + @color, + @bg, + @border: @bg, + @hv-color: @color, + @hv-bg: darken(@bg, 5%), + @hv-border: @hv-bg, + ) { + --bs-btn-color: @color; + --bs-btn-bg: @bg; + --bs-btn-border-color: @border; + + --bs-btn-hover-color: @hv-color; + --bs-btn-hover-bg: @hv-bg; + --bs-btn-hover-border-color: @hv-border; + + --bs-btn-active-color: @hv-color; + --bs-btn-active-bg: @hv-bg; + --bs-btn-active-border-color: @hv-border; + + --bs-btn-focus-shadow-rgb: #lib.rgbify(@bg)[]; + --bs-btn-disabled-color: @color; + --bs-btn-disabled-bg: @bg; + --bs-btn-disabled-border-color: @border; + } + #coloredButton(@color) { + #colorizedButton( + @crust, + @color, + @color, + @hv-color: @crust, + lighten(@color, 10%), + ); + } + //buttons + .btn-primary { + #colorizedButton( + @base, + @accent, + @hv-bg: lighten(@accent, 10%), + ); + } + .btn-secondary { + #colorizedButton(@text, @surface0, @hv-bg: @surface1); + } + .btn-outline-secondary { + #colorizedButton(@surface1, transparent, @surface1, @subtext0, @surface1); + } + .btn-success { + #coloredButton(@green); + } + .btn-info { + #coloredButton(@teal); + } + .btn-warning { + #coloredButton(@yellow); + } + .btn-danger { + #coloredButton(@red); + } + .form-control { + &::-webkit-file-upload-button, + &::file-selector-button { + background-color: @base; + } + &:hover:not(:disabled, [readonly]) { + &::-webkit-file-upload-button, + &::file-selector-button { + background-color: @surface0; + } + } + } + .btn-close-white, + .btn-close { + --bs-btn-close-color: @surface0; + @svg: escape( + '' + ); + --bs-btn-close-bg: url("data:image/svg+xml,@{svg}"); + --bs-btn-close-opacity: 1; + } + .navbar-toggler-icon { + @svg: escape( + '' + ); + --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,@{svg}"); + } + } +} diff --git a/styles/pronouns.page/README.md b/styles/pronouns.page/README.md new file mode 100644 index 0000000000..febd9e2fd9 --- /dev/null +++ b/styles/pronouns.page/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Pronouns.page + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/pronouns.page/catppuccin.user.less b/styles/pronouns.page/catppuccin.user.less new file mode 100644 index 0000000000..2785a7b2e2 --- /dev/null +++ b/styles/pronouns.page/catppuccin.user.less @@ -0,0 +1,427 @@ +/* ==UserStyle== +@name Pronouns.page Catppuccin +@namespace github.com/catppuccin/userstyles/styles/pronouns.page +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pronouns.page +@version 2026.01.09 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pronouns.page/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apronouns.page +@description Soothing pastel theme for Pronouns.page +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("pronouns.page"), + domain("pronomen.net"), + domain("pronombr.es"), + domain("pronomejo.net"), + domain("fornovn.fo"), + domain("pronoms.fr"), + domain("pronom.it"), + domain("zaimki.pl") { + body:not([data-theme="dark"]) { + #catppuccin(@lightFlavor); + } + + body[data-theme="dark"], + body[data-theme="dark"]:not(.reduced-colours) { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + background: @base; + color: @text !important; + + --bs-body-color: @text; + --bs-body-bg: @base; + --bs-white-rgb: #lib.rgbify(@crust)[]; + --bs-primary-rgb: #lib.rgbify(@accent)[]; + --bs-secondary-rgb: #lib.rgbify(@overlay0)[]; + --bs-secondary-color: @subtext0; + --bs-tertiary-bg: @crust; + --bs-success-text-emphasis: @green; + --bs-success-rgb: #lib.rgbify(@green)[]; + --bs-info-text-emphasis: @sapphire; + --bs-warning-text-emphasis: @yellow; + --bs-danger-text-emphasis: @red; + --bs-danger-rgb: #lib.rgbify(@red)[]; + --bs-light-text-emphasis: @text; + --bs-dark-text-emphasis: @subtext1; + --bs-heading-color: @text; + --bs-form-valid-color: @green; + --bs-form-valid-border-color: @green; + --bs-form-invalid-color: @red; + --bs-form-invalid-border-color: @red; + + /* Buttons */ + + .btn-primary { + color: @crust; + --bs-btn-bg: @accent; + } + + .btn-primary, + .btn-outline-primary { + --bs-btn-hover-bg: @accent; + --bs-btn-border-color: @accent; + --bs-btn-hover-border-color: @accent; + --bs-btn-active-bg: @accent; + --bs-btn-active-border-color: @accent; + --bs-btn-disabled-color: @accent; + --bs-btn-disabled-bg: darken(@accent, 5%); + --bs-btn-disabled-border-color: @accent; + } + + .btn-outline-primary { + color: @text; + + &:hover { + color: @crust; + } + } + + .btn-success { + --bs-btn-color: @crust; + --bs-btn-bg: @green; + --bs-btn-border-color: @green; + --bs-btn-hover-color: @crust; + --bs-btn-hover-bg: darken(@green, 5%); + --bs-btn-hover-border-color: darken(@green, 5%); + --bs-btn-active-color: @crust; + --bs-btn-active-bg: darken(@green, 5%); + --bs-btn-active-border-color: darken(@green, 5%); + --bs-btn-disabled-color: @text; + --bs-btn-disabled-bg: @green; + --bs-btn-disabled-border-color: @green; + } + + .btn-outline-success { + color: @green; + + &:hover { + color: @crust; + } + + --bs-btn-color: @green; + --bs-btn-border-color: @green; + --bs-btn-hover-color: @crust; + --bs-btn-hover-bg: @green; + --bs-btn-hover-border-color: @green; + --bs-btn-active-color: @crust; + --bs-btn-active-bg: @green; + --bs-btn-active-border-color: @green; + --bs-btn-disabled-color: @green; + --bs-btn-disabled-border-color: @green; + } + + .btn-outline-danger { + --bs-btn-color: @red; + --bs-btn-border-color: @red; + --bs-btn-hover-color: @crust; + --bs-btn-hover-bg: @red; + --bs-btn-hover-border-color: @red; + --bs-btn-active-color: @crust; + --bs-btn-active-bg: @red; + --bs-btn-active-border-color: @red; + --bs-btn-disabled-color: @red; + --bs-btn-disabled-border-color: @red; + } + + .btn-secondary { + --bs-btn-color: @text; + --bs-btn-bg: @overlay0; + --bs-btn-border-color: @overlay0; + --bs-btn-hover-color: @text; + --bs-btn-hover-bg: @surface2; + --bs-btn-hover-border-color: @surface2; + --bs-btn-active-color: @text; + --bs-btn-active-bg: @surface2; + --bs-btn-active-border-color: @surface2; + --bs-btn-disabled-color: @text; + --bs-btn-disabled-bg: @overlay0; + --bs-btn-disabled-border-color: @overlay0; + } + + .btn-outline-secondary { + --bs-btn-color: @overlay0; + --bs-btn-border-color: @overlay0; + --bs-btn-hover-color: @text; + --bs-btn-hover-bg: @overlay0; + --bs-btn-hover-border-color: @overlay0; + --bs-btn-active-color: @text; + --bs-btn-active-bg: @overlay0; + --bs-btn-active-border-color: @overlay0; + --bs-btn-disabled-color: @overlay0; + --bs-btn-disabled-border-color: @overlay0; + } + + .btn-light { + &, + &:disabled, + &.disabled { + color: @text; + background-color: @crust; + } + } + .btn-dark, + .btn-outline-dark:hover { + color: @crust; + background-color: @text; + } + .btn-outline-dark { + color: @text; + } + + .btn-square { + background-color: @accent !important; + } + + /* Inputs */ + + .form-check-input:checked { + background-color: @accent !important; + border-color: @accent !important; + } + + .form-control { + color: @text; + background-color: @mantle; + border-color: @surface0; + + &:focus { + box-shadow: 0 0 0 0.25rem fade(@accent, 50%); + } + } + + .dropdown-menu { + color: @text; + background-color: @mantle; + border-color: @surface0; + + .dropdown-item { + color: @text; + + &:hover, + &:focus { + background-color: @crust; + } + } + } + + /* Date/calendar input */ + .dp__theme_dark, .dp__theme_light { + --dp-primary-color: @accent; + --dp-text-color: @text; + --dp-hover-text-color: @text; + --dp-background-color: @surface0; + --dp-hover-color: @surface1; + --dp-disabled-color: @surface2; + --dp-icon-color: @subtext0; + --dp-hover-icon-color: @subtext1; + --dp-secondary-color: @subtext0; + + .dp__overlay_cell_active, + .dp__active_date, + .dp__range_end, + .dp__range_start { + color: @crust; + } + } + + /* Header */ + + header .nav-item { + color: @text !important; + + &:hover { + color: @accent !important; + } + } + + .nav-custom:not(.nav-custom-start) .nav-item { + border-color: @surface0; + + &:hover { + border-bottom-color: @accent !important; + } + + &.btn.active, + &.btn:hover { + border-bottom-color: @accent !important; + } + } + + .nav-custom-start .btn, + .nav-custom .btn { + border-inline-start-color: @surface2 !important; + + &:hover, + &.active { + color: lighten(@accent, 5%) !important; + border-inline-start-color: @accent !important; + } + } + + .hamburger-menu .btn-hamburger { + background-color: @crust !important; + border-color: @surface0; + } + + .card { + background-color: @mantle; + } + + /* Footer */ + + .separator { + > .mask::after { + box-shadow: 0 0 10px @text; + } + + > span { + box-shadow: 0 2px 4px @text; + background: @text; + color: @crust; + } + } + + /* Calendar */ + + .list-group-flare > :first-child { + border-top-color: @accent !important; + } + .list-group-item { + color: @text !important; + background-color: @mantle !important; + border-color: @surface0 !important; + } + .calendar > .day.day-event { + border-color: @accent; + + &:hover { + background-color: darken(@accent, 10%) !important; + + .day-number { + color: @crust; + text-shadow: none; + } + } + + &.day-event-1 { + background-color: @accent; + color: @crust; + } + } + + /* Dictionary */ + .page-link { + 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; + } + table { + --bs-table-color: @text !important; + --bs-table-striped-color: @text !important; + --bs-table-hover-color: @text !important; + --bs-table-hover-bg: @surface1 !important; + --bs-table-striped-bg: @surface0 !important; + } + + /* Other */ + + .bg-light { + background-color: @mantle !important; + } + .bg-dark { + background-color: @text !important; + } + .bg-white { + background-color: @crust !important; + } + .text-dark { + color: @text !important; + } + .colour-default { + color: @text !important; + } + .colour-pink, .text-primary { + color: @accent !important; + } + .colour-orange { + color: @peach !important; + } + .colour-red { + color: @red !important; + } + .colour-grey { + color: @overlay2 !important; + } + + .alert-light { + background-color: @surface2; + color: @text; + } + .alert-info { + background-color: fade(@sapphire, 30%); + border-color: @sapphire; + color: @text; + } + + .nav-pills { + --bs-nav-pills-link-active-bg: @accent; + --bs-nav-pills-link-active-color: @crust; + } + + .badge { + --bs-badge-color: @text; + } + + .border { + border-color: @surface0 !important; + } + + a { + color: @accent; + + &:not(.nav-link.active):hover { + color: lighten(@accent, 5%); + } + } + + code { + color: @crust; + background-color: @accent; + border-color: transparent; + } + + /* Share QR code */ + [fill="#ff95bb"] { + fill: @accent; + } + + mark, + .mark { + background-color: fade(@yellow, 50%); + color: @text; + } + } +} diff --git a/styles/proton/README.md b/styles/proton/README.md index ff69fdd92a..d790706efb 100644 --- a/styles/proton/README.md +++ b/styles/proton/README.md @@ -4,45 +4,25 @@

Logo
- Catppuccin for Proton + Catppuccin for Proton

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
+## Usage -## Usage -Open Proton Mail and click the settings in the top right, then set the base theme to `Snow` if you are using the Latte flavor, otherwise set it to `Carbon` +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +> [!NOTE] +> Set Proton Mail's built-in theme to 'Snow' if you're using Latte or 'Carbon' if you're using the others. +## 💝 Current Maintainer +- [soya-daizu](https://github.com/soya-daizu) -## 💝 Current Maintainer(s) -- [soya_daizu](https://github.com/soya-daizu)   diff --git a/styles/proton/assets/catwalk.webp b/styles/proton/assets/catwalk.webp deleted file mode 100644 index 5543041a49..0000000000 --- a/styles/proton/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:567b2a3bc2f424c284525204d384542b76f39bce5fa073d567d17baa9e33d44e -size 101744 diff --git a/styles/proton/assets/frappe.webp b/styles/proton/assets/frappe.webp deleted file mode 100644 index 13156c6709..0000000000 --- a/styles/proton/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:cd0034a690422dda6e54464767277d1884544ed0b53e38617c12ff2a157804c8 -size 96584 diff --git a/styles/proton/assets/latte.webp b/styles/proton/assets/latte.webp deleted file mode 100644 index f78bca00ab..0000000000 --- a/styles/proton/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:659c06c1468a15d500bc48af83c42604afe7e6cc7f0467253c37edfd511a2c8b -size 97716 diff --git a/styles/proton/assets/macchiato.webp b/styles/proton/assets/macchiato.webp deleted file mode 100644 index 95d20de60d..0000000000 --- a/styles/proton/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f98c8e897446ce950d75afd0a6693585d568c0fd8ec62bf19bf655719b288fd0 -size 98326 diff --git a/styles/proton/assets/mocha.webp b/styles/proton/assets/mocha.webp deleted file mode 100644 index 5d72bc5bcf..0000000000 --- a/styles/proton/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b49546dff4cfe4705c8118d9e78f1cd4b8a31a628f5507f48bbb57fb57e03c95 -size 99614 diff --git a/styles/proton/catppuccin.user.css b/styles/proton/catppuccin.user.css deleted file mode 100644 index a79f6b56ed..0000000000 --- a/styles/proton/catppuccin.user.css +++ /dev/null @@ -1,324 +0,0 @@ -/* ==UserStyle== -@name Proton Catppuccin -@namespace github.com/catppuccin/userstyles/styles/proton -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/proton -@version 0.1.3 -@description Soothing pastel theme for Proton services -@author Catppuccin -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/proton/catppuccin.user.css -@license MIT - -@preprocessor less -@var select flavor "Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] -==/UserStyle== */ -@-moz-document regexp("https://(account|mail|drive|calendar).proton.me/.*$") -{ - :root { - #catppuccin(@flavor, @accentColor); - } - - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-Color: @catppuccin[@@lookup][@@accent]; - - svg.logo { - @accentH: hue(@accent-Color); - @protonH: hue(#6d4aff); - - .replaceColor(@org, @property) { - &[@{property}="@{org}"] { - @hDiff: @protonH - hue(@org); - @{property}: hsl( - @accentH - @hDiff, - saturation(@org) - 30%, - lightness(@org) - ); - } - } - - /* prettier-ignore */ - > path { - .replaceColor(#B8D7FF, fill); - .replaceColor(#8F69FF, fill); - } - - /* prettier-ignore */ - > defs stop { - .replaceColor(#E3D9FF, stop-color); - .replaceColor(#7341FF, stop-color); - .replaceColor(#6D4AFF, stop-color); - .replaceColor(#AA8EFF, stop-color); - .replaceColor(#06B8FF, stop-color); - .replaceColor(#BFE8FF, stop-color); - .replaceColor(#BFABFF, stop-color); - .replaceColor(#FF50C3, stop-color); - .replaceColor(#B487FF, stop-color); - .replaceColor(#FFC8FF, stop-color); - .replaceColor(#8EFFEE, stop-color); - .replaceColor(#C9C7FF, stop-color); - .replaceColor(#00F0C3, stop-color); - .replaceColor(#FFD580, stop-color); - .replaceColor(#F6C592, stop-color); - .replaceColor(#EBB6A2, stop-color); - .replaceColor(#DFA5AF, stop-color); - .replaceColor(#D397BE, stop-color); - .replaceColor(#C486CB, stop-color); - .replaceColor(#B578D9, stop-color); - .replaceColor(#A166E5, stop-color); - .replaceColor(#8B57F2, stop-color); - .replaceColor(#704CFF, stop-color); - .replaceColor(#B39FFB, stop-color); - .replaceColor(#FFE8DB, stop-color); - } - } - - &, - .ui-prominent, - .ui-standard { - .lightenOrDarken(@color, @value) { - @result: if( - @flavor=latte, - lighten(@color, @value), - darken(@color, @value) - ); - } - - --primary: @accent-Color; - --primary-contrast: @mantle; - --signal-danger-minor-2: .lightenOrDarken(@maroon, 40%) [ @result]; - --signal-danger-minor-1: .lightenOrDarken(@maroon, 30%) [ @result]; - --signal-danger: @maroon; - --signal-danger-major-1: saturate(@maroon, 40%); - --signal-danger-major-2: saturate(@maroon, 30%); - --signal-danger-major-3: saturate(@maroon, 20%); - --signal-danger-contrast: @mantle; - --signal-warning-minor-2: .lightenOrDarken(@peach, 40%) [ @result]; - --signal-warning-minor-1: .lightenOrDarken(@peach, 30%) [ @result]; - --signal-warning: @peach; - --signal-warning-major-1: saturate(@peach, 40%); - --signal-warning-major-2: saturate(@peach, 30%); - --signal-warning-major-3: saturate(@peach, 20%); - --signal-warning-contrast: @mantle; - --signal-success-minor-2: .lightenOrDarken(@green, 40%) [ @result]; - --signal-success-minor-1: .lightenOrDarken(@green, 30%) [ @result]; - --signal-success: @green; - --signal-success-major-1: saturate(@green, 40%); - --signal-success-major-2: saturate(@green, 30%); - --signal-success-major-3: saturate(@green, 20%); - --signal-success-contrast: @mantle; - --signal-info-minor-2: .lightenOrDarken(@blue, 40%) [ @result]; - --signal-info-minor-1: .lightenOrDarken(@blue, 30%) [ @result]; - --signal-info: @blue; - --signal-info-major-1: saturate(@blue, 40%); - --signal-info-major-2: saturate(@blue, 30%); - --signal-info-major-3: saturate(@blue, 20%); - --signal-info-contrast: @mantle; - --interaction-norm-minor-2: .lightenOrDarken(@accent-Color, 40%) [ - @result]; - --interaction-norm-minor-1: .lightenOrDarken(@accent-Color, 30%) [ - @result]; - --interaction-norm: @accent-Color; - --interaction-norm-major-1: saturate(@accent-Color, 30%); - --interaction-norm-major-2: saturate(@accent-Color, 20%); - --interaction-norm-major-3: saturate(@accent-Color, 10%); - --interaction-norm-contrast: @mantle; - --interaction-weak-minor-2: darken(@surface0, 50%); - --interaction-weak-minor-1: darken(@surface0, 30%); - --interaction-weak: @surface0; - --interaction-weak-major-1: lighten(@surface0, 10%); - --interaction-weak-major-2: lighten(@surface0, 20%); - --interaction-weak-major-3: lighten(@surface0, 30%); - --interaction-weak-contrast: @text; - --text-norm: @text; - --text-weak: @subtext0; - --text-hint: @subtext1; - --text-disabled: @overlay1; - --text-invert: @crust; - --field-norm: @overlay2; - --field-hover: @overlay1; - --field-disabled: @overlay0; - --field-focus: @accent-Color; - --field-highlight: fadeout(@accent-Color, 30%); - --focus-outline: @accent-Color; - --focus-ring: fadeout(@accent-Color, 60%); - --border-norm: @overlay0; - --border-weak: @overlay1; - --background-norm: @base; - --background-weak: @mantle; - --background-strong: @crust; - --background-invert: @text; - --interaction-default: transparent; - --interaction-default-hover: fadeout(@overlay1, 80%); - --interaction-default-active: fadeout(@overlay1, 60%); - --shadow-norm-opacity: 0.5; - --shadow-lifted-opacity: 0.75; - --backdrop-norm: fadeout(@crust, 50%); - --optional-scrollbar-thumb-color: @surface0; - --optional-scrollbar-thumb-hover-color: @surface2; - --optional-link-norm: var(--interaction-norm-major-1); - --optional-link-hover: var(--interaction-norm-major-2); - --optional-link-active: var(--interaction-norm-major-3); - --optional-email-item-unread-background-color: var(--background-weak); - --optional-email-item-read-background-color: var(--background-norm); - --optional-email-item-read-text-color: var(--text-weak); - --optional-mini-calendar-today-color: @text; - --optional-logo-text-proton-color: @text; - --optional-logo-text-product-color: @text; - --favorite-icon-color: @peach; - } - - .ui-prominent { - --background-norm: @mantle; - --background-weak: @base; - --background-strong: @crust; - } - - .item-container-row:not(.item-is-selected):hover, - .item-container:not(.item-is-selected):hover { - box-shadow: none; - background-color: var(--navigation-current-item-background-color); - color: var(--email-item-unread-text-color); - } - } -} diff --git a/styles/proton/catppuccin.user.less b/styles/proton/catppuccin.user.less new file mode 100644 index 0000000000..38a87a0cb4 --- /dev/null +++ b/styles/proton/catppuccin.user.less @@ -0,0 +1,316 @@ +/* ==UserStyle== +@name Proton Catppuccin +@namespace github.com/catppuccin/userstyles/styles/proton +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/proton +@version 2025.12.05 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/proton/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aproton +@description Soothing pastel theme for Proton +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document regexp( + "https://(account|mail|drive|calendar|lumo).proton.me/.*$" + ) { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + svg.logo { + @accentH: hue(@accent); + @protonH: hue(#6d4aff); + + .replaceColor(@org, @property) { + &[@{property}="@{org}"] { + @hDiff: @protonH - hue(@org); + @{property}: hsl( + @accentH - @hDiff, + saturation(@org) - 30%, + lightness(@org) + ); + } + } + + /* deno-fmt-ignore */ + path { + .replaceColor(#B8D7FF, fill); + .replaceColor(#8F69FF, fill); + .replaceColor(#6D4AFF, fill); + .replaceColor(#FFBB93, fill); + .replaceColor(#85D4F5, fill); + .replaceColor(#D6F1FC, fill); + } + + /* deno-fmt-ignore */ + defs stop { + .replaceColor(#E3D9FF, stop-color); + .replaceColor(#7341FF, stop-color); + .replaceColor(#6D4AFF, stop-color); + .replaceColor(#AA8EFF, stop-color); + .replaceColor(#06B8FF, stop-color); + .replaceColor(#BFE8FF, stop-color); + .replaceColor(#BFABFF, stop-color); + .replaceColor(#FF50C3, stop-color); + .replaceColor(#B487FF, stop-color); + .replaceColor(#FFC8FF, stop-color); + .replaceColor(#8EFFEE, stop-color); + .replaceColor(#C9C7FF, stop-color); + .replaceColor(#00F0C3, stop-color); + .replaceColor(#FFD580, stop-color); + .replaceColor(#F6C592, stop-color); + .replaceColor(#EBB6A2, stop-color); + .replaceColor(#DFA5AF, stop-color); + .replaceColor(#D397BE, stop-color); + .replaceColor(#C486CB, stop-color); + .replaceColor(#B578D9, stop-color); + .replaceColor(#A166E5, stop-color); + .replaceColor(#8B57F2, stop-color); + .replaceColor(#704CFF, stop-color); + .replaceColor(#B39FFB, stop-color); + .replaceColor(#FFE8DB, stop-color); + .replaceColor(#957AFD, stop-color); + .replaceColor(#FFC6C6, stop-color); + .replaceColor(#FA528E, stop-color); + .replaceColor(#FF8065, stop-color); + .replaceColor(#FFA51F, stop-color); + .replaceColor(#34B8EE, stop-color); + } + } + + &, + .ui-prominent, + .ui-standard { + #lightenOrDarken(@color, @value) { + @result: if( + @flavor = latte, + lighten(@color, @value), + darken(@color, @value) + ); + } + + #darkenOrLighten(@color, @value) { + @result: if( + @flavor = latte, + darken(@color, @value), + lighten(@color, @value) + ); + } + + --primary-minor-2: #lightenOrDarken(@accent, 60%)[]; + --primary-minor-1: #lightenOrDarken(@accent, 50%)[]; + --primary: @accent; + --primary-major-1: #darkenOrLighten(@accent, 4%)[]; + --primary-major-2: #darkenOrLighten(@accent, 8%)[]; + --primary-major-3: #darkenOrLighten(@accent, 12%)[]; + --primary-contrast: @mantle; + --signal-danger-minor-2: #lightenOrDarken(@maroon, 40%)[]; + --signal-danger-minor-1: #lightenOrDarken(@maroon, 30%)[]; + --signal-danger: @maroon; + --signal-danger-major-1: #darkenOrLighten(@maroon, 4%)[]; + --signal-danger-major-2: #darkenOrLighten(@maroon, 8%)[]; + --signal-danger-major-3: #darkenOrLighten(@maroon, 12%)[]; + --signal-danger-contrast: @mantle; + --signal-warning-minor-2: #lightenOrDarken(@peach, 40%)[]; + --signal-warning-minor-1: #lightenOrDarken(@peach, 30%)[]; + --signal-warning: @peach; + --signal-warning-major-1: #darkenOrLighten(@peach, 4%)[]; + --signal-warning-major-2: #darkenOrLighten(@peach, 8%)[]; + --signal-warning-major-3: #darkenOrLighten(@peach, 12%)[]; + --signal-warning-contrast: @mantle; + --signal-success-minor-2: #lightenOrDarken(@green, 40%)[]; + --signal-success-minor-1: #lightenOrDarken(@green, 30%)[]; + --signal-success: @green; + --signal-success-major-1: #darkenOrLighten(@green, 4%)[]; + --signal-success-major-2: #darkenOrLighten(@green, 8%)[]; + --signal-success-major-3: #darkenOrLighten(@green, 12%)[]; + --signal-success-contrast: @mantle; + --signal-info-minor-2: #lightenOrDarken(@blue, 40%)[]; + --signal-info-minor-1: #lightenOrDarken(@blue, 30%)[]; + --signal-info: @blue; + --signal-info-major-1: #darkenOrLighten(@blue, 4%)[]; + --signal-info-major-2: #darkenOrLighten(@blue, 8%)[]; + --signal-info-major-3: #darkenOrLighten(@blue, 12%)[]; + --signal-info-contrast: @mantle; + --interaction-norm-minor-2: #lightenOrDarken(@accent, 40%)[]; + --interaction-norm-minor-1: #lightenOrDarken(@accent, 30%)[]; + --interaction-norm: @accent; + --interaction-norm-major-1: #darkenOrLighten(@accent, 4%)[]; + --interaction-norm-major-2: #darkenOrLighten(@accent, 8%)[]; + --interaction-norm-major-3: #darkenOrLighten(@accent, 12%)[]; + --interaction-norm-contrast: @mantle; + --interaction-weak-minor-2: #lightenOrDarken(@surface0, 20%)[]; + --interaction-weak-minor-1: #lightenOrDarken(@surface0, 10%)[]; + --interaction-weak: @surface0; + --interaction-weak-major-1: #darkenOrLighten(@surface0, 4%)[]; + --interaction-weak-major-2: #darkenOrLighten(@surface0, 8%)[]; + --interaction-weak-major-3: #darkenOrLighten(@surface0, 12%)[]; + --interaction-weak-contrast: @text; + --text-norm: @text; + --text-weak: @subtext0; + --text-hint: @subtext1; + --text-disabled: @overlay1; + --text-invert: @crust; + --text-markdown: @text; + --field-norm: @overlay2; + --field-hover: @overlay1; + --field-disabled: @overlay0; + --field-focus: @accent; + --field-highlight: fade(@accent, 70%); + --focus-outline: @accent; + --focus-ring: fade(@accent, 40%); + --link-norm: @blue; + --link-hover: @lavender; + --link-active: @sky; + --markdown-pre-background: @mantle; + --border-norm: @overlay0; + --border-weak: @surface1; + --background-norm: @base; + --background-weak: @mantle; + --background-strong: @crust; + --background-invert: @text; + --interaction-default: transparent; + --interaction-default-hover: fade(@overlay1, 20%); + --interaction-default-active: fade(@overlay1, 40%); + --shadow-primary-color: red(@accent) green(@accent) blue(@accent); + --shadow-norm-opacity: 0.5; + --shadow-raised-opacity: 1; + --shadow-lifted-opacity: 0.75; + --backdrop-norm: fade(@crust, 50%); + --optional-scrollbar-thumb-color: @surface0; + --optional-scrollbar-thumb-hover-color: @surface2; + --optional-link-norm: var(--interaction-norm-major-1); + --optional-link-hover: var(--interaction-norm-major-2); + --optional-link-active: var(--interaction-norm-major-3); + --optional-background-elevated: @surface0; + --optional-background-lowered: var(--background-norm); + --optional-email-item-unread-background-color: var(--background-weak); + --optional-email-item-read-background-color: var(--background-norm); + --optional-email-item-read-text-color: var(--text-weak); + --optional-mini-calendar-today-color: @text; + --optional-logo-text-proton-color: @text; + --optional-logo-text-product-color: @text; + --favorite-icon-color: @peach; + } + + .ui-prominent { + --background-norm: @mantle; + --background-weak: @base; + --background-strong: @crust; + } + + .button-promotion { + --upgrade-color-stop-1: @red; + --upgrade-color-stop-2: @blue; + } + + .item-container-row:not(.item-is-selected):hover, + .item-container:not(.item-is-selected):hover { + box-shadow: none; + background-color: var(--navigation-current-item-background-color); + color: var(--email-item-unread-text-color); + } + + .message-content:not(.plain) .message-iframe iframe { + color-scheme: light; + } + + @media (min-width: 28.135em) { + .sign-layout-bg { + background: linear-gradient( + 68.66deg, + desaturate(@mantle, 5%) 1.3%, + desaturate(@base, 5%) 50% + ); + } + } + + /* Proton Lumo */ + + header { + a[aria-label="Go to Lumo homepage"] img { + filter: @accent-filter; + } + } + + .whats-new-section { + background: @accent; + } + + .new-label { + background-color: @accent; + color: @crust; + } + + .lumo-sidebar { + background: @mantle; + a.lumo-plus-button svg path { + fill: @accent; + } + } + + .lumo-input-container.ghost-mode { + background-color: @crust; + --ghost-text: @text; + --ghost-text-weak: @subtext0; + .lumo-input { + background-color: @mantle; + } + } + + div[style*="background: rgb(40, 44, 52);"], + div[style*="background: rgb(250, 250, 250);"] { + background: @mantle !important; + + span { + color: @text !important; + } + + span.token[style*="color: rgb(92, 99, 112);"], + span.token[style*="color: rgb(160, 161, 167);"] { + color: @overlay2 !important; + } + + span.token[style*="color: rgb(97, 175, 239);"], + span.token[style*="color: rgb(64, 120, 242);"] { + color: @blue !important; + } + + span.token[style*="color: rgb(152, 195, 121);"], + span.token[style*="color: rgb(80, 161, 79);"] { + color: @green !important; + } + + span.token[style*="color: rgb(209, 154, 102);"], + span.token[style*="color: rgb(183, 107, 1);"] { + color: @peach !important; + } + + span.token[style*="color: rgb(198, 120, 221);"], + span.token[style*="color: rgb(166, 38, 164);"] { + color: @mauve !important; + } + + span.token[style*="color: rgb(224, 108, 117);"], + span.token[style*="color: rgb(228, 86, 73);"] { + color: @red !important; + } + } + } +} diff --git a/styles/pypi/README.md b/styles/pypi/README.md new file mode 100644 index 0000000000..cc6b10919b --- /dev/null +++ b/styles/pypi/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for PyPI + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [trinkey](https://github.com/trinkey) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/pypi/catppuccin.user.less b/styles/pypi/catppuccin.user.less new file mode 100644 index 0000000000..0b49d3344e --- /dev/null +++ b/styles/pypi/catppuccin.user.less @@ -0,0 +1,928 @@ +/* ==UserStyle== +@name PyPI Catppuccin +@namespace github.com/catppuccin/userstyles/styles/pypi +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pypi +@version 2026.03.14 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pypi/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apypi +@description Soothing pastel theme for PyPI +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("pypi.org") { + @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); + + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + ::selection { + color: unset; // TODO: Basically another case of setting the text color in the selection, but unsetting it here. + } + + body { + background-color: @base !important; + color: @text !important; + } + + input, + select, + textarea { + background-color: @mantle !important; + border-color: @surface0 !important; + color: @text !important; + + &:active, + &:focus, + &:hover { + border-color: @accent !important; + box-shadow: inset 0 0 0 1px @accent !important; + } + } + + input:disabled, + select:disabled { + &, + &:active, + &:focus, + &:hover { + background-color: @mantle !important; + } + } + + hr { + background-color: @surface0 !important; + background-image: linear-gradient(90deg, @surface0, @surface0) !important; + } + + .project-description blockquote { + color: @subtext0 !important; + } + + .project-description table { + tr { + background-color: @base !important; + } + + tr:nth-child(odd) { + background-color: @mantle !important; + } + + &, tr, th, td { + border-color: @surface0 !important; + } + } + + .verified .check { + color: @green; + } + + .banner, + .footer { + background-color: @mantle !important; + color: @text !important; + } + + .accordion__link { + color: @accent !important; + } + + .password-strength { + border-color: @surface2 !important; + } + + .accordion__link:active, + .accordion__link:focus { + outline-color: @accent !important; + outline-style: solid; + } + + @media (max-width: 1000px) { + .accordion__link { + color: @text !important; + } + + .accordion__link:active, + .accordion__link:focus { + outline-color: @text !important; + } + } + + .footer__divider { + border-color: @surface0 !important; + } + + a, + .footer__menu li a { + &:active, + &:focus { + outline-color: @accent !important; + } + } + + .skip-to-content:focus { + background-color: @base !important; + color: @text !important; + } + + a:not(.site-header__logo, .button, .dropdown__link, .badge, .release__card), + a:hover:not( + .site-header__logo, + .button, + .dropdown__link, + .badge, + .release__card + ), + .footer__menu li a, + .footer__text a, + .language-switcher ul button { + color: @accent !important; + } + + .footer__text a, + .language-switcher ul button { + &:active, + &:focus { + outline-color: @accent !important; + } + } + + .footer__menu h2, + .footer__text, + .language-switcher ul button.language-switcher__selected::before { + color: @text !important; + } + + .language-switcher { + background-color: @crust !important; + border-top-color: @crust !important; + color: @text !important; + } + + .horizontal-section--grey { + background-color: @base !important; + border-bottom-color: @base !important; + border-top-color: @base !important; + } + + .statistics-bar__statistic { + color: @subtext0 !important; + } + + .lede-paragraph { + color: @subtext1 !important; + } + + .site-header { + background-color: @crust !important; + border-bottom-color: @crust !important; + } + + .site-header__logo:active, + .site-header__logo:focus { + outline-color: @text !important; + } + + .dropdown__content { + border-color: @accent !important; + box-shadow: none !important; + } + + .dropdown__content li:hover { + background-color: @base !important; + } + + .dropdown button.dropdown__link:not(:hover), + .dropdown__link { + background-color: @crust !important; + border-bottom-color: @crust !important; + color: @text !important; + } + + .dropdown__link:hover { + background-color: @base !important; + } + + a.dropdown__link, + a.dropdown__link:hover { + background-image: none !important; + color: @text !important; + } + + .horizontal-menu__link:active, + .horizontal-menu__link:focus { + outline-color: @accent !important; + } + + .horizontal-menu--light .horizontal-menu__link { + color: @accent !important; + } + + .horizontal-menu--light .horizontal-menu__link:hover { + text-decoration-color: @accent !important; + } + + .sponsors, + .sidebar-section.loaded { + display: none; + } + + .package-snippet { + background-color: @crust !important; + border-color: @surface0 !important; + box-shadow: none !important; + } + + .package-snippet__created { + color: @subtext0 !important; + } + + .package-snippet__description { + color: @subtext1 !important; + } + + .search-form__search { + background-color: @surface0 !important; + } + .search-form__button { + color: @subtext0; + } + + .button { + border-color: @subtext0 !important; + color: @text !important; + + &:active, + &:focus, + &:hover { + border-color: @subtext1 !important; + color: @text !important; + } + } + + .button--primary, + .button--primary:active, + .button--primary:focus, + .button--primary:hover { + background-color: @accent !important; + border-color: @accent !important; + color: @base !important; + outline-color: @accent !important; + } + + .danger { + color: @red !important; + } + + .notification-bar { + background-color: @accent !important; + border-bottom-color: @accent !important; + color: @base !important; + } + + .notification-bar--danger { + background-color: @red !important; + } + + .notification-bar--success { + background-color: @green !important; + } + + .notification-bar--banner .button { + color: @base !important; + } + + .badge--warning { + background-color: @yellow !important; + border-color: @yellow !important; + color: @base !important; + + &:hover { + color: @base !important; + } + } + + .badge--warning:active, + .badge--warning:focus { + outline-color: invisible !important; + } + + .callout-block--warning { + border-color: @yellow !important; + } + + .callout-block--warning > :not(.modal, .button, a) { + color: @text !important; + } + + .callout-block--warning::before { + background-color: @yellow !important; + } + + .callout-block--warning .callout-block__dismiss:active, + .callout-block--warning .callout-block__dismiss:focus { + outline-color: @yellow !important; + } + + .callout-block { + border-color: @accent !important; + } + + .callout-block::before { + background-color: @accent !important; + } + + .callout-block--danger { + border-color: @red !important; + } + + .callout-block--danger > :not(.modal, .button) { + color: @text !important; + } + + .callout-block--danger::before { + background-color: @red !important; + } + + .callout-block--danger .callout-block__dismiss:active, + .callout-block--danger .callout-block__dismiss:focus { + outline-color: @red !important; + } + + .callout-block--success { + border-color: @green !important; + } + + .callout-block--success > :not(.modal, .button) { + color: @text !important; + } + + .callout-block--success::before { + background-color: @green !important; + } + + .callout-block--success .callout-block__dismiss:active, + .callout-block--success .callout-block__dismiss:focus { + outline-color: @green !important; + } + + .faq-group h3::before { + color: @accent !important; + } + + .badge { + background-color: @accent !important; + border-color: @accent !important; + color: @base !important; + } + + .badge:hover { + color: @base !important; + } + + .badge:active, + .badge: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; + } + + .notification-bar--warning { + background-color: @yellow !important; + color: @base !important; + } + + .notification-bar--warning .notification-bar__dismiss:active, + .notification-bar--warning .notification-bar__dismiss:focus { + outline-color: @yellow !important; + } + + .table td, + .table th { + border-bottom-color: @surface0 !important; + } + + .table--collaborators .table__user-text > * { + background-image: linear-gradient( + 90deg, + @accent, + @accent + ) !important; + color: @accent !important; + } + + .table--collaborators .table__user-text > :hover { + background-image: linear-gradient( + 90deg, + @accent, + @accent + ) !important; + color: @accent !important; + } + + .table--collaborators .table__user-text > :active, + .table--collaborators .table__user-text > :focus { + outline-color: @accent !important; + } + + @media (max-width: 600px) { + .table--security-logs, + .table--collaborators, + .table--releases, + .table--emails, + .table--2fa, + .table--api-tokens, + .table--publisher-list { + border-bottom-color: @surface0 !important; + } + + .table--security-logs tbody tr td:first-child, + .table--security-logs tbody tr th:first-child, + .table--collaborators tbody tr td:first-child, + .table--collaborators tbody tr th:first-child, + .table--releases tbody tr td:first-child, + .table--releases tbody tr th:first-child, + .table--emails tbody tr td:first-child, + .table--emails tbody tr th:first-child, + .table--2fa tbody tr td:first-child, + .table--2fa tbody tr th:first-child, + .table--api-tokens tbody tr td:first-child, + .table--api-tokens tbody tr th:first-child, + .table--publisher-list tbody tr td:first-child, + .table--publisher-list tbody tr th:first-child { + border-top-color: @surface0 !important; + } + } + + @media (max-width: 800px) { + .table--files, + .table--history, + .table--downloads { + border-bottom-color: @subtext0 !important; + } + + .table--files tbody tr td:first-child, + .table--files tbody tr th:first-child, + .table--history tbody tr td:first-child, + .table--history tbody tr th:first-child, + .table--downloads tbody tr td:first-child, + .table--downloads tbody tr th:first-child { + border-top-color: @subtext0 !important; + } + } + + @media (max-width: 400px) { + .table--hashes { + border-bottom-color: @subtext0 !important; + } + + .table--hashes tbody tr td:first-child, + .table--hashes tbody tr th:first-child { + border-top-color: @subtext0 !important; + } + + .table--hashes td .button::before { + border-color: transparent !important; + } + } + + .sponsor-grid__sponsor { + background-color: @mantle !important; + border-color: @subtext0 !important; + } + + .sponsor-grid__sponsor:active, + .sponsor-grid__sponsor:hover { + border-color: @subtext0 !important; + } + + .sponsor-grid__sponsor--invitation, + .sponsor-grid__sponsor--invitation:hover { + border-color: @accent !important; + } + + .sponsor-grid__sponsor-activity { + color: @subtext0 !important; + } + + .sponsor-package { + border-color: @accent !important; + } + + .sponsor-package__header { + background-color: @accent !important; + color: @base !important; + } + + .sponsor-package__icon { + background-color: @accent !important; + } + + .mobile-search { + background-color: @crust !important; + } + + .hooray-list { + border-top-color: @subtext0 !important; + } + + .hooray-list li { + border-bottom-color: @subtext0 !important; + } + + .hooray-list li::before { + color: @text !important; + } + + .button--tertiary { + background-color: @crust !important; + border-color: @subtext0 !important; + } + + .button--danger { + background-color: @red !important; + border-color: @red !important; + color: @base !important; + } + + .button--danger:active, + .button--danger:focus, + .button--danger:hover { + background-color: @red !important; + border-color: @red !important; + color: @base !important; + text-decoration-color: @red !important; + } + + .button--danger:active, + .button--danger:focus { + border-color: @red !important; + } + + .button--danger:active:active, + .button--danger:active:focus, + .button--danger:focus:active, + .button--danger:focus:focus { + outline-color: @red !important; + } + + .button--warning { + background-color: @yellow !important; + border-color: @yellow !important; + color: @base !important; + } + + .button--warning:active, + .button--warning:focus, + .button--warning:hover { + background-color: @yellow !important; + border-color: @yellow !important; + color: @base !important; + text-decoration-color: @yellow !important; + } + + .button--warning:active, + .button--warning:focus { + border-color: @yellow !important; + } + + .button--disabled, + .button--disabled:active, + .button--disabled:focus, + .button--disabled:hover, + .button[disabled], + .button[disabled]:active, + .button[disabled]:focus, + .button[disabled]:hover { + background-color: @base !important; + border-color: @subtext0 !important; + color: @subtext0 !important; + } + + .button--switch-to-desktop, + .button--switch-to-desktop:active, + .button--switch-to-desktop:focus, + .button--switch-to-desktop:hover { + border-color: @text !important; + color: @text !important; + } + + .password-strength .password-strength__gauge--0 { + background-color: @red !important; + } + + .password-strength .password-strength__gauge--1 { + background-color: @peach !important; + } + + .password-strength .password-strength__gauge--2 { + background-color: @yellow !important; + } + + .password-strength .password-strength__gauge--3 { + background-color: @blue !important; + } + + .password-strength .password-strength__gauge--4 { + background-color: @green !important; + } + + .package-header__pip-instructions span { + background-color: @crust !important; + border-color: @subtext0 !important; + } + + .package-header__pip-instructions button { + background-color: @crust !important; + border-color: @subtext0 !important; + color: @text !important; + } + + .package-header__pip-instructions button:hover { + background-color: @base !important; + } + + .package-header__pip-instructions button:active, + .package-header__pip-instructions button:focus { + outline-color: @base !important; + } + + .docutils.literal, + code, + kbd, + pre, + samp, + tt { + background-color: @mantle !important; + border-color: @mantle !important; + color: @subtext1 !important; + } + + .vertical-tabs__tab:hover { + color: @accent !important; + } + + .vertical-tabs__tab:active, + .vertical-tabs__tab:focus { + box-shadow: 0 0 0 2px @crust !important; + outline-color: @accent !important; + } + + @media (max-width: 800px) { + .vertical-tabs__tab--mobile, + .vertical-tabs__tab--mobile:last-of-type { + border-bottom-color: @surface0 !important; + } + } + + .vertical-tabs__tab--is-active, + .vertical-tabs__tab--is-active:hover { + background: @crust !important; + color: @accent !important; + } + + .vertical-tabs__content:focus { + outline-color: @accent !important; + } + + .verified, + .unverified { + small { + color: @subtext0 !important; + } + } + + .sidebar-section .sidebar-section__user-gravatar:active, + .sidebar-section .sidebar-section__user-gravatar:focus { + outline-color: @accent !important; + } + + .sidebar-section__user-gravatar-text, + .sidebar-section__user-gravatar-text:hover { + background-image: linear-gradient( + 90deg, + @accent, + @accent + ) !important; + color: @accent !important; + } + + .sidebar-section__user-gravatar-text:active, + .sidebar-section__user-gravatar-text:focus { + outline-color: @accent !important; + } + + .sidebar-section { + border-bottom-color: @surface0; + } + + .status-badge { + background-color: @crust !important; + border-color: @mantle !important; + } + + .status-badge span { + color: @base !important; + text-decoration: none !important; + } + + .status-badge:active, + .status-badge:focus { + outline-color: @mantle !important; + } + + .status-badge::before { + color: @base !important; + border-right-color: @mantle !important; + } + + .status-badge--good { + background-color: @green !important; + color: @base !important; + } + + .status-badge--warn { + background-color: @yellow !important; + } + + .status-badge--bad { + background-color: @red !important; + color: @base !important; + } + + .viewport-section__rule { + background-color: @base !important; + } + + .viewport-section--dark { + background-color: @base !important; + color: @text !important; + } + + .viewport-section--ee .viewport-section__heading { + background-color: @base !important; + color: @accent !important; + } + + .viewport-section--ee + .viewport-section__video + .viewport-section__video-container { + border-color: @crust !important; + outline-color: invisible !important; + } + + .form-errors, + .form-errors li::before { + color: @red !important; + } + + .form-errors .form-error--valid, + .form-errors .form-error--valid::before { + color: @green !important; + } + + .breadcrumbs__breadcrumb { + color: @text !important; + } + + .breadcrumbs__breadcrumb:first-child { + color: @text !important; + } + + .breadcrumbs__breadcrumb:not(:last-child)::after { + color: @text !important; + } + + .horizontal-menu__link--with-icon:hover .fa, + .horizontal-menu__link--with-icon:hover .user-image { + opacity: 100% !important; + } + + .release__line { + @svg: escape( + '' + ); + + background-image: url("data:image/svg+xml;utf8,@{svg}") !important; + } + + .release__node[src*="white"] { + background-color: @base !important; + } + + .release__card { + background-color: @crust !important; + border-color: @surface0 !important; + color: @text !important; + } + + .release__version-date { + color: @subtext0 !important; + } + + .release--current { + background-color: @mantle !important; + border-color: @surface0 !important; + } + + .release { + border-left-color: @mantle !important; + } + + .checkbox-tree li { + &::before, + &::after { + border-color: @surface2; + } + } + + .filter-badge { + background-color: @accent; + + &, + .filter-badge__remove-button, + .filter-badge__icon { + color: @crust; + } + .filter-badge__remove-button { + border-left-color: if( + @flavor = latte, + lighten(@accent, 10%), + darken(@accent, 5%) + ); + + &:hover { + background-color: darken(@accent, 10%); + } + } + } + + @media (min-width: 801px) { + .package-snippet, + .package-snippet:hover { + @svg: escape( + '' + ); + + background-image: url("data:image/svg+xml;utf8,@{svg}") !important; + } + } + + .site-header__logo img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .about-pypi__logo img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .-js-white-cube, + .release__node[src*="white"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .release__node[src*="blue"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + background-color: @mantle !important; + } + } +} diff --git a/styles/pythonanywhere/README.md b/styles/pythonanywhere/README.md new file mode 100644 index 0000000000..f8cf6c4b42 --- /dev/null +++ b/styles/pythonanywhere/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for PythonAnywhere + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [trinkey](https://github.com/trinkey) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/pythonanywhere/catppuccin.user.less b/styles/pythonanywhere/catppuccin.user.less new file mode 100644 index 0000000000..73f6ec2d79 --- /dev/null +++ b/styles/pythonanywhere/catppuccin.user.less @@ -0,0 +1,1417 @@ +/* ==UserStyle== +@name PythonAnywhere Catppuccin +@namespace github.com/catppuccin/userstyles/styles/pythonanywhere +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pythonanywhere +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pythonanywhere/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apythonanywhere +@description Soothing pastel theme for PythonAnywhere +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("www.pythonanywhere.com"), + domain("eu.pythonanywhere.com"), + domain("blog.pythonanywhere.com") { + @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); + + @import (css) + url("https://chroma.catppuccin.com/@{lightFlavor}-chroma-style.css") + (prefers-color-scheme: light); + @import (css) + url("https://chroma.catppuccin.com/@{darkFlavor}-chroma-style.css") + (prefers-color-scheme: dark); + + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.css-variables(); + + color-scheme: if(@flavor = latte, light, dark); + + ::selection { + background-color: fade(@accent, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0; // TODO: For some reason this (explicitly?) doesn't set !important like our template defaults do/did. + } + } + + /* Ace file editor */ + .ace_editor { + background-color: @crust; + color: @text; + + .ace_gutter, + .ace_gutter-cell { + background: @mantle; + color: @overlay1; + } + .ace_print-margin { + background: @mantle; + } + + .ace_marker-layer { + .ace_active-line { + background-color: fade(@yellow, 20%); + } + .highlight-line-error { + background-color: fade(@red, 20%); + } + .ace_bracket { + border-color: @overlay1; + } + } + + .ace_doctype { + color: @mauve; + } + .ace_cursor, + .ace_xml.ace_text { + color: @text; + } + + .ace_heading { + &.ace_1, + &.ace_1 + .ace_heading { + color: @red; + } + &.ace_2, + &.ace_2 + .ace_heading { + color: @peach; + } + &.ace_3, + &.ace_3 + .ace_heading { + color: @yellow; + } + &.ace_4, + &.ace_4 + .ace_heading { + color: @green; + } + &.ace_5, + &.ace_5 + .ace_heading { + color: @blue; + } + &.ace_6, + &.ace_6 + .ace_heading { + color: @mauve; + } + } + + .ace_list { + color: @text; + &.ace_markup { + color: @sky; + } + } + + .ace_marker-layer .ace_selection { + background: fade(@accent, 30%); + } + .ace_fold { + background-color: @surface0; + border-color: @surface1; + } + .ace_constant.ace_language, + .ace_keyword, + .ace_meta { + color: @mauve; + } + .ace_xml, + .ace_support.ace_class, + .ace_support.ace_type { + color: @yellow; + } + .ace_line .ace_identifier:not(:first-of-type), + .ace_entity.ace_name.ace_function, + .ace_constant { + color: @blue; + } + .ace_paren, + .ace_variable.ace_language { + color: @red; + } + .ace_constant.ace_numeric { + color: @peach; + } + .ace_entity.ace_other.ace_attribute-name, + .ace_support.ace_constant, + .ace_support.ace_function { + color: @teal; + } + .ace_entity.ace_name.ace_tag, + .ace_variable { + color: @blue; + } + .ace_storage { + color: @peach; + } + .ace_string { + color: @green; + } + .ace_comment { + color: @overlay2; + } + .ace_indent-guide { + @svg: escape( + '' + ); + + background-image: url("data:image/svg+xml;utf8,@{svg}"); + } + } + + .ace_tooltip { + background-color: @crust; + color: @text; + border-color: @surface0; + } + + #ace_settingsmenu { + background-color: @mantle; + box-shadow: none; + color: @subtext0; + } + + #kbshortcutmenu { + background-color: @mantle; + box-shadow: none; + + .ace_optionsMenuEntry { + &:hover, + &:focus { + background-color: @base; + } + } + + &, + .ace_optionsMenuCommand { + color: @subtext0; + } + + .ace_optionsMenuKey { + color: @accent; + } + } + + /* Console */ + + x-screen { + background-color: @base !important; + color: @text !important; + } + + .cursor-node { + border-color: @accent !important; + &[focus="true"] { + background-color: @accent !important; + } + } + + /* $ prompt character */ + [style*="color: rgb(0, 186, 19);"] { + color: @green !important; + } + + /* ANSI colors */ + x-row span { + /* Black & Bright Black */ + &[style^="color: rgb(0, 0, 0);"] { + color: if(@flavor = latte, @subtext1, @surface1) !important; + } + &[style*="background-color: rgb(0, 0, 0);"] { + background-color: if(@flavor = latte, @subtext1, @surface1) !important; + } + + &[style^="color: rgb(85, 87, 83);"] { + color: if(@flavor = latte, @subtext1, @surface2) !important; + } + &[style*="background-color: rgb(85, 87, 83);"] { + background-color: if(@flavor = latte, @subtext1, @surface2) !important; + } + + /* Red and Bright Red */ + &[style^="color: rgb(204, 0, 0);"], + &[style^="color: rgb(239, 41, 41);"] { + color: @red !important; + } + &[style*="background-color: rgb(204, 0, 0);"], + &[style*="background-color: rgb(239, 41, 41);"] { + background-color: @red !important; + } + /* Dim Red */ + &[style^="color: rgb(136, 0, 0);"] { + color: fade(@red, 80%) !important; + } + + /* Green and Bright Green */ + &[style^="color: rgb(78, 154, 6);"], + &[style^="color: rgb(0, 186, 19);"] { + color: @green !important; + } + &[style*="background-color: rgb(78, 154, 6);"], + &[style*="background-color: rgb(0, 186, 19);"] { + background-color: @green !important; + } + /* Dim Green */ + &[style^="color: rgb(52, 103, 4);"] { + color: fade(@green, 80%) !important; + } + + /* Yellow and Bright Yellow */ + &[style^="color: rgb(196, 160, 0);"], + &[style^="color: rgb(252, 233, 79);"] { + color: @yellow !important; + } + &[style*="background-color: rgb(196, 160, 0);"], + &[style*="background-color: rgb(252, 233, 79);"] { + background-color: @yellow !important; + } + /* Dim Yellow */ + &[style^="color: rgb(131, 107, 0);"] { + color: fade(@yellow, 80%) !important; + } + + /* Blue and Bright Blue */ + &[style^="color: rgb(52, 101, 164);"], + &[style^="color: rgb(114, 159, 207);"] { + color: @blue !important; + } + &[style*="background-color: rgb(52, 101, 164);"], + &[style*="background-color: rgb(114, 159, 207);"] { + background-color: @blue !important; + } + /* Dim Blue */ + &[style^="color: rgb(35, 67, 109);"] { + color: fade(@blue, 80%) !important; + } + + /* Pink and Bright Pink */ + &[style^="color: rgb(117, 80, 123);"], + &[style^="color: rgb(242, 0, 203);"] { + color: @pink !important; + } + &[style*="background-color: rgb(117, 80, 123);"], + &[style*="background-color: rgb(242, 0, 203);"] { + background-color: @pink !important; + } + /* Dim Pink */ + &[style^="color: rgb(78, 53, 82);"] { + color: fade(@pink, 80%) !important; + } + + /* Teal and Bright Teal */ + &[style^="color: rgb(6, 152, 154);"], + &[style^="color: rgb(0, 181, 189);"] { + color: @teal !important; + } + &[style*="background-color: rgb(6, 152, 154);"], + &[style*="background-color: rgb(0, 181, 189);"] { + background-color: @teal !important; + } + /* Dim Teal */ + &[style^="color: rgb(4, 101, 103);"] { + color: fade(@teal, 80%) !important; + } + + /* White */ + &[style^="color: rgb(211, 215, 207);"] { + color: if(@flavor = latte, @surface2, @subtext1) !important; + } + &[style*="background-color: rgb(211, 215, 207);"] { + background-color: if(@flavor = latte, @surface2, @subtext1) !important; + } + /* Bright White */ + &[style^="color: rgb(238, 238, 236);"] { + color: if(@flavor = latte, @surface1, @subtext0) !important; + } + &[style*="background-color: rgb(238, 238, 236);"] { + background-color: if(@flavor = latte, @surface1, @subtext0) !important; + } + /* Dim White */ + &[style^="color: rgb(141, 143, 138);"] { + color: fade(if(@flavor = latte, @surface2, @subtext1), 80%) !important; + } + } + + #terminal div { + &[style*="color: rgb(16, 16, 16);"] { + color: @text !important; + } + + &[style*="background-color: rgb(240, 240, 240);"] { + background-color: @crust !important; + } + } + + body, + .dark { + background-color: @base; + color: @text; + } + + a { + &, + &:hover, + &:focus { + color: @accent; + } + } + + hr, + pre { + border-color: @surface0; + } + + small, + .small { + color: @subtext0; + } + + input, + button:not(.close, [class*="btn"], [data-toggle="dropdown"]) { + background-color: @crust; + border-color: @surface0; + + &:hover, + &:focus { + background-color: @mantle; + } + + i.glyphicon { + pointer-events: none; + } + } + + blockquote { + border-color: @surface0; + + footer, + small, + .small { + color: @subtext0; + } + } + + .footer p { + color: @text; + } + + .gsc-modal-background-image { + background-color: @base; + } + + .gsc-results-wrapper-overlay { + background-color: @mantle; + color: @subtext0; + } + + input.gsc-input, + .gsc-input-box, + .gsc-input-box-hover, + .gsc-input-box-focus { + border-color: @surface0; + } + + .gsc-completion-container { + background-color: @crust; + border-color: @surface0; + } + + .gsc-completion-selected { + background-color: @mantle; + } + + input.gsc-input { + background-color: @mantle; + } + + .gsc-input-box, + .gsc-results { + background-color: @mantle; + } + + .gsc-option-menu-item-highlighted { + background-color: @base; + color: @text; + } + + .gsc-selected-option-container { + background-color: @crust; + color: @text; + border-color: @surface0; + } + + .gsc-webResult.gsc-result { + border-color: @surface0; + background-color: @mantle; + } + + .gsc-search-button-v2 { + &, + &:hover, + &:focus { + border-color: @surface0; + background-color: @crust; + color: @text; + } + svg { + fill: @text; + } + } + + .gsc-result-info, + .gsc-orderby-label, + .gsc-option-menu-item { + color: @subtext0; + } + + .gcsc-find-more-on-google { + color: @accent; + } + + .gcsc-find-more-on-google-magnifier { + fill: @accent; + } + + .gsc-results .gsc-cursor-box .gsc-cursor-page { + color: @text; + background-color: unset; + } + + .gsc-control-cse .gsc-option-menu { + background-color: @crust; + } + + .gs-webResult div.gs-visibleUrl { + color: @subtext0; + } + + .gs-webResult.gs-result a.gs-title { + &, + &:hover, + &:focus, + b { + color: @accent; + } + } + + .gs-webResult .gs-snippet { + color: @text; + } + + .badge { + background-color: @crust; + + &:hover, + &:focus { + background-color: @mantle; + } + } + + .dashboard-panel__headline a { + text-decoration-color: @accent; + } + + .dashboard-columns { + border-top-color: @surface0; + + &::before { + background-color: @surface0; + } + + .row > div { + border-color: @surface0; + } + } + + .pagination > li { + > span, + > a { + background-color: @crust; + border-color: @surface0; + color: @text; + + &:hover, + &:focus { + background-color: @mantle; + } + } + } + + textarea { + background-color: @crust; + outline-color: @surface0; + border-color: none; + outline-style: solid; + + &:focus { + outline-color: @accent; + } + } + + .jumbotron { + background-color: @mantle; + } + + .jumbotron > hr { + border-top-color: @mantle; + } + + .top-nav { + background: @crust; + + li a, + li button.btn-link { + color: @text; + } + + button:focus, + a:focus, + li a:focus { + background-color: @crust; + } + } + + .err { + border-color: @red; + } + + .btn-success, + .open > .dropdown-toggle.btn-success { + &, + &:focus, + &.focus, + &:active, + &.active, + &:hover { + color: @mantle; + background-color: @green; + border-color: @surface0; + } + } + + .btn-success .badge { + color: @green; + background-color: @crust; + } + + tr.hoverable:hover { + background-color: @mantle; + } + + td { + &.file_size, + &.file_timestamp { + color: @subtext0; + } + } + + span[style="color: blue;"] { + color: @text !important; + } + + [style="color: #888"], + [style="color: #444"] { + color: @text !important; + } + + .btn-info, + .btn-primary, + .open > .dropdown-toggle.btn-info, + .open > .dropdown-toggle.btn-primary { + &, + &:focus, + &.focus, + &:active, + &.active, + &:hover { + color: @base; + background-color: @accent; + border-color: @surface0; + } + } + + .label-primary { + background-color: @accent; + color: @crust; + } + + .label-info { + background-color: @accent; + color: @crust; + } + + .label-danger { + background-color: @red; + color: @crust; + } + + .btn-danger { + background-color: @red; + border-color: @red; + color: @crust; + + &:hover, + &:focus { + background-color: darken(@red, 5%); + color: @mantle; + } + } + + .btn-warning { + background-color: @yellow; + border-color: @yellow; + color: @mantle; + + &:hover, + &:focus { + background-color: darken(@yellow, 5%); + color: @mantle; + } + } + + .edit_value { + color: @accent; + } + + .btn-info .badge, + .btn-primary .badge { + color: @accent; + background-color: @crust; + } + + .alert-success, + .alert-info, + .alert-warning, + .alert-danger { + border-color: @surface0; + + &, + small { + color: @base; + } + + button { + background-color: unset; + } + + hr { + border-top-color: @surface0; + } + + a { + color: @base; + text-decoration: underline; + } + + .close { + &, + &:hover, + &:focus { + color: @crust; + } + } + } + + .alert-success { + background-color: @green; + } + + .alert-info { + background-color: @accent; + } + + .alert-warning { + background-color: @yellow; + } + + .alert-danger { + background-color: @red; + } + + .close { + opacity: 100%; + text-shadow: none; + + &, + &:hover, + &:focus { + color: @text; + background: none; + } + } + + .form-control { + color: @text; + background-color: @crust; + border-color: @surface0; + box-shadow: inset 0 1px 1px @surface0; + + &:focus { + border-color: @surface0; + box-shadow: inset 0 1px 1px @surface0; + } + + &[disabled], + &[readonly] { + background-color: @mantle; + } + } + + .help-block { + color: @text; + } + + .pricing_table ul { + background-color: @base; + } + + .pricing_table ul li { + background: @mantle; + } + + .pricing_table ul li:first-child, + .account_type_header { + color: @text; + } + + .sub_and_dark_blue, + .scheduled_task:not(.enabled) { + color: @subtext0; + } + + #id_initializing_mysql_spinner { + background-color: @crust !important; + color: @text; + } + + .directory_listing_table i.pale { + color: @subtext0; + opacity: 100%; + } + + .pricing_table ul.Free li { + background-color: @mantle; + } + + .col-md-12 { + div[style*="background-color"] { + background-color: @mantle !important; + } + + h1[style*="color"] { + color: @text !important; + } + } + + .table { + background-color: @base; + + th, + td { + border-top-color: @surface0; + } + + > thead th { + border-bottom-color: @surface0; + } + + .success, + .info, + .warning, + .danger { + background-color: @base; + + &, + td, + th { + &, + &:hover { + background-color: @base; + } + } + } + + td.active, + th.active, + &.active td, + &.active th { + background-color: @mantle; + } + } + + .table-bordered { + border-color: @surface0; + + th, + td { + border-color: @surface0; + } + } + + .table-striped > tbody > tr:nth-of-type(odd), + .table-hover > tbody > tr:hover { + background-color: @mantle; + } + + .highlighted_feature_text { + color: @green; + } + + .text-muted { + color: @subtext0; + } + + .modal-header { + border-bottom-color: @surface0; + } + + .modal-content { + background-color: @base; + border-color: @surface0; + box-shadow: 0 3px 9px @crust; + } + + .modal-backdrop { + background-color: @crust; + } + + .directories_listing_group h4, + .page-header, + .gsc-above-wrapper-area, + .nav-tabs, + .property_group_header { + border-bottom-color: @surface0; + } + + .nav-tabs a { + &:hover, + &:focus { + border-color: @surface0 !important; + } + } + + .popover { + background-color: @mantle; + border-color: @surface0; + box-shadow: none; + + &.top > .arrow { + &, + &::after { + border-top-color: @mantle; + } + } + + &.right > .arrow { + &, + &::after { + border-right-color: @mantle; + } + } + + &.left > .arrow { + &, + &::after { + border-left-color: @mantle; + } + } + + &.bottom > .arrow { + &, + &::after { + border-bottom-color: @mantle; + } + } + } + + .popover-title { + background-color: @mantle; + border-bottom-color: @surface0; + } + + .modal-footer { + border-top-color: @surface0; + } + + .unsorted { + color: @subtext0; + } + + .sorted-up, + .sorted-down { + color: @accent; + } + + .ui-widget-content { + border-color: @surface0; + background: @mantle; + color: @text; + } + + .ui-state-default { + border-color: @surface0; + background: @surface1; + color: @text; + } + + .bootstrap-switch { + border-color: @surface0; + + &.bootstrap-switch-focused { + border-color: @surface0; + box-shadow: none; + } + + .bootstrap-switch-label { + color: @text; + background-color: @surface0; + } + + .bootstrap-switch-handle-off, + .bootstrap-switch-handle-on { + color: @text; + background-color: @crust; + + &.bootstrap-switch-success, + &.bootstrap-switch-warning, + &.bootstrap-switch-danger, + &.bootstrap-switch-primary { + color: @base; + } + + &.bootstrap-switch-success { + background-color: @green; + } + + &.bootstrap-switch-warning { + background-color: @yellow; + } + + &.bootstrap-switch-danger { + background-color: @red; + } + + &.bootstrap-switch-primary { + background-color: @accent; + } + } + } + + .tooltip-inner { + color: @text; + background-color: @crust; + } + + .tooltip { + &.right .tooltip-arrow { + border-right-color: @crust; + } + + &.left .tooltip-arrow { + border-left-color: @crust; + } + + &.top, + &.top-left, + &.top-right { + .tooltip-arrow { + border-top-color: @crust; + } + } + + &.bottom, + &.bottom-left, + &.bottom-right { + .tooltip-arrow { + border-bottom-color: @crust; + } + } + } + + .has-error { + .help-block, + .control-label, + .radio, + .checkbox, + .radio-inline, + .checkbox-inline, + label { + color: @red; + } + } + + .success-stories-container { + background-color: @mantle; + color: @text; + + h3 { + color: @text; + } + } + + .gsc-control-cse { + border-color: @surface0; + background-color: @base; + } + + .post_metadata { + color: @subtext0; + } + + .ui-widget-header { + background-color: @base; + border-color: @surface0; + color: @text; + } + + .fullscreen-main-navbar { + background-color: @mantle; + } + + .dropdown-menu { + background-color: @mantle; + border-color: @surface0; + box-shadow: none; + + > li > a { + color: @text; + + &:hover, + &:focus { + background-color: @base; + } + } + } + + .fullscreen-main-navbar button.btn-link { + &:hover, + &:focus { + background-color: @base; + } + } + + .navbar-default .btn-link { + &, + &:hover, + &:focus { + color: @text; + } + } + + .btn.btn-default { + border-color: @accent; + color: @accent; + background-color: @base; + + &:hover, + &:focus { + background-color: @surface0; + } + } + + .well { + background-color: @mantle; + border-color: @surface0; + } + + .icon-bar { + background-color: @text; + } + + .nav-tabs > li, + .nav-pills > li { + > a { + border-color: @surface0; + + &, + &:hover, + &:focus { + color: @accent; + } + } + + &.active > a { + &, + &:focus { + background-color: @mantle; + } + + &:hover, + &:focus { + background-color: @crust; + } + } + + &:not(.active) > a { + &:hover, + &:focus { + background-color: @mantle; + } + } + } + + .ui-state-highlight { + border-color: @accent; + background: @accent; + color: @base; + } + + .primary-navbar { + a, + form, + .active { + background-color: @base; + } + + form .btn-link { + color: @accent; + } + + .active a { + color: @text; + } + } + + .post, + .topic { + background-color: @mantle; + border-color: @surface0; + } + + .editable-click { + &, + &:hover, + &:focus { + border-bottom-color: @subtext0; + } + } + + [style*="background: whitesmoke;"] { + background-color: @mantle !important; + } + + @media (min-width: 768px) { + .modal-content { + box-shadow: 0 5px 15px @crust; + } + } + + @media screen and (max-width: 767px) { + .table-responsive { + border-color: @surface0; + } + } + + #id_main_screenshot { + box-shadow: 12px 12px 29px @surface1; + } + + #id_hosting_details, + #id_education_details { + &, + h1, + h2, + h3 { + background-color: @mantle; + color: @text; + } + + .btn { + color: @crust !important; + } + + a { + color: @accent; + } + } + + #id_develop_anywhere_details { + background-color: @base; + } + + #id_support_details { + background-color: @base; + + a { + color: @accent !important; + } + } + + #id_company_info_strip { + color: @text; + } + + .console_table .info_tooltip { + color: @accent; + } + + #id_console_name { + color: @text; + } + + .beginner_pane, + .pricing_pane { + background-color: @mantle; + } + + #id_error_message, + #id_login_error { + color: @red; + } + + .post_preview { + background-color: @base; + + h3 { + color: @text; + } + } + + .teacher-navbar { + background-color: @mantle; + color: @text; + } + + .nav > li > a:focus { + background: none; + } + + /* blog */ + + .site-header { + background-color: @crust; + } + + h1, + h2, + h3, + h4, + code { + color: @text !important; + } + + button code { + background: none !important; + color: inherit !important; + } + + p, + .tipue_search_content_text, + .tipue_search_content_bold, + #tipue_search_error, + #tipue_search_results_count, + .post-meta { + color: @subtext0; + } + + .navbar-default .navbar-toggle { + &:hover, + &:focus { + background-color: @mantle; + } + } + + button:not(.btn-link, .btn, [data-toggle="dropdown"]), + .pagination a, + #tipue_search_foot_boxes li.current, + #tipue_search_foot_boxes li a { + background-color: @accent; + color: @crust; + border-color: @accent; + } + + button:disabled, + .pagination .disabled { + background-color: darken(@accent, 5%); + border-color: darken(@accent, 5%); + } + + #tipue_search_input, + form.navbar-search { + background-color: @mantle; + color: @text; + } + + svg { + fill: @subtext0; + } + + .fa-at, + .fa-twitter, + .fa-rss { + filter: @text-filter; + } + + .hide_search_icon path { + stroke: @subtext0; + } + + footer, + footer .wrap { + background-color: @crust; + color: @text; + border-color: @crust; + } + + .pagination a, + #tipue_search_foot_boxes li.current, + #tipue_search_foot_boxes li a { + background-color: @accent; + color: @crust; + border-color: @accent; + } + + img[src*="ssl.gstatic.com/ui/v1/disclosure/small-grey-disclosure-arrow-down.png"], + img[src*="/static/anywhere/images/staff.png"], + img[src*="/static/glyphicons/glyphicons_"], + img[src="/static/anywhere/images/PA-logo-snake-only.svg"], + .testimonial-content, + .quickstart_logo:not([src$="/django-logo-negative-small.png"]), + .ui-icon { + filter: @text-filter; + } + + img[src*="/static/anywhere/images/cross.png"] { + filter: @red-filter; + } + + img[src*="/static/anywhere/images/tick.png"] { + filter: @green-filter; + } + + .quickstart_logo[src$="/django-logo-negative-small.png"] { + // Original image has background - can't filter + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img[src$="/images/PA-logo.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml;utf8,@{svg}"); + } + } +} diff --git a/styles/quizlet/README.md b/styles/quizlet/README.md index 99a017875d..ab7e71de12 100644 --- a/styles/quizlet/README.md +++ b/styles/quizlet/README.md @@ -10,39 +10,18 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
+## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). - - -## 💝 Current Maintainer(s) +## 💝 Current Maintainer - [spaghettiosareyummy](https://github.com/spaghettiosareyummy) +  

diff --git a/styles/quizlet/assets/catwalk.webp b/styles/quizlet/assets/catwalk.webp deleted file mode 100644 index bd4a653392..0000000000 --- a/styles/quizlet/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:216b310aade3eaf15813f7e21954f0001ed4e48d1342e82a3c28c5f65606f0d3 -size 264918 diff --git a/styles/quizlet/assets/frappe.webp b/styles/quizlet/assets/frappe.webp deleted file mode 100644 index da627f300e..0000000000 --- a/styles/quizlet/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0b3d926fc5da55313a41d64ae46c7e32aa0097b373e95936b3157f5ff04adb4f -size 61648 diff --git a/styles/quizlet/assets/latte.webp b/styles/quizlet/assets/latte.webp deleted file mode 100644 index 8872fc3e2c..0000000000 --- a/styles/quizlet/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9c3b2e8038f869a7ff1f493ba04201139ccb7ea3db8e55e56253c9577189908d -size 59828 diff --git a/styles/quizlet/assets/macchiato.webp b/styles/quizlet/assets/macchiato.webp deleted file mode 100644 index 6622950c32..0000000000 --- a/styles/quizlet/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4d029cd63c5e37a6df3ff65166d54c8aa6fb50eb027d33555257f902dad655c3 -size 62962 diff --git a/styles/quizlet/assets/mocha.webp b/styles/quizlet/assets/mocha.webp deleted file mode 100644 index f209d35025..0000000000 --- a/styles/quizlet/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e6f08a4084c5b0bd0a2a7b8f5b79df53906a9507ce1ebdce8c01f75414f67432 -size 63012 diff --git a/styles/quizlet/catppuccin.user.css b/styles/quizlet/catppuccin.user.less similarity index 83% rename from styles/quizlet/catppuccin.user.css rename to styles/quizlet/catppuccin.user.less index 01613b48a9..f2980e8ae4 100644 --- a/styles/quizlet/catppuccin.user.css +++ b/styles/quizlet/catppuccin.user.less @@ -2,190 +2,59 @@ @name Quizlet Catppuccin @namespace github.com/catppuccin/userstyles/styles/quizlet @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/quizlet -@version 0.0.1 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/quizlet/catppuccin.user.css +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/quizlet/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aquizlet @description Soothing pastel theme for Quizlet @author Catppuccin @license MIT @preprocessor less -@var select flavor "Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire*", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + @-moz-document domain("quizlet.com") { - #catppuccin(@flavor, @accentColor); - - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-color: @catppuccin[@@lookup][@@accent]; + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); :root body { color: @text; background: @base; } - ::selection { - background: @blue; - } - .DashboardLayout { background-color: @base !important; } .TopNavigation { background-color: @crust; - border-bottom: none; + // border-bottom: none; } .s19dmjr1 { - border: none; + border-color: none; + background: @surface0; } .NavigationTab--span { color: @text !important; } - .s13oqxd2.NavigationTab:not(.no-highlight:after) { + .s13oqxd2.NavigationTab:not(.no-highlight::after) { background: @overlay2; } @@ -233,12 +102,15 @@ .UIButton--borderless:visited, html.touch .UIButton--borderless:focus:hover:not(:active) { background: none; + background-color: initial; + color: inherit; } .UIButton, .UIButton:visited, html.touch .UIButton:focus:hover:not(:active) { color: inherit; + background-color: @blue; } .UIButton--alert, @@ -247,13 +119,6 @@ background-color: @red; } - .UIButton--borderless, - .UIButton--borderless:visited, - html.touch .UIButton--borderless:focus:hover:not(:active) { - background-color: initial; - color: inherit; - } - .h1ebmrjk { background: linear-gradient(180deg, #0000 69.83%, @base 100%); } @@ -271,8 +136,9 @@ } .neeykg0 { - filter: brightness(0) saturate(100%) invert(14%) sepia(10%) - saturate(1367%) hue-rotate(192deg) brightness(95%) contrast(95%); + filter: brightness(0) saturate(100%) invert(14%) sepia(10%) saturate( + 1367% + ) hue-rotate(192deg) brightness(95%) contrast(95%); } .CourseOverviewPreviewCard-recommendationLink:hover { @@ -288,20 +154,16 @@ } .CourseOverviewPreviewCard-divider { - border: 0.0625rem solid @mantle; - } - - .AssemblySecondaryButton { - background-color: @crust; + border-color: @mantle; } .AssemblyPrimaryButton--default { background-color: @crust; - border: 0.0625rem solid @text; + border-color: @text; } .c1vierhv { - border: 0.125rem dashed @overlay2; + border-color: @overlay2; } .djzjpyv { @@ -353,7 +215,7 @@ } .UIBaseCardHeader-thumbnail { - border: @mantle; + border-color: @mantle; } .a1s81tf6 { @@ -393,6 +255,7 @@ } .AssemblySecondaryButton { + background-color: @crust; color: @text; } @@ -430,13 +293,13 @@ } .SiteActivity-button { - border: 0.0625rem solid @overlay2; + border-color: @overlay2; color: @text; } .SiteActivity-button:focus, .SiteActivity-button:hover { - border: 0.0625rem solid @overlay0; + border-color: @overlay0; color: @subtext1; } @@ -451,7 +314,7 @@ .UILinkBox-link .UILink:active, .UILinkBox-link .UILink:focus, .UILinkBox-link .UILink:hover { - border-bottom: 0.3125rem solid @overlay2; + border-bottom-color: @overlay2; } .AssemblySmallCard-hover:hover::after { @@ -464,7 +327,7 @@ #react-autowhatever-site-header-global-search-autosuggest { background-color: @crust; - border: @mantle; + border-color: @mantle; } .tqxyjjt { @@ -481,6 +344,7 @@ .poy4xqf { background: @crust; + border-color: @crust; } .wej97zk { @@ -491,10 +355,6 @@ background-color: @crust; } - .poy4xqf { - border: 0.0625rem solid @crust; - } - .c721v4v { color: @text; } @@ -517,7 +377,7 @@ .s1ovpdog { background-color: @mantle; - border-top: 0.0625rem solid @overlay0; + border-top-color: @overlay0; } .c1ap9d88 .AssemblyMenuItem--title { @@ -550,7 +410,7 @@ } .UIPopover, - .UIPopover:after { + .UIPopover::after { background-color: @mantle; } @@ -563,7 +423,7 @@ } .cxvmyeq { - border: 0.0624rem solid @crust; + border-color: @crust; } .wxhi4p:hover { @@ -587,18 +447,18 @@ } .f1ub3img { - border-top: 0.0625rem solid @overlay2; + border-top-color: @overlay2; } - .AssemblyTabsWrapper:before { + .AssemblyTabsWrapper::before { background-color: @overlay2; } - .s4cgp9b.AssemblyTab:after { + .s4cgp9b.AssemblyTab::after { background: @blue; } - .AssemblyTab:hover:after { + .AssemblyTab:hover::after { background: @blue; } @@ -606,12 +466,8 @@ background: @mantle; } - .wxhi4p:hover { - background: @mantle; - } - .i1v4i7rf.textbookIcon { - background-image: url(https://assets.quizlet.com/a/j/dist/app/i/explanations/textbook_night.1ff39f68b703b28.svg); + background-image: url("https://assets.quizlet.com/a/j/dist/app/i/explanations/textbook_night.1ff39f68b703b28.svg"); } .sinah8x { @@ -678,11 +534,6 @@ background: @mantle; } - .UISwitch-label { - background-color: @mantle; - color: @subtext0; - } - .SetPageTerm { background: @mantle; } @@ -727,7 +578,7 @@ .o1rfl3bx { color: @text; - border: 0.125rem solid @overlay2; + border-color: @overlay2; } .c1lf7cxm { @@ -780,11 +631,13 @@ } .UISwitch-label { - border: 0.125rem solid @overlay1; + border-color: @overlay1; + background-color: @mantle; + color: @subtext0; } .SetPageTerm-sideContent { - border-right: 0.125rem solid @overlay2; + border-right-color: @overlay2; } .UISwitch-input:checked:not(:disabled ~ .UISwitch-label) { @@ -803,13 +656,11 @@ color: @blue; } - .AssemblyIconButton--highlight:hover:not([disabled]), - [aria-disabled="true"] { + .AssemblyIconButton--highlight:hover:not([disabled]) { background-color: @crust; } - .AssemblyIconButton--tertiary:hover:not([disabled]), - [aria-disabled="true"] { + .AssemblyIconButton--tertiary:hover:not([disabled]) { background-color: @crust; } @@ -819,7 +670,7 @@ .z1x1k8pd.svwhkoh { color: @green; - border: 0.0625rem solid @green; + border-color: @green; } .svwhkoh { @@ -859,7 +710,7 @@ } .AssemblyToggleSwitch-input:checked - + .AssemblyToggleSwitch-fauxInput:after { + + .AssemblyToggleSwitch-fauxInput::after { background-color: @pink; } @@ -867,7 +718,7 @@ background: @overlay1; } - .AssemblyToggleSwitch-fauxInput:after { + .AssemblyToggleSwitch-fauxInput::after { background: @lavender; } @@ -917,7 +768,7 @@ } .a1k2umqi:focus-within { - border-bottom: 0.125rem solid @blue; + border-bottom-color: @blue; } .cgyrcnx { @@ -933,11 +784,11 @@ } .sjsxdsz { - border-bottom: 0.0625rem solid @overlay2; + border-bottom-color: @overlay2; } .fz4nps6 { - border-top: 0.0625rem solid @overlay2; + border-top-color: @overlay2; } .AssemblyPrimaryButton--default:disabled, @@ -962,7 +813,7 @@ .w1uwrq7e { color: @text; - border: 0.125rem solid @overlay2; + border-color: @overlay2; } .t1d08860 { @@ -1014,12 +865,12 @@ } .pr2w5fu:first-child { - border-right: 0.125rem solid @overlay2; + border-right-color: @overlay2; } .t117larf { background-color: @crust; - border: 0.0625rem solid @overlay2; + border-color: @overlay2; color: @text; } @@ -1067,18 +918,8 @@ border-color: @yellow; } - .s19dmjr1 { - background: @surface0; - } - - .UIButton, - .UIButton:visited, - html.touch .UIButton:focus:hover:not(:active) { - background-color: @blue; - } - - .UICheckbox-fauxInput:after { - border: 0.125rem solid @yellow; + .UICheckbox-fauxInput::after { + border-color: @yellow; border-width: 0 0 0.125rem 0.125rem; } @@ -1102,7 +943,7 @@ } .UIHorizontalRule { - border-bottom: 0.0625rem solid @overlay2; + border-bottom-color: @overlay2; } .OptionsModal-description, @@ -1126,6 +967,7 @@ .s2y71yx input { background: inherit; + color: @text; } .TextbookRecommendations { @@ -1146,12 +988,9 @@ /* .AssemblyIcon--small { color: @lavender; } */ - .a99ei82 { - background-color: @mantle; - } .ah3z5j1 { - border: 0.125rem solid @blue; + border-color: @blue; } .hkyil8p { @@ -1159,11 +998,11 @@ } .e17gih4t { - border: 0.125rem dashed @overlay2; + border-color: @overlay2; } .o1q1tz6w { - border: 0.0625rem solid @overlay2; + border-color: @overlay2; color: @text; } @@ -1177,7 +1016,8 @@ } .a99ei82 { - border: 0.125rem solid @overlay2; + background-color: @mantle; + border-color: @overlay2; } .qcpiy8g { @@ -1206,7 +1046,7 @@ .w1e3jc65 { background-color: @mantle; - border: 0.125rem solid @mantle; + border-color: @mantle; } .t7fr19y { @@ -1218,7 +1058,7 @@ } .w1e3jc65:hover { - border: 0.125rem solid @overlay2; + border-color: @overlay2; } .q1nxab59 { @@ -1259,7 +1099,7 @@ .UIDropdown { background: @mantle; - border: 0.125rem solid @crust; + border-color: @crust; } .UIDropdown .UIDropdown-icon { @@ -1283,12 +1123,12 @@ } .ModeControls-back { - border-bottom: 1px solid @overlay2; + border-bottom-color: @overlay2; } .UIButton--whiteBorder { background: @crust; - border: 0.125rem solid @base; + border-color: @base; color: @text; } @@ -1298,7 +1138,7 @@ .MatchModeQuestionScatterTile { background-color: @mantle; - border: 0.125rem solid @overlay0; + border-color: @overlay0; } .MatchModeQuestionScatterTile.is-draggedOver, @@ -1366,8 +1206,8 @@ color: @subtext0; } - .s1rtnf4c:before, - .s1rtnf4c:after { + .s1rtnf4c::before, + .s1rtnf4c::after { background: none; } @@ -1413,7 +1253,7 @@ .EdgyDataCoursePillbox .UIPill { background: @crust; - border: 1px solid @overlay2; + border-color: @overlay2; color: @text; } @@ -1422,12 +1262,12 @@ } .UIAutosuggest .react-autosuggest__suggestion { - border-bottom: 0.125rem solid @overlay2; + border-bottom-color: @overlay2; } .UIAutosuggest .react-autosuggest__suggestion.react-autosuggest__suggestion--highlighted { - border-bottom: 0.125rem solid @yellow; + border-bottom-color: @yellow; } .EdgyDataCourseSelector-suggestion .EdgyDataCourseSelector-suggestionName { @@ -1457,8 +1297,8 @@ border-color: @peach; } - .button.google:after { - border-right: 1px solid @peach; + .button.google::after { + border-right-color: @peach; } .b1opuclq { @@ -1477,8 +1317,8 @@ border-color: @lavender; } - .button.facebook:after { - border-right: 1px solid @lavender; + .button.facebook::after { + border-right-color: @lavender; } .UIInput-input:-webkit-autofill, @@ -1590,7 +1430,7 @@ } .du7o3ew > div:not(:last-child) { - border-right: 0.0625rem solid @overlay2; + border-right-color: @overlay2; } .i73vo82:hover { @@ -1599,7 +1439,7 @@ } .f2nmi2p { - border-top: 0.0625rem solid @overlay2; + border-top-color: @overlay2; } .a1scx0nz { @@ -1638,15 +1478,15 @@ color: @subtext0; } - .AssemblySmallCard-isActive:after { + .AssemblySmallCard-isActive::after { background-color: @lavender; } .i192320l { - border: 0.125rem solid @mantle; + border-color: @mantle; } - .b1j40uwt:before { + .b1j40uwt::before { background-color: @mantle; } @@ -1676,11 +1516,11 @@ } .AssemblyIconButton--primaryInverted { - border: 0.0625rem solid @overlay2; + border-color: @overlay2; } .StudiableItemToolbar { - border-bottom: 2px solid @overlay2; + border-bottom-color: @overlay2; } .b18prmdf { @@ -1688,11 +1528,11 @@ } .ImageUploadProminentContextToggle { - border: 0.125rem dashed @overlay0; + border-color: @overlay0; } .UILinkButton { - border-bottom: 0.3125rem solid @blue; + border-bottom-color: @blue; color: @text; } @@ -1726,7 +1566,7 @@ } .UITooltip, - .UITooltip:after { + .UITooltip::after { background: @crust; } @@ -1782,7 +1622,7 @@ border-color: @yellow; } - .UIRadio-fauxInput:after { + .UIRadio-fauxInput::after { background-color: @yellow; } @@ -1803,7 +1643,7 @@ } .TermRow.is-duplicate { - outline: 0.125rem solid @yellow; + outline-color: @yellow; } .AssemblyPrimaryButton--danger { @@ -1878,8 +1718,7 @@ background-color: @mantle; } - .AssemblyPrimaryButton--upgrade:hover:not([disabled]), - [aria-disabled="true"] { + .AssemblyPrimaryButton--upgrade:hover:not([disabled]) { background: @rosewater; } @@ -2105,10 +1944,6 @@ background: @mantle; } - .s2y71yx input { - color: @text; - } - .q1kwd3of { color: @overlay2; } @@ -2248,7 +2083,7 @@ color: @subtext1; } - .SetListMediumCard-isActive:before { + .SetListMediumCard-isActive::before { background-color: @lavender; } @@ -2262,9 +2097,7 @@ } .s80h93u:active:not([disabled]), - [aria-disabled="true"], - .s80h93u:hover:not([disabled]), - [aria-disabled="true"] { + .s80h93u:hover:not([disabled]) { background: @crust; } diff --git a/styles/raindrop/README.md b/styles/raindrop/README.md new file mode 100644 index 0000000000..7eba8354db --- /dev/null +++ b/styles/raindrop/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Raindrop + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [thismoon](https://github.com/thismoon) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/raindrop/catppuccin.user.less b/styles/raindrop/catppuccin.user.less new file mode 100644 index 0000000000..353e1cadb4 --- /dev/null +++ b/styles/raindrop/catppuccin.user.less @@ -0,0 +1,120 @@ +/* ==UserStyle== +@name Raindrop Catppuccin +@namespace github.com/catppuccin/userstyles/styles/raindrop +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/raindrop +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/raindrop/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Araindrop +@description Soothing pastel theme for Raindrop +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("app.raindrop.io") { + [data-theme="night"] { + #catppuccin(@darkFlavor) !important; + } + [data-theme="day"], + [data-theme="sunset"] { + #catppuccin(@lightFlavor); + } + + // theme selector previews + [class^="theme-"] { + &[data-index="0"], + &[data-index="2"] > [class^="main-"], + &[data-index="3"] { + #catppuccin(@lightFlavor) !important; + } + &[data-index="1"], + &[data-index="2"] > [class^="sidebar-"] { + #catppuccin(@darkFlavor) !important; + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + &, + [data-theme] { + --background-color: @base; + --disable-background-color: @crust; + --disable-text-color: @overlay1; + --accent-color: @accent; + --alternative-background-color: @mantle; + --sidebar-background-color: @mantle; + --hover-background-color: fade(@overlay0, 20%); + --active-background-color: @surface1; + --primary-text-color: @text; + --secondary-text-color: @subtext0; + --shadow-color: fade(@text, 10%); + --shadow-light-color: fade(@text, 10%); + --danger-color: @red; + --important-color: @red; + --success-color: @green; + --highlights-color: @mauve; + --reminder-color: @peach; + --note-color: @yellow; + --article-color: @peach; + --audio-color: @mauve; + --document-color: @subtext0; + --book-color: @rosewater; + --image-color: @green; + --video-color: @blue; + --broken-color: @maroon; + --duplicate-color: @sapphire; + --tag-color: @subtext0; + --filter-color: @subtext0; + + [data-variant="active"] { + background: fade(@accent, 10%) !important; + } + // bookmark edit page header + [class^="header-"][data-fancy="true"] { + background: linear-gradient( + to bottom, + var(--background-color) 30%, + fade(@base, 60%) 100% + ); + } + // bookmark edit page cover selector + [class^="cover-"] > [class^="more-"] { + background: fade(@accent, 85%); + } + // add bookmark button text color + [title="Add Bookmark"] { + color: @base; + } + // disabled add bookmark button + [class^="button-"][data-variant="primary"][disabled] { + filter: none; + opacity: 100%; + background: @overlay0; + color: @crust; + } + // dropping bookmark to collection color overlay + [class*="isDropping-"] { + background-color: fade(@accent, 10%); + } + // sidebar background color + .svSidebar { + background: var(--sidebar-background-color); + } + color: @text; + } + // google login button + [href^="https://api.raindrop.io/v1/auth/google"] > span { + color: @text; + } + + // todo: recolor "Colors circle" icons using custom images (like the chess.com theme) + } +} diff --git a/styles/react.dev/README.md b/styles/react.dev/README.md new file mode 100644 index 0000000000..20d679287f --- /dev/null +++ b/styles/react.dev/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for React.dev + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [RaiderHCPlay](https://github.com/RaiderHCPlay) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/react.dev/catppuccin.user.less b/styles/react.dev/catppuccin.user.less new file mode 100644 index 0000000000..96cf0aa79e --- /dev/null +++ b/styles/react.dev/catppuccin.user.less @@ -0,0 +1,425 @@ +/* ==UserStyle== +@name React.dev Catppuccin +@namespace github.com/catppuccin/userstyles/styles/react.dev +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/react.dev +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/react.dev/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Areact.dev +@description Soothing pastel theme for React.dev +@author Catppuccin +@license MIT +@preprocessor less + +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("react.dev") { + html.dark { + #catppuccin(@darkFlavor); + } + html { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + //svg styling + + svg { + color: @accent !important; + } + + //text styling + + .text-primary { + color: @text; + } + + .dark\:text-primary-dark { + color: @text; + } + + .dark\:text-white { + color: @text; + } + + .text-secondary { + color: @text; + } + + .text-gray-30 { + color: @subtext1; + } + + .text-red-50, + .text-red-30 { + color: @red !important; + } + + .text-gray-50 { + color: @subtext0; + } + + // color divs text + + #color-and-svg(@color) { + color: @color !important; + svg { + color: @color !important; + } + } + .text-red-50, .text-red-40 { + #color-and-svg(@red); + } + .text-purple-50, .text-purple-30, .text-purple-60 { + #color-and-svg(@mauve); + } + .text-blue-50, .text-blue-40, .text-blue-60 { + #color-and-svg(@blue); + } + .text-yellow-40, .text-yellow-50, .text-yellow-60 { + #color-and-svg(@yellow); + } + + .text-green-60, .text-green-40 { + color: @green !important; + } + + .text-tertiary, + .text-tertiary-dark { + color: @subtext0; + } + + .text-link, + .text-link-dark { + color: @accent; + } + + //hover styling + + .hover\:text-link:hover, .text-link:hover, .text-link-dark:hover { + color: @accent; + } + + .hover\:bg-gray-80:hover, + .hover\:bg-gray-5:hover { + background-color: @mantle; + } + + .hover\:bg-card:hover { + background-color: @crust; + } + + //code stylizing + + a > code { + color: @accent !important; + } + + .console-block code { + background-color: @surface1 !important; + color: @red !important; + } + + .sp-wrapper { + --sp-colors-accent: @accent; + --sp-colors-clickable: @flamingo; + --sp-colors-disabled: @text; + --sp-colors-error: @red; + --sp-colors-error-surface: @maroon; + --sp-colors-surface1: @surface0; + --sp-colors-surface2: @surface1; + --sp-syntax-color-plain: @text; + --sp-syntax-color-comment: @overlay2; + --sp-syntax-color-keyword: @mauve; + --sp-syntax-color-tag: @blue; + --sp-syntax-color-punctuation: @overlay2; + --sp-syntax-color-definition: @yellow; + --sp-syntax-color-property: @blue; + --sp-syntax-color-static: @peach; + --sp-syntax-color-string: @green; + } + + //border styling + + .border-blue-40 { + border-color: @blue; + } + + .border-b-4 { + border-color: @text; + } + + .border-yellow-40 { + border-color: @yellow; + } + + .border-purple-40 { + border-color: @lavender; + } + + .border-purple-10 { + border-color: @mauve; + } + + .dark\:border-purple-30, .border-purple-30 { + border-color: @mauve; + } + + .border-green-40 { + border-color: @green; + } + + .hover\:border-gray-10:hover { + border-color: @accent; + } + + .border-gray-300, .bg-gray-90 { + border-color: @overlay2; + } + + .border-gray-20 { + border-color: @overlay1; + } + + .border-link:hover { + border-color: @accent; + } + + .dark\:border-link-dark { + border-color: @accent; + } + + //backgrounds styling + + .bg-card-dark, + .bg-card { + background-color: @surface0; + } + + .bg-highlight { + background-color: @surface0; + } + + .bg-highlight-dark { + background-color: @surface0; + } + + .bg-github-highlight { + background-color: @surface0; + } + + .bg-link { + color: @surface0; + background-color: @accent; + } + + .bg-gradient-left, + .bg-gradient-left-dark { + background-image: conic-gradient( + from 90deg at -10% 100%, + @mantle 0deg, + @base 90deg, + @crust 1turn + ); + } + + .bg-gray-3, + .bg-gray-5 { + background-color: @crust; + } + + .bg-gray-40\/5, + .bg-gray-60\/5 { + background-color: @overlay1; + } + + .bg-gray-40\/10, + .bg-gray-60\/10 { + background-color: @overlay0; + } + .bg-gray-30, + .bg-gray-300, + .bg-gray-70, + .bg-gray-700 { + background-color: @surface0; + } + + .bg-gray-80, + .bg-gray-200, + .bg-gray-95 { + background-color: @mantle; + } + + .bg-black { + background-color: @base; + } + + #color-fragment-style(@divColor) { + background-color: fade(@divColor, 40%); + color: @text; + + p { + color: @text; + } + + button { + color: @base !important; + background-color: @divColor !important; + + svg { + color: @base !important; + } + } + + .text-primary { + color: @text; + } + + .text-link { + color: @accent; + } + + .bg-highlight { + color: @accent; + } + + .bg-link { + background-color: @accent; + color: @text; + } + } + + .bg-green-5, .bg-green-60, .bg-green-40 { + #color-fragment-style(@green); + } + + .bg-red-5, .bg-red-60 { + #color-fragment-style(@red); + } + + .bg-yellow-5, .bg-yellow-60, .bg-yellow-40 { + #color-fragment-style(@peach); + } + + .bg-purple-5, .bg-purple-60, .bg-purple-40 { + #color-fragment-style(@mauve); + } + + .bg-blue-10, .bg-blue-60, .bg-blue-40 { + #color-fragment-style(@blue); + } + + .bg-red-30 { + background-color: fade(@red, 10%); + } + + .bg-gradient-right, + .bg-gradient-right-dark { + background-image: conic-gradient( + from -90deg at 110% 100%, + @crust 0deg, + @base 90deg, + @mantle 1turn + ); + } + + .bg-white, + .bg-wash { + background-color: @base !important; + } + + .bg-secondary-button { + background-color: @surface1; + } + + // outline styling + + .outline-link { + outline-color: @accent; + } + + .focus\:outline-link:focus { + outline-color: @accent; + } + + // docsearch styling + + --docsearch-modal-background: @base !important; + --docsearch-hit-background: @mantle !important; + --docsearch-highlight-color: @accent !important; + --docsearch-primary-color: @accent !important; + --docsearch-container-background: rgba(127, 132, 156, 0.8) !important; + --docsearch-text-color: @text !important; + --docsearch-logo-color: @blue !important; + --docsearch-muted-color: @subtext0 !important; + --docsearch-searchbox-background: @accent !important; + --docsearch-searchbox-focus-background: @accent !important; + --docsearch-hit-color: @crust !important; + --docsearch-hit-active-color: @base !important; + --docsearch-footer-background: @overlay0 !important; + --docsearch-key-gradient: linear-gradient( + -225deg, + @base, + @crust + ) !important; + + .DocSearch-Form { + background-color: @mantle; + input { + color: @text; + } + :focus-visible { + outline-color: 2px solid @accent !important; + } + } + + .DocSearch-Hit { + .DocSearch-Hit-title { + color: @text; + } + + svg { + color: currentcolor !important; + } + + .DocSearch-Hit-Tree { + color: @base !important; + } + + &[aria-selected="false"] { + mark { + color: @accent !important; + } + .DocSearch-Hit-Tree { + color: @subtext0 !important; + } + } + } + + .DocSearch-Hit-source { + color: @text; + } + + .DocSearch-Cancel { + color: @accent; + } + + .DocSearch-Footer { + background-color: @base; + + [aria-label="Algolia"] { + .cls-1, + .cls-2 { + fill: @accent !important; + } + } + } + } +} diff --git a/styles/reddit/README.md b/styles/reddit/README.md index 1560ffd86c..2e475169d1 100644 --- a/styles/reddit/README.md +++ b/styles/reddit/README.md @@ -10,38 +10,20 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +## ❤️‍🩹 Unmaintained +This userstyle currently lacks maintainers, and may not work correctly. Please feel free to contribute for any issues you find! -## 💝 Current Maintainer(s) +## 💖 Past Maintainers - [jayylmao](https://github.com/jayylmao) +- [rubyowo](https://github.com/rubyowo)   diff --git a/styles/reddit/assets/catwalk.webp b/styles/reddit/assets/catwalk.webp deleted file mode 100644 index 9636f0b282..0000000000 --- a/styles/reddit/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:585afc42f5d4cfedbb4099561dd94236c9bbb0f74109840979d96771e2b49246 -size 106238 diff --git a/styles/reddit/assets/frappe.webp b/styles/reddit/assets/frappe.webp deleted file mode 100644 index 4cf69e5f03..0000000000 --- a/styles/reddit/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:fe3502634d65db4148d709d089b8281d4970567598758b2c4ceccb4901c5f5bf -size 102018 diff --git a/styles/reddit/assets/latte.webp b/styles/reddit/assets/latte.webp deleted file mode 100644 index ab687bb536..0000000000 --- a/styles/reddit/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:205577fcc4e5bd0f59aa2e0cb33b70a5992913af9ff30639c2cde8aca0243c9f -size 100434 diff --git a/styles/reddit/assets/macchiato.webp b/styles/reddit/assets/macchiato.webp deleted file mode 100644 index 53926c0d09..0000000000 --- a/styles/reddit/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7cae1f2b04e5d25299d16700b2792f540289da2ce4f4d11da5f8753987aae35e -size 105748 diff --git a/styles/reddit/assets/mocha.webp b/styles/reddit/assets/mocha.webp deleted file mode 100644 index 0dfae2e989..0000000000 --- a/styles/reddit/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7ff8d3bfdb85623d71d2d7f19484041f7bbb4ac4601adff02bd11068cc25deab -size 106784 diff --git a/styles/reddit/catppuccin.user.css b/styles/reddit/catppuccin.user.css deleted file mode 100644 index 662236cfbb..0000000000 --- a/styles/reddit/catppuccin.user.css +++ /dev/null @@ -1,1146 +0,0 @@ -/* ==UserStyle== -@name Reddit Catppuccin -@namespace github.com/catppuccin/userstyles/styles/reddit -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/reddit -@version 1.1.0 -@description Soothing pastel theme for Reddit. -@author jayylmao -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/reddit/catppuccin.user.css - -@preprocessor stylus - -@var select stylusAccent "Accent color" [ - "Rosewater", - "Flamingo", - "Pink", - "Mauve", - "Red", - "Maroon", - "Peach", - "Yellow", - "Green", - "Teal", - "Sky", - "Sapphire", - "Blue", - "Lavender" -] - -@var select stylusFlavor "Catppuccin Flavor" [ - "Latte", - "Frappe", - "Macchiato", - "Mocha", - "Espresso" -] -==/UserStyle== */ - -@-moz-document domain("reddit.com") { - :root { - if stylusFlavor=="Latte" { - --rosewater: #dc8a78; - --flamingo : #dd7878; - --pink : #ea76cb; - --mauve : #8839ef; - --red : #d20f39; - --maroon : #e64553; - --peach : #fe640b; - --yellow : #df8e1d; - --green : #40a02b; - --teal : #179299; - --sky : #04a5e5; - --sapphire : #209fb5; - --blue : #1e66f5; - --lavender : #7287fd; - --text : #4c4f69; - --subtext1 : #5c5f77; - --subtext0 : #6c6f85; - --overlay2 : #7c7f93; - --overlay1 : #8c8fa1; - --overlay0 : #9ca0b0; - --surface2 : #acb0be; - --surface1 : #bcc0cc; - --surface0 : #ccd0da; - --base : #eff1f5; - --mantle : #e6e9ef; - --crust : #dce0e8; - - /* non-standard colors */ - --surface1Transparent: #bcc0ccbd; - --mist: #dce0e8bd; - } - else if stylusFlavor=="Frappe" { - --rosewater: #f2d5cf; - --flamingo : #eebebe; - --pink : #f4b8e4; - --mauve : #ca9ee6; - --red : #e78284; - --maroon : #ea999c; - --peach : #ef9f76; - --yellow : #e5c890; - --green : #a6d189; - --teal : #81c8be; - --sky : #99d1db; - --sapphire : #85c1dc; - --blue : #8caaee; - --lavender : #babbf1; - --text : #c6d0f5; - --subtext1 : #b5bfe2; - --subtext0 : #a5adce; - --overlay2 : #9f9cbb; - --overlay1 : #838ba7; - --overlay0 : #737994; - --surface2 : #626880; - --surface1 : #51576d; - --surface0 : #414559; - --base : #303446; - --mantle : #292c3c; - --crust : #232634; - - /* non-standard colors */ - --surface1Transparent: #51576dbd; - --mist: #232634bd; - } - else if stylusFlavor=="Macchiato" { - --rosewater: #f4dbd6; - --flamingo : #f0c6c6; - --pink : #f5bde6; - --mauve : #c6a0f6; - --red : #ed8796; - --maroon : #ee99a0; - --peach : #f5a97f; - --yellow : #eed49f; - --green : #a6da95; - --teal : #8bd5ca; - --sky : #91d7e3; - --sapphire : #7dc4e4; - --blue : #8aadf4; - --lavender : #b7bdf8; - --text : #cad3f5; - --subtext1 : #b8c0e0; - --subtext0 : #a5adcb; - --overlay2 : #939ab7; - --overlay1 : #8087a2; - --overlay0 : #6e738d; - --surface2 : #5b6078; - --surface1 : #494d64; - --surface0 : #363a4f; - --base : #24273a; - --mantle : #1e2030; - --crust : #181926; - - /* non-standard colors */ - --surface1Transparent: #494d64bd; - --mist: #181926bd; - } - else if stylusFlavor=="Mocha" { - --rosewater: #f5e0dc; - --flamingo : #f2cdcd; - --pink : #f5c2e7; - --mauve : #cba6f7; - --red : #f38ba8; - --maroon : #eba0ac; - --peach : #fab387; - --yellow : #f9e2af; - --green : #a6e3a1; - --teal : #94e2d5; - --sky : #89dceb; - --sapphire : #74c7ec; - --blue : #89b4fa; - --lavender : #b4befe; - --text : #cdd6f4; - --subtext1 : #bac2de; - --subtext0 : #a6adc8; - --overlay2 : #9399b2; - --overlay1 : #7f849c; - --overlay0 : #6c7086; - --surface2 : #585b70; - --surface1 : #45475a; - --surface0 : #313244; - --base : #1e1e2e; - --mantle : #181825; - --crust : #11111b; - - /* non-standard colors */ - --surface1Transparent: #45475abd; - --mist: #11111bbd; - } - else if stylusFlavor=="Espresso" { - --rosewater: #f5e0dc; - --flamingo : #f2cdcd; - --pink : #f5c2e7; - --mauve : #cba6f7; - --red : #f38ba8; - --maroon : #eba0ac; - --peach : #fab387; - --yellow : #f9e2af; - --green : #a6e3a1; - --teal : #94e2d5; - --sky : #89dceb; - --sapphire : #74c7ec; - --blue : #89b4fa; - --lavender : #b4befe; - --text : #cdd6f4; - --subtext1 : #bac2de; - --subtext0 : #a6adc8; - --overlay2 : #9399b2; - --overlay1 : #7f849c; - --overlay0 : #6c7086; - --surface2 : #585b70; - --surface1 : #45475a; - --surface0 : #313244; - --base : #020202; - --mantle : #010101; - --crust : #000000; - - /* non-standard colors */ - --surface1Transparent: #45475abd; - --mist: #000000bd; - } - - if stylusAccent=="Rosewater" { - --accent: var(--rosewater); - } - else if stylusAccent=="Flamingo" { - --accent: var(--flamingo); - } - else if stylusAccent=="Pink" { - --accent: var(--pink); - } - else if stylusAccent=="Mauve" { - --accent: var(--mauve); - } - else if stylusAccent=="Red" { - --accent: var(--red); - } - else if stylusAccent=="Maroon" { - --accent: var(--maroon); - } - else if stylusAccent=="Peach" { - --accent: var(--peach); - } - else if stylusAccent=="Yellow" { - --accent: var(--yellow); - } - else if stylusAccent=="Green" { - --accent: var(--green); - } - else if stylusAccent=="Teal" { - --accent: var(--teal); - } - else if stylusAccent=="Sky" { - --accent: var(--sky); - } - else if stylusAccent=="Sapphire" { - --accent: var(--sapphire); - } - else if stylusAccent=="Blue" { - --accent: var(--blue); - } - else if stylusAccent=="Lavender" { - --accent: var(--lavender); - } - } - - - /* REDDIT COLOR VARIABLES */ - - - div[class^=subredditvars], :root { - --color-online: var(--green) !important; - --newCommunityTheme-actionIcon: var(--subtext0) !important; - --newCommunityTheme-actionIconAlpha20: var(--mist) !important; - --newCommunityTheme-actionIconAlpha50: var(--mist) !important; - --newCommunityTheme-actionIconShaded80: var(--subtext0) !important; - --newCommunityTheme-actionIconTinted80: var(--subtext1) !important; - --newCommunityTheme-active: var(--accent) !important; - --newCommunityTheme-activeAlpha10: var(--mist) !important; - --newCommunityTheme-activeAlpha20: var(--mist) !important; - --newCommunityTheme-activeAlpha50: var(--mist) !important; - --newCommunityTheme-activeLight60: var(--accent) !important; - --newCommunityTheme-activeShaded80: var(--accent) !important; - --newCommunityTheme-activeShaded90: var(--accent) !important; - --newCommunityTheme-activeTinted05: var(--text) !important; - --newCommunityTheme-banner-backgroundColor: var(--accent) !important; - --newCommunityTheme-banner-iconColor: var(--accent) !important; - --newCommunityTheme-body: var(--mantle) !important; - --newCommunityTheme-bodyAlpha50: var(--surface0) !important; - --newCommunityTheme-bodyAlpha70: var(--surface1) !important; - --newCommunityTheme-bodyAlpha80: var(--surface2) !important; - --newCommunityTheme-bodyFade: var(--subtext0) !important; - --newCommunityTheme-bodyShaded80: var(--mantle) !important; - --newCommunityTheme-bodyText: var(--text) !important; - --newCommunityTheme-bodyTextAlpha03: var(--mantle) !important; - --newCommunityTheme-bodyTextAlpha20: var(--surface1) !important; - --newCommunityTheme-bodyTextShaded20: var(--surface0) !important; - --newCommunityTheme-bodyTextTinted20: var(--subtext0) !important; - --newCommunityTheme-bodyTinted50: var(--overlay1) !important; - --newCommunityTheme-bodyTinted80: var(--overlay0) !important; - --newCommunityTheme-button: var(--text) !important; - --newCommunityTheme-buttonAlpha05: var(--mist) !important; - --newCommunityTheme-buttonAlpha10: var(--mist) !important; - --newCommunityTheme-buttonAlpha20: var(--mist) !important; - --newCommunityTheme-buttonAlpha40: var(--subtext0) !important; - --newCommunityTheme-buttonAlpha50: var(--subtext1) !important; - --newCommunityTheme-buttonAlpha80: var(--subtext1) !important; - --newCommunityTheme-buttonShaded80: var(--overlay0) !important; - --newCommunityTheme-buttonTinted20: var(--accent) !important; - --newCommunityTheme-buttonTinted50: var(--accent) !important; - --newCommunityTheme-buttonTinted80: var(--accent) !important; - --newCommunityTheme-canvas: var(--crust) !important; - --newCommunityTheme-checkbox: var(--text) !important; - --newCommunityTheme-errorText: var(--red) !important; - --newCommunityTheme-field: var(--surface0) !important; - --newCommunityTheme-fieldFade: var(--surface1Transparent) !important; - --newCommunityTheme-flair: var(--accent) !important; - --newCommunityTheme-highlight: var(--base) !important; - --newCommunityTheme-inactive: var(--subtext0) !important; - --newCommunityTheme-lightText: var(--text) !important; - --newCommunityTheme-lightTextAlpha75: var(--subtext1) !important; - --newCommunityTheme-line: var(--surface1Transparent) !important; - --newCommunityTheme-lineShaded80: var(--surface1Transparent) !important; - --newCommunityTheme-lineShaded90: var(--surface1Transparent) !important; - --newCommunityTheme-lineShadedNinety: var(--surface1Transparent) !important; - --newCommunityTheme-linkText: var(--accent) !important; - --newCommunityTheme-linkTextAlpha80: var(--accent) !important; - --newCommunityTheme-linkTextShaded80: var(--accent) !important; - --newCommunityTheme-linkTextTinted80: var(--accent) !important; - --newCommunityTheme-linkTextWithBody: var(--accent) !important; - --newCommunityTheme-menu: var(--mantle) !important; - --newCommunityTheme-menuActiveText: var(--text) !important; - --newCommunityTheme-menuButtonBackground-active: var(--base) !important; - --newCommunityTheme-menuButtonBackground-focus: var(--base) !important; - --newCommunityTheme-menuButtonBackground-hover: var(--base) !important; - --newCommunityTheme-menuInactiveText: var(--text) !important; - --newCommunityTheme-metaText: var(--subtext0) !important; - --newCommunityTheme-metaTextAlpha50: var(--subtext0) !important; - --newCommunityTheme-metaTextShaded80: var(--subtext0) !important; - --newCommunityTheme-monospaceColor: var(--accent) !important; - --newCommunityTheme-navBar-activeLink: var(--text) !important; - --newCommunityTheme-navBar-activeSubmenuCaret: var(--text) !important; - --newCommunityTheme-navBar-activeSubmenuLink: var(--text) !important; - --newCommunityTheme-navBar-backgroundColor: var(--mantle) !important; - --newCommunityTheme-navBar-hoverLink: var(--text) !important; - --newCommunityTheme-navBar-inactiveLink: var(--text) !important; - --newCommunityTheme-navBar-inactiveSubmenuCaret: var(--text) !important; - --newCommunityTheme-navBar-inactiveSubmenuLink: var(--text) !important; - --newCommunityTheme-navBar-submenuBackgroundColor: var(--mantle) !important; - --newCommunityTheme-navIcon: var(--text) !important; - - /* upvote/downvote focus */ - --newCommunityTheme-navIconFaded10: var(--mist) !important; - - --newCommunityTheme-nsfw: var(--red) !important; - --newCommunityTheme-nsfwBlocking-bgcolor: var(--crust) !important; - --newCommunityTheme-nsfwBlocking-color: var(--text) !important; - --newCommunityTheme-nsfwBlocking-contentTitleBgColor: var(--base) !important; - --newCommunityTheme-nsfwBlocking-mainCtaBgColor: var(--mantle) !important; - --newCommunityTheme-pageHeader: var(--surface2) !important; - --newCommunityTheme-placeholder: var(--surface0) !important; - --newCommunityTheme-post: var(--mantle) !important; - --newCommunityTheme-postError: var(--red) !important; - --newCommunityTheme-postFlairText: var(--text) !important; - --newCommunityTheme-postIcon: var(--accent) !important; - --newCommunityTheme-postLine: var(--surface1Transparent) !important; - --newCommunityTheme-postLineShaded80: var(--surface1Transparent) !important; - --newCommunityTheme-postLineShaded90: var(--surface1Transparent) !important; - --newCommunityTheme-postTinted20: var(--base) !important; - --newCommunityTheme-postTransparent20: var(--base) !important; - --newCommunityTheme-primaryButtonShadedEighty: var(--overlay1) !important; - --newCommunityTheme-primaryButtonTintedEighty: var(--overlay1) !important; - --newCommunityTheme-primaryButtonTintedFifty: var(--overlay0) !important; - --newCommunityTheme-primaryButtonTintedSixty: var(--overlay0) !important; - --newCommunityTheme-quarantine: var(--yellow) !important; - --newCommunityTheme-report: var(--surface1) !important; - --newCommunityTheme-search-syntaxHighlightBackgroundColor: var(--accent) !important; - --newCommunityTheme-search-syntaxHighlightColor: var(--base) !important; - --newCommunityTheme-titleText: var(--text) !important; - --newCommunityTheme-upsell-appleIcon: var(--subtext1) !important; - --newCommunityTheme-upsell-ssoButtonBorderColor: var(--surface1Transparent) !important; - --newCommunityTheme-upsell-ssoButtonTextColor: var(--text) !important; - --newCommunityTheme-voteText-base: var(--subtext0) !important; - --newCommunityTheme-voteText-downvote: var(--blue) !important; - --newCommunityTheme-voteText-downvoteShaded80: var(--blue) !important; - --newCommunityTheme-voteText-downvoteTinted80: var(--blue) !important; - --newCommunityTheme-voteText-upvote: var(--red) !important; - --newCommunityTheme-voteText-upvoteShaded80: var(--red) !important; - --newCommunityTheme-voteText-upvoteTinted80: var(--red) !important; - --newCommunityTheme-widgetColors-appleIcon: var(--overlay0) !important; - --newCommunityTheme-widgetColors-lineColor: var(--surface1Transparent) !important; - - /* sidebar widgets */ - --newCommunityTheme-widgetColors-sidebarWidgetBackgroundColor: var(--mantle) !important; - --newCommunityTheme-widgetColors-sidebarWidgetBorderColor: var(--surface1Transparent) !important; - --newCommunityTheme-widgetColors-sidebarWidgetHeaderColor: var(--crust) !important; - --newCommunityTheme-widgetColors-sidebarWidgetHeaderColorAlpha60: var(--mantle) !important; - --newCommunityTheme-widgetColors-sidebarWidgetTextColor: var(--text) !important; - --newCommunityTheme-widgetColors-sidebarWidgetTextColorShaded80: var(--subtext1) !important; - --newCommunityTheme-widgetColors-sidebarWidgetTitleColor: var(--text) !important; - - --newRedditTheme-actionIcon: var(--subtext0) !important; - --newRedditTheme-actionIconAlpha20: var(--mist) !important; - --newRedditTheme-actionIconAlpha50: var(--mist) !important; - --newRedditTheme-actionIconShaded80: var(--subtext0) !important; - --newRedditTheme-actionIconTinted80: var(--subtext1) !important; - --newRedditTheme-active: var(--accent) !important; - --newRedditTheme-activeAlpha10: var(--mist) !important; - --newRedditTheme-activeAlpha20: var(--mist) !important; - --newRedditTheme-activeAlpha50: var(--mist) !important; - --newRedditTheme-activeLight60: var(--accent) !important; - --newRedditTheme-activeShaded80: var(--accent) !important; - --newRedditTheme-activeShaded90: var(--accent) !important; - --newRedditTheme-activeTinted05: var(--text) !important; - --newRedditTheme-banner-backgroundColor: var(--accent) !important; - --newRedditTheme-banner-iconColor: var(--accent) !important; - --newRedditTheme-body: var(--mantle) !important; - --newRedditTheme-bodyAlpha50: var(--surface0) !important; - --newRedditTheme-bodyAlpha70: var(--surface1) !important; - --newRedditTheme-bodyAlpha80: var(--surface2) !important; - --newRedditTheme-bodyFade: var(--mist) !important; - --newRedditTheme-bodyShaded80: var(--mantle) !important; - --newRedditTheme-bodyText: var(--text) !important; - --newRedditTheme-bodyTextAlpha03: var(--mist) !important; - --newRedditTheme-bodyTextAlpha20: var(--surface1) !important; - --newRedditTheme-bodyTextShaded20: var(--surface0) !important; - --newRedditTheme-bodyTextTinted20: var(--subtext1) !important; - --newRedditTheme-bodyTinted50: var(--overlay0) !important; - --newRedditTheme-bodyTinted80: var(--overlay1) !important; - --newRedditTheme-button: var(--text) !important; - --newRedditTheme-buttonAlpha05: var(--mist) !important; - --newRedditTheme-buttonAlpha10: var(--mist) !important; - --newRedditTheme-buttonAlpha20: var(--mist) !important; - --newRedditTheme-buttonAlpha40: var(--subtext0) !important; - --newRedditTheme-buttonAlpha50: var(--subtext1) !important; - --newRedditTheme-buttonAlpha80: var(--subtext1) !important; - --newRedditTheme-buttonShaded80: var(--overlay0) !important; - --newRedditTheme-buttonTinted20: var(--accent) !important; - --newRedditTheme-buttonTinted50: var(--accent) !important; - --newRedditTheme-buttonTinted80: var(--accent) !important; - --newRedditTheme-canvas: var(--crust) !important; - --newRedditTheme-checkbox: var(--text) !important; - --newRedditTheme-errorText: var(--red) !important; - --newRedditTheme-field: var(--base) !important; - --newRedditTheme-fieldFade: var(--mantle) !important; - --newRedditTheme-flair: var(--accent) !important; - - /* controls menu, link, and other similar highlights. very important */ - --newRedditTheme-highlight: var(--base) !important; - - --newRedditTheme-inactive: var(--surface0) !important; - --newRedditTheme-lightText: var(--text) !important; - --newRedditTheme-lightTextAlpha75: var(--subtext1) !important; - --newRedditTheme-line: var(--surface1Transparent) !important; - --newRedditTheme-lineShaded80: var(--surface1Transparent) !important; - --newRedditTheme-lineShaded90: var(--surface1Transparent) !important; - --newRedditTheme-lineShadedNinety: var(--surface1Transparent) !important; - - /* links */ - --newRedditTheme-linkText: var(--accent) !important; - --newRedditTheme-linkTextAlpha80: var(--accent) !important; - --newRedditTheme-linkTextShaded80: var(--accent) !important; - --newRedditTheme-linkTextTinted80: var(--accent) !important; - --newRedditTheme-linkTextWithBody: var(--accent) !important; - - /* menus */ - --newRedditTheme-menu: var(--mantle) !important; - --newRedditTheme-menuActiveText: var(--text) !important; - --newRedditTheme-menuButtonBackground-active: var(--accent) !important; - --newRedditTheme-menuButtonBackground-focus: var(--base) !important; - --newRedditTheme-menuButtonBackground-hover: var(--base) !important; - --newRedditTheme-menuInactiveText: var(--text) !important; - - --newRedditTheme-metaText: var(--subtext0) !important; - --newRedditTheme-metaTextAlpha50: var(--mist) !important; - --newRedditTheme-metaTextShaded80: var(--subtext1) !important; - --newRedditTheme-monospaceColor: var(--accent) !important; - --newRedditTheme-navBar-activeLink: var(--text) !important; - --newRedditTheme-navBar-activeSubmenuCaret: var(--text) !important; - --newRedditTheme-navBar-activeSubmenuLink: var(--text) !important; - --newRedditTheme-navBar-backgroundColor: var(--mantle) !important; - --newRedditTheme-navBar-hoverLink: var(--text) !important; - --newRedditTheme-navBar-inactiveLink: var(--text) !important; - --newRedditTheme-navBar-inactiveSubmenuCaret: var(--text) !important; - --newRedditTheme-navBar-inactiveSubmenuLink: var(--text) !important; - --newRedditTheme-navBar-submenuBackgroundColor: var(--mantle) !important; - --newRedditTheme-navIcon: var(--text) !important; - --newRedditTheme-navIconFaded10: var(--mist) !important; - --newRedditTheme-nsfw: var(--red) !important; - --newRedditTheme-nsfwBlocking-bgcolor: var(--crust) !important; - --newRedditTheme-nsfwBlocking-color: var(--text) !important; - --newRedditTheme-nsfwBlocking-contentTitleBgColor: var(--base) !important; - --newRedditTheme-nsfwBlocking-mainCtaBgColor: var(--mantle) !important; - --newRedditTheme-pageHeader: var(--surface0) !important; - --newRedditTheme-placeholder: var(--surface1) !important; - --newRedditTheme-post: var(--mantle) !important; - --newRedditTheme-postError: var(--red) !important; - --newRedditTheme-postFlairText: var(--text) !important; - --newRedditTheme-postIcon: var(--accent) !important; - --newRedditTheme-postLine: var(--surface1Transparent) !important; - --newRedditTheme-postLineShaded80: var(--surface1Transparent) !important; - --newRedditTheme-postLineShaded90: var(--surface1Transparent) !important; - --newRedditTheme-postTinted20: var(--base) !important; - --newRedditTheme-postTransparent20: var(--mist) !important; - --newRedditTheme-primaryButtonShadedEighty: var(--surface1) !important; - --newRedditTheme-primaryButtonTintedEighty: var(--surface2) !important; - --newRedditTheme-primaryButtonTintedFifty: var(--surface1) !important; - --newRedditTheme-primaryButtonTintedSixty: var(--surface1) !important; - --newRedditTheme-quarantine: var(--yellow) !important; - --newRedditTheme-report: var(--base) !important; - --newRedditTheme-search-syntaxHighlightBackgroundColor: var(--accent) !important; - --newRedditTheme-search-syntaxHighlightColor: var(--base) !important; - --newRedditTheme-titleText: var(--text) !important; - --newRedditTheme-upsell-appleIcon: var(--overlay0) !important; - --newRedditTheme-upsell-ssoButtonBorderColor: var(--text) !important; - --newRedditTheme-upsell-ssoButtonTextColor: var(--text) !important; - --newRedditTheme-voteText-base: var(--subtext1) !important; - --newRedditTheme-voteText-downvote: var(--blue) !important; - --newRedditTheme-voteText-downvoteShaded80: var(--blue) !important; - --newRedditTheme-voteText-downvoteTinted80: var(--blue) !important; - --newRedditTheme-voteText-upvote: var(--red) !important; - --newRedditTheme-voteText-upvoteShaded80: var(--red) !important; - --newRedditTheme-voteText-upvoteTinted80: var(--red) !important; - --newRedditTheme-widgetColors-appleIcon: var(--overlay0) !important; - --newRedditTheme-widgetColors-lineColor: var(--surface1Transparent) !important; - --newRedditTheme-widgetColors-sidebarWidgetBackgroundColor: var(--mantle) !important; - --newRedditTheme-widgetColors-sidebarWidgetBorderColor: var(--surface1Transparent) !important; - --newRedditTheme-widgetColors-sidebarWidgetHeaderColor: var(--crust) !important; - --newRedditTheme-widgetColors-sidebarWidgetHeaderColorAlpha60: var(--mist) !important; - --newRedditTheme-widgetColors-sidebarWidgetTextColor: var(--text) !important; - --newRedditTheme-widgetColors-sidebarWidgetTextColorShaded80: var(--subtext1) !important; - --newRedditTheme-widgetColors-sidebarWidgetTitleColor: var(--text) !important; - --tw-bg-opacity: var(--crust) !important; - --vds-video-bg-color: var(--crust) !important; - } - - /* reddit chat variables */ - :root { - --activity-button-chatFilterColor: var(--surface0) !important; - --activity-button-newChatFilter-activeBg: var(--accent) !important; - --activity-button-newChatFilter-activeText: var(--base) !important; - --activity-button-newChatFilter-defaultBorder: var(--surface1) !important; - --activity-button-newChatFilter-defaultText: var(--text) !important; - --activity-button-primary: var(--accent) !important; - --activity-button-secondary: var(--text) !important; - --activity-buttonPrimary-color: var(--accent) !important; - --activity-buttonSecondary-active: var(--accent) !important; - --activity-checkbox-checked: var(--accent) !important; - --activity-checkbox-checkmark: var(--text) !important; - --activity-checkbox-unchecked: var(--base) !important; - --activity-checkbox-uncheckedBorder: var(--surface1) !important; - --activity-icon-active: var(--accent) !important; - --activity-icon-contrast: var(--surface1) !important; - --activity-icon-default: var(--subtext0) !important; - --activity-icon-disable: var(--surface2) !important; - --activity-icon-hover: var(--surface2) !important; - --activity-icon-nsfw-bg: var(--base) !important; - --activity-icon-nsfw-text: var(--text) !important; - --activity-icon-subIcon-backgroundColor: var(--text) !important; - --activity-icon-toaster: var(--crust) !important; - --activity-input-background: var(--mist) !important; - --activity-input-border: var(--surface1) !important; - --activity-input-channelRename: var(--subtext0) !important; - --activity-input-color: var(--subtext1) !important; - --activity-input-error: var(--red) !important; - --activity-input-focusBg: var(--green) !important; - --activity-input-focusColor: var(--text) !important; - --activity-input-ownerBg: var(--surface0) !important; - --activity-link-hoverText: var(--red) !important; - --activity-link-staticText: var(--accent) !important; - --activity-link-staticUnderline: var(--accent) !important; - --activity-minimizedPortal-backgroundColor-unreadFinal: var(--mantle) !important; - --activity-minimizedPortal-backgroundColor-unreadInitial: var(--accent) !important; - --activity-minimizedPortal-color-unreadFinal: var(--text) !important; - --activity-minimizedPortal-color-unreadInitial: var(--text) !important; - --activity-send-disable: var(--surface0) !important; - --activity-send-hover: var(--accent) !important; - --activity-text-active: var(--accent) !important; - --activity-text-fade: var(--subtext0) !important; - --activity-text-highlight: var(--text) !important; - --activity-text-light: var(--subtext0) !important; - --activity-text-meta: var(--subtext0) !important; - --activity-text-regular: var(--text) !important; - --activity-text-success: var(--green) !important; - --activity-text-tutorial: var(--rosewater) !important; - --activity-text-warning: var(--red) !important; - --addReaction-backgroundColor: var(--surface0) !important; - --addReaction-iconFill: var(--surface1) !important; - --boxShadow: var(--mist) !important; - --bubble-border: var(--surface1Transparent) !important; - --bubble-channelsFilter-background: var(--crust) !important; - --bubble-channelsFilter-selected: var(--overlay0) !important; - --bubble-color: var(--text) !important; - --bubble-link-color: var(--accent) !important; - --bubbleActions-hover: var(--surface0) !important; - --editName: var(--surface1) !important; - --layout-body: var(--mantle) !important; - --layout-colsBorder: var(--surface1Transparent) !important; - --layout-controlsBorder: var(--surface1Transparent) !important; - --layout-dropdown-border: var(--surface1Transparent) !important; - --layout-header-counterBg: var(--red) !important; - --layout-header-counterText: var(--text) !important; - --layout-overlayBackground: var(--mist) !important; - --layout-overlayReportFlow: var(--mist) !important; - --layout-scrollbar: var(--text) !important; - --layout-scrollbarHover: var(--accent) !important; - --layout-timeStamp-tooltip-background: var(--surface0) !important; - --message-list-item-button: var(--surface1) !important; - --message-list-item-onlineIndicator: var(--green) !important; - --message-list-item-ownerBg: var(--surface1) !important; - --message-list-item-richItem: var(--overlay0) !important; - --message-list-item-richItemBorder: var(--surface1Transparent) !important; - --message-list-item-white: var(--text) !important; - --modal-buttonsBackground: var(--text) !important; - --modal-primaryButtonWarning: var(--red) !important; - --modal-secondaryButton: var(--text) !important; - --newChat-inviteLink-borderColor: var(--surface1Transparent) !important; - --overlay-backgroundColor: var(--mantle) !important; - --overlay-headerColor: var(--text) !important; - --overlay-inputBackground: var(--crust) !important; - --overlay-searchBarBackground: var(--mantle) !important; - --prompt-tooltip-background: var(--accent) !important; - --searchBar-backgroundColor: var(--mantle) !important; - --settings-color: var(--subtext0) !important; - --settings-dropdownItemHoverBackground: var(--crust) !important; - --settings-panelBackground: var(--crust) !important; - --settings-panelItemHoverBackground: var(--surface0) !important; - --settings-panelItemSelectedBackground: var(--surface1) !important; - --sidebar-background: var(--surface1Transparent) !important; - --sidebar-basic-background-active: var(--accent) !important; - --sidebar-basic-background-hover: var(--mantle) !important; - --sidebar-footer-background: var(--crust) !important; - --sidebar-item-active: var(--surface1) !important; - --sidebar-item-hover: var(--surface0) !important; - --sidebar-item-selected: var(--surface2) !important; - --sidebar-item-text-active: var(--text) !important; - --sidebar-subreddit-background-active: var(--accent) !important; - --sidebar-subreddit-background-hover: var(--surface1) !important; - --sidebar-text-divider: var(--surface1) !important; - --skeleton-field: var(--surface2) !important; - --skeleton-inactive: var(--surface0) !important; - --subreddit-iconBg: var(--accent) !important; - --toast-error: var(--red) !important; - --toast-pending: var(--crust) !important; - --toast-success: var(--green) !important; - --uploads-progress-background: var(--subtext0) !important; - --uploads-progress-bar: var(--accent) !important; - --videoModal-button-background: var(--text) !important; - --videoModal-button-color: var(--mantle) !important; - } - - ::placeholder { - color: var(--subtext0) !important; - } - - /* site background */ - div.ListingLayout-backgroundContainer::before { - background: var(--base) !important; - } - - - /* PROFILE MENU */ - - - /* karma count */ - span#email-collection-tooltip-id > :nth-child(2) > :nth-child(2) > span { - color: var(--subtext0) !important; - } - - /* profile button karma icon */ - i.icon-karma_fill { - color: var(--red) !important; - } - - /* menu headers */ - div[role=menu] > div > div > span > span { - color: var(--subtext0) !important; - } - - /* switches, should also apply sitewide */ - button[role=switch][aria-checked=false] { - background: var(--surface0) !important; - } - - button[role=switch] > div { - background: var(--text) !important; - } - - /* online status */ - ._2dn5Ncenn0BSD4tCSmxQhA { - fill: var(--green) !important; - } - - ._3SlBAJb2MbUHwgBZFH8eL7 { - fill: var(--base) !important; - } - - - /* PROFILE PAGE */ - - - /* create avatar button */ - button._3F1tNW0P4Ff182mO_CefIg { - background: linear-gradient(90deg, var(--red), var(--peach)) !important; - color: var(--base) !important; - } - - button._3F1tNW0P4Ff182mO_CefIg > i { - color: var(--base) !important; - } - - /* cake day and followers icon */ - i.icon-cake_fill, i.icon-user_fill { - color: var(--accent) !important; - } - - /* add social links button readability tweak */ - div._3hew1NnzwygOKDNQDKp6R4, div._3hew1NnzwygOKDNQDKp6R4 > i, li._3hew1NnzwygOKDNQDKp6R4 { - color: var(--base) !important - } - - /* profile moderation and user settings page */ - div._1VP69d9lk-Wk9zokOaylL { - --background: var(--base) !important; - --canvas: var(--base) !important; - } - - /* Beta Badge */ - span._2KFJx8Dhh1o1u0Xb8e7NuD { - color: var(--accent) !important; - } - - /* Delete Account */ - button.EBd2MhBQlQeZ13YeP0K8a { - color: var(--accent) !important; - } - - /* Delete Account Icon */ - svg._1Fa4RPHlhrfUZuNaXK2-eP > path { - fill: var(--accent) !important; - } - - /* blocked, muted input */ - input._1Vnaj3fBuYrmHKEPQD_zWW { - background-color: var(--base) !important; - } - - /* fixes profile posts not being themed */ - div.scrollerItem > div, div[data-testid=post-container], div[style="background:#1A1A1B"], div._2otRz3OtuWajw1RleFDJ5P { - background: var(--mantle) !important; - } - - - /* NFT AVATAR VIEWER */ - - - /* modal background */ - div._productDetails_7kbcu_53 { - background: var(--mantle) !important; - color: var(--text) !important; - } - - /* mint status */ - div._mintStatus_7kbcu_264 { - color: var(--accent) !important; - } - - /* carousel background */ - div._carousel_7kbcu_45 { - background: linear-gradient(243.37deg, var(--base) 16.42%, var(--blue) 100%); - } - - /* nft card back */ - div._card_1ooes_1 { - background: var(--blue) !important; - } - - ol._container_1t62i_1 { - border-color: var(--base) !important; - } - - ol._container_1t62i_1 > li { - border-color: var(--base) !important; - } - - ol._container_1t62i_1 > li > div { - color: var(--base) !important; - } - - div.MuiMobileStepper-dot { - background: var(--surface0) !important; - } - - div.MuiMobileStepper-dotActive { - background: var(--accent) !important; - } - - div._scrollContainer_7kbcu_104 > div > h3, div._cardAuthor_7kbcu_79 { - color: var(--subtext0) !important - } - - div._container_oikih_1 { - background: var(--crust) !important; - border-color: var(--surface1) !important; - } - - /* external links */ - a._pill_7kbcu_280 { - background: var(--crust) !important; - color: var(--text) !important; - } - - /* shop for avatars button */ - button._shopForMoreButton_7kbcu_125 { - background: linear-gradient(90deg, var(--red), var(--peach)) !important; - color: var(--base) !important; - } - - - /* AVATAR CREATOR */ - div._wrapper_1upjl_7 { - background: var(--base) !important; - color: var(--text) !important; - } - - - /* SITE HEADER*/ - - - /* reddit logo */ - a[aria-label=Home] > svg > g > circle { - fill: var(--accent) !important; - } - - a[aria-label=Home] > svg:first-child > g > path { - fill: var(--base) !important; - } - - a[aria-label=Home] > svg:nth-child(2) > g > path { - fill: var(--text) !important; - } - - /* notification icon */ - button[aria-label="Open notifications inbox"] > div > span { - background: var(--accent) !important; - color: var(--mantle) !important; - } - - /* advertise button */ - #change-username-tooltip-id > span._2I12Htze2UzJmmfnrgYJOn > a { - background: var(--surface0) !important; - color: var(--text) !important; - } - - #change-username-tooltip-id > span._2I12Htze2UzJmmfnrgYJOn > a > i { - color: var(--text) !important; - } - - /* reddit now notification */ - a[href="/now"] > div { - background: var(--accent) !important; - } - - /* search scope pill text */ - div[data-testid="search-scope-pill-text"] { - color: var(--text) !important; - } - - /* search popup title */ - div[class*="_2SdHzo12ISmrC8H86TgSCp"][class*="_1QVrieUoti9cxiQSRw314E"][class*="uWdXen_41bh0iwLrgzFkc"] { - --posttitletextcolor: var(--text) !important; - } - - /* safe search toggle */ - button#safe-search-toggle[aria-checked=true] { - background: var(--accent) !important; - } - - - /* NAVIGATION SIDEBAR */ - - - /* close icon */ - i.icon-close { - color: var(--subtext0) !important; - } - - /* item color */ - a[role=menuitem] { - color: var(--text) !important; - } - - /* navigation sidebar header color */ - div[role=menu] > div[role=heading] { - color: var(--subtext0) !important; - } - - a[role=menuitem]:hover { - background: var(--surface0) !important; - } - - /* favorites */ - i.icon-star_fill { - color: var(--accent) !important; - } - - i.icon-star { - color: var(--subtext0) !important; - } - - - /* RIGHT FRONTPAGE SIDEBAR */ - - - /* reddit premium icon */ - i.icon-premium_fill { - color: var(--accent) !important; - } - - /* reddit premium try now button */ - button._10BQ7pjWbeYP63SAPNS8Ts.q_unSaY23rpdd3lDvGZ- { - background: var(--accent) !important; - color: var(--base) !important; - } - - /* recent posts thumbnail borders */ - div._3fWuhJ6bVet7XJT5A0mZM2 > div > div > div { - border-color: var(--subtext0) !important; - } - - - /* POSTS */ - - - /* post background for card style */ - div[data-adclicklocation=background] { - background: var(--base) !important; - } - - /* post options (save, comment, etc.) */ - div._3-miAEojrCvx_4FQ8x3P-s, i.icon-comment, i.icon-share, i.icon-save, i.icon-expand, i.icon-collapse, i.icon-text_post, i.icon-image_post, i.icon-media_gallery, i.icon-video_post, i.icon-gif_post, i.icon-embed, i.icon-external_link, i.icon-poll_post { - color: var(--subtext0) !important; - } - - /* post title color */ - div[data-adclicklocation=title] > div > a > div > h3, div[data-adclicklocation=title] > div:first-child > div:first-child > h1:first-child { - color: var(--text) !important; - } - - /* - * post op color and - * post date color - */ - div[data-adclicklocation=top_bar] > span, a[data-testid=post_author_link] { - color: var(--subtext0) !important; - } - - /* nsfw flair */ - span._1wzhGvvafQFOWAyA157okr { - border-color: var(--red) !important; - color: var(--red) !important; - } - - /* pinned post icon */ - i.icon-pin_fill { - color: var(--green) !important; - } - - /* give award icon */ - i.icon-award { - color: var(--subtext0) !important; - } - - /* locked post icon */ - i.icon-archived_fill, i.icon-lock_fill { - color: var(--yellow) !important; - } - - /* post button divider */ - div[data-click-id=body] > div:nth-child(3) > div:nth-child(3) { - border-color: var(--surface1) !important; - } - - - /* UPVOTES/DOWNVOTES */ - - - /* upvote/downvote background */ - div.Post, div[data-click-id=media] { - background: var(--mantle) !important; - fill: var(--mantle) !important; - } - - /* inactive vote text color */ - div[id^=vote-arrows] > div { - color: var(--subtext0) !important; - } - - /* active upvote color */ - i.icon-upvote_fill { - color: var(--red) !important; - } - - button[aria-label=upvote][aria-pressed=false] > span:hover > i { - color: var(--red) !important; - } - - /* active upvote text color */ - button[aria-label=upvote][aria-pressed=true] ~ div { - color: var(--red) !important; - } - - /* hover background for both upvotes and downvotes */ - button[aria-label=upvote][aria-label=downvote] > span:hover { - background: var(--surface0) !important; - } - - /* active downvote color */ - .icon-downvote_fill { - color: var(--blue) !important; - } - - /* active downvote text color */ - button[aria-label=downvote][aria-pressed=true] ~ div { - color: var(--blue) !important; - } - - button[aria-label=downvote][aria-pressed=false] > span:hover > i { - color: var(--blue) !important; - } - - - /* REPORT MODAL */ - - - a.o1ov2mzLxTFAFP-O4Uv8I { - color: var(--accent) !important; - } - - button._1lDGFVGU9k2mi-4kjU95Rp { - color: var(--base) !important; - } - - - /* SUBREDDIT PAGES */ - - - a[role=button][target="_blank"] { - background: var(--text) !important; - color: var(--base) !important; - } - - /* radio buttons (flair selector, etc.) */ - div[role=radio]:hover, div[role=radio]:focus { - background: var(--accent) !important; - } - - div[role=radio] > svg, div[role=radio] > svg:active { - fill: var(--text) !important; - } - - /* checkboxes */ - button[role=checkbox] { - fill: var(--accent) !important; - } - - - /* SUBREDDIT RIGHT SIDEBAR (some styles carry over from the homepage right sidebar section) */ - - - /* header background */ - ._ZhON3a3vplThB8NFwuJn { - background: var(--crust) !important; - color: var(--text) !important; - } - - /* subreddit image background */ - img[alt="Subreddit Icon"][role="presentation"] { - background: var(--accent) !important; - } - - /* default subreddit icon */ - i.icon-community_fill { - color: var(--accent) !important; - } - - /* online users */ - div._21RLQh5PvUhC6vOKoFeHUP:before { - color: var(--green) !important; - } - - - /* POST VIEWER */ - - - /* spoiler tags */ - ._2v4IIjPhKL0PDaWaWtjJ1E { - background: var(--surface0) !important; - } - - /* mod comment tag */ - span[id^=CommentTopMeta--Mod] { - color: var(--green) !important; - } - - /* op comment tag */ - span[id^=CommentTopMeta--OP] { - color: var(--blue) !important; - } - - /* post overlay if you have "open in new tab" disabled */ - div#overlayScrollContainer > div { - background: var(--crust) !important; - } - - /* fixes comment section background not working when "open in new tab is disabled" */ - div._2M2wOqmeoPVvcSsJ6Po9-V._3287nL7j7epK9JmDC3N1VR { - background: var(--mantle) !important; - } - - /* shade applied to background when clicking on a post with "open in new tab" disabled */ - div._2DJXORCrmcNpPTSq0LqL6i, div._1DK52RbaamLOWw5UPaht_S { - background: var(--mist) !important; - } - - /* gold award gradient */ - div.TmlaIdEplCzZ0F1aRGYQh[role=presentation] { - background: linear-gradient(188deg, #f9e2af1f 1.7%, #f9e2af00 46%, rgba(0, 0, 0, 0)) !important; - } - - /* image gallery next/previous buttons */ - a[title=Next] > i, a[title=Previous] > i { - background: var(--surface0) !important; - } - - /* image gallery image count */ - div._61i6grM3um1yuw4GrN97P { - background: var(--mist) !important; - color: var(--text) !important; - } - - /* comment search bar */ - input#comment_search-bar { - background: var(--base) !important; - } - - - /* MULTIREDDITS/CUSTOM FEEDS */ - - - /* delete custom feed button */ - .bX6SqXfzfxpv4GQbuIYVZ { - color: var(--red) !important; - } - - - /* TOOLTIPS */ - - - div.HQ2VJViRjokXpRbJzPvvc { - background: var(--mantle) !important; - color: var(--text) !important; - } - - div.HQ2VJViRjokXpRbJzPvvc::after { - border-top-color: var(--mantle) !important; - } -} diff --git a/styles/reddit/catppuccin.user.less b/styles/reddit/catppuccin.user.less new file mode 100644 index 0000000000..7abf875d4b --- /dev/null +++ b/styles/reddit/catppuccin.user.less @@ -0,0 +1,168 @@ +/* ==UserStyle== +@name Reddit Catppuccin +@namespace github.com/catppuccin/userstyles/styles/reddit +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/reddit +@version 2026.03.09.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/reddit/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Areddit +@description Soothing pastel theme for Reddit +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("reddit.com") { + :root:not(.theme-dark) .theme-rpl, + :root:not(.theme-dark).theme-rpl, + :root:not(.theme-dark) .theme-beta, + :root:not(.theme-dark).theme-beta, + .theme-light { + #catppuccin(@lightFlavor); + } + + :root:not(.theme-light) .theme-rpl, + :root:not(.theme-light).theme-rpl, + :root:not(.theme-light) .theme-beta, + :root:not(.theme-light).theme-beta, + .theme-dark { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --color-pizzaRed: @red !important; + --color-global-brand-orangered: @accent !important; + --color-global-focus: @surface1 !important; + --color-interactive-content-disabled: @subtext0 !important; + --color-interactive-background-disabled: fade(@surface2, 70%) !important; + --color-interactive-pressed: @surface2 !important; + --color-neutral-content: @text !important; + --color-neutral-content-disabled: @subtext0 !important; + --color-neutral-content-weak: @subtext0 !important; + --color-neutral-content-strong: @text !important; + --color-global-white: @crust !important; + --color-neutral-background: @base !important; + --color-neutral-background-selected: @surface0 !important; + --color-neutral-background-weak: @mantle !important; + --color-neutral-background-medium: @base !important; + --color-neutral-background-strong: @crust !important; + --color-neutral-background-hover: @surface0 !important; + --color-neutral-border: @surface0 !important; + --color-neutral-border-medium: @surface0 !important; + --color-neutral-border-weak: @surface0 !important; + --color-neutral-border-strong: @surface2 !important; + --color-primary: @accent !important; + --color-primary-hover: lighten(@accent, 10%) !important; + --color-primary-visited: @lavender !important; + --color-primary-background: @accent !important; + --color-primary-background-hover: darken(@accent, 5%) !important; + --color-primary-background-selected: darken(@accent, 5%) !important; + --color-primary-onBackground: @base !important; + --color-primary-onBackground-selected: @crust !important; + --color-secondary: @subtext0 !important; + --color-secondary-hover: @subtext1 !important; + --color-secondary-weak: @subtext0 !important; + --color-secondary-onBackground: @text !important; + --color-secondary-background: @mantle !important; + --color-secondary-background-hover: @surface1 !important; + --color-secondary-background-selected: @surface1 !important; + --color-secondary-plain: @subtext0 !important; + --color-secondary-plain-hover: @subtext1 !important; + --color-secondary-plain-weak: @subtext0 !important; + --color-danger-background: @red !important; + --color-danger-background-disabled: fade(@red, 20%) !important; + --color-danger-background-hover: fade(@red, 98%) !important; + --color-danger-onBackground: @text !important; + --color-danger-content: @red !important; + --color-danger-content-default: @crust; + --color-danger-content-hover: darken(@red, 2%) !important; + --color-success-content: @green !important; + --color-success-hover: darken(@green, 2%) !important; + --color-success-onBackground: @crust; + --color-success-background: @green !important; + --color-success-background-hover: darken(@green, 2%) !important; + --color-warning-content: @yellow !important; + --color-warning-content-hover: darken(@yellow, 2%) !important; + --color-warning-onBackground: @base !important; + --color-warning-background: @yellow !important; + --color-warning-background-hover: darken(@yellow, 2%) !important; + --color-upvote-content: @accent !important; + --color-upvote-disabled: @subtext0 !important; + --color-upvote-onBackground: @text !important; + --color-upvote-background: @base !important; + --color-upvote-background-hover: darken(@accent, 5%) !important; + --color-upvote-background-disabled: @base !important; + --color-downvote-content: @text !important; + --color-downvote-content-weak: @text !important; + --color-downvote-disabled: @subtext0 !important; + --color-downvote-onBackground: @text !important; + --color-downvote-background: @base !important; + --color-downvote-background-hover: darken(@blue, 5%) !important; + --color-downvote-background-disabled: @mantle !important; + --color-tone-1: @text !important; + --color-tone-2: @subtext0 !important; + --color-tone-3: @overlay2 !important; + --color-tone-4: @surface0 !important; + --color-tone-5: @surface1 !important; + --color-tone-6: @surface2 !important; + --color-tone-7: @base !important; + --color-avatar-gradient: @accent !important; + --color-transparent-background-hover: fade(@surface0, 30%) !important; + --color-opacity-50: fade(@base, 50%) !important; + --color-online: @accent !important; + --color-favorite: @accent !important; + --color-brand-background: @accent !important; + --color-brand-background-hover: darken(@accent, 5%) !important; + --color-brand-onBackground: @crust !important; + --color-global-orangered: @accent !important; + --color-action-upvote: @accent !important; + --color-action-downvote: @blue; + --color-banner-error-text: @base !important; + + --shreddit-color-wordmark: @accent; + #reddit-logo { + circle[fill="#FF4500"] { + fill: @accent !important; + } + path[fill="#FFF"] { + fill: @crust !important; + } + } + + /* Trending news carousel on https://www.reddit.com/r/popular/. */ + shreddit-gallery-carousel { + // Headline + .text-primary-onBackground { + color: @text; + } + + // r/... *and more* + .text-coolgray-350 { + color: @subtext1; + } + } + + /* Community themes - post header/metadata background and text. */ + #pdp-credit-bar { + --color-neutral-background: @base; + --color-neutral-content: @text; + --color-neutral-content-weak: @subtext0; + --color-primary-hover: lighten(@accent, 10%); + } + + reddit-header-large reddit-search-large::before, + reddit-header-large reddit-search-large::after { + background: + linear-gradient(@base, @base) padding-box, + linear-gradient(90deg, @accent, @accent) border-box; + } + } +} diff --git a/styles/regex101/README.md b/styles/regex101/README.md new file mode 100644 index 0000000000..a49f53e219 --- /dev/null +++ b/styles/regex101/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for regex101 + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/regex101/catppuccin.user.less b/styles/regex101/catppuccin.user.less new file mode 100644 index 0000000000..d027e68157 --- /dev/null +++ b/styles/regex101/catppuccin.user.less @@ -0,0 +1,164 @@ +/* ==UserStyle== +@name regex101 Catppuccin +@namespace github.com/catppuccin/userstyles/styles/regex101 +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/regex101 +@version 2026.01.10 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/regex101/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aregex101 +@description Soothing pastel theme for regex101 +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("regex101.com") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + + :root { + &[data-theme="dark"] { + #catppuccin(@darkFlavor); + } + &[data-theme="light"] { + #catppuccin(@lightFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --primary-color: @crust; + --primary-contrast-color: @accent; + + --app-color: @text; + --app-color-metadata: @subtext0; + --app-contrast-color: @subtext1; + + --link-color: @accent; + + --highlight-bg: @green; + --spinner-bg: @overlay0; + --bg-0: @mantle; + --bg-1: @base; + --content-bg: @surface0; + + --content-border-color: @surface1; + --sub-content-bg: @surface1; + + --info-color: @subtext0; + --success-color: @green; + --warning-color: @yellow; + --danger-color: @red; + + --misc-button-icon-color: @subtext1; + --misc-button-bg: @surface0; + --misc-button-hover-bg: @surface1; + --misc-button-active-bg: @surface2; + --misc-button-active-color: @base; + --misc-button-highlight-bg: fade(@green, 40%); + + --editor-active-bg: @overlay2; + --library-active-bg: @yellow; + --account-active-bg: @green; + --quiz-active-bg: @teal; + --settings-active-bg: @pink; + + #hsl-variables(--button-bg, @surface0); + #hsl-variables(--button-ok-bg, @mantle); + #hsl-variables(--button-danger-bg, fade(@red, 30%)); + + --button-hover-l: lightness(@surface1); + --backdrop-bg: fade(@overlay0, 30%); + + --input-bg: @base; + --input-disabled-bg: @mantle; + --input-border-color: @surface0; + --input-focused-border-color: @surface0; + + --label-color: @subtext1; + --tooltip-color: @crust; + --tooltip-bg: @subtext0; + --version-btn-bg: fade(@green, 30%); + --match-indicator-no-match: fade(@blue, 30%); + --match-indicator-match-bg: fade(@green, 30%); + --match-indicator-error-bg: fade(@red, 30%); + + --debugger-backtrack-bg: fade(@red, 30%); + --debugger-regex-bg: fade(@green, 30%); + --debugger-slider-bg: @surface2; + + --header-discord-color: @lavender; + --header-twitter-color: @text; + --header-donate-color: @yellow; + --header-contact-color: @green; + --header-feedback-color: @maroon; + --header-wiki-color: @teal; + --header-whatsnew-color: @yellow; + --header-sponsor-color: @pink; + --header-paypal-color: @blue; + --header-info-color: @sky; + --header-social-color: @green; + --header-stripe-color: @blue; + + --starred-library-entry-bg: fade(@yellow, 10%); + --cm-whitespace-color: @overlay1; + --cm-selected-bg: fade(@accent, 30%); + --cm-inactive-selected-bg: fade(@accent, 30%); + + @match-group-colors: @blue, @green, @yellow, @mauve, @pink, @red, @green; + each( + @match-group-colors, + { + @i: @index - 1; + --match-group-@{i}: @value; + --match-group-@{i}-alt: darken(@value, 10%); + } + ); + + --match-highlight-color: fade(@yellow, 90%); + + --explanation-keyword-color: @green; + --explanation-token-bg: fade(@yellow, 80%); + --explanation-token-color: @base; + --explanation-plain-text-bg: fade(@surface2, 80%); + --explanation-flag-color: @mauve; + + --token-quote-color: @mauve; + --token-quote-bg: none; + --token-escaped-string-color: var(--app-color); + --token-escaped-string-bg: fade(@overlay1, 30%); + #accent-token(meta, @blue); + #accent-token(char-class, @rosewater); + #accent-token(char-class-meta, @flamingo); + #accent-token(subpattern-reference, @mauve); + #accent-token(group-0, @green); + #accent-token(group-1, @yellow); + #accent-token(group-2, @peach); + #accent-token(group-3, @maroon); + #accent-token(comment, transparent); + #accent-token(error, @red); + + #accent-token(@id, @color) { + --token-@{id}-bg: @color; + --token-@{id}-color: @base; + } + + #hsl-variables(@variable, @color) { + @{variable}-h: hue(@color); + @{variable}-s: saturation(@color); + @{variable}-l: lightness(@color); + } + + // Canvas is pulling Catppuccin colours from CSS variables, just needs fading for contrast + canvas { + filter: opacity(0.3); + } + } +} diff --git a/styles/rentry.co/README.md b/styles/rentry.co/README.md new file mode 100644 index 0000000000..45f4c14516 --- /dev/null +++ b/styles/rentry.co/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Rentry.co + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [thismoon](https://github.com/thismoon) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/rentry.co/catppuccin.user.less b/styles/rentry.co/catppuccin.user.less new file mode 100644 index 0000000000..30e459d503 --- /dev/null +++ b/styles/rentry.co/catppuccin.user.less @@ -0,0 +1,389 @@ +/* ==UserStyle== +@name Rentry.co Catppuccin +@namespace github.com/catppuccin/userstyles/styles/rentry.co +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/rentry.co +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/rentry.co/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Arentry.co +@description Soothing pastel theme for Rentry.co +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("rentry.org"), domain("rentry.co") { + @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); + + .dark-mode { + #catppuccin(@darkFlavor); + #darkModeBtn::before { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + :root:not(.dark-mode) { + #catppuccin(@lightFlavor); + #darkModeBtn::before { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + body { + background: @crust; + color: @text; + } + /* Editor and preview */ + .cm-s-default, + .markdownx-preview, + .entry-text, + .tab-content { + background: @base !important; + color: @text !important; + } + + /* Tab navigation */ + .nav-link { + background: @mantle; + color: @overlay0 !important; + + &.active { + background: @base !important; + color: @text !important; + } + } + .form-control, + textarea { + background: @base !important; + color: @text !important; + } + .input-success { + box-shadow: inset 4px 0 @green !important; + } + .input-error { + &, + + .CodeMirror-wrap { + box-shadow: @red 4px 0 inset !important; + } + } + .input-warning { + box-shadow: @yellow 4px 0 inset !important; + } + .btn { + background: @base !important; + color: @text !important; + &:hover { + background: @surface0 !important; + color: @text !important; + } + } + .btn-success { + &, + &.btn, + &:hover { + color: @green !important; + } + &#submitButton { + background: @base !important; + &:hover { + background: @surface0 !important; + } + } + } + .btn-danger { + &, + &.btn, + &:hover { + color: @red !important; + } + } + .clipboard { + color: @text; + background: none; + } + #progressBar { + background-color: @blue !important; + } + .full-contrast:not(.active) path { + fill: @overlay2 !important; + } + .full-contrast.active path { + fill: @peach !important; + } + .edit-code { + background: @mantle; + color: @text !important; + } + .cb-tooltiptext { + color: @text !important; + background: @surface0 !important; + } + .cb-tooltiptext-bottom::after { + border-color: transparent transparent @surface0; + } + .headerlink { + color: @overlay1 !important; + } + #submitButton { + background: @mantle !important; + } + // claim-guide page + .color-change { + &[style="color:grey"] { + color: @overlay2 !important; + } + &[style="color:#039205"] { + color: @green !important; + } + } + // delete modal + .modal-content { + background: @crust; + color: @text; + } + .modal-body { + color: @overlay2; + } + .modal-header { + color: @text !important; + } + .modal-header, + .modal-footer { + border-color: @surface1 !important; + } + #deleteButton { + color: @red !important; + } + // footer + a { + color: @blue; + + &:hover { + color: @sky !important; + } + } + .text-muted { + color: @overlay2 !important; + } + .text-primary { + color: @blue !important; + } + .text-success { + color: @green !important; + } + .text-warning, + .text-warning-darker { + color: @yellow !important; + } + .text-danger { + color: @red !important; + } + // editor + .CodeMirror-line::selection, + .CodeMirror-line > span::selection, + .CodeMirror-line > span > span::selection { + background-color: fade(@overlay2, 25%); + } + .cm-s-default { + .cm-formatting-admonition { + color: @yellow; + } + .cm-mark { + color: @yellow; + } + .cm-link { + color: @lavender; + } + .cm-url { + color: @blue; + } + .cm-formatting-toc { + color: @mauve; + } + .cm-variable-2 { + color: @green; + } + .cm-keyword { + color: @pink; + } + .cm-meta { + color: @subtext0; + } + .cm-comment { + color: @pink; + } + .cm-hr { + color: @surface2; + } + .cm-tag { + color: @blue; + } + .cm-header { + color: @text; + } + .cm-quote { + color: @green; + border-color: @green; + } + } + blockquote { + color: @green; + border-color: @green; + } + mark { + background: fade(@yellow, 25%); + color: @text; + } + .spoiler { + color: @text; + background: @text; + } + .spoiler:hover { + background: none; + } + code { + color: @red !important; + background: fade(@red, 10%) !important; + } + hr { + border-top-color: @surface1 !important; + } + .admonition { + &.info, + &.hint, + &.tip { + color: @blue; + background: fade(@blue, 25%); + > .admonition-title::before { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + &.note, + &.important { + color: @green; + background-color: fade(@green, 25%); + &, + .admonition.greentext { + > .admonition-title::before { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + } + &.greentext { + color: @green; + background-color: fade(@yellow, 25%); + } + &.warning, + &.caution, + &.attention { + color: @yellow; + background-color: fade(@yellow, 25%); + > .admonition-title::before { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + &.danger, + &.error { + color: @red; + background-color: fade(@red, 25%); + > .admonition-title::before { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + .admonition-title::before, + &.warning > .admonition-title::before, + &.danger > .admonition-title::before { + filter: none !important; + } + } + // code + .highlighttable { + border-left-color: @surface0 !important; + } + .linenodiv > pre > .normal > a:not(:hover), + .linenodiv > pre > a:not(:hover) { + color: @overlay2 !important; + } + .entry-text pre, + .markdownx-preview pre, + code { + color: @red !important; + } + .highlight { + pre { + color: @text !important; + } + border-color: @surface0 !important; + } + /* tables */ + // help tab/page table + .mtable > tbody > tr:nth-child(even) { + background-color: @mantle !important; + } + // markdown tables + .ntable th { + background-color: @surface1 !important; + border-color: @surface2 !important; + color: @text; + } + .ntable tr:nth-child(even) { + background-color: @surface0 !important; + } + } +} + +@-moz-document regexp("https?://rentry\\.(co|org)/.+/(raw|exists)"), + url-prefix("https://rentry.co/static/"), + domain("export3.rentry.co") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + + // TODO: Can we use defaults? Currently doesn't have input/textarea placeholder styling. + color-scheme: if(@flavor = latte, light, dark); + + ::selection { + background-color: fade(@accent, 30%); + } + + body { + color: @text !important; + background: @base !important; + } + } +} diff --git a/styles/scalar/README.md b/styles/scalar/README.md new file mode 100644 index 0000000000..7af3057250 --- /dev/null +++ b/styles/scalar/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Scalar + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [incognitotgt](https://github.com/incognitotgt) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/scalar/catppuccin.user.less b/styles/scalar/catppuccin.user.less new file mode 100644 index 0000000000..a15d0777df --- /dev/null +++ b/styles/scalar/catppuccin.user.less @@ -0,0 +1,85 @@ +/* ==UserStyle== +@name Scalar Catppuccin +@namespace github.com/catppuccin/userstyles/styles/scalar +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/scalar +@version 2026.01.20 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/scalar/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ascalar +@description Soothing pastel theme for Scalar +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("scalar.com") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + code.hljs { + background: none !important; + } + + .light-mode { + #catppuccin(@lightFlavor); + } + + .dark-mode { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --scalar-color-1: @text; + --scalar-color-2: @subtext1; + --scalar-color-3: @subtext0; + --scalar-color-accent: @accent; + --scalar-background-1: @base; + --scalar-background-2: @surface0; + --scalar-background-3: @surface1; + --scalar-background-accent: fade(@accent, 12%); + --scalar-border-color: @surface1; + --scalar-color-green: @green; + --scalar-color-red: @red; + --scalar-color-yellow: @yellow; + --scalar-color-blue: @blue; + --scalar-color-orange: @peach; + --scalar-color-purple: @mauve; + --scalar-selection-1: fade(@accent, 30%); + --scalar-button-1: @accent; + --scalar-button-1-hover: darken(@accent, 5%); + --scalar-button-1-color: @base; + + background-color: @base; + + .sidebar { + --scalar-sidebar-background-1: @mantle; + --scalar-sidebar-item-hover-background: @surface0; + --scalar-sidebar-item-active-background: fade(@accent, 10%); + --scalar-sidebar-color-active: @accent; + } + + .scalar-code-block, .t-editor__code { + background-color: @mantle; + } + + .brightness-lifted { + filter: none; // remove elevated filter on dropdown modal backgrounds + } + + .text-white { + color: @base; // danger (delete) button text + } + + // https://scalar.com/ + .logo { + filter: @text-filter; + } + } +} diff --git a/styles/searchix/README.md b/styles/searchix/README.md new file mode 100644 index 0000000000..cfbe22219f --- /dev/null +++ b/styles/searchix/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Searchix + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [koibtw](https://github.com/koibtw) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/searchix/catppuccin.user.less b/styles/searchix/catppuccin.user.less new file mode 100644 index 0000000000..cfca1c9b6e --- /dev/null +++ b/styles/searchix/catppuccin.user.less @@ -0,0 +1,50 @@ +/* ==UserStyle== +@name Searchix Catppuccin +@namespace github.com/catppuccin/userstyles/styles/searchix +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/searchix +@version 2025.12.05 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/searchix/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Asearchix +@description Soothing pastel theme for Searchix +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("searchix.ovh") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --bg: @base; + --accent-bg: @mantle; + --text: @text; + --text-light: @subtext0; + --accent: @accent; + --accent-hover: @accent; + --accent-error: fade(@red, 20%); + --border: @overlay0; + --code: @lavender; + --preformatted: @text; + --disabled: @crust; + + dialog { + color: var(--text); + } + } +} diff --git a/styles/searxng/README.md b/styles/searxng/README.md index a816fe1955..f57051ef06 100644 --- a/styles/searxng/README.md +++ b/styles/searxng/README.md @@ -10,39 +10,18 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +## 💝 Current Maintainers +- [Sekki21956](https://github.com/Sekki21956) +- [ryanccn](https://github.com/ryanccn) -## 💝 Current Maintainer(s) -- [Sekki](https://github.com/Sekki21956) -- [Ryan Cao](https://github.com/ryanccn)   diff --git a/styles/searxng/assets/catwalk.webp b/styles/searxng/assets/catwalk.webp deleted file mode 100644 index 04b3afeac1..0000000000 --- a/styles/searxng/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6aec05055ae2eba05f78a53e08c35d37d9c7af5f0cfb5f29e7a69aa4bb847949 -size 68342 diff --git a/styles/searxng/assets/frappe.webp b/styles/searxng/assets/frappe.webp deleted file mode 100644 index cd111564d1..0000000000 --- a/styles/searxng/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2a8be6361783b7893205d936f5f9f482810c3260bb66f3551fcc4303d59ac667 -size 14030 diff --git a/styles/searxng/assets/latte.webp b/styles/searxng/assets/latte.webp deleted file mode 100644 index 8635590103..0000000000 --- a/styles/searxng/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:65c367c0de024e6d058e0f5f039b6b3760799f843682d1a28f53d9dd7990e38e -size 14628 diff --git a/styles/searxng/assets/macchiato.webp b/styles/searxng/assets/macchiato.webp deleted file mode 100644 index ae7cbb5339..0000000000 --- a/styles/searxng/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b530f2d6defe40ce31a5747845c2256bf8d7b4707eea05e113509af5bbcfd8ca -size 14602 diff --git a/styles/searxng/assets/mocha.webp b/styles/searxng/assets/mocha.webp deleted file mode 100644 index 58b4dd3683..0000000000 --- a/styles/searxng/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:371fbcff2c2dfaf2d681b93d80124b7106c6016f80d10d6f14ab6b1173b14a3f -size 15042 diff --git a/styles/searxng/catppuccin.user.css b/styles/searxng/catppuccin.user.css deleted file mode 100644 index 4ef4fb0c92..0000000000 --- a/styles/searxng/catppuccin.user.css +++ /dev/null @@ -1,407 +0,0 @@ -/* ==UserStyle== -@name SearXNG Catppuccin -@namespace github.com/catppuccin/userstyles/styles/searxng -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/searxng -@version 0.3.0 -@description Soothing pastel theme for SearXNG -@author Catppuccin -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/searxng/catppuccin.user.css -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Grey"] -@var checkbox additions "Additional Tweaks" 0 -==/UserStyle== */ -@-moz-document url-prefix("http://ransack.i2p/"), -url-prefix("https://darmarit.org/searx/"), -url-prefix("https://de.xcxc.ml/"), -url-prefix("https://dynabyte.ca/"), -url-prefix("https://etsi.me/"), -url-prefix("https://icanfindit.online/"), -url-prefix("https://jackgoss.xyz/"), -url-prefix("https://jsearch.pw/"), -url-prefix("https://metasearch.nl/"), -url-prefix("https://northboot.xyz/"), -url-prefix("https://notsearch.uk/"), -url-prefix("https://opnxng.com/"), -url-prefix("https://paulgo.io/"), -url-prefix("https://priv.au/"), -url-prefix("https://privatus.live/"), -url-prefix("https://s.frlt.one/"), -url-prefix("https://s.zhaocloud.net/"), -url-prefix("https://saber.tk/"), -url-prefix("https://search.0relay.com/"), -url-prefix("https://search.affusio.com/"), -url-prefix("https://search.bus-hit.me/"), -url-prefix("https://search.callmeecho.dev/"), -url-prefix("https://search.chemicals-in-the-water.eu/"), -url-prefix("https://search.cronobox.one/"), -url-prefix("https://search.disroot.org/"), -url-prefix("https://search.ethibox.fr/"), -url-prefix("https://search.gcomm.ch/"), -url-prefix("https://search.kiwitalk.de/"), -url-prefix("https://search.mdosch.de/"), -url-prefix("https://search.mpx.wtf/"), -url-prefix("https://search.neet.works/"), -url-prefix("https://search.ononoki.org/"), -url-prefix("https://search.privacyguides.net/"), -url-prefix("https://search.projectsegfau.lt/"), -url-prefix("https://search.rabbit-company.com/"), -url-prefix("https://search.rhscze.cf/"), -url-prefix("https://search.rowie.at/"), -url-prefix("https://search.sapti.me/"), -url-prefix("https://search.serginho.dev/"), -url-prefix("https://search.smnz.de/"), -url-prefix("https://search.snopyta.org/"), -url-prefix("https://search.stinpriza.org/"), -url-prefix("https://search.teamriverbubbles.com/"), -url-prefix("https://search.trom.tf/"), -url-prefix("https://search.unlocked.link/"), -url-prefix("https://search.uspersec.com/"), -url-prefix("https://search.vidhukant.xyz/"), -url-prefix("https://search.zzls.xyz/"), -url-prefix("https://searx.baczek.me/"), -url-prefix("https://searx.be/"), -url-prefix("https://searx.becomesovran.com/"), -url-prefix("https://searx.bissisoft.com/"), -url-prefix("https://searx.chocoflan.net/"), -url-prefix("https://searx.divided-by-zero.eu/"), -url-prefix("https://searx.dresden.network/"), -url-prefix("https://searx.ebnar.xyz/"), -url-prefix("https://searx.ericaftereric.top/"), -url-prefix("https://searx.esmailelbob.xyz/"), -url-prefix("https://searx.fi/"), -url-prefix("https://searx.fmac.xyz/"), -url-prefix("https://searx.fossencdi.org/"), -url-prefix("https://searx.gnous.eu/"), -url-prefix("https://searx.gnu.style/"), -url-prefix("https://searx.kujonello.cf/"), -url-prefix("https://searx.mastodontech.de/"), -url-prefix("https://searx.mha.fi/"), -url-prefix("https://searx.mistli.net/"), -url-prefix("https://searx.mxchange.org/"), -url-prefix("https://searx.nakhan.net/"), -url-prefix("https://searx.namejeff.xyz/"), -url-prefix("https://searx.netzspielplatz.de/"), -url-prefix("https://searx.nixnet.services/"), -url-prefix("https://searx.org/"), -url-prefix("https://searx.orion-hub.fr/"), -url-prefix("https://searx.priv.pw/"), -url-prefix("https://searx.prvcy.eu/"), -url-prefix("https://searx.rimkus.it/"), -url-prefix("https://searx.roflcopter.fr/"), -url-prefix("https://searx.ru/"), -url-prefix("https://searx.run/"), -url-prefix("https://searx.semipvt.com/"), -url-prefix("https://searx.sethforprivacy.com/"), -url-prefix("https://searx.sev.monster/"), -url-prefix("https://searx.slipfox.xyz/searx/"), -url-prefix("https://searx.sp-codes.de/"), -url-prefix("https://searx.stuehieyr.com/"), -url-prefix("https://searx.tiekoetter.com/"), -url-prefix("https://searx.tuxcloud.net/"), -url-prefix("https://searx.tyil.nl/"), -url-prefix("https://searx.vanwa.tech/"), -url-prefix("https://searx.webheberg.info/"), -url-prefix("https://searx.xyz/"), -url-prefix("https://searx.zapashcanon.fr/"), -url-prefix("https://searx.zcyph.cc/"), -url-prefix("https://searxng.ir/"), -url-prefix("https://searxng.nicfab.eu/"), -url-prefix("https://searxng.zackptg5.com/"), -url-prefix("https://serx.ml/"), -url-prefix("https://sh0.it/"), -url-prefix("https://soek.allesbeste.com/"), -url-prefix("https://spot.ecloud.global/"), -url-prefix("https://srx.cosmohub.io/"), -url-prefix("https://searx.oakleycord.dev/"), -url-prefix("https://suche.dasnetzundich.de/"), -url-prefix("https://suche.tromdienste.de/"), -url-prefix("https://suche.uferwerk.org/"), -url-prefix("https://swag.pw/"), -url-prefix("https://sx.catgirl.cloud/"), -url-prefix("https://timdor.noip.me/searx/"), -url-prefix("https://trydex.tk/searxng/"), -url-prefix("https://www.gruble.de/"), -url-prefix("https://www.webrats.xyz/"), -url-prefix("https://xcxc.ml/"), -url-prefix("https://xo.wtf/") -{ - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - :root.theme-auto { - #catppuccin(@lightFlavor, @accentColor); - } - - @media (prefers-color-scheme: dark) { - :root.theme-auto { - #catppuccin(@darkFlavor, @accentColor); - } - } - - :root.theme-dark { - #catppuccin(@darkFlavor, @accentColor); - } - :root.theme-light { - #catppuccin(@lightFlavor, @accentColor); - } - - #catppuccin(@lookup, @accent-color) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent: @catppuccin[@@lookup][@@accent-color]; - - & { - --color-base-font: @text; - --color-base-background: @base; - --color-base-background-mobile: @base; - --color-url-font: @accent; - --color-url-visited-font: @accent; - --color-header-background: @mantle; - --color-header-border: @mantle; - --color-footer-background: @mantle; - --color-footer-border: @mantle; - --color-sidebar-border: @base; - --color-sidebar-font: @text; - --color-sidebar-background: @base; - --color-backtotop-font: @subtext1; - --color-backtotop-border: @surface0; - --color-backtotop-background: @surface0; - --color-btn-background: @accent; - --color-btn-font: @base; - --color-show-btn-background: @accent; - --color-show-btn-font: @base; - --color-search-border: @surface0; - --color-search-shadow: 0 2px 8px @crust; - --color-search-background: @surface0; - --color-search-font: @text; - --color-search-background-hover: @accent; - --color-error: @red; - --color-error-background: @surface0; - --color-warning: @yellow; - --color-warning-background: @surface0; - --color-success: @green; - --color-success-background: @surface0; - --color-categories-item-selected-font: @text; - --color-categories-item-border-selected: @accent; - --color-autocomplete-font: @subtext1; - --color-autocomplete-border: @surface0; - --color-autocomplete-shadow: 0 2px 8px @crust; - --color-autocomplete-background: @surface0; - --color-autocomplete-background-hover: @surface1; - --color-answer-font: @text; - --color-answer-background: @mantle; - --color-result-background: @mantle; - --color-result-border: @base; - --color-result-url-font: @subtext1; - --color-result-vim-selected: @surface0; - --color-result-vim-arrow: @accent; - --color-result-description-highlight-font: @text; - --color-result-link-font: @accent; - --color-result-link-font-highlight: @accent; - --color-result-link-visited-font: @accent; - --color-result-publishdate-font: @surface2; - --color-result-engines-font: @surface2; - --color-result-search-url-border: @surface2; - --color-result-search-url-font: @text; - --color-result-detail-font: @text; - --color-result-detail-label-font: @surface1; - --color-result-detail-background: @base; - --color-result-detail-hr: @base; - --color-result-detail-link: @accent; - --color-result-detail-loader-border: rgba(255, 255, 255, 0.2); - --color-result-detail-loader-borderleft: @crust; - --color-result-image-span-font: @text; - --color-result-image-span-font-selected: @base; - --color-result-image-background: @mantle; - --color-settings-tr-hover: @surface0; - --color-settings-engine-description-font: @text; - --color-settings-engine-group-background: @surface0; - --color-toolkit-badge-font: @text; - --color-toolkit-badge-background: @surface0; - --color-toolkit-kbd-font: @text; - --color-toolkit-kbd-background: @mantle; - --color-toolkit-dialog-border: @mantle; - --color-toolkit-dialog-background: @mantle; - --color-toolkit-tabs-label-border: @base; - --color-toolkit-tabs-section-border: @base; - --color-toolkit-select-background: @surface0; - --color-toolkit-select-border: @surface0; - --color-toolkit-select-background-hover: @surface1; - --color-toolkit-input-text-font: @text; - --color-toolkit-checkbox-onoff-off-background: @surface0; - --color-toolkit-checkbox-onoff-on-background: @surface0; - --color-toolkit-checkbox-onoff-on-mark-background: @green; - --color-toolkit-checkbox-onoff-on-mark-color: @mantle; - --color-toolkit-checkbox-onoff-off-mark-background: @red; - --color-toolkit-checkbox-onoff-off-mark-color: @mantle; - --color-toolkit-checkbox-label-background: @base; - --color-toolkit-checkbox-label-border: @mantle; - --color-toolkit-checkbox-input-border: @accent; - --color-toolkit-engine-tooltip-border: @surface0; - --color-toolkit-engine-tooltip-background: @surface0; - --color-toolkit-loader-border: rgba(255, 255, 255, 0.2); - --color-toolkit-loader-borderleft: @crust; - --color-doc-code: @rosewater; - --color-doc-code-background: @mantle; - } - - #search_logo svg :not([fill="none"]) { - fill: @accent; - } - #search_logo svg :not([stroke="none"]) { - stroke: @accent; - } - - if (additions) { - article.result { - background-color: var(--color-result-background); - border-radius: 0.75em; - padding: 0.75em; - margin: 0.5em; - } - article.category-images { - padding-bottom: 4em; - } - } - } -} diff --git a/styles/searxng/catppuccin.user.less b/styles/searxng/catppuccin.user.less new file mode 100644 index 0000000000..18afa9b6d8 --- /dev/null +++ b/styles/searxng/catppuccin.user.less @@ -0,0 +1,160 @@ +/* ==UserStyle== +@name SearXNG Catppuccin +@namespace github.com/catppuccin/userstyles/styles/searxng +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/searxng +@version 2026.07.12 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/searxng/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Asearxng +@description Soothing pastel theme for SearXNG +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] + +@var checkbox additions "Additional Tweaks" 0 +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +/* Domains picked from https://searx.space/. */ +@-moz-document domain("search.bus-hit.me"), domain("search.inetol.net") { + :root.theme-auto { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + :root.theme-dark { + #catppuccin(@darkFlavor); + } + :root.theme-light { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --color-base-font: @text; + --color-base-background: @base; + --color-base-background-mobile: @base; + --color-url-font: @blue; + --color-url-visited-font: @lavender; + --color-header-background: @mantle; + --color-header-border: @mantle; + --color-footer-background: @mantle; + --color-footer-border: @mantle; + --color-sidebar-border: @base; + --color-sidebar-font: @text; + --color-sidebar-background: @base; + --color-backtotop-font: @subtext1; + --color-backtotop-border: @surface0; + --color-backtotop-background: @surface0; + --color-btn-background: @accent; + --color-btn-font: @base; + --color-show-btn-background: @accent; + --color-show-btn-font: @base; + --color-search-border: @surface0; + --color-search-shadow: 0 2px 8px @crust; + --color-search-background: @surface0; + --color-search-font: @text; + --color-search-background-hover: @accent; + --color-error: @red; + --color-error-background: @surface0; + --color-warning: @yellow; + --color-warning-background: @surface0; + --color-success: @green; + --color-success-background: @surface0; + --color-categories-item-selected-font: @text; + --color-categories-item-border-selected: @accent; + --color-autocomplete-font: @subtext1; + --color-autocomplete-border: @surface0; + --color-autocomplete-shadow: 0 2px 8px @crust; + --color-autocomplete-background: @surface0; + --color-autocomplete-background-hover: @surface1; + --color-answer-font: @text; + --color-answer-background: @mantle; + --color-result-background: @mantle; + --color-result-border: @base; + --color-result-url-font: @subtext1; + --color-result-vim-selected: @surface0; + --color-result-vim-arrow: @accent; + --color-result-description-highlight-font: @text; + --color-result-link-font: @blue; + --color-result-link-font-highlight: @blue; + --color-result-link-visited-font: @lavender; + --color-result-publishdate-font: @surface2; + --color-result-engines-font: @surface2; + --color-result-search-url-border: @surface2; + --color-result-search-url-font: @text; + --color-result-detail-font: @text; + --color-result-detail-label-font: @subtext0; + --color-result-detail-background: @base; + --color-result-detail-hr: @base; + --color-result-detail-link: @blue; + --color-result-detail-loader-border: rgba(255, 255, 255, 0.2); + --color-result-detail-loader-borderleft: @crust; + --color-result-image-span-font: @text; + --color-result-image-span-font-selected: @base; + --color-result-image-background: @mantle; + --color-settings-tr-hover: @surface0; + --color-settings-engine-description-font: @text; + --color-settings-engine-group-background: @surface0; + --color-toolkit-badge-font: @text; + --color-toolkit-badge-background: @surface0; + --color-toolkit-kbd-font: @text; + --color-toolkit-kbd-background: @mantle; + --color-toolkit-dialog-border: @mantle; + --color-toolkit-dialog-background: @mantle; + --color-toolkit-tabs-label-border: @base; + --color-toolkit-tabs-section-border: @base; + --color-toolkit-select-background: @surface0; + --color-toolkit-select-border: @surface0; + --color-toolkit-select-background-hover: @surface1; + --color-toolkit-input-text-font: @text; + --color-toolkit-checkbox-onoff-off-background: @surface0; + --color-toolkit-checkbox-onoff-on-background: @surface0; + --color-toolkit-checkbox-onoff-on-mark-background: @green; + --color-toolkit-checkbox-onoff-on-mark-color: @mantle; + --color-toolkit-checkbox-onoff-off-mark-background: @red; + --color-toolkit-checkbox-onoff-off-mark-color: @mantle; + --color-toolkit-checkbox-label-background: @base; + --color-toolkit-checkbox-label-border: @mantle; + --color-toolkit-checkbox-input-border: @accent; + --color-toolkit-engine-tooltip-border: @surface0; + --color-toolkit-engine-tooltip-background: @surface0; + --color-toolkit-loader-border: rgba(255, 255, 255, 0.2); + --color-toolkit-loader-borderleft: @crust; + --color-doc-code: @rosewater; + --color-doc-code-background: @mantle; + + #search_logo svg :not([fill="none"]) { + fill: @accent; + } + #search_logo svg :not([stroke="none"]) { + stroke: @accent; + } + + .index .title { + filter: @accent-filter; + } + + & when (@additions = 1) { + article.result { + background-color: var(--color-result-background); + border-radius: 0.75em; + padding: 0.75em; + margin: 0.5em; + } + article.category-images { + padding-bottom: 4em; + } + } + } +} diff --git a/styles/seventv/README.md b/styles/seventv/README.md new file mode 100644 index 0000000000..3593a6cd13 --- /dev/null +++ b/styles/seventv/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for 7TV + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [mxgic1337](https://github.com/mxgic1337) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/seventv/catppuccin.user.less b/styles/seventv/catppuccin.user.less new file mode 100644 index 0000000000..83d65b4962 --- /dev/null +++ b/styles/seventv/catppuccin.user.less @@ -0,0 +1,514 @@ +/* ==UserStyle== +@name 7TV Catppuccin +@namespace github.com/catppuccin/userstyles/styles/seventv +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/seventv +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/seventv/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aseventv +@description Soothing pastel theme for 7TV +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("7tv.app") { + .light-theme { + #catppuccin(@lightFlavor); + } + .dark-theme { + #catppuccin(@darkFlavor); + } + + .system-theme { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + background-color: @base; + + --secondary: @surface0; + --secondary-text: @text; + --secondary-hover: @surface0; + --secondary-active: @surface0; + --secondary-disabled: @crust; + --secondary-border: transparent; + --primary: @accent; + --primary-text: @crust; + --primary-hover: darken(@accent, 5%); + --primary-active: darken(@accent, 5%); + --primary-disabled: @subtext0; + --primary-border: transparent; + --bg-dark: @crust; + --bg-medium: @mantle; + --bg-light: @base; + --text: @text; + --text-light: @subtext0; + --layout-border: transparent; + --border-active: @base; + --store: @mauve; + --preview: @mantle; + --danger: @peach; + --approve: @green; + --rename: @sapphire; + --staff: @red; + --staff-bg: fade(@red, 20%); + --admin-merge: @mauve; + --admin-unlist: @peach; + + .flag { + &[style*="#57ab5a"] { + color: @green !important; + background-color: fade(@green, 20%) !important; + } + /* Emote is in selected emote set */ + &[style*="#529bf5"] { + color: @accent !important; + background-color: fade(@accent, 20%) !important; + } + /* Emote is unlisted */ + &[style*="#eb3d26"] { + color: @red !important; + &[style*="background-color"] { + background-color: fade(@red, 20%) !important; + } + } + /* Emote is trending */ + &[style*="#e0823d"] { + color: @peach !important; + &[style*="background-color"] { + background-color: fade(@peach, 20%) !important; + } + } + /* Emote is overlaying */ + &[style*="#fc8dc7"] { + color: @pink !important; + &[style*="background-color"] { + background-color: fade(@pink, 20%) !important; + } + } + /* Personal emote set */ + &[style*="#b083f0"] { + color: @mauve !important; + } + } + + .badge { + color: @base; + } + + .emote, + .emote-set { + /* Emote is in selected emote set */ + &[style*="--highlight-active: #529bf5"] { + --highlight: fade(@accent, 80%) !important; + --highlight-active: @accent !important; + &.emote-set .name { + color: @accent !important; + } + } + + /* Emote is unlisted */ + &[style*="--highlight-active: #eb3d26"] { + --highlight: fade(@red, 80%) !important; + --highlight-active: @red !important; + } + + /* Emote is trending */ + &[style*="--highlight-active: #e0823d"] { + --highlight: fade(@peach, 80%) !important; + --highlight-active: @peach !important; + } + + /* Emote is overlaying */ + &[style*="--highlight-active: #fc8dc7"] { + --highlight: fade(@pink, 80%) !important; + --highlight-active: @pink !important; + } + + /* Emote set is a personal emote set */ + &.emote-set[style*="--highlight-active: #b083f0"] { + --highlight: fade(@mauve, 80%) !important; + --highlight-active: @mauve !important; + &.emote-set .name { + color: @mauve !important; + } + } + + /* Emote set is a special emote set */ + &.emote-set[style*="--highlight-active: #fcc200"] { + --highlight: fade(@yellow, 80%) !important; + --highlight-active: @yellow !important; + &.emote-set .name, + &.emote-set .flag { + color: @yellow !important; + } + } + } + + img.image, + .profile-picture, + .profile-name .name, + .user, + .user-link, + .username .name, + .role > span, + .side-bar .name, + .roles > span { + /* Admin */ + &[style*="255, 70, 70"] { + &, + span, + img { + color: @red !important; + border-color: @red !important; + } + } + + /* Moderator */ + &[style*="50, 168, 82"] { + &, + span, + img { + color: @green !important; + border-color: @green !important; + } + } + + &[style*="23, 235, 182"], + &[style*="177, 235, 52"], + &[style*="68, 194, 135"] { + &, + span { + color: @teal !important; + border-color: @teal !important; + } + } + /* Event coordinator */ + &[style*="182, 56, 181"] { + &, + span, + img { + color: @pink !important; + border-color: @pink !important; + } + } + + /* Verified */ + &[style*="145, 70, 255"] { + &, + span, + img { + color: @mauve !important; + border-color: @mauve !important; + } + } + /* Subscriber */ + &[style*="255, 170, 0"] { + &, + span, + img { + color: @yellow !important; + border-color: @yellow !important; + } + } + } + + .hero { + svg { + color: @text !important; + } + + color: @text; + .for-all { + -webkit-text-stroke-color: @text !important; + } + + &::before { + background: + radial-gradient( + 180% 80% at 0% 100%, + @text 0%, + @blue 25%, + fade(@mauve, 90%) 56%, + fade(@mauve, 50%) 79%, + transparent 100% + ), + @crust; + } + } + + /* Sub progress bar */ + + .progress-circle { + #progress { + stroke: @accent; + } + } + + .subgrid .badge { + color: @subtext0 !important; + } + + /* Subscribe gradients */ + .gradient { + color: @text !important; + + &.g1 { + background: + radial-gradient( + 150% 180% at 50% 180%, + @peach, + @yellow 1%, + @yellow 25%, + @mantle 75% + ), + var(--secondary) !important; + } + + &.g2 { + background: + radial-gradient( + 150% 180% at 50% 180%, + @text, + @red 1%, + @red 25%, + @mantle 75% + ), + var(--secondary) !important; + } + + &.g3 { + background: + radial-gradient( + 150% 180% at 50% 180%, + @peach, + @pink 1%, + @mauve 25%, + @mantle 75% + ), + var(--secondary) !important; + } + + &.g5 { + background: + radial-gradient( + 150% 180% at 50% 180%, + @peach, + @sapphire 1%, + @sapphire 25%, + @mantle 75% + ), + var(--secondary) !important; + } + } + + /* Home page glow */ + .weird-smiley::before, + .feature .background { + background-image: radial-gradient( + circle at bottom, + fade(@mauve, 20%), + fade(@sapphire, 20%) + ) !important; + } + + .banner { + color: @base; + + &[style="--gradient-color: #9227cf"] { + --gradient-color: @mauve !important; + } + &[style="--gradient-color: #27cfb1"] { + --gradient-color: @teal !important; + } + &[style="--gradient-color: #ff11bc"] { + --gradient-color: @red !important; + } + + &::before { + background: + radial-gradient( + 100% 100% at 50% 0%, + @text 0%, + var(--gradient-color) 33%, + @mauve 64%, + fade(@mauve, 50%) 80%, + @mantle 100% + ), + var(--bg-medium) !important; + } + } + + /* Sub badge progress bar */ + + progress[value].bar { + &::-webkit-progress-bar, + &::-moz-progress-bar { + background: @accent !important; + } + } + } +} +@-moz-document domain("twitch.tv") { + .tw-root--theme-dark { + #catppuccin(@darkFlavor); + } + .tw-root--theme-light { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + + --seventv-text-color-normal: @text; + --seventv-text-color-secondary: @subtext0; + + --seventv-border-transparent-1: @surface0; + --seventv-background-shade-1: @base; + --seventv-background-shade-2: @mantle; + --seventv-background-shade-3: @crust; + --seventv-background-transparent-1: @base; + --seventv-background-transparent-2: @mantle; + --seventv-background-transparent-3: @mantle; + --seventv-highlight-neutral-1: @surface0; + --seventv-input-background: @mantle; + --seventv-input-border: @surface0; + --seventv-subscriber-color: @yellow; + + --seventv-highlight-color: @accent; + --seventv-highlight-dim-color: fade(@accent, 20%); + + --seventv-primary: @accent; + --seventv-accent: @green; + --seventv-warning: @peach; + --seventv-muted: @subtext0; + + .seventv-transparent { + --seventv-border-transparent-1: fade(@surface0, 77%); + --seventv-background-transparent-1: fade(@base, 77%); + --seventv-background-transparent-2: fade(@mantle, 59%); + --seventv-background-transparent-3: fade(@mantle, 71%); + } + + .seventv-announce-message-container { + .announce-header { + background-color: @crust; + } + .announce-message { + background-color: @base; + } + } + + .grabbable-inner, .grabbable-outer { + --color-border-input: @subtext0; + } + + .seventv-user-message { + /* First time chatter */ + &[style*="--seventv-highlight-color: #c832c8"] { + --seventv-highlight-color: @mauve !important; + --seventv-highlight-dim-color: fade(@mauve, 10%) !important; + } + /* Mention */ + &[style*="--seventv-highlight-color: #e13232"] { + --seventv-highlight-color: @red !important; + --seventv-highlight-dim-color: fade(@red, 10%) !important; + } + /* Blocked */ + &[style*="--seventv-highlight-color: #9488855A"] { + --seventv-highlight-color: @surface0 !important; + } + /* Raider */ + &[style*="--seventv-highlight-color: #6dd126"] { + --seventv-highlight-color: @green !important; + --seventv-highlight-dim-color: fade(@green, 10%) !important; + } + /* Returning chatter */ + &[style*="--seventv-highlight-color: #3296e6"] { + --seventv-highlight-color: @blue !important; + --seventv-highlight-dim-color: fade(@blue, 10%) !important; + } + } + + .seventv-chat-message-container:hover .seventv-chat-message-background { + background-color: @surface0; + } + + .seventv-sub-message-container, .seventv-reward-message-container { + background-color: @base; + } + + .seventv-settings-category { + .seventv-settings-category-dropdown .seventv-settings-subcategory { + &:hover { + background-color: @base !important; + } + &.intersect { + background-color: @surface0 !important; + } + } + + .settings-category-header { + &:hover, &:focus-within { + background-color: @base; + } + } + } + + .seventv-settings-category[in-view="true"] > .settings-category-header { + background-color: @surface0; + } + + .paint-tool-home { + h6[style="color: red;"] { + color: @peach !important; + } + } + + section[timeline-id="LIVE"] { + label, div[selector="date-boundary"] { + color: @red; + border-color: @red; + } + } + + .seventv-emote-container[zero-width="true"] { + border-color: @yellow; + } + + .scope-labels { + .label-global { + color: @green; + } + .label-sub-feature { + color: @yellow; + } + } + + [style*="rgb(255, 255, 255)"] .seventv-chat-user-username span { + color: @text !important; + } + + .seventv-chat-mod-buttons { + color: @subtext0; + + svg:hover { + color: @text; + } + } + } +} diff --git a/styles/shinigami-eyes/README.md b/styles/shinigami-eyes/README.md new file mode 100644 index 0000000000..297366887b --- /dev/null +++ b/styles/shinigami-eyes/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Shinigami Eyes + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [sofiedotcafe](https://github.com/sofiedotcafe) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/shinigami-eyes/catppuccin.user.less b/styles/shinigami-eyes/catppuccin.user.less new file mode 100644 index 0000000000..6a83bb9092 --- /dev/null +++ b/styles/shinigami-eyes/catppuccin.user.less @@ -0,0 +1,125 @@ +/* ==UserStyle== +@name Shinigami Eyes Catppuccin +@namespace github.com/catppuccin/userstyles/styles/shinigami-eyes +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/shinigami-eyes +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/shinigami-eyes/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ashinigami-eyes +@description Soothing pastel theme for Shinigami Eyes +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +/* +These are the domains for the sites that Shinigami Eyes works with. +The list can be found at https://github.com/shinigami-eyes/shinigami-eyes/blob/b66e9ad41fa4daef31886b139d8af6f852efcaaa/extension/manifest.json#L15-L96. +*/ +@-moz-document domain("facebook.com"), + domain("youtube.com"), + domain("reddit.com"), + domain("twitter.com"), + domain("x.com"), + domain("medium.com"), + domain("disqus.com"), + domain("tumblr.com"), + domain("wikipedia.org"), + domain("rationalwiki.org"), + domain("cohost.org"), + domain("bsky.app"), + domain("anarchism.space"), + domain("aus.social"), + domain("c.im"), + domain("chaos.social"), + domain("eightpoint.app"), + domain("eldritch.cafe"), + domain("fosstodon.org"), + domain("hachyderm.io"), + domain("infosec.exchange"), + domain("kolektiva.social"), + domain("mas.to"), + domain("masto.ai"), + domain("chaosfem.tw"), + domain("mastodon.art"), + domain("mastodon.cloud"), + domain("mastodon.green"), + domain("mastodon.ie"), + domain("mastodon.nz"), + domain("mastodon.online"), + domain("mastodon.scot"), + domain("mastodon.social"), + domain("mastodon.world"), + domain("mastodon.xyz"), + domain("mastodonapp.uk"), + domain("meow.social"), + domain("mstdn.ca"), + domain("mstdn.jp"), + domain("mstdn.social"), + domain("octodon.social"), + domain("ohai.social"), + domain("pixelfed.social"), + domain("queer.party"), + domain("sfba.social"), + domain("social.transsafety.network"), + domain("tech.lgbt"), + domain("techhub.social"), + domain("toot.cat"), + domain("toot.community"), + domain("toot.wales"), + domain("vulpine.club"), + domain("wandering.shop"), + domain("lgbtqia.space"), + domain("threads.net"), + domain("duckduckgo.com"), + domain("bing.com"), + domain("google.ar"), + domain("google.at"), + domain("google.be"), + domain("google.ca"), + domain("google.ch"), + domain("google.co.uk"), + domain("google.com"), + domain("google.de"), + domain("google.dk"), + domain("google.es"), + domain("google.fi"), + domain("google.fr"), + domain("google.is"), + domain("google.it"), + domain("google.no"), + domain("google.pt"), + domain("google.se") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + + body { + --ShinigamiEyesTFriendly: @green !important; + --ShinigamiEyesTransphobic: @red !important; + } + + .shinigami-eyes-theme-purple-yellow { + --ShinigamiEyesTFriendly: @mauve !important; + --ShinigamiEyesTransphobic: @yellow !important; + } + + .shinigami-eyes-theme-cyan-orange { + --ShinigamiEyesTFriendly: @sapphire !important; + --ShinigamiEyesTransphobic: @peach !important; + } + } +} diff --git a/styles/snapchat-web/README.md b/styles/snapchat-web/README.md new file mode 100644 index 0000000000..507e72b4c2 --- /dev/null +++ b/styles/snapchat-web/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Snapchat Web + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [itzTheMeow](https://github.com/itzTheMeow) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/snapchat-web/catppuccin.user.less b/styles/snapchat-web/catppuccin.user.less new file mode 100644 index 0000000000..6d1564086a --- /dev/null +++ b/styles/snapchat-web/catppuccin.user.less @@ -0,0 +1,133 @@ +/* ==UserStyle== +@name Snapchat Web Catppuccin +@namespace github.com/catppuccin/userstyles/styles/snapchat-web +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/snapchat-web +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/snapchat-web/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Asnapchat-web +@description Soothing pastel theme for Snapchat Web +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document url-prefix("https://www.snapchat.com/web") { + :root[theme="dark"] { + #catppuccin(@darkFlavor); + } + :root[theme="light"] { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + /* Snapchat applies the variables (overrides?) to specific elements so we need to apply to every element (with high specificity) to override those. */ + &, + body > main#root * { + --sigMain: @base; + --sigSurface: @mantle; + --sigSurfaceRGB: red(@mantle), green(@mantle), blue(@mantle); + --sigAboveSurface: @crust; + --sigSurfaceDown: @base; + --sigSubscreen: @crust; + --sigTextField: @crust; + --sigDivider: @surface0; + --sigDividerLight: @surface0; + --sigColorBackgroundBorder: @surface0; + --sigBackgroundPrimary: @base; + --sigBackgroundSecondary: @mantle; + --sigBackgroundSecondaryHover: darken(@mantle, 5%); + --sigBackgroundTertiary: @crust; + --sigBackgroundMessageHover: @surface1; + --sigBackgroundMessageSaved: @surface0; + --sigBackgroundMessageSavedHover: @surface2; + --sigOverlay: fade(@surface1, 40%); + --sigOverlayHover: fade(@surface1, 35%); + --sigBrandSecondary: @accent; + --sigObject: rgba(255, 255, 255, 0.05); + + --sigTextPrimary: @text; + --sigButtonOnPrimary: @crust; + --sigTextSecondary: @subtext0; + --sigButtonOnSecondary: @subtext0; + --sigTextTertiary: @subtext1; + --sigButtonOnTertiary: @subtext1; + --sigTextNegative: @red; + --sigButtonOnSuccess: @base; + --sigButtonOnError: @base; + --sigButtonOnNegative: @base; + --sigButtonOnChatSurfaceCalling: @base; + --sigTextPlayer: @crust; + --sigButtonGreyHover: darken(@surface0, 5%); + --sigButtonGreyActive: darken(@surface0, 8%); + + --sigButtonPrimary: @accent; + --sigButtonPrimaryHover: darken(@accent, 5%); + --sigButtonPrimaryActive: darken(@accent, 8%); + --sigButtonSecondary: @surface0; + --sigButtonSecondaryHover: @surface1; + --sigButtonSecondaryActive: @surface2; + --sigButtonNegative: @red; + --sigButtonError: @red; + --sigButtonErrorHover: darken(@red, 5%); + --sigButtonSuccess: @green; + --sigButtonSuccessHover: darken(@green, 5%); + --sigIconCalling: @green; + --sigIconCallingHover: darken(@green, 5%); + --sigChatSurfaceCalling: @green; + --sigChatSurfaceCallingDisabled: darken(@green, 20%); + --sigChatSurfaceCallingHover: darken(@green, 5%); + + --sigChat: @blue; + --sigChatIcon: @blue; + --sigSnapWithoutSound: @red; + --sigSnapWithSound: @mauve; + } + + // new chat button + button[title="New Chat"], + // checkbox to choose camera + [id*="downshift-"] a, + // checkbox in new chat popup + [aria-label="Unselect chosen user"] { + path[fill="#fff"] { + fill: @crust; + } + // replaces blue fill + path[fill="#51B7FF"] { + fill: @accent; + } + } + + // new group button + form > div > div > div[role="searchbox"] button { + color: @crust; + path { + fill: @crust; + } + } + + // story reply text + li button[type="button"].replyText { + background-color: rgba(30, 30, 30, 0.8); + } + + // buttons when in call + [data-projection-id] button { + --sigColorAlwaysWhite: @surface0; + } + + // replay button on stories + img[role="presentation"][src^="blob:"] + div > svg > path[fill="#fff"] { + fill: @text; + } + } +} diff --git a/styles/spotify-web/README.md b/styles/spotify-web/README.md new file mode 100644 index 0000000000..c10f8a8441 --- /dev/null +++ b/styles/spotify-web/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Spotify Web + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [Tnixc](https://github.com/Tnixc) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/spotify-web/catppuccin.user.less b/styles/spotify-web/catppuccin.user.less new file mode 100644 index 0000000000..69150b1e53 --- /dev/null +++ b/styles/spotify-web/catppuccin.user.less @@ -0,0 +1,579 @@ +/* ==UserStyle== +@name Spotify Web Catppuccin +@namespace github.com/catppuccin/userstyles/styles/spotify-web +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/spotify-web +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/spotify-web/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aspotify-web +@description Soothing pastel theme for Spotify Web +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; +@-moz-document domain("open.spotify.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + .encore-dark-theme, + .encore-dark-theme .encore-base-set, + .encore-light-theme, + .encore-light-theme .encore-base-set, + .encore-dark-theme .encore-inverted-light-set { + --background-base: @base; + --background-highlight: @surface0; + --background-press: @crust; + --background-elevated-base: @surface0; + --background-elevated-highlight: @surface1; + --background-elevated-press: @crust; + --background-tinted-base: @crust; + --background-tinted-highlight: @mantle; + --background-tinted-press: @base; + --background-unsafe-for-small-text-base: @base; + --background-unsafe-for-small-text-highlight: @base; + --background-unsafe-for-small-text-press: @base; + --text-base: @text; + --text-subdued: @subtext1; + --text-bright-accent: @accent; + --text-negative: @red; + --text-warning: @yellow; + --text-positive: @accent; + --text-announcement: @sapphire; + --essential-base: @text; + --essential-subdued: @subtext1; + --essential-bright-accent: @accent; + --essential-negative: @red; + --essential-warning: @yellow; + --essential-positive: @green; + --essential-announcement: @base; + --decorative-base: @text; + --decorative-subdued: @surface2; + } + .encore-dark-theme .encore-inverted-light-set { + --background-base: @surface1; + --background-highlight: @surface0; + --background-press: @surface1; + } + .encore-dark-theme .encore-bright-accent-set { + --background-base: @accent; + --background-highlight: @accent; + --background-press: @accent; + --background-elevated-base: @accent; + --background-elevated-highlight: @accent; + --background-elevated-press: @accent; + --background-tinted-base: @accent; + --background-tinted-highlight: @accent; + --background-tinted-press: @accent; + --background-unsafe-for-small-text-base: @accent; + --background-unsafe-for-small-text-highlight: @accent; + --background-unsafe-for-small-text-press: @accent; + --decorative-subdued: darken(@accent, 10%); + } + .encore-dark-theme .encore-over-media-set { + --background-base: @mantle; + --background-highlight: @crust; + --background-press: @mantle; + --background-unsafe-for-small-text-base: @mantle; + --background-unsafe-for-small-text-highlight: @mantle; + --background-unsafe-for-small-text-press: @mantle; + --background-elevated-base: @crust; + --background-elevated-highlight: @crust; + --background-elevated-press: @mantle; + --background-tinted-base: @mantle; + --background-tinted-highlight: @mantle; + --background-tinted-press: @mantle; + } + & when (@flavor = latte) { + .T1xI1RTSFU7Wu94UuvE6 * { + background: @surface0 !important; + } + .bQthUEx0_U98DJkT1saO, + .RVRoa p { + color: @base !important; + } + } + .encore-text { + color: @text; + } + .ydlidzq2hSQrvGXn7yni { + background: @text; + color: @crust; + } + .encore-dark-theme .encore-base-set > *, + .encore-dark-theme > * { + --parents-essential-base: @text; + } + .X8yW2lJbFCQfV5GjoRwL { + --generic-tooltip-background-color: @mantle; + } + .SboKmDrCTZng7t4EgNoM { + background-color: @mantle !important; + } + + #main > * > *, + .sqKERfoKl4KwrtHqcKOd, + .HkbHLcqgUfXruL5xVi28, + .uhDzVbFHyCQDH6WrWZaC, + .pHrwZOFBdT8FNXnmcPPI { + background: @crust !important; + } + + /* some borders on the playlist details */ + .ePPpO_NuGDUxVRTw7y6W { + border-color: @surface0; + } + + // Some animated bar icon + .uWvwXlS0Da1bWsRX6KOw, + .n5XwsUqagSoVk8oMiw1x { + filter: saturate(0) brightness(1.3) !important; + } + .eoWRdH, + .in4OjUTflcsoj9RUpf05 *, + .gpNta6i8q3KYJC6WBZQC * { + color: @subtext0 !important; + } + ._EShSNaBK1wUIaZQFJJQ { + box-shadow: 0 4px 20px @mantle; + } + .gHImFiUWOg93pvTefeAD, + .CoLO4pdSl8LGWyVZA00t { + background: @base !important; + } + .mjZrvVI3CxfHJXu7y0Lg, + .coBkWVskipFo8KxLKief .T1xI1RTSFU7Wu94UuvE6 { + background-color: @accent !important; + } + .ListRowTitle__LineClamp-sc-1xe2if1-0.lmgIvZ *, + .EaTxqhHk6J4ecKHwpY5m *, + .SboKmDrCTZng7t4EgNoM *, + .MfVrtIzQJ7iZXfRWg6eM, + .Ydwa1P5GkCggtLlSvphs, + .Fb61sprjhh75aOITDnsJ *, + .Ai_McRq9wJEYK21w8nX_ *, + .QZhV0hWVKlExlKr266jo::placeholder, + .JzZyf6OGCGtdscOZGt8Y.t6HIrX67Lp80Nj6tGauz *, + .hfdkySA4kiUldFsPj9lD.ZcNcu7WZgOAz_Mkcoff3 *, + .ListRowTitle__LineClamp-sc-1xe2if1-0 *, + .FZhaXNtbN3Crwrgd0TA7.control-button, + .COJ84QbXPrd4jkO1HU2N *, + .zhQX2DOI2muMo8EKsZ6h, + .MHIOvvlSYRmF7VAJDLWy, + .JouuH90_RNAdTj0ZjcCA, + .r9m6lHy7RyIPDzW1Youe, + .PDPsYDh4ntfQE3B4duUI, + .bfQ2S9bMXr_kJjqEfcwA *, + .QO9loc33XC50mMRUCIvf, + .G7zO58ORUHxcUw0sXktM, + .rq2VQ5mb9SDAFWbBIUIn *, + .lp9Tfm4rsM9_pfbIE0zd, + .w6j_vX6SF5IxSXrrkYw5, + .prGqQr33U0mG14TJ5V8a *, + .BQD_pE0Nva_z6z7CvZww *, + .W5cB_o0XkkU7Q8tlTGxq, + .PGSe59fD1Hwc9yUM2d3U a, + .jb9xD5ECTqKFK02qe3HZ *, + .X8yW2lJbFCQfV5GjoRwL *, + .tbvnCR3ZJxmAKY6nRPBe, + .CmR9tHJ5ta6oWJlKBm3k *, + .xgmjVLxjqfcXK5BV_XyN.fUYMR7LuRXv0KJWFvRZA, + .DzWw3g4E_66wu9ktqn36 .home-active-icon, + .Footer__StyledFooter-sc-xwm5vq-0 *, + .DzWw3g4E_66wu9ktqn36 .search-active-icon, + .dYnaPI, + .home-active-icon, + .zOsKPnD_9x3KJqQCSmAq, + .beyOcd3p0PEzhrlKIbU1, + .oORVTPvg6eTQflVKKgw8 { + color: @text !important; + } + .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4) + .ObVor_8sQq5whKbtWs8a, + .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4) + .PAqIqZXvse_3h6sDVxU0, + .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4) + .UudGCx16EmBkuFPllvss + a, + .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4) + .W676nknusnBt8sz19YVV, + .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4) + ._TH6YAXEzJtzSxhkGSqu, + .IjYxRc5luMiDPhKhZVUH:focus-within:not(.tH1iuxCV8NexP4pzEBa4) + ._TH6YAXEzJtzSxhkGSqu + a, + .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4) + .ObVor_8sQq5whKbtWs8a, + .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4) + .PAqIqZXvse_3h6sDVxU0, + .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4) + .UudGCx16EmBkuFPllvss + a, + .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4) + .W676nknusnBt8sz19YVV, + .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4) + ._TH6YAXEzJtzSxhkGSqu, + .IjYxRc5luMiDPhKhZVUH:hover:not(.tH1iuxCV8NexP4pzEBa4) + ._TH6YAXEzJtzSxhkGSqu + a, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG .PAqIqZXvse_3h6sDVxU0, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG .UudGCx16EmBkuFPllvss, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG .UudGCx16EmBkuFPllvss a, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG ._TH6YAXEzJtzSxhkGSqu, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG ._TH6YAXEzJtzSxhkGSqu a, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG .ucB9avGYvzsmzXUOw0S7, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover .PAqIqZXvse_3h6sDVxU0, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover .UudGCx16EmBkuFPllvss, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover .UudGCx16EmBkuFPllvss a, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover ._TH6YAXEzJtzSxhkGSqu, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover ._TH6YAXEzJtzSxhkGSqu a, + .IjYxRc5luMiDPhKhZVUH.JgERXNoqNav5zOHiZGfG:hover .ucB9avGYvzsmzXUOw0S7, + .NPv26QCDgdnwsPOlYJmQ div:nth-child(2) { + color: @subtext1; + } + .VKCcyYujazVPj6VkksPM svg path { + fill: @text; + } + .ThG4UqWk7ASXCMm69Opn, + .BQD_pE0Nva_z6z7CvZww *, + .k2ndSrHzhAsXBcLqRKYx * { + color: @overlay2 !important; + } + .gqYYMz8DkhaT3e44LcHQ span { + color: @base; + } + *[class*="ButtonInner-sc-14ud5tc-0 GBxjH encore-bright-accent-set vq0lsCoYrDUDvkuUIaRg"] + * { + color: @crust !important; + fill: @crust !important; + } + .bk509U3ZhZc9YBJAmoPB { + background: @mantle; + } + .HVCCFeUiHVwZVv74p34a *, + .mXNT9H2GU7lDW4cGx0q1, + .uV8q95GGAb2VDtL3gpYa { + background: @surface0 !important; + } + ._VADS4mdajCt5Yuf6KjW, + .uJjmxe0T11dUVeW6Biz8 { + background-color: @base; + } + .QO9loc33XC50mMRUCIvf { + background-color: @surface0; + } + .QO9loc33XC50mMRUCIvf:focus { + -webkit-box-shadow: 0 0 0 2px @text; + box-shadow: 0 0 0 2px @text; + } + .QO9loc33XC50mMRUCIvf:hover { + background-color: @surface1; + } + .H6jh9Xd7DNOq3NsLDmCB:active, + .H6jh9Xd7DNOq3NsLDmCB:focus, + .H6jh9Xd7DNOq3NsLDmCB:hover { + color: @text !important; + } + .NbcaczStd8vD2rHWwaKv, + .QZhV0hWVKlExlKr266jo { + background-color: @surface0; + color: @text; + } + div[role*="menuitem"] { + background-color: @surface0 !important; + } + .H6jh9Xd7DNOq3NsLDmCB, + .htqz7Vb8mLJvGKTi1vrs, + .dsbIME { + color: @text; + } + .IconWrapper__Wrapper-sc-1hf1hjl-0 svg { + color: @crust !important; + } + .kPpCsU { + fill: @text; + } + .VgSbatGBB9XwTH2_dsxg .ql0zZd7giPXSnPg75NR0 { + background: @base !important; + color: @text; + } + .HsbczDqu9qjcYr7EIdHR, + .rovbQsmAS_mwvpKHaVhQ * { + background: transparent !important; + } + .Z35BWOA10YGn5uc9YgAp, + .pQmF4tvRpUeLWgPKUcW7 { + background-color: @crust; + } + .S4OmZ_IZexmZ5dasPqW5 { + background-color: @accent !important; + } + .T1xI1RTSFU7Wu94UuvE6[style*="background-color:"] { + background-color: @accent !important; + } + .fIvMht6B9HdROywMNJZ4.hIFR8WDm_54EEIa1gwpC { + background-color: @accent !important; + } + // Explicit icon + .kpGMQq1KFz620g_BD_dS { + background-color: @overlay0; + } + .link-subtle { + color: @subtext1; + &:hover { + color: @text; + } + } + .c0KyMkxeMCWQGE7cR8s_, + .s58sp4t3h1uU9n_42KqD, + .TextForLabel-sc-1jqya9m-0 span { + color: @base !important; + } + // Search cards + .LunqxlFIupJw_Dkx6mNx { + background: @mantle !important; + } + .bQthUEx0_U98DJkT1saO, + .RVRoa p { + color: @text; + } + // Social buttons + .kmZeYl { + background-color: @mantle; + &:hover { + background-color: @crust; + } + } + // Cookie Banner + #onetrust-banner-sdk { + background-color: @base !important; + color: @text !important; + } + #onetrust-policy-text, + .ot-dpd-title, + .onetrust-policy-title, + .ot-text-bold { + color: @text !important; + } + .ot-dpd-desc, + .ot-link-btn { + color: @text !important; + } + #onetrust-consent-sdk #onetrust-policy-title { + color: @text !important; + } + #onetrust-banner-sdk button { + color: @text !important; + } + #onetrust-pc-btn-handler { + background-color: @base !important; + } + // Cookie Settings + #onetrust-consent-sdk #onetrust-pc-sdk, + .ot-acc-txt, + .ot-acc-grpdesc { + background-color: @base !important; + } + #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-title, + #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-desc, + #onetrust-consent-sdk #onetrust-pc-sdk h3, + #onetrust-consent-sdk #onetrust-pc-sdk h5, + #onetrust-consent-sdk #onetrust-pc-sdk h4, + #onetrust-consent-sdk #onetrust-pc-sdk h6, + #onetrust-consent-sdk #onetrust-pc-sdk h2, + #onetrust-pc-sdk .ot-always-active, + .ot-acc-txt, + .ot-acc-grpdesc, + #onetrust-consent-sdk #onetrust-pc-sdk p { + color: @text !important; + } + #onetrust-pc-sdk .ot-accordion-layout.ot-cat-item { + border-color: @accent !important; + border-radius: 8px; + } + #onetrust-consent-sdk + #onetrust-pc-sdk + button:not( + #clear-filters-handler, + .ot-close-icon, + #filter-btn-handler, + .ot-remove-objection-handler, + .ot-obj-leg-btn-handler, + [aria-expanded], + .ot-link-btn + ) { + background-color: @accent !important; + border-color: @accent !important; + } + // Vendors List + #onetrust-consent-sdk #onetrust-pc-sdk .ot-sel-all-hdr span { + color: @text; + } + #onetrust-pc-sdk input[type="text"] { + background-color: @mantle !important; + border-color: @accent !important; + } + #onetrust-pc-sdk .ot-pc-header, + #onetrust-pc-sdk ul li { + border-bottom-color: @accent !important; + border-top-color: @accent !important; + } + #ot-ven-lst { + border-top-color: @accent !important; + } + .ot-pc-footer { + border-top-color: @accent !important; + } + #onetrust-pc-sdk li > button { + border-top-color: @accent !important; + } + #onetrust-consent-sdk #onetrust-pc-sdk #ot-sel-blk { + background-color: @base !important; + } + // Sign Up Banner + .dz_h98rH9nZCwfPdnKgr { + background-image: none; + } + // Icon + .RfidWIoz8FON2WhFoItU { + color: @text; + } + // Playlist bottom + .cuLHaM { + background-color: @base; + } + // Left Sidebar + #Desktop_LeftSidebar_Id { + background-color: transparent; + } + // Sidebar top + .y2UicQnlTq148rL8Y0jp { + box-shadow: 0 6px 10px @mantle; + } + // Bottom player + .vnCew8qzJq3cVGlYFXRI { + background-color: @text; + } + .vnCew8qzJq3cVGlYFXRI * { + fill: @crust; + } + + .rovbQsmAS_mwvpKHaVhQ .PFgcCoJSWC3KjhZxHDYH * { + fill: @text !important; + } + .TywOcKZEqNynWecCiATc { + --bg-color: @surface1; + --fg-color: @text; + --is-active-fg-color: @accent; + } + a { + color: @accent; + } + .Ng3dPPA2_1CFYkzPukjM { + background: @blue; + } + .KAZD28usA1vPz5GVpm63.EHxL6K_6WWDlTCZP6x5w::after { + background-color: @accent; + } + .tippy-box[data-theme~="activation"] { + background-color: @accent; + color: @crust; + .c0KyMkxeMCWQGE7cR8s_ *, + .TextForLabel-sc-1jqya9m-0.kIsEKW { + color: @crust; + } + } + .YIJxiTuPgMQav316cRqP { + --generic-tooltip-background-color: @surface0; + } + .tippy-arrow { + color: @surface0 !important; + } + .zrvvPyoxE6wQNqnu0yWA, + .mjprSb2e1tKJpqwvgFSh, + .jW4eWdr_LUeOXwPpKhWG { + color: @text; + background: @surface0; + } + input:checked ~ .Js64TOfWtHksI6TQ6knT { + background: @accent !important; + } + .bXJ77rNIJ18Y0GfegQdr + label > :first-child { + background: @text !important; + } + .Z35BWOA10YGn5uc9YgAp:focus-within, + .Z35BWOA10YGn5uc9YgAp:hover, + .Z35BWOA10YGn5uc9YgAp[data-context-menu-open="true"] { + background: @mantle !important; + } + .wC9sIed7pfp47wZbmU6m:hover, + .wC9sIed7pfp47wZbmU6m:not([aria-checked="true"]):focus { + background: @surface0 !important; + } + .DuEPSADpSwCcO880xjUG:not(:first-child) > .QgtQw2NJz7giDZxap2BB::before { + border-color: @surface0; + } + .pSxFsY9Fgcj5f8Gf05mh, + .qyKJPLjz8o4jnbk92JOn { + background-color: fade(@crust, 70%); + } + .eG930DCaQXDFqjhxRGIs > * { + background: @crust !important; + } + .IconWrapper__Wrapper-sc-1hf1hjl-0.fIXqki svg { + color: @text !important; + } + .IconWrapper__Wrapper-sc-1hf1hjl-0.bjlVXn svg.bneLcE { + color: @base !important; + } + // Shuffle / Loop Icons + .OF_3F0SQCsBtL1jSTlTA svg, + .OF_3F0SQCsBtL1jSTlTA::after, + .tP0mccyU1WAa7I9PevC1 svg, + .tP0mccyU1WAa7I9PevC1::after { + color: @accent !important; + } + // Full Screen Song Window + .npv-up-next { + background-color: @surface0 !important; + } + .mbUrqWP55sK6zhspiR72 button { + color: @text !important; + } + .npv-lyrics__text-wrapper--previous p { + color: @subtext1 !important; + } + .npv-lyrics__text-wrapper--current p { + color: @text !important; + } + .npv-lyrics__text-wrapper--next p { + color: @subtext0 !important; + } + .npv-lyrics__text--credits { + color: @text !important; + } + // Context Menus + div[data-tippy-root], + #context-menu, + #hover-or-focus-tooltip, + .nYdM55iHFByRTzJUmx9X { + border-radius: 8px; + background-color: @surface0; + color: @text; + } + } +} diff --git a/styles/stack-overflow/README.md b/styles/stack-overflow/README.md new file mode 100644 index 0000000000..6ca4770d56 --- /dev/null +++ b/styles/stack-overflow/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Stack Overflow + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/stack-overflow/catppuccin.user.less b/styles/stack-overflow/catppuccin.user.less new file mode 100644 index 0000000000..bd32ecf383 --- /dev/null +++ b/styles/stack-overflow/catppuccin.user.less @@ -0,0 +1,453 @@ +/* ==UserStyle== +@name Stack Overflow Catppuccin +@namespace github.com/catppuccin/userstyles/styles/stack-overflow +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/stack-overflow +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/stack-overflow/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Astack-overflow +@description Soothing pastel theme for Stack Overflow +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("stackoverflow.com"), + domain("stackexchange.com"), + domain("serverfault.com"), + domain("superuser.com"), + domain("mathoverflow.net"), + domain("askubuntu.com"), + domain("stackapps.com") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + code.hljs { + background: none !important; + } + + body:not(.theme-highcontrast, .theme-dark).unified-theme { + &, + .themed { + #catppuccin(@lightFlavor); + } + } + body:not(.theme-highcontrast).unified-theme.theme-dark { + &, + .themed { + #catppuccin(@darkFlavor); + } + } + + body:not(.theme-highcontrast).unified-theme.theme-system { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + &, + * { + --theme-background-color: @mantle; + --theme-content-background-color: @base; + --theme-content-border-color: @surface0; + --theme-topbar-background-color: @mantle; + --theme-topbar-search-background: @mantle; + --theme-topbar-search-border: @surface2; + --theme-topbar-search-placeholder: @subtext0; + --theme-topbar-item-color: @text; + --theme-topbar-item-color-hover: @text; + --theme-topbar-item-background-hover: @surface0; + --theme-button-primary-background-color: @accent; + --theme-button-primary-hover-background-color: darken(@accent, 5%); + --theme-button-primary-active-background-color: @text; + --theme-link-color: @blue; + --theme-link-color-hover: @sky; + --theme-link-color-visited: @lavender; + --theme-footer-title-color: @text; + --theme-footer-text-color: @subtext0; + --theme-footer-link-color: @subtext0; + --theme-footer-link-color-hover: @subtext1; + --theme-footer-background-color: @mantle; + --theme-header-background-color: transparent; + --theme-tag-background-color: @accent; + --theme-tag-border-color: @accent; + --theme-tag-color: @mantle; + --theme-tag-hover-background-color: darken(@accent, 5%); + --theme-tag-hover-border-color: darken(@accent, 5%); + --theme-tag-hover-color: @mantle; + --theme-post-title-color: @text; + --theme-post-title-color-hover: @subtext1; + --theme-post-title-color-visited: @lavender; + + --highlight-bg: @mantle; + + --theme-primary: @accent; + --theme-primary-100: fade(@accent, 20%); + --theme-primary-200: fade(@accent, 30%); + --theme-primary-300: fade(@accent, 40%); + --theme-primary-400: @accent; + --theme-primary-500: fade(@accent, 90%); + --theme-primary-600: @accent; + + --translucent-secondary: fade(@accent, 10%); + --theme-secondary-100: fade(@accent, 20%); + --theme-secondary-200: fade(@accent, 30%); + --theme-secondary-300: fade(@accent, 40%); + --theme-secondary-400: fade(@accent, 50%); + --theme-secondary-500: fade(@accent, 60%); + --theme-secondary-600: fade(@accent, 70%); + + --white: @mantle; + --black: @text; + --black-100: @base; + --black-150: @surface0; + --black-200: @surface1; + --black-225: @surface1; + --black-250: @surface2; + --black-300: @overlay0; + --black-350: @overlay2; + --black-400: @subtext0; + --black-500: @subtext1; + --black-600: @text; + + --purple-100: fade(@mauve, 30%); + --purple-200: fade(@mauve, 40%); + --purple-400: fade(@mauve, 60%); + + --green-100: @green; + --green-400: @green; + --green-500: @green; + + --blue-200: fade(@blue, 30%); + --blue-300: fade(@blue, 40%); + --blue-400: @sky; + --blue-500: @blue; + + --orange-400: fade(@peach, 80%); + --orange-500: fade(@peach, 90%); + --orange-600: @peach; + + --bronze-100: fade(@rosewater, 20%); + --bronze-200: fade(@rosewater, 30%); + --bronze-300: fade(@rosewater, 40%); + --bronze-400: fade(@rosewater, 50%); + + --yellow-100: fade(@yellow, 20%); + --yellow-200: fade(@yellow, 30%); + --yellow-300: @yellow; + --yellow-400: fade(@yellow, 70%); + --yellow-500: fade(@yellow, 90%); + + --red-200: fade(@red, 40%); + --red-400: fade(@red, 70%); + --red-500: fade(@red, 80%); + + --scrollbar: @surface1; + } + + .wmd-button > span { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .s-topbar .s-topbar--logo .-img, + .envelope-on, + .envelope-off, + .vote-up-off, + .vote-up-on, + .vote-down-off, + .vote-down-on, + .feed-icon, + .vote-accepted-off, + .vote-accepted-on, + .vote-accepted-bounty, + .badge-earned-check, + .delete-tag, + .grippie, + .expander-arrow-hide, + .expander-arrow-show, + .expander-arrow-small-hide, + .expander-arrow-small-show, + .anonymous-gravatar, + .badge1, + .badge2, + .badge3 { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .s-avatar { + &.subcommunity-topic-mobile-dev { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + &.subcommunity-topic-r-language { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } + + [fill="#BCBBBB"] { + fill: @overlay2 !important; + } + [fill="#F48024"] { + fill: @peach !important; + } + + .s-topbar .s-topbar--logo .-img { + filter: none; + } + + .s-sidebarwidget { + background-color: @base; + border-color: @surface0; + + .s-sidebarwidget--header { + background-color: @surface0; + border-color: @surface1; + } + &::after, + .s-sidebarwidget--content, + .s-sidebarwidget--header { + border-color: @surface1; + } + } + + .s-prose kbd { + border-top-color: transparent; + box-shadow: 0 1px 1px @crust, inset 0 1px 0 0 @overlay2; + } + + .s-pagination .s-pagination--item { + border-color: @surface2; + } + + .s-badge { + color: @crust; + background-color: @mauve; + } + + .s-notice { + &, + .s-notice--btn { + color: @text !important; + } + } + + .badge, + .badge-tag { + background-color: @surface0; + color: @text; + } + + #onetrust-consent-sdk { + #onetrust-banner-sdk { + background-color: @mantle; + + &:focus { + outline-color: @surface1; + } + + #onetrust-accept-btn-handler, + #onetrust-reject-all-handler { + background-color: @accent; + color: @crust; + } + + #onetrust-button-group button#onetrust-pc-btn-handler { + background-color: @crust !important; + border-color: @accent !important; + color: @accent !important; + } + + #onetrust-policy-title, + #onetrust-policy-text, + .ot-b-addl-desc, + .ot-dpd-desc, + .ot-dpd-title, + #onetrust-policy-text :not(.onetrust-vendors-list-handler), + .ot-dpd-desc :not(.onetrust-vendors-list-handler), + #banner-options *, + .ot-cat-header, + .ot-optout-signal, + a { + color: @text !important; + } + } + + /* Manage cookies popup */ + #onetrust-pc-sdk { + background-color: @base; + + h3, + h4, + h5, + h6, + p, + #ot-ven-lst .ot-ven-opts p, + #ot-pc-desc, + #ot-pc-title, + .ot-li-title, + .ot-sel-all-hdr span, + #ot-host-lst .ot-host-info, + #ot-fltr-modal #modal-header, + .ot-checkbox label span, + #ot-pc-lst #ot-sel-blk p, + #ot-pc-lst #ot-lst-title h3, + #ot-pc-lst .back-btn-handler p, + #ot-pc-lst .ot-ven-name, + #ot-pc-lst #ot-ven-lst .consent-category, + .ot-leg-btn-container .ot-inactive-leg-btn, + .ot-label-status, + .ot-chkbox label span, + #clear-filters-handler, + .ot-optout-signal { + color: @text; + } + + .ot-pc-header { + background-color: @mantle !important; + border-bottom-color: @surface1; + } + + .ot-accordion-layout.ot-cat-item { + border-color: @surface1; + } + + .ot-pc-footer { + border-top-color: @surface2 !important; + } + + button:not( + #clear-filters-handler, + .ot-close-icon, + #filter-btn-handler, + .ot-remove-objection-handler, + .ot-obj-leg-btn-handler, + [aria-expanded], + .ot-link-btn + ), + .ot-leg-btn-container .ot-active-leg-btn { + background-color: @accent !important; + border-color: @accent; + color: @mantle; + } + } + } + + .sunset-background { + background-color: @base !important; + color: @text !important; + } + + .disabled-link { + color: @overlay2; + } + + /* Stack Exchange logo */ + [fill="#FEFEFE"] { + fill: @text !important; + } + [fill="#2F96E8"], + [fill="#2D6DB5"] { + fill: @blue !important; + } + [fill="#8FD8F7"] { + fill: lighten(@sky, 10%); + } + [fill="#46A2D9"] { + fill: lighten(@blue, 5%); + } + [fill="#155397"] { + fill: darken(@blue, 10%) !important; + } + + /* Other Stack Exchange site logos */ + [alt="Server Fault"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + [alt="Super User"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + [alt="MathOverflow"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + [alt="Ask Ubuntu"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + &:has([alt="Ask Ubuntu"]) { + background-image: none; + + .site-header { + background: @accent; + } + } + + [alt="Stack Apps"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + [alt="Unix & Linux"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + &:has([alt="Unix & Linux"]) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + [alt="Cryptography"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + &:has([alt="Cryptography"]) { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + + .site-header { + background-image: none; + } + } + } +} diff --git a/styles/startpage/README.md b/styles/startpage/README.md new file mode 100644 index 0000000000..45a7c9ff24 --- /dev/null +++ b/styles/startpage/README.md @@ -0,0 +1,37 @@ + + + +

+ Logo
+ + Catppuccin for Startpage + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [WalkQuackBack](https://github.com/WalkQuackBack) + +## 💖 Past Maintainer +- [bartlibert](https://github.com/bartlibert) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/startpage/catppuccin.user.less b/styles/startpage/catppuccin.user.less new file mode 100644 index 0000000000..c8f5b460f6 --- /dev/null +++ b/styles/startpage/catppuccin.user.less @@ -0,0 +1,140 @@ +/* ==UserStyle== +@name Startpage Catppuccin +@namespace github.com/catppuccin/userstyles/styles/startpage +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/startpage +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/startpage/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Astartpage +@description Soothing pastel theme for Startpage +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("startpage.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + &, + body { + --sx-accent: @accent; + --sx-background: @base; + --sx-border: @surface0; + --sx-tabLinkHover: @teal; + --sx-foreground: @text; + --sx-foregroundAlt: @subtext1; + --sx-foregroundEmphasis: lighten(@text, 10%); + --sx-popupBackground: @surface0; + --sx-popupForeground: @text; + --sx-popupForegroundEm: @text; + --sx-popupUrl: @blue; + --sx-buttonHighlight: @accent; + --sx-loadingBars: @mantle; + --sx-darkIcons: @crust; + --sx-arrowButtonBackground: @text; + --sx-arrowButtonForeground: @text; + } + + .css-nguon6 button { + color: @accent; + border-color: @accent; + } + + .css-fg9wif, + .header, + .wp-qi-sb__result, + .linkHover, + .footer__container { + background: @mantle !important; + } + + body { + color: @text; + } + + body, + .layout-web, + .layout-web__body, + .ex-qi-kp:not(.ex-qi-kp--light, .ex-qi-kp--night, .ex-qi-kp--air) + .sx-kp-infobox-wrap + .sx-infobox + tr:not(.sx-heading-row) + > *, + .w-gl { + background: @base !important; + } + + .wp-qi-sb__result { + border-color: @mantle !important; + } + + .wp-qi-sb__top-square-img { + border-bottom-color: @mantle !important; + } + + /* fonts */ + .w-gl__result-title, + .inline-nav-menu__link, + .wp-qi-sb__title { + color: @text !important; + } + + .w-gl__result, + .search-filter-time__dropdown, + .search-filter-region__dropdown, + .search-filter-family__field-label, + .wp-qi-sb__extract { + color: @subtext1 !important; + } + + .w-gl__result-url { + color: @accent !important; + } + + .wp-qi-sb__expand-text, + .inline-nav-menu__link__active, + .inline-nav-menu__link:hover { + color: @green !important; + } + + .inline-nav-menu__link__active, + .inline-nav-menu__link__post-link:hover { + border-bottom-color: @green !important; + } + + .pagination .num--active { + background: @flamingo !important; + border-color: @flamingo !important; + } + + .pagination__num:hover, + .pagination__next-prev-button:hover { + background: @blue !important; + border-color: @blue !important; + } + + header { + background-color: @mantle !important; + } + + .w-gl__result-title:visited { + color: @lavender !important; + } + } +} diff --git a/styles/status.cafe/README.md b/styles/status.cafe/README.md new file mode 100644 index 0000000000..9409bdaa0f --- /dev/null +++ b/styles/status.cafe/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for status.cafe + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [bunfluff](https://github.com/bunfluff) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/status.cafe/catppuccin.user.less b/styles/status.cafe/catppuccin.user.less new file mode 100644 index 0000000000..af7bd72c23 --- /dev/null +++ b/styles/status.cafe/catppuccin.user.less @@ -0,0 +1,128 @@ +/* ==UserStyle== +@name status.cafe Catppuccin +@namespace github.com/catppuccin/userstyles/styles/status.cafe +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/status.cafe +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/status.cafe/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Astatus.cafe +@description Soothing pastel theme for status.cafe +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document regexp("https://status\\.cafe/(?!users).*"), + domain("forum.status.cafe") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + background-color: @base; + + body { + background-color: @base; + color: @text; + } + + textarea { + background-color: @mantle; + color: @text; + border-color: @surface1; + border-style: solid; + border-width: 1px; + border-radius: 2px; + padding: 3px; + } + + input { + background-color: @mantle; + color: @text; + border-color: @surface1; + border-style: solid; + border-width: 1px; + border-radius: 4px; + padding: 2px 5px; + :hover { + background-color: darken(@mantle, 2%); + } + + :active { + background-color: @crust; + border-color: @surface0; + } + } + + textarea:hover, + input:hover { + border-color: darken(@surface1, 5%); + } + + .flash { + background-color: @green; + } + + a:not(.flash a) { + color: @accent; + } + + a:visited:not(.flash a) { + color: darken(@accent, 5%); + } + + table, + th, + td { + border-color: @surface1 !important; + } + + thead { + background-color: @surface1; + color: @text; + } + + .forum { + background-color: @yellow; + a { + color: darken(@blue, 10%) !important; + } + } + + tbody, + .topic > tbody > tr:nth-child(2n) { + background-color: @mantle; + } + + hr { + background-color: @surface1; + } + + .signature { + border-top-color: @surface0; + } + + & when (@flavor = latte) { + a:visited:not(.flash a) { + color: darken(@accent, 10%); + } + input:active { + background-color: @surface0; + border-color: @surface2; + } + } + } +} diff --git a/styles/stylus/README.md b/styles/stylus/README.md new file mode 100644 index 0000000000..779e7ea7cb --- /dev/null +++ b/styles/stylus/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Stylus + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/stylus/catppuccin.user.less b/styles/stylus/catppuccin.user.less new file mode 100644 index 0000000000..9247ccfffd --- /dev/null +++ b/styles/stylus/catppuccin.user.less @@ -0,0 +1,272 @@ +/* ==UserStyle== +@name Stylus Catppuccin +@namespace github.com/catppuccin/userstyles/styles/stylus +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/stylus +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/stylus/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Astylus +@description Soothing pastel theme for Stylus +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document url-prefix("moz-extension://"), + url-prefix("chrome-extension://") { + :root { + &[data-ui-theme="light"] { + #catppuccin(@lightFlavor); + } + &[data-ui-theme="dark"] { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --bg: @base; + --fg: @text; + --c30: @subtext1; + --c40: @overlay0; + --c45: @surface2; + --c50: @subtext0; + --c60: @subtext0; + --c65: @surface2; + --c75: @overlay1; + --c80: @surface1; + --c85: @surface0; + --c90: @base; + --c95: @mantle; + --c97: @mantle; + --c98: @base; + --c99: @base; + --c100: @base; + --red1: @red; + --accent-1: @accent; + --accent-2: @accent; + --accent-3: fade(@accent, 25%); + + .slider { + --color-on: fade(@accent, 25%); + --color-off: @surface2; + } + + :focus { + --focus-color1: @accent !important; + --focus-color2: fade(@accent, 25%) !important; + } + + .active #filters-stats, + .dirty #save-button, + .dirty #save-button + button { + background-color: @accent; + border-color: @accent; + color: @base; + } + #header-resizer { + color: @surface1; + } + #message-box-title::before { + @fade_color: fade(@accent, 67%); + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + [src="moz-extension://8fc71d5e-96b2-44a4-8d6f-ead6ff4d3c56/images/icon/16.png"], + img[src="/images/icon/128.png"] { + @fade_color: fade(@accent, 67%); + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + #message-box.danger { + #message-box-title { + background-color: @red; + color: @base; + + &::before { + @fade_color: fade(@red, 67%); + @svg: escape( + '' + ); + background: url("data:image/svg+xml,@{svg}") !important; + } + } + + #message-box-close-icon i { + color: var(--c40); + &:hover { + color: var(--bg); + } + } + } + + #filters label:hover, + #filters .filter-selection:hover { + background-color: @surface0; + } + .oldUI .disabled h2::after, + .entry.usercss .style-name-link::after { + background-color: fade(@accent, 25%); + } + + /* Syntax highlighting */ + .CodeMirror-activeline-background { + background: @mantle; + } + .CodeMirror-linenumber { + color: @subtext0; + } + div.CodeMirror span.CodeMirror-matchingbracket { + color: @green; + } + .cm-s-default { + .cm-string { + color: @green; + } + .cm-qualifier { + color: @yellow; + } + .cm-variable-2 { + color: @mauve; + } + .cm-keyword { + color: @mauve; + } + .cm-atom { + color: @red; + } + .cm-number { + color: @peach; + } + .cm-def { + color: @mauve; + } + .cm-tag { + color: @blue; + } + .cm-builtin { + color: @red; + } + .cm-variable-3 { + color: @teal; + } + .cm-comment { + color: @overlay2; + } + .cm-operator { + color: @yellow; + } + .cm-variable { + color: @blue; + } + .cm-property { + color: @blue; + } + } + button:disabled, + select:disabled, + option:disabled, + select[disabled] > option { + color: @subtext0; + } + .applies-to input, + .applies-to select { + background: @base; + border-color: @surface0; + color: @subtext0; + } + button { + color: @text !important; + background: @mantle !important; + border-color: @surface0; + &:hover { + border-color: @text; + } + } + #save-button[disabled] { + background: @surface0 !important; + } + #message-box-title { + color: @text; + } + .svg-icon { + fill: @overlay0; + + &:hover { + fill: @overlay1; + } + } + .onoffswitch input:checked + span { + background-color: fade(@accent, 25%); + + &::before { + background-color: @accent; + } + } + #options-title { + color: @base; + } + h2 { + color: @accent !important; + } + .installed .configure-usercss { + i { + color: @accent; + } + + svg, + &:hover svg { + fill: @accent !important; + } + } + #live-reload-install-hint { + color: @teal; + } + #menu.delete { + header { + background: fade(@red, 25%); + } + + > div, + [data-cmd="delete"] { + border-color: @red; + } + } + .entry.odd { + background-color: fade(@surface0, 25%); + } + .updater-icons > :not(.check-update)::after { + border-color: @yellow; + background: @base; + } + .split-btn-menu { + border-color: @accent; + + > :hover { + background: fade(@accent, 25%); + } + } + #help-popup .title { + background: @mantle; + } + #toc li:hover { + background: fade(@accent, 20%); + } + input:invalid { + background: fade(@red, 10%); + color: @red; + } + } +} diff --git a/styles/substack/README.md b/styles/substack/README.md index 944f72da77..5c6ddd9f96 100644 --- a/styles/substack/README.md +++ b/styles/substack/README.md @@ -10,38 +10,19 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) -## 💝 Current Maintainer(s) -- [winston](https://github.com/nekowinston) +## 💖 Past Maintainer +- [nekowinston](https://github.com/nekowinston)   diff --git a/styles/substack/assets/catwalk.webp b/styles/substack/assets/catwalk.webp deleted file mode 100644 index 6c4cafae26..0000000000 --- a/styles/substack/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:938ff1118859e61e4034c4a3dd753d0a52d12b5e627ffa6caf0d1695c3c64837 -size 447708 diff --git a/styles/substack/assets/frappe.webp b/styles/substack/assets/frappe.webp deleted file mode 100644 index ecfe7fddba..0000000000 --- a/styles/substack/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0d102511135ceee31e8834f301720740fd8c49501415579e21cd8307e8da8dd8 -size 398320 diff --git a/styles/substack/assets/latte.webp b/styles/substack/assets/latte.webp deleted file mode 100644 index 0bf266f294..0000000000 --- a/styles/substack/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:58da45e27abbed50db07f8fce9d406b4ded3d436c28a9cead3aead3f1a12a2c1 -size 404810 diff --git a/styles/substack/assets/macchiato.webp b/styles/substack/assets/macchiato.webp deleted file mode 100644 index 6a0484b7dc..0000000000 --- a/styles/substack/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:38f19104d501b2ed56bfcbc0f22f08a4bd7bc783625b0c50540b524dde49c54c -size 411350 diff --git a/styles/substack/assets/mocha.webp b/styles/substack/assets/mocha.webp deleted file mode 100644 index 16d32085b4..0000000000 --- a/styles/substack/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c3f2be5053c8ad4645ae2eda6355965728e5c449935c1510554bbedf534d6df9 -size 405736 diff --git a/styles/substack/catppuccin.user.css b/styles/substack/catppuccin.user.css deleted file mode 100644 index 010bb4a86c..0000000000 --- a/styles/substack/catppuccin.user.css +++ /dev/null @@ -1,162 +0,0 @@ -/* ==UserStyle== -@name Substack Catppuccin -@namespace github.com/catppuccin/userstyles/styles/substack -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/substack -@version 0.1.0 -@description Soothing pastel theme for Substack -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/substack/catppuccin.user.css -@author Catppuccin -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire*", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] -==/UserStyle== */ -@-moz-document regexp("https:\/\/(.+\.)?substack.com/.*") { - #catppuccin(@lookup, @accent-color) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent: @catppuccin[@@lookup][@@accent-color]; - - html { - background-color: @base !important; - } - - :root, - .dark-mode { - --color-primary: @text; - --color-secondary: @subtext0; - --color-bg-primary: @base; - --color-bg-primary-rgb: #rgbify(@base) []; - --web_bg_color: @base; - --color-bg-primary-hover: mix(@surface0, @base, 50%); - --color-bg-secondary: @mantle; - --color-bg-tertiary: @crust; - --color-dark-bg-tertiary: @crust; - --color-dark-primary: @text; - --color-bg-elevated: @surface0; - --color-bg-elevated-hover: mix(@surface1, @surface0, 50%); - --color-accent-themed: @accent; - --color-bg-secondary-opacity: @surface0; - --color-bg-secondary-themed: @surface0; - --color-accent-inverse-themed: @crust; - --color-light-bg-primary: @crust; - --color-accent-primary: @accent; - --color-accent-substack: @accent; - --color-accent-blue: @blue; - --color-accent-red: @red; - --color-accent-purple: @mauve; - --color-accent-facebook: @blue; - --color-light-bg-primary: @crust; - --color-accent-error: @red; - --color-detail: @surface1; - --color-dark-bg-primary: @mantle; - - // subdomains - --print_on_web_bg_color: @text; - --color-secondary-themed: @subtext0; - --print_secondary_on_web_bg_color: @subtext0; - --background_pop: @peach; - --print_pop: @peach; - --print_on_pop: @crust; - --print_secondary: @subtext0; - --web_bg_color: @base; - --color-tertiary: @crust; - --background_contrast_1: @crust; - --background_contrast_2: mix(@crust, @mantle, 50%); - --background_contrast_3: @mantle; - --background_contrast_4: mix(@mantle, @base, 33%); - --background_contrast_5: mix(@mantle, @base, 66%); - --color_theme_bg_contrast_1: @surface0; - --color_theme_bg_contrast_2: mix(@surface0, @surface1, 50%); - --color_theme_bg_contrast_3: @surface1; - --color_theme_bg_contrast_4: mix(@surface1, @surface2, 50%); - --color_theme_bg_contrast_5: @surface2; - - // used for podcast play controls - --color_theme_bg_pop_rgb: #rgbify(@accent) []; - --color_theme_print_on_pop: @crust; - } - - // brand colors in SVGs - // Substack orange - *[stroke="#ff6719"], - *[stroke="#FF6719"] { - stroke: @peach !important; - } - *[fill="#ff6719"], - *[fill="#FF6719"] { - fill: @peach !important; - } - - .footer-wrap .footer .footer-substack-cta { - background-color: @base; - } - - .reader-nav-top.pinned { - background-color: rgba(#rgbify(@base) [], 85%); - backdrop-filter: var(--glass); - } - - // toggle switches - .tailwind-preflight button span { - background-color: @base !important; - } - - // restack quote popup - div[class*="frontend-components-selection_popover-module"] { - * { - color: @text !important; - background: @base !important; - border-color: @surface0 !important; - stroke: @text !important; - } - } - } - - @media (prefers-color-scheme: dark) { - #catppuccin(@darkFlavor, @accentColor); - } - @media (prefers-color-scheme: light) { - #catppuccin(@lightFlavor, @accentColor); - } - - #rgbify(@color) { - @rgb-raw: red(@color), green(@color), blue(@color); - } - - // prettier-ignore - @catppuccin: { - @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; - @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; - @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; - @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; - } -} - -// vim:ft=less diff --git a/styles/substack/catppuccin.user.less b/styles/substack/catppuccin.user.less new file mode 100644 index 0000000000..131a9355fc --- /dev/null +++ b/styles/substack/catppuccin.user.less @@ -0,0 +1,261 @@ +/* ==UserStyle== +@name Substack Catppuccin +@namespace github.com/catppuccin/userstyles/styles/substack +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/substack +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/substack/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Asubstack +@description Soothing pastel theme for Substack +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("substack.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + color: @text; + background-color: @base !important; + + &, + .dark-mode, + .dark-theme, + [class*="_pubTheme_"] { + --color-bg-primary: @base; + --color-bg-primary-rgb: #lib.rgbify(@base)[]; + --color-bg-primary-raw: #lib.rgbify(@base)[]; + --color-bg-primary-hover: @surface0; + --color-bg-secondary: @surface0; + --color-bg-tertiary: @surface1; + --color-bg-elevated-primary: @mantle; + --color-bg-elevated-secondary: @crust; + --color-fg-primary: @text; + --color-fg-secondary: @subtext1; + --color-fg-tertiary: @subtext0; + --color-utility-detail: @surface1; + --color-utility-white: @text; + --color-detail-themed: @surface1; + --color-accent-themed: @accent; + + --color-accent-fg-red: @red; + --color-accent-bg-red: fade(@red, 20%); + --color-semantic-error-bg-primary: @red; + --color-semantic-error-utility-contrast: @crust; + + --color-accent-fg-orange: @accent; + --color-accent-bg-orange: fade(@accent, 20%); + + --color-accent-fg-green: @green; + --color-accent-bg-green: fade(@green, 20%); + + --color-accent-fg-cyan: @blue; + --color-accent-bg-cyan: fade(@blue, 20%); + + /* Buttons */ + --color-button-primary-bg: @accent; + --color-button-primary-bg-hover: darken(@accent, 5%); + --color-button-primary-fg: @crust; + + --color-button-secondary-bg: @surface0; + --color-button-secondary-bg-hover: @surface1; + --color-button-secondary-fg: @text; + + --color-button-tertiary-bg-hover: @surface1; + --color-button-tertiary-fg: @text; + + --color-button-mono-bg: @text; + --color-button-mono-bg-hover: @subtext1; + --color-button-mono-fg: @crust; + + --color-button-disabled-fg: @subtext0; + + /* Tooltips & Toasts */ + --color-bg-tooltip: @mantle; + --material-thick: @mantle; + + --print_pop: @accent; + --print_secondary: @subtext1; + --background_pop: @accent; + --print_on_pop: @crust; + --color_theme_bg_pop: @accent; + --color_theme_bg_pop_darken: darken(@accent, 5%); + --color_theme_print_on_pop: @crust; + --border_subtle: @surface1; + --background_contrast_1: @mantle; + --background_contrast_2: @surface2; + --color_theme_bg_contrast_1: @surface1; + --color_theme_bg_contrast_2: @overlay0; + --color_theme_bg_contrast_4: @subtext0; + + --color-chat-other-fg-secondary: @subtext1; + + --color-semantic-select-fg-primary: @accent; + --color-semantic-select-utility-detail: fade(@accent, 20%); + --color-semantic-highlight-fg-primary: @accent; + + /* Weird variables issue fixes */ + --color-light-bg-primary: @mantle; /* Was text, changing to mantle for (select text) -> Share -> Download button color. Might break things */ + --color-light-bg-secondary: @surface0; /* substack.com homepage sections */ + --color-dark-bg-primary: @mantle; + --color-dark-bg-secondary: @base; + --color-dark-bg-tertiary: @surface0; + + /* Publications with different variables */ + --color-primary-themed: @text; + --color-secondary-themed: @subtext1; + + --color-bg-secondary-themed: @surface0; + + --web_bg_color: @mantle; + --print_on_web_bg_color: @text; + --print_secondary_on_web_bg_color: @subtext1; + + /* Share button */ + --material-dark-regular: @mantle; + /* Copy (heading link) to clipboard notification */ + --material-dark-thick: @crust; + /* Button hover, faded to 0.1 */ + --color-primitive-white-rgb: #lib.rgbify(@text)[]; + + /* Various full screen modals for singing up, subscribing etc */ + --cover_print_primary: @text; + --cover_print_secondary: @subtext1; + --cover_print_tertiary: @subtext0; + --cover_bg_color: @base; + --cover_input_background: @mantle; + } + + /* Substack logos */ + [fill="#ff6719" i] { + fill: @accent !important; + } + /* Inverted logo colors */ + [fill="#FFFFFF" i] { + fill: @crust !important; + } + + /* Footer */ + .footer-wrap { + &, + .footer { + background-color: @mantle; + } + + .home-footer { + &, + a, + .footer-info .footer-info-col h3 { + color: @text; + } + } + } + .subscribe-footer .button.primary { + border-color: @crust; + } + + /* Signup, onboarding, and profile */ + + .homepage-nav .homepage-nav-bar .homepage-nav-wrap.grey { + background-color: @base; + } + .signup-page { + background-color: @base; + + .signup-box-wrap .error { + color: @red; + } + } + + .onboarding-profile-page { + .accept-tos * { + color: @subtext1; + } + + .skip-button { + color: @text; + } + } + + .profile-page .set-up-profile-button { + color: @crust; + } + .edit-profile-page .publication-section .all-toggle { + color: @subtext1; + } + + /* Misc inputs */ + button[role="switch"], + input[type="radio"] + span { + --color-utility-white: @surface0; + } + + input[type="text"], + input[type="date"], + select { + background-color: @mantle; + color: @text; + } + + .themed-select > div { + background-color: @mantle; + border-color: @surface0; + + * { + color: @text; + } + } + + [aria-label="File Picker"] { + background-color: @base; + } + + /* Dashboard */ + + /* Icons */ + [stroke="#888888"], + [stroke="#555555"] { + stroke: @subtext1 !important; + } + + /* Import posts */ + .signup-page > .container .signup-box { + background-color: @base; + } + + /* Stats */ + .subscriber-stats-page { + .heading .options .header-option .header-button { + background-color: @surface0; + } + + table { + td, + th { + background-color: @base; + } + } + } + + /* Editor */ + .tw-bg-pub-accent { + background-color: @accent !important; + } + } +} diff --git a/styles/syncthing/README.md b/styles/syncthing/README.md new file mode 100644 index 0000000000..998738807d --- /dev/null +++ b/styles/syncthing/README.md @@ -0,0 +1,37 @@ + + + +

+ Logo
+ + Catppuccin for Syncthing + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + +> [!NOTE] +> This theme is designed to be used with the default WebGUI and default theme provided by Syncthing. This does not theme syncthing.net. + +## 💝 Current Maintainer +- [BlankParticle](https://github.com/BlankParticle) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/syncthing/catppuccin.user.less b/styles/syncthing/catppuccin.user.less new file mode 100644 index 0000000000..a1955bf1f5 --- /dev/null +++ b/styles/syncthing/catppuccin.user.less @@ -0,0 +1,297 @@ +/* ==UserStyle== +@name Syncthing Catppuccin +@namespace github.com/catppuccin/userstyles/styles/syncthing +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/syncthing +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/syncthing/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Asyncthing +@description Soothing pastel theme for Syncthing +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] + +@var text urls "URL(s) for Syncthing" "127\.0\.0\.1\:8384,0\.0\.0\.0\:8384,localhost\:8384" +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +/* + `replace( ," ", "", "g")` is here to remove extra spaces (if any) +*/ + +@-moz-document regexp( + replace(replace(%("https?://(%s)/.*", @urls), ",", "|", "g"), " ", "", "g") + ) { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + .light-theme { + #catppuccin(@lightFlavor); + } + .dark-theme { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + body { + color: @text !important; + background-color: @base !important; + } + + a { + color: @accent; + } + + .nav-tabs > li.active > a:hover, + .nav-tabs > li.active > a { + color: @accent !important; + } + + /* navbar */ + .navbar { + background-color: @mantle !important; + border-color: @mantle !important; + } + + .navbar-text, + .dropdown > a, + .dropdown-menu > li > a, + .hidden-xs > a, + .navbar-link { + color: @text !important; + } + + .dropdown-menu { + border-color: @surface1 !important; + background-color: @mantle !important; + } + + .dropdown-menu > li > a:hover, + .dropdown-menu > li > a:focus { + color: @text !important; + background-color: @surface0 !important; + } + + .open > .dropdown-toggle, + .dropdown-toggle:hover { + border-color: @surface1 !important; + background-color: @surface0 !important; + } + + .divider { + background-color: @surface1 !important; + } + + li.hidden-xs:hover, + .navbar-link:hover, + .navbar-link:focus { + border-color: @surface1 !important; + background-color: @surface0 !important; + } + + .dropdown-menu > .active > a { + color: @base !important; + background-color: @accent !important; + } + + /* main panel */ + .panel { + background-color: @base !important; + } + + .panel-default { + border-color: @surface0 !important; + } + + .panel-default > .panel-heading { + color: @text !important; + border-color: @surface0 !important; + background-color: @surface0 !important; + } + + .panel-footer { + background-color: @base !important; + } + + .table-striped > tbody > tr { + border-top-color: @surface0 !important; + } + + .table-striped > tbody > tr:nth-of-type(odd) { + background-color: @base !important; + } + + .panel-group .panel-heading + .panel-collapse > .panel-body, + .panel-group .panel-heading + .panel-collapse > .list-group { + border-top-color: @base !important; + } + + .identicon > rect { + fill: @text !important; + } + + /* buttons */ + .btn-default { + color: @text !important; + background-color: transparent !important; + border-color: @surface0 !important; + } + + .btn-default:hover, + .btn-default:focus, + .btn-default.focus { + color: @text !important; + background-color: @surface0 !important; + } + + .btn-primary { + background-color: @accent !important; + color: @base; + } + + .btn-primary:hover, + .btn-primary:focus, + .btn-primary.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; + } + + .btn-danger { + background-color: @red !important; + color: @base; + } + + .btn-danger:hover, + .btn-danger:focus, + .btn-danger.focus { + background-color: fade(@red, 90%) !important; + } + + /* modal dialogs */ + .modal-header { + border-color: @surface0 !important; + background-color: @mantle; + } + + .modal-content { + border-color: @surface0 !important; + background-color: @mantle !important; + } + + .modal-footer { + border-color: @surface0 !important; + background-color: @mantle !important; + } + + .alert-warning { + background-color: @yellow !important; + color: @base !important; + } + + .alert-danger { + background-color: @red !important; + color: @base !important; + } + + .help-block { + color: @text !important; + } + + .form-control { + color: @text !important; + border-color: @surface0 !important; + background-color: @base !important; + } + + code.ng-binding { + color: @mauve !important; + background-color: @mantle !important; + } + + .well, + .form-control[readonly="readonly"] { + /* read-only fields */ + color: @subtext0 !important; + border-color: @subtext0 !important; + background-color: @mantle !important; + } + + /* buttons for pagination */ + .pagination > li > a, + .pagination > li > span { + background-color: @base !important; + border-color: @surface0 !important; + } + + .pagination > li > a:hover, + .pagination > li > a:focus, + .pagination > li > a.focus { + background-color: @surface0 !important; + } + + /* progress bars */ + .progress-bar { + background-color: @accent !important; + } + + .progress-bar-success { + background-color: @green !important; + } + + .progress-bar-info { + background-color: @flamingo !important; + } + + .progress-bar-warning { + background-color: @yellow !important; + } + + .progress-bar-danger { + background-color: @red !important; + } + + /* text */ + .text-primary { + color: @accent !important; + } + + .text-success { + color: @green !important; + } + + .text-info { + color: @flamingo !important; + } + + .text-warning { + color: @yellow !important; + } + + .text-danger { + color: @red !important; + } + } +} diff --git a/styles/tabnews/README.md b/styles/tabnews/README.md new file mode 100644 index 0000000000..20839faf74 --- /dev/null +++ b/styles/tabnews/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for TabNews + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [Guaxinim5573](https://github.com/Guaxinim5573) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/tabnews/catppuccin.user.less b/styles/tabnews/catppuccin.user.less new file mode 100644 index 0000000000..f5ae9112bf --- /dev/null +++ b/styles/tabnews/catppuccin.user.less @@ -0,0 +1,234 @@ +/* ==UserStyle== +@name TabNews Catppuccin +@namespace github.com/catppuccin/userstyles/styles/tabnews +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/tabnews +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/tabnews/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atabnews +@description Soothing pastel theme for TabNews +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("tabnews.com.br") { + :root:has(div[data-color-mode="dark"]) { + #catppuccin(@darkFlavor); + } + :root:has(div[data-color-mode="light"]) { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --bgColor-default: @base; + --bgColor-emphasis: @crust; + --fgColor-default: @text; + --bgColor-neutral-emphasis: @subtext0; + --bgColor-accent-emphasis: @accent; + --fgColor-accent: @accent; + --fgColor-onEmphasis: @text; + --color-accent-fg: @accent; + --fgColor-muted: @overlay0; + --borderColor-default: @surface0; + --button-default-bgColor-rest: @base; + --button-default-bgColor-hover: @crust; + --button-default-fgColor-rest: @text; + --button-default-fgColor-hover: @text; + --button-primary-bgColor-rest: @accent; + --button-primary-bgColor-disabled: fade(@accent, 85%); + --button-primary-fgColor-disabled: @text; + --button-primary-fgColor-rest: @surface0; + --button-primary-bgColor-hover: darken(@accent, 5%); + --button-primary-fgColor-hover: @surface0; + --button-default-bgColor-active: @base; + --controlKnob-bgColor-rest: @crust; + --bgColor-accent-muted: @mantle; + --fgColor-danger: @red; + --button-danger-bgColor-hover: @red; + --control-danger-fgColor-hover: @red; + --control-danger-bgColor-hover: @mantle; + --bgColor-success-emphasis: @green; + --fgColor-success: @green; + + input[type="checkbox"] { + --fgColor-onEmphasis: @surface0; + } + + /* Create post box */ + --codeMirror-fgColor: @text; + --bgColor-muted: @base; + --bgColor-inset: @base; + --color-prettylights-syntax-markup-heading: @text; + --color-prettylights-syntax-markup-inserted-text: @subtext0; + --color-prettylights-syntax-string: @blue; + + /* Header */ + --header-bgColor: @mantle; + --header-fgColor-default: @text; + --color-header-text: @text; + --header-fgColor-logo: @text; + --color-header-logo: @text; + --color-checks-input-placeholder-text: @text; + --headerSearch-bgColor: @mantle; + --headerSearch-borderColor: @overlay0; + --color-prettylights-syntax-variable: @mauve; + --color-prettylights-syntax-markup-list: @text; + + #nprogress .bar { + background: @accent; + } + + /* Style the button to change theme when light theme is on */ + button[style="--button-color: #e7dfc3;"] svg { + color: @sky; + } + + button[style="--button-color: #ecdc0f99;"] svg { + color: @yellow; + } + + svg[fill="#0969da"] { + fill: @blue; + } + svg[fill="#2da44e"] { + fill: @green; + } + + /* Style the "Status" page */ + text { + fill: @text; + } + + path.recharts-rectangle { + fill: @accent; + } + + path.recharts-rectangle.recharts-tooltip-cursor { + fill: @overlay0; + } + + div.recharts-default-tooltip { + border-color: @overlay0 !important; + } + + li.recharts-tooltip-item { + color: @accent !important; + } + + div[overflow="hidden"] { + border-color: @overlay0; + * { + border-color: @overlay0; + } + } + + /* Style the "Search with Google" overlay box */ + div[class*="Overlay__StyledOverlay"] { + background: @base; + + h2 { + color: @text; + } + + .gsc-control-cse { + background: @base; + border-color: transparent; + } + + .gsc-input-box { + background: @base; + border-color: @overlay0; + } + + .gsc-input { + background: transparent; + color: @text; + } + + .gsc-search-button > button { + border-color: @overlay0; + background: @base !important; + svg { + fill: @text; + } + } + } + + .gsc-completion-container { + background: @base !important; + border-color: @overlay0; + + .gsc-completion-selected { + background: @crust; + } + span { + color: @text !important; + } + } + + .gsc-refinementhActive, + .gsc-refinementhInactive { + color: @text; + background: @base; + border-color: @accent; + } + + .gsc-option-menu-container { + color: @text; + .gsc-selected-option-container { + background: @base; + border-color: @text; + color: @text; + } + .gsc-option-menu { + background: @base; + .gsc-option-menu-item-highlighted { + background: @crust; + } + } + } + + .gsc-result-info, + .gsc-orderby-label, + .gs-label, + .gs-title, + .gs-snippet, + .gsc-option-menu-item, + .gscb_a { + color: @text !important; + b { + color: @text !important; + } + } + + .gsc-webResult { + border-color: transparent; + background: @base; + .gsc-url-top > * { + color: @accent; + } + } + + .gsc-cursor-page { + background: @base; + color: @text; + border-color: @text; + } + + .gcsc-find-more-on-google { + color: @text; + svg { + fill: @text; + } + } + } +} diff --git a/styles/tldraw/README.md b/styles/tldraw/README.md new file mode 100644 index 0000000000..477381ff86 --- /dev/null +++ b/styles/tldraw/README.md @@ -0,0 +1,40 @@ + + + +

+ Logo
+ + Catppuccin for tldraw + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + +> [!NOTE] +> This theme only changes how the colors appear on the tldraw canvas. Exported graphics **will not be Catppuccin-themed**. + +## 💝 Current Maintainer +- [NekoDrone](https://github.com/NekoDrone) + +## 💖 Past Maintainers +- [GenShibe](https://github.com/GenShibe) +- [uncenter](https://github.com/uncenter) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/tldraw/catppuccin.user.less b/styles/tldraw/catppuccin.user.less new file mode 100644 index 0000000000..51301792e5 --- /dev/null +++ b/styles/tldraw/catppuccin.user.less @@ -0,0 +1,477 @@ +/* ==UserStyle== +@name tldraw Catppuccin +@namespace github.com/catppuccin/userstyles/styles/tldraw +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/tldraw +@version 2025.09.10 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/tldraw/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atldraw +@description Soothing pastel theme for tldraw +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("tldraw.com") { + .tl-theme__dark { + #catppuccin(@darkFlavor); + } + + .tl-theme__light { + #catppuccin(@lightFlavor); + } + + :root:has(.tl-container.tl-theme__dark) .cl-modalContent { + #catppuccin(@darkFlavor); + } + + :root:has(.tl-container.tl-theme__light) .cl-modalContent { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --tl-color-background: @mantle; + --tl-color-low: @base; + --tl-color-low-border: @base; + --tl-color-panel: @surface0; + --tl-color-panel-contrast: @surface1; + --tl-color-primary: @accent; + --tl-color-success: @green; + --tl-color-info: @sky; + --tl-color-warning: @peach; + --tl-color-danger: @maroon; + --tl-color-laser: @red; + --tl-color-selected: @accent; + --tl-color-text: @text; + --tl-color-text-1: @text; + --tl-color-text-2: @subtext1; + --tl-color-text-3: @subtext0; + --tl-color-selected-contrast: @crust; + --tl-color-snap: @red; + --tl-color-selection-stroke: @accent; + --tl-color-divider: @surface1; + --tl-color-grid: @overlay1; + --tla-color-primary: @accent; + --tla-color-primary-hover: fade(@accent, 80%); + --tla-color-sidebar: @surface0; + --tla-color-cta: @accent; + --tla-color-cta-hover: fade(@accent, 80%); + --tla-color-text-1: @text; + --tla-color-text-2: @subtext1; + --tla-color-text-3: @subtext0; + --tla-color-contrast: @crust; + + @violet: darken(@mauve, 20%); + @dark-green: darken(@green, 15%); + @dark-red: darken(@red, 10%); + + button.tla-primary-button > span.i18n-msg { + color: var(--tla-color-contrast); + } + + /* colours on canvas */ + div.tl-shape { + svg.tl-svg-container { + /* pencil draw shape fills */ + path[fill="#f2f2f2"], + path[fill="#1d1d1d"] { + fill: @text; + } + + path[fill="#9398b0"], + path[fill="#9fa8b2"] { + fill: @overlay2; + } + + path[fill="#e599f7"], + path[fill="#e085f4"] { + fill: @mauve; + } + + path[fill="#ae3ec9"] { + fill: @violet; + } + + path[fill="#4f72fc"], + path[fill="#4465e9"] { + fill: @blue; + } + + path[fill="#4dabf7"], + path[fill="#4ba1f1"] { + fill: @sky; + } + + path[fill="#ffc034"], + path[fill="#f1ac4b"] { + fill: @yellow; + } + + path[fill="#f76707"], + path[fill="#e16919"] { + fill: @peach; + } + + path[fill="#099268"] { + fill: @dark-green; + } + + path[fill="#40c057"], + path[fill="#4cb05e"] { + fill: @green; + } + + path[fill="#ff8787"], + path[fill="#f87777"] { + fill: @red; + } + + path[fill="#e03131"] { + fill: @dark-red; + } + + /* shape outlines (path), arrow strokes (g) */ + path[stroke="#f2f2f2"], + path[stroke="#1d1d1d"], + g[stroke="#f2f2f2"], + g[stroke="#1d1d1d"] { + stroke: @text; + } + + path[stroke="#9398b0"], + path[stroke="#9fa8b2"], + g[stroke="#9398b0"], + g[stroke="#9fa8b2"] { + stroke: @overlay2; + } + + path[stroke="#e599f7"], + path[stroke="#e085f4"], + g[stroke="#e599f7"], + g[stroke="#e085f4"] { + stroke: @mauve; + } + + path[stroke="#ae3ec9"], + g[stroke="#ae3ec9"] { + stroke: @violet; + } + + path[stroke="#4f72fc"], + path[stroke="#4465e9"], + g[stroke="#4f72fc"], + g[stroke="#4465e9"] { + stroke: @blue; + } + + path[stroke="#4dabf7"], + path[stroke="#4ba1f1"], + g[stroke="#4dabf7"], + g[stroke="#4ba1f1"] { + stroke: @sky; + } + + path[stroke="#ffc034"], + path[stroke="#f1ac4b"], + g[stroke="#ffc034"], + g[stroke="#f1ac4b"] { + stroke: @yellow; + } + + path[stroke="#f76707"], + path[stroke="#e16919"], + g[stroke="#f76707"], + g[stroke="#e16919"] { + stroke: @peach; + } + + path[stroke="#099268"], + g[stroke="#099268"] { + stroke: @dark-green; + } + + path[stroke="#40c057"], + path[stroke="#4cb05e"], + g[stroke="#40c057"], + g[stroke="#4cb05e"] { + stroke: @green; + } + + path[stroke="#ff8787"], + path[stroke="#f87777"], + g[stroke="#ff8787"], + g[stroke="#f87777"] { + stroke: @red; + } + + path[stroke="#e03131"], + g[stroke="#e03131"] { + stroke: @dark-red; + } + + /* shape fill - solid */ + path[fill="#2c3036"], + path[fill="#e8e8e8"] { + fill: fade(@text, 20%); + } + + path[fill="#33373c"], + path[fill="#eceef0"] { + fill: fade(@overlay2, 20%); + } + + path[fill="#383442"], + path[fill="#f5eafa"] { + fill: fade(@mauve, 20%); + } + + path[fill="#342938"], + path[fill="#ecdcf2"] { + fill: fade(@violet, 20%); + } + + path[fill="#262d40"], + path[fill="#dce1f8"] { + fill: fade(@blue, 20%); + } + + path[fill="#2a3642"], + path[fill="#ddedfa"] { + fill: fade(@sky, 20%); + } + + path[fill="#3b352b"], + path[fill="#f9f0e6"] { + fill: fade(@yellow, 20%); + } + + path[fill="#3b2e27"], + path[fill="#f8e2d4"] { + fill: fade(@peach, 20%); + } + + path[fill="#253231"], + path[fill="#d3e9e3"] { + fill: fade(@dark-green, 20%); + } + + path[fill="#2a3830"], + path[fill="#dbf0e0"] { + fill: fade(@green, 20%); + } + + path[fill="#3c2b2b"], + path[fill="#f4dadb"] { + fill: fade(@red, 20%); + } + + path[fill="#382726"] { + fill: fade(@dark-red, 20%); + } + } + + /* sticky notes */ + div.tl-note__container { + &[style*="background-color: rgb(44, 44, 44);"] { + background-color: @surface0 !important; + } + + &[style*="background-color: rgb(86, 89, 95);"], + &[style*="background-color: rgb(192, 202, 211)"] { + background-color: @overlay2 !important; + } + + &[style*="background-color: rgb(118, 47, 142);"], + &[style*="background-color: rgb(223, 176, 249)"] { + background-color: fade(@mauve, 40%) !important; + } + + &[style*="background-color: rgb(95, 28, 112);"], + &[style*="background-color: rgb(219, 145, 253)"] { + background-color: fade(@violet, 40%) !important; + } + + &[style*="background-color: rgb(42, 63, 152);"], + &[style*="background-color: rgb(138, 163, 255)"] { + background-color: fade(@blue, 40%) !important; + } + + &[style*="background-color: rgb(31, 84, 149);"], + &[style*="background-color: rgb(155, 196, 253)"] { + background-color: fade(@sky, 40%) !important; + } + + /* in light mode, the 'white' coloured sticky note is yellow, so we override it here */ + &[style*="background-color: rgb(138, 94, 28);"], + &[style*="background-color: rgb(254, 212, 154)"], + &[style*="background-color: rgb(252, 225, 156)"] { + background-color: fade(@yellow, 40%) !important; + } + + &[style*="background-color: rgb(124, 57, 5);"], + &[style*="background-color: rgb(250, 164, 117)"] { + background-color: fade(@peach, 40%) !important; + } + + &[style*="background-color: rgb(1, 68, 41);"], + &[style*="background-color: rgb(111, 200, 150)"] { + background-color: fade(@dark-green, 60%) !important; + } + + &[style*="background-color: rgb(33, 88, 29);"], + &[style*="background-color: rgb(152, 208, 138)"] { + background-color: fade(@green, 40%) !important; + } + + &[style*="background-color: rgb(122, 51, 51);"], + &[style*="background-color: rgb(247, 165, 161)"] { + background-color: fade(@red, 40%) !important; + } + + &[style*="background-color: rgb(126, 32, 31);"], + &[style*="background-color: rgb(252, 130, 130)"] { + background-color: fade(@dark-red, 40%) !important; + } + } + } + + /* canvas text */ + div.tl-text-content__wrapper { + &[style*="color: rgb(242, 242, 242)"], + &[style*="color: rgb(29, 29, 29)"] { + color: @text !important; + } + + &[style*="color: rgb(147, 152, 176)"], + &[style*="color: rgb(159, 168, 178)"] { + color: @overlay2 !important; + } + + &[style*="color: rgb(229, 153, 247)"], + &[style*="color: rgb(224, 133, 244)"] { + color: @mauve !important; + } + + &[style*="color: rgb(174, 62, 201)"] { + color: @violet !important; + } + + &[style*="color: rgb(79, 114, 252)"], + &[style*="color: rgb(68, 101, 233)"] { + color: @blue !important; + } + + &[style*="color: rgb(77, 171, 247)"], + &[style*="color: rgb(75, 161, 241)"] { + color: @sky !important; + } + + &[style*="color: rgb(255, 192, 52)"], + &[style*="color: rgb(241, 172, 75)"] { + color: @yellow !important; + } + + &[style*="color: rgb(247, 103, 7)"], + &[style*="color: rgb(225, 105, 25)"] { + color: @peach !important; + } + + &[style*="color: rgb(9, 146, 104)"] { + color: @dark-green !important; + } + + &[style*="color: rgb(64, 192, 87)"], + &[style*="color: rgb(76, 176, 94)"] { + color: @green !important; + } + + &[style*="color: rgb(255, 135, 135)"], + &[style*="color: rgb(248, 119, 119)"] { + color: @red !important; + } + + &[style*="color: rgb(224, 49, 49)"] { + color: @dark-red !important; + } + } + + /* colour selection button fills */ + + [data-id="black"] { + color: @text !important; + } + + [data-id="grey"] { + color: @overlay2 !important; + } + + [data-id="light-violet"] { + color: @mauve !important; + } + + [data-id="violet"] { + color: @violet !important; + } + + [data-id="blue"] { + color: @blue !important; + } + + [data-id="light-blue"] { + color: @sky !important; + } + + [data-id="yellow"] { + color: @yellow !important; + } + + [data-id="orange"] { + color: @peach !important; + } + + [data-id="green"] { + color: @dark-green !important; + } + + [data-id="light-green"] { + color: @green !important; + } + + [data-id="light-red"] { + color: @red !important; + } + + [data-id="red"] { + color: @dark-red !important; + } + + /* clerk components */ + --clerk-color-background: @mantle; + --clerk-color-primary: @text; + --clerk-color-primary-foreground: @crust; + --clerk-color-foreground: @subtext1; + --clerk-color-neutral: @text; + --clerk-color-input: @base; + --clerk-color-input-foreground: @text; + --clerk-color-border: @text; + + .cl-socialButtonsBlockButton:hover { + background-color: @surface0; + } + + .cl-logoImage { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } +} diff --git a/styles/trinket/README.md b/styles/trinket/README.md new file mode 100644 index 0000000000..a42c25b7f6 --- /dev/null +++ b/styles/trinket/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Trinket + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [trinkey](https://github.com/trinkey) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/trinket/catppuccin.user.less b/styles/trinket/catppuccin.user.less new file mode 100644 index 0000000000..9ccf64c4c8 --- /dev/null +++ b/styles/trinket/catppuccin.user.less @@ -0,0 +1,1255 @@ +/* ==UserStyle== +@name Trinket Catppuccin +@namespace github.com/catppuccin/userstyles/styles/trinket +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/trinket +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/trinket/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atrinket +@description Soothing pastel theme for Trinket +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("trinket.io") { + @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css"); + + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + .ace_editor { + background-color: @crust; + color: @text; + + .ace_gutter { + background: @mantle; + color: @overlay1; + } + .ace_print-margin { + background: @mantle; + } + + .ace_marker-layer { + .ace_active-line { + background-color: fade(@yellow, 20%); + } + .highlight-line-error { + background-color: fade(@red, 20%); + } + .ace_bracket { + border-color: @overlay1; + } + } + + .ace_cursor { + color: @text; + } + .ace_marker-layer .ace_selection { + background: fade(@accent, 30%); + } + .ace_fold { + background-color: @surface0; + border-color: @surface1; + } + + .ace_constant.ace_language, + .ace_keyword, + .ace_meta, + .ace_variable.ace_language { + color: @mauve; + } + .ace_line .ace_identifier:not(:first-of-type) { + color: @blue; + } + .ace_paren { + color: @red; + } + .ace_constant.ace_numeric { + color: @peach; + } + .ace_entity.ace_other.ace_attribute-name, + .ace_support.ace_constant, + .ace_support.ace_function { + color: @teal; + } + .ace_entity.ace_name.ace_tag, + .ace_support.ace_class, + .ace_support.ace_type { + color: @blue; + } + .ace_storage { + color: @peach; + } + .ace_string { + color: @green; + } + .ace_comment { + color: @overlay2; + } + + .ace_indent-guide { + @svg: escape( + '' + ); + + background-image: url("data:image/svg+xml;utf8,@{svg}"); + } + } + + #ace_settingsmenu { + background-color: @mantle !important; + box-shadow: none !important; + color: @subtext0; + } + + body { + background-color: @base !important; + color: @text !important; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: @text !important; + } + + a { + color: @accent; + text-decoration-color: @accent; + + &:hover { + color: @accent; + } + } + + hr, + fieldset { + border-color: @surface0 !important; + } + + footer { + border-top-color: @surface0 !important; + background-color: @mantle !important; + } + + code { + background-color: @mantle !important; + color: @text !important; + } + + select { + background-color: @crust !important; + border-color: @surface0 !important; + color: @text !important; + } + + iframe[frameborder] { + border-color: @surface0 !important; + } + + label { + color: @subtext0 !important; + } + + table { + background-color: @base !important; + border-color: @surface0 !important; + + th, + td { + color: @text !important; + } + + tr.even, + tr.alt, + tr:nth-of-type(2n) { + background-color: @mantle !important; + } + + thead { + background-color: @mantle !important; + } + } + + input, + textarea { + background-color: @crust !important; + color: @text !important; + border-color: @surface0 !important; + } + + textarea.lined { + background-color: @base !important; + } + + path[fill="#444444"] { + fill: @text !important; + } + + pre { + border-color: @surface0 !important; + background-color: @mantle !important; + } + + #page.hfeed a:hover { + border-bottom-color: @accent !important; + } + + .author-section { + box-shadow: none !important; + } + + .code-editor .expander { + background-image: linear-gradient( + to right, + fade(@mantle, 0%), + @mantle 50% + ) !important; + } + + .sidebar-content a:hover { + color: @accent !important; + } + + .progress { + border-color: @surface0 !important; + background-color: @crust !important; + color: @base !important; + } + + .sidebar { + box-shadow: 1px 0 15px fade(@crust, 50%) !important; + background-color: @base !important; + } + + .sidebar-top { + background-color: @base !important; + border-bottom-color: @surface0 !important; + } + + .meter.green { + background-color: @green !important; + } + + .file-upload { + background-color: @crust !important; + border-color: @surface0 !important; + color: @text !important; + } + + .notifyjs-foundation-success, + .alert-box.success { + color: @base !important; + background-color: @green !important; + border-color: @green !important; + } + + .alert-box.alert, + .alert-box.code-error { + color: @base !important; + background-color: @red !important; + border-color: @red !important; + } + + .lineno, + article .categories, + article .date, + article .date a { + color: @subtext0 !important; + + &a:hover { + color: @accent !important; + } + } + + .linedwrap .lines { + border-right-color: @surface0; + } + + .codelines { + background-color: @mantle !important; + } + + span.beta { + color: @accent !important; + } + + .resources a { + color: @text !important; + + &:hover .book-item { + box-shadow: 0 0 15px @surface0 !important; + } + } + + #trinket-gallery #trinketDetails a.closer { + border-color: @surface0 !important; + background-color: @crust !important; + } + + .panel { + background-color: @crust !important; + color: @text !important; + border-color: @surface0 !important; + + li { + color: @subtext0 !important; + } + } + + .code-plan-colors, + .code-label, + .code-name, + .codeplus-plan-colors, + .codeplus-label, + .codeplus-name, + .connect-plan-colors, + .connect-label, + .connect-name, + .classroom-plan-colors, + .classroom-label, + .classroom-name, + i.trinket-key.logo { + background-color: @accent !important; + color: @base !important; + } + + .code-plan-colors-inverted, + .connect-plan-colors-inverted, + .classroom-plan-colors-inverted { + color: @accent; + } + + .nav-wrapper, + .entry-footer { + border-bottom-color: @surface0 !important; + } + + .top-bar, + .top-bar-section ul li, + .top-bar-section li:not(.has-form) a:not(.button, .faux-button), + .name { + background-color: @crust !important; + } + + .top-bar-section li:not(.has-form) a:not(.button, .faux-button):hover { + background-color: @mantle !important; + } + + .angular-ui-tree-placeholder { + background-color: @base !important; + border-color: @surface0 !important; + } + + .editable-click:hover, + a.editable-click:hover { + color: @accent !important; + } + + .outline-list-item.lesson { + border-bottom-color: @surface0 !important; + } + + .intercom-namespace .intercom-o8wqhy { + box-shadow: none; + } + + .intercom-lightweight-app-launcher-icon-open svg path { + fill: @base !important; + } + + .intercom-lightweight-app-launcher { + background-color: @accent !important; + } + + .edit-material-title:hover { + background-color: @crust !important; + } + + a.dashboard-actions-link, + a.edit-lesson-actions-link, + a.edit-material-actions-link { + i { + color: @text !important; + } + + &:hover { + background-color: @mantle !important; + } + } + + .dashboard-content.dashboard-list { + .submission-row, + .user-row { + border-bottom-color: @surface0 !important; + + &:not(.row-open):hover { + background-color: @mantle !important; + } + } + } + + .dashboard-content .material-row .material-name span { + color: @text !important; + } + + .chart-wrapper { + background-color: @base !important; + } + + .chart-segment { + span { + color: @base !important; + } + + &.completed { + background-color: @green !important; + } + + &.submitted { + background-color: @blue !important; + } + + &.started { + background-color: @yellow !important; + } + + &.not-started { + background-color: @text !important; + background-image: repeating-linear-gradient( + 135deg, + @subtext1, + @subtext1 10px, + transparent 10px, + transparent 30px + ) !important; + } + } + + .outline-list { + background-color: @mantle !important; + } + + .outline-list-item.angular-ui-tree-node.isDraft { + background-image: repeating-linear-gradient( + 45deg, + @base, + @base 10px, + transparent 10px, + transparent 20px + ) !important; + } + + .top-bar .toggle-topbar.menu-icon a { + color: @text !important; + } + + .top-bar.expanded .toggle-topbar a span::after { + box-shadow: 0 0 0 1px @text, 0 7px 0 1px @text, 0 14px 0 1px @text; + } + + .button.dropdown-blue::after { + border-top-color: @text !important; + } + + .top-bar-section .title h5 a { + color: @text !important; + } + + .update-row { + border-top-color: @surface2 !important; + } + + .top-bar-section .divider { + border-top-color: @surface0 !important; + } + + nav.top-bar .top-bar-section .dropdown, + nav.top-bar .top-bar-section body.course .dropdown-blue, + body.course nav.top-bar .top-bar-section .dropdown-blue { + border-color: @surface0 !important; + } + + .content-heading { + background-color: @mantle !important; + } + + .top-bar-section ul li > a, + #userdata, + .subheader, + .green-highlight:not(.disabled) > *, + .tab-scroll-link, + .closer, + .entry-title a, + .jqconsole-prompt, + .jqconsole-old-prompt { + color: @text !important; + } + + .top-bar-section .has-dropdown > a::after { + border-top-color: @text !important; + } + + #loadingContent { + background-color: @base !important; + } + + .fa-spinner { + color: @text !important; + } + + button, + .button, + .faux-button { + background-color: @crust !important; + color: @text !important; + border-color: @surface0 !important; + + &:hover { + background-color: @mantle !important; + } + + &:not(.disabled) { + &.secondary, + &.success { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface0 !important; + + // the :not() adds specificity to override the `!important` in the default styles + &:hover:not(.disabled) { + background-color: @green !important; + color: @base !important; + border-color: @surface0 !important; + } + } + + &.danger { + background-color: @red !important; + border-color: @red !important; + color: @base !important; + + &:hover { + background-color: darken(@red, 5%) !important; + } + } + + &.caution { + border-color: @red !important; + color: @red; + + &:hover { + background-color: fade(@red, 40%) !important; + } + } + } + + &#sidebar-link, + &#sidebar-close { + background-color: @base !important; + } + } + + .site-header { + border-bottom-color: @surface0 !important; + } + + .menu-icon { + fill: @text !important; + } + + .draft-message, + .broadcast-message { + color: @subtext0 !important; + } + + .color-swatch { + color: @surface0 !important; + } + + #embed-documentation dd, + dl#documentation dd { + &, + .methodHeader, + .methodDocs { + border-color: @surface0 !important; + + pre { + background-color: @base !important; + } + } + + .methodHeader { + background-color: @crust !important; + } + + &.active a { + border-bottom-color: @surface0 !important; + } + } + + .switch { + label { + background-color: @crust !important; + + &::after { + background-color: @text !important; + } + } + + input:checked + label { + background-color: @accent !important; + + &::after { + background-color: @base !important; + } + } + } + + .accordion { + dd > a { + background-color: @mantle !important; + color: @text !important; + } + + dd > .content.active { + background-color: @mantle !important; + } + } + + .icon-bar { + background-color: @base !important; + + > a { + background-color: @crust !important; + } + + > a:hover { + background-color: @mantle !important; + } + + .item, + > * i { + color: @text !important; + } + } + + .exit-off-canvas { + box-shadow: -4px 0 4px @surface0, 4px 0 4px @surface0 !important; + background-color: fade(@base, 50%) !important; + } + + #trinket-gallery #trinketDetails .spotlight { + background-color: fade(@base, 50%) !important; + } + + .right-off-canvas-menu, + .left-off-canvas-menu { + background-color: @base !important; + } + + .tab-nav { + border-bottom-color: @base !important; + + .menu-button { + background-color: @base !important; + color: @text !important; + } + + .tab { + background-color: @crust !important; + border-color: @surface0 !important; + border-top-color: @crust !important; + box-shadow: none !important; + + i.warning { + color: @red !important; + } + + a { + color: @text !important; + } + + &.active { + background-color: @surface0 !important; + + span { + background-color: @surface0 !important; + } + } + } + } + + .side-nav { + border-color: @surface0 !important; + + li { + border-top-color: @surface2 !important; + } + + a { + color: @accent !important; + + &.active { + color: @text !important; + } + } + } + + li.side-nav-heading { + background-color: @mantle !important; + } + + .decorated > span { + &::before, + &::after { + border-bottom-color: @surface0; + } + } + + .tab-options, + .f-dropdown.open { + background-color: @base !important; + border-color: @surface0 !important; + + &::before, + &::after { + border-bottom-color: @crust !important; + } + + a { + background-color: @crust !important; + color: @text !important; + } + } + + .reveal-modal { + background-color: @base !important; + border-color: @surface0 !important; + box-shadow: none !important; + + .close-reveal-modal { + color: @subtext0 !important; + } + } + + ul.off-canvas-list li { + a { + border-bottom-color: @surface0 !important; + color: @text !important; + background-color: @base !important; + } + + a:hover { + background-color: @mantle !important; + } + + label { + background-color: @mantle !important; + border-top-color: @surface0 !important; + color: @subtext0 !important; + } + } + + .faux-input { + background-color: @crust !important; + border-color: @surface0 !important; + box-shadow: none !important; + color: @text !important; + } + + .label:not(.last-saved) { + background-color: @accent !important; + color: @base !important; + } + + .last-saved { + color: @subtext0 !important; + } + + .code-editor .info-area { + border-top-color: @surface0 !important; + background-color: @base !important; + color: @text !important; + } + + .injectionDiv { + color: initial !important; + } + + .pricing-table { + border-color: @surface0 !important; + + .cta-button { + background-color: @base !important; + } + + .price { + background-color: @base !important; + color: @text !important; + } + + .title { + background-color: @mantle !important; + } + + .description, + .bullet-item { + background-color: @base !important; + color: @text !important; + border-bottom-color: @surface2 !important; + + p { + color: @subtext0 !important; + } + } + } + + .blue-highlight:not(.disabled) { + background-color: @accent !important; + + &, + i.fa, + label { + color: @base !important; + } + } + + .featured-course-list li { + border-color: @surface0 !important; + } + + .course-title { + background-color: @mantle !important; + border-bottom-color: @surface0 !important; + + a { + color: @text !important; + } + } + + .course-list li { + border-color: @surface0 !important; + + &:hover { + background-color: @mantle !important; + } + } + + .library-subnav { + border-bottom-color: @surface0 !important; + } + + .trinket-last-date { + color: @subtext0 !important; + } + + .fa { + &.neutral { + color: @subtext0 !important; + } + + &.success { + color: @green !important; + } + + &.alert, + &.caution { + color: @red !important; + } + } + + .shared-modal ul#my-folders-list li.folder-item { + border-top-color: @surface0 !important; + } + + .trinket-stat .badge { + background-color: @accent !important; + background-image: none !important; + color: @base !important; + } + + .editable-empty { + color: @subtext0 !important; + } + + .breadcrumbs { + background-color: @mantle !important; + border-color: @surface0 !important; + + .editable { + border-bottom-color: @subtext0 !important; + + &:hover { + color: @accent !important; + } + } + + > .current { + color: @text !important; + } + } + + .jqconsole-header { + color: @subtext0 !important; + } + + .jqconsole-output:not(.error) { + color: @subtext1 !important; + } + + .jqconsole-output.error, + .jqconsole-error { + background-color: @red !important; + color: @base !important; + } + + .draft-circle { + background-color: @accent !important; + } + + .MathJax_Preview { + color: @subtext0 !important; + } + + [data-magellan-expedition], + [data-magellan-expedition-clone] { + background-color: @base !important; + } + + #trinkets-list, + .trinkets-list { + > li { + border-color: @surface0 !important; + box-shadow: none; + } + + > li .snapshot .title { + background-color: unset !important; + border-top-color: @surface0 !important; + } + + .dragging-trinket { + background-color: @crust !important; + border-color: @surface0 !important; + color: @subtext0 !important; + } + } + + #sidebar-link:hover, + #sidebar-close:hover { + opacity: 100% !important; + } + + #search-2 input { + &, + &:hover, + &:focus { + background-color: @crust !important; + color: @text !important; + border-color: @surface0 !important; + } + } + + #material-edit .toolbar { + background-color: @mantle; + border-top-color: @surface0; + border-bottom-color: @surface0; + } + + #outline { + background-color: @mantle !important; + border-right-color: @surface0 !important; + + ul { + background-color: @mantle !important; + } + + .outline-list-item.material.current { + background-color: @crust !important; + color: @text !important; + } + + .info, + .outline-list-item.lesson { + border-bottom-color: @surface0 !important; + } + } + + #outline-expander { + background-color: @accent !important; + color: @base !important; + } + + #class-progress { + background-color: @surface0 !important; + + .percentage { + background-color: @accent !important; + } + } + + #course-nav { + background-color: @mantle !important; + border-color: @surface0 !important; + + .title.breadcrumbs { + background-color: @crust !important; + } + } + + #reset-output { + color: @subtext0 !important; + } + + #instructionsToolbar { + border-bottom-color: @surface0 !important; + } + + #instructionsContainer { + background-color: @base !important; + } + + #team { + background-color: @mantle !important; + + img { + box-shadow: 0 0 0 10px @accent !important; + } + + a.social { + background-color: @accent !important; + + i::before { + color: @base !important; + } + } + } + + #outputTabs { + background-color: @crust !important; + border-bottom-color: @surface0 !important; + + .active { + background-color: @mantle !important; + } + + #instructionsTab { + border-left-color: @surface0 !important; + } + } + + #recent-trinkets .item a { + background-color: @mantle !important; + border-color: @surface0 !important; + box-shadow: none !important; + } + + #content-wrapper { + border-color: @surface0 !important; + } + + #wrapper { + border-color: @surface0 !important; + + .trinket-content { + border-top-color: @surface0 !important; + } + + .trinket-wrapper .trinket-content { + background-color: @base !important; + } + + .trinket-label { + color: @subtext0 !important; + } + + &, + .trinket-content-wrapper > :not(.codeOutput, #content-overlay) { + background-color: @base; + } + + .codeOutput { + background-color: initial !important; + } + + .left-menu-toggle { + border-right-color: @surface0 !important; + } + + .right-menu-toggle { + border-left-color: @surface0 !important; + } + + .icon-bar .item.split { + &.button, + &.faux-button { + span { + border-left-color: @surface0 !important; + } + + span::after { + border-top-color: @text !important; + } + } + } + } + + #content-overlay { + background-color: fade(@base, 20%) !important; + } + + #books-index .book-img { + outline-color: @surface0 !important; + + &:hover { + outline-color: @accent !important; + } + } + + #svg-logo .letters { + fill: @text !important; + } + + #svg-logo .yellow { + fill: @yellow !important; + } + + #svg-logo .blue { + fill: @blue !important; + } + + #svg-logo .green { + fill: @green !important; + } + + #svg-logo .white { + fill: @base !important; + } + + #blue-logo-circle { + // There normally isn't an animation applied to this + // element because the circle blends in to the background. + opacity: 0; + animation: RtL 1s 0.75s ease 1 forwards !important; + } + + #hero { + background-color: @mantle !important; + } + + #graphic { + /* This is the element for graphics output. If styled with Catppuccin, it may make graphics unviewable due to contrast issues. */ + background-color: white !important; + + &, + label { + color: initial !important; + } + } + + @keyframes attention-error-border-pulse { + 0% { + box-shadow: inset 0 0 0 @red; + } + 40% { + box-shadow: inset 0 0 0 @red; + } + 70% { + box-shadow: inset 0 0 6px @red; + } + 100% { + box-shadow: inset 0 0 0 @red; + } + } + + @keyframes bluePulseButton { + 0% { + box-shadow: 0 0 0 0 fade(@accent, 40%); + background-color: @accent; + } + + 70% { + box-shadow: 0 0 0 10px fade(@accent, 0%); + background-color: @accent; + } + + 100% { + box-shadow: none; + background-color: @accent; + } + } + + img[src$="trinket-logo-notag.png"], + img[src$="trinket-logo.png"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + img[src$="trinket-logo-notag.png"] { + margin: 50px 0 30px; + padding-left: 300px; + } + + img[src$="trinket-logo-circles.png"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + #dragbar { + @svg: escape( + '' + ); + + background-color: @surface0 !important; + border-left-color: @surface0 !important; + border-right-color: @surface0 !important; + background-image: url("data:image/svg+xml;utf8,@{svg}") !important; + } + + #output-dragbar { + @svg: escape( + '' + ); + + background-color: @surface0 !important; + border-top-color: @surface0 !important; + border-bottom-color: @surface0 !important; + background-image: url("data:image/svg+xml;utf8,@{svg}") !important; + } + + .lang-sprite, + #trinkets-list.list-view > li .snapshot .title::before, + .trinkets-list.list-view > li .snapshot .title::before { + @svg: escape( + '' + ); + + background-image: url("data:image/svg+xml;utf8,@{svg}"); + } + } +} diff --git a/styles/tuta/README.md b/styles/tuta/README.md new file mode 100644 index 0000000000..6de75c225a --- /dev/null +++ b/styles/tuta/README.md @@ -0,0 +1,37 @@ + + + +

+ Logo
+ + Catppuccin for Tuta + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + +> [!NOTE] +> Set Tuta's built-in theme to either **light** if you're using Latte or **dark** if you're using the others. + +## 💝 Current Maintainer +- [ryanccn](https://github.com/ryanccn) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/tuta/catppuccin.user.less b/styles/tuta/catppuccin.user.less new file mode 100644 index 0000000000..56e6c6ac98 --- /dev/null +++ b/styles/tuta/catppuccin.user.less @@ -0,0 +1,178 @@ +/* ==UserStyle== +@name Tuta Catppuccin +@namespace github.com/catppuccin/userstyles/styles/tuta +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/tuta +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/tuta/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atuta +@description Soothing pastel theme for Tuta +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("app.tuta.com"), domain("mail.tutanota.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + body, + drawer-menu, + .list-bg { + background-color: @mantle !important; + color: @text; + } + + .list-row { + background-color: @base; + } + .odd-row { + background-color: @surface0; + } + + .header-nav { + background-color: @base; + } + + .elevated-bg, + .folder-column, + div[aria-modal] { + background-color: @base !important; + } + + .icon { + &[style*="fill: rgb(78, 78, 78);"] { + fill: @text !important; + } + + &[style*="fill: rgb(174, 174, 174);"] { + fill: @subtext0 !important; + } + + &[style*="fill: rgb(255, 83, 83);"] { + fill: @accent !important; + } + } + + .h2 { + color: @subtext1 !important; + } + + .bottom-nav { + background: @mantle !important; + color: @text !important; + } + + .dropdown-button, + .dropdown-button div { + color: @text !important; + } + .dropdown-button:hover { + background-color: @surface1 !important; + } + + /* logo */ + path[style*="fill: #00d2a7;"] { + fill: @accent !important; + } + + path[style*="fill: #c5c7c7;"] { + fill: @text !important; + } + + .row-selected { + border-color: @accent !important; + color: @accent !important; + } + .row-selected > .nav-button { + color: @accent !important; + + > .icon { + fill: @accent !important; + } + } + + .secondary { + color: @accent !important; + } + + .nav-button, + .sidebar-section.mb { + color: @subtext0 !important; + } + + .bubble { + background-color: @base; + color: @text; + } + + :where(.mouse-nav) .state-bg:hover, + :where(.keyboard-nav) .state-bg:hover, + [style*="background: rgba(139, 139, 139, 0.22)"] { + background-color: @surface0 !important; + } + + .nav-bg, + .content-bg, + [style*="background-color: rgb(35, 35, 35)"] { + background-color: @base !important; + } + [style*="background-color: rgb(17, 17, 17);"] { + background-color: @mantle !important; + } + [style*="background-color: rgba(139, 139, 139, 0.22);"] { + background-color: @surface0 !important; + } + [style*="background-color: rgba(139, 139, 139, 0.38);"] { + background-color: @surface1 !important; + } + + [style*="color: rgb(221, 221, 221);"] { + color: @text !important; + } + + [style*="color: rgb(174, 174, 174);"] { + color: @subtext1 !important; + } + + .teamLabel { + background-color: @accent; + color: @mantle; + } + + [style*="border: 2px solid rgb(255, 83, 83);"] { + border-color: @accent !important; + } + [style*="color: rgb(255, 83, 83);"], + .content-accent-fg { + color: @accent !important; + } + + button.expander { + color: @subtext0 !important; + } + + .logo-height > svg:nth-child(1) > path:nth-child(2) { + fill: @accent !important; + } + + ::-webkit-scrollbar-thumb { + background-color: @surface1; + } + } +} diff --git a/styles/tutanota/assets/catwalk.webp b/styles/tutanota/assets/catwalk.webp deleted file mode 100644 index d3ceae99f4..0000000000 --- a/styles/tutanota/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:d4fc2f1952d08cd35e1ada72645acf554f9805c8dda19a5e230dc2d750fba543 -size 54500 diff --git a/styles/tutanota/assets/frappe.webp b/styles/tutanota/assets/frappe.webp deleted file mode 100644 index 6e585b6307..0000000000 --- a/styles/tutanota/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b6c5a312e5dafacf5dae034c6375bc17542da1d55a6d514001ee11bc7ad0d06d -size 35194 diff --git a/styles/tutanota/assets/latte.webp b/styles/tutanota/assets/latte.webp deleted file mode 100644 index be15591db5..0000000000 --- a/styles/tutanota/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:8fec8efb9b90dddba81ad2f5afed9cec5bae5c8e42013f940876fdbc9ef64cbc -size 33356 diff --git a/styles/tutanota/assets/macchiato.webp b/styles/tutanota/assets/macchiato.webp deleted file mode 100644 index b9f6090263..0000000000 --- a/styles/tutanota/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:089e835aca4062b515bc1a75351d30793e2194ddae002b67204f43f1e3eca996 -size 34494 diff --git a/styles/tutanota/assets/mocha.webp b/styles/tutanota/assets/mocha.webp deleted file mode 100644 index aa9441c252..0000000000 --- a/styles/tutanota/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a3e4a8ffaf9139b01bcc5ff8ea3d113fb61c540768d7f82008f8013e44e3045f -size 34866 diff --git a/styles/tutanota/catppuccin.user.css b/styles/tutanota/catppuccin.user.css deleted file mode 100644 index 323ac29d22..0000000000 --- a/styles/tutanota/catppuccin.user.css +++ /dev/null @@ -1,249 +0,0 @@ -/* ==UserStyle== -@name Tutanota Catppuccin -@namespace github.com/catppuccin/userstyles/styles/tutanota -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/tutanota -@version 0.0.3 -@description Soothing pastel theme for Tutanota -@author Catppuccin -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/tutanota/catppuccin.user.css -@license MIT - -@preprocessor less -@var select flavor "Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] -==/UserStyle== */ -@-moz-document domain("mail.tutanota.com") { - :root { - #catppuccin(@flavor, @accentColor); - } - - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-Color: @catppuccin[@@lookup][@@accent]; - - body, - drawer-menu, - .list-bg { - background-color: @base !important; - color: @text; - } - - .list-row { - background-color: @base; - } - .odd-row { - background-color: @surface0; - } - - .header-nav { - background-color: @base; - box-shadow: 0 2px 4px 0 @surface0; - } - - .elevated-bg, - .folder-column, - div[aria-modal] { - background-color: @surface0 !important; - } - - .dropdown-button, - .dropdown-button div { - color: @text !important; - } - .dropdown-button:hover { - background-color: @surface1 !important; - } - - .row-selected { - border-color: @accent !important; - color: @accent !important; - } - .row-selected > .nav-button { - color: @accent !important; - } - .row-selected > .nav-button > .icon { - fill: @accent !important; - } - - .secondary { - color: @accent !important; - } - - .nav-button, - .sidebar-section.mb { - color: @subtext0 !important; - } - .icon.icon-large, - .nav-button .icon { - fill: @subtext0 !important; - } - - [style*="0"][style*="210"][style*="167"] { - color: @accent !important; - fill: @accent !important; - border-color: @accent !important; - } - - :is([style*="color"], [style*="fill"])[style*="78"] { - color: @subtext1 !important; - fill: @subtext1 !important; - } - - button.expander { - color: @subtext0 !important; - } - - div - > div.header-nav.overflow-hidden.flex.items-end.flex-center - > div.header-left.pl-l.ml-negative-s.flex-start.items-center - > div - > svg - > path { - fill: @accent !important; - } - - ::-webkit-scrollbar-thumb { - background-color: @surface1; - } - } -} diff --git a/styles/twitch/README.md b/styles/twitch/README.md index e2685e4a1c..2a99a1ffa4 100644 --- a/styles/twitch/README.md +++ b/styles/twitch/README.md @@ -10,42 +10,18 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- -## Usage -> **Note**
-> Set Twitch's built-in theme to either **light** if you're using Latte or **dark** if you're using the others. +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +## 💝 Current Maintainers +- [uncenter](https://github.com/uncenter) +- [mxgic1337](https://github.com/mxgic1337) -## 💝 Current Maintainer(s) -- [GitMuslim](https://github.com/GitMuslim) -- [Isabel](https://github.com/isabelroses)   diff --git a/styles/twitch/assets/catwalk.webp b/styles/twitch/assets/catwalk.webp deleted file mode 100644 index e68f580bbc..0000000000 --- a/styles/twitch/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ba636a83160c6446f2cc4d7b4e3717086315319a8beee463660143d6c5b85efe -size 1207444 diff --git a/styles/twitch/assets/frappe.webp b/styles/twitch/assets/frappe.webp deleted file mode 100644 index b544fe3a6a..0000000000 --- a/styles/twitch/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7870759430990903767777efd79d6ee9770a9550746c792e43f5d5ba596d7424 -size 173984 diff --git a/styles/twitch/assets/latte.webp b/styles/twitch/assets/latte.webp deleted file mode 100644 index cfbe23d8ed..0000000000 --- a/styles/twitch/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e5053650ce1c2f245f6c7e1eb507b8c5ae13eba40942591afc9c927972a3a5f0 -size 176600 diff --git a/styles/twitch/assets/macchiato.webp b/styles/twitch/assets/macchiato.webp deleted file mode 100644 index d3a48b8b35..0000000000 --- a/styles/twitch/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:afcb0f6e9e2a54f62bdfd4f0cf7c85522f0e985bc999f2f041da1bbd4e40c4c1 -size 175986 diff --git a/styles/twitch/assets/mocha.webp b/styles/twitch/assets/mocha.webp deleted file mode 100644 index 637c5c2146..0000000000 --- a/styles/twitch/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:397001044e05244f1f0d3904f1d952a4f7ca7e14bd455af0b12c1823359bbf7f -size 176580 diff --git a/styles/twitch/catppuccin.user.css b/styles/twitch/catppuccin.user.css deleted file mode 100644 index ce6f28eab3..0000000000 --- a/styles/twitch/catppuccin.user.css +++ /dev/null @@ -1,425 +0,0 @@ -/* ==UserStyle== -@name Twitch Catppuccin -@namespace github.com/catppuccin/userstyles/styles/twitch -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/twitch -@version 1.1.4 -@description Soothing pastel theme for Twitch -@author Catppuccin -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/twitch/catppuccin.user.css -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] -==/UserStyle== */ -@-moz-document domain("twitch.tv") { - .tw-root--theme-dark { - #catppuccin(@darkFlavor, @accentColor); - } - .tw-root--theme-light { - #catppuccin(@lightFlavor, @accentColor); - } - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-Color: @catppuccin[@@lookup][@@accent]; - - & body { - background-color: @base; - } - - & .carousel-metadata { - background: @crust; - } - & .carousel-metadata--fadeout { - background: @crust; - } - .chat-line__message-body--highlighted { - background-color: @accent-Color; - color: @crust; - border-color: @accent-Color; - } - .chat-scrollable-area__message-container { - background-color: @mantle; - } - .jmUA-dj { - background-color: @mantle; - } - .bBpiku { - fill: @mantle; - } - .ivjxmt { - color: @crust; - } - .gzYMLv { - color: @text; - } - .gZxBHd { - color: @subtext0; - &:hover { - color: @accent-Color; - } - } - .eBmJxH { - color: @text; - } - .ffZeRf { - color: #fff !important; - } - .igzOaC { - color: @text; - } - .bEHknf { - color: #fff; - } - .side-nav-card__link:hover { - background: @surface0 !important; - } - .dDyYOA { - color: #fff !important; - } - .reward-icon__cost { - color: #fff !important; - } - .kLILeB { - color: #fff !important; - } - .navigation-link__active-indicator { - background-color: @accent-Color !important; - } - .footer { - background: @crust; - } - & .whispers-list-item--selected, - & .whispers-list-item:hover { - background-color: @surface0; - } - & .thread-header__title-bar-container--focused { - background-color: @mantle; - } - & .thread-header__title-bar-container { - background: @mantle; - } - & .thread-header__click-area:focus .thread-header__title-bar-container { - background-color: @mantle; - } - - &, - .side-nav-card__link:hover { - --color-background-input-focus: @crust; - --color-background-interactable-hover: @surface0; - --color-background-button-text-default: null !important; - --color-background-float: @crust; - --color-text-input-placeholder: @text; - --color-border-input: @base; - --color-text-button-primary: @crust; - --color-text-overlay: @base; - --color-text-base: @subtext1; - --color-text-alt: @subtext1; - --color-text-alt-2: @text; - --color-text-interactable-selected: @crust; - --color-background-alt-2: @crust; - --color-text-tag: @text; - --color-background-button-secondary-default: @crust; - --color-background-tag-default: @mantle; - --color-background-tag-hover: @crust; - --color-background-float: @mantle; - --color-background-body: @base; - --color-background-base: @mantle; - --color-background-alt: @mantle; - --color-background-input: @crust; - --color-brand-muted-cupcake: @pink; - --color-brand-muted-mint: @green; - --color-brand-muted-sky: @sky; - --color-brand-muted-blush: @peach; - --color-brand-muted-canary: @peach; - --color-brand-muted-lavender: @lavender; - --color-brand-muted-mustard: @yellow; - --color-brand-muted-emerald: @green; - --color-brand-muted-coral: @peach; - --color-brand-muted-ocean: @blue; - --color-brand-accent-grape: @mauve; - --color-brand-accent-dragonfruit: @flamingo; - --color-brand-accent-carrot: @peach; - --color-brand-accent-sun: @peach; - --color-brand-accent-lime: @green; - --color-brand-accent-turquoise: @sky; - --color-brand-accent-eggplant: @mauve; - --color-brand-accent-wine: @flamingo; - --color-brand-accent-slime: @green; - --color-brand-accent-seafoam: @green; - --color-brand-accent-cherry: @red; - --color-brand-accent-marine: @blue; - --color-brand-accent-seaweed: @teal; - --color-brand-accent-fiji: @green; - --color-brand-accent-blueberry: @blue; - --color-brand-accent-arctic: @sky; - --color-brand-accent-highlighter: @yellow; - --color-brand-accent-flamingo: @flamingo; - --color-brand-accent-ruby: @red; - --color-brand-accent-punch: @flamingo; - --color-brand-accent-creamsicle: @yellow; - --color-red: @maroon; - --color-red-darker: @red; - --color-orange: @peach; - --color-yellow: @yellow; - --color-green: @green; - --color-green-darker: @green; - --color-blue: @blue; - --color-prime-blue: @blue; - --color-magenta: @flamingo; - --color-error: @red; - --color-warn: @yellow; - --color-success: @green; - --color-info: @blue; - --color-accent: @accent-Color; - --color-twitch-purple: @accent-Color; - --color-twitch-purple-4: @accent-Color; - --color-twitch-purple-5: @accent-Color; - --color-twitch-purple-6: @accent-Color; - --color-twitch-purple-7: @accent-Color; - --color-twitch-purple-8: @accent-Color; - --color-twitch-purple-9: @accent-Color; - --color-twitch-purple-10: @accent-Color; - --color-twitch-purple-11: @accent-Color; - --color-twitch-purple-12: @accent-Color; - --color-orange-7: @yellow; - --color-orange-8: @yellow; - --color-orange-9: @yellow; - --color-orange-10: @yellow; - --color-orange-11: @yellow; - --color-orange-12: @yellow; - --color-orange-13: @yellow; - --color-yellow-6: @peach; - --color-yellow-7: @peach; - --color-yellow-8: @peach; - --color-yellow-9: @peach; - --color-yellow-10: @peach; - --color-yellow-11: @peach; - --color-yellow-12: @peach; - --color-yellow-13: @peach; - --color-yellow-14: @peach; - --color-yellow-15: @peach; - --color-green-5: @green; - --color-green-6: @green; - --color-green-7: @green; - --color-green-8: @green; - --color-green-9: @green; - --color-green-10: @green; - --color-green-11: @green; - --color-green-12: @green; - --color-green-13: @green; - --color-green-14: @green; - --color-green-15: @teal; - --color-cyan-9: @sapphire; - --color-cyan-10: @sapphire; - --color-cyan-11: @sapphire; - --color-cyan-12: @sapphire; - --color-cyan-13: @sapphire; - --color-cyan-14: @sapphire; - --color-cyan-15: @sky; - --color-blue-4: @blue; - --color-blue-5: @blue; - --color-blue-6: @blue; - --color-blue-7: @blue; - --color-blue-8: @blue; - --color-blue-9: @blue; - --color-blue-10: @sky; - --color-blue-11: @sky; - --color-magenta-5: @flamingo; - --color-magenta-6: @flamingo; - --color-magenta-7: @flamingo; - --color-magenta-8: @flamingo; - --color-magenta-9: @flamingo; - --color-magenta-10: @flamingo; - --color-magenta-11: @pink; - --color-magenta-12: @pink; - --color-red-4: @red; - --color-red-5: @red; - --color-red-6: @red; - --color-red-7: @red; - --color-red-8: @red; - --color-red-9: @red; - --color-red-10: @red; - --color-red-11: @peach; - --color-red-12: @peach; - --color-twitter: @blue; - --color-facebook: @blue; - --color-reddit: @peach; - --color-snapchat: @yellow; - --color-instagram: @blue; - --color-youtube: @red; - --color-paypal: @blue; - --color-paypal-blue: @blue; - --color-paypal-yellow: @yellow; - --color-venmo: @blue; - --color-vk: @blue; - --color-amazon: @yellow; //background: @surface0; - --color-background-button-text-hover: @surface0; - --color-text-accessible-red: @red; - } - } -} -@-moz-document domain("dashboard.twitch.tv") { - .tw-root--theme-dark { - #catppuccin(@darkFlavor); - } - .tw-root--theme-light { - #catppuccin(@lightFlavor); - } - - #catppuccin(@lookup) { - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - .simplebar-content { - background-color: @mantle; - } - .scrollable-area--suppress-scroll-x > .simplebar-scroll-content, - .scrollable-area--suppress-scroll-x - > .simplebar-scroll-content - > .simplebar-content { - background-color: @base; - } - } -} - -@catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; -}; diff --git a/styles/twitch/catppuccin.user.less b/styles/twitch/catppuccin.user.less new file mode 100644 index 0000000000..008a654d50 --- /dev/null +++ b/styles/twitch/catppuccin.user.less @@ -0,0 +1,1821 @@ +/* ==UserStyle== +@name Twitch Catppuccin +@namespace github.com/catppuccin/userstyles/styles/twitch +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/twitch +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/twitch/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atwitch +@description Soothing pastel theme for Twitch +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("twitch.tv") { + @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); + + .tw-root--theme-dark { + #catppuccin(@darkFlavor); + } + .tw-root--theme-light { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + body { + background-color: @base; + } + + &, + .tw-dialog-layer, + [class*="ScLayoutCssVars-sc-"], + .tw-tooltip-layer { + --color-background-input-focus: @crust; + --color-background-interactable-hover: fade(@surface0, 48%); + --color-background-interactable-alpha-hover: @surface0; + --color-background-interactable-active: @surface1; + --color-background-button-secondary-active: @surface1; + --color-background-button-text-default: null !important; + --color-background-pill-subtle: @subtext0; + --color-background-placeholder: @surface0; + --color-background-selectable: @surface0; + --color-text-input-placeholder: @text; + --color-border-input: @base; + --color-border-tab: @surface0; + --color-text-button-primary: @crust; + --color-text-overlay: @base; + --color-text-overlay-alt: @subtext0; + --color-text-overlay-link-hover: @subtext0; + --color-text-base: @subtext1; + --color-text-alt: @text; + --color-text-alt-2: @subtext0; + --color-text-interactable-selected: @crust; + --color-text-interactable-inverted: @base; + --color-background-alt-2: @crust; + --color-text-tag: @subtext0; + --color-background-button-secondary-default: @crust; + --color-background-button-primary-hover: darken(@accent, 5%); + --color-background-button-secondary-hover: @surface0; + --color-background-button-overlay-secondary-default: fade(@text, 13%); + --color-background-tag-default: @surface0; + --color-background-tag-hover: @surface1; + --color-background-float: @mantle; + --color-background-body: @base; + --color-background-base: @mantle; + --color-background-alt: @mantle; + --color-background-input: @crust; + --color-brand-muted-cupcake: @pink; + --color-brand-muted-mint: @green; + --color-brand-muted-sky: @sky; + --color-brand-muted-blush: @peach; + --color-brand-muted-canary: @peach; + --color-brand-muted-lavender: @lavender; + --color-brand-muted-mustard: @yellow; + --color-brand-muted-emerald: @green; + --color-brand-muted-coral: @peach; + --color-brand-muted-ocean: @blue; + --color-brand-accent-grape: @mauve; + --color-brand-accent-dragonfruit: @flamingo; + --color-brand-accent-carrot: @peach; + --color-brand-accent-sun: @peach; + --color-brand-accent-lime: @green; + --color-brand-accent-turquoise: @sky; + --color-brand-accent-eggplant: @mauve; + --color-brand-accent-wine: @flamingo; + --color-brand-accent-slime: @green; + --color-brand-accent-seafoam: @green; + --color-brand-accent-cherry: @red; + --color-brand-accent-marine: @blue; + --color-brand-accent-seaweed: @teal; + --color-brand-accent-fiji: @green; + --color-brand-accent-blueberry: @blue; + --color-brand-accent-arctic: @sky; + --color-brand-accent-highlighter: @yellow; + --color-brand-accent-flamingo: @flamingo; + --color-brand-accent-ruby: @red; + --color-brand-accent-punch: @flamingo; + --color-brand-accent-creamsicle: @yellow; + --color-red: @maroon; + --color-red-darker: @red; + --color-orange: @peach; + --color-yellow: @yellow; + --color-green: @green; + --color-green-darker: @green; + --color-blue: @blue; + --color-prime-blue: @blue; + --color-magenta: @flamingo; + --color-error: @red; + --color-warn: @yellow; + --color-success: @green; + --color-white: @text; + --color-black: @crust; + --color-info: @blue; + --color-twitch-purple: @accent; + --color-twitch-purple-4: @accent; + --color-twitch-purple-5: @accent; + --color-twitch-purple-6: @accent; + --color-twitch-purple-7: @accent; + --color-twitch-purple-8: @accent; + --color-twitch-purple-9: @accent; + --color-twitch-purple-10: @accent; + --color-twitch-purple-11: @accent; + --color-twitch-purple-12: @accent; + --color-orange-7: @yellow; + --color-orange-8: @yellow; + --color-orange-9: @yellow; + --color-orange-10: @yellow; + --color-orange-11: @yellow; + --color-orange-12: @yellow; + --color-orange-13: @yellow; + --color-yellow-6: @peach; + --color-yellow-7: @peach; + --color-yellow-8: @peach; + --color-yellow-9: @peach; + --color-yellow-10: @peach; + --color-yellow-11: @peach; + --color-yellow-12: @peach; + --color-yellow-13: @peach; + --color-yellow-14: @peach; + --color-yellow-15: @peach; + --color-green-5: @green; + --color-green-6: @green; + --color-green-7: @green; + --color-green-8: @green; + --color-green-9: @green; + --color-green-10: @green; + --color-green-11: @green; + --color-green-12: @green; + --color-green-13: @green; + --color-green-14: @green; + --color-green-15: @teal; + --color-cyan-9: @sapphire; + --color-cyan-10: @sapphire; + --color-cyan-11: @sapphire; + --color-cyan-12: @sapphire; + --color-cyan-13: @sapphire; + --color-cyan-14: @sapphire; + --color-cyan-15: @sky; + --color-blue-4: @blue; + --color-blue-5: @blue; + --color-blue-6: @blue; + --color-blue-7: @blue; + --color-blue-8: @blue; + --color-blue-9: @blue; + --color-blue-10: @sky; + --color-blue-11: @sky; + --color-blue-12: @sky; + --color-blue-14: @sky; + --color-magenta-5: @flamingo; + --color-magenta-6: @flamingo; + --color-magenta-7: @flamingo; + --color-magenta-8: @flamingo; + --color-magenta-9: @flamingo; + --color-magenta-10: @flamingo; + --color-magenta-11: @pink; + --color-magenta-12: @pink; + --color-magenta-14: @pink; + --color-red-4: @accent; + --color-red-5: @accent; + --color-red-6: @accent; + --color-red-7: @accent; + --color-red-8: @accent; + --color-red-9: @accent; + --color-red-10: @red; + --color-red-11: @peach; + --color-red-12: @peach; + --color-red-14: @peach; + --color-twitter: @blue; + --color-facebook: @blue; + --color-reddit: @peach; + --color-snapchat: @yellow; + --color-instagram: @blue; + --color-youtube: @red; + --color-paypal: @blue; + --color-paypal-blue: @blue; + --color-paypal-yellow: @yellow; + --color-venmo: @blue; + --color-vk: @blue; + --color-amazon: @yellow; + --color-background-button-text-hover: @surface0; + --color-text-accessible-red: @accent; + --color-border-input-checkbox: @subtext0; + --color-border-input-checkbox-hover: @text; + --color-text-label: @text; + --color-border-input-hover: @surface0; + --color-opac-b-14: @crust; + --color-text-button-overlay: @text !important; + --color-background-progress: @surface0; + --color-background-range-overlay-fill: @text !important; + --color-text-button-overlay-hover: @text !important; + --color-text-tooltip: @base !important; + --color-background-tooltip: @text !important; + --color-hinted-grey-2: @surface0; + --color-hinted-grey-5: @surface0; + --color-hinted-grey-8: @subtext0; + --color-hinted-grey-12: @subtext0; + --color-hinted-grey-15: @text; + --color-background-overlay-alt: fade(@mantle, 60%); + --color-background-button-overlay-primary-hover: @subtext1; + --color-background-button-overlay-text-hover: @crust; + --color-border-overlay: @surface0; + --color-border-base: @surface0; + --color-background-button-disabled: @surface0; + --color-text-button-disabled: @subtext0; + --color-background-toggle-handle: @text; + --color-border-toggle: @text; + --color-border-toggle-hover: @text; + --color-background-toggle-checked: @mantle; + --color-background-input-checkbox-checked-background: @crust; + --color-border-balloon-overlay: @surface0; + --color-opac-gd-1: fade(@surface0, 35%); + --color-text-number-badge: @base; + + & when (@flavor = latte) { + --color-white: @base; + --color-black: @text; + --color-hinted-grey-12: @mantle; + --color-text-pill: @base; + --color-text-overlay-link-hover: @surface0; + --color-background-overlay-alt: fade(@text, 60%); + --color-text-button-destructive: @base; + --color-text-button-overlay: @base !important; + } + } + + --color-text-link: @accent; + --color-text-link-active: darken(@accent, 5%); + --color-text-link-focus: darken(@accent, 5%); + --color-text-link-hover: darken(@accent, 5%); + --color-text-link-visited: @accent; + + &, + [class*="ScAccentRegionCssVars"] { + --color-accent: @accent; + } + /* Hardcoded accent color */ + [style="color: rgb(160, 84, 255);"] { + color: @accent !important; + } + + /* `Pinned message` popup */ + + div.pinned-chat__pinned-by svg { + color: @text; + } + + p.pinned-chat__message { + span { + color: @text !important; + } + + a { + color: @accent; + } + } + + /* `Intended for certain audiences` label */ + + div[data-a-target="content-classification-warning-disclosure-overlay"] p { + color: @text !important; + } + + /* `Hype Train` popup */ + + div.hype-train-progress-bar-info-view__level-container p, + div.hype-train-approaching-view__leftSide p, + div.hype-train-expanded-layout p, + div.hype-train-expanded-layout svg { + color: @text; + } + + path[d="m18 17 4-4V2H6v15h4v4l4-4h4zM12 6h2v6h-2V6zm7 0h-2v6h2V6z"] { + fill: @mantle; + } + + /* `Is video buffering?` warning */ + + div.low-latency-notification { + p { + color: @text; + } + border-color: @accent; + } + + /* `Includes paid promotion` label */ + + div.disclosure-card { + p, + svg, + a { + color: @text; + } + background: fade(@mantle, 80%); + } + + /* Raiding popup */ + + div[data-test-selector="raid-banner"] { + color: @text; + } + + /* `Predict with Channel Points` popup */ + + div[data-test-selector="expanded-content"] p, + p[data-test-selector="community-prediction-highlight-header__top-predictors"], + p[data-test-selector="community-prediction-highlight-body__outcome-title"] { + color: @text; + } + + /* TODO: ensure that the poll does not default to this */ + div[data-test-selector="header-content"] p { + color: @text !important; + } + + div.channel-points-icon svg, + div[data-test-selector="header-content"] span, + div[data-test-selector="community-prediction-highlight-body__outcome-points"] + span { + color: @accent; + } + + button[data-test-selector="community-prediction-highlight-header__how-to-play"], + button[data-test-selector="community-prediction-highlight-header__terms-and-conditions"], + button[data-test-selector="community-prediction-highlight-header__send-feedback"], + button[data-test-selector="community-prediction-highlight-header__dismiss-message"] { + color: @text; + } + + /* ??? */ + + div.happening-now-disable-prompt p { + color: @text !important; + } + + /* Gifting sub popup */ + + div.mystery-gift-chat-banner { + span { + color: @accent; + } + + p { + color: @text; + } + } + + /* VOD metadata */ + + div.tw-media-card-stat when not(@flavor = latte) { + --color-text-overlay: @text; + } + + /* Seekbar segment */ + + div[data-test-selector="seekbar-interaction-area__interactionArea"] + span[data-test-selector="seekbar-segment__segment"] { + background: @accent !important; + } + + /* Seekbar DMCA muted segment */ + + div[data-test-selector="seekbar-interaction-area__interactionArea"] + span[data-test-selector="seekbar-segment__segment"][style*="background-color: rgba(212, 73, 73, 0.5);"] { + background: @red !important; + } + + /* Seekbar buffered segment */ + + div[data-test-selector="seekbar-interaction-area__interactionArea"] + span[data-test-selector="seekbar-segment__segment"][style*="background-color: rgba(255, 255, 255, 0.85);"] { + background: @overlay2 !important; + } + + /* Recent VOD title */ + + div.player-overlay-background h4 { + color: @subtext0 !important; + } + + a.offline-recommendations-video-card p { + color: @text; + } + + /* Offline screen follow panel */ + + div[data-test-selector="follow-panel-overlay"] p { + color: @text !important; + } + + div[data-test-selector="follow-panel-overlay"] button div { + color: @crust !important; + } + + /* Front page warning sign */ + + div.content-overlay-gate__content[data-a-target="player-overlay-content-gate"] + div.content-overlay-icon + svg { + color: @red; + } + + /* Front page age warning */ + + div.content-overlay-gate__content[data-a-target="player-overlay-content-gate"] + p.content-overlay-gate__allow-pointers { + color: @red !important; + } + + /* Front page age selector */ + + div[data-a-target="player-overlay-age-gate-form"] select { + color: @text; + } + + /* Followers list usercard */ + + div[data-a-target="user-card-modal"] p when not(@flavor = latte) { + --color-text-overlay: @text; + } + + /* Usercard mod log tabs */ + + .viewer-card-mod-drawer-tab--active { + box-shadow: 0 calc(var(--border-width-default) * -3) 0 @accent inset + !important; + } + + /* Usercard header */ + + .viewer-card-header__overlay { + background-color: fade(@mantle, 60%) !important; + } + + /* PiP username */ + + div.mini-overlay__title span { + color: @text; + } + + /* Viewercard username */ + + div.viewer-card-header__display-name h4 { + color: @accent !important; + } + + /* Viewercard metadata */ + + div.viewer-card-header__display-name svg:not(button svg) { + color: @subtext1; + } + + div.viewer-card-header__display-name p { + color: @text !important; + } + + /* Extension name */ + + div[aria-describedby="popover-extensions-body"] h6 { + color: @text; + } + + /* Extension description */ + + div.extensions-popover-view-layout__body p { + color: @text; + } + + /* Extension service buttons */ + + div.extensions-popover-view-layout__body svg { + color: @subtext0; + } + + div.extensions-popover-view-layout__body div { + color: @text; + } + + /* Extension overlay */ + + .extension-view__iframe { + color-scheme: light; + } + + .carousel-metadata { + background: @crust; + } + .carousel-metadata--fadeout { + background: @crust; + } + .chat-line__timestamp { + color: @subtext0; + } + .chat-line__message-body--highlighted { + background-color: @accent; + color: @crust; + border-color: @accent; + } + .chat-scrollable-area__message-container { + background-color: @mantle; + } + .side-nav-card__link:hover, + .side-nav-card__link:focus { + background: @surface0 !important; + } + .footer { + background: @crust; + } + .whispers-list-item--selected, + .whispers-list-item:hover { + background-color: @surface0; + } + .thread-header__title-bar-container--focused { + background-color: @mantle; + } + .thread-header__title-bar-container { + background: @mantle; + } + .thread-header__click-area:focus .thread-header__title-bar-container { + background-color: @mantle; + } + .navigation-link { + color: @text; + + &:hover, + .active { + color: @accent; + } + } + .navigation-link__active-indicator { + background-color: @accent !important; + } + .chat-room { + background: @mantle; + } + div.pinned-chat__highlight-card div.highlight { + background: @mantle; + } + + .server-message-alert { + border-color: @red !important; + border-left-color: @red !important; + } + + .server-message-alert__icon { + color: @red !important; + } + + /* Predictions */ + .fixed-prediction-button { + color: @mantle !important; + + .channel-points-icon svg { + color: @mantle !important; + } + + &.fixed-prediction-button--disabled { + color: @text !important; + + .channel-points-icon svg { + color: @text !important; + } + } + } + [style*="rgb(255, 255, 255)"] { + color: @base !important; + .channel-root, + .channel-info-content, + .chat-author__display-name, + .chatter-name, + &[data-a-target="chat-message-username"], + &.message-author__display-name { + color: @text !important; + } + } + + .chatter-name [style*="rgb(255, 255, 255)"] { + color: @text !important; + } + + [style="color: rgb(56, 122, 255);"] { + color: @blue !important; + } + [style="color: rgb(245, 0, 155);"] { + color: @pink !important; + } + + /* FrankerFaceZ uptime timer */ + .ffz-il-tooltip__container { + p, + figure.ffz-i-flag { + color: @text; + } + } + + [data-a-target="preview-card-image-link"] when (@flavor = latte) { + .tw-media-card-stat, + p, + figure.ffz-i-flag { + color: @base; + } + } + + /* VOD chapters */ + .preview-card-game-balloon__content .tw-interactable:hover { + p, + figure { + color: @text !important; + } + .media-row__image-play-overlay { + background-color: fade(@base, 80%) !important; + } + } + + .fixed-prediction-button--blue, + [style*="background-color: rgb(56, 122, 255);"], + [style*="background: rgb(56, 122, 255);"] { + background-color: @blue !important; + } + .fixed-prediction-button--pink, + [style*="background-color: rgb(245, 0, 155);"], + [style*="background: rgb(245, 0, 155);"] { + background-color: @pink !important; + } + + input[disabled] { + background-color: @surface0; + } + .chat-wysiwyg-input__placeholder { + color: @subtext0; + } + + button[aria-label="Play"], + button[aria-label="Pause"] { + + div svg { + color: @subtext0; + } + } + + [data-a-target="video-ad-label"], + [data-a-target="video-ad-countdown"] { + color: @text !important; + } + + /* Override for logo icon */ + .tw-animated-glitch-logo { + --color-white: @crust; + } + + /* Modals */ + .modal__content { + color: @text; + } + + /* Leaderboard highlighted username */ + .bits-leaderboard-expanded-top-three-entry__marquee-username, + .channel-leaderboard-header-runner-up-entry__username, + .bits-leaderboard-expanded-top-three-entry__username { + div { + color: @base !important; + } + } + + .channel-leaderboard-header-rotating__expand-grabber { + background: @surface0 !important; + } + + /* Privacy center */ + + .privacy-center-root__number-item { + background: @accent; + color: @base; + } + + .privacy-center-accordion { + border-color: @accent; + } + + .privacy-center-home-tabs { + color: @base !important; + &[aria-selected="true"], + &:hover { + color: @surface1 !important; + } + } + + .home-page__title-container, + .tw-responsive-wrapper { + svg path { + &[fill="#fff"], + &[fill="#FFF"] { + fill: transparent !important; + } + } + } + + .home-page__title { + color: @base !important; + } + + .tw-balloon { + .tw-callout-message__title { + color: var(--color-text-variable) !important; + } + + .tw-callout__close div.tw-svg { + fill: var(--color-text-variable) !important; + } + } + + /* Home page tips and analytics */ + + .analytics-tip-card { + color: @base !important; + + button { + color: @base !important; + } + } + + [class*="analyticsTargetProgressCard--"], .analytics-highlights-card { + .creator-home-card__icon + :not(.creator-home-card__icon-background--undefined) + ~ .creator-home-card__icon-svg { + color: @base !important; + } + } + + .creator-home-welcome-title__overlay-text, + .analytics-highlights-chart-tooltip__label--dark { + color: @base !important; + } + + .creator-home-focus-position { + background: linear-gradient(@accent, @base); + } + + /* Shield mode tray */ + + .shield-mode-icon svg path { + fill: @peach; + } + + .tray-highlight, + .chat-input-highlight, + .shield-mode-shortcut__btn { + border-color: @peach !important; + } + + /* Shield mode mod view button */ + + .shield-mode-shortcut__inner, + .shield-mode-view-toggle--active { + color: @base; + background: @peach; + } + + /* Channel points reward cost */ + + .reward-icon__cost { + color: @text !important; + background: fade(@mantle, 60%) !important; + + & when (@flavor = latte) { + color: @base !important; + background: fade(@text, 60%) !important; + } + } + + /* Directory banner */ + + .directory-header-new__banner-cover { + background: + linear-gradient(0deg, @base, fade(@mantle, 25%)), + linear-gradient(90deg, @base, fade(@mantle, 25%)); + } + + .home-video when not(@flavor = latte) { + --color-text-overlay: @text; + } + + /* Cookies and Advertising Choices */ + + .top-bar--pointer-enabled .consent-banner__content--gdpr-v2, + .consent-banner { + a, + button, + p { + color: @base !important; + } + + button:not([data-a-target="consent-banner-accept"]) { + background-color: fade(@base, 10%); + } + } + + /* Mod view changelog shadow */ + + .mod-view-whats-new-list--more-posts-to-see::after { + background-image: linear-gradient(transparent, @mantle); + } + + /* Unban requests */ + + .unban-requests-tabs__load-previous { + background-image: linear-gradient(@mantle, fade(@mantle, 0%)); + } + + .unban-requests-action-button__selected { + color: @base !important; + background: @accent; + } + + .unban-requests-tabs__load-previous > div { + background: @surface0; + } + + /* Timestamps, mod actions and deleted messages */ + + .targeted-mod-action, + .message__timestamp, + .vcml-message__timestamp, + .chat-line__message--deleted { + color: @subtext0; + } + + /* Suspicious user banner in usercard */ + + .low-trust-user-banner div { + color: @text !important; + } + + /* Emote preview */ + + .chat-input__preview__text { + color: @base !important; + } + + /* Twitch logo in onboarding screen */ + + .onboarding-modal-splash-screen__container { + svg path[fill="#fff"] { + fill: transparent !important; + } + } + + /* Stream category subtitle in onboarding screen */ + + .onboarding-modal-main-list-live-channels-live-channel-card__sub-title { + color: @subtext0 !important; + } + + /* Subscriptions */ + + .tier-display { + color: @mauve; + } + + .tier-display__prime { + color: @blue; + } + + .sub-badge-progress p, + .sub-badge-progress__all-badges--text, + .expired-sub-message { + color: @subtext0 !important; + } + + .sunlight-modal__content { + color: @text !important; + } + + .tw-loading-spinner { + color: @text; + } + + .video-player__container, .clips-root__main { + & when not(@flavor = latte) { + --color-text-overlay: @text; + } + } + + .vertical-selector a:hover { + background: darken(@accent, 5%); + } + + /* Chat popouts */ + + div[data-test-selector="chat-private-callout-queue__callout-container"] { + .tw-callout__close > button { + color: @base !important; + } + div[data-a-target="tw-progress-bar-animation"] { + background: @base; + } + div.tw-progress-bar { + background: fade(@base, 10%); + } + button .tw-svg, svg { + fill: @base; + } + } + + /* SUBtember subscribe button */ + + .gift-subtember-button { + background: @teal; + } + + .player-controls when (@flavor = latte) { + --color-text-button-overlay: @base !important; + --color-background-range-overlay-fill: @base !important; + --color-text-button-overlay-hover: @mantle !important; + } + + /* Clips watch live prompt */ + + .watch-live-prompt { + h5 { + color: @text !important; + } + h6 { + color: @subtext0 !important; + } + } + + .clips-top-nav-user { + .clips-top-nav-user__username, + .tw-svg { + color: @text !important; + } + } + + /* AutoMod caught message */ + + .chat-line__message--alert { + border-color: @red !important; + background-color: @base !important; + } + + .text-fragment--moderated-highlight { + color: @text !important; + background-color: fade(@red, 30%) !important; + } + + /* Activity feed icons */ + + .activity-feed-v2-event--follow { + color: @pink; + } + + .activity-feed-v2-event--subscription { + color: @blue; + } + + .activity-feed-v2-event--reward-request, + .activity-feed-v2-event--raiding { + color: @yellow; + } + + .activity-feed-v2-event--multi-stage { + color: @teal; + } + + .activity-feed-v2-event--creator-goal { + color: @green; + } + + /* Chat message highlights */ + + div[style*="border"] { + /* Suspicious user */ + &[style*="rgb(255, 130, 128)"] { + border-color: @red !important; + } + + /* First message */ + &[style*="rgb(255, 117, 230)"] { + border-color: @pink !important; + } + + /* Returning chatter */ + &[style*="rgb(0, 163, 163)"] { + border-color: @teal !important; + } + + /* Raider */ + &[style*="rgb(245, 245, 0)"] { + border-color: @yellow !important; + } + + /* Mention */ + &[style*="rgb(173, 173, 184)"] { + border-color: @text !important; + } + + /* Moderator */ + &[style*="rgb(0, 168, 101)"] { + border-color: @green !important; + } + + /* VIP */ + &[style*="rgb(219, 0, 179)"] { + border-color: @mauve !important; + } + + /* Subscriber */ + &[style*="rgb(82, 139, 255)"] { + border-color: @blue !important; + } + } + + /* "Account suspended or deactivated" status banner */ + + .viewer-card-header__account-status-banner { + color: @text; + background-color: @mantle !important; + } + + /* Chat mentions */ + + .mention-fragment { + color: @text; + background-color: @surface0; + + &.mention-fragment--recipient { + color: @base; + background-color: @text; + } + } + + /* Clips sharing buttons */ + + .converter(@bg, @fg: @base) { + color: @fg !important; + background-color: @bg; + + &:not([disabled]):hover { + background-color: darken(@bg, 5%); + } + } + + .converter-youtube-button button { + .converter(@red); + } + + .converter-instagram-button button { + .converter(@mauve); + } + + .share-tiktok-button { + background-image: linear-gradient(135deg, @sky, @red); + + button { + color: @text !important; + background-color: @mantle; + + &:not([disabled]):hover { + background-color: @surface0; + } + } + } + + .clips-root__main .seekbar-bar { + background-color: @surface0 !important; + } + + /* Clips editor timeline */ + + .draggable-slider__overlay--purple { + border-color: @accent; + background-color: fade(@accent, 30%); + } + + .draggable-slider-handle--purple { + background-color: @accent; + --color-white: @base; + } + + .clip-editor-timeline-background { + background-color: @base; + } + + .clip-editor-slider-popover { + color: @base; + background-color: @text; + } + + /* Pinned message shadow */ + .pinned-chat__scrollable-area__gradient { + background-image: linear-gradient(180deg, transparent 60%, @mantle); + } + + /* What's new mod view icon */ + .whats-new-button--has-new-posts { + color: @green; + } + + /* Guest star thumbnail border */ + .guest-star-live-card-border { + background-image: linear-gradient(180deg, @mauve 0, @teal 61.98%, @blue); + } + + /* Guest Star circle buttons */ + + .guest-star-circle-button:not( + .guest-star-circle-button--inverted, + .guest-star-circle-button--alert + ), + .guest-star-circle-button__dropdown:not( + .guest-star-circle-button__dropdown--inverted, + .guest-star-circle-button__dropdown--alert + ) { + background-color: @mantle; + &:hover { + background-color: var(--color-hinted-grey-5); + } + + & when (@flavor = latte) { + --color-hinted-grey-5: @subtext0; + color: @base; + background-color: @text; + &:hover { + background-color: var(--color-hinted-grey-5); + } + } + } + + .guest-star-circle-button--inverted, + .guest-star-circle-button__dropdown--inverted { + color: @base; + border-color: @base; + & when (@flavor = latte) { + color: @text; + border-color: @text; + } + } + + /* End Stream Together button */ + .guest-star-circle-button--alert { + color: @base; + } + + /* Guest Star What's new icon */ + .notification-icon--green svg { + fill: @green; + } + + .video-player__overlay when (@flavor = latte) { + --color-text-pill: @base; + } + + /* Polls */ + .community-highlight-stack__card { + .container--default { + background-color: @base; + } + + .container--winner p { + color: @base !important; + } + + .choice-progress__fill--default { + background-color: @surface0; + } + + .top-poll-community-points-contributor { + color: @green; + } + } + + /* Channel points rewards - Learn more */ + [class*="rewardsLearnMoreHeadersDark"], + [class*="rewardsLearnMoreExpandedView"] { + background-color: @base; + } + + .footer__link, .footer__link:hover { + color: @text; + } + + .footer__glitch + path[d="m18 17 4-4V2H6v15h4v4l4-4h4zM12 6h2v6h-2V6zm7 0h-2v6h2V6z"] { + fill: @text; + } + + .bits-leaderboard-expanded__collapse { + svg { + fill: @surface0; + } + } + + .tw-channel-status-text-indicator { + color: @base; + } + + .player-captions-container { + .player-captions-container__caption-line[style*="; color: rgb(255, 255, 255)"] { + color: if(@flavor = latte, @base, @text) !important; + } + } + + article { + .tw-callout-message { + color: @base; + } + .tw-callout__close svg { + fill: @base !important; + } + div.tw-root--theme-dark, div.tw-root--theme-light { + .tw-callout-message { + color: @subtext0; + } + + .tw-callout__close svg { + fill: @text !important; + } + } + } + + .vod-seekbar-preview-overlay__wrapper [class^="CoreText-sc-"] { + color: @text !important; + } + + #chapter-select-popover-body .media-row { + --color-text-overlay: @text; + --color-background-interactable-selected: @surface0; + .media-row__image-wrapper figure { + color: @text; + } + } + } +} + +@-moz-document domain("dashboard.twitch.tv") { + .tw-root--theme-dark { + #catppuccin(@darkFlavor); + } + .tw-root--theme-light { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + + .edit-video-properties-modal__content { + --color-background-float: @base; + } + + .simplebar-content { + background-color: @mantle; + } + + .scrollable-area--suppress-scroll-x > .simplebar-scroll-content, + .scrollable-area--suppress-scroll-x + > .simplebar-scroll-content + > .simplebar-content { + background-color: @base; + } + + .sunlight-page .simplebar-scroll-content .simplebar-content { + background-color: @base; + } + .info_box_row { + background: @crust; + } + .info_box_row_label { + color: @text; + } + .video-card-thumbnail__video-state-overlay { + color: @text !important; + background: fade(@mantle, 80%) !important; + } + + /* Twitch alerts */ + + .alerts-home-main-wrapper { + color: @text !important; + } + + .alerts-home-scrollable-area, + .alert-boxes-section-border-container { + color: @text !important; + .simplebar-content { + background: @mantle !important; + } + .alert-set-card { + background: @crust !important; + } + } + + /* Analytics */ + + .top-stats-tab--active { + color: @accent !important; + box-shadow: 0 calc(var(--border-width-default) * -3) 0 @accent inset; + .top-stats-tab__title { + color: @accent !important; + } + } + + .top-stats-tab:hover { + box-shadow: inset 0 -2px 0 @accent, 0 4px 6px -4px @accent; + background: @base !important; + } + + /* Stream Manager */ + + .stream-manager--page-view { + .mosaic-tile .simplebar-content, + .stream-manager-edit-mode-item, + .stream-manager-edit-mode-stat-item { + background: @mantle !important; + } + } + + /* Autohost / managed channels list */ + + .dashboard-centered-page { + --color-background-alt: @base; + .simplebar-scroll-content, + .simplebar-content { + background: transparent !important; + } + + .autohost-list-item--hovered { + color: @text; + background: @base; + + button svg path { + fill: @text !important; + } + } + } + + /* Research */ + + .time-to-stream-tab--active { + box-shadow: 0 calc(var(--border-width-default) * -3) 0 @accent inset; + } + + /* Collection thumbnails */ + + .collection-preview-image__wrapper { + color: @text !important; + background: linear-gradient( + 90deg, + fade(@mantle, 0%), + fade(@mantle, 100%) 75% + ); + } + + /* AutoMod shadow */ + + .automod-level-controls__categories--bottom::after { + background-image: linear-gradient(fade(@mantle, 0%), @mantle); + } + + /* Tables */ + + .tw-table, + .tw-table-heading { + border-color: @surface0; + background: @crust; + } + + /* Achievements & activity page */ + + .ach-sb, + .activity-page__scrollable .simplebar-content { + background: @mantle !important; + } + + /* Clips player background */ + + .clips-player-container { + background: @crust; + } + + .clmgr-table__row { + &:hover { + background: @surface0 !important; + } + } + + /* Announcements button */ + + .announcements-icon--green svg { + fill: @green !important; + } + + /* Achievements */ + + .ach-q-item { + &.ach-q-item--expanded { + box-shadow: 0 0 0 1px @accent; + } + + [data-test-selector="is-affiliate-banner"] { + span, + a { + color: @base !important; + } + } + + .quest-progress-bars__incomplete { + background-color: @surface0 !important; + } + } + + [data-target="video-card"] { + background: @mantle !important; + } + + /* Stream Manager quick actions */ + + .quick-action, + .quick-actions-store-card-layout--top { + color: @base; + + &.quick-action--purple, + &.quick-actions-store-card-layout--purple { + background-color: @mauve; + } + + &.quick-action--blue, + &.quick-actions-store-card-layout--blue { + background-color: @blue; + } + + &.quick-action--magenta, + &.quick-actions-store-card-layout--magenta { + background-color: @pink; + } + + &.quick-action--green, + &.quick-actions-store-card-layout--green { + background-color: @green; + } + + &.quick-action--red, + &.quick-actions-store-card-layout--red { + background-color: @red; + } + + &.quick-action-layout--disabled { + color: @subtext0; + background-color: @surface0; + } + } + + /* Stream Manager statistics */ + .sunlight-tile { + background-color: @crust; + } + + .creator-home-card__icon-background--yellow { + background-color: @yellow; + } + + .stream-manager--page-view .mosaic-window-body, + .sunlight-expanded-nav-drop-down-menu-layout__scrollable-area, + .sunlight-collapsed-nav-drop-down-menu__scrollable-area { + background-color: @mantle; + } + + [class*="progressContainer--"] { + background-color: @surface0; + } + } +} + +@-moz-document domain("dev.twitch.tv"), + url-prefix("https://discuss.dev.twitch.com/embed/topics") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.css-variables(); + + &, + body { + color: @text !important; + background: @base; + --primary-medium: @text; + --primary-low: @surface0; + scrollbar-color: @surface0 @mantle; + } + + a.btn, + button.btn { + border-color: @accent; + background: @accent !important; + color: @base !important; + } + + a.btn:hover, + button.btn:hover { + background: fade(@accent, 80%) !important; + } + + /* Recent announcements */ + .topics-list .topic-list-item .main-link a { + color: @accent; + } + + .topic-created-at, + .topic-last-posted-at, + .topic-like-count, + .topic-post-count { + color: @subtext0 !important; + } + + /* Header */ + .nav__container, + .dev-top-nav { + background: @crust !important; + + .tw-link, + .dev-top-nav__nav-items-container { + color: @text !important; + background: @crust !important; + } + .online { + border-color: @crust !important; + } + a.btn.light { + background: fade(@accent, 10%) !important; + color: @text !important; + } + .nav__links a { + color: @text; + + &:hover { + color: @subtext0; + } + &.active { + color: @accent; + border-color: @accent; + } + } + .nav__logo svg path { + fill: @text; + } + } + + /* Footers */ + .footer, + .dev-footer, + .subscribe-footer { + h5, + p, + a, + div { + color: @text !important; + } + a:hover { + color: @accent !important; + } + + svg path { + fill: @text !important; + } + + background: @crust; + } + + .bright-cta { + * { + color: @mantle !important; + } + background: @accent; + } + .content-alternate-2 { + background: @base; + } + + .sandbox-tab { + color: @text !important; + } + + .why-twitch ul li { + background: @base; + border-color: @surface0 !important; + } + + .sandbox-tab.active { + color: @accent !important; + border-color: @accent !important; + } + + .hero, + .extension-cta, + .subscribe-footer { + background: @mantle; + } + + thead tr th { + border-color: @surface0; + background: @mantle; + } + + tbody tr td { + border-color: @surface0; + } + + tbody tr:nth-child(odd) { + background: @base !important; + } + tbody tr:nth-child(even) { + background: @mantle !important; + } + + h1, + h2, + h3, + h4, + h5, + h6, + hr { + color: @text !important; + border-color: @surface0 !important; + } + + .right-code { + p { + color: @subtext0; + } + background-color: @base !important; + } + + blockquote { + border-color: @accent; + background: @mantle; + } + + .content, + .main, + .topics-list, + .doc-content { + background: @base; + border-color: @base !important; + a { + color: @accent; + } + border-bottom-color: @surface0 !important; + border-image: none; + -webkit-border-image: none; + } + + code { + border-color: @accent !important; + background: fade(@accent, 5%) !important; + color: @text !important; + } + + /* Code */ + .right-code pre, + pre.highlight, + pre { + border-color: @mantle !important; + background: @mantle !important; + code { + background: transparent !important; + color: @text !important; + } + } + + /* Pills */ + .pill-new { + color: @base !important; + background: @accent !important; + } + .pill-beta { + color: @base !important; + background: @yellow !important; + } + + /* Navbar */ + .sidebar { + background: @mantle !important; + dl { + border-color: @base !important; + } + dt a, + dl dd a { + color: @text !important; + } + dl dd a.active-highlight { + color: @accent !important; + } + dl dd a.active-highlight::before { + border-left-color: @accent !important; + } + dt a:hover { + background: @base !important; + } + + /* Search */ + + input { + color: @text; + &::placeholder { + color: @subtext0; + } + &:focus { + background: @crust !important; + box-shadow: 0 0 3px 1px fade(@accent, 70%); + color: @text; + } + } + + .search-icon svg path { + fill: @text !important; + } + + .algolia-autocomplete { + .algolia-docsearch-suggestion--category-header { + color: @text !important; + background: @mantle !important; + border-color: @base !important; + } + + .algolia-docsearch-suggestion--highlight { + background: @accent !important; + color: @base !important; + } + + .algolia-docsearch-suggestion--content { + background: @mantle !important; + } + + .algolia-docsearch-suggestion--title { + color: @text !important; + } + + .algolia-docsearch-suggestion--text { + color: @subtext0 !important; + } + + .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content { + .algolia-docsearch-suggestion--title, + .algolia-docsearch-suggestion--text { + background: @crust !important; + .algolia-docsearch-suggestion--highlight { + background: @base !important; + } + } + } + } + } + + ul.grid li.story { + h4 a, + a.btn { + color: @text !important; + } + a { + color: @accent !important; + } + .story__links a { + color: @base !important; + } + + border-color: @surface0; + } + + .submission .relative .outer { + svg path { + fill: @text; + } + button { + border-color: @accent !important; + } + + .tag button { + background: @accent !important; + border-color: @accent !important; + } + + .author { + color: @subtext0 !important; + } + background: @mantle; + } + } +} diff --git a/styles/twitter/README.md b/styles/twitter/README.md new file mode 100644 index 0000000000..4606797193 --- /dev/null +++ b/styles/twitter/README.md @@ -0,0 +1,37 @@ + + + +

+ Logo
+ + Catppuccin for Twitter + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + +> [!NOTE] +> Set Twitter's built-in theme to **Lights out** with the blue accent. + +## 💝 Current Maintainer +- [watatomo](https://github.com/watatomo) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/twitter/catppuccin.user.less b/styles/twitter/catppuccin.user.less new file mode 100644 index 0000000000..4819784dd7 --- /dev/null +++ b/styles/twitter/catppuccin.user.less @@ -0,0 +1,935 @@ +/* ==UserStyle== +@name Twitter Catppuccin +@namespace github.com/catppuccin/userstyles/styles/twitter +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/twitter +@version 2026.04.19 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/twitter/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atwitter +@description Soothing pastel theme for Twitter +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] + +@var checkbox colorizeLogo "Colorize Logo" 0 +@var checkbox darkenShadows "Darken Shadows on Dark Themes" 1 +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("twitter.com"), domain("x.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + body.LightsOut { + --border-color: @surface0; + --color: @overlay1; + --color-emphasis: @text; + --hover-bg-color: @surface0; + --cpft-text-primary: @text; + + // shadows + .r-qo02w8, + .r-15ce4ve { + @default-shadow: + fade(@text, 20%) 0 0 15px, + fade(@text, 15%) 0 0 3px 1px; + @black-shadow: + rgba(0, 0, 0, 0.4) 0 0 15px, + rgba(0, 0, 0, 0.35) 0 0 3px 1px; + + box-shadow: @default-shadow; + + & when (@darkenShadows = 1) { + box-shadow: if(@flavor = latte, @default-shadow, @black-shadow); + } + } + + .r-1tbvlxk { + @default-shadow: drop-shadow(fade(@text, 25%) 1px -1px 1px); + @black-shadow: drop-shadow(rgba(0, 0, 0, 0.5) 1px -1px 1px); + + filter: @default-shadow; + + & when (@darkenShadows = 1) { + filter: if(@flavor = latte, @default-shadow, @black-shadow); + } + } + + .r-1uusn97 { + @default-shadow: + fade(@text, 20%) 0 0 5px, + fade(@text, 15%) 0 1px 4px 1px; + @black-shadow: + rgba(0, 0, 0, 0.4) 0 0 5px, + rgba(0, 0, 0, 0.35) 0 1px 4px 1px; + + box-shadow: @default-shadow; + + & when (@darkenShadows = 1) { + box-shadow: if(@flavor = latte, @default-shadow, @black-shadow); + } + } + } + + body, + .PageContainer, + #placeholder { + background-color: @base !important; + color: @text; + } + + #ScriptLoadFailure span { + color: @text; + } + + [style*="scrollbar-color: rgb(62, 65, 68) rgb(22, 24, 28)"] { + scrollbar-color: @accent transparent !important; + scrollbar-width: thin; + } + + // bg color + [data-testid="primaryColumn"], + .r-kemksi { + background-color: @base; + } + + // arrow on account switcher + .r-cqee49 { + color: @base; + } + + // top nav bg color + .r-5zmot { + background-color: fade(@base, 75%); + } + + // element hover (when on base) + .r-1hdo0pc, + .r-pjtv4k { + background-color: fade(@text, 10%); + } + + // element active (when on base) + .r-11gmi9o { + background-color: fade(@text, 20%); + } + + .r-1cuuowz { + background-color: fade(@text, 3%); + } + + // text + .r-1nao33i { + color: @text; + } + + // white text, seems to appear on accent colors + .r-jwli3a { + color: if(@flavor = latte, #fff, @crust); + + // cw svg + &:has( + path[d="M3.693 21.707l-1.414-1.414 2.429-2.429c-2.479-2.421-3.606-5.376-3.658-5.513l-.131-.352.131-.352c.133-.353 3.331-8.648 10.937-8.648 2.062 0 3.989.621 5.737 1.85l2.556-2.557 1.414 1.414L3.693 21.707zm-.622-9.706c.356.797 1.354 2.794 3.051 4.449l2.417-2.418c-.361-.609-.553-1.306-.553-2.032 0-2.206 1.794-4 4-4 .727 0 1.424.192 2.033.554l2.263-2.264C14.953 5.434 13.512 5 11.986 5c-5.416 0-8.258 5.535-8.915 7.001zM11.986 10c-1.103 0-2 .897-2 2 0 .178.023.352.067.519l2.451-2.451c-.167-.044-.341-.067-.519-.067zm10.951 1.647l.131.352-.131.352c-.133.353-3.331 8.648-10.937 8.648-.709 0-1.367-.092-2-.223v-2.047c.624.169 1.288.27 2 .27 5.415 0 8.257-5.533 8.915-7-.252-.562-.829-1.724-1.746-2.941l1.438-1.438c1.53 1.971 2.268 3.862 2.33 4.027z"] + ) { + color: @text; + } + } + + // borders + .r-1kqtdi0, + .r-1roi411 { + border-color: @surface0; + } + + .r-1igl3o0 { + border-bottom-color: @surface0; + } + + .r-2sztyj { + border-top-color: @surface0; + } + + .r-1aihyag { + border-right-color: @surface0; + } + + .r-1wyyjkm { + border-left-color: @subtext0; // border when replying to a dm + } + + // is this post relevant to you? + .r-1ccsd61, + .r-xzxzvz { + border-color: @surface2; + } + + .r-gu4em3, + .r-1bnu78o, + .r-z32n2g, // search bar + .r-1m3jxhj { + background-color: @surface0; + } + + // base color border + .r-1xc7w19 { + border-color: @base; + } + + // active border for dms + .r-1pbtemp { + border-right-color: @accent; + } + + // accent color borders + .r-vhj8yc { + border-color: @accent; + } + + // magnifying glass in search bar + .r-1bwzh9t { + color: @overlay1; + } + + // right side content + .r-g2wdr4 { + background-color: @mantle; + } + + .r-14wv3jr { + border-color: @mantle; + } + + // bg color accent + .r-l5o3uw { + background-color: @accent; + + .r-jwli3a { + color: if(@flavor = latte, #fff, @crust); + } + } + + // accent element when hovered + .r-1vtznih { + background-color: darken(@accent, 10%); + + .r-jwli3a { + color: if(@flavor = latte, #fff, @crust); + } + } + + .r-1peqgm7 { + background-color: fade(@accent, 10%); + } + + // accent element when active + .r-yuvema { + background-color: darken(@accent, 15%); + + .r-jwli3a { + color: if(@flavor = latte, #fff, @crust); + } + } + + .r-r18ze4 { + background-color: fade(@accent, 20%); + } + + // white elements when hovered + .r-jc7xae { + background-color: darken(@text, 4%); + } + + // white elements when active + .r-6wtuen { + background-color: darken(@text, 8%); + } + + // tooltips + .r-1pr99xn { + background-color: @surface1; + } + + // new notifications + .r-1eltapf { + background-color: fade(@sapphire, 10%); + } + + // polls + .r-eok2q2 { + background-color: fade(@accent, 60%); + } + + // box shadow around active poll input box + .r-9cip40 { + box-shadow: @accent 0 0 0 1px; + } + + // spaces + .r-1blqq69 { + border-color: @mauve; + } + + // reactions on dms + .r-qazpri { + color: @overlay1; + } + + @keyframes r-1wvy3k1 { + 0% { + box-shadow: fade(@mauve, 40%) 0; + } + + 100% { + box-shadow: fade(@mauve, 0%) 0; + } + } + + [style="background-image: linear-gradient(61.63deg, rgb(45, 66, 255) -15.05%, rgb(156, 99, 250) 104.96%);"] { + background-image: linear-gradient( + 61.63deg, + @blue -15.05%, + @mauve 104.96% + ) !important; + } + + // tweet textbox placeholder + .draftjs-styles_0 .public-DraftEditorPlaceholder-root { + color: @overlay0; + } + + // who can reply? bg + .r-rgqbpe { + background-color: fade(@blue, 10%); + } + + // circles + .r-s224ru { + background-color: @green; + } + + .r-h7o7i8 { + background-color: fade(@green, 10%); + } + + // live indicator + .r-4nw3r4, + .r-1dgebii { + background-color: @red; + } + + // live border + .r-b5kvu3 { + border-color: @red; + } + + // red transparent bg (appears with "unfollow" hover) + .r-qqmkd0 { + background-color: fade(@red, 10%); + } + + // red bg on hover + .r-12d83nn { + background-color: darken(@red, 10%); + } + + // red bg when active + .r-oybae9 { + background-color: darken(@red, 15%); + } + + .r-11mg6pl { + border-color: if(@flavor = latte, #fff, @crust); // white border + } + + // mask over layer + .r-11z020y { + background-color: fade(desaturate(darken(@accent, 10%), 50%), 12%); + } + + // likes + [fill="rgb(249,22,127)"], + [fill="rgb(222,45,108)"], + g[clip-path="url(#__lottie_element_562)"] path, + [style="color: rgb(249, 24, 128);"] [viewBox="0 0 24 24"] path { + fill: @red !important; + } + + // likes when hover + .r-1krxqcr { + background-color: fade(@red, 10%); + } + + // likes when active + .r-uuique { + background-color: fade(@red, 20%); + } + + // heart svg on notifications page + .r-vkub15, + .r-9l7dzd { + color: @red; + } + + // bell svg on notifications page + .r-1cvl2hr { + color: @accent; + } + + // retweet svg on notifications page + .r-o6sn0f { + color: @green; + } + + // rt when hover + .r-15azkrj { + background-color: fade(@green, 10%); + } + + // rt when active + .r-1x669os { + background-color: fade(@green, 20%); + } + + // image won't load svg + [data-testid="card.wrapper"] + [d="M21.04 1.54L17.5 5.09c-.04-.02-.08-.03-.13-.04L14.3 3H9.7l-3 2H5C3.62 5 2.5 6.12 2.5 7.5v11c0 .46.12.88.34 1.25l-1.3 1.29 1.42 1.42 19.5-19.5-1.42-1.42zM13.7 5l2.33 1.56-2 1.99C13.44 8.2 12.74 8 12 8c-2.21 0-4 1.79-4 4 0 .74.2 1.44.55 2.03L4.5 18.09V7.5c0-.28.22-.5.5-.5h2.3l3-2h3.4zM12 10c.18 0 .35.02.52.07l-2.45 2.45c-.05-.17-.07-.34-.07-.52 0-1.1.9-2 2-2zm7 11H7.24l2-2H19c.28 0 .5-.22.5-.5V9h2v9.5c0 1.38-1.12 2.5-2.5 2.5z"] { + color: @overlay0; + } + + // cw button + .r-n94g0g { + background-color: fade(@text, 30%); // when hovered + } + + .r-z9i421 { + background-color: fade(@text, 27%); // when active + } + + .r-19130f6 { + background-color: @crust; // when hovered + } + + .r-l8tqsx { + background-color: fade(@text, 10%); // when active + } + + // lock svg when you try to write a commu note but can't + .r-3gvs5h { + background-color: @overlay1; + } + + // sunglasses commu note + .r-1fkb3t2 { + background-color: @surface1; + } + + // media player text + .r-jwli3a { + color: @text; + } + + .r-1kwlb9n { + background-color: fade(@red, 12%); + } + + // hard-coded shit + // ugly-ass twitter blue/premium bg. why. + [style*="https://abs.twimg.com/responsive-web/client-web/background-premiumplus-web"] { + background-image: none !important; + background-color: @surface0; + } + + [stroke="#2F3336" i] { + stroke: @surface2 !important; + } + + [stroke="#1D9BF0" i], + [style*="stroke: rgb(29, 155, 240)"] { + stroke: @accent !important; + } + + [stroke="#FFD400" i] { + stroke: @yellow !important; + } + + [fill="#829AAB" i] { + fill: @overlay2 !important; + } + + // "we received your report" svg + [fill="#1DA1F2" i] { + fill: if(@flavor = latte, darken(@sky, 15%), darken(@sky, 30%)) + !important; + } + + [fill="#78C6EE" i] { + fill: @sky !important; + } + + // yellow verified badge + [stop-color="#f4e72a" i], + [stop-color="#cd8105" i], + [stop-color="#cb7b00" i], + [stop-color="#f4ec26" i], + [stop-color="#f9e87f" i], + [stop-color="#e2b719" i] { + stop-color: @yellow !important; + } + + [fill="#d18800" i] { + fill: @yellow !important; + } + + // [fill="#333333" i] { + // fill: @crust !important; + // + // ~ [fill="white"] { + // fill: @text !important; + // } + // } + + [style*="border-color: rgb(83, 100, 113)"] { + border-color: @surface1 !important; + } + + [style*="border-color: rgb(51, 54, 57)"] { + border-color: @surface0 !important; + } + + [style*="border-color: rgb(103, 7, 15)"] { + border-color: fade(@red, 50%) !important; + } + + [style*="border-color: rgb(29, 155, 240)"] { + border-color: @accent !important; + } + + [style*="color: rgb(231, 233, 234)"]:not( + [style*="background-color: rgb(231, 233, 234)"] + ), + [style*="color: rgb(239, 243, 244)"]:not( + [style*="background-color: rgb(239, 243, 244)"] + ), + [style*="color: rgb(255, 255, 255)"]:not( + [style*="background-color: rgb(255, 255, 255)"] + ) { + color: @text !important; + } + + [style*="color: rgb(231, 233, 234)"]:not( + [style*="background-color: rgb(231, 233, 234)"] + ) + input::placeholder { + color: @subtext1 !important; + } + + // faded text + [style*="color: rgb(113, 118, 123)"]:not( + [style*="background-color: rgb(113, 118, 123)"] + ), + [style*="color: rgb(182, 185, 188)"]:not( + [style*="background-color: rgb(182, 185, 188)"] + ) { + color: @overlay1 !important; + } + + // retweets color + [style*="color: rgb(0, 186, 124)"]:not( + [style*="background-color: rgb(0, 186, 124)"] + ) { + color: @green !important; + } + + // likes/unfollow color + [style*="color: rgb(249, 24, 128)"]:not( + [style*="background-color: rgb(249, 24, 128)"] + ), + [style*="color: rgb(244, 33, 46)"]:not( + [style*="background-color: rgb(244, 33, 46)"] + ) { + color: @red !important; + } + + [style*="color: rgb(250, 68, 152)"]:not( + [style*="background-color: rgb(250, 68, 152)"] + ) { + color: @pink !important; + } + + [style*="color: rgb(255, 212, 0)"]:not( + [style*="background-color: rgb(255, 212, 0)"] + ) { + color: @yellow !important; + } + + [style*="color: rgb(120, 86, 255)"]:not( + [style*="background-color: rgb(120, 86, 255)"] + ) { + color: @mauve !important; + } + + [style*="color: rgb(255, 122, 0)"]:not( + [style*="background-color: rgb(255, 122, 0)"] + ) { + color: @peach !important; + } + + // accent color (blue) + [style*="color: rgb(29, 155, 240)"]:not( + [style*="background-color: rgb(29, 155, 240)"] + ) { + color: @accent !important; + } + + // background colors + [style*="background-color: rgb(142, 205, 248)"] { + background-color: lighten(@accent, 10%) !important; + } + + [style*="background-color: rgb(2, 17, 61)"] { + background-color: fade(@accent, 15%) !important; + } + + [style*="background-color: rgba(255, 255, 255, 0.25)"] { + background-color: fade(@text, 25%) !important; + } + + [style*="background-color: rgb(147, 147, 147)"] { + background-color: @overlay0 !important; + + // for toggle circle + + [style*="background-color: rgb(250, 250, 250)"] when not( + @flavor = latte + ) { + background-color: @text !important; + } + } + + [style*="background-color: rgb(29, 155, 240)"] { + background-color: @accent !important; + + [style*="color: rgb(255, 255, 255)"] { + color: if(@flavor = latte, #fff, @crust) !important; + } + } + + [style*="background-color: rgb(239, 243, 244)"] { + background-color: @text !important; + + [style*="color: rgb(15, 20, 25)"] { + color: if(@flavor = latte, #fff, @crust) !important; + } + } + + [style*="background-color: rgb(244, 33, 46)"] { + background-color: @red !important; + + [style*="color: rgb(255, 255, 255)"] { + color: if(@flavor = latte, #fff, @crust) !important; + } + } + + [style*="background-color: rgb(0, 0, 0)"], + [style*="background-color: #000"] { + background-color: @base !important; + } + + [style*="background-color: rgba(15, 20, 25, 0.75)"] { + background-color: fade(@crust, 75%) !important; + + [style*="color: rgb(255, 255, 255)"] svg { + color: @text !important; + } + } + + // whatever + .r-l5o3uw, + .r-1vtznih, + .r-4nw3r4, + .r-12d83nn, + .r-oybae9, + .r-yuvema, + .r-3gvs5h, + [style="background-image: linear-gradient(61.63deg, rgb(45, 66, 255) -15.05%, rgb(156, 99, 250) 104.96%);"] { + [style*="color: rgb(255, 255, 255)"]:not( + [style*="background-color: rgb(255, 255, 255)"] + ), + &[style*="color: rgb(255, 255, 255)"]:not( + [style*="background-color: rgb(255, 255, 255)"] + ), + [style*="color: rgb(231, 233, 234)"]:not( + [style*="background-color: rgb(231, 233, 234)"] + ), + &[style*="color: rgb(231, 233, 234)"]:not( + [style*="background-color: rgb(231, 233, 234)"] + ), + [color="white"] { + color: if(@flavor = latte, #fff, @crust) !important; + } + } + + [data-testid="videoComponent"]:not(.r-4nw3r4), + .r-loe9s5, + .r-drfeu3:has( + [style="background-color: rgba(255, 255, 255, 0.25); border-color: rgba(0, 0, 0, 0); backdrop-filter: blur(4px);"] + ) { + [style*="color: rgb(255, 255, 255)"]:not( + [style*="background-color: rgb(255, 255, 255)"] + ), + &[style*="color: rgb(255, 255, 255)"]:not( + [style*="background-color: rgb(255, 255, 255)"] + ), + .r-jwli3a { + color: #fff !important; + } + } + + // dms have to be here bc of the above + .r-eff69c { + background-color: darken(@accent, 5%); + + [style*="color: rgb(255, 255, 255)"] { + color: @crust !important; + } + } + + // follow button + [data-testid$="-follow"] { + [style*="color: rgb(15, 20, 25)"] { + color: if(@flavor = latte, #fff, @crust) !important; + } + } + + // sports stuff on explore page + // a[href^="/i/events"] > div > div > div[style^="background-color"] > div[style*="color: rgb(255, 255, 255)"] span { + // color: #fff !important; + // } + + // options + & when (@colorizeLogo = 1) { + path[d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"] { + fill: @accent !important; + } + } + + a[aria-label^="Translated from"][aria-label$="by Google"] svg path { + fill: @text !important; + } + } +} + +@-moz-document domain("api.twitter.com"), domain("api.x.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + + html { + background: @mantle; + } + + #header { + color: @subtext0; + background: @base; + border-bottom-color: @surface1; + + .logo a { + border-bottom-color: transparent; + } + + #session { + a { + background: transparent; + color: @subtext0; + } + + h2 img { + border-color: @surface1; + } + } + } + + .footer { + background: @mantle; + border-top-color: @surface1; + } + + .auth h2 { + color: @subtext1; + } + + .oauth #bd { + border-color: @surface1; + } + + .app-info h3 img { + border-color: @base; + } + + .permissions.allow strong { + color: @green; + } + + .button { + background: @overlay0; + color: @text; + border-color: @surface1; + + &:hover { + color: @text; + border-color: @surface1; + background: darken(@surface2, 10%); + } + } + + .button.selected, + .follow-button .unfollow .button { + background-color: @accent; + color: if(@flavor = latte, #fff, @crust); + border-color: darken(@accent, 10%); + + &:hover { + background-color: darken(@accent, 10%); + } + + .app-info, + #bd h3 { + color: @subtext0; + } + + #ft { + color: @overlay0; + } + } + } +} + +@-moz-document domain("twitter.com"), domain("x.com") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + + #session a, + #session input, + #session button { + background: @surface0; + color: @subtext0; + } + + #session .user-menu { + a:focus, + a:hover, + button:focus, + button:hover, + input:focus, + input:hover { + color: if(@flavor = latte, #fff, @crust); + background-color: @accent; + } + } + + .notice, + .notice p, + h2 { + color: @subtext1; + } + + .notice.error { + background: fade(@red, 20%); + border-color: fade(@red, 25%); + } + + // report page? why isn't this themed + .ResponsiveLayout--Night .PageContainer { + background-color: @base; + } + + .list-explanation { + color: @subtext0; + } + + .ResponsiveLayout--Night .list-btn { + &:first-of-type { + border-top-color: @mantle; + } + + &:hover { + background-color: @mantle; + } + } + + .submit-btn { + background-color: @accent; + color: if(@flavor = latte, #fff, @crust); + border-color: darken(@accent, 10%); + } + + .submit-btn:hover, + .redirect-btn:hover { + background-color: darken(@accent, 10%); + } + + .block-btn { + color: @maroon; + border-color: @maroon; + } + + .mute-btn, + .unfollow-btn, + .email-report-btn { + color: @accent; + border-color: @accent; + } + + .list-btn { + border-color: @surface1; + + &:first-of-type { + border-top-color: @surface1; + } + + &:hover { + background-color: @surface0; + } + } + + // authorize page + .js #session .user-menu { + background-color: @surface0; + } + + .dropdown-caret .caret-outer, + .dropdown-caret .caret-inner { + border-bottom-color: @surface0; + } + } +} diff --git a/styles/vercel/README.md b/styles/vercel/README.md index 877d9333c9..0282ccf986 100644 --- a/styles/vercel/README.md +++ b/styles/vercel/README.md @@ -4,44 +4,27 @@

Logo
- Catppuccin for Vercel + Catppuccin for Vercel, Next.js

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
+## Usage +> [!IMPORTANT] +> This userstyle also applies to [Next.js](https://nextjs.org). +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +## 💝 Current Maintainers +- [ryanccn](https://github.com/ryanccn) +- [Dandraghas](https://github.com/Dandraghas) -## 💝 Current Maintainer(s) -- [Ryan Cao](https://github.com/ryanccn)   diff --git a/styles/vercel/assets/catwalk.webp b/styles/vercel/assets/catwalk.webp deleted file mode 100644 index aed9bfee3f..0000000000 --- a/styles/vercel/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:58cd88d32833de621e80c66ade95877b3cf9f2adfe6dfeaf3f50b00fd8343d63 -size 67146 diff --git a/styles/vercel/assets/frappe.webp b/styles/vercel/assets/frappe.webp deleted file mode 100644 index ff74ecf223..0000000000 --- a/styles/vercel/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:15db24eb25b62168552543bf747e294ad3a3469722f135f3c679af269f516361 -size 26700 diff --git a/styles/vercel/assets/latte.webp b/styles/vercel/assets/latte.webp deleted file mode 100644 index c24ab643fb..0000000000 --- a/styles/vercel/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9c191affa1f5876c0ff4349cabed64012a86285b65d918b9d00f4f6286a1a413 -size 26040 diff --git a/styles/vercel/assets/macchiato.webp b/styles/vercel/assets/macchiato.webp deleted file mode 100644 index 581d7da3b3..0000000000 --- a/styles/vercel/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:028e7fd91e7d5662f53e016aac359cf1d64b1b54f8fe416e9e794f320bc7245a -size 27102 diff --git a/styles/vercel/assets/mocha.webp b/styles/vercel/assets/mocha.webp deleted file mode 100644 index b9adfb2d72..0000000000 --- a/styles/vercel/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:20b1aacc2b50557048421288194b62867e40e47d8fce5a1e8304e2728f2dbba2 -size 27886 diff --git a/styles/vercel/catppuccin.user.css b/styles/vercel/catppuccin.user.css deleted file mode 100644 index 569d73a8a3..0000000000 --- a/styles/vercel/catppuccin.user.css +++ /dev/null @@ -1,192 +0,0 @@ -/* ==UserStyle== -@name Vercel Catppuccin -@namespace github.com/catppuccin/userstyles/styles/vercel -@version 0.0.4 -@description Soothing pastel theme for Vercel -@author Catppuccin -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/vercel/catppuccin.user.css -@license MIT -@preprocessor less -@var select flavor "Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] -==/UserStyle== */ -@-moz-document domain("vercel.com") { - :root { - #catppuccin(@flavor); - } - - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - #catppuccin(@lookup) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - - --geist-foreground: @text; - --geist-background: @mantle; - --accents-1: @base; - --accents-2: @surface0; - --accents-3: @surface1; - --accents-4: @surface2; - --accents-5: @overlay0; - --accents-6: @overlay1; - --accents-7: @overlay2; - --accents-8: @subtext0; - --geist-link-color: @rosewater; - --geist-selection: @subtext0; - --geist-success: @blue; - --geist-error: @red; - --geist-cyan: @teal; - - --ds-background-100: @base; - --ds-background-200: @surface0; - --ds-gray-100: @base; - --ds-gray-200: @surface0; - --ds-gray-300: @surface1; - --ds-gray-1000: @text; - --ds-gray-900: @subtext0; - --ds-gray-800: @subtext1; - - --ds-red-800: @red; - --ds-red-900: lighten(@red, 5%); - - svg { - --geist-stroke: var(--geist-background) !important; - } - } -} diff --git a/styles/vercel/catppuccin.user.less b/styles/vercel/catppuccin.user.less new file mode 100644 index 0000000000..028267cddf --- /dev/null +++ b/styles/vercel/catppuccin.user.less @@ -0,0 +1,260 @@ +/* ==UserStyle== +@name Vercel/Next.js Catppuccin +@namespace github.com/catppuccin/userstyles/styles/vercel +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/vercel +@version 2026.02.25 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/vercel/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Avercel +@description Soothing pastel theme for Vercel and Next.js +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("vercel.com"), domain("nextjs.org") { + @import url("https://prismjs.catppuccin.com/variables.important.css"); + + :root.dark-theme { + #catppuccin(@darkFlavor); + } + :root.light-theme { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --geist-foreground: @text; + --geist-background: @mantle; + + --accents-1: @base; + --accents-2: @surface0; + --accents-3: @surface1; + --accents-4: @surface2; + --accents-5: @overlay0; + --accents-6: @overlay1; + --accents-7: @overlay2; + --accents-8: @subtext0; + + --geist-link-color: @accent; + --geist-selection: @subtext0; + --geist-success: @accent; + --geist-error: @red; + --geist-cyan: @teal; + + --ds-background-100: @base; + --ds-background-200: @mantle; + + --ds-gray-100: @mantle; + --ds-gray-200: @surface0; + --ds-gray-300: @surface1; + --ds-gray-400: @surface1; + --ds-gray-600: @subtext0; + --ds-gray-700: @subtext1; + --ds-gray-800: @subtext1; + --ds-gray-900: @subtext0; + --ds-gray-900-value: #lib.rgbify(@subtext0)[]; + --ds-gray-1000: @text; + --ds-gray-1000-value: #lib.rgbify(@text)[]; + --ds-gray-alpha-100: fade(@text, 6%); + --ds-gray-alpha-200: fade(@text, 9%); + --ds-gray-alpha-400: @surface0; + --ds-gray-alpha-900: fade(@text, 61%); + + --themed-hover-bg: @subtext1; + + --ds-red-400: @red; + --ds-red-800: @red; + --ds-red-900: lighten(@red, 5%); + + --ds-blue-200: fade(@accent, 30%); + --ds-blue-300: fade(@accent, 40%); + --ds-blue-400: fade(@accent, 50%); + --ds-blue-700: @accent; + --ds-blue-900: @accent; + + --tw-gradient-top: transparent; + + svg { + --geist-stroke: var(--geist-background) !important; + } + + .geist-disabled img, + .geist-disabled svg { + filter: none; + } + + .styled-scrollbar { + scrollbar-color: @accent transparent; + } + + .dark\:from-black, + .from-white { + --tw-gradient-from: @mantle; + } + + .shadow, + .shadow-md, + .shadow-sm { + box-shadow: none !important; + } + + .card-grid_card__S85BZ { + background: linear-gradient(180deg, @base 0%, @crust 100%); + + &:hover { + background: linear-gradient(180deg, @base 0%, @mantle 100%); + } + } + + [class*="fieldset_footer"] { + background-color: @base; + } + } +} + +@-moz-document domain("nextjs.org") { + :root.dark-theme { + #catppuccin(@darkFlavor); + } + :root.light-theme { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + + article { + :not(h1, h2, h3, h4) > a { + color: @accent; + } + + a:hover { + color: darken(@accent, 5%); + } + } + + nav { + /* Vertical line to the left of links */ + a > div.bg-blue-600 { + background-color: @accent; + } + } + + button[role="combobox"], + [data-radix-popper-content-wrapper] { + --ds-blue-400: @base; + --ds-purple-400: @base; + + /* App Router icon */ + --ds-blue-700: @blue; + + /* Pages Router icon */ + --ds-purple-700: @mauve; + } + + /* Syntax higlighting */ + [class*="code-block_pre"] { + --shiki-token-punctuation: @overlay2; + --shiki-token-constant: @peach; + --shiki-token-string: @green; + --shiki-token-string-expression: @green; + --shiki-token-comment: @overlay2; + --shiki-token-keyword: @mauve; + --shiki-token-parameter: @maroon; + --shiki-token-function: @blue; + } + + /* Footer social media icons */ + img[src="/icons/github.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + img[src="/icons/x.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .group:hover .dark\:group-hover\:bg-white { + background-color: @subtext1; + } + .group:hover .dark\:group-hover\:text-black { + color: @crust; + } + + [data-docs-container] code:not(pre code), + [data-docs-table-of-contents] code:not(pre code) { + border-color: @surface0 !important; + background-color: @mantle !important; + } + + td a { + color: @accent; + } + + .animated-optimizations_window__CjM85 { + background: @mantle !important; + } + + .features_card__xYla9, + .foundation_root__wm0ez, + .foundation_card__v7VKB { + background: @base; + } + + .foundation_cpu__ciXpm { + background: @mantle; + } + + .header_header__zJOD0 { + background: @base; + } + + .mute, + .subtitle { + color: @subtext0; + } + + .mobile-menu_mobileMenu__xqbOP a.mobile-menu_selected__G55UL { + color: var(--geist-background); + } + + .dark-theme .dark\:bg-black\/50 { + background-color: var(--geist-background); + } + + .gradient, + .gradient-text { + --text-gradient: @text; + } + + .bg-background-200, + .bg-vercel-100 { + background-color: @mantle; + } + + .guides_book__j9vP8 { + background: @base !important; + } + + .guides_bind__9COxI { + background: @overlay0 !important; + } + + .bg-gray-50 { + background-color: @mantle; + } + } +} diff --git a/styles/vikunja/README.md b/styles/vikunja/README.md new file mode 100644 index 0000000000..2df937fbf4 --- /dev/null +++ b/styles/vikunja/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Vikunja + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [Guaxinim5573](https://github.com/Guaxinim5573) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/vikunja/catppuccin.user.less b/styles/vikunja/catppuccin.user.less new file mode 100644 index 0000000000..eee2a771ef --- /dev/null +++ b/styles/vikunja/catppuccin.user.less @@ -0,0 +1,340 @@ +/* ==UserStyle== +@name Vikunja Catppuccin +@namespace github.com/catppuccin/userstyles/styles/vikunja +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/vikunja +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/vikunja/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Avikunja +@description Soothing pastel theme for Vikunja +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("try.vikunja.io") { + :root.dark { + #catppuccin(@darkFlavor); + } + :root.light { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + #hslbreakdown(@color, @item) { + --@{item}-h: hue(@color) !important; + --@{item}-s: saturation(@color) !important; + --@{item}-l: lightness(@color) !important; + --@{item}-light-l: lightness(@color) !important; + --@{item}-dark-l: lightness(@color) !important; + --@{item}-invert-l: lightness(@color) !important; + } + + #hslbreakdown(@accent, primary); + --grey-100-hsl: hue(@mantle) saturation(@mantle) lightness(@mantle); + --site-background: @mantle; + --content-heading-color: @text; + --card-header-color: @text; + --card-color: @text; + --body-color: @text; + --label-color: @text; + --strong-color: @text; + --primary: @accent; + --primary-invert: @base; + --switch-view-color: @base; + --input-background-color: @base; + --input-icon-color: @text; + --table-row-hover-background-color: @mantle; + --table-head-cell-color: @text; + --input-border-color: @overlay0; + --link-hover: @accent; + --white: @base; + --grey: @overlay0; + --card-content-background-color: @base; + --success: @green; + --danger: @red; + --warning: @yellow; + --text: @text; + --text-strong: @text; + --button-text-hover-background-color: @base; + --table-striped-row-even-background-color: @mantle; + --code-background: @mantle; + --code: @text; + + body, + div#app, + header, + aside.menu-container, + footer.card-footer { + background: @mantle !important; + } + + svg.llama-cool > circle, + svg.logo > path[fill="#196aff"] { + fill: @accent; + } + + svg.logo, + h1, + .action-heading, + .subtitle a, + .project-menu-title { + color: @text !important; + } + + p.nothing, + .has-text-grey-light { + color: @subtext0 !important; + } + + h1.title.task-id, + div.detail-title, + div.detail-title span { + color: @overlay0; + } + + button { + box-shadow: none !important; + } + + button.is-danger { + color: @red !important; + background: none; + + &:hover { + background: @red !important; + color: @surface0 !important; + } + + &:active { + background: darken(@red, 10%) !important; + color: @surface0 !important; + } + } + + .has-text-danger { + --has-text-hover-color: @red; + } + + button.is-success { + color: @green; + + &:hover { + background: @green !important; + color: @surface0 !important; + } + + &:active { + background: darken(@green, 10%) !important; + } + } + + .base-button.is-primary { + color: @base; + + &:hover { + background: @accent; + } + + &:active { + background: darken(@accent, 10%); + } + + span.icon { + color: @base !important; + } + } + + button.base-button:not(.is-primary) { + color: @text; + } + + div.action-buttons > button:hover, + button.search-result-button:hover, + .button.is-text:active, + .single-task:hover { + background: @mantle; + } + + p.is-editor-empty::before { + color: @overlay0; + } + + header > button.base-button.menu-button::before, + header > button.base-button.menu-button::after { + background: @text; + } + + .menu .menu-list { + li > a, + li > a > span { + color: @text; + } + li > a.router-link-active { + color: @accent; + } + li:hover { + background: @mantle; + } + } + + a.base-button.menu-bottom-link { + color: @overlay0; + + &:hover { + color: @overlay2; + } + } + + div.is-done { + background: @green; + color: @surface0; + } + + div.tiptap__editor { + a { + color: @accent; + } + pre, + code { + background: @surface0; + color: @text; + } + } + + blockquote, + hr { + background: @surface0; + } + + emoji-picker { + --background: @surface0; + --border-color: @overlay0; + --button-hover-background: @overlay0; + --input-border-color: @overlay0; + scrollbar-color: @overlay0 @surface0 !important; + } + + .reaction-button.current-user-has-reacted { + border-color: @accent; + background: fade(@accent, 30%); + } + + p.created { + color: @overlay0; + } + + .progress-bar { + --progress-bar-background-color: @crust; + --progress-value-background-color: @accent; + } + + .loader-container.is-loading::after { + --loader-border-color: @accent; + } + + /* Gantt */ + div.gantt-container { + --grey-300: @surface0; + } + + div.g-gantt-chart { + .g-upper-timeunit, + .g-timeunit { + color: @text !important; + } + + .g-timeunit .today { + color: @surface0; + } + + .g-gantt-row { + background: @base; + } + + div.g-gantt-bar { + div.g-gantt-bar-label > div { + color: @surface0; + } + + .g-gantt-bar-handle-left, + .g-gantt-bar-handle-right { + background: darken(@accent, 10%); + } + } + } + + /* Kaban */ + div.bucket-header, + div.task-item, + div.bucket-footer, + div.bucket > button.base-button { + background: @base; + } + + div.task-item > .task { + background: @mantle; + + span.priority-label { + background: @surface0; + } + } + + /* Command Palette */ + span.result-title, + div.active-cmd.tag { + background: @base; + } + + /* Keyboard Shortcuts modal */ + kbd { + color: @text; + border-color: @overlay0; + background: @base; + } + + div.message-wrapper > div.message.info { + background: @base; + } + + /* Popups */ + div.v-popper__inner { + background: @mantle; + color: @text; + } + + div.v-popper__arrow-outer { + border-color: @mantle; + } + + .modal-mask { + span, + p, + strong { + color: @text !important; + } + } + + /* Vue Notifications */ + .vue-notification { + color: @surface0 !important; + } + .vue-notification button { + background: none; + color: @overlay0 !important; + } + + .vue-notification.success { + background: @green; + border-left-color: darken(@green, 5%); + } + } +} diff --git a/styles/web.dev/README.md b/styles/web.dev/README.md new file mode 100644 index 0000000000..fd74de0e0b --- /dev/null +++ b/styles/web.dev/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for web.dev + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/web.dev/catppuccin.user.less b/styles/web.dev/catppuccin.user.less new file mode 100644 index 0000000000..20d2135fd1 --- /dev/null +++ b/styles/web.dev/catppuccin.user.less @@ -0,0 +1,157 @@ +/* ==UserStyle== +@name web.dev Catppuccin +@namespace github.com/catppuccin/userstyles/styles/web.dev +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/web.dev +@version 2026.03.04 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/web.dev/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aweb.dev +@description Soothing pastel theme for web.dev +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +// Exclude https://pagespeed.web.dev/, which is (currently) poorly themed. +@-moz-document url-prefix("https://web.dev") { + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + :focus-visible { + outline-color: @accent; + } + + --webdev-background-gray: @surface0; + --webdev-background-gray-2: @surface1; + --webdev-background-oficial-gray: @surface0; + --webdev-background-white: @base; + --webdev-google-colors-blue-50: @base; + --webdev-google-colors-blue-600: @accent; + --webdev-google-colors-blue-800: @accent; + --webdev-primary: @accent; + --webdev-text-text-1: @text; + --webdev-text-text-2: @subtext1; + --webdev-text-text-3: @subtext0; + --webdev-illustration-colors-blue: @blue; + --webdev-illustration-colors-gray: @surface2; + --webdev-illustration-colors-green: @green; + --webdev-illustration-colors-red: @red; + + --devsite-secondary-text-color: @subtext1; + --devsite-primary-border: 1px solid @surface0; + --devsite-secondary-border: 1px solid @surface2; + + --devsite-contrast-link-color: @accent; + --devsite-header-link-color-active: @text; + + --devsite-button-disabled-background: @surface0; + --devsite-button-disabled-color: @subtext0; + --devsite-button-primary-background-active: @accent; + --devsite-button-primary-color-active: @crust; + --devsite-button-primary-border-hover: 2px solid transparent; + + --devsite-input-background: @surface0; + --devsite-input-background-focus: fade(@accent, 30%); + + devsite-multiple-choice { + .devsite-multiple-choice-question { + color: @text; + } + + --devsite-multiple-choice-background: @surface0; + --devsite-multiple-choice-correct-background: fade(@green, 10%); + --devsite-multiple-choice-correct-color: @green; + --devsite-multiple-choice-incorrect-background: fade(@red, 10%); + --devsite-multiple-choice-incorrect-color: @red; + } + + body:not([codelabs-content-type="paginated"]) { + --devsite-notice-link-background-hover: @mantle; + + --devsite-caution-notice-background: fade(@red, 10%); + --devsite-caution-notice-color: @red; + --devsite-key-point-notice-background: fade(@sapphire, 10%); + --devsite-key-point-notice-color: @sapphire; + --devsite-key-term-notice-background: fade(@mauve, 10%); + --devsite-key-term-notice-color: @mauve; + --devsite-note-notice-background: fade(@blue, 10%); + --devsite-note-notice-color: @blue; + --devsite-status-notice-color: @teal; + --devsite-success-notice-background: fade(@green, 10%); + --devsite-success-notice-color: @green; + --devsite-warning-notice-background: fade(@peach, 10%); + --devsite-warning-notice-color: @peach; + } + + devsite-code, + devsite-code[dark-code], + devsite-content { + --devsite-code-background: @mantle; + --devsite-code-color: @text; + --devsite-code-buttons-color: @overlay2; + --devsite-code-buttons-hover: @subtext1; + + --devsite-var-color: @mauve; + --devsite-code-comments-color: @overlay2; + --devsite-code-keywords-color: @mauve; + --devsite-code-numbers-color: @peach; + --devsite-code-strings-color: @green; + --devsite-code-types-color: @yellow; + } + + devsite-header devsite-language-selector { + --devsite-select-color: @text; + } + + devsite-playlist { + .devsite-playlist--header h1:first-of-type, + .devsite-playlist--header-badge-info, + .devsite-playlist--header-details-info { + color: @crust; + } + + .devsite-playlist--sections .devsite-playlist--section[expanded] { + color: @crust; + } + + devsite-bookmark { + --devsite-bookmark-icon-color: @crust; + --devsite-bookmark-icon-arrow-color: @crust; + --devsite-dropdown-list-toggle-color-hover: @crust; + } + } + + devsite-content { + --devsite-search-results-breadcrumb-color: @subtext0; + } + + .devsite-site-logo { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .wd-footer-promo { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } +} diff --git a/styles/whatsapp-web/README.md b/styles/whatsapp-web/README.md index 8318947bc1..782d68ba93 100644 --- a/styles/whatsapp-web/README.md +++ b/styles/whatsapp-web/README.md @@ -10,38 +10,18 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
+## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). - - -## 💝 Current Maintainer(s) +## 💝 Current Maintainers - [FrancoRav](https://github.com/FrancoRav) +- [WalkQuackBack](https://github.com/WalkQuackBack) +   diff --git a/styles/whatsapp-web/assets/catwalk.webp b/styles/whatsapp-web/assets/catwalk.webp deleted file mode 100644 index 69d9aa4608..0000000000 --- a/styles/whatsapp-web/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:465c9d0a0029311b4ba5e15f7f5d105c9d4476416e5ec13f84f4a6e3b55b6eb0 -size 297066 diff --git a/styles/whatsapp-web/assets/frappe.webp b/styles/whatsapp-web/assets/frappe.webp deleted file mode 100644 index a9f77eab3d..0000000000 --- a/styles/whatsapp-web/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:395b65314af50a2d8a0137a21f659150b199fb909937662feea77919588effba -size 236826 diff --git a/styles/whatsapp-web/assets/latte.webp b/styles/whatsapp-web/assets/latte.webp deleted file mode 100644 index 9094989b82..0000000000 --- a/styles/whatsapp-web/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:cee6154de623fd2881ee7e505ca043199d7de532ec0e12a28d426309940fa68a -size 121590 diff --git a/styles/whatsapp-web/assets/macchiato.webp b/styles/whatsapp-web/assets/macchiato.webp deleted file mode 100644 index dc98fcb15b..0000000000 --- a/styles/whatsapp-web/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7fe536cd91f5f86b903ee334f69d2daa8eb74451407983c21b9770754985503f -size 244084 diff --git a/styles/whatsapp-web/assets/mocha.webp b/styles/whatsapp-web/assets/mocha.webp deleted file mode 100644 index e26a40ea74..0000000000 --- a/styles/whatsapp-web/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:d228fcde3a78530e6793236f42141ae004dde93dbb76c2b630db47a4d38a78a6 -size 241932 diff --git a/styles/whatsapp-web/catppuccin.user.css b/styles/whatsapp-web/catppuccin.user.css deleted file mode 100644 index 2034bb8e33..0000000000 --- a/styles/whatsapp-web/catppuccin.user.css +++ /dev/null @@ -1,762 +0,0 @@ -/* ==UserStyle== -@name WhatsApp Web Catppuccin -@namespace github.com/catppuccin/userstyles/styles/whatsapp-web -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/whatsapp-web -@version 0.0.2 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/whatsapp-web/catppuccin.user.css -@description Soothing pastel theme for WhatsApp Web -@author Catppuccin -@license MIT - -@preprocessor less -@var select flavor "Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire*", "sky:Sky", "lavender:Lavender", "subtext0:Grey"] -@var checkbox lighterMessages "Lighter incoming messages" 0 -==/UserStyle== */ -@-moz-document domain("web.whatsapp.com") { - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - :root { - #catppuccin(@flavor, @accentColor); - } - - @color: red; - #rgbify(@color) { - @rgb-raw: red(@color) green(@color) blue(@color); - } - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-color: @catppuccin[@@lookup][@@accent]; - - .dark { - .landing-wrapper-before { - background-color: @accent-color !important; - } - - /* STATUS PAGE */ - --status-background: @base !important; - .bfsx6evv { - background-color: @mantle !important; - } - - --modal-backdrop-solid: @base !important; - - /* join group pop up */ - --modal-background: @base !important; - - /* startup progress */ - --progress-primary: @accent-color !important; - --progress-background: @surface1 !important; - --startup-background: @base !important; - --startup-background-rgb: #rgbify(@base) []; - /* home page, no chat selected */ - --intro-background: @base !important; - --intro-border: @accent-color !important; - /* general background */ - --app-background: @base !important; - - /* CHAT LIST */ - /* chat list background */ - --background-default: @base !important; - /* chat list header */ - --panel-header-background: @mantle !important; - /* icons */ - --panel-header-icon: @text !important; - /* other warnings (notifications) */ - --butterbar-default-background: @mantle !important; - --butterbar-notification-icon: @sky !important; - /* loading messages warning */ - --butterbar-green-nux-background: @mantle !important; - /* update available warning */ - --butterbar-update-background: @mantle !important; - --butterbar-update-icon: @accent-color !important; - /* chat list search bar */ - --search-container-background: @base !important; - --search-input-container-background: @base !important; - --search-input-background: @surface0 !important; - --search-input-container-background-active: @mantle !important; - --icon-search-back: @accent-color !important; - /* archive icon */ - --icon-bright-highlight: @accent-color !important; - /* archived unread marker */ - --unread-marker-background: @accent-color !important; - --unread-timestamp: @accent-color !important; - /* archived chats header */ - --archived-chat-persistent-header-background: @crust !important; - /* unread voice message */ - --ptt-green: @green !important; - /* read voice message */ - --ptt-blue: @blue !important; - /* pinned chat icon */ - --icon-pinned: @accent-color !important; - /* last message in selected chat */ - --secondary-stronger: @subtext1 !important; - /* background for active and hover chats in chat list */ - --background-default-active: @surface1 !important; - --background-default-hover: @surface0 !important; - /* unread chats filter */ - --icon-high-emphasis: @green !important; - .p7idzaix { - color: @crust !important; - } - /* voice message playing */ - --ptt-ooc-background: @mantle !important; - - /* CONVERSATION */ - /* chat background */ - --conversation-panel-background: @mantle !important; - /* MESSAGES */ - /* background for incoming and outgoing messages */ - & when (@lighterMessages=1) { - --incoming-background: @surface1 !important; - } - & when (@lighterMessages=0) { - --incoming-background: @base !important; - } - --outgoing-background: @surface0 !important; - /* read double tick */ - --icon-ack: @blue !important; - /* received double tick */ - --bubble-meta-icon: @subtext0 !important; - /* message timestamp */ - --bubble-meta: @text !important; - --message-primary: @text !important; - /* POLL */ - /* creation */ - --poll-modal-background-color: @base !important; - --poll-modal-footer-background-color: @surface0 !important; - /* votes */ - --poll-bar-fill-receiver: @green !important; - --poll-bar-fill-sender: @green !important; - --checkbox-mark: @crust !important; - - /* audio duration */ - --audio-progress-metadata: @subtext0 !important; - /* system messages (unread or day messages in chats) */ - --system-message-text: @text !important; - --system-message-background: @crust !important; - /* unread system message background */ - --unread-background: @crust !important; - --unread-bar-background: @surface1 !important; - /* meta data for documents */ - --document-meta: @subtext1 !important; - /* mentions, links and link previews */ - --mention-at-symbol: @sapphire !important; - --link: @sapphire !important; - --link-preview: @text !important; - --link-preview-lighter: @subtext1 !important; - --link-preview-light: @subtext0 !important; - /* arrow icon in messages */ - & when (@lighterMessages=1) { - --incoming-background-rgb: #rgbify(@surface1) []; - } - & when (@lighterMessages=0) { - --incoming-background-rgb: #rgbify(@base) []; - } - --outgoing-background-rgb: #rgbify(@surface0) []; - /* QUOTED MESSAGES */ - /* quoted messages */ - --quoted-message-text: @text !important; - /* background for quoted incoming and outgoing messages */ - --outgoing-background-deeper: @surface1 !important; - & when (@lighterMessages=1) { - --incoming-background-deeper: @surface2 !important; - } - & when (@lighterMessages=0) { - --incoming-background-deeper: @surface0 !important; - } - - /* SEARCH IN CHAT HIGHLIGHT */ - --highlight: @teal !important; - - /* quote colors */ - .bg-color-1 { - background-color: @green !important; - } - .color-1 { - color: @green !important; - } - .bg-color-2 { - background-color: @blue !important; - } - .color-2 { - color: @blue !important; - } - .bg-color-3 { - background-color: @pink !important; - } - .color-3 { - color: @pink !important; - } - .bg-color-4 { - background-color: @sapphire !important; - } - .color-4 { - color: @sapphire !important; - } - .bg-color-5 { - background-color: @peach !important; - } - .color-5 { - color: @peach !important; - } - .bg-color-6 { - background-color: @sky !important; - } - .color-6 { - color: @sky !important; - } - .bg-color-7 { - background-color: @yellow !important; - } - .color-7 { - color: @yellow !important; - } - .bg-color-8 { - background-color: @teal !important; - } - .color-8 { - color: @teal !important; - } - .bg-color-9 { - background-color: @lavender !important; - } - .color-9 { - color: @lavender !important; - } - .bg-color-10 { - background-color: @red!important; - } - .color-10 { - color: @red!important; - } - .bg-color-11 { - background-color: @mauve !important; - } - .color-11 { - color: @mauve !important; - } - .bg-color-12 { - background-color: @flamingo !important; - } - .color-12 { - color: @flamingo !important; - } - .bg-color-13 { - background-color: @rosewater !important; - } - .color-13 { - color: @rosewater !important; - } - .bg-color-14 { - background-color: @pink !important; - } - .color-14 { - color: @pink !important; - } - .bg-color-15 { - background-color: @maroon !important; - } - .color-15 { - color: @maroon !important; - } - .bg-color-16 { - background-color: @teal !important; - } - .color-16 { - color: @teal !important; - } - /* general text */ - --primary: @text !important; - --primary-strong: @text !important; - --primary-stronger: @text !important; - --primary-strongest: @text !important; - --secondary: @subtext0 !important; - --secondary-strongest-rgb: #rgbify(@text) []; - /* chat list typing message */ - --typing: @green !important; - /* background for video player and image viewer */ - --media-viewer-background: @mantle !important; - /* not loaded media */ - --media-gallery-thumb-background: @crust !important; - - /* Group info/Contact info */ - --photopicker-overlay-background: fadeout(@mantle, 0.8) !important; - --photopicker-overlay-background-rgb: #rgbify(@base) []; - --media-viewer-background-rgb: #rgbify(@base) []; - --drawer-background-deep: @crust !important; - /* group info read more */ - --input-button-more: @sapphire !important; - /* Group info thumbnails border */ - --chat-info-drawer-thumb-background: @surface2 !important; - /* Group admin badge background */ - --chat-marker-background: @mantle !important; - --chat-marker-border: @mantle !important; - /* Group admin badge foreground */ - --chat-marker: @subtext0 !important; - /* Media gallery */ - --drawer-gallery-background: @crust !important; - /* mute toggle */ - --switch-button-checked-color: @accent-color !important; - --switch-track-checked-color: @surface2 !important; - --switch-track-color: @surface2 !important; - --switch-button-color: @overlay1 !important; - - /* danger, block, exit and report buttons */ - --danger: @red!important; - - /* group added by someone not in contacts */ - --button-plain-background: @surface0 !important; - --button-plain-background-hover: @surface1 !important; - - /* EMOJI AND STICKERS */ - --panel-input-background: @surface0 !important; - --sticker-button-background: @surface1 !important; - --active-tab-marker: @accent-color !important; - - /* REACTIONS */ - --reactions-panel-background-color: @surface0 !important; - --reactions-tray-background: @surface0 !important; - --reactions-details-background: @surface0 !important; - --svg-gray-button: @surface0 !important; - - /* Forward message popup */ - --panel-background-colored-deeper: @crust !important; - --modal-backdrop: fadeout(@mantle, 0.8) !important; - - /* MEDIA EDITOR */ - /* background for media editor */ - --panel-background-deeper: @mantle !important; - /* message box for media editor */ - --media-editor-image-caption-input-background: @surface0 !important; - /* selected picture in media editor */ - --media-editor-thumb-border-active: @accent-color !important; - /* send button in media editor */ - --button-round-background: @accent-color !important; - - /* COMPOSE BAR */ - /* type a message bar and background */ - --compose-input-background: @surface0 !important; - --compose-input-border: @surface1 !important; - --compose-panel-background: @mantle !important; - --rich-text-panel-background: @mantle !important; - /* select messages fixes */ - --panel-background: @mantle !important; - --panel-background-rgb: #rgbify(@mantle) []; - --checkbox-background: @accent-color !important; - /* quoted message in compose */ - --popup-panel-background: @surface0 !important; - /* use Surface 0 for contrast, other colors don't pass AAA */ - /* mention list item background */ - --compose-panel-background-hover: @surface1 !important; - /* compose bar icons */ - --icon: @accent-color !important; - /* ATTACH ICONS */ - /* poll icon */ - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(6) - > button - > span - > svg - > circle { - fill: @green !important; - } - /* image icon */ - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(1) - > button - > span - > svg - > g:nth-child(1) - > g - > path:nth-child(2) { - fill: @pink !important; - } - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(1) - > button - > span - > svg - > g:nth-child(1) - > g - > path:nth-child(1) { - fill: @pink !important; - filter: brightness(85%) !important; - } - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(1) - > button - > span - > svg - > g:nth-child(1) - > g - > rect { - fill: @pink !important; - filter: brightness(70%) !important; - } - /* sticker icon */ - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(2) - > button - > span - > svg - > g - > circle { - fill: @blue !important; - filter: brightness(85%) !important; - } - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(2) - > button - > span - > svg - > g - > path:nth-child(2) { - fill: @blue !important; - } - /* camera icon */ - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(3) - > button - > span - > svg - > g:nth-child(1) - > g - > path:nth-child(1) { - fill: @red!important; - filter: brightness(85%) !important; - } - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(3) - > button - > span - > svg - > g:nth-child(1) - > g - > path:nth-child(2) { - fill: @red!important; - } - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(3) - > button - > span - > svg - > g:nth-child(1) - > g - > rect { - fill: @red!important; - filter: brightness(85%) !important; - } - /* document icon */ - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(4) - > button - > span - > svg - > g:nth-child(1) - > g - > path:nth-child(1) { - fill: @mauve !important; - filter: brightness(85%) !important; - } - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(4) - > button - > span - > svg - > g:nth-child(1) - > g - > path:nth-child(2) { - fill: @mauve !important; - } - /* contact icon */ - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(5) - > button - > span - > svg - > g:nth-child(1) - > g - > g - > path:nth-child(1) { - fill: @sky !important; - filter: brightness(85%) !important; - } - div._1OT67 - > div - > span - > div - > div - > ul - > li:nth-child(5) - > button - > span - > svg - > g:nth-child(1) - > g - > g - > path:nth-child(2) { - fill: @sky !important; - } - /* VOICE MESSAGE SENDING */ - --ptt-draft-button-send: @accent-color !important; - --ptt-draft-waveform-background: @base !important; - --ptt-draft-button-stop: @red !important; - --ptt-draft-button-stop-hover: @maroon !important; - - /* GENERAL OPTIONS */ - /* dropdown menus */ - --dropdown-background: @surface0 !important; - --dropdown-background-hover: @surface1 !important; - - /* OTHER SECTIONS */ - /* profile background */ - --drawer-background: @base !important; - /* communities, new chat, other panes */ - --panel-background-colored: @mantle !important; - --drawer-section-background: @base !important; - /* new chat icons */ - --round-icon-background: @green !important; - --inverse: @text !important; - /* title and icon for drawers */ - --drawer-header-title: @text !important; - /* buttons such as create community */ - --button-primary-background: @accent-color !important; - --button-primary-background-hover: fadeout(@accent-color, 0.8) !important; - /* keyboard shortcuts background */ - --panel-background-lighter: @mantle !important; - /* active input in modals and drawers */ - --input-border-active: @accent-color !important; - } - - /* Start page drawing */ - #app - > div - > div - > div._2Ts6i._2xAQV - > div - > div - > div.WM0_u - > span - > svg - > path:nth-child(1) { - fill: @surface2 !important; - } - - /* Status unread dot */ - #df9d3429-f0ef-48b5-b5eb-f9d27b2deba6 > path:nth-child(2) { - fill: @accent-color !important; - } - - #side - > div._3gYev - > div - > div - > button - > div._3xdht._1ZD3q - > span - > svg - > path { - fill: @accent-color !important; - } - } -} diff --git a/styles/whatsapp-web/catppuccin.user.less b/styles/whatsapp-web/catppuccin.user.less new file mode 100644 index 0000000000..f53eed8192 --- /dev/null +++ b/styles/whatsapp-web/catppuccin.user.less @@ -0,0 +1,261 @@ +/* ==UserStyle== +@name WhatsApp Web Catppuccin +@namespace github.com/catppuccin/userstyles/styles/whatsapp-web +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/whatsapp-web +@version 2026.07.03 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/whatsapp-web/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Awhatsapp-web +@description Soothing pastel theme for WhatsApp Web +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] + +@var checkbox lighterMessages "Elevated incoming messages" 0 +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("web.whatsapp.com") { + /* Note: Some variables appear to be applied on :root, + but without using :has there doesn't seem to be a good + way to target the root whenever a certain theme is applied. + */ + + :root:has(> :not(.dark)), + :root .color-refresh, + .color-refresh, + /* Layer under mount */ + .app-wrapper-web.app-wrapper-web, + .app-wrapper-web.app-wrapper-web:root { + #catppuccin(@lightFlavor); + } + + :root:has(> .dark), + .dark.color-refresh, + .color-refresh.dark, + /* Layer under mount */ + .dark .app-wrapper-web.app-wrapper-web, + .dark .app-wrapper-web.app-wrapper-web:root { + #catppuccin(@darkFlavor); + } + + #initialLoad(@styles) { + #RGB(splashscreen-startup-background, @styles[@crust]) !important; + #RGB(splashscreen-startup-icon, @styles[@surface0]) !important; + + #RGB(splashscreen-primary-title, @styles[@text]) !important; + + #RGB(splashscreen-progress-primary, @styles[@@accentColor]) !important; + #RGB(splashscreen-progress-background, @styles[@surface1]) !important; + + #RGB(splashscreen-secondary-lighter, @styles[@overlay2]) !important; + + #RGB(startup-icon, @styles[@surface1]) !important; + #RGB(startup-background, @styles[@crust]) !important; + + #RGB(progress-background, @styles[@overlay0]) !important; + } + + // Inital loading screen (Avoid FOUC) + [style^="--splashscreen-startup-background: #F7F5F3;"] { + #initialLoad(@catppuccin[@@lightFlavor]); + } + + [style^="--splashscreen-startup-background: #0A1014;"] { + #initialLoad(@catppuccin[@@darkFlavor]); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + @accentContent: if(@flavor = latte, @base, @crust); + + @emphasize: 10%; + @deemphasize: if(@flavor = latte, 15%, 30%); + @bubble-surface-deemp: 20%; + + @scrim: 30%; + @pressed: 20%; + + #WDS(accent, @accent); + #WDS(accent-deemphasized, fade(@accent, @deemphasize)); + #WDS(accent-emphasized, lighten(@accent, @emphasize)); + + #WDS(secondary-negative, @red); + #WDS(secondary-negative-deemphasized, fade(@red, @deemphasize)); + #WDS(secondary-negative-emphasized, @red); + + #WDS(secondary-positive, @green); + #WDS(secondary-positive-deemphasized, fade(@green, @deemphasize)); + + #WDS(secondary-warning, @yellow); + #WDS(secondary-warning-deemphasized, fade(@yellow, @deemphasize)); + + #WDS(content-default, @text); + #WDS(content-deemphasized, @overlay2); + #WDS(content-disabled, fade(@text, 50%)); + + #WDS(content-on-accent, @accentContent); + #WDS(content-action-default, @accent); + #WDS(content-action-emphasized, lighten(@accent, @emphasize)); + #WDS(content-external-link, @blue); + #WDS(content-inverse, @crust); + #WDS(content-read, @blue); + + #WDS(background-wash-inset, @crust); + #WDS(background-wash-plain, @crust); + #WDS(background-elevated-wash-plain, @crust); + #WDS(background-elevated-wash-inset, @crust); + #WDS(background-dimmer, fade(#000, @scrim)); + #WDS(modal-backdrop-solid, @crust); + + #WDS(surface-default, @mantle); + --background-default: var(--WDS-surface-default); + --search-container-background: var(--WDS-surface-default); + #WDS(surface-emphasized, @base); + #WDS(surface-elevated-default, @base); + #WDS(surface-elevated-emphasized, mix(@text, @base, @emphasize)); + #WDS(surface-highlight, fade(@text, @pressed)); + #WDS(surface-inverse, @text); + #WDS(surface-pressed, fade(@text, @pressed)); + + #WDS(lines-divider, fade(@text, 10%)); + #WDS(lines-outline-default, @overlay0); + #WDS(lines-outline-deemphasized, fade(@text, @deemphasize)); + + #WDS(persistent-activity-indicator, fade(@green, 90%)); + #WDS(persistent-always-black, #000); + #WDS(persistent-always-white, #fff); + #WDS(persistent-always-branded, @accent); + + #WDS( + systems-bubble-surface-incoming, + if(@lighterMessages = 1, @surface1, @base), + ); + + #WDS( + systems-bubble-surface-outgoing, + mix(@accent, @base, @bubble-surface-deemp), + ); + #WDS(systems-bubble-content-deemphasized, fade(@text, 50%)); + + #WDS(systems-bubble-surface-overlay, @mantle); + #WDS(systems-bubble-surface-system, @mantle); + + #WDS( + systems-bubble-surface-e2e, + mix(@yellow, @mantle, @bubble-surface-deemp), + ); + #WDS(systems-bubble-content-e2e, @yellow); + + #WDS( + systems-bubble-surface-business, + mix(@teal, @mantle, @bubble-surface-deemp), + ); + + #WDS(systems-chat-surface-composer, @base); + #WDS(systems-chat-background-wallpaper, @crust); + #WDS(systems-chat-foreground-wallpaper, @mantle); + #WDS(systems-chat-surface-tray, @base); + #WDS(systems-status-seen, fade(@text, 50%)); + + #WDS(components-platform-gesture-bar, fade(@crust, 50%)); + #WDS(components-platform-status-bar, fade(@crust, 80%)); + #WDS(components-surface-nav-bar, @base); + + #WDS(app-wash, @surface0); + + #WDS(white, @crust); + #RGB(white, @crust); + + #RGB(attachment-type-stickers-color, @green); + #RGB(attachment-type-polls-color, @yellow); + #RGB(attachment-type-contacts-color, @sky); + #RGB(attachment-type-camera-color, @pink); + #RGB(attachment-type-photos-color, @blue); + #RGB(attachment-type-documents-color, @mauve); + #RGB(attachment-type-audio-color, @peach); + /* \/ Note: Seems to be overwritten by a generated + CSS variable, so has no effect :( */ + #RGB(attachment-type-event-color, @pink); + + #RGB(toast-background, @surface1); + #RGB(toast-text, @text); + + #RGB(picker-background, @surface1); + + #RGB(butterbar-blue-nux-background, @sky); + #RGB(butterbar-blue-nux-icon-background, darken(@sky, 30%)); + #RGB(blue-light, @blue); + + #RGB(gray-500, @overlay2); + + #RGB(focus-animation, mix(@accent, @base, 40%)); + #RGB(focus-animation-deeper, mix(@accent, @base, 30%)); + + #RGB(startup-icon, @surface1); + #RGB(startup-background, @crust); + + #RGB(progress-background, @surface0); + + /* "About AI messages" icon */ + .st0 { + fill: @accent !important; + stroke: @surface0; + } + + /* TODO: Meta AI/other bot colours */ + + input[type="time"]::-webkit-datetime-edit-hour-field:focus, + input[type="time"]::-webkit-datetime-edit-minute-field:focus, + input[type="time"]::-webkit-datetime-edit-second-field:focus, + input[type="time"]::-webkit-datetime-edit-ampm-field:focus, + input[type="date"]::-webkit-datetime-edit-year-field:focus, + input[type="date"]::-webkit-datetime-edit-month-field:focus, + input[type="date"]::-webkit-datetime-edit-day-field:focus { + background-color: @accent; + color: @accentContent; + } + + [data-icon="wa-wordmark-refreshed"] path { + fill: if( + @flavor = latte, + var(--WDS-persistent-always-branded), + currentcolor + ); + } + + /* Toasts */ + #wa-popovers-bucket + + span + > div + button:nth-of-type(1):not(:has(> [data-icon="x-alt"])) { + color: var(--WDS-accent-emphasized); + } + + /* Date picker */ + #RGB(date-picker-text-color, @text); + .react-calendar__tile:disabled { + color: @subtext0; + } + .react-calendar__month-view__days__day--neighboringMonth { + color: @overlay2; + } + } +} + +#WDS(@id, @color) { + --WDS-@{id}: @color; + --WDS-@{id}-RGB: #lib.rgbify(@color)[]; + --WDS-@{id}-rgb: #lib.rgbify(@color)[]; +} + +#RGB(@id, @color) { + --@{id}: @color; + --@{id}-rgb: #lib.rgbify(@color)[]; +} diff --git a/styles/wiki.nixos.org/README.md b/styles/wiki.nixos.org/README.md new file mode 100644 index 0000000000..f82f46cd32 --- /dev/null +++ b/styles/wiki.nixos.org/README.md @@ -0,0 +1,37 @@ + + + +

+ Logo
+ + Catppuccin for NixOS Wiki + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [orangci](https://github.com/orangci) + +## 💖 Past Maintainer +- [nekowinston](https://github.com/nekowinston) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/wiki.nixos.org/catppuccin.user.less b/styles/wiki.nixos.org/catppuccin.user.less new file mode 100644 index 0000000000..a6c5708bec --- /dev/null +++ b/styles/wiki.nixos.org/catppuccin.user.less @@ -0,0 +1,1438 @@ +/* ==UserStyle== +@name NixOS Wiki Catppuccin +@namespace github.com/catppuccin/userstyles/styles/wiki.nixos.org +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/wiki.nixos.org +@version 2025.09.06 +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Awiki.nixos.org +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/wiki.nixos.org/catppuccin.user.less +@description Soothing pastel theme for NixOS Wiki +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +@var checkbox highlight-redirect "Highlight redirect links" 0 +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("wiki.nixos.org") { + @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); + + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --background-color-base: @base; + --home-panel-heading-background: @mantle; + --home-panel-border-color: @surface0; + --table-border-color: @crust; + --table-header-background: @surface1; + --table-even-background: @surface2; + + background-color: @base; + + body, + .vector-feature-zebra-design-enabled .vector-header-container .mw-header, + .vector-feature-zebra-design-enabled .mw-page-container, + .vector-feature-zebra-design-enabled .vector-pinned-container, + .vector-feature-zebra-design-enabled + .vector-dropdown + .vector-dropdown-content, + .uls-lcd, + .uls-search, + .uls-filtersuggestion, + #uls-settings-block.uls-settings-block--vector-2022.uls-settings-block--with-add-languages, + .app-badges .footer-sidebar-content, + .pure-form input[type="search"], + .suggestions-dropdown, + .cdx-menu, + .vector-header-container .mw-header, + .mw-page-container, + .vector-pinned-container, + .vector-header-container .vector-sticky-header, + .mw-mmv-image, + .mw-body, + .frb-form-wrapper, + .mw-echo-ui-placeholderItemWidget, + .oo-ui-popupWidget-popup, + .mw-echo-ui-notificationItemWidget, + .oo-ui-optionWidget-selected { + background-color: @base; + } + + body, + .mw-heading, + h1, + h2, + h3, + h4, + h5, + h6, + .vector-feature-zebra-design-enabled body, + .vector-feature-zebra-design-enabled + .vector-toc + .vector-toc-list-item-active + > .vector-toc-link, + .vector-feature-zebra-design-enabled + .vector-toc + .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) + > .vector-toc-link, + .vector-feature-zebra-design-enabled + .vector-toc + .vector-toc-list-item-active.vector-toc-level-1-active + > .vector-toc-link, + .vector-menu-tabs .mw-list-item.selected a, + .vector-menu-tabs .mw-list-item.selected a:visited, + .cdx-button:enabled, + .cdx-button.cdx-button--fake-button--enabled, + .mw-footer li, + .vector-feature-zebra-design-enabled + .vector-toc + .vector-toc-level-1-active:not(.vector-toc-list-item-active) + > .vector-toc-link, + .central-featured-lang small, + .footer-sidebar-text, + .other-project-tagline, + .site-license, + .search-container .js-langpicker-label, + .langlist > ul > li, + .suggestion-title, + .cdx-menu-item--enabled .cdx-menu-item__content, + .mwe-popups .mwe-popups-extract, + .mw-body-content .mw-number-text h3, + .vector-pinnable-element .vector-menu-heading, + .vector-toc .vector-toc-list-item-active > .vector-toc-link, + .vector-toc + .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) + > .vector-toc-link, + .vector-toc + .vector-toc-list-item-active.vector-toc-level-1-active + > .vector-toc-link, + .uls-empty-state .uls-empty-state__header, + .uls-empty-state .uls-empty-state__desc, + .uls-no-results-found-title, + .mw-mmv-post-image, + .mw-mmv-credit, + .frb-form-wrapper, + .mw-echo-ui-notificationItemWidget-content-message-header, + .oo-ui-labelElement, + #contentSub:not(:empty) { + color: @text !important; + } + + .mw-parser-output .fmbox { + border-color: @surface2 !important; + background-color: @base !important; + } + + .cdx-thumbnail__image { + border-color: @text; + } + + /* maths */ + .equation-box, + .equation-box * { + background: none !important; + } + img.mwe-math-fallback-image-display, + img.mwe-math-fallback-image-inline { + & when (@flavor = latte) { + filter: brightness(0) saturate(100%) invert(31%) sepia(9%) saturate( + 1499% + ) hue-rotate(196deg) brightness(90%) contrast(85%); + } + + & when (@flavor = frappe) { + filter: brightness(0) saturate(100%) invert(92%) sepia(6%) saturate( + 3753% + ) hue-rotate(184deg) brightness(93%) contrast(106%); + } + + & when (@flavor = macchiato) { + filter: brightness(0) saturate(100%) invert(82%) sepia(7%) saturate( + 1042% + ) hue-rotate(193deg) brightness(103%) contrast(92%); + } + + & when (@flavor = mocha) { + filter: brightness(0) saturate(100%) invert(83%) sepia(28%) saturate( + 223% + ) hue-rotate(190deg) brightness(99%) contrast(93%); + } + } + + .mwe-popups .mwe-popups-extract[dir="ltr"]::after { + background-image: linear-gradient( + to right, + rgba(255, 255, 255, 0), + @surface0 50% + ); + } + table { + background: @surface2 !important; + } + + tr { + background-color: @surface0 !important; + } + + th { + background: @overlay0 !important; + color: @mantle !important; + } + + .quotebox, + div.thumbinner { + background-color: @surface0 !important; + border-color: @surface2 !important; + } + + .navbox-group, + .infobox-label { + color: @text !important; + } + + .cdx-button:enabled, + .cdx-text-input__input:enabled { + color: @text; + background-color: @base; + border-color: @surface2; + &:hover { + background-color: @mantle; + border-color: @text; + color: @text; + } + } + + .vector-dropdown .vector-dropdown-content, + .header-container.header-chrome { + background-color: @mantle; + } + + .skin-vector .uls-search { + border-bottom-color: @surface2; + } + + .oo-ui-textInputWidget, + .oo-ui-inputWidget-input { + color: @text !important; + background-color: @surface1 !important; + border-color: @surface2 !important; + } + + .oo-ui-pendingElement-pending { + background-color: @base; + background-image: linear-gradient( + 135deg, + @surface0 25%, + transparent 25%, + transparent 50%, + @surface0 50%, + @surface0 75%, + transparent 75%, + transparent + ); + } + + .oo-ui-tagItemWidget.oo-ui-widget-disabled { + color: @text; + background-color: @overlay0; + text-shadow: 0 0 0 @text; + border-color: @surface0; + } + + .oo-ui-buttonElement-frameless.oo-ui-widget-enabled + > .oo-ui-buttonElement-button, + .mw-mmv-credit, + .mw-mmv-options-dialog-header, + .mw-mmv-options-text-header { + color: @text; + } + + .mw-mmv-options-text-body { + color: @subtext0; + } + + .mw-ui-input:not(:disabled) { + background-color: @surface0; + color: @text; + border-color: @surface2; + } + + .mw-ui-button { + color: @mantle; + background-color: @accent; + border-color: @accent; + } + + .imbox-delete { + border-color: @red !important; + background-color: @surface0 !important; + } + + .imbox { + background-color: @overlay0 !important; + border-color: @peach !important; + } + + .talkheader-help { + background-color: @surface1 !important; + border-color: @green !important; + } + + .assess, + .assess-NA, + .navbox-subgroup { + background: @surface0 !important; + border-color: @surface1 !important; + } + + .documentation, + .documentation-container, + .documentation-metadata { + background-color: fade(@green, 15%) !important; + } + + .ambox, + .portalborder { + background-color: @surface1 !important; + border-color: @surface2 !important; + } + + .navbox-title { + color: @text !important; + } + + .mw-content-ltr.mw-highlight-lines pre, + .mw-content-ltr.content .mw-highlight-lines pre { + box-shadow: inset 2.75em 0 0 @mantle; + } + + .mw-redirect when (@highlight-redirect = 1) { + color: @green !important; + } + + .mbox-text { + color: @text !important; + } + + .sidebar-above, + .p, + .o { + color: @text !important; + } + .ni, + .mw-templatedata-doc-muted { + color: @subtext1 !important; + } + .nv, + .nn { + color: @blue !important; + } + + .sidebar-above a span { + color: @text !important; + } + + .sidebar-title-with-pretitle span { + color: @text !important; + } + + .nt { + color: @green !important; + } + + .nl { + color: @teal !important; + } + + .ambox-style { + border-left-color: @yellow !important; + } + + .mw-parser-output .mainpage-frame { + background: @surface0 !important; + border-color: @surface0 !important; + } + + .mw-parser-output .mainpage-heading-title { + background: linear-gradient( + to right, + rgba(saturate(lighten(@accent, 4%), -3%), 0.4), + @surface0 + ) !important; + } + + .hidden-title { + background-color: @green !important; + color: @mantle !important; + } + + .mw-mmv-post-image, + .mw-mmv-options-dialog { + background-color: @base; + color: @text; + } + .mw-mmv-image-metadata { + background-color: @base; + border-color: @base; + } + + .mw-mmv-dialog-down-arrow { + background-color: @base !important; + } + + .oo-ui-tagItemWidget.oo-ui-widget-enabled { + color: @text; + background-color: @overlay0 !important; + border-color: @surface0; + } + + ol.references li:target { + background-color: @surface2; + } + + .mw-body-content .error { + color: @red; + } + + .divbox-gray, + .infobox-above { + background-color: @surface2 !important; + border-color: @overlay0 !important; + } + + .biota > * > tr > th { + background-color: @yellow !important; + color: @mantle !important; + } + + .cmbox { + background-color: @blue !important; + } + + .wikitable { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface2 !important; + } + + .wikitable > * > tr > th { + background-color: @surface1 !important; + } + + .wikitable > * > tr > td, + .wikitable > * > tr > th { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface2; + } + + .mw-searchresults-has-iw .iw-result__header a { + color: @text; + } + + .mw-search-result-data { + color: @subtext0; + } + + .navbox-abovebelow { + background-color: @overlay2 !important; + border-color: @overlay2 !important; + } + + .vector-feature-zebra-design-enabled + .vector-pinnable-element + .vector-menu-heading { + color: @text; + border-bottom-color: @surface0; + } + + .mwe-popups .mwe-popups-container { + background-color: @surface0; + } + + .vector-pinnable-header-toggle-button { + background-color: @surface0; + color: @text; + &:hover { + background-color: @base; + } + } + + .mw-parser-output .navbox-list { + border-color: @surface0; + } + + .pure-button-primary-progressive, + .pure-button-primary-progressive:hover { + background-color: @accent; + border-color: @accent; + } + + .suggestion-link { + border-bottom-color: @surface0; + } + + .cdx-menu, + .skin-vector .uls-menu, + .suggestiodns-dropdown, + .cdx-search-input--has-end-button, + .vector-sticky-header, + .vector-sticky-header-context-bar, + .mw-heading2 { + border-color: @surface2; + } + + .suggestion-link.active { + background-color: fade(@accent, 20%); + .suggestion-title { + color: @accent; + } + } + + .mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted, + .cdx-menu-item--enabled.cdx-menu-item--highlighted { + background-color: fade(@accent, 20%); + } + + .mw-echo-ui-sortedListWidget, + .mw-echo-ui-sortedListWidget-group, + .mw-echo-ui-subGroupListWidget-header { + border-color: @surface2; + } + + .mw-mmv-post-image, + .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive + .cdx-button__icon { + background-color: @crust; + } + + .cdx-text-input__input:enabled::placeholder, + .cdx-text-input__input:enabled ~ .cdx-text-input__icon-vue, + .skin-vector .uls-languagefilter, + .skin-vector .uls-lcd-region-title, + .suggestion-description, + .cdx-menu-item--enabled .cdx-menu-item__text__description, + .mw-number-text, + .boilerplate > div:nth-child(3) > span:nth-child(1), + .boilerplate > div:nth-child(4) > span:nth-child(2) { + color: @subtext0 !important; + } + + input:hover + .cdx-button.cdx-button--action-progressive { + background-color: fade(@accent, 12.5%); + } + + #pt-notifications-alert .mw-echo-unseen-notifications::after { + background-color: @red !important; + } + + #pt-notifications-notice .mw-echo-unseen-notifications::after { + background-color: @blue !important; + } + + a, + .mw-parser-output a.external:visited { + color: @accent; + &:visited { + color: @mauve; + } + } + + a.new, + .mw-parser-output .cs1-visible-error, + .vector-menu-tabs .mw-list-item.new a, + .mw-plusminus-neg { + color: @red; + } + + a.mw-selflink { + color: @text; + } + + #searchInput { + color: @text; + &:hover { + border-color: @surface2; + } + &:focus { + border-color: @accent; + } + } + + .pure-form input[type="search"] { + border-color: @surface2; + box-shadow: inset 0 0 0 1px @surface2; + } + + #pt-notifications-alert .mw-echo-notifications-badge::after, + #pt-notifications-notice .mw-echo-notifications-badge::after, + .mw-echo-notification-badge-nojs::after { + border-color: @crust; + background-color: @accent; + color: @base; + } + + h2 { + border-bottom-color: @surface2; + } + + .mw-footer { + border-top-color: @surface2; + } + + .bookshelf { + border-top-color: @surface0; + box-shadow: 0 -1px 0 @surface0; + } + + body.ns-talk .mw-parser-output .mp-toolbox, + .mw-parser-output .tmbox, + #talkheader { + border-color: fade(@yellow, 20%) !important; + background-color: fade(@yellow, 10%) !important; + } + + body.ns-talk .mw-parser-output .mp-toolbox-daily th { + border-color: fade(@yellow, 80%) !important; + background-color: fade(@yellow, 20%) !important; + } + + .fn.org { + color: @accent; + } + + .mw-parser-output .mp-toolbox-daily th, + .mw-parser-output td.mp-toolbox-tfl-not { + background: fade(@yellow, 20%) !important; + border-color: fade(@yellow, 20%) !important; + } + + body.ns-talk .mw-parser-output .mp-toolbox-daily { + border-color: fade(@yellow, 20%) !important; + background: none !important; + } + + .mw-parser-output tr + tr > .navbox-list, + .mw-parser-output tr + tr > .navbox-group { + border-top-color: @surface0; + } + + .ext-phonos-PhonosButton.oo-ui-buttonElement-frameless.oo-ui-buttonWidget + > .oo-ui-buttonElement-button:hover { + background-color: fade(@accent, 20%); + } + + .styled-select:hover { + background-color: @surface0; + } + + .lang-list-button, + .lang-list-button:hover { + background-color: @base; + border-color: @surface1; + outline-color: @base; + } + + .cdx-typeahead-search__search-footer__icon.cdx-icon { + color: @subtext0; + } + + .vector-toc + .vector-toc-level-1-active:not(.vector-toc-list-item-active) + > .vector-toc-link { + color: @text !important; + } + + .lang-list-active .lang-list-button { + background-color: @base; + border-color: @surface1; + outline-color: @base; + } + + .lang-list-button:focus { + box-shadow: inset 0 0 0 1px @accent; + } + + .lang-list-border { + background-color: @surface1; + } + + .infobox-header { + background-color: @surface1 !important; + color: @text !important; + } + + td[style*="background-color"], + td[style*="background-color"] * { + color: @crust !important; + } + + #toc-Services > a:nth-child(1) > div:nth-child(1) { + color: @text !important; + } + + .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive, + .vector-menu-tabs .mw-list-item a, + .vector-feature-zebra-design-enabled .vector-toc .vector-toc-link, + .mw-parser-output a.extiw, + .mw-parser-output a.external, + .mw-collapsible-toggle-default .mw-collapsible-text, + .vector-feature-zebra-design-enabled + .vector-pinnable-element + .mw-list-item + a, + .vector-feature-zebra-design-enabled + .vector-dropdown-content + .mw-list-item + a, + .vector-feature-zebra-design-enabled + .vector-pinnable-element + .mw-list-item + a:not(.mw-selflink):visited, + .vector-feature-zebra-design-enabled + .vector-dropdown-content + .mw-list-item + a:not(.mw-selflink):visited, + .uls-language-block a, + .lang-list-button, + .fancycaptcha-reload, + #pt-userpage-2 a:not(.mw-selflink), + .vector-pinnable-element .mw-list-item a, + .vector-pinnable-element .mw-list-item a:not(.mw-selflink):visited, + .vector-toc .vector-toc-link, + .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive + > .oo-ui-buttonElement-button, + .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive + > .oo-ui-buttonElement-button:hover, + .vector-dropdown-content .mw-list-item a, + .vector-dropdown-content .mw-list-item a:not(.mw-selflink):visited { + color: @accent; + } + + .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive, + .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive, + .mw-ui-button.mw-ui-progressive:not(:disabled), + .mw-ui-button.mw-ui-progressive:not(:disabled):hover { + background-color: @accent; + border-color: @accent; + color: @base; + } + + .mw-message-box-warning, + .boilerplate { + border-color: @accent !important; + background-color: fade(@accent, 25%) !important; + color: @text; + } + + .vector-feature-zebra-design-enabled .vector-sticky-pinned-container::after, + .vector-sticky-pinned-container::after { + background: none; + } + + .vector-feature-zebra-design-enabled .vector-pinnable-header-toggle-button { + background-color: @surface0; + color: @text; + &:hover { + background-color: @base; + } + } + + .vector-feature-zebra-design-enabled .vector-pinnable-header, + .vector-pinnable-header, + .vector-pinnable-element .vector-menu-heading { + border-bottom-color: @surface0; + } + + hr { + border-bottom-color: @base; + } + + .central-featured-lang strong:hover, + .link-box:hover, + .central-featured-lang :hover, + .other-project-link:hover, + .lang-list-container { + background-color: @surface0; + } + + .vector-page-toolbar-container { + box-shadow: 0 1px @surface1; + } + + .mw-parser-output .navbox-even { + background-color: @surface1; + } + + .vector-feature-zebra-design-enabled .vector-page-titlebar::after, + .mw-parser-output .wikipedia-languages-prettybars, + .vector-page-titlebar::after { + background-color: @surface2 !important; + } + + table.expanded:nth-child(2) > tbody:nth-child(1) > tr:nth-child(2) { + background-color: fade(@accent, 20%) !important; + } + + .client-js .mw-content-ltr .mw-editsection-bracket:first-of-type, + .client-js .mw-content-ltr .mw-editsection-bracket:not(:first-of-type), + .mw-collapsible-toggle-default::before, + .mw-collapsible-toggle-default::after { + color: @subtext1; + } + + .infobox, + .mw-parser-output .navbox, + .catlinks, + .mw-parser-output #mp-topbanner, + .mw-parser-output .sidebar, + .fancycaptcha-captcha-container, + .fancycaptcha-captcha-and-reload, + .cdx-checkbox__icon, + .mw-message-box, + .uls-menu .uls-no-results-view .uls-no-found-more, + .client-js + .vector-below-page-title + .vector-page-titlebar-toc + > label:nth-child(2), + .mw-parser-output .ombox, + code, + .oo-ui-buttonElement-framed.oo-ui-widget-enabled + > .oo-ui-buttonElement-button, + .mw-mmv-label, + #page-secondary-actions > a, + .mw-parser-output .ambox, + td[class="sidebar-navbar"], + textarea, + .mw-parser-output .side-box { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface2 !important; + } + + #pagehistory li.selected { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface2 !important; + outline-color: @surface2 !important; + } + + .cdx-checkbox__icon { + border-color: @accent !important; + } + + .fancycaptcha-captcha-container .mw-ui-inputو .mw-ui-input:not(:disabled) { + background-color: @base !important; + color: @text !important; + border-color: @surface1; + } + + .mw-ui-input:not(:disabled), + .mw-ui-button:not(:disabled) { + background-color: @base !important; + color: @text !important; + border-color: @surface1 !important; + } + + .mw-parser-output .module-shortcutboxplain { + background-color: @base !important; + color: @text !important; + border-color: @surface2; + } + + .sidebar-pretitle, + .sidebar-title-with-pretitle, + .sidebar-list-title { + background-color: fade(@accent, 20%) !important; + } + + .mw-parser-output #mp-bottom, + .mw-parser-output .sidebar-collapse .sidebar-below { + border-color: @surface2; + } + + .lang-list-content, + .bookshelf .text { + background-color: @surface0; + } + + .mw-parser-output #mp-bottom .mp-h2, + .uls-language-block > ul > li:hover { + background: @surface0; + border-color: @surface2; + } + + figure[typeof~="mw:File/Thumb"] { + background-color: @mantle !important; + color: @text !important; + border-top-color: @surface2; + border-left-color: @surface2; + border-right-color: @surface2; + > figcaption { + background-color: @mantle !important; + color: @text !important; + border-bottom-color: @surface2; + border-left-color: @surface2; + border-right-color: @surface2; + } + > :not(figcaption) .mw-file-element { + color: @surface2 !important; + border-color: @surface2; + } + } + + .mw-parser-output #mp-left, + .mw-parser-output #mp-left .mp-h2, + th[class="sidebar-title"] { + background-color: fade(@green, 10%) !important; + border-color: fade(@green, 20%) !important; + } + + .mw-plusminus-pos { + color: @green !important; + } + + .mw-parser-output #mp-right, + .mw-parser-output #mp-right .mp-h2 { + background-color: fade(@blue, 10%) !important; + border-color: fade(@blue, 20%) !important; + } + + .mw-parser-output #mp-lower, + .mw-parser-output #mp-lower .mp-h2 { + background-color: fade(@mauve, 10%) !important; + border-color: fade(@mauve, 20%) !important; + } + + .mw-collapsible-toggle-default:active .mw-collapsible-text { + color: @peach; + } + + .mw-parser-output #mp-middle, + .mw-parser-output #mp-middle .mp-h2 { + background-color: fade(@pink, 10%) !important; + border-color: fade(@pink, 20%) !important; + } + + .mw-parser-output .navbox-title, + .summary, + .infobox > tbody:nth-child(1) > tr:nth-child(4) > th:nth-child(1), + .infobox > tbody:nth-child(1) > tr:nth-child(6) > th:nth-child(1) { + background-color: fade(@accent, 20%) !important; + } + + .infobox > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1) { + background-color: @surface1 !important; + } + + .mw-parser-output .navbox-group, + table.expanded:nth-child(2) > tbody:nth-child(1) > tr:nth-child(3), + table.expanded:nth-child(2) + > tbody:nth-child(1) + > tr:nth-child(4) + > td:nth-child(2) + > table:nth-child(2) + > tbody:nth-child(1) + > tr:nth-child(1), + table.expanded:nth-child(2) > tbody:nth-child(1) > tr:nth-child(1), + table.nowraplinks:nth-child(1) + > tbody:nth-child(1) + > tr:nth-child(3) + > td:nth-child(1) + > table:nth-child(2) + > tbody:nth-child(1) + > tr:nth-child(1), + table.nowraplinks:nth-child(1) + > tbody:nth-child(1) + > tr:nth-child(4) + > td:nth-child(1) + > table:nth-child(2) + > tbody:nth-child(1) + > tr:nth-child(1), + table.nowraplinks:nth-child(1) + > tbody:nth-child(1) + > tr:nth-child(5) + > td:nth-child(1) + > table:nth-child(2) + > tbody:nth-child(1) + > tr:nth-child(1), + .navbox-abovebelow { + background-color: @surface1 !important; + } + + .mw-parser-output .tracklist > tbody { + color: inherit; + + > .tracklist-total-length * { + background-color: @overlay1; + color: @base; + } + } + + .mw-content-ltr + > table:nth-child(20) + > tbody:nth-child(1) + > tr:nth-child(2) + > td:nth-child(2) { + border-color: @surface2 !important; + background-color: @surface0 !important; + } + + .noarticletext, + #noarticletext { + background-color: @base !important; + } + + #sisterproject { + background-color: @mantle !important; + } + + [style="color:#02a64f;line-height:initial"] { + color: @green !important; + } + + [style="color:#f78e1e;line-height:initial"] { + color: @peach !important; + } + + [style="color:#77278b;line-height:initial"] { + color: @mauve !important; + } + + [style="color:#87746a;line-height:initial"] { + color: @maroon !important; + } + + [style="color:#009aC8;line-height:initial"] { + color: @sky !important; + } + + [style="color:#ffd520;line-height:initial"] { + color: @yellow !important; + } + + [style="color:#0060a9;line-height:initial"] { + color: @blue !important; + } + + table.nowraplinks:nth-child(4) > tbody:nth-child(1) > tr:nth-child(1), + .navbox-list-with-group.navbox-list.navbox-odd { + background-color: @surface0 !important; + } + + .mw-parser-output tr + tr > .navbox-abovebelow { + border-color: @base; + } + + .catlinks li { + border-left-color: @surface2; + } + + .vector-icon.mw-ui-icon-wikimedia-menu { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-ellipsis { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-appearance { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .vector-feature-zebra-design-enabled + .vector-dropdown + .vector-dropdown-label:not(.cdx-button--icon-only)::after, + .vector-icon.mw-ui-icon-wikimedia-expand { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .cdx-checkbox__input:checked:not(:indeterminate) + + .cdx-checkbox__icon::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .vector-page-titlebar + .mw-portlet-lang + .vector-dropdown-label.cdx-button--action-progressive.cdx-button--weight-quiet::after { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .vector-dropdown .vector-dropdown-label:not(.cdx-button--icon-only)::after { + @svg: escape( + '' + ); + background: url("data:image/svg+xml,@{svg}") !important; + } + + .vector-icon.mw-ui-icon-wikimedia-language-progressive { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .vector-icon.mw-ui-icon-wikimedia-language { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .mw-parser-output a.external { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .plainlinks a.external { + background: none !important; + } + + #mw-indicator-mw-helplink a { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .cdx-search-input .cdx-text-input__icon.cdx-text-input__start-icon { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .vector-icon.mw-ui-icon-wikimedia-listBullet { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + ul { + @svg: escape( + '' + ); + list-style-image: url("data:image/svg+xml,@{svg}"); + } + + .oo-ui-icon-volumeUp, + .mw-ui-icon-volumeUp::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-fullScreen { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .fancycaptcha-reload { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .popups-icon--settings { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-userAvatar { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-watchlist { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-tray { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-bell { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-user-menu-logged-in .vector-dropdown-label::after { + @svg: escape( + '' + ); + background: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-star { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-userTalk { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-sandbox { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-settings { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-unStar { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .oo-ui-image-progressive.oo-ui-icon-settings { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .oo-ui-icon-bell { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .oo-ui-icon-next { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .oo-ui-icon-settings { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .oo-ui-icon-expand { + @svg: escape( + ' expand ' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .oo-ui-icon-tray { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-labFlask { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .mw-ui-icon-vector-gadget-pt-darkmode { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .client-dark-mode .mw-ui-icon-vector-gadget-pt-darkmode { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-userContributions { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-logOut { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .uls-search-label, + .vector-icon.mw-ui-icon-wikimedia-search { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .mw-ui-icon-vector-gadget-pt-darkmode-sticky-header { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .cdx-message .cdx-message__icon { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-edit { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-history { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-speechBubbles { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .vector-icon.mw-ui-icon-wikimedia-editLock { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .branding-box > a:nth-child(1) > span:nth-child(1) > img:nth-child(1) { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .panel-heading, + .mw-pt-languages-list, + .mw-pt-languages-label { + color: @text; + background-color: @base; + } + .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle, + .oo-ui-inputWidget-input, + .mw-widget-dateInputWidget-handle, + .oo-ui-menuSelectWidget { + background-color: @mantle !important; + color: @text !important; + } + .oo-ui-menuOptionWidget:hover { + background-color: @surface1; + color: @text; + } + .cdx-search-input__end-button { + background-color: @crust !important; + } + .mw-pt-languages { + border-bottom-color: @surface0; + } + .mw-pt-progress--complete::after, + .mw-pt-progress--high::after { + border-color: @accent; + background: conic-gradient(@text 0, @accent 0); + } + pre, + .oo-ui-panelLayout-framed { + border-color: @surface0; + } + #vector-page-titlebar-toc-label { + background-color: @mantle; + color: @subtext0 !important; + border-color: @subtext0 !important; + } + tbody * { + background-color: @surface0 !important; + border-color: @surface2 !important; + } + + [style*="padding: 0.5em; margin: 0.50em 0; background-color: #C1E5FF; border: thin solid #1D99F3; overflow: hidden;"] { + background-color: @sapphire !important; + color: @mantle !important; + } + [style*="padding: 0.5em; margin: 0.50em 0; background-color: #F6F6F6; border: thin solid #31363B; overflow: hidden;"] { + background-color: @rosewater !important; + color: @mantle !important; + } + } +} diff --git a/styles/wikipedia/README.md b/styles/wikipedia/README.md new file mode 100644 index 0000000000..d8788b30e7 --- /dev/null +++ b/styles/wikipedia/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Wikipedia + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/wikipedia/catppuccin.user.less b/styles/wikipedia/catppuccin.user.less new file mode 100644 index 0000000000..9d57984f6a --- /dev/null +++ b/styles/wikipedia/catppuccin.user.less @@ -0,0 +1,796 @@ +/* ==UserStyle== +@name Wikipedia Catppuccin +@namespace github.com/catppuccin/userstyles/styles/wikipedia +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/wikipedia +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/wikipedia/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Awikipedia +@description Soothing pastel theme for Wikipedia +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +@var checkbox highlight-redirect "Highlight redirect links" 0 +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("wikipedia.org"), + domain("wiktionary.org"), + domain("www.mediawiki.org"), + domain("auth.wikimedia.org"), + domain("wikiversity.org"), + domain("wikisource.org"), + domain("meta.wikimedia.org"), + domain("wikidata.org"), + domain("wikibooks.org"), + domain("species.wikimedia.org"), + domain("commons.wikimedia.org"), + domain("wikivoyage.org"), + domain("wikinews.org"), + domain("wikiquote.org") { + @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); + + :root.skin-theme-clientpref-os, + .vector-feature-night-mode-enabled, + .skin-invert, + .notheme { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + :root.skin-theme-clientpref-night { + #catppuccin(@darkFlavor); + } + + :root.skin-theme-clientpref-day { + #catppuccin(@lightFlavor); + } + + html.skin-theme-clientpref-night, html.skin-theme-clientpref-os { + /* Logo */ + .skin-invert-image img, + .skin-invert, + .oo-ui-iconElement-icon:not( + .oo-ui-image-progressive, + .oo-ui-image-destructive, + .oo-ui-checkboxInputWidget-checkIcon, + .oo-ui-image-invert, + .mw-no-invert + ), + .oo-ui-indicatorElement-indicator { + filter: none; + } + } + + /* MediaWiki only applies the following overrides on dark and automatic appearance settings, leaving broken elements with the light appearance. */ + + .hatnote:not(.notheme), + .dablink:not(.notheme), + .rellink:not(.notheme), + .infobox:not(.notheme) { + color: var(--color-base) !important; + background-color: var(--background-color-interactive-subtle) !important; + } + .infobox td:not(.notheme), + .infobox th:not(.notheme), + .infobox-above:not(.notheme), + .infobox p:not(.notheme), + .infobox > div:not(.notheme), + .infobox caption:not(.notheme), + .infobox--frwiki td:not(.notheme), + .infobox--frwiki th:not(.notheme), + .infobox--frwiki p:not(.notheme), + .infobox--frwiki > div:not(.notheme), + .infobox--frwiki caption:not(.notheme), + .sinottico th:not(.notheme), + .infobox-header:not(.notheme), + .skin-nightmode-reset-color:not(.notheme), + .navigation-box:not(.notheme), + .metadata:not(.notheme), + .quotebox:not(.notheme), + .side-box:not(.notheme), + .side-box div:not(.notheme), + .navbox:not(.notheme), + .navbox-subgroup:not(.notheme), + .navbox-group:not(.notheme), + .navbox-even:not(.notheme), + .navbox-abovebelow:not(.notheme), + .navbox-title:not(.notheme) { + background: inherit !important; + color: inherit !important; + border-color: var(--border-color-subtle) !important; + } + .ns-100 .mw-parser-output :not(.notheme, a) { + background: inherit !important; + color: inherit !important; + border-color: var(--border-color-subtle) !important; + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --color-base: @text; + --color-base--hover: @text; + --color-emphasized: @text; + --color-subtle: @subtext0; + --color-inverted: @crust; + --color-inverted-fixed: @crust; + --color-progressive: @accent; + --color-progressive--hover: darken(@accent, 5%); + --color-progressive--active: darken(@accent, 5%); + --color-progressive--focus: darken(@accent, 5%); + --color-destructive: @red; + --color-destructive--hover: @maroon; + --color-destructive--active: @maroon; + --color-visited: @lavender; + --color-destructive--visited: #b97876; + --color-error: @red; + --color-warning: @yellow; + --color-success: @green; + --color-notice: @text; + --color-icon-error: @red; + --color-icon-warning: @yellow; + --color-icon-success: @green; + --color-icon-notice: @subtext0; + --color-content-added: @green; + --color-content-removed: @maroon; + --color-placeholder: @subtext0; + --color-disabled: @overlay2; + --box-shadow-color-base: #fff; + --box-shadow-color-inverted: #000; + --box-shadow-color-progressive--focus: @accent; + --background-color-interactive: @surface0; + --background-color-interactive-subtle: @surface0; + --background-color-interactive-subtle--hover: @surface1; + --background-color-disabled: @overlay2; + --background-color-disabled-subtle: @surface0; + --background-color-progressive: @accent; + --background-color-progressive-subtle: fade(@accent, 10%); + --background-color-destructive-subtle: #421211; + --background-color-progressive--active: fade(@accent, 70%); + --background-color-progressive--hover: fade(@accent, 70%); + --background-color-progressive--focus: fade(@accent, 70%); + --background-color-error: @red; + --background-color-error--hover: @maroon; + --background-color-error--active: @maroon; + --background-color-error-subtle: fade(@red, 20%); + --background-color-warning-subtle: fade(@yellow, 20%); + --background-color-success-subtle: fade(@green, 20%); + --background-color-notice-subtle: @surface0; + --background-color-content-added: #2a4b8d; + --background-color-content-removed: #a66200; + --background-color-backdrop-light: rgba(0, 0, 0, 0.65); + --background-color-backdrop-dark: rgba(255, 255, 255, 0.65); + --background-color-base: @base; + --background-color-neutral: @base; + --background-color-neutral-subtle: @surface0; + --background-color-inverted: @text; + --background-color-input-binary--checked: @accent; + --border-base: 1px solid @surface0; + --border-subtle: 1px solid @surface0; + --border-color-base: @surface0; + --border-color-interactive: @surface2; + --border-color-interactive--hover: @overlay0; + --border-color-disabled: #54595d; + --border-color-subtle: @surface1; + --border-color-muted: @surface0; + --border-color-inverted: #101418; + --border-color-error: @red; + --border-color-error--hover: @maroon; + --border-color-warning: @yellow; + --border-color-success: @green; + --border-color-notice: @surface2; + --border-color-content-added: @blue; + --border-color-content-removed: @peach; + --border-color-progressive: @accent; + --border-color-progressive--active: @accent; + --border-color-progressive--hover: @accent; + --border-color-progressive--focus: @accent; + + /* Wiktionary */ + --wikt-palette-indigo: @lavender; + --wikt-palette-lightindigo: fade(@lavender, 40%); + --wikt-palette-lighterblue: fade(@blue, 20%); + --wikt-palette-dulllightblue: fade(@blue, 40%); + --wikt-palette-grey: @subtext0; + --wikt-palette-lightergrey: fade(@subtext0, 40%); + + /* Other */ + + .infobox { + border-color: @surface2; + } + + [style="color:white;"], [style*="color:#ffffff"] { + color: @text !important; + } + .mw-collapsible-toggle-default { + &::before, &::after { + color: @subtext0; + } + } + + a { + &:focus { + outline-color: @accent; + } + } + + .mw-parser-output { + a.external { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + /* Wikipedia Home */ + #mp-topbanner { + background-color: @base; + border-color: @surface1; + } + #mp-left { + background-color: fade(@green, 20%); + border-color: @green; + + .mp-h2 { + background-color: fade(@green, 40%); + border-color: fade(@green, 40%); + } + } + #mp-right { + background-color: fade(@blue, 20%); + border-color: @blue; + + .mp-h2 { + background-color: fade(@blue, 40%); + border-color: fade(@blue, 40%); + } + } + #mp-lower { + background-color: fade(@lavender, 20%); + border-color: @lavender; + + .mp-h2 { + background-color: fade(@lavender, 40%); + border-color: fade(@lavender, 40%); + } + } + #mp-bottom { + border-color: @overlay0; + + .mp-h2 { + background-color: fade(@accent, 40%); + border-color: fade(@accent, 40%); + } + } + .wikipedia-languages-prettybars { + background-color: @surface2; + } + + /* MediaWiki Home */ + .mainpage_box { + border-color: @surface2; + + .header_icon { + filter: @text-filter; + } + + .items { + border-top-color: @surface1; + } + } + .nmbox { + background-color: @surface0; + border-color: @surface2; + + .nmbox-header { + background-color: @base; + border-color: @surface1; + } + } + /* MediaWiki Pages */ + .tpl-downloadmediawiki-icon { + filter: @crust-filter; + } + .note-info { + filter: @blue-filter; + color: @text; + background-color: fade(@blue, 20%); + } + .note-warn { + filter: @yellow-filter; + color: @text; + background-color: fade(@yellow, 20%); + } + } + + /* Math equations */ + .mwe-math-element img.skin-invert { + filter: @text-filter; + } + + /* OOUI */ + .oo-ui-indicator-down { + filter: @text-filter !important; + } + .oo-ui-image-invert.oo-ui-icon-check, .mw-ui-icon-check-invert::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + /* View source */ + textarea { + background-color: @mantle; + color: @text; + } + + /* View history */ + .flaggedrevs-color-1 { + background-color: fade(@blue, 10%); + } + + /* Language search and settings */ + .uls-search, + .uls-filtersuggestion, + .uls-lcd, + #uls-settings-block.uls-settings-block--vector-2022.uls-settings-block--with-add-languages, + #language-settings-dialog, + #languagesettings-settings-panel, + .uls-language-settings-close-block { + background-color: @mantle; + } + .uls-language-block a { + color: @accent; + } + .uls-search-label, + #uls-settings-block.uls-settings-block--vector-2022 + > button.uls-add-languages-button, + #uls-settings-block.uls-settings-block--vector-2022 + > button.uls-language-settings-button, + #uls-settings-block.uls-settings-block--vector-2022 + > button.uls-language-settings-button:hover, + .uls-icon-close, + .uls-languagefilter-clear { + filter: @text-filter; + } + .uls-sub-panel, .language-settings-buttons { + border-color: @surface1; + } + .uls-language-block > ul > li:hover { + background-color: @surface0; + } + .languagesettings-menu .menu-section.active { + background-color: @surface1; + } + + /* Page preview */ + .mwe-popups .mwe-popups-extract[dir="ltr"]::after { + background-image: linear-gradient(to right, transparent, @base 50%); + } + .mwe-popups .mwe-popups-extract[dir="rtl"]::after { + background-image: linear-gradient(to left, transparent, @base 50%); + } + + /* Icons */ + + img[alt="Edit this on Wikidata"], + img[alt="Edit this at Wikidata"] { + filter: @accent-filter; + } + + /* Logos */ + + .mw-logo-wordmark[alt="Wikipedia"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + + + .mw-logo-tagline { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + + .mw-logo-icon { + &[src$="wikidatawiki.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + &[src$="commonswiki.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + &[src$="wikivoyage.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + &[src$="wikiquote.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + &[src$="wikiversity.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + &[src$="mediawikiwiki.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + + .mw-logo-wordmark { + &[alt="Wikidata"], + &[alt="Wikimedia Commons"] { + filter: @text-filter; + } + &[alt="Wikivoyage"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + &[alt="Wikinews"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + &[alt="Wikiquote"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + &[alt="Wikiversity"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + &[alt="MediaWiki"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } + + .vector-page-titlebar + .mw-portlet-lang + .vector-dropdown-label.cdx-button--action-progressive.cdx-button--weight-quiet::after { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + filter: none; + } + + .vector-icon { + filter: none !important; + + &.mw-ui-icon-wikimedia-menu { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + &.mw-ui-icon-wikimedia-ellipsis { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + &.mw-ui-icon-wikimedia-appearance { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + &.mw-ui-icon-wikimedia-expand { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + &.mw-ui-icon-wikimedia-language-progressive { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + &.mw-ui-icon-wikimedia-language { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + &.mw-ui-icon-wikimedia-listBullet { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + &.mw-ui-icon-wikimedia-fullScreen { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + &.mw-ui-icon-wikimedia-userAvatar { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + &.mw-ui-icon-wikimedia-watchlist { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + &.mw-ui-icon-wikimedia-tray { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + &.mw-ui-icon-wikimedia-bell { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + &.mw-ui-icon-wikimedia-star { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + &.mw-ui-icon-wikimedia-userTalk { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + &.mw-ui-icon-wikimedia-sandbox { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + &.mw-ui-icon-wikimedia-settings { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + &.mw-ui-icon-wikimedia-unStar { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + &.mw-ui-icon-wikimedia-labFlask { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + &.mw-ui-icon-wikimedia-userContributions { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + &.mw-ui-icon-wikimedia-logOut { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + &.mw-ui-icon-wikimedia-search { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + &.mw-ui-icon-wikimedia-edit { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + &.mw-ui-icon-wikimedia-history { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + &.mw-ui-icon-wikimedia-speechBubbles { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + &.mw-ui-icon-wikimedia-editLock { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + } + } + + /* Root */ + :root:has(.central-featured) { + #catppuccin(@lightFlavor); + + &, body { + color: @text; + background-color: @base; + + .svg-Wikipedia_wordmark { + filter: @text-filter; + } + + .central-featured-lang small, + .other-project-tagline, + .site-license, + .footer-sidebar-text { + color: @subtext1; + } + + .central-featured-lang :hover { + background-color: @surface1; + } + + .other-project-link:hover { + background-color: @surface1; + } + + .search-container { + #searchInput { + color: @text; + background-color: @mantle; + border-color: @overlay2; + box-shadow: none; + + &:focus { + border-color: @accent; + } + } + + .js-langpicker-label { + color: @subtext0; + } + .styled-select:hover { + background-color: @surface1; + } + .sprite.svg-arrow-down { + filter: @text-filter; + } + + button[type="submit"] { + background-color: @accent; + border-color: @accent; + + .svg-search-icon { + filter: @crust-filter; + } + } + + .suggestions-dropdown { + background-color: @mantle; + border-color: @overlay2; + + .suggestion-link { + border-bottom-color: @overlay0; + + &.active { + background-color: fade(@accent, 10%); + } + + .suggestion-thumbnail { + @svg: escape( + '', + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .suggestion-title { + color: @text; + } + } + } + } + + hr { + border-bottom-color: @surface1; + } + + .lang-list-border { + background-color: @surface2; + } + .lang-list-button { + background-color: @mantle; + color: @accent; + outline-color: @mantle; + border-color: @surface2; + + .svg-language-icon, + .svg-arrow-down-blue { + filter: @accent-filter; + } + + &:focus { + box-shadow: inset 0 0 0 1px @accent; + } + } + .lang-list-container { + background-color: @surface0; + + .bookshelf { + border-top-color: @overlay1; + box-shadow: none; + + .text { + color: @text; + background-color: @surface2; + } + } + } + } + } +} diff --git a/styles/wikiwand/README.md b/styles/wikiwand/README.md index 5d91a7b21d..125f922606 100644 --- a/styles/wikiwand/README.md +++ b/styles/wikiwand/README.md @@ -4,44 +4,23 @@

Logo
- Catppuccin for WikiWand + Catppuccin for Wikiwand

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). +## 💝 Current Maintainer +- [Tnixc](https://github.com/Tnixc) -## 💝 Current Maintainer(s) -- [Tnixc](https://github.com/tnixc)   diff --git a/styles/wikiwand/assets/catwalk.webp b/styles/wikiwand/assets/catwalk.webp deleted file mode 100644 index f2e3f94875..0000000000 --- a/styles/wikiwand/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9db82b5e08a75dc83f4c1c7a64e383e281150f0f1dc3925678e7b9aefd889a24 -size 1079808 diff --git a/styles/wikiwand/assets/frappe.webp b/styles/wikiwand/assets/frappe.webp deleted file mode 100644 index 0b2530e8c9..0000000000 --- a/styles/wikiwand/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:33732bc8a0667e85792e27e88f8058e246217a82716fc06b4a701947ed4876c6 -size 165586 diff --git a/styles/wikiwand/assets/latte.webp b/styles/wikiwand/assets/latte.webp deleted file mode 100644 index be318f82cf..0000000000 --- a/styles/wikiwand/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:79a2496662ef5e2f5efec8feb37df385472f4fbc21f9d1784cb6d2b3212a9c57 -size 162446 diff --git a/styles/wikiwand/assets/macchiato.webp b/styles/wikiwand/assets/macchiato.webp deleted file mode 100644 index 222aa1554d..0000000000 --- a/styles/wikiwand/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b4a196f0b6bdb4d97d04dfcd61d73addcf0e580c5e97cef64a8c3178028548d6 -size 168540 diff --git a/styles/wikiwand/assets/mocha.webp b/styles/wikiwand/assets/mocha.webp deleted file mode 100644 index 11db39f284..0000000000 --- a/styles/wikiwand/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b7bdb06afeda1fd47deef6f4b9b3ff4ab470e24eb152f0abe598eb1bcf0bac7e -size 171238 diff --git a/styles/wikiwand/catppuccin.user.css b/styles/wikiwand/catppuccin.user.css deleted file mode 100644 index 4d5fbfd4f1..0000000000 --- a/styles/wikiwand/catppuccin.user.css +++ /dev/null @@ -1,482 +0,0 @@ -/* ==UserStyle== -@name Wikiwand Catppuccin -@namespace github.com/catppuccin/userstyles/styles/wikiwand -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/wikiwand -@version 1.2.0 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/wikiwand/catppuccin.user.css -@description Soothing pastel theme for Wikiwand -@author Catppuccin -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] -==/UserStyle== */ -@-moz-document domain("wikiwand.com") { - .root_light__Inhun { - #catppuccin(@lightFlavor, @accentColor); - } - - .root_earth__3sDLo, - .root_dark__oGh5X, - .root_auto__Xg3qF, - .root_grey__eKz_h { - #catppuccin(@darkFlavor, @accentColor); - } - - @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; - }; - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-Color: @catppuccin[@@lookup][@@accent]; - - & { - --color-bg: @base; - --color-text: @text; - --color-grey: @subtext0; - --color-table: @surface0; - --color-table-border: @surface0; - --color-link: @accent-Color; - --toc-bg: @mantle; - --toc-text: @text; - --toc-border: @crust; - --tag-bg: @surface0; - --tag-text: @overlay1; - --navbar-bg: @crust; - --navbar-border: @mantle; - --navbar-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), - 0px 5px 10px rgba(0, 0, 0, 0.3); - } - .popover_arrow__pQSsX::before { - background-color: @surface1; - border: 1px solid @surface2; - } - *[class*="dropdown_item"] { - color: @text; - } - .popover_popover__jgyGp { - background-color: @surface1; - border: 1px solid @surface2; - border-radius: 0.625em; - box-shadow: - 0 0 2px rgba(0, 0, 0, 0.1), - 0 5px 10px rgba(0, 0, 0, 0.1); - } - .draggable_wrapper__YB014 { - background-color: @surface1; - border: 1px solid @surface0; - box-shadow: - 0 0 2px rgba(0, 0, 0, 0.2), - 0 10px 20px rgba(0, 0, 0, 0.3); - color: @text; - } - .checkbox_checkbox__uXwIZ { - width: 1.125em; - height: 1.125em; - border-radius: 0.125em; - border: 1px solid @surface1; - background-color: @surface2; - position: relative; - } - .checkbox_checkbox__uXwIZ::before { - background-color: @accent-Color; - } - svg.audio_icon__eZ5Bx { - color: @text; - } - .checkbox_label__V5gon, - .audio_select__kmOPL { - color: @subtext0 !important; - } - .draggable_header__bfxdq { - border: 1px solid @surface1 !important; - } - .footer_donation__Cje_Q { - display: none !important; - } - .dropdown_content__4NAxl { - background-color: @surface1; - border: 1px solid @surface2; - } - p.settings_setLabel__NrVBx:nth-child(3), - article.settings_section__vRaq_:nth-child(1) { - color: @text; - } - .toggle_label__y7mDQ { - color: @text; - } - .toggle_bg__Qn4Oc { - background-color: @accent-Color; - } - .toggle_label__y7mDQ.toggle_active__l_k3F { - color: @base; - } - .toggle_label__y7mDQ:not(.toggle_active__l_k3F):hover { - color: @accent-Color; - } - .themeBtn_wrapper__KTkHk.themeBtn_active__4gb_I, - .themeBtn_wrapper__KTkHk:hover { - color: @accent-Color; - } - .themeBtn_label__GyvdH { - color: @subtext1; - } - .toggle_toggle__jzkKG { - background-color: @surface2; - } - .settings_reset__GO2x4 { - border-top: 1px solid @surface2; - } - .settings_resetBtn__3yLrG { - color: @text; - } - .settings_resetBtn__3yLrG:not(.settings_disabled__7X7Nu):hover { - color: @red; - } - .themeBtn_label__GyvdH span { - background-color: @surface2; - border: 1px solid @surface2; - } - .themeBtn_wrapper__KTkHk.themeBtn_active__4gb_I - .themeBtn_demoWrapper__fdi7G { - border: 1px solid @accent-Color !important; - } - div.themeBtn_wrapper__KTkHk:nth-child(3) - > p:nth-child(2) - > span:nth-child(1)::before { - background-color: @accent-Color; - } - .item_item__uLhiz.item_active__4kaIV { - color: @accent-Color; - } - .item_item__uLhiz.item_active__4kaIV, - .item_item__uLhiz:hover { - background-color: @surface2; - } - .languages_wrapper__1Ad3R { - color: @subtext1; - } - .input_input__uGeT_ { - color: @text; - background-color: @overlay0; - border-radius: 4px; - } - .input_wrapper__aeypb { - border: none !important; - } - .action_action___vLQg { - color: @accent-Color; - } - .share_btn__9IJpe { - color: @text; - background-color: @surface2; - border: @surface2; - } - .share_btn__9IJpe span { - color: @text; - } - .footer_socialWrapper__R1iSQ *:hover, - .footer_link__TA4rr:hover { - color: @accent-Color; - } - .list_wrapper__TYM2l, - .input_wrapper__aeypb { - background-color: @surface1; - color: @text; - } - .input_wrapper__aeypb * { - color: @text; - } - .list_item_VVizU:hover { - background-color: @surface2 !important; - } - .search_header__gqnk7.search_article__L3Khv { - background: transparent; - } - .item_item__jj0Ue { - color: @text; - } - .item_item__jj0Ue:hover { - background-color: @surface2 !important; - border-color: @accent-Color; - } - .modal_header__t094_ { - border-color: @surface1; - color: @text; - } - .list_item__VVizU.list_active__ahAYX, - .list_item__VVizU:hover { - background-color: @surface2; - } - .button_btn__ln0Hv { - color: @accent-Color; - background-color: @surface0; - } - - .navbarMobile_footer__y5Kwi.navbarMobile_dark__eIcxf - .navbarMobile_icons__tirr9, - .navbarMobile_footer__y5Kwi.navbarMobile_dark__eIcxf - .navbarMobile_toc__iPfvP, - .navbarMobile_footer__y5Kwi.navbarMobile_grey__5dmnP - .navbarMobile_icons__tirr9, - .navbarMobile_footer__y5Kwi.navbarMobile_grey__5dmnP - .navbarMobile_toc__iPfvP { - background-color: @surface1; - color: @text; - } - .tooltip_tooltip_QQr79.tooltip_dark_ZWBHd, - .tooltip_tooltip_QQr79.tooltip_dark_ZWBHd > * > * { - background-color: @crust !important; - } - .dropdown_item__yrn67:hover { - background-color: @surface2; - color: @accent-Color; - border-color: @accent-Color !important; - } - .audio_dot__jeWOr.audio_active__li6PM { - background-color: @accent-Color; - } - .audio_dot__jeWOr { - background-color: @surface2; - box-shadow: 6.666px 0 0 0px @surface2; - border-radius: 0px; - border: 1px solid @surface2 !important; - } - .gallery_icon__7LOBi { - background-color: @surface2; - color: @subtext1; - } - .gallery_disable__1QuKw { - background-color: @surface0; - } - .gallery_icon__7LOBi:hover { - background-color: @overlay0; - color: @accent-Color; - } - .gallery_nav__BEeM3 { - background-color: @base; - } - .image_wrapper__Dq3Jq { - background-color: @crust; - } - .stage_caption__BvSjQ { - color: @subtext0; - } - .gallery_wrapper__1a7bM, - .thumbnails_wrapper__1Q5be { - background-color: @mantle !important; - } - .thumbnails_thumbnail__H4tNf { - background-color: #fafafa; - border-radius: 4px; - padding: 4px; - } - - .list_loading__j43_R { - color: @accent-Color; - } - .info_wrapper__HpdJH, - .info_arrow__ehjUI { - background-color: @surface1; - border-color: @surface1; - } - - .info_wrapper__HpdJH::after { - background: linear-gradient(180deg, hsla(0, 0%, 98%, 0), @surface1 90%); - } - .list_item__VVizU.list_active__ahAYX { - color: @accent-Color; - } - .item_star__arENF { - color: @subtext1; - } - .item_star__arENF.item_active__4kaIV { - color: @yellow; - } - .action_action___vLQg.action_remove__z6g_k { - color: @text; - } - .action_action___vLQg:not(.action_limit__u0EDs):hover.action_remove__z6g_k { - color: @accent-Color; - } - .item_remove__f1A5k { - background-color: @surface1; - } - .item_remove__f1A5k span, - .item_remove__f1A5k svg { - color: @red; - } - caption { - background-color: @surface0 !important; - border-color: @surface0 !important; - } - .summary_wordtuneWrapper__21QxG > img:nth-child(2) { - background-color: @accent-Color; - } - code > a { - color: @accent-Color !important; - } - table * { - background-color: @surface0 !important; - color: @text !important; - border-color: @surface2 !important; - } - table { - background-color: @surface0 !important; - border: none !important; - } - a.wl { - color: @accent-Color !important; - } - .summary_footer__Lk6z7 > span:nth-child(1), - svg.icon_icon__0vohI, - .icon_icon__0vohI.input_icon__He3sV, - svg.icon_icon__0vohI:nth-child(2) > use:nth-child(1) { - color: @accent-Color; - fill: @accent-Color; - } - .wikitable tr::before { - background-color: @surface0 !important; - border-color: @surface2 !important; - } - } -} diff --git a/styles/wikiwand/catppuccin.user.less b/styles/wikiwand/catppuccin.user.less new file mode 100644 index 0000000000..e911e8fe47 --- /dev/null +++ b/styles/wikiwand/catppuccin.user.less @@ -0,0 +1,88 @@ +/* ==UserStyle== +@name Wikiwand Catppuccin +@namespace github.com/catppuccin/userstyles/styles/wikiwand +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/wikiwand +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/wikiwand/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Awikiwand +@description Soothing pastel theme for Wikiwand +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("wikiwand.com") { + @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css"); + + .theme-system { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + .theme-light, + .theme-desert, + .theme-calmness { + #catppuccin(@lightFlavor); + } + .theme-dark, + .theme-black, + .theme-deepOcean, + .theme-nature { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + #lib.css-variables(); + + --color-bg: @base !important; + --color-text: @text !important; + --color-grey: @subtext1 !important; + --color-accent: @accent !important; + --color-highlight: @surface2 !important; + --color-ash: @surface2 !important; + --color-border: @surface2 !important; + --color-blue-bg: @surface1 !important; + --color-blue-text: @blue !important; + --color-purple-bg: @surface1 !important; + --color-purple-text: @mauve !important; + --color-green-bg: @surface1 !important; + --color-green-text: @green !important; + --color-orange-bg: @surface1 !important; + --color-orange-text: @peach !important; + --color-table: @surface0 !important; + --color-link: @accent !important; + --color-score-A: @green !important; + --color-score-B: @mauve !important; + --color-score-C: @peach !important; + --color-score-F: @red !important; + --color-score-NA: var(--color-grey) !important; + --grad: linear-gradient(-45deg, @peach, @blue, @pink, @yellow) !important; + --box-shadow: 0px 1px 4px 1px @crust !important; + --box-shadow-dark: + 0px 0px 1px 1px @crust, 0px 1px 5px 2px @crust !important; + --box-shadow-strong: 0px 1px 5px 2px @crust !important; + --backdrop-bg: @base !important; + --backdrop-bg-ash: fade(@surface1, 50%) !important; + + .mw-no-invert * { + color: @crust !important; + } + + .notheme * { + --color-text: auto; + --color-link: auto; + } + } +} diff --git a/styles/youtube/README.md b/styles/youtube/README.md index 763a86a863..1850891aaa 100644 --- a/styles/youtube/README.md +++ b/styles/youtube/README.md @@ -10,46 +10,20 @@

- +

-

- -

- -## Previews - -
-🌻 Latte - -
-
-🪴 Frappé - -
-
-🌺 Macchiato - -
-
-🌿 Mocha - -
- -## Usage -> **Note**
-> Make sure your base YouTube theme is set to **light** mode! +## Usage +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). -## 🙋 FAQ -- Q: **What does the 'Enable for black bars' option mean?** - A: It is there in-case you have an OLED display. If you have one, you might want to enable this. -## 💝 Current Maintainer(s) -- [Isabel](https://github.com/isabelroses) +## 💝 Current Maintainers +- [isabelroses](https://github.com/isabelroses) +- [uncenter](https://github.com/uncenter) -## 💖 Past Maintainer(s) -- [Elkrien](https://github.com/elkrien) +## 💖 Past Maintainer +- [elkrien](https://github.com/elkrien)   diff --git a/styles/youtube/assets/catwalk.webp b/styles/youtube/assets/catwalk.webp deleted file mode 100644 index 98091dbe53..0000000000 --- a/styles/youtube/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:1e9d8e64822efa59ced67d7a3174a86777deb1705cfe9a5caff483d640b7d715 -size 1115368 diff --git a/styles/youtube/assets/frappe.webp b/styles/youtube/assets/frappe.webp deleted file mode 100644 index e6dfbaf38b..0000000000 --- a/styles/youtube/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0c62e4ff16698ed07748952d75563c29e4e25c4cbd3730d428b11183cd457e07 -size 177294 diff --git a/styles/youtube/assets/latte.webp b/styles/youtube/assets/latte.webp deleted file mode 100644 index 44f17e4bd4..0000000000 --- a/styles/youtube/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:db5904f858bd27f2ba7aa617d6f4abcb8e200255f8a26d160f7c75747be2a132 -size 177436 diff --git a/styles/youtube/assets/macchiato.webp b/styles/youtube/assets/macchiato.webp deleted file mode 100644 index 0f3ca864e0..0000000000 --- a/styles/youtube/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6d87365a675226ce401abf0de495a6ceab326fb9951e25142edea42b19af1298 -size 172352 diff --git a/styles/youtube/assets/mocha.webp b/styles/youtube/assets/mocha.webp deleted file mode 100644 index f495df92c8..0000000000 --- a/styles/youtube/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:dec4f53cc1cb83fa0b02f2b2c0d1f316eb26ed6bfc468430e5501b609860d7b8 -size 180822 diff --git a/styles/youtube/catppuccin.user.css b/styles/youtube/catppuccin.user.css deleted file mode 100644 index 6eca54d876..0000000000 --- a/styles/youtube/catppuccin.user.css +++ /dev/null @@ -1,1234 +0,0 @@ -/* ==UserStyle== -@name YouTube Catppuccin -@namespace github.com/catppuccin/userstyles/styles/youtube -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/youtube -@version 3.0.9 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/youtube/catppuccin.user.css -@description Soothing pastel theme for YouTube -@author Catppuccin -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] -@var checkbox logo "Logo" 0 -@var checkbox oledOn "Enable black bars" 0 -==/UserStyle== */ -@-moz-document regexp('https?:\\/\\/(?!gaming\\.)(?!consent\\.)(?!vr\\.)(?!music\\.)(?!tv\\.)(?!artists\\.)(?!studio\\.).*youtube(?!kids\\.).*\\.com\\/(?!premium|howyoutubeworks).*$') { - /* youtube.com */ - :root[dark] { - #catppuccin(@darkFlavor, @accentColor); - #oled(@oledOn); - #logo(@logo); - } - :root { - #catppuccin(@lightFlavor, @accentColor); - #oled(@oledOn); - #logo(@logo); - } - - /* for oled monitors */ - #oled(@oled) when (@oled =0) { - #ytd-player #container { - background: @base !important; - } - } - - #logo(@logo) { - ytd-topbar-logo-renderer.style-scope a svg > g, - svg.ytd-consent-bump-v2-lightbox > g:nth-child(1) { - path[fill="#FF0000"] { - fill: @accent-Color !important; - } - path[fill="white"] { - fill: @base !important; - } - } - & when (@logo =1) { - ytd-topbar-logo-renderer, - svg.ytd-consent-bump-v2-lightbox { - display: none; - } - } - } - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-Color: @catppuccin[@@lookup][@@accent]; - - /* apply everywhere */ - &, - [dark], - html, - html[system-icons][dark], - html[system-icons] [dark], - html[darker-dark-theme][dark], - [darker-dark-theme] [dark] { - --yt-spec-white-1: @text !important; - --yt-spec-white-2: @subtext0 !important; - --yt-spec-white-3: @subtext1 !important; - --yt-spec-white-4: darken(@subtext1, 5%) !important; - --yt-spec-black-1: @overlay1 !important; - --yt-spec-black-2: @overlay0 !important; - --yt-spec-black-3: @surface2 !important; - --yt-spec-black-4: @surface1 !important; - --yt-spec-black-pure: @surface0 !important; - --yt-spec-grey-1: @text !important; - --yt-spec-grey-2: @subtext0 !important; - --yt-spec-grey-3: @subtext1 !important; - --yt-spec-grey-4: @overlay2 !important; - --yt-spec-grey-5: @overlay1 !important; - --yt-brand-youtube-red: @accent-Color !important; - --yt-brand-medium-red: @accent-Color !important; - --yt-brand-light-red: @accent-Color !important; - --yt-spec-red-30: @peach !important; - --yt-spec-red-70: @red !important; - --yt-spec-pale-blue: @sky !important; - --yt-spec-light-blue: @sky !important; - --yt-spec-dark-blue: @sapphire !important; - --yt-spec-navy-blue: @teal !important; - --yt-spec-light-green: @green !important; - --yt-spec-dark-green: @green !important; - --yt-spec-yellow: @peach !important; - --yt-spec-black-pure-alpha-5: fadeout(@crust, 0.05) !important; - --yt-spec-black-pure-alpha-10: fadeout(@crust, 0.1) !important; - --yt-spec-black-pure-alpha-15: fadeout(@crust, 0.15) !important; - --yt-spec-black-pure-alpha-30: fadeout(@crust, 0.3) !important; - --yt-spec-black-pure-alpha-60: fadeout(@crust, 0.6) !important; - --yt-spec-black-pure-alpha-80: fadeout(@crust, 0.8) !important; - --yt-spec-black-1-alpha-98: fadeout(@crust, 0.98) !important; - --yt-spec-black-1-alpha-95: fadeout(@crust, 0.95) !important; - --yt-spec-white-1-alpha-10: fadeout(@text, 0.1) !important; - --yt-spec-white-1-alpha-20: fadeout(@text, 0.2) !important; - --yt-spec-white-1-alpha-25: fadeout(@text, 0.25) !important; - --yt-spec-white-1-alpha-30: fadeout(@text, 0.3) !important; - --yt-spec-white-1-alpha-70: fadeout(@text, 0.7) !important; - --yt-spec-white-1-alpha-95: fadeout(@text, 0.95) !important; - --yt-spec-white-1-alpha-98: fadeout(@text, 0.98) !important; - --yt-brand-medium-red-alpha-90: fadeout(@accent-Color, 0.9) !important; - --yt-brand-medium-red-alpha-30: fadeout(@accent-Color, 0.3) !important; - --yt-brand-light-red-alpha-30: fadeout(@accent-Color, 0.3) !important; - --yt-spec-light-blue-alpha-30: fadeout(@sapphire, 0.3) !important; - --yt-spec-dark-blue-alpha-30: fadeout(@sapphire, 0.3) !important; - - --yt-spec-base-background: @base !important; - --yt-spec-raised-background: @mantle !important; - --yt-spec-menu-background: @mantle !important; - --yt-spec-inverted-background: @text !important; - --yt-spec-additive-background: fadeout(@surface0, 0.1) !important; - --yt-spec-outline: @surface0 !important; - --yt-spec-shadow: fadeout(@crust, 0.25) !important; - --yt-spec-text-primary: @text !important; - --yt-spec-text-secondary: @subtext0 !important; - --yt-spec-text-disabled: @subtext1 !important; - --yt-spec-text-primary-inverse: @crust !important; - --yt-spec-call-to-action: @accent-Color !important; - --yt-spec-call-to-action-inverse: @accent-Color !important; - --yt-spec-suggested-action: @surface1 !important; - --yt-spec-suggested-action-inverse: @text !important; - --yt-spec-icon-active-other: @overlay0 !important; - --yt-spec-icon-inactive: @overlay1 !important; - --yt-spec-icon-disabled: @overlay2 !important; - --yt-spec-button-chip-background-hover: @surface1 !important; - --yt-spec-touch-response: @surface0 !important; - - --yt-spec-touch-response-inverse: @accent-Color !important; - --yt-spec-brand-icon-active: @accent-Color !important; - --yt-spec-brand-icon-inactive: @overlay1 !important; - --yt-spec-brand-button-background: @accent-Color !important; - --yt-spec-brand-link-text: @sapphire !important; - --yt-spec-wordmark-text: @text !important; - --yt-spec-error-indicator: @red !important; - --yt-spec-themed-blue: @sky !important; - --yt-spec-themed-green: @green !important; - --yt-spec-ad-indicator: @teal !important; - --yt-spec-themed-overlay-background: fadeout(@crust, 0.8) !important; - --yt-spec-commerce-badge-background: @green !important; - --yt-spec-static-brand-red: @accent-Color !important; - --yt-spec-static-brand-white: @text !important; - --yt-spec-static-brand-black: @base !important; - --yt-spec-static-clear-color: fadeout(@crust, 0) !important; - --yt-spec-static-clear-black: fadeout(@crust, 0) !important; - --yt-spec-static-ad-yellow: @peach !important; - --yt-spec-static-grey: @subtext0 !important; - --yt-spec-static-overlay-background-solid: @crust !important; - --yt-spec-static-overlay-background-heavy: @surface0 !important; - --yt-spec-static-overlay-background-medium: fadeout( - @crust, - 0.6 - ) !important; - --yt-spec-static-overlay-background-medium-light: fadeout( - @crust, - 0.3 - ) !important; - --yt-spec-static-overlay-background-light: fadeout( - @crust, - 0.1 - ) !important; - --yt-spec-static-overlay-text-primary: @text !important; - --yt-spec-static-overlay-text-secondary: fadeout( - @subtext0, - 0.7 - ) !important; - --yt-spec-static-overlay-text-disabled: fadeout( - @subtext0, - 0.3 - ) !important; - --yt-spec-static-overlay-call-to-action: @accent-Color !important; - --yt-spec-static-overlay-icon-active-other: @text !important; - --yt-spec-static-overlay-icon-inactive: @surface1 !important; - --yt-spec-static-overlay-icon-disabled: @surface2 !important; - --yt-spec-static-overlay-button-primary: @accent-Color !important; - --yt-spec-static-overlay-button-secondary: @surface0 !important; - --yt-spec-static-overlay-touch-response: @overlay1 !important; - --yt-spec-static-overlay-touch-response-inverse: @surface1 !important; - --yt-spec-static-overlay-background-brand: @accent-Color !important; - --yt-spec-assistive-feed-themed-gradient-1: @subtext0 !important; - --yt-spec-assistive-feed-themed-gradient-2: @lavender !important; - --yt-spec-assistive-feed-themed-gradient-3: @red !important; - --yt-spec-brand-background-solid: @base !important; - --yt-spec-brand-background-primary: @surface0 !important; - --yt-spec-brand-background-secondary: @mantle !important; - --yt-spec-general-background-a: @base !important; - --yt-spec-general-background-b: @mantle !important; - --yt-spec-general-background-c: @crust !important; - --yt-spec-error-background: @base !important; - --yt-spec-10-percent-layer: @surface0 !important; - --yt-spec-snackbar-background: @mantle !important; - --yt-spec-snackbar-background-updated: @mantle !important; - --yt-spec-badge-chip-background: @surface0 !important; - --yt-spec-verified-badge-background: @overlay0 !important; - --yt-spec-call-to-action-fadeoutd: fadeout(@sapphire, 0.3) !important; - --yt-spec-call-to-action-hover: @accent-Color !importantr; - --yt-spec-brand-button-background-hover: @accent-Color !important; - --yt-spec-brand-link-text-fadeoutd: fadeout( - @accent-Color, - 0.3 - ) !important; - --yt-spec-filled-button-focus-outline: @surface0 !important; - --yt-spec-static-overlay-button-hover: @surface1 !important; - --yt-spec-mono-filled-hover: @surface1 !important; - --yt-spec-commerce-filled-hover: @accent-Color !important; - --yt-spec-mono-tonal-hover: @surface1 !important; - --yt-spec-commerce-tonal-hover: @surface2 !important; - --yt-spec-static-overlay-filled-hover: @overlay1 !important; - --yt-spec-static-overlay-tonal-hover: @surface1 !important; - --yt-spec-paper-tab-ink: fadeout(@text, 0.3); - --yt-spec-filled-button-text: @text !important; - --yt-spec-selected-nav-text: @text !important; - --iron-icon-fill-color: @text !important; - - /* Search bar */ - --ytd-searchbox-border-color: @surface0 !important; - --ytd-searchbox-legacy-border-color: @surface0 !important; - --ytd-searchbox-legacy-border-shadow-color: fadeout(@crust, 0) !important; - --ytd-searchbox-legacy-button-color: @mantle !important; - --ytd-searchbox-legacy-button-border-color: @surface0 !important; - --ytd-searchbox-legacy-button-focus-color: @accent-Color !important; - --ytd-searchbox-legacy-button-hover-color: @mantle !important; - --ytd-searchbox-legacy-button-hover-border-color: @surface0 !important; - --ytd-searchbox-legacy-button-icon-color: @accent-Color !important; - --ytd-searchbox-background: @base !important; - --ytd-searchbox-text-color: @text !important; - - /* System icons */ - --yt-spec-icon-inactive: @overlay0 !important; - --yt-spec-icon-disabled: @overlay1 !important; - --yt-spec-brand-icon-inactive: @overlay2 !important; - - /* Yt video Page */ - --yt-live-chat-background-color: @base !important; - --yt-live-chat-action-panel-background-color: @base !important; - --yt-live-chat-action-panel-background-color-transparent: @base !important; - --yt-live-chat-secondary-background-color: @surface1; - --yt-live-chat-banner-gradient-scrim: linear-gradient( - @mantle, - transparent - ) !important; - --yt-live-chat-toast-background-color: @surface2 !important; - --yt-live-chat-mode-change-background-color: @base !important; - --yt-live-chat-secondary-text-color: @subtext0 !important; - --yt-live-chat-tertiary-text-color: fadeout(@text, 0.54) !important; - --yt-live-chat-text-input-field-inactive-underline-color: @subtext0 !important; - --yt-live-chat-text-input-field-placeholder-color: @subtext0 !important; - --yt-live-chat-enabled-send-button-color: @text !important; - --yt-live-chat-disabled-icon-button-color: @subtext1 !important; - --yt-live-chat-picker-button-hover-color: @accent-Color !important; - --yt-live-chat-mention-background-color: @accent-Color !important; - --yt-live-chat-mention-text-color: @text !important; - --yt-live-chat-deleted-message-color: @subtext0; - --yt-live-chat-deleted-message-bar-color: @subtext1 !important; - --yt-live-chat-reconnect-message-color: @text !important; - --yt-live-chat-disabled-button-background-color: @overlay0 !important; - --yt-live-chat-sub-panel-background-color: @base !important; - --yt-live-chat-sub-panel-background-color-transparent: @mantle !important; - --yt-live-chat-moderator-color: @lavender !important; - --yt-live-chat-owner-color: @peach !important; - --yt-live-chat-message-highlight-background-color: @base !important; - --yt-live-chat-sponsor-color: @green !important; - --yt-live-chat-overlay-color: fadeout(@mantle, 0.5); - --yt-live-chat-dialog-background-color: @base !important; - --yt-emoji-picker-variant-selector-bg-color: @base !important; - --yt-live-chat-moderation-mode-hover-background-color: fadeout( - @mantle, - 0.3 - ) !important; - --yt-grey: @subtext0 !important; - --yt-live-chat-text-input-field-suggestion-background-color: @subtext0 !important; - --yt-live-chat-text-input-field-suggestion-background-color-hover: @subtext1 !important; - --yt-emoji-picker-search-background-color: @surface0 !important; - --yt-emoji-picker-search-color: @text !important; - --yt-emoji-picker-search-placeholder-color: @accent-Color !important; - --yt-live-chat-slider-active-color: @accent-Color !important; - --yt-live-chat-slider-container-color: @surface0 !important; - --yt-live-chat-slider-markers-color: @text !important; - --yt-live-chat-banner-gradient-scrim: linear-gradient( - @mantle, - transparent - ) !important; - --yt-live-chat-action-panel-gradient-scrim: linear-gradient( - to top, - @mantle, - transparent - ) !important; - --yt-live-chat-automod-button-background-color-hover: fadeout( - @crust, - 0.5 - ) !important; - --yt-live-chat-automod-button-explanation-color: fadeout( - @accent-Color, - 0.7 - ) !important; - --yt-live-chat-shimmer-background-color: fadeout(@crust, 0.4) !important; - --yt-live-chat-shimmer-linear-gradient: linear-gradient( - 0deg, - fadeout(@text, 0.1) 40%, - fadeout(@base, 0.3) 50%, - fadeout(@text, 0.1) 60% - ) !important; - --yt-live-chat-vem-background-color: @mantle !important; - --yt-live-chat-product-picker-icon-color: fadeout(@text, 0.5) !important; - --yt-live-chat-product-picker-hover-color: @overlay0 !important; - --yt-live-chat-product-picker-disabled-icon-color: fadeout( - @text, - 0.3 - ) !important; - --yt-live-chat-action-panel-background-color-transparent: ( - null - ) !important; - - /* Tooltip */ - --paper-tooltip-background: @overlay0 !important; - --paper-tooltip-text-color: @text !important; - - /* links */ - --yt-endpoint-color: @accent-Color !important; - --yt-endpoint-visited-color: @accent-Color !important; - --yt-endpoint-hover-color: @accent-Color !important; - - --sb-dark-red-outline: @accent-Color !important; - --sb-main-bg-color: @base !important; - --sb-main-fg-color: @text !important; - --sb-grey-bg-color: @base !important; - --sb-grey-fg-color: @subtext0 !important; - --sb-red-bg-color: @accent-Color !important; - } - - /* general colors */ - &:not(.style-scope) { - --primary-text-color: @text !important; - --primary-background-color: @base !important; - --secondary-text-color: @subtext0 !important; - --disabled-text-color: @subtext1 !important; - --divider-color: @overlay0 !important; - --error-color: @red !important; - --primary-color: @accent-Color !important; - --light-primary-color: @accent-Color !important; - --dark-primary-color: @blue !important; - --accent-color: @accent-Color !important; - --light-accent-color: @accent-Color !important; - --dark-accent-color: @accent-Color !important; - --light-theme-background-color: @base !important; - --light-theme-base-color: @text !important; - --light-theme-text-color: @text !important; - --light-theme-secondary-color: @subtext0 !important; - --light-theme-disabled-color: @subtext1 !important; - --light-theme-divider-color: @overlay0 !important; - --dark-theme-background-color: @base !important; - --dark-theme-base-color: @text !important; - --dark-theme-text-color: @text !important; - --dark-theme-secondary-color: @subtext0 !important; - --dark-theme-disabled-color: @subtext1 !important; - --dark-theme-divider-color: @overlay0 !important; - } - - #channel-name.ytd-video-meta-block { - --yt-endpoint-color: @accent-Color !important; - --yt-endpoint-visited-color: @accent-Color !important; - color: @accent-Color !important; - } - - /* selected chapter */ - ytd-macro-markers-list-item-renderer { - --ytd-macro-markers-list-item-background-color: @surface0 !important; - --ytd-macro-markers-list-item-title-color: @text !important; - --ytd-macro-markers-list-item-secondary-color: @subtext1 !important; - --ytd-macro-markers-list-item-timestamp-background-color: @surface1 !important; - } - - /* playlist selector */ - ytd-playlist-panel-video-renderer { - --yt-lightsource-section2-color: @surface1 !important; - --yt-lightsource-section4-color: @surface2 !important; - --yt-lightsource-primary-title-color: @text !important; - --yt-lightsource-secondary-title-color: @text !important; - --yt-active-playlist-panel-background-color: @surface0 !important; - } - - ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] - .header.ytd-playlist-panel-renderer { - --iron-icon-fill-color: @text !important; - background-color: @base !important; - } - - /* explandable meta */ - ytd-expandable-metadata-renderer { - --yt-lightsource-section1-color: @base !important; - --yt-lightsource-section2-color: @surface0 !important; - --yt-lightsource-section3-color: @surface1 !important; - --yt-lightsource-section4-color: @surface2 !important; - --yt-lightsource-primary-title-color: @text !important; - --yt-lightsource-secondary-title-color: @subtext0 !important; - } - - yt-live-chat-renderer { - --yt-emoji-picker-renderer-height: 180px; - --yt-button-default-text-color: @text !important; - --yt-button-default-background-color: @base !important; - --yt-button-dark-text-color: @base !important; - --yt-button-dark-background-color: @accent-Color !important; - --yt-button-payment-background-color: @accent-Color !important; - } - - yt-icon.ytd-pinned-comment-badge-renderer * { - fill: @text !important; - } - - .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start::after { - background: @overlay0 !important; - } - - .html5-ypc-purchase { - background: @accent-Color !important; - &:hover { - background: ligten(@accent-Color, 10%) !important; - } - } - - yt-notification-action-renderer[darker-dark-theme] - tp-yt-paper-toast.yt-notification-action-renderer { - background: @overlay0 !important; - } - - /* volume bar */ - .ytp-volume-slider-handle { - background: @accent-Color !important; - &::before { - background: @accent-Color !important; - } - &::after { - z-index: -1; - } - } - - /* new videos dot */ - #newness-dot { - background-color: @accent-Color !important; - } - - /* subtitle */ - .ytp-chrome-controls .ytp-button[aria-pressed]:after { - background-color: @accent-Color !important; - } - - /* menu items */ - /* checkbox subitem */ - .ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox { - background: @accent-Color !important; - &::after { - background: @overlay1 !important; - } - } - .ytp-menuitem:not([aria-disabled="true"]):hover { - background: @surface1 !important; - } - .ytp-settings-button.ytp-hd-quality-badge, - .ytp-settings-button.ytp-4k-quality-badge, - .ytp-settings-button.ytp-5k-quality-badge, - .ytp-settings-button.ytp-8k-quality-badge, - .ytp-settings-button.ytp-3d-badge { - &::after { - background-color: @accent-Color !important; - } - } - - .ytp-panel-menu { - color: @text; - - & .ytp-menuitem:not(:last-child) svg > path { - fill: @text; - } - - & .ytp-menuitem:last-child svg:last-child { - fill: @text; - } - } - - .ytp-svg-fill { - fill: @text; - } - - .ytp-right-controls { - svg path { - fill: @text !important; - } - } - - .ytp-time-current, - .ytp-time-separator, - .ytp-time-duration, - .ytp-menu-label-secondary, - .ytp-menuitem-label-count { - color: @subtext0; - } - - .style-scope.ytd-thumbnail-overlay-toggle-button-renderer:hover { - fill: @accent-Color !important; - } - - .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled, - .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled { - background-color: @accent-Color !important; - .yt-spec-button-shape-next__icon yt-icon svg g path { - fill: @base !important; - } - } - - /* link */ - .yt-core-attributed-string__link--call-to-action-color { - color: @sapphire !important; - &:hover { - color: @teal !important; - } - } - - /* search results */ - .sbpqs_a:before, - .sbqs_c:before { - filter: invert(1); - } - - /* Results backgrounds */ - .sbsb_a, - .sbdd_b { - background: @mantle !important; - border: none !important; - } - - /* text color */ - .gsfs { - color: @text !important; - } - - /* Hover and keyboard select background */ - .sbsb_c.gsfs:hover, - .sbsb_d { - background-color: @surface0 !important; - } - - .sbfl_b { - background-color: @mantle !important; - &:hover { - background-color: @surface0 !important; - color: @accent-Color !important; - } - } - - .sbpqs_a { - color: @accent-Color !important; - } - - .sbfl_a { - color: @subtext0 !important; - } - - .sbsb_i { - color: @subtext0; - } - - /* Keyboard select text color and hover text color */ - .sbsb_c:hover .sbqs_c, - .sbsb_c.gsfs.sbsb_d .sbqs_c { - color: @accent-Color !important; - } - - .ytp-swatch-background-color { - background-color: @accent-Color !important; - } - - /* exmplation box */ - .explanation-box[correct] * { - color: @crust !important; - } - - /* custom likes + anims */ - yt-animated-icon[animated-icon-type="LIKE"] - > ytd-lottie-player - > lottie-component - > svg - > g:nth-child(2) - > g:nth-child(2) { - /* not liked */ - > g:nth-child(2), - > g:nth-child(4) { - > path:nth-child(1) { - stroke: @text !important; - } - } - /* liked */ - > g:nth-child(1), - > g:nth-child(3) { - > path:nth-child(1) { - fill: @accent-Color !important; - } - > path:nth-child(2) { - stroke: @accent-Color !important; - } - } - } - - /* iv branding */ - /* Popup for when you hover over the channel avatar in the video */ - .iv-branding .branding-context-container-inner { - background-color: @base !important; - } - - .iv-branding .iv-branding-context-name { - color: @text !important; - text-shadow: none !important; - } - - /* Popup for when you hover over the channel avatar in the video */ - .iv-branding .branding-context-container-inner { - background-color: @base !important; - } - - /* Cards */ - .iv-drawer-content { - background-color: fadeout(@mantle, 5%) !important; - } - - .iv-drawer-header-text { - color: @text !important; - } - - .iv-card-content, - .ytp-ce-expanding-overlay-background, - .ytp-cards-teaser .ytp-cards-teaser-text, - .ytp-cards-teaser .ytp-cards-teaser-box { - background-color: @base !important; - } - - .ytp-cards-teaser .ytp-cards-teaser-box, - .iv-card-image { - border: 0px !important; - } - - .iv-card-content > :first-child, - .html5-video-player a, - .iv-card h2, - .ytp-cards-teaser .ytp-cards-teaser-text { - color: @text !important; - } - - /*Player tooltip background*/ - .ytp-tooltip-text { - background: @surface0 !important; - } - - .iv-card:hover .iv-card-primary-link, - .ytp-ce-website-title { - color: @accent-Color !important; - } - - .ytp-popup { - background: @surface0 !important; - } - - tp-yt-paper-dialog { - background-color: @base !important; - } - - /* Temporary fix */ - .yt-core-attributed-string--link-inherit-color { - color: @text !important; - /*&:hover { - * color: @teal !important; - }*/ - } - - /* live badges */ - .badge-style-type-live-now-alternate, - ytd-thumbnail-overlay-time-status-renderer[overlay-style="LIVE"] { - color: @crust !important; - yt-icon svg { - g path, - path { - fill: @crust !important; - } - } - } - .ytp-live-badge { - &:before { - background: @subtext1 !important; - } - &[disabled]:before { - background: @accent-Color !important; - } - } - - /* notification idicator */ - .yt-spec-icon-badge-shape--type-notification - .yt-spec-icon-badge-shape__badge { - background-color: @accent-Color !important; - color: @crust !important; - } - .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon { - color: @text !important; - } - - /* creator badges */ - ytd-author-comment-badge-renderer { - --yt-basic-background-color: @surface0 !important; - --yt-basic-foreground-title-color: @surface0 !important; - --ytd-author-comment-badge-background-color: @surface0 !important; - --ytd-author-comment-badge-name-color: @text !important; - --ytd-author-comment-badge-icon-color: @text !important; - padding-right: 6px; - padding-left: 8px; - } - - /* disable ambient mode */ - #cinematics > div > canvas { - visibility: hidden; - } - - /* badges e.g. popular */ - yt-chip-cloud-chip-renderer[chip-style="STYLE_DEFAULT"][selected], - yt-chip-cloud-chip-renderer[chip-style="STYLE_HOME_FILTER"][selected] { - background: @surface0 !important; - border: 1px solid @accent-Color !important; - color: @text !important; - } - - /* Search border */ - ytd-searchbox[has-focus] #container.ytd-searchbox { - border-color: @accent-Color !important; - } - - /* Error page */ - #error-page { - background-color: @base !important; - } - - #error-page-content { - color: @text !important; - text-shadow: none; - background-color: @base !important; - > p { - color: @text !important; - text-shadow: none; - } - #masthead-search-terms.masthead-search-terms-border { - border: 1px solid @accent-Color !important; - box-shadow: none !important; - } - #yt-masthead { - color: @text !important; - text-shadow: none; - #logo-container { - .logo { - filter: invert(1) grayscale(1); - } - .content-region { - color: @text !important; - text-shadow: none; - } - } - #masthead-search #masthead-search-terms-border { - input[type="text"] { - color: @text !important; - &:focus { - color: @accent-Color !important; - } - } - } - .search-button { - background-color: @mantle !important; - } - } - } - - /* Scrollbar */ - ::-webkit-scrollbar-thumb { - background: @accent-Color !important; - } - - ::-webkit-scrollbar { - width: 8px !important; - } - - ::-webkit-scrollbar-track { - background: @base !important; - } - - ::-webkit-scrollbar-thumb { - background: @accent-Color !important; - } - - /* text highlight */ - ::selection { - background: fadeout(@accent-Color, 80%) !important; - color: @text !important; - } - - ::-moz-selection { - background: fadeout(@accent-Color, 80%) !important; - color: @text !important; - } - } -} -@-moz-document url-prefix('https://www.youtube.com/redirect') -{ - /* youtube.com-redirect */ - :root[dark] { - #catppuccin(@darkFlavor, @accentColor); - } - :root { - #catppuccin(@lightFlavor, @accentColor); - } - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-Color: @catppuccin[@@lookup][@@accent]; - - h1 { - color: @text !important; - } - - #redirect-main-text { - color: @overlay2 !important; - .bolded { - color: @accent-Color !important; - } - } - - /* search */ - #masthead-search-terms-border { - border-color: @surface0 !important; - background-color: @surface0 !important; - box-shadow: fadeout(@crust, 10%) !important; - } - - /*Community Cross-posting*/ - ytd-shared-post-renderer[uses-compact-lockup] - #repost-context.ytd-shared-post-renderer { - background-color: var(--second-background); - } - #divider-line-container.ytd-shared-post-renderer { - background-color: var(--yt-spec-10-percent-layer); - } - - #masthead-search-terms { - color: @text !important; - } - - .search-button { - background: @surface0 !important; - border-color: @surface0 !important; - } - - .search-button-content { - filter: invert(1); - } - - #redirect-backto-safety-button:hover { - color: @text !important; - } - - #logo-container .content-region { - color: @text !important; - } - - /* text highlight */ - ::selection { - background: fadeout(@accent-Color, 80%) !important; - color: @text !important; - } - - ::-moz-selection { - background: fadeout(@accent-Color, 80%) !important; - color: @text !important; - } - } -} - -@-moz-document url-prefix('https://studio.youtube.com') -{ - /* studio.youtube.com */ - :root[dark] { - #catppuccin(@darkFlavor, @accentColor); - } - :root { - #catppuccin(@lightFlavor, @accentColor); - } - - #catppuccin(@lookup, @accent) { - @rosewater: @catppuccin[@@lookup][@rosewater]; - @flamingo: @catppuccin[@@lookup][@flamingo]; - @pink: @catppuccin[@@lookup][@pink]; - @mauve: @catppuccin[@@lookup][@mauve]; - @red: @catppuccin[@@lookup][@red]; - @maroon: @catppuccin[@@lookup][@maroon]; - @peach: @catppuccin[@@lookup][@peach]; - @yellow: @catppuccin[@@lookup][@yellow]; - @green: @catppuccin[@@lookup][@green]; - @teal: @catppuccin[@@lookup][@teal]; - @sky: @catppuccin[@@lookup][@sky]; - @sapphire: @catppuccin[@@lookup][@sapphire]; - @blue: @catppuccin[@@lookup][@blue]; - @lavender: @catppuccin[@@lookup][@lavender]; - @text: @catppuccin[@@lookup][@text]; - @subtext1: @catppuccin[@@lookup][@subtext1]; - @subtext0: @catppuccin[@@lookup][@subtext0]; - @overlay2: @catppuccin[@@lookup][@overlay2]; - @overlay1: @catppuccin[@@lookup][@overlay1]; - @overlay0: @catppuccin[@@lookup][@overlay0]; - @surface2: @catppuccin[@@lookup][@surface2]; - @surface1: @catppuccin[@@lookup][@surface1]; - @surface0: @catppuccin[@@lookup][@surface0]; - @base: @catppuccin[@@lookup][@base]; - @mantle: @catppuccin[@@lookup][@mantle]; - @crust: @catppuccin[@@lookup][@crust]; - @accent-Color: @catppuccin[@@lookup][@@accent]; - - &, - html, - html[dark], - html[dark][dark], - &[dark], - &[light], - [light], - html[light], - html[light][light] { - /* disable */ - --yt-spec-black-pure-alpha-80: (null) !important; - --yt-spec-black-pure-alpha-60: (null) !important; - --yt-spec-black-1-alpha-98: (null) !important; - --yt-spec-black-1-alpha-95: (null) !important; - - /* text */ - --yt-spec-text-primary: @text !important; - --ytcp-text-primary: @text !important; - --ytcp-text-primary-inverse: @base !important; - --ytcp-static-overlay-text-primary-inverse: @base !important; - --ytcp-wordmark-text: @text !important; - --ytcp-text-secondary: @subtext0 !important; - --ytcp-text-disabled: @subtext1 !important; - --ytcp-overlay-text-primary: @overlay2 !important; - - /* main bg */ - --ytcp-general-background-a: @base !important; - --yt-spec-base-background: @base !important; - --yt-spec-black-3: @base !important; - - /* secondary bg */ - --yt-spec-brand-background-solid: @mantle !important; - --ytcp-brand-background-solid: @mantle !important; - --yt-spec-raised-background: @mantle !important; - --ytcp-general-background-b: @mantle !important; - --ytcp-analytics-reach-background: @mantle !important; - --yt-spec-black-2: @mantle !important; - - /* additional bg */ - --ytcp-general-background-c: @crust !important; - - /* menu */ - --ytcp-menu-background: @surface0 !important; - - /* card borders */ - --ytcp-container-border-color: @surface0 !important; - --ytcp-container-hovered-border-color: @surface0 !important; - --ytcp-line-divider-solid: @surface0 !important; - --ytcp-container-border-color-inverse: @subtext0 !important; - --ytcp-line-divider-solid-inverse: @subtext0 !important; - - /* links */ - --ytcp-call-to-action: @sapphire !important; - --ytcp-call-to-action-inverse: @mantle !important; - - /* buttons */ - --ytcp-call-to-action-raised-background: @accent-Color !important; - --yt-spec-brand-button-background: @accent-Color !important; - --ytcp-call-to-action-raised-disabled: @surface2 !important; - --ytcp-call-to-action-raised-disabled-background: @overlay2 !important; - --ytcp-call-to-action-raised-background-inverse: @base !important; - --ytcp-call-to-action-raised-disabled-inverse: @surface2 !important; - --ytcp-call-to-action-raised-disabled-background-inverse: @overlay2 !important; - - /* dropdown */ - --yt-spec-brand-background-primary: @surface0 !important; - - /* icons */ - --yt-compact-link-icon-color: @overlay2 !important; - --ytcp-icon-active: @accent-Color !important; - --ytcp-icon-inactive: @overlay2 !important; - --ytcp-icon-disabled: @overlay2 !important; - --ytcp-icon-active-inverse: @overlay1 !important; - --ytcp-icon-disabled-inverse: @subtext1 !important; - - /* colors */ - --ytcp-error-red: @red !important; - --ytcp-badge-red: @red !important; - --ytcp-error-red-inverse: @red !important; - --ytcp-themed-red-inverse: @red !important; - --ytcp-themed-red: @red !important; - --ytcp-themed-blue: @blue !important; - --ytcp-badge-blue-solid: @blue !important; - --ytcp-themed-blue-inverse: @blue !important; - --ytcp-themed-green: @green !important; - --ytmus-genre-primary-melon: @green !important; - --ytcp-themed-green-inverse: @green !important; - --ytcp-analytics-pine: @green !important; - --ytcp-analytics-pine-inverse: @green !important; - --ytcp-analytics-parrot: @green !important; - --ytcp-themed-yellow: @peach !important; - --ytmus-genre-primary-gold: @peach !important; - --ytcp-yellow-inverse: @peach !important; - --ytcp-badge-yellow: @peach !important; - --ytcp-analytics-yellow: @peach !important; - --ytcp-analytics-apricot: @peach !important; - --ytcp-suggested-action: @teal !important; - --ytcp-analytics-overview: @teal !important; - --ytcp-analytics-revenue: @teal !important; - --ytcp-analytics-default-secondary: @teal !important; - --ytcp-analytics-royal-blue: @lavender !important; - --ytcp-analytics-reach: @lavender !important; - --ytcp-analytics-audience: @lavender !important; - --ytcp-analytics-engagement: @pink !important; - --ytcp-analytics-revenue-secondary: @pink !important; - --ytcp-analytics-bubblegum: @flamingo !important; - --ytmus-genre-primary-ruby: @flamingo !important; - --ytmus-genre-primary-salmon: @mauve !important; - --ytmus-genre-primary-orange: @maroon !important; - --ytmus-genre-primary-sky: @sky !important; - --ytmus-genre-primary-sky-inverse: @sky !important; - - /* misc */ - --yt-spec-badge-chip-background: @surface1 !important; - --ytcp-focus-inverse: @accent-Color !important; - --ytcp-focus: @accent-Color !important; - --ytcp-selected-item: @accent-Color !important; - --ytcp-hover-item: @overlay2 !important; - --ytcp-chip-active-focus: @accent-Color !important; - --ytcp-playhead: @overlay2 !important; - --ytcp-playhead-inverse: @overlay2 !important; - } - - ytcp-button.destructive.ytls-error-dialog { - color: @base !important; - } - - yt-formatted-string.ytls-error-dialog, - tp-yt-iron-icon.ytls-error-dialog { - color: @text !important; - } - - /* text highlight */ - ::selection { - background: fadeout(@accent-Color, 80%) !important; - color: @text !important; - } - - ::-moz-selection { - background: fadeout(@accent-Color, 80%) !important; - color: @text !important; - } - } -} - -@catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; -}; diff --git a/styles/youtube/catppuccin.user.less b/styles/youtube/catppuccin.user.less new file mode 100644 index 0000000000..c30f02fdf1 --- /dev/null +++ b/styles/youtube/catppuccin.user.less @@ -0,0 +1,1574 @@ +/* ==UserStyle== +@name YouTube Catppuccin +@namespace github.com/catppuccin/userstyles/styles/youtube +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/youtube +@version 2026.04.14 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/youtube/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ayoutube +@description Soothing pastel theme for YouTube +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] + +@var checkbox logo "Enable YouTube logo" 1 +@var checkbox oled "Enable black bars" 0 +@var checkbox sponsorBlock "Enable SponsorBlock segments" 1 +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("youtube.com") { + :root[dark] { + #catppuccin(@darkFlavor); + } + :root:not([dark]) { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + @white: if(@flavor = latte, @base, @text); + @black: if(@flavor = latte, @text, @base); + + color: @text; + background: @base; + + #--variables() { + &, + [dark], + [system-icons], + [darker-dark-theme], + &[dark], + &[system-icons], + &[darker-dark-theme] { + --efyt-control-bar-background-color: @mantle; + --dimmer-text: @text; + + /* Newest Variables */ + --yt-sys-color-baseline--base-background: @base; + --yt-sys-color-baseline--menu-background: @mantle; + --yt-sys-color-baseline--raised-background: @surface0; + --yt-sys-color-baseline--additive-background: @surface0; + --yt-sys-color-baseline--wordmark-text: @text; + --yt-sys-color-baseline--text-primary: @text; + --yt-sys-color-baseline--text-secondary: @subtext0; + --yt-sys-color-baseline--call-to-action: @accent; + --yt-sys-color-baseline--suggested-action: mix(@accent, @base, 30%); + --yt-sys-color-baseline--outline: @surface0; + --yt-sys-color-baseline--outline-opaque: @surface1; + --yt-sys-color-baseline--outline-inverse-opaque: @overlay0; + --yt-sys-color-baseline--overlay-background-medium-light: fade( + @black, + 60% + ); + --yt-sys-color-baseline--overlay-background-heavy: fade(@black, 80%); + --yt-sys-color-baseline--overlay-background-solid: @crust; + --yt-sys-color-baseline--overlay-text-primary: @text; + + --yt-spec-white-1: @text; + --yt-spec-white-2: @subtext0; + --yt-spec-white-3: @subtext1; + --yt-spec-white-4: darken(@subtext1, 5%); + --yt-spec-black-1: @overlay1; + --yt-spec-black-2: @overlay0; + --yt-spec-black-3: @surface2; + --yt-spec-black-4: @surface1; + --yt-spec-black-pure: @surface0; + --yt-spec-grey-1: @text; + --yt-spec-grey-2: @subtext0; + --yt-spec-grey-3: @subtext1; + --yt-spec-grey-4: @overlay2; + --yt-spec-grey-5: @overlay1; + --yt-brand-youtube-red: @accent; + --yt-brand-medium-red: @accent; + --yt-brand-light-red: @accent; + --yt-spec-red-30: @peach; + --yt-spec-red-70: @red; + --yt-spec-red-indicator: @accent; + --yt-spec-pale-blue: @sky; + --yt-spec-light-blue: @sky; + --yt-spec-dark-blue: @sapphire; + --yt-spec-navy-blue: @teal; + --yt-spec-light-green: @green; + --yt-spec-dark-green: @green; + --yt-spec-yellow: @peach; + --yt-spec-black-pure-alpha-5: @subtext0; + --yt-spec-black-pure-alpha-10: @overlay2; + --yt-spec-black-pure-alpha-15: fade(@crust, 85%); + --yt-spec-black-pure-alpha-30: fade(@crust, 70%); + --yt-spec-black-pure-alpha-60: fade(@crust, 40%); + --yt-spec-black-pure-alpha-80: fade(@crust, 20%); + --yt-spec-black-1-alpha-98: fade(@crust, 2%); + --yt-spec-black-1-alpha-95: fade(@crust, 5%); + --yt-spec-white-1-alpha-10: fade(@text, 90%); + --yt-spec-white-1-alpha-20: fade(@text, 80%); + --yt-spec-white-1-alpha-25: fade(@text, 75%); + --yt-spec-white-1-alpha-30: fade(@text, 70%); + --yt-spec-white-1-alpha-70: fade(@text, 30%); + --yt-spec-white-1-alpha-95: fade(@text, 5%); + --yt-spec-white-1-alpha-98: fade(@text, 2%); + --yt-brand-medium-red-alpha-90: fade(@accent, 10%); + --yt-brand-medium-red-alpha-30: fade(@accent, 70%); + --yt-brand-light-red-alpha-30: fade(@accent, 70%); + --yt-spec-light-blue-alpha-30: fade(@sapphire, 70%); + --yt-spec-dark-blue-alpha-30: fade(@sapphire, 70%); + + --yt-spec-base-background: @base; + --yt-spec-raised-background: @surface0; + --yt-spec-menu-background: @mantle; + --yt-spec-inverted-background: @text; + --yt-spec-additive-background: @surface0; + --yt-spec-outline: @surface0; + --yt-spec-shadow: fade(@crust, 75%); + --yt-spec-text-primary: @text; + --yt-spec-text-secondary: @subtext0; + --yt-spec-text-disabled: @subtext1; + --yt-spec-text-primary-inverse: @crust; + --yt-spec-call-to-action: @accent; + --yt-spec-call-to-action-inverse: @accent; + --yt-spec-suggested-action: fade(@accent, 20%); + --yt-spec-suggested-action-inverse: @text; + --yt-spec-icon-active-other: @text; + --yt-spec-button-chip-background-hover: @surface1; + --yt-spec-touch-response: @surface0; + + --yt-spec-touch-response-inverse: @accent; + --yt-spec-brand-icon-active: @accent; + --yt-spec-brand-button-background: @accent; + --yt-spec-brand-link-text: @sapphire; + --yt-spec-wordmark-text: @text; + --yt-spec-error-indicator: @red; + --yt-spec-themed-blue: @accent; + --yt-spec-themed-green: @green; + --yt-spec-ad-indicator: @teal; + --yt-spec-themed-overlay-background: fade(@crust, 80%); + --yt-spec-commerce-badge-background: @green; + --yt-spec-static-brand-red: @accent; + --yt-spec-static-brand-white: @text; + --yt-spec-static-brand-black: @base; + --yt-spec-static-clear-color: fade(@crust, 100%); + --yt-spec-static-clear-black: @base; + --yt-spec-static-ad-yellow: @peach; + --yt-spec-static-grey: @subtext0; + --yt-spec-static-overlay-background-solid: @crust; + --yt-spec-static-overlay-background-heavy: @crust; + --yt-spec-static-overlay-background-medium: fade(@crust, 50%); + --yt-spec-static-overlay-background-light: fade( + @crust, + 90% + ); + --yt-spec-static-overlay-text-primary: @text; + --yt-spec-static-overlay-text-secondary: fade( + @subtext0, + 30% + ); + --yt-spec-static-overlay-text-disabled: fade( + @subtext0, + 70% + ); + --yt-spec-static-overlay-call-to-action: @accent; + --yt-spec-static-overlay-icon-active-other: @crust; + --yt-spec-static-overlay-icon-inactive: @surface1; + --yt-spec-static-overlay-icon-disabled: @surface2; + --yt-spec-static-overlay-button-primary: @accent; + --yt-spec-static-overlay-touch-response: @overlay1; + --yt-spec-static-overlay-touch-response-inverse: @surface1; + --yt-spec-static-overlay-background-brand: @accent; + --yt-spec-assistive-feed-themed-gradient-1: @subtext0; + --yt-spec-assistive-feed-themed-gradient-2: @lavender; + --yt-spec-assistive-feed-themed-gradient-3: @red; + --yt-spec-brand-background-solid: @base; + --yt-spec-brand-background-primary: @base; + --yt-spec-brand-background-secondary: @mantle; + --yt-spec-general-background-a: @base; + --yt-spec-general-background-b: @base; + --yt-spec-general-background-c: @crust; + --yt-spec-error-background: @base; + --yt-spec-10-percent-layer: @surface1; + --yt-spec-snackbar-background: @mantle; + --yt-spec-snackbar-background-updated: @mantle; + --yt-spec-badge-chip-background: if( + @flavor = latte, + @crust, + @surface0 + ); + --yt-spec-verified-badge-background: @overlay0; + --yt-spec-call-to-action-fadeoutd: fade(@sapphire, 70%); + --yt-spec-call-to-action-hover: @accent; + --yt-spec-brand-button-background-hover: @accent; + --yt-spec-brand-link-text-fadeoutd: fade( + @accent, + 70% + ); + --yt-spec-filled-button-focus-outline: @surface0; + --yt-spec-static-overlay-button-hover: @surface1; + --yt-spec-mono-filled-hover: @surface1; + --yt-spec-commerce-filled-hover: @accent; + --yt-spec-mono-tonal-hover: @surface1; + --yt-spec-commerce-tonal-hover: @surface2; + --yt-spec-static-overlay-filled-hover: @overlay1; + --yt-spec-static-overlay-tonal-hover: @surface1; + --yt-spec-paper-tab-ink: fade(@text, 70%); + --yt-spec-filled-button-text: @text; + --yt-spec-selected-nav-text: @text; + --iron-icon-fill-color: @text; + + --yt-spec-overlay-text-primary: @text; + --yt-spec-overlay-background-medium-light: fade(@black, 60%); + --yt-spec-overlay-background-heavy: fade(@black, 80%); + --yt-spec-overlay-background-solid: @black; + + /* Search bar */ + --ytd-searchbox-border-color: @surface0; + --ytd-searchbox-legacy-border-color: @surface0; + --ytd-searchbox-legacy-border-shadow-color: fade( + @crust, + 100% + ); + --ytd-searchbox-legacy-button-color: @mantle; + --ytd-searchbox-legacy-button-border-color: @surface0; + --ytd-searchbox-legacy-button-focus-color: @accent; + --ytd-searchbox-legacy-button-hover-color: @mantle; + --ytd-searchbox-legacy-button-hover-border-color: @surface0; + --ytd-searchbox-legacy-button-icon-color: @accent; + --ytd-searchbox-background: @base; + --ytd-searchbox-text-color: @text; + + /* System icons */ + --yt-spec-icon-inactive: @text; + --yt-spec-icon-disabled: @overlay1; + --yt-spec-brand-icon-inactive: @overlay2; + + /* Live chat */ + --yt-live-chat-background-color: @base; + --yt-live-chat-primary-text-color: @text; + --yt-live-chat-action-panel-background-color: @base; + --yt-live-chat-secondary-background-color: @surface1; + --yt-live-chat-toast-background-color: @surface2; + --yt-live-chat-mode-change-background-color: @base; + --yt-live-chat-secondary-text-color: @subtext0; + --yt-live-chat-tertiary-text-color: fade(@text, 46%); + --yt-live-chat-text-input-field-inactive-underline-color: @subtext0; + + --yt-live-chat-text-input-field-placeholder-color: @subtext0; + --yt-live-chat-enabled-send-button-color: @text; + --yt-live-chat-disabled-icon-button-color: @subtext1; + --yt-live-chat-picker-button-hover-color: @accent; + --yt-live-chat-mention-background-color: @accent; + --yt-live-chat-mention-text-color: @text; + --yt-live-chat-deleted-message-color: @subtext0; + --yt-live-chat-deleted-message-bar-color: @subtext1; + --yt-live-chat-reconnect-message-color: @text; + --yt-live-chat-disabled-button-background-color: @overlay0; + --yt-live-chat-sub-panel-background-color: @base; + --yt-live-chat-sub-panel-background-color-transparent: @mantle; + --yt-live-chat-moderator-color: @lavender; + --yt-live-chat-owner-color: @peach; + --yt-live-chat-message-highlight-background-color: @base; + --yt-live-chat-sponsor-color: @green; + --yt-live-chat-overlay-color: fade(@mantle, 50%); + --yt-live-chat-dialog-background-color: @base; + --yt-emoji-picker-variant-selector-bg-color: @base; + --yt-live-chat-moderation-mode-hover-background-color: fade( + @mantle, + 70% + ); + --yt-grey: @subtext0; + --yt-live-chat-text-input-field-suggestion-background-color: @subtext0; + + --yt-live-chat-text-input-field-suggestion-background-color-hover: @subtext1; + + --yt-emoji-picker-search-background-color: @surface0; + --yt-emoji-picker-search-color: @text; + --yt-emoji-picker-search-placeholder-color: @accent; + --yt-live-chat-slider-active-color: @accent; + --yt-live-chat-slider-container-color: @surface0; + --yt-live-chat-slider-markers-color: @text; + --yt-live-chat-banner-gradient-scrim: linear-gradient( + @mantle, + transparent + ); + --yt-live-chat-action-panel-gradient-scrim: linear-gradient( + to top, + @mantle, + transparent + ); + --yt-live-chat-automod-button-background-color-hover: fade( + @crust, + 50% + ); + --yt-live-chat-automod-button-explanation-color: fade( + @accent, + 30% + ); + --yt-live-chat-shimmer-background-color: fade(@crust, 60%); + --yt-live-chat-shimmer-linear-gradient: linear-gradient( + 0deg, + fade(@text, 90%) 40%, + fade(@base, 70%) 50%, + fade(@text, 90%) 60% + ); + --yt-live-chat-vem-background-color: @mantle; + --yt-live-chat-product-picker-icon-color: fade(@text, 50%); + --yt-live-chat-product-picker-hover-color: @overlay0; + --yt-live-chat-product-picker-disabled-icon-color: fade( + @text, + 70% + ); + --yt-live-chat-action-panel-background-color-transparent: (null); + + --paper-tooltip-background: @surface2; + --paper-tooltip-text-color: @text; + .ytTooltipContainerDefaultTooltipContent { + background: var(--paper-tooltip-background); + color: var(--paper-tooltip-text-color); + } + + /* Links */ + --yt-endpoint-color: @text; + --yt-endpoint-visited-color: @text; + --yt-endpoint-hover-color: @accent; + + --sb-dark-red-outline: @accent; + --sb-main-bg-color: @base; + --sb-main-fg-color: @text; + --sb-grey-bg-color: @base; + --sb-grey-fg-color: @subtext0; + --sb-red-bg-color: @accent; + + & when (@sponsorBlock = 1) { + --sb-category-sponsor: @green; + --sb-category-selfpromo: @yellow; + --sb-category-exclusive_access: @teal; + --sb-category-interaction: @mauve; + --sb-category-poi_highlight: @pink; + --sb-category-intro: @sky; + --sb-category-outro: @blue; + --sb-category-preview: @sapphire; + --sb-category-filler: @lavender; + --sb-category-music_offtopic: @peach; + } + } + + &:not(.style-scope) { + --primary-text-color: @text; + --primary-background-color: @base; + --secondary-text-color: @subtext0; + --disabled-text-color: @subtext1; + --divider-color: @overlay0; + --error-color: @red; + --primary-color: @accent; + --light-primary-color: @accent; + --dark-primary-color: @blue; + --accent-color: @accent; + --light-accent-color: @accent; + --dark-accent-color: @accent; + --light-theme-background-color: @base; + --light-theme-base-color: @text; + --light-theme-text-color: @text; + --light-theme-secondary-color: @subtext0; + --light-theme-disabled-color: @subtext1; + --light-theme-divider-color: @overlay0; + --dark-theme-background-color: @base; + --dark-theme-base-color: @text; + --dark-theme-text-color: @text; + --dark-theme-secondary-color: @subtext0; + --dark-theme-disabled-color: @subtext1; + --dark-theme-divider-color: @overlay0; + } + } + + #--variables() !important; + + /* Misc */ + + & when (@logo = 0) { + ytd-topbar-logo-renderer, + svg.ytd-consent-bump-v2-lightbox { + display: none; + } + } + + #progress.yt-page-navigation-progress { + background: @accent; + } + + /* Selected chapter */ + ytd-macro-markers-list-item-renderer { + --ytd-macro-markers-list-item-background-color: @surface0; + --ytd-macro-markers-list-item-title-color: @text; + --ytd-macro-markers-list-item-secondary-color: @subtext1; + --ytd-macro-markers-list-item-timestamp-background-color: @surface1; + } + + ytd-playlist-panel-video-renderer { + --yt-lightsource-section2-color: @surface1; + --yt-lightsource-section4-color: @surface2; + --yt-lightsource-primary-title-color: @text; + --yt-lightsource-secondary-title-color: @text; + --yt-active-playlist-panel-background-color: @surface0; + } + + ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] + .header.ytd-playlist-panel-renderer { + --iron-icon-fill-color: @text; + background-color: @base; + } + + #container.ytd-masthead { + --iron-icon-fill-color: @text; + } + + #background.ytd-masthead, + #frosted-glass { + --yt-frosted-glass-desktop: @base; + --yt-spec-frosted-glass-desktop: @base; + } + + ytd-feed-filter-chip-bar-renderer[expand-instead-of-scroll] + #chips-wrapper.ytd-feed-filter-chip-bar-renderer { + --iron-icon-fill-color: @text; + background-color: @base; + } + + .ytp-progress-list when not(@flavor = latte) { + background: fade(@surface0, 80%); + } + .ytp-load-progress when not(@flavor = latte) { + background: fade(@overlay0, 100%); + } + + ytd-expandable-metadata-renderer { + --yt-lightsource-section1-color: @base; + --yt-lightsource-section2-color: @surface0; + --yt-lightsource-section3-color: @surface1; + --yt-lightsource-section4-color: @surface2; + --yt-lightsource-primary-title-color: @text; + --yt-lightsource-secondary-title-color: @subtext0; + } + + yt-live-chat-renderer { + --yt-button-default-text-color: @text; + --yt-button-default-background-color: @base; + --yt-button-dark-text-color: @base; + --yt-button-dark-background-color: @accent; + --yt-button-payment-background-color: @accent; + } + + yt-icon-button.yt-live-chat-item-list-renderer { + background-color: @accent; + color: @base; + + &:hover { + background-color: darken(@accent, 5%); + } + } + + /* Skeleton */ + #guide-skeleton, + #home-container-skeleton, + #home-chips { + background-color: @base; + z-index: -1; + } + + ytd-app[is-shorts-page] { + background: var( + --yt-spec-base-background + ); // fix unset background on shorts page + } + + #guide-skeleton .guide-ghost-icon, + #guide-skeleton .guide-ghost-text, + .masthead-skeleton-icon, + #home-page-skeleton .skeleton-bg-color, + .watch-skeleton .skeleton-bg-color { + background-color: @surface1; + } + + /* Ambient mode */ + #cinematics, + #cinematic-container { + display: none; + } + + .ytp-settings-button.ytp-hd-quality-badge::after, + .ytp-settings-button.ytp-hdr-quality-badge::after, + .ytp-settings-button.ytp-4k-quality-badge::after, + .ytp-settings-button.ytp-5k-quality-badge::after, + .ytp-settings-button.ytp-8k-quality-badge::after, + .ytp-settings-button.ytp-3d-badge-grey::after, + .ytp-settings-button.ytp-3d-badge::after { + background-color: @accent; + } + + /* Icons */ + + [fill="red"], + [fill="#F00"], + [fill="#FF0000"], + [fill="#f03"], + [fill="#FF0033"] { + fill: @accent; + } + + [fill="white"] { + fill: if(@flavor = latte, @base, @text); + } + + yt-icon.ytd-logo [fill="white"] { + fill: @crust; + } + + .yt-spec-icon-shape { + [fill="#FAFAFA"], + [fill="#000"], + [fill="#fff"], + [fill="#FFF"], + [fill="#FFFFFF"] { + fill: @crust; + } + } + + /* Notifications Bell and Indicator */ + .ytSpecIconBadgeShapeStyleOverlay .ytSpecIconBadgeShapeIcon, + .ytSpecIconBadgeShapeBadge { + color: @text; + } + .ytSpecIconBadgeShapeTypeNotification .ytSpecIconBadgeShapeBadge { + background-color: @accent; + color: @base; + } + + /* Buttons */ + + .yt-spec-button-shape-next--mono { + &.yt-spec-button-shape-next--tonal { + color: @text; + background-color: @surface0; + + [fill="rgb(3,3,3)"], + [fill="rgb(0,0,0)"], + [fill="rgb(255,255,255)"] { + fill: @text; + } + + [stroke="rgb(0,0,0)"], + [stroke="rgb(255,255,255)"] { + stroke: @text; + } + + /* Accent for filled-in thumbs up (like button) */ + [animated-icon-type="LIKE"] { + g path[fill] { + fill: @accent; + + + [stroke] { + stroke: @accent; + } + } + } + + &:hover { + background-color: @surface1; + } + } + + &.yt-spec-button-shape-next--outline { + color: @text; + border-color: @surface2; + + &:hover { + background-color: @surface2; + } + } + + &.yt-spec-button-shape-next--text { + color: @text; + + /* Accent for filled-in thumbs up (like button) */ + path[d="M3,11h3v10H3V11z M18.77,11h-4.23l1.52-4.94C16.38,5.03,15.54,4,14.38,4c-0.58,0-1.14,0.24-1.52,0.65L7,11v10h10.43 c1.06,0,1.98-0.67,2.19-1.61l1.34-6C21.23,12.15,20.18,11,18.77,11z"] { + fill: @accent; + } + + &:hover { + background-color: @surface1; + } + } + + &.yt-spec-button-shape-next--filled { + color: @base; + background-color: @accent; + + &:hover { + background-color: darken(@accent, 5%); + } + } + } + + .yt-spec-button-shape-next--disabled { + color: @overlay1; + } + + .yt-spec-button-shape-next--overlay { + &.yt-spec-button-shape-next--tonal { + color: @text; + background-color: @surface0; + &:hover { + background-color: @surface1; + } + } + &.yt-spec-button-shape-next--text { + color: @text; + &:hover { + background-color: @surface0; + } + } + + &.yt-spec-button-shape-next--filled { + color: @base; + background-color: @accent; + } + + &.yt-spec-button-shape-next--outline { + color: @text; + border-color: @surface1; + &:hover { + background: @surface0; + } + } + } + + .yt-spec-button-shape-next--call-to-action { + &.yt-spec-button-shape-next--outline { + color: @accent; + border-color: @surface2; + + &:hover { + background-color: fade(@accent, 30%); + color: @accent; + } + } + + &.yt-spec-button-shape-next--text { + color: @accent; + + &:hover { + background-color: fade(@accent, 30%); + } + } + + &.yt-spec-button-shape-next--filled { + color: @base; + background-color: @accent; + + &:hover { + background-color: lighten(@accent, 5%); + } + } + } + + .yt-spec-button-shape-next--disabled.yt-spec-button-shape-next--filled { + color: @subtext0; + background-color: fade(@surface1, 70%); + } + + /* Search box */ + + .ytSearchboxComponentInputBox, + .ytSearchboxComponentInputBoxDark { + background: var(--ytd-searchbox-background); + color: var(--ytd-searchbox-text-color); + border-color: var(--ytd-searchbox-border-color); + box-shadow: none; + } + + .ytSearchboxComponentInputBoxHasFocus, + .ytSearchboxComponentInputBoxHasFocusDark { + border-color: @accent; + } + + .ytSuggestionComponentPersonalizedSuggestion { + color: @text; + } + .ytSuggestionComponentHighlighted { + background: @surface1; + } + .ytSuggestionComponentLargerRemovedText { + color: @overlay1; + } + + .ytSearchboxComponentSuggestionsContainer, + .ytSearchboxComponentSuggestionsContainerDark { + background: var(--yt-spec-raised-background); + border-color: var(--yt-spec-raised-background); + } + + .ytSuggestionComponentSuggestion, + .ytSuggestionComponentSuggestionDark { + color: var(--ytd-searchbox-text-color); + } + + .ytSearchboxComponentSearchButton, + .ytSearchboxComponentSearchButtonDark { + color: var(--ytd-searchbox-text-color); + background: var(--yt-spec-raised-background); + border-color: var(--ytd-searchbox-border-color); + } + + .ytSearchboxComponentClearButtonIcon, + .ytSearchboxComponentClearButtonIconDark { + color: var(--ytd-searchbox-text-color); + } + + /* Video description */ + + // Video description background (collapsed on hover) + ytd-watch-metadata { + --yt-saturated-raised-background: @surface1 !important; + --yt-saturated-text-primary: @text !important; + --yt-saturated-text-secondary: @subtext1 !important; + } + // Video description text (expanded) + ytd-text-inline-expander + .ytAttributedStringLinkInheritColor:not( + .ytAttributedStringLink + ) { + color: @text !important; + } + // Video description YouTube links + .ytAttributedStringHighlightTextDecorator { + background-color: @surface2 !important; + } + + /* Links */ + .ytAttributedStringLinkCallToActionColor { + color: @accent; + } + + /* Course Playlist (e.g. https://www.youtube.com/playlist?list=PLZHQObOWTQDNPOjrT6KVlfJuKtYTftqH6) */ + .ytwCourseProgressViewModelHostProgressTitle, + .ytwCourseProgressViewModelHostProgressSubtitle { + color: @text; + } + .ytwCourseProgressViewModelHostProgressBar { + background-color: fade(@white, 20%); + + .ytwCourseProgressViewModelHostProgressBarFill { + background-color: @text; + } + } + + .ytwHowThisWasMadeSectionViewModelSectionTitle, + .ytwHowThisWasMadeSectionViewModelBodyHeader { + color: @text; + } + + .ytwHowThisWasMadeSectionViewModelBodyText { + color: @subtext0; + } + + // "Ask" - AI chat + .ytVideoDescriptionYouchatSectionViewModelSectionTitle { + color: @text; + } + .ytVideoDescriptionYouchatSectionViewModelSubHeaderText { + color: @subtext0; + } + .ytwYouChatItemViewModelHost { + color: @text; + } + .ytwYouChatChipsDataChip { + color: @text; + border-color: @surface2; + + &:hover { + background-color: @surface1; + } + } + .chatInputViewModelChatDisclaimer { + color: @subtext0; + } + + // Timeline/Transcript + .ytwTimelineChapterViewModelTitle, + .ytShelfHeaderLayoutTitle { + color: @text; + } + .ytwTranscriptSegmentViewModelHost { + color: @subtext0; + } + .ytwTranscriptSegmentViewModelTimestamp { + background-color: @surface2; + color: @subtext1; + } + .ytwTranscriptSegmentViewModelTimestampActive { + background-color: @overlay0; + color: @text; + } + + // Video Attributes (Music, Games) + .videoAttributesSectionViewModelTitle, + .ytVideoAttributeViewModelTitle { + color: @text; + } + .ytVideoAttributeViewModelSubtitle, + .ytVideoAttributeViewModelSecondarySubtitle { + color: @subtext1; + } + + /* Thumbnails */ + + .ytp-sb-unsubscribe { + background-color: @surface2; + color: @text; + } + .ytp-sb-subscribe { + background-color: @accent; + color: @base; + } + + // Watch progress bar + .ytThumbnailOverlayProgressBarHostWatchedProgressBar { + background-color: @surface2; + } + .ytThumbnailOverlayProgressBarHostWatchedProgressBarSegment { + background: @accent; + } + // Watch progress bar (legacy component) + ytd-thumbnail-overlay-resume-playback-renderer { + background-color: @surface2; + + #progress.ytd-thumbnail-overlay-resume-playback-renderer { + background: @accent; + } + } + + /* Panels, popups, tooltips */ + + .ytp-tooltip-bottom-text { + background: fade(@surface0, 90%); + color: @text; + text-shadow: none; + } + + .ytp-popup { + background: fade(@surface0, 90%); + text-shadow: none; + } + + .ytp-panel-menu, + .ytp-panel-header, + .ytp-panel-footer, + .ytp-menuitem-label, + .ytp-premium-label, + .ytp-menuitem-content, + .ytp-menuitem-label-count, + .ytp-menu-label-secondary, + .ytd-menu-title-renderer { + color: @text; + } + + .ytp-panel-footer-content-link { + color: @accent; + } + + .ytp-panel-back-button { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .ytp-menuitem[aria-checked="false"] .ytp-menuitem-toggle-checkbox { + &::after { + background-color: @overlay1; + } + } + .ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox { + background-color: @surface2; + + &::after { + background-color: @text; + } + } + + .ytp-menuitem { + &:not([aria-disabled="true"]):hover { + background-color: @surface1; + } + } + + /* Video player */ + + // Shorts and video hover preview progress bars + yt-progress-bar { + .ytProgressBarLineProgressBarPlayed, + .ytProgressBarPlayheadProgressBarPlayheadDot { + background: @accent; + } + + .ytProgressBarLineProgressBarHovered, + .ytProgressBarLineProgressBarBackground { + background: @text; // (background) opacity is already adequately set + } + } + + .ytp-cards-button { + .ytp-cards-button-icon { + use { + fill: @black; + } + path { + fill: @white; + } + } + } + .ytp-cards-teaser { + .ytp-cards-teaser-box { + background-color: @surface2; + border-bottom-color: @surface2; + } + .ytp-cards-teaser-text { + color: @text; + } + } + + .html5-video-player { + color: @white; + & when (@oled = 0) { + background-color: @crust; + } + + .ytp-swatch-background-color, + .ytp-play-progress { + background: @accent; + } + + .ytp-svg-fill, + [fill="#fff"] { + fill: @white; + } + + .ytp-volume-slider-handle { + &, + &::before { + background-color: @white; + } + &::after { + background-color: fade(@white, 20%); + } + } + + .ytp-time-current, + .ytp-time-separator, + .ytp-time-duration { + color: @white; + } + + .ytp-live-badge { + &[disabled]::before { + background: @accent; + } + &::before { + background: @overlay0; + } + } + + .ytp-button, + .ytp-subtitles-button { + &[aria-pressed]::after { + background-color: @accent; + } + } + + /* stats for nerds */ + .ytp-sfn { + background: fade(@base, 80%); + color: @text; + } + + .ytp-autonav-toggle-button { + background-color: @surface2; + + &::after { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + background-color: @overlay1; + } + + &[aria-checked="true"] { + &::after { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + background-color: @white; + } + } + } + } + + /* Video highlight */ + ytd-rich-item-renderer.ytd-rich-item-renderer-highlight { + background-color: fade(@accent, 10%); + box-shadow: fade(@accent, 10%) 0 0 0 10px; + } + + #shorts-container { + --yt-spec-static-overlay-text-primary: @white; + + .YtwFactoidRendererLabel { + color: @subtext0; + } + .YtwFactoidRendererValue { + color: @text; + } + + ytd-reel-video-renderer:not([is-watch-while-mode]) { + .ytSpecButtonShapeWithLabelLabel { + color: @subtext1; + } + } + ytd-reel-video-renderer[is-watch-while-mode] + .ytSpecButtonShapeWithLabelLabel { + color: @white; + } + + .ytdVolumeControlsMuteIcon { + color: @white; + } + + /* Buy super thanks button */ + .YtdShortsSuggestedActionStaticHostContainer { + background-color: fade(@black, 60%); + + .YtdShortsSuggestedActionStaticHostLeadingIcon, + .YtdShortsSuggestedActionStaticHostPrimaryText { + color: @text; + } + } + } + // Video/thumbnail renderer overlayed buttons + .ytBadgeShapeThumbnailDefaultRedesign, // Timestamp + // Play Next + .yt-spec-button-shape-next--overlay-dark.yt-spec-button-shape-next--tonal[style="background-color: rgba(0, 0, 0, 0.3);"], + .ytdVolumeControlsBackgroundScrim, // Shorts Volume Slider + .ytInlinePlayerControlsTopRightControlsCircleButton // Homepage + { + background: fade(@black, 60%) !important; + color: @white; + } + + .yt-spec-button-shape-next--overlay-dark.yt-spec-button-shape-next--filled { + background: @accent; + color: @base; + } + + /* Video previews */ + + // Background (on hover) + .ytSpecTouchFeedbackShapeHoverEffect { + background-color: @surface0 !important; + } + // Title + .ytLockupMetadataViewModelTitle { + color: @text !important; + } + // Details + .ytLockupMetadataViewModelMetadata { + color: @subtext0 !important; + } + // Badges (e.g. "CC", "New") + .ytBadgeShapeDefault { + color: @subtext0; + background: @surface1; + + &.ytBadgeShapeModern { + background: none; + } + } + // "Fundraiser" + .ytBadgeShapeCommerce { + color: @green; + } + // "Live" + .ytBadgeShapeThumbnailLive { + background: @accent; + color: @base; + } + + /* Shorts titles and views on homepage */ + .shortsLockupViewModelHostOutsideMetadataEndpoint { + color: @text; + } + .shortsLockupViewModelHostOutsideMetadataSubhead { + color: @subtext0; + } + + /* Buy super thanks bar */ + #progressContainer.tp-yt-paper-progress { + background-color: @mantle; + } + + #comment-chip-container.yt-pdg-comment-chip-renderer, + .slider-knob-inner.tp-yt-paper-slider { + background: @accent; + } + + #primaryProgress.tp-yt-paper-progress { + background: linear-gradient(139deg, @peach, @maroon, @red, @pink); + } + + #container.ytd-pdg-comment-preview-renderer { + background-color: @mantle; + } + + #comment-chip-price.yt-pdg-comment-chip-renderer, + yt-icon.yt-pdg-comment-chip-renderer { + color: @crust; + } + + /* Avatar */ + .ytSpecAvatarShapeLiveRing::after { + background: @accent !important; + } + .ytSpecAvatarShapeLiveBadge { + background-color: @accent; + } + .ytSpecAvatarShapeLiveBadgeText { + color: @base; + } + + /* Channel pages */ + + // Channel name + .ytPageHeaderViewModelHost { + .ytPageHeaderViewModelTitle { + color: @text; + } + + // Subscribers and video statistics + .ytPageHeaderViewModelContentMetadata { + color: @subtext0; + } + + // Handle and verified checkmark + [style$="color: rgb(255, 255, 255);"] { + color: @text !important; + } + } + // Channel bio + .ytTruncatedTextHost { + color: @subtext0; + } + // "...More", "and X more links" + .ytAttributionViewModelSuffix .ytAttributedStringLinkCallToActionColor, + .ytTruncatedTextAbsoluteButton { + color: @text; + } + + // Channel tabs + .ytTabShapeTab { + color: @subtext1; + } + .ytTabShapeTabSelected { + color: @text; + } + .tabGroupShapeSlider { + background-color: @text; + } + .ytTabShapeHost:hover .ytTabShapeTabBar { + background-color: @subtext1; + } + + /* Components */ + + /* Menus and context sheets */ + .ytContextualSheetLayoutHost, ytd-menu-popup-renderer { + background-color: @mantle; + } + .ytListItemViewModelTappable:hover { + background-color: @surface0; + } + .ytPanelHeaderViewModelTitle, + .ytListItemViewModelTitle, + .ytListItemViewModelAccessory { + color: @text; + } + .ytListItemViewModelSubtitle { + color: @subtext1; + } + /* Dialogs */ + .ytSpecDialogLayoutHost { + background-color: @mantle; + + .ytDialogHeaderViewModelText { + color: @text; + } + } + + /* Dropdowns */ + .ytDropdownViewModelTitle { + color: @text; + } + .ytDropdownViewModelLabel { + color: @subtext0; + } + .ytDropdownViewModelSupportError { + color: @red; + } + .ytDropdownViewModelDropdownContainerErrorBorder { + border-color: @red; + } + .ytStandardsTextareaShapeTextareaContainerOutline:focus-within { + border-color: @text; + } + + /* Toggles/Switches */ + + .ytSwitchShapeTrack { + background-color: @surface2; + } + .ytSwitchShapeKnob { + background-color: @mantle; + } + .ytSwitchShapeTrackActive { + background-color: @accent; + } + + /* Textareas */ + .ytStandardsTextareaShapeTextarea { + color: @text; + } + .ytStandardsTextareaShapePlaceholder { + color: @subtext0; + } + .ytStandardsTextareaShapeTextarea::placeholder { + color: transparent !important; // defaults important overrides this + } + + /* Comments */ + .ytSubThreadConnection, + .ytSubThreadContinuation { + border-left-color: @surface1; + } + .ytSubThreadConnection { + border-bottom-color: @surface1; + } + .ytSubThreadHovered > .ytSubThreadThreadline .ytSubThreadConnection, + .ytSubThreadHovered > .ytSubThreadThreadline .ytSubThreadContinuation { + border-left-color: @overlay0; + } + .ytSubThreadHovered > .ytSubThreadThreadline .ytSubThreadConnection { + border-bottom-color: @overlay0; + } + + /* Profile Card */ + // (Click a user's profile picture in the comments to view.) + .ytProfileCardViewModelHost { + background-color: @mantle; + + // Name and handle + .ytProfileIdentityInfoViewModelChannelName, + .ytProfileIdentityInfoViewModelMetadataHandleWithBoldFont { + color: @text; + } + // Verification badge + .ytProfileIdentityInfoViewModelBadge { + filter: @text-filter; + } + // Statistics + .ytProfileIdentityInfoViewModelMetadataContent { + color: @subtext0; + } + + // Subsection (e.g. "On this channel") + .ytProfileInfoViewModelSectionTitle { + color: @text; + } + .ytProfileInfoViewModelSectionSubtitle { + color: @subtext1; + } + .ytProfileInfoViewModelSectionHeartIcon { + filter: @subtext1-filter; + } + + // Subsection - "Recent comments on this channel" + .ytCommentInteractionViewModelVideoTitle { + color: @text; + } + .ytCommentInteractionViewModelCommentContent { + color: @subtext1; + } + } + + /* Live chat replay */ + .ytVideoMetadataCarouselViewModelHost, + .YtVideoMetadataCarouselViewModelHost { + background-color: @surface0; + + .ytCarouselTitleViewModelTitle, + .YtCarouselTitleViewModelTitle, + .yt-core-attributed-string, + .yt-icon-shape { + color: @text; + } + .ytTextCarouselItemViewModelHost { + color: @subtext1; + } + } + + /* Category tag pills */ + .ytChipShapeInactive { + background-color: @surface0; + color: @text; + } + .ytChipShapeActive { + background-color: @accent; + color: @base; + } + } +} + +@-moz-document url-prefix("https://studio.youtube.com") { + :root[dark] { + #catppuccin(@darkFlavor); + } + :root { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + + [src="https://www.gstatic.com/youtube/img/creator/yt_studio_logo_white.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + &, + html, + html[dark], + html[dark][dark], + &[dark], + &[light], + [light], + html[light], + html[light][light] { + --yt-spec-black-pure-alpha-80: (null); + --yt-spec-black-pure-alpha-60: (null); + --yt-spec-black-1-alpha-98: (null); + --yt-spec-black-1-alpha-95: (null); + --iron-icon-fill-color: unset; + + --yt-spec-text-primary: @text; + --ytcp-text-primary: @text; + --ytcp-text-primary-inverse: @base; + --ytcp-static-overlay-text-primary-inverse: @base; + --ytcp-wordmark-text: @text; + --ytcp-text-secondary: @subtext0; + --ytcp-text-disabled: @subtext1; + --ytcp-overlay-text-primary: @overlay2; + + --ytcp-general-background-a: @base; + --yt-spec-base-background: @base; + --yt-spec-black-3: @base; + + --yt-spec-brand-background-solid: @mantle; + --ytcp-brand-background-solid: @mantle; + --yt-spec-raised-background: @mantle; + --ytcp-general-background-b: @mantle; + --ytcp-analytics-reach-background: @mantle; + --yt-spec-black-2: @mantle; + + --ytcp-general-background-c: @crust; + --ytcp-menu-background: @surface0; + + --ytcp-container-border-color: @surface0; + --ytcp-container-hovered-border-color: @surface0; + --ytcp-line-divider-solid: @surface0; + --ytcp-container-border-color-inverse: @subtext0; + --ytcp-line-divider-solid-inverse: @subtext0; + + --ytcp-call-to-action: @accent; + --ytcp-call-to-action-inverse: @mantle; + --ytcp-call-to-action-raised-background: @accent; + --yt-spec-brand-button-background: @accent; + --ytcp-call-to-action-raised-disabled: @surface2; + --ytcp-call-to-action-raised-disabled-background: @overlay2; + --ytcp-call-to-action-raised-background-inverse: @base; + --ytcp-call-to-action-raised-disabled-inverse: @surface2; + --ytcp-call-to-action-raised-disabled-background-inverse: @overlay2; + + --yt-spec-brand-background-primary: @surface0; + + --yt-compact-link-icon-color: @overlay2; + --ytcp-icon-active: @accent; + --ytcp-icon-inactive: @overlay2; + --ytcp-icon-disabled: @overlay0; + --ytcp-icon-active-inverse: @overlay1; + --ytcp-icon-disabled-inverse: @subtext1; + + --ytcp-error-red: @red; + --ytcp-badge-red: @red; + --ytcp-error-red-inverse: @red; + --ytcp-themed-red-inverse: @red; + --ytcp-themed-red: @accent; + --ytcp-themed-blue: @accent; + --ytcp-badge-blue: fade(@accent, 30%); + --ytcp-badge-blue-solid: @blue; + --ytcp-themed-blue-inverse: @blue; + --ytcp-themed-green: @green; + --ytmus-genre-primary-melon: @green; + --ytcp-themed-green-inverse: @green; + --ytcp-analytics-pine: @green; + --ytcp-analytics-pine-inverse: @green; + --ytcp-analytics-parrot: @green; + --ytcp-themed-yellow: @peach; + --ytmus-genre-primary-gold: @peach; + --ytcp-yellow-inverse: @peach; + --ytcp-badge-yellow: @peach; + --ytcp-analytics-yellow: @peach; + --ytcp-analytics-apricot: @peach; + --ytcp-suggested-action: @teal; + --ytcp-analytics-overview: @teal; + --ytcp-analytics-revenue: @teal; + --ytcp-analytics-default-secondary: @teal; + --ytcp-analytics-royal-blue: @lavender; + --ytcp-analytics-reach: @lavender; + --ytcp-analytics-audience: @lavender; + --ytcp-analytics-engagement: @pink; + --ytcp-analytics-revenue-secondary: @pink; + --ytcp-analytics-bubblegum: @flamingo; + --ytmus-genre-primary-ruby: @flamingo; + --ytmus-genre-primary-salmon: @mauve; + --ytmus-genre-primary-orange: @maroon; + --ytmus-genre-primary-sky: @sky; + --ytmus-genre-primary-sky-inverse: @sky; + + --yt-spec-badge-chip-background: @surface1; + --ytcp-focus-inverse: @accent; + --ytcp-focus: @accent; + --ytcp-selected-item: @accent; + --ytcp-hover-item: @overlay2; + --ytcp-chip-active-focus: @accent; + --ytcp-playhead: @overlay2; + --ytcp-playhead-inverse: @overlay2; + } + + ytcp-button.destructive.ytls-error-dialog { + color: @base; + } + + yt-formatted-string.ytls-error-dialog, + tp-yt-iron-icon.ytls-error-dialog { + color: @text; + } + } +} + +@-moz-document domain("m.youtube.com") { + html[darker-dark-theme] { + #catppuccin(@darkFlavor); + } + html { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + + background-color: @base !important; + color: @text !important; + + /* Ambient mode */ + #cinematics { + mix-blend-mode: lighten; + } + + .mobile-topbar-header[data-mode="watch"], + ytm-mobile-topbar-renderer:not([ambient-topbar]) { + background: @base; + } + + .mobile-topbar-header[data-mode="watch"] .mobile-topbar-logo, + .mobile-topbar-header[data-mode="watch"] .mobile-topbar-title, + .mobile-topbar-header[data-mode="watch"] .mobile-topbar-header-content { + color: @text; + } + + .yt-spec-bottom-sheet-layout__bottom-sheet-renderer-container, + .modern-styling { + background: @surface0; + } + + .yt-spec-bottom-sheet-layout__bottom-sheet-layout-header-wrapper { + border-bottom-color: @surface0; + } + + .yt-spec-bottom-sheet-layout__bottom-sheet-content { + color: @text; + } + + /* Comment box */ + .engagement-panel-container { + background: @mantle; + } + + /* Bottom bar */ + ytm-pivot-bar-renderer { + background: @mantle; + color: @text; + border-top-color: @surface0; + } + + /* Chips */ + .chip-bar { + background-color: @base; + } + + [chip-style*="STYLE_"] { + .chip-container { + color: @text; + background-color: @surface0; + } + + &.selected .chip-container { + color: @base; + background-color: @accent; + } + } + + /* Buttons */ + + .yt-spec-touch-feedback-shape--touch-response { + .yt-spec-touch-feedback-shape__fill { + background-color: @text; + } + + .yt-spec-touch-feedback-shape__stroke { + border-color: @surface1; + } + } + + .yt-spec-touch-feedback-shape--overlay-touch-response-inverse + .yt-spec-touch-feedback-shape__fill { + background-color: @accent; + } + .yt-spec-touch-feedback-shape--overlay-touch-response + .yt-spec-touch-feedback-shape__fill { + background-color: @text; + } + } +} diff --git a/styles/zen-browser-docs/README.md b/styles/zen-browser-docs/README.md new file mode 100644 index 0000000000..6b3656e6cd --- /dev/null +++ b/styles/zen-browser-docs/README.md @@ -0,0 +1,35 @@ + + + +

+ Logo
+ + Catppuccin for Zen Browser Docs + +

+ +

+ + +

+ +## Usage + +See [the userstyle usage instructions](https://userstyles.catppuccin.com/getting-started/usage/). + + +## 💝 Current Maintainer +- [ashish0kumar](https://github.com/ashish0kumar) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/zen-browser-docs/catppuccin.user.less b/styles/zen-browser-docs/catppuccin.user.less new file mode 100644 index 0000000000..43362af190 --- /dev/null +++ b/styles/zen-browser-docs/catppuccin.user.less @@ -0,0 +1,98 @@ +/* ==UserStyle== +@name Zen Browser Docs Catppuccin +@namespace github.com/catppuccin/userstyles/styles/zen-browser-docs +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/zen-browser-docs +@version 2025.09.06 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/zen-browser-docs/catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Azen-browser-docs +@description Soothing pastel theme for Zen Browser Docs +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("zen-browser.app") { + :root[data-theme="light"], + .light { + #catppuccin(@lightFlavor); + } + + :root[data-theme="dark"], + .dark { + #catppuccin(@darkFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + --zen-paper: @mantle; + --zen-dark: @subtext1; + --zen-subtle: @surface0; + + --color-fd-background: @mantle; + --color-fd-popover: @mantle; + --color-fd-secondary: @base; + --color-fd-accent: @surface0; + --color-fd-card: @crust; + --color-fd-border: @surface0; + --color-fd-ring: @overlay0; + + --color-fd-primary: @accent; + --color-fd-muted: fade(@subtext1, 5%); + + --color-fd-foreground: @subtext1; + --color-fd-accent-foreground: @subtext1; + --color-fd-card-foreground: @subtext1; + --color-fd-primary-foreground: @subtext1; + --color-fd-secondary-foreground: @subtext1; + --color-fd-popover-foreground: @subtext1; + --color-fd-muted-foreground: @subtext1; + + --color-blue-500: @blue; + --color-red-500: @red; + --color-orange-500: @peach; + + .text-coral, + .zen-link, + .extra a, + .text-\[\#fe846b\], + .text-\[\#f7a74b\], + .text-\[\#f76f53\], + .hover\:text-coral:hover { + color: @accent; + } + + .text-\[\#e3401f\], + .dark\:text-\[\#D02908\] { + color: @red; + } + + .hover\:text-fd-accent-foreground:hover { + color: @text; + } + + .dark\:text-white\/50 { + color: @subtext0; + } + + #nd-sidebar { + --color-fd-secondary: @base; + --color-fd-muted: fade(@subtext1, 5%); + --color-fd-muted-foreground: @text; + } + + img[src="/icon.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + } +} diff --git a/template/assets/catwalk.webp b/template/assets/catwalk.webp deleted file mode 100644 index d58ea81f46..0000000000 --- a/template/assets/catwalk.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:676bd77f20e746524ea7b3ccab01bb124546246d5f880e754f61109fc4191305 -size 21134 diff --git a/template/assets/frappe.webp b/template/assets/frappe.webp deleted file mode 100644 index 0e46797302..0000000000 --- a/template/assets/frappe.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0763288e659734b16ee6229ca32eb479254660067ace7e290ad45bf134a8b3fb -size 17278 diff --git a/template/assets/latte.webp b/template/assets/latte.webp deleted file mode 100644 index 22cf7f5e69..0000000000 --- a/template/assets/latte.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f1c7701ef8baf26eb9267e72579b953a6a8ad4c33e67dce265e1b0a89139a0c4 -size 17464 diff --git a/template/assets/macchiato.webp b/template/assets/macchiato.webp deleted file mode 100644 index ffb34e8497..0000000000 --- a/template/assets/macchiato.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ec8cd797844f7fe2e207c43d4064a2c55804efb08d781ade62f5fb503ff8ad89 -size 17166 diff --git a/template/assets/mocha.webp b/template/assets/mocha.webp deleted file mode 100644 index ec83bf3369..0000000000 --- a/template/assets/mocha.webp +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:992d3df4cd0a18592445d9c9daebaa80756d81ef6b0ec2adc751792b0cdbf6f2 -size 17404 diff --git a/template/catppuccin.user.css b/template/catppuccin.user.css deleted file mode 100644 index da880872f1..0000000000 --- a/template/catppuccin.user.css +++ /dev/null @@ -1,85 +0,0 @@ -/* ==UserStyle== -@name Catppuccin -@namespace github.com/catppuccin/userstyles/styles/ -@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ -@version 0.0.1 -@updateURL https://github.com/catppuccin/userstyles/raw/main/styles//catppuccin.user.css -@description Soothing pastel theme for -@author Catppuccin -@license MIT - -@preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] -@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire*", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] -==/UserStyle== */ -/* If you need any help with the information above, please see: https://github.com/openstyles/stylus/wiki/Writing-UserCSS#var */ - -/* Apply Theme To Site - * For help with URL rules, please see https://github.com/openstyles/stylus/wiki/Writing-styles#valid--moz-document-rules */ -@-moz-document regexp('') { - - /* Palette Lookup Table - * Defining the Colors per Flavor called via: - * @catppuccin['Flavor']['Color'] */ - @catppuccin: { - @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; } - @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; } - @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; } - @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; } - } - - /* Userstyle as Mixin - * This takes the following Parameters: - * @lookup – which is the desired Flavor - * @accent – which is the desired Accent Color */ - #catppuccin(@lookup, @accent) { - - /* Regular Colors are called with a single `@` as they - * are referencing the Variable directly. */ - background-color: @catppuccin[@@lookup][@base]; - - /* The Accent Color is called with a double `@@` because - * it's referencing the @accent Variable passed to the Mixin. */ - color: @catppuccin[@@lookup][@@accent]; - - /* If you need to specify an overwrite specific to a Flavor - * like Latte, you can use a `when` guard clause. */ - & when (@lookup = latte) { - /* your code for latte */ - } - - /* You can also negate the statement above by using - * a `when not` guard clause. */ - & when not (@lookup = latte) { - /* your code for frappe, macchiato and mocha */ - } - - } - - /* Application of the Theme - * The values below are examples and may need to be adapted. - * To apply the correct Theming call the above defined Mixin and pass - * your desired Flavor and Accent Color to it. These are usually - * populated through the `@var`s in the Meta Block. */ - // synced colorscheme - @media (prefers-color-scheme: light) { - .no-theme { - #catppuccin(@lightFlavor, @accentColor); - } - } - @media (prefers-color-scheme: dark) { - .no-theme { - #catppuccin(@darkFlavor, @accentColor); - } - } - - // manually set colorscheme - .light-theme { - #catppuccin(@lightFlavor, @accentColor); - } - .dark-theme { - #catppuccin(@darkFlavor, @accentColor); - } - -} /* /@-moz-document */ diff --git a/template/catppuccin.user.less b/template/catppuccin.user.less new file mode 100644 index 0000000000..8963dd6a92 --- /dev/null +++ b/template/catppuccin.user.less @@ -0,0 +1,67 @@ +/* ==UserStyle== +@name Catppuccin +@namespace github.com/catppuccin/userstyles/styles/ +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ +@version 2000.01.01 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles//catppuccin.user.less +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3A +@description Soothing pastel theme for +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@-moz-document domain("") { + /* This section applies the light/dark themes automatically based on the user's system theme. + Use the below example CSS to start if the website you are theming doesn't have a light/dark mode toggle. + For an actual example of this, see https://github.com/catppuccin/userstyles/blob/39288b593278e5efa48007d5fc001292cf910672/styles/brave-search/catppuccin.user.css#L16-L29. + */ + :root { + @media (prefers-color-scheme: light) { + #catppuccin(@lightFlavor); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkFlavor); + } + } + + /* If the website you are theming *does* have a light/dark mode toggle, + you can conditionally enable light/dark flavors by targeting whatever + attribute that website uses to indicate the theme. *The example below gives you an idea of what + to look for. The website you are theming may use a class-based approach (e.g. :root.theme-dark), + or any of the myriad of other methods like this.* + Use the below example CSS to start if this is the case. + For an actual example of this, see https://github.com/catppuccin/userstyles/blob/39288b593278e5efa48007d5fc001292cf910672/styles/youtube/catppuccin.user.css#L21-L30. + */ + :root[data-theme="dark"] { + #catppuccin(@darkFlavor); + } + :root[data-theme="light"] { + #catppuccin(@lightFlavor); + } + + #catppuccin(@flavor) { + #lib.palette(); + #lib.defaults(); + + /* Start styling your website here: */ + background-color: @base; + + /* If you need to specify an overwrite specific to a flavor + * (e.g. only when the flavor is set to latte), you can use a `when` guard clause. */ + & when (@flavor = latte) { + /* ... */ + } + /* You can also negate the statement above by using + * a `when not` guard clause. */ + & when not(@flavor = latte) { + /* ... */ + } + } +}