From: Shannon Sterz <s.sterz@proxmox.com>
To: yew-devel@lists.proxmox.com
Subject: [PATCH yew-widget-toolkit-assets 3/3] docs: run `make refresh`
Date: Thu, 5 Mar 2026 12:21:57 +0100 [thread overview]
Message-ID: <20260305112158.220557-4-s.sterz@proxmox.com> (raw)
In-Reply-To: <20260305112158.220557-1-s.sterz@proxmox.com>
Signed-off-by: Shannon Sterz <s.sterz@proxmox.com>
---
Documentation.md | 26 ++++++-
docs/css/crisp-yew-style.css | 115 +++++++++++++++++++++++------
docs/css/desktop-yew-style.css | 115 +++++++++++++++++++++++------
docs/css/material-yew-style.css | 126 +++++++++++++++++++++++++-------
4 files changed, 306 insertions(+), 76 deletions(-)
diff --git a/Documentation.md b/Documentation.md
index c37d823..8d139d5 100644
--- a/Documentation.md
+++ b/Documentation.md
@@ -108,6 +108,10 @@ changes the colors of the widget. The `pwt-scheme-<name>` and
`pwt-scheme-<name>-container` helper classes can be used to set
those variables.
+There is also the `pwt-default-colors` class to set the `color` and
+`background-color` properties directly to the `--pwt-color` and
+`--pwt-color-background` respectively.
+
A similar scheme is used for widgets with an associated accent color, using
the following CSS variables:
@@ -234,6 +238,8 @@ This theme uses the [material design baseline colors](https://m3.material.io/sty
- use elevated box with box-shadow
+`pwt-side-dialog-bottom`
+: overwrite corner radius
### The "Crisp" Theme
@@ -397,6 +403,7 @@ For the following elevation levels: 0, 1, 2, 3, 4, 5
- `pwt-opacity-<value>`: set `opacity` property to percentage for values in
- 0, 25, 50, 75, 100
+- `pwt-delay-visibility`: delay visibility by animating opacity from 0 to 1
## Content Spacer Class
@@ -456,9 +463,26 @@ The following classes can be used to adopt the button style for mobile/touch dev
##### FAB Menus
+Class `pwt-fab-menu-outer`
+
+This class is used to arrange the FAB and the menu.
+
+Class `pwt-fab-menu-main`
+
+This class is the container for the main button, and uses for aligning
+the close button correctly for different directions and sizes.
+
Class `pwt-fab-menu-container`
-This class is used to arrange FABs as a menu.
+This class is the container for the fab menu items.
+
+Classes `pwt-fab-direction-{up,down}`
+
+These are used to control the layout of the FAB to the menu and the direction of the animations
+
+Classes `pwt-fab-align-{start,end}`
+
+These are used to align the button according to the alignment
## Panel Widget
diff --git a/docs/css/crisp-yew-style.css b/docs/css/crisp-yew-style.css
index 3f2f310..7485308 100644
--- a/docs/css/crisp-yew-style.css
+++ b/docs/css/crisp-yew-style.css
@@ -359,6 +359,11 @@ table {
--pwt-state-layer-opacity-5: 14%;
}
+/* Opacity of elements in certain states. */
+:root {
+ --pwt-disabled-opacity: 0.38;
+}
+
/* Font setup */
@font-face {
font-family: "Roboto Flex";
@@ -4013,7 +4018,7 @@ h6,
--pwt-color-background: var(--pwt-color-inverse-surface) ;
--pwt-color: var(--pwt-color-on-inverse-surface) ;
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
button,
@@ -4049,7 +4054,7 @@ button,
}
.pwt-button.disabled, .pwt-button:disabled, .pwt-button[aria-disabled=true] {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
box-shadow: var(--pwt-color-shadow) 0px calc(var(--pwt-elevation-level-0) / 2) var(--pwt-elevation-level-0);
}
.pwt-button.disabled:not(.pwt-button-text), .pwt-button:disabled:not(.pwt-button-text), .pwt-button[aria-disabled=true]:not(.pwt-button-text) {
@@ -4815,6 +4820,68 @@ tr.row-cursor {
cursor: pointer;
}
+.pwt-date-panel {
+ display: grid;
+ text-align: center;
+ align-items: center;
+}
+.pwt-date-panel .pwt-date-panel-item {
+ font-family: "Roboto Flex";
+ font-size: 14px;
+ font-weight: 500;
+ font-variation-settings: "opsz" 14, "wdth" 110, "wght" 500;
+ line-height: 17px;
+ --pwt-color-background: var(--pwt-color-neutral) ;
+ --pwt-color: var(--pwt-color-on-neutral) ;
+ color: var(--pwt-color);
+ background-color: var(--pwt-color-background);
+ cursor: pointer;
+ padding: var(--pwt-spacer-1);
+ border-radius: var(--pwt-shape-corner-small) !important;
+ min-width: 2em;
+}
+.pwt-date-panel .pwt-date-panel-item:hover {
+ --pwt-elevated-background-color: color-mix( in srgb, var(--pwt-color) var(--pwt-state-layer-opacity-hover), var(--pwt-color-background) );
+ background-color: var(--pwt-elevated-background-color);
+}
+.pwt-date-panel .pwt-date-panel-item:focus, .pwt-date-panel .pwt-date-panel-item.focused {
+ outline: 2px solid var(--pwt-color-on-surface);
+ outline-offset: -2px;
+}
+.pwt-date-panel .pwt-date-panel-item.selected {
+ --pwt-color-background: var(--pwt-color-primary) ;
+ --pwt-color: var(--pwt-color-on-primary) ;
+}
+.pwt-date-panel .pwt-date-panel-item.disabled {
+ opacity: var(--pwt-disabled-opacity);
+ cursor: default !important;
+}
+.pwt-date-panel .pwt-date-panel-item.other-month {
+ opacity: 0.5;
+}
+.pwt-date-panel .pwt-date-panel-item.pwt-today {
+ --pwt-color-background: var(--pwt-color-secondary-container) ;
+ --pwt-color: var(--pwt-color-on-secondary-container) ;
+}
+.pwt-date-panel .pwt-date-panel-header {
+ font-family: "Roboto Flex";
+ font-size: 11px;
+ font-weight: 400;
+ font-variation-settings: "opsz" 11, "wdth" 100, "wght" 400;
+ line-height: 14px;
+ opacity: 0.5;
+ padding: var(--pwt-spacer-1);
+}
+.pwt-date-panel .pwt-date-panel-week-number {
+ font-family: "Roboto Flex";
+ font-size: 11px;
+ font-weight: 400;
+ font-variation-settings: "opsz" 11, "wdth" 100, "wght" 400;
+ line-height: 14px;
+ opacity: 0.5;
+ padding: var(--pwt-spacer-1);
+}
+
dialog.pwt-outer-dialog {
overflow: visible;
background-color: transparent;
@@ -4862,33 +4929,33 @@ dialog.pwt-outer-dialog > .pwt-dialog {
touch-action: none;
}
.pwt-dialog .dialog-resize-handle.west, .pwt-dialog .dialog-resize-handle.east, .pwt-dialog .dialog-resize-handle.north-east, .pwt-dialog .dialog-resize-handle.north-west, .pwt-dialog .dialog-resize-handle.south-east, .pwt-dialog .dialog-resize-handle.south-west {
- width: 5px;
+ width: var(--pwt-spacer-2);
}
.pwt-dialog .dialog-resize-handle.north, .pwt-dialog .dialog-resize-handle.south, .pwt-dialog .dialog-resize-handle.north-east, .pwt-dialog .dialog-resize-handle.north-west, .pwt-dialog .dialog-resize-handle.south-east, .pwt-dialog .dialog-resize-handle.south-west {
- height: 5px;
+ height: var(--pwt-spacer-2);
}
.pwt-dialog .dialog-resize-handle.west {
- top: 5px;
- bottom: 5px;
+ top: var(--pwt-spacer-2);
+ bottom: var(--pwt-spacer-2);
left: 0px;
cursor: w-resize;
}
.pwt-dialog .dialog-resize-handle.east {
- top: 5px;
- bottom: 5px;
+ top: var(--pwt-spacer-2);
+ bottom: var(--pwt-spacer-2);
right: 0px;
cursor: e-resize;
}
.pwt-dialog .dialog-resize-handle.north {
top: 0px;
- left: 5px;
- right: 5px;
+ left: var(--pwt-spacer-2);
+ right: var(--pwt-spacer-2);
cursor: n-resize;
}
.pwt-dialog .dialog-resize-handle.south {
bottom: 0px;
- left: 5px;
- right: 5px;
+ left: var(--pwt-spacer-2);
+ right: var(--pwt-spacer-2);
cursor: s-resize;
}
.pwt-dialog .dialog-resize-handle.north-west {
@@ -5153,7 +5220,7 @@ input[aria-disabled=true] {
}
.pwt-input.disabled, .pwt-input:disabled, .pwt-input[aria-disabled=true] {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
.pwt-input.pwt-input-type-number .spinner i {
@@ -5180,7 +5247,7 @@ input[aria-disabled=true] {
}
.pwt-label-disabled {
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
.pwt-switch {
@@ -5234,7 +5301,7 @@ input[aria-disabled=true] {
}
.pwt-switch.disabled {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
.pwt-checkbox-state {
@@ -5288,7 +5355,7 @@ input[aria-disabled=true] {
}
.pwt-checkbox.disabled {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
.pwt-checkbox.disabled.checked {
color: var(--pwt-color);
@@ -5329,7 +5396,7 @@ input[aria-disabled=true] {
}
.pwt-radio-button.disabled {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
.pwt-textarea {
@@ -5357,7 +5424,7 @@ input[aria-disabled=true] {
}
.pwt-textarea.disabled, .pwt-textarea:disabled {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
.pwt-input-display {
@@ -5475,7 +5542,7 @@ ul.pwt-menubar .pwt-menubar-item:focus-visible {
}
ul.pwt-menubar .pwt-menubar-item[disabled], ul.pwt-menubar .pwt-menubar-item[aria-disabled=true] {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
ul.pwt-menubar .pwt-menubar-item-icon {
font-size: 16px;
@@ -5513,7 +5580,7 @@ ul.pwt-menu .pwt-menu-item {
}
ul.pwt-menu .pwt-menu-item[disabled], ul.pwt-menu .pwt-menu-item[aria-disabled=true] {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
ul.pwt-menu .pwt-menu-item:focus-visible {
outline: 2px solid var(--pwt-color-focus);
@@ -5653,7 +5720,7 @@ ul.pwt-menu .pwt-menu-item-arrow:dir(rtl) {
}
.pwt-mini-scroll .pwt-mini-scroll-left-arrow.visible.disabled {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
.pwt-mini-scroll .pwt-mini-scroll-right-arrow {
overflow: hidden;
@@ -5678,7 +5745,7 @@ ul.pwt-menu .pwt-menu-item-arrow:dir(rtl) {
}
.pwt-mini-scroll .pwt-mini-scroll-right-arrow.visible.disabled {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
/* Miscellaneous helper classes */
@@ -5888,7 +5955,7 @@ a:focus-within, a:hover {
background-color: var(--pwt-elevated-background-color);
}
.pwt-nav-pills .pwt-nav-link.disabled {
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
cursor: auto;
}
.pwt-nav-pills a {
@@ -5945,7 +6012,7 @@ a:focus-within, a:hover {
color: var(--pwt-color-primary);
}
.pwt-tab-material .pwt-nav-link.disabled {
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
cursor: auto;
}
.pwt-tab-material a {
diff --git a/docs/css/desktop-yew-style.css b/docs/css/desktop-yew-style.css
index 9304118..a388821 100644
--- a/docs/css/desktop-yew-style.css
+++ b/docs/css/desktop-yew-style.css
@@ -366,6 +366,11 @@ table {
--pwt-state-layer-opacity-5: 14%;
}
+/* Opacity of elements in certain states. */
+:root {
+ --pwt-disabled-opacity: 0.38;
+}
+
/* Font setup */
@font-face {
font-family: "Roboto Flex";
@@ -4020,7 +4025,7 @@ h6,
--pwt-color-background: var(--pwt-color-inverse-surface) ;
--pwt-color: var(--pwt-color-on-inverse-surface) ;
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
button,
@@ -4056,7 +4061,7 @@ button,
}
.pwt-button.disabled, .pwt-button:disabled, .pwt-button[aria-disabled=true] {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
box-shadow: var(--pwt-color-shadow) 0px calc(var(--pwt-elevation-level-0) / 2) var(--pwt-elevation-level-0);
}
.pwt-button.disabled:not(.pwt-button-text), .pwt-button:disabled:not(.pwt-button-text), .pwt-button[aria-disabled=true]:not(.pwt-button-text) {
@@ -4822,6 +4827,68 @@ tr.row-cursor {
cursor: pointer;
}
+.pwt-date-panel {
+ display: grid;
+ text-align: center;
+ align-items: center;
+}
+.pwt-date-panel .pwt-date-panel-item {
+ font-family: "Roboto Flex";
+ font-size: 14px;
+ font-weight: 500;
+ font-variation-settings: "opsz" 14, "wdth" 110, "wght" 500;
+ line-height: 20px;
+ --pwt-color-background: var(--pwt-color-neutral) ;
+ --pwt-color: var(--pwt-color-on-neutral) ;
+ color: var(--pwt-color);
+ background-color: var(--pwt-color-background);
+ cursor: pointer;
+ padding: var(--pwt-spacer-1);
+ border-radius: var(--pwt-shape-corner-small) !important;
+ min-width: 2em;
+}
+.pwt-date-panel .pwt-date-panel-item:hover {
+ --pwt-elevated-background-color: color-mix( in srgb, var(--pwt-color) var(--pwt-state-layer-opacity-hover), var(--pwt-color-background) );
+ background-color: var(--pwt-elevated-background-color);
+}
+.pwt-date-panel .pwt-date-panel-item:focus, .pwt-date-panel .pwt-date-panel-item.focused {
+ outline: 2px solid var(--pwt-color-on-surface);
+ outline-offset: -2px;
+}
+.pwt-date-panel .pwt-date-panel-item.selected {
+ --pwt-color-background: var(--pwt-color-primary) ;
+ --pwt-color: var(--pwt-color-on-primary) ;
+}
+.pwt-date-panel .pwt-date-panel-item.disabled {
+ opacity: var(--pwt-disabled-opacity);
+ cursor: default !important;
+}
+.pwt-date-panel .pwt-date-panel-item.other-month {
+ opacity: 0.5;
+}
+.pwt-date-panel .pwt-date-panel-item.pwt-today {
+ --pwt-color-background: var(--pwt-color-secondary-container) ;
+ --pwt-color: var(--pwt-color-on-secondary-container) ;
+}
+.pwt-date-panel .pwt-date-panel-header {
+ font-family: "Roboto Flex";
+ font-size: 11px;
+ font-weight: 500;
+ font-variation-settings: "opsz" 11, "wdth" 130, "wght" 500;
+ line-height: 16px;
+ opacity: 0.5;
+ padding: var(--pwt-spacer-1);
+}
+.pwt-date-panel .pwt-date-panel-week-number {
+ font-family: "Roboto Flex";
+ font-size: 11px;
+ font-weight: 500;
+ font-variation-settings: "opsz" 11, "wdth" 130, "wght" 500;
+ line-height: 16px;
+ opacity: 0.5;
+ padding: var(--pwt-spacer-1);
+}
+
dialog.pwt-outer-dialog {
overflow: visible;
background-color: transparent;
@@ -4869,33 +4936,33 @@ dialog.pwt-outer-dialog > .pwt-dialog {
touch-action: none;
}
.pwt-dialog .dialog-resize-handle.west, .pwt-dialog .dialog-resize-handle.east, .pwt-dialog .dialog-resize-handle.north-east, .pwt-dialog .dialog-resize-handle.north-west, .pwt-dialog .dialog-resize-handle.south-east, .pwt-dialog .dialog-resize-handle.south-west {
- width: 5px;
+ width: var(--pwt-spacer-2);
}
.pwt-dialog .dialog-resize-handle.north, .pwt-dialog .dialog-resize-handle.south, .pwt-dialog .dialog-resize-handle.north-east, .pwt-dialog .dialog-resize-handle.north-west, .pwt-dialog .dialog-resize-handle.south-east, .pwt-dialog .dialog-resize-handle.south-west {
- height: 5px;
+ height: var(--pwt-spacer-2);
}
.pwt-dialog .dialog-resize-handle.west {
- top: 5px;
- bottom: 5px;
+ top: var(--pwt-spacer-2);
+ bottom: var(--pwt-spacer-2);
left: 0px;
cursor: w-resize;
}
.pwt-dialog .dialog-resize-handle.east {
- top: 5px;
- bottom: 5px;
+ top: var(--pwt-spacer-2);
+ bottom: var(--pwt-spacer-2);
right: 0px;
cursor: e-resize;
}
.pwt-dialog .dialog-resize-handle.north {
top: 0px;
- left: 5px;
- right: 5px;
+ left: var(--pwt-spacer-2);
+ right: var(--pwt-spacer-2);
cursor: n-resize;
}
.pwt-dialog .dialog-resize-handle.south {
bottom: 0px;
- left: 5px;
- right: 5px;
+ left: var(--pwt-spacer-2);
+ right: var(--pwt-spacer-2);
cursor: s-resize;
}
.pwt-dialog .dialog-resize-handle.north-west {
@@ -5160,7 +5227,7 @@ input[aria-disabled=true] {
}
.pwt-input.disabled, .pwt-input:disabled, .pwt-input[aria-disabled=true] {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
.pwt-input.pwt-input-type-number .spinner i {
@@ -5187,7 +5254,7 @@ input[aria-disabled=true] {
}
.pwt-label-disabled {
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
.pwt-switch {
@@ -5241,7 +5308,7 @@ input[aria-disabled=true] {
}
.pwt-switch.disabled {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
.pwt-checkbox-state {
@@ -5295,7 +5362,7 @@ input[aria-disabled=true] {
}
.pwt-checkbox.disabled {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
.pwt-checkbox.disabled.checked {
color: var(--pwt-color);
@@ -5336,7 +5403,7 @@ input[aria-disabled=true] {
}
.pwt-radio-button.disabled {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
.pwt-textarea {
@@ -5364,7 +5431,7 @@ input[aria-disabled=true] {
}
.pwt-textarea.disabled, .pwt-textarea:disabled {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
.pwt-input-display {
@@ -5482,7 +5549,7 @@ ul.pwt-menubar .pwt-menubar-item:focus-visible {
}
ul.pwt-menubar .pwt-menubar-item[disabled], ul.pwt-menubar .pwt-menubar-item[aria-disabled=true] {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
ul.pwt-menubar .pwt-menubar-item-icon {
font-size: 16px;
@@ -5520,7 +5587,7 @@ ul.pwt-menu .pwt-menu-item {
}
ul.pwt-menu .pwt-menu-item[disabled], ul.pwt-menu .pwt-menu-item[aria-disabled=true] {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
ul.pwt-menu .pwt-menu-item:focus-visible {
outline: 2px solid var(--pwt-color-focus);
@@ -5660,7 +5727,7 @@ ul.pwt-menu .pwt-menu-item-arrow:dir(rtl) {
}
.pwt-mini-scroll .pwt-mini-scroll-left-arrow.visible.disabled {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
.pwt-mini-scroll .pwt-mini-scroll-right-arrow {
overflow: hidden;
@@ -5685,7 +5752,7 @@ ul.pwt-menu .pwt-menu-item-arrow:dir(rtl) {
}
.pwt-mini-scroll .pwt-mini-scroll-right-arrow.visible.disabled {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
/* Miscellaneous helper classes */
@@ -5895,7 +5962,7 @@ a:focus-within, a:hover {
background-color: var(--pwt-elevated-background-color);
}
.pwt-nav-pills .pwt-nav-link.disabled {
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
cursor: auto;
}
.pwt-nav-pills a {
@@ -5952,7 +6019,7 @@ a:focus-within, a:hover {
color: var(--pwt-color-primary);
}
.pwt-tab-material .pwt-nav-link.disabled {
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
cursor: auto;
}
.pwt-tab-material a {
diff --git a/docs/css/material-yew-style.css b/docs/css/material-yew-style.css
index 112e241..b43c220 100644
--- a/docs/css/material-yew-style.css
+++ b/docs/css/material-yew-style.css
@@ -366,6 +366,11 @@ table {
--pwt-state-layer-opacity-5: 14%;
}
+/* Opacity of elements in certain states. */
+:root {
+ --pwt-disabled-opacity: 0.38;
+}
+
/* Font setup */
@font-face {
font-family: "Roboto Flex";
@@ -4020,7 +4025,7 @@ h6,
--pwt-color-background: var(--pwt-color-inverse-surface) ;
--pwt-color: var(--pwt-color-on-inverse-surface) ;
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
button,
@@ -4056,7 +4061,7 @@ button,
}
.pwt-button.disabled, .pwt-button:disabled, .pwt-button[aria-disabled=true] {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
box-shadow: var(--pwt-color-shadow) 0px calc(var(--pwt-elevation-level-0) / 2) var(--pwt-elevation-level-0);
}
.pwt-button.disabled:not(.pwt-button-text), .pwt-button:disabled:not(.pwt-button-text), .pwt-button[aria-disabled=true]:not(.pwt-button-text) {
@@ -4822,6 +4827,68 @@ tr.row-cursor {
cursor: pointer;
}
+.pwt-date-panel {
+ display: grid;
+ text-align: center;
+ align-items: center;
+}
+.pwt-date-panel .pwt-date-panel-item {
+ font-family: "Roboto Flex";
+ font-size: 14px;
+ font-weight: 500;
+ font-variation-settings: "opsz" 14, "wdth" 110, "wght" 500;
+ line-height: 20px;
+ --pwt-color-background: var(--pwt-color-neutral) ;
+ --pwt-color: var(--pwt-color-on-neutral) ;
+ color: var(--pwt-color);
+ background-color: var(--pwt-color-background);
+ cursor: pointer;
+ padding: var(--pwt-spacer-1);
+ border-radius: var(--pwt-shape-corner-small) !important;
+ min-width: 2em;
+}
+.pwt-date-panel .pwt-date-panel-item:hover {
+ --pwt-elevated-background-color: color-mix( in srgb, var(--pwt-color) var(--pwt-state-layer-opacity-hover), var(--pwt-color-background) );
+ background-color: var(--pwt-elevated-background-color);
+}
+.pwt-date-panel .pwt-date-panel-item:focus, .pwt-date-panel .pwt-date-panel-item.focused {
+ outline: 2px solid var(--pwt-color-on-surface);
+ outline-offset: -2px;
+}
+.pwt-date-panel .pwt-date-panel-item.selected {
+ --pwt-color-background: var(--pwt-color-primary) ;
+ --pwt-color: var(--pwt-color-on-primary) ;
+}
+.pwt-date-panel .pwt-date-panel-item.disabled {
+ opacity: var(--pwt-disabled-opacity);
+ cursor: default !important;
+}
+.pwt-date-panel .pwt-date-panel-item.other-month {
+ opacity: 0.5;
+}
+.pwt-date-panel .pwt-date-panel-item.pwt-today {
+ --pwt-color-background: var(--pwt-color-secondary-container) ;
+ --pwt-color: var(--pwt-color-on-secondary-container) ;
+}
+.pwt-date-panel .pwt-date-panel-header {
+ font-family: "Roboto Flex";
+ font-size: 11px;
+ font-weight: 500;
+ font-variation-settings: "opsz" 11, "wdth" 130, "wght" 500;
+ line-height: 16px;
+ opacity: 0.5;
+ padding: var(--pwt-spacer-1);
+}
+.pwt-date-panel .pwt-date-panel-week-number {
+ font-family: "Roboto Flex";
+ font-size: 11px;
+ font-weight: 500;
+ font-variation-settings: "opsz" 11, "wdth" 130, "wght" 500;
+ line-height: 16px;
+ opacity: 0.5;
+ padding: var(--pwt-spacer-1);
+}
+
dialog.pwt-outer-dialog {
overflow: visible;
background-color: transparent;
@@ -4869,33 +4936,33 @@ dialog.pwt-outer-dialog > .pwt-dialog {
touch-action: none;
}
.pwt-dialog .dialog-resize-handle.west, .pwt-dialog .dialog-resize-handle.east, .pwt-dialog .dialog-resize-handle.north-east, .pwt-dialog .dialog-resize-handle.north-west, .pwt-dialog .dialog-resize-handle.south-east, .pwt-dialog .dialog-resize-handle.south-west {
- width: 5px;
+ width: var(--pwt-spacer-2);
}
.pwt-dialog .dialog-resize-handle.north, .pwt-dialog .dialog-resize-handle.south, .pwt-dialog .dialog-resize-handle.north-east, .pwt-dialog .dialog-resize-handle.north-west, .pwt-dialog .dialog-resize-handle.south-east, .pwt-dialog .dialog-resize-handle.south-west {
- height: 5px;
+ height: var(--pwt-spacer-2);
}
.pwt-dialog .dialog-resize-handle.west {
- top: 5px;
- bottom: 5px;
+ top: var(--pwt-spacer-2);
+ bottom: var(--pwt-spacer-2);
left: 0px;
cursor: w-resize;
}
.pwt-dialog .dialog-resize-handle.east {
- top: 5px;
- bottom: 5px;
+ top: var(--pwt-spacer-2);
+ bottom: var(--pwt-spacer-2);
right: 0px;
cursor: e-resize;
}
.pwt-dialog .dialog-resize-handle.north {
top: 0px;
- left: 5px;
- right: 5px;
+ left: var(--pwt-spacer-2);
+ right: var(--pwt-spacer-2);
cursor: n-resize;
}
.pwt-dialog .dialog-resize-handle.south {
bottom: 0px;
- left: 5px;
- right: 5px;
+ left: var(--pwt-spacer-2);
+ right: var(--pwt-spacer-2);
cursor: s-resize;
}
.pwt-dialog .dialog-resize-handle.north-west {
@@ -5160,7 +5227,7 @@ input[aria-disabled=true] {
}
.pwt-input.disabled, .pwt-input:disabled, .pwt-input[aria-disabled=true] {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
.pwt-input.pwt-input-type-number .spinner i {
@@ -5187,7 +5254,7 @@ input[aria-disabled=true] {
}
.pwt-label-disabled {
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
.pwt-switch {
@@ -5241,7 +5308,7 @@ input[aria-disabled=true] {
}
.pwt-switch.disabled {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
.pwt-checkbox-state {
@@ -5295,7 +5362,7 @@ input[aria-disabled=true] {
}
.pwt-checkbox.disabled {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
.pwt-checkbox.disabled.checked {
color: var(--pwt-color);
@@ -5336,7 +5403,7 @@ input[aria-disabled=true] {
}
.pwt-radio-button.disabled {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
.pwt-textarea {
@@ -5364,7 +5431,7 @@ input[aria-disabled=true] {
}
.pwt-textarea.disabled, .pwt-textarea:disabled {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
.pwt-input-display {
@@ -5482,7 +5549,7 @@ ul.pwt-menubar .pwt-menubar-item:focus-visible {
}
ul.pwt-menubar .pwt-menubar-item[disabled], ul.pwt-menubar .pwt-menubar-item[aria-disabled=true] {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
ul.pwt-menubar .pwt-menubar-item-icon {
font-size: 16px;
@@ -5520,7 +5587,7 @@ ul.pwt-menu .pwt-menu-item {
}
ul.pwt-menu .pwt-menu-item[disabled], ul.pwt-menu .pwt-menu-item[aria-disabled=true] {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
ul.pwt-menu .pwt-menu-item:focus-visible {
outline: 2px solid var(--pwt-color-focus);
@@ -5660,7 +5727,7 @@ ul.pwt-menu .pwt-menu-item-arrow:dir(rtl) {
}
.pwt-mini-scroll .pwt-mini-scroll-left-arrow.visible.disabled {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
.pwt-mini-scroll .pwt-mini-scroll-right-arrow {
overflow: hidden;
@@ -5685,7 +5752,7 @@ ul.pwt-menu .pwt-menu-item-arrow:dir(rtl) {
}
.pwt-mini-scroll .pwt-mini-scroll-right-arrow.visible.disabled {
cursor: auto;
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
}
/* Miscellaneous helper classes */
@@ -5895,7 +5962,7 @@ a:focus-within, a:hover {
background-color: var(--pwt-elevated-background-color);
}
.pwt-nav-pills .pwt-nav-link.disabled {
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
cursor: auto;
}
.pwt-nav-pills a {
@@ -5952,7 +6019,7 @@ a:focus-within, a:hover {
color: var(--pwt-color-primary);
}
.pwt-tab-material .pwt-nav-link.disabled {
- opacity: 0.5;
+ opacity: var(--pwt-disabled-opacity);
cursor: auto;
}
.pwt-tab-material a {
@@ -6754,13 +6821,18 @@ ul.pwt-menubar {
}
.pwt-tab-material .pwt-nav-link span {
display: flex;
- flex-direction: column;
align-items: center;
- gap: 0;
}
-.pwt-tab-material .pwt-nav-link span:before {
+.pwt-tab-material.primary .pwt-nav-link span {
+ gap: 0;
+ flex-direction: column;
+}
+.pwt-tab-material.primary .pwt-nav-link span:before {
font-size: 20px;
}
+.pwt-tab-material.secondary span {
+ flex-direction: row;
+}
.pwt-datatable-content:not(.table-borderless) tr {
border-color: var(--pwt-elevated-background-color);
--
2.47.3
next prev parent reply other threads:[~2026-03-05 11:21 UTC|newest]
Thread overview: 6+ messages / expand[flat|nested] mbox.gz Atom feed top
2026-03-05 11:21 [PATCH yew-widget-toolkit/yew-widget-toolkit-assets 0/4] yew ui tweaks Shannon Sterz
2026-03-05 11:21 ` [PATCH yew-widget-toolkit-assets 1/3] dialog: allow resize handle to fill the padding space in dialogs Shannon Sterz
2026-03-05 11:21 ` [PATCH yew-widget-toolkit-assets 2/3] tree-wide: replace the disabled opacity with a variable and decrease it Shannon Sterz
2026-03-05 11:21 ` Shannon Sterz [this message]
2026-03-05 11:21 ` [PATCH yew-widget-toolkit 1/1] gridpicker/combobox: allow autoselecting the filter field Shannon Sterz
2026-03-05 12:54 ` applied: [PATCH yew-widget-toolkit/yew-widget-toolkit-assets 0/4] yew ui tweaks Dominik Csapak
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20260305112158.220557-4-s.sterz@proxmox.com \
--to=s.sterz@proxmox.com \
--cc=yew-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox