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)

This commit is contained in:
ralf 2024-08-29 08:57:41 +02:00
parent 2400976c2e
commit 87afa355aa
5 changed files with 25 additions and 0 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;