proxmox-mirrors/proxmox-widget-toolkit
1
0
Fork 1
mirror of https://git.proxmox.com/git/proxmox-widget-toolkit synced 2025-05-11 19:42:49 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

dark-mode: adjust panel header tool icons

Browse Source 
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>
This commit is contained in:
Stefan Sterz 2023-04-14 15:28:07 +02:00 committed by Thomas Lamprecht
parent 736c3457a2
commit 4c435ee1c3
1 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/proxmox-dark/scss/extjs/_panel.scss
View File

@ -2,15 +2,42 @@
background-color: $content-background-color; background-color: $content-background-color;
border: none; border: none;
// The small navigation elements in the panel header bar e.g. to
// collapse a panel
.x-tool-tool-el { .x-tool-tool-el {
background-color: transparent; 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%);
} }
.x-tool-over .x-tool-tool-el { // this icon uses multiple tones, to have them behave appropriatelly
filter: brightness(140%); // 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-print {
filter: invert(100%) hue-rotate(180deg) brightness(150%);
} }
} }