@digitalwalletcorp/vue-core 1.4.5 → 1.4.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -0
- package/lib/style.css +1 -1
- package/package.json +1 -1
- package/src/data-table.vue +6 -7
- package/src/screen-loading.vue +9 -1
- package/src/tab-content.vue +5 -5
package/README.md
CHANGED
|
@@ -148,6 +148,12 @@ Components automatically adapt to your application's color-scheme (supporting bo
|
|
|
148
148
|
|
|
149
149
|
Default styles use CSS variables (`--dwui-*`) and zero-specificity selectors (`:where()`), making them easy to override. The variables of each component are listed in its document. [docs/dwui-variables.css](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/dwui-variables.css) lists all of them with their default values, grouped by the component they apply to. Copy the lines you want to change into your own `dwui-variables.css`.
|
|
150
150
|
|
|
151
|
+
The following default styles do not use `:where()`. To override them, use a CSS rule with higher specificity.
|
|
152
|
+
|
|
153
|
+
| Component | Style | Reason |
|
|
154
|
+
| --------- | ----- | ------ |
|
|
155
|
+
| [`ScreenLoading`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/screen-loading.md) | `outline` on focus | The loading does not accept user interaction, so it does not show a focus ring. |
|
|
156
|
+
|
|
151
157
|
We recommend creating a `dwui-variables.css` file to map your application's design tokens to the library's `--dwui-*` variables, and importing it after the library stylesheet. If you use both `vue-forms` and `vue-core`, you can use a single `dwui-variables.css` file for both libraries, as they share common variables like those for focus rings.
|
|
152
158
|
|
|
153
159
|
```css
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:where(.dwui-label-icon){display:inline-block}:where(.dwui-label-icon>.dwui-label){display:inline-block}:where(.dwui-label-icon>.dwui-label:not(:first-child)){margin-left:var(--dwui-gap-label-icon, .25em)}:where(.dwui-accordion-fieldset){position:relative}:where(.dwui-accordion-toggle){display:inline-flex;align-items:center;gap:.33em;margin-left:.33em;padding:0;border:none;background:none;color:inherit;cursor:pointer}:where(.dwui-accordion-toggle:disabled){opacity:.6;cursor:not-allowed}:where(.dwui-accordion-toggle:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-accordion-contents){position:relative;width:fit-content;padding:.17em;overflow:hidden;opacity:1}:where(.dwui-accordion-contents.dwui-expanded){transition:all .3s linear}:where(.dwui-accordion-contents.dwui-shrunk){height:auto;max-height:70px;opacity:.75;transition:all .3s linear}:where(.dwui-accordion-section){position:relative}:where(.dwui-accordion-section-contents){position:relative;width:fit-content;overflow:hidden}:where(.dwui-accordion-section-contents.dwui-expanded){transition:all .3s linear}:where(.dwui-accordion-section-contents.dwui-shrunk){height:auto;max-height:70px;transition:all .3s linear}:where(.dwui-accordion-section-contents.dwui-shrunk:not(.dwui-no-gradient)):after{content:"";position:absolute;inset:0;background-image:linear-gradient(180deg,transparent 0%,transparent 60%,var(--dwui-color-accordion-section-fade, Canvas) 100%);pointer-events:none}:where(.dwui-accordion-section-control){position:relative;display:flex;justify-content:center;width:100%}:where(.dwui-accordion-section-toggle){display:inline-flex;align-items:center;padding:0;border:none;background:none;color:inherit;cursor:pointer}:where(.dwui-accordion-section-toggle:disabled){opacity:.6;cursor:not-allowed}:where(.dwui-accordion-section-toggle:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-accordion-section-toggle[aria-expanded=true]){margin-top:.67em}:where(.dwui-accordion-section-toggle[aria-expanded=false]){margin-top:-.83em}:where(.dwui-snackbar-container){position:fixed;right:0;left:0;z-index:var(--dwui-z-index-snackbar, 7000);display:flex;gap:var(--dwui-gap-snackbar-container, .33em);box-sizing:border-box;padding:var(--dwui-padding-snackbar-container, .33em);pointer-events:none}:where(.dwui-snackbar-container>*){pointer-events:auto}:where(.dwui-snackbar-container-top){top:0}:where(.dwui-snackbar-container-bottom){bottom:0}:where(.dwui-snackbar-container-overlap){display:grid;grid-template-columns:auto auto;column-gap:0;align-items:center;justify-content:center}:where(.dwui-snackbar-container-overlap.dwui-snackbar-container-start){justify-content:start}:where(.dwui-snackbar-container-overlap.dwui-snackbar-container-end){justify-content:end}:where(.dwui-snackbar-container-overlap>.dwui-snackbar){grid-area:1 / 2}:where(.dwui-snackbar-container-overlap>.dwui-snackbar-clear-button){grid-area:1 / 1;margin-right:var(--dwui-gap-snackbar-container, .33em)}:where(.dwui-snackbar-container-column){flex-direction:column;align-items:center}:where(.dwui-snackbar-container-column.dwui-snackbar-container-start){align-items:flex-start}:where(.dwui-snackbar-container-column.dwui-snackbar-container-end){align-items:flex-end}:where(.dwui-snackbar-container-row){flex-wrap:wrap;align-items:center;justify-content:center}:where(.dwui-snackbar-container-row.dwui-snackbar-container-start){justify-content:flex-start}:where(.dwui-snackbar-container-row.dwui-snackbar-container-end){justify-content:flex-end}:where(.dwui-snackbar){display:block;box-sizing:border-box;width:var(--dwui-width-snackbar, 300px);max-width:100%;padding:var(--dwui-padding-snackbar, .5em .67em);border:none;border-radius:var(--dwui-radius-snackbar, 0);background:var(--dwui-background-snackbar, #323232);color:var(--dwui-color-text-snackbar, #ffffff);box-shadow:var(--dwui-box-shadow-snackbar, 4px 4px 3px 0 rgba(0, 0, 0, .25));font:inherit;text-align:left;cursor:pointer}:where(.dwui-snackbar:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-snackbar-header){display:flex;gap:.67em;color:var(--dwui-color-text-snackbar-header, #d3d3d3);font-size:.8em}:where(.dwui-snackbar-label){margin-left:auto}:where(.dwui-snackbar-message){display:block;padding-left:.33em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where(.dwui-snackbar-timestamp){display:block;color:var(--dwui-color-text-snackbar-timestamp, #d3d3d3);font-size:.8em;text-align:right}:where(.dwui-snackbar-clear-button){display:inline-flex;align-items:center;justify-content:center;padding:.17em;border:none;border-radius:4px;background-color:transparent;background-image:none;color:var(--dwui-color-text-snackbar-clear-button, inherit);font:inherit;cursor:pointer}:where(.dwui-snackbar-clear-button:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-snackbar-fade-enter-active,.dwui-snackbar-fade-leave-active){transition:opacity .5s ease}:where(.dwui-snackbar-fade-enter-from,.dwui-snackbar-fade-leave-to){opacity:0}:where(.dwui-copy-button){display:inline-flex;align-items:center;justify-content:center;padding:.17em;border:none;border-radius:4px;background-color:transparent;background-image:none;color:inherit;font:inherit;line-height:0;cursor:pointer}:where(.dwui-copy-button:not(:disabled):hover){background:var(--dwui-background-copy-button-hover, light-dark(rgba(0, 0, 0, .08), rgba(255, 255, 255, .12)))}:where(.dwui-copy-button:not(:disabled):active){transform:translate(1px,1px)}:where(.dwui-copy-button:disabled){opacity:.4;cursor:not-allowed}:where(.dwui-copy-button:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-dark-mode-selector){position:relative;display:inline-block;vertical-align:top;width:3.85em;height:1.65em;padding:0;border:none;border-radius:.85em;background-color:transparent;background-image:none;color:inherit;font:inherit;line-height:0;cursor:pointer}:where(.dwui-dark-mode-selector-track){position:relative;display:block;height:inherit;border-radius:inherit;background:var(--dwui-background-dark-mode-selector, azure);box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026;font-size:.85em;transition:background .15s ease-out}:where(.dwui-dark-mode-selector[aria-checked=true]>.dwui-dark-mode-selector-track){background:var(--dwui-background-dark-mode-selector-checked, darkslategray);box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}:where(.dwui-dark-mode-selector-icon-light,.dwui-dark-mode-selector-icon-dark){position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;line-height:1;transition:opacity .15s ease-out}:where(.dwui-dark-mode-selector-icon-light){right:.6em}:where(.dwui-dark-mode-selector-icon-dark){left:.6em;opacity:0}:where(.dwui-dark-mode-selector[aria-checked=true] .dwui-dark-mode-selector-icon-light){opacity:0}:where(.dwui-dark-mode-selector[aria-checked=true] .dwui-dark-mode-selector-icon-dark){opacity:1}:where(.dwui-dark-mode-selector-handle){position:absolute;top:.075em;left:0;width:1.5em;height:1.5em;border-radius:.75em;background:var(--dwui-background-dark-mode-selector-handle, linear-gradient(.25turn, #888484 0%, #b4abab 50%, #888484 100%));box-shadow:1px 1px 5px #0003;transition:left .15s ease-out}:where(.dwui-dark-mode-selector[aria-checked=true]>.dwui-dark-mode-selector-handle){left:2.275em;box-shadow:-1px 1px 5px #0003}:where(.dwui-dark-mode-selector:disabled){opacity:.5;cursor:not-allowed}:where(.dwui-dark-mode-selector:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-pagination){display:flex;align-items:center;gap:.67em;white-space:nowrap}:where(.dwui-pagination-list){display:flex;align-self:stretch;align-items:stretch;gap:.25em;margin:0;padding:0;list-style:none}:where(.dwui-pagination-list li){display:flex}:where(.dwui-pagination-list button){display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;aspect-ratio:1;padding:0;border:1px solid var(--dwui-border-color-pagination-button, light-dark(#d3d3d3, #5a5a5a));border-radius:3px;background:var(--dwui-background-pagination-button, light-dark(#fafafa, #2a2a2a));color:var(--dwui-color-text-pagination-button, inherit);font:inherit;line-height:1;cursor:pointer;transition:background-color .3s ease}:where(.dwui-pagination-list button:disabled){opacity:.4;cursor:not-allowed}:where(.dwui-pagination-list button:not(:disabled,.dwui-current):hover){background:var(--dwui-background-pagination-button-hover, light-dark(#46e2f7, #1f7a86))}:where(.dwui-pagination-list .dwui-current){background:var(--dwui-background-pagination-button-current, linear-gradient(rgba(78, 221, 231, .7), rgba(34, 162, 172, .7)));color:var(--dwui-color-text-pagination-button-current, inherit);cursor:default}:where(.dwui-pagination-list button:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-pagination-select){display:inline-flex;align-self:stretch;align-items:center;gap:.33em}:where(.dwui-pagination-select select){align-self:stretch}:where(.dwui-data-table-controls){display:flex;flex-wrap:wrap;align-items:stretch;justify-content:space-between;gap:.33em .67em;margin:.33em 0}:where(.dwui-data-table-tools){display:flex;align-items:center;justify-content:flex-end;gap:.33em;margin-left:auto;white-space:nowrap}:where(.dwui-data-table-total){margin-right:.67em}:where(.dwui-data-table-total-count){margin:0 .5em;color:var(--dwui-color-text-data-table-total-count, inherit);font-weight:var(--dwui-font-weight-data-table-total-count, bold)}:where(.dwui-data-table-limit){display:inline-flex;align-self:stretch;align-items:center;gap:.33em}:where(.dwui-data-table-limit input){align-self:stretch;width:60px}:where(.dwui-data-table-tools button){display:inline-flex;align-self:stretch;align-items:center;justify-content:center;box-sizing:border-box;aspect-ratio:1;padding:0;border:1px solid var(--dwui-border-color-data-table-button, light-dark(#d3d3d3, #5a5a5a));border-radius:3px;background:var(--dwui-background-data-table-button, light-dark(#fafafa, #2a2a2a));color:var(--dwui-color-text-data-table-button, inherit);font:inherit;cursor:pointer}:where(.dwui-data-table-tools button svg){width:auto;height:85%}:where(.dwui-data-table-tools button:hover){background:var(--dwui-background-data-table-button-hover, light-dark(#e8e8e8, #3a3a3a))}:where(.dwui-data-table-tools button:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-data-table-content){position:relative;overflow:auto}:where(.dwui-data-table-content:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:calc(var(--dwui-outline-width-focus-ring, 2px) * -1)}:where(.dwui-data-table-content.dwui-loading){min-height:var(--dwui-height-data-table-loading, 120px)}:where(.dwui-data-table table){border-collapse:separate;border-spacing:0;width:100%}:where(.dwui-data-table th){position:sticky;top:0;z-index:1;padding:.33em 0;border:1px solid var(--dwui-border-color-data-table, light-dark(#818181, #5a5a5a));border-right:none;background:var(--dwui-background-data-table-header, light-dark(#e8e8e8, #3a3a3a));color:var(--dwui-color-text-data-table-header, inherit);text-align:center;white-space:nowrap}:where(.dwui-data-table th:last-child){border-right:1px solid var(--dwui-border-color-data-table, light-dark(#818181, #5a5a5a))}:where(.dwui-data-table-sort){display:inline-flex;align-items:center;gap:.17em}:where(.dwui-data-table-sort[role=button]){cursor:pointer}:where(.dwui-data-table-sort:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-data-table-resizer){position:absolute;top:0;right:0;width:10px;height:100%;cursor:col-resize;touch-action:none}:where(.dwui-data-table td){padding:.25em;border-top:1px dotted var(--dwui-border-color-data-table, light-dark(#818181, #5a5a5a));border-left:1px dotted var(--dwui-border-color-data-table, light-dark(#818181, #5a5a5a));line-height:1.2em;word-break:break-all}:where(.dwui-data-table tbody tr:first-child td){border-top:none}:where(.dwui-data-table tbody tr:last-child td){border-bottom:1px dotted var(--dwui-border-color-data-table, light-dark(#818181, #5a5a5a))}:where(.dwui-data-table td:last-child){border-right:1px dotted var(--dwui-border-color-data-table, light-dark(#818181, #5a5a5a))}:where(.dwui-data-table tbody tr:nth-child(odd)){background:var(--dwui-background-data-table-row-odd, light-dark(#ffffff, #1e1e1e));transition:background-color 1s ease}:where(.dwui-data-table tbody tr:nth-child(2n)){background:var(--dwui-background-data-table-row-even, light-dark(#f4f4f4, #262626));transition:background-color 1s ease}:where(.dwui-data-table.dwui-selectable tbody tr){cursor:pointer}:where(.dwui-data-table tbody tr:not(.dwui-selected,.dwui-data-table-no-data):hover){background:var(--dwui-background-data-table-row-hover, light-dark(#e0f7fa, #2f4f4f))}:where(.dwui-data-table tbody tr.dwui-selected){background:var(--dwui-background-data-table-row-selected, light-dark(#fff3b0, #5a4a00))}:where(.dwui-data-table-no-data td){padding:.83em 0;color:var(--dwui-color-text-data-table-no-data, light-dark(#808080, #a0a0a0));text-align:center;cursor:default}:where(.dwui-data-table-loading){position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:var(--dwui-overlay-color-loading, light-dark(rgba(0, 0, 0, .25), rgba(0, 0, 0, .45)))}:where(.dwui-data-table-loading-spinner){width:var(--dwui-size-loading-spinner, 40px);height:var(--dwui-size-loading-spinner, 40px);border:4px solid var(--dwui-border-color-loading-spinner, rgba(255, 255, 255, .4));border-top-color:var(--dwui-border-color-loading-spinner-accent, #ffffff);border-radius:50%;animation:dwui-data-table-loading-spin .8s linear infinite}@keyframes dwui-data-table-loading-spin{to{transform:rotate(360deg)}}:where(.dwui-anchored-popover){inset:auto;display:flex;flex-direction:column;box-sizing:border-box;max-width:var(--dwui-max-width-anchored-popover, calc(100vw - 16px) );max-height:var(--dwui-max-height-anchored-popover, calc(100vh - 16px) );margin:0;padding:0;border:1px solid var(--dwui-border-color-anchored-popover, light-dark(#8f8f8f, #6b6f76));border-radius:var(--dwui-radius-anchored-popover, 4px);background:var(--dwui-background-anchored-popover, Canvas);color:var(--dwui-color-text-anchored-popover, CanvasText);box-shadow:var(--dwui-box-shadow-anchored-popover, 0 2px 8px rgba(0, 0, 0, .25));font:inherit;visibility:hidden;overflow:visible}:where(.dwui-anchored-popover-content){min-height:0;padding:var(--dwui-padding-anchored-popover, .67em 1em);overflow:auto}:where(.dwui-anchored-popover.dwui-arrow):before{content:"";position:absolute;width:10px;height:10px;box-sizing:border-box;border:1px solid var(--dwui-border-color-anchored-popover, light-dark(#8f8f8f, #6b6f76));background:var(--dwui-background-anchored-popover-arrow, var(--dwui-background-anchored-popover, Canvas));transform:rotate(45deg)}:where(.dwui-anchored-popover.dwui-arrow[data-side=bottom]):before{top:-6px;left:calc(var(--dwui-offset-arrow) - 6px);border-right-color:transparent;border-bottom-color:transparent}:where(.dwui-anchored-popover.dwui-arrow[data-side=top]):before{bottom:-6px;left:calc(var(--dwui-offset-arrow) - 6px);border-top-color:transparent;border-left-color:transparent}:where(.dwui-anchored-popover.dwui-arrow[data-side=right]):before{top:calc(var(--dwui-offset-arrow) - 6px);left:-6px;border-top-color:transparent;border-right-color:transparent}:where(.dwui-anchored-popover.dwui-arrow[data-side=left]):before{top:calc(var(--dwui-offset-arrow) - 6px);right:-6px;border-bottom-color:transparent;border-left-color:transparent}:where(.dwui-help-button){display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;padding:.17em;border:none;border-radius:4px;background-color:transparent;background-image:none;color:inherit;font:inherit;cursor:pointer}:where(.dwui-help-button:not(:disabled):hover){background:var(--dwui-background-help-button-hover, light-dark(rgba(0, 0, 0, .08), rgba(255, 255, 255, .12)))}:where(.dwui-help-button:not(:disabled):active){transform:translate(1px,1px)}:where(.dwui-help-button:disabled){opacity:.4;cursor:not-allowed}:where(.dwui-help-button:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-help-button-popover){--dwui-max-width-anchored-popover: var(--dwui-max-width-help-button-popover, calc(100vw - 16px) );--dwui-max-height-anchored-popover: var(--dwui-max-height-help-button-popover, calc(100vh - 16px) );--dwui-padding-anchored-popover: var(--dwui-padding-help-button-popover, .67em 1em);--dwui-border-color-anchored-popover: var(--dwui-border-color-help-button-popover, light-dark(#8f8f8f, #6b6f76));--dwui-radius-anchored-popover: var(--dwui-radius-help-button-popover, 4px);--dwui-background-anchored-popover: var(--dwui-background-help-button-popover, Canvas);--dwui-background-anchored-popover-arrow: var(--dwui-background-help-button-popover-arrow, var(--dwui-background-help-button-popover, Canvas));--dwui-color-text-anchored-popover: var(--dwui-color-text-help-button-popover, CanvasText);--dwui-box-shadow-anchored-popover: var(--dwui-box-shadow-help-button-popover, 0 2px 8px rgba(0, 0, 0, .25))}:where(.dwui-icon-popper){display:inline-flex;align-items:center;vertical-align:middle;cursor:help}:where(.dwui-icon-popper:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-help-popper-popover){--dwui-max-width-anchored-popover: var(--dwui-max-width-help-popper, calc(100vw - 16px) );--dwui-max-height-anchored-popover: var(--dwui-max-height-help-popper, calc(100vh - 16px) );--dwui-padding-anchored-popover: var(--dwui-padding-help-popper, .67em 1em);--dwui-border-color-anchored-popover: var(--dwui-border-color-help-popper, light-dark(#8f8f8f, #6b6f76));--dwui-radius-anchored-popover: var(--dwui-radius-help-popper, 4px);--dwui-background-anchored-popover: var(--dwui-background-help-popper, Canvas);--dwui-background-anchored-popover-arrow: var(--dwui-background-help-popper-arrow, var(--dwui-background-help-popper, Canvas));--dwui-color-text-anchored-popover: var(--dwui-color-text-help-popper, CanvasText);--dwui-box-shadow-anchored-popover: var(--dwui-box-shadow-help-popper, 0 2px 8px rgba(0, 0, 0, .25))}:where(.dwui-hourglass-loading){animation:dwui-hourglass-loading-spin 1.2s linear infinite}@keyframes dwui-hourglass-loading-spin{to{transform:rotate(360deg)}}:where(.dwui-label-button){display:inline-block;padding:.17em .5em;border:1px solid var(--dwui-border-color-label-button, light-dark(#8f8f8f, #6b6f76));border-radius:3px;background:var(--dwui-background-label-button, light-dark(#f4f4f4, #3a3c40));color:var(--dwui-color-text-label-button, light-dark(#1a1a1a, #e6e6e6));font:inherit;cursor:pointer}:where(.dwui-label-button:not(:disabled):hover){background:var(--dwui-background-label-button-hover, light-dark(#e6e6e6, #474a50))}:where(.dwui-label-button:not(:disabled):active){background:var(--dwui-background-label-button-active, light-dark(#d6d6d6, #2f3135))}:where(.dwui-label-button:disabled){opacity:.6;cursor:not-allowed}:where(.dwui-label-button:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-modal-dialog){box-sizing:border-box;width:var(--dwui-width-modal-dialog, 50vw);min-width:min(320px,100%);padding:var(--dwui-padding-modal-dialog, 1.67em 2.5em);border:1px solid var(--dwui-border-color-modal-dialog, light-dark(#8f8f8f, #6b6f76));border-radius:var(--dwui-radius-modal-dialog, 4px);background:var(--dwui-background-modal-dialog, Canvas);color:var(--dwui-color-text-modal-dialog, CanvasText);box-shadow:var(--dwui-box-shadow-modal-dialog, 0 2px 8px rgba(0, 0, 0, .33))}:where(.dwui-modal-dialog)::backdrop{background:var(--dwui-background-modal-dialog-backdrop, rgba(0, 0, 0, .5))}:where(.dwui-modal-dialog-header){display:flex;align-items:center;gap:.33em}:where(.dwui-modal-dialog-icon){display:flex;flex:none;font-size:var(--dwui-font-size-modal-dialog-icon, 1.83em)}:where(.dwui-modal-dialog-body){padding:.83em;overflow-wrap:anywhere}:where(.dwui-modal-dialog-body p),:where(.dwui-modal-dialog-body pre){margin:0;white-space:pre-wrap}:where(.dwui-modal-dialog-body pre){font:inherit}:where(.dwui-modal-dialog-images){display:flex;flex-wrap:wrap;gap:.33em;margin-top:.67em}:where(.dwui-modal-dialog-images img){width:var(--dwui-width-modal-dialog-image, 200px);max-width:100%;height:auto}:where(.dwui-modal-dialog-buttons){display:flex;justify-content:space-evenly;padding:.83em}:where(.dwui-modal-dialog-button){min-width:var(--dwui-min-width-modal-dialog-button, 80px);padding:.25em .83em;border:1px solid var(--dwui-border-color-modal-dialog-button, light-dark(#8f8f8f, #6b6f76));border-radius:3px;background:var(--dwui-background-modal-dialog-button, light-dark(#f4f4f4, #3a3c40));color:var(--dwui-color-text-modal-dialog-button, light-dark(#1a1a1a, #e6e6e6));font:inherit;cursor:pointer}:where(.dwui-modal-dialog-button:not(:disabled):hover){background:var(--dwui-background-modal-dialog-button-hover, light-dark(#e6e6e6, #474a50))}:where(.dwui-modal-dialog-button:not(:disabled):active){background:var(--dwui-background-modal-dialog-button-active, light-dark(#d6d6d6, #2f3135))}:where(.dwui-modal-dialog-button:disabled){opacity:.6;cursor:not-allowed}:where(.dwui-modal-dialog-button:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-movable-window){position:absolute;display:flex;flex-direction:column;box-sizing:border-box;min-width:var(--dwui-min-width-movable-window, auto);max-height:var(--dwui-max-height-movable-window, none);border:1px solid var(--dwui-border-color-movable-window, light-dark(#8f8f8f, #6b6f76));border-radius:var(--dwui-radius-movable-window, 4px);background:var(--dwui-background-movable-window, Canvas);color:var(--dwui-color-text-movable-window, CanvasText);box-shadow:var(--dwui-box-shadow-movable-window, 0 2px 8px rgba(0, 0, 0, .33));outline:none;overflow:hidden}:where(.dwui-movable-window-frame){display:flex;flex:1 1 auto;flex-direction:column;min-height:0}:where(.dwui-movable-window-header){display:flex;flex:0 0 auto;align-items:center;gap:.33em;padding:var(--dwui-padding-movable-window-header, .17em .33em);border-bottom:1px solid var(--dwui-border-color-movable-window, light-dark(#8f8f8f, #6b6f76));background:var(--dwui-background-movable-window-header, transparent);color:var(--dwui-color-text-movable-window-header, inherit)}:where(.dwui-movable-window-title){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where(.dwui-movable-window-close-button){display:inline-flex;align-items:center;justify-content:center;padding:.17em;border:none;border-radius:4px;background-color:transparent;background-image:none;color:inherit;font:inherit;cursor:pointer}:where(.dwui-movable-window-close-button:hover){background:var(--dwui-background-movable-window-close-button-hover, light-dark(rgba(0, 0, 0, .08), rgba(255, 255, 255, .12)))}:where(.dwui-movable-window-close-button:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-movable-window-body){flex:1 1 auto;box-sizing:border-box;min-height:0;padding:var(--dwui-padding-movable-window-body, .4em);overflow:auto}:where(.dwui-movable-window-header.dwui-movable,.dwui-movable-window-body.dwui-movable){cursor:move;touch-action:none}:where(.dwui-movable-window-header.dwui-movable){user-select:none}:where(.dwui-movable-window-resizer){position:absolute;right:0;bottom:0;width:18px;height:18px;color:var(--dwui-color-text-movable-window-resizer, GrayText);cursor:nwse-resize;touch-action:none}:where(.dwui-movable-window-resizer>svg){display:block;pointer-events:none}:where(.dwui-movable-window-corner){position:absolute;width:18px;height:18px;touch-action:none}:where(.dwui-movable-window-corner.dwui-top-left){top:0;left:0;clip-path:polygon(0 0,100% 0,100% 6px,6px 6px,6px 100%,0 100%);cursor:nwse-resize}:where(.dwui-movable-window-corner.dwui-top-right){top:0;right:0;clip-path:polygon(0 0,100% 0,100% 100%,calc(100% - 6px) 100%,calc(100% - 6px) 6px,0 6px);cursor:nesw-resize}:where(.dwui-movable-window-corner.dwui-bottom-left){bottom:0;left:0;clip-path:polygon(0 0,6px 0,6px calc(100% - 6px),100% calc(100% - 6px),100% 100%,0 100%);cursor:nesw-resize}:where(.dwui-movable-window-loading){position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:var(--dwui-background-movable-window-loading, light-dark(rgba(0, 0, 0, .15), rgba(0, 0, 0, .4)))}:where(.dwui-movable-window-spinner){box-sizing:border-box;width:var(--dwui-size-movable-window-spinner, 48px);height:var(--dwui-size-movable-window-spinner, 48px);border:6px solid var(--dwui-border-color-movable-window-spinner, light-dark(rgba(0, 0, 0, .15), rgba(255, 255, 255, .2)));border-left-color:var(--dwui-border-color-movable-window-spinner-accent, light-dark(rgba(47, 90, 74, .8), rgba(140, 200, 170, .8)));border-radius:50%;animation:dwui-movable-window-spin 1.1s linear infinite}@keyframes dwui-movable-window-spin{to{transform:rotate(360deg)}}:where(html:has(.dwui-overlay-box),html:has(.dwui-overlay-box)>body){overflow:hidden}:where(.dwui-overlay-box){position:fixed;inset:0;z-index:calc(var(--dwui-z-index-overlay-box, 5000) + var(--dwui-order-window, 0))}:where(.dwui-overlay-box-backdrop){position:absolute;inset:0;background:var(--dwui-background-overlay-box-backdrop, light-dark(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)))}:where(.dwui-overlay-box-container){--dwui-border-color-movable-window: var(--dwui-border-color-overlay-box, light-dark(#8f8f8f, #6b6f76));--dwui-radius-movable-window: var(--dwui-radius-overlay-box, 4px);--dwui-background-movable-window: var(--dwui-background-overlay-box, Canvas);--dwui-color-text-movable-window: var(--dwui-color-text-overlay-box, CanvasText);--dwui-box-shadow-movable-window: var(--dwui-box-shadow-overlay-box, 0 2px 8px rgba(0, 0, 0, .33));--dwui-padding-movable-window-header: var(--dwui-padding-overlay-box-header, .17em .33em);--dwui-background-movable-window-header: var(--dwui-background-overlay-box-header, transparent);--dwui-color-text-movable-window-header: var(--dwui-color-text-overlay-box-header, inherit);--dwui-background-movable-window-close-button-hover: var(--dwui-background-overlay-box-close-button-hover, light-dark(rgba(0, 0, 0, .08), rgba(255, 255, 255, .12)));--dwui-padding-movable-window-body: var(--dwui-padding-overlay-box-body, .4em);--dwui-color-text-movable-window-resizer: var(--dwui-color-text-overlay-box-resizer, GrayText);--dwui-background-movable-window-loading: var(--dwui-background-overlay-box-loading, light-dark(rgba(0, 0, 0, .15), rgba(0, 0, 0, .4)));--dwui-size-movable-window-spinner: var(--dwui-size-overlay-box-spinner, 48px);--dwui-border-color-movable-window-spinner: var(--dwui-border-color-overlay-box-spinner, light-dark(rgba(0, 0, 0, .15), rgba(255, 255, 255, .2)));--dwui-border-color-movable-window-spinner-accent: var(--dwui-border-color-overlay-box-spinner-accent, light-dark(rgba(47, 90, 74, .8), rgba(140, 200, 170, .8)))}:where(.dwui-overlay-box-fade-enter-active,.dwui-overlay-box-fade-leave-active){transition:opacity .25s ease}:where(.dwui-overlay-box-fade-enter-from,.dwui-overlay-box-fade-leave-to){opacity:0}:where(.dwui-page-section){display:block;margin:.33em 0 .67em;padding-top:.17em;font-size:var(--dwui-font-size-page-section, inherit);font-weight:500}:where(.dwui-page-section-title){display:flex;align-items:center;font-size:var(--dwui-font-size-page-section-title, 1.17em)}:where(.dwui-page-section-content){margin:.67em 0 .67em 1.33em}:where(.dwui-page-title){display:flex;align-items:center;justify-content:space-between;width:var(--dwui-width-page-title, auto);padding:.33em;border-radius:4px;background:var(--dwui-background-page-title, linear-gradient(light-dark(#323232, #3c3f45) 0%, light-dark(rgb(32, 32, 31), #2b2d31) 25%, light-dark(rgb(32, 32, 31), #2b2d31) 75%, light-dark(#323232, #3c3f45) 100%));color:var(--dwui-color-text-page-title, rgb(220, 220, 220));font-size:var(--dwui-font-size-page-title, 1.17em);font-weight:var(--dwui-font-weight-page-title, normal)}:where(.dwui-screen-loading){padding:0;border:none;outline:none;background-color:transparent;background-image:none;overflow:visible}:where(.dwui-screen-loading::backdrop){background:var(--dwui-background-screen-loading, light-dark(rgba(0, 0, 0, .25), rgba(0, 0, 0, .5)))}:where(.dwui-screen-loading-spinner){box-sizing:border-box;width:var(--dwui-size-screen-loading-spinner, 100px);height:var(--dwui-size-screen-loading-spinner, 100px);border:8px solid var(--dwui-border-color-screen-loading-spinner, light-dark(rgba(0, 0, 0, .15), rgba(255, 255, 255, .2)));border-left-color:var(--dwui-border-color-screen-loading-spinner-accent, light-dark(rgba(47, 90, 74, .8), rgba(140, 200, 170, .8)));border-radius:50%;animation:dwui-screen-loading-spin 1.1s linear infinite}@keyframes dwui-screen-loading-spin{to{transform:rotate(360deg)}}:where(.dwui-tab-content[hidden]){display:none}:where(.dwui-tab-content[aria-checked=true]){display:block;position:relative;padding:.33em .67em;overflow:hidden;animation:dwui-tab-slide-in var(--dwui-duration-tab-slide, .35s) var(--dwui-easing-tab-slide, cubic-bezier(.22, 1, .36, 1))}:where(.dwui-tab-loading){position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:var(--dwui-overlay-color-loading, light-dark(rgba(0, 0, 0, .25), rgba(0, 0, 0, .45)))}:where(.dwui-tab-loading-spinner){width:var(--dwui-size-loading-spinner, 40px);height:var(--dwui-size-loading-spinner, 40px);border:4px solid var(--dwui-border-color-loading-spinner, rgba(255, 255, 255, .4));border-top-color:var(--dwui-border-color-loading-spinner-accent, #ffffff);border-radius:50%;animation:dwui-tab-loading-spin .8s linear infinite}@keyframes dwui-tab-loading-spin{to{transform:rotate(360deg)}}@keyframes dwui-tab-slide-in{0%{opacity:0;transform:translate(var(--dwui-distance-tab-slide, -128px))}to{opacity:1;transform:translate(0)}}:where(.dwui-tab-group){margin-bottom:.67em}:where(.dwui-tab-headers){display:flex;flex-direction:row;flex-wrap:wrap;position:relative;margin-top:.4em;padding-bottom:.33em}:where(.dwui-tab-radio){position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}:where(.dwui-tab-item){display:block;min-width:100px;padding:0 .33em;border:1px solid var(--dwui-border-color-tab, light-dark(#565656, #8a8a8a));border-bottom:1px solid var(--dwui-border-color-tab-header-accent, #5ab4bd);background:var(--dwui-background-tab-header, linear-gradient(light-dark(#1313c7, #2a3a8f), light-dark(navy, #141c4d)));line-height:2em;text-align:center;white-space:nowrap;color:var(--dwui-color-text-tab-header, azure);text-overflow:ellipsis;cursor:pointer;transition:all .2s ease}:where(.dwui-tab-radio:checked+.dwui-tab-item){background:var(--dwui-background-tab-header-selected, linear-gradient(light-dark(#1313c7, #2a3a8f), light-dark(rgb(149, 149, 234), #5a62b8), light-dark(#1313c7, #2a3a8f)));color:var(--dwui-color-text-tab-header-selected, azure);cursor:default}:where(.dwui-tab-radio:disabled+.dwui-tab-item){background:var(--dwui-background-tab-header-disabled, light-dark(gray, #4a4a4a));cursor:not-allowed}:where(.dwui-tab-item.dwui-tab-warn){background:var(--dwui-background-tab-header-warn, light-dark(#efef13, #8a8a10));color:var(--dwui-color-text-tab-header-warn, light-dark(midnightblue, #fffbd0))}:where(.dwui-tab-radio:checked+.dwui-tab-item.dwui-tab-warn){background:var(--dwui-background-tab-header-warn-selected, linear-gradient(light-dark(#fafa06, #8a8a10), light-dark(rgb(232, 238, 206), #a8a860), light-dark(#fafa06, #8a8a10)))}:where(.dwui-tab-item.dwui-tab-error){background:var(--dwui-background-tab-header-error, light-dark(red, #a01818));color:var(--dwui-color-text-tab-header-error, azure)}:where(.dwui-tab-radio:checked+.dwui-tab-item.dwui-tab-error){background:var(--dwui-background-tab-header-error-selected, linear-gradient(light-dark(#ff0000, #a01818), light-dark(rgb(240, 136, 136), #c86060), light-dark(#ff0000, #a01818)))}:where(.dwui-tab-radio:not(:checked)+.dwui-tab-item:hover){box-shadow:inset 0 0 0 999px var(--dwui-overlay-color-tab-header-hover, light-dark(rgba(255, 255, 255, .35), rgba(255, 255, 255, .15)))}:where(.dwui-tab-radio:focus-visible+.dwui-tab-item){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-tab-items){height:100%;border:1px solid var(--dwui-border-color-tab, light-dark(#565656, #8a8a8a));overflow:hidden}:where(.dwui-warning-popper-popover){--dwui-max-width-anchored-popover: var(--dwui-max-width-warning-popper, calc(100vw - 16px) );--dwui-max-height-anchored-popover: var(--dwui-max-height-warning-popper, calc(100vh - 16px) );--dwui-padding-anchored-popover: var(--dwui-padding-warning-popper, .67em 1em);--dwui-border-color-anchored-popover: var(--dwui-border-color-warning-popper, light-dark(#8f8f8f, #6b6f76));--dwui-radius-anchored-popover: var(--dwui-radius-warning-popper, 4px);--dwui-background-anchored-popover: var(--dwui-background-warning-popper, Canvas);--dwui-background-anchored-popover-arrow: var(--dwui-background-warning-popper-arrow, var(--dwui-background-warning-popper, Canvas));--dwui-color-text-anchored-popover: var(--dwui-color-text-warning-popper, CanvasText);--dwui-box-shadow-anchored-popover: var(--dwui-box-shadow-warning-popper, 0 2px 8px rgba(0, 0, 0, .25))}:where(html:has(.dwui-floating-component.dwui-lock-scroll),html:has(.dwui-floating-component.dwui-lock-scroll)>body){overflow:hidden}:where(.dwui-floating-component){z-index:calc(var(--dwui-z-index-floating-component, 5000) + var(--dwui-order-window, 0));--dwui-min-width-movable-window: var(--dwui-min-width-floating-component, 200px);--dwui-max-height-movable-window: var(--dwui-max-height-floating-component, 90vh);--dwui-border-color-movable-window: var(--dwui-border-color-floating-component, light-dark(#8f8f8f, #6b6f76));--dwui-radius-movable-window: var(--dwui-radius-floating-component, 4px);--dwui-background-movable-window: var(--dwui-background-floating-component, Canvas);--dwui-color-text-movable-window: var(--dwui-color-text-floating-component, CanvasText);--dwui-box-shadow-movable-window: var(--dwui-box-shadow-floating-component, 0 2px 8px rgba(0, 0, 0, .33));--dwui-padding-movable-window-header: var(--dwui-padding-floating-component-header, .17em .33em);--dwui-background-movable-window-header: var(--dwui-background-floating-component-header, transparent);--dwui-color-text-movable-window-header: var(--dwui-color-text-floating-component-header, inherit);--dwui-background-movable-window-close-button-hover: var(--dwui-background-floating-component-close-button-hover, light-dark(rgba(0, 0, 0, .08), rgba(255, 255, 255, .12)));--dwui-padding-movable-window-body: var(--dwui-padding-floating-component-body, .4em);--dwui-color-text-movable-window-resizer: var(--dwui-color-text-floating-component-resizer, GrayText);--dwui-background-movable-window-loading: var(--dwui-background-floating-component-loading, light-dark(rgba(0, 0, 0, .15), rgba(0, 0, 0, .4)));--dwui-size-movable-window-spinner: var(--dwui-size-floating-component-spinner, 48px);--dwui-border-color-movable-window-spinner: var(--dwui-border-color-floating-component-spinner, light-dark(rgba(0, 0, 0, .15), rgba(255, 255, 255, .2)));--dwui-border-color-movable-window-spinner-accent: var(--dwui-border-color-floating-component-spinner-accent, light-dark(rgba(47, 90, 74, .8), rgba(140, 200, 170, .8)))}:where(.dwui-floating-component-message){overflow-wrap:anywhere;white-space:pre-wrap}:where(.dwui-floating-component-fade-enter-active,.dwui-floating-component-fade-leave-active){transition:opacity .25s ease}:where(.dwui-floating-component-fade-enter-from,.dwui-floating-component-fade-leave-to){opacity:0}
|
|
1
|
+
:where(.dwui-label-icon){display:inline-block}:where(.dwui-label-icon>.dwui-label){display:inline-block}:where(.dwui-label-icon>.dwui-label:not(:first-child)){margin-left:var(--dwui-gap-label-icon, .25em)}:where(.dwui-accordion-fieldset){position:relative}:where(.dwui-accordion-toggle){display:inline-flex;align-items:center;gap:.33em;margin-left:.33em;padding:0;border:none;background:none;color:inherit;cursor:pointer}:where(.dwui-accordion-toggle:disabled){opacity:.6;cursor:not-allowed}:where(.dwui-accordion-toggle:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-accordion-contents){position:relative;width:fit-content;padding:.17em;overflow:hidden;opacity:1}:where(.dwui-accordion-contents.dwui-expanded){transition:all .3s linear}:where(.dwui-accordion-contents.dwui-shrunk){height:auto;max-height:70px;opacity:.75;transition:all .3s linear}:where(.dwui-accordion-section){position:relative}:where(.dwui-accordion-section-contents){position:relative;width:fit-content;overflow:hidden}:where(.dwui-accordion-section-contents.dwui-expanded){transition:all .3s linear}:where(.dwui-accordion-section-contents.dwui-shrunk){height:auto;max-height:70px;transition:all .3s linear}:where(.dwui-accordion-section-contents.dwui-shrunk:not(.dwui-no-gradient)):after{content:"";position:absolute;inset:0;background-image:linear-gradient(180deg,transparent 0%,transparent 60%,var(--dwui-color-accordion-section-fade, Canvas) 100%);pointer-events:none}:where(.dwui-accordion-section-control){position:relative;display:flex;justify-content:center;width:100%}:where(.dwui-accordion-section-toggle){display:inline-flex;align-items:center;padding:0;border:none;background:none;color:inherit;cursor:pointer}:where(.dwui-accordion-section-toggle:disabled){opacity:.6;cursor:not-allowed}:where(.dwui-accordion-section-toggle:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-accordion-section-toggle[aria-expanded=true]){margin-top:.67em}:where(.dwui-accordion-section-toggle[aria-expanded=false]){margin-top:-.83em}:where(.dwui-snackbar-container){position:fixed;right:0;left:0;z-index:var(--dwui-z-index-snackbar, 7000);display:flex;gap:var(--dwui-gap-snackbar-container, .33em);box-sizing:border-box;padding:var(--dwui-padding-snackbar-container, .33em);pointer-events:none}:where(.dwui-snackbar-container>*){pointer-events:auto}:where(.dwui-snackbar-container-top){top:0}:where(.dwui-snackbar-container-bottom){bottom:0}:where(.dwui-snackbar-container-overlap){display:grid;grid-template-columns:auto auto;column-gap:0;align-items:center;justify-content:center}:where(.dwui-snackbar-container-overlap.dwui-snackbar-container-start){justify-content:start}:where(.dwui-snackbar-container-overlap.dwui-snackbar-container-end){justify-content:end}:where(.dwui-snackbar-container-overlap>.dwui-snackbar){grid-area:1 / 2}:where(.dwui-snackbar-container-overlap>.dwui-snackbar-clear-button){grid-area:1 / 1;margin-right:var(--dwui-gap-snackbar-container, .33em)}:where(.dwui-snackbar-container-column){flex-direction:column;align-items:center}:where(.dwui-snackbar-container-column.dwui-snackbar-container-start){align-items:flex-start}:where(.dwui-snackbar-container-column.dwui-snackbar-container-end){align-items:flex-end}:where(.dwui-snackbar-container-row){flex-wrap:wrap;align-items:center;justify-content:center}:where(.dwui-snackbar-container-row.dwui-snackbar-container-start){justify-content:flex-start}:where(.dwui-snackbar-container-row.dwui-snackbar-container-end){justify-content:flex-end}:where(.dwui-snackbar){display:block;box-sizing:border-box;width:var(--dwui-width-snackbar, 300px);max-width:100%;padding:var(--dwui-padding-snackbar, .5em .67em);border:none;border-radius:var(--dwui-radius-snackbar, 0);background:var(--dwui-background-snackbar, #323232);color:var(--dwui-color-text-snackbar, #ffffff);box-shadow:var(--dwui-box-shadow-snackbar, 4px 4px 3px 0 rgba(0, 0, 0, .25));font:inherit;text-align:left;cursor:pointer}:where(.dwui-snackbar:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-snackbar-header){display:flex;gap:.67em;color:var(--dwui-color-text-snackbar-header, #d3d3d3);font-size:.8em}:where(.dwui-snackbar-label){margin-left:auto}:where(.dwui-snackbar-message){display:block;padding-left:.33em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where(.dwui-snackbar-timestamp){display:block;color:var(--dwui-color-text-snackbar-timestamp, #d3d3d3);font-size:.8em;text-align:right}:where(.dwui-snackbar-clear-button){display:inline-flex;align-items:center;justify-content:center;padding:.17em;border:none;border-radius:4px;background-color:transparent;background-image:none;color:var(--dwui-color-text-snackbar-clear-button, inherit);font:inherit;cursor:pointer}:where(.dwui-snackbar-clear-button:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-snackbar-fade-enter-active,.dwui-snackbar-fade-leave-active){transition:opacity .5s ease}:where(.dwui-snackbar-fade-enter-from,.dwui-snackbar-fade-leave-to){opacity:0}:where(.dwui-copy-button){display:inline-flex;align-items:center;justify-content:center;padding:.17em;border:none;border-radius:4px;background-color:transparent;background-image:none;color:inherit;font:inherit;line-height:0;cursor:pointer}:where(.dwui-copy-button:not(:disabled):hover){background:var(--dwui-background-copy-button-hover, light-dark(rgba(0, 0, 0, .08), rgba(255, 255, 255, .12)))}:where(.dwui-copy-button:not(:disabled):active){transform:translate(1px,1px)}:where(.dwui-copy-button:disabled){opacity:.4;cursor:not-allowed}:where(.dwui-copy-button:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-dark-mode-selector){position:relative;display:inline-block;vertical-align:top;width:3.85em;height:1.65em;padding:0;border:none;border-radius:.85em;background-color:transparent;background-image:none;color:inherit;font:inherit;line-height:0;cursor:pointer}:where(.dwui-dark-mode-selector-track){position:relative;display:block;height:inherit;border-radius:inherit;background:var(--dwui-background-dark-mode-selector, azure);box-shadow:inset 0 1px 2px #0000001f,inset 0 0 2px #00000026;font-size:.85em;transition:background .15s ease-out}:where(.dwui-dark-mode-selector[aria-checked=true]>.dwui-dark-mode-selector-track){background:var(--dwui-background-dark-mode-selector-checked, darkslategray);box-shadow:inset 0 1px 2px #00000026,inset 0 0 3px #0003}:where(.dwui-dark-mode-selector-icon-light,.dwui-dark-mode-selector-icon-dark){position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;line-height:1;transition:opacity .15s ease-out}:where(.dwui-dark-mode-selector-icon-light){right:.6em}:where(.dwui-dark-mode-selector-icon-dark){left:.6em;opacity:0}:where(.dwui-dark-mode-selector[aria-checked=true] .dwui-dark-mode-selector-icon-light){opacity:0}:where(.dwui-dark-mode-selector[aria-checked=true] .dwui-dark-mode-selector-icon-dark){opacity:1}:where(.dwui-dark-mode-selector-handle){position:absolute;top:.075em;left:0;width:1.5em;height:1.5em;border-radius:.75em;background:var(--dwui-background-dark-mode-selector-handle, linear-gradient(.25turn, #888484 0%, #b4abab 50%, #888484 100%));box-shadow:1px 1px 5px #0003;transition:left .15s ease-out}:where(.dwui-dark-mode-selector[aria-checked=true]>.dwui-dark-mode-selector-handle){left:2.275em;box-shadow:-1px 1px 5px #0003}:where(.dwui-dark-mode-selector:disabled){opacity:.5;cursor:not-allowed}:where(.dwui-dark-mode-selector:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-pagination){display:flex;align-items:center;gap:.67em;white-space:nowrap}:where(.dwui-pagination-list){display:flex;align-self:stretch;align-items:stretch;gap:.25em;margin:0;padding:0;list-style:none}:where(.dwui-pagination-list li){display:flex}:where(.dwui-pagination-list button){display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;aspect-ratio:1;padding:0;border:1px solid var(--dwui-border-color-pagination-button, light-dark(#d3d3d3, #5a5a5a));border-radius:3px;background:var(--dwui-background-pagination-button, light-dark(#fafafa, #2a2a2a));color:var(--dwui-color-text-pagination-button, inherit);font:inherit;line-height:1;cursor:pointer;transition:background-color .3s ease}:where(.dwui-pagination-list button:disabled){opacity:.4;cursor:not-allowed}:where(.dwui-pagination-list button:not(:disabled,.dwui-current):hover){background:var(--dwui-background-pagination-button-hover, light-dark(#46e2f7, #1f7a86))}:where(.dwui-pagination-list .dwui-current){background:var(--dwui-background-pagination-button-current, linear-gradient(rgba(78, 221, 231, .7), rgba(34, 162, 172, .7)));color:var(--dwui-color-text-pagination-button-current, inherit);cursor:default}:where(.dwui-pagination-list button:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-pagination-select){display:inline-flex;align-self:stretch;align-items:center;gap:.33em}:where(.dwui-pagination-select select){align-self:stretch}:where(.dwui-data-table-controls){display:flex;flex-wrap:wrap;align-items:stretch;justify-content:space-between;gap:.33em .67em;margin:.33em 0}:where(.dwui-data-table-tools){display:flex;align-items:center;justify-content:flex-end;gap:.33em;margin-left:auto;white-space:nowrap}:where(.dwui-data-table-total){margin-right:.67em}:where(.dwui-data-table-total-count){margin:0 .5em;color:var(--dwui-color-text-data-table-total-count, inherit);font-weight:var(--dwui-font-weight-data-table-total-count, bold)}:where(.dwui-data-table-limit){display:inline-flex;align-self:stretch;align-items:center;gap:.33em}:where(.dwui-data-table-limit input){align-self:stretch;width:60px}:where(.dwui-data-table-tools button){display:inline-flex;align-self:stretch;align-items:center;justify-content:center;box-sizing:border-box;aspect-ratio:1;padding:0;border:1px solid var(--dwui-border-color-data-table-button, light-dark(#d3d3d3, #5a5a5a));border-radius:3px;background:var(--dwui-background-data-table-button, light-dark(#fafafa, #2a2a2a));color:var(--dwui-color-text-data-table-button, inherit);font:inherit;cursor:pointer}:where(.dwui-data-table-tools button svg){width:auto;height:85%}:where(.dwui-data-table-tools button:hover){background:var(--dwui-background-data-table-button-hover, light-dark(#e8e8e8, #3a3a3a))}:where(.dwui-data-table-tools button:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-data-table-content){position:relative;overflow:auto}:where(.dwui-data-table-content:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:calc(var(--dwui-outline-width-focus-ring, 2px) * -1)}:where(.dwui-data-table-content.dwui-loading){min-height:var(--dwui-height-data-table-loading, 120px)}:where(.dwui-data-table table){border-collapse:separate;border-spacing:0;width:100%}:where(.dwui-data-table th){position:sticky;top:0;z-index:1;padding:.33em 0;border:1px solid var(--dwui-border-color-data-table, light-dark(#818181, #5a5a5a));border-right:none;background:var(--dwui-background-data-table-header, light-dark(#e8e8e8, #3a3a3a));color:var(--dwui-color-text-data-table-header, inherit);text-align:center;white-space:nowrap}:where(.dwui-data-table th:last-child){border-right:1px solid var(--dwui-border-color-data-table, light-dark(#818181, #5a5a5a))}:where(.dwui-data-table-sort){display:inline-flex;align-items:center;gap:.17em}:where(.dwui-data-table-sort[role=button]){cursor:pointer}:where(.dwui-data-table-sort:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-data-table-resizer){position:absolute;top:0;right:0;width:10px;height:100%;cursor:col-resize;touch-action:none}:where(.dwui-data-table td){padding:.25em;border-top:1px dotted var(--dwui-border-color-data-table, light-dark(#818181, #5a5a5a));border-left:1px dotted var(--dwui-border-color-data-table, light-dark(#818181, #5a5a5a));line-height:1.2em;word-break:break-all}:where(.dwui-data-table tbody tr:first-child td){border-top:none}:where(.dwui-data-table tbody tr:last-child td){border-bottom:1px dotted var(--dwui-border-color-data-table, light-dark(#818181, #5a5a5a))}:where(.dwui-data-table td:last-child){border-right:1px dotted var(--dwui-border-color-data-table, light-dark(#818181, #5a5a5a))}:where(.dwui-data-table tbody tr:nth-child(odd)){background:var(--dwui-background-data-table-row-odd, light-dark(#ffffff, #1e1e1e));transition:background-color 1s ease}:where(.dwui-data-table tbody tr:nth-child(2n)){background:var(--dwui-background-data-table-row-even, light-dark(#f4f4f4, #262626));transition:background-color 1s ease}:where(.dwui-data-table.dwui-selectable tbody tr){cursor:pointer}:where(.dwui-data-table tbody tr:not(.dwui-selected,.dwui-data-table-no-data):hover){background:var(--dwui-background-data-table-row-hover, light-dark(#e0f7fa, #2f4f4f))}:where(.dwui-data-table tbody tr.dwui-selected){background:var(--dwui-background-data-table-row-selected, light-dark(#fff3b0, #5a4a00))}:where(.dwui-data-table-no-data td){padding:.83em 0;color:var(--dwui-color-text-data-table-no-data, light-dark(#808080, #a0a0a0));text-align:center;cursor:default}:where(.dwui-data-table-loading){position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:var(--dwui-overlay-color-data-table-loading, light-dark(rgba(0, 0, 0, .25), rgba(0, 0, 0, .45)))}:where(.dwui-data-table-loading-spinner){width:var(--dwui-size-data-table-loading-spinner, 40px);height:var(--dwui-size-data-table-loading-spinner, 40px);border:var(--dwui-border-width-data-table-loading-spinner, 4px) solid var(--dwui-border-color-data-table-loading-spinner, rgba(255, 255, 255, .4));border-top-color:var(--dwui-border-color-data-table-loading-spinner-accent, #ffffff);border-radius:50%;animation:dwui-data-table-loading-spin .8s linear infinite}@keyframes dwui-data-table-loading-spin{to{transform:rotate(360deg)}}:where(.dwui-anchored-popover){inset:auto;display:flex;flex-direction:column;box-sizing:border-box;max-width:var(--dwui-max-width-anchored-popover, calc(100vw - 16px) );max-height:var(--dwui-max-height-anchored-popover, calc(100vh - 16px) );margin:0;padding:0;border:1px solid var(--dwui-border-color-anchored-popover, light-dark(#8f8f8f, #6b6f76));border-radius:var(--dwui-radius-anchored-popover, 4px);background:var(--dwui-background-anchored-popover, Canvas);color:var(--dwui-color-text-anchored-popover, CanvasText);box-shadow:var(--dwui-box-shadow-anchored-popover, 0 2px 8px rgba(0, 0, 0, .25));font:inherit;visibility:hidden;overflow:visible}:where(.dwui-anchored-popover-content){min-height:0;padding:var(--dwui-padding-anchored-popover, .67em 1em);overflow:auto}:where(.dwui-anchored-popover.dwui-arrow):before{content:"";position:absolute;width:10px;height:10px;box-sizing:border-box;border:1px solid var(--dwui-border-color-anchored-popover, light-dark(#8f8f8f, #6b6f76));background:var(--dwui-background-anchored-popover-arrow, var(--dwui-background-anchored-popover, Canvas));transform:rotate(45deg)}:where(.dwui-anchored-popover.dwui-arrow[data-side=bottom]):before{top:-6px;left:calc(var(--dwui-offset-arrow) - 6px);border-right-color:transparent;border-bottom-color:transparent}:where(.dwui-anchored-popover.dwui-arrow[data-side=top]):before{bottom:-6px;left:calc(var(--dwui-offset-arrow) - 6px);border-top-color:transparent;border-left-color:transparent}:where(.dwui-anchored-popover.dwui-arrow[data-side=right]):before{top:calc(var(--dwui-offset-arrow) - 6px);left:-6px;border-top-color:transparent;border-right-color:transparent}:where(.dwui-anchored-popover.dwui-arrow[data-side=left]):before{top:calc(var(--dwui-offset-arrow) - 6px);right:-6px;border-bottom-color:transparent;border-left-color:transparent}:where(.dwui-help-button){display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;padding:.17em;border:none;border-radius:4px;background-color:transparent;background-image:none;color:inherit;font:inherit;cursor:pointer}:where(.dwui-help-button:not(:disabled):hover){background:var(--dwui-background-help-button-hover, light-dark(rgba(0, 0, 0, .08), rgba(255, 255, 255, .12)))}:where(.dwui-help-button:not(:disabled):active){transform:translate(1px,1px)}:where(.dwui-help-button:disabled){opacity:.4;cursor:not-allowed}:where(.dwui-help-button:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-help-button-popover){--dwui-max-width-anchored-popover: var(--dwui-max-width-help-button-popover, calc(100vw - 16px) );--dwui-max-height-anchored-popover: var(--dwui-max-height-help-button-popover, calc(100vh - 16px) );--dwui-padding-anchored-popover: var(--dwui-padding-help-button-popover, .67em 1em);--dwui-border-color-anchored-popover: var(--dwui-border-color-help-button-popover, light-dark(#8f8f8f, #6b6f76));--dwui-radius-anchored-popover: var(--dwui-radius-help-button-popover, 4px);--dwui-background-anchored-popover: var(--dwui-background-help-button-popover, Canvas);--dwui-background-anchored-popover-arrow: var(--dwui-background-help-button-popover-arrow, var(--dwui-background-help-button-popover, Canvas));--dwui-color-text-anchored-popover: var(--dwui-color-text-help-button-popover, CanvasText);--dwui-box-shadow-anchored-popover: var(--dwui-box-shadow-help-button-popover, 0 2px 8px rgba(0, 0, 0, .25))}:where(.dwui-icon-popper){display:inline-flex;align-items:center;vertical-align:middle;cursor:help}:where(.dwui-icon-popper:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-help-popper-popover){--dwui-max-width-anchored-popover: var(--dwui-max-width-help-popper, calc(100vw - 16px) );--dwui-max-height-anchored-popover: var(--dwui-max-height-help-popper, calc(100vh - 16px) );--dwui-padding-anchored-popover: var(--dwui-padding-help-popper, .67em 1em);--dwui-border-color-anchored-popover: var(--dwui-border-color-help-popper, light-dark(#8f8f8f, #6b6f76));--dwui-radius-anchored-popover: var(--dwui-radius-help-popper, 4px);--dwui-background-anchored-popover: var(--dwui-background-help-popper, Canvas);--dwui-background-anchored-popover-arrow: var(--dwui-background-help-popper-arrow, var(--dwui-background-help-popper, Canvas));--dwui-color-text-anchored-popover: var(--dwui-color-text-help-popper, CanvasText);--dwui-box-shadow-anchored-popover: var(--dwui-box-shadow-help-popper, 0 2px 8px rgba(0, 0, 0, .25))}:where(.dwui-hourglass-loading){animation:dwui-hourglass-loading-spin 1.2s linear infinite}@keyframes dwui-hourglass-loading-spin{to{transform:rotate(360deg)}}:where(.dwui-label-button){display:inline-block;padding:.17em .5em;border:1px solid var(--dwui-border-color-label-button, light-dark(#8f8f8f, #6b6f76));border-radius:3px;background:var(--dwui-background-label-button, light-dark(#f4f4f4, #3a3c40));color:var(--dwui-color-text-label-button, light-dark(#1a1a1a, #e6e6e6));font:inherit;cursor:pointer}:where(.dwui-label-button:not(:disabled):hover){background:var(--dwui-background-label-button-hover, light-dark(#e6e6e6, #474a50))}:where(.dwui-label-button:not(:disabled):active){background:var(--dwui-background-label-button-active, light-dark(#d6d6d6, #2f3135))}:where(.dwui-label-button:disabled){opacity:.6;cursor:not-allowed}:where(.dwui-label-button:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-modal-dialog){box-sizing:border-box;width:var(--dwui-width-modal-dialog, 50vw);min-width:min(320px,100%);padding:var(--dwui-padding-modal-dialog, 1.67em 2.5em);border:1px solid var(--dwui-border-color-modal-dialog, light-dark(#8f8f8f, #6b6f76));border-radius:var(--dwui-radius-modal-dialog, 4px);background:var(--dwui-background-modal-dialog, Canvas);color:var(--dwui-color-text-modal-dialog, CanvasText);box-shadow:var(--dwui-box-shadow-modal-dialog, 0 2px 8px rgba(0, 0, 0, .33))}:where(.dwui-modal-dialog)::backdrop{background:var(--dwui-background-modal-dialog-backdrop, rgba(0, 0, 0, .5))}:where(.dwui-modal-dialog-header){display:flex;align-items:center;gap:.33em}:where(.dwui-modal-dialog-icon){display:flex;flex:none;font-size:var(--dwui-font-size-modal-dialog-icon, 1.83em)}:where(.dwui-modal-dialog-body){padding:.83em;overflow-wrap:anywhere}:where(.dwui-modal-dialog-body p),:where(.dwui-modal-dialog-body pre){margin:0;white-space:pre-wrap}:where(.dwui-modal-dialog-body pre){font:inherit}:where(.dwui-modal-dialog-images){display:flex;flex-wrap:wrap;gap:.33em;margin-top:.67em}:where(.dwui-modal-dialog-images img){width:var(--dwui-width-modal-dialog-image, 200px);max-width:100%;height:auto}:where(.dwui-modal-dialog-buttons){display:flex;justify-content:space-evenly;padding:.83em}:where(.dwui-modal-dialog-button){min-width:var(--dwui-min-width-modal-dialog-button, 80px);padding:.25em .83em;border:1px solid var(--dwui-border-color-modal-dialog-button, light-dark(#8f8f8f, #6b6f76));border-radius:3px;background:var(--dwui-background-modal-dialog-button, light-dark(#f4f4f4, #3a3c40));color:var(--dwui-color-text-modal-dialog-button, light-dark(#1a1a1a, #e6e6e6));font:inherit;cursor:pointer}:where(.dwui-modal-dialog-button:not(:disabled):hover){background:var(--dwui-background-modal-dialog-button-hover, light-dark(#e6e6e6, #474a50))}:where(.dwui-modal-dialog-button:not(:disabled):active){background:var(--dwui-background-modal-dialog-button-active, light-dark(#d6d6d6, #2f3135))}:where(.dwui-modal-dialog-button:disabled){opacity:.6;cursor:not-allowed}:where(.dwui-modal-dialog-button:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-movable-window){position:absolute;display:flex;flex-direction:column;box-sizing:border-box;min-width:var(--dwui-min-width-movable-window, auto);max-height:var(--dwui-max-height-movable-window, none);border:1px solid var(--dwui-border-color-movable-window, light-dark(#8f8f8f, #6b6f76));border-radius:var(--dwui-radius-movable-window, 4px);background:var(--dwui-background-movable-window, Canvas);color:var(--dwui-color-text-movable-window, CanvasText);box-shadow:var(--dwui-box-shadow-movable-window, 0 2px 8px rgba(0, 0, 0, .33));outline:none;overflow:hidden}:where(.dwui-movable-window-frame){display:flex;flex:1 1 auto;flex-direction:column;min-height:0}:where(.dwui-movable-window-header){display:flex;flex:0 0 auto;align-items:center;gap:.33em;padding:var(--dwui-padding-movable-window-header, .17em .33em);border-bottom:1px solid var(--dwui-border-color-movable-window, light-dark(#8f8f8f, #6b6f76));background:var(--dwui-background-movable-window-header, transparent);color:var(--dwui-color-text-movable-window-header, inherit)}:where(.dwui-movable-window-title){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where(.dwui-movable-window-close-button){display:inline-flex;align-items:center;justify-content:center;padding:.17em;border:none;border-radius:4px;background-color:transparent;background-image:none;color:inherit;font:inherit;cursor:pointer}:where(.dwui-movable-window-close-button:hover){background:var(--dwui-background-movable-window-close-button-hover, light-dark(rgba(0, 0, 0, .08), rgba(255, 255, 255, .12)))}:where(.dwui-movable-window-close-button:focus-visible){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-movable-window-body){flex:1 1 auto;box-sizing:border-box;min-height:0;padding:var(--dwui-padding-movable-window-body, .4em);overflow:auto}:where(.dwui-movable-window-header.dwui-movable,.dwui-movable-window-body.dwui-movable){cursor:move;touch-action:none}:where(.dwui-movable-window-header.dwui-movable){user-select:none}:where(.dwui-movable-window-resizer){position:absolute;right:0;bottom:0;width:18px;height:18px;color:var(--dwui-color-text-movable-window-resizer, GrayText);cursor:nwse-resize;touch-action:none}:where(.dwui-movable-window-resizer>svg){display:block;pointer-events:none}:where(.dwui-movable-window-corner){position:absolute;width:18px;height:18px;touch-action:none}:where(.dwui-movable-window-corner.dwui-top-left){top:0;left:0;clip-path:polygon(0 0,100% 0,100% 6px,6px 6px,6px 100%,0 100%);cursor:nwse-resize}:where(.dwui-movable-window-corner.dwui-top-right){top:0;right:0;clip-path:polygon(0 0,100% 0,100% 100%,calc(100% - 6px) 100%,calc(100% - 6px) 6px,0 6px);cursor:nesw-resize}:where(.dwui-movable-window-corner.dwui-bottom-left){bottom:0;left:0;clip-path:polygon(0 0,6px 0,6px calc(100% - 6px),100% calc(100% - 6px),100% 100%,0 100%);cursor:nesw-resize}:where(.dwui-movable-window-loading){position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:var(--dwui-background-movable-window-loading, light-dark(rgba(0, 0, 0, .15), rgba(0, 0, 0, .4)))}:where(.dwui-movable-window-spinner){box-sizing:border-box;width:var(--dwui-size-movable-window-spinner, 48px);height:var(--dwui-size-movable-window-spinner, 48px);border:6px solid var(--dwui-border-color-movable-window-spinner, light-dark(rgba(0, 0, 0, .15), rgba(255, 255, 255, .2)));border-left-color:var(--dwui-border-color-movable-window-spinner-accent, light-dark(rgba(47, 90, 74, .8), rgba(140, 200, 170, .8)));border-radius:50%;animation:dwui-movable-window-spin 1.1s linear infinite}@keyframes dwui-movable-window-spin{to{transform:rotate(360deg)}}:where(html:has(.dwui-overlay-box),html:has(.dwui-overlay-box)>body){overflow:hidden}:where(.dwui-overlay-box){position:fixed;inset:0;z-index:calc(var(--dwui-z-index-overlay-box, 5000) + var(--dwui-order-window, 0))}:where(.dwui-overlay-box-backdrop){position:absolute;inset:0;background:var(--dwui-background-overlay-box-backdrop, light-dark(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)))}:where(.dwui-overlay-box-container){--dwui-border-color-movable-window: var(--dwui-border-color-overlay-box, light-dark(#8f8f8f, #6b6f76));--dwui-radius-movable-window: var(--dwui-radius-overlay-box, 4px);--dwui-background-movable-window: var(--dwui-background-overlay-box, Canvas);--dwui-color-text-movable-window: var(--dwui-color-text-overlay-box, CanvasText);--dwui-box-shadow-movable-window: var(--dwui-box-shadow-overlay-box, 0 2px 8px rgba(0, 0, 0, .33));--dwui-padding-movable-window-header: var(--dwui-padding-overlay-box-header, .17em .33em);--dwui-background-movable-window-header: var(--dwui-background-overlay-box-header, transparent);--dwui-color-text-movable-window-header: var(--dwui-color-text-overlay-box-header, inherit);--dwui-background-movable-window-close-button-hover: var(--dwui-background-overlay-box-close-button-hover, light-dark(rgba(0, 0, 0, .08), rgba(255, 255, 255, .12)));--dwui-padding-movable-window-body: var(--dwui-padding-overlay-box-body, .4em);--dwui-color-text-movable-window-resizer: var(--dwui-color-text-overlay-box-resizer, GrayText);--dwui-background-movable-window-loading: var(--dwui-background-overlay-box-loading, light-dark(rgba(0, 0, 0, .15), rgba(0, 0, 0, .4)));--dwui-size-movable-window-spinner: var(--dwui-size-overlay-box-spinner, 48px);--dwui-border-color-movable-window-spinner: var(--dwui-border-color-overlay-box-spinner, light-dark(rgba(0, 0, 0, .15), rgba(255, 255, 255, .2)));--dwui-border-color-movable-window-spinner-accent: var(--dwui-border-color-overlay-box-spinner-accent, light-dark(rgba(47, 90, 74, .8), rgba(140, 200, 170, .8)))}:where(.dwui-overlay-box-fade-enter-active,.dwui-overlay-box-fade-leave-active){transition:opacity .25s ease}:where(.dwui-overlay-box-fade-enter-from,.dwui-overlay-box-fade-leave-to){opacity:0}:where(.dwui-page-section){display:block;margin:.33em 0 .67em;padding-top:.17em;font-size:var(--dwui-font-size-page-section, inherit);font-weight:500}:where(.dwui-page-section-title){display:flex;align-items:center;font-size:var(--dwui-font-size-page-section-title, 1.17em)}:where(.dwui-page-section-content){margin:.67em 0 .67em 1.33em}:where(.dwui-page-title){display:flex;align-items:center;justify-content:space-between;width:var(--dwui-width-page-title, auto);padding:.33em;border-radius:4px;background:var(--dwui-background-page-title, linear-gradient(light-dark(#323232, #3c3f45) 0%, light-dark(rgb(32, 32, 31), #2b2d31) 25%, light-dark(rgb(32, 32, 31), #2b2d31) 75%, light-dark(#323232, #3c3f45) 100%));color:var(--dwui-color-text-page-title, rgb(220, 220, 220));font-size:var(--dwui-font-size-page-title, 1.17em);font-weight:var(--dwui-font-weight-page-title, normal)}:where(.dwui-screen-loading){padding:0;border:none;outline:none;background-color:transparent;background-image:none;overflow:visible}.dwui-screen-loading:focus-visible{outline:none}:where(.dwui-screen-loading::backdrop){background:var(--dwui-background-screen-loading, light-dark(rgba(0, 0, 0, .25), rgba(0, 0, 0, .5)))}:where(.dwui-screen-loading-spinner){box-sizing:border-box;width:var(--dwui-size-screen-loading-spinner, 100px);height:var(--dwui-size-screen-loading-spinner, 100px);border:var(--dwui-border-width-screen-loading-spinner, 6px) solid var(--dwui-border-color-screen-loading-spinner, light-dark(rgba(0, 0, 0, .15), rgba(255, 255, 255, .2)));border-left-color:var(--dwui-border-color-screen-loading-spinner-accent, light-dark(rgba(47, 90, 74, .8), rgba(140, 200, 170, .8)));border-radius:50%;animation:dwui-screen-loading-spin 1.1s linear infinite}@keyframes dwui-screen-loading-spin{to{transform:rotate(360deg)}}:where(.dwui-tab-content[hidden]){display:none}:where(.dwui-tab-content[aria-checked=true]){display:block;position:relative;padding:.33em .67em;overflow:hidden;animation:dwui-tab-slide-in var(--dwui-duration-tab-slide, .35s) var(--dwui-easing-tab-slide, cubic-bezier(.22, 1, .36, 1))}:where(.dwui-tab-loading){position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:var(--dwui-overlay-color-tab-loading, light-dark(rgba(0, 0, 0, .25), rgba(0, 0, 0, .45)))}:where(.dwui-tab-loading-spinner){width:var(--dwui-size-tab-loading-spinner, 40px);height:var(--dwui-size-tab-loading-spinner, 40px);border:var(--dwui-border-width-tab-loading-spinner, 4px) solid var(--dwui-border-color-tab-loading-spinner, rgba(255, 255, 255, .4));border-top-color:var(--dwui-border-color-tab-loading-spinner-accent, #ffffff);border-radius:50%;animation:dwui-tab-loading-spin .8s linear infinite}@keyframes dwui-tab-loading-spin{to{transform:rotate(360deg)}}@keyframes dwui-tab-slide-in{0%{opacity:0;transform:translate(var(--dwui-distance-tab-slide, -128px))}to{opacity:1;transform:translate(0)}}:where(.dwui-tab-group){margin-bottom:.67em}:where(.dwui-tab-headers){display:flex;flex-direction:row;flex-wrap:wrap;position:relative;margin-top:.4em;padding-bottom:.33em}:where(.dwui-tab-radio){position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}:where(.dwui-tab-item){display:block;min-width:100px;padding:0 .33em;border:1px solid var(--dwui-border-color-tab, light-dark(#565656, #8a8a8a));border-bottom:1px solid var(--dwui-border-color-tab-header-accent, #5ab4bd);background:var(--dwui-background-tab-header, linear-gradient(light-dark(#1313c7, #2a3a8f), light-dark(navy, #141c4d)));line-height:2em;text-align:center;white-space:nowrap;color:var(--dwui-color-text-tab-header, azure);text-overflow:ellipsis;cursor:pointer;transition:all .2s ease}:where(.dwui-tab-radio:checked+.dwui-tab-item){background:var(--dwui-background-tab-header-selected, linear-gradient(light-dark(#1313c7, #2a3a8f), light-dark(rgb(149, 149, 234), #5a62b8), light-dark(#1313c7, #2a3a8f)));color:var(--dwui-color-text-tab-header-selected, azure);cursor:default}:where(.dwui-tab-radio:disabled+.dwui-tab-item){background:var(--dwui-background-tab-header-disabled, light-dark(gray, #4a4a4a));cursor:not-allowed}:where(.dwui-tab-item.dwui-tab-warn){background:var(--dwui-background-tab-header-warn, light-dark(#efef13, #8a8a10));color:var(--dwui-color-text-tab-header-warn, light-dark(midnightblue, #fffbd0))}:where(.dwui-tab-radio:checked+.dwui-tab-item.dwui-tab-warn){background:var(--dwui-background-tab-header-warn-selected, linear-gradient(light-dark(#fafa06, #8a8a10), light-dark(rgb(232, 238, 206), #a8a860), light-dark(#fafa06, #8a8a10)))}:where(.dwui-tab-item.dwui-tab-error){background:var(--dwui-background-tab-header-error, light-dark(red, #a01818));color:var(--dwui-color-text-tab-header-error, azure)}:where(.dwui-tab-radio:checked+.dwui-tab-item.dwui-tab-error){background:var(--dwui-background-tab-header-error-selected, linear-gradient(light-dark(#ff0000, #a01818), light-dark(rgb(240, 136, 136), #c86060), light-dark(#ff0000, #a01818)))}:where(.dwui-tab-radio:not(:checked)+.dwui-tab-item:hover){box-shadow:inset 0 0 0 999px var(--dwui-overlay-color-tab-header-hover, light-dark(rgba(255, 255, 255, .35), rgba(255, 255, 255, .15)))}:where(.dwui-tab-radio:focus-visible+.dwui-tab-item){outline:var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-outline-offset-focus-ring, 2px)}:where(.dwui-tab-items){height:100%;border:1px solid var(--dwui-border-color-tab, light-dark(#565656, #8a8a8a));overflow:hidden}:where(.dwui-warning-popper-popover){--dwui-max-width-anchored-popover: var(--dwui-max-width-warning-popper, calc(100vw - 16px) );--dwui-max-height-anchored-popover: var(--dwui-max-height-warning-popper, calc(100vh - 16px) );--dwui-padding-anchored-popover: var(--dwui-padding-warning-popper, .67em 1em);--dwui-border-color-anchored-popover: var(--dwui-border-color-warning-popper, light-dark(#8f8f8f, #6b6f76));--dwui-radius-anchored-popover: var(--dwui-radius-warning-popper, 4px);--dwui-background-anchored-popover: var(--dwui-background-warning-popper, Canvas);--dwui-background-anchored-popover-arrow: var(--dwui-background-warning-popper-arrow, var(--dwui-background-warning-popper, Canvas));--dwui-color-text-anchored-popover: var(--dwui-color-text-warning-popper, CanvasText);--dwui-box-shadow-anchored-popover: var(--dwui-box-shadow-warning-popper, 0 2px 8px rgba(0, 0, 0, .25))}:where(html:has(.dwui-floating-component.dwui-lock-scroll),html:has(.dwui-floating-component.dwui-lock-scroll)>body){overflow:hidden}:where(.dwui-floating-component){z-index:calc(var(--dwui-z-index-floating-component, 5000) + var(--dwui-order-window, 0));--dwui-min-width-movable-window: var(--dwui-min-width-floating-component, 200px);--dwui-max-height-movable-window: var(--dwui-max-height-floating-component, 90vh);--dwui-border-color-movable-window: var(--dwui-border-color-floating-component, light-dark(#8f8f8f, #6b6f76));--dwui-radius-movable-window: var(--dwui-radius-floating-component, 4px);--dwui-background-movable-window: var(--dwui-background-floating-component, Canvas);--dwui-color-text-movable-window: var(--dwui-color-text-floating-component, CanvasText);--dwui-box-shadow-movable-window: var(--dwui-box-shadow-floating-component, 0 2px 8px rgba(0, 0, 0, .33));--dwui-padding-movable-window-header: var(--dwui-padding-floating-component-header, .17em .33em);--dwui-background-movable-window-header: var(--dwui-background-floating-component-header, transparent);--dwui-color-text-movable-window-header: var(--dwui-color-text-floating-component-header, inherit);--dwui-background-movable-window-close-button-hover: var(--dwui-background-floating-component-close-button-hover, light-dark(rgba(0, 0, 0, .08), rgba(255, 255, 255, .12)));--dwui-padding-movable-window-body: var(--dwui-padding-floating-component-body, .4em);--dwui-color-text-movable-window-resizer: var(--dwui-color-text-floating-component-resizer, GrayText);--dwui-background-movable-window-loading: var(--dwui-background-floating-component-loading, light-dark(rgba(0, 0, 0, .15), rgba(0, 0, 0, .4)));--dwui-size-movable-window-spinner: var(--dwui-size-floating-component-spinner, 48px);--dwui-border-color-movable-window-spinner: var(--dwui-border-color-floating-component-spinner, light-dark(rgba(0, 0, 0, .15), rgba(255, 255, 255, .2)));--dwui-border-color-movable-window-spinner-accent: var(--dwui-border-color-floating-component-spinner-accent, light-dark(rgba(47, 90, 74, .8), rgba(140, 200, 170, .8)))}:where(.dwui-floating-component-message){overflow-wrap:anywhere;white-space:pre-wrap}:where(.dwui-floating-component-fade-enter-active,.dwui-floating-component-fade-leave-active){transition:opacity .25s ease}:where(.dwui-floating-component-fade-enter-from,.dwui-floating-component-fade-leave-to){opacity:0}
|
package/package.json
CHANGED
package/src/data-table.vue
CHANGED
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
・行クリックによる行選択
|
|
12
12
|
・カーソルキーでの選択行移動
|
|
13
13
|
・ヘッダクリックによるソート
|
|
14
|
-
・ヘッダドラッグによる列入れ替え(制限事項あり)
|
|
15
14
|
・ヘッダ列幅変更
|
|
16
15
|
|
|
17
16
|
一覧のデータ部(tbody内のコンテンツ)は利用者が定義する
|
|
@@ -606,7 +605,7 @@ onBeforeUnmount(() => {
|
|
|
606
605
|
});
|
|
607
606
|
|
|
608
607
|
watch(() => props.headers, (newValue, oldValue) => {
|
|
609
|
-
//
|
|
608
|
+
// 列の構成が変わったときは、変更した列幅を引き継がない
|
|
610
609
|
const newIds = newValue.map(header => header.id);
|
|
611
610
|
const oldIds = oldValue.map(header => header.id);
|
|
612
611
|
if (newIds.length !== oldIds.length || newIds.some(id => !oldIds.includes(id))) {
|
|
@@ -768,14 +767,14 @@ defineExpose({
|
|
|
768
767
|
display: flex;
|
|
769
768
|
align-items: center;
|
|
770
769
|
justify-content: center;
|
|
771
|
-
background: var(--dwui-overlay-color-loading, light-dark(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.45)));
|
|
770
|
+
background: var(--dwui-overlay-color-data-table-loading, light-dark(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.45)));
|
|
772
771
|
}
|
|
773
772
|
|
|
774
773
|
:where(.dwui-data-table-loading-spinner) {
|
|
775
|
-
width: var(--dwui-size-loading-spinner, 40px);
|
|
776
|
-
height: var(--dwui-size-loading-spinner, 40px);
|
|
777
|
-
border: 4px solid var(--dwui-border-color-loading-spinner, rgba(255, 255, 255, 0.4));
|
|
778
|
-
border-top-color: var(--dwui-border-color-loading-spinner-accent, #ffffff);
|
|
774
|
+
width: var(--dwui-size-data-table-loading-spinner, 40px);
|
|
775
|
+
height: var(--dwui-size-data-table-loading-spinner, 40px);
|
|
776
|
+
border: var(--dwui-border-width-data-table-loading-spinner, 4px) solid var(--dwui-border-color-data-table-loading-spinner, rgba(255, 255, 255, 0.4));
|
|
777
|
+
border-top-color: var(--dwui-border-color-data-table-loading-spinner-accent, #ffffff);
|
|
779
778
|
border-radius: 50%;
|
|
780
779
|
animation: dwui-data-table-loading-spin 0.8s linear infinite;
|
|
781
780
|
}
|
package/src/screen-loading.vue
CHANGED
|
@@ -68,6 +68,14 @@ watch(() => props.loading, (newValue) => {
|
|
|
68
68
|
overflow: visible;
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
+
/*
|
|
72
|
+
* showModal() でフォーカスを受けるのはこの dialog 自身なので、アプリ側の :focus-visible のリングが出てしまう。
|
|
73
|
+
* 操作を受け付けない暗幕なので、:where() にせずアプリ側の指定より強くして打ち消す
|
|
74
|
+
*/
|
|
75
|
+
.dwui-screen-loading:focus-visible {
|
|
76
|
+
outline: none;
|
|
77
|
+
}
|
|
78
|
+
|
|
71
79
|
:where(.dwui-screen-loading::backdrop) {
|
|
72
80
|
background: var(--dwui-background-screen-loading, light-dark(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.5)));
|
|
73
81
|
}
|
|
@@ -76,7 +84,7 @@ watch(() => props.loading, (newValue) => {
|
|
|
76
84
|
box-sizing: border-box;
|
|
77
85
|
width: var(--dwui-size-screen-loading-spinner, 100px);
|
|
78
86
|
height: var(--dwui-size-screen-loading-spinner, 100px);
|
|
79
|
-
border:
|
|
87
|
+
border: var(--dwui-border-width-screen-loading-spinner, 6px) solid var(--dwui-border-color-screen-loading-spinner, light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.2)));
|
|
80
88
|
border-left-color: var(--dwui-border-color-screen-loading-spinner-accent, light-dark(rgba(47, 90, 74, 0.8), rgba(140, 200, 170, 0.8)));
|
|
81
89
|
border-radius: 50%;
|
|
82
90
|
animation: dwui-screen-loading-spin 1.1s linear infinite;
|
package/src/tab-content.vue
CHANGED
|
@@ -117,14 +117,14 @@ const setLoading = (value: boolean) => {
|
|
|
117
117
|
display: flex;
|
|
118
118
|
align-items: center;
|
|
119
119
|
justify-content: center;
|
|
120
|
-
background: var(--dwui-overlay-color-loading, light-dark(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.45)));
|
|
120
|
+
background: var(--dwui-overlay-color-tab-loading, light-dark(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.45)));
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
:where(.dwui-tab-loading-spinner) {
|
|
124
|
-
width: var(--dwui-size-loading-spinner, 40px);
|
|
125
|
-
height: var(--dwui-size-loading-spinner, 40px);
|
|
126
|
-
border: 4px solid var(--dwui-border-color-loading-spinner, rgba(255, 255, 255, 0.4));
|
|
127
|
-
border-top-color: var(--dwui-border-color-loading-spinner-accent, #ffffff);
|
|
124
|
+
width: var(--dwui-size-tab-loading-spinner, 40px);
|
|
125
|
+
height: var(--dwui-size-tab-loading-spinner, 40px);
|
|
126
|
+
border: var(--dwui-border-width-tab-loading-spinner, 4px) solid var(--dwui-border-color-tab-loading-spinner, rgba(255, 255, 255, 0.4));
|
|
127
|
+
border-top-color: var(--dwui-border-color-tab-loading-spinner-accent, #ffffff);
|
|
128
128
|
border-radius: 50%;
|
|
129
129
|
animation: dwui-tab-loading-spin 0.8s linear infinite;
|
|
130
130
|
}
|