diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 2040a3365d..ae8aef241f 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -50,6 +50,7 @@ /styles/perplexity @isabelroses @tnixc /styles/picrew @Nyatalieeee /styles/planet-minecraft @night-lake +/styles/pronouns.page @uncenter /styles/proton @soya-daizu /styles/pypi @trinkey /styles/quizlet @spaghettiosareyummy @@ -60,6 +61,8 @@ /styles/stylus @GitMuslim /styles/syncthing @BlankParticle /styles/tabnews @Guaxinim5573 +/styles/tldraw @GenShibe @uncenter +/styles/trinket @trinkey /styles/tuta @ryanccn /styles/twitch @GitMuslim @isabelroses /styles/twitter @watatomo @@ -67,5 +70,5 @@ /styles/whatsapp-web @FrancoRav /styles/wikipedia @GitMuslim /styles/wikiwand @tnixc -/styles/youtube @isabelroses +/styles/youtube @isabelroses @uncenter /styles/nextjs @Dandraghas \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/userstyle.yml b/.github/ISSUE_TEMPLATE/userstyle.yml index d3874b37df..55f8a122b5 100644 --- a/.github/ISSUE_TEMPLATE/userstyle.yml +++ b/.github/ISSUE_TEMPLATE/userstyle.yml @@ -16,7 +16,7 @@ body: label: What userstyles are you seeing the problem on? description: "Don't worry about the `lbl:` prefix, it allows issues to be automatically labeled!" multiple: true - options: ["lbl:advent-of-code", "lbl:anilist", "lbl:arch-wiki", "lbl:boringproxy", "lbl:brave-search", "lbl:bsky", "lbl:bstats", "lbl:canvas-lms", "lbl:chatgpt", "lbl:chatreplay", "lbl:chess.com", "lbl:cinny", "lbl:codeberg", "lbl:crowdin", "lbl:deepl", "lbl:duckduckgo", "lbl:ecosia", "lbl:elk", "lbl:formative", "lbl:github", "lbl:gmail", "lbl:google", "lbl:google-photos", "lbl:graphite", "lbl:hackage", "lbl:hacker-news", "lbl:holodex", "lbl:homepage", "lbl:hoppscotch", "lbl:hyperpipe", "lbl:ichi.moe", "lbl:inoreader", "lbl:instagram", "lbl:invidious", "lbl:invokeai", "lbl:lastfm", "lbl:lemmy", "lbl:libreddit", "lbl:lichess", "lbl:lingva", "lbl:linkedin", "lbl:mastodon", "lbl:mdn", "lbl:modrinth", "lbl:microsoft-word", "lbl:migadu-webmail", "lbl:minesweeper", "lbl:nitter", "lbl:nixos-search", "lbl:nixos.wiki", "lbl:npm", "lbl:openmediavault", "lbl:paste.rs", "lbl:perplexity", "lbl:picrew", "lbl:pinterest", "lbl:planet-minecraft", "lbl:proton", "lbl:pypi", "lbl:quizlet", "lbl:reddit", "lbl:searxng", "lbl:snapchat-web", "lbl:spotify-web", "lbl:startpage", "lbl:skiff", "lbl:stylus", "lbl:substack", "lbl:syncthing", "lbl:tabnews", "lbl:tuta", "lbl:twitch", "lbl:twitter", "lbl:vercel", "lbl:whatsapp-web", "lbl:wikipedia", "lbl:wikiwand", "lbl:youtube", "lbl:nextjs"] + options: ["lbl:advent-of-code", "lbl:anilist", "lbl:arch-wiki", "lbl:boringproxy", "lbl:brave-search", "lbl:bsky", "lbl:bstats", "lbl:canvas-lms", "lbl:chatgpt", "lbl:chatreplay", "lbl:chess.com", "lbl:cinny", "lbl:codeberg", "lbl:crowdin", "lbl:deepl", "lbl:duckduckgo", "lbl:ecosia", "lbl:elk", "lbl:formative", "lbl:github", "lbl:gmail", "lbl:google", "lbl:google-photos", "lbl:graphite", "lbl:hackage", "lbl:hacker-news", "lbl:holodex", "lbl:homepage", "lbl:hoppscotch", "lbl:hyperpipe", "lbl:ichi.moe", "lbl:inoreader", "lbl:instagram", "lbl:invidious", "lbl:invokeai", "lbl:lastfm", "lbl:lemmy", "lbl:libreddit", "lbl:lichess", "lbl:lingva", "lbl:linkedin", "lbl:mastodon", "lbl:mdn", "lbl:modrinth", "lbl:microsoft-word", "lbl:migadu-webmail", "lbl:minesweeper", "lbl:nitter", "lbl:nixos-search", "lbl:nixos.wiki", "lbl:npm", "lbl:openmediavault", "lbl:paste.rs", "lbl:perplexity", "lbl:picrew", "lbl:pinterest", "lbl:planet-minecraft", "lbl:pronouns.page", "lbl:proton", "lbl:pypi", "lbl:quizlet", "lbl:reddit", "lbl:searxng", "lbl:snapchat-web", "lbl:spotify-web", "lbl:startpage", "lbl:skiff", "lbl:stylus", "lbl:substack", "lbl:syncthing", "lbl:tabnews", "lbl:tldraw", "lbl:trinket", "lbl:tuta", "lbl:twitch", "lbl:twitter", "lbl:vercel", "lbl:whatsapp-web", "lbl:wikipedia", "lbl:wikiwand", "lbl:youtube", "lbl:nextjs"] validations: required: true - type: textarea diff --git a/.github/issue-labeler.yml b/.github/issue-labeler.yml index 52cb881d87..cdfc44277e 100644 --- a/.github/issue-labeler.yml +++ b/.github/issue-labeler.yml @@ -113,6 +113,8 @@ pinterest: - '(lbl:pinterest)' planet-minecraft: - '(lbl:planet-minecraft)' +pronouns.page: + - '(lbl:pronouns.page)' proton: - '(lbl:proton)' pypi: @@ -139,6 +141,10 @@ syncthing: - '(lbl:syncthing)' tabnews: - '(lbl:tabnews)' +tldraw: + - '(lbl:tldraw)' +trinket: + - '(lbl:trinket)' tuta: - '(lbl:tuta)' twitch: diff --git a/.github/labels.yml b/.github/labels.yml index a9f3f0c145..3422a3a544 100644 --- a/.github/labels.yml +++ b/.github/labels.yml @@ -153,7 +153,7 @@ description: npm color: '#ed8796' - name: openmediavault - description: OpenMediaVault + description: openmediavault color: '#91d7e3' - name: paste.rs description: paste.rs @@ -170,6 +170,9 @@ - name: planet-minecraft description: Planet Minecraft color: '#a6da95' +- name: pronouns.page + description: Pronouns.page + color: '#f5bde6' - name: proton description: Proton color: '#c6a0f6' @@ -209,6 +212,12 @@ - name: tabnews description: TabNews color: '#cad3f5' +- name: tldraw + description: tldraw + color: '#cad3f5' +- name: trinket + description: Trinket + color: '#8aadf4' - name: tuta description: Tuta color: '#ee99a0' diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml index cadf7fc56e..f07f421331 100644 --- a/.github/pr-labeler.yml +++ b/.github/pr-labeler.yml @@ -56,6 +56,7 @@ perplexity: styles/perplexity/**/* picrew: styles/picrew/**/* pinterest: styles/pinterest/**/* planet-minecraft: styles/planet-minecraft/**/* +pronouns.page: styles/pronouns.page/**/* proton: styles/proton/**/* pypi: styles/pypi/**/* quizlet: styles/quizlet/**/* @@ -69,6 +70,8 @@ stylus: styles/stylus/**/* substack: styles/substack/**/* syncthing: styles/syncthing/**/* tabnews: styles/tabnews/**/* +tldraw: styles/tldraw/**/* +trinket: styles/trinket/**/* tuta: styles/tuta/**/* twitch: styles/twitch/**/* twitter: styles/twitter/**/* diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml new file mode 100644 index 0000000000..82a190a089 --- /dev/null +++ b/.github/workflows/website.yml @@ -0,0 +1,20 @@ +name: Deploy Website + +on: + workflow_dispatch: + push: + branches: ["main"] + paths: ["scripts/userstyles.yml"] + +jobs: + deploy: + runs-on: ubuntu-latest + environment: website + name: Vercel Deploy + steps: + - name: Deploy via cURL + shell: bash + env: + DEPLOY_HOOK: ${{ secrets.VERCEL_DEPLOY_HOOK }} + run: curl -X POST "$DEPLOY_HOOK" +# yaml-language-server: $schema=https://json.schemastore.org/github-workflow.json diff --git a/.stylelintrc.js b/.stylelintrc.js index 00cf9991f8..e8c8c98dd1 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -24,6 +24,7 @@ export default { "alpha-value-notation": null, "color-function-notation": null, "hue-degree-notation": null, + "keyframes-name-pattern": null, // Needed for Stylus v1.5.35 workaround, see #341 "media-feature-range-notation": "prefix", diff --git a/README.md b/README.md index 15f7d443a0..01cf8063c6 100644 --- a/README.md +++ b/README.md @@ -57,6 +57,14 @@ See instructions on the [GitHub release page](https://github.com/catppuccin/user - Replacing `` with the name of the userstyle. 3. Enjoy! +> [!TIP] +> For decentralized or self-hosted applications, you can apply a theme to one or multiple instances across updates by following the instructions below. +> +> 1. Open the Stylus "Manage" page. +> 2. Click on the userstyle's name in the list. +> 3. Click on **Style settings** in the left panel. +> 4. Enter the URL patterns for your instance(s) in the text box labeled **Custom included sites**. +   ## 👐 Contributing @@ -71,7 +79,10 @@ See [CONTRIBUTING.md](docs/CONTRIBUTING.md). ## 🖌 Userstyles > [!IMPORTANT] -> Userstyles labeled with the "🚧" emoji are looking for maintainers, and may not work as intended. Contributions are still welcome and encouraged. If you would like to become a maintainer, add your username to the `current-maintainers` array in the [userstyles.yml](./scripts/userstyles.yml) file. +> Userstyles labeled with the "🚧" emoji are looking for maintainers, and may +> not work as intended. Contributions are still welcome and encouraged. If you +> would like to become a maintainer, follow the instructions outlined in +> "[Adding yourself as a maintainer](https://github.com/catppuccin/userstyles/blob/main/docs/userstylesyml.md#adding-yourself-as-a-maintainer)." @@ -89,6 +100,7 @@ See [CONTRIBUTING.md](docs/CONTRIBUTING.md). - [npm](styles/npm) - [paste.rs](styles/paste.rs) - [PyPI](styles/pypi) +- [Trinket](styles/trinket) - [Vercel](styles/vercel) @@ -143,10 +155,11 @@ See [CONTRIBUTING.md](docs/CONTRIBUTING.md). - [homepage](styles/homepage) - [inoreader](styles/inoreader) - [Microsoft Word](styles/microsoft-word) -- [OpenMediaVault](styles/openmediavault) +- [openmediavault](styles/openmediavault) - [Proton](styles/proton) - [Stylus](styles/stylus) - [Syncthing](styles/syncthing) +- [tldraw](styles/tldraw)
@@ -176,6 +189,7 @@ See [CONTRIBUTING.md](docs/CONTRIBUTING.md). - [LinkedIn](styles/linkedin) - [Mastodon](styles/mastodon) - [Nitter](styles/nitter) +- [Pronouns.page](styles/pronouns.page) - [Snapchat Web](styles/snapchat-web) - [Twitter](styles/twitter) - [WhatsApp Web](styles/whatsapp-web) diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md index 6fe7c4188c..b3af7fe47c 100644 --- a/docs/CONTRIBUTING.md +++ b/docs/CONTRIBUTING.md @@ -12,22 +12,50 @@ request. 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. -- Catppuccin uses the [Conventional Commits - ](https://www.conventionalcommits.org/en/v1.0.0/) standard for creating explicit and meaningful commit messages. This repository requires pull request _titles_ to be in the conventional commit format, however we do not require it for individual commits within a pull request. -- Update the version in the `==UserStyle==` header of the `catppuccin.user.css` file. This is to enable version control of the style. +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. + +## Recommendations + +### Root Variables + +While writing a userstyle, you may have come across [custom properties / CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), typically wrapped in a `:root` selector. We refer to these variables as "root variables", and they can be thought of as global variables used all across a website. For Catppuccin userstyles, we prefer that these variables are themed (if they exist) rather than individual elements. As the website hopefully uses these variables themselves, it saves yourself a lot of work in theming and maintaining the userstyle. + +### Opinionated Changes + +When writing or updating a userstyle, it is important to keep in mind that different users have different preferences. To avoid lengthy discussion over user interface aesthetics, we have a set of rules for what a userstyle may include; importantly, **changes to font or layout (padding, margin, hiding/moving elements) are prohibited.** + +### 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. +- Catppuccin uses the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) + standard for creating explicit and meaningful commit messages. This repository + requires pull request _titles_ to be in the conventional commit format, + however we do not require it for individual commits within a pull request. +- Update the version in the `==UserStyle==` header of the `catppuccin.user.css` + file. This is to enable version control of the style. - 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) + 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 + 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! +- Changes to docs may need to use [marksman](https://github.com/artempyanykh/marksman) to generate the table of contents. + +## Pull Request Review Process + +```mermaid +graph TD; + A[New userstyle]; + B[Other improvements]; + A --> C[Review by userstyles staff]; + B --> D[Review by maintainer]; + C --> E{Feedback}; + D --> F{Feedback}; + E -->|Changes made| E; + F -->|Changes made| F; + E -->|Approved by userstyles staff| K; + F -->|Approved by maintainer or userstyles staff| L[Merged by maintainer]; + K[Waiting period*] --> M[Merged by userstyles staff]; +``` + +\*A waiting period is usually started if a website is particularly complex or for any other reason could not be thoroughly/completely tested. Waiting periods typically last between 1 and 2 days. diff --git a/docs/how-to-write-a-userstyle.md b/docs/how-to-write-a-userstyle.md index f1b792d056..ee6be484fc 100644 --- a/docs/how-to-write-a-userstyle.md +++ b/docs/how-to-write-a-userstyle.md @@ -8,6 +8,20 @@   +### Table of Contents + + + +- [Prerequisites](#prerequisites) +- [Setup](#setup) + - [Usercss Metadata](#usercss-metadata) + - [`@-moz-document`](#moz-document) + - [The lookup table](#the-lookup-table) +- [The `#catppuccin` mixin](#the-catppuccin-mixin) + - [Applying the theme](#applying-the-theme) + - [Putting it all together](#putting-it-all-together) + + ### Prerequisites - [Stylus](https://github.com/openstyles/stylus) ([Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/) / [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) diff --git a/docs/tips-and-tricks.md b/docs/tips-and-tricks.md index 71116aed61..0dd29d9fd8 100644 --- a/docs/tips-and-tricks.md +++ b/docs/tips-and-tricks.md @@ -4,6 +4,21 @@   +### Table of Contents + + + +- [How can I see my changes in real time?](#how-can-i-see-my-changes-in-real-time) +- [How can I hide sensitive information in preview screenshots?](#how-can-i-hide-sensitive-information-in-preview-screenshots) +- [How do I convert preview images to WebP?](#how-do-i-convert-preview-images-to-webp) + - [Installation](#installation) + - [Usage](#usage) +- [How do I theme images and SVGs?](#how-do-i-theme-images-and-svgs) + - [SVG background images](#svg-background-images) + - [`` elements](#img-elements) +- [How do I set a variable to RGB values?](#how-do-i-set-a-variable-to-rgb-values) + + ### How can I see my changes in real time? See [Stylus Wiki - Initial installation and live reload](https://github.com/openstyles/stylus/wiki/Writing-UserCSS#initial-installation-and-live-reload). @@ -120,3 +135,17 @@ img.twitter-icon { background: url("data:image/svg+xml,@{svg}") no-repeat !important; } ``` + +  + +### How do I set a variable to RGB values? + +You can use the following snippet to get the raw RGB values from a color. + +```less +#rgbify(@color) { + @rgb-raw: red(@color), green(@color), blue(@color); +} + +--ctp-base: #rgbify(@base) []; // -> 30, 30, 46 +``` diff --git a/docs/userstyle-creation.md b/docs/userstyle-creation.md index c3e168329e..76c1e3b2b1 100644 --- a/docs/userstyle-creation.md +++ b/docs/userstyle-creation.md @@ -8,14 +8,17 @@   +### Table of Contents + + + +- [Requesting Userstyles](#requesting-userstyles) +- [Creating Userstyles](#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. +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)!** @@ -38,7 +41,7 @@ To create a userstyle, follow the instructions listed below: userstyles based on the template.** 5. [Write the userstyle](./how-to-write-a-userstyle.md). 6. Edit the [`userstyles.yml`](../scripts/userstyles.yml) file and put in the details - of your port. **More details given below.** + of your port. **More details given in [`userstylesyml.md`](./userstylesyml.md).** 7. Create your image preview. - Take a screenshot of the themed website in each flavor, and then convert all four images [to WebP](./tips-and-tricks.md#how-do-i-convert-preview-images-to-webp) (e.g. `mocha.webp`, `macchiato.webp`, `frappe.webp` & `latte.webp`). @@ -47,78 +50,3 @@ To create a userstyle, follow the instructions listed below: `styles//preview.webp`.** 8. Raise a [pull request](https://github.com/catppuccin/userstyles/compare), making sure to read and fill out the template properly. The title of your pull request should follow the format of `feat(): init`. - -  - -### `userstyles.yml` - -**Please note that the `README`s for each port are auto-generated by scripts -defined in [`scripts/generate/`](../scripts/generate)**, along with many other parts of -this repository. This file, [`userstyles.yml`](../scripts/userstyles.yml), is responsible for holding the -necessary data to auto-generate everything. - -[`userstyles.schema.json`](../scripts/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 would like extra guidance, - you can ask for help in the pull request or join our - [Discord](https://discord.com/servers/catppuccin-907385605422448742). - - `Required Fields:` - - ```yaml - : - name: - # Up to 3 categories are allowed, and having at least one is required. - # The first category is considered the "primary" category and impacts where the userstyle appears on the README. - categories: [] - color: - 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 `icon` key is best explained the schema specification itself. - - The `past-maintainers` key 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: - categories: [, , ] - color: - icon: # OPTIONAL - readme: - app-link: "" - usage: |+ # OPTIONAL - > [!NOTE] - > - faq: # OPTIONAL - - question: - answer: - current-maintainers: [*] - past-maintainers: [*] # OPTIONAL - ``` diff --git a/docs/userstylesyml.md b/docs/userstylesyml.md new file mode 100644 index 0000000000..905bffb888 --- /dev/null +++ b/docs/userstylesyml.md @@ -0,0 +1,143 @@ +

+

📖 userstyles.yml

+

+ +

+ The userstyles.yml file is responsible for tracking all information about each userstyle. +

+ +  + +### Table of Contents + + + +- [Adding a new userstyle](#adding-a-new-userstyle) +- [Adding yourself as a maintainer](#adding-yourself-as-a-maintainer) +- [Removing yourself as a maintainer](#removing-yourself-as-a-maintainer) + + +### Adding a new userstyle + +[`userstyles.schema.json`](../scripts/userstyles.schema.json) is the schema +specification for `userstyles.yml`. The properties in the following instructions are based +on the schema. Please refer to it for clarification. + +1. See [Adding yourself as a maintainer](#adding-yourself-as-a-maintainer). + +2. Locate the `userstyles` section and add your port to the list, following the + existing alphabetical order. + + You should make changes to everything wrapped in `<>` and remove the `<>` + characters. If you need help with any of the fields, refer to + other ports in the `userstyles.yml` file. If you would like extra guidance, + you can ask for help in the pull request or join our + [Discord](https://discord.com/servers/catppuccin-907385605422448742). + + `Required Fields:` + + ```yaml + : + name: + # Up to 3 categories are allowed, and having at least one is required. + # The first category is considered the "primary" category and impacts where the userstyle appears on the README. + categories: [] + color: + 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 `icon` key is best explained the schema specification itself. + + The `past-maintainers` key 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: + categories: [, , ] + color: + icon: # OPTIONAL + readme: + app-link: "" + usage: |+ # OPTIONAL + > [!NOTE] + > + faq: # OPTIONAL + - question: + answer: + current-maintainers: [*] + past-maintainers: [*] # OPTIONAL + ``` + +### Adding yourself as a maintainer + +To add yourself as a maintainer, you need to add your GitHub username to the +`collaborators` array in the `userstyles.yml` file. This file is located in the +`scripts` directory. The `collaborators` array, is an array of objects, each +object should contain a `name` and a `url` key. And optionally a `name` key, +which is your preferred name. + +```yaml +collaborators: + - & + name: # OPTIONAL + url: https://github.com/ +``` + +Then you need to add your username to the `current-maintainers` array in for the +userstyle you want to maintain, in this case `youtube`. + +```yaml +userstyles: + youtube: + name: YouTube + categories: [entertainment, social_networking, photo_and_video] + icon: youtube + color: red + readme: + app-link: "https://youtube.com" + current-maintainers: [*isabelroses, *your-username] + past-maintainers: [*elkrien] +``` + +If the change is accepted, you will receive an invitation to the `catppuccin` organization, +and become a member of the [`userstyles-maintainers` team](https://github.com/orgs/catppuccin/teams/userstyles-maintainers). +As a maintainer you will be expected to: + +- Review and merge PRs for the userstyle you maintain. +- Keep the userstyle up to date with the latest changes. If you no longer wish to maintain a userstyle, see [Removing yourself as a maintainer](#removing-yourself-as-a-maintainer). +- Follow our code of conduct and guidelines. + +### Removing yourself as a maintainer + +To remove yourself as a maintainer, you will need to move your username from the +`current-maintainers` array to the `past-maintainers` array for each of the userstyles you no longer wish to maintain. In the example for YouTube below, the user `elkrien` has been moved from the `current-maintainers` array to the `past-maintainers` array. + +```diff +userstyles: + youtube: + name: YouTube + categories: [entertainment, social_networking, photo_and_video] + icon: youtube + color: red + readme: + app-link: "https://youtube.com" +- current-maintainers: [*isabelroses, *elkrien] +- past-maintainers: [] ++ current-maintainers: [*isabelroses] ++ past-maintainers: [*elkrien] + +If you would not like to be listed as a past maintainer, you can remove yourself from +`collaborators` array entirely. Upon removal, you will also be removed from the +`userstyles-maintainers` team. +``` diff --git a/scripts/deps.ts b/scripts/deps.ts index 0629c531a0..d7504204a0 100644 --- a/scripts/deps.ts +++ b/scripts/deps.ts @@ -6,7 +6,12 @@ import userStylesSchema from "@/userstyles.schema.json" with { }; import { join } from "std/path/mod.ts"; -const ROOT = new URL(".", import.meta.url).pathname; + +const ROOT = import.meta.dirname; +if (!ROOT) { + throw new Error("ROOT was not located."); +} + /** * absolute path to the repository */ diff --git a/scripts/lint/metadata.ts b/scripts/lint/metadata.ts index 30df942b68..dad85d23fb 100644 --- a/scripts/lint/metadata.ts +++ b/scripts/lint/metadata.ts @@ -16,6 +16,9 @@ export const verifyMetadata = async ( userstyle: string, userstyles: Userstyles, ) => { + // `usercss-meta` prohibits any '\r' characters, which seem to be present on Windows. + content = content.replaceAll("\r\n", "\n"); + const assert = assertions(userstyle, userstyles); const file = relative(REPO_ROOT, entry.path); diff --git a/scripts/userstyles.yml b/scripts/userstyles.yml index b92b570450..74dcd6a0d5 100644 --- a/scripts/userstyles.yml +++ b/scripts/userstyles.yml @@ -211,6 +211,7 @@ userstyles: chess.com: name: Chess.com categories: [game, education] + icon: chessdotcom color: green readme: app-link: "https://chess.com" @@ -231,9 +232,6 @@ userstyles: color: blue 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: [*isabelroses] past-maintainers: [*justtobbi] crowdin: @@ -385,6 +383,7 @@ userstyles: inoreader: name: inoreader categories: [productivity] + icon: inoreader color: blue readme: app-link: "https://inoreader.com" @@ -471,18 +470,9 @@ userstyles: color: lavender readme: app-link: "https://github.com/mastodon/mastodon" - usage: |+ - This userstyle is applied by default on a few commonly used Mastodon servers, listed at the top: - ```css - @-moz-document domain("mastodon.social"), domain("mstdn.social"), domain("fosstodon.org"), domain("piaille.fr"), domain("tech.lgbt") { - ``` - If the theme isn't being applied to your instance, go to the userstyle's **Settings > Custom included sites** and add your instance to the list, for instance, `*://floss.social/*`. 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: "**The theme is not working?**" - answer: | - One solution might be changing the theme to either light or dark via **Preferences** > **Appearance** > **Site theme**. current-maintainers: [*isabelroses] past-maintainers: [*andreasgrafen] mdn: @@ -512,6 +502,7 @@ userstyles: migadu-webmail: name: Migadu Webmail categories: [email_client, productivity] + icon: migadu color: blue readme: app-link: https://webmail.migadu.com/ @@ -560,7 +551,7 @@ userstyles: app-link: "https://www.npmjs.com/" current-maintainers: [*uncenter] openmediavault: - name: OpenMediaVault + name: openmediavault categories: [productivity] color: sky readme: @@ -606,6 +597,13 @@ userstyles: readme: app-link: "https://planetminecraft.com" current-maintainers: [*night-lake] + pronouns.page: + name: Pronouns.page + categories: [social_networking] + color: pink + readme: + app-link: "https://pronouns.page/" + current-maintainers: [*uncenter] proton: name: Proton categories: [productivity, email_client] @@ -646,12 +644,6 @@ userstyles: icon: searxng color: blue readme: - usage: |+ - This userstyle is applied by default on a few commonly used Searxng servers, listed at the top: - ```css - @-moz-document url-prefix("https://searx.baczek.me/"), url-prefix("https://searx.be/") { - ``` - If the theme isn't being applied to your instance, go to the userstyle's **Settings > Custom included sites** and add your instance to the list, for instance, `*://searxng.example.com/*`. app-link: "https://github.com/searxng/searxng" current-maintainers: [*sekki21956, *ryanccn] snapchat-web: @@ -719,6 +711,23 @@ userstyles: readme: app-link: "https://tabnews.com.br" current-maintainers: [*Guaxinim5573] + tldraw: + name: tldraw + categories: [productivity] + color: text + readme: + app-link: "https://www.tldraw.com" + usage: |+ + > [!NOTE] + > This theme only changes how the colors appear on the tldraw canvas. Exported graphics **will not be Catppuccin-themed**. + current-maintainers: [*genshibe, *uncenter] + trinket: + name: Trinket + categories: [development] + color: blue + readme: + app-link: "https://trinket.io" + current-maintainers: [*trinkey] tuta: name: Tuta categories: [email_client, productivity] @@ -791,7 +800,7 @@ userstyles: faq: - question: "**What does the 'Enable for black bars' option mean?**" answer: "It's available in case you have an OLED display. If you have one, you might want to enable this." - current-maintainers: [*isabelroses] + current-maintainers: [*isabelroses, *uncenter] past-maintainers: [*elkrien] nextjs: name: Next.js diff --git a/styles/anilist/catppuccin.user.css b/styles/anilist/catppuccin.user.css index 2f666c7840..bc8a93daff 100644 --- a/styles/anilist/catppuccin.user.css +++ b/styles/anilist/catppuccin.user.css @@ -2,7 +2,7 @@ @name AniList/AniChart Catppuccin @namespace github.com/catppuccin/userstyles/styles/anilist @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/anilist -@version 2.2.1 +@version 2.2.2 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/anilist/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aanilist @description Soothing pastel theme for AniList and AniChart @@ -313,6 +313,40 @@ .el-input__prefix { color: @overlay1; } + .el-picker-panel { + color: @text; + background-color: @surface0; + border-color: @surface1; + } + .el-date-table th { + color: @overlay1; + border-bottom-color: @surface1; + } + .el-date-picker__header-label { + color: @subtext0; + + &:hover { + color: @accent-color; + } + } + .el-picker-panel__icon-btn { + color: @overlay1; + + &:hover { + color: @accent-color; + } + } + .el-date-table td.available:hover { + color: @accent-color; + } + .el-date-table td.current:not(.disabled) span { + color: @crust; + background-color: @accent-color; + } + .el-date-table td.next-month, + .el-date-table td.prev-month { + color: @surface2; + } /* ---------SCORE TWEAKS-------------- */ .score[data-v-5ca094da] { @@ -528,7 +562,9 @@ } .activity-feed .hohNoteSuffix:not(:empty), .activity-feed .hohRewatchSuffix:not(:empty), - .activity-feed .hohScore:not(.hohSmiley) { + .activity-feed .hohScore:not(.hohSmiley), + .hohFeedScore .hohScore { + border-radius: 5px; padding: 2.5px 5px 1px !important; color: @subtext1 !important; background-color: @surface0; diff --git a/styles/brave-search/catppuccin.user.css b/styles/brave-search/catppuccin.user.css index 08977ac1a7..7cf42dc7b1 100644 --- a/styles/brave-search/catppuccin.user.css +++ b/styles/brave-search/catppuccin.user.css @@ -2,7 +2,7 @@ @name Brave Search Catppuccin @namespace github.com/catppuccin/userstyles/styles/brave-search @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/brave-search -@version 1.0.5 +@version 2.0.0 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/brave-search/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Abrave-search @description Soothing pastel theme for Brave Search @@ -69,130 +69,132 @@ @accent-color: @catppuccin[@@lookup][@@accent]; color-scheme: if(@lookup = latte, light, dark); - --color-container-highlight: @crust; - --search-serp-container-background: @mantle; - --body-bg: @base; - --bg-glassy: @mantle; - --bg-1: @surface1; - --bg-2: @surface0; - --bg-02: @crust; - --bg-04: @mantle; - --bg-green: @green; - --bg-blue: @blue; - --bg-red: @red; - --bg-favicon: @surface1; - --bg-form-control-selected: @surface2; - --bg-form-control-unselected: @surface0; - --form-control-selected: @blue; - --form-control-hover: @lavender; - --form-control-focus: @text; - --settings-header-bg: @mantle; - --settings-header-text: @text; - --settings-header-icon: @blue; - --settings-widget-text: @subtext0; - --settings-item-text: @text; - --settings-item-icon: @blue; - --settings-item-border: @overlay0; - --settings-item-border-2: @overlay2; - --settings-btn-bg: @surface0; - --settings-btn-text: @text; - --settings-widget-outline: @overlay0; - --settings-independent-score: @blue; - --settings-global-score: @peach; - --brave-supporter-bg: @base; - --brave-supporter-text: @text; - --context-menu-header-border: @overlay0; - --color-primary: @text; - --color-primary-2: @subtext1; - --color-primary-3: @subtext0; - --color-white: @text; - --color-gray-2: @subtext1; - --color-gray-3: @subtext0; - --color-gray-4: @overlay2; - --color-gray-5: @overlay1; - --color-gray-6: @overlay0; - --color-green: @green; - --color-red: @red; - --color-blue: @blue; - --info-color: @blue; - --link-primary: @blue; - --link-secondary: @blue; - --link-visited: @mauve; - --snippet-url: @subtext0; - --separator-dot: @overlay0; - --theme-purple: @mauve; - --theme-yellow: @yellow; - --border-color: @overlay0; - --blurple-300: @lavender; - --text-01: @text; - --text-02: @subtext1; - --text-03: @subtext0; - --interactive-04: @blue; - --interactive-05: @blue; - --interactive-06: @blue; - --interactive-07: @blue; - --interactive-08: @blue; - --focus-border: @overlay2; - --divider-01: @overlay0; - --disabled: @overlay1; - --btn-filled-bg: @surface0; - --btn-filled-bg-hover: @surface1; - --btn-filled-text-active: @text; - --btn-filled-bg-active: @surface2; - --btn-filled-text-disabled: @overlay1; - --btn-outline-border: @overlay0; - --btn-outline-border-hover: @overlay1; - --btn-outline-text: @text; - --btn-outline-text-hover: @subtext1; - --btn-outline-text-active: @text; - --btn-outline-border-active: @overlay2; - --btn-outline-text-disabled: @overlay1; - --btn-icon-svg-hover: @subtext1; - --btn-icon-bg-hover: @surface1; - --btn-icon-svg-active: @text; - --code-bg-0: @base; - --code-border: @overlay0; - --code-color-1: @surface0; - --code-color-2: @text; - --code-color-3: @green; - --code-color-4: @blue; - --code-color-5: @pink; - --search-bgd-01: @overlay0; - --search-bgd-02: @base; - --search-bgd-03: @crust; - --search-bgd-04: @mantle; - --search-bgd-05: @base; - --search-bgd-06: @surface0; - --search-bgd-07: @mantle; - --search-bgd-08: @crust; - --search-line-01: @surface0; - --search-line-02: @subtext0; - --search-text-01: @text; - --search-text-02: @subtext1; - --search-text-03: @subtext0; - --search-text-04: @subtext0; - --search-text-05: @blue; - --search-text-06: @overlay0; - --search-text-09: @yellow; - --search-text-10: @peach; - --search-interactive-01: @blue; - --search-interactive-02: @mauve; - --search-interactive-03: @mauve; - --search-interactive-04: @sky; - --search-interactive-05: @mauve; - --gray-30: @base; - --gray-60: @surface0; - --gray-90: @overlay0; - --gray-110: @subtext0; - --gray-120: @text; - --secondary-90: @lavender; - - #searchform > .searchbox-wrapper::after { - background-image: none; + + --color-page-background: @base; + --color-container-background: @crust; + --color-container-highlight: @mantle; + --color-serp-header-background: @crust; + --color-text-interactive: @accent-color; + --color-divider-subtle: @surface0; + --color-divider-interactive: @accent-color; + --color-text-primary: @text; + --color-serp-bar-bg: @mantle; + --color-serp-divider-subtle-container: @surface0; + --color-gray-30: @subtext0; + --color-gray-40: @overlay2; + --color-text-secondary: @subtext1; + --color-text-tertiary: @subtext0; + --color-icon-default: @overlay2; + --color-serp-snippet-background: @base; + --color-link-default: @blue; + --color-link-visited: @mauve; + --color-tabs-search-text-default: @accent-color; + --color-primary-50: @accent-color; + --color-primitive-primary-60: @accent-color; + --color-primitive-primary-70: darken(@accent-color, 5%); + --color-container-interactive: transparent; + --color-button-background: @accent-color; + --color-button-disabled: fade(@surface2, 30%); + + dialog { + color: @text; + + &::backdrop { + background-color: fade(@crust, 30%); + } + } + + #searchform::after { + outline-color: @surface0; } #searchform-actions::before { background: none !important; } + #submit-button { + &:hover:not(:disabled) { + background: linear-gradient( + 314deg, + @peach 8.49%, + @pink 43.72%, + @mauve 99.51% + ); + } + + svg { + fill: @overlay2; + } + } + #searchbox::placeholder { + color: @subtext0; + } + + .button.type--filled.theme--default { + color: @base; + + &:disabled { + color: fade(@text, 50%); + } + } + .button.type--outlined.theme--default:hover { + background-color: @accent-color; + border-color: @accent-color !important; + color: @base !important; + } + .tab-item.active .icon { + fill: @accent-color !important; + } + .tab-item.active ::after { + background: @accent-color !important; + } + + .logo-img { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .nav-logo .logo-large { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .nav-logo .logo-small { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .waves-bottom { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .waves-top { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + input[type="radio"]:checked::after { + background-color: @accent-color; + } + + .feedback-footer { + #logo { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + height: 48px; + } + } } } // vim:ft=less diff --git a/styles/chatgpt/catppuccin.user.css b/styles/chatgpt/catppuccin.user.css index 717b041bd2..66ca4d163e 100644 --- a/styles/chatgpt/catppuccin.user.css +++ b/styles/chatgpt/catppuccin.user.css @@ -2,7 +2,7 @@ @name ChatGPT Catppuccin @namespace github.com/catppuccin/userstyles/styles/chatgpt @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/chatgpt -@version 0.2.5 +@version 0.2.7 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chatgpt/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Achatgpt @description Soothing pastel theme for ChatGPT @@ -84,7 +84,7 @@ --ctp-surface2: #rgbify(@surface2) []; --ctp-surface1: #rgbify(@surface1) []; --ctp-surface0: #rgbify(@surface0) []; - --ctp-base: #rgbify(@crust) []; + --ctp-base: #rgbify(@base) []; --ctp-mantle: #rgbify(@mantle) []; --ctp-crust: #rgbify(@crust) []; @@ -927,6 +927,147 @@ } } +@-moz-document domain("auth.openai.com") { + @media (prefers-color-scheme: light) { + :root { + #catppuccin(@lightFlavor, @accentColor); + } + } + + @media (prefers-color-scheme: dark) { + :root { + #catppuccin(@darkFlavor, @accentColor); + } + } + + #catppuccin(@lookup, @accent) { + @rosewater: @catppuccin[@@lookup][@rosewater]; + @flamingo: @catppuccin[@@lookup][@flamingo]; + @pink: @catppuccin[@@lookup][@pink]; + @mauve: @catppuccin[@@lookup][@mauve]; + @red: @catppuccin[@@lookup][@red]; + @maroon: @catppuccin[@@lookup][@maroon]; + @peach: @catppuccin[@@lookup][@peach]; + @yellow: @catppuccin[@@lookup][@yellow]; + @green: @catppuccin[@@lookup][@green]; + @teal: @catppuccin[@@lookup][@teal]; + @sky: @catppuccin[@@lookup][@sky]; + @sapphire: @catppuccin[@@lookup][@sapphire]; + @blue: @catppuccin[@@lookup][@blue]; + @lavender: @catppuccin[@@lookup][@lavender]; + @text: @catppuccin[@@lookup][@text]; + @subtext1: @catppuccin[@@lookup][@subtext1]; + @subtext0: @catppuccin[@@lookup][@subtext0]; + @overlay2: @catppuccin[@@lookup][@overlay2]; + @overlay1: @catppuccin[@@lookup][@overlay1]; + @overlay0: @catppuccin[@@lookup][@overlay0]; + @surface2: @catppuccin[@@lookup][@surface2]; + @surface1: @catppuccin[@@lookup][@surface1]; + @surface0: @catppuccin[@@lookup][@surface0]; + @base: @catppuccin[@@lookup][@base]; + @mantle: @catppuccin[@@lookup][@mantle]; + @crust: @catppuccin[@@lookup][@crust]; + @accent-color: @catppuccin[@@lookup][@@accent]; + + color-scheme: if(@lookup = latte, light, dark); + color: @text; + caret-color: @text; + + a { + color: @accent-color; + } + + body, + .oai-header, + .login-container { + background-color: @base; + } + + img[alt="OpenAI's Logo"] { + @svg: escape( + '' + ); + height: 0 !important; + width: 0 !important; + padding-left: 32px !important; + padding-top: 32px !important; + margin-top: 32px; + background: url("data:image/svg+xml,@{svg}") no-repeat !important; + } + + .title { + color: @text; + } + + .email-input { + background-color: @base; + border-color: @surface0; + color: @text; + + &:focus, + &:valid { + border-color: @accent-color; + + & + .email-label { + color: @accent-color; + background-color: @base; + } + } + } + .email-label { + background-color: @base; + color: @subtext0; + } + + .continue-btn { + background-color: @accent-color; + color: @base; + } + + .divider-wrapper { + &::before, + &::after { + border-bottom-color: @surface2; + } + } + + .social-btn { + background-color: @mantle; + border-color: @surface0; + color: @text; + } + + @orange: mix(@red, @yellow); + + .social-logo { + height: 0 !important; + width: 0 !important; + padding-left: 20px !important; + padding-top: 20px !important; + } + + img[alt="Google logo"] { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); + } + img[alt="Microsoft logo"] { + @svg: escape( + '' + ); + + background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); + } + img[alt="Apple logo"] { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); + } + } +} + @-moz-document domain("auth0.openai.com") { @media (prefers-color-scheme: light) { :root { @@ -988,7 +1129,7 @@ --gray-dark: @overlay2; --gray-darkest: @text; - .c4ca43590 { + .cb2dfcee4 { background-color: @accent-color; color: @base; } @@ -1007,23 +1148,25 @@ @orange: mix(@red, @yellow); - .c7e427425[data-provider^="google"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); - } - .c7e427425[data-provider^="windowslive"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); - } - .c7e427425[data-provider^="apple"] { - @svg: escape( - '' - ); - background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); + button > span { + &[data-provider^="google"] { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); + } + &[data-provider^="windowslive"] { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); + } + &[data-provider^="apple"] { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); + } } } } diff --git a/styles/codeberg/README.md b/styles/codeberg/README.md index 29da0ce82c..dd497beebc 100644 --- a/styles/codeberg/README.md +++ b/styles/codeberg/README.md @@ -18,9 +18,6 @@

-## 🙋 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 - [justTOBBI](https://github.com/justTOBBI) diff --git a/styles/codeberg/catppuccin.user.css b/styles/codeberg/catppuccin.user.css index 58cf824ace..870b13515d 100644 --- a/styles/codeberg/catppuccin.user.css +++ b/styles/codeberg/catppuccin.user.css @@ -2,7 +2,7 @@ @name Codeberg Catppuccin @namespace github.com/catppuccin/userstyles/styles/codeberg @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/codeberg -@version 1.0.2 +@version 1.0.3 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/codeberg/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Acodeberg @description Soothing pastel theme for Codeberg @@ -16,10 +16,10 @@ ==/UserStyle== */ @-moz-document domain('codeberg.org') { @import (css) - url("https://git.isabelroses.com/assets/css/theme-catppuccin-@{lightFlavor}-@{accentColor}.css") + url("https://catppuccin.github.io/gitea/theme-catppuccin-@{lightFlavor}-@{accentColor}.css") (prefers-color-scheme: light); @import (css) - url("https://git.isabelroses.com/assets/css/theme-catppuccin-@{darkFlavor}-@{accentColor}.css") + url("https://catppuccin.github.io/gitea/theme-catppuccin-@{darkFlavor}-@{accentColor}.css") (prefers-color-scheme: dark); #catppuccin(@lookup, @accent) { diff --git a/styles/duckduckgo/catppuccin.user.css b/styles/duckduckgo/catppuccin.user.css index 848b26bd24..bf6469ec52 100644 --- a/styles/duckduckgo/catppuccin.user.css +++ b/styles/duckduckgo/catppuccin.user.css @@ -2,7 +2,7 @@ @name DuckDuckGo Catppuccin @namespace github.com/catppuccin/userstyles/styles/duckduckgo @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/duckduckgo -@version 0.1.3 +@version 0.1.5 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/duckduckgo/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aduckduckgo @description Soothing pastel theme for DuckDuckGo @@ -16,15 +16,12 @@ ==/UserStyle== */ @-moz-document domain(duckduckgo.com) { - @media (prefers-color-scheme: light) { - :root { - #catppuccin(@lightFlavor, @accentColor); - } + :root:not(.dark-bg) { + #catppuccin(@lightFlavor, @accentColor); } - @media (prefers-color-scheme: dark) { - :root { - #catppuccin(@darkFlavor, @accentColor); - } + + :root.dark-bg { + #catppuccin(@darkFlavor, @accentColor); } /* prettier-ignore */ @@ -170,6 +167,24 @@ .metabar:not(.is-stuck) { background-color: @base !important; } + + /* lyrics box */ + .js-lyrics-module { + color: @subtext1 !important; + } + .module--lyrics__subtitle-box { + border-color: @surface2; + } + .module__inner-toggle--chevron { + color: @accent-color !important; + background-color: @surface1 !important; + border-color: @surface2; + } + .module__inner-toggle::before, + .module__inner-toggle::after { + background-color: @surface2 !important; + } + // translation boxes .module--translations .dropdown--translation-select, .module--translations-translatedtext { @@ -492,13 +507,8 @@ .howItWorksSection_downloadsCard__U3Ph9, .metabar__grid-btn, .feedback-btn__icon-wrap .set-bookmarklet__input .btn, - .btn:visited, - .btn:active, - .btn.btn--primary, .btn.btn--secondary, - .btn--primary:hover, .btn.is-disabled, - .btn.is-disabled:hover, input, textarea, .frm__input, @@ -509,10 +519,8 @@ .zci--json_validator textarea, .colorpicker, .feedback-modal__submit.is-disabled, - .feedback-modal__submit.is-disabled:hover, .feedback-modal__submit.is-disabled:active, .feedback-modal__submit.is-disabled:focus, - .btn.btn--skeleton:hover, .module__section, .module--carousel__item, .is-related-search-exp.dark-bg, @@ -524,7 +532,37 @@ .js-definitions-internal { background-color: @surface0 !important; } + .module--carousel__item { + border-color: @surface1 !important; + } + .btn.is-disabled:hover, + .frm__switch__label:hover, + .feedback-modal__submit.is-disabled:hover, + .btn.btn--skeleton:hover, + .module__footer-carousel__label:hover { + background-color: @surface2 !important; + border-color: @surface2 !important; + } + .is-checked .frm__switch__label.btn { + background-color: @accent-color !important; + color: @mantle !important; + } + .js-set-exit { + background-color: @accent-color !important; + border-color: @accent-color !important; + color: @base !important; + } + .js-set-exit:hover { + background-color: fade(@accent-color, 80%) !important; + border-color: fade(@accent-color, 80%) !important; + color: @base !important; + } + .frm__switch__label { + background-color: @surface0; + border-color: @surface0; + color: @text !important; + } .set-bookmarklet__data { background-color: @surface2; color: @text; @@ -608,7 +646,6 @@ .c-detail__desc, .c-detail__filemeta, .c-detail__more, - .btn, .frm__label, .js-cloudsave-new-suggestion { color: @text !important; @@ -683,10 +720,10 @@ color: @base !important; } - .settings-page-wrapper .btn--primary { + .settings-page-wrapper.is-checked { border-color: @blue; - background-color: @blue !important; - color: @crust !important; + background-color: @sapphire !important; + color: @mantle !important; } .modal--dropdown--settings .settings-dropdown--section @@ -696,24 +733,24 @@ color: @text !important; } } + .ddgsi-check::before { + color: @mantle !important; + } + .set-bookmarklet__title, + .set-reset__title { + color: @text !important; + } .frm__select::after { color: @accent-color !important; } - .js-region-filter-switch, - .frm__switch__label { - background-color: @overlay0 !important; - border-color: @accent-color !important; - } .switch__knob { background: @text !important; } .switch.is-on { background-color: @accent-color; } - - .dropdown__switch.is-on::before, - .frm__switch__label { + .dropdown__switch.is-on::before { color: @base !important; } .search--header { diff --git a/styles/github/catppuccin.user.css b/styles/github/catppuccin.user.css index ad02fc177c..c90ab873d8 100644 --- a/styles/github/catppuccin.user.css +++ b/styles/github/catppuccin.user.css @@ -2,7 +2,7 @@ @name GitHub Catppuccin @namespace github.com/catppuccin/userstyles/styles/github @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/github -@version 1.4.1 +@version 1.6.3 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/github/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agithub @description Soothing pastel theme for GitHub @@ -170,7 +170,7 @@ --diffBlob-deletion-bgColor-num: fadeout(@red, 70%); --diffBlob-deletion-bgColor-line: fadeout(@red, 85%); --diffBlob-deletion-bgColor-word: fadeout(@red, 70%); - --diffBlob-hunk-bgColor-num: fadeout(@blue, 60%); + --diffBlob-hunk-bgColor-num: fadeout(@accent-color, 60%); --diffBlob-expander-iconColor: #848d97; --codeMirror-fgColor: @text; --codeMirror-bgColor: @base; @@ -178,7 +178,7 @@ --codeMirror-gutterMarker-fgColor-default: @base; --codeMirror-gutterMarker-fgColor-muted: @overlay0; --codeMirror-lineNumber-fgColor: @subtext1; - --codeMirror-cursor-fgColor: #e6edf3; + --codeMirror-cursor-fgColor: @text; --codeMirror-selection-bgColor: #388bfd66; --codeMirror-activeline-bgColor: #6e768166; --codeMirror-matchingBracket-fgColor: @text; @@ -197,109 +197,19 @@ --header-borderColor-divider: #8b949e; --headerSearch-bgColor: @base; --headerSearch-borderColor: @surface0; - --data-blue-color: #0576ff; - --data-auburn-color: #a86f6b; - --data-orange-color: #984b10; - --data-yellow-color: #895906; - --data-green-color: #2f6f37; - --data-teal-color: #106c70; - --data-purple-color: #975bf1; - --data-pink-color: #d34591; - --data-red-color: #eb3342; - --data-gray-color: #576270; - --display-blue-bgColor-muted: #001a47; - --display-blue-bgColor-emphasis: #0576ff; - --display-blue-fgColor: #4da0ff; - --display-blue-borderColor-muted: #002766; - --display-blue-borderColor-emphasis: #0576ff; - --display-green-bgColor-muted: #122117; - --display-green-bgColor-emphasis: #388f3f; - --display-green-fgColor: #41b445; - --display-green-borderColor-muted: #182f1f; - --display-green-borderColor-emphasis: #388f3f; - --display-orange-bgColor-muted: #311708; - --display-orange-bgColor-emphasis: #c46212; - --display-orange-fgColor: #ed8326; - --display-orange-borderColor-muted: #43200a; - --display-orange-borderColor-emphasis: #c46212; - --display-purple-bgColor-muted: #211047; - --display-purple-bgColor-emphasis: #975bf1; - --display-purple-fgColor: #b687f7; - --display-purple-borderColor-muted: #31146b; - --display-purple-borderColor-emphasis: #975bf1; - --display-red-bgColor-muted: #3c0614; - --display-red-bgColor-emphasis: #eb3342; - --display-red-fgColor: #f27d83; - --display-red-borderColor-muted: #58091a; - --display-red-borderColor-emphasis: #eb3342; - --display-yellow-bgColor-muted: #2e1a00; - --display-yellow-bgColor-emphasis: #aa7109; - --display-yellow-fgColor: #d3910d; - --display-yellow-borderColor-muted: #3d2401; - --display-yellow-borderColor-emphasis: #aa7109; - --display-gray-bgColor-muted: #1c1c1c; - --display-gray-bgColor-emphasis: #6e7f96; - --display-gray-fgColor: #92a1b5; - --display-gray-borderColor-muted: #2a2b2d; - --display-gray-borderColor-emphasis: #6e7f96; - --display-auburn-bgColor-muted: #271817; - --display-auburn-bgColor-emphasis: #a86f6b; - --display-auburn-fgColor: #bf9592; - --display-auburn-borderColor-muted: #3a2422; - --display-auburn-borderColor-emphasis: #a86f6b; - --display-brown-bgColor-muted: #241c14; - --display-brown-bgColor-emphasis: #94774c; - --display-brown-fgColor: #b69a6d; - --display-brown-borderColor-muted: #342a1d; - --display-brown-borderColor-emphasis: #94774c; - --display-lemon-bgColor-muted: #291d00; - --display-lemon-bgColor-emphasis: #977b0c; - --display-lemon-fgColor: #ba9b12; - --display-lemon-borderColor-muted: #372901; - --display-lemon-borderColor-emphasis: #977b0c; - --display-olive-bgColor-muted: #171e0b; - --display-olive-bgColor-emphasis: #7a8321; - --display-olive-fgColor: #a2a626; - --display-olive-borderColor-muted: #252d10; - --display-olive-borderColor-emphasis: #7a8321; - --display-lime-bgColor-muted: #141f0f; - --display-lime-bgColor-emphasis: #5f892f; - --display-lime-fgColor: #7dae37; - --display-lime-borderColor-muted: #1f3116; - --display-lime-borderColor-emphasis: #5f892f; - --display-pine-bgColor-muted: #082119; - --display-pine-bgColor-emphasis: #18915e; - --display-pine-fgColor: #1bb673; - --display-pine-borderColor-muted: #0b3224; - --display-pine-borderColor-emphasis: #18915e; - --display-teal-bgColor-muted: #041f25; - --display-teal-bgColor-emphasis: #158a8a; - --display-teal-fgColor: #1cb0ab; - --display-teal-borderColor-muted: #073036; - --display-teal-borderColor-emphasis: #158a8a; - --display-cyan-bgColor-muted: #001f29; - --display-cyan-bgColor-emphasis: #0587b3; - --display-cyan-fgColor: #07ace4; - --display-cyan-borderColor-muted: #002e3d; - --display-cyan-borderColor-emphasis: #0587b3; - --display-indigo-bgColor-muted: #1b183f; - --display-indigo-bgColor-emphasis: #7070e1; - --display-indigo-fgColor: #9899ec; - --display-indigo-borderColor-muted: #25215f; - --display-indigo-borderColor-emphasis: #7070e1; --avatar-bgColor: fade(@text, 26%); --avatar-borderColor: @surface0; --avatar-shadow: 0px 0px 0px 2px #0d1117; --avatarStack-fade-bgColor-default: @surface1; --avatarStack-fade-bgColor-muted: #21262d; - --control-bgColor-rest: #21262d; + --control-bgColor-rest: @red; --control-bgColor-hover: #292e36; - --control-bgColor-active: #31363e; - --control-bgColor-disabled: #21262db3; + --control-bgColor-active: @surface1; + --control-bgColor-disabled: fade(@mantle, 60%); --control-bgColor-selected: #161b22; - --control-fgColor-rest: #c9d1d9; + --control-fgColor-rest: @text; --control-fgColor-placeholder: #484f58; - --control-fgColor-disabled: @surface0; + --control-fgColor-disabled: fade(@subtext0, 70%); --control-borderColor-rest: @surface1; --control-borderColor-emphasis: #666e79; --control-borderColor-disabled: fade(@surface1, 75%); @@ -317,19 +227,19 @@ --control-transparent-borderColor-hover: #0000; --control-transparent-borderColor-active: #0000; --control-danger-fgColor-rest: @red; - --control-danger-fgColor-hover: #ff7b72; - --control-danger-bgColor-hover: fade(@red, 26%); + --control-danger-fgColor-hover: @crust; + --control-danger-bgColor-hover: fade(@red, 80%); --control-danger-bgColor-active: @red; - --control-checked-bgColor-rest: #1f6feb; - --control-checked-bgColor-hover: #2a7aef; - --control-checked-bgColor-active: #3685f3; + --control-checked-bgColor-rest: @accent-color; + --control-checked-bgColor-hover: lighten(@accent-color, 5%); + --control-checked-bgColor-active: lighten(@accent-color, 5%); --control-checked-bgColor-disabled: #6e7681; - --control-checked-fgColor-rest: @text; + --control-checked-fgColor-rest: @crust; --control-checked-fgColor-disabled: #010409; - --control-checked-borderColor-rest: #1f6feb; - --control-checked-borderColor-hover: #2a7aef; - --control-checked-borderColor-active: #3685f3; - --control-checked-borderColor-disabled: #6e7681; + --control-checked-borderColor-rest: @accent-color; + --control-checked-borderColor-hover: @accent-color; + --control-checked-borderColor-active: @accent-color; + --control-checked-borderColor-disabled: @surface0; --controlTrack-bgColor-rest: @surface0; --controlTrack-bgColor-hover: @surface1; --controlTrack-bgColor-active: @surface2; @@ -344,17 +254,16 @@ --controlKnob-borderColor-rest: @surface2; --controlKnob-borderColor-disabled: #21262db3; --controlKnob-borderColor-checked: @blue; - --counter-borderColor: #0000; --button-default-fgColor-rest: @text; --button-default-bgColor-rest: @surface0; --button-default-bgColor-hover: @surface1; --button-default-bgColor-active: @surface2; --button-default-bgColor-selected: @surface2; - --button-default-bgColor-disabled: fade(@base, 70%); + --button-default-bgColor-disabled: fade(@surface0, 70%); --button-default-borderColor-rest: @surface1; --button-default-borderColor-hover: @surface1; --button-default-borderColor-active: @surface1; - --button-default-borderColor-disabled: #21262db3; + --button-default-borderColor-disabled: fade(@surface0, 70%); --button-default-shadow-resting: 0px 0px 0px 0px #000; --button-primary-fgColor-rest: @base; --button-primary-fgColor-disabled: fade(@base, 60%); @@ -362,7 +271,7 @@ --button-primary-bgColor-rest: @green; --button-primary-bgColor-hover: lighten(@green, 5%); --button-primary-bgColor-active: saturate(@green, 5%); - --button-primary-bgColor-disabled: darken(desaturate(@green, 10%), 10%); + --button-primary-bgColor-disabled: fade(@green, 70%); --button-primary-borderColor-rest: @green; --button-primary-borderColor-hover: @green; --button-primary-borderColor-active: @green; @@ -401,7 +310,7 @@ --button-danger-bgColor-rest: @surface0; --button-danger-bgColor-hover: @red; --button-danger-bgColor-active: darken(@red, 5%); - --button-danger-bgColor-disabled: #21262db3; + --button-danger-bgColor-disabled: @base; --button-danger-borderColor-rest: @surface1; --button-danger-borderColor-hover: @surface2; --button-danger-borderColor-active: @surface2; @@ -425,8 +334,8 @@ --buttonCounter-danger-fgColor-hover: @text; --buttonCounter-danger-fgColor-disabled: fade(@red, 50%); --focus-outlineColor: @blue; - --menu-bgColor-active: #161b22; - --overlay-bgColor: @mantle; + --menu-bgColor-active: @mantle; + --overlay-bgColor: @base; --overlay-borderColor: @surface0; --overlay-backdrop-bgColor: #161b2266; --selectMenu-borderColor: #484f58; @@ -438,11 +347,15 @@ --underlineNav-borderColor-active: @accent-color; --underlineNav-borderColor-hover: #6e768166; --underlineNav-iconColor-rest: #848d97; - --selection-bgColor: #1f6febb3; + --selection-bgColor: fade(@accent-color, 30%); + --reactionButton-selected-bgColor-rest: fade(@accent-color, 20%); + --reactionButton-selected-bgColor-hover: fade(@accent-color, 35%); + --reactionButton-selected-fgColor-rest: @accent-color; + --reactionButton-selected-fgColor-hover: @accent-color; --fgColor-default: @text; --fgColor-muted: @subtext1; --fgColor-onEmphasis: @base; - --fgColor-white: @text; + --fgColor-white: if(@lookup = latte, @crust, @text); --fgColor-disabled: @surface2; --fgColor-link: @accent-color; --fgColor-neutral: #6e7681; @@ -553,99 +466,19 @@ --color-prettylights-syntax-markup-changed-text: @text; --color-prettylights-syntax-markup-changed-bg: fadeout(@yellow, 60%); --color-prettylights-syntax-markup-ignored-text: @text; - --color-scale-black: #010409; - --color-scale-transparent: #0000; - --color-scale-white: @text; - --color-scale-gray-0: #f0f6fc; - --color-scale-gray-1: #c9d1d9; - --color-scale-gray-2: #b1bac4; + --bgColor-white: @base; + --color-scale-white: @base; --color-scale-gray-3: @overlay2; - --color-scale-gray-4: #6e7681; --color-scale-gray-5: @overlay0; --color-scale-gray-6: @surface1; --color-scale-gray-7: @surface1; - --color-scale-gray-8: #161b22; - --color-scale-gray-9: #0d1117; - --color-scale-blue-0: #cae8ff; - --color-scale-blue-1: #a5d6ff; --color-scale-blue-2: @sky; - --color-scale-blue-3: #58a6ff; - --color-scale-blue-4: #388bfd; --color-scale-blue-5: @blue; - --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: @green; --color-scale-green-4: @green; - --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: @peach; - --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: @peach; - --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: @red; - --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; --shadow-inset: inset 0px 1px 0px 0px @crust; --shadow-resting-xsmall: 0px 1px 0px 0px @crust; --shadow-resting-small: 0px 1px 0px 0px @crust, 0px 1px 3px 0px @crust; @@ -672,6 +505,168 @@ ); background-image: url("data:image/svg+xml,@{svg}"); } + + picture:has(img[src="https://github.githubassets.com/assets/mona-loading-default-c3c7aad1282f.gif"]) + { + justify-content: center; + display: flex; + + img { + display: block; + box-sizing: border-box; + background: url("https://giscus.catppuccin.com/assets/loading_48x48.gif") + no-repeat; + width: 48px; + height: 48px; + padding-left: 48px; + } + } + + /* Header when logged out */ + .HeaderMenu-link { + color: var(--fgColor-default); + + &:hover { + color: var(--fgColor-default); + } + } + .header-search-button.placeholder { + color: @subtext0; + } + + .CheckStep { + .ansifg-r { + color: var(--color-ansi-red); + } + .ansifg-y { + color: var(--color-ansi-yellow); + } + .ansifg-g { + color: var(--color-ansi-green); + } + .ansifg-b { + color: var(--color-ansi-blue); + } + .ansifg-c { + color: var(--color-ansi-cyan); + } + .ansifg-m { + color: var(--color-ansi-magenta); + } + .ansifg-gr { + color: var(--color-ansi-gray); + } + } + + ::selection { + background-color: fade(@accent-color, 20%); + } + } +} + +@-moz-document url-prefix("https://viewscreen.githubusercontent.com/markdown/mermaid") +{ + [data-color-mode="auto"] { + @media (prefers-color-scheme: light) { + &[data-light-theme="light"] { + #catppuccin(@lightFlavor, @accentColor); + } + &[data-light-theme="dark"] { + #catppuccin(@darkFlavor, @accentColor); + } + } + + @media (prefers-color-scheme: dark) { + &[data-dark-theme="light"] { + #catppuccin(@lightFlavor, @accentColor); + } + &[data-dark-theme="dark"] { + #catppuccin(@darkFlavor, @accentColor); + } + } + } + [data-color-mode="light"][data-light-theme="dark"], + [data-color-mode="dark"][data-dark-theme="dark"] { + #catppuccin(@darkFlavor, @accentColor); + } + [data-color-mode="light"][data-light-theme="light"], + [data-color-mode="dark"][data-dark-theme="light"] { + #catppuccin(@lightFlavor, @accentColor); + } + + #catppuccin(@lookup, @accent) { + @rosewater: @catppuccin[@@lookup][@rosewater]; + @flamingo: @catppuccin[@@lookup][@flamingo]; + @pink: @catppuccin[@@lookup][@pink]; + @mauve: @catppuccin[@@lookup][@mauve]; + @red: @catppuccin[@@lookup][@red]; + @maroon: @catppuccin[@@lookup][@maroon]; + @peach: @catppuccin[@@lookup][@peach]; + @yellow: @catppuccin[@@lookup][@yellow]; + @green: @catppuccin[@@lookup][@green]; + @teal: @catppuccin[@@lookup][@teal]; + @sky: @catppuccin[@@lookup][@sky]; + @sapphire: @catppuccin[@@lookup][@sapphire]; + @blue: @catppuccin[@@lookup][@blue]; + @lavender: @catppuccin[@@lookup][@lavender]; + @text: @catppuccin[@@lookup][@text]; + @subtext1: @catppuccin[@@lookup][@subtext1]; + @subtext0: @catppuccin[@@lookup][@subtext0]; + @overlay2: @catppuccin[@@lookup][@overlay2]; + @overlay1: @catppuccin[@@lookup][@overlay1]; + @overlay0: @catppuccin[@@lookup][@overlay0]; + @surface2: @catppuccin[@@lookup][@surface2]; + @surface1: @catppuccin[@@lookup][@surface1]; + @surface0: @catppuccin[@@lookup][@surface0]; + @base: @catppuccin[@@lookup][@base]; + @mantle: @catppuccin[@@lookup][@mantle]; + @crust: @catppuccin[@@lookup][@crust]; + @accent-color: @catppuccin[@@lookup][@@accent]; + + background-color: @base; + + --color-btn-text: @text; + --color-btn-bg: @surface0; + --color-btn-border: @surface1; + --color-btn-hover-bg: @surface1; + --color-btn-hover-border: @surface2; + --color-btn-active-bg: @surface2; + --color-btn-selected-bg: @surface2; + --color-btn-counter-bg: @surface2; + --color-btn-outline-text: @accent-color; + --color-fg-muted: @subtext1; + + #diagram { + .node rect, + .node circle, + .node ellipse, + .node polygon, + .node path { + fill: fade(@accent-color, 10%); + stroke: @accent-color; + } + + .label text, + span, + p { + fill: @text; + color: @text; + } + + .flowchart-link, + .marker { + stroke: @subtext0; + fill: @subtext0; + } + + .edgeLabel { + background-color: @crust; + } + } + + .octicon { + fill: var(--color-fg-muted) !important; + } } } diff --git a/styles/google/catppuccin.user.css b/styles/google/catppuccin.user.css index 7411ae525e..4f8aff2b72 100644 --- a/styles/google/catppuccin.user.css +++ b/styles/google/catppuccin.user.css @@ -2,7 +2,7 @@ @name Google Catppuccin @namespace github.com/catppuccin/userstyles/styles/google @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google -@version 0.2.0 +@version 0.2.1 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/google/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle @description Soothing pastel theme for Google @@ -158,6 +158,9 @@ .pno7A.rfUaPd .SwDSDf { color: @subtext1; } + .pno7A.rfUaPd .Tqvz7b { + color: @text; + } .tR3EBc { background-color: @mantle; } @@ -166,6 +169,10 @@ background: @surface0 !important; color: @text !important; border-color: @surface0 !important; + &:hover { + background-color: @surface1; + border-color: @surface1; + } } .zbvg1c { color: @text; @@ -174,6 +181,13 @@ background-color: @blue; color: @mantle; border-color: @blue; + &:hover { + background-color: @sky; + border-color: @sky; + } + } + .tw-lliw.item-selected .language_list_item { + color: @blue; } .qv3Wpe { color: @text; @@ -190,6 +204,10 @@ background: @surface2; color: @text; border-color: @surface2; + &:hover { + background-color: @overlay0; + border-color: @overlay0; + } } /* knowoledge panel uwu */ .H73aad { @@ -279,7 +297,9 @@ background-color: @base !important; } - .ttBXeb { + .ttBXeb, + .NDTw3e.K7R36c, + .knowledge-finance-wholepage-chart__fw-uch .uch-svg { color: @subtext0; } @@ -287,6 +307,25 @@ fill: @text; } + .egcvbb { + border-color: @surface2; + &:hover { + border-color: @text; + } + } + + .knowledge-finance-wholepage-chart__hover-card { + background-color: @base; + } + .knowledge-finance-wholepage-chart__hover-card-time { + color: @subtext0; + } + + .fw-ch-sel .KWk7r.qUjgX { + background-color: @surface0; + color: @blue; + } + .gb_Ka.gb_f, .gb_Na.gb_f, #gb { @@ -577,9 +616,13 @@ .wwUB2c { color: @subtext0; } - .z1asCe { + .dhERQc { + color: @base !important; + background-color: @blue !important; + } + .z1asCe, + .ikb4Bb { color: @text !important; - fill: @text !important; } .rsGxI.Ww4FFb, .Ww4FFb { @@ -606,22 +649,44 @@ .VuuXrf { color: @text; } - .hb8SAc { + .hb8SAc, + .gb_Oc a.gb_H, + .gb_Oc span.gb_H { color: @text; } .TQc1id .I6TXqe { border-color: @surface2; } - .I6TXqe { + .I6TXqe, + .zaokob { background: @base; } + .tw-lliw:hover, + .tw-lliw:focus { + background-color: @surface0; + } + .language_list_languages.tw-ll-top::after { + background: linear-gradient( + to bottom, + rgba(red(@base), green(@base), blue(@base), 0), + rgba(red(@base), green(@base), blue(@base), 1) + ); + } .HsZQAe { border-bottom-color: @surface2; } + .KLEmSd { + border-bottom-color: @surface1; + } .NtaMpb .niO4u, - .nZWEZc .ttwCMe { + .nZWEZc .ttwCMe, + .xNzW0d, + .lWzCpb { background-color: @base; } + .aURkK { + border-left-color: @surface1; + } .iRPzcb { border-bottom-color: @surface1; } @@ -754,6 +819,17 @@ g-right-button.wgbRNb > g-fab:nth-child(1) { background-color: @crust !important; } + .gb_2e { + background-color: @surface0; + } + .gb_Ec { + div:first-child { + color: @text; + } + > * { + color: @subtext0; + } + } .kLhEKe { background-color: @base; } @@ -1007,10 +1083,14 @@ .T8VaVe { color: @blue; } + .tw-ta, #tw-source-text-container .tw-ta, #tw-source-rmn-container .tw-ta { color: @text; } + .tw-bilingual-marked { + border-color: @blue; + } #tw-target { background-color: @surface0; } @@ -1870,6 +1950,23 @@ .nz9sqb.o07G5 .tX9u1b:active:hover .Rq5Gcb { background-color: @surface0; } + .aRDKUe .pRjiJb, + .aRDKUe .DmSTqc { + color: @text; + } + .aRDKUe .idKC9b, + .aRDKUe .MbHqJ { + color: @subtext0; + } + .aRDKUe .GXg3Le { + color: @blue; + } + .aRDKUe .G5bXNb { + background-color: @mantle; + &:hover { + background-color: @base; + } + } } @media (prefers-color-scheme: light) { body { diff --git a/styles/hacker-news/catppuccin.user.css b/styles/hacker-news/catppuccin.user.css index c7ee9caaa9..19e027af99 100644 --- a/styles/hacker-news/catppuccin.user.css +++ b/styles/hacker-news/catppuccin.user.css @@ -2,7 +2,7 @@ @name Hacker News Catppuccin @namespace github.com/catppuccin/userstyles/styles/hacker-news @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/hacker-news -@version 0.1.2 +@version 1.0.0 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hacker-news/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ahacker-news @description Soothing pastel theme for Hacker News @@ -16,14 +16,6 @@ ==/UserStyle== */ @-moz-document domain("news.ycombinator.com") { - /* prettier-ignore */ - @catppuccin: { - @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; - @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; - @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; - @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; - } - @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor, @accentColor); } @@ -60,92 +52,71 @@ @crust: @catppuccin[@@lookup][@crust]; @accent-color: @catppuccin[@@lookup][@@accent]; - /* Main background */ - #hnmain { + @orange: mix(@peach, @yellow); + + [bgcolor="#fafaf0"], + [bgcolor="#f6f6ef"] { background-color: @base; } - /* Main body padding background */ body { - background-color: @base; - color: @text; + background-color: @mantle; } - /* Background of the FAQ and main page */ - body > center > table > tbody > tr > td { - background-color: @base; + td { color: @text; } - /* Top bar */ - #hnmain > tbody > tr:nth-child(1) > td { - background-color: @peach; - } + /* Header */ + td[bgcolor="#ff6600"] { + background-color: @orange; - /* 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; - } + .pagetop, + .pagetop a { + color: @crust !important; + } - /* Logged-in user karma */ - #karma { - color: @surface1; - } + img[src="y18.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + border-color: @crust !important; + } - /* Separator characters around logged-in user karma */ - #hnmain - > tbody - > tr:nth-child(1) - > td - > table - > tbody - > tr - > td:nth-child(3) - > span { - color: @surface1; + [color="#ffffff"] { + color: @crust; + } } - /* Visited top bar links */ - .pagetop a:visited { - color: @surface1; + td[bgcolor="#ffffaa"] { + background-color: @yellow; + + td { + color: @crust; + } } - /* Unvisited top bar links */ - .pagetop a:link { - color: @surface0; + .subtext, + .comhead { + &, + & a:link, + & a:visited { + color: @overlay2; + } } - /* Links */ a:link { color: @blue; } - - /* More link */ .hnmore a:link, a:visited { color: @lavender; } - /* New user color */ - .hnuser > font { + [color="#3c963c"] { color: @green; } - /* Story site link */ - .comhead a:link, - .subtext a:visited { - color: @peach; - } - /* Story points */ .score { color: @subtext0; @@ -167,61 +138,58 @@ } /* Comment box */ + input, textarea, - input { - background-color: @surface0; - color: @text; - border-color: @teal; - } - - /* Poll questions */ - td.comment > div > font { + select { + background-color: @mantle; color: @text; + border-width: 1px; + border-style: solid; + border-color: @surface0; + border-radius: 2px; } - /* 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; + input { + padding: 2px; } - /* Search bar text */ - #hnmain > tbody > tr:nth-child(4) > td > center:nth-child(6) > form { + /* Poll questions */ + td.comment > div > font { 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 { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } + + .yclinks { + color: @surface2; + } + + b { + color: @text; + } + + table[bgcolor="#ff6600"] { + background-color: @orange; + } } } + +/* prettier-ignore */ +@catppuccin: { + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +} + // vim:ft=less diff --git a/styles/holodex/catppuccin.user.css b/styles/holodex/catppuccin.user.css index 370db1d6e3..482fa0dc55 100644 --- a/styles/holodex/catppuccin.user.css +++ b/styles/holodex/catppuccin.user.css @@ -2,7 +2,7 @@ @name Holodex Catppuccin @namespace github.com/catppuccin/userstyles/styles/holodex @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/holodex -@version 0.0.1 +@version 0.0.2 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/holodex/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aholodex @description Soothing pastel theme for Holodex @@ -163,7 +163,8 @@ background: @base; border-color: @base; } - button.v-btn.v-btn--has-bg { + + .v-btn.v-btn--has-bg:not(.nav-btn) { background-color: @surface0 !important; } @@ -172,13 +173,29 @@ .v-card, .v-sheet, .v-select__selections, + .v-label, + .text--secondary, .v-input__slot input { color: @text !important; - path { + path:not([fill*="iid-1"]) { fill: @text; } } + .v-messages, + .v-list-item__subtitle, + .v-tab:not(.v-tab--active) { + color: @subtext0 !important; + } + + svg.logo path { + fill: darken(@accent-color, 2%) !important; + + &:last-child { + fill: darken(@blue, 8%) !important; + } + } + .v-chip { background: @blue; } @@ -195,6 +212,41 @@ .stream-count-chip { color: @crust !important; } + + .nav-btn.v-btn--active { + color: @accent-color !important; + } + + div.v-sheet.v-alert { + background: none !important; + color: @yellow !important; + + .v-icon path { + fill: @yellow !important; + } + } + + hr { + border-color: @base; + } + + // Snack + div.v-snack { + color: @text; + + div.v-sheet { + background: @surface0 !important; + } + + button.v-btn--text { + color: @text !important; + } + + button.v-btn--is-elevated.v-btn--has-bg { + background: @accent-color !important; + color: @base; + } + } } :root:has(.theme--dark) { diff --git a/styles/holodex/preview.webp b/styles/holodex/preview.webp index 8480bca5d1..a2e41667a3 100644 --- a/styles/holodex/preview.webp +++ b/styles/holodex/preview.webp @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d364ca7e8f6b60810187068aab1e15374cecabd6fede4103ce61a0bead637c0e -size 1513776 +oid sha256:4fff48eb9bf12b06e27c656750004cf219060ce9390ca8d1996175ba1c422198 +size 1129982 diff --git a/styles/instagram/catppuccin.user.css b/styles/instagram/catppuccin.user.css index 21095191f9..43eb264814 100644 --- a/styles/instagram/catppuccin.user.css +++ b/styles/instagram/catppuccin.user.css @@ -2,7 +2,7 @@ @name Instagram Catppuccin @namespace github.com/catppuccin/userstyles/styles/instagram @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/instagram -@version 0.1.9 +@version 0.2.2 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/instagram/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ainstagram @description Soothing pastel theme for Instagram @@ -13,23 +13,18 @@ @var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] @var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire*", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] - -@var text scrollbar_width "Scrollbar width" 8px ==/UserStyle== */ @-moz-document domain('instagram.com') { - @rgb-raw: red; #rgbify(@color) { @rgb-raw: red(@color), green(@color), blue(@color); } - ._aa4d { #catppuccin(@darkFlavor, @accentColor); } ._aa4c { #catppuccin(@lightFlavor, @accentColor); } - #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @flamingo: @catppuccin[@@lookup][@flamingo]; @@ -58,72 +53,73 @@ @mantle: @catppuccin[@@lookup][@mantle]; @crust: @catppuccin[@@lookup][@crust]; @accent-color: @catppuccin[@@lookup][@@accent]; - - @text_filter: @catppuccin[@@lookup][@text_filter]; - @dark_color: if(@lookup=latte, @text, @crust); - @light_color: if(@lookup=latte, @crust, @text); - - * { - --web-always-black: #rgbify(@dark_color) []; - --web-always-white: #rgbify(@light_color) []; - --always-white: #rgbify(@light_color) []; - --overlay-alpha-80: fadeout(@dark_color, 50); + @text-filter: @catppuccin[@@lookup][@text-filter]; + @dark-color: if(@lookup = latte, @text, @crust); + @light-color: if(@lookup = latte, @crust, @text); + + &, + .x1qjc9v5, + .x9f619, + .x78zum5, + .xdt5ytf, + .x1iyjqo2, + .xl56j7k { + --web-always-black: #rgbify(@dark-color) []; + --ig-primary-icon: #rgbify(@text) []; + --web-always-white: #rgbify(@light-color) []; + --always-white: #rgbify(@light-color) []; + --overlay-alpha-80: fadeout(@dark-color, 50); --always-dark-overlay: fadeout(@surface0, 50); - + --grey-9: #rgbify(@crust) []; --ig-primary-background: #rgbify(@base) []; --ig-secondary-background: #rgbify(@surface0) []; --ig-banner-background: #rgbify(@crust) []; --ig-highlight-background: #rgbify(@surface0) []; --ig-elevated-background: #rgbify(@crust) []; --ig-elevated-highlight-background: #rgbify(@surface0) []; - --ig-hover-overlay: fadeout(@surface0, 50); + --ig-hover-overlay: #rgbify(@text) [], 0.1; --hover-overlay: fadeout(@surface0, 80); - --ig-text-on-color: #rgbify(@crust) []; - --ig-badge: #rgbify(@accent-color) []; - --ig-primary-button: #rgbify(@accent-color) []; --ig-primary-button-hover: fadeout(@accent-color, 20); - --ig-secondary-button-background: #rgbify(@surface0) []; --ig-secondary-button-hover: #rgbify(@surface1) []; --ig-secondary-button: #rgbify(@text) []; - --ig-primary-text: #rgbify(@text) []; --ig-secondary-text: #rgbify(@subtext0) []; --ig-tertiary-text: #rgbify(@subtext0) []; --wbloks-primary-text: @text; --ig-text-on-media: #rgbify(@text) []; - - --ig-separator: #rgbify(@overlay0) []; + --ig-separator: #rgbify(@surface0) []; + --chat-admin-text-color: #rgbify (@subtext0) []; + --ig-elevated-separator: #rgbify(@surface0) []; --post-separator: #rgbify(@overlay0) []; - --ig-elevated-separator: #rgbify(@overlay0) []; --ig-stroke: #rgbify(@overlay0) []; --grey-2: #rgbify(@overlay0) []; - --ig-link: #rgbify(@accent-color) []; --ig-error-or-destructive: #rgbify(@maroon) []; --ig-success: #rgbify(@green) []; --blue-2: #rgbify(@blue) []; - + --ig-close-friends-refreshed: #rgbify(@green) []; --ig-text-input-border-hover-prism: #rgbify(@surface1) []; - - scrollbar-width: none; + --ig-toggle-outline-prism: #rgbify(@text) []; + --ig-toggle-background-on-prism: #rgbify(@text) []; + --ig-stroke-prism: #rgbify(@crust) []; scrollbar-color: @accent-color @crust; } - //placehoder textcolor - .xh8yej3 { - color: @subtext0 !important; + #splash-screen { + background-color: @base !important; } - // Text selection - *::selection { - color: @dark_color; + + ::selection { + color: @dark-color; background-color: @accent-color; - } // Sidebar + } + + /* Sidebar */ .x1xgvd2v { background-color: @crust !important; - &[style="transform: translateX(0px);"] { background-color: @mantle !important; } @@ -135,59 +131,85 @@ stroke: @text; } - // Posts + /* Story background */ + .x5qyhuo { + background-color: @base; + } + + /* Story progress bar */ + ._ac3p { + background-color: @accent-color !important; + } + + /* Story seen / not seen ring */ + button:has(canvas + span > img[alt$="'s profile picture"]) { + canvas { + display: none; + } + + span { + outline-style: solid; + outline-offset: 0.15rem; + } + + &[aria-label^="Story by"][aria-label$="not seen"] span { + outline-color: @accent-color; + outline-width: 0.2rem; + } + &[aria-label^="Story by"]:not([aria-label$="not seen"]) span { + outline-color: @surface2; + outline-width: 0.075rem; + } + } + + /* Posts */ ._aggc { background-color: @mantle; border-color: @overlay0 !important; border-radius: var(--modal-border-radius); - box-shadow: 0 3px 5px -1px fadeout(@dark_color, 20); + box-shadow: 0 3px 5px -1px fadeout(@dark-color, 20); box-sizing: border-box; } - ._aatc ._aasi, ._ae1i, ._aggc textarea.xvbhtw8 { background-color: @mantle; - } // Icons - svg { - color: @text; - fill: @text; } + /* Icons */ svg[aria-label="Unlike"] { fill: @accent-color; - } // The close icon on the dark wrapper + } svg[aria-label="Close"] { - color: var(--web-always-white); + color: @text; } svg[aria-label="Verified"] { fill: @accent-color; } - //Share box + /* Share box */ .xzloghq { - background-color: @blue; + background-color: @surface0; + color: @text !important; &:hover { - color: @mantle; - background-color: @accent-color; + color: @mantle !important; + background-color: @accent-color !important; } } .xk5f4mz { background-color: @mantle; - &:hover { background-color: @accent-color; } } .x3nfvp2 { - color: @text; + color: @text !important; &:hover { - color: @mantle; + color: @crust; } } - //all toggle sliders - + /* Toggle sliders */ .x1r7x56h { background-color: @accent-color; } @@ -198,21 +220,22 @@ background-color: @overlay1; } .x1psfjxj { - background-color: @text; + background-color: @mantle; } - span[data-bloks-name="bk.components.TextSpan"] { color: @accent-color !important; } - - // Log In With Facebook text + .xs7f9wi { + background-color: @mantle !important; + } + .x1d72o { + background-color: @surface0; + } + /* Log In With Facebook text */ ._ab37 { color: @blue; } - - // Excluded: - // - _9ys7, _9_1f, _9ys8 (verified icon) - + /* Excluded: - _9ys7, _9_1f, _9ys8 (verified icon) */ [style*='background-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png")'], ._9zkj, ._a3ds, @@ -494,8 +517,10 @@ ._9_1l, ._9_1m, ._a9pw { - filter: @text_filter; - } // Custom icons + filter: @text-filter; + } + + /* Custom icons */ @instagram_gradient: radial-gradient( circle at 30% 107%, @yellow 0%, @@ -504,17 +529,52 @@ @mauve 60%, @blue 90% ); + /* Instagram text logo */ + [style*="background-image: url(\"https://static.cdninstagram.com/rsrc.php/v3/yU/r/H5Bq7ru-y9E.png\");"] + { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + background-position: -3px -7px !important; + background-size: unset !important; + } + /* 2fa lock icon */ + [aria-label="Two factor authentication lock icon"] { + @svg: escape( + '' + ); + background: url("data:image/svg+xml,@{svg}") no-repeat !important; + height: 0 !important; + width: 0 !important; + padding-left: 76px !important; + padding-top: 76px !important; + background-size: unset !important; + } + /* "All caught up" icon */ + img[src="/images/instagram/xig/web/illo-confirm-refresh-light.png"] { + @svg: escape( + '' + ); + height: 0 !important; + width: 0 !important; + padding-left: 96px !important; + padding-top: 96px !important; + background: url("data:image/svg+xml,@{svg}") no-repeat !important; + } [style*='background-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png")'] { - // No photo icon + /* No photo icon */ &[style*="background-position: 0px -97px"] { filter: none; background: @mauve !important; background: @instagram_gradient !important; mask-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png"); mask-position: 0 -97px; - } // Private page icon + } + + /* Private page icon */ &[style*="background-position: -49px -97px"] { filter: none; background: @mauve !important; @@ -530,18 +590,28 @@ mask-image: url("https://static.cdninstagram.com/rsrc.php/v3/y4/r/ewSyA8IItw_.png"); mask-position: -49px 0; } - } // Post swipe icons + } + + /* Post swipe icons */ ._aaqh { background-color: @surface0; - } // Inside primary buttons + } + + /* Inside primary buttons */ .xzloghq, ._acas:not(._acao) { &, svg { - color: @base; - fill: @base; + color: @crust; + fill: @mantle; } - } // Secondary buttons + } + ._acas:not(._acao):hover { + background-color: @surface0 !important; + color: @accent-color !important; + } + + /* Secondary buttons */ .x1gjpkn9, ._acat, ._acap { @@ -553,23 +623,28 @@ } } } - // Profile banner + + /* Profile banner */ div:has(> .x1mu97ne) { background-color: @crust; border-color: @overlay0; - box-shadow: 0 10px 35px 2px fadeout(@dark_color, 0.7); + box-shadow: 0 10px 35px 2px fadeout(@dark-color, 0.7); } - // Dialog overlay + + /* Dialog overlay */ .x7r02ix[role="dialog"] { - box-shadow: 0 5px 10px 0 fadeout(@dark_color, 0.5); + box-shadow: 0 5px 10px 0 fadeout(@dark-color, 0.5); } - // Input placeholders - ._ac4d::placeholder, - ._aauy::placeholder, - textarea::placeholder { - color: @subtext0; + + /* Input placeholders */ + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } } - // Settings + + /* Settings */ ._ab81 { background-color: @mantle; } @@ -579,28 +654,36 @@ ._aav4 { background-color: @crust; } - // Bloks + /* Settings saved toast */ + ._abmp { + color: @text; + } + + /* Bloks */ .wbloks_1[data-bloks-name="bk.components.Collection"] { background-color: @base !important; } div[data-bloks-name="bk.components.Flexbox"], .wbloks_1[data-bloks-name="bk.components.Flexbox"] { - // Radios have left padding + /* Radios have left padding */ padding-left: 0 !important; - // The heading + + /* The heading */ &[style*="background: rgb(0\, 0\, 0)"], &[style*="background: rgb(255\, 255\, 255)"] { background-color: @base !important; } - // Radios + + /* Radios */ &[style*="border-radius: 10.5px"], &[style*="border-radius: 12px"], &[style*="border-radius: 4px"] { - // Selected radio + /* Selected radio */ &[style*="background: rgb(0\, 149\, 246)"] { background-color: @accent-color !important; } - // Not selected radio + + /* Not selected radio */ &[style*="background: rgb(219\, 219\, 219)"], &[style*="background: rgb(38\, 38\, 38)"], &[style*="background: rgb(54\, 54\, 54)"], @@ -608,7 +691,8 @@ background-color: @surface0 !important; } } - // That "border" + + /* That "border" */ &[style*="background: rgb(38\, 38\, 38)"] { display: none; } @@ -626,19 +710,21 @@ &[style*="color: rgb(142\, 142\, 142)"] { color: @subtext0 !important; } - } // Map pop-ups + } + + /* Map pop-ups */ .leaflet-popup-content-wrapper, .leaflet-popup-tip { background-color: @mantle; - box-shadow: 0 5px 15px fadeout(@dark_color, 0.4); + box-shadow: 0 5px 15px fadeout(@dark-color, 0.4); * { color: @text !important; } } - // Scrollbar + + /* Scrollbar */ ::-webkit-scrollbar { - width: @scrollbar_width; background-color: @crust; } @@ -650,9 +736,11 @@ } @-moz-document regexp('^.*instagram.com/direct.*') { - :root { - #catppuccin(@darkFlavor, - @accentColor); + ._aa4d { + #catppuccin(@darkFlavor, @accentColor); + } + ._aa4c { + #catppuccin(@lightFlavor, @accentColor); } #catppuccin(@lookup, @accent) { @@ -683,26 +771,35 @@ @mantle: @catppuccin[@@lookup][@mantle]; @crust: @catppuccin[@@lookup][@crust]; @accent-color: @catppuccin[@@lookup][@@accent]; - // Chat background + + /* Chat background */ .xnz67gz { background-color: @base; } [style*="background-color: rgb(55, 151, 240);"] { background-color: @blue !important; - color: @mantle; + color: @mantle !important; } .xvbhtw8 { background-color: @mantle; } - + .x186z157, + .xk50ysn, + .xi81zsa { + color: @subtext0 !important; + } ._aa5c, ._aa4j, ._abyk { background-color: @crust; - } // New Chat Button + } + + /* New Chat Button */ .xk5f4mz { background-color: @surface0; - } // Chat button + } + + /* Chat button */ .x1i10hfl:hover { background-color: @surface0; color: @text; @@ -714,19 +811,19 @@ @catppuccin: { @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; - @text_filter: brightness(0) saturate(100%) invert(28%) sepia(17%) saturate(835%) hue-rotate(196deg) brightness(97%) contrast(85%); + @text-filter: brightness(0) saturate(100%) invert(28%) sepia(17%) saturate(835%) hue-rotate(196deg) brightness(97%) contrast(85%); }; @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; - @text_filter: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1519%) hue-rotate(192deg) brightness(100%) contrast(93%); + @text-filter: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1519%) hue-rotate(192deg) brightness(100%) contrast(93%); }; @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; - @text_filter: brightness(0) saturate(100%) invert(80%) sepia(18%) saturate(377%) hue-rotate(192deg) brightness(103%) contrast(92%); + @text-filter: brightness(0) saturate(100%) invert(80%) sepia(18%) saturate(377%) hue-rotate(192deg) brightness(103%) contrast(92%); }; @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; - @text_filter: brightness(0) saturate(100%) invert(85%) sepia(6%) saturate(1356%) hue-rotate(194deg) brightness(103%) contrast(91%); + @text-filter: brightness(0) saturate(100%) invert(85%) sepia(6%) saturate(1356%) hue-rotate(194deg) brightness(103%) contrast(91%); }; } diff --git a/styles/libreddit/catppuccin.user.css b/styles/libreddit/catppuccin.user.css index 5a1eff45a9..6fb04e923d 100644 --- a/styles/libreddit/catppuccin.user.css +++ b/styles/libreddit/catppuccin.user.css @@ -2,7 +2,7 @@ @name Libreddit/Redlib Catppuccin @namespace github.com/catppuccin/userstyles/styles/libreddit @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/libreddit -@version 2.0.4 +@version 2.0.5 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/libreddit/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Alibreddit @description Soothing pastel theme for Libreddit and Redlib @@ -74,7 +74,28 @@ domain("libreddit.mha.fi"), domain("libreddit.foss.wtf"), domain("libreddit.encrypted-data.xyz"), domain("libreddit.eu.org"), -domain("l.opnxng.com") { +domain("l.opnxng.com"), +domain("safereddit.com"), +domain("libreddit.projectsegfau.lt"), +domain("libreddit.bus-hit.me"), +domain("reddit.invak.id"), +domain("redlib.catsarch.com"), +domain("reddit.idevicehacked.com"), +domain("redlib.freedit.eu"), +domain("redlib.perennialte.ch"), +domain("redlib.tux.pizza"), +domain("redlib.vimmer.dev"), +domain("libreddit.privacydev.net"), +domain("lr.n8pjl.ca"), +domain("reddit.owo.si"), +domain("redlib.ducks.party"), +domain("red.ngn.tf"), +domain("redlib.dnfetheus.xyz"), +domain("redlib.cow.rip"), +domain("libreddit.eu.org"), +domain("r.darrennathanael.com"), +domain("redlib.kittywi.re"), +domain("redlib.privacyredirect.com") { /* 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; }; diff --git a/styles/mastodon/README.md b/styles/mastodon/README.md index b023cc77f6..52e3d7988f 100644 --- a/styles/mastodon/README.md +++ b/styles/mastodon/README.md @@ -17,20 +17,10 @@

-## Usage -This userstyle is applied by default on a few commonly used Mastodon servers, listed at the top: -```css -@-moz-document domain("mastodon.social"), domain("mstdn.social"), domain("fosstodon.org"), domain("piaille.fr"), domain("tech.lgbt") { -``` -If the theme isn't being applied to your instance, go to the userstyle's **Settings > Custom included sites** and add your instance to the list, for instance, `*://floss.social/*`. - ## 🙋 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: **The theme is not working?**\ - A: One solution might be changing the theme to either light or dark via **Preferences** > **Appearance** > **Site theme**. - ## 💝 Current Maintainer - [Isabel](https://github.com/isabelroses) diff --git a/styles/migadu-webmail/catppuccin.user.css b/styles/migadu-webmail/catppuccin.user.css index 33d91197ac..f50e177461 100644 --- a/styles/migadu-webmail/catppuccin.user.css +++ b/styles/migadu-webmail/catppuccin.user.css @@ -2,7 +2,7 @@ @name Migadu Webmail Catppuccin @namespace github.com/catppuccin/userstyles/styles/migadu-webmail @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/migadu-webmail -@version 0.0.4 +@version 0.0.7 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/migadu-webmail/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amigadu-webmail @description Soothing pastel theme for Migadu Webmail @@ -417,6 +417,30 @@ } } + #V-PopupsContacts .e-contact-item, + .messageListItem { + &.focused { + border-left-color: @surface2; + } + + &.checked { + border-left-color: lighten(@accent-color, 10%); + } + + &.checked.focused, + &.selected { + border-left-color: @accent-color; + } + + &.selected { + background-color: fade(@accent-color, 30%); + } + } + + #V-PopupsContacts .e-contact-item { + border-left-color: @surface0; + } + /* Send mail modal */ .squire-toolbar, #V-PopupsCompose .attachmentAreaParent { @@ -432,6 +456,18 @@ border-color: @text; color: @text; } + /* Email address field */ + .emailaddresses { + li[draggable] { + background-color: @mantle; + border-color: @surface0; + box-shadow: 0 1px 0 fade(@mantle, 75%) inset; + color: @text; + } + li a { + color: @surface0; + } + } } @media (prefers-color-scheme: light) { diff --git a/styles/openmediavault/README.md b/styles/openmediavault/README.md index 5f7a74b7a0..2dc5fd0bbe 100644 --- a/styles/openmediavault/README.md +++ b/styles/openmediavault/README.md @@ -4,7 +4,7 @@

Logo
- Catppuccin for OpenMediaVault + Catppuccin for openmediavault

diff --git a/styles/openmediavault/catppuccin.user.css b/styles/openmediavault/catppuccin.user.css index 0f8ccfe182..4e77dbaef9 100644 --- a/styles/openmediavault/catppuccin.user.css +++ b/styles/openmediavault/catppuccin.user.css @@ -1,11 +1,11 @@ /* ==UserStyle== -@name OpenMediaVault Catppuccin +@name openmediavault Catppuccin @namespace github.com/catppuccin/userstyles/styles/openmediavault @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/openmediavault @version 0.0.1 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/openmediavault/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aopenmediavault -@description Soothing pastel theme for OpenMediaVault +@description Soothing pastel theme for openmediavault @author Catppuccin @license MIT diff --git a/styles/pronouns.page/README.md b/styles/pronouns.page/README.md new file mode 100644 index 0000000000..4eff7855c4 --- /dev/null +++ b/styles/pronouns.page/README.md @@ -0,0 +1,36 @@ + + + +

+ Logo
+ + Catppuccin for Pronouns.page + +

+ +

+ + +

+ +

+ +

+ + + +## 💝 Current Maintainer +- [uncenter](https://github.com/uncenter) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/pronouns.page/catppuccin.user.css b/styles/pronouns.page/catppuccin.user.css new file mode 100644 index 0000000000..b24f4c0afb --- /dev/null +++ b/styles/pronouns.page/catppuccin.user.css @@ -0,0 +1,464 @@ +/* ==UserStyle== +@name Pronouns.page Catppuccin +@namespace github.com/catppuccin/userstyles/styles/pronouns.page +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pronouns.page +@version 0.0.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pronouns.page/catppuccin.user.css +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apronouns.page +@description Soothing pastel theme for Pronouns.page +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire*", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@-moz-document domain('pronouns.page') { + #catppuccin(@lookup, @accent) { + @rosewater: @catppuccin[@@lookup][@rosewater]; + @flamingo: @catppuccin[@@lookup][@flamingo]; + @pink: @catppuccin[@@lookup][@pink]; + @mauve: @catppuccin[@@lookup][@mauve]; + @red: @catppuccin[@@lookup][@red]; + @maroon: @catppuccin[@@lookup][@maroon]; + @peach: @catppuccin[@@lookup][@peach]; + @yellow: @catppuccin[@@lookup][@yellow]; + @green: @catppuccin[@@lookup][@green]; + @teal: @catppuccin[@@lookup][@teal]; + @sky: @catppuccin[@@lookup][@sky]; + @sapphire: @catppuccin[@@lookup][@sapphire]; + @blue: @catppuccin[@@lookup][@blue]; + @lavender: @catppuccin[@@lookup][@lavender]; + @text: @catppuccin[@@lookup][@text]; + @subtext1: @catppuccin[@@lookup][@subtext1]; + @subtext0: @catppuccin[@@lookup][@subtext0]; + @overlay2: @catppuccin[@@lookup][@overlay2]; + @overlay1: @catppuccin[@@lookup][@overlay1]; + @overlay0: @catppuccin[@@lookup][@overlay0]; + @surface2: @catppuccin[@@lookup][@surface2]; + @surface1: @catppuccin[@@lookup][@surface1]; + @surface0: @catppuccin[@@lookup][@surface0]; + @base: @catppuccin[@@lookup][@base]; + @mantle: @catppuccin[@@lookup][@mantle]; + @crust: @catppuccin[@@lookup][@crust]; + @accent-color: @catppuccin[@@lookup][@@accent]; + + color-scheme: if(@lookup = latte, light, dark); + + background-color: @base !important; + color: @text !important; + + --bs-body-color: @text; + --bs-body-bg: @base; + --bs-white-rgb: #rgbify(@crust) []; + --bs-primary-rgb: #rgbify(@accent-color) []; + --bs-secondary-rgb: #rgbify(@overlay0) []; + --bs-secondary-color: @subtext0; + --bs-tertiary-bg: @crust; + --bs-success-text-emphasis: @green; + --bs-info-text-emphasis: @sapphire; + --bs-warning-text-emphasis: @yellow; + --bs-danger-text-emphasis: @red; + --bs-light-text-emphasis: @text; + --bs-dark-text-emphasis: @subtext1; + --bs-heading-color: @text; + --bs-form-valid-color: @green; + --bs-form-valid-border-color: @green; + --bs-form-invalid-color: @red; + --bs-form-invalid-border-color: @red; + + /* Buttons */ + + .btn-primary { + color: @crust; + --bs-btn-bg: @accent-color; + } + + .btn-primary, + .btn-outline-primary { + --bs-btn-hover-bg: @accent-color; + --bs-btn-border-color: @accent-color; + --bs-btn-hover-border-color: @accent-color; + --bs-btn-active-bg: @accent-color; + --bs-btn-active-border-color: @accent-color; + --bs-btn-disabled-color: @accent-color; + --bs-btn-disabled-bg: transparent; + --bs-btn-disabled-border-color: @accent-color; + } + + .btn-outline-primary { + color: @text; + + &:hover { + color: @crust; + } + } + + .btn-success { + --bs-btn-color: @crust; + --bs-btn-bg: @green; + --bs-btn-border-color: @green; + --bs-btn-hover-color: @crust; + --bs-btn-hover-bg: darken(@green, 5%); + --bs-btn-hover-border-color: darken(@green, 5%); + --bs-btn-active-color: @crust; + --bs-btn-active-bg: darken(@green, 5%); + --bs-btn-active-border-color: darken(@green, 5%); + --bs-btn-disabled-color: @text; + --bs-btn-disabled-bg: @green; + --bs-btn-disabled-border-color: @green; + } + + .btn-outline-success { + color: @green; + + &:hover { + color: @crust; + } + + --bs-btn-color: @green; + --bs-btn-border-color: @green; + --bs-btn-hover-color: @crust; + --bs-btn-hover-bg: @green; + --bs-btn-hover-border-color: @green; + --bs-btn-active-color: @crust; + --bs-btn-active-bg: @green; + --bs-btn-active-border-color: @green; + --bs-btn-disabled-color: @green; + --bs-btn-disabled-border-color: @green; + } + + .btn-outline-danger { + --bs-btn-color: @red; + --bs-btn-border-color: @red; + --bs-btn-hover-color: @crust; + --bs-btn-hover-bg: @red; + --bs-btn-hover-border-color: @red; + --bs-btn-active-color: @crust; + --bs-btn-active-bg: @red; + --bs-btn-active-border-color: @red; + --bs-btn-disabled-color: @red; + --bs-btn-disabled-border-color: @red; + } + + .btn-secondary { + --bs-btn-color: @text; + --bs-btn-bg: @overlay0; + --bs-btn-border-color: @overlay0; + --bs-btn-hover-color: @text; + --bs-btn-hover-bg: @surface2; + --bs-btn-hover-border-color: @surface2; + --bs-btn-active-color: @text; + --bs-btn-active-bg: @surface2; + --bs-btn-active-border-color: @surface2; + --bs-btn-disabled-color: @text; + --bs-btn-disabled-bg: @overlay0; + --bs-btn-disabled-border-color: @overlay0; + } + + .btn-outline-secondary { + --bs-btn-color: @overlay0; + --bs-btn-border-color: @overlay0; + --bs-btn-hover-color: @text; + --bs-btn-hover-bg: @overlay0; + --bs-btn-hover-border-color: @overlay0; + --bs-btn-active-color: @text; + --bs-btn-active-bg: @overlay0; + --bs-btn-active-border-color: @overlay0; + --bs-btn-disabled-color: @overlay0; + --bs-btn-disabled-border-color: @overlay0; + } + + .btn-light { + &, + &:disabled, + &.disabled { + color: @text; + background-color: @crust; + } + } + .btn-dark, + .btn-outline-dark:hover { + color: @crust; + background-color: @text; + } + .btn-outline-dark { + color: @text; + } + + /* Inputs */ + + .form-check-input:checked { + background-color: @accent-color !important; + border-color: @accent-color !important; + } + + .form-control { + color: @text; + background-color: @mantle; + border-color: @surface0; + } + + .dropdown-menu { + color: @text; + background-color: @mantle; + border-color: @surface0; + + .dropdown-item { + color: @text; + + &:hover, + &:focus { + background-color: @crust; + } + } + } + + .vdp-datepicker__calendar { + background-color: @crust; + border-color: @surface0; + + .disabled { + color: @subtext0; + } + + .prev::after { + border-right-color: @text; + } + .next::after { + border-left-color: @text; + } + + header span:not(.disabled):hover { + background-color: @text; + color: @crust; + + &.prev::after { + border-right-color: @crust; + } + &.next::after { + border-left-color: @crust; + } + } + + .cell.selected { + background-color: @accent-color; + color: @crust; + } + .cell:not(.blank, .disabled):hover { + border-color: @accent-color; + } + } + + /* Header */ + + header .nav-item { + color: @text !important; + + &:hover { + color: @accent-color !important; + } + } + + .nav-custom:not(.nav-custom-start) .nav-item { + border-color: @surface0; + + &:hover { + border-bottom-color: @accent-color !important; + } + + &.btn.active, + &.btn:hover { + border-bottom-color: @accent-color !important; + } + } + + .nav-custom-start .btn, + .nav-custom .btn { + border-inline-start-color: @surface2 !important; + + &:hover, + &.active { + color: lighten(@accent-color, 5%) !important; + border-inline-start-color: @accent-color !important; + } + } + + .hamburger-menu .btn-hamburger { + background-color: @crust !important; + border-color: @surface0; + } + + .card { + background-color: @mantle; + } + + /* Footer */ + + .separator { + > .mask::after { + box-shadow: 0 0 10px @text; + } + + > span { + box-shadow: 0 2px 4px @text; + background: @text; + color: @crust; + } + } + + /* Calendar */ + + .list-group-flare > :first-child { + border-top-color: @accent-color !important; + } + .list-group-item { + color: @text !important; + background-color: @mantle !important; + border-color: @surface0 !important; + } + .calendar > .day.day-event { + border-color: @accent-color; + + &:hover { + background-color: darken(@accent-color, 10%) !important; + + .day-number { + color: @crust; + text-shadow: none; + } + } + + &.day-event-1 { + background-color: @accent-color; + color: @crust; + } + } + + /* Dictionary */ + .page-link { + color: @text; + background-color: @crust; + border-color: @surface0; + } + .page-item.active .page-link { + color: @crust; + background-color: @accent-color; + border-color: @accent-color; + } + .page-item.disabled .page-link { + color: @text; + background-color: @base; + border-color: @surface0; + } + table { + --bs-table-color: @text !important; + --bs-table-striped-color: @text !important; + --bs-table-hover-color: @text !important; + --bs-table-hover-bg: @surface1 !important; + --bs-table-striped-bg: @surface0 !important; + } + + /* Other */ + + .bg-light { + background-color: @mantle !important; + } + .bg-dark { + background-color: @text !important; + } + .bg-white { + background-color: @crust !important; + } + .text-dark { + color: @text !important; + } + .colour-default { + color: @text !important; + } + .colour-pink { + color: @accent-color !important; + } + .colour-orange { + color: @peach !important; + } + .colour-red { + color: @red !important; + } + .colour-grey { + color: @overlay2 !important; + } + + .alert-light { + background-color: @surface2; + color: @text; + } + .alert-info { + background-color: fade(@sapphire, 30%); + border-color: @sapphire; + color: @text; + } + + .nav-pills { + --bs-nav-pills-link-active-bg: @accent-color; + --bs-nav-pills-link-active-color: @crust; + } + + .badge { + --bs-badge-color: @text; + } + + .border { + border-color: @surface0 !important; + } + + a { + color: @accent-color; + + &:hover { + color: lighten(@accent-color, 5%); + } + } + + code { + color: @crust; + background-color: @accent-color; + border-color: transparent; + } + + /* Share QR code */ + [fill="#ff95bb"] { + fill: @accent-color; + } + + mark, + .mark { + background-color: fade(@yellow, 50%); + color: @text; + } + } + + body:not([data-theme="dark"]) { + #catppuccin(@lightFlavor, @accentColor); + } + + body[data-theme="dark"], + body[data-theme="dark"]:not(.reduced-colours) { + #catppuccin(@darkFlavor, @accentColor); + } +} + +#rgbify(@color) { + @rgb-raw: red(@color), green(@color), blue(@color); +} + +/* prettier-ignore */ +@catppuccin: { + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +} +// vim:ft=less diff --git a/styles/pronouns.page/preview.webp b/styles/pronouns.page/preview.webp new file mode 100644 index 0000000000..e22bf7fdbd --- /dev/null +++ b/styles/pronouns.page/preview.webp @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0ffcecd79b864a506bd6b1b4b9929f1976ff5f0bf2e2343dbe649a860d6e670a +size 91268 diff --git a/styles/pypi/catppuccin.user.css b/styles/pypi/catppuccin.user.css index 838e243c76..684fb899a7 100644 --- a/styles/pypi/catppuccin.user.css +++ b/styles/pypi/catppuccin.user.css @@ -2,7 +2,7 @@ @name PyPI Catppuccin @namespace github.com/catppuccin/userstyles/styles/pypi @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pypi -@version 0.0.1 +@version 0.0.2 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pypi/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apypi @description Soothing pastel theme for PyPI @@ -70,7 +70,7 @@ --ctp-surface2: @surface2; --ctp-surface1: @surface1; --ctp-surface0: @surface0; - --ctp-base: @crust; + --ctp-base: @base; --ctp-mantle: @mantle; --ctp-crust: @crust; diff --git a/styles/reddit/catppuccin.user.css b/styles/reddit/catppuccin.user.css index 1469867d5c..02fec21592 100644 --- a/styles/reddit/catppuccin.user.css +++ b/styles/reddit/catppuccin.user.css @@ -2,7 +2,7 @@ @name Reddit Catppuccin @namespace github.com/catppuccin/userstyles/styles/reddit @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/reddit -@version 2.0.9 +@version 2.0.10 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/reddit/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Areddit @description Soothing pastel theme for Reddit @@ -67,12 +67,12 @@ --color-global-focus: @surface1 !important; --color-interactive-content-disabled: @subtext0 !important; --color-interactive-background-disabled: @subtext0 !important; - --color-interactive-pressed: darken(@subtext0, 2) !important; + --color-interactive-pressed: @surface2 !important; --color-neutral-content: @text !important; --color-neutral-content-disabled: @subtext0 !important; --color-neutral-content-weak: @subtext0 !important; --color-neutral-content-strong: @text !important; - --color-global-white: @text !important; + --color-global-white: @crust !important; --color-neutral-background: @base !important; --color-neutral-background-selected: @surface0 !important; --color-neutral-background-weak: @mantle !important; @@ -96,8 +96,8 @@ --color-secondary-weak: @subtext0 !important; --color-secondary-onBackground: @text !important; --color-secondary-background: @mantle !important; - --color-secondary-background-hover: darken(@mantle, 2) !important; - --color-secondary-background-selected: darken(@mantle, 2) !important; + --color-secondary-background-hover: @surface1 !important; + --color-secondary-background-selected: @surface1 !important; --color-secondary-plain: @subtext0 !important; --color-secondary-plain-hover: @subtext1 !important; --color-danger-background: @red !important; @@ -120,14 +120,14 @@ --color-upvote-disabled: @subtext0 !important; --color-upvote-onBackground: @text !important; --color-upvote-background: @base !important; - --color-upvote-background-hover: @base !important; + --color-upvote-background-hover: darken(@accent-color, 5%) !important; --color-upvote-background-disabled: @base !important; --color-downvote-content: @text !important; --color-downvote-content-weak: @text !important; --color-downvote-disabled: @subtext0 !important; --color-downvote-onBackground: @text !important; --color-downvote-background: @base !important; - --color-downvote-background-hover: @base !important; + --color-downvote-background-hover: darken(@blue, 5%) !important; --color-downvote-background-disabled: @mantle !important; --color-tone-1: @text !important; --color-tone-2: @subtext0 !important; @@ -145,7 +145,9 @@ --color-brand-background-hover: @accent-color !important; --color-global-orangered: @accent-color !important; --color-action-upvote: @accent-color !important; + --color-action-downvote: @blue; + --shreddit-color-wordmark: @accent-color; #reddit-logo { circle[fill="#FF4500"] { fill: @accent-color !important; diff --git a/styles/searxng/README.md b/styles/searxng/README.md index 88f3b9bbb5..8e68504bf3 100644 --- a/styles/searxng/README.md +++ b/styles/searxng/README.md @@ -17,13 +17,6 @@

-## Usage -This userstyle is applied by default on a few commonly used Searxng servers, listed at the top: -```css -@-moz-document url-prefix("https://searx.baczek.me/"), url-prefix("https://searx.be/") { -``` -If the theme isn't being applied to your instance, go to the userstyle's **Settings > Custom included sites** and add your instance to the list, for instance, `*://searxng.example.com/*`. - ## 💝 Current Maintainers diff --git a/styles/tldraw/README.md b/styles/tldraw/README.md new file mode 100644 index 0000000000..be2dec59cc --- /dev/null +++ b/styles/tldraw/README.md @@ -0,0 +1,41 @@ + + + +

+ Logo
+ + Catppuccin for tldraw + +

+ +

+ + +

+ +

+ +

+ +## Usage +> [!NOTE] +> This theme only changes how the colors appear on the tldraw canvas. Exported graphics **will not be Catppuccin-themed**. + + + +## 💝 Current Maintainers +- [GenShibe](https://github.com/GenShibe) +- [uncenter](https://github.com/uncenter) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/tldraw/catppuccin.user.css b/styles/tldraw/catppuccin.user.css new file mode 100644 index 0000000000..191bf12880 --- /dev/null +++ b/styles/tldraw/catppuccin.user.css @@ -0,0 +1,420 @@ +/* ==UserStyle== +@name tldraw Catppuccin +@namespace github.com/catppuccin/userstyles/styles/tldraw +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/tldraw +@version 0.0.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/tldraw/catppuccin.user.css +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atldraw +@description Soothing pastel theme for tldraw +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire*", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@-moz-document domain('tldraw.com') { + #catppuccin(@lookup, @accent) { + @rosewater: @catppuccin[@@lookup][@rosewater]; + @flamingo: @catppuccin[@@lookup][@flamingo]; + @pink: @catppuccin[@@lookup][@pink]; + @mauve: @catppuccin[@@lookup][@mauve]; + @red: @catppuccin[@@lookup][@red]; + @maroon: @catppuccin[@@lookup][@maroon]; + @peach: @catppuccin[@@lookup][@peach]; + @yellow: @catppuccin[@@lookup][@yellow]; + @green: @catppuccin[@@lookup][@green]; + @teal: @catppuccin[@@lookup][@teal]; + @sky: @catppuccin[@@lookup][@sky]; + @sapphire: @catppuccin[@@lookup][@sapphire]; + @blue: @catppuccin[@@lookup][@blue]; + @lavender: @catppuccin[@@lookup][@lavender]; + @text: @catppuccin[@@lookup][@text]; + @subtext1: @catppuccin[@@lookup][@subtext1]; + @subtext0: @catppuccin[@@lookup][@subtext0]; + @overlay2: @catppuccin[@@lookup][@overlay2]; + @overlay1: @catppuccin[@@lookup][@overlay1]; + @overlay0: @catppuccin[@@lookup][@overlay0]; + @surface2: @catppuccin[@@lookup][@surface2]; + @surface1: @catppuccin[@@lookup][@surface1]; + @surface0: @catppuccin[@@lookup][@surface0]; + @base: @catppuccin[@@lookup][@base]; + @mantle: @catppuccin[@@lookup][@mantle]; + @crust: @catppuccin[@@lookup][@crust]; + @accent-color: @catppuccin[@@lookup][@@accent]; + + color-scheme: if(@lookup = latte, light, dark); + + --color-accent: @accent-color !important; + --color-background: @base !important; + --color-brush-fill: @surface0 !important; + --color-brush-stroke: @surface2 !important; + --color-grid: @overlay0 !important; + --color-low: @surface0 !important; + --color-low-border: @overlay2 !important; + --color-culled: @subtext1 !important; + --color-muted-none: fade(@surface0, 70%); + --color-muted-0: @surface0; + --color-muted-1: @surface1; + --color-muted-2: @surface2 !important; + --color-hint: @surface2 !important; + --color-overlay: fade(@base, 50%) !important; + --color-divider: @surface1 !important; + --color-panel-contrast: @surface2 !important; + --color-panel-overlay: fade(@overlay0, 80%); + --color-panel: @surface0 !important; + --color-focus: @sky !important; + --color-selected: @accent-color !important; + --color-selected-contrast: @crust !important; + --color-selection-fill: fade(@blue, 50%); + --color-selection-stroke: @sapphire !important; + --color-text-0: @text !important; + --color-text-1: @text !important; + --color-text-3: @subtext1 !important; + --color-text-shadow: @subtext0 !important; + --color-primary: @blue !important; + --color-warn: @maroon !important; + --color-text: @text !important; + --color-laser: @red !important; + + --shadow-1-1: fade(@crust, 16%); + --shadow-1-2: fade(@crust, 22%); + --shadow-2-1: fade(@crust, 66%); + --shadow-2-2: fade(@crust, 33%); + --shadow-3-1: fade(@crust, 50%); + + --shadow-1: 0px 1px 2px var(--shadow-1-1), 0px 1px 3px var(--shadow-1-2); + --shadow-2: 0px 1px 3px var(--shadow-2-1), 0px 2px 6px var(--shadow-2-2), + inset 0px 0px 0px 1px var(--color-panel-contrast); + --shadow-3: 0px 1px 3px var(--shadow-3-1), 0px 2px 12px var(--shadow-3-1), + inset 0px 0px 0px 1px var(--color-panel-contrast); + + .tlui-menu__submenu__trigger[data-state="open"]:not(:hover)::after { + border-radius: var(--radius-1); + background: linear-gradient( + 90deg, + @surface0 0%, + var(--color-muted-2) 100% + ); + } + .tlui-menu-zone *[data-state="open"]::after { + background: linear-gradient( + 180deg, + @surface0 0%, + var(--color-muted-2) 100% + ); + } + .tlui-people-menu__avatar { + background-color: @green !important; + } + + --color-black: @text; + --color-gray: if(@lookup = latte, @subtext0, @subtext0); + --color-red: @red; + --color-light-red: lighten(@red, 5%); + --color-orange: @peach; + --color-yellow: @yellow; + --color-green: darken(@green, 5%); + --color-light-green: lighten(@green, 5%); + --color-blue: @blue; + --color-light-blue: @sky; + --color-violet: darken(@mauve, 10%); + --color-light-violet: @mauve; + + [title="Color — Black"] { + color: var(--color-black) !important; + } + [title="Color — Grey"] { + color: var(--color-gray) !important; + } + [title="Color — Red"] { + color: var(--color-red) !important; + } + [title="Color — Light red"] { + color: var(--color-light-red) !important; + } + [title="Color — Orange"] { + color: var(--color-orange) !important; + } + [title="Color — Yellow"] { + color: var(--color-yellow) !important; + } + [title="Color — Green"] { + color: var(--color-green) !important; + } + [title="Color — Light green"] { + color: var(--color-light-green) !important; + } + [title="Color — Blue"] { + color: var(--color-blue) !important; + } + [title="Color — Light blue"] { + color: var(--color-light-blue) !important; + } + [title="Color — Violet"] { + color: var(--color-violet) !important; + } + [title="Color — Light violet"] { + color: var(--color-light-violet) !important; + } + .tl-svg-container { + [fill="#e1e1e1"], + [fill="#1d1d1d"], + [fill="#494949"], + [fill="#989898"] { + fill: var(--color-black) !important; + } + [fill="#010403"] { + fill: @crust !important; + } + [fill="#9398b0"], + [fill="#adb5bd"], + [fill="#bcc3c9"], + [fill="#7c8187"] { + fill: var(--color-gray) !important; + } + [fill="#e03131"], + [fill="#e55959"], + [fill="#8f3734"] { + fill: var(--color-red) !important; + } + [fill="#ff8787"], + [fill="#fe9e9e"], + [fill="#a56767"] { + fill: var(--color-light-red) !important; + } + [fill="#f76707"], + [fill="#f78438"], + [fill="#9f552d"] { + fill: var(--color-orange) !important; + } + [fill="#ffc034"], + [fill="#ffc078"], + [fill="#fecb92"] { + fill: var(--color-yellow) !important; + } + [fill="#099268"], + [fill="#39a785"], + [fill="#366a53"] { + fill: var(--color-green) !important; + } + [fill="#40c057"], + [fill="#65cb78"], + [fill="#4e874e"] { + fill: var(--color-light-green) !important; + } + [fill="#4263eb"], + [fill="#6681ee"], + [fill="#3a4b9e"] { + fill: var(--color-blue) !important; + } + [fill="#4dabf7"], + [fill="#6fbbf8"], + [fill="#4d7aa9"] { + fill: var(--color-light-blue) !important; + } + [fill="#ae3ec9"], + [fill="#bd63d3"], + [fill="#763a8b"] { + fill: var(--color-violet) !important; + } + [fill="#e599f7"], + [fill="#e9acf8"], + [fill="#9770a9"] { + fill: var(--color-light-violet) !important; + } + [stroke="#e1e1e1"], + [stroke="#1d1d1d"] { + stroke: var(--color-black) !important; + } + [stroke="#9398b0"], + [stroke="#adb5bd"] { + stroke: var(--color-gray) !important; + } + [stroke="#e03131"] { + stroke: var(--color-red) !important; + } + [stroke="#ff8787"] { + stroke: var(--color-light-red) !important; + } + [stroke="#f76707"] { + stroke: var(--color-orange) !important; + } + [stroke="#ffc034"], + [stroke="#ffc078"] { + stroke: var(--color-yellow) !important; + } + [stroke="#099268"] { + stroke: var(--color-green) !important; + } + [stroke="#40c057"] { + stroke: var(--color-light-green) !important; + } + [stroke="#4263eb"] { + stroke: var(--color-blue) !important; + } + [stroke="#4dabf7"] { + stroke: var(--color-light-blue) !important; + } + [stroke="#ae3ec9"] { + stroke: var(--color-violet) !important; + } + [stroke="#e599f7"] { + stroke: var(--color-light-violet) !important; + } + [stroke="color(display-p3 0.8078 0.7225 0.0312)"], + [stroke="color(display-p3 0.972 0.8705 0.05)"] { + stroke: var(--color-yellow) !important; + } + [stroke="color(display-p3 0.6299 0.7012 0.7856)"], + [stroke="color(display-p3 0.8163 0.9023 0.9416)"] { + stroke: var(--color-text-3) !important; + } + [stroke="color(display-p3 0.7024 0.0403 0.753)"], + [stroke="color(display-p3 0.9676 0.5652 0.9999)"] { + stroke: var(--color-light-violet) !important; + } + [stroke="color(display-p3 0.5651 0.0079 0.8986)"], + [stroke="color(display-p3 0.7469 0.5089 0.9995)"] { + stroke: var(--color-violet) !important; + } + [stroke="color(display-p3 0.0032 0.4655 0.7991)"], + [stroke="color(display-p3 0.308 0.6632 0.9996)"] { + stroke: var(--color-blue) !important; + } + [stroke="color(display-p3 0.0023 0.7259 0.7735)"], + [stroke="color(display-p3 0.1512 0.9414 0.9996)"] { + stroke: var(--color-light-blue) !important; + } + [stroke="color(display-p3 0.7699 0.4937 0.0085)"], + [stroke="color(display-p3 0.9988 0.6905 0.266)"] { + stroke: var(--color-orange) !important; + } + [stroke="color(display-p3 0.0085 0.582 0.4604)"], + [stroke="color(display-p3 0.2536 0.984 0.7981)"] { + stroke: var(--color-green) !important; + } + [stroke="color(display-p3 0.2711 0.6172 0.0195)"], + [stroke="color(display-p3 0.563 0.9495 0.3857)"] { + stroke: var(--color-light-green) !important; + } + [stroke="color(display-p3 0.7849 0.0585 0.3589)"], + [stroke="color(display-p3 0.9988 0.5301 0.6397)"] { + stroke: var(--color-light-red) !important; + } + [stroke="color(display-p3 0.7978 0.0509 0.2035)"], + [stroke="color(display-p3 0.9992 0.4376 0.45)"] { + stroke: var(--color-red) !important; + } + } + + [data-testid="mobile-styles.button"] { + &[style*="color: rgb(229, 153, 247);"] { + color: var(--color-light-violet) !important; + } + &[style*="color: rgb(147, 152, 176);"], + &[style*="color: rgb(173, 181, 189);"] { + color: var(--color-gray) !important; + } + &[style*="color: rgb(224, 49, 49);"] { + color: var(--color-red) !important; + } + &[style*="color: rgb(247, 103, 7);"] { + color: var(--color-orange) !important; + } + &[style*="color: rgb(255, 192, 52);"], + &[style*="color: rgb(255, 192, 120);"] { + color: var(--color-yellow) !important; + } + &[style*="color: rgb(9, 146, 104);"] { + color: var(--color-green) !important; + } + &[style*="color: rgb(64, 192, 87);"] { + color: var(--color-light-green) !important; + } + &[style*="color: rgb(66, 99, 235);"] { + color: var(--color-blue) !important; + } + &[style*="color: rgb(77, 171, 247);"] { + color: var(--color-light-blue) !important; + } + &[style*="color: rgb(174, 62, 201);"] { + color: var(--color-violet) !important; + } + &[style*="color: rgb(255, 135, 135);"] { + color: var(--color-light-red) !important; + } + } + + div:has(.tl-text.tl-text-content) { + &[style*="color: rgb(225, 225, 225);"], + &[style*="color: rgb(29, 29, 29);"] { + color: var(--color-black) !important; + } + &[style*="color: rgb(147, 152, 176);"], + &[style*="color: rgb(173, 181, 189);"] { + color: var(--color-gray) !important; + background-color: var(--color-gray) !important; + } + &[style*="color: rgb(224, 49, 49);"] { + color: var(--color-red) !important; + background-color: var(--color-red) !important; + } + &[style*="color: rgb(255, 135, 135);"] { + color: var(--color-light-red) !important; + background-color: var(--color-light-red) !important; + } + &[style*="color: rgb(247, 103, 7);"] { + color: var(--color-orange) !important; + background-color: var(--color-orange) !important; + } + &[style*="color: rgb(255, 192, 52);"], + &[style*="color: rgb(255, 192, 120);"] { + color: var(--color-yellow) !important; + background-color: var(--color-yellow) !important; + } + &[style*="color: rgb(9, 146, 104);"] { + color: var(--color-green) !important; + background-color: var(--color-green) !important; + } + &[style*="color: rgb(64, 192, 87);"] { + color: var(--color-light-green) !important; + background-color: var(--color-light-green) !important; + } + &[style*="color: rgb(66, 99, 235);"] { + color: var(--color-blue) !important; + background-color: var(--color-blue) !important; + } + &[style*="color: rgb(77, 171, 247);"] { + color: var(--color-light-blue) !important; + background-color: var(--color-light-blue) !important; + } + &[style*="color: rgb(174, 62, 201);"] { + color: var(--color-violet) !important; + background-color: var(--color-violet) !important; + } + &[style*="color: rgb(229, 153, 247);"] { + color: var(--color-light-violet) !important; + background-color: var(--color-light-violet) !important; + } + } + } + + .tl-theme__dark { + #catppuccin(@darkFlavor, @accentColor); + } + .tl-theme__light { + #catppuccin(@lightFlavor, @accentColor); + } +} + +/* prettier-ignore */ +@catppuccin: { + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +} +// vim:ft=less diff --git a/styles/tldraw/preview.webp b/styles/tldraw/preview.webp new file mode 100644 index 0000000000..5411c55913 --- /dev/null +++ b/styles/tldraw/preview.webp @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:59693077f30fe4c46cfebebda7af1bf77a6c2a427f782632620280b52e8ce63d +size 73878 diff --git a/styles/trinket/README.md b/styles/trinket/README.md new file mode 100644 index 0000000000..a1873a0748 --- /dev/null +++ b/styles/trinket/README.md @@ -0,0 +1,36 @@ + + + +

+ Logo
+ + Catppuccin for Trinket + +

+ +

+ + +

+ +

+ +

+ + + +## 💝 Current Maintainer +- [trinkey](https://github.com/trinkey) + + +  + +

+ +

+ +

+ Copyright © 2021-present Catppuccin Org +

+ + diff --git a/styles/trinket/catppuccin.user.css b/styles/trinket/catppuccin.user.css new file mode 100644 index 0000000000..d537f67c8f --- /dev/null +++ b/styles/trinket/catppuccin.user.css @@ -0,0 +1,1448 @@ +/* ==UserStyle== +@name Trinket Catppuccin +@namespace github.com/catppuccin/userstyles/styles/trinket +@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/trinket +@version 0.0.1 +@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/trinket/catppuccin.user.css +@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atrinket +@description Soothing pastel theme for Trinket +@author Catppuccin +@license MIT + +@preprocessor less +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire*", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] +==/UserStyle== */ + +@-moz-document domain('trinket.io') { + #catppuccin(@lookup, @accent) { + @import url("https://unpkg.com/@catppuccin/highlightjs@0.1.2/css/catppuccin.variables.css"); + + @rosewater: @catppuccin[@@lookup][@rosewater]; + @flamingo: @catppuccin[@@lookup][@flamingo]; + @pink: @catppuccin[@@lookup][@pink]; + @mauve: @catppuccin[@@lookup][@mauve]; + @red: @catppuccin[@@lookup][@red]; + @maroon: @catppuccin[@@lookup][@maroon]; + @peach: @catppuccin[@@lookup][@peach]; + @yellow: @catppuccin[@@lookup][@yellow]; + @green: @catppuccin[@@lookup][@green]; + @teal: @catppuccin[@@lookup][@teal]; + @sky: @catppuccin[@@lookup][@sky]; + @sapphire: @catppuccin[@@lookup][@sapphire]; + @blue: @catppuccin[@@lookup][@blue]; + @lavender: @catppuccin[@@lookup][@lavender]; + @text: @catppuccin[@@lookup][@text]; + @subtext1: @catppuccin[@@lookup][@subtext1]; + @subtext0: @catppuccin[@@lookup][@subtext0]; + @overlay2: @catppuccin[@@lookup][@overlay2]; + @overlay1: @catppuccin[@@lookup][@overlay1]; + @overlay0: @catppuccin[@@lookup][@overlay0]; + @surface2: @catppuccin[@@lookup][@surface2]; + @surface1: @catppuccin[@@lookup][@surface1]; + @surface0: @catppuccin[@@lookup][@surface0]; + @base: @catppuccin[@@lookup][@base]; + @mantle: @catppuccin[@@lookup][@mantle]; + @crust: @catppuccin[@@lookup][@crust]; + @accent-color: @catppuccin[@@lookup][@@accent]; + + #rgbify(@color) { + @rgb-raw: red(@color), green(@color), blue(@color); + } + + --ctp-rosewater: #rgbify(@rosewater) []; + --ctp-flamingo: #rgbify(@flamingo) []; + --ctp-pink: #rgbify(@pink) []; + --ctp-mauve: #rgbify(@mauve) []; + --ctp-red: #rgbify(@red) []; + --ctp-maroon: #rgbify(@maroon) []; + --ctp-peach: #rgbify(@peach) []; + --ctp-yellow: #rgbify(@yellow) []; + --ctp-green: #rgbify(@green) []; + --ctp-teal: #rgbify(@teal) []; + --ctp-sky: #rgbify(@sky) []; + --ctp-sapphire: #rgbify(@sapphire) []; + --ctp-blue: #rgbify(@blue) []; + --ctp-lavender: #rgbify(@lavender) []; + --ctp-text: #rgbify(@text) []; + --ctp-subtext1: #rgbify(@subtext1) []; + --ctp-subtext0: #rgbify(@subtext0) []; + --ctp-overlay2: #rgbify(@overlay2) []; + --ctp-overlay1: #rgbify(@overlay1) []; + --ctp-overlay0: #rgbify(@overlay0) []; + --ctp-surface2: #rgbify(@surface2) []; + --ctp-surface1: #rgbify(@surface1) []; + --ctp-surface0: #rgbify(@surface0) []; + --ctp-base: #rgbify(@base) []; + --ctp-mantle: #rgbify(@mantle) []; + --ctp-crust: #rgbify(@crust) []; + + // This is here because the specificity in the default css for + // trinket overrides these colors, so `!important` is needed. + code.hljs { + color: @text !important; + + .hljs-keyword, + .hljs-variable, + .hljs-variable.language_, + .hljs-name, + .hljs-selector-attr { + color: @mauve !important; + } + + .hljs-built_in, + .hljs-doctag, + .hljs-emphasis, + .hljs-strong, + .hljs-diff-deletion { + color: @red !important; + } + + .hljs-type, + .hljs-title.class_, + .hljs-attribute, + .hljs-selector-tag { + color: @yellow !important; + } + + .hljs-literal, + .hljs-number, + .hljs-variable.constant_, + .hljs-meta { + color: @peach !important; + } + + .hljs-operator, + .hljs-property, + .hljs-selector-class, + .hljs-selector-pseudo, + .hljs-formula, + .hljs-bullet, + .hljs-punctuation { + color: @teal !important; + } + + .hljs-punctuation { + color: @subtext1 !important; + } + + .hljs-regexp { + color: @pink !important; + } + + .hljs-string, + .hljs-char.escape_, + .hljs-code, + .hljs-diff-addition, + .hljs-quote, + .hljs-value { + color: @green !important; + } + + .hljs-subst, + .hljs-tag { + color: @subtext0 !important; + } + + .hljs-symbol, + .hljs-template-tag, + .hljs-template-variable { + color: @flamingo !important; + } + + .hljs-title, + .hljs-title.function_, + .hljs-section, + .hljs-attr, + .hljs-selector-id { + color: @blue !important; + } + + .hljs-link { + color: @sapphire !important; + } + + .hljs-comment { + color: @surface2 !important; + } + + .hljs-params { + color: @text !important; + } + + .hljs-diff-deletion { + background-color: fade(@red, 0.15); + } + + .hljs-diff-addition { + background-color: fade(@green, 0.15); + } + } + + .ace_editor { + background-color: @crust; + color: @text; + + .ace_gutter { + background: @mantle; + color: @subtext0; + } + .ace_print-margin { + background: @mantle; + } + + .ace_marker-layer { + .ace_active-line { + background-color: fade(@yellow, 20%); + } + .highlight-line-error { + background-color: fade(@red, 20%); + } + .ace_bracket { + border-color: @overlay1; + } + } + + .ace_cursor { + color: @text; + } + .ace_marker-layer .ace_selection { + background: fade(@accent-color, 30%); + } + .ace_fold { + background-color: @surface0; + border-color: @surface1; + } + + .ace_constant.ace_language, + .ace_keyword, + .ace_meta, + .ace_variable.ace_language { + color: @mauve; + } + .ace_line .ace_identifier:not(:first-of-type) { + color: @blue; + } + .ace_paren { + color: @red; + } + .ace_constant.ace_numeric { + color: @peach; + } + .ace_entity.ace_other.ace_attribute-name, + .ace_support.ace_constant, + .ace_support.ace_function { + color: @teal; + } + .ace_entity.ace_name.ace_tag, + .ace_support.ace_class, + .ace_support.ace_type { + color: @blue; + } + .ace_storage { + color: @peach; + } + .ace_string { + color: @green; + } + .ace_comment { + color: @surface2; + } + + .ace_indent-guide { + @svg: escape( + '' + ); + + background-image: url("data:image/svg+xml;utf8,@{svg}"); + } + } + + #ace_settingsmenu { + background-color: @mantle !important; + box-shadow: none !important; + color: @subtext0; + } + + color-scheme: if(@lookup = latte, light, dark); + + ::selection { + background-color: fade(@accent-color, 30%); + } + + body { + background-color: @base !important; + color: @text !important; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: @text !important; + } + + a { + color: @accent-color; + text-decoration-color: @accent-color; + + &:hover { + color: @accent-color; + } + } + + hr, + fieldset { + border-color: @surface0 !important; + } + + footer { + border-top-color: @surface0 !important; + background-color: @mantle !important; + } + + code { + background-color: @mantle !important; + color: @text !important; + } + + select { + background-color: @crust !important; + border-color: @surface0 !important; + color: @text !important; + } + + iframe[frameborder] { + border-color: @surface0 !important; + } + + label { + color: @subtext0 !important; + } + + table { + background-color: @base !important; + border-color: @surface0 !important; + + th, + td { + color: @text !important; + } + + tr.even, + tr.alt, + tr:nth-of-type(2n) { + background-color: @mantle !important; + } + + thead { + background-color: @mantle !important; + } + } + + input, + textarea { + background-color: @crust !important; + color: @text !important; + border-color: @surface0 !important; + + &::placeholder { + color: @subtext0 !important; + } + } + + textarea.lined { + background-color: @base !important; + } + + path[fill="#444444"] { + fill: @text !important; + } + + pre { + border-color: @surface0 !important; + background-color: @mantle !important; + } + + #page.hfeed a:hover { + border-bottom-color: @accent-color !important; + } + + .author-section { + box-shadow: none !important; + } + + .code-editor .expander { + background-image: linear-gradient( + to right, + fade(@mantle, 0), + @mantle 50% + ) !important; + } + + .sidebar-content a:hover { + color: @accent-color !important; + } + + .progress { + border-color: @surface0 !important; + background-color: @crust !important; + color: @base !important; + } + + .sidebar { + box-shadow: 1px 0 15px fade(@crust, 0.5) !important; + background-color: @base !important; + } + + .sidebar-top { + background-color: @base !important; + border-bottom-color: @surface0 !important; + } + + .meter.green { + background-color: @green !important; + } + + .file-upload { + background-color: @crust !important; + border-color: @surface0 !important; + color: @text !important; + } + + .notifyjs-foundation-success, + .alert-box.success { + color: @base !important; + background-color: @green !important; + border-color: @green !important; + } + + .alert-box.alert, + .alert-box.code-error { + color: @base !important; + background-color: @red !important; + border-color: @red !important; + } + + .lineno, + article .categories, + article .date, + article .date a { + color: @subtext0 !important; + + &a:hover { + color: @accent-color !important; + } + } + + .linedwrap .lines { + border-right-color: @surface0; + } + + .codelines { + background-color: @mantle !important; + } + + .resources a { + color: @text !important; + + &:hover .book-item { + box-shadow: 0 0 15px @surface0 !important; + } + } + + #trinket-gallery #trinketDetails a.closer { + border-color: @surface0 !important; + background-color: @crust !important; + } + + .panel { + background-color: @crust !important; + color: @text !important; + border-color: @surface0 !important; + + li { + color: @subtext0 !important; + } + } + + .code-plan-colors, + .code-label, + .code-name, + .codeplus-plan-colors, + .codeplus-label, + .codeplus-name, + .connect-plan-colors, + .connect-label, + .connect-name, + .classroom-plan-colors, + .classroom-label, + .classroom-name, + i.trinket-key.logo { + background-color: @accent-color !important; + color: @base !important; + } + + .code-plan-colors-inverted, + .connect-plan-colors-inverted, + .classroom-plan-colors-inverted { + color: @accent-color; + } + + .nav-wrapper, + .entry-footer { + border-bottom-color: @surface0 !important; + } + + .top-bar, + .top-bar-section ul li, + .top-bar-section li:not(.has-form) a:not(.button, .faux-button), + .name { + background-color: @crust !important; + } + + .top-bar-section li:not(.has-form) a:not(.button, .faux-button):hover { + background-color: @mantle !important; + } + + .angular-ui-tree-placeholder { + background-color: @base !important; + border-color: @surface0 !important; + } + + .editable-click:hover, + a.editable-click:hover { + color: @accent-color !important; + } + + .outline-list-item.lesson { + border-bottom-color: @surface0 !important; + } + + .intercom-namespace .intercom-o8wqhy { + box-shadow: none; + } + + .intercom-lightweight-app-launcher-icon-open svg path { + fill: @base !important; + } + + .intercom-lightweight-app-launcher { + background-color: @accent-color !important; + } + + .edit-material-title:hover { + background-color: @crust !important; + } + + a.dashboard-actions-link, + a.edit-lesson-actions-link, + a.edit-material-actions-link { + i { + color: @text !important; + } + + &:hover { + background-color: @mantle !important; + } + } + + .dashboard-content.dashboard-list { + .submission-row, + .user-row { + border-bottom-color: @surface0 !important; + + &:not(.row-open):hover { + background-color: @mantle !important; + } + } + } + + .dashboard-content .material-row .material-name span { + color: @text !important; + } + + .chart-wrapper { + background-color: @base !important; + } + + .chart-segment { + span { + color: @base !important; + } + + &.completed { + background-color: @green !important; + } + + &.submitted { + background-color: @blue !important; + } + + &.started { + background-color: @yellow !important; + } + + &.not-started { + background-color: @text !important; + background-image: repeating-linear-gradient( + 135deg, + @subtext1, + @subtext1 10px, + transparent 10px, + transparent 30px + ) !important; + } + } + + .outline-list { + background-color: @mantle !important; + } + + .outline-list-item.angular-ui-tree-node.isDraft { + background-image: repeating-linear-gradient( + 45deg, + @base, + @base 10px, + transparent 10px, + transparent 20px + ) !important; + } + + .top-bar .toggle-topbar.menu-icon a { + color: @text !important; + } + + .top-bar.expanded .toggle-topbar a span::after { + box-shadow: + 0 0 0 1px @text, + 0 7px 0 1px @text, + 0 14px 0 1px @text; + } + + .button.dropdown-blue::after { + border-top-color: @text !important; + } + + .top-bar-section .title h5 a { + color: @text !important; + } + + .update-row { + border-top-color: @surface2 !important; + } + + .top-bar-section .divider { + border-top-color: @surface0 !important; + } + + nav.top-bar .top-bar-section .dropdown, + nav.top-bar .top-bar-section body.course .dropdown-blue, + body.course nav.top-bar .top-bar-section .dropdown-blue { + border-color: @surface0 !important; + } + + .content-heading { + background-color: @mantle !important; + } + + .top-bar-section ul li > a, + #userdata, + .subheader, + .green-highlight:not(.disabled) > *, + .tab-scroll-link, + .closer, + .entry-title a, + .jqconsole-prompt, + .jqconsole-old-prompt { + color: @text !important; + } + + .top-bar-section .has-dropdown > a::after { + border-top-color: @text !important; + } + + #loadingContent { + background-color: @base !important; + } + + .fa-spinner { + color: @text !important; + } + + button, + .button, + .faux-button { + background-color: @crust !important; + color: @text !important; + border-color: @surface0 !important; + + &:hover { + background-color: @mantle !important; + } + + &:not(.disabled) { + &.secondary, + &.success { + background-color: @surface0 !important; + color: @text !important; + border-color: @surface0 !important; + + // the :not() adds specificity to override the `!important` in the default styles + &:hover:not(.disabled) { + background-color: @green !important; + color: @base !important; + border-color: @surface0 !important; + } + } + + &.danger { + background-color: @red !important; + border-color: @red !important; + color: @base !important; + + &:hover { + background-color: darken(@red, 5%) !important; + } + } + + &.caution { + border-color: @red !important; + color: @red; + + &:hover { + background-color: fade(@red, 40%) !important; + } + } + } + + &#sidebar-link, + &#sidebar-close { + background-color: @base !important; + } + } + + .site-header { + border-bottom-color: @surface0 !important; + } + + .menu-icon { + fill: @text !important; + } + + .draft-message, + .broadcast-message { + color: @subtext0 !important; + } + + .color-swatch { + color: @surface0 !important; + } + + #embed-documentation dd, + dl#documentation dd { + &, + .methodHeader, + .methodDocs { + border-color: @surface0 !important; + + pre { + background-color: @base !important; + } + } + + .methodHeader { + background-color: @crust !important; + } + + &.active a { + border-bottom-color: @surface0 !important; + } + } + + .switch { + label { + background-color: @crust !important; + + &::after { + background-color: @text !important; + } + } + + input:checked + label { + background-color: @accent-color !important; + + &::after { + background-color: @base !important; + } + } + } + + .accordion { + dd > a { + background-color: @mantle !important; + color: @text !important; + } + + dd > .content.active { + background-color: @mantle !important; + } + } + + .icon-bar { + background-color: @base !important; + + > a { + background-color: @crust !important; + } + + > a:hover { + background-color: @mantle !important; + } + + .item, + > * i { + color: @text !important; + } + } + + .exit-off-canvas { + box-shadow: + -4px 0 4px @surface0, + 4px 0 4px @surface0 !important; + background-color: fade(@base, 0.5) !important; + } + + #trinket-gallery #trinketDetails .spotlight { + background-color: fade(@base, 0.5) !important; + } + + .right-off-canvas-menu, + .left-off-canvas-menu { + background-color: @base !important; + } + + .tab-nav { + border-bottom-color: @base !important; + + .menu-button { + background-color: @base !important; + color: @text !important; + } + + .tab { + background-color: @crust !important; + border-color: @surface0 !important; + border-top-color: @crust !important; + box-shadow: none !important; + + i.warning { + color: @red !important; + } + + a { + color: @text !important; + } + + &.active { + background-color: @surface0 !important; + + span { + background-color: @surface0 !important; + } + } + } + } + + .side-nav { + border-color: @surface0 !important; + + li { + border-top-color: @surface2 !important; + } + + a { + color: @accent-color !important; + + &.active { + color: @text !important; + } + } + } + + li.side-nav-heading { + background-color: @mantle !important; + } + + .decorated > span { + &::before, + &::after { + border-bottom-color: @surface0; + } + } + + .tab-options, + .f-dropdown.open { + background-color: @base !important; + border-color: @surface0 !important; + + &::before, + &::after { + border-bottom-color: @crust !important; + } + + a { + background-color: @crust !important; + color: @text !important; + } + } + + .reveal-modal { + background-color: @base !important; + border-color: @surface0 !important; + box-shadow: none !important; + + .close-reveal-modal { + color: @subtext0 !important; + } + } + + ul.off-canvas-list li { + a { + border-bottom-color: @surface0 !important; + color: @text !important; + background-color: @base !important; + } + + a:hover { + background-color: @mantle !important; + } + + label { + background-color: @mantle !important; + border-top-color: @surface0 !important; + color: @subtext0 !important; + } + } + + .faux-input { + background-color: @crust !important; + border-color: @surface0 !important; + box-shadow: none !important; + color: @text !important; + } + + .label:not(.last-saved) { + background-color: @accent-color !important; + color: @base !important; + } + + .last-saved { + color: @subtext0 !important; + } + + .code-editor .info-area { + border-top-color: @surface0 !important; + background-color: @base !important; + color: @text !important; + } + + .injectionDiv { + color: initial !important; + } + + .pricing-table { + border-color: @surface0 !important; + + .cta-button { + background-color: @base !important; + } + + .price { + background-color: @base !important; + color: @text !important; + } + + .title { + background-color: @mantle !important; + } + + .description, + .bullet-item { + background-color: @base !important; + color: @text !important; + border-bottom-color: @surface2 !important; + + p { + color: @subtext0 !important; + } + } + } + + .blue-highlight:not(.disabled) { + background-color: @accent-color !important; + + &, + i.fa, + label { + color: @base !important; + } + } + + .featured-course-list li { + border-color: @surface0 !important; + } + + .course-title { + background-color: @mantle !important; + border-bottom-color: @surface0 !important; + + a { + color: @text !important; + } + } + + .course-list li { + border-color: @surface0 !important; + + &:hover { + background-color: @mantle !important; + } + } + + .library-subnav { + border-bottom-color: @surface0 !important; + } + + .trinket-last-date { + color: @subtext0 !important; + } + + .fa { + &.neutral { + color: @subtext0 !important; + } + + &.success { + color: @green !important; + } + + &.alert, + &.caution { + color: @red !important; + } + } + + .shared-modal ul#my-folders-list li.folder-item { + border-top-color: @surface0 !important; + } + + .trinket-stat .badge { + background-color: @accent-color !important; + background-image: none !important; + color: @base !important; + } + + .editable-empty { + color: @subtext0 !important; + } + + .breadcrumbs { + background-color: @mantle !important; + border-color: @surface0 !important; + + .editable { + border-bottom-color: @subtext0 !important; + + &:hover { + color: @accent-color !important; + } + } + + > .current { + color: @text !important; + } + } + + .jqconsole-header { + color: @subtext0 !important; + } + + .jqconsole-output:not(.error) { + color: @subtext1 !important; + } + + .jqconsole-output.error, + .jqconsole-error { + background-color: @red !important; + color: @base !important; + } + + .draft-circle { + background-color: @accent-color !important; + } + + .MathJax_Preview { + color: @subtext0 !important; + } + + [data-magellan-expedition], + [data-magellan-expedition-clone] { + background-color: @base !important; + } + + #trinkets-list, + .trinkets-list { + > li { + border-color: @surface0 !important; + box-shadow: none; + } + + > li .snapshot .title { + background-color: unset !important; + border-top-color: @surface0 !important; + } + + .dragging-trinket { + background-color: @crust !important; + border-color: @surface0 !important; + color: @subtext0 !important; + } + } + + #sidebar-link:hover, + #sidebar-close:hover { + opacity: 100% !important; + } + + #search-2 input { + &, + &:hover, + &:focus { + background-color: @crust !important; + color: @text !important; + border-color: @surface0 !important; + } + } + + #material-edit .toolbar { + background-color: @mantle; + border-top-color: @surface0; + border-bottom-color: @surface0; + } + + #outline { + background-color: @mantle !important; + border-right-color: @surface0 !important; + + ul { + background-color: @mantle !important; + } + + .outline-list-item.material.current { + background-color: @crust !important; + color: @text !important; + } + + .info, + .outline-list-item.lesson { + border-bottom-color: @surface0 !important; + } + } + + #outline-expander { + background-color: @accent-color !important; + color: @base !important; + } + + #class-progress { + background-color: @surface0 !important; + + .percentage { + background-color: @accent-color !important; + } + } + + #course-nav { + background-color: @mantle !important; + border-color: @surface0 !important; + + .title.breadcrumbs { + background-color: @crust !important; + } + } + + #reset-output { + color: @subtext0 !important; + } + + #instructionsToolbar { + border-bottom-color: @surface0 !important; + } + + #instructionsContainer { + background-color: @base !important; + } + + #team { + background-color: @mantle !important; + + img { + box-shadow: 0 0 0 10px @accent-color !important; + } + + a.social { + background-color: @accent-color !important; + + i::before { + color: @base !important; + } + } + } + + #outputTabs { + background-color: @crust !important; + border-bottom-color: @surface0 !important; + + .active { + background-color: @mantle !important; + } + + #instructionsTab { + border-left-color: @surface0 !important; + } + } + + #recent-trinkets .item a { + background-color: @mantle !important; + border-color: @surface0 !important; + box-shadow: none !important; + } + + #content-wrapper { + border-color: @surface0 !important; + } + + #wrapper { + border-color: @surface0 !important; + + .trinket-content { + border-top-color: @surface0 !important; + } + + .trinket-wrapper .trinket-content { + background-color: @base !important; + } + + .trinket-label { + color: @subtext0 !important; + } + + &, + .trinket-content-wrapper > :not(.codeOutput, #content-overlay) { + background-color: @base; + } + + .codeOutput { + background-color: initial !important; + } + + .left-menu-toggle { + border-right-color: @surface0 !important; + } + + .right-menu-toggle { + border-left-color: @surface0 !important; + } + + .icon-bar .item.split { + &.button, + &.faux-button { + span { + border-left-color: @surface0 !important; + } + + span::after { + border-top-color: @text !important; + } + } + } + } + + #content-overlay { + background-color: rgba(@base, 0.2) !important; + } + + #books-index .book-img { + outline-color: @surface0 !important; + + &:hover { + outline-color: @accent-color !important; + } + } + + #svg-logo .letters { + fill: @text !important; + } + + #svg-logo .yellow { + fill: @yellow !important; + } + + #svg-logo .blue { + fill: @blue !important; + } + + #svg-logo .green { + fill: @green !important; + } + + #svg-logo .white { + fill: @base !important; + } + + #blue-logo-circle { + // There normally isn't an animation applied to this + // element because the circle blends in to the background. + opacity: 0; + animation: RtL 1s 0.75s ease 1 forwards !important; + } + + #hero { + background-color: @mantle !important; + } + + #graphic { + /* This is the element for graphics output. If styled with Catppuccin, it may make graphics unviewable due to contrast issues. */ + background-color: white !important; + + &, + label { + color: initial !important; + } + } + + @keyframes attention-error-border-pulse { + 0% { + box-shadow: inset 0 0 0 @red; + } + 40% { + box-shadow: inset 0 0 0 @red; + } + 70% { + box-shadow: inset 0 0 6px @red; + } + 100% { + box-shadow: inset 0 0 0 @red; + } + } + + @keyframes bluePulseButton { + 0% { + box-shadow: 0 0 0 0 fade(@accent-color, 0.4); + background-color: @accent-color; + } + + 70% { + box-shadow: 0 0 0 10px fade(@accent-color, 0); + background-color: @accent-color; + } + + 100% { + box-shadow: none; + background-color: @accent-color; + } + } + + img[src$="trinket-logo-notag.png"], + img[src$="trinket-logo.png"] { + @svg: escape( + '' + ); + + width: 0 !important; + height: 0 !important; + background-image: url("data:image/svg+xml;utf8,@{svg}") !important; + background-repeat: no-repeat !important; + } + + img[src$="trinket-logo.png"] { + padding-top: 1.1rem !important; + padding-left: 6rem !important; + } + + img[src$="trinket-logo-notag.png"] { + margin: 50px 0 30px; + padding-left: 300px; + } + + img[src$="trinket-logo-circles.png"] { + @svg: escape( + '' + ); + + width: 0 !important; + height: 0 !important; + padding-left: 1.5em !important; + padding-top: 1.5em !important; + background-image: url("data:image/svg+xml;utf8,@{svg}") !important; + background-repeat: no-repeat !important; + background-position-y: center; + } + + #dragbar { + @svg: escape( + '' + ); + + background-color: @surface0 !important; + border-left-color: @surface0 !important; + border-right-color: @surface0 !important; + background-image: url("data:image/svg+xml;utf8,@{svg}") !important; + } + + #output-dragbar { + @svg: escape( + '' + ); + + background-color: @surface0 !important; + border-top-color: @surface0 !important; + border-bottom-color: @surface0 !important; + background-image: url("data:image/svg+xml;utf8,@{svg}") !important; + } + + .lang-sprite, + #trinkets-list.list-view > li .snapshot .title::before, + .trinkets-list.list-view > li .snapshot .title::before { + @svg: escape( + '' + ); + + background-image: url("data:image/svg+xml;utf8,@{svg}"); + } + } + + @media (prefers-color-scheme: light) { + :root { + #catppuccin(@lightFlavor, @accentColor); + } + } + @media (prefers-color-scheme: dark) { + :root { + #catppuccin(@darkFlavor, @accentColor); + } + } +} + +/* prettier-ignore */ +@catppuccin: { + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +} +// vim:ft=less diff --git a/styles/trinket/preview.webp b/styles/trinket/preview.webp new file mode 100644 index 0000000000..8eb77d032b --- /dev/null +++ b/styles/trinket/preview.webp @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:cb0185d45816677dff151452d76afa9121f31f87c5034753ae884e82aa715c87 +size 397752 diff --git a/styles/twitch/catppuccin.user.css b/styles/twitch/catppuccin.user.css index 33aa1a26b1..238eeb07f7 100644 --- a/styles/twitch/catppuccin.user.css +++ b/styles/twitch/catppuccin.user.css @@ -2,7 +2,7 @@ @name Twitch Catppuccin @namespace github.com/catppuccin/userstyles/styles/twitch @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/twitch -@version 1.1.19 +@version 1.2.0 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/twitch/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atwitch @description Soothing pastel theme for Twitch @@ -92,8 +92,7 @@ div.hype-train-progress-bar-info-view__level-container p, div.hype-train-approaching-view__leftSide p, div.hype-train-expanded-layout p, - div.hype-train-expanded-layout svg, - .CoreText-sc-1txzju1-0 { + div.hype-train-expanded-layout svg { color: @text; } @@ -593,6 +592,58 @@ --color-text-tooltip: @base !important; --color-background-tooltip: @text !important; --color-hinted-grey-2: @surface0; + --color-background-overlay-alt: @mantle; + --color-background-button-overlay-text-hover: @crust; + --color-border-overlay: @surface0; + --color-background-button-disabled: @surface0; + --color-text-button-disabled: @subtext0; + } + + /* Predictions */ + .fixed-prediction-button { + color: @text !important; + + .channel-points-icon svg { + color: @text !important; + } + } + [style*="rgb(255, 255, 255)"] { + color: @base !important; + } + [style="color: rgb(56, 122, 255);"] { + color: @blue !important; + } + [style="color: rgb(245, 0, 155);"] { + color: @pink !important; + } + .fixed-prediction-button--blue, + [style*="background-color: rgb(56, 122, 255);"], + [style*="background: rgb(56, 122, 255);"] { + background-color: @blue !important; + } + .fixed-prediction-button--pink, + [style*="background-color: rgb(245, 0, 155);"], + [style*="background: rgb(245, 0, 155);"] { + background-color: @pink !important; + } + + input[disabled] { + background-color: @surface0; + } + .chat-wysiwyg-input__placeholder { + color: @subtext0; + } + + button[aria-label="Play"], + button[aria-label="Pause"] { + & + div svg { + color: @subtext0; + } + } + + [data-a-target="video-ad-label"], + [data-a-target="video-ad-countdown"] { + color: @text !important; } } } diff --git a/styles/vercel/catppuccin.user.css b/styles/vercel/catppuccin.user.css index edbf256fce..405a6a7e18 100644 --- a/styles/vercel/catppuccin.user.css +++ b/styles/vercel/catppuccin.user.css @@ -2,7 +2,7 @@ @name Vercel Catppuccin @namespace github.com/catppuccin/userstyles/styles/vercel @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/vercel -@version 0.0.5 +@version 0.0.6 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/vercel/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Avercel @description Soothing pastel theme for Vercel @@ -70,20 +70,26 @@ --accents-6: @overlay1; --accents-7: @overlay2; --accents-8: @subtext0; - --geist-link-color: @rosewater; + --geist-link-color: @accent-color; --geist-selection: @subtext0; --geist-success: @blue; --geist-error: @red; --geist-cyan: @teal; + --ds-red-400: @red; --ds-background-100: @base; - --ds-background-200: @surface0; + --ds-background-200: @mantle; --ds-gray-100: @base; --ds-gray-200: @surface0; --ds-gray-300: @surface1; + --ds-gray-400: @surface1; --ds-gray-1000: @text; --ds-gray-900: @subtext0; --ds-gray-800: @subtext1; + --ds-gray-700: @subtext1; + --ds-gray-alpha-400: @surface0; + + --themed-hover-bg: @subtext1; --ds-red-800: @red; --ds-red-900: lighten(@red, 5%); diff --git a/styles/wikipedia/catppuccin.user.css b/styles/wikipedia/catppuccin.user.css index 52e419f7df..4e544f7208 100644 --- a/styles/wikipedia/catppuccin.user.css +++ b/styles/wikipedia/catppuccin.user.css @@ -2,7 +2,7 @@ @name Wikipedia Catppuccin @namespace github.com/catppuccin/userstyles/styles/wikipedia @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/wikipedia -@version 0.0.8 +@version 0.0.13 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/wikipedia/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Awikipedia @description Soothing pastel theme for Wikipedia @@ -78,7 +78,7 @@ --ctp-surface2: @surface2; --ctp-surface1: @surface1; --ctp-surface0: @surface0; - --ctp-base: @crust; + --ctp-base: @base; --ctp-mantle: @mantle; --ctp-crust: @crust; @@ -104,7 +104,8 @@ .vector-pinned-container, .vector-header-container .vector-sticky-header, .mw-mmv-image, - .mw-body { + .mw-body, + .frb-form-wrapper { background-color: @base; } @@ -161,6 +162,7 @@ .uls-no-results-found-title, .mw-mmv-post-image, .mw-mmv-credit, + .frb-form-wrapper, #contentSub:not(:empty) { color: @text; } @@ -174,6 +176,30 @@ border-color: @text; } + /* maths */ + img.mwe-math-fallback-image-display, + img.mwe-math-fallback-image-inline { + & when (@lookup = latte) { + filter: brightness(0) saturate(100%) invert(31%) sepia(9%) + saturate(1499%) hue-rotate(196deg) brightness(90%) contrast(85%); + } + + & when (@lookup = frappe) { + filter: brightness(0) saturate(100%) invert(92%) sepia(6%) + saturate(3753%) hue-rotate(184deg) brightness(93%) contrast(106%); + } + + & when (@lookup = macchiato) { + filter: brightness(0) saturate(100%) invert(82%) sepia(7%) + saturate(1042%) hue-rotate(193deg) brightness(103%) contrast(92%); + } + + & when (@lookup = mocha) { + filter: brightness(0) saturate(100%) invert(83%) sepia(28%) + saturate(223%) hue-rotate(190deg) brightness(99%) contrast(93%); + } + } + .mwe-popups .mwe-popups-extract[dir="ltr"]::after { background-image: linear-gradient( to right, @@ -649,6 +675,11 @@ border-color: @surface2; } + td[style*="background-color"], + td[style*="background-color"] * { + color: @crust !important; + } + #toc-Services > a:nth-child(1) > div:nth-child(1) { color: @text !important; } @@ -992,6 +1023,169 @@ border-left-color: @surface2; } + /* Fundraising banner */ + .frb-btn, + .frb-label { + color: @text; + background-color: @base; + border-color: @overlay0; + } + + input[type="radio"]:checked + .frb-btn, + input[type="radio"]:checked + .frb-label, + .frb-btn:hover, + .frb-label:hover { + color: @base; + background-color: @accent-color; + border-color: @accent-color; + } + + #frb-main { + --wmui-base100: @base; + --wmui-base0: @text; + --frb-body: @text; + --frb-muted: @subtext0; + --frb-link: @subtext0; + --frb-link-hover: @text; + --frb-error: @red; + --frb-submit: @accent-color; + --frb-submit-hover: darken(@accent-color, 10%); + + svg.frb-message-icon > g { + circle { + fill: @yellow; + } + path { + fill: @base; + } + } + + .frb-message { + background-color: @green; + border-color: @green; + } + + .frb-message::after { + border-left-color: @green; + } + } + + #frb-inline { + --wmui-base100: @base; + --frb-primary: @red; + --frb-link: @accent-color; + --frb-muted: @subtext0; + --frb-muted-hover: @text; + --frb-body: @text; + --frb-error: @red; + --wmui-red-dark: @red; + --wmui-red-light: @red; + --wmui-green-dark: @green; + --wmui-green-light: @green; + --frb-submit: @accent-color; + --frb-submit-hover: darken(@accent-color, 10%); + + .frb-inline-topbar { + color: @text; + + svg circle { + fill: @yellow; + } + + svg path { + fill: @base; + } + } + + .frb-btn-cta { + background-color: @accent-color !important; + border-color: @accent-color !important; + color: @base !important; + } + + .frb-btn-simple { + color: @accent-color !important; + } + + .frb-monthly-pitch { + color: @blue; + } + + .frb-optin-no-prompt { + color: @base; + } + + .frb-cta-hiddenmessage { + background-color: @red; + color: @base; + } + } + + #frb-nag { + --frb-primary-light: @base; + --frb-body: @text; + --wmui-accent-dark: @subtext0; + --frb-link-hover: @text; + + span.frb-donate-button { + color: @base; + background-color: @red; + + &:hover { + color: @base; + background-color: darken(@red, 10%); + } + } + + svg.frb-icon-close > g { + stroke: @subtext0; + + &:hover { + stroke: @text; + } + } + } + + .frb-nag:not(#frb-nag) { + --frb-message-background: @base; + --frb-message-border: @red; + --frb-message: @text; + border-color: @surface0; + background: @base; + box-shadow: none; + + #nag-rml-btn { + background-color: transparent; + border-color: transparent; + color: @subtext0; + } + + #nag-yes-btn { + background-color: @accent-color; + border-color: @accent-color; + color: @base; + } + } + + .frb-btn-cta-label::after { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .frb-back { + @svg-raw: ''; + @svg: escape(@svg-raw); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + + .frb-close { + @svg-raw: ''; + @svg: escape(@svg-raw); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + .sprite { @svg: escape( '' diff --git a/styles/youtube/README.md b/styles/youtube/README.md index 35777a38ca..6892c82d70 100644 --- a/styles/youtube/README.md +++ b/styles/youtube/README.md @@ -22,8 +22,9 @@ - Q: **What does the 'Enable for black bars' option mean?**\ A: It's available in case you have an OLED display. If you have one, you might want to enable this. -## 💝 Current Maintainer +## 💝 Current Maintainers - [Isabel](https://github.com/isabelroses) +- [uncenter](https://github.com/uncenter) ## 💖 Past Maintainer - [Elkrien](https://github.com/elkrien) diff --git a/styles/youtube/catppuccin.user.css b/styles/youtube/catppuccin.user.css index 00e9d4dd10..d0f4a04867 100644 --- a/styles/youtube/catppuccin.user.css +++ b/styles/youtube/catppuccin.user.css @@ -2,7 +2,7 @@ @name YouTube Catppuccin @namespace github.com/catppuccin/userstyles/styles/youtube @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/youtube -@version 3.5.1 +@version 3.5.8 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/youtube/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Ayoutube @description Soothing pastel theme for YouTube @@ -56,10 +56,8 @@ @crust: @catppuccin[@@lookup][@crust]; @accent-color: @catppuccin[@@lookup][@@accent]; - /* apply everywhere */ &, [dark], - html, html[system-icons][dark], html[system-icons] [dark], html[darker-dark-theme][dark], @@ -316,11 +314,7 @@ null ) !important; - /* Tooltip */ - --paper-tooltip-background: @overlay0 !important; - --paper-tooltip-text-color: @text !important; - - /* links */ + /* Links */ --yt-endpoint-color: @accent-color !important; --yt-endpoint-visited-color: @accent-color !important; --yt-endpoint-hover-color: @accent-color !important; @@ -333,7 +327,6 @@ --sb-red-bg-color: @accent-color !important; } - /* general colors */ &:not(.style-scope) { --primary-text-color: @text !important; --primary-background-color: @base !important; @@ -361,17 +354,7 @@ --dark-theme-divider-color: @overlay0 !important; } - /* logo */ - ytd-topbar-logo-renderer.style-scope a svg > g, - svg.ytd-consent-bump-v2-lightbox > g:nth-child(1) { - path[fill="#FF0000"] { - fill: @accent-color !important; - } - path[fill="white"] { - fill: @base !important; - } - } - & when (@logo =0) { + & when (@logo = 0) { ytd-topbar-logo-renderer, svg.ytd-consent-bump-v2-lightbox { display: none; @@ -407,10 +390,9 @@ background-color: @base !important; } - /* transparent header bar */ + /* header bar icons */ #container.ytd-masthead { --iron-icon-fill-color: @text !important; - background-color: @base !important; } ytd-feed-filter-chip-bar-renderer[expand-instead-of-scroll] @@ -421,10 +403,10 @@ /* change color of the player edges */ #ytd-player #container when (@oledOn =0) { - background: @base !important; + background: @crust !important; } - /* explandable meta */ + /* expandable meta */ ytd-expandable-metadata-renderer { --yt-lightsource-section1-color: @base !important; --yt-lightsource-section2-color: @surface0 !important; @@ -435,7 +417,6 @@ } 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; @@ -470,15 +451,12 @@ background: @overlay0 !important; } - /* volume bar */ + /* volume slider */ .ytp-volume-slider-handle { background: @accent-color !important; &::before { background: @accent-color !important; } - &::after { - z-index: -1; - } } /* new videos dot */ @@ -522,33 +500,43 @@ } } - .ytp-panel-menu { + .ytp-panel-menu, + .ytp-panel-header, + .ytp-panel-footer, + .ytp-menuitem-label, + .ytp-premium-label, + .ytp-menuitem-content, + .ytp-menuitem-label-count, + .ytp-menu-label-secondary { color: @text; - - & .ytp-menuitem:not(:last-child) svg > path { - fill: @text; - } - - & .ytp-menuitem:last-child svg:last-child { - fill: @text; - } } - .ytp-right-controls svg path, - .ytp-svg-fill { - fill: #fff !important; + .ytp-panel-header { + border-bottom-color: @surface2; } - .ytp-time-current, - .ytp-time-separator, - .ytp-time-duration, - .ytp-menu-label-secondary, - .ytp-menuitem-label-count { - color: #fff; + .ytp-menuitem svg > path:not([fill="none"]) { + fill: @text !important; } - .ytp-tooltip:not([aria-hidden="true"]) { - color: @text; + .ytp-menuitem[aria-haspopup="true"] .ytp-menuitem-content { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + .ytp-panel-back-button { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + .ytp-menuitem[role="menuitemradio"][aria-checked="true"] + .ytp-menuitem-label { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); } .style-scope.ytd-thumbnail-overlay-toggle-button-renderer:hover { @@ -604,18 +592,7 @@ background: @mantle !important; } - /* Transcript Button */ - .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--outline { - color: @accent-color !important; - border-color: @surface2 !important; - - &:hover { - background-color: fadeout(@accent-color, 80) !important; - border-color: fadeout(@accent-color, 80) !important; - } - } - - /* text color */ + /* search results */ .gsfs { color: @text !important; } @@ -744,15 +721,15 @@ } .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; + color: @text; + text-shadow: none !important; } .iv-card:hover .iv-card-primary-link, @@ -762,6 +739,7 @@ .ytp-popup { background: @surface0 !important; + text-shadow: none; } tp-yt-paper-dialog { @@ -816,8 +794,6 @@ --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; } /* ambient mode */ @@ -942,28 +918,70 @@ color: @accent-color !important; } - /* hopefully temporary (buttons) */ - .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal { - background-color: @surface0; - color: @text; - &:hover { - background-color: @surface1; - } + /* theme short - we do it accent beacuse anything else is hard to read */ + reel-player-header-renderer #text.complex-string.ytd-channel-name a, + reel-player-header-renderer { + color: @accent-color; } - .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled { - color: @crust; - background-color: @accent-color; - &:hover { - background-color: darken(@accent-color, 20); + + /* buttons */ + .yt-spec-touch-feedback-shape--touch-response + .yt-spec-touch-feedback-shape__fill { + background-color: @text; + } + .yt-spec-button-shape-next--mono { + &.yt-spec-button-shape-next--outline, + &.yt-spec-button-shape-next--text { + color: @text; + &:hover { + background-color: @surface0; + } + } + &.yt-spec-button-shape-next--tonal { + color: @text; + background-color: @surface0; + } + &.yt-spec-button-shape-next--outline { + border-color: @surface2 !important; + } + &.yt-spec-button-shape-next--filled { + color: @crust; + background-color: @accent-color; } } .yt-spec-touch-feedback-shape--touch-response .yt-spec-touch-feedback-shape__stroke { border-color: @surface1; } - .yt-spec-touch-feedback-shape--touch-response-inverse - .yt-spec-touch-feedback-shape__stroke { - border-color: @accent-color; + .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled { + color: @crust; + background-color: @accent-color; + } + .yt-spec-touch-feedback-shape--overlay-touch-response-inverse + .yt-spec-touch-feedback-shape__fill { + background-color: @accent-color; + } + .yt-spec-touch-feedback-shape--overlay-touch-response + .yt-spec-touch-feedback-shape__fill { + background-color: @text; + } + .yt-spec-button-shape-next--call-to-action { + /* Reply Button */ + &.yt-spec-button-shape-next--text { + color: @accent-color; + &:hover { + background-color: fadeout(@accent-color, 80) !important; + } + } + /* Transcript Button */ + &.yt-spec-button-shape-next--outline { + color: @accent-color !important; + border-color: @surface2 !important; + &:hover { + background-color: fadeout(@accent-color, 80) !important; + border-color: fadeout(@accent-color, 80) !important; + } + } } ytd-guide-section-renderer.style-scope:nth-child(3) > div:nth-child(2), @@ -1029,49 +1047,30 @@ [fill="#F00"], [fill="red"], [fill="#FF0000"] { - fill: @accent-color; + fill: @accent-color !important; } - svg > g > polygon[fill="#fff"] { - fill: @base !important; + [fill="white"] { + fill: if(@lookup = latte, @base, @text) !important; } - .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text { - color: @accent-color; - &:hover { - background-color: fadeout(@accent-color, 90); - } + yt-icon.ytd-logo [fill="white"] { + fill: @crust !important; } - .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline, - .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text { - color: @text; - &:hover { - background-color: @surface0; - } - } - - .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline { - border-color: @surface0; - } - - /* Scrollbar */ ::-webkit-scrollbar { width: @scrollbar_width !important; } - ::-webkit-scrollbar-track { background: @base !important; } - ::-webkit-scrollbar-thumb { background: @accent-color !important; } - /* text highlight */ ::selection { - background: fadeout(@accent-color, 80%) !important; - color: @text !important; + background: @accent-color !important; + color: @base !important; } } } @@ -1163,7 +1162,6 @@ color: @text !important; } - /* text highlight */ ::selection { background: fadeout(@accent-color, 80%) !important; color: @text !important; @@ -1342,7 +1340,6 @@ color: @text !important; } - /* text highlight */ ::selection { background: fadeout(@accent-color, 80%) !important; color: @text !important;