diff --git a/styles/gmail/catppuccin.user.less b/styles/gmail/catppuccin.user.less index 8fcc5c816a..4bb3698c4d 100644 --- a/styles/gmail/catppuccin.user.less +++ b/styles/gmail/catppuccin.user.less @@ -1,4 +1,4 @@ -/* ==UserStyle== +/* ==UserStyle== @name Gmail Catppuccin @namespace github.com/catppuccin/userstyles/styles/gmail @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/gmail @@ -10,12 +10,140 @@ @license MIT @preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@catppuccin: { + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +}; + + +@catppuccin-filters: { + @latte: { @rosewater: brightness(0) saturate(100%) invert(62%) sepia(42%) saturate(525%) hue-rotate(322deg) brightness(94%) contrast(82%); @flamingo: brightness(0) saturate(100%) invert(54%) sepia(48%) saturate(532%) hue-rotate(311deg) brightness(95%) contrast(82%); @pink: brightness(0) saturate(100%) invert(55%) sepia(54%) saturate(548%) hue-rotate(266deg) brightness(100%) contrast(83%); @mauve: brightness(0) saturate(100%) invert(26%) sepia(31%) saturate(3766%) hue-rotate(247deg) brightness(114%) contrast(114%); @red: brightness(0) saturate(100%) invert(28%) sepia(41%) saturate(3765%) hue-rotate(329deg) brightness(79%) contrast(110%); @maroon: brightness(0) saturate(100%) invert(51%) sepia(51%) saturate(3760%) hue-rotate(322deg) brightness(86%) contrast(111%); @peach: brightness(0) saturate(100%) invert(33%) sepia(99%) saturate(2022%) hue-rotate(4deg) brightness(118%) contrast(103%); @yellow: brightness(0) saturate(100%) invert(49%) sepia(94%) saturate(2020%) hue-rotate(0deg) brightness(120%) contrast(75%); @green: brightness(0) saturate(100%) invert(60%) sepia(63%) saturate(538%) hue-rotate(63deg) brightness(76%) contrast(90%); @teal: brightness(0) saturate(100%) invert(39%) sepia(67%) saturate(1026%) hue-rotate(144deg) brightness(95%) contrast(93%); @sky: brightness(0) saturate(100%) invert(53%) sepia(44%) saturate(3749%) hue-rotate(164deg) brightness(95%) contrast(97%); @sapphire: brightness(0) saturate(100%) invert(41%) sepia(70%) saturate(1021%) hue-rotate(151deg) brightness(103%) contrast(78%); @blue: brightness(0) saturate(100%) invert(30%) sepia(36%) saturate(3759%) hue-rotate(209deg) brightness(103%) contrast(110%); @lavender: brightness(0) saturate(100%) invert(48%) sepia(34%) saturate(3762%) hue-rotate(213deg) brightness(108%) contrast(110%); @text: brightness(0) saturate(100%) invert(43%) sepia(43%) saturate(515%) hue-rotate(196deg) brightness(49%) contrast(68%); @subtext1: brightness(0) saturate(100%) invert(63%) sepia(28%) saturate(515%) hue-rotate(196deg) brightness(48%) contrast(67%); @subtext0: brightness(0) saturate(100%) invert(65%) sepia(15%) saturate(535%) hue-rotate(195deg) brightness(63%) contrast(82%); @overlay2: brightness(0) saturate(100%) invert(63%) sepia(20%) saturate(521%) hue-rotate(195deg) brightness(76%) contrast(47%); @overlay1: brightness(0) saturate(100%) invert(72%) sepia(10%) saturate(534%) hue-rotate(195deg) brightness(81%) contrast(70%); @overlay0: brightness(0) saturate(100%) invert(82%) sepia(25%) saturate(510%) hue-rotate(196deg) brightness(92%) contrast(45%); @surface2: brightness(0) saturate(100%) invert(84%) sepia(6%) saturate(528%) hue-rotate(189deg) brightness(88%) contrast(76%); @surface1: brightness(0) saturate(100%) invert(93%) sepia(24%) saturate(506%) hue-rotate(182deg) brightness(86%) contrast(83%); @surface0: brightness(0) saturate(100%) invert(94%) sepia(22%) saturate(523%) hue-rotate(179deg) brightness(96%) contrast(76%); @base: brightness(0) saturate(100%) invert(91%) sepia(37%) saturate(521%) hue-rotate(181deg) brightness(106%) contrast(94%); @mantle: brightness(0) saturate(100%) invert(89%) sepia(26%) saturate(508%) hue-rotate(188deg) brightness(107%) contrast(90%); @crust: brightness(0) saturate(100%) invert(84%) sepia(32%) saturate(502%) hue-rotate(192deg) brightness(111%) contrast(84%); }; + @frappe: { @rosewater: brightness(0) saturate(100%) invert(80%) sepia(22%) saturate(510%) hue-rotate(315deg) brightness(113%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(78%) sepia(26%) saturate(512%) hue-rotate(311deg) brightness(106%) contrast(86%); @pink: brightness(0) saturate(100%) invert(80%) sepia(22%) saturate(532%) hue-rotate(277deg) brightness(100%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(69%) sepia(37%) saturate(513%) hue-rotate(224deg) brightness(95%) contrast(90%); @red: brightness(0) saturate(100%) invert(58%) sepia(41%) saturate(524%) hue-rotate(310deg) brightness(97%) contrast(85%); @maroon: brightness(0) saturate(100%) invert(67%) sepia(34%) saturate(522%) hue-rotate(309deg) brightness(100%) contrast(83%); @peach: brightness(0) saturate(100%) invert(64%) sepia(32%) saturate(511%) hue-rotate(336deg) brightness(100%) contrast(97%); @yellow: brightness(0) saturate(100%) invert(78%) sepia(25%) saturate(512%) hue-rotate(359deg) brightness(107%) contrast(79%); @green: brightness(0) saturate(100%) invert(84%) sepia(25%) saturate(547%) hue-rotate(49deg) brightness(93%) contrast(82%); @teal: brightness(0) saturate(100%) invert(82%) sepia(21%) saturate(545%) hue-rotate(122deg) brightness(90%) contrast(81%); @sky: brightness(0) saturate(100%) invert(87%) sepia(24%) saturate(513%) hue-rotate(149deg) brightness(92%) contrast(85%); @sapphire: brightness(0) saturate(100%) invert(76%) sepia(32%) saturate(529%) hue-rotate(166deg) brightness(93%) contrast(85%); @blue: brightness(0) saturate(100%) invert(65%) sepia(33%) saturate(518%) hue-rotate(185deg) brightness(96%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(75%) sepia(33%) saturate(509%) hue-rotate(201deg) brightness(96%) contrast(97%); @text: brightness(0) saturate(100%) invert(83%) sepia(29%) saturate(508%) hue-rotate(192deg) brightness(97%) contrast(98%); @subtext1: brightness(0) saturate(100%) invert(81%) sepia(13%) saturate(517%) hue-rotate(190deg) brightness(95%) contrast(85%); @subtext0: brightness(0) saturate(100%) invert(78%) sepia(16%) saturate(515%) hue-rotate(191deg) brightness(95%) contrast(68%); @overlay2: brightness(0) saturate(100%) invert(70%) sepia(17%) saturate(520%) hue-rotate(191deg) brightness(91%) contrast(70%); @overlay1: brightness(0) saturate(100%) invert(73%) sepia(19%) saturate(514%) hue-rotate(189deg) brightness(75%) contrast(69%); @overlay0: brightness(0) saturate(100%) invert(57%) sepia(28%) saturate(505%) hue-rotate(192deg) brightness(75%) contrast(57%); @surface2: brightness(0) saturate(100%) invert(55%) sepia(26%) saturate(532%) hue-rotate(191deg) brightness(62%) contrast(64%); @surface1: brightness(0) saturate(100%) invert(39%) sepia(39%) saturate(506%) hue-rotate(190deg) brightness(59%) contrast(63%); @surface0: brightness(0) saturate(100%) invert(11%) sepia(65%) saturate(1032%) hue-rotate(204deg) brightness(86%) contrast(58%); @base: brightness(0) saturate(100%) invert(11%) sepia(75%) saturate(1023%) hue-rotate(204deg) brightness(60%) contrast(70%); @mantle: brightness(0) saturate(100%) invert(47%) sepia(27%) saturate(530%) hue-rotate(194deg) brightness(31%) contrast(94%); @crust: brightness(0) saturate(100%) invert(30%) sepia(27%) saturate(523%) hue-rotate(194deg) brightness(43%) contrast(96%); }; + @macchiato: { @rosewater: brightness(0) saturate(100%) invert(83%) sepia(22%) saturate(509%) hue-rotate(314deg) brightness(113%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(78%) sepia(22%) saturate(512%) hue-rotate(311deg) brightness(109%) contrast(88%); @pink: brightness(0) saturate(100%) invert(75%) sepia(23%) saturate(509%) hue-rotate(279deg) brightness(109%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(61%) sepia(70%) saturate(1021%) hue-rotate(210deg) brightness(109%) contrast(93%); @red: brightness(0) saturate(100%) invert(54%) sepia(37%) saturate(528%) hue-rotate(301deg) brightness(110%) contrast(87%); @maroon: brightness(0) saturate(100%) invert(66%) sepia(32%) saturate(496%) hue-rotate(306deg) brightness(99%) contrast(89%); @peach: brightness(0) saturate(100%) invert(69%) sepia(34%) saturate(532%) hue-rotate(335deg) brightness(101%) contrast(91%); @yellow: brightness(0) saturate(100%) invert(87%) sepia(19%) saturate(527%) hue-rotate(0deg) brightness(96%) contrast(93%); @green: brightness(0) saturate(100%) invert(86%) sepia(26%) saturate(541%) hue-rotate(53deg) brightness(100%) contrast(75%); @teal: brightness(0) saturate(100%) invert(85%) sepia(22%) saturate(544%) hue-rotate(117deg) brightness(96%) contrast(78%); @sky: brightness(0) saturate(100%) invert(84%) sepia(28%) saturate(526%) hue-rotate(147deg) brightness(98%) contrast(81%); @sapphire: brightness(0) saturate(100%) invert(75%) sepia(42%) saturate(530%) hue-rotate(168deg) brightness(93%) contrast(91%); @blue: brightness(0) saturate(100%) invert(65%) sepia(33%) saturate(519%) hue-rotate(182deg) brightness(98%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(73%) sepia(33%) saturate(510%) hue-rotate(199deg) brightness(98%) contrast(99%); @text: brightness(0) saturate(100%) invert(73%) sepia(80%) saturate(1008%) hue-rotate(190deg) brightness(120%) contrast(92%); @subtext1: brightness(0) saturate(100%) invert(78%) sepia(12%) saturate(517%) hue-rotate(191deg) brightness(101%) contrast(81%); @subtext0: brightness(0) saturate(100%) invert(78%) sepia(15%) saturate(521%) hue-rotate(190deg) brightness(95%) contrast(70%); @overlay2: brightness(0) saturate(100%) invert(69%) sepia(16%) saturate(521%) hue-rotate(192deg) brightness(90%) contrast(72%); @overlay1: brightness(0) saturate(100%) invert(68%) sepia(16%) saturate(523%) hue-rotate(191deg) brightness(77%) contrast(80%); @overlay0: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(535%) hue-rotate(194deg) brightness(63%) contrast(78%); @surface2: brightness(0) saturate(100%) invert(52%) sepia(34%) saturate(510%) hue-rotate(193deg) brightness(54%) contrast(61%); @surface1: brightness(0) saturate(100%) invert(46%) sepia(36%) saturate(516%) hue-rotate(194deg) brightness(46%) contrast(72%); @surface0: brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(513%) hue-rotate(194deg) brightness(39%) contrast(82%); @base: brightness(0) saturate(100%) invert(34%) sepia(36%) saturate(527%) hue-rotate(195deg) brightness(38%) contrast(95%); @mantle: brightness(0) saturate(100%) invert(29%) sepia(42%) saturate(541%) hue-rotate(198deg) brightness(30%) contrast(92%); @crust: brightness(0) saturate(100%) invert(27%) sepia(45%) saturate(543%) hue-rotate(200deg) brightness(25%) contrast(93%); }; + @mocha: { @rosewater: brightness(0) saturate(100%) invert(84%) sepia(22%) saturate(508%) hue-rotate(312deg) brightness(113%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(79%) sepia(23%) saturate(510%) hue-rotate(311deg) brightness(110%) contrast(90%); @pink: brightness(0) saturate(100%) invert(76%) sepia(28%) saturate(508%) hue-rotate(290deg) brightness(112%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(63%) sepia(71%) saturate(1021%) hue-rotate(208deg) brightness(110%) contrast(94%); @red: brightness(0) saturate(100%) invert(61%) sepia(33%) saturate(540%) hue-rotate(293deg) brightness(101%) contrast(90%); @maroon: brightness(0) saturate(100%) invert(70%) sepia(25%) saturate(536%) hue-rotate(301deg) brightness(100%) contrast(84%); @peach: brightness(0) saturate(100%) invert(73%) sepia(36%) saturate(519%) hue-rotate(332deg) brightness(100%) contrast(93%); @yellow: brightness(0) saturate(100%) invert(85%) sepia(27%) saturate(512%) hue-rotate(336deg) brightness(108%) contrast(96%); @green: brightness(0) saturate(100%) invert(86%) sepia(22%) saturate(538%) hue-rotate(63deg) brightness(97%) contrast(88%); @teal: brightness(0) saturate(100%) invert(90%) sepia(24%) saturate(532%) hue-rotate(105deg) brightness(95%) contrast(85%); @sky: brightness(0) saturate(100%) invert(81%) sepia(27%) saturate(522%) hue-rotate(141deg) brightness(99%) contrast(86%); @sapphire: brightness(0) saturate(100%) invert(73%) sepia(43%) saturate(529%) hue-rotate(166deg) brightness(95%) contrast(93%); @blue: brightness(0) saturate(100%) invert(57%) sepia(66%) saturate(1020%) hue-rotate(195deg) brightness(115%) contrast(96%); @lavender: brightness(0) saturate(100%) invert(68%) sepia(33%) saturate(517%) hue-rotate(197deg) brightness(105%) contrast(98%); @text: brightness(0) saturate(100%) invert(75%) sepia(82%) saturate(1008%) hue-rotate(189deg) brightness(120%) contrast(90%); @subtext1: brightness(0) saturate(100%) invert(81%) sepia(11%) saturate(522%) hue-rotate(191deg) brightness(100%) contrast(81%); @subtext0: brightness(0) saturate(100%) invert(79%) sepia(13%) saturate(517%) hue-rotate(191deg) brightness(93%) contrast(71%); @overlay2: brightness(0) saturate(100%) invert(70%) sepia(13%) saturate(523%) hue-rotate(191deg) brightness(88%) contrast(75%); @overlay1: brightness(0) saturate(100%) invert(61%) sepia(17%) saturate(527%) hue-rotate(193deg) brightness(85%) contrast(66%); @overlay0: brightness(0) saturate(100%) invert(67%) sepia(15%) saturate(533%) hue-rotate(193deg) brightness(62%) contrast(82%); @surface2: brightness(0) saturate(100%) invert(58%) sepia(30%) saturate(515%) hue-rotate(196deg) brightness(45%) contrast(62%); @surface1: brightness(0) saturate(100%) invert(44%) sepia(36%) saturate(521%) hue-rotate(198deg) brightness(39%) contrast(70%); @surface0: brightness(0) saturate(100%) invert(10%) sepia(79%) saturate(1035%) hue-rotate(212deg) brightness(62%) contrast(70%); @base: brightness(0) saturate(100%) invert(7%) sepia(23%) saturate(3759%) hue-rotate(219deg) brightness(67%) contrast(84%); @mantle: brightness(0) saturate(100%) invert(22%) sepia(29%) saturate(493%) hue-rotate(204deg) brightness(44%) contrast(102%); @crust: brightness(0) saturate(100%) invert(25%) sepia(44%) saturate(549%) hue-rotate(204deg) brightness(18%) contrast(96%); }; +}; + +#lib { + .palette() { + @rosewater: @catppuccin[@@flavor][@rosewater]; + @flamingo: @catppuccin[@@flavor][@flamingo]; + @pink: @catppuccin[@@flavor][@pink]; + @mauve: @catppuccin[@@flavor][@mauve]; + @red: @catppuccin[@@flavor][@red]; + @maroon: @catppuccin[@@flavor][@maroon]; + @peach: @catppuccin[@@flavor][@peach]; + @yellow: @catppuccin[@@flavor][@yellow]; + @green: @catppuccin[@@flavor][@green]; + @teal: @catppuccin[@@flavor][@teal]; + @sky: @catppuccin[@@flavor][@sky]; + @sapphire: @catppuccin[@@flavor][@sapphire]; + @blue: @catppuccin[@@flavor][@blue]; + @lavender: @catppuccin[@@flavor][@lavender]; + @text: @catppuccin[@@flavor][@text]; + @subtext1: @catppuccin[@@flavor][@subtext1]; + @subtext0: @catppuccin[@@flavor][@subtext0]; + @overlay2: @catppuccin[@@flavor][@overlay2]; + @overlay1: @catppuccin[@@flavor][@overlay1]; + @overlay0: @catppuccin[@@flavor][@overlay0]; + @surface2: @catppuccin[@@flavor][@surface2]; + @surface1: @catppuccin[@@flavor][@surface1]; + @surface0: @catppuccin[@@flavor][@surface0]; + @base: @catppuccin[@@flavor][@base]; + @mantle: @catppuccin[@@flavor][@mantle]; + @crust: @catppuccin[@@flavor][@crust]; + @accent: @catppuccin[@@flavor][@@accentColor]; + + @rosewater-filter: @catppuccin-filters[@@flavor][@rosewater]; + @flamingo-filter: @catppuccin-filters[@@flavor][@flamingo]; + @pink-filter: @catppuccin-filters[@@flavor][@pink]; + @mauve-filter: @catppuccin-filters[@@flavor][@mauve]; + @red-filter: @catppuccin-filters[@@flavor][@red]; + @maroon-filter: @catppuccin-filters[@@flavor][@maroon]; + @peach-filter: @catppuccin-filters[@@flavor][@peach]; + @yellow-filter: @catppuccin-filters[@@flavor][@yellow]; + @green-filter: @catppuccin-filters[@@flavor][@green]; + @teal-filter: @catppuccin-filters[@@flavor][@teal]; + @sky-filter: @catppuccin-filters[@@flavor][@sky]; + @sapphire-filter: @catppuccin-filters[@@flavor][@sapphire]; + @blue-filter: @catppuccin-filters[@@flavor][@blue]; + @lavender-filter: @catppuccin-filters[@@flavor][@lavender]; + @text-filter: @catppuccin-filters[@@flavor][@text]; + @subtext1-filter: @catppuccin-filters[@@flavor][@subtext1]; + @subtext0-filter: @catppuccin-filters[@@flavor][@subtext0]; + @overlay2-filter: @catppuccin-filters[@@flavor][@overlay2]; + @overlay1-filter: @catppuccin-filters[@@flavor][@overlay1]; + @overlay0-filter: @catppuccin-filters[@@flavor][@overlay0]; + @surface2-filter: @catppuccin-filters[@@flavor][@surface2]; + @surface1-filter: @catppuccin-filters[@@flavor][@surface1]; + @surface0-filter: @catppuccin-filters[@@flavor][@surface0]; + @base-filter: @catppuccin-filters[@@flavor][@base]; + @mantle-filter: @catppuccin-filters[@@flavor][@mantle]; + @crust-filter: @catppuccin-filters[@@flavor][@crust]; + @accent-filter: @catppuccin-filters[@@flavor][@@accentColor]; + } + + .defaults() { + color-scheme: if(@flavor = latte, light, dark); + + ::selection { + background-color: fade(@accent, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + } + + .rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); + } + + .hslify(@color) { + @raw: e( + %("%s, %s%, %s%", hue(@color), saturation(@color), lightness(@color)) + ); + } + + .css-variables() { + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + } +} @-moz-document domain("mail.google.com") { :root { @@ -53,7 +181,7 @@ text-shadow: none !important; } - /* Gmail logo */ + [src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r5.png"], [src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_dark_1x_r5.png"] { height: unset !important; @@ -64,22 +192,22 @@ content: url("data:image/svg+xml,@{svg}"); } - /* Tooltips */ + .T-ays-iP, .gb_Ac { background-color: @crust; color: @text; } - /* Buttons */ + - /* Solid primary */ + .T-I-atl { background-color: @accent; color: @crust; } - /* Transparent primary */ + .l0, div.b8 .a8k, .bAo > .ad { @@ -90,13 +218,13 @@ } } - /* Transparent secondary */ + .bs0 > .acM, .bti > .btg, .a8Y > .T-I-ax7 { color: @text; - /* Disabled */ + &.acN { color: @subtext0; } @@ -106,7 +234,7 @@ } } - /* Header and sidebars */ + .w-asV, .bkL, .bhZ.bym, @@ -114,7 +242,7 @@ .bhZ.bym.baA { background-color: @mantle; } - /* Header icons */ + .gb_Kc svg, .gb_Pc.gb_Uc svg, .gb_Lc .gb_rd .gb_sd, @@ -123,7 +251,7 @@ .gb_Pc.gb_Uc .gb_sd { color: @text; } - /* Search mail input */ + .gb_Kc .gb_hd { background-color: @surface1; @@ -135,19 +263,19 @@ color: @text; } } - /* Search mail input on focus */ + .gb_hd.gb_id { background-color: @base; } - /* Active search / filter modal */ + .gssb_c { - /* Icons */ + button svg, .asor { filter: @text-filter; } - /* Recent searches */ + .aRp, .gssb_e, .gssb_m { @@ -155,7 +283,7 @@ color: @text; } - /* Hovered recent searches */ + .gssb_i { background-color: @surface0; @@ -163,7 +291,7 @@ border-left-color: @accent; } - /* X icon */ + .gsaq_b { filter: @text-filter; } @@ -174,26 +302,26 @@ border-color: @surface2; } - /* Separator */ + .gssb_l { background-color: @surface0; } - /* Search results */ + - /* Icons */ + .gsoi_0, .asor_o, .gsoi_msra { filter: @text-filter; } - /* People involved */ + .asor_e { color: @subtext0; } } - /* Pill filters */ + .H2 { background-color: @base; border-color: @surface0; @@ -227,7 +355,7 @@ color: @mantle; } } - /* Advanced search/filters modal */ + .ZF-z6, .ZF-zT, .ZF-Av .lJ, @@ -247,7 +375,7 @@ filter: @text-filter; } - /* Text inputs */ + .nr { background-color: @base; color: @text; @@ -257,7 +385,7 @@ } } - /* Calendar input */ + .bs5::after { filter: @text-filter; } @@ -269,18 +397,18 @@ color: @text; border-color: @surface0; - /* Past days */ + .J-JB-KA-Ku-Kk { color: @subtext0; } - /* Future days */ + .J-JB-KA-a1R-JB.J-JB-KA-LH, .J-JB-KA-a1R-JB.J-JB-KA-Ku-Kk, .J-JB-KA-JB.J-JB-KA-a1R-JB { color: @subtext1; } - /* Hovered day */ + .J-JB-KA-JB:not(.J-JB-KA-K8, .J-JB-KA-KO):hover { color: @crust; @@ -289,7 +417,7 @@ } } - /* Selected day */ + .J-JB-KA-KO { color: @crust; @@ -298,7 +426,7 @@ } } - /* Unselected today */ + .J-JB-KA-K8 { color: @crust; @@ -308,7 +436,7 @@ } } - /* Checkbox inputs */ + .bs1 + .bs3, .btj + .aD { color: @text; @@ -318,13 +446,13 @@ } } - /* Dropdown/select inputs */ + .J-JN-M-I { color: @text; } } - /* Sidebar selected item */ + .TK .TO.nZ:active, .TK .TO.ol:active, .TK .TO.nZ, @@ -374,7 +502,25 @@ .bsU { color: @text; } - /* Icons */ + .aT5-aOt-I-JX-atM-Kv, .brC-bsf-aT5-aOt, .nH > .aUx > .bAw > .brC-aT5-aOt-Jw, .bcf, .tRcrsc { + background-color: @mantle; + border-color: @surface1; + color: @text; + } + .aT5-aOt-I-JX-Jw, .aT5-aOt-I-JX-atM { + background-color: @surface0; + } + .FOBRw-I { + background-color: @accent; + } + .bas, .aJf { + background-color: @surface0; + color: @text; + } + .gb_0e > svg > path, .gb_We > svg > path:first-child, .gb_Ve > svg > path:first-child { + fill: @accent; + } + .nZ > .TN.aHS-bnt .qj, .TO:not(.nZ) > .TN > .qj:not([style*="background-color"]), .n6 .n4 .G-asx, @@ -385,7 +531,7 @@ filter: @text-filter; } - /* Compose email button */ + .z0 > .L3 { background-color: @accent; color: @crust; @@ -399,34 +545,34 @@ filter: @crust-filter; } - /* Top section of inbox */ + .bkK > .nH { background-color: @surface0; - /* Icons */ + .bzn, .aqJ .amJ, .adg .adk { filter: @text-filter; } } - /* Inbox categories */ + .aKx > .aKz { color: @text; } - /* Icons */ + .aAy > div { filter: @text-filter; } - /* Currently selected category */ + .J-KU-KO::before { background-color: @text; } - /* Inbox categories hover */ + .aRz.J-KU:hover { background-color: @surface1; } - /* Email count / pagination */ + div[aria-label="Show more messages"] { .Dj { color: @subtext1; @@ -436,10 +582,17 @@ background-color: @text; } } + .aeJ { + background-color: @surface0; + } + .O6 { + background-color: @surface2; + border-color: @surface1; + } .h0 { color: @subtext1; } - /* Inbox footer */ + .md.mj, .aeU .ma, .ma .mb, @@ -449,7 +602,7 @@ .aiD { color: @subtext1; } - /* Storage progress bar */ + .aiC { background-color: @overlay0; @@ -457,12 +610,12 @@ background-color: @subtext0; } } - /* External link icon */ + .aiz { filter: @text-filter; } - /* Read emails */ + .yO { background-color: @base; color: @text; @@ -477,22 +630,27 @@ 0 0 6px 2px @surface1; } } - /* Read email text */ + .zE { + background-color: @base; color: @text; + box-shadow: inset 0 -1px 0 0 @surface0; + &:hover { + box-shadow: + inset 1px 0 0 @surface0, + inset -1px 0 0 @surface0, + 0 0 4px 0 @surface1, + 0 0 6px 2px @surface1; + } } - // Select icon .xY > .T-Jo, td.apU > .T-KT.aXw::before, - // Important icon .pG .a9q, - // Delete/trash icon .aqN, - // Hover action icons .bqY li { filter: @text-filter; } - /* Important icon filled, star icon filled */ + .ha .a9q.pH, .a9q.pH, .aoj, @@ -502,53 +660,47 @@ .pG:hover > .a9q::before { background-color: fade(@yellow, 30%); } - /* Read email dates */ + .yO > .xW { color: @subtext0; } - /* Read email summary truncated */ + .y2 { color: @subtext1; } - /* Selected unread emails */ + .x7 { background-color: @accent; color: @mantle; - /* Dates */ + .xW { color: @crust; } - - // Select icon .xY > .T-Jo, - // Star icon td.apU > .T-KT.aXw::before, - // Important icon .pG .a9q, - // Delete/trash icon .aqN, - // Hover action icons .bqY li { filter: @crust-filter; } } - /* Unsubscribe button */ + .aOd.T-I { color: @text; box-shadow: inset 0 0 0 1px @surface2; } - /* Draft text */ + .boq { color: @red; } - /* No drafts message, trash 30 days message */ + .TD, .Tm .ya { background-color: @surface1; color: @text; } - /* Your social/promotions/updates tab is empty */ + .aRs { background-color: @base; color: @subtext0; @@ -560,20 +712,20 @@ color: @accent; } } - /* You could lose access banner */ + .GR { background-color: @base; - /* Primary text */ + .GX { color: @text; } - /* Subtext */ + .GT { color: @subtext1; } - /* Dismiss button */ + .GW { color: @text; @@ -581,7 +733,7 @@ background-color: @text; } } - /* Add recovery info button */ + .GV { color: @accent; @@ -590,7 +742,7 @@ } } } - /* Attachments chips */ + .brc { box-shadow: inset 0 0 0 1px @surface0; color: @text; @@ -600,18 +752,18 @@ } } - /* Floating menu */ + .J-M, .OO.Pa { background-color: @surface1; - /* Menu section header */ + .J-awr, .asc { color: @subtext1; } - /* Menu item */ + .J-N, .J-Ks-KO .J-N-Jz, @@ -622,13 +774,13 @@ .bmz { color: @text; } - /* Disabled */ + .J-N-JE .J-N-atj, .J-N-JE .J-N-Jz { color: @subtext0 !important; } - /* Checkmark, arrow, checkbox, star, calendar icon */ + .J-Ks-KO .J-N-Jo, .asi .J-Ks-KO::before, .J-Ph-hFsbo, @@ -642,7 +794,7 @@ border-color: @subtext0; } - /* Hovered menu item */ + .J-N-JT, .J-N-JW, .J-LC-JT, @@ -654,12 +806,12 @@ border-color: @overlay1; } - /* Menu section divider */ + .J-Kh { border-top-color: @surface2; } } - /* Modal search input */ + .agd .J-M-JJ input { background-color: @surface1; color: @text; @@ -671,38 +823,38 @@ box-shadow: inset 0 -2px 0 0 @accent; } } - /* Magnifying glass icon */ + .A0 { filter: @text-filter; } - /* Edit label modal */ + div.Kj-JD { background-color: @base; - /* Edit label text */ + span.Kj-JD-K7-K0 { color: @text; } - /* Close X icon */ + span.Kj-JD-K7-Jq::after { filter: @text-filter; } #input-styling(); - /* Input labels */ + div.Kj-JD-Jz { color: @subtext1; } - /* Cancel button */ + div.Kj-JD-Jl > button, .bBh .Kj-JD-Jl > .J-at1-auR { color: @subtext1; } - /* Save button */ + div.Kj-JD-Jl > button.J-at1-atl, div.Kj-JD-Jl > button.J-at1-auR { background-color: @accent; @@ -710,18 +862,18 @@ } } - /* Toast notifications */ + .bAp.b8.UC .vh { background-color: @crust; color: @text; } - /* Close icon */ + .b8 .bBe .bBf { filter: @text-filter; } - /* Compose mail window */ - /* Top header bar */ + + .Hy.Hy .m, .IG { background-color: @mantle; @@ -766,7 +918,7 @@ .oL { color: @subtext0; } - /* Bottom toolbar icons */ + .aaA, .btC .dv, .btC .og.T-I-J3, @@ -777,7 +929,7 @@ .J-Z-M-I-J6-H > .J-Z-M-I-JG { filter: @text-filter; } - /* Floating toolbar (expanded window) */ + .J-Z { background-color: @mantle; @@ -786,7 +938,7 @@ color: @subtext1; } } - /* Send button */ + .gU .v7.T-I:not(.btz), .gU .hG:not(.v6) { background-color: @accent; @@ -796,12 +948,12 @@ .SI .hG > .G-asx { filter: @crust-filter; } - /* Contact autofill */ + .afC, .bvx { background: @mantle; - /* Contact list item */ + .agJ { .aL8, .aXS { @@ -818,7 +970,7 @@ --pkw-outline: @surface0; --pkw-outline-variant: @surface0; --pkw-on-surface-variant: @text; - /* Contact chip */ + .agh, .bbV { background: @base; @@ -834,13 +986,13 @@ } } - /* Settings */ + .dt { color: @text; } - /* Navigation header */ + .v { - /* Tabs */ + .fY, .f1 { background-color: @surface0; @@ -850,23 +1002,23 @@ } } - /* Currently selected tab */ + .fZ { box-shadow: inset 0 -2px 0 0 @accent; } } - /* Main panel */ + .r4 { background-color: @base; color: @text; - /* Dividers */ + .r7 td, .Jb .J0:not(:last-child) { border-bottom-color: @surface0; } - /* Links */ + .r7 .e, .sA, .r4 .e, @@ -885,13 +1037,13 @@ color: @text; border-color: @surface0 !important; } - /* Some buttons */ + .Uu { box-shadow: inset 0 0 0 1px @surface0; color: @accent; } } - /* Labels page */ + .alO { background-color: @base; color: @text; @@ -900,29 +1052,29 @@ color: @subtext1; } - /* Table items */ + .To.Ze { background-color: @surface0; } - /* Links */ + .alP { color: @accent; } - /* Dividers */ + .rZ { background-color: @surface0; } } - /* Confirm popup modal */ + div[aria-modal="true"] { --gm3-dialog-refactored-container-color: @base; --gm3-dialog-refactored-supporting-text-color: @text; --gm3-dialog-refactored-headline-color: @text; - /* Buttons */ + [data-mdc-dialog-action="ok"] { background-color: @accent; --gm3-button-text-label-text-color: @crust; diff --git a/styles/google-drive/catppuccin.user.less b/styles/google-drive/catppuccin.user.less index dedab12ae4..d8219088fd 100644 --- a/styles/google-drive/catppuccin.user.less +++ b/styles/google-drive/catppuccin.user.less @@ -1,4 +1,4 @@ -/* ==UserStyle== +/* ==UserStyle== @name Google Drive Catppuccin @namespace github.com/catppuccin/userstyles/styles/google-drive @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google-drive @@ -10,12 +10,142 @@ @license MIT @preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] + +@var checkbox oled "Enable black background (OLED)" 0 ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@catppuccin: { + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +}; + +@catppuccin-filters: { + @latte: { @rosewater: brightness(0) saturate(100%) invert(62%) sepia(42%) saturate(525%) hue-rotate(322deg) brightness(94%) contrast(82%); @flamingo: brightness(0) saturate(100%) invert(54%) sepia(48%) saturate(532%) hue-rotate(311deg) brightness(95%) contrast(82%); @pink: brightness(0) saturate(100%) invert(55%) sepia(54%) saturate(548%) hue-rotate(266deg) brightness(100%) contrast(83%); @mauve: brightness(0) saturate(100%) invert(26%) sepia(31%) saturate(3766%) hue-rotate(247deg) brightness(114%) contrast(114%); @red: brightness(0) saturate(100%) invert(28%) sepia(41%) saturate(3765%) hue-rotate(329deg) brightness(79%) contrast(110%); @maroon: brightness(0) saturate(100%) invert(51%) sepia(51%) saturate(3760%) hue-rotate(322deg) brightness(86%) contrast(111%); @peach: brightness(0) saturate(100%) invert(33%) sepia(99%) saturate(2022%) hue-rotate(4deg) brightness(118%) contrast(103%); @yellow: brightness(0) saturate(100%) invert(49%) sepia(94%) saturate(2020%) hue-rotate(0deg) brightness(120%) contrast(75%); @green: brightness(0) saturate(100%) invert(60%) sepia(63%) saturate(538%) hue-rotate(63deg) brightness(76%) contrast(90%); @teal: brightness(0) saturate(100%) invert(39%) sepia(67%) saturate(1026%) hue-rotate(144deg) brightness(95%) contrast(93%); @sky: brightness(0) saturate(100%) invert(53%) sepia(44%) saturate(3749%) hue-rotate(164deg) brightness(95%) contrast(97%); @sapphire: brightness(0) saturate(100%) invert(41%) sepia(70%) saturate(1021%) hue-rotate(151deg) brightness(103%) contrast(78%); @blue: brightness(0) saturate(100%) invert(30%) sepia(36%) saturate(3759%) hue-rotate(209deg) brightness(103%) contrast(110%); @lavender: brightness(0) saturate(100%) invert(48%) sepia(34%) saturate(3762%) hue-rotate(213deg) brightness(108%) contrast(110%); @text: brightness(0) saturate(100%) invert(43%) sepia(43%) saturate(515%) hue-rotate(196deg) brightness(49%) contrast(68%); @subtext1: brightness(0) saturate(100%) invert(63%) sepia(28%) saturate(515%) hue-rotate(196deg) brightness(48%) contrast(67%); @subtext0: brightness(0) saturate(100%) invert(65%) sepia(15%) saturate(535%) hue-rotate(195deg) brightness(63%) contrast(82%); @overlay2: brightness(0) saturate(100%) invert(63%) sepia(20%) saturate(521%) hue-rotate(195deg) brightness(76%) contrast(47%); @overlay1: brightness(0) saturate(100%) invert(72%) sepia(10%) saturate(534%) hue-rotate(195deg) brightness(81%) contrast(70%); @overlay0: brightness(0) saturate(100%) invert(82%) sepia(25%) saturate(510%) hue-rotate(196deg) brightness(92%) contrast(45%); @surface2: brightness(0) saturate(100%) invert(84%) sepia(6%) saturate(528%) hue-rotate(189deg) brightness(88%) contrast(76%); @surface1: brightness(0) saturate(100%) invert(93%) sepia(24%) saturate(506%) hue-rotate(182deg) brightness(86%) contrast(83%); @surface0: brightness(0) saturate(100%) invert(94%) sepia(22%) saturate(523%) hue-rotate(179deg) brightness(96%) contrast(76%); @base: brightness(0) saturate(100%) invert(91%) sepia(37%) saturate(521%) hue-rotate(181deg) brightness(106%) contrast(94%); @mantle: brightness(0) saturate(100%) invert(89%) sepia(26%) saturate(508%) hue-rotate(188deg) brightness(107%) contrast(90%); @crust: brightness(0) saturate(100%) invert(84%) sepia(32%) saturate(502%) hue-rotate(192deg) brightness(111%) contrast(84%); }; + @frappe: { @rosewater: brightness(0) saturate(100%) invert(80%) sepia(22%) saturate(510%) hue-rotate(315deg) brightness(113%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(78%) sepia(26%) saturate(512%) hue-rotate(311deg) brightness(106%) contrast(86%); @pink: brightness(0) saturate(100%) invert(80%) sepia(22%) saturate(532%) hue-rotate(277deg) brightness(100%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(69%) sepia(37%) saturate(513%) hue-rotate(224deg) brightness(95%) contrast(90%); @red: brightness(0) saturate(100%) invert(58%) sepia(41%) saturate(524%) hue-rotate(310deg) brightness(97%) contrast(85%); @maroon: brightness(0) saturate(100%) invert(67%) sepia(34%) saturate(522%) hue-rotate(309deg) brightness(100%) contrast(83%); @peach: brightness(0) saturate(100%) invert(64%) sepia(32%) saturate(511%) hue-rotate(336deg) brightness(100%) contrast(97%); @yellow: brightness(0) saturate(100%) invert(78%) sepia(25%) saturate(512%) hue-rotate(359deg) brightness(107%) contrast(79%); @green: brightness(0) saturate(100%) invert(84%) sepia(25%) saturate(547%) hue-rotate(49deg) brightness(93%) contrast(82%); @teal: brightness(0) saturate(100%) invert(82%) sepia(21%) saturate(545%) hue-rotate(122deg) brightness(90%) contrast(81%); @sky: brightness(0) saturate(100%) invert(87%) sepia(24%) saturate(513%) hue-rotate(149deg) brightness(92%) contrast(85%); @sapphire: brightness(0) saturate(100%) invert(76%) sepia(32%) saturate(529%) hue-rotate(166deg) brightness(93%) contrast(85%); @blue: brightness(0) saturate(100%) invert(65%) sepia(33%) saturate(518%) hue-rotate(185deg) brightness(96%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(75%) sepia(33%) saturate(509%) hue-rotate(201deg) brightness(96%) contrast(97%); @text: brightness(0) saturate(100%) invert(83%) sepia(29%) saturate(508%) hue-rotate(192deg) brightness(97%) contrast(98%); @subtext1: brightness(0) saturate(100%) invert(81%) sepia(13%) saturate(517%) hue-rotate(190deg) brightness(95%) contrast(85%); @subtext0: brightness(0) saturate(100%) invert(78%) sepia(16%) saturate(515%) hue-rotate(191deg) brightness(95%) contrast(68%); @overlay2: brightness(0) saturate(100%) invert(70%) sepia(17%) saturate(520%) hue-rotate(191deg) brightness(91%) contrast(70%); @overlay1: brightness(0) saturate(100%) invert(73%) sepia(19%) saturate(514%) hue-rotate(189deg) brightness(75%) contrast(69%); @overlay0: brightness(0) saturate(100%) invert(57%) sepia(28%) saturate(505%) hue-rotate(192deg) brightness(75%) contrast(57%); @surface2: brightness(0) saturate(100%) invert(55%) sepia(26%) saturate(532%) hue-rotate(191deg) brightness(62%) contrast(64%); @surface1: brightness(0) saturate(100%) invert(39%) sepia(39%) saturate(506%) hue-rotate(190deg) brightness(59%) contrast(63%); @surface0: brightness(0) saturate(100%) invert(11%) sepia(65%) saturate(1032%) hue-rotate(204deg) brightness(86%) contrast(58%); @base: brightness(0) saturate(100%) invert(11%) sepia(75%) saturate(1023%) hue-rotate(204deg) brightness(60%) contrast(70%); @mantle: brightness(0) saturate(100%) invert(47%) sepia(27%) saturate(530%) hue-rotate(194deg) brightness(31%) contrast(94%); @crust: brightness(0) saturate(100%) invert(30%) sepia(27%) saturate(523%) hue-rotate(194deg) brightness(43%) contrast(96%); }; + @macchiato: { @rosewater: brightness(0) saturate(100%) invert(83%) sepia(22%) saturate(509%) hue-rotate(314deg) brightness(113%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(78%) sepia(22%) saturate(512%) hue-rotate(311deg) brightness(109%) contrast(88%); @pink: brightness(0) saturate(100%) invert(75%) sepia(23%) saturate(509%) hue-rotate(279deg) brightness(109%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(61%) sepia(70%) saturate(1021%) hue-rotate(210deg) brightness(109%) contrast(93%); @red: brightness(0) saturate(100%) invert(54%) sepia(37%) saturate(528%) hue-rotate(301deg) brightness(110%) contrast(87%); @maroon: brightness(0) saturate(100%) invert(66%) sepia(32%) saturate(496%) hue-rotate(306deg) brightness(99%) contrast(89%); @peach: brightness(0) saturate(100%) invert(69%) sepia(34%) saturate(532%) hue-rotate(335deg) brightness(101%) contrast(91%); @yellow: brightness(0) saturate(100%) invert(87%) sepia(19%) saturate(527%) hue-rotate(0deg) brightness(96%) contrast(93%); @green: brightness(0) saturate(100%) invert(86%) sepia(26%) saturate(541%) hue-rotate(53deg) brightness(100%) contrast(75%); @teal: brightness(0) saturate(100%) invert(85%) sepia(22%) saturate(544%) hue-rotate(117deg) brightness(96%) contrast(78%); @sky: brightness(0) saturate(100%) invert(84%) sepia(28%) saturate(526%) hue-rotate(147deg) brightness(98%) contrast(81%); @sapphire: brightness(0) saturate(100%) invert(75%) sepia(42%) saturate(530%) hue-rotate(168deg) brightness(93%) contrast(91%); @blue: brightness(0) saturate(100%) invert(65%) sepia(33%) saturate(519%) hue-rotate(182deg) brightness(98%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(73%) sepia(33%) saturate(510%) hue-rotate(199deg) brightness(98%) contrast(99%); @text: brightness(0) saturate(100%) invert(73%) sepia(80%) saturate(1008%) hue-rotate(190deg) brightness(120%) contrast(92%); @subtext1: brightness(0) saturate(100%) invert(78%) sepia(12%) saturate(515%) hue-rotate(191deg) brightness(101%) contrast(81%); @subtext0: brightness(0) saturate(100%) invert(78%) sepia(15%) saturate(521%) hue-rotate(190deg) brightness(95%) contrast(70%); @overlay2: brightness(0) saturate(100%) invert(69%) sepia(16%) saturate(521%) hue-rotate(192deg) brightness(90%) contrast(72%); @overlay1: brightness(0) saturate(100%) invert(68%) sepia(16%) saturate(523%) hue-rotate(191deg) brightness(77%) contrast(80%); @overlay0: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(535%) hue-rotate(194deg) brightness(63%) contrast(78%); @surface2: brightness(0) saturate(100%) invert(52%) sepia(34%) saturate(510%) hue-rotate(193deg) brightness(54%) contrast(61%); @surface1: brightness(0) saturate(100%) invert(46%) sepia(36%) saturate(516%) hue-rotate(194deg) brightness(46%) contrast(72%); @surface0: brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(513%) hue-rotate(194deg) brightness(39%) contrast(82%); @base: brightness(0) saturate(100%) invert(34%) sepia(36%) saturate(527%) hue-rotate(195deg) brightness(38%) contrast(95%); @mantle: brightness(0) saturate(100%) invert(29%) sepia(42%) saturate(541%) hue-rotate(198deg) brightness(30%) contrast(92%); @crust: brightness(0) saturate(100%) invert(27%) sepia(45%) saturate(543%) hue-rotate(200deg) brightness(25%) contrast(93%); }; + @mocha: { @rosewater: brightness(0) saturate(100%) invert(84%) sepia(22%) saturate(508%) hue-rotate(312deg) brightness(113%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(79%) sepia(23%) saturate(510%) hue-rotate(311deg) brightness(110%) contrast(90%); @pink: brightness(0) saturate(100%) invert(76%) sepia(28%) saturate(508%) hue-rotate(290deg) brightness(112%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(63%) sepia(71%) saturate(1021%) hue-rotate(208deg) brightness(110%) contrast(94%); @red: brightness(0) saturate(100%) invert(61%) sepia(33%) saturate(540%) hue-rotate(293deg) brightness(101%) contrast(90%); @maroon: brightness(0) saturate(100%) invert(70%) sepia(25%) saturate(536%) hue-rotate(301deg) brightness(100%) contrast(84%); @peach: brightness(0) saturate(100%) invert(73%) sepia(36%) saturate(519%) hue-rotate(332deg) brightness(100%) contrast(93%); @yellow: brightness(0) saturate(100%) invert(85%) sepia(27%) saturate(512%) hue-rotate(336deg) brightness(108%) contrast(96%); @green: brightness(0) saturate(100%) invert(86%) sepia(22%) saturate(538%) hue-rotate(63deg) brightness(97%) contrast(88%); @teal: brightness(0) saturate(100%) invert(90%) sepia(24%) saturate(532%) hue-rotate(105deg) brightness(95%) contrast(85%); @sky: brightness(0) saturate(100%) invert(81%) sepia(27%) saturate(522%) hue-rotate(141deg) brightness(99%) contrast(86%); @sapphire: brightness(0) saturate(100%) invert(73%) sepia(43%) saturate(529%) hue-rotate(166deg) brightness(95%) contrast(93%); @blue: brightness(0) saturate(100%) invert(57%) sepia(66%) saturate(1020%) hue-rotate(195deg) brightness(115%) contrast(96%); @lavender: brightness(0) saturate(100%) invert(68%) sepia(33%) saturate(517%) hue-rotate(197deg) brightness(105%) contrast(98%); @text: brightness(0) saturate(100%) invert(75%) sepia(82%) saturate(1008%) hue-rotate(189deg) brightness(120%) contrast(90%); @subtext1: brightness(0) saturate(100%) invert(81%) sepia(11%) saturate(522%) hue-rotate(191deg) brightness(100%) contrast(81%); @subtext0: brightness(0) saturate(100%) invert(79%) sepia(13%) saturate(517%) hue-rotate(191deg) brightness(93%) contrast(71%); @overlay2: brightness(0) saturate(100%) invert(70%) sepia(13%) saturate(523%) hue-rotate(191deg) brightness(88%) contrast(75%); @overlay1: brightness(0) saturate(100%) invert(61%) sepia(17%) saturate(527%) hue-rotate(193deg) brightness(85%) contrast(66%); @overlay0: brightness(0) saturate(100%) invert(67%) sepia(15%) saturate(533%) hue-rotate(193deg) brightness(62%) contrast(82%); @surface2: brightness(0) saturate(100%) invert(58%) sepia(30%) saturate(515%) hue-rotate(196deg) brightness(45%) contrast(62%); @surface1: brightness(0) saturate(100%) invert(44%) sepia(36%) saturate(521%) hue-rotate(198deg) brightness(39%) contrast(70%); @surface0: brightness(0) saturate(100%) invert(10%) sepia(79%) saturate(1035%) hue-rotate(212deg) brightness(62%) contrast(70%); @base: brightness(0) saturate(100%) invert(7%) sepia(23%) saturate(3759%) hue-rotate(219deg) brightness(67%) contrast(84%); @mantle: brightness(0) saturate(100%) invert(22%) sepia(29%) saturate(493%) hue-rotate(204deg) brightness(44%) contrast(102%); @crust: brightness(0) saturate(100%) invert(25%) sepia(44%) saturate(549%) hue-rotate(204deg) brightness(18%) contrast(96%); }; +}; + +#lib { + .palette() { + @rosewater: @catppuccin[@@flavor][@rosewater]; + @flamingo: @catppuccin[@@flavor][@flamingo]; + @pink: @catppuccin[@@flavor][@pink]; + @mauve: @catppuccin[@@flavor][@mauve]; + @red: @catppuccin[@@flavor][@red]; + @maroon: @catppuccin[@@flavor][@maroon]; + @peach: @catppuccin[@@flavor][@peach]; + @yellow: @catppuccin[@@flavor][@yellow]; + @green: @catppuccin[@@flavor][@green]; + @teal: @catppuccin[@@flavor][@teal]; + @sky: @catppuccin[@@flavor][@sky]; + @sapphire: @catppuccin[@@flavor][@sapphire]; + @blue: @catppuccin[@@flavor][@blue]; + @lavender: @catppuccin[@@flavor][@lavender]; + @text: @catppuccin[@@flavor][@text]; + @subtext1: @catppuccin[@@flavor][@subtext1]; + @subtext0: @catppuccin[@@flavor][@subtext0]; + @overlay2: @catppuccin[@@flavor][@overlay2]; + @overlay1: @catppuccin[@@flavor][@overlay1]; + @overlay0: @catppuccin[@@flavor][@overlay0]; + @surface2: @catppuccin[@@flavor][@surface2]; + @surface1: @catppuccin[@@flavor][@surface1]; + @surface0: @catppuccin[@@flavor][@surface0]; + @base: @catppuccin[@@flavor][@base]; + @mantle: @catppuccin[@@flavor][@mantle]; + @crust: @catppuccin[@@flavor][@crust]; + @accent: @catppuccin[@@flavor][@@accentColor]; + + @rosewater-filter: @catppuccin-filters[@@flavor][@rosewater]; + @flamingo-filter: @catppuccin-filters[@@flavor][@flamingo]; + @pink-filter: @catppuccin-filters[@@flavor][@pink]; + @mauve-filter: @catppuccin-filters[@@flavor][@mauve]; + @red-filter: @catppuccin-filters[@@flavor][@red]; + @maroon-filter: @catppuccin-filters[@@flavor][@maroon]; + @peach-filter: @catppuccin-filters[@@flavor][@peach]; + @yellow-filter: @catppuccin-filters[@@flavor][@yellow]; + @green-filter: @catppuccin-filters[@@flavor][@green]; + @teal-filter: @catppuccin-filters[@@flavor][@teal]; + @sky-filter: @catppuccin-filters[@@flavor][@sky]; + @sapphire-filter: @catppuccin-filters[@@flavor][@sapphire]; + @blue-filter: @catppuccin-filters[@@flavor][@blue]; + @lavender-filter: @catppuccin-filters[@@flavor][@lavender]; + @text-filter: @catppuccin-filters[@@flavor][@text]; + @subtext1-filter: @catppuccin-filters[@@flavor][@subtext1]; + @subtext0-filter: @catppuccin-filters[@@flavor][@subtext0]; + @overlay2-filter: @catppuccin-filters[@@flavor][@overlay2]; + @overlay1-filter: @catppuccin-filters[@@flavor][@overlay1]; + @overlay0-filter: @catppuccin-filters[@@flavor][@overlay0]; + @surface2-filter: @catppuccin-filters[@@flavor][@surface2]; + @surface1-filter: @catppuccin-filters[@@flavor][@surface1]; + @surface0-filter: @catppuccin-filters[@@flavor][@surface0]; + @base-filter: @catppuccin-filters[@@flavor][@base]; + @mantle-filter: @catppuccin-filters[@@flavor][@mantle]; + @crust-filter: @catppuccin-filters[@@flavor][@crust]; + @accent-filter: @catppuccin-filters[@@flavor][@@accentColor]; + } + + .defaults() { + color-scheme: if(@flavor = latte, light, dark); + + ::selection { + background-color: fade(@accent, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + } + + .rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); + } + + .hslify(@color) { + @raw: e( + %("%s, %s%, %s%", hue(@color), saturation(@color), lightness(@color)) + ); + } + + .css-variables() { + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + } +} + @-moz-document domain("drive.google.com") { .vhoiae { @@ -31,9 +161,6 @@ #catppuccin(@flavor) { #lib.palette(); - // TODO: Try to make use `#lib.defaults()` here, but it causes issues with the color scheme (see below). - // #lib.defaults(); // Color scheme is already set by Google Drive; setting it here causes bugs, and there are no known side effects as Google does not use native UI elements (which would reflect `color-scheme` state and cause potential issues). - ::selection { background-color: fade(@accent, 30%); } @@ -168,6 +295,72 @@ --dt-light-warning-banner-button: @yellow; --dt-light-error-banner-button: @red; + & when (@oled = 1) { + --dt-background: #000000; + --dt-surface: #000000; + --dt-surface-dim: #000000; + --dt-surface-container-lowest: #000000; + --dt-surface-container-low: #050505; + --dt-surface-container: #0a0a0a; + --dt-surface-container-high: #111111; + --dt-surface-container-highest: #1a1a1a; + --dt-surface-variant: #0a0a0a; + --dt-surface-bright: #050505; + --dt-on-primary: #000000; + --dt-primary-icon: #000000; + --dt-primary-link: #000000; + --dt-on-secondary: #000000; + --dt-secondary-icon: #000000; + --dt-secondary-link: #000000; + --dt-on-tertiary: #000000; + --dt-tertiary-icon: #000000; + --dt-tertiary-link: #000000; + --dt-on-error: #000000; + --dt-error-icon: #000000; + --dt-error-link: #000000; + --dt-on-warning: #000000; + --gm3-sys-color-background: #000000; + --gm3-sys-color-background-rgb: 0, 0, 0; + --gm3-sys-color-surface: #000000; + --gm3-sys-color-surface-rgb: 0, 0, 0; + --gm3-sys-color-surface-bright: #000000; + --gm3-sys-color-surface-bright-rgb: 0, 0, 0; + --gm3-sys-color-surface-dim: #000000; + --gm3-sys-color-surface-dim-rgb: 0, 0, 0; + --gm3-sys-color-surface-container-lowest: #000000; + --gm3-sys-color-surface-container-lowest-rgb: 0, 0, 0; + --gm3-sys-color-surface-container-low: #050505; + --gm3-sys-color-surface-container-low-rgb: 5, 5, 5; + --gm3-sys-color-surface-container: #0a0a0a; + --gm3-sys-color-surface-container-rgb: 10, 10, 10; + --gm3-sys-color-surface-container-high: #111111; + --gm3-sys-color-surface-container-high-rgb: 17, 17, 17; + --gm3-sys-color-surface-container-highest: #1a1a1a; + --gm3-sys-color-surface-container-highest-rgb: 26, 26, 26; + --gm3-sys-color-surface-variant: #0a0a0a; + --gm3-sys-color-surface-variant-rgb: 10, 10, 10; + --gm3-sys-color-on-error: #000000; + --gm3-sys-color-on-error-rgb: 0, 0, 0; + --gm3-sys-color-on-primary: #000000; + --gm3-sys-color-on-primary-rgb: 0, 0, 0; + --gm3-sys-color-on-primary-fixed: #000000; + --gm3-sys-color-on-primary-fixed-rgb: 0, 0, 0; + --gm3-sys-color-on-primary-fixed-variant: #000000; + --gm3-sys-color-on-primary-fixed-variant-rgb: 0, 0, 0; + --gm3-sys-color-on-secondary: #000000; + --gm3-sys-color-on-secondary-rgb: 0, 0, 0; + --gm3-sys-color-on-secondary-fixed: #000000; + --gm3-sys-color-on-secondary-fixed-rgb: 0, 0, 0; + --gm3-sys-color-on-secondary-fixed-variant: #000000; + --gm3-sys-color-on-secondary-fixed-variant-rgb: 0, 0, 0; + --gm3-sys-color-on-tertiary: #000000; + --gm3-sys-color-on-tertiary-rgb: 0, 0, 0; + --gm3-sys-color-on-tertiary-fixed: #000000; + --gm3-sys-color-on-tertiary-fixed-rgb: 0, 0, 0; + --gm3-sys-color-on-tertiary-fixed-variant: #000000; + --gm3-sys-color-on-tertiary-fixed-variant-rgb: 0, 0, 0; + } + --gm3-sys-color-background: @base; --gm3-sys-color-background-rgb: #lib.rgbify(@base)[]; --gm3-sys-color-error: @red; @@ -281,7 +474,7 @@ --gm3-sys-color-shadow-rgb: #lib.rgbify(@base)[]; } - /* Settings menu title & back button */ + .gb_Pc svg, .gb_Uc.gb_Zc svg, .gb_Pc .gb_gd .gb_od, @@ -291,12 +484,12 @@ color: @text !important; } - /* Settings menu Storage total used icon */ + .VBJTHe svg path { fill: @text; } - /* Drive sync checkbox disabled */ + .MlG5Jc gm-checkbox[disabled] ~ .VfPpkd-ga, .MlG5Jc gm-radio[disabled] ~ .VfPpkd-ga, .MlG5Jc .VfPpkd-Qa-Qu-db ~ .VfPpkd-ga, @@ -304,29 +497,29 @@ color: @subtext0 !important; } - /* Quota hover box-shadow */ + .KnDsIf:hover, .KnDsIf:focus, .al9hA { box-shadow: 0 2px 6px @overlay0; } - /* Quota Google Drive */ + .kJzqSb { color: @blue; } - /* Quota Google Photos */ + .L1pqQb { color: @yellow; } - /* Quota Gmail */ + .au0LDe { color: @red; } - /* Google Account outline */ + .gb_Ea.gb_i { border-color: @overlay0; background-color: @surface0; @@ -336,49 +529,49 @@ border-color: @subtext0; } - /* File preview (separate tab) background */ + &.ndfHFb-c4YZDc-uoC0bf.ndfHFb-c4YZDc-i5oIFb .ndfHFb-c4YZDc-bnBfGc { background-color: @base; } - .a-b-uoC0bf.a-b-L .a-b-jl /* File preview (in Drive) background */ { + .a-b-uoC0bf.a-b-L .a-b-jl { background-color: fade(@base, 85%); } - /* File preview (separate tab) top bar */ + &.ndfHFb-c4YZDc-uoC0bf.ndfHFb-c4YZDc-i5oIFb .ndfHFb-c4YZDc-Wrql6b.ndfHFb-c4YZDc-Wrql6b-Hyc8Sd, - .a-b-uoC0bf.a-b-L .a-b-K.a-b-K-Hyc8Sd /* File preview (in Drive) top bar */ + .a-b-uoC0bf.a-b-L .a-b-K.a-b-K-Hyc8Sd { background-color: fade(@base, 85%); } - /* File preview (separate tab) bottom bar */ + .ndfHFb-c4YZDc-q77wGc .ndfHFb-c4YZDc-DARUcf-NnAfwf-i5oIFb, .ndfHFb-c4YZDc-q77wGc .ndfHFb-c4YZDc-nJjxad-nK2kYb-i5oIFb, .a-b-vo .a-b-La-yc-L, - .a-b-vo .a-b-Kb-ac-L /* File preview (in Drive) bottom bar */ { + .a-b-vo .a-b-Kb-ac-L { background-color: fade(@base, 85%); color: @text !important; - /* File preview (separate tab) page input */ + .ndfHFb-c4YZDc-DARUcf-NGme3c-YPqjbf, - .a-b-La-su-vb /* File preview (in Drive) page input */ { + .a-b-La-su-vb { background-color: fade(@base, 50%); color: @text; } } - /* File preview (separate tab) share button */ + &.ndfHFb-c4YZDc-uoC0bf .zAYgkb-uoC0bf .tk3N6e-LgbsSe, &.ndfHFb-c4YZDc-uoC0bf .zAYgkb-mAKE4e-LQLjdd-xl07Ob-LgbsSe.VIpgJd-Kb3HCc-xl07Ob-LgbsSe, .a-b-uoC0bf .ae-uoC0bf .g-d, .a-b-uoC0bf - .ae-mAKE4e-Hc-w-d.h-R-w-d /* File preview (in Drive) share button */ { + .ae-mAKE4e-Hc-w-d.h-R-w-d { background-color: @accent; color: @base; - /* File preview (separate tab) share icon */ + .IyROMc-euCgFf-LJSvSb, - .ae-c /* File preview (in Drive) share icon */ { + .ae-c { & when (@flavor = latte) { filter: brightness(0) invert(97%) sepia(4%) saturate(152%) hue-rotate( 183deg @@ -397,36 +590,36 @@ hue-rotate(201deg) brightness(90%) contrast(93%); } } - /* File preview (separate tab) share triangle */ + .VIpgJd-Kb3HCc-xl07Ob-LgbsSe-j4gsHd, - .h-R-w-d-Re /* File preview (in Drive) share triangle */ { + .h-R-w-d-Re { border-color: @base transparent !important; } } - /* File preview (separate tab) share Quick options */ + .zAYgkb-NhlrFc-xl07Ob-BvBYQ, - .h-w.ae-NhlrFc-w /* File preview (in Drive) share Quick options */ { + .h-w.ae-NhlrFc-w { background-color: @base; * { color: @text !important; } - /* File preview (in Drive) share Quick options current share level container */ + .h-v-x { opacity: 100%; } - /* File preview (separate tab) share Quick options divider */ + .zAYgkb-NhlrFc-gqMrKb, - .ae-NhlrFc-Yo /* File preview (in Drive) share Quick options divider */ { + .ae-NhlrFc-Yo { border-color: @overlay0; } - /* File preview (separate tab) share Quick options row hover */ + .VIpgJd-j7LFlb-sn54Q, - .h-v-pc /* File preview (in Drive) share Quick options row hover */ { + .h-v-pc { background-color: @surface0; } - /* File preview (separate tab) share Quick options row icon */ + .IyROMc-euCgFf-LJSvSb, - .ba-ea-i /* File preview (in Drive) share Quick options row icon */ { + .ba-ea-i { & when (@flavor = latte) { filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) hue-rotate(196deg) brightness(90%) contrast(86%); @@ -445,20 +638,20 @@ } } } - /* File preview (separate tab) Print, Download, 3 dots */ + .ndfHFb-c4YZDc-Bz112c:not([style]), .ndfHFb-c4YZDc-Bz112c[style*="googlematerialicons"], .ndfHFb-c4YZDc-Bz112c[style="user-select: none;"], .ndfHFb-c4YZDc-Wrql6b-htvI8d-wcotoc-wHEfpf-ndfHFb-Bz112c - /* File preview (separate tab) Save to drive */, + , .ndfHFb-c4YZDc-Wrql6b-w37qKe-Bz112c - /* File preview (separate tab) Save to drive (clicked) */, - /* File preview (in Drive) Print, Download, 3 dots */ + , + .a-b-c:not([style]), .a-b-c[style*="googlematerialicons"], .a-b-c[style="user-select: none;"], - .a-b-K-zc-Eb-bg-a-c /* File preview (in Drive) Save to drive */, - .a-b-K-X-c /* File preview (in Drive) Save to drive (clicked) */ { + .a-b-K-zc-Eb-bg-a-c , + .a-b-K-X-c { & when (@flavor = latte) { filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) hue-rotate( 196deg @@ -480,24 +673,24 @@ ) brightness(98%) contrast(95%); } } - /* File preview (separate tab) File title */ + .ndfHFb-c4YZDc-Wrql6b-V1ur5d, - .a-b-cg-Zf /* File preview (in Drive) File title */ { + .a-b-cg-Zf { color: @text; } - /* File preview (separate tab) 3 dots menu item hover */ + .ndfHFb-c4YZDc-j7LFlb:hover, - .a-b-v:hover /* File preview (in Drive) 3 dots menu item hover */ { + .a-b-v:hover { background-color: @surface0; } - /* File preview (separate tab) No preview available */ + .ndfHFb-c4YZDc-EglORb-haAclf, - .a-b-Tb-j /* File preview (in Drive) No preview available */ { + .a-b-Tb-j { background-color: @surface0; color: @text; - /* File preview (separate tab) No preview available Download */ + .ndfHFb-c4YZDc-bN97Pc-nupQLb-LgbsSe, - .a-b-x-rb-d /* File preview (in Drive) No preview available Download */ { + .a-b-x-rb-d { background-color: @surface1; color: @text; text-shadow: none; @@ -507,9 +700,9 @@ background-image: none; } } - /* File preview (separate tab) No preview available Download icon */ + .ndfHFb-c4YZDc-bN97Pc-nupQLb-LgbsSe-Bz112c, - .a-b-x-rb-d-c /* File preview (in Drive) No preview available Download icon */ + .a-b-x-rb-d-c { & when (@flavor = latte) { filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) @@ -529,9 +722,9 @@ } } } - /* File preview (in Drive) text document */ + .a-b-r-x, - .ndfHFb-c4YZDc-fmcmS-bN97Pc /* File preview (separate tab) text document */ + .ndfHFb-c4YZDc-fmcmS-bN97Pc { &, pre { @@ -539,25 +732,25 @@ color: @text !important; } } - /* File preview (in Drive) comment on image */ + .Yk-efwuC { background-color: @surface0 !important; - /* File preview (in Drive) comment on image person */ + .Yk-Vq7Udc { background-color: @surface0 !important; [data-name] { color: @text !important; } - /* Comment text */ + .Yk-eKrold-Sg.Yk-eKrold-Sg { color: @text !important; } - /* Comment date */ + .Yk-eKrold-bi { color: @subtext0 !important; } } - /* File preview (in Drive) comments */ + .Yk-efwuC-vb-Gd { background-color: @surface0; &, @@ -573,7 +766,7 @@ } [role="button"] { background-color: @surface1 !important; - /* needed to override border-color */ + &[role="button"] { border-color: @overlay0 !important; } @@ -585,51 +778,51 @@ } } - /* Drive sharing window material icon */ + .SbpzSe .VfPpkd-StrnGf-rymPhb-f7MjDc { color: @accent; } - /* Drive sharing window access hover */ + .lfDNBb:hover, .lfDNBb:focus-within, .ZelW3e:hover .FYhd9e, - .ZelW3e:focus-within .FYhd9e /* Drive sharing window person row hover */ { + .ZelW3e:focus-within .FYhd9e { background-color: @surface0; } - /* Drive sharing iframe (in Drive) */ + .lb-k-x { color-scheme: unset; } - /* Drive sharing iframe (file preview separate tab) */ + .XKSfm-Sx9Kwc-bN97Pc { - color-scheme: auto; /* unset doesn't work? */ + color-scheme: auto; } [role="tooltip"], - .Kk7lMc-Ca /* Drive applications sidebar tooltip */, - .gb_2e /* Drive google account tooltip */ { + .Kk7lMc-Ca , + .gb_2e { background-color: @surface2; *, & { color: @text !important; } border-color: transparent; - /* File preview (separate tab) tooltip arrow */ + .tk3N6e-suEOdc-jQ8oHc, .tk3N6e-suEOdc-ez0xG { border-color: @surface2 transparent !important; } } - /* Drive applications sidebar close button */ + .Kk7lMc-QWPxkf-d-j .Yb-Il-d .Yb-Il-d-c-j { background-color: @surface0; path:nth-child(1) { stroke: @text; } } - /* Drive applications sidebar get addons */ + .Yb-Il-d#qJTzr .Yb-Il-d-c-j { & when (@flavor = latte) { filter: brightness(0) invert(31%) sepia(10%) saturate(1268%) hue-rotate( @@ -652,12 +845,12 @@ ) brightness(98%) contrast(95%); } } - /* Drive applications sidebar close button white background */ + .Yb-Il-d-c-Nd { background-color: transparent; } - /* Drive icon */ + [src="//ssl.gstatic.com/images/branding/product/1x/drive_2020q4_48dp.png"] { @darkBlue: mix(@blue, @base, 80%); @darkGreen: mix(@green, @base, 80%); @@ -668,7 +861,7 @@ content: url("data:image/svg+xml,@{svg}"); } - /* Drive upload checkmark */ + .z-Ea-Fj-c svg path { fill: @green; } diff --git a/styles/google/catppuccin.user.less b/styles/google/catppuccin.user.less index 38fb659875..cfa03ef561 100644 --- a/styles/google/catppuccin.user.less +++ b/styles/google/catppuccin.user.less @@ -1,4 +1,4 @@ -/* ==UserStyle== +/* ==UserStyle== @name Google Catppuccin @namespace github.com/catppuccin/userstyles/styles/google @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google @@ -10,12 +10,141 @@ @license MIT @preprocessor less -@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] -@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] +@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] +@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] ==/UserStyle== */ -@import "https://userstyles.catppuccin.com/lib/lib.less"; + +@catppuccin: { + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +}; + + +@catppuccin-filters: { + @latte: { @rosewater: brightness(0) saturate(100%) invert(62%) sepia(42%) saturate(525%) hue-rotate(322deg) brightness(94%) contrast(82%); @flamingo: brightness(0) saturate(100%) invert(54%) sepia(48%) saturate(532%) hue-rotate(311deg) brightness(95%) contrast(82%); @pink: brightness(0) saturate(100%) invert(55%) sepia(54%) saturate(548%) hue-rotate(266deg) brightness(100%) contrast(83%); @mauve: brightness(0) saturate(100%) invert(26%) sepia(31%) saturate(3766%) hue-rotate(247deg) brightness(114%) contrast(114%); @red: brightness(0) saturate(100%) invert(28%) sepia(41%) saturate(3765%) hue-rotate(329deg) brightness(79%) contrast(110%); @maroon: brightness(0) saturate(100%) invert(51%) sepia(51%) saturate(3760%) hue-rotate(322deg) brightness(86%) contrast(111%); @peach: brightness(0) saturate(100%) invert(33%) sepia(99%) saturate(2022%) hue-rotate(4deg) brightness(118%) contrast(103%); @yellow: brightness(0) saturate(100%) invert(49%) sepia(94%) saturate(2020%) hue-rotate(0deg) brightness(120%) contrast(75%); @green: brightness(0) saturate(100%) invert(60%) sepia(63%) saturate(538%) hue-rotate(63deg) brightness(76%) contrast(90%); @teal: brightness(0) saturate(100%) invert(39%) sepia(67%) saturate(1026%) hue-rotate(144deg) brightness(95%) contrast(93%); @sky: brightness(0) saturate(100%) invert(53%) sepia(44%) saturate(3749%) hue-rotate(164deg) brightness(95%) contrast(97%); @sapphire: brightness(0) saturate(100%) invert(41%) sepia(70%) saturate(1021%) hue-rotate(151deg) brightness(103%) contrast(78%); @blue: brightness(0) saturate(100%) invert(30%) sepia(36%) saturate(3759%) hue-rotate(209deg) brightness(103%) contrast(110%); @lavender: brightness(0) saturate(100%) invert(48%) sepia(34%) saturate(3762%) hue-rotate(213deg) brightness(108%) contrast(110%); @text: brightness(0) saturate(100%) invert(43%) sepia(43%) saturate(515%) hue-rotate(196deg) brightness(49%) contrast(68%); @subtext1: brightness(0) saturate(100%) invert(63%) sepia(28%) saturate(515%) hue-rotate(196deg) brightness(48%) contrast(67%); @subtext0: brightness(0) saturate(100%) invert(65%) sepia(15%) saturate(535%) hue-rotate(195deg) brightness(63%) contrast(82%); @overlay2: brightness(0) saturate(100%) invert(63%) sepia(20%) saturate(521%) hue-rotate(195deg) brightness(76%) contrast(47%); @overlay1: brightness(0) saturate(100%) invert(72%) sepia(10%) saturate(534%) hue-rotate(195deg) brightness(81%) contrast(70%); @overlay0: brightness(0) saturate(100%) invert(82%) sepia(25%) saturate(510%) hue-rotate(196deg) brightness(92%) contrast(45%); @surface2: brightness(0) saturate(100%) invert(84%) sepia(6%) saturate(528%) hue-rotate(189deg) brightness(88%) contrast(76%); @surface1: brightness(0) saturate(100%) invert(93%) sepia(24%) saturate(506%) hue-rotate(182deg) brightness(86%) contrast(83%); @surface0: brightness(0) saturate(100%) invert(94%) sepia(22%) saturate(523%) hue-rotate(179deg) brightness(96%) contrast(76%); @base: brightness(0) saturate(100%) invert(91%) sepia(37%) saturate(521%) hue-rotate(181deg) brightness(106%) contrast(94%); @mantle: brightness(0) saturate(100%) invert(89%) sepia(26%) saturate(508%) hue-rotate(188deg) brightness(107%) contrast(90%); @crust: brightness(0) saturate(100%) invert(84%) sepia(32%) saturate(502%) hue-rotate(192deg) brightness(111%) contrast(84%); }; + @frappe: { @rosewater: brightness(0) saturate(100%) invert(80%) sepia(22%) saturate(510%) hue-rotate(315deg) brightness(113%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(78%) sepia(26%) saturate(512%) hue-rotate(311deg) brightness(106%) contrast(86%); @pink: brightness(0) saturate(100%) invert(80%) sepia(22%) saturate(532%) hue-rotate(277deg) brightness(100%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(69%) sepia(37%) saturate(513%) hue-rotate(224deg) brightness(95%) contrast(90%); @red: brightness(0) saturate(100%) invert(58%) sepia(41%) saturate(524%) hue-rotate(310deg) brightness(97%) contrast(85%); @maroon: brightness(0) saturate(100%) invert(67%) sepia(34%) saturate(522%) hue-rotate(309deg) brightness(100%) contrast(83%); @peach: brightness(0) saturate(100%) invert(64%) sepia(32%) saturate(511%) hue-rotate(336deg) brightness(100%) contrast(97%); @yellow: brightness(0) saturate(100%) invert(78%) sepia(25%) saturate(512%) hue-rotate(359deg) brightness(107%) contrast(79%); @green: brightness(0) saturate(100%) invert(84%) sepia(25%) saturate(547%) hue-rotate(49deg) brightness(93%) contrast(82%); @teal: brightness(0) saturate(100%) invert(82%) sepia(21%) saturate(545%) hue-rotate(122deg) brightness(90%) contrast(81%); @sky: brightness(0) saturate(100%) invert(87%) sepia(24%) saturate(513%) hue-rotate(149deg) brightness(92%) contrast(85%); @sapphire: brightness(0) saturate(100%) invert(76%) sepia(32%) saturate(529%) hue-rotate(166deg) brightness(93%) contrast(85%); @blue: brightness(0) saturate(100%) invert(65%) sepia(33%) saturate(518%) hue-rotate(185deg) brightness(96%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(75%) sepia(33%) saturate(509%) hue-rotate(201deg) brightness(96%) contrast(97%); @text: brightness(0) saturate(100%) invert(83%) sepia(29%) saturate(508%) hue-rotate(192deg) brightness(97%) contrast(98%); @subtext1: brightness(0) saturate(100%) invert(81%) sepia(13%) saturate(517%) hue-rotate(190deg) brightness(95%) contrast(85%); @subtext0: brightness(0) saturate(100%) invert(78%) sepia(16%) saturate(515%) hue-rotate(191deg) brightness(95%) contrast(68%); @overlay2: brightness(0) saturate(100%) invert(70%) sepia(17%) saturate(520%) hue-rotate(191deg) brightness(91%) contrast(70%); @overlay1: brightness(0) saturate(100%) invert(73%) sepia(19%) saturate(514%) hue-rotate(189deg) brightness(75%) contrast(69%); @overlay0: brightness(0) saturate(100%) invert(57%) sepia(28%) saturate(505%) hue-rotate(192deg) brightness(75%) contrast(57%); @surface2: brightness(0) saturate(100%) invert(55%) sepia(26%) saturate(532%) hue-rotate(191deg) brightness(62%) contrast(64%); @surface1: brightness(0) saturate(100%) invert(39%) sepia(39%) saturate(506%) hue-rotate(190deg) brightness(59%) contrast(63%); @surface0: brightness(0) saturate(100%) invert(11%) sepia(65%) saturate(1032%) hue-rotate(204deg) brightness(86%) contrast(58%); @base: brightness(0) saturate(100%) invert(11%) sepia(75%) saturate(1023%) hue-rotate(204deg) brightness(60%) contrast(70%); @mantle: brightness(0) saturate(100%) invert(47%) sepia(27%) saturate(530%) hue-rotate(194deg) brightness(31%) contrast(94%); @crust: brightness(0) saturate(100%) invert(30%) sepia(27%) saturate(523%) hue-rotate(194deg) brightness(43%) contrast(96%); }; + @macchiato: { @rosewater: brightness(0) saturate(100%) invert(83%) sepia(22%) saturate(509%) hue-rotate(314deg) brightness(113%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(78%) sepia(22%) saturate(512%) hue-rotate(311deg) brightness(109%) contrast(88%); @pink: brightness(0) saturate(100%) invert(75%) sepia(23%) saturate(509%) hue-rotate(279deg) brightness(109%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(61%) sepia(70%) saturate(1021%) hue-rotate(210deg) brightness(109%) contrast(93%); @red: brightness(0) saturate(100%) invert(54%) sepia(37%) saturate(528%) hue-rotate(301deg) brightness(110%) contrast(87%); @maroon: brightness(0) saturate(100%) invert(66%) sepia(32%) saturate(496%) hue-rotate(306deg) brightness(99%) contrast(89%); @peach: brightness(0) saturate(100%) invert(69%) sepia(34%) saturate(532%) hue-rotate(335deg) brightness(101%) contrast(91%); @yellow: brightness(0) saturate(100%) invert(87%) sepia(19%) saturate(527%) hue-rotate(0deg) brightness(96%) contrast(93%); @green: brightness(0) saturate(100%) invert(86%) sepia(26%) saturate(541%) hue-rotate(53deg) brightness(100%) contrast(75%); @teal: brightness(0) saturate(100%) invert(85%) sepia(22%) saturate(544%) hue-rotate(117deg) brightness(96%) contrast(78%); @sky: brightness(0) saturate(100%) invert(84%) sepia(28%) saturate(526%) hue-rotate(147deg) brightness(98%) contrast(81%); @sapphire: brightness(0) saturate(100%) invert(75%) sepia(42%) saturate(530%) hue-rotate(168deg) brightness(93%) contrast(91%); @blue: brightness(0) saturate(100%) invert(65%) sepia(33%) saturate(519%) hue-rotate(182deg) brightness(98%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(73%) sepia(33%) saturate(510%) hue-rotate(199deg) brightness(98%) contrast(99%); @text: brightness(0) saturate(100%) invert(73%) sepia(80%) saturate(1008%) hue-rotate(190deg) brightness(120%) contrast(92%); @subtext1: brightness(0) saturate(100%) invert(78%) sepia(12%) saturate(515%) hue-rotate(191deg) brightness(101%) contrast(81%); @subtext0: brightness(0) saturate(100%) invert(78%) sepia(15%) saturate(521%) hue-rotate(190deg) brightness(95%) contrast(70%); @overlay2: brightness(0) saturate(100%) invert(69%) sepia(16%) saturate(521%) hue-rotate(192deg) brightness(90%) contrast(72%); @overlay1: brightness(0) saturate(100%) invert(68%) sepia(16%) saturate(523%) hue-rotate(191deg) brightness(77%) contrast(80%); @overlay0: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(535%) hue-rotate(194deg) brightness(63%) contrast(78%); @surface2: brightness(0) saturate(100%) invert(52%) sepia(34%) saturate(510%) hue-rotate(193deg) brightness(54%) contrast(61%); @surface1: brightness(0) saturate(100%) invert(46%) sepia(36%) saturate(516%) hue-rotate(194deg) brightness(46%) contrast(72%); @surface0: brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(513%) hue-rotate(194deg) brightness(39%) contrast(82%); @base: brightness(0) saturate(100%) invert(34%) sepia(36%) saturate(527%) hue-rotate(195deg) brightness(38%) contrast(95%); @mantle: brightness(0) saturate(100%) invert(29%) sepia(42%) saturate(541%) hue-rotate(198deg) brightness(30%) contrast(92%); @crust: brightness(0) saturate(100%) invert(27%) sepia(45%) saturate(543%) hue-rotate(200deg) brightness(25%) contrast(93%); }; + @mocha: { @rosewater: brightness(0) saturate(100%) invert(84%) sepia(22%) saturate(508%) hue-rotate(312deg) brightness(113%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(79%) sepia(23%) saturate(510%) hue-rotate(311deg) brightness(110%) contrast(90%); @pink: brightness(0) saturate(100%) invert(76%) sepia(28%) saturate(508%) hue-rotate(290deg) brightness(112%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(63%) sepia(71%) saturate(1021%) hue-rotate(208deg) brightness(110%) contrast(94%); @red: brightness(0) saturate(100%) invert(61%) sepia(33%) saturate(540%) hue-rotate(293deg) brightness(101%) contrast(90%); @maroon: brightness(0) saturate(100%) invert(70%) sepia(25%) saturate(536%) hue-rotate(301deg) brightness(100%) contrast(84%); @peach: brightness(0) saturate(100%) invert(73%) sepia(36%) saturate(519%) hue-rotate(332deg) brightness(100%) contrast(93%); @yellow: brightness(0) saturate(100%) invert(85%) sepia(27%) saturate(512%) hue-rotate(336deg) brightness(108%) contrast(96%); @green: brightness(0) saturate(100%) invert(86%) sepia(22%) saturate(538%) hue-rotate(63deg) brightness(97%) contrast(88%); @teal: brightness(0) saturate(100%) invert(90%) sepia(24%) saturate(532%) hue-rotate(105deg) brightness(95%) contrast(85%); @sky: brightness(0) saturate(100%) invert(81%) sepia(27%) saturate(522%) hue-rotate(141deg) brightness(99%) contrast(86%); @sapphire: brightness(0) saturate(100%) invert(73%) sepia(43%) saturate(529%) hue-rotate(166deg) brightness(95%) contrast(93%); @blue: brightness(0) saturate(100%) invert(57%) sepia(66%) saturate(1020%) hue-rotate(195deg) brightness(115%) contrast(96%); @lavender: brightness(0) saturate(100%) invert(68%) sepia(33%) saturate(517%) hue-rotate(197deg) brightness(105%) contrast(98%); @text: brightness(0) saturate(100%) invert(75%) sepia(82%) saturate(1008%) hue-rotate(189deg) brightness(120%) contrast(90%); @subtext1: brightness(0) saturate(100%) invert(81%) sepia(11%) saturate(522%) hue-rotate(191deg) brightness(100%) contrast(81%); @subtext0: brightness(0) saturate(100%) invert(79%) sepia(13%) saturate(517%) hue-rotate(191deg) brightness(93%) contrast(71%); @overlay2: brightness(0) saturate(100%) invert(70%) sepia(13%) saturate(523%) hue-rotate(191deg) brightness(88%) contrast(75%); @overlay1: brightness(0) saturate(100%) invert(61%) sepia(17%) saturate(527%) hue-rotate(193deg) brightness(85%) contrast(66%); @overlay0: brightness(0) saturate(100%) invert(67%) sepia(15%) saturate(533%) hue-rotate(193deg) brightness(62%) contrast(82%); @surface2: brightness(0) saturate(100%) invert(58%) sepia(30%) saturate(515%) hue-rotate(196deg) brightness(45%) contrast(62%); @surface1: brightness(0) saturate(100%) invert(44%) sepia(36%) saturate(521%) hue-rotate(198deg) brightness(39%) contrast(70%); @surface0: brightness(0) saturate(100%) invert(10%) sepia(79%) saturate(1035%) hue-rotate(212deg) brightness(62%) contrast(70%); @base: brightness(0) saturate(100%) invert(7%) sepia(23%) saturate(3759%) hue-rotate(219deg) brightness(67%) contrast(84%); @mantle: brightness(0) saturate(100%) invert(22%) sepia(29%) saturate(493%) hue-rotate(204deg) brightness(44%) contrast(102%); @crust: brightness(0) saturate(100%) invert(25%) sepia(44%) saturate(549%) hue-rotate(204deg) brightness(18%) contrast(96%); }; +}; + +#lib { + .palette() { + @rosewater: @catppuccin[@@flavor][@rosewater]; + @flamingo: @catppuccin[@@flavor][@flamingo]; + @pink: @catppuccin[@@flavor][@pink]; + @mauve: @catppuccin[@@flavor][@mauve]; + @red: @catppuccin[@@flavor][@red]; + @maroon: @catppuccin[@@flavor][@maroon]; + @peach: @catppuccin[@@flavor][@peach]; + @yellow: @catppuccin[@@flavor][@yellow]; + @green: @catppuccin[@@flavor][@green]; + @teal: @catppuccin[@@flavor][@teal]; + @sky: @catppuccin[@@flavor][@sky]; + @sapphire: @catppuccin[@@flavor][@sapphire]; + @blue: @catppuccin[@@flavor][@blue]; + @lavender: @catppuccin[@@flavor][@lavender]; + @text: @catppuccin[@@flavor][@text]; + @subtext1: @catppuccin[@@flavor][@subtext1]; + @subtext0: @catppuccin[@@flavor][@subtext0]; + @overlay2: @catppuccin[@@flavor][@overlay2]; + @overlay1: @catppuccin[@@flavor][@overlay1]; + @overlay0: @catppuccin[@@flavor][@overlay0]; + @surface2: @catppuccin[@@flavor][@surface2]; + @surface1: @catppuccin[@@flavor][@surface1]; + @surface0: @catppuccin[@@flavor][@surface0]; + @base: @catppuccin[@@flavor][@base]; + @mantle: @catppuccin[@@flavor][@mantle]; + @crust: @catppuccin[@@flavor][@crust]; + @accent: @catppuccin[@@flavor][@@accentColor]; + + @rosewater-filter: @catppuccin-filters[@@flavor][@rosewater]; + @flamingo-filter: @catppuccin-filters[@@flavor][@flamingo]; + @pink-filter: @catppuccin-filters[@@flavor][@pink]; + @mauve-filter: @catppuccin-filters[@@flavor][@mauve]; + @red-filter: @catppuccin-filters[@@flavor][@red]; + @maroon-filter: @catppuccin-filters[@@flavor][@maroon]; + @peach-filter: @catppuccin-filters[@@flavor][@peach]; + @yellow-filter: @catppuccin-filters[@@flavor][@yellow]; + @green-filter: @catppuccin-filters[@@flavor][@green]; + @teal-filter: @catppuccin-filters[@@flavor][@teal]; + @sky-filter: @catppuccin-filters[@@flavor][@sky]; + @sapphire-filter: @catppuccin-filters[@@flavor][@sapphire]; + @blue-filter: @catppuccin-filters[@@flavor][@blue]; + @lavender-filter: @catppuccin-filters[@@flavor][@lavender]; + @text-filter: @catppuccin-filters[@@flavor][@text]; + @subtext1-filter: @catppuccin-filters[@@flavor][@subtext1]; + @subtext0-filter: @catppuccin-filters[@@flavor][@subtext0]; + @overlay2-filter: @catppuccin-filters[@@flavor][@overlay2]; + @overlay1-filter: @catppuccin-filters[@@flavor][@overlay1]; + @overlay0-filter: @catppuccin-filters[@@flavor][@overlay0]; + @surface2-filter: @catppuccin-filters[@@flavor][@surface2]; + @surface1-filter: @catppuccin-filters[@@flavor][@surface1]; + @surface0-filter: @catppuccin-filters[@@flavor][@surface0]; + @base-filter: @catppuccin-filters[@@flavor][@base]; + @mantle-filter: @catppuccin-filters[@@flavor][@mantle]; + @crust-filter: @catppuccin-filters[@@flavor][@crust]; + @accent-filter: @catppuccin-filters[@@flavor][@@accentColor]; + } + + .defaults() { + color-scheme: if(@flavor = latte, light, dark); + + ::selection { + background-color: fade(@accent, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + } + + .rgbify(@color) { + @rgb: red(@color), green(@color), blue(@color); + } + + .hslify(@color) { + @raw: e( + %("%s, %s%, %s%", hue(@color), saturation(@color), lightness(@color)) + ); + } + + .css-variables() { + --ctp-rosewater: @rosewater; + --ctp-flamingo: @flamingo; + --ctp-pink: @pink; + --ctp-mauve: @mauve; + --ctp-red: @red; + --ctp-maroon: @maroon; + --ctp-peach: @peach; + --ctp-yellow: @yellow; + --ctp-green: @green; + --ctp-teal: @teal; + --ctp-sky: @sky; + --ctp-sapphire: @sapphire; + --ctp-blue: @blue; + --ctp-lavender: @lavender; + --ctp-text: @text; + --ctp-subtext1: @subtext1; + --ctp-subtext0: @subtext0; + --ctp-overlay2: @overlay2; + --ctp-overlay1: @overlay1; + --ctp-overlay0: @overlay0; + --ctp-surface2: @surface2; + --ctp-surface1: @surface1; + --ctp-surface0: @surface0; + --ctp-base: @base; + --ctp-mantle: @mantle; + --ctp-crust: @crust; + } +} + @-moz-document regexp("^https?://(www\\.|images\\.)?google\\..*") { :root { @@ -30,8 +159,6 @@ #catppuccin(@flavor) { #lib.palette(); #lib.defaults(); - - // Unset color-scheme from `#lib.defaults()`. iframe { color-scheme: none !important; } @@ -86,12 +213,12 @@ --Nsm0ce: @blue; } - /* header background */ + .CvDJxb { background-color: @base !important; } - /* safe search toggle dropdown */ + .z4R3Z.yb2zA { color: @blue !important; } @@ -99,13 +226,13 @@ color: @text !important; } - /* selected image background */ + .PNCib.fT6ABc::after { background-color: @surface1 !important; border-color: @blue !important; } - /* travel */ + .Usd1Ac { background-color: @surface0 !important; border-color: @surface2 !important; @@ -147,7 +274,7 @@ .VfPpkd-cTi5dd { color: @accent !important; } - /* news column thingymaboober idk what it's actually called, but it's like these columns of news headlines so yeah */ + .nEklgc { background-color: @surface0; } @@ -159,8 +286,8 @@ .GI74Re { color: @subtext0; } - /* widgets */ - /* timer */ + + .pMz3A, .qhXOwb, .yrvNxb .pv60Cd, @@ -169,7 +296,7 @@ background-color: @mantle !important; } - /* color picker */ + .P2c8Dd { background-color: @base; } @@ -178,7 +305,7 @@ border-color: @surface0; } - /* unit converter */ + .LNn04b { background-color: @mantle; color: @text !important; @@ -196,7 +323,7 @@ color: @crust; } - /* periodic table */ + .DJ3Gm { background-color: @peach; color: @crust; @@ -246,7 +373,7 @@ color: @crust; } - /* search bar right beneath websites */ + .YbqTTb, g-flat-button.BwMo1 { background-color: @base; @@ -257,14 +384,14 @@ border-color: @accent; } - /* some play buttons on games */ + .fxvhbc, .pGGGle { background-color: @accent; color: @crust; } - /* calculator senpai~ */ + .zRQJhd { background-color: @base !important; } @@ -326,14 +453,14 @@ border-color: @overlay0; } } - /* more button */ + .CybWFf { background-color: @surface0; } .Lu57id { color: @subtext0; } - /* live sports */ + .Wrsj9b, .ofy7ae, .PPjCfd, @@ -359,7 +486,7 @@ .GOsQPe { color: @text !important; } - /* knowoledge panel uwu */ + .H73aad { &, &hover { @@ -518,7 +645,7 @@ } } - /* AI search */ + .UxeQfc, .s7d4ef, @@ -587,9 +714,9 @@ border-color: @blue !important; } - /* End of AI search */ + - /* "People also search for.." / "People also ask" section */ + .vIifob, .p8Jhnd { background-color: @surface0 !important; @@ -610,8 +737,8 @@ color: @text !important; } - /* mobile ui */ - /* header background & search bar */ + + .v6U7rf { background-color: @base; } @@ -621,7 +748,7 @@ background: @surface0 !important; } - /* search suggestions */ + .K4VNlb, .Sl6fgd.A7Yvie, .Sl6fgd .zGVn2e, @@ -636,7 +763,7 @@ background-image: url("data:image/svg+xml,@{svg}"); } - /* text */ + .SAuUUd-z5C9Gb-fmcmS, .tJaMb, .TElO2c, @@ -655,7 +782,7 @@ color: @subtext0; } - /* borders */ + .Dgr5Hb, .GqbEwc { border-color: @surface0 !important; @@ -679,7 +806,7 @@ border-color: @surface1 !important; } - /* Featured snippets */ + @media (prefers-reduced-motion: no-preference) { .c2xzTb .ILfuVd b { background: linear-gradient( @@ -2061,7 +2188,6 @@ .vNdLpe:visited { color: @subtext0 !important; } - // "Looking for results in English?" popup [style*="background:#1f1000;border:1px solid #502900"], [style*="background:#feefc3;border:1px solid #fdd663"] { background: @mantle !important; @@ -2072,18 +2198,15 @@ color: @text !important; } } - // translate this page label .eFM0qc.BCF2pd { background: @base !important; } - // expand related question icon .aj35ze { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } - // tabs [selected].YmvwI { color: @text; border-bottom-color: @text; @@ -2091,7 +2214,6 @@ .YmvwI { color: @subtext0; } - // search bar buttons popups [style^="background: rgb(32, 33, 36); border: 1px solid rgb(60, 64, 67);"] { background: @mantle !important; border-color: @overlay0 !important; @@ -2101,12 +2223,10 @@ border-color: @overlay0 transparent !important; } } - // google apps button .gb_F .gb_E, .gb_F .gb_D { fill: @text; } - // translate popup .t4wgMc { background: @mantle; } @@ -2117,15 +2237,12 @@ .JFeuTc { color: @text; } - // skip to content .S6VXfe { background: @base; } - // selected image .qyKxnc.FnEtTd .srrRv { background: fade(@blue, 10%); } - // images page sticky suggestions header .JiJthb, .JiJthb .GKS7s:not([selected]) { background: @mantle; @@ -2138,61 +2255,44 @@ @mantle ); } - - /// tv show information - // episode title .huUgrf { color: @blue; } - // episode divider .PZPZlf, .Ea7JLb { border-color: @surface2; } - /// season selection - // underline .A0zxBb { color: @text; } - // background and border .qFF17c { background-color: @surface0 !important; border-color: @surface2 !important; } - // middle divider .qFF17c > div { border-color: @surface2 !important; } - // text .F3Istb > span { color: @subtext1 !important; } - // text underline .F9SH7d { border-color: @text !important; } - /// watch buttons - // button .ZkkK1e { background-color: @surface0; border-color: @surface1; } - // text .HJFlGc { color: @text; } - // play button .GzErzd { color: @blue !important; } - - // footer logo [style^="background:url(/images/nav_logo321.webp)"] { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } - // tweets horizontal list g-right-button, g-left-button { > g-fab { @@ -2205,26 +2305,21 @@ color: @text; } } - // image overlays .yUzGqc.wr8GYd { background: fade(@crust, 75%); color: @text; } - // google lens icon hover .ig2Tkd:hover:not(.RDPZE) { background: fade(@mantle, 80%); } - // image resolution .UWuvyf { background-color: fade(@crust, 80%); color: @text; } - // image hover shadow .mkpRId.qyKxnc:hover .F0uyec { background: fade(@crust, 5%); box-shadow: 0 2px 12px 0 @crust; } - // advanced search input.jfk-textinput, .gGbPid { background: @base; @@ -2258,7 +2353,6 @@ .jfk-radiobutton-label { color: @subtext1; } - // knowledge panel .Qc895c, .Utq4Cb.PZPZlf, .SU02Qd g-inner-card { diff --git a/styles/youtube/catppuccin.user.less b/styles/youtube/catppuccin.user.less index c30f02fdf1..e5d9bbcf8e 100644 --- a/styles/youtube/catppuccin.user.less +++ b/styles/youtube/catppuccin.user.less @@ -1,4 +1,4 @@ -/* ==UserStyle== +/* ==UserStyle== @name YouTube Catppuccin @namespace github.com/catppuccin/userstyles/styles/youtube @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/youtube @@ -37,7 +37,13 @@ @black: if(@flavor = latte, @text, @base); color: @text; - background: @base; + background: @base !important; + + + scrollbar-color: @overlay0 transparent !important; + * { + scrollbar-color: @overlay0 transparent !important; + } #--variables() { &, @@ -50,26 +56,270 @@ --efyt-control-bar-background-color: @mantle; --dimmer-text: @text; - /* Newest Variables */ + + + + + --yt-sys-color-baseline--base-background: @base; - --yt-sys-color-baseline--menu-background: @mantle; --yt-sys-color-baseline--raised-background: @surface0; + --yt-sys-color-baseline--menu-background: @mantle; --yt-sys-color-baseline--additive-background: @surface0; - --yt-sys-color-baseline--wordmark-text: @text; + --yt-sys-color-baseline--additive-background-inverse: @surface0; + --yt-sys-color-baseline--overlay-additive-background: fade(@surface0, 60%); + --yt-sys-color-baseline--inverted-background: @text; + --yt-sys-color-baseline--inverted-background-hover: @subtext0; + --yt-sys-color-baseline--solid-background: @text; + --yt-sys-color-baseline--solid-background-inverse: @base; + --yt-sys-color-baseline--overlay-solid-background: @text; + --yt-sys-color-baseline--overlay-solid-background-inverse: @base; + --yt-sys-color-baseline--static-white-background: @base; + + --yt-sys-color-baseline--text-primary: @text; --yt-sys-color-baseline--text-secondary: @subtext0; + --yt-sys-color-baseline--text-disabled: @subtext1; + --yt-sys-color-baseline--text-primary-inverse: @base; + --yt-sys-color-baseline--text-secondary-inverse: @subtext1; + --yt-sys-color-baseline--text-disabled-inverse: @overlay1; + --yt-sys-color-baseline--text-error: @red; + --yt-sys-color-baseline--text-warning: @peach; + --yt-sys-color-baseline--text-complete: @green; + --yt-sys-color-baseline--wordmark-text: @text; + --yt-sys-color-baseline--icon-active-other: @text; + --yt-sys-color-baseline--icon-warning: @peach; + + --yt-sys-color-baseline--call-to-action: @accent; + --yt-sys-color-baseline--call-to-action-hover: lighten(@accent, 5%); + --yt-sys-color-baseline--call-to-action-inverse: @accent; + --yt-sys-color-baseline--overlay-call-to-action: @accent; + --yt-sys-color-baseline--overlay-call-to-action-hover: lighten(@accent, 5%); --yt-sys-color-baseline--suggested-action: mix(@accent, @base, 30%); + --yt-sys-color-baseline--suggested-action-hover: mix(@accent, @base, 45%); + --yt-sys-color-baseline--suggested-action-inverse: mix(@accent, @base, 30%); + --yt-sys-color-baseline--brand-red-contrast: @accent; + --yt-sys-color-baseline--red-indicator: @accent; + --yt-sys-color-baseline--error-indicator: @red; + --yt-sys-color-baseline--error-indicator-inverse: @red; + --yt-sys-color-baseline--error-background-red: fade(@red, 20%); + --yt-sys-color-baseline--background-warning: fade(@peach, 30%); + --yt-sys-color-baseline--background-complete: fade(@green, 30%); + --yt-sys-color-baseline--themed-green: @green; + --yt-sys-color-baseline--themed-green-inverse: @green; + --yt-sys-color-baseline--overlay-green: @green; + + --yt-sys-color-baseline--outline: @surface0; + --yt-sys-color-baseline--outline-inverse: @surface1; --yt-sys-color-baseline--outline-opaque: @surface1; --yt-sys-color-baseline--outline-inverse-opaque: @overlay0; - --yt-sys-color-baseline--overlay-background-medium-light: fade( - @black, - 60% - ); - --yt-sys-color-baseline--overlay-background-heavy: fade(@black, 80%); + --yt-sys-color-baseline--outline-rim: fade(@text, 15%); + --yt-sys-color-baseline--outline-rim-inverse: fade(@black, 15%); + + + --yt-sys-color-baseline--tonal-background: @surface0; + --yt-sys-color-baseline--tonal-background-inverse: @surface0; + --yt-sys-color-baseline--tonal-wash: fade(@text, 5%); + --yt-sys-color-baseline--tonal-wash-inverse: fade(@black, 5%); + --yt-sys-color-baseline--tonal-rim: fade(@text, 10%); + --yt-sys-color-baseline--tonal-rim-inverse: fade(@black, 5%); + --yt-sys-color-baseline--solid-wash: fade(@text, 30%); + --yt-sys-color-baseline--solid-wash-inverse: fade(@text, 15%); + --yt-sys-color-baseline--solid-rim: fade(@text, 20%); + --yt-sys-color-baseline--solid-rim-inverse: fade(@text, 20%); + --yt-sys-color-baseline--button-chip-background-hover: @surface1; + --yt-sys-color-baseline--mono-filled-hover: @subtext0; + --yt-sys-color-baseline--mono-filled-hover-inverse: @surface1; + --yt-sys-color-baseline--mono-tonal-hover: @surface1; + --yt-sys-color-baseline--mono-tonal-hover-inverse: @surface1; + --yt-sys-color-baseline--overlay-filled-hover: @subtext0; + --yt-sys-color-baseline--touch-response: @text; + --yt-sys-color-baseline--touch-response-inverse: @base; + + --yt-sys-color-baseline--overlay-background-solid: @crust; - --yt-sys-color-baseline--overlay-text-primary: @text; + --yt-sys-color-baseline--overlay-background-heavy: fade(@black, 80%); + --yt-sys-color-baseline--overlay-background-medium-heavy: fade(@black, 40%); + --yt-sys-color-baseline--overlay-background-medium: fade(@black, 60%); + --yt-sys-color-baseline--overlay-background-medium-light: fade(@black, 30%); + --yt-sys-color-baseline--overlay-background-light: fade(@black, 10%); + --yt-sys-color-baseline--overlay-background-extra-light: fade(@black, 3%); + --yt-sys-color-baseline--overlay-background-brand: fade(@accent, 90%); + --yt-sys-color-baseline--themed-overlay-background: fade(@crust, 80%); + --yt-sys-color-baseline--overlay-text-primary: @white; + --yt-sys-color-baseline--overlay-text-primary-inverse: @crust; + --yt-sys-color-baseline--overlay-text-secondary: fade(@white, 70%); + --yt-sys-color-baseline--overlay-text-disabled: fade(@white, 30%); + --yt-sys-color-baseline--overlay-touch-response: @white; + --yt-sys-color-baseline--overlay-touch-response-inverse: @black; + --yt-sys-color-baseline--overlay-button-primary: fade(@white, 30%); + --yt-sys-color-baseline--overlay-button-secondary: fade(@white, 10%); + --yt-sys-color-baseline--overlay-button-secondary-darker: fade(@white, 20%); + --yt-sys-color-baseline--overlay-outline: fade(@white, 30%); + --yt-sys-color-baseline--overlay-outline-inverse: fade(@white, 30%); + --yt-sys-color-baseline--overlay-outline-rim: fade(@white, 15%); + --yt-sys-color-baseline--overlay-outline-rim-inverse: fade(@white, 15%); + --yt-sys-color-baseline--overlay-solid-rim: fade(@white, 20%); + --yt-sys-color-baseline--overlay-solid-rim-inverse: fade(@white, 20%); + --yt-sys-color-baseline--overlay-solid-wash: @white; + --yt-sys-color-baseline--overlay-solid-wash-inverse: fade(@white, 20%); + --yt-sys-color-baseline--overlay-tonal-background: fade(@white, 30%); + --yt-sys-color-baseline--overlay-tonal-background-inverse: fade(@white, 15%); + --yt-sys-color-baseline--overlay-tonal-hover: fade(@white, 20%); + --yt-sys-color-baseline--overlay-tonal-rim: fade(@white, 15%); + --yt-sys-color-baseline--overlay-tonal-rim-inverse: fade(@white, 15%); + --yt-sys-color-baseline--overlay-tonal-wash: fade(@white, 15%); + --yt-sys-color-baseline--overlay-tonal-wash-inverse: fade(@white, 15%); + + + --yt-sys-color-baseline--frosted-glass-desktop: fade(@base, 80%); + --yt-sys-color-baseline--frosted-glass-mobile: fade(@base, 80%); + + + --yt-sys-color-baseline--scrim-background-gradient-1: fade(@base, 0%); + --yt-sys-color-baseline--scrim-background-gradient-2: fade(@base, 30%); + --yt-sys-color-baseline--scrim-background-gradient-3: fade(@base, 60%); + --yt-sys-color-baseline--scrim-background-gradient-4: fade(@base, 90%); + --yt-sys-color-baseline--scrim-background-gradient-5: @base; + --yt-sys-color-baseline--shadow-medium: fade(@crust, 75%); + + + --yt-sys-color-baseline--status-bar: @base; + --yt-sys-color-baseline--system-bar: @base; + + + --yt-sys-color-baseline--static-brand-red: @accent; + --yt-sys-color-baseline--static-brand-white: @text; + --yt-sys-color-baseline--static-brand-black: @base; + --yt-sys-color-baseline--static-black: @base; + --yt-sys-color-baseline--static-dark-grey: @surface0; + --yt-sys-color-baseline--static-grey: @subtext0; + --yt-sys-color-baseline--static-ad-yellow: @peach; + --yt-sys-color-baseline--static-magenta: @pink; + --yt-sys-color-baseline--static-medium-magenta: @maroon; + --yt-sys-color-baseline--static-clear-color: transparent; + --yt-sys-color-baseline--static-clear-black: transparent; + + + --yt-sys-color-baseline--blue-1: @sapphire; + --yt-sys-color-baseline--blue-2: @sapphire; + --yt-sys-color-baseline--blue-3: @blue; + --yt-sys-color-baseline--blue-4: @blue; + --yt-sys-color-baseline--blue-5: @sky; + --yt-sys-color-baseline--blue-6: @sky; + --yt-sys-color-baseline--blue-7: @sky; + --yt-sys-color-baseline--green-6: @green; + --yt-sys-color-baseline--grey-4: @overlay2; + --yt-sys-color-baseline--grey-6: @subtext0; + --yt-sys-color-baseline--purple-6: @mauve; + --yt-sys-color-baseline--red-3: @accent; + --yt-sys-color-baseline--red-4: @red; + + + --yt-sys-color-baseline--genai-1: @teal; + --yt-sys-color-baseline--genai-1-additive: fade(@teal, 30%); + --yt-sys-color-baseline--genai-2: @mauve; + --yt-sys-color-baseline--genai-2-additive: fade(@mauve, 30%); + --yt-sys-color-baseline--genai-3: @pink; + --yt-sys-color-baseline--genai-3-additive: fade(@pink, 30%); + --yt-sys-color-baseline--genai-4: @red; + --yt-sys-color-baseline--genai-4-additive: fade(@red, 30%); + + + --yt-sys-color-baseline--assistive-feed-themed-gradient-1: @teal; + --yt-sys-color-baseline--assistive-feed-themed-gradient-2: @mauve; + --yt-sys-color-baseline--assistive-feed-themed-gradient-3: @red; + --yt-sys-color-baseline--assistive-feed-vibrant-gradient-1: @teal; + --yt-sys-color-baseline--assistive-feed-vibrant-gradient-2: @mauve; + --yt-sys-color-baseline--assistive-feed-vibrant-gradient-3: @red; + --yt-sys-color-baseline--feed-vibrant-gradient1: @teal; + --yt-sys-color-baseline--feed-vibrant-gradient2: @mauve; + --yt-sys-color-baseline--feed-vibrant-gradient3: @red; + + + --yt-sys-color-baseline--keyboard-background: @base; + --yt-sys-color-baseline--keyboard-background-action: @accent; + --yt-sys-color-baseline--keyboard-background-bar: @mantle; + --yt-sys-color-baseline--keyboard-background-emoji: @base; + --yt-sys-color-baseline--keyboard-background-key: @surface0; + --yt-sys-color-baseline--keyboard-background-key-alt: @surface1; + --yt-sys-color-baseline--keyboard-background-switch: @overlay0; + --yt-sys-color-baseline--keyboard-divider: @surface1; + --yt-sys-color-baseline--keyboard-text-action: @base; + --yt-sys-color-baseline--keyboard-text-character: @text; + --yt-sys-color-baseline--keyboard-text-chevron: @text; + --yt-sys-color-baseline--keyboard-text-icon: @text; + --yt-sys-color-baseline--keyboard-text-symbol: @subtext0; + + + --yt-deprecated-white-1: @text; + --yt-deprecated-white-2: @subtext0; + --yt-deprecated-white-3: @subtext1; + --yt-deprecated-white-4: darken(@subtext1, 5%); + --yt-deprecated-white-1-alpha-10: fade(@text, 90%); + --yt-deprecated-white-1-alpha-20: fade(@text, 80%); + --yt-deprecated-white-1-alpha-25: fade(@text, 75%); + --yt-deprecated-white-1-alpha-30: fade(@text, 70%); + --yt-deprecated-white-1-alpha-70: fade(@text, 30%); + --yt-deprecated-white-1-alpha-95: fade(@text, 5%); + --yt-deprecated-white-1-alpha-98: fade(@text, 2%); + --yt-deprecated-white-opacity-lighten-1: fade(@text, 80%); + --yt-deprecated-white-opacity-lighten-2: fade(@text, 60%); + --yt-deprecated-white-opacity-lighten-4: fade(@text, 20%); + --yt-deprecated-black-1: @overlay1; + --yt-deprecated-black-2: @overlay0; + --yt-deprecated-black-3: @surface2; + --yt-deprecated-black-4: @surface1; + --yt-deprecated-black-pure: @surface0; + --yt-deprecated-black-1-alpha-95: fade(@crust, 5%); + --yt-deprecated-black-1-alpha-98: fade(@crust, 2%); + --yt-deprecated-black-pure-alpha-5: @subtext0; + --yt-deprecated-black-pure-alpha-10: @overlay2; + --yt-deprecated-black-pure-alpha-15: fade(@crust, 85%); + --yt-deprecated-black-pure-alpha-30: fade(@crust, 70%); + --yt-deprecated-black-pure-alpha-60: fade(@crust, 40%); + --yt-deprecated-black-pure-alpha-80: fade(@crust, 20%); + --yt-deprecated-grey-1: @text; + --yt-deprecated-grey-2: @subtext0; + --yt-deprecated-grey-3: @subtext1; + --yt-deprecated-grey-4: @overlay2; + --yt-deprecated-grey-5: @overlay1; + --yt-deprecated-brand-youtube-red: @accent; + --yt-deprecated-brand-medium-red: @accent; + --yt-deprecated-brand-light-red: @accent; + --yt-deprecated-brand-medium-red-alpha-90: fade(@accent, 10%); + --yt-deprecated-brand-medium-red-alpha-30: fade(@accent, 70%); + --yt-deprecated-brand-light-red-alpha-30: fade(@accent, 70%); + --yt-deprecated-red-30: @peach; + --yt-deprecated-red-70: @red; + --yt-deprecated-yellow: @peach; + --yt-deprecated-light-green: @green; + --yt-deprecated-dark-green: @green; + --yt-deprecated-blue: @blue; + --yt-deprecated-blue-light: @sapphire; + --yt-deprecated-pale-blue: @sky; + --yt-deprecated-light-blue: @sky; + --yt-deprecated-light-blue-alpha-30: fade(@sky, 70%); + --yt-deprecated-dark-blue: @sapphire; + --yt-deprecated-dark-blue-alpha-30: fade(@sapphire, 70%); + --yt-deprecated-navy-blue: @teal; + --yt-deprecated-general-background-a: @base; + --yt-deprecated-general-background-b: @base; + --yt-deprecated-general-background-c: @crust; + --yt-deprecated-paper-tab-ink: fade(@text, 70%); + --yt-deprecated-overlay-icon-active-other: @white; + --yt-deprecated-dark-surface-100: @mantle; + --yt-deprecated-luna-black: @crust; + --yt-deprecated-luna-black-opacity-lighten-1: fade(@crust, 80%); + --yt-deprecated-luna-black-opacity-lighten-2: fade(@crust, 60%); + --yt-deprecated-luna-black-opacity-lighten-3: fade(@crust, 40%); + --yt-deprecated-luna-black-opacity-lighten-4: fade(@crust, 20%); + --yt-deprecated-opalescence-grey: @overlay1; + --yt-deprecated-opalescence-grey-opacity-lighten-3: fade(@overlay1, 40%); + --yt-deprecated-opalescence-soft-grey: @surface2; + --yt-deprecated-opalescence-soft-grey-opacity-lighten-1: fade(@surface2, 80%); + --yt-deprecated-opalescence-soft-grey-opacity-lighten-3: fade(@surface2, 40%); --yt-spec-white-1: @text; --yt-spec-white-2: @subtext0; @@ -224,7 +474,7 @@ --yt-spec-overlay-background-heavy: fade(@black, 80%); --yt-spec-overlay-background-solid: @black; - /* Search bar */ + --ytd-searchbox-border-color: @surface0; --ytd-searchbox-legacy-border-color: @surface0; --ytd-searchbox-legacy-border-shadow-color: fade( @@ -240,12 +490,15 @@ --ytd-searchbox-background: @base; --ytd-searchbox-text-color: @text; - /* System icons */ + + --ytd-menu-renderer-button-color: @text; + + --yt-spec-icon-inactive: @text; --yt-spec-icon-disabled: @overlay1; --yt-spec-brand-icon-inactive: @overlay2; - /* Live chat */ + --yt-live-chat-background-color: @base; --yt-live-chat-primary-text-color: @text; --yt-live-chat-action-panel-background-color: @base; @@ -330,7 +583,7 @@ color: var(--paper-tooltip-text-color); } - /* Links */ + --yt-endpoint-color: @text; --yt-endpoint-visited-color: @text; --yt-endpoint-hover-color: @accent; @@ -386,7 +639,7 @@ #--variables() !important; - /* Misc */ + & when (@logo = 0) { ytd-topbar-logo-renderer, @@ -399,7 +652,7 @@ background: @accent; } - /* Selected chapter */ + ytd-macro-markers-list-item-renderer { --ytd-macro-markers-list-item-background-color: @surface0; --ytd-macro-markers-list-item-title-color: @text; @@ -415,8 +668,7 @@ --yt-active-playlist-panel-background-color: @surface0; } - ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] - .header.ytd-playlist-panel-renderer { + ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .header.ytd-playlist-panel-renderer { --iron-icon-fill-color: @text; background-color: @base; } @@ -425,14 +677,14 @@ --iron-icon-fill-color: @text; } + #background.ytd-masthead, #frosted-glass { - --yt-frosted-glass-desktop: @base; - --yt-spec-frosted-glass-desktop: @base; + --yt-frosted-glass-desktop: fade(@base, 80%); + --yt-spec-frosted-glass-desktop: fade(@base, 80%); } - ytd-feed-filter-chip-bar-renderer[expand-instead-of-scroll] - #chips-wrapper.ytd-feed-filter-chip-bar-renderer { + ytd-feed-filter-chip-bar-renderer[expand-instead-of-scroll] #chips-wrapper.ytd-feed-filter-chip-bar-renderer { --iron-icon-fill-color: @text; background-color: @base; } @@ -453,6 +705,13 @@ --yt-lightsource-secondary-title-color: @subtext0; } + + ytd-tabbed-page-header { + --yt-lightsource-section1-color: @base; + --yt-lightsource-primary-title-color: @text; + --yt-lightsource-secondary-title-color: @subtext0; + } + yt-live-chat-renderer { --yt-button-default-text-color: @text; --yt-button-default-background-color: @base; @@ -470,7 +729,7 @@ } } - /* Skeleton */ + #guide-skeleton, #home-container-skeleton, #home-chips { @@ -492,7 +751,7 @@ background-color: @surface1; } - /* Ambient mode */ + #cinematics, #cinematic-container { display: none; @@ -508,7 +767,7 @@ background-color: @accent; } - /* Icons */ + [fill="red"], [fill="#F00"], @@ -536,7 +795,41 @@ } } - /* Notifications Bell and Indicator */ + + like-button-view-model path[fill="rgb(255,255,255)"] { + fill: @text !important; + } + + + ytd-guide-entry-renderer { + [fill="#fff"], + [fill="#FFF"], + [fill="#FFFFFF"] { + fill: @crust; + } + } + + + #icon.ytd-reel-shelf-renderer { + [fill="#fff"], + [fill="#FFF"], + [fill="#FFFFFF"], + [fill="white"] { + fill: @crust; + } + } + + + #icon.yt-live-chat-viewer-engagement-message-renderer { + [fill="#fff"], + [fill="#FFF"], + [fill="#FFFFFF"], + [fill="white"] { + fill: @crust; + } + } + + .ytSpecIconBadgeShapeStyleOverlay .ytSpecIconBadgeShapeIcon, .ytSpecIconBadgeShapeBadge { color: @text; @@ -546,7 +839,7 @@ color: @base; } - /* Buttons */ + .yt-spec-button-shape-next--mono { &.yt-spec-button-shape-next--tonal { @@ -564,7 +857,7 @@ stroke: @text; } - /* Accent for filled-in thumbs up (like button) */ + [animated-icon-type="LIKE"] { g path[fill] { fill: @accent; @@ -592,7 +885,7 @@ &.yt-spec-button-shape-next--text { color: @text; - /* Accent for filled-in thumbs up (like button) */ + path[d="M3,11h3v10H3V11z M18.77,11h-4.23l1.52-4.94C16.38,5.03,15.54,4,14.38,4c-0.58,0-1.14,0.24-1.52,0.65L7,11v10h10.43 c1.06,0,1.98-0.67,2.19-1.61l1.34-6C21.23,12.15,20.18,11,18.77,11z"] { fill: @accent; } @@ -679,7 +972,116 @@ background-color: fade(@surface1, 70%); } - /* Search box */ + + .ytSpecButtonShapeNextMono { + &.ytSpecButtonShapeNextTonal { + color: @text !important; + background-color: @surface0 !important; + + &:hover { + background-color: @surface1 !important; + } + } + + &.ytSpecButtonShapeNextOutline { + color: @text !important; + border-color: @surface2 !important; + + &:hover { + background-color: @surface2 !important; + } + } + + &.ytSpecButtonShapeNextText { + color: @text !important; + + &:hover { + background-color: @surface1 !important; + } + } + + &.ytSpecButtonShapeNextFilled { + color: @base !important; + background-color: @accent !important; + + &:hover { + background-color: darken(@accent, 5%) !important; + } + } + } + + .ytSpecButtonShapeNextDisabled { + color: @overlay1 !important; + } + + .ytSpecButtonShapeNextOverlay { + &.ytSpecButtonShapeNextTonal { + color: @text !important; + background-color: @surface0 !important; + + &:hover { + background-color: @surface1 !important; + } + } + + &.ytSpecButtonShapeNextText { + color: @text !important; + + &:hover { + background-color: @surface0 !important; + } + } + + &.ytSpecButtonShapeNextFilled { + color: @base !important; + background-color: @accent !important; + } + + &.ytSpecButtonShapeNextOutline { + color: @text !important; + border-color: @surface1 !important; + + &:hover { + background-color: @surface0 !important; + } + } + } + + .ytSpecButtonShapeNextCallToAction { + &.ytSpecButtonShapeNextOutline { + color: @accent !important; + border-color: @surface2 !important; + + &:hover { + background-color: fade(@accent, 30%) !important; + color: @accent !important; + } + } + + &.ytSpecButtonShapeNextText { + color: @accent !important; + + &:hover { + background-color: fade(@accent, 30%) !important; + } + } + + &.ytSpecButtonShapeNextFilled { + color: @base !important; + background-color: @accent !important; + + &:hover { + background-color: lighten(@accent, 5%) !important; + } + } + } + + .ytSpecButtonShapeNextDisabled.ytSpecButtonShapeNextFilled { + color: @subtext0 !important; + background-color: fade(@surface1, 70%) !important; + } + + .ytSearchboxComponentInputBox, .ytSearchboxComponentInputBoxDark { @@ -727,32 +1129,161 @@ color: var(--ytd-searchbox-text-color); } - /* Video description */ - - // Video description background (collapsed on hover) + ytd-watch-metadata { + color: @text !important; --yt-saturated-raised-background: @surface1 !important; --yt-saturated-text-primary: @text !important; --yt-saturated-text-secondary: @subtext1 !important; } - // Video description text (expanded) - ytd-text-inline-expander - .ytAttributedStringLinkInheritColor:not( - .ytAttributedStringLink - ) { + #description.ytd-watch-metadata { + background-color: @surface0 !important; + } + ytd-text-inline-expander .ytAttributedStringLinkInheritColor:not(.ytAttributedStringLink), + ytd-text-inline-expander tp-yt-paper-button { + color: @text !important; + } + ytd-text-inline-expander { color: @text !important; } - // Video description YouTube links + ytd-text-inline-expander[engagement-panel] { + background: @surface1 !important; + } .ytAttributedStringHighlightTextDecorator { + background-color: @surface1 !important; + } + ytd-watch-info-text { + color: @text !important; + } + #title.ytd-video-description-infocards-section-renderer, + #title.ytd-structured-description-channel-lockup-renderer { + color: @text !important; + } + #subtitle.ytd-video-description-infocards-section-renderer, + #subscriber-count.ytd-structured-description-channel-lockup-renderer { + color: @subtext0 !important; + } + #title.ytd-video-description-header-renderer { + color: @text !important; + } + factoid-renderer { + --yt-saturated-raised-background: fade(@green, 15%) !important; + --yt-saturated-additive-background: fade(@green, 15%) !important; + --yt-saturated-text-primary: @text !important; + --yt-saturated-text-secondary: @green !important; + } + + + .cue.ytd-transcript-body-renderer, + .ytwTranscriptSegmentViewModelHost, + .ytwTranscriptSegmentViewModelHostActive, + #title.ytd-transcript-section-header-renderer, + #title.ytd-video-description-transcript-section-renderer { + color: @text !important; + } + .cue-group-start-offset.ytd-transcript-body-renderer, + .ytwTranscriptSegmentViewModelTimestamp, + #sub-header-text.ytd-video-description-transcript-section-renderer { + color: @subtext0 !important; + } + + + ytd-expandable-metadata-renderer, + ytd-expandable-metadata-renderer[is-watch] { + background-color: @surface1 !important; + } + #collapsed-title.ytd-expandable-metadata-renderer, + #prominent-collapsed-label.ytd-expandable-metadata-renderer, + #collapsed-label.ytd-expandable-metadata-renderer, + .videoSummaryContentViewModelHost { + color: @text !important; + } + #expanded-title.ytd-expandable-metadata-renderer, + #expanded-title-subtitle-group.ytd-expandable-metadata-renderer, + #expanded-subtitle.ytd-expandable-metadata-renderer a { + color: @subtext0 !important; + } + #timestamp.ytd-expandable-metadata-renderer { + color: @accent !important; + background-color: fade(@accent, 20%) !important; + } + ytd-expandable-metadata-renderer:not([is-expanded]) #header.ytd-expandable-metadata-renderer:hover, + ytd-expandable-metadata-renderer .ytSpecButtonShapeNextMono.ytSpecButtonShapeNextText:hover { background-color: @surface2 !important; } - /* Links */ + + h3.ytd-macro-markers-list-item-renderer { + color: @text !important; + } + #time.ytd-macro-markers-list-item-renderer { + color: @subtext1 !important; + background-color: @surface1 !important; + } + + #items.ytd-horizontal-card-list-renderer::before { + background-color: @surface1 !important; + } + ytd-engagement-panel-title-header-renderer #title-text { + color: @text !important; + } + #title.ytd-rich-list-header-renderer { + color: @text !important; + } + #subtitle.ytd-rich-list-header-renderer, + #title-annotation.ytd-rich-list-header-renderer { + color: @subtext0 !important; + } + ytd-comment-view-model #author-text, + ytd-comment-view-model #content-text { + color: @text !important; + } + ytd-comment-view-model #published-time-text a, + #simplebox-placeholder { + color: @subtext0 !important; + } + + + #vote-count-middle.ytd-comment-engagement-bar, + #vote-count-left.ytd-comment-engagement-bar, + #vote-count-middle.ytd-comment-action-buttons-renderer, + #vote-count-left.ytd-comment-action-buttons-renderer { + color: @subtext0 !important; + } + ytd-comment-engagement-bar[is-liked] #vote-count-middle.ytd-comment-engagement-bar, + ytd-comment-engagement-bar[is-liked] #vote-count-left.ytd-comment-engagement-bar, + ytd-comment-action-buttons-renderer[is-liked] #vote-count-middle.ytd-comment-action-buttons-renderer, + ytd-comment-action-buttons-renderer[is-liked] #vote-count-left.ytd-comment-action-buttons-renderer { + color: @text !important; + } + .translate-button.ytd-comment-view-model, + .ytCommentFilterContextHost { + color: @subtext0 !important; + } + #label.ytd-pinned-comment-badge-renderer, + yt-icon.ytd-pinned-comment-badge-renderer, + .more-button.ytd-comment-view-model, + .less-button.ytd-comment-view-model, + #contextual-info.ytd-engagement-panel-title-header-renderer { + color: @subtext0 !important; + } + #label-icon.yt-dropdown-menu { + color: @text !important; + } + #pause-composer.ytd-comment-pause-composer-renderer { + background-color: @surface0 !important; + color: @text !important; + } + #owner-sub-count.ytd-video-owner-renderer { + color: @subtext0 !important; + } + + .ytAttributedStringLinkCallToActionColor { color: @accent; } - /* Course Playlist (e.g. https://www.youtube.com/playlist?list=PLZHQObOWTQDNPOjrT6KVlfJuKtYTftqH6) */ + .ytwCourseProgressViewModelHostProgressTitle, .ytwCourseProgressViewModelHostProgressSubtitle { color: @text; @@ -773,8 +1304,6 @@ .ytwHowThisWasMadeSectionViewModelBodyText { color: @subtext0; } - - // "Ask" - AI chat .ytVideoDescriptionYouchatSectionViewModelSectionTitle { color: @text; } @@ -795,8 +1324,6 @@ .chatInputViewModelChatDisclaimer { color: @subtext0; } - - // Timeline/Transcript .ytwTimelineChapterViewModelTitle, .ytShelfHeaderLayoutTitle { color: @text; @@ -812,8 +1339,6 @@ background-color: @overlay0; color: @text; } - - // Video Attributes (Music, Games) .videoAttributesSectionViewModelTitle, .ytVideoAttributeViewModelTitle { color: @text; @@ -823,7 +1348,7 @@ color: @subtext1; } - /* Thumbnails */ + .ytp-sb-unsubscribe { background-color: @surface2; @@ -833,15 +1358,12 @@ background-color: @accent; color: @base; } - - // Watch progress bar .ytThumbnailOverlayProgressBarHostWatchedProgressBar { background-color: @surface2; } .ytThumbnailOverlayProgressBarHostWatchedProgressBarSegment { background: @accent; } - // Watch progress bar (legacy component) ytd-thumbnail-overlay-resume-playback-renderer { background-color: @surface2; @@ -850,7 +1372,7 @@ } } - /* Panels, popups, tooltips */ + .ytp-tooltip-bottom-text { background: fade(@surface0, 90%); @@ -905,9 +1427,7 @@ } } - /* Video player */ - - // Shorts and video hover preview progress bars + yt-progress-bar { .ytProgressBarLineProgressBarPlayed, .ytProgressBarPlayheadProgressBarPlayheadDot { @@ -956,6 +1476,11 @@ fill: @white; } + + .ytp-large-play-button [fill="#fff"] { + fill: @crust; + } + .ytp-volume-slider-handle { &, &::before { @@ -988,7 +1513,7 @@ } } - /* stats for nerds */ + .ytp-sfn { background: fade(@base, 80%); color: @text; @@ -1017,7 +1542,7 @@ } } - /* Video highlight */ + ytd-rich-item-renderer.ytd-rich-item-renderer-highlight { background-color: fade(@accent, 10%); box-shadow: fade(@accent, 10%) 0 0 0 10px; @@ -1038,16 +1563,20 @@ color: @subtext1; } } - ytd-reel-video-renderer[is-watch-while-mode] - .ytSpecButtonShapeWithLabelLabel { + ytd-reel-video-renderer[is-watch-while-mode] .ytSpecButtonShapeWithLabelLabel { color: @white; } + + ytd-reel-video-renderer { + --reel-metadata-color: @white !important; + } + .ytdVolumeControlsMuteIcon { color: @white; } - /* Buy super thanks button */ + .YtdShortsSuggestedActionStaticHostContainer { background-color: fade(@black, 60%); @@ -1057,12 +1586,38 @@ } } } - // Video/thumbnail renderer overlayed buttons - .ytBadgeShapeThumbnailDefaultRedesign, // Timestamp - // Play Next + + + ytd-shorts-player-controls { + .ytSpecButtonShapeNextOverlayDark.ytSpecButtonShapeNextTonal[style*="rgba(0, 0, 0, 0.3)"], + > div:has(.button-container) { + background: fade(@black, 60%) !important; + } + .ytSpecButtonShapeNextOverlayDark, + .ytmClosedCaptioningButtonButton { + color: @white !important; + } + } + + + .ytp-ad-badge__text--clean-player, + .ytp-ad-pod-index, + .ytp-visit-advertiser-link__text { + color: @white !important; + } + + + ytd-shorts[is-watch-while-mode] .navigation-container.ytd-shorts { + background: @base !important; + } + .navigation-button.ytd-shorts ytd-button-renderer { + background-color: @surface0 !important; + } + .ytBadgeShapeThumbnailDefaultRedesign, .yt-spec-button-shape-next--overlay-dark.yt-spec-button-shape-next--tonal[style="background-color: rgba(0, 0, 0, 0.3);"], - .ytdVolumeControlsBackgroundScrim, // Shorts Volume Slider + .ytdVolumeControlsBackgroundScrim, .ytInlinePlayerControlsTopRightControlsCircleButton // Homepage + { background: fade(@black, 60%) !important; color: @white; @@ -1073,40 +1628,37 @@ color: @base; } - /* Video previews */ - - // Background (on hover) + .ytSpecTouchFeedbackShapeHoverEffect { background-color: @surface0 !important; } - // Title .ytLockupMetadataViewModelTitle { color: @text !important; } - // Details .ytLockupMetadataViewModelMetadata { color: @subtext0 !important; } - // Badges (e.g. "CC", "New") .ytBadgeShapeDefault { color: @subtext0; - background: @surface1; + background: fade(@surface2, 60%); &.ytBadgeShapeModern { background: none; } } - // "Fundraiser" .ytBadgeShapeCommerce { color: @green; } - // "Live" .ytBadgeShapeThumbnailLive { background: @accent; color: @base; } + .ytBadgeShapeLive { + background: @accent; + color: @base; + } - /* Shorts titles and views on homepage */ + .shortsLockupViewModelHostOutsideMetadataEndpoint { color: @text; } @@ -1114,7 +1666,7 @@ color: @subtext0; } - /* Buy super thanks bar */ + #progressContainer.tp-yt-paper-progress { background-color: @mantle; } @@ -1137,7 +1689,7 @@ color: @crust; } - /* Avatar */ + .ytSpecAvatarShapeLiveRing::after { background: @accent !important; } @@ -1148,35 +1700,25 @@ color: @base; } - /* Channel pages */ - - // Channel name + .ytPageHeaderViewModelHost { .ytPageHeaderViewModelTitle { color: @text; } - - // Subscribers and video statistics .ytPageHeaderViewModelContentMetadata { color: @subtext0; } - - // Handle and verified checkmark [style$="color: rgb(255, 255, 255);"] { color: @text !important; } } - // Channel bio .ytTruncatedTextHost { color: @subtext0; } - // "...More", "and X more links" .ytAttributionViewModelSuffix .ytAttributedStringLinkCallToActionColor, .ytTruncatedTextAbsoluteButton { color: @text; } - - // Channel tabs .ytTabShapeTab { color: @subtext1; } @@ -1190,10 +1732,11 @@ background-color: @subtext1; } - /* Components */ + - /* Menus and context sheets */ - .ytContextualSheetLayoutHost, ytd-menu-popup-renderer { + + .ytContextualSheetLayoutHost, + ytd-menu-popup-renderer { background-color: @mantle; } .ytListItemViewModelTappable:hover { @@ -1207,7 +1750,14 @@ .ytListItemViewModelSubtitle { color: @subtext1; } - /* Dialogs */ + .ytListItemViewModelSelectionText { + color: @subtext0; + } + yt-formatted-string.ytd-toggle-menu-service-item-renderer, + yt-icon.ytd-toggle-menu-service-item-renderer { + color: @text; + } + .ytSpecDialogLayoutHost { background-color: @mantle; @@ -1216,7 +1766,7 @@ } } - /* Dropdowns */ + .ytDropdownViewModelTitle { color: @text; } @@ -1233,7 +1783,7 @@ border-color: @text; } - /* Toggles/Switches */ + .ytSwitchShapeTrack { background-color: @surface2; @@ -1244,8 +1794,24 @@ .ytSwitchShapeTrackActive { background-color: @accent; } + + tp-yt-paper-toggle-button { + .toggle-bar { + background-color: @surface2 !important; + } + .toggle-button { + background-color: @overlay2 !important; + } + + &[checked] { + .toggle-bar, + .toggle-button { + background-color: @accent !important; + } + } + } - /* Textareas */ + .ytStandardsTextareaShapeTextarea { color: @text; } @@ -1256,7 +1822,7 @@ color: transparent !important; // defaults important overrides this } - /* Comments */ + .ytSubThreadConnection, .ytSubThreadContinuation { border-left-color: @surface1; @@ -1271,27 +1837,26 @@ .ytSubThreadHovered > .ytSubThreadThreadline .ytSubThreadConnection { border-bottom-color: @overlay0; } + .continuation.ytd-comment-view-model { + border-left-color: @surface1; + } + ytd-comment-view-model[hovered] .continuation.ytd-comment-view-model { + border-left-color: @overlay0; + } - /* Profile Card */ - // (Click a user's profile picture in the comments to view.) + .ytProfileCardViewModelHost { background-color: @mantle; - - // Name and handle .ytProfileIdentityInfoViewModelChannelName, .ytProfileIdentityInfoViewModelMetadataHandleWithBoldFont { color: @text; } - // Verification badge .ytProfileIdentityInfoViewModelBadge { filter: @text-filter; } - // Statistics .ytProfileIdentityInfoViewModelMetadataContent { color: @subtext0; } - - // Subsection (e.g. "On this channel") .ytProfileInfoViewModelSectionTitle { color: @text; } @@ -1301,8 +1866,6 @@ .ytProfileInfoViewModelSectionHeartIcon { filter: @subtext1-filter; } - - // Subsection - "Recent comments on this channel" .ytCommentInteractionViewModelVideoTitle { color: @text; } @@ -1311,7 +1874,7 @@ } } - /* Live chat replay */ + .ytVideoMetadataCarouselViewModelHost, .YtVideoMetadataCarouselViewModelHost { background-color: @surface0; @@ -1327,15 +1890,712 @@ } } - /* Category tag pills */ - .ytChipShapeInactive { - background-color: @surface0; + + .ytChipShapeInactive, + .ytChipShapeChip:not(.ytChipShapeActive) { + background-color: fade(@text, 10%); color: @text; } .ytChipShapeActive { background-color: @accent; color: @base; } + + + + + ytd-app, + ytd-page-manager, + #page-manager.ytd-app, + #content.ytd-app { + background: @base !important; + } + + + #title.ytd-item-section-header-renderer, + #title.ytd-reel-shelf-renderer, + #title.ytd-shelf-renderer, + #title.ytd-rich-shelf-renderer { + color: @text !important; + } + + + #video-title.ytd-grid-movie-renderer, + #video-title.ytd-grid-video-renderer, + #title.ytd-grid-channel-renderer { + color: @text !important; + } + .grid-movie-renderer-metadata.ytd-grid-movie-renderer, + ytd-grid-video-renderer ytd-channel-name a, + ytd-grid-video-renderer #byline a, + #metadata-line.ytd-grid-video-renderer { + color: @subtext0 !important; + } + + + #video-title.ytd-grid-show-renderer { + color: @text !important; + } + ytd-grid-show-renderer ytd-channel-name, + ytd-grid-show-renderer ytd-channel-name #text { + color: @subtext0 !important; + } + + + ytd-thumbnail-overlay-bottom-panel-renderer { + background-color: fade(@crust, 80%) !important; + color: @white !important; + } + + + #author-text.ytd-backstage-post-renderer, + #content-text.ytd-backstage-post-renderer { + color: @text !important; + } + #content-text.ytd-backstage-post-renderer a { + color: @accent !important; + } + #published-time-text.ytd-backstage-post-renderer, + #published-time-text.ytd-backstage-post-renderer a, + .more-button.ytd-backstage-post-renderer, + .less-button.ytd-backstage-post-renderer { + color: @subtext0 !important; + } + + + #content-attachment.ytd-backstage-post-renderer ytd-video-renderer { + background-color: @base !important; + } + #content-attachment.ytd-backstage-post-renderer #video-title { + color: @text !important; + } + #content-attachment.ytd-backstage-post-renderer ytd-channel-name a, + #content-attachment.ytd-backstage-post-renderer .inline-metadata-item, + #content-attachment.ytd-backstage-post-renderer #description-text { + color: @subtext0 !important; + } + + + #video-title.ytd-rich-grid-media { + color: @text !important; + } + ytd-rich-grid-media ytd-channel-name a, + ytd-rich-grid-media #byline a, + ytd-rich-grid-media #metadata-line { + color: @subtext0 !important; + } + + + #view-more.ytd-rich-grid-media, + #view-more.ytd-rich-grid-media a { + color: @accent !important; + } + + + #attributed-channel-name, + #attributed-channel-name .ytAttributedStringLinkInheritColor { + color: @subtext0 !important; + } + + + #title.ytd-game-details-renderer { + color: @text !important; + } + #live-viewers-count.ytd-game-details-renderer, + #auto-generated.ytd-game-details-renderer { + color: @subtext0 !important; + } + + + #subtitle.ytd-shelf-renderer, + #subtitle.ytd-rich-shelf-renderer, + #subtitle.ytd-brand-video-shelf-renderer { + color: @subtext0 !important; + } + + + .ytBadgeShapePromoted .ytBadgeShapeText { + color: @subtext0 !important; + } + + + .ytBadgeShapeMedia .ytBadgeShapeText { + color: @subtext0 !important; + } + .ytBadgeShapeThumbnailDefault .ytBadgeShapeText { + color: @white !important; + } + + + #title.ytd-merch-shelf-renderer, + .product-item-title.ytd-merch-shelf-item-renderer, + .product-item-price.ytd-merch-shelf-item-renderer { + color: @text !important; + } + .product-item-merchant-text.ytd-merch-shelf-item-renderer, + .product-item-description.ytd-merch-shelf-item-renderer { + color: @subtext0 !important; + } + .product-item-merchant-icon.ytd-merch-shelf-item-renderer { + color: @subtext0 !important; + fill: @subtext0 !important; + } + .product-item-button.ytd-merch-shelf-item-renderer { + background-color: @accent !important; + color: @base !important; + } + + + #hero-title.ytd-default-promo-panel-renderer { + color: @white !important; + } + #description.ytd-default-promo-panel-renderer, + #description.ytd-default-promo-panel-renderer span, + #channel-name.ytd-default-promo-panel-renderer { + color: fade(@white, 70%) !important; + } + + + #title.ytd-topic-channel-details-renderer { + color: @text !important; + } + #subtitle.ytd-topic-channel-details-renderer { + color: @subtext0 !important; + } + + + .button-container.ytd-rich-shelf-renderer { + background-color: @base !important; + } + + + #items.ytd-playlist-panel-renderer, + .header.ytd-playlist-panel-renderer { + background-color: @base !important; + } + .title.ytd-playlist-panel-renderer, + .title.ytd-playlist-panel-renderer a, + h4.ytd-playlist-panel-video-renderer, + #video-title.ytd-playlist-panel-video-renderer, + #trailing-icon.ytd-playlist-panel-renderer { + color: @text !important; + } + #publisher-container.ytd-playlist-panel-renderer, + #publisher-container.ytd-playlist-panel-renderer a, + .index-message.ytd-playlist-panel-renderer, + #byline.ytd-playlist-panel-video-renderer, + #index.ytd-playlist-panel-video-renderer, + #index-container.ytd-playlist-panel-video-renderer, + #reorder.ytd-playlist-panel-video-renderer { + color: @subtext0 !important; + } + + + .ytdMiniplayerComponentContent, + .ytdMiniplayerInfoBarHost { + background-color: @base !important; + } + .ytdMiniplayerInfoBarTitle { + color: @text !important; + } + .ytdMiniplayerInfoBarSubtitle, + .ytdMiniplayerInfoBarSubtitleText { + color: @subtext0 !important; + } + + + #video-title.ytd-video-renderer, + ytd-channel-renderer #channel-title { + color: @text !important; + } + ytd-video-renderer #metadata-line, + ytd-video-renderer .inline-metadata-item, + ytd-video-renderer #separator, + ytd-video-renderer ytd-channel-name a, + ytd-video-renderer ytd-channel-name #text, + ytd-video-renderer .metadata-snippet-text, + ytd-video-renderer .metadata-snippet-text-navigation, + #subscribers.ytd-channel-renderer, + #video-count.ytd-channel-renderer, + #dot.ytd-channel-renderer, + #description.ytd-channel-renderer { + color: @subtext0 !important; + } + + + #channel-name.ytd-watch-card-rich-header-renderer, + .title.ytd-watch-card-compact-video-renderer, + #title.ytd-title-and-button-list-header-renderer, + div.ytd-search-refinement-card-renderer { + color: @text !important; + } + yt-formatted-string.ytd-watch-card-rich-header-renderer, + .subtitle.ytd-watch-card-compact-video-renderer, + .duration.ytd-watch-card-compact-video-renderer, + .ytwYtdButtonBannerViewModelSubtext { + color: @subtext0 !important; + } + + + + + ytd-item-section-renderer[use-chip-bar-view-model-header] #header.ytd-item-section-renderer { + background: @base !important; + } + + + ytd-playlist-header-renderer .metadata-wrapper, + ytd-playlist-header-renderer #owner-text a { + color: @white !important; + } + .metadata-stats.ytd-playlist-byline-renderer { + color: fade(@white, 70%) !important; + } + + + ytd-playlist-header-renderer .ytSpecButtonShapeNextOverlay.ytSpecButtonShapeNextTonal { + background-color: fade(@white, 10%) !important; + + &:hover { + background-color: fade(@white, 20%) !important; + } + } + + + #index.ytd-playlist-video-renderer, + ytd-playlist-video-renderer ytd-channel-name a, + ytd-playlist-video-renderer #video-info, + ytd-playlist-video-renderer #separator { + color: @subtext0 !important; + } + + + ytd-alert-with-button-renderer { + background-color: @surface0 !important; + } + #text.ytd-alert-with-button-renderer { + color: @text !important; + } + + + #background-content.ytd-statement-banner-renderer { + background-color: @base !important; + } + #dynamic-title.ytd-statement-banner-renderer, + #subtitle-container.ytd-statement-banner-renderer { + color: @text !important; + } + #supplemental-text-container.ytd-statement-banner-renderer { + color: @subtext0 !important; + } + #supplemental-text.ytd-statement-banner-renderer a { + color: @accent !important; + } + + + #description.ytd-watch-metadata a.yt-simple-endpoint { + color: @accent !important; + } + + + #page-header-container.ytd-tabbed-page-header, + #tabs-container.ytd-tabbed-page-header { + background: @base !important; + } + + + .header-title.ytd-channel-owner-empty-state-renderer, + .description-text.ytd-channel-owner-empty-state-renderer { + color: @text !important; + } + + + ytd-expandable-tab-renderer { + color: @text !important; + } + + ytd-expandable-tab-renderer input { + color: @text !important; + } + ytd-expandable-tab-renderer label { + color: @subtext0 !important; + } + ytd-expandable-tab-renderer .unfocused-line { + border-bottom-color: @subtext0 !important; + } + ytd-expandable-tab-renderer .focused-line { + border-bottom-color: @accent !important; + } + + + ytd-search-box-renderer input { + color: @text !important; + } + ytd-search-box-renderer label { + color: @subtext0 !important; + } + ytd-search-box-renderer .unfocused-line { + border-bottom-color: @subtext0 !important; + } + ytd-search-box-renderer .focused-line { + border-bottom-color: @accent !important; + } + #label.ytd-compact-link-renderer { + color: @text !important; + } + + + #masthead, + #masthead-container, + ytd-masthead { + background: transparent !important; + } + #background.ytd-masthead, + #frosted-glass { + background: @base !important; + } + + #frosted-glass.with-chipbar, + ytd-masthead[frosted-glass-mode="without-chipbar"]:not([theater]) #background.ytd-masthead { + background-color: fade(@base, 80%) !important; + } + + #start.ytd-masthead { + background: transparent !important; + } + + + .ytSearchboxComponentInputBox, + .ytSearchboxComponentInputBoxDark { + background-color: @mantle !important; + border-color: @surface0 !important; + } + .ytSearchboxComponentSuggestionsContainer, + .ytSearchboxComponentSuggestionsContainerDark { + background-color: @surface0 !important; + } + + .ytSearchboxComponentSearchButton, + .ytSearchboxComponentSearchButtonDark, + #voice-search-button { + background-color: fade(@text, 8%) !important; + } + + + #masthead .ytSpecButtonShapeNextMono.ytSpecButtonShapeNextTonal, + #masthead .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal { + background-color: fade(@text, 10%) !important; + } + #masthead .ytSpecButtonShapeNextMono.ytSpecButtonShapeNextTonal:hover, + #masthead .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal:hover { + background-color: fade(@text, 20%) !important; + } + + + yt-icon-button.ytd-masthead:hover, + ytd-notification-topbar-button-renderer.ytd-masthead:hover, + ytd-topbar-menu-button-renderer.ytd-masthead:not(:last-of-type):hover { + background-color: fade(@text, 20%) !important; + } + + + #guide-button yt-icon, + #guide-button yt-icon#guide-icon { + color: @text !important; + fill: @text !important; + } + ytd-topbar-logo-renderer ytd-logo svg { + fill: @white !important; + } + + #country-code.ytd-topbar-logo-renderer { + color: @subtext0 !important; + } + + + ytd-menu-popup-renderer, + ytd-multi-page-menu-renderer, + ytd-simple-menu-header-renderer, + ytd-menu-popup-tip-renderer, + ytd-form-popup-renderer, + ytd-backstage-post-dialog-popup-renderer, + ytd-backstage-post-dialog-renderer, + tp-yt-paper-listbox.ytd-menu-popup-renderer, + tp-yt-paper-listbox.yt-dropdown-menu, + tp-yt-iron-dropdown .ytContextualSheetLayoutHost, + .ytContextualSheetLayoutHost, + .ytSpecDialogLayoutHost { + background-color: @mantle !important; + } + + + #icon-label.yt-dropdown-menu { + color: @text !important; + } + .item.yt-dropdown-menu { + color: @text !important; + } + #subtitle.yt-dropdown-menu { + color: @subtext0 !important; + } + tp-yt-paper-listbox.yt-dropdown-menu .iron-selected.yt-dropdown-menu { + background-color: @surface0 !important; + } + tp-yt-paper-listbox.yt-dropdown-menu tp-yt-paper-item.yt-dropdown-menu:hover { + background-color: @surface1 !important; + } + + + ytd-notification-topbar-button-renderer .ytSpecIconBadgeShapeIcon { + color: @text !important; + } + ytd-simple-menu-header-renderer, + h2.yt-multi-page-menu-section-renderer, + .text.ytd-notification-renderer { + color: @text !important; + } + .metadata.ytd-notification-renderer { + color: @subtext0 !important; + } + ytd-notification-renderer:hover { + background-color: @surface0 !important; + } + + + #account-name.ytd-active-account-header-renderer, + #channel-handle.ytd-active-account-header-renderer, + #email.ytd-active-account-header-renderer, + tp-yt-paper-item.ytd-compact-link-renderer, + ytd-toggle-theme-compact-link-renderer, + .ytIconWrapperHost.ytd-compact-link-renderer, + yt-icon.ytd-compact-link-renderer, + .ytIconWrapperHost.ytd-toggle-theme-compact-link-renderer, + yt-icon.ytd-toggle-theme-compact-link-renderer { + color: @text !important; + } + #subtitle.ytd-compact-link-renderer, + #secondary-text.ytd-compact-link-renderer { + color: @subtext0 !important; + } + ytd-compact-link-renderer:hover, + ytd-toggle-theme-compact-link-renderer:hover { + background-color: @surface0 !important; + } + + ytd-active-account-header-renderer a.yt-simple-endpoint { + color: @accent !important; + } + + + yt-formatted-string.title.ytd-menu-service-item-renderer, + .ytIconWrapperHost.ytd-menu-service-item-renderer, + yt-icon.ytd-menu-service-item-renderer, + yt-formatted-string.ytd-menu-navigation-item-renderer, + .ytIconWrapperHost.ytd-menu-navigation-item-renderer, + yt-icon.ytd-menu-navigation-item-renderer, + yt-formatted-string.ytd-menu-service-item-download-renderer, + .ytIconWrapperHost.ytd-menu-service-item-download-renderer, + yt-icon.ytd-menu-service-item-download-renderer { + color: @text !important; + } + tp-yt-paper-item.ytd-menu-service-item-renderer:hover, + tp-yt-paper-item.ytd-menu-navigation-item-renderer:hover, + tp-yt-paper-item.ytd-menu-service-item-download-renderer:hover { + background-color: @surface0 !important; + } + + + .ytAlertBannerViewModelHost { + color: @text !important; + } + .ytAlertBannerViewModelTimeSensitive { + background-color: @surface0 !important; + } + #header-channel-name.ytd-backstage-post-dialog-renderer, + #prompt.ytd-backstage-multi-image-select-renderer, + #title.ytd-post-filter-zero-state-renderer, + #icon.ytd-post-filter-zero-state-renderer { + color: @text !important; + } + #header-visibility-label.ytd-backstage-post-dialog-renderer, + #header-default-visibility.ytd-backstage-post-dialog-renderer, + #commentbox-placeholder.ytd-backstage-post-dialog-renderer, + #aspect-ratio-message.ytd-backstage-multi-image-select-renderer, + #license-text.ytd-backstage-multi-image-select-renderer, + #char-count.ytd-commentbox, + #subtitle.ytd-post-filter-zero-state-renderer { + color: @subtext0 !important; + } + #icon-container.ytd-post-filter-zero-state-renderer { + background-color: @surface0 !important; + } + tp-yt-paper-tab.iron-selected.ytd-post-stream-filter-renderer { + color: @text !important; + } + tp-yt-paper-tabs.ytd-post-stream-filter-renderer { + color: @subtext1 !important; + } + + tp-yt-paper-tabs.ytd-post-stream-filter-renderer .selection-bar { + border-bottom-color: @text !important; + } + + + #title.ytd-interactive-tabbed-header-renderer { + color: @text !important; + } + #auto-generated.ytd-interactive-tabbed-header-renderer, + #description.ytd-interactive-tabbed-header-renderer, + #metadata.ytd-interactive-tabbed-header-renderer { + color: @subtext0 !important; + } + #tabs-inner-container.ytd-interactive-tabbed-header-renderer { + background-color: @base !important; + } + tp-yt-paper-tab.iron-selected.ytd-interactive-tabbed-header-renderer { + color: @text !important; + } + tp-yt-paper-tabs.ytd-interactive-tabbed-header-renderer { + color: @subtext1 !important; + } + tp-yt-paper-tab.ytd-interactive-tabbed-header-renderer:hover { + color: @text !important; + } + tp-yt-paper-tabs.ytd-interactive-tabbed-header-renderer .selection-bar { + border-bottom-color: @text !important; + } + + + #label-text.yt-dropdown-menu { + color: @subtext0 !important; + } + + yt-live-chat-header-renderer #label-text.yt-dropdown-menu { + color: @text !important; + } + + + ytd-engagement-panel-section-list-renderer[match-content-theme] #header.ytd-engagement-panel-title-header-renderer, + ytd-engagement-panel-section-list-renderer[match-content-theme] #subheader.ytd-engagement-panel-title-header-renderer, + ytd-engagement-panel-section-list-renderer[match-content-theme] #content.ytd-engagement-panel-section-list-renderer { + background-color: @surface0 !important; + } + + + .ytwPanelAdHeaderImageLockupViewModelHost, + .ytwPanelTextIconTextGridCardsSubLayoutContentViewModelHost { + background-color: @base !important; + } + ad-grid-card-text-view-model { + background-color: @surface0 !important; + } + .ytwAdAvatarLockupViewModelHost, + .ytwAdAvatarLockupViewModelHost .ytAttributedStringHost, + .ytwPanelAdHeaderImageLockupViewModelHost .ytBadgeShapeText, + .ytwAdGridCardTextViewModelHostMetadataHeadline { + color: @text !important; + } + .ytwAdDetailsLineViewModelHost, + .ytwAdDetailsLineViewModelHost .ytAttributedStringHost, + .ytwAdGridCardTextViewModelHostMetadataDescriptionInlineStringInline { + color: @subtext0 !important; + } + + + .ytBadgeShapeAd .ytBadgeShapeText { + color: @text !important; + } + .ytwAdDetailsLineViewModelHostIsClickableAdComponent, + .ytwAdDetailsLineViewModelHostIsClickableAdComponent .ytAttributedStringHost { + color: @subtext0 !important; + } + + + tp-yt-paper-dialog:has(ytd-engagement-panel-section-list-renderer[match-content-theme]) { + --paper-dialog-background-color: @surface0; + } + + #about-container.ytd-about-channel-renderer { + color: @text !important; + } + + + tp-yt-paper-dialog:has(ytd-search-filter-options-dialog-renderer) { + --paper-dialog-background-color: @mantle; + } + #title.ytd-search-filter-options-dialog-renderer, + yt-formatted-string.ytd-search-filter-group-renderer, + #close-button.ytd-search-filter-options-dialog-renderer { + color: @text !important; + } + yt-formatted-string.ytd-search-filter-renderer { + color: @subtext0 !important; + } + ytd-search-filter-renderer.selected yt-formatted-string { + color: @accent !important; + } + + + ytd-item-section-renderer[static-comments-header] #header.ytd-item-section-renderer { + background-color: @surface0 !important; + } + + + .count-text.ytd-comments-header-renderer { + color: @text !important; + } + + + #contentContainer.tp-yt-app-drawer:not([persistent]) { + --app-drawer-content-container-background-color: @base; + } + tp-yt-app-drawer#guide:not([persistent]) #guide-content, + tp-yt-app-drawer#guide:not([persistent]) #guide-content.ytd-app { + background: @base !important; + } + + + ytd-guide-entry-renderer .title.ytd-guide-entry-renderer, + ytd-guide-entry-renderer yt-formatted-string, + ytd-mini-guide-entry-renderer .title, + ytd-mini-guide-entry-renderer span.ytd-mini-guide-entry-renderer, + ytd-guide-section-renderer #guide-section-title { + color: @text !important; + } + ytd-guide-entry-renderer yt-icon, + ytd-mini-guide-entry-renderer yt-icon { + color: @text !important; + fill: @text !important; + } + ytd-guide-entry-renderer[active], + ytd-guide-entry-renderer:hover, + ytd-mini-guide-entry-renderer:hover { + background-color: @surface0 !important; + } + + + #guide-links-primary.ytd-guide-renderer a, + #guide-links-secondary.ytd-guide-renderer a { + color: @subtext0 !important; + } + #footer.ytd-guide-renderer #copyright { + color: @overlay1 !important; + } + ytd-guide-signin-promo-renderer yt-formatted-string.ytd-guide-signin-promo-renderer { + color: @text !important; + } + + + & when (@oled = 0) { + #page-manager ytd-watch-flexy[full-bleed-player] { + #movie_player, + #full-bleed-container, + #player-full-bleed-container, + #player-container { + background-color: @base !important; + } + } + } } } @@ -1492,7 +2752,7 @@ background-color: @base !important; color: @text !important; - /* Ambient mode */ + #cinematics { mix-blend-mode: lighten; } @@ -1521,19 +2781,19 @@ color: @text; } - /* Comment box */ + .engagement-panel-container { background: @mantle; } - /* Bottom bar */ + ytm-pivot-bar-renderer { background: @mantle; color: @text; border-top-color: @surface0; } - /* Chips */ + .chip-bar { background-color: @base; } @@ -1550,7 +2810,7 @@ } } - /* Buttons */ + .yt-spec-touch-feedback-shape--touch-response { .yt-spec-touch-feedback-shape__fill { @@ -1562,12 +2822,10 @@ } } - .yt-spec-touch-feedback-shape--overlay-touch-response-inverse - .yt-spec-touch-feedback-shape__fill { + .yt-spec-touch-feedback-shape--overlay-touch-response-inverse .yt-spec-touch-feedback-shape__fill { background-color: @accent; } - .yt-spec-touch-feedback-shape--overlay-touch-response - .yt-spec-touch-feedback-shape__fill { + .yt-spec-touch-feedback-shape--overlay-touch-response .yt-spec-touch-feedback-shape__fill { background-color: @text; } }