From fef507782672f30f47bd9d70632a193c59610991 Mon Sep 17 00:00:00 2001 From: Rasz_pl Date: Tue, 9 Apr 2024 00:12:57 +0200 Subject: [PATCH 1/5] Update styles.css make desert theme search button icon visible --- js&css/extension/www.youtube.com/styles.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/js&css/extension/www.youtube.com/styles.css b/js&css/extension/www.youtube.com/styles.css index 115c15c31..3d0378cdd 100644 --- a/js&css/extension/www.youtube.com/styles.css +++ b/js&css/extension/www.youtube.com/styles.css @@ -1210,13 +1210,13 @@ html[data-system-color-scheme=light][it-theme=desert][it-schedule=system_peferen --yt-spec-text-primary: #555; --ytd-searchbox-border-color: #555; --ytd-searchbox-background: #faf9f9; - --ytd-searchbox-legacy-border-color: #555; - --ytd-searchbox-legacy-border-shadow-color: #555; - --ytd-searchbox-legacy-button-color: #555; - --ytd-searchbox-legacy-button-border-color: #555; - --ytd-searchbox-legacy-button-focus-color: #555; - --ytd-searchbox-legacy-button-hover-color: #555; - --ytd-searchbox-legacy-button-hover-border-color: #555; + --ytd-searchbox-legacy-border-color: hsl(0, 0%, 18.82%); + --ytd-searchbox-legacy-border-shadow-color: hsla(0, 0%, 0%, 0); + --ytd-searchbox-legacy-button-color: hsla(0, 0%, 100%, .08); + --ytd-searchbox-legacy-button-border-color: hsl(0, 0%, 18.82%); + --ytd-searchbox-legacy-button-focus-color: hsla(0, 0%, 100%, .08); + --ytd-searchbox-legacy-button-hover-color: hsla(0, 0%, 100%, .08); + --ytd-searchbox-legacy-button-hover-border-color: hsl(0, 0%, 18.82%); --ytd-searchbox-legacy-button-icon-color: #fff; --ytd-moderation-panel-background: #555; --ytd-moderation-panel-hover: #555; From 84cfa8705f1d9bd185856cbda2d471bf0b3efdab Mon Sep 17 00:00:00 2001 From: Rasz_pl Date: Tue, 9 Apr 2024 03:02:39 +0200 Subject: [PATCH 2/5] Update styles.css more work to make CSS overrides [dark] independent --- js&css/extension/www.youtube.com/styles.css | 41 ++++++++++++--------- 1 file changed, 24 insertions(+), 17 deletions(-) diff --git a/js&css/extension/www.youtube.com/styles.css b/js&css/extension/www.youtube.com/styles.css index 3d0378cdd..a1aa4c601 100644 --- a/js&css/extension/www.youtube.com/styles.css +++ b/js&css/extension/www.youtube.com/styles.css @@ -674,7 +674,7 @@ html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peferenc --yt-spec-general-background-b: #000 !important; --yt-spec-general-background-c: #000 !important; --yt-spec-error-background: #1f1f1f !important; - --yt-spec-text-primary: #aaa !important; + --yt-spec-text-primary: #aaa; --yt-spec-text-primary-inverse: #000 !important; --yt-spec-text-secondary: #aaa !important; --yt-spec-text-disabled: #aaa !important; @@ -882,9 +882,10 @@ html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peferenc /*DAWN*/ +html[it-theme=dawn] [dark], html[it-theme=dawn]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]), -html[data-system-color-scheme=dark][it-theme=dawn][it-schedule=system_peference_dark], -html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference_light] { +html[it-theme=dawn][data-system-color-scheme=dark][it-schedule=system_peference_dark], +html[it-theme=dawn][data-system-color-scheme=light][it-schedule=system_peference_light] { --yt-swatch-primary: #d44d5c !important; --yt-swatch-primary-darker: #d44d5c !important; --yt-swatch-text: rgb(255, 255, 255) !important; @@ -905,7 +906,7 @@ html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference --yt-spec-general-background-b: #d44d5c !important; --yt-spec-general-background-c: #d44d5c !important; --yt-spec-error-background: #1f1f1f !important; - --yt-spec-text-primary: rgb(255, 255, 255) !important; + --yt-spec-text-primary: rgb(255, 255, 255); --yt-spec-text-primary-inverse: #734 !important; --yt-spec-text-secondary: rgb(255, 255, 255) !important; --yt-spec-text-disabled: rgb(255, 255, 255) !important; @@ -1140,7 +1141,7 @@ html[data-system-color-scheme=light][it-theme=desert][it-schedule=system_peferen --yt-spec-general-background-b: #faf9f9 !important; --yt-spec-general-background-c: #faf9f9 !important; --yt-spec-error-background: #1f1f1f !important; - --yt-spec-text-primary: #555 !important; + --yt-spec-text-primary: #555; --yt-spec-text-primary-inverse: #faf9f9 !important; --yt-spec-text-secondary: #555 !important; --yt-spec-text-disabled: #555 !important; @@ -1336,9 +1337,10 @@ html[data-system-color-scheme=light][it-theme=desert][it-schedule=system_peferen /*NIGHT*/ +html[it-theme=night] [dark], html[it-theme=night]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]), -html[data-system-color-scheme=dark][it-theme=night][it-schedule=system_peference_dark], -html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peference_light] { +html[it-theme=night][data-system-color-scheme=dark][it-schedule=system_peference_dark], +html[it-theme=night][data-system-color-scheme=light][it-schedule=system_peference_light] { --yt-swatch-primary: #003459 !important; --yt-swatch-primary-darker: #003459 !important; --yt-swatch-text: rgb(255, 255, 255) !important; @@ -1359,7 +1361,7 @@ html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peferenc --yt-spec-general-background-b: #003459 !important; --yt-spec-general-background-c: #003459 !important; --yt-spec-error-background: #1f1f1f !important; - --yt-spec-text-primary: #fff !important; + --yt-spec-text-primary: #fff; --yt-spec-text-primary-inverse: #003459 !important; --yt-spec-text-secondary: #fff !important; --yt-spec-text-disabled: #fff !important; @@ -1593,7 +1595,7 @@ html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peferenc --yt-spec-general-background-b: #c7efcf !important; --yt-spec-general-background-c: #c7efcf !important; --yt-spec-error-background: #1f1f1f !important; - --yt-spec-text-primary: #666 !important; + --yt-spec-text-primary: #666; --yt-spec-text-primary-inverse: #d3e1c6 !important; --yt-spec-text-secondary: #666 !important; --yt-spec-text-disabled: #666 !important; @@ -1799,9 +1801,10 @@ html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peferenc /*SUNSET*/ +html[it-theme=sunset] [dark], html[it-theme=sunset]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]), -html[data-system-color-scheme=dark][it-theme=sunset][it-schedule=system_peference_dark], -html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peference_light] { +html[it-theme=sunset][data-system-color-scheme=dark][it-schedule=system_peference_dark], +html[it-theme=sunset][data-system-color-scheme=light][it-schedule=system_peference_light] { --yt-swatch-primary: #2f3364 !important; --yt-swatch-primary-darker: #2f3364 !important; --yt-swatch-text: rgb(255, 255, 255) !important; @@ -1822,7 +1825,7 @@ html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peferen --yt-spec-general-background-b: #2f3364 !important; --yt-spec-general-background-c: #2f3364 !important; --yt-spec-error-background: #1f1f1f !important; - --yt-spec-text-primary: #fff !important; + --yt-spec-text-primary: #fff; --yt-spec-text-primary-inverse: #283567 !important; --yt-spec-text-secondary: #fff !important; --yt-spec-text-disabled: #fff !important; @@ -2026,9 +2029,8 @@ html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peferen /*Fixing YT hardcoded CSS for DARK/light mode switching*/ -html:not([dark]) .yt-spec-icon-badge-shape, -html:not([dark]) .yt-spec-icon-badge-shape__icon .yt-spec-icon-shape { - color: var(--yt-spec-text-primary) !important; +.yt-spec-icon-shape { + color: var(--yt-spec-text-primary); } html[dark] .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon, @@ -2036,12 +2038,17 @@ html[dark] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text, html:not([dark]) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text { color: var(--yt-spec-text-primary); } -html[it-theme="black"] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal, +html[it-theme=black] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal, +html[it-theme=sunset] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal, +html[it-theme=night] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal, +html[it-theme=dawn] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal, html[dark] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal { color: var(--yt-spec-text-primary); background-color: rgba(255, 255, 255, 0.1); } -html:not([dark]):not([it-theme="black"]) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal { +html[it-theme=desert] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal, +html[it-theme=plain] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal, +html:not([dark]):not([it-theme=black]):not([it-theme=sunset]):not([it-theme=night]):not([it-theme=dawn]) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal { color: var(--yt-spec-text-primary); background-color: rgba(0, 0, 0, 0.05); } From 28179868bb3629cd43ae488d3f6e41cdbdb725d2 Mon Sep 17 00:00:00 2001 From: Rasz_pl Date: Tue, 9 Apr 2024 16:45:52 +0200 Subject: [PATCH 3/5] Update styles.css always override video description text --- js&css/extension/www.youtube.com/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js&css/extension/www.youtube.com/styles.css b/js&css/extension/www.youtube.com/styles.css index a1aa4c601..77eb09372 100644 --- a/js&css/extension/www.youtube.com/styles.css +++ b/js&css/extension/www.youtube.com/styles.css @@ -641,7 +641,7 @@ html[it-theme=night] #cinematics {mix-blend-mode: lighten !important} html[it-theme=plain] #cinematics {filter:invert(100%) !important; mix-blend-mode: darken !important} /*video detail text color. Fix. Themes didnt apply video description text color*/ -html[it-theme]:not([it-theme=default]):not([it-theme=dark]) .yt-core-attributed-string--link-inherit-color {color: var(--yt-spec-text-primary) !important} +html[it-theme] .yt-core-attributed-string--link-inherit-color {color: var(--yt-spec-text-primary) !important} html[it-theme]:not([it-theme=default]):not([it-theme=dark]) .yt-core-attributed-string__link--call-to-action-color {color: var(--yt-spec-call-to-action)} /*The next two lines below can be removed if exact theming consistency isn't the goal and we just want to keep it simple.*/ html[it-theme]:not([it-theme=default]):not([it-theme=dark]) a.yt-simple-endpoint.yt-formatted-string {color: var(--yt-spec-call-to-action) !important} From 5629b12e89436c2f679c23299640087c9a84670e Mon Sep 17 00:00:00 2001 From: Rasz_pl Date: Sat, 20 Apr 2024 04:27:30 +0200 Subject: [PATCH 4/5] Update styles.css adding .yt-video-attribute-view-model__title --- js&css/extension/www.youtube.com/styles.css | 37 ++++++++++----------- 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/js&css/extension/www.youtube.com/styles.css b/js&css/extension/www.youtube.com/styles.css index 77eb09372..66677d2cf 100644 --- a/js&css/extension/www.youtube.com/styles.css +++ b/js&css/extension/www.youtube.com/styles.css @@ -2027,30 +2027,28 @@ html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peferen --yt-lightsource-secondary-title-color: var(--yt-spec-text-secondary) !important; } -/*Fixing YT hardcoded CSS for DARK/light mode switching*/ - -.yt-spec-icon-shape { - color: var(--yt-spec-text-primary); -} +/*------------------------------------------------------------------------------ +YT hardcoded CSS for DARK/light mode switching +Need HTML in front to make CSS rule more specific than one they are overiding +------------------------------------------------------------------------------*/ -html[dark] .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon, -html[dark] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text, -html:not([dark]) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text { +html .yt-spec-icon-shape, +html .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon, +html .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text, +html .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal, +html .yt-video-attribute-view-model__title { color: var(--yt-spec-text-primary); } -html[it-theme=black] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal, -html[it-theme=sunset] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal, -html[it-theme=night] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal, -html[it-theme=dawn] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal, -html[dark] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal { - color: var(--yt-spec-text-primary); + +/*Dark colors get highlight*/ +html .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal { background-color: rgba(255, 255, 255, 0.1); } +/*Light colors get shadow, overrides above highlight*/ html[it-theme=desert] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal, html[it-theme=plain] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal, html:not([dark]):not([it-theme=black]):not([it-theme=sunset]):not([it-theme=night]):not([it-theme=dawn]) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal { - color: var(--yt-spec-text-primary); - background-color: rgba(0, 0, 0, 0.05); + background-color: rgba(0, 0, 0, 0.05) !important; } /*subscribe button when not subscribed*/ @@ -2061,12 +2059,11 @@ html .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled { /*override bell and thumbs up icons hardcoded colors inside SVG data*/ /*bell icon*/ -html .yt-spec-button-shape-next__icon ytd-lottie-player svg path[fill-opacity="1"], -html:not([dark]) .yt-spec-button-shape-next__icon ytd-lottie-player svg path[fill-opacity="1"] { +html .yt-spec-button-shape-next__icon ytd-lottie-player svg path[fill-opacity="1"] { fill: var(--yt-spec-text-primary); } + /*thumbs up icon*/ -html .yt-spec-button-shape-next__icon ytd-lottie-player svg path[fill-opacity="0"], -html:not([dark]) .yt-spec-button-shape-next__icon ytd-lottie-player svg path[fill-opacity="0"] { +html .yt-spec-button-shape-next__icon ytd-lottie-player svg path[fill-opacity="0"] { stroke: var(--yt-spec-text-primary); } From 94fdab3cec6e5f0e3180c85ec47a328b47a353d8 Mon Sep 17 00:00:00 2001 From: Rasz_pl Date: Sat, 20 Apr 2024 04:47:07 +0200 Subject: [PATCH 5/5] Update styles.css formatting reformatted cinematics so its clearer what is happening. rejuggled rest of selectors to always tart with it-theme, added last missing [dark] --- js&css/extension/www.youtube.com/styles.css | 130 +++++++++++--------- 1 file changed, 69 insertions(+), 61 deletions(-) diff --git a/js&css/extension/www.youtube.com/styles.css b/js&css/extension/www.youtube.com/styles.css index 66677d2cf..860d07d1d 100644 --- a/js&css/extension/www.youtube.com/styles.css +++ b/js&css/extension/www.youtube.com/styles.css @@ -634,11 +634,18 @@ ytd-guide-section-renderer .it-button::after { ------------------------------------------------------------------------------*/ /*update: cinematics */ html[it-theme=black] #cinematics, -html[it-theme=desert] #cinematics {display:none !important} +html[it-theme=desert] #cinematics { + display:none !important +} html[it-theme=dawn] #cinematics, html[it-theme=sunset] #cinematics, -html[it-theme=night] #cinematics {mix-blend-mode: lighten !important} -html[it-theme=plain] #cinematics {filter:invert(100%) !important; mix-blend-mode: darken !important} +html[it-theme=night] #cinematics { + mix-blend-mode: lighten !important +} +html[it-theme=plain] #cinematics { + filter:invert(100%) !important; + mix-blend-mode: darken !important +} /*video detail text color. Fix. Themes didnt apply video description text color*/ html[it-theme] .yt-core-attributed-string--link-inherit-color {color: var(--yt-spec-text-primary) !important} @@ -651,9 +658,10 @@ html[it-theme]:not([it-theme=default]):not([it-theme=dark]) .yt-core-attributed- /*BLACK*/ +html[it-theme=black] [dark], html[it-theme=black]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]), -html[data-system-color-scheme=dark][it-theme=black][it-schedule=system_peference_dark], -html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peference_light] { +html[it-theme=black][data-system-color-scheme=dark][it-schedule=system_peference_dark], +html[it-theme=black][data-system-color-scheme=light][it-schedule=system_peference_light] { --yt-swatch-primary: #000 !important; --yt-swatch-primary-darker: #000 !important; --yt-swatch-text: rgb(255, 255, 255) !important; @@ -706,15 +714,15 @@ html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peferenc } html[it-theme=black]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) #yt-masthead-logo-fragment .masthead-logo-renderer-logo, -html[data-system-color-scheme=dark][it-theme=black][it-schedule=system_peference_dark] #yt-masthead-logo-fragment .masthead-logo-renderer-logo, -html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peference_light] #yt-masthead-logo-fragment .masthead-logo-renderer-logo { +html[it-theme=black][data-system-color-scheme=dark][it-schedule=system_peference_dark] #yt-masthead-logo-fragment .masthead-logo-renderer-logo, +html[it-theme=black][data-system-color-scheme=light][it-schedule=system_peference_light] #yt-masthead-logo-fragment .masthead-logo-renderer-logo { -webkit-filter: grayscale(1) brightness(3.5); filter: grayscale(1) brightness(3.5); } html[it-theme=black]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-masthead, -html[data-system-color-scheme=dark][it-theme=black][it-schedule=system_peference_dark] ytd-masthead, -html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peference_light] ytd-masthead { +html[it-theme=black][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-masthead, +html[it-theme=black][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-masthead { background: #000 !important; --yt-swatch-primary: rgb(35, 35, 35) !important; --yt-swatch-primary-darker: rgb(32, 32, 32) !important; @@ -727,8 +735,8 @@ html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peferenc } html[it-theme=black]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=dark][it-theme=black][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { +html[it-theme=black][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), +html[it-theme=black][data-system-color-scheme=light][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { --yt-live-chat-action-panel-background-color: #000; --yt-live-chat-action-panel-background-color-transparent: rgba(40, 40, 40, .8); --yt-live-chat-primary-text-color: hsl(0, 0%, 100%); @@ -742,8 +750,8 @@ html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peferenc html[it-theme=black]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope), html[it-theme=black]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not(.style-scope)[dark], html[it-theme=black]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) :not(.style-scope)[dark], -html[data-system-color-scheme=dark][it-theme=black][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) { +html[it-theme=black][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope), +html[it-theme=black][data-system-color-scheme=light][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) { --yt-spec-icon-inactive: #fff; --ytd-searchbox-border-color: hsla(0, 0%, 53.3%, .2); --ytd-searchbox-background: #000; @@ -871,8 +879,8 @@ html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peferenc } html[it-theme=black]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-expandable-metadata-renderer, -html[data-system-color-scheme=dark][it-theme=black][it-schedule=system_peference_dark] ytd-expandable-metadata-renderer, -html[data-system-color-scheme=light][it-theme=black][it-schedule=system_peference_light] ytd-expandable-metadata-renderer { +html[it-theme=black][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-expandable-metadata-renderer, +html[it-theme=black][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-expandable-metadata-renderer { --yt-lightsource-section2-color: rgba(18,24,24,1.000) !important; --yt-lightsource-section3-color: rgba(20,30,30,1.000) !important; --yt-lightsource-section4-color: rgba(24,38,38,1.000) !important; @@ -938,8 +946,8 @@ html[it-theme=dawn][data-system-color-scheme=light][it-schedule=system_peference } html[it-theme=dawn]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-masthead, -html[data-system-color-scheme=dark][it-theme=dawn][it-schedule=system_peference_dark] ytd-masthead, -html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference_light] ytd-masthead { +html[it-theme=dawn][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-masthead, +html[it-theme=dawn][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-masthead { background: #835 !important; --yt-swatch-primary: rgb(35, 35, 35) !important; --yt-swatch-primary-darker: rgb(32, 32, 32) !important; @@ -955,8 +963,8 @@ html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference } html[it-theme=dawn]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=dark][it-theme=dawn][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { +html[it-theme=dawn][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), +html[it-theme=dawn][data-system-color-scheme=light][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { --yt-live-chat-action-panel-background-color: #d44d5c; --yt-live-chat-action-panel-background-color-transparent: rgba(40, 40, 40, .8); --yt-live-chat-primary-text-color: hsl(0, 0%, 100%); @@ -970,8 +978,8 @@ html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference html[it-theme=dawn]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope), html[it-theme=dawn]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not(.style-scope)[dark], html[it-theme=dawn]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) :not(.style-scope)[dark], -html[data-system-color-scheme=dark][it-theme=dawn][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) { +html[it-theme=dawn][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope), +html[it-theme=dawn][data-system-color-scheme=light][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) { --yt-spec-icon-inactive: #fff; --ytd-searchbox-border-color: hsla(0, 0%, 53.3%, .2); --ytd-searchbox-background: #672c3b; @@ -1100,15 +1108,15 @@ html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference } html[it-theme=dawn]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) #yt-masthead-logo-fragment .masthead-logo-renderer-logo, -html[data-system-color-scheme=dark][it-theme=dawn][it-schedule=system_peference_dark] #yt-masthead-logo-fragment .masthead-logo-renderer-logo, -html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference_light] #yt-masthead-logo-fragment .masthead-logo-renderer-logo { +html[it-theme=dawn][data-system-color-scheme=dark][it-schedule=system_peference_dark] #yt-masthead-logo-fragment .masthead-logo-renderer-logo, +html[it-theme=dawn][data-system-color-scheme=light][it-schedule=system_peference_light] #yt-masthead-logo-fragment .masthead-logo-renderer-logo { -webkit-filter: grayscale(1) brightness(4); filter: grayscale(1) brightness(4); } html[it-theme=dawn]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-expandable-metadata-renderer, -html[data-system-color-scheme=dark][it-theme=dawn][it-schedule=system_peference_dark] ytd-expandable-metadata-renderer, -html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference_light] ytd-expandable-metadata-renderer { +html[it-theme=dawn][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-expandable-metadata-renderer, +html[it-theme=dawn][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-expandable-metadata-renderer { --yt-lightsource-section2-color: rgba(0, 0, 0, 0.1) !important; --yt-lightsource-section3-color: rgba(0, 0, 0, 0.2) !important; --yt-lightsource-section4-color: rgba(0, 0, 0, 0.3) !important; @@ -1119,8 +1127,8 @@ html[data-system-color-scheme=light][it-theme=dawn][it-schedule=system_peference /*DESERT*/ html[it-theme=desert]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]), -html[data-system-color-scheme=dark][it-theme=desert][it-schedule=system_peference_dark], -html[data-system-color-scheme=light][it-theme=desert][it-schedule=system_peference_light] { +html[it-theme=desert][data-system-color-scheme=dark][it-schedule=system_peference_dark], +html[it-theme=desert][data-system-color-scheme=light][it-schedule=system_peference_light] { --yt-swatch-primary: #faf9f9 !important; --yt-swatch-primary-darker: #faf9f9 !important; --yt-swatch-text: #555 !important; @@ -1173,8 +1181,8 @@ html[data-system-color-scheme=light][it-theme=desert][it-schedule=system_peferen } html[it-theme=desert]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-masthead, -html[data-system-color-scheme=dark][it-theme=desert][it-schedule=system_peference_dark] ytd-masthead, -html[data-system-color-scheme=light][it-theme=desert][it-schedule=system_peference_light] ytd-masthead { +html[it-theme=desert][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-masthead, +html[it-theme=desert][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-masthead { background: #ced3cb !important; --yt-swatch-primary: rgb(35, 35, 35) !important; --yt-swatch-primary-darker: rgb(32, 32, 32) !important; @@ -1190,8 +1198,8 @@ html[data-system-color-scheme=light][it-theme=desert][it-schedule=system_peferen } html[it-theme=desert]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=dark][it-theme=desert][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=light][it-theme=desert][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { +html[it-theme=desert][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), +html[it-theme=desert][data-system-color-scheme=light][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { --yt-live-chat-action-panel-background-color: #faf9f9; --yt-live-chat-action-panel-background-color-transparent: rgba(40, 40, 40, .8); --yt-live-chat-primary-text-color: #555; @@ -1205,8 +1213,8 @@ html[data-system-color-scheme=light][it-theme=desert][it-schedule=system_peferen html[it-theme=desert]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope), html[it-theme=desert]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not(.style-scope)[dark], html[it-theme=desert]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) :not(.style-scope)[dark], -html[data-system-color-scheme=dark][it-theme=desert][it-schedule=system_peference_dark]:not(.style-scope)[dark], -html[data-system-color-scheme=light][it-theme=desert][it-schedule=system_peference_light]:not(.style-scope)[dark] { +html[it-theme=desert][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not(.style-scope)[dark], +html[it-theme=desert][data-system-color-scheme=light][it-schedule=system_peference_light]:not(.style-scope)[dark] { --yt-spec-icon-inactive: #555; --yt-spec-text-primary: #555; --ytd-searchbox-border-color: #555; @@ -1393,15 +1401,15 @@ html[it-theme=night][data-system-color-scheme=light][it-schedule=system_peferenc } html[it-theme=night]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) #yt-masthead-logo-fragment .masthead-logo-renderer-logo, -html[data-system-color-scheme=dark][it-theme=night][it-schedule=system_peference_dark] #yt-masthead-logo-fragment .masthead-logo-renderer-logo, -html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peference_light] #yt-masthead-logo-fragment .masthead-logo-renderer-logo { +html[it-theme=night][data-system-color-scheme=dark][it-schedule=system_peference_dark] #yt-masthead-logo-fragment .masthead-logo-renderer-logo, +html[it-theme=night][data-system-color-scheme=light][it-schedule=system_peference_light] #yt-masthead-logo-fragment .masthead-logo-renderer-logo { -webkit-filter: grayscale(1) brightness(3.5); filter: grayscale(1) brightness(3.5); } html[it-theme=night]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-masthead, -html[data-system-color-scheme=dark][it-theme=night][it-schedule=system_peference_dark] ytd-masthead, -html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peference_light] ytd-masthead { +html[it-theme=night][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-masthead, +html[it-theme=night][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-masthead { background: #007ea7 !important; --yt-swatch-primary: rgb(35, 35, 35) !important; --yt-swatch-primary-darker: rgb(32, 32, 32) !important; @@ -1417,8 +1425,8 @@ html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peferenc } html[it-theme=night]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=dark][it-theme=night][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { +html[it-theme=night][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), +html[it-theme=night][data-system-color-scheme=light][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { --yt-live-chat-action-panel-background-color: #003459; --yt-live-chat-action-panel-background-color-transparent: rgba(40, 40, 40, .8); --yt-live-chat-primary-text-color: hsl(0, 0%, 100%); @@ -1432,8 +1440,8 @@ html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peferenc html[it-theme=night]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope), html[it-theme=night]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not(.style-scope)[dark], html[it-theme=night]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) :not(.style-scope)[dark], -html[data-system-color-scheme=dark][it-theme=night][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) { +html[it-theme=night][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope), +html[it-theme=night][data-system-color-scheme=light][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) { --yt-spec-icon-inactive: #fff; --ytd-searchbox-border-color: hsla(0, 0%, 53.3%, .2); --ytd-searchbox-background: #003459; @@ -1561,8 +1569,8 @@ html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peferenc } html[it-theme=night]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-expandable-metadata-renderer, -html[data-system-color-scheme=dark][it-theme=night][it-schedule=system_peference_dark] ytd-expandable-metadata-renderer, -html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peference_light] ytd-expandable-metadata-renderer { +html[it-theme=night][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-expandable-metadata-renderer, +html[it-theme=night][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-expandable-metadata-renderer { --yt-lightsource-section2-color: rgba(0, 0, 0, 0.1) !important; --yt-lightsource-section3-color: rgba(0, 0, 0, 0.2) !important; --yt-lightsource-section4-color: rgba(0, 0, 0, 0.3) !important; @@ -1573,8 +1581,8 @@ html[data-system-color-scheme=light][it-theme=night][it-schedule=system_peferenc /*PLAIN*/ html[it-theme=plain]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]), -html[data-system-color-scheme=dark][it-theme=plain][it-schedule=system_peference_dark], -html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peference_light] { +html[it-theme=plain][data-system-color-scheme=dark][it-schedule=system_peference_dark], +html[it-theme=plain][data-system-color-scheme=light][it-schedule=system_peference_light] { --yt-swatch-primary: #c7efcf !important; --yt-swatch-primary-darker: #c7efcf !important; --yt-swatch-text: #666 !important; @@ -1627,8 +1635,8 @@ html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peferenc } html[it-theme=plain]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-masthead, -html[data-system-color-scheme=dark][it-theme=plain][it-schedule=system_peference_dark] ytd-masthead, -html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peference_light] ytd-masthead { +html[it-theme=plain][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-masthead, +html[it-theme=plain][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-masthead { background: #e4ccaa !important; --yt-swatch-primary: rgb(35, 35, 35) !important; --yt-swatch-primary-darker: rgb(32, 32, 32) !important; @@ -1644,8 +1652,8 @@ html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peferenc } html[it-theme=plain]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=dark][it-theme=plain][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { +html[it-theme=plain][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), +html[it-theme=plain][data-system-color-scheme=light][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { --yt-live-chat-action-panel-background-color: #c7efcf; --yt-live-chat-action-panel-background-color-transparent: rgba(40, 40, 40, .8); --yt-live-chat-primary-text-color: hsl(0, 0%, 100%); @@ -1659,8 +1667,8 @@ html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peferenc html[it-theme=plain]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope), html[it-theme=plain]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not(.style-scope)[dark], html[it-theme=plain]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) :not(.style-scope)[dark], -html[data-system-color-scheme=dark][it-theme=plain][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) { +html[it-theme=plain][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope), +html[it-theme=plain][data-system-color-scheme=light][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) { --yt-spec-icon-inactive: #666; --yt-spec-text-primary: #666; --ytd-searchbox-border-color: hsla(0, 0%, 53.3%, .2); @@ -1789,8 +1797,8 @@ html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peferenc } html[it-theme=plain]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-expandable-metadata-renderer, -html[data-system-color-scheme=dark][it-theme=plain][it-schedule=system_peference_dark] ytd-expandable-metadata-renderer, -html[data-system-color-scheme=light][it-theme=plain][it-schedule=system_peference_light] ytd-expandable-metadata-renderer { +html[it-theme=plain][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-expandable-metadata-renderer, +html[it-theme=plain][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-expandable-metadata-renderer { --yt-lightsource-section2-color: rgba(0, 0, 0, 0.05) !important; --yt-lightsource-section3-color: rgba(0, 0, 0, 0.1) !important; --yt-lightsource-section4-color: rgba(0, 0, 0, 0.15) !important; @@ -1857,8 +1865,8 @@ html[it-theme=sunset][data-system-color-scheme=light][it-schedule=system_peferen } html[it-theme=sunset]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-masthead, -html[data-system-color-scheme=dark][it-theme=sunset][it-schedule=system_peference_dark] ytd-masthead, -html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peference_light] ytd-masthead { +html[it-theme=sunset][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-masthead, +html[it-theme=sunset][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-masthead { background: #f56258 !important; --yt-swatch-primary: rgb(35, 35, 35) !important; --yt-swatch-primary-darker: rgb(32, 32, 32) !important; @@ -1874,8 +1882,8 @@ html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peferen } html[it-theme=sunset]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=dark][it-theme=sunset][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), -html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { +html[it-theme=sunset][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope), +html[it-theme=sunset][data-system-color-scheme=light][it-schedule=system_peference_light]:not([style-scope]):not(.style-scope) *:not([style-scope]):not(.style-scope) { --yt-live-chat-action-panel-background-color: #2f3364; --yt-live-chat-action-panel-background-color-transparent: rgba(40, 40, 40, .8); --yt-live-chat-primary-text-color: hsl(0, 0%, 100%); @@ -1889,8 +1897,8 @@ html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peferen html[it-theme=sunset]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not([style-scope]):not(.style-scope), html[it-theme=sunset]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]):not(.style-scope)[dark], html[it-theme=sunset]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) :not(.style-scope)[dark], -html[data-system-color-scheme=dark][it-theme=sunset][it-schedule=system_peference_dark]:not(.style-scope)[dark], -html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peference_light]:not(.style-scope)[dark] { +html[it-theme=sunset][data-system-color-scheme=dark][it-schedule=system_peference_dark]:not(.style-scope)[dark], +html[it-theme=sunset][data-system-color-scheme=light][it-schedule=system_peference_light]:not(.style-scope)[dark] { --yt-spec-icon-inactive: #fff; --ytd-searchbox-border-color: hsla(0, 0%, 53.3%, .2); --ytd-searchbox-background: #fa7965; @@ -2018,8 +2026,8 @@ html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peferen } html[it-theme=sunset]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) ytd-expandable-metadata-renderer, -html[data-system-color-scheme=dark][it-theme=sunset][it-schedule=system_peference_dark] ytd-expandable-metadata-renderer, -html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peference_light] ytd-expandable-metadata-renderer { +html[it-theme=sunset][data-system-color-scheme=dark][it-schedule=system_peference_dark] ytd-expandable-metadata-renderer, +html[it-theme=sunset][data-system-color-scheme=light][it-schedule=system_peference_light] ytd-expandable-metadata-renderer { --yt-lightsource-section2-color: rgba(0, 0, 0, 0.1) !important; --yt-lightsource-section3-color: rgba(0, 0, 0, 0.2) !important; --yt-lightsource-section4-color: rgba(0, 0, 0, 0.3) !important;