From 87afa355aaf0be845c7eacfb63c4042f81bfedd8 Mon Sep 17 00:00:00 2001 From: ralf Date: Thu, 29 Aug 2024 08:57:41 +0200 Subject: [PATCH] applying dark-mode filter to et2-image and NOT the img tag used inside, to apply it also if we use a font-based image (missing auto-generated CSS files) --- pixelegg/css/fancy.css | 5 +++++ pixelegg/css/mobile.css | 5 +++++ pixelegg/css/monochrome.css | 5 +++++ pixelegg/css/pixelegg.css | 5 +++++ pixelegg/mobile/fw_mobile.css | 5 +++++ 5 files changed, 25 insertions(+) diff --git a/pixelegg/css/fancy.css b/pixelegg/css/fancy.css index 7d5c207bcb..f4723bf972 100644 --- a/pixelegg/css/fancy.css +++ b/pixelegg/css/fancy.css @@ -71,11 +71,13 @@ html[data-darkmode='1'] { background: #000; filter: invert(1) hue-rotate(180deg) brightness(1); + /* need to explicitly disable the filter on the img tag, if used, as it would be applied twice and therefore not at all */ } html[data-darkmode='1'] sl-menu-item::part(prefix), html[data-darkmode='1'] et2-select-country::part(prefix), html[data-darkmode='1'] et2-button::part(prefix), html[data-darkmode='1'] *::part(image), + html[data-darkmode='1'] et2-image, html[data-darkmode='1'] img, html[data-darkmode='1'] #blueimp-gallery:not(:fullscreen), html[data-darkmode='1'] #blueimp-gallery ol, @@ -93,6 +95,9 @@ html[data-darkmode='1'] .blueimp-gallery .slide { filter: invert(1) hue-rotate(180deg) !important; } + html[data-darkmode='1'] et2-image > img { + filter: none !important; + } html[data-darkmode='1'] #blueimp-gallery video, html[data-darkmode='1'] #blueimp-gallery .video-content { filter: invert(0) hue-rotate(180deg) !important; diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index 1131f5a782..f4c8a4dc27 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -74,11 +74,13 @@ html[data-darkmode='1'] { background: #000; filter: invert(1) hue-rotate(180deg) brightness(1); + /* need to explicitly disable the filter on the img tag, if used, as it would be applied twice and therefore not at all */ } html[data-darkmode='1'] sl-menu-item::part(prefix), html[data-darkmode='1'] et2-select-country::part(prefix), html[data-darkmode='1'] et2-button::part(prefix), html[data-darkmode='1'] *::part(image), + html[data-darkmode='1'] et2-image, html[data-darkmode='1'] img, html[data-darkmode='1'] #blueimp-gallery:not(:fullscreen), html[data-darkmode='1'] #blueimp-gallery ol, @@ -96,6 +98,9 @@ html[data-darkmode='1'] .blueimp-gallery .slide { filter: invert(1) hue-rotate(180deg) !important; } + html[data-darkmode='1'] et2-image > img { + filter: none !important; + } html[data-darkmode='1'] #blueimp-gallery video, html[data-darkmode='1'] #blueimp-gallery .video-content { filter: invert(0) hue-rotate(180deg) !important; diff --git a/pixelegg/css/monochrome.css b/pixelegg/css/monochrome.css index 6407ac7bf9..cbb1d636fe 100644 --- a/pixelegg/css/monochrome.css +++ b/pixelegg/css/monochrome.css @@ -53,11 +53,13 @@ html[data-darkmode='1'] { background: #000; filter: invert(1) hue-rotate(180deg) brightness(1); + /* need to explicitly disable the filter on the img tag, if used, as it would be applied twice and therefore not at all */ } html[data-darkmode='1'] sl-menu-item::part(prefix), html[data-darkmode='1'] et2-select-country::part(prefix), html[data-darkmode='1'] et2-button::part(prefix), html[data-darkmode='1'] *::part(image), + html[data-darkmode='1'] et2-image, html[data-darkmode='1'] img, html[data-darkmode='1'] #blueimp-gallery:not(:fullscreen), html[data-darkmode='1'] #blueimp-gallery ol, @@ -75,6 +77,9 @@ html[data-darkmode='1'] .blueimp-gallery .slide { filter: invert(1) hue-rotate(180deg) !important; } + html[data-darkmode='1'] et2-image > img { + filter: none !important; + } html[data-darkmode='1'] #blueimp-gallery video, html[data-darkmode='1'] #blueimp-gallery .video-content { filter: invert(0) hue-rotate(180deg) !important; diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index eb74e92f2b..8af46659a5 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -64,11 +64,13 @@ html[data-darkmode='1'] { background: #000; filter: invert(1) hue-rotate(180deg) brightness(1); + /* need to explicitly disable the filter on the img tag, if used, as it would be applied twice and therefore not at all */ } html[data-darkmode='1'] sl-menu-item::part(prefix), html[data-darkmode='1'] et2-select-country::part(prefix), html[data-darkmode='1'] et2-button::part(prefix), html[data-darkmode='1'] *::part(image), + html[data-darkmode='1'] et2-image, html[data-darkmode='1'] img, html[data-darkmode='1'] #blueimp-gallery:not(:fullscreen), html[data-darkmode='1'] #blueimp-gallery ol, @@ -86,6 +88,9 @@ html[data-darkmode='1'] .blueimp-gallery .slide { filter: invert(1) hue-rotate(180deg) !important; } + html[data-darkmode='1'] et2-image > img { + filter: none !important; + } html[data-darkmode='1'] #blueimp-gallery video, html[data-darkmode='1'] #blueimp-gallery .video-content { filter: invert(0) hue-rotate(180deg) !important; diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index 851ed7c30c..63b695da7d 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/pixelegg/mobile/fw_mobile.css @@ -40,11 +40,13 @@ html[data-darkmode='1'] { background: #000; filter: invert(1) hue-rotate(180deg) brightness(1); + /* need to explicitly disable the filter on the img tag, if used, as it would be applied twice and therefore not at all */ } html[data-darkmode='1'] sl-menu-item::part(prefix), html[data-darkmode='1'] et2-select-country::part(prefix), html[data-darkmode='1'] et2-button::part(prefix), html[data-darkmode='1'] *::part(image), + html[data-darkmode='1'] et2-image, html[data-darkmode='1'] img, html[data-darkmode='1'] #blueimp-gallery:not(:fullscreen), html[data-darkmode='1'] #blueimp-gallery ol, @@ -62,6 +64,9 @@ html[data-darkmode='1'] .blueimp-gallery .slide { filter: invert(1) hue-rotate(180deg) !important; } + html[data-darkmode='1'] et2-image > img { + filter: none !important; + } html[data-darkmode='1'] #blueimp-gallery video, html[data-darkmode='1'] #blueimp-gallery .video-content { filter: invert(0) hue-rotate(180deg) !important;