[pve-devel] [PATCH widget-toolkit 0/6] Proxmox Dark Theme Fix-ups Round 1

[pve-devel] [PATCH widget-toolkit 0/6] Proxmox Dark Theme Fix-ups Round 1

[Stefan Sterz]

this series adds a couple of fix-ups to the recently introduced
dark-theme. it first fixes summary rows again (they wore broken in a
refactoring step), then darkens the background mask further, dims
buttons more, removes thicker borders that are inconsistent with
crisp and removes a border around the pve resource tree.

the last commit concerns the pve-manager. it removes a class from the
"tree settings" button that made it appear like a help button. this
doesn't change its appearance in crisp, but makes it stand out more
in the dark theme.

Stefan Sterz (5):
  dark-theme: fix summary row background
  dark-theme: make windows stand out more against the background mask
  dark-theme: re-work buttons colors to appear dimmer
  dark-theme: remove thicker borders around content
  dark-theme: visually remove the border around the pve resource tree

 src/proxmox-dark/scss/abstracts/_mixins.scss    |  7 -------
 src/proxmox-dark/scss/abstracts/_variables.scss | 10 +++++-----
 src/proxmox-dark/scss/extjs/_grid.scss          |  4 +++-
 src/proxmox-dark/scss/extjs/_panel.scss         |  6 ++++++
 src/proxmox-dark/scss/extjs/_presentation.scss  |  2 +-
 src/proxmox-dark/scss/extjs/_toolbar.scss       |  2 +-
 src/proxmox-dark/scss/extjs/form/_button.scss   |  1 +
 src/proxmox-dark/scss/proxmox/_general.scss     | 13 -------------
 src/proxmox-dark/scss/proxmox/_helpbutton.scss  |  1 +
 9 files changed, 18 insertions(+), 28 deletions(-)

-- 
2.30.2

[pve-devel] [PATCH widget-toolkit 1/6] dark-theme: fix summary row background

[Stefan Sterz]

previously an "!important" was missing from the `background-color`
property. this meant that the background color wasn't properly
overridden. the "!important" is necessary as it is also used in the
light theme.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/proxmox-dark/scss/extjs/_grid.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/proxmox-dark/scss/extjs/_grid.scss b/src/proxmox-dark/scss/extjs/_grid.scss
index 77872b0..3719fdc 100644
--- a/src/proxmox-dark/scss/extjs/_grid.scss
+++ b/src/proxmox-dark/scss/extjs/_grid.scss
@@ -96,8 +96,10 @@
   .x-grid-cell,
   .x-grid-rowwrap,
   .x-grid-cell-rowbody {
+    // the "!important" is needed here, because crisp also sets this
+    // as important
+    background-color: $background-darker !important;
     border-color: $border-color-alt;
-    background-color: $background-darker;
   }
 }
 
-- 
2.30.2

[pve-devel] [PATCH widget-toolkit 2/6] dark-theme: make windows stand out more against the background mask

[Stefan Sterz]

makes the background mask darker so windows stand out a bit more

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/proxmox-dark/scss/extjs/_presentation.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/proxmox-dark/scss/extjs/_presentation.scss b/src/proxmox-dark/scss/extjs/_presentation.scss
index c7d3c8f..2503368 100644
--- a/src/proxmox-dark/scss/extjs/_presentation.scss
+++ b/src/proxmox-dark/scss/extjs/_presentation.scss
@@ -1,7 +1,7 @@
 // The mask that is applied when the window is unaccessible (Login
 // screen, Loading, ...)
 .x-mask {
-  background-color: $background-darker;
+  background-color: black;
   opacity: 0.85;
 }
 
-- 
2.30.2

[pve-devel] [PATCH widget-toolkit 3/6] dark-theme: re-work buttons colors to appear dimmer

[Stefan Sterz]

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

[pve-devel] [PATCH widget-toolkit 4/6] dark-theme: remove thicker borders around content

[Stefan Sterz]

previously the dark theme used thicker borders in certain places to
space out the content a bit more. this removes them again to make the
appearance more consistent with "crisp".

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/proxmox-dark/scss/abstracts/_mixins.scss |  7 -------
 src/proxmox-dark/scss/extjs/_toolbar.scss    |  2 +-
 src/proxmox-dark/scss/proxmox/_general.scss  | 13 -------------
 3 files changed, 1 insertion(+), 21 deletions(-)

diff --git a/src/proxmox-dark/scss/abstracts/_mixins.scss b/src/proxmox-dark/scss/abstracts/_mixins.scss
index 570a783..4f226f2 100644
--- a/src/proxmox-dark/scss/abstracts/_mixins.scss
+++ b/src/proxmox-dark/scss/abstracts/_mixins.scss
@@ -1,10 +1,3 @@
-// A border to the left and on top of the content panels for the
-// selected resource
-@mixin content-border {
-  border-top: solid 3px $background-darkest;
-  border-left: solid 3px $background-darkest;
-}
-
 // selected items in dropdown etc
 @mixin selection {
   background-color: $selection-background-color;
diff --git a/src/proxmox-dark/scss/extjs/_toolbar.scss b/src/proxmox-dark/scss/extjs/_toolbar.scss
index 2ea8527..aa6ffc5 100644
--- a/src/proxmox-dark/scss/extjs/_toolbar.scss
+++ b/src/proxmox-dark/scss/extjs/_toolbar.scss
@@ -4,7 +4,7 @@
 
 .x-toolbar-default {
   background-color: $background-darker;
-  border: solid 3px $background-darkest;
+  border-color: $border-color-alt;
 
   &.x-docked-top {
     border-width: 1px;
diff --git a/src/proxmox-dark/scss/proxmox/_general.scss b/src/proxmox-dark/scss/proxmox/_general.scss
index 805a187..c319f6d 100644
--- a/src/proxmox-dark/scss/proxmox/_general.scss
+++ b/src/proxmox-dark/scss/proxmox/_general.scss
@@ -9,19 +9,6 @@ div[id^="versioninfo-"] + div[id^="panel-"] > div[id^="panel-"][id$="-bodyWrap"]
   border-color: transparent;
 }
 
-// border around the main datacenter view
-div[id^="PVE-dc-Config-"][id$="-body"],
-// border around the main pool view
-div[id^="pvePoolConfig-"][id$="-body"],
-// Container content config views
-div[id^="pveLXCConfig-"][id$="-body"],
-// VM content config views
-div[id^="PVE-qemu-Config-"][id$="-body"],
-div[id^="PVE-storage-Browser-"][id$="-body"],
-div[id^="PVE-node-Config-"][id$="-body"] {
-  @include content-border;
-}
-
 // Section header in the "My Settings" page
 .x-fieldset-header-default > .x-fieldset-header-text {
   color: $text-color;
-- 
2.30.2

[pve-devel] [PATCH widget-toolkit 5/6] dark-theme: visually remove the border around the pve resource tree

[Stefan Sterz]

by setting the color of the border of the resource tree to the panel
background color, it doesn't appear visually anymore while keeping
alignments in place.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/proxmox-dark/scss/extjs/_panel.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/proxmox-dark/scss/extjs/_panel.scss b/src/proxmox-dark/scss/extjs/_panel.scss
index 5344c8f..217d3f8 100644
--- a/src/proxmox-dark/scss/extjs/_panel.scss
+++ b/src/proxmox-dark/scss/extjs/_panel.scss
@@ -23,3 +23,9 @@
   border-color: $border-color-alt;
   color: $text-color;
 }
+
+// override the border around the pve-resource-tree specifically to be
+// more consistent with crisp, while keep allignments "correct"
+div[id^="pveResourceTree-"][id$="-body"] {
+  border-color: $background-darker;
+}
-- 
2.30.2

[pve-devel] [PATCH manager 6/6] ui: make tree settings button like regular buttons

[Stefan Sterz]

the "proxmox-inline-button" class is redundant in the crisp theme as
it only sets the buttons text to black. we mainly use that class for
"help" buttons. this is useful in the dark theme, because we want help
buttons to stand out a bit so (possibly confused) users are drawn to
them more easily. removing the class here doesn't change anything for
"crisp", but makes the dark theme appear more consistent. also fixes
up an unnecessary space.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 www/manager6/Workspace.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/www/manager6/Workspace.js b/www/manager6/Workspace.js
index 78ab37b6..8cee3638 100644
--- a/www/manager6/Workspace.js
+++ b/www/manager6/Workspace.js
@@ -469,8 +469,8 @@ Ext.define('PVE.StdWorkspace', {
 				selview,
 				{
 				    xtype: 'button',
-				    cls: 'x-btn-default-toolbar-small proxmox-inline-button',
-				    iconCls: 'fa fa-fw fa-gear x-btn-icon-el-default-toolbar-small ',
+				    cls: 'x-btn-default-toolbar-small',
+				    iconCls: 'fa fa-fw fa-gear x-btn-icon-el-default-toolbar-small',
 				    handler: () => {
 					Ext.create('PVE.window.TreeSettingsEdit', {
 					    autoShow: true,
-- 
2.30.2

[pve-devel] applied-series: [PATCH widget-toolkit 0/6] Proxmox Dark Theme Fix-ups Round 1

[Thomas Lamprecht]

Am 10/03/2023 um 14:08 schrieb Stefan Sterz:
> this series adds a couple of fix-ups to the recently introduced
> dark-theme. it first fixes summary rows again (they wore broken in a
> refactoring step), then darkens the background mask further, dims
> buttons more, removes thicker borders that are inconsistent with
> crisp and removes a border around the pve resource tree.
> 
> the last commit concerns the pve-manager. it removes a class from the
> "tree settings" button that made it appear like a help button. this
> doesn't change its appearance in crisp, but makes it stand out more
> in the dark theme.
> 
> Stefan Sterz (5):
>   dark-theme: fix summary row background
>   dark-theme: make windows stand out more against the background mask
>   dark-theme: re-work buttons colors to appear dimmer
>   dark-theme: remove thicker borders around content
>   dark-theme: visually remove the border around the pve resource tree
> 
>  src/proxmox-dark/scss/abstracts/_mixins.scss    |  7 -------
>  src/proxmox-dark/scss/abstracts/_variables.scss | 10 +++++-----
>  src/proxmox-dark/scss/extjs/_grid.scss          |  4 +++-
>  src/proxmox-dark/scss/extjs/_panel.scss         |  6 ++++++
>  src/proxmox-dark/scss/extjs/_presentation.scss  |  2 +-
>  src/proxmox-dark/scss/extjs/_toolbar.scss       |  2 +-
>  src/proxmox-dark/scss/extjs/form/_button.scss   |  1 +
>  src/proxmox-dark/scss/proxmox/_general.scss     | 13 -------------
>  src/proxmox-dark/scss/proxmox/_helpbutton.scss  |  1 +
>  9 files changed, 18 insertions(+), 28 deletions(-)
> 


applied, thanks!