Creates a new css class 'text-color-warning' for the dark theme, which
will be used to propperly show a warning icon later. For this purpose
the 'pwt-gauge-warn' color is extracted in a variable and reused. Also
the variable 'pwd-gauge-crit' has been extracted for consistency.
Signed-off-by: Philipp Hufnagl <p.hufn...@proxmox.com>
---
.../scss/abstracts/_variables.scss | 20 ++++++++++---------
src/proxmox-dark/scss/extjs/_menu.scss | 4 ++++
src/proxmox-dark/scss/other/_charts.scss | 4 ++--
3 files changed, 17 insertions(+), 11 deletions(-)
diff --git a/src/proxmox-dark/scss/abstracts/_variables.scss
b/src/proxmox-dark/scss/abstracts/_variables.scss
index cac51eb..cf7cda4 100644
--- a/src/proxmox-dark/scss/abstracts/_variables.scss
+++ b/src/proxmox-dark/scss/abstracts/_variables.scss
@@ -8,9 +8,20 @@ $highlighted-text: hsl(205deg, 100%, 65%);
$highlighted-text-alt: hsl(205deg, 100%, 80%);
$highlighted-text-crit: hsl(360deg, 100%, 65%);
+// Backgrounds
+$content-background-color: hsl(0deg, 0%, 20%);
+$content-background-selected: hsl(0deg, 0%, 30%);
+$background-dark: hsl(0deg, 0%, 20%);
+$background-darker: hsl(0deg, 0%, 15%);
+$background-darkest: hsl(0deg, 0%, 10%);
+$background-invalid: hsl(360deg, 60%, 20%);
+$background-warning: hsl(40deg, 100%, 20%);
+
// Icon and Text colors
$text-color: hsl(0deg, 0%, 95%);
$text-color-inactive: hsl(0deg, 0%, 60%);
+$text-color-warning: adjust-color($background-warning, $lightness:
lightness($primary-color));
+$text-color-invalid: adjust-color($background-invalid, $lightness:
lightness($primary-color));
$icon-color: hsl(0deg, 0%, 90%);
$icon-color-alt: hsl(0deg, 0%, 55%);
@@ -18,15 +29,6 @@ $icon-color-alt: hsl(0deg, 0%, 55%);
$border-color: hsl(0deg, 0%, 40%);
$border-color-alt: hsl(0deg, 0%, 25%);
-// Backgrounds
-$content-background-color: hsl(0deg, 0%, 20%);
-$content-background-selected: hsl(0deg, 0%, 30%);
-$background-dark: hsl(0deg, 0%, 20%);
-$background-darker: hsl(0deg, 0%, 15%);
-$background-darkest: hsl(0deg, 0%, 10%);
-$background-invalid: hsl(360deg, 60%, 20%);
-$background-warning: hsl(40deg, 100%, 20%);
-
// Buttons
$neutral-button-color: hsl(0deg, 0%, 25%);
$neutral-button-color-alt: hsl(0deg, 0%, 35%);
diff --git a/src/proxmox-dark/scss/extjs/_menu.scss
b/src/proxmox-dark/scss/extjs/_menu.scss
index 2983f60..aa51260 100644
--- a/src/proxmox-dark/scss/extjs/_menu.scss
+++ b/src/proxmox-dark/scss/extjs/_menu.scss
@@ -33,6 +33,10 @@
color: $icon-color;
}
+.x-menu-item-icon-default.warning {
+ color: $text-color-warning;
+}
+
// Vertical divider (e.g. in UserInfo between icons and text)
.x-menu-icon-separator-default {
background-color: $background-dark;
diff --git a/src/proxmox-dark/scss/other/_charts.scss
b/src/proxmox-dark/scss/other/_charts.scss
index 26b0104..a3a5b12 100644
--- a/src/proxmox-dark/scss/other/_charts.scss
+++ b/src/proxmox-dark/scss/other/_charts.scss
@@ -7,8 +7,8 @@
--pwt-text-color: #{$text-color};
--pwt-gauge-default: #{$primary-color};
--pwt-gauge-back: #{$background-dark};
- --pwt-gauge-warn: #{adjust-color($background-warning, $lightness:
lightness($primary-color))};
- --pwt-gauge-crit: #{adjust-color($background-invalid, $lightness:
lightness($primary-color))};
+ --pwt-gauge-warn: #{$text-color-warning};
+ --pwt-gauge-crit: #{$text-color-invalid};
--pwt-chart-primary: #{$primary-color};
--pwt-chart-grid-stroke: #{$content-background-selected};
}
--
2.39.2
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
