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 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.