From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id 2EE0198CFF for ; Tue, 10 Oct 2023 12:40:50 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 16AD031746 for ; Tue, 10 Oct 2023 12:40:50 +0200 (CEST) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS for ; Tue, 10 Oct 2023 12:40:48 +0200 (CEST) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id A6F52449A6 for ; Tue, 10 Oct 2023 12:40:48 +0200 (CEST) From: Philipp Hufnagl To: pve-devel@lists.proxmox.com Date: Tue, 10 Oct 2023 12:40:30 +0200 Message-Id: <20231010104034.932760-2-p.hufnagl@proxmox.com> X-Mailer: git-send-email 2.39.2 In-Reply-To: <20231010104034.932760-1-p.hufnagl@proxmox.com> References: <20231010104034.932760-1-p.hufnagl@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL -0.082 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pve-devel] [PATCH proxmox-widget-toolkit v2 1/3] fix #4546: css: create a new css class for warning texts X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Tue, 10 Oct 2023 10:40:50 -0000 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 --- .../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