commit 8cfccfd83756212f3e6821417b419f175d0414c7 Author: sgoudham Date: Sun Feb 26 01:56:56 2023 +0000 feat: launch `catppuccin/userstyles` Co-authored-by: rubyowo Co-authored-by: Andreas Grafen Co-authored-by: winston Co-authored-by: Carsten Kragelund Co-authored-by: Andreas Grafen Co-authored-by: Alaina <68250402+alaidriel@users.noreply.github.com> Co-authored-by: jolheiser diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..d86ac02 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,34 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# EditorConfig is awesome: https://EditorConfig.org + +root = true + +[*] +charset = utf-8 +indent_size = 2 +indent_style = space +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true + +# go +[*.go] +indent_style = tab +indent_size = 4 + +# python +[*.{ini,py,py.tpl,rst}] +indent_size = 4 + +# rust +[*.rs] +indent_size = 4 + +# documentation, utils +[*.{md,mdx,diff}] +trim_trailing_whitespace = false + +# windows shell scripts +[*.{cmd,bat,ps1}] +end_of_line = crlf diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..e5e4e99 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +*.webp filter=lfs diff=lfs merge=lfs -text +*.png filter=lfs diff=lfs merge=lfs -text diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS new file mode 100644 index 0000000..b60e13d --- /dev/null +++ b/.github/CODEOWNERS @@ -0,0 +1,48 @@ +# THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND. +# /styles/anilist @AnubisNekhet +# +# /styles/brave-search @ndsboy +# +# /styles/cinny @jn-sena +# +# /styles/codeberg @justTOBBI +# +# /styles/deepl @watatomo +# +# /styles/elk @ryanccn +# +# /styles/github @Pocco81 @GlowingUmbreon +# +# /styles/hacker-news @lucasmelin +# +# /styles/ichi.moe @watatomo +# +# /styles/invidious @nekowinston +# +# /styles/lastfm @AnubisNekhet +# +# /styles/libreddit @isabelroses +# +# /styles/mastodon @isabelroses +# +# /styles/modrinth @thismoon +# +# /styles/nitter @AnubisNekhet +# +# /styles/nixos-search @alaidriel +# +# /styles/proton @soya-daizu +# +# /styles/reddit @jayylmao +# +# /styles/searxng @Sekki21956 @ryanccn +# +# /styles/tutanota @ryanccn +# +# /styles/twitch @GitMuslim @isabelroses +# +# /styles/vercel @ryanccn +# +# /styles/wikiwand @tnixc +# +# /styles/youtube @isabelroses \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 0000000..2cf85cb --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,11 @@ +blank_issues_enabled: false +contact_links: + - name: Theme Request + url: https://github.com/catppuccin/catppuccin/discussions/new?category=port-requests + about: Request a website to be themed here! + - name: Theme Review + url: https://github.com/catppuccin/userstyles/compare + about: Already made a theme? Raise a Pull Request here! + - 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 diff --git a/.github/ISSUE_TEMPLATE/meta.yml b/.github/ISSUE_TEMPLATE/meta.yml new file mode 100644 index 0000000..01bb072 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/meta.yml @@ -0,0 +1,17 @@ +name: Meta Issue +description: Report your issues with the repository here! +labels: [meta] +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: textarea + attributes: + label: Describe your issue. + description: "Issues relating to individual themes should be raised via a [Userstyle Issue](https://github.com/catppuccin/userstyles/issues/new?assignees=&labels=&template=userstyle.yml) instead." + validations: + required: true diff --git a/.github/ISSUE_TEMPLATE/userstyle.yml b/.github/ISSUE_TEMPLATE/userstyle.yml new file mode 100644 index 0000000..a415f0e --- /dev/null +++ b/.github/ISSUE_TEMPLATE/userstyle.yml @@ -0,0 +1,65 @@ +# 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 labelled!" + multiple: true + options: + - lbl:anilist + - lbl:brave-search + - lbl:cinny + - lbl:codeberg + - lbl:deepl + - lbl:elk + - lbl:github + - lbl:hacker-news + - lbl:ichi.moe + - lbl:invidious + - lbl:lastfm + - lbl:libreddit + - lbl:mastodon + - lbl:modrinth + - lbl:nitter + - lbl:nixos-search + - lbl:proton + - lbl:reddit + - lbl:searxng + - lbl:tutanota + - lbl:twitch + - lbl:vercel + - lbl:wikiwand + - lbl:youtube + 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/.github/issue-labeler.yml b/.github/issue-labeler.yml new file mode 100644 index 0000000..de9cd33 --- /dev/null +++ b/.github/issue-labeler.yml @@ -0,0 +1,49 @@ +# THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND. +anilist: + - '(lbl:anilist)' +brave-search: + - '(lbl:brave-search)' +cinny: + - '(lbl:cinny)' +codeberg: + - '(lbl:codeberg)' +deepl: + - '(lbl:deepl)' +elk: + - '(lbl:elk)' +github: + - '(lbl:github)' +hacker-news: + - '(lbl:hacker-news)' +ichi.moe: + - '(lbl:ichi.moe)' +invidious: + - '(lbl:invidious)' +lastfm: + - '(lbl:lastfm)' +libreddit: + - '(lbl:libreddit)' +mastodon: + - '(lbl:mastodon)' +modrinth: + - '(lbl:modrinth)' +nitter: + - '(lbl:nitter)' +nixos-search: + - '(lbl:nixos-search)' +proton: + - '(lbl:proton)' +reddit: + - '(lbl:reddit)' +searxng: + - '(lbl:searxng)' +tutanota: + - '(lbl:tutanota)' +twitch: + - '(lbl:twitch)' +vercel: + - '(lbl:vercel)' +wikiwand: + - '(lbl:wikiwand)' +youtube: + - '(lbl:youtube)' \ No newline at end of file diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml new file mode 100644 index 0000000..af3a5f4 --- /dev/null +++ b/.github/pr-labeler.yml @@ -0,0 +1,25 @@ +# THIS FILE IS AUTOGENERATED. DO NOT EDIT IT BY HAND. +anilist: styles/anilist/**/* +brave-search: styles/brave-search/**/* +cinny: styles/cinny/**/* +codeberg: styles/codeberg/**/* +deepl: styles/deepl/**/* +elk: styles/elk/**/* +github: styles/github/**/* +hacker-news: styles/hacker-news/**/* +ichi.moe: styles/ichi.moe/**/* +invidious: styles/invidious/**/* +lastfm: styles/lastfm/**/* +libreddit: styles/libreddit/**/* +mastodon: styles/mastodon/**/* +modrinth: styles/modrinth/**/* +nitter: styles/nitter/**/* +nixos-search: styles/nixos-search/**/* +proton: styles/proton/**/* +reddit: styles/reddit/**/* +searxng: styles/searxng/**/* +tutanota: styles/tutanota/**/* +twitch: styles/twitch/**/* +vercel: styles/vercel/**/* +wikiwand: styles/wikiwand/**/* +youtube: styles/youtube/**/* \ No newline at end of file diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 0000000..fac764f --- /dev/null +++ b/.github/pull_request_template.md @@ -0,0 +1,29 @@ + + + +## ๐ŸŽ‰ 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 made sure to update the [`userstyles.yml`](https://github.com/catppuccin/userstyles/blob/main/src/userstyles.yml) file with information about the new directory. +- [ ] I have included the following files: + - `catppuccin.user.css` - all stylus code. + - `mocha.webp`, `macchiato.webp`, `frappe.webp` and `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). diff --git a/.github/workflows/generate.yml b/.github/workflows/generate.yml new file mode 100644 index 0000000..e109612 --- /dev/null +++ b/.github/workflows/generate.yml @@ -0,0 +1,41 @@ +name: Generate Health Files + +on: + workflow_dispatch: + push: + paths: + - "src/**/*" + +env: + DENO_DIR: deno_cache + +jobs: + generate-health-files: + runs-on: ubuntu-latest + name: Re-generate README, CODEOWNERS, pr-labeler.yml & issue-labeler.yml + steps: + - uses: actions/checkout@v3 + with: + 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 README, CODEOWNERS, pr-labeler.yml & issue-labeler.yml + working-directory: src/generate + run: ./generate.ts + + - name: Push Changes + uses: stefanzweifel/git-auto-commit-action@v4 + with: + commit_message: "chore: README, CODEOWNERS & labeler.yml" + 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 new file mode 100644 index 0000000..db4eac0 --- /dev/null +++ b/.github/workflows/issues.yml @@ -0,0 +1,19 @@ +name: Issue Labeler + +on: + workflow_dispatch: + issues: + types: [opened, edited] + +jobs: + triage: + 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 \ No newline at end of file diff --git a/.github/workflows/pull-requests.yml b/.github/workflows/pull-requests.yml new file mode 100644 index 0000000..a62a49e --- /dev/null +++ b/.github/workflows/pull-requests.yml @@ -0,0 +1,17 @@ +name: Pull Request Labeler + +on: + pull_request_target: + +jobs: + triage: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/labeler@v4.0.3 + 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/.gitignore b/.gitignore new file mode 100644 index 0000000..e75af5e --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +deno_cache/ +node_modules/ +.DS_Store +.idea diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..006383b --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2021 Catppuccin + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..5891159 --- /dev/null +++ b/README.md @@ -0,0 +1,132 @@ +

+ Logo
+ + Catppuccin Userstyles + +

+ +
+ Install + ยท + Contributing + ยท + Userstyles +
+ +

+ +

+ +

+ + Stargazers + + Releases + + Issues +

+ +

+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. +

+ +  + +## ๐Ÿ–ฅ๏ธ 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 + +- [Vercel](styles/vercel) + +
+
+๐Ÿ”Ž Search Engines + +- [Brave Search](styles/brave-search) +- [NixOS Search](styles/nixos-search) +- [SearXNG](styles/searxng) + +
+
+๐Ÿ’ฌ Messaging + +- [Cinny](styles/cinny) + +
+
+๐Ÿ—‚๏ธ Productivity + +- [Codeberg](styles/codeberg) +- [DeepL](styles/deepl) +- [GitHub](styles/github) +- [ichi.moe](styles/ichi.moe) +- [Proton](styles/proton) +- [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) +- [Twitch](styles/twitch) +- [YouTube](styles/youtube) + +
+
+๐ŸŒˆ Leisure + +- [AniList, AniChart](styles/anilist) +- [Last.fm](styles/lastfm) + +
+
+๐ŸŽฎ Games + +- [Modrinth](styles/modrinth) + +
+ + +  + +

+

Copyright © 2021-present Catppuccin Org diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md new file mode 100644 index 0000000..5bc56a3 --- /dev/null +++ b/docs/CONTRIBUTING.md @@ -0,0 +1,20 @@ +# 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/browsers.md b/docs/browsers.md new file mode 100644 index 0000000..7898338 --- /dev/null +++ b/docs/browsers.md @@ -0,0 +1,26 @@ +# 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/ +
+ +TODO: Populate this document with common issues that are run into with these browsers diff --git a/docs/userstyle-creation.md b/docs/userstyle-creation.md new file mode 100644 index 0000000..9561dd6 --- /dev/null +++ b/docs/userstyle-creation.md @@ -0,0 +1,98 @@ +

+

๐ŸŽจ 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 + +Creating userstyles should be very simple if you follow the instructions given 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/`. +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/src/generate/deno.json b/src/generate/deno.json new file mode 100644 index 0000000..f8a8104 --- /dev/null +++ b/src/generate/deno.json @@ -0,0 +1,3 @@ +{ + "lock": "deno.lock" +} diff --git a/src/generate/deno.lock b/src/generate/deno.lock new file mode 100644 index 0000000..c8d7dbb --- /dev/null +++ b/src/generate/deno.lock @@ -0,0 +1,150 @@ +{ + "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/generate/types.d.ts": "d0c5ac99cbb0d55d54efd56c9d7d4dcae1ef690ed3f1d5ecf7eb56c56eb0396a", + "https://raw.githubusercontent.com/catppuccin/catppuccin/main/resources/ports.schema.json": "58dce2a85f75f4afedd48e69870dc42c43b08cbb9cf683c1c25bf9f2fd354287" + }, + "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 new file mode 100644 index 0000000..ede2c4b --- /dev/null +++ b/src/generate/deps.ts @@ -0,0 +1,10 @@ +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, walkSync, portsSchema, schema }; diff --git a/src/generate/generate.ts b/src/generate/generate.ts new file mode 100755 index 0000000..7bb316a --- /dev/null +++ b/src/generate/generate.ts @@ -0,0 +1,269 @@ +#!/usr/bin/env -S deno run --allow-env --allow-read --allow-write --allow-net +import { + Ajv, + parseYaml, + path, + portsSchema, + schema, + PortCategories, +} from "./deps.ts"; +import { + FAQ, + Userstyle, + CurrentMaintainers, + PastMaintainers, + Userstyles, + Usage, + ApplicationLink, + Name, +} 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]) => { + return `${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#\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("\n ")}` +); +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 new file mode 100644 index 0000000..c000994 --- /dev/null +++ b/src/generate/templates/userstyle-issue.yml @@ -0,0 +1,42 @@ +# 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 labelled!" + 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/templates/userstyle.md b/src/generate/templates/userstyle.md new file mode 100644 index 0000000..00bd607 --- /dev/null +++ b/src/generate/templates/userstyle.md @@ -0,0 +1,55 @@ + + + +

+ Logo
+ + $TITLE + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ +$USAGE + +$FAQ + +$COLLABORATORS + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/src/generate/types.d.ts b/src/generate/types.d.ts new file mode 100644 index 0000000..0c08afe --- /dev/null +++ b/src/generate/types.d.ts @@ -0,0 +1,180 @@ +/* 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 new file mode 100644 index 0000000..0bc55a4 --- /dev/null +++ b/src/userstyles.schema.json @@ -0,0 +1,203 @@ +{ + "$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 new file mode 100644 index 0000000..4ef1dd4 --- /dev/null +++ b/src/userstyles.yml @@ -0,0 +1,261 @@ +collaborators: + - &anubisnekhet + url: https://github.com/AnubisNekhet + - &ndsboy + url: https://github.com/ndsboy + - &jn-sena + name: jan 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 + +userstyles: + 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] + cinny: + name: Cinny + category: messaging + readme: + app-link: "https://github.com/cinnyapo/cinny" + 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] + deepl: + name: DeepL + category: productivity + readme: + app-link: "https://deepl.com" + current-maintainers: [*watatomo] + 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] + 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] + 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] + 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 `Proton` if you are using the Latte flavor, otherwise set it to `Carbon`" + current-maintainers: [*soya-daizu] + 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] + 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] + 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=userstyles.schema.json diff --git a/styles/anilist/README.md b/styles/anilist/README.md new file mode 100644 index 0000000..d1863e2 --- /dev/null +++ b/styles/anilist/README.md @@ -0,0 +1,59 @@ + + + +

+ Logo
+ + Catppuccin for AniList, AniChart + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ +## Usage +> **Note**
+> This theme applies to [AniChart](https://anichart.net/) as well, which is an extension of AniList. + + + + +## ๐Ÿ’ Current Maintainer(s) +- [AnubisNekhet](https://github.com/AnubisNekhet) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/anilist/assets/anichart/catwalk.webp b/styles/anilist/assets/anichart/catwalk.webp new file mode 100644 index 0000000..7f9a364 --- /dev/null +++ b/styles/anilist/assets/anichart/catwalk.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..7d0d7b2 --- /dev/null +++ b/styles/anilist/assets/anichart/frappe.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..93f6f16 --- /dev/null +++ b/styles/anilist/assets/anichart/latte.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..7b57182 --- /dev/null +++ b/styles/anilist/assets/anichart/macchiato.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..802f259 --- /dev/null +++ b/styles/anilist/assets/anichart/mocha.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..1d37537 --- /dev/null +++ b/styles/anilist/assets/catwalk.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..741e09c --- /dev/null +++ b/styles/anilist/assets/frappe.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..40c37a1 --- /dev/null +++ b/styles/anilist/assets/latte.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..00d2c9d --- /dev/null +++ b/styles/anilist/assets/macchiato.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..bbd7b08 --- /dev/null +++ b/styles/anilist/assets/mocha.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..a1d9996 --- /dev/null +++ b/styles/anilist/catppuccin.user.css @@ -0,0 +1,981 @@ +/* ==UserStyle== +@name AniList Catppuccin +@namespace github.com/catppuccin/userstyles/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 + +@preprocessor less +@var select lightFlavour "Light Flavour" ["latte:Latte*", "frappe:Frappรฉ", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavour "Dark Flavour" ["latte:Latte", "frappe:Frappรฉ", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColour "Accent Colour" [ "rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green*", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Grey" ] +@var select contrastColour "Contrast Colour" [ "rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green*", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Grey" ] +==/UserStyle== */ +@-moz-document domain("anilist.co") { + + body:not(.site-theme-dark) { + #catppuccin(@lightFlavour, @accentColour); + } + .site-theme-dark { + #catppuccin(@darkFlavour, @accentColour); + } + + @catppuccin: { + @latte: { + @rosewater: #dc8a78; + @flamingo: #dd7878; + @pink: #ea76cb; + @mauve: #8839ef; + @red: #d20f39; + @maroon: #e64553; + @peach: #fe640b; + @yellow: #df8e1d; + @green: #40a02b; + @teal: #179299; + @sky: #04a5e5; + @sapphire: #209fb5; + @blue: #1e66f5; + @lavender: #7287fd; + @text: #4c4f69; + @subtext1: #5c5f77; + @subtext0: #6c6f85; + @overlay2: #7c7f93; + @overlay1: #8c8fa1; + @overlay0: #9ca0b0; + @surface2: #acb0be; + @surface1: #bcc0cc; + @surface0: #ccd0da; + @base: #eff1f5; + @mantle: #e6e9ef; + @crust: #dce0e8; + } + @frappe: { + @rosewater: #f2d5cf; + @flamingo: #eebebe; + @pink: #f4b8e4; + @mauve: #ca9ee6; + @red: #e78284; + @maroon: #ea999c; + @peach: #ef9f76; + @yellow: #e5c890; + @green: #a6d189; + @teal: #81c8be; + @sky: #99d1db; + @sapphire: #85c1dc; + @blue: #8caaee; + @lavender: #babbf1; + @text: #c6d0f5; + @subtext1: #b5bfe2; + @subtext0: #a5adce; + @overlay2: #949cbb; + @overlay1: #838ba7; + @overlay0: #737994; + @surface2: #626880; + @surface1: #51576d; + @surface0: #414559; + @base: #303446; + @mantle: #292c3c; + @crust: #232634; + } + @macchiato: { + @rosewater: #f4dbd6; + @flamingo: #f0c6c6; + @pink: #f5bde6; + @mauve: #c6a0f6; + @red: #ed8796; + @maroon: #ee99a0; + @peach: #f5a97f; + @yellow: #eed49f; + @green: #a6da95; + @teal: #8bd5ca; + @sky: #91d7e3; + @sapphire: #7dc4e4; + @blue: #8aadf4; + @lavender: #b7bdf8; + @text: #cad3f5; + @subtext1: #b8c0e0; + @subtext0: #a5adcb; + @overlay2: #939ab7; + @overlay1: #8087a2; + @overlay0: #6e738d; + @surface2: #5b6078; + @surface1: #494d64; + @surface0: #363a4f; + @base: #24273a; + @mantle: #1e2030; + @crust: #181926; + } + @mocha: { + @rosewater: #f5e0dc; + @flamingo: #f2cdcd; + @pink: #f5c2e7; + @mauve: #cba6f7; + @red: #f38ba8; + @maroon: #eba0ac; + @peach: #fab387; + @yellow: #f9e2af; + @green: #a6e3a1; + @teal: #94e2d5; + @sky: #89dceb; + @sapphire: #74c7ec; + @blue: #89b4fa; + @lavender: #b4befe; + @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][@@accentColour]; + @contrast-color: @catppuccin[@@lookup][@@contrastColour]; + /* 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(@lightFlavour, @accentColour); + } + .site-theme-dark { + #catppuccin(@darkFlavour, @accentColour); + } + + @catppuccin: { + @latte: { + @rosewater: #dc8a78; + @flamingo: #dd7878; + @pink: #ea76cb; + @mauve: #8839ef; + @red: #d20f39; + @maroon: #e64553; + @peach: #fe640b; + @yellow: #df8e1d; + @green: #40a02b; + @teal: #179299; + @sky: #04a5e5; + @sapphire: #209fb5; + @blue: #1e66f5; + @lavender: #7287fd; + @text: #4c4f69; + @subtext1: #5c5f77; + @subtext0: #6c6f85; + @overlay2: #7c7f93; + @overlay1: #8c8fa1; + @overlay0: #9ca0b0; + @surface2: #acb0be; + @surface1: #bcc0cc; + @surface0: #ccd0da; + @base: #eff1f5; + @mantle: #e6e9ef; + @crust: #dce0e8; + } + @frappe: { + @rosewater: #f2d5cf; + @flamingo: #eebebe; + @pink: #f4b8e4; + @mauve: #ca9ee6; + @red: #e78284; + @maroon: #ea999c; + @peach: #ef9f76; + @yellow: #e5c890; + @green: #a6d189; + @teal: #81c8be; + @sky: #99d1db; + @sapphire: #85c1dc; + @blue: #8caaee; + @lavender: #babbf1; + @text: #c6d0f5; + @subtext1: #b5bfe2; + @subtext0: #a5adce; + @overlay2: #949cbb; + @overlay1: #838ba7; + @overlay0: #737994; + @surface2: #626880; + @surface1: #51576d; + @surface0: #414559; + @base: #303446; + @mantle: #292c3c; + @crust: #232634; + } + @macchiato: { + @rosewater: #f4dbd6; + @flamingo: #f0c6c6; + @pink: #f5bde6; + @mauve: #c6a0f6; + @red: #ed8796; + @maroon: #ee99a0; + @peach: #f5a97f; + @yellow: #eed49f; + @green: #a6da95; + @teal: #8bd5ca; + @sky: #91d7e3; + @sapphire: #7dc4e4; + @blue: #8aadf4; + @lavender: #b7bdf8; + @text: #cad3f5; + @subtext1: #b8c0e0; + @subtext0: #a5adcb; + @overlay2: #939ab7; + @overlay1: #8087a2; + @overlay0: #6e738d; + @surface2: #5b6078; + @surface1: #494d64; + @surface0: #363a4f; + @base: #24273a; + @mantle: #1e2030; + @crust: #181926; + } + @mocha: { + @rosewater: #f5e0dc; + @flamingo: #f2cdcd; + @pink: #f5c2e7; + @mauve: #cba6f7; + @red: #f38ba8; + @maroon: #eba0ac; + @peach: #fab387; + @yellow: #f9e2af; + @green: #a6e3a1; + @teal: #94e2d5; + @sky: #89dceb; + @sapphire: #74c7ec; + @blue: #89b4fa; + @lavender: #b4befe; + @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][@@accentColour]; + @contrast-color: @catppuccin[@@lookup][@@contrastColour]; + /* 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; + } + } +} \ No newline at end of file diff --git a/styles/brave-search/README.md b/styles/brave-search/README.md new file mode 100644 index 0000000..3000979 --- /dev/null +++ b/styles/brave-search/README.md @@ -0,0 +1,57 @@ + + + +

+ Logo
+ + Catppuccin for Brave Search + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ +## Usage +Set theme to dark or light in Brave Search settings, the automatic setting will not work + + + +## ๐Ÿ’ Current Maintainer(s) +- [ndsboy](https://github.com/ndsboy) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/brave-search/assets/catwalk.webp b/styles/brave-search/assets/catwalk.webp new file mode 100644 index 0000000..516a907 --- /dev/null +++ b/styles/brave-search/assets/catwalk.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..786481f --- /dev/null +++ b/styles/brave-search/assets/frappe.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..efd2fc1 --- /dev/null +++ b/styles/brave-search/assets/latte.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..b37ed1b --- /dev/null +++ b/styles/brave-search/assets/macchiato.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..26f8780 --- /dev/null +++ b/styles/brave-search/assets/mocha.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..2c0134a --- /dev/null +++ b/styles/brave-search/catppuccin.user.css @@ -0,0 +1,295 @@ +/* ==UserStyle== +@name Brave Search Catppuccin +@namespace github.com/catppuccin/userstyles/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 +@preprocessor less +@var select lightTheme "Light Theme" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkTheme "Dark Theme" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] +==/UserStyle== */ +@-moz-document domain("search.brave.com") { + :root.light { + #catppuccin(@lightTheme); + } + :root.dark { + #catppuccin(@darkTheme); + } + :root:not(.light):not(.dark) { + @media (prefers-color-scheme: light) { + #catppuccin(@lightTheme); + } + @media (prefers-color-scheme: dark) { + #catppuccin(@darkTheme); + } + } + + @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/cinny/README.md b/styles/cinny/README.md new file mode 100644 index 0000000..9d73df3 --- /dev/null +++ b/styles/cinny/README.md @@ -0,0 +1,56 @@ + + + +

+ Logo
+ + Catppuccin for Cinny + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ + + + + +## ๐Ÿ’ Current Maintainer(s) +- [jan Sena](https://github.com/jn-sena) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/cinny/assets/catwalk.webp b/styles/cinny/assets/catwalk.webp new file mode 100644 index 0000000..92655d5 --- /dev/null +++ b/styles/cinny/assets/catwalk.webp @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:202a6932c193ea08edb1df012f7c0d7310a9f1b5856ba0502f555b9a2e88e7a1 +size 66438 diff --git a/styles/cinny/catppuccin.user.css b/styles/cinny/catppuccin.user.css new file mode 100644 index 0000000..cf4c747 --- /dev/null +++ b/styles/cinny/catppuccin.user.css @@ -0,0 +1,142 @@ +/* ==UserStyle== +@name Cinny Catppuccin +@namespace github.com/catppuccin/userstyles/styles/cinny +@version 2.1.1 +@description Soothing pastel theme for Cinny +@author Catppuccin +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/cinny/catppuccin.user.css + +@preprocessor less +@var select lightFlavor "Light Flavor" [ "latte: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" ] +==/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: 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 \ No newline at end of file diff --git a/styles/codeberg/README.md b/styles/codeberg/README.md new file mode 100644 index 0000000..dc00a9b --- /dev/null +++ b/styles/codeberg/README.md @@ -0,0 +1,58 @@ + + + +

+ Logo
+ + Catppuccin for Codeberg + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ + + +## ๐Ÿ™‹ 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(s) +- [justTOBBI](https://github.com/justTOBBI) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/codeberg/assets/catwalk.webp b/styles/codeberg/assets/catwalk.webp new file mode 100644 index 0000000..764260e --- /dev/null +++ b/styles/codeberg/assets/catwalk.webp @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e812926713462d927ef7f5f15de39f7c8a1fb4179aaa4a61f48a863c82a48979 +size 118212 diff --git a/styles/codeberg/catppuccin.user.css b/styles/codeberg/catppuccin.user.css new file mode 100644 index 0000000..a70d937 --- /dev/null +++ b/styles/codeberg/catppuccin.user.css @@ -0,0 +1,528 @@ +/* ==UserStyle== +@name Catppuccin Codeberg +@namespace github.com/catppuccin/userstyles/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 +@preprocessor stylus +@var select theme "Theme" ["Latte", "Frappe", "Macchiato", "Mocha*"] +@var checkbox navbar-color "Use dark navbar-color" 0 +==/UserStyle== */ + +@-moz-document domain("codeberg.org") { + if (theme=="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 (theme=="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 (theme=="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 (theme=="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/deepl/README.md b/styles/deepl/README.md new file mode 100644 index 0000000..bc6a6d0 --- /dev/null +++ b/styles/deepl/README.md @@ -0,0 +1,56 @@ + + + +

+ Logo
+ + Catppuccin for DeepL + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ + + + + +## ๐Ÿ’ Current Maintainer(s) +- [Ren](https://github.com/watatomo) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/deepl/assets/catwalk.webp b/styles/deepl/assets/catwalk.webp new file mode 100644 index 0000000..1bc7e8b --- /dev/null +++ b/styles/deepl/assets/catwalk.webp @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:31ee7713cc8e67b9aa4095d6d9bf26732f612bb610233ca727eb4c17b324ccf2 +size 20046 diff --git a/styles/deepl/catppuccin.user.css b/styles/deepl/catppuccin.user.css new file mode 100644 index 0000000..f15f688 --- /dev/null +++ b/styles/deepl/catppuccin.user.css @@ -0,0 +1,956 @@ +/* ==UserStyle== +@name DeepL Catppuccin +@namespace github.com/catppuccin/userstyles/styles/deepl +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/deepl +@version 0.2.1 +@description Soothing pastel theme for DeepL +@author Catppuccin +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/deepl/catppuccin.user.css +@preprocessor less + +@var select theme "Flavour" ["latte:Latte", "frappe:Frappรฉ", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColour "Accent"["rosewater:Rosewater", "flamingo:Flamingo", "pink: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 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(@theme, @accentColour); + } + + @catppuccin: { + @latte: { + @rosewater: #dc8a78; + @flamingo: #dd7878; + @pink: #ea76cb; + @mauve: #8839ef; + @red: #d20f39; + @maroon: #e64553; + @peach: #fe640b; + @yellow: #df8e1d; + @green: #40a02b; + @teal: #179299; + @sky: #04a5e5; + @sapphire: #209fb5; + @blue: #1e66f5; + @lavender: #7287fd; + @text: #4c4f69; + @subtext1: #5c5f77; + @subtext0: #6c6f85; + @overlay2: #7c7f93; + @overlay1: #8c8fa1; + @overlay0: #9ca0b0; + @surface2: #acb0be; + @surface1: #bcc0cc; + @surface0: #ccd0da; + @base: #eff1f5; + @mantle: #e6e9ef; + @crust: #dce0e8; + } + @frappe: { + @rosewater: #f2d5cf; + @flamingo: #eebebe; + @pink: #f4b8e4; + @mauve: #ca9ee6; + @red: #e78284; + @maroon: #ea999c; + @peach: #ef9f76; + @yellow: #e5c890; + @green: #a6d189; + @teal: #81c8be; + @sky: #99d1db; + @sapphire: #85c1dc; + @blue: #8caaee; + @lavender: #babbf1; + @text: #c6d0f5; + @subtext1: #b5bfe2; + @subtext0: #a5adce; + @overlay2: #949cbb; + @overlay1: #838ba7; + @overlay0: #737994; + @surface2: #626880; + @surface1: #51576d; + @surface0: #414559; + @base: #303446; + @mantle: #292c3c; + @crust: #232634; + } + @macchiato: { + @rosewater: #f4dbd6; + @flamingo: #f0c6c6; + @pink: #f5bde6; + @mauve: #c6a0f6; + @red: #ed8796; + @maroon: #ee99a0; + @peach: #f5a97f; + @yellow: #eed49f; + @green: #a6da95; + @teal: #8bd5ca; + @sky: #91d7e3; + @sapphire: #7dc4e4; + @blue: #8aadf4; + @lavender: #b7bdf8; + @text: #cad3f5; + @subtext1: #b8c0e0; + @subtext0: #a5adcb; + @overlay2: #939ab7; + @overlay1: #8087a2; + @overlay0: #6e738d; + @surface2: #5b6078; + @surface1: #494d64; + @surface0: #363a4f; + @base: #24273a; + @mantle: #1e2030; + @crust: #181926; + } + @mocha: { + @rosewater: #f5e0dc; + @flamingo: #f2cdcd; + @pink: #f5c2e7; + @mauve: #cba6f7; + @red: #f38ba8; + @maroon: #eba0ac; + @peach: #fab387; + @yellow: #f9e2af; + @green: #a6e3a1; + @teal: #94e2d5; + @sky: #89dceb; + @sapphire: #74c7ec; + @blue: #89b4fa; + @lavender: #b4befe; + @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-colour: @catppuccin[@@lookup][@@accent]; + + @accent2: mix(@accent-colour, @text, 60%); + + .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*="unavilable--"] { + --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-colour; + & when (@lookup ="latte") { + color: #fff; + } + color: @crust; + &:hover { + background-color: darken(@accent-colour, 30%); + & when (@lookup ="latte") { + color: #fff; + } + color: @crust; + } + } + + .dl_header_menu_v2__login_button_simple > button { + color: @accent2; + + &:hover { + color: @accent-colour; + } + } + + .dl_header_menu_v2__buttons__menu > button { + &::before, + &::after { + color: @accent2; + } + + &:hover { + &::before, + &::after { + color: @accent-colour; + } + } + } + + .dl_headerMenu__freeBadge, + .dl_headerMenu__fadeoutBadge { + background-color: spin(@accent-colour, -40deg); + & when (@lookup ="latte") { + color: #fff; + } + color: @crust; + } + + .dl_header_menu_v2__links__item.dl_translator_link:not(.nohover):hover { + color: @accent-colour; + } + + .dl_header_menu_v2__links__item:not(.nohover):hover, + .dl_header_menu_v2__links__item.is-active { + border-bottom-color: @accent-colour; + color: @accent-colour; + } + + #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-colour; + } + } + } + } + .lmt--web .lmt__language_container .lmt__language_container_switch:hover, + .lmt--web .lmt__language_container .lmt__language_container_switch:focus { + color: @accent-colour; + } + + .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-colour; + } + + [class*="active--"] { + [class*="logo"], + [class^="textUpper--"] { + color: @text; + } + + [class^="innerLower--"] { + background-color: @accent-colour; + } + } + } + + .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; + } + } + + .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-colour; + } + } + } + + .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-colour !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.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: fadeout(@text, 15%) !important; + } + } + + .lmt__clear_text_button_wrapper { + [class*="button--"] { + &:active:enabled, + &:hover:enabled { + color: @accent-colour; + } + } + } // 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-colour; + } + + .lmt__language_select__menu.lmt__language_select__menu_three_columns .lmt__language_wrapper .lmt__language_select_column button .tick { + border-bottom-color: @accent-colour; + border-right-color: @accent-colour; + } // glossary + .lmt__glossary_highlight { + color: @accent-colour; + } + + .lmt__glossaryButton__desktop { + border-color: fadeout(@text, 12%) + } + + .lmt__glossary_button .lmt__glossary_button_label:hover { + color: @accent-colour; + } + + .lmt__glossary_editor_mainBar { + background-color: @accent-colour; + & 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-colour; + } + } + + .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-colour; + } + + .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-colour, 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-colour; + } + } + + .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-colour; + } + + .lmt__glossary_editor { + background-color: @base; + color: @text; + border-color: @accent-colour; + } + + .lmt__glossaryButton__desktop.switchedOn { + border-color: @accent-colour; + } + + .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-colour; + } // 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-colour; + } + + .sep { + color: @text; + } + + .tag_trans { + color: @subtext1; + } + + .notascommon { + color: @overlay1; + } + } + + span > span > button:hover { + color: @accent-colour; + } + } // quotes + .lmt_quotes_nav_entry { + color: @overlay1; + background-color: @overlay0; + } + + .lmt_quotes_nav_entry--active { + color: @accent-colour; + background-color: @accent-colour; + } // 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-colour, -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; + } + } + } +} \ No newline at end of file diff --git a/styles/elk/README.md b/styles/elk/README.md new file mode 100644 index 0000000..91aa9e5 --- /dev/null +++ b/styles/elk/README.md @@ -0,0 +1,56 @@ + + + +

+ Logo
+ + Catppuccin for Elk + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ + + + + +## ๐Ÿ’ Current Maintainer(s) +- [Ryan Cao](https://github.com/ryanccn) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/elk/assets/catwalk.webp b/styles/elk/assets/catwalk.webp new file mode 100644 index 0000000..a8d071b --- /dev/null +++ b/styles/elk/assets/catwalk.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..97c66a1 --- /dev/null +++ b/styles/elk/assets/frappe.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..403d1a6 --- /dev/null +++ b/styles/elk/assets/latte.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..ccbb720 --- /dev/null +++ b/styles/elk/assets/macchiato.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..3dff624 --- /dev/null +++ b/styles/elk/assets/mocha.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..2008799 --- /dev/null +++ b/styles/elk/catppuccin.user.css @@ -0,0 +1,236 @@ +/* ==UserStyle== +@name Elk Catppuccin +@namespace github.com/catppuccin/userstyles/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 +@preprocessor less +@var select theme "Theme" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColour "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink: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("elk.zone") { + + :root { + #catppuccin(@theme, @accentColour); + } + + @catppuccin: { + @latte: { + @rosewater: #dc8a78; + @flamingo: #dd7878; + @pink: #ea76cb; + @mauve: #8839ef; + @red: #d20f39; + @maroon: #e64553; + @peach: #fe640b; + @yellow: #df8e1d; + @green: #40a02b; + @teal: #179299; + @sky: #04a5e5; + @sapphire: #209fb5; + @blue: #1e66f5; + @lavender: #7287fd; + @text: #4c4f69; + @subtext1: #5c5f77; + @subtext0: #6c6f85; + @overlay2: #7c7f93; + @overlay1: #8c8fa1; + @overlay0: #9ca0b0; + @surface2: #acb0be; + @surface1: #bcc0cc; + @surface0: #ccd0da; + @base: #eff1f5; + @mantle: #e6e9ef; + @crust: #dce0e8; + } + @frappe: { + @rosewater: #f2d5cf; + @flamingo: #eebebe; + @pink: #f4b8e4; + @mauve: #ca9ee6; + @red: #e78284; + @maroon: #ea999c; + @peach: #ef9f76; + @yellow: #e5c890; + @green: #a6d189; + @teal: #81c8be; + @sky: #99d1db; + @sapphire: #85c1dc; + @blue: #8caaee; + @lavender: #babbf1; + @text: #c6d0f5; + @subtext1: #b5bfe2; + @subtext0: #a5adce; + @overlay2: #949cbb; + @overlay1: #838ba7; + @overlay0: #737994; + @surface2: #626880; + @surface1: #51576d; + @surface0: #414559; + @base: #303446; + @mantle: #292c3c; + @crust: #232634; + } + @macchiato: { + @rosewater: #f4dbd6; + @flamingo: #f0c6c6; + @pink: #f5bde6; + @mauve: #c6a0f6; + @red: #ed8796; + @maroon: #ee99a0; + @peach: #f5a97f; + @yellow: #eed49f; + @green: #a6da95; + @teal: #8bd5ca; + @sky: #91d7e3; + @sapphire: #7dc4e4; + @blue: #8aadf4; + @lavender: #b7bdf8; + @text: #cad3f5; + @subtext1: #b8c0e0; + @subtext0: #a5adcb; + @overlay2: #939ab7; + @overlay1: #8087a2; + @overlay0: #6e738d; + @surface2: #5b6078; + @surface1: #494d64; + @surface0: #363a4f; + @base: #24273a; + @mantle: #1e2030; + @crust: #181926; + } + @mocha: { + @rosewater: #f5e0dc; + @flamingo: #f2cdcd; + @pink: #f5c2e7; + @mauve: #cba6f7; + @red: #f38ba8; + @maroon: #eba0ac; + @peach: #fab387; + @yellow: #f9e2af; + @green: #a6e3a1; + @teal: #94e2d5; + @sky: #89dceb; + @sapphire: #74c7ec; + @blue: #89b4fa; + @lavender: #b4befe; + @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-colour: @catppuccin[@@lookup][@@accent]; + + & { + --c-primary: @accent-colour !important; + --c-primary-active: lighten(@accent-colour, 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-colour !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); + } + } +} \ No newline at end of file diff --git a/styles/github/README.md b/styles/github/README.md new file mode 100644 index 0000000..d2009b9 --- /dev/null +++ b/styles/github/README.md @@ -0,0 +1,60 @@ + + + +

+ Logo
+ + Catppuccin for GitHub + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ + + + + +## ๐Ÿ’ Current Maintainer(s) +- [Pocco81](https://github.com/Pocco81) +- [Umbreon](https://github.com/GlowingUmbreon) + +## ๐Ÿ’– Past Maintainer(s) +- [Andreas Grafen](https://github.com/andreasgrafen) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/github/assets/catwalk.webp b/styles/github/assets/catwalk.webp new file mode 100644 index 0000000..0b020ae --- /dev/null +++ b/styles/github/assets/catwalk.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..572c7cd --- /dev/null +++ b/styles/github/assets/frappe.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..bde5b1b --- /dev/null +++ b/styles/github/assets/latte.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..c0ae45d --- /dev/null +++ b/styles/github/assets/macchiato.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..f6d9f3b --- /dev/null +++ b/styles/github/assets/mocha.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..89d5fa0 --- /dev/null +++ b/styles/github/catppuccin.user.css @@ -0,0 +1,1061 @@ +/* ==UserStyle== +@name Github Catppuccin +@namespace github.com/catppuccin/userstyles/styles/github +@version 1.1.14 +@description Soothing pastel theme for GitHub +@author Catppuccin +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/github/catppuccin.user.css +@preprocessor stylus +@var select theme "Theme" ["Latte", "Frappe", "Macchiato", "Mocha*"] +@var select accent-color "Accent" ["Rosewater*", "Flamingo", "Pink", "Mauve", "Red", "Maroon", "Peach", "Yellow", "Green", "Teal", "Blue", "Sapphire", "Sky", "Lavender", "Gray"] +@var checkbox topbar "Topbar colors" 1 +@var checkbox usefont "Use Inter font" 0 +==/UserStyle== */ +@-moz-document regexp("https:\/\/*github\.com") { + + if (theme=="Latte") { + $type = 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 + $shadow = $crust + } + + else if (theme=="Frappe") { + $type = 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 + $shadow = $crust + } + + else if (theme=="Macchiato") { + $type = 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 + $shadow = $crust + } + + else if (theme=="Mocha") { + $type = 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 + $lavender = #b4befe + $blue = #89b4fa + $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 = $crust + } + + if (accent-color=="Rosewater") { + $accent-color = $rosewater; + } else if (accent-color=="Flamingo") { + $accent-color = $flamingo + } else if (accent-color=="Pink") { + $accent-color = $pink + } else if (accent-color=="Mauve") { + $accent-color = $mauve + } else if (accent-color=="Red") { + $accent-color = $red + } else if (accent-color=="Maroon") { + $accent-color = $maroon + } else if (accent-color=="Peach") { + $accent-color = $peach + } else if (accent-color=="Yellow") { + $accent-color = $yellow + } else if (accent-color=="Green") { + $accent-color = $green + } else if (accent-color=="Teal") { + $accent-color = $teal + } else if (accent-color=="Blue") { + $accent-color = $blue + } else if (accent-color=="Sapphire") { + $accent-color = $sapphire + } else if (accent-color=="Sky") { + $accent-color = $sky + } else if (accent-color=="Lavender") { + $accent-color = $lavender + } else if (accent-color=="Gray") { + $accent-color = $subtext0 + } + /* Functions */ + hoverColor(col) { + return blend(alpha(col, 0.7), $text) + } + + activeColor(col) { + return blend(alpha(col, 0.5), $text) + } + + disabledColor(col) { + return blend(alpha(col, 0.4), $base) + } + +} + + + +@-moz-document regexp("https:\/\/(gist\.)*github\.com(?!\/(marketplace|organizations\/plan)).*") { + + [data-color-mode="light"][data-light-theme*="dark"], + [data-color-mode="light"][data-light-theme*="light"], + [data-color-mode="dark"][data-dark-theme*="dark"], + [data-color-mode="dark"][data-dark-theme*="light"], + [data-color-mode="auto"][data-dark-theme*="dark"], + [data-color-mode="auto"][data-dark-theme*="light"] { + + &, & body { + color-scheme: $type; + + --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: alpha($green, 0.3); + --color-diff-blob-addition-line-bg: alpha($green, 0.15); + --color-diff-blob-addition-word-bg: alpha($green, 0.3); + --color-diff-blob-deletion-num-text: $text; + --color-diff-blob-deletion-fg: $text; + --color-diff-blob-deletion-num-bg: alpha($red, 0.3); + --color-diff-blob-deletion-line-bg: alpha($red, 0.15); + --color-diff-blob-deletion-word-bg: alpha($red, 0.3); + --color-diff-blob-hunk-num-bg: alpha($blue, 0.4); + --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: alpha($red, 0.15); + --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: alpha($red, 0.4); + --color-prettylights-syntax-markup-inserted-text: $text; + --color-prettylights-syntax-markup-inserted-bg: alpha($green, 0.4); + --color-prettylights-syntax-markup-changed-text: $text; + --color-prettylights-syntax-markup-changed-bg: alpha($yellow, 0.4); + --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: $accent-color; + --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: $shadow; + --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: $subtext1; + --color-checks-line-num-text: $subtext1; + --color-checks-line-timestamp-text: $subtext1; + --color-checks-line-hover-bg: $surface0; + --color-checks-line-selected-bg: #dc2286; + --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: alpha($maroon, 0.15); + --color-checks-logline-warning-text: $subtext1; + --color-checks-logline-warning-num-text: $peach; + --color-checks-logline-warning-bg: alpha($peach, 0.15); + --color-checks-logline-command-text: $blue; + --color-checks-logline-section-text: $green; + if ($type == "dark") { + --color-checks-ansi-black: $surface1; + --color-checks-ansi-black-bright: $surface2; + --color-checks-ansi-white: $subtext1; + --color-checks-ansi-white-bright: $subtext0; + } else { + --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); + if (topbar) { + --color-header-bg: $mantle; + } else { + --color-header-bg: $base; + } + --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; + --color-btn-primary-text: $base; + --color-btn-primary-bg: $green; + --color-btn-primary-border: transparent; + --color-btn-primary-shadow: 0 0 transparent; + --color-btn-primary-inset-shadow: 0 0 transparent; + --color-btn-primary-hover-bg: hoverColor($green); + --color-btn-primary-hover-border: rgba(240, 246, 252, 0.1); + --color-btn-primary-selected-bg: activeColor($green); + --color-btn-primary-selected-shadow: 0 0 transparent; + --color-btn-primary-disabled-text: $crust; + --color-btn-primary-disabled-bg: disabledColor($green); + --color-btn-primary-disabled-border: transparent; + --color-btn-primary-focus-bg: #238636; + --color-btn-primary-focus-border: rgba(240, 246, 252, 0.1); + --color-btn-primary-focus-shadow: 0 0 0 3px rgba(46, 164, 79, 0.4); + --color-btn-primary-icon: $base; + --color-btn-primary-counter-bg: rgba(255, 255, 255, 0.2); + --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); + --color-btn-danger-text: $base; + --color-btn-danger-bg: $red; + --color-btn-danger-hover-text: $base; + --color-btn-danger-hover-bg: hoverColor($red); + --color-btn-danger-hover-border: transparent; + --color-btn-danger-hover-shadow: 0 0 transparent; + --color-btn-danger-hover-inset-shadow: 0 0 transparent; + --color-btn-danger-hover-icon: $base; + --color-btn-danger-hover-counter-bg: rgba(255, 255, 255, 0.2); + --color-btn-danger-selected-text: $base; + --color-btn-danger-selected-bg: activeColor($red); + --color-btn-danger-selected-border: transparent; + --color-btn-danger-selected-shadow: 0 0 transparent; + --color-btn-danger-disabled-text: $crust; + --color-btn-danger-disabled-bg: disabledColor($red); + --color-btn-danger-disabled-counter-bg: rgba(218, 54, 51, 0.05); + --color-btn-danger-focus-border: #f85149; + --color-btn-danger-focus-shadow: 0 0 0 3px rgba(248, 81, 73, 0.4); + --color-btn-danger-counter-bg: rgba(218, 54, 51, 0.1); + --color-btn-danger-icon: #f85149; + --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 $shadow; + --color-shadow-large: 0 8px 24px $shadow; + --color-shadow-extra-large: 0 12px 48px $shadow; + --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: alpha($accent-color, 0.4); + --color-accent-subtle: alpha($accent-color, 0.15); + --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: alpha($accent-color, .5); + --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; + } + } + + + [data-color-mode="light"][data-light-theme*="dark"], + [data-color-mode="light"][data-light-theme*="light"], + [data-color-mode="dark"][data-dark-theme*="dark"], + [data-color-mode="dark"][data-dark-theme*="light"], + [data-color-mode="auto"][data-dark-theme*="dark"], + [data-color-mode="auto"][data-dark-theme*="light"] { + --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: alpha($blue, 0.15); + --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(rgba($green, 40%), 15deg); + --color-calendar-graph-day-L2-bg: spin(rgba($green, 60%), 10deg); + --color-calendar-graph-day-L3-bg: spin(rgba($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) + } + + /* Issue tags */ + .hx_IssueLabel { + --text: $text; + } + if ($type == light) { /* Maybe we could make a custom algorithm that converts the colors to be more catppuccin like? */ + @css { + .hx_IssueLabel { + --lightness-threshold: 0.453; + --border-threshold: 0.96; + --border-alpha: 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-alpha)) !important; + } + } + } else { + @css { + .hx_IssueLabel { + --lightness-threshold: 0.6; + --background-alpha: 0.18; + --border-alpha: 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-alpha)) !important; + border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-alpha)) !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: alpha($blue, 0.4); + --color-accent-subtle: alpha($blue, 0.15); + } + + /* Misc */ + .col-md-8 { + background-color: $base; + } + + /* 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 + } + + if (usefont) { + body, + .markdown-body { + 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; + } + +} + + + +@-moz-document regexp("https:\/\/notebooks\.githubusercontent\.com\/view\/ipynb.*") { + + :root { + /* 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: alpha($text, 0.87); + --jp-ui-font-color2: alpha($text, 0.54); + --jp-ui-font-color3: alpha($text, 0.38); + --jp-ui-inverse-font-color0: $crust; + --jp-ui-inverse-font-color1: alpha($crust, 0.80); + --jp-ui-inverse-font-color2: alpha($crust, 0.50); + --jp-ui-inverse-font-color3: alpha($crust, 0.30); + --jp-content-font-color0: $text; + --jp-content-font-color1: $text; + --jp-content-font-color2: alpha($text, 0.70); + --jp-content-font-color3: alpha($text, 0.50); + --jp-content-link-color: var(--color-scale-blue-3); + --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: alpha($text, 0.5); + --jp-cell-inprompt-font-color: var(--color-scale-blue-6); + --jp-cell-outprompt-font-color: var(--color-scale-coral-6); + --jp-notebook-multiselected-color: alpha($overlay2, 0.24); + --jp-rendermime-error-background: alpha($red, 0.28); + --jp-rendermime-table-row-background: var(--color-scale-gray-9); + --jp-rendermime-table-row-hover-background: alpha($surface2, 0.24); + --jp-dialog-background: alpha($crust, 0.6); + --jp-toolbar-box-shadow: 0px 0px 2px 0px alpha($crust, 0.8); + --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: alpha($blue, 0.3); + --jp-editor-selected-focused-background: alpha($blue, 0.24); + --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); + } + +} \ No newline at end of file diff --git a/styles/hacker-news/README.md b/styles/hacker-news/README.md new file mode 100644 index 0000000..677a0be --- /dev/null +++ b/styles/hacker-news/README.md @@ -0,0 +1,56 @@ + + + +

+ Logo
+ + Catppuccin for Hacker News + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ + + + + +## ๐Ÿ’ Current Maintainer(s) +- [Lucas Melin](https://github.com/lucasmelin) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/hacker-news/assets/catwalk.webp b/styles/hacker-news/assets/catwalk.webp new file mode 100644 index 0000000..34db2b8 --- /dev/null +++ b/styles/hacker-news/assets/catwalk.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..5183896 --- /dev/null +++ b/styles/hacker-news/assets/frappe.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..6b11e89 --- /dev/null +++ b/styles/hacker-news/assets/latte.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..dad59db --- /dev/null +++ b/styles/hacker-news/assets/macchiato.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..a657b56 --- /dev/null +++ b/styles/hacker-news/assets/mocha.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..6d208ff --- /dev/null +++ b/styles/hacker-news/catppuccin.user.css @@ -0,0 +1,299 @@ +/* ==UserStyle== +@name HackerNews Catppuccin +@namespace github.com/catppuccin/userstyles/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 +@preprocessor less +@var select theme "Theme" ["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(@theme); + + #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; + } + } +} \ No newline at end of file diff --git a/styles/ichi.moe/README.md b/styles/ichi.moe/README.md new file mode 100644 index 0000000..ed024f7 --- /dev/null +++ b/styles/ichi.moe/README.md @@ -0,0 +1,56 @@ + + + +

+ Logo
+ + Catppuccin for ichi.moe + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ + + + + +## ๐Ÿ’ Current Maintainer(s) +- [Ren](https://github.com/watatomo) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/ichi.moe/assets/catwalk.webp b/styles/ichi.moe/assets/catwalk.webp new file mode 100644 index 0000000..43152bf --- /dev/null +++ b/styles/ichi.moe/assets/catwalk.webp @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:80975a532e18e916248a5ccf95f8cb15cf47feef5399b38c30486d759c2c56c4 +size 57218 diff --git a/styles/ichi.moe/catppuccin.user.css b/styles/ichi.moe/catppuccin.user.css new file mode 100644 index 0000000..1e0a324 --- /dev/null +++ b/styles/ichi.moe/catppuccin.user.css @@ -0,0 +1,546 @@ +/* ==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 +@preprocessor less +@var select theme "Flavour" ["latte:Latte", "frappe:Frappรฉ", "macchiato:Macchiato", "mocha:Mocha*"] +@var checkbox zen "Zen Mode" 0 +==/UserStyle== */ +@-moz-document domain("ichi.moe") { + :root { + #catppuccin(@theme); + } + + @catppuccin: { + @latte: { + @rosewater: #dc8a78; + @flamingo: #dd7878; + @pink: #ea76cb; + @mauve: #8839ef; + @red: #d20f39; + @maroon: #e64553; + @peach: #fe640b; + @yellow: #df8e1d; + @green: #40a02b; + @teal: #179299; + @sky: #04a5e5; + @sapphire: #209fb5; + @blue: #1e66f5; + @lavender: #7287fd; + @text: #4c4f69; + @subtext1: #5c5f77; + @subtext0: #6c6f85; + @overlay2: #7c7f93; + @overlay1: #8c8fa1; + @overlay0: #9ca0b0; + @surface2: #acb0be; + @surface1: #bcc0cc; + @surface0: #ccd0da; + @base: #eff1f5; + @mantle: #e6e9ef; + @crust: #dce0e8; + } + @frappe: { + @rosewater: #f2d5cf; + @flamingo: #eebebe; + @pink: #f4b8e4; + @mauve: #ca9ee6; + @red: #e78284; + @maroon: #ea999c; + @peach: #ef9f76; + @yellow: #e5c890; + @green: #a6d189; + @teal: #81c8be; + @sky: #99d1db; + @sapphire: #85c1dc; + @blue: #8caaee; + @lavender: #babbf1; + @text: #c6d0f5; + @subtext1: #b5bfe2; + @subtext0: #a5adce; + @overlay2: #949cbb; + @overlay1: #838ba7; + @overlay0: #737994; + @surface2: #626880; + @surface1: #51576d; + @surface0: #414559; + @base: #303446; + @mantle: #292c3c; + @crust: #232634; + } + @macchiato: { + @rosewater: #f4dbd6; + @flamingo: #f0c6c6; + @pink: #f5bde6; + @mauve: #c6a0f6; + @red: #ed8796; + @maroon: #ee99a0; + @peach: #f5a97f; + @yellow: #eed49f; + @green: #a6da95; + @teal: #8bd5ca; + @sky: #91d7e3; + @sapphire: #7dc4e4; + @blue: #8aadf4; + @lavender: #b7bdf8; + @text: #cad3f5; + @subtext1: #b8c0e0; + @subtext0: #a5adcb; + @overlay2: #939ab7; + @overlay1: #8087a2; + @overlay0: #6e738d; + @surface2: #5b6078; + @surface1: #494d64; + @surface0: #363a4f; + @base: #24273a; + @mantle: #1e2030; + @crust: #181926; + } + @mocha: { + @rosewater: #f5e0dc; + @flamingo: #f2cdcd; + @pink: #f5c2e7; + @mauve: #cba6f7; + @red: #f38ba8; + @maroon: #eba0ac; + @peach: #fab387; + @yellow: #f9e2af; + @green: #a6e3a1; + @teal: #94e2d5; + @sky: #89dceb; + @sapphire: #74c7ec; + @blue: #89b4fa; + @lavender: #b4befe; + @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; + } + } + } +} \ No newline at end of file diff --git a/styles/invidious/README.md b/styles/invidious/README.md new file mode 100644 index 0000000..17ed948 --- /dev/null +++ b/styles/invidious/README.md @@ -0,0 +1,59 @@ + + + +

+ Logo
+ + Catppuccin for Invidious + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ + + + + +## ๐Ÿ’ Current Maintainer(s) +- [winston](https://github.com/nekowinston) + +## ๐Ÿ’– Past Maintainer(s) +- [Andreas Grafen](https://github.com/andreasgrafen) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/invidious/assets/catwalk.webp b/styles/invidious/assets/catwalk.webp new file mode 100644 index 0000000..85a58ca --- /dev/null +++ b/styles/invidious/assets/catwalk.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..7559792 --- /dev/null +++ b/styles/invidious/assets/frappe.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..35c4370 --- /dev/null +++ b/styles/invidious/assets/latte.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..455c369 --- /dev/null +++ b/styles/invidious/assets/macchiato.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..d425c55 --- /dev/null +++ b/styles/invidious/assets/mocha.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..f3b846a --- /dev/null +++ b/styles/invidious/catppuccin.user.css @@ -0,0 +1,302 @@ +/* ==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 +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte: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 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 \ No newline at end of file diff --git a/styles/lastfm/README.md b/styles/lastfm/README.md new file mode 100644 index 0000000..0fc12d6 --- /dev/null +++ b/styles/lastfm/README.md @@ -0,0 +1,59 @@ + + + +

+ Logo
+ + Catppuccin for Last.fm + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ + + + + +## ๐Ÿ’ Current Maintainer(s) +- [AnubisNekhet](https://github.com/AnubisNekhet) + +## ๐Ÿ’– Past Maintainer(s) +- [Gingeh](https://github.com/Gingeh) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/lastfm/assets/catwalk.webp b/styles/lastfm/assets/catwalk.webp new file mode 100644 index 0000000..9b0a0d9 --- /dev/null +++ b/styles/lastfm/assets/catwalk.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..3f1cacb --- /dev/null +++ b/styles/lastfm/assets/frappe.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..3369b91 --- /dev/null +++ b/styles/lastfm/assets/latte.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..e61fc92 --- /dev/null +++ b/styles/lastfm/assets/macchiato.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..f90f6f6 --- /dev/null +++ b/styles/lastfm/assets/mocha.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..2c161fb --- /dev/null +++ b/styles/lastfm/catppuccin.user.css @@ -0,0 +1,1727 @@ +/* ==UserStyle== +@name Last.fm Catppuccin +@namespace github.com/catppuccin/userstyles/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 +@preprocessor less +@var select flavour "Flavour" ["latte:Latte", "frappe:Frappรฉ", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColour "Accent Colour" [ "rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green*", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Grey" ] +@var checkbox removepromos "Remove Advertisements" 1 +==/UserStyle== */ +@-moz-document domain("last.fm") { + + #catppuccin(@flavour, @accentColour); + + @catppuccin: { + @latte: { + @rosewater: #dc8a78; + @flamingo: #dd7878; + @pink: #ea76cb; + @mauve: #8839ef; + @red: #d20f39; + @maroon: #e64553; + @peach: #fe640b; + @yellow: #df8e1d; + @green: #40a02b; + @teal: #179299; + @sky: #04a5e5; + @sapphire: #209fb5; + @blue: #1e66f5; + @lavender: #7287fd; + @text: #4c4f69; + @subtext1: #5c5f77; + @subtext0: #6c6f85; + @overlay2: #7c7f93; + @overlay1: #8c8fa1; + @overlay0: #9ca0b0; + @surface2: #acb0be; + @surface1: #bcc0cc; + @surface0: #ccd0da; + @base: #eff1f5; + @mantle: #e6e9ef; + @crust: #dce0e8; + } + @frappe: { + @rosewater: #f2d5cf; + @flamingo: #eebebe; + @pink: #f4b8e4; + @mauve: #ca9ee6; + @red: #e78284; + @maroon: #ea999c; + @peach: #ef9f76; + @yellow: #e5c890; + @green: #a6d189; + @teal: #81c8be; + @sky: #99d1db; + @sapphire: #85c1dc; + @blue: #8caaee; + @lavender: #babbf1; + @text: #c6d0f5; + @subtext1: #b5bfe2; + @subtext0: #a5adce; + @overlay2: #949cbb; + @overlay1: #838ba7; + @overlay0: #737994; + @surface2: #626880; + @surface1: #51576d; + @surface0: #414559; + @base: #303446; + @mantle: #292c3c; + @crust: #232634; + } + @macchiato: { + @rosewater: #f4dbd6; + @flamingo: #f0c6c6; + @pink: #f5bde6; + @mauve: #c6a0f6; + @red: #ed8796; + @maroon: #ee99a0; + @peach: #f5a97f; + @yellow: #eed49f; + @green: #a6da95; + @teal: #8bd5ca; + @sky: #91d7e3; + @sapphire: #7dc4e4; + @blue: #8aadf4; + @lavender: #b7bdf8; + @text: #cad3f5; + @subtext1: #b8c0e0; + @subtext0: #a5adcb; + @overlay2: #939ab7; + @overlay1: #8087a2; + @overlay0: #6e738d; + @surface2: #5b6078; + @surface1: #494d64; + @surface0: #363a4f; + @base: #24273a; + @mantle: #1e2030; + @crust: #181926; + } + @mocha: { + @rosewater: #f5e0dc; + @flamingo: #f2cdcd; + @pink: #f5c2e7; + @mauve: #cba6f7; + @red: #f38ba8; + @maroon: #eba0ac; + @peach: #fab387; + @yellow: #f9e2af; + @green: #a6e3a1; + @teal: #94e2d5; + @sky: #89dceb; + @sapphire: #74c7ec; + @blue: #89b4fa; + @lavender: #b4befe; + @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][@@accentColour]; + + @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; + } + + + + /* RECCOMENDATIONS */ + .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, .15); + background-color: @subtext0; + } + + .text-colour-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-colour { + color: @subtext0; + fill: @subtext0; + } + .tasteometer-compat-low .tasteometer-compat-colour { + color: @mauve; + fill: @mauve; + } + .tasteometer-compat-medium .tasteometer-compat-colour { + color: @green; + fill: @green; + } + .tasteometer-compat-very_high .tasteometer-compat-colour { + color: @peach; + fill: @peach; + } + .tasteometer-compat-super .tasteometer-compat-colour { + color: @red; + fill: @red; + } + + + + + /* ARTIST */ + .section-with-separator::after { + background-color: @base; + } + .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, .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, .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; + } + + .coloured-cta { + background-color: fadeout(@surface2, 0.3); + } + .coloured-cta:not(.cta--inactive):focus, + .coloured-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, .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 .7s steps(23) !important; + -webkit-transition: -webkit-mask-position .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 .7s steps(22) !important; + -webkit-transition: -webkit-mask-position .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; + } + } + } +} \ No newline at end of file diff --git a/styles/libreddit/README.md b/styles/libreddit/README.md new file mode 100644 index 0000000..b7e9854 --- /dev/null +++ b/styles/libreddit/README.md @@ -0,0 +1,59 @@ + + + +

+ Logo
+ + Catppuccin for Libreddit + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ + + + + +## ๐Ÿ’ Current Maintainer(s) +- [Isabel](https://github.com/isabelroses) + +## ๐Ÿ’– Past Maintainer(s) +- [Andreas Grafen](https://github.com/andreasgrafen) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/libreddit/assets/catwalk.webp b/styles/libreddit/assets/catwalk.webp new file mode 100644 index 0000000..8ce4633 --- /dev/null +++ b/styles/libreddit/assets/catwalk.webp @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e34c42e7a9ef574d7a6133b1800f5dac4247513c4c04245fdd0c4fd5c860450a +size 75048 diff --git a/styles/libreddit/catppuccin.user.css b/styles/libreddit/catppuccin.user.css new file mode 100644 index 0000000..fe969fb --- /dev/null +++ b/styles/libreddit/catppuccin.user.css @@ -0,0 +1,247 @@ +/* ==UserStyle== +@name Libreddit Catppuccin +@namespace github.com/catppuccin/userstyles/styles/libreddit +@version 2.0.3 +@description Soothing pastel theme for Libreddit +@author Catppuccin +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/libreddit/catppuccin.user.css +@preprocessor less +@var select Theme "Theme" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColour "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink: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("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, + .dark, + .black, + .dracula, + .gold, + .laserwave, + .nord, + .rosebox, + .violet, + :root { + #catppuccin(@Theme, @accentColour); + } + + #catppuccin(@lookup, @accent) { + @rosewater: @catppuccin[@@lookup][@rosewater]; + @flamingo: @catppuccin[@@lookup][@flamingo]; + @pink: @catppuccin[@@lookup][@pink]; + @mauve: @catppuccin[@@lookup][@mauve]; + @red: @catppuccin[@@lookup][@red]; + @maroon: @catppuccin[@@lookup][@maroon]; + @peach: @catppuccin[@@lookup][@peach]; + @yellow: @catppuccin[@@lookup][@yellow]; + @green: @catppuccin[@@lookup][@green]; + @teal: @catppuccin[@@lookup][@teal]; + @sky: @catppuccin[@@lookup][@sky]; + @sapphire: @catppuccin[@@lookup][@sapphire]; + @blue: @catppuccin[@@lookup][@blue]; + @lavender: @catppuccin[@@lookup][@lavender]; + @text: @catppuccin[@@lookup][@text]; + @subtext1: @catppuccin[@@lookup][@subtext1]; + @subtext0: @catppuccin[@@lookup][@subtext0]; + @overlay2: @catppuccin[@@lookup][@overlay2]; + @overlay1: @catppuccin[@@lookup][@overlay1]; + @overlay0: @catppuccin[@@lookup][@overlay0]; + @surface2: @catppuccin[@@lookup][@surface2]; + @surface1: @catppuccin[@@lookup][@surface1]; + @surface0: @catppuccin[@@lookup][@surface0]; + @base: @catppuccin[@@lookup][@base]; + @mantle: @catppuccin[@@lookup][@mantle]; + @crust: @catppuccin[@@lookup][@crust]; + @accent-colour: @catppuccin[@@lookup][@@accent]; + + & { + --accent: @accent-colour; + --green: @green; + --text: @text; + --foreground: @crust; + --background: @base; + --outside: @mantle; + --post: @mantle; + --panel-border: none; + --highlighted: @surface0; + --visited: @overlay0; + --shadow: 0 5px 15px 0 transparent; + + --nsfw: @peach; + --admin: @maroon; + } + } +} \ No newline at end of file diff --git a/styles/libreddit/pure-css/frappe.css b/styles/libreddit/pure-css/frappe.css new file mode 100644 index 0000000..5b1d898 --- /dev/null +++ b/styles/libreddit/pure-css/frappe.css @@ -0,0 +1,18 @@ +.dark { + + --accent: #BABBF1; /* lavender */ + --green: #A6D189; /* green */ + --text: #C6D0F5; /* text */ + --foreground: #232634; /* crust */ + --background: #303446; /* base */ + --outside: #232634; /* crust */ + --post: #232634; /* crust */ + --panel-border: none; + --highlighted:#414559; /* surface0 */ + --visited: #737994; /* overlay0 */ + --shadow: 0 0 0 transparent; + + --nsfw: #EF9F76; /* peach */ + --admin: #EA999C; /* maroon */ + +} diff --git a/styles/libreddit/pure-css/latte.css b/styles/libreddit/pure-css/latte.css new file mode 100644 index 0000000..5b445eb --- /dev/null +++ b/styles/libreddit/pure-css/latte.css @@ -0,0 +1,18 @@ +.light { + + --accent: #7287fD; /* lavender */ + --green: #40A02B; /* green */ + --text: #4C4F69; /* text */ + --foreground: #DCE0E8; /* crust */ + --background: #EFF1F5; /* base */ + --outside: #DCE0E8; /* crust */ + --post: #DCE0E8; /* crust */ + --panel-border: none; + --highlighted:#CCD0DA; /* surface0 */ + --visited: #9CA0B0; /* overlay0 */ + --shadow: 0 0 0 transparent; + + --nsfw: #FE640B; /* peach */ + --admin: #E64553; /* maroon */ + +} diff --git a/styles/libreddit/pure-css/macchiato.css b/styles/libreddit/pure-css/macchiato.css new file mode 100644 index 0000000..7169ac1 --- /dev/null +++ b/styles/libreddit/pure-css/macchiato.css @@ -0,0 +1,18 @@ +.dark { + + --accent: #B7BDF8; /* lavender */ + --green: #A6DA95; /* green */ + --text: #CAD3F5; /* text */ + --foreground: #181926; /* crust */ + --background: #24273A; /* base */ + --outside: #181926; /* crust */ + --post: #181926; /* crust */ + --panel-border: none; + --highlighted:#363A4F; /* surface0 */ + --visited: #6E738D; /* overlay0 */ + --shadow: 0 0 0 transparent; + + --nsfw: #F5A97F; /* peach */ + --admin: #EE99A0; /* maroon */ + +} diff --git a/styles/libreddit/pure-css/mocha.css b/styles/libreddit/pure-css/mocha.css new file mode 100644 index 0000000..59ea382 --- /dev/null +++ b/styles/libreddit/pure-css/mocha.css @@ -0,0 +1,18 @@ +.dark { + + --accent: #B4BEFE; /* lavender */ + --green: #A6E3A1; /* green */ + --text: #CDD6F4; /* text */ + --foreground: #11111B; /* crust */ + --background: #1E1E2E; /* base */ + --outside: #11111B; /* crust */ + --post: #11111B; /* crust */ + --panel-border: none; + --highlighted:#313244; /* surface0 */ + --visited: #6C7086; /* overlay0 */ + --shadow: 0 0 0 transparent; + + --nsfw: #FAB387; /* peach */ + --admin: #EBA0AC; /* maroon */ + +} diff --git a/styles/mastodon/README.md b/styles/mastodon/README.md new file mode 100644 index 0000000..045c4a8 --- /dev/null +++ b/styles/mastodon/README.md @@ -0,0 +1,66 @@ + + + +

+ Logo
+ + Catppuccin for Mastodon + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ +## Usage +Add urls to `@-moz-document domain("url")` with url being the chosen server + + +## ๐Ÿ™‹ 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. + + +## ๐Ÿ’ Current Maintainer(s) +- [Isabel](https://github.com/isabelroses) + +## ๐Ÿ’– Past Maintainer(s) +- [Andreas Grafen](https://github.com/andreasgrafen) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/mastodon/assets/catwalk.webp b/styles/mastodon/assets/catwalk.webp new file mode 100644 index 0000000..e0794f7 --- /dev/null +++ b/styles/mastodon/assets/catwalk.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..c728174 --- /dev/null +++ b/styles/mastodon/assets/frappe.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..7e49d13 --- /dev/null +++ b/styles/mastodon/assets/latte.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..b409a94 --- /dev/null +++ b/styles/mastodon/assets/macchiato.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..836394d --- /dev/null +++ b/styles/mastodon/assets/mocha.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..fea76e5 --- /dev/null +++ b/styles/mastodon/catppuccin.user.css @@ -0,0 +1,606 @@ +/* ==UserStyle== +@name Mastodon Catppuccin +@namespace github.com/catppuccin/userstyles/styles/mastodon +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/mastodon +@version 1.1.4 +@description Soothing pastel theme for Mastodon +@author Catppuccin +@updateURL https://github.com/catppuccin/userstyles/raw/main/mastodon/catppuccin.user.css +@preprocessor less +@var select lightFlavour "Light Flavour" ["latte:Latte*", "frappe:Frappรฉ", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavour "Dark Flavour" ["latte:Latte", "frappe:Frappรฉ", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColour "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink: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("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(@lightFlavour, @accentColour); + } + + .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(@darkFlavour, @accentColour); + } + + #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-colour: @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: @subtext0 + } + + + .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-colour; + } + + .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-colour; + } + + + .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-colour; + } + + .public-layout .public-account-header__tabs__tabs .counter.active::after { + border-color: @accent-colour; + } + + .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-colour; + } + + .column-link--transparent:hover, + .column-link:hover { + color: @accent-colour; + } + + .button.button-tertiary:focus, + .button.button-tertiary:hover, + .button.button-tertiary:active { + color: @base; + } + + .button.button-tertiary { + border-color: @accent-colour; + } + + .button, + .button.button-tertiary, + .button.logo-button { + background: @accent-colour; + 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-colour; + color: @base; + transition: .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-colour; + } + + .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; + } + + .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-colour !important; + background: @mantle !important; + color: @text !important; + } + + .table > thead > tr > th { + border-color: @accent-colour !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-colour !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; + } + } +} \ No newline at end of file diff --git a/styles/modrinth/README.md b/styles/modrinth/README.md new file mode 100644 index 0000000..9c685c9 --- /dev/null +++ b/styles/modrinth/README.md @@ -0,0 +1,56 @@ + + + +

+ Logo
+ + Catppuccin for Modrinth + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ + + + + +## ๐Ÿ’ Current Maintainer(s) +- [thismoon](https://github.com/thismoon) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/modrinth/assets/catwalk.webp b/styles/modrinth/assets/catwalk.webp new file mode 100644 index 0000000..9257541 --- /dev/null +++ b/styles/modrinth/assets/catwalk.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..03a9a79 --- /dev/null +++ b/styles/modrinth/assets/frappe.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..9150d29 --- /dev/null +++ b/styles/modrinth/assets/latte.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..3d0f742 --- /dev/null +++ b/styles/modrinth/assets/macchiato.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..c99554f --- /dev/null +++ b/styles/modrinth/assets/mocha.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..fae05e6 --- /dev/null +++ b/styles/modrinth/catppuccin.user.css @@ -0,0 +1,200 @@ +/* ==UserStyle== +@name Modrinth Catppuccin +@namespace github.com/catppuccin/userstyles/styles/modrinth +@version 1.1.1 +@description Soothing pastel theme for Modrinth +@author Catppuccin +@preprocessor less +@var select lightTheme "Light Theme" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkTheme "Dark Theme" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColour "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink: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("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(@lightTheme, @accentColour); + } + + .dark-mode { + #catppuccin(@darkTheme, @accentColour); + } + + #catppuccin(@lookup, @accent) { + @rosewater: @catppuccin[@@lookup][@rosewater]; + @flamingo: @catppuccin[@@lookup][@flamingo]; + @pink: @catppuccin[@@lookup][@pink]; + @mauve: @catppuccin[@@lookup][@mauve]; + @red: @catppuccin[@@lookup][@red]; + @maroon: @catppuccin[@@lookup][@maroon]; + @peach: @catppuccin[@@lookup][@peach]; + @yellow: @catppuccin[@@lookup][@yellow]; + @green: @catppuccin[@@lookup][@green]; + @teal: @catppuccin[@@lookup][@teal]; + @sky: @catppuccin[@@lookup][@sky]; + @sapphire: @catppuccin[@@lookup][@sapphire]; + @blue: @catppuccin[@@lookup][@blue]; + @lavender: @catppuccin[@@lookup][@lavender]; + @text: @catppuccin[@@lookup][@text]; + @subtext1: @catppuccin[@@lookup][@subtext1]; + @subtext0: @catppuccin[@@lookup][@subtext0]; + @overlay2: @catppuccin[@@lookup][@overlay2]; + @overlay1: @catppuccin[@@lookup][@overlay1]; + @overlay0: @catppuccin[@@lookup][@overlay0]; + @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-colour: @catppuccin[@@lookup][@@accent]; + + & { + --color-bg: @crust; + --color-ad-raised: @surface2; + --color-ad: @surface1; + --color-brand-green: @accent-colour; + --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; + } + } + } \ No newline at end of file diff --git a/styles/nitter/README.md b/styles/nitter/README.md new file mode 100644 index 0000000..4bb8693 --- /dev/null +++ b/styles/nitter/README.md @@ -0,0 +1,56 @@ + + + +

+ Logo
+ + Catppuccin for Nitter + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ + + + + +## ๐Ÿ’ Current Maintainer(s) +- [AnubisNekhet](https://github.com/AnubisNekhet) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/nitter/assets/catwalk.webp b/styles/nitter/assets/catwalk.webp new file mode 100644 index 0000000..a1ae416 --- /dev/null +++ b/styles/nitter/assets/catwalk.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..fa15dc5 --- /dev/null +++ b/styles/nitter/assets/frappe.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..0f27939 --- /dev/null +++ b/styles/nitter/assets/latte.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..0c66446 --- /dev/null +++ b/styles/nitter/assets/macchiato.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..e984bcf --- /dev/null +++ b/styles/nitter/assets/mocha.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..3bcde90 --- /dev/null +++ b/styles/nitter/catppuccin.user.css @@ -0,0 +1,227 @@ +/* ==UserStyle== +@name Nitter Catppuccin +@namespace github.com/catppuccin/userstyles/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 +@preprocessor less +@var select lightFlavour "Light Flavour" ["latte:Latte*", "frappe:Frappรฉ", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavour "Dark Flavour" ["latte:Latte", "frappe:Frappรฉ", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColour "Accent Colour" [ "rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green*", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Grey" ] +==/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(@darkFlavour, @accentColour); + } + + @media (prefers-color-scheme: light) { + body { + #catppuccin(@lightFlavour, @accentColour); + } + } + @media (prefers-color-scheme: dark) { + body { + #catppuccin(@darkFlavour, @accentColour); + } + } + + @catppuccin: { + @latte: { + @rosewater: #dc8a78; + @flamingo: #dd7878; + @pink: #ea76cb; + @mauve: #8839ef; + @red: #d20f39; + @maroon: #e64553; + @peach: #fe640b; + @yellow: #df8e1d; + @green: #40a02b; + @teal: #179299; + @sky: #04a5e5; + @sapphire: #209fb5; + @blue: #1e66f5; + @lavender: #7287fd; + @text: #4c4f69; + @subtext1: #5c5f77; + @subtext0: #6c6f85; + @overlay2: #7c7f93; + @overlay1: #8c8fa1; + @overlay0: #9ca0b0; + @surface2: #acb0be; + @surface1: #bcc0cc; + @surface0: #ccd0da; + @base: #eff1f5; + @mantle: #e6e9ef; + @crust: #dce0e8; + } + @frappe: { + @rosewater: #f2d5cf; + @flamingo: #eebebe; + @pink: #f4b8e4; + @mauve: #ca9ee6; + @red: #e78284; + @maroon: #ea999c; + @peach: #ef9f76; + @yellow: #e5c890; + @green: #a6d189; + @teal: #81c8be; + @sky: #99d1db; + @sapphire: #85c1dc; + @blue: #8caaee; + @lavender: #babbf1; + @text: #c6d0f5; + @subtext1: #b5bfe2; + @subtext0: #a5adce; + @overlay2: #949cbb; + @overlay1: #838ba7; + @overlay0: #737994; + @surface2: #626880; + @surface1: #51576d; + @surface0: #414559; + @base: #303446; + @mantle: #292c3c; + @crust: #232634; + } + @macchiato: { + @rosewater: #f4dbd6; + @flamingo: #f0c6c6; + @pink: #f5bde6; + @mauve: #c6a0f6; + @red: #ed8796; + @maroon: #ee99a0; + @peach: #f5a97f; + @yellow: #eed49f; + @green: #a6da95; + @teal: #8bd5ca; + @sky: #91d7e3; + @sapphire: #7dc4e4; + @blue: #8aadf4; + @lavender: #b7bdf8; + @text: #cad3f5; + @subtext1: #b8c0e0; + @subtext0: #a5adcb; + @overlay2: #939ab7; + @overlay1: #8087a2; + @overlay0: #6e738d; + @surface2: #5b6078; + @surface1: #494d64; + @surface0: #363a4f; + @base: #24273a; + @mantle: #1e2030; + @crust: #181926; + } + @mocha: { + @rosewater: #f5e0dc; + @flamingo: #f2cdcd; + @pink: #f5c2e7; + @mauve: #cba6f7; + @red: #f38ba8; + @maroon: #eba0ac; + @peach: #fab387; + @yellow: #f9e2af; + @green: #a6e3a1; + @teal: #94e2d5; + @sky: #89dceb; + @sapphire: #74c7ec; + @blue: #89b4fa; + @lavender: #b4befe; + @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][@@accentColour]; + + & 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); + } + + } +} \ No newline at end of file diff --git a/styles/nixos-search/README.md b/styles/nixos-search/README.md new file mode 100644 index 0000000..5fc9eae --- /dev/null +++ b/styles/nixos-search/README.md @@ -0,0 +1,56 @@ + + + +

+ Logo
+ + Catppuccin for NixOS Search + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ + + + + +## ๐Ÿ’ Current Maintainer(s) +- [alaidriel](https://github.com/alaidriel) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/nixos-search/assets/catwalk.webp b/styles/nixos-search/assets/catwalk.webp new file mode 100644 index 0000000..9a195b0 --- /dev/null +++ b/styles/nixos-search/assets/catwalk.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..2a05303 --- /dev/null +++ b/styles/nixos-search/assets/frappe.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..238442f --- /dev/null +++ b/styles/nixos-search/assets/latte.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..ccdd464 --- /dev/null +++ b/styles/nixos-search/assets/macchiato.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..4eb1525 --- /dev/null +++ b/styles/nixos-search/assets/mocha.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..31663ca --- /dev/null +++ b/styles/nixos-search/catppuccin.user.css @@ -0,0 +1,521 @@ +/* ==UserStyle== +@name NixOS Search Catppuccin +@namespace github.com/catppuccin/userstyles/nixos-search +@version 0.2.0 +@description Soothing pastel theme for NixOS Search +@author Catppuccin +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/nixos-search/catppuccin.user.css +@preprocessor less +@var select flavor "Theme" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"] +@var select accent "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink: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("search.nixos.org") { + #catppuccin(@flavor); + #accent(@accent); + #nixos-search(); + + #catppuccin(@flavor) when (@flavor = latte) { + @rosewater: hsl(11, 59%, 67%); + @flamingo: hsl(0, 60%, 67%); + @pink: hsl(316, 73%, 69%); + @mauve: hsl(266, 85%, 58%); + @red: hsl(347, 87%, 44%); + @maroon: hsl(355, 76%, 59%); + @peach: hsl(22, 99%, 52%); + @yellow: hsl(35, 77%, 49%); + @green: hsl(109, 58%, 40%); + @teal: hsl(183, 74%, 35%); + @sky: hsl(197, 97%, 46%); + @sapphire: hsl(189, 70%, 42%); + @blue: hsl(220, 91%, 54%); + @lavender: hsl(231, 97%, 72%); + @text: hsl(234, 16%, 35%); + @subtext1: hsl(233, 13%, 41%); + @subtext0: hsl(233, 10%, 47%); + @overlay2: hsl(232, 10%, 53%); + @overlay1: hsl(231, 10%, 59%); + @overlay0: hsl(228, 11%, 65%); + @surface2: hsl(227, 12%, 71%); + @surface1: hsl(225, 14%, 77%); + @surface0: hsl(223, 16%, 83%); + @base: hsl(220, 23%, 95%); + @mantle: hsl(220, 22%, 92%); + @crust: hsl(220, 21%, 89%); + } + + #catppuccin(@flavor) when (@flavor = frappe) { + @rosewater: hsl(10, 57%, 88%); + @flamingo: hsl(0, 59%, 84%); + @pink: hsl(316, 73%, 84%); + @mauve: hsl(277, 59%, 76%); + @red: hsl(359, 68%, 71%); + @maroon: hsl(358, 66%, 76%); + @peach: hsl(20, 79%, 70%); + @yellow: hsl(40, 62%, 73%); + @green: hsl(96, 44%, 68%); + @teal: hsl(172, 39%, 65%); + @sky: hsl(189, 48%, 73%); + @sapphire: hsl(199, 55%, 69%); + @blue: hsl(222, 74%, 74%); + @lavender: hsl(239, 66%, 84%); + @text: hsl(227, 70%, 87%); + @subtext1: hsl(227, 44%, 80%); + @subtext0: hsl(228, 29%, 73%); + @overlay2: hsl(228, 22%, 66%); + @overlay1: hsl(227, 17%, 58%); + @overlay0: hsl(229, 13%, 52%); + @surface2: hsl(228, 13%, 44%); + @surface1: hsl(227, 15%, 37%); + @surface0: hsl(230, 16%, 30%); + @base: hsl(229, 19%, 23%); + @mantle: hsl(231, 19%, 20%); + @crust: hsl(229, 20%, 17%); + } + + #catppuccin(@flavor) when (@flavor =macchiato) { + @rosewater: hsl(10, 58%, 90%); + @flamingo: hsl(0, 58%, 86%); + @pink: hsl(316, 74%, 85%); + @mauve: hsl(267, 83%, 80%); + @red: hsl(351, 74%, 73%); + @maroon: hsl(355, 71%, 77%); + @peach: hsl(21, 86%, 73%); + @yellow: hsl(40, 70%, 78%); + @green: hsl(105, 48%, 72%); + @teal: hsl(171, 47%, 69%); + @sky: hsl(189, 59%, 73%); + @sapphire: hsl(199, 66%, 69%); + @blue: hsl(220, 83%, 75%); + @lavender: hsl(234, 82%, 85%); + @text: hsl(227, 68%, 88%); + @subtext1: hsl(228, 39%, 80%); + @subtext0: hsl(227, 27%, 72%); + @overlay2: hsl(228, 20%, 65%); + @overlay1: hsl(228, 15%, 57%); + @overlay0: hsl(230, 12%, 49%); + @surface2: hsl(230, 14%, 41%); + @surface1: hsl(231, 16%, 34%); + @surface0: hsl(230, 19%, 26%); + @base: hsl(232, 23%, 18%); + @mantle: hsl(233, 23%, 15%); + @crust: hsl(236, 23%, 12%); + } + + #catppuccin(@flavor) when (@flavor = mocha) { + @rosewater: hsl(10, 56%, 91%); + @flamingo: hsl(0, 59%, 88%); + @pink: hsl(316, 72%, 86%); + @mauve: hsl(267, 84%, 81%); + @red: hsl(343, 81%, 75%); + @maroon: hsl(350, 65%, 77%); + @peach: hsl(23, 92%, 75%); + @yellow: hsl(41, 86%, 83%); + @green: hsl(115, 54%, 76%); + @teal: hsl(170, 57%, 73%); + @sky: hsl(189, 71%, 73%); + @sapphire: hsl(199, 76%, 69%); + @blue: hsl(217, 92%, 76%); + @lavender: hsl(232, 97%, 85%); + @text: hsl(226, 64%, 88%); + @subtext1: hsl(227, 35%, 80%); + @subtext0: hsl(228, 24%, 72%); + @overlay2: hsl(228, 17%, 64%); + @overlay1: hsl(230, 13%, 55%); + @overlay0: hsl(231, 11%, 47%); + @surface2: hsl(233, 12%, 39%); + @surface1: hsl(234, 13%, 31%); + @surface0: hsl(237, 16%, 23%); + @base: hsl(240, 21%, 15%); + @mantle: hsl(240, 21%, 12%); + @crust: hsl(240, 23%, 9%); + } + + /* ----- Accent Mixins ----- */ + #accent(@accent) when (@accent = rosewater) { + @accent-color: @rosewater; + } + #accent(@accent) when (@accent = flamingo) { + @accent-color: @flamingo; + } + #accent(@accent) when (@accent = pink) { + @accent-color: @pink; + } + #accent(@accent) when (@accent = mauve) { + @accent-color: @mauve; + } + #accent(@accent) when (@accent = red) { + @accent-color: @red; + } + #accent(@accent) when (@accent = maroon) { + @accent-color: @maroon; + } + #accent(@accent) when (@accent = peach) { + @accent-color: @peach; + } + #accent(@accent) when (@accent = yellow) { + @accent-color: @yellow; + } + #accent(@accent) when (@accent = green) { + @accent-color: @green; + } + #accent(@accent) when (@accent = teal) { + @accent-color: @teal; + } + #accent(@accent) when (@accent = blue) { + @accent-color: @blue; + } + #accent(@accent) when (@accent = sapphire) { + @accent-color: @sapphire; + } + #accent(@accent) when (@accent =sky) { + @accent-color: @sky; + } + #accent(@accent) when (@accent = lavender) { + @accent-color: @lavender; + } + #accent(@accent) when (@accent = subtext0) { + @accent-color: @subtext0; + } + + #nixos-search { + /* 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; + } + } +} diff --git a/styles/proton/README.md b/styles/proton/README.md new file mode 100644 index 0000000..6e5d1b3 --- /dev/null +++ b/styles/proton/README.md @@ -0,0 +1,57 @@ + + + +

+ Logo
+ + Catppuccin for Proton + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ +## Usage +Open Proton Mail and click the settings in the top right, then set the base theme to `Proton` if you are using the Latte flavor, otherwise set it to `Carbon` + + + +## ๐Ÿ’ Current Maintainer(s) +- [soya_daizu](https://github.com/soya-daizu) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/proton/assets/catwalk.webp b/styles/proton/assets/catwalk.webp new file mode 100644 index 0000000..5543041 --- /dev/null +++ b/styles/proton/assets/catwalk.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..13156c6 --- /dev/null +++ b/styles/proton/assets/frappe.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..f78bca0 --- /dev/null +++ b/styles/proton/assets/latte.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..95d20de --- /dev/null +++ b/styles/proton/assets/macchiato.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..5d72bc5 --- /dev/null +++ b/styles/proton/assets/mocha.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..925301c --- /dev/null +++ b/styles/proton/catppuccin.user.css @@ -0,0 +1,257 @@ +/* ==UserStyle== +@name Proton Catppuccin +@namespace github.com/catppuccin/userstyles/styles/proton +@version 0.1.1 +@description Soothing pastel theme for Proton services +@author Catppuccin +@preprocessor less +@var select Theme "Theme" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColour "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink: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("https://(account|mail|drive|calendar).proton.me/.*$") { + + :root { + #catppuccin(@Theme, @accentColour); + } + + @catppuccin: { + @latte: { + @rosewater: #dc8a78; + @flamingo: #dd7878; + @pink: #ea76cb; + @mauve: #8839ef; + @red: #d20f39; + @maroon: #e64553; + @peach: #fe640b; + @yellow: #df8e1d; + @green: #40a02b; + @teal: #179299; + @sky: #04a5e5; + @sapphire: #209fb5; + @blue: #1e66f5; + @lavender: #7287fd; + @text: #4c4f69; + @subtext1: #5c5f77; + @subtext0: #6c6f85; + @overlay2: #7c7f93; + @overlay1: #8c8fa1; + @overlay0: #9ca0b0; + @surface2: #acb0be; + @surface1: #bcc0cc; + @surface0: #ccd0da; + @base: #eff1f5; + @mantle: #e6e9ef; + @crust: #dce0e8; + } + @frappe: { + @rosewater: #f2d5cf; + @flamingo: #eebebe; + @pink: #f4b8e4; + @mauve: #ca9ee6; + @red: #e78284; + @maroon: #ea999c; + @peach: #ef9f76; + @yellow: #e5c890; + @green: #a6d189; + @teal: #81c8be; + @sky: #99d1db; + @sapphire: #85c1dc; + @blue: #8caaee; + @lavender: #babbf1; + @text: #c6d0f5; + @subtext1: #b5bfe2; + @subtext0: #a5adce; + @overlay2: #949cbb; + @overlay1: #838ba7; + @overlay0: #737994; + @surface2: #626880; + @surface1: #51576d; + @surface0: #414559; + @base: #303446; + @mantle: #292c3c; + @crust: #232634; + } + @macchiato: { + @rosewater: #f4dbd6; + @flamingo: #f0c6c6; + @pink: #f5bde6; + @mauve: #c6a0f6; + @red: #ed8796; + @maroon: #ee99a0; + @peach: #f5a97f; + @yellow: #eed49f; + @green: #a6da95; + @teal: #8bd5ca; + @sky: #91d7e3; + @sapphire: #7dc4e4; + @blue: #8aadf4; + @lavender: #b7bdf8; + @text: #cad3f5; + @subtext1: #b8c0e0; + @subtext0: #a5adcb; + @overlay2: #939ab7; + @overlay1: #8087a2; + @overlay0: #6e738d; + @surface2: #5b6078; + @surface1: #494d64; + @surface0: #363a4f; + @base: #24273a; + @mantle: #1e2030; + @crust: #181926; + } + @mocha: { + @rosewater: #f5e0dc; + @flamingo: #f2cdcd; + @pink: #f5c2e7; + @mauve: #cba6f7; + @red: #f38ba8; + @maroon: #eba0ac; + @peach: #fab387; + @yellow: #f9e2af; + @green: #a6e3a1; + @teal: #94e2d5; + @sky: #89dceb; + @sapphire: #74c7ec; + @blue: #89b4fa; + @lavender: #b4befe; + @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-colour: @catppuccin[@@lookup][@@accent]; + + &, + .ui-prominent, + .ui-standard { + --primary: @accent-colour; + --primary-contrast: @mantle; + --signal-danger-minor-2: darken(@maroon, 50%); + --signal-danger-minor-1: darken(@maroon, 30%); + --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: darken(@peach, 50%); + --signal-warning-minor-1: darken(@peach, 30%); + --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: darken(@green, 50%); + --signal-success-minor-1: darken(@green, 30%); + --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: darken(@blue, 50%); + --signal-info-minor-1: darken(@blue, 30%); + --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: darken(@accent-colour, 50%); + --interaction-norm-minor-1: darken(@accent-colour, 30%); + --interaction-norm: @accent-colour; + --interaction-norm-major-1: lighten(@accent-colour, 30%); + --interaction-norm-major-2: lighten(@accent-colour, 20%); + --interaction-norm-major-3: lighten(@accent-colour, 10%); + --interaction-norm-contrast: @mantle; + --interaction-weak-minor-2: darken(@overlay0, 50%); + --interaction-weak-minor-1: darken(@overlay0, 30%); + --interaction-weak: @overlay0; + --interaction-weak-major-1: lighten(@overlay0, 10%); + --interaction-weak-major-2: lighten(@overlay0, 20%); + --interaction-weak-major-3: lighten(@overlay0, 30%); + --interaction-weak-contrast: @text; + --text-norm: @text; + --text-weak: @subtext0; + --text-hint: @subtext1; + --text-disabled: @overlay1; + --text-invert: invert(@text); + --field-norm: @overlay2; + --field-hover: @overlay1; + --field-disabled: @overlay0; + --field-focus: @accent-colour; + --field-highlight: fadeout(@accent-colour, 30%); + --border-norm: @overlay0; + --border-weak: @overlay1; + --background-norm: @base; + --background-weak: @mantle; + --background-strong: @crust; + --interaction-default: transparent; + --interaction-default-hover: fadeout(@accent-colour, 30%); + --interaction-default-active: fadeout(@accent-colour, 40%); + --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; + --optional-tooltip-background-color: var(--background-weak); + --favorite-icon-color: var(--optional-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-selected-text-color); + } + } +} \ No newline at end of file diff --git a/styles/reddit/README.md b/styles/reddit/README.md new file mode 100644 index 0000000..3defd05 --- /dev/null +++ b/styles/reddit/README.md @@ -0,0 +1,56 @@ + + + +

+ Logo
+ + Catppuccin for Reddit + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ + + + + +## ๐Ÿ’ Current Maintainer(s) +- [jayylmao](https://github.com/jayylmao) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/reddit/assets/catwalk.webp b/styles/reddit/assets/catwalk.webp new file mode 100644 index 0000000..9636f0b --- /dev/null +++ b/styles/reddit/assets/catwalk.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..4cf69e5 --- /dev/null +++ b/styles/reddit/assets/frappe.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..ab687bb --- /dev/null +++ b/styles/reddit/assets/latte.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..53926c0 --- /dev/null +++ b/styles/reddit/assets/macchiato.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..0dfae2e --- /dev/null +++ b/styles/reddit/assets/mocha.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..b6ea4da --- /dev/null +++ b/styles/reddit/catppuccin.user.css @@ -0,0 +1,1145 @@ +/* ==UserStyle== +@name Reddit Catppuccin +@namespace github.com/catppuccin/userstyles/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/searxng/README.md b/styles/searxng/README.md new file mode 100644 index 0000000..51f753c --- /dev/null +++ b/styles/searxng/README.md @@ -0,0 +1,57 @@ + + + +

+ Logo
+ + Catppuccin for SearXNG + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ + + + + +## ๐Ÿ’ Current Maintainer(s) +- [Sekki](https://github.com/Sekki21956) +- [Ryan Cao](https://github.com/ryanccn) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/searxng/assets/catwalk.webp b/styles/searxng/assets/catwalk.webp new file mode 100644 index 0000000..04b3afe --- /dev/null +++ b/styles/searxng/assets/catwalk.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..cd11156 --- /dev/null +++ b/styles/searxng/assets/frappe.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..8635590 --- /dev/null +++ b/styles/searxng/assets/latte.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..ae7cbb5 --- /dev/null +++ b/styles/searxng/assets/macchiato.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..58b4dd3 --- /dev/null +++ b/styles/searxng/assets/mocha.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..0f662d6 --- /dev/null +++ b/styles/searxng/catppuccin.user.css @@ -0,0 +1,386 @@ +/* ==UserStyle== +@name SearXNG Catppuccin +@namespace github.com/catppuccin/userstyles/styles/searxng +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/searxng +@version 0.2.2 +@description Soothing pastel theme for SearXNG +@author Catppuccin +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/searxng/catppuccin.user.css +@preprocessor less +@var select lightTheme "Light Theme" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkTheme "Dark Theme" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] +@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, + :root.theme-dark { + #catppuccin(@darkTheme); + } + :root.theme-light { + #catppuccin(@lightTheme); + } + + #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-base-font: @text; + --color-base-background: @base; + --color-base-background-mobile: @base; + --color-url-font: @lavender; + --color-url-visited-font: @mauve; + --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: @lavender; + --color-btn-font: @base; + --color-show-btn-background: @lavender; + --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: @lavender; + --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: @mauve; + --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: @lavender; + --color-result-description-highlight-font: @text; + --color-result-link-font: @lavender; + --color-result-link-font-highlight: @lavender; + --color-result-link-visited-font: @mauve; + --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: @lavender; + --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: @blue; + --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; + } + if (additions) { + article.result { + background-color: var(--color-result-background); + border-radius: .75em; + padding: .75em; + margin: .5em; + } + article.category-images { + padding-bottom: 4em; + } + } + } +} \ No newline at end of file diff --git a/styles/tutanota/README.md b/styles/tutanota/README.md new file mode 100644 index 0000000..8e1ba9a --- /dev/null +++ b/styles/tutanota/README.md @@ -0,0 +1,59 @@ + + + +

+ Logo
+ + Catppuccin for Tutanota + +

+ +

+ + +

+ +

+ +

+ +## 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. + + + + +## ๐Ÿ’ Current Maintainer(s) +- [Ryan Cao](https://github.com/ryanccn) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/tutanota/assets/catwalk.webp b/styles/tutanota/assets/catwalk.webp new file mode 100644 index 0000000..d3ceae9 --- /dev/null +++ b/styles/tutanota/assets/catwalk.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..6e585b6 --- /dev/null +++ b/styles/tutanota/assets/frappe.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..be15591 --- /dev/null +++ b/styles/tutanota/assets/latte.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..b9f6090 --- /dev/null +++ b/styles/tutanota/assets/macchiato.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..aa9441c --- /dev/null +++ b/styles/tutanota/assets/mocha.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..a401241 --- /dev/null +++ b/styles/tutanota/catppuccin.user.css @@ -0,0 +1,242 @@ +/* ==UserStyle== +@name Tutanota Catppuccin +@namespace github.com/catppuccin/userstyles/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 +@preprocessor less +@var select Theme "Theme" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColour "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink: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("mail.tutanota.com") { + + :root { + #catppuccin(@Theme, @accentColour); + } + + @catppuccin: { + @latte: { + @rosewater: #dc8a78; + @flamingo: #dd7878; + @pink: #ea76cb; + @mauve: #8839ef; + @red: #d20f39; + @maroon: #e64553; + @peach: #fe640b; + @yellow: #df8e1d; + @green: #40a02b; + @teal: #179299; + @sky: #04a5e5; + @sapphire: #209fb5; + @blue: #1e66f5; + @lavender: #7287fd; + @text: #4c4f69; + @subtext1: #5c5f77; + @subtext0: #6c6f85; + @overlay2: #7c7f93; + @overlay1: #8c8fa1; + @overlay0: #9ca0b0; + @surface2: #acb0be; + @surface1: #bcc0cc; + @surface0: #ccd0da; + @base: #eff1f5; + @mantle: #e6e9ef; + @crust: #dce0e8; + } + @frappe: { + @rosewater: #f2d5cf; + @flamingo: #eebebe; + @pink: #f4b8e4; + @mauve: #ca9ee6; + @red: #e78284; + @maroon: #ea999c; + @peach: #ef9f76; + @yellow: #e5c890; + @green: #a6d189; + @teal: #81c8be; + @sky: #99d1db; + @sapphire: #85c1dc; + @blue: #8caaee; + @lavender: #babbf1; + @text: #c6d0f5; + @subtext1: #b5bfe2; + @subtext0: #a5adce; + @overlay2: #949cbb; + @overlay1: #838ba7; + @overlay0: #737994; + @surface2: #626880; + @surface1: #51576d; + @surface0: #414559; + @base: #303446; + @mantle: #292c3c; + @crust: #232634; + } + @macchiato: { + @rosewater: #f4dbd6; + @flamingo: #f0c6c6; + @pink: #f5bde6; + @mauve: #c6a0f6; + @red: #ed8796; + @maroon: #ee99a0; + @peach: #f5a97f; + @yellow: #eed49f; + @green: #a6da95; + @teal: #8bd5ca; + @sky: #91d7e3; + @sapphire: #7dc4e4; + @blue: #8aadf4; + @lavender: #b7bdf8; + @text: #cad3f5; + @subtext1: #b8c0e0; + @subtext0: #a5adcb; + @overlay2: #939ab7; + @overlay1: #8087a2; + @overlay0: #6e738d; + @surface2: #5b6078; + @surface1: #494d64; + @surface0: #363a4f; + @base: #24273a; + @mantle: #1e2030; + @crust: #181926; + } + @mocha: { + @rosewater: #f5e0dc; + @flamingo: #f2cdcd; + @pink: #f5c2e7; + @mauve: #cba6f7; + @red: #f38ba8; + @maroon: #eba0ac; + @peach: #fab387; + @yellow: #f9e2af; + @green: #a6e3a1; + @teal: #94e2d5; + @sky: #89dceb; + @sapphire: #74c7ec; + @blue: #89b4fa; + @lavender: #b4befe; + @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-colour: @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; + } + } +} \ No newline at end of file diff --git a/styles/twitch/README.md b/styles/twitch/README.md new file mode 100644 index 0000000..8abd8af --- /dev/null +++ b/styles/twitch/README.md @@ -0,0 +1,60 @@ + + + +

+ Logo
+ + Catppuccin for Twitch + +

+ +

+ + +

+ +

+ +

+ +## 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. + + + + +## ๐Ÿ’ Current Maintainer(s) +- [GitMuslim](https://github.com/GitMuslim) +- [Isabel](https://github.com/isabelroses) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/twitch/assets/catwalk.webp b/styles/twitch/assets/catwalk.webp new file mode 100644 index 0000000..e68f580 --- /dev/null +++ b/styles/twitch/assets/catwalk.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..b544fe3 --- /dev/null +++ b/styles/twitch/assets/frappe.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..cfbe23d --- /dev/null +++ b/styles/twitch/assets/latte.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..d3a48b8 --- /dev/null +++ b/styles/twitch/assets/macchiato.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..637c5c2 --- /dev/null +++ b/styles/twitch/assets/mocha.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..b912b85 --- /dev/null +++ b/styles/twitch/catppuccin.user.css @@ -0,0 +1,535 @@ +/* ==UserStyle== +@name Twitch Catppuccin +@namespace github.com/catppuccin/twitch +@homepageURL https://github.com/catppuccin/userstyles/styles/twitch +@version 1.1.2 +@description Soothing pastel theme for Twitch +@author Catppuccin - mustafakhalaf-git +@preprocessor less +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/twitch/catppuccin.user.css +@license MIT + +@var select lightTheme "Light Variant" ["latte:Latte"] +@var select darkTheme "Dark Variant" ["frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"] +@var select accentColour "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink: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("twitch.tv") { + + @catppuccin: { + @latte: { + @rosewater: #dc8a78; + @flamingo: #dd7878; + @pink: #ea76cb; + @mauve: #8839ef; + @red: #d20f39; + @maroon: #e64553; + @peach: #fe640b; + @yellow: #df8e1d; + @green: #40a02b; + @teal: #179299; + @sky: #04a5e5; + @sapphire: #209fb5; + @blue: #1e66f5; + @lavender: #7287fd; + @text: #4c4f69; + @subtext1: #5c5f77; + @subtext0: #6c6f85; + @overlay2: #7c7f93; + @overlay1: #8c8fa1; + @overlay0: #9ca0b0; + @surface2: #acb0be; + @surface1: #bcc0cc; + @surface0: #ccd0da; + @base: #eff1f5; + @mantle: #e6e9ef; + @crust: #dce0e8; + } + @frappe: { + @rosewater: #f2d5cf; + @flamingo: #eebebe; + @pink: #f4b8e4; + @mauve: #ca9ee6; + @red: #e78284; + @maroon: #ea999c; + @peach: #ef9f76; + @yellow: #e5c890; + @green: #a6d189; + @teal: #81c8be; + @sky: #99d1db; + @sapphire: #85c1dc; + @blue: #8caaee; + @lavender: #babbf1; + @text: #c6d0f5; + @subtext1: #b5bfe2; + @subtext0: #a5adce; + @overlay2: #949cbb; + @overlay1: #838ba7; + @overlay0: #737994; + @surface2: #626880; + @surface1: #51576d; + @surface0: #414559; + @base: #303446; + @mantle: #292c3c; + @crust: #232634; + } + @macchiato: { + @rosewater: #f4dbd6; + @flamingo: #f0c6c6; + @pink: #f5bde6; + @mauve: #c6a0f6; + @red: #ed8796; + @maroon: #ee99a0; + @peach: #f5a97f; + @yellow: #eed49f; + @green: #a6da95; + @teal: #8bd5ca; + @sky: #91d7e3; + @sapphire: #7dc4e4; + @blue: #8aadf4; + @lavender: #b7bdf8; + @text: #cad3f5; + @subtext1: #b8c0e0; + @subtext0: #a5adcb; + @overlay2: #939ab7; + @overlay1: #8087a2; + @overlay0: #6e738d; + @surface2: #5b6078; + @surface1: #494d64; + @surface0: #363a4f; + @base: #24273a; + @mantle: #1e2030; + @crust: #181926; + } + @mocha: { + @rosewater: #f5e0dc; + @flamingo: #f2cdcd; + @pink: #f5c2e7; + @mauve: #cba6f7; + @red: #f38ba8; + @maroon: #eba0ac; + @peach: #fab387; + @yellow: #f9e2af; + @green: #a6e3a1; + @teal: #94e2d5; + @sky: #89dceb; + @sapphire: #74c7ec; + @blue: #89b4fa; + @lavender: #b4befe; + @text: #cdd6f4; + @subtext1: #bac2de; + @subtext0: #a6adc8; + @overlay2: #9399b2; + @overlay1: #7f849c; + @overlay0: #6c7086; + @surface2: #585b70; + @surface1: #45475a; + @surface0: #313244; + @base: #1e1e2e; + @mantle: #181825; + @crust: #11111b; + } + } + + .tw-root--theme-dark { + #catppuccin(@darkTheme, @accentColour); + } + .tw-root--theme-light { + #catppuccin(@lightTheme, @accentColour); + } + + #catppuccin(@lookup, @accent) { + @rosewater: @catppuccin[@@lookup][@rosewater]; + @flamingo: @catppuccin[@@lookup][@flamingo]; + @pink: @catppuccin[@@lookup][@pink]; + @mauve: @catppuccin[@@lookup][@mauve]; + @red: @catppuccin[@@lookup][@red]; + @maroon: @catppuccin[@@lookup][@maroon]; + @peach: @catppuccin[@@lookup][@peach]; + @yellow: @catppuccin[@@lookup][@yellow]; + @green: @catppuccin[@@lookup][@green]; + @teal: @catppuccin[@@lookup][@teal]; + @sky: @catppuccin[@@lookup][@sky]; + @sapphire: @catppuccin[@@lookup][@sapphire]; + @blue: @catppuccin[@@lookup][@blue]; + @lavender: @catppuccin[@@lookup][@lavender]; + @text: @catppuccin[@@lookup][@text]; + @subtext1: @catppuccin[@@lookup][@subtext1]; + @subtext0: @catppuccin[@@lookup][@subtext0]; + @overlay2: @catppuccin[@@lookup][@overlay2]; + @overlay1: @catppuccin[@@lookup][@overlay1]; + @overlay0: @catppuccin[@@lookup][@overlay0]; + @surface2: @catppuccin[@@lookup][@surface2]; + @surface1: @catppuccin[@@lookup][@surface1]; + @surface0: @catppuccin[@@lookup][@surface0]; + @base: @catppuccin[@@lookup][@base]; + @mantle: @catppuccin[@@lookup][@mantle]; + @crust: @catppuccin[@@lookup][@crust]; + @accent-colour: @catppuccin[@@lookup][@@accent]; + + & body { + background-color: @base; + } + + & .carousel-metadata { + background: @crust; + } + & .carousel-metadata--fadeout { + background: @crust; + } + .chat-line__message-body--highlighted { + background-color: @accent-colour; + color: @crust; + border-color: @accent-colour; + } + .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-colour; + } + } + .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-colour !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: @text; + --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-colour; + --color-twitch-purple: @accent-colour; + --color-twitch-purple-4: @accent-colour; + --color-twitch-purple-5: @accent-colour; + --color-twitch-purple-6: @accent-colour; + --color-twitch-purple-7: @accent-colour; + --color-twitch-purple-8: @accent-colour; + --color-twitch-purple-9: @accent-colour; + --color-twitch-purple-10: @accent-colour; + --color-twitch-purple-11: @accent-colour; + --color-twitch-purple-12: @accent-colour; + --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") { + @catppuccin: { + @latte: { + @rosewater: #dc8a78; + @flamingo: #dd7878; + @pink: #ea76cb; + @mauve: #8839ef; + @red: #d20f39; + @maroon: #e64553; + @peach: #fe640b; + @yellow: #df8e1d; + @green: #40a02b; + @teal: #179299; + @sky: #04a5e5; + @sapphire: #209fb5; + @blue: #1e66f5; + @lavender: #7287fd; + @text: #4c4f69; + @subtext1: #5c5f77; + @subtext0: #6c6f85; + @overlay2: #7c7f93; + @overlay1: #8c8fa1; + @overlay0: #9ca0b0; + @surface2: #acb0be; + @surface1: #bcc0cc; + @surface0: #ccd0da; + @base: #eff1f5; + @mantle: #e6e9ef; + @crust: #dce0e8; + } + @frappe: { + @rosewater: #f2d5cf; + @flamingo: #eebebe; + @pink: #f4b8e4; + @mauve: #ca9ee6; + @red: #e78284; + @maroon: #ea999c; + @peach: #ef9f76; + @yellow: #e5c890; + @green: #a6d189; + @teal: #81c8be; + @sky: #99d1db; + @sapphire: #85c1dc; + @blue: #8caaee; + @lavender: #babbf1; + @text: #c6d0f5; + @subtext1: #b5bfe2; + @subtext0: #a5adce; + @overlay2: #949cbb; + @overlay1: #838ba7; + @overlay0: #737994; + @surface2: #626880; + @surface1: #51576d; + @surface0: #414559; + @base: #303446; + @mantle: #292c3c; + @crust: #232634; + } + @macchiato: { + @rosewater: #f4dbd6; + @flamingo: #f0c6c6; + @pink: #f5bde6; + @mauve: #c6a0f6; + @red: #ed8796; + @maroon: #ee99a0; + @peach: #f5a97f; + @yellow: #eed49f; + @green: #a6da95; + @teal: #8bd5ca; + @sky: #91d7e3; + @sapphire: #7dc4e4; + @blue: #8aadf4; + @lavender: #b7bdf8; + @text: #cad3f5; + @subtext1: #b8c0e0; + @subtext0: #a5adcb; + @overlay2: #939ab7; + @overlay1: #8087a2; + @overlay0: #6e738d; + @surface2: #5b6078; + @surface1: #494d64; + @surface0: #363a4f; + @base: #24273a; + @mantle: #1e2030; + @crust: #181926; + } + @mocha: { + @rosewater: #f5e0dc; + @flamingo: #f2cdcd; + @pink: #f5c2e7; + @mauve: #cba6f7; + @red: #f38ba8; + @maroon: #eba0ac; + @peach: #fab387; + @yellow: #f9e2af; + @green: #a6e3a1; + @teal: #94e2d5; + @sky: #89dceb; + @sapphire: #74c7ec; + @blue: #89b4fa; + @lavender: #b4befe; + @text: #cdd6f4; + @subtext1: #bac2de; + @subtext0: #a6adc8; + @overlay2: #9399b2; + @overlay1: #7f849c; + @overlay0: #6c7086; + @surface2: #585b70; + @surface1: #45475a; + @surface0: #313244; + @base: #1e1e2e; + @mantle: #181825; + @crust: #11111b; + } + } + + .tw-root--theme-dark { + #catppuccin(@darkTheme); + } + .tw-root--theme-light { + #catppuccin(@lightTheme); + } + + #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; + } + } +} \ No newline at end of file diff --git a/styles/vercel/README.md b/styles/vercel/README.md new file mode 100644 index 0000000..9100af2 --- /dev/null +++ b/styles/vercel/README.md @@ -0,0 +1,56 @@ + + + +

+ Logo
+ + Catppuccin for Vercel + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ + + + + +## ๐Ÿ’ Current Maintainer(s) +- [Ryan Cao](https://github.com/ryanccn) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/vercel/assets/catwalk.webp b/styles/vercel/assets/catwalk.webp new file mode 100644 index 0000000..aed9bfe --- /dev/null +++ b/styles/vercel/assets/catwalk.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..ff74ecf --- /dev/null +++ b/styles/vercel/assets/frappe.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..c24ab64 --- /dev/null +++ b/styles/vercel/assets/latte.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..581d7da --- /dev/null +++ b/styles/vercel/assets/macchiato.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..b9adfb2 --- /dev/null +++ b/styles/vercel/assets/mocha.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..03789f6 --- /dev/null +++ b/styles/vercel/catppuccin.user.css @@ -0,0 +1,200 @@ +/* ==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 +@preprocessor less +@var select Theme "Theme" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] +==/UserStyle== */ +@-moz-document domain("vercel.com") { + + :root { + #catppuccin(@Theme); + } + + @catppuccin: { + @latte: { + @rosewater: #dc8a78; + @flamingo: #dd7878; + @pink: #ea76cb; + @mauve: #8839ef; + @red: #d20f39; + @maroon: #e64553; + @peach: #fe640b; + @yellow: #df8e1d; + @green: #40a02b; + @teal: #179299; + @sky: #04a5e5; + @sapphire: #209fb5; + @blue: #1e66f5; + @lavender: #7287fd; + @text: #4c4f69; + @subtext1: #5c5f77; + @subtext0: #6c6f85; + @overlay2: #7c7f93; + @overlay1: #8c8fa1; + @overlay0: #9ca0b0; + @surface2: #acb0be; + @surface1: #bcc0cc; + @surface0: #ccd0da; + @base: #eff1f5; + @mantle: #e6e9ef; + @crust: #dce0e8; + } + @frappe: { + @rosewater: #f2d5cf; + @flamingo: #eebebe; + @pink: #f4b8e4; + @mauve: #ca9ee6; + @red: #e78284; + @maroon: #ea999c; + @peach: #ef9f76; + @yellow: #e5c890; + @green: #a6d189; + @teal: #81c8be; + @sky: #99d1db; + @sapphire: #85c1dc; + @blue: #8caaee; + @lavender: #babbf1; + @text: #c6d0f5; + @subtext1: #b5bfe2; + @subtext0: #a5adce; + @overlay2: #949cbb; + @overlay1: #838ba7; + @overlay0: #737994; + @surface2: #626880; + @surface1: #51576d; + @surface0: #414559; + @base: #303446; + @mantle: #292c3c; + @crust: #232634; + } + @macchiato: { + @rosewater: #f4dbd6; + @flamingo: #f0c6c6; + @pink: #f5bde6; + @mauve: #c6a0f6; + @red: #ed8796; + @maroon: #ee99a0; + @peach: #f5a97f; + @yellow: #eed49f; + @green: #a6da95; + @teal: #8bd5ca; + @sky: #91d7e3; + @sapphire: #7dc4e4; + @blue: #8aadf4; + @lavender: #b7bdf8; + @text: #cad3f5; + @subtext1: #b8c0e0; + @subtext0: #a5adcb; + @overlay2: #939ab7; + @overlay1: #8087a2; + @overlay0: #6e738d; + @surface2: #5b6078; + @surface1: #494d64; + @surface0: #363a4f; + @base: #24273a; + @mantle: #1e2030; + @crust: #181926; + } + @mocha: { + @rosewater: #f5e0dc; + @flamingo: #f2cdcd; + @pink: #f5c2e7; + @mauve: #cba6f7; + @red: #f38ba8; + @maroon: #eba0ac; + @peach: #fab387; + @yellow: #f9e2af; + @green: #a6e3a1; + @teal: #94e2d5; + @sky: #89dceb; + @sapphire: #74c7ec; + @blue: #89b4fa; + @lavender: #b4befe; + @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; + --_1psdadq8: @overlay0; + --_1psdadq1n: @maroon; + + & when (Theme = "Latte") { + div.jsx-138561840.menu > div.item.hover:hover { + background-color: var(--accents-2) !important; + } + + div.jsx-138561840.menu > div.item.active { + background-color: transparent !important; + } + } + + svg { + --geist-stroke: var(--geist-background) !important; + } + + .button_ghost__sBWMh { + --lighten-color: transparent !important; + } + + .feedback-input_geist-feedback-input__PxEnJ:hover .feedback-input_feedback-wrapper__mCwSO .feedback-input_placeholder__ZKdJ6 { + color: var(--geist-foreground); + } + } +} \ No newline at end of file diff --git a/styles/wikiwand/README.md b/styles/wikiwand/README.md new file mode 100644 index 0000000..855658d --- /dev/null +++ b/styles/wikiwand/README.md @@ -0,0 +1,56 @@ + + + +

+ Logo
+ + Catppuccin for WikiWand + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ + + + + +## ๐Ÿ’ Current Maintainer(s) +- [Tnixc](https://github.com/tnixc) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/wikiwand/assets/catwalk.webp b/styles/wikiwand/assets/catwalk.webp new file mode 100644 index 0000000..f2e3f94 --- /dev/null +++ b/styles/wikiwand/assets/catwalk.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..0b2530e --- /dev/null +++ b/styles/wikiwand/assets/frappe.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..be318f8 --- /dev/null +++ b/styles/wikiwand/assets/latte.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..222aa15 --- /dev/null +++ b/styles/wikiwand/assets/macchiato.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..11db39f --- /dev/null +++ b/styles/wikiwand/assets/mocha.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..a02ef92 --- /dev/null +++ b/styles/wikiwand/catppuccin.user.css @@ -0,0 +1,465 @@ +/* ==UserStyle== +@name Wikiwand Catppuccin +@namespace github.com/catppuccin/userstyles/styles/wikiwand +@version 1.0.1 +@description Soothing pastel theme for wikiwand +@author Catppuccin +@preprocessor less +@var select lightTheme "lightTheme" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkTheme "darkTheme" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColour "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink: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("wikiwand.com") { + + .root_light__Inhun { + #catppuccin(@lightTheme, @accentColour); + } + .root_dark__oGh5X, + .root_auto__Xg3qF, + .root_grey__eKz_h { + #catppuccin(@darkTheme, @accentColour); + } + + @catppuccin: { + @latte: { + @rosewater: #dc8a78; + @flamingo: #dd7878; + @pink: #ea76cb; + @mauve: #8839ef; + @red: #d20f39; + @maroon: #e64553; + @peach: #fe640b; + @yellow: #df8e1d; + @green: #40a02b; + @teal: #179299; + @sky: #04a5e5; + @sapphire: #209fb5; + @blue: #1e66f5; + @lavender: #7287fd; + @text: #4c4f69; + @subtext1: #5c5f77; + @subtext0: #6c6f85; + @overlay2: #7c7f93; + @overlay1: #8c8fa1; + @overlay0: #9ca0b0; + @surface2: #acb0be; + @surface1: #bcc0cc; + @surface0: #ccd0da; + @base: #eff1f5; + @mantle: #e6e9ef; + @crust: #dce0e8; + } + @frappe: { + @rosewater: #f2d5cf; + @flamingo: #eebebe; + @pink: #f4b8e4; + @mauve: #ca9ee6; + @red: #e78284; + @maroon: #ea999c; + @peach: #ef9f76; + @yellow: #e5c890; + @green: #a6d189; + @teal: #81c8be; + @sky: #99d1db; + @sapphire: #85c1dc; + @blue: #8caaee; + @lavender: #babbf1; + @text: #c6d0f5; + @subtext1: #b5bfe2; + @subtext0: #a5adce; + @overlay2: #949cbb; + @overlay1: #838ba7; + @overlay0: #737994; + @surface2: #626880; + @surface1: #51576d; + @surface0: #414559; + @base: #303446; + @mantle: #292c3c; + @crust: #232634; + } + @macchiato: { + @rosewater: #f4dbd6; + @flamingo: #f0c6c6; + @pink: #f5bde6; + @mauve: #c6a0f6; + @red: #ed8796; + @maroon: #ee99a0; + @peach: #f5a97f; + @yellow: #eed49f; + @green: #a6da95; + @teal: #8bd5ca; + @sky: #91d7e3; + @sapphire: #7dc4e4; + @blue: #8aadf4; + @lavender: #b7bdf8; + @text: #cad3f5; + @subtext1: #b8c0e0; + @subtext0: #a5adcb; + @overlay2: #939ab7; + @overlay1: #8087a2; + @overlay0: #6e738d; + @surface2: #5b6078; + @surface1: #494d64; + @surface0: #363a4f; + @base: #24273a; + @mantle: #1e2030; + @crust: #181926; + } + @mocha: { + @rosewater: #f5e0dc; + @flamingo: #f2cdcd; + @pink: #f5c2e7; + @mauve: #cba6f7; + @red: #f38ba8; + @maroon: #eba0ac; + @peach: #fab387; + @yellow: #f9e2af; + @green: #a6e3a1; + @teal: #94e2d5; + @sky: #89dceb; + @sapphire: #74c7ec; + @blue: #89b4fa; + @lavender: #b4befe; + @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-colour: @catppuccin[@@lookup][@@accent]; + + .root_dark__oGh5X, + .root_light__Inhun { + --color-bg: @base; + --color-text: @text; + --color-grey: @subtext0; + --color-table: @surface0; + --color-table-border: @surface0; + --color-link: @accent-colour; + --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-colour; + } + 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-colour; + } + .toggle_label__y7mDQ.toggle_active__l_k3F { + color: @base; + } + .toggle_label__y7mDQ:not(.toggle_active__l_k3F):hover { + color: @accent-colour; + } + .themeBtn_wrapper__KTkHk.themeBtn_active__4gb_I, + .themeBtn_wrapper__KTkHk:hover { + color: @accent-colour; + } + .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-colour !important; + } + div.themeBtn_wrapper__KTkHk:nth-child(3) > p:nth-child(2) > span:nth-child(1)::before { + background-color: @accent-colour; + } + .item_item__uLhiz.item_active__4kaIV { + color: @accent-colour; + } + .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-colour; + } + .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-colour; + } + .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-colour; + } + .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-colour; + 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-colour; + border-color: @accent-colour !important; + } + .audio_dot__jeWOr.audio_active__li6PM { + background-color: @accent-colour; + } + .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-colour; + } + .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-colour; + } + .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-colour; + } + .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-colour; + } + .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-colour; + } + code > a { + color: @accent-colour !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-colour !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-colour; + fill: @accent-colour; + } + } +} \ No newline at end of file diff --git a/styles/youtube/README.md b/styles/youtube/README.md new file mode 100644 index 0000000..95d46be --- /dev/null +++ b/styles/youtube/README.md @@ -0,0 +1,64 @@ + + + +

+ Logo
+ + Catppuccin for YouTube + +

+ +

+ + +

+ +

+ +

+ +## Previews + +
+๐ŸŒป Latte + +
+
+๐Ÿชด Frappรฉ + +
+
+๐ŸŒบ Macchiato + +
+
+๐ŸŒฟ Mocha + +
+ +## Usage +> **Note**
+> Make sure your base YouTube theme is set to **light** mode! + + +## ๐Ÿ™‹ 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) + +## ๐Ÿ’– Past Maintainer(s) +- [Elkrien](https://github.com/elkrien) + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + \ No newline at end of file diff --git a/styles/youtube/assets/catwalk.webp b/styles/youtube/assets/catwalk.webp new file mode 100644 index 0000000..98091db --- /dev/null +++ b/styles/youtube/assets/catwalk.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..e6dfbaf --- /dev/null +++ b/styles/youtube/assets/frappe.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..44f17e4 --- /dev/null +++ b/styles/youtube/assets/latte.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..0f3ca86 --- /dev/null +++ b/styles/youtube/assets/macchiato.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..f495df9 --- /dev/null +++ b/styles/youtube/assets/mocha.webp @@ -0,0 +1,3 @@ +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 new file mode 100644 index 0000000..d93ded9 --- /dev/null +++ b/styles/youtube/catppuccin.user.css @@ -0,0 +1,1150 @@ +/* ==UserStyle== +@name YouTube Catppuccin +@namespace github.com/catppuccin/userstyles/styles/youtube +@homepageURL https://github.com/catppuccin/youtube +@version 3.0.8 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/youtube/catppuccin.user.css +@description Soothing pastel theme for YouTube +@author isabelroses +@license MIT +@preprocessor less +@var select lightTheme "Light Theme" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkTheme "Dark Theme" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColour "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink: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 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(@darkTheme, @accentColour); + #oled(@oledOn); + #logo(@logo); + } + :root { + #catppuccin(@lightTheme, @accentColour); + #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-colour !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-colour: @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-colour !important; + --yt-brand-medium-red: @accent-colour !important; + --yt-brand-light-red: @accent-colour !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-colour, 0.9) !important; + --yt-brand-medium-red-alpha-30: fadeout(@accent-colour, 0.3) !important; + --yt-brand-light-red-alpha-30: fadeout(@accent-colour, 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-colour !important; + --yt-spec-call-to-action-inverse: @accent-colour !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-colour !important; + --yt-spec-brand-icon-active: @accent-colour !important; + --yt-spec-brand-icon-inactive: @overlay1 !important; + --yt-spec-brand-button-background: @accent-colour !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-colour !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-colour !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-colour !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-colour !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-colour !importantr; + --yt-spec-brand-button-background-hover: @accent-colour !important; + --yt-spec-brand-link-text-fadeoutd: fadeout(@accent-colour, 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-colour !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-colour !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-colour !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-transpart: @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-colour !important; + --yt-live-chat-mention-background-color: @accent-colour !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-colour !important; + --yt-live-chat-slider-active-color: @accent-colour !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-colour, 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-colour !important; + --yt-endpoint-visited-color: @accent-colour !important; + --yt-endpoint-hover-color: @accent-colour !important; + + --sb-dark-red-outline: @accent-colour !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-colour !important; + } + + /* genral 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-colour !important; + --light-primary-color: @accent-colour !important; + --dark-primary-color: @blue !important; + --accent-color: @accent-colour !important; + --light-accent-color: @accent-colour !important; + --dark-accent-color: @accent-colour !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-colour !important; + --yt-endpoint-visited-color: @accent-colour !important; + color: @accent-colour !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-colour !important; + --yt-button-payment-background-color: @accent-colour ! 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-colour !important; + &:hover { + background: ligten(@accent-colour, 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-colour !important; + &::before { + background: @accent-colour !important; + } + &::after { + z-index: -1; + } + } + + /* new videos dot */ + #newness-dot { + background-color: @accent-colour !important; + } + + /* subtitle */ + .ytp-chrome-controls .ytp-button[aria-pressed]:after { + background-color: @accent-colour !important; + } + + /* menu items */ + /* checbox subitem */ + .ytp-menuitem[aria-checked=true] .ytp-menuitem-toggle-checkbox { + background: @accent-colour !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-colour !important; + } + } + + .style-scope.ytd-thumbnail-overlay-toggle-button-renderer:hover { + fill: @accent-colour !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-colour !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-colour !important; + } + } + + .sbpqs_a { + color: @accent-colour !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-colour !important; + } + + .ytp-swatch-background-color { + background-color: @accent-colour !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-colour !important; + } + > path:nth-child(2) { + stroke: @accent-colour !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-colour !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-colour !important; + } + } + + /* notification idicator */ + .yt-spec-icon-badge-shape--type-notification .yt-spec-icon-badge-shape__badge { + background-color: @accent-colour !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-colour !important; + color: @text !important; + } + + /* Search border */ + ytd-searchbox[has-focus] #container.ytd-searchbox { + border-color: @accent-colour !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-colour !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-colour !important; + } + } + } + .search-button { + background-color: @mantle !important; + } + } + } + + /* Scrollbar */ + ::-webkit-scrollbar-thumb { + background: @accent-colour !important; + } + + ::-webkit-scrollbar { + width: 8px !important; + } + + ::-webkit-scrollbar-track { + background: @base !important; + } + + ::-webkit-scrollbar-thumb { + background: @accent-colour !important; + } + + /* text highlight */ + ::selection { + background: fadeout(@accent-colour, 80%) !important; + color: @text !important; + } + + ::-moz-selection { + background: fadeout(@accent-colour, 80%) !important; + color: @text !important; + } + } +} +@-moz-document url-prefix('https://www.youtube.com/redirect') { + + /* youtube.com-redirect */ + :root[dark] { + #catppuccin(@darkTheme, @accentColour); + } + :root { + #catppuccin(@lightTheme, @accentColour); + } + + #catppuccin(@lookup, @accent) { + + @rosewater: @catppuccin[@@lookup][@rosewater]; + @flamingo: @catppuccin[@@lookup][@flamingo]; + @pink: @catppuccin[@@lookup][@pink]; + @mauve: @catppuccin[@@lookup][@mauve]; + @red: @catppuccin[@@lookup][@red]; + @maroon: @catppuccin[@@lookup][@maroon]; + @peach: @catppuccin[@@lookup][@peach]; + @yellow: @catppuccin[@@lookup][@yellow]; + @green: @catppuccin[@@lookup][@green]; + @teal: @catppuccin[@@lookup][@teal]; + @sky: @catppuccin[@@lookup][@sky]; + @sapphire: @catppuccin[@@lookup][@sapphire]; + @blue: @catppuccin[@@lookup][@blue]; + @lavender: @catppuccin[@@lookup][@lavender]; + @text: @catppuccin[@@lookup][@text]; + @subtext1: @catppuccin[@@lookup][@subtext1]; + @subtext0: @catppuccin[@@lookup][@subtext0]; + @overlay2: @catppuccin[@@lookup][@overlay2]; + @overlay1: @catppuccin[@@lookup][@overlay1]; + @overlay0: @catppuccin[@@lookup][@overlay0]; + @surface2: @catppuccin[@@lookup][@surface2]; + @surface1: @catppuccin[@@lookup][@surface1]; + @surface0: @catppuccin[@@lookup][@surface0]; + @base: @catppuccin[@@lookup][@base]; + @mantle: @catppuccin[@@lookup][@mantle]; + @crust: @catppuccin[@@lookup][@crust]; + @accent-colour: @catppuccin[@@lookup][@@accent]; + + h1 { + color: @text !important; + } + + #redirect-main-text { + color: @overlay2 !important; + .bolded { + color: @accent-colour !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-colour, 80%) !important; + color: @text !important; + } + + ::-moz-selection { + background: fadeout(@accent-colour, 80%) !important; + color: @text !important; + } + } +} + +@-moz-document url-prefix('https://studio.youtube.com') { + + /* studio.youtube.com */ + :root[dark] { + #catppuccin(@darkTheme, @accentColour); + } + :root { + #catppuccin(@lightTheme, @accentColour); + } + + #catppuccin(@lookup, @accent) { + + @rosewater: @catppuccin[@@lookup][@rosewater]; + @flamingo: @catppuccin[@@lookup][@flamingo]; + @pink: @catppuccin[@@lookup][@pink]; + @mauve: @catppuccin[@@lookup][@mauve]; + @red: @catppuccin[@@lookup][@red]; + @maroon: @catppuccin[@@lookup][@maroon]; + @peach: @catppuccin[@@lookup][@peach]; + @yellow: @catppuccin[@@lookup][@yellow]; + @green: @catppuccin[@@lookup][@green]; + @teal: @catppuccin[@@lookup][@teal]; + @sky: @catppuccin[@@lookup][@sky]; + @sapphire: @catppuccin[@@lookup][@sapphire]; + @blue: @catppuccin[@@lookup][@blue]; + @lavender: @catppuccin[@@lookup][@lavender]; + @text: @catppuccin[@@lookup][@text]; + @subtext1: @catppuccin[@@lookup][@subtext1]; + @subtext0: @catppuccin[@@lookup][@subtext0]; + @overlay2: @catppuccin[@@lookup][@overlay2]; + @overlay1: @catppuccin[@@lookup][@overlay1]; + @overlay0: @catppuccin[@@lookup][@overlay0]; + @surface2: @catppuccin[@@lookup][@surface2]; + @surface1: @catppuccin[@@lookup][@surface1]; + @surface0: @catppuccin[@@lookup][@surface0]; + @base: @catppuccin[@@lookup][@base]; + @mantle: @catppuccin[@@lookup][@mantle]; + @crust: @catppuccin[@@lookup][@crust]; + @accent-colour: @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; + + /* additonal 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-colour !important; + --yt-spec-brand-button-background: @accent-colour !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-colour !important; + --ytcp-icon-inactive: @overlay2 !important; + --ytcp-icon-disabled: @overlay2 !important; + --ytcp-icon-active-inverse: @overlay1 !important; + --ytcp-icon-disabled-inverse: @subtext1 !important; + + /* colours */ + --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-colour !important; + --ytcp-focus: @accent-colour !important; + --ytcp-selected-item: @accent-colour !important; + --ytcp-hover-item: @overlay2 !important; + --ytcp-chip-active-focus: @accent-colour !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-colour, 80%) !important; + color: @text !important; + } + + ::-moz-selection { + background: fadeout(@accent-colour, 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; + } \ No newline at end of file diff --git a/template/assets/catwalk.webp b/template/assets/catwalk.webp new file mode 100644 index 0000000..d58ea81 --- /dev/null +++ b/template/assets/catwalk.webp @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:676bd77f20e746524ea7b3ccab01bb124546246d5f880e754f61109fc4191305 +size 21134 diff --git a/template/catppuccin.user.css b/template/catppuccin.user.css new file mode 100644 index 0000000..0878200 --- /dev/null +++ b/template/catppuccin.user.css @@ -0,0 +1,86 @@ +/* ==UserStyle== +@name Catppuccin +@namespace github.com/catppuccin/userstyles/styles/ +@homepageURL https://github.com/catppuccin/userstyles +@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 lightFlavour "Light Flavour" ["latte:Latte*", "frappe:Frappรฉ", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavour "Dark Flavour" ["latte:Latte", "frappe:Frappรฉ", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColour "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink: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== */ +/* 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 Colours per Flavour called via: + * @catppuccin['flavour']['colour'] */ + @catppuccin: { + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; } + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; } + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; } + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @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 Flavour + * @accent โ€“ which is the desired Accent Colour */ + #catppuccin(@lookup, @accent) { + + /* Regular Colours are called with a single `@` as they + * are referencing the Variable directly. */ + background-color: @catppuccin[@@lookup][@base]; + + /* The Accent Colour 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 Flavour + * 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 Flavour and Accent Colour 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 */