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.st...@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
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
