From a9c9ad97b3628bc83f7f29173a7187b11350d9f2 Mon Sep 17 00:00:00 2001 From: dartcafe Date: Fri, 4 Jun 2021 17:15:27 +0200 Subject: fixing icons for dark modes Signed-off-by: dartcafe --- src/js/assets/icons/anonymous-fff.svg | 7 ++++++ src/js/assets/scss/icons-dark.scss | 45 ++++++++++++++++++----------------- src/js/assets/scss/icons.scss | 3 +++ 3 files changed, 33 insertions(+), 22 deletions(-) create mode 100644 src/js/assets/icons/anonymous-fff.svg (limited to 'src/js') diff --git a/src/js/assets/icons/anonymous-fff.svg b/src/js/assets/icons/anonymous-fff.svg new file mode 100644 index 00000000..553fc7e9 --- /dev/null +++ b/src/js/assets/icons/anonymous-fff.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/src/js/assets/scss/icons-dark.scss b/src/js/assets/scss/icons-dark.scss index f9defe7a..1e62eb1b 100644 --- a/src/js/assets/scss/icons-dark.scss +++ b/src/js/assets/scss/icons-dark.scss @@ -1,22 +1,23 @@ -// TODO: preparation for full support of @media:prefers-color-scheme by core -// until then, this ha no effect - -@media (prefers-color-scheme: dark) { - :root { - --icon-polls: url('../icons/polls-fff.svg'); - --icon-circles: url('../icons/circles-fff.svg'); - --icon-polls-back: url('../icons/back-fff.svg'); - --icon-polls-confirmed: url('../icons/confirmed-fff.svg'); - --icon-polls-unconfirmed: url('../icons/unconfirmed-fff.svg'); - --icon-polls-clone: url('../icons/clone-fff.svg'); - --icon-polls-move: url('../icons/move-fff.svg'); - --icon-polls-handle: url('../icons/handle-fff.svg'); - --icon-polls-mail: url('../icons/mail-fff.svg'); - --icon-polls-sidebar-toggle: url('../icons/sidebar-toggle-fff.svg'); - --icon-polls-loading: url('../icons/loading-small.gif'); - --icon-polls-open: url('../icons/open-fff.svg'); - --icon-polls-closed: url('../icons/closed-fff.svg'); - --icon-polls-public-poll: url('../icons/visible-fff.svg'); - --icon-polls-hidden-poll: url('../icons/invisible-fff.svg'); - } -} +// TODO: preparation for full support of @media:prefers-color-scheme by core +// until then, this ha no effect + +@media (prefers-color-scheme: dark) { + :root { + --icon-polls: url('../icons/polls-fff.svg'); + --icon-circles: url('../icons/circles-fff.svg'); + --icon-polls-back: url('../icons/back-fff.svg'); + --icon-polls-anonymous: url('../icons/anonymous-fff.svg'); + --icon-polls-confirmed: url('../icons/confirmed-fff.svg'); + --icon-polls-unconfirmed: url('../icons/unconfirmed-fff.svg'); + --icon-polls-clone: url('../icons/clone-fff.svg'); + --icon-polls-move: url('../icons/move-fff.svg'); + --icon-polls-handle: url('../icons/handle-fff.svg'); + --icon-polls-mail: url('../icons/mail-fff.svg'); + --icon-polls-sidebar-toggle: url('../icons/sidebar-toggle-fff.svg'); + --icon-polls-loading: url('../icons/loading-small.gif'); + --icon-polls-open: url('../icons/open-fff.svg'); + --icon-polls-closed: url('../icons/closed-fff.svg'); + --icon-polls-public-poll: url('../icons/visible-fff.svg'); + --icon-polls-hidden-poll: url('../icons/invisible-fff.svg'); + } +} diff --git a/src/js/assets/scss/icons.scss b/src/js/assets/scss/icons.scss index cc1c8e7b..4e059de6 100644 --- a/src/js/assets/scss/icons.scss +++ b/src/js/assets/scss/icons.scss @@ -8,6 +8,7 @@ --icon-polls: url('../icons/polls.svg'); --icon-polls--fff: url('../icons/polls-fff.svg'); --icon-polls-anonymous: url('../icons/anonymous.svg'); + --icon-polls-anonymous--fff: url('../icons/anonymous-fff.svg'); --icon-polls-back: url('../icons/back.svg'); --icon-polls-back--fff: url('../icons/back-fff.svg'); --icon-polls-clone: url('../icons/clone.svg'); @@ -83,10 +84,12 @@ .icon-handle { background-image: var(--icon-polls-handle--fff); } .icon-list-view { background-image: var(--icon-polls-list-view-fff); } .icon-polls { background-image: var(--icon-polls--fff); } + .icon-polls-anonymous { background-image: var(--icon-polls-anonymous--fff); } .icon-polls-back { background-image: var(--icon-polls-back--fff); } .icon-polls-clone { background-image: var(--icon-polls-clone--fff); } .icon-polls-closed { background-image: var(--icon-polls-closed--fff); } .icon-polls-confirmed { background-image: var(--icon-polls-confirmed--fff); } + .icon-polls-hidden { background-image: var(--icon-polls-hidden-poll--fff); } .icon-polls-hidden-poll { background-image: var(--icon-polls-hidden-poll--fff); } .icon-polls-mail { background-image: var(--icon-polls-mail--fff); } .icon-polls-move { background-image: var(--icon-polls-move--fff); } -- cgit v1.2.3