proxmox-mirrors/proxmox-widget-toolkit
1
0
Fork 1
mirror of https://git.proxmox.com/git/proxmox-widget-toolkit synced 2026-01-06 19:43:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

dark-mode: fix the focused state for background image grid icons

Browse Source 
some icons in grids are background images for the whole grid element.
so we need to filter the entire element, which also means that any
background or inner border color would get filtered too. this inverts
the focused border on inner elements and the focused background so
that it looks correct when inverted again.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
This commit is contained in:
Stefan Sterz 2023-04-05 10:08:03 +02:00 committed by Thomas Lamprecht
parent 2afa090a1a
commit 064318188f
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/proxmox-dark/scss/other/_icons.scss
View File

@ -90,12 +90,16 @@
color: black;
}
.x-grid-cell-inner::before {
// this is a somewhat hacky work-around for the focus borders on
// these elements. since we use the invert filter to fix the icon
// color we need to also invert the border color first too, not
// just the text. add "!important" to properly override.
border-color: invert($primary-color, $weight: 90%) !important;
// this is a somewhat hacky work-around for the focus borders and
// background on these elements. since we use the invert filter to
// fix the icon color we need to also invert the border color first
// too, not just the text.
.x-keyboard-mode &.x-grid-item-focused {
background-color: invert($selection-background-color, $weight: 90%);
.x-grid-cell-inner::before {
border-color: invert($primary-color, $weight: 90%);
}
}
}

8
src/proxmox-dark/scss/proxmox/_loadingindicator.scss
View File

@ -8,6 +8,14 @@
color: black;
}
.x-keyboard-mode .x-grid-item-focused.x-grid-row-loading {
background-color: invert($selection-background-color, $weight: 90%);
.x-grid-cell-inner::before {
border-color: invert($primary-color, $weight: 90%) !important;
}
}
.x-mask-msg {
background-color: $form-field-body-color;
border: solid 1px $border-color-alt;