proxmox-mirrors/proxmox-widget-toolkit
1
0
Fork 1
mirror of https://git.proxmox.com/git/proxmox-widget-toolkit synced 2025-05-09 19:14:13 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

dark-theme: re-work buttons colors to appear dimmer

Browse Source 
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 <s.sterz@proxmox.com>
This commit is contained in:
Stefan Sterz 2023-03-10 14:08:34 +01:00 committed by Thomas Lamprecht
parent e48bb85042
commit 2a5b7cd2ff
3 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/proxmox-dark/scss/abstracts/_variables.scss
View File

@ -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;

1
src/proxmox-dark/scss/extjs/form/_button.scss
View File

@ -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,

1
src/proxmox-dark/scss/proxmox/_helpbutton.scss
View File

@ -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,