From: Philipp Hufnagl <p.hufnagl@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [pve-devel] [PATCH proxmox-widget-toolkit v2 1/3] fix #4546: css: create a new css class for warning texts
Date: Tue, 10 Oct 2023 12:40:30 +0200 [thread overview]
Message-ID: <20231010104034.932760-2-p.hufnagl@proxmox.com> (raw)
In-Reply-To: <20231010104034.932760-1-p.hufnagl@proxmox.com>
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.hufnagl@proxmox.com>
---
.../scss/abstracts/_variables.scss | 20 ++++++++++---------
| 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%);
--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
next prev parent reply other threads:[~2023-10-10 10:40 UTC|newest]
Thread overview: 6+ messages / expand[flat|nested] mbox.gz Atom feed top
2023-10-10 10:40 [pve-devel] [PATCH proxmox-widget-toolkit/manager/access-control v2 0/5] fix #4546: Show warning hint/badge if user account is expiring in next few days Philipp Hufnagl
2023-10-10 10:40 ` Philipp Hufnagl [this message]
2023-10-10 10:40 ` [pve-devel] [PATCH proxmox-widget-toolkit v2 2/3] fix #4546: utils: Highlight accounts in user management that exprie soon Philipp Hufnagl
2023-10-10 10:40 ` [pve-devel] [PATCH proxmox-widget-toolkit v2 3/3] fix #4546: utils: Expand authentication data with account expiry date Philipp Hufnagl
2023-10-10 10:40 ` [pve-devel] [PATCH proxmox-widget-toolkit v2 1/1] fix #4546: ui: notify user if there usser account expires soon Philipp Hufnagl
2023-10-10 10:40 ` [pve-devel] [PATCH access-control v2 1/1] fix #4546: api: Return user expiration date on access/ticket API call Philipp Hufnagl
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=20231010104034.932760-2-p.hufnagl@proxmox.com \
--to=p.hufnagl@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