* [pve-devel] [PATCH widget-toolkit 0/4] Dark Theme Fix-ups Round 3
@ 2023-03-20 9:02 Stefan Sterz
2023-03-20 9:02 ` [pve-devel] [PATCH widget-toolkit 1/4] dark-theme: improve help button contrast ratios in focused state Stefan Sterz
` (4 more replies)
0 siblings, 5 replies; 6+ messages in thread
From: Stefan Sterz @ 2023-03-20 9:02 UTC (permalink / raw)
To: pve-devel
this series adds a few more fix-ups for the dark theme:
* fix the contrast ratio of the focus state of help buttons
* make help buttons hovered/focused state brigther to be more
consistent with the rest of the theme
* dim warning and invalid colors further to be more consistent with
crisp
* dim the color of "sorted-by" headers
* make the background mask more see-through while also letting windows
stand out more
Stefan Sterz (4):
dark-theme: improve help button contrast ratios in focused state
dark-theme: make "sorted-by" header highlight more subtle
dark-theme: dim warning and invalid colors more
dark-theme: let the background "shine through" mask more
src/proxmox-dark/scss/abstracts/_variables.scss | 6 +++---
src/proxmox-dark/scss/extjs/_grid.scss | 2 +-
src/proxmox-dark/scss/extjs/_presentation.scss | 6 +++---
src/proxmox-dark/scss/proxmox/_helpbutton.scss | 3 ++-
4 files changed, 9 insertions(+), 8 deletions(-)
--
2.30.2
^ permalink raw reply [flat|nested] 6+ messages in thread
* [pve-devel] [PATCH widget-toolkit 1/4] dark-theme: improve help button contrast ratios in focused state
2023-03-20 9:02 [pve-devel] [PATCH widget-toolkit 0/4] Dark Theme Fix-ups Round 3 Stefan Sterz
@ 2023-03-20 9:02 ` Stefan Sterz
2023-03-20 9:02 ` [pve-devel] [PATCH widget-toolkit 2/4] dark-theme: make "sorted-by" header highlight more subtle Stefan Sterz
` (3 subsequent siblings)
4 siblings, 0 replies; 6+ messages in thread
From: Stefan Sterz @ 2023-03-20 9:02 UTC (permalink / raw)
To: pve-devel
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@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
^ permalink raw reply [flat|nested] 6+ messages in thread
* [pve-devel] [PATCH widget-toolkit 2/4] dark-theme: make "sorted-by" header highlight more subtle
2023-03-20 9:02 [pve-devel] [PATCH widget-toolkit 0/4] Dark Theme Fix-ups Round 3 Stefan Sterz
2023-03-20 9:02 ` [pve-devel] [PATCH widget-toolkit 1/4] dark-theme: improve help button contrast ratios in focused state Stefan Sterz
@ 2023-03-20 9:02 ` Stefan Sterz
2023-03-20 9:02 ` [pve-devel] [PATCH widget-toolkit 3/4] dark-theme: dim warning and invalid colors more Stefan Sterz
` (2 subsequent siblings)
4 siblings, 0 replies; 6+ messages in thread
From: Stefan Sterz @ 2023-03-20 9:02 UTC (permalink / raw)
To: pve-devel
by making the highlight more subtle, the theme is more consistent with
the look of crisp.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
src/proxmox-dark/scss/extjs/_grid.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/proxmox-dark/scss/extjs/_grid.scss b/src/proxmox-dark/scss/extjs/_grid.scss
index 3719fdc..beef492 100644
--- a/src/proxmox-dark/scss/extjs/_grid.scss
+++ b/src/proxmox-dark/scss/extjs/_grid.scss
@@ -88,7 +88,7 @@
// header element that the grid is currently sorted by
.x-column-header-sort-ASC,
.x-column-header-sort-DESC {
- background-color: $primary-dark;
+ background-color: mix($background-darker, $primary-color, 70%);
}
// summary rows (e.g. ceph pools last row)
--
2.30.2
^ permalink raw reply [flat|nested] 6+ messages in thread
* [pve-devel] [PATCH widget-toolkit 3/4] dark-theme: dim warning and invalid colors more
2023-03-20 9:02 [pve-devel] [PATCH widget-toolkit 0/4] Dark Theme Fix-ups Round 3 Stefan Sterz
2023-03-20 9:02 ` [pve-devel] [PATCH widget-toolkit 1/4] dark-theme: improve help button contrast ratios in focused state Stefan Sterz
2023-03-20 9:02 ` [pve-devel] [PATCH widget-toolkit 2/4] dark-theme: make "sorted-by" header highlight more subtle Stefan Sterz
@ 2023-03-20 9:02 ` Stefan Sterz
2023-03-20 9:02 ` [pve-devel] [PATCH widget-toolkit 4/4] dark-theme: let the background "shine through" mask more Stefan Sterz
2023-03-20 13:08 ` [pve-devel] applied: [PATCH widget-toolkit 0/4] Dark Theme Fix-ups Round 3 Thomas Lamprecht
4 siblings, 0 replies; 6+ messages in thread
From: Stefan Sterz @ 2023-03-20 9:02 UTC (permalink / raw)
To: pve-devel
this brings them more in-line with the appearance of crisp.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
src/proxmox-dark/scss/abstracts/_variables.scss | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/proxmox-dark/scss/abstracts/_variables.scss b/src/proxmox-dark/scss/abstracts/_variables.scss
index 29c9020..cac51eb 100644
--- a/src/proxmox-dark/scss/abstracts/_variables.scss
+++ b/src/proxmox-dark/scss/abstracts/_variables.scss
@@ -24,8 +24,8 @@ $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%, 30%);
-$background-warning: hsl(40deg, 100%, 30%);
+$background-invalid: hsl(360deg, 60%, 20%);
+$background-warning: hsl(40deg, 100%, 20%);
// Buttons
$neutral-button-color: hsl(0deg, 0%, 25%);
--
2.30.2
^ permalink raw reply [flat|nested] 6+ messages in thread
* [pve-devel] [PATCH widget-toolkit 4/4] dark-theme: let the background "shine through" mask more
2023-03-20 9:02 [pve-devel] [PATCH widget-toolkit 0/4] Dark Theme Fix-ups Round 3 Stefan Sterz
` (2 preceding siblings ...)
2023-03-20 9:02 ` [pve-devel] [PATCH widget-toolkit 3/4] dark-theme: dim warning and invalid colors more Stefan Sterz
@ 2023-03-20 9:02 ` Stefan Sterz
2023-03-20 13:08 ` [pve-devel] applied: [PATCH widget-toolkit 0/4] Dark Theme Fix-ups Round 3 Thomas Lamprecht
4 siblings, 0 replies; 6+ messages in thread
From: Stefan Sterz @ 2023-03-20 9:02 UTC (permalink / raw)
To: pve-devel
this makes the background mask a bit brighter and more see-through to
make it possible to read values from behind the mask, if needed. it
also adds a more visible shadow to windows so that the stand out more
at the same time.
Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
src/proxmox-dark/scss/extjs/_presentation.scss | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/proxmox-dark/scss/extjs/_presentation.scss b/src/proxmox-dark/scss/extjs/_presentation.scss
index 2503368..5fd35a9 100644
--- a/src/proxmox-dark/scss/extjs/_presentation.scss
+++ b/src/proxmox-dark/scss/extjs/_presentation.scss
@@ -1,8 +1,8 @@
// The mask that is applied when the window is unaccessible (Login
// screen, Loading, ...)
.x-mask {
- background-color: black;
- opacity: 0.85;
+ background-color: $background-darker;
+ opacity: 0.75;
}
// Shadows of floating windows like window modals, form selectors and
@@ -10,5 +10,5 @@
.x-css-shadow {
// the additional styling from the pve css overwrites the setting on
// the element with "!important", that's why we need it here.
- box-shadow: $background-darkest 0 0 5px !important;
+ box-shadow: $background-dark 0 -1px 15px 7px !important;
}
--
2.30.2
^ permalink raw reply [flat|nested] 6+ messages in thread
* [pve-devel] applied: [PATCH widget-toolkit 0/4] Dark Theme Fix-ups Round 3
2023-03-20 9:02 [pve-devel] [PATCH widget-toolkit 0/4] Dark Theme Fix-ups Round 3 Stefan Sterz
` (3 preceding siblings ...)
2023-03-20 9:02 ` [pve-devel] [PATCH widget-toolkit 4/4] dark-theme: let the background "shine through" mask more Stefan Sterz
@ 2023-03-20 13:08 ` Thomas Lamprecht
4 siblings, 0 replies; 6+ messages in thread
From: Thomas Lamprecht @ 2023-03-20 13:08 UTC (permalink / raw)
To: Proxmox VE development discussion, Stefan Sterz
Am 20/03/2023 um 10:02 schrieb Stefan Sterz:
> this series adds a few more fix-ups for the dark theme:
>
> * fix the contrast ratio of the focus state of help buttons
> * make help buttons hovered/focused state brigther to be more
> consistent with the rest of the theme
> * dim warning and invalid colors further to be more consistent with
> crisp
> * dim the color of "sorted-by" headers
> * make the background mask more see-through while also letting windows
> stand out more
>
> Stefan Sterz (4):
> dark-theme: improve help button contrast ratios in focused state
> dark-theme: make "sorted-by" header highlight more subtle
> dark-theme: dim warning and invalid colors more
> dark-theme: let the background "shine through" mask more
>
> src/proxmox-dark/scss/abstracts/_variables.scss | 6 +++---
> src/proxmox-dark/scss/extjs/_grid.scss | 2 +-
> src/proxmox-dark/scss/extjs/_presentation.scss | 6 +++---
> src/proxmox-dark/scss/proxmox/_helpbutton.scss | 3 ++-
> 4 files changed, 9 insertions(+), 8 deletions(-)
>
applied series, thanks!
^ permalink raw reply [flat|nested] 6+ messages in thread
end of thread, other threads:[~2023-03-20 13:08 UTC | newest]
Thread overview: 6+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2023-03-20 9:02 [pve-devel] [PATCH widget-toolkit 0/4] Dark Theme Fix-ups Round 3 Stefan Sterz
2023-03-20 9:02 ` [pve-devel] [PATCH widget-toolkit 1/4] dark-theme: improve help button contrast ratios in focused state Stefan Sterz
2023-03-20 9:02 ` [pve-devel] [PATCH widget-toolkit 2/4] dark-theme: make "sorted-by" header highlight more subtle Stefan Sterz
2023-03-20 9:02 ` [pve-devel] [PATCH widget-toolkit 3/4] dark-theme: dim warning and invalid colors more Stefan Sterz
2023-03-20 9:02 ` [pve-devel] [PATCH widget-toolkit 4/4] dark-theme: let the background "shine through" mask more Stefan Sterz
2023-03-20 13:08 ` [pve-devel] applied: [PATCH widget-toolkit 0/4] Dark Theme Fix-ups Round 3 Thomas Lamprecht
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal