From: Stefan Sterz <s.sterz@proxmox.com>
To: pbs-devel@lists.proxmox.com, pmg-devel@lists.proxmox.com,
pve-devel@lists.proxmox.com
Subject: [pmg-devel] [PATCH widget-toolkit 1/2] dark-mode: adjust panel header tool icons
Date: Fri, 14 Apr 2023 15:28:07 +0200 [thread overview]
Message-ID: <20230414132811.1485897-2-s.sterz@proxmox.com> (raw)
In-Reply-To: <20230414132811.1485897-1-s.sterz@proxmox.com>
by brigthenening the icons on a more individual basis some darker ones
can now feature higher contrasts while others won't be too bright.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
src/proxmox-dark/scss/extjs/_panel.scss | 37 +++++++++++++++++++++----
1 file changed, 32 insertions(+), 5 deletions(-)
diff --git a/src/proxmox-dark/scss/extjs/_panel.scss b/src/proxmox-dark/scss/extjs/_panel.scss
index 217d3f8..a3c9682 100644
--- a/src/proxmox-dark/scss/extjs/_panel.scss
+++ b/src/proxmox-dark/scss/extjs/_panel.scss
@@ -2,15 +2,42 @@
background-color: $content-background-color;
border: none;
- // The small navigation elements in the panel header bar e.g. to
- // collapse a panel
.x-tool-tool-el {
background-color: transparent;
- filter: brightness(120%);
+ }
+}
+
+// The small navigation elements in the panel header bar e.g. to
+// collapse a panel
+.x-tool-img {
+ filter: brightness(175%);
+
+ // these are brighter per default, so they don't need to be
+ // brigthened as much
+ &.x-tool-expand,
+ &.x-tool-collapse,
+ &.x-tool-refresh {
+ filter: brightness(125%);
+ }
+
+ // this icon uses multiple tones, to have them behave appropriatelly
+ // invert them before brightening them
+ &.x-tool-print {
+ filter: invert(100%) hue-rotate(180deg) brightness(125%);
+ }
+
+ .x-tool-over & {
+ filter: brightness(200%);
+ }
+
+ .x-tool-over &.x-tool-expand,
+ .x-tool-over &.x-tool-collapse,
+ .x-tool-over &.x-tool-refresh {
+ filter: brightness(150%);
}
- .x-tool-over .x-tool-tool-el {
- filter: brightness(140%);
+ .x-tool-over &.x-tool-print {
+ filter: invert(100%) hue-rotate(180deg) brightness(150%);
}
}
--
2.30.2
next prev parent reply other threads:[~2023-04-14 13:29 UTC|newest]
Thread overview: 5+ messages / expand[flat|nested] mbox.gz Atom feed top
2023-04-14 13:28 [pmg-devel] [PATCH widget-toolkit 0/2] Proxmox Dark Theme Fix-ups - Round 6 Stefan Sterz
2023-04-14 13:28 ` Stefan Sterz [this message]
2023-04-14 13:28 ` [pmg-devel] [PATCH widget-toolkit 2/2] fix #4618: dark-mode: lighten critical/warning charts/gauges colors Stefan Sterz
2023-04-14 13:28 ` [pmg-devel] [PATCH pmg-gui 1/1] main view/quarantine: rename "Theme" selector to "Color Theme" Stefan Sterz
2023-05-17 9:53 ` [pmg-devel] applied-series: [pbs-devel] [PATCH widget-toolkit 0/2] Proxmox Dark Theme Fix-ups - Round 6 Thomas Lamprecht
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20230414132811.1485897-2-s.sterz@proxmox.com \
--to=s.sterz@proxmox.com \
--cc=pbs-devel@lists.proxmox.com \
--cc=pmg-devel@lists.proxmox.com \
--cc=pve-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox