From 2a5b7cd2fff7b7ce78825b2c5bfcdf387fa681dc Mon Sep 17 00:00:00 2001 From: Stefan Sterz Date: Fri, 10 Mar 2023 14:08:34 +0100 Subject: [PATCH] dark-theme: re-work buttons colors to appear dimmer this dims buttons further by removing pure white text color and adjusting backgrounds and border accordingly. it also keeps the help buttons brighter than other buttons to draw (possibly confused) users to them. Signed-off-by: Stefan Sterz --- src/proxmox-dark/scss/abstracts/_variables.scss | 10 +++++----- src/proxmox-dark/scss/extjs/form/_button.scss | 1 + src/proxmox-dark/scss/proxmox/_helpbutton.scss | 1 + 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/proxmox-dark/scss/abstracts/_variables.scss b/src/proxmox-dark/scss/abstracts/_variables.scss index 96581df..cf61ad2 100644 --- a/src/proxmox-dark/scss/abstracts/_variables.scss +++ b/src/proxmox-dark/scss/abstracts/_variables.scss @@ -28,14 +28,14 @@ $background-invalid: hsl(360deg, 60%, 30%); $background-warning: hsl(40deg, 100%, 30%); // Buttons -$neutral-button-color: hsl(0deg, 0%, 35%); -$neutral-button-color-alt: hsl(0deg, 0%, 55%); -$neutral-button-text-color: hsl(0deg, 0%, 100%); +$neutral-button-color: hsl(0deg, 0%, 25%); +$neutral-button-color-alt: hsl(0deg, 0%, 35%); +$neutral-button-text-color: hsl(0deg, 0%, 95%); $neutral-button-icon-color: $neutral-button-text-color; // Help Buttons -$help-button-color: hsl(0deg, 0%, 70%); -$help-button-color-alt: hsl(0deg, 0%, 60%); +$help-button-color: hsl(0deg, 0%, 65%); +$help-button-color-alt: hsl(0deg, 0%, 55%); $help-button-text-color: hsl(0deg, 0%, 10%); $help-button-icon-color: $help-button-text-color; diff --git a/src/proxmox-dark/scss/extjs/form/_button.scss b/src/proxmox-dark/scss/extjs/form/_button.scss index 0aa1475..bf02135 100644 --- a/src/proxmox-dark/scss/extjs/form/_button.scss +++ b/src/proxmox-dark/scss/extjs/form/_button.scss @@ -35,6 +35,7 @@ &.x-btn-over, .x-keyboard-mode &.x-btn-focus { background-color: $neutral-button-color-alt; + border-color: $neutral-button-color-alt; // the little arrow in certain toolbar buttons with dropdowns .x-btn-wrap-default-toolbar-small.x-btn-arrow-right::after, diff --git a/src/proxmox-dark/scss/proxmox/_helpbutton.scss b/src/proxmox-dark/scss/proxmox/_helpbutton.scss index aad92e2..817d6a1 100644 --- a/src/proxmox-dark/scss/proxmox/_helpbutton.scss +++ b/src/proxmox-dark/scss/proxmox/_helpbutton.scss @@ -1,6 +1,7 @@ // help buttons .proxmox-inline-button { background-color: $help-button-color; + border-color: $help-button-color-alt; color: $help-button-text-color; &.x-btn-over,