-3. Open the devtool console (e.g. Ctrl+Shift+K or Cmd+Opt+K)
-4. Paste the script there and hit Enter to run it
-5. Enter `latte`, `frappe`, `macchiato`, or `mocha` in the first dialog that appears.\
- Select "OK" in the second dialogue to use `blue` links, or cancel to use `rosewater` link colours.
-
-6. Reload the page.\
- If the theme is not being applied, try reloading with Ctrl+Shift+R or Cmd+Shift+R
-
-
-## ๐ Thanks to
-
-- [Astro](https://github.com/narutoxy)
-- [esdmr](https://github.com/esdmr)
-- [winston](https://github.com/nekowinston)
-
-
-
-
-Copyright © 2021-present Catppuccin Org
-
diff --git a/styles/duckduckgo/assets/preview.webp b/styles/duckduckgo/assets/preview.webp
deleted file mode 100644
index 86f77cea29..0000000000
Binary files a/styles/duckduckgo/assets/preview.webp and /dev/null differ
diff --git a/styles/duckduckgo/bookmarklet.js b/styles/duckduckgo/bookmarklet.js
deleted file mode 100644
index a592f4ef74..0000000000
--- a/styles/duckduckgo/bookmarklet.js
+++ /dev/null
@@ -1,54 +0,0 @@
-(function() {
- const colors = {
- latte: {
- base: "#eff1f5",
- blue: "#1e66f5",
- lavender: "#7287fd",
- mantle: "#e6e9ef",
- rosewater: "#dc8a78",
- text: "#4c4f69",
- },
- frappe: {
- base: "#303446",
- blue: "#8caaee",
- lavender: "#babbf1",
- mantle: "#292c3c",
- rosewater: "#f2d5cf",
- text: "#c6d0f5",
- },
- macchiato: {
- base: "#24273a",
- blue: "#8aadf4",
- lavender: "#b7bdf8",
- mantle: "#1e2030",
- rosewater: "#f4dbd6",
- text: "#cad3f5",
- },
- mocha: {
- base: "#1e1e2e",
- blue: "#89b4fa",
- lavender: "#b4befe",
- mantle: "#181825",
- rosewater: "#f5e0dc",
- text: "#cdd6f4",
- }
- };
- const flavour = window.prompt("Choose a theme:", "mocha");
- const blueLinks = confirm("Use blue links?");
-
- const ct = colors[flavour];
- const theme = [
- `21=${ct.mantle}`,
- `7=${ct.base}`,
- `8=${ct.text}`,
- `9=${blueLinks ? ct.blue : ct.rosewater}`,
- `aa=${ct.lavender}`,
- `ae=${flavour == "latte" ? -1 : ct.base}`,
- `j=${ct.mantle}`,
- `x=${blueLinks ? ct.blue : ct.rosewater}`,
- ];
-
- for (const item of theme) {
- document.cookie = `${item}; max-age=126144000; samesite=lax; secure`;
- }
-})();
diff --git a/styles/duckduckgo/.editorconfig b/styles/elk/.editorconfig
similarity index 100%
rename from styles/duckduckgo/.editorconfig
rename to styles/elk/.editorconfig
diff --git a/styles/elk/.gitignore b/styles/elk/.gitignore
new file mode 100644
index 0000000000..0ca0b3d80a
--- /dev/null
+++ b/styles/elk/.gitignore
@@ -0,0 +1,3 @@
+.DS_Store
+
+node_modules/
diff --git a/styles/monkeytype/LICENSE b/styles/elk/LICENSE
similarity index 100%
rename from styles/monkeytype/LICENSE
rename to styles/elk/LICENSE
diff --git a/styles/elk/README.md b/styles/elk/README.md
new file mode 100644
index 0000000000..3a8b6658bf
--- /dev/null
+++ b/styles/elk/README.md
@@ -0,0 +1,47 @@
+
+ 
+ 
+ Catppuccin for Elk
+
+
+
+
+ 
+
+
+## Previews
+
+
+๐ป Latte
+
+
+
+๐ชด Frappรฉ
+
+
+
+๐บ Macchiato
+
+
+
+๐ฟ Mocha
+
+
+
+## ๐ Thanks to
+
+- [Ryan Cao](https://github.com/ryanccn)
+
+
+
+
+
+
+
+
+ Copyright © 2021-present Catppuccin Org
+
+
+
+
+
diff --git a/styles/duckduckgo/assets/.gitkeep b/styles/elk/assets/.gitkeep
similarity index 100%
rename from styles/duckduckgo/assets/.gitkeep
rename to styles/elk/assets/.gitkeep
diff --git a/styles/elk/assets/previews/frappe.webp b/styles/elk/assets/previews/frappe.webp
new file mode 100644
index 0000000000..bd0ac60012
Binary files /dev/null and b/styles/elk/assets/previews/frappe.webp differ
diff --git a/styles/elk/assets/previews/latte.webp b/styles/elk/assets/previews/latte.webp
new file mode 100644
index 0000000000..adea4a396b
Binary files /dev/null and b/styles/elk/assets/previews/latte.webp differ
diff --git a/styles/elk/assets/previews/macchiato.webp b/styles/elk/assets/previews/macchiato.webp
new file mode 100644
index 0000000000..8e0cb2e778
Binary files /dev/null and b/styles/elk/assets/previews/macchiato.webp differ
diff --git a/styles/elk/assets/previews/mocha.webp b/styles/elk/assets/previews/mocha.webp
new file mode 100644
index 0000000000..83f22c2b20
Binary files /dev/null and b/styles/elk/assets/previews/mocha.webp differ
diff --git a/styles/elk/assets/previews/preview.webp b/styles/elk/assets/previews/preview.webp
new file mode 100644
index 0000000000..1e828a0a05
Binary files /dev/null and b/styles/elk/assets/previews/preview.webp differ
diff --git a/styles/elk/catppuccin.user.css b/styles/elk/catppuccin.user.css
new file mode 100644
index 0000000000..04f303897f
--- /dev/null
+++ b/styles/elk/catppuccin.user.css
@@ -0,0 +1,246 @@
+/* ==UserStyle==
+@name Elk Catppuccin
+@namespace github.com/catppuccin/elk
+@version 0.1.6
+@description Soothing pastel theme for Elk
+@author Catppuccin
+@updateURL https://github.com/catppuccin/elk/raw/main/catppuccin.user.css
+@preprocessor stylus
+@var select theme "Theme" ["Latte", "Frappe", "Macchiato", "Mocha"]
+@var select accent "Accent color" ["Rosewater", "Flamingo", "Pink", "Mauve", "Red", "Maroon", "Peach", "Yellow", "Green", "Teal", "Sky", "Sapphire", "Blue", "Lavender"]
+==/UserStyle== */
+
+@-moz-document domain("elk.zone") {
+ if (theme=="Latte") {
+ $type = light;
+
+ $rosewater = #dc8a78;
+ $flamingo = #dd7878;
+ $pink = #ea76cb;
+ $mauve = #8839ef;
+ $red = #d20f39;
+ $maroon = #e64553;
+ $peach = #fe640b;
+ $yellow = #df8e1d;
+ $green = #40a02b;
+ $teal = #179299;
+ $sky = #04a5e5;
+ $sapphire = #209fb5;
+ $blue = #1e66f5;
+ $lavender = #7287fd;
+ $text = #4c4f69;
+ $subtext1 = #5c5f77;
+ $subtext0 = #6c6f85;
+ $overlay2 = #7c7f93;
+ $overlay1 = #8c8fa1;
+ $overlay0 = #9ca0b0;
+ $surface2 = #acb0be;
+ $surface1 = #bcc0cc;
+ $surface0 = #ccd0da;
+ $base = #eff1f5;
+ $mantle = #e6e9ef;
+ $crust = #dce0e8;
+ $shadow = #dbdfef;
+ } else if (theme=="Frappe") {
+ $type = dark;
+
+ $rosewater = #f2d5cf;
+ $flamingo = #eebebe;
+ $pink = #f4b8e4;
+ $mauve = #ca9ee6;
+ $red = #e78284;
+ $maroon = #ea999c;
+ $peach = #ef9f76;
+ $yellow = #e5c890;
+ $green = #a6d189;
+ $teal = #81c8be;
+ $sky = #99d1db;
+ $sapphire = #85c1dc;
+ $blue = #8caaee;
+ $lavender = #babbf1;
+ $text = #c6d0f5;
+ $subtext1 = #b5bfe2;
+ $subtext0 = #a5adce;
+ $overlay2 = #949cbb;
+ $overlay1 = #838ba7;
+ $overlay0 = #737994;
+ $surface2 = #626880;
+ $surface1 = #51576d;
+ $surface0 = #414559;
+ $base = #303446;
+ $mantle = #292c3c;
+ $crust = #232634;
+ $shadow = #010409;
+ } else if (theme=="Macchiato") {
+ $type = dark;
+
+ $rosewater = #f4dbd6;
+ $flamingo = #f0c6c6;
+ $pink = #f5bde6;
+ $mauve = #c6a0f6;
+ $red = #ed8796;
+ $maroon = #ee99a0;
+ $peach = #f5a97f;
+ $yellow = #eed49f;
+ $green = #a6da95;
+ $teal = #8bd5ca;
+ $sky = #91d7e3;
+ $sapphire = #7dc4e4;
+ $blue = #8aadf4;
+ $lavender = #b7bdf8;
+ $text = #cad3f5;
+ $subtext1 = #b8c0e0;
+ $subtext0 = #a5adcb;
+ $overlay2 = #939ab7;
+ $overlay1 = #8087a2;
+ $overlay0 = #6e738d;
+ $surface2 = #5b6078;
+ $surface1 = #494d64;
+ $surface0 = #363a4f;
+ $base = #24273a;
+ $mantle = #1e2030;
+ $crust = #181926;
+ $shadow = #010409;
+ }
+ else if (theme=="Mocha") {
+ $type = dark;
+
+ $rosewater = #f5e0dc;
+ $flamingo = #f2cdcd;
+ $pink = #f5c2e7;
+ $mauve = #cba6f7;
+ $red = #f38ba8;
+ $maroon = #eba0ac;
+ $peach = #fab387;
+ $yellow = #f9e2af;
+ $green = #a6e3a1;
+ $teal = #94e2d5;
+ $sky = #89dceb;
+ $sapphire = #74c7ec;
+ $lavender = #b4befe;
+ $blue = #89b4fa;
+ $text = #cdd6f4;
+ $subtext1 = #bac2de;
+ $subtext0 = #a6adc8;
+ $overlay2 = #9399b2;
+ $overlay1 = #7f849c;
+ $overlay0 = #6c7086;
+ $surface2 = #585b70;
+ $surface1 = #45475a;
+ $surface0 = #313244;
+ $base = #1e1e2e;
+ $mantle = #181825;
+ $crust = #11111b;
+ $shadow = #010409;
+ }
+
+ if (accent=="Rosewater") {
+ $accent = $rosewater;
+ }
+ else if (accent=="Flamingo") {
+ $accent = $flamingo;
+ }
+ else if (accent=="Pink") {
+ $accent = $pink;
+ }
+ else if (accent=="Mauve") {
+ $accent = $mauve;
+ }
+ else if (accent=="Red") {
+ $accent = $red;
+ }
+ else if (accent=="Maroon") {
+ $accent = $maroon;
+ }
+ else if (accent=="Peach") {
+ $accent = $peach;
+ }
+ else if (accent=="Yellow") {
+ $accent = $yellow;
+ }
+ else if (accent=="Green") {
+ $accent = $green;
+ }
+ else if (accent=="Teal") {
+ $accent = $teal;
+ }
+ else if (accent=="Sky") {
+ $accent = $sky;
+ }
+ else if (accent=="Sapphire") {
+ $accent = $sapphire;
+ }
+ else if (accent=="Blue") {
+ $accent = $blue;
+ }
+ else if (accent=="Lavender") {
+ $accent = $lavender;
+ }
+
+ :root {
+ --c-primary: $accent !important;
+ --c-primary-active: lighten($accent, 10%) !important;
+ --c-primary-light: $surface0 !important;
+ --c-border: $surface0 !important;
+ --c-border-dark: $surface1 !important;
+ --c-bg-base: $base !important;
+ --rgb-bg-base: red($mantle), green($mantle), blue($mantle) !important;
+ --c-bg-active: $surface0 !important;
+ --c-bg-code: $surface0 !important;
+ --c-bg-selection: $accent !important;
+ --c-bg-fade: $surface0 !important;
+ --c-text-base: $text !important;
+ --c-text-code: $rosewater !important;
+ --c-text-secondary: $subtext0 !important;
+ --c-text-secondary-light: $subtext1 !important;
+ --c-bg-btn-disabled: $surface1 !important;
+ --c-text-btn-disabled: $text !important;
+ --c-text-btn: $text !important;
+ --c-success: $green !important;
+ --c-warning: $yellow !important;
+ --c-error: $red !important;
+ --c-danger: $red !important;
+ --c-danger-active: lighten($red, 10%) !important;
+ --c-bg-dm: $surface0 !important;
+ }
+
+ ::selection {
+ color: white;
+ }
+
+ .btn-solid, [btn-solid=""] {
+ color: var(--c-bg-base);
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background: alpha($surface1, 0.7);
+ }
+
+ ::-webkit-scrollbar-thumb:hover {
+ background: alpha($surface1, 0.8);
+ }
+
+ [text-red], [text-red-600], [hover^="text-red"]:hover {
+ color: rgbA(red($red), green($red), blue($red), var(--un-text-opacity));
+ }
+
+ [text-blue], [hover^="text-blue"]:hover {
+ color: rgbA(red($blue), green($blue), blue($blue), var(--un-text-opacity));
+ }
+
+ [text-green], [hover^="text-green"]:hover {
+ color: rgbA(red($green), green($green), blue($green), var(--un-text-opacity));
+ }
+
+ [text-yellow], [hover^="text-yellow"]:hover {
+ color: rgbA(red($yellow), green($yellow), blue($yellow), var(--un-text-opacity));
+ }
+
+ [text-purple], [hover^="text-purple"]:hover {
+ color: rgbA(red($lavender), green($lavender), blue($lavender), var(--un-text-opacity));
+ }
+
+ [group-hover^="bg-purple/10"]:hover {
+ background-color: alpha($lavender, 0.1);
+ }
+}
diff --git a/styles/github/README.md b/styles/github/README.md
deleted file mode 100644
index abe1c06623..0000000000
--- a/styles/github/README.md
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-
- Catppuccin for GitHub
-
-
-
-
- 
- 
- 
- 
-
-
-
- 
-
-
-## Usage
-
-#### Stylus
-1. Install Stylus [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/)/[Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) extension.
-2. Enable CSP Patching from Stylus Settings > Advanced.
-3. [Click here to install.](https://github.com/catppuccin/github/raw/main/catppuccin.user.css)
-
-#### Stylish
-1. Install Stylish [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/stylish/)/[Chrome](https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe) extension.
-2. Create a new custom Style that applies to `github.com`.
-3. Copy content of [catppuccin.user.css](catppuccin.user.css) and paste to created Style.
-
-## ๐ Thanks to
-
-- [Pocco81](https://github.com/Pocco81)
-- [Umbreon](https://github.com/GlowingUmbreon)
-- [Andreas Grafen](https://github.com/andreasgrafen)
-
-
-
-
-Copyright © 2021-present Catppuccin Org
-
diff --git a/styles/github/catppuccin.user.css b/styles/github/catppuccin.user.css
index 0daedfcc91..7ddc9b6d36 100644
--- a/styles/github/catppuccin.user.css
+++ b/styles/github/catppuccin.user.css
@@ -1,10 +1,10 @@
/* ==UserStyle==
@name Github Catppuccin
-@namespace github.com/catppuccin/github
+@namespace github.com/catppuccin/userstyles/styles/github
@version 1.1.7
@description Soothing pastel theme for GitHub
@author Catppuccin
-@updateURL https://github.com/catppuccin/github/raw/main/catppuccin.user.css
+@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/github/catppuccin.user.css
@preprocessor stylus
@var select theme "Theme" ["Latte", "Frappe", "Macchiato", "Mocha*"]
@var checkbox topbar "Topbar colors" 1
diff --git a/styles/hacker-news/README.md b/styles/hacker-news/README.md
deleted file mode 100644
index d71eea9842..0000000000
--- a/styles/hacker-news/README.md
+++ /dev/null
@@ -1,65 +0,0 @@
-
-
-
- Catppuccin for HackerNews
-
-
-
-
- 
- 
- 
-
-
-
- 
-
-
-## Previews
-
-
-๐ป Latte
-
-
-
-๐ชด Frappรฉ
-
-
-
-๐บ Macchiato
-
-
-
-๐ฟ Mocha
-
-
-
-## Usage
-
-#### Stylus
-1. Install Stylus [Firefox](https://addons.mozilla.org/en-US/firefox/addon/styl-us/)/[Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) extension.
-2. Enable CSP Patching from Stylus Settings > Advanced.
-3. [Click here to install.](https://github.com/catppuccin/hacker-news/raw/main/catppuccin.user.css)
-
-#### Stylish
-1. Install Stylish [Firefox](https://addons.mozilla.org/en-US/firefox/addon/stylish/)/[Chrome](https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe) extension.
-2. Create a new custom Style that applies to `news.ycombinator.com`.
-3. Copy content of [catppuccin.user.css](catppuccin.user.css) and paste to created Style.
-
-## ๐ Thanks to
-
-- [Lucas Melin](https://github.com/lucasmelin)
-
-
-
-
-
-
-
-
- Copyright © 2021-present Catppuccin Org
-
-
-
-
-
diff --git a/styles/hacker-news/catppuccin.user.css b/styles/hacker-news/catppuccin.user.css
index 3338db7de0..f40d40f6c7 100644
--- a/styles/hacker-news/catppuccin.user.css
+++ b/styles/hacker-news/catppuccin.user.css
@@ -1,10 +1,10 @@
/* ==UserStyle==
@name HackerNews Catppuccin
-@namespace github.com/catppuccin/hacker-news
+@namespace github.com/catppuccin/userstyles/styles/hacker-news
@version 0.1.0
@description Soothing pastel theme for HackerNews
@author Catppuccin
-@updateURL https://github.com/catppuccin/hacker-news/raw/main/catppuccin.user.css
+@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/hacker-news/catppuccin.user.css
@preprocessor stylus
@var select theme "Theme" ["Latte", "Frappe", "Macchiato", "Mocha*"]
==/UserStyle== */
@@ -271,4 +271,4 @@
background-color: $subtext0;
height: 8;
}
-}
\ No newline at end of file
+}
diff --git a/styles/ichi.moe/README.md b/styles/ichi.moe/README.md
deleted file mode 100644
index 086e6c17fb..0000000000
--- a/styles/ichi.moe/README.md
+++ /dev/null
@@ -1,48 +0,0 @@
-
-
-
- Catppuccin for ichi.moe
-
-
-
-
- 
- 
- 
-
-
-
-
- 
-
-
-## Usage
-
-#### Stylus
-
-1. Install the Stylus [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/)/[Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) extension.
-2. [Click here to install.](https://github.com/catppuccin/ichi.moe/raw/main/catppuccin.user.css)
-
-#### Stylish
-
-1. Install the Stylish [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/stylish/)/[Chrome](https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe) extension.
-2. Create a new custom style that applies to `ichi.moe`.
-3. Copy the contents of [catppuccin.user.css](catppuccin.user.css) and paste it on the created style.
-
-## ๐ Thanks to
-
-- [Ren](https://github.com/watatomo)
-
-
-
-
-
-
-
-
- Copyright © 2021-present Catppuccin Org
-
-
-
-
-
diff --git a/styles/ichi.moe/catppuccin.user.css b/styles/ichi.moe/catppuccin.user.css
index 069eefb0c8..e80057bcb8 100644
--- a/styles/ichi.moe/catppuccin.user.css
+++ b/styles/ichi.moe/catppuccin.user.css
@@ -1,12 +1,12 @@
/* ==UserStyle==
@name ichi.moe Catppuccin
-@namespace github.com/catppuccin/ichi.moe
-@homepageURL https://github.com/catppuccin/ichi.moe
+@namespace github.com/catppuccin/userstyles/styles/ichi.moe
+@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/ichi.moe
@version 1.1.0
@description Soothing pastel theme for ichi.moe
@author Catppuccin
@preprocessor stylus
-@updateURL https://github.com/catppuccin/ichi.moe/raw/main/catppuccin.user.css
+@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/ichi.moe/catppuccin.user.css
@var select theme "Theme" ["Latte", "Frappe", "Macchiato", "Mocha*"]
@var checkbox zen "Zen Mode" 0
diff --git a/styles/invidious/README.md b/styles/invidious/README.md
deleted file mode 100644
index 07bee364aa..0000000000
--- a/styles/invidious/README.md
+++ /dev/null
@@ -1,48 +0,0 @@
-
-
-
- Catppuccin for Invidious
-
-
-
-
- 
- 
- 
-
-
-
-
-
-
-
-## Usage
-
-#### Stylus
-1. Install Stylus [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/)/[Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) extension.
-2. Enable CSP Patching from Stylus Settings > Advanced.
-3. [Click here to install.](https://github.com/catppuccin/invidious/raw/main/catppuccin.user.css)
-
-#### Stylish
-1. Install Stylish [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/stylish/)/[Chrome](https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe) extension.
-2. Create a new custom Style that applies to your desired Invidious instance.
-3. Copy content of [catppuccin.user.css](catppuccin.user.css) and paste to created Style.
-
-
-## ๐ Thanks to
-
-- [Andreas Grafen](https://github.com/andreasgrafen)
-
-
-
-
-
-
-
-
- Copyright © 2021-present Catppuccin Org
-
-
-
-
-
diff --git a/styles/invidious/catppuccin.user.css b/styles/invidious/catppuccin.user.css
index ef5c749d7b..401b9e327a 100644
--- a/styles/invidious/catppuccin.user.css
+++ b/styles/invidious/catppuccin.user.css
@@ -1,11 +1,11 @@
/* ==UserStyle==
@name Invidious Catppuccin
-@namespace github.com/catppuccin/invidious
-@homepageURL https://github.com/catppuccin/invidious
+@namespace github.com/catppuccin/userstyles/styles/invidious
+@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/invidious
@version 0.2.03
@description Soothing pastel theme for Invidious
@author Catppuccin
-@updateURL https://github.com/catppuccin/invidious/raw/main/catppuccin.user.css
+@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/invidious/catppuccin.user.css
@preprocessor stylus
@var select lighttheme "Light Theme" ["Latte*", "Frappe", "Macchiato", "Mocha"]
diff --git a/styles/lastfm/README.md b/styles/lastfm/README.md
deleted file mode 100644
index 56813ad54a..0000000000
--- a/styles/lastfm/README.md
+++ /dev/null
@@ -1,43 +0,0 @@
-
-
-
- Catppuccin for Last.fm
-
-
-
-
- 
- 
- 
-
-
-
- 
-
-
-## Usage
-
-1. Install Stylus extension for [Firefox](https://addons.mozilla.org/en-US/firefox/addon/styl-us/), [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) or [Opera](https://addons.opera.com/en-gb/extensions/details/stylus/)
-2. Then install with Stylus (click on the link):
- - [๐ง Catppuccin for Last.fm](https://github.com/catppuccin/lastfm/raw/main/src/LastfmCatppuccin.user.css)
-3. Choose you theme and accent color by Setting Theme in Stylus Options
-
-
-## ๐ Thanks to
-
-- [AnubisNekhet](https://github.com/AnubisNekhet)
-- [Gingeh](https://github.com/Gingeh)
-
-
-
-
-
-
-
-
- Copyright © 2021-present Catppuccin Org
-
-
-
-
-
diff --git a/styles/lastfm/assets/lastfmfrappe.webp b/styles/lastfm/assets/frappe.webp
similarity index 100%
rename from styles/lastfm/assets/lastfmfrappe.webp
rename to styles/lastfm/assets/frappe.webp
diff --git a/styles/lastfm/assets/lastfmlatte.webp b/styles/lastfm/assets/latte.webp
similarity index 100%
rename from styles/lastfm/assets/lastfmlatte.webp
rename to styles/lastfm/assets/latte.webp
diff --git a/styles/lastfm/assets/lastfmmacchiato.webp b/styles/lastfm/assets/macchiato.webp
similarity index 100%
rename from styles/lastfm/assets/lastfmmacchiato.webp
rename to styles/lastfm/assets/macchiato.webp
diff --git a/styles/lastfm/assets/lastfmmocha.webp b/styles/lastfm/assets/mocha.webp
similarity index 100%
rename from styles/lastfm/assets/lastfmmocha.webp
rename to styles/lastfm/assets/mocha.webp
diff --git a/styles/lastfm/assets/lastfmpreview.webp b/styles/lastfm/assets/preview.webp
similarity index 100%
rename from styles/lastfm/assets/lastfmpreview.webp
rename to styles/lastfm/assets/preview.webp
diff --git a/styles/lastfm/src/LastfmCatppuccin.user.css b/styles/lastfm/catppuccin.user.css
similarity index 99%
rename from styles/lastfm/src/LastfmCatppuccin.user.css
rename to styles/lastfm/catppuccin.user.css
index 09210460f1..c054a69e54 100644
--- a/styles/lastfm/src/LastfmCatppuccin.user.css
+++ b/styles/lastfm/catppuccin.user.css
@@ -1,10 +1,10 @@
/* ==UserStyle==
@name Last.fm Catppuccin
-@namespace github.com/catppuccin/lastfm
+@namespace github.com/catppuccin/userstyles/styles/lastfm
@version 1.1.0
@description Soothing pastel theme for Last.fm
@author Catppuccin
-@updateURL https://github.com/catppuccin/lastfm/raw/main/src/LastfmCatppuccin.user.css
+@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/lastfm/catppuccin.user.css
@preprocessor stylus
@var select theme "Theme" ["Latte", "Frappe", "Macchiato", "Mocha*"]
@var select accent-color "Accent" ["Rosewater*", "Flamingo", "Pink", "Mauve", "Red", "Maroon", "Peach", "Yellow", "Green", "Teal", "Blue", "Sapphire", "Sky", "Lavender", "Gray"]
diff --git a/styles/libreddit/README.md b/styles/libreddit/README.md
deleted file mode 100644
index 02dd0ad37e..0000000000
--- a/styles/libreddit/README.md
+++ /dev/null
@@ -1,35 +0,0 @@
-
-
-
- Catppuccin for Libreddit
-
-
-
-
- 
- 
- 
-
-
-
-
-
-
-
-## Usage
-
-#### Stylus
-1. Install Stylus [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/)/[Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) extension.
-2. Enable CSP Patching from Stylus Settings > Advanced.
-3. [Click here to install.](https://github.com/catppuccin/libreddit/raw/main/catppuccin.user.css)
-4. Enjoy!
-
-## ๐ Thanks to
-
-- [Andreas Grafen](https://github.com/andreasgrafen)
-
-
-
-
-Copyright © 2021-present Catppuccin Org
-
diff --git a/styles/libreddit/catppuccin.user.css b/styles/libreddit/catppuccin.user.css
index cf612c6aa7..9d39ca66f5 100644
--- a/styles/libreddit/catppuccin.user.css
+++ b/styles/libreddit/catppuccin.user.css
@@ -1,10 +1,10 @@
/* ==UserStyle==
@name Libreddit Catppuccin
-@namespace github.com/catppuccin/libreddit
+@namespace github.com/catppuccin/userstyles/styles/libreddit
@version 2.0.2
@description Soothing pastel theme for Libreddit
@author Catppuccin
-@updateURL https://github.com/catppuccin/libreddit/raw/main/catppuccin.user.css
+@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/libreddit/catppuccin.user.css
@preprocessor stylus
@var select theme "Theme" ["Latte", "Frappe", "Macchiato", "Mocha*"]
==/UserStyle== */
diff --git a/styles/mastodon/README.md b/styles/mastodon/README.md
deleted file mode 100644
index 8f04211c96..0000000000
--- a/styles/mastodon/README.md
+++ /dev/null
@@ -1,44 +0,0 @@
-
-
-
- Catppuccin for Mastodon
-
-
-
-
- 
- 
- 
-
-
-> **Note** This theme is still under development.
The native light theme has some bugs right now, thus for now the better Latte experience actually is to enable Latte as your dark theme via the Stylus settings. Dark mode is fairly robust but also has some issues that have to be ironed out.
-
-## Usage
-
-#### Stylus
-1. Install Stylus [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/)/[Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) extension.
-2. Enable CSP Patching from Stylus Settings > Advanced.
-3. [Click here to install.](https://github.com/catppuccin/mastodon/raw/main/dist/catppuccin.user.css)
-
-#### Stylish
-1. Install Stylish [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/stylish/)/[Chrome](https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe) extension.
-2. Create a new custom Style that applies to your desired mastodon instance.
-3. Copy content of [catppuccin.user.css](catppuccin.user.css) and paste to created Style.
-
-## ๐ Thanks to
-
-- [Andreas Grafen](https://github.com/andreasgrafen)
-
-
-
-
-
-
-
-
- Copyright © 2021-present Catppuccin Org
-
-
-
-
-
diff --git a/styles/mastodon/dist/catppuccin.user.css b/styles/mastodon/catppuccin.user.css
similarity index 97%
rename from styles/mastodon/dist/catppuccin.user.css
rename to styles/mastodon/catppuccin.user.css
index 50a267c020..9763f9d476 100644
--- a/styles/mastodon/dist/catppuccin.user.css
+++ b/styles/mastodon/catppuccin.user.css
@@ -1,11 +1,11 @@
/* ==UserStyle==
@name Mastodon Catppuccin
-@namespace github.com/catppuccin/mastodon
-@homepageURL https://github.com/catppuccin/mastodon
+@namespace github.com/catppuccin/userstyles/styles/mastodon
+@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/mastodon
@version 0.0.1
@description Soothing pastel theme for Invidious
@author Catppuccin
-@updateURL https://github.com/catppuccin/mastodon/raw/main/dist/catppuccin.user.css
+@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/mastodon/catppuccin.user.css
@preprocessor stylus
@var select lighttheme "Light Theme" ["Latte*", "Frappe", "Macchiato", "Mocha"]
@var select darktheme "Dark Theme" ["Latte", "Frappe", "Macchiato", "Mocha*"]
diff --git a/styles/modrinth/README.md b/styles/modrinth/README.md
deleted file mode 100644
index f7c4eea95c..0000000000
--- a/styles/modrinth/README.md
+++ /dev/null
@@ -1,60 +0,0 @@
-
-
-
- Catppuccin for Modrinth
-
-
-
-
- 
- 
- 
-
-
-
-
- 
-
-
-## Previews
-
-
-๐ป Latte
-
-
-
-๐ชด Frappรฉ
-
-
-
-๐บ Macchiato
-
-
-
-๐ฟ Mocha
-
-
-
-## Usage
-
-1. Install Stylus extension for [Firefox](https://addons.mozilla.org/en-US/firefox/addon/styl-us/), [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) or [Opera](https://addons.opera.com/en-gb/extensions/details/stylus/)
-2. Install the style with Stylus: [๐ง catppuccin for modrinth](https://raw.githubusercontent.com/catppuccin/modrinth/main/src/ModrinthCatppuccin.user.css)
-3. Choose Your accent color by Setting Theme in Stylus Options
-
-## ๐ Thanks to
-
-- [thismoon](https://github.com/thismoon)
-
-
-
-
-
-
-
-
- Copyright © 2021-present Catppuccin Org
-
-
-
-
-
diff --git a/styles/modrinth/src/ModrinthCatppuccin.user.css b/styles/modrinth/catppuccin.user.css
similarity index 98%
rename from styles/modrinth/src/ModrinthCatppuccin.user.css
rename to styles/modrinth/catppuccin.user.css
index 6a56fab3d4..b506a5b890 100644
--- a/styles/modrinth/src/ModrinthCatppuccin.user.css
+++ b/styles/modrinth/catppuccin.user.css
@@ -1,6 +1,6 @@
/* ==UserStyle==
@name Modrinth Catppuccin
-@namespace github.com/catppuccin/modrinth
+@namespace github.com/catppuccin/userstyles/styles/modrinth
@version 1
@description Soothing pastel theme for Modrinth
@author Catppuccin
diff --git a/styles/monkeytype/.editorconfig b/styles/monkeytype/.editorconfig
deleted file mode 100644
index d86ac0270a..0000000000
--- a/styles/monkeytype/.editorconfig
+++ /dev/null
@@ -1,34 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# EditorConfig is awesome: https://EditorConfig.org
-
-root = true
-
-[*]
-charset = utf-8
-indent_size = 2
-indent_style = space
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-# go
-[*.go]
-indent_style = tab
-indent_size = 4
-
-# python
-[*.{ini,py,py.tpl,rst}]
-indent_size = 4
-
-# rust
-[*.rs]
-indent_size = 4
-
-# documentation, utils
-[*.{md,mdx,diff}]
-trim_trailing_whitespace = false
-
-# windows shell scripts
-[*.{cmd,bat,ps1}]
-end_of_line = crlf
diff --git a/styles/monkeytype/README.md b/styles/monkeytype/README.md
deleted file mode 100644
index 7acd1374ce..0000000000
--- a/styles/monkeytype/README.md
+++ /dev/null
@@ -1,104 +0,0 @@
-
-
-
- Catppuccin for MonkeyType
-
-
-
-
- 
- 
- 
-
-
-
-
-
-
-## Previews
-
-
-๐ป Latte
-
-
-
-๐ชด Frappรฉ
-
-
-
-๐บ Macchiato
-
-
-
-๐ฟ Mocha
-
-
-
-## Usage
-1. Choose your flavour.
-2. Click the link of your flavour and enjoy.
- - [๐ฟ Mocha](https://monkeytype.com?customTheme=WyIjMWUxZTJlIiwiI2E2ZTNhMSIsIiNmNWUwZGMiLCIjNTg1YjcwIiwiIzE4MTgyNSIsIiNjZGQ2ZjQiLCIjZjM4YmE4IiwiI2ViYTBhYyIsIiNmMzhiYTgiLCIjZWJhMGFjIl0=)
- - [๐บ Macchiato](https://monkeytype.com?customTheme=WyIjMjQyNzNhIiwiI2E2ZGE5NSIsIiNmNGRiZDYiLCIjNWI2MDc4IiwiIzFlMjAzMCIsIiNjYWQzZjUiLCIjZWQ4Nzk2IiwiI2VlOTlhMCIsIiNlZDg3OTYiLCIjZWU5OWEwIl0=)
- - [๐ชด Frappe](https://monkeytype.com?customTheme=WyIjMzAzNDQ2IiwiI2E2ZDE4OSIsIiNmMmQ1Y2YiLCIjNjI2ODgwIiwiIzI5MmMzYyIsIiNjNmQwZjUiLCIjZTc4Mjg0IiwiI2VhOTk5YyIsIiNlNzgyODQiLCIjZWE5OTljIl0=)
- - [๐ป Latte](https://monkeytype.com?customTheme=WyIjZWZmMWY1IiwiIzQwYTAyYiIsIiNkYzhhNzgiLCIjYWNiMGJlIiwiI2U2ZTllZiIsIiM0YzRmNjkiLCIjZDIwZjM5IiwiI2U2NDU1MyIsIiNkMjBmMzkiLCIjZTY0NTUzIl0=)
-
-
-Custom colors
-
- 1. Open settings on [monkeytype.com](https://monkeytype.com/)
- 2. Scroll down to `theme` and put the following colors in the custom theme. (this is mocha but you can put in the colors from *flavour*.css)
-
-
- | Background |
-  #363a4f |
- Main |
-  #a6e3a1 (Change this color to whatever you want) |
-
-
- | Caret |
-  #f5e0dc |
- Sub |
-  #585b70 |
-
-
- | Sub alt |
- #585b70 |
- Text |
-  #cdd6f4 |
-
-
- | Error |
-  #f38ba8 |
- Extra error |
-  #eba0ac |
-
-
- | colorful mode |
-
-
- | Error |
- #f38ba8 |
- Extra error |
- #eba0ac |
-
-
-
-
-
-### Or
-
-1. Open settings on [monkeytype.com](https://monkeytype.com/) (Not yet updated to version 0.2.0)
-2. Go to the theme settings
-3. Select the Catppuccin theme
-
-
-## ๐ Thanks to
-
-- [Jazil T S](https://github.com/tsjazil)
-- [Lexi](https://github.com/ShyyLexi/)
-
-
-
-
-Copyright © 2021-present Catppuccin Org
-
diff --git a/styles/monkeytype/assets/.gitkeep b/styles/monkeytype/assets/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/styles/monkeytype/assets/frappe.webp b/styles/monkeytype/assets/frappe.webp
deleted file mode 100755
index 2284f18078..0000000000
Binary files a/styles/monkeytype/assets/frappe.webp and /dev/null differ
diff --git a/styles/monkeytype/assets/latte.webp b/styles/monkeytype/assets/latte.webp
deleted file mode 100755
index d5930b4dba..0000000000
Binary files a/styles/monkeytype/assets/latte.webp and /dev/null differ
diff --git a/styles/monkeytype/assets/macchiato.webp b/styles/monkeytype/assets/macchiato.webp
deleted file mode 100755
index 8656501a57..0000000000
Binary files a/styles/monkeytype/assets/macchiato.webp and /dev/null differ
diff --git a/styles/monkeytype/assets/mocha.webp b/styles/monkeytype/assets/mocha.webp
deleted file mode 100755
index 8b899c9e04..0000000000
Binary files a/styles/monkeytype/assets/mocha.webp and /dev/null differ
diff --git a/styles/monkeytype/assets/res.webp b/styles/monkeytype/assets/res.webp
deleted file mode 100755
index 09f4a38b31..0000000000
Binary files a/styles/monkeytype/assets/res.webp and /dev/null differ
diff --git a/styles/monkeytype/assets/ss.webp b/styles/monkeytype/assets/ss.webp
deleted file mode 100644
index c6e13b8eae..0000000000
Binary files a/styles/monkeytype/assets/ss.webp and /dev/null differ
diff --git a/styles/monkeytype/frappe.css b/styles/monkeytype/frappe.css
deleted file mode 100644
index 875430cde6..0000000000
--- a/styles/monkeytype/frappe.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
- --bg-color: #303446;
- --caret-color: #f2d5cf;
- --main-color: #a6d189;
- --sub-color: #626880;
- --sub-alt-color: #292c3c;
- --text-color: #c6d0f5;
- --error-color: #e78284;
- --error-extra-color: #ea999c;
- --colorful-error-color: #e78284;
- --colorful-error-extra-color: #ea999c;
- }
diff --git a/styles/monkeytype/latte.css b/styles/monkeytype/latte.css
deleted file mode 100644
index 18a5f36bfb..0000000000
--- a/styles/monkeytype/latte.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
- --bg-color: #eff1f5;
- --caret-color: #dc8a78;
- --main-color: #40a02b;
- --sub-color: #acb0be;
- --sub-alt-color: #e6e9ef;
- --text-color: #4c4f69;
- --error-color: #d20f39;
- --error-extra-color: #e64553;
- --colorful-error-color: #d20f39;
- --colorful-error-extra-color: #e64553;
- }
diff --git a/styles/monkeytype/macchiato.css b/styles/monkeytype/macchiato.css
deleted file mode 100644
index 0b7eeccb01..0000000000
--- a/styles/monkeytype/macchiato.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
- --bg-color: #24273a;
- --caret-color: #f4dbd6;
- --main-color: #a6da95;
- --sub-color: #5b6078;
- --sub-alt-color: #1e2030;
- --text-color: #cad3f5;
- --error-color: #ed8796;
- --error-extra-color: #ee99a0;
- --colorful-error-color: #ed8796;
- --colorful-error-extra-color: #ee99a0;
- }
diff --git a/styles/monkeytype/mocha.css b/styles/monkeytype/mocha.css
deleted file mode 100644
index 6b59f98e92..0000000000
--- a/styles/monkeytype/mocha.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:root {
- --bg-color: #1e1e2e;
- --caret-color: #f5e0dc;
- --main-color: #a6e3a1;
- --sub-color: #585b70;
- --sub-alt-color: #181825;
- --text-color: #cdd6f4;
- --error-color: #f38ba8;
- --error-extra-color: #eba0ac;
- --colorful-error-color: #f38ba8;
- --colorful-error-extra-color: #eba0ac;
- }
diff --git a/styles/nitter/README.md b/styles/nitter/README.md
deleted file mode 100644
index a9999504f0..0000000000
--- a/styles/nitter/README.md
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-
- Catppuccin for Nitter
-
-
-
-
- 
- 
- 
-
-
-
- 
-
-
-## Usage
-
-1. Install Stylus extension for [Firefox](https://addons.mozilla.org/en-US/firefox/addon/styl-us/), [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) or [Opera](https://addons.opera.com/en-gb/extensions/details/stylus/)
-2. Then install with Stylus (click on the link):
- - [๐ฆ Catppuccin for Nitter](https://github.com/catppuccin/nitter/raw/main/src/NitterCatppuccin.user.css)
-3. Choose you theme and accent color by Setting Theme in Stylus Options.
-
-## ๐ Thanks to
-
-- [AnubisNekhet](https://github.com/AnubisNekhet)
-
-
-
-
-
-
-
-
- Copyright © 2021-present Catppuccin Org
-
-
-
-
-
diff --git a/styles/nitter/assets/nitterfrappe.webp b/styles/nitter/assets/frappe.webp
similarity index 100%
rename from styles/nitter/assets/nitterfrappe.webp
rename to styles/nitter/assets/frappe.webp
diff --git a/styles/nitter/assets/nitterlatte.webp b/styles/nitter/assets/latte.webp
similarity index 100%
rename from styles/nitter/assets/nitterlatte.webp
rename to styles/nitter/assets/latte.webp
diff --git a/styles/nitter/assets/nittermacchiato.webp b/styles/nitter/assets/macchiato.webp
similarity index 100%
rename from styles/nitter/assets/nittermacchiato.webp
rename to styles/nitter/assets/macchiato.webp
diff --git a/styles/nitter/assets/nittermocha.webp b/styles/nitter/assets/mocha.webp
similarity index 100%
rename from styles/nitter/assets/nittermocha.webp
rename to styles/nitter/assets/mocha.webp
diff --git a/styles/nitter/assets/nitterpreview.webp b/styles/nitter/assets/preview.webp
similarity index 100%
rename from styles/nitter/assets/nitterpreview.webp
rename to styles/nitter/assets/preview.webp
diff --git a/styles/nitter/src/NitterCatppuccin.user.css b/styles/nitter/catppuccin.user.css
similarity index 99%
rename from styles/nitter/src/NitterCatppuccin.user.css
rename to styles/nitter/catppuccin.user.css
index d72382b277..c0f5fd8326 100644
--- a/styles/nitter/src/NitterCatppuccin.user.css
+++ b/styles/nitter/catppuccin.user.css
@@ -1,6 +1,6 @@
/* ==UserStyle==
@name Nitter Catppuccin
-@namespace github.com/catppuccin/nitter
+@namespace github.com/catppuccin/userstyles/styles/nitter
@version 2.0.2
@description Soothing pastel theme for Nitter
@author Catppuccin
diff --git a/styles/nixos-search/README.md b/styles/nixos-search/README.md
deleted file mode 100644
index c020c54d45..0000000000
--- a/styles/nixos-search/README.md
+++ /dev/null
@@ -1,66 +0,0 @@
-
-
-
- Catppuccin for NixOS Search
-
-
-
-
- 
- 
- 
-
-
-
-
-
-
-
-## Previews
-
-
-๐ป Latte
-
-
-
-๐ชด Frappรฉ
-
-
-
-๐บ Macchiato
-
-
-
-๐ฟ Mocha
-
-
-
-## Usage
-
-#### Stylus
-1. Install Stylus [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/)/[Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) extension.
-2. Enable CSP Patching from Stylus Settings > Advanced.
-3. [Click here to install.](catppuccin.user.css?raw=1)
-
-#### Stylish
-1. Install Stylish [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/stylish/)/[Chrome](https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe) extension.
-2. Create a new custom Style that applies to `search.nixos.org`.
-3. Copy content of [catppuccin.user.css](catppuccin.user.css) and paste to created Style.
-
-## ๐ Thanks to
-
-- [alaidriel](https://github.com/alaidriel)
-
-
-
-
-
-
-
-
- Copyright © 2021-present Catppuccin Org
-
-
-
-
-
diff --git a/styles/nixos-search/catppuccin.user.css b/styles/nixos-search/catppuccin.user.css
index 1816125d99..1e43e4c710 100644
--- a/styles/nixos-search/catppuccin.user.css
+++ b/styles/nixos-search/catppuccin.user.css
@@ -1,6 +1,6 @@
/* ==UserStyle==
@name NixOS Search Catppuccin
-@namespace github.com/catppuccin/nixos-search
+@namespace github.com/catppuccin/userstyles/styles/nixos-search
@version 0.1.1
@description Soothing pastel theme for NixOS Search
@author Catppuccin
diff --git a/styles/proton/README.md b/styles/proton/README.md
deleted file mode 100644
index 879a0e8808..0000000000
--- a/styles/proton/README.md
+++ /dev/null
@@ -1,66 +0,0 @@
-
-
-
- Catppuccin for Proton
-
-
-
-
- 
- 
- 
-
-
-
- 
-
-
-## About
-
-This theme primarily focuses on theming the UI of Proton Mail. However, it should work well on all Proton products (Mail, Calendar, Drive, and VPN) as they all share the same base stylesheets.
-
-You are free to open issues if there are any style problems with other Proton products.
-
-## Previews
-
-
-๐ป Latte
-
-
-
-๐ชด Frappรฉ
-
-
-
-๐บ Macchiato
-
-
-
-๐ฟ Mocha
-
-
-
-## Usage
-
-#### Stylus
-1. Install Stylus [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/)/[Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) extension.
-2. [Click here to install.](https://github.com/catppuccin/proton/raw/main/catppuccin.user.css)
-3. Open Proton Mail and click the settings in the top right, then set the base Proton theme to `Proton` if you are using the Latte flavor, otherwise set it to `Carbon`.
-
-## ๐ Thanks to
-
-- [soya_daizu](https://github.com/soya-daizu)
-
-
-
-
-
-
-
-
- Copyright © 2021-present Catppuccin Org
-
-
-
-
-
diff --git a/styles/proton/catppuccin.user.css b/styles/proton/catppuccin.user.css
index 9218d84859..c92f7419bb 100644
--- a/styles/proton/catppuccin.user.css
+++ b/styles/proton/catppuccin.user.css
@@ -1,6 +1,6 @@
/* ==UserStyle==
@name Proton Catppuccin
-@namespace github.com/catppuccin/proton
+@namespace github.com/catppuccin/userstyles/styles/proton
@version 0.1.0
@description Soothing pastel theme for Proton services
@author Catppuccin
diff --git a/styles/reddit/README.md b/styles/reddit/README.md
deleted file mode 100644
index cdb07c7fae..0000000000
--- a/styles/reddit/README.md
+++ /dev/null
@@ -1,64 +0,0 @@
-
-
-
- Catppuccin for Reddit
-
-
-
-
- 
- 
- 
-
-
-
- 
-
-
-## Previews
-
-
-๐ป Latte
-
-
-
-๐ชด Frappรฉ
-
-
-
-๐บ Macchiato
-
-
-
-๐ฟ Mocha
-
-
-
-## Usage
-
-#### Stylus
-1. Install the Stylus [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/)/[Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) extension.
-2. Enable CSP Patching from Stylus Settings > Advanced.
-3. Click on your Reddit profile in the top right and enable Dark Mode in the menu. The theme should mostly work either way but there are likely going to be some small things that don't.
-4. Download the theme from [here](https://raw.githubusercontent.com/catppuccin/reddit/main/css/reddit-catppuccin.user.css).
-5. Set the accent color and flavor from Stylus userstyle settings according to your preferences.
-6. Install the theme.
-
-## ๐ Thanks to
-
-- [jayylmao](https://github.com/jayylmao)
-- [rubyowo](https://github.com/rubyowo)
-
-
-
-
-
-
-
-
- Copyright © 2021-present Catppuccin Org
-
-
-
-
-
diff --git a/styles/reddit/css/reddit-catppuccin.user.css b/styles/reddit/catppuccin.user.css
similarity index 99%
rename from styles/reddit/css/reddit-catppuccin.user.css
rename to styles/reddit/catppuccin.user.css
index 065abd127b..f9f4eb402b 100644
--- a/styles/reddit/css/reddit-catppuccin.user.css
+++ b/styles/reddit/catppuccin.user.css
@@ -1,10 +1,10 @@
/* ==UserStyle==
@name Reddit Catppuccin
-@namespace github.com/catppuccin/reddit
+@namespace github.com/catppuccin/userstyles/styles/reddit
@version 1.1.0
@description Soothing pastel theme for Reddit.
@author jayylmao
-@updateURL https://raw.githubusercontent.com/catppuccin/reddit/main/css/reddit-catppuccin.user.css
+@updateURL https://raw.githubusercontent.com/catppuccin/reddit/main/catppuccin.user.css
@preprocessor stylus
diff --git a/styles/stable-diffusion-web-ui/LICENSE b/styles/stable-diffusion-web-ui/LICENSE
deleted file mode 100644
index 006383b861..0000000000
--- a/styles/stable-diffusion-web-ui/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021 Catppuccin
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/styles/stable-diffusion-web-ui/README.md b/styles/stable-diffusion-web-ui/README.md
deleted file mode 100644
index 0a13f9300d..0000000000
--- a/styles/stable-diffusion-web-ui/README.md
+++ /dev/null
@@ -1,97 +0,0 @@
-
-
-
- 
- 
- 
-
-
-
- 
-
-
-## Previews
-
-
-๐ป Latte
-
-
-
-๐ชด Frappรฉ
-
-
-
-๐บ Macchiato
-
-
-
-๐ฟ Mocha
-
-
-
-## Usage
-### Extension (Recommended)
-1. Open WebUI
-2. Click on the "Extensions" tab
-3. Click on the "Install from URL" subsection
-4. Paste `https://github.com/catppuccin/stable-diffusion-webui` into the URL spot, set the local directory name to `Catppuccin Theme`, and install
-5. Go to "Installed" subsection and click "Apply and restart UI"
-6. Configure the theme from the "Settings" tab under "Catppuccin Theme", afterwards you must "Apply Settings" and "Reload UI"
-
-### Extension (Extension index)
-NOTE: This method will install the theme under the name "stable-diffusion-webui". You can read more about this issue in the next section.
-1. Open WebUI
-2. Click on the "Extensions" tab and navigate to "Available"
-3. Click "Load From:" and find and install "Catppuccin Theme" from the list
-4. Go to "Installed" subsection and click "Apply and restart UI"
-5. Configure the theme from the "Settings" tab under "Catppuccin Theme", afterwards you must "Apply Settings" and "Reload UI"
-
-### Add directly
-1. Clone this repository locally
-2. Create the file `user.css` in your stable-diffusion-webui directory
-3. Copy the contents of the desired flavor into `user.css`
-4. Restart the Web UI or click "Reload UI" at the bottom of the screen
-
-## NOTE
-Due to catppuccin naming conventions and limitations in webui's extension names, this extension will come up as "stable-diffusion-webui" in the extension update section. I have proposed a solution to WebUI [here](https://github.com/catppuccin/stable-diffusion-webui/issues/5#issuecomment-1420599298), feel free to upvote it increase the chances of this issue being resolved.
-
-## ๐ FAQ
-
-- Q: **_"I decided not to use the extennsion, how do I change the accent color?"_**\
- A: Open `user.css` and set the variavble `--accent: var(--{preferred color});`
-
-- Q: **_"The theme isn't being applied???"_**\
- A: Sometimes Web UI doesn't automatically figure out your preferred theme. Try adding `/?__theme=dark` to the url and see if the theme is applied. Below are the steps to make this change persistent on different systems:
- - **Linux / MacOS**: Edit `webui-user.sh` and uncomment and set this variable as `export COMMANDLINE_ARGS="--theme=dark $COMMANDLINE_ARGS"`
- - **Windows**: Edit `webui-user.bat` and set this variable by `set COMMANDLINE_ARGS=--theme=dark`.
-
- If you are still having trouble then consult the relevant part of the [webui wiki](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Features#usercss).
-
-- Q: **_"Why doesn't the theme look like the previews?"_**\
- A: The main UI is constantly being changed upstream, so our previews may not match what the theme will look like for you. Though the previews may be behind, we are frequently updating the themes whenever there is a change in the Web UI repo. Though if you notice a style issue with a recent version of webui, feel free to open an issue on this repo.
-
-- Q: **_"Why isn't {extension} themed?"_**\
- A: Some extensions use their own style sheets that don't play nice with `user.css`.
-
-## ๐ Thanks to
-
-- [Kettukaa](https://github.com/Kettukaa)
-
-
-
-
-
-
-
-
- Copyright © 2021-present Catppuccin Org
-
-
-
-
-
diff --git a/styles/stable-diffusion-web-ui/assets/.gitkeep b/styles/stable-diffusion-web-ui/assets/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/styles/stable-diffusion-web-ui/assets/frappe.webp b/styles/stable-diffusion-web-ui/assets/frappe.webp
deleted file mode 100644
index bb7c4fe6c5..0000000000
Binary files a/styles/stable-diffusion-web-ui/assets/frappe.webp and /dev/null differ
diff --git a/styles/stable-diffusion-web-ui/assets/latte.webp b/styles/stable-diffusion-web-ui/assets/latte.webp
deleted file mode 100644
index 767edad7eb..0000000000
Binary files a/styles/stable-diffusion-web-ui/assets/latte.webp and /dev/null differ
diff --git a/styles/stable-diffusion-web-ui/assets/macchiato.webp b/styles/stable-diffusion-web-ui/assets/macchiato.webp
deleted file mode 100644
index 9a43bd057c..0000000000
Binary files a/styles/stable-diffusion-web-ui/assets/macchiato.webp and /dev/null differ
diff --git a/styles/stable-diffusion-web-ui/assets/mocha.webp b/styles/stable-diffusion-web-ui/assets/mocha.webp
deleted file mode 100644
index c1d211e6e5..0000000000
Binary files a/styles/stable-diffusion-web-ui/assets/mocha.webp and /dev/null differ
diff --git a/styles/stable-diffusion-web-ui/assets/res.webp b/styles/stable-diffusion-web-ui/assets/res.webp
deleted file mode 100644
index 38799b814a..0000000000
Binary files a/styles/stable-diffusion-web-ui/assets/res.webp and /dev/null differ
diff --git a/styles/stable-diffusion-web-ui/flavors/frappe.css b/styles/stable-diffusion-web-ui/flavors/frappe.css
deleted file mode 100644
index 9c183ad7f1..0000000000
--- a/styles/stable-diffusion-web-ui/flavors/frappe.css
+++ /dev/null
@@ -1,565 +0,0 @@
-:root, *, #context-menu {
- --rosewater: #f2d5cf;
- --flamingo: #eebebe;
- --pink: #f4b8e4;
- --mauve: #ca9ee6;
- --red: #e78284;
- --maroon: #ea999c;
- --peach: #ef9f76;
- --yellow: #e5c890;
- --green: #a6d189;
- --teal: #81c8be;
- --sky: #99d1db;
- --sapphire: #85c1dc;
- --blue: #8caaee;
- --lavender: #babbf1;
- --text: #c6d0f5;
- --subtext1: #b5bfe2;
- --subtext0: #a5adce;
- --overlay2: #949cbb;
- --overlay1: #838ba7;
- --overlay0: #737994;
- --surface2: #626880;
- --surface1: #51576d;
- --surface0: #414559;
- --base: #303446;
- --mantle: #292c3c;
- --crust: #232634;
- --shadow: #010409;
- --accent: var(--maroon);
- color-scheme: light;
-}
-
-select, option {
- background-color: var(--base);
-}
-
-#setting_sd_model_checkpoint > :first-child{
- background-color: var(--base);
-}
-
-#txt2img_prompt_container,
-#img2img_prompt_container {
- background-color: var(--mantle);
-}
-
-
-.dark .bg-white\/90, .bg-white\/90 {
-background-color: var(--base);
-}
-
-.dark fieldset span.text-gray-500, fieldset span.text-gray-500,
-.dark .gr-block.gr-box span.text-gray-500, .gr-block.gr-box span.text-gray-500,
-.dark label.block span, label.block span {
-background-color: var(--base);
-border: transparent;
-}
-
-.dark .dark\:text-gray-200, .\:text-gray-200{
-color: var(--text);
-}
-
-.dark .dark\:bg-gray-950, .\:bg-gray-950 {
- background-color: var(--crust);
-}
-
-.dark .dark\:bg-gray-900, .\:bg-gray-900 {
- background-color: var(--base);
- border-radius: 10px;
-}
-
-.dark .dark\:border-gray-700, .\:border-gray-700 {
- border-color: var(--surface0);
-}
-
-.dark .gr-panel, .gr-panel {
- background-color: var(--mantle);
-}
-
-
-textarea, .gr-text-input {
- background-color: var(--base) !important;
-}
-
-.dark .bg-white, .bg-white {
- background-color: var(--mantle);
-}
-
-.dark .gr-compact, .gr-compact {
- background-color: var(--base);
-}
-
-.dark .gr-input, .gr-input {
- border-color: var(--surface0);
-}
-.dark .gr-form, .gr-form,
-.dark .gr-box, .gr-box {
- background-color: transparent;
- color: var(--text);
-}
-.dark .gr-check-radio, .gr-check-radio {
- background-color: var(--base);
-}
-
-.dark .gr-check-radio:focus, .gr-check-radio:focus,
-.dark .gr-check-radio:checked, .gr-check-radio:checked {
- background-color: var(--accent);
-}
-
-.dark .gr-button-primary:hover, .gr-button-primary:hover {
-filter: brightness(130%);
-}
-.dark .gr-button-primary, .gr-button-primary {
-background-color: var(--accent) !important;
-color: var(--shadow)
-}
-
-
-.dark .gr-button-secondary:hover, .gr-button-secondary:hover {
-filter: brightness(120%);
-}
-
-button, input, optgroup, select, textarea {
-color: var(--accent);
-}
-
-.dark .gr-input-label, .gr-input-label,
-.dark .gr-button-secondary,.gr-button-secondary,
-.gr-input-label,
-.gr-button-secondary {
- --tw-gradient-from: none;
- --tw-gradient-to: none;
- --tw-gradient-stops: none;
- background-color: var(--base);
- color: var(--text)
-}
-
-.gr-button,
-.dark .gr-button {
-border-color:var(--surface0);
-background-color: var(--base);
-background-image: unset;
-}
-
-
-.livePreview {
- background-color: var(--base) !important;
- height: 60vh !important;
- width: 100% !important;
- border-radius: 10px !important;
-}
-
-.gr-padded {
-padding: .825rem .75rem;
-}
-
-
-#mode_extras > :first-child > .bg-white {
-background-color: var(--base);
-}
-
-#interrogate_col {
-justify-content: center;
-gap: 10px;
-/* background: var(--base); */
-/* border-top-left-radius: 10px !important; */
-/* border-top-right-radius: 10px !important; */
-/* padding-top: 20px; */
-}
-
-#txt2img_toprow,
-#img2img_toprow {
-background-color: unset;
-}
-
-#txt2img_actions_column, #img2img_actions_column {
-padding: 10px;
-margin: 5px;
-border-radius: 10px !important;
-background-color: var(--base);
-}
-
-#img_inpaint_mask > div:nth-child(3),
-#img_inpaint_base > div:nth-child(3){
-border-width: 1px;
-border-color:var(--surface0);
-
-}
-
-#img2img_settings {
-border-radius: 10px;
-}
-
-#mode_img2img > :not(:first-child) {
-border-width: 0px;
-}
-
-
-#txt2img_gallery,
-#img2img_gallery,
-#extras_gallery {
-background-color: var(--base) !important;
-}
-
-#img2img_copy_to_img2img > :not(:first-child) {
-border-width: 1px !important;
-border-color: var(--surface0) !important;
-border-radius: 10px !important;
-margin-left: 10px;
-}
-
-#txt2img_interrupt, #img2img_interrupt {
-background-color: var(--red) !important;
-color: var(--mantle);
-}
-
-#txt2img_skip, #img2img_skip {
-background-color: var(--maroon) !important;
-color: var(--mantle);
-}
-
-#txt2img_batch_count,
-#txt2img_width {
- margin-bottom: 0.625vw;
-}
-
-#txt2img_script_container > div > div {
- margin: 0px 1vh 0.9vw 1vh;
-}
-
-#txt2img_script_container:last-child > div{
- margin: unset;
-}
-
-.boder,
-.dark .border, .border,
-.dark .border-gray-100, .border-gray-100,
-.dark .border-gray-200, .border-gray-200,
-.dark .border-gray-300, .border-gray-300,
-.dark .\!border, .\!border,
-.dark .\!border-gray-300, .\!border-gray-300 {
- border-color: var(--surface0);
-}
-
-
-.container {
-background-color: var(--crust);
-}
-
-fieldset span.text-gray-500,
-.gr-block.gr-box span.text-gray-500,
-label.block span {
-box-shadow: unset;
-}
-
-.dark .text-gray-500, .text-gray-500 {
-color: var(--text);
-}
-
-.dark fieldset span.text-gray-500, fieldset span.text-gray-500,
-.dark .gr-block.gr-box, .gr-block.gr-box,
-span.text-gray-500,
-.dark label.block span, label.block span {
- background-color: transparent;
- border: transparent;
-}
-
-.dark .text-gray-700, .text-gray-700,
-.dark .text-gray-800, .text-gray-800,
-.dark .text-gray-900, .text-gray-900,
-.dark .\!text-gray-700, .\!text-gray-700,
-.dark .\!text-gray-800, .\!text-gray-800 {
-color: var(--text);
-}
-
-#txt2img_settings > div {
- margin-top: 2vh;
- flex-grow: 0;
- min-width: 30%;
-}
-
-#tabs > :first-child {
- background-color: var(--crust);
-}
-
-#tabs{
- background-color: var(--mantle);
-}
-
-#tab_txt2img > div {
- background-color: var(--mantle);
-}
-
-#tabs > div{
- border-width: 0px !important;
- border-color:var(--surface0);
-}
-
-#tabs > div:nth-child(1) {
- flex-wrap: wrap-reverse;
- background-color: var(--crust);
-}
-.tabs > :first-child {
- border: none !important;
- margin-bottom: -1px;
- gap: 3px 0px;
- background-color: var(--mantle);
- padding-top: 5px;
- z-index: 10;
-}
-
-#img2img_img2img_tab {
-border-width: 0px !important;
-}
-
-#mode_img2img > div:nth-child(1) > .bg-white {
-background-color: var(--base);
-}
-
-#tab_extensions table td, #tab_extensions table th {
-border: 1px solid var(--surface0);
-}
-
-#extras_resize_mode > :first-child {
-background-color: var(--base);
-}
-
-#extras_resize_mode > :not(:first-child) {
-background-color: var(--mantle) !important;
-padding-top: 20px;
-border-color: transparent;
-border-radius: 0px 10px 10px 10px;
-margin-bottom: 20px;
-
-}
-
-.tabs > :first-child > button {
- border-radius: 8px 8px 0px 0px;
- /* outline: 1px solid var(--base) !important; */
- border-color: var(--surface0);
- border-width: 0px;
- border-bottom-width: 0px;
-}
-
-
-#quicksettings {
- background-color: transparent;
-}
-
-input[type="range"]::-ms-track {
- background: transparent;
-}
-
-input[type="range"]::-ms-fill-lower {
- background: var(--accent);
- border-radius: 10px;
-}
-input[type="range"]::-ms-fill-upper {
- background: var(--overlay0);
- border-radius: 10px;
-}
-
-input[type="range"]:focus::-ms-fill-lower {
- background: var(--accent);
-}
-input[type="range"]:focus::-ms-fill-upper {
- background: var(--overlay0);
-}
-
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
- -webkit-appearance: none;
- margin: 0;
-}
-
-/* Firefox */
-input[type="number"] {
- -moz-appearance: textfield;
-}
-.gr-box > div > div > input.gr-text-input {
- width: 4em;
-}
-
-.progressDiv .progress {
- background: var(--accent);
- color: var(--shadow);
-}
-
-.dark .progressDiv, .progressDiv {
- background-color: var(--surface0);
-}
-
-input[type="range"] {
- font-size: 1.5rem;
-}
-
-input[type="range"] {
- color: var(--accent);
- --thumb-height: 0.5em;
- --track-height: 0.125em;
- --track-color: var(--surface0);
- --brightness-hover: 130%;
- --brightness-down: 80%;
- --clip-edges: 0.125em;
-}
-
-input[type="range"].win10-thumb {
- color: var(--accent);
-
- --thumb-height: 0.5em;
- --thumb-width: 0.5em;
- --clip-edges: 0.0125em;
-}
-
-@media (prefers-color-scheme: dark) {
- input[type="range"] {
- color: var(--accent);
- --track-color: var(--surface0);
- }
-
- input[type="range"].win10-thumb {
- color: var(--accent);
- }
-}
-
-/* === range commons === */
-input[type="range"] {
- position: relative;
- background: #fff0;
- overflow: hidden;
-}
-
-input[type="range"]:active {
- cursor: grabbing;
-}
-
-input[type="range"]:disabled {
- filter: grayscale(1);
- opacity: 0.3;
- cursor: not-allowed;
-}
-
-/* === WebKit specific styles === */
-input[type="range"],
-input[type="range"]::-webkit-slider-runnable-track,
-input[type="range"]::-webkit-slider-thumb {
- -webkit-appearance: none;
- transition: all ease 100ms;
- height: var(--thumb-height);
-}
-
-input[type="range"]::-webkit-slider-runnable-track,
-input[type="range"]::-webkit-slider-thumb {
- position: relative;
-}
-
-input[type="range"]::-webkit-slider-thumb {
- --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
- --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
- --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
- --clip-further: calc(100% + 1px);
- --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;
-
- width: var(--thumb-width, var(--thumb-height));
- background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);
- background-color: currentColor;
- box-shadow: var(--box-fill);
- border-radius: var(--thumb-width, var(--thumb-height));
-
- filter: brightness(100%);
- clip-path: polygon(
- 100% -1px,
- var(--clip-edges) -1px,
- 0 var(--clip-top),
- -100vmax var(--clip-top),
- -100vmax var(--clip-bottom),
- 0 var(--clip-bottom),
- var(--clip-edges) 100%,
- var(--clip-further) var(--clip-further)
- );
-}
-
-input[type="range"]:hover::-webkit-slider-thumb {
- filter: brightness(var(--brightness-hover));
- cursor: grab;
-}
-
-input[type="range"]:active::-webkit-slider-thumb {
- filter: brightness(var(--brightness-down));
- cursor: grabbing;
-}
-
-input[type="range"]::-webkit-slider-runnable-track {
- background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
-}
-
-input[type="range"]:disabled::-webkit-slider-thumb {
- cursor: not-allowed;
-}
-
-/* === Firefox specific styles === */
-input[type="range"],
-input[type="range"]::-moz-range-track,
-input[type="range"]::-moz-range-thumb {
- appearance: none;
- transition: all ease 100ms;
- height: var(--thumb-height);
-}
-
-input[type="range"]::-moz-range-track,
-input[type="range"]::-moz-range-thumb,
-input[type="range"]::-moz-range-progress {
- background: #fff0;
-}
-
-input[type="range"]::-moz-range-thumb {
- background: currentColor;
- border: 0;
- width: var(--thumb-width, var(--thumb-height));
- border-radius: var(--thumb-width, var(--thumb-height));
- cursor: grab;
-}
-
-input[type="range"]:active::-moz-range-thumb {
- cursor: grabbing;
-}
-
-input[type="range"]::-moz-range-track {
- width: 100%;
- background: var(--track-color);
-}
-
-input[type="range"]::-moz-range-progress {
- appearance: none;
- background: currentColor;
- transition-delay: 30ms;
-}
-
-input[type="range"]::-moz-range-track,
-input[type="range"]::-moz-range-progress {
- height: calc(var(--track-height) + 1px);
- border-radius: var(--track-height);
-}
-
-input[type="range"]::-moz-range-thumb,
-input[type="range"]::-moz-range-progress {
- filter: brightness(100%);
-}
-
-input[type="range"]:hover::-moz-range-thumb,
-input[type="range"]:hover::-moz-range-progress {
- filter: brightness(var(--brightness-hover));
-}
-
-input[type="range"]:active::-moz-range-thumb,
-input[type="range"]:active::-moz-range-progress {
- filter: brightness(var(--brightness-down));
-}
-
-input[type="range"]:disabled::-moz-range-thumb {
- cursor: not-allowed;
-}
-
-/* all of the input range stuff is from this guy*/
-/* Shout out to them https://codepen.io/ShadowShahriar/pen/zYPPYrQ */
diff --git a/styles/stable-diffusion-web-ui/flavors/latte.css b/styles/stable-diffusion-web-ui/flavors/latte.css
deleted file mode 100644
index 0a715d9862..0000000000
--- a/styles/stable-diffusion-web-ui/flavors/latte.css
+++ /dev/null
@@ -1,565 +0,0 @@
-:root, *, #context-menu{
- --rosewater: #dc8a78;
- --flamingo: #dd7878;
- --pink: #ea76cb;
- --mauve: #8839ef;
- --red: #d20f39;
- --maroon: #e64553;
- --peach: #fe640b;
- --yellow: #df8e1d;
- --green: #40a02b;
- --teal: #179299;
- --sky: #04a5e5;
- --sapphire: #209fb5;
- --blue: #1e66f5;
- --lavender: #7287fd;
- --text: #4c4f69;
- --subtext1: #5c5f77;
- --subtext0: #6c6f85;
- --overlay2: #7c7f93;
- --overlay1: #8c8fa1;
- --overlay0: #9ca0b0;
- --surface2: #acb0be;
- --surface1: #bcc0cc;
- --surface0: #ccd0da;
- --base: #eff1f5;
- --mantle: #e6e9ef;
- --crust: #dce0e8;
- --shadow: #dbdfef;
- --accent: var(--maroon);
- color-scheme: light;
-}
-
-select, option {
- background-color: var(--base);
-}
-
-#setting_sd_model_checkpoint > :first-child{
- background-color: var(--base);
-}
-
-#txt2img_prompt_container,
-#img2img_prompt_container {
- background-color: var(--mantle);
-}
-
-
-.dark .bg-white\/90, .bg-white\/90 {
-background-color: var(--base);
-}
-
-.dark fieldset span.text-gray-500, fieldset span.text-gray-500,
-.dark .gr-block.gr-box span.text-gray-500, .gr-block.gr-box span.text-gray-500,
-.dark label.block span, label.block span {
-background-color: var(--base);
-border: transparent;
-}
-
-.dark .dark\:text-gray-200, .\:text-gray-200{
-color: var(--text);
-}
-
-.dark .dark\:bg-gray-950, .\:bg-gray-950 {
- background-color: var(--crust);
-}
-
-.dark .dark\:bg-gray-900, .\:bg-gray-900 {
- background-color: var(--base);
- border-radius: 10px;
-}
-
-.dark .dark\:border-gray-700, .\:border-gray-700 {
- border-color: var(--surface0);
-}
-
-.dark .gr-panel, .gr-panel {
- background-color: var(--mantle);
-}
-
-
-textarea, .gr-text-input {
- background-color: var(--base) !important;
-}
-
-.dark .bg-white, .bg-white {
- background-color: var(--mantle);
-}
-
-.dark .gr-compact, .gr-compact {
- background-color: var(--base);
-}
-
-.dark .gr-input, .gr-input {
- border-color: var(--surface0);
-}
-.dark .gr-form, .gr-form,
-.dark .gr-box, .gr-box {
- background-color: transparent;
- color: var(--text);
-}
-.dark .gr-check-radio, .gr-check-radio {
- background-color: var(--base);
-}
-
-.dark .gr-check-radio:focus, .gr-check-radio:focus,
-.dark .gr-check-radio:checked, .gr-check-radio:checked {
- background-color: var(--accent);
-}
-
-.dark .gr-button-primary:hover, .gr-button-primary:hover {
-filter: brightness(130%);
-}
-.dark .gr-button-primary, .gr-button-primary {
-background-color: var(--accent) !important;
-color: var(--shadow)
-}
-
-
-.dark .gr-button-secondary:hover, .gr-button-secondary:hover {
-filter: brightness(120%);
-}
-
-button, input, optgroup, select, textarea {
-color: var(--accent);
-}
-
-.dark .gr-input-label, .gr-input-label,
-.dark .gr-button-secondary,.gr-button-secondary,
-.gr-input-label,
-.gr-button-secondary {
- --tw-gradient-from: none;
- --tw-gradient-to: none;
- --tw-gradient-stops: none;
- background-color: var(--base);
- color: var(--text)
-}
-
-.gr-button,
-.dark .gr-button {
-border-color:var(--surface0);
-background-color: var(--base);
-background-image: unset;
-}
-
-
-.livePreview {
- background-color: var(--base) !important;
- height: 60vh !important;
- width: 100% !important;
- border-radius: 10px !important;
-}
-
-.gr-padded {
-padding: .825rem .75rem;
-}
-
-
-#mode_extras > :first-child > .bg-white {
-background-color: var(--base);
-}
-
-#interrogate_col {
-justify-content: center;
-gap: 10px;
-/* background: var(--base); */
-/* border-top-left-radius: 10px !important; */
-/* border-top-right-radius: 10px !important; */
-/* padding-top: 20px; */
-}
-
-#txt2img_toprow,
-#img2img_toprow {
-background-color: unset;
-}
-
-#txt2img_actions_column, #img2img_actions_column {
-padding: 10px;
-margin: 5px;
-border-radius: 10px !important;
-background-color: var(--base);
-}
-
-#img_inpaint_mask > div:nth-child(3),
-#img_inpaint_base > div:nth-child(3){
-border-width: 1px;
-border-color:var(--surface0);
-
-}
-
-#img2img_settings {
-border-radius: 10px;
-}
-
-#mode_img2img > :not(:first-child) {
-border-width: 0px;
-}
-
-
-#txt2img_gallery,
-#img2img_gallery,
-#extras_gallery {
-background-color: var(--base) !important;
-}
-
-#img2img_copy_to_img2img > :not(:first-child) {
-border-width: 1px !important;
-border-color: var(--surface0) !important;
-border-radius: 10px !important;
-margin-left: 10px;
-}
-
-#txt2img_interrupt, #img2img_interrupt {
-background-color: var(--red) !important;
-color: var(--mantle);
-}
-
-#txt2img_skip, #img2img_skip {
-background-color: var(--maroon) !important;
-color: var(--mantle);
-}
-
-#txt2img_batch_count,
-#txt2img_width {
- margin-bottom: 0.625vw;
-}
-
-#txt2img_script_container > div > div {
- margin: 0px 1vh 0.9vw 1vh;
-}
-
-#txt2img_script_container:last-child > div{
- margin: unset;
-}
-
-.boder,
-.dark .border, .border,
-.dark .border-gray-100, .border-gray-100,
-.dark .border-gray-200, .border-gray-200,
-.dark .border-gray-300, .border-gray-300,
-.dark .\!border, .\!border,
-.dark .\!border-gray-300, .\!border-gray-300 {
- border-color: var(--surface0);
-}
-
-
-.container {
-background-color: var(--crust);
-}
-
-fieldset span.text-gray-500,
-.gr-block.gr-box span.text-gray-500,
-label.block span {
-box-shadow: unset;
-}
-
-.dark .text-gray-500, .text-gray-500 {
-color: var(--text);
-}
-
-.dark fieldset span.text-gray-500, fieldset span.text-gray-500,
-.dark .gr-block.gr-box, .gr-block.gr-box,
-span.text-gray-500,
-.dark label.block span, label.block span {
- background-color: transparent;
- border: transparent;
-}
-
-.dark .text-gray-700, .text-gray-700,
-.dark .text-gray-800, .text-gray-800,
-.dark .text-gray-900, .text-gray-900,
-.dark .\!text-gray-700, .\!text-gray-700,
-.dark .\!text-gray-800, .\!text-gray-800 {
-color: var(--text);
-}
-
-#txt2img_settings > div {
- margin-top: 2vh;
- flex-grow: 0;
- min-width: 30%;
-}
-
-#tabs > :first-child {
- background-color: var(--crust);
-}
-
-#tabs{
- background-color: var(--mantle);
-}
-
-#tab_txt2img > div {
- background-color: var(--mantle);
-}
-
-#tabs > div{
- border-width: 0px !important;
- border-color:var(--surface0);
-}
-
-#tabs > div:nth-child(1) {
- flex-wrap: wrap-reverse;
- background-color: var(--crust);
-}
-.tabs > :first-child {
- border: none !important;
- margin-bottom: -1px;
- gap: 3px 0px;
- background-color: var(--mantle);
- padding-top: 5px;
- z-index: 10;
-}
-
-#img2img_img2img_tab {
-border-width: 0px !important;
-}
-
-#mode_img2img > div:nth-child(1) > .bg-white {
-background-color: var(--base);
-}
-
-#tab_extensions table td, #tab_extensions table th {
-border: 1px solid var(--surface0);
-}
-
-#extras_resize_mode > :first-child {
-background-color: var(--base);
-}
-
-#extras_resize_mode > :not(:first-child) {
-background-color: var(--mantle) !important;
-padding-top: 20px;
-border-color: transparent;
-border-radius: 0px 10px 10px 10px;
-margin-bottom: 20px;
-
-}
-
-.tabs > :first-child > button {
- border-radius: 8px 8px 0px 0px;
- /* outline: 1px solid var(--base) !important; */
- border-color: var(--surface0);
- border-width: 0px;
- border-bottom-width: 0px;
-}
-
-
-#quicksettings {
- background-color: transparent;
-}
-
-input[type="range"]::-ms-track {
- background: transparent;
-}
-
-input[type="range"]::-ms-fill-lower {
- background: var(--accent);
- border-radius: 10px;
-}
-input[type="range"]::-ms-fill-upper {
- background: var(--overlay0);
- border-radius: 10px;
-}
-
-input[type="range"]:focus::-ms-fill-lower {
- background: var(--accent);
-}
-input[type="range"]:focus::-ms-fill-upper {
- background: var(--overlay0);
-}
-
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
- -webkit-appearance: none;
- margin: 0;
-}
-
-/* Firefox */
-input[type="number"] {
- -moz-appearance: textfield;
-}
-.gr-box > div > div > input.gr-text-input {
- width: 4em;
-}
-
-.progressDiv .progress {
- background: var(--accent);
- color: var(--shadow);
-}
-
-.dark .progressDiv, .progressDiv {
- background-color: var(--surface0);
-}
-
-input[type="range"] {
- font-size: 1.5rem;
-}
-
-input[type="range"] {
- color: var(--accent);
- --thumb-height: 0.5em;
- --track-height: 0.125em;
- --track-color: var(--surface0);
- --brightness-hover: 130%;
- --brightness-down: 80%;
- --clip-edges: 0.125em;
-}
-
-input[type="range"].win10-thumb {
- color: var(--accent);
-
- --thumb-height: 0.5em;
- --thumb-width: 0.5em;
- --clip-edges: 0.0125em;
-}
-
-@media (prefers-color-scheme: dark) {
- input[type="range"] {
- color: var(--accent);
- --track-color: var(--surface0);
- }
-
- input[type="range"].win10-thumb {
- color: var(--accent);
- }
-}
-
-/* === range commons === */
-input[type="range"] {
- position: relative;
- background: #fff0;
- overflow: hidden;
-}
-
-input[type="range"]:active {
- cursor: grabbing;
-}
-
-input[type="range"]:disabled {
- filter: grayscale(1);
- opacity: 0.3;
- cursor: not-allowed;
-}
-
-/* === WebKit specific styles === */
-input[type="range"],
-input[type="range"]::-webkit-slider-runnable-track,
-input[type="range"]::-webkit-slider-thumb {
- -webkit-appearance: none;
- transition: all ease 100ms;
- height: var(--thumb-height);
-}
-
-input[type="range"]::-webkit-slider-runnable-track,
-input[type="range"]::-webkit-slider-thumb {
- position: relative;
-}
-
-input[type="range"]::-webkit-slider-thumb {
- --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
- --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
- --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
- --clip-further: calc(100% + 1px);
- --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;
-
- width: var(--thumb-width, var(--thumb-height));
- background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);
- background-color: currentColor;
- box-shadow: var(--box-fill);
- border-radius: var(--thumb-width, var(--thumb-height));
-
- filter: brightness(100%);
- clip-path: polygon(
- 100% -1px,
- var(--clip-edges) -1px,
- 0 var(--clip-top),
- -100vmax var(--clip-top),
- -100vmax var(--clip-bottom),
- 0 var(--clip-bottom),
- var(--clip-edges) 100%,
- var(--clip-further) var(--clip-further)
- );
-}
-
-input[type="range"]:hover::-webkit-slider-thumb {
- filter: brightness(var(--brightness-hover));
- cursor: grab;
-}
-
-input[type="range"]:active::-webkit-slider-thumb {
- filter: brightness(var(--brightness-down));
- cursor: grabbing;
-}
-
-input[type="range"]::-webkit-slider-runnable-track {
- background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
-}
-
-input[type="range"]:disabled::-webkit-slider-thumb {
- cursor: not-allowed;
-}
-
-/* === Firefox specific styles === */
-input[type="range"],
-input[type="range"]::-moz-range-track,
-input[type="range"]::-moz-range-thumb {
- appearance: none;
- transition: all ease 100ms;
- height: var(--thumb-height);
-}
-
-input[type="range"]::-moz-range-track,
-input[type="range"]::-moz-range-thumb,
-input[type="range"]::-moz-range-progress {
- background: #fff0;
-}
-
-input[type="range"]::-moz-range-thumb {
- background: currentColor;
- border: 0;
- width: var(--thumb-width, var(--thumb-height));
- border-radius: var(--thumb-width, var(--thumb-height));
- cursor: grab;
-}
-
-input[type="range"]:active::-moz-range-thumb {
- cursor: grabbing;
-}
-
-input[type="range"]::-moz-range-track {
- width: 100%;
- background: var(--track-color);
-}
-
-input[type="range"]::-moz-range-progress {
- appearance: none;
- background: currentColor;
- transition-delay: 30ms;
-}
-
-input[type="range"]::-moz-range-track,
-input[type="range"]::-moz-range-progress {
- height: calc(var(--track-height) + 1px);
- border-radius: var(--track-height);
-}
-
-input[type="range"]::-moz-range-thumb,
-input[type="range"]::-moz-range-progress {
- filter: brightness(100%);
-}
-
-input[type="range"]:hover::-moz-range-thumb,
-input[type="range"]:hover::-moz-range-progress {
- filter: brightness(var(--brightness-hover));
-}
-
-input[type="range"]:active::-moz-range-thumb,
-input[type="range"]:active::-moz-range-progress {
- filter: brightness(var(--brightness-down));
-}
-
-input[type="range"]:disabled::-moz-range-thumb {
- cursor: not-allowed;
-}
-
-/* all of the input range stuff is from this guy*/
-/* Shout out to them https://codepen.io/ShadowShahriar/pen/zYPPYrQ */
diff --git a/styles/stable-diffusion-web-ui/flavors/macchiato.css b/styles/stable-diffusion-web-ui/flavors/macchiato.css
deleted file mode 100644
index 94a79a28e0..0000000000
--- a/styles/stable-diffusion-web-ui/flavors/macchiato.css
+++ /dev/null
@@ -1,565 +0,0 @@
-:root, *, #context-menu{
- --rosewater: #f4dbd6;
- --flamingo: #f0c6c6;
- --pink: #f5bde6;
- --mauve: #c6a0f6;
- --red: #ed8796;
- --maroon: #ee99a0;
- --peach: #f5a97f;
- --yellow: #eed49f;
- --green: #a6da95;
- --teal: #8bd5ca;
- --sky: #91d7e3;
- --sapphire: #7dc4e4;
- --blue: #8aadf4;
- --lavender: #b7bdf8;
- --text: #cad3f5;
- --subtext1: #b8c0e0;
- --subtext0: #a5adcb;
- --overlay2: #939ab7;
- --overlay1: #8087a2;
- --overlay0: #6e738d;
- --surface2: #5b6078;
- --surface1: #494d64;
- --surface0: #363a4f;
- --base: #24273a;
- --mantle: #1e2030;
- --crust: #181926;
- --shadow: #010409;
- --accent: var(--maroon);
- color-scheme: dark;
-}
-
-select, option {
- background-color: var(--base);
-}
-
-#setting_sd_model_checkpoint > :first-child{
- background-color: var(--base);
-}
-
-#txt2img_prompt_container,
-#img2img_prompt_container {
- background-color: var(--mantle);
-}
-
-
-.dark .bg-white\/90, .bg-white\/90 {
-background-color: var(--base);
-}
-
-.dark fieldset span.text-gray-500, fieldset span.text-gray-500,
-.dark .gr-block.gr-box span.text-gray-500, .gr-block.gr-box span.text-gray-500,
-.dark label.block span, label.block span {
-background-color: var(--base);
-border: transparent;
-}
-
-.dark .dark\:text-gray-200, .\:text-gray-200{
-color: var(--text);
-}
-
-.dark .dark\:bg-gray-950, .\:bg-gray-950 {
- background-color: var(--crust);
-}
-
-.dark .dark\:bg-gray-900, .\:bg-gray-900 {
- background-color: var(--base);
- border-radius: 10px;
-}
-
-.dark .dark\:border-gray-700, .\:border-gray-700 {
- border-color: var(--surface0);
-}
-
-.dark .gr-panel, .gr-panel {
- background-color: var(--mantle);
-}
-
-
-textarea, .gr-text-input {
- background-color: var(--base) !important;
-}
-
-.dark .bg-white, .bg-white {
- background-color: var(--mantle);
-}
-
-.dark .gr-compact, .gr-compact {
- background-color: var(--base);
-}
-
-.dark .gr-input, .gr-input {
- border-color: var(--surface0);
-}
-.dark .gr-form, .gr-form,
-.dark .gr-box, .gr-box {
- background-color: transparent;
- color: var(--text);
-}
-.dark .gr-check-radio, .gr-check-radio {
- background-color: var(--base);
-}
-
-.dark .gr-check-radio:focus, .gr-check-radio:focus,
-.dark .gr-check-radio:checked, .gr-check-radio:checked {
- background-color: var(--accent);
-}
-
-.dark .gr-button-primary:hover, .gr-button-primary:hover {
-filter: brightness(130%);
-}
-.dark .gr-button-primary, .gr-button-primary {
-background-color: var(--accent) !important;
-color: var(--shadow)
-}
-
-
-.dark .gr-button-secondary:hover, .gr-button-secondary:hover {
-filter: brightness(120%);
-}
-
-button, input, optgroup, select, textarea {
-color: var(--accent);
-}
-
-.dark .gr-input-label, .gr-input-label,
-.dark .gr-button-secondary,.gr-button-secondary,
-.gr-input-label,
-.gr-button-secondary {
- --tw-gradient-from: none;
- --tw-gradient-to: none;
- --tw-gradient-stops: none;
- background-color: var(--base);
- color: var(--text)
-}
-
-.gr-button,
-.dark .gr-button {
-border-color:var(--surface0);
-background-color: var(--base);
-background-image: unset;
-}
-
-
-.livePreview {
- background-color: var(--base) !important;
- height: 60vh !important;
- width: 100% !important;
- border-radius: 10px !important;
-}
-
-.gr-padded {
-padding: .825rem .75rem;
-}
-
-
-#mode_extras > :first-child > .bg-white {
-background-color: var(--base);
-}
-
-#interrogate_col {
-justify-content: center;
-gap: 10px;
-/* background: var(--base); */
-/* border-top-left-radius: 10px !important; */
-/* border-top-right-radius: 10px !important; */
-/* padding-top: 20px; */
-}
-
-#txt2img_toprow,
-#img2img_toprow {
-background-color: unset;
-}
-
-#txt2img_actions_column, #img2img_actions_column {
-padding: 10px;
-margin: 5px;
-border-radius: 10px !important;
-background-color: var(--base);
-}
-
-#img_inpaint_mask > div:nth-child(3),
-#img_inpaint_base > div:nth-child(3){
-border-width: 1px;
-border-color:var(--surface0);
-
-}
-
-#img2img_settings {
-border-radius: 10px;
-}
-
-#mode_img2img > :not(:first-child) {
-border-width: 0px;
-}
-
-
-#txt2img_gallery,
-#img2img_gallery,
-#extras_gallery {
-background-color: var(--base) !important;
-}
-
-#img2img_copy_to_img2img > :not(:first-child) {
-border-width: 1px !important;
-border-color: var(--surface0) !important;
-border-radius: 10px !important;
-margin-left: 10px;
-}
-
-#txt2img_interrupt, #img2img_interrupt {
-background-color: var(--red) !important;
-color: var(--mantle);
-}
-
-#txt2img_skip, #img2img_skip {
-background-color: var(--maroon) !important;
-color: var(--mantle);
-}
-
-#txt2img_batch_count,
-#txt2img_width {
- margin-bottom: 0.625vw;
-}
-
-#txt2img_script_container > div > div {
- margin: 0px 1vh 0.9vw 1vh;
-}
-
-#txt2img_script_container:last-child > div{
- margin: unset;
-}
-
-.boder,
-.dark .border, .border,
-.dark .border-gray-100, .border-gray-100,
-.dark .border-gray-200, .border-gray-200,
-.dark .border-gray-300, .border-gray-300,
-.dark .\!border, .\!border,
-.dark .\!border-gray-300, .\!border-gray-300 {
- border-color: var(--surface0);
-}
-
-
-.container {
-background-color: var(--crust);
-}
-
-fieldset span.text-gray-500,
-.gr-block.gr-box span.text-gray-500,
-label.block span {
-box-shadow: unset;
-}
-
-.dark .text-gray-500, .text-gray-500 {
-color: var(--text);
-}
-
-.dark fieldset span.text-gray-500, fieldset span.text-gray-500,
-.dark .gr-block.gr-box, .gr-block.gr-box,
-span.text-gray-500,
-.dark label.block span, label.block span {
- background-color: transparent;
- border: transparent;
-}
-
-.dark .text-gray-700, .text-gray-700,
-.dark .text-gray-800, .text-gray-800,
-.dark .text-gray-900, .text-gray-900,
-.dark .\!text-gray-700, .\!text-gray-700,
-.dark .\!text-gray-800, .\!text-gray-800 {
-color: var(--text);
-}
-
-#txt2img_settings > div {
- margin-top: 2vh;
- flex-grow: 0;
- min-width: 30%;
-}
-
-#tabs > :first-child {
- background-color: var(--crust);
-}
-
-#tabs{
- background-color: var(--mantle);
-}
-
-#tab_txt2img > div {
- background-color: var(--mantle);
-}
-
-#tabs > div{
- border-width: 0px !important;
- border-color:var(--surface0);
-}
-
-#tabs > div:nth-child(1) {
- flex-wrap: wrap-reverse;
- background-color: var(--crust);
-}
-.tabs > :first-child {
- border: none !important;
- margin-bottom: -1px;
- gap: 3px 0px;
- background-color: var(--mantle);
- padding-top: 5px;
- z-index: 10;
-}
-
-#img2img_img2img_tab {
-border-width: 0px !important;
-}
-
-#mode_img2img > div:nth-child(1) > .bg-white {
-background-color: var(--base);
-}
-
-#tab_extensions table td, #tab_extensions table th {
-border: 1px solid var(--surface0);
-}
-
-#extras_resize_mode > :first-child {
-background-color: var(--base);
-}
-
-#extras_resize_mode > :not(:first-child) {
-background-color: var(--mantle) !important;
-padding-top: 20px;
-border-color: transparent;
-border-radius: 0px 10px 10px 10px;
-margin-bottom: 20px;
-
-}
-
-.tabs > :first-child > button {
- border-radius: 8px 8px 0px 0px;
- /* outline: 1px solid var(--base) !important; */
- border-color: var(--surface0);
- border-width: 0px;
- border-bottom-width: 0px;
-}
-
-
-#quicksettings {
- background-color: transparent;
-}
-
-input[type="range"]::-ms-track {
- background: transparent;
-}
-
-input[type="range"]::-ms-fill-lower {
- background: var(--accent);
- border-radius: 10px;
-}
-input[type="range"]::-ms-fill-upper {
- background: var(--overlay0);
- border-radius: 10px;
-}
-
-input[type="range"]:focus::-ms-fill-lower {
- background: var(--accent);
-}
-input[type="range"]:focus::-ms-fill-upper {
- background: var(--overlay0);
-}
-
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
- -webkit-appearance: none;
- margin: 0;
-}
-
-/* Firefox */
-input[type="number"] {
- -moz-appearance: textfield;
-}
-.gr-box > div > div > input.gr-text-input {
- width: 4em;
-}
-
-.progressDiv .progress {
- background: var(--accent);
- color: var(--shadow);
-}
-
-.dark .progressDiv, .progressDiv {
- background-color: var(--surface0);
-}
-
-input[type="range"] {
- font-size: 1.5rem;
-}
-
-input[type="range"] {
- color: var(--accent);
- --thumb-height: 0.5em;
- --track-height: 0.125em;
- --track-color: var(--surface0);
- --brightness-hover: 130%;
- --brightness-down: 80%;
- --clip-edges: 0.125em;
-}
-
-input[type="range"].win10-thumb {
- color: var(--accent);
-
- --thumb-height: 0.5em;
- --thumb-width: 0.5em;
- --clip-edges: 0.0125em;
-}
-
-@media (prefers-color-scheme: dark) {
- input[type="range"] {
- color: var(--accent);
- --track-color: var(--surface0);
- }
-
- input[type="range"].win10-thumb {
- color: var(--accent);
- }
-}
-
-/* === range commons === */
-input[type="range"] {
- position: relative;
- background: #fff0;
- overflow: hidden;
-}
-
-input[type="range"]:active {
- cursor: grabbing;
-}
-
-input[type="range"]:disabled {
- filter: grayscale(1);
- opacity: 0.3;
- cursor: not-allowed;
-}
-
-/* === WebKit specific styles === */
-input[type="range"],
-input[type="range"]::-webkit-slider-runnable-track,
-input[type="range"]::-webkit-slider-thumb {
- -webkit-appearance: none;
- transition: all ease 100ms;
- height: var(--thumb-height);
-}
-
-input[type="range"]::-webkit-slider-runnable-track,
-input[type="range"]::-webkit-slider-thumb {
- position: relative;
-}
-
-input[type="range"]::-webkit-slider-thumb {
- --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
- --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
- --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
- --clip-further: calc(100% + 1px);
- --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;
-
- width: var(--thumb-width, var(--thumb-height));
- background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);
- background-color: currentColor;
- box-shadow: var(--box-fill);
- border-radius: var(--thumb-width, var(--thumb-height));
-
- filter: brightness(100%);
- clip-path: polygon(
- 100% -1px,
- var(--clip-edges) -1px,
- 0 var(--clip-top),
- -100vmax var(--clip-top),
- -100vmax var(--clip-bottom),
- 0 var(--clip-bottom),
- var(--clip-edges) 100%,
- var(--clip-further) var(--clip-further)
- );
-}
-
-input[type="range"]:hover::-webkit-slider-thumb {
- filter: brightness(var(--brightness-hover));
- cursor: grab;
-}
-
-input[type="range"]:active::-webkit-slider-thumb {
- filter: brightness(var(--brightness-down));
- cursor: grabbing;
-}
-
-input[type="range"]::-webkit-slider-runnable-track {
- background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
-}
-
-input[type="range"]:disabled::-webkit-slider-thumb {
- cursor: not-allowed;
-}
-
-/* === Firefox specific styles === */
-input[type="range"],
-input[type="range"]::-moz-range-track,
-input[type="range"]::-moz-range-thumb {
- appearance: none;
- transition: all ease 100ms;
- height: var(--thumb-height);
-}
-
-input[type="range"]::-moz-range-track,
-input[type="range"]::-moz-range-thumb,
-input[type="range"]::-moz-range-progress {
- background: #fff0;
-}
-
-input[type="range"]::-moz-range-thumb {
- background: currentColor;
- border: 0;
- width: var(--thumb-width, var(--thumb-height));
- border-radius: var(--thumb-width, var(--thumb-height));
- cursor: grab;
-}
-
-input[type="range"]:active::-moz-range-thumb {
- cursor: grabbing;
-}
-
-input[type="range"]::-moz-range-track {
- width: 100%;
- background: var(--track-color);
-}
-
-input[type="range"]::-moz-range-progress {
- appearance: none;
- background: currentColor;
- transition-delay: 30ms;
-}
-
-input[type="range"]::-moz-range-track,
-input[type="range"]::-moz-range-progress {
- height: calc(var(--track-height) + 1px);
- border-radius: var(--track-height);
-}
-
-input[type="range"]::-moz-range-thumb,
-input[type="range"]::-moz-range-progress {
- filter: brightness(100%);
-}
-
-input[type="range"]:hover::-moz-range-thumb,
-input[type="range"]:hover::-moz-range-progress {
- filter: brightness(var(--brightness-hover));
-}
-
-input[type="range"]:active::-moz-range-thumb,
-input[type="range"]:active::-moz-range-progress {
- filter: brightness(var(--brightness-down));
-}
-
-input[type="range"]:disabled::-moz-range-thumb {
- cursor: not-allowed;
-}
-
-/* all of the input range stuff is from this guy*/
-/* Shout out to them https://codepen.io/ShadowShahriar/pen/zYPPYrQ */
diff --git a/styles/stable-diffusion-web-ui/flavors/mocha.css b/styles/stable-diffusion-web-ui/flavors/mocha.css
deleted file mode 100644
index c81155c7a0..0000000000
--- a/styles/stable-diffusion-web-ui/flavors/mocha.css
+++ /dev/null
@@ -1,567 +0,0 @@
-:root,
-*,
-#context-menu {
- --rosewater: #f5e0dc;
- --flamingo: #f2cdcd;
- --pink: #f5c2e7;
- --mauve: #cba6f7;
- --red: #f38ba8;
- --maroon: #eba0ac;
- --peach: #fab387;
- --yellow: #f9e2af;
- --green: #a6e3a1;
- --teal: #94e2d5;
- --sky: #89dceb;
- --sapphire: #74c7ec;
- --lavender: #b4befe;
- --blue: #89b4fa;
- --text: #cdd6f4;
- --subtext1: #bac2de;
- --subtext0: #a6adc8;
- --overlay2: #9399b2;
- --overlay1: #7f849c;
- --overlay0: #6c7086;
- --surface2: #585b70;
- --surface1: #45475a;
- --surface0: #313244;
- --base: #1e1e2e;
- --mantle: #181825;
- --crust: #11111b;
- --shadow: #010409;
- --accent: var(--maroon);
- color-scheme: dark;
-}
-
-select, option {
- background-color: var(--base);
-}
-
-#setting_sd_model_checkpoint > :first-child{
- background-color: var(--base);
-}
-
-#txt2img_prompt_container,
-#img2img_prompt_container {
- background-color: var(--mantle);
-}
-
-
-.dark .bg-white\/90, .bg-white\/90 {
-background-color: var(--base);
-}
-
-.dark fieldset span.text-gray-500, fieldset span.text-gray-500,
-.dark .gr-block.gr-box span.text-gray-500, .gr-block.gr-box span.text-gray-500,
-.dark label.block span, label.block span {
-background-color: var(--base);
-border: transparent;
-}
-
-.dark .dark\:text-gray-200, .\:text-gray-200{
-color: var(--text);
-}
-
-.dark .dark\:bg-gray-950, .\:bg-gray-950 {
- background-color: var(--crust);
-}
-
-.dark .dark\:bg-gray-900, .\:bg-gray-900 {
- background-color: var(--base);
- border-radius: 10px;
-}
-
-.dark .dark\:border-gray-700, .\:border-gray-700 {
- border-color: var(--surface0);
-}
-
-.dark .gr-panel, .gr-panel {
- background-color: var(--mantle);
-}
-
-
-textarea, .gr-text-input {
- background-color: var(--base) !important;
-}
-
-.dark .bg-white, .bg-white {
- background-color: var(--mantle);
-}
-
-.dark .gr-compact, .gr-compact {
- background-color: var(--base);
-}
-
-.dark .gr-input, .gr-input {
- border-color: var(--surface0);
-}
-.dark .gr-form, .gr-form,
-.dark .gr-box, .gr-box {
- background-color: transparent;
- color: var(--text);
-}
-.dark .gr-check-radio, .gr-check-radio {
- background-color: var(--base);
-}
-
-.dark .gr-check-radio:focus, .gr-check-radio:focus,
-.dark .gr-check-radio:checked, .gr-check-radio:checked {
- background-color: var(--accent);
-}
-
-.dark .gr-button-primary:hover, .gr-button-primary:hover {
-filter: brightness(130%);
-}
-.dark .gr-button-primary, .gr-button-primary {
-background-color: var(--accent) !important;
-color: var(--shadow)
-}
-
-
-.dark .gr-button-secondary:hover, .gr-button-secondary:hover {
-filter: brightness(120%);
-}
-
-button, input, optgroup, select, textarea {
-color: var(--accent);
-}
-
-.dark .gr-input-label, .gr-input-label,
-.dark .gr-button-secondary,.gr-button-secondary,
-.gr-input-label,
-.gr-button-secondary {
- --tw-gradient-from: none;
- --tw-gradient-to: none;
- --tw-gradient-stops: none;
- background-color: var(--base);
- color: var(--text)
-}
-
-.gr-button,
-.dark .gr-button {
-border-color:var(--surface0);
-background-color: var(--base);
-background-image: unset;
-}
-
-
-.livePreview {
- background-color: var(--base) !important;
- height: 60vh !important;
- width: 100% !important;
- border-radius: 10px !important;
-}
-
-.gr-padded {
-padding: .825rem .75rem;
-}
-
-
-#mode_extras > :first-child > .bg-white {
-background-color: var(--base);
-}
-
-#interrogate_col {
-justify-content: center;
-gap: 10px;
-/* background: var(--base); */
-/* border-top-left-radius: 10px !important; */
-/* border-top-right-radius: 10px !important; */
-/* padding-top: 20px; */
-}
-
-#txt2img_toprow,
-#img2img_toprow {
-background-color: unset;
-}
-
-#txt2img_actions_column, #img2img_actions_column {
-padding: 10px;
-margin: 5px;
-border-radius: 10px !important;
-background-color: var(--base);
-}
-
-#img_inpaint_mask > div:nth-child(3),
-#img_inpaint_base > div:nth-child(3){
-border-width: 1px;
-border-color:var(--surface0);
-
-}
-
-#img2img_settings {
-border-radius: 10px;
-}
-
-#mode_img2img > :not(:first-child) {
-border-width: 0px;
-}
-
-
-#txt2img_gallery,
-#img2img_gallery,
-#extras_gallery {
-background-color: var(--base) !important;
-}
-
-#img2img_copy_to_img2img > :not(:first-child) {
-border-width: 1px !important;
-border-color: var(--surface0) !important;
-border-radius: 10px !important;
-margin-left: 10px;
-}
-
-#txt2img_interrupt, #img2img_interrupt {
-background-color: var(--red) !important;
-color: var(--mantle);
-}
-
-#txt2img_skip, #img2img_skip {
-background-color: var(--maroon) !important;
-color: var(--mantle);
-}
-
-#txt2img_batch_count,
-#txt2img_width {
- margin-bottom: 0.625vw;
-}
-
-#txt2img_script_container > div > div {
- margin: 0px 1vh 0.9vw 1vh;
-}
-
-#txt2img_script_container:last-child > div{
- margin: unset;
-}
-
-.boder,
-.dark .border, .border,
-.dark .border-gray-100, .border-gray-100,
-.dark .border-gray-200, .border-gray-200,
-.dark .border-gray-300, .border-gray-300,
-.dark .\!border, .\!border,
-.dark .\!border-gray-300, .\!border-gray-300 {
- border-color: var(--surface0);
-}
-
-
-.container {
-background-color: var(--crust);
-}
-
-fieldset span.text-gray-500,
-.gr-block.gr-box span.text-gray-500,
-label.block span {
-box-shadow: unset;
-}
-
-.dark .text-gray-500, .text-gray-500 {
-color: var(--text);
-}
-
-.dark fieldset span.text-gray-500, fieldset span.text-gray-500,
-.dark .gr-block.gr-box, .gr-block.gr-box,
-span.text-gray-500,
-.dark label.block span, label.block span {
- background-color: transparent;
- border: transparent;
-}
-
-.dark .text-gray-700, .text-gray-700,
-.dark .text-gray-800, .text-gray-800,
-.dark .text-gray-900, .text-gray-900,
-.dark .\!text-gray-700, .\!text-gray-700,
-.dark .\!text-gray-800, .\!text-gray-800 {
-color: var(--text);
-}
-
-#txt2img_settings > div {
- margin-top: 2vh;
- flex-grow: 0;
- min-width: 30%;
-}
-
-#tabs > :first-child {
- background-color: var(--crust);
-}
-
-#tabs{
- background-color: var(--mantle);
-}
-
-#tab_txt2img > div {
- background-color: var(--mantle);
-}
-
-#tabs > div{
- border-width: 0px !important;
- border-color:var(--surface0);
-}
-
-#tabs > div:nth-child(1) {
- flex-wrap: wrap-reverse;
- background-color: var(--crust);
-}
-.tabs > :first-child {
- border: none !important;
- margin-bottom: -1px;
- gap: 3px 0px;
- background-color: var(--mantle);
- padding-top: 5px;
- z-index: 10;
-}
-
-#img2img_img2img_tab {
-border-width: 0px !important;
-}
-
-#mode_img2img > div:nth-child(1) > .bg-white {
-background-color: var(--base);
-}
-
-#tab_extensions table td, #tab_extensions table th {
-border: 1px solid var(--surface0);
-}
-
-#extras_resize_mode > :first-child {
-background-color: var(--base);
-}
-
-#extras_resize_mode > :not(:first-child) {
-background-color: var(--mantle) !important;
-padding-top: 20px;
-border-color: transparent;
-border-radius: 0px 10px 10px 10px;
-margin-bottom: 20px;
-
-}
-
-.tabs > :first-child > button {
- border-radius: 8px 8px 0px 0px;
- /* outline: 1px solid var(--base) !important; */
- border-color: var(--surface0);
- border-width: 0px;
- border-bottom-width: 0px;
-}
-
-
-#quicksettings {
- background-color: transparent;
-}
-
-input[type="range"]::-ms-track {
- background: transparent;
-}
-
-input[type="range"]::-ms-fill-lower {
- background: var(--accent);
- border-radius: 10px;
-}
-input[type="range"]::-ms-fill-upper {
- background: var(--overlay0);
- border-radius: 10px;
-}
-
-input[type="range"]:focus::-ms-fill-lower {
- background: var(--accent);
-}
-input[type="range"]:focus::-ms-fill-upper {
- background: var(--overlay0);
-}
-
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
- -webkit-appearance: none;
- margin: 0;
-}
-
-/* Firefox */
-input[type="number"] {
- -moz-appearance: textfield;
-}
-.gr-box > div > div > input.gr-text-input {
- width: 4em;
-}
-
-.progressDiv .progress {
- background: var(--accent);
- color: var(--shadow);
-}
-
-.dark .progressDiv, .progressDiv {
- background-color: var(--surface0);
-}
-
-input[type="range"] {
- font-size: 1.5rem;
-}
-
-input[type="range"] {
- color: var(--accent);
- --thumb-height: 0.5em;
- --track-height: 0.125em;
- --track-color: var(--surface0);
- --brightness-hover: 130%;
- --brightness-down: 80%;
- --clip-edges: 0.125em;
-}
-
-input[type="range"].win10-thumb {
- color: var(--accent);
-
- --thumb-height: 0.5em;
- --thumb-width: 0.5em;
- --clip-edges: 0.0125em;
-}
-
-@media (prefers-color-scheme: dark) {
- input[type="range"] {
- color: var(--accent);
- --track-color: var(--surface0);
- }
-
- input[type="range"].win10-thumb {
- color: var(--accent);
- }
-}
-
-/* === range commons === */
-input[type="range"] {
- position: relative;
- background: #fff0;
- overflow: hidden;
-}
-
-input[type="range"]:active {
- cursor: grabbing;
-}
-
-input[type="range"]:disabled {
- filter: grayscale(1);
- opacity: 0.3;
- cursor: not-allowed;
-}
-
-/* === WebKit specific styles === */
-input[type="range"],
-input[type="range"]::-webkit-slider-runnable-track,
-input[type="range"]::-webkit-slider-thumb {
- -webkit-appearance: none;
- transition: all ease 100ms;
- height: var(--thumb-height);
-}
-
-input[type="range"]::-webkit-slider-runnable-track,
-input[type="range"]::-webkit-slider-thumb {
- position: relative;
-}
-
-input[type="range"]::-webkit-slider-thumb {
- --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
- --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
- --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
- --clip-further: calc(100% + 1px);
- --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;
-
- width: var(--thumb-width, var(--thumb-height));
- background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);
- background-color: currentColor;
- box-shadow: var(--box-fill);
- border-radius: var(--thumb-width, var(--thumb-height));
-
- filter: brightness(100%);
- clip-path: polygon(
- 100% -1px,
- var(--clip-edges) -1px,
- 0 var(--clip-top),
- -100vmax var(--clip-top),
- -100vmax var(--clip-bottom),
- 0 var(--clip-bottom),
- var(--clip-edges) 100%,
- var(--clip-further) var(--clip-further)
- );
-}
-
-input[type="range"]:hover::-webkit-slider-thumb {
- filter: brightness(var(--brightness-hover));
- cursor: grab;
-}
-
-input[type="range"]:active::-webkit-slider-thumb {
- filter: brightness(var(--brightness-down));
- cursor: grabbing;
-}
-
-input[type="range"]::-webkit-slider-runnable-track {
- background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
-}
-
-input[type="range"]:disabled::-webkit-slider-thumb {
- cursor: not-allowed;
-}
-
-/* === Firefox specific styles === */
-input[type="range"],
-input[type="range"]::-moz-range-track,
-input[type="range"]::-moz-range-thumb {
- appearance: none;
- transition: all ease 100ms;
- height: var(--thumb-height);
-}
-
-input[type="range"]::-moz-range-track,
-input[type="range"]::-moz-range-thumb,
-input[type="range"]::-moz-range-progress {
- background: #fff0;
-}
-
-input[type="range"]::-moz-range-thumb {
- background: currentColor;
- border: 0;
- width: var(--thumb-width, var(--thumb-height));
- border-radius: var(--thumb-width, var(--thumb-height));
- cursor: grab;
-}
-
-input[type="range"]:active::-moz-range-thumb {
- cursor: grabbing;
-}
-
-input[type="range"]::-moz-range-track {
- width: 100%;
- background: var(--track-color);
-}
-
-input[type="range"]::-moz-range-progress {
- appearance: none;
- background: currentColor;
- transition-delay: 30ms;
-}
-
-input[type="range"]::-moz-range-track,
-input[type="range"]::-moz-range-progress {
- height: calc(var(--track-height) + 1px);
- border-radius: var(--track-height);
-}
-
-input[type="range"]::-moz-range-thumb,
-input[type="range"]::-moz-range-progress {
- filter: brightness(100%);
-}
-
-input[type="range"]:hover::-moz-range-thumb,
-input[type="range"]:hover::-moz-range-progress {
- filter: brightness(var(--brightness-hover));
-}
-
-input[type="range"]:active::-moz-range-thumb,
-input[type="range"]:active::-moz-range-progress {
- filter: brightness(var(--brightness-down));
-}
-
-input[type="range"]:disabled::-moz-range-thumb {
- cursor: not-allowed;
-}
-
-/* all of the input range stuff is from this guy*/
-/* Shout out to them https://codepen.io/ShadowShahriar/pen/zYPPYrQ */
diff --git a/styles/stable-diffusion-web-ui/scripts/main.py b/styles/stable-diffusion-web-ui/scripts/main.py
deleted file mode 100644
index 7d2e2cbd81..0000000000
--- a/styles/stable-diffusion-web-ui/scripts/main.py
+++ /dev/null
@@ -1,50 +0,0 @@
-import os
-import re
-import shutil
-import gradio as gr
-from modules import script_callbacks
-from modules import shared, scripts
-import modules.scripts as scripts
-
-accents = ['rosewater', 'flamingo', 'pink' , 'mauve' ,'red', 'maroon' ,'peach', 'yellow', 'green', 'teal', 'sky', 'blue', 'sapphire', 'lavender']
-flavors = ['latte', 'frappe', 'macchiato', 'mocha']
-script_path = os.path.dirname(os.path.dirname(os.path.realpath(__file__)))
-
-def on_ui_settings():
- section = ('ctp', 'Catppuccin Theme')
- shared.opts.add_option("ctp_flavor",
- shared.OptionInfo(
- default='mocha',
- label="Catppuccin Flavor",
- component=gr.Radio,
- component_args={"choices": flavors},
- onchange=on_ui_settings_change,
- section=section))
-
- shared.opts.add_option("accent_color",
- shared.OptionInfo(
- default='maroon',
- label='Accent',
- component=gr.Radio,
- component_args={"choices": accents},
- onchange=on_accent_color_change,
- section=section
- ))
-
-def on_accent_color_change():
- pattern = re.compile(r"--accent:\s*(.*)")
- # replace the accent color
- with open(os.path.join(script_path,'style.css'), "r+") as file:
- text = re.sub(pattern, f'--accent: var(--{shared.opts.accent_color});', file.read(), count=1)
- file.seek(0)
- file.write(text)
- file.truncate()
-
-def on_ui_settings_change():
- # Move css over
- shutil.copy(os.path.join(script_path,f'flavors/{shared.opts.ctp_flavor}.css'), os.path.join(script_path, 'style.css'))
-
- # reappply accent color
- on_accent_color_change()
-
-script_callbacks.on_ui_settings(on_ui_settings)
\ No newline at end of file
diff --git a/styles/stable-diffusion-web-ui/style.css b/styles/stable-diffusion-web-ui/style.css
deleted file mode 100644
index 71013307d2..0000000000
--- a/styles/stable-diffusion-web-ui/style.css
+++ /dev/null
@@ -1,565 +0,0 @@
-:root,
-*,
-#context-menu {
- --rosewater: #f5e0dc;
- --flamingo: #f2cdcd;
- --pink: #f5c2e7;
- --mauve: #cba6f7;
- --red: #f38ba8;
- --maroon: #eba0ac;
- --peach: #fab387;
- --yellow: #f9e2af;
- --green: #a6e3a1;
- --teal: #94e2d5;
- --sky: #89dceb;
- --sapphire: #74c7ec;
- --lavender: #b4befe;
- --blue: #89b4fa;
- --text: #cdd6f4;
- --subtext1: #bac2de;
- --subtext0: #a6adc8;
- --overlay2: #9399b2;
- --overlay1: #7f849c;
- --overlay0: #6c7086;
- --surface2: #585b70;
- --surface1: #45475a;
- --surface0: #313244;
- --base: #1e1e2e;
- --mantle: #181825;
- --crust: #11111b;
- --shadow: #010409;
- --accent: var(--maroon);
- color-scheme: dark;
-}
-select, option {
- background-color: var(--base);
-}
-
-#setting_sd_model_checkpoint > :first-child{
- background-color: var(--base);
-}
-
-#txt2img_prompt_container,
-#img2img_prompt_container {
- background-color: var(--mantle);
-}
-
-
-.dark .bg-white\/90, .bg-white\/90 {
-background-color: var(--base);
-}
-
-.dark fieldset span.text-gray-500, fieldset span.text-gray-500,
-.dark .gr-block.gr-box span.text-gray-500, .gr-block.gr-box span.text-gray-500,
-.dark label.block span, label.block span {
-background-color: var(--base);
-border: transparent;
-}
-
-.dark .dark\:text-gray-200, .\:text-gray-200{
-color: var(--text);
-}
-
-.dark .dark\:bg-gray-950, .\:bg-gray-950 {
- background-color: var(--crust);
-}
-
-.dark .dark\:bg-gray-900, .\:bg-gray-900 {
- background-color: var(--base);
- border-radius: 10px;
-}
-
-.dark .dark\:border-gray-700, .\:border-gray-700 {
- border-color: var(--surface0);
-}
-
-.dark .gr-panel, .gr-panel {
- background-color: var(--mantle);
-}
-
-
-textarea, .gr-text-input {
- background-color: var(--base) !important;
-}
-
-.dark .bg-white, .bg-white {
- background-color: var(--mantle);
-}
-
-.dark .gr-compact, .gr-compact {
- background-color: var(--base);
-}
-
-.dark .gr-input, .gr-input {
- border-color: var(--surface0);
-}
-.dark .gr-form, .gr-form,
-.dark .gr-box, .gr-box {
- background-color: transparent;
- color: var(--text);
-}
-.dark .gr-check-radio, .gr-check-radio {
- background-color: var(--base);
-}
-
-.dark .gr-check-radio:checked, .gr-check-radio:checked {
- background-color: var(--accent);
-}
-
-.dark .gr-button-primary:hover, .gr-button-primary:hover {
-filter: brightness(130%);
-}
-.dark .gr-button-primary, .gr-button-primary {
-background-color: var(--accent) !important;
-color: var(--shadow)
-}
-
-
-.dark .gr-button-secondary:hover, .gr-button-secondary:hover {
-filter: brightness(120%);
-}
-
-button, input, optgroup, select, textarea {
-color: var(--accent);
-}
-
-.dark .gr-input-label, .gr-input-label,
-.dark .gr-button-secondary,.gr-button-secondary,
-.gr-input-label,
-.gr-button-secondary {
- --tw-gradient-from: none;
- --tw-gradient-to: none;
- --tw-gradient-stops: none;
- background-color: var(--base);
- color: var(--text)
-}
-
-.gr-button,
-.dark .gr-button {
-border-color:var(--surface0);
-background-color: var(--base);
-background-image: unset;
-}
-
-
-.livePreview {
- background-color: var(--base) !important;
- height: 60vh !important;
- width: 100% !important;
- border-radius: 10px !important;
-}
-
-.gr-padded {
-padding: .825rem .75rem;
-}
-
-
-#mode_extras > :first-child > .bg-white {
-background-color: var(--base);
-}
-
-#interrogate_col {
-justify-content: center;
-gap: 10px;
-/* background: var(--base); */
-/* border-top-left-radius: 10px !important; */
-/* border-top-right-radius: 10px !important; */
-/* padding-top: 20px; */
-}
-
-#txt2img_toprow,
-#img2img_toprow {
-background-color: unset;
-}
-
-#txt2img_actions_column, #img2img_actions_column {
-padding: 10px;
-margin: 5px;
-border-radius: 10px !important;
-background-color: var(--base);
-}
-
-#img_inpaint_mask > div:nth-child(3),
-#img_inpaint_base > div:nth-child(3){
-border-width: 1px;
-border-color:var(--surface0);
-
-}
-
-#img2img_settings {
-border-radius: 10px;
-}
-
-#mode_img2img > :not(:first-child) {
-border-width: 0px;
-}
-
-
-#txt2img_gallery,
-#img2img_gallery,
-#extras_gallery {
-background-color: var(--base) !important;
-}
-
-#img2img_copy_to_img2img > :not(:first-child) {
-border-width: 1px !important;
-border-color: var(--surface0) !important;
-border-radius: 10px !important;
-margin-left: 10px;
-}
-
-#txt2img_interrupt, #img2img_interrupt {
-background-color: var(--red) !important;
-color: var(--mantle);
-}
-
-#txt2img_skip, #img2img_skip {
-background-color: var(--maroon) !important;
-color: var(--mantle);
-}
-
-#txt2img_batch_count,
-#txt2img_width {
- margin-bottom: 0.625vw;
-}
-
-#txt2img_script_container > div > div {
- margin: 0px 1vh 0.9vw 1vh;
-}
-
-#txt2img_script_container:last-child > div{
- margin: unset;
-}
-
-.boder,
-.dark .border, .border,
-.dark .border-gray-100, .border-gray-100,
-.dark .border-gray-200, .border-gray-200,
-.dark .border-gray-300, .border-gray-300,
-.dark .\!border, .\!border,
-.dark .\!border-gray-300, .\!border-gray-300 {
- border-color: var(--surface0);
-}
-
-
-.container {
-background-color: var(--crust);
-}
-
-fieldset span.text-gray-500,
-.gr-block.gr-box span.text-gray-500,
-label.block span {
-box-shadow: unset;
-}
-
-.dark .text-gray-500, .text-gray-500 {
-color: var(--text);
-}
-
-.dark fieldset span.text-gray-500, fieldset span.text-gray-500,
-.dark .gr-block.gr-box, .gr-block.gr-box,
-span.text-gray-500,
-.dark label.block span, label.block span {
- background-color: transparent;
- border: transparent;
-}
-
-.dark .text-gray-700, .text-gray-700,
-.dark .text-gray-800, .text-gray-800,
-.dark .text-gray-900, .text-gray-900,
-.dark .\!text-gray-700, .\!text-gray-700,
-.dark .\!text-gray-800, .\!text-gray-800 {
-color: var(--text);
-}
-
-#txt2img_settings > div {
- margin-top: 2vh;
- flex-grow: 0;
- min-width: 30%;
-}
-
-#tabs > :first-child {
- background-color: var(--crust);
-}
-
-#tabs{
- background-color: var(--mantle);
-}
-
-#tab_txt2img > div {
- background-color: var(--mantle);
-}
-
-#tabs > div{
- border-width: 0px !important;
- border-color:var(--surface0);
-}
-
-#tabs > div:nth-child(1) {
- flex-wrap: wrap-reverse;
- background-color: var(--crust);
-}
-.tabs > :first-child {
- border: none !important;
- margin-bottom: -1px;
- gap: 3px 0px;
- background-color: var(--mantle);
- padding-top: 5px;
- z-index: 10;
-}
-
-#img2img_img2img_tab {
-border-width: 0px !important;
-}
-
-#mode_img2img > div:nth-child(1) > .bg-white {
-background-color: var(--base);
-}
-
-#tab_extensions table td, #tab_extensions table th {
-border: 1px solid var(--surface0);
-}
-
-#extras_resize_mode > :first-child {
-background-color: var(--base);
-}
-
-#extras_resize_mode > :not(:first-child) {
-background-color: var(--mantle) !important;
-padding-top: 20px;
-border-color: transparent;
-border-radius: 0px 10px 10px 10px;
-margin-bottom: 20px;
-
-}
-
-.tabs > :first-child > button {
- border-radius: 8px 8px 0px 0px;
- /* outline: 1px solid var(--base) !important; */
- border-color: var(--surface0);
- border-width: 0px;
- border-bottom-width: 0px;
-}
-
-
-#quicksettings {
- background-color: transparent;
-}
-
-input[type="range"]::-ms-track {
- background: transparent;
-}
-
-input[type="range"]::-ms-fill-lower {
- background: var(--accent);
- border-radius: 10px;
-}
-input[type="range"]::-ms-fill-upper {
- background: var(--overlay0);
- border-radius: 10px;
-}
-
-input[type="range"]:focus::-ms-fill-lower {
- background: var(--accent);
-}
-input[type="range"]:focus::-ms-fill-upper {
- background: var(--overlay0);
-}
-
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
- -webkit-appearance: none;
- margin: 0;
-}
-
-/* Firefox */
-input[type="number"] {
- -moz-appearance: textfield;
-}
-.gr-box > div > div > input.gr-text-input {
- width: 4em;
-}
-
-.progressDiv .progress {
- background: var(--accent);
- color: var(--shadow);
-}
-
-.dark .progressDiv, .progressDiv {
- background-color: var(--surface0);
-}
-
-input[type="range"] {
- font-size: 1.5rem;
-}
-
-input[type="range"] {
- color: var(--accent);
- --thumb-height: 0.5em;
- --track-height: 0.125em;
- --track-color: var(--surface0);
- --brightness-hover: 130%;
- --brightness-down: 80%;
- --clip-edges: 0.125em;
-}
-
-input[type="range"].win10-thumb {
- color: var(--accent);
-
- --thumb-height: 0.5em;
- --thumb-width: 0.5em;
- --clip-edges: 0.0125em;
-}
-
-@media (prefers-color-scheme: dark) {
- input[type="range"] {
- color: var(--accent);
- --track-color: var(--surface0);
- }
-
- input[type="range"].win10-thumb {
- color: var(--accent);
- }
-}
-
-/* === range commons === */
-input[type="range"] {
- position: relative;
- background: #fff0;
- overflow: hidden;
-}
-
-input[type="range"]:active {
- cursor: grabbing;
-}
-
-input[type="range"]:disabled {
- filter: grayscale(1);
- opacity: 0.3;
- cursor: not-allowed;
-}
-
-/* === WebKit specific styles === */
-input[type="range"],
-input[type="range"]::-webkit-slider-runnable-track,
-input[type="range"]::-webkit-slider-thumb {
- -webkit-appearance: none;
- transition: all ease 100ms;
- height: var(--thumb-height);
-}
-
-input[type="range"]::-webkit-slider-runnable-track,
-input[type="range"]::-webkit-slider-thumb {
- position: relative;
-}
-
-input[type="range"]::-webkit-slider-thumb {
- --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
- --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
- --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
- --clip-further: calc(100% + 1px);
- --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;
-
- width: var(--thumb-width, var(--thumb-height));
- background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);
- background-color: currentColor;
- box-shadow: var(--box-fill);
- border-radius: var(--thumb-width, var(--thumb-height));
-
- filter: brightness(100%);
- clip-path: polygon(
- 100% -1px,
- var(--clip-edges) -1px,
- 0 var(--clip-top),
- -100vmax var(--clip-top),
- -100vmax var(--clip-bottom),
- 0 var(--clip-bottom),
- var(--clip-edges) 100%,
- var(--clip-further) var(--clip-further)
- );
-}
-
-input[type="range"]:hover::-webkit-slider-thumb {
- filter: brightness(var(--brightness-hover));
- cursor: grab;
-}
-
-input[type="range"]:active::-webkit-slider-thumb {
- filter: brightness(var(--brightness-down));
- cursor: grabbing;
-}
-
-input[type="range"]::-webkit-slider-runnable-track {
- background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
-}
-
-input[type="range"]:disabled::-webkit-slider-thumb {
- cursor: not-allowed;
-}
-
-/* === Firefox specific styles === */
-input[type="range"],
-input[type="range"]::-moz-range-track,
-input[type="range"]::-moz-range-thumb {
- appearance: none;
- transition: all ease 100ms;
- height: var(--thumb-height);
-}
-
-input[type="range"]::-moz-range-track,
-input[type="range"]::-moz-range-thumb,
-input[type="range"]::-moz-range-progress {
- background: #fff0;
-}
-
-input[type="range"]::-moz-range-thumb {
- background: currentColor;
- border: 0;
- width: var(--thumb-width, var(--thumb-height));
- border-radius: var(--thumb-width, var(--thumb-height));
- cursor: grab;
-}
-
-input[type="range"]:active::-moz-range-thumb {
- cursor: grabbing;
-}
-
-input[type="range"]::-moz-range-track {
- width: 100%;
- background: var(--track-color);
-}
-
-input[type="range"]::-moz-range-progress {
- appearance: none;
- background: currentColor;
- transition-delay: 30ms;
-}
-
-input[type="range"]::-moz-range-track,
-input[type="range"]::-moz-range-progress {
- height: calc(var(--track-height) + 1px);
- border-radius: var(--track-height);
-}
-
-input[type="range"]::-moz-range-thumb,
-input[type="range"]::-moz-range-progress {
- filter: brightness(100%);
-}
-
-input[type="range"]:hover::-moz-range-thumb,
-input[type="range"]:hover::-moz-range-progress {
- filter: brightness(var(--brightness-hover));
-}
-
-input[type="range"]:active::-moz-range-thumb,
-input[type="range"]:active::-moz-range-progress {
- filter: brightness(var(--brightness-down));
-}
-
-input[type="range"]:disabled::-moz-range-thumb {
- cursor: not-allowed;
-}
-
-/* all of the input range stuff is from this guy*/
-/* Shout out to them https://codepen.io/ShadowShahriar/pen/zYPPYrQ */
diff --git a/styles/tutanota/README.md b/styles/tutanota/README.md
deleted file mode 100644
index c20ac5ca9e..0000000000
--- a/styles/tutanota/README.md
+++ /dev/null
@@ -1,68 +0,0 @@
-
-
-
- Catppuccin for Tutanota
-
-
-
-
- 
- 
- 
-
-
-
-
- 
-
-
-## Previews
-
-
-๐ป Latte
-
-
-
-๐ชด Frappรฉ
-
-
-
-๐บ Macchiato
-
-
-
-๐ฟ Mocha
-
-
-
-## Usage
-
-> **Note** Set Tutanota's built-in theme to either **light** if you're using Latte or **dark** if you're using the others.
-
-### Stylus
-1. Install Stylus [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/)/[Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) extension.
-2. Enable CSP Patching from Stylus Settings > Advanced.
-3. [Click here to install.](https://github.com/catppuccin/tutanota/raw/main/catppuccin.user.css)
-
-### Stylish
-1. Install Stylish [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/stylish/)/[Chrome](https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe) extension.
-2. Create a new custom Style that applies to `mail.tutanota.com`.
-3. Copy content of [catppuccin.user.css](catppuccin.user.css) and paste to created Style.
-
-## ๐ Thanks to
-
-- [Ryan Cao](https://github.com/ryanccn)
-
-
-
-
-
-
-
-
- Copyright © 2023-present Catppuccin Org
-
-
-
-
-
diff --git a/styles/tutanota/catppuccin.user.css b/styles/tutanota/catppuccin.user.css
index f80c757c81..799f088aae 100644
--- a/styles/tutanota/catppuccin.user.css
+++ b/styles/tutanota/catppuccin.user.css
@@ -1,6 +1,6 @@
/* ==UserStyle==
@name Tutanota Catppuccin
-@namespace github.com/catppuccin/tutanota
+@namespace github.com/catppuccin/userstyles/styles/tutanota
@version 0.0.2
@description Soothing pastel theme for Tutanota
@author Catppuccin
diff --git a/styles/twitch/README.md b/styles/twitch/README.md
deleted file mode 100644
index 98df81ab66..0000000000
--- a/styles/twitch/README.md
+++ /dev/null
@@ -1,62 +0,0 @@
-
-
-
- Catppuccin for Twitch
-
-
-
-
- 
- 
- 
-
-
-
-
- 
-
-
-## Previews
-
-
-๐ป Latte
-
-
-
-๐ชด Frappรฉ
-
-
-
-๐บ Macchiato
-
-
-
-๐ฟ Mocha
-
-
-
-## Usage
-
-1. Install Stylus extension for [Firefox](https://addons.mozilla.org/en-US/firefox/addon/styl-us/), [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) or [Opera](https://addons.opera.com/en-gb/extensions/details/stylus/)
-2. Then install with Stylus ([click on the link](https://raw.githubusercontent.com/catppuccin/twitch/main/src/TwitchCatppuccin.user.css)):
-3. Choose Your accent color by Setting Theme in Stylus Options
-
-NOTE: for latte to work correctly, it's better to use light theme
-
-## ๐ Thanks to
-
-- [mustafakhalaf-git](https://github.com/mustafakhalaf-git)
-
-
-
-
-
-
-
-
- Copyright © 2021-present Catppuccin Org
-
-
-
-
-
diff --git a/styles/twitch/src/TwitchCatppuccin.user.css b/styles/twitch/catppuccin.user.css
similarity index 98%
rename from styles/twitch/src/TwitchCatppuccin.user.css
rename to styles/twitch/catppuccin.user.css
index 6189dd86c6..b3428959a0 100644
--- a/styles/twitch/src/TwitchCatppuccin.user.css
+++ b/styles/twitch/catppuccin.user.css
@@ -1,12 +1,12 @@
/* ==UserStyle==
@name Twitch Catppuccin
-@namespace github.com/catppuccin/twitch
-@homepageURL https://github.com/catppuccin/twitch
+@namespace github.com/catppuccin/userstyles/styles/twitch
+@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/twitch
@version 1.0.4
@description Soothing pastel theme for Twitch
@author Catppuccin - mustafakhalaf-git
@preprocessor stylus
-@updateURL https://github.com/catppuccin/twitch/raw/main/src/TwitchCatppuccin.user.css
+@updateURL https://github.com/catppuccin/twitch/raw/main/catppuccin.user.css
@license GNU-V3.0
@var select lighttheme "Light Variant" ["Latte"]
diff --git a/styles/vercel/README.md b/styles/vercel/README.md
deleted file mode 100644
index 50ee30b261..0000000000
--- a/styles/vercel/README.md
+++ /dev/null
@@ -1,66 +0,0 @@
-
-
-
- Catppuccin for Vercel
-
-
-
-
- 
- 
- 
-
-
-
-
-
-
-
-## Previews
-
-
-๐ป Latte
-
-
-
-๐ชด Frappรฉ
-
-
-
-๐บ Macchiato
-
-
-
-๐ฟ Mocha
-
-
-
-## Usage
-
-### Stylus
-1. Install Stylus [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/styl-us/)/[Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) extension.
-2. Enable CSP Patching from Stylus Settings > Advanced.
-3. [Click here to install.](https://github.com/catppuccin/vercel/raw/main/catppuccin.user.css)
-
-### Stylish
-1. Install Stylish [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/stylish/)/[Chrome](https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe) extension.
-2. Create a new custom Style that applies to `vercel.com`.
-3. Copy content of [catppuccin.user.css](catppuccin.user.css) and paste to created Style.
-
-## ๐ Thanks to
-
-- [Ryan Cao](https://github.com/ryanccn)
-
-
-
-
-
-
-
-
- Copyright © 2021-present Catppuccin Org
-
-
-
-
-
diff --git a/styles/vercel/catppuccin.user.css b/styles/vercel/catppuccin.user.css
index ce21ceb42e..5f458891c0 100644
--- a/styles/vercel/catppuccin.user.css
+++ b/styles/vercel/catppuccin.user.css
@@ -1,6 +1,6 @@
/* ==UserStyle==
@name Vercel Catppuccin
-@namespace github.com/catppuccin/vercel
+@namespace github.com/catppuccin/userstyles/styles/vercel
@version 0.0.2
@description Soothing pastel theme for Vercel
@author Catppuccin
diff --git a/styles/whoogle/.editorconfig b/styles/whoogle/.editorconfig
deleted file mode 100644
index d86ac0270a..0000000000
--- a/styles/whoogle/.editorconfig
+++ /dev/null
@@ -1,34 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# EditorConfig is awesome: https://EditorConfig.org
-
-root = true
-
-[*]
-charset = utf-8
-indent_size = 2
-indent_style = space
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-# go
-[*.go]
-indent_style = tab
-indent_size = 4
-
-# python
-[*.{ini,py,py.tpl,rst}]
-indent_size = 4
-
-# rust
-[*.rs]
-indent_size = 4
-
-# documentation, utils
-[*.{md,mdx,diff}]
-trim_trailing_whitespace = false
-
-# windows shell scripts
-[*.{cmd,bat,ps1}]
-end_of_line = crlf
diff --git a/styles/whoogle/LICENSE b/styles/whoogle/LICENSE
deleted file mode 100644
index 5602ca7fcb..0000000000
--- a/styles/whoogle/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 Catppuccin
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/styles/whoogle/README.md b/styles/whoogle/README.md
deleted file mode 100644
index 4511f30be2..0000000000
--- a/styles/whoogle/README.md
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-
- Catppuccin for Whoogle
-
-
-
-
- 
- 
- 
-
-
-
-
-## Usage
-
-### As an instance user:
-
-1. Choose your flavour!
-2. Go to Configuration and scroll to the bottom.
-3. Under custom css, paste the contents of `css/.css`
-4. Hit the Apply button.
-
-### As an instance host:
-
-1. Choose your flavour!
-2. Add the contents of `env/.env` to either your environment variables or your `whoogle.env`.
-
-## ๐ Thanks to
-
-- [Sanjay Pavan](https://github.com/WitherCubes)
-
-
-
-
-Copyright © 2021-present Catppuccin Org
-
diff --git a/styles/whoogle/assets/preview.webp b/styles/whoogle/assets/preview.webp
deleted file mode 100644
index afba98117a..0000000000
Binary files a/styles/whoogle/assets/preview.webp and /dev/null differ
diff --git a/styles/whoogle/css/frappe.css b/styles/whoogle/css/frappe.css
deleted file mode 100644
index af6b85d55c..0000000000
--- a/styles/whoogle/css/frappe.css
+++ /dev/null
@@ -1,41 +0,0 @@
-:root {
- /* DARK THEME COLORS */
- --whoogle-dark-logo: #c6d0f5;
- --whoogle-dark-page-bg: #303446;
- --whoogle-dark-element-bg: #51576d;
- --whoogle-dark-text: #c6d0f5;
- --whoogle-dark-contrast-text: #b5bfe2;
- --whoogle-dark-secondary-text: #a5adce;
- --whoogle-dark-result-bg: #414559;
- --whoogle-dark-result-title: #babbf1;
- --whoogle-dark-result-url: #f2d5cf;
- --whoogle-dark-result-visited: #ea999c;
-}
-
-#whoogle-w {
- fill: #8caaee;
-}
-
-#whoogle-h {
- fill: #e78284;
-}
-
-#whoogle-o-1 {
- fill: #e5c890;
-}
-
-#whoogle-o-2 {
- fill: #8caaee;
-}
-
-#whoogle-g {
- fill: #a6d189;
-}
-
-#whoogle-l {
- fill: #e78284;
-}
-
-#whoogle-e {
- fill: #e5c890;
-}
diff --git a/styles/whoogle/css/latte.css b/styles/whoogle/css/latte.css
deleted file mode 100644
index 37e32f06fe..0000000000
--- a/styles/whoogle/css/latte.css
+++ /dev/null
@@ -1,41 +0,0 @@
-:root {
- /* LIGHT THEME COLORS */
- --whoogle-logo: #4c4f69;
- --whoogle-page-bg: #eff1f5;
- --whoogle-element-bg: #bcc0cc;
- --whoogle-text: #4c4f69;
- --whoogle-contrast-text: #5c5f77;
- --whoogle-secondary-text: #6c6f85;
- --whoogle-result-bg: #ccd0da;
- --whoogle-result-title: #7287fd;
- --whoogle-result-url: #dc8a78;
- --whoogle-result-visited: #e64553;
-}
-
-#whoogle-w {
- fill: #1e66f5;
-}
-
-#whoogle-h {
- fill: #d20f39;
-}
-
-#whoogle-o-1 {
- fill: #df8e1d;
-}
-
-#whoogle-o-2 {
- fill: #1e66f5;
-}
-
-#whoogle-g {
- fill: #40a02b;
-}
-
-#whoogle-l {
- fill: #d20f39;
-}
-
-#whoogle-e {
- fill: #df8e1d;
-}
diff --git a/styles/whoogle/css/macchiato.css b/styles/whoogle/css/macchiato.css
deleted file mode 100644
index c934765d97..0000000000
--- a/styles/whoogle/css/macchiato.css
+++ /dev/null
@@ -1,41 +0,0 @@
-:root {
- /* DARK THEME COLORS */
- --whoogle-dark-logo: #cad3f5;
- --whoogle-dark-page-bg: #24273a;
- --whoogle-dark-element-bg: #494d64;
- --whoogle-dark-text: #cad3f5;
- --whoogle-dark-contrast-text: #b8c0e0;
- --whoogle-dark-secondary-text: #a5adcb;
- --whoogle-dark-result-bg: #363a4f;
- --whoogle-dark-result-title: #b7bdf8;
- --whoogle-dark-result-url: #f4dbd6;
- --whoogle-dark-result-visited: #ee99a0;
-}
-
-#whoogle-w {
- fill: #8aadf4;
-}
-
-#whoogle-h {
- fill: #ed8796;
-}
-
-#whoogle-o-1 {
- fill: #eed49f;
-}
-
-#whoogle-o-2 {
- fill: #8aadf4;
-}
-
-#whoogle-g {
- fill: #a6da95;
-}
-
-#whoogle-l {
- fill: #ed8796;
-}
-
-#whoogle-e {
- fill: #eed49f;
-}
diff --git a/styles/whoogle/css/mocha.css b/styles/whoogle/css/mocha.css
deleted file mode 100644
index 8bc5b7790e..0000000000
--- a/styles/whoogle/css/mocha.css
+++ /dev/null
@@ -1,41 +0,0 @@
-:root {
- /* DARK THEME COLORS */
- --whoogle-dark-logo: #cdd6f4;
- --whoogle-dark-page-bg: #1e1e2e;
- --whoogle-dark-element-bg: #45475a;
- --whoogle-dark-text: #cdd6f4;
- --whoogle-dark-contrast-text: #bac2de;
- --whoogle-dark-secondary-text: #a6adc8;
- --whoogle-dark-result-bg: #313244;
- --whoogle-dark-result-title: #b4befe;
- --whoogle-dark-result-url: #f5e0dc;
- --whoogle-dark-result-visited: #eba0ac;
-}
-
-#whoogle-w {
- fill: #89b4fa;
-}
-
-#whoogle-h {
- fill: #f38ba8;
-}
-
-#whoogle-o-1 {
- fill: #f9e2af;
-}
-
-#whoogle-o-2 {
- fill: #89b4fa;
-}
-
-#whoogle-g {
- fill: #a6e3a1;
-}
-
-#whoogle-l {
- fill: #f38ba8;
-}
-
-#whoogle-e {
- fill: #f9e2af;
-}
diff --git a/styles/whoogle/env/frappe.env b/styles/whoogle/env/frappe.env
deleted file mode 100644
index 44bbd8258c..0000000000
--- a/styles/whoogle/env/frappe.env
+++ /dev/null
@@ -1 +0,0 @@
-WHOOGLE_CONFIG_STYLE=":root { /* DARK THEME COLORS */ --whoogle-dark-logo: #c6d0f5; --whoogle-dark-page-bg: #303446; --whoogle-dark-element-bg: #51576d; --whoogle-dark-text: #c6d0f5; --whoogle-dark-contrast-text: #b5bfe2; --whoogle-dark-secondary-text: #a5adce; --whoogle-dark-result-bg: #414559; --whoogle-dark-result-title: #babbf1; --whoogle-dark-result-url: #f2d5cf; --whoogle-dark-result-visited: #ea999c; } #whoogle-w { fill: #8caaee; } #whoogle-h { fill: #e78284; } #whoogle-o-1 { fill: #e5c890; } #whoogle-o-2 { fill: #8caaee; } #whoogle-g { fill: #a6d189; } #whoogle-l { fill: #e78284; } #whoogle-e { fill: #e5c890; }"
diff --git a/styles/whoogle/env/latte.env b/styles/whoogle/env/latte.env
deleted file mode 100644
index 4deddae752..0000000000
--- a/styles/whoogle/env/latte.env
+++ /dev/null
@@ -1 +0,0 @@
-WHOOGLE_CONFIG_STYLE=":root { /* LIGHT THEME COLORS */ --whoogle-logo: #4c4f69; --whoogle-page-bg: #eff1f5; --whoogle-element-bg: #bcc0cc; --whoogle-text: #4c4f69; --whoogle-contrast-text: #5c5f77; --whoogle-secondary-text: #6c6f85; --whoogle-result-bg: #ccd0da; --whoogle-result-title: #7287fd; --whoogle-result-url: #dc8a78; --whoogle-result-visited: #e64553; } #whoogle-w { fill: #1e66f5; } #whoogle-h { fill: #d20f39; } #whoogle-o-1 { fill: #df8e1d; } #whoogle-o-2 { fill: #1e66f5; } #whoogle-g { fill: #40a02b; } #whoogle-l { fill: #d20f39; } #whoogle-e { fill: #df8e1d; }"
diff --git a/styles/whoogle/env/macchiato.env b/styles/whoogle/env/macchiato.env
deleted file mode 100644
index d8b52070bc..0000000000
--- a/styles/whoogle/env/macchiato.env
+++ /dev/null
@@ -1 +0,0 @@
-WHOOGLE_CONFIG_STYLE=":root { /* DARK THEME COLORS */ --whoogle-dark-logo: #cad3f5; --whoogle-dark-page-bg: #24273a; --whoogle-dark-element-bg: #494d64; --whoogle-dark-text: #cad3f5; --whoogle-dark-contrast-text: #b8c0e0; --whoogle-dark-secondary-text: #a5adcb; --whoogle-dark-result-bg: #363a4f; --whoogle-dark-result-title: #b7bdf8; --whoogle-dark-result-url: #f4dbd6; --whoogle-dark-result-visited: #ee99a0; } #whoogle-w { fill: #8aadf4; } #whoogle-h { fill: #ed8796; } #whoogle-o-1 { fill: #eed49f; } #whoogle-o-2 { fill: #8aadf4; } #whoogle-g { fill: #a6da95; } #whoogle-l { fill: #ed8796; } #whoogle-e { fill: #eed49f; }"
diff --git a/styles/whoogle/env/mocha.env b/styles/whoogle/env/mocha.env
deleted file mode 100644
index ebd0b28034..0000000000
--- a/styles/whoogle/env/mocha.env
+++ /dev/null
@@ -1 +0,0 @@
-WHOOGLE_CONFIG_STYLE=":root { /* DARK THEME COLORS */ --whoogle-dark-logo: #cdd6f4; --whoogle-dark-page-bg: #1e1e2e; --whoogle-dark-element-bg: #45475a; --whoogle-dark-text: #cdd6f4; --whoogle-dark-contrast-text: #bac2de; --whoogle-dark-secondary-text: #a6adc8; --whoogle-dark-result-bg: #313244; --whoogle-dark-result-title: #b4befe; --whoogle-dark-result-url: #f5e0dc; --whoogle-dark-result-visited: #eba0ac; } #whoogle-w { fill: #89b4fa; } #whoogle-h { fill: #f38ba8; } #whoogle-o-1 { fill: #f9e2af; } #whoogle-o-2 { fill: #89b4fa; } #whoogle-g { fill: #a6e3a1; } #whoogle-l { fill: #f38ba8; } #whoogle-e { fill: #f9e2af; }"
diff --git a/styles/wikiwand/README.md b/styles/wikiwand/README.md
deleted file mode 100644
index de393c8103..0000000000
--- a/styles/wikiwand/README.md
+++ /dev/null
@@ -1,65 +0,0 @@
-
-
-
- Catppuccin for Wikiwand
-
-
-
-
- 
- 
- 
-
-
-
- 
-
-
-## Previews
-
-
-๐ป Latte
-
-
-
-๐ชด Frappรฉ
-
-
-
-๐บ Macchiato
-
-
-
-๐ฟ Mocha
-
-
-
-## Usage
-
-[๐ป Latte](https://userstyles.world/style/7272/catppuccin-latte-wikiwand)
-
-[๐ชด Frappรฉ](https://userstyles.world/style/7271/catppuccin-frappe-wikiwand)
-
-[๐บ Macchiato](https://userstyles.world/style/7270/catppuccin-macchiato-wikiwand)
-
-[๐ฟ Mocha](https://userstyles.world/style/7269/catppuccin-mocha-wikiwand)
-
-_You can change the accent by changing `--accent: to var(--accent_HERE)` at the bottom of `:root`_
-
-## ๐ Thanks to
-
-- [Tnixc](https://github.com/tnixc)
-
-
-
-
-
-
-
-
- Copyright © 2021-present Catppuccin Org
-
-
-
-
-
diff --git a/styles/wikiwand/assets/.DS_Store b/styles/wikiwand/assets/.DS_Store
deleted file mode 100644
index 5008ddfcf5..0000000000
Binary files a/styles/wikiwand/assets/.DS_Store and /dev/null differ
diff --git a/styles/wikiwand/latte.css b/styles/wikiwand/catppuccin.user.css
similarity index 50%
rename from styles/wikiwand/latte.css
rename to styles/wikiwand/catppuccin.user.css
index bc6a977757..e568a6f354 100644
--- a/styles/wikiwand/latte.css
+++ b/styles/wikiwand/catppuccin.user.css
@@ -1,125 +1,107 @@
/* ==UserStyle==
-@name catppuccin-latte-wikiwand
-@namespace USO Archive
-@author tnixc
+@name Wikiwand Catppuccin
+@namespace github.com/catppuccin/userstyles/styles/wikiwand
+@version 1.0.0
@description Soothing pastel theme for wikiwand
-@version 1.0
-@license MIT
-@preprocessor uso
+@author Catppuccin
+@preprocessor stylus
+@var select theme "Theme" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"]
+@var select accent "Accent" ["'rosewater'", "'flamingo'", "'pink'", "'mauve'", "'red'", "'maroon'", "'peach'", "'yellow'", "'green'", "'teal'", "'blue'*", "'sapphire'", "'sky'", "'lavender'"]
==/UserStyle== */
-/* ---------- Catppuccin-latte-wikiwand ---------- */
-/* ---------- v1.0 / 12-11-2022 ---------- */
-/* by tnixc */
-@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("wikiwand.com") {
- /* ============= UNIFORM BACKGROUND COLORS ============= */
- /* ============= UNIFORM BACKGROUND COLORS ============= */
- :root {
- --rosewater: #de9584;
- --flamingo: #dd7878;
- --pink: #ec83d0;
- --mauve: #8839ef;
- --red: #d20f39;
- --maroon: #e64553;
- --peach: #fe640b;
- --yellow: #e49320;
- --green: #40a02b;
- --teal: #179299;
- --sky: #04a5e5;
- --sapphire: #209fb5;
- --blue: #2a6ef5;
- --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;
- --accent: var(--rosewater);
- }
+ @import url("https://unpkg.com/@catppuccin/palette@0.1.6/css/catppuccin.css");
+ :root {
+ --ctp-red: var(--ctp- + theme + "-red");
+ --ctp-yellow: var(--ctp- + theme + "-yellow");
+ --ctp-text: var(--ctp- + theme + "-text");
+ --ctp-subtext0: var(--ctp- + theme + "-subtext0");
+ --ctp-overlay0: var(--ctp- + theme + "-overlay0");
+ --ctp-surface2: var(--ctp- + theme + "-surface2");
+ --ctp-surface1: var(--ctp- + theme + "-surface1");
+ --ctp-surface0: var(--ctp- + theme + "-surface0");
+ --ctp-base: var(--ctp- + theme + "-base");
+ --ctp-mantle: var(--ctp- + theme + "-mantle");
+ --ctp-crust: var(--ctp- + theme + "-crust");
+ --accent: var(--ctp- + theme + "-" + accent);
+ }
+ .root_dark__oGh5X,
.root_light__Inhun {
- --color-bg: var(--base);
- --color-text: var(--text);
- --color-grey: var(--subtext0);
- --color-table: var(--surface0);
- --color-table-border: var(--surface0);
+ --color-bg: var(--ctp-base);
+ --color-text: var(--ctp-text);
+ --color-grey: var(--ctp-subtext0);
+ --color-table: var(--ctp-surface0);
+ --color-table-border: var(--ctp-surface0);
--color-link: var(--accent);
- --toc-bg: var(--mantle);
- --toc-text: var(--text);
- --toc-border: var(--crust);
- --tag-bg: var(--surface0);
- --tag-text: var(--overlay1);
- --navbar-bg: var(--crust);
- --navbar-border: var(--mantle);
+ --toc-bg: var(--ctp-mantle);
+ --toc-text: var(--ctp-text);
+ --toc-border: var(--ctp-crust);
+ --tag-bg: var(--ctp-surface0);
+ --tag-text: var(--ctp-overlay1);
+ --navbar-bg: var(--ctp-crust);
+ --navbar-border: var(--ctp-mantle);
--navbar-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2),
0px 5px 10px rgba(0, 0, 0, 0.3);
}
.popover_arrow__pQSsX::before {
- background-color: var(--surface1);
- border: 1px solid var(--surface2);
+ background-color: var(--ctp-surface1);
+ border: 1px solid var(--ctp-surface2);
}
*[class*="dropdown_item"] {
- color: var(--text);
+ color: var(--ctp-text);
}
.popover_popover__jgyGp {
- background-color: var(--surface1);
- border: 1px solid var(--surface2);
+ background-color: var(--ctp-surface1);
+ border: 1px solid var(--ctp-surface2);
border-radius: 0.625em;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.1);
}
.draggable_wrapper__YB014 {
- background-color: var(--surface1);
- border: 1px solid var(--surface0);
+ background-color: var(--ctp-surface1);
+ border: 1px solid var(--ctp-surface0);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.3);
- color: var(--text);
+ color: var(--ctp-text);
}
.checkbox_checkbox__uXwIZ {
width: 1.125em;
height: 1.125em;
border-radius: 0.125em;
- border: 1px solid var(--surface1);
- background-color: var(--surface2);
+ border: 1px solid var(--ctp-surface1);
+ background-color: var(--ctp-surface2);
position: relative;
}
.checkbox_checkbox__uXwIZ::before {
background-color: var(--accent);
}
svg.audio_icon__eZ5Bx {
- color: var(--text);
+ color: var(--ctp-text);
}
.checkbox_label__V5gon,
.audio_select__kmOPL {
- color: var(--subtext0) !important;
+ color: var(--ctp-subtext0) !important;
}
.draggable_header__bfxdq {
- border: 1px solid var(--surface1) !important;
+ border: 1px solid var(--ctp-surface1) !important;
}
.footer_donation__Cje_Q {
display: none !important;
}
.dropdown_content__4NAxl {
- background-color: var(--surface1);
- border: 1px solid var(--surface2);
+ background-color: var(--ctp-surface1);
+ border: 1px solid var(--ctp-surface2);
}
p.settings_setLabel__NrVBx:nth-child(3),
article.settings_section__vRaq_:nth-child(1) {
- color: var(--text);
+ color: var(--ctp-text);
}
.toggle_label__y7mDQ {
- color: var(--text);
+ color: var(--ctp-text);
}
.toggle_bg__Qn4Oc {
background-color: var(--accent);
}
.toggle_label__y7mDQ.toggle_active__l_k3F {
- color: var(--base);
+ color: var(--ctp-base);
}
.toggle_label__y7mDQ:not(.toggle_active__l_k3F):hover {
color: var(--accent);
@@ -132,27 +114,25 @@
color: var(--subtext1);
}
.toggle_toggle__jzkKG {
- background-color: var(--surface2);
+ background-color: var(--ctp-surface2);
}
.settings_reset__GO2x4 {
- border-top: 1px solid var(--surface2);
+ border-top: 1px solid var(--ctp-surface2);
}
.settings_resetBtn__3yLrG {
- color: var(--text);
+ color: var(--ctp-text);
}
.settings_resetBtn__3yLrG:not(.settings_disabled__7X7Nu):hover {
- color: var(--red);
+ color: var(--ctp-red);
}
.themeBtn_label__GyvdH span {
- background-color: var(--surface2);
- border: 1px solid var(--surface2);
+ background-color: var(--ctp-surface2);
+ border: 1px solid var(--ctp-surface2);
}
.themeBtn_wrapper__KTkHk.themeBtn_active__4gb_I .themeBtn_demoWrapper__fdi7G {
border: 1px solid var(--accent) !important;
}
- div.themeBtn_wrapper__KTkHk:nth-child(3)
- > p:nth-child(2)
- > span:nth-child(1)::before {
+ div.themeBtn_wrapper__KTkHk:nth-child(3) > p:nth-child(2) > span:nth-child(1)::before {
background-color: var(--accent);
}
.item_item__uLhiz.item_active__4kaIV {
@@ -160,14 +140,14 @@
}
.item_item__uLhiz.item_active__4kaIV,
.item_item__uLhiz:hover {
- background-color: var(--surface2);
+ background-color: var(--ctp-surface2);
}
.languages_wrapper__1Ad3R {
color: var(--subtext1);
}
.input_input__uGeT_ {
- color: var(--text);
- background-color: var(--overlay0);
+ color: var(--ctp-text);
+ background-color: var(--ctp-overlay0);
border-radius: 4px;
}
.input_wrapper__aeypb {
@@ -177,12 +157,12 @@
color: var(--accent);
}
.share_btn__9IJpe {
- color: var(--text);
- background-color: var(--surface2);
- border: var(--surface2);
+ color: var(--ctp-text);
+ background-color: var(--ctp-surface2);
+ border: var(--ctp-surface2);
}
.share_btn__9IJpe span {
- color: var(--text);
+ color: var(--ctp-text);
}
.footer_socialWrapper__R1iSQ *:hover,
.footer_link__TA4rr:hover {
@@ -190,54 +170,48 @@
}
.list_wrapper__TYM2l,
.input_wrapper__aeypb {
- background-color: var(--surface1);
- color: var(--text);
+ background-color: var(--ctp-surface1);
+ color: var(--ctp-text);
}
.input_wrapper__aeypb * {
- color: var(--text);
+ color: var(--ctp-text);
}
.list_item_VVizU:hover {
- background-color: var(--surface2) !important;
+ background-color: var(--ctp-surface2) !important;
}
.search_header__gqnk7.search_article__L3Khv {
background: transparent;
}
.item_item__jj0Ue {
- color: var(--text);
+ color: var(--ctp-text);
}
.item_item__jj0Ue:hover {
- background-color: var(--surface2) !important;
+ background-color: var(--ctp-surface2) !important;
border-color: var(--accent);
}
.modal_header__t094_ {
- border-color: var(--surface1);
- color: var(--text);
+ border-color: var(--ctp-surface1);
+ color: var(--ctp-text);
}
.list_item__VVizU.list_active__ahAYX,
.list_item__VVizU:hover {
- background-color: var(--surface2);
+ background-color: var(--ctp-surface2);
}
.button_btn__ln0Hv {
color: var(--accent);
- background-color: var(--surface0);
+ background-color: var(--ctp-surface0);
}
- .navbarMobile_footer__y5Kwi.navbarMobile_dark__eIcxf
- .navbarMobile_icons__tirr9,
- .navbarMobile_footer__y5Kwi.navbarMobile_dark__eIcxf .navbarMobile_toc__iPfvP,
- .navbarMobile_footer__y5Kwi.navbarMobile_grey__5dmnP
- .navbarMobile_icons__tirr9,
- .navbarMobile_footer__y5Kwi.navbarMobile_grey__5dmnP
- .navbarMobile_toc__iPfvP {
- background-color: var(--surface1);
- color: var(--text);
+ .navbarMobile_footer__y5Kwi.navbarMobile_dark__eIcxf .navbarMobile_icons__tirr9, .navbarMobile_footer__y5Kwi.navbarMobile_dark__eIcxf .navbarMobile_toc__iPfvP, .navbarMobile_footer__y5Kwi.navbarMobile_grey__5dmnP .navbarMobile_icons__tirr9, .navbarMobile_footer__y5Kwi.navbarMobile_grey__5dmnP .navbarMobile_toc__iPfvP {
+ background-color: var(--ctp-surface1);
+ color: var(--ctp-text);
}
.tooltip_tooltip_QQr79.tooltip_dark_ZWBHd,
.tooltip_tooltip_QQr79.tooltip_dark_ZWBHd > * > * {
- background-color: var(--crust) !important;
+ background-color: var(--ctp-crust) !important;
}
.dropdown_item__yrn67:hover {
- background-color: var(--surface2);
+ background-color: var(--ctp-surface2);
color: var(--accent);
border-color: var(--accent) !important;
}
@@ -245,34 +219,34 @@
background-color: var(--accent);
}
.audio_dot__jeWOr {
- background-color: var(--surface2);
- box-shadow: 6.666px 0 0 0px var(--surface2);
+ background-color: var(--ctp-surface2);
+ box-shadow: 6.666px 0 0 0px var(--ctp-surface2);
border-radius: 0px;
- border: 1px solid var(--surface2) !important;
+ border: 1px solid var(--ctp-surface2) !important;
}
.gallery_icon__7LOBi {
- background-color: var(--surface2);
+ background-color: var(--ctp-surface2);
color: var(--subtext1);
}
.gallery_disable__1QuKw {
- background-color: var(--surface0);
+ background-color: var(--ctp-surface0);
}
.gallery_icon__7LOBi:hover {
- background-color: var(--overlay0);
+ background-color: var(--ctp-overlay0);
color: var(--accent);
}
.gallery_nav__BEeM3 {
- background-color: var(--base);
+ background-color: var(--ctp-base);
}
.image_wrapper__Dq3Jq {
- background-color: var(--crust);
+ background-color: var(--ctp-crust);
}
.stage_caption__BvSjQ {
- color: var(--subtext0);
+ color: var(--ctp-subtext0);
}
.gallery_wrapper__1a7bM,
.thumbnails_wrapper__1Q5be {
- background-color: var(--mantle) !important;
+ background-color: var(--ctp-mantle) !important;
}
.thumbnails_thumbnail__H4tNf {
background-color: #fafafa;
@@ -285,15 +259,15 @@
}
.info_wrapper__HpdJH,
.info_arrow__ehjUI {
- background-color: var(--surface1);
- border-color: var(--surface1);
+ background-color: var(--ctp-surface1);
+ border-color: var(--ctp-surface1);
}
.info_wrapper__HpdJH::after {
background: linear-gradient(
180deg,
hsla(0, 0%, 98%, 0),
- var(--surface1) 90%
+ var(--ctp-surface1) 90%
);
}
.list_item__VVizU.list_active__ahAYX {
@@ -303,24 +277,24 @@
color: var(--subtext1);
}
.item_star__arENF.item_active__4kaIV {
- color: var(--yellow);
+ color: var(--ctp-yellow);
}
.action_action___vLQg.action_remove__z6g_k {
- color: var(--text);
+ color: var(--ctp-text);
}
.action_action___vLQg:not(.action_limit__u0EDs):hover.action_remove__z6g_k {
color: var(--accent);
}
.item_remove__f1A5k {
- background-color: var(--surface1);
+ background-color: var(--ctp-surface1);
}
.item_remove__f1A5k span,
.item_remove__f1A5k svg {
- color: var(--red);
+ color: var(--ctp-red);
}
caption {
- background-color: var(--surface0) !important;
- border-color: var(--surface0) !important;
+ background-color: var(--ctp-surface0) !important;
+ border-color: var(--ctp-surface0) !important;
}
.summary_wordtuneWrapper__21QxG > img:nth-child(2) {
background-color: var(--accent);
@@ -329,12 +303,12 @@
color: var(--accent) !important;
}
table * {
- background-color: var(--surface0) !important;
- color: var(--text) !important;
- border-color: var(--surface2) !important;
+ background-color: var(--ctp-surface0) !important;
+ color: var(--ctp-text) !important;
+ border-color: var(--ctp-surface2) !important;
}
table {
- background-color: var(--surface0) !important;
+ background-color: var(--ctp-surface0) !important;
border: none !important;
}
a.wl {
diff --git a/styles/wikiwand/frappe.css b/styles/wikiwand/frappe.css
deleted file mode 100644
index e330581945..0000000000
--- a/styles/wikiwand/frappe.css
+++ /dev/null
@@ -1,350 +0,0 @@
-/* ==UserStyle==
-@name catppuccin-frappe-wikiwand
-@namespace USO Archive
-@author tnixc
-@description Soothing pastel theme for wikiwand
-@version 1.0
-@license MIT
-@preprocessor uso
-==/UserStyle== */
-/* ---------- Catppuccin-frappe-wikiwand ---------- */
-/* ---------- v1.0 / 12-11-2022 ---------- */
-/* by tnixc */
-@namespace url(http://www.w3.org/1999/xhtml);
-
-@-moz-document domain("wikiwand.com") {
- /* ============= UNIFORM BACKGROUND COLORS ============= */
- /* ============= UNIFORM BACKGROUND COLORS ============= */
- :root {
- --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: #87b0f9;
- --lavender: #babbf1;
- --text: #c6d0f5;
- --subtext1: #b3bcdf;
- --subtext0: #a1a8c9;
- --overlay2: #8e95b3;
- --overlay1: #7b819d;
- --overlay0: #696d86;
- --surface2: #565970;
- --surface1: #43465a;
- --surface0: #414559;
- --base: #303446;
- --mantle: #292c3c;
- --crust: #232634;
- --accent: var(--rosewater);
- }
- .root_dark__oGh5X {
- --color-bg: var(--base);
- --color-text: var(--text);
- --color-grey: var(--subtext0);
- --color-table: var(--surface0);
- --color-table-border: var(--surface0);
- --color-link: var(--accent);
- --toc-bg: var(--mantle);
- --toc-text: var(--text);
- --toc-border: var(--crust);
- --tag-bg: var(--surface0);
- --tag-text: var(--overlay1);
- --navbar-bg: var(--crust);
- --navbar-border: var(--mantle);
- --navbar-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2),
- 0px 5px 10px rgba(0, 0, 0, 0.3);
- }
- .popover_arrow__pQSsX::before {
- background-color: var(--surface1);
- border: 1px solid var(--surface2);
- }
- *[class*="dropdown_item"] {
- color: var(--text);
- }
- .popover_popover__jgyGp {
- background-color: var(--surface1);
- border: 1px solid var(--surface2);
- border-radius: 0.625em;
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.1);
- }
- .draggable_wrapper__YB014 {
- background-color: var(--surface1);
- border: 1px solid var(--surface0);
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.3);
- color: var(--text);
- }
- .checkbox_checkbox__uXwIZ {
- width: 1.125em;
- height: 1.125em;
- border-radius: 0.125em;
- border: 1px solid var(--surface1);
- background-color: var(--surface2);
- position: relative;
- }
- .checkbox_checkbox__uXwIZ::before {
- background-color: var(--accent);
- }
- svg.audio_icon__eZ5Bx {
- color: var(--text);
- }
- .checkbox_label__V5gon,
- .audio_select__kmOPL {
- color: var(--subtext0) !important;
- }
- .draggable_header__bfxdq {
- border: 1px solid var(--surface1) !important;
- }
- .footer_donation__Cje_Q {
- display: none !important;
- }
- .dropdown_content__4NAxl {
- background-color: var(--surface1);
- border: 1px solid var(--surface2);
- }
- p.settings_setLabel__NrVBx:nth-child(3),
- article.settings_section__vRaq_:nth-child(1) {
- color: var(--text);
- }
- .toggle_label__y7mDQ {
- color: var(--text);
- }
- .toggle_bg__Qn4Oc {
- background-color: var(--accent);
- }
- .toggle_label__y7mDQ.toggle_active__l_k3F {
- color: var(--base);
- }
- .toggle_label__y7mDQ:not(.toggle_active__l_k3F):hover {
- color: var(--accent);
- }
- .themeBtn_wrapper__KTkHk.themeBtn_active__4gb_I,
- .themeBtn_wrapper__KTkHk:hover {
- color: var(--accent);
- }
- .themeBtn_label__GyvdH {
- color: var(--subtext1);
- }
- .toggle_toggle__jzkKG {
- background-color: var(--surface2);
- }
- .settings_reset__GO2x4 {
- border-top: 1px solid var(--surface2);
- }
- .settings_resetBtn__3yLrG {
- color: var(--text);
- }
- .settings_resetBtn__3yLrG:not(.settings_disabled__7X7Nu):hover {
- color: var(--red);
- }
- .themeBtn_label__GyvdH span {
- background-color: var(--surface2);
- border: 1px solid var(--surface2);
- }
- .themeBtn_wrapper__KTkHk.themeBtn_active__4gb_I .themeBtn_demoWrapper__fdi7G {
- border: 1px solid var(--accent) !important;
- }
- div.themeBtn_wrapper__KTkHk:nth-child(3)
- > p:nth-child(2)
- > span:nth-child(1)::before {
- background-color: var(--accent);
- }
- .item_item__uLhiz.item_active__4kaIV {
- color: var(--accent);
- }
- .item_item__uLhiz.item_active__4kaIV,
- .item_item__uLhiz:hover {
- background-color: var(--surface2);
- }
- .languages_wrapper__1Ad3R {
- color: var(--subtext1);
- }
- .input_input__uGeT_ {
- color: var(--text);
- background-color: var(--overlay0);
- border-radius: 4px;
- }
- .input_wrapper__aeypb {
- border: none !important;
- }
- .action_action___vLQg {
- color: var(--accent);
- }
- .share_btn__9IJpe {
- color: var(--text);
- background-color: var(--surface2);
- border: var(--surface2);
- }
- .share_btn__9IJpe span {
- color: var(--text);
- }
- .footer_socialWrapper__R1iSQ *:hover,
- .footer_link__TA4rr:hover {
- color: var(--accent);
- }
- .list_wrapper__TYM2l,
- .input_wrapper__aeypb {
- background-color: var(--surface1);
- color: var(--text);
- }
- .input_wrapper__aeypb * {
- color: var(--text);
- }
- .list_item_VVizU:hover {
- background-color: var(--surface2) !important;
- }
- .search_header__gqnk7.search_article__L3Khv {
- background: transparent;
- }
- .item_item__jj0Ue {
- color: var(--text);
- }
- .item_item__jj0Ue:hover {
- background-color: var(--surface2) !important;
- border-color: var(--accent);
- }
- .modal_header__t094_ {
- border-color: var(--surface1);
- color: var(--text);
- }
- .list_item__VVizU.list_active__ahAYX,
- .list_item__VVizU:hover {
- background-color: var(--surface2);
- }
- .button_btn__ln0Hv {
- color: var(--accent);
- background-color: var(--surface0);
- }
-
- .navbarMobile_footer__y5Kwi.navbarMobile_dark__eIcxf
- .navbarMobile_icons__tirr9,
- .navbarMobile_footer__y5Kwi.navbarMobile_dark__eIcxf .navbarMobile_toc__iPfvP,
- .navbarMobile_footer__y5Kwi.navbarMobile_grey__5dmnP
- .navbarMobile_icons__tirr9,
- .navbarMobile_footer__y5Kwi.navbarMobile_grey__5dmnP
- .navbarMobile_toc__iPfvP {
- background-color: var(--surface1);
- color: var(--text);
- }
- .tooltip_tooltip_QQr79.tooltip_dark_ZWBHd,
- .tooltip_tooltip_QQr79.tooltip_dark_ZWBHd > * > * {
- background-color: var(--crust) !important;
- }
- .dropdown_item__yrn67:hover {
- background-color: var(--surface2);
- color: var(--accent);
- border-color: var(--accent) !important;
- }
- .audio_dot__jeWOr.audio_active__li6PM {
- background-color: var(--accent);
- }
- .audio_dot__jeWOr {
- background-color: var(--surface2);
- box-shadow: 6.666px 0 0 0px var(--surface2);
- border-radius: 0px;
- border: 1px solid var(--surface2) !important;
- }
- .gallery_icon__7LOBi {
- background-color: var(--surface2);
- color: var(--subtext1);
- }
- .gallery_disable__1QuKw {
- background-color: var(--surface0);
- }
- .gallery_icon__7LOBi:hover {
- background-color: var(--overlay0);
- color: var(--accent);
- }
- .gallery_nav__BEeM3 {
- background-color: var(--base);
- }
- .image_wrapper__Dq3Jq {
- background-color: var(--crust);
- }
- .stage_caption__BvSjQ {
- color: var(--subtext0);
- }
- .gallery_wrapper__1a7bM,
- .thumbnails_wrapper__1Q5be {
- background-color: var(--mantle) !important;
- }
- .thumbnails_thumbnail__H4tNf {
- background-color: #fafafa;
- border-radius: 4px;
- padding: 4px;
- }
-
- .list_loading__j43_R {
- color: var(--accent);
- }
- .info_wrapper__HpdJH,
- .info_arrow__ehjUI {
- background-color: var(--surface1);
- border-color: var(--surface1);
- }
-
- .info_wrapper__HpdJH::after {
- background: linear-gradient(
- 180deg,
- hsla(0, 0%, 98%, 0),
- var(--surface1) 90%
- );
- }
- .list_item__VVizU.list_active__ahAYX {
- color: var(--accent);
- }
- .item_star__arENF {
- color: var(--subtext1);
- }
- .item_star__arENF.item_active__4kaIV {
- color: var(--yellow);
- }
- .action_action___vLQg.action_remove__z6g_k {
- color: var(--text);
- }
- .action_action___vLQg:not(.action_limit__u0EDs):hover.action_remove__z6g_k {
- color: var(--accent);
- }
- .item_remove__f1A5k {
- background-color: var(--surface1);
- }
- .item_remove__f1A5k span,
- .item_remove__f1A5k svg {
- color: var(--red);
- }
- caption {
- background-color: var(--surface0) !important;
- border-color: var(--surface0) !important;
- }
- .summary_wordtuneWrapper__21QxG > img:nth-child(2) {
- background-color: var(--accent);
- }
- code > a {
- color: var(--accent) !important;
- }
- table * {
- background-color: var(--surface0) !important;
- color: var(--text) !important;
- border-color: var(--surface2) !important;
- }
- table {
- background-color: var(--surface0) !important;
- border: none !important;
- }
- a.wl {
- color: var(--accent) !important;
- }
- .summary_footer__Lk6z7 > span:nth-child(1),
- svg.icon_icon__0vohI,
- .icon_icon__0vohI.input_icon__He3sV,
- svg.icon_icon__0vohI:nth-child(2) > use:nth-child(1) {
- color: var(--accent);
- fill: var(--accent);
- }
-}
diff --git a/styles/wikiwand/macchiato.css b/styles/wikiwand/macchiato.css
deleted file mode 100644
index 8b79389be4..0000000000
--- a/styles/wikiwand/macchiato.css
+++ /dev/null
@@ -1,350 +0,0 @@
-/* ==UserStyle==
-@name catppuccin-macchiato-wikiwand
-@namespace USO Archive
-@author tnixc
-@description Soothing pastel theme for wikiwand
-@version 1.0
-@license MIT
-@preprocessor uso
-==/UserStyle== */
-/* ---------- Catppuccin-macchiato-wikiwand ---------- */
-/* ---------- v1.0 / 12-11-2022 ---------- */
-/* by tnixc */
-@namespace url(http://www.w3.org/1999/xhtml);
-
-@-moz-document domain("wikiwand.com") {
- /* ============= UNIFORM BACKGROUND COLORS ============= */
- /* ============= UNIFORM BACKGROUND COLORS ============= */
- :root {
- --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: #87b0f9;
- --lavender: #b7bdf8;
- --text: #cad3f5;
- --subtext1: #b3bcdf;
- --subtext0: #a1a8c9;
- --overlay2: #8e95b3;
- --overlay1: #7b819d;
- --overlay0: #696d86;
- --surface2: #565970;
- --surface1: #43465a;
- --surface0: #363a4f;
- --base: #24273a;
- --mantle: #1e2030;
- --crust: #181926;
- --accent: var(--rosewater);
- }
- .root_dark__oGh5X {
- --color-bg: var(--base);
- --color-text: var(--text);
- --color-grey: var(--subtext0);
- --color-table: var(--surface0);
- --color-table-border: var(--surface0);
- --color-link: var(--accent);
- --toc-bg: var(--mantle);
- --toc-text: var(--text);
- --toc-border: var(--crust);
- --tag-bg: var(--surface0);
- --tag-text: var(--overlay1);
- --navbar-bg: var(--crust);
- --navbar-border: var(--mantle);
- --navbar-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2),
- 0px 5px 10px rgba(0, 0, 0, 0.3);
- }
- .popover_arrow__pQSsX::before {
- background-color: var(--surface1);
- border: 1px solid var(--surface2);
- }
- *[class*="dropdown_item"] {
- color: var(--text);
- }
- .popover_popover__jgyGp {
- background-color: var(--surface1);
- border: 1px solid var(--surface2);
- border-radius: 0.625em;
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.1);
- }
- .draggable_wrapper__YB014 {
- background-color: var(--surface1);
- border: 1px solid var(--surface0);
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.3);
- color: var(--text);
- }
- .checkbox_checkbox__uXwIZ {
- width: 1.125em;
- height: 1.125em;
- border-radius: 0.125em;
- border: 1px solid var(--surface1);
- background-color: var(--surface2);
- position: relative;
- }
- .checkbox_checkbox__uXwIZ::before {
- background-color: var(--accent);
- }
- svg.audio_icon__eZ5Bx {
- color: var(--text);
- }
- .checkbox_label__V5gon,
- .audio_select__kmOPL {
- color: var(--subtext0) !important;
- }
- .draggable_header__bfxdq {
- border: 1px solid var(--surface1) !important;
- }
- .footer_donation__Cje_Q {
- display: none !important;
- }
- .dropdown_content__4NAxl {
- background-color: var(--surface1);
- border: 1px solid var(--surface2);
- }
- p.settings_setLabel__NrVBx:nth-child(3),
- article.settings_section__vRaq_:nth-child(1) {
- color: var(--text);
- }
- .toggle_label__y7mDQ {
- color: var(--text);
- }
- .toggle_bg__Qn4Oc {
- background-color: var(--accent);
- }
- .toggle_label__y7mDQ.toggle_active__l_k3F {
- color: var(--base);
- }
- .toggle_label__y7mDQ:not(.toggle_active__l_k3F):hover {
- color: var(--accent);
- }
- .themeBtn_wrapper__KTkHk.themeBtn_active__4gb_I,
- .themeBtn_wrapper__KTkHk:hover {
- color: var(--accent);
- }
- .themeBtn_label__GyvdH {
- color: var(--subtext1);
- }
- .toggle_toggle__jzkKG {
- background-color: var(--surface2);
- }
- .settings_reset__GO2x4 {
- border-top: 1px solid var(--surface2);
- }
- .settings_resetBtn__3yLrG {
- color: var(--text);
- }
- .settings_resetBtn__3yLrG:not(.settings_disabled__7X7Nu):hover {
- color: var(--red);
- }
- .themeBtn_label__GyvdH span {
- background-color: var(--surface2);
- border: 1px solid var(--surface2);
- }
- .themeBtn_wrapper__KTkHk.themeBtn_active__4gb_I .themeBtn_demoWrapper__fdi7G {
- border: 1px solid var(--accent) !important;
- }
- div.themeBtn_wrapper__KTkHk:nth-child(3)
- > p:nth-child(2)
- > span:nth-child(1)::before {
- background-color: var(--accent);
- }
- .item_item__uLhiz.item_active__4kaIV {
- color: var(--accent);
- }
- .item_item__uLhiz.item_active__4kaIV,
- .item_item__uLhiz:hover {
- background-color: var(--surface2);
- }
- .languages_wrapper__1Ad3R {
- color: var(--subtext1);
- }
- .input_input__uGeT_ {
- color: var(--text);
- background-color: var(--overlay0);
- border-radius: 4px;
- }
- .input_wrapper__aeypb {
- border: none !important;
- }
- .action_action___vLQg {
- color: var(--accent);
- }
- .share_btn__9IJpe {
- color: var(--text);
- background-color: var(--surface2);
- border: var(--surface2);
- }
- .share_btn__9IJpe span {
- color: var(--text);
- }
- .footer_socialWrapper__R1iSQ *:hover,
- .footer_link__TA4rr:hover {
- color: var(--accent);
- }
- .list_wrapper__TYM2l,
- .input_wrapper__aeypb {
- background-color: var(--surface1);
- color: var(--text);
- }
- .input_wrapper__aeypb * {
- color: var(--text);
- }
- .list_item_VVizU:hover {
- background-color: var(--surface2) !important;
- }
- .search_header__gqnk7.search_article__L3Khv {
- background: transparent;
- }
- .item_item__jj0Ue {
- color: var(--text);
- }
- .item_item__jj0Ue:hover {
- background-color: var(--surface2) !important;
- border-color: var(--accent);
- }
- .modal_header__t094_ {
- border-color: var(--surface1);
- color: var(--text);
- }
- .list_item__VVizU.list_active__ahAYX,
- .list_item__VVizU:hover {
- background-color: var(--surface2);
- }
- .button_btn__ln0Hv {
- color: var(--accent);
- background-color: var(--surface0);
- }
-
- .navbarMobile_footer__y5Kwi.navbarMobile_dark__eIcxf
- .navbarMobile_icons__tirr9,
- .navbarMobile_footer__y5Kwi.navbarMobile_dark__eIcxf .navbarMobile_toc__iPfvP,
- .navbarMobile_footer__y5Kwi.navbarMobile_grey__5dmnP
- .navbarMobile_icons__tirr9,
- .navbarMobile_footer__y5Kwi.navbarMobile_grey__5dmnP
- .navbarMobile_toc__iPfvP {
- background-color: var(--surface1);
- color: var(--text);
- }
- .tooltip_tooltip_QQr79.tooltip_dark_ZWBHd,
- .tooltip_tooltip_QQr79.tooltip_dark_ZWBHd > * > * {
- background-color: var(--crust) !important;
- }
- .dropdown_item__yrn67:hover {
- background-color: var(--surface2);
- color: var(--accent);
- border-color: var(--accent) !important;
- }
- .audio_dot__jeWOr.audio_active__li6PM {
- background-color: var(--accent);
- }
- .audio_dot__jeWOr {
- background-color: var(--surface2);
- box-shadow: 6.666px 0 0 0px var(--surface2);
- border-radius: 0px;
- border: 1px solid var(--surface2) !important;
- }
- .gallery_icon__7LOBi {
- background-color: var(--surface2);
- color: var(--subtext1);
- }
- .gallery_disable__1QuKw {
- background-color: var(--surface0);
- }
- .gallery_icon__7LOBi:hover {
- background-color: var(--overlay0);
- color: var(--accent);
- }
- .gallery_nav__BEeM3 {
- background-color: var(--base);
- }
- .image_wrapper__Dq3Jq {
- background-color: var(--crust);
- }
- .stage_caption__BvSjQ {
- color: var(--subtext0);
- }
- .gallery_wrapper__1a7bM,
- .thumbnails_wrapper__1Q5be {
- background-color: var(--mantle) !important;
- }
- .thumbnails_thumbnail__H4tNf {
- background-color: #fafafa;
- border-radius: 4px;
- padding: 4px;
- }
-
- .list_loading__j43_R {
- color: var(--accent);
- }
- .info_wrapper__HpdJH,
- .info_arrow__ehjUI {
- background-color: var(--surface1);
- border-color: var(--surface1);
- }
-
- .info_wrapper__HpdJH::after {
- background: linear-gradient(
- 180deg,
- hsla(0, 0%, 98%, 0),
- var(--surface1) 90%
- );
- }
- .list_item__VVizU.list_active__ahAYX {
- color: var(--accent);
- }
- .item_star__arENF {
- color: var(--subtext1);
- }
- .item_star__arENF.item_active__4kaIV {
- color: var(--yellow);
- }
- .action_action___vLQg.action_remove__z6g_k {
- color: var(--text);
- }
- .action_action___vLQg:not(.action_limit__u0EDs):hover.action_remove__z6g_k {
- color: var(--accent);
- }
- .item_remove__f1A5k {
- background-color: var(--surface1);
- }
- .item_remove__f1A5k span,
- .item_remove__f1A5k svg {
- color: var(--red);
- }
- caption {
- background-color: var(--surface0) !important;
- border-color: var(--surface0) !important;
- }
- .summary_wordtuneWrapper__21QxG > img:nth-child(2) {
- background-color: var(--accent);
- }
- code > a {
- color: var(--accent) !important;
- }
- table * {
- background-color: var(--surface0) !important;
- color: var(--text) !important;
- border-color: var(--surface2) !important;
- }
- table {
- background-color: var(--surface0) !important;
- border: none !important;
- }
- a.wl {
- color: var(--accent) !important;
- }
- .summary_footer__Lk6z7 > span:nth-child(1),
- svg.icon_icon__0vohI,
- .icon_icon__0vohI.input_icon__He3sV,
- svg.icon_icon__0vohI:nth-child(2) > use:nth-child(1) {
- color: var(--accent);
- fill: var(--accent);
- }
-}
diff --git a/styles/wikiwand/mocha.css b/styles/wikiwand/mocha.css
deleted file mode 100644
index e4c5b7767d..0000000000
--- a/styles/wikiwand/mocha.css
+++ /dev/null
@@ -1,349 +0,0 @@
-/* ==UserStyle==
-@name catppuccin-mocha-wikiwand
-@namespace USO Archive
-@author tnixc
-@description Soothing pastel theme for wikiwand
-@version 1.0
-@license MIT
-@preprocessor uso
-==/UserStyle== */
-/* ---------- Catppuccin-mocha-wikiwand ---------- */
-/* ---------- v1.0 / 12-11-2022 ---------- */
-/* by tnixc */
-@namespace url(http://www.w3.org/1999/xhtml);
-
-@-moz-document domain("wikiwand.com") {
- /* ============= UNIFORM BACKGROUND COLORS ============= */
- :root {
- --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: #87b0f9;
- --lavender: #b4befe;
- --text: #c6d0f5;
- --subtext1: #b3bcdf;
- --subtext0: #a1a8c9;
- --overlay2: #8e95b3;
- --overlay1: #7b819d;
- --overlay0: #696d86;
- --surface2: #565970;
- --surface1: #43465a;
- --surface0: #313244;
- --base: #1e1e2e;
- --mantle: #181825;
- --crust: #11111b;
- --accent: var(--rosewater);
- }
- .root_dark__oGh5X {
- --color-bg: var(--base);
- --color-text: var(--text);
- --color-grey: var(--subtext0);
- --color-table: var(--surface0);
- --color-table-border: var(--surface0);
- --color-link: var(--accent);
- --toc-bg: var(--mantle);
- --toc-text: var(--text);
- --toc-border: var(--crust);
- --tag-bg: var(--surface0);
- --tag-text: var(--overlay1);
- --navbar-bg: var(--crust);
- --navbar-border: var(--mantle);
- --navbar-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2),
- 0px 5px 10px rgba(0, 0, 0, 0.3);
- }
- .popover_arrow__pQSsX::before {
- background-color: var(--surface1);
- border: 1px solid var(--surface2);
- }
- *[class*="dropdown_item"] {
- color: var(--text);
- }
- .popover_popover__jgyGp {
- background-color: var(--surface1);
- border: 1px solid var(--surface2);
- border-radius: 0.625em;
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.1);
- }
- .draggable_wrapper__YB014 {
- background-color: var(--surface1);
- border: 1px solid var(--surface0);
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.3);
- color: var(--text);
- }
- .checkbox_checkbox__uXwIZ {
- width: 1.125em;
- height: 1.125em;
- border-radius: 0.125em;
- border: 1px solid var(--surface1);
- background-color: var(--surface2);
- position: relative;
- }
- .checkbox_checkbox__uXwIZ::before {
- background-color: var(--accent);
- }
- svg.audio_icon__eZ5Bx {
- color: var(--text);
- }
- .checkbox_label__V5gon,
- .audio_select__kmOPL {
- color: var(--subtext0) !important;
- }
- .draggable_header__bfxdq {
- border: 1px solid var(--surface1) !important;
- }
- .footer_donation__Cje_Q {
- display: none !important;
- }
- .dropdown_content__4NAxl {
- background-color: var(--surface1);
- border: 1px solid var(--surface2);
- }
- p.settings_setLabel__NrVBx:nth-child(3),
- article.settings_section__vRaq_:nth-child(1) {
- color: var(--text);
- }
- .toggle_label__y7mDQ {
- color: var(--text);
- }
- .toggle_bg__Qn4Oc {
- background-color: var(--accent);
- }
- .toggle_label__y7mDQ.toggle_active__l_k3F {
- color: var(--base);
- }
- .toggle_label__y7mDQ:not(.toggle_active__l_k3F):hover {
- color: var(--accent);
- }
- .themeBtn_wrapper__KTkHk.themeBtn_active__4gb_I,
- .themeBtn_wrapper__KTkHk:hover {
- color: var(--accent);
- }
- .themeBtn_label__GyvdH {
- color: var(--subtext1);
- }
- .toggle_toggle__jzkKG {
- background-color: var(--surface2);
- }
- .settings_reset__GO2x4 {
- border-top: 1px solid var(--surface2);
- }
- .settings_resetBtn__3yLrG {
- color: var(--text);
- }
- .settings_resetBtn__3yLrG:not(.settings_disabled__7X7Nu):hover {
- color: var(--red);
- }
- .themeBtn_label__GyvdH span {
- background-color: var(--surface2);
- border: 1px solid var(--surface2);
- }
- .themeBtn_wrapper__KTkHk.themeBtn_active__4gb_I .themeBtn_demoWrapper__fdi7G {
- border: 1px solid var(--accent) !important;
- }
- div.themeBtn_wrapper__KTkHk:nth-child(3)
- > p:nth-child(2)
- > span:nth-child(1)::before {
- background-color: var(--accent);
- }
- .item_item__uLhiz.item_active__4kaIV {
- color: var(--accent);
- }
- .item_item__uLhiz.item_active__4kaIV,
- .item_item__uLhiz:hover {
- background-color: var(--surface2);
- }
- .languages_wrapper__1Ad3R {
- color: var(--subtext1);
- }
- .input_input__uGeT_ {
- color: var(--text);
- background-color: var(--overlay0);
- border-radius: 4px;
- }
- .input_wrapper__aeypb {
- border: none !important;
- }
- .action_action___vLQg {
- color: var(--accent);
- }
- .share_btn__9IJpe {
- color: var(--text);
- background-color: var(--surface2);
- border: var(--surface2);
- }
- .share_btn__9IJpe span {
- color: var(--text);
- }
- .footer_socialWrapper__R1iSQ *:hover,
- .footer_link__TA4rr:hover {
- color: var(--accent);
- }
- .list_wrapper__TYM2l,
- .input_wrapper__aeypb {
- background-color: var(--surface1);
- color: var(--text);
- }
- .input_wrapper__aeypb * {
- color: var(--text);
- }
- .list_item_VVizU:hover {
- background-color: var(--surface2) !important;
- }
- .search_header__gqnk7.search_article__L3Khv {
- background: transparent;
- }
- .item_item__jj0Ue {
- color: var(--text);
- }
- .item_item__jj0Ue:hover {
- background-color: var(--surface2) !important;
- border-color: var(--accent);
- }
- .modal_header__t094_ {
- border-color: var(--surface1);
- color: var(--text);
- }
- .list_item__VVizU.list_active__ahAYX,
- .list_item__VVizU:hover {
- background-color: var(--surface2);
- }
- .button_btn__ln0Hv {
- color: var(--accent);
- background-color: var(--surface0);
- }
-
- .navbarMobile_footer__y5Kwi.navbarMobile_dark__eIcxf
- .navbarMobile_icons__tirr9,
- .navbarMobile_footer__y5Kwi.navbarMobile_dark__eIcxf .navbarMobile_toc__iPfvP,
- .navbarMobile_footer__y5Kwi.navbarMobile_grey__5dmnP
- .navbarMobile_icons__tirr9,
- .navbarMobile_footer__y5Kwi.navbarMobile_grey__5dmnP
- .navbarMobile_toc__iPfvP {
- background-color: var(--surface1);
- color: var(--text);
- }
- .tooltip_tooltip_QQr79.tooltip_dark_ZWBHd,
- .tooltip_tooltip_QQr79.tooltip_dark_ZWBHd > * > * {
- background-color: var(--crust) !important;
- }
- .dropdown_item__yrn67:hover {
- background-color: var(--surface2);
- color: var(--accent);
- border-color: var(--accent) !important;
- }
- .audio_dot__jeWOr.audio_active__li6PM {
- background-color: var(--accent);
- }
- .audio_dot__jeWOr {
- background-color: var(--surface2);
- box-shadow: 6.666px 0 0 0px var(--surface2);
- border-radius: 0px;
- border: 1px solid var(--surface2) !important;
- }
- .gallery_icon__7LOBi {
- background-color: var(--surface2);
- color: var(--subtext1);
- }
- .gallery_disable__1QuKw {
- background-color: var(--surface0);
- }
- .gallery_icon__7LOBi:hover {
- background-color: var(--overlay0);
- color: var(--accent);
- }
- .gallery_nav__BEeM3 {
- background-color: var(--base);
- }
- .image_wrapper__Dq3Jq {
- background-color: var(--crust);
- }
- .stage_caption__BvSjQ {
- color: var(--subtext0);
- }
- .gallery_wrapper__1a7bM,
- .thumbnails_wrapper__1Q5be {
- background-color: var(--mantle) !important;
- }
- .thumbnails_thumbnail__H4tNf {
- background-color: #fafafa;
- border-radius: 4px;
- padding: 4px;
- }
-
- .list_loading__j43_R {
- color: var(--accent);
- }
- .info_wrapper__HpdJH,
- .info_arrow__ehjUI {
- background-color: var(--surface1);
- border-color: var(--surface1);
- }
-
- .info_wrapper__HpdJH::after {
- background: linear-gradient(
- 180deg,
- hsla(0, 0%, 98%, 0),
- var(--surface1) 90%
- );
- }
- .list_item__VVizU.list_active__ahAYX {
- color: var(--accent);
- }
- .item_star__arENF {
- color: var(--subtext1);
- }
- .item_star__arENF.item_active__4kaIV {
- color: var(--yellow);
- }
- .action_action___vLQg.action_remove__z6g_k {
- color: var(--text);
- }
- .action_action___vLQg:not(.action_limit__u0EDs):hover.action_remove__z6g_k {
- color: var(--accent);
- }
- .item_remove__f1A5k {
- background-color: var(--surface1);
- }
- .item_remove__f1A5k span,
- .item_remove__f1A5k svg {
- color: var(--red);
- }
- caption {
- background-color: var(--surface0) !important;
- border-color: var(--surface0) !important;
- }
- .summary_wordtuneWrapper__21QxG > img:nth-child(2) {
- background-color: var(--accent);
- }
- code > a {
- color: var(--accent) !important;
- }
- table * {
- background-color: var(--surface0) !important;
- color: var(--text) !important;
- border-color: var(--surface2) !important;
- }
- table {
- background-color: var(--surface0) !important;
- border: none !important;
- }
- a.wl {
- color: var(--accent) !important;
- }
- .summary_footer__Lk6z7 > span:nth-child(1),
- svg.icon_icon__0vohI,
- .icon_icon__0vohI.input_icon__He3sV,
- svg.icon_icon__0vohI:nth-child(2) > use:nth-child(1) {
- color: var(--accent);
- fill: var(--accent);
- }
-}
diff --git a/styles/youtube/README.md b/styles/youtube/README.md
deleted file mode 100644
index a6ff2d1c53..0000000000
--- a/styles/youtube/README.md
+++ /dev/null
@@ -1,63 +0,0 @@
-
-
-
- Catppuccin for YouTube
-
-
-
- 
- 
- 
-
-
-
-
- 
-
-
-## Previews
-
-
-๐ป Latte
- 
-
-
-๐ชด Frappรฉ
- 
-
-
-๐บ Macchiato
- 
-
-
-๐ฟ Mocha
- 
-
-
-
-## Usage
-
-1. Install Stylus extension for [Firefox](https://addons.mozilla.org/en-US/firefox/addon/styl-us/), [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) or [Opera](https://addons.opera.com/en-gb/extensions/details/stylus/)
-2. Then install with Stylus (click on the link):
- - [๐ป Catppuccin Latte](https://github.com/catppuccin/YouTube/raw/main/src/YouTubeCatppuccinLatte.user.css)
- - [๐ชด Catppuccin Frappe](https://github.com/catppuccin/YouTube/raw/main/src/YouTubeCatppuccinFrappe.user.css)
- - [๐บ Catppuccin Macchiato](https://github.com/catppuccin/YouTube/raw/main/src/YouTubeCatppuccinMacchiato.user.css)
- - [๐ฟ Catppuccin Mocha](https://github.com/catppuccin/YouTube/raw/main/src/YouTubeCatppuccinMocha.user.css)
-3. Choose Your accent color by Setting Theme in Stylus Options
-
-
-4. Make sure your base youtube theme is set to light mode
-
-
-
-
-
-## ๐ Thanks to
-
-- [RaitaroH](https://github.com/RaitaroH/YouTube-DeepDark) - this theme is made by modification of great YouTube-DeepDark theme by RaitaroH
-
-
-
-
-Copyright © 2021-present Catppuccin Org
-
diff --git a/styles/youtube/assets/cat-youtube-alternative.webp b/styles/youtube/assets/cat-youtube-alternative.webp
deleted file mode 100644
index 6e0b68058e..0000000000
Binary files a/styles/youtube/assets/cat-youtube-alternative.webp and /dev/null differ
diff --git a/styles/youtube/assets/cat-youtube.webp b/styles/youtube/assets/cat-youtube.webp
deleted file mode 100644
index 15a061ce93..0000000000
Binary files a/styles/youtube/assets/cat-youtube.webp and /dev/null differ
diff --git a/styles/youtube/assets/frappe.webp b/styles/youtube/assets/frappe.webp
new file mode 100644
index 0000000000..42ae791765
Binary files /dev/null and b/styles/youtube/assets/frappe.webp differ
diff --git a/styles/youtube/assets/latte.webp b/styles/youtube/assets/latte.webp
new file mode 100644
index 0000000000..4b1d8342f4
Binary files /dev/null and b/styles/youtube/assets/latte.webp differ
diff --git a/styles/youtube/assets/macchiato.webp b/styles/youtube/assets/macchiato.webp
new file mode 100644
index 0000000000..b190835738
Binary files /dev/null and b/styles/youtube/assets/macchiato.webp differ
diff --git a/styles/youtube/assets/mocha.webp b/styles/youtube/assets/mocha.webp
new file mode 100644
index 0000000000..4124965a32
Binary files /dev/null and b/styles/youtube/assets/mocha.webp differ
diff --git a/styles/youtube/assets/preview.webp b/styles/youtube/assets/preview.webp
new file mode 100644
index 0000000000..91cc91c7af
Binary files /dev/null and b/styles/youtube/assets/preview.webp differ
diff --git a/styles/youtube/assets/update-image.webp b/styles/youtube/assets/update-image.webp
new file mode 100644
index 0000000000..7619fe5432
Binary files /dev/null and b/styles/youtube/assets/update-image.webp differ
diff --git a/styles/youtube/assets/youtube-frappe.webp b/styles/youtube/assets/youtube-frappe.webp
deleted file mode 100644
index e975364a16..0000000000
Binary files a/styles/youtube/assets/youtube-frappe.webp and /dev/null differ
diff --git a/styles/youtube/assets/youtube-latte.webp b/styles/youtube/assets/youtube-latte.webp
deleted file mode 100644
index 2339de266a..0000000000
Binary files a/styles/youtube/assets/youtube-latte.webp and /dev/null differ
diff --git a/styles/youtube/assets/youtube-macchiato.webp b/styles/youtube/assets/youtube-macchiato.webp
deleted file mode 100644
index a106cb16cc..0000000000
Binary files a/styles/youtube/assets/youtube-macchiato.webp and /dev/null differ
diff --git a/styles/youtube/assets/youtube-mocha.webp b/styles/youtube/assets/youtube-mocha.webp
deleted file mode 100644
index bae3f86327..0000000000
Binary files a/styles/youtube/assets/youtube-mocha.webp and /dev/null differ
diff --git a/styles/youtube/src/YouTubeCatppuccinMocha.user.css b/styles/youtube/catppuccin.user.css
similarity index 92%
rename from styles/youtube/src/YouTubeCatppuccinMocha.user.css
rename to styles/youtube/catppuccin.user.css
index 5bc4806440..7abfa77e75 100644
--- a/styles/youtube/src/YouTubeCatppuccinMocha.user.css
+++ b/styles/youtube/catppuccin.user.css
@@ -1,35 +1,21 @@
/* ==UserStyle==
-@name YouTube Catppuccin-Mocha
-@namespace github.com/catppuccin/YouTube
-@homepageURL https://github.com/catppuccin/YouTube
-@version 1.3.7
-@updateURL https://github.com/catppuccin/YouTube/raw/main/src/YouTubeCatppuccinMocha.user.css
+@name YouTube Catppuccin
+@namespace github.com/catppuccin/userstyles/youtube
+@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/youtube
+@version 2.1.0
+@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/youtube/catppuccin.user.css
@description Soothing pastel theme for YouTube
-@author elkrien based on RaitaroH Youtube-DeepDark (github.com/RaitaroH/YouTube-DeepDark)
+@author isabelroses
@license GNU-V3.0
@preprocessor stylus
-@var select stylus-deepdark-style "Preset themes" [
- "Catppuccin-Mocha-Green",
- "Catppuccin-Mocha-Flamingo",
- "Catppuccin-Mocha-Mauve",
- "Catppuccin-Mocha-Pink",
- "Catppuccin-Mocha-Lavender",
- "Catppuccin-Mocha-Red",
- "Catppuccin-Mocha-Peach",
- "Catppuccin-Mocha-Yellow",
- "Catppuccin-Mocha-Teal",
- "Catppuccin-Mocha-Blue",
- "Catppuccin-Mocha-Sky",
- "Catppuccin-Mocha-Maroon",
- "Catppuccin-Mocha-Sapphire",
- "Catppuccin-Mocha-Rosewater",
- "Custom"
-]
-
-@var checkbox join-color "Use dark join button" 1
+@var select theme "Theme" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*", "custom:Custom"]
+@var select accent "Accent" ["'rosewater'", "'flamingo'", "'pink'", "'mauve'", "'red'", "'maroon'", "'peach'", "'yellow'", "'green'", "'teal'", "'blue'*", "'sapphire'", "'sky'", "'lavender'"]
+
+@var checkbox join-color "Use dark join button" 0
@var checkbox subscribe-color "Use dark subscribe button" 0
+@var checkbox oled "Enable for black bars" 0
@var text scrollbar_width "Scrollbar width" 6px
@var color scrollbar_track "Scrollbar background" "rgba(0,0,0, 0)"
@@ -44,169 +30,21 @@
@var color colorShadow "Custom shadow color" "rgba(56, 60, 74, .3)"
==/UserStyle== */
-@-moz-document regexp('https?:\\/\\/(?!gaming\\.)(?!music\\.)(?!tv\\.)(?!artists\\.)(?!studio\\.).*youtube(?!kids\\.).*\\.com\\/(?!premium|howyoutubeworks).*$') {
-
- /* Author : Theme made by RaitaroH & modified for Catppuccin by elkrien */
- /* Co-authors : https://github.com/MechaLynx https://github.com/MaximeRF */
- /* Home : https://github.com/catppuccin/YouTube */
- /* Licence : GNU General Public License v3.0 */
+@-moz-document regexp('https?:\\/\\/(?!gaming\\.)(?!consent\\.)(?!vr\\.)(?!music\\.)(?!tv\\.)(?!artists\\.)(?!studio\\.).*youtube(?!kids\\.).*\\.com\\/(?!premium|howyoutubeworks).*$') {
+ /* Catppuccin Palette */
+ @import url("https://unpkg.com/@catppuccin/palette@0.1.6/css/catppuccin.css");
+ :root {
+ --ctp-text: var(--ctp- + theme + "-text");
+ --ctp-overlay2: var(--ctp- + theme + "-overlay2");
+ --ctp-surface0: var(--ctp- + theme + "-surface0");
+ --ctp-base: var(--ctp- + theme + "-base");
+ --ctp-mantle: var(--ctp- + theme + "-mantle");
+ --ctp-crust: var(--ctp- + theme + "-crust");
+ --accent: var(--ctp- + theme + "-" + accent);
+ }
/*Main color variables*/
:root {
- if stylus-deepdark-style=="Catppuccin-Mocha-Green" {
- --main-color: #A6E3A1;
- --main-background: #1E1E2E;
- --second-background: #181825;
- --player-background: #11111B;
- --hover-background: #313244;
- --main-text: #CDD6F4;
- --dimmer-text: #9399B2;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Mocha-Lavender" {
- --main-color: #B4BEFE;
- --main-background: #1E1E2E;
- --second-background: #181825;
- --player-background: #11111B;
- --hover-background: #313244;
- --main-text: #CDD6F4;
- --dimmer-text: #9399B2;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Mocha-Flamingo" {
- --main-color: #F2CDCD;
- --main-background: #1E1E2E;
- --second-background: #181825;
- --player-background: #11111B;
- --hover-background: #313244;
- --main-text: #CDD6F4;
- --dimmer-text: #9399B2;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Mocha-Mauve" {
- --main-color: #CBA6F7;
- --main-background: #1E1E2E;
- --second-background: #181825;
- --player-background: #11111B;
- --hover-background: #313244;
- --main-text: #CDD6F4;
- --dimmer-text: #9399B2;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Mocha-Pink" {
- --main-color: #F5C2E7;
- --main-background: #1E1E2E;
- --second-background: #181825;
- --player-background: #11111B;
- --hover-background: #313244;
- --main-text: #CDD6F4;
- --dimmer-text: #9399B2;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Mocha-Red" {
- --main-color: #F38BA8;
- --main-background: #1E1E2E;
- --second-background: #181825;
- --player-background: #11111B;
- --hover-background: #313244;
- --main-text: #CDD6F4;
- --dimmer-text: #9399B2;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Mocha-Peach" {
- --main-color: #FAB387;
- --main-background: #1E1E2E;
- --second-background: #181825;
- --player-background: #11111B;
- --hover-background: #313244;
- --main-text: #CDD6F4;
- --dimmer-text: #9399B2;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Mocha-Yellow" {
- --main-color: #F9E2AF;
- --main-background: #1E1E2E;
- --second-background: #181825;
- --player-background: #11111B;
- --hover-background: #313244;
- --main-text: #CDD6F4;
- --dimmer-text: #9399B2;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Mocha-Teal" {
- --main-color: #94E2D5;
- --main-background: #1E1E2E;
- --second-background: #181825;
- --player-background: #11111B;
- --hover-background: #313244;
- --main-text: #CDD6F4;
- --dimmer-text: #9399B2;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Mocha-Blue" {
- --main-color: #89B4FA;
- --main-background: #1E1E2E;
- --second-background: #181825;
- --player-background: #11111B;
- --hover-background: #313244;
- --main-text: #CDD6F4;
- --dimmer-text: #9399B2;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Mocha-Sky" {
- --main-color: #89DCEB;
- --main-background: #1E1E2E;
- --second-background: #181825;
- --player-background: #11111B;
- --hover-background: #313244;
- --main-text: #CDD6F4;
- --dimmer-text: #9399B2;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Mocha-Maroon" {
- --main-color: #EBA0AC;
- --main-background: #1E1E2E;
- --second-background: #181825;
- --player-background: #11111B;
- --hover-background: #313244;
- --main-text: #CDD6F4;
- --dimmer-text: #9399B2;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Mocha-Sapphire" {
- --main-color: #74C7EC;
- --main-background: #1E1E2E;
- --second-background: #181825;
- --player-background: #11111B;
- --hover-background: #313244;
- --main-text: #CDD6F4;
- --dimmer-text: #9399B2;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Mocha-Rosewater" {
- --main-color: #F5E0DC;
- --main-background: #1E1E2E;
- --second-background: #181825;
- --player-background: #11111B;
- --hover-background: #313244;
- --main-text: #CDD6F4;
- --dimmer-text: #9399B2;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Custom" {
+ if theme=="custom" {
--main-color: mainColor;
--main-background: mainBackground;
--second-background: secondBackground;
@@ -216,14 +54,47 @@
--dimmer-text: dimmerText;
--shadow: 0 1px 0.5px colorShadow;
}
+ else {
+ --main-color: var(--accent);
+ --main-background: var(--ctp-base);
+ --second-background: var(--ctp-mantle);
+ --player-background: var(--ctp-crust);
+ --hover-background: var(--ctp-surface0);
+ --main-text: var(--ctp-text);
+ --dimmer-text: var(--ctp-overlay2);
+ --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
+ }
}
/*Error page*/
- #error-page {
+ #error-page,
+ #error-page-content {
background-color: var(--main-background) !important;
+ }
+
+ #error-page-content > p,
+ #yt-masthead #logo-container .content-region {
color: var(--main-text) !important;
+ text-shadow: none;
+ }
+
+ #yt-masthead #logo-container .logo {
+ filter: invert(1) grayscale(1);
}
+ #error-page-content #yt-masthead #masthead-search #masthead-search-terms-border input[type="text"] {
+ color: var(--main-text) !important;
+ }
+
+ #error-page-content #yt-masthead #masthead-search #masthead-search-terms-border input[type="text"]:focus {
+ color: var(--main-color) !important;
+ }
+
+ #error-page-content #yt-masthead #masthead-search #masthead-search-terms-border .search-button {
+ background-color: var(--secondary-background) !important;
+ }
+
+
* {
scrollbar-color: var(--main-color) scrollbar_track !important;
scrollbar-width: thin !important;
@@ -291,13 +162,13 @@
/*Changed text highlight*/
::selection {
- background: var(--main-color) !important;
- color: var(--hover-background) !important;
+ background: var(--hover-background) !important;
+ color: var(--main-text) !important;
}
::-moz-selection {
- background: var(--main-color) !important;
- color: var(--hover-background) !important;
+ background: var(--hover-background) !important;
+ color: var(--main-text) !important;
}
/*Outline for links*/
@@ -324,8 +195,8 @@
/*Nav bar*/
ytd-masthead,
#yt-masthead-container,
- #masthead-positioner-height-offset/*account page*/
- {
+ #masthead-positioner-height-offset {
+ /*account page*/
background-color: var(--second-background) !important;
border-bottom-color: var(--hover-background) !important;
}
@@ -338,7 +209,9 @@
fill: var(--main-color) !important;
}
- #logo-icon-container.ytd-topbar-logo-renderer #youtube-paths.ytd-topbar-logo-renderer path.ytd-topbar-logo-renderer {
+ #logo-icon-container.ytd-topbar-logo-renderer #youtube-paths.ytd-topbar-logo-renderer path.ytd-topbar-logo-renderer,
+ #youtube-red-paths {
+ /*premium*/
fill: var(--main-text) !important;
}
@@ -530,13 +403,17 @@
}
yt-chip-cloud-chip-renderer:not([selected]) {
- background-color: var(--main-background) !important;
- border-color: var(--hover-background) !important;
+ background-color: var(--second-background) !important;
+ }
+
+ yt-chip-cloud-chip-renderer[modern-chips][chip-style] {
+ border: 1px solid var(--yt-spec-10-percent-layer);
}
yt-chip-cloud-chip-renderer[selected],
yt-chip-cloud-chip-renderer:hover {
background-color: var(--hover-background) !important;
+ border-color: var(--main-color) !important;
}
yt-chip-cloud-renderer {
@@ -588,12 +465,20 @@
}
/* poll results */
- .text-area.ytd-backstage-poll-renderer,
- paper-item.ytd-backstage-poll-renderer[selected] .progress-bar.ytd-backstage-poll-renderer,
- .progress-bar.ytd-backstage-poll-renderer {
+ /*your selection*/
+ tp-yt-paper-item.ytd-backstage-poll-renderer[selected] .progress-bar.ytd-backstage-poll-renderer {
background-color: var(--main-color) !important;
}
+ tp-yt-paper-item.ytd-backstage-poll-renderer[selected] .choice-info .choice-text {
+ color: var(--main-text) !important;
+ }
+
+ /*other bars*/
+ .progress-bar.ytd-backstage-poll-renderer {
+ background-color: var(--second-background) !important;
+ }
+
ytd-backstage-poll-renderer:not([is-image-poll]) tp-yt-paper-item.ytd-backstage-poll-renderer .choice-info.ytd-backstage-poll-renderer {
border-color: transparent !important;
}
@@ -702,7 +587,13 @@
color: var(--main-color) !important;
}
- #content-attachment ytd-video-renderer {
+ #content-attachment.ytd-backstage-post-renderer ytd-video-renderer.ytd-backstage-post-renderer,
+ /*normal video*/
+ #content-attachment.ytd-backstage-post-renderer ytd-playlist-renderer.ytd-backstage-post-renderer,
+ /*playlist*/
+ #content-attachment.ytd-post-renderer ytd-video-renderer.ytd-post-renderer,
+ /*normal video, but in cards on home page*/
+ #content-attachment.ytd-post-renderer ytd-playlist-renderer.ytd-post-renderer {
background: var(--hover-background) !important;
}
@@ -862,18 +753,18 @@
background-color: transparent !important;
}
- input.yt-clip-creation-scrubber-renderer/*time*/
- {
+ /*time*/
+ input.yt-clip-creation-scrubber-renderer {
border-color: var(--dimmer-text) !important;
}
- #handles.yt-clip-creation-scrubber-view/*preview*/
- {
+ /*preview*/
+ #handles.yt-clip-creation-scrubber-view {
border-color: var(--main-color) !important;
}
- .handle.yt-clip-creation-scrubber-view/*preview*/
- {
+ /*preview*/
+ .handle.yt-clip-creation-scrubber-view {
background-color: var(--main-color) !important;
}
@@ -895,6 +786,7 @@
yt-button-renderer.yt-clip-creation-renderer .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled,
ytd-button-renderer.ytd-clip-section-footer-renderer .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
background-color: var(--main-color) !important;
+ color: var(--main-text) !important;
}
/*Join this channel panel > Join button,
@@ -923,6 +815,8 @@
/*ttile*/
ytd-grid-video-renderer.use-ellipsis #details.ytd-grid-video-renderer a.ytd-grid-video-renderer,
ytd-compact-video-renderer.use-ellipsis #video-title.ytd-compact-video-renderer,
+ .ytd-video-renderer-wiz__video-title,
+ .ytd-channel-name-wiz__text,
#video-title.ytd-video-renderer,
h3.ytd-playlist-renderer,
#video-title.ytd-child-video-renderer,
@@ -943,6 +837,7 @@
a.yt-simple-endpoint.ytd-playlist-panel-video-renderer:hover #unplayableText,
.style-scope.ytd-grid-renderer.use-ellipsis:hover #video-title,
#video-title:hover,
+ ytd-channel-name-wiz__text:hover,
ytd-grid-video-renderer:hover #video-title.yt-simple-endpoint.ytd-grid-video-renderer {
color: var(--main-color) !important;
}
@@ -1032,12 +927,12 @@
}
/*Next and prev buttons*/
+ /*share link*/
.arrow.yt-horizontal-list-renderer,
#scroll-button-forward,
.arrow.ytd-horizontal-card-list-renderer,
.ytd-horizontal-card-list-renderer[arrow],
- .scroll-button.yt-third-party-share-target-section-renderer/*share link*/
- {
+ .scroll-button.yt-third-party-share-target-section-renderer {
background-color: var(--hover-background) !important;
}
@@ -1076,8 +971,7 @@
ytd-single-option-survey-renderer,
ytd-survey-follow-up-renderer[dialog][dialog][dialog],
ytd-survey-follow-up-renderer,
- ytd-checkbox-survey-renderer[dialog][dialog][dialog]/*TODO: forgot to test if the [dialog] is even needed*/
- {
+ ytd-checkbox-survey-renderer[dialog][dialog][dialog] {
background-color: var(--hover-background) !important;
box-shadow: var(--shadow) !important;
}
@@ -1098,7 +992,8 @@
}
/*rate a video to improve youtube*/
- #star-survey.ytd-inline-survey-renderer {
+ #star-survey.ytd-inline-survey-renderer,
+ .survey-wrapper.ytd-inline-survey-renderer {
background-color: var(--second-background) !important;
}
@@ -1111,6 +1006,15 @@
border-color: var(--hover-background) !important;
}
+ #follow-up-survey.ytd-inline-survey-renderer {
+ border-left: 4px solid var(--hover-background) !important;
+ }
+
+ /*submit button*/
+ #submit-btn-footer.ytd-inline-survey-renderer .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
+ background-color: var(--main-color) !important;
+ }
+
/*not sure tell us why followup*/
#title.ytd-inline-survey-renderer,
#follow-up-title.ytd-inline-survey-renderer,
@@ -1118,6 +1022,11 @@
color: var(--main-color) !important;
}
+ /*checkboxes cards*/
+ tp-yt-paper-checkbox.ytd-checkbox-survey-option-renderer {
+ background-color: var(--hover-background) !important;
+ }
+
/*background and close button*/
ytd-inline-survey-renderer[expanded] #dismissable.ytd-inline-survey-renderer,
#dismiss-button.ytd-inline-survey-renderer {
@@ -1227,6 +1136,16 @@
background-color: var(--main-background) !important;
}
+
+ .yt-spec-button-shape-next[aria-label="Buy and Send"] .yt-spec-button-shape-next--button-text-content .yt-core-attributed-string,
+ .yt-spec-button-shape-next[aria-label="Got it"] .yt-spec-button-shape-next--button-text-content .yt-core-attributed-string {
+ color: var(--main-background) !important;
+ }
+
+ #comment-chip-price {
+ color: var(--main-text) !important;
+ }
+
/*remove white image in the header*/
yt-pdg-buy-flow-header-renderer {
background: transparent !important;
@@ -1236,6 +1155,10 @@
border-color: var(--hover-background) !important;
}
+ #container.ytd-pdg-comment-preview-renderer:focus-within {
+ border-color: var(--main-color) !important;
+ }
+
/*bonus*/
#title-background.ytd-pdg-comment-preview-renderer {
background-color: var(--hover-background) !important;
@@ -1266,14 +1189,6 @@
/*subscribe button*/
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled,
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
- tp-yt-paper-button.ytd-subscribe-button-renderer {
- color: var(--second-background) !important;
- }
-
- tp-yt-paper-button.ytd-subscribe-button-renderer[subscribed] {
- background-color: var(--main-color);
- }
-
/*NOTE: this affects other material buttons - I would say desired effect*/
.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled,
.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled:hover,
@@ -1290,6 +1205,17 @@
color: var(--main-text) !important;
}
+ .yt-spec-button-shape-next[aria-label^="Subscribe to"] {
+ background-color: var(--main-color) !important;
+ border-color: var(--second-background) !important;
+ box-shadow: var(--shadow) !important;
+ color: var(--main-text) !important;
+ }
+
+ .yt-spec-button-shape-next[aria-label^="Subscribe to"] > .yt-spec-button-shape-next--button-text-content > .yt-core-attributed-string {
+ color: var(--main-background) !important;
+ }
+
/*unsubscribe confirm dialog*/
.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text {
color: var(--main-color) !important;
@@ -1303,8 +1229,9 @@
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal[aria-label="Join this channel"],
.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled/*in window*/
{
- background-color: var(--second-background) !important;
+ background-color: var(--main-color) !important;
border-color: var(--second-background) !important;
+ color: var(--main-background) !important;
}
/*comment button*/
@@ -1314,9 +1241,20 @@
}
/*download panel > get trial button*/
+ ytd-offline-promo-renderer.ytd-popup-container yt-button-renderer#action-button .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
+ background-color: var(--main-color) !important;
+ color: var(--main-text) !important;
+ }
+
/*share panel > copy button*/
- ytd-offline-promo-renderer.ytd-popup-container yt-button-renderer#action-button .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled,
yt-third-party-network-section-renderer.ytd-unified-share-panel-renderer yt-button-renderer#copy-button .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
+ color: var(--main-background) !important;
+ }
+
+ /*Thanks panel > "Buy and Send" button*/
+ /*Thanks panel > About Super Thanks panel > "Got it" button*/
+ ytd-button-renderer#buy-button.yt-super-vod-buy-flow-content-renderer .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled,
+ yt-button-renderer#confirm-button.yt-confirm-dialog-renderer .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
background-color: var(--main-color) !important;
color: var(--main-text) !important;
}
@@ -1334,22 +1272,40 @@
if join-color/*overwriting the above*/
{
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal[aria-label="Join this channel"] {
- background-color: var(--main-color) !important;
- border-color: var(--main-color) !important;
+ background-color: var(--second-background) !important;
+ border-color: var(second-background) !important;
+ color: var(--main-text) !important;
}
}
if subscribe-color/*overwriting the above*/
{
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled,
+ .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
+ /*NOTE: this affects other material buttons - I would say desired effect*/
.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled,
.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled:hover,
/*on shorts*/
+ .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal,
+ .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal:hover,
+ /*on shorts*/
.ytp-sb-subscribe,
- a.ytp-sb-subscribe/*in cards*/
+ a.ytp-sb-subscribe/*in cards... why yt why*/
{
- background-color: var(--main-color) !important;
- border-color: var(--main-color) !important;
+ background-color: var(--second-background) !important;
+ border-color: var(--second-background) !important;
+ box-shadow: var(--shadow) !important;
+ color: var(--main-text) !important;
+ }
+
+ .yt-spec-button-shape-next[aria-label^="Subscribe to"] > .yt-spec-button-shape-next--button-text-content > .yt-core-attributed-string {
+ color: var(--main-text) !important;
+ }
+ }
+
+ if oled {
+ #ytd-player #container {
+ background: #000 !important;
}
}
@@ -1632,7 +1588,9 @@
/* progress bar */
.html5-video-player:not(.ytp-color-party) .html5-play-progress,
- .html5-video-player:not(.ytp-color-party) .ytp-play-progress {
+ .html5-video-player:not(.ytp-color-party) .ytp-play-progress,
+ .progress-bar-played.ytd-progress-bar-line/* on shorts*/
+ {
background: var(--main-color) !important;
}
@@ -1663,10 +1621,15 @@
}
.ytp-cued-thumbnail-overlay:hover .ytp-large-play-button-bg,
- .ytp-large-play-button.ytp-touch-device .ytp-large-play-button-bg {
+ .ytp-large-play-button.ytp-touch-device .ytp-large-play-button-bg,
+ .ytp-large-play-button svg path[fill="#f00"] {
fill: var(--main-color) !important;
}
+ .ytp-large-play-button svg path[fill="#fff"] {
+ fill: var(--second-background) !important;
+ }
+
.ytp-large-play-button.ytp-button.ytp-red2:hover,
.ytp-cued-thumbnail-overlay:hover .ytp-large-play-button.ytp-button.ytp-red2 {
/*background-image: url(https://github.com/RaitaroH/YouTube-DeepDark/raw/master/YT_Images/large_play_button_hover_ringo-vfl7vEehF.png) !important;*/
@@ -1824,13 +1787,14 @@
ytd-topbar-logo-renderer.style-scope a svg > g > g:nth-child(1) > path:nth-child(1),
/*cookie version*/
svg.ytd-consent-bump-v2-lightbox > g:nth-child(1) > g:nth-child(1) > path:nth-child(1) {
- /*fill: var(--hover-background) !important;*/
+ fill: var(--main-color) !important;
}
+ #logo-icon-container.ytd-topbar-logo-renderer svg g path[fill*="white"],
ytd-topbar-logo-renderer.style-scope a svg > g > g:nth-child(1) > path:nth-child(2),
/*cookie version*/
g.ytd-consent-bump-v2-lightbox:nth-child(2) > g:nth-child(1) > * {
- fill: var(--main-text) !important;
+ fill: var(--second-background) !important;
}
ytd-topbar-logo-renderer.style-scope a svg > g > g:nth-child(2) > g,
@@ -2102,6 +2066,12 @@
border-color: var(--second-background) !important;
}
+ /*chapter buttons button, ๐ and close*/
+ ytd-engagement-panel-section-list-renderer .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text yt-icon {
+ fill: var(--dimmer-text) !important;
+ stroke: var(--dimmer-text) !important;
+ }
+
/*Search bar*/
ytd-searchbox[mode="legacy"] #container.ytd-searchbox,
ytd-searchbox[mode="material-centered"] #container.ytd-searchbox,
@@ -2352,7 +2322,7 @@
/*Search results related to item searched*/
a.ytd-search-refinement-card-renderer {
background-color: var(--second-background) !important;
- border-color: var(--hover-background) !important;
+ border-color: var(--second-background) !important;
border-radius: 8px !important;
}
@@ -2389,6 +2359,10 @@
color: var(--dimmer-text) !important;
}
+ .yt-core-attributed-string__link--call-to-action-color {
+ color: var(--dimmer-text) !important;
+ }
+
/*Comments*/
yt-formatted-string.ytd-comments-header-renderer,
#contenteditable-root.yt-formatted-string[aria-label].yt-formatted-string:empty::before,
@@ -2466,10 +2440,6 @@
color: var(--main-text) !important;
}
- #author-text.yt-simple-endpoint.ytd-comment-renderer:hover {
- color: var(--main-color) !important;
- }
-
ytd-author-comment-badge-renderer {
background-color: var(--hover-background) !important;
}
@@ -2839,10 +2809,9 @@
}
/*donate button*/
- #donate-section.ytd-donation-shelf-renderer ytd-button-renderer.style-primary[is-paper-button],
- .b3-button.jfk-button,
- .b3-button.jfk-button.jfk-button-action {
+ .style-scope.ytd-donation-shelf-renderer .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
background-color: var(--main-color) !important;
+ color: var(--main-text) !important;
}
/*donate window*/
@@ -3000,11 +2969,12 @@
/*bell icon notification count*/
.yt-spec-icon-badge-shape--type-notification .yt-spec-icon-badge-shape__badge {
background-color: var(--main-color) !important;
+ color: var(--main-background) !important;
border: none !important;
}
button.yt-icon-button:hover .yt-spec-icon-badge-shape--type-notification .yt-spec-icon-badge-shape__badge {
- color: var(--main-text) !important;
+ color: var(--main-background) !important;
}
/*load spinner - also for comments*/
@@ -3031,6 +3001,15 @@
color: var(--main-text) !important;
}
+ /*gear icon*/
+ ytd-simple-menu-header-renderer .yt-spec-button-shape-next__icon {
+ color: var(--main-text) !important;
+ }
+
+ ytd-simple-menu-header-renderer .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text:hover .yt-spec-button-shape-next__icon {
+ color: var(--main-color) !important;
+ }
+
.metadata.ytd-notification-renderer,
.exp-responsive .yt-lockup-tile .yt-lockup-byline/*account settings*/
{
@@ -3112,6 +3091,14 @@
}
/*Cards*/
+ .iv-drawer-content {
+ background-color: var(--shadow) !important;
+ }
+
+ .iv-drawer-header-text {
+ color: var(--main-text) !important;
+ }
+
.iv-card-content,
.ytp-ce-expanding-overlay-background,
.ytp-cards-teaser .ytp-cards-teaser-text,
@@ -3533,6 +3520,11 @@
color: var(--main-text) !important;
}
+ #contents .ytd-item-section-renderer,
+ #contents #main-content {
+ background-color: var(--main-backgorund) !important;
+ }
+
/*Reporting*/
.introduction-header {
color: var(--main-text) !important;
@@ -3680,11 +3672,6 @@
}
/*Premium*/
- /*Logo icon - Premium*/
- yt-icon.ytd-logo {
- color: var(--main-text);
- }
-
/*video*/
#main-title.ytd-unlimited-offer-module-renderer {
color: var(--main-text) !important;
@@ -4123,6 +4110,19 @@
color: var(--main-text) !important;
}
+ /*Fix like, dislike and share icons and text using wrong color*/
+ .yt-spec-button-shape-next__icon,
+ .ytd-segmented-like-dislike-button-renderer > yt-button-shape > button > .yt-spec-button-shape-next--button-text-content,
+ .ytd-menu-renderer > yt-button-shape > button > .yt-spec-button-shape-next--button-text-content,
+ .yt-spec-button-shape-next > span#text {
+ color: var(--main-text)
+ }
+
+ /*Player tooltip background*/
+ .ytp-tooltip-text {
+ background: var(--hover-background) !important
+ }
+
.yt-picker-header,
#safety-form p.safety-submit/*divider*/
{
@@ -4175,6 +4175,33 @@
border-color: var(--hover-background) !important;
}
+ .yt-spec-button-shape-next[aria-label="Donate"] .yt-spec-button-shape-next--button-text-content .yt-core-attributed-string {
+ color: var(--main-background) !important;
+ }
+
+ /*clip share*/
+ .ytd-clip-section-renderer {
+ background-color: var(--main-background) !important;
+ }
+
+ .yt-spec-button-shape-next[aria-label="Share clip"] .yt-spec-button-shape-next--button-text-content .yt-core-attributed-string,
+ .yt-spec-button-shape-next[aria-label="Watch full video"] .yt-spec-button-shape-next--button-text-content .yt-core-attributed-string {
+ color: var(--main-background) !important;
+ }
+
+ .yt-spec-button-shape-next[aria-label="Share clip"] {
+ background-color: var(--main-color) !important;
+ }
+
+ .yt-spec-button-shape-next[aria-label="Share clip"]:hover {
+ background-color: var(--main-color) !important;
+ }
+
+ /*Watch on YouTube*/
+ #offer-module .ytd-watch-next-secondary-results-renderer,
+ #offer-module .ytd-tvfilm-offer-module-renderer {
+ background-color: var(--second-background) !important;
+ }
/*SponsorBlock*/
/*logo change*/
@@ -4204,19 +4231,6 @@
.sponsorBlockTooltip {
background-color: var(--hover-background) !important;
}
-
- /*Fix like, dislike and share icons and text using wrong color*/
- .yt-spec-button-shape-next__icon,
- .ytd-segmented-like-dislike-button-renderer > yt-button-shape > button > .yt-spec-button-shape-next--button-text-content,
- .ytd-menu-renderer > yt-button-shape > button > .yt-spec-button-shape-next--button-text-content,
- .yt-spec-button-shape-next > span#text {
- color: var(--main-text)
- }
-
- /*Player tooltip background*/
- .ytp-tooltip-text {
- background: var(--hover-background) !important
- }
}
@-moz-document url-prefix('https://www.youtube.com/redirect') {
@@ -4278,8 +4292,3 @@
color: var(--main-text) !important;
}
}
-
-/* Youtube buttons shape */
-.yt-core-attributed-string--white-space-no-wrap {
- color: var(--main-color);
-}
diff --git a/styles/youtube/src/YouTubeCatppuccinFrappe.user.css b/styles/youtube/src/YouTubeCatppuccinFrappe.user.css
deleted file mode 100644
index 363bdf9f1f..0000000000
--- a/styles/youtube/src/YouTubeCatppuccinFrappe.user.css
+++ /dev/null
@@ -1,4285 +0,0 @@
-/* ==UserStyle==
-@name YouTube Catppuccin-Frappe
-@namespace github.com/catppuccin/YouTube
-@homepageURL https://github.com/catppuccin/YouTube
-@version 1.3.7
-@updateURL https://github.com/catppuccin/YouTube/raw/main/src/YouTubeCatppuccinFrappe.user.css
-@description Soothing pastel theme for YouTube
-@author elkrien based on RaitaroH Youtube-DeepDark (github.com/RaitaroH/YouTube-DeepDark)
-@license GNU-V3.0
-
-@preprocessor stylus
-
-@var select stylus-deepdark-style "Preset themes" [
- "Catppuccin-Frappe-Green",
- "Catppuccin-Frappe-Flamingo",
- "Catppuccin-Frappe-Mauve",
- "Catppuccin-Frappe-Pink",
- "Catppuccin-Frappe-Lavender",
- "Catppuccin-Frappe-Red",
- "Catppuccin-Frappe-Peach",
- "Catppuccin-Frappe-Yellow",
- "Catppuccin-Frappe-Teal",
- "Catppuccin-Frappe-Blue",
- "Catppuccin-Frappe-Sky",
- "Catppuccin-Frappe-Maroon",
- "Catppuccin-Frappe-Sapphire",
- "Catppuccin-Frappe-Rosewater",
- "Custom"
-]
-
-@var checkbox join-color "Use dark join button" 1
-@var checkbox subscribe-color "Use dark subscribe button" 0
-
-@var text scrollbar_width "Scrollbar width" 6px
-@var color scrollbar_track "Scrollbar background" "rgba(0,0,0, 0)"
-
-@var color mainColor "Custom main color" "#8CAAEE"
-@var color mainBackground "Custom main background" "#303466"
-@var color secondBackground "Custom second background" "#292C3C"
-@var color playerBackground "Custom player background" "#232634"
-@var color hoverBackground "Custom hover background" "#414559"
-@var color mainText "Custom main text" "#C6D0F5"
-@var color dimmerText "Custom second text" "#949CBB"
-@var color colorShadow "Custom shadow color" "rgba(56, 60, 74, .3)"
-
-==/UserStyle== */
-@-moz-document regexp('https?:\\/\\/(?!gaming\\.)(?!music\\.)(?!tv\\.)(?!artists\\.)(?!studio\\.).*youtube(?!kids\\.).*\\.com\\/(?!premium|howyoutubeworks).*$') {
-
- /* Author : Theme made by RaitaroH & modified for Catppuccin by elkrien */
- /* Co-authors : https://github.com/MechaLynx https://github.com/MaximeRF */
- /* Home : https://github.com/catppuccin/YouTube */
- /* Licence : GNU General Public License v3.0 */
- /*Main color variables*/
- :root {
- if stylus-deepdark-style=="Catppuccin-Frappe-Green" {
- --main-color: #A6D189;
- --main-background: #303446;
- --second-background: #292C3C;
- --player-background: #232634;
- --hover-background: #414559;
- --main-text: #C6D0F5;
- --dimmer-text: #949CBB;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Frappe-Lavender" {
- --main-color: #BABBF1;
- --main-background: #303446;
- --second-background: #292C3C;
- --player-background: #232634;
- --hover-background: #414559;
- --main-text: #C6D0F5;
- --dimmer-text: #949CBB;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Frappe-Flamingo" {
- --main-color: #EEBEBE;
- --main-background: #303446;
- --second-background: #292C3C;
- --player-background: #232634;
- --hover-background: #414559;
- --main-text: #C6D0F5;
- --dimmer-text: #949CBB;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Frappe-Mauve" {
- --main-color: #CA9EE6;
- --main-background: #303446;
- --second-background: #292C3C;
- --player-background: #232634;
- --hover-background: #414559;
- --main-text: #C6D0F5;
- --dimmer-text: #949CBB;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Frappe-Pink" {
- --main-color: #F4B8E4;
- --main-background: #303446;
- --second-background: #292C3C;
- --player-background: #232634;
- --hover-background: #414559;
- --main-text: #C6D0F5;
- --dimmer-text: #949CBB;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Frappe-Red" {
- --main-color: #E78284;
- --main-background: #303446;
- --second-background: #292C3C;
- --player-background: #232634;
- --hover-background: #414559;
- --main-text: #C6D0F5;
- --dimmer-text: #949CBB;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Frappe-Peach" {
- --main-color: #EF9F76;
- --main-background: #303446;
- --second-background: #292C3C;
- --player-background: #232634;
- --hover-background: #414559;
- --main-text: #C6D0F5;
- --dimmer-text: #949CBB;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Frappe-Yellow" {
- --main-color: #E5C890;
- --main-background: #303446;
- --second-background: #292C3C;
- --player-background: #232634;
- --hover-background: #414559;
- --main-text: #C6D0F5;
- --dimmer-text: #949CBB;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Frappe-Teal" {
- --main-color: #81C8BE;
- --main-background: #303446;
- --second-background: #292C3C;
- --player-background: #232634;
- --hover-background: #414559;
- --main-text: #C6D0F5;
- --dimmer-text: #949CBB;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Frappe-Blue" {
- --main-color: #8CAAEE;
- --main-background: #303446;
- --second-background: #292C3C;
- --player-background: #232634;
- --hover-background: #414559;
- --main-text: #C6D0F5;
- --dimmer-text: #949CBB;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Frappe-Sky" {
- --main-color: #99D1DB;
- --main-background: #303446;
- --second-background: #292C3C;
- --player-background: #232634;
- --hover-background: #414559;
- --main-text: #C6D0F5;
- --dimmer-text: #949CBB;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Frappe-Maroon" {
- --main-color: #EA999C;
- --main-background: #303446;
- --second-background: #292C3C;
- --player-background: #232634;
- --hover-background: #414559;
- --main-text: #C6D0F5;
- --dimmer-text: #949CBB;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Frappe-Sapphire" {
- --main-color: #85C1DC;
- --main-background: #303446;
- --second-background: #292C3C;
- --player-background: #232634;
- --hover-background: #414559;
- --main-text: #C6D0F5;
- --dimmer-text: #949CBB;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Frappe-Rosewater" {
- --main-color: #F2D5CF;
- --main-background: #303446;
- --second-background: #292C3C;
- --player-background: #232634;
- --hover-background: #414559;
- --main-text: #C6D0F5;
- --dimmer-text: #949CBB;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Custom" {
- --main-color: mainColor;
- --main-background: mainBackground;
- --second-background: secondBackground;
- --player-background: playerBackground;
- --hover-background: hoverBackground;
- --main-text: mainText;
- --dimmer-text: dimmerText;
- --shadow: 0 1px 0.5px colorShadow;
- }
- }
-
- /*Error page*/
- #error-page {
- background-color: var(--main-background) !important;
- color: var(--main-text) !important;
- }
-
- * {
- scrollbar-color: var(--main-color) scrollbar_track !important;
- scrollbar-width: thin !important;
- --yt-spec-text-primary: var(--main-text) !important;
- --yt-spec-text-secondary: var(--dimmer-text) !important;
- --paper-spinner-color: var(--dimmer-text) !important;
-
- --paper-input-container-color: var(--dimmer-text) !important;
-
- --paper-radio-button-unchecked-color: var(--dimmer-text) !important;
- --paper-radio-button-unchecked-background-color: transparent !important;
- --paper-radio-button-checked-color: var(--main-color) !important;
- --paper-radio-button-checked-ink-color: var(--main-color) !important;
- --paper-radio-button-unchecked-ink-color: var(--main-color) !important;
-
- --paper-checkbox-unchecked-color: var(--dimmer-text) !important;
- --paper-checkbox-checked-color: var(--main-color) !important;
- --paper-checkbox-checkmark-color: none !important;
- --paper-checkbox-checked-ink-color: var(--main-color) !important;
- --paper-checkbox-unchecked-ink-color: var(--main-color) !important;
- --yt-spec-call-to-action: var(--main-color) !important;
- --yt-spec-suggested-action: var(--hover-background) !important;
- --yt-spec-outline: var(--hover-background) !important;
- --yt-spec-brand-button-background: var(--main-color) !important;
- /*in incognito this may be used as subscribe button but is inconsistent .yt-spec-button-shape-next--brand.yt-spec-button-shape-next--filled*/
- --yt-formatted-string-bold-color: var(--dimmer-text) !important;
- /*this affects number of views*/
- }
-
- /*Scrollbar fix for chrome*/
- *:not([hide-scrollbar]) ::-webkit-scrollbar-thumb {
- background: var(--main-color) !important;
- }
-
- *:not([hide-scrollbar]) ::-webkit-scrollbar {
- width: scrollbar_width !important;
- }
-
- /*Scrollbar fix for firefox*/
- ::-webkit-scrollbar-track {
- background: scrollbar_track !important;
- }
-
- ::-webkit-scrollbar-thumb {
- background: var(--main-color) !important;
- }
-
- /*Background for the entire page*/
- html,
- ytd-browse,
- ytd-watch,
- ytd-search,
- ytd-app,
- ytd-app[is-watch-page],
- [class*="ytd-watch-flexy"]:not(#engagement-panel-scrim),
- .style-scope.ytd-page-manager.hide-skeleton,
- .account-container {
- background-color: var(--main-background) !important;
- }
-
- /*Border for the sidemenu*/
- #guide-content.ytd-app {
- border-right: 1px solid var(--yt-border-color) !important;
- }
-
- /*Changed text highlight*/
- ::selection {
- background: var(--main-color) !important;
- color: var(--hover-background) !important;
- }
-
- ::-moz-selection {
- background: var(--main-color) !important;
- color: var(--hover-background) !important;
- }
-
- /*Outline for links*/
- a {
- outline-color: var(--main-color) !important;
- }
-
- a:hover {
- color: var(--main-color) !important;
- fill: var(--main-color) !important;
- }
-
- /*Outline for comments*/
- #content-text.ytd-comment-renderer {
- outline: none !important;
- }
-
- /*Placeholder image on pages that need an account - such as Subscriptions*/
- ytd-background-promo-renderer .image.ytd-background-promo-renderer,
- ytd-message-renderer yt-icon.ytd-message-renderer {
- color: var(--main-text) !important;
- }
-
- /*Nav bar*/
- ytd-masthead,
- #yt-masthead-container,
- #masthead-positioner-height-offset/*account page*/
- {
- background-color: var(--second-background) !important;
- border-bottom-color: var(--hover-background) !important;
- }
-
- yt-icon-button svg {
- fill: var(--dimmer-text) !important;
- }
-
- yt-icon-button:hover svg {
- fill: var(--main-color) !important;
- }
-
- #logo-icon-container.ytd-topbar-logo-renderer #youtube-paths.ytd-topbar-logo-renderer path.ytd-topbar-logo-renderer {
- fill: var(--main-text) !important;
- }
-
- /*acount settings page*/
- /*logo*/
- .exp-invert-logo.inverted-hdpi #header::before,
- .exp-invert-logo.inverted-hdpi .ypc-join-family-header .logo,
- .exp-invert-logo.inverted-hdpi #footer-logo .footer-logo-icon,
- .exp-invert-logo.inverted-hdpi #yt-masthead #logo-container .logo,
- .exp-invert-logo.inverted-hdpi #masthead #logo-container,
- .exp-invert-logo.inverted-hdpi .admin-masthead-logo a,
- .exp-invert-logo.inverted-hdpi #yt-sidebar-styleguide-logo #logo {
- filter: invert(1) grayscale(1);
- }
-
- /*buttons*/
- #yt-masthead-creation-button {
- filter: brightness(220%);
- }
-
- #yt-masthead-notifications .yt-uix-button-icon-bell {
- filter: invert(1) brightness(720%);
- }
-
- #sections.ytd-multi-page-menu-renderer > .ytd-multi-page-menu-renderer:not(:last-child) {
- border-color: var(--hover-background) !important;
- }
-
- /*Chat in the header*/
- ytd-conversation-switcher-item-renderer {
- border-color: var(--hover-background) !important;
- }
-
- #last-post.ytd-conversation-switcher-item-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*invite friends*/
- #bar.ytd-copy-connection-invite-url-renderer {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- #icon.ytd-copy-connection-invite-url-renderer {
- color: var(--main-text) !important;
- }
-
- /*chat popup*/
- ytd-conversation-section-renderer {
- background: var(--second-background) !important;
- }
-
- #title-bar.ytd-conversation-section-renderer {
- border-color: var(--hover-background) !important;
- }
-
- ytd-conversation-text-item-renderer[justification-style="JUSTIFICATION_START"] #post-text.ytd-conversation-text-item-renderer,
- ytd-conversation-link-item-renderer[justification-style="JUSTIFICATION_START"] #link.ytd-conversation-link-item-renderer,
- #bar.ytd-conversation-link-item-renderer,
- #thumbnail.ytd-inline-playback-renderer,
- #video-data.ytd-inline-playback-renderer {
- border-color: var(--hover-background) !important;
- background: var(--hover-background) !important;
- }
-
- #post-text.ytd-conversation-text-item-renderer,
- textarea.iron-autogrow-textarea {
- color: var(--main-text) !important;
- }
-
- #displayed-text.ytd-conversation-link-item-renderer,
- #icon.ytd-conversation-link-item-renderer {
- color: var(--main-color) !important;
- }
-
- #metadata.ytd-conversation-metadata-item-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Backgrounds*/
- #like-bar.ytd-sentiment-bar-renderer,
- #progress.ytd-thumbnail-overlay-resume-playback-renderer,
- #selectionBar.paper-tabs {
- background-color: var(--main-color) !important;
- }
-
- /*Sidebar*/
- #guide-content.ytd-app,
- #contentContainer.app-drawer,
- #guide-wrapper.ytd-app {
- background: var(--second-background) !important;
- }
-
- #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer,
- #guide-section-title.ytd-guide-section-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-guide-entry-renderer:hover #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer,
- ytd-guide-entry-renderer:hover svg {
- color: var(--main-color) !important;
- fill: var(--main-color) !important;
- }
-
- ytd-guide-entry-renderer[active] {
- background-color: var(--hover-background) !important;
- }
-
- #sections.ytd-guide-renderer > .ytd-guide-renderer:not(:last-child),
- #guide-links-primary.ytd-guide-renderer,
- #guide-content.ytd-app {
- border-color: var(--hover-background) !important;
- }
-
- #guide-links-primary.ytd-guide-renderer > a,
- #guide-links-secondary.ytd-guide-renderer > a,
- #footer.ytd-guide-renderer > #copyright,
- yt-formatted-string.ytd-guide-signin-promo-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #guide-links-primary.ytd-guide-renderer > a:hover,
- #guide-links-secondary.ytd-guide-renderer > a:hover {
- color: var(--main-color) !important;
- }
-
- /*Compact sidebar fix*/
- ytd-mini-guide-renderer,
- a.ytd-mini-guide-entry-renderer,
- a.ytd-mini-guide-entry-renderer:hover,
- a.ytd-mini-guide-entry-renderer:focus {
- background-color: var(--second-background) !important;
- }
-
- ytd-mini-guide-entry-renderer .guide-icon.ytd-mini-guide-entry-renderer,
- a.ytd-mini-guide-entry-renderer .guide-icon,
- a.ytd-mini-guide-entry-renderer.title.ytd-mini-guide-entry-renderer,
- ytd-mini-guide-entry-renderer .title.ytd-mini-guide-entry-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-mini-guide-entry-renderer[active] .guide-icon.ytd-mini-guide-entry-renderer,
- a.ytd-mini-guide-entry-renderer:hover .guide-icon,
- a.ytd-mini-guide-entry-renderer:hover .title.ytd-mini-guide-entry-renderer,
- ytd-mini-guide-entry-renderer[active] .title.ytd-mini-guide-entry-renderer {
- color: var(--main-color) !important;
- }
-
- #newness-dot.ytd-guide-entry-renderer {
- background-color: var(--main-color) !important;
- }
-
- /*Latest YouTube posts*/
- ytd-post-renderer[surface_="backstage-surface-type-home"],
- ytd-post-renderer[uses-compact-lockup] {
- background-color: var(--second-background) !important;
- }
-
- ytd-post-renderer[surface_="backstage-surface-type-home"] #home-content-text.ytd-post-renderer,
- ytd-post-renderer[surface_="backstage-surface-type-home"][attachment="poll"] #vote-count-text.ytd-post-renderer,
- ytd-post-renderer[uses-compact-lockup] #home-content-text.ytd-post-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-post-renderer[surface_="backstage-surface-type-home"] #author-text.yt-simple-endpoint.ytd-post-renderer {
- color: var(--main-color) !important;
- }
-
- ytd-post-renderer[uses-compact-lockup][attachment="poll"] #vote-count-text.ytd-post-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*vote now button*/
- ytd-post-renderer[uses-compact-lockup] ytd-button-renderer.style-suggestive[is-paper-button] #button.ytd-button-renderer {
- background-color: var(--main-color) !important;
- }
-
- /*Main page video hover preview*/
- #video-preview-container.ytd-video-preview {
- background: var(--second-background) !important;
- }
-
- /*Feed filter*/
- #home-chips/*skeleton*/
- ,
- #chips-wrapper.ytd-feed-filter-chip-bar-renderer {
- background-color: var(--main-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- yt-chip-cloud-chip-renderer:not([selected]) {
- background-color: var(--main-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- yt-chip-cloud-chip-renderer[selected],
- yt-chip-cloud-chip-renderer:hover {
- background-color: var(--hover-background) !important;
- }
-
- yt-chip-cloud-renderer {
- background: transparent !important;
- }
-
- #text.yt-chip-cloud-chip-renderer {
- color: var(--main-text) !important;
- }
-
- #scroll-container.ytd-feed-filter-chip-bar-renderer::after,
- #scroll-container.ytd-feed-filter-chip-bar-renderer::before {
- background: transparent !important;
- }
-
- #left-arrow-button.ytd-feed-filter-chip-bar-renderer,
- #right-arrow-button.ytd-feed-filter-chip-bar-renderer,
- #left-arrow.yt-chip-cloud-renderer,
- #right-arrow.yt-chip-cloud-renderer,
- #left-arrow-button.yt-chip-cloud-renderer,
- #right-arrow-button.yt-chip-cloud-renderer {
- background: var(--main-background) !important;
- }
-
- #left-arrow.ytd-feed-filter-chip-bar-renderer::after,
- #right-arrow.ytd-feed-filter-chip-bar-renderer::before,
- yt-chip-cloud-renderer #right-arrow.yt-chip-cloud-renderer::before,
- yt-chip-cloud-renderer #left-arrow.yt-chip-cloud-renderer::after {
- display: none;
- }
-
- /*new to you filter on video*/
- #content-wrapper.ytd-feed-nudge-renderer {
- background-color: var(--second-background) !important;
- }
-
- yt-chip-cloud-chip-renderer[chip-style="STYLE_REFRESH_TO_NOVEL_CHIP"][selected] {
- background-image: none !important;
- }
-
- /*Covid19 big posts aka rich shelves*/
- /*also other borders*/
- ytd-rich-shelf-renderer,
- #show-more-button.ytd-rich-shelf-renderer,
- ytd-rich-shelf-renderer[is-show-more-hidden] #dismissible.ytd-rich-shelf-renderer,
- #contents.ytd-rich-shelf-renderer,
- ytd-compact-promoted-item-renderer[view-style="COMPACT_PROMOTED_ITEM_STYLE_RICH_GRID"] #dismissible.ytd-compact-promoted-item-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /* poll results */
- .text-area.ytd-backstage-poll-renderer,
- paper-item.ytd-backstage-poll-renderer[selected] .progress-bar.ytd-backstage-poll-renderer,
- .progress-bar.ytd-backstage-poll-renderer {
- background-color: var(--main-color) !important;
- }
-
- ytd-backstage-poll-renderer:not([is-image-poll]) tp-yt-paper-item.ytd-backstage-poll-renderer .choice-info.ytd-backstage-poll-renderer {
- border-color: transparent !important;
- }
-
- #title.ytd-grid-channel-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Channel page*/
- /*header*/
- #channel-header.ytd-c4-tabbed-header-renderer,
- #tabs-inner-container.ytd-c4-tabbed-header-renderer {
- background: var(--hover-background) !important;
- }
-
- #channel-title.ytd-c4-tabbed-header-renderer {
- color: var(--main-text) !important;
- }
-
- #subscriber-count.ytd-c4-tabbed-header-renderer {
- color: var(--dimmer-text) !important;
- }
-
- .tab-content.paper-tab,
- .tab-content.tp-yt-paper-tab {
- color: var(--main-text) !important;
- }
-
- paper-tab:hover .tab-content.paper-tab,
- tp-yt-paper-tab:hover > .tab-content.tp-yt-paper-tab {
- color: var(--main-color) !important;
- }
-
- tp-yt-paper-tabs {
- --paper-tabs-selection-bar-color: var(--main-color) !important;
- }
-
- /*search*/
- .input-content.paper-input-container label,
- .input-content.paper-input-container .paper-input-label,
- #subtitle,
- .style-scope.tp-yt-paper-input {
- color: var(--dimmer-text) !important;
- }
-
- /*arrow button*/
- iron-icon {
- fill: var(--main-text) !important;
- }
-
- iron-icon:hover {
- fill: var(--main-color) !important;
- }
-
- /*side channels*/
- #title:not([class*="ytd-labs"]):not([class*="upsell-offer"]) {
- color: var(--main-text) !important;
- }
-
- .title {
- color: var(--main-text) !important;
- }
-
- .title:hover {
- color: var(--main-color) !important;
- }
-
- #contents > .ytd-browse-secondary-contents-renderer:not(:first-child) {
- border-color: var(--hover-background) !important;
- }
-
- /*videos - uploads*/
- #label-text.yt-dropdown-menu {
- color: var(--main-text) !important;
- }
-
- paper-menu-button.yt-dropdown-menu:hover #label-text.yt-dropdown-menu,
- paper-menu-button.yt-dropdown-menu:hover #label-icon.yt-dropdown-menu svg,
- paper-menu-button.yt-dropdown-menu:hover #icon-label.yt-dropdown-menu {
- color: var(--main-color) !important;
- fill: var(--main-color) !important;
- }
-
- /*community*/
- #message.ytd-message-renderer,
- #content-text.ytd-backstage-post-renderer,
- #repost-content-text.ytd-shared-post-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #author-text,
- .more-button,
- .less-button,
- .align-by-text.ytd-backstage-comments-renderer,
- #toggle.ytd-grid-renderer,
- #repost-author-text.yt-simple-endpoint.ytd-shared-post-renderer {
- color: var(--main-text) !important;
- }
-
- .more-button:hover,
- .less-button:hover,
- .align-by-text.ytd-backstage-comments-renderer:hover,
- #toggle.ytd-grid-renderer:hover,
- #author-text.yt-simple-endpoint.ytd-backstage-post-renderer:hover,
- #repost-author-text.yt-simple-endpoint.ytd-shared-post-renderer:hover {
- color: var(--main-color) !important;
- }
-
- #content-attachment ytd-video-renderer {
- background: var(--hover-background) !important;
- }
-
- #poll-votes.ytd-backstage-poll-renderer {
- background: transparent !important;
- }
-
- .vote-percentage.ytd-backstage-poll-renderer,
- .choice-text.ytd-backstage-poll-renderer,
- #poll-choice-text.ytd-commentbox,
- yt-icon.ytd-backstage-poll-renderer {
- color: var(--main-text) !important;
- }
-
- paper-item[selected].ytd-backstage-poll-renderer #progress-bar.ytd-backstage-poll-renderer {
- background: var(--main-color) !important;
- }
-
- /*about*/
- .subheadline,
- #right-column .subheadline {
- color: var(--main-text) !important;
- }
-
- #description:not([class*="yt-music"]),
- #bio,
- #right-column > yt-formatted-string {
- color: var(--dimmer-text) !important;
- }
-
- #right-column > yt-formatted-string,
- #description-container.ytd-channel-about-metadata-renderer,
- #bio-container.ytd-channel-about-metadata-renderer,
- #photos-container.ytd-channel-about-metadata-renderer,
- #details-container.ytd-channel-about-metadata-renderer,
- #links-container.ytd-channel-about-metadata-renderer {
- border-color: var(--hover-background) !important;
- }
-
- #link-list-container a {
- color: var(--main-color) !important;
- }
-
- #link-list-container:hover a {
- filter: brightness(110%);
- }
-
- /*private message*/
- ytd-form-popup-renderer[dialog][dialog][dialog] {
- background: var(--main-background) !important;
- }
-
- #buttons.ytd-form-popup-renderer {
- border-color: var(--hover-background) !important;
- }
-
- ytd-toggle-menu-service-item-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-toggle-menu-service-item-renderer:hover .style-scope.ytd-toggle-menu-service-item-renderer {
- color: var(--main-color) !important;
- }
-
- ytd-toggle-menu-service-item-renderer:hover {
- background: var(--hover-background) !important;
- }
-
- /*Video page*/
- /*title*/
- .title.ytd-video-primary-info-renderer yt-formatted-string.ytd-video-primary-info-renderer {
- color: var(--main-text) !important;
- }
-
- /*views*/
- span.yt-view-count-renderer,
- span.ytd-video-view-count-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*published date*/
- #date.ytd-video-primary-info-renderer {
- color: var(--dimmer-text) !important;
- }
-
- ytd-video-primary-info-renderer {
- border-color: var(--hover-background) !important;
- }
-
- .content-text.ytd-metadata-with-image-row-renderer {
- color: var(--main-text) !important;
- }
-
- /*Share*/
- paper-dialog,
- tp-yt-paper-dialog {
- background: var(--main-background) !important;
- }
-
- #share-url {
- color: var(--main-text) !important;
- }
-
- #copy-button:hover #text {
- color: var(--main-color) !important;
- }
-
- #bar.yt-copy-link-renderer {
- background-color: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- ytd-third-party-network-section-renderer ytd-copy-link-renderer.ytd-third-party-network-section-renderer,
- yt-start-at-renderer.yt-third-party-network-section-renderer {
- border-color: var(--hover-background) !important;
- }
-
- yt-formatted-string.yt-start-at-renderer,
- #text.ytd-sender-id-section-renderer {
- color: var(--main-text) !important;
- }
-
- /*share embed*/
- #embed-panel.yt-sharing-embed-renderer {
- background: var(--second-background) !important;
- }
-
- #close-panel-icon.yt-sharing-embed-renderer {
- color: var(--main-text) !important;
- }
-
- #close-panel-icon.yt-sharing-embed-renderer:hover {
- color: var(--main-color) !important;
- }
-
- #title-bar.yt-sharing-embed-renderer,
- #additional-info.yt-sharing-embed-renderer,
- #action-buttons.yt-sharing-embed-renderer {
- border-color: var(--hover-background) !important;
- }
-
- #privacy-mode-info.yt-sharing-embed-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*search for people*/
- #to-field-header.ytd-contact-search-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #name.ytd-suggested-contact-renderer {
- color: var(--main-text) !important;
- }
-
- /*Make a clip*/
- #container.yt-clip-creation-renderer {
- background-color: transparent !important;
- }
-
- input.yt-clip-creation-scrubber-renderer/*time*/
- {
- border-color: var(--dimmer-text) !important;
- }
-
- #handles.yt-clip-creation-scrubber-view/*preview*/
- {
- border-color: var(--main-color) !important;
- }
-
- .handle.yt-clip-creation-scrubber-view/*preview*/
- {
- background-color: var(--main-color) !important;
- }
-
- /*buttons*/
- #footer.yt-clip-creation-renderer {
- background-color: var(--second-background) !important;
- }
-
- yt-clip-section-renderer yt-button-renderer.style-primary[is-paper-button],
- yt-clip-creation-renderer yt-button-renderer.style-primary[is-paper-button],
- yt-clip-section-footer-renderer yt-button-renderer.style-primary[is-paper-button] {
- background-color: transparent !important;
- }
-
- yt-button-renderer.style-primary[disabled][is-paper-button] yt-formatted-string.yt-button-renderer {
- color: var(--dimmer-text) !important;
- }
-
- yt-button-renderer.yt-clip-creation-renderer .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled,
- ytd-button-renderer.ytd-clip-section-footer-renderer .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
- background-color: var(--main-color) !important;
- }
-
- /*Join this channel panel > Join button,
- Settings > Advanced settings > Copy button*/
- yt-button-renderer.ytd-sponsorships-tier-renderer .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled,
- yt-button-renderer.yt-copy-link-renderer .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
- background-color: var(--main-color) !important;
- }
-
- /*Playlist creation*/
- #subtext.yt-live-chat-message-renderer,
- #label.yt-live-chat-text-input-field-renderer,
- .input-content.paper-input-container input,
- .input-content.paper-input-container textarea,
- .input-content.paper-input-container iron-autogrow-textarea,
- .input-content.paper-input-container .paper-input-input {
- color: var(--dimmer-text) !important;
- }
-
- .add-on-content.is-highlighted.paper-input-container *,
- paper-input-char-counter {
- color: var(--dimmer-text) !important;
- }
-
- /*Video cards*/
- /*ttile*/
- ytd-grid-video-renderer.use-ellipsis #details.ytd-grid-video-renderer a.ytd-grid-video-renderer,
- ytd-compact-video-renderer.use-ellipsis #video-title.ytd-compact-video-renderer,
- #video-title.ytd-video-renderer,
- h3.ytd-playlist-renderer,
- #video-title.ytd-child-video-renderer,
- #length.ytd-child-video-renderer,
- #video-title,
- #unplayableText,
- #length,
- #details {
- color: var(--main-text) !important;
- }
-
- #items.yt-horizontal-list-renderer > .yt-horizontal-list-renderer:hover a.ytd-grid-video-renderer,
- ytd-compact-video-renderer:hover #video-title.ytd-compact-video-renderer,
- ytd-video-renderer:hover #video-title.ytd-video-renderer,
- ytd-playlist-renderer:hover h3.ytd-playlist-renderer,
- #content.ytd-playlist-video-renderer:hover #video-title,
- a.yt-simple-endpoint.ytd-playlist-panel-video-renderer:hover #video-title,
- a.yt-simple-endpoint.ytd-playlist-panel-video-renderer:hover #unplayableText,
- .style-scope.ytd-grid-renderer.use-ellipsis:hover #video-title,
- #video-title:hover,
- ytd-grid-video-renderer:hover #video-title.yt-simple-endpoint.ytd-grid-video-renderer {
- color: var(--main-color) !important;
- }
-
- /*author*/
- yt-formatted-string[ellipsis-truncate] a.yt-formatted-string:last-child,
- #byline.ytd-video-meta-block,
- #channel-title.ytd-channel-renderer span.ytd-channel-renderer,
- #text.ytd-channel-name {
- color: var(--main-color) !important;
- }
-
- /*metadata*/
- #metadata-line.ytd-grid-video-renderer,
- #metadata-line.ytd-video-meta-block span.ytd-video-meta-block,
- #metadata.ytd-channel-renderer,
- #description.ytd-channel-renderer,
- #thumbnail-attribution.ytd-grid-channel-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*2022 Nov like button*/
- /*not liked yet*/
- yt-animated-icon[animated-icon-type="LIKE"] > ytd-lottie-player > lottie-component > svg > g:nth-child(2) > g:nth-child(2) > g:nth-child(2) > path:nth-child(1),
- yt-animated-icon[animated-icon-type="LIKE"] > ytd-lottie-player > lottie-component > svg > g:nth-child(2) > g:nth-child(2) > g:nth-child(4) > path:nth-child(1) {
- stroke: var(--main-text) !important;
- }
-
- /*liked*/
- yt-animated-icon[animated-icon-type="LIKE"] > ytd-lottie-player > lottie-component > svg > g:nth-child(2) > g:nth-child(2) > g:nth-child(1) > path:nth-child(1),
- yt-animated-icon[animated-icon-type="LIKE"] > ytd-lottie-player > lottie-component > svg > g:nth-child(2) > g:nth-child(2) > g:nth-child(3) > path:nth-child(1) {
- fill: var(--main-color) !important;
- }
-
- yt-animated-icon[animated-icon-type="LIKE"] > ytd-lottie-player > lottie-component > svg > g:nth-child(2) > g:nth-child(2) > g:nth-child(1) > path:nth-child(2),
- yt-animated-icon[animated-icon-type="LIKE"] > ytd-lottie-player > lottie-component > svg > g:nth-child(2) > g:nth-child(2) > g:nth-child(3) > path:nth-child(2) {
- stroke: var(--main-color) !important
- }
-
- /*on shorts - so here is filled by default, thus above I am using main-color instead to keep it consistent*/
- .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled > div > yt-icon > svg > g > path {
- fill: var(--main-color) !important;
- }
-
- /*description and other metadata*/
- ytd-watch-metadata[modern-metapanel] #description.ytd-watch-metadata {
- background: var(--second-background) !important;
- /*--yt-spec-button-chip-background-hover*/
- }
-
- ytd-watch-metadata[clickable-description][description-collapsed] #description.ytd-watch-metadata:hover {
- background: var(--hover-background) !important;
- /*--yt-spec-badge-chip-background*/
- }
-
- ytd-watch-metadata[modern-metapanel] #description.ytd-watch-metadata .yt-simple-endpoint.style-scope.yt-formatted-string {
- color: var(--main-color) !important;
- }
-
- /*show more / less*/
- #expand.ytd-text-inline-expander:hover,
- #collapse.ytd-text-inline-expander:hover {
- color: var(--main-color) !important;
- }
-
- /*Recommandation page*/
- /*author*/
- #title.ytd-shelf-renderer {
- color: var(--main-color) !important;
- }
-
- #title-annotation.ytd-shelf-renderer {
- color: var(--dimmer-text) !important;
- }
-
- a.yt-simple-endpoint.yt-formatted-string:only-of-type:hover {
- color: var(--main-color) !important;
- }
-
- a.yt-simple-endpoint.yt-formatted-string:only-of-type {
- color: var(--main-text) !important;
- }
-
- /*Borders*/
- #contents.ytd-section-list-renderer > .ytd-section-list-renderer:not(:last-child):not(ytd-page-introduction-renderer) {
- border-color: var(--hover-background) !important;
- }
-
- /*Next and prev buttons*/
- .arrow.yt-horizontal-list-renderer,
- #scroll-button-forward,
- .arrow.ytd-horizontal-card-list-renderer,
- .ytd-horizontal-card-list-renderer[arrow],
- .scroll-button.yt-third-party-share-target-section-renderer/*share link*/
- {
- background-color: var(--hover-background) !important;
- }
-
- /*For the outline around the channel name*/
- .style-scope.ytd-comment-renderer.creator {
- background-color: var(--main-color) !important;
- }
-
- .style-scope.ytd-comment-renderer.creator:hover {
- background-color: var(--hover-background) !important;
- }
-
- #name.ytd-author-comment-badge-renderer {
- color: var(--main-text) !important;
- }
-
- #name:hover {
- color: var(--main-color) !important;
- }
-
- /*Accounts*/
- yt-formatted-string.ytd-account-item-section-header-renderer a {
- color: var(--dimmer-text) !important;
- }
-
- .style-scope.ytd-account-item-section-renderer:hover #channel-title.ytd-account-item-renderer {
- color: var(--main-color) !important;
- }
-
- app-drawer.ytd-app:not([persistent]) #header.ytd-app {
- border-color: var(--main-color) !important;
- }
-
- /*How is youtube today*/
- ytd-single-option-survey-renderer[dialog][dialog][dialog],
- ytd-single-option-survey-renderer,
- ytd-survey-follow-up-renderer[dialog][dialog][dialog],
- ytd-survey-follow-up-renderer,
- ytd-checkbox-survey-renderer[dialog][dialog][dialog]/*TODO: forgot to test if the [dialog] is even needed*/
- {
- background-color: var(--hover-background) !important;
- box-shadow: var(--shadow) !important;
- }
-
- #header.ytd-single-option-survey-renderer,
- #header.ytd-survey-follow-up-renderer,
- #header.ytd-checkbox-survey-renderer {
- color: var(--main-color) !important;
- }
-
- ytd-single-option-survey-option-renderer,
- #checkboxLabel.paper-checkbox {
- color: var(--main-text) !important;
- }
-
- ytd-single-option-survey-option-renderer:hover {
- background-color: var(--hover-background) !important;
- }
-
- /*rate a video to improve youtube*/
- #star-survey.ytd-inline-survey-renderer {
- background-color: var(--second-background) !important;
- }
-
- #inline-survey-compact-video-renderer.ytd-inline-survey-renderer {
- background-color: var(--hover-background) !important;
- }
-
- ytd-primetime-promo-renderer.ytd-rich-section-renderer,
- ytd-inline-survey-renderer.ytd-rich-section-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*not sure tell us why followup*/
- #title.ytd-inline-survey-renderer,
- #follow-up-title.ytd-inline-survey-renderer,
- #selected-response-text.ytd-rating-survey-renderer {
- color: var(--main-color) !important;
- }
-
- /*background and close button*/
- ytd-inline-survey-renderer[expanded] #dismissable.ytd-inline-survey-renderer,
- #dismiss-button.ytd-inline-survey-renderer {
- background-color: var(--second-background) !important;
- }
-
- paper-checkbox.ytd-checkbox-survey-option-renderer {
- background-color: var(--hover-background) !important;
- }
-
- /*thanks*/
- #dismissed.ytd-inline-survey-renderer ytd-message-renderer.ytd-inline-survey-renderer {
- background-color: var(--hover-background) !important;
- }
-
- /*info warning - covid19*/
- ytd-clarification-renderer {
- background-color: var(--hover-background) !important;
- }
-
- ytd-clarification-renderer[has-action-button] .content.ytd-clarification-renderer,
- ytd-clarification-renderer[background-style="info"] {
- border-color: var(--hover-background) !important;
- }
-
- .content-title.ytd-clarification-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-clarification-renderer[clarify-style="medium"] .description.ytd-clarification-renderer {
- color: var(--dimmer-text) !important;
- }
-
- .source.ytd-clarification-renderer {
- color: var(--main-color) !important;
- }
-
- ytd-clarification-renderer yt-button-renderer.style-suggestive[is-paper-button] paper-button.yt-button-renderer {
- border-color: var(--main-color) !important;
- }
-
- /*Change subtitles settings tooltip*/
- .ytp-promotooltip-container {
- background-color: var(--hover-background) !important;
- box-shadow: var(--shadow) !important;
- color: var(--main-text) !important;
- }
-
- .ytp-promotooltip-pointer {
- border-color: var(--hover-background) !important;
- }
-
- /*You are not logged in tooltip*/
- #tooltip.tp-yt-paper-tooltip,
- yt-tooltip-renderer {
- background-color: var(--hover-background) !important;
- box-shadow: var(--shadow) !important;
- color: var(--main-text) !important;
- }
-
- yt-tooltip-renderer::before {
- border-color: transparent transparent var(--hover-background) transparent !important;
- }
-
- /*Join button tooltip*/
- yt-bubble-hint-renderer[style_="BUBBLE_HINT_STYLE_BLUE_TOOLTIP"] {
- background-color: var(--second-background) !important;
- box-shadow: var(--shadow) !important;
- }
-
- yt-bubble-hint-renderer[style_="BUBBLE_HINT_STYLE_BLUE_TOOLTIP"] #text.yt-bubble-hint-renderer:not(:empty),
- yt-bubble-hint-renderer[style_="BUBBLE_HINT_STYLE_BLUE_TOOLTIP"] #details-text.yt-bubble-hint-renderer {
- background-color: var(--second-background) !important;
- }
-
- yt-bubble-hint-renderer[position-type="OPEN_POPUP_POSITION_LEFT"][style_="BUBBLE_HINT_STYLE_BLUE_TOOLTIP"]::before {
- border-color: transparent transparent transparent var(--second-background) !important;
- }
-
- /*window*/
- ytd-sponsorships-offer-renderer[dialog][dialog][dialog] {
- background-color: var(--main-background) !important;
- }
-
- #background-image-layer.ytd-sponsorships-offer-renderer {
- background-image: unset !important;
- background-color: var(--hover-background) !important;
- }
-
- /*title*/
- #top-bar.ytd-sponsorships-offer-renderer {
- color: var(--main-text) !important;
- }
-
- /*price*/
- #above-purchase-button-text.ytd-sponsorships-tier-renderer {
- color: var(--main-color) !important;
- }
-
- /*fine print*/
- .disclaimer.ytd-sponsorships-tier-renderer {
- color: var(--main-text) !important;
- }
-
- /*Super Thanks donations*/
- ytd-pdg-buy-flow-renderer {
- background-color: var(--main-background) !important;
- }
-
- /*remove white image in the header*/
- yt-pdg-buy-flow-header-renderer {
- background: transparent !important;
- }
-
- #container.ytd-pdg-comment-preview-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*bonus*/
- #title-background.ytd-pdg-comment-preview-renderer {
- background-color: var(--hover-background) !important;
- }
-
- /*Progress bar*/
- #progress {
- background-color: var(--main-color) !important;
- border-color: var(--main-color) !important;
- }
-
- yt-page-navigation-progress {
- background-color: transparent !important;
- }
-
- /*Button tooltips*/
- #tooltip.paper-tooltip {
- background-color: var(--hover-background) !important;
- color: var(--main-color) !important;
- }
-
- /*Active grid icon*/
- button.ytd-button-renderer[is="paper-icon-button-light"][disabled] {
- color: rgb(255, 255, 255) !important;
- }
-
- /*2022 Nov changes*/
- /*subscribe button*/
- .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled,
- .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
- tp-yt-paper-button.ytd-subscribe-button-renderer {
- color: var(--second-background) !important;
- }
-
- tp-yt-paper-button.ytd-subscribe-button-renderer[subscribed] {
- background-color: var(--main-color);
- }
-
- /*NOTE: this affects other material buttons - I would say desired effect*/
- .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled,
- .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled:hover,
- /*on shorts*/
- .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal,
- .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal:hover,
- /*on shorts*/
- .ytp-sb-subscribe,
- a.ytp-sb-subscribe/*in cards... why yt why*/
- {
- background-color: var(--second-background) !important;
- border-color: var(--second-background) !important;
- box-shadow: var(--shadow) !important;
- color: var(--main-text) !important;
- }
-
- /*unsubscribe confirm dialog*/
- .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text {
- color: var(--main-color) !important;
- }
-
- .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text:hover {
- background-color: var(--yt-spec-10-percent-layer) !important;
- }
-
- /*join button*/
- .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal[aria-label="Join this channel"],
- .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled/*in window*/
- {
- background-color: var(--second-background) !important;
- border-color: var(--second-background) !important;
- }
-
- /*comment button*/
- ytd-button-renderer#submit-button.ytd-commentbox .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
- background-color: var(--main-color) !important;
- color: var(--main-text) !important;
- }
-
- /*download panel > get trial button*/
- /*share panel > copy button*/
- ytd-offline-promo-renderer.ytd-popup-container yt-button-renderer#action-button .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled,
- yt-third-party-network-section-renderer.ytd-unified-share-panel-renderer yt-button-renderer#copy-button .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
- background-color: var(--main-color) !important;
- color: var(--main-text) !important;
- }
-
- /*Toast notification*/
- yt-notification-action-renderer yt-button-renderer.yt-notification-action-renderer .yt-spec-button-shape-next--call-to-action-inverse.yt-spec-button-shape-next--text {
- color: var(--main-color) !important;
- }
-
- /*Toast notification hover*/
- yt-notification-action-renderer yt-button-renderer.yt-notification-action-renderer .yt-spec-button-shape-next--call-to-action-inverse.yt-spec-button-shape-next--text:hover {
- background-color: var(--main-background) !important;
- }
-
- if join-color/*overwriting the above*/
- {
- .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal[aria-label="Join this channel"] {
- background-color: var(--main-color) !important;
- border-color: var(--main-color) !important;
- }
- }
-
- if subscribe-color/*overwriting the above*/
- {
- .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled,
- .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled,
- .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled:hover,
- /*on shorts*/
- .ytp-sb-subscribe,
- a.ytp-sb-subscribe/*in cards*/
- {
- background-color: var(--main-color) !important;
- border-color: var(--main-color) !important;
- }
- }
-
- ytd-button-renderer.style-primary[is-paper-button] {
- background-color: transparent !important;
- }
-
- /*Sponsor button*/
- ytd-modal-with-title-and-button-renderer {
- background: var(--second-background) !important;
- }
-
- #content.ytd-modal-with-title-and-button-renderer {
- color: var(--dimmer-text) !important;
- }
-
- .buttons.ytd-modal-with-title-and-button-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*sponsor popup*/
- #sponsor-button.ytd-membership-offer-renderer ytd-button-renderer.ytd-membership-offer-renderer {
- background-color: var(--main-color) !important;
- }
-
- #sponsor-button.ytd-membership-offer-renderer ytd-button-renderer.ytd-membership-offer-renderer:hover {
- filter: brightness(110%) !important;
- }
-
- #header.ytd-membership-offer-renderer {
- background: var(--main-background) !important;
- }
-
- ytd-perks-section-renderer,
- ytd-membership-offer-renderer[dialog][dialog][dialog],
- paper-dialog-scrollable.can-scroll:not(.scrolled-to-bottom):not(:last-child)::after,
- paper-dialog-scrollable.is-scrolled:not(:first-child)::before {
- background: var(--second-background) !important;
- }
-
- .extra-content.ytd-offer-perk-extra {
- border-color: var(--hover-background) !important;
- background: var(--hover-background) !important;
- color: var(--dimmer-text) !important;
- }
-
- .footer.ytd-membership-offer-renderer {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- ytd-membership-offer-renderer * {
- border-color: var(--hover-background) !important;
- }
-
- .price.ytd-membership-offer-renderer {
- color: var(--main-color) !important;
- }
-
- .style-title.ytd-offer-text-item,
- .style-subtitle.ytd-offer-text-item,
- .payment-clause.ytd-membership-offer-renderer {
- color: var(--main-text) !important;
- }
-
- .perk-item-title.ytd-perk-item-renderer,
- .perk-item-public-description.ytd-perk-item-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Edit button in channel page*/
- #edit-buttons.ytd-c4-tabbed-header-renderer ytd-button-renderer.ytd-c4-tabbed-header-renderer {
- background-color: transparent !important;
- }
-
- /*Toggle button to play next*/
- paper-toggle-button[checked]:not([disabled]) .toggle-bar.paper-toggle-button {
- background-color: var(--main-color) !important;
- opacity: 0.9 !important;
- }
-
- paper-toggle-button[checked]:not([disabled]) .toggle-button.paper-toggle-button {
- --paper-toggle-button-checked-button-color: rgb(255, 255, 255) !important;
- }
-
- /*Hover for toggle button*/
- .toggle-button.paper-toggle-button:hover,
- paper-toggle-button[checked]:not([disabled]) .toggle-button.paper-toggle-button:hover {
- background-color: var(--main-color) !important;
- }
-
- yt-bubble-hint-renderer {
- background: var(--hover-background) !important;
- }
-
- yt-bubble-hint-renderer::after {
- border-top-color: var(--second-background) !important;
- }
-
- #text.yt-bubble-hint-renderer {
- background: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- #details-text.yt-bubble-hint-renderer {
- background: var(--hover-background) !important;
- color: var(--dimmer-text) !important;
- }
-
- .buttons.yt-bubble-hint-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*Filter active*/
- paper-button.ytd-toggle-button-renderer {
- color: rgba(255, 255, 255, 0.5) !important;
- }
-
- /*Badges*/
- .badge-style-type-simple.ytd-badge-supported-renderer,
- .badge-style-type-disabled.ytd-badge-supported-renderer,
- yt-icon.ytd-badge-supported-renderer {
- background: transparent !important;
- color: var(--main-color) !important;
- padding-left: 0px !important;
- opacity: .7 !important;
- }
-
- .badge-style-type-simple-strikethrough.ytd-badge-supported-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Trending badge*/
- .badge-style-type-featured.ytd-badge-supported-renderer {
- background: var(--main-color) !important;
- }
-
- /*Author verified badge in comments*/
- ytd-author-comment-badge-renderer:not(.creator) #icon.ytd-author-comment-badge-renderer {
- fill: var(--main-color) !important;
- }
-
- /*Live now badge*/
- .badge-style-type-live-now.ytd-badge-supported-renderer,
- .badge-style-type-live-now-alternate.ytd-badge-supported-renderer {
- color: var(--main-color) !important;
- background: transparent !important;
- border-color: var(--main-color) !important;
- }
-
- /*Premium*/
- .badge-style-type-red.ytd-badge-supported-renderer {
- color: #DA4453 !important;
- background: transparent !important;
- border-color: var(--main-color) !important;
- }
-
- /*Series name*/
- .badge-style-type-collection.ytd-badge-supported-renderer {
- color: var(--main-color) !important;
- }
-
- .yt-simple-endpoint.style-scope.yt-formatted-string {
- color: var(--dimmer-text) !important;
- }
-
- /*video hashtags & links in settings page*/
- #super-title .yt-simple-endpoint.style-scope.yt-formatted-string,
- ytd-section-list-renderer[page-subtype="WEB_PAGE_TYPE_SETTINGS"] .yt-simple-endpoint.style-scope.yt-formatted-string {
- color: var(--main-color) !important;
- }
-
- /*panel links*/
- tp-yt-paper-dialog.ytd-popup-container .yt-simple-endpoint.style-scope.yt-formatted-string {
- color: var(--main-color) !important;
- }
-
- /*Dropdown*/
- .dropdown-content.style-scope.ytd-popup-container > *,
- tp-yt-paper-listbox,
- ytd-menu-popup-renderer {
- background: var(--second-background) !important;
- color: var(--main-text) !important;
- }
-
- ytd-menu-service-item-renderer:hover,
- a.ytd-menu-navigation-item-renderer:hover,
- tp-yt-paper-listbox.yt-dropdown-menu .iron-selected.yt-dropdown-menu,
- tp-yt-paper-listbox.yt-dropdown-menu tp-yt-paper-item.yt-dropdown-menu:hover,
- ytd-menu-service-item-renderer[is-selected] {
- background: var(--hover-background) !important;
- }
-
- yt-formatted-string.ytd-menu-service-item-renderer,
- yt-formatted-string.ytd-menu-navigation-item-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-menu-service-item-renderer:hover yt-formatted-string.ytd-menu-service-item-renderer,
- a.ytd-menu-navigation-item-renderer:hover yt-formatted-string.ytd-menu-navigation-item-renderer,
- tp-yt-paper-listbox a.yt-simple-endpoint.yt-dropdown-menu:hover .item.yt-dropdown-menu {
- color: var(--main-color) !important;
- }
-
- #owner-name.ytd-video-owner-renderer a {
- color: var(--main-color) !important;
- opacity: .9;
- }
-
- /*share*/
- #header.ytd-add-to-playlist-renderer {
- color: var(--main-text) !important;
- }
-
- #label.ytd-playlist-add-to-option-renderer,
- paper-item.ytd-compact-link-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #header.ytd-add-to-playlist-renderer,
- #playlists.ytd-add-to-playlist-renderer {
- border-color: var(--hover-background) !important;
- }
-
- paper-item.ytd-compact-link-renderer:hover #label.ytd-compact-link-renderer,
- paper-item.ytd-compact-link-renderer:hover yt-icon.ytd-compact-link-renderer {
- color: var(--main-color) !important;
- fill: var(--main-color) !important;
- }
-
- ytd-playlist-add-to-option-renderer paper-checkbox:hover #label.ytd-playlist-add-to-option-renderer,
- ytd-playlist-add-to-option-renderer paper-checkbox[checked] #label.ytd-playlist-add-to-option-renderer,
- yt-icon.ytd-playlist-add-to-option-renderer {
- color: var(--main-color) !important;
- }
-
- /*Avatars and thumbnails opacity */
- img.yt-img-shadow {
- opacity: 0.9 !important;
- }
-
- img.yt-img-shadow:hover {
- opacity: 1 !important;
- }
-
- /*Very specific hover for thumbnails*/
- #dismissable.ytd-compact-video-renderer:hover img.yt-img-shadow,
- #items.yt-horizontal-list-renderer > .yt-horizontal-list-renderer:hover img.yt-img-shadow,
- #items.ytd-grid-renderer > ytd-grid-video-renderer.ytd-grid-renderer:hover img.yt-img-shadow,
- ytd-video-renderer.ytd-item-section-renderer:hover img.yt-img-shadow,
- .style-scope.ytd-channel-featured-content-renderer:hover img.yt-img-shadow,
- #grid-container.ytd-expanded-shelf-contents-renderer > .ytd-expanded-shelf-contents-renderer:hover img.yt-img-shadow,
- ytd-playlist-video-renderer:hover img.yt-img-shadow,
- iron-list:not([grid]) #items.iron-list > *:hover img.yt-img-shadow {
- opacity: 1 !important;
- }
-
- /*Video section*/
- /*2022 Nov*/
- /*this seems to be only in dark mode? */
- #cinematics.ytd-watch-flexy {
- display: none !important;
- }
-
- /*Video title hover in html5 video*/
- .html5-video-player a:hover {
- color: var(--main-text) !important;
- text-shadow: none !important;
- }
-
- /* Code takken from https://userstyles.org/styles/95280 */
- /* scrubber button */
- .html5-scrubber-button:hover,
- .ytp-chrome-controls .ytp-button[aria-pressed]::after,
- .ytp-scrubber-button:hover,
- .html5-video-player:not(.ytp-color-party) .ytp-swatch-background-color,
- .ytp-swatch-background-color-secondary {
- background: var(--main-color) !important;
- }
-
- /* progress bar */
- .html5-video-player:not(.ytp-color-party) .html5-play-progress,
- .html5-video-player:not(.ytp-color-party) .ytp-play-progress {
- background: var(--main-color) !important;
- }
-
- .ytp-volume-slider-track,
- .ytp-volume-slider-handle:before {
- background: var(--main-color) !important;
- z-index: -117;
- }
-
- .ytp-settings-button.ytp-hd-quality-badge::after,
- .ytp-settings-button.ytp-4k-quality-badge::after,
- .ytp-settings-button.ytp-5k-quality-badge::after,
- .ytp-settings-button.ytp-8k-quality-badge::after,
- .ytp-settings-button.ytp-3d-badge::after {
- background-color: var(--main-color) !important;
- }
-
- .ytp-swatch-color {
- color: var(--main-color) !important;
- }
-
- .ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox {
- background-color: var(--main-color) !important;
- }
-
- .ytp-chrome-controls .ytp-button.ytp-youtube-button:hover:not([aria-disabled="true"]):not([disabled]) .ytp-svg-fill-logo-tube-lozenge {
- fill: var(--main-color) !important;
- }
-
- .ytp-cued-thumbnail-overlay:hover .ytp-large-play-button-bg,
- .ytp-large-play-button.ytp-touch-device .ytp-large-play-button-bg {
- fill: var(--main-color) !important;
- }
-
- .ytp-large-play-button.ytp-button.ytp-red2:hover,
- .ytp-cued-thumbnail-overlay:hover .ytp-large-play-button.ytp-button.ytp-red2 {
- /*background-image: url(https://github.com/RaitaroH/YouTube-DeepDark/raw/master/YT_Images/large_play_button_hover_ringo-vfl7vEehF.png) !important;*/
- background-image: url(https://s.ytimg.com/yts/img/large_play_button_ringo-vfljWXIdx.png) !important;
- filter: invert(100%) brightness(300%);
- }
-
- .resume-playback-progress-bar {
- background: var(--main-color) !important;
- }
-
- /*Added because of this: https://forum.userstyles.org/discussion/53368/solved-fix-this-annoying-youtube-tab-select-bug-thats-been-there-forever#latest*/
- .ytp-keyboard-focus .ytp-progress-bar:focus {
- box-shadow: none !important;
- }
-
- /*Video menu - might have issues with lighter colors*/
- .ytp-popup {
- background: var(--second-background) !important;
- opacity: .9 !important;
- }
-
- .ytp-menuitem:hover:not([aria-disabled="true"]) {
- background-color: var(--hover-background) !important;
- }
-
- /*Text*/
- .iv-branding .iv-branding-context-name,
- .ytp-menuitem-label,
- .ytp-menuitem-label-count,
- .ytp-menuitem-content,
- .ytp-menu-label-secondary,
- .ytp-panel-header {
- color: var(--main-text) !important;
- text-shadow: none !important;
- }
-
- /*Keyboard focus*/
- .ytp-probably-keyboard-focus .ytp-menuitem:focus .ytp-menuitem-content,
- .ytp-probably-keyboard-focus .ytp-menuitem:focus .ytp-menuitem-label {
- box-shadow: inset -2px -2px 0 var(--main-color), inset 0 2px 0 var(--main-color) !important;
- }
-
- .ytp-probably-keyboard-focus .ytp-button:focus {
- box-shadow: inset 0 0 0 2px var(--main-color) !important;
- }
-
- .ytp-probably-keyboard-focus .ytp-progress-bar:focus {
- box-shadow: 0 0 0 2px var(--main-color) !important;
- }
-
- /*Miniplayer*/
- #info-bar.ytd-miniplayer .metadata.ytd-miniplayer,
- #info-bar.ytd-miniplayer {
- background-color: var(--main-background) !important;
- }
-
- #info-bar.ytd-miniplayer .channel.ytd-miniplayer {
- color: var(--main-color) !important;
- }
-
- .ytd-miniplayer .ytp-button:not([aria-disabled="true"]):not([disabled]):not([aria-hidden="true"]):hover svg path {
- fill: var(--main-color) !important;
- }
-
- /*added to queue*/
- ytd-miniplayer-toast[opened] {
- background-color: var(--second-background) !important;
- }
-
- #label.ytd-miniplayer-toast {
- color: var(--main-color) !important;
- }
-
- /*queue / playlist panel closed*/
- ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .title.ytd-playlist-panel-renderer,
- ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] #next-video-title.ytd-playlist-panel-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .byline-title.ytd-playlist-panel-renderer,
- ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .publisher.ytd-playlist-panel-renderer,
- ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .publisher.ytd-playlist-panel-renderer:not([is-empty]).ytd-playlist-panel-renderer + .index-message-wrapper.ytd-playlist-panel-renderer::before,
- ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .index-message-wrapper.ytd-playlist-panel-renderer {
- color: var(--main-color) !important;
- }
-
- /*Watch later svg*/
- .style-scope.ytd-thumbnail-overlay-toggle-button-renderer:hover {
- fill: var(--main-color) !important;
- }
-
- ytd-thumbnail-overlay-toggle-button-renderer:focus yt-icon.ytd-thumbnail-overlay-toggle-button-renderer {
- outline-color: var(--main-color) !important;
- }
-
- /*This channel is watched by others*/
- ytd-thumbnail-overlay-endorsement-renderer {
- background-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- /*Popup for when you hover over the channel avatar in the video*/
- .iv-branding .branding-context-container-inner {
- background-color: var(--main-background) !important;
- }
-
- /*Changing icon for unavailable video*/
- #img.ytd-player-error-message-renderer {
- display: block !important;
- -moz-box-sizing: border-box !important;
- box-sizing: border-box !important;
- background: url(https://github.com/RaitaroH/YouTube-DeepDark/raw/master/YT_Images/404.png) no-repeat !important;
- width: 140px !important;
- height: 100px !important;
- padding-left: 140px !important;
- position: relative !important;
- }
-
- /*Changing icon for unavailable page (404)*/
- #error-page-hh-illustration {
- display: block !important;
- -moz-box-sizing: border-box !important;
- box-sizing: border-box !important;
- background: url(https://github.com/RaitaroH/YouTube-DeepDark/raw/master/YT_Images/404.png) no-repeat !important;
- width: 140px !important;
- height: 100px !important;
- padding-left: 140px !important;
- right: -175px !important;
- position: relative !important;
- }
-
- /*Some spacing for the logo*/
- #yt-masthead #logo-container {
- margin-right: 20px !important;
- }
-
- /*consent page (cookie page)*/
- /*cookies consent dialog*/
- ytd-consent-bump-v2-lightbox ytd-button-renderer .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
- color: var(--main-color) !important;
- }
-
- ytd-consent-bump-v2-lightbox[darker-dark-theme] .loading-overlay.ytd-consent-bump-v2-lightbox {
- background: var(--hover-background) !important;
- }
-
- /*Border color for terms and conditions*/
- ytd-consent-bump-renderer {
- border-bottom: 1px solid var(--main-color) !important;
- }
-
- /*New logo*/
- #logo-icon-container.ytd-topbar-logo-renderer svg g path[fill*="#FF0000"],
- ytd-topbar-logo-renderer.style-scope a svg > g > g:nth-child(1) > path:nth-child(1),
- /*cookie version*/
- svg.ytd-consent-bump-v2-lightbox > g:nth-child(1) > g:nth-child(1) > path:nth-child(1) {
- /*fill: var(--hover-background) !important;*/
- }
-
- ytd-topbar-logo-renderer.style-scope a svg > g > g:nth-child(1) > path:nth-child(2),
- /*cookie version*/
- g.ytd-consent-bump-v2-lightbox:nth-child(2) > g:nth-child(1) > * {
- fill: var(--main-text) !important;
- }
-
- ytd-topbar-logo-renderer.style-scope a svg > g > g:nth-child(2) > g,
- #country-code.ytd-topbar-logo-renderer {
- color: var(--main-text) !important;
- }
-
- /*Logo hover*/
- #logo-icon:hover {
- --yt-swatch-logo-override: var(--main-color) !important;
- }
-
- /*Rewind logo*/
- #animated-yoodle {
- filter: invert(90%) grayscale(1);
- }
-
- /*Playlist page*/
- /*sidebar*/
- ytd-playlist-sidebar-renderer {
- background-color: var(--hover-background) !important;
- }
-
- #stats.ytd-playlist-sidebar-primary-info-renderer,
- #description.ytd-playlist-sidebar-primary-info-renderer .bold.yt-formatted-string,
- #owner-sub-count.ytd-video-owner-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #items.ytd-playlist-sidebar-renderer > .ytd-playlist-sidebar-renderer:not(:last-child) {
- border-color: var(--hover-background) !important;
- }
-
- #primary.ytd-two-column-browse-results-renderer {
- background-color: var(--main-background) !important;
- }
-
- ytd-button-renderer[is-paper-button] yt-icon.ytd-button-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #content.ytd-playlist-video-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*buttons*/
- ytd-playlist-sidebar-renderer ytd-toggle-button-renderer.style-suggestive[is-paper-button],
- ytd-playlist-sidebar-renderer paper-button.ytd-toggle-button-renderer {
- background-color: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- a.yt-simple-endpoint.ytd-button-renderer:hover *,
- ytd-playlist-sidebar-renderer ytd-button-renderer #button.ytd-button-renderer:hover,
- ytd-playlist-sidebar-renderer ytd-button-renderer #button.ytd-button-renderer:hover > yt-formatted-string.ytd-button-renderer {
- color: var(--main-color) !important;
- }
-
- /*playlist page*/
- ytd-browse[page-subtype="playlist"] ytd-two-column-browse-results-renderer.ytd-browse {
- background-color: var(--main-background) !important;
- }
-
- .index-message.ytd-playlist-panel-renderer,
- .light-text.ytd-playlist-segment-renderer,
- #contributor.ytd-playlist-video-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #title-container.ytd-playlist-segment-renderer {
- border-color: var(--hover-background) !important;
- }
-
- #title-container.ytd-playlist-segment-renderer:hover #title.ytd-playlist-segment-renderer {
- color: var(--main-color) !important;
- }
-
- /*Playlist changes*/
- ytd-playlist-panel-video-renderer:hover {
- background-color: var(--hover-background) !important;
- }
-
- ytd-playlist-panel-video-renderer[selected] #index.ytd-playlist-panel-video-renderer,
- #byline.ytd-playlist-panel-video-renderer,
- .ytp-video-menu-item[aria-checked="true"] .ytp-video-menu-item-now-playing,
- .ytp-video-menu-item-author {
- color: var(--main-color) !important;
- }
-
- ytd-playlist-video-renderer:hover,
- ytd-playlist-video-renderer:hover:not(.dragging) {
- background-color: var(--second-background) !important;
- }
-
- ytd-playlist-panel-video-renderer[selected][use-color-palette],
- ytd-playlist-panel-video-renderer[selected][use-color-palette]:hover:not(.dragging) {
- background-color: var(--hover-background) !important;
- }
-
- .header.ytd-playlist-panel-renderer,
- .playlist-items.ytd-playlist-panel-renderer,
- #header.ytd-engagement-panel-title-header-renderer,
- #content.ytd-engagement-panel-section-list-renderer,
- ytd-transcript-footer-renderer,
- ytd-transcript-segment-list-renderer {
- background-color: var(--second-background) !important;
- }
-
- .cue.ytd-transcript-body-renderer,
- .cue-group-start-offset.ytd-transcript-body-renderer {
- color: var(--dimmer-text) !important;
- }
-
- .cue-group.active.ytd-transcript-body-renderer {
- border-left-color: var(--main-color) !important;
- background-color: var(--hover-background) !important;
- }
-
- .cue-group.active.ytd-transcript-body-renderer .cue-group-start-offset.ytd-transcript-body-renderer,
- .cue.ytd-transcript-body-renderer.active {
- color: var(--main-text) !important;
- }
-
- .cue-group.ytd-transcript-body-renderer:hover .cue-group-start-offset.ytd-transcript-body-renderer,
- .cue-group.ytd-transcript-body-renderer:hover .cue.ytd-transcript-body-renderer {
- color: var(--main-color) !important;
- }
-
- .cue.ytd-transcript-body-renderer:hover,
- ytd-transcript-body-renderer:not([refresh]) .cue.active.ytd-transcript-body-renderer {
- background-color: transparent !important;
- color: var(--main-color) !important
- }
-
- .segment-timestamp.ytd-transcript-segment-renderer {
- background-color: var(--hover-background) !important;
- color: var(--main-color) !important
- }
-
- /*search transcript*/
- ytd-transcript-search-panel-renderer,
- ytd-transcript-search-box-renderer {
- background-color: var(--second-background) !important;
- }
-
- .input-container.ytd-transcript-search-box-renderer {
- background-color: var(--hover-background) !important;
- }
-
- /*magnifing glass icon*/
- .icon.ytd-transcript-search-box-renderer {
- --iron-icon-fill-color: var(--dimmer-text) !important;
- --iron-icon-stroke-color: var(--dimmer-text) !important;
- }
-
- #transcript-search-box-input.ytd-transcript-search-box-renderer {
- color: var(--main-text) !important;
- caret-color: var(--main-color) !important;
- }
-
- .ytp-video-menu-item[aria-checked="true"] .ytp-video-menu-item-thumbnail {
- border-color: var(--main-color) !important;
- }
-
- #index.ytd-playlist-video-renderer,
- #index.ytd-playlist-panel-video-renderer,
- .badge-style-type-medium-grey.ytd-badge-supported-renderer/*unlisted*/
- {
- color: var(--dimmer-text) !important;
- }
-
- #container.ytd-playlist-panel-renderer {
- border-color: var(--second-background) !important;
- }
-
- /*Playlist creation*/
- #create-playlist-form .input-content.paper-input-container label {
- color: var(--main-text) !important;
- }
-
- #create-playlist-form input.style-scope.paper-input::placeholder {
- color: var(--dimmer-text) !important;
- }
-
- #create-playlist-form .underline.is-highlighted.paper-input-container .focused-line.paper-input-container {
- border-bottom-color: var(--main-text) !important;
- }
-
- #create-playlist-form #label.ytd-privacy-dropdown-item-renderer {
- color: var(--main-text) !important;
- }
-
- #create-playlist-form ytd-privacy-dropdown-item-renderer.iron-selected {
- background-color: var(--hover-background) !important;
- }
-
- /*Chapters*/
- /*title*/
- h4.ytd-macro-markers-list-item-renderer {
- color: var(--main-text) !important;
- }
-
- /*timestamp*/
- #time.ytd-macro-markers-list-item-renderer {
- color: var(--main-color) !important;
- background-color: transparent !important;
- padding: 0px !important;
- }
-
- /*show current chapter*/
- #sync-button.ytd-macro-markers-list-renderer {
- background-color: var(--main-background) !important;
- color: var(--main-text) !important;
- }
-
- #sync-button.ytd-macro-markers-list-renderer:hover {
- color: var(--main-color) !important;
- }
-
- /*active indicators*/
- ytd-macro-markers-list-item-renderer[active] #thumbnail.ytd-macro-markers-list-item-renderer {
- outline-color: var(--main-color) !important;
- }
-
- #active-indicator.ytd-macro-markers-list-item-renderer {
- background-color: var(--main-color) !important;
- }
-
- /*hover for item*/
- ytd-macro-markers-list-item-renderer:hover,
- ytd-macro-markers-list-item-renderer[active] {
- background-color: var(--hover-background) !important;
- }
-
- ytd-macro-markers-list-item-renderer:hover {
- box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
- }
-
- ytd-macro-markers-list-item-renderer:hover h4.ytd-macro-markers-list-item-renderer {
- color: var(--main-color) !important;
- }
-
- /*chapter images in description*/
- ytd-macro-markers-list-item-renderer[active][layout="MACRO_MARKERS_LIST_ITEM_RENDERER_LAYOUT_VERTICAL"] {
- border-color: var(--main-color) !important;
- }
-
- ytd-horizontal-card-list-renderer.ytd-structured-description-content-renderer:not(:first-child),
- ytd-metadata-row-container-renderer.ytd-structured-description-content-renderer:not(:first-child),
- ytd-structured-description-content-renderer[inline-structured-description] ytd-horizontal-card-list-renderer.ytd-structured-description-content-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*chapter times in search description*/
- .metadata-snippet-container-one-line.ytd-video-renderer #time.ytd-video-renderer {
- color: var(--main-color) !important;
- background: var(--second-background) !important;
- }
-
- /*chapter metadata in search results*/
- ytd-expandable-metadata-renderer {
- /*this is used on hover, might as well*/
- background-color: var(--yt-spec-badge-chip-background) !important;
- }
-
- /*expanded chapters in search results*/
- ytd-macro-markers-list-item-renderer[layout="MACRO_MARKERS_LIST_ITEM_RENDERER_LAYOUT_VERTICAL"] {
- border-color: var(--second-background) !important;
- }
-
- /*Search bar*/
- ytd-searchbox[mode="legacy"] #container.ytd-searchbox,
- ytd-searchbox[mode="material-centered"] #container.ytd-searchbox,
- ytd-searchbox[mode="legacy"] #container.ytd-searchbox,
- ytd-searchbox[mode="legacy-centered"] #container.ytd-searchbox,
- #container.ytd-searchbox,
- #masthead-search-terms/*account settings page*/
- {
- background: var(--main-background) !important;
- border-color: var(--main-background) !important;
- box-shadow: none !important;
- }
-
- ytd-searchbox[mode="legacy"] #container.ytd-searchbox:hover,
- ytd-searchbox[mode=legacy][has-focus] #container.ytd-searchbox,
- ytd-searchbox[mode="material-left"] #container.ytd-searchbox,
- ytd-searchbox.style-scope[has-focus=""] #container.ytd-searchbox,
- ytd-searchbox[mode="material-centered"]:hover #container.ytd-searchbox,
- #masthead-search-terms.masthead-search-terms-border/*error page*/
- {
- border: 1px solid var(--main-color) !important;
- box-shadow: none !important;
- }
-
- ytd-searchbox[mode="legacy"] #container.ytd-searchbox input.ytd-searchbox,
- #container.ytd-searchbox > input,
- ytd-searchbox input,
- #masthead-search-terms.masthead-search-terms-border input/*error page*/
- {
- color: var(--main-text) !important;
- }
-
- /*Right search icon ๐ */
- #search-icon-legacy.ytd-searchbox,
- #masthead-search .search-btn-component,
- #masthead-search .search-btn-component .start/*account*/
- {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- #search-icon-legacy.ytd-searchbox:hover yt-icon.ytd-searchbox {
- color: var(--main-color) !important;
- }
-
- #masthead-search .search-btn-component .yt-uix-button-content/*account*/
- {
- filter: invert(1);
- }
-
- /*left ๐ icon - shown on focus*/
- #search-icon.ytd-searchbox {
- color: var(--main-text) !important;
- }
-
- #search-icon.ytd-searchbox:hover,
- #search-icon.ytd-searchbox:hover {
- color: var(--main-color) !important;
- }
-
- /*results ๐ icon*/
- .sbqs_c::before {
- filter: invert(1);
- }
-
- /*Results backgrounds*/
- .sbsb_a,
- .sbdd_b {
- background: var(--second-background) !important;
- border: none !important;
- }
-
- /*Text color*/
- .gsfs {
- color: var(--dimmer-text) !important;
- }
-
- /*Hover and keyboard select background*/
- .sbsb_c.gsfs:hover,
- .sbsb_d {
- background-color: var(--hover-background) !important;
- }
-
- .sbfl_b {
- background-color: var(--second-background) !important;
- }
-
- .sbfl_b:hover {
- background-color: var(--hover-background) !important;
- color: var(--main-color) !important;
- }
-
- .sbpqs_a {
- color: var(--main-color) !important;
- }
-
- /*Keyboard select text color and hover text color*/
- .sbsb_c:hover .sbqs_c,
- .sbsb_c.gsfs.sbsb_d .sbqs_c {
- color: var(--main-color) !important;
- }
-
- /*Keyboard icon in the search bar*/
- #gs_ok50 {
- filter: invert(100%);
- }
-
- /*Microphone search*/
- ytd-masthead #voice-search-button.ytd-masthead {
- background-color: var(--hover-background) !important;
- }
-
- ytd-voice-search-dialog-renderer[dialog] {
- background-color: var(--second-background) !important;
- }
-
- #header-text.ytd-voice-search-dialog-renderer,
- #microphone-label.ytd-voice-search-dialog-renderer,
- #microphone.ytd-voice-search-dialog-renderer[state="try-again"] #microphone-circle.ytd-voice-search-dialog-renderer yt-icon.ytd-voice-search-dialog-renderer {
- color: var(--main-text) !important;
- }
-
- /*Search results correction*/
- .style-scope.yt-search-query-correction {
- color: var(--main-text) !important;
- }
-
- .style-scope.yt-search-query-correction .italic.yt-formatted-string,
- .style-scope.yt-search-query-correction:hover {
- color: var(--main-color) !important;
- }
-
- /*Similar results*/
- #title.ytd-exploratory-results-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*search results filter border*/
- #filter-menu.ytd-search-sub-menu-renderer {
- border-color: var(--hover-background) !important;
- }
-
- #watch-card-header.ytd-generic-watch-card,
- #img-endpoint.ytd-watch-card-collage-renderer #overlay-button.ytd-watch-card-collage-renderer {
- background: var(--main-color) !important;
- color: var(--main-text) !important;
- }
-
- paper-tab,
- paper-tab.iron-selected.ytd-generic-watch-card {
- color: var(--main-color) !important;
- }
-
- paper-item:hover {
- background-color: var(--second-background) !important;
- }
-
- #img-endpoint.ytd-watch-card-collage-renderer #overlay-button.ytd-watch-card-collage-renderer {
- opacity: .9;
- }
-
- #img-endpoint.ytd-watch-card-collage-renderer #overlay-button.ytd-watch-card-collage-renderer:hover {
- opacity: 1 !important;
- }
-
- /*album*/
- #watch-card-subtitle.ytd-watch-card-rich-header-renderer {
- color: var(--main-text) !important;
- }
-
- .duration.ytd-watch-card-compact-video-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Buttom border for different fields*/
- .unfocused-line.paper-input-container {
- background-color: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- .focused-line.paper-input-container {
- background-color: var(--main-color) !important;
- border-color: var(--main-color) !important;
- }
-
- /*Search page*/
- #result-count.ytd-search-sub-menu-renderer {
- color: var(--dimmer-text) !important;
- }
-
- ytd-search-sub-menu-renderer,
- ytd-exploratory-results-renderer.ytd-item-section-renderer,
- ytd-shelf-renderer.ytd-item-section-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*no results*/
- .promo-title.ytd-background-promo-renderer,
- .promo-body-text.ytd-background-promo-renderer {
- color: var(--main-text) !important;
- }
-
- /*show more*/
- #more.ytd-vertical-list-renderer yt-formatted-string.ytd-vertical-list-renderer,
- #all.ytd-vertical-list-renderer yt-formatted-string.ytd-vertical-list-renderer {
- color: var(--main-text) !important;
- }
-
- #more.ytd-vertical-list-renderer yt-formatted-string.ytd-vertical-list-renderer:hover,
- #all.ytd-vertical-list-renderer yt-formatted-string.ytd-vertical-list-renderer:hover {
- color: var(--main-color) !important;
- }
-
- ytd-search-filter-renderer yt-formatted-string.ytd-search-filter-renderer {
- color: var(--dimmer-text) !important;
- }
-
- ytd-search-filter-renderer.selected yt-formatted-string.ytd-search-filter-renderer,
- ytd-search-filter-renderer.selected #dismiss-x.ytd-search-filter-renderer,
- ytd-search-filter-renderer yt-formatted-string.ytd-search-filter-renderer:hover {
- color: var(--main-color) !important;
- }
-
- /*Search music suggestions*/
- ytd-watch-card-rich-header-renderer {
- background: var(--hover-background) !important;
- }
-
- #overlay-button {
- background: var(--main-color) !important;
- }
-
- #overlay-button:hover {
- filter: brightness(110%) !important;
- }
-
- #watch-card-title,
- #view-all-endpoint:hover {
- color: var(--main-color) !important;
- }
-
- ytd-watch-card-compact-video-renderer[is-condensed],
- #view-all-endpoint {
- border-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- /*Search results related to item searched*/
- a.ytd-search-refinement-card-renderer {
- background-color: var(--second-background) !important;
- border-color: var(--hover-background) !important;
- border-radius: 8px !important;
- }
-
- a.ytd-search-refinement-card-renderer:hover #card-title.ytd-search-refinement-card-renderer div.ytd-search-refinement-card-renderer {
- color: var(--main-color) !important;
- }
-
- #card-title.ytd-search-refinement-card-renderer div.ytd-search-refinement-card-renderer {
- color: var(--main-text) !important;
- }
-
- /*Next button*/
- .center-aligned.ytd-horizontal-card-list-renderer {
- background-color: var(--second-background) !important;
- color: var(--main-text) !important;
- }
-
- .center-aligned.ytd-horizontal-card-list-renderer:hover {
- color: var(--main-color) !important;
- }
-
- /*filter*/
- a.yt-simple-endpoint.ytd-toggle-button-renderer:hover * {
- color: var(--main-color) !important;
- /* fill: var(--main-color) !important; */
- }
-
- #filter-group-name.ytd-search-filter-group-renderer {
- color: var(--main-text) !important;
- border-color: var(--hover-background) !important;
- }
-
- #description-text.ytd-video-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Comments*/
- yt-formatted-string.ytd-comments-header-renderer,
- #contenteditable-root.yt-formatted-string[aria-label].yt-formatted-string:empty::before,
- #contenteditable-textarea.ytd-commentbox {
- color: var(--dimmer-text) !important;
- }
-
- /*sort by*/
- #icon-label.yt-dropdown-menu,
- #label-icon.yt-dropdown-menu {
- color: var(--main-text) !important;
- fill: var(--main-text) !important;
- }
-
- yt-sort-filter-sub-menu-renderer.ytd-comments-header-renderer:hover #icon-label.yt-dropdown-menu,
- yt-sort-filter-sub-menu-renderer.ytd-comments-header-renderer:hover #label-icon.yt-dropdown-menu {
- color: var(--main-color) !important;
- fill: var(--main-color) !important;
- }
-
- /*sort by dropdown*/
- paper-listbox.yt-dropdown-menu {
- background: var(--second-background) !important;
- }
-
- .item.yt-dropdown-menu {
- color: var(--main-text) !important;
- }
-
- paper-listbox.yt-dropdown-menu paper-item.yt-dropdown-menu:hover,
- paper-listbox.yt-dropdown-menu paper-item.yt-dropdown-menu:hover .item.yt-dropdown-menu {
- background: var(--hover-background) !important;
- color: var(--main-color) !important;
- }
-
- paper-listbox.yt-dropdown-menu .yt-dropdown-menu.iron-selected {
- background-color: var(--second-background) !important;
- }
-
- paper-listbox.yt-dropdown-menu .yt-dropdown-menu.iron-selected .item.yt-dropdown-menu {
- color: var(--main-color) !important;
- }
-
- /*text box*/
- #simplebox-placeholder.ytd-comment-simplebox-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #placeholder-area.ytd-comment-simplebox-renderer {
- border-color: var(--hover-background) !important;
- }
-
- #input-container.ytd-commentbox,
- ytd-commentbox {
- --paper-input-container-underline-color: var(--hover-background) !important;
- --paper-input-container-underline-focus-color: var(--main-color) !important;
- }
-
- .focused-line.tp-yt-paper-input-container {
- border-color: var(--main-color) !important;
- }
-
- .unfocused-line.tp-yt-paper-input-container {
- border-color: var(--dimmer-text) !important;
- }
-
- /*emoji selector*/
- #emojis.ytd-commentbox {
- background-color: var(--second-background) !important;
- }
-
- /*comments themselves*/
- #author-text.yt-simple-endpoint.ytd-comment-renderer,
- #content.style-scope #content-text {
- color: var(--main-text) !important;
- }
-
- #author-text.yt-simple-endpoint.ytd-comment-renderer:hover {
- color: var(--main-color) !important;
- }
-
- ytd-author-comment-badge-renderer {
- background-color: var(--hover-background) !important;
- }
-
- #content-text.ytd-comment-renderer,
- ytd-expander[should-use-number-of-lines][collapsed] > #content.ytd-expander {
- color: var(--dimmer-text) !important;
- }
-
- /*read more*/
- .more-button-exp.ytd-comment-renderer,
- .less-button-exp.ytd-comment-renderer {
- color: var(--main-text) !important;
- }
-
- .more-button-exp.ytd-comment-renderer:hover,
- .less-button-exp.ytd-comment-renderer:hover {
- color: var(--main-color) !important;
- }
-
- /*view replies*/
- paper-button.ytd-comment-replies-renderer,
- yt-next-continuation.ytd-comment-replies-renderer,
- yt-icon.ytd-comment-replies-renderer {
- color: var(--main-text) !important;
- }
-
- .more-button.style-scope.ytd-comment-replies-renderer:hover paper-button.ytd-comment-replies-renderer,
- .more-button.style-scope.ytd-comment-replies-renderer:hover yt-next-continuation.ytd-comment-replies-renderer,
- .more-button.style-scope.ytd-comment-replies-renderer:hover yt-icon.ytd-comment-replies-renderer {
- color: var(--main-color) !important;
- }
-
- /*likes*/
- #vote-count-middle.ytd-comment-action-buttons-renderer {
- color: var(--dimmer-text) !important;
- }
-
- ytd-button-renderer yt-formatted-string.ytd-button-renderer:hover {
- color: var(--main-color) !important;
- }
-
- /*Show more videos*/
- yt-next-continuation.ytd-watch-next-secondary-results-renderer {
- --paper-button_-_background-color: transparent !important;
- --paper-button_-_color: var(--dimmer-text) !important;
- }
-
- .style-scope.yt-next-continuation {
- border-color: transparent !important;
- }
-
- .style-scope.yt-next-continuation:hover {
- background-color: transparent !important;
- color: var(--main-color) !important;
- }
-
- yt-formatted-string.ytd-expanded-shelf-contents-renderer {
- color: var(--dimmer-text) !important;
- }
-
- yt-formatted-string.ytd-expanded-shelf-contents-renderer:hover {
- color: var(--main-color) !important;
- }
-
- /*View more comments*/
- paper-button.yt-next-continuation {
- color: var(--dimmer-text) !important;
- }
-
- /*Links in description and published date for comments*/
- #content.ytd-expander a {
- color: var(--main-color) !important;
- opacity: 0.9;
- }
-
- #published-time-text.ytd-comment-renderer,
- #published-time-text.ytd-comment-renderer a {
- --yt-endpoint-color: var(--dimmer-text) !important;
- color: var(--dimmer-text) !important;
- opacity: .8;
- }
-
- #content.ytd-expander a:hover,
- #published-time-text.ytd-comment-renderer a:hover,
- #content.ytd-expander #name.ytd-author-comment-badge-renderer:hover {
- color: var(--main-color) !important;
- opacity: 1 !important;
- }
-
- #content.ytd-expander #name.ytd-author-comment-badge-renderer {
- color: var(--main-text) !important;
- }
-
- /*Heart icon in comments*/
- #hearted-border.ytd-creator-heart-renderer,
- #hearted.ytd-creator-heart-renderer {
- color: var(--main-color) !important;
- fill: var(--main-color) !important;
- }
-
- yt-icon-button#creator-heart-button svg {
- fill: var(--main-color) !important;
- }
-
- /*Pinned by*/
- #label.ytd-pinned-comment-badge-renderer {
- color: var(--main-color) !important;
- opacity: 0.5;
- }
-
- yt-icon.ytd-pinned-comment-badge-renderer {
- fill: var(--main-color) !important;
- opacity: 0.5;
- }
-
- /*Fundraiser message*/
- #wrapper.ytd-donation-unavailable-renderer {
- background-color: var(--hover-background) !important;
- }
-
- /*Chat*/
- /*header*/
- yt-live-chat-header-renderer,
- #header.yt-live-chat-participant-list-renderer,
- yt-live-chat-message-renderer,
- yt-live-chat-ticker-renderer {
- background: var(--hover-background) !important;
- }
-
- yt-live-chat-banner-manager[has-active-banner] {
- background: linear-gradient(var(--hover-background) 0%, var(--second-background) 100%) !important;
- }
-
- /*live replay*/
- #card.yt-live-chat-viewer-engagement-message-renderer,
- yt-live-chat-text-message-renderer[is-highlighted] {
- background: var(--hover-background) !important;
- }
-
- #chat,
- #participants,
- yt-live-chat-renderer {
- background: var(--second-background) !important;
- }
-
- /*show mode was enabled*/
- #container.yt-live-chat-restricted-participation-renderer {
- background: var(--second-background) !important;
- }
-
- #contents.yt-live-chat-mode-change-message-renderer {
- background: var(--hover-background) !important;
- }
-
- #contents.yt-live-chat-mode-change-message-renderer,
- #subtext.yt-live-chat-mode-change-message-renderer {
- color: var(--dimmer-text) !important;
- }
-
- yt-live-chat-toast-renderer[is-showing-message]/*info for show mode*/
- {
- background: var(--hover-background) !important;
- }
-
- /*dropmenu*/
- #menu.yt-live-chat-text-message-renderer {
- background: transparent !important;
- }
-
- paper-listbox {
- background: var(--second-background) !important;
- }
-
- yt-icon.ytd-menu-navigation-item-renderer,
- yt-icon.ytd-menu-service-item-renderer,
- #header.yt-live-chat-participant-list-renderer,
- #author-name.yt-live-chat-author-chip:not(.member):not(.moderator),
- .style-scope.yt-live-chat-ninja-message-renderer {
- color: var(--main-text) !important;
- }
-
- #deleted-state,
- #show-original,
- yt-live-chat-text-message-renderer[is-deleted] #message.yt-live-chat-text-message-renderer,
- #timestamp {
- color: var(--dimmer-text) !important;
- }
-
- /*paid messages*/
- #content.yt-live-chat-paid-message-renderer #message {
- color: black !important;
- }
-
- #message.yt-live-chat-text-message-renderer a.yt-live-chat-text-message-renderer {
- color: var(--main-color) !important;
- text-decoration: none !important;
- }
-
- yt-live-chat-author-chip[is-highlighted] #author-name {
- background: var(--main-color) !important;
- }
-
- /*paid arrows*/
- yt-icon.yt-live-chat-ticker-renderer {
- background: var(--main-background) !important;
- color: var(--main-text) !important;
- }
-
- yt-icon.yt-live-chat-ticker-renderer:hover {
- color: var(--main-color) !important;
- }
-
- #right-arrow-container.yt-live-chat-ticker-renderer,
- #left-arrow-container.yt-live-chat-ticker-renderer {
- background: transparent !important;
- }
-
- /*channel messages*/
- yt-live-chat-text-message-renderer[author-is-owner] {
- background: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- /*pinned*/
- yt-live-chat-banner-manager[has-visible-banner] {
- background: var(--second-background) !important;
- }
-
- #contents.yt-live-chat-banner-renderer > .yt-live-chat-banner-renderer {
- background: transparent !important;
- }
-
- /*Confirmantion popup*/
- paper-toast {
- background-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- /*button*/
- yt-icon-button.yt-live-chat-item-list-renderer,
- yt-live-chat-ninja-message-renderer.yt-live-chat-renderer paper-button.yt-button-renderer,
- yt-live-chat-message-renderer.yt-live-chat-message-input-renderer yt-button-renderer.style-dark[is-paper-button] {
- background: var(--main-background) !important;
- color: var(--main-text) !important;
- }
-
- /*input*/
- yt-live-chat-message-input-renderer {
- background-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- #focused.yt-live-chat-text-input-field-renderer {
- background: var(--main-color) !important;
- }
-
- #count {
- color: var(--dimmer-text) !important;
- }
-
- /*hide chat*/
- #show-hide-button.ytd-live-chat-frame > ytd-toggle-button-renderer.ytd-live-chat-frame {
- background: var(--hover-background) !important;
- }
-
- /*emoji*/
- yt-formatted-string.yt-emoji-picker-category-renderer {
- background: var(--hover-background) !important;
- }
-
- #search-panel.yt-emoji-picker-renderer {
- background: var(--main-background) !important;
- color: var(--main-text) !important;
- }
-
- #search-empty {
- color: var(--dimmer-text) !important;
- }
-
- /*donations superchats cards*/
- #card.yt-live-chat-donation-announcement-renderer {
- background-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- #menu.yt-live-chat-donation-announcement-renderer {
- background: transparent !important;
- }
-
- /*for actually donating*/
- #subtext.yt-live-chat-product-button-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #container.yt-live-chat-product-button-renderer .yt-icon {
- fill: var(--dimmer-text) !important;
- }
-
- /*Fund raiser*/
- #header-section.ytd-donation-shelf-renderer,
- #collapse-controls-section.ytd-donation-shelf-renderer {
- background-color: var(--hover-background) !important;
- }
-
- #header-text.ytd-donation-shelf-renderer,
- #collapse-controls-section.ytd-donation-shelf-renderer {
- color: var(--main-text) !important;
- }
-
- #collapse-controls-section.ytd-donation-shelf-renderer:hover {
- color: var(--main-color) !important;
- }
-
- #header-section.ytd-donation-shelf-renderer .style-scope.ytd-donation-shelf-renderer.no-transition {
- filter: invert(.8);
- }
-
- #donate-section.ytd-donation-shelf-renderer,
- #creator-messages-section.ytd-donation-shelf-renderer,
- #nonprofit-section.ytd-donation-shelf-renderer,
- #nonprofit-title.ytd-donation-shelf-renderer {
- background-color: var(--second-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- #campaign-title.ytd-donation-shelf-renderer,
- .creator-message.ytd-donation-shelf-renderer,
- #campaign-subtitle.ytd-donation-shelf-renderer,
- .creator-message-name.ytd-donation-shelf-renderer,
- #nonprofit-title.ytd-donation-shelf-renderer {
- color: var(--main-text) !important;
- }
-
- .creator-message.ytd-donation-shelf-renderer,
- #campaign-subtitle.ytd-donation-shelf-renderer,
- #nonprofit-subtitle.ytd-donation-shelf-renderer,
- #nonprofit-description.ytd-donation-shelf-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #amount-raised.ytd-donation-shelf-renderer,
- #nonprofit-title.ytd-donation-shelf-renderer yt-icon.ytd-donation-shelf-renderer {
- color: var(--main-color) !important;
- }
-
- #nonprofit-link.ytd-donation-shelf-renderer .inline-icon.ytd-donation-shelf-renderer {
- fill: var(--main-color) !important;
- }
-
- /*progress*/
- #progress-bar-start.ytd-donation-shelf-renderer,
- #progress-bar-end.ytd-donation-shelf-renderer {
- color: var(--main-text) !important;
- }
-
- #matching-label.ytd-donation-shelf-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #progress-bar.ytd-donation-shelf-renderer {
- background-color: var(--dimmer-text) !important;
- }
-
- #progress-bar-fill.ytd-donation-shelf-renderer {
- background-color: var(--main-color) !important;
- }
-
- /*donate button*/
- #donate-section.ytd-donation-shelf-renderer ytd-button-renderer.style-primary[is-paper-button],
- .b3-button.jfk-button,
- .b3-button.jfk-button.jfk-button-action {
- background-color: var(--main-color) !important;
- }
-
- /*donate window*/
- #top-box.ytd-donation-amount-picker-renderer {
- background-color: var(--second-background) !important;
- }
-
- #campaign-title.ytd-donation-amount-picker-renderer,
- #nonprofit-title.ytd-donation-amount-picker-renderer {
- color: var(--main-color) !important;
- }
-
- #campaign-subtitle.ytd-donation-amount-picker-renderer,
- #nonprofit-subtitle.ytd-donation-amount-picker-renderer {
- color: var(--main-text) !important;
- }
-
- /*amount buttons*/
- #suggested-amount-buttons-row.ytd-donation-amount-picker-renderer ytd-button-renderer.ytd-donation-amount-picker-renderer[is-paper-button] paper-button.ytd-button-renderer {
- background-color: var(--second-background) !important;
- }
-
- #suggested-amount-buttons-row.ytd-donation-amount-picker-renderer ytd-button-renderer.ytd-donation-amount-picker-renderer[is-paper-button] paper-button.ytd-button-renderer {
- background-color: var(--second-background) !important;
- border-color: var(--second-background) !important;
- }
-
- #suggested-amount-buttons-row.ytd-donation-amount-picker-renderer ytd-button-renderer.ytd-donation-amount-picker-renderer[is-paper-button][selected] paper-button.ytd-button-renderer,
- .ytd-donation-amount-picker-renderer ytd-button-renderer.style-primary[is-paper-button] {
- background-color: var(--main-color) !important;
- }
-
- /*curency for other amount*/
- span.prefix.style-scope.paper-input-container > div.ytd-donation-amount-picker-renderer {
- color: var(--main-text) !important;
- }
-
- /*Payment window*/
- .popup-mode .b3-page-header {
- background-color: var(--main-background) !important;
- }
-
- .b3-line-items-mundane-items-container,
- .b3-line-items-mundane-items-container {
- background-color: var(--hover-background) !important;
- }
-
- .b3-separator {
- display: none !important;
- }
-
- .b3-line-item-value {
- color: var(--main-color) !important;
- }
-
- .b3-line-item-name,
- .b3-line-item-infomessage,
- .b3-line-item-subvalue {
- color: var(--main-text) !important;
- }
-
- .b3-single-option-form-selector-option-content .b3-existing-instrument-option-label-without-image,
- .b3-dropdown-form-selector .b3-existing-instrument-option-label-without-image,
- .b3-single-option-form-selector-option-content .b3-additional-instrument-option-label,
- .b3-dropdown-form-selector .b3-additional-instrument-option-label,
- .b3-input.focused .b3-input-label,
- .b3-input.focused .b3-input-label-text,
- .b3-input input[type="tel"],
- .b3-input input[type="text"],
- .b3-input input[type="password"],
- .b3-input input[type="email"],
- .b3-input.populated .b3-input-label,
- .b3-input.invalid .b3-input-label,
- .b3-input.autofilled .b3-input-label,
- .b3-input-field > .b3-input-label,
- .b3-input-field > .b3-input-label.accessible,
- .b3-collapsing-form-placeholder-text {
- color: var(--main-text) !important;
- }
-
- .countryselector .goog-flat-menu-button-caption,
- .countryselector .goog-flat-menu-button-caption .goog-menuitem-content {
- color: var(--dimmer-text) !important;
- }
-
- /*icons*/
- .b3-single-option-form-selector-icon,
- .b3-collapsing-form-icon {
- fill: var(--main-text) !important;
- }
-
- .b3-collapsing-form.focused .b3-collapsing-form-icon {
- fill: var(--main-color) !important;
- }
-
- .b3-tooltip-icon {
- filter: invert(1) !important;
- }
-
- /*border*/
- .b3-input-status-indicator {
- background-color: var(--main-color) !important;
- }
-
- .b3-input-accent {
- border-color: var(--hover-background) !important;
- }
-
- /*tooltip*/
- .b3-inline-tooltip-popup-wrapper,
- .help-Helpwidgets-TooltipWidget-content-html {
- background-color: var(--hover-background) !important;
- color: var(--dimmer-text) !important;
- }
-
- .b3-inline-tooltip-popup-wrapper a,
- .help-Helpwidgets-TooltipWidget-content-html a {
- color: var(--main-color) !important;
- }
-
- /*country choice*/
- .goog-menu,
- .goog-menuitem:hover {
- background-color: var(--hover-background) !important;
- }
-
- .goog-menuitem,
- .goog-tristatemenuitem,
- .goog-filterobsmenuitem {
- color: var(--main-text) !important;
- }
-
- .goog-menuitem-highlight .goog-menuitem-content {
- color: var(--main-color) !important;
- }
-
- .goog-menuitem .countryselector-flag {
- border-radius: 4px !important;
- /*hiding ugly white corners*/
- }
-
- /*footer*/
- .b3-legal-message-content,
- .b3-info-message-list.b3-buyflow-extra-messages .b3-info-message-component.b3-info-message-unknown,
- .b3-info-message-component.b3-info-message-unknown.b3-buyflow-extra-messages .b3-info-message-html {
- color: var(--dimmer-text) !important;
- }
-
- .b3-legal-message-content a,
- .b3-info-message-component.b3-info-message-unknown.b3-buyflow-extra-messages .b3-info-message-html a {
- color: var(--main-color) !important;
- }
-
- /*Notification*/
- /*bell icon notification count*/
- .yt-spec-icon-badge-shape--type-notification .yt-spec-icon-badge-shape__badge {
- background-color: var(--main-color) !important;
- border: none !important;
- }
-
- button.yt-icon-button:hover .yt-spec-icon-badge-shape--type-notification .yt-spec-icon-badge-shape__badge {
- color: var(--main-text) !important;
- }
-
- /*load spinner - also for comments*/
- .spinner-layer.layer-1.tp-yt-paper-spinner,
- .spinner-layer.layer-2.tp-yt-paper-spinner,
- .spinner-layer.layer-3.tp-yt-paper-spinner,
- .spinner-layer.layer-4.tp-yt-paper-spinner {
- color: var(--dimmer-text) !important;
- }
-
- #notification-count.ytd-notification-topbar-button-renderer,
- ytd-notification-renderer.unread #new.ytd-notification-renderer,
- .yt-lockup-notification .unread-dot/*account settings*/
- {
- background: var(--main-color) !important;
- border-color: var(--main-color) !important;
- }
-
- .text.ytd-notification-renderer,
- .message.ytd-notification-renderer #yt-masthead-notifications-title,
- .yt-lockup-notification .yt-lockup-title a/*account settings*/
- h2.yt-multi-page-menu-section-renderer/*comments and notifications headers*/
- {
- color: var(--main-text) !important;
- }
-
- .metadata.ytd-notification-renderer,
- .exp-responsive .yt-lockup-tile .yt-lockup-byline/*account settings*/
- {
- color: var(--dimmer-text) !important;
- }
-
- ytd-notification-renderer:hover .message.ytd-notification-renderer {
- color: var(--main-color) !important;
- }
-
- ytd-watch:not([flexy-fit-to-video_]) #chat.ytd-watch,
- ytd-watch:not([flexy-fit-to-video_]) #transcript.ytd-watch {
- padding-left: 0 !important;
- }
-
- ytd-simple-menu-header-renderer {
- background-color: var(--hover-background) !important;
- }
-
- h2.ytd-simple-menu-header-renderer {
- color: var(--main-text) !important;
- }
-
- #sections.ytd-multi-page-menu-renderer > ytd-background-promo-renderer.ytd-multi-page-menu-renderer,
- ytd-multi-page-menu-renderer,
- #yt-masthead-notifications-content .item-section > li > .yt-lockup-tile,
- #yt-masthead-notifications-content .yt-ui-ellipsis,
- /*account settings*/
- #yt-masthead-notifications-content/*bottom thing - account settings*/
- {
- background: var(--second-background) !important;
- border-color: var(--second-background) !important;
- }
-
- .browse-items-load-more-button {
- background-color: var(--main-background) !important;
- border-color: var(--main-background) !important;
- color: var(--main-text) !important;
- }
-
- .browse-items-load-more-button:hover {
- color: var(--main-color) !important;
- }
-
- .promo-message.ytd-background-promo-renderer,
- #message:not([class*="yt-music"]) {
- color: var(--dimmer-text) !important;
- }
-
- /*triangle*/
- .yt-uix-clickcard-card-reverse .yt-uix-card-body-arrow-vertical,
- .yt-uix-hovercard-card-reverse .yt-uix-card-body-arrow-vertical/*account settings*/
- {
- border-bottom-color: var(--hover-background) !important;
- }
-
- /*menu*/
- .yt-ui-menu-content/*account settings*/
- {
- background-color: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- .yt-ui-menu-item/*account settings*/
- {
- background-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- .yt-ui-menu-item:hover/*account settings*/
- {
- color: var(--main-color) !important;
- }
-
- /*gear icon*/
- .yt-uix-button-icon-icon-account-settings/*account settings*/
- {
- filter: brightness(250%) invert(1);
- }
-
- /*Cards*/
- .iv-card-content,
- .ytp-ce-expanding-overlay-background,
- .ytp-cards-teaser .ytp-cards-teaser-text,
- .ytp-cards-teaser .ytp-cards-teaser-box {
- background-color: var(--main-background) !important;
- }
-
- .ytp-cards-teaser .ytp-cards-teaser-box,
- .iv-card-image {
- border: 0px !important;
- }
-
- .iv-card-content > :first-child,
- .html5-video-player a,
- .iv-card h2,
- .ytp-cards-teaser .ytp-cards-teaser-text {
- color: var(--main-text) !important;
- }
-
- .iv-card:hover .iv-card-primary-link,
- .ytp-ce-website-title {
- color: var(--main-color) !important;
- }
-
- .ytp-ce-element:hover {
- border-color: var(--main-color) !important;
- }
-
- .ytp-ce-channel-title.ytp-ce-link {
- color: var(--main-color) !important;
- opacity: 0.9 !important;
- }
-
- .ytp-ce-channel-title.ytp-ce-link:hover,
- .ytp-cards-teaser .ytp-cards-teaser-text:hover {
- color: var(--main-color) !important;
- opacity: 1 !important;
- }
-
- .ytp-ce-channel-metadata.yt-ui-ellipsis.yt-ui-ellipsis-3 {
- background: transparent;
- color: var(--dimmer-text) !important;
- }
-
- /*Cards border color*/
- .iv-card-message {
- border-bottom: 1px solid var(--main-color) !important;
- }
-
- .ytp-ce-channel-this .ytp-ce-channel-metadata {
- border-color: var(--hover-background) !important;
- }
-
- /*Poll*/
- .iv-card-poll label,
- .iv-card-poll.iv-card-poll-voted label.iv-card-poll-choice-checked,
- .iv-card-poll.iv-card-poll-voted label {
- color: var(--main-text) !important;
- }
-
- #vote-info.ytd-backstage-poll-renderer {
- color: var(--dimmer-text) !important;
- }
-
- .iv-card-poll .iv-card-poll-result .iv-card-poll-result-bar {
- background-color: var(--main-color) !important;
- }
-
- ytd-backstage-post-thread-renderer {
- border-color: var(--hover-background) !important;
- }
-
- ytd-backstage-poll-renderer[show-poll-choice-border] .choice-info.ytd-backstage-poll-renderer {
- border-color: transparent !important;
- }
-
- /*Account menu header*/
- ytd-active-account-header-renderer {
- background: var(--second-background) !important;
- }
-
- ytd-active-account-header-renderer:hover {
- background-color: var(--hover-background) !important;
- }
-
- #account-name.ytd-active-account-header-renderer,
- #channel-title.ytd-account-item-renderer {
- color: var(--main-text) !important;
- }
-
- #email.ytd-active-account-header-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*subentries*/
- #label.ytd-toggle-theme-compact-link-renderer,
- tp-yt-paper-item.ytd-compact-link-renderer {
- color: var(--dimmer-text) !important;
- }
-
- ytd-toggle-theme-compact-link-renderer:hover #label.ytd-toggle-theme-compact-link-renderer,
- ytd-toggle-theme-compact-link-renderer:hover yt-icon,
- paper-item.ytd-compact-link-renderer:hover #subtitle,
- paper-item.ytd-compact-link-renderer:hover .deemphasize.yt-formatted-string,
- tp-yt-paper-item.ytd-compact-link-renderer:hover *,
- tp-yt-paper-item.ytd-compact-link-renderer:hover #subtitle.ytd-compact-link-renderer {
- color: var(--main-color) !important;
- }
-
- #footer.ytd-multi-page-menu-renderer > .ytd-multi-page-menu-renderer {
- border-color: var(--hover-background) !important;
- }
-
- .description.ytd-toggle-item-renderer,
- #caption.ytd-toggle-item-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*language*/
- #language.ytd-account-settings,
- #country.ytd-account-settings,
- #restricted.ytd-account-settings,
- .container.ytd-account-settings {
- background-color: var(--second-background) !important;
- }
-
- paper-item.ytd-account-settings {
- color: var(--dimmer-text) !important;
- }
-
- paper-item.ytd-account-settings:hover {
- color: var(--main-color) !important;
- }
-
- /*swich account*/
- yt-formatted-string.ytd-account-item-renderer[secondary] {
- color: var(--dimmer-text) !important;
- }
-
- #selected.ytd-account-item-renderer {
- color: var(--main-color) !important;
- }
-
- /*theme*/
- ytd-compact-link-renderer[compact-link-style="compact-link-style-type-disclaimer"] #label.ytd-compact-link-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Live background color*/
- ytd-thumbnail-overlay-time-status-renderer[overlay-style="LIVE"] {
- background-color: var(--main-color) !important;
- }
-
- .guide-entry-badge.ytd-guide-entry-renderer {
- color: var(--main-color) !important;
- fill: var(--main-color) !important;
- }
-
- .ytp-live-badge[disabled]:before {
- background: var(--main-color) !important;
- }
-
- /*Recolored sidepane icons, menu icons and filter button*/
- .guide-icon.ytd-guide-entry-renderer,
- paper-button.ytd-toggle-button-renderer,
- yt-icon.ytd-compact-link-renderer,
- yt-icon.ytd-toggle-theme-compact-link-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Sidepane titles*/
- #guide-section-title a {
- color: var(--dimmer-text) !important;
- }
-
- #guide-section-title a:hover {
- color: var(--main-color) !important;
- }
-
-
- /*Autoplay text*/
- #upnext.ytd-compact-autoplay-renderer,
- #autoplay.ytd-compact-autoplay-renderer {
- color: var(--dimmer-text) !important;
- opacity: .8;
- }
-
- ytd-compact-autoplay-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*Video was removed by user - not interested*/
- #text.ytd-notification-multi-action-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Video was added/removed to/from a playlist by user*/
- yt-notification-action-renderer[ui-refresh] #text.yt-notification-action-renderer,
- yt-notification-action-renderer[ui-refresh] #sub-text.yt-notification-action-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Links in video description*/
- .description.ytd-video-secondary-info-renderer a {
- color: var(--main-color) !important;
- opacity: .9;
- }
-
- /*Game cards*/
- ytd-rich-metadata-renderer {
- background-color: var(--second-background) !important;
- }
-
- #call-to-action.ytd-rich-metadata-renderer {
- color: var(--main-text) !important;
- }
-
- #title.ytd-rich-metadata-renderer,
- #call-to-action.ytd-rich-metadata-renderer:hover {
- color: var(--main-color) !important;
- }
-
- /*Movie cards*/
- #header.ytd-movie-offer-module-renderer {
- background-color: var(--second-background) !important;
- }
-
- ytd-button-renderer.ytd-movie-offer-module-renderer.style-primary[is-paper-button] {
- background-color: var(--main-color) !important;
- }
-
- #wide-clickable-area.ytd-movie-offer-module-renderer {
- background-color: var(--hover-background) !important;
- }
-
- #info.ytd-movie-offer-module-renderer {
- color: var(--main-text) !important;
- }
-
- h3.ytd-compact-movie-renderer {
- color: var(--main-text) !important;
- }
-
- /*Tour/ticket cards*/
- ytd-ticket-shelf-renderer {
- background-color: var(--second-background) !important;
- }
-
- #primary-event.ytd-ticket-shelf-renderer #meta.ytd-ticket-shelf-renderer #tickets-button.ytd-ticket-shelf-renderer {
- background: var(--main-color) !important;
- color: var(--main-text) !important;
- }
-
- #primary-event.ytd-ticket-shelf-renderer #meta-info.ytd-ticket-shelf-renderer #nearest.ytd-ticket-shelf-renderer,
- #primary-event.ytd-ticket-shelf-renderer #meta-info.ytd-ticket-shelf-renderer #subtitle1.ytd-ticket-shelf-renderer,
- #primary-event.ytd-ticket-shelf-renderer #meta-info.ytd-ticket-shelf-renderer #subtitle2.ytd-ticket-shelf-renderer,
- .where-column-td.ytd-ticket-shelf-renderer .where-column.ytd-ticket-shelf-renderer {
- color: var(--main-text) !important;
- }
-
- .when-date-column.ytd-ticket-shelf-renderer,
- .link.ytd-ticket-shelf-renderer,
- .when-weekday-column.ytd-ticket-shelf-renderer {
- color: var(--main-color) !important;
- }
-
- /*separator*/
- #seperator.ytd-ticket-shelf-renderer,
- ytd-ticket-shelf-renderer {
- border-color: var(--hover-background) !important;
- }
-
-
- /*Author name*/
- #owner-name.ytd-video-owner-renderer {
- opacity: .9;
- }
-
- #owner-name.ytd-video-owner-renderer:hover {
- opacity: 1 !important;
- }
-
- /*Set a memento*/
- ytd-toggle-button-renderer.style-compact-gray[is-paper-button] {
- background-color: var(--second-background) !important;
- color: var(--dimmer-text) !important;
- }
-
- /*Series name*/
- .super-title.ytd-video-primary-info-renderer a,
- #additional-metadata-line.ytd-video-meta-block {
- color: var(--dimmer-text) !important;
- opacity: .8;
- }
-
- #selectionBar.paper-tabs {
- border-color: var(--main-color) !important;
- }
-
- /*"Best" of YouTube icons in sidepane*/
- /*.style-scope.ytd-guide-entry-renderer.no-transition
- {
- filter: grayscale(100%);
- }*/
- /* Promo page */
- body.yt-new-promo-page-use-launched-copy .yt-new-promo-page-header {
- background: var(--main-background) !important;
- }
-
- .yt-new-promo-page-section-text,
- .yt-new-promo-page-header {
- color: var(--dimmer-text);
- }
-
- .yt-new-promo-page-button {
- background-color: var(--main-color) !important;
- color: var(--main-text) !important;
- opacity: .9;
- }
-
- .yt-new-promo-page-button:hover {
- opacity: 1;
- }
-
- /* Crude logo fix */
- .yt-new-promo-page-logo {
- filter: grayscale(100%) invert(100%);
- }
-
- /* Fix for active like/dislike buttons */
- ytd-toggle-button-renderer.style-grey-text[is-icon-button] {
- color: var(--yt-button-color);
- }
-
- ytd-toggle-button-renderer #button.ytd-toggle-button-renderer {
- color: inherit;
- }
-
- /*like/dislike buttons in nested replies*/
- /*.style-scope.ytd-toggle-button-renderer svg
- {
- fill: var(--dimmer-text) !important;
- }
- .style-scope.ytd-toggle-button-renderer yt-icon-button.style-default-active svg
- {
- fill: var(--main-color) !important;
- }*/
- ytd-toggle-button-renderer.ytd-comment-action-buttons-renderer #button.ytd-toggle-button-renderer {
- color: var(--yt-button-color);
- }
-
- ytd-toggle-button-renderer.ytd-comment-action-buttons-renderer .style-default-active {
- color: var(--main-color) !important;
- }
-
- /* Fix for placeholders/skeletons */
- /*ytd-masthead.shell
- {
- background-color: var(--main-background);
- }
- ytd-masthead.shell [class*='skeleton'], [id*='skeleton'] [class*='skeleton'], [id*='skeleton'], .shelf-videos, .skeleton-bg-color
- {
- background-color: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }*/
- /*homepage skeleton*/
- #home-container-skeleton,
- html[dark] #home-container-skeleton {
- background-color: var(--main-background) !important;
- }
-
- /*sidebar skeleton*/
- #guide-skeleton,
- html[dark] #guide-skeleton {
- background-color: var(--second-background) !important;
- }
-
- /*homepage videos skeleton*/
- #home-page-skeleton .skeleton-bg-color,
- html[dark] #home-page-skeleton .skeleton-bg-color {
- background-color: var(--hover-background) !important;
- }
-
- .masthead-skeleton-icon,
- html[dark] .masthead-skeleton-icon,
- /*ytd-masthead.shell [class*='skeleton'], html[dark] ytd-masthead.shell,
- .shelf-videos, html[dark] .shelf-videos,*/
- .skeleton-bg-color,
- html[dark] .skeleton-bg-color {
- background-color: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- .skeleton-light-border-bottom,
- html[dark] .skeleton-light-border-bottom {
- border-bottom: 1px solid var(--hover-background) !important;
- }
-
- ytd-alert-with-button-renderer[type="INFO"],
- #content-wrapper.yt-alert-with-actions-renderer/*TOS*/
- {
- background-color: var(--hover-background) !important;
- }
-
- #content-wrapper.yt-alert-with-actions-renderer yt-button-renderer[is-paper-button] yt-icon.yt-button-renderer {
- color: var(--main-color) !important;
- }
-
- ytd-alert-with-button-renderer[type="INFO"] #text.ytd-alert-with-button-renderer {
- color: var(--main-text) !important;
- }
-
- #alert-message.ytd-consent-bump-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Paid membership*/
- yt-subscription-product-header-renderer.ytd-item-section-renderer {
- color: var(--main-text) !important;
- }
-
- /*Reporting*/
- .introduction-header {
- color: var(--main-text) !important;
- }
-
- .introduction-body,
- .introduction-bullet-items {
- color: var(--dimmer-text) !important;
- }
-
- yt-report-form-modal-renderer[dialog][dialog][dialog] {
- background: var(--main-background) !important;
- }
-
- yt-options-renderer[increased-tooltip-target] yt-icon.yt-options-renderer {
- color: var(--main-text) !important;
- }
-
- /*Help*/
- .ghp-header-searchBox,
- .ghp-autocomplete-label {
- color: var(--dimmer-text) !important;
- }
-
- /*
- .ghp-header-searchIcon.ghpv-loaded, .ghp-iconTextComponent-icon, .ghp-autocomplete-icon
- {
- filter: invert(100%) grayscale(100%) brightness(150%);
- }
- .ghp-autocompleteGlass
- {
- background: rgba(0,0,0,3) !important;
- }
- .ghp-card-title
- {
- color: var(--main-text) !important;
- }
- .ghp-card, .ghp-content, .ghp-iconTextComponent, .ghp-contentFrame, .hcfe
- {
- background-color: var(--second-background) !important;
- border-color: var(--hover-background) !important;
- }
- .ghp-iconTextComponent:hover .ghp-iconTextComponent-label,
- .ghp-iconTextComponent:hover .ghp-separator
- {
- color: var(--main-color) !important;
- border-color: var(--hover-background) !important;
- }
- .ghp-separator
- {
- border-color: var(--hover-background) !important;
- }
- .ghp-iconTextComponent-label, .hcfe
- {
- color: var(--dimmer-text) !important;
- }
- */
- /*Trending page*/
- ytd-destination-button-renderer {
- background-color: var(--hover-background) !important;
- }
-
- #destination-label.ytd-destination-button-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-destination-button-renderer:hover #destination-label.ytd-destination-button-renderer {
- color: var(--main-color) !important;
- }
-
- /*more - shown on low width*/
- ytd-destination-shelf-renderer[is-show-more-visible] #show-more-button.ytd-destination-shelf-renderer,
- #show-more-button.ytd-destination-shelf-renderer {
- background: var(--hover-background) !important;
- }
-
- #show-more-button-icon.ytd-destination-shelf-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-destination-shelf-renderer[is-show-more-visible] #show-more-button.ytd-destination-shelf-renderer:hover #show-more-button-icon.ytd-destination-shelf-renderer {
- color: var(--main-color) !important;
- }
-
- /*Learning*/
- ytd-carousel-header-renderer {
- background: var(--main-background) !important;
- }
-
- /*Music*/
- .flex-container.ytd-compact-station-renderer {
- background-color: var(--second-background) !important;
- }
-
- h3.ytd-compact-station-renderer {
- color: var(--main-text) !important;
- }
-
- .flex-container.ytd-compact-station-renderer:hover h3.ytd-compact-station-renderer {
- color: var(--main-color) !important;
- }
-
- #video-count-text.ytd-compact-station-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Gaming*/
- #live-viewers-count.ytd-game-details-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*History*/
- yt-formatted-string.ytd-sub-feed-option-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #title.ytd-sub-feed-selector-renderer,
- ytd-sub-feed-option-renderer.ytd-sub-feed-selector-renderer {
- border-color: var(--hover-background) !important;
- }
-
- ytd-two-column-browse-results-renderer #secondary.ytd-two-column-browse-results-renderer {
- background-color: var(--second-background) !important;
- }
-
- ytd-two-column-browse-results-renderer #primary ytd-text-header-renderer {
- color: var(--main-text) !important;
- }
-
- /*dialog confirm*/
- yt-confirm-dialog-renderer[dialog][dialog][dialog] {
- background-color: var(--second-background) !important;
- }
-
- #scroller.yt-confirm-dialog-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #cancel-button.yt-confirm-dialog-renderer {
- color: var(--main-text) !important;
- }
-
- .buttons.yt-confirm-dialog-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*Premium*/
- /*Logo icon - Premium*/
- yt-icon.ytd-logo {
- color: var(--main-text);
- }
-
- /*video*/
- #main-title.ytd-unlimited-offer-module-renderer {
- color: var(--main-text) !important;
- }
-
- #sub-title.ytd-unlimited-offer-module-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*popup*/
- .ytd-mealbar-promo-renderer-message-title.ytd-mealbar-promo-renderer {
- color: var(--main-text) !important;
- }
-
- .ytd-mealbar-promo-renderer-message-text.ytd-mealbar-promo-renderer {
- color: var(--dimmer-text) !important;
- }
-
- .button-container.ytd-mealbar-promo-renderer {
- border-color: var(--hover-background) !important;
- }
-
- ytd-grid-video-renderer[is-dismissed] #dismissed {
- border-color: var(--hover-background) !important;
- }
-
- ytd-grid-video-renderer[is-dismissed] #dismissed .ytd-notification-multi-action-renderer {
- color: var(--dimmer-text) !important;
- }
-
- ytd-dismissal-follow-up-renderer[dialog][dialog][dialog] {
- background: var(--main-background) !important;
- }
-
- #content.ytd-dismissal-follow-up-renderer #checkboxLabel.paper-checkbox,
- #content.ytd-dismissal-follow-up-renderer #label.ytd-dismissal-reason-video-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #buttons.ytd-dismissal-follow-up-renderer {
- border-top-color: var(--hover-background) !important;
- }
-
- /*New TOS*/
- yt-alert-with-actions-renderer {
- background-color: var(--hover-background) !important;
- }
-
- #text.yt-alert-with-actions-renderer,
- #alert-message.yt-alert-with-actions-renderer {
- color: var(--main-text) !important;
- }
-
- yt-button-renderer yt-formatted-string.yt-button-renderer,
- #icon.yt-alert-with-actions-renderer {
- color: var(--main-color) !important;
- }
-
- /*actual page for TOS*/
- #yts-article #article-container.ytg-box #summary {
- background-color: var(--hover-background) !important;
- }
-
- .separator,
- .with-divider,
- .header,
- #yts-article #header,
- #yts-nav {
- border-color: var(--hover-background) !important;
- }
-
- #yts-nav .indented .sub-level a,
- #yts-nav .top-level a,
- #yts-article #header {
- color: var(--main-text) !important;
- }
-
- /*Premium page (https://www.youtube.com/premium)*/
- yt-button-renderer#manage-subscription-button yt-formatted-string.yt-button-renderer {
- color: inherit !important;
- }
-
- .yt-unlimited-page-header-renderer a.yt-simple-endpoint.yt-formatted-string {
- color: var(--main-color) !important;
- }
-
- #header.yt-music-pass-small-feature-info-renderer,
- .question.yt-generic-faq-question-renderer,
- .answer-arrow.yt-generic-faq-question-renderer {
- color: var(--main-text) !important;
- }
-
- #description.yt-music-pass-small-feature-info-renderer,
- .container.yt-faq-section-renderer,
- .answer.yt-generic-faq-question-renderer,
- .text.ytd-simple-text-section-renderer {
- color: var(--dimmer-text) !important;
- }
-
- yt-generic-faq-question-renderer .yt-simple-endpoint.style-scope.yt-formatted-string,
- yt-generic-faq-question-renderer a.yt-simple-endpoint.yt-formatted-string:only-of-type,
- .text.ytd-simple-text-section-renderer a.yt-simple-endpoint.yt-formatted-string:only-of-type {
- color: var(--main-color) !important;
- }
-
- /*Paid memberships*/
- paper-card.yt-subscription-product-upsell-offer-renderer {
- background-color: var(--second-background) !important;
- }
-
- #title.yt-subscription-product-upsell-offer-renderer,
- #description.yt-subscription-product-upsell-offer-renderer,
- #additional-info.yt-subscription-product-upsell-offer-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Gaming page (https://www.youtube.com/gaming) and gaming channels*/
- #channel-details.ytd-carousel-header-renderer,
- #channel-header-container.ytd-topic-channel-details-renderer {
- background-color: var(--main-background) !important;
- }
-
- #bg.ytd-interactive-tabbed-header-renderer {
- fill: var(--main-background) !important;
- }
-
- #tabs-inner-container.ytd-interactive-tabbed-header-renderer {
- background-color: transparent !important;
- }
-
- /*Acount page specific*/
- /*Sidebar*/
- #creator-page.account-page,
- ytd-settings-sidebar-renderer {
- background-color: var(--second-background) !important;
- }
-
- .exp-kevlar-settings .account-page #creator-sidebar h3 {
- color: var(--main-text) !important;
- }
-
- .exp-kevlar-settings .account-page #creator-sidebar .creator-sidebar-item a {
- color: var(--dimmer-text) !important;
- }
-
- .exp-kevlar-settings .account-page #creator-sidebar .creator-sidebar-item.selected > a,
- .exp-kevlar-settings .account-page #creator-sidebar .creator-sidebar-item.selected > a:hover,
- .exp-kevlar-settings .account-page #creator-sidebar .creator-sidebar-item:hover a {
- background-color: var(--hover-background) !important;
- color: var(--main-color) !important;
- }
-
- ytd-compact-link-renderer[compact-link-style="compact-link-style-type-settings-sidebar"][active],
- ytd-compact-link-renderer[compact-link-style="compact-link-style-type-settings-sidebar"][active]:hover {
- background-color: var(--hover-background) !important;
- }
-
- /*Burger sidebar*/
- #appbar-guide-menu,
- .guide-flyout {
- background-color: var(--second-background) !important;
- }
-
- #guide-container .guide-item {
- color: var(--main-text) !important;
- }
-
- #guide-container .guide-item:hover {
- background-color: var(--hover-background) !important;
- color: var(--main-color) !important;
- }
-
- /*headers*/
- .exp-invert-logo li.guide-section h3,
- .exp-invert-logo li.guide-section h3 a {
- color: var(--main-color) !important;
- }
-
- .guide-section-separator/*divider*/
- {
- border-color: var(--hover-background) !important;
- }
-
- /*Contents - account*/
- .account-page-header,
- ytd-section-list-renderer[page-subtype="account-settings"] a.yt-simple-endpoint.yt-formatted-string {
- color: var(--main-color) !important;
- }
-
- #account-page-header-title,
- h2.account-section-header {
- color: var(--main-text) !important;
- }
-
- /*title of the page*/
- #name.ytd-page-introduction-renderer,
- #name.ytd-channel-options-renderer,
- ytd-settings-options-renderer .yt-formatted-string:not(a).bold {
- color: var(--main-text) !important;
- }
-
- .exp-kevlar-settings #account-page-header-subtitle,
- .account-info-item .account-info-label,
- .account-section .account-email,
- .account-content,
- .account-section-subtext {
- color: var(--dimmer-text) !important;
- }
-
- /*other text*/
- #text.ytd-page-introduction-renderer,
- /*email*/
- #text.ytd-settings-options-renderer,
- /*descriptions, metadata, below text*/
- #label.ytd-settings-checkbox-renderer,
- #label.ytd-settings-radio-option-renderer,
- /*playback*/
- #text.ytd-connected-app-renderer/*connected accounts*/
- {
- color: var(--dimmer-text) !important;
- }
-
- .yt-horizontal-rule/*divider*/
- {
- border-color: var(--hover-background) !important;
- }
-
- .account-info .account-photo .yt-thumb/*avatar*/
- {
- border-radius: 100%;
- }
-
- .account-content a,
- .account-header a/*various links*/
- {
- color: var(--main-color) !important;
- }
-
- .yt-thumb {
- background-color: var(--hover-background) !important;
- }
-
- /*Notifications*/
- .setting-reminder,
- h3.account-section-header {
- color: var(--main-text) !important;
- }
-
- .yt-uix-form-input-checkbox-container input:checked + .yt-uix-form-input-checkbox-element {
- border-color: #000;
- filter: invert(1);
- }
-
- .desktop-notifications .browser {
- background-color: var(--hover-background) !important;
- color: var(--main-color) !important;
- border-color: var(--hover-background) !important;
- }
-
- .desktop-notifications .browser .yt-uix-button.turn-on,
- .desktop-notifications .browser .yt-uix-button.turn-off,
- .resume-setting-button,
- .undo-setting-button-section,
- .resume-all-settings-button/*turn off*/
- {
- background: var(--main-background) !important;
- border-color: var(--main-background) !important;
- color: var(--main-color) !important;
- }
-
- .yt-uix-form-input-select/*dropdowns*/
- {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- /*checkboxes*/
- tp-yt-paper-toggle-button[checked]:not([disabled]) .toggle-bar.tp-yt-paper-toggle-button {
- background-color: var(--main-color) !important;
- opacity: 1 !important;
- }
-
- tp-yt-paper-toggle-button[checked]:not([disabled]) .toggle-button.tp-yt-paper-toggle-button {
- background-color: var(--main-text) !important;
- }
-
- /*language*/
- ytd-dropdown-renderer[has-background] tp-yt-paper-dropdown-menu-light.ytd-dropdown-renderer {
- background-color: var(--hover-background) !important;
- }
-
- label.label-is-floating.tp-yt-paper-dropdown-menu-light,
- #label.ytd-dropdown-item-renderer {
- color: var(--main-text) !important;
- }
-
- #input.tp-yt-paper-dropdown-menu-light {
- color: var(--dimmer-text) !important;
- }
-
- /*Playback*/
- .yt-help-icon {
- filter: invert(1);
- }
-
- .yt-uix-clickcard-card-content,
- .yt-uix-hovercard-card-content {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- .yt-uix-clickcard-card-border,
- .yt-uix-hovercard-card-border {
- border-color: var(--hover-background) !important;
- }
-
- .yt-uix-clickcard-card-flip .yt-uix-card-body-arrow-horizontal,
- .yt-uix-hovercard-card-flip .yt-uix-card-body-arrow-horizontal {
- border-right-color: var(--hover-background) !important;
- }
-
- .exp-kevlar-settings .account-page .yt-uix-button/*save buttons*/
- {
- background: var(--main-color) !important;
- border-color: var(--main-color) !important;
- color: var(--main-text) !important;
- opacity: .9;
- }
-
- .exp-kevlar-settings .account-page .yt-uix-button:hover {
- opacity: 1 !important;
- }
-
- /*Social*/
- .social-connector {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- /*TV*/
- .howto-circle {
- background-color: var(--hover-background) !important;
- color: var(--main-color) !important;
- }
-
- .howto-text {
- color: var(--dimmer-text) !important;
- }
-
- .remote-icon {
- filter: invert(1) brightness(200%);
- }
-
- h3.pairing-section-header {
- color: var(--main-text)
- }
-
- .yt-uix-form-input-select,
- .yt-uix-form-input-text,
- .yt-uix-form-input-textarea {
- border-color: var(--hover-background) !important;
- }
-
- #account-page-header-avatar.howto-promo-image {
- filter: invert(1) grayscale(1);
- }
-
- /*TV code*/
- .yt-uix-form-input-select,
- .yt-uix-form-input-text,
- .yt-uix-form-input-textarea {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- /*Footer*/
- body #footer-container {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- #footer-main/*divider*/
- {
- border-color: var(--hover-background) !important;
- }
-
- /*links*/
- #footer-links-primary a {
- color: var(--main-text) !important;
- }
-
- #footer-links-secondary a {
- color: var(--dimmer-text) !important;
- }
-
- #footer-links-primary a:hover,
- #footer-links-secondary a:hover {
- color: var(--main-color) !important;
- }
-
- /*buttons*/
- #footer .yt-uix-button-group .yt-uix-button,
- #footer .pickers li,
- #footer .footer-history,
- #footer #google-help {
- background: var(--second-background) !important;
- border-color: var(--second-background) !important;
- color: var(--main-text) !important;
- box-shadow: none !important;
- }
-
- .yt-uix-button-default.yt-uix-button-toggled:hover {
- box-shadow: none !important;
- }
-
- #footer .yt-uix-button-icon-footer-language,
- #footer .yt-uix-button-icon-footer-history,
- #footer .yt-uix-button-icon-questionmark {
- filter: invert(1);
- }
-
- .yt-uix-button-arrow {
- border-top-color: var(--main-text) !important;
- }
-
- #yt-picker-country-footer,
- #yt-picker-language-footer,
- #yt-picker-safetymode-footer {
- background: var(--second-background) !important;
- border-color: var(--second-background) !important;
- color: var(--main-text) !important;
- }
-
- .yt-picker-header,
- #safety-form p.safety-submit/*divider*/
- {
- border-color: var(--hover-background) !important;
- }
-
- .yt-picker-header h3.yt,
- .yt-picker-content strong {
- color: var(--main-text) !important;
- }
-
- #yt-picker-country-footer .yt-default .yt-notes,
- p.yt-notes,
- #safety-mode-description li {
- color: var(--dimmer-text) !important;
- }
-
- #yt-picker-country-footer .yt-picker-content a,
- .yt-picker-content button {
- color: var(--main-color) !important;
- }
-
- #yt-picker-safetymode-footer button/*save*/
- {
- background: var(--main-color) !important;
- border-color: var(--main-color) !important;
- color: var(--main-text) !important;
- opacity: .9;
- }
-
- /*Notification buttom corner - for settings, watch later etc*/
- tp-yt-paper-toast {
- background: var(--hover-background) !important;
- color: var(--main-text) !important;
- box-shadow: var(--shadow) !important;
- }
-
- /*Topic auto-generated by youtube*/
- #auto-generated.ytd-interactive-tabbed-header-renderer,
- #metadata.ytd-interactive-tabbed-header-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Keyboard shortcuts Shift-/ */
- ytd-hotkey-dialog-renderer[dialog][dialog][dialog] {
- background-color: var(--main-background) !important;
- }
-
- ytd-hotkey-dialog-section-option-renderer {
- border-color: var(--hover-background) !important;
- }
-
-
- /*SponsorBlock*/
- /*logo change*/
- #sponsorBlockPopupLogo,
- .sponsorSkipLogo {
- display: block !important;
- -moz-box-sizing: border-box !important;
- box-sizing: border-box !important;
- background: url(https://raw.githubusercontent.com/RaitaroH/YouTube-DeepDark/master/YT_Images/IconSponsorBlocker256px.png) top left no-repeat !important;
- background-size: 100% !important;
- position: relative !important;
- }
-
- #sponsorBlockPopupLogo {
- width: 40px !important;
- height: 40px !important;
- padding-left: 40px !important;
- }
-
- /*for overlays*/
- .sponsorSkipLogo {
- width: 18px !important;
- height: 18px !important;
- padding-left: 18px !important;
- }
-
- .sponsorBlockTooltip {
- background-color: var(--hover-background) !important;
- }
-
- /*Fix like, dislike and share icons and text using wrong color*/
- .yt-spec-button-shape-next__icon,
- .ytd-segmented-like-dislike-button-renderer > yt-button-shape > button > .yt-spec-button-shape-next--button-text-content,
- .ytd-menu-renderer > yt-button-shape > button > .yt-spec-button-shape-next--button-text-content,
- .yt-spec-button-shape-next > span#text {
- color: var(--main-text)
- }
-
- /*Player tooltip background*/
- .ytp-tooltip-text {
- background: var(--hover-background) !important
- }
-}
-
-@-moz-document url-prefix('https://www.youtube.com/redirect') {
- /*Are you sure you want to leave YouTube? redirect*/
- /*seems like youtube will never update this page so, yeah*/
- #invalid-token-redirect-warning-text/*h1*/
- {
- color: var(--main-text) !important;
- }
-
- /*span*/
- #redirect-main-text {
- color: var(--dimmer-text) !important;
- }
-
- #redirect-main-text .bolded {
- color: var(--main-color);
- }
-
- /*search*/
- #masthead-search-terms-border {
- border-color: var(--hover-background) !important;
- background-color: var(--hover-background) !important;
- box-shadow: var(--shadow) !important;
- }
-
- #masthead-search-terms {
- color: var(--main-text);
- }
-
- .search-button {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- /*๐ is missing, nice*/
- .search-button-content {
- background: no-repeat url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNy4zOTE3IDE2LjgwODNMMTIuNzMzMyAxMi4xNUMxMy42MjUgMTEuMTI1IDE0LjE2NjcgOS43OTE2NyAxNC4xNjY3IDguMzMzMzNDMTQuMTY2NyA1LjEwODMzIDExLjU1ODMgMi41IDguMzMzMzMgMi41QzUuMTA4MzMgMi41IDIuNSA1LjEwODMzIDIuNSA4LjMzMzMzQzIuNSAxMS41NTgzIDUuMTA4MzMgMTQuMTY2NyA4LjMzMzMzIDE0LjE2NjdDOS43OTE2NyAxNC4xNjY3IDExLjEyNSAxMy42MjUgMTIuMTUgMTIuNzQxN0wxNi44MDgzIDE3LjRMMTcuMzkxNyAxNi44MDgzWk04LjMzMzMzIDEzLjMzMzNDNS41NzUgMTMuMzMzMyAzLjMzMzMzIDExLjA5MTcgMy4zMzMzMyA4LjMzMzMzQzMuMzMzMzMgNS41NzUgNS41NzUgMy4zMzMzMyA4LjMzMzMzIDMuMzMzMzNDMTEuMDkxNyAzLjMzMzMzIDEzLjMzMzMgNS41NzUgMTMuMzMzMyA4LjMzMzMzQzEzLjMzMzMgMTEuMDkxNyAxMS4wOTE3IDEzLjMzMzMgOC4zMzMzMyAxMy4zMzMzWiIgZmlsbD0iIzAzMDMwMyIvPjwvc3ZnPg==") !important;
- filter: invert(1);
- }
-
- #redirect-backto-safety-button:hover {
- color: var(--main-text) !important;
- }
-
- /*logo icon is also missing, but this __should__ change in the future*/
- .logo {
- background: no-repeat url("https://raw.githubusercontent.com/RaitaroH/YouTube-DeepDark/master/YT_Images/Logo.png") !important;
- background-size: 70% !important;
- padding: 10px;
- width: 120px !important;
- height: 33px !important;
- box-sizing: border-box !important;
- position: relative;
- right: -30px;
- }
-
- #logo-container .content-region {
- color: var(--main-text) !important;
- }
-}
-
-/* Youtube buttons shape */
-.yt-core-attributed-string--white-space-no-wrap {
- color: var(--main-color);
-}
diff --git a/styles/youtube/src/YouTubeCatppuccinLatte.user.css b/styles/youtube/src/YouTubeCatppuccinLatte.user.css
deleted file mode 100644
index b936a2851e..0000000000
--- a/styles/youtube/src/YouTubeCatppuccinLatte.user.css
+++ /dev/null
@@ -1,4285 +0,0 @@
-/* ==UserStyle==
-@name YouTube Catppuccin-Latte
-@namespace github.com/catppuccin/YouTube
-@homepageURL https://github.com/catppuccin/YouTube
-@version 1.3.7
-@updateURL https://github.com/catppuccin/YouTube/raw/main/src/YouTubeCatppuccinLatte.user.css
-@description Soothing pastel theme for YouTube
-@author elkrien based on RaitaroH Youtube-DeepDark (github.com/RaitaroH/YouTube-DeepDark)
-@license GNU-V3.0
-
-@preprocessor stylus
-
-@var select stylus-deepdark-style "Preset themes" [
- "Catppuccin-Latte-Green",
- "Catppuccin-Latte-Flamingo",
- "Catppuccin-Latte-Mauve",
- "Catppuccin-Latte-Pink",
- "Catppuccin-Latte-Lavender",
- "Catppuccin-Latte-Red",
- "Catppuccin-Latte-Peach",
- "Catppuccin-Latte-Yellow",
- "Catppuccin-Latte-Teal",
- "Catppuccin-Latte-Blue",
- "Catppuccin-Latte-Sky",
- "Catppuccin-Latte-Maroon",
- "Catppuccin-Latte-Sapphire",
- "Catppuccin-Latte-Rosewater",
- "Custom"
-]
-
-@var checkbox join-color "Use dark join button" 1
-@var checkbox subscribe-color "Use dark subscribe button" 0
-
-@var text scrollbar_width "Scrollbar width" 6px
-@var color scrollbar_track "Scrollbar background" "rgba(0,0,0, 0)"
-
-@var color mainColor "Custom main color" "#1E66F5"
-@var color mainBackground "Custom main background" "#EFF1F5"
-@var color secondBackground "Custom second background" "#E6E9EF"
-@var color playerBackground "Custom player background" "#DCE0E8"
-@var color hoverBackground "Custom hover background" "#CCD0DA"
-@var color mainText "Custom main text" "#4C4F69"
-@var color dimmerText "Custom second text" "#7C7F93"
-@var color colorShadow "Custom shadow color" "rgba(56, 60, 74, .3)"
-
-==/UserStyle== */
-@-moz-document regexp('https?:\\/\\/(?!gaming\\.)(?!music\\.)(?!tv\\.)(?!artists\\.)(?!studio\\.).*youtube(?!kids\\.).*\\.com\\/(?!premium|howyoutubeworks).*$') {
-
- /* Author : Theme made by RaitaroH & modified for Catppuccin by elkrien */
- /* Co-authors : https://github.com/MechaLynx https://github.com/MaximeRF */
- /* Home : https://github.com/catppuccin/YouTube */
- /* Licence : GNU General Public License v3.0 */
- /*Main color variables*/
- :root {
- if stylus-deepdark-style=="Catppuccin-Latte-Green" {
- --main-color: #40A02B;
- --main-background: #EFF1F5;
- --second-background: #E6E9EF;
- --player-background: #DCE0E8;
- --hover-background: #CCD0DA;
- --main-text: #4C4F69;
- --dimmer-text: #7C7F93;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Latte-Lavender" {
- --main-color: #7287FD;
- --main-background: #EFF1F5;
- --second-background: #E6E9EF;
- --player-background: #DCE0E8;
- --hover-background: #CCD0DA;
- --main-text: #4C4F69;
- --dimmer-text: #7C7F93;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Latte-Flamingo" {
- --main-color: #DD7878;
- --main-background: #EFF1F5;
- --second-background: #E6E9EF;
- --player-background: #DCE0E8;
- --hover-background: #CCD0DA;
- --main-text: #4C4F69;
- --dimmer-text: #7C7F93;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Latte-Mauve" {
- --main-color: #8839EF;
- --main-background: #EFF1F5;
- --second-background: #E6E9EF;
- --player-background: #DCE0E8;
- --hover-background: #CCD0DA;
- --main-text: #4C4F69;
- --dimmer-text: #7C7F93;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Latte-Pink" {
- --main-color: #EA76CB;
- --main-background: #EFF1F5;
- --second-background: #E6E9EF;
- --player-background: #DCE0E8;
- --hover-background: #CCD0DA;
- --main-text: #4C4F69;
- --dimmer-text: #7C7F93;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Latte-Red" {
- --main-color: #D20F39;
- --main-background: #EFF1F5;
- --second-background: #E6E9EF;
- --player-background: #DCE0E8;
- --hover-background: #CCD0DA;
- --main-text: #4C4F69;
- --dimmer-text: #7C7F93;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Latte-Peach" {
- --main-color: #FE640B;
- --main-background: #EFF1F5;
- --second-background: #E6E9EF;
- --player-background: #DCE0E8;
- --hover-background: #CCD0DA;
- --main-text: #4C4F69;
- --dimmer-text: #7C7F93;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Latte-Yellow" {
- --main-color: #DF8E1D;
- --main-background: #EFF1F5;
- --second-background: #E6E9EF;
- --player-background: #DCE0E8;
- --hover-background: #CCD0DA;
- --main-text: #4C4F69;
- --dimmer-text: #7C7F93;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Latte-Teal" {
- --main-color: #179299;
- --main-background: #EFF1F5;
- --second-background: #E6E9EF;
- --player-background: #DCE0E8;
- --hover-background: #CCD0DA;
- --main-text: #4C4F69;
- --dimmer-text: #7C7F93;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Latte-Blue" {
- --main-color: #1E66F5;
- --main-background: #EFF1F5;
- --second-background: #E6E9EF;
- --player-background: #DCE0E8;
- --hover-background: #CCD0DA;
- --main-text: #4C4F69;
- --dimmer-text: #7C7F93;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Latte-Sky" {
- --main-color: #04A5E5;
- --main-background: #EFF1F5;
- --second-background: #E6E9EF;
- --player-background: #DCE0E8;
- --hover-background: #CCD0DA;
- --main-text: #4C4F69;
- --dimmer-text: #7C7F93;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Latte-Maroon" {
- --main-color: #E64553;
- --main-background: #EFF1F5;
- --second-background: #E6E9EF;
- --player-background: #DCE0E8;
- --hover-background: #CCD0DA;
- --main-text: #4C4F69;
- --dimmer-text: #7C7F93;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Latte-Sapphire" {
- --main-color: #209FB5;
- --main-background: #EFF1F5;
- --second-background: #E6E9EF;
- --player-background: #DCE0E8;
- --hover-background: #CCD0DA;
- --main-text: #4C4F69;
- --dimmer-text: #7C7F93;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Latte-Rosewater" {
- --main-color: #DC8A78;
- --main-background: #EFF1F5;
- --second-background: #E6E9EF;
- --player-background: #DCE0E8;
- --hover-background: #CCD0DA;
- --main-text: #4C4F69;
- --dimmer-text: #7C7F93;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Custom" {
- --main-color: mainColor;
- --main-background: mainBackground;
- --second-background: secondBackground;
- --player-background: playerBackground;
- --hover-background: hoverBackground;
- --main-text: mainText;
- --dimmer-text: dimmerText;
- --shadow: 0 1px 0.5px colorShadow;
- }
- }
-
- /*Error page*/
- #error-page {
- background-color: var(--main-background) !important;
- color: var(--main-text) !important;
- }
-
- * {
- scrollbar-color: var(--main-color) scrollbar_track !important;
- scrollbar-width: thin !important;
- --yt-spec-text-primary: var(--main-text) !important;
- --yt-spec-text-secondary: var(--dimmer-text) !important;
- --paper-spinner-color: var(--dimmer-text) !important;
-
- --paper-input-container-color: var(--dimmer-text) !important;
-
- --paper-radio-button-unchecked-color: var(--dimmer-text) !important;
- --paper-radio-button-unchecked-background-color: transparent !important;
- --paper-radio-button-checked-color: var(--main-color) !important;
- --paper-radio-button-checked-ink-color: var(--main-color) !important;
- --paper-radio-button-unchecked-ink-color: var(--main-color) !important;
-
- --paper-checkbox-unchecked-color: var(--dimmer-text) !important;
- --paper-checkbox-checked-color: var(--main-color) !important;
- --paper-checkbox-checkmark-color: none !important;
- --paper-checkbox-checked-ink-color: var(--main-color) !important;
- --paper-checkbox-unchecked-ink-color: var(--main-color) !important;
- --yt-spec-call-to-action: var(--main-color) !important;
- --yt-spec-suggested-action: var(--hover-background) !important;
- --yt-spec-outline: var(--hover-background) !important;
- --yt-spec-brand-button-background: var(--main-color) !important;
- /*in incognito this may be used as subscribe button but is inconsistent .yt-spec-button-shape-next--brand.yt-spec-button-shape-next--filled*/
- --yt-formatted-string-bold-color: var(--dimmer-text) !important;
- /*this affects number of views*/
- }
-
- /*Scrollbar fix for chrome*/
- *:not([hide-scrollbar]) ::-webkit-scrollbar-thumb {
- background: var(--main-color) !important;
- }
-
- *:not([hide-scrollbar]) ::-webkit-scrollbar {
- width: scrollbar_width !important;
- }
-
- /*Scrollbar fix for firefox*/
- ::-webkit-scrollbar-track {
- background: scrollbar_track !important;
- }
-
- ::-webkit-scrollbar-thumb {
- background: var(--main-color) !important;
- }
-
- /*Background for the entire page*/
- html,
- ytd-browse,
- ytd-watch,
- ytd-search,
- ytd-app,
- ytd-app[is-watch-page],
- [class*="ytd-watch-flexy"]:not(#engagement-panel-scrim),
- .style-scope.ytd-page-manager.hide-skeleton,
- .account-container {
- background-color: var(--main-background) !important;
- }
-
- /*Border for the sidemenu*/
- #guide-content.ytd-app {
- border-right: 1px solid var(--yt-border-color) !important;
- }
-
- /*Changed text highlight*/
- ::selection {
- background: var(--main-color) !important;
- color: var(--hover-background) !important;
- }
-
- ::-moz-selection {
- background: var(--main-color) !important;
- color: var(--hover-background) !important;
- }
-
- /*Outline for links*/
- a {
- outline-color: var(--main-color) !important;
- }
-
- a:hover {
- color: var(--main-color) !important;
- fill: var(--main-color) !important;
- }
-
- /*Outline for comments*/
- #content-text.ytd-comment-renderer {
- outline: none !important;
- }
-
- /*Placeholder image on pages that need an account - such as Subscriptions*/
- ytd-background-promo-renderer .image.ytd-background-promo-renderer,
- ytd-message-renderer yt-icon.ytd-message-renderer {
- color: var(--main-text) !important;
- }
-
- /*Nav bar*/
- ytd-masthead,
- #yt-masthead-container,
- #masthead-positioner-height-offset/*account page*/
- {
- background-color: var(--second-background) !important;
- border-bottom-color: var(--hover-background) !important;
- }
-
- yt-icon-button svg {
- fill: var(--dimmer-text) !important;
- }
-
- yt-icon-button:hover svg {
- fill: var(--main-color) !important;
- }
-
- #logo-icon-container.ytd-topbar-logo-renderer #youtube-paths.ytd-topbar-logo-renderer path.ytd-topbar-logo-renderer {
- fill: var(--main-text) !important;
- }
-
- /*acount settings page*/
- /*logo*/
- .exp-invert-logo.inverted-hdpi #header::before,
- .exp-invert-logo.inverted-hdpi .ypc-join-family-header .logo,
- .exp-invert-logo.inverted-hdpi #footer-logo .footer-logo-icon,
- .exp-invert-logo.inverted-hdpi #yt-masthead #logo-container .logo,
- .exp-invert-logo.inverted-hdpi #masthead #logo-container,
- .exp-invert-logo.inverted-hdpi .admin-masthead-logo a,
- .exp-invert-logo.inverted-hdpi #yt-sidebar-styleguide-logo #logo {
- filter: invert(1) grayscale(1);
- }
-
- /*buttons*/
- #yt-masthead-creation-button {
- filter: brightness(220%);
- }
-
- #yt-masthead-notifications .yt-uix-button-icon-bell {
- filter: invert(1) brightness(720%);
- }
-
- #sections.ytd-multi-page-menu-renderer > .ytd-multi-page-menu-renderer:not(:last-child) {
- border-color: var(--hover-background) !important;
- }
-
- /*Chat in the header*/
- ytd-conversation-switcher-item-renderer {
- border-color: var(--hover-background) !important;
- }
-
- #last-post.ytd-conversation-switcher-item-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*invite friends*/
- #bar.ytd-copy-connection-invite-url-renderer {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- #icon.ytd-copy-connection-invite-url-renderer {
- color: var(--main-text) !important;
- }
-
- /*chat popup*/
- ytd-conversation-section-renderer {
- background: var(--second-background) !important;
- }
-
- #title-bar.ytd-conversation-section-renderer {
- border-color: var(--hover-background) !important;
- }
-
- ytd-conversation-text-item-renderer[justification-style="JUSTIFICATION_START"] #post-text.ytd-conversation-text-item-renderer,
- ytd-conversation-link-item-renderer[justification-style="JUSTIFICATION_START"] #link.ytd-conversation-link-item-renderer,
- #bar.ytd-conversation-link-item-renderer,
- #thumbnail.ytd-inline-playback-renderer,
- #video-data.ytd-inline-playback-renderer {
- border-color: var(--hover-background) !important;
- background: var(--hover-background) !important;
- }
-
- #post-text.ytd-conversation-text-item-renderer,
- textarea.iron-autogrow-textarea {
- color: var(--main-text) !important;
- }
-
- #displayed-text.ytd-conversation-link-item-renderer,
- #icon.ytd-conversation-link-item-renderer {
- color: var(--main-color) !important;
- }
-
- #metadata.ytd-conversation-metadata-item-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Backgrounds*/
- #like-bar.ytd-sentiment-bar-renderer,
- #progress.ytd-thumbnail-overlay-resume-playback-renderer,
- #selectionBar.paper-tabs {
- background-color: var(--main-color) !important;
- }
-
- /*Sidebar*/
- #guide-content.ytd-app,
- #contentContainer.app-drawer,
- #guide-wrapper.ytd-app {
- background: var(--second-background) !important;
- }
-
- #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer,
- #guide-section-title.ytd-guide-section-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-guide-entry-renderer:hover #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer,
- ytd-guide-entry-renderer:hover svg {
- color: var(--main-color) !important;
- fill: var(--main-color) !important;
- }
-
- ytd-guide-entry-renderer[active] {
- background-color: var(--hover-background) !important;
- }
-
- #sections.ytd-guide-renderer > .ytd-guide-renderer:not(:last-child),
- #guide-links-primary.ytd-guide-renderer,
- #guide-content.ytd-app {
- border-color: var(--hover-background) !important;
- }
-
- #guide-links-primary.ytd-guide-renderer > a,
- #guide-links-secondary.ytd-guide-renderer > a,
- #footer.ytd-guide-renderer > #copyright,
- yt-formatted-string.ytd-guide-signin-promo-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #guide-links-primary.ytd-guide-renderer > a:hover,
- #guide-links-secondary.ytd-guide-renderer > a:hover {
- color: var(--main-color) !important;
- }
-
- /*Compact sidebar fix*/
- ytd-mini-guide-renderer,
- a.ytd-mini-guide-entry-renderer,
- a.ytd-mini-guide-entry-renderer:hover,
- a.ytd-mini-guide-entry-renderer:focus {
- background-color: var(--second-background) !important;
- }
-
- ytd-mini-guide-entry-renderer .guide-icon.ytd-mini-guide-entry-renderer,
- a.ytd-mini-guide-entry-renderer .guide-icon,
- a.ytd-mini-guide-entry-renderer.title.ytd-mini-guide-entry-renderer,
- ytd-mini-guide-entry-renderer .title.ytd-mini-guide-entry-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-mini-guide-entry-renderer[active] .guide-icon.ytd-mini-guide-entry-renderer,
- a.ytd-mini-guide-entry-renderer:hover .guide-icon,
- a.ytd-mini-guide-entry-renderer:hover .title.ytd-mini-guide-entry-renderer,
- ytd-mini-guide-entry-renderer[active] .title.ytd-mini-guide-entry-renderer {
- color: var(--main-color) !important;
- }
-
- #newness-dot.ytd-guide-entry-renderer {
- background-color: var(--main-color) !important;
- }
-
- /*Latest YouTube posts*/
- ytd-post-renderer[surface_="backstage-surface-type-home"],
- ytd-post-renderer[uses-compact-lockup] {
- background-color: var(--second-background) !important;
- }
-
- ytd-post-renderer[surface_="backstage-surface-type-home"] #home-content-text.ytd-post-renderer,
- ytd-post-renderer[surface_="backstage-surface-type-home"][attachment="poll"] #vote-count-text.ytd-post-renderer,
- ytd-post-renderer[uses-compact-lockup] #home-content-text.ytd-post-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-post-renderer[surface_="backstage-surface-type-home"] #author-text.yt-simple-endpoint.ytd-post-renderer {
- color: var(--main-color) !important;
- }
-
- ytd-post-renderer[uses-compact-lockup][attachment="poll"] #vote-count-text.ytd-post-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*vote now button*/
- ytd-post-renderer[uses-compact-lockup] ytd-button-renderer.style-suggestive[is-paper-button] #button.ytd-button-renderer {
- background-color: var(--main-color) !important;
- }
-
- /*Main page video hover preview*/
- #video-preview-container.ytd-video-preview {
- background: var(--second-background) !important;
- }
-
- /*Feed filter*/
- #home-chips/*skeleton*/
- ,
- #chips-wrapper.ytd-feed-filter-chip-bar-renderer {
- background-color: var(--main-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- yt-chip-cloud-chip-renderer:not([selected]) {
- background-color: var(--main-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- yt-chip-cloud-chip-renderer[selected],
- yt-chip-cloud-chip-renderer:hover {
- background-color: var(--hover-background) !important;
- }
-
- yt-chip-cloud-renderer {
- background: transparent !important;
- }
-
- #text.yt-chip-cloud-chip-renderer {
- color: var(--main-text) !important;
- }
-
- #scroll-container.ytd-feed-filter-chip-bar-renderer::after,
- #scroll-container.ytd-feed-filter-chip-bar-renderer::before {
- background: transparent !important;
- }
-
- #left-arrow-button.ytd-feed-filter-chip-bar-renderer,
- #right-arrow-button.ytd-feed-filter-chip-bar-renderer,
- #left-arrow.yt-chip-cloud-renderer,
- #right-arrow.yt-chip-cloud-renderer,
- #left-arrow-button.yt-chip-cloud-renderer,
- #right-arrow-button.yt-chip-cloud-renderer {
- background: var(--main-background) !important;
- }
-
- #left-arrow.ytd-feed-filter-chip-bar-renderer::after,
- #right-arrow.ytd-feed-filter-chip-bar-renderer::before,
- yt-chip-cloud-renderer #right-arrow.yt-chip-cloud-renderer::before,
- yt-chip-cloud-renderer #left-arrow.yt-chip-cloud-renderer::after {
- display: none;
- }
-
- /*new to you filter on video*/
- #content-wrapper.ytd-feed-nudge-renderer {
- background-color: var(--second-background) !important;
- }
-
- yt-chip-cloud-chip-renderer[chip-style="STYLE_REFRESH_TO_NOVEL_CHIP"][selected] {
- background-image: none !important;
- }
-
- /*Covid19 big posts aka rich shelves*/
- /*also other borders*/
- ytd-rich-shelf-renderer,
- #show-more-button.ytd-rich-shelf-renderer,
- ytd-rich-shelf-renderer[is-show-more-hidden] #dismissible.ytd-rich-shelf-renderer,
- #contents.ytd-rich-shelf-renderer,
- ytd-compact-promoted-item-renderer[view-style="COMPACT_PROMOTED_ITEM_STYLE_RICH_GRID"] #dismissible.ytd-compact-promoted-item-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /* poll results */
- .text-area.ytd-backstage-poll-renderer,
- paper-item.ytd-backstage-poll-renderer[selected] .progress-bar.ytd-backstage-poll-renderer,
- .progress-bar.ytd-backstage-poll-renderer {
- background-color: var(--main-color) !important;
- }
-
- ytd-backstage-poll-renderer:not([is-image-poll]) tp-yt-paper-item.ytd-backstage-poll-renderer .choice-info.ytd-backstage-poll-renderer {
- border-color: transparent !important;
- }
-
- #title.ytd-grid-channel-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Channel page*/
- /*header*/
- #channel-header.ytd-c4-tabbed-header-renderer,
- #tabs-inner-container.ytd-c4-tabbed-header-renderer {
- background: var(--hover-background) !important;
- }
-
- #channel-title.ytd-c4-tabbed-header-renderer {
- color: var(--main-text) !important;
- }
-
- #subscriber-count.ytd-c4-tabbed-header-renderer {
- color: var(--dimmer-text) !important;
- }
-
- .tab-content.paper-tab,
- .tab-content.tp-yt-paper-tab {
- color: var(--main-text) !important;
- }
-
- paper-tab:hover .tab-content.paper-tab,
- tp-yt-paper-tab:hover > .tab-content.tp-yt-paper-tab {
- color: var(--main-color) !important;
- }
-
- tp-yt-paper-tabs {
- --paper-tabs-selection-bar-color: var(--main-color) !important;
- }
-
- /*search*/
- .input-content.paper-input-container label,
- .input-content.paper-input-container .paper-input-label,
- #subtitle,
- .style-scope.tp-yt-paper-input {
- color: var(--dimmer-text) !important;
- }
-
- /*arrow button*/
- iron-icon {
- fill: var(--main-text) !important;
- }
-
- iron-icon:hover {
- fill: var(--main-color) !important;
- }
-
- /*side channels*/
- #title:not([class*="ytd-labs"]):not([class*="upsell-offer"]) {
- color: var(--main-text) !important;
- }
-
- .title {
- color: var(--main-text) !important;
- }
-
- .title:hover {
- color: var(--main-color) !important;
- }
-
- #contents > .ytd-browse-secondary-contents-renderer:not(:first-child) {
- border-color: var(--hover-background) !important;
- }
-
- /*videos - uploads*/
- #label-text.yt-dropdown-menu {
- color: var(--main-text) !important;
- }
-
- paper-menu-button.yt-dropdown-menu:hover #label-text.yt-dropdown-menu,
- paper-menu-button.yt-dropdown-menu:hover #label-icon.yt-dropdown-menu svg,
- paper-menu-button.yt-dropdown-menu:hover #icon-label.yt-dropdown-menu {
- color: var(--main-color) !important;
- fill: var(--main-color) !important;
- }
-
- /*community*/
- #message.ytd-message-renderer,
- #content-text.ytd-backstage-post-renderer,
- #repost-content-text.ytd-shared-post-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #author-text,
- .more-button,
- .less-button,
- .align-by-text.ytd-backstage-comments-renderer,
- #toggle.ytd-grid-renderer,
- #repost-author-text.yt-simple-endpoint.ytd-shared-post-renderer {
- color: var(--main-text) !important;
- }
-
- .more-button:hover,
- .less-button:hover,
- .align-by-text.ytd-backstage-comments-renderer:hover,
- #toggle.ytd-grid-renderer:hover,
- #author-text.yt-simple-endpoint.ytd-backstage-post-renderer:hover,
- #repost-author-text.yt-simple-endpoint.ytd-shared-post-renderer:hover {
- color: var(--main-color) !important;
- }
-
- #content-attachment ytd-video-renderer {
- background: var(--hover-background) !important;
- }
-
- #poll-votes.ytd-backstage-poll-renderer {
- background: transparent !important;
- }
-
- .vote-percentage.ytd-backstage-poll-renderer,
- .choice-text.ytd-backstage-poll-renderer,
- #poll-choice-text.ytd-commentbox,
- yt-icon.ytd-backstage-poll-renderer {
- color: var(--main-text) !important;
- }
-
- paper-item[selected].ytd-backstage-poll-renderer #progress-bar.ytd-backstage-poll-renderer {
- background: var(--main-color) !important;
- }
-
- /*about*/
- .subheadline,
- #right-column .subheadline {
- color: var(--main-text) !important;
- }
-
- #description:not([class*="yt-music"]),
- #bio,
- #right-column > yt-formatted-string {
- color: var(--dimmer-text) !important;
- }
-
- #right-column > yt-formatted-string,
- #description-container.ytd-channel-about-metadata-renderer,
- #bio-container.ytd-channel-about-metadata-renderer,
- #photos-container.ytd-channel-about-metadata-renderer,
- #details-container.ytd-channel-about-metadata-renderer,
- #links-container.ytd-channel-about-metadata-renderer {
- border-color: var(--hover-background) !important;
- }
-
- #link-list-container a {
- color: var(--main-color) !important;
- }
-
- #link-list-container:hover a {
- filter: brightness(110%);
- }
-
- /*private message*/
- ytd-form-popup-renderer[dialog][dialog][dialog] {
- background: var(--main-background) !important;
- }
-
- #buttons.ytd-form-popup-renderer {
- border-color: var(--hover-background) !important;
- }
-
- ytd-toggle-menu-service-item-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-toggle-menu-service-item-renderer:hover .style-scope.ytd-toggle-menu-service-item-renderer {
- color: var(--main-color) !important;
- }
-
- ytd-toggle-menu-service-item-renderer:hover {
- background: var(--hover-background) !important;
- }
-
- /*Video page*/
- /*title*/
- .title.ytd-video-primary-info-renderer yt-formatted-string.ytd-video-primary-info-renderer {
- color: var(--main-text) !important;
- }
-
- /*views*/
- span.yt-view-count-renderer,
- span.ytd-video-view-count-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*published date*/
- #date.ytd-video-primary-info-renderer {
- color: var(--dimmer-text) !important;
- }
-
- ytd-video-primary-info-renderer {
- border-color: var(--hover-background) !important;
- }
-
- .content-text.ytd-metadata-with-image-row-renderer {
- color: var(--main-text) !important;
- }
-
- /*Share*/
- paper-dialog,
- tp-yt-paper-dialog {
- background: var(--main-background) !important;
- }
-
- #share-url {
- color: var(--main-text) !important;
- }
-
- #copy-button:hover #text {
- color: var(--main-color) !important;
- }
-
- #bar.yt-copy-link-renderer {
- background-color: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- ytd-third-party-network-section-renderer ytd-copy-link-renderer.ytd-third-party-network-section-renderer,
- yt-start-at-renderer.yt-third-party-network-section-renderer {
- border-color: var(--hover-background) !important;
- }
-
- yt-formatted-string.yt-start-at-renderer,
- #text.ytd-sender-id-section-renderer {
- color: var(--main-text) !important;
- }
-
- /*share embed*/
- #embed-panel.yt-sharing-embed-renderer {
- background: var(--second-background) !important;
- }
-
- #close-panel-icon.yt-sharing-embed-renderer {
- color: var(--main-text) !important;
- }
-
- #close-panel-icon.yt-sharing-embed-renderer:hover {
- color: var(--main-color) !important;
- }
-
- #title-bar.yt-sharing-embed-renderer,
- #additional-info.yt-sharing-embed-renderer,
- #action-buttons.yt-sharing-embed-renderer {
- border-color: var(--hover-background) !important;
- }
-
- #privacy-mode-info.yt-sharing-embed-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*search for people*/
- #to-field-header.ytd-contact-search-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #name.ytd-suggested-contact-renderer {
- color: var(--main-text) !important;
- }
-
- /*Make a clip*/
- #container.yt-clip-creation-renderer {
- background-color: transparent !important;
- }
-
- input.yt-clip-creation-scrubber-renderer/*time*/
- {
- border-color: var(--dimmer-text) !important;
- }
-
- #handles.yt-clip-creation-scrubber-view/*preview*/
- {
- border-color: var(--main-color) !important;
- }
-
- .handle.yt-clip-creation-scrubber-view/*preview*/
- {
- background-color: var(--main-color) !important;
- }
-
- /*buttons*/
- #footer.yt-clip-creation-renderer {
- background-color: var(--second-background) !important;
- }
-
- yt-clip-section-renderer yt-button-renderer.style-primary[is-paper-button],
- yt-clip-creation-renderer yt-button-renderer.style-primary[is-paper-button],
- yt-clip-section-footer-renderer yt-button-renderer.style-primary[is-paper-button] {
- background-color: transparent !important;
- }
-
- yt-button-renderer.style-primary[disabled][is-paper-button] yt-formatted-string.yt-button-renderer {
- color: var(--dimmer-text) !important;
- }
-
- yt-button-renderer.yt-clip-creation-renderer .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled,
- ytd-button-renderer.ytd-clip-section-footer-renderer .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
- background-color: var(--main-color) !important;
- }
-
- /*Join this channel panel > Join button,
- Settings > Advanced settings > Copy button*/
- yt-button-renderer.ytd-sponsorships-tier-renderer .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled,
- yt-button-renderer.yt-copy-link-renderer .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
- background-color: var(--main-color) !important;
- }
-
- /*Playlist creation*/
- #subtext.yt-live-chat-message-renderer,
- #label.yt-live-chat-text-input-field-renderer,
- .input-content.paper-input-container input,
- .input-content.paper-input-container textarea,
- .input-content.paper-input-container iron-autogrow-textarea,
- .input-content.paper-input-container .paper-input-input {
- color: var(--dimmer-text) !important;
- }
-
- .add-on-content.is-highlighted.paper-input-container *,
- paper-input-char-counter {
- color: var(--dimmer-text) !important;
- }
-
- /*Video cards*/
- /*ttile*/
- ytd-grid-video-renderer.use-ellipsis #details.ytd-grid-video-renderer a.ytd-grid-video-renderer,
- ytd-compact-video-renderer.use-ellipsis #video-title.ytd-compact-video-renderer,
- #video-title.ytd-video-renderer,
- h3.ytd-playlist-renderer,
- #video-title.ytd-child-video-renderer,
- #length.ytd-child-video-renderer,
- #video-title,
- #unplayableText,
- #length,
- #details {
- color: var(--main-text) !important;
- }
-
- #items.yt-horizontal-list-renderer > .yt-horizontal-list-renderer:hover a.ytd-grid-video-renderer,
- ytd-compact-video-renderer:hover #video-title.ytd-compact-video-renderer,
- ytd-video-renderer:hover #video-title.ytd-video-renderer,
- ytd-playlist-renderer:hover h3.ytd-playlist-renderer,
- #content.ytd-playlist-video-renderer:hover #video-title,
- a.yt-simple-endpoint.ytd-playlist-panel-video-renderer:hover #video-title,
- a.yt-simple-endpoint.ytd-playlist-panel-video-renderer:hover #unplayableText,
- .style-scope.ytd-grid-renderer.use-ellipsis:hover #video-title,
- #video-title:hover,
- ytd-grid-video-renderer:hover #video-title.yt-simple-endpoint.ytd-grid-video-renderer {
- color: var(--main-color) !important;
- }
-
- /*author*/
- yt-formatted-string[ellipsis-truncate] a.yt-formatted-string:last-child,
- #byline.ytd-video-meta-block,
- #channel-title.ytd-channel-renderer span.ytd-channel-renderer,
- #text.ytd-channel-name {
- color: var(--main-color) !important;
- }
-
- /*metadata*/
- #metadata-line.ytd-grid-video-renderer,
- #metadata-line.ytd-video-meta-block span.ytd-video-meta-block,
- #metadata.ytd-channel-renderer,
- #description.ytd-channel-renderer,
- #thumbnail-attribution.ytd-grid-channel-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*2022 Nov like button*/
- /*not liked yet*/
- yt-animated-icon[animated-icon-type="LIKE"] > ytd-lottie-player > lottie-component > svg > g:nth-child(2) > g:nth-child(2) > g:nth-child(2) > path:nth-child(1),
- yt-animated-icon[animated-icon-type="LIKE"] > ytd-lottie-player > lottie-component > svg > g:nth-child(2) > g:nth-child(2) > g:nth-child(4) > path:nth-child(1) {
- stroke: var(--main-text) !important;
- }
-
- /*liked*/
- yt-animated-icon[animated-icon-type="LIKE"] > ytd-lottie-player > lottie-component > svg > g:nth-child(2) > g:nth-child(2) > g:nth-child(1) > path:nth-child(1),
- yt-animated-icon[animated-icon-type="LIKE"] > ytd-lottie-player > lottie-component > svg > g:nth-child(2) > g:nth-child(2) > g:nth-child(3) > path:nth-child(1) {
- fill: var(--main-color) !important;
- }
-
- yt-animated-icon[animated-icon-type="LIKE"] > ytd-lottie-player > lottie-component > svg > g:nth-child(2) > g:nth-child(2) > g:nth-child(1) > path:nth-child(2),
- yt-animated-icon[animated-icon-type="LIKE"] > ytd-lottie-player > lottie-component > svg > g:nth-child(2) > g:nth-child(2) > g:nth-child(3) > path:nth-child(2) {
- stroke: var(--main-color) !important
- }
-
- /*on shorts - so here is filled by default, thus above I am using main-color instead to keep it consistent*/
- .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled > div > yt-icon > svg > g > path {
- fill: var(--main-color) !important;
- }
-
- /*description and other metadata*/
- ytd-watch-metadata[modern-metapanel] #description.ytd-watch-metadata {
- background: var(--second-background) !important;
- /*--yt-spec-button-chip-background-hover*/
- }
-
- ytd-watch-metadata[clickable-description][description-collapsed] #description.ytd-watch-metadata:hover {
- background: var(--hover-background) !important;
- /*--yt-spec-badge-chip-background*/
- }
-
- ytd-watch-metadata[modern-metapanel] #description.ytd-watch-metadata .yt-simple-endpoint.style-scope.yt-formatted-string {
- color: var(--main-color) !important;
- }
-
- /*show more / less*/
- #expand.ytd-text-inline-expander:hover,
- #collapse.ytd-text-inline-expander:hover {
- color: var(--main-color) !important;
- }
-
- /*Recommandation page*/
- /*author*/
- #title.ytd-shelf-renderer {
- color: var(--main-color) !important;
- }
-
- #title-annotation.ytd-shelf-renderer {
- color: var(--dimmer-text) !important;
- }
-
- a.yt-simple-endpoint.yt-formatted-string:only-of-type:hover {
- color: var(--main-color) !important;
- }
-
- a.yt-simple-endpoint.yt-formatted-string:only-of-type {
- color: var(--main-text) !important;
- }
-
- /*Borders*/
- #contents.ytd-section-list-renderer > .ytd-section-list-renderer:not(:last-child):not(ytd-page-introduction-renderer) {
- border-color: var(--hover-background) !important;
- }
-
- /*Next and prev buttons*/
- .arrow.yt-horizontal-list-renderer,
- #scroll-button-forward,
- .arrow.ytd-horizontal-card-list-renderer,
- .ytd-horizontal-card-list-renderer[arrow],
- .scroll-button.yt-third-party-share-target-section-renderer/*share link*/
- {
- background-color: var(--hover-background) !important;
- }
-
- /*For the outline around the channel name*/
- .style-scope.ytd-comment-renderer.creator {
- background-color: var(--main-color) !important;
- }
-
- .style-scope.ytd-comment-renderer.creator:hover {
- background-color: var(--hover-background) !important;
- }
-
- #name.ytd-author-comment-badge-renderer {
- color: var(--main-text) !important;
- }
-
- #name:hover {
- color: var(--main-color) !important;
- }
-
- /*Accounts*/
- yt-formatted-string.ytd-account-item-section-header-renderer a {
- color: var(--dimmer-text) !important;
- }
-
- .style-scope.ytd-account-item-section-renderer:hover #channel-title.ytd-account-item-renderer {
- color: var(--main-color) !important;
- }
-
- app-drawer.ytd-app:not([persistent]) #header.ytd-app {
- border-color: var(--main-color) !important;
- }
-
- /*How is youtube today*/
- ytd-single-option-survey-renderer[dialog][dialog][dialog],
- ytd-single-option-survey-renderer,
- ytd-survey-follow-up-renderer[dialog][dialog][dialog],
- ytd-survey-follow-up-renderer,
- ytd-checkbox-survey-renderer[dialog][dialog][dialog]/*TODO: forgot to test if the [dialog] is even needed*/
- {
- background-color: var(--hover-background) !important;
- box-shadow: var(--shadow) !important;
- }
-
- #header.ytd-single-option-survey-renderer,
- #header.ytd-survey-follow-up-renderer,
- #header.ytd-checkbox-survey-renderer {
- color: var(--main-color) !important;
- }
-
- ytd-single-option-survey-option-renderer,
- #checkboxLabel.paper-checkbox {
- color: var(--main-text) !important;
- }
-
- ytd-single-option-survey-option-renderer:hover {
- background-color: var(--hover-background) !important;
- }
-
- /*rate a video to improve youtube*/
- #star-survey.ytd-inline-survey-renderer {
- background-color: var(--second-background) !important;
- }
-
- #inline-survey-compact-video-renderer.ytd-inline-survey-renderer {
- background-color: var(--hover-background) !important;
- }
-
- ytd-primetime-promo-renderer.ytd-rich-section-renderer,
- ytd-inline-survey-renderer.ytd-rich-section-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*not sure tell us why followup*/
- #title.ytd-inline-survey-renderer,
- #follow-up-title.ytd-inline-survey-renderer,
- #selected-response-text.ytd-rating-survey-renderer {
- color: var(--main-color) !important;
- }
-
- /*background and close button*/
- ytd-inline-survey-renderer[expanded] #dismissable.ytd-inline-survey-renderer,
- #dismiss-button.ytd-inline-survey-renderer {
- background-color: var(--second-background) !important;
- }
-
- paper-checkbox.ytd-checkbox-survey-option-renderer {
- background-color: var(--hover-background) !important;
- }
-
- /*thanks*/
- #dismissed.ytd-inline-survey-renderer ytd-message-renderer.ytd-inline-survey-renderer {
- background-color: var(--hover-background) !important;
- }
-
- /*info warning - covid19*/
- ytd-clarification-renderer {
- background-color: var(--hover-background) !important;
- }
-
- ytd-clarification-renderer[has-action-button] .content.ytd-clarification-renderer,
- ytd-clarification-renderer[background-style="info"] {
- border-color: var(--hover-background) !important;
- }
-
- .content-title.ytd-clarification-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-clarification-renderer[clarify-style="medium"] .description.ytd-clarification-renderer {
- color: var(--dimmer-text) !important;
- }
-
- .source.ytd-clarification-renderer {
- color: var(--main-color) !important;
- }
-
- ytd-clarification-renderer yt-button-renderer.style-suggestive[is-paper-button] paper-button.yt-button-renderer {
- border-color: var(--main-color) !important;
- }
-
- /*Change subtitles settings tooltip*/
- .ytp-promotooltip-container {
- background-color: var(--hover-background) !important;
- box-shadow: var(--shadow) !important;
- color: var(--main-text) !important;
- }
-
- .ytp-promotooltip-pointer {
- border-color: var(--hover-background) !important;
- }
-
- /*You are not logged in tooltip*/
- #tooltip.tp-yt-paper-tooltip,
- yt-tooltip-renderer {
- background-color: var(--hover-background) !important;
- box-shadow: var(--shadow) !important;
- color: var(--main-text) !important;
- }
-
- yt-tooltip-renderer::before {
- border-color: transparent transparent var(--hover-background) transparent !important;
- }
-
- /*Join button tooltip*/
- yt-bubble-hint-renderer[style_="BUBBLE_HINT_STYLE_BLUE_TOOLTIP"] {
- background-color: var(--second-background) !important;
- box-shadow: var(--shadow) !important;
- }
-
- yt-bubble-hint-renderer[style_="BUBBLE_HINT_STYLE_BLUE_TOOLTIP"] #text.yt-bubble-hint-renderer:not(:empty),
- yt-bubble-hint-renderer[style_="BUBBLE_HINT_STYLE_BLUE_TOOLTIP"] #details-text.yt-bubble-hint-renderer {
- background-color: var(--second-background) !important;
- }
-
- yt-bubble-hint-renderer[position-type="OPEN_POPUP_POSITION_LEFT"][style_="BUBBLE_HINT_STYLE_BLUE_TOOLTIP"]::before {
- border-color: transparent transparent transparent var(--second-background) !important;
- }
-
- /*window*/
- ytd-sponsorships-offer-renderer[dialog][dialog][dialog] {
- background-color: var(--main-background) !important;
- }
-
- #background-image-layer.ytd-sponsorships-offer-renderer {
- background-image: unset !important;
- background-color: var(--hover-background) !important;
- }
-
- /*title*/
- #top-bar.ytd-sponsorships-offer-renderer {
- color: var(--main-text) !important;
- }
-
- /*price*/
- #above-purchase-button-text.ytd-sponsorships-tier-renderer {
- color: var(--main-color) !important;
- }
-
- /*fine print*/
- .disclaimer.ytd-sponsorships-tier-renderer {
- color: var(--main-text) !important;
- }
-
- /*Super Thanks donations*/
- ytd-pdg-buy-flow-renderer {
- background-color: var(--main-background) !important;
- }
-
- /*remove white image in the header*/
- yt-pdg-buy-flow-header-renderer {
- background: transparent !important;
- }
-
- #container.ytd-pdg-comment-preview-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*bonus*/
- #title-background.ytd-pdg-comment-preview-renderer {
- background-color: var(--hover-background) !important;
- }
-
- /*Progress bar*/
- #progress {
- background-color: var(--main-color) !important;
- border-color: var(--main-color) !important;
- }
-
- yt-page-navigation-progress {
- background-color: transparent !important;
- }
-
- /*Button tooltips*/
- #tooltip.paper-tooltip {
- background-color: var(--hover-background) !important;
- color: var(--main-color) !important;
- }
-
- /*Active grid icon*/
- button.ytd-button-renderer[is="paper-icon-button-light"][disabled] {
- color: rgb(255, 255, 255) !important;
- }
-
- /*2022 Nov changes*/
- /*subscribe button*/
- .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled,
- .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
- tp-yt-paper-button.ytd-subscribe-button-renderer {
- color: var(--second-background) !important;
- }
-
- tp-yt-paper-button.ytd-subscribe-button-renderer[subscribed] {
- background-color: var(--main-color);
- }
-
- /*NOTE: this affects other material buttons - I would say desired effect*/
- .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled,
- .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled:hover,
- /*on shorts*/
- .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal,
- .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal:hover,
- /*on shorts*/
- .ytp-sb-subscribe,
- a.ytp-sb-subscribe/*in cards... why yt why*/
- {
- background-color: var(--second-background) !important;
- border-color: var(--second-background) !important;
- box-shadow: var(--shadow) !important;
- color: var(--main-text) !important;
- }
-
- /*unsubscribe confirm dialog*/
- .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text {
- color: var(--main-color) !important;
- }
-
- .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text:hover {
- background-color: var(--yt-spec-10-percent-layer) !important;
- }
-
- /*join button*/
- .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal[aria-label="Join this channel"],
- .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled/*in window*/
- {
- background-color: var(--second-background) !important;
- border-color: var(--second-background) !important;
- }
-
- /*comment button*/
- ytd-button-renderer#submit-button.ytd-commentbox .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
- background-color: var(--main-color) !important;
- color: var(--main-text) !important;
- }
-
- /*download panel > get trial button*/
- /*share panel > copy button*/
- ytd-offline-promo-renderer.ytd-popup-container yt-button-renderer#action-button .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled,
- yt-third-party-network-section-renderer.ytd-unified-share-panel-renderer yt-button-renderer#copy-button .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
- background-color: var(--main-color) !important;
- color: var(--main-text) !important;
- }
-
- /*Toast notification*/
- yt-notification-action-renderer yt-button-renderer.yt-notification-action-renderer .yt-spec-button-shape-next--call-to-action-inverse.yt-spec-button-shape-next--text {
- color: var(--main-color) !important;
- }
-
- /*Toast notification hover*/
- yt-notification-action-renderer yt-button-renderer.yt-notification-action-renderer .yt-spec-button-shape-next--call-to-action-inverse.yt-spec-button-shape-next--text:hover {
- background-color: var(--main-background) !important;
- }
-
- if join-color/*overwriting the above*/
- {
- .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal[aria-label="Join this channel"] {
- background-color: var(--main-color) !important;
- border-color: var(--main-color) !important;
- }
- }
-
- if subscribe-color/*overwriting the above*/
- {
- .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled,
- .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled,
- .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled:hover,
- /*on shorts*/
- .ytp-sb-subscribe,
- a.ytp-sb-subscribe/*in cards*/
- {
- background-color: var(--main-color) !important;
- border-color: var(--main-color) !important;
- }
- }
-
- ytd-button-renderer.style-primary[is-paper-button] {
- background-color: transparent !important;
- }
-
- /*Sponsor button*/
- ytd-modal-with-title-and-button-renderer {
- background: var(--second-background) !important;
- }
-
- #content.ytd-modal-with-title-and-button-renderer {
- color: var(--dimmer-text) !important;
- }
-
- .buttons.ytd-modal-with-title-and-button-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*sponsor popup*/
- #sponsor-button.ytd-membership-offer-renderer ytd-button-renderer.ytd-membership-offer-renderer {
- background-color: var(--main-color) !important;
- }
-
- #sponsor-button.ytd-membership-offer-renderer ytd-button-renderer.ytd-membership-offer-renderer:hover {
- filter: brightness(110%) !important;
- }
-
- #header.ytd-membership-offer-renderer {
- background: var(--main-background) !important;
- }
-
- ytd-perks-section-renderer,
- ytd-membership-offer-renderer[dialog][dialog][dialog],
- paper-dialog-scrollable.can-scroll:not(.scrolled-to-bottom):not(:last-child)::after,
- paper-dialog-scrollable.is-scrolled:not(:first-child)::before {
- background: var(--second-background) !important;
- }
-
- .extra-content.ytd-offer-perk-extra {
- border-color: var(--hover-background) !important;
- background: var(--hover-background) !important;
- color: var(--dimmer-text) !important;
- }
-
- .footer.ytd-membership-offer-renderer {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- ytd-membership-offer-renderer * {
- border-color: var(--hover-background) !important;
- }
-
- .price.ytd-membership-offer-renderer {
- color: var(--main-color) !important;
- }
-
- .style-title.ytd-offer-text-item,
- .style-subtitle.ytd-offer-text-item,
- .payment-clause.ytd-membership-offer-renderer {
- color: var(--main-text) !important;
- }
-
- .perk-item-title.ytd-perk-item-renderer,
- .perk-item-public-description.ytd-perk-item-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Edit button in channel page*/
- #edit-buttons.ytd-c4-tabbed-header-renderer ytd-button-renderer.ytd-c4-tabbed-header-renderer {
- background-color: transparent !important;
- }
-
- /*Toggle button to play next*/
- paper-toggle-button[checked]:not([disabled]) .toggle-bar.paper-toggle-button {
- background-color: var(--main-color) !important;
- opacity: 0.9 !important;
- }
-
- paper-toggle-button[checked]:not([disabled]) .toggle-button.paper-toggle-button {
- --paper-toggle-button-checked-button-color: rgb(255, 255, 255) !important;
- }
-
- /*Hover for toggle button*/
- .toggle-button.paper-toggle-button:hover,
- paper-toggle-button[checked]:not([disabled]) .toggle-button.paper-toggle-button:hover {
- background-color: var(--main-color) !important;
- }
-
- yt-bubble-hint-renderer {
- background: var(--hover-background) !important;
- }
-
- yt-bubble-hint-renderer::after {
- border-top-color: var(--second-background) !important;
- }
-
- #text.yt-bubble-hint-renderer {
- background: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- #details-text.yt-bubble-hint-renderer {
- background: var(--hover-background) !important;
- color: var(--dimmer-text) !important;
- }
-
- .buttons.yt-bubble-hint-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*Filter active*/
- paper-button.ytd-toggle-button-renderer {
- color: rgba(255, 255, 255, 0.5) !important;
- }
-
- /*Badges*/
- .badge-style-type-simple.ytd-badge-supported-renderer,
- .badge-style-type-disabled.ytd-badge-supported-renderer,
- yt-icon.ytd-badge-supported-renderer {
- background: transparent !important;
- color: var(--main-color) !important;
- padding-left: 0px !important;
- opacity: .7 !important;
- }
-
- .badge-style-type-simple-strikethrough.ytd-badge-supported-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Trending badge*/
- .badge-style-type-featured.ytd-badge-supported-renderer {
- background: var(--main-color) !important;
- }
-
- /*Author verified badge in comments*/
- ytd-author-comment-badge-renderer:not(.creator) #icon.ytd-author-comment-badge-renderer {
- fill: var(--main-color) !important;
- }
-
- /*Live now badge*/
- .badge-style-type-live-now.ytd-badge-supported-renderer,
- .badge-style-type-live-now-alternate.ytd-badge-supported-renderer {
- color: var(--main-color) !important;
- background: transparent !important;
- border-color: var(--main-color) !important;
- }
-
- /*Premium*/
- .badge-style-type-red.ytd-badge-supported-renderer {
- color: #DA4453 !important;
- background: transparent !important;
- border-color: var(--main-color) !important;
- }
-
- /*Series name*/
- .badge-style-type-collection.ytd-badge-supported-renderer {
- color: var(--main-color) !important;
- }
-
- .yt-simple-endpoint.style-scope.yt-formatted-string {
- color: var(--dimmer-text) !important;
- }
-
- /*video hashtags & links in settings page*/
- #super-title .yt-simple-endpoint.style-scope.yt-formatted-string,
- ytd-section-list-renderer[page-subtype="WEB_PAGE_TYPE_SETTINGS"] .yt-simple-endpoint.style-scope.yt-formatted-string {
- color: var(--main-color) !important;
- }
-
- /*panel links*/
- tp-yt-paper-dialog.ytd-popup-container .yt-simple-endpoint.style-scope.yt-formatted-string {
- color: var(--main-color) !important;
- }
-
- /*Dropdown*/
- .dropdown-content.style-scope.ytd-popup-container > *,
- tp-yt-paper-listbox,
- ytd-menu-popup-renderer {
- background: var(--second-background) !important;
- color: var(--main-text) !important;
- }
-
- ytd-menu-service-item-renderer:hover,
- a.ytd-menu-navigation-item-renderer:hover,
- tp-yt-paper-listbox.yt-dropdown-menu .iron-selected.yt-dropdown-menu,
- tp-yt-paper-listbox.yt-dropdown-menu tp-yt-paper-item.yt-dropdown-menu:hover,
- ytd-menu-service-item-renderer[is-selected] {
- background: var(--hover-background) !important;
- }
-
- yt-formatted-string.ytd-menu-service-item-renderer,
- yt-formatted-string.ytd-menu-navigation-item-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-menu-service-item-renderer:hover yt-formatted-string.ytd-menu-service-item-renderer,
- a.ytd-menu-navigation-item-renderer:hover yt-formatted-string.ytd-menu-navigation-item-renderer,
- tp-yt-paper-listbox a.yt-simple-endpoint.yt-dropdown-menu:hover .item.yt-dropdown-menu {
- color: var(--main-color) !important;
- }
-
- #owner-name.ytd-video-owner-renderer a {
- color: var(--main-color) !important;
- opacity: .9;
- }
-
- /*share*/
- #header.ytd-add-to-playlist-renderer {
- color: var(--main-text) !important;
- }
-
- #label.ytd-playlist-add-to-option-renderer,
- paper-item.ytd-compact-link-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #header.ytd-add-to-playlist-renderer,
- #playlists.ytd-add-to-playlist-renderer {
- border-color: var(--hover-background) !important;
- }
-
- paper-item.ytd-compact-link-renderer:hover #label.ytd-compact-link-renderer,
- paper-item.ytd-compact-link-renderer:hover yt-icon.ytd-compact-link-renderer {
- color: var(--main-color) !important;
- fill: var(--main-color) !important;
- }
-
- ytd-playlist-add-to-option-renderer paper-checkbox:hover #label.ytd-playlist-add-to-option-renderer,
- ytd-playlist-add-to-option-renderer paper-checkbox[checked] #label.ytd-playlist-add-to-option-renderer,
- yt-icon.ytd-playlist-add-to-option-renderer {
- color: var(--main-color) !important;
- }
-
- /*Avatars and thumbnails opacity */
- img.yt-img-shadow {
- opacity: 0.9 !important;
- }
-
- img.yt-img-shadow:hover {
- opacity: 1 !important;
- }
-
- /*Very specific hover for thumbnails*/
- #dismissable.ytd-compact-video-renderer:hover img.yt-img-shadow,
- #items.yt-horizontal-list-renderer > .yt-horizontal-list-renderer:hover img.yt-img-shadow,
- #items.ytd-grid-renderer > ytd-grid-video-renderer.ytd-grid-renderer:hover img.yt-img-shadow,
- ytd-video-renderer.ytd-item-section-renderer:hover img.yt-img-shadow,
- .style-scope.ytd-channel-featured-content-renderer:hover img.yt-img-shadow,
- #grid-container.ytd-expanded-shelf-contents-renderer > .ytd-expanded-shelf-contents-renderer:hover img.yt-img-shadow,
- ytd-playlist-video-renderer:hover img.yt-img-shadow,
- iron-list:not([grid]) #items.iron-list > *:hover img.yt-img-shadow {
- opacity: 1 !important;
- }
-
- /*Video section*/
- /*2022 Nov*/
- /*this seems to be only in dark mode? */
- #cinematics.ytd-watch-flexy {
- display: none !important;
- }
-
- /*Video title hover in html5 video*/
- .html5-video-player a:hover {
- color: var(--main-text) !important;
- text-shadow: none !important;
- }
-
- /* Code takken from https://userstyles.org/styles/95280 */
- /* scrubber button */
- .html5-scrubber-button:hover,
- .ytp-chrome-controls .ytp-button[aria-pressed]::after,
- .ytp-scrubber-button:hover,
- .html5-video-player:not(.ytp-color-party) .ytp-swatch-background-color,
- .ytp-swatch-background-color-secondary {
- background: var(--main-color) !important;
- }
-
- /* progress bar */
- .html5-video-player:not(.ytp-color-party) .html5-play-progress,
- .html5-video-player:not(.ytp-color-party) .ytp-play-progress {
- background: var(--main-color) !important;
- }
-
- .ytp-volume-slider-track,
- .ytp-volume-slider-handle:before {
- background: var(--main-color) !important;
- z-index: -117;
- }
-
- .ytp-settings-button.ytp-hd-quality-badge::after,
- .ytp-settings-button.ytp-4k-quality-badge::after,
- .ytp-settings-button.ytp-5k-quality-badge::after,
- .ytp-settings-button.ytp-8k-quality-badge::after,
- .ytp-settings-button.ytp-3d-badge::after {
- background-color: var(--main-color) !important;
- }
-
- .ytp-swatch-color {
- color: var(--main-color) !important;
- }
-
- .ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox {
- background-color: var(--main-color) !important;
- }
-
- .ytp-chrome-controls .ytp-button.ytp-youtube-button:hover:not([aria-disabled="true"]):not([disabled]) .ytp-svg-fill-logo-tube-lozenge {
- fill: var(--main-color) !important;
- }
-
- .ytp-cued-thumbnail-overlay:hover .ytp-large-play-button-bg,
- .ytp-large-play-button.ytp-touch-device .ytp-large-play-button-bg {
- fill: var(--main-color) !important;
- }
-
- .ytp-large-play-button.ytp-button.ytp-red2:hover,
- .ytp-cued-thumbnail-overlay:hover .ytp-large-play-button.ytp-button.ytp-red2 {
- /*background-image: url(https://github.com/RaitaroH/YouTube-DeepDark/raw/master/YT_Images/large_play_button_hover_ringo-vfl7vEehF.png) !important;*/
- background-image: url(https://s.ytimg.com/yts/img/large_play_button_ringo-vfljWXIdx.png) !important;
- filter: invert(100%) brightness(300%);
- }
-
- .resume-playback-progress-bar {
- background: var(--main-color) !important;
- }
-
- /*Added because of this: https://forum.userstyles.org/discussion/53368/solved-fix-this-annoying-youtube-tab-select-bug-thats-been-there-forever#latest*/
- .ytp-keyboard-focus .ytp-progress-bar:focus {
- box-shadow: none !important;
- }
-
- /*Video menu - might have issues with lighter colors*/
- .ytp-popup {
- background: var(--second-background) !important;
- opacity: .9 !important;
- }
-
- .ytp-menuitem:hover:not([aria-disabled="true"]) {
- background-color: var(--hover-background) !important;
- }
-
- /*Text*/
- .iv-branding .iv-branding-context-name,
- .ytp-menuitem-label,
- .ytp-menuitem-label-count,
- .ytp-menuitem-content,
- .ytp-menu-label-secondary,
- .ytp-panel-header {
- color: var(--main-text) !important;
- text-shadow: none !important;
- }
-
- /*Keyboard focus*/
- .ytp-probably-keyboard-focus .ytp-menuitem:focus .ytp-menuitem-content,
- .ytp-probably-keyboard-focus .ytp-menuitem:focus .ytp-menuitem-label {
- box-shadow: inset -2px -2px 0 var(--main-color), inset 0 2px 0 var(--main-color) !important;
- }
-
- .ytp-probably-keyboard-focus .ytp-button:focus {
- box-shadow: inset 0 0 0 2px var(--main-color) !important;
- }
-
- .ytp-probably-keyboard-focus .ytp-progress-bar:focus {
- box-shadow: 0 0 0 2px var(--main-color) !important;
- }
-
- /*Miniplayer*/
- #info-bar.ytd-miniplayer .metadata.ytd-miniplayer,
- #info-bar.ytd-miniplayer {
- background-color: var(--main-background) !important;
- }
-
- #info-bar.ytd-miniplayer .channel.ytd-miniplayer {
- color: var(--main-color) !important;
- }
-
- .ytd-miniplayer .ytp-button:not([aria-disabled="true"]):not([disabled]):not([aria-hidden="true"]):hover svg path {
- fill: var(--main-color) !important;
- }
-
- /*added to queue*/
- ytd-miniplayer-toast[opened] {
- background-color: var(--second-background) !important;
- }
-
- #label.ytd-miniplayer-toast {
- color: var(--main-color) !important;
- }
-
- /*queue / playlist panel closed*/
- ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .title.ytd-playlist-panel-renderer,
- ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] #next-video-title.ytd-playlist-panel-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .byline-title.ytd-playlist-panel-renderer,
- ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .publisher.ytd-playlist-panel-renderer,
- ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .publisher.ytd-playlist-panel-renderer:not([is-empty]).ytd-playlist-panel-renderer + .index-message-wrapper.ytd-playlist-panel-renderer::before,
- ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .index-message-wrapper.ytd-playlist-panel-renderer {
- color: var(--main-color) !important;
- }
-
- /*Watch later svg*/
- .style-scope.ytd-thumbnail-overlay-toggle-button-renderer:hover {
- fill: var(--main-color) !important;
- }
-
- ytd-thumbnail-overlay-toggle-button-renderer:focus yt-icon.ytd-thumbnail-overlay-toggle-button-renderer {
- outline-color: var(--main-color) !important;
- }
-
- /*This channel is watched by others*/
- ytd-thumbnail-overlay-endorsement-renderer {
- background-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- /*Popup for when you hover over the channel avatar in the video*/
- .iv-branding .branding-context-container-inner {
- background-color: var(--main-background) !important;
- }
-
- /*Changing icon for unavailable video*/
- #img.ytd-player-error-message-renderer {
- display: block !important;
- -moz-box-sizing: border-box !important;
- box-sizing: border-box !important;
- background: url(https://github.com/RaitaroH/YouTube-DeepDark/raw/master/YT_Images/404.png) no-repeat !important;
- width: 140px !important;
- height: 100px !important;
- padding-left: 140px !important;
- position: relative !important;
- }
-
- /*Changing icon for unavailable page (404)*/
- #error-page-hh-illustration {
- display: block !important;
- -moz-box-sizing: border-box !important;
- box-sizing: border-box !important;
- background: url(https://github.com/RaitaroH/YouTube-DeepDark/raw/master/YT_Images/404.png) no-repeat !important;
- width: 140px !important;
- height: 100px !important;
- padding-left: 140px !important;
- right: -175px !important;
- position: relative !important;
- }
-
- /*Some spacing for the logo*/
- #yt-masthead #logo-container {
- margin-right: 20px !important;
- }
-
- /*consent page (cookie page)*/
- /*cookies consent dialog*/
- ytd-consent-bump-v2-lightbox ytd-button-renderer .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
- color: var(--main-color) !important;
- }
-
- ytd-consent-bump-v2-lightbox[darker-dark-theme] .loading-overlay.ytd-consent-bump-v2-lightbox {
- background: var(--hover-background) !important;
- }
-
- /*Border color for terms and conditions*/
- ytd-consent-bump-renderer {
- border-bottom: 1px solid var(--main-color) !important;
- }
-
- /*New logo*/
- #logo-icon-container.ytd-topbar-logo-renderer svg g path[fill*="#FF0000"],
- ytd-topbar-logo-renderer.style-scope a svg > g > g:nth-child(1) > path:nth-child(1),
- /*cookie version*/
- svg.ytd-consent-bump-v2-lightbox > g:nth-child(1) > g:nth-child(1) > path:nth-child(1) {
- /*fill: var(--hover-background) !important;*/
- }
-
- ytd-topbar-logo-renderer.style-scope a svg > g > g:nth-child(1) > path:nth-child(2),
- /*cookie version*/
- g.ytd-consent-bump-v2-lightbox:nth-child(2) > g:nth-child(1) > * {
- fill: var(--main-text) !important;
- }
-
- ytd-topbar-logo-renderer.style-scope a svg > g > g:nth-child(2) > g,
- #country-code.ytd-topbar-logo-renderer {
- color: var(--main-text) !important;
- }
-
- /*Logo hover*/
- #logo-icon:hover {
- --yt-swatch-logo-override: var(--main-color) !important;
- }
-
- /*Rewind logo*/
- #animated-yoodle {
- filter: invert(90%) grayscale(1);
- }
-
- /*Playlist page*/
- /*sidebar*/
- ytd-playlist-sidebar-renderer {
- background-color: var(--hover-background) !important;
- }
-
- #stats.ytd-playlist-sidebar-primary-info-renderer,
- #description.ytd-playlist-sidebar-primary-info-renderer .bold.yt-formatted-string,
- #owner-sub-count.ytd-video-owner-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #items.ytd-playlist-sidebar-renderer > .ytd-playlist-sidebar-renderer:not(:last-child) {
- border-color: var(--hover-background) !important;
- }
-
- #primary.ytd-two-column-browse-results-renderer {
- background-color: var(--main-background) !important;
- }
-
- ytd-button-renderer[is-paper-button] yt-icon.ytd-button-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #content.ytd-playlist-video-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*buttons*/
- ytd-playlist-sidebar-renderer ytd-toggle-button-renderer.style-suggestive[is-paper-button],
- ytd-playlist-sidebar-renderer paper-button.ytd-toggle-button-renderer {
- background-color: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- a.yt-simple-endpoint.ytd-button-renderer:hover *,
- ytd-playlist-sidebar-renderer ytd-button-renderer #button.ytd-button-renderer:hover,
- ytd-playlist-sidebar-renderer ytd-button-renderer #button.ytd-button-renderer:hover > yt-formatted-string.ytd-button-renderer {
- color: var(--main-color) !important;
- }
-
- /*playlist page*/
- ytd-browse[page-subtype="playlist"] ytd-two-column-browse-results-renderer.ytd-browse {
- background-color: var(--main-background) !important;
- }
-
- .index-message.ytd-playlist-panel-renderer,
- .light-text.ytd-playlist-segment-renderer,
- #contributor.ytd-playlist-video-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #title-container.ytd-playlist-segment-renderer {
- border-color: var(--hover-background) !important;
- }
-
- #title-container.ytd-playlist-segment-renderer:hover #title.ytd-playlist-segment-renderer {
- color: var(--main-color) !important;
- }
-
- /*Playlist changes*/
- ytd-playlist-panel-video-renderer:hover {
- background-color: var(--hover-background) !important;
- }
-
- ytd-playlist-panel-video-renderer[selected] #index.ytd-playlist-panel-video-renderer,
- #byline.ytd-playlist-panel-video-renderer,
- .ytp-video-menu-item[aria-checked="true"] .ytp-video-menu-item-now-playing,
- .ytp-video-menu-item-author {
- color: var(--main-color) !important;
- }
-
- ytd-playlist-video-renderer:hover,
- ytd-playlist-video-renderer:hover:not(.dragging) {
- background-color: var(--second-background) !important;
- }
-
- ytd-playlist-panel-video-renderer[selected][use-color-palette],
- ytd-playlist-panel-video-renderer[selected][use-color-palette]:hover:not(.dragging) {
- background-color: var(--hover-background) !important;
- }
-
- .header.ytd-playlist-panel-renderer,
- .playlist-items.ytd-playlist-panel-renderer,
- #header.ytd-engagement-panel-title-header-renderer,
- #content.ytd-engagement-panel-section-list-renderer,
- ytd-transcript-footer-renderer,
- ytd-transcript-segment-list-renderer {
- background-color: var(--second-background) !important;
- }
-
- .cue.ytd-transcript-body-renderer,
- .cue-group-start-offset.ytd-transcript-body-renderer {
- color: var(--dimmer-text) !important;
- }
-
- .cue-group.active.ytd-transcript-body-renderer {
- border-left-color: var(--main-color) !important;
- background-color: var(--hover-background) !important;
- }
-
- .cue-group.active.ytd-transcript-body-renderer .cue-group-start-offset.ytd-transcript-body-renderer,
- .cue.ytd-transcript-body-renderer.active {
- color: var(--main-text) !important;
- }
-
- .cue-group.ytd-transcript-body-renderer:hover .cue-group-start-offset.ytd-transcript-body-renderer,
- .cue-group.ytd-transcript-body-renderer:hover .cue.ytd-transcript-body-renderer {
- color: var(--main-color) !important;
- }
-
- .cue.ytd-transcript-body-renderer:hover,
- ytd-transcript-body-renderer:not([refresh]) .cue.active.ytd-transcript-body-renderer {
- background-color: transparent !important;
- color: var(--main-color) !important
- }
-
- .segment-timestamp.ytd-transcript-segment-renderer {
- background-color: var(--hover-background) !important;
- color: var(--main-color) !important
- }
-
- /*search transcript*/
- ytd-transcript-search-panel-renderer,
- ytd-transcript-search-box-renderer {
- background-color: var(--second-background) !important;
- }
-
- .input-container.ytd-transcript-search-box-renderer {
- background-color: var(--hover-background) !important;
- }
-
- /*magnifing glass icon*/
- .icon.ytd-transcript-search-box-renderer {
- --iron-icon-fill-color: var(--dimmer-text) !important;
- --iron-icon-stroke-color: var(--dimmer-text) !important;
- }
-
- #transcript-search-box-input.ytd-transcript-search-box-renderer {
- color: var(--main-text) !important;
- caret-color: var(--main-color) !important;
- }
-
- .ytp-video-menu-item[aria-checked="true"] .ytp-video-menu-item-thumbnail {
- border-color: var(--main-color) !important;
- }
-
- #index.ytd-playlist-video-renderer,
- #index.ytd-playlist-panel-video-renderer,
- .badge-style-type-medium-grey.ytd-badge-supported-renderer/*unlisted*/
- {
- color: var(--dimmer-text) !important;
- }
-
- #container.ytd-playlist-panel-renderer {
- border-color: var(--second-background) !important;
- }
-
- /*Playlist creation*/
- #create-playlist-form .input-content.paper-input-container label {
- color: var(--main-text) !important;
- }
-
- #create-playlist-form input.style-scope.paper-input::placeholder {
- color: var(--dimmer-text) !important;
- }
-
- #create-playlist-form .underline.is-highlighted.paper-input-container .focused-line.paper-input-container {
- border-bottom-color: var(--main-text) !important;
- }
-
- #create-playlist-form #label.ytd-privacy-dropdown-item-renderer {
- color: var(--main-text) !important;
- }
-
- #create-playlist-form ytd-privacy-dropdown-item-renderer.iron-selected {
- background-color: var(--hover-background) !important;
- }
-
- /*Chapters*/
- /*title*/
- h4.ytd-macro-markers-list-item-renderer {
- color: var(--main-text) !important;
- }
-
- /*timestamp*/
- #time.ytd-macro-markers-list-item-renderer {
- color: var(--main-color) !important;
- background-color: transparent !important;
- padding: 0px !important;
- }
-
- /*show current chapter*/
- #sync-button.ytd-macro-markers-list-renderer {
- background-color: var(--main-background) !important;
- color: var(--main-text) !important;
- }
-
- #sync-button.ytd-macro-markers-list-renderer:hover {
- color: var(--main-color) !important;
- }
-
- /*active indicators*/
- ytd-macro-markers-list-item-renderer[active] #thumbnail.ytd-macro-markers-list-item-renderer {
- outline-color: var(--main-color) !important;
- }
-
- #active-indicator.ytd-macro-markers-list-item-renderer {
- background-color: var(--main-color) !important;
- }
-
- /*hover for item*/
- ytd-macro-markers-list-item-renderer:hover,
- ytd-macro-markers-list-item-renderer[active] {
- background-color: var(--hover-background) !important;
- }
-
- ytd-macro-markers-list-item-renderer:hover {
- box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
- }
-
- ytd-macro-markers-list-item-renderer:hover h4.ytd-macro-markers-list-item-renderer {
- color: var(--main-color) !important;
- }
-
- /*chapter images in description*/
- ytd-macro-markers-list-item-renderer[active][layout="MACRO_MARKERS_LIST_ITEM_RENDERER_LAYOUT_VERTICAL"] {
- border-color: var(--main-color) !important;
- }
-
- ytd-horizontal-card-list-renderer.ytd-structured-description-content-renderer:not(:first-child),
- ytd-metadata-row-container-renderer.ytd-structured-description-content-renderer:not(:first-child),
- ytd-structured-description-content-renderer[inline-structured-description] ytd-horizontal-card-list-renderer.ytd-structured-description-content-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*chapter times in search description*/
- .metadata-snippet-container-one-line.ytd-video-renderer #time.ytd-video-renderer {
- color: var(--main-color) !important;
- background: var(--second-background) !important;
- }
-
- /*chapter metadata in search results*/
- ytd-expandable-metadata-renderer {
- /*this is used on hover, might as well*/
- background-color: var(--yt-spec-badge-chip-background) !important;
- }
-
- /*expanded chapters in search results*/
- ytd-macro-markers-list-item-renderer[layout="MACRO_MARKERS_LIST_ITEM_RENDERER_LAYOUT_VERTICAL"] {
- border-color: var(--second-background) !important;
- }
-
- /*Search bar*/
- ytd-searchbox[mode="legacy"] #container.ytd-searchbox,
- ytd-searchbox[mode="material-centered"] #container.ytd-searchbox,
- ytd-searchbox[mode="legacy"] #container.ytd-searchbox,
- ytd-searchbox[mode="legacy-centered"] #container.ytd-searchbox,
- #container.ytd-searchbox,
- #masthead-search-terms/*account settings page*/
- {
- background: var(--main-background) !important;
- border-color: var(--main-background) !important;
- box-shadow: none !important;
- }
-
- ytd-searchbox[mode="legacy"] #container.ytd-searchbox:hover,
- ytd-searchbox[mode=legacy][has-focus] #container.ytd-searchbox,
- ytd-searchbox[mode="material-left"] #container.ytd-searchbox,
- ytd-searchbox.style-scope[has-focus=""] #container.ytd-searchbox,
- ytd-searchbox[mode="material-centered"]:hover #container.ytd-searchbox,
- #masthead-search-terms.masthead-search-terms-border/*error page*/
- {
- border: 1px solid var(--main-color) !important;
- box-shadow: none !important;
- }
-
- ytd-searchbox[mode="legacy"] #container.ytd-searchbox input.ytd-searchbox,
- #container.ytd-searchbox > input,
- ytd-searchbox input,
- #masthead-search-terms.masthead-search-terms-border input/*error page*/
- {
- color: var(--main-text) !important;
- }
-
- /*Right search icon ๐ */
- #search-icon-legacy.ytd-searchbox,
- #masthead-search .search-btn-component,
- #masthead-search .search-btn-component .start/*account*/
- {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- #search-icon-legacy.ytd-searchbox:hover yt-icon.ytd-searchbox {
- color: var(--main-color) !important;
- }
-
- #masthead-search .search-btn-component .yt-uix-button-content/*account*/
- {
- filter: invert(1);
- }
-
- /*left ๐ icon - shown on focus*/
- #search-icon.ytd-searchbox {
- color: var(--main-text) !important;
- }
-
- #search-icon.ytd-searchbox:hover,
- #search-icon.ytd-searchbox:hover {
- color: var(--main-color) !important;
- }
-
- /*results ๐ icon*/
- .sbqs_c::before {
- filter: invert(1);
- }
-
- /*Results backgrounds*/
- .sbsb_a,
- .sbdd_b {
- background: var(--second-background) !important;
- border: none !important;
- }
-
- /*Text color*/
- .gsfs {
- color: var(--dimmer-text) !important;
- }
-
- /*Hover and keyboard select background*/
- .sbsb_c.gsfs:hover,
- .sbsb_d {
- background-color: var(--hover-background) !important;
- }
-
- .sbfl_b {
- background-color: var(--second-background) !important;
- }
-
- .sbfl_b:hover {
- background-color: var(--hover-background) !important;
- color: var(--main-color) !important;
- }
-
- .sbpqs_a {
- color: var(--main-color) !important;
- }
-
- /*Keyboard select text color and hover text color*/
- .sbsb_c:hover .sbqs_c,
- .sbsb_c.gsfs.sbsb_d .sbqs_c {
- color: var(--main-color) !important;
- }
-
- /*Keyboard icon in the search bar*/
- #gs_ok50 {
- filter: invert(100%);
- }
-
- /*Microphone search*/
- ytd-masthead #voice-search-button.ytd-masthead {
- background-color: var(--hover-background) !important;
- }
-
- ytd-voice-search-dialog-renderer[dialog] {
- background-color: var(--second-background) !important;
- }
-
- #header-text.ytd-voice-search-dialog-renderer,
- #microphone-label.ytd-voice-search-dialog-renderer,
- #microphone.ytd-voice-search-dialog-renderer[state="try-again"] #microphone-circle.ytd-voice-search-dialog-renderer yt-icon.ytd-voice-search-dialog-renderer {
- color: var(--main-text) !important;
- }
-
- /*Search results correction*/
- .style-scope.yt-search-query-correction {
- color: var(--main-text) !important;
- }
-
- .style-scope.yt-search-query-correction .italic.yt-formatted-string,
- .style-scope.yt-search-query-correction:hover {
- color: var(--main-color) !important;
- }
-
- /*Similar results*/
- #title.ytd-exploratory-results-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*search results filter border*/
- #filter-menu.ytd-search-sub-menu-renderer {
- border-color: var(--hover-background) !important;
- }
-
- #watch-card-header.ytd-generic-watch-card,
- #img-endpoint.ytd-watch-card-collage-renderer #overlay-button.ytd-watch-card-collage-renderer {
- background: var(--main-color) !important;
- color: var(--main-text) !important;
- }
-
- paper-tab,
- paper-tab.iron-selected.ytd-generic-watch-card {
- color: var(--main-color) !important;
- }
-
- paper-item:hover {
- background-color: var(--second-background) !important;
- }
-
- #img-endpoint.ytd-watch-card-collage-renderer #overlay-button.ytd-watch-card-collage-renderer {
- opacity: .9;
- }
-
- #img-endpoint.ytd-watch-card-collage-renderer #overlay-button.ytd-watch-card-collage-renderer:hover {
- opacity: 1 !important;
- }
-
- /*album*/
- #watch-card-subtitle.ytd-watch-card-rich-header-renderer {
- color: var(--main-text) !important;
- }
-
- .duration.ytd-watch-card-compact-video-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Buttom border for different fields*/
- .unfocused-line.paper-input-container {
- background-color: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- .focused-line.paper-input-container {
- background-color: var(--main-color) !important;
- border-color: var(--main-color) !important;
- }
-
- /*Search page*/
- #result-count.ytd-search-sub-menu-renderer {
- color: var(--dimmer-text) !important;
- }
-
- ytd-search-sub-menu-renderer,
- ytd-exploratory-results-renderer.ytd-item-section-renderer,
- ytd-shelf-renderer.ytd-item-section-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*no results*/
- .promo-title.ytd-background-promo-renderer,
- .promo-body-text.ytd-background-promo-renderer {
- color: var(--main-text) !important;
- }
-
- /*show more*/
- #more.ytd-vertical-list-renderer yt-formatted-string.ytd-vertical-list-renderer,
- #all.ytd-vertical-list-renderer yt-formatted-string.ytd-vertical-list-renderer {
- color: var(--main-text) !important;
- }
-
- #more.ytd-vertical-list-renderer yt-formatted-string.ytd-vertical-list-renderer:hover,
- #all.ytd-vertical-list-renderer yt-formatted-string.ytd-vertical-list-renderer:hover {
- color: var(--main-color) !important;
- }
-
- ytd-search-filter-renderer yt-formatted-string.ytd-search-filter-renderer {
- color: var(--dimmer-text) !important;
- }
-
- ytd-search-filter-renderer.selected yt-formatted-string.ytd-search-filter-renderer,
- ytd-search-filter-renderer.selected #dismiss-x.ytd-search-filter-renderer,
- ytd-search-filter-renderer yt-formatted-string.ytd-search-filter-renderer:hover {
- color: var(--main-color) !important;
- }
-
- /*Search music suggestions*/
- ytd-watch-card-rich-header-renderer {
- background: var(--hover-background) !important;
- }
-
- #overlay-button {
- background: var(--main-color) !important;
- }
-
- #overlay-button:hover {
- filter: brightness(110%) !important;
- }
-
- #watch-card-title,
- #view-all-endpoint:hover {
- color: var(--main-color) !important;
- }
-
- ytd-watch-card-compact-video-renderer[is-condensed],
- #view-all-endpoint {
- border-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- /*Search results related to item searched*/
- a.ytd-search-refinement-card-renderer {
- background-color: var(--second-background) !important;
- border-color: var(--hover-background) !important;
- border-radius: 8px !important;
- }
-
- a.ytd-search-refinement-card-renderer:hover #card-title.ytd-search-refinement-card-renderer div.ytd-search-refinement-card-renderer {
- color: var(--main-color) !important;
- }
-
- #card-title.ytd-search-refinement-card-renderer div.ytd-search-refinement-card-renderer {
- color: var(--main-text) !important;
- }
-
- /*Next button*/
- .center-aligned.ytd-horizontal-card-list-renderer {
- background-color: var(--second-background) !important;
- color: var(--main-text) !important;
- }
-
- .center-aligned.ytd-horizontal-card-list-renderer:hover {
- color: var(--main-color) !important;
- }
-
- /*filter*/
- a.yt-simple-endpoint.ytd-toggle-button-renderer:hover * {
- color: var(--main-color) !important;
- /* fill: var(--main-color) !important; */
- }
-
- #filter-group-name.ytd-search-filter-group-renderer {
- color: var(--main-text) !important;
- border-color: var(--hover-background) !important;
- }
-
- #description-text.ytd-video-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Comments*/
- yt-formatted-string.ytd-comments-header-renderer,
- #contenteditable-root.yt-formatted-string[aria-label].yt-formatted-string:empty::before,
- #contenteditable-textarea.ytd-commentbox {
- color: var(--dimmer-text) !important;
- }
-
- /*sort by*/
- #icon-label.yt-dropdown-menu,
- #label-icon.yt-dropdown-menu {
- color: var(--main-text) !important;
- fill: var(--main-text) !important;
- }
-
- yt-sort-filter-sub-menu-renderer.ytd-comments-header-renderer:hover #icon-label.yt-dropdown-menu,
- yt-sort-filter-sub-menu-renderer.ytd-comments-header-renderer:hover #label-icon.yt-dropdown-menu {
- color: var(--main-color) !important;
- fill: var(--main-color) !important;
- }
-
- /*sort by dropdown*/
- paper-listbox.yt-dropdown-menu {
- background: var(--second-background) !important;
- }
-
- .item.yt-dropdown-menu {
- color: var(--main-text) !important;
- }
-
- paper-listbox.yt-dropdown-menu paper-item.yt-dropdown-menu:hover,
- paper-listbox.yt-dropdown-menu paper-item.yt-dropdown-menu:hover .item.yt-dropdown-menu {
- background: var(--hover-background) !important;
- color: var(--main-color) !important;
- }
-
- paper-listbox.yt-dropdown-menu .yt-dropdown-menu.iron-selected {
- background-color: var(--second-background) !important;
- }
-
- paper-listbox.yt-dropdown-menu .yt-dropdown-menu.iron-selected .item.yt-dropdown-menu {
- color: var(--main-color) !important;
- }
-
- /*text box*/
- #simplebox-placeholder.ytd-comment-simplebox-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #placeholder-area.ytd-comment-simplebox-renderer {
- border-color: var(--hover-background) !important;
- }
-
- #input-container.ytd-commentbox,
- ytd-commentbox {
- --paper-input-container-underline-color: var(--hover-background) !important;
- --paper-input-container-underline-focus-color: var(--main-color) !important;
- }
-
- .focused-line.tp-yt-paper-input-container {
- border-color: var(--main-color) !important;
- }
-
- .unfocused-line.tp-yt-paper-input-container {
- border-color: var(--dimmer-text) !important;
- }
-
- /*emoji selector*/
- #emojis.ytd-commentbox {
- background-color: var(--second-background) !important;
- }
-
- /*comments themselves*/
- #author-text.yt-simple-endpoint.ytd-comment-renderer,
- #content.style-scope #content-text {
- color: var(--main-text) !important;
- }
-
- #author-text.yt-simple-endpoint.ytd-comment-renderer:hover {
- color: var(--main-color) !important;
- }
-
- ytd-author-comment-badge-renderer {
- background-color: var(--hover-background) !important;
- }
-
- #content-text.ytd-comment-renderer,
- ytd-expander[should-use-number-of-lines][collapsed] > #content.ytd-expander {
- color: var(--dimmer-text) !important;
- }
-
- /*read more*/
- .more-button-exp.ytd-comment-renderer,
- .less-button-exp.ytd-comment-renderer {
- color: var(--main-text) !important;
- }
-
- .more-button-exp.ytd-comment-renderer:hover,
- .less-button-exp.ytd-comment-renderer:hover {
- color: var(--main-color) !important;
- }
-
- /*view replies*/
- paper-button.ytd-comment-replies-renderer,
- yt-next-continuation.ytd-comment-replies-renderer,
- yt-icon.ytd-comment-replies-renderer {
- color: var(--main-text) !important;
- }
-
- .more-button.style-scope.ytd-comment-replies-renderer:hover paper-button.ytd-comment-replies-renderer,
- .more-button.style-scope.ytd-comment-replies-renderer:hover yt-next-continuation.ytd-comment-replies-renderer,
- .more-button.style-scope.ytd-comment-replies-renderer:hover yt-icon.ytd-comment-replies-renderer {
- color: var(--main-color) !important;
- }
-
- /*likes*/
- #vote-count-middle.ytd-comment-action-buttons-renderer {
- color: var(--dimmer-text) !important;
- }
-
- ytd-button-renderer yt-formatted-string.ytd-button-renderer:hover {
- color: var(--main-color) !important;
- }
-
- /*Show more videos*/
- yt-next-continuation.ytd-watch-next-secondary-results-renderer {
- --paper-button_-_background-color: transparent !important;
- --paper-button_-_color: var(--dimmer-text) !important;
- }
-
- .style-scope.yt-next-continuation {
- border-color: transparent !important;
- }
-
- .style-scope.yt-next-continuation:hover {
- background-color: transparent !important;
- color: var(--main-color) !important;
- }
-
- yt-formatted-string.ytd-expanded-shelf-contents-renderer {
- color: var(--dimmer-text) !important;
- }
-
- yt-formatted-string.ytd-expanded-shelf-contents-renderer:hover {
- color: var(--main-color) !important;
- }
-
- /*View more comments*/
- paper-button.yt-next-continuation {
- color: var(--dimmer-text) !important;
- }
-
- /*Links in description and published date for comments*/
- #content.ytd-expander a {
- color: var(--main-color) !important;
- opacity: 0.9;
- }
-
- #published-time-text.ytd-comment-renderer,
- #published-time-text.ytd-comment-renderer a {
- --yt-endpoint-color: var(--dimmer-text) !important;
- color: var(--dimmer-text) !important;
- opacity: .8;
- }
-
- #content.ytd-expander a:hover,
- #published-time-text.ytd-comment-renderer a:hover,
- #content.ytd-expander #name.ytd-author-comment-badge-renderer:hover {
- color: var(--main-color) !important;
- opacity: 1 !important;
- }
-
- #content.ytd-expander #name.ytd-author-comment-badge-renderer {
- color: var(--main-text) !important;
- }
-
- /*Heart icon in comments*/
- #hearted-border.ytd-creator-heart-renderer,
- #hearted.ytd-creator-heart-renderer {
- color: var(--main-color) !important;
- fill: var(--main-color) !important;
- }
-
- yt-icon-button#creator-heart-button svg {
- fill: var(--main-color) !important;
- }
-
- /*Pinned by*/
- #label.ytd-pinned-comment-badge-renderer {
- color: var(--main-color) !important;
- opacity: 0.5;
- }
-
- yt-icon.ytd-pinned-comment-badge-renderer {
- fill: var(--main-color) !important;
- opacity: 0.5;
- }
-
- /*Fundraiser message*/
- #wrapper.ytd-donation-unavailable-renderer {
- background-color: var(--hover-background) !important;
- }
-
- /*Chat*/
- /*header*/
- yt-live-chat-header-renderer,
- #header.yt-live-chat-participant-list-renderer,
- yt-live-chat-message-renderer,
- yt-live-chat-ticker-renderer {
- background: var(--hover-background) !important;
- }
-
- yt-live-chat-banner-manager[has-active-banner] {
- background: linear-gradient(var(--hover-background) 0%, var(--second-background) 100%) !important;
- }
-
- /*live replay*/
- #card.yt-live-chat-viewer-engagement-message-renderer,
- yt-live-chat-text-message-renderer[is-highlighted] {
- background: var(--hover-background) !important;
- }
-
- #chat,
- #participants,
- yt-live-chat-renderer {
- background: var(--second-background) !important;
- }
-
- /*show mode was enabled*/
- #container.yt-live-chat-restricted-participation-renderer {
- background: var(--second-background) !important;
- }
-
- #contents.yt-live-chat-mode-change-message-renderer {
- background: var(--hover-background) !important;
- }
-
- #contents.yt-live-chat-mode-change-message-renderer,
- #subtext.yt-live-chat-mode-change-message-renderer {
- color: var(--dimmer-text) !important;
- }
-
- yt-live-chat-toast-renderer[is-showing-message]/*info for show mode*/
- {
- background: var(--hover-background) !important;
- }
-
- /*dropmenu*/
- #menu.yt-live-chat-text-message-renderer {
- background: transparent !important;
- }
-
- paper-listbox {
- background: var(--second-background) !important;
- }
-
- yt-icon.ytd-menu-navigation-item-renderer,
- yt-icon.ytd-menu-service-item-renderer,
- #header.yt-live-chat-participant-list-renderer,
- #author-name.yt-live-chat-author-chip:not(.member):not(.moderator),
- .style-scope.yt-live-chat-ninja-message-renderer {
- color: var(--main-text) !important;
- }
-
- #deleted-state,
- #show-original,
- yt-live-chat-text-message-renderer[is-deleted] #message.yt-live-chat-text-message-renderer,
- #timestamp {
- color: var(--dimmer-text) !important;
- }
-
- /*paid messages*/
- #content.yt-live-chat-paid-message-renderer #message {
- color: black !important;
- }
-
- #message.yt-live-chat-text-message-renderer a.yt-live-chat-text-message-renderer {
- color: var(--main-color) !important;
- text-decoration: none !important;
- }
-
- yt-live-chat-author-chip[is-highlighted] #author-name {
- background: var(--main-color) !important;
- }
-
- /*paid arrows*/
- yt-icon.yt-live-chat-ticker-renderer {
- background: var(--main-background) !important;
- color: var(--main-text) !important;
- }
-
- yt-icon.yt-live-chat-ticker-renderer:hover {
- color: var(--main-color) !important;
- }
-
- #right-arrow-container.yt-live-chat-ticker-renderer,
- #left-arrow-container.yt-live-chat-ticker-renderer {
- background: transparent !important;
- }
-
- /*channel messages*/
- yt-live-chat-text-message-renderer[author-is-owner] {
- background: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- /*pinned*/
- yt-live-chat-banner-manager[has-visible-banner] {
- background: var(--second-background) !important;
- }
-
- #contents.yt-live-chat-banner-renderer > .yt-live-chat-banner-renderer {
- background: transparent !important;
- }
-
- /*Confirmantion popup*/
- paper-toast {
- background-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- /*button*/
- yt-icon-button.yt-live-chat-item-list-renderer,
- yt-live-chat-ninja-message-renderer.yt-live-chat-renderer paper-button.yt-button-renderer,
- yt-live-chat-message-renderer.yt-live-chat-message-input-renderer yt-button-renderer.style-dark[is-paper-button] {
- background: var(--main-background) !important;
- color: var(--main-text) !important;
- }
-
- /*input*/
- yt-live-chat-message-input-renderer {
- background-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- #focused.yt-live-chat-text-input-field-renderer {
- background: var(--main-color) !important;
- }
-
- #count {
- color: var(--dimmer-text) !important;
- }
-
- /*hide chat*/
- #show-hide-button.ytd-live-chat-frame > ytd-toggle-button-renderer.ytd-live-chat-frame {
- background: var(--hover-background) !important;
- }
-
- /*emoji*/
- yt-formatted-string.yt-emoji-picker-category-renderer {
- background: var(--hover-background) !important;
- }
-
- #search-panel.yt-emoji-picker-renderer {
- background: var(--main-background) !important;
- color: var(--main-text) !important;
- }
-
- #search-empty {
- color: var(--dimmer-text) !important;
- }
-
- /*donations superchats cards*/
- #card.yt-live-chat-donation-announcement-renderer {
- background-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- #menu.yt-live-chat-donation-announcement-renderer {
- background: transparent !important;
- }
-
- /*for actually donating*/
- #subtext.yt-live-chat-product-button-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #container.yt-live-chat-product-button-renderer .yt-icon {
- fill: var(--dimmer-text) !important;
- }
-
- /*Fund raiser*/
- #header-section.ytd-donation-shelf-renderer,
- #collapse-controls-section.ytd-donation-shelf-renderer {
- background-color: var(--hover-background) !important;
- }
-
- #header-text.ytd-donation-shelf-renderer,
- #collapse-controls-section.ytd-donation-shelf-renderer {
- color: var(--main-text) !important;
- }
-
- #collapse-controls-section.ytd-donation-shelf-renderer:hover {
- color: var(--main-color) !important;
- }
-
- #header-section.ytd-donation-shelf-renderer .style-scope.ytd-donation-shelf-renderer.no-transition {
- filter: invert(.8);
- }
-
- #donate-section.ytd-donation-shelf-renderer,
- #creator-messages-section.ytd-donation-shelf-renderer,
- #nonprofit-section.ytd-donation-shelf-renderer,
- #nonprofit-title.ytd-donation-shelf-renderer {
- background-color: var(--second-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- #campaign-title.ytd-donation-shelf-renderer,
- .creator-message.ytd-donation-shelf-renderer,
- #campaign-subtitle.ytd-donation-shelf-renderer,
- .creator-message-name.ytd-donation-shelf-renderer,
- #nonprofit-title.ytd-donation-shelf-renderer {
- color: var(--main-text) !important;
- }
-
- .creator-message.ytd-donation-shelf-renderer,
- #campaign-subtitle.ytd-donation-shelf-renderer,
- #nonprofit-subtitle.ytd-donation-shelf-renderer,
- #nonprofit-description.ytd-donation-shelf-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #amount-raised.ytd-donation-shelf-renderer,
- #nonprofit-title.ytd-donation-shelf-renderer yt-icon.ytd-donation-shelf-renderer {
- color: var(--main-color) !important;
- }
-
- #nonprofit-link.ytd-donation-shelf-renderer .inline-icon.ytd-donation-shelf-renderer {
- fill: var(--main-color) !important;
- }
-
- /*progress*/
- #progress-bar-start.ytd-donation-shelf-renderer,
- #progress-bar-end.ytd-donation-shelf-renderer {
- color: var(--main-text) !important;
- }
-
- #matching-label.ytd-donation-shelf-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #progress-bar.ytd-donation-shelf-renderer {
- background-color: var(--dimmer-text) !important;
- }
-
- #progress-bar-fill.ytd-donation-shelf-renderer {
- background-color: var(--main-color) !important;
- }
-
- /*donate button*/
- #donate-section.ytd-donation-shelf-renderer ytd-button-renderer.style-primary[is-paper-button],
- .b3-button.jfk-button,
- .b3-button.jfk-button.jfk-button-action {
- background-color: var(--main-color) !important;
- }
-
- /*donate window*/
- #top-box.ytd-donation-amount-picker-renderer {
- background-color: var(--second-background) !important;
- }
-
- #campaign-title.ytd-donation-amount-picker-renderer,
- #nonprofit-title.ytd-donation-amount-picker-renderer {
- color: var(--main-color) !important;
- }
-
- #campaign-subtitle.ytd-donation-amount-picker-renderer,
- #nonprofit-subtitle.ytd-donation-amount-picker-renderer {
- color: var(--main-text) !important;
- }
-
- /*amount buttons*/
- #suggested-amount-buttons-row.ytd-donation-amount-picker-renderer ytd-button-renderer.ytd-donation-amount-picker-renderer[is-paper-button] paper-button.ytd-button-renderer {
- background-color: var(--second-background) !important;
- }
-
- #suggested-amount-buttons-row.ytd-donation-amount-picker-renderer ytd-button-renderer.ytd-donation-amount-picker-renderer[is-paper-button] paper-button.ytd-button-renderer {
- background-color: var(--second-background) !important;
- border-color: var(--second-background) !important;
- }
-
- #suggested-amount-buttons-row.ytd-donation-amount-picker-renderer ytd-button-renderer.ytd-donation-amount-picker-renderer[is-paper-button][selected] paper-button.ytd-button-renderer,
- .ytd-donation-amount-picker-renderer ytd-button-renderer.style-primary[is-paper-button] {
- background-color: var(--main-color) !important;
- }
-
- /*curency for other amount*/
- span.prefix.style-scope.paper-input-container > div.ytd-donation-amount-picker-renderer {
- color: var(--main-text) !important;
- }
-
- /*Payment window*/
- .popup-mode .b3-page-header {
- background-color: var(--main-background) !important;
- }
-
- .b3-line-items-mundane-items-container,
- .b3-line-items-mundane-items-container {
- background-color: var(--hover-background) !important;
- }
-
- .b3-separator {
- display: none !important;
- }
-
- .b3-line-item-value {
- color: var(--main-color) !important;
- }
-
- .b3-line-item-name,
- .b3-line-item-infomessage,
- .b3-line-item-subvalue {
- color: var(--main-text) !important;
- }
-
- .b3-single-option-form-selector-option-content .b3-existing-instrument-option-label-without-image,
- .b3-dropdown-form-selector .b3-existing-instrument-option-label-without-image,
- .b3-single-option-form-selector-option-content .b3-additional-instrument-option-label,
- .b3-dropdown-form-selector .b3-additional-instrument-option-label,
- .b3-input.focused .b3-input-label,
- .b3-input.focused .b3-input-label-text,
- .b3-input input[type="tel"],
- .b3-input input[type="text"],
- .b3-input input[type="password"],
- .b3-input input[type="email"],
- .b3-input.populated .b3-input-label,
- .b3-input.invalid .b3-input-label,
- .b3-input.autofilled .b3-input-label,
- .b3-input-field > .b3-input-label,
- .b3-input-field > .b3-input-label.accessible,
- .b3-collapsing-form-placeholder-text {
- color: var(--main-text) !important;
- }
-
- .countryselector .goog-flat-menu-button-caption,
- .countryselector .goog-flat-menu-button-caption .goog-menuitem-content {
- color: var(--dimmer-text) !important;
- }
-
- /*icons*/
- .b3-single-option-form-selector-icon,
- .b3-collapsing-form-icon {
- fill: var(--main-text) !important;
- }
-
- .b3-collapsing-form.focused .b3-collapsing-form-icon {
- fill: var(--main-color) !important;
- }
-
- .b3-tooltip-icon {
- filter: invert(1) !important;
- }
-
- /*border*/
- .b3-input-status-indicator {
- background-color: var(--main-color) !important;
- }
-
- .b3-input-accent {
- border-color: var(--hover-background) !important;
- }
-
- /*tooltip*/
- .b3-inline-tooltip-popup-wrapper,
- .help-Helpwidgets-TooltipWidget-content-html {
- background-color: var(--hover-background) !important;
- color: var(--dimmer-text) !important;
- }
-
- .b3-inline-tooltip-popup-wrapper a,
- .help-Helpwidgets-TooltipWidget-content-html a {
- color: var(--main-color) !important;
- }
-
- /*country choice*/
- .goog-menu,
- .goog-menuitem:hover {
- background-color: var(--hover-background) !important;
- }
-
- .goog-menuitem,
- .goog-tristatemenuitem,
- .goog-filterobsmenuitem {
- color: var(--main-text) !important;
- }
-
- .goog-menuitem-highlight .goog-menuitem-content {
- color: var(--main-color) !important;
- }
-
- .goog-menuitem .countryselector-flag {
- border-radius: 4px !important;
- /*hiding ugly white corners*/
- }
-
- /*footer*/
- .b3-legal-message-content,
- .b3-info-message-list.b3-buyflow-extra-messages .b3-info-message-component.b3-info-message-unknown,
- .b3-info-message-component.b3-info-message-unknown.b3-buyflow-extra-messages .b3-info-message-html {
- color: var(--dimmer-text) !important;
- }
-
- .b3-legal-message-content a,
- .b3-info-message-component.b3-info-message-unknown.b3-buyflow-extra-messages .b3-info-message-html a {
- color: var(--main-color) !important;
- }
-
- /*Notification*/
- /*bell icon notification count*/
- .yt-spec-icon-badge-shape--type-notification .yt-spec-icon-badge-shape__badge {
- background-color: var(--main-color) !important;
- border: none !important;
- }
-
- button.yt-icon-button:hover .yt-spec-icon-badge-shape--type-notification .yt-spec-icon-badge-shape__badge {
- color: var(--main-text) !important;
- }
-
- /*load spinner - also for comments*/
- .spinner-layer.layer-1.tp-yt-paper-spinner,
- .spinner-layer.layer-2.tp-yt-paper-spinner,
- .spinner-layer.layer-3.tp-yt-paper-spinner,
- .spinner-layer.layer-4.tp-yt-paper-spinner {
- color: var(--dimmer-text) !important;
- }
-
- #notification-count.ytd-notification-topbar-button-renderer,
- ytd-notification-renderer.unread #new.ytd-notification-renderer,
- .yt-lockup-notification .unread-dot/*account settings*/
- {
- background: var(--main-color) !important;
- border-color: var(--main-color) !important;
- }
-
- .text.ytd-notification-renderer,
- .message.ytd-notification-renderer #yt-masthead-notifications-title,
- .yt-lockup-notification .yt-lockup-title a/*account settings*/
- h2.yt-multi-page-menu-section-renderer/*comments and notifications headers*/
- {
- color: var(--main-text) !important;
- }
-
- .metadata.ytd-notification-renderer,
- .exp-responsive .yt-lockup-tile .yt-lockup-byline/*account settings*/
- {
- color: var(--dimmer-text) !important;
- }
-
- ytd-notification-renderer:hover .message.ytd-notification-renderer {
- color: var(--main-color) !important;
- }
-
- ytd-watch:not([flexy-fit-to-video_]) #chat.ytd-watch,
- ytd-watch:not([flexy-fit-to-video_]) #transcript.ytd-watch {
- padding-left: 0 !important;
- }
-
- ytd-simple-menu-header-renderer {
- background-color: var(--hover-background) !important;
- }
-
- h2.ytd-simple-menu-header-renderer {
- color: var(--main-text) !important;
- }
-
- #sections.ytd-multi-page-menu-renderer > ytd-background-promo-renderer.ytd-multi-page-menu-renderer,
- ytd-multi-page-menu-renderer,
- #yt-masthead-notifications-content .item-section > li > .yt-lockup-tile,
- #yt-masthead-notifications-content .yt-ui-ellipsis,
- /*account settings*/
- #yt-masthead-notifications-content/*bottom thing - account settings*/
- {
- background: var(--second-background) !important;
- border-color: var(--second-background) !important;
- }
-
- .browse-items-load-more-button {
- background-color: var(--main-background) !important;
- border-color: var(--main-background) !important;
- color: var(--main-text) !important;
- }
-
- .browse-items-load-more-button:hover {
- color: var(--main-color) !important;
- }
-
- .promo-message.ytd-background-promo-renderer,
- #message:not([class*="yt-music"]) {
- color: var(--dimmer-text) !important;
- }
-
- /*triangle*/
- .yt-uix-clickcard-card-reverse .yt-uix-card-body-arrow-vertical,
- .yt-uix-hovercard-card-reverse .yt-uix-card-body-arrow-vertical/*account settings*/
- {
- border-bottom-color: var(--hover-background) !important;
- }
-
- /*menu*/
- .yt-ui-menu-content/*account settings*/
- {
- background-color: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- .yt-ui-menu-item/*account settings*/
- {
- background-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- .yt-ui-menu-item:hover/*account settings*/
- {
- color: var(--main-color) !important;
- }
-
- /*gear icon*/
- .yt-uix-button-icon-icon-account-settings/*account settings*/
- {
- filter: brightness(250%) invert(1);
- }
-
- /*Cards*/
- .iv-card-content,
- .ytp-ce-expanding-overlay-background,
- .ytp-cards-teaser .ytp-cards-teaser-text,
- .ytp-cards-teaser .ytp-cards-teaser-box {
- background-color: var(--main-background) !important;
- }
-
- .ytp-cards-teaser .ytp-cards-teaser-box,
- .iv-card-image {
- border: 0px !important;
- }
-
- .iv-card-content > :first-child,
- .html5-video-player a,
- .iv-card h2,
- .ytp-cards-teaser .ytp-cards-teaser-text {
- color: var(--main-text) !important;
- }
-
- .iv-card:hover .iv-card-primary-link,
- .ytp-ce-website-title {
- color: var(--main-color) !important;
- }
-
- .ytp-ce-element:hover {
- border-color: var(--main-color) !important;
- }
-
- .ytp-ce-channel-title.ytp-ce-link {
- color: var(--main-color) !important;
- opacity: 0.9 !important;
- }
-
- .ytp-ce-channel-title.ytp-ce-link:hover,
- .ytp-cards-teaser .ytp-cards-teaser-text:hover {
- color: var(--main-color) !important;
- opacity: 1 !important;
- }
-
- .ytp-ce-channel-metadata.yt-ui-ellipsis.yt-ui-ellipsis-3 {
- background: transparent;
- color: var(--dimmer-text) !important;
- }
-
- /*Cards border color*/
- .iv-card-message {
- border-bottom: 1px solid var(--main-color) !important;
- }
-
- .ytp-ce-channel-this .ytp-ce-channel-metadata {
- border-color: var(--hover-background) !important;
- }
-
- /*Poll*/
- .iv-card-poll label,
- .iv-card-poll.iv-card-poll-voted label.iv-card-poll-choice-checked,
- .iv-card-poll.iv-card-poll-voted label {
- color: var(--main-text) !important;
- }
-
- #vote-info.ytd-backstage-poll-renderer {
- color: var(--dimmer-text) !important;
- }
-
- .iv-card-poll .iv-card-poll-result .iv-card-poll-result-bar {
- background-color: var(--main-color) !important;
- }
-
- ytd-backstage-post-thread-renderer {
- border-color: var(--hover-background) !important;
- }
-
- ytd-backstage-poll-renderer[show-poll-choice-border] .choice-info.ytd-backstage-poll-renderer {
- border-color: transparent !important;
- }
-
- /*Account menu header*/
- ytd-active-account-header-renderer {
- background: var(--second-background) !important;
- }
-
- ytd-active-account-header-renderer:hover {
- background-color: var(--hover-background) !important;
- }
-
- #account-name.ytd-active-account-header-renderer,
- #channel-title.ytd-account-item-renderer {
- color: var(--main-text) !important;
- }
-
- #email.ytd-active-account-header-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*subentries*/
- #label.ytd-toggle-theme-compact-link-renderer,
- tp-yt-paper-item.ytd-compact-link-renderer {
- color: var(--dimmer-text) !important;
- }
-
- ytd-toggle-theme-compact-link-renderer:hover #label.ytd-toggle-theme-compact-link-renderer,
- ytd-toggle-theme-compact-link-renderer:hover yt-icon,
- paper-item.ytd-compact-link-renderer:hover #subtitle,
- paper-item.ytd-compact-link-renderer:hover .deemphasize.yt-formatted-string,
- tp-yt-paper-item.ytd-compact-link-renderer:hover *,
- tp-yt-paper-item.ytd-compact-link-renderer:hover #subtitle.ytd-compact-link-renderer {
- color: var(--main-color) !important;
- }
-
- #footer.ytd-multi-page-menu-renderer > .ytd-multi-page-menu-renderer {
- border-color: var(--hover-background) !important;
- }
-
- .description.ytd-toggle-item-renderer,
- #caption.ytd-toggle-item-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*language*/
- #language.ytd-account-settings,
- #country.ytd-account-settings,
- #restricted.ytd-account-settings,
- .container.ytd-account-settings {
- background-color: var(--second-background) !important;
- }
-
- paper-item.ytd-account-settings {
- color: var(--dimmer-text) !important;
- }
-
- paper-item.ytd-account-settings:hover {
- color: var(--main-color) !important;
- }
-
- /*swich account*/
- yt-formatted-string.ytd-account-item-renderer[secondary] {
- color: var(--dimmer-text) !important;
- }
-
- #selected.ytd-account-item-renderer {
- color: var(--main-color) !important;
- }
-
- /*theme*/
- ytd-compact-link-renderer[compact-link-style="compact-link-style-type-disclaimer"] #label.ytd-compact-link-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Live background color*/
- ytd-thumbnail-overlay-time-status-renderer[overlay-style="LIVE"] {
- background-color: var(--main-color) !important;
- }
-
- .guide-entry-badge.ytd-guide-entry-renderer {
- color: var(--main-color) !important;
- fill: var(--main-color) !important;
- }
-
- .ytp-live-badge[disabled]:before {
- background: var(--main-color) !important;
- }
-
- /*Recolored sidepane icons, menu icons and filter button*/
- .guide-icon.ytd-guide-entry-renderer,
- paper-button.ytd-toggle-button-renderer,
- yt-icon.ytd-compact-link-renderer,
- yt-icon.ytd-toggle-theme-compact-link-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Sidepane titles*/
- #guide-section-title a {
- color: var(--dimmer-text) !important;
- }
-
- #guide-section-title a:hover {
- color: var(--main-color) !important;
- }
-
-
- /*Autoplay text*/
- #upnext.ytd-compact-autoplay-renderer,
- #autoplay.ytd-compact-autoplay-renderer {
- color: var(--dimmer-text) !important;
- opacity: .8;
- }
-
- ytd-compact-autoplay-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*Video was removed by user - not interested*/
- #text.ytd-notification-multi-action-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Video was added/removed to/from a playlist by user*/
- yt-notification-action-renderer[ui-refresh] #text.yt-notification-action-renderer,
- yt-notification-action-renderer[ui-refresh] #sub-text.yt-notification-action-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Links in video description*/
- .description.ytd-video-secondary-info-renderer a {
- color: var(--main-color) !important;
- opacity: .9;
- }
-
- /*Game cards*/
- ytd-rich-metadata-renderer {
- background-color: var(--second-background) !important;
- }
-
- #call-to-action.ytd-rich-metadata-renderer {
- color: var(--main-text) !important;
- }
-
- #title.ytd-rich-metadata-renderer,
- #call-to-action.ytd-rich-metadata-renderer:hover {
- color: var(--main-color) !important;
- }
-
- /*Movie cards*/
- #header.ytd-movie-offer-module-renderer {
- background-color: var(--second-background) !important;
- }
-
- ytd-button-renderer.ytd-movie-offer-module-renderer.style-primary[is-paper-button] {
- background-color: var(--main-color) !important;
- }
-
- #wide-clickable-area.ytd-movie-offer-module-renderer {
- background-color: var(--hover-background) !important;
- }
-
- #info.ytd-movie-offer-module-renderer {
- color: var(--main-text) !important;
- }
-
- h3.ytd-compact-movie-renderer {
- color: var(--main-text) !important;
- }
-
- /*Tour/ticket cards*/
- ytd-ticket-shelf-renderer {
- background-color: var(--second-background) !important;
- }
-
- #primary-event.ytd-ticket-shelf-renderer #meta.ytd-ticket-shelf-renderer #tickets-button.ytd-ticket-shelf-renderer {
- background: var(--main-color) !important;
- color: var(--main-text) !important;
- }
-
- #primary-event.ytd-ticket-shelf-renderer #meta-info.ytd-ticket-shelf-renderer #nearest.ytd-ticket-shelf-renderer,
- #primary-event.ytd-ticket-shelf-renderer #meta-info.ytd-ticket-shelf-renderer #subtitle1.ytd-ticket-shelf-renderer,
- #primary-event.ytd-ticket-shelf-renderer #meta-info.ytd-ticket-shelf-renderer #subtitle2.ytd-ticket-shelf-renderer,
- .where-column-td.ytd-ticket-shelf-renderer .where-column.ytd-ticket-shelf-renderer {
- color: var(--main-text) !important;
- }
-
- .when-date-column.ytd-ticket-shelf-renderer,
- .link.ytd-ticket-shelf-renderer,
- .when-weekday-column.ytd-ticket-shelf-renderer {
- color: var(--main-color) !important;
- }
-
- /*separator*/
- #seperator.ytd-ticket-shelf-renderer,
- ytd-ticket-shelf-renderer {
- border-color: var(--hover-background) !important;
- }
-
-
- /*Author name*/
- #owner-name.ytd-video-owner-renderer {
- opacity: .9;
- }
-
- #owner-name.ytd-video-owner-renderer:hover {
- opacity: 1 !important;
- }
-
- /*Set a memento*/
- ytd-toggle-button-renderer.style-compact-gray[is-paper-button] {
- background-color: var(--second-background) !important;
- color: var(--dimmer-text) !important;
- }
-
- /*Series name*/
- .super-title.ytd-video-primary-info-renderer a,
- #additional-metadata-line.ytd-video-meta-block {
- color: var(--dimmer-text) !important;
- opacity: .8;
- }
-
- #selectionBar.paper-tabs {
- border-color: var(--main-color) !important;
- }
-
- /*"Best" of YouTube icons in sidepane*/
- /*.style-scope.ytd-guide-entry-renderer.no-transition
- {
- filter: grayscale(100%);
- }*/
- /* Promo page */
- body.yt-new-promo-page-use-launched-copy .yt-new-promo-page-header {
- background: var(--main-background) !important;
- }
-
- .yt-new-promo-page-section-text,
- .yt-new-promo-page-header {
- color: var(--dimmer-text);
- }
-
- .yt-new-promo-page-button {
- background-color: var(--main-color) !important;
- color: var(--main-text) !important;
- opacity: .9;
- }
-
- .yt-new-promo-page-button:hover {
- opacity: 1;
- }
-
- /* Crude logo fix */
- .yt-new-promo-page-logo {
- filter: grayscale(100%) invert(100%);
- }
-
- /* Fix for active like/dislike buttons */
- ytd-toggle-button-renderer.style-grey-text[is-icon-button] {
- color: var(--yt-button-color);
- }
-
- ytd-toggle-button-renderer #button.ytd-toggle-button-renderer {
- color: inherit;
- }
-
- /*like/dislike buttons in nested replies*/
- /*.style-scope.ytd-toggle-button-renderer svg
- {
- fill: var(--dimmer-text) !important;
- }
- .style-scope.ytd-toggle-button-renderer yt-icon-button.style-default-active svg
- {
- fill: var(--main-color) !important;
- }*/
- ytd-toggle-button-renderer.ytd-comment-action-buttons-renderer #button.ytd-toggle-button-renderer {
- color: var(--yt-button-color);
- }
-
- ytd-toggle-button-renderer.ytd-comment-action-buttons-renderer .style-default-active {
- color: var(--main-color) !important;
- }
-
- /* Fix for placeholders/skeletons */
- /*ytd-masthead.shell
- {
- background-color: var(--main-background);
- }
- ytd-masthead.shell [class*='skeleton'], [id*='skeleton'] [class*='skeleton'], [id*='skeleton'], .shelf-videos, .skeleton-bg-color
- {
- background-color: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }*/
- /*homepage skeleton*/
- #home-container-skeleton,
- html[dark] #home-container-skeleton {
- background-color: var(--main-background) !important;
- }
-
- /*sidebar skeleton*/
- #guide-skeleton,
- html[dark] #guide-skeleton {
- background-color: var(--second-background) !important;
- }
-
- /*homepage videos skeleton*/
- #home-page-skeleton .skeleton-bg-color,
- html[dark] #home-page-skeleton .skeleton-bg-color {
- background-color: var(--hover-background) !important;
- }
-
- .masthead-skeleton-icon,
- html[dark] .masthead-skeleton-icon,
- /*ytd-masthead.shell [class*='skeleton'], html[dark] ytd-masthead.shell,
- .shelf-videos, html[dark] .shelf-videos,*/
- .skeleton-bg-color,
- html[dark] .skeleton-bg-color {
- background-color: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- .skeleton-light-border-bottom,
- html[dark] .skeleton-light-border-bottom {
- border-bottom: 1px solid var(--hover-background) !important;
- }
-
- ytd-alert-with-button-renderer[type="INFO"],
- #content-wrapper.yt-alert-with-actions-renderer/*TOS*/
- {
- background-color: var(--hover-background) !important;
- }
-
- #content-wrapper.yt-alert-with-actions-renderer yt-button-renderer[is-paper-button] yt-icon.yt-button-renderer {
- color: var(--main-color) !important;
- }
-
- ytd-alert-with-button-renderer[type="INFO"] #text.ytd-alert-with-button-renderer {
- color: var(--main-text) !important;
- }
-
- #alert-message.ytd-consent-bump-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Paid membership*/
- yt-subscription-product-header-renderer.ytd-item-section-renderer {
- color: var(--main-text) !important;
- }
-
- /*Reporting*/
- .introduction-header {
- color: var(--main-text) !important;
- }
-
- .introduction-body,
- .introduction-bullet-items {
- color: var(--dimmer-text) !important;
- }
-
- yt-report-form-modal-renderer[dialog][dialog][dialog] {
- background: var(--main-background) !important;
- }
-
- yt-options-renderer[increased-tooltip-target] yt-icon.yt-options-renderer {
- color: var(--main-text) !important;
- }
-
- /*Help*/
- .ghp-header-searchBox,
- .ghp-autocomplete-label {
- color: var(--dimmer-text) !important;
- }
-
- /*
- .ghp-header-searchIcon.ghpv-loaded, .ghp-iconTextComponent-icon, .ghp-autocomplete-icon
- {
- filter: invert(100%) grayscale(100%) brightness(150%);
- }
- .ghp-autocompleteGlass
- {
- background: rgba(0,0,0,3) !important;
- }
- .ghp-card-title
- {
- color: var(--main-text) !important;
- }
- .ghp-card, .ghp-content, .ghp-iconTextComponent, .ghp-contentFrame, .hcfe
- {
- background-color: var(--second-background) !important;
- border-color: var(--hover-background) !important;
- }
- .ghp-iconTextComponent:hover .ghp-iconTextComponent-label,
- .ghp-iconTextComponent:hover .ghp-separator
- {
- color: var(--main-color) !important;
- border-color: var(--hover-background) !important;
- }
- .ghp-separator
- {
- border-color: var(--hover-background) !important;
- }
- .ghp-iconTextComponent-label, .hcfe
- {
- color: var(--dimmer-text) !important;
- }
- */
- /*Trending page*/
- ytd-destination-button-renderer {
- background-color: var(--hover-background) !important;
- }
-
- #destination-label.ytd-destination-button-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-destination-button-renderer:hover #destination-label.ytd-destination-button-renderer {
- color: var(--main-color) !important;
- }
-
- /*more - shown on low width*/
- ytd-destination-shelf-renderer[is-show-more-visible] #show-more-button.ytd-destination-shelf-renderer,
- #show-more-button.ytd-destination-shelf-renderer {
- background: var(--hover-background) !important;
- }
-
- #show-more-button-icon.ytd-destination-shelf-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-destination-shelf-renderer[is-show-more-visible] #show-more-button.ytd-destination-shelf-renderer:hover #show-more-button-icon.ytd-destination-shelf-renderer {
- color: var(--main-color) !important;
- }
-
- /*Learning*/
- ytd-carousel-header-renderer {
- background: var(--main-background) !important;
- }
-
- /*Music*/
- .flex-container.ytd-compact-station-renderer {
- background-color: var(--second-background) !important;
- }
-
- h3.ytd-compact-station-renderer {
- color: var(--main-text) !important;
- }
-
- .flex-container.ytd-compact-station-renderer:hover h3.ytd-compact-station-renderer {
- color: var(--main-color) !important;
- }
-
- #video-count-text.ytd-compact-station-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Gaming*/
- #live-viewers-count.ytd-game-details-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*History*/
- yt-formatted-string.ytd-sub-feed-option-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #title.ytd-sub-feed-selector-renderer,
- ytd-sub-feed-option-renderer.ytd-sub-feed-selector-renderer {
- border-color: var(--hover-background) !important;
- }
-
- ytd-two-column-browse-results-renderer #secondary.ytd-two-column-browse-results-renderer {
- background-color: var(--second-background) !important;
- }
-
- ytd-two-column-browse-results-renderer #primary ytd-text-header-renderer {
- color: var(--main-text) !important;
- }
-
- /*dialog confirm*/
- yt-confirm-dialog-renderer[dialog][dialog][dialog] {
- background-color: var(--second-background) !important;
- }
-
- #scroller.yt-confirm-dialog-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #cancel-button.yt-confirm-dialog-renderer {
- color: var(--main-text) !important;
- }
-
- .buttons.yt-confirm-dialog-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*Premium*/
- /*Logo icon - Premium*/
- yt-icon.ytd-logo {
- color: var(--main-text);
- }
-
- /*video*/
- #main-title.ytd-unlimited-offer-module-renderer {
- color: var(--main-text) !important;
- }
-
- #sub-title.ytd-unlimited-offer-module-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*popup*/
- .ytd-mealbar-promo-renderer-message-title.ytd-mealbar-promo-renderer {
- color: var(--main-text) !important;
- }
-
- .ytd-mealbar-promo-renderer-message-text.ytd-mealbar-promo-renderer {
- color: var(--dimmer-text) !important;
- }
-
- .button-container.ytd-mealbar-promo-renderer {
- border-color: var(--hover-background) !important;
- }
-
- ytd-grid-video-renderer[is-dismissed] #dismissed {
- border-color: var(--hover-background) !important;
- }
-
- ytd-grid-video-renderer[is-dismissed] #dismissed .ytd-notification-multi-action-renderer {
- color: var(--dimmer-text) !important;
- }
-
- ytd-dismissal-follow-up-renderer[dialog][dialog][dialog] {
- background: var(--main-background) !important;
- }
-
- #content.ytd-dismissal-follow-up-renderer #checkboxLabel.paper-checkbox,
- #content.ytd-dismissal-follow-up-renderer #label.ytd-dismissal-reason-video-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #buttons.ytd-dismissal-follow-up-renderer {
- border-top-color: var(--hover-background) !important;
- }
-
- /*New TOS*/
- yt-alert-with-actions-renderer {
- background-color: var(--hover-background) !important;
- }
-
- #text.yt-alert-with-actions-renderer,
- #alert-message.yt-alert-with-actions-renderer {
- color: var(--main-text) !important;
- }
-
- yt-button-renderer yt-formatted-string.yt-button-renderer,
- #icon.yt-alert-with-actions-renderer {
- color: var(--main-color) !important;
- }
-
- /*actual page for TOS*/
- #yts-article #article-container.ytg-box #summary {
- background-color: var(--hover-background) !important;
- }
-
- .separator,
- .with-divider,
- .header,
- #yts-article #header,
- #yts-nav {
- border-color: var(--hover-background) !important;
- }
-
- #yts-nav .indented .sub-level a,
- #yts-nav .top-level a,
- #yts-article #header {
- color: var(--main-text) !important;
- }
-
- /*Premium page (https://www.youtube.com/premium)*/
- yt-button-renderer#manage-subscription-button yt-formatted-string.yt-button-renderer {
- color: inherit !important;
- }
-
- .yt-unlimited-page-header-renderer a.yt-simple-endpoint.yt-formatted-string {
- color: var(--main-color) !important;
- }
-
- #header.yt-music-pass-small-feature-info-renderer,
- .question.yt-generic-faq-question-renderer,
- .answer-arrow.yt-generic-faq-question-renderer {
- color: var(--main-text) !important;
- }
-
- #description.yt-music-pass-small-feature-info-renderer,
- .container.yt-faq-section-renderer,
- .answer.yt-generic-faq-question-renderer,
- .text.ytd-simple-text-section-renderer {
- color: var(--dimmer-text) !important;
- }
-
- yt-generic-faq-question-renderer .yt-simple-endpoint.style-scope.yt-formatted-string,
- yt-generic-faq-question-renderer a.yt-simple-endpoint.yt-formatted-string:only-of-type,
- .text.ytd-simple-text-section-renderer a.yt-simple-endpoint.yt-formatted-string:only-of-type {
- color: var(--main-color) !important;
- }
-
- /*Paid memberships*/
- paper-card.yt-subscription-product-upsell-offer-renderer {
- background-color: var(--second-background) !important;
- }
-
- #title.yt-subscription-product-upsell-offer-renderer,
- #description.yt-subscription-product-upsell-offer-renderer,
- #additional-info.yt-subscription-product-upsell-offer-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Gaming page (https://www.youtube.com/gaming) and gaming channels*/
- #channel-details.ytd-carousel-header-renderer,
- #channel-header-container.ytd-topic-channel-details-renderer {
- background-color: var(--main-background) !important;
- }
-
- #bg.ytd-interactive-tabbed-header-renderer {
- fill: var(--main-background) !important;
- }
-
- #tabs-inner-container.ytd-interactive-tabbed-header-renderer {
- background-color: transparent !important;
- }
-
- /*Acount page specific*/
- /*Sidebar*/
- #creator-page.account-page,
- ytd-settings-sidebar-renderer {
- background-color: var(--second-background) !important;
- }
-
- .exp-kevlar-settings .account-page #creator-sidebar h3 {
- color: var(--main-text) !important;
- }
-
- .exp-kevlar-settings .account-page #creator-sidebar .creator-sidebar-item a {
- color: var(--dimmer-text) !important;
- }
-
- .exp-kevlar-settings .account-page #creator-sidebar .creator-sidebar-item.selected > a,
- .exp-kevlar-settings .account-page #creator-sidebar .creator-sidebar-item.selected > a:hover,
- .exp-kevlar-settings .account-page #creator-sidebar .creator-sidebar-item:hover a {
- background-color: var(--hover-background) !important;
- color: var(--main-color) !important;
- }
-
- ytd-compact-link-renderer[compact-link-style="compact-link-style-type-settings-sidebar"][active],
- ytd-compact-link-renderer[compact-link-style="compact-link-style-type-settings-sidebar"][active]:hover {
- background-color: var(--hover-background) !important;
- }
-
- /*Burger sidebar*/
- #appbar-guide-menu,
- .guide-flyout {
- background-color: var(--second-background) !important;
- }
-
- #guide-container .guide-item {
- color: var(--main-text) !important;
- }
-
- #guide-container .guide-item:hover {
- background-color: var(--hover-background) !important;
- color: var(--main-color) !important;
- }
-
- /*headers*/
- .exp-invert-logo li.guide-section h3,
- .exp-invert-logo li.guide-section h3 a {
- color: var(--main-color) !important;
- }
-
- .guide-section-separator/*divider*/
- {
- border-color: var(--hover-background) !important;
- }
-
- /*Contents - account*/
- .account-page-header,
- ytd-section-list-renderer[page-subtype="account-settings"] a.yt-simple-endpoint.yt-formatted-string {
- color: var(--main-color) !important;
- }
-
- #account-page-header-title,
- h2.account-section-header {
- color: var(--main-text) !important;
- }
-
- /*title of the page*/
- #name.ytd-page-introduction-renderer,
- #name.ytd-channel-options-renderer,
- ytd-settings-options-renderer .yt-formatted-string:not(a).bold {
- color: var(--main-text) !important;
- }
-
- .exp-kevlar-settings #account-page-header-subtitle,
- .account-info-item .account-info-label,
- .account-section .account-email,
- .account-content,
- .account-section-subtext {
- color: var(--dimmer-text) !important;
- }
-
- /*other text*/
- #text.ytd-page-introduction-renderer,
- /*email*/
- #text.ytd-settings-options-renderer,
- /*descriptions, metadata, below text*/
- #label.ytd-settings-checkbox-renderer,
- #label.ytd-settings-radio-option-renderer,
- /*playback*/
- #text.ytd-connected-app-renderer/*connected accounts*/
- {
- color: var(--dimmer-text) !important;
- }
-
- .yt-horizontal-rule/*divider*/
- {
- border-color: var(--hover-background) !important;
- }
-
- .account-info .account-photo .yt-thumb/*avatar*/
- {
- border-radius: 100%;
- }
-
- .account-content a,
- .account-header a/*various links*/
- {
- color: var(--main-color) !important;
- }
-
- .yt-thumb {
- background-color: var(--hover-background) !important;
- }
-
- /*Notifications*/
- .setting-reminder,
- h3.account-section-header {
- color: var(--main-text) !important;
- }
-
- .yt-uix-form-input-checkbox-container input:checked + .yt-uix-form-input-checkbox-element {
- border-color: #000;
- filter: invert(1);
- }
-
- .desktop-notifications .browser {
- background-color: var(--hover-background) !important;
- color: var(--main-color) !important;
- border-color: var(--hover-background) !important;
- }
-
- .desktop-notifications .browser .yt-uix-button.turn-on,
- .desktop-notifications .browser .yt-uix-button.turn-off,
- .resume-setting-button,
- .undo-setting-button-section,
- .resume-all-settings-button/*turn off*/
- {
- background: var(--main-background) !important;
- border-color: var(--main-background) !important;
- color: var(--main-color) !important;
- }
-
- .yt-uix-form-input-select/*dropdowns*/
- {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- /*checkboxes*/
- tp-yt-paper-toggle-button[checked]:not([disabled]) .toggle-bar.tp-yt-paper-toggle-button {
- background-color: var(--main-color) !important;
- opacity: 1 !important;
- }
-
- tp-yt-paper-toggle-button[checked]:not([disabled]) .toggle-button.tp-yt-paper-toggle-button {
- background-color: var(--main-text) !important;
- }
-
- /*language*/
- ytd-dropdown-renderer[has-background] tp-yt-paper-dropdown-menu-light.ytd-dropdown-renderer {
- background-color: var(--hover-background) !important;
- }
-
- label.label-is-floating.tp-yt-paper-dropdown-menu-light,
- #label.ytd-dropdown-item-renderer {
- color: var(--main-text) !important;
- }
-
- #input.tp-yt-paper-dropdown-menu-light {
- color: var(--dimmer-text) !important;
- }
-
- /*Playback*/
- .yt-help-icon {
- filter: invert(1);
- }
-
- .yt-uix-clickcard-card-content,
- .yt-uix-hovercard-card-content {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- .yt-uix-clickcard-card-border,
- .yt-uix-hovercard-card-border {
- border-color: var(--hover-background) !important;
- }
-
- .yt-uix-clickcard-card-flip .yt-uix-card-body-arrow-horizontal,
- .yt-uix-hovercard-card-flip .yt-uix-card-body-arrow-horizontal {
- border-right-color: var(--hover-background) !important;
- }
-
- .exp-kevlar-settings .account-page .yt-uix-button/*save buttons*/
- {
- background: var(--main-color) !important;
- border-color: var(--main-color) !important;
- color: var(--main-text) !important;
- opacity: .9;
- }
-
- .exp-kevlar-settings .account-page .yt-uix-button:hover {
- opacity: 1 !important;
- }
-
- /*Social*/
- .social-connector {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- /*TV*/
- .howto-circle {
- background-color: var(--hover-background) !important;
- color: var(--main-color) !important;
- }
-
- .howto-text {
- color: var(--dimmer-text) !important;
- }
-
- .remote-icon {
- filter: invert(1) brightness(200%);
- }
-
- h3.pairing-section-header {
- color: var(--main-text)
- }
-
- .yt-uix-form-input-select,
- .yt-uix-form-input-text,
- .yt-uix-form-input-textarea {
- border-color: var(--hover-background) !important;
- }
-
- #account-page-header-avatar.howto-promo-image {
- filter: invert(1) grayscale(1);
- }
-
- /*TV code*/
- .yt-uix-form-input-select,
- .yt-uix-form-input-text,
- .yt-uix-form-input-textarea {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- /*Footer*/
- body #footer-container {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- #footer-main/*divider*/
- {
- border-color: var(--hover-background) !important;
- }
-
- /*links*/
- #footer-links-primary a {
- color: var(--main-text) !important;
- }
-
- #footer-links-secondary a {
- color: var(--dimmer-text) !important;
- }
-
- #footer-links-primary a:hover,
- #footer-links-secondary a:hover {
- color: var(--main-color) !important;
- }
-
- /*buttons*/
- #footer .yt-uix-button-group .yt-uix-button,
- #footer .pickers li,
- #footer .footer-history,
- #footer #google-help {
- background: var(--second-background) !important;
- border-color: var(--second-background) !important;
- color: var(--main-text) !important;
- box-shadow: none !important;
- }
-
- .yt-uix-button-default.yt-uix-button-toggled:hover {
- box-shadow: none !important;
- }
-
- #footer .yt-uix-button-icon-footer-language,
- #footer .yt-uix-button-icon-footer-history,
- #footer .yt-uix-button-icon-questionmark {
- filter: invert(1);
- }
-
- .yt-uix-button-arrow {
- border-top-color: var(--main-text) !important;
- }
-
- #yt-picker-country-footer,
- #yt-picker-language-footer,
- #yt-picker-safetymode-footer {
- background: var(--second-background) !important;
- border-color: var(--second-background) !important;
- color: var(--main-text) !important;
- }
-
- .yt-picker-header,
- #safety-form p.safety-submit/*divider*/
- {
- border-color: var(--hover-background) !important;
- }
-
- .yt-picker-header h3.yt,
- .yt-picker-content strong {
- color: var(--main-text) !important;
- }
-
- #yt-picker-country-footer .yt-default .yt-notes,
- p.yt-notes,
- #safety-mode-description li {
- color: var(--dimmer-text) !important;
- }
-
- #yt-picker-country-footer .yt-picker-content a,
- .yt-picker-content button {
- color: var(--main-color) !important;
- }
-
- #yt-picker-safetymode-footer button/*save*/
- {
- background: var(--main-color) !important;
- border-color: var(--main-color) !important;
- color: var(--main-text) !important;
- opacity: .9;
- }
-
- /*Notification buttom corner - for settings, watch later etc*/
- tp-yt-paper-toast {
- background: var(--hover-background) !important;
- color: var(--main-text) !important;
- box-shadow: var(--shadow) !important;
- }
-
- /*Topic auto-generated by youtube*/
- #auto-generated.ytd-interactive-tabbed-header-renderer,
- #metadata.ytd-interactive-tabbed-header-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Keyboard shortcuts Shift-/ */
- ytd-hotkey-dialog-renderer[dialog][dialog][dialog] {
- background-color: var(--main-background) !important;
- }
-
- ytd-hotkey-dialog-section-option-renderer {
- border-color: var(--hover-background) !important;
- }
-
-
- /*SponsorBlock*/
- /*logo change*/
- #sponsorBlockPopupLogo,
- .sponsorSkipLogo {
- display: block !important;
- -moz-box-sizing: border-box !important;
- box-sizing: border-box !important;
- background: url(https://raw.githubusercontent.com/RaitaroH/YouTube-DeepDark/master/YT_Images/IconSponsorBlocker256px.png) top left no-repeat !important;
- background-size: 100% !important;
- position: relative !important;
- }
-
- #sponsorBlockPopupLogo {
- width: 40px !important;
- height: 40px !important;
- padding-left: 40px !important;
- }
-
- /*for overlays*/
- .sponsorSkipLogo {
- width: 18px !important;
- height: 18px !important;
- padding-left: 18px !important;
- }
-
- .sponsorBlockTooltip {
- background-color: var(--hover-background) !important;
- }
-
- /*Fix like, dislike and share icons and text using wrong color*/
- .yt-spec-button-shape-next__icon,
- .ytd-segmented-like-dislike-button-renderer > yt-button-shape > button > .yt-spec-button-shape-next--button-text-content,
- .ytd-menu-renderer > yt-button-shape > button > .yt-spec-button-shape-next--button-text-content,
- .yt-spec-button-shape-next > span#text {
- color: var(--main-text)
- }
-
- /*Player tooltip background*/
- .ytp-tooltip-text {
- background: var(--hover-background) !important
- }
-}
-
-@-moz-document url-prefix('https://www.youtube.com/redirect') {
- /*Are you sure you want to leave YouTube? redirect*/
- /*seems like youtube will never update this page so, yeah*/
- #invalid-token-redirect-warning-text/*h1*/
- {
- color: var(--main-text) !important;
- }
-
- /*span*/
- #redirect-main-text {
- color: var(--dimmer-text) !important;
- }
-
- #redirect-main-text .bolded {
- color: var(--main-color);
- }
-
- /*search*/
- #masthead-search-terms-border {
- border-color: var(--hover-background) !important;
- background-color: var(--hover-background) !important;
- box-shadow: var(--shadow) !important;
- }
-
- #masthead-search-terms {
- color: var(--main-text);
- }
-
- .search-button {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- /*๐ is missing, nice*/
- .search-button-content {
- background: no-repeat url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNy4zOTE3IDE2LjgwODNMMTIuNzMzMyAxMi4xNUMxMy42MjUgMTEuMTI1IDE0LjE2NjcgOS43OTE2NyAxNC4xNjY3IDguMzMzMzNDMTQuMTY2NyA1LjEwODMzIDExLjU1ODMgMi41IDguMzMzMzMgMi41QzUuMTA4MzMgMi41IDIuNSA1LjEwODMzIDIuNSA4LjMzMzMzQzIuNSAxMS41NTgzIDUuMTA4MzMgMTQuMTY2NyA4LjMzMzMzIDE0LjE2NjdDOS43OTE2NyAxNC4xNjY3IDExLjEyNSAxMy42MjUgMTIuMTUgMTIuNzQxN0wxNi44MDgzIDE3LjRMMTcuMzkxNyAxNi44MDgzWk04LjMzMzMzIDEzLjMzMzNDNS41NzUgMTMuMzMzMyAzLjMzMzMzIDExLjA5MTcgMy4zMzMzMyA4LjMzMzMzQzMuMzMzMzMgNS41NzUgNS41NzUgMy4zMzMzMyA4LjMzMzMzIDMuMzMzMzNDMTEuMDkxNyAzLjMzMzMzIDEzLjMzMzMgNS41NzUgMTMuMzMzMyA4LjMzMzMzQzEzLjMzMzMgMTEuMDkxNyAxMS4wOTE3IDEzLjMzMzMgOC4zMzMzMyAxMy4zMzMzWiIgZmlsbD0iIzAzMDMwMyIvPjwvc3ZnPg==") !important;
- filter: invert(1);
- }
-
- #redirect-backto-safety-button:hover {
- color: var(--main-text) !important;
- }
-
- /*logo icon is also missing, but this __should__ change in the future*/
- .logo {
- background: no-repeat url("https://raw.githubusercontent.com/RaitaroH/YouTube-DeepDark/master/YT_Images/Logo.png") !important;
- background-size: 70% !important;
- padding: 10px;
- width: 120px !important;
- height: 33px !important;
- box-sizing: border-box !important;
- position: relative;
- right: -30px;
- }
-
- #logo-container .content-region {
- color: var(--main-text) !important;
- }
-}
-
-/* Youtube buttons shape */
-.yt-core-attributed-string--white-space-no-wrap {
- color: var(--main-color);
-}
diff --git a/styles/youtube/src/YouTubeCatppuccinMacchiato.user.css b/styles/youtube/src/YouTubeCatppuccinMacchiato.user.css
deleted file mode 100644
index f44b31ba82..0000000000
--- a/styles/youtube/src/YouTubeCatppuccinMacchiato.user.css
+++ /dev/null
@@ -1,4285 +0,0 @@
-/* ==UserStyle==
-@name YouTube Catppuccin-Macchiato
-@namespace github.com/catppuccin/YouTube
-@homepageURL https://github.com/catppuccin/YouTube
-@version 1.3.7
-@updateURL https://github.com/catppuccin/YouTube/raw/main/src/YouTubeCatppuccinMacchiato.user.css
-@description Soothing pastel theme for YouTube
-@author elkrien based on RaitaroH Youtube-DeepDark (github.com/RaitaroH/YouTube-DeepDark)
-@license GNU-V3.0
-
-@preprocessor stylus
-
-@var select stylus-deepdark-style "Preset themes" [
- "Catppuccin-Macchiato-Green",
- "Catppuccin-Macchiato-Flamingo",
- "Catppuccin-Macchiato-Mauve",
- "Catppuccin-Macchiato-Pink",
- "Catppuccin-Macchiato-Lavender",
- "Catppuccin-Macchiato-Red",
- "Catppuccin-Macchiato-Peach",
- "Catppuccin-Macchiato-Yellow",
- "Catppuccin-Macchiato-Teal",
- "Catppuccin-Macchiato-Blue",
- "Catppuccin-Macchiato-Sky",
- "Catppuccin-Macchiato-Maroon",
- "Catppuccin-Macchiato-Sapphire",
- "Catppuccin-Macchiato-Rosewater",
- "Custom"
-]
-
-@var checkbox join-color "Use dark join button" 1
-@var checkbox subscribe-color "Use dark subscribe button" 0
-
-@var text scrollbar_width "Scrollbar width" 6px
-@var color scrollbar_track "Scrollbar background" "rgba(0,0,0, 0)"
-
-@var color mainColor "Custom main color" "#8AADF4"
-@var color mainBackground "Custom main background" "#24273A"
-@var color secondBackground "Custom second background" "#1E2030"
-@var color playerBackground "Custom player background" "#181926"
-@var color hoverBackground "Custom hover background" "#363A4F"
-@var color mainText "Custom main text" "#CAD3F5"
-@var color dimmerText "Custom second text" "#939AB7"
-@var color colorShadow "Custom shadow color" "rgba(56, 60, 74, .3)"
-
-==/UserStyle== */
-@-moz-document regexp('https?:\\/\\/(?!gaming\\.)(?!music\\.)(?!tv\\.)(?!artists\\.)(?!studio\\.).*youtube(?!kids\\.).*\\.com\\/(?!premium|howyoutubeworks).*$') {
-
- /* Author : Theme made by RaitaroH & modified for Catppuccin by elkrien */
- /* Co-authors : https://github.com/MechaLynx https://github.com/MaximeRF */
- /* Home : https://github.com/catppuccin/YouTube */
- /* Licence : GNU General Public License v3.0 */
- /*Main color variables*/
- :root {
- if stylus-deepdark-style=="Catppuccin-Macchiato-Green" {
- --main-color: #A6DA95;
- --main-background: #24273A;
- --second-background: #1E2030;
- --player-background: #181926;
- --hover-background: #363A4F;
- --main-text: #CAD3F5;
- --dimmer-text: #939AB7;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Macchiato-Lavender" {
- --main-color: #B7BDF8;
- --main-background: #24273A;
- --second-background: #1E2030;
- --player-background: #181926;
- --hover-background: #363A4F;
- --main-text: #CAD3F5;
- --dimmer-text: #939AB7;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Macchiato-Flamingo" {
- --main-color: #F0C6C6;
- --main-background: #24273A;
- --second-background: #1E2030;
- --player-background: #181926;
- --hover-background: #363A4F;
- --main-text: #CAD3F5;
- --dimmer-text: #939AB7;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Macchiato-Mauve" {
- --main-color: #C6A0F6;
- --main-background: #24273A;
- --second-background: #1E2030;
- --player-background: #181926;
- --hover-background: #363A4F;
- --main-text: #CAD3F5;
- --dimmer-text: #939AB7;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Macchiato-Pink" {
- --main-color: #F5BDE6;
- --main-background: #24273A;
- --second-background: #1E2030;
- --player-background: #181926;
- --hover-background: #363A4F;
- --main-text: #CAD3F5;
- --dimmer-text: #939AB7;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Macchiato-Red" {
- --main-color: #ED8796;
- --main-background: #24273A;
- --second-background: #1E2030;
- --player-background: #181926;
- --hover-background: #363A4F;
- --main-text: #CAD3F5;
- --dimmer-text: #939AB7;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Macchiato-Peach" {
- --main-color: #F5A97F;
- --main-background: #24273A;
- --second-background: #1E2030;
- --player-background: #181926;
- --hover-background: #363A4F;
- --main-text: #CAD3F5;
- --dimmer-text: #939AB7;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Macchiato-Yellow" {
- --main-color: #EED49F;
- --main-background: #24273A;
- --second-background: #1E2030;
- --player-background: #181926;
- --hover-background: #363A4F;
- --main-text: #CAD3F5;
- --dimmer-text: #939AB7;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Macchiato-Teal" {
- --main-color: #8BD5CA;
- --main-background: #24273A;
- --second-background: #1E2030;
- --player-background: #181926;
- --hover-background: #363A4F;
- --main-text: #CAD3F5;
- --dimmer-text: #939AB7;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Macchiato-Blue" {
- --main-color: #8AADF4;
- --main-background: #24273A;
- --second-background: #1E2030;
- --player-background: #181926;
- --hover-background: #363A4F;
- --main-text: #CAD3F5;
- --dimmer-text: #939AB7;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Macchiato-Sky" {
- --main-color: #91D7E3;
- --main-background: #24273A;
- --second-background: #1E2030;
- --player-background: #181926;
- --hover-background: #363A4F;
- --main-text: #CAD3F5;
- --dimmer-text: #939AB7;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Macchiato-Maroon" {
- --main-color: #EE99A0;
- --main-background: #24273A;
- --second-background: #1E2030;
- --player-background: #181926;
- --hover-background: #363A4F;
- --main-text: #CAD3F5;
- --dimmer-text: #939AB7;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Macchiato-Sapphire" {
- --main-color: #7DC4E4;
- --main-background: #24273A;
- --second-background: #1E2030;
- --player-background: #181926;
- --hover-background: #363A4F;
- --main-text: #CAD3F5;
- --dimmer-text: #939AB7;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Catppuccin-Macchiato-Rosewater" {
- --main-color: #F4DBD6;
- --main-background: #24273A;
- --second-background: #1E2030;
- --player-background: #181926;
- --hover-background: #363A4F;
- --main-text: #CAD3F5;
- --dimmer-text: #939AB7;
- --shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
- }
-
- else if stylus-deepdark-style=="Custom" {
- --main-color: mainColor;
- --main-background: mainBackground;
- --second-background: secondBackground;
- --player-background: playerBackground;
- --hover-background: hoverBackground;
- --main-text: mainText;
- --dimmer-text: dimmerText;
- --shadow: 0 1px 0.5px colorShadow;
- }
- }
-
- /*Error page*/
- #error-page {
- background-color: var(--main-background) !important;
- color: var(--main-text) !important;
- }
-
- * {
- scrollbar-color: var(--main-color) scrollbar_track !important;
- scrollbar-width: thin !important;
- --yt-spec-text-primary: var(--main-text) !important;
- --yt-spec-text-secondary: var(--dimmer-text) !important;
- --paper-spinner-color: var(--dimmer-text) !important;
-
- --paper-input-container-color: var(--dimmer-text) !important;
-
- --paper-radio-button-unchecked-color: var(--dimmer-text) !important;
- --paper-radio-button-unchecked-background-color: transparent !important;
- --paper-radio-button-checked-color: var(--main-color) !important;
- --paper-radio-button-checked-ink-color: var(--main-color) !important;
- --paper-radio-button-unchecked-ink-color: var(--main-color) !important;
-
- --paper-checkbox-unchecked-color: var(--dimmer-text) !important;
- --paper-checkbox-checked-color: var(--main-color) !important;
- --paper-checkbox-checkmark-color: none !important;
- --paper-checkbox-checked-ink-color: var(--main-color) !important;
- --paper-checkbox-unchecked-ink-color: var(--main-color) !important;
- --yt-spec-call-to-action: var(--main-color) !important;
- --yt-spec-suggested-action: var(--hover-background) !important;
- --yt-spec-outline: var(--hover-background) !important;
- --yt-spec-brand-button-background: var(--main-color) !important;
- /*in incognito this may be used as subscribe button but is inconsistent .yt-spec-button-shape-next--brand.yt-spec-button-shape-next--filled*/
- --yt-formatted-string-bold-color: var(--dimmer-text) !important;
- /*this affects number of views*/
- }
-
- /*Scrollbar fix for chrome*/
- *:not([hide-scrollbar]) ::-webkit-scrollbar-thumb {
- background: var(--main-color) !important;
- }
-
- *:not([hide-scrollbar]) ::-webkit-scrollbar {
- width: scrollbar_width !important;
- }
-
- /*Scrollbar fix for firefox*/
- ::-webkit-scrollbar-track {
- background: scrollbar_track !important;
- }
-
- ::-webkit-scrollbar-thumb {
- background: var(--main-color) !important;
- }
-
- /*Background for the entire page*/
- html,
- ytd-browse,
- ytd-watch,
- ytd-search,
- ytd-app,
- ytd-app[is-watch-page],
- [class*="ytd-watch-flexy"]:not(#engagement-panel-scrim),
- .style-scope.ytd-page-manager.hide-skeleton,
- .account-container {
- background-color: var(--main-background) !important;
- }
-
- /*Border for the sidemenu*/
- #guide-content.ytd-app {
- border-right: 1px solid var(--yt-border-color) !important;
- }
-
- /*Changed text highlight*/
- ::selection {
- background: var(--main-color) !important;
- color: var(--hover-background) !important;
- }
-
- ::-moz-selection {
- background: var(--main-color) !important;
- color: var(--hover-background) !important;
- }
-
- /*Outline for links*/
- a {
- outline-color: var(--main-color) !important;
- }
-
- a:hover {
- color: var(--main-color) !important;
- fill: var(--main-color) !important;
- }
-
- /*Outline for comments*/
- #content-text.ytd-comment-renderer {
- outline: none !important;
- }
-
- /*Placeholder image on pages that need an account - such as Subscriptions*/
- ytd-background-promo-renderer .image.ytd-background-promo-renderer,
- ytd-message-renderer yt-icon.ytd-message-renderer {
- color: var(--main-text) !important;
- }
-
- /*Nav bar*/
- ytd-masthead,
- #yt-masthead-container,
- #masthead-positioner-height-offset/*account page*/
- {
- background-color: var(--second-background) !important;
- border-bottom-color: var(--hover-background) !important;
- }
-
- yt-icon-button svg {
- fill: var(--dimmer-text) !important;
- }
-
- yt-icon-button:hover svg {
- fill: var(--main-color) !important;
- }
-
- #logo-icon-container.ytd-topbar-logo-renderer #youtube-paths.ytd-topbar-logo-renderer path.ytd-topbar-logo-renderer {
- fill: var(--main-text) !important;
- }
-
- /*acount settings page*/
- /*logo*/
- .exp-invert-logo.inverted-hdpi #header::before,
- .exp-invert-logo.inverted-hdpi .ypc-join-family-header .logo,
- .exp-invert-logo.inverted-hdpi #footer-logo .footer-logo-icon,
- .exp-invert-logo.inverted-hdpi #yt-masthead #logo-container .logo,
- .exp-invert-logo.inverted-hdpi #masthead #logo-container,
- .exp-invert-logo.inverted-hdpi .admin-masthead-logo a,
- .exp-invert-logo.inverted-hdpi #yt-sidebar-styleguide-logo #logo {
- filter: invert(1) grayscale(1);
- }
-
- /*buttons*/
- #yt-masthead-creation-button {
- filter: brightness(220%);
- }
-
- #yt-masthead-notifications .yt-uix-button-icon-bell {
- filter: invert(1) brightness(720%);
- }
-
- #sections.ytd-multi-page-menu-renderer > .ytd-multi-page-menu-renderer:not(:last-child) {
- border-color: var(--hover-background) !important;
- }
-
- /*Chat in the header*/
- ytd-conversation-switcher-item-renderer {
- border-color: var(--hover-background) !important;
- }
-
- #last-post.ytd-conversation-switcher-item-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*invite friends*/
- #bar.ytd-copy-connection-invite-url-renderer {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- #icon.ytd-copy-connection-invite-url-renderer {
- color: var(--main-text) !important;
- }
-
- /*chat popup*/
- ytd-conversation-section-renderer {
- background: var(--second-background) !important;
- }
-
- #title-bar.ytd-conversation-section-renderer {
- border-color: var(--hover-background) !important;
- }
-
- ytd-conversation-text-item-renderer[justification-style="JUSTIFICATION_START"] #post-text.ytd-conversation-text-item-renderer,
- ytd-conversation-link-item-renderer[justification-style="JUSTIFICATION_START"] #link.ytd-conversation-link-item-renderer,
- #bar.ytd-conversation-link-item-renderer,
- #thumbnail.ytd-inline-playback-renderer,
- #video-data.ytd-inline-playback-renderer {
- border-color: var(--hover-background) !important;
- background: var(--hover-background) !important;
- }
-
- #post-text.ytd-conversation-text-item-renderer,
- textarea.iron-autogrow-textarea {
- color: var(--main-text) !important;
- }
-
- #displayed-text.ytd-conversation-link-item-renderer,
- #icon.ytd-conversation-link-item-renderer {
- color: var(--main-color) !important;
- }
-
- #metadata.ytd-conversation-metadata-item-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Backgrounds*/
- #like-bar.ytd-sentiment-bar-renderer,
- #progress.ytd-thumbnail-overlay-resume-playback-renderer,
- #selectionBar.paper-tabs {
- background-color: var(--main-color) !important;
- }
-
- /*Sidebar*/
- #guide-content.ytd-app,
- #contentContainer.app-drawer,
- #guide-wrapper.ytd-app {
- background: var(--second-background) !important;
- }
-
- #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer,
- #guide-section-title.ytd-guide-section-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-guide-entry-renderer:hover #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer,
- ytd-guide-entry-renderer:hover svg {
- color: var(--main-color) !important;
- fill: var(--main-color) !important;
- }
-
- ytd-guide-entry-renderer[active] {
- background-color: var(--hover-background) !important;
- }
-
- #sections.ytd-guide-renderer > .ytd-guide-renderer:not(:last-child),
- #guide-links-primary.ytd-guide-renderer,
- #guide-content.ytd-app {
- border-color: var(--hover-background) !important;
- }
-
- #guide-links-primary.ytd-guide-renderer > a,
- #guide-links-secondary.ytd-guide-renderer > a,
- #footer.ytd-guide-renderer > #copyright,
- yt-formatted-string.ytd-guide-signin-promo-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #guide-links-primary.ytd-guide-renderer > a:hover,
- #guide-links-secondary.ytd-guide-renderer > a:hover {
- color: var(--main-color) !important;
- }
-
- /*Compact sidebar fix*/
- ytd-mini-guide-renderer,
- a.ytd-mini-guide-entry-renderer,
- a.ytd-mini-guide-entry-renderer:hover,
- a.ytd-mini-guide-entry-renderer:focus {
- background-color: var(--second-background) !important;
- }
-
- ytd-mini-guide-entry-renderer .guide-icon.ytd-mini-guide-entry-renderer,
- a.ytd-mini-guide-entry-renderer .guide-icon,
- a.ytd-mini-guide-entry-renderer.title.ytd-mini-guide-entry-renderer,
- ytd-mini-guide-entry-renderer .title.ytd-mini-guide-entry-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-mini-guide-entry-renderer[active] .guide-icon.ytd-mini-guide-entry-renderer,
- a.ytd-mini-guide-entry-renderer:hover .guide-icon,
- a.ytd-mini-guide-entry-renderer:hover .title.ytd-mini-guide-entry-renderer,
- ytd-mini-guide-entry-renderer[active] .title.ytd-mini-guide-entry-renderer {
- color: var(--main-color) !important;
- }
-
- #newness-dot.ytd-guide-entry-renderer {
- background-color: var(--main-color) !important;
- }
-
- /*Latest YouTube posts*/
- ytd-post-renderer[surface_="backstage-surface-type-home"],
- ytd-post-renderer[uses-compact-lockup] {
- background-color: var(--second-background) !important;
- }
-
- ytd-post-renderer[surface_="backstage-surface-type-home"] #home-content-text.ytd-post-renderer,
- ytd-post-renderer[surface_="backstage-surface-type-home"][attachment="poll"] #vote-count-text.ytd-post-renderer,
- ytd-post-renderer[uses-compact-lockup] #home-content-text.ytd-post-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-post-renderer[surface_="backstage-surface-type-home"] #author-text.yt-simple-endpoint.ytd-post-renderer {
- color: var(--main-color) !important;
- }
-
- ytd-post-renderer[uses-compact-lockup][attachment="poll"] #vote-count-text.ytd-post-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*vote now button*/
- ytd-post-renderer[uses-compact-lockup] ytd-button-renderer.style-suggestive[is-paper-button] #button.ytd-button-renderer {
- background-color: var(--main-color) !important;
- }
-
- /*Main page video hover preview*/
- #video-preview-container.ytd-video-preview {
- background: var(--second-background) !important;
- }
-
- /*Feed filter*/
- #home-chips/*skeleton*/
- ,
- #chips-wrapper.ytd-feed-filter-chip-bar-renderer {
- background-color: var(--main-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- yt-chip-cloud-chip-renderer:not([selected]) {
- background-color: var(--main-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- yt-chip-cloud-chip-renderer[selected],
- yt-chip-cloud-chip-renderer:hover {
- background-color: var(--hover-background) !important;
- }
-
- yt-chip-cloud-renderer {
- background: transparent !important;
- }
-
- #text.yt-chip-cloud-chip-renderer {
- color: var(--main-text) !important;
- }
-
- #scroll-container.ytd-feed-filter-chip-bar-renderer::after,
- #scroll-container.ytd-feed-filter-chip-bar-renderer::before {
- background: transparent !important;
- }
-
- #left-arrow-button.ytd-feed-filter-chip-bar-renderer,
- #right-arrow-button.ytd-feed-filter-chip-bar-renderer,
- #left-arrow.yt-chip-cloud-renderer,
- #right-arrow.yt-chip-cloud-renderer,
- #left-arrow-button.yt-chip-cloud-renderer,
- #right-arrow-button.yt-chip-cloud-renderer {
- background: var(--main-background) !important;
- }
-
- #left-arrow.ytd-feed-filter-chip-bar-renderer::after,
- #right-arrow.ytd-feed-filter-chip-bar-renderer::before,
- yt-chip-cloud-renderer #right-arrow.yt-chip-cloud-renderer::before,
- yt-chip-cloud-renderer #left-arrow.yt-chip-cloud-renderer::after {
- display: none;
- }
-
- /*new to you filter on video*/
- #content-wrapper.ytd-feed-nudge-renderer {
- background-color: var(--second-background) !important;
- }
-
- yt-chip-cloud-chip-renderer[chip-style="STYLE_REFRESH_TO_NOVEL_CHIP"][selected] {
- background-image: none !important;
- }
-
- /*Covid19 big posts aka rich shelves*/
- /*also other borders*/
- ytd-rich-shelf-renderer,
- #show-more-button.ytd-rich-shelf-renderer,
- ytd-rich-shelf-renderer[is-show-more-hidden] #dismissible.ytd-rich-shelf-renderer,
- #contents.ytd-rich-shelf-renderer,
- ytd-compact-promoted-item-renderer[view-style="COMPACT_PROMOTED_ITEM_STYLE_RICH_GRID"] #dismissible.ytd-compact-promoted-item-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /* poll results */
- .text-area.ytd-backstage-poll-renderer,
- paper-item.ytd-backstage-poll-renderer[selected] .progress-bar.ytd-backstage-poll-renderer,
- .progress-bar.ytd-backstage-poll-renderer {
- background-color: var(--main-color) !important;
- }
-
- ytd-backstage-poll-renderer:not([is-image-poll]) tp-yt-paper-item.ytd-backstage-poll-renderer .choice-info.ytd-backstage-poll-renderer {
- border-color: transparent !important;
- }
-
- #title.ytd-grid-channel-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Channel page*/
- /*header*/
- #channel-header.ytd-c4-tabbed-header-renderer,
- #tabs-inner-container.ytd-c4-tabbed-header-renderer {
- background: var(--hover-background) !important;
- }
-
- #channel-title.ytd-c4-tabbed-header-renderer {
- color: var(--main-text) !important;
- }
-
- #subscriber-count.ytd-c4-tabbed-header-renderer {
- color: var(--dimmer-text) !important;
- }
-
- .tab-content.paper-tab,
- .tab-content.tp-yt-paper-tab {
- color: var(--main-text) !important;
- }
-
- paper-tab:hover .tab-content.paper-tab,
- tp-yt-paper-tab:hover > .tab-content.tp-yt-paper-tab {
- color: var(--main-color) !important;
- }
-
- tp-yt-paper-tabs {
- --paper-tabs-selection-bar-color: var(--main-color) !important;
- }
-
- /*search*/
- .input-content.paper-input-container label,
- .input-content.paper-input-container .paper-input-label,
- #subtitle,
- .style-scope.tp-yt-paper-input {
- color: var(--dimmer-text) !important;
- }
-
- /*arrow button*/
- iron-icon {
- fill: var(--main-text) !important;
- }
-
- iron-icon:hover {
- fill: var(--main-color) !important;
- }
-
- /*side channels*/
- #title:not([class*="ytd-labs"]):not([class*="upsell-offer"]) {
- color: var(--main-text) !important;
- }
-
- .title {
- color: var(--main-text) !important;
- }
-
- .title:hover {
- color: var(--main-color) !important;
- }
-
- #contents > .ytd-browse-secondary-contents-renderer:not(:first-child) {
- border-color: var(--hover-background) !important;
- }
-
- /*videos - uploads*/
- #label-text.yt-dropdown-menu {
- color: var(--main-text) !important;
- }
-
- paper-menu-button.yt-dropdown-menu:hover #label-text.yt-dropdown-menu,
- paper-menu-button.yt-dropdown-menu:hover #label-icon.yt-dropdown-menu svg,
- paper-menu-button.yt-dropdown-menu:hover #icon-label.yt-dropdown-menu {
- color: var(--main-color) !important;
- fill: var(--main-color) !important;
- }
-
- /*community*/
- #message.ytd-message-renderer,
- #content-text.ytd-backstage-post-renderer,
- #repost-content-text.ytd-shared-post-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #author-text,
- .more-button,
- .less-button,
- .align-by-text.ytd-backstage-comments-renderer,
- #toggle.ytd-grid-renderer,
- #repost-author-text.yt-simple-endpoint.ytd-shared-post-renderer {
- color: var(--main-text) !important;
- }
-
- .more-button:hover,
- .less-button:hover,
- .align-by-text.ytd-backstage-comments-renderer:hover,
- #toggle.ytd-grid-renderer:hover,
- #author-text.yt-simple-endpoint.ytd-backstage-post-renderer:hover,
- #repost-author-text.yt-simple-endpoint.ytd-shared-post-renderer:hover {
- color: var(--main-color) !important;
- }
-
- #content-attachment ytd-video-renderer {
- background: var(--hover-background) !important;
- }
-
- #poll-votes.ytd-backstage-poll-renderer {
- background: transparent !important;
- }
-
- .vote-percentage.ytd-backstage-poll-renderer,
- .choice-text.ytd-backstage-poll-renderer,
- #poll-choice-text.ytd-commentbox,
- yt-icon.ytd-backstage-poll-renderer {
- color: var(--main-text) !important;
- }
-
- paper-item[selected].ytd-backstage-poll-renderer #progress-bar.ytd-backstage-poll-renderer {
- background: var(--main-color) !important;
- }
-
- /*about*/
- .subheadline,
- #right-column .subheadline {
- color: var(--main-text) !important;
- }
-
- #description:not([class*="yt-music"]),
- #bio,
- #right-column > yt-formatted-string {
- color: var(--dimmer-text) !important;
- }
-
- #right-column > yt-formatted-string,
- #description-container.ytd-channel-about-metadata-renderer,
- #bio-container.ytd-channel-about-metadata-renderer,
- #photos-container.ytd-channel-about-metadata-renderer,
- #details-container.ytd-channel-about-metadata-renderer,
- #links-container.ytd-channel-about-metadata-renderer {
- border-color: var(--hover-background) !important;
- }
-
- #link-list-container a {
- color: var(--main-color) !important;
- }
-
- #link-list-container:hover a {
- filter: brightness(110%);
- }
-
- /*private message*/
- ytd-form-popup-renderer[dialog][dialog][dialog] {
- background: var(--main-background) !important;
- }
-
- #buttons.ytd-form-popup-renderer {
- border-color: var(--hover-background) !important;
- }
-
- ytd-toggle-menu-service-item-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-toggle-menu-service-item-renderer:hover .style-scope.ytd-toggle-menu-service-item-renderer {
- color: var(--main-color) !important;
- }
-
- ytd-toggle-menu-service-item-renderer:hover {
- background: var(--hover-background) !important;
- }
-
- /*Video page*/
- /*title*/
- .title.ytd-video-primary-info-renderer yt-formatted-string.ytd-video-primary-info-renderer {
- color: var(--main-text) !important;
- }
-
- /*views*/
- span.yt-view-count-renderer,
- span.ytd-video-view-count-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*published date*/
- #date.ytd-video-primary-info-renderer {
- color: var(--dimmer-text) !important;
- }
-
- ytd-video-primary-info-renderer {
- border-color: var(--hover-background) !important;
- }
-
- .content-text.ytd-metadata-with-image-row-renderer {
- color: var(--main-text) !important;
- }
-
- /*Share*/
- paper-dialog,
- tp-yt-paper-dialog {
- background: var(--main-background) !important;
- }
-
- #share-url {
- color: var(--main-text) !important;
- }
-
- #copy-button:hover #text {
- color: var(--main-color) !important;
- }
-
- #bar.yt-copy-link-renderer {
- background-color: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- ytd-third-party-network-section-renderer ytd-copy-link-renderer.ytd-third-party-network-section-renderer,
- yt-start-at-renderer.yt-third-party-network-section-renderer {
- border-color: var(--hover-background) !important;
- }
-
- yt-formatted-string.yt-start-at-renderer,
- #text.ytd-sender-id-section-renderer {
- color: var(--main-text) !important;
- }
-
- /*share embed*/
- #embed-panel.yt-sharing-embed-renderer {
- background: var(--second-background) !important;
- }
-
- #close-panel-icon.yt-sharing-embed-renderer {
- color: var(--main-text) !important;
- }
-
- #close-panel-icon.yt-sharing-embed-renderer:hover {
- color: var(--main-color) !important;
- }
-
- #title-bar.yt-sharing-embed-renderer,
- #additional-info.yt-sharing-embed-renderer,
- #action-buttons.yt-sharing-embed-renderer {
- border-color: var(--hover-background) !important;
- }
-
- #privacy-mode-info.yt-sharing-embed-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*search for people*/
- #to-field-header.ytd-contact-search-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #name.ytd-suggested-contact-renderer {
- color: var(--main-text) !important;
- }
-
- /*Make a clip*/
- #container.yt-clip-creation-renderer {
- background-color: transparent !important;
- }
-
- input.yt-clip-creation-scrubber-renderer/*time*/
- {
- border-color: var(--dimmer-text) !important;
- }
-
- #handles.yt-clip-creation-scrubber-view/*preview*/
- {
- border-color: var(--main-color) !important;
- }
-
- .handle.yt-clip-creation-scrubber-view/*preview*/
- {
- background-color: var(--main-color) !important;
- }
-
- /*buttons*/
- #footer.yt-clip-creation-renderer {
- background-color: var(--second-background) !important;
- }
-
- yt-clip-section-renderer yt-button-renderer.style-primary[is-paper-button],
- yt-clip-creation-renderer yt-button-renderer.style-primary[is-paper-button],
- yt-clip-section-footer-renderer yt-button-renderer.style-primary[is-paper-button] {
- background-color: transparent !important;
- }
-
- yt-button-renderer.style-primary[disabled][is-paper-button] yt-formatted-string.yt-button-renderer {
- color: var(--dimmer-text) !important;
- }
-
- yt-button-renderer.yt-clip-creation-renderer .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled,
- ytd-button-renderer.ytd-clip-section-footer-renderer .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
- background-color: var(--main-color) !important;
- }
-
- /*Join this channel panel > Join button,
- Settings > Advanced settings > Copy button*/
- yt-button-renderer.ytd-sponsorships-tier-renderer .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled,
- yt-button-renderer.yt-copy-link-renderer .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
- background-color: var(--main-color) !important;
- }
-
- /*Playlist creation*/
- #subtext.yt-live-chat-message-renderer,
- #label.yt-live-chat-text-input-field-renderer,
- .input-content.paper-input-container input,
- .input-content.paper-input-container textarea,
- .input-content.paper-input-container iron-autogrow-textarea,
- .input-content.paper-input-container .paper-input-input {
- color: var(--dimmer-text) !important;
- }
-
- .add-on-content.is-highlighted.paper-input-container *,
- paper-input-char-counter {
- color: var(--dimmer-text) !important;
- }
-
- /*Video cards*/
- /*ttile*/
- ytd-grid-video-renderer.use-ellipsis #details.ytd-grid-video-renderer a.ytd-grid-video-renderer,
- ytd-compact-video-renderer.use-ellipsis #video-title.ytd-compact-video-renderer,
- #video-title.ytd-video-renderer,
- h3.ytd-playlist-renderer,
- #video-title.ytd-child-video-renderer,
- #length.ytd-child-video-renderer,
- #video-title,
- #unplayableText,
- #length,
- #details {
- color: var(--main-text) !important;
- }
-
- #items.yt-horizontal-list-renderer > .yt-horizontal-list-renderer:hover a.ytd-grid-video-renderer,
- ytd-compact-video-renderer:hover #video-title.ytd-compact-video-renderer,
- ytd-video-renderer:hover #video-title.ytd-video-renderer,
- ytd-playlist-renderer:hover h3.ytd-playlist-renderer,
- #content.ytd-playlist-video-renderer:hover #video-title,
- a.yt-simple-endpoint.ytd-playlist-panel-video-renderer:hover #video-title,
- a.yt-simple-endpoint.ytd-playlist-panel-video-renderer:hover #unplayableText,
- .style-scope.ytd-grid-renderer.use-ellipsis:hover #video-title,
- #video-title:hover,
- ytd-grid-video-renderer:hover #video-title.yt-simple-endpoint.ytd-grid-video-renderer {
- color: var(--main-color) !important;
- }
-
- /*author*/
- yt-formatted-string[ellipsis-truncate] a.yt-formatted-string:last-child,
- #byline.ytd-video-meta-block,
- #channel-title.ytd-channel-renderer span.ytd-channel-renderer,
- #text.ytd-channel-name {
- color: var(--main-color) !important;
- }
-
- /*metadata*/
- #metadata-line.ytd-grid-video-renderer,
- #metadata-line.ytd-video-meta-block span.ytd-video-meta-block,
- #metadata.ytd-channel-renderer,
- #description.ytd-channel-renderer,
- #thumbnail-attribution.ytd-grid-channel-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*2022 Nov like button*/
- /*not liked yet*/
- yt-animated-icon[animated-icon-type="LIKE"] > ytd-lottie-player > lottie-component > svg > g:nth-child(2) > g:nth-child(2) > g:nth-child(2) > path:nth-child(1),
- yt-animated-icon[animated-icon-type="LIKE"] > ytd-lottie-player > lottie-component > svg > g:nth-child(2) > g:nth-child(2) > g:nth-child(4) > path:nth-child(1) {
- stroke: var(--main-text) !important;
- }
-
- /*liked*/
- yt-animated-icon[animated-icon-type="LIKE"] > ytd-lottie-player > lottie-component > svg > g:nth-child(2) > g:nth-child(2) > g:nth-child(1) > path:nth-child(1),
- yt-animated-icon[animated-icon-type="LIKE"] > ytd-lottie-player > lottie-component > svg > g:nth-child(2) > g:nth-child(2) > g:nth-child(3) > path:nth-child(1) {
- fill: var(--main-color) !important;
- }
-
- yt-animated-icon[animated-icon-type="LIKE"] > ytd-lottie-player > lottie-component > svg > g:nth-child(2) > g:nth-child(2) > g:nth-child(1) > path:nth-child(2),
- yt-animated-icon[animated-icon-type="LIKE"] > ytd-lottie-player > lottie-component > svg > g:nth-child(2) > g:nth-child(2) > g:nth-child(3) > path:nth-child(2) {
- stroke: var(--main-color) !important
- }
-
- /*on shorts - so here is filled by default, thus above I am using main-color instead to keep it consistent*/
- .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled > div > yt-icon > svg > g > path {
- fill: var(--main-color) !important;
- }
-
- /*description and other metadata*/
- ytd-watch-metadata[modern-metapanel] #description.ytd-watch-metadata {
- background: var(--second-background) !important;
- /*--yt-spec-button-chip-background-hover*/
- }
-
- ytd-watch-metadata[clickable-description][description-collapsed] #description.ytd-watch-metadata:hover {
- background: var(--hover-background) !important;
- /*--yt-spec-badge-chip-background*/
- }
-
- ytd-watch-metadata[modern-metapanel] #description.ytd-watch-metadata .yt-simple-endpoint.style-scope.yt-formatted-string {
- color: var(--main-color) !important;
- }
-
- /*show more / less*/
- #expand.ytd-text-inline-expander:hover,
- #collapse.ytd-text-inline-expander:hover {
- color: var(--main-color) !important;
- }
-
- /*Recommandation page*/
- /*author*/
- #title.ytd-shelf-renderer {
- color: var(--main-color) !important;
- }
-
- #title-annotation.ytd-shelf-renderer {
- color: var(--dimmer-text) !important;
- }
-
- a.yt-simple-endpoint.yt-formatted-string:only-of-type:hover {
- color: var(--main-color) !important;
- }
-
- a.yt-simple-endpoint.yt-formatted-string:only-of-type {
- color: var(--main-text) !important;
- }
-
- /*Borders*/
- #contents.ytd-section-list-renderer > .ytd-section-list-renderer:not(:last-child):not(ytd-page-introduction-renderer) {
- border-color: var(--hover-background) !important;
- }
-
- /*Next and prev buttons*/
- .arrow.yt-horizontal-list-renderer,
- #scroll-button-forward,
- .arrow.ytd-horizontal-card-list-renderer,
- .ytd-horizontal-card-list-renderer[arrow],
- .scroll-button.yt-third-party-share-target-section-renderer/*share link*/
- {
- background-color: var(--hover-background) !important;
- }
-
- /*For the outline around the channel name*/
- .style-scope.ytd-comment-renderer.creator {
- background-color: var(--main-color) !important;
- }
-
- .style-scope.ytd-comment-renderer.creator:hover {
- background-color: var(--hover-background) !important;
- }
-
- #name.ytd-author-comment-badge-renderer {
- color: var(--main-text) !important;
- }
-
- #name:hover {
- color: var(--main-color) !important;
- }
-
- /*Accounts*/
- yt-formatted-string.ytd-account-item-section-header-renderer a {
- color: var(--dimmer-text) !important;
- }
-
- .style-scope.ytd-account-item-section-renderer:hover #channel-title.ytd-account-item-renderer {
- color: var(--main-color) !important;
- }
-
- app-drawer.ytd-app:not([persistent]) #header.ytd-app {
- border-color: var(--main-color) !important;
- }
-
- /*How is youtube today*/
- ytd-single-option-survey-renderer[dialog][dialog][dialog],
- ytd-single-option-survey-renderer,
- ytd-survey-follow-up-renderer[dialog][dialog][dialog],
- ytd-survey-follow-up-renderer,
- ytd-checkbox-survey-renderer[dialog][dialog][dialog]/*TODO: forgot to test if the [dialog] is even needed*/
- {
- background-color: var(--hover-background) !important;
- box-shadow: var(--shadow) !important;
- }
-
- #header.ytd-single-option-survey-renderer,
- #header.ytd-survey-follow-up-renderer,
- #header.ytd-checkbox-survey-renderer {
- color: var(--main-color) !important;
- }
-
- ytd-single-option-survey-option-renderer,
- #checkboxLabel.paper-checkbox {
- color: var(--main-text) !important;
- }
-
- ytd-single-option-survey-option-renderer:hover {
- background-color: var(--hover-background) !important;
- }
-
- /*rate a video to improve youtube*/
- #star-survey.ytd-inline-survey-renderer {
- background-color: var(--second-background) !important;
- }
-
- #inline-survey-compact-video-renderer.ytd-inline-survey-renderer {
- background-color: var(--hover-background) !important;
- }
-
- ytd-primetime-promo-renderer.ytd-rich-section-renderer,
- ytd-inline-survey-renderer.ytd-rich-section-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*not sure tell us why followup*/
- #title.ytd-inline-survey-renderer,
- #follow-up-title.ytd-inline-survey-renderer,
- #selected-response-text.ytd-rating-survey-renderer {
- color: var(--main-color) !important;
- }
-
- /*background and close button*/
- ytd-inline-survey-renderer[expanded] #dismissable.ytd-inline-survey-renderer,
- #dismiss-button.ytd-inline-survey-renderer {
- background-color: var(--second-background) !important;
- }
-
- paper-checkbox.ytd-checkbox-survey-option-renderer {
- background-color: var(--hover-background) !important;
- }
-
- /*thanks*/
- #dismissed.ytd-inline-survey-renderer ytd-message-renderer.ytd-inline-survey-renderer {
- background-color: var(--hover-background) !important;
- }
-
- /*info warning - covid19*/
- ytd-clarification-renderer {
- background-color: var(--hover-background) !important;
- }
-
- ytd-clarification-renderer[has-action-button] .content.ytd-clarification-renderer,
- ytd-clarification-renderer[background-style="info"] {
- border-color: var(--hover-background) !important;
- }
-
- .content-title.ytd-clarification-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-clarification-renderer[clarify-style="medium"] .description.ytd-clarification-renderer {
- color: var(--dimmer-text) !important;
- }
-
- .source.ytd-clarification-renderer {
- color: var(--main-color) !important;
- }
-
- ytd-clarification-renderer yt-button-renderer.style-suggestive[is-paper-button] paper-button.yt-button-renderer {
- border-color: var(--main-color) !important;
- }
-
- /*Change subtitles settings tooltip*/
- .ytp-promotooltip-container {
- background-color: var(--hover-background) !important;
- box-shadow: var(--shadow) !important;
- color: var(--main-text) !important;
- }
-
- .ytp-promotooltip-pointer {
- border-color: var(--hover-background) !important;
- }
-
- /*You are not logged in tooltip*/
- #tooltip.tp-yt-paper-tooltip,
- yt-tooltip-renderer {
- background-color: var(--hover-background) !important;
- box-shadow: var(--shadow) !important;
- color: var(--main-text) !important;
- }
-
- yt-tooltip-renderer::before {
- border-color: transparent transparent var(--hover-background) transparent !important;
- }
-
- /*Join button tooltip*/
- yt-bubble-hint-renderer[style_="BUBBLE_HINT_STYLE_BLUE_TOOLTIP"] {
- background-color: var(--second-background) !important;
- box-shadow: var(--shadow) !important;
- }
-
- yt-bubble-hint-renderer[style_="BUBBLE_HINT_STYLE_BLUE_TOOLTIP"] #text.yt-bubble-hint-renderer:not(:empty),
- yt-bubble-hint-renderer[style_="BUBBLE_HINT_STYLE_BLUE_TOOLTIP"] #details-text.yt-bubble-hint-renderer {
- background-color: var(--second-background) !important;
- }
-
- yt-bubble-hint-renderer[position-type="OPEN_POPUP_POSITION_LEFT"][style_="BUBBLE_HINT_STYLE_BLUE_TOOLTIP"]::before {
- border-color: transparent transparent transparent var(--second-background) !important;
- }
-
- /*window*/
- ytd-sponsorships-offer-renderer[dialog][dialog][dialog] {
- background-color: var(--main-background) !important;
- }
-
- #background-image-layer.ytd-sponsorships-offer-renderer {
- background-image: unset !important;
- background-color: var(--hover-background) !important;
- }
-
- /*title*/
- #top-bar.ytd-sponsorships-offer-renderer {
- color: var(--main-text) !important;
- }
-
- /*price*/
- #above-purchase-button-text.ytd-sponsorships-tier-renderer {
- color: var(--main-color) !important;
- }
-
- /*fine print*/
- .disclaimer.ytd-sponsorships-tier-renderer {
- color: var(--main-text) !important;
- }
-
- /*Super Thanks donations*/
- ytd-pdg-buy-flow-renderer {
- background-color: var(--main-background) !important;
- }
-
- /*remove white image in the header*/
- yt-pdg-buy-flow-header-renderer {
- background: transparent !important;
- }
-
- #container.ytd-pdg-comment-preview-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*bonus*/
- #title-background.ytd-pdg-comment-preview-renderer {
- background-color: var(--hover-background) !important;
- }
-
- /*Progress bar*/
- #progress {
- background-color: var(--main-color) !important;
- border-color: var(--main-color) !important;
- }
-
- yt-page-navigation-progress {
- background-color: transparent !important;
- }
-
- /*Button tooltips*/
- #tooltip.paper-tooltip {
- background-color: var(--hover-background) !important;
- color: var(--main-color) !important;
- }
-
- /*Active grid icon*/
- button.ytd-button-renderer[is="paper-icon-button-light"][disabled] {
- color: rgb(255, 255, 255) !important;
- }
-
- /*2022 Nov changes*/
- /*subscribe button*/
- .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled,
- .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
- tp-yt-paper-button.ytd-subscribe-button-renderer {
- color: var(--second-background) !important;
- }
-
- tp-yt-paper-button.ytd-subscribe-button-renderer[subscribed] {
- background-color: var(--main-color);
- }
-
- /*NOTE: this affects other material buttons - I would say desired effect*/
- .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled,
- .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled:hover,
- /*on shorts*/
- .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal,
- .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal:hover,
- /*on shorts*/
- .ytp-sb-subscribe,
- a.ytp-sb-subscribe/*in cards... why yt why*/
- {
- background-color: var(--second-background) !important;
- border-color: var(--second-background) !important;
- box-shadow: var(--shadow) !important;
- color: var(--main-text) !important;
- }
-
- /*unsubscribe confirm dialog*/
- .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text {
- color: var(--main-color) !important;
- }
-
- .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text:hover {
- background-color: var(--yt-spec-10-percent-layer) !important;
- }
-
- /*join button*/
- .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal[aria-label="Join this channel"],
- .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled/*in window*/
- {
- background-color: var(--second-background) !important;
- border-color: var(--second-background) !important;
- }
-
- /*comment button*/
- ytd-button-renderer#submit-button.ytd-commentbox .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
- background-color: var(--main-color) !important;
- color: var(--main-text) !important;
- }
-
- /*download panel > get trial button*/
- /*share panel > copy button*/
- ytd-offline-promo-renderer.ytd-popup-container yt-button-renderer#action-button .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled,
- yt-third-party-network-section-renderer.ytd-unified-share-panel-renderer yt-button-renderer#copy-button .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
- background-color: var(--main-color) !important;
- color: var(--main-text) !important;
- }
-
- /*Toast notification*/
- yt-notification-action-renderer yt-button-renderer.yt-notification-action-renderer .yt-spec-button-shape-next--call-to-action-inverse.yt-spec-button-shape-next--text {
- color: var(--main-color) !important;
- }
-
- /*Toast notification hover*/
- yt-notification-action-renderer yt-button-renderer.yt-notification-action-renderer .yt-spec-button-shape-next--call-to-action-inverse.yt-spec-button-shape-next--text:hover {
- background-color: var(--main-background) !important;
- }
-
- if join-color/*overwriting the above*/
- {
- .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal[aria-label="Join this channel"] {
- background-color: var(--main-color) !important;
- border-color: var(--main-color) !important;
- }
- }
-
- if subscribe-color/*overwriting the above*/
- {
- .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled,
- .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled,
- .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled:hover,
- /*on shorts*/
- .ytp-sb-subscribe,
- a.ytp-sb-subscribe/*in cards*/
- {
- background-color: var(--main-color) !important;
- border-color: var(--main-color) !important;
- }
- }
-
- ytd-button-renderer.style-primary[is-paper-button] {
- background-color: transparent !important;
- }
-
- /*Sponsor button*/
- ytd-modal-with-title-and-button-renderer {
- background: var(--second-background) !important;
- }
-
- #content.ytd-modal-with-title-and-button-renderer {
- color: var(--dimmer-text) !important;
- }
-
- .buttons.ytd-modal-with-title-and-button-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*sponsor popup*/
- #sponsor-button.ytd-membership-offer-renderer ytd-button-renderer.ytd-membership-offer-renderer {
- background-color: var(--main-color) !important;
- }
-
- #sponsor-button.ytd-membership-offer-renderer ytd-button-renderer.ytd-membership-offer-renderer:hover {
- filter: brightness(110%) !important;
- }
-
- #header.ytd-membership-offer-renderer {
- background: var(--main-background) !important;
- }
-
- ytd-perks-section-renderer,
- ytd-membership-offer-renderer[dialog][dialog][dialog],
- paper-dialog-scrollable.can-scroll:not(.scrolled-to-bottom):not(:last-child)::after,
- paper-dialog-scrollable.is-scrolled:not(:first-child)::before {
- background: var(--second-background) !important;
- }
-
- .extra-content.ytd-offer-perk-extra {
- border-color: var(--hover-background) !important;
- background: var(--hover-background) !important;
- color: var(--dimmer-text) !important;
- }
-
- .footer.ytd-membership-offer-renderer {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- ytd-membership-offer-renderer * {
- border-color: var(--hover-background) !important;
- }
-
- .price.ytd-membership-offer-renderer {
- color: var(--main-color) !important;
- }
-
- .style-title.ytd-offer-text-item,
- .style-subtitle.ytd-offer-text-item,
- .payment-clause.ytd-membership-offer-renderer {
- color: var(--main-text) !important;
- }
-
- .perk-item-title.ytd-perk-item-renderer,
- .perk-item-public-description.ytd-perk-item-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Edit button in channel page*/
- #edit-buttons.ytd-c4-tabbed-header-renderer ytd-button-renderer.ytd-c4-tabbed-header-renderer {
- background-color: transparent !important;
- }
-
- /*Toggle button to play next*/
- paper-toggle-button[checked]:not([disabled]) .toggle-bar.paper-toggle-button {
- background-color: var(--main-color) !important;
- opacity: 0.9 !important;
- }
-
- paper-toggle-button[checked]:not([disabled]) .toggle-button.paper-toggle-button {
- --paper-toggle-button-checked-button-color: rgb(255, 255, 255) !important;
- }
-
- /*Hover for toggle button*/
- .toggle-button.paper-toggle-button:hover,
- paper-toggle-button[checked]:not([disabled]) .toggle-button.paper-toggle-button:hover {
- background-color: var(--main-color) !important;
- }
-
- yt-bubble-hint-renderer {
- background: var(--hover-background) !important;
- }
-
- yt-bubble-hint-renderer::after {
- border-top-color: var(--second-background) !important;
- }
-
- #text.yt-bubble-hint-renderer {
- background: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- #details-text.yt-bubble-hint-renderer {
- background: var(--hover-background) !important;
- color: var(--dimmer-text) !important;
- }
-
- .buttons.yt-bubble-hint-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*Filter active*/
- paper-button.ytd-toggle-button-renderer {
- color: rgba(255, 255, 255, 0.5) !important;
- }
-
- /*Badges*/
- .badge-style-type-simple.ytd-badge-supported-renderer,
- .badge-style-type-disabled.ytd-badge-supported-renderer,
- yt-icon.ytd-badge-supported-renderer {
- background: transparent !important;
- color: var(--main-color) !important;
- padding-left: 0px !important;
- opacity: .7 !important;
- }
-
- .badge-style-type-simple-strikethrough.ytd-badge-supported-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Trending badge*/
- .badge-style-type-featured.ytd-badge-supported-renderer {
- background: var(--main-color) !important;
- }
-
- /*Author verified badge in comments*/
- ytd-author-comment-badge-renderer:not(.creator) #icon.ytd-author-comment-badge-renderer {
- fill: var(--main-color) !important;
- }
-
- /*Live now badge*/
- .badge-style-type-live-now.ytd-badge-supported-renderer,
- .badge-style-type-live-now-alternate.ytd-badge-supported-renderer {
- color: var(--main-color) !important;
- background: transparent !important;
- border-color: var(--main-color) !important;
- }
-
- /*Premium*/
- .badge-style-type-red.ytd-badge-supported-renderer {
- color: #DA4453 !important;
- background: transparent !important;
- border-color: var(--main-color) !important;
- }
-
- /*Series name*/
- .badge-style-type-collection.ytd-badge-supported-renderer {
- color: var(--main-color) !important;
- }
-
- .yt-simple-endpoint.style-scope.yt-formatted-string {
- color: var(--dimmer-text) !important;
- }
-
- /*video hashtags & links in settings page*/
- #super-title .yt-simple-endpoint.style-scope.yt-formatted-string,
- ytd-section-list-renderer[page-subtype="WEB_PAGE_TYPE_SETTINGS"] .yt-simple-endpoint.style-scope.yt-formatted-string {
- color: var(--main-color) !important;
- }
-
- /*panel links*/
- tp-yt-paper-dialog.ytd-popup-container .yt-simple-endpoint.style-scope.yt-formatted-string {
- color: var(--main-color) !important;
- }
-
- /*Dropdown*/
- .dropdown-content.style-scope.ytd-popup-container > *,
- tp-yt-paper-listbox,
- ytd-menu-popup-renderer {
- background: var(--second-background) !important;
- color: var(--main-text) !important;
- }
-
- ytd-menu-service-item-renderer:hover,
- a.ytd-menu-navigation-item-renderer:hover,
- tp-yt-paper-listbox.yt-dropdown-menu .iron-selected.yt-dropdown-menu,
- tp-yt-paper-listbox.yt-dropdown-menu tp-yt-paper-item.yt-dropdown-menu:hover,
- ytd-menu-service-item-renderer[is-selected] {
- background: var(--hover-background) !important;
- }
-
- yt-formatted-string.ytd-menu-service-item-renderer,
- yt-formatted-string.ytd-menu-navigation-item-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-menu-service-item-renderer:hover yt-formatted-string.ytd-menu-service-item-renderer,
- a.ytd-menu-navigation-item-renderer:hover yt-formatted-string.ytd-menu-navigation-item-renderer,
- tp-yt-paper-listbox a.yt-simple-endpoint.yt-dropdown-menu:hover .item.yt-dropdown-menu {
- color: var(--main-color) !important;
- }
-
- #owner-name.ytd-video-owner-renderer a {
- color: var(--main-color) !important;
- opacity: .9;
- }
-
- /*share*/
- #header.ytd-add-to-playlist-renderer {
- color: var(--main-text) !important;
- }
-
- #label.ytd-playlist-add-to-option-renderer,
- paper-item.ytd-compact-link-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #header.ytd-add-to-playlist-renderer,
- #playlists.ytd-add-to-playlist-renderer {
- border-color: var(--hover-background) !important;
- }
-
- paper-item.ytd-compact-link-renderer:hover #label.ytd-compact-link-renderer,
- paper-item.ytd-compact-link-renderer:hover yt-icon.ytd-compact-link-renderer {
- color: var(--main-color) !important;
- fill: var(--main-color) !important;
- }
-
- ytd-playlist-add-to-option-renderer paper-checkbox:hover #label.ytd-playlist-add-to-option-renderer,
- ytd-playlist-add-to-option-renderer paper-checkbox[checked] #label.ytd-playlist-add-to-option-renderer,
- yt-icon.ytd-playlist-add-to-option-renderer {
- color: var(--main-color) !important;
- }
-
- /*Avatars and thumbnails opacity */
- img.yt-img-shadow {
- opacity: 0.9 !important;
- }
-
- img.yt-img-shadow:hover {
- opacity: 1 !important;
- }
-
- /*Very specific hover for thumbnails*/
- #dismissable.ytd-compact-video-renderer:hover img.yt-img-shadow,
- #items.yt-horizontal-list-renderer > .yt-horizontal-list-renderer:hover img.yt-img-shadow,
- #items.ytd-grid-renderer > ytd-grid-video-renderer.ytd-grid-renderer:hover img.yt-img-shadow,
- ytd-video-renderer.ytd-item-section-renderer:hover img.yt-img-shadow,
- .style-scope.ytd-channel-featured-content-renderer:hover img.yt-img-shadow,
- #grid-container.ytd-expanded-shelf-contents-renderer > .ytd-expanded-shelf-contents-renderer:hover img.yt-img-shadow,
- ytd-playlist-video-renderer:hover img.yt-img-shadow,
- iron-list:not([grid]) #items.iron-list > *:hover img.yt-img-shadow {
- opacity: 1 !important;
- }
-
- /*Video section*/
- /*2022 Nov*/
- /*this seems to be only in dark mode? */
- #cinematics.ytd-watch-flexy {
- display: none !important;
- }
-
- /*Video title hover in html5 video*/
- .html5-video-player a:hover {
- color: var(--main-text) !important;
- text-shadow: none !important;
- }
-
- /* Code takken from https://userstyles.org/styles/95280 */
- /* scrubber button */
- .html5-scrubber-button:hover,
- .ytp-chrome-controls .ytp-button[aria-pressed]::after,
- .ytp-scrubber-button:hover,
- .html5-video-player:not(.ytp-color-party) .ytp-swatch-background-color,
- .ytp-swatch-background-color-secondary {
- background: var(--main-color) !important;
- }
-
- /* progress bar */
- .html5-video-player:not(.ytp-color-party) .html5-play-progress,
- .html5-video-player:not(.ytp-color-party) .ytp-play-progress {
- background: var(--main-color) !important;
- }
-
- .ytp-volume-slider-track,
- .ytp-volume-slider-handle:before {
- background: var(--main-color) !important;
- z-index: -117;
- }
-
- .ytp-settings-button.ytp-hd-quality-badge::after,
- .ytp-settings-button.ytp-4k-quality-badge::after,
- .ytp-settings-button.ytp-5k-quality-badge::after,
- .ytp-settings-button.ytp-8k-quality-badge::after,
- .ytp-settings-button.ytp-3d-badge::after {
- background-color: var(--main-color) !important;
- }
-
- .ytp-swatch-color {
- color: var(--main-color) !important;
- }
-
- .ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox {
- background-color: var(--main-color) !important;
- }
-
- .ytp-chrome-controls .ytp-button.ytp-youtube-button:hover:not([aria-disabled="true"]):not([disabled]) .ytp-svg-fill-logo-tube-lozenge {
- fill: var(--main-color) !important;
- }
-
- .ytp-cued-thumbnail-overlay:hover .ytp-large-play-button-bg,
- .ytp-large-play-button.ytp-touch-device .ytp-large-play-button-bg {
- fill: var(--main-color) !important;
- }
-
- .ytp-large-play-button.ytp-button.ytp-red2:hover,
- .ytp-cued-thumbnail-overlay:hover .ytp-large-play-button.ytp-button.ytp-red2 {
- /*background-image: url(https://github.com/RaitaroH/YouTube-DeepDark/raw/master/YT_Images/large_play_button_hover_ringo-vfl7vEehF.png) !important;*/
- background-image: url(https://s.ytimg.com/yts/img/large_play_button_ringo-vfljWXIdx.png) !important;
- filter: invert(100%) brightness(300%);
- }
-
- .resume-playback-progress-bar {
- background: var(--main-color) !important;
- }
-
- /*Added because of this: https://forum.userstyles.org/discussion/53368/solved-fix-this-annoying-youtube-tab-select-bug-thats-been-there-forever#latest*/
- .ytp-keyboard-focus .ytp-progress-bar:focus {
- box-shadow: none !important;
- }
-
- /*Video menu - might have issues with lighter colors*/
- .ytp-popup {
- background: var(--second-background) !important;
- opacity: .9 !important;
- }
-
- .ytp-menuitem:hover:not([aria-disabled="true"]) {
- background-color: var(--hover-background) !important;
- }
-
- /*Text*/
- .iv-branding .iv-branding-context-name,
- .ytp-menuitem-label,
- .ytp-menuitem-label-count,
- .ytp-menuitem-content,
- .ytp-menu-label-secondary,
- .ytp-panel-header {
- color: var(--main-text) !important;
- text-shadow: none !important;
- }
-
- /*Keyboard focus*/
- .ytp-probably-keyboard-focus .ytp-menuitem:focus .ytp-menuitem-content,
- .ytp-probably-keyboard-focus .ytp-menuitem:focus .ytp-menuitem-label {
- box-shadow: inset -2px -2px 0 var(--main-color), inset 0 2px 0 var(--main-color) !important;
- }
-
- .ytp-probably-keyboard-focus .ytp-button:focus {
- box-shadow: inset 0 0 0 2px var(--main-color) !important;
- }
-
- .ytp-probably-keyboard-focus .ytp-progress-bar:focus {
- box-shadow: 0 0 0 2px var(--main-color) !important;
- }
-
- /*Miniplayer*/
- #info-bar.ytd-miniplayer .metadata.ytd-miniplayer,
- #info-bar.ytd-miniplayer {
- background-color: var(--main-background) !important;
- }
-
- #info-bar.ytd-miniplayer .channel.ytd-miniplayer {
- color: var(--main-color) !important;
- }
-
- .ytd-miniplayer .ytp-button:not([aria-disabled="true"]):not([disabled]):not([aria-hidden="true"]):hover svg path {
- fill: var(--main-color) !important;
- }
-
- /*added to queue*/
- ytd-miniplayer-toast[opened] {
- background-color: var(--second-background) !important;
- }
-
- #label.ytd-miniplayer-toast {
- color: var(--main-color) !important;
- }
-
- /*queue / playlist panel closed*/
- ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .title.ytd-playlist-panel-renderer,
- ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] #next-video-title.ytd-playlist-panel-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .byline-title.ytd-playlist-panel-renderer,
- ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .publisher.ytd-playlist-panel-renderer,
- ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .publisher.ytd-playlist-panel-renderer:not([is-empty]).ytd-playlist-panel-renderer + .index-message-wrapper.ytd-playlist-panel-renderer::before,
- ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .index-message-wrapper.ytd-playlist-panel-renderer {
- color: var(--main-color) !important;
- }
-
- /*Watch later svg*/
- .style-scope.ytd-thumbnail-overlay-toggle-button-renderer:hover {
- fill: var(--main-color) !important;
- }
-
- ytd-thumbnail-overlay-toggle-button-renderer:focus yt-icon.ytd-thumbnail-overlay-toggle-button-renderer {
- outline-color: var(--main-color) !important;
- }
-
- /*This channel is watched by others*/
- ytd-thumbnail-overlay-endorsement-renderer {
- background-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- /*Popup for when you hover over the channel avatar in the video*/
- .iv-branding .branding-context-container-inner {
- background-color: var(--main-background) !important;
- }
-
- /*Changing icon for unavailable video*/
- #img.ytd-player-error-message-renderer {
- display: block !important;
- -moz-box-sizing: border-box !important;
- box-sizing: border-box !important;
- background: url(https://github.com/RaitaroH/YouTube-DeepDark/raw/master/YT_Images/404.png) no-repeat !important;
- width: 140px !important;
- height: 100px !important;
- padding-left: 140px !important;
- position: relative !important;
- }
-
- /*Changing icon for unavailable page (404)*/
- #error-page-hh-illustration {
- display: block !important;
- -moz-box-sizing: border-box !important;
- box-sizing: border-box !important;
- background: url(https://github.com/RaitaroH/YouTube-DeepDark/raw/master/YT_Images/404.png) no-repeat !important;
- width: 140px !important;
- height: 100px !important;
- padding-left: 140px !important;
- right: -175px !important;
- position: relative !important;
- }
-
- /*Some spacing for the logo*/
- #yt-masthead #logo-container {
- margin-right: 20px !important;
- }
-
- /*consent page (cookie page)*/
- /*cookies consent dialog*/
- ytd-consent-bump-v2-lightbox ytd-button-renderer .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
- color: var(--main-color) !important;
- }
-
- ytd-consent-bump-v2-lightbox[darker-dark-theme] .loading-overlay.ytd-consent-bump-v2-lightbox {
- background: var(--hover-background) !important;
- }
-
- /*Border color for terms and conditions*/
- ytd-consent-bump-renderer {
- border-bottom: 1px solid var(--main-color) !important;
- }
-
- /*New logo*/
- #logo-icon-container.ytd-topbar-logo-renderer svg g path[fill*="#FF0000"],
- ytd-topbar-logo-renderer.style-scope a svg > g > g:nth-child(1) > path:nth-child(1),
- /*cookie version*/
- svg.ytd-consent-bump-v2-lightbox > g:nth-child(1) > g:nth-child(1) > path:nth-child(1) {
- /*fill: var(--hover-background) !important;*/
- }
-
- ytd-topbar-logo-renderer.style-scope a svg > g > g:nth-child(1) > path:nth-child(2),
- /*cookie version*/
- g.ytd-consent-bump-v2-lightbox:nth-child(2) > g:nth-child(1) > * {
- fill: var(--main-text) !important;
- }
-
- ytd-topbar-logo-renderer.style-scope a svg > g > g:nth-child(2) > g,
- #country-code.ytd-topbar-logo-renderer {
- color: var(--main-text) !important;
- }
-
- /*Logo hover*/
- #logo-icon:hover {
- --yt-swatch-logo-override: var(--main-color) !important;
- }
-
- /*Rewind logo*/
- #animated-yoodle {
- filter: invert(90%) grayscale(1);
- }
-
- /*Playlist page*/
- /*sidebar*/
- ytd-playlist-sidebar-renderer {
- background-color: var(--hover-background) !important;
- }
-
- #stats.ytd-playlist-sidebar-primary-info-renderer,
- #description.ytd-playlist-sidebar-primary-info-renderer .bold.yt-formatted-string,
- #owner-sub-count.ytd-video-owner-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #items.ytd-playlist-sidebar-renderer > .ytd-playlist-sidebar-renderer:not(:last-child) {
- border-color: var(--hover-background) !important;
- }
-
- #primary.ytd-two-column-browse-results-renderer {
- background-color: var(--main-background) !important;
- }
-
- ytd-button-renderer[is-paper-button] yt-icon.ytd-button-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #content.ytd-playlist-video-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*buttons*/
- ytd-playlist-sidebar-renderer ytd-toggle-button-renderer.style-suggestive[is-paper-button],
- ytd-playlist-sidebar-renderer paper-button.ytd-toggle-button-renderer {
- background-color: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- a.yt-simple-endpoint.ytd-button-renderer:hover *,
- ytd-playlist-sidebar-renderer ytd-button-renderer #button.ytd-button-renderer:hover,
- ytd-playlist-sidebar-renderer ytd-button-renderer #button.ytd-button-renderer:hover > yt-formatted-string.ytd-button-renderer {
- color: var(--main-color) !important;
- }
-
- /*playlist page*/
- ytd-browse[page-subtype="playlist"] ytd-two-column-browse-results-renderer.ytd-browse {
- background-color: var(--main-background) !important;
- }
-
- .index-message.ytd-playlist-panel-renderer,
- .light-text.ytd-playlist-segment-renderer,
- #contributor.ytd-playlist-video-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #title-container.ytd-playlist-segment-renderer {
- border-color: var(--hover-background) !important;
- }
-
- #title-container.ytd-playlist-segment-renderer:hover #title.ytd-playlist-segment-renderer {
- color: var(--main-color) !important;
- }
-
- /*Playlist changes*/
- ytd-playlist-panel-video-renderer:hover {
- background-color: var(--hover-background) !important;
- }
-
- ytd-playlist-panel-video-renderer[selected] #index.ytd-playlist-panel-video-renderer,
- #byline.ytd-playlist-panel-video-renderer,
- .ytp-video-menu-item[aria-checked="true"] .ytp-video-menu-item-now-playing,
- .ytp-video-menu-item-author {
- color: var(--main-color) !important;
- }
-
- ytd-playlist-video-renderer:hover,
- ytd-playlist-video-renderer:hover:not(.dragging) {
- background-color: var(--second-background) !important;
- }
-
- ytd-playlist-panel-video-renderer[selected][use-color-palette],
- ytd-playlist-panel-video-renderer[selected][use-color-palette]:hover:not(.dragging) {
- background-color: var(--hover-background) !important;
- }
-
- .header.ytd-playlist-panel-renderer,
- .playlist-items.ytd-playlist-panel-renderer,
- #header.ytd-engagement-panel-title-header-renderer,
- #content.ytd-engagement-panel-section-list-renderer,
- ytd-transcript-footer-renderer,
- ytd-transcript-segment-list-renderer {
- background-color: var(--second-background) !important;
- }
-
- .cue.ytd-transcript-body-renderer,
- .cue-group-start-offset.ytd-transcript-body-renderer {
- color: var(--dimmer-text) !important;
- }
-
- .cue-group.active.ytd-transcript-body-renderer {
- border-left-color: var(--main-color) !important;
- background-color: var(--hover-background) !important;
- }
-
- .cue-group.active.ytd-transcript-body-renderer .cue-group-start-offset.ytd-transcript-body-renderer,
- .cue.ytd-transcript-body-renderer.active {
- color: var(--main-text) !important;
- }
-
- .cue-group.ytd-transcript-body-renderer:hover .cue-group-start-offset.ytd-transcript-body-renderer,
- .cue-group.ytd-transcript-body-renderer:hover .cue.ytd-transcript-body-renderer {
- color: var(--main-color) !important;
- }
-
- .cue.ytd-transcript-body-renderer:hover,
- ytd-transcript-body-renderer:not([refresh]) .cue.active.ytd-transcript-body-renderer {
- background-color: transparent !important;
- color: var(--main-color) !important
- }
-
- .segment-timestamp.ytd-transcript-segment-renderer {
- background-color: var(--hover-background) !important;
- color: var(--main-color) !important
- }
-
- /*search transcript*/
- ytd-transcript-search-panel-renderer,
- ytd-transcript-search-box-renderer {
- background-color: var(--second-background) !important;
- }
-
- .input-container.ytd-transcript-search-box-renderer {
- background-color: var(--hover-background) !important;
- }
-
- /*magnifing glass icon*/
- .icon.ytd-transcript-search-box-renderer {
- --iron-icon-fill-color: var(--dimmer-text) !important;
- --iron-icon-stroke-color: var(--dimmer-text) !important;
- }
-
- #transcript-search-box-input.ytd-transcript-search-box-renderer {
- color: var(--main-text) !important;
- caret-color: var(--main-color) !important;
- }
-
- .ytp-video-menu-item[aria-checked="true"] .ytp-video-menu-item-thumbnail {
- border-color: var(--main-color) !important;
- }
-
- #index.ytd-playlist-video-renderer,
- #index.ytd-playlist-panel-video-renderer,
- .badge-style-type-medium-grey.ytd-badge-supported-renderer/*unlisted*/
- {
- color: var(--dimmer-text) !important;
- }
-
- #container.ytd-playlist-panel-renderer {
- border-color: var(--second-background) !important;
- }
-
- /*Playlist creation*/
- #create-playlist-form .input-content.paper-input-container label {
- color: var(--main-text) !important;
- }
-
- #create-playlist-form input.style-scope.paper-input::placeholder {
- color: var(--dimmer-text) !important;
- }
-
- #create-playlist-form .underline.is-highlighted.paper-input-container .focused-line.paper-input-container {
- border-bottom-color: var(--main-text) !important;
- }
-
- #create-playlist-form #label.ytd-privacy-dropdown-item-renderer {
- color: var(--main-text) !important;
- }
-
- #create-playlist-form ytd-privacy-dropdown-item-renderer.iron-selected {
- background-color: var(--hover-background) !important;
- }
-
- /*Chapters*/
- /*title*/
- h4.ytd-macro-markers-list-item-renderer {
- color: var(--main-text) !important;
- }
-
- /*timestamp*/
- #time.ytd-macro-markers-list-item-renderer {
- color: var(--main-color) !important;
- background-color: transparent !important;
- padding: 0px !important;
- }
-
- /*show current chapter*/
- #sync-button.ytd-macro-markers-list-renderer {
- background-color: var(--main-background) !important;
- color: var(--main-text) !important;
- }
-
- #sync-button.ytd-macro-markers-list-renderer:hover {
- color: var(--main-color) !important;
- }
-
- /*active indicators*/
- ytd-macro-markers-list-item-renderer[active] #thumbnail.ytd-macro-markers-list-item-renderer {
- outline-color: var(--main-color) !important;
- }
-
- #active-indicator.ytd-macro-markers-list-item-renderer {
- background-color: var(--main-color) !important;
- }
-
- /*hover for item*/
- ytd-macro-markers-list-item-renderer:hover,
- ytd-macro-markers-list-item-renderer[active] {
- background-color: var(--hover-background) !important;
- }
-
- ytd-macro-markers-list-item-renderer:hover {
- box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
- }
-
- ytd-macro-markers-list-item-renderer:hover h4.ytd-macro-markers-list-item-renderer {
- color: var(--main-color) !important;
- }
-
- /*chapter images in description*/
- ytd-macro-markers-list-item-renderer[active][layout="MACRO_MARKERS_LIST_ITEM_RENDERER_LAYOUT_VERTICAL"] {
- border-color: var(--main-color) !important;
- }
-
- ytd-horizontal-card-list-renderer.ytd-structured-description-content-renderer:not(:first-child),
- ytd-metadata-row-container-renderer.ytd-structured-description-content-renderer:not(:first-child),
- ytd-structured-description-content-renderer[inline-structured-description] ytd-horizontal-card-list-renderer.ytd-structured-description-content-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*chapter times in search description*/
- .metadata-snippet-container-one-line.ytd-video-renderer #time.ytd-video-renderer {
- color: var(--main-color) !important;
- background: var(--second-background) !important;
- }
-
- /*chapter metadata in search results*/
- ytd-expandable-metadata-renderer {
- /*this is used on hover, might as well*/
- background-color: var(--yt-spec-badge-chip-background) !important;
- }
-
- /*expanded chapters in search results*/
- ytd-macro-markers-list-item-renderer[layout="MACRO_MARKERS_LIST_ITEM_RENDERER_LAYOUT_VERTICAL"] {
- border-color: var(--second-background) !important;
- }
-
- /*Search bar*/
- ytd-searchbox[mode="legacy"] #container.ytd-searchbox,
- ytd-searchbox[mode="material-centered"] #container.ytd-searchbox,
- ytd-searchbox[mode="legacy"] #container.ytd-searchbox,
- ytd-searchbox[mode="legacy-centered"] #container.ytd-searchbox,
- #container.ytd-searchbox,
- #masthead-search-terms/*account settings page*/
- {
- background: var(--main-background) !important;
- border-color: var(--main-background) !important;
- box-shadow: none !important;
- }
-
- ytd-searchbox[mode="legacy"] #container.ytd-searchbox:hover,
- ytd-searchbox[mode=legacy][has-focus] #container.ytd-searchbox,
- ytd-searchbox[mode="material-left"] #container.ytd-searchbox,
- ytd-searchbox.style-scope[has-focus=""] #container.ytd-searchbox,
- ytd-searchbox[mode="material-centered"]:hover #container.ytd-searchbox,
- #masthead-search-terms.masthead-search-terms-border/*error page*/
- {
- border: 1px solid var(--main-color) !important;
- box-shadow: none !important;
- }
-
- ytd-searchbox[mode="legacy"] #container.ytd-searchbox input.ytd-searchbox,
- #container.ytd-searchbox > input,
- ytd-searchbox input,
- #masthead-search-terms.masthead-search-terms-border input/*error page*/
- {
- color: var(--main-text) !important;
- }
-
- /*Right search icon ๐ */
- #search-icon-legacy.ytd-searchbox,
- #masthead-search .search-btn-component,
- #masthead-search .search-btn-component .start/*account*/
- {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- #search-icon-legacy.ytd-searchbox:hover yt-icon.ytd-searchbox {
- color: var(--main-color) !important;
- }
-
- #masthead-search .search-btn-component .yt-uix-button-content/*account*/
- {
- filter: invert(1);
- }
-
- /*left ๐ icon - shown on focus*/
- #search-icon.ytd-searchbox {
- color: var(--main-text) !important;
- }
-
- #search-icon.ytd-searchbox:hover,
- #search-icon.ytd-searchbox:hover {
- color: var(--main-color) !important;
- }
-
- /*results ๐ icon*/
- .sbqs_c::before {
- filter: invert(1);
- }
-
- /*Results backgrounds*/
- .sbsb_a,
- .sbdd_b {
- background: var(--second-background) !important;
- border: none !important;
- }
-
- /*Text color*/
- .gsfs {
- color: var(--dimmer-text) !important;
- }
-
- /*Hover and keyboard select background*/
- .sbsb_c.gsfs:hover,
- .sbsb_d {
- background-color: var(--hover-background) !important;
- }
-
- .sbfl_b {
- background-color: var(--second-background) !important;
- }
-
- .sbfl_b:hover {
- background-color: var(--hover-background) !important;
- color: var(--main-color) !important;
- }
-
- .sbpqs_a {
- color: var(--main-color) !important;
- }
-
- /*Keyboard select text color and hover text color*/
- .sbsb_c:hover .sbqs_c,
- .sbsb_c.gsfs.sbsb_d .sbqs_c {
- color: var(--main-color) !important;
- }
-
- /*Keyboard icon in the search bar*/
- #gs_ok50 {
- filter: invert(100%);
- }
-
- /*Microphone search*/
- ytd-masthead #voice-search-button.ytd-masthead {
- background-color: var(--hover-background) !important;
- }
-
- ytd-voice-search-dialog-renderer[dialog] {
- background-color: var(--second-background) !important;
- }
-
- #header-text.ytd-voice-search-dialog-renderer,
- #microphone-label.ytd-voice-search-dialog-renderer,
- #microphone.ytd-voice-search-dialog-renderer[state="try-again"] #microphone-circle.ytd-voice-search-dialog-renderer yt-icon.ytd-voice-search-dialog-renderer {
- color: var(--main-text) !important;
- }
-
- /*Search results correction*/
- .style-scope.yt-search-query-correction {
- color: var(--main-text) !important;
- }
-
- .style-scope.yt-search-query-correction .italic.yt-formatted-string,
- .style-scope.yt-search-query-correction:hover {
- color: var(--main-color) !important;
- }
-
- /*Similar results*/
- #title.ytd-exploratory-results-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*search results filter border*/
- #filter-menu.ytd-search-sub-menu-renderer {
- border-color: var(--hover-background) !important;
- }
-
- #watch-card-header.ytd-generic-watch-card,
- #img-endpoint.ytd-watch-card-collage-renderer #overlay-button.ytd-watch-card-collage-renderer {
- background: var(--main-color) !important;
- color: var(--main-text) !important;
- }
-
- paper-tab,
- paper-tab.iron-selected.ytd-generic-watch-card {
- color: var(--main-color) !important;
- }
-
- paper-item:hover {
- background-color: var(--second-background) !important;
- }
-
- #img-endpoint.ytd-watch-card-collage-renderer #overlay-button.ytd-watch-card-collage-renderer {
- opacity: .9;
- }
-
- #img-endpoint.ytd-watch-card-collage-renderer #overlay-button.ytd-watch-card-collage-renderer:hover {
- opacity: 1 !important;
- }
-
- /*album*/
- #watch-card-subtitle.ytd-watch-card-rich-header-renderer {
- color: var(--main-text) !important;
- }
-
- .duration.ytd-watch-card-compact-video-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Buttom border for different fields*/
- .unfocused-line.paper-input-container {
- background-color: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- .focused-line.paper-input-container {
- background-color: var(--main-color) !important;
- border-color: var(--main-color) !important;
- }
-
- /*Search page*/
- #result-count.ytd-search-sub-menu-renderer {
- color: var(--dimmer-text) !important;
- }
-
- ytd-search-sub-menu-renderer,
- ytd-exploratory-results-renderer.ytd-item-section-renderer,
- ytd-shelf-renderer.ytd-item-section-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*no results*/
- .promo-title.ytd-background-promo-renderer,
- .promo-body-text.ytd-background-promo-renderer {
- color: var(--main-text) !important;
- }
-
- /*show more*/
- #more.ytd-vertical-list-renderer yt-formatted-string.ytd-vertical-list-renderer,
- #all.ytd-vertical-list-renderer yt-formatted-string.ytd-vertical-list-renderer {
- color: var(--main-text) !important;
- }
-
- #more.ytd-vertical-list-renderer yt-formatted-string.ytd-vertical-list-renderer:hover,
- #all.ytd-vertical-list-renderer yt-formatted-string.ytd-vertical-list-renderer:hover {
- color: var(--main-color) !important;
- }
-
- ytd-search-filter-renderer yt-formatted-string.ytd-search-filter-renderer {
- color: var(--dimmer-text) !important;
- }
-
- ytd-search-filter-renderer.selected yt-formatted-string.ytd-search-filter-renderer,
- ytd-search-filter-renderer.selected #dismiss-x.ytd-search-filter-renderer,
- ytd-search-filter-renderer yt-formatted-string.ytd-search-filter-renderer:hover {
- color: var(--main-color) !important;
- }
-
- /*Search music suggestions*/
- ytd-watch-card-rich-header-renderer {
- background: var(--hover-background) !important;
- }
-
- #overlay-button {
- background: var(--main-color) !important;
- }
-
- #overlay-button:hover {
- filter: brightness(110%) !important;
- }
-
- #watch-card-title,
- #view-all-endpoint:hover {
- color: var(--main-color) !important;
- }
-
- ytd-watch-card-compact-video-renderer[is-condensed],
- #view-all-endpoint {
- border-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- /*Search results related to item searched*/
- a.ytd-search-refinement-card-renderer {
- background-color: var(--second-background) !important;
- border-color: var(--hover-background) !important;
- border-radius: 8px !important;
- }
-
- a.ytd-search-refinement-card-renderer:hover #card-title.ytd-search-refinement-card-renderer div.ytd-search-refinement-card-renderer {
- color: var(--main-color) !important;
- }
-
- #card-title.ytd-search-refinement-card-renderer div.ytd-search-refinement-card-renderer {
- color: var(--main-text) !important;
- }
-
- /*Next button*/
- .center-aligned.ytd-horizontal-card-list-renderer {
- background-color: var(--second-background) !important;
- color: var(--main-text) !important;
- }
-
- .center-aligned.ytd-horizontal-card-list-renderer:hover {
- color: var(--main-color) !important;
- }
-
- /*filter*/
- a.yt-simple-endpoint.ytd-toggle-button-renderer:hover * {
- color: var(--main-color) !important;
- /* fill: var(--main-color) !important; */
- }
-
- #filter-group-name.ytd-search-filter-group-renderer {
- color: var(--main-text) !important;
- border-color: var(--hover-background) !important;
- }
-
- #description-text.ytd-video-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Comments*/
- yt-formatted-string.ytd-comments-header-renderer,
- #contenteditable-root.yt-formatted-string[aria-label].yt-formatted-string:empty::before,
- #contenteditable-textarea.ytd-commentbox {
- color: var(--dimmer-text) !important;
- }
-
- /*sort by*/
- #icon-label.yt-dropdown-menu,
- #label-icon.yt-dropdown-menu {
- color: var(--main-text) !important;
- fill: var(--main-text) !important;
- }
-
- yt-sort-filter-sub-menu-renderer.ytd-comments-header-renderer:hover #icon-label.yt-dropdown-menu,
- yt-sort-filter-sub-menu-renderer.ytd-comments-header-renderer:hover #label-icon.yt-dropdown-menu {
- color: var(--main-color) !important;
- fill: var(--main-color) !important;
- }
-
- /*sort by dropdown*/
- paper-listbox.yt-dropdown-menu {
- background: var(--second-background) !important;
- }
-
- .item.yt-dropdown-menu {
- color: var(--main-text) !important;
- }
-
- paper-listbox.yt-dropdown-menu paper-item.yt-dropdown-menu:hover,
- paper-listbox.yt-dropdown-menu paper-item.yt-dropdown-menu:hover .item.yt-dropdown-menu {
- background: var(--hover-background) !important;
- color: var(--main-color) !important;
- }
-
- paper-listbox.yt-dropdown-menu .yt-dropdown-menu.iron-selected {
- background-color: var(--second-background) !important;
- }
-
- paper-listbox.yt-dropdown-menu .yt-dropdown-menu.iron-selected .item.yt-dropdown-menu {
- color: var(--main-color) !important;
- }
-
- /*text box*/
- #simplebox-placeholder.ytd-comment-simplebox-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #placeholder-area.ytd-comment-simplebox-renderer {
- border-color: var(--hover-background) !important;
- }
-
- #input-container.ytd-commentbox,
- ytd-commentbox {
- --paper-input-container-underline-color: var(--hover-background) !important;
- --paper-input-container-underline-focus-color: var(--main-color) !important;
- }
-
- .focused-line.tp-yt-paper-input-container {
- border-color: var(--main-color) !important;
- }
-
- .unfocused-line.tp-yt-paper-input-container {
- border-color: var(--dimmer-text) !important;
- }
-
- /*emoji selector*/
- #emojis.ytd-commentbox {
- background-color: var(--second-background) !important;
- }
-
- /*comments themselves*/
- #author-text.yt-simple-endpoint.ytd-comment-renderer,
- #content.style-scope #content-text {
- color: var(--main-text) !important;
- }
-
- #author-text.yt-simple-endpoint.ytd-comment-renderer:hover {
- color: var(--main-color) !important;
- }
-
- ytd-author-comment-badge-renderer {
- background-color: var(--hover-background) !important;
- }
-
- #content-text.ytd-comment-renderer,
- ytd-expander[should-use-number-of-lines][collapsed] > #content.ytd-expander {
- color: var(--dimmer-text) !important;
- }
-
- /*read more*/
- .more-button-exp.ytd-comment-renderer,
- .less-button-exp.ytd-comment-renderer {
- color: var(--main-text) !important;
- }
-
- .more-button-exp.ytd-comment-renderer:hover,
- .less-button-exp.ytd-comment-renderer:hover {
- color: var(--main-color) !important;
- }
-
- /*view replies*/
- paper-button.ytd-comment-replies-renderer,
- yt-next-continuation.ytd-comment-replies-renderer,
- yt-icon.ytd-comment-replies-renderer {
- color: var(--main-text) !important;
- }
-
- .more-button.style-scope.ytd-comment-replies-renderer:hover paper-button.ytd-comment-replies-renderer,
- .more-button.style-scope.ytd-comment-replies-renderer:hover yt-next-continuation.ytd-comment-replies-renderer,
- .more-button.style-scope.ytd-comment-replies-renderer:hover yt-icon.ytd-comment-replies-renderer {
- color: var(--main-color) !important;
- }
-
- /*likes*/
- #vote-count-middle.ytd-comment-action-buttons-renderer {
- color: var(--dimmer-text) !important;
- }
-
- ytd-button-renderer yt-formatted-string.ytd-button-renderer:hover {
- color: var(--main-color) !important;
- }
-
- /*Show more videos*/
- yt-next-continuation.ytd-watch-next-secondary-results-renderer {
- --paper-button_-_background-color: transparent !important;
- --paper-button_-_color: var(--dimmer-text) !important;
- }
-
- .style-scope.yt-next-continuation {
- border-color: transparent !important;
- }
-
- .style-scope.yt-next-continuation:hover {
- background-color: transparent !important;
- color: var(--main-color) !important;
- }
-
- yt-formatted-string.ytd-expanded-shelf-contents-renderer {
- color: var(--dimmer-text) !important;
- }
-
- yt-formatted-string.ytd-expanded-shelf-contents-renderer:hover {
- color: var(--main-color) !important;
- }
-
- /*View more comments*/
- paper-button.yt-next-continuation {
- color: var(--dimmer-text) !important;
- }
-
- /*Links in description and published date for comments*/
- #content.ytd-expander a {
- color: var(--main-color) !important;
- opacity: 0.9;
- }
-
- #published-time-text.ytd-comment-renderer,
- #published-time-text.ytd-comment-renderer a {
- --yt-endpoint-color: var(--dimmer-text) !important;
- color: var(--dimmer-text) !important;
- opacity: .8;
- }
-
- #content.ytd-expander a:hover,
- #published-time-text.ytd-comment-renderer a:hover,
- #content.ytd-expander #name.ytd-author-comment-badge-renderer:hover {
- color: var(--main-color) !important;
- opacity: 1 !important;
- }
-
- #content.ytd-expander #name.ytd-author-comment-badge-renderer {
- color: var(--main-text) !important;
- }
-
- /*Heart icon in comments*/
- #hearted-border.ytd-creator-heart-renderer,
- #hearted.ytd-creator-heart-renderer {
- color: var(--main-color) !important;
- fill: var(--main-color) !important;
- }
-
- yt-icon-button#creator-heart-button svg {
- fill: var(--main-color) !important;
- }
-
- /*Pinned by*/
- #label.ytd-pinned-comment-badge-renderer {
- color: var(--main-color) !important;
- opacity: 0.5;
- }
-
- yt-icon.ytd-pinned-comment-badge-renderer {
- fill: var(--main-color) !important;
- opacity: 0.5;
- }
-
- /*Fundraiser message*/
- #wrapper.ytd-donation-unavailable-renderer {
- background-color: var(--hover-background) !important;
- }
-
- /*Chat*/
- /*header*/
- yt-live-chat-header-renderer,
- #header.yt-live-chat-participant-list-renderer,
- yt-live-chat-message-renderer,
- yt-live-chat-ticker-renderer {
- background: var(--hover-background) !important;
- }
-
- yt-live-chat-banner-manager[has-active-banner] {
- background: linear-gradient(var(--hover-background) 0%, var(--second-background) 100%) !important;
- }
-
- /*live replay*/
- #card.yt-live-chat-viewer-engagement-message-renderer,
- yt-live-chat-text-message-renderer[is-highlighted] {
- background: var(--hover-background) !important;
- }
-
- #chat,
- #participants,
- yt-live-chat-renderer {
- background: var(--second-background) !important;
- }
-
- /*show mode was enabled*/
- #container.yt-live-chat-restricted-participation-renderer {
- background: var(--second-background) !important;
- }
-
- #contents.yt-live-chat-mode-change-message-renderer {
- background: var(--hover-background) !important;
- }
-
- #contents.yt-live-chat-mode-change-message-renderer,
- #subtext.yt-live-chat-mode-change-message-renderer {
- color: var(--dimmer-text) !important;
- }
-
- yt-live-chat-toast-renderer[is-showing-message]/*info for show mode*/
- {
- background: var(--hover-background) !important;
- }
-
- /*dropmenu*/
- #menu.yt-live-chat-text-message-renderer {
- background: transparent !important;
- }
-
- paper-listbox {
- background: var(--second-background) !important;
- }
-
- yt-icon.ytd-menu-navigation-item-renderer,
- yt-icon.ytd-menu-service-item-renderer,
- #header.yt-live-chat-participant-list-renderer,
- #author-name.yt-live-chat-author-chip:not(.member):not(.moderator),
- .style-scope.yt-live-chat-ninja-message-renderer {
- color: var(--main-text) !important;
- }
-
- #deleted-state,
- #show-original,
- yt-live-chat-text-message-renderer[is-deleted] #message.yt-live-chat-text-message-renderer,
- #timestamp {
- color: var(--dimmer-text) !important;
- }
-
- /*paid messages*/
- #content.yt-live-chat-paid-message-renderer #message {
- color: black !important;
- }
-
- #message.yt-live-chat-text-message-renderer a.yt-live-chat-text-message-renderer {
- color: var(--main-color) !important;
- text-decoration: none !important;
- }
-
- yt-live-chat-author-chip[is-highlighted] #author-name {
- background: var(--main-color) !important;
- }
-
- /*paid arrows*/
- yt-icon.yt-live-chat-ticker-renderer {
- background: var(--main-background) !important;
- color: var(--main-text) !important;
- }
-
- yt-icon.yt-live-chat-ticker-renderer:hover {
- color: var(--main-color) !important;
- }
-
- #right-arrow-container.yt-live-chat-ticker-renderer,
- #left-arrow-container.yt-live-chat-ticker-renderer {
- background: transparent !important;
- }
-
- /*channel messages*/
- yt-live-chat-text-message-renderer[author-is-owner] {
- background: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- /*pinned*/
- yt-live-chat-banner-manager[has-visible-banner] {
- background: var(--second-background) !important;
- }
-
- #contents.yt-live-chat-banner-renderer > .yt-live-chat-banner-renderer {
- background: transparent !important;
- }
-
- /*Confirmantion popup*/
- paper-toast {
- background-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- /*button*/
- yt-icon-button.yt-live-chat-item-list-renderer,
- yt-live-chat-ninja-message-renderer.yt-live-chat-renderer paper-button.yt-button-renderer,
- yt-live-chat-message-renderer.yt-live-chat-message-input-renderer yt-button-renderer.style-dark[is-paper-button] {
- background: var(--main-background) !important;
- color: var(--main-text) !important;
- }
-
- /*input*/
- yt-live-chat-message-input-renderer {
- background-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- #focused.yt-live-chat-text-input-field-renderer {
- background: var(--main-color) !important;
- }
-
- #count {
- color: var(--dimmer-text) !important;
- }
-
- /*hide chat*/
- #show-hide-button.ytd-live-chat-frame > ytd-toggle-button-renderer.ytd-live-chat-frame {
- background: var(--hover-background) !important;
- }
-
- /*emoji*/
- yt-formatted-string.yt-emoji-picker-category-renderer {
- background: var(--hover-background) !important;
- }
-
- #search-panel.yt-emoji-picker-renderer {
- background: var(--main-background) !important;
- color: var(--main-text) !important;
- }
-
- #search-empty {
- color: var(--dimmer-text) !important;
- }
-
- /*donations superchats cards*/
- #card.yt-live-chat-donation-announcement-renderer {
- background-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- #menu.yt-live-chat-donation-announcement-renderer {
- background: transparent !important;
- }
-
- /*for actually donating*/
- #subtext.yt-live-chat-product-button-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #container.yt-live-chat-product-button-renderer .yt-icon {
- fill: var(--dimmer-text) !important;
- }
-
- /*Fund raiser*/
- #header-section.ytd-donation-shelf-renderer,
- #collapse-controls-section.ytd-donation-shelf-renderer {
- background-color: var(--hover-background) !important;
- }
-
- #header-text.ytd-donation-shelf-renderer,
- #collapse-controls-section.ytd-donation-shelf-renderer {
- color: var(--main-text) !important;
- }
-
- #collapse-controls-section.ytd-donation-shelf-renderer:hover {
- color: var(--main-color) !important;
- }
-
- #header-section.ytd-donation-shelf-renderer .style-scope.ytd-donation-shelf-renderer.no-transition {
- filter: invert(.8);
- }
-
- #donate-section.ytd-donation-shelf-renderer,
- #creator-messages-section.ytd-donation-shelf-renderer,
- #nonprofit-section.ytd-donation-shelf-renderer,
- #nonprofit-title.ytd-donation-shelf-renderer {
- background-color: var(--second-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- #campaign-title.ytd-donation-shelf-renderer,
- .creator-message.ytd-donation-shelf-renderer,
- #campaign-subtitle.ytd-donation-shelf-renderer,
- .creator-message-name.ytd-donation-shelf-renderer,
- #nonprofit-title.ytd-donation-shelf-renderer {
- color: var(--main-text) !important;
- }
-
- .creator-message.ytd-donation-shelf-renderer,
- #campaign-subtitle.ytd-donation-shelf-renderer,
- #nonprofit-subtitle.ytd-donation-shelf-renderer,
- #nonprofit-description.ytd-donation-shelf-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #amount-raised.ytd-donation-shelf-renderer,
- #nonprofit-title.ytd-donation-shelf-renderer yt-icon.ytd-donation-shelf-renderer {
- color: var(--main-color) !important;
- }
-
- #nonprofit-link.ytd-donation-shelf-renderer .inline-icon.ytd-donation-shelf-renderer {
- fill: var(--main-color) !important;
- }
-
- /*progress*/
- #progress-bar-start.ytd-donation-shelf-renderer,
- #progress-bar-end.ytd-donation-shelf-renderer {
- color: var(--main-text) !important;
- }
-
- #matching-label.ytd-donation-shelf-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #progress-bar.ytd-donation-shelf-renderer {
- background-color: var(--dimmer-text) !important;
- }
-
- #progress-bar-fill.ytd-donation-shelf-renderer {
- background-color: var(--main-color) !important;
- }
-
- /*donate button*/
- #donate-section.ytd-donation-shelf-renderer ytd-button-renderer.style-primary[is-paper-button],
- .b3-button.jfk-button,
- .b3-button.jfk-button.jfk-button-action {
- background-color: var(--main-color) !important;
- }
-
- /*donate window*/
- #top-box.ytd-donation-amount-picker-renderer {
- background-color: var(--second-background) !important;
- }
-
- #campaign-title.ytd-donation-amount-picker-renderer,
- #nonprofit-title.ytd-donation-amount-picker-renderer {
- color: var(--main-color) !important;
- }
-
- #campaign-subtitle.ytd-donation-amount-picker-renderer,
- #nonprofit-subtitle.ytd-donation-amount-picker-renderer {
- color: var(--main-text) !important;
- }
-
- /*amount buttons*/
- #suggested-amount-buttons-row.ytd-donation-amount-picker-renderer ytd-button-renderer.ytd-donation-amount-picker-renderer[is-paper-button] paper-button.ytd-button-renderer {
- background-color: var(--second-background) !important;
- }
-
- #suggested-amount-buttons-row.ytd-donation-amount-picker-renderer ytd-button-renderer.ytd-donation-amount-picker-renderer[is-paper-button] paper-button.ytd-button-renderer {
- background-color: var(--second-background) !important;
- border-color: var(--second-background) !important;
- }
-
- #suggested-amount-buttons-row.ytd-donation-amount-picker-renderer ytd-button-renderer.ytd-donation-amount-picker-renderer[is-paper-button][selected] paper-button.ytd-button-renderer,
- .ytd-donation-amount-picker-renderer ytd-button-renderer.style-primary[is-paper-button] {
- background-color: var(--main-color) !important;
- }
-
- /*curency for other amount*/
- span.prefix.style-scope.paper-input-container > div.ytd-donation-amount-picker-renderer {
- color: var(--main-text) !important;
- }
-
- /*Payment window*/
- .popup-mode .b3-page-header {
- background-color: var(--main-background) !important;
- }
-
- .b3-line-items-mundane-items-container,
- .b3-line-items-mundane-items-container {
- background-color: var(--hover-background) !important;
- }
-
- .b3-separator {
- display: none !important;
- }
-
- .b3-line-item-value {
- color: var(--main-color) !important;
- }
-
- .b3-line-item-name,
- .b3-line-item-infomessage,
- .b3-line-item-subvalue {
- color: var(--main-text) !important;
- }
-
- .b3-single-option-form-selector-option-content .b3-existing-instrument-option-label-without-image,
- .b3-dropdown-form-selector .b3-existing-instrument-option-label-without-image,
- .b3-single-option-form-selector-option-content .b3-additional-instrument-option-label,
- .b3-dropdown-form-selector .b3-additional-instrument-option-label,
- .b3-input.focused .b3-input-label,
- .b3-input.focused .b3-input-label-text,
- .b3-input input[type="tel"],
- .b3-input input[type="text"],
- .b3-input input[type="password"],
- .b3-input input[type="email"],
- .b3-input.populated .b3-input-label,
- .b3-input.invalid .b3-input-label,
- .b3-input.autofilled .b3-input-label,
- .b3-input-field > .b3-input-label,
- .b3-input-field > .b3-input-label.accessible,
- .b3-collapsing-form-placeholder-text {
- color: var(--main-text) !important;
- }
-
- .countryselector .goog-flat-menu-button-caption,
- .countryselector .goog-flat-menu-button-caption .goog-menuitem-content {
- color: var(--dimmer-text) !important;
- }
-
- /*icons*/
- .b3-single-option-form-selector-icon,
- .b3-collapsing-form-icon {
- fill: var(--main-text) !important;
- }
-
- .b3-collapsing-form.focused .b3-collapsing-form-icon {
- fill: var(--main-color) !important;
- }
-
- .b3-tooltip-icon {
- filter: invert(1) !important;
- }
-
- /*border*/
- .b3-input-status-indicator {
- background-color: var(--main-color) !important;
- }
-
- .b3-input-accent {
- border-color: var(--hover-background) !important;
- }
-
- /*tooltip*/
- .b3-inline-tooltip-popup-wrapper,
- .help-Helpwidgets-TooltipWidget-content-html {
- background-color: var(--hover-background) !important;
- color: var(--dimmer-text) !important;
- }
-
- .b3-inline-tooltip-popup-wrapper a,
- .help-Helpwidgets-TooltipWidget-content-html a {
- color: var(--main-color) !important;
- }
-
- /*country choice*/
- .goog-menu,
- .goog-menuitem:hover {
- background-color: var(--hover-background) !important;
- }
-
- .goog-menuitem,
- .goog-tristatemenuitem,
- .goog-filterobsmenuitem {
- color: var(--main-text) !important;
- }
-
- .goog-menuitem-highlight .goog-menuitem-content {
- color: var(--main-color) !important;
- }
-
- .goog-menuitem .countryselector-flag {
- border-radius: 4px !important;
- /*hiding ugly white corners*/
- }
-
- /*footer*/
- .b3-legal-message-content,
- .b3-info-message-list.b3-buyflow-extra-messages .b3-info-message-component.b3-info-message-unknown,
- .b3-info-message-component.b3-info-message-unknown.b3-buyflow-extra-messages .b3-info-message-html {
- color: var(--dimmer-text) !important;
- }
-
- .b3-legal-message-content a,
- .b3-info-message-component.b3-info-message-unknown.b3-buyflow-extra-messages .b3-info-message-html a {
- color: var(--main-color) !important;
- }
-
- /*Notification*/
- /*bell icon notification count*/
- .yt-spec-icon-badge-shape--type-notification .yt-spec-icon-badge-shape__badge {
- background-color: var(--main-color) !important;
- border: none !important;
- }
-
- button.yt-icon-button:hover .yt-spec-icon-badge-shape--type-notification .yt-spec-icon-badge-shape__badge {
- color: var(--main-text) !important;
- }
-
- /*load spinner - also for comments*/
- .spinner-layer.layer-1.tp-yt-paper-spinner,
- .spinner-layer.layer-2.tp-yt-paper-spinner,
- .spinner-layer.layer-3.tp-yt-paper-spinner,
- .spinner-layer.layer-4.tp-yt-paper-spinner {
- color: var(--dimmer-text) !important;
- }
-
- #notification-count.ytd-notification-topbar-button-renderer,
- ytd-notification-renderer.unread #new.ytd-notification-renderer,
- .yt-lockup-notification .unread-dot/*account settings*/
- {
- background: var(--main-color) !important;
- border-color: var(--main-color) !important;
- }
-
- .text.ytd-notification-renderer,
- .message.ytd-notification-renderer #yt-masthead-notifications-title,
- .yt-lockup-notification .yt-lockup-title a/*account settings*/
- h2.yt-multi-page-menu-section-renderer/*comments and notifications headers*/
- {
- color: var(--main-text) !important;
- }
-
- .metadata.ytd-notification-renderer,
- .exp-responsive .yt-lockup-tile .yt-lockup-byline/*account settings*/
- {
- color: var(--dimmer-text) !important;
- }
-
- ytd-notification-renderer:hover .message.ytd-notification-renderer {
- color: var(--main-color) !important;
- }
-
- ytd-watch:not([flexy-fit-to-video_]) #chat.ytd-watch,
- ytd-watch:not([flexy-fit-to-video_]) #transcript.ytd-watch {
- padding-left: 0 !important;
- }
-
- ytd-simple-menu-header-renderer {
- background-color: var(--hover-background) !important;
- }
-
- h2.ytd-simple-menu-header-renderer {
- color: var(--main-text) !important;
- }
-
- #sections.ytd-multi-page-menu-renderer > ytd-background-promo-renderer.ytd-multi-page-menu-renderer,
- ytd-multi-page-menu-renderer,
- #yt-masthead-notifications-content .item-section > li > .yt-lockup-tile,
- #yt-masthead-notifications-content .yt-ui-ellipsis,
- /*account settings*/
- #yt-masthead-notifications-content/*bottom thing - account settings*/
- {
- background: var(--second-background) !important;
- border-color: var(--second-background) !important;
- }
-
- .browse-items-load-more-button {
- background-color: var(--main-background) !important;
- border-color: var(--main-background) !important;
- color: var(--main-text) !important;
- }
-
- .browse-items-load-more-button:hover {
- color: var(--main-color) !important;
- }
-
- .promo-message.ytd-background-promo-renderer,
- #message:not([class*="yt-music"]) {
- color: var(--dimmer-text) !important;
- }
-
- /*triangle*/
- .yt-uix-clickcard-card-reverse .yt-uix-card-body-arrow-vertical,
- .yt-uix-hovercard-card-reverse .yt-uix-card-body-arrow-vertical/*account settings*/
- {
- border-bottom-color: var(--hover-background) !important;
- }
-
- /*menu*/
- .yt-ui-menu-content/*account settings*/
- {
- background-color: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- .yt-ui-menu-item/*account settings*/
- {
- background-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- .yt-ui-menu-item:hover/*account settings*/
- {
- color: var(--main-color) !important;
- }
-
- /*gear icon*/
- .yt-uix-button-icon-icon-account-settings/*account settings*/
- {
- filter: brightness(250%) invert(1);
- }
-
- /*Cards*/
- .iv-card-content,
- .ytp-ce-expanding-overlay-background,
- .ytp-cards-teaser .ytp-cards-teaser-text,
- .ytp-cards-teaser .ytp-cards-teaser-box {
- background-color: var(--main-background) !important;
- }
-
- .ytp-cards-teaser .ytp-cards-teaser-box,
- .iv-card-image {
- border: 0px !important;
- }
-
- .iv-card-content > :first-child,
- .html5-video-player a,
- .iv-card h2,
- .ytp-cards-teaser .ytp-cards-teaser-text {
- color: var(--main-text) !important;
- }
-
- .iv-card:hover .iv-card-primary-link,
- .ytp-ce-website-title {
- color: var(--main-color) !important;
- }
-
- .ytp-ce-element:hover {
- border-color: var(--main-color) !important;
- }
-
- .ytp-ce-channel-title.ytp-ce-link {
- color: var(--main-color) !important;
- opacity: 0.9 !important;
- }
-
- .ytp-ce-channel-title.ytp-ce-link:hover,
- .ytp-cards-teaser .ytp-cards-teaser-text:hover {
- color: var(--main-color) !important;
- opacity: 1 !important;
- }
-
- .ytp-ce-channel-metadata.yt-ui-ellipsis.yt-ui-ellipsis-3 {
- background: transparent;
- color: var(--dimmer-text) !important;
- }
-
- /*Cards border color*/
- .iv-card-message {
- border-bottom: 1px solid var(--main-color) !important;
- }
-
- .ytp-ce-channel-this .ytp-ce-channel-metadata {
- border-color: var(--hover-background) !important;
- }
-
- /*Poll*/
- .iv-card-poll label,
- .iv-card-poll.iv-card-poll-voted label.iv-card-poll-choice-checked,
- .iv-card-poll.iv-card-poll-voted label {
- color: var(--main-text) !important;
- }
-
- #vote-info.ytd-backstage-poll-renderer {
- color: var(--dimmer-text) !important;
- }
-
- .iv-card-poll .iv-card-poll-result .iv-card-poll-result-bar {
- background-color: var(--main-color) !important;
- }
-
- ytd-backstage-post-thread-renderer {
- border-color: var(--hover-background) !important;
- }
-
- ytd-backstage-poll-renderer[show-poll-choice-border] .choice-info.ytd-backstage-poll-renderer {
- border-color: transparent !important;
- }
-
- /*Account menu header*/
- ytd-active-account-header-renderer {
- background: var(--second-background) !important;
- }
-
- ytd-active-account-header-renderer:hover {
- background-color: var(--hover-background) !important;
- }
-
- #account-name.ytd-active-account-header-renderer,
- #channel-title.ytd-account-item-renderer {
- color: var(--main-text) !important;
- }
-
- #email.ytd-active-account-header-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*subentries*/
- #label.ytd-toggle-theme-compact-link-renderer,
- tp-yt-paper-item.ytd-compact-link-renderer {
- color: var(--dimmer-text) !important;
- }
-
- ytd-toggle-theme-compact-link-renderer:hover #label.ytd-toggle-theme-compact-link-renderer,
- ytd-toggle-theme-compact-link-renderer:hover yt-icon,
- paper-item.ytd-compact-link-renderer:hover #subtitle,
- paper-item.ytd-compact-link-renderer:hover .deemphasize.yt-formatted-string,
- tp-yt-paper-item.ytd-compact-link-renderer:hover *,
- tp-yt-paper-item.ytd-compact-link-renderer:hover #subtitle.ytd-compact-link-renderer {
- color: var(--main-color) !important;
- }
-
- #footer.ytd-multi-page-menu-renderer > .ytd-multi-page-menu-renderer {
- border-color: var(--hover-background) !important;
- }
-
- .description.ytd-toggle-item-renderer,
- #caption.ytd-toggle-item-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*language*/
- #language.ytd-account-settings,
- #country.ytd-account-settings,
- #restricted.ytd-account-settings,
- .container.ytd-account-settings {
- background-color: var(--second-background) !important;
- }
-
- paper-item.ytd-account-settings {
- color: var(--dimmer-text) !important;
- }
-
- paper-item.ytd-account-settings:hover {
- color: var(--main-color) !important;
- }
-
- /*swich account*/
- yt-formatted-string.ytd-account-item-renderer[secondary] {
- color: var(--dimmer-text) !important;
- }
-
- #selected.ytd-account-item-renderer {
- color: var(--main-color) !important;
- }
-
- /*theme*/
- ytd-compact-link-renderer[compact-link-style="compact-link-style-type-disclaimer"] #label.ytd-compact-link-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Live background color*/
- ytd-thumbnail-overlay-time-status-renderer[overlay-style="LIVE"] {
- background-color: var(--main-color) !important;
- }
-
- .guide-entry-badge.ytd-guide-entry-renderer {
- color: var(--main-color) !important;
- fill: var(--main-color) !important;
- }
-
- .ytp-live-badge[disabled]:before {
- background: var(--main-color) !important;
- }
-
- /*Recolored sidepane icons, menu icons and filter button*/
- .guide-icon.ytd-guide-entry-renderer,
- paper-button.ytd-toggle-button-renderer,
- yt-icon.ytd-compact-link-renderer,
- yt-icon.ytd-toggle-theme-compact-link-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Sidepane titles*/
- #guide-section-title a {
- color: var(--dimmer-text) !important;
- }
-
- #guide-section-title a:hover {
- color: var(--main-color) !important;
- }
-
-
- /*Autoplay text*/
- #upnext.ytd-compact-autoplay-renderer,
- #autoplay.ytd-compact-autoplay-renderer {
- color: var(--dimmer-text) !important;
- opacity: .8;
- }
-
- ytd-compact-autoplay-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*Video was removed by user - not interested*/
- #text.ytd-notification-multi-action-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Video was added/removed to/from a playlist by user*/
- yt-notification-action-renderer[ui-refresh] #text.yt-notification-action-renderer,
- yt-notification-action-renderer[ui-refresh] #sub-text.yt-notification-action-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Links in video description*/
- .description.ytd-video-secondary-info-renderer a {
- color: var(--main-color) !important;
- opacity: .9;
- }
-
- /*Game cards*/
- ytd-rich-metadata-renderer {
- background-color: var(--second-background) !important;
- }
-
- #call-to-action.ytd-rich-metadata-renderer {
- color: var(--main-text) !important;
- }
-
- #title.ytd-rich-metadata-renderer,
- #call-to-action.ytd-rich-metadata-renderer:hover {
- color: var(--main-color) !important;
- }
-
- /*Movie cards*/
- #header.ytd-movie-offer-module-renderer {
- background-color: var(--second-background) !important;
- }
-
- ytd-button-renderer.ytd-movie-offer-module-renderer.style-primary[is-paper-button] {
- background-color: var(--main-color) !important;
- }
-
- #wide-clickable-area.ytd-movie-offer-module-renderer {
- background-color: var(--hover-background) !important;
- }
-
- #info.ytd-movie-offer-module-renderer {
- color: var(--main-text) !important;
- }
-
- h3.ytd-compact-movie-renderer {
- color: var(--main-text) !important;
- }
-
- /*Tour/ticket cards*/
- ytd-ticket-shelf-renderer {
- background-color: var(--second-background) !important;
- }
-
- #primary-event.ytd-ticket-shelf-renderer #meta.ytd-ticket-shelf-renderer #tickets-button.ytd-ticket-shelf-renderer {
- background: var(--main-color) !important;
- color: var(--main-text) !important;
- }
-
- #primary-event.ytd-ticket-shelf-renderer #meta-info.ytd-ticket-shelf-renderer #nearest.ytd-ticket-shelf-renderer,
- #primary-event.ytd-ticket-shelf-renderer #meta-info.ytd-ticket-shelf-renderer #subtitle1.ytd-ticket-shelf-renderer,
- #primary-event.ytd-ticket-shelf-renderer #meta-info.ytd-ticket-shelf-renderer #subtitle2.ytd-ticket-shelf-renderer,
- .where-column-td.ytd-ticket-shelf-renderer .where-column.ytd-ticket-shelf-renderer {
- color: var(--main-text) !important;
- }
-
- .when-date-column.ytd-ticket-shelf-renderer,
- .link.ytd-ticket-shelf-renderer,
- .when-weekday-column.ytd-ticket-shelf-renderer {
- color: var(--main-color) !important;
- }
-
- /*separator*/
- #seperator.ytd-ticket-shelf-renderer,
- ytd-ticket-shelf-renderer {
- border-color: var(--hover-background) !important;
- }
-
-
- /*Author name*/
- #owner-name.ytd-video-owner-renderer {
- opacity: .9;
- }
-
- #owner-name.ytd-video-owner-renderer:hover {
- opacity: 1 !important;
- }
-
- /*Set a memento*/
- ytd-toggle-button-renderer.style-compact-gray[is-paper-button] {
- background-color: var(--second-background) !important;
- color: var(--dimmer-text) !important;
- }
-
- /*Series name*/
- .super-title.ytd-video-primary-info-renderer a,
- #additional-metadata-line.ytd-video-meta-block {
- color: var(--dimmer-text) !important;
- opacity: .8;
- }
-
- #selectionBar.paper-tabs {
- border-color: var(--main-color) !important;
- }
-
- /*"Best" of YouTube icons in sidepane*/
- /*.style-scope.ytd-guide-entry-renderer.no-transition
- {
- filter: grayscale(100%);
- }*/
- /* Promo page */
- body.yt-new-promo-page-use-launched-copy .yt-new-promo-page-header {
- background: var(--main-background) !important;
- }
-
- .yt-new-promo-page-section-text,
- .yt-new-promo-page-header {
- color: var(--dimmer-text);
- }
-
- .yt-new-promo-page-button {
- background-color: var(--main-color) !important;
- color: var(--main-text) !important;
- opacity: .9;
- }
-
- .yt-new-promo-page-button:hover {
- opacity: 1;
- }
-
- /* Crude logo fix */
- .yt-new-promo-page-logo {
- filter: grayscale(100%) invert(100%);
- }
-
- /* Fix for active like/dislike buttons */
- ytd-toggle-button-renderer.style-grey-text[is-icon-button] {
- color: var(--yt-button-color);
- }
-
- ytd-toggle-button-renderer #button.ytd-toggle-button-renderer {
- color: inherit;
- }
-
- /*like/dislike buttons in nested replies*/
- /*.style-scope.ytd-toggle-button-renderer svg
- {
- fill: var(--dimmer-text) !important;
- }
- .style-scope.ytd-toggle-button-renderer yt-icon-button.style-default-active svg
- {
- fill: var(--main-color) !important;
- }*/
- ytd-toggle-button-renderer.ytd-comment-action-buttons-renderer #button.ytd-toggle-button-renderer {
- color: var(--yt-button-color);
- }
-
- ytd-toggle-button-renderer.ytd-comment-action-buttons-renderer .style-default-active {
- color: var(--main-color) !important;
- }
-
- /* Fix for placeholders/skeletons */
- /*ytd-masthead.shell
- {
- background-color: var(--main-background);
- }
- ytd-masthead.shell [class*='skeleton'], [id*='skeleton'] [class*='skeleton'], [id*='skeleton'], .shelf-videos, .skeleton-bg-color
- {
- background-color: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }*/
- /*homepage skeleton*/
- #home-container-skeleton,
- html[dark] #home-container-skeleton {
- background-color: var(--main-background) !important;
- }
-
- /*sidebar skeleton*/
- #guide-skeleton,
- html[dark] #guide-skeleton {
- background-color: var(--second-background) !important;
- }
-
- /*homepage videos skeleton*/
- #home-page-skeleton .skeleton-bg-color,
- html[dark] #home-page-skeleton .skeleton-bg-color {
- background-color: var(--hover-background) !important;
- }
-
- .masthead-skeleton-icon,
- html[dark] .masthead-skeleton-icon,
- /*ytd-masthead.shell [class*='skeleton'], html[dark] ytd-masthead.shell,
- .shelf-videos, html[dark] .shelf-videos,*/
- .skeleton-bg-color,
- html[dark] .skeleton-bg-color {
- background-color: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- .skeleton-light-border-bottom,
- html[dark] .skeleton-light-border-bottom {
- border-bottom: 1px solid var(--hover-background) !important;
- }
-
- ytd-alert-with-button-renderer[type="INFO"],
- #content-wrapper.yt-alert-with-actions-renderer/*TOS*/
- {
- background-color: var(--hover-background) !important;
- }
-
- #content-wrapper.yt-alert-with-actions-renderer yt-button-renderer[is-paper-button] yt-icon.yt-button-renderer {
- color: var(--main-color) !important;
- }
-
- ytd-alert-with-button-renderer[type="INFO"] #text.ytd-alert-with-button-renderer {
- color: var(--main-text) !important;
- }
-
- #alert-message.ytd-consent-bump-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Paid membership*/
- yt-subscription-product-header-renderer.ytd-item-section-renderer {
- color: var(--main-text) !important;
- }
-
- /*Reporting*/
- .introduction-header {
- color: var(--main-text) !important;
- }
-
- .introduction-body,
- .introduction-bullet-items {
- color: var(--dimmer-text) !important;
- }
-
- yt-report-form-modal-renderer[dialog][dialog][dialog] {
- background: var(--main-background) !important;
- }
-
- yt-options-renderer[increased-tooltip-target] yt-icon.yt-options-renderer {
- color: var(--main-text) !important;
- }
-
- /*Help*/
- .ghp-header-searchBox,
- .ghp-autocomplete-label {
- color: var(--dimmer-text) !important;
- }
-
- /*
- .ghp-header-searchIcon.ghpv-loaded, .ghp-iconTextComponent-icon, .ghp-autocomplete-icon
- {
- filter: invert(100%) grayscale(100%) brightness(150%);
- }
- .ghp-autocompleteGlass
- {
- background: rgba(0,0,0,3) !important;
- }
- .ghp-card-title
- {
- color: var(--main-text) !important;
- }
- .ghp-card, .ghp-content, .ghp-iconTextComponent, .ghp-contentFrame, .hcfe
- {
- background-color: var(--second-background) !important;
- border-color: var(--hover-background) !important;
- }
- .ghp-iconTextComponent:hover .ghp-iconTextComponent-label,
- .ghp-iconTextComponent:hover .ghp-separator
- {
- color: var(--main-color) !important;
- border-color: var(--hover-background) !important;
- }
- .ghp-separator
- {
- border-color: var(--hover-background) !important;
- }
- .ghp-iconTextComponent-label, .hcfe
- {
- color: var(--dimmer-text) !important;
- }
- */
- /*Trending page*/
- ytd-destination-button-renderer {
- background-color: var(--hover-background) !important;
- }
-
- #destination-label.ytd-destination-button-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-destination-button-renderer:hover #destination-label.ytd-destination-button-renderer {
- color: var(--main-color) !important;
- }
-
- /*more - shown on low width*/
- ytd-destination-shelf-renderer[is-show-more-visible] #show-more-button.ytd-destination-shelf-renderer,
- #show-more-button.ytd-destination-shelf-renderer {
- background: var(--hover-background) !important;
- }
-
- #show-more-button-icon.ytd-destination-shelf-renderer {
- color: var(--main-text) !important;
- }
-
- ytd-destination-shelf-renderer[is-show-more-visible] #show-more-button.ytd-destination-shelf-renderer:hover #show-more-button-icon.ytd-destination-shelf-renderer {
- color: var(--main-color) !important;
- }
-
- /*Learning*/
- ytd-carousel-header-renderer {
- background: var(--main-background) !important;
- }
-
- /*Music*/
- .flex-container.ytd-compact-station-renderer {
- background-color: var(--second-background) !important;
- }
-
- h3.ytd-compact-station-renderer {
- color: var(--main-text) !important;
- }
-
- .flex-container.ytd-compact-station-renderer:hover h3.ytd-compact-station-renderer {
- color: var(--main-color) !important;
- }
-
- #video-count-text.ytd-compact-station-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Gaming*/
- #live-viewers-count.ytd-game-details-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*History*/
- yt-formatted-string.ytd-sub-feed-option-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #title.ytd-sub-feed-selector-renderer,
- ytd-sub-feed-option-renderer.ytd-sub-feed-selector-renderer {
- border-color: var(--hover-background) !important;
- }
-
- ytd-two-column-browse-results-renderer #secondary.ytd-two-column-browse-results-renderer {
- background-color: var(--second-background) !important;
- }
-
- ytd-two-column-browse-results-renderer #primary ytd-text-header-renderer {
- color: var(--main-text) !important;
- }
-
- /*dialog confirm*/
- yt-confirm-dialog-renderer[dialog][dialog][dialog] {
- background-color: var(--second-background) !important;
- }
-
- #scroller.yt-confirm-dialog-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #cancel-button.yt-confirm-dialog-renderer {
- color: var(--main-text) !important;
- }
-
- .buttons.yt-confirm-dialog-renderer {
- border-color: var(--hover-background) !important;
- }
-
- /*Premium*/
- /*Logo icon - Premium*/
- yt-icon.ytd-logo {
- color: var(--main-text);
- }
-
- /*video*/
- #main-title.ytd-unlimited-offer-module-renderer {
- color: var(--main-text) !important;
- }
-
- #sub-title.ytd-unlimited-offer-module-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*popup*/
- .ytd-mealbar-promo-renderer-message-title.ytd-mealbar-promo-renderer {
- color: var(--main-text) !important;
- }
-
- .ytd-mealbar-promo-renderer-message-text.ytd-mealbar-promo-renderer {
- color: var(--dimmer-text) !important;
- }
-
- .button-container.ytd-mealbar-promo-renderer {
- border-color: var(--hover-background) !important;
- }
-
- ytd-grid-video-renderer[is-dismissed] #dismissed {
- border-color: var(--hover-background) !important;
- }
-
- ytd-grid-video-renderer[is-dismissed] #dismissed .ytd-notification-multi-action-renderer {
- color: var(--dimmer-text) !important;
- }
-
- ytd-dismissal-follow-up-renderer[dialog][dialog][dialog] {
- background: var(--main-background) !important;
- }
-
- #content.ytd-dismissal-follow-up-renderer #checkboxLabel.paper-checkbox,
- #content.ytd-dismissal-follow-up-renderer #label.ytd-dismissal-reason-video-renderer {
- color: var(--dimmer-text) !important;
- }
-
- #buttons.ytd-dismissal-follow-up-renderer {
- border-top-color: var(--hover-background) !important;
- }
-
- /*New TOS*/
- yt-alert-with-actions-renderer {
- background-color: var(--hover-background) !important;
- }
-
- #text.yt-alert-with-actions-renderer,
- #alert-message.yt-alert-with-actions-renderer {
- color: var(--main-text) !important;
- }
-
- yt-button-renderer yt-formatted-string.yt-button-renderer,
- #icon.yt-alert-with-actions-renderer {
- color: var(--main-color) !important;
- }
-
- /*actual page for TOS*/
- #yts-article #article-container.ytg-box #summary {
- background-color: var(--hover-background) !important;
- }
-
- .separator,
- .with-divider,
- .header,
- #yts-article #header,
- #yts-nav {
- border-color: var(--hover-background) !important;
- }
-
- #yts-nav .indented .sub-level a,
- #yts-nav .top-level a,
- #yts-article #header {
- color: var(--main-text) !important;
- }
-
- /*Premium page (https://www.youtube.com/premium)*/
- yt-button-renderer#manage-subscription-button yt-formatted-string.yt-button-renderer {
- color: inherit !important;
- }
-
- .yt-unlimited-page-header-renderer a.yt-simple-endpoint.yt-formatted-string {
- color: var(--main-color) !important;
- }
-
- #header.yt-music-pass-small-feature-info-renderer,
- .question.yt-generic-faq-question-renderer,
- .answer-arrow.yt-generic-faq-question-renderer {
- color: var(--main-text) !important;
- }
-
- #description.yt-music-pass-small-feature-info-renderer,
- .container.yt-faq-section-renderer,
- .answer.yt-generic-faq-question-renderer,
- .text.ytd-simple-text-section-renderer {
- color: var(--dimmer-text) !important;
- }
-
- yt-generic-faq-question-renderer .yt-simple-endpoint.style-scope.yt-formatted-string,
- yt-generic-faq-question-renderer a.yt-simple-endpoint.yt-formatted-string:only-of-type,
- .text.ytd-simple-text-section-renderer a.yt-simple-endpoint.yt-formatted-string:only-of-type {
- color: var(--main-color) !important;
- }
-
- /*Paid memberships*/
- paper-card.yt-subscription-product-upsell-offer-renderer {
- background-color: var(--second-background) !important;
- }
-
- #title.yt-subscription-product-upsell-offer-renderer,
- #description.yt-subscription-product-upsell-offer-renderer,
- #additional-info.yt-subscription-product-upsell-offer-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Gaming page (https://www.youtube.com/gaming) and gaming channels*/
- #channel-details.ytd-carousel-header-renderer,
- #channel-header-container.ytd-topic-channel-details-renderer {
- background-color: var(--main-background) !important;
- }
-
- #bg.ytd-interactive-tabbed-header-renderer {
- fill: var(--main-background) !important;
- }
-
- #tabs-inner-container.ytd-interactive-tabbed-header-renderer {
- background-color: transparent !important;
- }
-
- /*Acount page specific*/
- /*Sidebar*/
- #creator-page.account-page,
- ytd-settings-sidebar-renderer {
- background-color: var(--second-background) !important;
- }
-
- .exp-kevlar-settings .account-page #creator-sidebar h3 {
- color: var(--main-text) !important;
- }
-
- .exp-kevlar-settings .account-page #creator-sidebar .creator-sidebar-item a {
- color: var(--dimmer-text) !important;
- }
-
- .exp-kevlar-settings .account-page #creator-sidebar .creator-sidebar-item.selected > a,
- .exp-kevlar-settings .account-page #creator-sidebar .creator-sidebar-item.selected > a:hover,
- .exp-kevlar-settings .account-page #creator-sidebar .creator-sidebar-item:hover a {
- background-color: var(--hover-background) !important;
- color: var(--main-color) !important;
- }
-
- ytd-compact-link-renderer[compact-link-style="compact-link-style-type-settings-sidebar"][active],
- ytd-compact-link-renderer[compact-link-style="compact-link-style-type-settings-sidebar"][active]:hover {
- background-color: var(--hover-background) !important;
- }
-
- /*Burger sidebar*/
- #appbar-guide-menu,
- .guide-flyout {
- background-color: var(--second-background) !important;
- }
-
- #guide-container .guide-item {
- color: var(--main-text) !important;
- }
-
- #guide-container .guide-item:hover {
- background-color: var(--hover-background) !important;
- color: var(--main-color) !important;
- }
-
- /*headers*/
- .exp-invert-logo li.guide-section h3,
- .exp-invert-logo li.guide-section h3 a {
- color: var(--main-color) !important;
- }
-
- .guide-section-separator/*divider*/
- {
- border-color: var(--hover-background) !important;
- }
-
- /*Contents - account*/
- .account-page-header,
- ytd-section-list-renderer[page-subtype="account-settings"] a.yt-simple-endpoint.yt-formatted-string {
- color: var(--main-color) !important;
- }
-
- #account-page-header-title,
- h2.account-section-header {
- color: var(--main-text) !important;
- }
-
- /*title of the page*/
- #name.ytd-page-introduction-renderer,
- #name.ytd-channel-options-renderer,
- ytd-settings-options-renderer .yt-formatted-string:not(a).bold {
- color: var(--main-text) !important;
- }
-
- .exp-kevlar-settings #account-page-header-subtitle,
- .account-info-item .account-info-label,
- .account-section .account-email,
- .account-content,
- .account-section-subtext {
- color: var(--dimmer-text) !important;
- }
-
- /*other text*/
- #text.ytd-page-introduction-renderer,
- /*email*/
- #text.ytd-settings-options-renderer,
- /*descriptions, metadata, below text*/
- #label.ytd-settings-checkbox-renderer,
- #label.ytd-settings-radio-option-renderer,
- /*playback*/
- #text.ytd-connected-app-renderer/*connected accounts*/
- {
- color: var(--dimmer-text) !important;
- }
-
- .yt-horizontal-rule/*divider*/
- {
- border-color: var(--hover-background) !important;
- }
-
- .account-info .account-photo .yt-thumb/*avatar*/
- {
- border-radius: 100%;
- }
-
- .account-content a,
- .account-header a/*various links*/
- {
- color: var(--main-color) !important;
- }
-
- .yt-thumb {
- background-color: var(--hover-background) !important;
- }
-
- /*Notifications*/
- .setting-reminder,
- h3.account-section-header {
- color: var(--main-text) !important;
- }
-
- .yt-uix-form-input-checkbox-container input:checked + .yt-uix-form-input-checkbox-element {
- border-color: #000;
- filter: invert(1);
- }
-
- .desktop-notifications .browser {
- background-color: var(--hover-background) !important;
- color: var(--main-color) !important;
- border-color: var(--hover-background) !important;
- }
-
- .desktop-notifications .browser .yt-uix-button.turn-on,
- .desktop-notifications .browser .yt-uix-button.turn-off,
- .resume-setting-button,
- .undo-setting-button-section,
- .resume-all-settings-button/*turn off*/
- {
- background: var(--main-background) !important;
- border-color: var(--main-background) !important;
- color: var(--main-color) !important;
- }
-
- .yt-uix-form-input-select/*dropdowns*/
- {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- /*checkboxes*/
- tp-yt-paper-toggle-button[checked]:not([disabled]) .toggle-bar.tp-yt-paper-toggle-button {
- background-color: var(--main-color) !important;
- opacity: 1 !important;
- }
-
- tp-yt-paper-toggle-button[checked]:not([disabled]) .toggle-button.tp-yt-paper-toggle-button {
- background-color: var(--main-text) !important;
- }
-
- /*language*/
- ytd-dropdown-renderer[has-background] tp-yt-paper-dropdown-menu-light.ytd-dropdown-renderer {
- background-color: var(--hover-background) !important;
- }
-
- label.label-is-floating.tp-yt-paper-dropdown-menu-light,
- #label.ytd-dropdown-item-renderer {
- color: var(--main-text) !important;
- }
-
- #input.tp-yt-paper-dropdown-menu-light {
- color: var(--dimmer-text) !important;
- }
-
- /*Playback*/
- .yt-help-icon {
- filter: invert(1);
- }
-
- .yt-uix-clickcard-card-content,
- .yt-uix-hovercard-card-content {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- .yt-uix-clickcard-card-border,
- .yt-uix-hovercard-card-border {
- border-color: var(--hover-background) !important;
- }
-
- .yt-uix-clickcard-card-flip .yt-uix-card-body-arrow-horizontal,
- .yt-uix-hovercard-card-flip .yt-uix-card-body-arrow-horizontal {
- border-right-color: var(--hover-background) !important;
- }
-
- .exp-kevlar-settings .account-page .yt-uix-button/*save buttons*/
- {
- background: var(--main-color) !important;
- border-color: var(--main-color) !important;
- color: var(--main-text) !important;
- opacity: .9;
- }
-
- .exp-kevlar-settings .account-page .yt-uix-button:hover {
- opacity: 1 !important;
- }
-
- /*Social*/
- .social-connector {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- /*TV*/
- .howto-circle {
- background-color: var(--hover-background) !important;
- color: var(--main-color) !important;
- }
-
- .howto-text {
- color: var(--dimmer-text) !important;
- }
-
- .remote-icon {
- filter: invert(1) brightness(200%);
- }
-
- h3.pairing-section-header {
- color: var(--main-text)
- }
-
- .yt-uix-form-input-select,
- .yt-uix-form-input-text,
- .yt-uix-form-input-textarea {
- border-color: var(--hover-background) !important;
- }
-
- #account-page-header-avatar.howto-promo-image {
- filter: invert(1) grayscale(1);
- }
-
- /*TV code*/
- .yt-uix-form-input-select,
- .yt-uix-form-input-text,
- .yt-uix-form-input-textarea {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- /*Footer*/
- body #footer-container {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- color: var(--main-text) !important;
- }
-
- #footer-main/*divider*/
- {
- border-color: var(--hover-background) !important;
- }
-
- /*links*/
- #footer-links-primary a {
- color: var(--main-text) !important;
- }
-
- #footer-links-secondary a {
- color: var(--dimmer-text) !important;
- }
-
- #footer-links-primary a:hover,
- #footer-links-secondary a:hover {
- color: var(--main-color) !important;
- }
-
- /*buttons*/
- #footer .yt-uix-button-group .yt-uix-button,
- #footer .pickers li,
- #footer .footer-history,
- #footer #google-help {
- background: var(--second-background) !important;
- border-color: var(--second-background) !important;
- color: var(--main-text) !important;
- box-shadow: none !important;
- }
-
- .yt-uix-button-default.yt-uix-button-toggled:hover {
- box-shadow: none !important;
- }
-
- #footer .yt-uix-button-icon-footer-language,
- #footer .yt-uix-button-icon-footer-history,
- #footer .yt-uix-button-icon-questionmark {
- filter: invert(1);
- }
-
- .yt-uix-button-arrow {
- border-top-color: var(--main-text) !important;
- }
-
- #yt-picker-country-footer,
- #yt-picker-language-footer,
- #yt-picker-safetymode-footer {
- background: var(--second-background) !important;
- border-color: var(--second-background) !important;
- color: var(--main-text) !important;
- }
-
- .yt-picker-header,
- #safety-form p.safety-submit/*divider*/
- {
- border-color: var(--hover-background) !important;
- }
-
- .yt-picker-header h3.yt,
- .yt-picker-content strong {
- color: var(--main-text) !important;
- }
-
- #yt-picker-country-footer .yt-default .yt-notes,
- p.yt-notes,
- #safety-mode-description li {
- color: var(--dimmer-text) !important;
- }
-
- #yt-picker-country-footer .yt-picker-content a,
- .yt-picker-content button {
- color: var(--main-color) !important;
- }
-
- #yt-picker-safetymode-footer button/*save*/
- {
- background: var(--main-color) !important;
- border-color: var(--main-color) !important;
- color: var(--main-text) !important;
- opacity: .9;
- }
-
- /*Notification buttom corner - for settings, watch later etc*/
- tp-yt-paper-toast {
- background: var(--hover-background) !important;
- color: var(--main-text) !important;
- box-shadow: var(--shadow) !important;
- }
-
- /*Topic auto-generated by youtube*/
- #auto-generated.ytd-interactive-tabbed-header-renderer,
- #metadata.ytd-interactive-tabbed-header-renderer {
- color: var(--dimmer-text) !important;
- }
-
- /*Keyboard shortcuts Shift-/ */
- ytd-hotkey-dialog-renderer[dialog][dialog][dialog] {
- background-color: var(--main-background) !important;
- }
-
- ytd-hotkey-dialog-section-option-renderer {
- border-color: var(--hover-background) !important;
- }
-
-
- /*SponsorBlock*/
- /*logo change*/
- #sponsorBlockPopupLogo,
- .sponsorSkipLogo {
- display: block !important;
- -moz-box-sizing: border-box !important;
- box-sizing: border-box !important;
- background: url(https://raw.githubusercontent.com/RaitaroH/YouTube-DeepDark/master/YT_Images/IconSponsorBlocker256px.png) top left no-repeat !important;
- background-size: 100% !important;
- position: relative !important;
- }
-
- #sponsorBlockPopupLogo {
- width: 40px !important;
- height: 40px !important;
- padding-left: 40px !important;
- }
-
- /*for overlays*/
- .sponsorSkipLogo {
- width: 18px !important;
- height: 18px !important;
- padding-left: 18px !important;
- }
-
- .sponsorBlockTooltip {
- background-color: var(--hover-background) !important;
- }
-
- /*Fix like, dislike and share icons and text using wrong color*/
- .yt-spec-button-shape-next__icon,
- .ytd-segmented-like-dislike-button-renderer > yt-button-shape > button > .yt-spec-button-shape-next--button-text-content,
- .ytd-menu-renderer > yt-button-shape > button > .yt-spec-button-shape-next--button-text-content,
- .yt-spec-button-shape-next > span#text {
- color: var(--main-text)
- }
-
- /*Player tooltip background*/
- .ytp-tooltip-text {
- background: var(--hover-background) !important
- }
-}
-
-@-moz-document url-prefix('https://www.youtube.com/redirect') {
- /*Are you sure you want to leave YouTube? redirect*/
- /*seems like youtube will never update this page so, yeah*/
- #invalid-token-redirect-warning-text/*h1*/
- {
- color: var(--main-text) !important;
- }
-
- /*span*/
- #redirect-main-text {
- color: var(--dimmer-text) !important;
- }
-
- #redirect-main-text .bolded {
- color: var(--main-color);
- }
-
- /*search*/
- #masthead-search-terms-border {
- border-color: var(--hover-background) !important;
- background-color: var(--hover-background) !important;
- box-shadow: var(--shadow) !important;
- }
-
- #masthead-search-terms {
- color: var(--main-text);
- }
-
- .search-button {
- background: var(--hover-background) !important;
- border-color: var(--hover-background) !important;
- }
-
- /*๐ is missing, nice*/
- .search-button-content {
- background: no-repeat url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNy4zOTE3IDE2LjgwODNMMTIuNzMzMyAxMi4xNUMxMy42MjUgMTEuMTI1IDE0LjE2NjcgOS43OTE2NyAxNC4xNjY3IDguMzMzMzNDMTQuMTY2NyA1LjEwODMzIDExLjU1ODMgMi41IDguMzMzMzMgMi41QzUuMTA4MzMgMi41IDIuNSA1LjEwODMzIDIuNSA4LjMzMzMzQzIuNSAxMS41NTgzIDUuMTA4MzMgMTQuMTY2NyA4LjMzMzMzIDE0LjE2NjdDOS43OTE2NyAxNC4xNjY3IDExLjEyNSAxMy42MjUgMTIuMTUgMTIuNzQxN0wxNi44MDgzIDE3LjRMMTcuMzkxNyAxNi44MDgzWk04LjMzMzMzIDEzLjMzMzNDNS41NzUgMTMuMzMzMyAzLjMzMzMzIDExLjA5MTcgMy4zMzMzMyA4LjMzMzMzQzMuMzMzMzMgNS41NzUgNS41NzUgMy4zMzMzMyA4LjMzMzMzIDMuMzMzMzNDMTEuMDkxNyAzLjMzMzMzIDEzLjMzMzMgNS41NzUgMTMuMzMzMyA4LjMzMzMzQzEzLjMzMzMgMTEuMDkxNyAxMS4wOTE3IDEzLjMzMzMgOC4zMzMzMyAxMy4zMzMzWiIgZmlsbD0iIzAzMDMwMyIvPjwvc3ZnPg==") !important;
- filter: invert(1);
- }
-
- #redirect-backto-safety-button:hover {
- color: var(--main-text) !important;
- }
-
- /*logo icon is also missing, but this __should__ change in the future*/
- .logo {
- background: no-repeat url("https://raw.githubusercontent.com/RaitaroH/YouTube-DeepDark/master/YT_Images/Logo.png") !important;
- background-size: 70% !important;
- padding: 10px;
- width: 120px !important;
- height: 33px !important;
- box-sizing: border-box !important;
- position: relative;
- right: -30px;
- }
-
- #logo-container .content-region {
- color: var(--main-text) !important;
- }
-}
-
-/* Youtube buttons shape */
-.yt-core-attributed-string--white-space-no-wrap {
- color: var(--main-color);
-}
diff --git a/styles/youtubemusic/README.md b/styles/youtubemusic/README.md
deleted file mode 100644
index fc5c68d1fb..0000000000
--- a/styles/youtubemusic/README.md
+++ /dev/null
@@ -1,130 +0,0 @@
-
-
-
- 
- 
- 
-
-
-
-
-
-
-## Previews
-
-
-๐ป Latte
-
-
-
-๐ชด Frappรฉ
-
-
-
-๐บ Macchiato
-
-
-
-๐ฟ Mocha
-
-
-
-## Usage
-### [Youtube Music Desktop App (th-ch)](https://github.com/th-ch/youtube-music)
-
-1. Create a new css file with one of the flavour imports below.
-2. Assuming you have the latest build with the theme selection menu, open the app, click `Options > Visual Tweaks > Theme > Import custom CSS file`, and choose the CSS file.
-
-### [Youtube Music Desktop App (ytmdesktop)](https://github.com/ytmdesktop/ytmdesktop)
-
-1. Navigate to the settings of the Youtube Music Desktop App.
-2. Go to the appearances tab and turn on custom theme.
-3. Click on the pencil icon to open up the editor window.
-4. Paste in the flavour import for your flavour and press the save button.
-
-### The code
-
-```css
-/* latte */
-@import url("https://catppuccin.github.io/youtubemusic/src/latte.css");
-/* frappe */
-@import url("https://catppuccin.github.io/youtubemusic/src/frappe.css");
-/* macchiato */
-@import url("https://catppuccin.github.io/youtubemusic/src/macchiato.css");
-/* mocha */
-@import url("https://catppuccin.github.io/youtubemusic/src/mocha.css");
-
-/* if you want to change the accent color, paste this in aswell and change the hex code - or use one of the predefined colors with var(--ctp-'color') - e.g. var(--ctp-maroon) */
-html:not(.style-scope) {
- --ctp-accent: #f5e0dc !important;
-}
-```
-
-### [Stylus](https://github.com/openstyles/stylus)
-
-1. Install Stylus extension for [Firefox](https://addons.mozilla.org/en-US/firefox/addon/styl-us/), [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) or [Opera](https://addons.opera.com/en-gb/extensions/details/stylus/)
-2. Then install with Stylus (click on the link):
- - [๐ง Catppuccin for Youtube Music](https://github.com/catppuccin/youtubemusic/raw/main/src/youtubemusic.user.css)
-3. Choose your flavor and accent color in the Configure window in Stylus Options
-
-### Overriding Colors
-
-If you wish to change the default colors, do the following:
-
-#### For [Youtube Music Desktop App (th-ch)](https://github.com/th-ch/youtube-music)
-
-Change the respective colors in the css file you chose to the values you need, for example:
-
-```css
- --ctp-base: #020202;
- --ctp-crust: #010101;
- --ctp-mantle: #000;
-/* OLEDpuccin*/
-```
-
-#### For [Youtube Music Desktop App (ytmdesktop)](https://github.com/ytmdesktop/ytmdesktop) or Stylus
-
-Paste the modified colors at the end of your theme of choice (ytmdesktop), or within `html:not(.style-scope)` (Stylus):
-
-```css
- --ctp-base: #020202; !important;
- --ctp-crust: #010101; !important;
- --ctp-mantle: #000; !important;
-/* OLEDpuccin */
-```
-
-You can find the references to the available colors you can change in the beginning of any theme CSS file.
-
-## ๐ Thanks to
-
-### Current maintainer
-
-- [kerichdev](https://github.com/kerichdev)
-
-### Contributions
-
-- [Anubis](https://github.com/anubisnekhet)
-- [OceanicSquirrel](https://github.com/OceanicSquirrel)
-
-### Previous maintainer
-
-- [rubyowo](https://github.com/rubyowo)
-
-
-
-
-
-
-
-
- Copyright © 2021-present Catppuccin Org
-
-
-
-
-
diff --git a/styles/youtubemusic/src/youtubemusic.user.css b/styles/youtubemusic/catppuccin.user.css
similarity index 97%
rename from styles/youtubemusic/src/youtubemusic.user.css
rename to styles/youtubemusic/catppuccin.user.css
index 83715eae9b..35a1f42895 100644
--- a/styles/youtubemusic/src/youtubemusic.user.css
+++ b/styles/youtubemusic/catppuccin.user.css
@@ -1,6 +1,6 @@
/* ==UserStyle==
@name Youtube Music Catppuccin
-@namespace github.com/catppuccin/youtubemusic
+@namespace github.com/catppuccin/userstyles/styles/youtubemusic
@version 0.3.0
@description Soothing pastel theme for Youtube Music
@author Catppuccin
diff --git a/styles/youtubemusic/src/frappe.css b/styles/youtubemusic/src/frappe.css
index 635885d9a1..e025523031 100644
--- a/styles/youtubemusic/src/frappe.css
+++ b/styles/youtubemusic/src/frappe.css
@@ -874,7 +874,7 @@ yt-formatted-string#corrected.style-scope.yt-search-query-correction
color: var(--ctp-text) !important;
}
-a.yt-simple-endpoint.style-scope.ytmusic-chip-cloud-chip-renderer
+ytmusic-chip-cloud-chip-renderer[enable-bauhaus-style][chip-style=STYLE_LARGE_TRANSLUCENT_AND_SELECTED_WHITE][is-selected]:not(.iron-selected) a.ytmusic-chip-cloud-chip-renderer
{
border: 1px solid var(--ctp-accent) !important;
}
diff --git a/styles/youtubemusic/src/latte.css b/styles/youtubemusic/src/latte.css
index 4a3a7321cb..1857137612 100644
--- a/styles/youtubemusic/src/latte.css
+++ b/styles/youtubemusic/src/latte.css
@@ -874,7 +874,7 @@ yt-formatted-string#corrected.style-scope.yt-search-query-correction
color: var(--ctp-text) !important;
}
-a.yt-simple-endpoint.style-scope.ytmusic-chip-cloud-chip-renderer
+ytmusic-chip-cloud-chip-renderer[enable-bauhaus-style][chip-style=STYLE_LARGE_TRANSLUCENT_AND_SELECTED_WHITE][is-selected]:not(.iron-selected) a.ytmusic-chip-cloud-chip-renderer
{
border: 1px solid var(--ctp-accent) !important;
}
diff --git a/styles/youtubemusic/src/macchiato.css b/styles/youtubemusic/src/macchiato.css
index 18466d580b..60ec884f59 100644
--- a/styles/youtubemusic/src/macchiato.css
+++ b/styles/youtubemusic/src/macchiato.css
@@ -874,7 +874,7 @@ yt-formatted-string#corrected.style-scope.yt-search-query-correction
color: var(--ctp-text) !important;
}
-a.yt-simple-endpoint.style-scope.ytmusic-chip-cloud-chip-renderer
+ytmusic-chip-cloud-chip-renderer[enable-bauhaus-style][chip-style=STYLE_LARGE_TRANSLUCENT_AND_SELECTED_WHITE][is-selected]:not(.iron-selected) a.ytmusic-chip-cloud-chip-renderer
{
border: 1px solid var(--ctp-accent) !important;
}
diff --git a/styles/youtubemusic/src/mocha.css b/styles/youtubemusic/src/mocha.css
index 4fbaaa1db1..eb76c81e82 100644
--- a/styles/youtubemusic/src/mocha.css
+++ b/styles/youtubemusic/src/mocha.css
@@ -874,7 +874,7 @@ yt-formatted-string#corrected.style-scope.yt-search-query-correction
color: var(--ctp-text) !important;
}
-a.yt-simple-endpoint.style-scope.ytmusic-chip-cloud-chip-renderer
+ytmusic-chip-cloud-chip-renderer[enable-bauhaus-style][chip-style=STYLE_LARGE_TRANSLUCENT_AND_SELECTED_WHITE][is-selected]:not(.iron-selected) a.ytmusic-chip-cloud-chip-renderer
{
border: 1px solid var(--ctp-accent) !important;
}
-
-
-
-
