From aa89bf82af5bd7b8f5c3e338180519cbae0115fb Mon Sep 17 00:00:00 2001 From: nathan Date: Wed, 5 Apr 2023 11:30:36 -0600 Subject: [PATCH] Et2Select: Re-color dropdown icon in darkmode --- api/js/etemplate/Et2Select/Et2Select.ts | 3 +++ pixelegg/css/mobile.css | 3 +-- pixelegg/css/monochrome.css | 3 +-- pixelegg/css/pixelegg.css | 3 +-- pixelegg/less/darkmode.less | 4 ++-- pixelegg/mobile/fw_mobile.css | 4 +--- 6 files changed, 9 insertions(+), 11 deletions(-) diff --git a/api/js/etemplate/Et2Select/Et2Select.ts b/api/js/etemplate/Et2Select/Et2Select.ts index 737467af41..541eebf54d 100644 --- a/api/js/etemplate/Et2Select/Et2Select.ts +++ b/api/js/etemplate/Et2Select/Et2Select.ts @@ -279,6 +279,9 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect) { this.addEventListener("sl-change", this._triggerChange); this.addEventListener("sl-after-show", this._doResize) + + /* A hack to deal with how we do dark mode to avoid re-coloring the dropdown icon */ + this.shadowRoot.querySelector(".select__icon").setAttribute("part", "dropdown-icon"); }); } diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index e9e29a42dc..844b770011 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -82,6 +82,7 @@ html[data-darkmode='1'] img, html[data-darkmode='1'] #blueimp-gallery:not(:fullscreen), html[data-darkmode='1'] #blueimp-gallery ol, + html[data-darkmode='1'] et2-select-account::part(icon), html[data-darkmode='1'] et2-select-email::part(icon), html[data-darkmode='1'] et2-calendar-owner::part(icon), html[data-darkmode='1'] sl-menu-item [slot="prefix"], @@ -91,8 +92,6 @@ html[data-darkmode='1'] #loginMainDiv, html[data-darkmode='1'] .et2_taglist_tags_icon, html[data-darkmode='1'] .fw_avatar_stat, - html[data-darkmode='1'] et2-tag::part(icon), - html[data-darkmode='1'] et2-email-tag::part(icon), html[data-darkmode='1'] et2-avatar-group, html[data-darkmode='1'] .blueimp-gallery .slide { filter: invert(1) hue-rotate(180deg) !important; diff --git a/pixelegg/css/monochrome.css b/pixelegg/css/monochrome.css index 6c865d22ac..0a5b4d2739 100644 --- a/pixelegg/css/monochrome.css +++ b/pixelegg/css/monochrome.css @@ -62,6 +62,7 @@ html[data-darkmode='1'] img, html[data-darkmode='1'] #blueimp-gallery:not(:fullscreen), html[data-darkmode='1'] #blueimp-gallery ol, + html[data-darkmode='1'] et2-select-account::part(icon), html[data-darkmode='1'] et2-select-email::part(icon), html[data-darkmode='1'] et2-calendar-owner::part(icon), html[data-darkmode='1'] sl-menu-item [slot="prefix"], @@ -71,8 +72,6 @@ html[data-darkmode='1'] #loginMainDiv, html[data-darkmode='1'] .et2_taglist_tags_icon, html[data-darkmode='1'] .fw_avatar_stat, - html[data-darkmode='1'] et2-tag::part(icon), - html[data-darkmode='1'] et2-email-tag::part(icon), html[data-darkmode='1'] et2-avatar-group, html[data-darkmode='1'] .blueimp-gallery .slide { filter: invert(1) hue-rotate(180deg) !important; diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index d26c4a4173..fa8db86635 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -72,6 +72,7 @@ html[data-darkmode='1'] img, html[data-darkmode='1'] #blueimp-gallery:not(:fullscreen), html[data-darkmode='1'] #blueimp-gallery ol, + html[data-darkmode='1'] et2-select-account::part(icon), html[data-darkmode='1'] et2-select-email::part(icon), html[data-darkmode='1'] et2-calendar-owner::part(icon), html[data-darkmode='1'] sl-menu-item [slot="prefix"], @@ -81,8 +82,6 @@ html[data-darkmode='1'] #loginMainDiv, html[data-darkmode='1'] .et2_taglist_tags_icon, html[data-darkmode='1'] .fw_avatar_stat, - html[data-darkmode='1'] et2-tag::part(icon), - html[data-darkmode='1'] et2-email-tag::part(icon), html[data-darkmode='1'] et2-avatar-group, html[data-darkmode='1'] .blueimp-gallery .slide { filter: invert(1) hue-rotate(180deg) !important; diff --git a/pixelegg/less/darkmode.less b/pixelegg/less/darkmode.less index c168fe27e2..3af5b5e336 100644 --- a/pixelegg/less/darkmode.less +++ b/pixelegg/less/darkmode.less @@ -32,9 +32,9 @@ sl-menu-item::part(prefix), et2-select-country::part(prefix), et2-button::part(prefix), *::part(image), img, #blueimp-gallery:not(:fullscreen), #blueimp-gallery ol, - et2-select-email::part(icon), et2-calendar-owner::part(icon), sl-menu-item [slot="prefix"], + et2-select-account::part(icon), et2-select-email::part(icon), et2-calendar-owner::part(icon), sl-menu-item [slot="prefix"], iframe, et2-lavatar[image=""]::part(base), - video, #loginMainDiv, .et2_taglist_tags_icon, .fw_avatar_stat, et2-tag::part(icon), et2-email-tag::part(icon), et2-avatar-group, + video, #loginMainDiv, .et2_taglist_tags_icon, .fw_avatar_stat, et2-avatar-group, .blueimp-gallery .slide { filter: invert(1) hue-rotate(180deg) !important; } diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index 26fb22940e..546eac98d3 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/pixelegg/mobile/fw_mobile.css @@ -47,6 +47,7 @@ html[data-darkmode='1'] img, html[data-darkmode='1'] #blueimp-gallery:not(:fullscreen), html[data-darkmode='1'] #blueimp-gallery ol, + html[data-darkmode='1'] et2-select-account::part(icon), html[data-darkmode='1'] et2-select-email::part(icon), html[data-darkmode='1'] et2-calendar-owner::part(icon), html[data-darkmode='1'] sl-menu-item [slot="prefix"], @@ -56,8 +57,6 @@ html[data-darkmode='1'] #loginMainDiv, html[data-darkmode='1'] .et2_taglist_tags_icon, html[data-darkmode='1'] .fw_avatar_stat, - html[data-darkmode='1'] et2-tag::part(icon), - html[data-darkmode='1'] et2-email-tag::part(icon), html[data-darkmode='1'] et2-avatar-group, html[data-darkmode='1'] .blueimp-gallery .slide { filter: invert(1) hue-rotate(180deg) !important; @@ -9467,4 +9466,3 @@ table.egwGridView_grid img.et2_appicon { border-radius: 0; } } -/*# sourceMappingURL=fw_mobile.css.map */ \ No newline at end of file