[pve-devel] [PATCH widget-toolkit 1/4] dark-theme: improve help button contrast ratios in focused state

Stefan Sterz s.sterz at proxmox.com
Mon Mar 20 10:02:06 CET 2023


also improves the hovered/focused state and makes it more consistent
with other buttons by making it brighter than the default state.

Signed-off-by: Stefan Sterz <s.sterz at proxmox.com>
---
 src/proxmox-dark/scss/abstracts/_variables.scss | 2 +-
 src/proxmox-dark/scss/proxmox/_helpbutton.scss  | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/proxmox-dark/scss/abstracts/_variables.scss b/src/proxmox-dark/scss/abstracts/_variables.scss
index cf61ad2..29c9020 100644
--- a/src/proxmox-dark/scss/abstracts/_variables.scss
+++ b/src/proxmox-dark/scss/abstracts/_variables.scss
@@ -35,7 +35,7 @@ $neutral-button-icon-color: $neutral-button-text-color;
 
 // Help Buttons
 $help-button-color: hsl(0deg, 0%, 65%);
-$help-button-color-alt: hsl(0deg, 0%, 55%);
+$help-button-color-alt: hsl(0deg, 0%, 75%);
 $help-button-text-color: hsl(0deg, 0%, 10%);
 $help-button-icon-color: $help-button-text-color;
 
diff --git a/src/proxmox-dark/scss/proxmox/_helpbutton.scss b/src/proxmox-dark/scss/proxmox/_helpbutton.scss
index 817d6a1..5032cc1 100644
--- a/src/proxmox-dark/scss/proxmox/_helpbutton.scss
+++ b/src/proxmox-dark/scss/proxmox/_helpbutton.scss
@@ -5,7 +5,8 @@
   color: $help-button-text-color;
 
   &.x-btn-over,
-  &.x-btn.x-btn-pressed.x-btn-default-toolbar-small {
+  &.x-btn.x-btn-pressed.x-btn-default-toolbar-small,
+  .x-keyboard-mode &.x-btn-default-toolbar-small.x-btn-focus {
     background-color: $help-button-color-alt;
     border-color: $help-button-color-alt;
   }
-- 
2.30.2






More information about the pve-devel mailing list