MOBILE-4362 icon: Improve icon filter handling

main
Pau Ferrer Ocaña 2023-10-25 15:35:08 +02:00
parent 993dc19a85
commit 68d9d6cdd7
6 changed files with 8 additions and 15 deletions

View File

@ -1,13 +1,7 @@
:host { :host {
--mod-icon-filter: brightness(0);
core-mod-icon { core-mod-icon {
background: transparent; background: transparent;
margin: 0; margin: 0;
--filter: var(--mod-icon-filter); --filter: var(--module-icon-filter);
} }
} }
:host-context(html.dark) {
--mod-icon-filter: brightness(0) invert(1);
}

View File

@ -7,7 +7,6 @@
--icon-radius: var(--module-icon-radius, var(--radius-xs)); --icon-radius: var(--module-icon-radius, var(--radius-xs));
--margin-end: 0px; --margin-end: 0px;
--margin-vertical: 0px; --margin-vertical: 0px;
--filter: brightness(0) invert(1);
margin-top: var(--margin-vertical); margin-top: var(--margin-vertical);
margin-bottom: var(--margin-vertical); margin-bottom: var(--margin-vertical);
@ -22,7 +21,7 @@
&.#{$type} { &.#{$type} {
background-color: var(--activity#{$type}); background-color: var(--activity#{$type});
img { img {
filter: var(--filter); filter: var(--filter, brightness(0) invert(1));
} }
} }
} }

View File

@ -8,7 +8,6 @@
--even-cell-hover: var(--light); --even-cell-hover: var(--light);
--icon-color: var(--gray-500); --icon-color: var(--gray-500);
--border-color: var(--stroke); --border-color: var(--stroke);
--mod-icon-filter: brightness(0);
.odd { .odd {
--cell-background: var(--odd-cell-background); --cell-background: var(--odd-cell-background);
@ -29,7 +28,6 @@
--even-cell-background: var(--gray-900); --even-cell-background: var(--gray-900);
--even-cell-hover: var(--gray-700); --even-cell-hover: var(--gray-700);
--icon-color: var(--gray-200); --icon-color: var(--gray-200);
--mod-icon-filter: brightness(0) invert(1);
} }
.core-grades-table { .core-grades-table {
@ -89,7 +87,7 @@
--padding: 0px; --padding: 0px;
--size: 16px; --size: 16px;
background: transparent; background: transparent;
--filter: var(--mod-icon-filter); --filter: var(--module-icon-filter);
} }

View File

@ -4,7 +4,6 @@
--core-global-search-result-content-color: var(--gray-700); --core-global-search-result-content-color: var(--gray-700);
--core-global-search-result-context-color: var(--gray-600); --core-global-search-result-context-color: var(--gray-600);
--core-global-search-result-icon-size: 16px; --core-global-search-result-icon-size: 16px;
--mod-icon-filter: brightness(0);
h3 { h3 {
font-size: 16px; font-size: 16px;
@ -14,7 +13,7 @@
core-mod-icon { core-mod-icon {
--size: var(--core-global-search-result-icon-size); --size: var(--core-global-search-result-icon-size);
--filter: var(--mod-icon-filter); --filter: var(--module-icon-filter);
margin-inline-end: var(--spacing-2); margin-inline-end: var(--spacing-2);
margin-top: 0px; margin-top: 0px;
@ -101,5 +100,4 @@
:host-context(html.dark) ion-item { :host-context(html.dark) ion-item {
--core-global-search-result-content-color: var(--gray-400); --core-global-search-result-content-color: var(--gray-400);
--core-global-search-result-context-color: var(--gray-500); --core-global-search-result-context-color: var(--gray-500);
--mod-icon-filter: brightness(0) invert(1);
} }

View File

@ -130,6 +130,8 @@ html.dark {
--core-login-input-background: var(--core-login-background); --core-login-input-background: var(--core-login-background);
--core-login-input-color: var(--core-login-text-color); --core-login-input-color: var(--core-login-text-color);
--module-icon-filter: brightness(0) invert(1);
--core-question-correct-color: var(--success-tint); --core-question-correct-color: var(--success-tint);
--core-question-correct-color-bg: var(--success-shade); --core-question-correct-color-bg: var(--success-shade);
--core-question-incorrect-color: var(--danger); --core-question-incorrect-color: var(--danger);

View File

@ -352,6 +352,8 @@ html {
--core-messages-discussion-badge: var(--primary); --core-messages-discussion-badge: var(--primary);
--core-messages-discussion-badge-text: var(--white); --core-messages-discussion-badge-text: var(--white);
--module-icon-filter: brightness(0);
--addon-forum-avatar-size: var(--core-avatar-size); --addon-forum-avatar-size: var(--core-avatar-size);
--addon-forum-border-color: var(--stroke); --addon-forum-border-color: var(--stroke);
--addon-forum-highlight-color: var(--light); --addon-forum-highlight-color: var(--light);